スマートフォンサイトのHTMLコーディングメモ12個

スマートフォンサイトのHTMLコーディングメモ12個

サリー

サリー

(編集部注*2013年6月24日に公開された記事を再編集したものです。)

こんにちは、デザイナーのサリーです。
LIGサイトのスマホ版をコーディングしたときの4ヶ月前のメモが良い感じで熟成しましたので、公開したいと思います。
「次コーディングするとき忘れそうだなー」という細かなテクニックをちょこちょこと書いています。THE・メモです。


【こちらもおすすめ】

スマートフォンサイトの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つは参照ページです。

「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のデザイナーです。ウェブデザイナーの頂点を目指すために東京に来ました。立ちはだかる敵は全てなぎ倒してきました。これからもそうやって歩いて行くつもりです。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL