HTML・CSS:連絡先の表記をする、addressタグ

addressタグとは

<address>タグは、その名の通りアドレスとか連絡先を記載するときに使用します。企業のホームページで言うと会社の概要に連絡先を載せたいときとか、お問合わせ先の電話番号をフッター(HPの下のほう)に書いてあることが多いです。

addressタグの使い方

<address>
一文字のメールアドレス:ichimonjinorenrakusaki@koko.desu<br>
いちもんじの電話番号:8753<br>
いちもんじの住所:地球ではない星<br>
</address>

このように、連絡先となる部分だけ<address>タグで囲ってあげるようにしましょう。ちなみに↑のを実際に表示してみるとこんな感じになります。(あっ、上の例は偽の連絡先ですので注意ですよ!)

勝手に斜体になるのでそれを直す

一文字のメールアドレス:ichimonjinorenrakusaki@koko.desu
いちもんじの電話番号:8753
いちもんじの住所:地球ではない星

…うーん、メールアドレスの部分と連絡先の番号が斜体になっていて絶妙にダサいですね…。これはCSSで改善することが出来ます。↓

<address style="font-style:normal">
一文字のメールアドレス:ichimonjinorenrakusaki@koko.desu<br>
いちもんじの電話番号:8753<br>
いちもんじの住所:地球ではない星<br>
</style></address>

こうやって斜体を普通の形式に直してあげることにより…↓

一文字のメールアドレス:ichimonjinorenrakusaki@koko.desu
いちもんじの電話番号:8753
いちもんじの住所:地球ではない星

このように通常のフォントに元通りです。

フッターへの掲載方法

連絡先はフッターに小さく書いてあることが多いです。書き方としてはこんな感じ↓

<footer>
<address>
一文字のメールアドレス:ichimonjinorenrakusaki@koko.desu<br>
いちもんじの電話番号:8753<br>
いちもんじの住所:地球ではない星<br>
</address>
</footer>

<footer>タグの中に<address>タグを入れ込みましょう。簡単ですね。

注意点

<address>タグの中にはその文字通り連絡先のみを書くようにしましょう。連絡先以外のことを書いてしまうと、検索エンジンが「???」と混乱してしまうのでSEO対策的にもよろしくないです。
また、そのHPに必要な連絡先のみを書くようにしましょう。勝手に他の人のアドレスとか載せたり、関係のない人の連絡先を載せたりすると大変なことになるので…(こんなこといちいち言われんでもわかっとるわ!って感じですね。すみません。)

タイトルとURLをコピーしました