クルーデザイン

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の画像で使用できる基本的なクラスをまとめました。 各クラスはimgタグに付加するだけで効果が発揮されます。 基本的なクラスは以下の4種類です。 Bootstrap4 画像用クラス …

Bootstrap4 マージン用クラス(margin)

Bootstrap4にはマージン用クラスが用意されています。 クラスに追加するだけでマージンが取られるので、とても便利ですよ。 サンプルも作ってますので一緒に見てくださいね。 次のように指定できます。 …

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

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

Bootstrap4 colクラスの使い方

Bootstrap4で縦の領域はcolクラスを使って分ける事になります。 縦幅を均等に分けたい場合 均等に縦幅を分けたい場合はrowの中にcolを好きな数だけ作ればOKです。 例えばrowの中にcol …

Bootstrap4 colの隙間(padding、margin)を削除する(サンプル付き)

Bootstrap4でデザインを忠実に再現したい時に、colの隙間(padding)が邪魔なときがあります。 この邪魔な隙間を無くしてしまおう!というのが今回の趣旨です。 サンプルも作りました。 CS …


comment

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