Web無料相談会2018冬
Web無料相談会2018冬
2015.08.25

スマートフォンサイトの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;

横にして縦に戻したら横スクロールが出てしまうときなどに。

  • 1
  • 2