SAMPLE

「たった1行！スマホサイトのコーディング時に役立つ小技8」のサンプルです。

1.幅をデバイスサイズに合わせる

現在見えている状態が「viewport」でデバイスサイズに合わせた表示です！スマホの幅に合わせてサイト幅がフィットしています。（ウィンドウ幅を狭めるか、スマホで表示してください）

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2.スマホを横にしたときに文字が大きくならないようにする

現在見えている状態が「-webkit-text-size-adjust: 100%;」で横向きでも文字サイズを変わらないようにした表示です！スマホで縦向き・横向きにして見るとわかります。

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

3.電話番号に自動的にリンクが付かないようにする

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

EXAMPLE3.電話番号をテキストとして表示する

TEL：0120-00-0000

4.リンクを押したら電話をかけられるようにする

<a href="tel:0120-00-0000">0120-00-0000</a>

EXAMPLE指定した番号に電話できるようリンクを設定する

0120-00-0000

5.リンクを押したらGoogleマップアプリを起動させる

<a href="http://maps.google.com/maps?q=住所">住所</a>

EXAMPLE指定した住所の地図をGoogleマップアプリで見る

<a href="http://maps.google.com/maps?q=東京都港区芝公園４−２−８" >東京都港区芝公園４−２−８</a> 東京都港区芝公園４−２−８

EXAMPLE指定したワードの地図をGoogleマップアプリで見る

住所だけでなく、ワードでも指定することができました。住所のほうが正確かと思いますが、有名スポットならこの方法もアリかもしれませんね。

<a href="http://maps.google.com/maps?q=東京タワー" >東京タワー</a> 東京タワー

ここでは設定していませんが、リンクに「target="_blank"」をつけてあげると、マップアプリで開いたことがわかりやすいです。

6.リンクエリアを広げる

display: block;

EXAMPLE狭いリンクエリアと広いリンクエリア

狭いリンクエリア 広いリンクエリア

7.paddingやborder分を気にせずwidth/heightの数値を指定する

box-sizing : border-box ;

EXAMPLE「box-sizing」で簡単に田の字メニューを作る

			
.menu li{
  float: left;
  border-right: 1px solid #a3c5dc;
  border-bottom: 1px solid #a3c5dc;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  background: #3498db;
  width: 50%;

  /* この記述！ */
  box-sizing : border-box;

}

8.長い文字列でも途中で改行させる

word-break: break-all;

EXAMPLE「word-break: break-all;」で長い文字列を途中で改行させる

何も設定してない文

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

「word-break: break-all;」設定した文

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.