Kaleidoscope このページをアンテナに追加 RSSフィード

2011-02-17 スマホサイトのリスト型メニューを何パターンか作ってみた

izit_kosuke2011-02-17

スマホサイト:このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。

即座にDLできるようにアーカイブ化。



※naruさんのご指摘により、2.19以前のサンプルソースCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。

(あまりいらっしゃらないとは思いますが…)もしそれ以前にDLされた方は、現在修正版をお使いください。

ご報告いただいたnaruさん、ありがとうございました。

(ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください)


f:id:izit_kosuke:20110216201054j:image

smart_sample02.zip 直

スマホサイトのリスト型メニューを何パターンか作ってみた

仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。

スマホサイトといえば、リスト型メニュー?がスマホならではですよね。

今後のスマホサイト対応の波に速攻対応できるように

今のうちに、リスト型メニューをいくつかのパターンで作っておくことにしました。


(だいぶ行き当たりばったりのエントリーになってきました。。。)

スマホサイトのデザインで重要になってくるのが、CSS3の活用だと思ってます。

なぜなら、3G回線などでは通信速度が遅いため、ページ全体のデータ量を軽くする必要があるのです。

となると、極力画像使用を抑えることになるのですが、やっぱり見た目にきれいなページにしたいですよね。

そこでCSS3が活躍してくれるのです。


ポイントとなるCSSを載せておきます。

参考になる部分はご活用いただいて、ここはこうしたほうがいいんじゃ?って部分はツッコミおねがいします!



【パターン1】

f:id:izit_kosuke:20110216201054j:image:left

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


【パターン2】

パターン2以降、いずれも基本的なHTMLソースは下記です。

基本パターンの方は、いずれも画像を使ってないですよ!

      <!--globalNav-->
      <div id="globalNav">
        <ul>
          <li><a href="menu1.html" title="メニュー1">メニュー1</a></li>
          <li><a href="menu2.html" title="メニュー2">メニュー2</a></li>
          <li><a href="menu3.html" title="メニュー3">メニュー3</a></li>
          <li><a href="menu4.html" title="メニュー4">メニュー4</a></li>
          <li><a href="menu5.html" title="メニュー5">メニュー5</a></li>
        </ul>
      </div><!--/globalNav-->

f:id:izit_kosuke:20110216203144j:image

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

たとえばこんなふうに発展できます!

f:id:izit_kosuke:20110217013934j:image

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

02v.zip 直

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

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


【パターン3】

f:id:izit_kosuke:20110217014900j:image

CSSのポイント★

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

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

これも全然簡単ですよ。


<リストメニュー部分(パターン2と違う部分のみ)>

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

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));/* 下端の色 */
}

発展させるとこうなります!

f:id:izit_kosuke:20110217014901j:image

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

03v.zip 直

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

かわいいですよね。




【パターン4】

f:id:izit_kosuke:20110217014902p:image

CSSのポイント★

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

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


<リストメニュー部分(パターン2・3と違う部分のみ)>

  • インナーシャドウ

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

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

発展させるとこうなります!

f:id:izit_kosuke:20110217014903j:image

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

04v.zip 直


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




★登場したCSS3を簡単に解説★

グラデーション

example{
background:-webkit-gradient(
  linear, 
  開始位置, /* 単純に上から下にグラデーションする場合は、left top でよいでしょう*/
  終了位置, /* 単純に上から下にグラデーションする場合は、left bottom でよいでしょう*/
  from(開始色), 
  to(終了色), 
  color-stop(追加位置, 色)); /* 今回は、「追加位置」は0〜100の間で指定しています。0〜1.0の間でも良いみたいです*/
}

角丸

example{
	-webkit-border-top-left-radius: 8px; /*左上を指定*/
	-webkit-border-top-right-radius: 8px; /*右上を指定*/
	-webkit-border-bottom-left-radius: 8px; /*左下を指定*/
	-webkit-border-bottom-right-radius: 8px; /*右下を指定*/
        /*全ての角を同じピクセル数で指定する場合は、
        -webkit-border-radius:8px;
        と指定することができます。*/
}

ボックスサイジング

example{
       -webkit-box-sizing: border-box; /* border-boxでボーダー幅込みでの、ボックスサイズに。
                                                                   content-boxでpadding と border の幅を含まないボックスサイズとなります。
}

今回は、比較的シンプルなリストメニューでしたが、次回はもうすこし複雑なレイアウトのものを作りたいと思ってます。

narunaru 2011/02/19 20:12 細かいところですが、リスト右端の矢印の部分が
リンクとして機能しないのが気になりました。

izit_kosukeizit_kosuke 2011/02/19 22:32 naruさま
ご指摘ありがとうございます!
CSSに一部ミスがありました。修正してアップいたしました。
今後ともよろしくお願いいたします。

narunaru 2011/02/19 23:12 うーん…細かいですがおしいっ!
02vと03vはリストの外(画面の右端)までリンク反応しちゃうから、
a要素に-webkit-box-sizing: border-box;
矢印部分のpadding-right:を10px;に調整した方がいいかもです。

03vの可愛いリストいいですねー。
次の連載記事も楽しみにしてますよん♪
ありがとうございます!

izit_kosukeizit_kosuke 2011/02/19 23:32 たびたびどうもです!
それも気づいてました。フォローどうもです。

izit_kosukeizit_kosuke 2011/02/20 13:30 それどおりでは無いですが、遅ればせながら修正しました。
あざっす!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証