柔軟に働き方を選ぶ時代に必要なこと >>

http://webdesign.tutsplus.com/tutorials/site-ele …
のぺーじにある
Big Menus, Small Screens: Responsive, Multi-Level Navigation
というドロップダウンメニューをメガメニューに変更しようとしていますが
2階層目のリストがどうしても横並びにできません。

cssは下記の箇所のどこかに「float:right;」を入れればよいと考え、いろいろ触りましたが、
2階層目が表示されなくなったり、3階層目が表示されなくなったりします。

.nav > li > a {
display: block;
}

.nav li ul {
position:absolute;
left: -9999px;
border: 1px solid #ccc;
background: #ffffff;
}

.nav > li.hover > ul {
left: 0;
}

.nav li li.hover ul {
left: 100%;
top:0;
}

.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
}

.nav li li ul {
background:#249578;
z-index:200;
}

.nav li li li a {
background:#249578;
z-index:200;

}

メガメニューはjqueryを使って作っている紹介ページがあり
試しましたが、そうすると、レスポンシブ(小さい画面)した際の
開閉式のメニューが動作しなくなりました。

どうかご教示ください。お願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ごく簡単な例を挙げておきます。


 仕組み自体は、スタイルシートでの値、カスケーディングを知っていれば実に簡単なものです。スタイルシートを学ぶときは、やはり仕様書順にきちんと順序だてて学ばないと・・。
仕様書でも
5.セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
6.値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 プロパティの説明はその後
8.ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 です。

★以下に順序だてて説明しておきますが、あなたの文書構造とは異なるので、それに合わせてしっかり理解して作業してください。
★以下はタブを全角スペースに置換してあります。使うなら戻すこと
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★理解して作業しないと絶対に出来ません。HTMLは率直に書き、スタイルシートを理解さえすればどのようにでもデザインできます。
 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
 このサイトで、表示メニューからスタイルシートを選択すると、このあたりがよくわかるでしょう。
★一見複雑ですが、単純な配置をただ繰り返しているだけです。

目次として次のようにマークアップされていたとします。
 <div class="nav" id="contentTable">
  <ol>
   <li>最初に</li>
   <li>第一節
    <ol>
     <li>第一節第1章
      <ol>
       <li>第一節第1章第1項</li>
       <li>第一節第1章第2項</li>
       <li>第一節第1章第3項</li>
      </ol>
     </li>
     <li>第一節第2章
      <ol>
       <li>第一節第2章第1項</li>
       <li>第一節第2章第2項</li>
      </ol>
     </li>
    </ol>
   </li>
   <li>第二節
    <ol>
     <li>第二節第1章
      <ol>
       <li>第二節第1章第1項</li>
       <li>第二節第1章第2項</li>
       <li>第二節第1章第3項</li>
      </ol>
     </li>
     <li>第二節第2章
      <ol>
       <li>第二節第2章第1項</li>
       <li>第二節第2章第2項</li>
       <li>第二節第2章第3項</li>
      </ol>
     </li>
    </ol>
   </li>
   <li>第三節
    <ol>
     <li>第三節第1章
      <ol>
       <li>第三節第1章第1項</li>
       <li>第三節第1章第2項</li>
       <li>第三項第1章第3項</li>
      </ol>
     </li>
    </ol>
   </li>
   <li>第四節
    <ol>
     <li>第四節第1章
      <ol>
       <li>第四節第1章第1項</li>
       <li>第四節第1章第2項</li>
       <li>第四項第1章第3項</li>
      </ol>
     </li>
    </ol>
   </li>
  </ol>
 </div>


/* content Table(目次)の横幅を指定しておきます。ウィンドウの80%で中央 */
div#contentTable{
 width:80%;min-width:640px;margin:0 auto;
 text-align:center;line-height:2em;/* これらは継承されるのでここで書いておく */
}
/* 次いでリストをblockに変更し、その他細かい設定 */
div#contentTable ol,div#contentTable ol li{
 display:block;
 list-style:none;
 margin:0;padding:0;
 position:relative;/* 子孫達が位置やサイズの基準に出来るよう */
}
div#contentTable ol{width:100%;}/* 親のdiv#contentTableいっぱい */
div#contentTable ol li{
 display:inline-block;/* 横並び */
 width:18%;
 border:solid gray 1px;
}
div#contentTable ol li ol{
 position:absolute;
 top:2em;left:-1px;
 width:100%;margin:0;
}
div#contentTable ol li ol li{
 width:100%;
 display:block; /* blockに戻しておく */
}
div#contentTable ol li ol li ol{
 top:0;
 left:100%;
}

/* ここから下はおまけ */
div#contentTable ol li:last-child ol li ol{
 left:-100%;/* 最後のものがはみ出したらまずいので */
 /* CSS2.1ならdiv#contentTable ol li+li+li+li+li ol li ol */
}
div#contentTable ol li:last-child ol li ol li{left:-2px;}/* border分微調整 */
/* 色づけ */
div#contentTable ol li:hover{background-color:yellow;}
div#contentTable ol li ol li:hover{background-color:rgb(255,255,120);}
div#contentTable ol li ol li ol li:hover{background-color:rgb(255,200,160);}

/* 以下:hover処理 */
div#contentTable ol li ol{display:none;}
div#contentTable ol li:hover ol{display:block;}
div#contentTable ol li:hover ol li ol{display:none;}
div#contentTable ol li ol li:hover ol{display:block;}

/* ちょっとした遊び */
div#contentTable ol li:hover:before{content:"▲";position:absolute;left:-1em;top:0:color:red;}
    • good
    • 0
この回答へのお礼

ありがとうございます。
大変勉強になります。
早速コピーして読解しております。
リストを使ったメニューはサンプルが多々あり、いつもコピーして使っていたので、基本を理解せずに使っておりました。
ここから下はおまけの部分も大変参考になります。
ありがとうございました。

お礼日時:2013/03/18 21:40

・横並びと言うことは、inlineないしinline-blockですね。

より詳細度が高い形でblockを指定しなおすと良いでしょう。
・子供セレクタを使われていますが、子孫セレクタで設定して行くほうが楽ですし後方互換もあります。
・positionで位置を指定するときは、その直近のstaticでない親コンテナブロックのサイズや位置を参照します。
 これらに注意すると、階層の深さに関わらず縦に並べたり横に並べることが出来るでしょう。
    • good
    • 0
この回答へのお礼

ありがとうございます。
2段目のメニューを横並びにすることのみ、作成すると
ul ul li {
display: inline;
}
でできたのですが、
参考としているソースの子セレクタを子孫セレクタに帰ると、表示がくずれるため、どこを変更してよいのかわからない状態です。
子供セレクタから子孫セレクタに変更しないとできないのでしょうか?

