掲示板/スタイルシート質問板/過去ログ/一覧/ div

0 名前： ちょびん ： 2005/05/27 22:39: <html>
<head>
<title></title>
</head>
<body>
<div style="width:300px; height:150px; background-color:#ffcccc; ">
<div style="width:200px; height:100px; background-color:#ccccff; ">

text

</div>
</div>

</body>
</html>

ピンクのボックスの中のブルーのボックスを下位置に、またブルーの
ボックスの中のテキストを下位置にしたいんです。
vertical-alignでどうにかしようとしましたが出来ませんでした・・。
ご教授お願いします。

1 名前： 寝太郎 ： 2005/05/27 22:39: こんにちは。

ごめんなさい、回答ではありません。
一応なったというだけで、borderなしが前提、margin-top:80px;は
上に文字がなく､これぐらい下げればいいだろうと適当です。
自分でもこんなやり方しか思いつかないのが情けないのです。
<td valign="bottom">text</td>や
<td style="vertical-align:bottom;">text</td>
のような表にする以外でいい方法はないのでしょうか？
スマートなやり方があれば、私も教えていただきたいです。

<body>
<div style="width:300px; height:150px; position:relative;background-color:#ffcccc; ">
<div style="width:200px; height:100px;position:absolute;top:50px;left:0; background-color:#ccccff; ">
<div style="margin-top:80px;">text</div>
</div>
</div>
</body>

2 名前： ちょびん ： 2005/05/27 22:39: 寝太郎さん、お返事ありがとうございました。

以下のページを発見しました。
http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
これを読むと、<div>の中のオブジェクトの縦位置を指定するのは
IEのバグで出来ないようです。
残念です。

3 名前： 寝太郎 ： 2005/05/27 22:39: こんにちは。
ちょびんさん、ありがとうございます。

教えていただいたページ読ませていただきました。
ほとんど分かりません(*_*)が、やっぱり、無理なんですかね。

う～む、ふ、ふ、深いですねぇ、この世界は。
ワープロの世界なら､何でもありありで、平気で表でレイアウト
組んで、枠線消してますけどね。PDFにしてしまえば関係ないし。

HP作り始めた何にも知らない私には、
</div></div></div>より
</td></tr></table>の方が分かりやすかったりしてますｗ。

縦の配置は納得?ですが、
ボックス内のテキストの橫の配置はtext-alignしかないのでしょうかね？
ワープロならTabで簡単に好きなところに飛ばせるのにと
いつも不思議に思ってます。知らないだけかもしれませんが。
tab.s5{space-left:5em;}なんてインラインタグなかったですよねｗ？
いつも少し間隔空ける時は ではなく全角スペース入れてます、
めんどくさいから。<pre>使ったりもしますけどね。
怒られそうですね。

失礼しました。

4 名前： Pid ： 2005/05/27 22:39: >>0 ちょびんさん
> ピンクのボックスの中のブルーのボックスを下位置に、またブルーのボックスの中のテキストを下位置にしたい

とりあえず，適当に margin，padding を調節してやれば良いのでは。

<div style="padding: 100px 0 0 200px; background: #fcc;">
<div style="padding: 190px 0 0 0; background: #ccf;">
</div>
</div>

>>3 寝太郎さん
> やっぱり、無理なんですかね。

リンク先は議論の流れがややこしいのでアレなのですが，縦位置指定は可能です。要するに，{ display: table-cell; } にすれば { vertical-align: bottom; } が反映されるようになります（vertical-align はインライン要素および表セル要素にのみ指定可能ですから）。ただ IE だけは，CSS 実装のバグのためにできない，という話です。

