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でスタイルの変換方法
インラインでは、widthやheightの指定出来なかったり、margin、paddingの上下の指定ができないにゃ。
ユーザーエージェントがきいていないか
各ブラウザごとの付属しているデフォルトのスタイルをユーザーエージェントという。
リセットCSSでの対応も考えよう。
リセットCSSとはブラウザによるスタイルの差異をなくすことが目的。
画像の指示
画像の指示方法
あわせて読みたい
画像の大きさを指定する時のCSS(imgタグにwidthdepxや%)
imgタグの中で指定するにゃん。注意点は、外側のタグから指定をしても画像の本来のサイズのままで表示されちゃうにゃん。
flexboxの指示の確認
flexboxの指示を確認。
レスポンシブの場合など検証ツールで確認してみよう。
