はじめに
Web 開発において、<address> タグは Web ページ上に連絡先情報を表示するために使用されます。これは、Web ページ、文書、または記事を公開している著者、組織、または会社の詳細を示すために使用されます。
この実験では、簡単な Web ページを作成し、<address> タグを使用してページの下部に連絡先情報を表示します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
基本的な HTML テンプレートを作成する
index.html という名前の HTML ファイルを作成し、コードエディタで開きます。
ファイルに基本的な HTML テンプレートコードを追加します。
<!doctype html>
<html>
<head>
<title>Contact Information</title>
</head>
<body></body>
</html>
見出しと段落を追加する
ページについての簡単な紹介または要約を与えるために、見出しと段落を追加します。
<h1>Contact Information</h1>
<p>Welcome to my webpage. This webpage contains contact information.</p>
連絡先情報を追加する
連絡先情報用のセクションを作成し、そのセクション内に <address> タグを配置します。開始と終了の <address> タグの間に関連する連絡先情報を追加します。たとえば：
<section>
<h2>Contact Details</h2>
<address>
<p>John Doe</p>
<p>
123 Main Street <br />
Anytown, USA 12345
</p>
<p><a href="mailto:john@example.com">john@example.com</a></p>
<p><a href="tel:123-456-7890">123-456-7890</a></p>
</address>
</section>
上記の例では、「Contact Details」というタイトルのセクションを追加し、そのセクション内に連絡先情報を表示するための <address> タグを作成しました。<address> タグの中に名前、住所、メールアドレス、電話番号を追加しました。
CSS スタイルを追加する
<address> タグにいくつかの CSS スタイルを追加して、それにいくつかのフォーマットを与えます。デフォルトでは、<address> タグはブロックレベルで斜体になるようにスタイル付けされています。これを中央揃えにして太字にするように変更します。
<style>
address {
display: block;
font-weight: bold;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
index.html ファイルを保存し、Web ブラウザで開いて、連絡先情報が表示された最終的な Web ページを確認します。
まとめ
<address> タグは、Web ページ上の連絡先情報を表示するために使用される便利な HTML 要素です。この実験では、Web ページ上に連絡先情報を表示するためのセクションを作成するために <address> タグをどのように使用するかを学びました。また、<address> タグにいくつかの CSS スタイリングを追加して、視覚的により良い形式にする方法も学びました。
