第9回からは、実際の業務アプリケーションであるような機能・仕組みを持ったサンプルアプリケーションを題材に、HTML5の機能や開発ツールの使い方を解説しています。
Webアプリケーションは
- 画面の構造を定義する
- 画面のレイアウトを定義する
- 画面の操作や、処理を定義する
から構成されます。実装編の2回目である今回は、「画面のレイアウトを定義する」を取り扱います。
前回の記事
CSS3を使って画面のレイアウトを定義する
広義のHTML5では、CSS3といった今までのスタイルの定義にさらに機能が加わった、新しい仕様が追加されています。
CSS3では、角丸やグラデーション、アニメーションなどが画像やJavaScriptを使わずとも表現できるようになり、表現力が格段に向上しました。また、メディアクエリなどWebアプリケーションのマルチデバイス対応に向けた機能も提供されています。
前回画面の構造を定義した日報アプリケーションに対し、CSS3を適用した画面の実装を行います。
今回の実装編では、マルチデバイス対応として最近ではよく使用されるようになった、「レスポンシブデザイン」について説明します。レスポンシブWebデザインは、CSS3の仕様であるメディアクエリを使って実現できます。また、レスポンシブWebデザインを実現する方法として、「Twitter Bootstrap」を紹介します。Twitter Bootstrapを使って画面を装飾できるので、最後にその具体例についても解説します。
複数のデバイスに応じたスタイルを定義してみよう（レスポンシブWebデザイン）
今や業務アプリケーションはPCだけでなくスマートフォンやタブレットでも使われることが当たり前になりつつあります。また、Googleでは、2015年4月21日からスマートフォン用に最適化されたサイト（モバイルフレンドリーサイト）に対して検索結果の順位があがるアルゴリズムが導入されるなど、モバイル端末への対応は強く求められるようになってきています。
本アプリケーションも外出時にスマートフォンやタブレットからの入力を対象としていますので、端末に応じて使いやすい画面デザインにします。Webブラウザーの表示部分が大きい場合は複数のinput要素が横に並んでいますが、これをある幅サイズ以下の場合に、縦に並ぶように変更してみましょう。
画面のサイズを指定するviewport
スマートフォンやタブレットなどに最適化された表示にするためには、まずviewport(ビューポート)を指定する必要があります。viewportは簡単に言うと、ブラウザーに画面の表示サイズを指定するための仕組みです。詳しくは解説編で説明しますが、下記のように記述します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
コード例：viewportの指定（index.html 6行目）
Bootstrapを使ったレスポンシブWebデザインの実現
CSSを自前で用意してレスポンシブWebデザインを実装することも可能ですが、CSSフレームワークなどを使用することも一つの手です。ここではレスポンシブに対応したCSSフレームワークとして、よく使われている米ツイッターが開発したBootstrapを使ってみます。
