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

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/
27　http://pc5.2ch.net/test/read.cgi/hp/1074845459/
28　http://pc5.2ch.net/test/read.cgi/hp/1076968824/
【前スレッド】
http://pc5.2ch.net/test/read.cgi/hp/1079598884/

【関聯スレッド】
・CSS/DHTMLバグ辞典スレッド 第４版
　http://pc5.2ch.net/test/read.cgi/hp/1078463560/
・代替スタイルシートに萌え〜
　http://pc5.2ch.net/test/read.cgi/hp/991400015/
・独自拡張、草案段階のCSSについて語れ
　http://pc5.2ch.net/test/read.cgi/hp/1019912046/
・* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc5.2ch.net/test/read.cgi/hp/1038678267/
・CSSでイケてるデザインサイト 21
　http://pc5.2ch.net/test/read.cgi/hp/1078361001/

【仕様書】
・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/2004maki/
・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

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

この URL はこちら↑が正しい。

前スレで指摘したんだけど、気付いてもらえなかったか。
http://pc5.2ch.net/test/read.cgi/hp/1079598884/928

次回からスレッド立てる人は、下記それぞれの変更と追加とをよろしく。

■ ローカルルール等リンク先更新総合スレッド 10
http://qb3.2ch.net/test/read.cgi/operate/1079706809/l50

CSS・スタイルシート質問スレッド
　http://web2ch.s31.xrea.com:8080/?CSS
【過去ログ】http://web2ch.s31.xrea.com:8080/?CSSLog

a 要素の色を親要素の色(色は不定)と同じにしたいんですが、
a{color:inherit !important;}
のように指定しても反映されません。
WinMe の IE6.0 で確認しました。

ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#value-def-inherit
には、
> CSS2 のあらゆるプロパティは指定値として「inherit」という値を指定することができます。
> この値は，当該要素のそのプロパティが，親要素と同じ算出値を取ることを意味します。
> 「inherit」を明示的に設定することによって，通常は継承しないプロパティであっても，強制的に継承させることができます。
とあるんですが、特定のセレクタには効かないものなんでしょうか。

>>11
IEはinheritに対応してないです。

<html>
<head>
<title>質問です</title>
<style type="text/css">
<!--
div.class1{
background-color:red;
width:800px;
height:800px
}
div.class2{
background-color:blue;
width:400px;
height:800px;
margin-right:0px
}
#position1{right:0px}
-->
</style>
</head>
<body>
<div class="class1">
<p>テスト</p>
<div class="class2" id="position1">
<p>この青を→に移動させたいです。<br>
margin-right:0pxでも、position{right:0px}でもだめでした。</p>
</div></div>
</body>
</html>

<html>
<head>
<title>質問です</title>
<style type="text/css">
<!--
div.class1{
background-color:red;
width:800px;
height:800px
}
div.class2{
background-color:blue;
width:400px;
height:800px;
position:absolute
}
#position1{right:0px}
-->
</style>
</head>
<body>
<div class="class1">
<p>テスト</p>
<div class="class2" id="position1">
<p>すいません質問変えます。<br>
class2はclass1の中に書いたのに<br>
なぜ赤の中の一番右にならないのでしょうか。<br>
</p>
</div></div>
</body>
</html>

>>13
>5-6

>>13-14
margin-right:0; を「右寄せ」だと思ってるんですか?
とりあえず基礎からやりなおしてくだちい。

以上。

>>12
うわー、ボケてました。IE 効かないんでしたね。
即答ありがとうございました。

>>14
下のようにしたいという質問なの。
段組という趣旨なら根本的に違うんだけど （´・ω・`）

<style type="text/css">
<!--
div.class1{
background-color:red;
width:800px;
height:800px;
}
div.class2{
background-color:blue;
width:400px;
height:800px;
margin-left : 400px;
}
-->
</style>
</head>
<body>
<div class="class1">
<p>テスト</p>
<div class="class2">
<p>すいません質問変えます。<br>
class2はclass1の中に書いたのに<br>
なぜ赤の中の一番右にならないのでしょうか。<br>
</p>
</div></div>
</body>
</html>

>>18
>>14 のコードの div.class1 の宣言に position:relative; を加えてごらん。
ちゃんと、赤の中のいちばん右になるから。

position:abusolute の配置の基準ブロックは、position:relative; が指定された
親要素。
直接の親がそうでないなら、どんどん親ブロックをさかのぼって、基準ブロックを探す。
もし、どの親ブロックにもそれがついてないなら、body 要素が基準ブロックに
なるんだよ。

位置指定について
http://www.fromdfj.net/html/position.html

質問です。
http://www5e.biglobe.ne.jp/~level0/mozilla/#20040425_SiteDesign2

これって、なぜなのでしょう？考えたけれどわかりません。

疑似クラスはセレクタ内のどこにでも記述できるが、疑似要素はセレクタの主体の後にのみ記述できる。

とありますが
linkに関する擬似クラスも主体以外に設定できるのでしょうか？
a:link emというセレクタは無効でした、UAが未対応なだけなのでしょうか？
それともやはり主体にしか設定できないのでしょうか？

正しいかどうか知らないが俺は
a:visited img{border:none;}として
既に行ったリンク先の画像の枠線は消している
a:visited{border:none;}では無理だった。

list-style-type: none
にしても左側の空白って消えないんですかね？
マークが無くなったのなら左に詰めて欲しいんだけど……

>>23
ul の padding 部分にあるのです。マーカーは。

>>24
ごめん、liのマージン部分だったかもしれん。
ともかく、background-image 見たいな存在感です。

>>23
http://www.mozilla.gr.jp/standards/webtips/webtips0034.html

>>24, >>26
どうもありがとうございます。
ulとliのmarginとpaddingを記述することで解決できました。

隣接セレクタはIEじゃ解釈してくれないんですか？
ネスケ7とオペラなら三個目のボックスのボーダーが緑になるんですが…。
書き方が間違ってたりするのかな？

<html>
<head>
<style type="text/css">
<!--
.box1 {border: red 1px solid;}
.box2 {border: blue 1px solid;}
.box2+.box1 {border: green 1px solid;}
-->
</style>
</head>
<body>

<h1>隣接セレクタテスト</h1>

<div class="box1"><h2>box1</h2><p>※赤のボーダー</p></div>

<div class="box2"><h2>box2</h2><p>※青のボーダー</p></div>

<div class="box1"><h2>box2直後のbox1</h2><p>※緑のボーダーのはずなんだけど…。</p></div>

</body>
</html>

>>28
IEじゃ解釈してくれません。

>>29
了解しました。ありがとう。

新スレそうそう、>>4 を読まない厨房ばかりだな…

>>28,29
IE使ってて、CSSを語らないで下さい。

>>32
市場占有率一位のアイイーを無視して、シーエスエスを語らないでください

インラインフレームに他のサイト（掲示板等）をリンクさせた場合
インラインフレームのスクロールバーの色を変えることはできないのですか？

>>34
ソース出さないと誤りを指摘できない。

>>34
iframe によって埋め込まれた文書のスクロールバー設定は、
埋め込まれた側に指定されているスタイル設定に依存します。
従って、被管理者に頼んで「自分の好みの色」に設定して貰うしかありません。
それよりも、埋め込む行為自体の承諾を得る必要がありそうですが。

>>34
他人のサイトを自分の物のように見る。これダメダメ。
　著作権て知ってるかい？

「せ」が抜けちゃった。

>>37
おそらく他人のサイトではなく、レンタル掲示板をトップページに表示させたいとかだと思われる

>>39
そのとおりです。
>>36さん、どうもありがとうございました！

>>33
IEのCSS実装が如何に酷くても「標準」に合わせる必要があるのが現実か…

質問させて下さい。HR（水平線）を平面の1pxで画面端まで付けたいのですが、
ネスケ7ではheigth:1px　border:1px　noshade等が効かず立体的で太くなってしまいます。
CSSファイルではなくBODY内のHRに直接noshadeを指定すると影はなくなりますが、一括で指定したいしsize=1が効きません。

色々表現を変えて付けたり消したりやってみても駄目でした。どなたか分かる方お願いします。

>>42
HRってのはそういうものさ

1pxの画像で代用汁

（;´д｀）ﾏｼﾞﾃﾞ？
IEでは問題なく1px表示出来るんで、どうにかならないかと思っていたんですが…
ネスケを諦めるか1pxの画像しか無いですね。どうも有難うございました。

>>42 まだ見ていてくれるといいんだが。
hr {
　border:none;
　border-top:1px dashed black;
}
これでどのブラウザでもいけるよ。hr もボックス要素、つまり箱なんだ。
ならば一辺だけを表示させればよろしい。IEの実装は、便利だけど不正確。

>>43-44 自分が知らないことを人に教えてはいけない。

dashed は余計だったな。消し忘れた。solid にでもしてください。

>>46
それだけじゃhrのように中央にならないだろ。
自分でこの程度でいいだろうと勝手に解釈してできたつもりになってはいけない。

>>48
中央って何？

>>49

margin-right: auto;
margin-left: auto;

のことじゃない？憶測だけど。

>>50
いや、おそらく、直線が上に 1px ずれることを言っているんだろう。

>>48
その批判はある意味正当だと認めよう。しかしならばどうするのか。
こう書いてみても、今度はIEで灰色の線になってしまう。
hr {
　border:none;
　height:1px;
　background-color:black;
}

画像などを使うのはあくまで最後の手段だ。私は >>46 のスタイルに
適切な上下マージンを指定してやるのがベストだと思っている。
他に代案があるなら、お聞かせ願いたい。

hr自体いらんだろ。

>>52
そういう意見があるのはわかるが、今はそういう話をしているのではないだろう？

ここ見ろ。>>4のリンク先にあります。

hr要素へのスタイル指定
http://cssbug.at.infoseek.co.jp/misc/hr.html

>>52よ　回答者のレベルが低いから真意を読みとってもらえないな。

自演乙

こうもねじ曲がっているとは・・・　
　病気じゃねーかー？

黒ずんでねじ曲がってる１双のビラビラは病気でしょうか？

hr{
color: #000;
height : 1px;
border-style: none;
background-color : #000;
}

こうすりゃいいんじゃないの？


>>51
中途半端に馬鹿だったり、頭が固かったりするなお前は。

自演乙

おまいビョーキだろ？

ちょっと遅くなった。

>>54
これは参った。私はそのページの存在に気付いてなかった。そのサイトの存在は
知っていたのに。 hr 要素の指定は IE に限らずトリッキーなんだな。ありがとう。

>>58
color: #f00;
こんな指定を hr 要素にすることは、考え付きもしなかった。何しろ hr は空要素なんだから。
今回の実利性という意味では、>>58 の書き方がいちばん良さそうだ。正直、感心した。

しかし、この書き方では、線のスタイルを dashed などに変えることができない。
私が書くなら、やはり>>46 の書き方にするだろう。

私がバカで頭が固いのは確かにそのとおりだ。私はブラウザ依存のトリッキーな
コードを書くのが嫌いなのだ。原則どおりに書いて、それでダメなら微修正という
書き方をするのが好きだ。細かいことは覚えられないし、ブラウザの実装が変わったら
コードを大修正する必要が出るし。

ただ、>>46 で書いた「自分が知らないことを人に教えてはいけない」というのは
こうしてみると、私自身のことだったな。これに関しては反省している。

何なんだろうな

あの〜〜　>>58って ビラビラなんですけど・・・

>>52 >>55
恥をかきついでに聞くが、「hr自体いらんだろ」という言葉の真意とは
なんだったんだ？
私はこれを、「hr は論理要素とは言えないから、Strict という観点から
書くべきではない」という意味と取ったのだが。

ちなみに私は Strict の信奉者ではない。hr を代替できる他の要素はないから
必要なら書くべきと思っている。

>>62
なるほど頭が固いのがよくわかる。
dashedなんて要求されてないんじゃないの？
それに>>46の書き方ならhrじゃなくてもいいわけだし。

>>66
> dashedなんて要求されてないんじゃないの？

だから「私が書くなら」と言っているだろう。他人には>>59を薦めるよ。
しかし自分が書く時は、あとでデザインの変更をしづらい指定の仕方はしない。

> それに>>46の書き方ならhrじゃなくてもいいわけだし。

CSS を無効にしても、hr なら横線が表示されるだろう？その点に関しては
私は Strict を支持している。

>hr を代替できる他の要素はないから必要なら書くべきと思っている。
hr が必要な文書構造なんてないと思うが。
何らかの区切り目ならば、セクションの区切り目として捉えて、
見出し(H1〜H6)を改めて表現すれば良い訳だし、それで充分。

どうしてもセクションをグループとして表現したいならば、
よく考えて DIV でマークアップすれば良いことだし。

CSS が適用されない環境での可読性を高めるために
補助的に記述しておいて、HR { display: none } とかなら、
時には推奨されることもあるけど、記述しなくて構わないし。

というかスレ違いだよな。Strictスレで議論しろよ。

>>68
あなたは >>52 か >>55 ？

だからそういう主張が存在することは知っている。過去ログにも出ていたはず。
私は賛成じゃないけれど。
しかし、私はここでそういう議論をしようとしているのではない。
私はただ、>>52 と >>55 の真意を知りたいだけだ。
内容さえわかれば、議論を続けたい時は Strict スレに行くよ。

何があっても歩み寄るつもりが無い奴と話してもどうしようもないだろ

そんなにゴテゴテと装飾したhrを使うぐらいなら画像を使っても同じ。
むしろそっちの方がstrictとしてもスマートだろ。

>>70
正直、人格には自信がないので、議論の内容と人格は分けて考えていただきたい。
また、話に結論が出れば良いというものでもあるまい。

>>71
あなたは>>52？いかにもそれっぽい意見だが。

hr については世の中に意見が百出しているので、私は元々議論を広げるつもりはなくて、
質問者>>42 の聞いている範囲でのみ話をしようと思っていた。ここは質問スレだし。
しかし>>55 で、誰にでもわかるような基本的なミスを私が犯しているかのような
コメントが出たから、その真意を確認したくなったのだ。

今までに出た意見に関して言えば、実際、皆がまとまっているとは言えないだろう？
>>55 の意図がなんだったのか、理解に苦しむ。

（´-｀）.｡oO(この粘着はスレにこびりついて取れないな・・・)

な？

>>72
あなたが今までのレスの中で犯した
誰にでも分かる基本的なミスは>>52に過剰反応したことです。

>>52はhrを使う必要が無い、と主張しているだけで、
>>42の質問とはこの場合全く無関係。よって>>52はスルー。
ついでに>>55も空気が読めてないみたいなのでスルー。

んで、俺のこのレスもスレ違いなのでスルー。

気を取り直して次の質問でもどぞ↓

クラス名の指定で、全称セレクタの役割をしてくれるもの
（どんなクラス名にも対応できるもの）はありませんか？
blogなどで div.any-class {overflow: hidden;}
といった指定を見かけるのですが、
マウスホイールを押してもスクロールすることができず、不便です。
これらをユーザースタイルシートで制御できないものかと考えています。

div[class] {overflow: auto !inportant;} では、
WinIEが未対応なので使えず･･･。

× !inportant
○ !important でした。

>>76-77
ユーザ・スタイルシートじゃ無理だと思うよ。
ちょっと JavaScript を書いてみた。

[InternetShortcut]
URL=javascript:var divs = document.getElementsByTagName("DIV"); for (var i = 0; i < divs.length; i++) {if (divs[i].className != "") divs[i].style.overflow = "auto";}; undefined;

どんな名前でもいいから、IEのお気に入りを作って、それをエディタで開く。
そしてその中身を、上の2行に置き換える。
任意ページで、このお気に入りを選択すると、JavaScript が動作して、
ページを書き換えてくれる。

個人的には Mozilla への乗換えをお薦めしたいが、
Mozilla は overflow:auto の内容にホイールマウスが効かないので、
この目的には薦められないのが残念。

あ、スクリプト自体はブラウザ汎用だよ。

補足
このページを参考にさせていただきました。

IE|Moz ウェブページのCSSを無効にする方法
http://members.jcom.home.ne.jp/jintrick/Personal/usr_styleoff.html

>>69
「回答者のレベルが低いから真意を読みとってもらえないな」

・UA毎にCSSのレンダリング方法が違うのに、内容を熟知していない。
という重大な点が欠けてるんだ君には。

頭が固い奴はCSSを扱えません。







と言うのは間違いだが、向いていませんというのはあっているな。

>78　試してみたらスクロールできるようになりました。
どうもありがとうございます。

overflow: auto で解決すると思っていたのですが、
今回の目的ではvisibleを指定するべきだったようです。
javascriptのautoのところを、visibleに書きかえることで成功しました。

Firebirdだけはすでに使用しています。
こちらは画面全体がスクロールしてしまうので、
スクロールしたい領域だけ動かせるともっとよいですね。

どうも初めまして。いきなりですが、質問させていただきます。
ＨＰをリニューアルさせようと思うんですけど、

tp://100days.chu.jp/51_244/
上記のＨＰを、少しだけマネて見たいなと思ったんです。

それでなんですけど、緑色のワクの部分ありますよね？
それってテーブルでしょうか？それとも画像でしょうか？
あと、中はインラインフレームなのでしょうか？
それがどうしても分からないので、どうか教えてください、お願いします。

>>83
ソースを見ろ。
それでわからないならやめとけ。

>>83
<td>に背景画像です

>>83s
そうですね・・・。
やはり自分で見る力も必要ですね・・・。
>>85s
ありがとうございます！
ということは、テーブルということですね？
問題解決しました。
教えてくださって、有難うございました！

ユーザースタイルシートに
div {overflow: visible !important;}
をつけるだけで望んだ結果になりました。
結局、自分がつけた値がまちがっていただけなのですね。
まだまだ勉強不足です。

>>87
わはは。実はそうじゃないかと思っていた。
class属性を持つ div 要素のみ overflow:auto にするというリクエストは
あまりにも不自然だもの。
全部の div を書き換えても問題なんて出なさそうだったし。

>>86
緑の枠の中はインラインフレーム。更新記録は textarea。

>>88s
枠の中は、インラインフレームですか。
教えてくださって、有難うございます。

皆さん、色々と教えてくださり、ありがたいです・・・。

>>89
ソースを読んでもよくわからない事が多い厨な俺は
FireｆoxのDOM Inspectorを愛用してまつ

ああ、DOM インスペクタ はいいよね。私は普通の Mozilla で使っている。
ページの内部構造と、それぞれの画面上の位置が良くわかる。

こんなすごいソフトが無料なんだから、使わない手はないと思うんだけど、
あんまり普及してないよね。知られていないんだと思う。
Mozilla をフルインストールするだけで使えるようになるのに。

>>90
>>91
サンクス！いいもの知った

名前に「s」なんてつけるのは厨だろ…

それを見つけて書くおまいも厨。

>>94
もちろん。暇だから粘着するよ。

ただの粘着より、おっぱい吸い付くほうがいいや。　ﾏﾏｰ

ゲーム派ドットコム（http://www.gameha.com/）のトップページの
すぐ右にある「日付検索」等のリンクにマウスをあわせると
リンク文字の色がかわるだけじゃなく、枠全体の色が変わりますよね。
あれをやりたいのですがどうやるのですか？
できればソースで教えて欲しいのですが

>>97
>1よめ

読みましたが…
何を見なくてはいけなかったのでしょうか？

>>97
あのね？ここは自分のやりたいことを言えば
瞬く間にソースを吐き出す魔法の箱じゃないのだよ。
自分で頑張って色々調べて、悩み苦しんだけどわからない・・・
そんな感じになるまで頑張ってみましょう。
そしたら、みんな助けてくれます。

あの…すごい調べたのですが分からなかったんです（汗
そしてやっとつきとめたのがCSS使ってるってことくらいで
それ以来何もわからずじまいだったのでここに聞きにきたのですが…
本当です。何か見落としているのかもしれませんが精一杯でした。

>>101
その際とのCSS落としてよくみてみー(´ー｀)y─┛~~

一寸前に「DIV厨ってこんなとこ？」ってのがあったけど、
ttp://www20.pos.to/~sleipnir/software/pbse/index.html
ここもすごいなー。
見た感じじゃ分からないものだね(´ー｀)y─┛~~

>>97
disply
border
background-color
a:hover
これらの意味がわかったらまたおいで。
理解できたら来るまでもないと思うけどｗ

>>101
CSS のソースはこれだね。
http://www.gameha.com/dan-net.css
関係あるのは、これの 309行目からの項目。

ただ、まだこういうの見てもわかんないんだよね？
直接関係あるのは、こういう部分。

<style type='text/css'>
a:hover{
　color: #FFFFFF;
　background-color: #319AFF;
}
</style>
<a href='#' >:hover のテスト</a>

とりあえず、これが手がかりになったらいいんだが。

>>98>>101 がんがれ

>>105
漏れもですかっ！Σ（´д｀；）
がﾞ､がんがります。

アッハッハー　　わりぃなー

いつもこんな雰囲気ならいいのにな...。

ほんとだな。

>>103
disply　わかりません。見栄え…とかかな。
border　テーブルの枠ですよね。
background-color　背景色ですよね。
a:hover　リンクにカーソルを合わせた時の変化ですよね。

>>104
<style type='text/css'>
a:hover{
　color: #FFFFFF;
　background-color: #319AFF;
}
</style>
<a href='#' >:hover のテスト</a>

↑これはわかります。
ただこれだけだと文字の色しか変わらず、テーブルの背景が変化しないので
どう改良すればいいのかわからなかったんです。
となると…

table{back-ground-color: #319aff;}

↑こんな感じで１回試してみます
みなさんご協力ありがとうございます。

このやろ　　ならJSも使えや

残念でした。>>110の方法ではダメでした（泣

>>111
スクリプトでも同じ事ができるんですか？

onMouseOver

>>112
君のやりたいことは、>103を全て使う。
CSSの基本的なことを学ばないとダメだよ。
上のテンプレにわかりやすい解説サイトがあるから
基礎知識を身に付けましょう。

>>110
>>4の解説サイトを見ようとはしないのか？
1は読んだんだろ？

displayが何なのかさえわかればできるようになるはず。
displayについて調べて、ソースのtd#mainmenuをよく見ればすぐにわかる。

なんか微笑ましいことになってるな。鼻水が出てくらぁ。

>>113-116
え〜と…
どうもありがとうございました。

兄さん....。

だ、誰が兄さん？

Ｍｒオクレ

a{color:red;}
上の例の場合、;は消しても良いのでしょうか？

>>122
消さなくてもいいです

折れは 中括弧閉じ の直前でも入れてる。

>>123
あたしの質問は「消しても良いか？」であって、
あなたの「消さなくてもいいです」という答えは的を外しているんですが。
おっぱお

>>125
うーん、じゃあこれでどうだろう？

; は本来は複数の宣言の区切りだから、宣言全体の末尾には書かないのが本来。
だけど、書いてもいいことになっている。
実運用上は、書かないと、項目を追加した時に ; を足すのを忘れてバグの元になるので、
どんな時でも ; をつける習慣をつけるのがお薦め。

>>110
もうそろそろ、自力で答えに到達しただろうか？
一応貼ってみる。
<style type='text/css'>
<!--
td {
width:200px;
text-align:center;
border: solid black 1px;
}
a {
display:block;
}
a:hover{
color: #FFFFFF;
background-color: #319AFF;
}
-->
</style>

<table><tr><td>
<a href='test71.html' >:hover のテスト</a>
</td></tr></table>

本当は、table を使わなくても説明はできるんだけど、
まだ敷居が高いだろうから、使うことにした。
興味があったら、td {} にある宣言を a{} に移して、
<table><tr><td>を消してごらん。

ここから先は
・ブロック要素
・インライン要素
・display:block
を理解しなきゃいけない。

個人的には、ここがお薦め。ちょっと大変かもしれないけど、
通して読むと、HTML の見方がすっかり変わる。

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

>>126
了解です。有難うございました。

何だかここは良いスレじゃないですか。（・∀・）ｲｲ!

議論厨さえ大人しくしてたら良スレである

↑こういう奴が出てくると荒れだす↓

荒れる前に、一生懸命ｶﾞﾝｶﾞｯてる態度が
伝わってくる質問者ｷﾎﾞﾝﾇ！

>>133
俺の尻の穴に貴方の野太いちんぽぶちこんでくれませんでしょうか？

>>134
ハ　知りもしないで…　今そんなことをしたら質問者に顔向けできないよ

>>134
爪楊枝じゃだめかい？

>>136
ぃゃゃゎ…

>>127
おぉ！本当にありがとうございます！！
あれから夜更かししてがんばったのにできなかったんで感謝します。

Tableを使わない＝表示速度が速くなるってことですよね？
ということは<div>を使うわけですね。
わざわざオススメサイトまで教えて下さって本当にありがとうございます。
いや〜良いスレだ！…と独り言。

このスレがにわかに良スレ化した最大の要因は、
>>103 の「disply」に誰も突っ込まなかったからだろうな。

>>138
＞ということは<div>を使うわけですね。
母さん、div厨へまっしぐらじゃないか。

え〜と…
div厨ってのは聞いた事ありますが
divに頼りすぎた奴って意味ですよね。
div使いすぎると何かデメリットがあったりするのですか？

>>138
>ということは<div>を使うわけですね。
激しく違う！！
ひとまず、divは使ってはいけないくらいに考えてｶﾞﾝｶﾞﾚｗ

>>139
漏れは突っ込む以前に気がつかなかったYO(´･ω･`)

