【応用】簡単なWebサイトを作ろう

このレッスンでは、これまで学んだHTML/CSSの知識を組み合わせて、実際の自己紹介ページを作りながら総合的な理解を深めることを目標にします。「HTML CSS 自己紹介ページ 作り方」で調べている方向けです。

ここまで学んだ見出し・段落・リンク・画像・Flexbox・色付けを組み合わせて、簡単な自己紹介ページ(ミニWebサイト)を作ってみましょう。ヘッダー・メインコンテンツ・フッターという、実際のWebサイトによくある構成になっています。

サンプルコードでは、<header>でページ上部のタイトル部分を、<main>でプロフィール情報とリンクを、<footer>でページ下部の著作権表示をそれぞれ構成しています。Flexboxでプロフィール画像とテキストを横並びにし、リンクをボタン風にデザインしている点にも注目してみましょう。

初心者がよくつまずくのが、これだけ多くの要素を組み合わせたときに、どこから手を付けて修正すればよいか分からなくなることです。まずは<style>タグの中の1つのルールだけを変えて、見た目がどう変わるかを1つずつ確認していくのがおすすめの学び方です。

コードを書き換えて、自分だけのページに育てていきましょう。慣れてきたらJavaScriptレッスンと組み合わせると、ボタンを押したら何か起きる、といった動きのあるページも作れるようになります。ここまでの50レッスンで学んだ内容は、実際のWeb制作現場でそのまま活きる基礎知識です。