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

このエントリーをはてなブックマークに追加
915 ：Name_Not_Found：2006/09/10(日) 10:57:09 ID:???
list-styleでdisc(●)の部分を画像に置換したいのですが、
list-style-imageとbackground-imageのどちらでも置換できるのですが
どちらを使う方が正しい、というかよいのでしょうか？
916 ：Name_Not_Found：2006/09/10(日) 11:47:42 ID:???
断然background-imageだよ。
ブライザによる表示の違いが出ない。
917 ：Name_Not_Found：2006/09/10(日) 15:24:30 ID:???
ブライザーX
918 ：Name_Not_Found：2006/09/10(日) 17:17:15 ID:VSV7daKe
■…<div>で囲ったボックス
｜…左右のウインドウの枠
として、下記のように、横に配列したボックスをセンタリングしたいと考えています。
1）　↓十分ウインドウの幅がある場合、ボックスを横に並べ、センタリング。

｜ ■■■■■■■ ｜


2）　↓ウインドウの幅が足りない場合は、ボックスの切れ目で改行しセンタリング。
｜ ■■■■■ ｜
｜ ■■ 　　　　 ｜

↓こんなソースを書いたのですが、1）ですらうまくいきませんでした。
<div style="text-align:center;">
<div style="margin-left:auto;margin-right:auto;">
<div style="text-align:center;float:left;">
<img src="***.gif" width="200" height="200"><br>
<img src="***.gif" width="150" height="20">
</div>
　　　　　…
</div>
</div>

もちろん他にも色々試してみたのですが、どうにもうまくいきません。
よろしくお願いいたします。
919 ：Name_Not_Found：2006/09/10(日) 17:29:21 ID:???
テンプレ　穴の空くほど読んでね。
920 ：918：2006/09/10(日) 17:33:47 ID:VSV7daKe
>>919
A2のことではないですよね？
テンプレには見当たらないと思うのですが。
921 ：Name_Not_Found：2006/09/10(日) 17:40:51 ID:???
>>918
cssの基礎を理解してないようですね。面倒がらず勉強しましょう。
色々と方法はありますが、一例のヒントだけ書きますと、
大枠divは{text-align:center; margin-left:auto; margin-right:auto; width:適当な値;}。
中のdivはclass="inner"とでもして全てfloat:left; 。
922 ：Name_Not_Found：2006/09/10(日) 17:51:24 ID:U7eVY9OU
IE以外のブラウザで入れ子のDIV要素をフロートさせた場合、フロートさせた子DIVの高さが
親DIVより大きくなるとはみ出してしまいます。これを防ぐにはどうしたらよいですか？
923 ：Name_Not_Found：2006/09/10(日) 17:53:59 ID:U7eVY9OU
すいません、これじゃ説明が足りませんね

つまり、フロートした子DIVの高さにあわせて親DIVの高さも変化させるためには
どうしたらよいでしょうか・・・　という意味です。

よろしくお願いします。
924 ：918：2006/09/10(日) 17:59:51 ID:VSV7daKe
>>921
>>918の投稿前にも色々試してみて、そのようなソースも書いたのですが
左詰になってセンタリングされないんですよ。
>>921さんの環境ではうまくいくのでしょうか？
925 ：Name_Not_Found：2006/09/10(日) 18:34:39 ID:???
>>922
その要素のafter疑似要素に空のcontentを生成してやる。
高さと行間は0で。
926 ：Name_Not_Found：2006/09/10(日) 18:37:18 ID:???
>>915
backgroundだとinsideにしかならない。
outsideにしたいんなら絶対にlist-image。
927 ：Name_Not_Found：2006/09/10(日) 18:54:43 ID:Jcg4QZWw
>>926
パディングに表示すればoutsideっぽくならないか？
928 ：Name_Not_Found：2006/09/10(日) 19:01:18 ID:???
>>924,918
ではその上手くいかないソースを晒しましょう。
もちろん>>918のソースは論外です。
929 ：Name_Not_Found：2006/09/10(日) 19:01:35 ID:???
>>916,926-927
ありがとうございます。
backgroundでするといろいろ調整するのが面倒だったので
list-styleにすることにしました。
930 ：918：2006/09/10(日) 19:38:21 ID:VSV7daKe
>>928
>>918に>>921を当てはめたものです。
931 ：Name_Not_Found：2006/09/10(日) 19:51:44 ID:???
>>930
だからどう書いたんだって聞かれてるんだろ？
どうやら解決したくなようだな。
932 ：918：2006/09/10(日) 20:11:38 ID:VSV7daKe
>>931
<div style="text-align:center; margin-left:auto; margin-right:auto; width:90%;">
<div style="text-align:center;float:left;">
<img src="***.gif" width="200" height="200"><br>
<img src="***.gif" width="150" height="20">
</div>
　　　　　…
</div>

