cssの初歩的な質問
- 画像を並べるためのCSSコードがうまく機能しない場合、要素のfloatプロパティとwidthプロパティを適切に設定する必要があります。
- 要素を並べるためには、ul要素にoverflowプロパティを設定し、li要素にはfloatプロパティとwidthプロパティを設定することが重要です。
- 画像を縦に並べる場合は、ul要素にmax-widthプロパティを設定し、li要素にはfloatプロパティとwidthプロパティを適用することが必要です。
- ベストアンサー
cssの初歩的な質問
初歩的な質問で申し訳ないのですが、以下の画像のように画像を並べたいのですがうまく並べることができせん。 ulで画像たちを囲いmax-widthで最大幅を決めて画面が狭まるほど画像を小さくし、並べるためにfloat:leftをかけてはいるのですが下記の「こうなる」のようになってしまいます。 うまくやるにはどうしたらいいのでしょうか？ よろしくお願いします。 //簡単に書いたコード(実際はid名などを書いてます) html <ul> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> </ul> css ul{ overflow:hidden; max-width:310px; margin:20px auto; } ul li{ float:left; width:48%; } ul li img{ width:100%; } ul li:nth-child(even){ padding-left:10px; } ul li:last-child{ width:100%; }
- yomogimoti555
- お礼率10% (3/28)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
よくある症状だな、と思ってこちらでも試してみているのですが 貼られている範囲のcss設定では、同じようにならないですね。 再現できるようにもう少し詳しいものが欲しいかなと思ったりします。 今見えている範囲で予想しますと ・liタグの中身の画像が、liタグの高さより大きくて、⓷が⓵に引っかかって、画面の左端まで回り込まない ・clearの設定が、書かれている範囲の外にあって、これが悪さをしている この辺りのどちらかではないかな、と思ったりします。 というかおそらく上の方でしょうね。 回答遅れてすいませんでした。 頑張ってください。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title>Skyscraper</title> <style> ul { list-style-type:none; overflow:hidden; max-width:310px; margin:20px auto; } ul li { clear:none; float:left; width:48%; } ul li img { width:100%; } ul li:nth-child(even){ padding-left:10px; } ul li:last-child { width:100%; } </style> </head> <body> <ul> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> </ul> </body> </html>
関連するQ&A
- 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
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- safariだけCSSが崩れてしまいます
safariだけCSSが崩れてしまいます。 初心者ですが、教えて下さい。 コンテンツ部分の中に、画像(説明文付き)を横並びに３列並べて表示するためにfloatで指定してあります。 下記のように並べたいのですが、safari以外のブラウザでは全てうまく表示されるのに、safariだけ2と３が下に落ちて崩れてしまいます。 1 2 3 4 5 6 どのようにしたら横に並んでくれるのか、わかりません。。 どうかお詳しい方、ご教授下さい。 ______________________________________ #secondary { float:left; width:705px; padding:10px 0 0 15px; margin:0; } .index .module { float:left; width:210px; margin:0 17px 0 0; padding:0 4px; text-align:left; } .galleries { background:#eee; float:left; width:100%; margin:0 0 15px; position:relative; } .gallery .galleries { float:left; position:relative; width: 720px; margin:0 0 15px; padding:0; list-style:none; padding-top:10px; line-height:1.4em; } .gallery .galleries .thumb { float:left; margin:0 10px 10px 0; } .index .galleries { margin-bottom:5px; } .galleries ul { float:left; margin-left:0; margin-bottom:0; list-style:none; text-align:left; } .galleries li { background-image:none; float:left; position:relative; width:220px; height:6.4em; overflow:hidden; margin-bottom:0; padding:75px 0 1.6em 15px; } .archive .galleries li { height:10.5em; } .galleries h3 { margin:0 10px 0 4px; font-size:100%; } .galleries h3 a, .galleries a.img, .galleries h3 a:visited { border-width:0; } .galleries .img { position:absolute; top:4px; left:15px; } .galleries .img img { display:block; } .galleries p { margin:0 10px 0 4px; } .galleries div { margin:0 4px; } .gal { background:url("../images/bg_gal.gif") 11px 0px no-repeat; margin:0; } html>body .gal { background-image:url("../images/bg_gal.png"); }
- 締切済み
- CSS
- 初心者です 画像横に文字を入れたい ｃｓｓ
web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul> <li><a href="index.htm"><img src="画像"width=""height=""></a></li> <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li> <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}
- ベストアンサー
- その他（インターネット・Webサービス）
- 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: 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のリストが横にさせる方法はないでしょうか。 雑文ですが、どうかお願いします。助けてください。
- ベストアンサー
- CSS
- CSSについての質問です
下記のプログラムについて解らないのですが、containerの内のh1と ulの位置関係ですがh1にmargin-bottom: 0と指定し、ulにmargin-top: 0としてあるが、この2つがくっつかないのは何故でしょうか？ 親切な方、ご回答いただけますようよろしくお願いします。 body{ background-color: #f2f2f2; padding: 0; margin: 0 } div#container { width: 750px; margin-left: auto; margin-right: auto; background-color: white } h1{background-image: url(画像.jpg); width: 640px; height: 120px; margin-bottom: 0; margin-left: 50px; } ul{ list-style: none; text-align: center; padding: 0; margin-left: 10px; margin-top: 0 } li{ width: 128px; float: left; padding: 0px; margin: 0px; }
- 締切済み
- HTML
- リストの回り込みについて（マーカーの位置がずれます
助言いただきたく質問させていただきます。 画像の回り込みを使用してのリストの表示で、IEで表示した際にマーカーの位置が画像とかぶってしまいます。 -----------HTML----------- <div class="com" style="width: 650px;"> <img src="image.jpg" class="img_left"> <ul> <li class="book">あああああああ</li> <li class="book">いいいいいいい</li> <li class="book">ううううううう</li> <li class="book">えええええええ</li> <li class="book">おおおおおおお</li> </ul> </div> --------------------------- -----------CSS----------- .com { margin: 0 auto; padding: 20px; overflow:hidden; } img.img_left{ float: left; margin-right: 30px; } .book { list-style-type: square; padding-bottom: 20px; } --------------------------- FirefoxとChromeではちゃんと画像の右側にマーカーが表示されるので IE用のコードの書き方があるのかなと思っています。 初歩的なものとは思いますが、ご指摘お願いいたします。
- ベストアンサー
- HTML
- CSSのみでのデザインについて
CSSのみでデザインを勉強中です。 その際にわからないことがありましたので、すみませんが、ご教授下さいませ。 ▼HTMLの方の記述 <div id="banner"> <ul> <li><img src="./img/entry.jpg" width="240" height="55" /></li> <li><img src="./img/entry.jpg" width="240" height="55" /></li> </ul> </div> ▼CSSの記述 #banner { float:left; width:240px; margin:0 0 0 17px; display: inline; } #banner ul li { margin-bottom:0px; } 上記の様に記述しています。画像を縦に２つ空白を入れずに並べたいのですが、WIN IE6.0にて、2mm程の空白が空いてしまいます。NN7.1では4mm程空白ができます。operaは意図している通りに表示されます。 何か原因が有るのでしょうか？ どうぞ宜しくお願い致します。
- ベストアンサー
- CSS
- webページの画像の配置(CSS/HTML)
webページ作成をしていて、ヘッダーに画像と動画を計４つ配置したいと思っています。 画像右/画像左/画像上/動画を 画 画像上 画 像 動 像 左 画 右 のような配置をすべく、 ・HTML <div id="top"> <div id="header"> <ul> <li><img border="0" src="left.jpeg" width="190" height="415" alt=""/></li> <li><img border="0" src="top.jpeg" width="560" height="100" alt=""/><iframe width="560" height="315" align="left" src="//www.youtube.com/....(略)..." frameborder="0" allowfullscreen></iframe></li> <li><img border="0" src="right.jpeg" width="190" height="415" alt=""/></li> </ul> </div> (略)</div> ・CSS div#top { width:960px; margin:0 auto; } div#header { position:relative; width:960px; } div#header ul{ margin:0; padding:0; float:left; } div#header li{ margin:0; padding:0; float:left; } 幅の調節など、色々試してみましたが、どうしてもうまくいかず、 画像左 画像上 動画 画像右 のようになってしまいます。 何が原因でどのように改善すればいいのか、アイデアおよび知識があれば教えて頂きたいと思います。 よろしくお願いします！ ※初投稿なので、御無礼・不明瞭な点などありましたら、ご指摘頂けると幸いです。 また、不足した情報なども、あれば教えてくださいませ。
- 締切済み
- CSS
- IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。 現在 li タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
お礼
liに高さを指定したらできました！ ありがとうございます！