プロが教える店舗＆オフィスのセキュリティ対策術

CSSで背景色のwidthが指定できません。

解決済

  • 質問者：fujino00
  • 質問日時：
  • 回答数：3件

WebサイトのQ&Aのページを<dl>要素を使って作成しています。

質問項目には、background-imageだけを使い、
回答項目には、background-imageとbackground-colorを使っております。

それぞれの回答項目のbackground-colorのwidthを592pxで統一したいのですが、できません。
回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。

かれこれ4時間くらい格闘しておりますが、きちんと表示できません。
ちなみに、dl、dt、ddの要素のうち、marginとpaddingはリセットCSSをしています。

以下に、該当するHTMLとCSSだけ書きました。
何がいけないんでしょうか？
もしくは、以下のコードだけではなく、親要素の属性や属性値とかが問題なのでしょうか？

<!-- HTML -->
<dl>
<dt class="questiontext_dt">ここで質問</dt>
<dd class="question?dd">ここで回答してます</dd>
</dl>

/* CSS*/
.questiontext_dt {
width:592px;
padding: 0px 0px 0px 35px;
margin: 0px 0px 10px 0px;
font-size: 15px;
color: #000000;
display: inline;
text-align: left;
float: left;
font-family: "ＭＳ Ｐゴシック",sans-serif;
background:url(http://www.ok.com/img/question1.gif);
background-repeat: no-repeat;
}

.questiontext_dd {
width:592px;
padding: 5px 0px 5px 35px;
margin: 0px 0px 10px 0px;
font-size: 15px;
color: #000000;
display: inline;
float: left;
font-family: "ＭＳ Ｐゴシック",sans-serif;
background-color: #f5eabc;
background-image:url(http://www.ok.com/img/question2.gif);
background-position: left 5px;
background-repeat: no-repeat;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

　簡単なサンプルを書いておきます。

方法はいくつかありますが、思いつく３通りだけ入れておきます。
　そのように配置するなら、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_ … )
でチェック済みの、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">H … &amp; 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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/11/15 10:03

No.2

  • 回答者： ORUKA1951
  • 回答日時：

とても煩雑になってしまっています。


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を記述すれば良いのでしょうか？

お時間がある時にでも、お目を通して頂けたら本当に幸いです。

補足日時：2012/11/13 12:12
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

あと、恐縮なのですが、背景画像と背景色を使った完成のイメージ図ですが、別の質問で添付致しました。
http://okwave.jp/qa/q7795472.html

上記のURLにある完成図のようにするには、どのようにHTMLとCSSを記述すれば良いのでしょうか？

お時間がある時にでも、お目を通して頂けたら本当に幸いです。

通報する
お礼日時：2012/11/13 12:10

No.1

  • 回答者： taloo
  • 回答日時：

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対策も出来ます。
コンディショナルコメントについては検索してください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！！

コンディショナルコメントについて調べてみます！！

通報する
お礼日時：2012/11/11 19:32

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報