「スマホ対応サイト制作 初心者向け」-2.画像をCSSで操る編(後編)-
前編の続きです。(前編はこちら)
3.CSS3グラデーションの活用
ヘッダはできあがりましたが、まだメニューの画像がヘンです。
こちらも、ヘッダでおこなったような方法が取れなくもないのですが、
さすがにメニューは5個もあるし、その分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タグをブロック要素にすることで、1つのメニュー全体にリンクを有効にすることができます。
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; /*縦方向の中央寄せ。*/ }
- 作者: クリストファー・アレン,株式会社FEYNMAN 正健太朗
- 出版社/メーカー: 日経BP社
- 発売日: 2010/04/15
- メディア: 単行本
- クリック: 113回
- この商品を含むブログ (5件) を見る