BootStrapで超簡単にレスポンシブWebページが作れる！たった22行で作れるよ。

2016/08/01 2016/08/03

WordPressみたいなCMSを使うのが一般的になりましたが、それでも自分でWebページを作りたいときはあります。でも、最近はレスポンシブデザインが当たり前になったし、CSSも凝ってきたので、イチから自分でデザインするのはちょっとハードルが高くなってきました。

そんな時代にBootStrapは非常に便利です。今回はBootStrapを使って最小のコードでレスポンシブデザインを実現してみます。

[ad#top-1]

1 まずは今回の完成形をご覧ください。
2 BootStrapをダウンロードしよう
3 以下のコードをコピペすれば完了
4 まずは基本形を抑えよう
5 ヘッダー、メニュー、フッターを固定化する
6 スマホになったらハンバーガーメニューにする

まずは今回の完成形をご覧ください。

こちらが今回のゴールです。ヘッダーがあって、メニューがあり、最後にフッターがあります。ちなみに、ヘッダーとメニューとフッターは、スクロールしても固定になっています。もちろんレスポンシブになっていて、ある画面幅になると自動でスマホバージョンに変形します。デモはこちらです。

メニューはハンバーガーメニューにまとめられます。クリックするとメニューが下にプルダウンします。よく見かける一般的なデザインになっています。これをイチから作るのはしんどいですが、BootStrapを使えば超簡単。

BootStrapをダウンロードしよう

BootStrapは以下のWebサイトからダウンロードできます。トップページの「Download BootStrap」をクリックします。

http://getbootstrap.com/

ダウンロードページに飛ぶので、そこの「Download BootStrap」をクリックするとダウンロードが開始します。

このダウンロードページですが、下の方に行くとテンプレートが掲載されています。「Basic template」という表題の下にあるコードです。このHTMLコードをコピペしておいてください。（右上の「Copy」をクリックすると、コードがクリップボードにコピーされます。このコードは「index.html」として保存しておいてください。あとコピペ後に<html lang=”en”>を<html lang=”ja”>に変更してください。

ダウンロードした圧縮ファイルを解凍すると中に以下のフォルダが確認できます。この３つのフォルダをWebサーバー上に置いてください。あと、先ほどコピペしたindex.htmlも同じところに置きます。ここが作業フォルダとなります。

以下のコードをコピペすれば完了

index.htmlファイルの<body>の下に以下のコード(22行)をコピペすれば完了です。ブラウザで確認してみてください。と言っても。これだけの説明だと素っ気ないので、解説は次のチャプターで。（注： WordPressの表示制限の関係上、「”」「’」が全角になってしまっているのでコピペ後に修正してください。）

<div id=“header” class=“container navbar-fixed-top” style=“background: lightgray; height:100px; font-size: 30pt;”>header</div>
<nav class=“navbar navbar-default navbar-fixed-top container” style=“margin-top: 100px;”>
   <div class=“navbar-header”>
      <button class=“navbar-toggle” data-toggle=“collapse” data-target=“.target”>
         <span class=“icon-bar”></span>
         <span class=“icon-bar”></span>
         <span class=“icon-bar”></span>
      </button>
      <a class=“navbar-brand” href=“”>Menu</a>
   </div>
   <div class=“collapse navbar-collapse target”>
      <ul class=“nav navbar-nav”>
         <li class=“active”><a href=“”>Link1</a></li>
         <li><a href=“”>Link2</a></li>
         <li><a href=“”>Link3</a></li>
      </ul>
   </div>
</nav>
<div class=“container” style=“margin-top: 160px; margin-bottom: 25px;”>
   <p>1行目</p><p>2行目</p><p>3行目</p><p>4行目</p><p>5行目</p><p>6行目</p><p>7行目</p><p>8行目</p><p>9行目</p><p>10行目</p><p>11行目</p><p>12行目</p><p>13行目</p><p>14行目</p><p>15行目</p><p>16行目</p><p>17行目</p><p>18行目</p><p>19行目</p><p>20行目</p><p>END</p>
</div>
<div id=“footer” class=“container navbar-fixed-bottom” style=“background: lightgray; height: 20px;”>footer</div>

まずは基本形を抑えよう

基本形はたった15行です。ヘッダーがあって、ナビゲーションバー、ボディ部分、最後にフッターです。それぞれに、class=”container”とあるのは、ブラウザで見た時に左右余白を設けるためのものです。スマホブラウザでは余白は消えてくれるレスポンシブ対応のすぐれものです。これを外すとパソコンブラウザでも画面いっぱいに表示されます。

<div id=“header” class=“container” style=“background: lightgray; height:100px; font-size: 30pt;”>header</div>
<nav class=“navbar navbar-default container”>
   <div class=“navbar-header”>
      <a class=“navbar-brand” href=“”>Menu</a>
   </div>
   <ul class=“nav navbar-nav”>
      <li class=“active”><a href=“”>Link1</a></li>
      <li><a href=“”>Link2</a></li>
      <li><a href=“”>Link3</a></li>
   </ul>
</nav>
<div class=“container”>
   <p>1行目</p><p>2行目</p><p>3行目</p><p>4行目</p><p>5行目</p><p>6行目</p><p>7行目</p><p>8行目</p><p>9行目</p><p>10行目</p><p>11行目</p><p>12行目</p><p>13行目</p><p>14行目</p><p>15行目</p><p>16行目</p><p>17行目</p><p>18行目</p><p>19行目</p><p>20行目</p><p>END</p>
</div>
<div id=“footer” class=“container” style=“background: lightgray; height: 20px;”>footer</div>

この状態でブラウザから確認してみると、一見、完成形と変わりないように見えます。しかし、フッターがスクロールしないと見えないことと、下にスクロールするとヘッダーとメニューが見えなくなります。つまり固定化されていません。

ヘッダー、メニュー、フッターを固定化する

ということで、ヘッダーとメニューとフッターを画面に固定化させましょう。ヘッダーとメニューのclassに「navbar-fixed-top」、フッターに「navbar-fixed-bottom」を追記します。下の赤い四角で囲ったところです。これで各々がブラウザ画面上に固定されます。

で、ブラウザで見るとどうなるか。・・・あれ？デザインが崩れましたね。

これはどういうことかと言うと、下の図のようにそれぞれのパーツが重なってしまったからなんです。

この重なりを修正する必要があります。下の図のようにメニューをヘッダーの下まで。本文の開始位置をメニューの下までずらします。下図には描かれていませんが、本文の終わりもフッター高さ分まで余白を設ける必要もあります。

メニューに「style=”margin-top: 100px;”」、本文に「style=”margin-top: 160px; margin-bottom: 25px;”」を追記すればOKです。本文の数値は若干余白を大きめにとっています。ブラウザで確認しながら微調整してください。これでパソコンのブラウザ上で確認できるレベルのデザインは完成となりました。