0%

Programmingプログラミングナレッジ

Posted:2016.06.22

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

レスポンシブデザインのサイトを制作する際にはとても便利なフレームワークである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にはグリッドシステムと同じく画面サイズを示すプレフィックスが入ります

 

 

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

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】