cssを１から書いてもよいが汎用的に使えるスタイルをまとめてくれているcssフレームワークというものが存在する。
今回はそのcssフレームワークの代表格bootstrapを使ってみよう。なおbootstrapのバージョンは４.0を使う。
準備
●まずはプロジェクト用のフォルダをデスクトップに作成する。今回はbootstraplessonとした。
●以下のリンク先にあるStarter templateのソースコードをコピーしてbootstraplessonフォルダの直下にindex.htmlとして保存する。
４.0スタート画面
●言語設定を日本語に設定する。
<html lang="ja">
●実行してみよう。ブラウザにHello,Worldと表示されれば成功だ。
●h1タグを以下のように編集し実行してみよう。スタイルがあたるのがわかる。
<h1 class="text-center bg-primary text-white py-1">Hello, world!</h1>
.text-center
テキストを中央寄せ(text-left,text-right)
.bg-primary
背景色をprimaryカラー(青)
.text-white
文字を白に
※色一覧
bootstrapで使える色一覧
.py-1
上下方向のpaddnigを0.25remに設定(1rem・・・デフォルト設定では16px)
※paddingやmarginの設定方法一覧
bootstrapによるmargin,padding設定
[解説]
このようにbootstrapでは要素にクラスを付与していくことでスタイルをあてていく。自分でスタイルを作る必要がない分楽をできるということだ。ただ、多くの指定に!importantが付与されているため、自分で上書きをする際にはやっかいなことも知っておこう。
表の作成
h1タグの下に以下のようにマークアップを追記する。
<div class="container"> <table class="table table-striped"> <caption>List of Colors</caption> <thead> <tr><th>和名</th><th>英名</th><th>コード</th></tr> </thead> <tbody> <tr><td>赤</td><td>red</td><td>#ff0000</td></tr> <tr><td>緑</td><td>green</td><td>#00ff00</td></tr> <tr><td>青</td><td>blue</td><td>#0000ff</td></tr> </tbody> </table> </div>
●実行してみよう。表がデザインされたはずだ。
[解説]
.container
ブロック要素の左右に適切な余白をつけてセンタリング
.table
基本的な表を作成
.table-striped
一行ごと交互に色分け
なお、細かい表のテーブルのつけ方はここを参照。
bootstrapによる表のスタイリング
このように使いたいパーツとどのようにマークアップするのかがdocumentにまとまっている。
使いたいパーツがあったらそのドキュメントを見ながらクラスをつけていくのがbootstrap操作の基本だ。
コメント