こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSレイアウトの中にテーブルのような使い方でCSSを入れ子にする方法で質問です。

テーブルを一切つかわないでサイトを作成したいと思っていて、
現在CSSで2カラムのレイアウトをしています。

困っているのが、
ページの下部に”前のページ HOME 後ろのページ”
という風に横に3つならべたいと思っています。
テーブルであれば簡単にできることなのですが、
それをCSSでできないかと思っております。

そこで外部CSSに
.table{
width: 10px ;
background-color: #ffffff;
margin: 5px;
border: solid 0px ;
padding: 0.5em;
}

と記述し、HTML部分に
<p><span class="table">前のページ</span>
<span class="table">HOME</span>
<span class="table">後ろのページ</span></p>

という風に記述してみたのですが、
文字を打っていくとどんどんよこに伸びて、横幅を指定している意味がないような感じです。

私のようなCSSの使い方をしたい場合はどのように記述すればよろしいのでしょうか?

投稿日時 - 2008-11-26 21:32:17

QNo.4509667

すぐに回答ほしいです

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

ANo.2/4/5です。

> たしかにフッターがなんだか長いです(^^;)

やはりそうでしたか。

> 740pxにすればおっしゃるとおり完璧になりました!

お役に立てた様で良かったです。

> paddingの分長くなっちゃうんですね。勉強になりました。

このあたりのボックスモデルの計算方法については、下記のサイトなどがとてもわかりやすい解説をされていますので、一度お読みになってみる事をお奨めします。このサイトはコラム組に関しても大変よくまとまっていますので、その点でも参考になるかと思います。
【参考】http://www.geocities.jp/multi_column/
第1章から順番にじっくり読んでいかれると今後のCSSによるコラムレイアウトに関して役立つかと思いますが、特に第2章「ボックスモデルと DOCTYPE スイッチ」をご覧になれば、上記のwidhtとpaddingに関する問題や、もう一つのご質問である:

> DOCTYPEについてなのですが、どのブラウザでみても問題のおきにくいものってあるのでしょうか?

についても、ヒントが得られると思います。後者については諸条件(制作者のポリシーも含む)により、どの方法を採用するかはケースバイケースですのでご自身のニーズ(現状のスキル的なものも含めでですね)に最も相応しいと思われたものを採用されるのがよいのでは。

投稿日時 - 2008-11-27 18:17:09

お礼

教えていただいたサイト非常にわかりやすいです。
ありがとうござます。

DOCTYPE宣言についても理解できました。
とりあえず今のままでOKのようです。

これでサイトをつくっていけますが、
またつまづきましたらよろしくおねがします(^^;)

投稿日時 - 2008-11-27 18:44:08

ANo.6

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(6)

ANo.5

ANo.2/4です。

> どうやらDreamweaver上で線がかぶっているだけのようでした(^^;)

ああ…Dreamweaverのデザイン・ビューで見ておられたのですね。あれは実際のブラウザでの表示結果とは異なりますから、必ずこまめにプレビューしながら状態を確認された方が宜しいですよ。

> それとDOCTYPEなどは下記です。(といってもこれの意味はまだよくわかっていませんが、、、。)
> (省略)

(DOCTYPEにはそれぞれ意味があり、どのDOCTYPE宣言をするかによって推奨/非推奨の要素やレンダリングの解釈等が異なってきますので、できる限り早い段階で学ばれておく事をお奨めします)
XHTML 1.0 TransitionalのXML宣言なしのモードですね。サンプルをこのモードで当てはめてみましたが、一点を除き問題はなかったです。
一点というのは:

> ちなみに現在フッターのタグは現在こんな感じです。
> (省略)
> .footer {
> (省略)
> }

