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

On 2011年2月8日, in Android, HTML5, iPhone, Web制作, スマートフォンサイト制作, by kosuke

この記事のURLをスマートフォンに送る

Check

【目次】

1.メニュー編

2.HTMLと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属性を追加しておきます。

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