いつもこちらではお世話になり、ありがとうございます。

cssのli:hoverを使ってサブメニューを表示させようとしていますが、
縦並びのサブメニューの枠線が重なってくれません。

どこが間違えているのでしょうか。
ご指摘をお願いいたします。
(素人ですので、他にもつっこみどころがかなりあると思います。
すみません(汗))

【html】

<ul class="menu">
<li><a href="menu1.html" >メニュー1</a></li>
<li><a href="menu2.html">メニュー2</a>
<ul>
<li><a href="submenu1.html">サブメニュー1</a></li>
<li><a href="submenu2.html">サブメニュー2</a></li>
</ul>
</li>
<li><a href="menu3.html" >メニュー3</a></li>
<li><a href="menu4.html" >メニュー4</a></li>
</ul>


【css】

ul.menu {
margin: 0px;
padding:0;
list-style-type : none;
}

ul.menu li {
margin:0;
float:left;
width: 107px;
line-height: 43px;
}


ul.menu li a{
display:block;
text-align:center;
text-decoration: none;
background-image: url(images/navi_b.png);
background-repeat: no-repeat;
color: #202020;
font-family: "メイリオ";
font-size: 11px;
}

ul.menu li a:hover{
background-image: url(images/navi_r.png);
}

ul.menu li ul{
display: none;
position: absolute;
top: 165px;
left: 210px;
list-style-type : none;
background-image: none;
}

ul.menu li:hover ul{
display: block;
}

ul.menu li ul li{
clear: left;
width: 106px;
line-height: 35px;
border: 1px #989590 solid;
border-collapse: collapse;
}

ul.menu li ul li a{
background: none;
background-color:#B28872;
color:#ffffff;
}

ul.menu li ul li a:hover{
background: none;
background-color: #643E3E;
color:#ffffff;
}

よろしくお願いします。

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

A 回答 (5件)

すいません…改変css貼るの忘れてました…


@charset="EUC-JP";

#header{
position:relative;
x-index:100; /*ボックスが一番上の階層に表示される様に設定*/
  width:100%; /*win IE6 対策*/
height:101px;
background:#ffffff;
}

#navigation{
position:absolute;
top:37px; /*プルダウンメニューのtopからの位置*/
left:206px; /*プルダウンメニューのleftからの位置*/
width:536px; /*プルダウンの全体の幅*/
}

#navigation ul{
margin:0;
padding:0;
list-style:none;
}

#navigation li{
float:left;
width:107px;
margin:0;
}

div#navigation li a{
display:block; /*これが無いと親メニューが表示されない*/
width:100%; /*IE6対策*/
padding:6px 0 8px 0;
text-align:center;
color:#d2691e;
text-decoration:none;
background-color:#4c924d;
}

div#navigation li a:hover{
background-color:#297e27;
}

#navigation ul ul{
background:#eeeeee;
display:none;
}

#navigation ul ul li{
float:none; /*親メニューをfloatして横並びにしているので
ここで解除して子メニューを通常の縦並びにする*/
position:relative;
background:#eeeeee;
}

#navigation ul ul li a{
border-top:1px solid #ffffff;
background:none;
font-size:90%;
font-weight:normal;
padding:6px 0;
}

#navigation ul ul li a:hover{
color:#ffffff;
background-color:#ec8602;
}

#navigation ul li:hover > ul{ /*CSSでプルダウンをする上でのキーコードがこの#navigation ul li:hover > ulです*/
background-image:none;
display:block; /*ここでblockする事により表示される*/
}
    • good
    • 0
この回答へのお礼

いろいろと詳しくご説明いただいてありがとうございました。

無事、思い通りに表示させることができました。

お礼日時:2011/05/18 15:42

度々失礼。


ALLCSSでやるならこのサイトがお勧めです。
簡潔かつ解り易いです。

参考URL:http://ezorisu-web.com/web-design/archives/356
    • good
    • 0

再度書き込み致します。


