/* CSS・スタイルシート質問スレッド【68th】

このエントリーをはてなブックマークに追加
952Name_Not_Found:2007/11/10(土) 22:21:20 ID:???
>>951
そのサイトより引用
>あなたが、htmlタグやCSSを全くあつかった事がない初心者ならば、
>このテンプレートを使用することは避けた方がいいかもしれません。
>正しい文法についてはgoogleなどを使用し、ご自分で学習してください。
953Name_Not_Found:2007/11/10(土) 22:26:44 ID:???
>>951
基礎から勉強してください。
954Name_Not_Found:2007/11/10(土) 22:31:11 ID:???
何事も背伸びをするなってことです。
955Name_Not_Found:2007/11/10(土) 22:56:28 ID:???
>>951
今時OS9で普通にネットしようなんて人がおかしい。
CSS切ったら見られるだけで御の字と思うべき。
そんな化石に構う必要は無い。
956Name_Not_Found:2007/11/11(日) 16:43:16 ID:???
問題解決能力のない奴の見本回答だな。
957Name_Not_Found:2007/11/11(日) 17:27:14 ID:???
セレクタで、クラス指定してない要素にのみ適用する方法ってあるんですか?
E[class=""]とかは駄目でした。
958Name_Not_Found:2007/11/11(日) 17:35:32 ID:???
>>957
基礎から勉強してください。
959Name_Not_Found:2007/11/11(日) 18:21:14 ID:???
>>958
基礎っていうかこういう人はもうテーブルレイアウトでいいんじゃないかな
960Name_Not_Found:2007/11/11(日) 18:48:08 ID:???
CSS 3 Selectorsが使えるようになるのを待つしか…
961Name_Not_Found:2007/11/11(日) 23:27:21 ID:???
CSSの段組についての質問です。初心者ですいません。

フレームのように左右分けた段組でどちらも高さを600pxにして
並べています。メニュー側はこれでいいのですが、メインのボックス側は
ページによって高さが異なるので、下に空白が出来ます。
出来ればあまり空白を作りたくないのですが、これはそれぞれのページで
高さを設定しなければいけないのでしょうか?

あるページでは多分高さがオーバーしてる状態だけど、表示はちゃんとされたので
オーバーした分は自動で間伸びする形で高さが合うのかな・・・?と思いました。
ということは高さを一番最小限で指定すれば綺麗なレイアウトになるのかと思ったのですが
その辺がそれでいいのかどうかよくわかりません。
とんちんかんな質問でしたらすいません。教えていただければ嬉しいです。

962Name_Not_Found:2007/11/11(日) 23:35:08 ID:???
フレーム大盛況^^v
963Name_Not_Found:2007/11/11(日) 23:58:01 ID:???
>>961
簡単にごまかす方法は、2つのdivを更にdivで囲んでメインdivと同じ背景色にする。
964Name_Not_Found:2007/11/12(月) 00:13:35 ID:14axabIY
>>961
・高さの異なるカラムを揃えるスタイルシート (http://coliss.com/articles/build-websites/operation/css/558.html)
・高さの異なるカラムを揃えるCSSの仕組み (http://mynotes.jp/blog/2007/10/the_same_height_columns)
965Name_Not_Found:2007/11/12(月) 00:51:43 ID:???
>>961
ttp://www.k5.dion.ne.jp/~i-araki/css/gijihaikei.html
下から見ると各種取り揃えて。
上から見ると、限定的。
ぶっちゃけ、テーブルが楽。
966Name_Not_Found:2007/11/12(月) 04:20:39 ID:???
967Name_Not_Found:2007/11/12(月) 08:31:03 ID:???
961です。

レスいただきありがとうございました。

結局>>963さんのおっしゃるような形でなんとかなりました。

そして再度確認なのですが、左右のボックスの高さの指定は必ず必要なのでしょうか?
とちらか片方だけ高さ指定してもレイアウトは崩れないのでしょうか?

いちおうやって、ブラウザで見たら崩れはなかったのですが、この方法でいいのか
わからなくて・・・すいません。
968Name_Not_Found:2007/11/12(月) 09:11:30 ID:???
>>967
基礎を勉強して下さい
969Name_Not_Found:2007/11/12(月) 13:27:07 ID:ymvEmLqh
質問させて下さい

<div id="box-back">
<div id="box">
</div>
</div>

body {
text-align: center;
background-color: #0000FF;
}
#box-back {
width: 100%;
display: block;
background-color: #FF0000;
}
#box {
display: block;
width: 820px;
text-align: left;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
}

#boxが中央に来るようにして、ブラウザサイズの横幅変化で左右の背景が伸びるような構造ですが
この#boxの左側背景を#box-backの背景色、#boxの右側背景をbodyの背景色のようにする方法はありますか?

#box-backの背景色 | #boxの領域 | bodyの背景色  ←このような感じで
970Name_Not_Found:2007/11/12(月) 14:02:34 ID:???
>>969
box-backを取り除いてbodyの背景に
#box-backの背景色 | #boxの領域 | bodyの背景色
の画像を指定すればいいんじゃない?
いらないdivも消えるし。

背景画像は横2000px縦1px位で横位置をセンターにすれば画面が広がっても大丈夫。
971Name_Not_Found:2007/11/12(月) 15:55:50 ID:???
>>970
やっぱりcssでじゃなく背景画像での制御が必要なんですね
参考になりました、ありがとうございました
972Name_Not_Found:2007/11/12(月) 16:11:07 ID:???
上でもカラムの高さをそろえるのに-30000いくつとか指定してたけどナンセンスすぎ
普通1x好きな幅なpng作ったほうがよほどスマート
973Name_Not_Found:2007/11/12(月) 17:19:05 ID:???
おもしろいと思ったけどな。
レガシーブラウザ云々したい人には向いてないけど。
974Name_Not_Found:2007/11/12(月) 17:22:23 ID:G+Nz4I6a
>>972
いや、 >>964はセンスありすぎです。
スタイルシートにたった3つの宣言を足すだけでいいのですから。
975Name_Not_Found:2007/11/12(月) 19:40:08 ID:???
winのIE6、7、fxでは正常に表示されてるのに、
macのfx、safariでのみ、
float: left;
の画像が、1px上にズレてしまいます。
これってどうすれば治るのでしょうか。。。


976Name_Not_Found:2007/11/12(月) 20:00:01 ID:???
1pxズレると地球が滅びるんですね
977Name_Not_Found:2007/11/12(月) 20:01:26 ID:???
UA毎にCSSを変えれない人多いな。
978Name_Not_Found:2007/11/12(月) 20:33:50 ID:???
positionについて教えて下さい。

・table内にp(説明)とul(リンク)を入れてあります。
・tdにposition:relativeとvertical-align:bottom;を指定します。
・pにposition:absolute; top:0;を指定します。

このとき、基準となる包含ブロックはtdだと思うのですが、
Firefox2.0とOpera9.2でpがページトップに上がってしまいます。
この理由は何でしょうか。

よろしくお願いします。

http://tko.moeweb.net/test/
↑テストで作ったものです。
979Name_Not_Found:2007/11/12(月) 20:59:33 ID:???
テーブルレイアウトはやめれ。何だその糞ソースは。
potisionについておさらいして来い。
980975:2007/11/12(月) 21:00:12 ID:???
説明しづらいのですが、
お店のロゴが縦長で、ロゴを上下でスライスしてます。
そのロゴが1pxズレてしまうので、それはサスガに・・・という所なのです。

UAでの切り替えってこの辺でしょうか。
なんかjavaスクリプトいれてもうまくいきませんでしたorz
ttp://game.gr.jp/js/books/dhtml2/part4/tips/loadcss.htm
981Name_Not_Found:2007/11/12(月) 21:02:30 ID:RuLk8VAs
#wrapper
├#header
├#body
|├#contents
|└#menu
└#footer

というdivで基本構成を作っています。
#wrapperは780px、#contentsと#menuは530pxと250pxで指定しています。
#contentsをfloat:rightで右側へ、#menuをfloat:leftで左右に段組表示しています。
floatは#footerにclear:bothと入れて解除しています。

ここで、#footerに背景画像を指定すると、
WinIE6にて、#footerの位置を飛び出して背景画像が表示されたりして、表示がバグります。
clearを指定したボックスでは背景画像がバグる、みたいなIEのバグがあるのでしょうか…?
解決法などありましたら教えて下さい。
982Name_Not_Found:2007/11/12(月) 21:18:35 ID:???
983981:2007/11/12(月) 21:26:37 ID:RuLk8VAs
>>982
marginが2倍になるバグは知っていたので、
>>981に書いた基本構成のdivには、marginは一切指定してないです。

#wrapper : width:780px
 #header : 未指定
 #body : 未指定
  #contents : width:530px; float:right
  #menu : width:250px; float:left
 #footer : clear:both; background:url("footer.png");
指定してあるスタイルはこれだけです。
#footer に display:inline; を入れたら変わりますかね?

WinIE6で表示確認できる環境が現在自宅にないので
修正してもすぐに確認できない事も困ってますww
984Name_Not_Found:2007/11/12(月) 21:34:38 ID:???
>>978
>基準となる包含ブロックはtd
違う。positioin:absoluteが指定された要素の包含ブロックは位置決めされた
直近の祖先要素。
985978:2007/11/12(月) 21:34:54 ID:BPPtycxu
>979
これテーブルレイアウトですか?
番組表みたいになるものなので、テーブルなんですが。

potisionについておさらいして、わからなかったのです。
979さん以外でもヒントを下さい。
986Name_Not_Found:2007/11/12(月) 21:40:09 ID:???
987978:2007/11/12(月) 21:43:44 ID:BPPtycxu
>984さん
ありがとうございます。

<td>←relativeで位置指定している
 <p>←potision:absolute

この場合の位置決めされた直近の祖先要素はtdではないとすると、
何になるのでしょうか。
988Name_Not_Found:2007/11/12(月) 21:53:56 ID:???
これをテープルレイアウトと呼ばずに何と呼ぶのだろう。
表なら素直に表にすりゃまだマシなものを。
ここはcssスレ。マトモなソース書けるようになってから質問しろボケ。
989Name_Not_Found:2007/11/12(月) 21:59:54 ID:???
>>984
つまりtd
990Name_Not_Found:2007/11/12(月) 22:00:45 ID:???
>988
罵倒でスレ埋める?
991Name_Not_Found:2007/11/12(月) 22:01:48 ID:???
いいんじゃね
992Name_Not_Found:2007/11/12(月) 22:03:29 ID:???
そうだよね、せっかくスタイルシートでやろうと思ってるのならレイアウトでテーブルを使うのは
止めためた方がいい。
というか表以外にテーブルをつかわなきゃいけないと思うことがあるんだろうか。
XHTML 1.0 !とか銘打ってるくせに
<BODY>
<TABLE>
とかぞっとする
993978:2007/11/12(月) 22:05:11 ID:BPPtycxu
>988
すみません。
つまり純然たる表でなければテーブルレイアウトなのですね。
わかりました。

しかし、説明部分が長くなっても
リンク部分が何個になっても下揃えというと、
これしか方法は思いつかなかったのです。

>989さん
? 984さんではないですよね?
tdが基準とすると、なぜ上に上がってしまうのでしょうか?
994989:2007/11/12(月) 22:08:53 ID:???
>>993
あんまり罵倒がうざいから調べ中だったんだけど
スレも終わりそうなので書くけど
FirefoxとかOperaだと
table-rowとかtable-cellとかのボックスが包含ブロックとされないみたいだ
仕様(2/2.1)で表内の包含ブロックの例外が書いてあるかと思ったけど見つけられなかった
995987:2007/11/12(月) 22:11:36 ID:BPPtycxu
>989さん
ありがとうございます!
Firefoxの仕様探してきます!

>みなさん
お邪魔しました。
どうぞ罵倒を続けて下さい。
996Name_Not_Found:2007/11/12(月) 22:13:33 ID:???
>>993
あれですよ。
うだうだう五月蝿いやつ多いけど。
一般人までマイクロソフトにならなくてもいいって事ですよ。
決められたことや、その方がいいって言われてる事をみんなで推進したほうがいいし
結果として将来みんなのためになる。
997Name_Not_Found:2007/11/12(月) 22:20:10 ID:???
tableに固執する頑固さ、最小ソースも出せない愚かさ、最後は捨てゼリフ。
ちゃんとした回答はあるが、こんな厨に教える気もない。
998989:2007/11/12(月) 22:20:52 ID:???
>>995
ごめ、書いてから2.1のposition:relativeの項目見たら
The effect of 'position:relative' on table-row-group, table-header-group,
table-footer-group, table-row, table-column-group, table-column, table-cell,
and table-caption elements is undefined.
(http://www.w3.org/TR/CSS21/visuren.html#propdef-position)
ってかいてあったわ。つまり定義されてないので実装依存ってことだな
999Name_Not_Found:2007/11/12(月) 22:22:27 ID:???
                ,,-‐''""''ー--,- >>1000 遅いんだよバカ、とっとと次スレ立てろ(プゲラ
             .|"""        || >>999 何が1000だ、寝言は寝てから言え
:::::::::::::::::::::::::::      |     げ  と .|| >>998 体臭が回線を通じて匂ってきてるぞ(w
:::::::::::::::::::::::::::::::     |  1000  っ   .|| >>997 糞レスしてる暇あったら今日の寝床探せ
:::::::::::::::::::::::::::::::::::::::::::::::|       ,ノ""""'|| >>996 お前はハンバーグの材料な
  ::::::::::::::::::::::::::::::::::  |   ,/"""      .|| .>>995 深夜に空き缶拾い集める癖を直せ
::::::::::::::::::::::::::::::::::    """"        .|| .>>994 以下はiriaからやりなおせ
                       / )
                      / /|| 
                      / /. 
                    ( (     /⌒ヽ
                     ヽ ヽ⊂ ̄ ̄ ̄⊃ <ぐわっはっはっは!!!!
                      \\(´∀` )     n   Web制作は永遠に不滅だ!!!
                       ハ      \    ( E)
                        |     /ヽ ヽ_//   http://pc11.2ch.net/hp/
>>1001
早く次スレ立てろよ、バカ
1000Name_Not_Found:2007/11/12(月) 22:24:00 ID:???
>>998
バカはもう黙れよ
1000
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。