MENU
オンライン講座開催中
html&css講座開催中

CSSのレイアウトが上手く出来ない時に見直す点【まとめ】

CSSのレイアウトが上手く出来ない時に見直す点【まとめ】

CSSが上手くいかないと思ったときに見直してみてね。そういえば、こんな法則があった!と思い出せるかも。

目次

margin値が並ぶ時は、大きい方の値に相殺される

marginの横並び、縦ならびを確認

文字サイズの単位に注意

特に%とremで指定している場合、親要素の確認

  • %やemは、親要素×小要素の数値になる。
  • remは、指示した%数値になる。
  • pxは、指示した数値になる。
  • vwやvhは、画面幅の%数値になる。

ブロックレベルかインラインブロックか

編集に対応しているHTMLか?

blockinlineinline-block
改行改行される改行されない改行されない
幅と高さ
width、height
編集可能編集できない編集可能
余白
margin、padding
編集可能左右は編集可能
上下はできない
編集可能
対応のhtmlh1、h2…、p、ul、ol、diva、img、br、em、input、spanなし

ユーザーエージェントがきいていないか

各ブラウザごとの付属しているデフォルトのスタイルをユーザーエージェントという。

リセットCSSでの対応も考えよう。

リセットCSSとはブラウザによるスタイルの差異をなくすことが目的。

画像の指示

画像の指示方法

flexboxの指示の確認

flexboxの指示を確認。

レスポンシブの場合など検証ツールで確認してみよう。

詳しくは講座に来てね

CSSのレイアウトが上手く出来ない時に見直す点【まとめ】

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次