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

だめにゃん

>>927
一応、定義上問題ないのはnameトークンだけ。
数字から始まるのがダメとかじゃなくて、アルファベットから始めなくてはいけない。
アンダースコアとかハイフンは微妙。認められてたりダメだったり。

勉強になるなぁ

フィルターについて質問です。

<TABLE style="filter:alpha(style=0,opacity=50); background-color:#d9daea; color:#a0a0a0; font-

size:12px">
<TR><TD>
<DIV style="margin:2px; padding:10px; border:1px dashed #a0a0a0">
<P>ああああ</P>
<IMG src="wall.jpg" style="filter:none; background-image:url(wall.jpg); width:100px;

height:100px">
</DIV>
</TD></TR>
</TABLE>

画像だけフィルター適用外にしたいのですが、うまくいきません。
上手い解決法はあるでしょうか？WinXPsp2、IE6です。

>>931
簡単にはできません

ブロック要素のwidth属性にて最小幅だけ設定することは出来ますか？
例えば、最小値300pxでウィンドウ幅がそれ以上なら→枠いっぱい100%というような感じで

すいません、
IMGの中のstyleのbackground-imageは無視してください。

>>933
min-widthじゃなかった？
記憶にございません。。

>>933
おそらくコレ!
つ ttp://www.htmq.com/style/min-width.shtml

300px の透明 gif

>>933
それを可能にするプロパティは存在するんだが
ブラウザが悲しいまでに対応してない

>>937
それだと横スクロールバーが出ると思われ。

>>939 違ったorz

うんこはだまっとれ！！

ウンコ野郎 www.unco.jp さんどうもです
でもdiv や　table　には対応してないみたいですね・・・

>>938
そうなんですか残念です。
contentと同様はやく実装して欲しいす

どうも うんこ野郎です。 www.unco.jp
下品ってメール貰ったのでリネームしようと思います。

>>942
あらそう…残念ね。

>>942
対応してないのはIEだけ。
（ということは9割以上対応してないって事でもあるが。）

さて、火狐は問題無しでしたよ。

.a { background-color: RED }
ul.hoge {float: left; width: 50%; }

<div class="a">

　<H1>ほげほげほげ</H1>

　<p>ほげほげほげ</p>

　<ul class="hoge">
　　<li>ほげリスト</li>
　　<li>ほげリスト</li>
　</ul>

　<ul class="hoge">
　　<li>ほげリスト</li>
　　<li>ほげリスト</li>
　</ul>

</div>

このような段組に挑戦して、レイアウト自体はうまくいったんですが、
「ほげリストのUL部分の背景にclass="a"で指定した背景が反映されません
（PとH1の「ほげほげほげ」の部分はclass="a"で指定した背景に変わってくれています）

ULにて背景を指定してやれば見かけ上は解決するんですが、
いま悩んでる問題の解決にはならないので後学のためにアドバイス頂けたらうれしいです。
どうぞよろしくお願いします。

floatは深く考えてはいかんのじゃ

下のULのCSSは要らない

>>947
ul要素に直接フロートとか微妙に危険。

包含ブロック要素内がフロート化した要素で終わってると、高さが算出されないょ。
transitionalなら<br clear="all">を最後の</div>の直前に入れればok。
strictなら、フロートしたまま終わるような構成にしない。

div.a にパディング入れたら大丈夫だった気もするような感じだったと思うっぽいよーな

>>949
ちゃんとそのソースで確認した？
>>949の言ってる通りの動作すらしてくれないんだけど。

んで、上で答えてる人がいるんで、他の方向から適当に解答。
div以下の各要素に共通のプロパティを設定するのであれば、
各要素にいちいち背景色を設定せずに、属性セレクタで
.a, .a * { background-color: red; } のようにすればいい。(.a自身と、.aの子孫の全要素を指定)

>>949
ためしに下のULCSSからフロート部分を抜き出したら背景はうまく行きました。
ですが、右側（下）の部分のUL内のLIのstyaleや他のstyaleが全て無効に・・・なんでなんだぁぁぁぁ

