staffBootstrapの使い方についてのまとめです。BootstrapはTwitterが開発した無償でダウンロードし利用することが可能なCSSフレームワークです。webデザインに関する知識が少ない人でも簡単に見栄えのいいサイトを作ることが可能で、全ての機能がレスポンシブデザインに対応しているのが特徴です。そのため、スマートフォン向けのサイトを作る際にもとても便利で多くの人がBootstrapを利用しています。はじめに下記の公式サイトからBootstrapをダウンロードします。ダウンロードしたZIPファイルを解凍すると下記のようにcss,font,jsというファイルが入っているので使用したいファイルにそれぞれコピーして配置します。src="js/bootstrap.min.js"></script>HTMLのhead内にそれぞれ参照するファイルを読み込ませます。Bootstrapはjqueryを活用しているので必ず用意しましょう。使用する前の導入は以上です。それでは実際に代表的な機能をいくつか紹介します。グリッドシステムとは、要素の横幅を割合で指定してカラムを整えることができるシステムです。bootstrapでは12本のグリッドを利用してカラムを指定することができます。6:6の2カラムや4:4:4の3カラムのように均等にしたり、6:3:3や5:4:3のように不規則な割合でも合計が12なっていれば問題なく機能します。</div></div>グリッドシステムを使うためには、始めにclass=”contener”とその中にclass=”row”を用意する必要があります。class=”row”の中にカラムを指定するための要素、class=”col”を書き込みます。xs,sm,md,lgというのは表示される画面の大きさに合わせて書いてください。それぞれ、xs=749px以下(スマートフォン等),sm=969px以下(タブレット等),md=1169px以下(PC等),lg=1170以上(PC大画面)の場合に適用される値です。上記のHTMLはxsの時に3:9、smの時に4:8、mdの時に5:7、lgの時に6:6で表示するというコードになっています。カラムのオフセットはカラムに空白を入れたいときに使える機能です。*の部分にカラムの値を入れることで指定した要素の左側に、入れたカラムの値の分余白ができます。200px;}1000pxのcontainerの中に両端余白、中央にboxを寄せる形のコードです。box1の左側に2カラムの余白を入れ、4カラムのbox1,box2が続き、最後に残った2カラム分の余白が残ります。</div></div>同様にbox2の方にoffsetをつければ、box2の左側に余白ができます。col-md-push-*とcol-md-pull-*を使用することで表示画面(ブラウザ)の大きさによって表示するカラムの位置を変更することができます。</div></div>画面がmd以下の時にはbox1が左に、lgの時はbox1が右に来るようになっています。画面の大きさによってカラムの表示/非表示を切り替えたり、表示の仕方(block、inline、inline-block)を設定することができる機能です。visibleは表示を指示します。visible-md-blockという感じで画面のサイズと表示方法を設定します。hiddenは非表示を指示します。表示方法の選択を不要なのでhidden-mdのようにサイズのみ設定します。</div></div>画面がlgの時にはbox2を非表示にし、md以下で表示されるようになっています。ヘルパークラスはあらかじめbootstrapで用意されているclassでとても便利な機能です。3つのスタイルが定義されていて、画像を表示画面の大きさに合わせて拡大、縮小させることができます。3つのスタイルが定義されていてブロック要素を表示画面の大きさに関わらず親要素の中央に配置することができます。スタイルが定義されていて、文字を画面の大きさに関わらず親要素の中央に配置することができます。定義されていてスマートな記述で要素を横並びに配置することができます。formやbutton、tableなどもあらかじめbootstrapで用意されていて、公式サイトから直接コピーペーストして使用できるのでとても便利です。コメントをキャンセルメールアドレスが公開されることはありません。