です。ここで、フッターに"width: 750px;"を指定されていますが、同時に"padding: 5px;"を併用されている為、このモード下ではフッターの幅は実際には750px(widthプロパティでの値)+5px×2(paddingプロパティの左右の値それぞれ)=760pxでレンダリングされてしまています。他のご質問でのソースを見る限り、質問者様の意図されているコンテンツ全体の幅は750pxだと思われますので、このままだとフッターが横に10pxはみ出してしまっている事になります。ですので、750pxの幅に収めたいのであればwidthの値から左右paddingの値を引いてやる必要があります。
つまり、widthの値は、750px-5px×2=740pxとなり、"width: 740px;"指定するのが適切です。

投稿日時 - 2008-11-27 16:51:21

お礼

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

今言われて驚きました!
たしかにフッターがなんだか長いです(^^;)

タグを見るだけでここまでわかるなんてとても尊敬します!

740pxにすればおっしゃるとおり完璧になりました!
paddingの分長くなっちゃうんですね。
勉強になりました。

ちょっと気になったのですが、
DOCTYPEについてなのですが、
どのブラウザでみても問題のおきにくいものってあるのでしょうか?私はDreamweaverでデフォルトなので使っています。

投稿日時 - 2008-11-27 16:59:54

ANo.4

ANo.2です。ANo.1への返信を見ました。

> 入れるときにたてではなく横に並べたいのです。
> テーブルを使えば簡単なのですが、
> これをCSSで同じようなことができないかなと思っています。
>
> |ーーーーーーーーーーーーーーーーーーー|
> |前のページ|TOPページへ|次のページ|
> |ページ名 |ページ名   |ページ名 |
> |ーーーーーーーーーーーーーーーーーーー|

やりたいイメージがこれ(横並びにしたい)だけなのでしたら、ANo.3様の方法の方が遙かに簡単ですので、そちらの方法をお奨めします。私の方法ではご指摘の通り、ナビ全体がセンタリングにはなりませんし。
ただ、IE6/7だと上下方向のpaddingが必ずしも意図した通りにはならない、というか正しく効いていない感じです。line-heightプロパティをある程度広目("line-height: 200%;"ぐらい?140~150%程度だと、上方向のpaddingがない状態に見えます)にすると有効になる様ですが…

…とここまで書いたらANo.2への返信が付きましたので、まとめてレスを。

> divで囲った中にこれを入れているのですが、このdivにはボーダーがあるのですが、このボーダーにかぶった感じで表示されてしまいます。
> このdivは普通のテキストであればオーバーした分下に伸びてくれるのですが、教えていただいたものでは伸びてくれません。

他のご質問を見る限り、くだんの部分のスタイルは:

.footer {
clear: both;
width: 750px;
height: 100%;
}

の様ですが、現在はこれに更にボーダーが付加されている、という事ですね?そうと仮定して、ANo.2のHTML、CSSをそれぞれ以下の様に変更してみました。----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
(省略)
※以下のマークアップのみ変更
<div class="footer">
<ul class="hoge">
<li><a href="#">前のページ</a></li>
<li><a href="#">HOME</a></li>
<li><a href="#">後ろのページ</a></li>
</ul>
</div>
(省略)
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
※以下のみ追加、他は同じ
.footer {
clear: both;
width: 750px;
height: 100%;
border: solid 1px #c00;
}
----------------------------------------------------------------------
このサンプルでの検証結果では、「ボーダーにかぶった感じで表示」されませんし、「教えていただいたものでは伸びてくれ」ないという状態にもならず、仮にフッターのナビのアイテムの中に長目のテキストを入れてみても、指定した幅内で折り返して表示するのみで、「オーバーした分下に伸びてくれ」ておりますが?
ただ、子要素<ul class="hoge">~</ul>は親要素である<div class="footer">~</div>に対しての余白を特に設けてはいませんので、親要素のボーダーに隙間無く隣接した状態にはなります。もしある程度の余白を持たせて表示させたいという事であれば、以下の様にul.hogeの四辺のマージンを適当に追加してやって下さい。

ul.hoge {
(省略)
margin: 5px;←変更
}

