ボタンのグラデーションを表現する
ページ上部のジャンプボタンは、ここまでに解説したテクニックを組み合わせて作ります。CSSは次のようになります。
3つのボタンはCSS3のテクニックを組み合わせて作成する
nav {
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #9cc900;
background: -webkit-gradient(linear, left top, left bottom, from(#c3fb00), to(#9cc900));
font-size: 107%;
width: 300px;
}
nav li {
text-align: center;
float: left;
font-weight: bold;
border-left: 1px solid #fff;
text-shadow: -1px -1px 0 rgba(150, 150, 150, 30);
}
nav li:first-child {
border: none;
}
ボタンはリスト要素でマークアップし、floatで回りこませて横に並べています。-webkit-border-radiusでボックスを角丸にする方法はすでに解説したとおりです。
このボタンの背景色は、上から下に向かってグラデーションしています。このとき利用するのが、WebKit先行実装プロパティの-webkit-gradientです。次のような構文になっています。
-webkit-gradient(グラデーションの方向, 開始位置, 終了位置, 開始色, 終了色)
値は以下のように設定します。
- グラデーションの方向
- linear（線形）またはradial（円形）で指定します。linearとradialでは後に指定できる値が変わってくるので、ここでは「linear」の場合のみを紹介します。
- 開始位置, 終了位置
- グラデーションの開始位置と終了位置を、「top」「bottom」「left」「right」の組み合わせで指定します。今回は「left top, left bottom」つまり「左上から左下」と指定しています。
- 開始色, 終了色
- グラデーションの開始色と終了色を指定します。
これでグラデーションを表現できます。なお、グラデーションを指定したbackgroundプロパティとは別にbackground-colorプロパティも指定しています。これは、WebKit系以外のブラウザーのための指定です。ボタンの文字色は背景と同じ白なので、背景色を指定しないとWebKit以外の環境で閲覧したときに文字が読めません。iPhone/Android専用サイトという位置づけとはいえ、それ以外の環境からアクセスされた場合でも、最低限、文字が読めない状態を避けるために、背景に濃色（ここではグラデーションの終了色と同じ色）を敷いています。
ドロップシャドウでエンボスを表現する
ジャンプボタンでは、もう1つ変わったテクニックが使われています。よく見ると文字が彫り込まれたような、いわゆる「エンボス」効果がかけられています。と言ってもCSS3にはエンボスを直接表現できるプロパティはありませんので、ここではドロップシャドウを応用してエンボス風の見た目を表現しています。
text-shadow: -1px -1px 0 rgba(150, 150, 150, 0.3);
ポイントは、位置を表す値の「-1ピクセル」という指定。これによって影を「左上」に表示し、彫り込まれたように見せているわけです。
色の指定も少し変わっています。アルファ値（透明度）を表現できる「rgba」という方法で記述しています。rgbaは以下のように4番目の値に透明度（0〜1の間の値、0が透明・1が不透明）を指定します。
text-shadow: -1px -1px 0 rgba(150, 150, 150, 0.3);
デザイン時に透明度を使っている場合はPhotoshopで調べて、rgbaで正確に設定しましょう。
仕上げる
最後に、残っていた「PAGE TOP」ボタンに次のようなCSSを適用してページを仕上げます。PAGEトップボタンはここまでに紹介したテクニックで装飾しています。
#btnTop {
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#cbcccf), to(#acaeb0)) #cbcccf;
width: 7em;
font-size: 85%;
text-align: center;
float: right;
margin-right: 10px;
}
#btnTop a {
text-shadow: 1px 1px 0 #ddd;
display: block;
padding: 5px 0;
color: #444444;
text-decoration: none;
}
以上で、スマートフォンサイトの基本的な見た目がほぼ完成しました。この続きは次回、制作していきましょう。
- 今回作成したサンプルファイル
- ダウンロードする(ZIP)
見た目はほぼ完成した「プレイグループ木場校」のスマートフォンサイト
お詫びと訂正：記事掲載当初、-webkit-gradientに関する説明に誤りがありました。また、border-radiusに関する説明に不十分な点がありました。Twitterでご指摘をいただいた皆様、ありがとうございました。現在の記事は修正済みです。（2010年9月22日更新）
著者：たにぐちまこと
東京世田谷でWeb制作を営む、H2O Space. 代表。PHPを中心としたWebシステムの開発などを主に手がける。 Adobe Dreamweaverで、iPhoneサイトを制作しやすくする拡張機能「iPhone site extension」を配布し、スマートフォンのサイト制作にも積極的に取り組んでいる。主な著書に「Dreamweaver PHPスターティングガイド」（毎日コミュニケーションズ）、「ホームページ担当者が知らないと困るHTMLの仕組みとWeb技術の常識」（ソシム）など。
