one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【3:レスポンシブデザイン】画面サイズによってレイアウトを変更

f:id:seintoseiya:20150330195839p:plain
プロジェクト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