HTML、CSSの復習

web制作ちっくなことから離れていたら、基礎が疎かになっていたので復習

【初心者入門】HTML・CSSでホームページの作り方を解説【Web制作コーディング】

目次

CSSでは色コードにクォーテーションを使用しない

tailwindに慣れて、普通のcssの書き方を少し忘れている

body {
  font-family: "Zen Gothic New", sans-serif;
  color: #ffffff;
  background-color: #16161a;
}

曖昧だったCSS

margin: 0 auto;
display: flex;
justify-content: space-between;

1. margin: 0 auto;
   • 意味: 要素の上下のマージンを0にし、左右のマージンを自動（auto）に設定します。
   • 効果: 要素が水平（横方向）に中央揃えされます。このプロパティは、ブロックレベル要素（例: <div>）に適用されることが多いです。ただし、margin: 0 auto;が効くためには、その要素の幅が明示的に設定されている必要があります。
2. display: flex;
   • 意味: 要素をフレックスコンテナに設定し、その子要素をフレックスアイテムとして扱います。
   • 効果: フレックスボックスレイアウトを使用して、子要素の配置やサイズを柔軟に管理できるようになります。これにより、子要素を横並びにしたり、縦方向や横方向に配置を制御したりすることが可能です。
3. justify-content: space-between;
   • 意味: フレックスコンテナ内の子要素（フレックスアイテム）を、左右の端に均等に配置し、残りのスペースを要素間に均等に分配します。
   • 効果: 最初の子要素が左端に配置され、最後の子要素が右端に配置されます。その他の子要素は、間に均等なスペースを持って配置されます。

.container {
  display: flex;
  align-items: center;
}

.text {
  letter-spacing: 1px;
}