「スマホ対応サイト制作初心者向け」-2.画像をCSSで操る編（後編）-

前編の続きです。（前編はこちら）

3．CSS3グラデーションの活用
ヘッダはできあがりましたが、まだメニューの画像がヘンです。

こちらも、ヘッダでおこなったような方法が取れなくもないのですが、
さすがにメニューは５個もあるし、その分HTMLソースに記述するのは、なんだか気が引けます。。。

幸い画像がただのグラデーションなので、どうにかCSSを使って対応できるかもしれません。

CSS3には、グラデーションを描く機能があるため、それを活用してみたいと思います。

★まず、メニュー画像は全てdisplay:none;
この手法はもうおなじみ。
imain.cssに追記

#globalNav li>a>img{
	display:none;
}

すると…
当然なのですが、メニューが無くなった。。。

メニュー画像を消してしまったので、どうにか要素を作らなくてはいけません。

そこで、疑似要素を使います。

★aタグをブロック要素に。疑似要素の追加。

imain.cssに追記

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

ここは、一応簡単に説明をしておきます。
aタグをブロック要素にすることで、１つのメニュー全体にリンクを有効にすることができます。
a:beforeとして指定することで、aタグ内の先頭に要素を作ることができます。
content:attr(title); で　aタグのtitle属性を表示し、
display:table-cell;とvertical-align:middle;で、縦方向の中央寄せをおこなっています。

そして、各aタグにtitle属性を追加しておきます。

          <!--aタグにtitle追加-->
          <li><a href="menu1.html" title="メニュー1"><img src="images/menu1.jpg" alt="メニュー1" /></a></li>
          <li><a href="menu2.html" title="メニュー2"><img src="images/menu2.jpg" alt="メニュー2" /></a></li>
          <li><a href="menu3.html" title="メニュー3"><img src="images/menu3.jpg" alt="メニュー3" /></a></li>
          <li><a href="menu4.html" title="メニュー4"><img src="images/menu4.jpg" alt="メニュー4" /></a></li>
          <li><a href="menu5.html" title="メニュー5"><img src="images/menu5.jpg" alt="メニュー5" /></a></li>

この時点での表示はこうなります。

★CSS3グラデーション。その他の装飾を施す。
上の画像の状態だと、ちょっとPCとデザインがかけはなれてますよね。

グラデーションと矢印（？）の装飾をCSSで対応してみます。
まず、グラデーションをliタグに施します。

imain.cssに追記

#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回 -画像編-）↑*/
}

background: -webkit-gradient(〜);
の部分でグラデーションを設定します。

これについては、いろんなサイトで説明がなされているので、簡単な説明にとどめておきます。
簡単に言うと、fromからtoの値へ変化するグラデーションを設定できます。
画像どおりのグラデーションをほどこすと、やや見づらかったので変更しました。
念のため画像どおりのグラデーション値も残しておきます。

次に「＞」矢印の追加です。
これは、見づらいですが、

のような画像を用意して、疑似要素:afterで配置します。

imain.cssに追記

/*矢印画像の追加*/
#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; /*縦方向の中央寄せ。*/
}