はじめに
100日チャレンジスタートします。
こんにちは、grillon designです。
「100日チャレンジ」と題して、Web制作の学び直しを記録していくことにしました。
しばらくはHTMLを中心に、基礎からじっくり学び直していく予定です。
「今さらHTML？」と思う方もいるかもしれません。
でも私、恥ずかしながら独学でWordPressを触ってきた中で、HTMLの基礎をちゃんと理解していないまま、なんとなく感覚だけでコードをいじってきたんです。
子育てをしながらの独学だったので、正直「動けばOK」くらいの気持ちでやってきました。
でも最近、案件をいただく機会が増えてきて、「基礎ができていないと、応用がきかない」ということを痛感する出来事がありました。
そこで一念発起。
初心に戻って、HTMLを一から学び直すことにしたんです。
なぜ今、学び直そうと思ったのか
きっかけは、ある案件で「なぜこのタグを使うのか」を説明できなかったことでした。
見よう見まねでコードを書くことはできても、根拠を持って選択できていない。
これはWeb制作者として、正直かなり不安なことだと気付いたんです。
ECサイト構築の案件経験を通して、「もっとちゃんと理解して仕事がしたい」という気持ちが強くなりました。
子供たちが将来、私の仕事を見て「まま、ちゃんとしてる」と思ってもらえるように。
そんな想いを込めて、基礎からの学び直しを決意しました。
1日目に学んだこと
そもそもHTMLとは？タグとは？
まずは基本のキから。
「HTMLって何？」「タグって何のためにあるの？」というところを、改めて言葉で説明できるように整理しました。
普段なんとなく使っていた言葉を、ちゃんと理解して使えるようになる。
これだけでも、地味だけど大事な一歩だったなと感じています。
html・head・body・titleタグ
HTML文書の骨組みを囲み、headにはページの情報を、bodyには実際に表示される内容を書く。
そしてtitleタグ。
ブラウザのタブに表示される部分で、SEOにも関わる重要なタグだと知り、「今まで適当に入力してたかも…」と反省しました。
普段WordPressのテーマを触っていると、この構造を意識することがほとんどなかったので、改めて「そうそう、これが土台なんだよね」と再確認できました。
なんとなく使っていたviewportの意味
実は今回、いちばん「なるほど」となったのがここでした。
WordPressのテーマをいじっているとき、head内に必ず出てくる<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>というコード。
正直、今まで「なんかおまじない的なやつ」くらいにしか思っていませんでした。
でも今回学び直して、viewportは「端末によって表示の大きさが変わるから、その設定を最初に入れておく」ためのものだと理解できました。
width=device-widthは表示幅をデバイスの幅に合わせる指定、initial-scale=1.0は最初の拡大率を100%にする指定。
この2つがあることで、スマホで見てもパソコンで見ても、崩れずに正しいサイズで表示されるんですね。
なんとなくコピペしていたコードに、こんなにちゃんとした意味があったのかと、正直びっくりしました。
実際にやったこと
学んだことをインプットするだけでなく、手を動かすことも大事にしました。
• HTMLの解説動画を20〜30分ほど視聴
• VS Codeを開いて作業環境を準備
• index.htmlファイルを新規作成
• HTMLの基本構造（html・head・body）を実際に書く
• h1タグ、pタグを書いてみる
• 保存してブラウザで表示を確認
動画で見た内容を、そのまま自分の手でコードに落とし込む。
このインプットとアウトプットのセットが、想像以上に理解を深めてくれました。
基礎ってこんなに大事なんだと感じたこと
今回改めて基礎を学び直してみて、一番感じたのは「基礎を知っているからこそ、応用ができる」ということ。
これまでは、参考サイトのコードをコピーして、なんとなく動かしていました。
でも、なぜそのタグを使うのか、なぜその属性が必要なのかを理解していると、トラブルが起きたときの対応力が全然違います。
特にviewportのように、意味を知らないまま使っていたコードの正体がわかったときは、ちょっとした達成感がありました。
子育てと同じかもしれません。
目の前のことに対応するだけでなく、「なぜそうするのか」を理解していると、応用が効くようになる。
基礎固めって地味だけど、実はいちばん大切な土台なんだなと、1日目にして早くも実感しています。
100日チャレンジ、これからの予定
このシリーズでは、しばらくHTMLの基礎を中心に、私が学んだことを記録していく予定です。
同じようにWeb制作を独学している方、子育てをしながらスキルアップを目指している方の参考になれば嬉しいです。
明日も引き続きHTMLの基礎について書いていく予定なので、よければまたのぞきに来てくださいね。
一緒に、コツコツ頑張っていきましょう。
コメント