やっほー！カラフルスクール編集部だよ！👋 大学の課題、サークル活動、バイト…毎日色々忙しいよね！ 特にクリエイター志望のみんなは、「Webサイト作りたいけど、何から始めたらいいか分からない…」って悩んでない？ 🥺
「HTML？CSS？呪文かな？💀」って思ってるそこの君！大丈夫！この記事読めば、3日でマジでWebサイト作れるようになるから！🚀
※この記事にはPRが含まれます
実はね、Webサイト作れるとマジで世界変わるんだよ！😳
- 自分のポートフォリオサイト作って就活で圧倒的有利に！
- サークルのWebサイト作って仲間を増やせる！
- 趣味のブログ作って情報発信できる！
すごいよね！✨
実際、Web制作のスキルってめちゃくちゃ需要あるんだよね！経済産業省の調査によると、IT人材は2030年には最大で約79万人も不足する見込みなんだって！😱 つまり、今からWebの勉強を始めれば、将来食いっぱぐれる心配なし！😎
この記事では、Webサイト作りの基本中の基本、HTMLとCSSを、大学生向けに超分かりやすく解説していくよ！一緒に頑張ろう！🔥
HTML/CSSって何？ 超ざっくり解説！
HTMLとCSS…なんかアルファベットがいっぱいで、見るだけで眠くなる？😴 大丈夫！超ざっくり説明するね！
HTML：Webサイトの骨組みを作る！
HTMLは、Webサイトの「骨組み」を作る言語！🏠 例えば、Webサイトに表示する文字、画像、リンクなどを指示する役割があるんだ。
HTMLは、タグっていう特別な記号で命令を書くんだ。例えば、見出しを作るには<h1>タグ、段落を作るには<p>タグを使うよ！
例：
<h1>ようこそ！</h1>
<p>これは段落です。</p>これでWebサイトに「ようこそ！」っていう見出しと、「これは段落です。」っていう文章が表示されるんだ！簡単でしょ？😉
CSS：Webサイトをオシャレに着飾る！
CSSは、Webサイトの「見た目」をデザインする言語！👗 例えば、文字の色、大きさ、背景色などを変更できるんだ。
CSSを使うと、Webサイトを自分好みにカスタマイズできる！例えば、文字をカラフルにしたり、背景に画像を設定したり、ボタンを可愛くしたり…可能性は無限大！🎨
例：
h1 {
color: blue;
font-size: 32px;
}
p {
color: green;
}これで、見出しが青色で32pxの大きさ、段落が緑色になるんだ！CSSを使うと、Webサイトの見栄えがグッと良くなるよね！😍
3日間でWebサイトを作る！超簡単ロードマップ
よし！HTMLとCSSの基本が分かったところで、3日間でWebサイトを作るロードマップを紹介するね！✨
1日目：HTMLの基本をマスター！
まずはHTMLの基本をマスターしよう！以下のステップで進めてみてね！
- HTMLの基本構造を理解する（
<html>,<head>,<body>など） - 基本的なタグを覚える（
<h1>~<h6>,<p>,<img>,<a>など） - 実際にコードを書いて、Webブラウザで表示してみる！
おすすめの学習サイトは、Progate！🎮 イラスト付きで分かりやすいから、初心者でも楽しく学べるよ！
2日目：CSSの基本をマスター！
HTMLの次は、CSSの基本をマスターしよう！以下のステップで進めてみてね！
- CSSの基本構造を理解する（セレクタ、プロパティ、値）
- 基本的なプロパティを覚える（
color,font-size,background-color,margin,paddingなど） - HTMLとCSSを連携させて、Webサイトを装飾してみる！
CSS Grid Layoutを使えば、Webサイトのレイアウトを自由自在に操れるようになるよ！💪
3日目：オリジナルWebサイトを作ってみよう！
HTMLとCSSの基本をマスターしたら、いよいよオリジナルWebサイト作りに挑戦！テーマは自由！自分のポートフォリオサイト、サークルの紹介サイト、趣味のブログ…なんでもOK！
最初は完璧じゃなくてOK！まずは完成させることを目標にしよう！🎨
Webサイトを公開するには、レンタルサーバーを借りる必要があるけど、最初は無料のホスティングサービスを使ってみるのもありだよ！例えば、GitHub Pagesとか！
さらにレベルアップ！ おすすめ学習リソース
「もっとWeb制作スキルを磨きたい！」って思ったら、以下のリソースをチェックしてみてね！👀
オンライン学習プラットフォーム
- Udemy: Web制作に関する様々なコースがあるよ！セールを狙えば、お得に受講できる！
- ドットインストール: 3分動画でサクッと学べる！
参考書
- 『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』: 初心者でも分かりやすい解説！
- 『確かな力が身につくJavaScript「超」入門』: JavaScriptも学んで、Webサイトに動きを加えよう！
YouTubeチャンネル
- 侍エンジニア塾: プロのエンジニアが分かりやすく解説！
- KENTA / Webクリエイター: 最新のWeb技術を学べる！
まとめ：Webサイト作りはマジで楽しい！
HTMLとCSSをマスターすれば、自分のアイデアを形にできる！✨ Webサイト作りは、クリエイティブなスキルを磨く最高の手段だよ！
最初は難しく感じるかもしれないけど、諦めずに挑戦すれば必ずできるようになる！💪
この記事を参考に、Webサイト作りに挑戦して、クリエイターとしての第一歩を踏み出そう！🚀
カラフルスクールは、頑張るみんなを応援してるよ！🌈
