Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Bootstrap 2016.06.22

Bootstrapでよく使うCSSスタイルのクラスまとめ

Tags: ,,
最終更新日:Update

レスポンシブデザインのサイトを制作する際にはとても便利なフレームワークであるBootstrapですが、要素にクラス名を指定するだけで簡単にスタイリングできてしまいます。今回はBootstrapに用意されているたくさんのスタイルのうちよく使うスタイルのクラスをまとめてみました。

 

グリットシステム
.container 固定幅のグリッドシステムのコンテナ要素を定義
.container-fluid 可変全幅のグリッドシステムのコンテナ要素を定義
.row 行を定義(コンテナ要素に内包される)
.col-{prefix}-{columns} 列を定義(rowに内包される)
.col-{prefix}-offset-{columns} スペース用の列(左余白分オフセット)を定義しcolumnsの数値分むかって左側に余白をつける
.col-{prefix}-push-{columns} 列の右方向への入れ替え、columnsの数値分右側にシフトさせる
.col-{prefix}-pull-{columns} 列の左方向への入れ替え、columnsの数値分左側にシフトさせる
.clearfix floatの解除

 

Bootstrapのグリッドシステムはカラムを12分割にしてレイアウトを組んでいくという考え方です。画面サイズと連動しカラム数を指定していきます。

 

画面サイズを指定するprefixについて

lg デスクトップのスクリーンサイズ
md ラップトップのスクリーンサイズ
sm タブレットのスクリーンサイズ
xs モバイルのスクリーンサイズ

 

12分割されたカラム数を指定するcolumnsについて

12分割されたものを1として各カラムの数量分の幅を設定

 

アライメント
.text-left インライン要素を左揃えにします
.text-center インライン要素を中央揃えにします
.text-right インライン要素を右揃えにします
.text-justify インライン要素を均等割付にします
.text-nowrap インライン要素を改行禁止にします
.center-block ブロック要素を中央揃えにします

 

イメージ
.img-responsive 外枠に合わせた可変サイズのレスポンシブ対応になります
.img-rounded イメージ画像の角を丸くします
.img-circle イメージ画像を円形にトリミングされます
.img-thumbnaill イメージ画像に枠線が設定されます

 

テーブル
.table-stripped ストライプのように1行おきに背景色が設定されます
.table-bordered 格子状に罫線が入ります
.table-hover マウスホバー時に背景色が変わるようになります
.table-responsive コンテンツ幅を超える部分はスクロールできるようになります

 

リスト・フォーム
.dl-horizontal 定義リストを項目ごとにインラインで表示させます
.form-group ラベルとフォーム部品をグルーピングさせます
.form-control グルーピングされた中のフォーム入力部品を定義
.form-inline フォーム部品全てをインラインで表示されます(form要素に指定します)
.form-horizontal フォーム部品を項目ごとにインラインで表示されます(form要素に指定します)

 

ボタン
.btn ボタンを定義
.btn-default 汎用的なボタンを定義
.btn-primary 決定、進むなどの肯定的な意味を持つボタンを定義
.btn-danger キャンセル、戻るなどの否定的な意味を持つボタンを定義

 

表示・非表示
.visible-{prefix} ブロックレベルもしくはインライン要素として表示させます
.hidden-{prefix} 要素を非表示にします

※prefixにはグリッドシステムと同じく画面サイズを示すプレフィックスが入ります

 

 

上記は個人的によく使うものですが、このほかにもたくさんのスタイルが用意されています。グリッドシステムや表示・非表示の切り替え、レスポンシブ対応イメージなどはかなり便利な機能ですね。

 

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?