今回は、WEBデザイン初心者でも簡単に使えるBootstrap4の使い方をご紹介します。これから、複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していければと思っているので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。CDNを使用するBootstrapを動かしてみる(グリッドレイアウト編)1.グリッドレイアウトのルール2.デバイス別のクラス付与についてBootstrapを動かしてみる(テーブル編)1.テーブルのルール2.標準のテーブルを作る3.暗めのテーブルを作る4.交互に行の色が変わるテーブルを作る5.縦線が入ったテーブルを作る6.罫線のないテーブルを作る7.マウスオーバーで行の背景色がホバー表示するテーブルを作る8.行間が狭いテーブルを作る9.テーブルの背景色を変えてみるまとめBootstrapとは?まず、そもそもBootstrap(ブートストラップ)って何?というところからですね。私は初めてBootstrapを耳にした時、ビリーズブートキャンプを連想しました(笑)黒人が踊るやつですね。Bootstrapは最も有名なCSSフレームワークで、モバイルファースト・レスポンシブデザインで開発されています。CSSフレームワークと聞くと難しいですが、例えば、「2カラムのグリッドレイアウトを作りたい時」「見栄えの良いテーブルを作りたい時」1からCSSを記述しなくても、あらかじめBootstrapを読み込んでおけば、HTMLに対してクラスを付与するだけで、誰でもそれなりの見栄えのサイトを作ることが出来ます。Bootstrapを使うメリット弊社でもWEB制作の際は基本的にBootstrapを使って制作をさせていただいているのですが、Bootstrapを使用するメリットがあります。レスポンシブWebデザインに対応している最近のデザインを取り入れることができるボタンやフォームなどUI周りのパーツが予め用意されているので、コーディングの時間短縮になるデザインが出来ない人でもキレイなWebページを簡単に作ることが出来るBootstrapをある程度使いこなせるようになれば、1からコーディングするよりもかなり時短になることは間違いないです。Bootstrapを使うための準備まずは、Bootstrapを使うための「前準備」を説明します。CDNを使用するまずは、サイトにBootstrapを導入する必用がありますが、導入する方法が2種類あります。ファイルをダウンロードして、サイトに読み込むCDNを使って読み込むまずどちらの方法も、公式サイトから「Download」をクリックします。ダウンロードページへ移動しますので、2のCDNを使って読み込む場合は、「BootstrapCND」からコピーして<head></head>に貼り付けましょう。1の「ファイルをダウンロードして、サイトに読み込む」場合は、下記からファイルをダウンロードしてください。こちらには、Bootstrap最新版ののCSSとJSが含まれています。こちらも、ダウンロードしたら<head></head>内に記述します。src="js/bootstrap.min.js"></script>注意点bootstrapのjsは、必ずjquery本体の後に記述しましょう。jquery本体の前に記述してしまったり、jquery本体がないと作動しません。Bootstrapを動かしてみる(グリッドレイアウト編)Bootstrapを使う準備が出来たら、早速使ってみましょう。基礎的な画面を縦横で分断した方眼のブロックを組み合わせてコンテンツを組み合わせていく「グリッドレイアウト」を使います。この「グリッドレイアウト」を覚えることで、パソコンやスマートフォンなどデバイスに応じたレイアウトを作成することができます。1.グリッドレイアウトのルールグリッドレイアウトのルールを見てみましょう。100%)を使用します。行「row」が列「column」を囲みます。.col(-{breakpoint})-*でcolumnの幅がきまります。1行につき合計が12になるように指定します。見るとものすごく難しく感じますが、下記のソース例を使ってみましょう。-->3つの列の3列目</div></div></div>上記のHTMLを打ち込むと、下記のようなグリッドレイアウトが完成します。(わかりやすいよう、背景色をつけています)2.デバイス別のクラス付与について例えば、PC画面(1200px以上のモニター)で見た時は3列に並べたいけど、スマホで見た時は1行ずつにしたいといった時は、画面サイズごとのクラス付与が必要です。先程のHTML例で「col-sm」とクラス付与していた部分を、画面サイズごとに指定します。.col-xl-Bootstrapを動かしてみる(テーブル編)次に、よく使うテーブルの使いかたを紹介します。テーブルと言えば簡単に作れるイメージがありますが、Bootstrapの機能を使えば一瞬で見やすいテーブルレイアウトを作成できます。1.テーブルのルール先程のグリッドレイアウト同様に、containerもしくはcontainer-fluidの中にテーブルを作成しましょう。追加2.標準のテーブルを作る一番基本的なテーブルの作り方は、<table>要素に対してクラス「.table」を付与するだけです。scope="row">1</th><td>テーブルのセル</td><td>テーブルのセル</td><td>テーブルのセル</td></tr></tbody></table></div>3.暗めのテーブルを作る<table>要素に対してクラス「.table」「.table-dark」を付与すると、ダークモードのテーブルを作ることができます。scope="row">1</th><td>テーブルのセル</td><td>テーブルのセル</td><td>テーブルのセル</td></tr></tbody></table></div>4.交互に行の色が変わるテーブルを作る<table>要素に対してクラス「.table」「.table-striped」を付与すると、交互に行の色が変わるテーブルを作ることができます。デフォルトのテーブルよりもメリハリがついて見やすいですね。scope="row">1</th><td>テーブルのセル</td><td>テーブルのセル</td><td>テーブルのセル</td></tr></tbody></table></div>5.縦線が入ったテーブルを作る<table>要素に対してクラス「.table」「.table-bordered」を付与すると、縦線が入ったテーブルを作ることができます。scope="row">1</th><td>テーブルのセル</td><td>テーブルのセル</td><td>テーブルのセル</td></tr></tbody></table></div>6.罫線のないテーブルを作る<table>要素に対してクラス「.table」「.table-borderless」を付与すると、罫線のないテーブルを作ることができます。scope="row">1</th><td>テーブルのセル</td><td>テーブルのセル</td><td>テーブルのセル</td></tr></tbody></table></div>7.マウスオーバーで行の背景色がホバー表示するテーブルを作る<table>要素に対してクラス「.table」「.table-hover」を付与すると、マウスオーバーで行の背景色がホバー表示するテーブルを作ることができます。scope="row">1</th><td>テーブルのセル</td><td>テーブルのセル</td><td>テーブルのセル</td></tr></tbody></table></div>8.行間が狭いテーブルを作る<table>要素に対してクラス「.table」「.table-sm」を付与すると、行間が狭いテーブルを作ることができます。scope="row">1</th><td>テーブルのセル</td><td>テーブルのセル</td><td>テーブルのセル</td></tr></tbody></table></div>9.テーブルの背景色を変えてみる背景色クラスを使用して、表の行やセルの背景色を簡単に変えられます。テーブルのセルまとめ今回は入門編ということで、Bootstrapの導入方法と基本的な使い方(グリッドレイアウト・テーブル)をご紹介しました。グリッドレイアウト・テーブルともに今回ご紹介した分だけでもほんの一部なので、Bootstrapは本当に奥が深く、その分柔軟にカスタマイズできるのが魅力です。私がBootstrapを使い始めた頃、1番最初につまづいたのが「グリッドレイアウト」です。柔軟性が高い分、とても難しく感じました。グリッドレイアウトさえ覚えてしまえば、あとは+αでよく使う機能をインプットしておくだけでかなりコーディングも時短できます。これから、複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していければと思っているので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。社員Aフロントエンドエンジニア・デザイナーの社員Aです。更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。MAX】2018年10月19日10今話題のLINEのオープンチャットとは?実際に参加してみた2019年09月11。