ベストアンサー

リストのコーディングについて

2011/09/28 21:57

添付した画像のようなリストをコーディングする場合どうコーディングするのが崩れもなくきれいにできるのでしょうか？ ulのリストでコーディングするとどうしてもIEとfirefoxでずれたりして困っています。よろしくお願いいたします。

eri0055896
お礼率90% (46/51)

CSS
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/29 23:15 回答No.2

枠の間隔をあけるの忘れてました。とりあえず、さまざまなウィンドウ幅に対応するようにも、しておきました。その他、示された画像が小さくと解りにくかったのですが、出来るだけ近くしてみました。 ■は画像の場合、content:url([画像へのパス]);としてください。　複雑なテクニックは一切ないので、検討して適当にアレンジしてみてください。　 div.header div.nav ol,div.header div.nav ol li, div.header div.nav ul,div.header div.nav ul li{ ＿display:block;list-style:none; ＿margin:0;padding:0;line-height:30px; } div.header div.nav ol{ ＿width:95%;min-width:450px;max-width:900px; } div.header div.nav ol li{ ＿width:43%; ＿margin:10px 2% 0 2%; ＿float:left;border:solid 3px gray; } div.header div.nav ol li{margin-left:1em;} div.header div.nav ol li a{color:black;} div.header div.nav ol li:before{ ＿content:"　■";＿color:blue; } div.header div.nav ol li ul li{ ＿width:40%;height:30px;margin-top:0; ＿float:left;clear:none; ＿border:none;background-color:white; } div.header div.nav ol li ul{ ＿height:60px; ＿background-color:white;border-top:solid 1px; } div.header div.nav ol li ul li:before{ ＿content:"　・";color:red; }

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/29 14:26 回答No.1

あまり悩まないでください。　しょせん、HTMLはデザインよりは中身の世界です。デザインに凝るあまり、「角をためて牛を殺してしま」っているサイトがたくさんあります。HTMLとはそうしたものです。カタログのように見栄えだけが最優先される場合は、PDFを利用しましょう。　それが原則と入っても、出来ないわけではありません。そのためには、HTMLがきちんと書かれていなければなりません。HTMLがきちんと書かれていれば、簡単なCSSになります。もちろん、プルダウンメニューだろうが、どのようにも変更できます。　以下は、簡単なサンプルです。IEのバージョンが書かれていませんが、厄介な古いIE5やIE6も含めて、ほとんど同様に表示できるはずです。（兄弟セレクタを理解できない古いIEは、枠線が重なった部分が太くなります。）（contentを使えない古いブラウザでは、追加テキストは表示されません）　HTML4.01strict(厳密型(とCSS2.1です。いずれも、下記で検証済みです。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) ※タブが＿に置換してありますから元に戻してください。 <!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>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="Main1">Main1</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="sub1-1">sub-1</a></li> ＿＿＿＿＿＿<li><a href="sub1-2">sub1-2</a></li> ＿＿＿＿＿＿<li><a href="sub1-3">sub1-3</a></li> ＿＿＿＿＿＿<li><a href="sub1-4">sub1-4</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="Main2">Main2</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="sub2-1">sub2-1</a></li> ＿＿＿＿＿＿<li><a href="sub2-2">sub2-2</a></li> ＿＿＿＿＿＿<li><a href="sub2-3">sub2-3</a></li> ＿＿＿＿＿＿<li><a href="sub2-4">sub2-4</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="Main3">Main3</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="sub3-1">sub3-1</a></li> ＿＿＿＿＿＿<li><a href="sub3-2">sub3-2</a></li> ＿＿＿＿＿＿<li><a href="sub3-3">sub3-3</a></li> ＿＿＿＿＿＿<li><a href="sub3-4">sub3-4</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="Main4">Main4</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><a href="sub4-1">sub4-1</a></li> ＿＿＿＿＿＿<li><a href="sub4-2">sub4-2</a></li> ＿＿＿＿＿＿<li><a href="sub4-3">sub4-3</a></li> ＿＿＿＿＿＿<li><a href="sub4-4">sub4-4</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> </body> </html>