スタイルの継承について

最終更新日 2013/4/3

コンテンツの作成とデザインを行う準備が整ったので、コンテンツの作成を開始します。

「公式サイト：レスポンシブWebデザイン | Adobe TV」

コンテンツの作成とデザインは、どちらが先でも構いません。

並行して作業を進めても構いません。

今回は、コンテンツの作成を先に行いました。

コンテンツの作成は、モバイル／タブレット／デスクトップのどの画面で行なっても構いません。

同じ HTML ファイルを使用しているので、どの画面で編集を行なっても内容は同じです。

コンテンツの作成が完了しました。

ヘッダーのロゴは、Adobe Photoshop CS6 で作成しました。

コンテンツを作成したら、スタイルシートによるデザインを行います。

スタイルシートには、モバイル／タブレット／デスクトップの順番でスタイルが記述されています。

スタイルシートのコメントを見ると分かりますが、/* Mobile Layout: 480px and below. */ 以下がスマートフォン用レイアウトの記述です。

/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */ 以下が、タブレット用レイアウトの記述です。

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */ 以下が、デスクトップ用レイアウトの記述です。

コメントに記載の通り、スタイルは継承されます。

つまり、スマートフォン用レイアウトの記述は、タブレット用レイアウトとデスクトップ用レイアウトにも継承されます。

継承されたスタイルを変更したい場合は、スタイルを上書きします。

例えば、今回のデザインでは、メニューが縦並び／横並び／縦並びと変化します。

スマートフォン用レイアウトでは、メニューは縦並びです。

タブレット用レイアウトでは、float: left; を追加してメニューを横並びに変更します。

デスクトップ用レイアウトでは、float: none; を追加してメニューを縦並びに戻します。

一例とはなりますが、このように各デバイスのスタイルを記述します。

スタイルシートは直接編集しても構いませんし、CSS スタイルパネルから編集しても構いません。

可変グリッドレイアウトでも、スタイルシートの編集方法は変わりません。

詳しいソースコードは、今回のデモサイトにアクセスしてご確認下さい。

デモサイト：Dreamweaver CS6 で作成したレスポンシブ Web デザイン

html5shiv は、現在はダウンロードして利用する形になるかと思います。

設置方法は、IE8 以下に HTML5 を認識させる方法をご確認下さい。

当サイトの記事が、レスポンシブ Web デザインの作成にお役に立ちましたら幸いです。