こんにちは、grillon designです。
今日から「Web制作100日チャレンジ」と題して、Web制作の学び直しを記録していくことにしました。
しばらくは、HTMLを中心に基礎からじっくり学び直していく予定です。
「今さらHTML？」と思う方もいるかもしれません。
でも実は私、独学でWordPressを触ってきた中で、HTMLの基礎をきちんと理解しないまま、感覚だけでコードを編集してきたんです。
子育てをしながらの独学だったこともあり、正直なところ、
「とりあえず動けばOK！」
くらいの気持ちで進めていました。
もちろん、それでもある程度はWebサイトを作れます。
でも、最近ありがたいことに案件をいただく機会が増えてきて、ある出来事をきっかけに、
「基礎ができていないと、応用がきかない」
ということを痛感しました。
そこで一念発起。
初心に戻って、HTMLを一から学び直すことにしました。
なぜ今、HTMLを学び直すのか？
きっかけは、ある案件で、
「なぜこのHTMLタグを使うのか？」
と考えたときに、自信を持って説明できなかったことでした。
見よう見まねでコードを書くことはできる。
でも、
- なぜこのタグを使うのか
- なぜこの属性が必要なのか
- この書き方にはどんな意味があるのか
と聞かれると、きちんと説明できない。
「これって、Web制作者として大丈夫なのかな？」
そう思ったんです。
特にECサイト構築などの案件を経験する中で、**「もっとちゃんと理解して仕事がしたい」**という気持ちが強くなっていきました。
せっかくWeb制作を仕事にしていくなら、ただコードを書けるだけではなく、
「なぜこうするのか」を説明できるWeb制作者になりたい。
そう思い、今回の学び直しを決意しました。
そしてもう一つ。
子どもたちが将来、私の仕事を見たときに、
「まま、ちゃんとしてる！」
と思ってもらえるような母親でいたい。
そんな想いも、この100日チャレンジの原動力になっています。
【1日目】HTMLの基本を学び直す
1日目は、まずHTMLの基本からスタートしました。
改めて学んだのは、次のような内容です。
- HTMLとは何か
- HTMLタグとは何か
- html・head・bodyの役割
- titleタグの意味
- viewportの役割
- HTMLの基本構造
どれも一度は触ったことのあるものばかり。
でも今回は、「知っているつもり」ではなく、それぞれの意味を言葉で説明できるようにすることを意識しました。
そもそもHTMLとは？タグとは？
まずは「HTMLって何？」というところから復習。
今まで何となく使っていた「HTML」「タグ」という言葉について、改めて役割を整理しました。
HTMLは、Webページの構造や意味を表すための言語。
そしてタグを使って、
「これは見出しですよ」
「これは文章ですよ」
「ここは画像ですよ」
といった情報をブラウザに伝えていきます。
当たり前のように使っていたことですが、改めて言葉にしてみると、
「ちゃんと理解できていなかったかも……」
と気づくことがたくさんありました。
html・head・bodyの役割を復習
次に、HTML文書の基本的な構造について学び直しました。
大きく分けると、
html→ HTML文書全体を囲むhead→ ページに関する情報を記述するbody→ 実際に画面に表示する内容を書く
という役割があります。
普段WordPressのテーマを編集していると、この構造を一から意識する機会は意外と少ないもの。
だからこそ、改めて基本構造を自分で書いてみることで、
「そうそう、これがWebページの土台なんだ」
と再確認できました。
titleタグって何のためにある？
そして、改めて確認したのがtitleタグ。
titleタグには、Webページのタイトルを指定します。
ブラウザのタブに表示されるほか、検索結果にも関わる重要な要素です。
WordPressを使っていると、テーマやプラグイン側で設定されることも多いので、普段はあまり意識していませんでした。
でも、HTMLを基礎から学び直してみると、
「あれ？今まで結構適当に考えてたかも……」
と反省。
普段何気なく使っているものほど、きちんと意味を理解しておくことが大切なんだなと感じました。
「なんとなく使っていた」viewportの意味
そして今回、個人的に一番「なるほど！」となったのが、viewportです。
WordPressのテーマを触っていると、head内でよく見かけるこのコード。
<meta name="viewport" content="width=device-width, initial-scale=1.0">正直、今までの私は、
「なんかスマホ対応のためのおまじないみたいなもの」
くらいに思っていました。
……すみません。笑
でも今回改めて調べてみると、ちゃんと意味があります。
width=device-widthは、表示領域の幅をデバイスの幅に合わせる指定。
initial-scale=1.0は、ページを最初に表示するときの拡大率を1倍にする指定です。
つまり、スマートフォンなどの端末でWebページを適切なサイズで表示するための重要な設定。
今まで「とりあえず入れておくもの」としてコピペしていたコードにも、
一つひとつちゃんと意味があったんだ……！
と、ちょっと感動しました。
こういう「知っているようで知らなかったこと」を発見できるのも、学び直しの面白さですね。
実際に手を動かしてみたこと
今回は、動画や教材を見るだけで終わらせないことも意識しました。
実際にVS Codeを開いて、HTMLを書いてみます。
1日目にやったことはこちら。
- HTMLの解説動画を20〜30分ほど視聴
- VS Codeを開いて作業環境を準備
index.htmlを新規作成- HTMLの基本構造を書いてみる
h1タグ、pタグを書いてみる- 保存してブラウザで表示を確認
動画で見た内容を、そのまま自分の手でコードにしてみる。
このインプット→アウトプットをセットにするだけで、思っていた以上に理解が深まりました。
「分かったつもり」と「自分で書ける」は、やっぱり違いますね。
HTMLを学び直して感じた「基礎の大切さ」
今回、HTMLの基本を改めて学んでみて、一番感じたのは、
「基礎を知っているからこそ、応用ができる」
ということでした。
これまでは、分からないことがあれば参考サイトを探して、コードをコピーして、なんとなく動かしてみる。
それでも何とかなることはありました。
でも、
「なぜこのタグを使うのか？」
「なぜこの属性が必要なのか？」
という部分まで理解していれば、トラブルが起きたときにも自分で考えて対応できます。
今回viewportについて学んだことも、まさにその一つ。
今までは「おまじない」だったコードが、意味を理解したことで「必要な理由が分かるコード」に変わりました。
この小さな変化が、私にとってはかなり大きかったです。
基礎固めは、Web制作にも子育てにも似ている？
そして、ふと、
「基礎って、子育てにも似ているのかも」
と思いました。
目の前で起きていることに、その場その場で対応するだけではなく、
「なぜこうするのか？」
という理由を理解していると、少しずつ応用ができるようになる。
Web制作も同じで、基礎を知らないまま目の前のコードだけを覚えていくよりも、土台を理解しておいたほうが、その先の学びにつながっていきます。
基礎固めって地味です。
すぐに「できるようになった！」という派手な成果が出るわけでもありません。
でも、
基礎があるから、その先に進める。
1日目から、そんなことを改めて実感しました。
Web制作100日チャレンジ、これからの予定
ということで、Web制作100日チャレンジ1日目はここまで。
しばらくはHTMLの基礎を中心に、学んだことや実際に手を動かした記録を残していこうと思います。
今回の100日チャレンジは、単純に「100日間勉強する」というだけではありません。
私自身が、
「なんとなくできる」から「理由を説明しながらできる」へ。
少しずつステップアップしていくためのチャレンジです。
3人の子育てをしながら、Web制作を学び直す。
きっと、毎日順調に勉強できるわけではありません。
子どもの予定があったり、家事に追われたり、疲れて何もしたくない日もあると思います。
それでも、完璧を目指すのではなく、できることを少しずつ。
このブログでは、そんなリアルなWeb制作の学び直しを記録していきます。
同じように、
- Web制作を独学している方
- HTMLを基礎から学び直したい方
- WordPressからWeb制作を学び始めた方
- 子育てをしながらスキルアップしたいママ
- 未経験からWeb制作に挑戦している方
に、少しでも参考にしてもらえたら嬉しいです。
明日も引き続き、HTMLの基礎を学んでいきます。
100日後、今より少し自信を持ってコードを書ける自分になれるように。
コツコツ頑張ります。
よければ、また覗きに来てくださいね。
コメント