ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
address 要素とは
address 要素は、最も近い article 祖先要素または body 要素に対する問い合わせ先 (contact information)を表すセマンティック HTML 要素です。
名前から「住所を書く要素」だと誤解されがちですが、住所そのものではなく「連絡先」のためのもの。たとえば本の登場人物の住所には使いません。
基本構文
<address>
お問い合わせ:
<a href="mailto:info@example.com">info@example.com</a>
TEL: <a href="tel:+81-3-1234-5678">03-1234-5678</a>
</address>
article 内 vs body 直下
| 配置 | 意味 |
|---|---|
article 内 | その記事の著者への連絡先 |
body 直下 (footer 等) | そのページ / サイト全体の運営者連絡先 |
<article>
<h2>記事タイトル</h2>
<p>本文 ...</p>
<address>
著者: <a href="mailto:author@example.com">山田太郎</a><br>
Twitter: <a href="https://twitter.com/yamada">@yamada</a>
</address>
</article>
<footer>
<address>
運営: 株式会社サンプル<br>
問い合わせ: <a href="mailto:contact@example.com">contact@example.com</a>
</address>
</footer>
address に含めてよいもの / よくないもの
| OK | NG (使わない) |
|---|---|
| メールアドレス | 記事公開日 |
| 電話番号 | 著作権表記 (©) |
| 物理住所 (連絡先としての) | 本文中に出てくる第三者の住所 |
| SNS リンク | 関係のない情報 |
| 担当者名 / URL | 長い文章 |
NG: 本文中の住所
<!-- 悪い例: 本文中の住所に address を使っている -->
<p>東京タワーの所在地は、
<address>東京都港区芝公園 4-2-8</address>
です。
</p>
<!-- 良い例: 単なる住所は p や span で -->
<p>東京タワーの所在地は、
<span class="addr">東京都港区芝公園 4-2-8</span>
です。
</p>
NG: copyright 表記
<!-- 悪い例: copyright を address に入れている -->
<address>
© 2026 Example Inc. All rights reserved.
</address>
<!-- 良い例: copyright は p で -->
<footer>
<address>
<a href="mailto:contact@example.com">contact@example.com</a>
</address>
<p>© 2026 Example Inc.</p>
</footer>
定番パターン — サイトフッター
<footer>
<h3>運営会社</h3>
<address>
株式会社サンプル<br>
〒100-0001 東京都千代田区千代田 1-1<br>
TEL: <a href="tel:+81-3-1234-5678">03-1234-5678</a><br>
Email: <a href="mailto:info@example.com">info@example.com</a><br>
<a href="/contact">お問い合わせフォーム</a>
</address>
<p>© 2026 Example Inc. All rights reserved.</p>
</footer>
定番パターン — ブログ記事の著者情報
<article>
<header>
<h1>記事タイトル</h1>
<time datetime="2026-06-11">2026 年 6 月 11 日</time>
</header>
<p>記事本文 ...</p>
<footer>
<address>
筆者: <a rel="author" href="/users/yamada">山田太郎</a><br>
<a href="https://twitter.com/yamada">@yamada (Twitter)</a><br>
<a href="mailto:yamada@example.com">yamada@example.com</a>
</address>
</footer>
</article>
UA デフォルトスタイル
ブラウザの UA スタイルシートで address は斜体 (italic) で表示されます。デザイン上不要なら CSS で打ち消し。
address {
font-style: normal; /* 斜体を解除 */
line-height: 1.7;
}
microdata / Schema.org との組み合わせ
連絡先を構造化データとして検索エンジンに伝えるには Schema.org の Organization や Person と組み合わせます。
<address itemscope itemtype="https://schema.org/Organization">
<span itemprop="name">株式会社サンプル</span><br>
<span itemprop="address" itemscope
itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">千代田 1-1</span>
<span itemprop="addressLocality">千代田区</span>
<span itemprop="addressRegion">東京都</span>
<span itemprop="postalCode">100-0001</span>
</span><br>
Email: <a itemprop="email"
href="mailto:info@example.com">info@example.com</a>
</address>
FAQ
Q: 住所だけ書く場合 address を使ってもいい?
A: 連絡先としての住所なら OK。本文中の単なる地名 / 場所には使わない。
Q: address 内に address をネストできる?
A: 仕様上禁止。1 つの address 内に複数の連絡先を並べる。
Q: 斜体を解除する場合は?
A: address { font-style: normal; } で上書き。多くのデザインで実施される。
Q: 個人情報を直接書いても大丈夫?
A: 公開ページに書く以上、漏洩を承知の上で。スパム対策に data-email 属性 + JS で組み立てる、フォームに誘導するなどの対策をすると安全。
セマンティック要素としての位置づけ
HTML5 が導入したセマンティック要素群 (header, nav, main, article, section, aside, footer) のなかで address は古参 (HTML4 から存在) ですが、用途は明確化されました。「文書の作成者・運営者への連絡経路」という機械可読な情報として位置づけられます。
| 用途 | 使うべき要素 |
|---|---|
| 運営会社の問い合わせ先 | address (footer 内) |
| 記事著者の連絡先 | address (article 内) |
| 商品の販売店住所 | address + Schema.org PostalAddress |
| 本文中で言及する第三者の住所 | p + 構造化マークアップ |
| 地図のキャプション | figcaption |
関連
- href属性 — リンク先 URL の指定 (address 内のリンクで使う)
article— 独立したコンテンツ単位footer— セクション / ページのフッターcontactページ — 詳細な問い合わせフォーム
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Unreal Engine AI MoveTo 完全ガイド(NavMesh / AIController / Behavior Tree) 2026-06-11 07:07:02
- shutdown コマンド完全ガイド(Linux / Windows / systemd の使い分け) 2026-06-11 07:07:02
- DI(依存性注入)完全ガイド(Dependency Injection / IoC / Spring / CDI / コンストラクタ・セッター注入) 2026-06-11 07:07:02
- git 用語一覧完全リファレンス(Repository / HEAD / Branch / Rebase / Stash 他) 2026-06-11 07:07:02
- TCP/IP リンク層 (ネットワークインターフェース層) 完全ガイド 2026-06-11 07:07:02
- Laravel ルート認証化完全ガイド — middleware と Gate 2026-06-11 07:07:02
- EJB完全ガイド(Stateless/Stateful/Singleton/MDB/CDIとの違い/Spring代替) 2026-06-11 07:07:02
- git log コミット履歴確認完全ガイド — oneline/graph/stat/blame 2026-06-11 07:07:02
- Laravel のインストール手順まとめ — composer / Sail / Valet / Herd と初期設定 2026-06-11 07:07:02
- CDI完全ガイド(Inject/Produces/Qualifier/Scope/Spring DIとの違い) 2026-06-11 07:07:02
- Python set 入門 — 作成方法、frozenset、内包表記、リスト重複削除 2026-06-11 07:07:02
- Apache .htaccess でベーシック認証を設定する手順(.htpasswd / htpasswd / AuthType Basic / トラブルシュート) 2026-06-11 07:07:02
- Python アプリのローカル独立配布完全ガイド(PyInstaller / wheel / Docker) 2026-06-11 07:07:02
- Laravel Eloquent モデルのデフォルト値設定 2026-06-11 07:07:02
- Unity Component 取得とキャッシュの完全ガイド(GetComponent/RequireComponent/TryGetComponent) 2026-06-11 07:07:02
コメントを削除してもよろしいでしょうか?