- 2007-06-05 (火) 18:58
- stylesheet
最近、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>
関連記事
このブログを書いているsayjiroは最近会社を立ち上げました。小さな小さな会社ですが、一緒に働く仲間を探している今日この頃です。
社員が僕しかいない小規模零細企業ですが、自由に楽しく仕事をしつつWebを使って面白いことができればと思ってます。
募集している人物像：向上心がある・Webともの作りが好き（ある程度経験があると嬉しいですが、未経験でもやる気があれば可です）
お仕事内容：Web周り全般。サイト制作やデザイン、システム構築やiPhoneアプリ開発などいろいろです。
働く形態：その人に合わせて応相談(在宅とかでもいいです)
→興味がございましたらこちらからお気軽にご連絡ください！
- 次の記事: floatを使ったサイトレイアウトで、カラム落ちをさせない
- 前の記事: ボート釣り@釣りの浜浦
コメント:0
トラックバック:0
- この記事のトラックバックURL
- http://sj6.org/css%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%82%92li%e3%82%bf%e3%82%b0%e3%81%a7%e3%81%8d%e3%82%8c%e3%81%84%e3%81%aahtml%e3%81%a7%e6%9b%b8%e3%81%8f%e6%96%b9/trackback/
