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

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

最終更新日:2018.1.7 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にはグリッドシステムと同じく画面サイズを示すプレフィックスが入ります     上記は個人的によく使うものですが、このほかにもたくさんのスタイルが用意されています。グリッドシステムや表示・非表示の切り替え、レスポンシブ対応イメージなどはかなり便利な機能ですね。  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram