CSSで背景色のwidthが指定できない！回答項目のwidthを統一する方法は？

2012/11/11 06:57

このQ&Aのポイント

WebサイトのQ&Aのページを<dl>要素を使って作成しています。質問項目には、background-imageだけを使い、回答項目には、background-imageとbackground-colorを使っております。
回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。
問題が発生している要素に対してwidthとpaddingを指定し、overflowを使って横幅を制限することで回答項目のwidthを統一することができます。

noname#233083

CSS
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/13 19:39 回答No.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">  ＿</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"> ＿＿＿<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>

質問者

お礼 2012/11/15 10:03

ありがとうございます！！まだ修正はしておりませんが、とても参考になります！！

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/11/11 11:07 回答No.2

とても煩雑になってしまっています。 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に指定するほうが楽でしょう。

質問者

お礼 2012/11/13 12:10

ありがとうございます。あと、恐縮なのですが、背景画像と背景色を使った完成のイメージ図ですが、別の質問で添付致しました。 http://okwave.jp/qa/q7795472.html 上記のURLにある完成図のようにするには、どのようにHTMLとCSSを記述すれば良いのでしょうか？お時間がある時にでも、お目を通して頂けたら本当に幸いです。

質問者

補足 2012/11/13 12:12

お礼入力とダブってしまいますが、補足させて頂きました。恐縮なのですが、背景画像と背景色を使った完成のイメージ図ですが、別の質問で添付致しました。 http://okwave.jp/qa/q7795472.html 上記のURLにある完成図のようにするには、どのようにHTMLとCSSを記述すれば良いのでしょうか？お時間がある時にでも、お目を通して頂けたら本当に幸いです。

ログインすると、全ての回答が全文表示されます。

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/11/11 08:37 回答No.1

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対策も出来ます。コンディショナルコメントについては検索してください。

質問者