レスポンシブサイトが簡単に作れる!?
Bootstrapの使い方 〜セットアップと基本編〜

bootstrap

こんにちは。のんです!

レスポンシブデザインでwebサイトを制作するのは結構大変ですよね。

そこで今日は、簡単にレスポンシブサイトを作れるBootstrapの使い方をご紹介します!

Bootstrapとは??

Bootstrapとは「CSSやJavascriptのライブラリ集」です。

「段落の寄せ」や「段組」などを始めとする位置指定はもちろん、ボタンのレイアウトやアイコンなどのレイアウトを簡単に作成することができます。

デザインが苦手な人やCSSがあまり得意ではない人でも比較的簡単にWebページを作れることができるということです!

また、PC表示やタブレット表示、携帯表示などスタイルを切り替えれるのでレスポンシブWebデザインが簡単です。

 


Bootstrapレスポンシブデザインの基礎知識を知ろう!


レスポンシブデザインとは、デスクトップ、ダブレット、スマートフォンなどの画面の幅に応じて

横並びを縦並びにしたり、狭い画面ではサイドバーを表示を自動的にしないように調整し、

同じデザインで、異なるデバイスに対応するためのデザイン技術です。

Bootstrapでは下記の4つのレベルの画面サイズを想定しています。

 

* Extra smallデバイス(幅768px未満) スマートフォンなどを想定
* smallデバイス(幅768px〜幅992px未満)タブレッドなどを想定想定
* Mwdiumデバイス(幅992px〜幅1200px未満)一般的なPCなどを想定想定
* Largeデバイス(幅1200px以上)高解像度のPCを想定

 


Bootstrapのダウンロードしよう!


Bootstrapを使うにはダウンロードが必要です。

公式サイト:Bootstrap ダウンロードページ

下記画像のBootstrapの部分よりダウンロードしてください。

bootstrapdw

Bootstrapの基本テンプレートのようにBootstrapをHTMLに読み込めば準備完了です!

 


Bootstrapを使ってみよう!


Bootstrapを使うにあたり、一番最初に理解しておくのがコンテナ!

コンテナとは、コンテンツやグリッド・システムを収容するクラスのことです。

コンテナ要素は、固定幅(.container)と全幅(.container-fluid)の2種類があります。

768px以下では、固定幅(.container)も全幅(.container-fluid)も違いはありません。

.containerは左右にmarginがで、.container-fluidは画面いっぱいなのがわかります!

%e3%82%b3%e3%83%b3%e3%83%86%e3%83%8a
固定幅(.container)は、コンテナの幅がデバイスごとに決まっており、

全幅(.container-fluid)は、画面サイズに合わせて流動的に画面にフィットします。

Extra small small Mwdium Large
コンテナの幅 自動(幅一杯) 750px 970px 1170px

 


グリッドレイアウトで段組をしてみよう


グリッドレイアウトはコンテナ等を12等分し、占める幅をCSSクラスで指定する方法です。

デバイスの幅によって幾つか用意されていますが、基本的なクラスは「col-xs-1」「col-xs-2」….「col-xs-12」というクラスです。

「col-〇〇-××」◯◯にはデバイスの幅が入り、××には占める幅の数字が入ります。

2段組や3段組をする場合はこれらのクラスを組み合わせて幅が「12」になるように調整します。

グリッドレイアウトを組むときは、全体を「row」クラスで囲みます。

【実行結果】

bootstrap1

複数行にわたるレイアウトをしたい場合も「row」クラスを連ねることでできます。

 

【実行結果】

bootstrap2

 

これで段組も楽々ですね!

Bootstrapではデバイスによって表示を消したり、順番を入れ替えたりと

まだまだ簡単にできることが沢山あるみたいです!

続きはまたいつか!!


The following two tabs change content below.
のん

のん

2015年入社 コバーン討伐会員No.0001