完成したHTMLサイトからWordpressテーマを作成する、という記事を書こうと思ったのですが、一つの記事にすると長すぎるし、事前に説明が必要なことや準備が多すぎる！
ということで外堀を埋める作業をずっとしています。
こちらの記事はワードプレスサイト化するための元となるHTMLサイトを作成する記事になります。
めんどくさいのでbootstrapでチャチャっと作ろうと思っているのですが、bootstrapについての説明も必要ですよね。
その辺も合わせて説明していくのにチャレンジしてみたいと思います。
Bootstrapでサイトを作ろう
Bootstrapとは
まずBootstrapについて説明しなければなりますまい。
Web制作をしている方は、「このCSS使い回せるようにしといたら楽だな！」などと思って実際に使いまわしていることはないでしょうか？
それです
BootstrapはそういったCSSの塊です。ついでにJSもついてます。
こういう使い回しのきくCSSを集めたものを「CSSフレームワークと呼びます」
めちゃ普及しているCSSフレームワークであるBootstrap
Bootstrapはかなり日本ではメジャーなCSSフレームワークですのでそこら中に情報が転がっています。
便利ですね。
また、Bootstrapを使ったサイトであれば、修正加筆が簡単というメリットもあります。
大規模で運営するほど、こういったフレームワークを活用することで大人数の修正でも破綻しないことが期待できます。
メリットとデメリット
先に紹介したように、bootstrapを知っているもの同士ではファイルの可読性が増しスムーズです。
修正も簡単で、一から書いていると割と大規模な改修になってしまうものでも、「class1つ変えるだけ」でレイアウトを大きく変更してしまうことも可能です。そういった大規模修正であっても、CSSを全く書かなくていいこともあるというのもすごくいいですね。しかし、逆に言えばわからない人は全く使えないというのがデメリットです。学習コストが発生します。
一回覚えてしまえば利用に関してそこまで複雑なルールはありませんので、簡単なんですけど、触れていない人は何だか仰々しく、難しいものに感じてしまうのも事実です。
もう一つデメリットとしては、「bootstrap臭さ」が出てしまうということです。
簡単は簡単なのですが、どこかで見たことがあるようなサイトになってしまうのです。
運用重視で、デザインに関してはそこまで重要視していないというサイトであれば導入しない理由はありません。
それと、設定データからカスタマイズしてしまえばこの「bootstrapっぽさ」はかなり消せると思います。
モバイルファーストなサイトが作成できます。あとはFlexboxが登場してから、割とスマホ対応が簡単にできるようになったのでちょっと利用重要度は下がっているんですけどね。
あと導入が簡単なので、一から書く場合はリセットCSSを準備して、配置して、みたいなサイト制作開始時の手間がかなり減ります。リセットCSSは組み込まれていますのでわざわざ適用する必要はありません。
ちょっとクセはありますがモーダルウインドやカルーセルなども利用できますので便利です。
classつけすぎ問題
性質上htmlにclassがいっぱいつくのもデメリットと言えばデメリットかも。
Bootstrapの基本的な概念について覚えよう
こちらはbootstrap4について書いています。
バージョンでかなりclassに差があるので注意です。
グリッドシステム
bootstrapの大きな特徴として「グリッドシステム」を採用していることが挙げられるでしょう。
グリッドシステムとはサイトの横幅を12分割して考える方法のことです。
たとえば要素を3分割したいなら、
<div class="row">
<div class="col-4">コンテンツ1</div>
<div class="col-4">コンテンツ2</div>
<div class="col-4">コンテンツ3</div>
</div>
こうなります。12÷3ですので、4という数値が3分割を表します。
４分割なら
<div class="row">
<div class="col-3">コンテンツ1</div>
<div class="col-3">コンテンツ2</div>
<div class="col-3">コンテンツ3</div>
<div class="col-3">コンテンツ3</div>
</div>
こなります。
デモページ
sample1
このように、幅を指定したい場合は「col-?」という形で指定し、それらを囲む親要素には必ず横並びを表す「row」というclassをつけるようにしてください。
モバイルファーストのレスポンシブ
bootstrapでは最初から見た目の切り替わりである「ブレークポイント」が設定されています。
このブレークポイントで、classによる表示を変えることができる仕組みを持っています。
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|---|
この5つのポイントでCSSの切り替えを行うことができます。
例えば 「Extra small」ではサイト幅いっぱい。
「Medium」より大きい場合は３分割、という場合は次のように指定します。
<div class="row">
<div class="col-12 col-md-4">コンテンツ1</div>
<div class="col-12 col-md-4">コンテンツ2</div>
<div class="col-12 col-md-4">コンテンツ3</div>
</div>
デモページ
sample2
サンプルではスマホで全て幅いっぱいにする指定をしています。サイト幅を変えて表示を確認してください。
上記のような仕組みはグリッドシステムだけでなく、他の指定でも応用できます。
例えば
「d-block」「d-inline」「d-none」
という指定があります。
これらはそれぞれ、ブロック要素にする、インライン要素にする、none（見えなくする）という指定です。
これをレスポンシブの指定と組み合わせると
<p class="d-none d-md-block">PCPCPCPC</p>
<p class="d-block d-md-none">SPSPSPSP</p>
<p>現在のサイト幅は<span class="d-inline d-md-none">SP</span>
<span class="d-none d-md-inline">PC</span>サイズです</p>
このようなこともできます。
デモページ
sample３
サイト幅を変えて表示を確認してください。
サイトの幅を指定する。
<!-- 通常 -->
<div class="container"></div>
<!-- ウインドウいっぱい -->
<div class="container-fluid"></div>
デモページ
sample2
画像をレスポンシブ化する
<img class="img-fluid" src="test.jpg" alt="">
デモページ
sample2
フレックスボックスの細かい指定
FLEXの細かい指定もclassで可能です。
幅「md」より広い時は横並び、狭い時は縦になる場合です。
<div class="container">
<h1>Flexboxもclassで指定できる</h1>
<div class="d-flex flex-nowrap flex-column flex-md-row">
<div>
<img class="img-fluid" src="test.jpg" alt="">
フレックステスト
</div>
<div>
<img class="img-fluid" src="test.jpg" alt="">
フレックステスト
</div>
<div>
<img class="img-fluid" src="test.jpg" alt="">
フレックステスト
</div>
</div>
</div>
デモページ
sample4
その他いろいろ便利です
h1などの見出しももともとスタイルが適用されていたり、tableタグに「.table」をつけるだけで簡単にいい感じのテーブルになってくれたりします。
フォーム関係の指定も充実していて便利なのですが、ここでは割愛します。
指定をまとめた「チートシート」を掲載しているサイトがありますのでそちらのリンクを参照してください。
Bootstrap 4 Cheat Sheet
実際にサイトを作ろう！
ではブートストラップの紹介も済みましたので、実際のサイトを作成していきたいと思いますが、ちょっと長くなったので次の記事に続きます。
執筆中。
TECH::CAMP（エンジニアスクール）
利用にはちょこっと設定が必要なのです。