今丁度こう言うテンプレートサイト作ろうかと思ってて
丁度横並びプルダウンの簡素化ソース作ったので見てみて下さい。
私物ページで申し訳ないんですが&素人作成の為もう少し削れるcssもあるかも?
ちなみにページはJavaScriptをタグに直接コピーしてある。かつプルダウンが
増えれば同じのをコピペでOKという参考書の丸映し仕様…
参考サイトページのCSSです。
@charset="EUC-JP";

#header{
position:relative;
z-index:100; /*ボックスが一番上の階層に表示される様に設定*/
  width:100%; /*win IE6 対策*/
height:101px;
background:#ffffff;
}

#navigation{
position:absolute; /*これでプルダウンメニュ―が単独(全部)で場所移動出来る*/
top:37px; /*プルダウンメニューのtopからの位置*/
left:206px; /*プルダウンメニューのleftからの位置*/
width:536px; /*プルダウンの全体の幅*/
}

#navigation ul{
margin:0;
padding:0;
list-style:none;
}

#navigation li{
float:left; /*これで親プルダウンを横にしている*/
width:107px;
margin:0;
}

div#navigation li a{
display:block; /*これで表示するようにしている(ブロック化)*/
width:100%; /*IE6対策*/
padding:6px 0 8px 0;
text-align:center;
color:#d2691e;
text-decoration:none;
background-color:#4c924d;
}

div#navigation li a:hover{
background-color:#297e27;
}

#navigation ul ul{
background:#eeeeee;
}

#navigation ul ul li{
float:none; /*親メニューをfloatして横並びにしているので
ここで解除して子メニューを通常の縦並びにする*/
}

#navigation ul ul li a{
border-top:1px solid #ffffff;
background:none;
font-size:90%;
font-weight:normal;
padding:6px 0;
}

#navigation ul ul li a:hover{
color:#ffffff;
background-image:none;
background-color:#ec8602;
}

#navigation ul li.parent ul{
display:none; /*これが非表示命令*/
}

#navigation ul li.parentOn ul{
display:block; /*これが表示命令*/
}
色々要点はすでに書いてあるので理解してみて下さい。
オールCSSだけで表現したいのでしょうか…
何となくあんまりにていたので一緒かと思った物で・・・

参考URL:http://sky.geocities.jp/abakavu/sample/pds1.html
    • good
    • 0

ul.menu li ul{


内の
position: absolute;
top: 165px;
left: 210px;
を理解されていないようです。外してみて、表示させてみてください。

次に

position: absolute;/*これだとbodyの基点からの距離*/
position:relative;/*これだと本来ある筈の場所からの距離*/
を選び、
top: -20px;/*ここで位置の調整をします。マイナスの値もいれられます。*/
left: -20px;/*ここで位置の調整をします。マイナスの値もいれられます。*/

>縦並びのサブメニューの枠線が重なってくれません。
の意味がわからなかったので、外していたらごめんなさい。
    • good
    • 0

趣味でWEBページ作ってる者です。


まずcssの下から4つめのli:hoverは無かったような…付けるならa要素のみだったと思います。
これ消すだけでも表示が変わると思います。
ちなみにプルダウンメニューとしてしっかりしていて、そのメニューの出方だけが問題ありってことですか?
そういう風にとれる質問だったので…
ul.menu li ul{
display: none;      ←下のdisplay:block;とdisplay:none;が喧嘩してそうです。
position: absolute;      でも上手く表示されてるなら問題は無い(無くもないですが)
top: 165px;        ←このtopと下のleftでプルダウンメニューの表示位置を指定しているので、
left: 210px;           ここら辺で微調整してみて下さい
list-style-type : none;
background-image: none;
}

ul.menu li:hover ul{   ←上記で述べたものですこれだと恐らくli:hoverが認識されていない↑
display: block;
}

上記の解説ですが、ブロックレベル要素(ulのみがブロックレベル要素)これをposition:absolute;において
その要素からの距離をtopとleftで指示してそのプルダウンメニューを表示させる位置が決められます。
って事で大丈夫ですか?
ちなみにli:hoverですが認識してないので上と下のCSSは同一扱いだと思います。
その際position:absolute;とnone;がどちらが採用されているかが良くわかりません。(表示による)
あとdisplay:block;とnone;はli aとli a:hoverに対してのみの設定で普通に機能すると思います。
li a{display:block;}
li a:hover{display:none;}
こんな感じで良いと思います。
あとはみ出して合わない場合は
overflow;hidden;(ブロック要素からのはみだし禁止)
overflow:visible;(ブロック要素からのはみだしさせる:デフォルト)
これを使うとはみ出して変に重なりあったりするのを制御出来ます。
    • good
    • 0

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q国語のまとめノートの作り方を教えてください!!

中学生です。
近々定期試験があるのですが、国語のまとめノートの作り方が分かりません!
社会や理科は大切な用語などを分かりやすくまとめ、色ペンなどで見やすくするのですが……
そもそも国語の勉強方法が分かりません……まとめノートを作ること自体間違っているのかも………
筆者が言いたいことなどをまとめれば良いのでしょうか?
回答お願い致します。

Aベストアンサー

http://www.all5.jp/subject/category_28.html

Q【CSS】【HTML】横並びメニューについて ホームページに上画像のような4つボタンのある横並びメニ

【CSS】【HTML】横並びメニューについて
ホームページに上画像のような4つボタンのある横並びメニューを作りました。
ぼかしている部分と赤と黄色の棒を背景とし、その上にボタン部分となる各4つの画像を重ねています。

しかし4つの画像をピクセルで位置のの指定をしているため、ページ全体をセンタリングすると、各ボタン画像が背景について行かず下の画像のようになります。

ページ全体をセンタリングした場合も上画像のようにするためにはどうしたら良いのでしょうか?

ページは1000px程度で考えています。
さらにこのページを1920pxまで横に伸ばした場合に余白部分に赤と黄色の棒部分を表示させる方法があれば教えていただきたいです。(メニューから端まで同じデザインが続く感じ)
イメージはhttp://www.kumamoto-med.jrc.or.jpのホームページのような感じです。

ちなみにボタンはa:hoverで切り替えています。

Aベストアンサー

ソース拝見しました。

画像を横並びにする方法は色々ありますが、position: absolute;を使うケースはほとんどありません。
position: absoluteを使うにしても、position:relativeで、起点となる親要素を指定するのが重要です。
今回、画像がずれるという現象も、それに起因しています。

(1) floatとclearfixを用いる方法(floatとその解除)
(2) インライン要素に変えて並べる方法(ブロック要素とインライン要素)

既に古いですが、古いと言っても、この2つがレイアウトの基本です。
これができなければCSSを自身で記述してWebサイトを作るのは無理です。

ただ、今どきは、CSSフレームワークといって、CSSを自身で記述できなくとも、
特定のルールに沿ってクラス名を付与していけば、簡単にレイアウトが組める方法がありますので、
そちらのやり方をオススメします。

"Bootstrap 使い方"で検索してみてください。

こちらをぜひ使いこなして、カッコいいサイトを作ってみてください。

QノートPCのワイド液晶は縦が狭くなって不便?

現在、デスクトップPCで、解像度1280x1024の17インチ液晶ディスプレイを使用しています。
次に買い換える際には、性能も上がって値段もこなれてきたノートPCを検討していますが、解像度について前から思っていた疑問があります。

ご存じのように、Vista/7以降、現在の主流はワイド液晶ですよね。4:3画面のPCはほとんど見なくなりました。
横に広くなったのはいいのですが、縦には狭くなった機種が多くなっています。
※ここではデスクトップPCやモバイルPCではなく、メインマシンとしての15~17インチ程度のノートPCに限定して話します。

ハイエンドのAVノートPCなどでは、1920x1080といった高解像度の機種もありますが、スタンダードモデルでは、1366x768とか1280x800などが多いようです。
いずれも現在使用している解像度より、縦は短くなります。
かといって、1920x1080だと解像度は高いですが、モニタサイズが15~17ワイドだと文字がかなり小さくなります。

パソコンの主な用途としては、ネットやメール、あとExcelやワープロ、はがき作成などが多いとして、それらのいずれもある程度「縦幅」があったほうが使いやすいと思いませんか?
Excelは横方向に広い方が便利な時もあるとしても、文書はA4縦の用紙が多いし、WEBサイトも縦にスクロールする頻度が上がるし。
その上さらに、最近のMSオフィスでは「リボン」という操作パネルが登場して画面(縦幅)を占領し、ソフトの編集/閲覧画面は、より縦が短く、横に細長くなり、頻繁に縦スクロールする必要が出てきて、左右には無駄な空間ができているように見えてなりません。※サイドに操作系を置くなら理にかなっていると思いますが・・。

画面が4:3が主流の時代、1024x768→1280x1024に変えた時には画面が広く使えて嬉しかったものですが、縦幅に関しては時代に逆行しています。
”慣れれば問題ない”と言えばそれまでですが、メーカーやMSはなぜこれで良しとしているのでしょうか?
また、外付けワイド液晶では比較的よく見かける1680x1050という解像度(1280x1024からの乗り換えでは違和感が少ない)が、ノートPCではあまり採用されていないのも少し不思議です。

納得のいく説明をしていただける方、PCメーカーや量販店の関係者の方、またはこれに同意という方、幅広くご意見をお待ちしてます。(長文失礼)。

現在、デスクトップPCで、解像度1280x1024の17インチ液晶ディスプレイを使用しています。
次に買い換える際には、性能も上がって値段もこなれてきたノートPCを検討していますが、解像度について前から思っていた疑問があります。

ご存じのように、Vista/7以降、現在の主流はワイド液晶ですよね。4:3画面のPCはほとんど見なくなりました。
横に広くなったのはいいのですが、縦には狭くなった機種が多くなっています。
※ここではデスクトップPCやモバイルPCではなく、メインマシンとしての15~17インチ程度の...続きを読む

Aベストアンサー

hororo07です。
私も縦の狭いノートは、使いにくいので嫌いですが、現状の流れから仕方ないと思ってます。

ただ、もう少し待てば、解像度は1920x1080が標準になると思います。

現時点ですとHDの1920x1080は、PC側のグラフィック性能が悪いと、動画の再生がうまくできませんが、出番を待っている新チップ(省電力+格安)が出てくれば、CPUパワーが無くとも再生が可能になります。

そうすれば、売り場での表示が『HDの1920x1080再生可能!』とか『ブルーレイフルスペック再生可能!』と言うようになり、強力なセールスポイントになります。

一社が出せば、あっというまに1920x1080表示のノートが安くなります。

もう少しの辛抱です。

なお、当方は仕事に使っているのは19インチスクエアx4ですので、どの道ノートは、仕事には使いません。マルチを一度つかったら、シングルには戻れません。最初は19x2でしたが、便利さに負けて、だんだん増えてしまいました。

窓をいくつか開いて、内容を比較したり、コピー&ペーストなどの作業は、マルチとシングルでは、比較にならないほどの差があります。

hororo07です。
私も縦の狭いノートは、使いにくいので嫌いですが、現状の流れから仕方ないと思ってます。

ただ、もう少し待てば、解像度は1920x1080が標準になると思います。

現時点ですとHDの1920x1080は、PC側のグラフィック性能が悪いと、動画の再生がうまくできませんが、出番を待っている新チップ(省電力+格安)が出てくれば、CPUパワーが無くとも再生が可能になります。

そうすれば、売り場での表示が『HDの1920x1080再生可能!』とか『ブルーレイフルスペック再生可能!』と言うようになり、強...続きを読む

Qfloat:leftで
  • 要素を横並びさせてから、中央揃えする方法は?
  • HTML
    <dir id="footer">
     <ul>
      <li>個人情報保護方針</li>
      <li>サイトマップ</li>
      <li>組織概要</li>
      <li>お問い合わせ</li>
     </ul>
    </dir>

    CSS
    #footer ul li{float: left;}

    上記の場合、li要素は横並びするのですが、
    <div>要素の中で中央揃えするには
    どうしたらいいのでしょうか?

    Aベストアンサー

    <HTML>
    <HEAD>
    <TITLE>copy</TITLE>
    <style type="text/css">
    #footer ul{
    margin:0;
    padding:0;
    list-style-position:inside;
    list-style-type: none;
    text-align:center;
    }
    #footer li{display:inline;}
    </style>
    </HEAD>
    <BODY>
    <div id="footer">
    <ul>
    <li>個人情報保護方針</li>
    <li>サイトマップ</li>
    <li>組織概要</li>
    <li>お問い合わせ</li>
    </ul>
    </div>
    </BODY>
    </HTML>

    Q国語の模試復習の仕方が分かりません。 英語、数学のように模試ノートを作った方が良いのでしょうか。 ど

    国語の模試復習の仕方が分かりません。

    英語、数学のように模試ノートを作った方が良いのでしょうか。

    どのように復習されているか是非教えてください!

    Aベストアンサー

    解説を読んで、後日解き直す。
    ノートなんていちいち作らない。
    メモ用紙でいい。

    ちなみに数学もノートを作らない。
    ノートはあっても単なるメモ用紙代わり。
    ノートを綺麗に作り上げることに一手間掛けたら数がこなせないもの。

    Qie6 でリストが横に並ばず縦に並んでしまう

    ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。

    <div class="pic0">
    <ul>
    <li class="pic1"><img src="images/pic1.jpg"/></li>
    <li class="pic1"><img src="images/pic2.jpg" /></li>
    <li class="pic1"><img src="images/pic3.jpg" /></li>
    <li class="pic1"><img src="images/pic4.jpg"/></li>
    <li class="pic1"><img src="images/pic5.jpg"/></li>
    </ul></div>



    .pic0{
    width: 250px;
    height:40px;
    float: left;
    display:inline;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow:hidden;


    }

    .pic1 li {
    float: left;
    height: 47px;
    width: 36px;
    display:block;
    margin-left:3px;
    margin-right:3px;

    }


    ie6のみ縦に並んでしまいます。

    疑ったもの

    ・haslayout

    *{
    zoom:1; }
    {line-height:0;}


    ・marginが倍になるバグ widthの指定
    ・cssが効いていない
    ・ ネガティブマージン

    など

    ie6のcssを読み込ませるなど、何でもいいので、ie6のリストが横にさせる方法はないでしょうか。

    雑文ですが、どうかお願いします。助けてください。

    ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。

    <div class="pic0">
    <ul>
    <li class="pic1"><img src="images/pic1.jpg"/></li>
    <li class="pic1"><img src="images/pic2.jpg" /></li>
    <li class="pic1"><img src="images/pic3.jpg" /></li>
    <li class="pic1"><img src="images/pic4.jpg"/></li>
    <li class="pic1"><img src="images/pic5.jpg"/></li>
    </ul></div>



    .pic0{
    width: 250px;
    height:40px;
    float: left;
    display:inline;
    padding-top...続きを読む

    Aベストアンサー

    定番
    <div class="nav">
    <ul>
    <li><a href=""><img src="images/01.jpg" width="47" height="36" alt="abc"></a></li>
    <li><a href=""><img src="images/02.jpg" width="47" height="36" alt="def"></a></li>
    <li><a href=""><img src="images/03.jpg" width="47" height="36" alt="ghi"></a></li>
    <li><a href=""><img src="images/04.jpg" width="47" height="36" alt="jkl"></a></li>
    <li><a href=""><img src="images/05.jpg" width="47" height="36" alt="mno"></a></li>
    </ul>
    </div>

    だとして
    div.nav{width:300px;margin:0 auto;}
    div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;}
    div.nav ul li{width:47px;height:36px;float:left;margin:0 5px;position:relative;}
    div.nav ul li a,div.nav ul li a img{display:block;height:100%;width:100%;}
    div.nav ul li a img{border:none;}

    定番
    <div class="nav">
    <ul>
    <li><a href=""><img src="images/01.jpg" width="47" height="36" alt="abc"></a></li>
    <li><a href=""><img src="images/02.jpg" width="47" height="36" alt="def"></a></li>
    <li><a href=""><img src="images/03.jpg" width="47" height="36" alt="ghi"></a></li>
    <li><a href=""><img src="images/04.jpg" width="47" height="36" alt="jkl"></a></li>
    <li><a href=""><img src="images/05.jpg" width="47" height="36" alt="mno"></a></li>
    </ul>
    </div>

    だとして
    div.nav{wid...続きを読む

    Q新しいリュックを買ったのですが、教科書やノートなどを縦に入れて持ち運んで傷つく事はありますか?

    新しいリュックを買ったのですが、教科書やノートなどを縦に入れて持ち運んで傷つく事はありますか?

    Aベストアンサー

    こんばんは。

    No1.のRena。さんのアドバイスと重なりますが、アドバイスします。

    教科書やノートなら、端が多少いたむ事はありますが、とくに気にしなくてもいいと思います。

    …入れすぎると手持ちの部分が切れる可能性はあるので
    リュックではなく「手提げ&肩掛けベルト」付きのバッグを愛用していますが、何度も取っ手やベルトの接合部分が切れて、自分で針と糸で修理しています(限界を超えると買い替えです)。入れすぎには注意してください。
    とくに、パソコン・スマホ・タブレットを入れる場合には、注意してください。
    (重量が大きくなるのも気をつけなければいけませんが、突然落ちますので、破損の恐れがあります)。私の場合、幸いにも中身が壊れたことはありませんが、「運」次第でしょう。

    Qスマフォサイトの横並び画像について

    こんにちは。

    スマフォサイトの制作でつまづいているので
    質問させて頂きます。

    横並びの画像(画像メニュー)を親ブロック要素100%の中に並べて表示させたいと思っています。

    下記コードで画像を一列に表示させていて、
    <li>要素の中の画像が同じ横幅サイズの場合、
    幅○○%等で指定するとうまくいくと思うのですが、
    各画像の幅が異なる場合に、画面に合わせて拡大縮小させることはできないでしょうか。

    <ul>
    <li><a href="#"><img src="../images/gazo1.png"></a></li>
    <li><a href="#"><img src="../images/gazo1.png"></a></li>
    <li><a href="#"><img src="../images/gazo1.png"></a></li>
    ~省略
    </ul>



    @media screen and (max-width: 480px)
    などでCSSを指定する方法もあると思うのですが、
    他にオーソドックスな方法などがあれば
    ご教授頂けないでしょうか?

    どうか宜しく宜しくお願いいたします。

    こんにちは。

    スマフォサイトの制作でつまづいているので
    質問させて頂きます。

    横並びの画像(画像メニュー)を親ブロック要素100%の中に並べて表示させたいと思っています。

    下記コードで画像を一列に表示させていて、
    <li>要素の中の画像が同じ横幅サイズの場合、
    幅○○%等で指定するとうまくいくと思うのですが、
    各画像の幅が異なる場合に、画面に合わせて拡大縮小させることはできないでしょうか。

    <ul>
    <li><a href="#"><img src="../images/gazo1.png"></a></li>
    <li><a href="#"><img src="../images...続きを読む

    Aベストアンサー

    IMG要素は、行内要素です。
    →ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
     さらに置換要素と言って置き換えられる画像のサイズによって伸縮します。
    →置換インライン要素の場合(Inline, replaced elements)
    →Intrinsic dimensions - 内在寸法 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/conform.html#intrinsic )

     よってスタイルシートでサイズを指定すると、画像のサイズになってしまいます。

     そこで、画像要素(デフォルトはdisplay:inline)を、displayにてblock要素などに変更すればよいと言うことですね。

    <ul>
    <li><a href="#"><img src="../images/gazo1.png"></a></li>
    <li><a href="#"><img src="../images/gazo1.png"></a></li>
    <li><a href="#"><img src="../images/gazo1.png"></a></li>
    ~省略
    </ul>
    の場合、
    ul,ul li{display:block;position:relative;}
    ul{width:80%;margin:0 auto;}
    ul li{width:30%;height:auto;background-color:yellow;}
    ul li+li{width:40%;margin-left:1%;}
    ul li+li+li{width:28%;}
    とかで、親コンテナブロックのそれぞれ30%,40%,28%になります。余白は二つ目のli以降は1%あきます。

     それじゃまずいのですか?

    IMG要素は、行内要素です。
    →ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )
     さらに置換要素と言って置き換えられる画像のサイズによって伸縮します。
    →置換インライン要素の場合(Inline, replaced elements)
    →Intrinsic dimensions - 内在寸法 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/conform.html#intrinsic )

     よってスタイルシートでサイズを指定すると、画像のサイズになってしまいます。

     そこで、画像要素(デフ...続きを読む

    Qノートの画面に縦スジ一本!

    ノートパソコンの画面に幅1mm位の縦スジが一本出来てます。はて、ティッシュペーパーで拭いた後なので、これが原因かと思いますが、まだ大丈夫でしょうか?

    Aベストアンサー

    回路の断線です。
    素人の修理できませんからメーカーに修理を依頼しましょう。
    液晶に力を加えるとこの様なトラブルを引き起こすともあります。
    製品の不良も考えられます。

    >まだ大丈夫でしょうか?
    製品の不良の場合はさらにライン抜けが発生する可能性はあります。

    保障期間であればメーカーもしくは保証書を発行した販売店にご相談ください。


    見難いのであれば外部接続のディスプレイを使用すればOKです。

    Q横並びリスト ブラウザ縮小 カラム落ち

    よろしくお願いします。

    ulとliで横並びの商品リストの様なものを作成していて、
    ようやく完成したと思っていたのですが、
    ブラウザの拡大/縮小機能を使って、
    少しでも縮小するとカラム落ちが発生してしまいます・・・。

    完成したと思っていたので焦っております(汗)

    簡単にソースを記載しますので、
    原因と対策がわかりましたら、どうか回答宜しくお願いします。


    ul{
    width:720px;
    list-style:none;
    }

    li{
    width:142px;
    border:1px solid #000;
    float: left;
    }

    このような感じで、ulには別にクラスを指定して、clearfixも指定しています。
    .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    * html .clearfix { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

    ulの全体720pxを5個のliで割って、144pxとなり、
    そこからborder両サイド1pxづつを引いて142pxをliに指定しているのですが、
    間違っているのでしょうか?

    liの幅を144pxにしてborderを指定しない場合は、
    縮小してもカラム落ちは起こりません。

    初歩的なことかもしれませんが、
    どうぞよろしくお願いします。

    よろしくお願いします。

    ulとliで横並びの商品リストの様なものを作成していて、
    ようやく完成したと思っていたのですが、
    ブラウザの拡大/縮小機能を使って、
    少しでも縮小するとカラム落ちが発生してしまいます・・・。

    完成したと思っていたので焦っております(汗)

    簡単にソースを記載しますので、
    原因と対策がわかりましたら、どうか回答宜しくお願いします。


    ul{
    width:720px;
    list-style:none;
    }

    li{
    width:142px;
    border:1px solid #000;
    float: left;
    }

    このような感じで、ulには別にクラスを指定...続きを読む

    Aベストアンサー

    ブラウザの種類

    DTD 過去/標準の変更

    ul,li{padding:0; margin:0;}

    clearfixを削除して検証(最少ソースで検証)

    縮小したときの検証ツールでのレイアウト数値の調査

    a要素の絡み

    テキストや画像の関係

    その他のCSSが干渉?

    *:first-child+html li{ letter-spacing: 0;}
    *:first-child+html li a{ letter-spacing: 0;}


    人気Q&Aランキング

    おすすめ情報