【3:レスポンシブデザイン】画面サイズによってレイアウトを変更
プロジェクトNo.3:レスポンシブデザイン
Wordpressテーマを使ったプロジェクトサイトを、自分の手でも作ってみよう思い、レスポンシブなWebサイトを作ってみました。
レスポンシブWebデザイン(Responsive Web Design)は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。
引用元:ASCII.jp
今回、実装したのはPC、タブレット、スマホの3パターンでのレイアウトを用意しました。
基本的な構造は以下の通り。
ヘッダー
メインビジュアル
メインコンテンツ
サブコンテンツ
フッター
実装手順
CSSのメディアクエリというものを使います。
これは「画面サイズが○○px以上だったら、このスタイルを適用させる」といった指定ができる。
/* 共通部分及びスマホのスタイル */ /* スタイル指定 */ /* タブレットのスタイル */ @media all and (min-width: 480px){ /* スタイル指定 */ } /* PCのスタイル */ @media all and (min-width: 768px){ /* スタイル指定 */ }
まず共通部分(及びスマホのスタイル)を指定して、タブレットのスタイル、PCのスタイルと順に指定していく。
タブレットのスタイルでは共通分のスタイルも適用され、PCのスタイルでは全てのスタイルが適用される。
スマホのスタイルはタブレット、PCサイズになる際にdisplay: none;などを使用して適宜、表示非表示を行う。
共通部分及びスマホ用レイアウト
スマホの場合はメニューバーを下部に移動したいので、上部のメニューは隠して、下部のメニューを表示にしておきます。
【HTML】
<!-- 上部のメニュー --> <div id="headerNav"> <ul> <li><a href="">top</a></li> <li><a href="">about</a></li> <li><a href="">contact</a></li> <li><a href="">blog</a></li> </ul> </div><!-- /headerNav --> ... <!-- 下部のメニュー --> <div id="footerNav"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="">blog</a></li> </ul> </div><!-- /footerNav -->
【CSS】
/* スマホのスタイル */ #headerNav{ display: none; }
タブレット用レイアウト
今度は逆に上部のメニューは表示して、下部のメニューを非表示にします。
【CSS】
/* タブレットのスタイル */ @media all and (min-width: 480px){ #headerNav{ display: block; } #footerNav{ display: none; } }
PC用レイアウト
メインコンテンツとサブコンテンツを2カラム表示にします。
【HTML】
<div id="main"> <h2>Any 50 websites</h2> <p>...</p> </div><!-- /main --> <div id="sub"> <h2>RSS</h2> <p>...</p> </div><!-- /sub -->
【CSS】
/* PCのスタイル */ @media all and (min-width: 768px){ #main{ float: left; width: 70%; } #sub{ float: right; width: 10%; } }
参考サイト
dotinstall.com
ドットインストールはとてもお世話になっているWebサービスです。
初心者向けにWebプログラミングを、3分動画でわかりやすく解説してくれます。
今回は、Wordpressの既にあるWebサイト(テーマ)をトレースする様に自分の手で作成しました。
レスポンシブデザインとは別に細かい表現(ブロック要素のリンク、テキストの絶対配置など)も都度調べながら勉強できました。
基本的に元のソースは見ずに作ってみて、どうしてもわからない表現があったら元ソースを見るという風にできる点も、今回のやり方は良かったのかなと思います。
全ソースはこちら
github.com