★CSSのポイント★

●前回までのエントリで紹介したPC⇔スマホサイトのパターン

↓サンプルファイルのダウンロード

smart_sample02.zip

#globalNav li{
/*リストの基本的なレイアウト*/
margin:0;
float:none;
clear:both;
width:100%;
text-align:left;
padding:0;
border:1px #4294E6 solid;
border-bottom:0px;
　display:block;
/*グラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#6d95fc),
to(#374ec4));
/*テキストにドロップシャドウ*/
text-shadow:
0px 1px 1px rgba(0,0,0,1),
0px -1px 0px rgba(255,255,255,0.3);
　　/*矢印画像の追加*/
　　#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; /*縦方向の中央寄せ。*/
　　}
}

★CSSのポイント★

＜サイトの背景部分＞

• グラデーション

＜リストメニュー部分＞

• 横幅いっぱいではなく、ちょっと余白（padding）付ける
• 最初と最後の行のみ角丸
• ドロップシャドウ
• グラデーション

↓サンプルファイルのダウンロード↓

02.zip

/*＜サイトの背景部分＞*/
body{
margin:0;
padding:0;
font-size:12px;
/*ここでグラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#50e2ff),/*グラデーションの上端の色*/
to(#ffffff));/*グラデーションの下端の色*/
　　/*グラデーションをY方向に繰り返さないようにする*/
background-repeat:repeat-x;
}
/*＜リストメニュー部分＞*/
/*メニューを画面いっぱいではなく、ちょっと余白付きに*/
#globalNav ul{
list-style:none;
display:block;
padding:10px 10px; /* ここで余白をつける */
}
/*リストの基本的なCSS*/
#globalNav li{
margin:0;
float:none;
clear:both;
width:100%;
text-align:left;
padding:0;
border:1px #8cf solid;
border-bottom:0px;
display:block;
/*1行ごとのグラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#b5e8ff));
-webkit-box-shadow: /*リスト一行ごとにドロップシャドウ。
　　　　　　　　　　　　　　ULにつければ良さそうだが、ULは角丸してないので*/
0px 3px 3px rgba(000,000,000,0.1);
}
/*一番上の行を、左上と右上の角だけ丸くする*/
#globalNav li:first-child{
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
/*一番下の行を、左下と右下の角だけ丸くする*/
#globalNav li:last-child{
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom:1px #8cf solid;
}

↓サンプルファイルのダウンロード↓

02v.zip

さわやかかつ落ちついた感じです。

見てるだけで気分がいいですね。

★CSSのポイント★

パターン２と違うのは、メニューをボーダーで囲んでいる部分です。

色使いを変えて太めのボーダーを描くだけで、こんなにかわいくなっちゃいます。

これも全然簡単ですよ。

＜リストメニュー部分（パターン２と違う部分のみ）＞

• ボーダー
• リストのサイジング
• 途中経過も指定したグラデーション

↓サンプルファイルのダウンロード↓

03.zip

#globalNav li{
…
/*ボーダーを5pxで描く*/
border:5px #F9C solid;
/*ボーダー分、リストの幅が広がるので、ボーダー込みでサイジングする*/
-webkit-box-sizing: border-box;
…
/*リスト1行ごとのグラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff), /* 上端の色 */
color-stop(0.50, #ffffff), /* 途中経過の色1 */
color-stop(0.50, #fff0f8),　/* 途中経過の色2 */
color-stop(0.95, #ffd1e7), /* 途中経過の色3 */
to(#ffffff));/* 下端の色 */
}

↓サンプルファイルのダウンロード↓

03v.zip

なぜか相当気の早いクリスマスなデザインを作ってしまいましたが…

かわいいですよね。

★CSSのポイント★

パターン１～３と違うのは、リストのグラデーションの淵がうっすらと明るめになってますよね。

CSS3はこんなディティールの指定までできちゃうんです。

＜リストメニュー部分（パターン２・３と違う部分のみ）＞

• インナーシャドウ

↓サンプルファイルのダウンロード↓

04.zip

#globalNav li{
　　　…
-webkit-box-shadow:
/*1行ごとにドロップシャドウ（幅いっぱいとってるので見えないですが…） */
0px 3px 3px rgba(000,000,000,0.1),
/*1行ごとのインナーシャドウ */
inset 0px 0px 3px rgba(255,255,255,0.7);
}

↓サンプルファイルのダウンロード↓

04v.zip

ディティールを調整することで、クールな印象をより強くすることができます。