非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

      2016/08/03

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

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

広告

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

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

4

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

5

 

BootStrapをダウンロードしよう

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

http://getbootstrap.com/

1

 

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

2

 

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

3

 

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

6

 

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

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>

 

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

7

 

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

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

8

 

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

9

 

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

8

 

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

9

 

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

12

 

スマホになったらハンバーガーメニューにする

パソコンブラウザ上ではうまくいきましたが、スマホ上ではまだ完成していません。下図のようにメニューが縦に並んでしまい、本文を隠してしまします。なので、メニューをボタンクリック後に現れるようハンバーガーメニューにしたいと思います。

13

 

まず、赤く四角で囲ったところを追記します。Menu表題のすぐ上ですね。ここがハンバーガーボタンとクリック後に現れるプルダウンメニューを表しています。

14

次に、メニューを以下の四角で囲ったところで括ります。先ほどのハンバーガーメニューに紐づけしてくれます。

15

 

これで完成です。パソコンブラウザとスマホブラウザとでデザインが以下のように変わります。自分でここまで作るのはかなり大変ですが、BootStrapだと超簡単に作れるわけです。

4


ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - BootStrap, HTML/JavaScript