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の指示を確認。
レスポンシブの場合など検証ツールで確認してみよう。