ブログ引越しました。

こちらになります。
http://blog.kaleido-jp.net/
はてな好きなんだけどなー。
どうしてもデザイン凝り出すと限界があるので、引越しました。

スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法

今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;)

たとえば、Yahooさんとかがやっているんですが、
「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。
Yahoo! JAPAN （スマートフォンサイト）

（Yahooさんの手法とは違うかもしれませんが）
その方法を紹介します。

僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。

そもそも、iOSのSafariやAndroidの「ブラウザ」は、
ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、
URLバーが引っ込む仕様のようです。
（あくまで推測。ページ内リンクなどで、そうなるのが根拠です。）

まぁ、これのなにがいいのかというと、
ページの表示範囲を少し広く見せられる。
ってところでしょうか。

やり方は簡単です。
JavaScriptでWindowオブジェクトの読み込み完了時に、
1ピクセルのスクロールをしてあげます。

jQueryで記述すると

  $(window).bind('load',function(){ //←windowオブジェクトにloadイベントをバインド
    setTimeout(function(){
	window.scrollTo(0,1);　//←windowオブジェクトを1ピクセルスクロール
　},1);
  });

setTimeoutについては、リロード時など読み込みが早すぎて動作が追いつかない場合があるため
やや遅らせるという処理をおこなっています。

記述は違えど、こういう手法が一般的のようです。

逆に他に良い方法があれば、教えていただければです！

動作デモ
（iPhone・Androidで見てください。iPhone 3GS/IS03で確認済み）

※ページ内容によっては、setTimeoutの遅延をもう少し大きくしてあげるといいかもです。
※前回のエントリーで「URLバーを隠す行為」とコメントがありましたが、今回についても隠すことを推奨しているわけではありません。

スマホサイト：Webアプリモードで意外と書かれていない落とし穴

ちょっと今回はまめ知識的な内容です。
最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。
（jQuery Mobileなどを利用した開発方法は置いといて）
HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。

とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。

<meta name="apple-mobile-web-app-capable" content="yes" />

これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。
これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。

ただ、これって意外な落とし穴があるんです(￣▽￣;)

今回は、僕が知ってる大きな２つの注意点を挙げます。

★基本的にリンクは全てJavaScript化、もしくはページ内リンク（#使ったやつ）にする必要がある。
★「戻る」ボタン的な用意がほぼ必須になる。

なぜかというと、ふつうのリンク記述だとせっかく設定したWebアプリモードから抜けて、
Safariに飛ばされてしまうのです

では、前回の記事のサンプルソースを使って、検証してみたいと思います。

前回使ったサンプルソースですが、ページとしてはこんな感じです。

このサンプルに例のmetaタグとアイコンを設定して、Webアプリ風にしてみます。

<!--Webアプリモード（フルスクリーンモード）-->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<!--ホームアイコンの設定-->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

（サンプルをサーバにアップしてみましたので、iPhoneお持ちの方はぜひお試しを）
サンプル（外部サイトです）

アクセスしたら、「ホーム画面に追加」をおこないます。
※下の画像は英語ですが、日本語環境の場合は「ホーム画面に追加」と出ているので、それを選んでください。

そうするとこういう画面になります。

右上の「追加」ボタンを押して、追加するとホーム画面にアイコンが追加されます。

そして、このアイコンを押してサイトにアクセス、というかWebアプリを起動します。
すると…

URLバーなどが無くなり、ネイティブアプリっぽくなりました！

ちなみに、ここでメニュー部分のHTMLソースがどうなっているか見てみましょう。
（※spanが多く入って、あまりかっこはよくないですが…）

      <!--globalNav-->
      <div id="globalNav" class="clearfix">
        <ul>
          <li><a href="second.html" title="iMac"><span><img src="images/icon1.png" width="48" height="48" /></span><span>iMac</span></a></li>
          <li><a href="second.html" title="MacBook Pro"><span><img src="images/icon2.png" width="48" height="48" /></span><span>MacBook Pro</span></a></li>
          <li><a href="second.html" title="iPhone"><span><img src="images/icon3.png" width="48" height="48" /></span><span>iPhone</span></a></li>
          <li><a href="second.html" title="Search"><span><img src="images/icon4.png" width="48" height="48" /></span><span>Search</span></a></li>
          <li><a href="second.html" title="RSS"><span><img src="images/icon5.png" width="48" height="48" /></span><span>RSS</span></a></li>
        </ul>
      </div><!--/globalNav-->

