• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:画像を挿入して横並びのメニューリストを作ったのです)

画像を横並びのメニューリストに挿入する方法

このQ&Aのポイント
  • 画像を横並びのメニューリストに挿入しようとしていますが、margin-topとmargin-bottomが効かない問題が発生しています。
  • ul#menuとして指定した要素にmargin-leftを設定しましたが、効果がありません。
  • 解決方法を教えてください。

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>本来、スパンタグはそれ自身は意味を持たず、文章の一部を修飾するタグですよね? 【引用】____________ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。 従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より  修飾するというより、特定の意味を持たせるためです。他のフレーズ要素(EM、STRONG、DFN、CODE、 SAMP、KBD、VAR、 CITE、ABBR、及びACRONY)では足りない場合に使います。  具体的には<span class="mark">別の場所からも参照される語句</span>と言う風に使うことが多いでしょう。(markはHTMLから導入されるこの意味を持つ要素です。「3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」)  ここでは、単純にスタイルシートの(タイプセレクタ)ためだけに使ってます。 div.nav ol li a span{/* ナビゲーションブロック内の ol内のli内のa内のspan */  visibility:hidden;/* 表示はしないけど存在する */ } ★このclass名のnavもHTML5で導入されるナビゲーションを示す要素を参考につけています。HTML5では、下記のように、そのまま要素として記述できます。そのためにIDではなくclass名としてあります。 <nav id="menue">  <ul>   <li><a href="./"><span>トップへ</span></a></li>   <li><a href="./"><span>トップへ</span></a></li>   <li><a href="./"><span>トップへ</span></a></li>   <li><a href="./"><span>トップへ</span></a></li>  </ul> </nav> スペースがあるので詳しく説明しておきます。 div.nav ol,div.nav ol li{  display:block;list-style:none;margin:0;padding:0; } /* 同じプロパティを複数回書くのは無駄なのでセレクタは,で区切ってグループ化してあります。  リストを単なるブロック要素に置換しておきます。  リストに対してブラウザごとにmarginやpaddingの設定が異なりますから、marginとpaddingもブラウザのデフォルトの設定を消しておきます。ここのプロパティ記述は定番として覚えておくと便利です */ div.nav ol{/* ナビゲーションセクションのolについての記述 */  height:59px;/* 高さを確保しておきます */  width:auto;margin:0 45px;/* 左右を45px開けて中央配置 */ } div.nav ol li{/* 子孫セレクタ詳細度は[0,0,1,3] */  float:left;/* floatさせます */  width:20%;/* リキッドスタイルの場合は親のolの巾によります */  background-image:url() /* 注 */ } div.nav ol li+li{/* 兄弟セレクタでliの兄弟のliのみ適用されます */  margin-left:10px; } div.nav ol li a{ display:block;/* 行内要素であるaをブロックにします */ width:100%;/* そのうえで、li要素いっぱいまで広げます */ height:100%;  background-image:url() /* 注 */ } 固定サイズで行う場合は、%の部分をpxにしてください。その場合はウィンドウ巾が異なるユーザーには不便かもしれません。特にi-padやi-phoneの場合・・

mx5gg
質問者

お礼

ありがとうございました。 HTML5と従来のHTMLとは、けっこう違いますね。私もそろそろHTML5の書き方を取り入れていこうと思います。

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

HTMLが間違ってます。 <div id="menu">   <ul>     <li><a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li>     <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li>     <li><a href="#"><img src="〇〇.jpg"alt="〇〇" width="167" height"59"/></a></li>     <li><a href="#"><img src="△△.jpg"alt="△△" width="167" height"59"/></a></li>   </ul> </div> だとします。(HTML5への移行を考えると、<div class="nav" id="menue">としたほうが良いでしょう。HTML5では、<nav id="menue">と書くことになります。) この場合スタイルシートは #menue ul,#menue li{display:block;list-style:none;margin:0;padding:0;}/* 定番 */ とした上で、 #menue{height:○○px;} #menue li{float:left;} #menue li+li{margin-left:14px;} で良いでしょう。 なお、もっと良い書き方は <div class="nav" id="menue">  <ul>   <li><a href="./"><span>トップへ</span></a></li>   <li><a href="./"><span>トップへ</span></a></li>   <li><a href="./"><span>トップへ</span></a></li>   <li><a href="./"><span>トップへ</span></a></li>  </ul> </div> div.nav ol,div.nav ol li{  display:block;list-style:none;margin:0;padding:0; } div.nav ol{  height:59px;  width:auto;margin:0 45px; } div.nav ol li{  float:left;  width:20%;  background-image:url() /* 注 */ } div.nav ol li+li{  margin-left:10px; } div.nav ol li a{ display:block; width:100%; height:100%;  background-image:url() /* 注 */ } div.nav ol li a span{  visibility:hidden; } (注)背景画像が個別に違う場合は<a href="style="url()">で指定するか、hrefの値を元にスタイルシートで指定する。後者は、後日HTMLを変えなくても変更できる利点があります。 例  div.nav ol li a[href="./index.html"]{background-image:url();}  div.nav ol li a[href="./books"]{background-image:url();} とか・・ ★なお、いずれもタブを全角スペースに置き換えてあるので戻してください。

mx5gg
質問者

補足

度々、ありがとうございます。うまくいきました。 ご回答を受けて質問なのですが、<li><a href="./"><span>トップへ</span></a></li>のスパンタグを使う意図を教えて頂けないでしょうか? 本来、スパンタグはそれ自身は意味を持たず、文章の一部を修飾するタグですよね?

すると、全ての回答が全文表示されます。

専門家に質問してみよう