5 名前： ちょびん ： 2005/05/27 22:39: 寝太郎さん
実は私もリンク先の内容は半分も理解できていません(^^ゞ
今までず～っとtableで段組みしていたので、私も</td></tr></table>の方が
よっぽど分かりやすいのですが、「本来の使い方ではない」「CSSで自由な
レイアウトを実現」を目にするたび「テーブルではイカンのだ」と妄信的に
思っていました。
リンク先もそうですが、議論の熱いCSS関連の掲示板を眺めていると表現の
手段についての議論ではなく、何か宗教じみた精神論を聞いているような気に
なります。なので自分で理解できる範囲でCSSを使い、納得できないところは
HTMLのままでいいか、と最近は思い（否、あきらめ）始めています。

Pidさん、お返事ありがとうございます。
>とりあえず，適当に margin，padding を調節してやれば良いのでは。
IEとNNで確認しながら最終的にはそうするしかないのかな、と思っていました。
実際、全ブラウザ使用者の過半数がIEを使っている事実を考えると、なんとも
歯がゆいです。私は趣味でいじっている程度ですが、プロのクリエーターの
方々は頭を悩ませているんでしょうね。

6 名前： Pid ： 2005/05/27 22:39: > 表現の手段についての議論ではなく、何か宗教じみた精神論を聞いているような気になります。

たはは……まあ確かに，そう思われても仕方がないっすね…(^^;)。

ただ，「HTML はデザイン・レイアウトのための言語ではない」というのは，今後の Web 技術の方向性を決定する重要なポイントだということは心に留めておいて下さい。

レイアウトを行う上で「表組み」は非常に大切な技術です。しかし，（他に方法が無かった昔ならともかく，現在）表組みを「table 要素で実現する」のは色んな面で避けた方が良い（このことは様々な形で論じられていますね）。表組みを行うときは CSS の { display: table; } などを用いれば，HTML 自体は実にシンプルなものになります。

CSS は，一般に想像されている以上に強力なデザイン言語です（簡単なツリ－型メニュ－も作成できます）。でも，IE が CSS2 にマトモに対応していない現状では，「シンプルで誰にでも伝わる HTML」が書きづらいんですよね。まあ今夏には IE7 が出るそうですが，どうなることやら……。

なお，margin と padding はデザインを実現する上でとっても汎用性のあるプロパティですので（たとえば，「margin と padding で余白を空け，そこに他の要素をはめ込んで段組する」など），大いに活用して下さい。

激しく余談でした m(__)m。

7 名前： カヅサツ ： 2005/05/27 22:39 ［URL］: とりあえず、IE が display: tableなどに対応していない現在、大枠でテーブルレイアウトやむなし、というのがオレの考えです。「大枠で」というのはどういうことかというと、簡単な段組とか、テーブルセルに対するvertical-align を活用したいとかそのあたりで、レイアウト用のテーブルが２重以上の入れ子になると危険信号と思って良いでしょう。

あと、display: table系を使うにしても、結局ブロックを無意味に重ねなきゃいけないんで、そんなことだったらテーブル使ってもいいじゃんとか思う次第。

ユーザスタイルシートで何をされても泣かない覚悟があれば、だいたい大丈夫なのではないでしょうか(*)

もちろん、その他の論理要素を適切に使うのは大前提ですが。

(*)オレの個人環境では以下のような塩梅です。

table,th,td{
border: 1px solid #00F;
border-collapse: collapse;
width: auto;
height: auto;
text-align:left;
vertical-align:middle;
table-layout: fixed;
}

8 名前： Pid ： 2005/05/27 22:39: > 大枠でテーブルレイアウトやむなし、というのがオレの考えです。

正直なところ，私もそう思います。場合によっては CSS に対応していない User-Agent に対しても，ある程度の「見栄え」を保証する必要がありますから（典型的には b/i/big/small/hr など）。HTML には常に「どうレンダリングされるか」がつきまとう，というのは否定しようがありません。

だから，最終的には「自分と，自分の周囲にとってどの方向性がベタ－か」ということになるかと思います。ただ，それが「WWW の方向性」と一致するとは限らないし，まあ何かグダグダ言ってみたかった (^^;)。すみませんすみません。

※つか，私 >>6 でむちゃくちゃ偉そうに語ってますね……恥を晒しておこう…。

※まあ少なくとも，CGI スクリプト作者さんは table レイアウトをやめてほすぃ。CSS/JavaScript でのコントロ－ルがしづらくてかなわん……。

> display: table系を使うにしても、結局ブロックを無意味に重ねなきゃいけないんで、そんなことだったらテーブル使ってもいいじゃんと

私は最近 div 使うの億劫なんでリストでごまかしていたりするのですが，リスト←→表の相互変換は割とスム－ズにいきそうです。

9 名前： 寝太郎 ： 2005/05/27 22:39: こんばんは。

Pidさん、コメントありがとうございました。
{display: table-cell; }なんて、びっくりです！！
「でも、IEがねぇ…、なんですね」

overflowのスクロールバーに色つけて目立たなくさせるのは
けっこういいと思うんですが､
「でも、IEだけではねぇ…、なんですね」
泣かされますねぇ、いろいろと。
ほんと、CSSは初心者にはきついですわ。

>カヅサツさんへ
いつもお勉強させていただき、ありがとうございます。
ご提示のソース､今度試させていただこうと思ってます。

でも、何か変更してもキャッシャが効いてすぐ結果がわからない
場合があるから、おとろしいですね。
<head></head>に書くとスクロールで目が回るし。ただでさえ
わけわからんのにｗ。
何かいい方法ないかしらん？

なんか、愚痴になっちゃいましたね､失礼しました。

10 名前： カヅサツ ： 2005/05/27 22:39 ［URL］: > <head></head>に書くとスクロールで目が回るし。ただでさえわけわからんのにｗ。
> 何かいい方法ないかしらん？

えーと、外部スタイルシートで解決しそうな気がしますが。

11 名前： 寝太郎 ： 2005/05/27 22:39: こんにちは。
カヅサツさん、ありがとうございます。

>えーと、外部スタイルシートで解決しそうな気がしますが。
すみません、言葉足らずで…。
その外部スタイルシートでやってるんですぅ。
<head></head>に書くとキャッシュ効かないのかなと思って
まずいことやっちゃったのかなと…。

キャッシュの設定にコツがあるんですか？
サイト閲覧に差し障りのないぐらいで、
いつも最新の更新状態を確認できるんなら、
何でも試してみるんですけどねぇ。

スタイルシートをいじって、少し経ってから
Oh,No! float:sink; ってな感じがいちばんこたえるんですっ(*_*)。

エディタってワープロのように同じページの画面を
上下２分割したり、しおりをはさんどいて好きなところにいつでも
ジャンプってできないですよね？
行を指定すればジャンプできるですけど。

Help読んだり､いろいろ操作のやり方試してやってみます。

ありがとうございました。

12 名前： カヅサツ ： 2005/05/27 22:39 ［URL］: > キャッシュ

あら。オレは特に意識せずとも、最新の状態が表示されるんですが、
あー Mac IE はキャッシュが効き過ぎるという罠があったようななかたような。

object要素で、外部スタイルシート読み込んでみるとどんな塩梅でしょうか。

13 名前： U D ： 2005/05/27 22:39: ちょっと横から失礼。

>>11 エディタってワープロのように同じページの画面を…
以下4行

それは何のエディタを使っているのか知りませんが、使う物によると思いますよ。
探せばそういうのもあるはずです。
少なくともしおり機能ぐらいは簡単なものなので搭載されているものはいくらでもあるかと。

ま、別にどーでもいいんですが。

14 名前： 寝太郎 ： 2005/05/27 22:39: こんにちは。

>カヅサツさん
ありがとうございます。

>object要素で、外部スタイルシート読み込んでみるとどんな塩梅でしょうか。

のご報告です。
外部スタイルシートのリンクはつけたまま、
<head></head>内に､
<OBJECT DATA="css/object.css" TYPE="text/css"
WIDTH="200" HEIGHT="100"></OBJECT>
…このサイトのサンプル丸写しです。(-_-;)

てなあんばいで、書き込んでCSSをいろいろ変更しても、
すぐに最新の情報に更新されるようになりました。
まだ２,３回しか試してませんが､もう少し続けてみます。
初めて使った要素で､WIDTH="200" HEIGHT="100"とあるから、
画面上にぐちゃぐちゃのCSSファイルテキストでも出てくるのかと
思ってましたがｗ、何も出てきませんね。
<body></body>に入れると妙なところに空白のボックスができましたが。

おそろしいので、コピーしたので試していって、うまくいくようだと
オリジナルにも埋め込もうかなと考えていますが、スタイルシート読み込んだ
後にHtmlの<object>設定を再読み込みするということでキャッシュに
はまらないのでしょうか？
別に差し障りはないですよね？

>UDさん。
>しおり機能ぐらいは簡単なものなので搭載されているものはいくらでもある

ありがとうございます。Style Noteというエディタを使っております。
あれからいろいろ試してみまして、
id#のクラスの異なるidを選択して､
あちこちジャンプできるようになりました。
画面２分割…よく考えてみればHTMLだとあまり必要ないですね。
ワープロの癖でしたね。

これからもよろしくお願いいたします。
ありがとうございました。

15 名前： カヅサツ ： 2005/05/27 22:39 ［URL］: > スタイルシート読み込んだ後にHtmlの<object>設定を再読み込みするということでキャッシュにはまらないのでしょうか？

たぶんそうです。

が、構造的におかしいと言えばおかしいので、頻繁にCSSを書き換えるとかしないのであれば、テスト以外に使わない方が無難です。

どうしても使いたければ head要素に入れるとか、display:none;とでもするとかを試して下さい。

#ところでブラウザは何をお使いでしょうか？

16 名前： 寝太郎 ： 2005/05/27 22:39: こんばんは。
>カヅサツさん
たびたびすみません。

>#ところでブラウザは何をお使いでしょうか？
ブラウザは、IEのVer6.0、Opera7.54u2、NN7.1の３つで
確認しながらやっております。
といっても、みんな変なところで結果がちがう場合が多いので、
なんだかなーという感じですが…。

今､ブラウザのキャッシュ関係の調整をやってみて、
どうなるか試しているところです。

Operaで、メモリーキャッシュとディスクキャッシュをなしにしても
Operaだけ最新の情報に更新されなかったりしましたね(*_*)。

おそらく、設定で何とかなるのかもしれないですが､
Q＆Aでもキャッシュのことあまり見ませんので､
皆さん､どうされてるのかなと不思議に思ったりしますが。

もうちょっといろいろ調べて､またご報告させていただきたいと
思います。

ほんとうにありがとうございました。