現在頂いている情報では検証できるのはここまでです。解決しない様であれば更に詳細な情報(先ずはDOCTYPE、XHTMLであればXML宣言の有無、文字コード、ですね)を補足して頂きたく思います。

投稿日時 - 2008-11-27 14:46:51

お礼

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

一度サーバーにUPして確認してみたのですが、
どうやらDreamweaver上で線がかぶっているだけのようでした(^^;)

ですので、教えていただいたタグでOKでした。
すみません。

ちなみに現在フッターのタグは現在こんな感じです。

.footer {
font-size: 10pt;
clear: both;
width: 750px;
height: 100%;
background-color: #ff7fbf;
padding: 5px;
}

それとDOCTYPEなどは下記です。(といってもこれの意味はまだよくわかっていませんが、、、。)

<!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">

これをheadの上に記載しております。

他にも何かアドバイス等ありましたらお願いいたします。
他回答まで見ていただいてありがとうございます。

投稿日時 - 2008-11-27 16:06:11

ANo.3

私のはabrilさんとは別の方法で
なんとなくですが、中央寄せできて、widthは指定しないほうが楽かなと思いますので

<ul id="NAV"><!--
--><li><a href="#">前のページ</a></li><!--
--><li><a href="#">HOME</a></li><!--
--><li><a href="#">後ろのページ</a></li><!--
--></ul>


#NAV {
text-align:center;
}

#NAV li {
display:inline;
padding:5px 10px; /* ここで余白を設定します */
}



それぞれのボタンに均等に余白を取るタイプの指定方法です。
widthをそれぞれに指定しないので、中身に応じて幅が変わります。
ウインドウの幅が極端に狭くなるとレイアウト次第ではメニューが2段になるかもしれません。
その場合は#NAVにwhite-space:nowrap;を指定すると落ちなくなったはずです。

投稿日時 - 2008-11-27 12:15:16

お礼

すみません、こちらのタグでやってみたのですが、
幅を指定する場合はどのようにしたらよろしいのでしょうか?

#waku li {width: 100px;
display:inline;
padding:5px 5px;
}

という風にやってみたのですが、
やはりできませんでした。

投稿日時 - 2008-11-28 09:46:08

ANo.2

widthプロパティは非置換インライン要素であるspanには適用されません。
ですから、現状のままではいくら"width: 10px;"と指定しても無効です。だから、テキストの量に合わせてレンダリング領域が伸びて行くのは「正しい」結果です。
それに、仮に幅の指定が有効になっていたとしても、10pxという値自体大変に小さいですから、内包するテキストが判読不能な豆粒ぐらい状態にでもなっていない限り(10pxの枠からは)大きくはみ出しますよ。

また、仮に現状のCSSでの設定が実現された場合、背景が白、ボーダーの指定は無効("border: solid 0px;"では、ボーダーの形状を指定しておきながらボーダーの太さは0、という事になってしまいますので結果としてボーダーは引かれません)、テキストの余白は四辺に0.5emづつ、更にspan要素どうしの余白として四辺に5px、という事になりますがそれは本当に質問者様が望まれているレイアウトですか?おそらく、ボーダー部分に関してはテキストの四辺に枠を引いてボタン的な感じで見せたかったのではありませんか?

以下は「仮にそうだとした場合」の実現方法のサンプルです。

まず「幅」を決めてレンダリングしたいのであれば:
【A】widthプロパティが適用される要素(この場合はタグの事だと思っておいて下さい)を選択する(例えばul,p等)。
【B】widthプロパティが適用される様にdisplayプロパティの値を設定する(例えば"display: block;")。
このどちらかの手法を選ぶ事になります。
ただし、いずれの場合も要素のdisplayがblockになるという事は”前後に改行を置いた表示になる”為、「横並び」ではなく「縦並び」になります。
その為、次の段階としてこれを再び「横並び」状態にさせる様なスタイルを併せて設定せねばなりません。「横並び」にさせる為には、floatやpositionプロパティを使う方法が考えられますが、この場合はfloatで調整するのが適切かと思います。

