TEXT/YUBASCRIPT

Web開発とか生物学とかTwitterとかの話題を適当に書いてる

スマートホォン向けサイトを作るのが面倒な人でもTwitter Bootstrapを使えば3分くらいでレスポンシブWebデザインが出来る

「年齢=働きたくない歴」のyubaisです。こんにちは。

Windows 7から搭載されたウィンドウのスナップ機能、便利ですね。フルHDの画面を左右に分割すると、デュアルディスプレイが無くても作業がとてもはかどります。働きたくない僕にはディスプレイ2枚は苦しいですからね。


典型的な筆者の作業風景

普通の作業はこれで問題ないのですが、悩ましいのはWebサイトの閲覧。 フルHD(1920x1080)の画面を2分割しているので、当然横幅は960px弱になるわけですが、日本のかなり多くのサイトが、横幅1024px以上を前提にしたデザインを作っているんですね。これを画面分割で見ると、レイアウトが崩れたり、サイドバーの広告が本体を遮ったりして、実に厄介。

おそらく10年ほど前までほとんどのPCが1024x768で、その延長上でWebをデザインしているせいでしょう。 でも最近はスマートフョンやタブレット端末も登場して、デバイスの解像度も多様化したので、もっと柔軟に対応してほしいところであります。

そういう訳で最近は「レスポンシブWebデザイン」とか「リキッドレイアウト」といった言葉が囁かれているわけですが、レスポンシブというとどうも「難しそう」と敬遠されたり、 「ナチスと戦うフランス人のためのWebデザイン」と勘違いされがちです。

ですが、実は「Twitter Bootstrap」という素敵アイテムを使えば、レスポンシブWebデザインなんてものは3分くらいで作れます。JavaScriptさえ不要で、CSSを貼り付けるだけで出来ます。ペヤングなんて食ってる暇があったらさっさと作りましょう。

一応、このブログも微妙にレスポンシブになっています。PCで見てる人はウィンドウの横幅を縮めてみてください。768px以下になるとサイドバーが下に移動します。

Twitter Bootstrapを使ったレスポンシブサイトの作り方は以下のとおりです。

(1) Twitter Bootstrapをダウンロード (15秒)

Bootstrapのページに行ってダウンロードします。英語サイトですが、ダウンロードボタンは目の前にあるので迷わないでしょう。分からないという人はWebなんて作ってる場合じゃないです。文科省に行って日本の英語教育のダメさ加減を身をもって力説してください。

Bootstrap

(2) <head> 部分を書く (20秒)

ダウンロードしたzipを解凍し、 bootstrap.cssbootstrap-responsive.css という2つのCSSファイルをHTMLにインポートします。 他にもいろいろありますが、とりあえず無視していいです。
<link rel="stylesheet" type="text/css" href='bootstrap.css'>
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
あと、スマートヒョンに対応するために、viewportを設定します。これは<head>タグのすぐ後ぐらいに書いておきましょう。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
このへんの設定の意味が分からない人は、このサイトが参考になるのでご利用ください。

(3) <body> 部分を書く (2分ちょい)

このブログのような「メイン」と「サイドバー」という構成なら、以下のように書きます。
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span8">
      ここにメインの内容を書く
    </div>
    <div class="span4">
     ここにサイドバーを書く
    </div>
  </div>
</div>
実物はこんなかんじです。

【サンプル】

これで 「2つのカラムが幅2:1で横に並ぶ」 「ウィンドウの横幅が768px未満になると、横並びから縦並びに変化する」 という、わりかしレスポンシブなサイトになります。大体のスマートヒォンは横幅768px未満ですので、これでPCサイトとスマートフャンサイトが同時に作れます。やったね。

クラス名の「span8」「span4」の数字を変えると、横幅が調節できます。ここでは横幅全体を「12」とみなしているので、合計が12になるように数字を割り振りましょう。ひねくれて小数を入れてはいけません。 例えば「真ん中にメイン、両端にサイドバー」という構成にしたい場合は「span3」「span6」「span3」とか。

【もうちょい複雑なサンプル】

まとめ

  • Vimなら3分でできる
もちろん、これはJavaScriptも使わずに、カラムを横に並べるか縦に並べるかを切り替えるだけなので、あまり複雑なコンテンツには対応できません。それでも、かなり多くのサイトがこのやり方を導入するだけであっさりレスポンシブになったりするので、スーマトフォンを別に作るのがだるい人は試してみるといいと思います。

関連しない記事