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

Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
関連スレやリンクは>>2-5あたりに。

■■■■■　注意　■■■■■
質問者　（特に「初心者」）　は、
必ず>>4にある解説サイト （かなりわかりやすい） で
　勉　強　してください。

質問の前には過去ログを　WinIEの場合[Ctrl+F]で検索しましょう。

また、IE などではまだ対応できていない要素などやバグが多数存在します。
ですので、>>2（関連スレ）の「バグ辞典」に目を通しておきましょう。

また、「環境を書け」　とか　「ソースは？」　と求められたときは
応じるようにしましょう。　回答が早く返るようにするためです。

※　ﾏﾀｰﾘ進行推奨　※

【前スレ】
　http://pc3.2ch.net/test/read.cgi/hp/1025346520/

【過去ログ】
　http://mentai.2ch.net/hp/kako/974/974934062.html
　http://natto.2ch.net/hp/kako/984/984113434.html
　http://natto.2ch.net/hp/kako/992/992992981.html
　http://pc.2ch.net/hp/kako/996/996828258.html
　http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
　http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
　http://pc3.2ch.net/test/read.cgi/hp/1015474859/
　http://pc3.2ch.net/test/read.cgi/hp/1019881572/
　http://pc3.2ch.net/test/read.cgi/hp/1025346520/

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
　http://pc.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト { number: 3; } */
　http://pc.2ch.net/test/read.cgi/hp/1010800617/
・* CSS { イケてるスタイルを："作れ";}
　http://pc.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
　http://pc.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 4th Reich
　http://pc.2ch.net/test/read.cgi/hp/1021555514/

【仕様書】
・CSS1の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS1/
・CSS2の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の翻訳(日本語)
　http://www.y-adagio.com/public/standards/css1/toc.htm
・CSS2の仕様書の翻訳(日本語)
　http://www.y-adagio.com/public/standards/tr_css2/toc.html

【その他資料など】
・W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・とほほのスタイルシート入門
　http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・CSS Laboratory対応表・一覧
　http://www.inter-cool.net/~phantasm/wdzone/note/index.html

>>2はアドレス変更を忘れてるネ。正しくは下記の通り。

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
　http://pc3.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト { number: 3; } */
　http://pc3.2ch.net/test/read.cgi/hp/1010800617/
・* CSS { イケてるスタイルを："作れ";}
　http://pc3.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
　http://pc3.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 5th Emperor
　http://pc3.2ch.net/test/read.cgi/hp/1025351897/

おつー

>>1
新スレ乙〜。

乙。

■■■　終了　■■■

>>1　乙彼

>>9
いいセンスしてるな

１さん、スレ立て乙彼さまです。
こちらで質問してよろしいのでしょうか？

壁紙固定をしているのですが、私のページではスクロールすると
なぜか、文字が波打つ（っていったらいいんでしょうか？）のです。
他の方の壁紙固定のページをみても、すんなり壁紙だけがスクロール固定され
文字は普通にスクロールされるんです。
なぜだかわかるかた、教えて頂けると有り難いです。
よろしくお願いします。

<style type="text/css">
<!--
body{
background-image : url(○○.gif) ;
background-repeat : no-repeat ;
background-position : bottom center;
background-attachment:fixed;}
--></style>

>>12
カクカクするってこと？
画像やフォントを変えても再現する？
何となく画像が大きいからじゃないかと。

>>12
ブラウザはIE？

画像固定するとスクロール重くなるよ。
その結果ウィンドウサイズがでかかったり、画像がでかかったり、CPUパワーが無かったりすると、
そんな風になることがあるような。

漏れはなぜか文字が消えることがある。

p.hoge{
color:black;
background-color:#cccccc;
border-style:solid;
border-width:1px;
border-color:#333333;}

こんな感じの装飾で、パラグラフの中身がスクロールしてるとふっと消えたり。
Ctrl+A でも表示されないんだけど、文字の上までドラッグすると再表示。なんなんだか。

前スレ990でおます

<img src="**" style="float: left;">
<table>
.
.

これでやってみて、成功はしたんですが
imgとtableの間にスペースが・・・(´･ω･`)
解決でけそうでしょうか。

ちなみにposition弄るとMozillaとかでずれる始末(´･ω･`)´･ω･`)

>>16
知るかカス

>>15
独り言を書き込むなカス

>>13>>14
１２です。答えてクダサッテ、有り難う御座いました。
画像が大きかったら、そうなる可能性があるんですか？
確かに画像・・・大きいのかも。
ちょっと画像を変えてもう一度見てみます。

>16
marginやpaddingあたりをイジれ

【ＵＲＬ】
とったんラヴュ
http://www.katch.ne.jp/~manion/

【趣旨説明】
ひきこもりの紹介のサイト

【評価希望ポイント】
・絵
・コンテンツ
・デザイン

よろしく。

とったんは偉いなぁ

マルチは放置ですよ。。。
http://qb.2ch.net/test/read.cgi/accuse/1028378421/l50

>>16
<img/><table>
<tr>...</tr>
</table>

<ol>
<li>
<dl>
<dt>アイス</dt>
<dd><p>ミルクで作ったもの</p></dd>
</dl>
</li>
</ol>
dlをliで囲んだのをIE5.5でみると、
1.
アイス
ミルクでつくったもの
となり、アイスの左に1.が来ません。
来させるにはどうすればいいですか？

>>25
私も昔悩んだ（過去ログ既出）が、どうにもならない。

>>25
説明が短いなら

<li>アイス: ミルクで作ったもの</li>

>>25
<dl>
<ol>
<li>
<dt>アイス</dt>
<dd>ミルクで作ったもの</dd>
</li>
</ol>
</dl>
こんな感じの不思議マークアップをすればできる。

>>25
<ol>止めて、display:list-itemとlist-style-type:decimalで表現するとか。

dlをインラインにする

>>30
既出です。
それでもうまくゆかないんですってば。

つかえねーな

>>32
誰？　ナニ？　

ルリたんでオナニーでもするか。

ばけらったでオナニーでもするか。

>>20,>>24
ダメですた(´･ω･`)
Mozillaだとちゃんと間隔無しで見えるのになあ・・・。
逆に縦幅が分厚くなっちゃって不格好になるんですけどね・・。

ﾓｼﾔ(´･ω･`;≡;´･ω･`)仕様!?

>>36
ﾓｼﾔ(´･ω･`;≡;´･ω･`)仕様!?

>>34=>>35 , >>37
荒らすなや。

>>38
すみませんですた。(´･ω･`)

>>25
li dl:before{content:"\A"}
li dl *{position:relative;top:-1em}

>>40
いや>>25には
>IE5.5でみると
とあるだろ。
>li dl:before{content:"\A"}
は通用しないよ、

>>25
結論
IEのCSS対応が糞なのでCSSでは無理っぽ。
どうしてもやりたければ>>28。

>>42
って、結論は>>26がとっくに出してるやんけ。

cf. CSS/DHTMLバグ辞典スレッド ver2.0
　http://pc3.2ch.net/test/read.cgi/hp/991666454/67-77

YA----N-----KE--------!!!!!!!

過去の日記 : 1月8日 1月7日 1月6日 1月5日 1月4日 1月3日 1月2日 1月1日 ...

こんな横長の、かつ必ずしもすべて表示される必要のない一覧があって、
ブラウザの横幅に応じて見られる範囲が変わるようにしたいと思います。
# 領域は1行におさめたいので、ブラウザの横幅が短ければ
# 3日分（上記の例なら1月6日まで）とかしか表示されなくてもよい。

white-space:nowrap;
overflow:hidden;
これでやると失敗しました。hiddenにならず、領域の幅が伸びるだけでした。

height:1.0em;
overflow:hidden;
これでやるとheightの指定があいまいで文字の大きさによっては下部が切れたり、
隠れていてほしい2行目の頭が表示されたりしました。
ていうか、hidden部分は2行目というより、右方向の部分に隠れていてほしいです。

うまくやる方法はないものでしょうか。

？？？
フレームでメニューと本文表示部に分けるみたいな感じ？

>>45
widthも指定してみてはどうだろうか。

うむ。width:98%;位がオススメ。横スクロールが出ないので。

width: 100%;は横棒出るの？

>>49
!DOCTYPEとブラウザに拠っては。

NNの4.7で大元のテーブルに背景画像を入れて
その中にテーブルを入れ子にすると
背景画像がずれてしまいます。
それを回避する方法はありますか？

>>51
テーブルの入れ子？
そんなの出来るの？

ん？
言い方まずかったかなぁ？
テーブルの中にテーブルを入れます。

>>52

>>53
>>52

>>53
そのままやん。

>>53
ソース書いてみ。

そのままです

>>58
何これ？

こんなんです

<BODY bgcolor="#FFFFFF" text="#000000">
<P align="center">SAMPLE</P>
<TABLE width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD><IMG src="bg_01.gif" width="600" height="18"></TD>
</TR>
<TR>
<TD background="bg_03.gif" align="center">
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>
<tr>
<td>　</td>
<td>　</td>
<td>　</td>
</tr>
</table>
</TD>
</TR>
<TR>
<TD><IMG src="bg_05.gif" width="600" height="23"></TD>
</TR>
</TABLE>
</BODY>

>>60
それでどうしたいの？

NN4.7で見ると、背景がずれるんです
それをCSSでどうにかならないものかと・・・

>>62
画像アップしてくれない？

>>62
他のブラウザではどうなの？

ちょっと待っててください
アップローダー探してきます

IEでは、ずれないんです

>>66
なぜ、テーブルの中にテーブルを入れてるの？
普通こんな使い方するかな？

アップローダー知りませんか？
ちょっと見つかんなくって

http://kari.to/upload/

>>62
NN4.7なんて気にしなくていいじゃない。

あげました。
コメントはよろしくお願いします。です

>>67
>>51 では無いが良くやるよ。こういうの。
普通にテーブルを細かくするよりも表示が軽くなる場合があるし。
tdの中には普通にtable入るし。

>>72
フォローありがと

>>71
おーい、それだけじゃ分からないよ。
bg_01.gifはどれ？

よろしくお願いします。
よろしくお願いします。02
よろしくお願いします。03

です。

>>75
それだけじゃ分からないよ。

なにが分からないんですか？

>>71 ホントだ、妙にずれるね。

>>76
三枚の画像が
bg_01.gif
bg_03.gif
bg_05.gif

あ、
よろしくお願いします。がbg_01です
すんまそん

>>71
なんだか、二重になってるテーブルの各セルに背景が配置されてる感じだね。
一応これで直ったが、めんどくさいな。

<TD><IMG src="bg_01.gif" width="600" height="18"></TD>
</TR>
<TR>
<TD background="bg_03.gif" align="center">
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="">　</td>
<td background="">　</td>
<td background="">　</td>
</tr>
<tr>
<td background="">　</td>
<td background="">　</td>
<td background="">　</td>
</tr>
<tr>
<td background="">　</td>
<td background="">　</td>
<td background="">　</td>
</tr>
</table>
</TD>
</TR>
<TR>
<TD><IMG src="bg_05.gif" width="600" height="23"></TD>
</TR>
</TABLE>

>>78
そうなんですよ。
前からこれにずっと悩まされてました

age忘れ。
補足：多分、親のTDのbackground属性が、
このテーブルのTDに承継されてるんだろうね。バグだわな。

おーおできた！
ありがとうです。
からTDにも入れるってことか〜

みなさん有難う御座いました。（ﾍﾟｺﾘ

遅くなりました。みなさまご回答ありがとうございます。

widthを指定しても、
100%だと文字列全体（1月1日まで）を表示しようとするので、
ブラウザに横スクロールが出てしまいます。

で、その後いろいろ試した結果、
本来は{width:100%}で大丈夫であることがわかりました。
それが、テーブルの中にある領域では大丈夫じゃなくなるようです。
図らずも、わたしがテーブルレイアウトしていることがばれてしまいました。
すみません…。

でも、これってブラウザのバクですよね？
WinMe + IE6.0 です。

がんばってそのページだけテーブルレイアウトやめました。
こうなると、全ページでやめたくもなるが…。うむむっ。
おさわがせしました。

中途半端が一番良くない

て言うか何でテーブルレイアウトしてるの？
CSS使うの辞めたら？

別にテーブルレイアウトとCSSは併用できるよ

段組はCSS3で正式サポートだから、現状では別に
テーブルレイアウトを使っても良いんじゃないかと言ってみる。

俺は使わんけど。

>>テーブルレイアウト
すでに覚えてないけど、IE5&6とNN6の表示を合わせるなどモロモロの苦悩があって、
確かやむにやまれぬ状況でテーブルレイアウトを選択をしますた。
でももういっぺんトライしてみます。

ところで、テーブルレイアウトをやめてDIVをfloat:leftしたんですが、
そしたら >>16 さんの状況になってしまいました。
どうやらfloatすると3pxの余白が空くみたいです。
>>24 さんの指摘しているような、
htmlファイルの改行やスペースなどの問題でもないようです。

まいった。

>>91
参りましたか。

ここってcssだよな

他のスレの16がのこっとった(汗
>>16ｽﾏｿ

ちなみにテストファイルをアップしたのでこちらで3pxのスキマを確認できます。
http://www.geocities.co.jp/SiliconValley-Bay/9728/test.html

>>95
いちいちアップしなくていいよ。

>>41-43
試せ

見出しタグへのスタイルシートの適用方法がわかりません。

<h1><img src="hoge.gif" 〜 ></h1>
<h2><img src="hogehoge.gif" 〜 ></h2>

hoge.gif と hogehoge.gif の間を0にするにはどのように定義したら
よいのでしょうか？

windows環境で、Operaだと marginを0pxにするとうまいこと表示できます
が、IEやNNではうまくいきません。

>>95
div.c にも float:left;

>>98
こうかな？
h1, h2 { margin: 0; }
h1 img, h2 img { vertical-align: text-bottom; }

>>99
そうするとdiv.cが左はじにくっついちゃいました。つまり、こう。
http://www.geocities.co.jp/SiliconValley-Bay/9728/test2.html

table{display:none} /*広告非表示*/

カッコいいね

>>101
white-space:nowrap;は消せないの?

>>98
marginだけでなくpaddingも0にしたかい？

改行する時<br>を使うと、
htmlと同じように改行できないんですけど、、、、
外部スタイルシートでbodyを指定してます。
body { font-size: 14px; background-color:ffffff; letter-spacing: 0.1em; font-family:
"ＭＳ Ｐゴシック" }
こんな感じなんですが、、、、

>>105
>改行する時<br>を使うと、
>htmlと同じように改行できないんですけど

質問の意味がわからないんですけど……。

>>100
回答ありがとうございます。
画像の間を0にしたいんですが、教えていただいた方法でも
NNとIEだとうまくいきません。

>>107
この場合は
h1, h2 { margin: 0;}
だけでよくないかな?
なにが原因か調べるときは
border:1px solid black;
をいれて見るといいよ。

>105
それはバグ。
letter-spacingを指定すると<br>周りがおかしくなる。

br{letter-spacing: 0em}　で回避しる。

>>109
バグなんですか。ありがとうございました！
文字間隔を調整するにはletter-spacingを使用する以外に、
他に方法があるんでしょうか？

>>103
そもそもの主旨が >>45 なので…。

>>100 >>107
無事にうまくいきました。
自分の確認不足だったようです。
すみません。
それといい調べる方法を教えていただき感謝いたします。

>>108
間違えました。

>110
いや、だから　br{letter-spacing: 0em}　で回避しると言ってるだろ。
そうじゃなければ、、

ス　ペ　ー　ス　入　れ　る　し　か　な　い　な　（藁

結局謎のまま(´･ω･`)

ttp://members.tripod.co.jp/Yaki_aco/test.html

こんな感じなんですけどねえ

>>111
いっそ
div.b {
background:#99ff99;
position: absolute;
width:200px;
}

div.c {
background:#9999ff;
position: absolute;
left:200px;
white-space:nowrap;
}
dic.cの後がどうなってるのかしらないけど。

>>115
全体をDIVかなんかでくくって、
{
background:url(/*画像*/) no-repet;
padding:0 0 0 /*画像サイズ分*/;
}
これでどう？

>>116
それでいくと、div.cが200px分だけブラウザから右にはみ出してしまいました。
# div.cにwidth:100%を指定した上での話です。
# width指定しないと、さしすせそ…の文字列を全部横に表示してしまいます。

>>117
ああああ・・・
貴方は自分の中で神と化しますた。
ﾎﾝﾄにありがとう(；`･ω･)人

他ｽﾚでも書いたんだけどこっちの方が良いと思われなので

selectのｽｸﾛｰﾙﾊﾞｰの色を指定したいんだけどこれじゃできなかった…
<html>
<head>

<title></title>

<style type="text/css">
<!--
select {
scrollbar-base-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-arrow-color: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
}
-->
</style
>
</head>
<body>

<form>
<select name="test">
<option value="1" selected>A
</select>
</form>

</body>
</html>
ﾌﾟﾛﾊﾟﾃｨが違うの？

>>120
できないつーの

マルチかっつーの

>>121
ﾚｽｻﾝｸｽｺ

出来ないってのは根本的に指定出来ないの意？

>>123
そう根本的に

123は偽者　氏ね

>>125
その前にマルチ氏ね

>>118
「ブラウザの横幅に応じて見られる範囲が変わるように」
という趣旨に合ってるとおもうのだが。

かなり卑怯くさいが

div.b {
background:#99ff99;
position: absolute;
width:200px;
z-index: 1;
}

div.c {
background:#9999ff;
position: absolute;
padding-left:200px;
width:100%;
white-space:nowrap;
overflow: hidden;
}

双方heightを指定しないと文章量によっては
悲しい事態になると思われ。

>>127
div.cに
box-sizing: border-box;
-moz-box-sizing: border-box;
追加ね。

li要素に孕ませてるformをインラインにして所謂メニューっぽくしようとしたのですが
Mozillaで上手くいきませぬ。
IE5.5だとli form{display:inline;}でできるんですが。
どなたか解決方法教えてください。おながいします。

孕（はら）ませてる、所謂（いわゆる）　難しく書くね
再変換しないと読めないつーの

>>116 >>127 の双方を参考にして、
ページ内の他の要素との問題も解決しつつ
ぐちゃぐちゃのスタイルでなんとか希望の表示を実現しました。
しかし…ソースは恥ずかしくて他人に見せられないです。
これでいいんだろうか。藁
ありがとうございました。

>>130
それぐらい読めたほうがいい。

>>132
所謂は２ｃｈでも時々レスでも見ることあるけど（極稀に）
「孕む」なんて初めて見たよ　絶対、読めない
って、スレ違いなので終わり

孕むはよく見るな。

読めるだろ…

>129
どういうことかよくわからないんだが、

○孕（はら）ますぞｺﾞﾗ
○既出（がいしゅつ）です
○お願（なが）いします
etc...

というリンク群があって、:hover時にフォームっぽい動きをして欲しいと。
┏━━━━━━━━━━━━━━┓
┃お願（なが）いします　　　　　　　　 ┃　←反転中
┗━━━━━━━━━━━━━━┛

こういうことか？

>>134
一体どこでよく見るのかと小一時間。

>>129
同じくわからんのだけど、フォームの部品を li に孕ませて、
それをスタイル指定で inline にしたい、ってこと？ 下みたいに。
<html><head><style>
li {display: inline;}
</style></head>
<body><form>
<ul>
<li><input type="text"></li>
<li><select><option>#1</option><option>#2</option><option>#3</option></select></li>
<li><input type="submit"></li>
</ul>
</form></body></html>
これは Mozilla でも inline になる。

孕むは風を孕む、とかでも使うし。

書き方が悪かったですね、ｽﾏｿ。
ソースはこんな感じです。
<div>
<ul>
<li><a href="">hogehoge</a></li>
<li>
<form action=うんちゃらかんちゃら><input type=hidden name=なんやらかんやら>
<select><option>もにょもにょ</select><input type=submit"></form></li>
</ul>
</div>

この時にhogehogeの横に来るようにinline指定したのですがダメですた。
他の要素(selectとかsubmit)辺りにも指定してもダメですた。
わ・・かりますかね？

>>138
ulとformの両方にinline指定。

ってかselectとか「submit」って何だよ(ｗ
鬱氏。
訂正：selectとかoptionとかinputとか。

>>139
やり済み。でも無理。

>>140
何だその口の利き方は。

(ﾟдﾟ)ﾊｧ?

<li>の自動改行をCSSで防げる？

解らないのなら黙ってろ

>>143
IDだしてからもう一度、どうしたいのかを明確にしてレスおねがいします。

li {
display: inline;
}

border-bottom: 1pt #0066ff solid;
border-left: 1pt #0066ff solid;
border-right: 1pt #0066ff solid;

と書くと何だかどうかと思ったので
(要は上の線を消したい)

border: 1pt #0066ff solid;
border-top: 0pt;

としたのですが、IE6.0以外だと問題ありますでしょうか？

>>144
騙るな、ヴォケ。

>>145
138でわかりませぬか？

>>147
別段問題は無いけどバリデターで２重指定ですとか言われるはず。

>>148
なるほど…。ありがとうございました。
感謝します。

>>147
　border:#0066FF solid;
　border-width:0 1px 1px 1px;
とかどう？
漏れはいつもそーゆーときは↑のようにやってるんだけど。

>>150
俺もそうやってる

>>150-151
なるほど、そんな方法もあるんですね…。
全然思いつきませんでした。(汗)
有難う御座います。早速使わせて頂きます。

すいません　ちょっくら質問させてください
<div>内にいくつか画像を置いて外部スタイルシートで画像の配置を
position : absolute;
top : 90%
left : 90%;
って感じで指定してるんですけど
IEやMozillaではうまく表示されてるんですけど
Operaで見たときにある画像だけが<div>の外にはみ出して表示されてしまうんです
なんとかこれを回避する方法はないでしょうか

>>153
divの指定を書かないと何とも言えないな。
divにwidth,height指定してるんでしょ？で、そのdivにbackgroudとborder指定かなんかして
その枠外に画像が表示されるってこと？

>>154
あ、はい　そうです

>>154
えっと、divに当ててるCSSはこんな感じです
div {
width : 400px;
height : 200px;
border : dashed 1px #000000;
padding : 0;
margin : 0 auto;
position : relative;
top : 50px;
}

Ｏｐｅｒａ、ＮＮはボックス領域を指定してもＩＥと違いきっちりと
width,heightを表示するよ。
ＩＥの場合、width,height指定してもコンテンツがそれよりも大きければ
ボックス領域が可変するけど、
Ｏｐｅｒａ，ＮＮは、コンテンツに関わらずwidth,height指定通りにボックス領域を
レンタリングする。
回避する方法は、画像が一枚であればその画像に沿ったボックス領域を指定。
画像が複数枚であれば<br>などであらかじめ長さを決めといてボックス領域を指定するぐらい
だろうと思う。
min/max-width/heightってのがあるけども、ＩＥ６では対応してない。

>>2の訂正：

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
　http://pc3.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト { number: 3; } */
　http://pc3.2ch.net/test/read.cgi/hp/1010800617/
・* CSS { イケてるスタイルを："作れ";}
　http://pc3.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
　http://pc3.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 6rd Stuff
　http://pc3.2ch.net/test/read.cgi/hp/1028647240/

>>158
それ>>5で既出。

>>159
ここ
・CSSコミュニティの功罪を評価するスレ 6rd Stuff
が新スレになったみたいなんだなー。　 ￣￣
だから今日からは>>158なんだなー。

ミスってageちゃったんだなー。
ｺﾞﾒﾝ。

そんなん移行前にまとめてやればいいじゃん

すみません
スレ違いだと思うのですが
外部にjavaスクリプトファイルを作るにはどうすればいいのでしょうか？
ｃｓｓは作れたのですが・・・

<script type="text/javascript src="hoge.js"></script>
スレ違いだが。

<script type="text/javascript" src="hoge.js"></script>
まちがえた。

You is a big fool man

ありがとうございます
本当にどうも

Thank you.
Really plese.

すいません
ページへの記述は<LINK rel="javascript" href="usotsuki.js" type="text/javascript">
これだとならないのですが別のですか？

外部ファイルは
<script type="text/javascript" src="usotsuki.js">
<!-- 不可視領域
function swMenu(elem){
if(elem.style.display != "none"){
elem.style.display = "none"
} else{
elem.style.display = "inline"
}
}
function dispImg(image,text) {
photoArea.innerHTML = "<img src='" + image + "'><br><br><div style='font-size:9pt;text-align:center;image-align:center'>" + text + "<"+"/div>"
window.status = photoArea.innerHTML
}
// 不可視領域終了 -->
</script>
こんな風に書きました

>>169
>ページへの記述は
って何が？

<html>
への書き込みです

HTMLのほうに>>165をかくんだよ

<html <LINK rel="javascript" href="usotsuki.js" type="text/javascript"> >

>>169
スレ違い

>>174
ありがとうございます
助かりました
>>175
板汚してすいません
今後はしませんし、自覚してます

>>176
自覚しましたでしょ。
自覚してるんだったら書き込むなよ。

>>177
くどいですよ

onmouseover='this.style.backgroundColor="#FFDDDD",
this.style.color="#444444",this.style.fontSize=13' onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13'
これcssに書き込めますか？
よろしくお願いします

>>179
書き込めたよ。

span.1{この部分}
この部分に書いたんですが作動しません
>>180さん、どうかきましたか？

span.1{
/* >>179 */
}

やっても作動しないのですが
span.1{
/* onmouseover='this.style.backgroundColor="#FFDDDD",
this.style.color="#444444",this.style.fontSize=13' onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13'*/
}
これだといけないのでしょうか？

/* これはコメントです。
「CSS」と「JavaScript Stylesheet」の違いを勉強しましょう */

>>179
無理だから

なるほど

>>179
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--

span.c1 a:link
{
color: red;
background-color: black;
font-size: 13pt;
text-decoration: none;
}
span.c1 a:visited
{
color: red;
background-color: black;
font-size: 13pt;
text-decoration: none;
}
span.c1 a:hover
{
color: #444444;
background-color: #ffdddd;
font-size: 13pt;
text-decoration: none;
}
-->
</style>
</head>
<body>
<p>
<span class="c1"><a href="#">ABCDE</a></span>
</p>
</body>
</html>

>>187
使えませんでした

バリバリ使えるんだが？

自分のHPに適用したら拒否されました

君のやり方でいくとこうなる。タグに含めるんだな。

<span
onmouseover='this.style.backgroundColor="#FFDDDD",this.style.color="#444444",this.style.fontSize=13'
onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13'>ABCDE</span>

ホントは分離したい。

<span onmouseover='eve1()'>ABCDE</span>

eve1()を別途定義するわけだが、それは自分で勉強してくれ。
ちなみに、このレベルでjavascriptスレに行くと苛められるから止めとけ。

はい、ありがとうございました

>>192
あんた、もーちょいCSSの基礎から学ぶことをすすめする。
CSSは他との組み合わせによって表示が崩れたりするから
何が原因かをつかめるようにしといた方がいいぞ。
その場しのぎで今回に限って使いたいってのならまた別だが。

なんだよJavaScripじゃなくてCSSでやりたいけどって意味じゃないのか世。

どっちにしろ無理だろ

CSSなのかJavaScriptか分からないので
こちらに書かせていただきます。

マウスカーソルの形を変えているサイトはよく見るのですが、
自分でそのマウスカーソルの画像を作るにはどうしたらよいのでしょうか？
もちろん、自分のパソコンだけでなく、
サイトの訪問者全員が見られるようなものです。
どなたかよろしくお願いします。

>>196
そんな事するな。アクセシビリティ、ユーザビリティ共に不便な事極まりない。
以上。

>>196
ウィンドウズ用のカーソルファイルを作って、CSSで

body { curosr: url(my.cur); }

とする。ただしIE6のみ。

>>197
すみません。
あるサイトで普通のマウスカーソルに色がついたものを見て
どうやってやってみるのか知りたかったんです。

>>198
できました。ありがとうございます！

スクロールバーの色変えるのあるじゃないですか？
詳しく忘れたけど、
bodyのあとに、カーソルの色、矢印の色って、設定するやつです。

それは出来るんですが、
例えば、フレームを使ってるページで、
「フレーム内に表示されるものは、全部このスクロールバー」
っていう風に設定できないですか？

おそらく出来ないんでしょうけど、
もしあれば、楽だなぁなんて思いまして・・・

>>200
そうですか。あれば楽ですね。

>>200
あんまり言ってるいみがわかんないけど、
フレームの各ﾍﾟｰｼﾞにそれぞれの設定した外部スタイル
読み込ませればいいんじゃない？

全部タグに書いてるので外部スタイルなんて知らない罠

ちょっとお聞きしたいんですが
border-styleのdashedはNN4.7では表示されないんでしょうか？

はい

そうですかー
ありがとうです

なんで改行がBRじゃだめなんですか

だめじゃないけど

でも<P>が多いですよね。
<BR>が好きなんでDreameWeaverでもいつもshift+enterなんですけど

突っ込まれる前にDreame=Dream

好き嫌いじゃなくて時と場合によりけり。
PとBRはそもそも用途が違うでしょ。

段落、ですよね。
でも一行改行するだけでも<br><br>としてしまう
俺はだめですか

だめです

だめ人間に認定されますた

ﾔｯﾀﾈ

俺も<br><br>だよ…

body { font: 16px #000000 "ＭＳ Ｐゴシック";
background: #ffffff fixed url(kabe.gif); }
h1 { font: 14px #000000 "ＭＳ Ｐゴシック" }
こんな感じの外部スタイルソートを指定して、
文字を少し小さくしたい所だけ<h1>ここに小さくしたい文章</h1>
としているのですが、NNで表示させるとフォントがやけにでかくなります。
<h1>の使い方間違ってますか？

NNもバージョンによる可能性あり。

あと、スタイルシートなしのときとの大きさは？

<hx>←文字装飾目的に使ってるなら間違い。

何から何までネタですか？

>>217
デザイン目的で装飾したいならdivやspan、
文字を小さくするだけならsmallでも使いなさい。

外部スタイルシートへのリンクをはずし、
<h1>をはずし、NNで表示させるとと普通のサイズになります。
（K@tsukun's PAGE!さんをNNで見たときと同じ）
ちなみにNN4.78とNN7どちらもためしました。

ネタじゃないんです。。。<div>や<span>で指定すると、
文字装飾の指定できる数にも限界がありますよね？
<hx>なら<h2><h3>..としていけば、、と思っていたもので、、
すいません。。アホです、、

>>223
classやidといった概念があるので>>4当たりのサイトを見て勉強してください

はい、電波な質問連発ですいませんでした。
>>4で勉強してきます。

できました！
ではお世話になりました。

>>223
class指定って知ってるか？

うわ、もう解決済みって話？
バカは漏れか・・・。
逝ってきます。

>>227-228
ｵﾂｶﾚ（w

特定の列にtext-alignを一括指定する方法はないのでしょうか？
CSS2仕様書では、
'border' 'background' 'width' 'visibility'
のセルそのものを操作するプロパティしか選べなくて、セル内の
テキストを一括して操作するのは無理っぽいんですが。

IE6では無理やりテキスト操作しますが、Mozillaでは仕様書通りの
動作をするので・・・。できたら便利なんだけどな。

関連URLです。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/tables.html#q4

<col span="x" style="text-align:center">でいくしか思いつかない。
ところでMac IE5.0ってテーブルtext-align:center指定すると無視らない？？

>>230
3列目を中央揃えなら
tr > * + * + td {text-align: center}
tr > * + * + * + td {text-align: left}

>>230
<col align="right">
でやるのが正しいのでは。
col, colgroup, td, thのalign属性はstrict DTDに含まれてるし。

>>232
無視はしないと思うが？
と言うか、tableにtext-align:centerを指定すると
結果がどうなるべきかわかってるよね？

>235
中身のテキストや画像が中央揃いになるはずなんだけど、ならない……。
Windowsだとなるんだけど。

>>236
スマン、tableに指定しても無視するかも。
tdにtext-algin:centerを指定してみれ。

てことで、ちょっと確認してみた。
tableに指定しても無視するね。
俺は自分のサイトでtdに指定してたよ（鬱）

>>234
なるほど、CSSでなく、HTMLでやればよかったのですね。
アドバイスをしてくださった皆さん、ありがとうございました。
これから試してみます。

みんな、動作確認のブラウザはverいくつを使ってる？特にIE。

うかつに上げる訳にはいかないけど、CSSの現状も体感しておきたい。。
リファレンス本の対応表だけで知った顔してるのもアレだしね。

PC一台しかもってない身は潮時の見極めが難しいな。

>>240

6と5.01SP2と4.01SP2を用意。
まあ6と5.0xで行けるなら間の5.5でも大丈夫だと思い、5.5は省略。

難しいことをやると4.0xで崩壊することがあるので、時々チェック。

4からのバージョンアップした5なら（インストール時に指定したら）
4互換モードがあるので、それでもよい。

GeckoモノやOperaは最新版だけでよかろう。

3つも使えるのか…うらやましいな。
俺はつい最近、魔がさして5.0→5.5に上げてしまった。

あの頃の非対応ぶりを忘れるべからず、と自戒しつつも、やっぱりどこかで
下位互換に対する意識が甘くなっていっちゃうんだよね。1つだけしか持ってないと。

＞GeckoモノやOperaは最新版　には同意だな。

>>237-238 サンクス。セルに指定してみますわ　こんなバグあったんだな……

>>240
N7.0PR1(Win&Mac)、WinIE5.5、MacIE5.1.5、Opera6.04で確認してる。
スタイルシート適用除外のブラウザ（N4.79、iCabとか）でも
一応念のためチェックしているけど、こっちはあまり意味はないな。
むしろlintで文法チェックすることの方を重視してる。

imgにボーダーなしで
a:hoverの時のみボーダー出るようにするにはどうすればいい？

>>245
imgのボーダー関連は色々と問題があるから
具体的にどうやって、どう駄目だったか説明してくれないと。

本当はimgにボーダー表示したくないんだけど
1px指定しないとa:hoverも反映されないんだ
だから今はこういうソースになってるよ

img{
border : 1px solid #000000;
}
a:hover img{
border : 1px dashed #ff0000;
}

どうすればいいかな？

>>247
それでいい

む、無理ってこと？

ポイントは擬似要素

画面の左に線を出したいのですが

html{
margin: 0;
padding: 2em;
border-color: #fff;
border-style: solid;
border-width: 0 0 0 4ex;
}
とするとUAの枠が消えてしまい、違和感が残るので
body{
margin: 0;
padding: 2em;
border-color: #fff;
border-style: solid;
border-width: 0 0 0 4ex;
}
としましたら、UAの枠は残っていましたが　線が途中で切れてしまいます

UAの枠を残して尚且つ画面いっぱいまで線を出すにはどうしたらいいでしょうか？
意味不明ですいません。

ＵＡの使い方間違ってる。
htmlに指定したらできるぞ？
html{
margin: 0;
background:black;
border-color: #fff;
border-style: solid;
border-width:0 0 0 3em;
}

ｱﾌｫか。志ね

騙りか？

>>768
(　´,_ゝ`）ﾌﾟｯ

それを見た瞬間、私は凄い誤爆だと思ったんですよ。

positionがabsoluteのボックスでは、margin-left:autoとmargin-right:autoで
センタリング出来ますか。どうも左寄せのままになってしまうのですけれども。

>>257
絶対無理。

初心者で申し訳ないのですが、どうしたらうまくセンタリングできますか。

>>259
ボックス位置を絶対指定してるしてるのに、センタリングしたいってのが意味不明。
absolute削って、普通にmarginをautoにすればいい。

absoluteを削るとボックスの中のボックスが外に出てしまうのですけど。

>>261
absolute指定したボックス内のボックスをセンタリングしたいってことね。。
んじゃ、普通に内側のボックスにmargin:autoを指定してやればできるでしょ？

.outer {
color:white;
background:black;
width:300px;
height:300px;
position:absolute;
top:100px;
left:100px;
}

.inner {
color:white;
background:red;
width:100px;
height:100px;
margin:auto;
}
==================
<div class="outer">
<p class="inner">うんこ</p>
</div>
というような感じ方

いえ、ボックスの中は絶対位置で配置してあるのです。
その配置してあるボックスを囲っているボックスを、
ページの真ん中にもってきたいのです。

>>264
ｶﾞｰﾝ・・・
それは無理。絶対指定ってのは親要素を無視（影響を与えない）するから親要素なんだよ
内側のボックスはrelativeにするとできるけど。absoluteジャム理。

>>265
するから絶対指定ね

そうですか･･･、ありがとうございました。
他のレイアウトを考えて見ます。では。

#outer {position: relative; top: 0; left: 0; margin: auto; width: 400px; height: 300px; border: solid 1px green;}
#outer #inner1 {position: absolute; bottom: 10px; left: 30px; width: 200px; height: 100px; border: solid 1px blue;}
#outer #inner2 {position: absolute; top: 40px; right: 80px; width: 260px; height: 120px; border: solid 1px red;}

<body>

<div id="outer">
<p id="inner1">inner1</p>
<p id="inner2">inner2</p>
<p>normal</p>
</div>

</body>

こういうことがやりたいんじゃないの？
outer はページ（左右）中央で，その中の inner1, 2 は outer に対して
絶対位置ってことじゃないの？

そうです。

ありがとうございます。上のソースは参考にさせていただきます。

>>245 >>247っす
できるはずだよ
以前どこかのサイトでしているのを見た
教えて欲しいっす

>>271
しつこい。
だったらそのサイトを探せ。

img{
border : 1px solid #000000;
}

img:focus {
border : 1px dashed #ff0000;
}

だからさー
できるっていってんだからさー
あ　もしかしてここの人スキル低いの？（ｗ
ごめんねー

>>274
あほか。

＞＞２７５
わかんねえなら黙ってろって（ｗ

>>276
わかんねぇなら調べろって(激ﾜﾗ
つーか、騙ってんなよ。おばぁちゃんの家からアクセスか？
そのまま、行方不明でもなれば？(pu

>>274
img{margin:1px}
a:hover img{border:1px solid #000}

とかで、できるかもなー。

ってことで失せろ。

＞＞２７７
＞わかんねぇなら調べろって(激ﾜﾗ
これじゃ質問スレッドの意義無いだろー　ｱﾌｫってやつですかー？

＞つーか、騙ってんなよ。おばぁちゃんの家からアクセスか？
君、どこからおばあちゃんが出てくるのかね
おばあちゃんっこですかー？

＞そのまま、行方不明でもなれば？(pu
意味不明ですねー

img{margin:1px}
a:hover img{border:1px solid #000;margin:0}

marginなくすの忘れてた。

>>274 は 278ね。

>>279
ぎゃはは、脳天爆発してんな、おまえ
いちいち引用して、解説まで加えちゃって（ぷー
めでてーめでてー　、ごくろうさん（ﾊｧﾄ

おいおい　煽る方が電波になってるぞ

>>280
それじゃできないだろ

いままで何度となくこのスレを救ってきた頼みの一言！

↓はい、次の質問。

http://pc3.2ch.net/test/read.cgi/hp/1026611260/731n
を読めやｺﾞﾙｧ。

↓改めて、次の質問。

感情的にならない
　　　何の説明なく決め付ける文はよい印象を与えない。
　　　また態度の大きい人は嫌われる。
　　　　　　ex) 答えられねぇんなら黙ってろ！！！　<お前だけだよ>

弱気な表現は避ける
　　　弁解じみた表現は良くない。また、まわりくどい。
　　　　　　ex) 超初心者で何もわかりませんが……
　　　　　　　　　<わからないなら>>3-5,>>23を読めよ>

表記ミスに注意
　　　内容がどんなにすばらしくても
　　　文字使いにミスがあると誤解を招く。

曖昧文は書かない
　　　いくつにも解釈できる文章は絶対に書かない。
　　　　　　ex) ここではきものをぬいでください。

「」など無駄な強調は避ける
　　　読みにくい。♪や顔文字も同様である。

情報を小出しにしない
　　　読み手は馬鹿にされた気分になる。
　　　無駄な倒置も不要だ。
　　　使用したブラウザ、バージョン、OSくらい書こう。

<わからないなら>>158,>>3-4を読めよ>

読むのがめんどくせーから聞いてんだよ
その程度の事もわからねーのか

夏、真っ盛りだな

以前テーブルの列にtext-alignを指定する方法について質問した者です。
>>232-234の方法を試してみたのですが、WinNetscape7.0PR1は、
いずれの方法も無視してくれました。WinIE6.0は>>234だけが効きませんでした。
ブラウザが実装してないんですかね？

div{
border:1px solid #000000;
margin: 0px 0px 1px 0px}

<div>Name_Not_Found</div>
<div>Name_Not_Found</div>
<div>Name_Not_Found</div>

そんなに変なことやってないと思うんですけど、IE5.0ではﾎﾞｰﾀﾞｰ同士がくっついてしまいます。
marginを 0 0 3 0 にしたら、1px分だけ開きました。これはなんでしょうか？

IE6.0、Mozilla1.0、Opera6.03では期待通りに動きます。後方互換モードです。

>292
IEはボーダーの内側からマージンを取ってるんじゃないの？
マージン幅変えたり実験してんなら、自分でわかりそうなもんなんだけど・・・

>293
IE5と6ではマージンの計り方が違うということですか？
んー、もうちょっと弄ってみます。。

body {} html {}
bodyとhtmlにスタイルするのはどちらも同じですか？

>>295
ブラウザによりちょこっと変わる。

>>274
自分がわからなくて例え相手もわからなくても、
聞いてる側は下手に出なきゃいかんのです。
それが礼儀ってもんであり、厨房脱出の第一歩かもしれん。

あ、言うまでもなく僕はどうすればできるかは分かりません。
チョト覗きに来ただけなもんで。。

頼むから終わってる話題にレスして話題をループさせるようなマネは控えてくれんかね、夏君

>>298
>>298

"Valid CSS!"貼ってる人いる？

>>298すごくごめん

>>300
いっぱいいる

いっぱいいるのか…

しかし、あんなバナー貼りたくない。ｶｺﾜﾙｲ

テキストに
line-height: 150%;適用してるんですけど
imgを貼ると文字の間隔が狭くなります
解決法はあるのでしょうか？

>>305
んなこたーない。

本当です。
ソースは↓です。

.text{
line-height : 150%;
}
<span class="text">
ラインヘイト無効になります。<img src="mojikankakusemakunaru.gif" width="15" height="15">
</span>

すいません間違えました。

<span class="text">
ラインヘイト無効になります。<br>
ラインヘイト無効になします。<img src="mojikankakusemakunaru.gif" width="15" height="15">
</span>

ヘイトじゃなくてハイトな。

画像を、文字の右にもっていきたいのですが、
画像をdivかspanのとちらで囲めばいいですか？

<h1>タイトル</h1>
<img src="xxx.jpg" width="10" height="10" alt="女の子の画像">

タイトルの右に画像を持っていきたい場合、H1にfloat:leftとしますが、
imgはdivか、spanどちらで囲めばいいですか？

h1{
display:inline;
}

#a {width:10px
padding:100px;}
とするのはおかしいですか？

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

クリックで救える命がある。
http://www.dff.jp/

>>310

StrictなHTMLではbodyの直下にインライン要素を置けないので、
ブロックレベル要素のほうがいいんだが、Transitional系HTMLなら
そういう制限はないから別にspanでもいいんだけど、レイアウトの
自由度からするとブロックレベルのほうがいいような。


あとその場合、altの使用が不適切だなあ。
そういう装飾用のワンポイント画像（サイズから判断した）なら、alt=""
のほうがいい。

俺なら、その画像はimgで挿入するのではなく、H1の背景画像に
しちゃうけど。

<HR>タグのborderを設定してるのですが、
paddingもしくはmarginのbottomって設定できますか？
下に空白を開けたくないんですが、なかなかできないのです。

>>316
フツウに出来ると思うが。

hr{
border : #SIZE #COLOR #STYLE ; /* 順不同可 */
padding : ???? ;
margin-bottom : ???? ;
}

でダメなの？

すいません、便乗で質問があります。

>>310さんのようなHTMLでCSSを使って画像をタイトルの左にもっていきたいのですが
どのように指定すればよろしいのでしょうか？

view-source:http://kusemono.tripod.co.jp/
これなんですが116行目の所のHRと下の<H3>との間が詰まりません。
padding:0px;
http://kusemono.tripod.co.jp/css/design_base.cssの
HR.2を<HR class="2">って感じで入れてるのですがどこが原因かわかりません。
もし分かりましたら教えてください。

>319
HRの線自体が上下に空白の入った画像みたいなものだからそれ以上は無理。

やっぱり回避できないんですかね？

>>320　わかりました。どうもありがとございました。
　　　　できないとは知らず試行錯誤してました（恥ずかし..

>>322
<hr>を消して(display:none;とかで)、h3のborder-topに同じ色の
線引くのじゃダメなん？？

>>323
H3
{ border-top-width:3px;
border-top-color:red;
margin-bottom:0px;
margin-top:0px;
padding-left:12px;
padding-top:2px;
padding-bottom:1px;
color:#2f4f4f;
background:#d3d3d3}

これに変えてみたのですが（色は暫定的にわかりやすい色で）
どうもうまくでません。
HR.2というのにdisplay:none;を入れたんですが。
何度も聞いて済みませんが教えていただけないでしょうか？

>>324
border-top に style 設定しる

318です。
あれから色々と試行錯誤してみましたが、やはりどうもうまくいきません。
どなたか、よろしければヒントを下さいませ。

>>318
CSS使わんでも普通に画像の回り込みをさせるだけではダメなのか？

>>325　できました！すごいです。
　　　　ちょっとしたアクセントが欲しかったんですけれど
　　　　助かりました。ありがとうございます。

>>327
レスありがとうございます。
なるべくならStrictでやっていきたいと思っているのです。
現状のCSSではできないということでしょうか？

>>329
ん…imgの回り込み指定はstrictじゃなかったのか？alignは何が何でもダメだったっけ、わかんね。
いや、別にCSS使えばすぐに出来るよ、float使えばいい。

レス感謝です。
alignはStrictではなかったと思います。
CSSでもfloatを使えばできるとのことですが

<h1>タイトル</h1>
<p>段落<p>
<img src

それを

┌────┐タイトル
│　　　　│段落
│イメージ│
│　　　　│
└────┘

のようにしたいのです。
具体的には美術館のように絵とそれのタイトルと説明をいれたいのです。

確か過去のスレにも似たような質問をされている方がいましたが、そのときは

<img src

レス感謝です。
alignはStrictではなかったと思います。
CSSでもfloatを使えばできるとのことですが

<h1>タイトル</h1>
<p>段落<p>
<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">

例えばこのようなHTMLでイメージをテキストより左におく場合、
どこにどのようにfloatを指定すれば良いのでしょうか？

イメージにfloat:leftを指定するだけでは

タイトル
段落
┌────┐
│　　　　│
│イメージ│
│　　　　│
└────┘

このようになってしまいます。

↓続きます。

それを

┌────┐タイトル
│　　　　│段落
│イメージ│
│　　　　│
└────┘

のようにしたいのです。
具体的には美術館のように絵とそれのタイトルと説明をいれたいのです。

確か過去のスレにも似たような質問をされている方がいましたが、そのときは

<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
<h1>タイトル</h1>
<p>段落<p>

のようなHTMLだったので自分のとは状況が違っていました。

なにやら初歩的な質問をしているようで申し訳ありませんが、よろしければもう少々
お知恵をお貸し下さい。

すいません、一回目の書き込み途中できれてしまいました。
板汚しすいません。

アフォの意見
h1 と p に 画像の幅のぶんだけ margin-left 設定して
画像は絶対配置でその余白のとこに置く・・・

<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
<h1>タイトル</h1>
<p>段落<p>

何でこの形にしないのか

>>331-334
というか、Strictではbody直下にimgは置けないんだけど。

>>337

Strictな考えからいうと、その場合画像はそのタイトルを説明する物だから、
段落と同格でHTML上タイトルより先に画像を配置するのは不自然では？

それに例えば
　<h1>美術作品</h1>
　<h2>XXXX年代の作品</h2>
　<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
　<h3>ゴッホの自画像</h3>
　<p>これは＊＊＊＊で＊＊＊＊な絵。</p>
　<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
　<h3>ムンクの叫び</h3>
　<p>これは＊＊＊＊で＊＊＊＊な絵。</p>
　<h2>YYYY年代の作品</h2>
　<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
　<h3>モナリザの手</h3>
　<p>これは＊＊＊＊で＊＊＊＊な絵。</p>
みたいに画像を先にもっていくと１番めの画像がh2の、２番目のムンクの画像がゴッホの
下の階層、という解釈にならない？

ちなみに俺は美術とか詳しくないからそこら変の突っ込みはご勘弁を。

Strictスレより
http://pc3.2ch.net/test/read.cgi/hp/1028963710/87-

ここってつまらん突っ込みばっかで結局解決策はでないんだよな（藁）
やっぱCSSなんてクソだな。
Goliveでレイアウトグリッドでも敷いて遊んでろ（藁）

>>331-334

その画像が、文書の中で明確な意味を持たない（装飾）ならば、

<div id="header">
<h1>タイトル</h1>
<p>段落</p>
</div>

といったようなHTMLに、

#header {
height : 100px; /* 画像の高さ */
padding-left : 100px; /* 画像の幅 */
background : transparent url(xxx.png) no-repeat scroll left;
}

#header h1,#header p {
margin-left : 1em;
}

という風なstyle指定をしてやるのが妥当かと。
画像の大きさに対して、読み手のウィンドウ幅が小さい場合、
レイアウトが乱れてしまうという難点はあるけど。

>>339
スレ違いだけど、画像の説明の場合は、

<dl>
<dt><img></dt>
<dd>説明</dd>
</dl>

とするのが一般的みたいだね。
一般的といっても、あくまでstrict界隈での話だけど。

>>336
アドバイスどうも！
私もそれを考えたのですが、いじる所がおおくて他との兼ね合いで表示が崩れたり
もう少し楽なやり方はないかと探していた次第です。
でもありがとうございます。

>>338
上に書きました通り画像は絵ですので
「その画像が、文書の中で明確な意味を持たない（装飾）」
かどうかは正直怪しいのですが、>>338さんのいうようにしたらできました！
本当にありがとうございます。
これでやっとテーブルレイアウトを卒業できそうです。

レスして下さったみなさん、本当にありがとうございました。
自分の未熟さを知った次第です。
もっと調べて今後は他の方の質問に答えられるようなふうになりたいと思います。
ありがとうございました。

>>344
正直、CSSで凝った事やる前にHTMLをもうちょっと勉強した方がいい。
あ、XMLか(ｗ

一つの要素に対して二つ以上の背景画像を指定することってできますか。

<h2>a</h2>
<h3>b</h3>
h2 margin-bottom:1em;
h3 margin-top:1em;
としたのですが、aとbの間が、1em分しか
あかないのですが、正しいのでしょうか。

>>345
ムカッ！もうムカつきました。
こちらが丁寧にレスしているのに随分と失礼な方ですね。

それに、こないだちょっと聞きたいことがあってここで聞こうと思ってスレ立てたら滅
茶苦茶荒らされました。 なんか質問でスレ立てるのはルール違反だの質問スレで
聞けだの言われたけど、初めてここに来た初心者はそんなの知らないことが多いと
思うし 忙しいと検索して探したり過去ログ読んだりなんかできないと思う。急いでる
時なんかは質問スレ行ってもいつ答えてもらえるか分からないし。

そういう人たちに匿名でここまで読んだとか食べ物の話とかして荒らすほうが悪質
じゃないか？本当に困ってる人や初心者で知らずに質問スレ立てる人もいるんだか
ら、少しくらい質問スレが立っても大目に見るべきだと思う。
そうしないとWEB板の住人＝知ったかで閉鎖的っていつまでも言われるよ？

ルールで質問スレ立てるの禁止でも上で書いたみたいに仕方が無い場合もあると
思うからWEB板全体のルールを含めて少し質問スレに対する態度を考え直してみ
ませんか？ここで前向きな議論が発展したら他の板にも同じスレを立てて住人の
反省を促していきます。

注・知ったか厨房の荒らし厳禁

>>347
marginは相殺されますので、正しいです。

<p>…</p>
<p>…</p>
とすると、pのmargin-topとmargin-bottomは、たいていデフォルトで1emですが、
2つのpの間は1emしか空かないのと同じことです。

>>348
もうちょっと改造を加えた方が良かったな

>>349
ありがとうございます。
説明が凄くわかりやすいです。

ﾌﾞﾋﾋﾋﾋ

>>352
何こいつ、キモイ。

最近、騙りが多いな　ＩＤ強制しないと荒れてばっかりだ（ﾌﾞﾋﾋ

>>354
何こいつ、キモイよ。

↓何こいつ、キモイよ。

↑何こいつ、キモイよ。

お前らみんな落ち着けや

お前らが何を言おうがキモイのはこの俺だ、これだけは譲らんぞ

↑何こいつ、ウザイよ。

そうだ、俺はキモクてウザイ。それは間違いない。

↑何こいつ、臭いよ。

臭くもある

↑何こいつ、もちょいよ。

俺は年中もちょもちょしてるよ
蚊ぐらいは簡単に捕まえる

↑何こいつ、ぷるぷるしてるよ。

うん、よく言われるんだ。
「うわ、お前めっちゃぷるぷるやな！」って。
子供にはウケがいいよ。

↑何こいつ、カチカチだよ。

どーしたどーしたぁ！

>>245だけど
http://www.fumi23.com/index.html
↑やってる

どうすればいい？

おまいはあれだけ暴れといて。。。

なんかもっさりしてるな。
リンク多すぎるとa:hover重くならないか？

>>348
お前全然ダメ
自己厨ってお前
最悪しね

だれか言ってたけど暴れていたのは
騙り野郎ですよ。
教えてください。

>>373
ウザイ　バレバレ　氏ね

>>369
タネは画像に枠を描いていて、それを透過色にしている。

□□□□□□□□□□□□□□□□□□
□■■■■■■■■■■■■■■■■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■■■■■■■■■■■■■■■■□
□□□□□□□□□□□□□□□□□□

hoverでa要素で囲っているとこの背景色変えて、
変わった背景色が透過されてるとこから見えて
枠が出てるように見えるだけ。

終わり

それは初耳だな。ホントにできのか。

>369
a img{
border: 1px solid 背景色}

a:hover img{
border-color: 出したい枠の色}

×できのか
○できんのか

ついでにage

sage

hoge

最近いるのは同一人物なのかねぇ…。

>>376
たしかに、hoverに背景色指定してやると、画像の背景色も変わります。
Netscapeの6と7だと、画像の下半分しか変わらないけど（バグ？）。

ただ、>>375 のやり方より、 >>376 の方が手間が少ないし、スマートな気が
するなあ。

>>374
本当だよ。
みんなわかってそうなもんだったから
わざわざ否定する必要ないかな〜と思ったんだけど。
>>375
なるほどーそういうことか
ソース見てもわからないはずだねありがとう
>>376
この方法で行くよありがとう！

なんかなぁ、、、

>>382
なんだよ、この言語障害やろう
「なんかなぁ、、、」じゃ、何にもわかんねぇんだよ
言いたいことあるなら、言えよ

まぁまぁ落ち着いてくださいよ（＾_＾；

( 　ﾟ,_ゝﾟ)ﾊﾞｶｼﾞｬﾈｰﾉ

チェックボックスのバックカラー変えることできますか？
探し方ヘタなのか、検索しても見つからない

( 　ﾟ,_ゝﾟ)ﾊﾞｶｼﾞｬﾈｰﾉ

style="background-color: blue;"

>>388

できやした。どうも

単独のファイルでIFRAMEタグのように振舞うテキストエリアを作りたいのですが、可能でしょうか。
もちろんフォームじゃなくてかまいません。

スクロールバーが付いていて、幅/高さの指定が出来ればいいんですけど。

>>390
<div style="overflow: scroll; width: 20em; height: 5em;">
ここに長いテキストを書く。
</div>

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

みなさまはネットスケープ6に対応させていますか？
つい最近CSSの本を借りて勉強し始めたのですが、
いきなり、最初からやる気がしなくなりました。
本のサンプルの通りにpaddingを付けたらネットスケープ6では
widthがその分広がってしまうのです。

CSSを使用している制作者の方々は、こんなブラウザ毎の違いに
時間をかけて対処しているのですか？

あと、疑問なんですが、何故違う会社が作っているのにwidthとかcolor
だとか同じ名前なんでしょうか？どうせブラウザ毎に違うんだから
違う名前にしてくれたほうが有り難いと思うのですが。
違う機能が同じ名前で、記述方法だけは同じだなんて、迷惑千万です。

>>393
そうです。

>>393
＞何故違う会社が作っているのにwidthとかcolor
＞だとか同じ名前なんでしょうか？
CSSは違う会社が作っているのではないからです。
>>3-4のリンク先で勉強してからまた来てね。

>>393
Mozilla=Netscape 6は仕様通り。WinIEが間違ってるんだけどね。
それがイヤなら、
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5で有效。*/
-moz-box-sizing:border-box; /* Mozilla用の記述。N6で有效。*/
}
とシートに書いておく。

>>390
逆に、iframeを使った外部ファイルの表示を、
スクロールバーなどが出ないように高さを自動調整して
表示させるようなことはできないものでしょうか。

iframeを使うことにこだわりはないです。外部を埋め込めれば。

>>397
それはCSSじゃない、SSI

>>398
（　´,_ゝ｀）ﾌﾟｯ

>>397
それはMS-DOS

>>400
( ﾟДﾟ)・・・・・・

可か不可かだけでも教えてもらえませんか。

>>346
何をどうしたいんだか、よくわからない。
下記を読んで、まだわからなかったらもう一度質問してくれ。
http://members11.tsukaeru.net/msugai/web/CSS/back.html#background-image
http://www.age.jp/~dfj/html/background.html#background_image

>>402
可か不可といえば、CSSじゃ絶対できないので、スレ違いだから他のスレ
行ってくれというか。

.jsでOS,ブラウザ別に振り分けた外部.cssでfont-sizeを反映させた場合
なんですが、テキストの色の指定はみなさんどのようにされてますか？

font-size:10px; line-height:150%;のtxt10、で青でボールドの場合は

<div class="txt10"><font color="#0000ff"><b>魂</b></font></div>

なんて結局fontタグ使っちゃってんじゃん、、、おすすめはいかがで
しょうか？

若干意味不明なんだが

div{
font-size: 80%;
line-height:150%;
color: #00f;
}

こういうことじゃないの？

divtxt10{
font-size: 80%;
line-height:150%;
color: #00f
font-weight: bold;;
}

こうかな　ゴメソ

外部ファイルでﾃｰﾌﾞﾙの背景色を指定したいんですけど、

table { bgcolor: #CCCCFF}

これじゃ変わりません。
正しい記述を教えてください。

>>408
……一から勉強し直してください。
　↓
http://www.tg.rim.or.jp/~hexane/ach/cs1r/

http://www.returner.net/

>>403
例えばh1要素に大して、alpha.pngとbravo.pngの両者を背景画像として
指定したいんですが。

>>404
そうですか。ちょっと論理要素以外を記述してまでやりたいわけでも
ないので、無理だったら諦めます。

>>409
ﾈﾀじゃないです。

でもお手数かけてすいません。
ありがとうございました。

>>411
初めからalpha.pngとbravo.pngを合成したalphabravo.pngを背景画像にしてはいけないのか？
でなきゃ、同一要素でなくてh1要素とそれを囲むdiv要素にそれぞれ
別の背景画像を指定して重ねる。透過画像をうまく使って。

>>413
alpha.pngはタイル貼り、bravo.pngは位置を指定してno-repeatで貼る、
というようなことをしようと思っていたので・・・。
取り合えず後者のh1要素とdiv要素のやり方でやってみます。
有難うございました。

input {
border: 1px solid #000;
background-color: #fff;
}

こんな感じなんですけど属性値がsubmitの要素だと
inputエリアの内枠が黒くなりますよね
擬似要素を使うのかと思ったんですが
どの擬似要素を使えばいいのか教えてくださいです

そう、実はSSIと同じことをやりたいわけなんですが、
サーバーサイドにあんまり負担をかけたくなくて…。
SSI include の負担って大したことないんでしょうか？

CSSでできない場合スレ違いｽﾏｿ。

>>415
その文章では、何をどうしたいのか判らないので、まずはCSSの前に日本語を
勉強しなおしてほしい。

>>416
外部ファイルの更新時間をチェックして、
更新されている時だけ、自動的に
HTMLを全部書き換えれえうようにすればいい。
サーバーへの負担が少なくなるように工夫できる。

CSSの話ではない。

.zzzz li+.zzzz li:before {content:"、";}
というのは、IE6では表示しないのですが、
.zzzz li+li:before {content:"、";}
こうすると、表示します。
なぜ上のではいけないのですか？

IEは + も :before も content も対応してないと思うぞ。

>>419
.zzzz li+.zzzz li:before
.zzzz li+li:before
意味が違うけどわかってるのか？

スタイルシートを外部CSSファイルで作成し、それにリンクさせる形で
使ってます。
そのファイルでクラス設定が多くなりすぎたので
新しく外部CSSファイルを作成することにしました。

そこで問題が出てきたのです。

最初の外部CSSファイルで、＜a＞タグの擬似クラスを設定しているのですが
新しく作った外部CSSファイルで全く同じ設定しているのにも関わらず
キチンと動作してくれないのです。

要は、リンクの上にカーソルを乗せると色が変化する設定が
新しく作成したファイルで全く同じ設定なのに色が変わってくれなくて
困ってるってことなんですが、どうしてなんでしょうか？

最初に作ったファイルを使えば色は正しく変化します。

>>422
記述ミス

擬似要素の後は空白開けとけ
a:link {}

むしろ全角空白だったり。

空白は俺はTAB派だな。

<html lang="ja">
（中略）
<body>
<p>日本語です</p>
<p lang="en">English.</p>

のとき、enに指定したいんだけど、どうしたらいい？IE等が対応してなくてもかまいません。

screen,tvにstylesheetをlink要素を使わずに
指定したいんだけど、
@mediaで指定したらOKですか？

link要素を使うときは media属性ですよね？

>>427
p[lang=en] {}

>>428
です。です。

実はＤＷ４使ってて、スレ違いかどうか迷って、こっちに書いたんです。すんません。
まだCSSを理解できてないので、該当する部分載せますので、今後のためにどこがいけないか教えてください。

正常に動作したソース
a:link { font-family: "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka";
font-size: small; color: #FFFFFF; text-decoration: underline}<br>
a:hover { font-family: "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka";
font-size: small; color: #FFCC00; text-decoration: underline}<br>
a:active { font-family: "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka";
font-size: small; color: #FFFFFF; text-decoration: underline}<br>
a:visited { font-family: "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka";

正しく動かなかったソース
a:link { font-family: "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka"; font-size: small; color: #FFFFFF; text-decoration: underline}
a:hover { font-family: "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka"; font-size: small; color: #FFCC00; text-decoration: underline}
a:active { font-family: "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka"; font-size: small; color: #FFFFFF; text-decoration: underline}
a:visited { font-family: "MS UI Gothic", "ＭＳ Ｐゴシック", "Osaka"; font-size: small; color: #FFFFFF; text-decoration: underline}

なにが動作してないのか教えれ

en-USとかも拾えるようにするなら
p[lang|="en"]

>>431
とりあえずこの順番に
a:link { }
a:visited { }
a:active { }
a:hover { }

ほかにこのあとにa要素にたいしてまたなにか指定してるとかないの？

>>432
リンク部分にカーソルが来ると色が変わる設定で
色が変化しなくて困っていたんです。

>>434
この疑似クラスって記述の順番があったんですね（＾＾；）
a要素にはこの後何も指定していませんでした。

おかげさまで、記述順に手書きで修正すれば
キチンと動作するようになりました。
ちょっとＤＷに頼り過ぎていたようです。

ありがとうございました　<(_ _)>

このスレでいいのかわかんないですけど、質問させてください。
複数のページで同じ外部スタイルシートを使用していると、
Apacheに*.cssに対するGET命令がこないんですが、これは
<LINK>タグの仕様なんでしょうか？
ついでに外部*.jsも同様の現象になります。
他のgifやjpegの場合は、GET命令を行い、HTTP304で返されているの
ですが…。IE5.5、6.0　NN6.0で確認しました。

ブラウザのほうでキャッシュされてるだけでしょ

>>436
HTMLの仕様はもともと各要素に対して特定の挙動を要求はしません。
<LINK> タグの仕様ではなく、ブラウザの仕様(もしくは設定)です。
画像の場合でも同様の挙動を見せる場合もあるでしょう。

すれ違い

>>429
>>433
で、すべてのタグで有効にするときは
*[lang|="en"] {}
[lang|="en"] {}
どっち？

ｽﾏｿ・・・。

両方

>>441TX.

1枚のスタイルシートで

a:link { }
a:visited { }
a:active { }
a:hover { }

を２種類指定するにはどうすればよいでしょうか？
宜しくお願い致します。

>>443
classかid振ってそれに疑似クラスを設定すれ。

a:link { }
div　a:link { }

(；´Д⊂)

>>444-445
ありがとうございました。

DWってDreamWaverのことだよな？
こんなソース吐くのか‥>>431　スゴイな‥。

趣味で作るなら（やっぱり俺のレベルじゃ）手書きが一番かな…。

てゆうか、
＞text-decoration: underline}<br>
この<br>はなんなんだよ！

>>450
わらた

外部ファイルで
.class { font-family: test; }
と指定して
HTML内で
<a href="http://hogehoge.net/" class=".class">hogehoge</a>
と指定してもいいんでしょうか。
一応
<a></a>内のフォントは変わるんですが・・・規約違反ですか?

すいませんclass="class"でした。

>>448
セレクタを1行にずらずら書くのが不評でMXでは
a {
text-decoration:none;
}
みたいに記述してくれるようになりましたyo

>>452-453
別にそれで何も問題は無いが……。何を心配してるのか？

>>452
>>455
classとhrefの順番を気にしてるってこと？

>>455
今度HP評価スレッドにHP晒してみようとおもいまして。
<a href="hogehoge.html" class="class">
が叩かれそうな気がしてカキコしちゃいました ;)

>>456
<a>にはCSSは使っちゃいけないような気がしたので、
いえなんとなくですが

>>457
ピンと来たら容赦無く叩くことにしますた。

>>458
あぁ、なるほど。それは失礼。

>>458
べつにそんなことはないけど？

aの表示をデフォルトの物から変えたらユーザーが困るということなら、確かに「aにスタイルを適用するべきではない」とは言えるけど。
リンクであるとわかるようなスタイルにして、ユーザーを困らせないように配慮してあるのなら、問題視する必要はないと思う。

aには擬似クラスで指定をしとくのが安心かも。
いずれhoverとか指定してみたくてうずうずしてくるでしょうし。

>>458
ユーザビリティスレにでも行ってきな

>>452
>規約違反ですか?
プッ　　　　　　　　　　　　　　　　　

チモニ。

「間もなく」リリース予定らしいOpera7は、コードを最初から書き直したそうな。
無駄に間隔の空くリスト周りは直したのか？CSS2は？
http://www.zdnet.co.jp/news/0208/21/ne00_opera.html

DOMの対応強化は良い判断だ。

>Operaブラウザのレンダリングエンジンを一から作り直した
――ってことは、枯れるまではまたぞろＣＳＳバグに悩まされるのかあ。

>>465
Nice!

まぁ、プレビュー版が出たらアラ探ししてみましょう。
これまで新版への移行が異常に速かったOperaユーザーも、今回は様子を見るのか？

amaya最強！

例えば
H3 {
border-style: solid;
border-width: 1px;
border-color: red;
}

とすると、<H3></H3>の文字が赤いで囲まれますが、
この枠の長さを非固定に出来ますか？

5文字を囲うにも、10文字を囲むにも
一行の文字幅で囲うようにしたいのです。

>>471
質問の意味がよくわかりませんが、
white-space:nowrap;で改行不可・必ず一行にするってのでどうか。

>471
・<h3><span>ほげ</span></h3> にして h3 span に border 指定
・h3 を display: inline にする
・DHTMLとかで <h3></h3>の innerText の長さを調べて h3 の width を動的に変化させる

自分でやるなら 2番目

>472
|あああああ|
|ああああああああああ|
こんな感じで文字幅に合わせてborderを出したいんだと思った（NN4みたいに）

>>473
> こんな感じで文字幅に合わせてborderを出したいんだと思った（NN4みたいに）

その通りです。

> ・<h3><span>ほげ</span></h3> にして h3 span に border 指定
> ・h3 を display: inline にする
> ・DHTMLとかで <h3></h3>の innerText の長さを調べて h3 の width を動的に変化させる

ありがとうございます。参考にさせてもらいます。

カテゴリごとに別々のテーマ色を使ってることもあって、
style.css のファイルサイズが17.5KBもあります。
おかげで、Pen III 500MHz ですが a:hover などの反応が微妙に遅いです。
（軽いcssファイルで試したら速かったので、原因は重さで間違いないでしょう）

遅いマシンからのアクセスだともっと遅くなるんですよね…。
だからどうしようってわけでもないんですが。

板違いです。
http://life.2ch.net/yume/

>>474
IEとNNは、width: 0;にしたら文字幅と同じになったけど、
Operaは律儀に幅0になってしまった。
一応1つの方法ということで。

すんません、条件を変えていろいろ試したところ、
ファイルサイズが原因と言い切ることもできなさそうです。
でも、a:hoverの反応が遅いのは事実なのですが…。
スレ汚しすみません。

何か実験報告でもする気ですか？
安心しろ17.5KBも使ってるｱﾌｫはおまいしかいない

>>476＝>>479
ｼﾞｻｸｼﾞｴﾝﾃﾞｼﾀ（ﾌﾞﾋｰ

そうか>>475=>>476=>>479だったのか　露知らず

ﾌﾞﾋｬﾋｬﾋｬﾋｬ
また釣れましたあ（ｹﾞﾗﾌﾟ

ﾌﾞﾋｰがmyboomだってさ（藁

？

いつも、font:normal normal normal 100%/150% monospace;
としているのですが、font-familyの指定は要らないので、
font:normal normal normal 100%/150%
ととしてもいいのでしょうか？
そして、
font:normal 100%/150%
としてもいいのでしょうか？

>>485
もう読みましたか？
http://hp.vector.co.jp/authors/VA022006/css/fonts.html#font

ｼﾞｻｸｼﾞｴﾝﾃﾞｼﾀと言ってるのはにせものでつ。
ageてｽﾏｿ。

>>487
つまらん、氏ね

このスレも初心者スレと同じく質問者はトリップが必要になってくるか？？

>>489
そのトリップ頂戴。公開トリップ？

>490
んにゃ、ツールで見つけたトリップ。
自分のページに本人証明代わりにトリップ載せてるんでキー教えるのは勘弁

order-style: dashed;
が Mozillaだと点線になるのですがInternetExploreでは繋がって線に
なります。そういう物なのでしょうか？

s/order/border/

>>492
バージョンは？

IE4, 5は、点線は使えないね。

バージョンは5.01でした。
ありがとうございました。

なぜIE6にしないの？　>>496
IEは5.5からCSS対応が飛躍的に向上してるよ。

>>497
496ではないけど、5.5からそんなに向上したの？

>>498
http://members.jcom.home.ne.jp/pctips/ua/IE55.html
從來無效になつてゐたインライン要素へのborder、padding、marginの指定が有效になつた。
border-styleでdottedが有效になつた。
border-styleでdashedが有效になつた。
W3Cで檢討中の國際化對應プロパティ「縱書き」を、Internet Explorer 5.5は獨自にサポートしてゐます。
:first-letter疑似要素に對應した。

Win9x系じゃあ6.0になって飛躍的に不安定になったよ

>>500
うちはWin98SEだが、そんなことはないぞ。
IE6はインストールしたては不安定だが、使ってるうちにフリーズしなくなった。

>>501
一般的にそうだからなあ。
今更な話題だが。

Internet Explorer 6 における CSS の拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp

>>499,503
さんくす。
でもそれで「飛躍的に向上」と言って良いものか・・・
たしかにマシになったようだが、相変わらずposition:fixedがダメとかあるし。
Mozillaレベルまで向上すれば「飛躍的」と言うのはわかるけど。
不安定になるという話が多いんで当分使う気はないんだが。

開発側としては、不安定かどうか以前の問題もあるしな。＞最新版
PCが複数台あればいいんだが…、上司に掛け合ってみるかなぁ…。

html形式のメルマガをまぐまぐから発行しようと思ってます。
その際にウチのサーバに置いてあるCSSを外部読み込みさせる
つもりでまぐまぐに問い合わせたところ
-----
HTML対応でもメールソフトによっては
有効でない場合やメールソフトの設定で禁止しているケースが
考えられます
-----
と返ってきました。

WindowsならIEを使って表示するんですよね。ということは、
『HTMLは表示できるがCSSには対応してないメーラー』というよりは
『IEの設定でCSSを使わないようにしている場合、ダメですよ』
という解釈でいいんでしょうか？

/* ｽﾚ違いでしたらｽﾏｿ */

なんでWinIE（Outlook？）に限定した話になってるの

>>506
OutlookであってもHTMLメールは読まない設定にしてることもあるってことだろ。
私がHTML形式なんて貰ったら迷惑に感じるだけだけどなあ。

>>504
5.5からインライン要素の装飾が可能になったってのは大きいよ。
見たとき、受ける印象が相当変る。
まあ5.5以降、やっと本格的にCSSが使用できる環境になったって感じ。
はっきり言って、折角作ったのをver5以前では見て欲しくない。

<div id="block">
a
aaaa
aaaaaaaaaaaaa
</div>
これの左をそろえたまま、
aaaaaaaaaaaaaにそろえて、右マージン10%をあけるには、
どうすればいいですか？
a
aaaa
&nbsp;を入れないといけないですか？

>>510
質問の意味がよくわかりません。

（空白）｜もじれつ
（空白）｜もじれつ
（空白）｜もじれつもじれつ　←ここが10%margin→

ということか？

>>511
すみません。

もじれつ
もじれつ
もじれつもじれつ

これを、まとめて右に持っていきたいのですが、
そのとき、

もじれつ
もじれつ
もじれつもじれつ

の上の2つの「も」は、
もじれつもじれつ
の最初のもと同じ位置にしたいのですが、
どうすればいいでしょうか。
そのまま3つを、text-align:right;とすると、
最後の「つ」に合わさるので、変えようと思うのですが、
どうすればいいのでしょうか。

>>506です。レスありがとう。

>>507
OSがWindowsなら大抵のメーラーはIEを使って表示するんですよね、
ということが言いたかったのでした。言葉足らずでしたね。

要するに、メーラー側でCSSを使うか設定するのでなく、
（標準で使う）ブラウザの設定だよね、ということです。

またこちらの勘違いであれば、
CSSを使えないメーラーなどを教えて欲しいっす。

>>508
こちらで無理やり読者登録するわけではないし、
登録フォームにHTML版だということを明記しておくから
読まない設定の方やHTML形式が嫌いな人は
最初から登録されないかと。

>512
こういうことか？

div#block{
padding-left: 数値}

視覚的にこの解釈でいいなら、下のようなやり方も。

div#block{
text-indent: 数値}

＞HTMLメール
だが外部ファイルを読み込むってのは…
よく知らんが、そういうのってノートン先生が騒いだりしないのか？

<a href="a.html">あ</a><a href="i.html">い</a>
と、
<a href="a.html">あ</a>
<a href="i.html">い</a>

一行と二行に分けるのでは、あといのスペースが
違うのですが、CSSのwhite-spaceでは直りませんか？

>>515
自分でやってみればいいじゃん

>>513
IE なんて使って表示する MUA なんて OE くらいでしょ。
(Becky は使うようにも設定できるけど多くが無効化してると思う。
IE を使わないで HTML メールを解釈する MUA だと Netscape(4/6)
とかあるけど、 4 なら…、だし。
素直に plain text にするべきだと思うけどね。
画像を挿入する必要があるとかなら別だけど、
読者が欲するのは情報であって雑誌ばりのデザインじゃない。

挿入する…

欲する…

(((（ ;ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

<丶｀∀´>σ)∀・)ｶｯｺｲｲｾﾞ、ｺﾉﾔﾛｳ

>>512
レイアウト次第では
div#block{
position: absolute;
right: 0;
}
としてもいいかもね。

>>515
変わらんはずだよ。少なくとも515がしたい様には。

(　ﾟдﾟ)517ｶﾞﾎｽｨ…

>514
自己レス。text-indentは違うわ。無視してくれ。

本文に混じってボタンを配置すると、その行だけ上下の幅が大きくなってしまいます。

<input type=button 〜>のボタンの高さを調節したいのですが
style="padding: 0; border: 0; margin: 0;" と指定しても
ボタンのない行に比べて ほんの少し高さがあります。

どうすればボタンと本文の高さを揃えることができるのでしょうか？
対象ブラウザはIE5.5,IE6です。

>>524
周りの文字の大きさをボタンより大きくするとか。
ボタンのフォントサイズを小さくするとか。
駄目かな。

>>524
line-heightとかfont-sizeとかheightとかvertical-align試してみれば？

height:0.8emとかは使えないのか？

CSS 3をすでに使用している人っていますか？

>>528
いる

CSS3ってどこにあるんですか？
どうやったら使えるの？

>>530
検索

>>526
font-sizeは本文と同じにしたいので変更していません
vertical-alignはボタンの中にあるテキストの揃え位置のようでした

ボタンの大きさと、中のテキスト（valueで表示される文）の大きさは
イコールにできないのでしょうか。

横サイズを固定したdivをブラウザのサイズに関わらず中央に維持するのはどうすればよいのでしょう

>>533
margin:auto;

>>534
それは仕様上ゼロになる。
IEで思い通りに再現されてそれでいいやと言うなら話は別だけど。

<div style="text-align:center">
<div style="display:inline">中央寄せ</div>
</div>

>>535
Mozillaでもこれでいけるが、最近はこれじゃダメなことになったのか？

>>534でいいよ。

>>535
ごめん。勉強不足で言ってることはよくわかんないんだけど、どういうこと？
IEの互換・標準でmargin:autoに対する解釈が違うから
互換の場合は536のようにブロックレベルにもtext-alignを使うしかないけど、
文書型定義を標準モードにしとけばmargin:autoでセンタリングできるよ。
Mozilla（Opera)は関係無く解釈してくれる。
でも、IE６以降だからIE5.5は切り捨てになるよね。ってことで、しょうがないので
text-alignも使用しないといけないか。。。

535の解答待ち...

http://jpn.s7.xrea.com/food/cook/cook001/filephp.php?input=rice.dat

上のページでなぜか
テーブルというか<div>がくっついてしまってるのですが
これってどうしてなんでしょうか？
Opearaでみると離れてるのですが
IE(5.5)だとくっついてしまいます．

>541
んなこたーないと思うんだが…。

このソースは機械が吐いたのか？
とりあえず、同じidが複数回出てくるってのは間違ってる。classにしる。

でも今はidの挙動ってclassとほぼ同じように使えるからなぁ…。他に何か…。

>>541
http://jpn.s7.xrea.com/camp/002/arai/torekkuraizu.html
広告違反

ttp://minatsu.pos.to/

このサイトの右側の画像は画像の右下が固定されているようですが、
やり方がわかりません。どうしたら良いのでしょうか？

>>544
どうもしなくていいよ。

>544
http://www.google.com/search?q=%94%77%8C%69%20%89%45%89%BA%20%8C%C5%92%E8&hl=ja&lr=

>>544
検索ぐらいしろ。

>>544
■■■■■　注意　■■■■■
質問者　（特に「初心者」）　は、
必ず>>4にある解説サイト （かなりわかりやすい） で
　勉　強　してください。

>>1くらい見ろよボケ！

プルダウンメニューの淵とかボタンとかの色を変えれるやつってまだ存在してないんですか？
検索しても全然なかったもんですから…

<A href="http://www.2ch.net" target="_blank">

上の target="_blank を指定する方法ってないでしょうか？

>>550
意味がわかりません

>>550
CSSでは無理
javascript

>>552

おぉ！ありがとうございました。m(__)m

>>549
対応表でselect要素に無効と書いてないか調べたかい？

>>542
手書きphpで吐かしてます

ところでIDってたとえば

div#nanasi
h1#nanasi

みたいにcssの中で２重に使えないと理解してたのですが
これって勘違いだったのですか
ありがとうございました．

>>543
xreaの人におねがいしてきました．
でも断られたらツライな・・・

>>556
http://jpn.s7.xrea.com/camp/003/rice.shtml
こういうページがダメなの。
トップページは大丈夫。

>>556
http://sample.s1.xrea.com/ad/index3.xhtm
http://xreafaq.com/rule.html#22

>>556
http://yoshio.s6.xrea.com/x/idou_11.html

>>534-540
ありがとうございました
テーブルからCSSに乗り換えようとしてるんですが
IE5で動作させるにはCSSでもテーブルの入れ子のように
text-align:centerのボックスの中にボックスを作って中央に維持するわけですか。

あと入れ子のテーブル作ると外側のテーブルの読み込みが終わらないかぎり
中のテーブルもレンダリングされなかったのですが
<div></div>で囲んだ場合も同じなのでしょうか？

>560
実際には、100k超えるファイルとかじゃないと実感できないけど
divは読んだとこからレンダリング始まるよ。

ただ、Geckoは一括レンダリングだからどっちも同じ。

ダイヤルアップで繋げつつIrvineでﾀﾞｳｿしながらテレビみると
その差が非常によくわかる＞IE

Geckoは同じなのか。
でも、バグとかあるしなぁ。

body {margin:1em 10% 10% 1em;}
として、左右に10%、上下に1em開けたいのですが、
これはできますか？
それとも、
<body>
<div id="top">
<p>aaaaa<p>
<address>
aaaa
</address>
</div>
#top {margin:1em 10% 10% 1em;}
のようにしないといけないですか？

>>563
入門サイトを見るべきだが、
> body {margin:1em 10% 10% 1em;}
これは、上と左に1em、右と下に10%のマージンをとる
と言う意味になるぞ。

>>563
ttp://www.zspc.com/stylesheets/css/ref/desc3.html#itembmargin
とりあえづ順番が違うし、もっと略記もできる。
で、 body {うにゃらら} でできなかったの？
できなかったとしたら何て UA の何てバージョン？

body {margin:1em 10%;}

俺は念のため全部書く派だな。

サイズを固定したボックスにborder-left:1pxを指定すると
IE5ではボックスの内側にボーダーが出て、NN6では外側に出るのですが
同じように表示するには各ブラウザごとに振り分けなければならないのでしょうか？

>>568
>>396 のことか？

>>569
ありがとうございます、見落としてました・・・

hrタグのsize属性やcolor属性を
スタイルシートであらわすにはどうすればいいのでしょう

>>571
height
color

>>571
ありがとうございます。できました。

dd {margin:1em 20% 1em 20%;}
としても、
ddの中味が半角数字の場合は折り返されないのですか？
ddの中味が
1111111111111111111111111111111111111111111
のようになり折り返されないのです。
11111111111111111111111111111111
11111111111
のようにしたのですが、どうすればいいのでしょうか。

11111111111111111111111111111111 <br>
11111111111

１．スペースを挟む
２．word-break: break-all
３．<wbr>

word-break IE独自拡張

>>550
コピペ

>>576
５．&shy;をはさむ（ハイフンが表示されるが。）

４はどこだ？

縁起が悪いのでスキップ

>>580-581
ﾜﾗﾀ。>>577が４と思われ。

選択した範囲を右クリックした というのを検出しるには
どうしたらいかがでしょうか？

JavaScriptスレへどうぞ

>>584
ラジャー

>>574
widthは指定できないの？
あとどんなブラウザでもその問題が出るかい？

三日坊主＋＋の部屋が閉鎖してるのを今頃知った。マジ困った。

>>587
そんな時こそWayback Machineですよ。
http://web.archive.org/web/*re_/http://east.portland.ne.jp/~sigekazu/index-j.htm
http://web.archive.org/web/20011006044011/http://east.portland.ne.jp/~sigekazu/index-j.htm

>>586
半角英数は折り返さないという話。良く読め

2001年 ○月Ｘ日 出来事1
　　　　　　□日 出来事2
　　　　△月○日 出来事3
出来事4
2002年 ■月●日 出来事5
□日 出来事6

こんな形の年表を作りたいんだけど、出来事の部分が長くなって折り返される時に

2002年 ■月●日 hogehogehogehogehogehogeho
gehogehogehogehogehogehoge

こうならずに

2002年 ■月●日 hogehogehogehogehogehogeho
gehogehogehogehogehogehoge

こうなるようにしたいんです。
今はテーブルを使って実現しているんですが、
CSSで同じような事ができないでしょうか？

>>590
できます。

#年表なんだからtableでいいじゃん。

うげ、表示が激しく崩れてる
逝ってきます(−_−)

うむ。まったく変わっておらん。

body{
test:expression(alert("test"));
}
警告を一回で止める方法をおしえてくだちい

>>594
はぁ？

>>594
これってCSS3？

>>596
まさか。。ネタです

IEの独自拡張だろ。

つうかJS？フラグ使え

JSじゃないです。
<style>
body{
background:expression(alert("test"));
}
</style>

>>594
こんなの初めてみたYO!

>>600
俺も、初めて見た　試してみたら、ある意味ブラクラだね

ごめん、Ageてしまつた

ごめん、年てしまつた

<h3 style="font-size:expression(document.body.clientWidth/13);">Dynamic HTML</h3>

まぁ驚け。俺は驚いた。

>605
何年も前からMSDNにあるサンプルじゃん。

検索ご苦労サマ

>606
そうか、じゃぁ594に答えてあげれ。

無能コテハンうざい

じゃあ答えよう。
無理。
expressionの中で一回しかアラート出さないように書いても
expressionそのものが再評価される。
setTimeoutで永久に続いているような物。

一回で止まったよ。動作確認はIE6。
<style>
body{
background:expression(typeof(a)=="undefined"?alert("test"):0,a=1);
}
</style>

解説ごくろうさんですが、
一回で止める方法が知りたいのれす。
わかる方、どうかよろしく

>>612
>>611

曲芸(？)
<style>
body{
background:expression(typeof(a)=="undefined"?alert("真っ赤に染まります。"):0,a="red");
}
</style>

おもしろいけど、独自拡張か・・どうしたもんかね、IEは・・・

div.leftmenu {
float:left;
width:50%;
}

div.rightmenu {
margin-left:50%;
}

でメニューを左右に分けてます．
IE，Netscape6，Opera，Mozillaだと意図したとおりに見えるんですが，NetscapeCommunicator4.78で見ると，
┏━━━┓　　　　　　┏━┓
┃　 左 　┃　　　　　　┃右┃
┃　　　　 ┃　　　　　　┃　 ┃
┃　　　　 ┃　　　　　　┃　 ┃
┗━━━┛　　　　　　┃　 ┃
　　　　　　　　　　　 　　┃　 ┃
　　　　　　　　　　　　　 ┗━┛
になってしまうんですけど（右メニューはウィンドウの右に出ています），
回避する方法ってありますか？

結局>>610はただのアホに成り下がったわけですか？

>>617
ｵﾏｴよりはマシだろうな

>>616
ネスケ４のＣＳＳ対応はあまりにバグだらけなので相手するだけ無駄って気もする。
しかしまあ、一応、ＮＮ４でも段組に成功してるサイトもあるので、ご參考まで。
　http://village.infoweb.ne.jp/~fores/

>>616
NN4 向けの CSS は全く別に用意した方が多分ラク。

float使うんじゃなくて横にマージンを空けてメニュー部分をpositionで動かすようにすれば
ネスケ4.7にも対応のマルチカラムレイアウトは特に難しくないよ。
float使うとネスケ4.7では範囲選択できなくなってうざいし。
この前この板のどこかでテンプレかいてあげたのがネスケ4.7も対応だったんだけどどこだったかな。

>>620
横レスですがそれってどうやるんですか？

あのですね。さっき間違ってFlashスレに書いちゃったんですけど・・・

<html>
<body>
<div align="center">
・
・
・
</div>
</body>
</html>

をスタイルシートで「ポンッ」とできます？

>622
JAVASCRIPT使うのがｲﾊﾟｰﾝ的

>>622
ブラウザ振り分けならここ。
（サイトが閉鎖されたのでInternet Archiveでしか見られない）
http://web.archive.org/web/20011031202248/east.portland.ne.jp/~sigekazu/css/boxm.htm

>623
「ポンッ」て何？
とりあえず、>>4読んで来い。

>>623
中央寄せはここ参照。
http://tancro.stp-1.com/stylesheet/n6_center.html

>>624
>>625
親切にありがとう。
リンク先など読んできますね。

>>622 一例ですが。

<link rel="stylesheet" type="text/css" href="./default.css" media="print, screen">
<!--ＮＮ４ではmedia属性にscreen以外の値を指定すれば読み飛ばされる -->
<script type="text/javascript" src="./nn4css.js"></script>
<!--ＮＮ４專用cssファイルを、JavaScriptで読み込ませる -->
<link rel="stylesheet" type="text/css" href="./dummy.css">
<!-- ＩＥ３対策の空ファイル -->

///*nn4css.jsの中味*///
if (location.protocol=='file:') Rt='file:///C:/WebFile/';
else if (location.protocol=='http:'){Rt ='http://www.〜'};
var StyleRt = Rt+'stylesheets/'; // 規準ディレクトリ
var ua = navigator.userAgent;
var NN4=(ua.indexOf("MSIE")==-1 && ua.indexOf("Mozilla/4")==0)?1:0;
var tag = '<LINK REL="stylesheet" TYPE="text/css" HREF="';
if( ua.indexOf("Opera")!=-1 || ua.indexOf("OmniWeb")!=-1){NN4 = false;};
/* Operaの偽称対策。またOmniWebはdocument.layersに対応してるので。*/
if(NN4) {var cssFile = "nn4.css";}
else var cssFile = "dummy.css";
document.write(tag+StyleRt+cssFile+'">')

616です。
ありがとうございました。色々試してみます。

>>621
それ、私も見た覚えあります。覚えてるだけで再現できませんが（泣
初心者スレVol29（前スレ）だったような気がするのですが、dat落ちなんで・・・
A Boneのログも消してしまったし。

>>627

「様々なブラウザを考慮した中央寄せには、
やはり div align=centerで中央寄せするのが無難なようです。」

結局、そうなんですか・・・
有難うございました。

>>631
WinIEもVer6からは
margin-left:auto; margin-right:auto; で
センタリングできるんだけどね。

>632　ぉほう、勉強になります。
あとは、body に直指定とか。

すいません質問です。
ttp://www.mrdn.net/maple/のような
アンカーがじわーっと点滅するのはどうしたらいいんでしょう？

>あとは、body に直指定とか。
ハア？

>>634
あてずっぽうだが、GIFアニメをbackground-imageで指定してるんでは。

>>636
はっ…！そうか、気付きませんでした。
そうかもしれませんね。すごい盲点でした。
ありがとうございます。

>>634
なんでソース見ないの？
ＣＳＳファイル見ればすぐわかることやんけ。

>>638
分からないから、質問してるのでは？

http://gooo.jp

>>632
実はXHTML1.1だとセンタリングされない罠。

<hr>に色をつけたいのですが、CSSでcolorでは、IE6の表示で
色がつき、Mozillaではつきません。background-colorでは、IE6では
色がつかなく、Mozillaでは色がつきます。どちらが正しいのでしょうか？

あと、height:1pxにしても1pxにならないのはなぜでしょうか。
あと、Mozillaでは、background-colorで色をつけられるのですが、
#ff0000と指定しても、赤ではなく、オレンジ色になるのです。
他の色でも、少し濃く暗い色になります。どうしてですか？

>>642-643
http://www.mozilla.gr.jp/standards/webtips0003.html
参考になるのはこのへんかな。どの解釈が正しいとは一概に言えないっぽい。
色が暗く見えるというのは枠線が付いているせいかね。

operaも微妙に解釈が違うし、いっそhrよりもborderを使った方がいいと思うけど。

トップページのみテーブルWIDTH="100%" HEIGHT="100%"で
囲んでレイアウトしているサイトをよく見かけますが、
CSSで同じことはできないのでしょうか？

ひとつひとつパーツをpositionで配置しているんですけど
テーブルレイアウトに比べると、
ディスプレイサイズやブラウザで見栄えが変わりやすいので。

>>643
>少し濃く暗い色
noshadeを消せ。

>>645
おおむねできるよ．がんばれ

>>646
かわってもいいじゃん．それなりにデザインすべし．
どのUAや環境でも同じように見せるという発想を捨てよ．

>641
文書を unicode で書いて先頭のxml宣言を消せば問題ありません．

>>641
XHTMLだとalign="center"は不可ではなかった？
どのみちＣＳＳでやるしかない。

<dl>
　<dt>CDタイトル1</dt>
　　<dd>発売日</dd>
　　<dd>
　　　<ol>
　　　　<li>曲名1</li>
　　　　<li>曲名2</li>
　　　　<li>曲名3</li>
　　　</ol>
　　</dd>
　　<dd>作詞作曲</dd>
　　<dd>タイアップ</dd>
　　<dd>解説</dd>
</dl>

上記HTMLのリストを

CDタイトル
発売日　　 作詞作曲
1.曲名1　　タイアップ
2.曲名2　　その他もろもろ解説　　　
3.曲名3　　

こんな風にCDタイトルの行の下に
発売日と曲名のボックスと、作詞作曲とタイアップと解説のボックスが
左右に並ぶように表示したいんですけど可能でしょうか？

652続きです。
floatで回り込みさせようと思ったんですが、
dlの子要素はdtとddのみということは、例えば

<dl>
　<dt>CDタイトル1</dt>
　<div class="list">
　　<dd>発売日</dd>
　　<dd>
　　　<ol>
　　　　<li>曲名1</li>
　　　　<li>曲名2</li>
　　　　<li>曲名3</li>
　　　</ol>
　　</dd>
　</div>
　<div class="kaisetsu">
　　<dd>作詞作曲</dd>
　　<dd>タイアップ</dd>
　　<dd>解説</dd>
　</div>
</dl>

こんな風にはできないんですよね？
マークアップそのものを変えた方がいいんでしょうか。

>>653
なぜ直接dd要素にclassを振らないのか？　divで括る必要はあるまい。

>652
Win IE6とMoz1.1で確認．
dd {margin: 0;}
.date {float: left; width: 30%;}
.song {clear: left; float: left; width: 30%;}
.word, .tie, .exp {margin-left: 35%; width: 30%;}
で，それぞれの ddに classをふる． 行が長くなったら，とかそういうのは適当に．

>>652
653のマクアプは文法違反だよ。
olにfloat指定してddはmarginでなんとかならん？

>>654
おそらくkaisetu部分をまとめてブロックにしたいんだろう。
ddにクラスを書いても１つ１つのブロックでしかない。
dlを使わないのも１つの手。
「CDタイトル」はdtでなくh2などの見出しにしてはどうか。
そもそもdlはしょせんlistingなので、dd項目ごとにスタイルを
いじるのは本来の使い方ではないと思う（スタイルの使い方次第だが）

>>655
このやり方でやってみたんですが、作詞作曲、タイアップの部分だけが
変な位置で折り返されてしまいました。

CDタイトル
発売日　　 作詞作
1.曲名1　　曲
2.曲名2　　タイア
3.曲名3　　ップ
　　　　　　その他もろもろ解説

↑こんな風に。Win IE5.5で確認しました。

>>658
dlにこだわらず、tableを使うべきかと。

見出しがあるしな。これは表といっていいのでは。

>>652
そのマークアップだと、凡例を書かないと
何が何についての記述かわかりにくいかも。
table にしたほうがいいかもしれないが、
そうすると現状スタイルシートを適用しにくいのもまた事実。

>658
そりゃ，width: 30% って書いてるからね…
解説（exp）が折り返されないのが不思議だけど．

個人的には dl でもいいと思う．

>>657
そういう事です。
listの部分とkaisetsuの部分をそれぞれ1つのブロックと見て
段組レイアウトするようなイメージだったんですが、
それなら確かにdlを使わない方が楽にできますね。

>>659-661
テーブルレイアウトから卒業したくて最近CSSを勉強し始めたので
tableは使わないように、という意識が強すぎたのかも。
表といえる内容ならtable使ってもいいんだ･･･。

>>662
いろいろ見直したりいじくっていたらできました。
ありがとうございました。

>663
解決したみたいだけど，補足：
＞listの部分とkaisetsuの部分をそれぞれ1つのブロックと見て
なら
<dl>
　<dt>タイトル</dt>
　<dd class="list"><dl>
　　<dt>発売日</dt><dd>2002/08/29</dd>
　　<dt>曲目</dt><dd><ol>...</ol><dd>
　</dl></dd><!-- list の終わり -->
　<dd class="kaisetsu"><dl>
　　<dt>作詞作曲</dt><dd>誰か</dd>
　　...
　</dl></dd><!-- kaisetsu の終わり -->
</dl>
で，dd.list {float: left; width: 20%;} dd.kaisetsu {margin-left: 22%;} とか．
このほうがわかりやすいかな．
ついでに dd.list dt, dd.kaisetsu dt {display: none;} としとけば「発売日」とかは表示されない．

>>664
この方がイメージに近いです。
>>661 さんの言う
＞そのマークアップだと、凡例を書かないと
＞何が何についての記述かわかりにくいかも。
の問題も解決されますし。
こちらでやってみます。ありがとうございました。

BOXなんですが、tableのcenterみたいに、
枠を中央に位置指定するにはどのように記述すればいいでしょうか？？

「センタリング」とかでログ検索しろ

調べました。。
IE6で完全対応って、、だめぽ

>>666
DOCTYPE宣言はTransitionalで。
.center {text-align:center;}/*IE向け*/
.center {text-align:-moz-c1enter; margin-right:auto;margin-left:auto;}/*N6向け*/

body { font-family: "ＭＳ Ｐゴシック"; font-size: 14px; font-color: #ffffff; background-color: #000000; letter-spacing: 0em; }
body {scrollbar-base-color: gray;
scrollbar-face-color: gray;
scrollbar-arrow-color; color: #ffffff: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #ffffff }

こういった外部cssをリンクしているんですが、
どうしても文字が白の#ffffffに、背景が黒の#000000になりません。
どうしてなんでしょうか？？？

>>670
一つにまとめろ

まとめてもだめだったんで分けてみたんですよーー。。。

>>670だから一つにまとめろと
body {
font-family: "ＭＳ Ｐゴシック";
font-size: 14px;
font-color: #ffffff
background-color: #000000
letter-spacing: 0em;
scrollbar-base-color: gray;
scrollbar-face-color: gray;
scrollbar-arrow-color; color: #ffffff: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
}
font-familyにはosakaも指定したほうが用ですよ

>>670
font-color
↓
color

やってみましたが、やっぱだめです。。。
わけわかりません。。。。。。。
一回これを外部スタイルシートとしてリンクしてみて、
実験していただけませんか？

>>675
>>673のソースにはセミコロンが欠けているところがある＆>>674の指摘通りのミスが
あるのでそのままコピペしてもダメだよ　修正すればいけるはず。

scrollbar-arrow-color; color: #ffffff: #000000;
なんですかこれは？
質問する前にちゃんと検証してから書き込んでください。

>>675
まず必要な要素以外を排除して実験してみて。
body{ color: #ffffff; background-color: #000000; }

すいません、きちんと指摘された通りに訂正した所、
うまくできました。ご迷惑おかけしました。

いったん、CMで〜す。

外出かもしれませんが、ネスケ７．０正式リリースされてますね。
ftp://ftp.netscape.com/pub/netscape7/japanese/7.0/windows/win32/sea/NSSetupB.exe
タブブラウザになってました。６．０よりも軽いですよ。

でも、使うのか、と聞かれると…使わんわなぁ…
Mozがあるから、テスト用にも入れてない。

>>682
いｓｄｎで必死でダウンロード中です

単なる見た目の好みとかで、もうちょい使う人がいてもいいよな。
4.xは勘弁だけど。

同意、NN6でも同じように見えるようにがんばって書いてるんだから・・・
でもアクセス解析見るとNN6は1ヶ月に一人いるかいないか

やっぱり、ブラウザチェックするときはNN6で必ず見るけど
アクセス解析みると4.xのほうがはるかに多い（ｗ

>>686
それなら4.xでチェックしたほうがいいのでは？

ネスケ７スレにこんな書き込みしたんだけど
http://pc3.2ch.net/test/read.cgi/hp/1022394916/131

同じ現象の人いない？

4.x……あんなのCSSじゃないでつ。。

うちは訪問者の 5% は Netscape 系列。
ほとんどが NN6 。ついで 3.x、4.x の順に多い。

4.x の人数は割と現実的かと思うけど、
うちにくる 3.x はほとんど UA 情報を偽装した機械の体の人か
ダウンロードツールじゃないかと。
物凄い時間間隔でサイト内を駆け巡っておられるので…。
でもたまに生身っぽい挙動の人もいる。(；´д⊂ ｱｳ

>>690

3らしきのはたいていロボットとかプロクシだね。
でも、それをねすけ３としてカウントするような解析も問題だな。（でも多いんだ）

at-worksさんとこの解析はブラウザの分類が的確なので、このスレ住人
的な用途には重宝している。
そのへんをよくわかってるCGI作者ってほかにあまりいないんだよ。

でも本物のねすけ３なら恐れるに足りない。
CSS完全非対応は完全対応と等価なんだ。

CSSにおいて、4.xは9割方の挙動がおかしい。

あらゆるwidthが変ヽ(`Д´)ﾉ
padding領域でbackground-color無効ヽ(`Д´)ﾉ
border個別指定は全滅ヽ(`Д´)ﾉ
etc..etc..etc..

さっさと配布停止しろやｸﾞﾙｧ!!

>>692
使用期限を組み込んだ版をラストにとか(w

仕事でやってるのでなければ、NN4.xについては
「支障無く文章が読めればOK」程度の対応でいいんじゃないか。
使っている方も大抵そのつもりで使ってるだろうし。

だよなぁ。崩れたってかまわん、てことなんだろうからな。あれは。

>693
(ﾟ∀ﾟ)ｿﾚﾀﾞ！

>>694
でも、ちょっと凝ったことやると、支障なく文章読むことすら不可能な
ぐらい表示が乱れるよね？
やっぱり、media="all"やら@importやらでヨネスケ除けは必須？

NN4.xってどこでダウンロードできるの？
トップから巧妙に隠されていてダウンロードページにたどり着けない

>697
´ー`)ﾉﾎｲ http://wp.netscape.com/ja/download/download_comm.html

a { text-decoration: none; }
a:hover { color: #f7f7f7; }
a:link { color: #68869f; }
a:visited { color: #68869f; }
a:active{ color: #f7f7f7; }

と外部スタイルシートに記述してます。
が。どうしてもhoverした時色変わらないんですよ。。。。
なんでかな。。
activeはできてるのに・・

順番

え？順番に決まりあるんですか？

別に決まりは無いが効果を期待したいなら考える必要はある

この注意は勧告にあるね。

>699
とりあえず、:hoverを最後にしてみれ。

>>698
thanks!!

>>699

:link
:visited
:hover
:focus
:active
の順で書くとよろし。

そうなのか？

a
a;hover

俺しか指定しないから知らんかった。<a name=　は使わないしね。。

超鬱。
×a;hover
○a:hover

もうだめぽ。。俺しかって何…。

>707
睡眠不足だ。そろそろ寝るよろし。

>705
入れるのか？
ver6とかとの共存はできないんじゃなかったっけ…。メリットない…。

>710
共存できるから…

>>710
入れてみた。とんでもないなアレ。。。
とりあえずmedia指定して読み込ませないようにしておいた。

少なくともN4ユーザがこれから増えることはないだろうし、
そんなもんに対応するために曲がったHTML+CSSを書くなんて
阿呆らしくてやっとれませんわ
俺のチムポはやや左に傾いてるがな。

>>713
俺も左利きだから左にアンテナ張るな。今はそれをもどそうと右手が恋人ですが

外部CSSのurlを変えて見えなくしたら、@importをN4で見たときと同じ状態だよな？

>>714
俺は右利きだが左に偏角してるぞ

>>715
CSSオフの状態になるわけだから、そういうこと。


俺も右利きだけど左曲がり

利き手は関係ないと。

ずっと前に人から聞いた話だけど、陰部が勃起した状態で
利き手と反対方向に曲がっているというか方向を指しているのは
体のバランスがいいらしいよ。バランスといっても、食生活などのバランスじゃなくて
平衡感覚渡嘉の


TUKA、スレ違いだね。。。糸冬

フォントサイトでDLしてきたオリジナルフォントを自分のサイトに使用したいのですが
方法がわかりません。
フォントをサーバーにうｐして見えるようにさせるとかそういう方法はないのでしょうか？

色々調べてみたのですがオリジナルフォントを使いたいときは画像にしてうｐしている
人もいました。
でもそれだと表示に時間がかかるし、実用的ではないですよね。
最悪の場合はフラッシュで表示させようとも思っているのですができればHTMLで表示
できないかと・・・

すみませんが、教えて頂けないでしょうか（; ´Д｀）ｵﾈｶﾞｲ

>>718
お前はアホか

（; ´Д｀）？

>>718
DynamicFont

・・・とか、腐ったことを言ってみるﾃｽﾄ。

（； ´Д｀）調べに逝って来ます・・・

わからん・・死のう

ほんまアホなんやな。じゃヒント、「なんでこのスレで聞いてるんだ？」。

>>691
＞at-worksさんとこの
初めて知ったよ。掲示板もxhtmlなのがｲｲw

＞７１８
＞フォントサイトでDLてきたオリジナルフォントを自分のサイトに使用したいのですが方法がわかりません。

フォントファミリーで使いたいフォント指定するだけ
もちろん閲覧者がそのフォントを持っていなければ見えないが

閲覧者に見えなければ意味が無いと言うのであろうがその方法がわからんと言っているのが
皆、アホか？と言っているのだよ

>>718
IEなら@font-faceでダウンロードさせられる。
そのサイトの表示にしか使われないフォントで
システムにインストールさせるわけではない。

ただ、普通の設定ではダウンロード確認ダイアログがでるので
普通の人は見るとひきそう。
「通常は安全です」とか言われる。

DynamicFontはNetscapeとBitstreamが開発した技術で、
フォントをダウンロードさせて表示させるものだよ。

>>726
違う、CSSスレでいきなり何言い出すんだこのアホは？とミンナ思ってる

答えてもらってすみません（; ´Д｀）

実はMacromediaDreamweaver3 P38　に特別なフォントはCSSで表示させる
ことが出来るって書いてあったのでここで質問させて頂きました。
実際に上のソフトでやって見たのですがソース見ても相手サイトにそのフォ
ントなければ表示できないようだったので疑問に思ったんです。

やっぱり画像にして表示させることにします。
あと、初心者だから何も知らないだけで特に知能が低いってことないっす。

いやいや、知能低いですって（＾＾；

>>730
>>287->>288の
｜弱気な表現は避ける
｜　　　弁解じみた表現は良くない。また、まわりくどい。
｜　　　　　　ex) 超初心者で何もわかりませんが……
｜　　　　　　　　　<わからないなら>>3-4,>>158を読めよ>
をプレゼントしたい。

もな蔵はただのﾋｷｺﾓﾘです。
http://www.google.com/search?q=%81%9FfvSEMzgk&lr=lang_ja

フラ板のモナ倉氏とは別人であることを祈る

>>734
フライトシム板にそんなのいたっけ？（ｗ

paddingとmarginってどう使い分けてます？
漏れはmarginを0にしてpaddingで調整するようにしてるんですけど･･･
IEとMozillaで解釈の仕方に違いがあって難しいです。

paddingとmarginは全然意味が違う。リストの時は似たような挙動になるが。

borderつけてれば違いが分かるでしょ。
それとも二重になったボックスの外ボックスのpaddingか内ボックスのmarginかっていう意味？

そうなるともうどっちでもよい(; ´Д｀)

marginはborderの外側で、paddingは内側で、
とかそういう概念は一応理解してるつもりなんですが、
margin-left:10px;としようがpadding-left:10px;としようが、見た目は変わらないですよね？
んでどう使い分ければいいのかいまいち分からないんです。

marginは相殺されるがpaddingはそうではないってところか

いっぱいおっぱい試してみるしかないおっぱい？
ボックスおっぱいあれば、マージョンもフュージョンするっぱい
パッディンゴ気付いた時にはよ、拝啓挨拶文字カラー
枠船つけて見てみると、ボックス領域見えるDEATH。
デザインやるときゃ、服のセンスも問われるよ・・。問われはしないが
醸し出す。良さと悪さが醸し出る。滲み出る。あー、あー、滲み出る。
ケミカルデニムはいてるか？あれだけ、やめとけ。惨めだぞ。。
デニム吐くなら、とりあえず。青いの買っとけ青いの買っとけ。濃い青で決まりだね。
CSSの極限は、デニムの素材で決まるんだ。本物になりたいときにはさ。
インディゴデニムを買いなさい。

電波さんも訪れる賑やかなスレですね

>>736
IEのpaddingの対応が6からなので、なるべくpaddingは使わないようにしてる。
marginは相殺があったりで大変といえば大変だけど仕方ないかなと。

>>744
>IEのpaddingの対応が6からなので

ウソです。
IE4でもpaddingに対応してます。
但しインライン要素のborderやpaddingはIE5.5から対応です。

マージンの相殺ってなんですか？

>>746
そんなあなたに>>3-4

>>746
例えばp{margin:1em;}としたとき上下に1emのマージンがあきますよね。
しかし、pを並べて書いたときはpとpの間には1emのマージンしかあかないということ。

>748
よくわかりました。ありがとう。

オプションメニューでページを切り替えたいと思うのですが
アップロードしてもうまくいきません。前後の<form></form>
をいれてもだめです。どこがいけないのでしょう？おしえてください！



<SELECT onchange="location=this.options[this.selectedindex].value">
<OPTION value="ファイル名">項目</OPTION>
<OPTION value="ファイル名">項目</OPTION>
<OPTION value="ファイル名">項目</OPTION>
<OPTION value="ファイル名">項目</OPTION>
<OPTION value="ファイル名">項目</OPTION>
<OPTION value="ファイル名">項目</OPTION>
<OPTION value="ファイル名" selected>項目</OPTION>
</SELECT>

(・∀・)ｶｴﾚ！

>>750
ここはCSSスレです。

すいません逝ってきます

どなたか、教えていただけませんでしょうか。
　background-img:url("xxxx.gif");
background-repeat:no-repeat;
background-attachment:fixed;
上記にて、背景を指定しました。
この指定を使用している、htmlファイル単品で表示するときれいに
表示されるのですが、
画面をフレームで分割されたHTMLファイルに指定すると背景画像が砂嵐のように
崩れてしまいます。
何故なのでしょうか？

>>754
バイナリでupしてみれ

>>755
バイナリでUPしてみましたが、状態は変わりませんでした

背景画像が砂嵐です！
今すぐ確認すてください

でんこ通せ。

質問なんですが
文字の位置を指定するにはどう書けばいいんでしょうか？
上から○px、左から○pxみたいに指定したいんですが
教えてください

>>759
ボックスの幅と高さを指定して、position:absolute,又はrelativeでボックスの位置指定。

>759
場合による。positionかpaddingでGo

position : absolute;
top : **px;
left : **px;
padding : 0;
margin : 0;

CGIで、背景画像を右隅に固定したいんですが、
$background = "http://hogehoge.ne.jp/image/bg.gif";
に、どうやってスタイルを指定できるでしょうか？

>>763
そのCGIの、HTMLを書き出している部分にCSSの記述を追加。

>>764　CGIにCSSを記述する方法が良く解らないんす（；

>>765
HTMLに記述する方法はわかるんだよね？
とりあえず、理解はできなくても良いからCGIのスクリプトをエディタで見る。
HTMLを記述している部分があるはずなのでhead内なりbodyタグなりを
（HTMLを書きかえるのと同様に）適宜書きかえる。

場合によっては記号のエスケープが必要かもしれんが…
とりあえずはソース見てみ。

それはCGIを勉強するしか。bodyタグとかそのまんま書き出してる箇所があるはず。

定義と引用の$backgroundを消して書き直さなきゃいけないな。
とりあえずCGIのソースをよく見ればなんとなくわかりそうな気もするが……。

>>763
CGIスクリプトをいじる話ならここじゃなくてCGIスレ行き

【初級】CGI総合スレッド＠Web制作板
http://pc3.2ch.net/test/read.cgi/hp/1016938825/l50

CGI総合スレッドで聞くときはどこで配布してるスクリプトを
どういじってほしいのかちゃんと書くように

>>766-769
どうもでした。勉強しまっす。

フォントファミリーに関して質問なんですが、
「普通はimpactをつかって、impactが使えない場合はＭＳ　ゴシックを使う」
という風に指定するにはどうすればいいのでしょうか？

>>771
ttp://www.zspc.com/stylesheets/css/ref/desc1.html

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

DT要素にBOLDを施したんですけどネスケで反映されません
dt { font-weight : bold ; }
試しにこれだけ設定して他の要素のスタイルを全て取り除きましたが無理でした
他の要素を使わずにDTを太字にするにはどうすればいいでしょうか？
使ったのはネスケ4.78です、どうかよろしくお願いします

<dt><span>ほにゃらら</span></dt>

dt span { font-weight : bold ; }

で、どうか。

>>775
すみませんが他の要素を使わない方法でお願いします
無理を言って申し訳無い

じゃ無理

>>777
あー、無理なのですか、わかりました
ネスケではDT要素にフォントプロパテイは効かないんですね
誰が何をどうやってしても現段階では不可能と言う事ですか
わざわざありがとうございました

誰が何をどうやってしても不可能かどうかは知らないので
無理じゃなくて知らないに訂正。
なんで逆切れみたいな文体なのか。

>>779
悪意が伝わるようには書いたけど逆切れっぽくなってしまいましたか
んー、もっと注意して言葉を選んだ方が良かったですね、すいません

>悪意が伝わるようには書いたけど
ﾜﾛﾀ

目撃DQN

質問したほうが答えた側に対して悪意を伝えるのを逆ギレっていわずになんていうんだ。

>>783
ＤＱＮ

こいつおもろい

横幅って固定しないほうがいいんでしょうか?
場合による?

何の横幅だよ

すんません
ページ全体の横幅ってことです

>>788
横スクロールがでない程度におながいします。

かしこまりました
どうもです

横スクロールは嫌われるみたいですね。

アクセス解析で、“Playstation2 EmotionEngine”てのが来たことを知りました。
ゲームを全くやらないので知らなかったのですが、ドリームキャストだけでなく
プレイステーションもウェブ・ブラウジングができるのですね。
ところで、ドリームキャストは確かスタイルシートが有効でしたが、
プレイステーションの方はＣＳＳ対応度はいかがなもんなんでしょ？
御存知の方、ご示教ください。

>>791
UAに「EmotionEngine」はさすがに無いでしょ（ｗ
そりゃ単なる偽装と思われ。

ちなみにPS2のブラウザは複数あるみたいで、
実際は「mozilla*.*」なんかの文字列と一緒にブラウザ名を吐くはずだから
そこから調べて（いずれも移植モノのようなので）対応すれば良いかと。

<span style="width:100px;height:100px;padding:25px;border:1px solid #336699">
TEST</span>

なんでネスケ6はこれを無視しますか
ねすけ使用率4%切ったらしいので無視したほうがいいですか

>793
非置換インライン要素に対する width や height の指定は無効だから，かな
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#the-width-property
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#the-height-property

>794
ありがとうございます
display:blockにしたら出来ました
でもIEより大きいです
サイズの計算もできないんでしょうかネスケ６
やっぱり無視することにします

CSS＋XHTML1.1で作ってるんですけど、
IE6.0の互換モードってのが良く分からないんです。
IE5.5とMozilla1.0で問題なかったら大丈夫なんでしょうか？

>795
ボックスサイズの計算方法は、ネスケ6の方が一応正しい。
IE6もモードによってはこっちの計算方法になる。
勉強しておいで。

>796
互換モードは、5.5とほぼ同等のCSS実装になるモード。

>>798
ありがとうございます。

>>795
>>796
ここ読め。
K@tsukun's PAGE! ＞ CSS Reference ＞ 視覚整形 ＞　width（内容領域の幅）
　http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width
Internet Explorer 6 における CSS の拡張
＞!DOCTYPE スイッチ
＞ボックスのサイズの指定方法の違い
　http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic2
　http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3

次スレッドではＦＡＱにしておいてはどうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>floatした要素のmarginについて／続くhr要素の表示位置</title>
<style type="text/css">
<!--
p{float:left;clear:both;width:100%;}
-->
</style></head><body>
<p>嘘を嘘と見抜ける</p>
<p>人でないと難しい</p>
<hr>
</body></html>

というソースの表示結果について質問です。
表示結果は、IEとNN/Operaで下のような2点の違いがあります。

・IEでは2つのp要素の上下マージンが0になる
・NN/Operaではhr要素がp要素の上側に表示される

それぞれ、仕様上はNN/Operaが正しいのでしょうか?

捕捉：widthプロパティ宣言を省略すると、IEでのみ↓のように表示されます（NN/Operaの表示結果は変わりません）
嘘を嘘と見抜ける------------
人でないと難しい

>>801
ＩＥが間違ってます。
以下参照。
http://web.archive.org/web/20010522110945/www.toybox.jpn.org/test/float.html
http://www.toybox.jpn.org/test/floats.html
http://www.toybox.jpn.org/test/floats2.html
http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=1726

やっぱIEが正義と信じてる馬鹿多いな。
いや、馬鹿はIEなのだけどそれくらい知っとかなきゃまずいしょ

IEもそこまでバカではないけどな。

ブラウザ作るのって大変だし。
M$でさえアレだから、
やっぱりOpera/Moz/NSはすごい（ｗ

>>792
>UAに「EmotionEngine」はさすがに無いでしょ（ｗ
>そりゃ単なる偽装と思われ。

なぜあり得ませんか？
ＯＳもＵＡも“Playstation2 EmotionEngine”なのですが
それもこれもみな偽装ですか。だとしても偽装の意味が無いし……。

>>805
本物のPS2である可能性は無いわけではないけど、
＞それもこれもみな偽装ですか。だとしても偽装の意味が無いし……。
偽装はユーモアの１つと考えたほうがいいかも。
実際、この板ではUA偽装スレが小盛り上がりをみせているし。

>805=>>791
:: 偽られたUA ::
http://pc3.2ch.net/test/read.cgi/hp/1015925179/l50

を見ると、「意味のない」偽装にあふれてます。これはこれで面白し。
一覧サイトは
http://members.tripod.co.jp/g_ua/

>802
素早いレスをありがとうございます。

・IEで、floatした要素の上下マージンが0になるのはバグ

ってことですよね。

hr要素の流し込まれ方の違いは、IEにおけるfloatの解釈のバグなのでしょうか?
hr要素の解釈の違いのようにも思えるのですが…もう少し調べてきます

>>807
イコール付きでレスされると
「自作自演ｶｺﾜﾙｲ」と言われているような気がするのですが杞憂ですか？
あと、791=805ではないのでお前ｶｺﾜﾙｲ。

>>809
>あと、791=805ではないので　

私は正真正銘>>791＝>>805なんですが、
「805」を偽装するあなたは誰ですか。
意味のない偽装にしても「ユーモア」がかけらも感じられません。
それとも、レス番号を間違って書き込んでしまったのかな。

なにやってんの？

どちらも偽装っぽいな。

見事な着地でした。

floatとhrについて、自己レスです。hrの位置についても、やっぱりIEがfloatを仕様通りに扱っていないようでした。
ttp://www.y-adagio.com/public/standards/tr_css2/visuren.html#floats
によると
「浮動ボックスの前後で生成される位置決めされないブロックボックスは，浮動体が存在しないものとして，上下方向に流し込まれる。」
とのことで、floatになったら「float:none」の要素はfloatな要素を無視してレンダリングするのが正しいのですね。
ttp://web.archive.org/web/20010522110945/www.toybox.jpn.org/test/float.html
の意味がようやくわかりました。
ご教示ありがとうございました。とりあえずご報告まで。

>>814
ついでにここもご覧。
http://csx.jp/~bookish/dlfloat1.html

<p>のマージンを<br>とあわせるには結局何pxなのか
不安で夜も寝むれません

1emじゃないの？

間違えました<br><br>と<p>です

>>816
ブラウザのデフォルト・スタイルのline-heightの値と一緒にすればよいはず。
cf. http://www.inter-cool.net/~phantasm/wdzone/lab/defaults.html

えーと。。。。。
・・・・・IE6ですが、、、、わかんないです。。。

>>820
cf.HTML2.0のスタイル定義
http://tancro.stp-1.com/stylesheet/default.html

線を横線だけにしたテーブルを作りたいのですが、どうすればいいでしょうか？
この板のCSS関係のスレッドで紹介されていたサイトで見た記憶があるのですが、
忘れてしまいました。お願いします。

>>822
border

>>822

table {
border-collapse : collapse;
}

td {
border-bottom : 1px solid black;
}

th {
border-bottom : 1px solid black;
}

borderの太さ・種類・色はお好みで。

>>824

table {
border-collapse : collapse;
}

td,th {
border-bottom : 1px solid black;
}

言われた方法でできました。ありがとうございました。

float:left;を指定した要素より、その後に続く要素の方が縦に長くなってしまうと、
後に続く要素の内容がfloat:left;を指定した要素の下にきてしまいます。そうで
はなく、後に続く要素の幅を最後まで変えずに表示する方法はあるでしょうか？

具体的には、↓の様ではなく、
┌───────────┐┌────────┐
│float:left;を指定した要素　││その後に続く要素　│
│　　　　　　　　　　　　　　　　││　　　　　　　　　　　..│
└───────────┘│　　　　　　　　　　　..│
┌────────────┘　　　　　　　　　　　..│
│　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.│
└─────────────────────┘

↓の様にしたいのです。
┌───────────┐┌────────┐
│float:left;を指定した要素　││その後に続く要素　│
│　　　　　　　　　　　　　　　　││　　　　　　　　　　　..│
└───────────┘│　　　　　　　　　　　..│
　　　　　　　　　　　　　　　　　　　│　　　　　　　　　　　..│
　　　　　　　　　　　　　　　　　　　│　　　　　　　　　　　..│
　　　　　　　　　　　　　　　　　　　│　　　　　　　　　　　..│
　　　　　　　　　　　　　　　　　　　└────────┘

>>827
floatしたボックスのwidthに応じたマージンを
後に続く要素に設定しる。
例えば左がwidth: 30% だったら 右に margin-left: 31%; とか。
float の基本。

>>828
その通りにやったらできました。ありがとうございます。
floatの基本でしたか。まだまだ勉強が足りないようです。
基本のことなのにわざわざ答えていただいてありがとうございました。

あ、基本つーても「主なfloatレイアウトの基本」ね
別にfloatの基本ではない。

AAが結構そろっていてすごい>>827は
AAエディターを使っていたのだろうか、と推測する
漏れのいるスレッドはここでつか？

>>830
訂正サンクスです
やっぱり勉強が足りないな…

>>831
メモ帳のフォントをＭＳ Ｐゴシックの12ptにして、
あとはIMEパッドから罫線素片の文字を拾ってきて書くだけです
一応確認のためにこれも使いました
ttp://www.kiss.ac/~yfx/gb/aatest.cgi

おまいらのおすすめCSS（Level2）解説サイトはどこですか？

「三日坊主の部屋＋＋」が好きだった。

>>834閉鎖してるね

インラインフレームを使ったページで、
対応してないブラウザの為に
<iframe></iframe>間に色々書いてるんですけど、
そこに、背景をつけるのが、どうしてもうまくいきません。

・
・
<td>
<iframe>
<table>
・
・
</table>
</iframe>
</td>
・
・

↑のとき、<td>幅全てに背景をつけたいので、
<table>を<td>幅に合わせ、スタイルシートで背景を指定すると、
</table>のあとに一行空白みたいなのができて、
周りのレイアウトまでぐちゃぐちゃにします。

何か言い方法ないでしょうか？
説明分かりにくくて、すいません。

age忘れ・・・

>>835
こんなときこそweb.archiveだろ。

>>838
つーかトップページ以外は残ってるんで、
Googleで検索かければ引っ掛かります。

>>838
TakeMeBack!して墓場から引きずり出した。
サイト丸ごとローカルに保存して活用させていただきます。

↑間違えた。
×435
○833

label { width: 8em; }

ラベルの幅を揃えたいのですが
Netscape 7.0正式版で有効になりません。IE6では効きます。
バグでしょうか？

>>842は >>794- を読みましたか。

>>836
>インラインフレームを使ったページで、
>対応してないブラウザの為に
><iframe></iframe>間に色々書いてるんですけど、

iframe要素未対応のブラウザであるならば
<iframe></iframe>間に色々書いても無意味では。読み込まないでしょ。
あと、iframe要素未対応のブラウザってネスケ４のことだよね？
ネスケ４はＣＳＳ対応がバグだらけだから、まともに相手にしてられませんよ。

>>844
逆だよ。
iframeに対応していれば<iframe></iframe>間に書いてあるものを無視して
指定されたページをフレーム表示する。
非対応ならば<iframe>を無視して<iframe></iframe>間に書いてあるものを表示する。

>>843
読みました。
IE6のバグでしょうか。
全部テーブルに入れてレイアウトしました。あまり良くありませんが、解決。

dtとddを横並びにする方法を教えて下さい。

<dt>本名</dt>
<dd>Name_Not_Found</dd>

↑と打つと↓みたいに表示したいんです。

本名　Name_Not_Found

<dl compact>
<dt>aaa</dt>
<dd>bbb</dd>
</dl>

>>848
最高！ありがとう！

>>848
それは外部CSSでは指定できないんですか？
htmlに記述するしかないんですか？

そりゃCSSじゃないし、StrictDTDにもない属性です。

こういうのできるけど対応ブラウザ少ないから現実的じゃないね。

dt {
display : compact;
}

<dl>
<dt>aaa</dt>
<dd>bbb</dd>
</dl>

dl dt,dl dd{
display : inline ;
}

>>853
それじゃ全部一行になるだろ

dt{ float: left; width: *em; }
dd{ margin-left: *em; }

これをベースに色々やってみれ

>853
俺はそうやってんだけど、文法的にどうなんだろうな。

あー、そうか。並べたら1行になるから駄目なのか。
いまんとこ困ってないけど。

ありがとうございます！
>>854さんの方法でいきたいと思います！
みなさん色々教えてくれてどうもありがとうございました！

>>855
文法関係ない

もう、いっぱいいっぱいなってきたんで、
背景なしで、いきます。
スレ汚しすんませんでした。

captionにtext-alignを設定するのは間違いですか？
ブロック要素しか当てられませんか？

>860
table-captionはブロックレベル要素だから、間違いじゃない。

http://www.w3.org/TR/REC-CSS2/tables.html#q6
にもcaptionの左右揃えはtext-alignを使うと書いてある。

text-alignが効かないお馬鹿なネスケ6対策をおしえてくらはい。
#o1 {text-align:center}
#i1 {width:200;height:100}

<div id="o1">
<img src="a.jpg" width="200" height="120">
<div id="i1">文章</div>
...
</div>

>>862
効くだろ

>>862
ネスケだったかｵﾍﾟﾗだったか忘れたけど、text-align属性を使う要素にwidthとheightを指定してやらないと、text-alignが効かなかったなあ・・・

>>862
なにがどう出来ないのかちゃんと書けよ

>>862
div id="#i1"をセンタリングさせたいの？そうなら、お馬鹿なのはどっちかというとIEの方だね。
block要素のセンタリングはmarginの左右をautoにしましょう。
それかdivじゃなくてspanにするか。

>>862
#i1 { width:200px ; height:100px ; margin:auto ; }
数値には単位つけるように

訂正。

>>864のheightは余計だった。

あ・・・また間違えた・・それは別の話だった・・・
<div id="i1">文章</div> をspanにすれ・・

みなさまありがとうございます。できました。
>>867
単位っているんですか？frontpageで作ったページのソースは
全部単位無しですが、frontpageがお馬鹿なんですか？

お前が馬鹿

>>870
馬鹿

「ブロック要素にtext-alignは効かない」というのは直感的にわかりにくいので、
ネスケ6+の挙動の方を間違っていると思いこんでるCSS初心者は多そうな気がする。
というか、かくいう俺も、つい数ヶ月前まで、
「ちっ、なんでネスケ6はテーブルをセンタリングできないんだよ、だせえな」
とか思ってました。
逝こう……

margin:auto

IE5は逆にtext-alignでないとセンタリングできなかったりするから徹底しないんだよね。

captionにtext-alignを設定すると、

caption {text-align:center;}
Warning: The text-align property only applies to block-level elements.

と出るのはなぜですか？

Warningに理由出てるのに、なぜとか言われても。

>>877
>>861にも書いてあるけど、caption要素にtext-alignは正当でしょ？

>>876
<!ELEMENT CAPTION - - (%inline;)* -- table caption -->
ということです。

マジ？Captionって、ブロックレベルなの？

なんで、だんまりなの？

ｷﾞｬﾊ

CSS2の第17章を読むと、captionはcaptionであって、ブロックレベルではないと思われる。

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/tables.html#q5
表要素は匿名ボックスを生成し、表ボックスそのものと（存在すれば）
題名ボックスをそこに収める。

しかし、
CAPTION { caption-side: bottom;
width: auto;
text-align: left }
という例が掲載されているので、別にtext-alignを使ってもいいみたいである。

第9章には、次のように書かれている。captionは「'table'など」の中の「など」に
含まれるのかもしれん。

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#box-gen
ブロック要素（block-level elements）とは、ソース文書のうち、見た目に
ブロック（段落など）として整形される要素のことである。 'display'の値の
うちいくつかは、要素をブロックレベルにする。 'block'、'list-item'、'compact'、
'run-in'、'table'などがその例である。

>>883
なるほど。例外に扱っていいってことだね

すまん。CSS2にはっきり書いてありますた。text-alignを使っても問題なし。

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/tables.html#q6
題名の内容をボックスの端に揃えるには、'text-align'を用いる。

それじゃあ、

caption {text-align:center;}
Warning: The text-align property only applies to block-level elements.

っていうのは間違い？

これはNS/Mozillaの方が間違ってますよ。
ユーザーの利便性を考えて敢えてこうしているらしいです。
http://www.toybox.jpn.org/p_station/weblog/honjo/200208.html#d20020805

あ、問題の意味が違ったか。
でも仕様通りの動作でないことは確かです。

>>886
その判定プログラムを作った人の勘違いか、その判定プログラムがCSS1のものか、
のどっちか。

つーか、そのWarningっていったいどこから出たメッセージ？

floatの指定について質問させてください。
.left { float: left; width="65%"}
.right{ float: left; width="35%"}
として、
<TABLE width="100%"><TR><TD><div class="left"> <p>left</p></div>
<div class="right"><p>right</p></div></TD></TR></TABLE>
とします。実際の<p></p>の中にはもっと長い文字列を入れます。
これをIE5(Mac)で開き、ウィンドウの幅を徐々にせばめていくと、うまくleftとrightの比率が保持されず、横スクロールバーがでてしまいます。
IE6(Win)だと、それなりに比率を保ってくれました。
この比率を保持したいのですが、どうすればよいのでしょうか？
よろしくお願いします。

width="65%"……?　
“:”!!

(´-`).｡ｏO(divをfloatしてるのに何でテーブル組んでるんだろう)

>>891
ださい・・・すみません。修正してIE5(Mac)で比率を保持することを確認しました。ありがとうございます。
ですがleftに実際のコンテンツを入れてみると、rightが回り込まれずに下についてしまいました。
どこまで回り込まれるかは、左側のコンテンツの量に左右されるのでしょうか?
実際のコンテンツには、100文字程度の<p>とか、width="100%"の<table>、項目が10程度の<ul>などが入っています。
どれを削ればうまくいくのか、もういちど検証してみます。
>>892
なぜなら外注のデザイナーさんのレイアウトがそうなっているので。
(100%のtableに凝った背景画像とロールオーバーイメージつけただけですが)
あとは社内でレイアウトということなのですが、私、本来DTP担当なので、1から勉強しているのです・・・
tableをとってしまうのは、勉強不足ということと、時間がないので、避けたいのです。

質問させてください。。

UL{margin-bottom:0px}
って、環境によっては、意図した通りにならないことありますか？

（TD{line-height:120%} だとネスケの一部でくずれるじゃないですか。それみたいに）

tableつかうならdivにしないで
tdにかけばいいじゃん