教えて!goo限定 1000名様に電子コミック1000円分が当たる!!

あるサイトの「body」の背景に以下のようなCSSがありました。

body {
background-color: #ddd;←これ何の意味?
color: #333;
background: url(●●/●●Bg.gif) repeat;
}

『background-color: #ddd;』の意味が
ネットで探してもそれらしいものが見つかりませんでした。

なにか、制作した人の独自のものなんでしょうか?

わかる方要らしたら教えていただけないでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

ちゃんとCSSの規格書に書いてある色の指定方法ですよ。

勝手に独自
の表現をしても、うんともすんともいいません。

#ddd は、#dddddd やrgb(221,221,221) と同じ明るめの灰色です。
同様に#333 はかなり濃い灰色ですね。

参考URL:http://www.w3.org/TR/CSS21/syndata.html#color-un …
    • good
    • 0
この回答へのお礼

背景の指定方法というのはわかったのですが、
既に背景はgifで指定してあるので・・・。(反映されないときのためでしょうか。)
「#ddd」というのはどんな色なのかなと調べてみても
これといったものが出てこなくて。

なにか特別な記号なのかと思ってしまいました。
ありがとうございました。

お礼日時:2009/02/17 12:24

 どこがわからないのか、不明なので一通り・・


 1999年(10年前)に勧告となったHTM4.01以降、文章の構造を記述するHTMLとプレゼンテーション(見栄え)を記述するスタイルシートを分けることが、推奨されています。
【引用】____________ここから
7.5.1 BODY要素
 ・・・【中略】・・・
属性定義
  background = uri [CT] 推奨しない。 ・・・【後略】・・・
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
【引用】____________ここから
bgcolor = color [CI] 推奨しない。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Alignment, font styles, and horizontal rules in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より


 このbackground-color: ・・・color:・・と言う記述はスタイルシートです。

 この色の指定方法は色々ありますから、下記サイトをご覧ください。

【引用】____________ここから
4.3.6 色 <color>は,キーワード又は数値RGB指定のいずれかとする。
 キーワード色名は,aqua, black, blue fuchsia, gray, green, lime, maroon, navy, olive purple, red, silver, teal, white, yellowとする。これらの16色は,HTML 4.0([HTML40])で定義される。これらの色キーワードに加えて,利用者は,利用者の環境のオブジェクトが使用する色に対応するキーワードを指定してもよい。更なる情報を入手したい場合は,システム色を参照すること。
 例
   BODY {color: black; background: white }
   H1 { color: maroon }
   H2 { color: olive }
 RGB色モデルは,数値色指定で使用される。次の例は,すべて同じ色を指定している。
 例
   EM { color: #f00 } /* #rgb */
   EM { color: #ff0000 } /* #rrggbb */
   EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
   EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
 16進記法のRGB値のフォーマットは,'#'で始まり,その直後に3桁又は6桁の16進数が続くものとする。3桁の数字のRGB記法(#rgb)は,ゼロを付加するのではなく,数字を重複させることによって,6桁の形式(#rrggbb)に変換される。例えば,#fb0は#ffbb00に展開される。これによって,確実に白(#ffffff)は短い記法(#fff)で指定でき,ディスプレイの色ビット幅への依存性が除去される。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2 syntax and basic data types( http://www.y-adagio.com/public/standards/tr_css2 … )]より
    • good
    • 0
この回答へのお礼

わかりづらくてすみません。

背景の指定方法というのはわかるのですが、
既に背景はgifで指定してあるし。。。(反映されないときのためですかね。)
「#ddd」というのはどんな色なのかなと調べてみても
これといったものが出てこなくて。



細かく説明していただきありがとうございました。

お礼日時:2009/02/17 12:23

background-color:は単に背景色の指定ですよね


普通は#000000~#FFFFFFな気がするけど、#dddだと#d0d0d0の指定と同じになるようですね
※ちょっと試してみたらそうだったので詳しいことは判りませんが

↓結果はこれと同じでした
body {
background-color: #d0d0d0;
color: #303030;
background: url(●●/●●Bg.gif) repeat;
}
    • good
    • 0
この回答へのお礼

説明が不十分ですみません。

背景の指定方法というのはわかったのですが、
既に背景はgifで指定してあるので・・・。(反映されないときのためでしょうか。)
「#ddd」というのはどんな色なのかなと調べてみても
これといったものが出てこなくて。

なにか特別な記号なのかと。
わざわざ試していただきありがとうございました。

お礼日時:2009/02/17 12:26

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

QCSSでDIVで挟んでいるのに背景色が出ない?

CSSと(X)HTMLでページを作っています。角丸なページにしたいため、

/* ---------- 角丸画像の上辺 ---------- */
#main_contents_header {
width: 800px;
height:20px;
background:url(./top.png) no-repeat top;
margin: 10px auto 0px;
padding: 0;
text-align: center;
}

/* ---------- 上辺と下辺の間のメイン部分 ---------- */
#main_contents {
background:url(./bg.png);
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}

/* ---------- 角丸画像の下辺 ---------- */
#main_contents_bottom {
width: 800px;
height:20px;
background:url(./bottom.png) no-repeat top;
margin: 0 auto;
padding: 0;
text-align: center;
}