↑
こんな感じです。
933 ：Name_Not_Found：2006/09/10(日) 20:22:19 ID:???
>>932
＞<div style="text-align:center;float:left;">
何ワケワカメな事してんの？
934 ：918：2006/09/10(日) 20:23:35 ID:VSV7daKe
>>933
画像をセンタリングしてるだけです。
935 ：Name_Not_Found：2006/09/10(日) 20:37:41 ID:???
>>934
何故またセンタリングする必要があるんですか？
ですから基礎を勉強しましょうと申し上げてるのです。
また、貴方のソースを尊重して外枠にtext-align:center;を残しましたが、
当然float落ちしたimgもセンタリングされてしまうので、
回避したい場合は>>4をよく読んで下さい。
936 ：918：2006/09/10(日) 20:49:24 ID:VSV7daKe
>>935
センタリングされた画像で作ったボックスを左右に並べ、
そのボックス郡をセンタリングしたいと考えているからです。
ためしに>>932から「text-align:center;」を抜いたもの↓でも表示は同じですね。
<div style="text-align:center;margin-left:auto; margin-right:auto; width:90%;">
<div style="float:left;">
<img src="***.gif" width="200" height="200"><br>
<img src="***.gif" width="150" height="20">
</div>
　　　　　…
</div>
でも、>>918のときでも同様に表示されていました。
ボックス郡をセンタリングするにはどうすればいいのでしょうか？
937 ：918：2006/09/10(日) 20:51:53 ID:VSV7daKe
「同様」というのは誤りですね。
938 ：Name_Not_Found：2006/09/10(日) 20:56:11 ID:HAK822ru
ID:VSV7daKe

こういう奴って何なんだろう
939 ：918：2006/09/10(日) 20:57:37 ID:VSV7daKe
>>938
いや、ホントにわからなくて困ってるだけなんです。
940 ：Name_Not_Found：2006/09/10(日) 21:12:21 ID:???
>>939,918
画像を並べ、ウィンドウ幅を狭くした時、自然に下に落ちるというのがご希望だと思ってましたが？
>>936が本当のご希望なら、お気が進まないcssの勉強などしなくてよろしいです。
tableでも何でもお好きに使えばいい事です。

941 ：918：2006/09/10(日) 21:29:36 ID:VSV7daKe
>>940
＞画像を並べ、ウィンドウ幅を狭くした時、自然に下に落ちるというのがご希望だと思ってましたが？
そのとおりです。
なおかつ、それらをセンタリングしたいのですが
それがうまくいきません。
942 ：918：2006/09/10(日) 21:35:14 ID:VSV7daKe
>>918の↓の★の部分を左右同じ幅にして、中央に配置したいわけです。
1）
｜★ ■■■■■■■ ★｜

2）
｜★ ■■■■■ ★｜
｜★ ■■ 　　　　 ★｜

>>940よろしくお願いいたします。
943 ：Name_Not_Found：2006/09/10(日) 21:42:28 ID:???
＞いや、ホントにわからなくて困ってるだけなんです。

CSSの基礎を勉強しろって何度も書かれてるだろ
それが面倒臭いならテーブルでガチガチにしておけ
944 ：Name_Not_Found：2006/09/10(日) 21:44:41 ID:???
つ「詳細 HTML&XHTML&CSS辞典」でも買って読んでろ
945 ：918：2006/09/10(日) 21:46:51 ID:???
だって、ヒントとかいって、肝心なこと書いて無いじゃん。>>921
946 ：Name_Not_Found：2006/09/10(日) 21:49:08 ID:???
質問です

スタイルシートでマルチカラムにすると下図のように短いほうのカラムが途中で途切れてしまいますが、
これをテーブルで構成したときと同じように双方のカラムが同じ高さを維持するようにすることはできますか？
_　_
| || |
| ||_|
| |
| |
|_|

