テンプレートデザインの基本を知るには(Bootstrap)

722 views

Bootstrap 4

Bootstrapとは…

テンプレート化したCSSソースのライブラリーで、ウェブサイトやWebアプリケーションなど、フロントエンド側の開発を対象としたオープンソースのCSSフレームワークです。

ということで、いまいまcssを学習されている方だとなんとも言えないかもしれませんが、
cssは、入力することが多くなかなか0から作成するのは正直なところ面倒です。また、クラス名にも統一性をなどと考えると慣れないうちは、きりがありません。

そこで、bootstrapの登場です。

あらかじめ準備されているテンプレートを活用することで、

１から製作する作業負荷の軽減
作業時間の短縮
レイアウトの統一性保持の簡易化

などの恩恵を得られます。

そして何より、モバイルファーストが必須になりつつある現代でレスポンシブWebデザインの簡易導入に大きく役立ちます。

CSS言語でのページレイアウトは、こだわればこだわるほど量が増えていき複雑になります。
何かを開発するごとに毎度０からcssソースを記述していくのはWebデザイナーの方など以外には結構な負荷です。
何より、レスポンシブWebデザインの導入でさらに作業量が増加します。
しかし、Bootstrapを利用することで新しい技術・整ったレイアウトを短時間で利用することができます。

導入方法

BootstrapのHP [https://getbootstrap.com/]からファイルをダウンロードしてきます。

2020年8月3日現在の最新バージョンは、v4.5.0です。

※今回説明して行くものは、v4.X.X以降(いわゆるbootstrap 4)になります。

※勿論、v3 , v2 , …と存在しますが、変更点も多くクラス名が変わったりしている、撤廃されているクラスや仕様もあるので注意してください。

HPトップに表示されているダウンロードボタンからダウンロードページに飛び、
“Compiled CSS and JS (コンパイルされたCSSとJS)”からダウンロード行ってください。

ダウンロードを行うと内部に”css”というフォルダが用意されているのでそのファイルを開きます。

ダウンロードしたファイルを展開します。

内部は、下記のようになっています。

今回使用するのは、選択されている”bootstrap.css“または、赤枠の”bootstrap.min.css“のどちらかになります。

※　”min”の付く方は、compress(圧縮)されているので、
ソースの内容を確認してみたいときなどは、通常版の方が読み取りやすいです。

後は、自身でcssファイルを作成している時と同じです。
まず、2パターンのbootstrapのファイルのどちらかを用意しているcssファイル内に移してください。
※ どちらも入れてしまっても構いません、不要な物は<link>タグで結ばなければいいので。

その後、対象のhtmlファイルに<link>タグで読み込む記述をhead要素内に行って完了です。
が、ここでhtmlファイルにbootstrapの仕様上、書き足さなければならないメタ情報があります。

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="サイトの説明文。検索時にタイトルの下に３行程表示される文章。">
   <title>検索時に画面表示されるタイトル。サイトが開かれたときには、タブに表示されるページ名。</title>
   <link rel="stylesheet" href="css/bootstrap.css">
</head>

これで準備完了です。

[bootstrap 4 導入前]
sample_6-1
https://ezo-style.com/sample/sample-6-1.html

[bootstrap 4 導入後]
sample_6-2
https://ezo-style.com/sample/sample-6-2.html

実際、クラスの設定などをしなくても要素セレクタへの装飾などがbootstrapには含まれているため、読み込むだけで見た目が変わります。

sample_6-1は、bootstrap導入前です。sample_6-2は導入後で、余白などの間隔が変わっていると思います。
これは、CSSの章で紹介したリセットCSSがbootstrap内に含まれているためです。

もう１つ接続テストとして、”bg-info”というクラスを好きなところにつけてみてください。
sample_6-2の上部のような色が反映されましたでしょうか。

これはbootstrapで準備されている背景色を変えるクラスです。
これを含めて、リンクが上手くいっているか確認作業を行って見てください。