今回は、HTMLだけを使って「シンプルなプロフィールページ」を作ってみましょう。
この実践を通じて、以下のタグを学ぶことができます。
- <h1>, <h2>：見出しを表示するタグ
- <p>：文章を表示するタグ
- <ul>, <li>：リストを作成するタグ
- <a>：リンクを作成するタグ
VS Codeで実際にブラウザで結果を確認しながら、作ってみてくださいね。
最後にサンプルのコードを載せているので、つまづいてしまった人はそちらを確認ください。
① 最初のHTMLファイルを用意しよう
まずは、プロフィールページの土台となるHTMLファイルを作成します。
以下のコードをVS Codeにコピーして「profile.html」という名前で保存してください。
基本のHTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロフィールページ</title>
</head>
<body>
<h1>私のプロフィール</h1>
</body>
</html>保存方法（VS Code）
- VS Codeを開く
- 新しいファイルを作成
- 上のコードを貼り付け、「
profile.html」として保存 - 保存したファイルをダブルクリックすると、ブラウザで表示できます！
② ステップごとにページを作成していこう
ここからは、先ほどの基本ファイルに少しずつ情報を追加して、プロフィールページを完成させます。
ステップ1：自己紹介文を追加しよう
h2タグで自己紹介見出しを作り、pタグで自己紹介文を書いてみましょう。
（分からなかったクリック！）コードのヒントを表示する
<h2>自己紹介</h2>
<p>こんにちは！私は山田太郎です。趣味は読書と旅行で、新しいことを学ぶのが大好きです！</p>（分からなかったクリック！）追加する場所のヒント
<h1>私のプロフィール</h1> のすぐ下に追加してください。
✨ ステップ2：趣味のリストを作ろう
h2で趣味リスト見出しを作り、その中でリストを使って趣味を箇条書きで書いてみてください。
（分からなかったクリック！）コードのヒントを表示する
<h2>趣味リスト</h2>
<ul>
<li>読書</li>
<li>旅行</li>
<li>プログラミング</li>
</ul>（分からなかったクリック！）追加する場所のヒント
ステップ1で追加した自己紹介文の下に追加します。
✨ ステップ3：外部リンクを追加しよう
H2で好きな見出し（好きなSNSなど）を作り、aタグでリンクを作ってみてください。
（分からなかったクリック！）コードのヒントを表示する
<h2>SNSリンク</h2>
<p>もっと知りたい方はこちら！</p>
<a href="https://example.com" target="_blank">私のブログはこちら</a>（分からなかったクリック！）追加する場所のヒント
趣味リストのすぐ下に追加しましょう。
③ 完成版のHTMLファイル
ここまで追加してきたコードをまとめた、完成版のHTMLファイルがこちらです。
🎯 完成版のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロフィールページ</title>
</head>
<body>
<h1>私のプロフィール</h1>
<h2>自己紹介</h2>
<p>こんにちは！私は山田太郎です。趣味は読書と旅行で、新しいことを学ぶのが大好きです！</p>
<h2>趣味リスト</h2>
<ul>
<li>読書</li>
<li>旅行</li>
<li>プログラミング</li>
</ul>
<h2>SNSリンク</h2>
<p>もっと知りたい方はこちら！</p>
<a href="https://example.com" target="_blank">私のブログはこちら</a>
</body>
</html>まとめ
- 基本のHTMLファイルをベースに、少しずつ内容を追加することでシンプルなプロフィールページが完成しました！
- <h1>, <h2>, <p>, <ul>, <li>, <a> など、HTMLの基本タグを組み合わせるだけで、ここまで作れることが実感できたと思います。
- 自分の情報に書き換えて、オリジナルのプロフィールページを作ってみましょう！ 🚀
コメントを残す