>>950
>包含ブロック要素内がフロート化した要素で終わってると、高さが算出されないょ
そうなんですか？！だとしたらULのclassを外してやってDIVで指定してやっても同じということですよね・・・

実は二つ目の</ul>の下に<br style="clear: both;">を置くと回避されるのは発見していてたんですが、
いわゆる「よくない無意味なタグ」ということで使うのを憚られたんですが
仕方ないのかもしれませんね<span style="clear: both;">全角スペース</span>なんてやるよりかはましでしょうからね・・・・うーん

>ul要素に直接フロートとか微妙に危険

これはどういった理由からなんでしょうか？
DIVを多用するのも避けるべきだと書いてあったので
ブロック要素にはなるべく直で扱うように心がけています・・・

>>951
>>947には不要かと判断して書いてませんがpaddingの指定もしてます

>>952
ありがとうございます。背景をしてやれば見栄え上は解決するんですが、

>.a, .a * { background-color: red; }
これってDIV.aにして*を<div class="a"> * </div>してやれば
.a { background-color: red; }と同じ事ではないの？って思って
もやもやと納得いかない部分がありまして今回質問させてもらいました。

>>950さんが仰るように>包含ブロック要素内がフロート化したまま終わってると
高さが反映されないということで仕方ないのかなと思いましたorz

みなさんありがとうございました。

ごめんごめん
下の<ul>のfloat指示を外して変わりにmargin:50%;でおｋ

さらにゴメン
margin-left　ね

ちゃんと書くわ。つまり

ul.hoge {width: 50%; }
一個目<ul class="hoge" style="float: left;">
二個目<ul class="hoge" style="margin-left: 50%;">

ね。
>ul要素に直接フロートとか微妙に危険。
これって何？

>>952
最後、それ属性セレクタじゃないだろ。
クラスセレクタ、クラスセレクタと全称セレクタの子孫セレクタ。

>>953
clearプロパティはブロックレベル要素にしか適用されないよ。
div要素に指定するならwidthも指定することが推奨される。100%でも。

> いわゆる「よくない無意味なタグ」ということで使うのを憚(はばか)られたんですが
読めなかった。
で、無意味じゃないからtransparentなら指定汁。clear属性で。
IEはフロートボックスのサイズも計算するけど、イカレた挙動。
フロートとかポジショニングしたら普通は親要素無視される。
後続要素があればその分領域が発生するので包含ブロックの領域も下まで発生する。

>>953&>>957
ul要素直接フロートが危険なのは、ブラウザによってリスト要素の解釈が異なるから。
適当に指定してるとマーカー重なったりするよ。outsideだと。※↓
しかも、フロートする要素は内在的な幅が指定されていない限り、width指定が必要。
だからってul要素にwidth指定したり、※マーカー避けるためにmarginとか指定すると、IEでli要素が崩れる。

そんなこんなで、divで包含した方が吉。
divの多用を避けるっつっても、クロスブラウジングするにはある程度必要。
よく考えて、必要なだけ使うのであれば気にすることはない。

>>954
>953のまま終わるなっ。

ブログでよく見かける文章を枠で囲む場合です
引用文ではないのに blockquote を使ってもいいのでしょうか？

>>958
>ul要素直接フロートが危険なのは（以下略）
そいうことか
なるなる。了解

誤記スマソ。
> で、無意味じゃないからtransparentなら指定汁。clear属性で。
transitionalね。

で、>>959
食事中に箸でドラムの練習するのと同じくらい良くないことです。
でも、絶対にしてはいけないって訳でもないです。表示結果さえ理想形であればいいってなら。
文法無視してるけど。つかlivedoor blog使いにくい。（板違いスマソ

>>961
ありがとうございます
やろうと思ってたけどやめておきます

>>962
はボクです

>>951さん
間違えましたすいません

>>949
>>957のでもうまく行きました。なるほど〜そういう考え方も（感心）m(_ _)m

>>958
>無意味じゃないから

