こんにちは、yutaです。
CSSのフレームワークであるBootstrapを利用したWEBサイトのレスポンシブ対応の基礎に関してお話しします。
この記事を読むと以下のことが分かります。
Bootstrapって聞いたことあるけど、どうやって使えばいいの？
Bootstrapってどういう仕組み？
1.Bootstrapとは
2.Bootstrapの基礎概念
3.Bootstrapを使ってレスポンシブ対応してみる
3-1.Bootstrapの導入方法
3-2.container、row、columnの記述
4.WEBサイトを表示してみる
1.Bootstrapとは
Bootstrapとは、twitter社が開発したCSSのフレームワークです。
フレームワークとは、便利機能がたくさん詰まったツールと考えたら良いです。
フレームワークを使うことで本来ながーーいコードを書かないと実現できないことをたったの1行で実現できたりします。
2.Bootstrapの基礎概念
分かりやすいようにイラストで説明します。
Bootstrapは↑イラストのように画面を12分割して、その中にcontainer(箱)、row(行)、column(列)を作って要素を配置していくという概念で成り立っています。
↑イラストでいえば、containerの中に2つのrowがあります。上側のrowには3つのcolumnが横並びに配置されています。下側のrowには2つのcolumnが縦並びに配置されています。
Bootstrapのポイントは、12分割された画面の何個分の幅で要素を表示するかで1行に横並びにできる要素の数が決まることです。
要するに、↑イラストの上側のrowではcolumnに、12分割された画面の4個分の幅ずつ領域を割り当てているので、画像が3つ横並びになります。4+4+4=12ですので。
また、↑イラストの下側のrowではcolumnに、12分割された画面の12個分の幅ずつ領域を割り当てているので、1つのcolumnで画面幅をいっぱいに使ってしまい、結果2行で表示することになります。
3.Bootstrapを使ってレスポンシブ対応してみる
何事も習うより慣れろということで、実際にBootstrapを使ってレスポンシブ対応をしてみましょう。
今回は↓イラストのように、PC画面では3つの画像が横並びに表示され、スマホ画面では3つの画像が縦並びに表示される、というレスポンシブ対応を目指します。
3-1.Bootstrapの導入方法
Bootstrapの導入方法は簡単で、何かをダウンロードする必要はありません。
手順はBootstrap公式サイトに書いてありますが日本語で説明しますね。
全部コピペで大丈夫です。
1.<head></head>内に以下のCSSを読み込む。
他のCSSファイルよりも先に読み込まれるように、上の行に記述してください。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">2.</body>の直前に以下のスクリプトを記述。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>3.<!doctype html>を記述してHTML5文書であることを明示。
BootstrapはHTML5でなければ思ったように動かないことがあるようなので、HTML文書の最初に以下のコードを必ず記述してください。
<!doctype html>
<html lang="ja">
...
</html>4.viewport meta tagを追加。
適切なレスポンシブ対応をするためにviewport meta tagを以下の通り記述します。記述場所は、CSSの上あたりで大丈夫です。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">以上で、Bootstrapの導入が完了です。この時点で自分のHTMLファイルが以下のようになっていることを確認してください。もしくは、これを全部コピペしても良いです。
3-2.container、row、columnの記述
それでは早速、BootstrapでHTMLの中身を記述していきます。
まず、<body></body>内に以下を記述してください。
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-4"><img class="img-fluid" src="./images/img1.jpg"></div>
<div class="col-xs-12 col-lg-4"><img class="img-fluid" src="./images/img2.jpg"></div>
<div class="col-xs-12 col-lg-4"><img class="img-fluid" src="./images/img3.jpg"></div>
</div>
</div>これを見たら分かりますが、基礎概念の説明で出てきたcontainer、row、columnがそれぞれ<div>のclass名として記述されています。
このようにBootstrapでは、class名で色々な機能を追加していきます。
containerとrowに関しては、それぞれ・・・
<div class="container">
<div class="row">と書かれているだけですが、columnだけは・・・
<div class="col-xs-12 col-lg-4">と記述されています。
↑の記述の意味を端的に説明すれば以下のようになります。
col-xs-12 : 画面がxsサイズの時は12分割した画面の12個分の幅を使用して表示
col-lg-4 : 画面がlgサイズの時は12分割した画面の4個分の幅を使用して表示
つまり、1つの要素の表示方法(表示幅)を画面サイズに応じて複数指定できるということです。だから、レスポンシブ対応ができるわけですね。
でも、xsとかlgとか何？って疑問を持たれると思いますので、以下で説明します。
Bootstrapでは、画面幅が5つ定義されており、それぞれ以下のように表現します。
Extra small : 画面幅544px未満 : col-xs-(使用する分割幅数)
Small : 画面幅544px〜768px未満 : col-sm-(使用する分割幅数)
Medium : 画面幅768px〜992px未満 : col-md-(使用する分割幅数)
Large : 画面幅992px〜1200px未満 : col-lg-(使用する分割幅数)
Extra large : 画面幅1200px以上 : col-xl-(使用する分割幅数)
ですので、↑で追加したコードに書いてある
<div class=”col-xs-12 col-lg-4″>
は、画面幅544px〜768px未満の時は、分割幅12個分で1要素を表示するようにして、画面幅992px〜1200px未満の時は、分割幅4個分で1要素を表示するように指定しています。
なお、これだと画面幅544px未満の時や、768px〜992px未満の時はどうなるの？という疑問が出てくると思いますが、この場合、いずれもcol-xs-12が適用されます。col-lg-4が適用されるのは画面幅が992px以上からなので、1200pxを超えた場合もcol-lg4が適用されます。
また、コードをよく見ると<img>タグの中にclass=”img-fluid”というものがあります。これは、↑のcol-xs-12やcol-lg-4などで指定した画面幅を画像が飛び出さないようにするためのものです。Bootstrapで画像を扱い際には使用してください。
以下に、最終的なHTMLファイルを公開しますので、自分のコードとの比較やコピペで使ってください。
4.WEBサイトを表示してみる
それでは、HTMLファイルをブラウザで開いてみます。
↓は、Google Chromeの「検証」機能を使ってPC閲覧モードとスマホ閲覧モードで表示のされ方を見ています。この昨日はレスポンシブ対応の検証をするときにかなり便利なので積極的に利用して見てください。
ところで↓の通り、PC画面では写真が横並び、スマホ画面では縦並びになっていて、レスポンシブ対応ができていることが分かります。
今回は、これで以上です。Bootstrapを使うと独自にCSSファイルを作成しなくてもレスポンシブ対応のWEBサイトを作成することができました。
もちろん、複雑なWEBサイトをコーディングする上でCSSファイルは必要ですが、Bootstrapの便利さが実感できたのではないでしょうか。Bootstrapは、奥が深くまだまだ機能があるようですので、僕も勉強しつつシェアしていきたいと思います。
ブログランキングに参加しています。↓のバナーをクリックしていただけると嬉しいです。では、また！
