HTML/CSSの勉強を始めます！

Fammコンペのデザインを考えながらも、今日から、HTML/CSSの勉強を始めようと思います。
いやその…コンペの募集要項をよく読んでいたら、コーディングを意識したカンプになっているかどうかが重視されると書いてあって…。そう言えば課題の時もコーディングのことを何にも考えずに作っちゃったカンプ、難しすぎて完成させられなかったなって…。

やっぱり基礎って大事ですよね。

教材はこれ！

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内 直人 ] 価格：2,420円（税込、送料無料) (2024/10/5時点) 楽天で購入

Fammスクール受講生だったとき、勉強に必要なマウスや教材の購入代金（※教材は3冊まで）が戻ってくるというサービスがあり、それを利用して買ったものです。スクール生だったときは課題だけで精一杯でこの教材まで進めませんでしたが、Photoshopの使い方もだいぶ慣れてきたし。Famｍの課題もコーディングが面白かったなーって思い出して。

やってみようと思います！

まずはワーク用のデータのダウンロードから。
VSコードの使い方とか、ファイルをhtml形式で保存してChromeで開くとか、タグの説明とか、この辺りはFammでやったので飛ばして…

教科書どおりにコツコツマークアップしていきます。Fammの講座の時も思ったのですが、初めはテキストがみっちり詰まっただけの文書が、マークアップしていくうちにどんどん変わっていくのが醍醐味ですねえ。楽しいなあ。

VSコードは始まりのタグを打つと閉じのタグをさっと出してくれるし、打ち始めたら次の指示を選択肢で出してくれるし、痒い所に手が届く気遣いが素敵です。銀縁メガネの初老の執事を妄想できますね。

ここまでできたよー！というのをスクショしようかなって思ったんですけど、教科書の初めに、「他の目的での使用はしないでください」って書いてあります…。残念…。ほとんど観に来る人もいない弱小ブログだし、私の勉強のアウトプットのためだし…ってちょっと思ったんですけど、やっぱりここは載せない方が良いと思います。残念です。

で、今回初めてきちんと認識したんですが、<h1>〜<h6>の見出しタグ、数字を飛ばしちゃダメなんですね…！Fammでも先生がおっしゃっていたような気がしますが、今回初めてきちんと理解しました…。例えば<h2>は⚪︎ptである、みたいに、絶対的なサイズが決まっているわけではなくて、そのページ内での相対的なサイズが決まるということなんですね。なるほどなるほど、だからFammで作ったカンプをコーディングしようとしたときにデザインが崩れたりしたのかな。

やっぱ基礎って大事ですね！

私、Fammに入る前に勉強して初めて簿記3級の資格を取ったんですけど、一回落ちて、悔しくてノートを作ってきちんと基礎を書き出したら87点取れて合格しましたので、勉強において基礎を学んでそれをノートなどにアウトプットするのってほんと大事なんだなーって実感しました。

それで今回もこのブログでアウトプットしよーと思って始めたんですけど、バナートレースと違って紙の本での勉強だと、再配布みたいな位置付けになってしまうのが困りものです。

今日は始めたのが遅かったので、p.51（リスト作成）までで終了。

一回FammとProgateでざっとhtmlを学んでから、もう一度初心者向けの教科書で学び直しているので、「あーあれってこういうことだったんだ！」って目が開く感じがしてとっても面白いです。

今日はリストの違いを学びました。

• <ul></ul>は順番が変わっても構わないリスト（デフォルトだと「・」が表示される）
• <ol></ol>は順番が変わると困るリスト（デフォルトだと数字が表示される）
• <dl></dl>は項目名とその説明がセットになったリスト

なるほど〜！

いやFammでも教えてもらっていたんでしょうけど、そこまでちゃんと頭に入ってなかった…！

アウトプットも大事だけど、復習も大事ですねえ。Fammコンペのデザインを考えつつ、明日もHTMLの勉強しよーっと。

で、↑まで書いて一度投稿準備をしたんですけど…アイキャッチがないと寂しいので、canvaのテンプレートを使ってアイキャッチ画像を作ってみました。テンプレート見てるとアイキャッチ、めちゃくちゃたくさんあるんですね…みなさんこんなにきちんとアイキャッチ画像を作っていらっしゃるなんて…すごい…。

ブログももっと綺麗に素敵にしたいなあ。