- 締切済み
幅いっぱいに表示させたい
Bootstrapで以下のように作成した時、id="kore"の部分はcontainerの幅分しか背景色が表示されません、両端の余白分。 「h1サンプル」や「<p>いいい」の位置は変えずにid="kore"の背景色だけ幅いっぱいに表示させる方法はありますか？（サンプル、あああ、いいいの文字位置もそのままで）。 色々試したのですが・・・出来ず、困っています。 --- <div class="container-fluid"> <div class="container"> <h1>サンプル</h1> <p style="background-color:red;" id="kore">あああ</p> <p>いいい</p> </div> </div>
- yu283574
- お礼率9% (62/688)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- 4017B
- ベストアンサー率73% (1303/1774)
Default設定の場合は p 等のブロック要素の横幅は width:100%; に初期設定が設定されています。それが無効化されると言う事は、恐らく親要素のdivの .container-fluid か .container のどちらかに横幅指定がある場合、子要素の p#kore はそれ以上には横幅を持つ事は出来ません。或いはその Bootstrap とやらの方で勝手に初期設定値を決めてしまっているのかも。 とりあえずは、 #kore { width: calc(100vw - 8px); } ～みたいなスタイル設定を新たに割り振れば、p#kore がブラウザの見た上での横幅いっぱいに広がると思います。もちろん直書きで <p id="kore" style="background-color:red;width: calc(100vw - 8px);">あああ</p> としてもOKです。 P.S. 横幅指定値に -8px を付け足してるのは 100vw だけだとそれ以外の要素との関係性によっては少しはみ出してしまい、不格好な「横スクロールバー」が表示されるのを回避するハックです。最適な数値は環境によって異なるので、適当に調整してみてください。
関連するQ&A
- スマホで表示するとwidthが適応しない。
WindowsのＰＣでは問題ないのですが、スマホでレイアウトを確認すると、width470pxで指定しているのに300ｐｘ位の幅で改行されてしまいます。 スマホを横にして幅広に表示させると下記sampleの文字は問題なく表示します。 また、sample2の文字（h4）はwidthを指定していないにも関わらず途中で改行されてしまいます。 どうすればスマホでも問題無く表示できるのでしょうか？ よろしくお願いします。 <div class="section"> <div class="box_l"> <p> sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample. </p> </div> <div class="box_r"> <p><img src="a.jpg" width="460" height="321"></p> </div> </div> <div class="clear"></div> <div class="section"> <h4>sample</h4> </div> .section { position: relative; width: 960px; margin-left:auto; margin-right:auto; margin-top: 50px;} .box_l p{ width:470px; float:left; text-align:justify;} .box_r p{ width:470px; float:right; text-align:justify;} .clear{ clear: both;}
- 締切済み
- CSS
- ２つのブロック要素をまとめてインライン表示したい。
２つのブロック要素をまとめてインライン表示したい。 この質問タイトルが適切かは全く自信がないのですが、例として次のようなHTMLがあるとします。 <body> <div class="container"> <div class="title"> <h1>「タイトル」</h1> </div> <div class="subtitle"> <p>「サブタイトル」</p> </div> </div> </body> 「タイトル」のすぐ横に「サブタイトル」が表示されるようにしたいと思っています。 /* 表示イメージ */ 「タイトル」 「サブタイトル」 ただし、表示幅に対してタイトルが長いと、タイトルが複数行に渡って表示されます。 この場合もタイトルの表示が終わった直後に「サブタイトル」を表示したいです。 /* 表示イメージ */ 「非常に長～～～～～～～～～い タイトル」 「サブタイトル」 これを実現するにはCSSでどのように記述したらよいのでしょうか？
- ベストアンサー
- HTML
- css で 「Top へ戻る」 の書き方
h2 で右側に 「Top へ戻る」 を置きたいんですが、 以下のように書いてみると IE6 で背景画像が表示されないのと かなり無駄が多いなと思いまして、なにか良い書き方ご存知でしょうか．．． <style type="text/css"> .h2_container{ background: url(images/bg_h2.jpg); } .title{ width: 500px; float: left; } .top{ width: 100px; float: left; } .clear{ clear: both; } </style> <div id="h2_container"> <div class="title"><h2>内容のタイトル</h2></div> <div class="top"><a href="#">Top へ戻る</a></div> <div class="clear"></div> </div>
- ベストアンサー
- CSS
- 画像表示の際空っぽの項目を非表示にするには、、
画像を含んだ検索システムについてご相談があります。 画像の部分で、データが空っぽの場合検索結果の更に詳細ページにて非表示にする条件分岐についてつまづいています。 レコードに画像データがある場合は検索結果にて表示し、データが空っぽの場合は非表示にするというものです。 以下に詳細ページ（検索結果一覧から詳細ページに進んだページ）の該当箇所のコードを記載します。 if文を使うのだろうというのはわかるのですが、どう書いていいかわからないでいます。 アドバイスいただけないでしょうか？ よろしくお願いします。 ～省略～ <?php $debug = false; //DB Connect $url = "***********"; $user = "**********"; $pass = "********"; $db = "********"; $link = mysql_connect($url,$user,$pass) or die("No Connected"); $sdb = mysql_select_db($db,$link) or die("No Selected"); if($debug) echo_r($_POST); mysql_set_charset('utf8'); if($_SERVER["REQUEST_METHOD"] != "POST") { echo "Error: invalid method"; exit(); } $id = $_POST['key']; $query = "SELECT * FROM shops where id='$id'"; $result = mysql_query($query) or die($query . '<br />' . mysql_error() . '<hr />'); $num_rows = mysql_num_rows($result); ?> <div class="row "> <div id="contents" class="clearfix"> <div class="span8"> <h2 class="f2"><b>■店舗詳細</b></h2> <?php while($row = mysql_fetch_assoc($result)): ?> <div class="row-fluid result-table" style="background-color:white;"> <div class="row-fluid"> <?php echo '<img src="get_image1.php?id=' . $row['id'] . '" style="width:100%;">'; ?> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a><?php echo '<img src="get_image2.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image3.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image4.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image5.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image6.php?id=' . $row['id'] . '" >' ?></a></p> </div> <div class="span4 mini-img"style="margin-left:-1px;"><p class="thumb"><a ><?php echo '<img src="get_image7.php?id=' . $row['id'] . '" >' ?></a></p> </div> ～以下省略～
- ベストアンサー
- PHP
- 開始タグと終了タグについて
開始タグと終了タグについて ものすごく初歩的な質問で失礼します。 <div id="container"> <div id="header"> </div> <div id="menu"> </div> <div class="main-top-img"> </div> <div class="main-middle-img"> <div id="main-contents"> <div class="text"> <h2 class="title"></h2> <p class="text"></p> <h3 class="subtitle"> <p class="text"></p> </div> </div> <div class="main-bottom-img"> </div> <div id="footer"> </div> </div> などいのように開始タグと終了タグの間に、他の多くの<div>要素がある場合、どこがその要素の終了タグなのか分からなくなります。 それぞれの開始タグが、それぞれの終了タグと対応するのは、どのようなルールのもとに決定されているのですか？？
- ベストアンサー
- HTML
- FC２で画像とHPが表示されない！
ホームページ作成初心者です。よろしくお願い致します。 ■手順■ (1)XHTML＋CSSデザインテンプレートからDL URL→http://pondt.com/con_tpl/standard/ (2)DLサンプルをFC2にて編集 ＜HTML文＞ index.htmlというサンプルファイルをそのまま使用 ＜画像＞ 表示されている画像をアップロード ※解凍後、端からテンプレートフォルダ内の画像をアップロードしました。 ■エラー■ 画像が表示されず文字のみのページになってしまいます。 ■HTML文■ ====ここから================================================== <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>ホームページのタイトルを入れてください</title> <meta name="keywords" content="ホームページのキーワードを入れてください" /> <meta name="description" content="ホームページの紹介文を入れてください" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="head"> <h1>キーワードをいれてください</h1> <h2><a href="./">STANDARD 03（タイトルを入れてください）</a></h2> <div id="head_menu"> <ul> <li><a href="./">HOME</a></li> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a>コンテンツ</a> <ol class="sub"> <li><a href="contents01.html">ここのメニューは</a></li> <li><a href="contents01.html">コンテンツ01</a></li> </ol> </li> <li><a href="contents01.html">コンテンツ</a></li> </ul> </div> </div> <div id="contents"> <div id="top"> <p class="line"><img src="img/line01.gif" alt="ライン" width="796" height="3" /></p> <div id="main_image"> <p> 文章が入ります。<br /> TEL 00-000-0000<br /> 削除も可能です。 背景の画像は差し替え可能です。<br /> </p> </div> <p><img src="img/line01.gif" alt="ライン" width="796" height="3" /></p> <div id="top_btm"> <div id="left"> <h3><img src="img/top/st_info.gif" alt="インフォメーション" width="440" height="26" /></h3> <div id="info"> <div id="main"> <h4>2009/01/18</h4> <p>検索エンジン対策としてキーワードを入力できるようにしました。</p> <h4>2008/06/01</h4> <p>本テンプレート配布開始</p> </div> </div><!-- info 終わり --> </div><!-- left 終わり --> <div id="right"> <div id="bnr_sps"> <p class="bnr01"><a href="contents01.html">おすすめ！！（画像差し替え可能）</a></p> <p class="bnr02"><a href="contents01.html">コンテンツ01はこちら（画像差し替え可能）</a></p> </div><!-- bnr_sps 終わり --> </div><!-- right 終わり --> </div><!-- top_btm end --> </div><!-- top 終わり --> <div id="foot_up"></div> </div><!-- contents 終わり --> <div id="copy">Copyright (C) <script language="javascript">document.write(new Date().getFullYear())</script> サイト名を入れてください. All Rights Reserved. </div> </div> <!--↓著作権表示※削除しないでください↓--> <div id="p-copy"> <p><a href="http://pondt.com/" target="_blank">ホームページテンプレートのpondt</a></p> </div> </body> </html> ====ここまで================================================== テンプレート(サンプル表示)通り表示するには、自分でカスタマイズする必要があるのでしょうか？？ローカルで開くぶんには表示されるのでHTML文的には合っていると思ったのですが・・・。 色々調べたのですが、解決しませんでした。 どなたか分かる方いらっしゃいましたらご助言していただけると助かります。よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- DIVの幅を常に100％にしたい
以下の構成でページを作っています。 <body> <div id="div1"> </div> <div id="div2"> <table id="table1">...</table> </div> </body> 「div1」には背景色を設定し、横幅100％で表示しています。 「div2」内のテーブル「table1」の内容はPHPで出力しているのですが、 iPhoneで表示したときに、テーブルの幅が大きくなる(画面の幅を超える)と、 「div1」の幅が元々の画面サイズまでしか描画されません。 テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするにはどうすればいいでしょうか。 外枠用のテーブルを使えばできるのでしょうが、できれば構成を変えずにやりたいです。
- ベストアンサー
- HTML
- mozillaで背景が表示できない
mozillaでbodyの背景色Aを指定しdiv(1)に別の背景色Bをidで指定すると表示されますが そのdiv(1)の中にdiv(2)を入れidまたはclassを指定すると背景色Bが表示されなくなってしまいます。 ■色々と試してみました ie6では問題なく表示されます。 div(1)の中に複数divを入れた場合、やはり表示されませんが div(1)の閉じタグ</div>の前に (他の文字ではダメでした)を入れた場合、一部のdivに対してだけ背景が適用されました。 ＃適用されない部分のソースに間違いがあるのではとソースを入れ替えてみましたが、やはり適用されない部分は適用されないままでした。 div(2)のidまたはclassを指定しない場合は想定どおり表示されます。 上記を踏まえ、div(2)をidまたはclassを指定しないdivで囲ってみましたが、やはり適用されませんでした。 長々とわかりにくい説明で申し訳ございませんが、 どのようにしたらdiv(1)の背景を表示させられますか？ アドバイス等思いついたことでも構いません。 結構試しましたが手詰まり状態なのです(T_T よろしくお願いします。 <body> <div id="zentai"> aaa </div> </body> bodyに背景色A、zentaiに背景色B 結果：OK <body> <div id="zentai"> <div id="nakami"> aaa </div> </div> </body> bodyに背景色A、zentaiに背景色B 結果：NG bodyに背景色A、zentaiに背景色B、nakamiに背景色B 結果：nakamiのみ背景色が適用される
- 締切済み
- HTML
- 文字列の表示/非表示
下記のコードで、ボタンを押すたびに、 sample1 sample2 sample3 の３個の文字列の非表示/表示が切り替わるようにしたいのですが、 alert(elements.length+"個の要素を取得しました"); の実行で、class="sample"のエレメントの個数は正しく取得できているようなのですが、 elements.style.display = elements.style.display == "none" ? "block" : "none"; で非表示/表示が切り替わってくれません。 何か書き方が悪いのでしょうか？ ご経験のある方、御教示ください。 <html> <head> <title>document.getElementsByClassName - class名を元にエレメントを取得する</title> </head> <!--class名を元にエレメントを取得するのサンプル--> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function execute() { var elements = document.getElementsByClassName("sample"); alert(elements.length+"個の要素を取得しました"); elements.style.display = elements.style.display == "none" ? "block" : "none"; } //--> </script> <body> <div id="sample1" class="sample" style="display:none;">sample1</div> <div id="sample2" class="sample" style="display:none;">sample2</div> <div id="sample3" class="sample" style="display:none;">sample3</div> <button onclick="execute()">サンプル実行</button> </body> </html>
- ベストアンサー
- JavaScript
- IE6とFirefoxの表示の違い
どうか教えてください。 IE6とFirefoxでの表示結果が違うのですが、同じにするには どうすればいいのですか？ Firefoxでは文字の背景色の赤が上下にでてるし、IE6は左のボックスが 下にくっついているし、それと、A Bにかけた margin:10px;なのですが、10pxマージンとれてますかね？ よろしければ教えてください。 【html】 <body> <div id="container"> <div id="A"> <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> <div id="B"> <p>ああああああああああああああああああああああああああああああ</p> </div> </div> </body> 【CSS】 body{ font-size:20px; } #container{ background:#000; width:600px; overflow:auto; } #A{ float:left; width:200px; background:#ff0000; margin:10px; } #B{ width:200px; float:right; background: #ff0000; margin:10px; }
- 締切済み
- CSS
