エンジニア採用セミナー
エンジニア採用セミナー
2015.08.25

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

サリー

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

下記を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アプリを起動する方法 ‐ スマートフォンサイト制作ブログ

※現在このページは表示できません。

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

光沢あり

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

光沢なし

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

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

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

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

img01

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

<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」さんでご紹介されていました。下記リンクが参照ページになります。

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

まとめ

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

  • 1
  • 2