Fluid & Fixed Layout
Fluid & Fixed Layout
例
《index.html》
<!DOCTYPE html> <!--[if lt IE 7]> <html class="ie6" lang="ja"> <![endif]--> <!--[if IE 7]> <html class="ie7" lang="ja"> <![endif]--> <!--[if IE 8]> <html class="ie8" lang="ja"> <![endif]--> <!--[if IE 9]> <html class="ie9" lang="ja"> <![endif]--> <!--[if gt IE 9]><!--> <html lang="ja"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Fluid & Fixed Layout</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=Trocchi' rel='stylesheet'> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <header> <h1 id="logo">RWD</h1> <nav> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">SAMPLE</a></li> <li><a href="#">TIPS</a></li> </ul> </nav> </header> <div id="content" class="clearfix"> <div id="contentInner"> <article> <h1>Responsive web design</h1> <img src="img/pic_01.jpg" alt="" id="mainImage"> <section> <h2>ウェブは柔軟な媒体である</h2> <p>テキスト文書だったWebをデザインするようになって間もない頃は、デスクトップパブリッシングの技術を参考にしてきました。<br> そして制約されたサイズの中でデザインする印刷物のデザインがWebデザインの主流となりました。<br> しかしそもそもWebと印刷物は異なる媒体です。<br> 長い時間を経て、印刷物のデザインは制約されたサイズでのデザイン技術を高めましが、そのままWebに反映できる技術ではありませんでした。<br> Webは制約された媒体ではありません。環境によって縦横に変化する柔軟な媒体です。<br> 今までのWebデザインで固まった固定概念と、ピクセルパーフェクトの制約を壊してもっと柔軟になるべき時です。</p> </section><!--/section01 --> <section> <h2>全てをコントロールできない</h2> <p>Webサイトにアクセスできるデバイスは多様化し、それを使う環境・シチュエーションも多様化しました。<br> 入力方式もマウスからタッチデバイス、カメラを使って手さえ触れずに操作することも可能となりました。<br> Webサイトを閲覧するブラウザはユーザーがカスタマイズして使うことができます。万人に全く同じような体験を提供することは実質的に不可能です。全てを制御しようとしないことです。<br> 人によって多少の見え方の違いや使い方の違いも許容できるような柔軟な思考が必要です。</p> </section><!--/section02--> <section> <h2>情報を適切に届けること</h2> <p>柔軟な媒体であり、こちらから全てをコントロールすることもできない。<br> では、環境により提供するコンテンツも異なって良いのでしょうか？<br> ユーザーがサイトにアクセスする理由はそのサイトのコンテンツを閲覧することが目的です。<br> もしそのコンテンツを適切にユーザーに届けられないのであればそのサイトの価値はなくなってしまいます。<br> 閲覧するデバイスや環境で多少その構造が変わったとしてもサイトの核であるコンテンツは適切にユーザーに届けなければなりません。<br> コンテンツファースト。コンテンツから考え、コンテンツを最優先に設計しましょう。<br> そしてどの情報をどの形でどのように届けるのが最適であるのか。難しい問題ですが常にチャレンジし続けることで解が見えてくるでしょう。</p> </section><!--/section03--> </article> </div><!-- /#contentInner --> <aside> <h3>PR</h3> <ul> <li><img src="img/bnr_ad.jpg" alt="ad" width="240" height="240"></li> <li><img src="img/bnr_ad.jpg" alt="ad" width="240" height="240"></li> </ul> </aside> </div><!--/#content --> <footer id="footer"> <small>Copyright (c) Responsive web design</small> </footer> </div><!--/#wrapper--> </body> </html>
《style.css》
@charset "UTF-8"; /*初期設定 ----------------------------------------------------*/ body { min-width: 320px; background: url(../img/bg_body.png); line-height: 1.5; color: #333; } img { max-width: 100%; height: auto; } .ie8 img{ width: auto; } /*clearfix*/ .clearfix { zoom: 1; } .clearfix:after { content: ""; display: block; clear: both; } /*layout ----------------------------------------------------*/ #wrapper{ max-width: 960px; margin: 0 auto; } header h1 { width: 150px; height: 150px; margin: 0.5em auto; background: #0b1900; font-size: 3em; line-height: 150px; font-weight: normal; font-family: 'Trocchi', serif; color: #fff; text-align: center; border-radius: 75px; } nav { text-align: center; } nav ul { margin: 0; padding: 0; box-shadow: 0 1px 1px 0 #000; } nav ul li { float: left; width: 25%; font-family: 'Trocchi', serif; text-align: center; text-shadow: 1px 1px 1px #000; } nav ul li a { display: block; padding: 15px 0; border-bottom: 1px solid #456729; background: #1d4000; background: -webkit-linear-gradient(top, #1d4000, #183400); background: -moz-linear-gradient(top, #1d4000, #183400); background: -o-linear-gradient(top, #1d4000, #183400); background: linear-gradient(to bottom, #1d4000, #183400); color: #fff; text-decoration: none; } .ie7 nav ul{ background: #1d4000; } .ie7 nav ul li{ width: 24.84375%; } #content { margin: 0 10px 20px; } #content h1 { font-size: 2.5em; font-weight: normal; line-height: 1.1; font-family: 'Trocchi', serif; } #content h2 { padding: 0 0 0 10px; border-left: 3px solid #000; line-height: 1.1; font-size: 2em; font-weight: normal; } section { margin-bottom: 3em; } aside { margin-bottom: 20px; padding: 10px; background: #fff; box-shadow: 0 0 1px 0 #333; } aside h3 { margin-top: 0; padding: 5px 5px 5px 10px; background: #e5e5e5; border-radius: 3px; } aside ul { margin: 0; padding: 0; -webkit-column-width: 240px; -moz-column-width: 240px; column-width: 240px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; text-align: center; } aside ul li { padding-bottom: 15px; list-style-type: none; } .ie7 aside ul li{ display: inline; padding: 0 10px; } .ie8 aside ul li, .ie9 aside ul li{ display: inline-block; padding: 0 10px; } footer { clear: both; padding: 30px 0; background: #1a1603; color: #fff; text-align: center; } /*media Queries ----------------------------------------------------*/ @media only screen and (min-width: 800px) { #contentInner { float: left; width: 100%; margin-right: -300px; } article { margin-right: 300px; } aside { float: right; width: 240px; margin-top: 1.675em; } /*IEで要素がズレるのを対応*/ .ie7 aside ul li, .ie8 aside ul li, .ie9 aside ul li{ display: list-item; padding: 0; } } @media only screen and (min-width: 980px) { #wrapper { margin-bottom: 20px; } }
