ここから本文です

外部スタイルシートを使用した、フッターリンクの作成を教えてください。

ike********さん

2013/3/2110:20:44

外部スタイルシートを使用した、フッターリンクの作成を教えてください。

フッター部分に、
トップ|料金|サポートエリア|プライバシー|地図
のフッターリンクを作成しようと思うのですが、
「|」(パイプライン)の部分を<dl><dt><dd>などのリストで表示させる方法を教え頂けないでしょうか?

現在は、
<a href="***.html">トップ</a> | <a href="***.html">料金</a> | <a href="***.html">サポートエリア</a> | <a href="***.html">プライバシー</a> | <a href="***.html">地図</a>
にしているのですが、リストで行ったほうが良いとお聞きしました。
ご教授よろしくお願いいたします。

閲覧数:
706
回答数:
2
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

hei********さん

編集あり2013/3/2112:51:23

<dl><dt><dd> は、定義リストだから用途が違うような気がします、番号なしリストでいいんじゃないでしょうか。

また、リストにした方がいいという事はないと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<style type="text/css">
#footer ul {
list-style: none;
}
#footer li {
display: inline;
padding: 0 6px 0 2px;
border-right: solid 1px #666;
}
#footer .last {
border-right: none;
}
</style>
</head>
<body>
<div id="footer">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">料金</a></li>
<li><a href="#">サポートエリア</a></li>
<li><a href="#">プライバシー</a></li>
<li class="last"><a href="#">地図</a></li>
</ul>
</div>
</body>
</html>

外部スタイルシートにするなら、スタイル部分を別ファイルにしてリンクしてください。
HTML(<style type="text/css">~</style>を置き換える)
<link rel="stylesheet" href="./style.css" type="text/css">

style.css
#footer ul {
list-style: none;
}
#footer li {
display: inline;
padding: 0 6px 0 2px;
border-right: solid 1px #666;
}
#footer .last {
border-right: none;
}

質問した人からのコメント

2013/3/22 15:35:49

うまくできました!
わかりやすいご説明ありがとうございます。

riverport_s27_xrea_comさんも教えてくださりありがとうございます。
勉強になりました!

独学で覚えていまして、タグの勘違いをしていました。
教えて頂きましたやり方を知りたかったのです!

ベストアンサー以外の回答

1〜1件/1件中

riv********さん

2013/3/2122:02:29

<!DOCTYPE>
<style>
ul#footer li {
display: inline;
}
ul#footer li + li:before {
content: "|";
}
</style>
<ul id="footer">
<li>トップ</li>
<li>料金</li>
<li>サポートエリア</li>
<li>プライバシー</li>
<li>地図</li>
</ul>
足りない記述は付け足してね。

隣接セレクタ(IE7以上)
http://www.htmq.com/selector/adjacent.shtml

:before擬似要素(IE8以上)
http://www.htmq.com/selector/before.shtml

content(IE8以上)
http://www.htmq.com/style/content.shtml

IE7にも対応したいのであれば、:beforeとcontentを使わずに
heiltoreasonさんの回答のようにボーダーでやってもいいです。

IE6にも対応したいのであれば、隣接セレクタを使わずに
やはりheiltoreasonさんの回答のように最後か最初のli要素にクラスを付与する方法になります。

個人的には、IE6とIE7は、IE8以上への自動アップデートが日本国内で始まってから、もう1年ぐらい経っているし
もう見限っていいと思うんですケド。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる