プロが教えるわが家の防犯対策術!

CSSで2カラム左メニューレイアウトのサイトを作成しております。

レイアウトはできたのですが、
ページ内にいくつかdivでボーダーのないボックスをつくり
写真をいれたり文章をいれたりします。
1ページのCSSレイアウトしたコンテンツ部分のdivの中に
5つほどdivが入れ子ではいる予定です。

インターネットでdivの多用について調べると
ださいだの、わかってないだと書いてあります。

でもdivを多用しなければ、
例えば写真の横にテキストを配置したり、
よこにイメージを配置したいときに
テーブルやHTMLタグをつかわないといけないので、
余計ソースが汚くなるんではないでしょうか?

私は、CSSを本格的に勉強し始めてほとんど初心者ですので、
詳しいことがわかりませんので、もしご存知の方おられましたらご意見お待ちしております。

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

A 回答 (11件中1~10件)

うわー本当に自分しつこすぎてすみません!


No.11の訂正です。
重大な間違いを犯していました。

.clearに
float:clear;
と書いていますがとんでもない大嘘です。
正しくは
clear:both;
でした。

間抜けすぎる。。。
    • good
    • 1
この回答へのお礼

たびたびありがとうございます。

時間ができましたら参考にさせていただきます。

この度はありがとうございました。

お礼日時:2008/11/28 18:11

度々しつこくてすみません……!(汗)


さっきご紹介したCSSはかなりくどかったので
ちょっとスッキリさせました。

---test.css---
div,p{
  color  :white;
  padding  :1%;
  margin  :1%;
}

.div{
  border  :solid 1px black;
}

.left{
  float  :left;
  width  :45%;
  background-color  :red;
}
.right{
  float  :right;
  width  :45%;
  background-color  :blue;
}
.clear{
  float  :clear;
  background-color  :green;
}
---ここまで---
---test.html(訂正部分のみ)---
<div class="left div">
  <p class="left">
    文章A
  </p>
  <p class="right">
    文章B
  </p>
  <p class="clear">
    文章C
  </p>
</div>
<div class="right div">
  <p class="left">
    文章D
  </p>
  <p class="right">
    文章E
  </p>
  <p class="clear">
    文章F
  </p>
</div>
<p class="clear">
  文章G
</p>
---ここまで---

あんま変わってないですね!´д`;スミマセン
    • good
    • 0

No.8に追伸。



すみません、読み返していて気が付きました。
それで試したらって単位が書いてない……!!

50%で試したら、ということでした。
失礼いたしました。

あと余計なお世話かもしれませんが、
コメントがちょっと飛び飛びのようですね。
回答されている方には皆様に、「回答ありがとうございます」
の一言だけでも返信をした方が良いと思いますよ~。
これから付けるところでしたら大変失礼致しました。
    • good
    • 0

>よろしければどのようなCSSになるのか


そうですね。一例ということであれば

dtに入る画像の縦横が200px×150px固定での話ですが

dl {
width:500px; /* 特に必要はありませんが、テキストとの兼ね合いです */
}

dt {
float:left;
width:200px;
}

dd {
height:auto !important;
height:150px;
min-height:150px;
}

こんな感じでどうでしょうか?

将来的には

dt {
display:run-in;
margin-left:-200px;
}

dd {
padding-left:200px;
}

のようにもできると思います。
    • good
    • 0

私もCSSレイアウト初心者なので見苦しいコーディングですが。

。。
floatのサンプル書いてみました。
(自分も1度くらいしか使ったことなかったので
かなり手探りな内容です)

---test.css---
p{
 color :white;
}

.div_l{
 float :left;
 width :45%;
 background-color :yellow;
 border :solid 1px black;
 padding :1%;
 margin :1%;
}
.div_r{
 float :right;
 width :45%;
 background-color :orange;
 border :solid 1px black;
 padding :1%;
 margin :1%;
}

.left{
 float :left;
 width :45%;
 background-color :red;
 padding :1%;
 margin :1%;
}
.right{
 float :right;
 width :45%;
 background-color :blue;
 padding :1%;
 margin :1%;
}
.clear{
 float :clear;
 background-color :green;
 padding :1%;
 margin :1%;
}
---ここまで---
---test.html---
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <link rel="stylesheet" type="text/css" href="test.css" />
 <title>
  サンプルソースコード
 </title>
</head>
<body>
 <h1>
  floatのテスト
 </h1>
 <div class="div_l">
  <p class="left">
   文章A
  </p>
  <p class="right">
   文章B
  </p>
  <p class="clear">
   文章C
  </p>
 </div>
 <div class="div_r">
  <p class="left">
   文章D
  </p>
  <p class="right">
   文章E
  </p>
  <p class="clear">
   文章F
  </p>
 </div>
</body>
</html>
---ここまで---

良かったらまるっとコピペでどんなもんか見てみて下さい。

ポイントは横幅ですかね。。。
↑で width:45%; とかしてますけど、
なぜかと言えばそれで試したら線の幅とか色んな要素で
トータル100%を超えてしまって、横並びにならんのです。
難しいですねえ。

うーーん、我ながら稚拙な^^;
    • good
    • 0

話はずれるかもしれませんが、レイアウトに関して言えば


画像とテキストを並べるのはfloatでできると思いますよ。
(イメージ同士も含む)

参考: http://www.tagindex.com/stylesheet/img/float.html

テーブルやHTMLでなんて力技を持ち出さなくても。^^;

意味合いを考えて適切なマークアップをして、
それから必要に応じて、となると思いますけどね。
    • good
    • 0
この回答へのお礼

私のサイトで先ほど悪戦苦闘していたのですが、
それはテキストとテキストを横に並べる。

イメージとしては

あいうえおかきくけこ|あいうえおかきくけこ
さしすせそたちつてと|さしすせそたちつてと

のような感じです。

これをCSSでやってみて、floatもつかったのですが、
親要素である枠の中に子要素のboxをdivに2つ横並びにつくってみたのですが、横並びになってくれなかったり、横並びになってもずれていたり大変でした(^^;)

で、結局divつかうよりタグの量が少なくなったテーブルでさっとつくっちゃいました。でも、テーブルの設定はCSSでやりました。

やっぱりCSSって難しいですね。。。
初心者の私は何が悪いのかわからなくてあきらめてしまうことも多いです。

ご回答ありがとうござます。

お礼日時:2008/11/28 14:02

tableを使わずに、と考えられているので、個々のHTMLタグの意味については調べられているでしょう。


divというのは、その部分をグループ化するという意味があります。

入れ子にするのは構いませんが、
グループ化したものを全く同じ組でさらにグループ化、グループ化、としていくのは、きれいな組み合わせだと思いますか?


もちろん、たまたま同じ組でグループ化してしまった、ということもあるかもしれません。
たとえばある季節、月ごとにグループ化すると、
<div class="春">
 <div class="3月">
  <img src="a.jpg">
  <img src="b.jpg">
 </div>
 <div class="4月">
  <img src="c.jpg">
  <img src="d.jpg">
 </div>
 <div class="5月">
  <img src="e.jpg">
 </div>
</div>
<div class="夏">
 <div class="6月">
  <img src="f.jpg">
 </div>
</div>

このとき夏と6月のグループがイコールになりますが、
これは「たまたま1枚しかなかった」という理由のためです。

今回されようとしている方法は「たまたま」ではないですよね。

<div class="夏">
 <div class="6月">
 <div class="何のグループ?">
 <div class="何のグループ?">
  <img src="f.jpg">
 </div>
 </div>
 </div>
 </div>
</div>

そういうのはダメだというのがHTML+CSSの考え方です。


> でもdivを多用しなければ、
> 例えば写真の横にテキストを配置したり、
> よこにイメージを配置したいときに
> テーブルやHTMLタグをつかわないといけないので、
> 余計ソースが汚くなるんではないでしょうか?
tableタグが汚いのではなく、デザインのためにタグが使われることが汚いのです。
<div>をデザインのためだけに使うのであれば、やってることは変わりません。
もちろん<span>でも<ul>でも同じです。


質問者さんだけが技術的にできないのか、誰がやってもできないのかは質問文からはわかりません。
本当に誰がやってもできないのであれば、それもやむを得ませんが、
デザインを目的としたタグを使わないのもきれいなHTML文書を作る第一歩だと思います。

初心者脱出を目指してがんばってください。
    • good
    • 0

以下はタグの意味を理解し、HTMLのマークアップをしっかりやった上での話です。


最適化の観点から言えば使わないほうが良いのはたしかだと思います。
ですが、今のhtmlとcssの規格ではどんなレイアウトでも100%div無しでできるわけではありません。
これは現状では仕方がないことです。
それでも、divを使わずに目的のレイアウトができるのであれば削ったほうがいいと思います。

仕事の場合はシステムや管理の面から必要なくてもわざとdivを使うこともあります。
もしも本格的にhtmlとcssをやろうとされているのであれば、個人サイトに関しては、限界までdivを削るためのcssの指定方法を模索していった方が後々で役に立つように思います。
(本当にしっかりコーディングされたhtmlの1つのdivを削るのはかなり大変なので)


ここからはHTMLのマークアップをしっかりやらない時の話です。
SAYKAさんと少しかぶるところだと思いますが
>写真の横にテキスト
に関しては時と場合によります。
以下は画像の横にテキストが来る場合のHTMLです。
それぞれ状況と意味が異なっています。

■サンプル1
<dl>
<dt><img src="#" alt="" /></dt>
<dd>説明のテキスト</dd>
</dl>

■サンプル2
<p><img src="#" alt="" /></p>
<p>普通のテキスト</p>

■サンプル3
<ul>
<li>
<p><img src="#" alt="" /></p>
<p>普通のテキスト</p>
</li>
<li>
<p><img src="#" alt="" /></p>
<p>普通のテキスト</p>
</li>
</ul>

サンプル1は画像とそれに関する説明が横に並ぶ場合、サンプル2は画像と普通のテキストの場合、サンプル3は画像と普通のテキストが規則的に複数存在し、まとめられる場合です。
それぞれの持つ意味によってHTMLの書き方が違いますよね?
タグが入れ子になればなるほど、divはわざわざ追加する必要がなくなってきます。
サンプル2で

<div>
<p><img src="#" alt="" /></p>
<p>普通のテキスト</p>
</div>

のようにdivを追加しなければ不可能なレイアウトがサンプル3ではdivを追加することなく実現が可能です。
ですが、これはどんなものでもわざと多くタグを使う型にはめれば良いという例ではありません。
あくまでちゃんとマークアップしない結果としてdivを多様することは避けるべきという例です。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

dlタグをつかうところですが、
これはリストタグだと思いますが、
これをすると横に並びなくてたてに並びますよね。

これは別でCSSで設定すればよいということですか?
よろしければどのようなCSSになるのか教えていただきたいです。

お礼日時:2008/11/28 09:10

「ださいだの、わかってないだと書いてあります。


の言葉だけを捕らえて、非難したり、どうして・・というのは問題です。
 そのセリフが出る背景には
「tableで配置するのは間違っているから、divで配置する」という思考では、確かにHTML上は正しくても、おかしいんじゃないの・・・という意味で使われていると思います。

>でもdivを多用しなければ、例えば写真の横にテキストを配置したり、よこにイメージを配置したいときにテーブルやHTMLタグをつかわないといけないので、余計ソースが汚くなるんではないでしょうか?

 という考え方の根本は、やはりおかしいです。
 それならdivはひとつもいらないし、いってもひとつ。

 はじめにデザインありきで、内容が伴ってない。HTMLはそもそも文書構造を記述するもので、デザインのためではない。
 ただ、欠点もあって、XML/XHTMLと異なり、使える要素が限られているので、
<Picture><img src=*** /><message>****</message></Picture>なんてかけないのですから、無理からぬところはあります。

 たとえば、
<dl class="photoList main">
  <dt class="photo"><img src=""></dt>
  <dd>この写真は</dd>
  <dd>撮影日</dd>
  <dt class="photo"><img src=""></dt>
  <dd>この写真は***</dd>
  <dd>撮影日</dd>
</dl>
<dl class="photoList sub">
  <dt class="photo"><img src=""></dt>
  <dd>この写真は</dd>
  <dd>撮影日</dd>
  <dt class="photo"><img src=""></dt>
  <dd>この写真は***</dd>
  <dd>撮影日</dd>
</dl>
と書かれているHTMLにおいて、下のdl(定義リスト)をページの左端に200pxで表示し、それらは説明文は写真下に撮影条件はその下に小さな文字で、
 次のdlについては、中央に、適当な幅で表示し、説明を写真の右に、撮影条件を写真下に右寄せで・・なんて配置をしようとすると、子孫セレクタや兄弟セレクタ、属性セレクタを活用すると、divなんてひとつもいらないですよね。
  「divを多用するなというのは、divを使わなくて済むところにdivを使うな」という意味ですよ。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

テーブルレイアウトは否定されていますよね。

参考になりました。

お礼日時:2008/11/28 15:56

全然問題ないんじゃないかな


ただ、divがblock要素だって事を認識していないで沢山使っているというなら問題が有るね。
パーツとして配置するというなら通常はspanを用いる方が良いけれど、多分使い勝手はdivの方が上だろうね。

あと、画像の横にテキスト配置なんてそれこそinline要素の使い方。(区切り線が無いなら の話)


ソースの綺麗汚い以前に、目的の配置ができる事の方がまず重要。
(tableで画像を巧みに配置する古い技は見た目重視だったからに他ならない)
伝えるのが目的。その構築方法を整理するのは余裕があったらやれば良いんじゃないかな。
    • good
    • 1
この回答へのお礼

>あと、画像の横にテキスト配置なんてそれこそinline要素の使い方。(区切り線が無いなら の話)

これってインライン要素なんですか?spanとかのことですよね。


もしするとしたらどのようなタグになるんでしょうか。

お礼日時:2008/11/27 22:56

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

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

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

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

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Q

根本的な<div>の意味が分かってないと
思いますが私の質問にアドバイスをください。

.sub {
width:200px;
}
.sub div {
background-color:#CCCCCC;
}

1: <div class="sub">
2: <div>Sample</dev>
3: </dev>

上記のスクリプトにおいて<div>の中に<div>があります。これら2つの<div>の違いがよく分かりません。
アホに教えるようにご教授いただければ助かります。

Aベストアンサー

出演者:
親方(class=div)
子分 dev

親方:やいdev 俺の縄張りで生きる限りは、おきては守ってもらうぜ、あえて線はひかねぇがなぁー。幅200px;これから、一歩でもはみ出したやつは、ゆるさねぇぜ。ふっ、、、

dev:わかぇりやした親分、ただ俺たち、まだ若いんで、色気もありゃス。色は、つけてもいいですか?

親方;バカヤロ、まだ俺の気持ちがわかんねぇのか!!
幅を守れば、後の細かいことは、お前らに任せるっていってるじゃねぇか。

同じ人間でも、親分子分があるように、divタグにも、
親分子分があるということ。

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 タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

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 {

にするだけ

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

Q

はじめまして。
現在movabletype3.35で初めてサイトを作成している者です。
宜しくお願いします。

下記にありますHTMLとCSSでページを作っているのですが、

Firefoxやsafariで確認すると、

<div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている
<div id="introduction">で囲んだボックスの間に10px程の隙間が出来てしまいます。

※IE7では隙間は出来ませんでした。

<div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス
<div id="pankuzu">
<div id="introduction">

これら3つのボックスには全てCSSでmarginとpaddingを調整しているつもりなのですが、どうしてもIE7と同じように表示されず隙間が出来てしまいます。。

ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。

ということは、<div id="introduction">の中のHTMLかCSSの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。

是非ご指導、ご鞭撻宜しくお願い致します。


----------------------------------------------------------------
【CSS】

* {
margin: 0;
padding: 0;
border: 0;
background-color:transparent;
color: #333;
font-size: 100%;
font-weight: normal;
font-style: normal;
text-decoration: none;
}


div#keyvisual {
width: 780px;
height: 100px;
margin: 10px 10px 0 10px;
padding: 0;
background: url("※※※.gif")
no-repeat 0 0;
}

div#title {
width: 500px;
height: 50px;
line-height: 350%;
margin: 0 0 0 10px;
padding: 0;
}

div#pankuzu {
width: 780px;
height: 20px;
margin: 0 10px 0 10px;
padding: 0;
background-color: #999;
}

div#pankuzu p {
font-size: 50%;
}

div#introduction {
width: 780px;
height: 50px;
margin: 0 10px 0 10px;
padding: 0;
background-color: #999;
}

dl#site {
margin: 0;
padding: 0;
}

dl#site dt {
display: block;
float: left;
clear: left;
width: 160px;
margin: 15px 5px 10px 5px;
padding: 0;
font-size: 90%;
text-align: left;
background-color: #fff;
}

dl#site dd {
width: 600px;
margin: 15px 5px 10px 5px;
padding: 0;
font-size: 80%;
text-align: left;
}
---------------------------------------------------------------
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">

※ヘッダー部分は省略しています。

<!-- サイトボディー部分ここから -->
<body>
<div id="container">
<div id="keyvisual">
<div id="title">
<h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1>
</div>
</div>
<!-- パン屑リスト -->
<div id="pankuzu">
<p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$>
</p>
</div>

<div id="introduction">
<dl id="site"><dt>題名</dt><dd>説明</dd></dl>
</div>
----------------------------------------------------------------

はじめまして。
現在movabletype3.35で初めてサイトを作成している者です。
宜しくお願いします。

下記にありますHTMLとCSSでページを作っているのですが、

Firefoxやsafariで確認すると、

<div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている
<div id="introduction">で囲んだボックスの間に10px程の隙間が出来てしまいます。

※IE7では隙間は出来ませんでした。

<div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス
<div id="pankuzu">
<div id="in...続きを読む

Aベストアンサー

dl#site dd のmargin-top:15pxが
上に突き出ている感じですね。
周囲の要素のPaddingで代用してはいかがでしょうか。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QCSS <div>の入れ子が反映されない

<div>要素を使ってレイアウトを考えています。
いくつかのBOXを一まとめにして中央表示にしようと思うのですが
一まとめにする為のdiv要素が全く反映されません。

============================

* { padding : 0px ;
margin : 0px ; }


#kihon { background:#ff0000;
width : 752px ;
margin : 0 auto ;}

#header { width : 750px ;
background: #ff00ff ; }

#main { float: left;
width: 500px;
background: #0000ff ; }

#menu { float: left;
width: 250px;
background: #00ff00 ; }

#footer { clear : both ;
width : 750px ;
background: #000000 ; }

============================


<body>

<div id="kihon">

<div id="header">aaa</div>

<div id="main">aaa</div>

<div id="menu">aaa</div>

<div id="footer">aaa</div>

</div>


</body>

============================

上の記述で、<div id="kihon">が全く反映しません。
一応一まとまりにはなるのですが、左上に固まって表示されるだけです。
自分でも色々調べたのですが調べ方が悪いのか原因が全く分かりません。

知り合いにHP作成の知識がある人がおらず相談が出来ないので
こちらでお力を貸して頂きたく投稿させていただきました。
よろしくお願いいたします。

<div>要素を使ってレイアウトを考えています。
いくつかのBOXを一まとめにして中央表示にしようと思うのですが
一まとめにする為のdiv要素が全く反映されません。

============================

* { padding : 0px ;
margin : 0px ; }


#kihon { background:#ff0000;
width : 752px ;
margin : 0 auto ;}

#header { width : 750px ;
background: #ff00ff ; }

#main { float: left;
width: 500px;
background: #0000ff ; }

#menu { float: left;
widt...続きを読む

Aベストアンサー

こんばんは

margin : 0 auto ;
この設定が厄介です。ここだけを見ていたのでは解決できません。
最初の行の
<!DOCTYPE html PUBLIC …
の影響を受けます。

以下のサイトを参考にしてみてください。
http://oshiete.goo.ne.jp/qa/5046862.html
http://korekara-from-now-on.at.webry.info/201002/article_13.html


人気Q&Aランキング