Web制作

Bootstrap レスポンシブを簡単に 【グリッドシステム】

皆さんこんばんにちは、ユウです。

今回は、Web制作で使うと便利なBootstrapのグリッドシステムを実践的に紹介していこうと思います。

Bootstrapは一度使えるようになると感覚的に使えるようになります。

覚えるのにもそんなに知識はいらないので、気楽に読んでいもらえれば良いかと思います。

説明時には、テキストエディタを使って実際にコードを書いていくので、良ければパソコンの用意をしてから読んでもらうと良いかもです。

Bootstrapの基礎知識や導入方法などは、以前の記事で紹介しているのでそちらの方を知りたい方は、そちらを読んでみて下さい。

Bootstrap レスポンシブを簡単に 【基礎知識~導入方法】皆さんこんばんにちは、ユウです。 今回は、Web制作を行う際に使用すると便利な、Bootstrapについて基本的な事を紹介していき...

それでははじめて行きたいと思います。

Bootstrapの準備

今回Bootstrapの導入は、リンクから読み込んで行います。

リンクの読み込み方は、以前の記事で紹介していますが、こちらでも少しだけ紹介しておこうと思います。

以下のコードをhtmlファイルに貼り付けて下さい。


このコードを貼り付けることで、Bootstrapを読み込むことができます。

グリッドシステム

Bootstrapにはグリッドシステムという機能があります。

グリッドシステムとは、サイトの横幅を均一に分けるガイドラインでレイアウトを整える事を言います。

Bootstrapにはこのグリッド線が12本存在しており。このグリッド線を使用することで、自由なレスポンシブデザインを組み立てることができます。

以下の画像はパソコンの画面をイメージした画像になります。

このグリッド線を基準に画像は4本ずつコンテンツは8本使って表示しています。

この画像の幅が、スマートフォンに変わる狭い画面に画像を3個横に並べるので、キツキツになってしまいます。

このように画面の幅を変えた時に、画像を1列に1個並べるようにしたいときなどにグリッドシステムは役に立ちます

スマートフォンで上の表示をしたい場合は図のようになります。

このグリッドシステムは、特定のクラスで囲むことにより使いやすくなります。

上の画像のクラスを表わすとこんな感じになります。

基本的に.containerで全体を囲み、グループ毎に.rowで囲み、単体を.col-で囲むようになります。

必ずしも、.rowで囲む必要はないのですが、ここでは.rowで囲んでおくことをオススメします。

グリッドシステムを使用する際に重要なのは、.col-の部分となります。

グリッドシステムはここを変更することにより、画面の幅によってレイアウトを変更して行くことができます。

 

デバイスの幅<576px

縦スマホ
向け

≧576px

横スマホ
向け

≧768px

タブレット
向け

≧992px

デスクトップ
向け

≧1200px

大きいウィンドウ
向け

コンテナの
最大幅
なし
(自動)
540px720px960px1140px
クラス名.col-.col-sm-.col-md-.col-lg-.col-xl-

このように任意の画像幅により、クラスの設定をしていきます。

そして、グリッドシステムのクラスは「.col-①-②」という構造をしています。

①の部分は上の表から分かるように、画面の大きさを意味しています。

②の部分はグリッドの本数を何本使って行くのかを指定します。

この②には1~12の整数を入れる事ができます。

これについては、実際に使って行くと理解できるのでコードを書いていきましょう。

このコードをコピペして下さい。

このコードでは、大きいウィンドウの時3分割、タブレットサイズの時は2分割、スマホ向けの時は分割しないという様になっています。

この際、
グリッド線の本数の合計は12本
だという事に注意して下さい。

今回のコードで新しいところは.container-fluidの部分ですね。

この.container-fluidは横幅いっぱいにグリッド線を取ってくれます。

この意味が分からない人は一回.containerに変えてから表示してみて下さい。

そうすると、違いが分かるかと思います。

私的には、.container-fluidの方がよく使うかなという感じです。

グリッドシステムについては大体がこのような感じです。

最後に

今回はBootstrapのグリッドシステムについて紹介していきました。

Bootstrapは他にもいろいろと機能があるのですが、とりあえずこのシステムを覚えておくだけでもレスポンシブに生かせます。

もし、Bootstrapについてもっと知りたい方は、私の記事でもWeb制作の紹介をしていくうえで説明していきたいと思いますが、他にもググって見たりしてはどうでしょうか。

今回はこれで以上となります。

最後まで読んでいただきありがとうございました!

Bootstrapを使用してポートフォリオを制作している記事も書いているので、気になる方は訪れてみて下さい。

ポートフォリオ制作 【準備編】皆さんこんばんにちは、ユウです。 今回は、ポートフォリオ制作について紹介していきたいと思います。 実際に私が過去に作ったもの...
ABOUT ME
ユウ
プログラミング担当です。夜行性大学生やってます。 メンバーの中で一番プログラミングが得意で、将来はBMIという研究をしてALSの患者さんへの医療機器の開発を目標にしています。 無線LAN有線LANより便利。