基本的には、CSSの設定で【A】【B】いずれの方法でも可能です。ただ、本件の様な「ナビゲーション」の意味を持つ内容に対しては、spanではなくulでマークアップする方が、論理構造上より理にかなっている為、一般的です。spanは”論理的意味を持たない”インライン要素として用意されているタグですので、どうしても他に適切なマークアップができない場合の為の逃げ道の様なものです。

ということで、以下は【A】を採用した場合の一例です。
質問者様の採用されているDOCTYPE等が不明ですので、検証結果はあくまで以下の条件によるものです。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link rel="stylesheet" href="css/sample.css" type="text/css" media="all">
</head>

<body>

<ul class="hoge">
<li><a href="#">前のページ</a></li>
<li><a href="#">HOME</a></li>
<li><a href="#">後ろのページ</a></li>
</ul>

</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
ul.hoge {
zoom: 100%;
list-style: none;
padding: 0;
margin: 0;
}
ul.hoge:after {
height: 0;
visibility: hidden;
content: "";
display: block;
clear: left;
}
ul.hoge li {
float: left;
width: 100px;
background-color: #ffffff;
border: solid 1px;
text-align: center;
padding: 0.5em;
margin: 5px;
}
----------------------------------------------------------------------
これでIE6/7、Firefox2/3、Opera9.61、Sfari3等でほぼ同様の表示結果を得ています。
それから、class名やid名には、「物理的」ではなく「論理的」なネーミングが推奨されていますので、今回の様なものであれば「ナビ」とか「フッター」とかの意味を持つclass名を付けられた方がベターだと思います。まして、"table"などというタグ名と被る様なネーミングはできるだけ避けられた方が宜しいでしょう。

また、私は質問者様の他のご質問を詳細には把握しておりませんので、蛇足ですが、ANo.1様のアドバイスにまず従われるのが混乱から抜け出す近道だと思います。現状の様に未解決の問題を次から次へと撒き散らすのではなく。

投稿日時 - 2008-11-27 11:33:29

お礼

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

やってみましたが、まさしくこれがやりたかったのです!

しかし、これですと、
divで囲った中にこれを入れているのですが、
このdivにはボーダーがあるのですが、
このボーダーにかぶった感じで表示されてしまいます。

このdivは普通のテキストであればオーバーした分下に伸びてくれるのですが、教えていただいたものでは伸びてくれません。

これはどうやって解決したらよいのでしょうか?

投稿日時 - 2008-11-27 14:19:06

ANo.1

とりあえず落ち着いてください。
最近の質問を見ても返信が無く、結局解決できたのかどうかもわかりません。
今の状況がわからないと回答のしようがないです。もう少しやりたいこと等を明確にしてください。
どのようなレイアウトを希望されているのですか?

投稿日時 - 2008-11-26 22:28:07

お礼

すみません少しあせりすぎていました(^^;)

今の状況は2カラムの左メニューのサイトを作成しております。
レイアウト自体は完成しました。

後は中身のページのレイアウトをつくりこんでいます。

そこで、ページのコンテンツの最下部あたりに
”前のページ HOME 後ろのページ”に進むというような
矢印を入れたいと思っています。

入れるときにたてではなく横に並べたいのです。
テーブルを使えば簡単なのですが、
これをCSSで同じようなことができないかなと思っています。

|ーーーーーーーーーーーーーーーーーーー|
|前のページ|TOPページへ|次のページ|
|ページ名 |ページ名   |ページ名 |
|ーーーーーーーーーーーーーーーーーーー|

こんな感じです。
この枠を見えなくして横に並べたいのです。

伝わりましたでしょうか?

投稿日時 - 2008-11-27 11:45:03

あなたにオススメの質問