何度も書きなおすので、備忘録としてHTML5×レスポンシブデザインのHTMLとCSSのひな形を紹介。 レスポンシブデザインとは、ひとつのHTMLソースでスマートフォンからタブレット、PCまで対応しちゃいましょうというもの。 レスポンスデザインのCSSは、Media Queries(@media screen)を利用してモバイルから記載する形。つまりユーザのデバイスの横幅に応じて、適用するCSSを変更します。 スマートフォン最適化の方法は大きく３つあり、、、

• スマートフォン用のURLにリダイレクトする
• デバイスのUA(ユーザエージェント)によって、読み込むCSSを変える
• 今回紹介するMedia Queriesを利用する

といった方法があるのですが、今回の方法が一番楽であり、SEO的にも良いのでこの方法を使っています。 リダイレクトかけるとURLが変わってしまう(http://non-programmer.netをhttp://non-programmer.net/mにリダイレクトなど)ので、別ページと認識され、重複コンテンツ扱いになる可能性もあるので。 UAで判定するものはいろいろできて良いのですが、UAが増えるたびに対応するのが大変。 という事情です。 HTMLに関してはhead部分に、これから入れておいたほうが良い設定も入れています。スマートフォンのホーム画面用のアイコンや、SNSなどにシェアされるときに表示する画像など入れると幸せになれるかもしれませんし、使わないなら削除したら良いですが、入れることを推奨します。 余計な部分もあるので、使う場合は適当に削除して使ってください。

---

そしてCSS。

@charset "UTF-8";
/**
リセットCSS
* YUI 3.5.0 – reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* http://cssreset.com
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can’t namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
html {
color:#333;
}
/*
TODO remove settings on BODY since we can’t namespace it.
*/
/*
TODO test putting a class on HEAD.
– Fails on FF.
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}
/*
TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit…
*/
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
/* list-style:none; */
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:”;
}
abbr, acronym {
border:0;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
input, textarea, select {
*font-size:100%;
}
/*because legend doesn’t inherit in IE */
legend {
color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset {
display: none;
}
/* ↑リセットCSS */

/* =構造
———————————————– */
* {
margin: 0;
}
html, body {
height: 100%;
}

body{
font: 300 15px/1.625 ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro W3′,’メイリオ’,’ＭＳ Ｐゴシック’,sans-serif,arial,helvetica,clean;
color:#333;
letter-spacing: 1px;
}

#header{
min-height: 45px;
width: 100%;
display: block;
border-bottom:solid 2px #000;
background-image: url("../img/grey_wash_wall.gif");
/* filter:alpha(opacity=80); */
position: fixed;
z-index:3;
}

#header_clear{
display:none;
}

#header_center{
max-width:1080px;
margin:0 auto;
padding: 0 20px;
z-index: 2;
}

#main{
width:100%;
display:;
padding-top:50px;
}

#main_center{
max-width:1000px;
margin:0 auto;
padding: 20px;
}

/* div固定用 */
.clear {
clear:both;
}
.clear hr {
display:none;
}

/* =footer
———————————————– */

#footer{
height:50px;
width:100%;
}

#footer_center{
max-width:1000px;
margin:0 auto;
}

/* =文字
———————————————– */
a{
text-decoration: none;
}

.text {
border:1px solid #999999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2px 10px;
color:#aaaaaa ;
}

input, textarea, select{
border: 1px solid #ddd;
border-radius: 5px;
padding: 4px 10px;
}

img{
max-width: 100%;
height: auto;
width /***/:auto;
}

/* =header
———————————————– */
#site_title{

}

#site_title img{

}
#site_title a{

}

#site_title a img{

}

#site_title a:hover{

}

/* =main
———————————————– */

/* =footer
———————————————– */
#footer_copy{
color: #DDDDDD;
display: block;
float: right;
font-size: 80%;
margin-right: 10px;
margin-bottom: 10px;
padding-top: 10px;
text-align: right;
/* width: 300px; */
}

/* =共通
———————————————– */

/* =index
———————————————– */

/*===============================================
●tab.css 画面の横幅が480px以上
===============================================*/
@media screen and (min-width: 480px){

}/* 480px以上*/

/*===============================================
●PC.css 画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px){

} /* 769px以上*/