- 締切済み
display:block;を指定した置換要素の幅
通常のブロック要素であれば親要素の幅まで広がりますが、 置換要素の場合display:block;を指定しても幅が広がりませんよね。 置換要素をブロック要素と同様な幅算出させる方法ってありますか? 具体的にはiPhone/Android向けのデザインでbuttonを親要素の横幅いっぱいにしたいのですが、 width:100%;だとbuttonにmarginを設定した場合にはみ出てしまうので使い勝手がよくないのです。 Firefoxの場合はwidth:-moz-available;を指定することで期待する挙動になるのですが、 webkitで似たようなことを実現する方法があれば教えてください!
- みんなの回答 (5)
- 専門家の回答
関連するQ&A
- ブロック要素の幅を中身の幅に合わせるには?
CSSの記述に関してわからないことがあります。 ブロック要素の幅をブロック要素の中身の幅に合わせて自動的に変わるようにしたいのですが、CSSでそのような設定をすることは可能なのでしょうか? table要素を使えば可能なのは知っていますが、divのような他のブロック要素でも、CSSの設定を行えば可能なのでしょうか? 少し調べたところ、Firefoxの場合は display: table; とすればよいようなのですが、IE6では正しく表示できませんでした。他の手段はないのでしょうか? よろしくお願いします。
- ベストアンサー
- CSS
- 可変幅でabsolute指定で中央配置できません
可変幅でabsoluteを指定すると中央配置できなくなります。 ブラウザの幅に合わせて中身のサイズも合わせて伸縮するサイトを構築したくて色々試しているのですが、どうしてもうまくできません。 どのように指定したらできるのでしょうか?困っています、どなたかお助けください。 例えば画像が固定のサイズであれば width:500px; position:absolute; left:50%; margin-left:-250px; 見たいな形で中央配置できるのですが、可変の場合、、伸縮させたいので、横幅は常に500pxとはなりません。 よろしくお願い致します。
- ベストアンサー
- CSS
- ブロックレベル要素内ブロックレベル要素のmargin-topが効かない
<html><head><style> *{ margin:0; paddgin:0; border:none; } div#wrap{ background:#BBB; width:600px; height:900px; margin:30px auto; } div#header{ background:#999; width:150px; height:60px; margin:30px; } </style></head><body> <div id="wrap"> <div id="header"> </div> </div> </body></html> 例えばこの用な場合で、divの中にdivが入っている場合など…中に入っているdiv要素のmargin-topが効きません。原因がよくわらないのですが、どのような条件の時にmargin-topは効かなくなるのでしょうか?また解決策はどのようなものがあるでしょうか?このようなケースでmargin-topが効かなくなったのが二度目でどうしても気になったので質問させていただきました。よろしくお願いします。
- ベストアンサー
- HTML
- div要素の幅をWindow幅に合わせて変更したい
下記のような形でdiv要素の#main_frameの幅を$(window).width()の値に合わせて指定しているのですが、ブラウザのwindowサイズを操作した場合に表示が崩れてしまいます。 windowサイズの操作がなされた場合、#main_frameの幅も自動的に変わるようにしたのですが方法はありますでしょうか。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#main_frame').css('width', ($(window).width() - 110) + 'px'); }); </script>
- ベストアンサー
- JavaScript
- HTMLの要素の間が空いてしまうのはなぜ??
HTMLの要素の間が空いてしまうことがあります。firefoxで空いてしまい、IEでは空かないのですが、なぜでしょうか?それぞれの要素のwidthやheightを指定しても解消されません。marginでマイナス設定すると逆にIEで要素が重なってしまうのです。どなたかご教示くださいお願いいたします。
- ベストアンサー
- HTML
- CSSでイメージを縦並びに表示する際にブロック要素にする必要はあるのでしょうか?
CSS初心者です。 サイト制作中に疑問に思ったのですが、イメージを縦並びに3つ並べて 中央に配置する時、あるページに「イメージをブロック要素にする」と書かれてたのですが、それは正しいのでしょうか?初心者の為、悩んでしまいました。 (html上) <img src="○○" width="200" height="200" alt="○○" /> <img src="○○" width="200" height="200" alt="○○" /> <img src="○○" width="200" height="200" alt="○○" /> (CSS上) img { display: block;←ここでブロック要素にする必要がわかりません。 margin: 0 auto 10px; text-align: center; } 後、違う質問で凄く初歩的なことなのですが、この「イメージを中央にする」時は「領域で中央に」という考え方は間違いなのでしょうか? 例えば先程のイメージの場所を、そのボックス内全てのものを中央にすると考えた場合、 (html上) <div id="center"> <img src="○○" width="200" height="200" alt="○○" /> <img src="○○" width="200" height="200" alt="○○" /> <img src="○○" width="200" height="200" alt="○○" /> </div> (CSS上) div#center { margin: 0 auto; text-align: center; } div#center img { margin-bottom: 10px; } と<div>でセンターにしても文法的にはおかしくないんでしょうか?? 初心者過ぎてすいません。教えて下さい。宜しくお願いします。
- ベストアンサー
- その他(プログラミング・開発)
- CSSで<p>の幅指定を解除したい。
CSSで<p>の幅指定を解除したい。 今、部のHPを作成しています。先輩がある程度作ってくれていたのですが、 #main p {width:450px; margin-left:auto; margin-right:auto; text-align:left } となっていてmain内のすべての<p>が幅指定されています。 これだと都合が悪いところがありましてこれを一部解除したいのです。 .○○ p {text-align:left} このようにclassを作ってみましたが変化なし。 どのようにすればよいのでしょうか?
- ベストアンサー
- HTML
- HTMLの表で幅を指定しても折り返すことは無理なのでしょうか?
以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか? <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>
- ベストアンサー
- HTML
- CSSで指定したblock要素の配置が、ブラウザ毎に異なるのを統一させ
CSSで指定したblock要素の配置が、ブラウザ毎に異なるのを統一させたい 下記のようなhtmlとcssで、マウスオン時に画像が切り替わる横型メニューを作成しました。 ※image/top_menu.gifには、ロゴと平常時メニューが全て含まれており、ロゴはブロック要素でハイパーリンク出来るようにしてあります。メニュー項目は、マウスオン時にオン用の画像を表示するようにしてあります。 <div id="top"> <ul> <li class="logo"><a href="#"><span class="alt">logo</span></a></li> </ul> <div id="menu"> <ul> <li class="home"><a href="index.html"><span class="alt">ホーム</span></a></li> <li class="products"><a href="products.html"><span class="alt">商品情報</span></a></li> </ul> </div> </div> =============================以下CSS============================= .alt { display:none; } #top { width:75em; height:14.3em; margin-left:auto; margin-right:auto; background:url(image/top_menu.gif) center no-repeat; } #menu { width:74em; position:static; } #menu ul { padding:0 0 0 1em; margin:0; } #menu li { float:left; } #top ul { padding:0 0 0 1em; margin:0; } #top li { list-style:none; } /*トップメニュー各項目(通常時)*/ li.logo a { display:block; margin-left:1em; width:17.5em; height:9em; } li.home a { display:block; width:14.1em; height:4.5em; margin-top:0.8em; margin-left:1.3em; } li.products a { display:block; width:14.1em; height:4.5em; margin-top:0.8em; } /*トップメニュー各項目(マウスオン時)*/ .home a:hover { background:url(image/on_home.gif) no-repeat; } .products a:hover { background:url(image/on_products.gif) no-repeat; } FireFox、Safariでは意図した通りに表示されるのですが、 Windows7“以外の”IEでは、横位置は正常ですが、縦位置がずれてしまいます。 ※どうやら、logoとmenuの間の余白が原因のようで、Windows7以外のIEにのみ余白が現れてしまうようです。 IE全体で異なるのであればまだ方法があると思うのですが、 「Windows7では今のままで、それ以外では表示位置を変えて・・・」 などと言うことが出来るのでしょうか? 本音を言うと、OSやブラウザの振り分けをせず、同じCSSで対応するのがベストなのですが。 出来るだけスマートな方法で解決したいと思っていますが、良い案が見つかりません。 どなたかご教授の程、よろしくお願いいたします。 ※なお、CSSに関してはまだビギナーなので、出来るだけ具体的で細かい解答をお願いいたします。
- ベストアンサー
- HTML
お礼
ありがとうございます。 私もある程度調べたので、現状では無理そうだという結論に達しています。 時間を割いておつきあいいただきありがとうございます。 常に共通の文書構造に従ったHTMLが作成できるのは理想的ですね。 こちらは大きめのメディアを運営しているインハウスなのでなかなか厳しそうです。 多くのサイトが未だにHTML構造的におかしいところを見ても、ほとんどのところではなかなか理想的に行かず苦労しているのだと思います。 この辺の課題は質問の内容とは関係ありませんので終了とさせていただきます。 ありがとうございました。