うーん開眼したかも。確かにフロートしっぱなしを解除しやるわけですからね
imgタグで置き換えてやると、確かに無意味どころか、むしろ文法的には必須のものかも！？
<ｂｒ>の下に何も来ないこと(実際には<div="fotter">フッター<div>がありclear:both;してるんですが…)、CSS解除モードで余計な一行分のスペースが空くことから余計なもの
と考えておりました。

>transitional>div要素に指定するならwidthも指定することが推奨される。100%でも。

となにやら私のスタイル的に重要な新しい知識が得られそうなのでググッて参ります。
他にも重要で中身の濃いアドバイス本当にありがとう。貪欲にググッて参ります！

漏れの回答が正しいとは限らないが；
こういうWeb歴半年で、1000時間くらいしか学習してないょ。
10年以上前から確立してんだから凄いよな。先人は。

id属性値ってhtml文書内でユニークと聞いたのですが、
　<input type="radio" name="hoge" value="1">
　<input type="radio" name="hoge" value="2">
というラジオボタンにid属性をつけたい場合はどうなるのでしょう？

name＝idだとユニークになりませんよね？
id="hoge_1"
id="hoge_2"
というようにつけるのでしょうか？

>>966
それってCSSじゃない気がするけど、一応。

name属性はデータを送信する際に渡すパラメタの名称や、
オブジェクトをオブジェクト外部から参照するための名称
id属性は文書内でオブジェクトを一意に識別するための識別子
なんで、そんな感じでいいんじゃないの。

一応自分で調べて絶望済みなんですが、確認のために質問させてください。

margin　＆　padding　の値で「デフォルト」を指示することってできないですよね？
leftだけデフォルトでって場合は
margin-top: **
margin-bottom: **
margin-right: **
padding-top: **
padding-bottom: **
padding-right: **
こうやらないと駄目なんですよね？autoってのは微妙に違うしみたいだし

margin: ** ** ** デフォルト
padding: ** ** ** デフォルト　これが出来たら便利なんだけどな〜…

デフォルト値を書けばいいだけじゃん

>>968
個別指定じゃなくてmargin/padding一括指定したいという意味？
だったらできる
もうちょっと調べてみ

>>970
質問読んでないだろ？

どなたか知恵を貸してください。

全体(div id="all")にborderを設定してあるんですが、
中の要素を絶対配置にしたところ、その要素を含んでくれません。。
どうすれば中の#left #rightも含んでくれるようになるのでしょうか。

ソースです

---html---
<body>
<div id="all">

<div id="left">
左やねん
</div>
<div id="right">
右ですわ
</div>
</div>
</body>

すみません、質問です。

【HTML】
<div id="foot">
　　<div class="menu">
　　　　<ul>
　　　　　　<li><a href="aaa.html">AAA</a></li>
　　　　　　<li><a href="bbb.html">BBB</a></li>
　　　　</ul>
　　</div>
　　<div class="copyright">Copyright (C) hogehoge.</div>
</div>

（注：見やすいように全角スペースを入れていますが、実際は半角です。）


これを
−−−−−−−−−−−−−−−−−−−−−−−−
Copyright (C) hogehoge.　　　AAA　BBB
−−−−−−−−−−−−−−−−−−−−−−−−
と表示したいです。

ネックになっているのはmenuとcopyrightの場所を左右逆にすることです。
ネックって言うか全然見当がつきませんorz

良い知恵がありましたら教えてください。
ソースの順番を変えるというのはナシでお願いします(´･ω･`)

---css---
* {
margin: 0; padding: 0;
font-weight: normal;
font-style: normal;
font-family:"MS P Gothic", "MS Gothic", "Osaka-等幅", monospace;
color:#333333;
}

#all{
width:688px;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
background-color:#EAEAEA;
}


#left{
position:absolute;
top:160px;
left:0px;
background-color:#FF0000;
width:170px;
}

#right{
width:518px;
background-color:#00FFFF;
position:absolute;
top:160px;
left:170px;
}

>>974
宿題は自分でやらなきゃいけんぞなもし。

>>974
floatでGoogle検索して自分で当てはめてみると
見当以前に答えが分かる。
ガンガレ、あとちょっとだ。