- ベストアンサー
CSSで背景色のwidthが指定できない！回答項目のwidthを統一する方法は？
- WebサイトのQ&Aのページを<dl>要素を使って作成しています。質問項目には、background-imageだけを使い、回答項目には、background-imageとbackground-colorを使っております。
- 回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。
- 問題が発生している要素に対してwidthとpaddingを指定し、overflowを使って横幅を制限することで回答項目のwidthを統一することができます。
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
簡単なサンプルを書いておきます。方法はいくつかありますが、思いつく３通りだけ入れておきます。 そのように配置するなら、floatは不要です。 簡略化プロパティを使用紙、一部しか書かないと他のプロパティは消えます。 (例) background-color:redとしておいて、その後でbackground:url();などとするとbackground-colorの指定はないものとして扱われます。 ★リキッドデザインにしておきます。横幅は固定すべきではないでしょう。 幅広のディスプレイからスマホのような狭いものまで、ひとつのスタイルシートですみます。ウィンドウ幅を狭くして確認してください。 そのほうが書くのも、ずっと楽です。 HTMLもスタイルシートもシンプルです。 ★Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) でチェック済みの、HTML4.01strict+CSS2.1 (Shift_JIS)です。 タブは＿に置換してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:80%;margin:0 auto;} div.section{position:relative;min-height:400px;} #QandA{margin-right:30%;} #QandA dt{font-weight:bold;} #QandA dd{background-color:#f5eabc;} #QandA dt,#QandA dd{margin:0 0 0 50px;clear:left;padding:5px;min-height:40px;} /* display:list-itemとlist-style-imageを使う方法 */ /* #QandA dt,#QandA dd{display:list-item;} #QandA dd{list-style-image:url(./images/a.gif);} #QandA dt{list-style-image:url(./images/q.gif);} */ /* :before擬似要素とcontent */ /* #QandA dd:before,#QandA dt:before{float:left;margin:0px 5px 0 0;} #QandA dd:before{content:url(./images/a.gif);} #QandA dt:before{content:url(./images/q.gif);} */ /* background-image */ #QandA dt,#QandA dd{padding-left:60px;background-position:5px 5px;background-repeat:no-repeat;} #QandA dd{background-image:url(./images/a.gif);} #QandA dt{background-image:url(./images/q.gif);} /* ここまでがbackground */ div.section div.aside{position:absolute;right:0;top:0;width:29%;font-size:0.9em;padding:0.5%;} div.section div.aside h3{display:none;} div.section div.aside p{margin:0 1em;} div.section div.aside ul,div.section div.aside ul li{display:block;list-style-type:none;margin:0;padding:0;} div.section div.aside ul li{background-color:aqua;} div.section div.aside ul li+li{margin-top:10px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは定義リストのデザインの仕方を説明しています。</p> ＿</div> ＿<div class="section"> ＿＿<dl id="QandA"> ＿＿＿<dt>HTMLとは何ですか</dt> ＿＿＿<dd>Hyper Text Markup Languageの略です。ウェブ上で試用されるマークアップ言語のひとつです。</dd> ＿＿＿<dd>ほかのドキュメントへのハイパーリンクを設定できる(これをハイパーと表現する)。画像・リスト・表などもマークアップできる。</dd> ＿＿＿<dt>CSSとは？</dt> ＿＿＿<dd>Cascading Style Sheetsの略</dd> ＿＿</dl> ＿＿<div class="aside"><!-- 本文とは直接関係ないのでasideとしておく --> ＿＿＿<h3>関連リンク</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> ＿＿＿＿＿<p>ウェブの総本山</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="http://www.w3.org/standards/webdesign/htmlcss">HTML & CSS - W3C</a> ＿＿＿＿＿<p>ウェブページを構築する<abbr title="Hypertext Markup Language>HTML</abbr>と<abbr title="Cascading Style Sheets">CSS</abbr>の資料</p> ＿＿＿＿</li> ＿＿＿＿<li><a href="http://www.whatwg.org/">WHATWG</a> ＿＿＿＿＿<p>Apple、Mozilla、Operaによって設立された、HTMLの開発やその関連技術に興味を持つ人々のコミュニティー。</p> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
とても煩雑になってしまっています。 HTMLがデザインに引っ張れているため複雑になり、それに連れてスタイルシートも大変なことになっています。 HTMLは、文書構造だけ書きます。そのときに文書構造を補完すめためにidやclass名をつけます。この基本を忘れたらダメです。 [HTML <dl id="QandA"> <dt>HTMLとは何ですか</dt> <dd>Hyper Text Markup Languageの略です。ウェブ上で試用されるマークアップ言語のひとつです。</dd> <dd>ほかのドキュメントへのハイパーリンクを設定できる(これをハイパーと表現する)。画像・リスト・表などもマークアップできる。</dd> <dt>CSSとは？</dt> <dd>Cascading Style Sheetsの略</dd> </dl> だとします。QandAだということは、ここではidで指定しています。<dl>は定義とその説明の一組のグループでリストされますから、わざわざquestiontext_ddのようなclass名をつけなくて良いですね。 後はスタイルシートを書くだけです。十行もあれば十分なはず ただ、背景画像がどのようなもので、どのようにプレゼンテーションしたいかが見えてこないので、それぞれの画像と完成時のイメージを提示していただく必要があります。 width:592px; 固定はあまり感心しません。現在はスマートホンから幅広のディスプレイまで様々な端末で利用されるので・・ padding: 0px 0px 0px 35px; このpaddingは何のためですか？境界に張り付いて読みにくくなると思いますが 以下は継承されるプロパティなので直近の親に指定しておけばよいです。 font-size: 15px; color: #000000; text-align: left; font-family: "ＭＳ Ｐゴシック",sans-serif; すでにbodyで指定されていればわざわざ指定する必要はありません。 display: inline; float: left; このふたつは矛盾しています。floatと指定すると他から切り離されてblockになります。 background:url(http://www.ok.com/img/question1.gif); background-repeat: no-repeat; 簡略化プロパティで background:url(http://www.ok.com/img/question1.gif) no-repeat; ただ、デザインによるとdlに指定するほうが楽でしょう。
お礼
ありがとうございます。 あと、恐縮なのですが、背景画像と背景色を使った完成のイメージ図ですが、別の質問で添付致しました。 http://okwave.jp/qa/q7795472.html 上記のURLにある完成図のようにするには、どのようにHTMLとCSSを記述すれば良いのでしょうか？ お時間がある時にでも、お目を通して頂けたら本当に幸いです。
補足
お礼入力とダブってしまいますが、補足させて頂きました。 恐縮なのですが、背景画像と背景色を使った完成のイメージ図ですが、別の質問で添付致しました。 http://okwave.jp/qa/q7795472.html 上記のURLにある完成図のようにするには、どのようにHTMLとCSSを記述すれば良いのでしょうか？ お時間がある時にでも、お目を通して頂けたら本当に幸いです。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
display:inlineをdisplay:block（とfloatの組み合わせ。記述済み）にしてみてください。 display: inline-blockでもいいですが旧IEで期待通り表示されないので、 CSSの文法違反になりますが、旧IE対策込みで、たぶん以下でも出来るかもしれません。 display: inline-block; \display: block; zoom: 1; display: inlineは、<span>のデフォルトスタイル（スタイルシートでdisplay:何かを指定しない状態）と同じ表示にするための物です。 inline指定ではwidth、heightが無効になります。 なお、コンディショナルコメントを使えばCSS文法違反を起こさずにIE対策も出来ます。 コンディショナルコメントについては検索してください。
お礼
ありがとうございます！！ コンディショナルコメントについて調べてみます！！
お礼
ありがとうございます！！ まだ修正はしておりませんが、とても参考になります！！