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

質問させてください。
ソース
http://www.hikky.info/
CSSのアドレス
http://www.hikky.info/css/index.css
ページ中央のUpdating historyの下の枠二線が

2pxになるように、CSSでheight: 2px;と指定してみたんですが、
太く表示されうまい具合にいきません。
どこがおかしいのでしょうか？

>>288
IEが糞。DOCTYPEをstrictに変えてみたらどうなる？

OperaとNNでは期待通りの表示だったぞ。

>>289
strict宣言しても変化ありませんでした。
>>290
NN7.1で確認しました、期待通りです。
IEが糞なんですかね。それともやはりhtml・cssの記述におかしいところがあるのでしょうか？

引き続きご指導のほどよろしくお願いします。

>>288
<div class="upd2"></div>
<p id="upd1" class="upd1"></p>
<div class="upd2"></div>
ナニコレ？
IEも糞だが、空divなんてやるのも糞だぞ。
borderでやれないのか？

>>288
>.row1 { float: left; }
ＦＡＱの>>7を見なさい。
A4: floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。

>>288
.upd2 { margin-top: 0px; width: 214px; height: 2px; background: #D5DBE2 url(../img/upd2a.gif) repeat; }
なんで線を引くのに背景画像でやるのかねえ。
わけわからん。

>>288
たぶんWinIEのバグ。
http://pc5.2ch.net/test/read.cgi/hp/1078463560/96

>>295
コメントを入れたらうまくいきました！
IEのバグだったんですね。
ご指導いただいた皆様、どうもありがとうございました。

>>296
だから、コメント入れただけの空divを作るのがそもそも間違ってるんだよ。
まだわかってないのか。
なぜborderでやらないんだ？

>>288
<div class="upd2"></div>
は二つとも削除しろよ。
その代り
#upd1 {border:2px solid #000; border-width:2px 0;}
で、出来るだろが。
中身のない無意味なマークアップは止せ。

>>297
やり方が分からないからです。
もし宜しければ気が向いたらでいいので
下記スレッドに質問しましたので、回答をよろしくお願いします。
http://pc5.2ch.net/test/read.cgi/hp/1079712912/

>>299
単なる黒い線を出すのになぜ画像でなければいけないのか、理解に苦しむ。
どうしても画像で枠線を出したいなら
<div class="upd2">
<p id="upd1" class="upd1"></p>
</div>
として、CSSを
.upd2 {padding:2px 0; width:214px; background:#000 url(../img/upd2a.gif) repeat;}
とすればよいだろ。
応用力を利かせようね。

いえ、分かりにくいかもしれませんが
黒線ではなく、縞模様です。

>>301
縞模様だからナニ？
>>300の方法でできるだろ。
書き込む前に読み直して熟考してからにしような。

>>286
select要素ではz-indexやborderなどのプロパティを無視する(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b112.html

>>302
borderはどこでしょうか・・？

>>288　ひどいソースだな……。
.upd2 { margin-top: 0px; width: 214px; height: 6px; background: #D5DBE2 url(../img/upd2a.gif) repeat; }
<div class="row1">
<p class="upd1"><img src="img/upd1.gif" alt="更新履歴"></p>
<div class="upd2"><!--有効--></div>
<p id="upd1" class="upd1"></p>
<div class="upd2"><!--有効--></div>
</div>
↓
↓もっと簡潔にすると
.upd2 { padding:6px 0; width:214px; background:#D5DBE2 url(../img/upd2a.gif) repeat; }
<div class="row1 upd2">
<p class="upd1"><img src="img/upd1.gif" alt="更新履歴"></p>
<p id="upd1" class="upd1"></p>
</div>

>>302
見てわからんか？　試せばすぐわかることを訊くな。とにかくやってごらん。
ヒント：上下paddingに注意。

>>304
むやみに質問しないで、少しは自分の頭も使ってね。
>>300か>>305の通りにやってみ。

>>4のテンプレURL変更あったので報告。

> ・『スタイルシートWebデザイン』ボランティアHTML化版。
> 　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
　　　　　　　　　　　　　　　　↓
http://www.asahi-net.or.jp/~jy3k-sm/css1/2004maki/

>>308
了解、こちらは変更した。
http://web2ch.s31.xrea.com:8080/?CSSRelated

さｇ

あg

>>308
そこすごい勉強になったわ。
ただでこれぐらいの勉強できるんだったらこの手の本はいらないね。

>>312
妙な日本語だ

自分のサイトをリニュウアルしようとXHTML+CSSで製作中なんですが、問題が発生したので質問させていただきます。

こちらのURLを見てください。
http://be-net.xrea.jp/file/

メニューの一番最初の項目が思いもよらない表示になるんですが、この解決策はないのでしょうか？
なぜかローカル上で見ると普通に見えます。
自分はFirefoxを使っているんですが、どうやらMozilla系は全部このように表示されるようです。

CSSにバグがあると、よく聞くのですが
http://members.at.infoseek.co.jp/cssbug/detail/mozilla/b018.html
このバグでしょうか？

>>314
とりあえずIEで見た感じの通りにしたいと過程するとして、このままだと
IEはXML宣言を含むXHTMLを互換モードでレンダリングするバグがあ
るので互換モードでレンダリングされてるのが1つ。

後はいじくってみる。

添削してて気がついた。
<a id="top" name="top" />
↑これなんだ？もう一度仕様書読んで出直してこい。

あとこういうメニューはliにfloat:leftしてaをdisplay:blockするほうがやり
やすいと思われ。
Listamaticとか見てくれ。

>>316
><a id="top" name="top" />
スレ違いだけど、指摘しておく。

XHTML 1.0文書だから、XML文書としては整形式なマークアップ。
ただし HTML適合UA との互換性に支障を来たすので、不許可。
Content-Type が text/html として提供される場合も、不許可。
それよりも、body の直接下位にa要素を記述するのが invalid。

>>314
<h1><a id="top" name="top">Cat&me</a></h1>
このように記述しておくのが無難。

>encoding="Shift-JIS"
Shift-JIS という符号化方法は IANA に登録されていない。
正しくは Shift_JIS と指定しなければならない。
meta要素では正しく指定できているから、ケアレスミスか。

>314　HTMLもCSSもつっこみどころが多いよ。
まずはlintやCSS Validatorでチェックすることをおすすめする。

>>317
お前書き方がめちゃめちゃキモい
度が過ぎる信者はﾏｼﾞﾃﾞ死んでくれ
吐き気がするんだ。

>>318
CSS を検証したら Valid だったよ。

>>314
>メニューの一番最初の項目が思いもよらない表示になるんですが
やはり CSS 以前の <a id="top" name="top" /> が原因。

スタイルシートの設計の仕方だけど、ピクセル厨を直した方がいいよ。
em単位とか割合値を使えばもっと柔軟なレイアウトを実現できるはずだからさ。

>>319
キモいかどうかは知らないけど、
仕様書と照らしあわせてただ間違いを指摘しただけの
真っ当な回答者も「度が過ぎる信者」と極め付けですか。
根拠もなく感情的に煽ってるキミのほうが、吐き気がするよ。

スルーできないあたりがキモイ

background-attachment: fixed;と指定しても
背景が一緒にスクロールしちゃうんですががｇ(´･ω･`)

<BODY STYLE="background-image:url(　　);
background-repeat:no-repeat;
background-position:left center;
backround-attachment:fixed;
scrollbar-base-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
"></BODY>

こんな感じです・・・
どうしてもスクロールバー消せなかったから
色を白にして誤魔化したのが原因ですか？＿|￣|○

スクロール・バーを消すなよ、迷惑な奴だな。

http://cssbug.at.infoseek.co.jp/detail/winie/b065.html

やれやれ、今度はピクセル厨という新語か。
そういうのは他のスレでやって欲しいもんだが。

新語はともかく、px単位は濫用すべきでないことはたしかだ。

>>323
え？迷惑なんですか(；´д`)？

>326　スクロールバーを消されてうれしい奴はいないだろう。
そのページのどのへんを読んでいるのかわからなくなる。
たいへん迷惑だ。

落ちてる間にすごい進んでてたので遅レスｽﾏｿ

>>317=320?
いや、だから>>314に対して<a id="top" name="top" />はなんだ？
仕様書見てこいって返してるんだが？

ちなみに<a id="top" name="top" />削ったら手元じゃきちんと(？)表示
されたところまで確認してレスを書いたんだがうまく読んでもらえなかった
ようで…。

で、>>320は回答の仕方がきもいと言われてるのに気づいてくれ。
ネチネチと女の腐ったような回答は不快感を与えるだけ。
<body>直下に<a>要素を配置してはいけません。
くらいでよかったのに。

>>327
なるほど

で、背景画像が固定できないのは直ったのか？

質問です。
横スクロールバーだけ透明色にすることは可能でしょうか？

やめろ。なんでそんなことしたいんだ？　>>331
そもそも不可能。

>>330
まだ(´Д⊂

>>333
HTMLとCSSのソースをチェッカーにかけた方がいい。
それでもわからなかったら、ここにソースを出すよろし。

>>332
そうですか･･････。
すいません、ありがとうございました。

で、なんでそんなことしたかったんだ？　ン？　>>335

>>334
お風呂入ってからがんがるよ
またお世話になるかもしれないけど色々ありがとう（´▽｀）ﾉ

>314です。

>315さん、>318さん、>320、>325さんレスありがとうございます。
すでに確認された人もいるでしょうが、言われた事をざっと直していったらなぜか正しい表示になりました。
これで正確な記述がどれだけ重要かがわかりました。

CSSの仕様書を見直して、リンクのボタンの大きさをem単位で指定してみようと思います。

とても参考になりました、ありがとうございます。

質問です。
http://www.asahi-net.or.jp/~jy3k-sm/css1/2004maki/7.html#h714p2

上記のサイトのサンプルを試しているのですが、うまく動きません。
マウスカーソルをかざしてもリンク先が現れないのです。
なぜでしょうか。 Mozilla 1.7b と IE 6.0 です。

<style type='text/css'>
DIV.HIDE A:link{visibility: hidden}
DIV.HIDE A:hover{visibility: visible}
</style>

<DIV CLASS="HIDE">
<P>あなたを
<A HREF="http://www.asahi-net.or.jp/~jy3k-sm/i_net/books.html">アヤシイ世界</A>
に案内します。
</P>
</DIV>

WEBをCSSで記述したほうが、通常のHTMLで記述するより
SEO対策になりますか？

>>339
自信は無いが，ブラウザのCSSの実装が不完全なために，
意図した通りに表示されないのでだと思う。

ttp://www.zspc.com/documents/css2/index.html

>>340
CSSはデザインを扱うものです。

>339　細かいことはおいておくとして、
それだとリンクがどこにあるかわからないだろう。
入口がどこにあるかわからないサイトがよくあるけれど、
そういうサイトを見るたびに、その程度の配慮もできないのかと落胆する。

>340　漠然としすぎているよ。
ただ、HTMLとCSSをわけたほうが、それぞれのソースをきれいにしやすい。

ご回答ありがとうございます。

>>341
バグということでしょうか？ならばバグ辞典スレッドに行ったほうが良いのでしょうか？

>>343
私には、リンクを隠そうという目的は特にないのですが、CSS の勉強中で、
何が間違っているのかわからないので質問させていただきました。

ただ、私はプログラマなので、見かけよりも、操作性を変える属性に
興味があるのは事実です。かなりトリッキーな仕様を要求されることが
多いもので。

>>344
Bugzillaをパっと見てきた程度で見当違いかもだけど
http://bugzilla.mozilla.org/show_bug.cgi?id=33736
これに関連してるんじゃないかなぁ？
visibilityに関するバグは多いようなので使わない方が無難な気がします。

あとトリッキーな動作だと、IEの疑似要素のサポートはへぼいんで
JavaScriptとか使う方がいいかもしれんです。

>>344
色でやっちゃえば？
DIV.HIDE A:link{ color: #FFFFFF }
DIV.HIDE A:visited{ color: #FFFFFF }
DIV.HIDE A:hover{ color: #0000FF }

>>345
どうやら、Mozilla はこれのようですね。IE にも同じようなバグがあるのでしょう。
ありがとうございました。
>>339 のリンク先は、CSS2 を実装したブラウザが出る前に書かれたものなので、
こういうことがあっても不思議ではないかもしれません。

>>346
それでは、TAB でフォーカスを移動させたら、カーソルが移ってしまいます。

ためしに JavaScript で書いてみました。

<A HREF="http://www.asahi-net.or.jp/~jy3k-sm/i_net/books.html"
onMouseOver='style.visibility="visible"'
onClick='style.visibility="visible"'
onMouseOut='style.visibility="hidden"'>アヤシイ世界
</A>
に案内します。

これ、一度マウスがリンクから離れると、もう一度マウスをかざしても
二度と復活しません。クリックも効きません。

どうやら現状は、こういうもののようですね。

>>348
TABなんか移動しないようにすればいいだけじゃん。
それにJavaScriptならいくらでもできるし。

>>349
確かに、JavaScript でたくさん書けば、何でもできます。しかし、
複雑なコードは干渉を起こしやすいので、大規模なアプリケーションでは
できるだけ避けたいのです。

今回、style の visibility に興味があったのは、従来、大量のコードを書いて
実装していた機能を、もっと簡潔に実現する手段の一つとして使えないかという
試みでした。

残念ながら、現状のブラウザでは信頼性が低く、諦めたほうが良いようです。

>350　いまひとつ目的がはっきりしないようなんだけど、
具体的にどんなことをするのか、何かねらいはある？
「大規模なアプリケーション」とあるから、
何か大きなことをしているように見えるんだけれど。

この手合いは「あー言えばジョウユウ」だから進展はせんだろな

古っ！

>>339
<style type='text/css'>
DIV.HIDE A{position:relative; z-index: -1;}
DIV.HIDE A:hover{z-index: 1;}
</style>

<DIV CLASS="HIDE">
<P>あなたを
<A HREF="http://www.asahi-net.or.jp/~jy3k-sm/i_net/books.html">アヤシイ世界</A>
に案内します。
</P>
</DIV>

試してみそ

遅くなりました。まず２点ほど、お詫びをしなければなりません。

まず、私の目的ですが、今回は単なる勉強で、なぜサンプルコードが
動かないのかを知ることができればよかったのです。
そのことをきちんとお伝えしていませんでした。すみません。

次に、下の Bugzilla ですが、
http://bugzilla.mozilla.org/show_bug.cgi?id=33736
読んでみたところ、結局、バグとも正常とも決着していない、
保留状態のようです。バグというのは、私の勘違いでした。
少なくとも現在は、visibility:hidden はこういう挙動だと
考えて良いようです。

最後に、>>354さん
Mozilla では見事に動きました。ありがとうございました。
z-index をこういう使い方をするのは、思いつきませんでした。

ただし、IE6 では z-index に負の値を与えると動かないそうで、
http://www.zspc.com/documents/css2/display/zindex.html
これはまさにバグだということです。

ということで、いろいろありがとうございました。

>>355
終わらそうとしているところにこんなこと書くのもなんだけど、CSSはW3Cが
"勧告"してるだけで強制力はありません。
挙動はブラウザに依存します。
プログラマであればわかると思いますが、例えばサイトや本のサンプルコード
をそのまま入力してもコンパイラによってはコンパイル出来ないことがあるのと
にています。
全てのブラウザ(コンパイラ)がW3C勧告(仕様)に従えばクリエイターやデザイ
ナー(プログラマ)にとっての理想ですが、悲しきかなこの世は理想とはかけ離れ
ています。

といったことを念頭に勉強されるのがよろしいかと。
ましてや実務に使おうと思うのであれば仕様のみでは無駄かと。

>>355
>IE6 では z-index に負の値を与えると動かないそうで、

そんなこたぁない。誤解してるよ。
>>354に
DIV.HIDE {position:relative; z-index:0;}
を追加するとかさ。

質問させていただきます。
OSはWin2000、ブラウザはIE6.0、NN7.1で確認しています。

フレームを組んでいて、インラインスタイルで下記のように指定しています。

<FRAME name="right" src="menu.html"style="border-left:solid;border-left-width:1px;border-color:#000000;"scrolling="AUTO" frameborder="NO" noresize>
</FRAMESET>

IEではボーダーが表示されるのに、ネスケでは表示されません。
内部スタイルシートで指定すれば表示されるんでしょうか…
そうであるなら、どの様に記述すれば良いのでしょうか？
初心者で申し訳ありませんが、ご教授お願いします。

申し訳ありません、追記です。

外部スタイルシートの場合の記述も教えて頂きたいです。
お願いします。

>>358
×　border-left:solid;
○　border-left-style:solid;

スタイルが設定されていないのに表示するIEの方がちょっと変。

>358　
インラインスタイルとか内部スタイルシートとか、
わけのわからない単語で書かれても意味が通じない。
>358だと単にstyle属性を使っているだけだから、
font要素などで見栄えを記述しているのと大差ない。

CSSを別のファイルで読み込ませる場合は、
各フレームにclassをつけるとよいと思う。
詳しいことを聞く前に、とほほなどを見ながら一度やってみるといいと思う。

>>360
それは間違いではないだろう。

>>361
"インラインスタイル"は、HTML4.01の"Inline style information"だと思われ。

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

>360
早速直してみましたが、ネスケでは表示されないです。。

>361
解り難い書き方をして、すみません。
あまり理解していないので、そういう言い方をした方が意味が通じるのかなと
思っていたのですが、かえっていけなかったんですね。

CLASSは試しましたが、フレームに適用されないで読み込ませたページの端に
ボーダーが表示されたりしたので、出来ないのかなと思って。。
とほほも見ましたし、検索などもしてみたのですが、どうにも解決しそうになかったので
ここで聞いてみました…
自分が何か間違っていたのかも知れませんので、もう一度よく調べてやってみます。
ありがとうございました

frameborderの値は"0"か"1"かのどちらかではないのか。

色々試したけどMozとIEじゃ親子・兄弟でz-indexの値の解釈がバラバラだな
仕様読んでこよっと

>>365
ここに解説があるって。
http://cssbug.at.infoseek.co.jp/detail/mozilla/b038.html

#「バグ辞典」は必読です。

　質問させてください。
　HTMLで
<p><a href="http://nantoka">あいうえお</a></p>
とし。CSSにて
p{line-height:2em;width:200px;}
と、line-heightを1emより大きな値などにした後、
InternetExplorer6.0でブラウズしているとき、activeの状態、
というよりマウスでクリックしている状態にすると、
破線で囲われる範囲が本来の文字の縦幅よりも下に伸び、
はみ出てしまうのです。
　Netscape 7.1でははみ出しません。
　IEではみ出さない為にはどうしたらいいのでしょうか。
そもそも、なぜはみ出してしまうのでしょうか。
お教えください。

>>367
バグです。諦めましょう。

>>367
>line-height:2em;
line-heightは単位無しの実数値指定がおすすめ。line-height:2.0;とかね。
過去ログ既出。

何故？

質問させていただきます。
OSはWin2000、IE6.0、NN7.1で確認しています。


リンクを指定しています
a:link{color:#666666;text-decoration:none;}
a:visited{color:#666666;text-decoration:none;}

a:hover{color:#000000;border-bottom: 2px dotted #FFFF00;font-weight: bold;}

a:active{color:#FFFF99;text-decoration:none;font-weight: bold;}
ソースは
<a href="×"><IMG SRC="×.gif" ALT="×"border="0"></a>
border-bottom: 2px dotted #FFFF00;が表示されます。これを一箇所だけ回避したいのですが
どのようにすればいいか教えてください。ど素人な質問ですが宜しくお願いします。

　返答ありがとうございます。　バグなんですか…！
続けての質問で申し訳ないのですが、
このバグの説明などを載せているサイトはありますか、
自分なりに「http://cssbug.at.infoseek.co.jp/index.html」や
過去ログやGoogleで調べたのですが、見つかりませんでした。
　後、>>369さんの助言はとても参考になりました。どうも。
　>>370さんは…>>367の「そもそも、なぜはみ出してしまうのでしょうか。」という発言の
「なぜ」という部分を疑問に思ったということでしょうか。
　返答お待ちしてます。

>>371
回避したい箇所にclass属性をつけ、classセレクタでスタイル指定を上書きする。
>>4を読むとワカル。

>>373
回答ありがとうございます。
http://cssbug.at.infoseek.co.jp/detail/winie/b040.htmlの事でしょうか？
実は質問するまえに試してみました、結論から言うとダメでした
「<em style="text-decoration:none;">」や
「a.sample1{color:#000000;text-decoration:none;}」など。表記が間違えている
可能性はありますが、もし宜しければもう少し詳しくご教示ください。
宜しくお願いします。

>>374
>http://cssbug.at.infoseek.co.jp/detail/winie/b040.htmlの事でしょうか？
いいえ。バグは関係ありません。なぜそんな見当外れな参照をするのか？
そもそもborder-bottomを消すのにtext-decorationをいぢっても無意味。
border-bottomを消したいなら、border-bottomを指定し直して上書きするべし。
border:none;とかborder:0;とか。
意味がわかってないみたいだから>>4でCSSのイロハから勉強し直しませう。
　http://msugai.fc2web.com/web/index.html

>>375
回答ありがとうございます。
確かに、その上記のサイトを参照するのは無理がありすぎですね。
border:none;　border:0の上書きは一番始めにやった事で、もちろんダメでした
たぶんstylesheetの記述の仕方がどこか根本的に間違えているのでしょう。
もう一度勉強します。ありがとうございました。　

締め切り間に合わないやー

>>376
ソース（HTMLもCSSも）出せば直せるけど、
ソースを出さずに質問されても誤りを指摘できぬ。

下のようにボックスの内容を下揃えするにはどうすればいいでしょうか。
┏━━━━━━━━┓
┃　 　 　 　 　 　 　 　 ┃
┃　 　 　 　 　 　 　 　 ┃
┃　 　 　 　 　 　 　 　 ┃
┃こんにちは。　　　　┃
┗━━━━━━━━┛
vertical-align:bottomと指定してみましたが、うまくいきませんでした。

>>371
私が質問を理解できていないのかな？こう書けば必ずうまくいくんだけど。

<style type='text/css'>
a:link{color:#666666;text-decoration:none;}
a:visited{color:#666666;text-decoration:none;}
/* ↓色が見づらいので #000000 black に変更 */
a:hover{color:#000000;border-bottom: 2px dotted #000000;font-weight: bold;}
a:active{color:#FFFF99;text-decoration:none;font-weight: bold;}
</style>

<a href="×" ><IMG SRC="×.gif" ALT="×"border="0" ></a>
<a href="×" ><IMG SRC="×.gif" ALT="×"border="0" ></a>
<!-- ↓だけ下線がつかない -->
<a href="×" style='border-bottom:0px'><IMG SRC="×.gif" ALT="×"border="0" ></a>
<a href="×" ><IMG SRC="×.gif" ALT="×"border="0" ></a>

>>378
どんなソース（html/CSS）を書いて、何に対してvertical-alignを指定したか書いた方が良いです。

>>380

<h1 id="midasi">見出し</h1>

#midasi {
width: 200px;
height: 100px;
vertical-align: bottom;
}

このような感じです。

行内の文字の位置を指定するのが vertical-align
行の高さは line-height であって height ではない

>>381 こんなんじゃダメかしら？高さが px じゃなくなってるけど、
適当に小数で調節すると言うことで。

<style type='text/css'>
h1#midashi { border: 1px solid black; }/* ボーダーが見えるように */
h1#midashi { max-height: 2.3em; padding-top: 1.3em; }
</style>

<h1 id='midashi'>
下寄せの文字下寄せの文字
</h1>

>>382
やはりvertical-alignは行内の位置ですか。
http://deztec.jp/site/tips/page/p0037.html#table
のvalign属性の置き換えをヒントにたのですが。

>>383
ありがとう。
でも、h1に背景を入れるので、pxで指定しているんです。

table全体のテキストにインラインでline-heightを設定したいのですが、どう書けばいいのでしょうか？

ごめん自己解決しました。

こんどから質問する前に１２分間考えような。

div厨っぽいとか色々ダメなソースなのですが、
MacOS10.3&Safari1.2、MacOS10.3&IE5.2で
p.bigboxが何も内容が無いかのような
borderの表示になります。
回避策は特に求めていませんが、なぜそうなるのか知りたいので、
わかる方がいたら知恵をお貸し下さい。

<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<title>float実験</title>
<style type="text/css">
<!--
.bigbox{border-bottom:dotted 1px #ff0000;}
.floatbox{float:left;border:solid 2px #0000ff;}
-->
</style>
</head>
<body>
<p class='bigbox'>
<div class='floatbox'>インラインなdiv
<br>〜<br>
インラインなdiv</div>
<div class='floatbox'>インラインなdiv</div>
</p>
</body>
</html>

すみません、『インラインなdiv』ってのは気にしないで下さい…。
意味不明。

>>388
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#floats
>このプロパティの対象となる要素には，何らかの方法で幅を明示しなければなりません（widthプロパティなどで割り当てるか，置換要素の場合は内在する幅が流用される）。
>CSS2仕様では，幅が明確ではないフロートの幅は「0」とみなされます。

>>388
うっかりスルーしちゃったけど、p要素の中にdiv要素は配置できません。
適当な匿名の（インライン）要素だと解釈した。

>>390
レスありがとうございます。
floatのwidthの件は、私も後で気づいて修正してみました。
pの子にdivはだめなのですね。勉強不足でごめんなさい。

ソース8行目を
.floatbox{float:left;border:solid 2px #0000ff;width:20%;}
にして、pをdivにしてみました。
でもやはり先程とおなじでした。
とにかく、「適当な匿名の（インライン）要素だと解釈した。 」っぽいかもしれません。

>>388
＞<br>〜<br>
ここが意味不明。実際はどうしてるの？

仕様では、ボックスサイズを算出する際にはフロート化された子孫要素は除外されます。
cf.
http://cssbug.at.infoseek.co.jp/detail/winie/b053.html
http://cssbug.at.infoseek.co.jp/detail/winie/b079.html

自己レスです。
http://cssbug.at.infoseek.co.jp/detail/winie/b053.html
float化された子孫要素の分は、幅や高さの算出に除外されるのが正しいんですね。

私が考えていた回避策で、親の.bigboxの中に直接文字を入力するのがあったのですが
それができた理由がわかりました。
2番目の.floatboxをfloatさせないか、.bigboxにheight等のプロパティを指定すれば
OKでした。
結局回避策の話しになってしまいました。ってか、スレを俺メモにしてしまって
すみませんでした…。

>>7に全部書いてありましたとさ。
http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2

>>393
ありがとうございました。私もちょうどカキコを見る前にわかって
かぶってしまいました。ごめんなさい。
<br>〜<br>はソースをカキコ用にはしょった際に残してしまった残骸です。
意味はありませんです。では、今度こそ消えます。

>>378
・まず、font-size:100px のインライン要素を置き、その次に見出しの文言を vertical-align:bottom で置く。
・h1 の height:m px; padding-top: n px; と書き、m + n = 100px となるよう調整。
・h1 の中にセルが一つだけの table を置き、td に vertical-align:bottom を指定。

いろいろ試したけど、tableがいちばん結果が良かった…。
何かないでしょうかねえ、他に。

<style type='text/css'>
h1.midasi3 { border: 1px solid black; }/* ボーダーが見えるように */
h1.midasi3 { width:200px; height:100px}
table.midasi3 {border-collapse: collapse}
table.midasi3, tr.midasi3, td.midasi3 { height:100px; vertical-align: bottom; border-width:0px; font-size:25px;}
/*フォントサイズは自由に変更可能*/
</style>

<h1 class='midasi3'>
<table class='midasi3'><tr class='midasi3'><td class='midasi3'>見出し３</td></tr></table>
</h1>

きったねーｗ

あと一つ、（透明）GIF を インライン要素として使う方法。
これも寸法がぴったり出る。しかし、こんなの CSS でやることじゃないよね。

<style type='text/css'>
h1.midasi { border: 1px solid black; }/* ボーダーが見えるように */
h1.midasi { width:200px; height:100px;}
span.midasi {vertical-align:bottom; font-size:50px;}/*フォントサイズは自由に変更可能*/
img.midasi {width:0px; height:100px;}
</style>

<h1 class='midasi'>
<img class='midasi' src='firefox.gif'/><span class='midasi'>見出し</span>
</h1>

>>398 つくづく同意だけど、なんか他にない？

>>397
h要素にブロックレベルはいｒ

>>378
こんなのはどうでしょう？

#midasi{width:200;height:100;background-color:#ff6600;position:relative;}
span{position:absolute;bottom:0;}

<div>
<h1 id='midasi'><span>見出し</span></h1>
</div>

>>401
素晴らしい！正直、感動しました。私が言ってもしょうがないのだけど。

>401
width と height、0 以外は単位がいるぞ。

個人的には

<div id="midasi">
<h1>見出し</h1>
</div>

で、span のスタイルは h1 に振る方が好きだな。
ちょっとばかし、論理的に見える気がする。気がするだけ。

ああ、見栄えありきのマーク付けするんならテーブル使えようぜー

んな、あほな

>>405
逆説的、って言葉は知らんか。

xpを使っています。IE6.0です。
printが何行にもわたっている中にボタンを組み込みたいのですが、
エラーが表示され、うまくいきません。

print "";
print "";
print "";
print "";
print "<form>
<input type=button value="戻り" class=s onClick="history.back()">
</form>";

>>407
それ
cgi

>>408
ありがとうございます、なぜかスタイルシートと間違えてました。
今度こそcgiのところいってきます。

>>407
一応言うけど、属性値とかに使う"は\"って書こうな。

print <<EOH;

<form>
<input type=button value="戻り" class=s onClick="history.back()">
</form>

EOH

ってヒアドキュメントにしちまえよ。

みなさん、いろいろ考えてくださり、ありがとうございました。
考慮した末、>>401-403にしようと思います。

<style type="text/css">
#midasi {
width: 200px;
height: 100px;
background-color: #ff6600;
position: relative; /* 基準ブロック化 */
}
h1 {
position: absolute;
bottom: 0;
}
</style>

<div id="midasi">
<h1>見出し</h1>
</div>

ページでエラーが発生しました
と、出たり出なかったりするの何ですか？
あと、ライン9とか文字6とかってどこでしょうか

>>413
出たり出なかったりってよくわからんけど
一番上の行から９行目の６文字目辺りに問題があるってことじゃない

>>414
うーん、6行目はtitlle・・・。おかしくないはず。。。
http://ryu-purity-tube.hp.infoseek.co.jp/03as01.html
見てください。エラーが発生しなかった場合は、
下にある「次へ」押してもらって､下の「前へ」押してもらえば出ると思います。
ってか1〜3ページまでエラーが発生するんですが；；

バカヤロー <body ...onload="...."> の最後の 「"」も「>」もないぞ!
こんなエラーも見つけられない奴はWeb製作する資格なし!
しかも糞重い画像満載、二度と見たくない。

僕の環境ではエラー出なかったんですけど(Mac・IEとSafariで確認)
Line9っていうと
<div align="center"><!-- isweb auto-insert */ -->
に問題があるってことなんで、もしかしたらisweb側に問題があるかもしんないです
一度サポート掲示板とか、サポートの方にメールしてみてはいかが。


実際のエラー見てないので具体的に回答できないですごみんなさい

そんなことより前にブラウザでview sourceしてiswebが加工した後の
実際にブラウザに載っている状態のHTMLを確認すれ! それが先決だろ!

>>416
">付けたらよけいにエラー発生してしまいましたが。
>>418
。。。スイマセンよく分からないのですが・・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<link rel="stylesheet" href="dat.css">
<title>2003東京オートサロンレポート</title>
<body bgcolor="#000000" text="#CCCCCC" vlink="#666666" topmargin="0" leftmargin="0" onLoad="MM_preloadImages
<div align="center">
<div align="center">
<center>
<center>
<div align="center"> 03/01/12 <p>2003東京オートサロンレポート</p>
<p>その２</p>
<table border="1" cellpadding="0" cellspacing="2" width="590">
<tr>
<td><img src="img/event/03autosalon/P1120020.jpg" width="320" height="240" border="0"></td>
<td><a href="http://www.s-2.co.jp/nkb/" target="_blank">NKB
POWER</a>のゴルフカブリオレ</td>

……ひどいソースだな。<HEAD>も<BODY>も閉じてない。致命的だぞ。
他にもツッコミどころ満載。まずHTMLを直せ。

もうHTMLも記述できねーやつはプレーンテキストで情報配信しろよな。

どうして初心者にそういうこと言うんですか･･･

onLoad="MM_preloadImages"はいいが、肝心のscriptはどこよ。
見当たらないんですけど。

>>422
初心者の為に言ってるんだ、正しいHTMLを書かないと、CSSだって思惑通りには効かない。

>>423
多分消しました。
他の所のｿｰｽ改造(？)してたんです。
で、そこはフレームのぺージで、
僕のは普通のページだったんで、横にフレームとか出たままで､
どうやって消すのか分からず、ちょｚつとづつ消していた所､
こうなってしましました。。。

>>425
なるほどわかったよ。まずはHTMLの文法をどっかの入門サイトで
学ぼうね。タグの <...> の「>」だけ消すとか "..." の閉じる「"」
だけ消すとかしてたら見せられた方が怒って当り前だろ。ちょっと
ずつ消せば直せるっていうもんじゃないの。それ以上言うことはない。

＞多分消しました。
はぁ。そうですか。じゃあScriptはリンクさせて無いんですね。
じゃあ何処からMM_preloadImages関数は沸いてでてくるんでしょう。

関数じゃなくてクラスか。

何にしろ、一からソース直しましょうね。

なにこのスレ＿|￣|○

CSS以前に文書の書き方が間違ってる。
Web制作初心者スレにでも行って勉強しなおしてください。

(はちゃめちゃな)論文書いて提出しても認められませんでした。
なんででしょう？

って聞いてるのと同じだ。

>>428
関数だよ、単に関数呼び出しの「(...)」も全部消してみたんだろう(笑)
そもそもあのソース、関数が未定義とかいう指摘をするはるか以前の
状態でしょ。

>>422
まるで、初心者運転なら人をひき殺しても許されると思ってるような言い方だな。

なんかとんでもないのが現れてるね。
みなさんの心中お察しします。

>>420
ﾜﾗﾀ

あれだ、413はビルダーでも使えｗ

>>417 の「エラーの出なかったブラウザ」もかなり（ｒｙ

IE6で
p:first-line {color:red;}は効いて
p:first-line{color:red;}は効かないんですが、バグでしょうか？

戻してみました・・・。
http://ryu-purity-tube.hp.infoseek.co.jp/01as.htmｌ
ここの左側のフレーム外すのにはどこをどう変えればいいですか･･･
本当にスミマセン。
宜しくお願いします

>>420
ひどいソースなのは同意だが、ツッコミどころを間違っているぞ。
HEAD要素もBODY要素も終了タグ省略可。

>>437
バグ










だと思ったら自分で確認してから言え。

>437　セレクタと{（左中括弧）の間に空白を入れればよい。
たぶん、その方が安全。

>438　ここはCSSスレで、スレ違い。
せめてもうすこしまともなhtmlを書けるようになってから。

>>438
はスレ違いであることも分からないわけなんだろう。
ともかく、この状態で教える奴はいないと思う。
自分である程度は勉強しないと鼻つまみになるだけ。

下記のHTML文書を IE6 で観ると、リストアイテム間にマージンが生じてしまいます。
Opera7 では、ちゃんとくっついて見えるのですが、何が原因なのでしょうか？

http://cssbug.at.infoseek.co.jp/detail/winie/b071.html
この辺りに関連があるかな、と思いましたが、imgはもともとblock要素ですし、
補足で示されている回避方法を試してみましたが、やはり直りませんでした。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
<meta http-equiv="content-style-type" content="text/css" />
<title>CSS テスト</title>
<style type="text/css">
* { margin: 0; padding: 0; }
</style>
</head>
<body>
<ul>
<li><img src="hoge1.png" width="200" height="20" alt="hoge1"></li>
<li><img src="hoge2.png" width="200" height="20" alt="hoge2"></li>
<li><img src="hoge3.png" width="200" height="20" alt="hoge3"></li>
<li><img src="hoge4.png" width="200" height="20" alt="hoge4"></li>
</ul>
</body>
</html>

失礼、age忘れたのでageます。

また、<img>要素の閉じ（/>）を書き忘れていました。すみません。
（書き足してもスペースは消えませんでした）

>>442
すいません。勉強してきます。
それから何故どこもあんなに難しく書いてあるんですか？
初心者には分からないのですよ､全く。
それは頭が悪いからと言われればそれまでですが、
初心者のためのページで作られたんじゃないんかな？
ってつくづく思います。
とほほ以外で1番オススメんは所を教えて欲しいです。
テンプレのﾄｺﾛは難しいです。

>>445
スレ違いです。

>>445
あの程度で難しいと思ってるなら素直にホームページビルダーなりなんなり
使ってる方が幸せ。
最初はみんな初心者だ、理解力があるかどうかなだけで言い訳にはならない。

とりあえずあれだ、入門書でも1冊買ってこい。

遅レスですが
>>379
style='border-bottom:0px'うまくいきました。
あまりにアホな質問なのに、レスありがとうございました。
精進します。

>>445
国語から勉強し直して「読解力」を身に付けたらどうだ。
国語能力が乏しい人間は HTML を理解することができない。
HTML を理解することができない人間は CSS も理解できない。

style=はｼﾝｸﾞﾙｸｫｰﾄでいけたんだ。
知らんかった。

>>445
ごめんね。ここの住人は、プログラミングができるぐらいの人が中心だから、
本当の入門者にどう接したらいいか、分からないんだと思うよ。
初心者に教えるには、単に技術に詳しいのとは違う、別の能力が要るから。

↓のスレッドの方が、いいアドバイスがもらえるかもしれない。
Webサイト制作初心者用スレ Vol.87
http://pc5.2ch.net/test/read.cgi/hp/1080742469/l20

>>445

>>4の上から5個目はどう?
Academic HTML
ttp://www.tg.rim.or.jp/~hexane/ach/
ここはかなり解り易いと思うが

情報がかなり古く、HTML3.2の説明だが
ttp://www.zaidan.iris.or.jp/ihpc/index.html
初心者向けには古すぎの問題もあると思うが、HTMLの
「しくみ」の理解にはなるかもしれない。

すれ違いsage

>>451
>>430で既に誘導してるのにそれすら読まずに初心者を盾に駄文を綴って
いる屑になんでそこまで優しくしてやらなきゃならんのかわからん。
おまいさんは優しいな。
ただ、どっちにしろHTMLがマークアップ言語である以上、日本語すら読
めないようじゃどこ行っても同じだろうけど。

さて次の質問ﾄﾞｿﾞｰ

>>445
はじめてのWebドキュメントづくり
http://www.asahi-net.or.jp/~sd5a-ucd/www/index.html
あたりが初心者向けでかつまっとうなHTML入門と思うが、どうか。

>>441　の親切に感謝します。

>455
p.first-line { color:red } だけじゃなくて、
p.first-letter { color:red } も、同じ現象が出ますね。

これはバグだろうなあ。

いかん、訂正。
× p.first-line, p.first-letter
○ p:first-line, p:first-letter

いずれも IE6 です。

>>441>>456-457の方、真に申し訳ない…！
今、探していたら
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#pseudo-elements
にて既知のバグだったことがわかりました。
すいませんm(_ _;)mこれからはもっと幅を広げてチェックします。
終わりにですが、レスしてくれてありがとうございました。

バグかなと思ったら、バグ辞典。

Internet Explorer (Windows) CSSバグリスト
擬似要素名称の直後に空白類文字を置かないと擬似要素が認識されない(6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b055.html

　>>372の質問をした者ですが、
これで回答をいただけない場合にはあきらめようと思います。
　よろしくお願いします。
　そして、今までの返答ありがとうございました。

[2004-04-02] [機能追加] 「JUGEMではじめるスタイルシート講座」スタート

http://jugem.cc/?mode=SUPPORT&page=css
http://www.yasuhisa.com/could/entries/000457.php

>>460　？　何が訊きたいのやら。

>>462 えーと、
「HTMLで
<p><a href="http://nantoka">あいうえお</a></p>
とし。CSSにて
p{line-height:2;width:200px;}
と、line-heightを1より大きな値などにした後、
InternetExplorer6.0でブラウズしているとき、activeの状態、
というよりマウスでクリックしている状態にすると、
破線で囲われる範囲が本来の文字の縦幅よりも下に伸び、
はみ出てしまう。 」
というバグらしき現象の説明かなにかを載せているサイトはありませんか？
ということなんですが。

>>463
バグ辞典スレッドに書き込んできたら？
http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50

例に
p a:active {background:red;}
とか追記した方がわかりやすいかも。
それともWinIEの対応だと :focus かな。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#pseudo-classes

>461　それ、応用力がぜんぜん身につきそうにないね。
>463　とりあえず、ソースがないと検証のしようがないよ。

>>465　？ >>463にソースあるぢゃない。
＞<p><a href="http://nantoka">あいうえお</a></p>
＞とし。CSSにて
＞p{line-height:2;width:200px;}
＞と、line-heightを1より大きな値などにした後、

>>464
>それともWinIEの対応だと :focus かな。
読み間違えてないか？　WinIE は:focus疑似クラス
に対応してないけど、a:active {} と記述すると何故か
a:active, a:focus {} みたいに解釈されるってことでしょ。

>>461
豆字固定してる奴がえらそうにCSS教えるなよなあ。

>>468
漏れもそう思った。
>プロパティと呼ばれるレイアウトのどの部分の見た目を変えたいのか指定するコマンド
とかイタ過ぎ。
「見た目」「レイアウト」とかってヽ(´ー`)ﾉ
初心者には音声スタイルシートの存在は隠蔽かね。
「コマンド」って、CSS は命令なんてできねぇよ。

>>469
やけに上に空白があると思ったらflashのメニューか
css使い=ちゃんとアクセシビリティ考えてるって思ったんだがな

>>438
404なんだが

そして思いっきりリロードを忘れていたわけだが

（´Д｀；）…　質問の仕方が悪かったのかしらん

>>473
たぶんバグ。
li{ margin-bottom : -3em }
なんてふざけた事やったら丁度よくなったけど、他のUAで死ぬだろうな。

>>443
>imgはもともとblock要素ですし
いいえ。imgは置換インライン要素です。

>>443
>* { margin: 0; padding: 0; }
これ、一体何がやりたいんだ？
ul, li {margin:0; padding:0;} ではいかんのか。

そもそも、「リストアイテム間にマージンが生じてしまいます」っての、再現しないし。
だから>>474も意味不明。当方、IE6で確認。

>>476
再現する。お前の確認が糞。

>>443=>>473
img のvertical-alignの値がbaseline以外(bottomやtopやtext-bottomとか）なら、
大体（多分）意図通りに整形される様子。

わざとIEで崩れるページ作ってOperaマンセーしようとするカスが
居るよね。

>>477
煽らんでいいよ。本当に、再現しないものはしないんだから。
Netscape7.1とIE6.0とで同じ表示だった。Win98SEだ。
>>474の通りli{margin-bottom:-3em}としたら、リストが重なるだけで全然「丁度よく」なかったし。

img {background:red;}と指定して見たら、たしかに赤と赤の間に細い隙間が空くが、
もしかしてこれのこと言ってるの？
しかしこんなの>>443が「ちゃんとくっついて見える」と言ったOpera7.23でも空くしなあ。

>>478
……？
img {vertical-align:baseline;}としてIE6で見ても、何も変化ないよ？
ソースは>>443のを丸ごと貼り付けただけだから、差異は無いはず。

>>481
「baseline『以外』」と書いたのですが。

>>478　Mozillaではそれやってもおんなじ。

あと、>>474の「丁度よくなった」てのは結局何だったんだ？

>>476
＞>* { margin: 0; padding: 0; }
＞これ、一体何がやりたいんだ？
＞ul, li {margin:0; padding:0;} ではいかんのか。
確認のための全称セレクタだろうが。そのくらい気づけ。

下記のソースで試してみ。
WinIE6 だと画像の下に「4px」ぐらい隙間ができるから。
Opera 7.2 や Mozilla だと隙間は発生しないからさ。

<style type="text/css">
li {
margin: 0;
padding: 0;
border: solid 1px;
}
img { display: block; }
</style>

<ul>
<li><img src="foo.png" width="200" height="20" alt="foo"></li>
<li><img src="foo.png" width="200" height="20" alt="foo"></li>
<li><img src="foo.png" width="200" height="20" alt="foo"></li>
<li><img src="foo.png" width="200" height="20" alt="foo"></li>
</ul>

>474の「丁度よくなった」てのは結局何だったんだ？
WinIE6 で margin-top: -4px で「丁度よく」なると思うけどどうよ。

確認のためなら、この場合 li {margin:0; padding:0;} だけで済むな。

>>485
px指定だと、閲覧者側が文字サイズ変更するとずれる予感だ

>>486
元の>>443には
img { display: block; }
なんて無かったぞ。それは別件のバグでしょ（>>443も引いてるけど）。

結局>>480の使ってるIEは特別せいなんだろ

「>>486」は「>>485」の誤記。すまぬ。

>>489
たぶん>>474のが特別製かと。

>>485
>WinIE6 で margin-top: -4px で「丁度よく」なると思うけどどうよ。
でも>>474はli{ margin-bottom : -3em }だぜ？　指定も結果も全然ちがふ。

>>487
px単位はem単位ではないのだから、文字サイズ変更と関係なく一定ではないのか――少なくともWinIEでは。

>>493
俺はpx単位だと、文字サイズ最大で1px空くけど。WinIE6。

ああ、その意味か。>>494
margin-top: -4px は一定だけど、
IEバグ（#）で空く隙間は文字サイズによって一定でないからだね。

# http://cssbug.at.infoseek.co.jp/detail/winie/b071.html

-3emじゃなく、-0.25emなら-4pxと同等の効果が得られた。

ttp://ptba2.hp.infoseek.co.jp/cgi-bin/up/obj/obj2671_1.jpg

win IE6
CSSで段組レイアウトしています。全体のセンタリング以外は狙いどおり
表示されています。ここでセンタリングをしようと思いまして、

<body>
<div>でここにマージン左右をオートにしたid追加
「段組のタグ（センタリング以外は狙いどおり）」
</div>閉じます
</body>

こんな感じでやってみましたがセンタリングされません。
なにか足りないのでしょうか？
センタリングさえ出来れば完成なんですけど、アドバイスお願いします。

ソースを略さず書こうよ

>>498

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
などをHTMLソースの一番上に入れ、標準準拠モードにして、
スタイルシートを
div { margin:auto;
width:50%;}
p { text-align:center;}
などと指定すればできませんか？

間違っていればどなたか指摘をお願いします。

>>498

↑
>>499
て書こうと思ったんだけどね＾＾;

OK、つまりはCSSを使ったブロック要素のセンタリングだな？
>>1

誘導されました。
http://pc5.2ch.net/test/read.cgi/hp/1080742469/

どうしても、ほんの少しスペースを空けてから文字を書きたい時に、
＆ｎｂｓｐ；を使う以外に、CSSでのスペースの空け方がある、
という事を聞いたのでこっちで質問します。

<p>
要素　スペース　要素　スペース　要素
</p>
と言う風にやるには、どうすればいいのでしょうか。

FAQ(>>5)
ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

>>504
512 名前：Name_Not_Found ：04/04/06 11:32 ID:???
要素ならタグで括る、これ当り前。
要素でなくて要素内の文字列なら、括らない。
word-spacingとか とかでスペースを調整する。

おい　礼儀正しく書いてるんだから、きちんと答えてやれよ。

>>504
ここの連中はちょっとひねくれてるから根気よくな。
それから、自分でも調べような。

>>507　word-spacingプロパティーか&nbsp;でやれってのは答にならんの？

自分が駆け出しだった頃を思い出してみようぜ。

CSSスレの人たちはいい人ばかりでつね。
感動しますた。どうもありがとうございました。

すんません、CSSのON/OFFボタンの作り方って、どっかに解かりやすいのないですか？

>>512
WWWブラウザでも作るんか?

さすがに板違いだな

>>512
http://pc5.2ch.net/test/read.cgi/hp/991400015/l50

自分が駆け出しだったころは必死にネット這いずり回って勉強したもんだけどな

俺が昔駆け出しだったとき、弟は情報を小出しにしてた。
お母さんはかつおだしで味噌汁を作り、お父さんは中田氏で妹を作った。
わっかるかなぁ、わっかんないだろうなぁ、イェーイ。

>>517
松鶴家千とせがわからねえよ

>>518
知ってんじゃんｗ

>>512
昔このスレで拾ったもの
javascript:var i=0;if(document.styleSheets.length>0){cs=!document.styleSheets[0].disabled;for(i=0;i<document.styleSheets.length;i++) document.styleSheets[i].disabled=cs;};void(cs=true);

スタイルシートをオフにするボタンを作る方法
http://members.jcom.home.ne.jp/jintrick/Personal/d20022l.html#d17_35

<a href="javascript:function disableCSS(){ var styles=document.styleSheets; for(var i=0; i<styles.length; i++){ styles.item(i).disabled=true; }}disableCSS();">ボタン</a>

皆様ありがとうございました。
これはつまり、IEのバグという事でよろしいのでしょうか…？

>>478 の方法を採り、vertical-alignにtopを指定したところ、
IE6, Opera7, MozillaFirebird0.7 共に理想の表示になりましたので、
この方法でいきたいと思います。ありがとうございます。

全称セレクタ（*）についてですが、もともとのスタイルシート記述で
一番最初にこれを書く癖がついていまして、それをそのまま写した次第であります。
また、なるべく状況を再現しようとした、という意味もあります。
紛らわしい書き方をしてすいませんでした。

>>475 そうでした… orz

プルダウンがたのメニューの横の矢印の色を変えたいんですけど……

>>524
しつこい

実は本気です。ネットでやり方を探しているんですが載っていません。できないのでしょうか？

出来ない！！

いい加減この質問もテンプレに入れろ

ネットに載っていないというのは斬新な切り口だ。

なんで UI の体裁まで制御したがるかね。
認識しづらいスクロールバーの色変更とか、
意味もなくカーソル変更とか迷惑なんだよ。
ユーザビリティを知らない厨房が多すぎる。

おぬしゃぁ　音声ブラウザに対応させちょるか？

えっらそうに・・　　　と自分でsageでつっこんでおく。

>>531
いんや。そのうち。

>>531
そこまでできる知識も技術も気力もない

>>531
W3C仕様や WCAG に沿って素直に作っているんで、
自然と対応できてしまっていたりしますが。何か。

パチパチ・・・・

>>535
文句なし

ページが色で囲まれた感じになるスタイルシートを
忘れてしまったので、誰か知っている
人いたら教えてください。

意味不明。

ヤ〜ッホ〜〜　　次の方　お小水を先に取ってくださいね。

>>538
>>1

>>538
body { border: solid 1em #000000 ; }

>530　それも「デザイン」とやらのひとつだと考えているからでしょう。

スクロールバーの色をデフォルトで固定したいと思うものの、
デフォルトの設定が何なのかわからず・・・。
カーソルは
* {cursor: auto !important;}
でよいのですが。

で・・？

ユーザビリティは専用スレあるんでそっちで

はいよ。

div{width: 450px;}
span{position:absolute; bottom:15px;}で、

<div>
文章1
<span>文章2</span>
</div>

とすると、NN7で表示した時に文章2がdivで指定した横幅からはみ出てしまいます。（IEだとはみ出ないけど）
はみ出させないための方法がありましたら教えていただけると助かります。
（訳あってspanの幅指定はしたくないので、それ以外の方法で…）

どんな訳？

>>547
新規質問は上げて。

position:absolute;の意味はわかってますか。
通常フローを無視するんですよ。
何のために絶対配置してるんですか。

>>547
横槍余談ですが、spanのようなインライン要素はwidthプロパティは指定できないです。
IEでできてしまうのは、バグです。

>>548
別の場所にも多量にspan使用してるので、ここで幅指定してしまったら
色々と直さなきゃいけなくなるのがめんどくさかっただけです、すいません…

>>549
わかってませんでした…。

ええと、divのほうにposition:relative追加すればいいのでしょうか？

>>550
うわそうなんですか、知りませんでした。もっとしっかり勉強します。

>>543
システムカラーを!importantで設定する
設定する箇所がやたら多いがまぁ面倒くさがらずやっとけ

scrollbar-3dlight-color: ThreeDHighlight !important;
scrollbar-arrow-color: ButtonText !important;
scrollbar-base-color: Scrollbar !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-face-color: ThreeDFace !important;
scrollbar-highlight-color: ButtonHighlight !important;
scrollbar-shadow-color: ThreeDShadow !important;
どっかで見てそのままｺﾋﾟﾍﾟしてたんだが、これで合ってんの?
あと scrollbar-track-color が分からん。
たしか Scrollbar になっていて、明らかに違和感があったので消した気がする。

すみません。Jane のログ漁ってたら、こんなのを見つけました。
/* CSS、スタイルシート質問スレッド【11】 */
http://pc5.2ch.net/test/read.cgi/hp/1031773943/410
全部 transparent でいいみたいです。

http://goldnet.ii2.cc/~akt/tenp.html
UPしてみたのですが。。「文字に影をつけています（影の透過あり）」の
下の行とその二つ下の行に改行が入ってしまいます。
入らないようにするにはどうしたらいいでしょうか。
あと他にも明らかにおかしな点があればお願いします。
CSSかHTML、どちらが原因かわからないのでこちらに書かせてもらいました。
宜しくお願いします。

むしろ正しい所を探した方が早いな

>>550
position: absolute を設定すると、強制的に display: block; に設定されるはずので
widthを指定しても問題なし

ソース見たけど・・・・
改行がどうのというより、根本的に理解出来ていないような気がします。
　　どこで習ったの？

>>551
>別の場所にも多量にspan使用してるので、ここで幅指定してしまったら
>色々と直さなきゃいけなくなる

classやIDで絞り込み指定できるのを知らないのかな？

>>556
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

http://goldnet.ii2.cc/~akt/tenp.html を HTML4.0 Transitional としてチェックしました。
18個のエラーがありました。このHTMLは -33点です。タグが 20種類 24組使われています。

>>556
ブロックレベル要素とインライン要素
http://www.mozilla.gr.jp/standards/webtips0015.html
「CSSを勉強し始めた人はまずこの概念を覚えなくてはいけません。」

スクロールバー変えたらなんでいけないの？
デザインのうちじゃん。
カーソル変えるのはさすがにウザいけど。
なんのひねりもないただのページよりよっぽどいいや。

そんなとこばかりひねってもな……。

>>563
お前が思ってる以上にスクロールバーの色変えるのダサいよ。

おいらテーマごとにページの色調変えて、
スクロールバーもそれに合わせて変えてる・・・ orz

スクロールバーとステータスバーはいじって欲しくない２大要素だな。

あとブラウザサイズ。
勝手に最大化すんな。
揺らすな。

>>565
あなた自分のサイト持ってますか？
よっぽどデザインもセンス抜群なんでしょうねぇ。

スクロール・バーをセンス良く配色したページって滅多に無いね。
挙句の果ては、見にくかったりつかみづらかったり。

>>568
うん　抜群だよ。
中身が無くてスクロールバーとステータスバーをいじっているのは
自己満足が多いな。

>>570のサイトは中身がないがセンス抜群ということで


そろそろ次の質問どぞー

質問しにくいな。

なんで知ってんだ？

君たち。

<body bgcolor="white">
<table width="100%" height="100%" border="1" bordercolor="black"><tr align="center"><td>
<font size="3"><b>ぼくのぺえじ<br>いりぐち</b><br><br><br>
<a href="index.html">えんたあ</a></font>
</td></tr></table>
</body>

をCSSで実現するのはどうすればいいの？
つまり「えんたあ」を画面のサイズに関わらず真中に置きたいわけだけど。
CSSだとテーブル使っちゃいけないんだべ？え？いいんですか？

>>574
>>8

>>574
君。
なんでFAQを見ないで質問するの？　>>8に書いてあるわけだけど。

>>574
table要素にはheightなんて属性は無いしな。
http://www.ne.jp/asahi/minazuki/bakera/html/reference/table#table

>>574
というか今時スプラッシュページはかなりダサイ。
下らない体裁を考える前に、内容を充実させろよ。

多分　宿題じゃない？

>>574
表ならばtableでよい。
線形化してあれば、レイアウトにも可。推奨はしないが。

すんませんでした。
後から気付いたけど後の祭り…。

>>578
人のサイトに文句つける権利はお前にはない。

何言ってるんだこいつは・・・

ダサいとは思うけど、ダサいかどうかを判定するスレじゃないだろここは。

ダサイというか無駄。邪魔

お約束

　　お前モナー

何でも邪魔邪魔いう奴のサイトが見てみたい。

何でもじゃないよ、邪魔なものだけしか邪魔って言わないよ

>>1の１行目を10回嫁
で、質問スレで議論にもなっていない雑談でスレを浪費する
おまえらのレス自体が邪魔だと言うことに気づけ

そういうのが１番邪魔。

まあまあ・・
助さん格さん納めてきなさい。　ハハー

リンクをボーダーで囲みたいのですが、

A:link{ font-size: 14px; border-width: 4px; border-style: outset;
border-color: black; padding-left: 12px; padding-right: 12px;
text-decoration: none; color: white;
}

と書いてもボーダーがでません。
対象ブラウザはIE4以上ですよね？IE5でテストしています。

すみません、よろしければ教えてください。

visitedとか確認した？

div

>>593
レスありがとうございます。
A:visitedもA:linkと全く同じにしています。
それが問題なのでしょうか？

非置換インライン要素のボーダーは5.5以上

>>594
レスありがとうございます。
divですか？
<a href="#">ENTRANCE</a>じゃだめなんですか？

>>596
レスありがとうございます。
そうなんですか？
すみません、勉強不足でした。

593、594、596
ありがとうございました。

スタイルシートON/OFFで質問した者です。遅レス申し訳ないです。
スタイルシートの切り替えなんて根気ないし、だったらON/OFF付けてみようかな？ってカンジでした。
意味は？と聞かれるとつらいですが

そぉー　つらいこと　お姉さんに話してごらん。

質問です。CSSファイルにスクロールバーカラーを書いているのですが、反映されません。
しかし、HTMLファイルの２行目にある"h**p://www.w3.org/TR/html4/loose.dtd">を消すと反映されるのです。
"h**p://www.w3.org/TR/html4/loose.dtd">は検索エンジン対策で重要と聞き、なるべく消したくないのですが…。
どなたか解決策知っていたら教えていただきたいです。

モードの違いをお勉強しましょう。

>>601
文書型　DOCTYPE　宣言

あと>>602のキーワード

>>603

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
これではだめなんですか？

>>604
かまわんよ。

602 603を使って検索してごらん。

　モードの勉強すれば理由がわかるよ。　つーか調べてから出直してこい！！！

>>605

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

でわ何が悪くてスクロールバーカラーが反映されないのでしょうか？
ちなみにCSSには

body {

scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;

}
こう書いてます。

>>607
>>606嫁
手っ取り早く言うと"http://www.w3.org/TR/html4/loose.dtd"があるのと無いのとでは
IEの挙動が変わる。無いのが糞モードで、あるのが正しいモード。
つまりスクロールバーの色を変えるってのは、糞ってこと。
糞を承知で変えるなら何も言わん。

>>601
本来なら >>1読め　で終わるところを検索のヒントまでだした602と603は
おまいの事を妙齢な美女と思っているに違いない。

>>609
見抜かれたかorz
昼飯の準備終わった主婦だろうがな。

>>601
html, body { /* 宣言 */ } と設定する。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp

(´ι _` 　)

もっと釣ってくれ(；´Д｀)ﾊｧﾊｧ

メル欄会話なんかで質問スレのレスを消費しないで欲しい

↓再開

>>611　そりゃ〜601には無理だわ。

CSSでルビを表示する事はできませんか？

内容がないときにそのボックスをdisplay:noneと同じように扱わせるような指定があったと覚えろげに記憶してるのですが、
どんな命令でしたでしょうか・・・。

>>617　http://www.akatsukinishisu.net/itazuragaki/id/ruby_style_in_opera_20031226
>>618　visibilityのことか？

まて、覚えろげって何だ？
つか、野次を飛ばす訳じゃないんだが
何をﾐｽﾀｲﾌﾟして「覚えろげ」になったんだ？

>>620
普通に考えて
「おぼろげ」→「おぼえろげ」
だろ。

Ｒの隣にＥがあるからそう鬼の首を取ったようにはしゃがれてもな。
しかも１０時間越しか。
そんな餌に俺様がク（ｒ

まあ　あれだ 618 の頭にエロゲーがこびりついていて
思わず書いてしまったというのが真相のようだ。

おぼろげ→朧気

どう考えても「覚えろげ」を変換して朧気にはならないだろ。

>>623
>>621

ものわかえりのわえるいやつめ。>>623

やっばり >>622 じゃね？

なんの得にもならない自分のレスの正当化に
貴重な週末のひとときを費やせる>>620が羨ましい

IE3はlinkタグ2つ以上書けば最後のlinkタグだけ読みに行くってあるじゃないっすか、
1つ目に普通のrel="stylesheet"のlinkタグ
2つ目に代替のrel="alternate stylesheet"のlinkタグ
にしたらIE3はどういう挙動をするのでしょうか？
2つ目を読むのか、代替未対応なので1つ目を読むのか、2つ目を読もうとして失敗するのか？
もしくはIE3がDLできるとこ知りませんでしょうか？

http://pc5.2ch.net/test/read.cgi/hp/1081487905/98

>>629
ありがとうございます。IE3 DLできました。
自己レス：2つ目を読もうとして失敗したみたいですた。

スタイルシートを学校で習わされたが結局忘れてしまった。
何かと便利だった気がしたなあ

>>631
ageてるから釣りか？

まあHP作っている人にはCSSは必要だから
今後HPを作るときに今まで勉強してきたことが
役に立つと思うよ。

HPダサイ。

ホムペ　ホムパゲ　マルハゲ

ホムペ(・∀・)ｲｲ!!

>>635
？

マルハゲ　呼んだ？

xsltでRSS(mine-typeはapplication/xml)を変換すると
変換先のCSSのbackground-imageがMozillaのみ効かないのですけど
これはバグなんでしょうか?
ちなみに規則性はわかりませんが、効く場合と効かない場合があるようです。

変換後のHTML（or XML）は間違ってないか。CSSは間違ってないか。チェッカで確認汁

あと mine-type じゃない

パスの問題かもね。

>>639
HTMLは問題ないです。
CSSは基本的にはvalidですがmozilla独自拡張が混ざってます。
やはり問題になってくるでしょうか?

>>640
絶対パスで指定しているので問題ないと思います。

携帯ってCSSに対応してないのでしょうか？
<center>とか<font>といったタグを使わないといけないのでしょうか？

試してみればいい

>>643
自分の持ってる携帯（ドコモムーバ、iモード）ではCSS書いても反映されないんですけど、
携帯は一般的にそうなのかな〜と思い質問させてもらいました。

>>644
各キャリアの技術資料みればいいじゃん。
vodafoneはW型端末ならXHTML+CSSに対応してる。
他はしらね。

>>645
あっ、そうなんだ。
レス、サンクス。

でもCSSに対応してない機種があるから、結局、非推奨タグを使わないと
いけないっていうことか。

>>646
そもそも非推奨とか云々以前に一応DTDらしきものもあるぞ。
vodafoneの全機種用HTML1.20もきちんと仕様が定められてるし、
同じくW型用XHTMLはXHTML Basicだったはず。
単純に携帯キャリアとPCのHTMLを比較して非推奨云々とは言えない
と思われ。

>>644
auの比較的新しい機種(型番が1100以上の機種)は
ある程度CSSを解釈できるよ。

ただ、この辺はエミュレータを使って実際に見てみたほうが早いかもな。

>>647
>>648
分かりました。
サンクスです。

>646
> でもCSSに対応してない機種があるから、結局、非推奨タグを使わないと
> いけないっていうことか。
　それ以前に、<center>とか<font>といったタグを使う必要がない。
真ん中にしなくていいし、色変えなくていい。

良く考えたら、携帯の広告スレは乱立してるのに
以外にも携帯サイト制作の質問スレは無いんだな。

通りでこういうスレに携帯系の質問がたまる訳だ。

>>651
といって、DTDごとにスレ立てるのもなぁ。
まあどっちみちこのスレの役目ではないけど。

携帯端末用Web制作2
http://pc5.2ch.net/test/read.cgi/hp/1068355992/
これじゃねーの？
いい加減すれ違い。

>>653
本当にそれかな？
なんか質問スレのような空気が漂ってない。

>>646
タグ増やすとパケットも増える罠。

XSLTつかってケータイ向けにはloose.dtdで。
つーかパケ代も気にする時代じゃなくなってきているな

パケ代というよりも、むしろ転送量。軽い方がいい

自己レス。skyzyx.comのIE3はcssできない仕様でした。
そんでﾘｻｲｸﾙｼｮｯﾌﾟのｺﾞﾐCDROM売場でIE3を100円でｹﾞﾄ。
正解は代替未対応なので1つ目を読むという動きでした。
それにしてもIE3ってEUCｺｰﾄﾞ自動判別できないのね。
yahoo・goo行っても文字化けでした。

で、何故IE3の挙動の理解が必要だったの？

http://www.katch.ne.jp/~aok/

このサイトの右上にあるフォームとボタンデザインをそろえるのって
どうやったらいいんでしょう？

widthで区切って、borderでフォームとボタンデザイン統一して、
ってのはわかるんですが、（border: 1px solid #999999;とか

幅がうまくそろわないんです。
（ボタンがちっさくなってしまう。

ご回答よろしくですます。

>660　positionを使っているもよう。CSSを直接見ればわかる。

どうでもいいことだが、あれはボタンに見えないな。

>>660-661
頑張れ

form input {
display: block;
width: 10em;
}

<form>
<input type="text" value="text">
<input type="submit" value="submit">
</form>

各OS(win mac)、
各ブラウザ(IE NN OPERA Safari)、
各version

のfont size line-height letter-spacingの違いをまとめてるサイトってないの？
あったら　おせーて（；´д｀）またはそれに関連するサイト

CSSによる振り分けをたくらんでるですが、
各環境をどのように振り分けたらよいかわからなくて。

CSSによる振り分けのスクリプトを知りたいんじゃなくて、
どの環境でもならべく同じ「見た目」を保つための「値」を知りたいんです。

どの環境でも同じ見た目を保とうと考えるのはやめた方がﾖﾛｼ
無理だから。

>>663
cssバグ辞典

これじゃ、ちょっと調べないとだめかな

すいません、質問を変えます。

企業サイトをつくってるコーダーさんは、
どのプロパティーをどの程度まで調整しているんでしょうか？

>>666
雑談すれじゃねえですよ

>>666
必要とあらば、なんだって調整しますよ。
逆に不要ならば、触れませんが。

px指定だろ
だせーけどｗ

>>669
おうよ、仕事だからね。
アクセシビリチ <<< 見た目　なモノだし、企業サイトは。

漏れもよく px やめれ、って書いたりするけど、
IE の px で指定されたフォントの大きさを変更できないバグが
直っちゃったら、どうしよう。

IE以外のブラウザがもっとがんばってくれれば
アクセシビリチ >>> (IEの)見た目
になるかな？なるといいな。

>IE の px で指定されたフォントの大きさを変更できないバグが直っちゃったら、どうしよう。
ユーザー補助とか、ユーザースタイルシートなんて眼中にないってことか。
未だにウェブの特性を知らない糞企業ばかりだから反吐が出る。
クライアントが無知で馬鹿だから、ウェブデザイナーの仕事も一向に進化しない。

だから雑談スレじゃねぇつったのにな・・・

>>672
　　んだ。

雑談スレじゃねぇけど・・・

テーブルの1セルの中に、１つづつ写真をいれて、
手抜き段組レイアウトをしました。

この写真を、セルの左上にぴったり合わせようと、
<td style="padding-top:0px; padding-left:0px;"><img・・・・></td>
としましたが、
左端にはぴったりつくのに、上下は真ん中にとどまったままです。

なんでだろう…。

>>675
line-height: 1.0; とかか？

>>675
vertical-align: top; かと。

>675　CSSは「継承」する。
親の要素に指定されたpaddingなどが影響していないとも限らない。
関係のありそうなソースを晒したほうがよろしいかと思う。

またぴったり厨か

>>678
CSSという仕様が「継承」するということか(w
CSSのプロパティは継承性を持つものがあるけど、
持たないものもある。padding は継承しない。

基本的知識のない人は、質問も、回答もしないで。

紙メディアでもスクリーンでも、
高さ関連もうちっと強くなってほしいなあ、CSSは。

なんで？

紙ならpdf、スクリーンならFlash使えばいいんじゃねーの
それぞれの特性を理解すべし

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

>>676
書いてみたのですが変わりませんでした。

>>677
ありがとうございます。うまくいきました。

ただ、上に寄せるだけであれば>>677さんの方法でも大丈夫なのですが、
同じものを右上に寄せたい場合、padding-right:0px;がやはり効かないため、
できません。
根本的な問題は同じなのだろうと思ったので…。

上で質問した部分とCSSを取り出したファイルを作ったところ、
問題が再現されましたので、そのソースをうpします。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テスト</title>
<style type="text/css">
<!--
body{margin-top:0px; margin-left:0px;}
table, tr, td{border-width:1px; border-style:solid;}
td{width:300px; height:200px; padding-left:0px; padding-top:0px;}
-->
</style>
</head>
<body>
<table>
<tr>
<td><img src="getreader.gif"></td>
</tr>
</table>
</body>
</html>

よろしくお願いします。

>>675
画像をセルの右上にくっつけるんだったら
td
{
padding: 0;
vertical-align: top;
text-align: right;
}

だべ。

body{****
body {**** するよろし　他の全部
　　と当てずっぽうで書いてみる。

ただの思い上がりだったということか。
初心に帰ってやり直すことにするよ。

で、>>675はどうなった？

>>686
できました！　どうもありがとうございます。
ところで、text-alignって画像に使ってもいいんですか？

>>678
変化なしでした…。
折角答えてもらったのにごめんなさい。


というわけで、
vertical-alignとtext-alignを使うことにします。
ありがとう。

それにしても、私のpaddingの使い方って間違ってるんでしょうか。
使い方がおかしいのか、何かミスがあるのか、仕様なのか…。

cssがどうたら抜きで htmlだけでtable組む場合を思い浮かべてみたらどやさ。

<table cellpadding="0">
<tr>
<td valign="top" align="right"><img src="〜"></td>
</tr>
</table>

の、cellpaddingがこのばやい cssの td { padding: xx; } に相当するわけだから…
まあ、あとは自分で考えれ。

いちおうこのスレ的には、そういうtableの使い方自体が間違いです、
という話になると思われ。

OS　WinXP　ブラウザ　IE6.0　です。

外部スタイルシートを読み込んで文字サイズ・文字色などを
指定しております。
テーブル内の文字はそのスタイルを読み込めないのでしょうか？

テーブルの１行目は適用されるのに、２行目以降は適用されない
現象がおきております。

よろしくお願いいたします。

>テーブル内の文字はそのスタイルを読み込めないのでしょうか？
そんなことはない。何かヘンなことやってるね？
でも、ソース出してくれないとわかりませんよ。>>692

http://headlines.yahoo.co.jp/hl?a=20040413-00000001-imp-sci

693さん、ご返答ありがとうございます。
やはりヘンタイなことをしていたようです。
本当に基礎的な間違いでお恥ずかしいのですが、
２行目の文字を<p></p>で囲っていませんでした。

ヘンな質問してごめんなさい。

694さん、参考になりました。早速使ってみようと思います。

<!--
body,tr,td,th { font-size:13px; font-family:"MS UI Gothic, Osaka, ＭＳ Ｐゴシック"; }
a:hover { text-decoration:underline; color:#DD0000; }
.num { font-family:Verdana,Helvetica,Arial; }
.obi { background-color:#004080; color:#ffffff; }
-->
</head>
ってやつはネスケ4.Xでも対応しよるんですかね
ネスケ4.x無視して使うか、bodyで<font size=..>使うか迷ってるんですけど
どっちが良いですかね

>>696
ネスケ4.xはmedia="all"でcss無効にしる。

>697
レスありがとうございます
無効にしちゃったらネスケで見たとき文字サイズ指定できてないんですよね？

>>698
指定できないけど、変にCSSを適用されるよりマシと思う。
てか、俺もその辺りで迷ってるorz

>699
言われてみればそうかもしれない…
今は<font size>で指定してるんですが、一括でやったほうが楽だし
迷いますよね
もうちょっと迷ってみます(;´Д`)

っていうか，下記の記事読んでみて。
http://su.que.jp/slazsi/web/netscape4.html

>>701
（･∀･）!!

>>696
Netscape Navigator 4.x CSSバグリスト
フォント名に2バイト文字が含まれるフォントを指定するとスタイルが無効になる
http://cssbug.at.infoseek.co.jp/detail/nn4x/b001.html

うわー、ありがとう！>701 >703
これは参考になります。どうもありがとう〜

>>704
あのな、>>703が挙げたバグ辞典は>>2-10に掲げてあるのよ。
何で質問する前に見ておかないんだ？

ゆえに！

我思う、故に我あり

最近枯れたよ。

>>696
>body,tr,td,th { font-size:13px; font-family:"MS UI Gothic, Osaka, ＭＳ Ｐゴシック"; }
なんか根本的なモノが抜けているんだが

禿げてるよ。""

ここみれ
　ttp://hp.vector.co.jp/authors/VA022006/css/fonts.html#font

掲示板について質問良いでしょうか。
元祖質問スレで書いたのですが、
廃スレといわれましたのでこちらで伺えればと思いまして。
もし板＆ｽﾚ違いでしたら誘導お願いします。


作ったものは↓です。
ttp://box.elsia.net/~inauta/cgi-bin/bbsnote.cgi

cgiは　ttp://www.mytools.net/cgitools/note4.html　から借りました。


掲示板のテスト書き込みにあるように一行あけると<P>タグが入ってしまって
罫線がずれてしまいます。

今はテーブルの背景に罫線画像を入れて、フォントサイズと行間をcssで指定しています。
cssの指定をどうにかしてうまく表示できるでしょうか？
ネスケでの表示崩れに関しては目をつぶる方向で考えています。

>>712
<p>が入らないようにすればいいだろ。
それに背景画像と前景の文字を位置合わせするなんてバカバカしい。
罫線自体をCSSで表示させればいいじゃないか。

>>712

うちの環境じゃ

>普通の書き込みだとおっけーです。
>ちゃんと罫線通りいけます。

のところとか、取消し線が入ってるみたいにど真ん中に線入ってますが何か?

>>712
基本的には>>713にﾄﾞｳｲ。
あえて今の方向で行くなら、<P>のmargin-topとmargin-bottom、
padding-topとpadding-bottomを0にして行間の調整をやり直してみたらどうかな？

>>712
話は変わるが上部の投稿フォームの記事部分の罫線は
なんか野暮ったい。

P { margin: 0; }　を追加して表示確認しました
OSはWindows2000SP4

IE6 SP1：OK
NN7.1：最初の「2004/04/16 04:41」からずれる
Opera7.23：NN7.1と同様
NC4.78：罫線がなくてすっきり表示。ただし本文入力欄が表示されない

さらに
BODY,TD, { font-size : 11pt ; line-height : 12pt ; }　を
BODY { font-size : 11pt ; line-height : 12pt ; } TD { font-size : 14px ; line-height : 16px ; }　に
変更したら、IE、NN、Operaでうまく表示できました

ただし、基本的に>713に強く同意

TD { font-size : 14px ; line-height : 16px ; }　
これじゃー　すんげー読みにくくねーか？

>>718
人それぞれ

まあ、読んでもらいたくなけりゃ釜ワンけど差。

そうだね、中にはそれが読みやすいんだと言い張る人も居るかも知れないからそれでオッケー

なぜ、「文字固定すな　アホ」ってのが出てこないのか不思議だ。

番号無しリストで、リストのドットと文字列の間を
CSSで調節できたりしませんでしょうか。
WinXP IE6 です。

<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
</ul>

とすると、普通は

・　あいうえお
・　かきくけこ

となるわけですが、

・あいうえお
・かきくけこ

このくらいに調整できないものかなぁと。
宜しくお願いいたします。

>>723
text-indent:

>>724
レスどうもです。
text-indent: も試したんですが、変わらないんです。
・　あいうえお
が
　・　あいうえお
のように、ドットの左のインデントが変わるだけで

>>725
IEではそうなるな。俺Mozillaだったわ。

margin-left

>>723 padding

三人寄れば文殊の知恵みたいだね

船頭多くして舟 山に登る　>>729

>>727,728
レスどうもです。
マーカー（ドット）は<li>のボックス領域に含まれず、
ボーダーの外側にあるため、これも変わらないようです・・・。

marker-offset なる属性が存在するようですが
対応しているブラウザがないため（？）意味無し・・・

マーカーと文字列の間隔を調整するのはやはり無理なんでしょうかね

>>730
山にも登れす沈みかけてます・・・

>>731
liではなくulのmarginやpaddingを調節しなさい。たぶん0.5em位で。
ブラウザのデフォルトスタイルシート
http://is.vis.ne.jp/notes/browser/default_style.xhtml
「/* * Internet Explorer 5〜6, * Opera 7 */ ol, ul { margin-left: 40px; }」
「/* * Internet Explorer for Mac 5 */ ol, ul { margin-left: 2.5em; }」
「/* * Mozilla 1.5, * Netscape 6〜7, * Safari 1, * OmniWeb 4.5 */ ol, ul { padding-left: 40px; }」
「/* * Opera 6 */ ol, ul { margin-left: 40px; } li { margin: 5px 0; }」

>>731
margin-leftのマイナス値は試しましたか？　

3カラム段組で、ウィンドウサイズ小さめでは
あえて横スクロールバーが出るようにしたいのですがどのように組めばいいでしょうか？
IEではちゃんと見えてもネスケやオペラでは落ちてしまいます。

>>734
ＦＡＱは読んだの？　>>6-7
たぶん、floatを誤解してるね。

ネスケやオペラでは落ちるってのはひどいな。CSSとHTMLのソース出してくれない？

>>732,733
レスどうもです。
はい、ulでも試しております。

margin, padding, margin-leftは、マーカー外側のスペースを調整することになるので
結局、マーカーと文字列の間は変わらないんです。
マイナスにするとマーカーは消えます。
ul で margin-left: 0.8em とやってみると、丸いマーカーの左がかけたような
リストになります。マーカーと文字列の間は変わりません・・・。

>マイナスにするとマーカーは消えます。

指定値が大きすぎただけでは？　値を変更して微調整しなさい。

>>737
本来なら自分でもわかってる通りmarker-offsetを弄るべきだが、現状は無理。
つことでIE無視するんだったら
li:before {
　content:'・';
　margin-right:0;
}
みたくすればいいんじゃね？

>>735
半年ぶりくらいにCSSいじったのでたぶん誤解してます。ワケわかってないです。
テンプレに目通してコレなので情けない＿|￣|○
>>736<head><style type="text/css">
<!--
body { background: #999999; }
h1 { background: #cccccc; }
.all { width: 990px; }
.aaa { float: left; }
.left { background: #ffffff; width: 200px; float:left; }
.center { background: #cccccc;
width: 500px;
float:left; }
.right { background: #666666; width: 280px; }
-->
</style></head>
<div class="all">
<h1>3カラムのテスト</h1>
<span class="aaa">
<div class="left">ひだり</div>
<div class="center">まんなか</div>
</span>
<div class="right">みぎ</div>

>>738
いや、調整もしてますよｗ

私のため仕方が間違ってるのかもしれません。
よろしければ、うまく調整できてるソースを書いて頂けませんでしょうか。

>>723
マーカー無しで、・あいうえおってかけばいいじゃん。
それがやなら、マンドクセーから　・を画像にしちゃえや。
でマーカー無し。そうすれば、お好みに出来るよ。

　　　　　　　　　　　　　　　　　　　　つっこまねーでくれー　エ〜ン

>>723
list-style-position:inside;

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

>>739
marker-offsetを使うならそれでいけそうですね。
でもIE無視ってｗ

>>742
幅150pxほどのところでリストを書いていまして、項目によっては
2行に折り返されるので、字下げをしたいのです・・・

>>743
字下げをしたいので、outsideでいきたいです。

>>740
根本的に、HTMLから全く間違ってます。ＦＡＱの注意も無視してますね。

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
上記でチェックし、修正・再提出して下さい。

参考：
ブロックレベル要素とインライン要素
http://www.mozilla.gr.jp/standards/webtips0015.html

最後になって字下げかい。

>>723
li の背景画像にマーカーいれといて
padding-leftでテキストの位置調整ってのはどうだろう?

>>744
>幅150pxほどのところでリストを書いていまして、項目によっては
>2行に折り返されるので、字下げをしたいのです・・・

text-indent:-1emで最初の一行だけ左に飛び出る。字下げと同じ効果の筈。
当該ブロックにはmargin-leftを1em以上指定しておくこと。

>>745
うわぁぁぁホントだ・・・＿|￣|○ｱﾘｶﾞﾄｺﾞｻﾞｲﾏｽ
帰宅後に書き直してまた来ます。

>>723
ul, ol { padding-left: 0em; }
li {
margin-left: 0.5em;
padding-left: 1em; /* ←マーカーとの距離を適宜調整 */
background-image: url(marker.gif);
background-repeat: no-repeat;
list-style-type: none;
}

数字は適当だけど、これでうまくいくんじゃないかとおもふ。

テーブルの背景色をhtmlとスタイルシートで同時に指定すると
たぶんスタイルシートが優先されると思うけど、
ブラウザによっても違うんでしょうか？

>>723
違和感のある方法だけど、

ソースを
<ul>
<li><p>あいうえお</p></li>
<li><p>かきくけこ</p></li>
</ul>
と変更して、

<p>にpadding-leftだとそれらしくなる

>>750
おー、なるほど。
マーカーを消してしまってバックの画像で。
荒技ですが確かに。

ちょっと試してみましたが、いけそうです！ありがとうございます！
レスを下さった皆様本当にありがとうございます。
また困ったら来まーす。

>>752
って書き込もうとしたらレスが。
ありがとうございます。そちらも試してみます

>>751
仕様書で、CSSを優先することになってる。
そもそも、スタイルシートを使用するならHTMLの指定は要らない。

>>754
どうもブラウザによって違うというイメージがあるので
不安になっていたのでした。ありがとうございました。

すみませんが、質問です。
http://blog.livedoor.jp/jigokuhen00/archives/169129.html

一部で有名なこのページの内容を、普通の HTML + CSS で再現しようとしたのですが、
Mozilla 1.7b では意図どおり表示されるのですが、IE6 では大きく崩れてしまいます。
また、IE6 だと、一度ウィンドウを隠してから再表示すると、表示の一部が欠けます。

どのように修正すれば、IE6、Mozilla が同じ表示になるでしょうか？

以下、>>757-758 にコードを貼り付けます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='ja'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test50</title>
<style type="text/css">
<!--
blockquote {
border: 2px solid black;
margin-top: 3em;
padding:0em 1em;
}
blockquote h1 {
margin-top:-0.7em;
margin-bottom:0.5em;
padding-left:1em;
font-size:2em;
}
blockquote p {
margin:1em 0em;
}
blockquote h1 span {
border: 1px dashed black;
background-color:white;
padding:0em 0.5em;
}
-->
</style>
</head>

<body>

<blockquote>
<h1><span>タイトル</span></h1>
<p>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>
</blockquote>

<blockquote>
<h1><span>タイトル</span></h1>
<p>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>
</blockquote>

</body>
</html>

>>756-758
興味深いので、こちらに報告して下さい。

CSS/DHTMLバグ辞典スレッド 第４版
http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50

>>757　positionでやれば？

blockquote h1 {
margin:0 0 0 1em;
position:relative; top:-0.7em;
font-size:2em;
display:inline;
border: 1px dashed black;
background-color:white;
padding:0em 0.5em;
}

>>756-758
マージンに負数が指定された要素でボーダーがずれてゆく(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b039.html

>>760-761
ありがとうございます。見事に表示されました。

すみませんが、また分からないことができました。
<blockquote>要素の直下に、display:inline によってインライン要素化した<h1>要素を
入れることは許されるのでしょうか？

デフォルトの設定がブロック要素ならば問題ないのでしょうか？

>>762
問題ない。考へてもみたまへ。
問題があったらdisplay:inline;もdisplay:block;も使用できなくなるでせうに。

>>763
すみませんが、まだ分かりません。
たとえば、以下のサンプルでは、body 直下にブロック要素は一つも
存在しなくなるのだと思っていました。
正確には、インライン要素となった<p>要素を包含する匿名ブロックだけが
１つ存在すると。
つまり、4.01 strict では許されない構文かと思っていました。
正しくは、どうなのでしょうか？

<head>
<style type='text/css>
p { display:inline; }
</style>
</head>

<body>
<p>
本文1
</p>
<p>
本文2
</p>
</body>

>>762
CSSによって、(x)htmlの「要素（の性質）」は変わりません。
どのように表示するかを決めるのがスタイルシートなので、文法に影響が生じるわけが無い。
ただ、変なスタイルだったら見辛くなるということはもちろんありうる。

>>764
display:inline;
は「インライン要素のように表示する」ということであって、
「インライン要素になる」のでは無いです。

>>765-766
なるほど、逆に言えば、
h1 div { display:inline }
---------
<h1><div>この div はインライン要素だからOK？</div><h1>

こういう書き方こそ NG なのですね。

html の要素の包含関係の規定は、各要素のデフォルトの性質についてのみの
規定であって、それが実際にどのように表示されるかということを縛るものでは
ないということでしょうか。

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

あと、まとまりのない質問ですみませんが、
慣れないせいか、こういう目的には position:relative は
あまり使い勝手が良くないように感じます。

blockquote h1 { margin-top:-0.7em } だったら、移動量(0.7em)が増減しても
後続の要素は自動的に追従しますが、

blockquote h1 { position:relative; top:-0.7em; }だと、
移動量を変化させると後続する要素とのマージンをあわせて調整しなければ
なりません。しかもこのとき、マージンに負の値を指定すると、また
IE では表示が崩れてしまいます。

そういうものだと思って使うしかないのでしょうか？
それとも、なにかうまい定石があるのでしょうか？

NETにはその手の情報はゴロゴロ有るよ。
自分でググる習慣を付けましょう。
　　　　　　　　　　　　　　　　　　と初心者が書いてみる

0から書き直したらなんだか出来たみたいです。
ソース貼りますので間違ってたら叱ってください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body { background: #666666; }
#left { background: #ffffff; float: left; width: 200px; }
#center { background: #999999; float: left; width: 550px; }
#right { background: #cccccc; float: left; width: 200px; }
#all { width: 960px; }
-->
</style>
<title>3カラムテスト</title>
</head>
<body>
　<div id="all">
<h1>3カラムのテスト</h1>
<div id="left">ひだり</div>
<div id="center">まんなか</div>
<div id="right">みぎ</div>
　</div>
</body></html>

>>734
width全部合わせて950px 横バー出るよ。

>>770
ピクセル指定はこのスレでは大抵叩かれるので注意。

まぁ1024x768でブラウザを最大化してる閲覧者しか相手にしないんならいいんだけど。

>>771
ありがとうございます。
ﾈｽｹ･ｵﾍﾟﾗ･FireFoxでも落ちなかったのでこれで合ってるのかな？

>>772
左の二段(?)がメインなので一番右の段はあえて800*600等では画面外に押しやってます。
あまり重要じゃないもの（自分用リンク集とか）を置くので。
ttp://slashgames.rbbtoday.com/
このサイトの右端にある広告みたいな感じです。

なにをやるのか知らんが、「重要じゃないもの」ならおく必要はない。
多分二度と見ないな。

>>773
displayプロパティを使って工夫してみたら？
製作者スタイルでnoneにして、自分だけユーザスタイルで表示するとか。
それもちょっとアレか。

すみませんが、>>768 の疑問について、どのようなサイトが参考になるか、
お教えいただけないでしょうか。しばらく検索しましたが、なかなか意図する
内容を見つけることができません。

私は今、こちらのサイトを主に参考にしており、
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/

他には ばあど 氏や ばけら 氏のリファレンス を参照したりしています。

ただ、CSS の文法やリファレンスから先の、具体的な使い方の定石については、
まだほとんど経験がなく、検索でうまく見つけ出すことができません。

今知っているのは、このぐらいです。
http://deztec.jp/site/tips/tips.html
http://www.fromdfj.net/html/index.shtml（こちらはまだ、読み始めたばかり）

>>774
元々Hit数ほとんどない自己満足サイトなので気にしません(つД｀)
htmlとCSSでこんなことしてみたいなーっていうのをチマチマやってます。

>>775
うーん。ちょっとアレですね。

ちっとアレだから、ナニするといいよ。

>>776
自分の頭でHTML・CSS考えてる？コピペじゃ経験も何も生まれない

教えてくださいm(__)m
ＳＳＳ．ＪＳなるＣＳＳ切り替えスクリプトをＤＬし組み込んでみました。
自分のパソでは何の問題も無く動作するのですがＨＰへアップすると動作しません。
Ｎｏ−スタイルシート状態で表示されます。
その時にステータスバーには「実行しましたがページでエラーが発生しました」
との無常なメッセージが出てきます。

どうかエロ皆さん解決策を教えてください。

>>780
ネタ乙

>>780
世の無常をよく味わえ。

　　　}ﾉ-､　　　 ,. -‐-､ ヽ;::::::::l
　　 l￣二'ｰ 'フ,ニニ.ｰrｰ}-ﾚ ''7
　　 l : i.__ﾟ〉r､::..ヽ.__ﾟﾉ　ﾚ''}ﾉf´/　教えてあげません
　　 `''r-- ﾉ:::`ー---‐'′:l-イ
　　　　l　 `_ ＿＿__,、　 :l|::::|
.　　　　ヽ. 　 ―　　　 ／:::|:ﾘ

>>780
ややスレ違い気味だが、外部 JavaScript ファイルの文字コードと、
それを読み込む html ファイルの文字コードは合っている？
もし合っていないなら、揃えるか、
<script … charset='（外部 JavaScriptの文字コード）'></script>
として、文字コードを指定してみてください。

それでダメなら、ちょっと私には心当たりないです。

ファイルの場所をC:\とかにしている予感（そんなまさか）

３レスほど世の中の無常を味わいました。

>>704
文字コード確認しましたが間違ってませんでした。
てかScriptの部分はDLしたところの例文そのままです。

>>785
そうか！フィル置き場か！！







な分けないです。
ファイルの場所は相対パスで指定してます。
これも間違いないと思います（T_T
もうどうしたらよいら（鬱

>>786
どうにもスレ違いだけど、Mozilla で試してみたら？
・JavaScript の詳細なエラーが出るし、デバッグもできる。
・外部 JavaScript の文字コードを自動判別してくれる。

ここから先は、こっちで聞いたほうがいいと思う。
+ JavaScript の質問用スレッド vol.27 +
http://pc5.2ch.net/test/read.cgi/hp/1080743738/l20

次のスレッドでは、どんなスクリプトを試そうとしているのか、その配布サイトの
URLをちゃんと示してね。

Mozilla の入手先
http://jt.mozilla.gr.jp/releases/#1.7b

あと、大きなお世話だけど、君の日本語はだいぶ不自由だ。
「無情」と「無常」は別の言葉だよ。辞書を引く習慣をつけよう。
http://www.asahi.com/tool/jisho/index.html

他には、
・誤字脱字が多い。もっと気をつけて書いてね。
・ふざけた態度に見える。へりくだる必要はないけど、最低限の礼儀はわきまえるべし。
・そのスクリプトの配布元の URL や、できればあなたのサイトの URL を示してほしい。
　状況がわからなければ、アドバイスもできない。

これではなかなか、まじめな回答は返って来ないと思う。現に今回、煽られたでしょう？

あわてているのだろうと思うけど、落ち着いて、丁寧に書き込んだほうがいいよ。
そうじゃないと、回答者に失礼だし、なにより、問題の解決が遅れて、君の損になるから。

>>787,788
ありがとうございます。
もう少し情報を整理したら誘導されたスレに行って見ます。

辞書もひくようにしますm(__)m

>>786
理由はどうにしろ根本的に解ってないな

定義リストの標準マージンはＩＥの場合だと
margin : 0px;でなくせるんですが
ネットスケープではできません。
この場合どうすればネットスケープで
標準マージンを削ればよいのでしょうか？

>>791
paddingかなと推測しますが、>>1を良く読んでくださいね。

* {
font-size:100%;
margin:0;
padding:0;
}

質問させてください
環境MacOS8.6〜9.1　IE5,6
で下記を表示すると
ttp://www.geocities.jp/jyajya25/test.html
ルビの文字が表示させる度に"o"を使用しているものだけ消えたり、消えなかったりします
事があります.
<ruby>タグが XHTML1.1 用のタグだからなのか、他の間違いか
判断つかないのですが識者の方宜しくお願いします

>794　IE5.5で開いてみたが、2回も強制終了するはめになった。
lintでもさんざんな結果になっている。
まずは基本をチェックしてみることをすすめたい。

>>794
795にほぼ同意です。
とりあえず、<rt>が閉じていない所があるっぽいです。
余計な事ですが、かなりレイアウトにこだわっているようなので
swfにしたほうが良い気がする。

質問です。floatを使ってサイドバーとナビゲーションバーを作りたいんですが
IE6の表示で隙間が空いてしまって困っています。
FireFox0.8では問題ないんですがIE6で表示させると
サイド||ナビゲーションバー
サイド|
サイド|本文
のようにサイドバーとナビバーの間に3ピクセルほど隙間ができてしまいます。
どうにか隙間なく表示させる方法をご存知でしたら教えてください。
以下はソースです。よろしくお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD// HTML 4.01 Transitional//EN">
<html><head><style>
div.side { float: left; width: 3em;}
div.main { margin-left: 3em; }
ul { margin: 0px; padding: 0px; list-style: none; height: 1em;}
li { float: left; }
div.side { border-right: 1px solid #000000; } /* 隙間確認用ボーダー */
ul { border-left: 1px solid #000000; } /* 隙間確認用ボーダー */
</style></head>
<body>
<div class="side">
サイド<br>サイド<br>サイド
</div>
<div class="main">
<ul>
<li>ナビ</li><li>ゲーション</li><li>バー</li>
</ul>
<p>本文</p>
</div></body></html>

>797
ul の line-height:1em; が原因じゃないかなと思う。試したのはIE5.5だけど。

で、削ると p { clear:left; }が必要になって、
これを入れると IEの表示がちょと変になって…。うーむ。

というわけで、
ul { margin: 0px; padding: 0px; list-style: none; }
li { display:inline; }

でどうでしょうか。

ごめん、訂正します。

×line-height:1em;が原因
○height:1em;が原因

>>797
おそらくこのバグだと思われ。
http://cssbug.at.infoseek.co.jp/detail/winie/b054.html

<style>
div.side {position: absolute; width: 3em;}
div.main {position: relative; left: 3em;}
ul {margin: 0px; padding: 0px; list-style: none; height: 1em;}
li {display: inline;}
div.side {border-right: 1px solid #000000;} /* 隙間確認用ボーダー */
ul {border-left: 1px solid #000000;} /* 隙間確認用ボーダー */
</style>

<div class="side">
サイド<br>
サイド<br>
サイド
</div>
<div class="main">
<ul>
<li>ナビ</li><li>ゲーション</li><li>バー</li>
</ul>
<p>本文</p>
</div>

これでIE6では>>797望みどおりに表示される。
でも、withの解釈の仕方がブラウザによって違うんですよね。
内容域だけの幅であったり、ボーダーを含めた幅であったり。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height

ああ、IE6でも標準準拠モードなら内容域の幅なのか。なら下みたいにpxで指定したほうがいいかも。

<style>
div.side {position: absolute; width: 50px;}
div.main {position: relative; left: 51px;}
ul {margin: 0px; padding: 0px; list-style: none; height: 1em;}
li {display: inline;}
div.side {border-right: 1px solid #000000;} /* 隙間確認用ボーダー */
ul {border-left: 1px solid #000000;} /* 隙間確認用ボーダー */
</style>

>>795 >>796
確認ありがとうございました.
後でみたら酷いソースでした,強制終了させてすまそ
手元にあるCSS辞書ではHTML4.01で<rt>を閉じてない実例が記載されていましたが,
どうやらまったく違うみたいですね....　基礎からやります
ありがとうございました

ulのheight指定が原因だったんですね。
とりあえずheightを削ってinlineにすることにします。
IEのバグかな？とは思いつつ、>>800のバグレポートには
自力では辿り着けませんでしたtt

positionを使ったやり方は知らなかったんですが
こっちの方法でもうまくいきました。

>>798-802
どうもありがとうございました。

CSSの使い方がうまい香具師ってソフト使ってるのか？
それとも手書き？

ソフトも手書きも無関係。推理と洞察。

使い方ならセンスとかじゃない？

推理と洞察とセンスと勉強。

あと、ひと夏の経験。

あまずっぱい思い出。

IE5.5ですが、tableを内容共々中央にしたい。
先にdiv style="text-align:center;"、
table style="margin-left:auto;margin-right:autoではテーブルの内容が
左に寄ったままなのですが・・・何故でしょう？
tableにもtext-align:center;を加えるべきなの？

>>811
自分で答えだしてるじゃん。

>>811
その通り

>>811
カスケードや継承で調べよ。

テーブルを透けるようにしたいのですが、

style="filter:alpha(opacity=70)" 　こうすると
テーブル内の全てが透けてしまいます。
例えば画像を置いたらそれも透けたり、
入れ子にしたテーブルもその影響を受けたりします。

<td>のみに適用したりは出来ないでしょうか？
これはTABLE全体にしか効かないのでしょうか？

>>815
<td>だけは可能でしょ。背景だけは多分無理。
やるならαチャネルPNG画像を背景に使うとか、
背景だけのレイヤを作って重ねるとか

質問すみません。左にメニューを置いて、メインに幅の広い画像を表示させたいのです。
ネスケとオペラはＯＫだったのですが、ＩＥ６だとメニューと同じ高さから表示されませんでした。
解決方法ありますでしょうか？ソース張ってみますのでよろしくお願いします。

<!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>title</title>
<style type="text/css">
<!--
.menu {/* メニュー */
float: left;
width: 20%;
}
.main {/* メイン */
margin-left: 21%;
}
-->
</style>
</head>
<body>
<hr>
<div class="menu"> メニュー<br>
メニュー<br>
メニュー </div>
<div class="main"><img src="image.jpg" width="1280" height="1024"></div>
<hr>
</body>
</html>

width="1280" height="1024"　 こんな画像は表示させなくてよろしい。

>>817
>メニューと同じ高さから表示されませんでした
意味わからない。他人に通じる言葉で書いて下さい。

>817
div にborderを設定してみると、IEでも <div class="main"> の上端自体は
menu にそろってますね（Operaではずれてますが）
で、>818にもありますが、1280×1024の画像をスクロール無しに表示できる環境って
どれくらいあるんでしょう
一度アクセス解析つけて調べてみては？

ちなみに、画像サイズを640×480にしたら、お望みどおり高さ揃いました
ただし、ウィンドウサイズを小さくして、縦スクロールバーを出すと、画像の高さがずれます

position 使ったら？

>>817は、画像だけなら<div class="main">で囲む必要無し。
img要素に直にfloatなりmargin-leftなりを指定すれば済む話。

>>820
position を使うと、後続要素の位置調整が面倒だと思う。
結局、包含ブロック(body)の幅が、画像に比べて狭いのが原因だということで、
html をいじらないという前提なら、body の幅を広げるしかないのでは？

>>817
ということで、書いてみました。
スタイルシート以外の部分は、全て >>817 と共通ね。
--------------------------------------------------------
* { border:solid 1px black; } /* border の視覚化 */

body {width:1500px;} /* 1280px + 200px が 収まるように */

.menu {/* メニュー */
float: left;
width: 200px; /* body が px 固定になっちゃったから、子を相対値にするのは、あまり意味がない */
}
.main {/* メイン */
margin-left:210px;/* .menu と同じ理由 */
}

>>817
しかし、このレイアウトはあまりにも閲覧者にとって不便だと思う。
こういう↓感じに変更することを、個人的にはおすすめしたい。

「"いろは"の先の CSS 第3回」の「課題 No.06」
http://deztec.jp/lecture/folio/03/index.html
（ページ下方にあります）

みなさんありがとうございます。
>>817ですが1280〜とかはただの例です。
実際はもっと小さい画像(といっても600〜とかですが)を表示させて、
窓最大だと大丈夫なのに窓サイズを小さくしたとき、IEだけ高さがずれたので不思議に思って質問しました。
質問内容をわかりやすくしようとしたんですが逆効果のようでした。すみません。

>結局、包含ブロック(body)の幅が、画像に比べて狭いのが原因だということで、
>>822さん
これはIEのバグなんでしょうか？
>>817にあるとおりMozillaやOperaは高さがずれませんでした。

>>824
悪いけど私にはわからない。仕様書とか詳しくないから。

これは、float の指定されたブロックのあとに、置換インライン要素が続くとき、
その置換インライン要素の幅が、全体の包含ブロックより大きい場合、どう振舞うべきか、
ということなんだけど、
仕様書やバグ辞典を見ても、私には該当する項目が見つからないんです。

>>818 のソースで、
.main{} （宣言が空）のときの表示は、IE も Mozilla も同じなんだけど、
.main { marign-left:21% }
.main { padding-left:21% }
とすると、ご承知のとおり、描画が異なる。どちらが正しいのだか、私にはわからない。
ちなみに、
.main { width:1600px }
としても描画が異なるんだけど、これは IE が間違っていると思う。

自己訂正 × >>818 → ○ >>817

>>824-826
こちらに報告よろしく。

CSS/DHTMLバグ辞典スレッド 第４版
http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50

>>824
お前は表示方法を探しているのか？バグ探しをしているのか？

>>827
そう言われても、まとまっていないから、どう報告したらよいのか分からないよ。

>>824
あのあとでも少し試したんだけど、結局 div.main を基準ブロックにして、
その中で div.menu と img を絶対位置指定してしまうのがいちばん簡単で、
互換性も高かった。>>820 氏の言うとおりか。

IE にはあまり凝った float を扱わせないほうが良いみたい。
IE を対象にする限り、div 厨になるのは避けられないと思う。

個人的には、>>823 の通り、画像は背景にした方が、ブラウザにあまり無理をさせずに
済むから良いと思いますけど。

>IE を対象にする限り、div 厨になるのは避けられないと思う。

無知の痛みを知れ

無知の痛みを知れ だってさ

いて！！

ムチは痛いものと決まっている

ご質問させてください。

テーブル内のリンク部分に、a:link a:visitedで指定した色が反映されません（ディフォルトの色になってしまう）。
テーブル内は別個に指定する必要があるのでしょうか??

ぜひご返答よろしくお願いいたします。

>>834
tableには継承されない。別個指定せよ。

>>834
>811-812

ご返答ありがとうございました。

やっぱり別個に指定の必要があったのですね。

どうもありがとうございました。

もう一度ご質問させてください。

恥ずかしながら、テーブル内への　a:link{ color: ----} の指定の方法がわかりません。
<table a:link="color:---">では駄目ですた。

是非もう一度ご返答を、よろしくお願いいたします。

>>838
>>4

　↑ishi　少しは自分で調べる努力をせんかい！！　って怒ってるんだよ。
　わかったら、結果を他の初心者のために書いておくれ。

下記のサンプルで、baseの下端をbox1,2,3の中の一番下（サンプルではbox1の下端）にあわせたいんですが、
absolute指定しているbox（サンプルではbox1,3）は無視されるようでfooterがbox2の真下に来てしまいます。
なんか上手いやりかたはないですかね？

--以下サンプル--
<html>
<head>
<style type="text/css">
<!--
#base {width: 100%; position:relative; border: black 1px solid;}
#box1 {width: 150px; height: 200px; position: absolute; left: 0; top: 0; border: red 1px solid;}
#box2 {margin-left: 160px; margin-right: 160px; border: blue 1px solid;}
#box3 {width: 150px;height : 150px; position: absolute; right: 0 ;top: 0; border: green 1px solid;}
#footer {border: pink 1px solid;}
-->
</style>
</head>
<body>

<div id="base">
<div id="box1"><p>box1</p></div>
<div id="box2"><p>box2</p></div>
<div id="box3"><p>box3</p></div>
</div>
<div id="footer"><p>footer</p></div>

</body>
</html>

ご叱責ありがとうございます。

ほぼ全部読んで今までCSS組んでいました（複雑ではないものですが）。
これだけどうしてもわからないのです。

CSS1 テストスイート: 2.1 アンカー
http://www.doraneko.org/css1test/sec21.htm

上のアドレスのソースを見ても、特にテーブルだけに指定しているようにも見えませんが、a:linkが反映してるんですよね・・・
ちょっとかなりお手上げ状態なので、是非教えていただきたいです････

よろしくお願いします。

「ご質問させてください」

(ﾟДﾟ)ﾊｧ?

>テーブル内のリンク部分に、a:link a:visitedで指定した色が反映されません（ディフォルトの色になってしまう）。
そんな筈はない。何処かで何かが間違っている。
それとブラウザの種類とバージョンぐらい明示しろ。

>841
#base に height:200px; を追加したらお望みのレイアウトになりましたが、
なんか邪道のような気がします

>842
tabel にもアンカー色の設定が継承されますね
内部スタイルシートでも外部スタイルシートでも同様でした
また、IE6、NS7、Opera7、NN4 のいずれでも同様の結果でした
問題のソースをさらしてみたらどうでしょう？

>>842
835が間違ってるんじゃねーのか？
俺のサイトはtableで普通にアンカーのスタイルが継承されてる。
842のソース晒してみれ。

>>845
レスありがとう。
でもbox2の高さが左右のbox1,3より低い場合を想定してるので、
box2にheightを追加するってのはちょっと…。

>>842
a:link{ color: ----} → a:link { color: ----} これの予感。
　違ってからごめんにゃ。

日本語へん　すまそ

>>845-846
>tabel にもアンカー色の設定が継承されますね
ここでの a:link {} 云々の話と「継承」は関係がない。
アンカーの子孫部にしか，「継承」されるはずがない。
宣言に付随する疑似クラスが対象の要素とマッチしただけ。

>>829
まとめられないのなら仕方ない、そのまま報告して、先方にまとめて貰ひたまへ。

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

いろいろ試した結果
テーブルだけに反映されてないのではなく
ページ全体に反映されていませんでした。しかもIEだけ反映されないようです。

ソースを見て何度も確認したのですが、どうしてもこのページだけ、a:link a:visitedの色替えができません。
しかもIE6.0だけでです。
Opera7、Mozilla1.6、NN7.1　では反映されています。

外部スタイルシートです。
ソースは、長いし、画像が多いのでさらしません。
ぼちぼち原因を突き止めることにします。

どうもお騒がせしました。

>>852
なんだい！！　お前さんの目は節穴か。
とりあえず　>>848はやっとけよ。

>恥ずかしながら、テーブル内への　a:link{ color: ----} の指定の方法がわかりません。
><table a:link="color:---">では駄目ですた。

まあ、こーゆーこと言ってる時点でオ�hルけどね。

予想。

<body a:link="#0000FF" a:visited="#800080" ... >
……
</body>

こんな具合だったりして(ぷげら

テストケースすら自分で作れない馬鹿が多すぎる。
>ソースは、長いし、画像が多いのでさらしません。
必要な部分だけを抽出して提示すればよいだろうに。
こういう馬鹿はいつにたっても、進歩がなさなそう。

いつにたっても

　○ ○　852の目

　〜 〜　856の目

http://ja.wikipedia.org/wiki/Css
にあるように、縦に水平線？をいれるにはどうすればいいんでしょうか？

>>860
border

>841の「ご叱責ありがとうございます。」見てましな奴かと思ったんだけどねぇ
テストケース作っること考えつかない奴とは…
過去ログ見たらテストケースでソースさらしてるのなんてなんぼでもあるのに…

>850
「継承」の使い方間違ってましたね
勉強しなおします
指摘ありがとう

？？？？？

>>860
border-right: 1px solid gray; つーのが有ったよ。　見たんだろ？

>>862

（￣＾￣）ふーむ。。。

overflowを使用してFRAME(、FORM、IFRAME)などの枠を再現しようと、
以下のように長ったらしいソースになってしまいます。何か改善策はありませんか?
ソース：
CSS；
DIV.out-side { width:100%; border-top:1px solid #978e7b; border-left:1px solid #978e7b;}
DIV.in-side { width:100%; height:7em; overflow:auto; background-color:white; border-top:1px solid #404040; border-left:1px solid #404040; border-bottom:1px solid #D4D0C8; border-right:1px solid #EAE8E3}
HTML；
<div class="out-side"><div class="in-side">
適当な文字列。
</div></div>

おめーよー・・　　いいや

>>866
border をまとめて指定してしまえば結構短くなるよ。
あと、div が二個あるのはなんで？
ついでに、div.in-side の子は、適当な文字列、ではなく、
適当なブロックレベル要素、とした方がなお良しですよ。

>>842
邪道ですが、たぶんそれが正解なのではないかと思います。
>>841
多分これが正道だと思います。position をやめて float にする。
だけど IE にはこの↓バグがあるから、少しレイアウトが変わってしまう。
http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
それでも構わなければ、どうぞ。
---------------------------------------------------
<html>
<head>
<style type="text/css">
<!--
#base {width: 100%; border: black 1px solid;}
#box1 {width: 150px; height: 200px; float:left; border: red 1px solid;}
#box2 {margin-left: 160px; margin-right: 160px; border: blue 1px solid;}
#box3 {width: 150px;height : 150px; float:right ; border: green 1px solid;}
#footer {border: pink 1px solid; clear:both;}
-->
</style>
</head>
<body>

<div id="box1"><p>box1</p></div>
<div id="box3"><p>box3</p></div>
<div id="base">
<div id="box2"><p>box2</p></div>
</div>
<div id="footer"><p>footer</p></div>

</body>
</html>

>>868
どうもありがとうございます。
＞ DIVが二つ

フレームの枠を拡大してみると、二重になってるからです。

＞ 適当なブロックレベル要素〜

分かりました。そうします。


DIV厨まっしぐら(ﾉ∀｀)

フレームの枠とは？

>>830
>無知の痛みを知れ

間違ったことを言ってしまったのでしょうか？すみません。
よろしかったら、>>817 をどう書いたら良いか、教えていただけないでしょうか？
煽りではなく、心から教えていただきたいと思っております。

IE が対象なら、結局 position を使うのが簡単で、結果もそこそこ、というのが
今の私の正直な考えです。
そして、position では、base となるブロック要素は、どう見ても装飾以外の
目的を持たないと思います。

この考えにこだわるつもりはなくて、もっと先に進みたいのです。
そのためのヒントだけでも、教えていただければ助かります。

>>866
用語は正確に使わないと、相手に伝わらないぞ。

説明の仕方が悪かったです、すいません。

フレームの枠と言いますか、FORMの枠です。
以前はFORMを使って更新履歴を記録していたのですが
FORMを使ってそういうことはよろしくないとの意見があったので
代替案として上がったoverflowを使いました。

端的にいうと、overflowを使ってFORMのように見せかけたいのです。

>>847
いや、ちょっとちがうよ。
>>845 氏が height:200px を設定したのは、box2 ではなくて base だよ。
だから、box2 が、box1, 3 より背が低くても、問題ないよ。

>>874
要するに、飾りで線をいれたい　って訳かい？

htmlに　frameが・・ｺﾞﾆｮｺﾞﾆｮ と・・　

background-image: url("black.gif");
と
background-image: url(black.gif);
どっちが正しい書き方なんでしょうか？

>>874
>>868さん１行目に書いてある。これで短く出来る。

>>878
分かりました。

皆さん、どうもありがとうございました。

>>877　　上。

>>866
がんがれよー。

>>874
あなたの言いたいことがやっとわかったよ。×フォーム → ○ textarea
多分、これであなたの目的はかなうと思う。
Mozilla で少し見づらくなるけど、背景色をつけたりして適当に対応してね。

<html>
<head>
<style type="text/css">
<!--
div.history {
　　border:white inset 2px;
　　height:7em;
}
-->
</style>
</head>
<body>

<div class='history'>
更新履歴
</div>
</body>
</html>

あ、まずい。overflow:auto が抜けてた。
div.history {
　　border:white inset 2px;
　　height:7em;
　　overflow:auto;
}

>>866
>>882が示してくれたように書く分には、
div厨と呼ばれるほどのものではないと思うよ。

個人的には、divの子にCDATA（素のテキスト）とか
インラインレベル要素が来ると、div厨っぽく感じる。

がんがれ。

>>875
あ、言われて気づきました。>>845さんスミマセン…。
でもbaseにheightは指定したくない（下に伸びてくれないと困る）のでやっぱりむりぽです。

>>869
floatを使うことも検討中でした。
わざわざありがとうございます。

>>877
CSS2 では、url() の引用符はオプションだから、つけないのが正式。
http://www.y-adagio.com/public/standards/tr_css2/syndata.html#uri

ちなみに、Mac IE には、'' でくくった url を認識しないバグがあるから、
引用符はつけないのが無難なのだそうだ。
http://cssbug.at.infoseek.co.jp/detail/macie/b047.html

DIV厨の定義がよくわからないのだが、
http://hp.xrea.jp/ko/index.html
こういうのか？

>>887
そういうのだ。DIV無しにしてHTMLとして成り立っていなければDIV厨。

>>887
ttp://hp.xrea.jp/s/u/index.html
ワラタ

>>888
なるほど、ありが�d

>>887
他のページはDIV厨ではないんだね。

>>887
書いてある内容とやってることが全然違うサイト

>>887
DIV厨って言う奴はウザイが


<DIV CLASS=title1>更新情報　2004年度</DIV>
<DIV CLASS=title2>4月16日　<SPAN CLASS=sh>簡単相対リンクのデザインを変更</SPAN></DIV>
これはさすがに…

>>891
他のページはtable厨ですな

>>887
2004年度って・・・・

デブ厨はホンマ駄目だな！

スレ違い

全称セレクタを要素内にいれていいの？
例えば

em *{color:#ddd;}

>>898
問題ないはず。

>>all
DIV病
http://www.fromdfj.net/html/divsyndrome.html

ただ、DIV病は CSS 学習期に必ずかかる、はしかのようなもので、
そのままステップアップして行くことさえできれば、一概に否定しなくても
良いのではないかと思う。

否定すべきだと思う

お前達のを見たいもんだ。　誰か晒せ。

>DIV病は CSS 学習期に必ずかかる

HTMLの理念を理解できていれば、DIV病には冒されない。
HTMLを勉強せずに、CSSを学習するからDIV病に冒される。

>そのままステップアップして行くことさえできれば

DIV病に冒された段階で、ステップアップできない。

>>all
議論はよそで

結局DIV厨が自己弁護の為にあぁだこぅだ言ってるだけだな

CSSの宣言（？）を、
<html>
の前に書くのと後ろに書くのはどう違うんですか？
上のサイト行っても、とほほさんは後ろ、ばけらさんは前に書かれてます。

>>905
とほほは疑ってかかれ。これ定説。

>>905
見てきたけど、どちらも後ろに書いてあるように見えるが。
つーか、htmlの後ろというか、headの後ろが正しい。

単に好みの問題

>>905
前とか後ろというのが、いまいち理解できないが・・

　とりあえず
<!DOCTYPE*****
<html lang="ja">
<head>
　ここ　
</head>
<body>
ごにょごにょ
</body>
</html>

　　ばけらは外部ファイルだったような・・・

>>905
実はどちらも違わない。CSS の適用は、html の読込が終わってから
行われるから。

ただし、<style> を <head> 〜 </head>の外に書くのは文法違反。
ここで試してごらん。
http://hanoi.softvision.co.jp/htmllint/htmllint.html

参考
http://www.ne.jp/asahi/minazuki/bakera/html/reference/headmisc#style

すまん。
> CSS の適用は、html の読込が終わってから行われるから。
この部分だけ撤回。

ちょっと勘違いしてたみたい。

>>911
なんだか全部がガセに見えちゃうよ。

ttp://www001.upp.so-net.ne.jp/oka/iframe_dm.htm

上記のサイトの一番上にあるような選択欄みたいなのに、
スタイルシートを適用したいのですが、どのようなプロパティを指定すればいいのでしょうか？

>>913
SELECT要素と言え。で?

>>914
スタイルシートを使ってその選択欄の背景色を変えたりしたいんですが、無理なのでしょうか？

>>914
お前に用はないよどっかいってください

>>915
無理じゃないよ。

>>917
そうですか。ありがとうございます。SELECT要素でもっかいグ愚ってきます。

>>916
IDがRSSだわ。

>>918
select要素でググってもでない予感。CSSの基礎を学べばわかるはず。

みなさん回答ありがとうございます。
自分は一般的なHTML言語を使える程度です。
今からcss勉強しようと思ってます。
勉強の順番は、
HTML→css→Java Script
で大丈夫でしょうか。
今からこつこつとやっていこうと思ってます。
Web Page作成に当たって、これはしっとけ、これはもっとけみたいなのがあったら教えてください。
最終的には掲示板なんかも自作でやりたいと思ってます。
というか、どこまで自作でできるものなのでしょうか？
アクセス解析なんかも自分でできるのでしょうか。

>>920
スレ違いですよ。

>>921
失礼しました。
では、勉強の順番を教えていただけないでしょうか。
順番というか、Web Page作成におけるcssの位置づけみたいなもの。
全体像がわからないとどれから勉強すればいいのかよくわからないので。

>>922
ちょっとﾜﾗﾀ

僕の肛門も順番を知りたがっています。

>>922
初心者スレ池

>>922
順番は、まあそれで良いのじゃないかな。
並行して PHP とかも勉強すればなお良しかと。
これ以上は、どうぞこちらへ。

Webサイト製作初心者用スレ vol.89
http://pc5.2ch.net/test/read.cgi/hp/1082203621/l20

308 ：Name_Not_Found ：04/03/31 15:52 ID:???
>>4のテンプレURL変更あったので報告。

> ・『スタイルシートWebデザイン』ボランティアHTML化版。
> 　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
　　　　　　　　　　　　　　　　↓
http://www.asahi-net.or.jp/~jy3k-sm/css1/2004maki/


309 ：Name_Not_Found ：04/03/31 15:58 ID:???
>>308
了解、こちらは変更した。
http://web2ch.s31.xrea.com:8080/?CSSRelated

>>927
ああ、それねえ、あのあとすぐに元に戻ってたよ。
クリックしてごらん。2003maki の方がつながるから。

・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/

そこには毎日行ってるけど、結局、ディレクトリが変更されてたのは、たった1日間
ぐらいだったような記憶がある。何があったのかしら？

CSSに関する質問はこちらへどうぞ。　※　議論はよそで　※
■■■■■　質問のしかた　■■■■■
・基礎は解説サイト（>>4・かなりわかりやすい）で勉強してください。
・質問の前に【FAQ】（>>5-8）を参照して、既出の再掲を避けて下さい。
・【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
　WinIEの場合は、[Ctrl+F]で検索できます。
・ブラウザによって対応していないプロパティーやバグがありますので、
　【解説など】（>>4）の対応表や「CSSバグリスト」に目を通しておきませう。
・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。validator（>>3）でチェックできます。

初心者の疑問は大抵ここまでで解決します。

・OSやブラウザの種類とヴァージョンについては必ず明記してください。
　特にNetscapeは、ver.4までと6以降でまったく別物です。
・「環境を書け」とか「ソースは？」と求められたら応じませう。
　その方が回答が早く得られます。質問は具体的に。

過去スレや関聯リンクは>>2-10
【過去ログ】【関聯スレ】>>2
【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-9

http://web2ch.s31.xrea.com:8080/?CSS
【FAQ】　http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去ログ】　http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】　http://web2ch.s31.xrea.com:8080/?CSSRelated

【過去ログ】
1　http://mentai.2ch.net/hp/kako/974/974934062.html
2　http://natto.2ch.net/hp/kako/984/984113434.html
3　http://natto.2ch.net/hp/kako/992/992992981.html
4　http://pc.2ch.net/hp/kako/996/996828258.html
5　http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
6　http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
7　http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
8　http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
9　http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
10　http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
11　http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
12　http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
13　http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
14　http://pc5.2ch.net/hp/kako/1041/10416/1041641395.html
15　http://pc5.2ch.net/hp/kako/1045/10451/1045124732.html
16　http://pc5.2ch.net/hp/kako/1047/10471/1047154499.html
17　http://pc5.2ch.net/hp/kako/1048/10487/1048775997.html
18　http://pc5.2ch.net/hp/kako/1050/10500/1050086156.html
19　http://pc5.2ch.net/hp/kako/1053/10536/1053619342.html
20　http://pc5.2ch.net/hp/kako/1055/10555/1055536413.html
21　http://pc5.2ch.net/hp/kako/1057/10578/1057860130.html
22　http://pc5.2ch.net/hp/kako/1060/10608/1060869440.html
23　http://pc5.2ch.net/hp/kako/1064/10645/1064502391.html
24　http://pc5.2ch.net/hp/kako/1066/10663/1066310242.html
25　http://pc5.2ch.net/hp/kako/1069/10692/1069216458.html
26　http://pc5.2ch.net/test/read.cgi/hp/1072018825/l50
27　http://pc5.2ch.net/test/read.cgi/hp/1074845459/l50
28　http://pc5.2ch.net/test/read.cgi/hp/1076968824/l50
【前スレッド】
http://pc5.2ch.net/test/read.cgi/hp/1079598884/l50

【関聯スレッド】
・CSS/DHTMLバグ辞典スレッド 第４版
　http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
・代替スタイルシートに萌え〜
　http://pc5.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
　http://pc5.2ch.net/test/read.cgi/hp/1019912046/l50
・* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc5.2ch.net/test/read.cgi/hp/1038678267/l50
・CSSでイケてるデザインサイト 21
　http://pc5.2ch.net/test/read.cgi/hp/1078361001/l50

【仕様書】
・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
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

【CSS検証】
・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/
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・とほほのスタイルシート入門
　http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート　http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/index.html
・Web標準化Tips　（特に「HTML/CSSのよくある誤解・ミス」）
http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け　（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには？　text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に5.）をご覧ください。
1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
　http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと　(floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと　（ネスケ４でも崩れない段組みの実例）
　http://village.infoweb.ne.jp/~fores/

Q4: なんかフロートの表示が崩れるみたいなんですけど？ †
A4: floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト（imgを含む）だけです。
ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
　http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
　http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
　http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
　http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

【FAQ】
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://kobit.info/tips/overflow.html
　http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
　http://www.rju666.com/web/layout/imitate_frames.html

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート 縦中央(垂直中央)」参照のこと。
　http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。

Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？　
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

【FAQ】
Q10.リンクを新しいウィンドウで開かせるにはどうしたら？
A10.ＣＳＳではできません。target属性かJavaScriptでやって下さい。
別窓が開くと迷惑に感じる人もありますからなるべくしない、がＷ３Ｃの方針です。

Q11．いままでＨＴＭＬでやってた××をCSSでやるにはどうすればいい？
A11．下記に書いてあります。テーブル・レイアウトは段組のFAQ（A3・>>6）をご覧あれ。
「いままでの HTML との対照」
　http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
　http://deztec.jp/site/tips/page/p0037.html

次回からスレッド立てる人は、下記の変更・追加もよろしく。

■ ローカルルール等リンク先更新総合スレッド 10
http://qb3.2ch.net/test/read.cgi/operate/1079706809/

【過去ログ】http://web2ch.s31.xrea.com:8080/?CSSLog

おまえら10レスくらいあれば質問1件いけるじゃないか

位置指定についての質問です。
positionをrelativeすると下に余白ができてしまいます。
absoluteにすると大丈夫みたいです。
この余白は相対的に配列する場合は仕方がないのでしょうか？
そもそも相対的と絶対的の使いわけがわかりません。
ということで、
�@余白の解決法。
�A使い分け。
をご教授願えないでしょうか。

>>939
ソースが無いとわからんのだが、
余白はmarginなりpaddingなりでなんとかするのが吉。

相対配置、絶対配置の使い分けは状況（や人）によって変わるので
相対指定で配置したい場合と絶対指定で配置したい場合、としか答えられん。

>>939
相対位置は、本来その要素があった場所からの位置指定。
絶対位置はウィンドウ枠からの位置指定。
　ただし親要素にも position が指定されてた場合はその親要素からの位置指定。

�@絶対位置指定する。相対指定の場合、そのボックスの範囲は保持したままになる。
�A相対位置は少し「ズラしたい」時に。
　 絶対位置は大きく「移動させたい」場合。または「他の要素に重ならせたい」場合。

こんな感じかと。

type要素やmeta要素をタイプセレクタにしていいの？

こんにちは。昨日からCSSを始めました。初心者で申し訳ないです。。
http://www.fairies-garden.com/pso/index.html
↑が今作っているサイトです。

Div要素の段組を今は
------　------
l 　　　 l　l　　 　l
l 　　　 l　l　　 　l
------　------
という感じで横並びなのですが、

------　------
l 　　　 l　l　　 　l
l 　　　 l　l　　 　l
------　------
--------------
l　　　　　　　　　 l
--------------
このように下にもう一段つけようと思っています。
申し訳ないのですが、テンプレの方から見つけることはできませんでした。
仕方なく今は<BR>を何十回も打ち込んでDivの外に出るように調節しているのですが、、

Div.column { position: absolute;
background: #F5F5F5 }
#column1{width:58%; left:1%}
#column2{width:40%; left:60%}

ソースはこんな感じでいいですか？
colum3のプロパティをどのようにしたらいいのか教えてください。
よろしくお願いします。

>>942
いいわけありません

>>943
>>6じゃダメか？

>>943
絶対配置じゃ、その段組は難しいかもしれない。
上2つ段が必ず同じ高さなわけないと思うし。

それよりも float 使うほうが楽ぽいよ。

#column1 {
margin-left: 1%;
float: left;
width: 58%;;
}

#clumn2 {
margin-left: 60%;
float: right;
width: 40%;
}

#column3 {
clear: both;
}

こんな感じかと。2番目のコラムは margin-left いらんかもしらん。

>>946
横レスｽﾏｿ。
それ、IE６で上手くいく？
なんか、前にやったときはwidthを％で取るとおかしな
値になったような気がしたのですが・・・

って、スイマセン。やってみれば良い話ですよね。
ちくっと試してみます。失礼しますた。

>>943
長さの値には単位が必須です。
フォントサイズ固定は嫌われます。
:alink ではなくて a:link です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>ぷそバト</title>
<link rel="stylesheet" type="text/css" href="http://www.fairies-garden.com/pso/nomal.css">
<style type="text/css">
h2 { margin-top: 0; }
.article { border: solid 1px; margin: 1em 0; }
#whatsup { float: left; width: 59%; }
#contents { text-transform: uppercase; margin-left: 60%; }
#footer { clear: both; margin-top: 4em }
</style>
<h1>ぷそバト−PSOバトル情報サイト for BLUEBURST−</h1>
<div id="whatsup">
<h2>公式更新情報</h2>
<div class="article"><p>ＢＢには新マップやら新モンスターやらが追加されるらしいです。</p></div>
<div class="article"><p>製品版の情報が出ました。</p></div>
</div>
<div id="contents">
<h3>コンテンツ</h3>
<ul>
<li><a href="index.html">Home</a></li><li>Rule</li>
</ul>
</div>
<div id="footer">
<p>このページで使用されている画像は（株）ソニックチームの許諾を得て、キャプチャーしたものです。配布や再掲載は禁止されています。</p>
<address>2002- by sunahara</address>
</div>

>>949
<ul>
<li><a href="index.html">Home</a></li>
<li>Rule</li>
</ul>

>>949　なんか匂うな。

>>950
行数制限に引っかかるから短縮してるんじゃねぇの。