HTML↓
CSS↓
@charset "UTF-8";
<!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>Fluid 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">
<header>
<h1>Responsive Web Design</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="#">SAMPLE</a></li>
<li class="last"><a href="#">TIPS</a></li>
</ul>
</nav>
<div id="mainImage">
<img src="img/pic_main.jpg" alt="">
</div>
</header>
<div id="content" class="clearfix">
<article>
<section>
<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>
<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>
<aside>
<section>
<h3>Headline</h3>
<img src="img/pic_02.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>
</section>
<section>
<h3>Headline</h3>
<img src="img/pic_03.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>
</section>
</aside>
</div><!--/#content -->
<footer>
<small>Copyright (c) Responisive web design</small>
</footer>
</div><!--/#wrapper-->
</body>
</html>
@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: 940px;
margin: 0 auto;
}
header {
margin-bottom: 1.5em;
}
header h1 {
line-height: 1.1;
font-size: 3em;
font-weight: normal;
font-family: 'Marcellus SC', serif;
color: #000;
text-align: center;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
float: left;
width: 50%;
border-bottom: 1px solid #0b1900;
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);
font-family: 'Marcellus SC', serif;
letter-spacing: 0.1em;
text-align: center;
}
nav ul li a {
display: block;;
padding: 10px 0;
color: #fff;
text-decoration: none;
}
.ie7 ul{
background: #1d4000;
}
.ie7 ul li{
width: 49.84375%;
}
nav ul li:nth-child(odd) a {
border-right: 1px solid #0b1900;
}
#content {
padding: 0 10px;
}
article h2 {
margin: 0.5em 0;
padding: 0 0 0 10px;
border-left: 3px solid #000;
line-height: 1.1;
font-size: 2em;
font-weight: normal;
}
article section {
margin-bottom: 2em;
}
aside{
margin-bottom: 2em;
background: rgba(255,255,255,0.8);
}
aside h3 {
margin: 0.5em 0;
font-size: 1.5em;
font-weight: normal;
}
aside section{
padding: 10px;
font-size: 0.875em;
}
footer {
clear: both;
padding: 30px 0;
background: #1a1603;
color: #fff;
text-align: center;
}
/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
header h1 {
line-height: 1.5;
}
nav ul li {
width: 25%;
}
.ie7 nav ul li{
width: 24.9166%;
}
nav ul li a {
border-right: 1px solid #0b1900;
}
nav ul li:last-child a {
border-right: none;
}
/*old IE*/
nav ul li.last a{
border-right: none;
}
#content {
padding: 0 20px;
}
#content article{
float: left;
width: 65.9574%;
/*620px(8column)/940px*/
}
#content aside{
float: right;
width: 31.9148%;
/*300px(4column)/940px*/
}
}
@media only screen and (min-width: 960px) {
#content{
padding: 0;
}
}
