- ベストアンサー
CSS フォントサイズの違うリストの横並び
http://www.muji.net/ie/ 上記のサイトのようにグローバルメニューのフォントサイズの違うものを横並びにし、 さらにはフォントの変わるところで縦線も入れたいです。 リストスタイルには任意の画像を使いたいと思って試行錯誤していますが、 どうしてもフォントサイズを変えるとずれてしまいます。 特にIE6で見ると何を直して良いのか分からないくらいです。 わかりづらい文章で申し訳ないですが教えてください。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- ol#SiteMap{ display: block; position: absolute; top: 0px; padding: 0px; width: 100%; margin: 0px; background-color: rgb(200,200,100); } ol#SiteMap li{ display: block; width: 16%; float: left; text-align: center; font-size: 1.4em; } ol#SiteMap li + li.sub{ /* 隣接セレクタ(li に続くli.sub */ border-left: solid 1px black; } ol#SiteMap li.sub + li.sub{ /* 隣接セレクタ(li.sub に続くli.sub */ border-left: none; } ol#SiteMap li.sub + li{ /* 隣接セレクタ(li.sub に続くli */ border-left: solid 1px black; } ol#SiteMap li.sub + li.sub{ /* 隣接セレクタ(li.sub に続くli.sub */ border-left: none; } ol#SiteMap li a{ display: inline-block; width: 96%; height: 1.4em; margin-left: 2%; margin-right: 2%; } ol#SiteMap li.sub a{ font-size: 0.6em; } --> </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <div class="abstract"> <p> 要約 </p> </div> <div class="Text"> <h2>ArticleTitle</h2> <p> 記事 </p> </div> <!-- パンくずリスト --> <ol id="SiteMap"> <li><a href="#">リンク(1)</a></li> <li><a href="#">リンク(2)</a></li> <li><a href="#">リンク(3)</a></li> <li class="sub"><a href="#">リンク(4)</a></li> <li class="sub"><a href="#">リンク(5)</a></li> <li><a href="#">リンク(6)</a></li> </ol> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
たとえば <ol id="siteMap"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href="" class="sub"></a></li> <li><a href="" class="sub"></a></li> <li><a href=""></a></li> </ol> というHTMLだと <ol></ol>を絶対配置、blockにしてpaddingを0pxにする。 <li></li>をblockにして、その幅を%で指定してfloatで並べる。 隣接セレクタを使って、classセレクタが変わる所でborder: solid 1px blackを指定する。 ・・・というところでしょうか。 背景画像は<ol>で、各リンクの背景は<a>に対して行う。
お礼
ご回答ありがとうございます。 ＞<ol></ol>を絶対配置、blockにしてpaddingを0pxにする。 これは #test{ display:block; padding:0; } ＞<li></li>をblockにして、その幅を%で指定してfloatで並べる #test2 {display:block; padding:●●%; float:left; } ということですか？ 初心者の質問で申し訳ないのですが 教えていただけると嬉しいです。 よろしくお願いいたします。
- lesstia
- ベストアンサー率45% (44/96)
この文字はテキストではなく画像ですね。 普通に大きさの違う文字が描かれている画像を並べてアンカーにしているだけかと。
お礼
早速ありがとうございます。 画像ではなくテキストで作りたいと思っています。 説明不足で申し訳ありませんでした。 それでも方法としては同じなのでしょうか？ 面倒でなかったらコードも教えていただけるとありがたいです。 よろしくお願いいたします。
お礼
ORUKA1951さんありがとうございます！ お礼が遅くなって申し訳ありません。 なかなかうまく行かず色々試してやっとできました。 CSSって本当に難しいですね。。。 頑張って勉強します。 ありがとうございました。