問い合わせ先を示すには?
addressタグの書式
addressタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
addressタグの属性一覧
addressタグの解説
<address>タグは、連絡先・問い合わせ先の情報を示すための要素です。
<address>は、<article>要素の中で使われる場合と、そうではない(<body>要素の中で使われる)場合とでは、意味合いが異なります。
<address>要素の中で使われた場合は、その<address>の記事の著者などの連絡先という意味です。
<body>要素の中で使われた場合は、ドキュメント全体の連絡先を表すことになります。
<address>は<footer>要素の中に書くのが普通です。
また、<address>~</address>の中には、問い合わせ先以外の内容を含めるべきではありません。
住所などを表す場合は<p>要素を使うのがよいでしょう。
addressタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<header>
<h1>新商品について</h1>
</header>
<p>今月の新商品は、もっちりクリームパンです。
もちもちした生地にミルクたっぷりのクリームがリッチな味わいを演出します。
発売は12日からで、お値段は1個160円となります。
1日30個限定ですので、お早めにお買い求めください!</p>
<footer>
<address>新商品に関するお問い合わせは<a href="about@abcd1234.co.jp">こちら</a>まで。</address>
<p><small>(c)だでぃ~ずベイカリー</small></p>
</footer>
</body>
</html>
addressタグのサンプル画面1
addressタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
<style type="text/css">
table, td, th { border: 1px #0000ff solid; }
</style>
</head>
<body>
<article>
<header>
<h1>採用について</h1>
</header>
<p>弊社では、夢を実現していく意欲のある大学新卒の方を募集しています。
経験の有無は問いません。コンピューターに興味があり、
前向きに挑戦していくことのできる方のご応募をお待ちしております。</p>
<table>
<tr><td>募集職種</td><td>SE、プログラマ</td></tr>
<tr><td>業務内容</td><td>.NET系のシステム設計・開発</td></tr>
<tr><td>採用対象</td><td>大学、大学院を卒業または卒業見込みの方</td></tr>
<tr><td>採用予定人数</td><td>若干名</td></tr>
<tr><td>勤務予定地</td><td>池袋</td></tr>
<tr><td>給与</td><td>応相談</td></tr>
<tr><td>補助など</td><td>通勤費全額支給、扶養手当</td></tr>
<tr><td>社会保険</td><td>健康保険、厚生年金、雇用保険、労災保険</td></tr>
<tr><td>休暇</td><td>完全週休2日制、祝祭日、夏期休暇、年末年始休暇、年次有給休</td></tr>
</table>
<footer>
<address>応募に関するご質問は採用担当<a href="tanaka@abcd5678.co.jp">田中</a>まで。</address>
<p><a href="/homepage.html">ホームページ</a></p>
</footer>
</article>
</body>
</html>
addressタグのサンプル画面2
addressタグの関連項目