お礼日時:2013/03/18 15:24

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q
  • で改行する横並びのメニュー
  • <ul><li>を使って横並びのメニューを作っています。項目が増えると横幅いっぱいになるためメニューが2行になるのですが、項目の途中で改行されて困っています。

    │●リンクA ●リンクB ●リンクC ●リン│←ページ右端
    │クD ●リンクE

    項目の途中で改行せずに↓こうしたいと考えています。

    │●リンクA ●リンクB ●リンクC    │←ページ右端
    │●リンクD ●リンクE

    リストタグを使わずに<br>で改行を入れる方法は使いたくありません。いい方法をご存知の方がいましたら教えてください。よろしくお願いします。

    Aベストアンサー

    難しく考えすぎ。単純に改行されたくなければ、幅固定が一般的だけど、文字数で幅がかなり違う場合には、ブロックにして li や a 内に限り改行禁止にする。

    li{ display:block } が一般的。

    あとは、アンカーの前後に文字が付属する場合なら
    li{ white-space: nowrap; } li a{ display:block;}

    こうやれば、
    li や a を margin,paddingで調整。border で囲ったり background や color で色々出来る。
    また、この場合、
    ブラウザでフォントサイズのみを大きく変更された場合に、段落が増えるのでリンクメニューの順序も多少考慮し標準サイズで右側が短い文章の項目になるようにデザインも考慮しなければいけない。

    QjQueryを使用してのメガメニューの記述

    色々試してみたのですが、どうしてもわからず、
    どうかお知恵をおかしください。
    宜しくお願いいたします。

    こちらの紹介サイトを参考に、メガメニューを作成しております。↓
    http://codesign.verse.jp/jquery/2009/08/megamenu.html

    メガメニューボタンにマウスオーバーしたときに、
    DIVに指定しているmm-div内のものが表示されるよう指定されているのですが、
    そのメニューの中でいくつかmm-divのサイズを変更したく、
    それに伴いjQueryで表示させる位置の指定を複数記述したいのですが、
    jQueryを勉強不足のため、どうしてもうまくいきません。

    mm-divはCSSでサイズを記述しているので、
    別途指定するものとして新しいDIVに指定するタグとして
    mm-div2を準備しましたが、1つに連動してしまいます。

    説明べたで申し訳ありませんが、
    mm-divとmm-div2それぞれに別の位置が指定できる記述に仕方を教えてください。

    $(function(){


    var target=$("div#megamenu");
    var tli=$("ul#mm-ul > li.mm-li");
    var tdi=$("div.mm-div",tli);
    /*
    if($.browser.msie && ($.browser.version<8)){
    var th=;
    }else{
    var th=0;
    }
    */

    tli.hover(
    function(){
    $("*:animated",tdi).hide();
    $(this).animated();
    },
    function(){
    tdi.hide();
    }
    );


    $.fn.animated=function(){
    var posx=$(this).offset().left+tdi.width();
    var posbase=tli.offset().left+target.width();

    /*地味に計算するための場所orz
    $("p#showpos").text(posx);
    $("p#winwidth").text(posbase);
    */

    tdi.hide();


    if(posx>posbase){
    $(this).children()
    .css("left",-posx+target.width())
    .css("top","25px")
    .fadeIn("fast");
    }else{
    $(this).children()
    .css("left","5px")
    .css("top","25px")
    .fadeIn("fast");
    }

    return $(this);
    }

    });

    色々試してみたのですが、どうしてもわからず、
    どうかお知恵をおかしください。
    宜しくお願いいたします。

    こちらの紹介サイトを参考に、メガメニューを作成しております。↓
    http://codesign.verse.jp/jquery/2009/08/megamenu.html

    メガメニューボタンにマウスオーバーしたときに、
    DIVに指定しているmm-div内のものが表示されるよう指定されているのですが、
    そのメニューの中でいくつかmm-divのサイズを変更したく、
    それに伴いjQueryで表示させる位置の指定を複数記述したいのですが、
    jQueryを勉強不足の...続きを読む

    Aベストアンサー

    回答がないみたいなので…

    >1つに連動してしまいます。
    div要素の幅を計算するのに、tdi.width()を使っていますが、tdiは各メニュー下のdivの配列なので、widthの計算にはその最初の要素が使用されるようです。
    (作者さんは、CSSでdivの幅を一律にするつもりなのでしょうから、これで問題はないのですが)
    このために、いつでも最初の要素の幅が計算に使われることになっているので、この部分の計算にそれぞれの要素の幅を参照するようにしてあげればよろしいかと。
    一方、ご提示のスクリプトでは、表示する時に毎回位置の計算をするようになっていますが、divのサイズが動的に変化するのでもない限り毎回計算する必要はなく、最初に1度だけ計算するようにしたほうが効率的です。
    そうすることで、animated()というメソッドの追加も必要なくなるので、イベント処理は単に対象divをfadeInするだけで済むようになると思われます。

    >mm-divとmm-div2それぞれに別の位置が指定できる記述に仕方を教えてください。
    サイズを指定したいのか位置を指定したいのかで変わってきますが、それぞれをCSSでちゃんと指定するのなら、スクリプトで位置を調整している部分をはずしてしまえばよいのでは?
    (基本の位置は基本のCSSで指定しておいて、特殊なものだけ個別指定するといった感じです。現状はCSSに指定が無いみたいなので、基本の部分を追加する必要はありますが)
    表示/非表示の制御だけなら以下で済むでしょう。

    (全角空白は半角に)
    $(function(){
     var tli=$("ul#mm-ul > li.mm-li");
     var tdi=$("div.mm-div",tli);

     tli.hover(
      function(){
       tdi.hide();
       $(this).children("div.mm-div").fadeIn("fast");
      },
      function(){
       tdi.hide();
      });
    });

    回答がないみたいなので…

    >1つに連動してしまいます。
    div要素の幅を計算するのに、tdi.width()を使っていますが、tdiは各メニュー下のdivの配列なので、widthの計算にはその最初の要素が使用されるようです。
    (作者さんは、CSSでdivの幅を一律にするつもりなのでしょうから、これで問題はないのですが)
    このために、いつでも最初の要素の幅が計算に使われることになっているので、この部分の計算にそれぞれの要素の幅を参照するようにしてあげればよろしいかと。
    一方、ご提示のスクリプトでは、表示する時...続きを読む

    Qulタグやliタグの中でbrタグは使えない?

    完成したサイトなのですが…。
    Dreamweaverにて開いて一応チェックすると、
    「タグbrはur内では使用できません」との表示がでて驚いています。

    <li>~</li>だけで自動的になされる改行だと、詰まって見えるのです。
    だから、

    <ul style="padding-left: 00px;">
    <li>~</li></br>
    <li>~</li></br>
    </ul>

    のようにして処理しております。ただ、これってSEO的にマズい、ということなのでしょうか?
    どうか、ご存知の方いましたら教えてください。

    Aベストアンサー

    SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
    →10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

    <!ELEMENT UL - - (LI)+ -- unordered list -->
    ulには、「li要素のみを一個以上もつ。」と書かれています。


    <!ELEMENT LI - O (%flow;)* -- list item -->
    li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

    読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3.1 )を参照すること

    したがって
    <ul>
     <li>・・・<br>
     <li>・・・<br>
    </ul>
    とは書けます。(HTMLの場合)
    その場合、ブラウザは
    <ul>
     <li>・・・<br></li>
     <li>・・・<br></li>
    </ul>
    と解釈します。(XHTMLはこう書かないとならない)

    ★もっと、はるかに大事なこと
    「<li>~</li>だけで自動的になされる改行だと、詰まって見えるので」<br>を入れるは、HTML的には最大の間違いです。こちらのほうがはるかに重要!!
     構造とプレゼンテーションは区別すること。デザインのためにHTMLを書いてはなりません。
     2.3.2 アクセス性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )

    スタイルシートで、
    ul li{margin-bottom:1em;}
    だけでよい。

    SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
    →10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

    <!ELEMENT UL - - (LI)+ -- unordered list -->
    ulには、「li要素のみを一個以上もつ。」と書かれています。


    <!ELEMENT LI - O (%flow;)* -- list item -->
    li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

    読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp...続きを読む

    Qアコーディオンで開かれたパネルの位置にスクロール

    アコーディオン作成でぶつかってしまったので質問させてください。

    下記サイトを参考にスマホサイトにアコーディオンを作成しました。
    http://pops-web.com/main/html/demo-007.html


    タブをクリックしたと同時に開かれているパネルの上部にスクロールさせたいのですが、
    知識が貧しく苦戦しております。
    理想は下記のURLのような動きにしたいと思っています。
    http://lab.boy.jp/demo/accordion/index.html

    どなたかお分かりの方がおられましたらご教授頂けないでしょうか。
    宜しくお願いいたします。


    <h3 class="trigger">ここにタイトル</h3>
    <div class="content">
    <div class="deta">ここに内容</div>
    </div>

    <h3 class="trigger">ここにタイトル</h3>
    <div class="content">
    <div class="deta">ここに内容</div>
    </div>

    </div>

    //Accordion
    (function($){

    $(function(){

    //オブジェクトを保存
    var accordionItem=$('#accordion');
    //一旦全部消す
    accordionItem.find('.content').hide();

    //active要素を指定して開く
    var no=0;
    accordionItem.find('.trigger').eq(no).addClass('active').next('.content').show();

    //click-action
    accordionItem.find('.trigger').click(function () {

    //slide
    $(this).next('.content').slideToggle('slow')
    .siblings('div:visible').slideUp('slow');


    //activeクラス切り替え
    $(this).toggleClass('active');
    $(this).siblings('.trigger').not($(this)).removeClass('active');


    });

    //hover-toggle
    accordionItem.find('.trigger').hover(function () {

    //toggle hoveredクラス
    $(this).toggleClass('hovered');
    return false;

    });
    });

    })(jQuery);



    「//activeクラス切り替え」の下に以下の2行を追加したのですが、
    下の方のタブになるとスクロール位置が正しい位置にスクロールされませんでした。。
    var scposi = $(".trigger.active").offset().top;
    $('body,html').animate({ scrollTop: scposi });

    アコーディオン作成でぶつかってしまったので質問させてください。

    下記サイトを参考にスマホサイトにアコーディオンを作成しました。
    http://pops-web.com/main/html/demo-007.html


    タブをクリックしたと同時に開かれているパネルの上部にスクロールさせたいのですが、
    知識が貧しく苦戦しております。
    理想は下記のURLのような動きにしたいと思っています。
    http://lab.boy.jp/demo/accordion/index.html

    どなたかお分かりの方がおられましたらご教授頂けないでしょうか。
    宜しくお願いいたします。


    <h3 ...続きを読む

    Aベストアンサー

    ANo2です。 こんにちは。

    >他ページからのアクセスで、指定したパネルを開いた状態にすることは可能でしょうか?
    原理的には可能と思います。
    考え方や方法は検索すればたくさん見つかると思いますが、ご提示のHTMLソースの場合、各H3.targetあるいはDIV.contentの要素に個別の識別子が設定されていないので、通常よく用いられている方法は使えないですね。
    ソースを修正するか別の方法で行うかということになりそうです。


    別の方法の案の一例として…
    「location.hashで指定する内容はアコーディオンの順番を示す」というようなルールを決めて、#menu0、#menu1・・・などという指定の仕方にしておくなら、そこから0、1・・・部分を取得して、それに対応するh3要素をクリックしてあげればよくなります。
    この処理をonload時に行うようにしておけば良いでしょう。
    (hashの指定がなければ0を指定されたことにする)


    スクリプトをOFFにしている閲覧者に対して、できるだけ機能を損なわないようにすることを考えるなら、通常のページ内リンクが効くように、HTML内に識別子を設けておくほうがよろしいかと思います。

    ANo2です。 こんにちは。

    >他ページからのアクセスで、指定したパネルを開いた状態にすることは可能でしょうか?
    原理的には可能と思います。
    考え方や方法は検索すればたくさん見つかると思いますが、ご提示のHTMLソースの場合、各H3.targetあるいはDIV.contentの要素に個別の識別子が設定されていないので、通常よく用いられている方法は使えないですね。
    ソースを修正するか別の方法で行うかということになりそうです。


    別の方法の案の一例として…
    「location.hashで指定する内容はアコーディオンの順番を...続きを読む

    Q一部CSSを無効にする

    数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
    そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
    CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
    目的のものに辿りつけず…困っています。宜しくお願いします。

    Aベストアンサー

     とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

    参考URL:http://www.tohoho-web.com/css/basic.htm

    QHTMLのでリンクが開かない…

     作成したHTMLファイルを実行して時々 起こる現象なのですが…

     同じフォルダ内に、たとえば、[xxx.html]と[yyy.html]の2つのファイルがあって、単独ではそれぞれ問題なく開くのですが、HTMLの中に次の2つの文を記述して、これを実行した時に、[yyy]は開くのに、[XXX]がどうしても開かないことがあります。

       <a href="xxx.html">XXX</a>
       <a href="yyy.html">YYY</a>

     記述の文字に問題がないように、文章作成する際に、両方の<a href="...">~</a>をコピペして、ファイル名もフォルダに表示されるファイル名をわざわざコピーして<a href="...">に貼り付けています。つまり、記述上は問題がないようにしています。

     この現象はオフライン(WEBに乗せていない状態)でも起こるのですが、WEBにアップロードしても同じように開けません。また、特定のHTMLファイルでなく、HTML文を作っていて時々起こります。

     どうしてなのでしょうか…? 理由と解決方法をお教えください。よろしくお願いします。

     作成したHTMLファイルを実行して時々 起こる現象なのですが…

     同じフォルダ内に、たとえば、[xxx.html]と[yyy.html]の2つのファイルがあって、単独ではそれぞれ問題なく開くのですが、HTMLの中に次の2つの文を記述して、これを実行した時に、[yyy]は開くのに、[XXX]がどうしても開かないことがあります。

       <a href="xxx.html">XXX</a>
       <a href="yyy.html">YYY</a>

     記述の文字に問題がないように、文章作成する際に、両方の<a href="...">~</a>をコピペして、ファイル名もフォルダに...続きを読む

    Aベストアンサー

    href="75h/..." を、href="./75h/..." に修正してみてください。

    それから、lintで既に確認済かもしれませんが、タグの誤使用が気になりました。
    <li>タグは単独では使用できません。
    <td>
    <ul>
    <li>内容。。。
    </ul>
    </td>
    のように記述します。

    で、本題ですが、ローカルの拡張子が違っているといった問題ではありませんか?
    .htmであるはずが、.htm.txtになっている、など。

    URLエンコードするとどうなりますか?
    「 - 」→「 %2D 」
    「 _ 」→「 %5F 」

    "75h/WBR75H_Win-VerUP.htm"
      ↓
    "75h/WBR75H%5FWin%2DVerUP.htm"

    参考URL:http://validator.w3.org/check?uri=http%3A%2F%2Fmembers.at.infoseek.co.jp%2Fpersonalnet%2F

    Qホームページビルダーでプルダウンメニュー作成

    質問させていただきます。HP作成中です。素材サイトにあるようなプルダウンメニューを作成したいのですがどのような方法で作成するのでしょうか?こちらのサイトです。http://www.s-chimp.com/mc/
    メニューをクリックするとサブメニューが表示されます。理想としては違うメニューをクリックしたときに他のサブメニューが表示されたままではなく閉じると嬉しいです。初心者なので難しいことは出来ないと思うのですがどなたかお願いいたします。

    Aベストアンサー

    ホームページビルダーの機能にはありませんので
    こちらの メニュー か 個人的に使ってみたいスクリプト を参考にしてください

    http://www.wsb.jp/hpb/java_s/top.htm


    人気Q&Aランキング

    おすすめ情報