HTMLで完全なウェブサイトを構築する
メニューを表示するにはスワイプしてください
これまでにHTMLの基本的な概念を学習し、これからは一からポートフォリオ用の1ページウェブサイトを作成します。
自分で作成に挑戦することもできますし、各パートごとのコード付きステップバイステップガイドに従うこともできます。
ステップバイステップガイド
1. ウェブサイト構成計画
ポートフォリオページには以下を含みます：
- ヘッダー：サイトタイトルとナビゲーションリンク
- 自己紹介：オーナーについての簡単な紹介
- ポートフォリオ：画像、タイトル、短い説明付きのプロジェクト
- お問い合わせ：訪問者が連絡できるフォーム
- フッター：著作権および連絡先・SNSリンク
2. セマンティックHTMLによるコンテンツ構造化
新しい index.html ファイルを作成し、<!DOCTYPE html>、<html>、<head>、<body> を含む基本的なHTML構造を追加。
index.html
3. ヘッダーセクション
オーナー名を含む <header> と、About、Portfolio、Contact セクションへジャンプするリンクを含む <nav> を追加。
index.html
4. Aboutセクション
<section id="about"> を作成し、見出しとオーナーについて説明する短い段落を追加。
index.html
5. ポートフォリオセクション
画像、タイトル、簡単な説明とともにプロジェクトを一覧表示する <section id="portfolio"> を追加。
index.html
6. お問い合わせセクション
名前、メールアドレス、メッセージを収集するシンプルなお問い合わせフォームを含む <section id="contact"> を作成。
index.html
7. フッターセクション
ページの最後に <footer> を追加し、著作権テキストとソーシャルメディア、電話、メールへのリンクを含める。
index.html
ボーナス
ページをより視覚的に魅力的にするために、CSSファイルを接続してHTMLをスタイリングすることができます。CSSは色、余白、フォント、レイアウトを制御し、同じ構造でもはるかに洗練された見た目に仕上げます。
まずは、プレーンなHTMLの見た目と、基本的なCSSスタイルを適用した後の変化を比較してみてください。
index.html
index.css
この章で作成した完成版ウェブサイトへのリンクはこちらです： Julia's Website
フィードバックありがとうございます！
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
