訓練日誌-2024/1/30（CSS Box Modelについて）

目次

1. Box Modelについて
2. モバイル版のコードについて

Box Modelについて

• width
  横幅を指定する
  HTMLのテキストや画像（img）に適用される　値は％をよく使用する
  「max-width」「min-width」は便利
• hight
  高さを指定する　初期値のautoをよく使用する　←レイアウトが崩れやすいから
  
• padding
  背景に使う　すぐに反映されるからわかりやすい　内側の余白
  CSSでbackgroudが適用される箇所
• margin
  背景に使わない　透明　書いた記述通りに見た目が変わらない　箱と箱の距離を取る
• border
  装飾に使う　線や箱
• float
  今は使わない　昔の人は使っているのでコードに使用されていることがある　
• clear
  floatと一緒に使用する
• position
  こういう時はこうとテンプレートで覚えるといい
  トップページへ戻るなどの設定の時に使う
• overflow
  スクロールバーが出る
  まず「float」の親要素に「overflow: hidden;」が便利
• display
  3種類ある
  display:block;　→レイアウト、サイズ調整などに使用
  display:inline-block;　→文章内、横並びなどに使用
  display:inline;　→文章内で使用

モバイル版のコードについて

• media screen
  入力例）
  🔸CSS
  @media screen and (max-width: 760px) {
  header {
  margin: 0px auto;
  }
  }