以前スマートフォンサイト制作について書きましたが、今回はコーディングするにあたって、役立つ小技を私の備忘録として紹介します。
（そう私コーダーだったんです）
そもそもスマートフォンサイトとは
スマートフォンでもPCサイトを見る事はできますが、なんせ画面が小さくて画像も文字も見づらくなってしまいます。
操作性もマウスを使用するわけではなく、直接画面をタップやスワイプしたりしますので、PCサイトのままだとテキストリンクが隣接していると間違えて別のリンクに繋がってしまったりします。
そこで、スマートフォンの操作性にあったデザイン、UIにしたのがスマートフォンサイトです。
何はともあれこれを記述
まずはヘッダーにこれを記述しましょう。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
これを<head>内に入れるとデバイスの幅にサイト幅を勝手に合わせてくれます。
一応説明すると、
name=”viewport” で「表示領域の設定をします！」
width=device-width で「横幅はデバイスの幅に合わせます！」
initial-scale=1.0 で「表示したデフォルトは拡大も縮小もしません！」
と言う意味。
既存サイトをレスポンシブ対応していた際、これを入れていなくて、
「え！何で表示が変わらないの？」
ってなることがあり焦りました。
（あまりに初歩的なミス、恥ずかし過ぎる）
また、スマートフォンだと電話番号を勝手にリンク設定（タップすると電話が掛かる）してしまうので、
これも記述しておくと良いかも。
<meta name=”format-detection” content=”telephone=no”>
これで勝手にリンクしなくなります。
スタイルシートの便利な設定
スタイルシートでも色々便利な事ができますよ。
まずはリンクエリアを広げる為に、
a {display: block;}
指で操作するので、リンク領域は大きく設定したいものです。
なので、高さを設定できるようにします。
また、横幅もリンク領域がテキスト分量に依存せず、100％になります。
横幅を%で指定したい時の為に、
{box-sizing:border-box;}
スマートフォンは縦向き、横向きで表示幅が変りますね。
カラムの幅をピクセル指定してしまうと、縦から横にした際、要らぬ隙間が出来てしまったりします。
なので、カラム幅を%で指定したいのですが、（例えば二つの箱を並べたい場合width:50％;と設定します）paddingやborderがあるとなかなかうまく行きません。
しかし、これを設定すると諸々含めてくれるのです。便利！
また、上記の設定に付随して、横並びにする際使用すると良いのが、
親要素に{display:table;}
子要素に{display:table-cell;}
tableと同じ振る舞いとなるので、文字の中央寄せ（vertical-align:middle;）なんかも使えるようになります。
floatだと親要素にclearfixを入れないと高さが出なかったり色々取り回しが面倒ですよね。
あとは、英文の改行位置をきれいにしたい為に、
{word-break: break-all;}
英文の場合、デフォルトの設定では単語毎に改行されるので、横幅の小さい画面だと文の改行が凸凹であまりきれいじゃなくなる事があります。
これを設定すると、英文でも単語に関係なく枠の領域で改行されるので、見た目がすっきりです。
まとめ
なぜか毎回忘れてしまい、出だしで挫かれます。まあそれは私だけですが。。。
css3を使うと装飾も色々あり、楽しいですね。
擬似クラスなんかも使うと表現の幅が更に広がります。
よく右端にあるリンクを意味する矢印も擬似クラスを使って表現しますね。
まだまだ小技がたくさんあるスマートフォンサイトのコーディング、
やらないと忘れてしまうのでご注意を！（しつこいですが私だけ）
