
これはハマった!スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】
こんにちは、デザイナーのサリーです。
LIGサイトのスマホ版をコーディングしたときの4ヶ月前のメモが良い感じで熟成しましたので、公開したいと思います。
「次コーディングするとき忘れそうだなー」という細かなテクニックをちょこちょこと書いています。THE・メモです。
【こちらもおすすめ】
これはハマった!スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】
セレクタに下記を指定すると、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;
子要素に
display:table-cell;
記事リストなど、画像とテキストを横並びにするときに。
均等に横並びにしたいときに。
CSSで以下のように設定。アルファ値も設定可能。
-webkit-tap-highlight-color: rgba(255,105,183,0.6);
img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので
max-width:100%;
を指定する。
スマホは幅が狭いため、長いURLなどが1行に入りきりません。
word-break:break-all;
を適宜指定する。
フォームのボタンやチェックボックスなどのデフォルトのデザインを解除する。
webkit-appearance:none;
#wrapperなどに下記を指定で、横スクロールを防ぐことができる。
overflow:hidden;
横にして縦に戻したら横スクロールが出てしまうときなどに。