宝島チャンネル

宝島社さんの公式サイトである「宝島チャンネル」のサイトトップのローテーションバナー（右上のやつ）を改修させていただきました。毎度ご依頼ありがとうございます。

以下、改修内容。



元々Flashで作られていたものを、JSとCSS3で改修してます。

・動きはほぼ従来のFlashバージョンと同様
・左から右にアニメーションしてる白いカーソルみたいのは、CSS3で再現。
　ただし、Chrome、Safari、Firefoxなどの対応で、IEだとここは省略されます。
　いわゆるプログレッシブエンハンスメントってやつです。
・Flashバージョンの更新性があまり良くなかったので、外部のxmlで更新をおこなう仕様に変更しました。

という感じで、現在はアプリ事業に注力してるのですが、
こういったFlash→JS化は好きなので、ご依頼を受けることにしてます。
お仕事ございましたらぜひ。

「宝島チャンネル」

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

画像を使わずにCSS3だけで尖ったボタン

CSS3 Wizardry -Back and Next Buttons Revisited-
CSS3 Wizardry -Subpixel Rendering-

Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。

ポイントとなるHTML

ボタンを構成する要素はこれだけ。
[html]
<!–ボタン要素–>
<div class="button bordered back">
<span class="label">Back</span>
</div>
<!–//ボタン要素–>
[/html]

ポイントとなるCSS

その疑似要素をtransformで45度回転、mask-imageでつなぎ目を滑らかにしてるみたいですね。
なるほど…その発想はなかったです。発想って大事だなーと再認識しました（笑）
[css]
.button.bordered.back:before {
　…略…
-webkit-transform: rotate(45deg);
-webkit-mask-image:
-webkit-gradient(linear, left bottom, right top,
from(#000000),
color-stop(0.5,#000000),
color-stop(0.5, transparent),
to(transparent));
position: absolute;
left: -9px;
top: 2.5px;
-webkit-background-clip: content;
}
[/css]

スマートフォンサイトはWiFi接続時はそうでもないのですが、3G回線の時は通信速度が落ちるので画像を用いずCSS3でUIを作るというのは、とても有効な手段です。

応用すれば、いろんなデザインができそうですね。

デモ

【2011.5.14 追記】Androidで確認したところ、形的に尖るのですが、マスクがたぶん効かない状態になってしまうようです。Androidはひと工夫が必要ですね。
【2011.5.15 追記】ちなみに対象となるブラウザはwebkit系ブラウザです。（Safari、Chrome、Mobile Safari）※Androidは工夫が必要と思われる。

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。

viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに

1. 良いと思われる例（リキッドスタイル）

・viewport：width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0
・コンテナ幅 width:100% 　

念のため、上記のviewportの記述の簡単に説明をしておくと、width=device-width：横幅はデバイスの幅、initial-scale=1.0：初期の拡大縮小サイズ、minimum-scale=1.0,maximum-scale=1.0：最小・最大の拡大縮小サイズ、user-scalable=0：ユーザーが拡大縮小できるか否か（0またはnoで不可）

※ポイントをviewportとコンテナに絞るため、画像が引き伸されてるのは一旦スルー。別途エントリ予定。
　

viewport：width=device-width
コンテナ：100%（iPhone 縦）

viewport：width=device-width
コンテナ：100%（iPhone 横）

iPhone：ご覧のように、縦でも横でも違和感無く表示されています。

viewport：width=device-width
コンテナ：100%（Android 640×960 縦）

viewport：width=device-width
コンテナ：100%（Android 640×960 横）

Android：iPhone同様に、縦でも横でも違和感無く表示されています。画面解像度は640×960にしています。実機（IS03）でも同様でした。

2. ときどき見かける例（iPhone3GSまでの時代なら、そこそこ問題なかった固定スタイル）

・viewport=320px （幅指定以外はなし）
・コンテナ幅 width:320px

※ポイントをviewportとコンテナに絞るため、画像が引き伸されてるのは一旦スルー。別途エントリ予定。

viewport：width=320px 他の指定無し｜コンテナ幅320px（iPhone横向き）

viewport：width=320px 他の指定無し｜コンテナ幅100%（Android WVGA）

iPhone：とりあえずレイアウトは保たれているが、320px→480pxに無理矢理引き伸しているので、表示範囲も狭く、3G・3GSでさえ画像が引き伸されてしまう。

Android：左右に余白ができてしまう。個人的にはとても不自然に感じます。

1のデメリット

という感じで、個人的には１のリキッドスタイルがオススメなのですが、デメリットもあります。
ぱっと思い当たるケースで言うと、

・絶対配置レイアウトをしたい場合
・CSS3やJSでアニメーションなどしたい場合

全体がリキッドなため、変動的なピクセル指定が難しくなります。
たとえば、「要素を横幅いっぱい分アニメーションで動かしたい」といったときに、端末の向きによって横幅は変わります。端末の機種でも横幅が変わるかもしれません。
縦のときは320px動かす、横のときは480px動かすといったような処理が必要になってきます。

２のレイアウトスタイルであれば、横幅は縦でも横でも320pxですから、いつでも320px動かせばいいんです。

UIに命をかけたようなサイトであれば、いいと思うのですが、個人的には基本的なレイアウトの方が重要かなーと思っています。

また、dpiとかいろいろ細かい設定もできるのですが、その辺は設定せずにサイトのレイアウトや構成で補った方がよいというのが、個人的な見解です。
次はこの辺か画像について書きたいと思ってます。

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。

このサイトのPCビュー

同時に、基本的なスマホ最適化もおこなっています。

ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。

ちなみに、このサイト自体はまだまだ作りかけでして…
そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑）
（IE系ではちゃんと表示されません…そのうち手入れします。すみません）

どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。

では、以下にスマホ最適化でおこなったことをまとめてみました。
（ちなみに対象としているスマートフォンはiOSデバイス（iPhone, iPod Touch）、Androidです）

1.PCとスマートフォンの振分け

基本は、CSSとJavaScriptのみでレイアウト変更しています。

PHPではUA判定してスマートフォン用のCSSとJSを読み込む数行を加えた程度で、WordPressのテーマのスイッチなどはおこなっていません。

[html]
<link rel="stylesheet" href="http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/css/iLayout.css">
<link rel="stylesheet" href="http://blog.kaleido-jp.net/wp-content/themes/station2/css/istyle.css" />
…
<script type=’text/javascript’ src=’http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/js/iLayout_ui.js?ver=0.1.0′></script>
[/html]

スマートフォンビュー

HTMLソース的には、上記の3行を変えただけでスマートフォン最適化を実現しています。

場合によっては、WordPressのスマホ用テーマを作って、スイッチしてもいいと思うのですが、今回はその方法は見送りました。

なぜかというと、別のテーマを作るということは、サイトの構成を変えたくなったとき
基本的に2つのテーマを管理・更新しなくてはいけなくなるなーと。

CSSとJSによるレイアウト変更であれば、基本的にPCサイトの要素はそのまま引き継げるので、要素の取捨選択や変更することに集中でき、変更するファイルがCSSとJSのみとなり効率が良いからです。

PHPテンプレートを変更する必要がなくなります。

もちろん、サイトを管理する人が複数いるとか、運用体制に余裕がある場合は、テーマ切替による最適化でもよいと思います。

また、iPhone3GS全盛時代までは、CSSのメディアクエリで振り分けることもできたのですが、今現在横幅が480px以上のAndroid端末がだいぶ多いので、サーバ言語かJSなどでUA判定して振り分けるようにしましょう。

2.viewportの設定

3.ホーム画面アイコン（iPhone）、ショートカットアイコンの設定（Android）

[html]
<link rel="apple-touch-icon" href="http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/Images/WebClipIcon.png">
[/html]

ホーム画面アイコンの設定

（アイコンがダサいですがスルーで…）

この記述をおこなうことで、iPhoneならホーム画面に追加する際のアイコン、Androidならショートカットアイコンを設定できます。
（iPhoneは用意した画像に、自動的に磨き処理がかかって、いい感じになります）

余談ですが、「スマートフォン対応しました！」とアピールしているものの、この設定がされてないサイトをたまに見かけます。なんだか、アピールしているだけに惜しい感じが出てしまうので出来るだけ設定しておいた方が良さそうです（笑）

4.横向き時のテキスト拡大の無効化

スマートフォン時のCSSには次の記述をしています。
[css]
body {
…
-webkit-text-size-adjust: none;
…
}
[/css]

デフォルトのまま

拡大表示無効

これを行うことで、横向きしたときのテキストの自動拡大表示を無効にします。最近は拡大をしないのが一般的のようです。拡大表示されちゃうとなんだか不自然な印象を受けます。

比較していただければわかるように、情報量が全く違います。

5.リキッドレイアウト

このサイトはスマートフォン時には、コンテナ要素をwidth:100%としており、内部要素も必要に応じて横向きにした際に横幅が広がるレイアウトを組んでいます。

悪い例：横幅固定にした場合の横向きビューのイメージ

たまに横幅320pxなどとしたサイトを見かけます。別にそれがいけないというわけではないですが、問題はAndroidで閲覧した時です。iPhoneはレイアウトの組み方によっては、横向きにしたときに自動的にフィットしてくれますが、Androidでは純粋にその固定幅で表示されるため、以下のようなイメージになります。

左右に無駄な余白ができてしまい、なんだか不自然な感じになってしまいます。

6.スマートフォンならではのユーザーインターフェースの実装

フリックできるスライドの実装

サイトトップのバナーは、ユーザーがフリック操作が出来るようにしています。
トランジションはCSS3、UIの構築にはjQueryを使って自前プラグイン化してます。

今後いろんなサイトで使い回せるように、実装は下記の1行で済むようなプラグインを作っています。
[javascript]
$(‘#mainImageArea>#mainImages ul li’).flickSlide({target:’#mainImageArea’, duration:5000});
[/javascript]

スマートフォンビュー

このUIはけっこう手の込んだことをしています。

スマホサイトは横向き時というのを、念頭においてリキッドレイアウトという大前提で組む必要がありますが、絶対配置（position:absolute）などの要素を使うことになると、かなりハードルが高くなります。今までのPCサイトでのCSSレイアウト術より高度なスキルと発想が求められるのでは〜？と思っています。

後日のエントリでプラグインの説明と配布をおこなうつもりです。

ちなみに、このUIはAndroidでたまーにバグることがあります。どうやらYahooさんのサイトなどを見ると、iPhoneではフリックが有効になっているのに、Androidではフリック無効となっているので、まだまだAndroid向けサイトではフリックの実装はおこなわない方がよいのかも知れません。

LightBox風の画像表示の実装

こちらも自前で作成しています。

LightBox風のUI

PC時はColorBoxという海外の方のプラグインを使用させてもらってるのですが、それをスマートフォン時でも同様に使うと想定どおりにおかしな表示になりました（笑）

なので、こちらのUIも独自にjQueryで作成しました。PCのように凝ったUIにするとだいぶ重くなってしまうので、とりあえずシンプルにしています。

7.手付かずな部分…

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

SVG女子

IE9をはじめ、ChromeやSafari、Firefox（4）あたりで見れると思います。非Flashなのです。
これ見てると、いよいよ本格的なHTML5時代が到来してきたなーと思わずにいられません。

原理はコマ撮りやパラパラアニメーションみたいなので、
Flashのモーショントゥイーンより考え方はシンプルかも。

こういうの作りたいなー。他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

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

たとえば、Yahooさんとかがやっているんですが、

「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。

Yahoo! JAPAN （スマートフォンサイト）

（Yahooさんの手法とは違うかもしれませんが）

その方法を紹介します。

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

そもそも、iOSのSafariやAndroidの「ブラウザ」は、

ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、

URLバーが引っ込む仕様のようです。

（あくまで推測。ページ内リンクなどで、そうなるのが根拠です。）

まぁ、これのなにがいいのかというと、

ページの表示範囲を少し広く見せられる。

ってところでしょうか。

やり方は簡単です。

JavaScriptでWindowオブジェクトの読み込み完了時に、

1ピクセルのスクロールをしてあげます。

jQueryで記述すると

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

setTimeoutについては、リロード時など読み込みが早すぎて動作が追いつかない場合があるため

やや遅らせるという処理をおこなっています。

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

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

動作デモ

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

※ページ内容によっては、setTimeoutの遅延をもう少し大きくしてあげるといいかもです。

※前回のエントリーで「URLバーを隠す行為」とコメントがありましたが、今回についても隠すことを推奨しているわけではありません。

【2011.5.6　追記】ツイッター上などで、やはり「隠す行為」とおっしゃっている方がいますが、そもそもスクロールしたら引っ込みますよ。Mobile SafariやAndroid標準ブラウザはそういう仕様ですので。よくブラウザ見てみましょう。それが嫌ならURLバーが固定で表示されるブラウザに変えましょう。

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

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

smart_sample02.zip

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*＜サイトの背景部分＞*/
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;
}

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

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

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

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

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

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

一旦ここまでのCSSテクについてまとめます。

…
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<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" />
<link href="css/main.css" type="text/css" rel="stylesheet" />
…

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

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

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

#headerMain{
display:none;
}

<div id="header">
<div id="logo">
<h1>
<a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" />
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" />
            </a>
</h1>
</div>
<div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
</div>

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

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

#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サイト開発入門 Objective-C/iPhoneSDK、 HTML/CSS/JavaScriptによる最適プログラミング

• 作者: クリストファー・アレン,株式会社FEYNMAN 正健太朗
• 出版社/メーカー: 日経BP社
• 発売日: 2010/04/15
• メディア: 単行本（ソフトカバー）
• クリック: 76回
• この商品を含むブログ (4件) を見る

他の人気エントリ

• Unityが使える方を探しています
• デザイナーさん・イラストレーターさんを募集しています
• Flash終了でアプリは消えないと思うよ？
• ノルウェー絵本「KUBBE（キュッパ）」映像化の音楽を作りました
• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン