CSSが上手くいかないと思ったときに見直してみてね。そういえば、こんな法則があった！と思い出せるかも。
目次
margin値が並ぶ時は、大きい方の値に相殺される
marginの横並び、縦ならびを確認
文字サイズの単位に注意
特に%とremで指定している場合、親要素の確認
- ％やemは、親要素×小要素の数値になる。
- remは、指示した％数値になる。
- pxは、指示した数値になる。
- vwやvhは、画面幅の％数値になる。
あわせて読みたい
CSS文字サイズ「rem、em、％、px、vw、vh」の特徴
CSSの文字サイズ指定で、よく使うものを紹介するにゃ。レスポンシブサイトでは「rem」指示が人気。混乱しやすいのは「％やem」にゃ。
ブロックレベルかインラインブロックか
編集に対応しているHTMLか？
| block | inline | inline-block | |
|---|---|---|---|
| 改行 | 改行される | 改行されない | 改行されない |
| 幅と高さ width、height | 編集可能 | 編集できない | 編集可能 |
| 余白 margin、padding | 編集可能 | 左右は編集可能 上下はできない | 編集可能 |
| 対応のhtml | h1、h2…、p、ul、ol、div… | a、img、br、em、input、span… | なし |
ユーザーエージェントがきいていないか
各ブラウザごとの付属しているデフォルトのスタイルをユーザーエージェントという。
リセットCSSでの対応も考えよう。
リセットCSSとはブラウザによるスタイルの差異をなくすことが目的。
画像の指示
画像の指示方法
flexboxの指示の確認
flexboxの指示を確認。
レスポンシブの場合など検証ツールで確認してみよう。
