ナビゲーションの書き方（HTML、CSS）
- ナビゲーションの書き方について詳しく解説します。
- バックグラウンドの部分と文字を表示する部分が重なってしまう問題についての解決方法を教えます。
- HTMLとCSSを使ってきれいに重ならないナビゲーションを作る方法をご紹介します。
- ベストアンサー
ナビゲーションの書き方（HTML、CSS）
以下のように書いているのですが、バックグラウンドの所（#navbar）と、 文字を入れている所（#navbar li a）のところがきれいに重なって 表示するようにできません。 どなたか教えて頂ければ幸いです。宜しくお願いします。 ■HTML <div id="navbar"> <ul> <li id="top"><a href="#" title="#">ＴＯＰ</a></li> <li id="basic"><a href="#" title="#">基本</a></li> </ul> </div> ■CSS #navbar { background-image:url(../images/navbar.gif); padding:0px; width:1000px; height:35px; float:left; border:solid 1px #D5D5D5; border-bottom:5px solid #66CC33; } #navbar ul{ margin-left: 0px; } #navbar li{ float:left; text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:14px; letter-spacing:1px; line-height:35px; list-style-type:none; width:75px; color:#666666 } #navbar li a { float:left; font-weight:600; font-size:12px; display:block; height:35px; border-right:solid 1px #D5D5D5; width:74px; } #navbar li#top { width:55px; } #navbar li#top a { width:54px; } #navbar li#basic { width:55px; }
- km1342
- お礼率34% (16/46)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
シンプルなソースを上げておきます。注意点は必要なところに書いてある。<HTML4.01 strict>です。 ★リンクのあるメニューと現ページのフォントを変えると判断しました。 ★リストの幅は統一してあります。 ★リンクはそのブロック全体を占めるようにしてあります。 ★<div id="navbar">は将来のHTML5で導入される見込みの<nav>に書き換 えることを想定し、<div class="nav">にしてあります。 なお、見やすいためタブを全角スペースに置き換えてありますから、テストするときは全角スペースをタブに置換してください。 <!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"> <!-- div.nav ul,div.nav li{ margin:0px; padding:0px; } div.nav{ position:absolute; top: 10px; width:100%; height: 36px; /* ここが高さ */ background:url(./images/var.gif) gray ; border:solid 1px #D5D5D5; border-bottom:5px solid #66CC33; } div.nav ul,div.nav li,div.nav li a{ display:block; /* div.nav li aの指定は高さを揃えるため */ } div.nav li{ background-color: rgb(200,200,200); float:left; /* floatはここで使う */ text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:18px; /* aのない場合をデフォルト */ letter-spacing:1px; list-style-type:none; /* リストのマーカーを消す */ width:100px; color:#ff6666; line-height: 35px; /* 高さ(40)-ボーダーの幅(5) */ height:35px; /* 高さ(40)-ボーダーの幅(5) */ border-color:rgb(160,160,160); border-style:solid; border-width: 0px 1px; } div.nav li a { font-weight:600; font-size:12px; width:100%; } div.nav li a:hover{ background-color: rgb(180,255,255); } --> </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <div class="Text"> <h2>ArticleTitle</h2> <p> </p> </div> <hr> <div class="nav"><!-- HTML5ではnav要素 --> <ul> <li><a href="/index.html" title="TOPへ">ＴＯＰ</a></li> <li><a href="/book/" title="書籍">書籍</a></li> <li><a href="/product/" title="製品">製品</a></li> <li>このページ</li> <li><a href="/contactUs/" title="コンタクト">コンタクト</a></li> </ul> </div> <hr> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞バックグラウンドの所（#navbar）と、文字を入れている所（#navbar li a） ＞のところがきれいに重なって表示するようにできません。 図が不鮮明で、いまひとつ希望されることがわかりません。 (../images/navbar.gif)画像はこれだけですか？ 文字はこの画像のどこにそろえたいのですか？
お礼
コメント頂き、有難うございます。 #navbarと#navbar li と#navbar li a は同じhight（35） にしてあるので、重なって欲しい（つまり文字は真ん中にくる） ようにしたいということです。
関連するQ&A
- ナビゲーションバーの背景画像が表示されません（CSS）
私は今ホームページを作っておりまして、 先日ウェブデザインについての本を買ったのですがそこに書かれていた スタイルシートの記述例（ナビゲーションバーです）をまねて 自分で記述してみたのですが思うように表示できません。 どなたか教えてください。 ◆問題の部分です◆ スタイルシート div#navi{ width:900px; margin-bottom:7px; padding-bottom:7px;} ul ,li{ margin:0; padding:0; } ul#navbar{ list-style-type:none; width:900px; float:right; } ul#navbar li, ul#navbar li a{ float:left; text-indent:-9999px; display:block; width:100px; height:25px;} ul#navbar li#link a{ background:url(image/menu-kyousitu.png) no-repeat left top; float:right;} 以下同じ様にメニューが続き ul#navber li#sample1{background:url(image/menu-a5.png) no-repeat left top; float:right;} ↑最後のsampleの部分はリンクを張らないようにしたいのでこのように記述したところ、この部分には背景画像が表示されません。 HTML <div id="navi"> <ul id="navbar"> <li id="link"><a href="＊＊">リンク集</a></li> <li id="sample1">sample</li> </div> 見苦しい分で申し訳ありませんが、どなたかよろしくお願いします。
- ベストアンサー
- CSS
- HTML/CSSで配置の仕方がわかりません。
メニューバーの下に画像を挿入すると、メニューバーが消えてしまいます。 また文章を挿入しようとすると、メニューバーの下から文章が続かず、中盤からはじまってしまいます。 すいませんが原因がわかりません。下記にHTMLコード・CSSコードを記載したので、すいませんがわかる方がおりましたら、教えてください。 HTML；<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="test.css"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>What is HTML?</title> </head> <body> <div id="header-top"> <div id="menu1"> <ul id="down1"> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> <li><a href="#" class="pic"><img src="house.png" width="20" height="20"></a></li> </ul> </div> </div> <ul id="dropmenu"> <li><a href="#">Home</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">About US</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Buy</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Q&A</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> <p class="test">Hello</p> ← 問題の箇所、中盤から始まる。 CSS： /*As for header */ #header-top{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(90deg, #05a 10%, #21b3b2 90%); height: 60px; } } #header-in{ width: 997px; margin: 0 auto; } /*As for header top of website */ #menu1 ul{ margin-left: 1000px; margin-top: 10px; padding :0; list-style: none; } #menu1 li{ padding: 0; margin: 0; float: left; } #menu1 li a{ background: url(最初の画像のアドレス) no-repeat left center; padding: 2px 0px 3px 18px; color: #555; width: 100px; margin: 1px 0px; text-decoration: none; border-bottom: 1px dotted #666666; font-size: 18px; } #menu1 li a:hover{ background: url(入れ替わる画像のアドレス) no-repeat left center; } /* drop menuw */ #dropmenu{ list-style-type: none; width: 800px; height: 10px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #535d09; border-radius: 3px 3px 0 0; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #fff; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 200%; height: 0; color: #ff33ff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #ff33ff; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ background: none; color: #ff33ff; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } #top-pic{ } #test{ float: right; }
- ベストアンサー
- HTML
- 【CSSについて】リストをフロートするとfirefoxでボーダーが消える
お世話になっております。 今回は、CSSの質問です。 IE6.0とFF3.0の違いなのですが、ソースを以下に記述します。 ***HTML*** <ul id="navi"> <li><a href="#">風景</a></li> <li><a href="#"> 生き物</a></li> <li><a href="#">建物</a></li> <li><a href="#">乗り物</a></li> </ul> ***CSS*** #navi { margin-left: 0px; padding-left: 0px; list-style-type: none; width: 600px; border-right: 1px solid #333333; } #navi li { float: left; border-left: 1px solid #000000; border-top: 1px solid #333333; border-bottom: 1px solid #000000; width: 149px; } #navi a { display: block; background-color: #ff9900; color: #FFFFFF; text-decoration: none; width: 149px; line-height: 30px; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.5em; } #navi a:hover { background: #00FFFF; color: #000000; } IEではボーダーで区切られたナビがキレイに表示されますが、FFでは右端のボーダーが消えてしまいます。 これもハックしなきゃならないものですか？ とりあえず、背景に画像を使用することで逃げられるのですが、すっきりしませんので対処法を教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳで思うようにいかないところがあります。
現在ＣＳＳ勉強中の初心者です。 ＣＳＳを使って、ナビゲーションシステムを作ろうと、本に書いてある通り、打ち込んでみたのですが、borderで囲まれた部分を1行にしたいのですが、なぜか、2行になってしまっているようです。上の行には表示させたい文字が書かれているのですが、下の行が空欄になってしまって、スペースができてしまいます。ＣＳＳの書き方が悪いのでしょうか？解決方法を教えてください。うまく説明できなくてわかりにくいかもしれませんが、宜しくお願いいたします。 ＣＳＳは以下です。 #nav { margin: 0px; padding: 0px; list-style: none; float:left; width:100%; } #nav li { float:left; background-color:#f0f0f0; border: 1px solid #000; font-size:12px; text-align:center; width:160px; height:20px; margin-top:1px; margin-right:0px; margin-left:3px; } #nav a{ color:#000; width:170px; height:20px; display:block; } #nav a:hover{ color:#fff; background-color:#0f314e; text-decoration:none; height:20px; } HTMLは以下です <ul id="nav"> <li><a href="">ホーム</a></li> <li><a href="">Gallery</a></li> <li><a href="">プロフィール</a></li> <li><a href=""></a>お問い合わせ</li> </ul>
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">©＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- HTML CSS テーブルの表示方法
HTML CSS テーブルの表示方法 JSP・CSSを使用して、テーブルの下に文字を表示したいと思っています。 諸事情有りまして、tableタグは使用せずCSSで解決したいと思っています。 以下よりjspです。 <body id="top"> <div id="container"> <div id="innerContainer"> <div id=header"> <h1><a href="logo.htm"><img src="images/logo.gif" alt="ロゴ" name="logo" id="logologo" /></a></h1> <ul id="header_menu"> <li><a href="map/take.htm">テイク</a></li> <li><a href="map/index.htm">地図</a></li> </ul> </div> </div> </div> <form name="myForm" onsubmit='toList()'> <%= new java.util.Date() %> <Input Type="submit" Value="送信""> </form> </body> 以下よりcssです。 body { width: 1100px; height: 2000px; background-color: lightGreen; } #header { width: 210px; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; border: 5px; text-algin: center; } #logologo { width: 150px; height: 50px; border: none; margin: 1px; float: left; text-algin: left; border: solid 5px; } #header_menu { width: auto; height: auto; border: none; margin: 1px; float: left; text-algin: left; border: solid 5px; } この状態ですと、テイクの真横に現在日時と送信ボタンが表示されてしまいます。 この日時と送信ボタンをロゴの下に表示されるようにするにはどのように記述すればよいでしょうか。
- ベストアンサー
- HTML
- CSSで、指定されていない空白が開く
ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。
- ベストアンサー
- CSS
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- ＨＴＭＬ と ＣＳＳ について
以下のようなＨＴＭＬとＣＳＳですが… <div id="xxx"> <ul> <li id="s-a"><a href="index.html">select a</a></li> <li id="s-b"><a href="index.html">select b</a></li> </ul> </div> ～～～～～～～～～～～～～～～～～～～～ ～～～～～～～～～～～～～～～～～～～～ #xxx { width: 500px ; height: 100px ; } #xxx ul { padding: 10px 0px 0px 50px; } #xxxx li { padding: 0 ; float: left ; } #xxx #s-a a { width: 80px ; height: 30px ; margin: 0 ; padding: 0 ; background-image: url("ssaa.gif") ; float: left ; } #xxxxx #s-b a { width: 80px ; height: 30px ; margin: 0 ; padding: 0 ; background-image: url("ssbb.gif") ; float: left ; } このような手法について、 なぜ id="s-a" id="s-b" id="s-c" は ａ要素ではなくｌｉ要素の中に設定する必要が あるのでしょうか？ 実際、確かにこれをＡ要素に設定すると リンク画像が表示されず消えてしまうことは 確認しました。 それがなぜなのか？ このような手法をとるのはなぜか？ そして、これらは何に絡む話しなのか？ （継承？適用範囲？インラインとかブロック？ ブラウザによる表示の違いへの対応？ Ｗ３Ｃ関連？） ＣＳＳを初心者でよく解りません。 また、持ち合わせの資料や、参考にして いるサイトでもよく解りません。 質問自体が無茶苦茶で、さらには的の広すぎる 質問になっている様な気もし、申し訳ないですが アドバイス、解りやすいサイトなどご存知 な方がおられましたら、ご教授下さいませ。 よろしくお願いいたします。
- 締切済み
- HTML
お礼
ありがとうございました！！ 無事できました！！