本記事は、HTMLを使用してタイムラインを作成するための基本的な例を示します。
この例では、タイムラインの各イベントをリストとして表示しています。
タイムラインの例
このコードは、タイムラインの各イベントをリストとして表示し、それぞれのイベントには日付・タイトル・詳細説明が含まれています。
▼こんな感じになります▼
-
2023-08-01
イベント 1
イベント 1 の詳細説明がここに入ります。
-
2023-08-10
イベント 2
イベント 2 の詳細説明がここに入ります。
HTMLでタイムラインを作成
本例を、適切なテキストエディタで保存して、ブラウザで開くとタイムラインが表示されます。
必要に応じて、スタイルやコンテンツをカスタマイズしてください。
また、JavaScriptを使用してより動的なタイムラインを作成することもできます。
<!DOCTYPE html>
<html>
<head>
<title>タイムラインの例</title>
<style>
.timeline {
list-style: none;
padding: 0;
}
.timeline-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.timeline-icon {
width: 30px;
height: 30px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 50%;
font-size: 20px;
margin-right: 10px;
}
.timeline-content {
border-left: 2px solid #3498db;
padding-left: 15px;
}
.timeline-date {
margin-top: 0;
}
.timeline-title {
margin: 0;
font-weight: bold;
}
.timeline-description {
margin: 5px 0;
}
</style>
</head>
<body>
<h2>タイムラインの例</h2>
<ul class="timeline">
<li class="timeline-item">
<div class="timeline-icon">1</div>
<div class="timeline-content">
<p class="timeline-date">2023-08-01</p>
<h3 class="timeline-title">イベント 1</h3>
<p class="timeline-description">イベント 1 の詳細説明がここに入ります。</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-icon">2</div>
<div class="timeline-content">
<p class="timeline-date">2023-08-10</p>
<h3 class="timeline-title">イベント 2</h3>
<p class="timeline-description">イベント 2 の詳細説明がここに入ります。</p>
</div>
</li>
<!-- 他のイベントをここに追加 -->
</ul>
</body>
</html>
HTMLの基本の書き方
基本のHTMLは、HTML宣言・htmlタグ・headタグ・titleタグ・bodyタグでできています。それぞれの書き方を紹介します。
HTML宣言
HTMLファイルは、1番初めに「HTML宣言（ドキュメントタイプ宣言）」を書きます。
<!DOCTYPE html> <-- HTML宣言
<html>
<head>
<title>ページごとの内容</title>
</head>
<body>
内容(コンテンツ)
</body>
</html>
HTML宣言は決まり文句のようなもので、 ↑と書くことで「このファイルはHTML文書です」という宣言の役割を果たします。HTML宣言には、終了タグは不要です。
htmlタグ
HTML宣言の下に「htmlタグ」を書き、コード全体を囲みます。
<!DOCTYPE html>
<html> <-- HTML開始タグ
<head>
<title>ページごとの内容</title>
</head>
<body>
内容(コンテンツ)
</body>
</html> <-- HTML終了タグ
これによって、<html></html> で囲んだ部分が「HTMLコードです」という意味になるため、HTMLファイルを作成する際は必ず書くようにします。
headタグ
「htmlタグ」の中に「headタグ」を書きます。<head></head> で囲んだheadタグの中には、そのWebページの情報や設定を書きます。
<!DOCTYPE html>
<html>
<head> <-- head開始タグ
<title>ページごとの内容</title>
</head> <-- head終了タグ
<body>
内容(コンテンツ)
</body>
</html>
headタグの中には、文字コード・検索ページで表示される概要・CSSファイル・タイトルなどが入ります。
head内に記入した内容は、あくまでもブラウザへの情報や設定ですので、Webページの画面には表示されません。
titleタグ
headタグの見出しでも触れたとおり、「titleタグ」はWebページのタイトルを示します。
titleタグ内の文は、ページ名としてブラウザのタブ・検索エンジン・SNSなどに表示されます。
<!DOCTYPE html>
<html>
<head>
<title> <-- title開始タグ
ページごとの内容
</title> <-- title終了タグ
</head>
<body>
内容(コンテンツ)
</body>
</html>
bodyタグ
「headタグ」の下に「bodyタグ」を書きます。<body></body> に囲まれた部分が、実際のWebページの画面に表示されます。
<!DOCTYPE html>
<html>
<head>
<title>ページごとの内容</title>
</head>
<body> <-- body開始タグ
内容(コンテンツ)
</body> <-- body終了タグ
</html>
・「HTMLとCSSは少しなら分かる」という初心者〜中級者にオススメの本
・「実際にWebサイトをイチから作ってみよう」というコンセプト
・読みながら手を動かすという実習書的な要素が強い
・WEB制作の流れを掴むにはとても良い本。
