電話番号の自動リンクをつけたくないとき
下記を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を設定するなら「ウェブクリップアイコン」も忘れずにね！」で書いているので見てみてください。
リストの右端の矢印を実装するにはどんな方法がいいの？
ここは現状も悩んでます・・・。
よくあるこういうデザインのコーディングです。
ソースはこんな感じです。
<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つ
- 矢印の画像に余白を含めて書きだしてしまう。
- テキストをspanで囲み、背景に矢印画像を設定。aタグにpaddingを設定。
- 矢印画像を 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
位置の指定は擬似要素を利用しているようです。
矢印のデザインをできないところは難点ですが、便利です！
まとめ
以上です。大雑把ですみません。
IEなど対応していないブラウザがあるため、PCでは使えないテクニックが多いのでご注意を〜。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
