📘 CSS初心者のみかおばです！
この回は、
新しいことを学ぶ回ではありません。
これまで「CSS初心者ノート」で出てきた内容を、
必要なときに戻れるように整理したまとめ回です。
全部を覚える必要はありません。
「迷ったときに戻る場所」として使ってもらえたら十分です。
📘 迷ったらここから
CSSを触っていて
「どこから見返せばいいかわからない」ときは、
まずはこのあたりから戻るのがおすすめです。
- 第1回：CSSってなに？
HTMLとの違い、CSSの役割、基本の書き方 - 第7回：ボックスモデル基礎
margin / padding / border - 第9回：幅・高さ・中央配置
width / height / margin: auto - 第15回：セレクタ応用テクニック
子孫セレクタ、疑似クラス（first-child など）
※ この4回は、
「CSSが効かない」「配置がうまくいかない」ときに
戻りやすい回です。
🔰 よく使うCSSプロパティ一覧
ここでは、このシリーズで出てきた
よくあるCSSの指定をまとめています。
※以下はそのまま使える例です。必要なところだけ参考にしてください。
🎨 文字まわり
文字の色・大きさ・太さ・行間・中央寄せを指定
color: #333;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
text-align: center;
📦 余白・ボックス
外側と内側の余白、枠線、角丸をまとめて指定
margin: 20px;
padding: 16px;
border: 1px solid #ccc;
border-radius: 8px;
📐 サイズ・配置
幅・高さ・中央寄せの基本
width: 300px;
height: 150px;
margin: 0 auto;
🧱 背景
背景色をつける
background-color: #f9f9f9;
🔗 リスト・リンク
リストの点を消す／リンクの下線を調整
list-style-type: none;
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
🏷 クラス・ID・セレクタ
どこにCSSを当てるかを指定する書き方
.note {
color: red;
}
#main {
background-color: #eee;
}
.box p {
color: blue;
}
🧠 疑似クラス
li:first-child { }
li:last-child { }
li:nth-child(2) { }
a:hover { }疑似クラスは、
👉 「どの要素の、どの位置・どんな状態か」 を指定するときに使います。
:first-child→ 最初の要素:last-child→ 最後の要素:nth-child(2)→ 上から2番目の要素:hover→ マウスを乗せたときの状態
※ クラス名ではないけれど、
状態や位置を指定できる特別な書き方だと思ってOKです。
🎞 アニメーション（基本）
transition: 0.3s;
hover などで見た目が変わるときの「変化の速さ」を指定します。
急に切り替わらず、ふわっとなめらかに変化させたいときに使います。
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* 使うときは animation で呼び出します */
.fade {
animation: fade 1.5s infinite;
}
@keyframes→ アニメーションの動きの設計図animation→ その動きをどの要素に使うかを指定
※ infinite は「無限に繰り返す」という意味です。
※ 見た目に動きや変化をつけたいときに使います。
📦 とりあえず使えるカード完成形
.card {
background-color: #fff; /* 背景を白にする */
padding: 16px; /* 中に余白をつくる */
border-radius: 8px; /* 角を少し丸くする */
border: 1px solid #ddd; /* 薄い枠線をつける */
}
一番よく使うカードUIの基本形です 👍
ブログの囲み・説明ボックス・まとめ表示など、
「困ったらこれをコピペ」でOKな定番スタイル。
📎 そのほかの回について
文字装飾・背景・リスト・カードUI・アニメーションなど、その他の内容は各回で扱っています。
必要なところだけ、気になったタイミングで拾い読みしてください。
（※このシリーズの全記事は、「CSS初心者ノート」一覧ページにまとめています）
🖥 コードを試したい人へ
この記事や、これまでの回に出てきたCSSコードは、
実際に書いて表示を確認すると理解しやすくなります。
HTMLとCSSファイルを用意してブラウザで確認する方法のほか、
ブラウザ上でそのまま試せるサービスもあります。
- VS Code：HTML / CSSファイルを作って確認
- CodePen：ブラウザだけでコードと表示結果を確認
👉 CodePen
https://codepen.io/
※ このシリーズに出てきたコードは、
そのまま貼って動作確認できます。
✨ 最後に
ここまで
「CSS初心者ノート」 シリーズを読んでいただき、
ありがとうございました。
この最終回は、
全部を理解するためのまとめではありません。
- 「あとで戻る場所」
- 「迷ったときの目印」
として使ってもらえたら嬉しいです。
CSSは、
私もまだまだ迷いながらですが、
必要になったときに少しずつ触れていけたらいいかなと思っています。
このノートが、
そのときの参考になれば幸いです。
迷ったら、
また 「ブログの進め！」 を開いてみてください。
これからもよろしくお願いします。
HTMLやCSSの基礎をもっと学びたい方におすすめ👇
コメント