スマートフォンサイトのコーディング Tips あれこれ

スマートフォンサイトのコーディング Tips あれこれ

ゴールデンウィークはゴールデンに過ごせそうにない Latin です。

今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。
先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。

viewport 系の設定

描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に

これが一番よく見る形式でしょうか?

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

文字サイズの自動調整をオフにする

各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化(拡大)する機能があります。
読み物系コンテンツなど、特別な意図でもない限り不要な機能なので、CSSにも手を加える必要があります。

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

拡大・縮小は可能にしたい場合

拡大可能な下限 minimum-scale と、上限 maximum-scale、さらにピンチイン/ピンチアウトの指定 user-scalable をオフにすると拡大・縮小が可能になります。

<meta name="viewport" content="width=device-width,initial-scale=1.0">
body {
-webkit-text-size-adjust: 100%;
}

参考記事

Media Queries の記述

単純にCSSのメンテが面倒になるので、Media Queries の分岐って極力少なくしたい所です。 そしてモバイルファーストの概念であれば、スマホのメディアクエリから記述していきます。

年々、デバイスの解像度は物凄い変化を遂げてきているので、Device Pixel Ratio の指定だったり、dpiの指定だったり、この辺りも変化していきそうな予感。

/* -------------------------------------
- 479px SP Default Style
------------------------------------- */
/* スタイルを記述 */

/* -------------------------------------
480px - SP and Others Tablet
------------------------------------- */
@media screen and (min-width: 480px) {
/* スタイルを記述 */
}

/* -------------------------------------
768px - iPad and Others Tablet
------------------------------------- */
@media screen and (min-width: 768px) {
/* スタイルを記述 */
}

/* -------------------------------------
980px - PC and Tablet Landscape
------------------------------------- */
@media screen and (min-width: 980px) {
/* スタイルを記述 */
}

参考記事

CSSグラデーションを中身のサイズの可変に関わらず、固定にしたい

例えば、トグルメニューの背景などにCSSグラデーションを指定していた場合、メニュー展開時にグラデーションが間延びしてしまいます。

これらを防ぐにはグラデーション開始・終了の相対指定をやめ、絶対指定をします。
ただし、要素の縦幅が決まっている場合やグラデーションのかけ方に応じて、臨機応変に対応する必要はありそうです。

.box {
/* 修正前 ※ベンダープレフィクス省略 */
background: linear-gradient(to bottom, #FFC670 5%,#FF9900 100%);

/* 修正後 ※ベンダープレフィクス省略
※100px以降は #FF9900 になる */
background: linear-gradient(to bottom, #FFC670 5px,#FF9900 100px);
}

「box-sizing」でラクラク幅指定

個人的にはスマホコーディングでは、border-box が一番便利だと思ってます。
要素に width や height を指定していた場合、padding 分を計算する必要がありましたが、box-sizing を指定する事で計算が不要。これは便利!

.box {
padding: 10px;
width: 100px; /* padding分の計算が不要 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

「table-cell」で float を使わずに簡単横並び

単純な2カラムのバナースペースなどは、display: table-cell が便利。
私の場合は、疑似的にマージンを持たせたい場合に、親に width: 100%; をあてて、子に width: 52%; をあてる機会が多いです。

「100% 超えてるじゃまいか」と言われそうですが、その辺は table なので吸収してくれます。
あるいは、綺麗に width: 50%; 指定にしたい方は、疑似セレクタを使って2個目に text-align: right; やpadding を指定するとかでしょうか。

table-cell は便利ですが、あくまでも「table」なので、縦が二列になる場合などは少し面倒です。
そのような場合は float 使った方がスムーズなケースもあるかも。

.box {
display: table;
width: 100%;
} 

.box .minibox {
display: table-cell;
width: 52%;
}

CSS3 の疑似セレクタが便利

PCサイト制作では使う事を躊躇う CSS3 の疑似セレクタを自由に使う事ができるのも、スマホサイトコーディングのメリットです。
使えるものは使っちゃいましょう。

li:last-child { hoge }      /* 最後の li に */
li:nth-child(2) { hoge }    /* 2番目の li に */
li:nth-child(odd) { hoge }  /* 奇数の li に */
li:nth-child(even) { hoge } /* 偶数の li に */
input:disabled { hoge }     /* disable状態の input に */

フォーム要素のデフォルトスタイルをリセット

端末によってフォームボタンやセレクトボックスのスタイルも随分違ったりします。
独自のデザインやちょこっと変更加えたい場合は、リセットしちゃった方が早いです。

input,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

テキスト量の異なる2カラムのボタンメニューで、vertical-align と Flat Height を実現させる

スマホのボタンメニューは1カラムでリスト化するケースが多いと思いますが、2カラムにしたい時も。

この場合、li にはグラデーションあてて、アンカーは display: block にしつつ、padding と background でアイコンを指定する訳ですが、このままでは vertical-align が効かない。 さらに、メニューのテキストの量が異なる場合は Flat Height を実現させるのもひと苦労です。

ちょっと何いっているか自分でもわからなくなってきた・・・。
単純に以下のようなケース。

JavaScript で Flat Height を実現させても良いのですが、CSS で可能ならその方が早いですよね。
こんな感じ。

割とハマった部分なんですが、background(グラデーションと矢印アイコン)をどこで使うかという点と、vertical-align をどこで使うか、という点がミソでしょうか。

以下の例では、li にグラデーション、a に display: block; と矢印アイコン、a の中にさらに span を切って、span に display: table-cell; をあて、vertical-align: middle;、 Flat Height を実現させる為に、縦幅を固定させています。

テキストが可変で、設定した縦幅以上になる恐れがある場合は、やっぱりJS使うしかないのかな?

<ul>
<li><a href="#"><span>Menu 1</span></a></li>
<li><a href="#"><span>Menu 2</span></a></li>
<li><a href="#"><span>Menu 3Menu 3Menu 3Menu 3</span></a></li>
<li><a href="#"><span>Menu 4</span></a></li>
</ul>
ul:after {
display: block;
content: "";
clear: both;
}

li {
float: left;
width: 160px;
border-bottom: 1px solid #A3B922;
background: -webkit-linear-gradient(top, #fdfef8 0%,#eef7bd 93%);
background: -moz-linear-gradient(top, #fdfef8 0%, #eef7bd 93%);
background: linear-gradient(to bottom, #fdfef8 0%,#eef7bd 93%);
}

li a {
display: block;
padding: 10px 20px 10px 10px;
background: url(ico_arrow_01.png) no-repeat 95% 50%;
-webkit-background-size: 6px auto;
-moz-background-size: 6px auto;
background-size: 6px auto;
}

li a span {
display: table-cell;
height: 3em;
vertical-align: middle;
}

今回参考にさせていただいたサイト

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