skillup

技術ブログ

UI デザイン

Bootstrapまとめ 主に段組み関連の知識について

投稿日:

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。

最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため、ここでまとめておきます。

bootstrapとは?

改めて説明の必要もないですが、レスポンシブデザインに対応したHTML/CSS/JavaScriptのフレームワークです。

読み込ませ方

本家(http://getbootstrap.com/)からダウンロードし、CSSとJavaScriptに下記ソースを追加してあげればOKです。

.minがついているものはサイズが小さいですが、中を修正したりができないので自分はcssに関してはminではないものを使っています。

bootstrapの内部の解説

container

bootstrapはコンテンツ全体をcontainerでくくるという使い方を想定しています。これによりデバイスに応じた、幅やマージン設定などが可能になります。

グリッドシステム

bootstrapでは横幅を12個の幅に等分し、その比によってコンテナを分割しています。このようなシステムをグリッドシステムといいます。

またグリッドシステムの応用として複数の入れ子(複数段の縦をそろえる)にしたり、一定の間隔(オフセット)をあけることもできます。

入れ子

オフセット

 

左寄せ、中央寄せ、右寄せ

グリッドレイアウト以前にもっと単純な文字よせ、段落よせがあります。

文字よせ

text-right,text-center,text-leftなど

段落よせ

段落のブロック全体を左や右にフロートしたり、中央揃えにします。

pull-left,pull-right,center-block(このプロパティを使うときはwidthを指定しておく必要があります。)

参考

http://www.tohoho-web.com/ex/bootstrap.html

http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap_02.html

「UIまで手の回らないプログラマのためのBootstrap3実用ガイド」

-UI, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

頻出CSSのまとめ

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作) で、CSSでもよく出る …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …