HTMLで自己紹介ページを作りたいけれど、
「どんなデザインにすればいいかわからない」
「ゼロから書くのは難しい」
「学校の課題や練習用に、すぐ使えるテンプレートがほしい」
という人も多いと思います。
この記事では、HTMLとCSSだけで作れる自己紹介ページのテンプレートを紹介します。
コピペして使える形にしているので、まずはそのまま動かしてみてください。
慣れてきたら、名前、プロフィール文、色、画像などを自分用に変更していきましょう。
自己紹介ページの基本構成
自己紹介ページには、次のような内容を入れると作りやすいです。
- 名前
- 簡単なあいさつ
- 好きなこと
- 得意なこと
- 学んでいること
- 画像やアイコン
- SNSやリンク
最初から全部入れる必要はありません。
まずは、名前と一言プロフィールだけでも大丈夫です。
シンプルに作ってから、少しずつ内容を増やしていきましょう。
ファイルを分けて作る自己紹介ページ
自己紹介ページは、HTML、CSS、JavaScriptを分けて作ることもできます。
1つのHTMLファイルにすべて書く方法もありますが、ファイルを分けるとコードが見やすくなります。
index.html：ページの内容を書くstyle.css：見た目を整えるscript.js：ボタンや動きを追加する
初心者のうちは少し難しく見えるかもしれませんが、Web制作ではよく使われる形です。
テンプレート1：シンプルな自己紹介ページ
まずは、いちばん基本的な自己紹介ページです。
HTMLとCSSの練習を始めたばかりの人におすすめです。
山田 太郎
HTML、CSS、JavaScriptを勉強中です。
好きなこと
- ゲームを作ること
- Webサイトを見ること
- 新しい技術を学ぶこと
目標
自分で考えたアイデアを、Webサイトやゲームとして形にできるようになりたいです。
index.htmlを作る
まずは index.html を作ります。
index.html は、ページの文章や見出しなど、Webページの中身を書くファイルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介ページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="profile-card">
<div class="icon">🙂</div>
<h1>山田 太郎</h1>
<p class="lead">HTML、CSS、JavaScriptを勉強中です。</p>
<section>
<h2>好きなこと</h2>
<ul>
<li>ゲームを作ること</li>
<li>Webサイトを見ること</li>
<li>新しい技術を学ぶこと</li>
</ul>
</section>
<section>
<h2>目標</h2>
<p>
自分で考えたアイデアを、Webサイトやゲームとして形にできるようになりたいです。
</p>
</section>
<button id="profileMessageButton">メッセージを表示</button>
<p id="profileMessage"></p>
</main>
<script src="script.js"></script>
</body>
</html>ポイントは、次の2つです。
<link rel="stylesheet" href="style.css">この部分で、CSSファイルを読み込んでいます。
<script src="script.js"></script>この部分で、JavaScriptファイルを読み込んでいます。
HTML、CSS、JavaScriptを分けるときは、このようにHTML側から別ファイルを読み込ませます。
style.cssを作る
次に style.css を作ります。
style.css は、背景色、文字の色、余白、カードの見た目などを整えるファイルです。
body {
font-family: sans-serif;
background-color: #f4f8fb;
color: #333;
margin: 0;
padding: 40px;
}
.profile-card {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 32px;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.icon {
width: 96px;
height: 96px;
background-color: #dbeafe;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 42px;
}
h1 {
text-align: center;
color: #2563eb;
margin-bottom: 8px;
}
.lead {
text-align: center;
color: #555;
font-size: 18px;
}
section {
margin-top: 28px;
}
h2 {
border-left: 4px solid #2563eb;
padding-left: 10px;
}
ul {
line-height: 1.8;
}
button {
display: block;
margin: 32px auto 0;
padding: 12px 20px;
border: none;
border-radius: 8px;
background-color: #2563eb;
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #1d4ed8;
}
#profileMessage {
text-align: center;
margin-top: 20px;
font-weight: bold;
color: #2563eb;
}このCSSでは、自己紹介ページをカード風のデザインにしています。
特に大事なのは、次の部分です。
.profile-card { max-width: 600px; margin: 0 auto; }max-width でカードの横幅を決めています。
margin: 0 auto; を使うと、カードを中央に配置できます。
script.jsを作る
最後に script.js を作ります。
script.js は、ボタンをクリックしたときの動きを作るファイルです。
const button = document.getElementById('profileMessageButton');
const message = document.getElementById('profileMessage');
button.addEventListener('click', () => {
message.textContent = '自己紹介ページを見てくれてありがとうございます！';
});このJavaScriptでは、まずHTMLの中からボタンとメッセージ表示エリアを取得しています。
const button = document.getElementById('profileMessageButton');
const message = document.getElementById('profileMessage');次に、ボタンがクリックされたときの処理を書いています。
button.addEventListener('click', () => {
message.textContent = '自己紹介ページを見てくれてありがとうございます！';
});textContent を使うと、HTMLの中の文字をJavaScriptで変更できます。
動かないときに確認すること
JavaScriptが動かないときは、次の点を確認してみてください。
- index.html
- style.css
- script.js
この3つのファイルが同じフォルダに入っているか確認しましょう。
また、HTMLの中でファイル名が正しく書かれているかも大事です。
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>ファイル名を styles.css や main.js に変えた場合は、HTML側の名前も同じように変更する必要があります。
自分用に変更するポイント
テンプレートをコピーしたら、次の部分を変更してみましょう。
- 名前
- 一言プロフィール
- 好きなこと
- 目標
- 背景色
- 見出しの色
- ボタンの文字
- 表示されるメッセージ
たとえば、名前を変更したい場合は、次の部分を書き換えます。
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>自分の名前やニックネームに変えてみましょう。
<h1>もり たろう</h1>メッセージを変更したい場合は、JavaScriptのこの部分を書き換えます。
message.textContent = '自己紹介ページを見てくれてありがとうございます！';たとえば、次のように変更できます。
message.textContent = 'これからWeb制作をがんばります！';色を変更する方法
見出しやボタンの色を変えたい場合は、CSSの色コードを変更します。
color: #2563eb; background-color: #2563eb;#2563eb は青色です。
たとえば、緑色にしたい場合は次のように変更できます。
color: #16a34a; background-color: #16a34a;色を変えるだけでも、ページの雰囲気は大きく変わります。
画像を入れたい場合
プロフィール画像を入れたい場合は、HTMLのアイコン部分を画像に変更します。
変更前は、次のようになっています。
<div class="icon">🙂</div>画像を使う場合は、次のように書きます。
<img class="profile-image" src="profile.jpg" alt="プロフィール画像">そして、CSSに次のコードを追加します。
.profile-image {
width: 120px;
height: 120px;
border-radius: 50%;
display: block;
margin: 0 auto 20px;
object-fit: cover;
}profile.jpg という画像を同じフォルダに置くと、プロフィール画像として表示できます。
自己紹介ページを作るときの注意点
自己紹介ページをインターネットに公開する場合は、個人情報を書きすぎないようにしましょう。
特に、次のような情報には注意が必要です。
- 本名
- 住所
- 学校名
- 電話番号
- 顔写真
- 個人が特定されやすい情報
学校の課題として提出するだけなら問題ない場合もありますが、Web上に公開するならニックネームを使うのがおすすめです。
まとめ
今回は、HTML・CSS・JavaScriptを分割して作る自己紹介ページのテンプレートを紹介しました。
HTMLではページの内容を書き、CSSでは見た目を整え、JavaScriptではボタンをクリックしたときの動きを作りました。
ファイルを分けると、最初は少し難しく見えるかもしれません。
しかし、Web制作ではよく使われる書き方なので、早めに慣れておくと便利です。
まずはそのままコピペして動かしてみましょう。
そのあとで、名前、文章、色、画像などを自分用に変えてみてください。
もっと基本から自己紹介ページの作り方を知りたい方は、こちらの記事も参考にしてください。
コメント