というCSSを作り、

HTMLは

<div id="main_contents_top"></div>
<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>
<div id="main_contents_bottom"></div>

という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。

<div id="main_contents">
ここにいろいろなコンテンツを置いていく
</div>

という書き方ではダメなのでしょうか・・・?

確認はFirefoxとSafariでやっています。

CSSと(X)HTMLでページを作っています。角丸なページにしたいため、

/* ---------- 角丸画像の上辺 ---------- */
#main_contents_header {
width: 800px;
height:20px;
background:url(./top.png) no-repeat top;
margin: 10px auto 0px;
padding: 0;
text-align: center;
}

/* ---------- 上辺と下辺の間のメイン部分 ---------- */
#main_contents {
background:url(./bg.png);
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
}

/* ---------- 角丸画像の下辺 ------...続きを読む

Aベストアンサー

最初のソースでいいですので、以下を試してください。
#main_contents_bottom {}
内部に
clear:both;
を入れる。
</div>
<div id="main_contents_bottom"></div>

<div id="main_contents_bottom"></div></div>
にする。要は下のコーナーも一くくりにする
以上


簡単にいうとfloatとは浮かせて右か左に配置させる指示です。浮いているので高さが無く高さがないので背景が無いというような状態です。でclearとはそれをクリアーする指示。floatがleftだけなら、clear:leftでもオッケイ。というわけ。

html的物理レイアウトの悪癖をひきづっておられるようです。Web標準を学ばれるとレイアウトがとんでもなく楽になるので、初歩からの学習をおすすめします。

Q

お世話になります。
ホームページを作成する場合、見出し<h1>または<h2>の下に<p><div>で本文を記述すると、見出しと本文の間が空いてしまいます。
この間を狭く調整する方法を探しています。
よろしくお願いします。

Aベストアンサー

 No. 1 のご回答のように,これはスタイルシートの範疇ですが,もう少し根本的な方法で考えてみましょう。

 おそらく,h1,h2,p の前後には,既定で 1 行分程度の空きができているはずです。そこで,それらの間の空きをすべて詰めてしまう記述を考えます。
 次の記述を <head>...</head> に加えてみてください。

<style type="text/css">
h1 { margin-top: 0; margin-bottom: 0 }
h2 { margin-top: 0; margin-bottom: 0 }
p { margin-top: 0; margin-bottom: 0 }
</style>

これでこれらの要素が隣接しても,ぴったりくっついて出てきます(<!-- ... --> でくくる場合もありますが,XHTML を使わなければどちらでもかまいません)。
 詰めすぎ,と思われるなら,上記の数値をいじります。およそ 1 行分を「1em」として,数値を書き換えてください(「em」をつけることが必要です)。これで,間隔を好きなように調整できます。ほかの要素でも同様ですので,例にならって書いてみてください。

 具体的には,h1 と p,h2 と p の間にできる空きだけをつぶしたい場合は,h1,h2 の下マージンと p の上マージンを狭めます。

<style type="text/css">
h1 { margin-bottom: 0 }
h2 { margin-bottom: 0 }
p { margin-top: 0 }
</style>

このときは,h1,h2 の上マージンと p の下マージンはそのままです。ご質問の最低限のご要望を満たすのは上記の記述になります(ぴったりくっつくのがお嫌ならば,適切な間隔を指定してください)。

 あとは,ご自分で応用なされるとよいでしょう。これを機にスタイルシート(CSS)をはじめてみたいと思われれば,参考 URL の「Let's begin CSS」あたりをおすすめしておきます。

参考URL:http://www.tg.rim.or.jp/~hexane/ach/

 No. 1 のご回答のように,これはスタイルシートの範疇ですが,もう少し根本的な方法で考えてみましょう。

 おそらく,h1,h2,p の前後には,既定で 1 行分程度の空きができているはずです。そこで,それらの間の空きをすべて詰めてしまう記述を考えます。
 次の記述を <head>...</head> に加えてみてください。

<style type="text/css">
h1 { margin-top: 0; margin-bottom: 0 }
h2 { margin-top: 0; margin-bottom: 0 }
p { margin-top: 0; margin-bottom: 0 }
</style>

これでこれらの要素が...続きを読む

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
margin: 0 auto;
}

ランディングページのようなものを作りたく、
ページの上からフッターの手前くらいまで<div id="container">を効かせるにはどのように記述すればよいでしょうか?

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。


HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
marg...続きを読む

Aベストアンサー

>HTML5とCSS3に関するおすすめの本があったら教えていただけないでしょうか?
 これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
 仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
 それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
 しばしば、仕様書を読んだことがあるのか疑問のものがある。

 これについては、No.1でいくつか説明しました。

 よって、一番早くて、しかも正確な参考書は仕様書ということになります。私もHTMLやCSSは仕様書で学びました。
 最初は冗長に感じますが、それは正確性を追求するために致し方ないでしょう。
 まずはHTMLをしっかり学ばれることをお勧めします。いきなり膨大なHTML5ではなく、HTML4.01strict【strictですよ。】を身につけてから、HTML5に進まれるほうが楽でしょう。

1.2 仕様の記述法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )より
 本仕様書は、著者及び実装者という2種類の読者を想定している。著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。けれども実装者である読者は、仕様に適合するユーザエージェントを作成する上で必要となるすべての情報を見つけることができるだろう。
 本仕様書は様々な方法で利用できるだろう。
・ 最初から最後まで通読する。
・ 必要な情報に直接アクセスする。

 最初は、全体を通して読んで全体像を把握して、いつでも必要な情報にたどり着けるようになること。
 私のブックマークでは
HTML4.01詳細目次( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )

 ついで、スタイルシートはやはりCSS2.1あたりがベストです。
CSS 2.1目次( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html#toc )
 特に
4 構文と基本データ型
5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て
 ここを読まれるだけで、あなたが理解しているCSSが如何に不完全か理解できると思います。

 そのうえで、
HTML4からの変更点( http://www.html5.jp/trans/w3c_differences.html )
 で、変更部分を身につけるのが最も最短で効率的でしょう。

★HTMLやCSSの学習は、数学や理科の勉強方法ととても良く似ています。基礎から順を追ってなぜなのかを理解しながら学ぶと、小学生でも数検2級とかが取れるように、簡単なものなのです。結果を急いでうわべだけ学ぼうとしても反って時間と労力を無駄にして、しかもきちんと身についていないから応用問題に果ても足も出ない・・・ということになる。

>HTML5とCSS3に関するおすすめの本があったら教えていただけないでしょうか?
 これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
 仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
 それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
 しばしば、仕様書を読んだことがあるのか疑問のものがある。

 これについては、No.1でいくつか説明しました。

 よっ...続きを読む

QCSSで、何故か、「float」が上手く効かない

詳しく書きますと、前回した質問、
http://oshiete.goo.ne.jp/qa/7786505.html
の続きになります。
ちなみにこれは、今の所、解決した次第です。
しかし、新たな場面に直面している最中であります。
http://sky.geocities.jp/thanksv0358/index.html#
質問は、上記で作成しているページについてです。

その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。

そのため、項目内容をHTMLで、
<div class="left">

</div>
と、
<div class="right">

</div>
で囲い、その後、それぞれをCSSで、
.left{
float:left;
}
.right{
float:right;
}
としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。
これが現在、意味不明な箇所になっています。

ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか?
詳しい方がいましたら、よろしくお願いします。

詳しく書きますと、前回した質問、
http://oshiete.goo.ne.jp/qa/7786505.html
の続きになります。
ちなみにこれは、今の所、解決した次第です。
しかし、新たな場面に直面している最中であります。
http://sky.geocities.jp/thanksv0358/index.html#
質問は、上記で作成しているページについてです。

その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。

そのため、項目内容をHTMLで、
<div class="l...続きを読む

Aベストアンサー

幅を設定しましょう。
今現在の状況は、小さな箱にそれよりも大きな物を入れようとしています。
そうすると、箱に入らないか、箱は壊れますよね・・・

問題点:
1、トップ画像よりも大きな枠にする。または、画像を小さくする。
2、メイン=レフト+ライトの幅に収まるようにする。

1、
画像が、787pxなのだから、mainの枠は600pxでは無理があります。
なので、
width: 600px; ではなく、 width: 800px; 程度にしましょう。

2、
枠幅が狭いからライトが入れない・・・
なので、
.left {
float: left;
width: 400px;
}
.right{
float:right;
width: 400px;
}

左width: 400px;+右width: 400px;=合計800px ←この値より小さくする事。


人気Q&Aランキング