レスポンシブデザイン 第2回
可変レイアウトによるレスポンシブデザイン
今回は可変レイアウトを用いたレスポンシブデザインを学習する。
- 横幅980px
- 横幅320px、レスポンシブ
- 横幅320px、非レスポンシブ
サンプル画像解説
サンプル画像では、横幅980pxで作ったサイトを横幅320pxで表示させた場合を示している。レスポンシブデザインを用いるとトップ画像が小さくなったり、見出し部の日付の形状が変わり、うまく画面内に収まっているのが分かる。一方、非レスポンスデザインの場合は単に980px時の左上が表示されいるにすぎない。
また、スマートフォンで表示させた場合は、980px時の表示を縮小させ画面内に収めようとするため、拡大しないと文字を読んだりメニューをクリックしたりできない。
headでの指定
レスポンスデザインを実現するには、htmlのhead内にmetaタグでviewportを指定する。加えて、表示デバイスの横幅を3つに区切りcssを別で準備する。下記の例ではstyl.cssを最初に読み込むので、全ての表示に共通する内容はこのファイルに記述し、特定の画面サイズで摘要すべき内容をそれぞれ以降に宣言したcssに記述する。andの前後にスペースが必須な点に注意。
<meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet"> <link href="style-m.css" rel="stylesheet" media="only screen and (min-width:600px) and (max-width:979px)"> <link href="style-s.css" rel="stylesheet" media="only screen and (max-width:599px)">
body記述
body内には特に目新しい記述はない。cssでレスポンシブ機能を付けるため、その点に留意したidやclassの付与が必要となる。
<div id="container"> <header id="top"> <h1><img src="img/logo.png" alt="pickup stream"></h1> <aside> <ul> <li><a href="#"><img src="img/twitter.png" alt="twitter"></a></li> <li><a href="#"><img src="img/googleplus.png" alt="googleplus"></a></li> <li><a href="#"><img src="img/facebook.png" alt="facebook"></a></li> <li><a href="#"><img src="img/rss.png" alt="rss"></a></li> </ul> </aside> <p><img src="img/header.jpg" alt="header_background"></p> </header> <nav id="gn"><ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul></nav> <div id="wrapper"> <article><header id="atcl_header"><h2><time datetime="2014-08-01"><span>1</span> AUG</time><br> 海岸のデコレーション</h2> <div id="ctgry">CATEGORY: <a href="#">海と海岸と空</a></div><!--ctgry--> </header> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p> <img src="img/sand.jpg" alt="砂浜"><br> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。 </p></article> <div id="sidebar"> <nav id="side_ctgry"> <h3>CATEGORIES</h3> <ul> <li>山と森林</li> <li>海と海岸と空</li> <li>都市と建築</li> <li>地下</li> </ul> </nav> <nav id="side_recent"> <h3>RECENT POSTS</h3> <ul> <li>海岸のデコレーション</li> <li>風車と海風の関係</li> <li>ツルを伸ばしてどこまでも</li> <li>色とりどりの絨毯</li> <li>休日に買い物にいくなら</li> <li>高層ビルと風の関係</li> </ul> </nav> </div><!--sidebar--> </div><!--wrapper-->
css記述 PC用表示および共通部
style.cssではPCでの表示を前提とし、#containerのwidthを960pxとした。その他、全ての表示サイズで共通する記述はここで行なう。レスポンシブらしい点はまだ登場しない。
#container{ width:960px; margin:10px auto; overflow:hidden; } header{ overflow:hidden; } h1{ float:left; margin-bottom:5px; } nav ul{ overflow:hidden; } aside ul{ padding-bottom:0px; margin-bottom:0px; height:40px; float:right; } aside ul li{ width:35px; float:left; } #gn ul{ background:#000; } #gn ul li{ float:left; width:150px; text-align:center; border-right:1px solid #fff; height:30px; line-height:30px; } #gn a{ color:white; } li a{ display:block; } #gn li a:hover{ background:#4a4; } #wrapper{ margin:50px 0; overflow:hidden; } article{ width:600px; float:left; } h2,h3{ border-bottom:1px solid #888; padding-left:5px; padding-bottom:5px; } h2{ margin-bottom:10px; padding-bottom:10px; font-size:180%; } time{ padding:18px 22px; border-radius:55px/48px; background:#aaf; color:#fff; float:right; width:58px; height:55px; text-align:center; font-size:90%; } span{ flaot:left; } #ctgry{ color:#999; } #ctgry a{ color:#999; text-decoration:underline; } article p{ margin-top:20px; line-height:150%; } article img{ margin:10px 0; } h3{ margin-top:20px; color:#99f; font-size:140%; } #sidebar{ float:right; margin-left:30px; } #sidebar ul{ margin-bottom:50px; } #sidebar li{ background:url(img/listmark.png) no-repeat 0 50%; padding:20px 0; padding-left:15px; border-bottom:1px #aaa solid; } footer{ clear:both; text-align:center; color:white; background:#000; height:30px; text-align:left; padding:20px; }
css記述 タブレット用
タブレットでの表示を前提にした、600～979pxの横幅を持つ表示デバイス用のcssでは、横並びの記事本体とサイドバーのwidthを百分率で指定する。こうすることでpx指定の場合とは異なり、画面サイズに応じてブラウザが表示pxを自動で調整する。可変レイアウトの基本である。
#container{ width:95%; } article{ width:62.5%; } #sidebar{ width:31.25%; } img{ width:100%; }
css記述 スマートフォン用
スマートフォンでの表示では下記の点を変更している。
- 2カラム構成を1カラムに
- タイトル右部にあったアイコン群をfooterへ移動
- グローバルナビの幅を自動に
- 見出しの日付を小型化し、位置も見出しの上に移動
- 見出しの文字サイズを小さく
ソーシャルメディアのアイコン群をfooterに移動させる手段としてposisionを使っている点に注意。これに伴い、footerのpaddingを増やし収まりよく表示させている。
#container{ width:95%; } /*1カラムに変更するため、各要素を100%に*/ article{ width:100%; float:none; } #sidebar{ width:100%; float:none; } img{ width:100%; height:auto; } /*aside(ソーシャルアイコン)をfooterの位置に移動*/ #container{ position:relative; } header{ margin:0 0 15px; } aside ul{ float:none; position:absolute; right:8px; bottom:6px; } footer{ padding-bottom:60px; } /*グローバルナビの幅をautoに*/ #gn ul li{ width:auto; padding:5px 8px; } /*記事タイトルと日付部の調整*/ time{ float:none; font-size:12px; line-height:2.5; display:inline; padding:3px 10px; border-radius:5px; } time span{ font-size:12px; display:inline; } #content h2{ font-size:24px; }
