スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。
自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。
普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。
UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。
また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に対応しているブラウザであれば非常に使えるプロパティやテクニックだと思うので、デバイスに限らずCSSを使うなら覚えておいて損はないと思うものが多いです。
画像を極力使わず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);
}
ボタンデザイン
CSSのみでデザインされたボタンを作る方法で、グラデーション背景や内側にボーダーを入れたりすることで、画像を使わなくてもこのような立体感あるボタンを作ることができます。
実装には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
スマートフォンサイトでよく見かけるメニューリストなどで使われている矢印アイコンをCSSのみで作る方法です。
実装には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
同じく矢印アイコンをCSSのみで作成する方法で、基本的には先ほどと同じように擬似要素を使いますが、こちらは少し角丸にして可愛いタイプの矢印にしたいときに使えます。
実装には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
を使って回転させることで矢印のように見せています。
吹き出し
今まで紹介してきた見出しやボタンといったものと比べると使用頻度が多少下がる印象ですが、このような吹き出しもCSSのみで実装することができます。
実装には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のみでアコーディオン
上記で紹介してきたものは主に見栄えに関するものでしたが、やろうと思えばJavaScriptを使って実装するような動きをCSSのみで実装することが可能です。
そこで、今回はサンプルとしてtransition
を使って、一般的にはJavaScriptなどを用いて実装するようなアコーディオンを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
- :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
のような間接セレクタなども非常に便利なので、覚えておくといろいろと捗ると思います。
また、以下では擬似要素や擬似クラスなどについてがまとめられており、中には実際に使用しているサンプルも一緒に紹介しているののもあるので、詳細についてはこちらを参考にしてください。
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種類の背景画像を使用する想定で紹介していきます。
また、それぞれの画像は以下のような画像名とします。
- 左上 … bg_01.png
- 右上 … bg_02.png
- 左下 … bg_03.png
- 右下 … bg_04.png
- 背景 … 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);
}
記述後に表示を確認すると、イメージのようにラジオボタンとチェックボックスそれぞれのサイズが大きくなっているのが確認できると思います。
上記ソースでは記述していませんが、実際に表示を確認すると位置がズレていたり右のテキストとの余白などが詰まりすぎていると思うので、その際はvertical-align
やmargin-right
などで調整してください。
文字を折り返す
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;
}
長押しタップでメニューを表示させない
イメージはiPhoneで長押しタップした時のキャプチャで、デフォルトでは画像やリンクを長押ししているとキャプチャの下部にあるようなメニューが表示されます。
通常のサイトではほとんどありませんが、ハイブリッドアプリ等でこれが出ないようにしたいという要望をもらうこともあるので、その際はCSSに下記のように記述して長押しタップをしてもメニューを表示させないにしています。
* {
-webkit-touch-callout: none;
}
文字列を選択させない
イメージはiPhoneでテキスト選択時のキャプチャで、デフォルトでは文字列を選択するとキャプチャのようなメニューが表示され、その文字列をコピーしたりすることができます。
こちらも先ほどの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;
}
以上、長くなりましたがスマートフォンサイト制作時に覚えておきたいCSSのまとめでした。
中にはスマートフォンというよりもiPhone向けのものがあったり、正直Androidに関しては全ての機種やバージョンで挙動確認したことがあるわけでないので全部を問題なく使用できるかわからない部分もあったりするんですが、いずれも覚えておくと非常に便利なプロパティやテクニックだと思います。
自分用の備忘録を兼ねてはいますが、もともと僕の周りにいるスマートフォンサイトが苦手だなっていう人に向けて少しでも制作時の役に立てればと思ったのがきっかけで書いたので、同じようにまだスマートフォンサイト制作が苦手だなと思う方の参考になれば嬉しいです。