CSSには多くのプロパティがありますが、ここでは特によく使われる基本的なプロパティをまとめます。これらを押さえると、幅広いスタイルの設定が可能になります！
1. レイアウト関連のプロパティ
display：要素の表示形式を設定します。block、inline、flex、gridなど、異なる表示形式が選べます。
position：要素の配置方法を指定します。static、relative、absolute、fixed、stickyなど。
top、right、bottom、left：positionプロパティがrelativeやabsoluteの場合に要素の位置を指定します。z-index：要素の重なり順序を指定します。大きい値ほど前面に表示されます。
2. ボックスモデル関連のプロパティ
width、height：要素の幅と高さを指定します。margin：要素の外側の余白を設定します。margin: 10px 20px;のように書いて上下左右の余白を設定できます。
padding：要素の内側の余白を設定します。border：要素の枠線を設定します。border: 1px solid #000;のように、幅・線の種類・色を指定します。
box-sizing：ボックスサイズの計算方法を指定します。border-boxに設定すると、paddingやborderを含めてサイズが計算されるため、レイアウトが崩れにくくなります。
3. フォント・テキスト関連のプロパティ
font-size：フォントのサイズを指定します。font-family：使用するフォントの種類を設定します。font-family: Arial, sans-serif;のように複数の候補を指定します。
color：文字の色を設定します。font-weight：文字の太さを設定します。boldや数値で指定可能です。line-height：行間を指定します。text-align：テキストの水平揃えを指定します（left、center、right）。text-decoration：テキストの装飾（下線など）を指定します。
4. 背景関連のプロパティ
background-color：要素の背景色を設定します。background-image：要素の背景画像を設定します。background-size：背景画像のサイズを指定します（cover、containなど）。background-position：背景画像の位置を指定します。background-repeat：背景画像の繰り返し方法を指定します（repeat、no-repeatなど）。
5. アニメーション関連のプロパティ
transition：要素の状態が変化する際のアニメーションを設定します。- 例：
transition: all 0.3s ease;
- 例：
transform：要素を変形します（回転、拡大縮小、移動など）。- 例：
transform: rotate(45deg);
- 例：
animation：より複雑なアニメーションを設定します。
6. Flexbox関連のプロパティ
display: flex：要素をFlexboxのコンテナにします。justify-content：横方向の配置方法を指定します（flex-start、center、space-betweenなど）。align-items：縦方向の配置方法を指定します（flex-start、center、stretchなど）。flex-direction：配置の方向を指定します（row、columnなど）。
7. Grid関連のプロパティ
display: grid：要素をGridコンテナにします。grid-template-columns、grid-template-rows：列・行のレイアウトを設定します。gap：グリッドの要素間の間隔を設定します。
8.それ以外でよくつかうもの
border-radius：要素を角丸にします。ボタンを作ったりする時によく使います。max-width：最大幅が〜pxと指定する時に使います。レスポンシブレイアウトを作成する時によく使われます。
これらのプロパティを組み合わせることで、さまざまなスタイルやレイアウトを簡単に作成できます。まずは基本的なプロパティから試して、少しずつ応用してみてください！
