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

質問です。
<ol>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol>
li{
width:500px;
}

とすると、何故か番号が全部１になるんですがどうしてですか？width:500px;をなくせば
正常に戻ります。IE6互換モード/win98です。

>>182は、>>4のリンク先を見てないな。

Internet Explorer (Windows) CSSバグリスト
パディング・幅・高さを指定したリストでリストマーカーが壊れる(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b153.html

>>183
ありがとうございます。それにしても代替えがdivとは・・・・。スタイル当てなきゃ何かわからない
不思議マークアップっていやですね。とりあえず、リストマーカー消して使います。

>>184
別にバグ回避の代替（ダイガエではない）方法がdivってわけではないぞ。
リンク先をよく読みなさい。

だいたい

だいがえ　―がへ 0 【代替え】
「だいたい（代替）」の重箱読み。
「―バス」

だいたいって読むんですね；
＞別にバグ回避の代替（ダイガエではない）方法がdivってわけではないぞ。
div以外でも結局リストをリスト要素以外でマークアップするのはどうかと思いますが・・・

今思うとフロントミッション オルタナティブって変なタイトルだね

>>187
li { display: list-item; width:500px; } で解決するだろうが。

>>188
Alternativeには俗語でホモって意味があるらしいから問題ない。

JUGEMという日記のテンプレートを少しいじっていて
背景を固定にして、

#main {float: left;　width: 60%;}

#side {padding: 0px 0px 0px 0px;margin-left: 40%;}

↑のところの一番右が〜pxってなっていたのを%に変えたら
sideの方の終わりまでしかスクロールバーが下がらなくなってしまいました。
でもブラウザのサイズを少し動かすと下がるようになるんです。
どうしてなんでしょうか？？

>>191
意味分かりません。
馬鹿で間抜けな小生にも伝わるような、正しい日本語で書いてください。

ネスケつかってる？

ごめんなさい、上手く説明できないんですが･･

画面が↓みたいになってるんです。
メインに日記の文章、サイドにはリンクとかカレンダーがあります。。
テンプレートが元々
#main {float: left;　width: 〜px;}#side {padding: 0px 0px 0px 0px;margin-left: 〜px;}
となっていたのを
#main {float: left;　width: 60%;} #side {padding: 0px 0px 0px 0px;margin-left: 40%;}
に変えて、ついでに背景を固定で表示させるようにしたら


ﾒｲﾝ　　ｻｲﾄﾞ
---- ---
---- ---
---- ---　　←この位置までしかスクロールバーが下がらなくなったんです。
----
----

でも、ブラウザをちょっと横に広げたり縮めたりすると
ちゃんと下まで下がるようになるんです。

わかり難くてごめんなさい。

>>193
IE使ってます。

>>189
そうですね。

>>194
貴様はどなたでございますか?
HTMLソースを見ずに答えろと仰るのですか?

>>196
この部分しか変えてないので
変えたところが何かおかしかったのかなと思ったんです。
すみませんでした。

>>197
アナタ、ニホンゴ ワカリマスカ?

>>197
何がおかしいのかわからないので、わからないんだと思います…

>>197
191=194=197でいいのか？
質問するんだったら番号でいいからハンドル入れろ。

>>200
すみません、それで合ってます。

>>199のレス番も間違えました。>>197じゃなくて>>198でした。

上手く説明できないのでもうちょっと自分で調べてみることにします。
お騒がせしてごめんなさい。

>>201の脳みそは一体どれくらいなんだろう。可哀想に。

5g

池沼

質問スレッドだからな、答えは期待できないってことだ。
191 の人が、テンプレートをどうこうせずに自分で最初からやる方が楽だと気づくといいな。

http://pc5.2ch.net/test/read.cgi/hp/1087826844/l50
Strictスレがここより伸びがいいのが不思議だな。

まぁここは質問スレってだけで回答スレではありませんので

position:absoluteの場合の起算点って親要素（position:absolute|relativeしてある）か、
ブラウザの左上だけど、n4は何やってもブラウザの左上が起算点。

他にも起算点がCSSの仕様と違うブラウザってあったら教えて。スタイル適用させないやつをどれに
するか考え中。

誰もわからんよ

星の数ほどブラウザが。

>>208
>position:absoluteの場合の起算点って親要素（position:absolute|relativeしてある）
正しくは「位置指定されている最も近い祖先要素が設置したコンテナブロック」。
「親要素を基準に〜」云々っていう解説を見かけるけど大きな間違い。

>ブラウザの左上
これも大雑把な言い回しだなぁ。
まぁここら辺は複雑なのでこだわりませんが…

>n4は何やってもブラウザの左上が起算点。
そんなことない。トンデモな実装ではあるけれど…

>他にも起算点がCSSの仕様と違うブラウザってあったら教えて。
おそらく最近のブラウザであれば問題ないだろう。
そんなブラウザがあったとしても無視して構わない。

>>168
＞.IFのプロパティーに　overflow: scroll;　つけれ。

やってみましたが駄目でした。
ついでに呼び出されているxxx.htmlのbodyにもoverflow: scroll;つけてみましたが駄目でした。（xxx.html単体で見る分には正常に表示されているので不必要かと思ったのですが、念のため。）

ところが、iframeタグの中のclass="if"をとって、
iframeタグを<div class="if"></div>で囲んだら
正常に表示されました。

うーん。何でだろう？

>>212
IE は OS 問わず、フレーム使ったときにスクロールバーが出なかったり、
でもウィンドウリサイズすると出たりするよ。不具合、というか、仕様。

原因は漏れもよくわからないのだけれど、経験的に、汚い html 書いていると
なりやすい。逆に valid な html ならまずならない。

とりあえずリントにかけてみるのはいかがか。

>>212
他の要素との兼ね合いじゃろうな。ソース全体を見てみないとわからないや。

>>211
＞おそらく最近のブラウザであれば問題ないだろう。
イヤ・・・・だからそれを聞きたいのだが・・・・抽象的すぎる；

＞そんなブラウザがあったとしても無視して構わない。
無視するかどうかはクラに任せるので、せめて何々以上ならダイジョブとかわかると
助かる。

クラって言っても知り合いで、金銭の発生しないし、俺は↑の質問するくらい未熟な素人だけどね。

>>214
他の要素との兼ね合いじゃろうな。

おまいは何歳だ？

http://www.scottandrew.com/
http://www.hssh.jp/~hssh/
http://thefool.fc2web.com/
http://www.1point.jp/~book_2ch/index.html
http://red.ciao.jp/fantasy/
http://www.aquaplace.com/
http://starry.night.nu/
http://www.macintoybox.com/
http://www.d1.dion.ne.jp/~hirosi_s/index.html
http://www.annie.ne.jp/~sheepers/komain.html
http://3110.sunnyday.jp/
http://cheser25.hp.infoseek.co.jp/
http://phoenity.com/
http://www.users.yun.co.jp/~souichi/
http://radicli.net/rr/
http://d-o-b.ciao.jp/^o^/
http://www.windfarm.co.jp/
http://www.deadbydesign.com/
http://www006.upp.so-net.ne.jp/Initialz/index.html
http://chankaz.cside4.jp/
http://raku-gaki.com/
http://www1.odn.ne.jp/~cce60200/
http://www.muffy.jp/
http://www.ritsumei.ac.jp/kic/~tyv07679/index-j.html
http://tr.vis.ne.jp/
http://www.kapowaz.net/?showarticle=13032003
http://akiko.kuhndesign.com/
http://www.clagnut.com/
http://www.interq.or.jp/orange/nori/
http://www10.plala.or.jp/psychedelic-text/

コピペすんな。リンク切れくらいしらべろっつってんでしょう！

リンク切れ。おまえがやんねーから俺がやった！
http://thefool.fc2web.com/
http://d-o-b.ciao.jp/^o^/
http://www006.upp.so-net.ne.jp/Initialz/index.html
http://tr.vis.ne.jp/
http://www.interq.or.jp/orange/nori/
http://www10.plala.or.jp/psychedelic-text/

↓CSSじゃねーじゃん
http://raku-gaki.com/

あと、デザイン的にはどこがいいのかさっぱりってのがたくさん。

おいおい、>>217にはまともなところもあるけど目くらましだぞ？
その中に宣伝を紛れ込ませてるんだよ。
Rock54に登録済みのところもいくつかあるし。
リンク切れとかだけが問題なわけじゃないぞ。

>>208=215
「CSSの仕様と違うブラウザってあったら教えて」という質問は抽象的すぎないのか。
個人サイトの制作なのか、依頼されたサイトの制作なのかなんて、回答者は知らん。
大体、クライアントが要求する対象環境がハッキリしないのがおかしいだろうが。
>>4 の対応状況とか、バグ情報とか、調べれば分ることを威張って質問してんじゃねぇーよ。

なんだよ、宣伝かよ。ばっちい。
ペッペッ！

>>221
？カンに触るいい方だったか？そんなつもりはないが、ごめん。

質問です。
ブロックをフロートさせて横に二つずつ並ぶようにしていて
各ブロックの左にマージンをとっているのですが
IEだと1つ目のブロックに二つ目のマージンもつ
いてしまって間隔があきすぎてしまいます。
　 -------　 -------
　|　　　　　|　|　　　　　|
　|　　　　　|　|　　　　　|
　|　　　　　|　|　　　　　|
　 -------　 -------
　 -------　 -------
　|　　　　　|　|　　　　　|
　|　　　　　|　|　　　　　|
　|　　　　　|　|　　　　　|
　 -------　 -------
↑のように各ブロックの左がわに均等にマージンを設置したい。

IEの場合左のマージンが二重になる。
　　 -------　 -------
　　|　　　　　|　|　　　　　|
　　|　　　　　|　|　　　　　|
　　|　　　　　|　|　　　　　|
　　 -------　 -------
　　 -------　 -------
　　|　　　　　|　|　　　　　|
　　|　　　　　|　|　　　　　|
　　|　　　　　|　|　　　　　|
　　 -------　 -------
　　　　　　　　↑________________________________
　　　　　　　　　　　　　　　　　　　　　　　｜
多分フロートさせて2列にしているのでここのマージンが
一番左に寄ってしまっていると思うのですが解決法はないでしょうか？

>>223=215=208
そもそも「未熟な素人」が依頼なんか安易に受けるなよ。
碌に調べもせず「完璧な答えを出して呉れるのが当り前、
だって俺初心者だもん」っていう態度が反吐が出るんだよ。

それと、クライアントが云々ってのは最初から提示しなさいっての。
必要な情報を提示しなければ望む答えが返って来る訳がないので。

>>224
右にマージンとればいいんじゃ？

>>225
気を鎮めておくれよ。

>>224
とりあえずfloatでの段組は微妙だけど、左の要素の左右にマージンを設定して
後続の回り込みキャラにはマージンを０にしておくと解決するはず。

>>228
固定付けたいみたいだから、この際付けちゃえば?

>>226
それだと一列目のマージンがとれなくなってしまいました。
このページは1つのブロックのテンプレートを使って
複数処理をして書き出しているため右側と左側を別々の記述に
なっていません。今後の仕様変更などからも左右を
別々のテンプレートにしたくないのですが・・・

>>229
コテハンってこと？

>>230
それならmargin-right:10px;でどうだろう？一番左の要素は外枠にpaddingつけたりすればいいでしょ。
テストしたがIE6の互換モードではダイジョブ。標準モードでもいけるけど、互換と標準は微妙なとこが
違うから基本的にレイアウトはガチガチにせず、ある程度の余裕を持たせておくといいよ。

>>230
外枠って親要素のことね。親要素にpaddingあてるくらいならいやじゃないでしょ？

>>224
同じような配列をうちでもやってるけど、
win IE ネスケ OSX Safari IEでちゃんと配列崩れないで見えてるけどね。

>>231
親要素に隙間作るとサイト全体をいじることになってしまいます。｡･ﾟ･(ﾉД`)･ﾟ･｡

>>233
macで作っているのでSafariをふくめ問題なかったのですが
win ieだけこの問題が出てます。

mac IEの兼ね合いはwin IEは難しいですねー。

やば。超絶文法。

mac IEとwin IEとの兼ね合いは難しいですねー。

テーブルの<td>要素同士の間隔を0にしたい(ぴったりくっつけたい)のですが、
以下のようにしても制御できません。どうすればよいでしょうか?

<html>　
<head>
<title></title>
<style TYPE="text/css">
<!--
.tbl {
width: 100%; height: 50px;
background-color: #000000;
padding: 0px; border: 0px; margin: 0px;
}

.tbl tr td {
background-color: #ffffff;
padding: 0px; border: 0px; margin: 0px;
}
-->
</style>
</head>
<body>

<table class="tbl">
<tr><td>AAA</td><td>BBB</td><td>CCC</td></tr>
</table>

</body>
</html>

>>224
左 { width:左幅; float:left; }
右 { margin-left:左幅; }

と同等のことを WinIE で行う場合

左 { width:左幅; float:left; }
右 { margin-left:0; float:left; }

とする必要があります。

>>237
こらぷす。

赤いラインをつくりたくてPの空要素をつかって赤いブロックを作りました。

しかし、空要素は歓迎できないことのようなので、対策を教えてください。
文字を入れたり<HR>を使うのは嫌です。（NNで文字サイズを100%以上にすると変な空間があくからです）

>>237
<table cellspacing="0">

>>239
嫌なら素直に画像に汁。

>>239
んー・・・わっかりました。ありがとうございます。

うお。誤爆。

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

>>239
赤いラインならボダで。

>>234
多分君の作り方が下手なんだと思う。これ以上何かを求めるならソースを晒すべし。

>>224
勘違いしてたらごめん。
http://macspice.spymac.net/test.html
こんな感じのことかな？

>>244　青いのはどーする？

>>247
揚げ足とらないの！

　　はい！

>>249は素敵なﾔｼ

>>238
>>244
>>245
phpで一つのブロックをループさせて書き出しているので
基本的には左右のブロックの記述は今後の仕様変更も楽なように
同じにしたいと思っています。無理ですかね〜

display: none;
を悪用すれば、広告を表示させないようにできるって激しく外出でしょうか？

例えば、infose○kならば、tableタグとimgタグのスタイルシートを
「display: none;」
に設定すれば、広告が表示されないって感じで。

>>251
規約違反、更にスレ違い　

>>251
やったらダメじゃん。
そこまでするなら、金払え。

>>250
可能にする方法は上でもう出てるよ。君が求めてる、最小限の変更で済むものではないかもしれないけどね。
なので今後は、
「俺、何も書きなおしたくないんだよ！だからお前らそれを踏まえた上で俺の為に尽くせよ！」
って言ってくれ。

後は、php側で二つのブロックを交互にループさせれるようなコーディングに変えるのもいいんじゃないか？
まあ、面倒がらずに今のソースを全て書きなおすくらいのやる気があれば何の問題もないかと。

>>251
確か規約違反でもなかった気がする。まあ場所によるからわからないけど、HTMLのソースに入れろと
いうのが規約なので、CSSで消すなという規約はないんじゃないか？

明確にCSSを使って広告を消すのはなし！っていう一文があったら止めておきなさい。
とりあえず鯖官に直球で質問しといで。

>>254
＞ユーザーは、いかなる理由があっても、infoseekに無断で、本ホームページ上の広告バナーを所定の位置から移動させ、または表示させないようにする等の一切の措置をとることができません。
ということらしいです。

そりゃそうだ。

見えないんなら普通に規約違反だよ
ｲﾝﾎﾟｼｸはbodyの上下マージンをマイナスの値にすりゃブラウザの外に出るけど見えないんなら普通に規約違反だよ

>>251は、あからさまにネタだろ（と、信じたい）

で、あえて利用価値があるとすれば、cssで擬似フレームを作成するときに邪魔になる自動広告を消すのには使えるだろうな。
（参考）http://kobit.info/files/frame.html#ad
ただし、ちゃんと手動で広告は入れておくこと。

JavaScriptをOFFにすると見えなくなるようにすれば
一般ピーポーからは見れる状態なのでｳﾏｰ

トップマージン-70
これでバーナーは消える。

うちのガストーチはよく燃えますがなにか？

ユーザースタイルシートってバナー消す為にあるんでしょ？

俺、何も書きなおしたくないんだよ！
だからお前らそれを踏まえた上で俺の為に尽くせよ！









　　　　　　　　　　　　　　　　　　　　　　お願いします。m(__)m

消したらダメだろっ！でもジオは移動はおっけーなんで見える位置に移動させたった。
でもジオの広告はネスケだと出てこないし、firefoxだとエラー。
あれでいいのかジオシティーさん。

>>263
じゃあ俺がソース全部書きなおしてやるから、ソースを晒しなさい。

管理者は、どうやって消しているかどうか判別しているのかね。
すれ違いだけど、
onload で javascript で DOM ツリーからはずしたりしていたら、
表示したログは残るから気付きがたいんじゃないかな。

質問いい？定義リストを3列に段組させたいんだけど
<dl>
<dt>さば</dt><dd>生くさいわけがない</dd>
<dt>カレー</dt><dd>うまいのか？</dd>
<dt>工場長</dt><dd>東京の人</dd>
</dl>
っていうのがあったとして、それを3列にするのにはやっぱfloatではむりだよね？
外枠にdiv style="position:absolute"作ってdivからのposition:absoluteでそれぞれをやるしかないかな？

三列ってのはどーしたいのかおれわかんないけど
三行ならかんたんにでけた。

dt { margin: 0px; float:left;}
dd { list-style: none; margin: 0px;}

さんれつってのは、さば　のよこに　カレーがきて、　そのよこに浅野敦子が来て　コーチ！！ってこと？

list-style: none;のことは忘れて。若気の至り。
何がしたいのかよくわからにゃい。

>>267
>>91から読んでみる事を薦める。

>>268-269
dtとddを一つの組として、その組は立て並び（width:200px)で、後続の組が横にくるって感じ。
説明不足本当にすまん。

組をdivで括ればfloatでもいけるけどそれって邪道だし、でも括らないとおかしな回り込みになっちゅう。

一応今は外側にdiv一個つけてそのdivからの距離を図って
position:absolute;
top:hoge;
left:hoge;
にしてる。あんまりposition:absoluteが好きじゃないからできればfloatがいいかなって思ってる。
無理ぽだけどね；

>287

>91-99

とりあえず part.24で答えた時には
<style type="text/css">
dt, dd { height: 20px; }
dt { float: left; width: 100px; border: solid 1px blue; }
dd { float: left; width: 100px; border: solid 1px green; margin-top: 22px; margin-left: -102px;}
</style>
</head>

<body>

<dl>
<dt>Q1</dt><dd>A1</dd>
<dt>Q2</dt><dd>A2</dd>
<dt>Q3</dt><dd>A3</dd>
</dl>

</body>
</html>

と書いたが >99 にあるようにリンクがクリックできなくなるなどの副作用がある（らしい）
と書いているうちに >270 さんが答えてくれているな

>>270
おぅ；
思いっきり同じ話を少し前にしてたのね；
でも結局結論なしか。俺的にはレイアウトの為にそれぞれ別のdlにするなんてことは
ありえないからなぁ。

まあとりあえずfloatでは無理ということでスレ汚しごめんよ

>>272
親切にありがとう！
でも要素のheightを指定するとN7ではブラウザ側で文字を大きくした時に要素が、自動で
大きくならずに、中身だけ暴走して、他の文字と重なっちゃうからheight指定はしないようにしてるよ。

っていうかそこらへんが、文字サイズ固定が多い所以だよね。俺は文字サイズ固定は絶対にしないけど、
する人に同情はしちゃうね。

なんか267のキャラう（ｒｙ

ジオシティーズで変なスクリプトをソースの頭に入れられると
レイアウトがグっちゃんこになるんですけどー、これは何が問題なんですか？
一部のmarginとかtext-alignとかぶっ壊れるんですけど。

その前にお前の頭に変なスクリプト記述されてるんじゃねーのか、とかいうつっこみは無しで。

>>276
その変なスクリプトが原因。

ちくしょー！！それはわかってるんだよー！

悲しいときー

ウンコするー。

ul {
border : 1px solid blue; }
li {
float : left;
width : 3em;
border : 1px solid green; }
div {
clear : left;
border : 1px solid red; }

<ul>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
</ul>

<div>HOGE</div>

こうすると、IE、Operaではulの枠の中にliが収まってるんだけど、
Mozillaだと、ulの枠が横線だけ表示され、
liがはみ出している状態になってしまってるんですよ。
どうすればIEみたいにulの中に収まるように表示できるんでしょう？

>>281
>>6のA4

>>282
これのことだったのかー！
∧||∧

∧||∧
このマークは何？

ヽ○ﾉ
∧||∧

>>285
しりもちついてるの？

M字開脚でしょ。

>>287
で、なんで>>283はM字開脚してるの？
なんかイマイチ理解できない。

ttp://w3j.org/articles/cssready/./styles/cssready.css

このW3Jのページなんだけど、勉強がてらソース見てたらどうしても分からないところが
出てきた。たとえば

<h1 id="w3jorg">
<h3 id="cssready">

が使われてるけど、css見ても w3jorg や cssready という id は定義されてない。
どこで定義されてるのか？

ｽﾏｿ。URL間違った。正しくは↓

ttp://w3j.org/articles/cssready/

>>289
id属性はCSSのためだけにあるのではない。

>>291
あ、そうかそうか。勘違いしてたわ。
けど、h1の定義で背景画像貼るのはなんだかな〜と思うのはおれだけ？

ttp://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
404なんだけど、消えちゃったのかな。

>>285はｶﾏｷﾘ

>>293
ＦＡＱのＡ３（>>6）だね。
http://web.archive.org/web/20030604111750/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm

>>292
> けど、h1の定義で背景画像貼るのはなんだかな〜と思うのはおれだけ？
意味がわからん。

未だに段組レイアウトで悩んでる奴らの気が知れない

>>297
ここは見下し厨の遊び場じゃありません。

>>297
自分ができること、でそういう言い方をしてると、できないことでそう言われてしまう人生を送るよ。
手がかりが見付かるまでは、けっこうてこずったりもするもんさ。

あと、段組で困ってる人なんてかなり少数だと思うんだけど。

300

マックでもウィンドウズでも崩れないレイアウトにするには
どーしたらいいんでしょうか。

>>301
使わない

つまり、テーブルレイアウトにしれってことですか？

>>301
そんな漠然とした質問に、どう答えろと。

じゃぁ、質問変えます。
マックでどれくらいレイアウトがずれてるかってのをただでキャプチャ画像でみせてくれる
親切なマカーの所在地を知っている方いませんか？

>>305
組んだサイト丸々キャプってレイアウト比較って所は知らないが
部分的なソースなどでの比較をやってるサイトは結構あるよ。

なるほど。ありがとうござます。

すいません行き詰まったので質問させていただきます。
javaとスタイルシートを使ってページのフェードインをするためのソースがあったので
そのタグをそのままコピー、貼り付けて一応成功したんです。
でも画像がどうしても中央に寄らないんです。
その画像は、一部にリンクを指定しているのですが、そのような場合って
無理なのでしょうか？初心者ですがお願いします！

もちろんcenterタグも使ってみましたがダメでした・・。

スタイルシートに左寄せ指定があるんだろ？
text-align: left とか
margin: 0 とかがないか。
あったらさっくり消す。
なかったらスタイルシートのソースをここに張る。

すいません、スタイルシートじゃなくてjavaでした・・・。
スレ違いでしょうか？

ジャバでもなんでもブロックごと真中に寄せればいいだろ。
どういう状態なのかわからないんで問題のソース配布元のリンク張ったら？

ttp://www.salty1.com/homepage-2/lesson86.html
ここのページのソースをコピーしたんですけど、見本の画像みたいに
中央に寄らずに左寄りになってしまいます。

<IMG SRC="10.jpg" onLoad="tID = setInterval('Fadein()',100);" ALT="トップ画像" border="0" usemap="#top">
<map name="top">
<area shape="rect" coords="200,180,250,208" href="frame.htm">

こんな風に画像の一部にリンクを指定しているのですが、どうやっても
中央に寄らないんです。スペース入れて右に寄せるしかないんでしょうか・・・？

>>313
おそらく　width: 100%　がよくない。
幅が100パーなら中央に揃えたって全幅に変わりないから。
これをさっくり消して<center>してみてくれ。

悪い。間違えた。
>>314　それなら中央に寄るはずだが。
必要なのはfilterだけなんで、position:absolute;を消してみる

一つのdivの中にfloatとclearがあってもいいのでしょうか？
どちらも同じに表示されますが、どちらがベターですか？宜しくお願いします。

h2 {clear:left;}
img {float:left;}

<div>
<h2></h2>
<img>
こんにちはこんにちはこんにちは
こんにちはこんにちはこんにちは
</div>

<h2></h2>
<div>
<img>
こんにちはこんにちはこんにちは
こんにちはこんにちはこんにちは
</div>

>>315さん
ありがとうございます！！完璧に中央に寄りました！
本当に感謝いたします！実はこれがわからなくて何時間も苦戦してたんですｗ

>>315
お前ってやつは・・・ｗ

>>317
もうすこしマクアプを勉強しれ

>>318はネタか？<canter>で喜ぶなんて・・・・
っていうかそれスレ違いになっちまうじゃねえか

>>321
<canter> で囲むと「ゆるい駆け足で進む」のかな。
これはきっと <marquee> の亜種だね。たのしいな。
多分、話題の三菱ふそう製トラックに化けるんだね。
わーい見事な、欠陥自動車タグだー。ヽ(´ー`)ﾉ

>>321
元ネタのソースがぐちゃぐちゃの出鱈目なんだから
canterでいいんじゃないか？

>>315
スレ違いｗｗ

canterって何だよcanterって。

初心者にはcenterでおｋ
簡単だし

×center
◎canter

<cancer></cancer>

マジでお勧め。

>>326
ここはCSSスレッドです。初心者スレッドは別にあります。

俺は知らんぞ、俺は。

うけたw

<cantama></cantama>

>>315
>>321

ﾏｼﾞﾎﾞｹｻﾌﾞｲ

>>332　　行け！！！
http://pc5.2ch.net/test/read.cgi/hp/1086686223/l50

こんなのもある
http://3.141592653589793238462643383279502884197169399375105820974944592.jp/
※重いので注意

誤爆orz

>305
> マックでどれくらいレイアウトがずれてるかってのをただでキャプチャ画像でみせてくれる

遅くなってすまん。
ttp://www.danvine.com/icapture/

晒されるからテキストは○とかあいうえおとかにしとけよ

classで指定しているのですが、
2つのリンクの文字(bdy1・bdy2)のオンマウス時に、別々の色に変えたい時はどうしたらいいのでしょう?

A:hover { color: #FF0000; } を使うのだと思うのですが、どう組み込んでいいのかがわかりません。。

<style type="text/css"><!--
.bdy1 { color: #fff; font-weight: bold; font-size: 12px; line-height: 14px; text-decoration: none }
.bdy2 { color: #100; font-weight: bold; font-size: 12px; line-height: 14px; text-decoration: none }-->
</style>
これに組み込みたいのですが、、

>>339
その質問はあちらこちらで頻出してウンザリするね。
セレクタ構文を知っていれば悩むことないんだけど、
まともに教えていない資料を読んでいるんだろうね。

・クラスセレクタに直接:hoverを取り付ける。(例: a.bdy1:hover {})
・特定のclass属性値をもつ要素の子孫に:hover。（例：.bdy1 a:hover {}）

そもそも同一文書内で異なるリンクスタイルというのは
利用者に混乱をもたらす要因になり得るのだけど、
そういうユーザビリティ云々とか考えたことあるのかな。

>>340
リンクしたいんじゃなく装飾したいだけだろう。
CSSをつかってjava scriptのonmouseover風のをやりたいときに使う。
background-imageを変えることもできるから、プチ動的風にできる。

リンクだとしても、混乱は起きない。カーソルでわかる。みんなそれほどバカじゃない。


>>340が言ってるとおりだが、
A のhref=""を指定しないとうまく機能しない。　#noneとか適当にいれとけ。

あのー、オペラってmacとwindowsあるじゃないですか。
IEみたく、macとwindowsでCSSの解釈がぜんぜん違っちゃうってこと
あります？

聞いたこと無いから無いんじゃない？
OperaがIEと同じ道を歩むとは思えないし

HTMLもCSSもValidに書いて、有名な実装不備ブラウザだけCSS切っとけばいいよ。

あまり「万人に最高のものを」とか思わないほうが良い。効率悪いし、建設的でなくなってしまう。

個人サイトは気楽でいいですね。

たとえ Opera で CSS の不具合が起きても
簡単に制作者スタイルを無効にできるから問題ない。
ただし、論理マークアップが施されている場合の話。

>>345
漏れもそうだが、商業web制作でもNN4の様なレガシーブラウザについて、
ちゃんとクラに説明・説得するのも仕事のウチ。

商用はtable
まぁtableレイアウトは作る側から無くして行かないと永遠に無くならないと思うな・・・

あー、目が覚めたら世界中のNN4が消滅していますように☆

微々たるシェアの糞に異様なこだわりを持つクライアントが馬鹿。
クライアントが知恵をつけたら多くのウェブ制作会社が潰れそう。

>>347
同意。
そう言えば、今月だか先月号だかのWebDesignでも似たような話題が載っていたな。

>>343
ありがとうございました。
とりあえずwindowsのオペラで作っときました。
macでちゃんと表現されるかはわかんないですけど
多分大丈夫でしょう。

>>347
っていうか、Strictとテーブルレイアウトのそれぞれのメリット、デメリットを初めに話す。
そんで選んでもらってるよ俺は。ちなみに料金も場合によっては差が出る。

更新を頻繁にするとこで、その更新まで俺に頼む場合はStrictの方が安い。
プログラマでもある俺的には、再利用できないソースは気が萎えるんだよね。
だからテーブルレイアウトなんて面倒な作業はしたくない。

まあ正直音声ブラウザよりもNN4なんかを重視するなんてのはアホらしと思うがね。
音声使う人はそれしか使えないのに比べて視覚系ブラウザは好きなのに変えられるんだからさ。
NN4を気にする企業って一体どういう姿勢なのよって話だな。

脱線してしまった。それでは次の質問どぞ

webで食ってる人間なのにテーブルレイアウトでも音声ブラウザ対策
できること知らないってのは相当痛いな。

米 議論は他所で

>>353
レベル低いな。その上の次元でみんな話してたんだけど。

「卓球やってる人間なのにしゃもじでもスピン対策
できること知らないってのは相当痛いな。」

わざわざ無理してやらなくてもラケット使えよ、って思う。

これから面白いたとえで20レスほど使います

>>357
釣れた！

>>357
テーブルレイアウタは気のきいた例えなんてできないから続くことはないよ。

まあ>>352はいわゆる自称(ry

>>357
英語と数学の勉強を両立させるという受験生が
数学の参考書を広げていたとき・・・
「さあこの学習体勢のどこに英単語帳が広げられているのか
　楽しみになってきました！」

>>361
申し訳ないが、>>356の勝ち。

いいか、ハルルララには竹裕が乗っても勝てなかっただろ、つまりそういうことなんだよ

StrictなHTMLは音声ブラウザ重視のためだけじゃないんだけどな。
あくまで結果であって。しかもテーブルでも音声ブラウザ対策は十分できるし。

まずはテーブルレイアウトで音声ブラウザでちゃんと理解できるサイトを晒してよ。
聞きにいくから。

わかってるだろうけど、Strictなメリットはオンセイブラだけじゃないよ。
テーブルのメリットは視覚系UAのみに対する見栄えの安定性だけだろ？

議論は他所で

線形化されたテーブルレイアウトなら問題ないことも知らないプロねえ…w
まあ近い将来テーブルレイアウトなんて無くなるだろうから知らなくてもいいのかもね。

議論は他所で

>>367
杓文字にラバーつける方法など、知る必要がない、ってことだよ。
知識として知ってるけれど、使う気にはならんな。

>>367
もしかしてプロはJSを空で書ける、とかそんな妄想してない？
プロってのは与えられた仕事をこなしてペイをもらえたらそれでいいんだよ。
知ってる知らないなんてどうだっていいのよね。

最近の蔵は「これからのスタンダード」とか言うと結構納得してくれたりするしね。
「画像が少ない」とかいう不満は未だに出るけど。

>>367
マジで言ってるのそれ？Validに書いてあるのと線形テーブルレイアウトと同じだと思ってるの？

それにSEOでは圧倒的にvalidの方がいい。それを言うと納得する客は多い。大企業はそうでもないけど。

とりあえず俺はスレ違いまっしぐらだ。申し訳ない。質問どうぞ↓

なんか恥ずかしい人があますね。

喧嘩と意地の張り合いも他所で

テンプレ嫁系以外の質問はたまーにしか来ないから、
議論して待つのも一興かと思いますが、いかがか。

あと、テーブルレイアウトに中途半端にcssが混ざっているのが
イチバンめんどくさい。

※　議論はよそで　※

Shift_JISで書いたCSSファイルの文字コードをUTF-8に変更したいのですが、
ez-HTMLなどのツールでコードを変更して上書きしても、
いったん閉じて開きなおすとShift_JISのままです。
1から書き直すしかないのでしょうか？
（ほかのツールでもやってみたものの、結果は同じでした）
OSはMeです。

>>372
慌てて「あますね」とか書く人のことかなぁ。

>>376
ファイルの中身が全部英数字だけで書かれていたら
文字コード判定なんて出来ないし意味が無いから（大抵のWinアプリは）SJISとして開く。
2バイト文字をどこにも使っていないんじゃないのか、それは。

>>376
>>378のいうようにUTF-8特有の文字をファイルの頭にコメントとして入れておくとよい。
何の文字ならうまくいくかは自分で。
eucとかは「京」って文字でいける。utfは知らないからごめんね。

とりあえずお前はスレタイ読めボケェ！

おせーよ！

>378-379　どうもありがとうございます。
日本語が使われていなかったので、日本語を入れてみたら解決しました。
CSSだけでなくJavaScriptの編集もしていたのですが、
CSSだけは文字コードが変換できず、
CSS固有の問題なのだろうかと思って書きました。
（編集中のJavaScriptは、すでに日本語が入っていました）

Firefoxでは、CSSの文字コードがUTF-8でなければ
認識してくれないものですから…。

>>381
＞Firefoxでは、CSSの文字コードがUTF-8でなければ
＞認識してくれないものですから…。

おーい＾＾；
勝手なこと書くな

>381
英数だけでもちゃんとUTF-8と認識するテキストエディタもあるけどな

>>381
>Firefoxでは、CSSの文字コードがUTF-8でなければ
>認識してくれないものですから…。

俺はHTMLもCSSもPERLも手打ちだから良くは知らんが、とりあえずおまいは文字コードに対しての
解釈がかなり間違っているな。

何故日本語を入れないとUTF-8で開けないのかを考えれ。っていうかとりあえず文字コードってのなんなのか
勉強しれ。何をやるにも必要な知識だ。ガンガレ！

charset属性や@charset規則を知らないのかよ… (´-`).｡ｏO
本来はHTTPヘッダのcharsetパラメータで設定すべきだけどさ。

>>383
そりゃBOMついてるんだろ。

BOMってなーに？

Byte Order Mark

>382　Firefoxスレだったかどこかに書いてあったような気がするのですが、
気のせいだったのかもしれません。
ただ、Shift_JISで書いたCSSを実際に置いてFirefoxを起動しても
認識してくれないようです。

>385　@charset "UTF-8";
CSSの最初できちんと記述していますが、
英数字だけではShift_JISとして認識されるようです。
保存するときはBOMなしです。

文字コードについてはざっと勉強してつもりでしたが、
まだ勉強が足りないのでしょうか。もっと調べてみます。
どうもありがとうございました。

マジレスすると、
英数字だけなら、Shift_JISもUTF-8もEUC-JPも全く同じバイト列になる。区別できない。

>>389
自分はFirefox使ってるが、Shift_JISで書いたCSSでもちゃんと認識してくれる。

firefox入れてないから確認できないけどhtmlとcssはおなじ文字コードじゃないとダメってマジ？

某所の日記より

HTML文書のエンコーディングをUTF-8にしてから、Firefoxだけ日本語テキスト
にヒラギノが適用されてなかった。CSSのテンプレートもUTF-8にしたら、ちゃんと
ヒラギノが適用されました。中身は一切変更してません。
Firefoxの場合HTMLとCSSは同じエンコーディングじゃないと、ってことだね。

>>392
んなこと無いよ。
そのサイト、ヘッダでも@charsetでも文字コード指定してないじゃん。
ttp://homepage.mac.com/maedaichiro/iblog/styles-site.css

UTF-8じゃないと認識出来ないのはユーザースタイルシートだった筈。
うろおぼえなんで違ったらすまん。

お前ら中と半端な知識でごちゃごちゃ言うな

MAC OS9でAdobe PageMill 3.0Jを使ってHPを作成している者です。
スタイルシートに関してはまったくの初心者です。
行間と文字間隔を変えるため
<style type="text/css">
<!--
A:link { color:#000000 ; text-decoration:underline ; }
A:visited { color:#828282 ; text-decoration:none ; }
A:active { color:#FFFFFF ; text-decoration:none ; }
A:hover { color:#FFCC00 ; text-decoration:none ; }
BODY { line-height: 18px ; letter-spacing:1px ; }
-->
</style>
と記述したんです。
MACではちゃんと表示されるのですが、WINだとなぜか
改行<BR>が少し消えてしまいます。
３行間を開けたはずなのに間がなくなってくっついてたり、
７行間を開けたはずなのに３行間くらいにしかなってなかったり、
でも
BODY { line-height: 18px ; letter-spacing:1px ; }
を消すと元に戻ってます。
行が消えずに行間と文字間を変えることはできないのでしょうか。
どなたかよろしくお願いします。

<p>はお嫌いか？

初めは<P>だったんですけど
<P>だと<BR>しか使ってない場所が変更されないので<BODY>にしちゃいました。

全称セレクタについて質問。

全称セレクタはNN4、IE3は対応してない事と、
*{
font-size:inherit;
display:none;
}
などをするとバグがでるブラウザがあるのは調べましたが、他に注意点はありますか？

一応
*{
font-weight:normal;
font-size:100%;
font-style:normal;
margin:0;
padding:0;
}
をcssファイルの冒頭で指定しようと思っています。↑の設定で問題があるブラウザが合ったら
教えて下さい。（全称セレクタが効かないN4,IE3ではCSSを読ませないです。）

>>396
ＯＳだけでなくブラウザ名・ヴァージョンを出して。
できれば問題のHTMLソースも。

>>396
IEのバグ。改行が一行飛ばしになってしまう。
br{letter-spacing:normal;}
を追加で解決。結構有名なので「letter-spacing 改行」で検索すれば見付かる。

>>401
br の使い方を教えてあげた方が良いかと思うが、いかがか。

letter-spacingを指定した要素内で連続したbr要素が無視される(IE5)
http://cssbug.at.infoseek.co.jp/detail/winie/b022.html

ＣＳＳ使ってるのに、brを連続打ちするなんて、恥だぜ。

まぁCSSの使い方がわかりませんって公言してるようなもんだからな

せめて<p>連続使用だよな？

……margin !

p=BRBR

ﾍﾟﾆｽ＝ババー　じゃないよね？

<br>よか<p>を使いまくった方が良いのですか？

>>410
まにうけないの！

ごめんなさい！！（ >_<)

みんなmarginマージンと声高に叫んでいるが、
おれはむしろpaddingで攻めるぜ。

私はborderにします。

あっしはババーは嫌いだ。

そこで<img src="./images/1x1.gif" width="1" height="50" border="0" alt="">ですよ。

ハゲワラ

　　　　　　r;ｧ'N;:::::::::::::,ｨ／　　　　　 >::::::::::ヽ
.　　　 　 〃　　ヽﾙ1'´　　　 　 　 ∠:::::::::::::::::i
　　 　 　 i′　　___,　-　,. = -一　 ￣ｌ:::::::::::::::ｌ
.　　　　　 ! , -＝=､´r'　　　　　　　 　 l::::::/,ﾆ.ヽ　　　　　>>400-417
　　　　　　ｌ　　　　　　　　_,, -‐''二ゝ　 ｌ::::l fﾞヽ |、 ここはお前の日記帳じゃねえんだ
　　　 　 　 ﾚー-- ､ヽヾﾆ-ｧ,ﾆ;＝、_　　 !:::l ） } ト
　　　　　　 ヾ¨'７"ry､｀ 　 ｰﾞ='ニ,,,｀　 　 }::ヽ(ノ 　メモ帳にでも書いてろ
:ｰゝヽ､ 　 　 !´ "￣ 'l,;;;;,,,.、　　　　　　　,i:::::::ﾐ
::::::::::::::::ヽ.-‐ ﾄ、　r'_{　　 __)｀ニゝ、　 ,,iﾘ::::::::ﾐ 　　　
::::::::::::::::::::Vi／l:::V'´;ｯ`ﾆ´ｰ-ｯ-,､:::::`"::::::::::::::;ﾞ　, 　な！
:::::::::::::::::::::::::N. ﾞ､::::ヾ,.｀二ﾆ´∠,,.i::::::::::::::::::::/／／
:::::::::::::::::::::::::::::l　ヽ;:::::::::::::::::::::::::::::::::::::::::::／　／
::::::::::::::::::::::::::::::!　:|.＼;::::::::::::::::::::::::::::::／　／

↑どう見てもお前の方が無意味（どうせAAｺﾋﾟﾍﾟしたかっただけだろうが

他の質問スレに誤爆してしまいました。
<SPAN onmouseover="this.style.background='〜';"
onmouseout="this.style.background='〜';">

</SPAN>

のように文字の背景色をマウスオーバーで変える時、クラスセレクタで

.class {}

と記述する時{}内はどう書けばいいのでしょうか。

>>420
>>4

>>421
全部見ました

6分間か

おかげさまで無事解決しました。
レスしてくださったみなさんどうもありがとうございました。

>>420
詳しいことはわからないけど
span.hoge{background : blue;}
span.hoge:hover{background : red;}
でできた気がする。

>>423
6分間って420から422の書き込みの間に言われて見てきたと思ってんの？
質問しておいてなんだけどバカでしょ君。

>>425
ありがとうございます。
やってみましたけど上手く行きませんでした。
.hogeがクラスになるんですよね？

>>426
SPANの変わりにAタグ使ってやってみ。 href=""で。

>>426
お前誰?

>>428
俺は俺、つまりお前だ。

>>427
Aタグを使ってのやり方は知ってます。
リンクの繋いでない文章、なおかつ毎回<SPAN></SPAN>を使わずに
クラスセレクタでやりたいんですが、わかりますでしょうか。

<SPAN></SPAN>　<p> の替わりに使ってるのかい？

普通に出来るだろうに・・
.hage {
background-color:#******;
}

違うんだったらちゃんと説明しろよ・

いえ、そういうわけではないです、別に<P>でもいいんですけど
とにかく個別のタグにスタイルをかけるのではなく
外部CSSやヘッダーからかけられるようにクラスでかけたいんです。

で、頭になんかつけるんよ。

>別に<P>でもいいんですけど

p.hage {
background-color:#******;
}

>>432
それをそのままやってみたら
普通に最初から文字の背景色が適用されるだけで
マウスオーバーは関係なくなってしまうんですが･･･？

最近ここ見るたびに思うんだ。
「リアップ買ってこなくっちゃ」ってな。

ジダンですか?

.hage { background-color:#******; }
.hoge:hover{ background-color:#******; }

Aタグじゃねーとできないんじゃない？
Aでクラス指定すりゃいいだけじゃん。
文字色とカーソルが変わらないようにしとけば問題なくない？
Aは本来そういう使い方じゃない！ってこだわりがあるんかな。
それなら君の意思を尊重するが。

それがいやならjavascript使えばいいだけじゃん。CSSじゃないとダメってこだわりがあんの？

うぉ、コピペしてたからミスった。
.hoge { background-color:#******; }
.hoge:hover{ background-color:#******; } /*マウスで背景色が変わる*/

変わらねーな

うん、変わらないね。

誰が誰だかわかんないが>>420?
IEがhref属性のついたA要素以外に対応してないだけdaro

>>444
うへ、そうなんですか。
基本的なこと見落としてたみたいですね。
ありがとうございました。

ソースを全くいじれない人が管理するサイトを作っていまして
ソースを用意してコピペしてもらうことすらこころもとないんですよ。
だから出来る限り簡単な操作で更新できるようにするために
製作ソフト上でCSSのクラスセレクタのチェックボックスに
チェックを入れるだけで適応させるようにしたかったんです。
だからCSSじゃなきゃダメというわけではないんですけどね。

a要素以外に :hover が効かないのはWinIEが腐ってるだけ
Mozとかではちゃんと効く

似たようなもんふたりで作ってるのね。

>>446
そんなんブラウザの特性だろうがよー！腐ってるよばわりすんな！

>>447
出来ない君も似たようなもんだよね。
俺もできねー。すまん。

リンクでもないのにhoverで反応するとは、いかに。
あ、DHTML的なJavaScriptのスイッチになっているとか？

>>448
そんなこと言ったら、

鏡でスカートの中のぞいちゃうのも、
欠陥隠し続けて消費者に迷惑かけちゃうのも、
10年サイクルで適当に戦争しかけちゃうのも、

みんな特性、でかたづいちゃうじゃん。
仕様が決まっているのにそのように出来ていないのは、MSIE だけじゃないけど
腐っていると言われても仕方がない欠点だと思うよ。

つーかリンクでもないのにマウセオバーで反応されても困る

>>450
hoverはアンカーに限るわけではないぞ。
仕様書読みなね。

つーか、今FireFox0.9で試してみたらhover効かなかったんだけど、なぜ？
Mozilla1.6もダメ。
ネスケ7とOperaは平気。

FireFox0.8　ok

>>399
おそレスっぽいけど。
全称セレクタに、空の内容追加がある場合、つまり
* { content:""; }　
とか変な記述をすると、Operaで真っ白（何も表示されない）になってしまう、
という不具合が発生。

まー、そんなことやらないとは思いますが一応。

<br>ではなく<p>〜</p>で一段落を表した文章を
上の段落から１行開けないようにしたいので
色々調べてvertical-alignやline-heightを試したのですがどうも違うようで。
正しい方法をご教授して頂けないでしょうか。

いろいろググッたけどうまく見つからないです。
例えば極端な例ですが
<body><div id="manko"><ul><li id="unko"><p>
という階層構造の中の<p>にスタイル指定をしたい場合、

div#manko ul li#unko pで指定するのがよいのでしょうか？
それともli#unko pで指定するのがよいのでしょうか？
または、階層をすっ飛ばしてdiv#manko pでも一応はうまく行くみたいですが
どれが一番正しいのでしょうか？

>456
margin padding

>457
セレクタを調べてみるといい。
君が使っているのは「子孫セレクタ」
他にも種類がある。
# WinIEはまともに対応してないがな

>>458
あぁなるほど。ブロックレベル要素ということを忘れてました。
ありがとうございました。

>457
id重ねるのはナンセンスだから#manko pがイイと思う。

ナンセンスなのか？

#man p

>>461
全然。

>>458
あ。>とかで直接の子供を指定するのもありましたね。
たしかに難ありらしいですね。
先ほど出した例はあくまで極端な例でして。

要するに、idだったらその書類内で一カ所だけであるわけだし、
さらにクラスを使ったりして、
長い条件（親　子　孫）みたいに記述すればさらに適用先を絞り込める、
こんな考え方でよいのでしょうか？

>>458
普通に子孫セレクタ使う分には、そんなに遜色ないよ。
> とか + とか使うとトホホな事になるけど。

先祖に id や class で名前付けておけば、子孫の方は
そんなにボコスコ class 名量産しなくても済むよね。

すいませんが久々に詰まったのでご教授お願いします。
次のようにtableにcaptionを指定します。
<table summaru="hoge">
<caption>hogeの表</caption>
<tr><th>hoge</th><th>ほげ</th></tr>
<tr><td>piyo</td><td>ぴよ</td></tr>
</table>
そしてCSSを以下のように指定しました。
table {
margin:0 auto;
}
caption {
text-align:center; font-weight:bold;
}
するとFireFox0.9.1(Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040614 Firefox/0.9)では
キャプションがセンタリングされませんでした。
IEではテーブルに付随してセンタリングされました。

これは単に記述が間違っているだけでしょうか？

>>465
なるほど。なんだか、ここのとこ、ずっとそれで悩んでたんですよ。
html的にはあんまりよくない事かもしれませんが
複数のブロック要素を、さらに上位である意味をもったエリアとしてdivで囲んで
idでもつけておくと、かなり絞り込んでスタイルを割り当てる事が出来ますね。

そのかわり、パス？の記述はかなりややこしくなるけど。
これまた、極端ですが
div#iremono div.manko table tr td em
なんてやれば、入れ物divのなかのまんこdivで囲ったテーブルのなかのセルの中のemだけを赤い文字にするとか出来ちゃうんですね。
こうすれば他にも、まんこdivで囲ったテーブルのなかのセルの中にemが出てきても一番上位が入れ物divじゃないかぎり適用されないみたいですね。

こんな使い方でいいんだろうか？

>>467
まことに言いにくいんだが・・せめてhageやpage位にしてもらえないだろうか。
あまり連呼されるとすごく複雑な気分になる。

言いにくいとか気を使う必要ないだろ。意味もなく低俗な言葉使いまくってんじゃねーよ、気持ち悪い

すいません、自己解決しました。
captionはインライン要素ですがブロック要素的に(？)センタリングする
必要があったようです。
caption { margin:0 auto; }
これで正しいのかどうかはわかりませんが目的の表示は達成できました。

>>468
万個ーww

>>468
すんません、下品でした。
html的に正しいかは別にして子孫セレクタの使い方として
div#area div.hako table tr td em
等として、上位のdivに違うidもしくはクラスを割り当てる、または
割り当てない事によって、同じ階層構造下であるところの
div#other div.hako table tr td emのemを区別してちがう表現をcssで
適用する、このような使い方は正しいでしょうか？

>>472
確かにそれでも適用されるだろうけど、その場合であれば
#area em
#other em
の指定だけで事足りるはず。
あまり細かく指定しすぎるくらいなら、それぞれの要素に直で指定したほうがいい、なんてことにもなり得る。
せっかくまとめて書くのだから、てきるだけ効率的に、スマートにしたほうがいいと思う。

>>473
なるほど、でも無難に単純な子孫セレクタの使い方だと単純に下位の要素すべてに適用されてしまいますよね？
例えば
div#area div.hako table tr td em
div#other div.hako table tr td em
両者でdiv.hakoの子要素としてemが入っていたらそこにも適用されてしまいます。
まぁ、emをそんなに使い分けてどうする？とかそういう話は
おいといて、出来るだけ深い階層でhtmlソースに細かい事書きたくない、なんて場合はこういうのもありってことですよね？

>>474
間違っているわけじゃないと思うから、アリなのかな。

>>466=470
ソース文書上ではcaption要素はtable要素に含まれているが、
上下に配置されるキャプションは表要素に先行・後行する
ブロックレベル要素であるかのように整形されるのが正しい。

つまり、表要素への margin が caption に影響するのは M$IE が不正。
これは水平マージンだけでなく垂直マージンでも同様の不具合がある。

質問する前に仕様書なりリファレンスなりで調べろと(ryo...

>>472
わざわざ複雑で難しくする必要ないじゃん？

>出来るだけ深い階層でhtmlソースに細かい事書きたくない
設計に問題有りそうだよ。

classやらidの命名・割り当て規則ってのは個人個人で分かれるねぇ
まぁ個人で規則を持つってのは後々のメンテナンスや生産性を考えると良いことだと思う
だから正しいの？アリなの？ってよりは間違ってないなら常に規則に従うってことの方が大事かなと

Strictはスレ違い

全然strictじゃないし。

またまたすみません。教えてもらったものを（indexページに）記入したらできてたんですが
他のページ（aboutなど）に同じく記入したところ改行はできてるのに今度は行間と文字間が元に戻ってました。
同じのをコピーしたのにできないということはありえるんでしょうか。

両方のページをよ〜〜く見る。

>396
BODY { line-height: 18px ; letter-spacing:1px ; }
↑ちゃんとコピーしたか？

line-height: 18px
なんてことがそもそも平気なのに、細かいこと気にしない気にしない。

というか、何が問題だったかを全然理解できてない予感。

>>474
おまいはCSSファイルを一体いくつつくるつもりだ？
基本的には一つのファイルで全てのページのCSSを管理するのが良い。

だからおまいの今の指定ではムダな重複が出てくる。
できるだけ、共有クラスとページ特有クラスをわけていくと良い。

まあ手入れのしやすさもCSSレイアウトの利点なので、そこらへん潰さないようにガンガレ！

＞基本的には一つのファイルで全てのページのCSSを管理するのが良い。

（ ´,_ゝ｀）ﾌﾞｯ
あんま自分の信条他人に押し付けないほうがいいよ

現在、テーブルレイアウトで枠の中に画像と説明文を表示しています
【現在のソース】
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td bgcolor="#000000">
 <table border="0" cellpadding="0" cellspacing="1" width="100%"><tr><td bgcolor="#ffffff">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
   <tr>
    <td bgcolor="#ffffff" align="left" valign="top" width="40px">
     <img src="giko.gif" width="30px" height="30px">
    </td>
    <td bgcolor="#ffffff">
     男らしく暴言を吐く、人に媚びない、小憎らしく愛らしい猫。<br>
     口癖は「逝ってよし！」「ｺﾞﾙｧ！」「ｷﾞｺﾊﾊﾊ」「はにゃ〜ん」(鳴き声)<br>
     一人称は「俺」<br>
    </td>
   </tr>
  </table>
 </td></tr></table>
</td></tr></table>

これを、テーブルレイアウトをやめて、CSSで実現しようと思っていますが、下記のやり方では
imgやspanが、pのブロックからはみ出してしまい、枠の中に表示されません
（WinIE6、N7.1、Opera7.23ともpの高さが 0 になります）
【試してみたソース】
<p style="border:1px solid #000000;">
 <img src="giko.gif" style="float:left; width:30px; height:30px; margin:0 10px 0 0;">
 <span style="float:left;">
  男らしく暴言を吐く、人に媚びない、小憎らしく愛らしい猫。<br>
  口癖は「逝ってよし！」「ｺﾞﾙｧ！」「ｷﾞｺﾊﾊﾊ」「はにゃ〜ん」(鳴き声)<br>
  一人称は「俺」<br>
</span>
</p>

spanをなくせば枠の中に表示されますが、画像の高さより説明文が長くなると、その行は画像の下から
始まってしまいうまくありません

　┌─┐説明文
　│画│説明文
　└─┘説明文
　　　　　　説明文
としたいのに、
　┌─┐説明文
　│画│説明文
　└─┘説明文
　説明文
となってしまう

なぜ、img や span は p の中におさまらないのでしょうか？
なお、p を div に変えても同様の表示になります
また、そもそも画像の右に説明文をまわりこませる方法として、【試してみたソース】のようなやりかたは
はげしく的外れなのでしょうか？

例のページです。よかったら見てみてください。
同じようにやったはずなんですが･･･

ちゃんとできているindex
ttp://macaroning.hp.infoseek.co.jp/index.html

元に戻ってしまうabout
ttp://macaroning.hp.infoseek.co.jp/about.html

>>490
aboutの方に

<style type="text/css">
<!--
A:link { color:#000000 ; text-decoration:underline ; }
A:visited { color:#828282 ; text-decoration:none ; }
A:active { color:#FFFFFF ; text-decoration:none ; }
A:hover { color:#FFCC00 ; text-decoration:none ; }
BODY { line-height: 18px ; letter-spacing:1px ; }
BR { letter-spacing:0 ; }
-->
</style>

これ入ってない気がするんだけど。
つーかせっかくCSS勉強しているなら、テーブルレイアウトから抜け出すのも考えたほうがいいかも。
ソースが激しく読みにくい。

>>488-489
>>6 の Q4/A4を参照。
margin-left でやるなら display:block; をつける。

デザインの為に文字サイズに手を加えるのが好ましくないのは承知しているのですが
やむをえずブラウザで文字サイズを変更できるよう一部のフォントをemで設定していました。
ところがどこかで聞いた話だとemでも不具合があるらしく％がいいとのこと。
初心者ＦＡＱ等を見ても解説もなくよくわかりません。
解説お願いできないでしょうか。

>>493
これかな？

em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b048.html

>>494
あぁそれですねぇ。
標準、互換モードともにＩＥ６は不具合でると・・・。
どうもでした(´･ω･`)

>>487
同意

文字サイズ厨大暴れの予感↓

　　　　　　　　　 　　Å
　　　　　　 　　　　／ ＼
　　　　　　　　　ヽ(´Д｀;)ﾉ
　　 　 　　　 　　　(　 へ)
　 　 　 　 　　　　　く

<h1>大見出しの文字列</h1>

と書いて見出しレベル１であることを機械的に伝達するように、
視覚的に乱しレベル１であることを表現するための装飾なら、
文字サイズをいじることに何ら問題はないですよ。

ないですね。

印のドットだけついて全体の字下げ、行間隔のないリストを作りたくて
まず<ul>のmarginを０にし、全体の字下げはなくなりました。
次に行間隔を無くそうと<li>のmargin、padding共に０にしたのですが
うまいくいきません。
どうすればいいでしょうか？

>>501
行間隔のない〜の意味がちょっとわからない。
line-heightのこと？

>>502
よい例えではないですが、改行するときに<br>ですれば隙間はあかないですが
<p>で改行すると隙間が空きますよね。
この<p>の時と同じ様になるんです。

>>502
あぁline-heightでした。
line-heightを設定し文字サイズを変更すると間隔がずれたので
他の設定なのかと思いましたがこのスレの上の方にあるIE6のemバグだったようです。
ご迷惑おかけしました。

<style type="text/css">
<!--
ul{list-style:inside; margin:0;}
-->
</style>

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

<!-- これが -->

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

<!-- じゃなくて -->

・あいうえお

・かきくけこ

<!-- になるの？ -->

>>504
良かったね。
>>505
お疲れ、俺。

http://blog.gaeastudio.com/
みたいに、枠の後ろに影をつけたいのですがどうすればいいのでしょうか？？

>>503
あ き ま せ ん よ ？

>>507
ソース見ればすぐわかる。

>>507
そこの管理人に聞けばいい。

>>507
幅を固定して背景画像というよろしくない技術。
横スクロールは出るし、自分の好みの幅でも読めない。
ユーザースタイルで幅と段組を解除すると背景が邪魔。

すいません、質問させてください。
自分のホームページに掲示板をFFFTPを使ってアップしたのですが
自分のパソコンで見るときにはcssファイルが反映されていたのに
アップしたら全然反映されてません。パスが間違ってると思い確認は
してみたんですがどうも間違いはないようです。なにか分かる方
いらっしゃいますでしょうか？

キャッシュ捨ててリロードとか。

バイナリで上げてるからとか

実は上げ忘れてるとか

気のせいとか

レスありがとうございます。
とりあえずやってみたのですが以下のような結果になりました。
というかほとんど手探りでやってきたんでおそらく自分のミスっ
ぽいです。少し勉強しなおしてみます、皆様ありがとうございました。
>>513
やってみたんですがだめでした。
>>514
アスキーモードでいってると思います、一応ちゃんと表示はされているので。
>>515
確認したところあがってました。

いつからこのスレは質問に答えるのではなくて
自分の主観を押し付けるスレになったんだ？>>511

> 518
押し付けてるかどうかはともかく、ちゃんと回答になってるのでは。

じつはパスの指定が c:\〜 になってるとか。

>>518
主観の押し付けというより、むしろ忠告に近いだろう。
「余りよろしくないから真似しない方がいいぞ」みたいな。
ただ答えだけ教えても、質問者の身にならないと思うがな。

>>521
そうだな。単なる回答のみなら「仕様書読め」の方が適切なわけだし。

※　議論はよそで　※

>>523
なんでも議論に見えるやつは、掲示板とかに向いていないと思うんです。

ttp://blog.gaeastudio.com/
>1行に対する文字量を考えるとせいぜい35文字〜40文字くらいで改行するのが一番読みやすいと言われています。だから、幅固定。
ユーザが見易い大きさにウィンドウをリサイズすればいいだけ。
文字サイズはユーザ側の設定で自由に拡大・縮小できるわけで、
px単位で幅固定したら、1行に「35文字〜40文字」になるわけない。

ｳﾞｧｶだねこいつ。こういう香具師の事を「押し付けがましい」って言うんだ。

>>525
> px単位で幅固定

MSIE の実装ミスだとおもう。

>>524
ほらね。>>525みたいのが沸くでしょ？

>>511
海外のStrict系のデザインサイトも幅固定で背景ありだけど、もしかしてそれもいけてないとか思ってる？

HTML がストリクトであろうが、ユーザビリティ・アクセシビリティが
悪いスタイルシートは糞。解像度・フォントサイズ依存スタイルは皆糞。
糞スタイルを見て格好良いとか思ってるやつも糞。世の中糞糞だらけ。
ああくさい、くさい。香ばしい糞がプンプンするよ。そして漏れも糞。

>>528
議論がどうとか言うつもりはないけど、スレタイ読めますか？
Strictスレでもなければカスイケスレでもありません。

ここは基本的にループスレ。

>>526
何が実装ミスだ。例えば仮に width: 400px とした場合、
font-size が 10px と 20px とでは1行の文字数が違うだろう。
最終的なフォントサイズの決定権はユーザー側にあるわけだから、
1行に「35文字〜40文字」なんていう理屈はナンセンスってことだ。

>>532
文字サイズ固定と間違えたごめん。
一行あたり何文字が読みやすい、とかは大きなお世話だ、
という意見には激しく同意。

俺は本当に読みたい文章見つけたらtxtにして読むから
そこまで気を使ってもらわなくてもいいなぁ。
そもそもＨＴＭＬも必要性を感じない。
グラフや写真は画像、文字はtxt。
いまは携帯でもこの両方読み込めるし、わざわざＨＴＭＬとＣＳＳでごてごてにするのはナンセンス。

>>534
いや・・お前さんがどうしようが自由だが、
それでHTMLとCSSの全てを否定されても困る。

でもＨＴＭＬの目的って電子テキストの可読性をあらゆる環境上で実現することだから
確かにtxtファイルならほぼどんなＵＡでも同じ様に読めるよな。
そもそもマークアップってのもおかしな話。
普通の文章ならこれはタイトル、これが小見出し、ここは一段落とか書いて無くても分かる。
全否定する訳じゃないが確かに一理あるわな。

>>536
> でもＨＴＭＬの目的って電子テキストの可読性をあらゆる環境上で実現することだから

目的って・・・
いつまでそんな硬直したこと言ってんの

>>536
>普通の文章ならこれはタイトル、これが小見出し、ここは一段落とか書いて無くても分かる。

わからないんだけど・・・・・目の見えない人間がどうやってtxtファイルから文書構造を把握するんだ？
人間の健常者だけが対象ではないのがHTML。しかしそのHTMLを人間の健常者にしか理解できないように
書くか書かないかの決定権はサイト製作者。

文字サイズ固定を非難するようにHTMLの使い方固定も非難してみたら？

マイクは音を拡張するためにあるが、それで彼女を責めてもなんら問題はない。
そいつに向かってバイブを使え！っていうのは見当違い。

テレビをサッカーボール代わりに使ってるやつがいても、そいつの勝手ってか

>>538
音声ブラウザで読ませたらＨＴＭＬもtxtも変わらない気がするんだが。

そういや点字ＵＡって開発されてたっけ。
ポッチの山がうねうねうごくやつ。

質問させていただきます。
<a href=""><img src=""></a>の時にイメージ画像のまわりに青い枠がつきますよね？
<img border="0">で消せるのはわかるのですが
border属性を使わずにスタイルシートで消すいい方法はありませんでしょうか？
どうかよろしくおねがいします。

>>542
img { border-style: none }

>>540
H1-H6 を読み上げる前には「ﾎﾟﾝ」って音がして、
次に見出しレベルを読み見上げて、
内容は本文とは違う声の種類や調子で読んでくれて便利だよ。

それに見出しだけを読み上げるモードとか用意されていて、
目的の場所に素早く辿りつけるようになっているのも便利だよ。

ページ内のリンクだけを抽出して読み上げるモードもあるし、
キーボード操作で、前後の段落へ読み飛ばすこともできるよ。

他にもテーブル専用の読み上げモードというのもあって、
カーソルキーで列や行を自由に移動することもできるし、
TH要素、scope属性やabbr属性も理解するし、意外と便利だよ。

強調要素だって、少し強いアクセントでちゃんと読んでくれる。

音声ブラウザは健常者が使っても便利だし面白い代物だよ。

>>540
それはおまいのHTMLがショボイだけだろ。まあ知識が乏しいというかな。
HTMLでちゃんと構造が明示されてれば音声ブラウザでも
見出しだけを抽出とか、ユーザの読みやすいように使える。強調箇所もちゃんと強調してくれるし、
1次元情報であればHTMLは音声ブラウザにとって結構読みやすいものになる。正しくかいてればね。
まあ欠点は2次元情報の把握のしづらさだが、それにしてもHTMLよりいいものなんてない。

txtでどういう構造がわかると思ってるの？見出しも強調も何もない、のっぺら文章は
理解しづらいよ。

>>544
かぶった・・・

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

>>541
点字ディスプレイというのはかなり昔からあるものだよ。
視覚障碍者の中でも点字を読める人は結構少ないらしく、
装置が50万円以上と高額で、しかも公的な援助もないらしく、
国内ではあまり普及していないのが実情みたい。

とあるウェブ雑誌の対談記事で盲人の教育者の方が
「普段は音声ブラウザという、ブラウザの表示内容を音声で読み上げてくれるソフトを使ってWebを利用しています。
で、“これはしっかり読みたいな”というようなページは点字ディスプレイで、と使い分けています。」
と語っていた。

>>540は「さんがつみっかうどんについてうどんとは〜」みたいなサイトしか想定してないんだろうな。

>>549
そういうサイトしか作ったことのないアフォなんじゃねえか？

htmlの目的は論理構造を視覚に頼らずはっきりさせるためで、そのもっとも直接的な対象は機械。
人間がどうこうとか音声ブラウザは二次的な話。

>>550
なるほど。作ったものでしか計れない人、か。それもありうるな。

で、どこらへんがCSS・スタイルシートに関する質問なんですか？

オサレとカスイケとここがごっちゃになってる気がする。

議論厨はいい加減専用スレに帰って下さいね。

議論厨って言うか見下し厨

「このスレでは手も足もでないが、知ったかだけはしたい。」か？

子孫セレクタの実装について質問。
p strong a{
font-size:20px;
}

とした場合
p要素を祖先とするstrong要素の下位層にある全てのa要素にのみ、効果を発揮するんですよね？
p要素とa要素の間にstrong要素がない場合は適用されないであってますか？

一応ie6/n7ではそういう動作ですけど。

画面下部にフッタをつけたいのですが実現方法がわかりません。

<html><head></head>
<body>
<table width="100%" height="100%">
<tr><td style="vertical-align:bottom;">Footer文字列</td></tr>
</table>
</body>
</html>

とかやってみたのですがダメです。
どうしたらよいでしょうか？どなたかお知恵を。（IE6です）

>>558
＞p要素を祖先とするstrong要素の下位層にある全てのa要素
≠
＞p要素とa要素の間にstrong要素がない
日本語の質問ですか？

>>559
まずはHTMLとCSSを勉強してみよう

>>560
オマイ根性悪いなぁ

>>558
あってる。

>>558
p要素の子孫のstrong要素の子孫のa要素という意味だから
君の考えてることは多分正しいよ。

>>560
「p要素とa要素の間のstrong要素」というと
　　<p>...</p><strong>...</strong><a>...</a>
みたいなのを想定しちゃうというのはわかるけど
ちと意地悪過ぎるんじゃないかな。

>>563
>「p要素とa要素の間のstrong要素」というと
　　<p>...</p><strong>...</strong><a>...</a>
みたいなのを想定しちゃうというのはわかるけど

確かに「間」という言い方は間違ってましたね。

質問です。
ある子要素の破線dashedの点と点の間の色は、IEでは親要素の背景色でした。
Ｏｐｅｒａではその子要素の背景色でした。
ＮＮではどうなんでしょ？
あと、どっちが正しいとかあるんでしょうか？

>>565
ボックスモデルの概念から、Operaの解釈が正しいと言える。

要素は内側から順番にcontent,padding,border,marginを持っている。
borderはその子要素の範囲内。従って子要素の背景色が適用されるのが正解。
NetscapeなどのGecko系もOpera同様に描画される。

strong や a について知ってれば誤解のしようもないだろうに。日本語が……とわけもわからず書くやつが多すぎ。

>>566
ありがと。

ウィンドウの大きさに関わらず
ウィンドウの左下に1つ、右下に1つ表示させようとしていますが
うまくいきません。
スタイルシートで、backgraund-positionを使うと
画像が1つしか固定できませんよね。
2つの画像をまとめて1つの画像にし
backgraund-positionで指定してみたのですが
ウィンドウが大きくなると
本来は左下に指定したい画像が下中央辺りに移動してしまいます。
どのように指定すればいいのでしょうか？

とりあへず、background-positionにしませう。

>>569
日本語の下手な人なのかな。
>ウィンドウの左下に1つ、右下に1つ表示させようとしていますが
何を、表示させるの？
>backgraund-positionで指定してみたのですが
どうやって指定したの？　プロパティーの値は？

●OSやブラウザの種類とバージョンについては必ず明記してください。
　特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは？」と求められたら応じましょう。
　その方が回答が早く得られます。質問は具体的に。

テーブル内の文字を一定にするにはどうすればいいですか?

>何を、表示させるの？
画像です。

1つめの画像は
<style type="text/css"><!--
body { background-color:#FF8041; background-image:url(01.gif); background-repeat:no-repeat; background-position:right bottom; }
-->
</style>
と指定し、右下に配置できたのですが
もう1つの画像を左下に配置する方法がわかりません。

WinXP Pro SP1、IE6SP1使用です。

>>569
<div><img 左下画像></div>
として<div>というボックス自体をpositionで画面下に固定し、<div>のボックス幅を１00％
右下画像を<div>の背景画像としてbackgraund-positionで右寄せでどうでしょう。

＞572
>テーブル内の文字を一定にする
とは？？？もちっと分かり易く書いてくれ。答え様が無い。

>>574
backgraund-positionでは無理だっての。backgroundならいいかもヨ？

text-align:right;やfloat:right;を応用する手もある。

あまり詳しくないのですが
スクロールバーにカーソルを合わせた時のカーソル画像を適用するには、どうすれば良いのでしょうか。
scrollbar{ cursor: url("*.cur");
では無理でした。

WinXPHome IE6です

>>577　ＣＳＳではできません。迷惑なのでやるべきでないし、やらない方がいい。

つまり、table内を一々<font size=2>とかで仕切るのがめんどくさいんですよ。
これをどうにか対処したくて。

>579
table { font-size : **% }

>>578
ﾗｼﾞｬ-(´･ω･`)ゞ
ありがとうございました

>>580
どうも。

>>580
フォントサイズの指定が表要素に継承されない(5.x)
http://cssbug.at.infoseek.co.jp/detail/winie/b023.html

まあ、%指定なら大丈夫なんだが。

font-sizeはem指定でしてるんだけど、%指定のほうがいいんかな

えーと、テーブル内のテーブルが物凄い文字が小さくなってしまうのですが。。。

すいません。そっこー解決しました。。。

>>584　
既出。>>493-495

>>585
●OSやブラウザの種類とバージョンについては必ず明記してください。
　特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは？」と求められたら応じましょう。
　その方が回答が早く得られます。質問は具体的に。

>>585　CSS使ってるなら、テーブル・レイアウトは卒業しなさいね。みっともないから。

CSSですべてのブラウザの互換性を考えると
つまらないレイアウトしかできない。
企業サイトみたいな固い奴ならまだしも
のびのびレイアウトするならテーブルレイアウトのがいい。

※他所で

そうだね。ここではテーブルレイアウトの是非を語るべきじゃなかった。
スマンね。つい。

>>589
カスイケ行って来い。目が覚めるから。

>>592
見た上で、限界があると認識しましたんで。

>>589
【td】テーブルレイアウトの何が悪いん？ 3 【/td】
http://pc5.2ch.net/test/read.cgi/hp/1079463284/

>>592-593
ﾜﾗﾀ

紹介した人がセンス無かっただけかと

CSSの初心者です。
リンク文字のロールオーバーをするために
<style type="text/css">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
A:active {text-decoration: none;}
-->
</style>

としてみたのですが
MAC版IE5.2.3（OS.X）でロールオーバー時にアンダーラインが表示されません。
※ちなみにMAC版NN6,safari1.0,WIN版IE6では大丈夫でした。
どこか記述に問題があるのでしょうか？
どなたかご教授をよろしくお願いします。

<div>
文章A
<div class="a">
文章B
</div>
文章C
</div>
とすると文章Cの上にクラスaのdiv要素が重なってしまいます。
用語の使い方がおかしいかも知れませんが、どうぞご教授ください。

>>598
文章ＡＢＣを全部パラグラフに分けろよ
それで良いじゃない

>>598
>>599の言ってるパラグラフ＝p要素ね。
とりあえず、divは使うのはなるべくやめれ。クラスをつけるためのdivとかやってると
div厨がっ！！って馬鹿にされるよ。

divにはdivの使いかた。pにはpの使い方。tableにはtableの使い方。正しい使い方をすることが
結局は編集のしやすいソースになって、表現力があがることにもなる。

とりあえずevalに気をつけろ！

>>598
そもそも重なってしまうの意味がよくわかんない。
どゆこと？

DIVを使うのは別に悪くないが、
とりあえず、文章はPでくくるべき。DIVは文章をくくるためにあるわけじゃないんで。

>>600
> divにはdivの使いかた。pにはpの使い方。tableにはtableの使い方。正しい使い方をすることが
> 結局は編集のしやすいソースになって、表現力があがることにもなる。

この「divにはdivの使いかた」みたいなのを
きちんと解説してくれてるページって、ないでしょうか？
「論理的に書きましょう」的なことは、しばしば言われることなんだけど、
では、その「論理」とは何か、みたいな部分が、なかなか理解できないんですよ。
なんちゅーか、実践的なページであればあるほど、そのへんがおざなりな感じがして、
よくわからんのです。本で言うと「第一章」的な部分が。

おすすめなサイト、解説書などあれば、よろしくです。

divの使い方でこういうのはありでしょうか？

<div id="CHAPTER1" class="chapter">
 <h1>第１章</h1>
 <div id="SECTION1_1" class="section">
  <h2>第１節</h2>
  <p>
   文章
  </p>
 </div>
 <div id="SECTION2_2" class="section">
  <p>
   文章
  </p>
 </div>
</div>
<div id="CHAPTER2" class="chapter">
　・
　・
　・
</div>

新聞もってきて赤ペンで対応するＨＴＭＬを書き込んでくと理解しやすいぞ。
大見出し、小見出し、段落、画像、まぁ基本的にそんなもん。
そうするとあまるものがでてくる、段組だな。
文章としては段組なんて無くても完成してるけど
一コラム、一記事なんかを囲んでやると読者にはわかりやすい。
ここにきて初めてdivがでてくるわけよ。
まぁ実際はもっともっと用法はあるけども
なんでもdivで括る前にきちんとしたマークアップしましょうってお話だ。

>>603
解説書なら神崎正英のユニバーサルＨＴＭＬ／ＸＨＴＭＬがおすすめ。
２２００円するけど相応の価値はあるよ。

>>605
質問者じゃないけどタメになった。
ありがとん

>>605
なるほど。
意識の持ちようが変わった。ありがとう。

スタイルシートで画像を黒っぽくしたいのだがスタイルシートでは無理・・・？

>>609
IEの独自拡張でfilterというものがあるけど、
「黒っぽく」することはできない。
グレースケールならば可能。
当然、IE以外では無視される。

<h１〜６>も使い方がよくわからなくて、div厨とか言われるのがイヤで、
とりあえず書いてみたら<p>厨になってしまった。
いいのかなぁ、と悩んるんだけど、
何か代わりになるような、うまい案はないでしょか？

<div><!--これがページの最外骨格-->

　<p>〜</p>サイトのタイトルロゴ
　<p>〜</p>コンテンツリスト
　<p>〜</p>挨拶文やら
　<p>〜</p>コメントやら
　<p>〜</p>トップ絵やら
　<p>〜</p>カウンタの遊び文やら
　<p>〜</p>とにかく、なんやかんやと

</ｄｉｖ＞

>>611
ほらリストはさ、いるじゃない？pよりお似合いの君が。
マークアップのコツはね、とりあえず見た目のことは一切考えずに
サイトの内容をどんどんかいてく。
そうするとリストらしきもの、見出しらしきものが見えてくる。
あとはそれぞれくくってやるんだ。
h1は文字がでかくなるから使いづらいなんて言うなよ。
ここはスタイルシートスレじゃないか。

><h１〜６>も使い方がよくわからなくて
自分に足りないものがわかっているのなら、補えばよい。
至極当然で、簡単なことだよ。

そして
>>605

>div厨とか言われるのがイヤで、
とか言ってるけど
><div><!--これがページの最外骨格-->
↑これもdiv厨っぽいマークアップの様な気がするのだが。何の為のdivよ？

まあ本質を言うと、divは本来必要のないもの。でもHTMLのショボさを補うために
使われる。

正直、人に見せない耳で聞くだけのHTMLを作る時にdivを使う奴はほぼいない。
しかし、それを視覚系UAでも見れるようにする時にdivを付け足してCSSにとっての
使いやすい構造にするやつが多い。その行為自体は良いと言うべきかは難しいとこだが、
少なくとも、それをやるくらいの柔軟さがないといけないことは確か。

お前ら今はサイバーノーガードの時代ですよ。

スァイバーヌォゥグァーーーーーッッッドｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━!!!!!

なんかアリガト

ｐ要素ばっか打ってたら頭の中が、
ぱらぐらふぱらぐらふぱらぐらふぱりぐらふぽりぐらふぽるぐらふぽるなれふあばよしみったれたじいさん
ｐ要素って続けてタイプしたら　ぴょうそ　になるんだね。

勉強してたらさ、<h1>ときて<h3>をいきなり使うのはダメぽって。
じゃー文章以外では使わない方がいいかなぁって思ってたのよ
もっと柔軟に組めばいいのか。リストも使った方がいいところも出てきたし。
最外骨格はなんかもうちょっと気の利いた物かんがえてみる。

さいごに、　ありがとよ。

>>615
私にそこまでのデフェンス力はありません

>>611=617
おまいの困惑は、HTML とか CSS とかではなくて、
文章の書き方の基礎からしてわかっていないのが原因。
紙で良い文章が書けない人は、良いHTML文書も書けないのよ。

>>611 見たいにデフォのスタイルに惑わされちゃうようなら、
とりあえず、
*{
margin:0px;
padding:0px;
font-size:100%;
font-weight:normal;
font-style:normal;
text-decoration:none;
}
とかしてみると、いいかも、と思った。
試したこと、ない。

>>620
>>161

自分は>620みたいな感じでmarginとpaddingだけ0にしてる。
デフォルトのスタイル無い方が実際作り易い。

>>620>>621>>161
全称であまり指定しすぎると問題あり。
marginとpaddingくらいにとどめておくほうがいい。
実際の不便さはつかってみるとよくわかる。

ところでお前ら、今はサイバノーガードの時代ですか？

>>617

とりあえず、まずCSSの装飾を考えないで
普通にHTMLを作ってみることだよ。そこからクラス指定とかID指定して
CSSで装飾していって・・・
それでも理想どおりにレイアウトできないときにDIVとか使ってみるのよ。

ブロックレベル要素とインライン要素を覚えておくといいかもね。
例えば上ででてきたp.ul,h1〜h6なんてのもdivと同じブロックレベル要素。
だからdivなんてのはあまり使わなくてもおおかたうまくいくもんだよ。

>>605
なるほどね。ボクへのレスじゃないかもだけど、参考になるです。
そういう基本概念が知りたかったんですよ。

>>606
事務所を抜け出す時間がなかなかとれないけど（今もだよ、死ぬる）、
とりあえず、書名はPalmにメモった。絶対読みます。
ありがとう！

>>611
> <h１〜６>も使い方がよくわからなくて

ボクもよくわからんです（泣
というかね、<h1>と<h2>ではどっちが偉いのかとか、
割とつまんないところで詰まっちゃったりしますよね・・・

適当にトライ＆エラーで今までやってきて、
HTMLのしゃれた味付け、といった感じでCSSを書いてきたけど、
（当然、テーブルレイアウトですよ・・・orz）
ここらで捲き直して、基本から学んでみようと思ってます。
がんばろう！

画用紙に色鉛筆使って、うにうにと書いてみて、
そこにテキストをぐりぐりと書き足して、
なんとか、メドがたったよ。
やっぱり<p>厨だけど、文章の意味的にもばっちりのが出来た。
このスレに来てよかったべさ。さんく。

>>626
ユニバーサルＨＴＭＬ／ＸＨＴＭＬっていうは605で書いた様な概念、考え方を書いた本なんだ。
ただ実際に文章を書いてくには辞書がいるよね、俗に言うタグ辞典。
そういう本なら秀和システムの詳解ＨＴＭＬ＆ＣＳＳ＆Javascript辞典なんかがいいと思う。
ただ個人的には困ったら仕様書を読むのをおすすめするけど、まぁ一冊あると便利だね。

詳解HTML&CSS&JavaScriptは，JavaScriptの説明がぐだぐだなのであんまり勧められない
そっちより同じ秀和システムの「詳解HTML&XHTML&CSS辞典」の方がいい

っていうかそんなもんいらねだろ。仕様書とリファってるサイトを印刷したら？
安く済むよ。

秀和システムの本、無理矢理まとめてあんなに分厚くしないで
分けてだしてくれんかな、値段３分の１で。

>>629
確かにJavaScriptの説明は酷い。
余計な事は覚えたくないが、とにかくJavaScript使ってみたいって人ならこれでも充分なのかもしれないが
本腰入れて学ぼうって人にはイマイチ。

「抱合せ」販売されてる商品に、ろくな物なんか無い。

<ul>
<li>1.</li>
<li><ul>
<li>1.1</li>
<li>1.2</li>
</li></ul>
<li>2.1</li>
<li>2.2</li>
</ul>

という感じのリストを作りたいのですが、このままだと
1.1に二重にリストマーカーが出来てしまうので、2番目のliのマーカーを消したいのですが
どうすればいいのでしょうか?
WinIEでも対応している記述で教えてください。

追記
2番目のliとは頭から数えて2番目のliです

>634
<ul>
　<li>1.</li>
　<li class="class">
　　<ul>
　　　<li>1.1</li>
　　　<li>1.2</li>
　　</ul>
</li>
<li>2.1</li>
<li>2.2</li>
</ul>

単に書き間違えてるだけかもしれんが、6行目がおかしい
と言うか、CSSが何一つ解ってないように思えるが大丈夫か？クラス振るだけだろ？

>>636
すみません、見直したにもかかわらず書き違えました。
クラス名振るのは少々冗長に思えましてので・・仰るとおりわかってないと思います・・

考えたなおした結果
<ul>
<li>1.
　　<ul>
　　　　<li>1.1</li>
　　　　<li>1.2</li>
　　</ul>
</li>
<li>2.
　　<ul>
　　　　<li>2.1</li>
　　　　<li>2.2</li>
　　</ul>
</li>
</ul>

で行くことにしました。
HTMLを変えることになって、スミマセン。

クラス振るのが嫌なんか？そりゃ困ったな。

>>637
とりあえず<ol>でマークアップしれ。
入れ子になるやつと外側のリストのlist-style-typeに異なる値を指定しれ。

外側をdecimal
中をupper-roman
とかにすればいいだろ。

駄目だったらサイバー戦法で行け！

>>639
順序リストであることをすっかり忘れてました..了解しました。
では、順不同リストの場合は>>637,順序リストの場合は>>639でやってみます。

ところで、>>637、>>640らは質問者を騙った新手の荒らしか?

>>589
>CSSですべてのブラウザの互換性を考えると
HTMLで、の誤りだよな。
CSSは、無くても支障無く閲覧できるマークアップをすべきもの。
スタイル・オフにすればNN4だって問題無いんだし。
互換性とは、見栄えまで同一にしようとすることではない。

>>640
順不同→×
順序なし→○

>>643
順不同でもいいじゃん

<h>タグのマージンを消したいのですが、どうしてもネスケ４．７で消えません。
何かいい方法はないでしょうか？

>>645
駄目ブラウザのNN4だって、marginの指定位はできるが。

質問するときは、いまどう指定してるのか（ソース）、それだとどう失敗するのかを、書きなさい。

>>645
http://cssbug.at.infoseek.co.jp/detail/nn4x/b012.html
http://cssbug.at.infoseek.co.jp/detail/nn4x/b010.html
あのな、マージンが消えないのではなく、
ボーダーの内部が背景色で完全に塗りつぶされない現象でないのか。

h1{
font-size :15px
margin : 0px
}

という風にしていしているのですが、他のブラウザだと平気なのですが、
マックネスケ４．７だけ上下にスペースが開いてしまいます。
よろしくお願いいたします。

>>648は、>>647を読んだのか？
borderを指定して表示して見なさい。
それと、font-sizeのpx固定は感心しない。emか%が好ましい。

fontサイズのem指定はあまり勧めない方がいいんじゃないかな。
結局、ユーザーに選択の余地残すためなのに、ブラウザで文字サイズ弄るとIE６だとバグがでる。
これはやはり致命的でしょう。％指定がいいと思うよ。

>>650
http://cssbug.at.infoseek.co.jp/detail/winie/b048.html
>なお、祖先要素でfont-sizeプロパティを%値や絶対単位の値で指定することで不具合を回避できます。

つまり body {font-size:100%;}と指定しておけばよし、と。

>>648
NN4系列は、h1〜6のマージンは消せんよ。
みんな冷たいな。

>>653
消せるよ。
お前も http://cssbug.at.infoseek.co.jp/detail/nn4x/b012.html を見ろ。

あの手の質問の仕方なら、「日記はローカルに書いてな!(だっけ?)」のコピペで十分じゃん。

>>654
h1とかのはなしじゃないじゃん。

>>656
リンク先の例示をよく見ませう。margin:0;って指定してあるよな。

>>657
横レスだけどおまえって・・アレだろ。アホ。

H1をPにしろとかいうアホな答えしか出てきてねぇじゃん。
結局H1のmarginは消せないってことなんだが・・・

マックのしかもネスケ４．７なんか捨てちゃえよって
ことをみんな遠回しにいってるんだよ。

消せるという意見の方と消せないという意見の方がいるようですが、
実際はどうなんでしょうか？混乱しています…

やればわかるだろ？　消せないよ。

Netscape 4.x での 'margin' はデフォルトに対して加算されたり、
隣接する垂直マージンが相殺されなかったり、とにかく異常な整形になる。
ボックスモデルが破綻しているような糞ブラウザには適用しないのが得策。

>>645
混乱させて悪かったな。
p や form などのマージンは何とかなるが、
h1 〜 h6 はどうにもならん。

何でいちいち与助での表示まで気にしてんの。。。

随分あからさまな釣りですこと

---------------------------
|文章Ａ　　　　　　　　　　　　　　　|
|　　　　　　　　　　　　　　　　　　　|
|　　------------------ 　　　|
|　　|　　　　　　　　　　　　　|　　　|
|　　|文章Ｂ　　　　　　　　　|　　　|
|　　|__________________________|　　　|
|　　　　　　　　　　　　　　　　　　　|
|文章Ｃ　　　　　　　　　　　　　　　|
|　　　　　　　　　　　　　　　　　　　|
|　　　　　　　　　　　　　　　　　　　|
|______________________________________|

回答いただいた皆様ありがとうございました。
としたいんですが、文章Ｂの枠が、文章Ｃの上に来てしまうのです。
回答いただいたように書く文章を<p>で囲んだのですがダメでした。
今は<br>を多様してどうにかごまかしています。
よろしければアドバイスをください。

訂正です。
(×)としたいんですが
→(○)上のようにしたいんですが

>>666
変なposition指定してないか？floatとか。

>>666
divをposition;absolute指定してないかな？

申し訳ありません。
解決できたみたいです。
<p>要素をクラスわけして、
<div>
<p>文章Ａ</p>
<p class="a">文章Ｂ</p>
<p>文章Ｃ</p>
</div>
としたらそれっぽくなりました。
もしもっといい方法があったらご教授ください。
スレ汚し失礼しました。

>>668
>>669
position;absolute指定してました。
ということはclass="a"のdiv要素のpossitionを
変えてやれば綺麗になりますか？
その場合はどう指定すればいいのでしょうか？
あと>>670のやり方はどうでしょうか。

>>666
やっぱりか。absoluteっていうのは絶対配置だから他の要素に影響をあたえない。
だから重なって表示されるのは当然。
表示位置を指定するならposition:relativeで指定するか
他の要素もabsoluteで絶対配置する必要がある。

>>666
その配置なら絶対配置にせずとも、
margin だけで良かろうに。

テンプレサイトに、複数のセレクタ
　h1 { font-family: sans-serif }
　h2 { font-family: sans-serif }
　h3 { font-family: sans-serif }
を
　h1, h2, h3 { font-family: sans-serif }
とグループ化できるとありましたが、
これは.hoge等のクラスセレクタでも可能でしょうか。

↑質問する前に試してみれ。

<p>要素を使う際、右の余白を調整するにはどうすればいいのでしょうか。
overflowはボックス要素だけにしか使えないのでしょうか。

>>676
意地悪を言うようだが答えは出ているように思えるけど・・
余白はmargin、右はright。

インライン要素はそもそもボックスを形成しないから、
そのボックスからはみ出るという現象は起きない。

あ、内側の余白です。
もう訳わかりません。
paddingの指定をしても、なぜか右側の余白は変化しません。
頭が痛くなってきた…。

↑
なぜ程度の低い質問者って、HTML・CSSソースを出さないのかな……。
回答者には、テレパシー能力は無いんだよ。

<div class="left">〜</div> と <div class="right">〜</div> が色々混ざっているXHTML がありまして、
これをマルチカラム（２行）で左右に分けようと思います。
<div class="left"> L1 </div>
<div class="left"> L2 </div>
<div class="right"> R1 </div>
<div class="left"> L3 </div>
<div class="right"> R2 </div>
<div class="left"> L4 </div>
これを
┌─────┬──┐
│L1　　　　　 .│R1.　│
├─────┤ 　 　│
│L2　　　　　 .├──┤
├─────┤R2.　│
│L3　　　　　 .│ 　 　│
├─────┼──┘
│L4　　　　　 .│
└─────┘
と配置する事は可能でしょうか?
もし可能でしたらそのスタイルを教えて頂きたく思います。

なんだ？今日は馬鹿祭りなのか？随分とアフォな質問が続いてるな。

>>680
ネタだろそれ。つまんねえよ。

>>680
なんでそもそものＨＴＭＬが色々混ざってんの？
（代替スタイル使いたいのかな・・？

div厨で逝くなら最初っから左右2つのdivで良いのに・・・
で、左右に流し込みたいんならfloatとかあるよねぇ・・
２種類のクラス分けしたいみｔ........


　　　　　　　　　　　　　　　　　　( ﾟﾟ,_ゝﾟﾟ)･∵. ﾊﾟｰﾝ!

NC4以下とIE4以下にはCSSを適用させたくないんですが、どう言う方法でやるのが一番
いいですか？
@importでの指定はNC4.01がクラッシュするらしいので、使わないでおこうと思います。
media属性の値にscreen以外を指定すると、NC4とIE3はCSSを読ませなくできるみたいなのですが、
IE4が読んでしまいます。
TOPPAGEをCGIやSSIにするのはサーバによっての可・不可があるので考えてません。
JavsScriptでの振り分けはユーザがJSを切ってると効ききません。
XSLTを使ってもできるみたいですが、まだ勉強いてないので使えません。

どうすればいいいでしょうか？

>>683
>>4の下から2番目読んだ？

>>683
とりあえず@importでn4がブッコするの対策は
<link media="screen,print" href="a.css" 〜>
でCSSを読ませて、a.cssの中で@importを使えば解消されるはず。

その時点でie3/n4以前の排除はできている。後はie4用に@importを↓のようにする。
@import "hoge.css";
これはCSS2からサポートされており、ie4はこれを認識できない。故に排除ができる。

俺はこうやってn4/ie4を排除してるが、実際にテストしてないんだなこれが；
だってie4をわざわざ入れるの面倒だろ？まあ俺のやり方で問題があったら誰かが補完してくれるはずw

とりあえずガンガレサイバー

>>684-685
質問した後に4のサイトに気づきました。すみません。
あのサイトではMacIEも排除できるやり方が乗ってましたが、CSSの実装が極端にひどく
CSS1の仕様書とおりに書いても、ぐちゃぐちゃになってしまうようものがNC4と（IE4）
以外にもあるのですか？

MacIEで気をつけるべきバージョンがありましたら教えて下さい。あるならそれも読ませないようにしないと
いけないので。

>>685
>@import "hoge.css";
>これはCSS2からサポートされており、ie4はこれを認識できない。故に排除ができる。

そうだっけ？@importについてどっか詳しく解説してるサイトなかったっけ？前に見た気がするんだが思い出せない

>>685
http://www6.plala.or.jp/go_west/nextcss/ref/slctr/at_rule.htm#import
ここでは
>@import "hoge.css";
>これはCSS2からサポートされており、ie4はこれを認識できない。故に排除ができる。
みたいなことを書いてないが？

http://www6.plala.or.jp/go_west/nextcss/bug/method.htm#import

ここに書いてあるぞい。

そういう現時点でのバグを使った小技で成り立ってるサイトなんてのはテーブルレイアウトと同じだろ。

CSSはショボイ！自分一人では何もできないのがCSS。所詮は廃れる運命。

もしもCSSが今後、サイト製作者の標準スキルになるとしたら、実装が仕様書と異なるブラウザが
完全に配布停止になった：ｊん：あｊｋん：いあｎ

お前ら朝っぱらからうるせんだよ！

次の質問どうぞ

@importで10個のファイルを読ませるのと、それを全部一つのファイルにまとめておくのとでは
重さに違いはでますか？

@importルールの記述法をサポートしているのかを○×でまとめた表です。
http://hail2u.net/documents/cairs.html

>>693
@import だと UA が 10回 GET を行なうわけだから，読み込み時は遅いっしょ．
読み終えた後のレンダリング速度は UA 依存だと思う．
少なくとも Mozilla の CSS 解釈の仕組みなら重さに変わりはないはず．

>>683
>@importでの指定はNC4.01がクラッシュするらしいので
え、初耳。その典拠は？

http://www.zspc.com/documents/css2/associate/atimport.html

でも、いまどきNN4使ってる奴でも大抵ver.4.7で、さすがに4.01はゐないと思ふ。

<div class="ga">のtopborderの上にぴったりとnews.gifを表示させたくて下記の様にソースを書きましたが、どうしても画像の下に隙間が空いてしまいます。
どうすればよいのでしょうか？教えてください。
確認環境はXPでIE、NN、operaの最新版です。
.nullpo {
width: 300px;
margin: 0px;
padding: 0px
}
.ga {
width: 300px;
border: 1px solid black;
margin: 0px
}
<div class="nullpo">
<img src="news.gif" width="200" height="24">
</div>
<div class="ga">
<p>もうだめぽ。</p>
</div>

filterで 画像のぼかし ってどうやるんだっけ

>>698
ソースの改行を無くすよろし。
<div class="nullpo">
<img src="news.gif" width="200" height="24"></div><div class="ga">
<p>もうだめぽ。</p>
</div>

>>700
うおおおおお、できましたー｡･ﾟ･(ﾉ∀`)･ﾟ･｡
698のはずれちゃってるけど
見やすいようにいつも改行してるのがアダになったのでしょうかorz
本当にありがとうございました。

そのソースに激しく突っ込みてぇ・・・

と思ったらIE６とopera7ではうまくいきましたが
NN７では隙間が消えてくれませんorz
これは無理なんでしょうか。

>>703
imgに背景色指定して見な。ぴったりくっついてるけど？
どっちにしろCSSの問題ではないし。

>>704
指定してみましたがやはり隙間が空いてます。
とりあえずまた色々検索してみます。
お手間かけてすみません。

a:link { text-decoration:none }
a:visited { text-decoration:none }
a:active { text-decoration:none }
a:hover { text-decoration:underline }

リンクの下線を消してマウスを乗せたときだけ下線を表示させる方法は上記の順番であっていますか？

>>705　imgにborder指定してNN7.1で見ても、隙間など無いが。

>>706
一行にまとめられるのに。
a:link, a:visited, a:active {text-decoration:none;}

そもそもリンクの下線を消すのは判りづらくなるから感心しない。

>>705
mozilla1.7だと確かに隙間あくな。
すまんがNNはいれてないや。

>>705
imgにvertical-align:bottom;とか付けてみれよ

しかし、DIV病を治して適切なマークアップをして修正する、と言う方向にはどうしても向かないんだな

>>710
それでいけました！色々自分で試してみたのですが
文書型宣言を4.01strictにしていましたが宣言をTransitionalにしたところ
vertical-alignを指定しなくても隙間無く表示されました。
vertical-alignを指定すればstrictでも表示されます。
まだまだ俺にstrictは早いみたいです(´･ω･`)

div便利だからねぇ

>>712
それってもしかしてNNのバグだろうか？
俺がstrictでﾘﾝﾄ通してもdiv病には違いないが文法間違いはないな。

ふつう、TransitionalかStrictかではなく、
互換モードか標準モードかが問題ではないか？

http://www.mozilla.gr.jp/standards/webtips0018.html

>>712,714
imgの下の方に隙間が出来てたのは、最初baselineに画像の底辺がきてたからだと思うよ
それをbottomにしてやると隙間が見えなくなるだろってことだったんだけど
vertical-alignで適当に調べれ・・・とか言わなくても>>716で良いか

その前にそもそもの>>698はdiv厨
nullpoとgaは見た目の目的達成するのにちょっと無駄がある
まずはなんでもdivで括って安心する癖を矯正しれ、ﾊﾟﾝﾂ脱げ

http://pc5.2ch.net/test/read.cgi/hp/1078463560/274n

>>717
便乗で質問なんですが、何故divを多用することがいけないのでしょうか？
あと、div以外でのデザイン方法が何かあるのでしょうか？

以前質問したのですが、うやむやにされてしまったので
後学のためにもぜひご回答お願いいたします。

>>719
div連発は結局ボックスが欲しいだけで、それではtableレイアウトと変わらないとこが気に食わない
とゆう冗談（半分ホントか？ｗ）は置いといて
他に文脈にあった適切な要素があるならそっち使おうよってゆうポリシーみたいなもんかな
見出しはH*、段落はP、リストはULってな具合にね

・・・

>>720
なるほど、参考になりました。どうもです

>>712
お前はまずDTDからして書き方を間違えてんだよボケ。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

上が標準準拠モードで、下が互換モードだよ。（IE6での話）

お前はどうせこんな感じにしたんだろ？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Strict//EN">
こんな宣言ねんだよアフォ。

>>723
嘘をつかないで下さい。あなたのソースでは3例ともに(Win)IEでは標準モードで描画されます。
http://cssbug.at.infoseek.co.jp/detail/winie.html

彼の人生は今まで嘘をつくしか生き残る術が無かったんだ
そしてこれからも・・・ だから、許してやってくれ

>>723
MacIE5と取り違えてないか？

ついでにMS公式の描画スイッチも載せてく
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp

公式が信用ならない方はこちらへどうぞ
http://www.geocities.co.jp/Technopolis-Mars/2989/misc/ie-doctype.html

>>723
何でも偉そうにあおりゃいいってもんでもないよ。
またーりいこうよ。

ああ、HTMLスレにも来てたな

CSSのみでホームページを作っているのですが、
<html><img src=>のborder=0に準ずるCSSは何でしょうか？

>>731
CSSのみで！？

>>732
ごめんなさい。
Another HTML-lint でエラーが無いようにしたかったので、
CSSのみではないです。

っていうか何で質問する前に>4のサイト見て
それっぽいのを試してみる、とかやろうと思わないのかなぁ。

http://home.n01.itscom.net/yutaka/html/02.html

ここを見て勘違いした。

上げてまで言い訳するな、見苦しい

>>723少しは恥ずかしいとか思わないのか。

中途半端な資料を鵜呑みにするからこういうことになるんだ。
やはり、恥をかかないためには、ベンダの公式資料とか、
W3C や ISO の仕様書とか、RFC とかを読んでおくべきだね。
それから良くまとまった資料を探して参考にすればいいんだよ。

ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξ
οπρστυφχψωАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрсту
фхцчшщъыьэюя

質問です
↑の文字のフォント変えられないのなんで？

なんで？　というより、
どうしたら変えられんでしょうか？

なんでというか、フォントというのはね、いちいち作って、それをデータにしてるわけですよ。
タイプはいろいろありますけどね。
ですんでね、特殊文字はデータとしてパターンを作ってないことがあるわけですよ。

エクセルやワードでは表示できるので、フォント内にデータはあるかと

>>741
ギリシャ文字やキリル文字が「特殊文字」ですか。

少なくともJIS漢字コードに含まれている文字の種類ですから、
和文フォントにはこれらのグリフも普通に含まれています。
欧文フォントにもラテン文字と一緒に含まれていることが多いです。

東欧やロシア、スラブ諸国など世界で普通に使われている文字を、
日本人の勝手な島国感覚で「特殊文字」と呼んで良いのですかね？
欧米からみれば仮名や漢字の方がずっと「特殊」だと思いますが。

>>743
特殊からみた普通は特殊、つーことだろ。

結局のところ、むりなんでしょうか・・・？

<ul>のネストについて表示がずれるのを質問しようとしたのですが、
その前に>>4のバグリストを見て解決しました。

書き込む前に確認してよかったです。





と言ってみるテスト

αとかはフォント変わるような･･･

主要な欧文フォントに含まれているグリフなわけだから、
font-family でそれらのフォントを設定すればいいだろう。

例えば以下のフォントに含まれている：
Arial, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif,
Tahoma, Times New Roman, Verdana, Georgia, Impact, Trebuchet MS

例：
font-family: "Times New Roman", "ＭＳ Ｐ明朝", "ヒラギノ明朝 W5", serif;

>>745=>>739 なのか知らんが、
>OSやブラウザの種類とバージョンについては必ず明記してください。

Arial,Verdanaあたりはよく使われるフォントだな。

んー、、、ホムペの作成が目的じゃないもので、、
なんていうか、ひとつのマークアップ言語としてというか、
ようはですね、
・フォント
・フォントサイズ
・フォントカラー
・文字間隔
・行間隔
すべて、思いのままに表示できるソフトが、どうしても見つからずですね、
CSSを選んだわけですが、

なんつーか、、、その、、



できないでFA?

●OSやブラウザの種類とバージョンについては必ず明記してください。

>>736-737
馬鹿じゃん

●OSやブラウザの種類とバージョンについては必ず明記してください。

>>748
デフォルトで入ってるヒラギノ明朝はW3とW6だよ。

>>750
>ホムペの作成が目的じゃない
いにしても
>CSSを選んだわけ
だから
>OSやブラウザの種類とバージョンについては必ず明記してください。

>>754
本筋じゃないし、Mac環境をよく知らんかったので適当に書いてた。

書いたら答えが出るんかいな
出そうにないがなｗｗｗｗｗ

>>750
＞すべて、思いのままに表示できるソフト
Illustratorでも使えば？

答えは >>748 で具体例まで挙げて提示されているわけだが、
実際に font-family が働くかどうかは実装によるわけで
>OSやブラウザの種類とバージョンについては必ず明記してください。

>>757
いや、本気でちょっといいかも。そんでSVGにして。
美味い具合にプラグイン広めたら、
アドビとティムたんから感謝される鴨よ。

もういいよ
できないんだろ？

ツール自作したから

723、739と、続けての御来臨ですか。

スタイルシートさっき、生まれて初めて書いたばっかりなんで、別人です

頓珍漢が続けて二人も、って意味でしょ。

いきなり尻見せー

>>760
俺は出来るよ

できないなんてのは>>739だけさ。

>>761-766
雑談は雑談スレへ

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

>>723よ、ちゃんと>>738の忠告を読んだのか？　

>>764
続いて前見せー

>765->766
ﾌﾟｯｗ

>>770

>>769-771
雑談は雑談スレへ

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

自治厨Uzeeeeeeeeeeeeeeeeeeeeeeeee!!
しかも770は違うし、771はミスとかだろ　いちいち消費スンナ

自治厨Uzeeeeeeeeeeeeeeeeeeeeeeeee!!
しかも770は違うし、771はミスとかだろ　いちいち消費スンナ

自治厨Uzeeeeeeeeeeeeeeeeeeeeeeeee!!
しかも770は違うし、771はミスとかだろ　いちいち消費スンナ

おい　オマイら　技術系の話が出来ないなら出て行ってくれ

>>776
同意

>>777
洒落のつもりなんだけど・・・

>>778
同意

>>779
禿同

おい　オマイら　技術系の話が出来ないなら出て行ってくれ

cssファイル名を_（アンダースコア）で始まる文字列にすることは問題ありますか？
例えば_hoge1.cssを作っておいてHOGE.cssの中で@import "./_hoge.css";とインポートしたいのです。

一応私のWin2k+IE6やらOpera7.23やらではできたのですが
そもそもこれはブラウザの話なのかサーバの話なのかプロトコルの話なのかすらわかりません。
あいまいな事はしないのが無難だって？そんな事言わないで教えてエロイ人。

×　@import "./_hoge.css";とインポートしたいのです。
○　@import "./_hoge1.css";とインポートしたいのです。

_（アンダースコア）で始まる文字列にする必然性は？

>>784
(ローカルで編集する際に)視認性を高めて
同じフォルダに入ってる他の種類のCSSファイルと区別しやすくする管理上の都合です。
たとえるならUNIXでいう.で始まるファイルみたいな。

だから別にa_hoge1.css, a_hoge2.css, ...というような名前にするやり方でもいいんですけどね。
仕様上はどうなってるのかが気になったもので。

なら、板違い

くだらないことで悩むなよ・・

>>723
うわあ

質問です。
ある高さ（height）の決まったブロック（div）の中にある
ブロック（dd）の縦位置を中央寄せにすることは出来るでしょうか。

<div>
<dl>
<dt>店舗名</dt><dd>○○店</dd>
<dt>電話</dt><dd>00-0000-0000</dd>
</dl>
</div>

のような html で、○○店、の文字列がサーバサイドで切り替わる
ページで、文字列の長さが可変なため、この dd の行数（高さ）が
特定できず、どうしようかな、と。

MacIE、MSIE は JS でCSSファイルを別途追記できるようにしており、
php も利用可能な環境です。

アドバイスをいただきたいです。よろしくお願いします。

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート 縦中央(垂直中央)」参照のこと。
　http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

>>790
どうもありがとう…

orz

質問しようと思ったら>>1以下のテンプレのリンクにあったよ
すごい充実ぶりだわ。
このテンプレ作った人に感謝
2ch最高♥

<div class="left"> </div>
で囲んだ領域に対してfloat: left; width: 15%;
の様に指定しています。
この範囲内にURLや長い英単語など途中で自動改行されない単語を入れると
ウインドウサイズを小さくしたときにwidthで指定した横幅からはみ出てしまうのですが
はみ出ないようにする方法はありませんか？
<wbr>を使うことも考えたのですが対応しているブラウザの数と
こちらが想定したより小さいウインドウサイズにされた場合どうしようもないのでこれは避けたいところです…

無理でしょう。　自分で答え書いているし・・・

wbrなんて、そもそも使ってはいけない部類のものだと思うが。
HTML4.01 Transitionalでさえ、仕様からはずされている。

やっぱり無理ですか…(´･ω･`)ｼｮﾎﾞｰﾝ
気休めにwidthの幅に多少余裕を持たせるくらいしかないかな…

overflow : hidden ; を使う手もあるにはあります。

ただし、
1． overflow が指定されている部分で IE のホイールクリックが利かなくなる。
2． もちろん、長い文字列などのはみ出た分は表示されなくなってしまう。
3． 幅を超えたものがあると、微妙に変な表示になる （これは限られたケースだとは思いますが）。
などの問題が出てしまうので、
この場合、解決策にはならないだろうと思いますが……。

cf．http://www.ne.jp/asahi/minazuki/bakera/html/css/render#overflow

>>793
改行を制御するword-breakプロパティがあるが、
いまだ勸告豫定のままで、WinIEしか實裝されてゐない。
http://east.portland.ne.jp/~sigekazu/css/international.htm
http://www.doraneko.org/misc/i18n-format/WD990127.html

つーかぶっちゃけurlが改行するくらい狭いスペースに文字書いても読みにくいだろ

長過ぎるurlはリンクボタンとか[ココ]とか書いて見えなくするとか・・
BBSとかの対策なら中身のperlとかでどうにか貼りつけられないようにするとか・・・
自分で書くスペースのとこの問題なら、もっと広々としたとこに書くようにするのが良いと思うね俺は

CSSの答えで言うなら、やっぱそういうときこそ幅の調節ってのが１番良いかと・・・

>>799
「ココ」とかそういうアンカーテキストは勘弁願いたい。
リンク先の内容が推測できるアンカーを設置して欲しい。
補足情報や助言的情報をtitle属性に記述しておくと親切。

CSSをユーザビリティの観点から導入しているなら、
「ココ」などというリンクはあり得ない。

テーブルレイアウトだと顰蹙買うから、とりあえずCSSでも使ってみるかー。
って観念で導入しているなら「ココ」とか「コチラ」などというリンクも在りえる。

perlで、URLの文字列なら先頭から何文字目までかをアンカーテキストとして書き出すようにするとか。
最低ドメインがわかれば「コチラ」よりはマシだと思う。

>>803
真ん中を省略、ってやったらHTML4.01仕様書への参照が「同じアンカー」になっちゃったことがあるな。

気休めにしかならんけど、
.left a {
display: block;
overflow: hidden;
}
とか。やはり>>799の言うようにurlが改行するくらい狭いスペースに
文字書いても読みにくいと思う。

>>91 に似てるんですけど、
<dt><a>１ページ</a></dt>　　<dd>説明１</dd>
<dt><a>２ページ</a></dt>　　<dd>説明２</dd>
<dt><a>３ページ</a></dt>　　<dd>説明３</dd>
このように横に並べて整形しようとして、
dt { width:9em; }
dd { margin-left:10em; margin-top:-1.4em; }

としたら、IE5.5,IE6.0,Moz,Operaのうち、WinIE6.0標準モードでだけリンクが効かなくなりました。
（いまはDOCTYPEを代えて互換モードになるようにしました）

同じ見た目の、いい方法がありましたら教えて下さい。
（compact、run-inっていうのは違いますよね？）

>>806
普通にfloat使うのは駄目なの？

いえ、やりかたがよくわかってない。
この方法でやって、Mozillaで、うまくいったー　と思ってたら、

クリックできないぞー！　って苦情が。
（IEは5.5はあるんですけど、6.0は入れてない）

floatで、どういうふうにすればいいんでしょうか？

dt { float:left ; clear: both; }
dd { float: left ; }

これであってますか？

IE６で確認とりました。動きましたー
ありがとうございました！

>>808-810
いちいちｳｯｻｲ

>>809
floatさせる要素にはwidth指定が必須
>>6のQ4ね

list-atyle-colorを定義してくれW3Cさんよ

list-atyle-colorねぇ・・・

　　　　　わがんね。

ほーー すごい独自拡張。

(･∀・)atyle!

>>6のQ4に、floatさせる要素にはwidth指定が必須（img要素以外）。とありますが

p.img { float:left; }
<p class="img"><img src="./0.gif" alt="" width="" height=""></p>
<p>あああ </p>

のように記述している場合、widthの指定はしなくていいのでしょうか？

>>817
いや、必要。

>>817
ﾋﾟｶﾌﾞｰになるよー　〜（・∀・）〜　消えたりするよー

>>817
img要素にfloat指定するときは確か、
display:black;
はいらないが、widthはいる。

他のインライン要素にfloatを指定するときは、
display:block
が必要。

ok?

>>818-819
どうもありがとうございました。819さん参考になりました。

（ ﾟдﾟ）>>820

ま、間違えた＿|￣|○
ゴメンナサイ。820さん参考になりました。

atyle に続いて black 新登場

<samp> と打とうとして <smap> と打ってしまって鬱。

>>823
なんだよ。賢いﾔｼかと思ったのに。
>>820はデタラメ。最近多いから気をつけて。

>>826
なんだお前？
もしかしてimg要素にfloat指定するときにdisplay:blockが必要だとか思ってるわけ？
それとも、他のインライン要素にfloat指定するときに、display:blockとwidthが必要では
ないと思ってるわけ？

>>827
ハイハイ良かったね。お前みたいなウンコはこなくていい。

>>827
反応早くてﾌﾞﾌﾞった。

回答者気取りのクセにハテナハテナうっせー奴だな

>>827
display:blockの指定はどんな要素でも必要ないよ。

>>826
最近CSSいじり始めたので…（;´Д｀）

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

>>820
（ ﾟдﾟ）

ていうかimg要素みたいに固有の幅がある要素にfloat指定する時はwidthいらん。

>>834
画像を縮小表示させる時とかは？

>>835
widthを指定せずに縮小表示させる方法を教えてくれ

痛すぎ。

>>835-836
必須ではないの意

最近どうかしてるね。

>>820
>>835-836
（ ﾟдﾟ）

あれれ
俺なんか変な事言いました？

>>841
>>838

馬鹿ばっか。

>>842
見落としてました、どもです
駄ﾚｽ失礼ｼﾏｽﾀ

floatした時点でブロック要素になってるんだったな。勘違いだ。

>>845
827 名前:820 ageるぜ 投稿日:04/07/10 21:16 ID:???
> >>826
> なんだお前？
> もしかしてimg要素にfloat指定するときにdisplay:blockが必要だとか思ってるわけ？
> それとも、他のインライン要素にfloat指定するときに、display:blockとwidthが必要では
> ないと思ってるわけ？
>
>

メ欄が泣けてくるな。

p.img { float:left; }
<p class="img"><img src="./0.gif" alt="" width="400" height="400"></p>
<p>あああ </p>

p.img img { float:left; }
<p class="img"><img src="./0.gif" alt="" width="400" height="400"></p>
<p>あああ </p>

前者の場合はwidthを指定するということでしょうか・・・？

floatプロパティを指定する場合は、要素や属性に関係なくwidthが必須。

あーもうだからどっちなんだよ混乱させんなよ
俺が書き込むほど悩ませちゃだめだろ！ばか！

>>849
>>848が答えてるじゃん。

>>847
まず要素がfloatするって意味を理解しといたほうがいいような
まぁ前者にはwidthが必要です
そうじゃないと後続要素が流れ込む場所がないからね

>>848
必須だけど明示的に宣言する必要はないよね(・∀・)

ちょっと語弊があるな＾＾；
必須だけど明示的に宣言しなくてもいい場合もあるよね　ですね

>>852
はい？
明示的に宣言、の意味がわからん。
必須ってことは、常に書かなければならないわけで、
常に書いているのに「明示的に宣言しない」っていうのはどういう状態を指してるんだ？

>>817-852
つうか、藻前ら仕様書嫁!

10.3.5 非置換浮動要素の場合 （Floating, non-replaced elements）

'left' 、'right' 、'width' 、'margin-left' 、'margin-right' の指定値が'auto'ならば、
その算出値は'0'になる。

10.3.6 置換浮動要素の場合 （Floating, replaced elements）

'left' 、'right' 、'margin-left' 、'margin-right' の指定値が'auto'ならば、その算
出値は'0'になる。 'width' の指定値が'auto'ならば、その算出値は 内在寸法 と同じ
になる。

img要素は置換要素だから、widthを指定しない(すなわちwidth:auto)場合は、
その内在寸法が使われる、ということ。

すみません。
bodyにwidth て効きませんでしたっけ？

>>855
はい

>>855
ちゃんとしたCSS適合ブラウザでは効きます。
WinIE5.5以前、WinIE6互換モードでは効きません。

>>854
＞img要素は置換要素だから、widthを指定しない(すなわちwidth:auto)場合は、
＞その内在寸法が使われる、ということ。

これを「明示的に宣言しなくてもいい場合」って言いたかったんだけどね＾＾；
必須だけど　は余計でしたｺﾞﾒﾝﾁｬｲ

>>848-854
レスありがとうございました。
854さん、わかりやすい説明どうもでした。

>>859
俺がもういっちょ分かりやすい説明してやる

質　問　す　る　前　に　仕　様　書　読　め

すみません。仕様書ってどこにあるんですか？
w3c.org？　日本語ってありますか？

>>861
ttp://w3c.orz

orzかよ（ｗ

not w3, but w3.

www.w3c.org に繋げるとwww.w3.orgに転送されるよ

>>861
【仕様書】【CSS検証】>>3

暇だぞ、今日の質問はまだか
無職の俺が答えてやろう

TABLEタグで罫線を1ドットのきれいな線にしたいのですが
一番楽でどのブラウザでもそこそこ見れる方法というと
どんなもんですか？

CSSを使う方法

>>869
そりゃそうだ。このスレで聞いてるんだから。

罫線が引きたいならborderをキーワードに調べてみな

>>868
> 一番楽でどのブラウザでもそこそこ見れる方法

この辺が答える側のやる気を激しく削ごうとしている。
釣られすぎ、漏れ。

別に答えたくなければ答えなくてもいいよ　という意思の表れでは

確認ブラウザ→IE6、ネスケ7、オペラ7

質問です。
* {cursor:default; background:#CCCCCC; color:#000000; font-size:100%;
　 line-height:110%; border:0px hidden; }
.dt {color:#0066CC; font-weight:bold; vertical-align:top; }
↑のようにcssを記述し、html内のテーブルに
<colgroup class="dt"></colgroup>
をいれたんですがclass="dt"のcolor:#0066CC;だけが機能しません。
<col>でも結果は同じでした。

全称セレクタはクラスセレクタより強い、ということでしょうか。
そこで全称セレクタ*をbodyに変更する方法を考えたんですが
そうした場合に起こり得る弊害は、具体的にどのようなものですか？

もう一つ。
元々アンカー全般はboldにしてるんですが、現在のページの階層を表示し
そこのアンカーだけ細くしようと考えました。
css↓
a, .fb {font-weight:bold; }
.ex {font-weight:normal; font-size:80%; }
html↓
<span class="ex">
<a href="aaa.html">あ</a>＞
<a href="bbb.html">い</a>＞(略)＞
<span class="fb">現在地</span>
</span>
階層が深くなった時にいちいちアンカー内にclass指定するのが('A`)ﾒﾝﾄﾞｲので
外側の<span>で一まとめにしようとしたんですが効きませんでした。<div>でも同じ。

今現在は妥協して
.fs {font-size:80%; }
<span class="fs">
<a href="aaa.html" class="ex">あ</a>＞
<a href="bbb.html" class="ex">い</a>＞(略)＞
<span class="fb">現在地</span>
</span>
としてますが、外側の<span>or<div>で一まとめにできないのは何故でしょう？

メニューのみリンクの色を変更したいんですが、こう言う書き方で書式は合ってますか？

a:link.menu { color : #FFFFFF }
a:visited.menu { color : #CCCCCC }

一応、IEやOperaでは狙い通りに表示されるようですが、Dreamweaverでは認識してくれません
よろしくお願いします。

a.menu:linkのほうがいいかも

<input type="password">とやるとブラウザのバージョンによっては
アスタリスク(*)で表示される場合と黒丸(●)で表示される場合がありますが
バージョンによらずアスタリスクで表示する方法ってありますでしょうか？
どなたかお知恵をー。

>>876
メニューってことは、リストになることが多かろうて、
ul に class="menu" とすると、スッキリ。

>>874
そもそもcolgroupのスタイル指定に関してごにょごにょあると思われ。
http://cssbug.at.infoseek.co.jp/misc/col.html
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/tables.html

>>875
子セレクタとか子孫セレクタとかでは解決しない?

>>874
>全称セレクタはクラスセレクタより強い、ということでしょうか。
全称セレクタは最も詳細度が低く「0」、クラスセレクタは「10」で数える。

><colgroup class="dt"></colgroup>
>をいれたんですがclass="dt"のcolor:#0066CC;だけが機能しません。

セルは列(colgroup, col要素)ではなく，行(tbody, tr, etc…)の子孫になっている。
従って，列関連要素に指定した前景色('color')がセルに継承されることはあり得ない。
列に反映されるプロパティは 'border', 'background', 'width', 'visibility: collapse' に限られている。
WinIE では，これら以外のプロパティが適用されたりするが，それは明らかにイレギュラー。

>>875
a, .fb {font-weight:bold; }
.ex { font-size: 80%; }
.ex a { font-weight: normal; }

>>876
>a:link.menu
文法上は問題ないが、>>877 の通りにした方が無難。
もしくは >>879 の通りに ul.menu a:link {} にするのも良い。

>>878
それは HTML のフォーム制御の実装の問題であって CSS は全く関係ない。
passwordタイプのフィールドはデリケートな内容を隠すことが目的であり、
どんな文字列で置き換えられようが、文書制作者が気にすることではない。
また、利用者が気にすることもない。まったくもってナンセンスなこと。

>>881
なるほど。理解しました。

>874について
前IEで全称セレクタを使ってなかった時、<col>でセルの文字に色がついたから
普通に出来るもんだと思ってたorz
<col>はネスケやオペラで機能しないので使わないことにします。
>875
継承か…。ややこしそうだったからスルーしてたけど、これを機会に勉強してみます。

ありがとさまでした。

画像にリンクを張ると枠がついてしまうので
仕方なくborder=0をするのですが、
<border>はHTML 4.01の規格から除外されたらしいので、
CSSで枠を出ないように設定するにはどうすればいいのでしょうか？

>>883
border

>>877,879,881

みなさんありがとうございます！
ulタグ使ってたんでスッキリ解決しました。

>>883　なぜＦＡＱを見ない？　A9（>>7）だ。

target属性の有無によって色を変えるとかできませんか？
<a href="xxx.html" target="_blank"> ←だと赤く
<a href="xxx.html">←だと青く見たいな感じに

>>887
>4

>>887
属性で振り分け、ってあるけど、実装されてるブラウザがあるかどうか、って話だな。
どうせ属性で振り分けるならlang辺りを使いたいな。俺なら。

いや、あるじゃん

IE系以外使ってて、ユーザCSSでやるのならアリだわな。

ttp://hp.vector.co.jp/authors/VA022006/css/selector.html#attribute-selectors
が該当するものだと思うんですが
IE系ではできないということでFA?

FA。
今更IEにこだわる必要も無かろう。切り捨てて楽になりなはれ。

THX
楽になります

IE向けにはclass振れば？

だな。
数々の非互換実装の罠（ほとんどIEｗ）をくぐり抜け、クロスブラウザを達成した時のあの快感といったら・・・
ﾔﾒﾗﾚﾝ(；ﾟ∀ﾟ)=3

<div class=abc>
<font style="color:#000">あいうえお</font>
</div>

ソースに手を加えず、CSSのみで文字色を変更したいのですが可能でしょうか？

>>897
可能

>>897
無理

>>897
核爆発

cssファイルとhtmlファイルを分けて、読み込み式にした方がいいと聞いたのですが、
理由はなぜでしょう？
自分のサイトは、ページによってレイアウトが違うので、htmlの中に組み込んでいるのですが、
デメリットがあるなら教えて下さい。

>>901
デメリットなどありません。どうぞそのままご利用下さい。

質問です

テーブルなどのポジションを調整したいのですが
縦座標を指定する『vertical-align』に対して、
横座標の指定というのはどのように行えば良いのでしょうか？

>>897
　fontタグは非推奨。CSS使ってる癖に、恥かしいゾ。
>>901
同じレイアウトや配色を他のページにも適用させたくなった時、不便。
>>903
　>>4でpositionについて学習しなさい。vertical-alignについても誤解してないか？

>>901
「ページによってレイアウトが違う」ような統一感のないサイトは糞。
糞サイトに外部スタイルを適用するメリットはないんで、好きにすれば。

>>904
positionで万事解決しました
アドバイスどうもでした

>>904
元々あるソースに手を加えない事を前提にした質問です。
引き続きご回答お持ちいたしております。

もう相手にするのよしなよ

>>907
ただ文字の色を変えればいいだけなら下のソースで。
IEで効かないのは困るんだけど…とか、htmlやCSSとしてどうよ…とか仰るのなら、
最初からfontタグは排除してください。

<html>
<head>
<style type="text/css">
<!--
div.abc:before {content:"あいうえお";color:red;}
div.abc font{display:none;}
-->
</style>
<title>test</title>
</head>
<body>
/*以下変更は許されない*/
<div class="abc">
<font style="color:#000">あいうえお</font>
</div>
/*ここまで*/
</body>
</html>

あわわ…
/**/は<!---->に変更してください。
やっちまいました。

うはははは↑。
// 気持ちは分かる。

IEで効かないのならいいです、引き続きご回答お待ちいたしております

>>912
そうなるともう方法はないね。待つだけ無駄だから、あきらめて他当たりな。
contentが効かないのはIEが仕様に沿ってないせいなので、文句なら作った人に言ってね。
あ、CSSじゃないんだけど色付きセロファンでも貼ったらどうですか？
もしくはサングラスでもかけてみるとか。

ごたくはいいです

>>912
微妙にスレ違いだが、CSS ではなく JSS でやればぜんぜん可能。
つか、逆切れよくない。

>>914
ごたくは要らないというなら>>909

>>915
JSSってなんですか？

>916
揚げ足取りお疲れ様です、頭冷やしてくださいね＾＾

JSSSの間違いか?

>>916
漏れも一度あたま冷やした方がいいと思う。
語彙の検索ぐらい、自分でしようよ。

>>918
JSSS じゃなくて、JSS ですよ。
スタイルシートなのはいいけど CSS ではないので、微妙にスレ違い、
と書きました。

揚げ足取りはしてませんよ。
訊かれたことに対して、真摯に回答しています。

>>897の問題は>>909で解決できました。/*IEで効かないのはCSSではなくUAの問題です。*/
IEで効かなければならないというのなら無理ですとも>>909で述べました。
それでもIEで、との事（>>912）でしたので>>909の補足として>>913です。
>>914のごたくは要りませんとのことですので、>>897の問題に対しての回答>>909を指し示しました。
（ごたくはいらない、というのは、出来るか出来ないか率直に示せの意味でいいのすよね？）

>>916
JSS+スタイルシートで検索かけてみてようやくなんだかわかりました。
JSS単体での検索結果が芳しくなかったもので…安易に質問してすみません。

>>920
レスアンカ間違ってるよ
つーか、単なる言いがかりだろうから放っておけばいいのに

ってことで気を取り直して次の質問ﾄﾞｿﾞｰ

もういいですから＾＾；

>>897
なんで<font>で、その上style属性なんか使ってるんだ？　セレクタの詳細度を考慮しろよ。

http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cascade.html#specificity
HTMLでは、当該要素のstyle属性値としてスタイル規則を記述できる。この場合、
属性値として記述された規則には対応するセレクタが存在しないが、カスケード
アルゴリズムの手順3を処理できる様に、これらの規則は一意セレクタを持つもの
として（すなわち詳細度100として）考える。

http://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity
style属性は他のどの規則よりも優先順位が高くなる

●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。

{ !important ;}

>>923
ソースを弄らないのが条件、とあるので、
何か理由があるのではないかと。

>>925
この場合importantは無駄だろ。

>>926
試してから言ってる？　IEでも文字色変化するよ。
.abc font {color:f00 !important;}

正しくは　.abc font {color:#f00 !important;}

>>926　理由があるなら理由を示さないと、当然つっこまれるわな。

>>927
ごめんよ。
俺
.abc font {color:#f00 ;!important}
こうやって書いてた。

いいかげんしつこいので続きは↓で
http://pc5.2ch.net/test/read.cgi/hp/1086686223/

次の質問ﾄﾞｿﾞｰ

>>927さんの書き込みで解決いたしました。
普段fontタグなんて使用しないので、セレクタにできるなんて思いつきませんでした。
皆さんありがとうございました。

それは頭がわるいうわなにをするやめｒｑｗせｄｒｆｔｇｙふじこｌｐ；

初心者スレ95の898を思い出したけど、まぁどうでもいいか。

<dl>
<dt>名前</dt>
<dd><input type="text" name="name" value="" /></dd>
<dt>メールアドレス</dt>
<dd><input type="text" name="mail" value="" /></dd>
</dl>
を、

dl{
border:1px solid #000;
}
dd{
margin-top:-1em;
margin-left:20em;
}
とすると、ボーダーが横に何本も出てきてしまいます。
DDの横並びスタイルを解除すれば、普通に全体を線で囲んでくれるのですが…。
どうすればいいでしょうか？

書き忘れましたが、
名前に897と書いてないレスは偽者なのでお間違いなく。

>>936
ついでにトリップつけれ。

横並びにしたけりゃDDとDTをインラインにしろ。
マージンで調節するなんてのは、糞だ。

>>936
ついでにコテハンになっちまえ。

<style type="text/css">
.left { float: left; width: 30%; border: 1px solid red; }
.right { margin-left: 32%; width: 70%; border: 1px solid red; }
.scrolling { overflow: scroll; }
</style>
というスタイルを
<p class="left">
left<br>
left<br>
...多めに
</p>
<p class="right">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...はみ出すくらいたくさん
</p>
<p class="right scrolling">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...はみ出すくらいたくさん
</p>
へ適用したものをMozilla 1.7で見ると、
class="right"とclass="right scrolling"のボックスの位置が違うのは仕様ですか？

>>938
display:inline;よりfloat:left;がおすすめ。FAQに既出。

２つのボックスにfloatをつかって横並びにしたのですが、
一つ目は左、二つ目はセンターと表示させることは出来ないでしょうか？
.main {height:700px;
width:300px;
padding:0px;
border:0px;
margin:0px;
margin-left:auto;
margin-right:auto;
text-align:center;
float:left;

}

.con {height:700px;
width:170px;
padding:2px;
border:2px solid #ffffff;
margin:0px;
background-color:#000000;
float:left;

}

書き忘れすみません。
こう書いたのですができませんでした。
書き方が間違ってるんでしょうか？

>>943

左によるブロック{
width: 適宜;
float: left;
}

真ん中によるブロック{
margin: 適宜 auto;
width: 適宜;
}

でなると思われ。
真ん中ブロックが左ブロックにぶつかることを考慮するなら、
真ん中ブロックの幅をautoにして、左右マージンを左の幅にした後、
その子供ブロックを真ん中寄せにすれば。


すべて妄想ですが。

Tablen内の文字の大きさを指定するCSSが見つかりません・・
よろしければ、何方か教えてください

>>945
font-size

>>946

table {font size:○○;}　　ですか？

さすがﾀﾌﾞﾚﾝ!

>>947
>>946の方の仰るとおり、「 table {font-size : } 」 で指定可能ですよ。
勝手にハイフンを抜いてはいけません。

IMGにAでリンクをしたら枠でてきた。どう対処すれば？

>>950
border

>>950
>>7のQ9

border？

おいしい。ありがとう。>>951 >>952

画像にオンマウスすると、また別の画像に変化する奴はありますでしょーか？

>>955
onmouse-image

onmouse-image?

>>955
背景画像ならほばー

onmouse-image でどうするのでしょーか？

>>955
釣られてるんだよ。
そういうのはJavaScriptなどでやるもんだ。
ロールオーバー　でぐぐれ。

>>960

ありがとうございます。釣られました

>>944
すみませんできませんでした。

>>962
できるがな。

質問です。過去に出ている質問だったら、ﾄﾞｺに出ているかだけでも教えてくれれば
ものすごい助かります。

<div style="position : absolute; top : 0px; left : 0px; width : 100%; height : 10%;">
ページタイトル</div>

<div style="position : absolute; top : 10%; left : 0px; width : 25%; height : 100%;">
メニュー</div>

<div style="position : absolute; top : 10%; left : 25%; width : 75%; height : 100%;">
メインエリア</div>

これで配置はうまくいったんですが。bodyのマージンは無視するし、
ウィンドウを縮めると、それぞれのエリアが重なるしでエライことになります。
なにを付け足せばいいのか、どれをいじればいいのか、それだけでも教えてください。

>>964
絶対配置とはそういうものです。タイトル部分はそのまま置けば良いし、
メニュー部分は float すれば良いでしょう。
あと、height:100%; は期待しない方が良いです。

>>965
そういうものですか。ｆｌｏａｔ試してみます。
教えてくれてありがとう

>>964
position : absolute;
が重なるとコピペがきかんくなるよ

相変わらず面白いスレだなぁ・・・

CSS有効時には非表示で、CSS無効時には表示させたい場合、
span.hogehoge { display: none }
こんな感じで可能ですけど、
逆にCSS有効時には表示させ、無効時には非表示とするにはどうすればいいですか？

>>962 >>944
すいません理解できませんでした。

>>969
CSSだけじゃ無理じゃない？長文でなけりゃcontentで何とかなりそうだけど。

>>971
content！
ありがとうございます！
p.hoge:before { content: "ほげ" }
content！content！



対応してないブラウザ多いんですね……(´；ω；｀)

>>970
>>944 で書いたものにそれぞれボーダーを付けて表示し、
ウィンドウの大きさ（幅）を小さくしていくと、ボーダーが交差するでしょ。
（MSIEはしないかもしれないが、仕様上するものなのでそう思って。）

で、そうなると厄介なので、真ん中ブロックの左右マージンを auto ではなく、
左ブロックの幅と同じにして、width を固定しないで auto にする。
そうすると左ブロックと真ん中に幅が可変なブロックが出来るでしょ。

その可変幅ブロックの中に、改めて、真ん中寄せブロックを作れば、
という意味で書きました。>>944 は。

しかし、今になって読み返すと、いずれにせよブロックは交差してしまう
ので、可変幅ブロックをそのまま使うか、全体を固定幅ブロックの小要素
にするかのどちらかを選択しなければならない気がしてきた。

>>969
font{color:#000000;}
<font color="#ffffff">ほげ</font>

冗談はともかく、そろそろどなたか新スレをお願いします

じゃあ立てるね。
テンプレ変更ある？
ざっとスレみてみるけど、変更があるようだったら教えてください。

次
/* CSS･スタイルシート質問スレッド【33】 */
http://pc5.2ch.net/test/read.cgi/hp/1089975931/

>>2の前スレをなんとかした方がいいとオモタ。

まとめサイト修正済み。
ローカルルールも報告済みです。
http://qb5.2ch.net/test/read.cgi/operate/1088177713/199n

>>972
>対応してないブラウザ多いんですね……(´；ω；｀)
対応してないのはIEだけのような希ガス

>>975
スレ立て乙です。

>>974
他に方法も無いみたいだし、それはそれでいい（良くないけど）アイデアかも……

>>978
新しめのネットスケープとかは対応してるみたいですね。
けどOperaとかが対応しててもIEが対応してないのは痛いでつ。

>>975
乙です。

↑最新版のネスケでも今となってはかなり古い物なのだが…。

質問です。IDの使い方でどうもよく分からないところがあるのですが、
例えば｢id="menu"｣がサイト内の複数のhtmlファイルに存在するのは
問題がないんですよね？

>>982
ID重複不可、は「同一ドキュメント内」でのこと。

>>983
では一つのサイト内で複数回使用しても
別ドキュメントなら問題ないということですね。
よく考えたらその使い方が駄目なら、管理面でデメリット大きそうですよね…。
ありがとうございました。

>>984
IDってCSS適応のためにあるもんじゃないぞ？
それ以上は初心者スレで聞け。
俺が答えてやるし。

>>982=>>984
http://pc5.2ch.net/test/read.cgi/hp/1086686223/

うめ

　　　　　　　　　☆ ﾁﾝ　　　　　ﾏﾁｸﾀﾋﾞﾚﾀ〜
　　　　　　　　　　　　　　　　　　　　　　　　　ﾏﾁｸﾀﾋﾞﾚﾀ〜
　　　 　 　 ☆　ﾁﾝ　　〃　 ∧＿∧　　　／￣￣￣￣￣￣￣￣
　 　 　 　 　　ヽ　＿＿_＼（＼・∀・）　＜　　新スレマダーーー？
　　 　 　 　 　 　 ＼＿／⊂　⊂＿ )　　　＼＿＿＿＿＿＿＿＿
　　 　 　 　 　 ／￣￣￣￣￣￣ ／|
　　　　　　　　|￣￣￣￣￣￣￣|　 |
　　　　　　　　|　.愛媛みかん.　 |／

　 .＿＿
ヽ|・∀・|ノ ＜マダー？
　　|＿＿|
　 　|　|

>>989 ズレ�j　orz

>>988-990
>>976

う、来てみたら990過ぎで次スレ無しか・・・

質問です。
ｽﾀｲﾙシートを用いて、テーブルセル内で画像と文字を重ねて表示をしたいのですが
画像自体にフィルタを掛けたいので、background-image は使えません。
テーブル枠内で画像を表示したいので絶対位置指定を使うわけにもいきません。

実現の仕方がわかる方はいませんでしょうか？

━━━━╋━━━━━━━━━━━╋　太線━　　 ：テーブル
.　　　　　 ┃　　　┌───────┐┃　細線枠内　：画像
.　　　　　 ┃　　　│　 [ 文字列 ]　　 │┃ ←こうしたい。
. 　　　　　┃　　　└───────┘┃
━━━━╋━━━━━━━━━━━╋
.　　　　　 ┃　　　┌───────┐┃
.　　　　　 ┃　　　│　 　　 　　　　　　.│┃　←こうなってしまう。
. 　　　　　┃　　　└───────┘┃
.　　　　　 ┃　　　　　　 [ 文字列 ]　　　 ┃
━━━━╋━━━━━━━━━━━╋

って少し上に次スレあるじゃん・・・orz
>>992は只の埋め立てってことでスルーしてくだしゃい・・・

書いておいたほうがいいな

/* CSS･スタイルシート質問スレッド【33】 */
http://pc5.2ch.net/test/read.cgi/hp/1089975931/

以後放置でよろ

番号間違えてた。

/* CSS･スタイルシート質問スレッド【33】 */
http://pc5.2ch.net/test/read.cgi/hp/1089975931/l50

997

998

999

<strong>1 0 0 0 G E T</strong>

このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。