まとめ
― 完成！次のステップへ
完成おめでとうございます！
ゼロからはじめて、HTMLとCSSで自分のWebページを作り上げました。
これはとても大きな一歩です。自信を持ってください。
1. ここまでに学んだこと
全6章でどんなことを学んだか、振り返ってみましょう。
環境を整えた
- XAMPPをインストールした
- VS Codeをインストールした
- htdocsフォルダを知った
しくみを知った
- ブラウザとサーバーの関係
- HTMLとCSSの役割の違い
- 最初のHTMLファイルを作った
HTMLタグを覚えた
- タグ・属性の書き方
- 見出し・段落・リスト
- リンク・画像の貼り方
HTMLを書いた
- 自己紹介ページを作成
- 複数のタグを組み合わせた
- 少しずつ確認しながら書く習慣
CSSの書き方を覚えた
- 色・フォント・余白の指定
- ボックスモデルの考え方
- margin と padding の違い
CSSでデザインした
- 外部CSSファイルを作った
- classを使ってスタイルを当てた
- 自己紹介ページを仕上げた
2. できるようになったこと
このカリキュラムを終えると、次のことができるようになっています。
3. よくある疑問
「暗記できていないけど大丈夫？」
大丈夫です。プロのエンジニアも毎回調べながら書いています。 大切なのは「どんなことができるか」を知っていることです。 細かい書き方は必要なときに調べれば十分です。
「エラーが出てもうまく直せない」
うまく表示されないときのチェックリストです。
- Ctrl + S で保存したか
- F5 で更新したか
- タグの
<>が全角になっていないか - 終了タグ（
</h2>など）を書き忘れていないか - CSSのセミコロン（
;）が抜けていないか - XAMPPのApacheが起動しているか
「どれくらい練習すればうまくなる？」
一番の近道は「作りたいものを作る」ことです。 好きなWebサイトのレイアウトを真似して作ってみる、 家族や友人のプロフィールページを作ってみる、などが効果的です。 失敗しても大丈夫。失敗から学ぶことがほとんどです。
4. 次に学ぶとよいこと
自己紹介ページが作れたら、次のテーマに挑戦してみましょう。 難易度の目安を色でつけています。
Flexbox
要素を横に並べたり、均等に配置したりするCSSの機能。 ナビゲーションバーやカード型レイアウトに欠かせません。
レスポンシブデザイン
スマートフォンでも見やすいページを作るための技術。
@media クエリを使って画面サイズに応じてレイアウトを変えます。
JavaScript
ボタンを押したら動く・入力に応じて表示が変わる、 といったインタラクションをページに加えるプログラミング言語です。
CSSフレームワーク
よく使うデザインがあらかじめ用意されたツール。 Tailwind CSS や Bootstrap が有名で、 少ないコードで本格的な見た目を作れます。
インターネットへの公開
作ったページを世界中からアクセスできるようにします。 GitHub Pages を使えば無料で公開できます。
Gitでバージョン管理
コードの変更履歴を記録し、以前の状態に戻せる仕組みです。 チーム開発の必須ツールで、個人開発でも安心して作業できます。
5. 調べるときに役立つサイト
わからないことがあったとき、次のサイトが参考になります。 どれも無料で読めます。
「CSS 文字 中央揃え」「HTML リンク 別タブ」のように やりたいこと + HTML または CSS で検索すると 答えが見つかることがほとんどです。 調べることも、プログラミングの大切なスキルのひとつです。
最後に
このカリキュラムを最後まで進めてくれた、あなたはすごいです。 「むずかしそう」という気持ちを乗り越えて、実際にコードを書いてページを作った経験は これからの大きな財産になります。
Webの世界はとても広く、学べることが山ほどあります。 でも基礎はすでに身につきました。 次は「作りたいもの」を目標にして、どんどん試してみてください。
ここまで一緒に学んでくれてありがとうございました。