skillup

技術ブログ

UI デザイン

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

投稿日:2016年5月2日 更新日:

自分はデザインセンスが壊滅的なので、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を指定しておく必要があります。)

参考

とほほのBootstrap 3入門

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

-UI, デザイン
-

執筆者:


comment

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

関連記事

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …