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

  • Posted on
  • Category : Tips
スマートフォンサイト制作時に覚えておきたいCSS 15

スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。

UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。
また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に対応しているブラウザであれば非常に使えるプロパティやテクニックだと思うので、デバイスに限らずCSSを使うなら覚えておいて損はないと思うものが多いです。

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

  1. 画像を極力使わずCSSで対応する
    1. 見出しデザイン – シャドウ
    2. 見出しデザイン – グラデーション
    3. ボタンデザイン
    4. 矢印アイコン #1
    5. 矢印アイコン #2
    6. 吹き出し
    7. CSSのみでアコーディオン
  2. 擬似要素や擬似クラスを活用する
  3. background-size
  4. Media Queries & Device Pixel Retio
  5. 背景画像を複数指定
  6. display: table & display: table-cell
  7. box-sizing
  8. リンクタップ時のカラー変更
  9. 文字サイズの自動調整を無効化する
  10. フォーム要素のデフォルトスタイルを削除
  11. ラジオボタンやチェックボックスを選択しやすくする
  12. 文字を折り返す
  13. テキストが表示領域をオーバーフローした際に「…」を表示
  14. 長押しタップでメニューを表示させない
  15. 文字列を選択させない

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

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

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

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

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

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

※表示確認の際、PCで閲覧している場合はChromeやFirefoxといったブラウザで確認してください。

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

Lorem ipsum

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

HTML

<h1>Lorem ipsum</h1>

CSS

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

目次へ

1-2. 見出しデザイン – グラデーション

Lorem ipsum

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

HTML

<h1>Lorem ipsum</h1>

CSS

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

目次へ

1-3. ボタンデザイン

CSSのみでデザインされたボタンを作る方法で、グラデーション背景や内側にボーダーを入れたりすることで、画像を使わなくてもこのような立体感あるボタンを作ることができます。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

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

CSS

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-4. 矢印アイコン #1

CSSのみで矢印アイコン #1

スマートフォンサイトでよく見かけるメニューリストなどで使われている矢印アイコンをCSSのみで作る方法です。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

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

CSS

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-topborder-rightで表示させたものをtransformを使って回転させることで矢印のように見せています。
もう少し大きくしたい時はwidthheightmargin-topの値を、色や太さを変えたい時はそれぞれborderの値を変更するといったように、ちょっとした変更もCSSなので簡単にできます。
最近は同じく大きさや色の変更が容易などの理由でアイコンフォントを使うというのも増えていますが、この方法ならCSSのみで手っ取り早くできます。

実際の表示は以下より確認できます。

目次へ

1-5. 矢印アイコン #2

CSSのみで矢印アイコン #2

同じく矢印アイコンをCSSのみで作成する方法で、基本的には先ほどと同じように擬似要素を使いますが、こちらは少し角丸にして可愛いタイプの矢印にしたい時に使えます。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

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

CSS

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

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

実際の表示は以下より確認できます。

目次へ

1-6. 吹き出し

Tooltip #1

Tooltip #2

今まで紹介してきた見出しやボタンといったものと比べると使用頻度が多少下がる印象ですが、このような吹き出しもCSSのみで実装することができます。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

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

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

CSS

/* 共通スタイル */
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を組み合わせることでマンガとかで見かけるような考えている風(?)の吹き出しを実装できます。

目次へ

1-7. CSSのみでアコーディオン

CSSのみでアコーディオン

上記で紹介してきたものは主に見栄えに関するものでしたが、やろうと思えばJavaScriptを使って実装するような動きをCSSのみで実装することが可能です。
そこで、今回はサンプルとしてtransitionを使って、一般的にはjQueryなどを用いて実装するようなアコーディオンをCSSのみで作成してみます。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

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

CSS

.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の:checkedtransitionを用いています。
まず予めコンテンツがあるdiv要素の高さをheight: 0;に設定しておき、チェックボックスにチェックが入ったらdiv要素の高さを変更するように記述します。
あとはその高さ変更にtransitionを使ってアニメーションをつけることで、JavaScriptを使用しているようなアニメーション付きのアコーディオンを実装することができます。
また、開閉しているかどうかを明示する矢印アイコンは、「1-4. 矢印アイコン #1」で紹介したものをtransformの値を変更して実装しています。

実際の表示は以下より確認できます。

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

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

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

目次へ

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

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

擬似要素

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

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

上記の中で特に便利で覚えておいて損はないと思うのが::after::beforeで、「1. 画像を極力使わずCSSで対応する」で紹介したサンプルでも多用していますが、contentと組み合わせたりすることで様々な表現をCSSのみで実装できるようになります。

疑似クラス

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

  • :first-child
  • :only-child
  • :last-child
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :first-of-type
  • :last-of-type
  • :empty
  • :target
  • :checked
  • :enabled
  • :disabled

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

: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のような間接セレクタなども非常に便利なので、覚えておくといろいろと捗ると思います。
また、以下では擬似要素や擬似クラスなどについてがまとめられており、中には実際に使用しているサンプルも一緒に紹介しているののもあるので、詳細についてはこちらを参考にしてください。

目次へ

3. background-size

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

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

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

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はスマートフォンサイトに限らず覚えておいて損はない非常に便利なプロパティだと思うので、詳しく知りたい方は以下を参考にしてみてください。

目次へ

4. Media Queries & Device Pixel Retio

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

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

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

CSS

/* 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の値が幾つかまとめられているので、指定する際の参考になります。

目次へ

5. 背景画像を複数指定

背景画像を使用したい際に指定する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要素のみで実装することができます。

CSS

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

目次へ

6. 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;の具体的な使用例として、今回はよくあるulliを使った横並びのナビゲーションを実装する想定で説明していきます。
まずHTMLは以下のようなマークアップとします。

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へ記述することで余白などもなく綺麗に分割された状態で簡単に表示させることができます。

CSS

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

このプロパティの基本的な使い方は、親要素にdisplay: table;を、子要素にdisplay: table-cell;をそれぞれ記述するので、今回の場合は親要素であるuldisplay: table;を、子要素であるlidisplay: 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の概要や基本的な使い方については以下それぞれの記事で詳細に書かれているので、使ってみたい方や興味あるという方はご覧になってみてください。

7. box-sizing

box-sizing

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

CSS

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

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

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

CSS

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

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

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

目次へ

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

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

CSS

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

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

目次へ

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

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

CSS

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

目次へ

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

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

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

CSS

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

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

上記だと全てのinputbuttontextareaselect要素に対しての記述になりますが、全部する必要がない場合はクラスを使ったりして個別に削除したりするほうが使いやすいと思います。
あとはinputでもtype="text"だけ削除したいなどの場合は以下のように記述してあげれば、同じinput要素でもinput type="submit"などのスタイルはそのままでinput type="text"のみスタイルを削除することができます。

CSS

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

以下でデフォルトとスタイル削除後でそれぞれサンプルを作成しているので、実際の表示確認をしたい際はご覧ください。

目次へ

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

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

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

CSS

/* 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);
}
ラジオボタンやチェックボックスを選択しやすくする

記述後に表示を確認すると、画像のようにラジオボタンとチェックボックスそれぞれのサイズが大きくなっているのが確認できると思います。
上記ソースでは記述していませんが、実際に表示を確認すると位置がズレていたり右のテキストとの余白などが詰まりすぎていると思うので、その際はvertical-alignmargin-rightなどで調整してください。

また、以下でラジオボタンとチェックボックスそれぞれのデフォルトサイズ・1.5倍指定・2倍指定のサンプルを作成しているので、実際の表示確認をしたい際はご覧ください。

目次へ

12. 文字を折り返す

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

CSS

p {
	word-break: break-all;
}

目次へ

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

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

CSS

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

以下はtext-overflowを使用したサンプルで、いずれも同じ長さの文字列をHTMLでは記述しています。
デフォルトの何も指定していない方はずらっと文字列が表示されていますが、text-overflowを指定している方は1行分しか表示されておらず、その代わりに「…」という省略符号を表示されているのが確認できます。

目次へ

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

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

画像はiPhoneで長押しタップした時のキャプチャで、デフォルトでは画像やリンクを長押ししているとキャプチャの下部にあるようなメニューが表示されます。

通常のサイトではほとんどありませんが、ハイブリッドアプリ等でこれが出ないようにしたいという要望をもらうこともあるので、その際はCSSに以下のように記述して長押しタップをしてもメニューを表示させないにしています。

CSS

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

目次へ

15. 文字列を選択させない

文字列を選択させない

画像はiPhoneでテキスト選択時のキャプチャで、デフォルトでは文字列を選択するとキャプチャのようなメニューが表示され、その文字列をコピーしたりすることができます。

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

CSS

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

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

CSS

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

目次へ

以上、長くなりましたがスマートフォンサイト制作時に覚えておきたいCSSのまとめでした。
中にはスマートフォンというよりもiPhone向けのものがあったり、正直Androidに関しては全ての機種やバージョンで挙動確認したことがあるわけでないので全部を問題なく使用できるかわからない部分もあったりするんですが、いずれも覚えておくと非常に便利なプロパティやテクニックだと思います。

※紹介しているものの中で、これは間違ってるとかこっちの方法のが良いというのがあれば是非教えてください。

自分用の備忘録を兼ねてはいますが、もともと僕の周りにいるスマートフォンサイトが苦手だなっていう人に向けて少しでも制作時の役に立てればと思ったのがきっかけで書いたので、同じようにまだスマートフォンサイト制作が苦手だなと思う方の参考になれば嬉しいです。

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。