なんの変哲もないソースです。
全てリンク先はsecond.htmlに飛ぶようにしてます。
なので、当然Webアプリのリンクを押すと、画面が遷移すると思いますよね。

ところが、メニューを押してみると…

なんとSafariに飛ばされてしまったぁ。。。

こ、これではWebアプリにした意味があんまり無い。。。

これは、はっきりと仕様確認したわけじゃないのですが、
#〜なページ内リンク以外は、アプリの外とみなす仕様になっているんだと思います。

で、こんなときどうするかというと、
僕が知ってる手っとり早い方法は、リンクはJavaScriptのonClickイベントで処理することです。
わざわざページ内リンクにして、どうにか他のページに遷移する仕組みを作るのはけっこう大変です。
単純に画面遷移をおこないたいなら、これで事足りると思います。

記述がすっきりなjQuery使います。

jQuery読込み

<!--だいぶすっきりしてますが、一応HTML5記述で-->
<script src="js/jquery-1.5.min.js"></script>

下記のようなスクリプトを記述します。
（ページにスクリプトを直に書くのは好きじゃありませんが…今回はとりあえず直に）

  $(function(){
   //ページ内のaタグ群を取得。aTagsに配列として代入。
    var aTags = $('a'); 
       //全てのaタグについて処理
	aTags.each(function(){
          //aタグのhref属性からリンク先url取得
	  var url = $(this).attr('href');
　　　//念のため、href属性は削除
	  $(this).removeAttr('href');
          //クリックイベントをバインド
	  $(this).click(function(){
	    location.href = url;
	  });
    });
  });

そうすると、Safariに飛ばず画面遷移するようになりました。

しかし…お気づきかと思いますが、ブラウザの各バーを消しているので、
戻ることができません。

そこで、２ページ目に「戻る」ボタンを付けます。
jQuery使うまでもありません。

    <div id="backButton"><a href="javascript:history.back();">←戻る</a></div>

戻れるようになりました。
リンク飛べるようになった方は、こちらです。
サンプル2（外部サイトです）

徹底解説HTML5APIガイドブック ビジュアル系API編

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

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

※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。
（あまりいらっしゃらないとは思いますが…）もしそれ以前にDLされた方は、現在修正版をお使いください。
ご報告いただいたnaruさん、ありがとうございました。
（ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください）

smart_sample02.zip

02.zip

02v.zip

03.zip

03v.zip

04.zip

04v.zip

スマホサイトのリスト型メニューを何パターンか作ってみた
仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。

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

今後のスマホサイト対応の波に速攻対応できるように
今のうちに、リスト型メニューをいくつかのパターンで作っておくことにしました。

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

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

なぜなら、3G回線などでは通信速度が遅いため、ページ全体のデータ量を軽くする必要があるのです。
となると、極力画像使用を抑えることになるのですが、やっぱり見た目にきれいなページにしたいですよね。
そこでCSS3が活躍してくれるのです。

ポイントとなるCSSを載せておきます。
参考になる部分はご活用いただいて、ここはこうしたほうがいいんじゃ？って部分はツッコミおねがいします！

【パターン１】

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

---

【パターン２】
パターン２以降、いずれも基本的な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-->

★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

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

---

★登場した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 の幅を含まないボックスサイズとなります。
}

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

PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ）

PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、
一旦ここまでのCSSテクについてまとめます。

■第1回　メニュー編
■記事はこちら　

★タグでViewportの設定。メディアクエリによるCSS振り分け。

スマホサイトを作る上で欠かせない準備。

…
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--viewportの指定-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--/viewportの指定-->
<!--メディアクエリでPC用・スマホ用CSSを振り分け-->
<link media="only screen and (min-device-width:481px)" href="css/main.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width:480px)" href="css/imain.css" type="text/css" rel="stylesheet" />
<!--/メディアクエリでPC用・スマホ用CSSを振り分け-->

<link href="css/main.css" type="text/css" rel="stylesheet" />
…

★#containerブロックのリキッド化。overflow:hidden化。

ページの横幅より内部要素がハミ出して、無駄な横スクロールが発生するのを防ぐ。
iPhoneではかなり有効。Androidでは内部要素の横幅が親要素より上回らないように気をつける。

