サイト制作の勉強法:初級編
10:15
21再生
今日は「サイト制作の勉強・初級編」というテーマでお話しします。
サイト制作を仕事にしていきたい人に向けて、当時僕が実践していた勉強法をご紹介します。
HTMLとCSSの基礎を学ぶ
サイト制作の最初のステップは、HTMLとCSSの学習です。
HTMLは、文字や画像をWebページに表示するための言語で、各要素には決まった「タグ」があります。例えば、文章には<p>タグ、画像には<img>タグ、リストには<ul>タグを使います。こういったタグを正しく使うことが、Web制作の第一歩です。
タグは自由に組み合わせることもできますが、適切な使い方をしないとSEO(検索エンジン最適化)に悪影響を与えてしまいます。Googleなどの検索エンジンは、クローラーというロボットがWebサイトを巡回し、構造や情報を収集します。このとき、HTMLのタグが適切に使われていないと、クローラーが正確に情報を把握できず、検索結果で上位に表示されにくくなってしまいます。
CSSで装飾を学ぶ
CSSは、文字や画像にデザインを加えるための言語です。文字の色を変えたり、サイズを調整したり、画像を重ねたりといった装飾が可能です。
たとえば、文字色を変える場合はcolor: red;と指定します。このようなCSSのプロパティを覚えていく必要がありますが、覚える項目は非常に多く、最初は苦労するかもしれません。
効果的な学習法と実践
僕が勉強していた時は、YouTubeの「フロントエンドチャンネル」という初心者向け動画を使って学習していました。基礎的な内容やわかりづらいCSSのプロパティなどを丁寧に紹介してくれるので、まずはそれを見て、各タグやプロパティの役割を言葉で説明できる程度に理解するのがオススメです。
動画で学んだあとは、実際にWebサイトを作ってみるのが効果的です。最初から全てを覚えようとせず、「作りながら覚える」スタンスが大切です。
作るサイトは、自分が印象に残っているサイトや、デザインが素敵だと思うサイトで構いません。その際は、「模写コーディング」と呼ばれる、実際のサイトを再現する練習をするといいでしょう。特に、「ピクセルパーフェクト(少しのズレもない精密な再現)」を意識して作ることで、実務でも通用する力が身につきます。
デザインの理解も大切
現場では、デザイナーが作ったデザインをもとにコーダーが制作することが多いため、デザイン通りに正確に再現する力も重要です。僕も最初はうまくできずに、先輩に「ここ全然違うよ」とよく指摘されました。なので、余白や配置など細かい部分まで意識して練習するのが大切です。
また、デザインの考え方を学んでおくと、より深く制作に取り組めるようになります。
最後に
とにかく大切なのは、諦めずに続けること。3〜4つのサイトを作るうちに、自然とタグやCSSも身につきます。基礎を固めたら、次のステップへ進みましょう。
今日はこの辺で終わります。
皆さん、良い一日をお過ごしください!
それでは、また次の配信でお会いしましょう。今日も行ってらっしゃい!
サイト制作を仕事にしていきたい人に向けて、当時僕が実践していた勉強法をご紹介します。
HTMLとCSSの基礎を学ぶ
サイト制作の最初のステップは、HTMLとCSSの学習です。
HTMLは、文字や画像をWebページに表示するための言語で、各要素には決まった「タグ」があります。例えば、文章には<p>タグ、画像には<img>タグ、リストには<ul>タグを使います。こういったタグを正しく使うことが、Web制作の第一歩です。
タグは自由に組み合わせることもできますが、適切な使い方をしないとSEO(検索エンジン最適化)に悪影響を与えてしまいます。Googleなどの検索エンジンは、クローラーというロボットがWebサイトを巡回し、構造や情報を収集します。このとき、HTMLのタグが適切に使われていないと、クローラーが正確に情報を把握できず、検索結果で上位に表示されにくくなってしまいます。
CSSで装飾を学ぶ
CSSは、文字や画像にデザインを加えるための言語です。文字の色を変えたり、サイズを調整したり、画像を重ねたりといった装飾が可能です。
たとえば、文字色を変える場合はcolor: red;と指定します。このようなCSSのプロパティを覚えていく必要がありますが、覚える項目は非常に多く、最初は苦労するかもしれません。
効果的な学習法と実践
僕が勉強していた時は、YouTubeの「フロントエンドチャンネル」という初心者向け動画を使って学習していました。基礎的な内容やわかりづらいCSSのプロパティなどを丁寧に紹介してくれるので、まずはそれを見て、各タグやプロパティの役割を言葉で説明できる程度に理解するのがオススメです。
動画で学んだあとは、実際にWebサイトを作ってみるのが効果的です。最初から全てを覚えようとせず、「作りながら覚える」スタンスが大切です。
作るサイトは、自分が印象に残っているサイトや、デザインが素敵だと思うサイトで構いません。その際は、「模写コーディング」と呼ばれる、実際のサイトを再現する練習をするといいでしょう。特に、「ピクセルパーフェクト(少しのズレもない精密な再現)」を意識して作ることで、実務でも通用する力が身につきます。
デザインの理解も大切
現場では、デザイナーが作ったデザインをもとにコーダーが制作することが多いため、デザイン通りに正確に再現する力も重要です。僕も最初はうまくできずに、先輩に「ここ全然違うよ」とよく指摘されました。なので、余白や配置など細かい部分まで意識して練習するのが大切です。
また、デザインの考え方を学んでおくと、より深く制作に取り組めるようになります。
最後に
とにかく大切なのは、諦めずに続けること。3〜4つのサイトを作るうちに、自然とタグやCSSも身につきます。基礎を固めたら、次のステップへ進みましょう。
今日はこの辺で終わります。
皆さん、良い一日をお過ごしください!
それでは、また次の配信でお会いしましょう。今日も行ってらっしゃい!
本好きエンジニアラジオ
ケイ
- 00:201.
挨拶
- 09:562.
サイト制作の勉強法:初級編
コメント

感想・質問・応援メッセージを書こう
これからエンジニアを目指す方向けの放送もされるというこ事で、私と同じだったので嬉しくてコメントさせて頂きました😆
お互い頑張りましょう💪🔥
いゃ〜、楽しんでくれるエンジニアさん、増やしたいですね〜✨
コメントありがとうございます☺️
エンジニアさん増やしていきたいですね❗️✨
お互い頑張りましょうね‼^^