/*CSS、スタイルシート質問スレッド【5】 */

{ position:relative; top:○○%; left:○○%; }　って記述しても、
ネスケで見るとぜんぜん無視されちゃってるみたいなのですが・・・。
なぜなぜ。。？？？

>>164
Netscapeのいくつよ。

>>165
6.2です。

やっぱダメだね。6.2

あ、間違った。ご指摘有り難う。>>160
>>158に
＞a.b:link{〜}
＞ではダメだったので、
とあったので混乱しました。自分のシートにはA.b:link{〜} で書いてるのに……。
しかし、すると>>158のはナゼ効かなかったんだ？

>>164-167
うちのNetscape6.2では、その記述で有効だったよ。
但し特に親要素を持たない場合。
その適用させた要素を<div>とかで括ると、
なぜかtop:y%が無視されて、left:x%だけ有効になりました。
しかし単位を%でなくpxやemにするとtopの記述も無視されなかった。
バグかな。

>>169
そうですかー。
spanで括ったのがダメな要因なのかな。
あと、インラインフレームもpositionで指定したいんだけど、
これもダメダメでした。
IEではばっちりーだったんだけど。。
ってか、もしかしてインラインフレーム自体ネスケではダメダメなんだっけ？
うう。もうちょっとちゃんと勉強してきます。

＞170
ネスケはインライソフレームは未対応

>>171
あーそうなんですか。ありがとうございます。
6.2で見たところ一応表示はされてるんだけど、変な表示になっちゃってた。。
インラインはダメか。。作り直しだ。

>>170
<IFRAME>未対応なのはネスケ４まで。
NN6以降はサポートされてます。
但しStrictではないはず。
overflowプロパティを使ってみては？

>159 >160
えと、結論から言うとできました。
A.b:link{〜}ではできなかったのではなく、できていたのですが
そのページのみに使っている(クラス指定の中では使用してない）
リンク時のスタイル（ex)background-color:#000000）をも適用していたため
できていないように感じたのです。
だからアンカー部分をクラス指定する場合は、通常の疑似クラス指定で使っている
要素も全て書いていなくてはいけないようです。
説明わかりにくかったらスンマソ。
でもどうもありがとうございました。

>>173
6以降なら対応してるんですね、ありがとう！
position:relativeで％指定じゃなくしたら、ちゃんと表示されるようになりました。

NN4.xで<LAYER>を使って<IFRAME>を実現する方法がNetscapeのサイトに載ってたような。

http://jt.mozilla.gr.jp/docs/web-developer/upgrade_2.html
http://sites.netscape.net/ekrockhome/standards.html

ｶﾞｲｼｭﾂだったらすみません。
テキストエリアにボーダーを指定すると
ネスケじゃ書込めないと言われたんですが
これは仕様（？）なんですか？バグなんですか？

>>177
「書き込めない」なんてそんな無茶な「仕様」がありますか。
たぶんバグでしょ。
ところでどの「ネスケ」って４のこと、それとも６のこと？

＞178
回答ありがとうございます。
よく考えたらそんな「仕様」なワケないですよね。
ネスケ４の事でした、説明不足ですみません。

　<Hn>要素の下のmarginって、ＣＳＳでどう設定すればいいナリか？
ゼロにしたいナリが、どうしてもあいてしまうナリ。

　ちなみにDTDは4.01Strictナリ。

>>180

>>180
下のmargin ? margin-bottom のこと？
h1{ margin-bottom: 0px; }
とかでいいはずだけど。

これは想像だけど、Hn の次の要素( p とか )の
margin-top が 0 になってないのでは？

# >180 うっかり書き込みしてもうた。ｽﾏｿ

　なんか下の要素（h2）のmargin-topを0pxにしたら解決したでし。
hnはmargin-top:もデフォであるんですね……。thx

>>183
私はＮＮ６のデフォルトスタイルでH2〜6がマージン空けすぎで気に入らないので、
いちいちmargin:5px 0;と指定してます。

textareaをMozillaやNetscapeで見るときと
InternetExplorerで見るときで微妙に大きさが
違うのはＣＳＳでどうにかなりませんでしょうか....

>>180-184
漏れは
p, h1, h2, h3, h4, h5, h6 { margin: 0.5em 0em; }
にしてる。
IEもNNもデフォルトは 1em 0em っぽいけど空きすぎだと思う。

NNのデフォルトは自分で確かめられますよ。
C:\Program Files\Netscape\Netscape 6\res\html.cssに格納されてます。
全部1emではなくもうちょっとそれぞれに微妙なスタイルが設定されてます。

>>186
N4でも動作するのでしょうか？

>>188
もちろん。
でも、その手のブラウザ別の実装状況については
CSS対応表が各種あるからそれで調べること。
>>2にも挙げてあります。

textareaをMozillaやNetscapeで見るときと
InternetExplorerで見るときで微妙に大きさが
違うのはＣＳＳでどうにかなりませんでしょうか....

>>185＝>>190
繰り返すなよ……
うんだ、どもならんべや。――これで満足かい？

>>190
<input type="text" name="xxx" class="textarea">
----
input.textarea { width: 80%; }

もし仮に、こういうことを聞いているんじゃなかったらすまぬ。

>>179
borderの指定の仕方によって回避可能。
border-style: solid;
border-color: #ccc;
border-width: 1px 1px 2px 2px;
こんな風にばらしてやるとうまくいくかもしれない。

>>192
textareaは普通のタグですが？

>>194
そうですね。

>>194
念の為に言っとくけど、class属性値のtextareaと
要素名のtextareaに関係は無いぞ。

>>194
textareaは普通の"要素"ですが？

＞193
あ、なるほど。
試してみます。
ありがとうございます。

>>198
ネスケ４はダメ子ちゃんだから、textareaに限らず
borderの一括指定がうまく機能しなかったりする。
これ有名なバグね。
http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html#NN4
http://www.asahi-net.or.jp/~xk3t-cb/css/css-bugs-ns-j.html

＞199
ありがとー。
ホント、ダメダメですねぇ。。。
やっぱり指定しないようにしときます。
１番無難なんで（ｗ

>>200
ネスケ４にもせめてブロック要素のborder位は指定してやれよ、可哀相だろ。

ガイシュツだったらすいません。
IE6.0を使っているんですが、CSSが使えません。
<style type="text/css">
<!--
-->
と書くと何も表示されなくなってしまいます。
これってバグでしょうか。

>>202
xhtml で書いてるんならその挙動で正解。
DOCTYPEスイッチが標準準拠モードになってるんでしょう。
xhtml では<style></style>の中は#PCDATAとして解釈されるため、コメント等が有効になります。

…で合ってるよね?
質問は age れば?といいつつsage。

すいません
初心者な者でxhtmlとかDOCTYPEと言われてもわかりません。
xhtmlってなんですか。htmlとどう違うんでしょうか。
要するにIE6.0でCSSを使うにはどうすればよいのでしょうか。
ちなみにインラインではCSSは使えるのですが、html文書全体にCSSを適用することができません。

　　　　　　
　　　　　　
　　　　　

204>>
さらしage

>>204
特別な事は何もないよ。
何も考えずに普通に使えると思うんだが…。

もし、いろんなところからソースをコピペしてるんなら
組み合わせによってはそういう症状が出るでしょう。
そういうときは諦めて一から勉強しましょう。

>>202

</style>閉じてないんじゃないの？

>>204
<style type="text/css">
<!--
-->
</style>
↑閉じタグ忘れとか、そういう単純なのではなく？

あっ、かぶっちゃった。打つの遅くて鬱。

>>208
>>209
</style>の閉じ忘れでした。
1から勉強しに逝って来ます。

ガ━━（ﾟДﾟ;）━━ン！

っていうか、良く見たら
>何も表示されなくなってしまいます。
って書いてあるじゃん。
俺が勘違いヤローだ。
逝ってきます。

>>203
＞xhtml では<style></style>の中は#PCDATAとして解釈されるため、コメント等が有効になります。
これってほんと?
んじゃ今後は<style>の中身はコメントで括らない方が正しいってこと?
でもそうすると一部の古いブラウザでスタイル指定がまんま表示されちゃうんだよなあ…

わらった

>>214
なるべく外部スタイルシートにしろってAnother HTML Lintでも注意されるでしょ。

>>214
<style type="text/css">
<![CDATA[
<!--
-->
]]>
</style>

という風に、CDATAマーク空間にすればいいと思われ。

age忘れ、すまん。

リンク部分を文字色は本文と同じで、下線だけ青くしたいので、
次の通り指定しました。
A:link, A:visited {
text-decoration:none;
border-bottom:1px solid blue;
color:black;
}

しかしWinIE5.5未満はインライン要素へのborder指定が効きませんよね。
つまりリンク部分が全く他と区別つかなくなってしまって、これはいけない。
そこでWinIE5以前では通常の下線表示のままにして、version 5.5以降
及びMacIE5・NN6等では上記のtext-decoration:noneが適用される風に
仕組めないかと思ったのですが……。
下記ページを見たんですが、いい手が浮かびません。
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm
JavaScriptを使ったシート振り分けしか手はありませんかね？
ご教示いただけると助かります。

@import url() all;
でa{text-decoration: none}を呼び出し、さらに
<!--[if gte IE 5.5000 ]>
<style type="text/css">
a {text-decoration: none}
</style>
<![endif]-->
も書いておくってのは？

JavaSriptでやったほうがスマートに見えそう。

text-decoration:expression('none');だとIE4〜5でも対応ですか？

>>220
有り難う。うーん、head内style要素が要りますか……。
確かにスマートでありませんね。

JavaScriptで補正用外部CSSシートを読み込ませると、
JavaScriptオフにしてる閲覧者に問題が生じるので、
なるたけスクリプト無しでやってみたいんです。

>>222

SSIがつかるならそうするとか、
あるいは外部CSSをCGIにしてしまうとか・・・

>>223　借りてるWebスペースがSSI・CGI共に不可なんです……

>>221
expression(〜)は確かIE5以降。
しかも、初期バージョンではインラインスタイルとして書いたものしか
効かないというのを、MSDNのどこかで見た記憶がある。

>>225 おおっ、朗報。
てことは、外部スタイルシートにexpressionで指定しておけば
head内style要素で<!--[if gte IE 5.5000 ]> 〜<![endif]--> とするのと
同じ効果があるわけですか。
しかし確認したくともＭＳＤＮのどこに載ってるのかが見つけられず。

すみません、見つけました。
http://www.microsoft.com/JAPAN/developer/library/jpwebwk/author/dhtml/dude061198.htm
「最後に : 現在提案されている CSS 関数構文は、スタイル シートの中で使用した場合には機能しま
せん。インライン スタイルでのみ設定するようにしてください。これについては近いうちに修正する
予定です。」――1999 年 3 月 19 日
この修正がIE5.5からなのか、IE5.0でもなのかが問題ですね。
うちのマシンは5.5なもんで確認できません。
どなたか5.0の方いらっしゃいませんか。

>>227
5.0でもいけるよ。

>>228
あ、試験してくれて有り難う。
となるとやはりＩＥ5.5以上にだけ適用させる手には応用できませんね。残念。

5.01ってなかったっけ？ Win版IE。

Selectors Becomes a W3C Candidate Recommendation

15 November 2001: W3C is pleased to announce the advancement of
"Selectors" to Candidate Recommendation. Selectors are patterns in
the Cascading Style Sheets (CSS) language that match to elements in
HTML and XML. This specification describes the CSS1 and CSS2
selectors and new selectors for CSS3. A test suite is available.
Please send your comments by May 2002 and read more on the CSS home
page.

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/
http://www.w3.org/Style/CSS/Test/
http://www.w3.org/Style/CSS/

>>221-9
もしexpression()で振り分けができるとしても、
ＣＳＳ関数構文はスクリプト・オフでは機能しないんだから
JavaScriptでブラウザ振り分けするのと結果は同じことになります。

今さっきスタイルシートの本を読み始めたばかりの超初心者です。
<DIV ALIGN="center">でセンタリングしたテーブルの中のテキストの
フォントサイズなどを設定したいのですが、セレクタをDIVとしても
フォントが設定されません。
テーブルの中のテキストは<P>や<H>なので囲んでいないのですが、
セレクタを何にすればいいのでしょうか？？？



<DIV ALIGN="center">
<TABLE>
.
<TABLE>
.
</TABLE>
.
</TABLE>
</DIV>

すいません。。。↑のタグたちはなんでもないです。消し忘れました。

tr や td でも囲んでいないのか?
ていうかそういうページの作りなら素直に font size とか使えよ。

>>233
div, div table {font-size:80%;}
これで、div直下の文字もdiv内テーブルの文字も80%になる。
div td { }でもよいが。

ありがとうございます！
<TABLE>や<TR>、<TD>もセレクタにしていいんですか。そうか〜。

> font size とか使えよ。
<FONT SIZE>だと、Winで見るとやたらとでかいのでいやなんです。

分けて書くなら、これでもいい。

div {font-size:200%;}
table, th, td, caption {font-size:100%;}

この下の行の指定によって、テーブルの文字サイズは
divへの文字サイズ指定（200％）を初期値（100％）として引き継ぎ、
２倍角の文字として表示される。

>>237
せっかくＣＳＳを勉強し出したんだから、テーブル・レイアウトからは卒業しようねってことだよ。

あと、ＨＴＭＬの要素は全てセレクタになるんだな、これが。
http://www.tg.rim.or.jp/~hexane/ach/fscs/

> divへの文字サイズ指定（200％）を初期値（100％）として引き継ぎ、
(´Д`?)
table, th, td, caption {font-size:100%;}　も実質200%になるということですか？
そしたら
div {font-size:200%;}
table, th, td, caption {font-size:200%;}
にしたらテーブルの文字サイズは400%になるかと思ったら、ならなかった。
意味がわからにゃい。。。

>>240
次のソースに対して適用して実験してみた。

<div>
<table>
<tr><td>ＶＳＳの試験中</td></tr>
</table>
</div>

div {font-size:1.5em;}
table {font-size:2em;}
これは下記に等しい。
div table {font-size:3em;}

確認したブラウザはWinIE5.5とNetscape6.2。
単位をemでなく%にしても同様だった。

>>240
table, th, td, caption {font-size:200%;}
これだと、最初にtable要素全体が200%とされ、
ついでその子要素であるtd要素等も200%にされるから
都合400%になる。
table {font-size:200%;} かtd {font-size:200%;} だけの指定にすべし。

スタイルシートでこういう指定の仕方ってわからないです。
#FileList {position: absolute; left: 30%; width: 70%; height: 100%}
#Media {margin-left: 15px}
#Panel {position: absolute; width: 30%; height: 100%; overflow: auto}
#PieChart {width: 100px; height: 50px; margin-top: 10px}

#FileListとか#*****　で指定するとどのタグに対して、指定してるのかもサッパリです。
p.linkのような指定の仕方なら分かりますが、#を使った書き方ってなんですか？

>>243
いっぺんここ通して読んでくれ。基礎です、基礎。
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocs05.htm

#はidです

<p id="giko">はぁ？</p>
な場合は
P#giko
としますが、１つのファイルにIDは一個しか使っていけないので
要素は書かないことが多いのです

>>244-245
ほんとに基礎でした。
でも、助かりました。ありがとう！

>>241-242
(´Д` ?)
さっきからずーっと実験やってます。わかったようでわからない。。。
とりあえずありがとうございます。。。

＞247
TABLE, TD {font-size: 200%;}
だと、

<TABLE>　←ここでまず200%になる
<TR>
<TD>　←ここでさらに200%になる
てすと　←実質400%
</TD>
</TR>
</TABLE>

って事。
カンマは複数の要素に指定する事。
この場合<TABLE>と<TD>に
font-size: 200%;が適用されてる。

NNでもまともに見えて、
IEならそこそこ洒落たデザインになるようなCSSの例を教えてください。
ちなみにHTML4.01Strictと<BR>、
JavaScript無しでやってます。

>>249

NN4で使えるものを、まず何かまとめておいて、IEやN6/Mozilla向けを
@importで呼び出すのが常套かと。
http://east.portland.ne.jp/~sigekazu/css/boxm.htm

@importの多用は感心しない。私はmedia設定でNN4除けをしてる。
そしてＮＮ４に対してだけ専用cssファイルをJavaScriptで読み込ませる。
できればJavaScriptも使用したくないんですが、
どのみちＮＮ４ではスクリプト・オフだとスタイルシートも無効になるので
まあいいかと。

>>250
参考になりました。
thx

>>249
確かに、一つのCSSファイルを全てのブラウザに適用させて済ませたいところだが
ネスケ４はバグがひどすぎて、組合せによっては何がバグるかも推測つかないので、
CSSを認識させないか、専用のファイルを作ってやるのが一般的方法です。

@importを使うと
NN4.0xが落ちるって本当？

>>251
なぜimportだめ？

>>255
ダメではないが好もしくない。読み込みが遅くなるし、構造がつかみづらい。
IEの「名前を付けて保存」＞「Webページ、完全」でも、@importで指定された
外部cssファイルだと保存してくれないし。

参考：
LEVEL5「やたらとCSSファイルを小分けにする」
http://members.jcom.home.ne.jp/jintrick/Personal/bad_css.html

N4をよけるためだけにmedia="print,screen"を指定するのってなんか釈然としないんだけど。。
印刷した場合の見え方、確認してないし。。
割り切った方がイイ？

>>257
ならばmedia="all"でどうですか？
どのみち何も指定してない場合は、allと同じことですよね。
それともscreenにだけ適用したいってことですか？

>>258
allだったらauralにもbrailleにもtvにもOK！ってコトじゃないの？

表示確認してるのはscreenだけなんだけど。。

>>259
メディア・グループがvisualに属するプロパティならば
いくら指定してもauralやbrailleには関係無いはずです。
それに、プリントアウトして読む人だって珍しくないんだから、
印刷プレビューでprintの表示確認位しようよ。

NN4避けのために使用する@imortなど一回で済むのにいきなり「多用」まで話が飛躍する上、
「感心しない」などと偉ぶった口調の>>251の態度は感心しない。

>>261
うん、感心しない。しかし@import一回で済むにしても、
やはり@importしか書いてないまっさらのCSSファイルって
何か間違ってる気がする……。裏技だから仕方無いのか？

>>261
どうでも良いが話のレベルをすり替えないでくれ。
251の態度について話したいんじゃない。
CSSについて話したいんだ。

>>260
CSSのmedia指定にきちんと対応してるブラウザってあったか？

極惡CSS研究所「ステルスCSS！隠せ」
http://www.geocities.co.jp/Milano-Killer/8583/gokuwaza/kakuse.html
↑import20回だってさ。IEだと認識しない。

>>260
気になったので簡単な実験をしてみました。
<link rel="stylesheet" href="./red.css" media="print">
red.cssにはbody{color:red;}とだけ指定を入れました。

ブラウザはWinIE5.5SP2。
モニターで見ると、文字色に変化無し。しかし印刷プレビューでは文字色は赤に。

次にmedia="screen"とすると、ブラウザでは文字色赤、印刷プレビューでは黒。

結論――ちゃんと対応してるみたいです。

NN4避けのためなら<nolayer></nolayer>で囲めばいいでしょ

>>266
そんなHTML4.01に存在しない独自拡張タグ使用する方が問題多いよ。
大体それHEAD内に書き込んでも意味無いし。

>>267
あるもないも、意味大有りよ〜

>>262
俺は@importの後にNN4に読み込まれても困らない分を書き込んでるよ。
どっちかと言うとNN4で処理できない分をimport先に追い出した感じ。

>>269
その「NN4で処理できない分」が明確に分けられるんならいいんですが、
ネスケ４のバグっぷりは（組合せ次第では）何がバグるか見当もつかないから……。
結局専用ＣＳＳを書くのと労力は同等になりませんか。

>>270
同等(以上かも)。表示確認を果てしなく繰り返すしかなく…。
もともとNetscape4でもしょぼいなりの表示をしたかったからなんだけど。

ネスケ４専用のＣＳＳファイルを作る位なら、いっそJavaScript Style Sheetにするってのはどう？
http://www.zspc.com/stylesheets/jss/index.html
それでももし、自分とこの独自拡張であるJSSも満足に表示できないのなら、NC4.xは本当のクズ。

