PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ）

PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、
一旦ここまでのCSSテクについてまとめます。

■第1回　メニュー編
■記事はこちら　

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

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

…
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--viewportの指定-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--/viewportの指定-->
<!--メディアクエリでPC用・スマホ用CSSを振り分け-->
<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" />
<!--/メディアクエリでPC用・スマホ用CSSを振り分け-->

<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;

    <!--header-->
      <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><!--/header-->

#headerMain{
	display:none;
}

2．HTMLとCSSだけで画像を振り分ける
HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none;

    <!--header-->
      <div id="header">
        <div id="logo">
        <h1>
          <a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" /><!--PC時のロゴ　class=logo_pcを指定-->
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" /><!--スマートフォン時のロゴ　class=logo_iを指定-->
            </a>
          </h1>
        </div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
      </div><!--/header-->

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; /*縦方向の中央寄せ。*/
}

まとめだけでも随分長くなってしまった。。。
ソース書かなきゃいいのかな。

追記：連載のタイトル変えました。この連載の主旨って、「PCサイトをスマホ対応する」っていうことだな〜と気づきました（笑）

IPHONEアプリ×WEBサイト開発入門