100日チャレンジも、ついにDAY7。
DAY1～DAY6では、HTMLの基本構造から始まり、見出しや文章、リンク、画像、リスト、表、フォームなど、Webページを作るための基本的なHTMLタグを少しずつ学んできました。
そしてDAY7は、ここで一度立ち止まって、HTMLの総復習をすることにしました。
今回やったことはシンプルです。
これまで学んできたHTMLタグをおさらいしながら、実際にそれらを使ってひとつのWebページを作ってみました。
HTMLを勉強していると、
「タグは分かってきたけど、実際のページではどうやって使うんだろう？」
と思うことがありますよね。
私もまさにそんな状態でした。
そこで今回は、これまで覚えたHTMLタグを実際のページに組み込みながら、HTMLだけでWebページを作ってみることにしました。
そして、次回からはいよいよCSSの学習に進みます。
今回は、HTMLを7日間勉強してきたところで一度整理し、次のステップへ進むための復習回です。
HTMLの基本を7日間学んでみて、まずは総復習
まずは、DAY1～DAY6で学んできたHTMLの内容を振り返ってみました。
今回は細かい説明は省略して、
「こんなHTMLタグを勉強したな」
と思い出すような感覚で整理しています。
これまでに学んだのは、HTMLの基本構造をはじめ、
- 見出し
- 段落
- リンク
- 画像
- リスト
- 表
- フォーム
- その他の基本的なHTMLタグ
などです。
改めて並べてみると、7日間でも意外といろいろなHTMLタグに触れてきたんだなと感じます。
もちろん、まだすべてを完璧に覚えたわけではありません。
それでも、
「このタグはこういうときに使う」
という感覚は、少しずつ身についてきました。
HTMLはタグを一度見ただけでは、なかなか覚えられません。
実際にコードを書いてみて、
「このタグはここで使うんだ」
と体験することで、少しずつ理解できるようになってきた気がします。
初心者のひとこと
「全部覚えないと次に進めない」と思っていたけど、実際には調べながら書いても大丈夫なんだと少しずつ分かってきました。
それぞれのHTMLタグについては、今後また個別の記事で詳しくまとめていけたらと思っています。
HTMLタグを使って実際にWebページを作ってみた
今回のHTML総復習で、一番やってみたかったのが、実際にWebページをひとつ作ってみることでした。
これまで勉強してきたHTMLタグを使って、実際のページを最初から組み立ててみました。
ここに、実際にHTMLだけで作ったWebページの画像を入れています。
今回作ったページには、
- 見出し
- 文章
- リンク
- 画像
- リスト
- 表
- フォーム
など、これまで学んできたHTMLの要素を取り入れました。
そして今回は、あえてCSSを使わず、HTMLだけでWebページを作っています。
そのため、見た目はかなりシンプルです。
でも、装飾がないからこそ、
「HTMLタグそのものが、ページのどの部分を作っているのか」
が分かりやすく、HTMLの総復習にはちょうどよかったと思います。
これまで一つずつ勉強してきたHTMLタグが、実際のWebページの中でどう使われているのかを見ることで、タグ同士の関係も以前よりイメージしやすくなりました。
HTMLだけで作ったWebページはこんな感じ
実際に作ったページを、もう少し細かく見ていきます。
まずは、ページの上部です。
ここでは見出しやリンクなど、これまで勉強してきた基本的なHTMLタグを使っています。
HTMLだけなので、文字が並んでいるシンプルなページですが、
「この部分は見出し」
「ここはリンク」
「ここは文章」
というように、HTMLによってページの構造が作られていることが分かります。
CSSを使うと、このあと文字の色やサイズ、余白、配置などを自由に整えていくことができます。
今はまだ「骨組み」だけの状態です。
そして、ページの下部にはフォームも入れてみました。
ここでは、
label
や
input
など、DAY6までに学んだフォーム関連のHTMLタグを使っています。
実際にページ全体を作ってみることで、
「このタグ単体ではなく、こうやって他のタグと組み合わせて使うんだ」
ということが分かってきました。
HTMLのコードを見返して気づいたこと
Webページを作ったあと、コードを最初から見返してみました。
すると、
「あ、ここは直したほうがいいな」
と思うところがいくつか見つかりました。
勉強しているときは「分かった」と思っていても、実際に自分でコードを書いてみると、意外と抜けている部分があるものです。
今回特に勉強になったのが、
「ページ内リンク」と「フォームの関連付け」
でした。
hrefとidを使ってページ内リンクを設定する
まず、ナビゲーションのリンクです。
最初は、
<a href="#">プロフィール</a>
のように、href="#"としていました。
これでは、今回指定したい「プロフィール」の場所へ移動できません。
そこで、リンク先となる見出しにidを設定しました。
<h2 id="profile">プロフィール</h2>
そして、リンク側を、
<a href="#profile">プロフィール</a>
とします。
これで「プロフィール」というリンクをクリックすると、id="profile"を指定した場所まで移動できます。
つまり、
リンク側のhrefと、移動先のidをつなげる
というイメージです。
実際に書いてみると、
「hrefで移動先を指定して、idでその場所を決める」
という関係が分かりやすくなりました。
ここでちょっと理解が深まった
href="#"と書いていたときは「とりあえずリンクを作るもの」くらいにしか考えていませんでした。
実際にページ内リンクを設定してみて、hrefとidがセットで働くことが分かりました。
labelとinputをfor属性・id属性で関連付ける
もうひとつ復習になったのが、フォームです。
最初はlabelとinputをただ並べているだけでした。
そこで、for属性とid属性を使って、labelとinputをきちんと関連付けました。
<label for="name">名前</label>
<input type="text" id="name">
labelのforと、inputのidに同じ値を指定することで、どの入力欄のラベルなのかを関連付けることができます。
ここでもポイントになるのが、
forとidを同じ値にする
ということです。
実際に書いてみると、
「HTMLは要素を表示するだけではなく、要素同士の関係も適切に設定することが大切なんだな」
と分かりました。
HTMLのid属性は意外と重要だった
今回のHTML総復習を通して、特に印象に残ったのがid属性です。
これまでは、
「idって何に使うんだろう？」
くらいの感覚でした。
でも実際に使ってみると、
- ページ内リンクの移動先を指定する
labelとinputを関連付ける
など、いろいろな場面で使われていることが分かりました。
もちろん、今回学んだ使い方がidのすべてではありません。
CSSを勉強するようになると、さらにidやclassについて考える場面も出てきそうです。
まだ知らない使い方もたくさんありそうですが、今回の復習を通して、id属性がWebページを作るうえで重要な役割を持っていることを実感できました。
HTMLは「実際に書く」ことで少しずつ身についていく
今回、実際にページを作ってみて改めて感じたのは、
やっぱり手を動かしてみることが大事
ということです。
以前よりもHTMLタグの役割は分かるようになりました。
でも、実際にコードを書いてみると、
「ここってどう書くんだっけ？」
と迷うところもありました。
href="#"のままになっていたり、labelとinputがきちんと関連付けられていなかったり。
コードを見返してみると、直したいところがいくつも見つかりました。
でも、これは悪いことではないのかもしれません。
むしろ、
「自分で書いたからこそ、間違いに気づけた」
と思います。
コードを見返して、
「あ、ここ直さないといけないんだ」
と気づく。
そして修正する。
この繰り返しが、HTMLを覚えるうえで大切なんだと思います。
7日間やってみて思ったこと
「覚えてから作る」ではなく、
「作りながら覚える」
今の私には、このやり方のほうが合っている気がします。
家事や育児の合間に少しずつ勉強しているので、正直、
「ちゃんと身についているのかな？」
と不安になることもあります。
それでも今回、最初から最後まで自分でHTMLを書いてWebページを作ってみたことで、少しずつですが積み重なっていることを実感できました。
完璧に覚えていなくても大丈夫。
分からなければ調べて、書いて、間違えて、また直す。
今はその繰り返しで、少しずつ覚えていけばいいのかなと思っています。
HTMLとCSSの違いを少しだけ整理
ここで、次回から学ぶCSSについても少し整理しておきます。
HTMLとCSSは、どちらもWebページを作るために使いますが、役割が違います。
ざっくり言うと、
HTML＝Webページの骨組み
CSS＝Webページの見た目・デザイン
というイメージです。
今回作ったページはHTMLだけなので、かなりシンプルでした。
ここにCSSを使うと、
- 文字の色を変える
- 文字サイズを変える
- 背景色をつける
- 余白を調整する
- 横並びにする
- レイアウトを整える
- ボタンなどをデザインする
といったことができるようになります。
今まで「文字と画像が並んでいるだけ」だったページが、CSSによってどんなふうに変わるのか。
これから実際に試していくのが楽しみです。
HTMLの次はいよいよCSS！Webページの見た目を整える
DAY1～DAY6でHTMLの基本を学び、DAY7で一度総復習。
これで、Webページの「骨組み」を作るための基本的なHTMLについて、少し整理することができました。
そして次回からは、いよいよCSSに進みます。
HTMLで作ったシンプルなページに、
- 色
- 文字サイズ
- 余白
- レイアウト
- デザイン
などを加えて、少しずつ見た目を整えていく予定です。
HTMLだけではシンプルだったページが、CSSを使うことでどんなふうに変わるのか。
今から楽しみです。
そして、個人的にはここからがさらに楽しみです。
なぜなら、HTMLを勉強しているときは、
「Webページを作っているというより、文字を並べている感じ」
だったからです。
CSSを使えるようになれば、
「これ、Webサイトっぽくなってきた！」
という感覚も出てくるのかなと思っています。
まとめ｜HTML初心者こそ実際にページを作って復習する
DAY7では、DAY1～DAY6で学んだHTMLを総復習しました。
今回改めて感じたのは、HTMLはタグを暗記するだけではなく、実際にWebページを作りながら覚えていくことが大切だということです。
今回学んだことをまとめると、
- HTMLの基本構造やタグを総復習した
- 学んだHTMLタグを使って実際にWebページを作った
hrefとidを使ったページ内リンクを確認したlabelとinputをforとidで関連付けたid属性の役割を実際に使いながら確認した- 実際にコードを書くことで、HTMLタグの役割をより理解できた
- HTMLとCSSの役割の違いを整理した
という内容でした。
まだHTMLを完璧に理解できたわけではありません。
でも、7日前には分からなかったことが、少しずつ分かるようになってきています。
そして何より、
「自分でHTMLを書いて、ひとつのWebページを作れた」
ということが、今回一番大きな収穫でした。
ここまで学んできたHTMLを土台にして、次はCSSへ。
HTMLでWebページの骨組みを作り、CSSで見た目を整える。
これから少しずつWeb制作らしくなっていくのが楽しみです。
100日チャレンジ、DAY8もコツコツ頑張ります！
コメント