クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Bootstrap4

Bootstrap4 レイアウトの基本

投稿日:2017年11月16日 更新日:

Bootstrapについて

レスポンシブサイトを制作する時の心強い味方がCSSフレームワークです。
CSSフレームワークがあると短時間で簡単にレスポンシブサイトが制作できます。
その代表格と言えばTwitter社が提供してくれている「Bootstrap」です。
Bootstrapは慣れてしまえば簡単に使いこなす事ができますが、初めて使う方には少し難しいかもしれません。
そんな方のために「Bootstrap」のレイアウトの基本を解説したいと思います。

 

Bootstrapを読み込んでみよう

まずはBootstrapのCSSを読み込んでみましょう。
CSSを読み込む事で、Bootstrapで定義されているCSSクラスを利用する事ができるようになります。
CDNが用意されていますので、勉強やお試しで利用するにはこれが便利です。

上記を追加する事によりBootstrapのクラスが利用可能になります。
これで準備はOKです。
今回利用するBootstrapのバージョンは「4.0.0-beta.2」です。

 

レイアウトの基本クラス

Bootstrapのレイアウトには次の3つのクラスを使います。

  • container
  • row
  • col-xx(xxには1〜12までの数字が入ります)

3つのクラスの関係は次の図の通りです。

containerクラスについて

レイアウトの一番外側のクラスです。
このクラスの中にレイアウトを設定していく事になります。
初期時では、最大幅は1140pxに設定されています。

 

rowクラスについて

containerクラスの中で設定します。
横にエリアをガバッと確保するイメージですね。
このエリアはcontainerクラス内にいくつでも作る事ができます。
row=行と考えると覚えやすいと思います。

 

col-xxクラスについて

rowクラスの中で設定します。
rowの中で列を確保していくイメージです。
col=列と考えてください。

実際には「xx」には1〜12までの数字を入れます。
入れた数字によって確保される領域の大きさが変わります。
1つのrowの中には合計で12までの大きさを確保する事が可能です。

 

サンプル

上記3つのクラスが分かれば、基本的なレスポンシブレイアウトを作ることができます。
最後にサンプルを作成しました。
分かりやすくするためにCSSに色々と記述していますが、これらが無くても問題ありません。
サンプルを開いたらブラウザの幅も変えてみてください。
これだけでレスポンシブになっていますよね!

Bootstrapレイアウトサンプル

以上がBootstrapの基本中の基本になります。
簡単に使えますのでどんどん使ってくださいね!

-Bootstrap4

執筆者:

関連記事

Bootstrap4 インライン要素の左寄せ・右寄せ・中央寄せ(センタリング)

Bootstrap4では、インライン要素の左寄せ・右寄せ・中央寄せができるクラスがあらかじめ用意されています。 CSSをその都度書く必要はありません。クラスを追加することで、インライン要素を寄せること …

Bootstrap4 上部固定メニューヘッダを作るサンプル(fixed-top)

スマホ用のサイトを作成するときに固定メニューはよく使いますよね。 Bootstrap4でもクラスを追加するだけで固定メニューを作ることができます。 サンプルも作ってますので参考になると嬉しいです。 H …

Bootstrap4 ブロック要素の左寄せ・右寄せ・中央寄せ(センタリング)

Bootstrap4では、ブロック要素の左寄せ・右寄せ・中央寄せができるクラスが用意されています。 そのクラスを追加することで、ブロック要素を寄せることができます。 サンプルも作りました。 ブロック要 …

Bootstrap4 画面幅100%で制作したい場合(サンプル付き)

Bootstrap4のcontainerクラスは最大幅が1140pxに設定されています。 サイトのよっては、画面幅100%を使って制作したい場合があります。 オシャレなサイトなどで多いですよね。 こん …

Bootstrap4 ブレークポイントを変更したい(ソースファイルをコンパイルする)

Bootstrap4のブレークポイントはあらかじめ設定されていますが、案件によってはブレークポイントを変更したい場合があります。 ブレークポイントを変更する場合、bootstrap.cssを直接編集す …


comment

メールアドレスが公開されることはありません。