■第1回　メニュー編

■記事はこちら　

★タグでViewportの設定。メディアクエリによるCSS振り分け。

スマホサイトを作る上で欠かせない準備。

…
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link media="only screen and (min-device-width:481px)" href="css/main.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width:480px)" href="css/imain.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
…

★#containerブロックのリキッド化。overflow:hidden化。

ページの横幅より内部要素がハミ出して、無駄な横スクロールが発生するのを防ぐ。

iPhoneではかなり有効。Androidでは内部要素の横幅が親要素より上回らないように気をつける。

…
#container{
margin:0 auto;
/*スマホ向け*/
width:100%;
overflow:hidden;
/*/スマホ向け*/
}
…

★グローバルメニューの縦並び化＆リキッド化。

PCサイトで横並び（float:left; width:固定）となっているのを、

float:none;　width:100%　とすることで実現。

…
#globalNav li{
margin:0;
/*スマホ向け*/
　float:none;
clear:both;
width:100%;
text-align:left;
padding:10px 0 10px 20px;
/*/スマホ向け*/
border:1px #999 solid;
background-color:#CCC;
display:block;
}
…

■第２回 HTMLとCSSで画像を操る編（前編）

■記事はこちら

1．要素の取捨選択

要らない要素はdisplay:none;

<div id="header">
<div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
<div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>　
</div>

#headerMain{
display:none;
}

2．HTMLとCSSだけで画像を振り分ける

HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none;

<div id="header">
<div id="logo">
<h1>
<a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" />
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" />
            </a>
</h1>
</div>
<div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
</div>

main.css（PC用CSS）→　.logo_i　を display:none;

imain.css（スマホ用CSS）　→　.logo_pc　をdisplay:none;

main.cssに追記

/*↓PCでは不可視にする↓*/
.logo_i{
display:none;
}
/*↑PCでは不可視にする↑*/

imain.cssに追記

/*↓スマホでは不可視にする↓*/
.logo_pc{
display:none;
}
/*↑スマホでは不可視にする↑*/

■第２回 HTMLとCSSで画像を操る編（後編）

■記事はこちら

3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ

画像の代わりにCSS3グラデーションを使う。疑似要素beforeとafterを活用する。

※この記事はぜひとも本文を読んでほしいです（笑）

まず、メニューの要素構成のイメージです。

イメージのように、CSSの疑似要素を活用することでHTMLを書き換えずに、

デザインを構成することができます。

グラデーション

#globalNav li{
/*↓スマホ向け （第1回 -メニュー編-）↓*/
margin:0;
float:none;
clear:both;
width:100%;
text-align:left;
/*/↑スマホ向け（第1回 -メニュー編-）↑*/
/*↓スマホ向け （第2回 -画像編-）↓*/
padding:0;
border:1px #4294E6 solid;
border-bottom:0px;
/*画像どおりのグラデーション
    background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#79b3e6),
		color-stop(0.50, #0066cc),
		color-stop(0.50, #003399),
		color-stop(0.69, #2e63b8),
		to(#4793d1));
	*/
/*グラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#6d95fc),
to(#374ec4));
display:block;
/*テキストにドロップシャドウ*/
text-shadow:
0px 1px 1px rgba(0,0,0,1),
0px -1px 0px rgba(255,255,255,0.3);
/*/↑スマホ向け（第2回 -画像編-）↑*/
}

擬似要素でメニュー内容を表示。

/*aタグをブロック要素に*/
#globalNav li>a{
display:block;
width:100%; /*リキッドに*/
height:auto; /*リキッドに*/
padding:10px 0; /*paddingを上下に指定することで、少し高さを持たせる*/
color:#333;
text-align:left;
text-decoration:none;
}
/*aタグ内の先頭に、疑似要素を追加。aタグのtitle属性の内容を表示させる */
#globalNav li>a:before{
content:attr(title); /*aタグのtitle属性を表示*/
width:100%; /*リキッドに。*/
font-size:18px;
font-weight:bold;
padding-left:10px;
color:#FFF;
display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
vertical-align:middle; /*縦方向の中央寄せ。*/
}

擬似要素で「>」を表示。

/*矢印画像の追加*/
#globalNav li>a:after{
content:url(../images/arrowR.png); /*矢印画像URI*/
font-size:18px;
font-weight:bold;
padding-right:10px;
color:#FFF;
display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
vertical-align:middle; /*縦方向の中央寄せ。*/
}