Shift Layout
Shift 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 gt IE 8]><!--> <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>Shift Layout</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet'> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <script src="js/html5shiv.js"></script> <![endif]--> </head> <body> <div id="wrapper" class="clearfix"> <header> <h1>RWD</h1> <nav class="clearfix"> <ul class="left clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> </ul> <ul class="right clearfix"> <li><a href="#">SAMPLE</a></li> <li><a href="#">TIPS</a></li> </ul> </nav> </header> <article> <h1>Responsive web design</h1> <section id="section01"> <h2>ウェブは柔軟な媒体である</h2> <img src="img/pic_01.jpg" alt=""> <p>テキスト文書だったWebをデザインするようになって間もない頃は、デスクトップパブリッシングの技術を参考にしてきました。<br> そして制約されたサイズの中でデザインする印刷物のデザインがWebデザインの主流となりました。<br> しかしそもそもWebと印刷物は異なる媒体です。<br> 長い時間を経て、印刷物のデザインは制約されたサイズでのデザイン技術を高めましが、そのままWebに反映できる技術ではありませんでした。<br> Webは制約された媒体ではありません。環境によって縦横に変化する柔軟な媒体です。<br> 今までのWebデザインで固まった固定概念と、ピクセルパーフェクトの制約を壊してもっと柔軟になるべき時です。</p> </section><!--/#section01 --> <section id="section02"> <h2>全てをコントロールできない</h2> <img src="img/pic_02.jpg" alt=""> <p>Webサイトにアクセスできるデバイスは多様化し、それを使う環境・シチュエーションも多様化しました。<br> 入力方式もマウスからタッチデバイス、カメラを使って手さえ触れずに操作することも可能となりました。<br> Webサイトを閲覧するブラウザはユーザーがカスタマイズして使うことができます。万人に全く同じような体験を提供することは実質的に不可能です。全てを制御しようとしないことです。<br> 人によって多少の見え方の違いや使い方の違いも許容できるような柔軟な思考が必要です。</p> </section><!--/#section02--> <section id="section03"> <h2>情報を適切に届けること</h2> <p>柔軟な媒体であり、こちらから全てをコントロールすることもできない。<br> では、環境により提供するコンテンツも異なって良いのでしょうか？<br> ユーザーがサイトにアクセスする理由はそのサイトのコンテンツを閲覧することが目的です。<br> もしそのコンテンツを適切にユーザーに届けられないのであればそのサイトの価値はなくなってしまいます。<br> 閲覧するデバイスや環境で多少その構造が変わったとしてもサイトの核であるコンテンツは適切にユーザーに届けなければなりません。<br> コンテンツファースト。コンテンツから考え、コンテンツを最優先に設計しましょう。<br> そしてどの情報をどの形でどのように届けるのが最適であるのか。難しい問題ですが常にチャレンジし続けることで解が見えてくるでしょう。</p> </section><!--/#section03--> </article> </div><!--/#wrapper--> <footer> <small>Copyright (c) Respoisive web design</small> </footer> </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: 1240px; } header { padding: 15px 0 0; background: #183400; } header h1 { width: 148px; height: 148px; margin: 0 auto 15px; border: 1px solid #fff; background: #b39b14; background: -webkit-linear-gradient(top, #b39b14, #917700); background: -moz-linear-gradient(top, #b39b14, #917700); background: -o-linear-gradient(top, #b39b14, #917700); background: linear-gradient(to bottom, #b39b14, #917700); box-shadow: 0 0 5px 1 #000; line-height: 148px; font-size: 48px; font-weight: normal; font-family: 'Marcellus SC', serif; color: #000; text-align: center; } nav { position: relative; z-index: 10; box-shadow: 0 0 6px 2px #000; } nav ul { margin: 0; padding: 0; border-top: 1px solid #000; } nav ul li { display: block; float: left; width: 50%; border-top: 1px solid #2e4d13; font-family: 'Marcellus SC', serif; text-align: center; } .ie7 nav ul li{ width: 49.84375%; } nav ul li a { display: block; padding: 15px 0; color: #fff; text-decoration: none; } article { padding: 0 0 2em; } article h1 { margin: 0; padding: 60px 0; background: url(../img/bg_ttl.jpg) center center no-repeat; line-height: 1; font-size: 2em; font-family: 'Marcellus SC', serif; color: #fff; font-weight: normal; text-align: center; text-shadow: 1px 1px 1px #000; } article h2 { padding: 0 0 0 10px; font-size: 2em; font-weight: normal; line-height: 1.1; border-left: 3px solid #000; } section { margin: 0 10px 2em; } footer { margin: 0 10px; padding: 30px 0; border-top: 1px solid #444; text-align: center; } /*media Queries ----------------------------------------------------*/ @media only screen and (min-width: 600px) { header { position: relative; height: 120px; padding: 0; } header h1 { position: absolute; top: 15px; left: 50%; z-index: 200; margin-left: -75px; } nav ul { overflow: hidden; width: 50%; border-top: none; -moz-box-sizing: border-box; box-sizing: border-box; } .ie7 nav ul{ width: 37.5%; } nav ul.left { float: left; padding-right: 75px; } nav ul.right { float: right; padding-left: 75px; } nav ul li { border-top: none; } nav ul li a { padding: 0; line-height: 120px; text-align: center; } article h1 { padding: 89px 0; font-size: 3em; } #section01 img { float: left; width: 48.9361%; /*460px/690px*/ margin: 0 20px 20px 0; } #section02 img { float: right; width: 48.9361%; /*460px/690px*/ margin: 0 0 20px 20px; } } @media only screen and (min-width: 960px) { #wrapper { margin: 0 20px; } header { float: left; width: 25.5319%; /*220px(3column)+20px/940px*/ height: auto; padding-bottom: 200px; border-bottom: none; background: #183400 url(../img/bg_header.png) left bottom repeat-x; box-shadow: 0 0 3px 0 #000; } header h1 { margin: 15px auto; position: static; } article { float: right; width: 74.4680%; /*700px(9column)/940px*/ } section { margin: 0 0 2em; padding: 0 0 0 20px; } nav { box-shadow: none; border-bottom: 1px solid #2e4d13; } nav ul, .ie7 nav ul { width: 100%; } nav ul.left, nav ul.right { float: none; padding: 0; } nav ul li, .ie7 nav ul li { width: 100%; border-top: 1px solid #000; } nav ul li a { padding: 15px 0 15px 15px; line-height: 1; text-align: left; border-top: 1px solid #2e4d13; } nav ul.right li:last-child a { border-bottom: 1px solid #000; } } @media only screen and (min-width: 1280px) { #wrapper { margin: 0 auto; } }
