こんにちは、かたすけです！
「Web制作、何から始めたらいいの？」そう思っているあなたへ。今回は、HTMLとCSSの基本的な知識を使って、あなただけのオリジナル自己紹介ページを作るプロジェクトに挑戦しましょう！
このプロジェクトを通して、Webページの「骨組み」と「見た目」を作る楽しさを実感できるはずです。
このプロジェクトで学ぶこと
- HTMLでWebページの構造を作る方法
- CSSでページの見た目をデザインする方法
- 画像やリンクを配置する方法
さあ、あなたのWeb制作の第一歩を一緒に踏み出しましょう！
完成イメージを見てみよう！
まずは、今回作る自己紹介ページがどのような見た目になるか見てみましょう。シンプルながらも、あなたの情報を伝えるのに十分なデザインです。
（※画像はイメージです。ご自身の情報に置き換えて、さらに魅力的なページにしていきましょう！）
ステップ1：ファイルの準備をしよう
まず、作業を始める前に必要なファイルを用意しましょう。
- 新しいフォルダを作成する デスクトップなど、分かりやすい場所に「my-profile-page」という名前の新しいフォルダを作りましょう。
- プロフィール画像を用意する フォルダの中に、あなたのプロフィールに使う画像を1枚用意してください。ファイル名は「profile.jpg」に変更しておくとスムーズです。 （※もし画像がない場合は、一時的に別の画像ファイル名にしてもOKです。）
ステップ2：HTMLでページの骨組みを作ろう (index.html)
HTMLは、Webページの「内容」と「構造」を定義する言語です。見出し、段落、画像、リンクなど、どんな情報をどこに表示するかをHTMLで記述します。
VS Codeなどのテキストエディタを開き、以下のコードをコピー＆ペーストして「index.html」という名前で、先ほど作った「my-profile-page」フォルダの中に保存してください。
以下のコードの役割を、行ごとに確認していきましょう！！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>かたすけの自己紹介ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>かたすけです！</h1>
<p>「Web制作の困った」を解決するブログを運営しています。</p>
</header>
<main>
<section class="profile">
<h2>プロフィール</h2>
<img src="profile.jpg" alt="かたすけのプロフィール画像" class="profile-img">
<p>
大学時代にWeb制作を学び始めました。<br>
最近は、AIと協力してWebサイトを作ることに夢中です。<br>
趣味は野球観戦で、特に好きなチームは○○です。
</p>
</section>
<section class="links">
<h2>リンク</h2>
<ul>
<li><a href="https://katasuke-blog.jp" target="_blank">かたすけのWebづくりブログ</a></li>
<li><a href="https://twitter.com/katasuke" target="_blank">X（旧Twitter）</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2025 かたすけ</p>
</footer>
</body>
</html>
コードのポイント解説
<head>タグ: ページには表示されないけれど、Webブラウザや検索エンジンに伝える情報（ページのタイトルやCSSファイルの読み込みなど）を書く場所です。<title>: ブラウザのタブに表示されるページの名前です。<link rel="stylesheet" href="style.css">: 次のステップで作成する「style.css」ファイルを読み込んでいます。これでHTMLにCSSのスタイルが適用されます。
<body>タグ: 実際にWebページに表示されるすべての内容（見出し、文章、画像など）を書く場所です。<header>: ページのヘッダー部分（一番上の部分）です。サイトのタイトルなどを入れます。<main>: ページの主要なコンテンツを入れる場所です。- class=”～”のように書くことで、タグにクラス名を付与することができます。これによって、CSSでの見た目の操作がしやすくなります。
<section>: コンテンツを意味のあるグループに分けるために使います。ここでは「プロフィール」と「リンク」の2つのセクションに分けています。<h2>: 中見出しです。<p>: 段落（文章）です。<br>を入れると改行されます。<img>: 画像を表示するためのタグです。srcで画像ファイルの場所を、altで画像が表示されなかった場合の代替テキストを指定します。<ul>と<li>: リスト（箇条書き）を作るためのタグです。<a>: リンクを作るためのタグです。hrefでリンク先のURLを、target="_blank"で新しいタブで開くように指定します。
<footer>: ページのフッター部分（一番下の部分）です。著作権表示などを入れます。
ひとまず、この状態でindex.htmlファイルをダブルクリックしてブラウザで開いてみましょう。
まだスタイルが適用されていないので、文字や画像がただ羅列されているだけに見えるはずです。でも、これがWebページの基本的な形です！
ステップ3：CSSでページの見た目をデザインしよう (style.css)
CSSは、HTMLで作った骨組みに「色」や「形」、「配置」といった装飾を施す言語です。
VS Codeなどのテキストエディタを開き、以下のコードをコピー＆ペーストして「style.css」という名前で、先ほど作った「my-profile-page」フォルダの中に保存してください。
以下のコードについても、行ごとに役割を確認していきましょう！！
/* 全体のフォントや背景色を指定 */
body {
font-family: sans-serif; /* 文字の種類（フォント）を一般的なものに設定 */
background-color: #f0f0f0; /* ページの背景色を薄いグレーに */
color: #333; /* 文字の色を濃いグレーに */
line-height: 1.6; /* 行の高さを調整して読みやすく */
margin: 0; /* ページの外側の余白をなくす */
padding: 0; /* ページの内側の余白をなくす */
text-align: center; /* ページ全体の文字を中央寄せに */
}
/* ヘッダーのスタイル */
header {
background-color: #007bff; /* ヘッダーの背景色を青に */
color: white; /* ヘッダー内の文字色を白に */
padding: 2rem 0; /* 上下左右の余白を設定（上下に大きく、左右はなし） */
}
header h1 {
font-size: 2.5rem; /* 見出しの文字サイズを大きく */
margin: 0; /* 見出しの外側の余白をなくす */
}
/* メインコンテンツのスタイル */
main {
max-width: 800px; /* メインコンテンツの最大幅を800pxに制限 */
margin: 2rem auto; /* 上下に2rem、左右は自動で中央寄せに */
padding: 0 1rem; /* 左右に少し内側の余白を設定 */
}
/* プロフィールセクションのスタイル */
.profile {
background-color: white; /* プロフィール背景色を白に */
padding: 2rem; /* 内側の余白を大きめに */
border-radius: 10px; /* 角を丸くする */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影をつけて立体感を出す */
margin-bottom: 2rem; /* 下に余白 */
}
.profile-img {
width: 150px; /* 画像の幅を150pxに */
height: 150px; /* 画像の高さを150pxに */
border-radius: 50%; /* 角を50%丸めて円形にする */
object-fit: cover; /* 画像がはみ出ないように中央を切り取る */
margin-top: 1rem; /* 上に余白 */
}
/* リンクセクションのスタイル */
.links ul {
list-style: none; /* リストの点（・）を消す */
padding: 0; /* 内側の余白をなくす */
}
.links li {
margin-bottom: 1rem; /* 各リスト項目の下に余白 */
}
.links a {
display: block; /* リンク全体をクリックできるようにブロック要素にする */
background-color: #e9ecef; /* リンクの背景色を薄いグレーに */
color: #007bff; /* リンクの文字色を青に */
text-decoration: none; /* リンクの下線をなくす */
padding: 0.8rem; /* 内側の余白 */
border-radius: 5px; /* 角を少し丸く */
transition: background-color 0.3s; /* マウスオーバー時の色の変化をなめらかに */
}
.links a:hover {
background-color: #dee2e6; /* :hoverは、マウスを乗せた時の見た目を示す。背景色を少し濃いグレーに */
}
/* フッターのスタイル */
footer {
background-color: #333; /* フッターの背景色を濃いグレーに */
color: white; /* フッター内の文字色を白に */
padding: 1rem 0; /* 上下左右の余白を設定 */
}
コードのポイント解説
/* ... */: これはCSSのコメントです。コードの説明を書いています。実際にページには表示されません。- 行ごとに、役割がコメントされています。
セレクタ { プロパティ: 値; }: CSSの基本的な書き方です。これについては過去記事をチェック！- その他注意点
.profile,.profile-imgなど、クラス名（HTMLでclass="名前"とつけた部分）を指定する場合は、名前の前に.をつけます。remという単位は、ルート要素（html）のフォントサイズを基準にした相対的な単位です。これにより、全体的なサイズ調整がしやすくなります。- marginや、paddingについてはこちら！
index.htmlを保存したフォルダで、再度index.htmlファイルをダブルクリックしてブラウザで開いてみましょう。
どうでしょう？先ほどとは全く違う、きれいに整ったページが表示されたはずです！
CSSってすごいですよね。
ステップ4：自分だけのページにカスタマイズしてみよう！
ここまで来たら、あとはあなた自身の情報に書き換えるだけです。
index.htmlを編集する<title>タグの中身を、あなたのブログ名や名前に変更しましょう。<h1>や<p>タグの中身を、あなたの自己紹介文に書き換えましょう。<img src="profile.jpg" ...>のalt属性も、あなたの画像に合わせて変更しましょう。- リンク（
<a>タグ）のhref属性を、あなたのブログやSNSのURLに、表示されるテキストも変更しましょう。 - フッターの著作権表記も、
© 2025 あなたの名前のように変更しましょう。
style.cssを編集する（チャレンジ！）background-colorやcolorの値を変更して、ページのテーマカラーを変えてみましょう。（例：#ff0000で赤、blueで青など）font-sizeの値を調整して、文字の大きさを変えてみましょう。border-radiusの値を調整して、角の丸みを調整してみましょう。
ヒント：色の指定方法 CSSでは、色をredやblueのような名前で指定することもできますが、#f0f0f0のような「16進数カラーコード」で指定すると、より多くの色を細かく指定できます。
おわりに
お疲れ様でした！これであなただけの自己紹介ページが完成しましたね。
Web制作は、このように少しずつコードを書いて、それが実際に形になる楽しさがあります。 このプロジェクトを通して、「HTMLとCSSってこんな風に使うんだ！」という感覚を掴んでもらえたら嬉しいです。
「こんなプロジェクトをやってほしい！」といった要望や疑問があれば、ぜひ教えてください。一緒にWeb制作を楽しみましょう！