↑ズレてなきゃいいんですが
947 ：Name_Not_Found：2006/09/10(日) 21:58:23 ID:???
>>946
できるよ
948 ：Name_Not_Found：2006/09/10(日) 22:06:10 ID:???
border-collapse: collapse;をtableに指定すると、
なぜかGeckoエンジン系ブラウザでborderが表示されなくなるんだけど、
こんなバグあったっけ？
この指定のある無しで明らかに変わるからこれが原因だと思うんだけど。
949 ：Name_Not_Found：2006/09/10(日) 22:12:16 ID:???
>>918
<style type="text/css">
body {
margin-right: 5em;
margin-left: 5em;
}
div.box {
float:left;
}
</style>

<body>
<div class="box">
……
</div>
<div class="box">
……
</div>
<div class="box">
……
</div>
</body>

これでうまくいく気がする……が、floatするには幅が明示されてないと駄目なんだっけ。
中に画像があればその幅が流用されるんだっけ。
floatプロパティは苦手でよく分からん。

ただこれだけは言える。img要素にはalt属性として適切な代替文字列を書きなさい。
950 ：Name_Not_Found：2006/09/10(日) 22:19:53 ID:???
CSS マルチカラム　でググレばいいのに
ttp://adp.daa.jp/archives/000250.html
ttp://www.geocities.jp/multi_column/
ttp://intensivstation.ch/templates/
951 ：Name_Not_Found：2006/09/10(日) 22:41:10 ID:???
>>950
質問した内容に関する答えはのっていないようですが
952 ：Name_Not_Found：2006/09/10(日) 22:44:13 ID:???
●質問者が返信する際は、名前欄に「最初に質問したレス番号」を入れましょう。
回答者も誰に言ってるのか書いた方がいいと思う。。
953 ：Name_Not_Found：2006/09/10(日) 22:45:40 ID:???
>>948
borderってまさかプロパティじゃなくて属性じゃないだろうな。
954 ：Name_Not_Found：2006/09/10(日) 22:55:35 ID:???
>>953
それはないｗ
955 ：Name_Not_Found：2006/09/10(日) 23:01:55 ID:???
>>954
NN7で見てみたが、そんな事ないぞ。
956 ：Name_Not_Found：2006/09/10(日) 23:07:11 ID:???
スマン、>>948だが、trが一つ余分に残ってたのが原因だったみたいだ。
うｐする為に最小限構成に削ってたら発見した。
957 ：Name_Not_Found：2006/09/10(日) 23:47:41 ID:???
>>918,945
余計な事ばっかしてるからだよ。>>921は必要なプロパティを教えてくれてるだろうが。
>>936のソース、何でimgの間に<br>なんか入れてるんだ？
勝手な思い込みばかりだから、何も出来ないんだよ。
さっぱりわからないなら、せめて人の話を素直に聞け。
958 ：Name_Not_Found：2006/09/11(月) 02:15:34 ID:???
>>918のソースdivが入れ子になってない？
959 ：Name_Not_Found：2006/09/11(月) 02:54:02 ID:???
>>958
俺もそれ気になってた
もしかして、>>918が「ボックス」って言ってるのは、img 要素かもしれんなあって
960 ：Name_Not_Found：2006/09/11(月) 05:44:35 ID:???
>>918のやりたいことは実現不可能。

例えば>>921のやり方だと、

1) 親ボックスのwidthの値がpxで固定なら、
当たり前だが、ウィンドウサイズがそれ以下になった時ウィンドウ外にはみ出る。

2) 親ボックスのwidthの値が%指定だと、
親ボックスの幅が、中のボックス一つ分の幅の倍数に（計算上）ならない時、
中のボックス郡の両端からウィンドウの端までの距離は同じにならない。

3) IEを無視してmax-widthにしても、ウィンドウサイズがmax-widthの値以下になった時 2) と同じことが起こる。

>>949はそもそもセンタリングにならない。
961 ：Name_Not_Found：2006/09/11(月) 09:50:02 ID:???
回答者も馬鹿ばっかだね。
誰も DTD 訊かないし・・・。
962 ：Name_Not_Found：2006/09/11(月) 10:18:23 ID:???
>>942
>>918と変わってきてるｗ
942にしたいなら★をboxで囲んで真ん中可変で良いんじゃん
963 ：Name_Not_Found：2006/09/11(月) 10:36:01 ID:???
DTDを聞くという言い方がおかしい。
それで自分の書いたDTDだったらどう答えるつもりなんだ。
964 ：Name_Not_Found：
あいつが書けるとでも思ってるような口振りだな