…
#container{
	margin:0 auto;
	/*スマホ向け*/
	width:100%;
	overflow:hidden;
	/*/スマホ向け*/
}
…

★グローバルメニューの縦並び化＆リキッド化。

PCサイトで横並び（float:left; width:固定）となっているのを、
float:none;　width:100%　とすることで実現。

…
#globalNav li{
	margin:0;
	/*スマホ向け*/
    　float:none;
	clear:both;
	width:100%;
	text-align:left;
	padding:10px 0 10px 20px;
	/*/スマホ向け*/
	border:1px #999 solid;
	background-color:#CCC;
    display:block;
}
…

■第２回 HTMLとCSSで画像を操る編（前編）
■記事はこちら

1．要素の取捨選択
要らない要素はdisplay:none;

    <!--header-->
      <div id="header">
        <div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>　<!-- ←これがいらなそう。-->
      </div><!--/header-->

#headerMain{
	display:none;
}

2．HTMLとCSSだけで画像を振り分ける
HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none;

    <!--header-->
      <div id="header">
        <div id="logo">
        <h1>
          <a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" /><!--PC時のロゴ　class=logo_pcを指定-->
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" /><!--スマートフォン時のロゴ　class=logo_iを指定-->
            </a>
          </h1>
        </div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
      </div><!--/header-->

main.css（PC用CSS）→　.logo_i　を display:none;
imain.css（スマホ用CSS）　→　.logo_pc　をdisplay:none;

main.cssに追記

/*↓PCでは不可視にする↓*/
.logo_i{
	display:none;
}
/*↑PCでは不可視にする↑*/

imain.cssに追記

/*↓スマホでは不可視にする↓*/
.logo_pc{
	display:none;
}
/*↑スマホでは不可視にする↑*/

■第２回 HTMLとCSSで画像を操る編（後編）
■記事はこちら

3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ
画像の代わりにCSS3グラデーションを使う。疑似要素beforeとafterを活用する。
※この記事はぜひとも本文を読んでほしいです（笑）

まず、メニューの要素構成のイメージです。
イメージのように、CSSの疑似要素を活用することでHTMLを書き換えずに、
デザインを構成することができます。

グラデーション

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

擬似要素でメニュー内容を表示。

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

擬似要素で「>」を表示。

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

まとめだけでも随分長くなってしまった。。。
ソース書かなきゃいいのかな。

追記：連載のタイトル変えました。この連載の主旨って、「PCサイトをスマホ対応する」っていうことだな〜と気づきました（笑）

IPHONEアプリ×WEBサイト開発入門

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

【目次】
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属性を追加しておきます。

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

これでできあがりです！

横向きもオッケー。

IPHONEアプリ×WEBサイト開発入門

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

【目次】
1.メニュー編
2.HTMLとCSSで画像を操る編（前編）
2.HTMLとCSSで画像を操る編（後編）

さて、前回はCSSでスマホ向けにする超基本の紹介でした。

が…実際のところ、あんな超シンプルなサイトは無い訳で…
実践となると、もう少し工夫が必要になってくると思います。

そこで、今回はサンプルをもう少し現実的な形にして、
スマホ化してみたいと思います。

今回のサンプルファイルです。
smart_sample02.zip

＜今回のポイント＞
1．要素の取捨選択
　→　要らない要素はdisplay:none;
2．HTMLとCSSだけで画像を振り分ける
　→　HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none;
3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ

今回のサンプルとなるサイトはこんな感じです。
前回よりも、ヘッダー部とメニュー部に画像を使って、もう少し現実的なサイトに近づけてみました。
前回スマホ対応したCSSの設定は引き継いでいます。

そして、HTMLソースはこうです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--viewportの指定-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--/viewportの指定-->
<!--メディアクエリでPC用・スマホ用CSSを振り分け-->
<link media="only screen and (min-device-width:481px)" href="css/main.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width:480px)" href="css/imain.css" type="text/css" rel="stylesheet" />
<!--/メディアクエリでPC用・スマホ用CSSを振り分け-->
<title>PC⇔スマホサイトを作ろう！</title>
</head>

