スマホサイト コーディング 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;
}