>>141
使いすぎとかそういうことじゃないんだ。
ふさわしい要素があるのにそれを使わず、divを使うのがいけないんだ。
だから母さんにはよく考えてマークアップしてほしい。
できればdivを取り除いてもvalidになるようにマークアップしてほしいんだ。

>>141
なるほど…て良く分かりませんが（汗
私は<center>を使っていましたが、HTML-lintでチェックすると<div align="center">を使ったほうがＥって言われた。
それと似たような意味でしょうか？
リンクの件は解決したのですがもう一つ問題点に出くわしてしまいました。

<style type='text/css'>
<!--
td {
width:200px;
text-align:center;
border: solid black 1px;
}
a {
display:block;
}
a:hover{
color: #FFFFFF;
background-color: #319AFF;
}
-->
</style>
<table><tr><td>
<a href='test71.html' >利用規約</a>
</td></tr><tr><td>
<a href='test71.html' >link</a>
</td></tr></table>

↑こういうふうに表を下へ下へと繋げて行きたいのですが表と表の間にわずかにすき間があいてしまいます。
私はa {display:block;}　が原因だと思うのですがこれを取り除くと目的のリンクスタイルじゃなくなってしまうし…
いじったけど解決しません。ヒントなるものをいただけないでしょうか？

すいません。上の>>141は、141ではなく、>>143でした。

>>144
<table cellspacing="0">

CSSスレ的に答えるなら
table { border-spacing:0; }
なんだろうけどIE対応してないから

>>146
あ、本当にできました。
IE未対応ですか…
CSSばっかりいじってたから解決できなかったのか…
どうもありがとうございます。

>>144
例えば<h1>を使うべきところで<div class="midashi">とかやったり、
<blockquote>を使うべきところで<div class="quote">とかやったり、
そういうdivの使い方をするなってこと。
確かにdivを使いまくって片っ端からくくってればValidにはなるんだけど、
そういう使い方は好ましくない、っていうことなんだと思う。

まぁ俺もdiv厨だけどさ。

>>144
マークアップ≒意味付け　って感じで考えてみれ。
div って意味が希薄な要素で、せいぜい要素群をひとくくりにする
程度のものなのだよ。

>>90を読んで、Firefox入れてみました。DOM Inspectorの導入方法が分からずがんばってます。
が、そんなことはどうでもよくて。
Firefoxで自分のｻｲﾄを見てみて、そのｸﾞﾀﾞｸﾞﾀﾞ具合に愕然としました。
ﾈｽｹでは確認してたのですが…。
ﾓｼﾞﾗ　ﾈｽｹ　IE　とそれぞれ特徴はあるのでしょうが、どれに合わせてﾃﾞｻﾞｲﾝするのが一番ﾘｽｸが少ないでしょうか？
IE　ﾈｽｹ　だと横ｽｸﾛｰﾙﾊﾞｰが出ない自分のｻｲﾄが、Firefoxだと最大画面にしても横ｽｸﾛｰﾙﾊﾞｰが…。
多少のﾃﾞｻﾞｲﾝ崩れはともかく、こういう決定的なものを避けたいです。

>>150
早い話がJAVAでバー消せば良いのでは？

>>151
…ﾊﾞｰ消しちゃったら溢れてる部分が益々読みにくくなるだけで…。

ﾒﾆｭｰ部分を右にﾌﾛｰﾄさせて、ｺﾝﾃﾝﾂ部分は右にﾏｰｼﾞﾝをとる形でﾃﾞｻﾞｲﾝしているんですが、
そのﾏｰｼﾞﾝがFirefoxだとﾒﾆｭｰが存在する部分にしか効いていない感じで。
ﾍﾟｰｼﾞ幅が異様に大きい…　orz...

110さんが上の方でやろうとしていることは、自分はﾃｰﾌﾞﾙではなくてﾘｽﾄでやってます。
ﾒﾆｭｰはﾘｽﾄでﾏｰｸｱｯﾌﾟするのがいいかなぁ、と思って。

xreaのｱｸｾｽｱﾅﾗｲｻﾞｰもIEだと右上に来る設定が効いているのに、ﾓｼﾞﾗだと左上に出てきてしまう…。
ﾍﾟｰｼﾞ幅が溢れている原因が分かりました。
ﾐｷﾞﾌﾛｰﾄさせているﾒﾆｭｰ下のﾘﾝｸ部分のﾘｽﾄが右に溢れてるのが原因…。
ﾏｰｼﾞﾝやﾊﾟﾃﾞｨﾝｸﾞのﾌﾞﾗｳｻﾞごとの解釈について勉強してきます。

しかし、ｺﾝﾃﾝﾂ部分の右ﾏｰｼﾞﾝが、ﾒﾆｭｰが存在する部分にしか効いていないのはなぜだろう…。
奥が深い。。。

質問です。winXPでIE6 SP1を使っています。
http://cssbug.at.infoseek.co.jp/detail/winie/b013.html
のようにIE6では画像にパディングが効かないのですが、
他に画像と枠の間に余白をいれる方法はないでしょうか？
あるサイトではリンク付の画像と枠の間に余白があり、
IE6でも見れたので何か方法はあると思うのですが…。
ちなみにそこのサイトは<link rel="stylesheet" href="*.css" type="text/css" media="all" title="*" />
で外部css使用でした。そこのサイトのcssファイルももちろん見たのですが、
すごい数の指定がされていてよくわかりませんでした。
テーブルで妥協するしかないのでしょうか…。いい解決策があれば教えてください。

>>150
それは、bodyだかhtmlだかにmarginやらpaddignやらを余計に指定してやがるんじゃなかろうか。
ごめん、酔っ払ってていみぷーだ。
でもそんなかんじなかんじだよ。たしか。ぷー

>>154
標準モードになるようにDOCTYPE宣言汁。
中身ももちろんDOCTYPE宣言ni合わせろよ。

>>155
おっしゃるとおり、ﾌﾛｰﾄさせたﾒﾆｭｰ部分のﾏｰｼﾞﾝ指定に問題蟻のようです。
>>153の方がさらに分からないのです…。

と、もう一つ。
ﾌﾟｷｳｨｷ設置してるのですが、
http://hogehoge.com/hugahuga/index.php?%8E%LD%8P%C7%8E%C1%8E%AA%8E%O7%R6%21%21%A1%KD%8E%BD%8E%C7%9U%BB%8E%BF%A4%CE%A4%AA%BC%EA%C5%C1%A4%A4
というUrlのindex.php?以降が改行されずに横にひたすら伸びてます…。
そのせいで、物凄い余計な余白が右に。。。ﾖｺｽｸﾛｰﾙﾊﾞｰ伸びまくり。。。
これはFirefoxの方のﾊﾞｸﾞなのでしょうか…？
だとしたらｽﾚﾁｶﾞｲｲﾀﾁｶﾞｲな話ｽﾏｿです。

>152　文でひとつひとつ書くよりも、ソースを転載するか
URLを載せるかしたほうがわかりやすいと思う。

>154　＞WinIE6.0互換モード及び5.5以前ではimg要素にパディングが効きません
と書かれているから、
標準モードでレンダリングされるようにすればよいのではないかな。
具体的には、DOCTYPE宣言を見直せばよい。
ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html

>>154
互換モードの儘にしなければならぬ事情が有るなら、div囲みで解決。

>>157
ソース晒さないと話しにならないぽ

標準モードに指定する方法があったのですか！
知りませんでした恥ずかしい。ありがとうございました。
DOCTYPE宣言、勉強してみます。

>>157
>これはFirefoxの方のﾊﾞｸﾞなのでしょうか…？
バグではない、仕様。

それと、Netscape7.1もあるんだから、ネスケって呼び方しなさんな。
NC4.xとNetscape6以降では全く別物。後者はFireFoxと同じくMozilla系。

正直、半角カナも鬱陶しく、読みにくい。２ちゃん語使って嬉しいか？

>>158にもあるが、わかりにくい文章で書かず、ソースを出してくれ。

>>158
>>160bodyに関してはﾏｰｼﾞﾝ、ﾊﾟﾃﾞｨﾝｸﾞ共に0です。
body{
font-family:helvetica,Verdana,'MS UI Gothic','ＭＳ Ｐゴシック',Osaka,sans-serif;
background-color:#f5f0bc;
color:#000050;
margin:0;
padding:0;
}
ﾒﾆｭｰ部分に関しては、以下の感じです。puliwikiについては、ﾃﾞﾌｫﾙﾄで使ってます。
div#menubar{
float:right;
margin:0 1%;
width:18%;
border:1px solid red;}
div#menu{
background-color:#f7fad3;
float:right;
margin:0 1%;
width:20%;
border:3px double #f2a32b;}
#menu h1{
font-size:150%;
text-align:center;
margin:0;}
#menu ul{
font-size:90%;
margin:0 0 10px 20px;}
#menu li{
list-style:square;
margin-left:.5em;}

>>163
情報を小出しにされてもわからないな。>>3でチェックはしたのか。
　http://jigsaw.w3.org/css-validator/
それにHTMLソースは？　これもHTML-Lintでチェックしておきな。
　http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

>>163
ウザイな、半角カナで書くなよ

>>164
CSSが
Line : 1 font-family: 一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します
の警告、
htmlが-91点でした…。
出直してきます。
ありがとうございました！

GWだな！

・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。

<dl>
<dt>製品名</dt>
<dd>ほげほげ</dd>
<dt>問い合わせ番号</dt>
<dd>USO-800</dd>
<dt>発売年月日</dt>
<dd>2004年4月1日</dd>
<dt>詳細</dt>
<dd>この製品は……</dd>
<dt class="appearance">外観</dt>
<dd class="cuts">
<ul>
<li><img alt="［写真］正面" width="200 height="100" /></li>
<li><img alt="［写真］背面" width="200 height="100" /></li>
</ul>
</dd>
</dl>

このようなカタログで、カット風に画像を右側にフロートさせたいのです
が、どうやったらいいでしょうか。

画像をリストの頭にもってくれば、

.appearance { display : none; }
.cuts { float : right; width : 200px; padding : 0; margin : 0; }.cuts ul,.cuts li { padding : 0; margin : 0; }
.cuts li { display : inline; }

という感じで実現できるのですが、製品名や説明より先に画像が出て
くるのも変なので、できれば画像はリストの末尾にしたいのです。
どなたかよろしくお願いします。

>製品名や説明より先に画像が出て
>くるのも変なので

画像を掲げてから説明キャプションがつくカタログなんて珍しくもないぞ。

MacIE5.1.7で表示させた際に以下の様になってしまいます。
1.左側の文字部分を一番下までスクロールさせた時、最後の文字が半分しか表示されない
2.下のフッタ（ピンク色）の下に余白がでてしまう。
以下のアドレスにアップしてあります。
http://f38.aaacafe.ne.jp/~hanami/
ソースは
http://f38.aaacafe.ne.jp/~hanami/test.lzh

どのようにしたら上記現象が回避できるでしょうか？

>>169
.appearance{ display : none; }
.cuts{ float : left; width : 200px; padding : 0; margin : 0; }
.cuts ul , .cuts li{ padding : 0; margin : 0; }
.cuts li{ display : inline; }
dl div.details{ float : left; width : 15em; }

<dl>
<div class="details">
<dt>製品名</dt>
<dd>ほげほげ</dd>
<dt>問い合わせ番号</dt>
<dd>USO-800</dd>
<dt>発売年月日</dt>
<dd>2004年4月1日</dd>
<dt>詳細</dt>
<dd>この製品は……</dd>
</div>
<dt class="appearance">外観</dt>
<dd class="cuts">
<ul>
<li><img alt="［写真］正面" width="200" height="100" /></li>
<li><img alt="［写真］背面" width="200" height="100" /></li>
</ul>
</dd>
</dl>

あまりスマートじゃないけれど、これでもいける。

>>172
きみきみ、HTML文法が有り得ないよ。人に教える前に HTML の書き方を勉強しようね。

>>169
これでどうだ？ ウィンドウが極端に狭い環境だと製品情報のテキストが画像に隠れてしまうけどさ。
ちなみに、フロートではなくて絶対配置でやってみた。

<style type="text/css">
dl.product { position: relative; }
.appearance { display : none; }
.cuts { position: absolute; top: 0; right: 0; }
.cuts ul, .cuts li { margin: 0; padding: 0; display: block; }
</style>

<dl class="product">
<dt>製品名</dt>
<dd>ほげほげ</dd>
<dt>問い合わせ番号</dt>
<dd>USO-800</dd>
<dt>発売年月日</dt>
<dd>2004年4月1日</dd>
<dt>詳細</dt>
<dd>この製品は……</dd>
<dt class="appearance">外観</dt>
<dd class="cuts">
<ul>
<li><img alt="［写真］正面" width="200" height="100" src="front.png"></li>
<li><img alt="［写真］背面" width="200" height="100" src="back.png"></li>
</ul>
</dd>
</dl>

dl要素内にはdt,dd要素しかダメ

元のHTML文書からしてダメポだったのね…。
気付かなかったよ。↓これで大丈夫だよね。

<dl class="product">
<dt>製品名</dt>
<dd>ほげほげ</dd>
<dt>問い合わせ番号</dt>
<dd>USO-800</dd>
<dt>発売年月日</dt>
<dd>2004年4月1日</dd>
<dt>詳細</dt>
<dd>この製品は……
<dl>
<dt class="appearance">外観</dt>
<dd class="cuts">
<ul>
<li><img alt="［写真］正面" width="200" height="100" src="front.png"></li>
<li><img alt="［写真］背面" width="200" height="100" src="back.png"></li>
</ul>
</dd>
</dl>
</dd>
</dl>

>>175
違う違う。>>169の事ね。

ｲｯﾀｲｾﾞﾝﾀｲﾄﾞｳﾅﾝﾃﾝﾉｻ

休み中はダメだな、エセ回答者ばっかり

ナスの花粉はナスの花にしかつかないんだよ

ゴメン。>>169 ので正しかったね。
変に勘違いしちゃったよ。支離滅裂。ダメポ。

>>176
えっ？ >>172 のことでよ？
すべて >>172 のアホが原因だ。

>>178
逝って来るから、許してくれ。

>>150
崩れていて気になったFirefoxに合わせればよし。

お教えください。

<style>
.inputs
{
font-size: xx-small;
color: black;
background-color: #ffffcc;
}
</style>
(略)
<input name="textBox1" type="text" id="textBox1" disabled="disabled" class="inputs" />

とした場合、入力欄のテキスト色が灰色となってしまいます。
<input>タグでdisabledとした場合、テキスト色をCSSで指定することは出来ないのでしょうか?
IE5/6 Winで指定できれば嬉しいです。

角丸なテーブルはＣＳＳで可能でしょうか？

>>182
ちなみに俺は灰色じゃない
なぜならIEではシステムカラーが使われてるから
つーわけで無理かも

でもスクロールバーの色指定できるわけだからひょっとしたらテキストボックス用の何かをMSが用意しててくれるかも

>>183
角丸テーブルならCSSなんざ使わんでもよかろーもん

ちなみにMozには丸角を実現するCSSあったねぇ・・・ｱﾝﾁｴｲﾘｱｽかかってなくてきたねーけどｗ

拡張子を、ｃｓｓにしたらｱｯﾌﾟできなくなりました。

ｔｘｔのままじゃまずいんですか？

>>186
アップできないわけなかろう。何かが間違ってる。
txtでマズイかと聞かれれば、ある意味まずいが、ある意味ではまずくない。

>>186
> 拡張子を、ｃｓｓにしたらｱｯﾌﾟできなくなりました。

まさか全角で？

>>183
「3×3セルのテーブルの外周コーナー4セルの背景をCSSで丸くできるか」という意味ならyes。
「特定のボックス要素の背景の角落としを、W3C準拠で装飾的コーディングなしの
html記述と、一般ブラウザで解釈されるCSS記述だけで無理なく実現できるか、という
意味ならno。中間的な回答、つまりanyway it works的なソリューションが欲しいなら
当該ボックスを上下／左右／その両方に分割するか、同一ボックスをdivで何度もくくるかして、
背景画像を使って丸くする。
参考：
http://www.remus.dti.ne.jp/〜a-satomi/bunsyorou/ArekorePopup.html

全角にはしてないです。

ｱｯﾌﾟﾛｰﾄﾞしたのを開くとﾀﾞｳﾝﾛｰﾄﾞされちゃうんです…(;＿;)

>>187

ある意味が知りたいです(;_;)

よかったら教えてください。

>>190
cssファイルを閲覧したらダウンロードが始まるってことか？
cssファイルはHTMLが参照するファイルだから、ユーザーが直接閲覧する
必要は無いと思うが。

>>191
拡張子がcssであるファイルをスタイルシートだと認識するのは、鯖が
そういう設定にしているから。txtをスタイルシートだと認識させるように
鯖を設定すればいい。

>>190
それは正常だとおもうぞよ？＜開くとﾀﾞｳｿ

すみません。丁寧に回答ありがとうございます。

今、外部ＣＳＳを作ってて、そのURLを知りたいので閲覧したいんです。

txtだと…ｻｰﾊﾞｰの設定を変える方が難しいですよね？

>>193

正常なんですか??

>>194
ダウンロードしてローカルで閲覧すればよろしいかと。
サーバの設定を変えるのは難しい。サーバによっては設定の変更を
許可してないことも多い。

>>195
ああ、オイラmozillaだからわからんかった。IEだとダウンロードされるわ。
ぜんぜん正常。

>>196

なんどもすみません（；＿；）ローカルで閲覧てなんですか??

>>195
cssをおいてるうｒｌそのものをｱﾄﾞﾚｽﾊﾞｰに入れてｴﾝﾀｰｷｰたたくとﾀﾞｳｿされるよ。
正常。
ｱｯﾌﾟしたcssを開こうとしてﾀﾞｳｿされるなら、きちんとｱｯﾌﾟされてるよ。

で、何がしたいの？

>>199

その、URLが知りたいんです（；＿；）

>>198
自分のPCで見ること。
>>200
CSSのURLならHTMLに書いてあるだろ。

ってか、激しくスレ違いの質問になってきたね。

>>201
×自分のPCで見ること。
○自分のPCに保存してから見ること。

>>200
餅つけ。
ﾀﾞｳｿされてしまう、ということは、URLは分かってるのではないのかい？

ソース見れば？

>>201

激しくスレちがいすみませんｍ（＿＿）ｍ

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

>>202
うpできない、というのがそもそもの始まりだったから、自分で書いたcssだと思われｗ
ｽﾚ違いになってきたねｗ

顔文字うざいね　どうでもいいんだが

>>207
顔文字のｳｻﾞさとかより、うｒｌが知りたいといってる彼だか彼女だかが気になるよｗ
必死みたいだからねぇ(´ー｀)y─┛~~

>>208

すみません。ありがとうございました!

右クリックでurl出てました。

まぁせっかくのGWなんだし生暖かく見守ってやろうよ

>>210
だぁね。

しかし、右クリックでうｒｌ出てきたの意味が分からない漏れも修行が必要だ(;´ー｀)y─┛~~

つーか、HTML文章の拡張子は決まってないけれど、CSSファイルの拡張子はcssで定められてるだろ。

>>212
AddType "text/css; charset=Shift_JIS" txt

>>211

右クリックしてプロパテェってとこで、出てきました

>>211
教えてもらったんだから、お礼をしる！ｗ

>>214
ｻﾝｸｽ(;´ー｀)y─┛~~

>>215
ここだけの話し、未だに意味がﾜｶﾗﾝのだよ…どうしよう(;´ー｀)y─┛~~

>>216
大丈夫だ。
漏れは>214が>211に何か教えてくれた事しか理解出来てないｗ

>216　自分もよくわからんぞ。

たぶん
<a href="hoge.css">CSS</a>
こんなのをIEで右クリック→プロパティで見たんじゃないかな。
しかし、自分がアップしたCSSのURIすらわからないのはどうかと思うのだが。

warota

>>217
よかった…慰めになる…。

>>218
漏れ的にはうpしたのにうrlが分からないというのが謎で謎で…(;´ー｀)y─┛~~

実は先程帰宅してスレを覗いたばかりなのだ
すると、>214が>211に何かを教えてもらってるではないか！
脊髄反射で「お礼をしる！」と書いてみた。

上から順番に読んでみたが、謎が謎を呼ぶ展開にﾜﾛﾀｗ

最近CSS覚えはじめて、最近このスレ見つけたんですが
過去ログ見てまた来ます。

良スレですね。

この展開が、良スレなのか・・・

質問者に対して優しいスレはここですね？

>>184
やっぱり無理ですか
ほとんどのクライアントが、無効時の文字を灰色にしているので、
背景色を考えてみます。
有り難うございました。

小規模な商用サイトのCSS化提案とかをやることになったんですけど、
金取るサイトをCSS系で作ってるみなさん、UAの見切りはどうしてますか？
特に問題になるのはIE3〜4系とNN4系だと思うんですが、完全に対応外に
しちゃう？　それともjsで振り分けて可能な限りイメージ通りのレンダリング
させますか？　

作る側から言うと、CSSレイアウトは慣れたテーブルレイアウトに比べると
イニシャルの工数的には少し不利なので、後々のメンテの簡単さのとこで
コスト相殺できますよ、とアピールしたいのですが、非対応ブラウザへの
対応を真面目にやろうとすると、そこのメリットもなくなってしまいそうで…。
常套の殺し文句としての「SEO」と「ユーザビリティ」以外に、なんか
もう一押しができないかなぁ、と。

>>225
まぁしかしシステムカラーを使うってのはそのシステムを使ってる当人としては慣れてる、つまり無効なフォームなのだと一目瞭然なわけで
アクセシビリティが高いとも言えるんだなコレが

>>226
いっそのこと「もはや誰も使ってません」とタンカを切るとか
クライアント（≠UA）のレベルによるが

>>226
近い時期に世界のW3C信者による
サイバーテロがあります。まず最初になるターゲットは
商用サイトらしいのです・・・と言う。

UAをどこまで対応するかはさておき
jsで切り替えなんてしないぞ。IE3,4やNN4ｘのユーザー数より
js切ってるユーザーの方が多い。

>>226
金取るサイトにNN4系で来る方がガクガクブルブル。
セキュリティホールのあるブラウザだし、その辺りを啓蒙するのも
企業としての姿勢のひとつかもしれんね。

しかしCSS＋単純HTMLにした程度でメンテのコストって低くなるかなぁ・・・
内容の更新程度ならGUIなオーサリングソフトのは楽っちゃ楽じゃね？

「js切ってるが、IE3/NN4は使ってない」ユーザーは、一般的なレンダリングを
するCSSのほうで拾えばいいのかにゃーと思ってます。問題は「js切っててNN4
使ってる人」ですかね。

「検証はMozilla6以上とIE4〜だけにして、NN4は切らせてもらいます」って
言って受けた仕事もあるんですけど、それてアクセシビリティつう点では
逆に本末転倒なのかなぁという悩みもあります。ブラウザシェアで言ったら
読み上げブラウザよりは多いだろうしね…。

つうか、CSSに限らず、仕事でwebやってる人はみんな思うことかもしれない
けど、IEもNNも耐用年数タイマーみたいなもんを仕込んどいて欲しかったな…。
「2004年4月からは起動しませんので、同等の性能のブラウザを以下のurlから
ダウンロードしてくださいね」みたいなの。そうすれば、少なくとも標準
非準拠の挙動を示すブラウザたちは時間経過とともに着実にリプレースされて
いっただろうに。って危険思想？

>>223
いや、最近でなく…前のほう。

>>232
>1-10までのこと？あのあたりは毎回荒れないよ？

>>230
おっしゃるとおり、DWとかコントリまともに使える相手なら、テーブル系の
設計をテンプレ機能でガチガチに固めちゃって丸投げできますねー。逆に
CSSの基礎が分かってないweb担当者だと、CSS系のほうがきついのかな〜。
以前、テーブルレイアウトの一部で<p class=…>とかを使ったソース渡したら
「なんか、このセルで文字消して入力し直すとマージンがなくなっちゃうん
だけど…」みたいなこと言われて、後のフォローが大変だったことがあります。

CSS有利のケースつと、たとえばクライアント側の意志決定プロセスが多段階に
なってて、レイアウトの手戻りや事後修正が多いケースでは、こっちでCSS
（と装飾画像）だけ調整してそれ渡すと、一発で全体の修正が効く、みたいな
ところは結構ありがたいですね。

あっそ

標準準拠・高可読性という原則主義と
納期＝経費短縮という現実主義の
どのへんに折り合いをつけるかは
自営web屋の永遠の課題ですな。

NN4ならmediaタイプバグでCSS読ませないって手もあるにはあるけど・・・
果たしてCSSが適用されてないページを見て納得してくれるかな？ｗ

つかNN4利用者って今実際どのくらいなんだ？信頼性ある統計とかあったっけ？
むしろNN4利用者はまともに表示されないのはしょうがないとか思ってくれてたりするのかなぁ

>>227
う〜ん、ASP.Netで入力系兼照会系画面にて、照会実行時に変更できなくしたかったんです。
でも、灰色だと見づらいし
きちんとやるなら、テキストボックスを非表示にしてバインドで表示とか
するんですけど、面倒だったので

>>238
それ設計間違ってるよ・・・
disableがdisableなのはあくまでブラウザ依存
リクエストを改変してサーバに投げられたらどうすんの？

>>239
社内システムでブラウザが限定されてしまっているので、お手軽な方法を取ろうかと思いました。
ページ開く時やBLに渡すとき権限チェックしてても、危険は少ない方が良いですね。
勉強になりました。

BLって何？

BoysLove

ﾄﾞｼﾞﾝｼﾈ!!
　　　　　　　ｶﾞｯ　　☆
　( ･∀･)っ―[]M／
［￣￣￣］ ヽ( ･∀･)ﾉ ←>>242

>>241
マジレスすると、Business Logic 、つまり社内基幹系システムのことではないかと
思われる。他にも
PG = Programmer
PM = Project Manager
こういう頭の悪そうな略語が、この業界にはたくさんある。

>>213
ttp://members.jcom.home.ne.jp/pctips/windows/Extension.html
野崎氏は、
*.cssは「Cascading Style Sheetsの外部ファイルで必ず使用されるべき拡張子」です
と書いているな。

CSSは拡張子が決まってるのは知ってたけど、仕様書の何処に書いてあるんだろう。

>>245
ttp://www.kanzaki.com/docs/html/htminfo17.html#S31
web kanzakiでは<q>CSSの場合は通常「.css」という拡張子をつけて</q>と記述
されてるな。通常という表現であって仕様という表現ではないみたい。
てか仕様書見てもわからんかった。

>>245
http://www.faqs.org/rfcs/rfc2318.html

途中で送信してしまった。

Additional information:

Magic number(s): none
File extension(s): .css
Macintosh File Type Code(s): "css "
Object Identifier(s) or OID(s): none

>>247のこれね。

tableで列を３：７にしたいのですが、どうやればよいのでしょうか？
td.left、td.right とかでwidth指定しか思いつかないので、もっとよい方法あったらお願いします。

>>249
col

>>250
col…ですか？初めて見ました…（´Д｀；）

>>250
調べたら、CSSじゃなくタブに記述するのですね。
スレ違いですね、すいません。
ありがとうございました。

colgroupやcolはHTML要素です。
http://www.kanzaki.com/docs/html/htminfo16.html#colgr

>>252
>タブに記述
タグに、のつもりかな。
タグ内に指定するインライン・スタイルシートでなくても、外部スタイルシートでよし。

>>249
たしか%指定ってできなかったっけかな
30%と70%に分ければいんでないの

>>254
タグの間違いでした。すいません・・・
えっと、つまりCSSで指定できるってことですか？
軽く調べて出てきたのは
<table>
<colgroup>
<col width="30%"> ...

っとタグでってのだけ見つかったのですが。

>>256
CSSにはwidthプロパティがあるじゃないか。

>>257
widthだとtdの部分全部統一されてしまうのでは？
すいません、どこをどうしたらよいのやら・・・m(_ _)m

>>258
お前セレクタ間違ってるな。
colgroup、colに指定するんだ。

質問です…ちょっと長いですが、まずソース書きます。
#block{
float:left;
width:33%;
}
#block dl{
margin:0px;
padding:15px;
}
#block dt{
background-color:#FCFDDB;
border-style:solid;
border-bottom-style:dotted;
border-width:1px;
border-color:#f2a32b;
padding:0.2em;
}
#block dd{
background-color:#FCFDDB;
border-style:solid;
border-width:0px 1px 1px 1px;
border-color:#f2a32b;
margin:0px;
padding:0.2em;
}

<dl>
<dt>what's new?
<dd>更新情報</dd></dt>
</dl>
</div>
<div id="block">
<dl>
<dt>what's new?
<dd>更新情報</dd></dt>
</dl>
</div>

<hr size="1" color="c0c0c0" style="display:none;clear:left;" />

<div id="block">
<dl>
<dt>iwhat's new?
<dd>更新情報</dd></dt>
</dl>
</div>
<div id="block">
<dl>
<dt>iwhat's new?
<dd>更新情報</dd></dt>
</dl>
</div>

上のCSSと合わせて、水平線をはさんで上下に□を三つづつ計六つ配置しています。
NN７で確認すると、水平線の上にある□三つは、iwhat's new?の下に来るborderがドットで表示されるのですが、
下の□三つはiwhat's new?と更新情報の間にborderが表示されません。
IE６では水平線の上下共に表示されます。なぜこんなことになってしまうのでしょうか？解決策はありますでしょうか。よろしくお願いします。

>>260-261
>border-bottom-style:dotted;
>border-width:1px;

border-widthをもっと太くして試してごらん。

□？

□三つ――って？

□はdlのボックスのつもりだとしても、上下各二つしかないし。

>>262
2pxにしたら水平線の下側のwhat's new?の下にもborderが出てきました…。
水平線の上側は2px、下側は1pxの破線で表示されています…。

水平線をはさんで上下でまったくおなじ表記をしているのに、なぜこんなことに…？

>>263
あ、□と書いたのはdlのボックスです。分かりづらくてすみません。

>>264
書ききれないので省略しました。説明不足でした。

>>261　
HTMLが間違ってゐます。dtの中にddは入りません。
これからは下記でチェックしませう。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

>>261
IE6.0でもNN7.01でも同じように見えるけど・・・。
どこが問題？？？

・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。

>>266
ありがとうございます、直しました。
が、水平線の上下でdt部分とdd部分を区切る破線の太さが違うという現象は解決しません。
これはどこが問題なんでしょうか？

>>267
Netscape 7.1 で見ると、
>border-bottom-style:dotted;
>border-width:1px;
の状態だと水平線の上側のボックスにはdtとddの区切りに破線が表示されるけど、水平線の下側のボックスには表示されません。
>border-width:2px;
とすると、上下共に表示されますが、上側のボックスがが2px、下側のボックスが1pxで表示されます。

>>269
ごめん。7.01間違い。7.1でもIEと同じに見えた。

>>269
ちなみにOpera7.23でもNN7.1とIE6.0と同じに見えたぞ。
質問の意味がさっぱりわからん。

>>270
>>271
そうですか…ご確認いただいてありがとうございます。
私の環境に何か問題があるのでしょうか、IE６ではきちんと表示されるのですが、NN7.1ではだめです…。

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

>>261
＞<dl>
＞<dt>what's new?
＞<dd>更新情報</dd></dt>
＞</dl>
＞</div>
先頭行にdivの開始タグが脱けてないか。HTMLをちゃんとチェックしてみ。
それが無いと、確かに>>269の記す通り、線の太さが異って表示された。
“<div id="block">”を先頭につけると、直った。

