スマートフォンサイト制作時に覚えておきたいCSS 15

画像を極力使わずCSSで対応する

スマートフォンサイトだけに限ったことではありませんが、スマートフォンサイトを制作する際に特に気を使うもののひとつが表示速度だと思います。
LTEやWi-Fiの普及によって、スマートフォンが出始めたばかりの頃に比べればかなりストレスなく閲覧できるようにはなってはいるものの、やはり全ての人がそれらを使用して閲覧しているとは限りませんし、高速回線を使用していても表示がかなり重いサイトもあるので、少しでもサイトを軽量化して高速化させる必要があります。

ファイル圧縮・画像の最適化・CSS Spriteなどサイトを軽量化させる方法は数多くありますが、それら以上に積極的に取り入れたい・簡単に取り入れられるのが実現できるものは全てCSSを使うことです。

PCサイトを制作する際は対応ブラウザ（主にIE）の問題でCSS3を使用できないことが多いですが、それに比べてスマートフォンサイトは基本的に自由に使用できるので、今までわざわざ画像を使用して対応していた角丸・グラデーション・シャドウといったこともCSSだけで実装することができます。

CSSだけでできると言われても実際にどんな感じのものができるのかピンとこないという方も中にはいると思うので、簡単にですがCSSのみを使用してサンプルを幾つか作ってみました。

見出しデザイン - シャドウ

擬似要素とbox-shadowを使って、見出し部分がめくれているような見栄えにしたものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<h1>Lorem ipsum</h1>

h1 {
  position: relative;
  margin: 0;
  padding: 10px 0;
  background-color: #e56183;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
}
h1::before,
h1::after {
  position: absolute;
  bottom: 6px;
  z-index: -1;
  content: '';
  width: 30%;
  height: 50%;
  box-shadow: 0 10px 15px rgba(0,0,0,.3);
}
h1::before {
  left: 4px;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
h1::after {
  right: 4px;
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}

見出しデザイン - グラデーション

背景画像を使って実装することが多いこのようなストライプ背景もグラデーションを使うことでCSSのみで実装することができ、カラー変更はもちろん、ストライプの幅や角度の調整も容易にできます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<h1>Lorem ipsum</h1>

h1 {
  margin: 0;
  padding: 10px 15px;
  background-color: #e56183;
  background-image: -webkit-linear-gradient(-45deg, #de3d66 25%, transparent 25%, transparent 50%, #de3d66 50%, #de3d66 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, #de3d66 25%, transparent 25%, transparent 50%, #de3d66 50%, #de3d66 75%, transparent 75%, transparent);
  background-size: 12px 12px;
  text-shadow:1px 1px 2px rgba(0,0,0,.3);
}

ボタンデザイン

実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a href="#">Button</a>

a {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: #f56778;
  background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
  background-image: linear-gradient(to bottom, #f997b0, #f56778);
  box-shadow: inset 1px 1px 0 #fbc1d0;
  border-bottom: 4px solid #cb5462;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 0px #f56778;
  line-height: 50px;
  outline: none;
}
a::before,
a::after {
  position: absolute;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  display: block;
  content: '';
  width: 200px;
  height: 50px;
  border: 1px solid #ee8090;
  border-bottom: 1px solid #b84d5a;
  border-radius: 4px;
}
a::before {
  height: 48px;
  bottom: -4px;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 1px 0px #bfbfbf;
}

画像を使用しているとちょっとした変更でもスライスし直したりすることになってしまいますが、大きさ・カラー・文言といった変更もHTMLやCSSをいじるだけで容易にできます。
CSSで作成するボタンデザインは以前にも少しだけ紹介しているので、興味ある方はこちらもご覧ください。

矢印アイコン #1

実装にはHTMLとCSSをそれぞれ下記のように記述します。

<ul>
  <li><a href="#">List 01</a></li>
  <li><a href="#">List 02</a></li>
  <li><a href="#">List 03</a></li>
  <li><a href="#">List 04</a></li>
  <li><a href="#">List 05</a></li>
</ul>

ul li a {
  position: relative;
  display: block;
  padding: 10px 25px 10px 10px;
  border-bottom: 1px solid #ccc;
}
ul li a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 1px solid #888;
  border-right: 1px solid #888;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

矢印アイコンは擬似要素を使用して作成しており、見たままですがborder-topとborder-rightで表示させたものをtransformを使って回転させることで矢印のように見せています。
もう少し大きくしたいときはwidth, height, margin-topの値を、色や太さを変えたいときはそれぞれborderの値を変更するといったように、ちょっとした変更もCSSなので簡単にできます。
最近は同じく大きさや色の変更が容易などの理由でアイコンフォントを使うというのも増えていますが、この方法ならCSSのみで手っ取り早くできます。

矢印アイコン #2

実装にはHTMLとCSSをそれぞれ下記のように記述します。

<ul>
  <li><a href="#">List 01</a></li>
  <li><a href="#">List 02</a></li>
  <li><a href="#">List 03</a></li>
  <li><a href="#">List 04</a></li>
  <li><a href="#">List 05</a></li>
</ul>

ul li a {
  position: relative;
  display: block;
  padding: 10px 25px 10px 10px;
  border-bottom: 1px solid #ccc;
}
ul li a::before,
ul li a::after {
  position: absolute;
  top: 50%;
  right: 5px;
  display: block;
  content: '';
  width: 12px;
  height: 3px;
  background-color: #888;
  border-radius: 4px;
}
ul li a::before {
  margin-top: -4px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
ul li a::after {
  margin-top: 3px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

先ほど紹介したものは::afterのみを使用しましたが、こちらの方法は::beforeも使用します。
また、先ほどは太さやカラーの指定でborderの値を変更していましたが、こちらはheightやbackground-colorで指定をするようになっており、そこにborder-radiusを指定することで角丸にしています。
あとは同じく表示させたそれぞれの擬似要素をtransformを使って回転させることで矢印のように見せています。

吹き出し

実装にはHTMLとCSSをそれぞれ下記のように記述します。

<!-- Tooltip #1 -->
<p class="tooltip01">Tooltip #1</p>

<!-- Tooltip #2 -->
<p class="tooltip02">Tooltip #2</p>

/* 共通スタイル */
p {
  position: relative;
  display: inline-block;
  padding: 15px 40px;
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: center;
}
p::before,
p::after {
  content: '';
  position: absolute;
}

/* Tooltip #1 */
.tooltip01 {
  border-radius: 6px;
}
.tooltip01::before,
.tooltip01::after {
  left: 50%;
  margin-left: -8px;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.tooltip01::before {
  bottom: -16px;
  border-top: 16px solid #ccc;
}
.tooltip01::after {
  bottom: -14px;
  border-top: 16px solid #fff;
}

/* Tooltip #2 */
.tooltip02 {
  border-radius: 30px;
}
.tooltip02::before,
.tooltip02::after {
  display: block;
  border-radius: 18px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.tooltip02::before {
  bottom: -25px;
  left: 100px;
  width: 18px;
  height: 18px;
}
.tooltip02::after {
  bottom: -35px;
  left: 120px;
  width: 12px;
  height: 12px;
}

Tooltip #1は::before, ::afterそれぞれの擬似要素にborderを指定し、それらをずらして配置することで線で囲まれているように見せたものです。
単純に塗りつぶしの吹き出しを使う場合は、1つの擬似要素だけで実装できます。

Tooltip #2も同じく擬似要素を使用しており、そこにborder-radiusを組み合わせることでマンガとかで見かけるような考えている風の吹き出しを実装できます。

CSSのみでアコーディオン

実装にはHTMLとCSSをそれぞれ下記のように記述します。

<div class="accordion">
  <input id="ac-1" name="accordion" type="checkbox" />
  <label for="ac-1">Accordion 01</label>
  <div>
    <!-- Accordion 01 contents here... -->
  </div>
</div>

.accordion input {
  display: none;
}
.accordion label {
  position: relative;
  display: block;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
.accordion label::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -7px;
  border-top: 1px solid #888;
  border-right: 1px solid #888;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.accordion div {
  position: relative;
  height: 0;
  overflow: hidden;
  box-shadow: 0 1px 7px 0 rgba(0,0,0,0.1) inset;
  transition: height .2s ease-in-out;
}
.accordion input:checked + label::after {
  margin-top: -3px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.accordion input:checked ~ div {
  height: 140px;
  border-bottom: 1px solid #ccc;
}

HTMLは普段フォームで使われるinput type="checkbox"とlabelを使用し、アコーディオンの開閉部分の動きにはCSSの:checkedやtransitionを用いています。
具体的には、まず予めコンテンツがあるdiv要素の高さをheight: 0;に設定しておき、チェックボックスにチェックが入ったらdiv要素の高さを変更するように記述します。
あとは、その高さ変更にtransitionを使ってアニメーションをつけることで、JavaScriptを使用しているようなアニメーション付きのアコーディオンを実装することができます。
また、開閉しているかどうかを明示する矢印アイコンは上で紹介したCSSで実装する矢印アイコンをtransformの値を変更して実装しています。

この方法は以下を参考にしたもので、今回はチェックボックスを用いて複数のコンテンツを開閉できるタイプを紹介しましたが、以下ではラジオボタンを使ってひとつのコンテンツのみが表示されるようなタイプのアコーディオンも紹介されています。

幾つかサンプルを紹介してきましたが、このようにPCではブラウザによってCSSが使えないという理由から画像を使用して実装していたものでも、スマートフォンの場合はほとんど気にすることなくCSSだけで対応することができます。
また、今回はアコーディオンのみを紹介しましたが、他にもタブ切り替えやモーダルなど、普段ならJavaScriptを使用して実装するようなものまでもやろうと思えばCSSだけで実装することができます。

普段ほとんどコーディング等を行わないデザイナーさんやCSSが苦手な方だと画像の方が制作時間も短くて手っ取り早くできるというのはあると思いますが、最近ではPhotoshopのレイヤースタイルなどをそのままCSSで出力してくれるツールやPhotoshopライクなジェネレータなんかも沢山ありますし、カラーや文言修正をすることになった場合もCSSを使って実装していればわざわざ画像をいじってスライスするという手間もなくなるので、慣れると表示速度だけでなく制作時間の短縮にも繋がると思います。

擬似要素や擬似クラスを活用する

最近ではPCでもIEの旧バージョンをサポート対象外にすることが多いので使用する機会が増えていると思いますが、スマートフォンサイトでは便利な擬似要素や擬似クラスを多用することが可能で、上手く活用すれば余計なIDやクラスを使用せずにスタイルを適応することが可能で、マークアップもシンプルにすることができます。

擬似要素

擬似要素は簡単に説明すると要素内にある特定の文字列や行に対してスタイルを適用できるもので、以下のようなものがあります。

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection

上記の中で特に便利で覚えておいて損はないと思うのが::beforeと::afterで、contentと組み合わせたりすることで様々な表現をCSSのみで実装できるようになります。

疑似クラス

疑似クラスは簡単に説明すると特定の外的要因や状態を持つ要素に対してスタイルを適用できるもので、CSSをいじったことがある人なら1度は見たことがあると思う:hoverや:activeといったものも擬似クラスになります。
全部ではありませんがその他だと以下のようなものがあります。

疑似クラスは先述したように特定の外的要因や状態を持つ要素に対してスタイルを適用できるので、活用すればマークアップ時に余計なクラスを記述したりすることをかなり減らすことができ、簡単にですが疑似クラスを使うことで例えば以下のようなことが可能です。

:first-child

要素内にある最初の要素に適用するという疑似クラスになります。
例えば、最初の要素だけmargin-topを使用したくないという理由で、要素にclass="first"などと記述してelement.first { margin-top: 0;}のような記述を見かけますが、これはelement:first-child { margin-top: 0;}という感じでCSSに記述をすればクラスを使用せずに実現できます。

:nth-of-type

兄弟関係の要素を最初から数え、n番目の要素に適用するという疑似クラスになります。
例えば、同じような要素が並んでいて2番目の要素にだけ特定のスタイルを適用させたいという場合はelement:nth-of-type(2) { property: value;}のようにして指定することで実現できます。

:nth-child

要素内で隣接している要素を最初から数え、n番目の要素に適用するという疑似クラスになります。
例えば、テーブルの表を見やすくするために行を交互にカラーリングすることがありますが、それぞれの行にクラスを付けたりjQueryなどを使用しなくてもtr:nth-child(odd) { background-color: color;}という指定だけで実現できます。

ここでは擬似要素や擬似クラスについてを簡単に説明しましたが、他にもelement[foo="bar"]のような属性セレクタやelement ~ elementのような間接セレクタなども非常に便利なので、覚えておくといろいろと捗ると思います。
また、以下では擬似要素や擬似クラスなどについてがまとめられており、中には実際に使用しているサンプルも一緒に紹介しているののもあるので、詳細についてはこちらを参考にしてください。

background-size

スマートフォンサイトで画像を使用する際、iPhoneのRetina Displayなど高解像度のスマートフォンではそのままの大きさで表示すると画像がボケたり汚く表示されてしまうので、デザイン段階などで予め表示させたい大きさより大きいサイズ（一般的には2倍）で画像を制作・用意しておき、使用する際にwidthやheightの値を半分に指定することで綺麗に画像を表示させるという方法がよく用いられています。

この画像がボケて見えてしまうというのは通常のimgだけでなく背景画像でも同様なので、背景画像も同じく実際に表示させたいサイズよりも大きいサイズで予め作成して縮小表示させるのですが、その際に使用するのがbackground-sizeというプロパティです。

例えば、実際には50×25の背景画像として表示させたい場合、まず100×50のように実際に表示させたいサイズより大きい画像を用意し、あとは背景画像として指定したい箇所にCSSで下記のように記述をします。

element {
  background: url(../images/bg.png) no-repeat 0 0;
  -webkit-background-size: 50px 25px;
  background-size: 50px 25px;
}

通常の背景画像と同様にbackgroundで画像へのパスなどを指定し、あとは上記ハイライト部分のようにbackground-sizeで実際に表示させたい大きさを縦横それぞれ指定することで、指定した大きさで背景画像を表示させることができます。
また、上記ではpx指定を使用していますが、autoや%といった指定方法もあります。

今回は詳しい説明を省きますがbackground-sizeには上記のような数値指定以外にも、領域内で最大サイズになるように拡大縮小してくれるcontainや領域内を覆う最小サイズになるように拡大縮小してくれるcoverという便利な値もあります。
background-sizeはスマートフォンサイトに限らず覚えておいて損はない非常に便利なプロパティだと思うので、詳しく知りたい方は以下を参考にしてみてください。

Media Queries & Device Pixel Retio

普段よく使うのはレスポンシブWebデザインの場合ですが、スマートフォンサイトでも縦と横で見栄えやレイアウトを少し変えたい際などにMedia Queriesを使用することがあります。

また、「3. background-size」で高解像度端末でも画像が綺麗に表示されるように大きいサイズを使用して縮小表示させる方法を紹介しましたが、先ほどの方法だと全ての端末に対しての記述となるので、縮小表示させる必要がないような端末でも大きいサイズの画像が読み込まれることになってしまいます。
そんなときに便利なのがDevice Pixel Retioというプロパティで、これを使うことで解像度に合わせて最適な画像を指定することができます。

使用する際はCSSにそれぞれ下記のような感じで記述し、上3つがMedia Queries、下2つがDevice Pixel Retioとなります。

/* portrait & landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* style here... */
}

/* landscape */
@media screen and (min-width: 321px) {
  /* style here... */
}

/* portrait */
@media screen and (max-width: 320px) {
  /* style here... */
}

/* devicePixelRatio=1.5  主にAndroid */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  /* style here... */
}

/* devicePixelRati=2  主にiPhone */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  /* style here... */
}

上記ではインラインで指定していますが、link要素を使えば外部ファイルとしてファイル単位で設定することもできます。
その際はHTMLのhead内などにぞれぞれ以下のような感じで記述します。

<!-- Media Queries -->
<link rel="stylesheet" href="style.css" media="only screen and (min-device-width:320px) and (max-device-width:480px)" />

<!-- Device Pixel Retio -->
<link rel="stylesheet" href="style.css" media="only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min-device-pixel-ratio:2)" />

以下はそれぞれMedia Queriesについて書かれているエントリーで、どちらも詳しく解説されているので非常に参考になります。

また、以下エントリーではAndroid端末のDevice Pixel Retioの値が幾つかまとめられているので、指定する際の参考になります。

背景画像を複数指定

背景画像を使用したい際に指定するbackground-imageですが、ひとつの要素に対してひとつの背景画像しか指定することができなかったものが、CSS3ではひとつの要素に複数の背景画像を指定できるようになりました。
今まで複数の背景を使用したい場合は、背景を表示させたい要素を幾つも入れ子にして対応したりで手間がかかったり、マークアップもごちゃごちゃしたものになってしまっていましたが、この方法を使用すれば無駄な入れ子も必要なくシンプルなマークアップで複数の背景画像を持つ要素を作成することができます。

使い方の例として、ひとつのdiv要素に対して上の画像のように5種類の背景画像を使用する想定で紹介していきます。
また、それぞれの画像は以下のような画像名とします。

1. 左上 … bg_01.png
2. 右上 … bg_02.png
3. 左下 … bg_03.png
4. 右下 … bg_04.png
5. 背景 … bg_05.png

今までだとこのような複数の背景画像を実装する場合は幾つものdiv要素を入れ子にして背景画像をそれぞれに対して指定していたと思いますが、CSS3では下記のように記述することでひとつのdiv要素のみで実装することができます。

div {
  background-image: url(../images/bg_01.png), url(../images/bg_02.png), url(../images/bg_03.png), url(../images/bg_04.png), url(../images/bg_05.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: left top, right top, left bottom, right bottom, left top;
}

/* 省略した場合の記述 */
div {
  background: url(../images/bg_01.png) no-repeat left top, url(../images/bg_02.png) no-repeat right top, url(../images/bg_03.png) no-repeat left bottom, url(../images/bg_04.png) no-repeat right bottom, url(../images/bg_05.png) repeat left top;
}

このように指定したい背景画像をカンマ区切りで指定することで複数の背景画像を使用でき、background-repeatやbackground-positionも同じようにカンマ区切りで指定していきます。
また、この背景画像の複数指定はレイヤーの仕組みになっており、先に指定している画像は前面に位置され、後に指定した画像は背面に位置されるようになっているので、今回の例では一番最後に指定をしている「5. 背景 … bg_05.png」が一番背面に位置され、その上に「4 → 3 → 2 → 1」の順で画像が前面に位置されています。

display: table & display: table-cell

デザインや仕様によってソリッドで組むこともありますが、多くの場合スマートフォンサイトはリキッドレイアウトで制作され、様々なデバイスで縦横どちらで見た場合でも画面いっぱいにレイアウトが広がるような作りにします。
そんなときに便利なのがdisplay: table;で、display: table-cell;と組み合わせることでその要素をテーブルのように表現することができ、可変レイアウトや複数の要素を均等に横並びさせたいときなどに非常に便利です。

同じく要素を横並びしたいときによく使用されるものといえばfloatだと思いますが、display: table;とdisplay: table-cell;の場合はただ横並びさせるだけでなく、面倒な縦方向の位置指定もvertical-alignを使って簡単に指定できたり、あとはfloatを使用していないためclear: borh;などの記述をする必要もなくなります。

display: table;とdisplay: table-cell;の具体的な使用例として、今回はよくあるulとliを使った横並びのナビゲーションを実装する想定で説明していきます。
まずHTMLは下記のようなマークアップとします。

<ul>
  <li><a href="#">Navi 01</a></li>
  <li><a href="#">Navi 02</a></li>
  <li><a href="#">Navi 03</a></li>
</ul>

上記のように3つのliが記述されたulがあり、ulは可変に対応した横幅100％で表示し、liは横幅が変更された場合でも綺麗に3分割表示させたいとします。
これをfloatを使って実装しようとした場合、よく見るのは2つのli要素に対してwidth: 33%;を指定して、1つのliに対してのみwidth: 34%;を指定することで合計100％にするという方法ですが、これだと100％にしているつもりでも右側に余白ができてしまったりして綺麗に3分割されません。（4分割とか5分割なら楽なんですけど...）

このような場合に非常に便利なのがdisplay: table;とdisplay: table-cell;で、下記のようにCSSへ記述することで余白などもなく綺麗に分割された状態で簡単に表示させることができます。

ul {
  display: table;
  table-layout: fixed;
  width: 100%;
}
ul li {
  display: table-cell;
}

このプロパティの基本的な使い方は、親要素にdisplay: table;を、子要素にdisplay: table-cell;をそれぞれ記述するので、今回の場合は親要素であるulにdisplay: table;を、子要素であるにdisplay: table-cell;をそれぞれ指定します。 この時点で表示を確認すると``liが横並びで表示されており、あとは親となる要素に横幅として指定したいwidth: 100%;と幅を均等にしてくれるtable-layout: fixed;を記述することで、li要素に幅指定をしなくても横幅100％で綺麗に3分割された状態で表示されます。

上記では3つの要素を均等に分割する想定で説明しましたが、1つの要素のみ固定にして他の2つは可変にするといった使い方もできますし、先述しましたがvertical-alignを使えば簡単に縦方向の位置指定もできたりと、他の方法だと手間がかかりそうなことも簡単に実装できたりするので覚えておくと非常に便利です。

以下はdisplay: table;とdisplay: table-cell;についてまとめられているエントリーで、こちらでは分かりやすいイメージや実際に表示確認できるサンプルもありで丁寧に説明されていて非常に参考になります。

ちょっと寄り道

説明をしようと思うとこれだけで非常に内容が長くなってしまうので今回は目次から外したのですが、レイアウトを組む際に非常に便利なCSS Flexible Box LayoutというものがCSS3で追加されました。
これを使うことでfloatを使用せずに要素を横並びさせることはもちろん、他にも要素の高さ揃えや要素を上下左右中央に配置など、今までCSSだけだと手間がかかっていたレイアウトを容易に実装することができます。

Flexible Boxの概要や基本的な使い方については以下それぞれの記事で詳細に書かれているので、使ってみたい方や興味あるという方はご覧になってみてください。

box-sizing

例えば、横幅960pxの要素に上下左右20pxのpaddingと1pxのborderを指定したものをCSSで実装する場合は、下記のようにして記述することが一般的だと思います。

element {
  width: 918px;
  padding: 20px;
  border: 1px solid #000;
}

普段あまりCSSをいじらないという方は「なぜ横幅960pxにしたいのにwidth: 918px;にしてるの？」と思うかもしれませんが、これは自分が横幅として指定したい960という数値からpadding（左右20pxずつで40px）とborder（左右1pxずつで2px）で指定した数値をそれぞれ引いた数値で指定をしているためです。
もし、そのまま幅指定をwidth: 960px;と記述した場合は、そこへpaddingとborderの数値が加算されるので、実際にブラウザで表示した際は「幅（960）＋ padding（40）＋ border（2）」で1002pxの要素として表示されます。

このようにデフォルトでは幅や高さの指定にpaddingやborderの数値を含めないという算出方法になるのですが、これをbox-sizingプロパティを使うことで幅や高さの指定にpaddingやborderの数値を含めるという算出方法へ変更することができます。 これを踏まえて先ほどの記述はbox-sizingを使用することで下記のように記述することができます。

element {
  width: 960px;
  padding: 20px;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;  box-sizing: border-box;}

ハイライト部分のようにbox-sizing: border-box;と指定することで、paddingとborderの数値を引いた数値をwidthへ指定するという手間を省くことができるので、そのまま自分が指定したい960という数値をwidthに記述するだけになります。

今回はwidthに指定している数値がpx指定なので、わざわざbox-sizingを使わないでも少し計算をすれば容易に指定をすることができますが、横幅や高さを%指定をしている場面などではかなり使えるプロパティです。
使用したい箇所に随時指定したり汎用クラス化したりと人によって使い方は様々だと思いますが、最近ではリセットスタイルなどで予め記述していたり、*（ユニバーサルセレクタ）で全ての要素に対して指定しているという人もいるようです。

リンクタップ時のカラー変更

iOSではリンクをタップした際にデフォルトで薄いグレーがハイライト表示されますが、このカラーは-webkit-tap-highlight-colorというプロパティを使うことで任意のカラーへ変更することができます。

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, .3);
}

上記ではRGBA指定をしてますが、#ff0000のような16進表記やredのようなカラー名表記でも指定することができます。
ちなみに、このタップ時のハイライト表示自体必要ない場合は-webkit-tap-highlight-color: rgba(0, 0, 0, 0);と記述すれば消すことができます。

文字サイズの自動調整を無効化する

iPhoneのMobile Safariなど、スマートフォンのブラウザの中には縦向きと横向きとで文字サイズを自動調整してくれる機能が付いているものがあります。
これだけ聞くと便利な機能な感じもしますし、サイトによってはそのまま活かしておくこともあったりするのですが、縦向きと横向きで表示が大きく変わってしまったり表示が意図したものにならないなどの理由で、ほとんどの場合はこの機能は無効化されていることが多いです。
この機能を無効化する際は-webkit-text-size-adjustというプロパティを使用し、CSSには下記のように記述することで文字サイズの自動調整を無効化できます。

html {
  -webkit-text-size-adjust: 100%;
}

フォーム要素のデフォルトスタイルを削除

フォームなどで使用するinputやtextareaですが、スマートフォンでは上記画像の左側のようにデフォルトで角丸やグラデーションを用いたスタイルが予め設定されており、自分好みのスタイルを適応させたい場合はこのスタイルが邪魔になることが多いです。
そんなときに便利なのが-webkit-appearanceというプロパティで、これを使用することで簡単にデフォルトスタイルを削除することができます。
使用する際はCSSへ下記のように記述し、記述後に表示確認すると画像右側のように余計なスタイルがなくなったシンプルなものに変更されるのを確認できます。

input, button, textarea, select {
  -webkit-appearance: none;
  border-radius: 0;
}

上記サンプルソースでは角丸もなくしたかったので、border-radius: 0;も同時に記述しています。

上記だと全てのinput, button, textarea, select要素に対しての記述になりますが、全部する必要がない場合はクラスを使ったりして個別に削除したりするほうが使いやすいと思います。

もしくは、inputでもtype="text"だけ削除したいなどの場合は下記のように記述してあげれば、同じinput要素でもinput type="submit"などのスタイルはそのままでinput type="text"のみスタイルを削除することができます。

input[type="text"] {
  -webkit-appearance: none;
  border-radius: 0;
}

ラジオボタンやチェックボックスを選択しやすくする

スマートフォンで入力フォームを使用したことがあるなら感じたことがある人も多いと思いますが、デフォルトのラジオボタンやチェックボックスだと小さくて選択しづらかったり、自分が意図していない箇所が選択されてしまうことがあります。
そういったストレスを少しでも軽減させるために、widthやheightを調整して押しやすいサイズにしたり、label要素と組み合わせて選択しやすくしたりといった対応も多いんですが、iPhoneとAndroidでは少し違いがあったり、場合によってはHTMLやCSSだけでは実現できずJavaScriptを使用して対応することもあります。

それぞれの挙動の違いを把握しておけば上記の方法でもそんなに手間ではないですが、以下で紹介する方法を使うことでより手軽にラジオボタンやチェックボックスを選択しやすくさせることができ、具体的にはtransform: scale();を使用してラジオボタンやチェックボックスを拡大表示させて押しやすくするというものになります。

/* 1.5倍に拡大表示 */
input[type="radio"],
input[type="chexkbox"] {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

/* 2倍に拡大表示 */
input[type="radio"],
input[type="chexkbox"] {
  -webkit-transform: scale(2.0);
  transform: scale(2.0);
}

文字を折り返す

URLなどのような半角英数字の文字列を領域内では収まりきらないような長さで表示しようとすると文字列が折り返されずに1行で表示されてしまい、その結果横スクロールが発生してしまったりして崩れの原因となってしまうことがあります。
それを防ぎたい場合はword-breakというプロパティを使うことで長い英数字の文字列でも折り返すように指定することができ、使用する際はCSSへ下記のように記述します。

p {
  word-break: break-all;
}

テキストが表示領域をオーバーフローした際に「…」を表示

通常は文字列が領域内では収まりきらないような長さだった場合は2行、3行というように複数行で表示されますが、デザイン的な理由などで1行しか表示されないようにしたいことがあります。
そんなに時に便利なのがtext-overflowというプロパティで、これを使用することで文字列が指定した表示領域をオーバーフローした際に「…」という省略符号を表示させ、それ以上の文字列が表示されないようにすることができます。
text-overflowを使用する際はoverflow: hidden;とwhite-space: nowrap;も同時に指定する必要があり、CSSには下記のように記述します。

p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

長押しタップでメニューを表示させない

* {
  -webkit-touch-callout: none;
}

文字列を選択させない

こちらも先ほどのtouch-calloutと同様で頻繁に使うことはないんですが、同じくハイブリッドアプリ等で選択させないようにしたいとか、あとは文章をコピーされたくないという要望をもらうときがあるので、その際はCSSに下記のように記述して文字列を選択させないようにしています。

* {
  -webkit-user-select: none;
}

上記を記述することで文字列の選択がサイト全体でできなくはなるのですが、*（ユニバーサルセレクタ）で指定してしまうとinput type="text"などの要素で文字入力ができなくなってしまいます。
なので、普段使用する際は特定の箇所にのみ記述する、もしくは*を用いるとしても下記のように記述してinput type="text"とtextareaでは別の値を指定するようにしています。

* {
  -webkit-user-select: none;
}
input[type="text"],
textarea {
  -webkit-user-select: auto;
}