トラブルシューティング

うまく表示されない時は

動画

https://youtu.be/Kcxt3rPEyeo

ポイント

要素の種類

• ブロック要素
  • 必ず幅をいっぱいにとる
  • 縦に並ぶ
  • 高さは中身の分だけ広がる
  • 例
    • div, h1~h6, p, ul, li
• インライン要素
  • 横に並ぶ
  • 高さも幅も、中身の分だけ広がる
  • 文字列と同じ扱い
  • 大きさや余白を自由に設定できない
    • margin
    • width
  • 例
    • a, span
• インラインブロック要素
  • 高さや横幅・余白を自由に設定できるインライン要素
  • 横に並ぶ
  • 高さも幅も、中身の分だけ広がる
  • 文字列と同じ扱い
  • 例
    • img, input, textarea

paddingやmarginの省略記法

• 2つ指定すると、1つ目が上下。2つ目が左右 ↓の場合、上下10px、左右20px

  margin: 10px 20px;
  

• 3つ指定すると、1つ目が上、2つ目が左右、3つ目が下 ↓の場合、上10px、左右20px、下16px

  margin: 10px 20px 16px;
  

• 4つ指定すると、時計回りに、1つ目が上、2つ目が右、3つ目が下、4つ目が左 ↓の場合、上10px、右20px、下16px、左8px

  margin: 10px 20px 16px 8px;
  

7. コンテンツ作成前半

9. お問い合わせフォーム（前編）