ProgateのHTML & CSS「道場 中級」コースを無事クリアしました！
今回はLesson 2〜4の中で詰まった点、気づいたこと、成長を感じた瞬間を記録として残しておきます。
✅ 詰まったポイントと解決メモ
Facebookボタンのアイコン追加
<a href="#" class="btn facebook">
<span class="fa fa-facebook"></span>
Facebookで登録
</a>
→ <span>タグを追加することでFacebookのロゴを表示できるようになる。
これは何度やっても何で出てくるんだろうといつも驚いてしまう！
metaタグの意味
<meta charset="utf-8">
→ charset=”utf-8″は、国際標準の文字コード。これがないと日本語が文字化けしてしまう。
勝手に日本語になるとずっと思ってた。国際基準の文字コードがあるなんて！
文字の見た目調整
letter-spacing：文字の間隔を調整text-align: center;：文字を中央寄せmargin: 0 auto;：要素そのものを中央に配置
実際にProgateで見た目がかなりスッキリしたよね
ボタンの透明度（ホバー時）
.btn:hover {
opacity: 1;
}
→ 普段は薄く、カーソルを合わせた時にしっかり表示する。
カーソル合わせるとボタンの色が変わるのを見てなんだか嬉しくなりました。
なんでもないことかもしれないけど、少し成長してるような感じがして！
クラス名の凡ミス
.text-contentsのwidthを80pxにしてしまっていて、見た目が崩れていた →80%に修正。.messageに不要なカッコがついていてボタンが表示されなかった → 修正して表示。.messageに指定されていたcolorを削除したら、意図した色になった。
ずっとコードを見直してたけど、『ｐｘ』と『％』の違いに全然気づけなくて、目が痛くなりました。
クラス名に関する学び
class名は自由に決めていいが、間違えると意図しないレイアウトになる。.lesson-iconにposition: relative;を指定して、子要素でabsoluteを活かす。
アイコンを四角の枠の中心に持ってくることが出来たよね。
💡 道場中級での気づき
pxと%の違いだけでも、見た目が大きく変わる。colorなどのスタイルは、他の要素の影響を受けていることがある- 合格表示が出ても、自分の目で「見本と合っているか」を確認することが大事。
見本と全然違うのに、『できた』ボタン押したら『コングラッチュレーション』て出てきたね笑
🎉 成長を感じたこと
- footer部分は答えを見ずに自力で完成できた！
- 自分なりに試行錯誤して、最終的に見本と完全に一致させられた。
- 間違っていても「どこが違うか」を自分で探し出せるようになった。
🌱 今の気持ち
CSSの細かい指定やクラス名の扱いにはまだ迷いがありますが、
確実に「0 → 1」に進歩しています。
いつかWeb制作に関わる仕事ができたらいいなと思っています。
次は「道場 上級」へ向けて、また地道にコツコツがんばります！
コメント