スマートフォンサイトのHTMLコーディングメモ12個
サリー
（編集部注＊2013年6月24日に公開された記事を再編集したものです。）
こんにちは、デザイナーのサリーです。
LIGサイトのスマホ版をコーディングしたときの4ヶ月前のメモが良い感じで熟成しましたので、公開したいと思います。
「次コーディングするとき忘れそうだなー」という細かなテクニックをちょこちょこと書いています。THE・メモです。
【こちらもおすすめ】
これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】
セイト 544
スマートフォンサイトのHTMLコーディングメモ12個
box-sizingがスーパー便利
セレクタに下記を指定すると、widthとheightでの指定数値にpaddingとborder分も含めてくれます。
box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;幅◯◯%で指定するときに。
幅100%のinputやtextareaに。
擬似要素・擬似クラスを活用する
CSS3のセレクタも使えるので活用する。
以下2つは参照ページです。
- 「まだまだある！疑似要素と疑似クラスでできること」
- セレクタ ‐ CSS HappyLife ZERO
「nth-child」というセレクタがすごく便利。
| 3番目のliに | li:nth-child(3) |
|---|---|
| 奇数のliに | li:nth-child(odd) |
| 偶数のliに | li:nth-child(even) |
| 3の倍数のliに（3,6,9,12…） | li:nth-child(3n) |
| 3n+1数番目のliに（1,4,7,10…） | li:nth-child(3n+1) |
display:table-cell; を活用する
リキッドレイアウトのコーディングにすごく便利。
親要素に
display:table;子要素に
display:table-cell;記事リストなど、画像とテキストを横並びにするときに。
均等に横並びにしたいときに。
タップ時のカラー設定
CSSで以下のように設定。アルファ値も設定可能。
-webkit-tap-highlight-color: rgba(255,105,183,0.6);画像、iframeに max-width を指定
img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので
max-width:100%;を指定する。
word-break:break-all; を指定
スマホは幅が狭いため、長いURLなどが1行に入りきりません。
word-break:break-all;を適宜指定する。
フォームボタンなどのデフォルトデザイン解除
フォームのボタンやチェックボックスなどのデフォルトのデザインを解除する。
webkit-appearance:none;大枠にoverflow: hidden;
#wrapperなどに下記を指定で、横スクロールを防ぐことができる。
overflow:hidden;横にして縦に戻したら横スクロールが出てしまうときなどに。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
Webサイト制作の実績・料金を見る
この記事のシェア数
LIGのデザイナーです。ウェブデザイナーの頂点を目指すために東京に来ました。立ちはだかる敵は全てなぎ倒してきました。これからもそうやって歩いて行くつもりです。
このメンバーの記事をもっと読むこのメンバーの記事をもっと読む
