導入方法と基本・レスポンシブデザインを徹底解説2024年5月1日SHAREポストシェアはてブLINE記事にはプロモーションが含まれる場合があります。今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の使い方やよく使うクラスについて解説していきます。「グリッドシステム」とか「レスポンシブデザイン」とか「フレームワーク」とか「ブートストラップ」とか冒頭でいきなり専門用語がたくさんでてきましたね。最初は少し覚えることが多いですが、一旦覚えたらスマホ用のWebページも簡単に作っていくことができますよ!頑張ってみます。合わせて読みたい2019年3月時点で最新のBootstrap4.3の使い方についてはこちらをご参照ください。Collapseまとめブートストラップ(BootStrap)とはBootStrapの特徴Bootstrap公式サイトBootstrapはもともとTwitter社で作られたもので、レスポンシブデザイン対応のCSSフレームワークの一つです。フレームワークっていうのはなんなんでしょうか??フレームワークとは直訳すると「枠組み」のことで、汎用的な機能を共通化しておき簡単に利用できるようにした仕組みのことです。人のキャラを作るときに、顔・目・口などいくつかの部品があらかじめ用意されていて、それらを選択してキャラクターを作成できるようなアプリとかでありますよね。あ、たとえば、アメブロのキャラクターとかそんな感じで作れますよね!CSSフレームワークとはそれのCSS版で、あらかじめ用意されたブートストラップ用の部品を利用することで一から自分で作成するよりも簡単にWebページが作成できるようになります。BootStrapの特徴Bootstrapの登場によって、制作者は予め用意されたコードを記載するだけで、見栄えの良いWebサイトを短期間で制作することができるようになりました。レスポンシブデザイン対応デザイン性に優れたコンポーネント他シスタムのカスタマイズに役に立つレスポンシブデザイン対応レスポンシブデザインとは、1つのWebサイトで、PCからタブレット、スマートフォンなどの大きさの異なる画面に合わせて最適なレイアウトを表示する手法です。レスポンシブデザインは現在主流の方式です。デザイン性に優れたコンポーネントコンポーネント(部品)とは、フォームやボタン、ナビゲーションなどのパーツのことで、BootStrapであらかじめ用意されています。制作者はこれらのコンポーネント(部品)を自作する必要はなく、HTMLタグにクラスを追加するだけで、体裁の整ったコンポーネントをすぐに利用できます。BootStrapを採用しているサービスが多く、他シスタムカスタマイズに役に立つワードプレスの人気テーマでもたくさん利用されており、覚えておくとワードプレスのレイアウト調整にも役立つシーンが多いと思います。btn-success)を記述。ボタン機能を利用してできたボタンBootStrapのボタン上記のように、Bootstrapで定義している記述方法にしたがってHTMLファイルを作成することで、Webページのレスポンシブ対応やレイアウト調整を簡単に仕上げることができるようになります。ワードプレスの人気テーマでもたくさん利用されており、覚えておくとワードプレスのレイアウト調整にも役立つシーンが多いと思います。BootStrapベースのWordPressテーマLightningBootStrapを使うためにはBootStrapを使うための事前準備Bootstrapを使うためには以下の3ファイルを読み込む必要があります。Bootstrapの公式サイトからダウンロードしたCSSファイル「bootstrap.css」Bootstrapの公式サイトからダウンロードしたJavascriptファイル「bootstrap.js」jQueryの公式サイトからダウンロードしたjavascriptファイル「jquery-x.x.x.jp」ここでは、事前準備としてデスクトップ上にlessonフォルダ、index.htmlファイル、cssフォルダ、jsフォルダを作成した前提で進めていきます。bootstrapに必要となる3ファイルを下記のようにcss、jsフォルダ内に格納する手順で説明していきます。3.37のドキュメントに沿って紹介していきます。(2018年2月時点で最新の4.0がリリースされていますがまだベータ版のためここでは割愛します。CSSドキュメントBootStrapのダウンロードまず下記のリンクからbootstrapの公式サイトにアクセスします。Bootstrapを選択します。ダウンロードボタンbootstrap-3.3.7-dist.zipというzipファイルがダウンロードされますので、解凍します。bootstrap-3.3.7-distフォルダには「css」「js」「font」フォルダがあります。boostrap-3.3.7-distフォルダの中身このうち、bootstrapを利用するために必要最低限のファイルは、以下の2ファイルです。bootstrap-3.3.7-distフォルダ>cssフォルダ>bootstrap.cssファイルbootstrap-3.3.7-distフォルダ>jsフォルダ>bootstrap.js事前に作成したlessonフォルダ内のcss/jsフォルダにこの二つのファイルをそれぞれコピーしておきましょう。bootstrap-3.3.7-distフォルダ>cssフォルダ>bootstrap.cssファイルbootstrap-3.3.7-distフォルダ>jsフォルダ>bootstrap.js上記以外に他のファイルも使うケースあります。Bootstrapが用意しているWebフォントを利用する場合などは、fontフォルダもCSSフォルダと同じ階層に格納しておく必要があります。本例では、bootstrap-3.3.7-distフォルダ>fontsフォルダをそのままlessonフォルダに格納すればOKです。jQueryのダウンロードbootstrap.jsはjqueryを利用しているため、jqueryファイルもダウンロードしておきます。下記からjqueryの公式サイトにアクセスします。3.2.1」を選択してダウンロードします。トップページからファイルをダウンロードlessonsフォルダのjsフォルダにダウンロードしたファイルをコピーしておきましょう。jquery-3.2.1ファイル現時点でフォルダ・ファイル構成が下記のようになっていることを確認してください。今回のフォルダ構成headタグの設定つぎに、事前に作成したindex.htmlでbootstrapを使う設定を記述していきます。index.htmlのheadタグに下記のようにviewportタグの設定(※注)と上記の「bootstrap.css」「bootstrap.js」「jquery-3.2.1.js」を読み込む記述をします。src=”js/jquery-3.2.1.js”></script>の行を記述するようにしてください。順番が逆だと正常に動作しなくなります。name=”viewport”...の記述はスマートフォン用のレスポンシブデザインに対応するために必要な記述です。viewportについては「CSSメディアクエリとViewPortによるレスポンシブデザインの作り方」をご参照ください。設定完了後にindex.htmlファイルをChromeで開いて、パスが通っているか確認します。出ていなければOKです。Consoleタグを開いてファイルパスエラーが表示されていれば設定にミスがありますので、確認してください。これでbootstrapの準備が整いました。Bootstrapを利用するさて、これまでの手順でbootstrapを利用する準備が整いました。それではbootstrapを使ってみましょう。bodyタグ内に下記のように記述してみてください。btn-warning">ボタン</a>下記のように緑色や赤色のボタンのようになっています。btn-success/warning”をつけただけですが、bootstrap.cssの中で「.btn-successクラスは緑色のボタンのようにする」というように定義しているために上記のような表示になります。自分で1から記述しなくてもbootstrapの定義に従った表現ができるようになるため自分で記述する手間を大幅に削減することができます。jquery-3.2.1.min.js)をダウンロードして利用することもできます。内容に違いはありませんが、改行やスペースなどが省略されて人間にとっては読みにくくなるものの、読み込みスピードが高速化されます。改行やスペースが省略されています圧縮版のCSS。改行やスペースが省略。bootstrap.min.cssまた、ファイルをダウンロードして利用するのではなく下記のようにWeb上に公開されているCDNを利用することもできます。src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>(セキュリティも考慮した記述は公式サイトから確認してください。)Bootstrapによるグリッドシステム・レスポンシブデザインそれでは、BootStrapによるグリッドシステム・レスポンシブデザインについて説明していきます。Bootstrapでは横幅を12分割したグリッド(格子)を利用して、分割された12の列の数を指定して横並びや横幅を作成できます。グリッドの中に文字や画像を配置します。Bootstrapでは、レスポンシブデザインとグリッドシステムの組み合わせにより、画面に応じたコンテンツの配置が可能になります。下記はグリッドシステムを使ったサンプルです。1行目は12分割、2行目は4分割分割、3行目は2分割しています。pink">col-lg-6</div></div></div></body></html>上記のように、グリッドシステムを利用することでパソコンやタブレット、スマートフォンなど画面幅が異なってもレイアウトを組み替えやすくしています。1つの行に12個以上の列が配置されている場合、13個目以降を含むグループは新しい行に折り返されます。グリッドシステムの使い方グリッドシステムを利用するためには下記のようにして利用することができます。containerクラス(必須)containerクラスはグリッドシステムで正しく列を分割するための入れ物(容器)的な役割を果たします。containerの中にある要素を画面の中央に幅を固定する必須のクラスです。containerを省略してrowやcol-{prefix}-**を使うとレスポンシブデザインが正しく動作しません。■水色部分がcontainer要素です。横幅サイズに応じて余白が自動で調整されます。rowクラスrowクラスは行を定義するための入れ物(容器)的な役割を果たします。rowクラスは前述のcontainerに内包されます。container要素。グリッドシステムの容器の役割。