CSSスタイルシートでブラウザの幅を縮める方法

2012/12/17 11:08

牧野結菜（@makino03）の回答

牧野結菜（@makino03）
ベストアンサー率40% (4/10)

2012/12/17 15:31 回答No.2

http://www.geocities.jp/chiyou_chan/style.css 未確認ですがページの下記抜粋部分が効いてるのではないでしょうか .wrapper { margin: auto; width: 940px;←これ Chromeの右クリックから[要素を検証]でHTML、CSSなどの要素も調べられて便利ですよ。

質問者

お礼 2012/12/21 10:12

便利な機能を教えていただきまして、ありがとうございました。

この回答がついた質問に戻る

回答全件

ベストアンサー

min-widthを指定すればよいだけです。なお、スマホの普及など諸…

- ORUKA1951
2012/12/17 16:43

http://www.geocities.jp/chiyou_chan…

noname#175480
2012/12/17 14:43

関連するQ&A

cssのulタグについて質問です。
cssの初心者ですがよろしくお願いします。以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。その下に幅いっぱいの画像を入れたかったので一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが２段目の１番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。（横に短くなっている）画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 cssで指定している画像の大きさも間違いありません。試しに上のメニューを<div id="header">にして <div class="clear"></div>で区切って下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。 htmlはこれです <div id="header"> <ul class="yama"> <li class="logo"><a href>ロゴ</a></li> <li class="kyouiku"><a href="">教育</a></li> <li class="syoukai"><a href="">紹介</a></li> <li class="shizen"><a href="">自然</a></li> <li class="mura"><a href="">村</a></li> </ul> <div class="clear"></div> <div class="line"></div> <ul class="rei"> <li class="name"><a href="">あいうえお</a></li> <li class="abc"></li> <li class="map"><a href="">マップ</a></li> </ul> </div> <li class="name"><a href="">あいうえお</a></li>これが問題のタグです。文字が足りなかったのでcssの一部ですが /* rei */ #header ul.rei{ float:left; } #header ul.rei li{ float:left; display: inline; } で　<li class="name">　のcssですが #header ul.rei li.name { display: block; width:295px; height:51px; } #header ul.rei li.name a { display: block; background: url(../img/name.jpg) no-repeat top left; text-indent:-9999px; height:100%; width:100%; } #header ul.rei li.name a:hover { display: block; text-indent:-9999px; height:100%; width:100%; background: url(../img/name_om.jpg) no-repeat top left; } という風にしています。初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。
- ベストアンサー
- CSS
スタイルシートについて
宜しくお願い致します。個人のホームページを作成しているのですが、ヘッダーの下にメニューボタンを横並びに置きたくて参考書通りにしているつもりなのですができません。ソースは HTMLソース <div id="content"> <p>what new</p> </div> <div id="sidebar"> <ul id="sidemenu"> <li><a href="link.html">トップページ</a></li> <li><a href="link.html">コンセプト</a></li> <li><a href="link.html">メニュー</a></li> <li><a href="link.html">ブログ</a></li> <li><a href="link.html">リンク</a></li> </ul> </div> CSSソース div#content{ font-size:0.75em; width:564px; } ul#sidemenu li{ list-style-type:none; float:left; } です。ど素人なものでどこが間違っているのかさえわかりません。ご教授頂ければ幸いです。どうぞ宜しくお願い致します。
- 締切済み
- グラフィックソフト
リストタグを用いた段組みメニューの不具合（IE6）
数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。以下がhtmlとcssです。【html】 <div class="test"> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="search_clear"></div> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> </div> 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、何卒宜しくお願い致します。
- ベストアンサー
- HTML
スタイルシート・・・borderが適用されない
横並びのメニューを作っていますがなぜかborderが適用されません。多分余計な記述があるためだと思いますが分からなくなってしまいました。どなたか助けて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header-menu"> <ul class="sample"> <li><A href="#">メニュー１</A></li> <li><A href="#">メニュー２</A></li> <li><A href="#">メニュー３</A></li> <li><A href="#">メニュー４</A></li> </ul> </div> </body> </html> .header-menu { width: 400px; overflow: hidden; } ul.sample{ margin-top:20px; font-size:12px; padding-left:0; margin-left:0; } ul.sample li{ display: inline; } ul.sample li a{ width:85px; text-decoration:none; color: #fff; background-color: #FF7F50; padding:3px 0 3px 0; margin-right:7px; width:85px; float:left; border-width:1px; border-color:#CCCCCC; text-align: center; } ul.sample li a :hover { background:none; }
- ベストアンサー
- HTML
[CSS]<ul>タグのスタイル指定によるレイアウトの崩れ
いろいろと試してみたのですが、どうしてもわからないので、教えてください。以下のようなスタイル、HTMLでレイアウトしています。 ----------------------------------------- .boxOut { background-color: #009900; } .boxIn { margin: 0px; padding: 0px; } .boxOut2 { background-color: #cccccc; margin: 10px; } <div class="boxOut"> <div class="boxIn"> <ul> <li><a href="#">リスト１</a></li> <li><a href="#">リスト２</a></li> </ul> </div> </div> <div class="boxOut2"> テキスト </div> ----------------------------------------- このままですと、意図したとおり、上のboxOutと下のboxOut2は10ピクセル離れているのですが、これに新たにスタイル .boxIn ul { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } を追加してブラウザで確認すると、何故かboxOut2がboxOutの中に入ってしまいます。ブラウザはWinXP+IE6.0でこのような現象が発生するのですが、FireFoxなどでは起きません。どのようにしたら、こういった現象を避ける事ができるのでしょうか。とても困っています。同様の経験をお持ちの方がいらっしゃいましたら、回避法など教えてください。よろしくお願い申し上げます。
- 締切済み
- CSS
cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。現在のHTML  <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">１</a></li> <li><a href="#">２</a></li> <li><a href="#">３</a></li> <li><a href="#">４</a></li> <li><a href="#">５</a></li> <li><a href="#">６</a></li> <li><a href="#">７</a></li> </ul> <hr class="none"> </div>  現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html
- ベストアンサー
- CSS
cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。重ねて表示するのはどうすればいいのでしょうか？質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ　ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <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 rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP">  <div id="page">  <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div>  <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div>  <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div>  <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
リストタグ以外でfloatしたものをセンター寄せに
下記のようにHTMLを組みました。「.footerNav」を「float:left」して横並びにした上でセンター寄せをしたいと思いました。しかし何をどうやってもセンター寄せになってくれません。ちなみに各「div class="footerInner"」の幅設定はしません。 <footer> <nav> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> </nav> </footer> 調べて見ると、<div class="footerInner">～</div>の単体であれば、センター寄せができる手段はありました。 <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> しかし自分のはリストタグではなく、divタグをフロートしたもの。リストタグではないものを「float:left」してセンタリングは可能なのでしょうか？何度かこの手のことにはまって、その度にいろいろな手段を試したり検索していたのですが、検索しても見つからず、結局出来たためしがありません。それで今回は投稿させていただきました。ご存知の方いらっしゃいましたらご教授いただければ幸いです。
- ベストアンサー
- CSS
CSSについて初歩的ですがわかりません
こんにちは。ＣＳＳＰＬＡＹと言うサイトでCSSをＤＬしたのですが、手を加えて、ページとして成り立つようにしたいのですが、なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、どなたか、詳しい方指摘してもらえませんか？参考ＵＲＬ＝http://www.cssplay.co.uk/menus/pro_drop13.html <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <link rel=stylesheet type="text/css" href="1.css"> <style> body {text-align:center;} .end {clear:both;} .box {width:85%; margin:0 auto 0 auto; text-align:center;} .main {width:80%; float:left;} .side {width:20%; float:left;} .top {width:80%; margin:0 auto 0 auto; text-align:center;} .top1 {width:20%; float:left;} .top2 {width:80%; float:left;} </style> </head> <body><div class="box"> <div class="top"> <div class="top1"> トップ </div> <div class="top2"> <div> <span class="preload1"></span> <span class="preload2"></span> <ul class="prodrop4"> <li class="top"><a href="./index.html" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Sales</span></a>  <ul class="sub1"> <li><a href="../menu/" class="fly">Digital SLR Cameras</a></li> <li><a href="../boxes/">Interchangeable Lenses</a></li> <li><a href="../mozilla/">Flash Guns and Accessories</a></li> <li><a href="../ie/">Professional Tripods</a></li> <li><a href="../opacity/">Filters & Lens Hoods</a></li> </ul>  </li> </ul></div> </div><div class="end"></div> </div> <div class="side"> サイド </div> <div class="main"> メイン </div> <div class="end"></div> </div></body> </html> 文字制限で入りきらないので、メニューのほうは参考URLからみてください・・・すいません
- 締切済み
- HTML

CSSスタイルシートでブラウザの幅を縮める方法

牧野結菜（@makino03）の回答

お礼 2012/12/21 10:12

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

CSSスタイルシートでブラウザの幅を縮める方法

牧野 結菜（@makino03）の回答

お礼 2012/12/21 10:12

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

牧野結菜（@makino03）の回答

カテゴリ
一覧

専門家に質問してみよう
専門家登録