>>272
表示結果を晒してみる。
ttp://sakots.pekori.jp/cgi/sn/src/up2109.png

因みに>>261のソースの
<hr size="1" color="c0c0c0" style="display:none;clear:left;" />
は
<hr size="1" color="c0c0c0" style="clear:left;" />
に修正して実験してる。
display:none;だとclearプロパティーは無意味だから。

あと、表示→テキストの拡大／縮小で150%とかにすると、線の太さは同じに表示された。

>>275
それ以前に最低でも
<head>
<style>
hr { display:none }
<style/>
<head/>
が正解だ

>>276
ｽﾏｿ
><style/>
><head/>
</style>
</head>

見出しやナビゲーションボタンなどを画像で置換する場合
<h1 id="midashi1"><span class="hidden">大きい見出しだよ</span></h1>
というのはW3C的にはあまり好ましくないやり方なのでしょうか。

spanってそうゆう時のためにあると思うのだが

>>279
span自体に論理的意味がないような書式はダメダメよー、ということに
なるのかと思って。

見出しを画像で表示したいって意味なのか？

見出しは例です。hrを画像化する、とかでもいいです。自分的に
一番使ってるのはli要素使ったナビゲーションバーですね。
li要素にa/a:hover/a:activeかけて縦横幅と背景画像指定して
ナビゲーションバー作るってのはよくあるやり方だとおもいますが、
そのときに、もともとのソース上のテキスト部分（たとえば
「ホームに戻る」）を視覚系UAで「消す」っちゅう行為を、
span要素でやるのはアリなのかな？　と。

そもそもspanを使わず、文書構造的に見てもっと洗練された形で
文字を隠すCSSの書き方があったりするのでしょうか。

>>276
hrは別に非推奨ではないんだし。何でそんな消したがるのかね。

>>282
意味がわからん。
テキスト無しで、ただh1なりliなりの中にimg要素を入れれば済む話では。
altもあるでよ。

とりあえず、spanを使う事態になるのは凄く稀だ。
俺が文盲のせいもあるが、ちょっと言いたいことがよくわからん。

ソースを出してくれないかな。

>>283
どちらでも良いんだけど
border使う方が良いんじゃないか？

>>284
画像自体に意味のある止め絵ならimgでいいんですけど、
ケッコー装飾的な要素だし、マウスオーバー／オンクリックで
変化つけたいなぁとも思っておりまして…。
ソースさらします。↑最後のｄを半角にして下さいまし。
ttp://hello.to/viviｄ/

イメタグにclassやidつけて疑似要素で表示変える、てのは
許されるのでしょうか？　src=の引数と実際に表示される画像が
変化する、というのはW3C的にはダメなのかなて思ったり。

メチャクチャ、後出し＝スルー　　ってか？

>>287
> <p>　</p>
段落とは「長い文章の中の、一つの主題をもってまとまった部分」。
すなわち表意スペース一個だけなのに「段落」とは主張できないな。
理解できないなら好きにすればいいけど。ﾀﾞｻｲから。

とりあえず、整理して考えろ。
優先順位はHTML＞CSSだ。

CSSのためのHTML記述は本末転倒だからな。

>>287
うん…それmarginに手を入れて消さなきゃなーと思いつつ、
まだ時間なくてやってなかったとこです。ご指摘ありがとう。

まちがいた。>>289さんですた。

>>290
となるとやはり、spanで文字消して画像のみのナビボタンとかってのは
邪道なわけですね。うーむ。ありがとうございます。

見出しに関しては、
<h1><img="./images/nav_vivid.gif" width="***" height="***" alt="VIVID Online" /></h1>
とするのがやはり妥当。

マウスオーバーやオンクリックで変化をつけたいっていうのは・・・
Mozilla系ならa要素以外にも擬似プロパティがきくんだけどなあ。

>>294
HTML4.01に“<img…… />”はないだろw

>>295
やっべやっべ。そうだな。もうだめだ。

>>295-296
いや、<… />が自然に出るつぅのは、テーブルレイアウトから脱却1週間目の
人間にはとてもかっこよく見えます。諸アドヴァイスありがとうございました。

>>297
いやいや、そうじゃなくて空タグ閉じるのはXHTML。
ってか、そのあたりも勉強しなよ

＃ CSS以外で引っぱってスマソ

>>294
妥当とかじゃなく、別に background-image を使っても良いんだけど <span> でいちいち包含しているのが糞
何の為に id 付けしているのか意味が無いってこと
基本的なことを勉強すべし

次の片どうぞー

spanを使わずに、
http://www.unknownplace.org/blosxom/blog/95.html
> text-indentで、これに大きめの負の値を入れてやることによって、テキストを見えないところにすっ飛ばして
という方法もある。でもこれはこれで見えないところにテキストがあるってのが気持ち悪いが。

それじゃ画像非表示だとなんにも表示されないじゃん
使えねー

>>301
その文章を引用するのに、なぜ大元のサイト
http://hail2u.net/blog/webdesign/fahrner_image_replacement_hacks.html
から引用しないのか理解に苦しむ。
晒すならこっちだろ。

>>298
いや、それは知ってるんですけど、自分的にはXHTMLはこの次の段階で
進むべき世界って感じなので、それが手癖になってる人は未知の世界の
住人さんぽくてカコイイな、と。

>>299
<span class="hidden">じゃなくて<span class="textnavigation">
とかならいいんですかねぇ。a／a:hover／a:activeで画像ロールオーバー
効果を作る、という条件だと、a要素自体にhiddenとかnoneをかける
わけにはいかないので、結局テキスト部分をspanで消すか、>>301さんの
言うように位置をすっとばかすしかないみたいで…。

「W3Cの原則的立場を厳守するなら本来実現できないようなwwwの
視覚表現は、そもそも目指すべきでない」というのが、このスレとしての
正解でしょうか？

>>302
あ、そうか。>>278も同じだね。やっぱりimg要素にalt属性が一番いいのかな。

>>303
すまん。よく見てなかっただけだ。

W3C的主義でありたいならこうゆう時こそJavaスクリプトでDOMればいい

