第12回からは「解説編」です。第9回から第11回の実装編の中で使用しなかったHTML5の要素技術や説明しきれなかった内容について、詳しく説明していきます。
「実践編」では、Webアプリケーションの構成に従い、以下の順で進めました。
- 画面の構造を定義する（HTML）
- 画面のレイアウトを定義する（CSS）
- 画面の操作や、処理を定義する（JavaScript）
「解説編」でも基本はこの構造に従って進めていくこととします。
解説編の2回目である今回は、画面のレイアウトです。日報アプリケーションでは、マルチデバイスを対象とするため、「レスポンシブWebデザイン」をCSSフレームワークの代表である「Bootstrap」を用いて実装しました。レスポンシブWebデザインはHTML5の機能を用いて実現されています。
ここでは、まずレスポンシブWebデザインがどのように実現されているか、ライブラリーを使わずに一からCSSの実装を行いながら説明します。そのあと、今度はBootstrapを使った場合にはどのような仕組が用いられているかについて解説します。
実装編では、CSSファイル（スタイルシート）は編集しませんでしたが、ここではCSSファイルに実装を加えながら説明していきます。css/index.cssがひな型として作成されているので、そのファイルに実装を追加します。CSSファイルの読み込みはindex.htmlのlinkタグで指定します。
<!-- app -->
<link rel="stylesheet" href="css/index.css" />
コード例：スタイルシートの読み込み(index.html 20行目)
レスポンシブWebデザイン
現在は様々な機種の端末が登場し、それに合わせて画面のサイズも端末ごとにばらばらになっています。そのため、特にB2Cなどデバイスを特定できない場合に、端末ごとにデザインを変える方法が採られています。端末ごとにデザインを変える方法としては以下があります。
- 各デバイス向けのHTMLファイルやCSSファイルを用意しておき、アクセス時に端末を判定してファイルを変える方法
- 同じHTMLやCSSファイルを使用して複数画面・端末に対応する「レスポンシブWebデザイン」の手法
HTML5ではレスポンシブWebデザインが有用とされており、ここでもレスポンシブWebデザインについて説明します。
レスポンシブWebデザインを実現するためには、viewportとメディアクエリという大きく2つの概念を理解する必要があります。
モバイル向けのスタイルで必須となるviewport
スマートフォンやタブレット向けのスタイルを適用する上で、一つ覚えておかなければいけない概念があります。それがviewport（ビューポート）です。スマートデバイスは物理的な画面サイズが固定ですが、viewportで表示領域の仮想サイズを設定できます。viewportの指定は、metaタグを使って以下のように記述します。
<meta name="viewport" content="width=375">
コード例：viewportの指定（index.html 6行目）
widthの値を変えると以下のように表示内容が変わることが分かります。