H2とH3にスタイルシートで背景色と背景画像を指定してます。
パソコンの画面で見ると問題なく意図通り表示されるのですが、
プリントアウトすると背景色だけ刷られて背景画像が印刷されません。
IE5.5の印刷プレビューでもやはり背景色は見えるのに背景画像が見えなくなってます。
オプションの「背景の色とイメージを印刷する」はチェック済みです。
シートでmedia="print"や@media printと指定してみても結果は同じ。
これはIEの仕様（バグ）なんですか？
印刷にも背景画像を反映させるにはどうしたらよいのか、助言ください。

>>273
プリントアウトの設定が背景色も印刷することが出来たなら
黒背景色のサイトなんかを印刷したら、インクいくらあっても足りない。
背景色が省略されたときは、その文字色も違う色になって印刷されるはずです。
それなりに親切な設定だと思いますよ。

どうしてもブラウザで見たままの印刷をしたいなら、画面ごとプリントスクリーンキーで
キャプチャして、画像編集ソフトから印刷してみてはどうでしょ。

フォントの大きさ等をHEAD内に指定し、
TABLEタグ内でそれを使うとなぜか下に
空白が出来てしまいますが、なぜでしょう？

>>272
使ってみたけど、全然だめ。
ネスケ4のクソスタイルシートをJavaScriptで書けるだけ。
表示はまったく変わらん。
ネスケ4なんて@importで十分だｺﾞﾙｧ!

>>274
＞プリントアウトの設定が背景色も印刷することが出来たなら
なにか誤解なさってませんか。
既に>>273でも書きましたが、背景“色”は現に印刷できるのです。
（そのための設定がＩＥの「インターネットオプション＞詳細設定」にもあります。）
にも拘らず背景“画像”だけが印刷に出ないので、これを何とかしたいのですが。
つまり、background-colorでなくてbackground-imageの方です。

>>275
質問の意味がわからん。
>TABLEタグ内でそれを使うとなぜか下に
それって何？　下って何の下？
もっと具体的に、できればソースを出して質問しておくれ。

>>276
表示は変らんけど、ＣＳＳでの意味不明なバグり方はしないだけマシでもない？

最初から書くとこんな感じです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>2ch</TITLE>

<STYLE TYPE="text/css">
H3{font-size:17px;font-family:"Times New Roman";font-style:normal;color:#000000;}
H4{font-size:14px;font-family:"ＭＳ ゴシック";font-weight:lighter;font-style:normal;color:#000000;}
</STYLE>

<META content="text/html; charset=Shift_JIS" http-equiv=Content-Type>
<META content="MSHTML 5.50.4134.0600" name=GENERATOR></HEAD>
<BODY>

<TABLE CELLPADDING=2 CELLSPACING=0 BORDER="1" BORDERCOLOR="#FFFFFF" WIDTH="375">
<TR>
<TD BGCOLOR="#DAF2FE" ALIGN="RIGHT" WIDTH="120">
<H3>11/29,002001</H3></TD>
<TD BGCOLOR="#E3E4FF" ALIGN="RIGHT"><H4>今日はいい天気でした。</H4>
</TD></TR>
</TABLE>

</BODY>
</HTML>


TABLEタグ内に　HEIGHT="小さい数"　を記述しても変わリません。
HEAD内に記述せずにSPANで各々やれば大丈夫なんですが、
日記なので、後々管理が辛いのです。

これはどうしたらいいのでしょうか？

補足。
セル内の文字の下に空間が出来てしまうという事です。

俺様のいうウェッブデザイン書けや！！下僕ども！！
ってところに来い！！そして書けよ！！わかったか！！

H3と H4に margin-bottom: 0px とか入れるが吉。

>>282様

ありがとうございます！！　解決いたしました。
よ〜し、徹夜でホムペをCSSでリフォームするにょ〜。

>>279
せっかくＣＳＳを利用するなら、もう少し勉強してテーブルレイアウトを止めるといいよ。

「今日はいい天気でした。」ってぇのは日記の本文？
だったら H4を使うのはどうかと思う。

>>279
何でH3とH4なの？ってのは置いといて

H3とH4のスタイル指定に margin-bottom:0px を追加してみれ

あーなんでこんな古いのにレスつけてんだ、漏れ
すでに解決済みだっつーのに
逝ってきます・・・

スタイルシートの切り替えにJAVAスクリプトを使わない方法ってありますか？
スレ違いかな・・

>>285様、286様。

レスありがとうございます。

H1,H2は、他に記述するものが出来たときの為にあけたんですが、
CSSじゃない<H1>タグのように、大きさが順々に小さくなったりするものではないですよね？

>>289
<H3><H4>を使うのはどうか、というのは
<H1>から使うべきだという意味ではないと思われ。
<Hn>は見出しを記述するために使うべきもの。
http://tohoho.wakusei.ne.jp/html/h1.htm

>>288
代替スタイルシートのことなら↓
http://pc.2ch.net/test/read.cgi/hp/991400015/l50
http://www.xinada.ne.jp/~handa/tech/CSS/StyleChange/index
ブラウザへの振り分けのことなら↓
http://east.portland.ne.jp/~sigekazu/css/boxm.htm

tableのセルの上にマウスがきたらセルの背景色を変えるっていうのは
ジャバスクリプトじゃないと無理ですか？

>292
td:hover とかやればできるはずなのだが，
まともに対応している UA は多分まだない．
（N6 で不完全に対応していた気がする．）

>>292
CSSだけではムリです（少なくとも今の:hoverの実装では）。
cf. ttp://east.portland.ne.jp/~sigekazu/css/javascript.htm

どうもありがとうございます。
ジャスクリプト行きます。

>>294
ウソを言うな〜
セルの中で便宜的にAタグを使えばできる。
ついでに、IEならHTML+TIMEという技術を使えばできる。

IE6標準モードでふつうのボックス要素にoverflowを適用する方法は
ないものでしょうか?　擬似フレームをやってたので、HTML要素のみに
適用というのは残念。どうにかならないものでしょうか。せっかく
標準モードで　margin-right:auto; margin-left:auto; という
ブロック要素のセンタリングが使えるようになっただけに……。

>>297
>HTML要素のみに
何のこと？
divとかならIEはwidthかheightを指定しないとoverflowが効かない。

追加
html,body{height:100%}
も指定しておくと疑似フレームには役立つかも。

CSSをCCSと言う人がまわりにいて鬱。

HTMLの <TABLE> のレイアウト利用が大っ嫌いで、
CSSをはじめたんですが、（かちゅスキン改造の為でもあるけど）
TABLE の代替策が見つからない（わかりません）。

枠線の表示は、borderで出来るのは分かるんですが…
いろいろ考えてみたんですが(1hour程)ｻﾊﾟｰﾘです（苦笑

どなたか教えてください。

まず、tableの代わりに使うのだと言う発想をやめる事。
それから具体的にはどのようなレイアウトにしたいかを明確に。

>>301

まあ、イケてるデザインスレのソースをじっくり研究することだ。
特にposition、floatまわりを重点的に。

>>301
入門でてっとり早いのが、左右どちらかにマージンをとって、そのマージン以下の幅の
ブロック要素をabsoluteで配置するとか。左右2段レイアウト程度なら
以下が参考になるんでは。

↓簡単なフロート例
http://www.skipup.com/~l-_-l/web/jikken/1.html
http://www.geocities.co.jp/Milano-Killer/8583/gokuwaza/divkage.html
↑こっちはあくまで『極悪サンプル』らしいが（笑）

>>304
僕も勉強の為そのサイトに逝こうとしたら、
IEの。。。で、OS落ちました（泣
IEのばかやろぉぉぉお！M$なんで分割されなかったんだよぅsage

<span onmouseover="this.style.background='#ff3399';" onmouseout="this.style.background='';">トップページへ</span>
これを全体に効果がでるってことにはどうすればいいですかねぇ？

＞306
↓削除依頼だしたらね
質問スレ
http://pc.2ch.net/test/read.cgi/hp/1007225570/

>>304
↓簡単なフロート例
http://www.skipup.com/~l-_-l/web/jikken/1.html

ドキュソタイプ宣言に激しくﾜﾗﾀ

http://www.skipup.com/~l-_-l/web/jikken/1.html に曰く、
＞左側はdivで囲っていない。というのも、 それをやると（やってみればわかると
＞思うが） 頭の横巾100%から先程の40%を引いた値のままだらだらと下へ続く。と
＞いうか、めんどくさいので作った。

しかしその http://www.skipup.com/~l-_-l/web/jikken/2.html を見ても、
1.htmlと何ら変りがない。IE5.5、NN6で確認。
むしろ http://www.skipup.com/~l-_-l/web/jikken/3.html がそれに近い。
どうなってるの？

http://dfj.cool.ne.jp/のformスタイルのときに、
背景画像が透けて、したの文字が見えるのですが、コレはどうすればいいのでしょうか。
網目状の透過gifでも使っているのでしょうか。

>>310
ソース見てないけど、filterのアルファブレンダリングでしょ。
bodyとかtableにstyle="filter:alpha(opacity=60)"とかにしてみ。
style="filter:alpha(filter:alpha(style=1,startX=0,startY=100,finishX=100,finishY=0,opacity=100,finishopacity=20)"
とか、細かく設定もできる。
あとは自分で調べて。いろいろあるし。

×アルファブレンダリング
○アルファブレンディング Alpha Blending

>>311
ありがとう御座います。
そうか、だからIE専用スタイルなんだ…

>>298,>>299
IE6の厳格モードでは、何でそんな仕様にしたのかわかりませんけど、
BODY要素にoverflowが効かないんですよ。

http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp

にも、

> 注 : 属性 overflow、overflow-x、および overflow-y は、コンテナのサイズより大きい
> コンテンツを管理するときに使用するもので、標準準拠モードが有効になっていると、
> これらの属性は HTML 要素に適用されます。

とあります。

実際に調べてみますと、標準モードでは従来の擬似フレームの設定では
フレームにならない場合が多くあります。例えば縦に長いページの場合、
メインの部分をoverflow属性でスクロールさせたつもりが、HTML文書の
全体がスクロールして、position:absolute;で位置を固定したはずの
ナビゲーション部分が上に流れていってしまいます。

そこで、IE6標準モード対応型の擬似フレーム作成術があれば、
どなたか知恵を貸していただきたいな、と思った次第です。

とりあえず>>297より日も経ち、http://hp-design.net/で
新規公開された標準モード対応のELAVATING NAVIGATOR 2を
使用することで落ち着きました。

いずれにせよ、いずれ互換モードは朽ち果てるわけでして、
どうせ一年も続かない私のサイトなどはどうでもいいですが、
企業サイトに関わるプロのデザイナーさんはたいへんですね。
対応すべきブラウザが一つ増え、その一方でノウハウの蓄積が
ある準拠ブラウザが消えてしまうわけですから。

>>314-316
ここ参考になりませんか。
http://www17.u-page.so-net.ne.jp/qb4/chiharu-/overflow.html#mozilla
http://pc.2ch.net/test/read.cgi/hp/991666454/118-129

おしえてください！hover対象のテキストをポイントすると
そのテキストを含んだテーブルがちょこっと動くんですよ。
グラっと。ｶﾞｲｼｭﾂだったらスマソですが回避方法ご存知ありませんか

>>318への宿題。
その現象が起こるOS、UA及び、A:link、A:visited、A:hoverに対する
スタイル指定を、全て示せ。

>>318

要するにa:hoverにしかborder指定してないだけじゃん

A:link、A:visitedとかにa:hoverと同じwidth指定して
色をtransparent(透明)にでもしろ

UL{margin:0 auto;}と指定しました。
NN6やIE6の標準準拠モードでは左右マージンをautoにすればセンタリングされるはず。
しかしちっとも表示に変化がありません。margin-leftとmargin-rightにしても同様。
ULでなくliをセレクタにして指定すると、ULに設定したborderから間が空きすぎますし。
リスト・コンテナを中央揃にするにはどうしたらよいのですか。

318です。ありがとうございます

>>321
ulのwidthを定めると良いでしょう。

>>323
？？？　width指定ではセンタリングにはならないのでは？
――特にリストの横幅が入れる内容によって定まらない場合は。
もしうまく中央寄せにするやり方があるのならご教示くださいませんか。

>>316
だからbody{height:100%}
が必要なんだってば。

<style type="text/css">
html,body{overflow:hidden;height:100%;margin:0;}
div.scroll{height:100%;overflow-x:hidden;overflow-y:scroll;}
</style>

これでbody直下のdiv.scrollをスクロールさせれるはず。

>>324
いや、{margin:0 auto;}と同時に、です。

http://www.fan.gr.jp/~kaz/rec-css2/visudet.html#the-width-property
ここの「10.3.3 通常フローの非置換ブロック要素の場合（Block-level, non-replaced elements in normal flow）」
を読む限り、ブロックレベル要素の width を auto にした場合
( デフォルトが auto なので指定しない = auto を指定 )
margin-left や margin-right に指定した auto は 0 と算出される。

誤読してたらゴメンだけど。

>>326
ここですね。見ました、有り難うございます。
http://www.fan.gr.jp/~kaz/rec-css2/visudet.html#q6

width:x%(100％以外)を指定すれば、中央寄せにできました。
しかしできれば、リストコンテナ内の最長のli要素に合せて
ul要素のwidthを自働的に指定できる手があると助かるんですが。
IEのCSS関数構文（expression）でもないと無理ですかね？

>>327
自動的となると俺には思いつかない。
すまん。

UICの「もっと書き込み隊」カスタマイズが上手く出来ない・・・

>>329
それはご愁傷様。
で、質問は？

age

Mac_NN6
外部スタイルシートで

body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}
.j9, .j10. .12 {font-family:Osaka, ＭＳ Ｐゴシック, MS UI Gothic, sans-serif;}

はスタイルを読むけど、

.j9, .j10. .12 {font-family:Osaka, ＭＳ Ｐゴシック, MS UI Gothic, sans-serif;}
body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

（つまりクラスの指定が先の場合）はダメってのは
そういう仕様？それともなんか間違ってます？
だれかおしえてくさい。

>>332
>.j9, .j10. .12
.j9, .j10, .j12、ではなくて？

一応、解説しておきますか。
ピリオド“.”とカンマ“,”を間違ってはどれがセレクタかブラウザも混乱します。
クラス名は先頭に数字を使ってはいけません。「.12」は不可。

>>317
>>325
どうもありがとうございました。スクロールバーが二本出ることさえ諦めれば、
IE6標準モードで擬似フレームを実現できることを確認しました。

もっとも外側のバーは空なので、見た目に気になるだけ不都合はありません。
（NN6では予想通りバーは一本のみでした）

>>332
「ＭＳ Ｐゴシック」「MS UI Gothic」は'で括らないと。
http://www.fan.gr.jp/~kaz/rec-css2/fonts.html#value-def-family-name

Macもっていないんで、これが原因かは分からないけど。

テーブルセルに
td { font-size: 10pt; text-align: center; vertical-align: middle}
というカンジでテキスト位置を中央に指定しています。
テーブルの中のテーブルセルには有効なのですが、大元のテーブルの中に
あるテーブル自体はネスケでは中央にきてくれません。
ＩＥでは大丈夫なのですがネスケではこういう場合無理なのでしょうか？
入れ子になった内側のテーブルをネスケでセルの中央に配置するには
どうしたらよいのでしょうか。

ネスケってネスケ6？
内側のテーブルに次のスタイルを付ける。
table#naka { margin-left: auto; margin-right: auto; }

テーブルがtext-align: centerでセンタリングされないのは
正しい動作。ってFAQかな？

>>335
外側のスクロールバーも消せる。
ちっとは自分で考えれ。

IE6のみにスタイルを適用させる方法があったと思うのですが、
googleあたりで探しても見付かりません。
検索語が悪いのかもしれませんが・・・。
ご存知の方がいらっしゃいましたら、教えて下さい。
宜しくお願いします。

>>340
<!--[if gte IE 6 ]>
<LINK rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
で、どうか。
cf.http://east.portland.ne.jp/~sigekazu/css/boxm.htm

あと、piro氏によれば――
>WinIE4/5/6 にのみスタイルを適用したい場合、独自拡張の expression()を使えば可能。
>例： margin:expression('0 0 1em 2%');
>
>WinIE6 にのみスタイルを適用したい場合、1に加え、文字列のエスケープを使えば可能。
>例： \6D\61\72\67\69\6E:expression('0 0 1em 2%');
>
>MacIE5 のみ除外したい場合、文字列のエスケープに空白を含めれば可能。
>例： \6D \61 \72 \67 \69 \6E :0 0 1em 2%;

>>341-342 お二方
は・・・早いですね（＾＾。
どうもありがとうございましたm(_ _)m

あ、お一人でした。すみません。

>333-334
あ、書き込みミス。
.12は.j12の間違い。
で、やっぱり順番とか関係あるんスかねぇ。

>>345
で、カンマとピリオドの混同もちゃんと直したの？
順番は、同じセレクタ・同じプロパティなら下の記述ほど優先する決まりだが。

>>345
もう>>336の指摘は験したの？

インラインフレームの属性でallowTransparency　とは何なのでしょうか？
allowTransparency　をgoogleで検索しても、８件しか出てきません

>>342
その方法だと、
スクリプトがOFFのときにスタイルが適用されないので、
使うべきではない。

>>348
IE5.5以降でフレームの背景を透明にして、
透過させることができます。

>>350
早いレスありがとう！

バリューコマースのバナータグに付いてて、
ビルダーV6でエラー表示（赤字）になるのですが、
未対応という事でいいのでしょうか？

>>351
マイナーな機能だから、
たいていのHP制作ソフトでは未対応だと思うよ。

>>338
ありがとうございました。
text-align: centerではテーブルはセンタリングされないのですね。
ＩＥではうまくいくのになぁ。やはりネスケ対策は難しいです。

>353
それはネスケ対策と言うのか…？
＃text-align: center; で IE5.5 以前（と 6 の互換モード？）でテーブルが
＃センタリングされるのは IE の正しくない動作，というのが FAQ なのです．

>>351
ありがと！

実は>>341の方法は験してないので、IE6と5.5未満をお持ちの方、結果を聞かせてくれると有り難い。

>>356
×IE4.0以前(未確認だけど確認するまでもなく×)
×IE5.01
×IE5.5
○IE6.0
×Netscape,Mozilla
×Opera

>>357
おお、バッチリ大丈夫ですね。有り難う。

>>354
テーブルのセンタリングは、text-align: center;かつ、テーブルの
左右のマージンをautoにすればほとんどのブラウザに対応できる

でオッケーかな？

<center></center>でくくった方がマシだな。
テーブル枠はテキストじゃないぞ。

スレタイトル読んでくれや。
読んでないにしても、なぜよりによって <center> ?
せめて <div align="center"></div> とか
テーブルなんだから <table align="center">

>359
で，text-align: center; を正しく解釈してくれるブラウザが
内容までセンタリングしないように
td{text-align: left;} とか入れとくとさらに幸せかも．

346-347
レスおそくてスマソ。
336の指摘は験しました。
やっぱり順番すかねェ。

>>363
具体的に、>>332の後者でどのスタイル指定が効かなくなるのかを書いてくれないと。
>>332の通りの記述なら順番は関係無いはず。もし順番に左右されるならバグ。

┌────────────────────┐
│　　　　　　　　　　　コンテンツ　　　　　　　　　　　　│
├───┬───┬────┬───┬───┤
│ ほ げ │.　うま　│　かえれ │　ギコ　│ もなー│
├───┴───┼────┼───┴───┤
│.　逝ってよし！.　│.　　　　　 │.　オマエモナー　│
└───────┴────┴───────┘

上記のようにCSSで記述しようとおもったんですが
％で幅を決めてたら上手くいきません。

<DIV class="contents">
<H2>コンテンツ</H2>
<UL class="up">
<LI>ほげ
<LI>うま
<LI>かえれ
<LI>ぎこ
<LI>もなー
</UL>
<UL class="under">
<LI>逝ってよし！
<LI>オマエモナー
</UL>
</DIV>

HTMLはこんな感じです。
％記述じゃムリなんでしょうか？
よろしくお願いします。

方法はいくつかあるけど、何でCSSは書かない？
絶対配置？　float？

>>362
サンクス！参考にさせていただきます。

2ch の上の欄の「掲示板タイトル」と「■ ▼」みたいな
テキストを両端に位置させるのを、
<table>タグを使わないでスタイルシートで実現できますか?

>>368
float:leftとfloat:rightでやってみ。

>>369 サンクスコできたよー

＞366
バカなんで
display: inline;
と書いてますが問題ありでしょうか？

絶対配置ではありません。

だから何をdisplay:inlineにしたんだよ。
それから、
置換要素でないインライン要素にはwidth,heightは適用されないぞ。
IEだと適用されるが、それはIEが間違って実装している。

説明不足すません。

LIをインラインにしてます。
floatの方がいいんですね。
書き換えます。

粘着で申し訳ない・・・

floatのしたらborderが消えるんですがぁ・・・（；´Д｀）

>365
あのね，情報を小出しにされるよりは，
CSS を全部（と言うか少なくとも li まわりとか ul とか）書いてくれたほうが
答える側も答えやすいのよ．
今の状態だと 1 つずつしか進めないから．

>>365
HTMLソース出したんならスタイルシートのソースも全部さらしてくれや。

.contents {
margin: 0 10%;
padding: 0;
}

H2 {
margin: 0;
padding: 1pt;
background-color: #ccc;
font-size: 85%;
line-height: 110%;
text-align: center;
font-weight: bold;
border-width: 0 1pt 1pt;
border-style: none solid solid;
border-color: #333;
}

.contents UL {
margin: 0;
padding: 0;
font-size: 80%;
line-height: 110%;
text-align: center;
font-weight: bold;
}

.contents UL LI {
margin: 0;
padding: 0;
list-style-type: none;
border-width: 0 0 1pt 1pt;
border-style: none none solid solid;
border-color: #333;
float: left;
}

.contents UL LI.last {
margin: 0;
padding: 0;
list-style-type: none;
border-width: 0 1pt 1pt 1pt;
border-style: none solid solid solid;
border-color: #333;
}

.contents UL.up LI {
margin: 0;
padding: 0;
width: 10%;
}

.contents UL.under LI {
margin: 0;
padding: 0;
width: 20%;
}

すみませんです。
↑ので出来たと思ったら画面サイズ変えたら
上段のコンテンツが何故か指定幅より小さくなっちゃいました。

あ、ちなみに上段に８つ、
下段に４つコンテンツを入れてるんです。

>>377
floatさせる要素には同時にwidth指定が必要です。

＞380
後述の
.contents UL.up LI {
margin: 0;
padding: 0;
width: 10%;
}
じゃ、ダメでしょうか？

妥協して解決させました・・・。（ﾄﾎﾎ

background-colorは継承されないですよね
なのに、例えばbodyに指定した色が子要素にも引き継がれて
bodyの全ての背景色が同じになるのが理解できません。
どういうことなのでしょうか？

transparent だから。

>>384
ありがとうございます
しばらく意味がわからなかったのですが、じっくり考えたらわかりました
初期設定がtransparentというのが原因で、継承してるように見えてしまう
わけなんですね。なるほどなるほど。

＞364
.j9, .j10, .j12 {font-family:Osaka, ＭＳ Ｐゴシック, MS UI Gothic, sans-serif;}

を先にもってくるとNN6（Mac）では
body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

が効かないんですわ。

>>386
.j9, .j10, .j12 {font-family:Osaka, "ＭＳ Ｐゴシック", "MS UI Gothic", sans-serif;}
でも駄目ですか？

初心者バレバレで申し訳ないですが、どなたか画像をページの右上にはっつける方法を教えてください。
お願いします

>>388
ここ見て試してごらん。
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background-position

>>388
背景として表示させるんじゃなければ
http://hp.vector.co.jp/authors/VA022006/css/text.html#text-align

389-390さんありがとうございます。
見たんですが正直わかりませんでした。やりたいのは、同じ行の左端と右端に画像を載せる、ということです。
最初tableでやろうとしたんですが、CSSの方がスマートかなと思いまして。
tableでいうと、
<table border="0" width="100%">
<tr><td align="left"><img src="a.gif"></td><td align="right"><img src="b.gif"></td>
</table>
という感じの配置です。
もしわかりましたらよろしくお願いします

>>391
ならば、この辺見ればわかるかな。
http://www.sugai.f2s.com/web/CSS/back.html#background-image
http://dfj.cool.ne.jp/html/background.html#background_image

同じ行の左右両端に置くのなら、floatで位置指定がいいかも。
http://dfj.cool.ne.jp/html/position.html
頑張って勉強してね。

なんとなくそれっぽい事ができました。
といってもdivでそれぞれを別の要素にしてポジション指定し並べたっていう場当たり的な方法ですが。。
ともかく389さんご丁寧にありがとうございました。

Win2Kなんですが、外部スタイルシートでのフォント指定が反映されて
ないようなのですが（一部）・・cursiveフォントとかが普通のゴシックになり
ます。IE5.5SP2です。Win98の時はちゃんと表示されました。表示させる
方法ないですか？

Win板でも訊いちゃいました・・まるちスマソ・・。こちらのほうがいいかなと
思いまして・・

質問です
◆レイヤーを常にブラウザ中央に表示させたい！
◆サイトの見栄えをチェックする時、win上でmacやunixの表示確認は可能ですか？
教えてください

>>395
左右の中央ならともかく上下でも中央ってのは（ＣＳＳでは）無理みたい。
http://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?past=5&c=r&n=226
div{position:absolute;top:50%;left:50%}が関の山、かな。

プラットフォームが別なのにそんな表示確認できる方法があったら私が知りたい。

Operaでpaddingが効かないんですがどしたらよいでしょうか？

>>397
インライン要素への padding 指定は無視してるみたいだね。
margin は効くのに。
正直、「諦める」以外の対策を思いつきません。

span のネスト？いやそれはダメだろ＞俺。

>>398
レスどうもです。
つまり今後paddingは使わない方向で
対策していくしかないのですか・・・・。

ﾟﾟ（´□｀｡）°ﾟ｡ｳﾜｱｱｧｧｧｰｰｰﾝ!
Operaのうんこたれ〜！

>>399
Opera ユーザの数なんてたいした数でもないし、
無視すると言うのも、手ではある。
Opera 普及サイトだとでも言うなら話は別だけど。

>>397-9
？？？……Opera6で、ちゃんとインライン要素へのpadding有効ですが？

>>401
あ、ホントだ。恥。

効かないのはインライン要素じゃなくてリンク系の擬似クラスだった。

左marginを空けたwidth100%の画像を置いています。
（区切り線として、hrの換わりに）
IE6だと、「ウィンドウ幅の80%-右margin」の幅の画像が描かれます。
しかしNN6.2だと、「左marginを20%とった後で100%の幅」の画像が
描かれてしまい、どうしても横スクロールしてしまいます。

要は
IE：margin幅を除いた100%が幅になる
NN：margin幅は関係無しにウィンドウ幅100%を幅にして、その後でmarginを
　 付け加える
となるのですが、どちらのブラウザの解釈が正しいのでしょうか？

ちなみにCSSは
img.line{
margin:0px 5px 0px 20%;
width:100%;height:2px;
}
です。IEの方が正しそうなんですが・・・

>>403
widthの幅は、marginとpaddingは含まない。
また、widthを％で指定すると親要素の幅から計算されるから、
実装はN6が正しい。はず。

>>404
おぉ！そうなんですか！ありがとうございます。
そうなってくると、両方のブラウザで左20%、右5ｐｘのmarginを残した
画像を表示するのはなかなかムツカシイですね。
他の方法を考えてみるか・・・

>>403
NN6が正しい。WinIEでもver6で標準準拠モードにすれば正しく計算する。
cf.http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width

IEの互換モード（従来の正しくなかった表示）の方に合せたいのなら、
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5で有效。*/
-moz-box-sizing:border-box; /* Mozillaの記述。N6で有效。*/
}
とする。
但し、Operaには効かない。

カキコした瞬間に思いついたんですが、
divかなんかに画像を入れて、divにmarginを設定したらいけるかな？
とりあえず試してみます。大きなヒントになりました。
ありがとうございます>>404

っと。>>406さんのは高度なテクですね。
CSS2の辞典しか持ってないもんで、そんな方法は
思いつきませんでした。CSS3辞典も買わなきゃ！(^^)

>>403
これとか
hr.line {
 margin: 0px 5px 0px 20%;
 height: 2px;
 background-image: url(line.gif);
}
ただ、2pxだと画像がちゃんと表示されない。むぅ。

>>409
フム・・・文法的にはhr使った方が正しいですもんね。
とりあえず、今はそれを試してみます。10分後に結果
報告します。笑

ぐげ・・・>>409でおっしゃったとおり、画像が出ませんでした（；´Д｀）
DIV使ってみるかな

DIV使ったらどちらも表示OKでしたヽ( ´∀`)ノ

文法的には少しおかしいけれど、表示さえうまく
いけば問題ないので万事オッケーです(^^

しかし、けっこうマスターしてきたつもりだったけど
CSS3があるとは思わなかった。笑
box-sizing:border-box;なんて初めて見たんでびっくり。
勉強が足りませんな。

>>412
CSS3は勧告候補でまだ正式に規格となってません。
だから裏技みたいなもんです。
前はその辺に詳しいページがあったのだけど、作者に削除されてしまって、
いまは下記の圧縮ファイルをダウンロードしないと読めません。
http://www.cc-net.or.jp/~piro/tips.lzh

>>413
なんと・・・そうでしたか。
では、とりあえずはCSS3の勉強は見送ることにします。
規格化されたら始めます。

皆さんありがとうございました。>>404 >>406 >>413

>>414
まぁ無理にとは言わないけど、少しずつでも読んどいた方がいいと思うよ。
仕様書の量は多いけど、基本的にはCSS2と殆ど変わらないし。

ttp://www.w3.org/TR/2001/CR-css3-selectors-20011113
ttp://www.w3.org/TR/2001/WD-css3-background-20010924
ttp://www.w3.org/TR/2001/WD-css3-fonts-20010731
ttp://www.w3.org/TR/2001/WD-css3-box-20010726
ttp://www.w3.org/TR/2001/WD-css3-values-20010713
ttp://www.w3.org/TR/2001/WD-css3-cascade-20010713
ttp://www.w3.org/TR/2001/WD-css3-text-20010517
ttp://www.w3.org/TR/2001/WD-css3-mediaqueries-20010517
ttp://www.w3.org/TR/2001/WD-css3-roadmap-20010406
ttp://www.w3.org/TR/2001/WD-css3-color-20010305
ttp://www.w3.org/TR/2001/WD-css3-ruby-20010216
ttp://www.w3.org/TR/2001/WD-css3-multicol-20010118
ttp://www.w3.org/TR/2000/WD-css3-userint-20000216
ttp://www.w3.org/TR/1999/WD-css3-page-19990928

恐ろしく間抜けな質問ですが、どうか教えてください。
画像をセンタリングしたいのです。
一体どうすれば。。

<div style="text-align: center">
<img src="***" alt="***" width="***" height="***">
</div>

text-alignでできました。お騒がせしました。。
textじゃないのに、、

>>416
img{text-align:center;}でどう？
どんな文脈で配置するか、画像を挿入する前後の要素の関係にもよるけど。
できればHTMLソースも出してみて。

>>418
この場合、textってのはインライン要素のことだからね。

417さん419-420さんどうもです。
単純にバナーみたいなGIF画像を配置したかっただけで、リファレンスを見たのですが、
どうしてもセンタリングにtextしかないので悩んでしまいました。
インライン要素、、というのはつまり、ボックスをセンタリングするのではなく、
ボックスの要素をセンタリングする、という概念でよろしいでしょうか？

まだまだ勉強不足なようで、教えてくださる皆様にはほんと感謝しています。
このスレッドの方はみんな親切で幸せです。では。

というか、HTMLは全部テキスト（文字）だから。感覚的には画像はテキスト
じゃないけど、それを表示させるタグはテキストだし。タグ自体に
せン太リングスタイルを使うという感じかな

>>421
ボックス・モデルはCSSでは全ての要素に当てはまるんですけど。
その全要素はインライン要素とブロック要素とに大別されます。
http://www.kanzaki.com/docs/html/element-level.html#inline
↑基本ですので勉強して下さい。

ブロック要素のセンタリングはmargin-left:ayto;margin-right:autoでできることになってます。
つい最近も話題になったFAQなので、読んで下さい。↓
http://pc.2ch.net/test/read.cgi/hp/1007538322/445-484

おいらこーゆーレイアウト（http://user404.hoops.ne.jp/page01.html
を外部スタイルシート２枚（各ページ共通のdefault.cssにこのページ専用のレイアウトを上書きするtable.css
で作ったんですけど、全てのtableを中央揃いにするのに一個一個のtabeleタグにalign=centerって埋めてるんですけど
他のタグと共にスタイルシートで一括表現出来ないでしょうか？centerタグを先頭と後尾に指定は邪道っぽいんで使いたくないので
なんとかスタイルシートで表現したいんですけど、だれかスタイルシート詳しい方いらはりますか？

そもそもこーゆー状況で table を使う事自体がアレなので
(ここは strict スレじゃないから良いのか? まぁいいや)
div とかで囲んでてきとーに左右の margin 設定するのが吉かと。

>>425
ネタですか？　ほんとにCSSを勉強してますか？
すぐ上に類似のFAQがある事に気が付きませんか？

上っすか？たぶんmarginのやつですか？
えーとモデルが323女史の日記なんですけどあれをスタイルシートで書き直して
うまくいかないなぁと思ってたんですが
<center>
<table>
日記本文A
</table>
<table>
日記本文B
</table>

</center>
をなんとか

<table>
日記本文A
</table>
<table>
日記本文B
</table>

＋
スタイルシートに一行記述

にしたくて

とほほさんとこで見てそれ(maginなんとか)一回試してうまくいかなかった気がしたんですけど
もっかい試してみます

あ、やっぱうまくいかないみたいなんですが

左右に均等にマージン振ってテーブルを中央に寄せるのは出来るんですけど
テーブルの横幅がブラウザのサイズや解像度でぶれるので、モデルにしてるサイトみたいな
左右の空白が大きいのを再現するとブラウザ最大にしてるとそっくりなんですけど
小さい窓にしたら横空き幅固定だと線みたいなテーブルになるんですけどなんとか
要素の大きさ保ったままセンタリングって出来ないっすか？

>>429
本当に>>424のを読んだの？
……ひょっとして、幅の指定は%だけって思ってる？

えーと‥‥、一応ptで指定を、なんかやはり間違ってます？ためしに424を真似たら左寄りになるんですけど

<table style="margin-left:auto; margin-right:auto; width:400pt;">
<thead><tr><th>
■ 2001年12月中旬 ■
</th></tr></thead>
<tbody><tr><td>
日記本文
</td></tr></tbody>
</table>

autoはIE6から

うちのブラウザ5.5でした(^^;

友人にネスケはいないんですけど5.01とか5.5の方が
6.0使ってるやつより多いんで、スタイルシート使って
テーブル要素ごとセンタリングゆーのは諦めます
5.5でもセンタリング反映って現時点では無理ってことでいいんですか？

連続投稿すいません、>>433の現状で無理、の意味ですけど
tableのwidthは400ptか500pxにしたままでセンタリングという意味で

IE5 は text-align:center で table センタリングするんじゃなかったっけ。
インライン要素みたいに。

>>435
<table style=text-align:center;>にしてみたんですが
IE5.5の環境だと左寄りのまんまみたいです

>>436
そうじゃなくて、<table></table>を含む要素で text-align:center を指定するの。

>>431の<thead>や<td><th>にtext-align:centerを指定するとセル中の文章のセンタリングですよね

えーと<table></table>を含むってことは

<ココ↓>
<table>日記12/14</table>
<table>日記12/13</table>
<table>日記12/12</table>
</ココ>

ってこと(tabeleより外側)ってことでしょうか？おれのページだと
tableの外側は<body></body>になってしまうんですがtable以外にも
題名とか連絡先等の左寄せのテキストコンテンツを置いてるので<body>に埋めると
他の部分が冗長になってしまいます、すいません

あ、<p style=text-align:center;>〜(テーブル数個)〜</p>でいけました
ありがとうございます

<center>の方が早いのかも知れないけど使わないですみました(^^

>439
せめて <div> にして…．
つーか，IE55 なら <table> に text-align:center; でいいはずだよ．
それでならないのは，他の何かがおかしいと思うのだけど．

そうなんスか(^^; < 他がおかしい
>>436みたいな感じに書いたんですけど

あとどうせ<br>で間隔調整してるんで<br>一個減らして<p>のがいいかなぁと(^^;
<br><div>＝<p>のつもりで今までいたんですけどやっぱ定義とかつかいどころとか
w3oなんとかってとこの勧めでやっちゃだめとかあるんでしょうか？

>>438
そういうことです。
tableをdivタグで囲むだけのことすら冗長と思うなら
私ごときからはもう何も言うことはありません。

正直、425は<center></center>でいいと思われ…。

>>443
だって<center>はdiなんたらtag(廃止予定、使っちゃイカンtag)とか
どっかで聞いたんでエラー判定サイトで出るエラーを減らそうかなぁと(^^;

おれも最初そうやってたんですけど < <center>〜</center>

>425
<html>
<body>
<table style="text-align: center; width: 100px; border: solid thick red">
<tr><td>
あほーあほーあほー
</td></tr>
</table>
</body>
</html>
枠つきの幅 100px テーブルが中央寄せ，その中で左寄せで文字，にならない？

>>440
>あとどうせ<br>で間隔調整してるんで<br>一個減らして...
おいおい、それこそcss使うところじゃねーか。
あとdefault.cssでfontを指定してるのになんでfont-familyを何度も指定してるんだ？
それにfont-size固定は好まれないよ。
単に中央寄せしたいだけならテーブルレイアウトから脱却しろよ。

てな感じで原理主義者が突っ込みを入れると思われるので注意が必要かも。

>>445
そのインラインの方法でも外部cssファイル参照の方法でも
>>436でも言ってるけどやってみたのに中央に表示されなかったよ
環境はIE55のSP2だけど

たぶん<div style=text-a〜>〜</div>が正解なのかなぁ

なるへそです

出来るだけ原理主義な方に指摘されないようなソース目指してたんですけど
ツッコみどころ満載でしたね、すんません
とりあえずこのスレの教訓を旨に<center>〜</center>は
<div style=text-a〜>〜</div>で置き換えときます

あー，僕が勘違いしてた．確かに table に指定じゃ無理だわ．
勉強しなおしてくる．ごめん．

＃table も使わないし IE は 6 だしでまったく検証のしようがなかった．
＃あちこち検索して表示例見てやっと理解した．ダメすぎ．

CSSである要素内での改行を禁止することはできますか？

具体的には、2chの「スレッド名一覧」において、

＝＝＝＝＝＝
1. ＋＋＋＋　2.＠＠＠＠＠　3.ＸＸＸＸ
ＸＸ　4.ＯＯＯＯ
＝＝＝＝＝＝
ではなく、

＝＝＝＝＝＝
1. ＋＋＋＋　2.＠＠＠＠＠
3.ＸＸＸＸＸＸ　4.ＯＯＯＯ
＝＝＝＝＝＝
という風に、3を途中で改行させない方が見易いですよね。
a要素内での改行を禁止すれば、できるのではないかなと
思いまして。

色々調べると、印刷時にページ分割をしないプロパティは
見つかったんですが、上記のようなプロパティが見つかりません。

どなたかご存知の方いませんか？

>>450
a{
white-space: nowrap;
}
で一応可能だと思う。
ただしwhite-spaceはブロック要素に限るのでお勧めしない。

a{
width: ***
display: block;
float: left;
}
という手もある。widthが必須なのでこれもお勧めできない。

インラインOKだよ。エラッタも読もう。

すまん。知ったか厨ぶりを遺憾なく発揮してしまった。
首吊ってくる。

The 'white-space' property applies to all elements, not just block-level elements.
これね。

しかし、初心者から熟練者まで、まったり混在したスレではあるね。
レベルを問わずCSSについて質問できるという、かなり理想的なスレですな。

良スレsage

>>425　遅ﾚｽ御免
そもそも、CSSを使って一括指定したいのなら
tableでレイアウトしている事自体意味が無いZO!
centerが廃止予定だと知っていてなんでtableでレイアウトを
しようとするんだか……

<body>
<div class="main">
<h2>日付</h2>
<div class="sentence">
日記本文
</div>
<h2>日付</h2>
<div class="sentence">
日記本文
</div>
</div>
</body>

div.main { text-align: center }
h2, div.sentence { width: 400pt; margin: 0 auto; padding: 5pt; font-size: 100% }
h2 { background-color:#a9a9ca; color: white }
div.sentence { text-align: left }

これは、模範解答じゃ無いYO!
div.mainのタグ付けとCSSの指定はbodyに置き換えてもいい
（その場合はやその他の要素にtext-alignを指定し直す必要あり）
兎に角、頑張って勉強しましょう。

テーブルの中の背景を、外部cssから読み込みで
作っています。
bg画像を下固定でx軸繰りかえし・・・までは上手くいったのですが
なぜか背景色が指定していない緑になります。

途中で送信してしまいました。すみません。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=x-sjis">
<title>タイトル</title>
<link REL="stylesheet" TYPE="text/css" href="1.css">
</head>
<body bgcolor="#000000">
<table>
<tr>
<td class="bg">
<br>
内容</td>
</tr>
</table>
</body>

1.cssの方は
.bg {
BODY {bgcolor="#000000"; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}
こんな感じです。

何方かお教えくださいませんか？
宜しくお願いします。

BODY {bgcolor

じゃなくて
BODY {background-color:#000000}

だね

>>459
レス有り難うございます。

.bg {
BODY {background-color:#000000; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}
こう変えてみたんですが、背景画像の上がなぜか緑になります。
環境がmacIEなのは関係あるのでしょうか？

ああ、とんでもないことやってたんだね

.bg {
bgcolor="#000000"; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}

こうすれば。BODY {　はいらない。

何度も有り難うございます。
でもやっぱり緑になるのは解消できません。
申し訳ないです・・・。

.bg {
background-color: black; ...以下同じ...

何度もごめん

bgcolor=""じゃなくて

bgcolor:#000000;

だ。

>>463
>>464
本当にすみません。
どちらもやってみたのですが、駄目でした。
背景画像の方は上手くいくのですが・・・。
どうして背景色は駄目なんでしょう…。

基本的でした。
以下をコピ。

.bg {
background-color:#000000;
background-image:url(img/bg.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:bottom left;
}

これこれ。こんな感じだ。

というか
.bg {
background:#000 url(img/bg.jpg) repeat-x bottom left fixed;
}

と簡略化した方がスッキリする。

>>466
それで上手くいきました！
本当に感謝してます！有り難うございました！！
ちなみに、今まではどうして駄目だったんでしょうか？
参考までに教えて頂けませんか？

1つめ

.bgの指定内にさらにBODY要素に対する指定があった

2つめ

bgcolor="#000000"
てのはHTML用であり、CSSには使えない。（HTMLからコピーしたのかどうか知らないけど）


CSSの本でも1冊購入すればいいと思う。

>>460の
repeat-xの後ろに ; が入ってなかったよ。単純なミス

本当にお世話になりました。
今日にでも本を買って、もっと勉強します。
有り難うございました。

IE6、Mozillaともに、A要素にbackground-positonプロパティが効いてしまうんですが、
これは実装バグでしょうか。

A:link の下辺にマーカー風の画像を貼り込んでるんです。

わざとそういう実装にしたんじゃないかな？
仕様書には効かないとしか書いてないけど、
実際問題どこを基準に表示するのかは実装依存で
それなら、効くようにしたほうが融通が利くし。

しかし、インライン要素が複数行にわたったときの
background-positonの挙動って、
WinIE,MacIE,Mozで全部ちがうのね。。。

>>473
速レス感謝します。
そういうものですか。実際使ってる以上そのほうが助かるんですが、
何かこう、もやもやして落ち着きません。

確かに折り返し以降がおかしなことになりますね。
MacIEはわかりませんが。

ul { list-style-image: url(hoge) ]
li { line-height: 1.4; }
この二つを組み合わせると、IE5やIE6でimageの位置がずれまくります。
なにかいい解決策はないでしょうか？

<object>使ってでできるスクロールバーって
スタイルシートで色変えれなくないですか？
おしえてください

<textarea>なら変わるんですけどね。

>>475
解決策は無い。
リストマーカーの位置は厳密には定められてないもんで。

>>476
objectで呼び出された側のHTMLで変えないと無理。
画像とかだと不可能なんじゃないかな。

Win版IEだけobjectの扱いが他と違うよね。
変な余白が付くし、枠とスクロールバーが付くし。

>>477
そうですか・・・ありがとうございます。

line-height: 1.0 にして、padding-bottom: 0.3em 等で行間をとってみたりと
いろいろ挑戦したのですが、別のところが崩れやがって挫折したぞｺﾞﾙｧ(ﾟДﾟ)

>>479
リストマーカーの代わりに、
padding-left: *px;
background: url(hoge) no-repeat;
でやってみるって手もあるけど、
微妙にリストマーカーと違うから……

特定要素中にしか現れない要素
<caption>, <tr>, <td>, <li>, <dt>, <dd>あたりって、
css2的にはブロックレベル要素扱いでいいのかな？

>>481
dtやddはブロックレベルで扱えるが、tableは違う。
http://www.fan.gr.jp/~kaz/rec-css2/tables.html
仕様書に載ってる。疑問に思うなら先ず読む様に。

>>482
いや、そこを読んだんだよ。そしたら、

>TH { text-align: center; font-weight: bold }
>CAPTION { caption-side: bottom; width: auto; text-align: left }

って例が出てたから、「あれ、text-alignが使えるってことは、
thやcaptionもブロックレベル要素扱いなのかな」と思って。

>>483
テーブル関連は例外と考えた方がいいと思われ。

http://www.fan.gr.jp/~kaz/rec-css2/visuren.html#q5
別にdisplay:blockがブロックレベル要素、と言う訳ではないのだろうね。
tableのページにはtext-alignを使うと書いてあるけど、
明記はされてないみたい。
インライン要素を含むボックスを生成する、と言う意味では
ブロックレベルだと考えていいんじゃない？

>>479
画像に余白を入れるなどして調整したらどう？

>>456
あ！そうやればtable初めから要らないですやね(^^;
さすがここの人に聞くとスキルが別次元

CSS勉強始めたばっかで、lintで出る文法エラー一個一個
潰してる途中なんですけど勉強しなおしてきます(^^ ども

>487
スキルが別次元って…。
なぜ CSS があるのかを勉強すべし。

あげるなYO!

>>489
ここ良スレだし、別にいいと思う。

>>480
どうしようもなく困ったらその手を使おうと思います。

>>486
IE5/6に合わせると、Netscape6でずれてしまいます。
N6は中心揃えしてくれるみたいです。
N6を基準にしようか……
サイトの性格上、N6/Moz使いがけっこう多そうだし

>>491
そうでもないよ。

「左揃え」「真ん中」「右揃え」意外で、
左よりちょいと半分ぐらい右よりの位置から
文章を書き出せるように、なんてことは出来ますか？
分かりにくくてごめんなさい。
お願いします。

marginでも指定しろ

いぢわる・・・。
ごめんなさい、分かりません。

＞左よりちょいと半分ぐらい右よりの位置から
ワケわからん♪

margin: 0 0 0 20%;

何が意地悪なのか俺わけわかりません（ｗ

ってか基礎覚えれ

実はtext-indentのことだったりして。

＞498
ガ━━━(ﾟДﾟ;)━━━ン！

1. 質問する
2. marginでも指定しろ、と言われる
3. 「margin」というのが何なのか判らない
4. 検索する
http://www.google.com/search?q=margin&hl=ja&btnG=Google+%8C%9F%8D%F5&lr=lang_ja

という流れに行かない理由が判りません。

＞500
聞くほうが早いと思ってんじゃない？
検索のほうが早いのに

自分の頭は使いたくないんだろうな。自分の頭で達成した方が楽しいのに。

むしろ Google 知らないんではないかと思われ。

>>456
今頃ですが、色々勉強しなおしてきてちょっと気になったので

あの後>>456を参考に手直ししてみたんですがまず>>456の指示の
--
<div class=A>←これが

<div class=B>
○○
</div>←これに
<div class=B>
△△
</div>

</div>←class=Aの終了になって欲しかったとこ
--
だと、←でツッコみ入れたみたいなことになってしまいますよね

それで<div class=A>の替わりに<p class=A>で置き換えてみたんですけど
調べていくうちに、そもそもブロック要素（<p>〜</p>や<div>〜</div>）の中に
ブロック要素を置くことは出来ないってあったんで始めから文法上まずい指定文だったんじゃないですか？
生意気言ってすいません(^^;、いま一時的にtableに戻して表現方法を模索中っす
今→http://isweb35.infoseek.co.jp/diary/zch/page02.html

あ、間違えた
http://isweb35.infoseek.co.jp/diary/zch/page01.html

>>504
>そもそもブロック要素（<p>〜</p>や<div>〜</div>）の中に
>ブロック要素を置くことは出来ないって
div の中にブロック要素置けないなんてどこに書いてあった？URL教えてくれ

疑問があれば質問する前に>>2のその他資料をよく読みましょう。

>>506
lintのエラー解説37番ですよttp://openlab.ring.gr.jp/k16/htmllint/explain.html
< div の中にブロック要素置けないなんてどこに書いてあった？URL教えてくれ

>>507
誤解してますね。
<p>〜</p>の中にはブロック要素は含めませんが、
<div>〜</div>ならば文法とも適合してます。
http://www.ne.jp/asahi/minazuki/bakera/html/reference/block#div

>>507
あ、そうだったんスか！すいませんありがとうございます(^^

CSS切り替えスクリプトってドコで配布してるんですか？

>>510
検索すれば？

http://www.google.com/search?q=CSS%90%D8%82%E8%91%D6%82%A6%83X%83N%83%8A%83v%83g&hl=ja&btnG=Google+%8C%9F%8D%F5&lr=

すんまそん、ddのインデントって、ＣＳＳの何で変えられましょうか。
text-indext:0pxとかだと、ＩＥ６では無視されてしまうのです。

超すんまそん。dlが抜けてただけにおじゃりました。

>>504
DIVの閉じは省略できないので、「←これに」のところが「←これが」の
閉じタグだとすると、文法的におかしいわけです。
ですから、class=Aの閉じは、「←class=Aの終了になって欲しかったとこ」の
ところであるとパーズされて問題ないのです。

そうなんスか、いっこ勉強になりました(^^

<ul>のマージンについて質問です。

ul { list-style-type: none;text-align:left;padding-left:0px}
↑この場合、N6ではマージンが無くなるのですが、IE6だと無くならないんです。

ul { list-style-type: none;text-align:left;margin-left:0px}
↑この場合、IE6ではマージンが無くなり、N6では無くなりません。

どっちの解釈が正しいのでしょうか？ちなみにOpera6はIEと同じです。
どっちも書けばどっちでも同じようになるので良いのですが、なんだか
気持ち悪くて・・・。
というよりそもそもこのスタイル定義自体NG?
ｐｘ単位に関してはこの際置いといて・・・。

>>516
>どっちの解釈が正しいのでしょうか？
デフォルトスタイルに正しいも何もあるわけがない。
デフォルトスタイルのレンダリング方法が、UAによって異なるのは当たり前。

>どっちも書けばどっちでも同じようになるので良いのですが
margin と padding を同時に指定すれば良いのです。

HTML文書の制作者が、
特定のUAの整形結果(デフォルトスタイルシート)に依存して、
スタイルシートを部分的にしか記述しない事。

>スタイルシートを部分的にしか記述しない事。
訂正。スタイルシートを部分的にしか記述しない事に問題があるのです。

>>516
ボックスモデルの勉強をした方がいいと思われ。
http://www.fan.gr.jp/~kaz/rec-css2/box.html
http://east.portland.ne.jp/~sigekazu/css/style.htm

marginやpaddingの初期値は、規格だと確かに0だけど、
実際にはブラウザ(User-Agent)が持っている（と見なされる）スタイルシートで
上書きされてしまうので、きっちり詰めたいのならちゃんと0と指定すること。

> ｐｘ単位に関してはこの際置いといて・・・。
つうか、0なら単位を付ける必要は無いと思われ。

秀和システムのHTML&CSS&Javascript本が新版出てますね。
IE6とかMoz/N6も考慮されてます。

Bodyのデフォルトの余白はOperaだとpaddingだよな。

>>520
これ?
http://www.shuwasystem.co.jp/~book0828/
新版出たのか。欲しいな。

>>522

ああ、そのシリーズだと思う。青い表紙です。

Opera6日本語パッチあてているもので確認したんだけれど
font-variant:small-capsを指定していると、親要素のフォント
サイズより小さく表示されるんだね。
日本語にsmall-capsなんて考えられないけどね。

>>524
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc.2ch.net/test/read.cgi/hp/991666454/

>>519のリンク先でmarginのautoの意味はなんとなく（おそらく他で指定した値に矛盾しない平均値）
になるんだということは分かったのですが集約形で書いた指定文の意味がサパーリ
例えば[margin: 0 auto;]って集約形ですか？

それとmarginとpaddingの違いは、marginは上2em下1em空けろ指定した時
指定要素が二つ続いたら指定空き同士が重なって二つの内大きい方の値2emになり
合算値の3emにはならないけれどpaddingは重ならず合算の3emになるってこと
なんでしょうか？、他にも定義的な違いとかあるんでしょうか？

> 2つの値を指定した場合、1つ目の値が上下のマージン
> 2つ目の値が左右のマージンに適用される。
ですよね、上下は0で左右がautoってことでいいんですよね・・・
margin最近使い出したんでよく分かってないんですがpaddingとの
違いが相殺するか否かしか私には気づけないんですが

>>526-527
ボックス・モデルを理解してください。
http://www.sugai.f2s.com/web/CSS/box.html

>>528
勉強させてもらいます

リストを、

画面幅広
-----------------------
・ほげ1 ・ほげ4 ・ほげ7
・ほげ2 ・ほげ5 ・ほげ8
・ほげ3 ・ほげ6 ・ほげ9

画面幅狭
---------------
・ほげ1 ・ほげ6
・ほげ2 ・ほげ7
・ほげ3 ・ほげ8
・ほげ4 ・ほげ9
・ほげ5

みたいに表示させるにはどうしたらいいんでしょうか。

>>530

li{display:inline;}
li:before{content:"・";}
li{white-space:nowrap;}

こんな感じか？　contentプロパティの対応状況がアレだが…。

>>531
ありがとうございます。
その方法だと、

1 2 3
4 5 6
7

って配置になっちゃいます。

1 4 7
2 5
3 6

って配置が理想なんです。

float を使った段組みだと、事前に決めただけの段数にしかできませんよね？
それ以前に、一つのリストで段組できるかどうかがわからない...

>>532
ｽﾏ。番号よくみてなかった。漏れのスキルではその組み方はわからない。
CSS2では無理な気がするけど…。

DHTML ならできそうな気がする．気がするだけで僕にそれを作る能力はないけど．
いずれにせよ HTML+CSS2 だけじゃ無理だと思う．CSS3 の multicol（だっけ） を待つか．

ｽｸﾛｰﾙﾊﾞｰの色とかは変え方知ってるけど
ｾﾚｸﾄﾎﾞｯｸｽの矢印とかｽｸﾛｰﾙとかの色の変え方わかりません
というか出来るの？

>>535 できない。背景色なら指定できるが。

>>534
おぉ、multicol なんてのがあるんですね。
そのものズバリってかんじだ。

でも CSS3 ってまだ正式に採用されてるわけじゃないんですよね。
マターリまつしかないのかぁ。

CSS でデザイン組むのって、C でプログラム組んだりするより遥かに面倒ですな...
互換性が無さすぎるYO!

>>537
CSSではないがmulticolはある。
http://tohoho.wakusei.ne.jp/html/multicol.htm
但しNC4のみの独自拡張タグ。

>>537
俺はCSSしかできんが、Cってそんなに面倒くさくないの！？
マジっすか！？

Cもやってみようかな・・・このままじゃ就職ないし。笑

ID 違うけど 534

>537
CSS3 のマルチコラム（草案），リンク先は神崎さんのところ
www.kanzaki.com/book/html/updates.html#css3-multicol

もし間抜けな質問だったらすいません。

サイズの違う画像を並べて配置したいのですが、その方法がわかりません。
具体的には、100*100の画像２つと、200*200の画像１つを、
--------------
|100| |
----- 200 |
|100| |
--------------
って感じで配置したいのですが、その方法がわからないのです。
tableだったらcolspanを使う感じのレイアウトです。
左寄せ（か右寄せ）だったら絶対座標で指定できるのですが、
この画像全体を中央寄せにしたいので、座標が指定できないのです。。

どなたか識者の方、力をお貸しください。
宜しくです。

--------------
|100|　　　　　|
|---|　200　　|
|100|　　　　　|
--------------
なんか表がズレました。。
わかるとは思いますが一応訂正させて下さい

>>541-2　一例ですが。
--------------
| A |　　　　　|
|---|　 B 　　|
| C |　　　　　|
--------------
<div aligh="center">
<div id="imagearea">
<img src="A.gif" alt="A" width="100" height="100" id="A">
<img src="B.gif" alt="B" width="200" height="200" id="B">
<img src="C.gif" alt="C" width="100" height="100" id="C">
</div>
</div>
#imagearea {width:300;height:200;}
#A {float:left;}
#B {float:right;}
#C {clear:left;float:left}

543さんありがとうございます。お教えいただいた方法でできました。
図々しいのですが、さらに
---------------------
| A |　　　　　| D　　|
|---|　 B 　　|-----|
| C |　　　　　| E　　|
--------------------
とする方法もあれば教えていただきたいのですが。。
思ったより難しくて苦戦しています。いじってるうちに詳しくなれるでしょうか、、

ごめん、間違った。
<div aligh="center"> →<div align="center">
で、
#imagearea {width:315px;height:215px;}
と少し大きめにしたら、狙った通りに配置される。
でももっといい方法があるかも。

>>544
それは結局、[Ａ・Ｃ][Ｂ][Ｄ・Ｅ]から成る三段組ですね。

CSSを用いた段組の作成のコツ
http://dfj.cool.ne.jp/html/column.html

あ、読んでみます。ありがとうございます

>>529
CSS話とは少し外れますが、
画面幅が狭いということは

---------------^
・ほげ1 ・ほげ6 |
・ほげ2 ・ほげ7
・ほげ3 ・ほげ8
---------------v
(画面外)
・ほげ4 ・ほげ9
・ほげ5

みたいに、途中の要素が画面の下まではみ出して
スクロールさせないと見えなくなる可能性も高いわけで、
ユーザビリティ的に問題がある気がします。
>>531 の方法のほうが、
同じはみ出すにしても順番に最後だけはみ出すので
使いやすいかと思われ。

>>548
たしかに。項目を並べたときに、自然と

・ほげ1 ・ほげ2
・ほげ3 ・ほげ4
・ほげ5 ・ほげ6

と思ってしまうかもしれないし、それにあえて逆らう必要も
ないのでは？

・・・と思いつつ、TVの番組表みたいなのを
作りたいのかもしれないですね。
それだと意地でも縦に並べたい気持ちもわかる

>549
番組表なら「表」なんだしテーブルでいいと思う

>>550
同意。データを納めるのに表があるんだからねぇ。
ところでCSS3っていつ頃勧告になるんでしょうね。
すごく期待しちゃうんですけど。
でも対応ブラウザがないね。

>>551
http://www.w3.org/Style/CSS/current-work#table
によると、まず"Selectors"が2002/06にRecommendationとなる予定。
もちろん、他にもモジュールは沢山あるから、ブラウザが実装するのは2003年以降かな……。

初歩的な質問ですみませんが、HP作らなければならなくなったのですが、
本などみるとスタイルシート を利用したほうが良いと書いてあるのですが、

その反面スタイルシートに書いてもブラウザで対応していない部分が
あるようなことも書いてあるのですが、実際のところ今のHTMLってどうなんですか？

>>553
ブラウザやバージョンによってまちまち。
特にNetscape4はスタイルシートを読み込ませただけで落ちたりする。
以前にもまして各ブラウザの各バージョンでの表示チェックは怠れない。

>>554
各ブラウザの各バージョンのチェックをする時間が無い場合、スタイルシートは使わない方がいいのでしょうか？

・CSS 使用の場合

　現在使われているブラウザで CSS にそこそこマトモに対応しているのは
　IE5 、 IE5.5 、 IE6 、 Netscape6/Mozilla 、Opera6
　(Opera は 6 以前でもそこそこ対応してるけど
　　日本語がまともに表示出来ないのでとりあえず除外)。

　NN4.x と IE3 も一応対応してるけど実装がメタメタで。
　また CSS を読み込ませない方法もあるので除外。
　IE4 はよく知らないけど一応除外(ヲイ。

　IE5 以降は極端な違いは無いのでとりあえず 5 を使うとして
　表示確認に使うべきブラウザは
　IE5 、 Netscape6 or Mozilla 、 Opera6 の 3 つ。
　(Opera はまだマイナーなので除外しても良いかも知れない)
　一応 CSS 非対応ブラウザ(及び IE3 、 NN4)での表示も
　確認するとして NN3 とか加えて、計 4(3) つ。


・CSS 非使用で、物理要素やテーブルレイアウトで作る場合

　上記 4 つに加えて NN4 、 IE3 も含めて計 6(5) つ。

それから、
CSS 使用──というか HTML4.01 以上に準拠した記述を行えば
例え CSS に対応していないブラウザでも見た目が殺風景ではあるけど
文字情報の閲覧に(少なくとも理屈のうえでは)問題はない。
音声読み上げブラウザなど非視覚系 UA にも(たぶん)対応。

また極論ではあるけど、将来
「 HTML4.01 及び CSS2 完全対応、 ただし物理要素は一切非対応」
なんてブラウザが出てこないとも限らない。
まぁ今日明日にこんなブラウザが出ても普及は無理だろうけど
自分ならとりあえず使ってみるかも知れない。

なによりも W3C が
「文書構造は HTML で、見栄えは CSS で記述」
と言ってて、 UA 制作側もそれを意識してきているので
従っておけば安全。
例え HTML4.01 以上 + CSS で正しい記述をしていて
レイアウトが崩れてしまうようなブラウザがあっても
「ちゃんとした規格がある以上、それに対応していないブラウザが悪い」
と胸を張って言える。

ただし「胸を張って云々」はやっぱ個人サイトに限るかな。
どうして「HP作らなければならなくなった」のかは知らないけど
もし企業とかのサイトを作るのならば
NN3 や NN4 でもそこそこ見栄えのするサイトを作らなければ
ならないかも知れない。

>>558
でも、http://www.harmonate-town.com/
こういった例もあるわけじゃないですか。
結局は、いかにクライアントに理解してもらうかなんじゃ
ないのかな？
そういう意味では、「紀野と」なんかじゃこのようなサイトを
作ることないでしょうけどね。

>>552
＞まず"Selectors"が2002/06にRecommendationとなる予定。
＞ブラウザが実装するのは2003年以降かな……。
IEなんかは草案からのフライング対応が十八番だから、(rubyとか縦書きとか)
次のバージョンでは対応してるって可能性もないとは言えないと思う。
まあ、次のバージョンがいつ出るかっていうとアレだが(わら

カーソルについて質問です。
以前は

A:link
{
cursor:n-resize;
text-decoration:none;

}

A:active
{
cursor:n-resize;
text-decoration:none;

}

A:visited
{
cursor:n-resize;
text-decoration:none;

}

A:hover
{
text-decoration:underline , overline;
color:magenta;
background:aquamarine;
cursor:n-resize;
}

とするとリンクにポイントするとカーソルが↑のような表記になったのですが
IE6にしてからはサイズ変更のアイコンになってしまいました。
これはどうしたら直るものなのでしょうか？

横れすでｽﾏｿ。&& IE6はよく分からんが、
カーソルって基本的に　（以下・時間がないので省略）

>>561　"n-resize"の意味って分かってっる？

>>550 >>551
確かに。でも、テーブルにするとメンテナンス性悪いやん。
縦のテーブルがあれば・・・

>>561
>>562-563の意訳は「カーソル変更するなｳﾞｫｹﾞ!!」です。
「n-resize」は「上方向へのサイズ変更を示すカーソル形状」です。
英語くらいできた方が良いのでは。

あと、a:hoverなカーソルはpointer(デフォルト)にしておいて下さい。
Winではpointerもdefaultも矢印ですが、
マックではふつうpointerが「手」の形状になるので、
これを変更されるとリンクの区別が付きにくくなってﾏｼﾞうざいです。

無意味なカーソル変更は初心者丸出し。

なぜ意味を知らずに値を与えるということがあり得るんだろう？

>>566
「blockquoteは字下げを行うタグです」

＞567
？？？

>>565

わかりました。
どうも私は解釈を間違っていたようですね。
Macのことは全然頭に入れてませんでした。
出直してきます。
因みにあのカーソルのものはwww.tanasan.comというところでソースが載ってたので
そのまま載せただけです。当時はそんな事知らなかったもので、ろくに意味もふかく
気にしなかったのです。

>>568
そう解説してる本/サイトは少なくとも要素の意味なんて考えてないんだろ。

＞570
あ、なんとなく理解出来た。ありがとう。

IEでTABコードを表示する方法を探しています。
PREタグでかこむのも方法ですが、ソースコードならこれでも良いのですが、
文章などが混じっていると、ブラウザのウィンドウサイズに合わせて文章を折
り返してくれず、横スクロールバーが出てしまうのでいやです。
スタイルシートを使うのも手ですが、white-spaceのpreはIEではまだ実装さ
れていないです。
TABをスペースに変換してやるのも手ですが、その画面をコピペすると当然、
TABがスペースの集合になっちゃうので、これもいやです。TABはTABとして
扱いたいんです。
TEXTAREAフォームをリードオンリーにして、そこに表示させる手も考えまし
たが、これもブラウザのサイズに応じてフォームサイズが可変しないのでい
やです。

一晩考え試行錯誤しましたがわかりませんでした。
そんなわけで、なんかいい方法分かる人いませんか？

>>568 >>570
いい加減な解説はいくらでもありうるってことやね。
CSS勧告ぐらい見りゃいいのになあ。

>>572
pre {
width: *%;
overflow: auto;
}
タブをタブとして扱うならpreを使うしかない。
コピペされることを考慮してるってことはソース関係じゃないの？

541です。あれから色々調べてみました。
結局のところ、tableやdivで現状では使えるalign="center"に相当する機能は、
CSSでは場当たり的な方法でないと実装できないということみたいですね。
tableで場当たり的デザインをするのに飽きたので、CSSを勉強しようと思ったのですが、
いきなり壁にぶつかってしまって困っています。
CSSからしてみれば、Webページは左寄せにしろ、中央寄せにはするな、という事なんでしょうか。
んー、難しい。もうちょっと勉強してみます。

>>575 はい。せめて、もう少しでいいから、勉強してください。

>>574
さっそくありがとうございます。
ソース関係の表示ですが、解説本のように、説明もついてるし、
ソースもついているようなものの表示に使いたいのです。

pre {
width: *%;
overflow: auto;
}

を試してみましたが、残念ながらうちのIE5.5では、
望んでいるようには表示されませんでした。
でもありがと。

＞577
まさか、
width: *%;
↑このまま記述したんじゃないよね？

>>578

width: 100%;
width: 200pt;

などとも指定してみましたが、なにか？

＞579
急に態度変わるなぁ。

今、試したけどムリっぽいね。
PRE要素をインラインにしてタブだけを囲ってみたけど
これでもブラウザサイズに対しての改行はムリだった。
（囲ってないとこの改行ね）

>>577
PREだと溢れる分はどうしようもない。
ページに横バーが出ないだけマシだと思って。

TEXTAREAを使うのなら、
textarea {
width: *%;
}
これでサイズは可変になるよ。あんまりお勧めしないけど。

>>581
なかなか良い方法だと思いましたが、なんというかこー、
いまいち割り切れないものが残りますね。
でも一つ勉強になりました。ありがと。
やっぱIEだと無理なのかな。

>>575-576
実際、みなさんはセンタリングをどうやってますか？
私は
.center {
margin-left:auto;
margin-right:auto;/*NN6,Opera,MacIE・WinIE6標準準拠モード向け*/
text-align:center;/*NN4,WinIE5.5,MacIE・WinIE6互換モード向け*/
}
です。但しこれだとtext-align:centerの所為でブロックだけでなく
中の文字も中央寄せになりますが、まだまだ多数を占めるWinIE5.5以下の
閲覧者のためには仕方が無い。
あと、NN6/Mozilla独自拡張のtext-align:-moz-centerもありますが、
text-align:centerとmargin:0 auto;を共に指定してる以上無意味ですし。

場合によるけど、こういうのならやったことある。

body{
text-align: center;
}

div{
width: *px;
margin-right: auto;
margin-left: auto;
text-align: left;
}

こういうときどうしたらいいんでしょう。

/* in basic.css */
body{
background-color: #7cc; /* A */
color: #000;
}


/* in article.css */
div.navigator{
background-color: #fff;
color: #7cc; /* B */
}

A と B の値を同期させたいんですけど、
いちいち両方書換えるしか方法ないんでしょうか。
変数使いたい....

>583
で .center p{text-align: left;} とかやる．

>>585
今ちょっと眠いから見当違いのこと言うかもしれないが我慢しれ。

色の管理が面倒だということなら、
レイアウト用のシートと配色用のシートに分けれ。
あとは置換でｲﾊﾟｰﾂだ。

例のヤツで初めて自分のCSSファイルチェックしたら
指定された背景色(background-color)に対応する前面色(color)が指定されていません : BODY
と出ました。もっと下の階層(要素)に指定してあれば問題なさそうなのにわざわざbodyにもcolor
を指定するのはなんででしょう？厨房な質問でスマそ

>>588
スタイルシートが、
body {background: black;}
p {color: white; background: transparent;}
だとすると、
<h1>ごるぁ</h1> とか <pre>藁</pre>の色が不定になるからだと思われ。
なんてったって、カスケーディングですので。

>>572
＞IEでタブコード
ここにタブを書いてみます「 」←ここにタブがあります
&#9;ね。文字参照。これじゃタブにならないの？

>>590
IEだと だとタブは表示されないよ>>590
$a = 0;
$b = 0;

>>591
WinIEは対応してないのか？　MacIE5ではきちんとタブになるんだけど…。
WinIEだとどんな表示になるの？　そのまま&#9;って見えるのか？

>>592
だと、WinIEでは無いものとみなされるようです。
スペースにもならない。
バージョンよって振る舞いは違うかもしれないですが。

>>593
ふーんそうなのか。
役に立てずｽﾏｿ。

いえいえ、親切にありがと>>594

すみませんが、CSSのbehaviorについて
詳しく説明されてるサイトって無いでしょうか？

検索したんですが関係ないものばっかり出てきてしまって・・・。

>>596
「ビヘイビア」で検索

＞597
ありが�d。
そか、英字じゃダメか。チクショー（わ

DHTML BehaviorってCSSのと同じ使い方なんですか？
何度もすみません。

600

しつもんです。
CSSの「width」の働き方は、IE5とIE6で違うんですか？

age

>>600

ここの「ボックスのサイズの指定方法の違い」を参照。

http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp

>>602
ありがとうございました。
どっちに合わせたらいいんだろ。
うーん…。

>>603
お勧めはXHTML（XML宣言あり）
＋
-moz-box-sizing: border-box;

macIEはどーでもいいのか・・・
box-sizng:border-box

box-sizing:border-box;
ってIE6標準モードでは効くんだっけ?

>>606
効きません。
モードによって自動的にbox-sizingは切り替えられますが、
box-sizingプロパティ自体には未対応です＞IE6

とすると、
-moz-box-sizing: border-box;
box-sizing: border-box;
を書いておいてもIE6標準モードでだけ意図しない表示になっちゃうのか…
ううむ

hr を幅 40% にして左寄せしたいんですが上手くいきません。

<div class="note">
<hr />
<ul>
<li>hogehoge</li>
<li>hagehage</li>
</ul>
</div>

div.note hr{
width: 40%;
margin-left; 0em;
margin-right: auto;
}

Mozilla は上手くいくんだけど、 IE5.5 だとセンタリングされてしまう...

>>609
IE5.5ならば、text-align:left;で、どうですか。

-moz-box-sizing: border-box;とかの使い方を
学べるサイトってどこでしょうか？

>>610
おぉ、勉強になりました。

>>611
http://www.cc-net.or.jp/~piro/tips.lzh

たて続けですみません。

li の背景色を一松模様にすることってできませんかね。

<ul>
<li>背景緑</li>
<li>背景黒</li>
<li>背景茶</li>
<li>背景緑</li>
<li>背景黒</li>
<li>背景茶</li>
...
</ul>

一個一個にclass=..つけるのは面倒です...

>>614
市松模様は、CSS3の実装を待って下さい。ずっと先になるかもしれないけど。
全部にclassを振らないでも、li{background:green;}とでもして、
あと二種類はクラスにして上書きすれば、少しは手間が省けます。

>>606-613
みんな既出です。
http://pc.2ch.net/test/read.cgi/hp/1005047493/56-62
http://pc.2ch.net/test/read.cgi/hp/1005047493/403-413
過去ログ活用しようよ。

1.CSS＝スタイルシート
2.CSS≒スタイルシート
3.CSS≠スタイルシート
どれですか？
答える気にならなければ無視して下さい。

つーか答えようがないんだが。
問題の意図がわかるようでわからん。

>>617
CSSはCascading Style Sheetです。
世の中にはJavaScript Style Sheetなんてものもあります。
が、Web制作の世界でスタイルシートと言ったら十中八九CSSのことです。
セロテープ（商標名）と言ったら類似商品を総称するみたいなもんです。

XSL(Extensible Stylesheet Language)なんてのもある。
つまり

スタイルシート ⊃ CSS

ということです。

>>619-620
なるほど。
という事は、少なくとも「このスレでは」スタイルシート＝CSS、と解釈してOKな訳ですね。
ご回答有り難う御座いました。

CSS2仕様書邦訳がNot Foundになるよ。↓
http://www.fan.gr.jp/~kaz/rec-css2/
困るなあ。
まあこっちもあるけど。↓
http://www.y-adagio.com/public/standards/tr_css2/

>>622
Googleのキャッシュやウェイバックマシーンを活用しる!!

CSSにCSSを読み込む方法ってNN6だと対応されてるんでしょうか？

>>624
@importのこと？　勿論、大丈夫。
NN6は最もCSS対応の進んだブラウザですよ。
cf.http://hp.vector.co.jp/authors/VA022006/css/media.html#at-import-rule

>>625
素早い解答、ありがとうございます。
自分で確認しようにも私のPC、何故かNN6が上手くインストールできないのでちょっと不安だったんです。

亀ﾚｽ、ｽﾏｿ。

＞611
ありがとうございます。今から熟読します。

＞616
すみません。次からは検索かけてから質問します。

テーブルとCSSのレイアウト論争みたいなスレッドないですか？

>>628
枯れた議論ではあるけど、やりたいなら

Strict-HTML スレッド 2.0 (W2C Recommendation)
http://pc.2ch.net/test/read.cgi/hp/1008380243/l50

がいいと思うよ。

>>629
ありがとうございます。
確かに枯れてる…。

floatの効果がよく分からない（Ｔ-Ｔ）
上で出てる段組の解説サイトってもうかなり分かってる人を前提に話してるんだもん

>>631
<img align="left"
とか使ったことない？

>>631
他に解説サイトを検索で探したら？
http://www.sugai.f2s.com/web/CSS/display.html#float

>>631
Academic HTMLを通して讀み給へ。
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocs04.htm
http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs3-12.htm

、ありがとう！　（＾＾
上のサイト解読するには実力不足だから>>634のひとに教えてもらったトコで
勉強しなおしてきます、どもすいません

いまだにフォント指定の仕方がよくわかりません。
本文全部のフォントカラーなどを指定するのはどうすれば良いのでしょう？
リンクだったら
A:link{color:7B68EE;}
って書けばいいのはわかるんだけど。
本文内の一文（タイトルとか）を指定する方法はわかるんだけど。
超基礎であろうフォント指定がいまだわからないのです…。
どなたか教えて下さいm(__)m
フォント名はDHP平成明朝体W3で、フォントサイズは小
（8pt？xx-small？？）でのサンプル希望。

>>636
BODY { font-family: 'DHP平成明朝体W3'; font-size: small; }

>637
ありがとうございます！
普通にBODY内に書けば良かったんですね。
あまりに基本的過ぎなのか、何処を探してもサンプル
載ってなくて困ってたんです。
早速使わせて頂きます〜（礼

border の四辺の長さを変えることって出来ますか?

+----+
|ハンヌラ党
+-----------+

みたいな感じで。

>>639
無理。ボックスはあくまで長方形。
違う長さのボーダーが欲しければ違うボックスが用意されてないとしょうがない。

追記。
>>639みたいのであれば上の線はbackgroundでやると言う手もある。
border-left、border-bottomは普通に設定して、
同じ太さ、適当な長さの2色GIFを
background: url(gif) no-repeat 0 0;
で指定してやるといい。
ただ、この場合上の線のサイズpxに固定されてしまうけど。

ダミーの要素を用意すればできそうだけど、そのためにダミーを入れるのもアレですな。

ただ、利用できそうな要素があるならそれを利用するのはいいだろうけど。
その「ハンヌラ党」のところにspanを指定してborder-topつければいいんでない？

>>639
#hannu{border-top:1px;border-bottom:1px;border-left:1px;}
#ratou{border-bottom:1px;}
<span id="hannu">ハンヌ</span><span id="ratou">ラ党</span>

とかにすればできるけど、ソースが汚くなるなぁ。

>>640-643
うーん、前後に hr 入れて長さ変えるとかの手段とるしかないのかなぁ..
でも意味の無い要素が出てくるのって気持ち悪いですよね...

とりあえず、一つの要素でやるのが無理だと理解出来ただけでも助かりました。

ありがとうございます。

<div class="header">
<h1>ほげほげ</h1>
<p class="navi"><a href="..">↑</a><a href="..">↓</a></p>
</div>

みたいなのを、

+-------------------+
|ほげほげ ↑↓|
+-------------------+

みたいにしようと思って以下のような CSS を書いたんですけど上手くいきません。
float した部分って親のブロックからはみでるんですね...

+-------------------+
| ↑↓|
+ほげほげ-----------+

こうなってしまう...


div.header {
width: 100%;
background-color: #f00;
text-align: right;
}

div.header h1 {
float: left;
}

div.header .navigator{
background-color: #0f0;
}

navigator -> navi と h1のmargin / padding 設定。

>>646
げふん、navigator -> navi はコピー時のミスです...

h1 の margin / padding を 0 にしても、
p の高さが低くてだめでした。

p の margin とか padding をいじって高さを高くすれば OK ですが、
どれぐらい高くすればいいかいまいちわかりません。
h1 のフォントサイズに依存すると思うんだけど...
うーん...

h1 のサイズを **em ってカンジで明示的にしておいて
それにあわせればよろしいかと。

>>648
うー、やっぱそれしかないんですかね...
うーーうーーうーー...
あんまり font-size はさわりたくなかった...sage

>>645
回り込み（float）させる要素にはwidth指定が必須です。

>>650
改良してみました。が、さっぱりです...
高さがぁ。
いい加減面倒になってきた...

<style>
div.header{
width: 100%;
background-color: #f00;
text-align: right;
}

div.header h1{
float: left;
width: 80%;
text-align: left;
}

div.header div.navi{
background-color: #0f0;
}
</style>

<div class="header">
<h1>ほげほげ</h1>
<p class="navi"><a href="..">↑</a><a href="..">↓</a></p>
</div>

あきらめました。ここだけテーブル使います。

+---------------+
|AB← →C|
+---------------+
<div class="box">
<div class="left">A</div>
<div class="left">B</div>
<div class="right">C</div>
</div>

みたいなことを簡単にできることを期待してたんですが。

>>652
違うな...
<div class="box">
<span class="left">A</span>
<span class="left">B</span>
<span class="right">C</span>
</div>
でした。

>>651
div.header div.navi{
background-color: #0f0;
}
を下記に改良すべし。
div.header p.navi{
background-color: #0f0;
float:right; width:10%;
}
float:leftでもよい。ブロック要素を改行分下げずに回り込ませるには必要。

もうちょっと頑張ってみます。

>>654
上手く左右に分配されました。
でも div.header 自身が死んでます。
中の要素が全て float だと、空だってことになっちゃうんでしょうか。

>>655
使ってるブラウザは？
WinIEならdiv.headerの背景色がh1やdiv.naviも包含してくれる。
（ＣＳＳの仕様からすれば正しくないが）
ＮＮ６ならdiv.header{position:relative}を追加すれば同様に。
（正しいのかどうかわからない）

floatでなくてposition:absoluteを使った段組の応用でもいい。

>>656
NN6系です。
position: relative; を入れたらうまくいきました。
ほんとにほんとにほんとーーーに感謝してます。
あなたは神です。

>>656
一応、参考まで。
ttp://sigekazu.vis.ne.jp/file/dir34/column.html
ttp://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?c=r&n=321
http://pc.2ch.net/test/read.cgi/hp/991666454/273-274

>>658
読みました。なんかテーブルに流れそうです...
頭痛い...

>>651
別解を以下に。
.header{
width: 100%;
background-color: #f00;
position:relative;
}

.header h1{
position: absolute;
width: 80%;
text-align: left;
}

.header .navi{
margin-left:82%;
width:15%;
background-color: #0f0;
text-align: right;
}

>>651
改良版。これでも同じことになるはず。
.header{
width: 100%;
background-color: #f00;
position:relative;left:0;top:0;
height:2em;
}

.header h1{
position: absolute;left:0;top:0;
width: 80%;
padding:0;margin:0;
}

.header .navi{
position:relative;
left:82%;
width:17%;
background-color: #0f0;
text-align: right;
}

>>651
これが一番簡単かも。
.header{ background-color: #f00; }
.header h1{ display:inline;}
.header .navi{
display:inline;
background-color: #0f0;
}
naviの右寄せはh1にmarginでも設定するか。

こんなことを聞いてはいけないのかもしれないのですが、
ttp://homepage1.nifty.com/fujitay1/index.html
このトップページのCSSがオンの時のInformation、Othersの部分の
CSSがどうなっているのか分かりません。
分かる方がおられましたらよろしくお願いします。

>>663
>CSSがオンの時のInformation、Othersの部分の
訊ねたいのが背景色なのかborderなのかa:hoverなのかワカラン。

>CSSがどうなっているのか分かりません
ソース見て、外部cssファイルをダウンロードすべし。

>>663

h2.menu-title2{
font-family: "Verdana","Helvetica",sans-serif;
font-size: 1.0em;
font-weight: bold;
text-align: center;
line-height: 1.4em;
padding-left: 0.0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
margin-left: 0.5em;
margin-right: 0.5em;
background-color: #ffd000;
}

レスありがとうございました。
それと、質問の仕方が悪くて大変ご迷惑をおかけしました。
申し訳ありません。

>>664さん
伺いたいのは、上記の部分の位置に関してです。
テーブルを使わないで、どうやってInformationとOthersを表示しているのかが分からないのです。
クラスはおそらく、"menublock"の部分だと思います。
外部CSSはたくさんあるようで、自分がダウンできた3つ（top_ie4.css、base.css、fugure.css）
には該当の所がなかったのです。

>>665さん
本当にありがとうございました。

これか？top.cssより。

div.menublock{
width: 49.99%;
float: left;
}

>>665さん
ありがとうございます。おそらくそれだと思います。
さらに伺ってしまいますが、
どうやったらそのCSS(top.css)を出すことができるのですか？
自分はスクリプトの自動振り分けが理解できなかったので、
iCabのCSS表示機能を使いました。

よくわからんけど、キャッシュを漁ったらみつかった。

なんか、ブラウザ判別スクリプトと、その結果によって
違うcssを食わせるスクリプトを併用してるようだけど、
IE6じゃ段組にならなかった・・・（あとでIE5で見て気がつく）

>>665さん
ありがとうございました。レス遅くなってすみません。

クラス定義するときって、要素名入れてる？

p.section{...}

.section{...}

どっちがいいんだろう。

タグごとに使い分けたいのなら入れる。
使いまわししたいのなら入れない。

>>671
便乗質問ですが、要素名入れたほうが、例えば参照が速くなるとか、
そういうあたりのメリットはありますか？

あの、ジオシティーズとかにメモ帳で書いたcssをアップするにわどうしたらいいんでしょうか？超初心者なのですがよかったらおしえてほしいです

<ul>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

みたいなのを、

りんご+ごりら+らっぱ

みたいに表示したいんですが、これは CSS レベルで対処可能でしょうか。

>>674
普通にFTPとか
ファイルマネージャのEZファイルアップロードツールとかで
転送できます。

>>675
li { display: inline; }

でどう？

できました！んでですね、text-decoration:none;てしたんですけど、下線が消えないんですけど、なんででしょうか？

>>675
li { display: inline; }
li:before { content: "+"; }
li:first-child:before { content: ""; }

>>679
ありがとうです。

+の代わりに画像表示したくなった場合って
どうしたらいいんでしょう。

li:before { content: url(image.gif); }

内容生成プロパティー（content:）や、擬似要素の:beforeや:after等は、
まだMozilla/NN6位しか対応してなくてWinIEが実装してないので、
指定しても絵に描いた餅にしかなりませんよ。

CSSの主旨に著しく反するかもしれないのですが、
任意の画像をある位置を基点に相対位置で表示したい場合には
どうしたらいいのでしょうか？

ある位置というのが、閲覧環境によって絶対座標が
変ってしまうような場合で、この文字の右に画像を
表示したい、などという場合です。

最初からレイアウトに画像を組み込んでおけばいいのですが、
画像は状況に応じて適宜表示したいので、CSS使ってるです。

>>682
今更何を言い出すやら。

初心者質問板からここに誘われてきました。

ｶﾞｲｼｭﾂだったらすみません。
背景画像で、左側と、上側、下側に画像を挿入して
フレームで囲ったようなページを作りたいのですが、
例示：
http://home4.highway.ne.jp/radicon/
　の、"Plain"のスタイルのような感じです。

background のrepeatを使用すると、xかyかどちらかしか出来ません。
三つとも表示させるにはどのようにしたらよいのでしょうか？

>>685

画像は左上と左下のカーブの部分にしかないみたいよ。

>>686
となると、あれはどうやってあるんですかねぇ？

結果的にああいう感じになれば良いのですが・・・

関係ありそうなのはこのへんか？

body{
font-family:"ＭＳ Ｐゴシック","Osaka",sans-serif;
background:#eeeeee;
color:#555555;
margin:0;
padding:0;
}


左上のカーブ

#bodyfake{
margin:40px 0 30px 15%;
padding:2em 1em 0 0;
background:white url("../Theme/plain/corner_t.png") no-repeat;
height:expression('1px');
}


左下のカーブ
address{
font-family:"Arial";
text-align:right;
background:url("../Theme/plain/corner_b.png") bottom left no-repeat;
padding:100px 0 1em 0;
clear:both;
}

>>688
あ、スタイルシートの場所はJSからのファイルから行けるんですね。
すみません、ありがとうございます。
なんとか検討してみます。

td { text-align: center; margin-right: auto; margin-left: auto}
これを追加したら、ＮＮ4.7では<center>タグを無視してテーブルが
全部左に寄ってしまうのはなぜなのでしょう？
テーブル内ではセンタリングされているのですが。

>>690
中味でなくテーブル全体を中央揃にしたいんでしょ？
セレクターをtdでなくてtableにしてみよう。

autoは６からじゃなかたけ？

>>690
どこのtdに指定していてそれがどこのcenterと関係してるのか知りたいが、
tableをセンタリングさせたいならtdに指定しても無駄だぞ。
て言うかtdのmarginは基本的に無意味なんだが。
……え、centerタグ？
取り敢えず、そのtableとcenterのHTMLとCSSソースをコピペしてくれ。
何か無茶やってる気がする。

NN4じゃautoが効かないから<center>使ってテーブルをセンタリングした。
各セル内部もセンタリングしたいからと align:center で指定してみたら
NN4ではテーブルがセンタリングされなくなった…。

NN4ならそんなもんなんじゃないのかなあ。
<table align=center>とかどう。NN4だけのためにそこまでやる必要があるかどうかだけど。

スタイルシートをHEADに書いて
BODYの一カ所だけに適用したいときに
何か目印つけますよね？
あれって、なんでしたっけ？

>>695

idのこと？

>>696
そう！それです！

<!--
filter:alpha(opacity=80) }
-->

↑これを１つのテーブルだけに適用したいのですが
どうこにidをつければいいんでしたっけ？

まちがえた
これです
table {
　 filter:alpha(opacity=88);
}

基礎から勉強するよろし。

table#abc {
　 filter:alpha(opacity=88);
}

で

<table id="abc">

もっともこの場合classのほうがいいかもしれん

>>699
ありがとうございます！！
休み中に基礎から勉強したいと思います

>>694
だから、そもそもtdに指定しているのが間違いなの。
marginを指定するならtableに、
text-alignを指定するならtableの親要素に。

だってさ。
>>690

CLASS名って日本語でも可ってどっかにあったんですけど、
実際のところどうなんすか？
何か不具合とかあります？

>>703
既出かもしれませんが、一応。
HTML 2.xのclass属性はSGML NAME tokenなので、日本語は使えません。
HTML 4.0/4.01のclass属性はcdata-listなので、日本語も使えます。
XHTML 1.0のclass属性も同上。
XHTML 1.1/XHTML Basicのclass属性はNMTOKENSなので、日本語は使えません。
#Modularization of XHTMLで、class属性の定義が変更された為(CDATA→NMTOKENS)。
http://www.kanzaki.com/docs/html/xmodules.html#s_cmnatts
参照。

但し、CSSで使えるのは基本的にASCII文字だけなので、
実際にCSSで日本語を使うには、\(U+005C)でエスケープしてやる必要があります。
p.\65E5 \672C \8A9E { color: red } /* 「日本語」をエスケープした例 */
対応しているUser-Agentについては
http://sigekazu.vis.ne.jp/char/sjis/charset.htm
参照。

【結論】
HTML 4.0/4.01 or XHTML 1.0を宣言した文書に於いて、スタイルシート側でエスケープをすれば
使えますが、よっぽどのことが無い限り、止めておいた方が賢明かと存じます。

>>704
ありがたく存じます。

やめておくことにします。

>>704
XMLのNMTOKENSは日本語使えるぞ。
それから、@charset構文で日本語コードも使えるので、
セレクタ中の日本語も問題無し。仕様書的には。
ただし、誰もやらないので不具合はほとんど報告されていない。
最新のMozillaやIEは問題無いと思うけど。

>>706
そうでした……。
適当なこと書いて申し訳ありませんでした>>705氏
味噌汁で顔洗って、修行し直して参ります……。

td { text-align: center; margin-right: auto; margin-left: auto}
について質問させてもらったものです。皆さんありがとうございます。

もともとＣＳＳは使わず<body>全体を<center>タグのみで中央揃えに
していたのです。ところがＣＳＳを突っ込んだ途端、ＮＮで中央に行かなく
なった･･･という訳です。テーブルも、セル内部も全て中央揃えにしたいのですが
<table align=center>ではうまくいきませんでした。ＣＳＳを使わず
各tdにいちいち位置指定してやれば両方でうまくいくのですが。
うう、くじけそうです。

>>706
>>707
どちらにせよ、やめとくのが無難ということで。

で、ついでにもう一つ質問があります。
textareaにVerdanaとかのフォント指定をすると、
Macで文字化けするって聞いたことがあるんですけども。

検索してもよくわかんなかったんで。

>>708
table自体の中央寄せはtableへの横marginをauto、
tableの親要素にtext-alignをcenter。
セル内の中央寄せはtdにtext-alignをcenter。

http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html#NN4

……何で頑なにソースを見せない？

＞＞710
すいません、忘れてました。
ソースはこんなカンジです。
とりあえずＩＥ・ＮＮとも中央にきましたが、
ＮＮのほうはセルの中身が左寄せになってます。

<html>
<head>

<style type="text/css">
<!--
table { text-align: center; margin-right: auto; margin-left: auto}
-->
</style>
</head>

<body>
<center>

<table width="300">
<tr>
<td colspan="2">　</td>
</tr>
<tr>
<td><img src="img1.gif"></td>
<td><img src="img2.gif"></td>
</tr>
<tr>
<td width="150"><b>テキスト１</b></td>
<td width="150"><b>テキスト２</b></td>
</tr>
</table>
</center>
</body>
</html>

ここへあらたに
td { text-align: center; margin-right: auto; margin-left: auto}
を追加すると、ＮＮだと全体が左に寄ってしまいます。
やっぱり無理にＣＳＳ使わないほうがよいでしょうか？

>>709
MAC IEのどのバージョンか忘れましたが、
font-familyの先頭にVerdanaなどの英語フォントを指定すると、
フォームの入力を促す要素関連で文字化けした、と記憶しています。

フォント指定の順番で、何より最初にMACにある日本語フォント
例えばOsakaなどを入れてやると文字化けは回避できるはずです。

>>711
だから何でtdにマージンを…。

>713
....

>711
そりゃどうも N4 のバグっぽいなあ，と思った．以下全て，
td{text-align: center;} を入れるとテーブル全体が左によってしまう．
<div align="center">
<div style="text-align: center;">
<table align="center">

何か間違っている気がしないでもないが，とりあえず，CSS は使わないってことで．

>713
試してみたけどそこは本質じゃない．

すいませそ。
ガソバッタんですが解決出来なかったので質問します。

TDにIEおまけのfilter:Alphaをかけてスケさせました。
でもTD内に含まれるIMGはスケさせたくないのです。
このスケ解除の方法はあるんでしょうか？

TD{filter:alpha(style=0,opacity=80,)}

試しにIMGに
opacity=100
とやってみましたがTDの80を基準にしたみたいでスケでした。（逝

さらにIMGに
style=1,
opacity=100,
finishopacity=100,
startx=0,
starty=0,
finishx=0,
finishy=0,
とかやって「無かった事に」しようとしたんですがﾔﾊﾟｰﾘスケでした。（逝

どうか助けて下さい。

背景画像のリピートなんですが、
部分的にリピートさせるってことは出来ますでしょうか。

□□□▽▽▽▽
□□□▽▽▽
□□□▽▽
□□□▽

リサイズすると、

□□□□□□▽▽▽▽
□□□□□□▽▽▽
□□□□□□▽▽
□□□□□□▽

のように、□の部分だけ増えるみたいな。

>>717
たぶんムリ。
どうしてもってことならば、□と▽とでボックスを分けて
それをbody全面に絶対配置しz-indexも指定するとか、かな。

印刷用のスタイルシートを書くときってどうしてます？

私の場合、ナビゲーション部分は印刷時はいらんだろうってことで、

<div class="navigation">
<a href="prev.html">戻る</a>
</div>

で、

.navigation { display: none; }

ってしてます。

他にこうしたらいいぞーみたいなのってありますか？

>>719
font-size:10pt;
ウェブと違って印刷では文字サイズ固定で弊害が無いから。
それからバックグラウンドが暗い色で白抜き文字なんかの場合、
インク代が無駄だから*{background:white none; color:black}にする。
あと無料スペースでは広告部分にIDを振って、#adv{display:none;}。

で、印刷すんの？きみら

>>721
しないんすか？
やったら文章多いとこって結構印刷しますが...

>>721
技術情報系は印刷するねぇ。

すみません、旧スレに書いてしまいました。

カーソルをCSSで、<body>等のところはcrosshairで、
<A>の上だけはe-resizeになるように設定しています。
そこでユーザーサイドクリッカブルマップを使っているのですが、
その上のクリックできる部分でもカーソルを変えたいと思い、
<area 〜（省略）〜 style="cursor:e-resize;">としたのですが、
カーソルは変わらずcrosshairのままです。
念のためと思い、<map>にも同じ指定をしたのですが変わりません。
カーソルがデフォルトのままなら、普通に手の形になるのに…。
すみませんどなたかアドバイスをいただけませんか？
試したブラウザはＩＥ5.5とＮＮ6.2とＮＮ4.73とOpera6.0です。

>>724
見たよ。前スレの流れからして絶対ネタだと思った。質問自体も。
「カーソル変えるなｺﾞﾙｧ(ﾟДﾟ)」
って答えが返ってくる前に逃げたほうが良いかと。

＞724
カーソル変えるなｺﾞﾙｧ(ﾟДﾟ)

ほら言わんこっちゃない。

>>724 こちらへの登録をお勧めします。

CSS/DHTMLバグ辞典スレッド ver2.0
http://pc.2ch.net/test/read.cgi/hp/991666454/l50

>>725
済みませんでした…。

>>728
わかりました。
どうもありがとうございます。

Alpha解除は出来なそうなんでしょうか・・・。

>>730
ブラウザの実装から考えると、それはちょっと辛いのではないかと思います。
思うだけなのでsage。

>>731
思うだけでも返答して頂いてありがたいです。
だってレス０なんですもん。
やっぱり難易度高いんでしょうか。（ﾅｷ

一応sage。

>716=730=732
たった今、テストしました。
出来ましたよ。

TD { filter: alpha(〜);}
IMG {
　　position: relative;
　　filter: alpha(style=0,opacity=100,finishopacity=100,);
}

って感じです。
相対位置指定を書けば桶でした。絶対位置指定でも桶のようです。

では、頑張って下さい。

見てくれてなかったら寂しいのでageますね（ｗ

そうそう、ヒントは
「<DIV> <SPAN>にフィルタを設定する場合には
position属性でrelativeかabsoluteと、
width属性、height属性を設定する必要があります」って
書かれてたからです、と。

>>734
可能だったんですね！！！！
今やってみましたが完璧桶でした！！
すごい感動です感謝の気持ちでｲﾊﾟｰｲです！！

＞見てくれてなかったら寂しいのでage
＞「<DIV> <SPAN>にフィルタを設定する場合には
＞position属性でrelativeかabsoluteと、
＞width属性、height属性を設定する必要があります」
わざわざageて頂いた上にヒントまでーー！！
ホントありがとうございました！
もっと勉強して精進します！！

　　タイトル
　あいうえお
　あい
　あいう
という風に、
タイトルは中央、
下の3つは、タイトルの左に一文字前のところから表示されるには
どうすればいいですか？
文字の大きさを固定すればいけるかもしれませんが、
文字のサイズは%で設定していて、ブラウザから変えられるようにしています。
どのような文字サイズでも、下の3つは、タイトルの最初の文字の左に一つ前のところから表示させたいのです。
margin-leftや、border-style:solidなどを使って色々しましたが、出来ませんでした。

知っている方いらっしゃいましたら、教えてください。

＞736
タイトルと下の文が同じ大きさなら
margin-left: 1em
で可能。

後は眠いから任せた・・・

追記　タイトルにマージンね。

>>736
タイトルや下の三つの文字列の長さは決まってる？
それから、下の三つは始点がタイトルの一文字前なのはいいけど、
終点はどこ？　ウインドウの端？

タイトルの文字列の長さが決まってるなら下三つのwidthをそれより
2em大きくしてブロック要素をセンタリングさせればいい。
それで終点もタイトルの一文字後ろになる。

タイトルの文字列の長さも決まっていないなら、
そもそもセンタリングさせるべきかどうかも疑問。
下三つのよりもmarginなりtext-indentなりで1em下げる方がいい。

どこかの文字列の長さに自動的に併せるなんて芸当は
CSSには出来ないので期待しない様に。

なんか、他の要素の大きさとかぐらい参照出来たっていいのになあって思うよ...

line-heightで行間指定した行に画像をつけると、行間が元に戻ってしまいます。

あいうえお　　　　　　あいうえお　画像
　　　　　　　　　→　　かきくけこ
かきくけこ

といった感じです。
なにか良い解決方法はありますでしょうか。

>741
おそらくテーブルの TD 要素で CSS を指定しているのでは？
文字列を
<SPAN STYLE="font-height:140%;"></SPAN>
のようにくくってみそ。

font-heightって・・・

>>741
表示確認したブラウザ名（とバージョン）も書いて下さい。
それがNN4なら有名なバグです。どうにもなりません。
http://www.zspc.com/documents/css2/text/lineheight.html

>743
やっちまった！はづかしー！

>>740
IE5.0以降ならば、CSS関数構文（expression）で出来るのではないかな。
cf.「DHTML Dude: さらにダイナミックに」
http://www.microsoft.com/japan/developer/workshop/default.asp
まあ結局、CSSにJScriptを組み合せたみたいなものですが。

table 要素をレイアウトに使うのは間違いだとしても、
table 的なレイアウト方法は間違っていないと思いますがどうでしょうか。

.section {
display: grid;
bin: 2 2; /* 2x2 のグリッド */
}

.section .log { slot: 0 0; } /* 親要素の (0,0) に配置 */
.section .info { slot: 1 0; } /* 親要素の (1,0) に配置 */
.section .main { slot: 0 1; } /* 親要素の (0,1) に配置 */
.section .contact { slot: 1 1; } /* 親要素の (1,1) に配置 */

+-----+--------+
|log |info |
+-----+--------+
|main |contact |
+-----+--------+

みたいなの出来るようにならんかなあ。

妄想なのに age ちまった...逝ってきます...

>>747
ちょっと違うかもしれないけど、
役に立つはず。
http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html

>>747
trとtdに相当する要素があればdisplayでそれを指定出来るが、
今の所出来るのはMozillaだけ。

>>749
はい。
その手の float とか position を使ったレイアウトにうんざりしたので
妄想してみました。
float とか position って grid 的レイアウトに使うものじゃないですよね。

>>750
それは知りませんでした。勉強してみます。

Mozillaでfilter:alpha()みたいな事できませんか？
-moz-opacityが怪しいと思い,いろいろいじってみたのですが,
透明化ができませんでした。
どうしたらいいのでしょうか。

>>744
すみません。忘れてました・・・
今更でしょうがIE5.5です。

>>746
な、なんかむずかしそう・・・・ですが、やってみます。
ありがとうございますー。

>>740＝>>741なの？　意外。

>>754
あああああー！　間違えたー！！
>>746を俺に対してのレスだと思ってしまった・・・
ホントすみません。
はずかしー。ひー。

-moz-* なプロパティのリストってどこにあります？

>>756
Piro氏のところに昔あったんだが。
で、webarchive漁ったらあったよ。
http://web.archive.org/web/20010620011420/www.cc-net.or.jp/~piro/tips/page/p0032.html

あげましておめでとう（w

初歩的質問で恐縮。どなたか教えてください。
body{
font:small/125%;
color:#6600cc;
background-image : url(2ch.gif);
}
この際、時々ではあるがテキストに背景画が上書きされてしまう。これの対処法を。
上書きが起こる部分は上部右側。環境はIE６です。
既出ですよね。すんません。過去ログも見たんだけどちょっと分かんなくて。

formのselectタグをなんとかスタイルシートで
立体化を平面化にしたいのですが、出来ないのでしょうか？
フォームボタンとテキストボタンとスクロールのデザインの変え方は判っているのですが
CSS関係のサイトをあちこちに探して見ましたが、見つかりません。
どなたかご存知の方、いらっしゃいますか？
一応selectタグの背景色の指定方法は判るのですが
style="color : black; background-color : silver;"・・・かな？
（一応class=txtとしておいてまとめて書いているのですが）

しかし、borderの指定をしてもできなくて。
不可能でしょうか？

余計な要素を追加しないで、
hr を n本の違った色の横線にするってことは出来ますかね。

そういう需要は画像ですますべき？

それ以前に、そんな線を引く意味があるかどうか。

>>760
Win版IEでは不可能。

border-topとborder-bottomで2ほーん

ちょっと恥ずかしいこと聞きますが、
世間一般でスタイルシートと言うと、ＣＳＳの事を指しているのですか？
なんかjavaスクリプトスタイルシートというのがあると聞いたので。

＞765
過去ロ（以下略

ま、一般にはCSSを指す。

>766
ありがとふ

idは「一度しか使えない」ということを聞いたんですが、それは
「idそのものが一度しか使えない」ということでしょうか？それとも
「idに使う英数字の組み合わせが一度しか使えない」ということでしょうか？

ID="名前"
要素に対して名前をつけます。ただし、同一の文書中で同じ名前を重複して使うことはできません。

>>762
デザイン上必要だったんじゃ？

>>759
>font:small/125%;
……？
font-size:smallの誤記かな。

>>760
Netscape6.2だったらできたような気もする。
selectへのスタイル指定で下向き三角のボタン部分の表示を、optionへのスタイル指定でドロップダウンロストの背景を変更できる。
（もし6.2でできなくても、次期バージョンでは確実にできる。）

>>761
-moz-border-top-colors: white red black;
のような感じに書けば、外側から1pxごとに色を変えられる。
ただし最新のMozillaのみ対応。

>>771
読めやｺﾞﾙｧ！
ttp://www.w3.org/TR/REC-CSS2/fonts.html#font-shorthand

ただし、この書き方の場合font-familyが省略不可になってるから、>>759は
そこが間違い。互換モードじゃないとはじかれる可能性も

>>772
-moz-* って、CSS3 で実装されるかもしれない機能の先取りですよね？
将来的には border-top-colors 的なのが導入される可能性があるってことですか？

<input class="button" type="submit" value="ok" accesskey="o" />

とかやっといて、ボタンのラベルの横に accesskey を表示しようと思って

.button { content: "(" attr(accesskey) ")"; text-decoration: underline; }

ってやったんですが、ボタンのラベルの横でなくボタンの横に出ちゃいました。

ラベルの横に出すにはどうしたらいいんでしょう？
div で囲むぐらいしか思いつかない...

>>773
どうもです。font-familyを使いたく無かったんで、まとめ指定をやめました。
でも症状改善せず。他人のサイトでも同じ症状をみたことあるんだけど、バグ？

>>759＝>>776
こちらへどうぞ。

CSS/DHTMLバグ辞典スレッド ver2.0
http://pc.2ch.net/test/read.cgi/hp/991666454/l50

>>759
うちでもそれあるよ。float使ってるんじゃない？

うちは全ページの隅に同じ背景入れてるんだけど、
float使ったページのみ画像がテキストにカブってる。
IEはfloatに弱くて関係ないとこにも不具合が出るから、
これもそうなんじゃないかと思う。

>>778
ありがとう。
でもfｒｏａｔ使ってないんだよね。
バグにしてｊは簡易なタグなんで、こちらで質問させて頂いた。
どうなんでしょう、同じ症状の方っていらっっしゃいませんか？

>>774
詳しくはCSS3の仕様（策定中）を見ないと分かんないけど、
一概に「-moz-*はCSS3の先取り」とは言い切れない。

画像とテキストを違うブロックにしてみたら。

>>779
改めて確認してみたら、以前その現象が起こってた2ページのうち、
片方では再現しなくなってた。
floatは依然使ってるから原因は別にあるみたいね。ｽﾏｿ
シートいじったからだと思うんだけど、どこをどういじったか忘れちった。

>>781
それが別ブロックなんだわ。うちは。

画面四隅をぐるっと囲むように色or画像を入れたいのですが、
フレームを使ってやってみたところ、ＮＮ4.7ではどうしても
誤差が生じてずれてしまいます。（ＩＥではＯＫ）
画面サイズに応じて伸び縮みしなくてもいいので、ＣＳＳで
カチっと表示させる適当な方法があれば教えてください。
ちなみに枠の中身は別ページを表示させたいのでテーブルは
使えません。（インフレーム機能はネスケはダメですよね？）

>>783
無理だと思う。
そもそもNN4.7をCSSでどうにかしようと思うのは諸刃の剣ではないの？

>>783
色でいいのなら、囲みたい要素に
border:100px solid red;
とかで、どう？
或いは親要素にpadding:100px;background-image:url(img.gif);と指定して
広めに取ったパディング領域に画像を配置。で、そのパディングに囲まれる領域には
ＩＤでも振って#id{background-image:none;}とか。

あ、ごめん。
「枠の中身は別ページを表示させたい」のか。
うーん、JavaScript(DHTML)で何とかできない？

>>784
>>786
やっぱむずかしいですよね･･･お手間とらせました。m(＿ ＿)m

移行しました。

スクロールしても動かない背景ってできますよね。
それみたいにスクロールしても動かない文字ってできますか？

div { display: fiexed; } だっけ？
（綴り合ってるか知らん）
けど、これはまだ実装に問題多いからオススメできない。

div { display: fixed; }
（多分綴りこう）

ありがとうございます！
いろいろ試してみます。

>>789-790
いや、position:fixed;でしょ。WinIEが実装してないけど、
position:absolute;とoverflowプロパティの組合せで擬似フレームが出来るから、
応用すれば、背景に文字を固定することも可能かな。

>>789-790
そんなむちゃくちゃな知識を……試すんではなく、調べろ。
http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme
このposition:fixedにはIEが対応してない。
そこで留めたい要素には何もせず、スクロールさせたい方をdiv等で括って
丁度iframeと同じ様に設定する手もある。

>>788-790
ここの真似するよろし。（新年限定バージョンみたいだからお早目に）
http://www.sal.tohoku.ac.jp/~gothit/gothitj.html

>>791-792
あ、すまん。うろ覚えで書いてもた。
ID:I1r2pFSQさん、ゴメンナサイ。

>>788です。
ありがとう(^◇^;)(^◇^;)

>>793
そこのソースだけど……
<BODY>
<DIV CLASS="center" STYLE="margin-bottom: -80em">
<SPAN STYLE="font-size: 20em; color: #FFCCCC">謹<BR>賀<BR>新<BR>年</SPAN>
</DIV>

これだとWinIEで画面上部の要素（このdivに続く部分）が表示されなくなるね。

がいしゅつだったらごめんなさい。

行間指定するときは

layout-grid-line:

使えば良いのですか？

>>797
なんじゃそりゃ。普通 line-height: じゃないのか?

>>797
こちらをお読み下さい。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#line-height
http://east.portland.ne.jp/~sigekazu/css/international.htm

style="res: 800; get: zuzaaaa;"

800{display:none)

>>796
>これだとWinIEで画面上部の要素（このdivに続く部分）が表示されなくなるね。
MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。

要素を増やすことって出来ますか？

<h1 id="a112">ほげりすぎ - <cite>中田さんより</cite></h1>
<ul class="navigation">
<li><a href="#a111">前の記事</a></li>
<li><a href="#a113">次の記事</a></li>
</ul>
<p>
もー、ほげほげほげほげうるさいったらないんですよ。
</p>

みたいなのがあったとして、
<ul class="navigation">..</ul> を、 p 要素の後ろにも表示したいんです。
これって CSS レベルでの対処は可能でしょうか。

ナビゲーション関係は文章構造の範疇なのかなぁ。

CSSでは無理だけどXSLならできるのでは。

クラスの派生がしたい....

.section { border: 1px solid black; }

.update { border: 1px solid black; font-size: 0.9em; }

この程度だったら逐一書換えればいいけどさ。
プロパティが増えてくると同期が面倒。
とりあえず、共通部分だけまとめてみる。

.section, .update { border: 1px solid black; }

.update { font-size: 0.9em; }

この方法は、.section が別の場所で定義されてたりすると破綻しちゃう。
ぬうん。

.section { border: 1px solid black; }

.section::.update { font-size: 0.9em; }

とかやりてー。

>>805
"派生" って概念とは違うと思うけど
class 属性に複数のクラス名を記述できること、知ってる？

>>806
なんですとー？
<div class="section update">...</div>
みたいなこと出来るんですか？

Mozilla で試したら上手くいった...知らなかった....
IE とかはどうなんでしょう？

何にしても、感謝ですー。

>>807
IE〜4、NC4は未対応らしい。

例えば　あ　の文字は全て　<font color=red>　で表示するとかできますか？
（説明ヘタですね・・・(^◇^;)）

あ の文字を全てマークアップし
適切なクラス名をつける必要があるでしょう。

やっぱマークアップしなきゃ無理ですか・・ありがとうございました。

>>802
>>これだとWinIEで画面上部の要素（このdivに続く部分）が表示されなくなるね。
>MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。

MSIEでは「表示−文字のサイズ」に依存するようだ。emの基準が違うのかなあ。

>>798>>799
ありがとうございます。
勘違いしてました。

<TABLE width=400 align="center">
<TR><TD align="right">あいうえお</TD></TR>
</TABLE>

「センタリングの幅400の右端」に表示したくてこんなことをやってるんですが、
スタイルシートでの表示方法があったら教えてください。

<div style="text-align:center;">
<div style="width:400px;text-align:right;">あいうえお</div>
</div>
文法的に正しいかどうかは別にして、とりあえずどうでしょう？

<STYLE type="text/css">
<!--
A{
text-decoration : none;
cursor : default;
}
A:HOVER{
color :ここに文字色;
text-decoration : none;
cursor : default;
visibility : visible;
float : none;
clear : none;
position : relative;
top : 2pt;
left : 2pt;
}
-->
</STYLE>
お聞きしたいのですが、↑上のタグをつかって、リンクの上にカーソルを置くと
字や画像が少しズレて、さもへこんだように見えるようにしたのですが、
画像が動かないのです。（字はちゃんとへこんだように見える）

でも、例えば外部から直リンしたバナーなどの画像はちゃんとへこんだように見えます。
この違いはどういうことなのでしょうか？

Win2kで、スタイルシートなどでのフォント指定が効かない
のは、何とかなりませんか？例えばcursiveフォントとか。
普通のゴシックみたいになってしまうんですが・・。

>>816
無駄が多すぎ。

A:HOVER{
color :ここに文字色;
position : relative;
top : 1;
left : 1;
}

<html>
<head>
<style type="text/css">
<!--
.note {
text-indent: 1em;
}
-->
</style>
</head>
<body>
<div class="note">
<p>段落1</p>
<p>段落2</p>
段落じゃないけど
</div>
</body>
</html>

この場合、最後の「段落じゃないけど」のところが、IE6ではインデントされるのに
N6ではされません。text-indentってブロック要素にしか有効じゃないと思った
のですが、クラス指定しているdivがブロック要素だから中のものに対してIE6だと
有効になってしまうのかな？

>>815
TABLEレイアウトから卒業したいので、それで行きたいと思います。
ありがとうございました。

>>819
答えられなくて申し訳ないのだけど、
あなたは、IE と Netscape のどちらの描画を望んでいるの？

>>821
この書き方だとIE6の表示を望んでいるように取れますね。
私としては、N6の方が正しい解釈なのかなと思っているの
ですが、どうなんでしょう？
描画を望むというのではなく、どちらかの実装的な不具合
なのか、仕様書的にはどっちの表示もありなのかという
部分でのお話です。

どちらかの実装的な不具合ならば、ゴルァって言いたいん
ですけどね。

>>822
Netscape 6の方が正しい解釈だと思ふ。

2度目の放置決定な予感・・板違いっすか？

>817
そんなフォント、オイラのPCには入ってない。
フォント名は大文字・小文字区別するんじゃなかったっけ？
大抵、頭文字は大文字だと思うけど、どうよ？

>>825
仕様書読め。

cursiveはフォントファミリー名

・「ス切リボ」は便利そうだけど Moon Browser じゃ使えない〜
・すっきり風スタイルシートチェンジャは別窓とかプロンプトが
出るのがちょっとヤだ〜
・ ieex のスタイルシート切り替え機能って腐ってるじゃん

という自分の不満を満足させるために(ﾜﾗ 、 ieex を更新しました。
右クリックから「スタイルシートの切り替え」を実行するたびに、代替
スタイルシートを順次適用してゆきます。
ちょっとスクリプトがごちゃごちゃになってしまったのと、あまりたく
さんのケースで実験していないので不具合があるかもしれません。
人柱になってくださるかたを募集中しています。

http://www.kohshi.org/ieex/ の ieex 0.10 alpha 5 です。
なんかあったらこのスレかうちの掲示板に連絡ください〜 宣伝ｽﾏｿ

Outsider Reflex で切り替えがぜんぜんできないのはいまのところ
仕様です(;´Д｀)

CSSを見られるのがどうしても嫌なので
外部ファイルとして読み込みたいのですが
どうしたらよいのでしょうか？

>>830
外部ファイルにしても
リンクすることになるので
アドレスがバレで見られちゃいます。

「募集中しています」… 電波か漏れは… 逝ってきます

え？でもどこを見ればバレるんですか？
例えば他のサイトを見ても</.***>　　（*は適当です）
みたいに書いてあってバレないと思うのですが。

JavaScriptはクライアントサイドで動いている以上、ブラウザから見えないと不都合が起こる気がする。

>>834
失敗。CSSに読み替えて。
鬱だ。ゴハン煎ってきます。

>>833
<LINK rel="stylesheet" type="text/css" href="../mona.css">

<HEAD>内に↑こういうのない？
っていうか、これが外部リンクのやり方なんだけどさ。
あと、その例えは意味不明。

>>833
たとえば
http://www.bakabakka.com/
というサイトがあったとして、そのサイトのトップページで
外部CSSが使われていたとする。
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
で、http://www.bakabakka.com/のあとにstyle.cssをつけて
http://www.bakabakka.com/style.css
にアクセスすると、見えちゃうんだなこれが。
あと、IEで「名前を付けて保存」するときに
ファイルの種類を「Webページ、完全」にしておくと、
リンクされているCSSファイルごとローカルに保存できるので
オフラインでじっくり読んじゃったりもできます。

じゃあ、>>833はパスの基本というかパスのこと全くわかってなかったことで。
いいですか？

ん、次の質問はこちら。
↓↓↓↓↓↓↓↓↓

恐る恐る2chに初めて書き込みします。
<TABLE STYLE="table-layout:fixed">
:
</TABLE>
これを書くと表示時間が早くなる様なのですが、
外部ＣＳＳに、
TABLE { table-layout: fixed; }
と記述して全てに適用させると、レイアウトが崩れてしまいます。
一つ一つサイズ指定をしなければ駄目なのでしょうか？
（初心者ですが宜しくお願いします）

あっ、質問はageるんですよね・・・

>>840
最近のパソコンのCPUパワーからいけば、
表示時間はたいして変わらない気がする。
よっぽど長大なテーブルを作っているのなら別だけど。

table-layout:fixedを使うときは、
<TABLE>
<COL WIDTH="100"><COL WIDTH="300"><COL WIDTH="200">
のように列幅を指定する。

>>840
と言うか、サイズを指定しないと自動テーブルレイアウトアルゴリズム(table-layout: auto)になるのでは。
http://www.w3.org/TR/1998/REC-CSS2-19980512/tables.html#fixed-table-layout
> The table's width may be specified explicitly with the 'width' property.
> A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm.

サイズ指定しないと
IEは勝手にtable幅100%にするよ。

ダメか・・これはWin2kだけの症状なのかな？
前使ってたWin98SEではちゃんと認識されたんだけどな・・。
何でcursive使うわけ？って言われればそれまでなんですが（藁

>>845
>>817の質問の仕方がまづいからでは。
そもそも表示確認したブラウザの名前とバージョンは？
指定は一般フォントファミリーだけ指定してるの？
（body{font-family:cursive}とか）
それとも特定のフォント・ファミリーでもなのか？
（body{font-famiy:'ＭＳ Ｐ明朝',serif}）
……等々、もっと具体的に状況を記述してくれないと応答できません。

あと、font-family:sans-serif;だけだと、却ってWinIE5〜で弊害がありますよ。
http://www.microsoft.com/japan/support/kb/articles/J058/3/67.asp
http://members.jcom.home.ne.jp/jintrick/Personal/bad_css.html#level4

background: #fff url(hoge.jpg) no-repeat top 100px;
は誤った書式なのでしょうか？
N6だと何も表示されません。IE6は大丈夫のようです。

>>847
同様の書式でここ↓の【使用例】はNN6.2でちゃんと見えてますが？
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background

>>847
100px top と書いてみてはどうですか。

>>848
top right 等は大丈夫でした。
px指定にするとダメです。

>>849
ダメでした。

>>850
指定した要素の幅は100px以上ありますか？

これはバグかもしれませんが、こんな例があります。
body{
background-image:url(test.gif);
background-repeat:no-repeat;
background-position:600px top;
}
<body>
<h1>見出し</h1>
<div>
短い文章
</div>
</body>

これで、ブラウザのウィンドウ幅を600px以下で視ると背景画像は現れず、
600px以上にして閲覧された場合のみ背景画像が表示されるはずです。
ところが、WinIE6やOpera6では意図通りになりますが、NN6では
ウィンドウ幅に拘らず、背景画像は現れません。

>>852
body直下のdiv要素です。幅は100px以上あります。
バグかもしれません。

巨額詐欺の疑いのある、グローバリーについて

掲示板を拝見されてるの皆様、新年あけましておめでとうございます。
掲示板の趣旨とは直接関係ない話で申し訳ないのですが、この世の中では許せない事があります。

http://www.max.hi-ho.ne.jp/sakimono/index.htm

この会社はありもしない儲け話をでっち上げ、巧みに客の財産を聞き出し、全財産を巻き上げます。

２００２年になりましたが、一向に改善する気配すらなく、悪質化は進む一方です。
この会社の営業は世間の皆様の迷惑になっています。

それだけではなく、殺人事件なども実際に発生し、新聞ザタになっています。

みなさんもこちらの掲示板に投稿し、悪徳会社に騙される不幸な人が増えないようご協力お願いしま
す。


http://messages.yahoo.co.jp/bbs?action=q&board=8745

また、この書き込みを見て賛同頂ける方はこの内容をコピーしていろんな掲示板に書き込みをお願いします。


　　　　　　　　　　　

因みに、確か>>852の例は、一括指定でpxをemにしても表示されませんでした。

>>847
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position
＞ 'background-position'
＞ Value: [ [<percentage> | <length> ] {1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit

仕様ではlength（pxやem等）とtop等を混ぜて使ってはダメ。
よってNetscape6の動作は正しいと思われ。

つーか
background: #fff url(hoge.jpg) no-repeat 0 100px;
じゃだめなの？>>847

>>856
ありがとうございます！
0 100px で上手くいきました。

ブラウザ標準の色を使う事ってできるんでしょうか？

例えば、body {color:#000000}の状態で、
DIVタグの中の文章をブラウザ標準の色(たいていは黒だけど)で表示したりできるんでしょうか？

>>858
できない。
標準色はユーザーによって違うから依存すべきではない。

>>858
ブラウザってよりもＯＳのGUI環境に合せたシステム色なら指定できるけど。
http://www.y-adagio.com/public/standards/tr_css2/ui.html#system-colors
つまり、ユーザーの好みに合せた指定ってことになりますね。

下記の「システム色見本」を視ればそのブラウザが対応してるかどうかわかります。
http://openlab.ring.gr.jp/k16/htmllint/colors.html

>>842; >>843; >>844; さん有り難う御座いました。
というか、このスレを見て勉強し
テーブルレイアウト自体から卒業した方が良いですよね。（笑）

とりあえず今はＩＥ６でしか確認できないので、
ネスケやマックの事とかまで考えると、混乱してきて大変です。

あっ、ID:XM5YGvwo　に変わってる。
ＩＤって変わるんですね・・・。
あそこが？？？になってる人は一体どうやってるんですか？

>>863
メールアドレス欄に何か書いてあればなります。＜???
でもこの板はいまのところ強制ＩＤなので、なりません。
IDは日付が変わったり接続しなおしてIPが変わったりすれば変わります。
２ちゃんねるのことでわからないことがあったら、
↓を見るといいです。
「2ch初心者FAQ」
http://www.skipup.com/~niwatori/
「２典」
http://freezone.kakiko.com/jiten/index.html
あとは初心者板で訊くとか。
http://cheese.2ch.net/qa/

CSS で

.fbox {
border: 1px solid black;
margin: 0;
padding: .2em;
}

のように書き、HTML で

<div class="fbox">
上
</div>
<div class="fbox">
<P>中</P>
</div>
<div class="fbox">
下
</div>

とすると、IE 4 以降では中央のボックスの上下に <P> によるスキマができます。Opera 6、Mozilla 0.9.7 ではボックス内にスキマが空くので 3 つのボックスがくっついて見えます。

IE でこのスキマを生じさせないようにするにはどうすればいいのでしょうか? 悪あがきに

p {
margin: 0;
}

としてみたものの、<P> 以外の要素についても同じことを書くわけにもいかず、参っています。

.fbox *
{
margin: 0;
}
でいいのでは？

ミスった……。
>>866は>>865への解答。

<a href=866 target=_blank>>>866</a>

それも考えたのですが、そうすると <ul> や <blockquote>などの表示が悲惨になってしまいます。

せっかく回答をくださったのにすみません。

↑
う、みっともない。見苦しくて失礼。

＞865
UL等を先に記述して最後に>>866さんのを書けば
桶かもしれない。（未確認）

ＤＩＶ　とかを２個使うにはどうしたらいいのでしょうか？

<style TYPE="text/css">
<!--
DIV{margin-top : 5pt;
margin-right : 5pt;}
DIV2{margin-bottom : 10pt;
margin-left : 10pt;}
-->
</style>

DIV2にしたらできるかなぁ・・
とか思ってやってみてもやっぱり無理でした・・（当たり前か・・。）
どうすればよいのでしょうか？

>>871　classを使え。
classが何かって？　調べろ。

みなさん-moz-*なプロパティって
どこで情報を仕入れてるですか？

自分でWeb上をあさってみたものの
某P氏のサイトにあったものには
遠く及ばないのですが。

>>873
多分ここが一番詳しいんでないかと。
http://www.xulplanet.com/tutorials/xultu/elemref/ref_StyleProperties.html

スクロールバーの色を変えるプロパティは
W3Cが定めるCSSの範囲では、認められていないと
聞きましたが本当？

>>875
WinIE5.5以降の独自拡張です。

N6のユーザCSSってどこで設定するんでしょう？

>>877
プロファイルディレクトリの中の \chrome\userContent.css に記述する。
プロファイルディレクトリの場所については
http://pc.2ch.net/test/read.cgi/software/996198735/908 を参照。

>>874
ありがとう。
がんばって訳してみるっす。

font-familyとfont-sizeを組み合わせで指定する方法はありますか？

たとえば、
font-family:Arial;font-size:100%が第一志望として、
このフォントがない場合は、
font-family:Times New Roman;font-size:110%
を指定するような？
フォントってモノによってサイズが違うから、希望がない場合は、
代替フォントをサイズ指定を含めて指定したいのです。。。

>>880
まさにそのために
font-size-adjustがあるけど、
対応してるUAは皆無だと思われ。

>>881
そうですか。。。（泣）
ジャバスクリプトで相手のパソコンがフォント持ってるか
調べる方法はありますか？

>>882
あるっちゃーあるよ

>>883
おおお、その方法はいかに？
とってもむずかしいのですか？
ブラウザやOS判別するみたいに簡単なのですか？
でも、、、
あんまむずかしいとできそうにないや（また泣く）

これってどうよ
http://www.geocities.co.jp/HeartLand-Oak/8031/Lunar/Lunar.html

なんか根本的なところで CSS の使い方を間違ってる気がするサイトだな。
あと NS って何よ。

>>884
"EnumFontFamiliesEx"で検索。

>>886
わかってんだろーけど、一応こたえるよ。
NetScape＝ネスケ。アメリカではこう略す。

>アメリカでは
あ、そーなんスか。勉強になりました。

>>884
ありがとうございます！
でもこれってVBですか。。。？
むずかしそうです（泣）
でもがんばって勉強してみます。

>>890
+ JavaScript の質問用スレッド vol.7 +
http://pc.2ch.net/test/read.cgi/hp/1010823511/9-13

>>885
全体的になんか、わかってない感がただよってるんだよな。
ソフトの方は先を考えて作ってないというか。

フォントの設定について教えて欲しいのですが、
全体的にMacではフォントサイズ12、
Winsowsでは「小」を前提にレイアウトを組んでいます。

でもIEでは「小」はデフォじゃないですよね？
これを強制的に「小」にするにはどうしたらいいのでしょう？

CSSスタイル定義で
「h4」に再定義してフォントを「小」として
ページ全体に「h4」をかぶせたのですがダメでした。

こういうやり方ではないの？

>>893
ユーザーに小さいフォントサイズを強制すんな。
h4を全体に被せんな。見出しに使え見出しに。
フォントを「小」とした、って、一体何やったの？
h4 { font-size: small }　か？

ページ全体のフォントサイズを指定したいならbodyだ。例えば
body { font-size: x-small }
ここで重要なのはブラウザで自由にフォントサイズを変えられる様に
em、%、あるいはlarge等キーワード指定してやる事。
ただし、おすすめは%。

>>893
＞ページ全体に「h4」をかぶせたのですが
んな無茶苦茶な。
ＣＳＳの前にHTMLの書き方を勉強した方がよさげ。

あと、小さい文字サイズでの固定指定はよろしくない。
body{font-size:100%}がよい。下記参照。
　http://pc.2ch.net/test/read.cgi/hp/1004167821/l50
　http://dfj.cool.ne.jp/html/fontsize.html

さっそくのレスさんきゅ〜です。

たしかにフォントサイズを強制するのは迷惑という話を聞いていたので
「フォントサイズ小で最適化してます」みたいな
コメントだけで終わらせることも考えてますが・・・。

最終的にはMacな人はフォントサイズ12、
Winの人は、デスクトップの設定でフォントサイズ9くらいで見てもらいたいな〜と思ってるのですが
フォントサイズをごちゃごちゃ考えても
一長一短でキリがないような気がするので
それに影響されないレイアウトを考えろってことですかねぇ。

＞フォントサイズをごちゃごちゃ考えても
＞一長一短でキリがないような気がするので
＞それに影響されないレイアウトを考えろってことですかねぇ。

そ。

>>796 >>802 >>812
>>>これだとWinIEで画面上部の要素（このdivに続く部分）が表示されなくなるね。
>>MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。
>MSIEでは「表示−文字のサイズ」に依存するようだ。emの基準が違うのかなあ。

↓ここですよね。なんか今IE6で見ても異常無くて直ってるみたいなんですが。
http://www.sal.tohoku.ac.jp/~gothit/gothitj.html
でもソースを見ると、>>796の抄出したのと一緒で変ってないんだけど……
どうなってるの？　ブラウザの問題ではなかったのかな。

>>896
こういうスレもあるぞ

なんで字が小さいんだ？
http://pc.2ch.net/test/read.cgi/hp/1004167821/

900!!

>>898
>↓ここですよね。なんか今IE6で見ても異常無くて直ってるみたいなんですが。
>http://www.sal.tohoku.ac.jp/~gothit/gothitj.html
>でもソースを見ると、>>796の抄出したのと一緒で変ってないんだけど……
>どうなってるの？　ブラウザの問題ではなかったのかな。
変わっているよ。

<DIV CLASS="center" STYLE="font-size: 80mm; line-height: 110mm; margin-bottom: -440mm; color: #FFCCCC">
<SPAN>謹<BR>賀<BR>新<BR>年</SPAN></DIV>

font-sizeの４倍じゃなく、line-heightの４倍margin-bottomをマイナスにしている。
異常があるように見えたのは、デフォルトのline-heightの取り方がブラウザによって
違っているからじゃないかな。

>>901
あれ、ソース変ってる。表示も少し変化した！
昨晩見た時は下記の通りだったのに。
<BODY>
<DIV CLASS="center" STYLE="margin-bottom: -80em">
<SPAN STYLE="font-size: 20em; color: #FFCCCC">謹<BR>賀<BR>新<BR>年</SPAN>
</DIV>

<hr>を左に位置させたいんだけど
hr {
align: left;
width: 50%;
}
で、上手くいかないんです。
助けてくらはい。

align なんて無いんじゃ・・・・

hr{
width:50%;
margin-left:0;
margin-right:auto;
}

>>904
ども。
でも上手くいかない…なんでだろ？

>>904-905
hr{text-align:left}を追加してみ。

>>906
うぉう出来た。ありがと。

DreamWeaverでテーブルのボーダーを指定したんですが、NS6.2とIE5で見た目が違うんですが、どうしたらいいのでしょう？

tdの定義>ボーダー>左右上下　1ピクセル　カラー#CCCCCC

とやるのですが、この状態だとNSできちんと見えるのですが、IEだと何も見えません。

ちなみにMac。

HTML初心者なので、的はずれな質問かも知れませんが、どなたか教えて下さい。

薄い色の四角い枠でテキスト囲みたいだけなんですが、やり方自体違うのかな？

>>902
ここはヲチ板じゃないんだから、そのサイトがいつ更新されたかは
関係ないよ。
もともとそのサイトが話に出たのは、背景の文字を固定したい、という
ことだったよね。"position: fixed"を加えれば、一応、対応している
ブラウザでは希望は満たされそうだ。
ただ、縦方向の位置合わせだけど、line-height × 行数だけmargin-bottomを
マイナスにするというやり方は、行数があらかじめわかっていないと
使えないんじゃないかな。そのサイトの場合は「謹賀新年」を一字一行に
分けているので、４行ということがわかっているけれど、一般性は
ないよね。

>>908
スレ違い
http://pc.2ch.net/test/read.cgi/hp/1007610142/l50

overflowだけど、visible、hidden、auto、scroll　…まだあったっけ？
これらってie5でも全部機能します？
ie6にしてしまい自分では確認できんので教えてください

ありがとう！

＞910
visibleってデフォルトのハズなんだけど、
指定無しでは縦スクロールバーは常に見えてるが
visibleを指定しても　overflow-y:auto;　のように解釈されてるような・・・。

当方、Win98SE IE5.5SP2

>>908
この野郎！css使うな呆け！W3C信者のお仲間入りはやねてねo
テーブルネストでお願いo
☆☆☆IE4〜6、NN4、NN6で確認済み☆☆☆

<!--↓枠の色はbgcolorで指定ねo-->
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<!--
↓枠のサイズはcellspacingで指定ねo背景色はもちbgcolorで指定o
　widthを指定する場合コッチに指定ネ☆-->
<table border="0" cellspacing="1" cellpadding="10" bgcolor="#FFFFFF">
<tr><td>
これにしてお願い...☆（はあと
</td></tr>
</table>
</td></tr>
</table>

あ、ドキュソ宣言もやめてねo
Dreamweaverだと大丈夫だがo

ごめ、912は無視して。
bodyに指定したときの話してました。。。

>>910
対応表、見ようね。
http://www.zspc.com/documents/css2/display/overflow.html

CSSなんてどうせOFFにしているし…。
だいたいONにしてる奴なんかいるのか？

間違ったわ☆呆けｯ！！
<!--↓枠の色はbgcolorで指定ねo枠のサイズはcellspacingで指定ねo-->
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<!--
↓背景色はもちbgcolorで指定o
　widthを指定する場合コッチに指定ネ☆-->
<table border="0" cellspacing="0" cellpadding="10" bgcolor="#FFFFFF">
<tr><td>
これにしてお願い...☆（はあと
</td></tr>
</table>
</td></tr>
</table>

ｳﾄｩｰ

＞910
お詫びにテストした。IE5.5SP2
http://www.kiss-kiss.net/overflow.png

>>916-917
アホくさ。
CSSなら簡単なのに……
<div style="border:1px solid #ccc">
テキスト
</div>

いまだにテーブルレイアウトだけに執着してる奴ぁご苦労さん。

＞912　＞915
どうもありがとうございまっす！
912さん画像まで…ほんとに感謝します。おかげで今日は良く眠れそうです

なんとか出来たと思い、NN4.xと6.xでチェックしたら
…なんか目も当てられない状況になっていたのですが…

これは鬱氏する以外に方法が無いものでしょうか？

>>921
ハア？　何が出来たって？
名前と用件を述べてくれ。

>920
じゃ画像消しますね。
ちなみにテストでheightは全て70pxだったんですが
visibleでIEでは、背景色も一緒に幅が広がってましたが
NN6だと背景色は伸びないので注意して下さい。

>921
多分、ボックスサイズの実装の違いかな？
HTML * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
これでも追加しとくとよろし。
NN4は知らんが。

>>921＝>>903か？
あのな、>>904に>>906を「追加」指定するんだよ。
hr{margin-left:0}はNN6・Opera向け記述、
hr{text-align:left}はWinIE向け記述、
NN4は水平線にスタイルシート効かない。
以上。

>>913

ありがとうございます。何とか出来ました。

h1とかh2とかにborder-bottom指定すると行全体に下線が引かれて
しまうのですが、文字部分だけに下線を引くことってできませんか？

下線が引きたいだけなら text-decoration とか、
色とか太さとかもいじりたいから border-bottom のが良い、というのなら
span で囲ってそっちに設定するとか。

>>926

width指定したらどうですか？

例）
<h1 style="width: 1em;border-style: solid;border-width:0 0 1px 0;border-color:black">あ</h1>

>>927-928
どうもありがとうございます。やっぱり基本は行全体なんですね。
spanでくくるかwidth指定するか、はたまたtext-decorationで
片づけてしまうか色々いじりながら考えてみます。
早速のレスありがとうございました。

>>928
文字数が変わるたびに長さを再指定するのがやや鬱だな・・・
926がその労を厭わないというなら別にいいけど。

画像のサイズを % 指定したいんですが、上手くいきません。

img.thumbnail {
width: 30%;
height: 30%;
}

これだと、親要素の大きさの 30% になっちゃいますよね。
自分のサイズの 30% にするにはどうしたらいいんでしょう。

あと、
.something {
padding: 2em - 1px; /* 2em より 1ピクセル短かく */
}
みたいなことするにはどうしたらいいんでしょう？

.something {
padding: 2em;
}

.anything {
padding: 2em - 1px;
border: 1px solid black;
}

みたいにして、 .something と .anything を同じ大きさにしたいのです。
もっとも中身に依存はしますけど。

BBSのメッセージ欄のスタイルに
background: #000000; filter:Alpha(opacity=60)
としてフィルタをかけて半透明にしたのですが、
テーブルの中全体が半透明になってしまいます。
背景だけを透かせて文章は半透明にしたくないのですが、
ＣＧＩのＨＴＭＬ書き出し部分を変更せずにそのようなことは可能でしょうか？

>>932
>>733 あたりどうぞ。

.message {
透過指定
}

.message *{
透過解除
}

ってかんじかな？

フィルタ周りは使ったことないんでよく判ってる人キボン。

>>932
背景にアルファ埋め込みの透過PNGを使うのが一番イイと思う。
対応しているブラウザ（NS6など）では透過されるし、未対応の場合は普通の背景画像になるし。

>>933>>934

一応テーブル無いでも再度不透明のアルファを設定したのですが、
どこか間違っていたのかもしれません　(^-^;
透過PNGは思いつきませんでした。試してみようと思います。

お早いレスありがとうございました♪

>>935
相対or絶対指定が抜けてたってやつじゃないの？

>>926
h1{
display:inline;
border-bottom:solid thin black;
}

>>937
インラインにしちゃうと、微妙に意味が変わっちゃうような。

>926
h1{
width: 50%; /* ここで調節 */
border:solid thin black;
}

>>936
その通りみたいです。
相対位置指定を書き加えたらちゃんと適応されました。

>931
前半．自分の（つまりオリジナルの）30% にならない？なるはずだけど．
後半．JavaScript と組み合わせるか IE 限定で expression とかいうのを使うか．
いずれにしても規格内の CSS だけでは無理だと思う．

>>941
うーん、当方 Mozilla 9.7 ですが、ウィンドウリサイズすると大きさ変っちゃいます。

後者の方はあきらめました。

>942
あ，ほんとだ．仕様書に「containing block を元に計算される」って書いてあるや．
どこかで違うことを読んだような気がしたけど勘違いだったらしい．ごめん．
ということで，これも JS とか使わなきゃだめそうだね．

テーブルで言う、
<table>
<tr>
<td>メニュー</td>
<td>ニュースとか</td>
</tr>
</table>
このような形にしたいので色々駆使しているのですが、どうしてもニュースとか、の部分が
下にいってしまいます。どうすればいいでしょうか？

答えてﾎｽｨのでage

float: left;

>>946
ども、float:left; と float:right; を両方に入れたらできました。

ただ、左と右の間がすごくあいちゃうんです…
なにか手は無いものでしょうか？

<INPUT TYPE="TEXT" SIZE=20 STYLE="BORDER-STYLE:solid;BORDER-COLOR:white;BACKGROUND:#CCCCFF;" onFocus = "if (document.all)
{ this.style.backgroundColor='orange';this.style.color='#FFFFFF'; }" onBlur = "if (document.all) { this.style.backgroundColor='hotpink';this.style.color='#FFFFFF'; }">
　ボタン全部の外観をこのように変えたいのですが・・・。
離れたときと書き込みしたときに、外観が変わるようにスタイルシートで設定はできないのでしょうか？

>>948
A要素をdisplay: block 化して、width、heightの設定で出来ると思う。

>>947
td{
display:inline;
margin:0;
}

>>948
つまりどうしても擬似クラスを使いたくないと？

すいません、ほんと初心者なんで、わからないんです。
　擬似クラスとか
A要素をdisplay: block 化して
とかさっぱりわからないです。（汗）

>>947
いっそのこと

<ul>
<li>メニュー</li>
<li>ニュースとか</li>
</ul>

li {
list-style-type: none;
display:inline;
}
とか

どっかネットで拾ってきます。。。
　すいませんでした。

>>950
すいません。テーブルレイアウトをやめるためになるべく
divで指定しているのですが…こんな感じで。

div.a{
color:#000000;
background-color:transparent;
padding-top:1em;
padding-bottom:1em;
width:15%;
float:left;}

div.b{
width: 50%;
height: 35em;
margin-bottom: 2em;
border:1px solid #CC9966;
float: right;}

これをくっつけたいのですが―
我儘いってすいません。