<body>
  <!--container-->
  <div id="container">
    <!--header-->
      <div id="header">
        <div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
      </div><!--/header-->
      <!--globalNav-->
      <div id="globalNav" class="clearfix">
        <ul>
          <li><a href="menu1.html"><img src="images/menu1.jpg" alt="メニュー1" /></a></li>
          <li><a href="menu2.html"><img src="images/menu2.jpg" alt="メニュー2" /></a></li>
          <li><a href="menu3.html"><img src="images/menu3.jpg" alt="メニュー3" /></a></li>
          <li><a href="menu4.html"><img src="images/menu4.jpg" alt="メニュー4" /></a></li>
          <li><a href="menu5.html"><img src="images/menu5.jpg" alt="メニュー5" /></a></li>
        </ul>
      </div><!--/globalNav-->
    
    <!--contents-->
    <div id="contents">コンテンツ</div><!--/contents-->
    <!--footer-->
    <div id="footer">フッター</div><!--/footer-->  
  </div><!--/container-->


</body>
</html>

これをそのまま、iPhoneで表示させてみるとこうなります。

あたりまえですけど、ヘンです。。。

では、これをスマホに最適化していきましょう。

1．要素の取捨選択

まず、ヘッダに画像が２つ使われています。
そのため、２つの画像が無理矢理入ってるふうなので、ここをどう対処するか方針を立てましょう。

下の画像がとくに何も情報が無く、意味が無さそうです。
HTMLソースで言うと、#headerMainの要素です。

    <!--header-->
      <div id="header">
        <div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>　<!-- ←これがいらなそう。-->
      </div><!--/header-->

では、imain.cssに追記して、どうにかしましょう。
これは簡単です。imain.cssの方に、#headerMainをdisplay:noneしてしまえばいいのです。

imain.css

#headerMain{
	display:none;
}

いなくなりました。

2．HTMLとCSSだけで画像を振り分ける
とりあえず、余計な画像はいなくなったものの、ヘッダ画像がサイズが合ってなくてヘンです。。。

では、これをどうにかしていきましょう。

★スマホ向けの画像を作る。
ここでは、iPhoneを基準とし、横幅480pxの画像を作成します。480pxというのは、横向きになった際の幅です。
基本的に横向きになった場合より、縦向きの画像サイズが大きく表示させることは無いと思うので、横向き時のサイズを基準とします。
作った画像は、こんな感じです。

logo_i.jpg

★HTMLソースの変更
少々荒技ですが、ソースにPC用・スマホ用の両方の画像を記述します。
そして、各々に別名のCSSクラス指定をします。

    <!--header-->
      <div id="header">
        <div id="logo">
        <h1>
          <a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" /><!--PC時のロゴ　class=logo_pcを指定-->
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" /><!--スマートフォン時のロゴ　class=logo_iを指定-->
            </a>
          </h1>
        </div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
      </div><!--/header-->

★CSSの追加・変更

さきほどの取捨選択の方法を、PC側のCSSでも用います。
要するに、

main.css（PC用CSS）→　.logo_i　を display:none;
imain.css（スマホ用CSS）　→　.logo_pc　をdisplay:none;

main.cssに追記

/*↓PCでは不可視にする↓*/
.logo_i{
	display:none;
}
/*↑PCでは不可視にする↑*/

imain.cssに追記

/*↓スマホでは不可視にする↓*/
.logo_pc{
	display:none;
}
/*↑スマホでは不可視にする↑*/

さらに、スマホ用はこの画像をリキッド表示するために下記を追記します。
imain.cssに追記

/*ロゴ画像のリキッド表示*/
.logo_i{
	display:block;
	width:100%;
	height:auto;
}

すると、こうなります。

ヘッダできあがり。

3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ
ヘッダはできあがりましたが、まだメニューの画像がヘンです。

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

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

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

と、続きを書いてたんですが、ずいぶん長いエントリになったので、
ちょっと分けます。。。

続きは近日中に！

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

★おまけ★
書いておいてなんですが、個人的にはこのヘッダ画像振り分けの方法はあまり好きでは無いです（笑）
やはり、サーバサイドのプログラムが使える環境なら、そちらで表示切替えをおこなうべきでしょう。
それがダメなら、JavaScriptとか。（JSについては、別の機会に書きたいと思ってます）
HTML文書の意味がおかしくなってしまう記述はあまりよくないです。。。
とりあえず手っ取りばやくフロントエンドで対応したい、いろんな事情があってやむを得ず…とかそんな人向けです。
まぁ、ひとつの手段としては、ありだと思ってます。

IPHONEアプリ×WEBサイト開発入門