目次
はじめに
こんにちは、クロです！
フロントコーディングにおいて、レイアウトの設定に欠かせないCSS。その用途は無限に存在し、その内容全てを一個人で把握するのは難しいでしょう。
しかし、クライアントによっては複雑なレイアウトを要請されることもあり、一コーダーとしては日々様々なサイトを見て勉強していくのが堅実です。
そんなコーダーにとって有力なサポーターとなってくれるのが、今回紹介するフレームワーク・Bootstrapです！
CSSフレームワークは数多くありますが、このBootstrapはレスポンシブ(PC・スマートフォン両方で閲覧しやすい)デザインに対応しており、利用方法も簡単という大きなメリットから、多くのサイトで利用されています！
今後Webサイト制作の技術進歩とともに、より複雑なコーディングが求められる中で、Bootstrapのようなフレームワークはより欠かせない存在となっていくでしょう。
今回は、そんなコーディングの強力なツールについてご紹介したいと思います。
Bootstrapを使ってみよう
1. Bootstrapの導入方法
それでは早速、Bootstrapを導入してみましょう。
Bootstrapを導入するには、以下の三つの方法が挙げられます。
- ・CSSファイルをダウンロードする
- ・CDNを利用する
- ・パッケージマネージャでインストールする
今回は上記のうち、最も簡単な方法である「CDN」を使って導入をしてみましょう!
(CDN：Contents Delivery Networkの略。Webサイト上のコンテンツを迅速にユーザーに届けるための仕組み)
Bootstrapの公式サイトへアクセスし、以下の2項目のURLを指定の場所へコピー&ペーストします。
2. Bootstrap情報のペースト
今回は以下のCodePenのページにて、Bootstrapのコードを実験してみます。
Bootstrap実験
なお、先述のBootstrapのコードは、以下の歯車ボタンをクリックした先の「Stuff for head」にペーストしてあります。
3. Bootstrapクラスの追加
こちらの公式ページを見ると、文字の色を指定できるクラス名が掲載されています。
上記に載っているクラス名を「テスト1」〜「テスト3」のp要素に追加すると、
上記の画像の通り、「テスト1」〜「テスト3」の色がそれぞれ変化しています。
Bootstrapはこのように、CSSへの記述を一切入れずに、上記のような設定を加えることができます。
使用上の注意点
上記の通り、Bootstrapは多様な設定をクラス名のみで加えることができ、コーディングの作業が大幅に節約できる、大変強力なツールと言えます。
ただし、 BootstrapのCSSの設定は基本的に!importantがついており、例えば同じp要素で別々の設定を加える場合には、細かくクラス名を分けるなどの作業が必要になります。
その為、Bootstrapを使う際には、設定が意図しない箇所へ影響しないように要素の親子関係や兄弟関係を整理することが肝要となります。
おわりに
以上の通りBootstrapは、一コーダーが行う作業の大部分をサポートしてくれる非常に有効なツールであり、多くのサイト制作においてもその力を発揮してくれるでしょう。
しかしもちろん、Bootstrapだけでのコーディングではレイアウトが絞られてしまい、似たり寄ったりなサイトになっては他サイトとの差別化は図れません。
その為、Bootstrapはあくまでも補助のツールとして、メインとなるレイアウトの仕上げにはコーダー自身の知恵やアイディアが必要となってくるでしょう。
次回は別の設定を使って、更にBootstrapを検証していきたいと思います。
それではまた次回！
参照記事・サイト
Bootstrap公式サイトCodePenでBootstrapを使用する方法
