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の適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …