スマホサイト コーディング Tips
スマホサイト コーディング Tips。
「box-sizing」
padding、borderの値を気にせず、width、heightを指定。
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
「display:table-cell;」
リキッドレイアウトのコーディング。
親要素
display:table;
子要素
display:table-cell;
「max-width」
img、iframeに指定。
max-width:100%;
「word-break:break-all;」
強制改行。
word-break:break-all;
「webkit-appearance:none;」
フォームのボタンやチェックボックスなどのデフォルトデザインを解除。
webkit-appearance:none;
「overflow:hidden;」
横スクロール防止。#wrapperなどに指定。
overflow:hidden;
電話番号の自動リンクなし。
<meta name="format-detection" content="telephone=no">
リストの右端の矢印。
<ul> <li><a href="" class="arrow">メニュー</a></li> <li><a href="" class="arrow">メニュー</a></li> <li><a href="" class="arrow">メニュー</a></li> </ul>
li .arrow { position:relative; } li .arrow::after { content:""; display:block; width:10px; height:10px; border-top:2px solid #333; border-right:2px solid #333; -webkit-transform:rotate(45deg); transform:rotate(45deg); position:absolute; right:10px; top:50%; margin-top:-7px; }