Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

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