>>306
で、スクリプト切られてて何も表示されず(プ

ValidなHTML+CSSとか言っといてスクリプト使えばって話題になると見た目がスクリプト依存だと思い込む頭の弱い持ち主が居るな

ページ全体の横幅を７００に設定したいのですが、色々試してもなりません。
教えてもらえないでしょうか？

>>309
body{
　　width:700px;
}

>309
迷惑だからやめて

>>311
迷惑って？

px固定は困りものです。

横幅800固定やめろ。ブラウザ最大化するのｳｻﾞｲ。
http://pc5.2ch.net/test/read.cgi/hp/1031302476/l50

そのスレは「800pxは広すぎる」と言っているのであって。
640pxならそのまま印刷してA4収まるし、XGAでも
問題なく閲覧できるし、一般的視覚系ブラウザでも
そこそこ充分な描画領域が確保できるし、いいんでないの。

原理主義者は「横スクロールできないUAが存在する場合は
どうするんだ！」とでも言うのだろうか。

>>314
何の原理主義者？

>>315
ｲｽﾗﾑ

>>316
ああ、商人だからか。

CSS側で制御する視覚要素は
気に食わなきゃ自分で変更できるんだから
どうでもいいじゃん

なんでできないんだろう…。
詳しい方法教えてくれませんか？

>>319
>>310

>>319
ここに来ているということは、CSSは使ってるんじゃないの？
>>310以上に詳しくは難しい

<body style="width:700px">

ﾎﾞﾃﾞｨﾀｸﾞこう書き換えたら？

>>309=319
ブラウザの種類とバージョンぐらいは明記しろ。
環境も提示しないで「教えてくれ」だと、反吐が出る。
どうせWinIE5.5以下か、WinIE6の互換モードなんだろう。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic4

bodyの下にひとつdiv噛ませてそこでwidth指定したほうが
好ましいかも。中央寄せするときとかも背景がちゃんと
追従する。body style:widthだとダメなんだよね。

>>323
もしかして計算ができないの？

WinIE6の互換モードとはなにですか？

計算て？

>>314
>そのスレは「800pxは広すぎる」と言っているのであって。
http://pc5.2ch.net/test/read.cgi/hp/1031302476/247-400
247 ：Name_Not_Found ：03/09/16 16:54 ID:???
A4ﾌﾟﾘﾝﾄｱｳﾄなら500以下、
WEB閲覧専用なら550〜700が見易いね。

252 ：Name_Not_Found ：03/09/27 01:38 ID:???
「ページの横幅」
http://deztec.jp/site/tips/page/p0015.html
>Windows の動作環境では 640x480 が最低基準となっていますので、これに
>合わせれば問題ない……と思いきや、そう考えるのは早計だったりします。



282 ：Name_Not_Found ：03/11/09 00:31 ID:???
横幅固定は、制作者の自由という名のテロルだよ。
1つの環境の強制以外の何者でもない。

400 ：Name_Not_Found ：04/02/28 12:16 ID:???
pxに依存せず、emか%でレイアウトしなさい。

>>327
他所でやってくれ

実際emと%だけで解像度耐性ある
サイト作ろうとすると自由度低すぎて
どうにもならんよ。
ベクター画像フォーマットが一般化
するまでは
px使うよ。

画像中心のサイトなら仕方ないが、テキストが主ならやり様はある。>>329

とりあえず窓の幅480px以上で崩れず見れるように作ってますが
そんな難しいかね？

480pxってのは、現実的な意味でとても良識的な線かもね。
難しいというのは、商用サイトみたいなデザインの移植んとき。
いくつかのブロックをテーブルレイアウト的な形で
レイアウトして、飾り画像を配置して、とかやってく場合
相対値ベースじゃどっかでレイアウトスキームが破綻しちゃう。
歯抜けやズレはコーディングと背景次第で対処できても
個別の飾り画像をジャギなしに拡大縮小できないことの問題は
いかんともしがたい。

あと、相対値指定ベースでやると、カラムに入れる
オブジェクトの大きさでブロック配置の乱れない最少幅が
変化してしまうのも、あまりうれしくはない。

>>325
おまえはなぜ >>322 で提示したリンク先を読まないのだ。
他の連中も反吐が出るが、Nwqu+BeT はどうしょうもないな。

おまえらみたいな厨房は狭い世界に縮こまって一生生活してろ。

ムシャクシャしてたのかな

定義リストdlのcompact属性と似た構造を
cssを用いて表現するにはどうしたらいいかな。
display : inline; では横続きになってしまう。
一項目ずつ</dl>で区切れば実現できるが
<dl><dt></dt><dd></dd></dl> <dl><dt></dt><dd></dd></dl>
これは明らかに美しくない。

・・・と思ったけど解決した。

>>335
解決したならその方法を書くべし。同じ悩みを持つ人間に参考になるしね。

dt { float: left; width: ??em; clear: left; }
dd { margin-left: ??em; }

こんな感じかな。

それＦＡＱのＱ８に既出。>>7にある。

あぁ、解決したってのは>>7の事だたのかーorz

>336
dt { display: compact }
dd { margin-left: *em }

>336
失礼、送信ミスった。
>339がその方策。

>>339
うほ、display: compact; は思いつかなかった。サンクス。
今度試してみよう。

display: compact;はOperaでしか効かない。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/visualren.html

>342
じゃブラウザに対応してもらわないとな。

tdのnowrap属性を、
ユーザースタイルシートで無効にする方法はありますか？
table, th, td {white-space: normal !important;}
ではだめでした。

CSSの勉強始めたけど面白い・・・

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

>>342
safariでも効くぞ。

>346　失礼いたしました。MeでIE5.5です。

<td nowrap>だとして
td[nowrap]{white-space:normal !important;}


IEじゃ無理か。

>>344=348
WinIE5.5 は white-space: nowrap; のみ対応。
WinIE6 は [normal | pre | nowrap] のすべてに対応。
ただし「pre」については標準モードのときのみ適用。

IE をバージョンアップするなり、他のブラウザに乗り換えるなりしる。

>>344
>table, th, td {white-space: normal !important;}
まったくの逆
（　´,_ゝ｀）ﾌﾟｯ

ttp://jigsaw.w3.org/css-validator/validator-uri.htmlでCSSを検証した所、以下のエラーが出るんですが、

Parse error - Unrecognized : <STYLE type="text/css"> <!-- body{ background-color:#fafff0; color:#000000; }

何処が悪いのか分かりません。根本的なところが間違っているんでしょうか？

根本的に間違ってるのは質問の仕方だな・・・

少なくとも
１）<STYLE type="text/css">
２）body{ background-color:#fafff0; color:#000000; }
３）<!--
この三つは間違っていない。
まちがってるとすれば、DOCTYPE宣言か、コメントの閉じ忘れだろうと思う。

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww2.odn.ne.jp%2Fegamima.com%2Fstyle001.css&warning=2&profile=css2&usermedium=all
こんな感じで表示されたんで、上記ののなかでエラーがあると思いました。
すいません。一から見直して、出直してきます。

>>352
なるほど。わかた。
3
4
307
309
行目を削除しる。
外部スタイルシートにHTMLは必要なし。

言い忘れた。
すまん。最初のURLを確認してない漏れが悪かった。
CSSの検証にかけたのだったね。
君は悪くない。最初の質問で即答えがだせなかった漏れが悪かった。
反省と謝罪します。

>>355
ありがとうございました。やっとバナーを手に入れました。
いや、こっちも日本語が足りませんでした。反省します。
もう１回ありがとうございました。

ここで質問するべきなのかどうか分からないのですが、
iframeなどを使わずにCSSでiframeのようにする方法はないでしょうか？

>>358
>>7
【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

でﾖﾛﾃｨｸ

>>359
有難う御座います！

あれいちいちスライドバードラッグしないと動かないのよね・・・

念じれば動くようになれば便利なのにね

日本語不自由なのか？

確かに君の日本語解析能力は不自由ですね

日本語解析能力ってなんだ？　読解能力だろ。
　やっばり不自由なのね。

確かに君の日本語解析能力は不自由ですね

　　よ　そ　で　や　れ

>349-351　どうもありがとうございます。IE5.5では未対応だったのですね。
white-spaceは使ったことがないのでよくわからないのですが、
どのへんが逆なのかわかりません。
対応したブラウザで試してみようと思います。

>>368
>>351 はｱﾌｫなので、全く気にしなくよし。

教えていただきたいのですが、
body{font-size:○%;}の指定はまずいですか？
互換モードのページでbody{font-size:x-small;}で指定していたら
WinIE6SP1とNetscape7.1では文字の大きさが違い、
body{font-size:80%;}にしたら二つでは同じに見えたので
この指定にしようと思ったのですが、
%指定って相対指定だけどbody以外にフォントサイズを指定していないので
どこを相対しているのか
そもそも他のブラウザではきちんとみえるのか、
なんだか不安になってしまいました。

>>370
フォントサイズに関してはpxで固定しない限りはどう指定しても構わないと思うけど
emで指定するのが無難だと俺は思います

%の指定はユーザーサイドで指定してるデフォルトのフォントサイズと照らし合わせた相対値です
たとえばユーザーサイドでフォントサイズを12pxで指定していたら、12×0.8=10.4pxになります

>>371
em指定はIEで文字サイズ調節した時に極端にサイズが変わるからやめたほうがいい。

>>372
body {font-size:100%;}としておけば大丈夫だよ。

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

x-smallだ？　80%だ？　本文を豆文字にするのやめろ。>>370

フォントサイズについて考えよう
http://www.geocities.co.jp/AnimeComic/5498/misc/hp-1042293757.html
↑過去ログ倉庫にも見つからないので、2ch外で保存してあるのを。
　# やはりpc2サーバー消しちゃった事件はまだ害を残すね……。

font-size: 90% 指定だって豆字固定と大差無い
http://www.remus.dti.ne.jp/~a-satomi/nikki/2003/11a.html#d09n02

>>370 が自分で読み易いサイズに“ブラウザの設定”を変更すれば良いこと。
制作者が body { font-size: 100% } か無指定にしてくれれば皆が幸せになれる。

WinIE はフォントサイズ設定が無いからユーザースタイルシートで，
Netscape 7 だったら [編集]→[設定]→［表示］→［フォント］ から設定しる。
ttp://hp.vector.co.jp/authors/VA022006/css/images/mozilla_fontpreference.png

他のウェブブラウザでも大抵は、フォントサイズを自由に設定できる。
CSS に手を出す前に、ウェブブラウザの使い方ぐらい覚えたらどうだ。

えっらそうに！

■こんなサイトはウザいのでやめておけ　其の五 ■
http://pc5.2ch.net/test/read.cgi/hp/1077185914/34-210
CSSコミュニティの功罪を評価するスレ 15th fool
http://pc5.2ch.net/test/read.cgi/hp/1076926917/67-685

>>376
そうそう慣れた人以外はフォントサイズを
ブラウザで最初から自分で指定しないかなと思うんだけど。
大きい文字や小さい文字のサイトに行った時に初めて表示の部分のフォントサイズを弄ると思う。
初心者はと噛み付かれそうだが…。
でも、丁寧に設定方法を教えてくれてありがとう。

相対指定の指定でもサイズ指定を、嫌いな人は嫌いなんですね。

他の皆様も、ご意見ありがとうございます。
この文字設定が小さいと思う人は
相対要素だから好きに大きくしてもらえるからの%指定のつもりでした。
80%は豆文字に見える人もいるんですね。
ここの日付を少し小さくしたくらい大きさで私は大きいより読みやすいと感じていたんですよ。
自分のところの訪問者の人に文字サイズがどのくらいがいいか
聞いてから判断しようと思います。

背景について質問させて下さい。

背景画像を固定する↓
background-image: url(back.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

背景色をグラデーションにする↓
FILTER: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#E0FFFF, endColorstr=#FFE4E1, gradientType=0)

この二つは同時に指定する事は無理なんでしょうか。
色々とやってみたのですが、背景色をグラデ指定すると画像が見えず…
どなたか教えて頂ければ嬉しいです。

>>380
普通にグラデーションと画像を合わせた壁紙にすればいいジャン

テキストを中央に表示するのってどうすればいいのでしょうか？

基礎は解説サイト（>>4・かなりわかりやすい）で勉強してください。

>381
グラデ背景＋画像で1枚の背景画像を作ると、
どうしてもサイズが大きくなってしまうので
CSSで指定出来るならそうしたかったのですが。

矢張り無理なんでしょうか…
諦めてどちらかを取る事にします。

>>382
テキストを中央にあわせるようにマークアップすればいいです。

あわせるように→表示させるように

>>382
<center>ってタグがあるよ！！

>387　ｺﾗｺﾗ

すいません。初心者です。
どうにもこうにもボックスがうまく設定できません。
いろいろ調べてもどこがおかしいのかわからないので、
どなたかご指摘頂けるとありがたいです。

以下のスタイルと適用すると、widthの値が適用されず
ひたすら横に長いボックスが出来上がってしまいます。
自分では、widthの長さでボックスが出来、文字もその範囲で
折り返して表示されるものだと思っているのですが、、、
（pタグにはbrは入れてません）

<html><head>
<style type="text/css">
<!--
div {width:100px;}
p {background-color:lemonchiffon;
font-size:14px;
color:orange;
padding:30px;}
-->
</style></head>
<body>
<div><p>QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQAAAAAAAAAAAAAA
　　AAAAAAAAAAAAAAAAAAAAAAZZZZZZZZZZZZZZZZZZZZZZ
　　ZZZZZZZZZZXXXXXXXXXXXXXXX</p>
</div>
</body>
</html>

>>389
英字でなく、平仮名を使ってみ。

>>389
「QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQAAAAAAAAAAAAAA」
という長い一つの単語として扱われるから折り返されない。
単語の途中で折り返されると2語に分断されてしまうので困る。

欧文などでは空白かハイフンを単語の区切りとして折り返される。
これを word-wrapping や hyphenation という。テキスト処理の基礎。

>>384
グラデなんかのフィルター類はブラウザ互換が凄く低いから
あんまり使わない方が良いよ

どうしてもグラデーションにした背景を使いたいなら壁紙にした方が無難だよ

つまずいてしまったので教えてください。
テーブルに（仮に2行×2列）CSSで1pixの罫線をつけたいのですが（田の字に）
全体を選択すると外側しかできないし、個別に指定すると隣の罫線とダブル所は
2pixになってしまうしで困っています。やはり上段は（上左右）、下段は四方みたく
ダブルところがないように指定しなければならないのでしょうか。

テーブルのセルが増えていったときに面倒なのでなにかいい方法はありますでしょうか？

画像に黒枠を付けたいのですが。

外部スタイルシート
.sen{
width:1px;
height:1px;
border-style:solid;
border-width:1px;
}

で、<span class="sen"><img src="画像URL"></span>
このようにやると、画像が黒線で囲まれはするのですが
両脇に３ｐｘくらいの余白が出来てしまいます。

画像にピッタリと線を合わせたいんですが、このソースで何か問題は
ありますか？

cellspacing="0" border="1" bordercolor="#******"

>>393　　cellspacing="0" border="1" bordercolor="#******"

>>394 　　<img src="画像URL" alt="****" width="**" height="***" border="1">
　　　　　　.sen などいらん。

>396
ありがとうございます。

＞cellspacing="0" border="1" bordercolor="#******"
はHTMLですよね、やってみたのですがCSSで1pixした罫線よりも少し太くなるのですが。

できれば極細1pixの罫線が引きたくて・・・

>>394　正しく書けば正しく表示される。
　そんな<span>をどこで教わったんだい？

>>395-396
すいません、１ｐｘの線を入れたいんです。
そのソースだとborder="1"でも若干太くなっちゃうじゃないですか？
細い線で囲もうとしたらこの方法が良いかなと思って。（ページ全体の画像）

>>398
あ、変ですか？ｗ
自分で考えたんですけど。

>>393

table {
background-color:#******;
border-width:1px;
border-style:solid;
border-color:#******;
}

>399
なんか親近感わいてきた・・・

>>394
img {
border-width:1px;
}

>>402
え？

>>403
あ、これでできるんですか？やってみます。

>>393
>>401と同時に htmlに cellspacing="0" も忘れずに入れろよ。

>401
丁寧にありがとうございます。
試してみたのですが、これだと田の字の外枠だけに
罫線がはいってしまし＋の部分が適用されませんでした・・・（涙）

>>394

<img src="画像URL" alt="****" width="***" height="***" class="sen" />

>>393
table {border-collapse:collapse;}
table td {border:1px solid #000;}

border-collapseが有効じゃないブラウザでは、こうかな

table, table td {border-style:solid;border-color:#000;}
table {border-width:1px 0 0 1px;}
table td {border-width:0 1px 1px 0;}

んー、もうちょっとすっきりしたやり方あるかも

>>393
邪道ですがtableの入れ子する（CSS不使用）。
bgcolor="#枠線の色"としたtableのセルの中に
本来のtableをcellspacing="1"として入れる。
YAHOO!で見た。

>408
使い方が間違ってるのかもしれないですがどうもうまくいきません。
もうちょっとがんばってみます。
ありがとうございます。

>409
できました！これいいですね！
全く思いつきませんでした！
ありがとうございます。

trを下と右に　td,thを上と左に　でどうだ。

と思ったけど、trに指定しても仕方ないか

テキストのalign="right"はtext-align:right;ですよね？
画像の場合はこういうのはないのでしょうか？
右から100pxとかじゃなくて、単純に左中右、っていうの。

>>414
多分、UA のデフォルトスタイルはこうなっている。
img[align="right"] { float: right; }
img[align="top"] { vertical-align: top; }

といか >>8 を読めば書いてあるだろう。調べろよ。
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm#img_align

HTML 4.01 の仕様書とかにも書いてある。
>オブジェクト、画像、表、フレームなどの align属性は、それらを左または右マージンに浮動させる。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/graphics.html#floating

質問です。
<a href="c/index.html" onkeypress="return show('List01')" onclick="return show('List01')">〜</a>

をCSSで簡略化することはできるでしょうか？

例えば、
onkeypress="return show('List01')" onclick="return show('List01')"
を　func('List01')　で表現するような方法があるのでしょうか？

(ﾟдﾟ)ﾊｧ?

>>416
無理

tableを使ったページを作っているのですが、
letter-spacingで文字間隔を広げると、tableの枠から文字がはみ出てしまいます。
tableからはみ出さずに文字間隔を調整する方法はあるのでしょうか？
ちなみに今は、head内に記述しています。
Mac OS 9.2、ブラウザはIE5.1です。
どうぞよろしくお願いします。

>>418
そうですか・・・横着はできないんですね
ありがとうございました

>>419
テーブル使わなければならない理由は？

>>419
う〜ん、<BR>で頑張るしかないんじゃないかな

>>421
四角い枠の中に文字を入れたかったので…。
tableしか思いつきませんでした。他にあるのでしょうか？
初心者なもので…。

>>422
やはり、無理ですか。
とりあえずは、table無しでやってみることにします。
お二人とも、どうもありがとうございました。

>>423
>四角い枠の中に文字を入れたかったので…。

そこでdiv囲みですよ。

>>419　帰っちゃったの？　　じゃあもういいか。

>>424,425
ありがとうございます。解決しました。
おっしゃる通りdivで囲んで、border-styleでできました。
掲示板とか見るとtableが多いので、なんとなくtableがいいんだと思い込んでいました。
非常に簡単なことでお騒がせしてスイマセン…。

>>419
いかったね。

クラス名は汎用性のあるものにした方がいいのでしょうか？
例: div.rightmarjin div.left

それともどこで使用しているかすぐわかるようなものにした方が良いのでしょうか？
例: div.title div.menu

よろしくお願いします。

>>428
お好みで。

クラス名は仕様書には触れられてないのでしょうか？
とりあえずお好みで使います。

>>428
例: div.title div.menu

と、思ったらまたはみ出てました…。恥ずかしすぎです……。

<div style="margin-left: auto;
margin-right: auto;
width: 65%;
border-style: solid;
border-width: 1px;
line-height: 150%;
letter-spacing: 2pt">

センターに揃えにしたのですが、letter-spacingを入れるとテキストが右にはみ出てしまいます。
マージン内におさめる事はできないのでしょうか？
どうか、ご教授ください。ホントに間抜けでスイマセン。

>>432
そのテキストは日本語か？

>>433
そうです。

>>419=>>434
ソースを、と書こうと思ったけど、ブラウザ（MAC IE）のバグのような予感が。
「自動折返しされる長さを持った要素にletter-spacingを適用すべからず。
表示が崩れます。」
http://cssbug.at.infoseek.co.jp/detail/macie/b014.html

>>434
　いまWIN IE6で上のをテストしたけど、はみださないなぁ
Macかい？

>>436
>>419
> Mac OS 9.2、ブラウザはIE5.1です。

志村ー！！！

しんづれいいたしました。

>>435
バッチリはみ出しております…＿|￣|○

でも自分の間違いではないようで、ホッとしました。
バグなら仕方ないので、とりあえず@mediaで囲んでおきます。
ご親切にどうもありがとうございました。また何かありましたらよろしくお願いします。

>>7にあるリンク先で疑似フレームの作り方を勉強したのですが、今ひとつ理解出来ませんでした。
検索してみても良くわかりませんでした。
ttp://www.awcs.org/←のサイトのように囲む感じにしたいのですが、どうすれば良いのか何方か詳しく教えて下さいませんでしょうか？
ソースを見てみようとも思ったのですが、何故だか見れませんでした。

>440　＞リンク方法 -テキストリンク-
と書かれているところなどのことを指しているのかな。
そうだとすれば、ただのtextarea要素。CSSは関係なし。

それで、確かtextareaは
formの部品として使うべきものだと思うのだが。
（textareaなんて使ったことがないから、えらそうなことを書くとおこられそうだ）
そういう理由でinvalidだと思う。

>>441
ああ、すみません、肝心な何をやりたいのかを書くのを忘れていました。
疑似フレームをやりたかったのですが、なんとか出来るようになりました。
だけど、ブラウザのサイズを変えると白い線のようなものをが出てきてしまって今困っています。
ちょっとソースをチェックして貰えませんでしょうか？

<html>
<head>
<title>test</title>
<style type="text/css">
.header,.footer,.left,.right{background:#000000;color:#ffffff}
.content{color:#000000;background:#ffffff}
body{padding:0px;margin:0px}
.header{width:100%;height:15%; overflow:auto;}
.left{width:15%;height:70%; position:absolute;left:0%; top:15%; overflow:auto;}
.content{width:70%;height:70%; position:absolute;left:15%; top:15% ;overflow:auto;}
.right{width:15%;height:70%; position:absolute;left:85%; top:15%; overflow:auto;}
.footer{width:100%;height:15%; position:absolute; left:0%; top:85%; overflow:auto;}
</style>
</head>
<body>
<div class="header">ヘッダー</div>
<div class="left">レフト</div>
<div class="content">
あああ…あああ
</div>
<div class="right">ライト</div>
<div class="footer">フッター</div>
</body>
</html>

>>442
試したらサイズを小さくしたら出てきた。
多分、表示領域を%で計算された場合の半端数でそうなる予感。

回避としては、

body,.header,.footer,.left,.right{background:#000000;color:#ffffff}

body 要素にも背景色追加。これでいけるよ。

>>443
返答有難う御座います。
言われた通りにbody要素も追加してみましたが直りませんでした。
逆に全画面表示にしたら白い線が出てくるようになってしまいました。
やはりパーセント指定に問題があるのでしょうか？

>>442
ブラウザの表示を考える前に考えるレイアウト自体（リサイズの面）
が根本的に間違っている
疑似フレームはいいんだけど何処に何を配置するのかを考える
ナビゲーション等をリサイズさせると観覧しづらいことのように
CSS以前の問題だと思われ

質問です。
代替スタイルシートを、Opera等向けで導入しようとしたのですが、
ブラウザでスタイルを切り替えても、
そのページを更新したり、サイト内でページを移動したりすると
例えば
<LINK REL="stylesheet" type="text/css" href="default.css" title="default">
とした優先スタイルシートが適用されてしまいます。
ページの移動後・更新後にも
<LINK REL="alternate stylesheet" type="text/css" href="large.css" title="large">
などとした代替スタイルシートで閲覧していただくにはどうしたらいいんでしょうか？
ちなみに、私はOpera7.23で表示・動作確認しています。

出遅れたが>401はまだ見てるかな？

table {
  border: 1px solid #000000;
  border-collapse: collapse;
}
td {
  border: 1px solid #000000;
}

>>445
>>442はレイアウトとかじゃなくて何で白い線が出るのかが知りたいだけなんじゃないのか？
タイトルもテストだし

>>446
残念ながら HTML の仕組みだけではできません。
制作者がスクリプトとかで設定するしかないです。

例えば、次のような感じ処理するとか：

1. スクリプトで現在適用されているスタイルシートの
　 title属性を調べて onUnload 時に Cookie を書き出す。
2. 次回からのアクセスでは、Cookie からスタイルを設定。

JavaScript とか DOM とか Cookie とかの知識は自分で調べてみて。
それに「スタイル切り替えスクリプト」とかも配布されてるからさ。

本当は、ウェブブラウザがこのような機能を実装してくれれば、
制作者にとっても、閲覧者にとっても、喜ばしいのだけどね。

>>449
ご回答ありがとうございます。
てっきり、
「スタイルを切り替えられるようになってるのに、それを保持できないなんて事はないんじゃないか」
とか考えて、自分の記述に問題があるのかと思っていました。
ちょっと都合でJavaScriptは使えなさそうなので、諦めることになるかもしれませんが、
今後のブラウザ進化に期待します。

TABLEを撤去してCSSで表みたいなレイアウトを作りたくていろいろ
検索したんですけどあまり重要な結果は得られませんでした。

CSSで表の様なレイアウトを作るにはどうすればいいのですか？
一例だけでも教えてくれませんか？

>>390
>>391

回答をどうもありがとうございます。
無事解決出来て嬉しいです。
ひとつ勉強になりました。
（・・・というか私の勉強不足でした。^^;）

おめ　あいつか？

>>451
>>1からず〜〜っと読むと書いてある。

>>450
スタイルシート切り替えスクリプトは検索すれば結構出てくるよ

始めてみると結構おもしろいというか、便利だなぁって感じしますね

>>445
ちょっと良く分からないので、どこら辺が間違っているのか具体的に指摘お願いします。

>>457
コードに間違いはないしMozでは再現されないのでIEで窓サイズがなんらかの値の時にたまたま出るだけみたい
リロードしたり窓サイズ変えれば消えるし

>>457の言ってる事はdivにそれなりの実際的な内容入れて味噌
全てのdivにスライドバーが付いてる状態が目に浮かぶわけで・・・

>>458
なるほど、良く分かりました。それでは今の状態に色々と内容を詰め込んでいきたいと思います。
また何かどうしても分からないことがあったら書き込みしますので、その時はまた宜しくお願いします。
有難う御座いました。

CSSの記述や、できること等はだいぶ理解できたのですが、CSSを別ファイルにするのと直接書き込む場合の使い分けが要領よくできません。
なるべく別ファイルにしたいのですが、みなさんはどのようにされていますか？
補足ですが、主にビジュアルで見せるサイトを作っているのでスライス画像が多く、テーブルレイアウトを多用しているのですが、こういった場合もテーブルは卒業するべきでしょうか？

ビジュアルコンテンツが売りのサイトの場合、
画像非表示ブラウザ＆読み上げブラウザへの配慮とかしても
コストメリット的にあまし引き合わない、というのはあるよね。

テキスト量が少ないとCSS移行によるSEOでの有利不利も
あまり関係なさそうだし。あとは美意識とか志の問題かと…。

>>460
むつかしいことは良くわからんが、俺は別にしてる。
全てのページに統一感を持たせたいから。
んで、どうしても表示方法が変わるページだけ
HTMLファイル内に<style>で指定。それでもダメなら要素内に指定。
グダグダ感は否めないが、意外と便利。

レイアウトに関して使用していたテーブルは完全に排除した。
DIV厨になりかけたが、かろうじて踏みとどまった。
しかし、スキル不足な上に高望みをして
一部DIVで囲ってる要素がある(´･ω･`)

ひとつ言えるのは、テーブル使っちゃダメ。
DIV厨逝ってよしを実戦するとCSSのスキルは上がるｗ

テーブルは表だもん。

画像に枠をつけたいとおもい、cssでpadding:5px；background-color:#fffとしてimgタグの中にclassで指定しましたが、
MacIEでは表示されますがWinIEでは白枠が表示されません。
WinIEでも表示されるようにするにはどうしたらよいでしょうか？

ちなみにMacIE5.1.6でWinIE6です

基準となるCSSファイルと、個別のCSSファイルの二つにわけてる。

>>461>>462
レスありがとうございます。
極端な話ですが、一ページ全てが画像だったとして
いくつかのスライスに分けられている場合、画像を個別に位置指定してやる、
といったレイアウト方法で正解でしょうか？

>美意識とか志の問題
463が言うようにテーブルは表だというのは理解しています。
現在のテーブルレイアウトを全てCSSにするのは時間がかかるので
まだ手をつけていませんが、いずれ移行しようと思っています。

すいません、質問です。
文章を書く際に、横幅を指定する方法はありませんか？
今まではテーブルでwidth="500"のように横幅を指定していたのですが、
テーブルで指定するとページの読み込みに時間が掛かると聞いたので…。

>>464
WinIEのバグ
img要素にパディングを設定しても反映されない。
http://cssbug.at.infoseek.co.jp/detail/winie/b013.html

>>468
ある>>3-4

>>469
回答ありがとうございます。
初心者のため、>>4のとほほサイトを読んで見たのですが、
「上から何px、左から何px」のような指定方法なら見つけることができましたが
「横幅何px」というような指定の仕方が見当たりませんでした。
このような指定はどう行えば良いでしょうか。

>>470
横幅は英語でwidth。あとはお察し下さい。
http://msugai.fc2web.com/web/CSS/visudet.html

すみません、サトエリみたいなグラマーになるスタイルシート教えてください。

>>472
スレ違いですよ。↓にどうぞ。
http://pc5.2ch.net/test/read.cgi/hp/1081753565/

>>457
キミのやろうとしていることはあくまで例としての観点からだけど
全てに於いてリサイズすることが観覧者にとって親切だとは言えない。
フレームはWEBページに於いてナビゲーションの位置の解りやすさが
観覧者にとって利点となる。又、作成者にとってはナビゲーションを
各ページに配置しなくてもいいという利点もある。
しかし、疑似フレームでは作成者よりも観覧者側に気を配るのが
当然だろうね？何処にナビゲーションを配置するのかは解らないけど
リサイズするたびに乱れて表示されるナビゲーション程淫らなものは無い
ってこと

淫らなナビゲーション？？？

淫らなナビ・・・凄く気になる
ﾐﾀﾞﾗﾅNavi（・∀・）ｲｲ!!

font-familyでフォントを指定して、閲覧者のPCのそのフォントが
入ってなかったらどうなるのでしょうか？
自動的に別のフォントに置き換わるのですか？

>>477
ユーザ環境の UA で設定されているデフォルトになるに決まってるだろう。
総称ファミリをリストの末尾に記述しておけば、最低限の意図は保たれるが。

display : none;
を打ち消す値、ってありますか？

今、レンタル掲示板を作ってるんですけど、
「自作CSS利用可能」にすると、
著作権表示を消される可能性がある、と気付き、
そのあとに、displayプロパティを打ち消す記述が出来れば、と思ったんですが。

display : block;とかやってみても、noneの効果は消えませんし。

>>479
display:block;
display:inline;

どちらもnoneを打ち消すよ。
読み込まれる順番はあってるかい？

>>480
あってる、と思い込んでました。
思い込みって怖いですね。有難うです。

なんか>479の質問をもっかい読んでみたら
見当違いな答えをしてるような気がしてきた・・・
>480はスルーで。。。

だいじょぶだったらしいｗ
スレ汚し失礼しました。

>482
>483
ほんと助かりました。「順番はあってる」と思い込んでいたので確認もすることはなかったと思うので。

順番も何もそーゆーときこそstyle属性値として直接書けばよいわけだが

>>485
あ。そういわれるとそうですね。
なんか気持ち悪い、って先入観があって頭にstyle属性がなかったです。
アンチテーブルレイアウターが無闇とテーブルを嫌う頃みたいな状態に陥ってました。
有難う御座います。

float:leftでブロックを二行表示させてるんですが、
ブラウザのサイズを小さくすると、右側のブロックが左側のブロックの下に回ってしまいます。
これを、横スクロールでもさせて、回らないようにするにはどうすればよいのでしょうか？
つまり、まったくブロックのサイズを固定して、ウィンドウサイズの影響を受けないようにしたいのですが…。

>>487
<div class="hoge1">
<p>右側ブロック</p>
</div>
<div class="hoge2">
<p>左側ブロック</p>
</div>

hoge1 {
width: 50%;/*適当な幅で*/
float: left;
}
hoge2 {
margin-left: 50%/*hoge1のwidthと同じ値を*/
}

<div class="hoge1">
<p>左側ブロック</p>
</div>
<div class="hoge2">
<p>右側ブロック</p>
</div>
の間違いでした。

>>488
ありがとうございます！
上手くいきましたー。

まずは皆さん、論理的マークアップとそれに対する
CSSとは何かを勉強しましょうね

レイアウトに外部CSSを指定しているのですが、

@charset "Shift_JIS";
@import "../○○○.css";
body {background:#ffffff url(○○○.gif);}
?`

上記のようなbody要素の、背景画像だけが読み込まれないようなんです。
画像を指定して開くとちゃんと表示されます。
ローカル環境ではちゃんと表示されるんですが、
ウェブ上におくとなぜか表示されません。さっぱりわからない…。
同ページの他の要素に対する背景画像はちゃんと表示されるのに…（´・ω・｀）
ＩＥ5.1.7でもＮＮ7でも、オペラでもだめでした。
CSSの問題じゃないのかな…。

>>492
画像はちゃんとダブルクォートでくくってください

>492　画像のパスはあっている？
ローカルでは表示されても、アップしてからはまちがっているかもしれない。

>493　クォートはオプションだと、前スレあたりに書いてあったと思う。
つけるかどうかは任意じゃないかな。

ぎゃーーーすみません！！！
パ ス が 間 違 っ て ま し た ……＿|￣|●ﾊﾞｶｼﾞｬﾈｰﾉ

　　 　　 　∧＿∧
　　　　 　（´・ω・`）
　　　　((⊂　　　と）
ｸﾞﾘｸﾞﾘ(⌒　　　/
　　　（＿）ゝ　ﾉﾉﾉ
⊂（´Д｀　）つ_）
>>495

まぁそういうこともある。ｶﾞﾝｶﾞﾚ。

>487
余計なお世話だけど、回り込みが解除されて下に来る、ってのがfloatプロパティを使うメリットのような気もするんだけど。

行き詰まりました・・
本文のレイアウトが終わり、ページ上部の画像を配置しようとしたのですが、
うまくできません。
今まではスライス&テーブルで作成していたため、3つの画像があるのですが
ウィンドウリサイズしても改行されないよう隙間無く配置したいのです。
imgタグに適した属性などあれば教えてください。

>>498
>スライス&テーブル
各自拡張ですか？(ﾌﾟ
人に聞く前に基本から勉強しおした方がキミのためだと
思います。

position: absolute
top: **px;
left: **px;
上記で表示は正しくできたのですが使い方正しいでしょうか。
css関連のサイト等探したのですが、画像の扱いはあまり見つからず、
上記の方法にたどり着きました。

>>499
訂正しておきます。
その前に日本語勉強しなさいと言われそうなので
>勉強しおした方が
勉強しなおした方が

>>499
説明不足なのか質問が理解できないようなので追加説明です。
今までテーブルレイアウトだった画像3枚をcssに直しているのです。

>>502
その前に、HTMLがまずい予感。

>>498
ソース出さずに「並べて見せろ」ってのは、
冷蔵庫に何があるかを言わずに「あるものだけで料理したいんだけど」って言ってるようなもんだ。

>>502
> >>499
> 説明不足なのか質問が理解できないようなので追加説明です。
　　　　　　　　　　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
うん、理解できない。

>>498
そもそも「改行される理由」が分かってるか？
CSSで綺麗にしたいならスライスやめれ。

>>505
確かに見下した言い方だな。

<BODY>
<img src=***.gif class="t1">
<img src=***.gif class="t2">
<img src=***.gif class="t3">
</BODY>

位置は次のようにしてみました。

.t1{position: absolute;
top: 5px;
left: 5px;}

.t2{position: absolute;
top: 5px;
left: 225px;}

.t3{position: absolute;
top: 5px;
left: 585px;}

この3つの画像の画像の位置を指定しようとしています。
テーブルレイアウトやめるのならスライスもやめろ
ってことですかね。

ふつうに
<p><img><img><img></p>

ではいかんの？

>>507
すいません、悪気はないです。

>>509
それだとmarginやpaddingを0pxに指定しても隙間が埋まらないです。
ウィンドウ小さくすると縦に並んでしまいますし・・・

>>510
スライスすんな
これ以上言わせるなﾄﾞｼﾞｿ

>510
隙間が埋まらないのは単なる表示側のバグ。
論理的には>509で正解。

なぜ三分割してる？そこら辺の事情から聞かせやがれアンポンタン！

>>513
ﾄﾞｼﾞｿがﾃﾞｶい著作権侵害二次創作画像を置こうとしているからでFA

>510
というかアレか？
>509のIMGタグを改行やスペース入れずに横一続きにしてみろよ。

もしかしたらインポンタンかも知れんぞ。

つーかあれか？三分割した画像おのおのにリンク貼ってるのか？

質問です
外部スタイルの記述についてですが

html>#pagebody h1 {
font-size: large;
}


この記述の意味を教えてください。 おねがいします。

>>518
>
5.6 子供セレクタ（Child selectors）
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/selector.html#child-selectors

#
5.9 一意セレクタ（ID selectors）
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/selector.html#id-selectors

半角スペース
5.5 子孫セレクタ（Descendant selectors）
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/selector.html#descendant-selectors

>518さん　THXです。
子供セレクタが該当するようですが、これは

html #pagebody h1 {
font-size: large;
}

と解釈して差し支えないのでしょうか。

>>520
違う。子供と子孫は違う。

>>520
子供セレクタはあくまでも子供。子供の子供とかは適応されない。
子孫は、子供も含む。

つまり、html直下の#pagebody内のh1すべて、だな。
そもそもこの書き方は回りくどいと思うけど。

#pagebody h1 {
font-size: large;
}
で事足りるだろ。

>521さん、>522さん　SEXれす。
おかげさまで理解することができました。

>>523
補足な
html要素直下ってことは、body要素とかだから、
その書き方した人の思惑は、「このhtmlドキュメントの○○は○○にする」という使い分けをしようとしてる、ってことだな。

質問します。
下記のテーブルは太さの違う２本の枠線ができて、これが好きで自サイトに
多用しています。
lintを知ってbordercolorをスタイルシートに移したんですが、そうすると
同様の効果が得られません。
style属性の二重線では２本が同等幅になってしまって可愛くないのです。
テーブルタグを入れ子にして２本の枠線を使うくらいしか思い浮かびません。
スタイルシートで同様の効果は無理でしょうか？

<table border="8" bordercolor="red" cellpadding="0" cellspacing="8">
<tbody>
<tr><td>
<br><br>
リンク集が中心のサイトです。<br>
<br>
</td></tr></tbody></table>

どうでいいけどよう　勉強しろよな。

<br><br>
リンク集が中心のサイトです。<br>
<br>

>>525
かなり無茶言ってるなぁ。
望んでるのとはずいぶん違うかも知れんが、

table{
border : solid 8px red;
}
td{
border : solid 1px red;
}
じゃダメか？

>>525
> 太さの違う２本の枠線
それはtableとtdそれぞれのボーダーだろ

>>525
lintだったらbrの連続は指摘されなかったっけ？
DTDによるか？
まあともかく、
td{
padding : 2em 0;
}
も追記よろしく

初歩的な事なのかもしれませんが・・・
HTMLでの<PRE>〜</PRE>をCSSで表記するにはどうしたら良いでしょうか？

>>530
それはhtmlの仕事じゃけん！

>>530
普通にpreを使えばいいと思うんだけど。
preってCSSでの代替が推奨されてたっけ？

無理なのですか・・・

<TABLE>
<TR>
<TD>あいうえお</TD>
</TR>
<TR>
<TD>abcefghijklmn</TD>
</TR>
<TR>
<TD>0123456789</TD>
</TR>
<TR>
<TD>アイウエオ</TD>
</TR>
</TABLE>

の文字の配置を均等にしたいんですが・・・・
TDの中を<PRE>で囲うと、怪しい改行ができてしまって綺麗にならないです。
良い方法はないでしょうか？

>>533
preって均等割付のﾀｸﾞじゃなかったと思うが・・・

>>534
書き方が悪かったですね、すいません。

<PRE>を使うと、ノートパッドで書いたみたいに、
「あ」みたいな2バイト文字は絶対に半角二つ分の大きさになるじゃないですか？
それを利用して、文字の幅とかを綺麗にみたてようと考えてたのですが・・・

>>535
それはつまり等幅フォントでよいということなのだろうか？？？

>>535
何を書くのか知らんけど等幅での文や単語は決して読みやすいものではないよ

ぴったり厨まだ？

例えば、全角4文字以上の語句を書いた場合、

あいうえ...
01234567...

みたいに「...」で省略しようと思っています。
このように書いた場合、文字幅が等間隔で無いと、
「...」の始まる位置がズレてしまい、見づらいのではないかと思いまして・・・

>>539
等幅ﾌｫﾝﾄでいいならtdに　font-familt:monospace;　振ってあげればいいかと。

ﾀｸﾞだと<tt></tt>とかあるらしいけど使ったことないし使いたくも内野

>>540
おお、ばっちりです。
長々とありがとうございました。

>>539
等幅のほうが見ずらいと思うけどまあそれがいいなら・・・

>>541
�d

>>542
まぁ色々だねー

>526->529
……！！
あ、ありがとうございます！
そしてお手数かけてすみませんでしたm(_ _)m
確かに内側はtdのボーダーですね。昔それで上手く外囲い出来ずに
苦心していたのを言われて思い出しました。
つか、tdにもボーダー指定できるとは思いつかなかった……（TT
勉強になりました。ありがとうございます。

連続<br>はテーブルテスト用でサイトでは修正してます。指摘、
ありがとうございました。

>>544
むしろ見栄えのために使ってるならテーブルやめてCSSでうわなにするんだやめｒ

やりたいという気持ちは、まあその……

そこまでのスキルと知識と経験値がありません……_|￣|○

>>546
525でやろうとしてることはCSSだったら簡単にうわなにをするんだやめｒ

……(ﾟДﾟ≡ﾟДﾟ;)
………
ttp://gifu.cool.ne.jp/galldy/profile.html
例えばこんな感じでテーブル使って遊んでたんですが、
（修正前の利用につきタグの汚さは勘弁して下さい…）
どこまでならテーブルタグなくせるんでしょうか？

tableって「表」だよ？
ページ内には一つも表がないようだが・・・

ﾄﾞｼﾞｿです。
過去にスライスで作ってたのを無理やりCSSで配置しようとしたのが間違いでした。
3つに別れてたのは、パッと見1つの画像だけど実は真ん中だけアニメーションGIFだったです。
imgタグにしても改行して記述するのと横一続きにするので表示が変わるのは知りませんでした。

css冒頭で*{margin:0;padding:0;}を定義すれば
マージンはなくなるはずなんだけど

>>548
ttp://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcs09.htm
ここ見てborder-styleを試してみ。

>552
出来ました！
テーブルタグ全く無しでほぼ同じデザインに出来ました。
驚き……
web制作って奥が深いです……
色々教えてくれた方々、本当にありがとうございました。

ウム　いかったな。これからもっとがんがれ。

>>550
改行は半角スペースとして扱われる。

Firefox では q 要素の前後に「"」が挿入されるのですが、
これを消したい場合はどのように記述すれば正確なのでしょうか。

q:before { content:""; }
q:after { content:""; }

これで消えることは消えるのですが、content:""; という書き方は正しいのでしょうか？

>>556
http://jigsaw.w3.org/css-validator/validator-uri.html
ではエラーは出なかったけど、
引用なのになぜ引用符を消すのかが疑問。
p使う意味がないような…。

いいかみんな、野暮な突っ込みはするなよ

>>556
q { quotes: none; }
で非表示になるはずだが、
Mozilla/Opera7 は未対応。

>>557
q要素で引用している以上は引用符が見えようと見えまいと引用以外の
何者でもない。例えば、blockquoteは「引用符を付けないように」との仕様である。

野暮なツッコミしませんよ。

古いUA向けに自分で引用符を書いてるからじゃないのか

>>561
それを遣らかしてしまうと、テキストベースブラウザで二重に引用される罠。
例えば鉤括弧を自分で記述したのを Lynx で観ると "「引用文」" になる。

>>560
引用としてマーク付けがなされていても、閲覧者が引用であると
認知できなければ正当な引用行為とは言えないと思うのだが如何か。
blockquote は慣習的にインデントされることで認知できるはず。

>>562
HTMLのそもそもの目的は学術論文を公開することだったわけだ。
論文には厳密な引用と出典の明記が必要。そのためにq、blockquote、citeなどの要素、
または属性を作った。おわかりか。

>>563
？
>厳密な引用と出典の明記が必要。

UAでpに引用符を付けてくれるのも、blockquoteがインデントされるのも
視覚的に分かりやすくなるのでわざわざ消す必要は無い。

と読めて>>562に対する反論になって無いけど？

　　　　　　※　議論はよそで　※

厳密な引用＝引用符を付けると思い込んでるバカはstrictスレで議論しろ

両方バカだと思う

↓次の質問どぞ

>>567
>>558

　　 ∩＿＿＿∩　　　　　　
　　 | ノ　　　　　 ヽ/⌒)　厳密な引用引用符をつけるな
　 /⌒) (ﾟ)　　　(ﾟ)　|　.| 　
　/　/　 　( _●_)　 ミ/　　　∩―−、
.（　　ヽ　　|∪|　　／ 　　　／　(ﾟ)　､_ ｀ヽ
　＼　　　 ヽノ　/ 　　　 　/　　(　●　 (ﾟ) |つ
　 /　　　　　　/　　 　　　|　／(入__ノ 　 ミ　　　見る側に負担を押し付けるな豆字固定と大差ない
　|　　　　　　 / 　　 　　　､　(＿／　　　 ノ　　
　|　　／＼　＼ 　　 　　　＼＿＿＿　ノﾞ ─ｰ
　|　/　　　 )　 )　　　　　　　＼ 　　　　　　＿　　　　　
　∪　　　 （　 ＼　　　　　　　　＼　　　　　＼
　　　　　　 ＼＿)

q や blockquote をHTMLパーサが解析できていても、
レンダリングした結果が「引用である」と認知できなければ、
「本文と引用部分が区別」できないので著作権法に反しませんか？
と訊いているわけだが。まぁいいや。↓次の質問どうぞ。

>>571
スレを読まずにカキコ。反しませんよ。

厨質問すみません。
DreamweaverMXを使用しているんですが表(テーブル)に
スタイルシートが適用されないのですが。
うまく適用されるようにする対処法はないのでしょうか。

>>573
それだけでは誰も答えられない。
>>1を読んで出直しておいで。

>>573
Dreamweaver上ではテーブルに限らずCSSは反映されないんじゃなかったっけか。
ブラウザでプレビュー（F12）かけてみ。

>>573
なぜ専用スレで訊かないの？
http://pc5.2ch.net/test/read.cgi/hp/1083673100/l50

>>574-576
レスありがとうございます。
　ブラウザのプレビューでみてもテーブルに反映されないんですよ。
　専用スレで出直してきます。

>557
> p使う意味がないような…。

>564
> UAでpに引用符を付けてくれるのも、blockquoteがインデントされるのも

p要素は引用に使うのか…

Mozilla 1.8aとFirefox 0.8で置換要素にafterとかbefore疑似要素を適用させて生成内容を表示できないんだけど、これは最近のバグ？CSSの仕様じゃないよね？
以前は普通にできていたはずだったんだけど。
普通のブロック要素やインライン要素には利くし、Operaでは問題がないんだが……

自己レス
Mozilla 1.4を入れてチェックしてみたら、期待通りの表示。

質問です・・・。

<h1 class="content">hoge</h1>

.content h1{
　background-color:red;
}

こう書くと、タイトルの　hoge　の部分だけではなく、横いっぱいに赤背景の帯が出来ますが、
これを　hoge　の文字の背景だけを変えるようにするにはどうすればいいのでしょうか？
<h1><span class="content">hoge</span></h1>
としてみても同じことでした。。。
文字列の長さが異なっても、文字の部分だけの背景色を変えたいのです。
宜しくお願します。

>>581
<h1><span class="content">hoge</span></h1>

.content span{
　background-color:red;
}

<span style="background-color:red;">hoge</span>

にしたら希望通りになりました。
どこか書き方ﾐｽってると思いました。
見直します。
失礼しました。

>>582
＿|￣|○

h1に対してｸﾗｽ指定したままにしてました…情け無い…全然気付きませんでした…ありがとうｺﾞｻﾞｲﾏｼﾀ。

（CSSのスレで聞くのは場違いかもしれませんが、）
RSSに関するスレってありますか？
知っている人にいろいろ聞きたいことがあるんだけど、
どこに書き込んでいいかがわからないです。

＞ （CSSのスレで聞くのは場違いかもしれませんが、）

よく分かってるじゃん。(･∀･)ｶｴﾚ!

>>585
おまい天才だな。俺はCSSとRSSの区別が付かないから
なんで、このスレで聞いたらダメなのかわからんかった。
単独ｽﾚがあるかどうか調べんのがﾏﾝﾄﾞｸｻｲから
とりあえず↓ここでも逝っとけ。

http://pc5.2ch.net/test/read.cgi/hp/1079800125/l50

>585
ttp://ruitomo.com/~gulab/s.cgi?k=RSS&o=r

>>585
XML使いのスレ 2.0
http://pc5.2ch.net/test/read.cgi/hp/1057198990/

ままで<font color="***" size="***">でフォントの色や
サイズを変更していたのですが、スタイルシートを
使う場合はどのようにするのが定石でしょうか？

持ってるタグ辞典の本だと
<span style="color: ***;">テキスト</span>
となってますがこれでOKでしょうか？アドバイスお願いします。

>>590
間違ってはいないと思う。
ただ、部分的に色を変える必要があるってことは
そこに何らかの特別な意味があるってことだよな？
その意味をHTMLとして記述するべきだ、っていうのがW3Cの見解っぽい。
例えばその部分が強調ならemとかだし、部分的な引用ならqだし。
で、そのタグやクラスに対してCSSで修飾。

まぁStrictな考え方は勉強中だから、微妙にずれてるかもしれないけど。

>591
テキスト中の強調等じゃなくて意味の無い変更。
やりたいのはホムペタイトルの AAA BBB のAAAだけ
色を変えたいのです。

スタイルシートを使う場合<font>とかで色変え、
<b>とかで太字に、とかってやるべきじゃないでしょうか？

>>592
それも広い意味での強調。
強調の意味をもっと広く解釈すれ。

<h1>AAA <em id="hogehoge">BBB</em></h1>

em#hogehoge { color: #ffffff ;}

うはｗｗｗホムペｗｗｗｗｗｗ

>>593
なぜAAA側を強調しないのですか？（ﾌﾟｹﾞﾗ

>>592
キミの遣りたいことはナンセンス。そういう欲求に耐えてこそ理性ある人間。
恣意的な欲求に耐えられないけれど，HTML文書は書きたいという人は，
精神衛生上よろしくないので，「ほーむぺーじ」を作るのを諦めてください。

とか，言ってみるテスト。

>>593　なぜIDにするのかと小10分・・・・

うーん、よーけ分からん。

具体的にホムペ上どこでもいいから
フォントサイズとかフォントカラーとかかえる
にはどのようにやればいいのでしょうか？

<font color="***" size="***">のかわりのやり方で

ここはグローバルユーザースタイルシートの質問もOKですか？

>>598　ググれぐるぐる　ググれぐる　っと・・

>>598
CSS は物理マークアップの肩代わりをするための仕様じゃないの。
HTML の役割は情報の「かたち」を環境に依存せずに示すことで、
情報の「かたち」の表現方法を指定する手段がスタイルシートなの。

論理的に示す事ができない情報は CSS で表現しようがないし、するべきじゃない。
恣意的に視覚体裁を施したいのであれば素直にfont要素なりでマーク付けすればよい。

マークアップの本質を掴めていないのに、CSS に手を出すのは危険。

>>598
単純に言うと
css適用無しで強調する必要あるなら論理タグで強調（＋装飾）
強調の必要ない場所はspan＋cssで装飾

つまりHTMLってのはタグに意味があって
その意味の結果見た目が変ってるにすぎない。

そのHTMLに飾りをつけたおまけみたいなやつがCSS？
その辺、全然わかんないからFAQ系のサイト巡回してきます

>>603
正解。

>>603
その通り。
一応補足しておくと、
＞タグに意味が
タグじゃなくて、要素ね。

>604-605
もやもやがやっととれて、
なんとなく光が射し始めた気がします。
ありがとうございました。

がんがれ

>>603
ホムペはよくないぞホムペは

フォントサイズのptって出来れば使わないほうが
いいですよね？ブラウザの文字のサイズでも変更できないし

その通り。

<html>
</head>
<style>
.parent{background:#88f;margin:2px;padding:2px;display:block;height:20px;clear:both;}
.child{background:#f88;margin:2px;padding:0;width:100px;float:left;}
</style>
<div class="parent">
<span class="child">Foo1</a></span><span class="child">Foo2</a></span><span class="child">Foo3</a></span>
<span class="child">Bar1</a></span><span class="child">Bar2</a></span><span class="child">Bar3</a></span>
<span class="child">Hoge1</a></span><span class="child">Hoge2</a></span><span class="child">Hoge3</a></span>
</div>
</body>
</html>

>611
浮動要素の折り返しに伴う親要素領域の拡張について。
当方の環境はOpera7.50(Build3768)とIE6(Version6.0.2800.1106)。

子要素が浮動によって配置されて、横幅が画面に対して足りなくなった場合に折り返され
親要素の領域が縦方向に拡張されるのが正常かどうかをジャッジしてもらいたい。
IEでは青い背景の親要素が縦方向に拡張され、Operaでは親要素の高さは変わらず。

失礼、OSはWindows2000SP4(5.00.2195)。

>>612
正常じゃないでしょ。

>614
なるほど。それは困ったな。
回答に感謝する。

それIEの代表的CSSレンダリングバグじゃなかったっけ。
バグというか誤実装というか。

height:20px; を解釈しているほうが正しい

>>611　なんじゃ　こりゃ？

ということは、heightを指定しない場合は背景に何も設定されないということか。
floatになった時点で構成要素からは外されるのだな。なるほど。

先に仕様読んどけよｱﾎ

スタイルシートスタイルブックを読んだ方いますか？
この本とCSSでイケてるデザインサイトをソースを見て勉強する、
ではどちらが有効だと思いますか？

いわゆる角丸テーブルをCSSを使って再現したいんですが可能でしょうか？
┌──┐←のような枠を作り、上下と中段の左右のセルは背景画像が指定されています
├┬┬┤上下は何とかなったんですが、中段の左右のセルが真ん中のセルと高さがあわずうまくいきません；
├┴┴┤真ん中の高さが変動するので、pxで高さを指定できないのですが
└──┘素直にテーブル使うしかないのしょうか？

>>622
それ、テーブルレイアウトと変わらないよ。

>>623
別の方法があると言う事でしょうか？
考え抜いた結果がこれだったもので(^^;
できれば、どんな方法があるか教えていただけませんか？

>624
ぬるぽかよ
ｶﾞｯしていい？

>>624
考えて抜いてできるようなモノでは有りません。
でも方法は有ります。

>>626
↑の枠の装飾だけではなく、
例えば左右２つの段組など、片方に合わせて左右高さが同じに出来れば
良いと思う場面が前々から何度もあったので
もし、方法があるなら是非教えてくださいm( )m

>>622
中段の左右には背景しかないのか？
だったらそれぞれをセルにする必要ないと思うが。
中段をひとつのブロックにして、左右に色の付いた横に長い背景を置くとか。

>622
div厨の悪寒。ソース晒してみて。

>>622
-moz-border-radius とか言ってみる

CSSがまったくわからないのですが、TOPページの右の余白部分に広告を載せる枠みたいなのを作りたいです。
参考ですがこういう感じです。
ttp://www.cybergarden.net/
ここの右の「web mini コラム・・・」という感じに作りたいです。

私のHPはここです。
ttp://orestyle.client.jp/
ここのTOPは海外でフリーのテンプレートを借りてきた物です。
後のページは表で作ってます・・・
レイアウトなど汚いのですが、ほかに指摘する部分があれば何でも言ってください。
よろしくお願いします。

div.aaa{
width:800px;
text-align:center;
background-color:#000000;
}

<div class="aaa">
　あああ
</div>


こうすると、#000000の箱の中で「あああ」という文字は
中央揃えになりますが、#000000の箱は中央揃えにはなりません。
どうすれば箱ごと中央揃えになるでしょうか？

>>631
「CSS がまったくわからない」人にどうやって教えればいいのですか。
何か目的を持って創作物を作成したいのであれば、
そのための基礎ぐらいは勉強するべきではないのですか。
あなたはここに来る以前の人です。>>4 等を読んで出直してください。

>>633
わかりました。
ありがとうございます。

>>632
FAQ を読め。

ＣＳＳは何でXHTMLが向いてるんですか。
ＨＴＭＬ+ＣＳＳ
よりＸＨＴＭＬ+ＣＳＳが優れている点はなんですか。

>>636
CSSとは関係ない質問ですよね？

>>636
XHTMLだからCSSに向いてるわけでも優れているわけでもなかろう。
HTMLでもXHTMLでも同じ。
それともXML+XSLTって話をしたいのか？

>>638

＞それともXML+XSLTって話をしたいのか？

そうじゃないんですけど、

ＣＳＳ+ＨＴＭＬでずっとやってたんですが
ＣＳＳ+ＸＨＴＭＬがいいよみたいなこといわれたので
何がどういいのかわけわからず、質問しようと
ＸＭＬスレ行ったらＣＳＳのことなんて話してなかったので
ここで聞かせてもらったんです。

>>639
HTMLとXHTMLを比べてどうか、と仰ってるんですよね？
CSSとは関係ありませんよね？

>>636
>>639
全角読みにくい

>639
ぶっちゃけどっちも一緒。
ただXHTMLの方がなんか新しい感じで良いね。

今はそんな程度の認識で大丈夫。

>>639
> ＣＳＳ+ＸＨＴＭＬがいいよみたいなこといわれたので
　言ったやつに聞けよ

>>642
どうもありがとうございます。

>>639
それは、いずれHTMLはXHTMLに移行するからXHTMLの方がいいよって
話の流れだろう。

正しい記述を心がけていればHTML4.01からXHTML1.1に移行するのは
難しいことではないので、現状ではHTMLでもXHTMLでもどっちでもよろしいかと。

Netscape7には外部CSSが効かないエラーか何かありますか？
十数ページ分のクラス属性などを外部CSSに書き込んで
それを参照しようとするとIE6ではうまく表示できているのですが（だから相対パスは合っているようです）、
Netscape7では表示できません。
Bodyにclass属性をつけてしまっているので、それかもしかしたら題名がおかしいのかと
試しに、一つのページにだけ必要なclass属性などだけを書き出して別の外部CSSファイルを作り
それだけを呼び出すとbodyにつけたclass属性だけどそれは呼び出して表示できます。
だから、数の多いclass属性が呼び出せないとか
呼び出せるファイルサイズに限界があるなど何かありますでしょうか？
bodyにclass属性を付けて、その外部CSS一つを弄れば
複数のページデザインが一度に変更できて便利だと思ったんですが…。

http://up.nm78.com/data/up012578.jpg
↑上の画像のサイトの横枠について質問があります。
このサイトには、両端に枠線みたいな線がありますが
サイトの一番上と下には、その枠線がありません。
普通、サイト制作していて枠を使うとどうしても
上下左右に枠線が表示されてしまいます。画像のサイトのように
両端だけ枠線を表示するにはどうしたらいいでしょうか？

┌──┐　　　 │　　　│ つまりこうしたいわけです。
│　　　│→　　│　　　│
│　　　│　 　　│　　　│
└──┘　 　　│　　　│　　

>>647
border-right と　border-left だけ使えばいいのでは？

ないしは
border-width:0 1px;
という風に、上下の太さ0にするとか…。

＞647
border-right:;
border-left:;
を使用すればいいのではないですか？
色々なスレで同じ事、訊いていますね…。

>>648-649
どうもありがとうございます。
じゃあこれはただ　おおきな表のなかに入っているということなんですね
すいませんでした　ずっと気になっていたもので・・・。
別のスレだとちょっと別のことでもめていたみたいなので
こっちにも質問してしまいました。

>>650
大きな表…？
bodyに対して左右のborder指定するだけで出来るけど…ﾃｰﾌﾞﾙ使ってるわけじゃないよー

あと、今更かもしれませんが、<body class="haikei">ってしてはいけませんか？
headの中に、body{margin:0 10%;}と書くのはきちんと表示できますが、
外部CSSにして、.haikei{margin:0 10%;}とすると
IE6では表示できても、Netscape7では表示も出来なくなります。

>>651
どうもです。かなり勘違いしていました。
勉強しなおしてきます

>>652
> あと、今更かもしれませんが、<body class="haikei">ってしてはいけませんか？
桶
> headの中に、body{margin:0 10%;}と書くのはきちんと表示できますが、
> 外部CSSにして、.haikei{margin:0 10%;}とすると
.haikei body{margin:0 10%;}
としてみるとどうだろう？

> IE6では表示できても、Netscape7では表示も出来なくなります。
IEはいい加減だから…。

>654
＞　.haikei body{margin:0 10%;}
＞　としてみるとどうだろう？
body.haikei{margin:0 10%;}
ですよね？（一応.haikei body{margin:0 10%;}でも試しましたが）　
外部だとやっぱり駄目でした。
646にも書いたのですが、何故かNetscape7は外部CSSが上手く行きません。
一応上記はそのページ専用の外部CSSを作って（そうすると何故か外部CSSは呼び出せます）、
その上で試しています。.haikei{margin:0 10%;}の設定の部分だけ効かないのです。
それ以外のDIVにもclass属性をつけている分は何故か外部呼び出しでも適用しています。

マルチに親切なスレﾊｹｰﾝ

>>646
藻前の日本語はおかしい。わかりにくいぞ。

>十数ページ分のクラス属性などを外部CSSに書き込んで
「十数ページ分のクラス属性」って何よ？
スタイルシートの中にclass属性なんて書き込めないし。
「class属性が呼び出せない」って何よ。わけわからん。

>>655
>何故かNetscape7は外部CSSが上手く行きません。
そんな筈はない。何処かで文法を間違えている筈だ。
取り敢えず文法チェックにかけろ。
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
もしくはそのページの URL かソースを晒してくれ。

>何故かNetscape7は外部CSSが上手く行きません。
それって。背景とかだよな？
macIEとネスケは外部CSSを使うと一部のclass属性を弾くぞ。
classでなくstyleタグで実際にぶちこめば動作する...が、それじゃぁ
外部読み込みの意味があるのかといわれそうだが仕方ない...。

補足だが、Opreaも一部BODYなどの大きなもので外部指定すると弾く。
これまたDIVなどでさらに上乗せすると認識するのでしつこく指定汁。
単純にBODYとかTABLEに{ 〜〜:××}で指定しても100％は読み込まないから。

＃IE6.0、ネスケ7.1、Oprea7.23でそれぞれ確認。

Netscape 7.1で試した。
body {background:red;}で有効だったけど？
他に何かbodyへの指定をしてないか？
body {background:red !important;}で試してごらん。

>>622
これじゃ、左右方向にスケールできないのよねー。左右方向にもスケールできるやつはテーブルでやるとしたら、
以下のような感じになるかな。セットで使う CSS は次のレスね。

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="14" height="14"><img src="top-left.gif" width="14" height="14" /></td>
<td height="14" class="frame-top"><img src="top.gif" width="4" height="14" /></td>
<td width="14" height="14"><img src="top-right.gif" width="14" height="14" /></td>
</tr>
<tr>
<td width="14" class="frame-left"><img src="left.gif" width="14" height="4" class="frame-left" /></td>
<td>本文！</td>
<td width="14" class="frame-right"><img src="right.gif" width="14" height="4" class="frame-right" /></td>
</tr>
<tr>
<td width="14" height="14"><img src="bottom-left.gif" width="14" height="14" /></td>
<td height="14" class="frame-bottom"><img src="bottom.gif" width="4" height="14" class="frame-bottom" /></td>
<td width="14" height="14"><img src="bottom-right.gif" width="14" height="14" /></td>
</tr>
</table>

>>660

スケール可能なブロックを飾りつきの枠で飾りたいと言う要求はかなりあると思うんだけど、これってテーブル使わずに
しかもCSSで華麗に実現できないものかな？

.frame-top {
background-repeat: repeat-x;
background-image: url(../images/frame-top.gif);
}
.frame-bottom {
background-image: url(../images/frame-bottom.gif);
background-repeat: repeat-x;
}
.frame-left {
background-image: url(../images/frame-left.gif);
background-repeat: repeat-y;
}
.frame-right {
background-image: url(../images/frame-right.gif);
background-repeat: repeat-y;
}

>>660
imgタグの中のclassしていはごみね。忘れて

>>622

囲みの一番最初の子（このブロックの見出しとか）の背景にフタになる
背景画像を適用する（もしくは、見出しの中身を画像化する）。

ブロック自体に寸胴鍋のような縦に十分に長い背景画像を
position: bottom left; とかで適用する。



というやり方でやっています、漏れは。

>657
ｺﾞﾒﾝ。
背景とかmarginのbody指定を10ページ分、
それぞれ別々の異なるclassで作って、
それを一つの外部CSSに全て書き込んでいます
（結局一つの外部CSSの中にclassが30個ぐらいずらずら書いています）。
そのclassを<body class="haikei1">とか<DIV class="keisen">
というように呼び出そうとしています。

>658
30個くらいclassがある外部CSSは完全に無視され、
そのページだけのclassだけまとめた外部CSSでは、
背景の指定だけ無視されます。

>659
一つのページの為のclassだけ
（つまり赤いページのデザインだけと言う事）の外部cssでは
成功します。
複数ページの為のclassを並べると
（赤いページと青いページのデザインの為の異なるclass）では失敗します。


色々試して判った事で、
bodyに対する複数個のclass属性を外部CSSに書くと
下のほうにあるclassを読み込んでくれないみたいです。
何も変更せず、
外部CSSで下に書いてあったclassをページの上に位置を変更しただけで
表示は指定どおりになりました。
複数ページのclassは書いてはいけないのかもしれませんね。
長くなってｺﾞﾒﾝ。

＞664
やっぱり日本語変だね…。
赤系のデザインのページ、青系のデザインのページというように
デザインの基本を作って、それをbody class="aka"、body class="ao"で
外部CSSからデザインを呼び出そうとして（この辺を何と言っていいんだろう…）
外部CSSには.aka{margin:0 10%;とかスクロールバーとか背景色の設定}
.ao{margin:0 10%;とかスクロールバーとか背景色の設定}と
あとそれぞれのページのdiv用のclassとかも含めて30個近く書いています。
.aka{margin:0 10%;とかスクロールバーとか背景色の設定}
.ao{margin:0 10%;とかスクロールバーとか背景色の設定}
だとclass="ao"が反応しなくて、.aka{}と.ao{}を.ao{}を先に書くと反応すると言う事。

658さんの話だとbodyにclassつけると反応しないのもあるみたいなので
外部CSSは諦めます。
最初は直接書いていて、外部CSSにした方があとあと便利かとそのまま
body{}だったものに、class名を付けて移動させたので
CSSの記述はおかしくは無いと思うんですが…。直接書く分には問題が無かったので。

>>665
aka とか ao とか無意味なクラスを割り当てるな。
大体どうして、赤系だの、青系だの、統一感のないサイト設計をするんだ。CSS の利点の一つは、サイト全体を通して一貫性のあるスタイルを設計できることだろう。何のための外部スタイルシートなんだ。

結局、藻前のスタイル設計が無能なだけだ。
自分の無能さをウェブブラウザの所為にするな糞が。

>>665
そうゆう見た目の系統を分けたいならまず複数の外部CSSで分けとくべきなの

>666
あくまでも例で判りやすいように青と赤としただけです。

>667
見た目は別でも重複する部分も複数あったので一つにしたかったんです。

題名などの部分で統一したデザインを外部CSSに複数のclassで書いている
別ファイルは上手くいっているので
bodyに関するclassを複数書くのがまずいのかななどと思っています。

>668=646
お前の説明では訳がわからん
サイト晒せ

>>666
なんでakaとかaoのクラスはダメなの？

>>668
もう一度自分の書いたCSSをよ〜く見直てみるとよいかも。
特にakaの箇所を。「:」や「;」が抜けていたり、「;」が「:」になっているかもしれません。

akaとaoの記述順序を入れ替えると反応するようなので、
単純に記述ミスではないかと思います。

そして次回レスする際には、文章を推敲して
日本語であるかどうかを他人に判断を仰いでからにしてください。

受験して落ちた大学ですが、
この仕掛けってどっかのHPにあるでしょうか？
TABLEばっかでうざいので、CSSで使っているサイトがほしい。
jsはあまり使いたくないっす。

ttp://www.waseda.jp/top/index-j.html

なんでakaとかaoのクラス名はダメなの？

>>672
マルチ死ね。

訳わからん

>>668
>bodyに関するclassを複数書くのがまずいのかななどと思っています。
id だろうな

上手く表現できなくてすみません。
サイトはまだ無くて、ローカルで弄っている段階なので…。
あと、もう外部CSSを諦めてしまってすでにファイルを削除してしまいました。
質問してしまったのですが、自己解決で終らせます。申し訳ございません。

>671
一応記述ミスはありませんでした。

同じ一つの外部CSSのファイル内で、上部に書いたclassは大丈夫で
下部に書いたものは駄目でしたので、
classを数を多く書いたせいかもしれませんが
読み込める範囲があるみたいです。
ある行をさかいに
たとえば60行目から下は全部認識しないと言う感じでした。
（すでにファイルを削除したのでこの行数はいい加減です。
記述の順番を変更して、そのさかいより上の行にすれば認識したので、
記述ミスではなく、読み込める、認識できる範囲と言う感じのようでした）

>676
idで書いた方がいいという意味ですか？

>>673
主義的な問題かな・・・
HTMLの在るべき姿とは単純に論理構造を表してるだけのもの
P要素はマークアップされる内容が単に１段落を意味するだけで、段落の視覚的表現方法は大雑把に言えばどーでもよい
このようにタグは内容の”意味”を表すようにすべきで、fontタグなど、視覚効果を制御するだけの要素の使用は避けるべきってのがw3c的見解なわけだ

そんな感じでHTML文書中に出てくるclass属性値やid属性値もできれば「意味」を表現する名前にしようねって主義があるのだ
身近な例だと・・・BBSでのHTMLで親カキは背景を白、レスを黒にしたい場合（ありえないけどｗ）
<p class="white">親ｶｷ</p>
<p class="black">ﾚｽ</p>
よりかは
<p class="oya">親ｶｷ</p>
<p class="resu">ﾚｽ</p>
の方が意味が通じやすいよねって話。

>>677
id と class の意味を調べる。
CSS（カスケーディング・スタイル・シート）です。
解りやすく言えば、一つの水源から枝分かれし複数の川になり
流れて行く具合
>>678
それは考え過ぎ。
物理的構造を意味するのに用いる id class 名称は作成者の任意で
かまわない、論理的根拠は一切ないから

だから主義的なものだって言ってるぞ

むしろ実利的じゃないのか。

主義次第でそれが実利的かそうでないか分かれうるから，やはり主義的でよろしいかと．

>>677
たかだか60行ていどで駄目なんてことはありえ無い。
経験則だけど。

精細度の問題かなとも思ったけど、>>667の文章を
見る限り子孫セレクタなんぞ知らんだろうし。

となると、あからさまに記述ミスを疑いたくなるもんだ。
その程度ならふるいにかけてデバッグしても、30分もかからんだろうに。

こらえ性がないなあ、最近の子は。

最近の年寄りは「最近の若者は」と常套文句のように言って、正直きもい。

いや？
最近の若者は〜うんぬんてのは
パピルスにもその記述があったほどに
どの時代の年寄りも言うのだよ

ごめんなさい。
ごめんなさい。
漏れも年齢的にはまだまだ「最近の子」です。
ごめんなさい。
ごめんなさい。

こらえ性がないと言うか、もったいないよ。
外部CSSって非常に便利なものなのよ。
もう少しで手に入れることができるのに、
少しのつまずきで捨てて諦めてしまうとは・・・。
646にはがんばって欲しかった。

とキモイおじさんは思いました。

おじさん　素敵！

>>680
ここはCSSの質問スレな訳で、物理的なこと以外は必要なし
主義的はいいんだけど他でやって下さいな

突っ込まれたからってｷﾚるなよ
これだから最近の若者は・・・

>668
> 見た目は別でも重複する部分も複数あったので一つにしたかったんです。

んじゃ、共有CSSファイル、赤用のやつ、青用のやつ、の三つ用意して、
それぞれふたつずつ指定してやりゃいいんじゃないの？

┌────┬──┐
│タイトル│　 　 │
│　　　　 │　　 │
│　　　　 │　　 │
└────┴──┘
ずれてたらすいません
こんな感じのをCSSで作るにはどうしたらいいのでしょうか?テーブルだとこうです
<table width="100%"><tr><td width="80%">
コンテンツ
</td><td width="20%">
リンク
</td></tr></table>

>>692
>>6

>>693
ほんとこんな時間にすいませんでした・・・ちょっくら吊ってきます

複数ページのスクロールバー色設定を外部CSSでまとめて行いたいのですが、
各ページに
<body id="p01main">や<body id="p02sitemap">と記述して、外部CSSで
#p01main{
scrollbar-arrow-color...
(略)
}
#p02sitemap{
scrollbar-arrow-color...
(略)
}

と書いていくのは正しいやり方であると言えますか？
一応間違いではないと思うのですが、body要素にIDを指定しているのをあまり
見かけないので、妙なことをやらかしている気がしています。
朝っぱらからすみません。お暇な人回答よろしくお願いします。

お暇な方いらしたら、でした。
失礼に取れる書き方で申し訳ない。

問題なし。
body要素にclass/id属性はあるけど、html要素にはないことに留意すべし

が、スクロールバーの色指定自体が非標準であり、うざがられることが多いので注意汁

>>697
回答ありがとうございました。bodyにはclassもidも使えたんですね。
html要素には無い、の意味はなんとなく分かります（ルート要素だからと解釈しました）

色指定は邪魔にならない程度に留めます。ご指摘ありがとうございました。

>>695=698
標準準拠モードだと、html要素が M$ がいう所のキャンバスになるから、
スクロールバーの色設定はhtml要素に割り当てないとダメなんだけど。
そこら辺のことをわかっているのかな。
「漏れは一生、後方互換モードで充分だ」というのなら問題無いけど。

html { overflow: hidden } にして body { overflow: auto }
とかすれば出来ないこともないけど、他のブラウザやインタフェイスの障害になりそう。

sageるの忘れた…

スクロールバーはbodyですよ

>>701
キャンバスを表示する要素の違い - Internet Explorer 6 における CSS の拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic4

>>701
ここでも見たまへ。
http://cssbug.at.infoseek.co.jp/detail/opera/b049.html
http://www.cybergarden.net/stylesheet/css_page_scrollbar.html
http://chaichan.hp.infoseek.co.jp/qa4000/qa4262.htm

>>699,701
スクロールバーはCSSではインターフェイスです。
body とかいうよりブラウザのOSに対する依存した
インターフェイスが正しいでしょうね
また、現在のところCSSのインターフェイス群はまたっく
統一性がありません

>>699
えーと、多分分かっていません。
今携帯からなので家についてから調べてみます。すみません。

>>704
「ブラウザのOS」「CSSのインターフェイス群」って何だよ。
Windows版 M$IE（もしくはその互換機能を搭載したブラウザ）での
話をしている訳で，他の環境なんて無視されるのだから関係がない。

Opera などで不具合が出るとしたら，MSIE と完全に互換性を保たない
Opera Software ASA™ などのベンダが悪いのであって，制作者の所為じゃない。

>>699
おおむね理解できたと思います。
コンテンツ表示領域自体が、IE6.0の標準準拠モードではhtml要素に
IE6.0の互換モードと6.0以前のバージョンではbody要素になるということですね。
スクロールバーの指定の適用もそれに従うことになると。
今まで全く知りませんでした。ご指摘ありがとうございました。

現在作成しているサイトは無料鯖で公開するそうなので、自動挿入広告対策で
DOCTYPE宣言をHTML4.01Transitionalにしており、今回はbody要素適用で問題ないようです。
ただ、最上位要素のhtml自体について深く考えたことがなかったので、非常に勉強になりました。
どうもありがとうございました。

URLを貼り付けてくださった方もありがとうございました。助かりました。

>>707
4.01transitional であることと、
標準モード、糞モードになんの関係も無いので注意。

DOCTYPE宣言でモードが変わるでしょうが
http://www.redout.net/data/dtdmode.html

>>707 はきっと、システム識別子無しで宣言したんだよ。
それぐらい察してあげようよ。詰らない揚げ足取りだよ。

おっしゃる通りDTDのURL部分を書いていません。表示モードの切り替えについては
詳解HTML&XHTML&CSS辞典で確認を取りました。
あまり時間がないので楽な方に流れている自覚はあります。
今回の件が終わったら真面目に勉強しなおします。
色々と教えてくださってありがとうございました。

名前書き忘れました、711=695です。すみません。

>>711
あんた、中途半端な書き方するから、
みんなわかってないんじゃないか、って心配しちゃうんだよ。

標準モードと互換モードでどっちが面倒ってったら、
互換モードの方にきまってんじゃん。

スレ違い？
他になかったので、質問させてください。

xhtml1.0 transitional から strict に書き換えています。
一応 valid になったのですが、実際にブラウザで表示してみると
img タグだけ変なんです。
全ての画像の下にスペースが入ってしまうんです。
ブラウザによってスペースの高さは違います。
transitional のときは何ともなかったのに・・・

お分かりになりますか？

ちなみに、img タグには css で

img {
margin: 0px;
padding: 0px;
border-style: none;
}

こんな感じに指定しています。

>>714
imgのmarginの問題じゃ？

って、margin:0なのかよ(；´Д｀)
他の要素の影響受けてるんかもな。

>>715
* {
margin:0;
padding:0;
}

>>714
HTMLのソースも晒してくれ。

うむ、とりあえずソースだソース
>>718みたいな軽率なことはするなよ

vertical-align の問題じゃなかろーかと思いますた。
まぁまずはソースだわ。

imgタグ直後に改行入れてたりしないか？
それかimg要素を含むブロック要素のline-heightが影響してるかも。

皆さま、ありがとうございます。

>>722
ビンゴです！
当り前のように img 直後に br 入れていますが、ダメなのでしょうか？
また、body 自体に line-height を入れています。

body {
margin: 0;
padding: 0;
font-family: "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
font-size: 0.8em;
line-height: 1.8;
color: #000000;
background-color: #ffffff;
}

img {
margin: 0;
padding: 0;
border-style: none;
}

.img {
margin: 0;
padding: 0;
}

<img src="xxxxx.gif" width="xx" height="xx" alt="xxx" class="img" /><br />

誠に恐縮です。

・・・

>>723
改行って<br />のことじゃなくて…まあいいや。
そりゃ<br />入れたらその分スペースできるだろ。

>>723
imgのあとにbrが入る必要性がわからない。
前後はどうなってんの？

テーブルレイアウトの時に，
<td>
<img>
</td>
とやると <img> が 1em 以下の height の時に隙間ができるけど，
<td>
<img><br>
</td>
だと隙間ができない，なんていう小賢しい「テク」があった気がする．
つまり>>725とは逆に br 入れる方がスペースができないとゆー．

で，今回のこれは http://www.mozilla.gr.jp/standards/webtips0018.html の話じゃないのかなぁと思うんだが．

それ、なんとなくわかる。
どちらにせよ、strict に書き換えるって言っているし、
<img><br>
ってなるケースはすごい稀なはず。

cssよりhtmlがんがれ。

皆さまのお陰でやっと分かりました。
今までは img タグを p などで囲んでいませんでした。
どうもありがとうございました！

蛇足だけど、
<a
>
てやって隙間無くす方法もあったような。

そんな方法あったのか！

ソースで改行したいがスペースを入れたくないという場合、
改行自体をコメントに入れる方法がある。

そんな方法あったのか！

そんな方法あったのか！

質問させて頂きます。

背景画像に二枚の画像を利用するため、
以下のように書いたのですが、
img要素が前面に出てしまい、
spanが隠れてしまいます。
解決法はあるのでしょうか
お願いします。

<img src="back.gif" width="100%" height="100%" style="z-index:0;">
<span style="z-index:3;width:100%;height:100%;left:0px;background:url(IMG.png) no-repeat fixed 50% 50%"></span>

>735　img要素だと「背景」画像にはならない。
あと、わざわざ2枚にする理由がなければ
1枚にまとめてしまったほうがよさそうだ。

ホームページが勝手に開いてしまうんですけどどうすればいいんですか？教えてください！

いいじゃんホームページなんだから

>736
早速のレス有り難うございます
説明が不十分だったようで申し訳ありません、
img要素は小さい画像(14x24のgif)を画面いっぱいに拡大して表示して、
span要素はその上に大きな画像をセンター配置するために使用する予定でした。
画像を統合することも考えましたが、
やはり、重くなってしまったり、拡大されたときにジャギーが目立つことを考え、
現在の方法でどうにかできないか、と試行錯誤しているところでした。
何か解決する方法は無いでしょうか、
再度、お願いいたします。

z-indexはposition指定しないと効かないよ

単に２つ背景画像を使いたいなら
<div><div></div></div>とでもしてそれぞれに背景画像指定しちゃいな


<!-- div厨どうこうには言及せん -->

>>735
そういった記述の方法をどこで習ったのか教えてくださいな。

.menu { margin:2.5em 15% 2.8em 15%;
width : 70%;
font-weight : solid;
border-color : #778899;
border-style:solid;
border-width: 0.1em;
float : center}

.left { padding : 0.8em 0.8em;
margin:0px;
width : 50%;
float : left;
text-align: left}

.right { padding : 0.8em 0.8em;
margin : 0px;
width : 50%;
float : right;
text-align: left}

>>742の外部CSSで、【menu】の中で「右と左」を分けてレイアウトしたいのですが、
上手く左右に分かれません(泣)
もしかして、【div】の中に【div】を入れてはいけないのでしょうか？

<div class="menu">
<div class="left">
■あいうえお<br>
■かきくけこ
</div>
<div class="right">
■さしすせそ
■たちつてと
</div>
</div>

他の手段でも結構ですので、アドバイスを宜しくお願いします。
m(__)m

div の入れ子は問題ないが、要素の幅は width + padding だからこの場合幅が足りないな。
50%*2 + 0.8em*4 < 100%

orz

50%*2 + 0.8em*4 > 100%

>>744-745
有難う御座います。やっと謎が解けました！
１週間くらいずっと悩んでたので、本当に助かりました。
m(__)m

>>743
>>6
Q3読んで出直してきな

>>747
はい！頑張ります！！

747の誘導は置いといて、その手の質問なんだが。
float 三段組みなんだけど、これを表組みのように

左固定幅＋柔軟＋右固定幅　にするにはどうすればいいのよ。

いま現在は仕方ないんで右左を170pxにして、
横800px画面で崩れないように真中は％指定しているけど、
幅広画面じゃマヌケでなんとかしたいんだよね。

margin で左右をautoにしたら自動調整してくれるかなと思ったんだけど
だめだったよ。

>740
レスありがとうございます。
divでcssを使いbackground指定も試してみましたが、
これでは画像の拡大表示が指定できないのでこれも使用しないものとしました。
また、imgタグをdivでかこうことも試しましたが、
これもまたimg要素が前に出てしまいうまくいきませんでした。
もし、divで拡大表示する方法等があるようでしたら誘導等お願いいたします。

>741
とほほのスタイルシートを見て考えました。
複雑なスタイルシートの使い方は初めてなので、
無駄が多かったり見にくかったりしたらすみません、

引き続きどなたかアドバイス等お願いいたします。

自己レスです。
740氏の
>z-indexはposition指定しないと効かないよ
の行を見落としていました。
imgタグにposition指定をしたところ、
きちんとz-indexが適応され、思い通りに表示されました。
ありがとうございました。

スレ浪費申し訳ありませんでした。

とほほを見て考えたのはいいんだが、全部にすべてが使えるわけではないんだ。
他のリファレンスサイトを見てもう一度勉強しょうぜ。
簡単に解決は出来るけど、根本的に考え方が間違っているから敢えて書かないよ。
　　がんがれ！！

　あうあう　　かぶ・・

ついでといっちゃ何だが・・　ここでチェックしてみ。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

>752=753
ページをチェックしてみたところ、
ブラウザに依存するようなものも見あたらず、
表示に関しては特に問題無いようでしたので、
あえて勉強することはしないと思います、
あくまで個人的なページですので、
> 簡単に解決は出来るけど、根本的に考え方が間違っているから敢えて書かないよ。
根本的な考え方の間違いということに関して、
すこし教えていただけるとうれしいです。

勉強する気はねぇから教えてくれってか。

質問。

WinのOpera7.23ってfloat対応してますよね？

>>756
はい。

そりゃ対応してますよね。どうもありがとう。

>>749
左と右をabsoluteで固定しちゃって、
真ん中の左右のマージンを左と右のサイズの分だけとるとかなんとか・・・

>>749
<div>
    <div>
    <p>左</p>
    </div>
    <div>
    <p>中</p>
    </div>
</div>
<div>
<p>右</p>
</div>

としてみるのは同だろう。
div厨っぽいかな？

っぽいってかモロだよね！

何も一段階余分に入れ子にする必要はない。
>>759の方法でやれるよ。

>>761
だって、縦方向に固定されちゃうじゃん、位置が。
この三段組より上にある要素の高さが想定できない場合はどうすればいいの？

ちょっと文章の意味がわからんのだが。
何かの要素があって、その下から段組を始めたいってことか？
で、その上に配置したい要素の高さが想定できないってこと？

どうすればいいかはお前次第。どうしたいかによる。

>>735
まずは基礎から。
これしか返す言葉が無い

>>754
というか、なんでとほほが>>4にあるのか分からない。
CSSに関して言えば、とほほを参考にしてはいけないというのは、昔から分かっている
ことだろう。
なんでテンプレに入っているのかわからない。

>>765
過去スレで削除キボンヌの声が挙がったけど未だに残ってる。
ところで「画面のスクロールに対して固定」ってどういう意味(w

スタイルシートの質問です。
<dl>
　<dt>〜</dt>
　<dd>〜</dd>
　　　:
　<dt>〜</dt>
　<dd>〜</dd>
</dl>
という定義リストで、
<table>
　<tr>
　　<th>〜</th>
　　<td>〜</td>
　</tr>
　　:
　<tr>
　　<th>〜</th>
　　<td>〜</td>
　</tr>
</table>
と同等の出力をしたいのですが、現在の主要ブラウザでそれを実現する場合は
どのようなスタイルシートにすればよいでしょうか？

ちなみに、自分の考案した方法
dt{
　　float : left;
　　clear : left;
　　width : X em;
}
では、ddが2行になった際に

"キーワード"　"そのキーワー
ドの定義内容"
"キーワード"　"そのキーワー
ドの定義内容"

のようにdtの真下にddが来てしまいます。ddが2行になる場合は
"キーワード"　"そのキーワー
　　　　　　　　　ドの定義"
"キーワード"　"そのキーワー
　　　　　　　　　ドの定義"
のように、dtとddがきっちり左右に分かれていて欲しいのです。
「現在の主要ブラウザが実装しているもの」という縛りがなければ、
dtとddのdisplayの値を table-なんとか みたいにすれば
オーケーというのはなんとなく分かるのですが。

よろしくお願いします。