最近、htmlのコーディングをゴリゴリやっているので、ちょっとメモメモ。
どうせ作るならソース内は綺麗にしておきたいと思うのですが、今回はフッターを作る際に良く使う、こんなレイアウトについて。
これのソースはこんな感じ
<a href=”#”>TOP</a> | <a href=”#”>会社概要</a> | <a href=”#”>お問い合わせ</a>
まぁ、これで動くし特に問題は無いんだが、<li>タグのリストで出したかったり、リンク毎にはさむ「 | 」←これがあんまり使いたくなかったりするわけなんですよ。
まず、<li>タグですが、これは簡単。li{display:inline}を使います。
次に「 | 」←これですが、これはborderで表現してあげます。
この2つをやるとこんな感じ。
どうでしょうか?
これならHTMLの構造的にもフッターがリストとして表現できますし、余計な「 | 」←これも書かずに済みます。
参考までにソースも貼っておきます。
<ul>
<li style=”display: inline”><a href=”#”>TOP</a></li>
<li style=”display: inline”><a href=”#”>TOP</a></li>
<li style=”border-left: 1px solid #000000; display: inline; margin-left: 5px”><a href=”#”>会社概要</a></li>
<li style=”border-left: 1px solid #000000; display: inline; margin-left: 5px”><a href=”#”>お問い合わせ</a></li>
</ul>