スマートフォンサイトのHTMLコーディングメモ12個

こんにちは、デザイナーのサリーです。
LIGサイトのスマホ版をコーディングしたときの4ヶ月前のメモが良い感じで熟成しましたので、公開したいと思います。
「次コーディングするとき忘れそうだなー」という細かなテクニックをちょこちょこと書いています。THE・メモです。

【こちらもおすすめ】

これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】

2014.11.13

• 238
• 172

スマートフォンサイトのHTMLコーディングメモ12個

box-sizingがスーパー便利

セレクタに下記を指定すると、widthとheightでの指定数値にpaddingとborder分も含めてくれます。

box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;

幅◯◯%で指定するときに。
幅100%のinputやtextareaに。

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

CSS3のセレクタも使えるので活用する。
以下2つは参照ページです。

• 「まだまだある！疑似要素と疑似クラスでできること」
• セレクタ ‐ CSS HappyLife ZERO

  http://zero.css-happylife.com/selectors/

「nth-child」というセレクタがすごく便利。

display:table-cell; を活用する

リキッドレイアウトのコーディングにすごく便利。

親要素に

display:table;

子要素に

display:table-cell;

記事リストなど、画像とテキストを横並びにするときに。
均等に横並びにしたいときに。

タップ時のカラー設定

CSSで以下のように設定。アルファ値も設定可能。

-webkit-tap-highlight-color: rgba(255,105,183,0.6);

画像、iframeに max-width を指定

img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので

max-width:100%;

を指定する。

word-break:break-all; を指定

スマホは幅が狭いため、長いURLなどが1行に入りきりません。

word-break:break-all;

を適宜指定する。

フォームボタンなどのデフォルトデザイン解除

フォームのボタンやチェックボックスなどのデフォルトのデザインを解除する。

webkit-appearance:none;

大枠にoverflow: hidden;

#wrapperなどに下記を指定で、横スクロールを防ぐことができる。

overflow:hidden;

横にして縦に戻したら横スクロールが出てしまうときなどに。

電話番号の自動リンクをつけたくないとき

下記をhead内に追加する。

<meta name="format-detection" content="telephone=no">

地図のリンクの指定方法

「Google Maps」サイトへ移動する

<a href="http://maps.google.com/maps?q=クエリ">MAP</a>

iOS「マップ」を起動（アンドロイドは非対応）します。

<a href="maps:q=クエリ">MAP</a>

理由がなければ「Google Maps」を使います。
クエリの書き方は、「スマートフォンサイト制作ブログ」さんでご紹介しているので、下記リンクを参照してください。

• iPhone/AndroidでGoogle Mapアプリを起動する方法 ‐ スマートフォンサイト制作ブログ

  http://html-five.jp/22/

ウェブクリップアイコンを設定

光沢あり

<link rel="apple-touch-icon" href="画像URL">

光沢なし

<link rel="apple-touch-icon-precomposed" href="画像URL">

ウェブクリップアイコンの詳細は、「スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！」で書いているので見てみてください。

リストの右端の矢印を実装するにはどんな方法がいいの？

ここは現状も悩んでます・・・。
よくあるこういうデザインのコーディングです。

ソースはこんな感じです。

<section>
	<h1>LIGブログ カテゴリー</h1>
	<ul>
		<li><a href="all">すべて</a></li>
		<li><a href="news">ニュース</a></li>
		<li><a href="omoshiro">おもしろ</a></li>
		<li><a href="web">WEB制作</a></li>
		<li><a href="life">生活</a></li>
		<li><a href="best">殿堂入り</a></li>
	</ul>
</section>

リキッドなので矢印は右端で余白を取りつつ固定したいけど、背景画像は右からの相対指定ができません。
（background-position: right 12px bottom 16px; のような指定ができるブラウザもありますが、対応していないブラウザがほとんど。）
liにpaddingを設定すると、中のaタグのタップできる範囲も狭くなってしまう。

そこで考えた方法3つ

1. 矢印の画像に余白を含めて書きだしてしまう。
2. テキストをspanで囲み、背景に矢印画像を設定。aタグにpaddingを設定。
3. 矢印画像を a:before の背景画像として設定。position:absolute;にして位置指定。

今までは1.で実装することが多かったのですが、画像に余白つきで書きだすのはスマートでない・・・。
HTMLのソースもそのままでいける3.がいいかな？と思っています。
こんなソースになりました。

a:before {
	background:url(arrow.png) left top no-repeat;
	background-size:30px 20px;
	margin:-10px 0 0 0;
	width:30px;
	height:20px;
	content:"";
	display:block;
	position:absolute;
	right:20px;
	top:50%;
}

しかし、なんで右から指定できないんだ。

————————————————————————————

2013/6/26追記
こちらの件、ご意見いただきました！
ありがとうございます〜！

■左から%で指定する

a {
	background:url(arrow.png) 98% center no-repeat;
	display: block;
	padding: 10px;
}

HTMLソースもCSSソースもシンプルなままで実装できます！
難点は幅によって微妙に位置が変わってしまうことですが、本当に少しだけです。
許容範囲と感じればこの方法が1番スマートでおすすめです。

■矢印をCSS3で描写する
画像を使わず、CSS3で矢印を作ってしまう方法が「to-R」さんでご紹介されていました。下記リンクが参照ページになります。

• CSS3で実現するアローアイコン – to-R

  http://blog.webcreativepark.net/2013/06/25-234149.html

位置の指定は擬似要素を利用しているようです。
矢印のデザインをできないところは難点ですが、便利です！

まとめ

以上です。大雑把ですみません。
IEなど対応していないブラウザがあるため、PCでは使えないテクニックが多いのでご注意を〜。