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

CSSに関する質問はこちらへどうぞ。※ 議論はよそで ※
■■■■■ 質問のしかた ■■■■■
●基礎は解説サイト（>>5・かなりわかりやすい）で勉強してください。
●質問の前に【FAQ】（>>6-9）を参照して、既出の再掲を避けて下さい。
●【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
　WinIEの場合は、[Ctrl+F]で検索できます。
●ブラウザによって対応していないプロパティーやバグがありますので、
　【解説など】（>>5）の対応表や「CSSバグリスト」に目を通しておきましょう。
●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。validator（>>4）でチェックできます。

初心者の疑問は大抵ここまでで解決します。

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

過去スレや関聯リンクは>>2-10
【過去ログ】>>2-3
【関連スレ】【仕様書】【CSS検証】>>4
【解説など】>>5
【FAQ】>>6-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/
29 http://pc5.2ch.net/test/read.cgi/hp/1079598884/
30 http://pc5.2ch.net/test/read.cgi/hp/1082785026/

【過去ログ】
31 http://pc5.2ch.net/test/read.cgi/hp/1085400294/
32 http://pc5.2ch.net/test/read.cgi/hp/1087263288/
33 http://pc5.2ch.net/test/read.cgi/hp/1089975931/
34 http://pc5.2ch.net/test/read.cgi/hp/1092319307/
35 http://pc5.2ch.net/test/read.cgi/hp/1093998766/
36 http://pc5.2ch.net/test/read.cgi/hp/1096389019/
36 http://pc5.2ch.net/test/read.cgi/hp/1098720757/
38 http://pc5.2ch.net/test/read.cgi/hp/1101827958/
【前スレッド】
39 http://pc5.2ch.net/test/read.cgi/hp/1104596224/

【関連スレッド】
CSS/DHTMLバグ辞典スレッド 第４版
　http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え〜
　http://pc5.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
　http://pc5.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc5.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるサイトをネタに雑談するスレ 24
　http://pc5.2ch.net/test/read.cgi/hp/1097724119/l50
【仕様書】
CSS1の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/css1/toc.htm
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html（消滅につき↓で）
　http://web.archive.org/web/20011005012937/http://www.fan.gr.jp/~kaz/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（消滅につき↓で）
　http://web.archive.org/web/20011202074642/http://www.fan.gr.jp/~kaz/rec-css2/cover.html
CSS2の仕様書の邦訳アーカイブ（個人訳）
http://web.archive.org/web/20011021231417/http://www.fan.gr.jp/~kaz/rec-css2.zip
【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
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート　http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/index.html
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには？　text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に5.）をご覧ください。
1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
　http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと　(floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
リストを用いたレイアウト
　http://css.maxdesign.com.au/index.htm

Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: まずclear忘れがないかをを確認してください。
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: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A11: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（A3）を見なさい。
「いままでの 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

スレたて乙
前スレで誰かが指摘してたけど
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html は
ttp://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html に移ったんだな。
CSS1の分も合わせて次スレ立てる際には修正よろしく。

そうだったのか、すまん。

フロートでデザインしているのですが
ウインドを縮めれば、右側が左側の下に潜ってしまいます！
なんででしょうか？

おつかれさまです >>1

以前どこかのサイトでbackground-repeatに関しての文章を見たのですが、どんなサイトだったか忘れてしまいました。

内容はリピートさせる画像のサイズに関するもので、最小限のサイズに抑えてリピートの数を増やすよりも
ある程度の画像サイズでリピートの数を減らした方がUAへの処理負荷が低いとかなんとか、そんな感じのことでした。

上記のようなコンテンツに思い当たりのある方おられませんでしょうか？

>>14
そんなことはない

>>12
右側がフロートしてるから。

NN6でposition:absolute;で指定したブロック要素の下にくる要素は
上部分のマージンが無視されてしまうじゃないですか。
これを何とか回避したいんですが、いい方法はありますか？

リンクの前に、画像をおきたいので、
a.external {
background-image: url(/image/external.gif);
background-repeat:no-repeat;
background-position:1px 0px;
padding-left:12px;
}
/*
/image/external.gifは10*10px
*/
というようなcssを書きました。
リンクが1行で終わる場合はどのブラウザで見ても一緒なのですが、
このclassを指定したリンクが複数行にわたる場合、
MacIE5.2の場合（それ以前のバージョンは確認環境がないのでしていないです）、
行の頭毎に画像がはいるが、2行目以降はpaddingが効いていないため（当たり前）、
文字と画像がかぶってしまいます。
<img>タグを書かずに、aのclassを設定すだけでいけて、なおかつこれを回避する
にはどうすればいいでしょうか？

>>18
htmlも晒す

NN6ってform要素がinline化できない？
form要素とinput要素両方ともdisplay:inlineの指定してるのに
改行されちゃうから対処にこまってまつ。対策ないですか？

absolute　はウィンドウの左上から位置を測るのでしょうか？
それとも
親ボックスの左上から測るのでしょうか？

>>21
そんなことソース書いて試せばわかるだろう？

親ボックスの左上からでした；
でもポジションは難しいですね・・・・・・・

>>21
親ボックスが、position: relative; ならばボックスに沿う

#upper {
height: 100px;
background-color: blue;
}
#container {
position: relative;
height: 300px;
background-color: red;
}
#main {
position: absolute;
top: 0;
left: 100px;
width: 150px;
height: 150px;
background-color: yellow;
}

<div id="upper">上部のボックス</div>
<div id="container">親ボックス
<div id="main">absolute</div>
</div>

>>19
失礼しました。
htmlは普通に
<a href="http://example.com/" class="external">hoge</a>
です。で、この<a></a>で囲まれたhogeが長くなり、複数行にわたる場合、
MacIE5.2で改行されるごとに、行の頭に背景画像が現れてしまうという感じです。
repeatされてしまっている風でもなく、行毎にbackground-imageが呼ばれる
けど、padding-leftは最初の1行目だけきいているって感じです。

>14,15
自分の経験では４×４ピクセルの背景画像と
32×32ピクセルの背景画像を使った場合とで
敷き詰める数の多い４×４の方が
スクロールが重たく感じるブラウザがあったかと

透過gifなんかを使った場合特にそう思ったが
気のせいなのかな

border="0" align=""
を書くとHTML lintでエラーと判定されるようになったのですが、
CSSで代替するにはどうしたらよいでしょうか。

ttp://w3j.org/articles/cssready/cssready02.html
ここお勧めですよ・・・・皆さん
>>24
relative使わなくても、絶対配置でautoなどをうまく使った方が良くない？

ＣＳＳでフレームと同じ効果をだしたいのですが、
どうすればよいのでしょうか？
今は、flortを使って見た目だけは再現してます。
レイアウトは普通の左にメニュー、右にコンテンツです。
例として、２ＣＨのような感じですね。
ＣＳＳをレクチャーするサイトのソースを覗いても、ダメでした。
全てのページにメニューバーを記述してました。
ちなみに<objet>で埋め込むという事も試してますけど、本末転倒な
きがするのです。

CSSでフレームと同じ効果を出すことは絶対無理です。
フレームみたいなものはCSSでできます。
【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

<TD STYLE="filter: Alpha( Opacity=0, FinishOpacity=100, Style=1, StartX=0, FinishX=0, StartY=100, FinishY=0);"
bgcolor="#000000">こんにちわ</TD>

背景にグラデーションをかけたいのですが、上のようにやると「こんにちわ」という文にも
グラがかかってしまいます。
文だけ一色にするにはどうすればいいんでしょうか？

ttp://hp.xrea.jp/m/link/34.html
みたいなことをcssでしたいのですが、無理でしょうか？

どうしたんだ今日は？
がっこ休みだと>>1も読まない奴しか来ないのかよ。

>>33
ヒッキーおつ

ヒッキーで〜〜し

>>26
気のせい

>>15,26
回答有難うございます。

今作っているサイト(グラフィック系)の訪問者の環境などを考慮すると
大したストレスにもならなさそうですので、今回は都合のいいようにやってみます。

>>25
だから、全体行に渡るhtmlの構造を部分的に晒せ

>>14,15,26
サイトは知らないけど、僕は実際に経験しました。

バックグラウンドが2x1の画像とかだと、めっちゃ重い、っていう環境があることはたしかです。

昔の話だから、CSSでも同じことがおきるかどうかは分からないけどね。
普通に考えたら数年でそんなに実装が進化しているとは思えないですな。

>>15
適当なこと言わない

>>26
気のせいではないと思う

.TonpuLink A:link { color : #000000 }
.TonpuLink A:visited { color : #000000 }
.TonpuLink A:active { color : #CC0000 }
.TonpuLink A:hover { color : #246A1D; background-color : #88E87E }
これは<STYLE></STYLE>の間に記述して<SPAN>で使用していますが
sytle="A;link"みたいな方法はありますか？
<A style="link{color:#0000CD">こんな感じではダメでした。

>>39
それは明らかに君の思い違い。

>>41

思い違いができるようなレベルではなく、
ほとんどフリーズのような重さです。
描画の過程が見えます。

>>40
おまいも>>41

>>43
どういうコトですか？

>>44
「リファレンスサイトで勉強しておいで」ってことだよ。

「背景 リピート 処理」→google で見つけた
ttp://www.gac.jp/article/index.php?stats=question&category=7&id=7558&command=msg
ほんとかどうかは知らんが

<TABLE border=1 style="TABLE-LAYOUT:fixed; width=400>
　<TR><TD>観光地</TD><TD>ランク</TD><TD>名物</TD></TR>
　<TR><TD>日光</TD><TD>５</TD><TD>猿・東照宮</TD></TR>
　<TR><TD>秩父</TD><TD>４</TD><TD>芝桜・祭り</TD></TR>
　<TR><TD>箱根</TD><TD>３</TD><TD>温泉・湖</TD></TR>
</TABLE>

TABLEの表示は↑のようにTABLEタグ内に「style="TABLE-LAYOUT:fixed;」を入れることにより早くなりますが、
↓のように、TABLEを二重にした場合でも早く表示させるにはどのようにしたら良いですか？

<TABLE border=1 style="TABLE-LAYOUT:fixed; width=400>
　<TR>
　　<TD>
　　　<TABLE border=1 style="TABLE-LAYOUT:fixed; width=200>
　　　　<TR><TD>観光地</TD><TD>ランク</TD><TD>名物</TD></TR>
　　　　<TR><TD>日光</TD><TD>５</TD><TD>猿・東照宮</TD></TR>
　　　　<TR><TD>秩父</TD><TD>４</TD><TD>芝桜・祭り</TD></TR>
　　　　<TR><TD>箱根</TD><TD>３</TD><TD>温泉・湖</TD></TR>
　　　</TABLE>
　　</TD>
　</TR>
</TABLE>

初めてblog（Excite）を作っていてCSSをいじっていたら、なんか全体のフォントが
二周りくらい大きくなったまま戻らなくなってしまった...
リンクをクリックすると一瞬もとの大きさに戻る。
これってどうしたらいいんでしょうか？

>>48
メニューの表示>文字のサイズで2段階サイズを下げる。
クリックするとサイズが変わるのはおそらくUTF-8だから。

>>49
まったくそのとおりでした。お恥ずかしい。

>>47
全部スタイルシートにするわけにはいかないのかなぁ？
いかないから聞いてるのか。。。
テーブル二つで、うまいやりかたありそうだけども。。

なんで>>41みたいに断言できるのか不思議

CSSで太字にしたいときってどうすればいいんでしょう？
<b>・・・じゃないよね？わかんないよぉ〜・・・。
そういうのってどこにのってるんでしょうか？

>>53
しつこいな。
少しは自分で探せよ。。。
font-weight:bold;

ってか　CSSは化粧って言うけど、
俺のサイトはCSSでガチガチ・・・・

ん？なんでもないよ

質問です！今困ってます！
CSSがいいと聞いて取り入れたいのですが、動いてくれません。
文字を大きくするにはどうしたらいいのでしょうか？
今はこんな感じでプログラムしてまう。

<body>
<html>
<font="font-size:30px" font="font-color:red">
いらっしゃいませ！！
</font>
</body>

よろしくお願いしますm(_ _)m

すいません、追加で質問です。

<body>
<html>
<font="font-size:30px" font="font-color:red">
いらっしゃいませ！！ ここはマサシのホームページです！
</font>
</body>


このマサシの部分を、えーと、どっかのホムペでみたのですが、
虹みたく光らせたいです。
いろいろですけど、助けてください。
よろしくお願いしますm(_ _)m

>>56
まったくCSSは取り入れられていません。
>>4,5辺りを参照してから質問して下さい。

>>57
(・∀・)ｲｲ!!

>>38
部分的と言わずに、全体をさらします。
-----ここから-----
<html><head><title>TEST</title>
<style type="text/css">
<!--
a.external {
background-image: url(/image/external.gif);
background-repeat:no-repeat;
background-position:1px 0px;
padding-left:12px;
}
/* /image/external.gifは10*10px */
-->
</style></head>
<body>
<a href="example.com" class="external">hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge</a>
</body>
</html>
-----ここまで-----
これだけでも、現象の再現は出来ます。
MacIE 5.2 で、ウインドウサイズを小さくしていって、<a></a>が複数行にわたると
行が変わる都度にexternal.gifが現れてしまいますが、2行目以降はpaddingが効かずに
画像と文字が重なってしまいます。
質問の仕方悪いですか？

>>60
状況はわかるけど、何をしたいわけ？　どう表示させたいのかがわからない。
padding-leftでうまくゆかないならtext-indent:12px;とするとか。

>>60
そりゃあ、あんた、インライン要素なんだからそうなるでしょ。

何をしたいか...他のブラウザとMacIEでも同じような表示にしたいだけなんです。
>>18にも書いているんですが、
<img>タグを書かずに、aのclassを設定すだけでいけて、なおかつこれを回避する
にはどうすればいいでしょうか？
ということなんですが....
>>60のhtmlをMozilla 1.7.5 for Mac OS X と IE 5.2 for Mac で表示させたキャプチャ
をあっぷしてみました。
ttp://up.isp.2ch.net/up/75e40fc11b81.gif
上のMozillaのような形を想定しております。
>>62
そ、そうなんですか。と、この場合、Mac IEの解釈が正しくて、他のブラウザの
方がおかしいってことなんですか。う〜む。素直に、頭に<img>タグを書くしか
ないのですか...

>>60
>>61と同様で何をしたいのかが解らない
CSS以前にa.external はどのような文書構造の中で使用するのかで違ってくる。
例としてリンク等のリスト形式
画像　リンクの内容1リンクの内容1
　　　リンクの内容1リンクの内容1
画像　リンクの内容2リンクの内容2
　　　リンクの内容2リンクの内容2
なら
<html><head><title>TEST</title>
<style type="text/css">
<!--
li { list-style-image: url("/image/external.gif"); }
-->
</style></head><body>
<ul>
<li><a href="example.com">リンクの内容1リンクの内容1リンクの内容1リンクの内容1</a></li>
<li><a href="example2.com">リンクの内容2リンクの内容2リンクの内容2リンクの内容2</a></li>
</ul></body></html>
のような感じで...

何度もすんません。
>>62
そうか...インライン要素じゃなきゃいいんですね。<a>の前にブロック要素を
つけて、そのブロックの背景に設定すればいいと...
幸い、今回の場合、<a>の中身が長くなるのはサブタイトルにリンクをつけたものなので、
<h3 class="external"><a...>hoge</a></h3>
とすることで、無事解決しました。
>>62さまをはじめ皆様、ありがとうございました。

>>64
ご指摘ごもっとも。全体を晒せってそういうことだったんですね。
ああ、やっぱり質問の仕方が悪かったのか。すんません。
慣れない板で慣れない質問につきあってもらって感謝感謝。
いい板だぁ〜。
結果は>>65ということになりました。

>>21
>absolute はウィンドウの左上から位置を測るのでしょうか？ それとも親ボックスの左上から測るのでしょうか？

「ほーむぺーじ入門」で "containing block" の概念を教えないから、初心者が混乱する。
おそらく解説している本人も "containing block" を理解していない・知らないのだろう。
「absolute は親ボックスに対する位置」とか平気で間違った解説するから混乱してしまう。

http://hp.vector.co.jp/authors/VA022006/css/visualren.html#containing-block
このサイトのように、仕様書に基づいている解説を読むことだ。

初心者は「ウィンドウの左上」等とよく言うけれど、よく考えればあり得ないことがわかると思う。
通常、ブラウザウィンドウの上部には、タイトルバーやメニューバー、ツールバー等があるのだから。
ウィンドウ左側には、エクスプローラバー、サイドバー、サイドパネル等が表示されることもある。

"canvas", "viewport", "initial containing block", "containing block"
の概念を理解できないと、視覚整形モデルを理解することはできない。

>>67
ｵﾏｲはいつもそうやって遅れてくるのか？

Cellspacing="1"

これをスタイルシートにしたいのですが、どう書けばいいのでしょうか？

>>69あなたに質問する資格はないです。

そりゃあんまりだ

>>1すら読んでないのに質問する資格なんてなくて当然だろう

なら>1を読んでないｵﾏｲも回答する資格がない。

(´-`).｡oO( 天狗の回答者気取りがいるなぁ・・・)

69です。
OSはWindowsXP HomeEdition
browserはInternet Explorer 6 Service Pack 2です。
申し訳ありませんでした。

画面の大きさによってレイアウトが崩れるんだが・・・

>>75
「環境を提示すればよい」ってことではなくて、
「ある程度は自分で調べなさい」ってことだろう。

border-spacing で調べてみる。
対応状況とかも調べればわかる。

>>76
知るか。

中央の段が、ブラウザ幅によって可変になるような3段組の
ページを作成しようとしています。
ソースは以下のようにしています。

■ HTML ■
<div id="leftbox">適当な内容</div>
<div id="rightbox">適当な内容</div>
<div id="centerbox">
<p>適当な文章</p>
<p class="photo"><img src="xxx" width="100" height="100"></p>
<p>適当な文章</p>
<p class="date">日付</p>
</div>

※左右の段にはリスト等が含まれています。
※中央の段は文章と写真があり、写真に回り込みの指定をしたいです。
※日付では、上記の回り込みを解除したいです。

■ CSS ■
#leftbox　{ width:200px;
　　　　　　　float:left; }
#rightbox　{ width:200px;
　　　　　　　 float:right; }
#centerbox　{ width:100%;
　　　　　　　　 margin:0 220px; }
*>#centerbox　{ width:auto; }
.photo　{ float:left; }
.date　{ clear:left;
　　　　　width:100%; }

>78続きです。

以上をFireFox1.0で確認したときに思うように表示できません。
具体的には、
centerboxの中身が、leftboxやrightboxの中身より、高さが少ない場合、
clearした「日付」の部分が、leftboxやrightboxにある中身の下辺まで
下がってしまいます。
※上記だと、centerbox内の3つ目の<p>と日付の間が大きく開きます。
※この間が開かないようにしたいです。
※IE6.0、NN6/7で確認したときは、なりませんでした。

floatとclearに関するサイトなどを読んでいて、
clearは、それ以前に出てきたいかなる要素の回り込みも解除するみたいに
書いてあったので、この表示が正しいのかもしれないんですが、
何か回避する方法はありませんでしょうか？
よろしくお願いします。

＞７７
なんなのこの人？

>>80
お前みたいな奴へふさわしいレスをしてくれる人だと思う。

マジで？

>>82

　>>76
　知るか。

ほら、極めて簡潔で適切なレスじゃん

とりあえず、皆>>1嫁

俺だったら

　　>>76
　　あっそ

かな。

>>78
clear: left の意味は、「要素のボーダー上辺が、ソース文書内でそれ以前に出現するあらゆる左フロートの外下辺より下であるように、要素が生成するボックスの上マージンを十分大きくする。」だから、Firefox1.0 や Opera 7.5 の実装が正しい。

>この表示が正しいのかもしれないんですが、何か回避する方法はありませんでしょうか？
多分むり。絶対配置とか他の方法で挑戦したら。

ありがとうございました。
まだ見つけてはいませんが、ヒントを頼りに見つけてきます。
ありがとうございました。

正しい物を回避するとはこれいかに？

>86
ありがとうございます。
やっぱり、FireFoxの解釈の方が正しいんですね。
他の方法を探して頑張ってみます。

>88
回避するって言い方はおかしかったですね。
すみません。
全体をもう作り上げてしまって、今ごろになって気付いたので、
どうにか少し書き換えるだけでFireFoxもIEやNNの表示に合わせられないかと
あせってしまいました。
もう一度全体から考え直してみます。

Firefox で一語。FireFox と表記すると稚拙に見える。

>>90
いちいち煩い。

>90
あ…。Firefoxだったんですね。
今の今まで、勘違いしてました。

91は、私じゃないです。
質問以外の話題でスレ汚しゴメンナサイ。

誰・・・・・・

>>93
俺だよ俺

え！？　潤くん？

うん　潤だよ

なんかへんな鏡があるみたいだ

ﾜﾗﾀｗ

>>96
ほらだめよ潤くん。病室に戻りましょうね。

誰かマジレスお願い

>>100
情報が少なすぎて解決方法を提示しようがない

>>100
フロートでレイアウトしているの？
それとも、ポジションでレイアウト？
IEでは崩れるの？
ＮＮではどうなの？
ソースも全部教えて。
足のサイズ何ｍ？

>>100
チンチンのサイズは何px？

2px

勝った　俺2.6px
お前　小さいな

小学生並の会話になっている件について

会話も子供には合わせてやるべきだろ。
今、>>76が来てるんだからさ。

>>106
空気嫁

ダッチワイフ

行間隔をCSSで設定したくて（dream weaver）

.font12new {
font-size: 12px;
line-height: 18px;
font-family: "ＭＳ ゴシック", "Osaka−等幅";
}

で設定してるが制作画面では行間空いてるのにプレビューすると間隔があかない・・・
XP、確認ブラウザはIEとプニルです。ちなみにフォントとサイズは変わります。
埋め込み、外部両方ためしたけど変化なし。

ソース

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=shift_jis">
<TITLE></TITLE>
<script type="text/javascript" language="JavaScript" src="menu/js/script.js"></script>
<style type="text/css">
<!--
<link href="css.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style6 {color: #0000FF}
.leftborder {border-bottom-width: 1px;
border-left-width: 5px;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.style8 {font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"}
.style10 {font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #000000; }
.style4 {font-weight: bold}
.style12 {color: #000099}
-->
</style>
</HEAD>
<BODY bgcolor="#ffffff">
<!-- URL's used in the movie-->
<!-- text used in the movie-->

>>110
>line-height: 18px;

ピクセルではなく line-height: 1.5; と実数値で相対指定した方が柔軟。
ウェブブラウザ側の設定でフォンサイズが18pxより大きくなると、
行間がなくなってしまい、隣接する行のテキスト同士が重なってしまう。

font12new, leftborder, style6 とかその場限りのクラス名はどうかと思う。
これでは、スタイル変更に伴ってHTML文書の該当個所を変更する羽目になる。
style6 などのクラス名からでは、スタイル内容を把握することもできない。

何らかの文書構造を表現するための仕組みが、スタイルシートのあるべき姿。
だからマークアップした意味や構造に基づいてスタイルシートを設計すべき。
そうでないと、HTML文書からスタイル情報を分離する意義がなくなってしまう。

質問スレに見合わない、余計なお世話かもしれないけど、一応忠告しておく。

はあ？質問に答えてやれよボケ
宗教でもゲームでもWEB制作でも
信者ってほんときもちわるいね。

Firefox1.0では、下記の形式の外部スタイルシートが無視されてしまうようです。

@media screen{・・・}
@media print{・・・}

つまり、ブラウザ表示用とプリントアウト用を一つのスタイルシートに書いた場合ですが、
Firefox1.0では両方とも無視されます。
media指定のないスタイルシートは、きちんと認識するのですが。

同じページ＆スタイルシートを他のブラウザで確認してみたところ、
IE、Netscape、Opera、Safari　ではきちんとスタイルシートを認識してくれます。
Firefoxのバグでしょうか？

>>115
手元のWinXP+Firefox 1.0で以下を試したけど、問題なかったぜ。

-- test.html ----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<link rel="stylesheet" type="text/css" href="test.css">
<title>テスト</title>
<h1>テスト</h1>

-- test.css ----------------------
@media screen { h1 { color: red } }
@media print { h1 { color: blue } }

>>116
レスどうもありがとうございます。わざわざ確認していただき、誠に恐縮です。
自己解決したんですが、原因は私のバカバカしいミスでした。
@charsetで文字コードを指定する際、euc-jpと書くべきところを、euc_jpと誤記していたのが原因でした。
お騒がせして、本当にすみませんでした。

上記のその他のブラウザでは、間違った文字コード指定は無視するようですが、
Firefoxは、間違った文字コード指定をすると、スタイルシート全体を無視してしまうんですね。

スタイルシートで文章の外に
角丸の囲みを作ることってできますか？
四角の囲みを作る方法は分かります。
方法は、やはり角丸の絵を作ってテーブルですか？

あの…56な者ですが、一晩考えたんですけど‥……無理でしたぁ！
意地悪しないでどこが悪いか教えてください！

とりあえず下のがプログラムです。一晩でやっとここまで(汗
文字がスクロールしてくるようになりました。

<body>
<html>
<MARQUEE>
<font="font-size:30px" font="font-color:red">
いらっしゃいませ！！ ここはマサシのホームページです！
</MARQUEE>
</font>
</body>

でも、マサシの部分を虹色にしたいんです！
あと、文字も大きくなるはずなんですが、うちのパソコンが古いせいでしょうか？
すれ違いかもしれませんがホムペって通じます、よ、ね？？
よろしくお願いします！！m(_ _)m

>>120
http://pc5.2ch.net/test/read.cgi/hp/1106209097/

>>100
だから上の方をよく嫁
考えてどうなるモノではないと思われ
http://www.kanzaki.com/docs/html/htminfo11.html
http://www.kanzaki.com/docs/html/htminfo17.html#S31
http://www.kanzaki.com/docs/html/htminfo17-2.html#font

>>121
すみません。リンク辿ってみたのですが、天ぷらがどーだ海老フライがどーだとか
意味がわからなかったのですが…

実は初心者なんです。わかりやすくお願い出来ますでしょうか？

>>118
今の所Mozilla系しかだめだけど。
ttp://www.d-toybox.com/spec/CSS3/border/

<html><head><title>TEST</title><style type="text/css">
<!--
div.x {
border:1px solid #000;
padding: .5em;
/* Mozillaの独自実装 */
-moz-border-radius-topright: 1em;
-moz-border-radius-bottomleft: 1em;
-moz-border-radius-bottomright: 1em;
-moz-border-radius-topleft: 1em;
/* CSS3の草案 */
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
border-top-left-radius: 1em;
}
--></style></head><body><div class="x">本文</div></body></html>

>123
つっこみどころ満載で、ここまで来ると呆れるな。
ネタと思われても、しょーがないくらい。
以下の全ての質問に答えてください。
これにより、解答を考えたいと思う。

1,HTMLを覚える気はあるか。
2,今まで覚えてきた知識が、全て否定される可能性があるが、覚悟はあるか。
3,Googleって知ってる？ 何か判る？ 使ってる？

>>125
す、すみません…。(汗
質問が怖いんですけど、答えます、はい。


1,HTMLを覚える気はあるか。
あります！頑張ります！
将来出来ればこの道で食べていければ……と思っています。
（初心者がスミマセン）
ただ、ふと思うのは、今大学生一年なのですが僕が卒業する頃まHTMLって残ってるんですか？
CSS一本じゃなくていろいろ覚えておいた方がいいんですか？

2,今まで覚えてきた知識が、全て否定される可能性があるが、覚悟はあるか。
す、全てですか？は、はい……。

3,Googleって知ってる？ 何か判る？ 使ってる？
使ってます！
独学でここまで来れたのはGoogleのおかげです。


こ、こんな感じでよろしいですか？
宜しくお願いします！m(_ _)m

>126
OK!
>5 の一番上、【ごく簡単なHTMLの説明】を読んで、
HTMLが何かを学んでみてください。
CSSが何かを学んでみてください。

理解した上で、疑問が残るのなら、また来てみてください。

すげーな56。いやホントあんた格好いいよ。
夢は叶うよ。
いいことに気がついてるしね。
そう君が社会人になる頃には、HTMLはCSSにとって替わられてるのさ。

外部CSSに以下のクラスを作って、テーブルの任意の<td>にクラス指定
したんですが、IEでは反映されるんですがMozilla系で上手く反映されません。
どこか書き方悪いですか？よろしくご教示下さい

.hoge {
border-top: 1px solid #FFFFFF;
border-right: 1px solid #333333;
border-bottom: 1px solid #666666;
border-left: 1px solid #CCCCCC;
}

厨学1年かと思っていたら大学1年だった件について

ゆとり教育のなせる業

釣られすぎｗｗｗｗｗｗｗｗｗｗｗｗｗ

>>132
だ、誰ですか、あなた！？
みなさん、131は別人ですよ。(汗、汗
とりあえず誘導してもらったリンク先でhtmlの未来形がcssじゃないってことがわかりました。
人の名を騙るのはやめてください！
本当誰ですか？

それだけか？
学んだのは、それだけなのか？
やる気無いんじゃない？

マジレスすると、56はまずHTMLの基本書に目を通すべきなのでは。

>>133 もちつけ。とりあえずソープ行ってすっきりして来い。

別にタグ全部覚えろって言ってるわけでもない。
HTMLが何なのか理解するだけなら、>>5で十分じゃないか？

今勉強中です。
どうやらhtmlがハイパーテキストマークシートランゲージってこともわかりました。
見栄えはCSS、意味付けがhtmlですね。だいぶ見えてきました。
ってことは、下のは

<body>
<html>
<MARQUEE>
<font="font-size:30px" font="font-color:red">
いらっしゃいませ！！ ここはマサシのホームページです！
</MARQUEE>
</font>
</body>

自分で書いておきながらぐちゃぐちゃだ…。
<font style="font-size:30px;color:red">
これで思い通りの表示が出来ました！！

後は、マサシの部分を虹色にしたいのですが、具体的に
color:????
上の部分に何を指定したらいいのでしょうか？
color:rainbowなども一応試してみたのですが……。

>>138
>color:rainbowなども一応試してみたのですが……

笑えるなあ56。
いけそうかもって思った気持ちはわかる、すごく伝わってくるよ

>ハイパーテキストマークシートランゲージ

釣り師確定

今頃　気づいたのか（藁

>>138
虹色にするのはcssの領域じゃありませんよ。
PHPってのを勉強してごらん。
書店で3000円ぐらいの本がいっぱい置いてあるから。

>>142
ありがとうございます！PHPですね！
ちょっと高いけど、今からちょうど新宿行くので紀伊国屋にでも行って買ってきます！
また夜来ます！m(_ _)m

あ、あと141は俺じゃありません！それでは！

>>144
1人で2役やって楽しいか？

やべ。ちょっと罪悪感。本当に買っちゃったらどうしよう。

>>136
石鹸工場に言ったらスッキキリ出来るんですね！！！!！１１１１!!!
早速、見学を申し込みました、。

>>142
え？　PHPではできないのですか？
後、147は俺じゃありません！

もう訳わかんね。

PCサロンあたりに56クン専用スレでも立てよっか? たのし杉でﾏｼﾞﾔﾊﾞｲ

>>150
しかしどれが本当の56やら。
俺の予想では買いにいったっていう143=56だと思うが。

お騒がせしてすみません。
偽者さんも迷惑です！
後　自分は151さんの言うとおりです！

本物56よ　sage 入れるな。

このスレは上げていいのでしょうか？

IDで偽物の判別が出来る。

>>156
おまいアホだろ。

ﾜﾛﾀ

以後、レス番下二桁が56のひとは、なにかﾎﾞｹること。

>156は天才？

>>158
1人でやってろ。

cssで文字サイズを変える場合はどうすればいいのでしょうか？
font=17px　とやってもダメでした。

まずはcssを1から勉強しろ。
そして>>1嫁。
font-size: 17px;
でおｋ

#wrapper{
width:700px;
background:transparent url(img/bg.jpg);
}
#left_cont{
width:500px;
float:left;
}
#right_cont{
width:200px;
float:right;
}

<div id="wrapper">
<div id="left_cont">text1</div>
<div id="right_cont">text2</div>
</div>

この状態をMozzilaで見ると、wrapperの背景画像が反映されないのですが、解決法は無いでしょうか？

自己レススイマセン。
解決しました。

<div id="wrapper">
<div id="left_cont">text1</div>
<div id="right_cont">text2</div>
 
</div>

少しソースが汚いけど、これで出来ました。

A:link.sat { color:#0000CD; }
A:hover.sat { color:#FFFFFF; background-color:#0000CD; }
A:active.sat { color:#0000CD; }
A:visited.sat{ color:#0000CD; }
な感じでcssファイルで定義し、
<A href="../index.html" class="sat">あああ</A>とやっているのですが
カーソルを合わせると背景・文字色ともに#0000CDになってしまいます。
ナニが間違っているのでしょうか？
アドバイスよろしくお願いします。

>>163
Mozzilaってのは初耳だが...

>>165
A.sat:link とかに直せ

>>165
A:link.sat { color:#0000CD; }
A:visited.sat{ color:#0000CD; }
A:hover.sat { color:#FFFFFF; background-color:#0000CD; }
A:active.sat { color:#0000CD; }

>>167
どっちでも同じ。仕様書読んでから言え。

>>168
ありがとうございます！
出来ました。
順番も重要なんですね…

ｍ×ｎのテーブルがあり、それぞれのセルにある絵のｍ×ｎ分割した部分を表示させたいのだが、どうすれば良い。

例えば下の４×４のテーブルを作り１のところに１３に相当する部分の絵を置いたりしたい。
１５パズルゲームをジャヴァスクリプトで作ったが、元の絵を１６分割しなくても済むようにしたい。
指定する絵（あるいはそのアドレス）を変えさえすればどの絵でも１５パズルゲームが出来るように
したい。

┌──┬──┬──┬──┐
│　１ │　２ │　３ │　４ │
├──┼──┼──┼──┤
│　５ │　６ │　７ │　８ │
├──┼──┼──┼──┤
│　９ │１０ │１１ │１２ │
├──┼──┼──┼──┤
│１３ │１４ │１５ │１６ │
└──┴──┴──┴──┘

はい。スレ違い。

>>172
すれ違いじゃないよ。スタイルのところが判らないのだから。絵を部分的に表示する方法
が判らないのだよ。

>スタイルのところが判らないのだから

なにが解らないか具体的に書け。

>>173
どこがCSSなのかさっぱり解らん。

>>175
だから絵を部分的に表示したいのだよ。例えば３×３のテーブルを作る。真ん中のセルに９分割
した絵の真ん中の分だけ、あるいは右上の部分だけを表示させたいのだよ。

違う喩えをすれば、掌の絵がある。親指だけを表示させたい場合どうすればよいかと言う質問。
絵を５分割すれば一番右端の部分に親指が写っていて、そこだけを表示させたいのだが、
どうすれば良いのかという質問。

>>176
４×４のテーブル作って、絵も１６分割しといて
各セルの背景に該当するパーツを設定しとけばいいだろ。

てか、IDがj3っておまえ古式だろ？　ヲチ板に（･∀･）ｶｴﾚ!!

JavaScriptスレでも、自分では一切考えず丸投げ。
面倒臭いことを効率よくするための努力さえ面倒臭がって。
そんなの誰も答えてくれるわけないじゃん。

絵を一部だけを切り取れば良いだろ。
それがめんどうならｼﾗﾈ

JavaScriptでIMG要素を複製してclipプロパティを操作、でいーじゃん?

>>173
背景画像でマイナ座標とかを駆使すればいけるよ。
外部のバカはほうっておきなさい。

>>177
一つの絵を１６分割にして１６個の絵を使ってやる１５パズルゲームはすでに完成させた。
それより汎用性を持たせるために一つの絵を分割表示する方法が知りたいのだよ。

>>178
丸投げじゃないよ。絵を部分的に表示する方法を知らないだけだ。

>>181
もっとヒントをくれ。

うーん
例えば、80*80のセル（class: e）に
1 2 3
4 5 6
7 8 9
って並んでいる１枚の画像の５番を表示するとしたら

td {
　background-image: url("");
}
td.e {
　background-position: -80px -80px;
}

って感じ？

CSSってあくまで見た目ですよね。
15パズルなんだから、15個に分割していないと意味が無いよね。
即ち、CSSで再現すると、「そう見えるだけ」であって、実際はそうではない。
無意味じゃないですか？

あああー、16個に分割ですたね。

そう見せたいんじゃないの?

それにしても、
ＣＳＳオンリーで作ったサイトって安っぽいよね。

cssオンリーで作れたら、それはそれですごいと思ふ。

>>182 JSスレで大暴れ。

>>189
ネカマ幼女に釣られる古式ヴァカ葉だからしょうがないよ。

すいません、質問です。

ＩＥ６では、paddingやborderがwidthに含まれないと
聞いていますが（バグ修正済みと聞いていますが）、
これは本当でしょうか。
自分はＩＥ６を使っていますが、何度やってもpaddingがwidthに
含まれていました。
たとえば、
width:100px;
padding:20px;
の場合、横幅がやはり100pxのままなんですが。。

>>191
>>5にのってるサイトのいくつかにも書いてあることなんだが……
DOCTYPEスイッチで調べてみ。

>>192

「DOCTYPEスイッチ」でググッて解決できました。
ほんとありがとうございます。
自分、まだまだ知らないことばかりだと痛感しました。
１９１のことは何時間も悩んでいたんで、まじ感謝です。

>>188
そうだね。

>>187
そんな事無いと思うが…。
むしろテーブルよりは高度な表現が可能だと思う。

css Zen Gardenなんかは相当上手いと思うが…。
http://www.csszengarden.com/?cssfile=/099/099.css&page=6
http://www.csszengarden.com/?cssfile=/103/103.css&page=5
http://www.csszengarden.com/?cssfile=/041/041.css&page=13
特にこの辺が自分にはツボ。

>>195
テーブル使うってことは、そういう
CSSのみのデザインに加えてテーブルレイアウトもOKってことだと思うので
「より高度」とかいう表現は適切でないかと…。
表現の可能性が広がると言う感じでは？

それにしてもそこきれいだね

>>196
確かに「より高度」と言う表現は適切では無いですね。

Zen Gardenはレイアウトも綺麗だし、しかもソースが同じなのが凄い。
他にもselect a designと言うところに、違うデザインがあるので、クリックしてみると面白いですよ。

別ページをブロック内に埋めこみたいんですが、どのようにすれば良いでしょうか
ＨＴＭＬでは
<IFRAME SRC="〜"＞
とやっていた部分の代替です。

>>198
CSSではできません。
インラインフレームか、
SSIとかPHPみたいなのを使ってください。

ありがとうございます。
出来ませんか。。。
CSSでやろうと思ったのは

<Iframe>のあるボックスは
z-indexにて他ボックスの下に重なるよう指定しているのですが
フレーム内の部分だけ他ボックスの上に重なってしまいます。
これの回避方法がわからず、CSSで出来ないかなと思ったのですが

.tab{width:100%;height:30px; top:0px ; overflow:auto ; z-index:2}

.content{width:100%;height:90%; position:absolute; ; right:0px ; bottom:0px; overflow:auto; z-index:1}

この様に擬似フレームを作っております。 .contentが下にくるボックスでこの中にフレームを置いているのですが
先に書いたようにフレーム部分だけ上に重なって表示されてしまいます。
回避方法は何か無いでしょうか？質問続きですみません。

うあ、、、勘違いしてました。フレームのみじゃなく .contetのボックス自体が上に重なってしまうようです。。
他に配置してるボックスはz-indexの指定通りに重なってくれているのですが。。

なにがやりたいのか全く解らん。

>>202
オナニーじゃないの？

positionがきまってくれないんですが
全然、親要素に対して動いてくんねぇえええ

広告の裏へでもお書きになって・・・　ね？

広告の裏はこちらと聞いてやってきました！

ほんとcssは使えねーな

ITmedia ニュース（http://www.itmedia.co.jp/news/）のメニュー（左のヤツ）って、どうやって作るんだ？
ソース覗いたら、<ul>と<li>だけで構成されてたし。
スタイルシート覗こうとしたら、制限されてるし。

ul, li {
margin:0;
padding:0;
width:;
}
ul a {
display: block;
width:;
height:;
}

> <ul>と<li>だけで構成されてたし

それだけ解れば出来たも同然だろうに・・・

>>209-210
サンクス。やってみる。

こんな感じの、タブ風メニューバーを作りたいのですが、
これをリストの要素で出来ないでしょうか？


┌─┬─┬─┬─┐　　　←ここにメニュー
│　 └─┴─┴─┴─┐
│文章文章文章文章文│←ここにサブメニュー
└─────────┘

┌─┬─┬─┬─┐
├─┘　 └─┴─┴─┐
│文章文章文章文章文│
└─────────┘

宜しくお願いします。

できる

やってみたのですが、線が、上手く下のリストと合わなくて困っています。

やり方は何通りもあるわけよ。
わかる？あんたがどんなやり方でやっているかわからない。
そしたら、こっちも口を出せない。
お前はソース出せ

マルチ
http://pc5.2ch.net/test/read.cgi/hp/1078642389/245

マルチはよくないみたいなので、そちらのスレッドで話します。

読売新聞のサイト
http://www.yomiuri.co.jp/
右上部にある、文字サイズを＋と−で変更させる方法ってどのように記述すれば良いのでしょうか？
ソース見ても文字化けしててよく分からないです。

li {
dispay: inline
}
で横方向のメニューバーを表示させてるんですが、
これだけではブラウザのウィンドウサイズが足りないと
途中で改行されてしまいます。
改行しないようにする為にはどうすればいいんでしょうか。

>>218
「JavaScriptの質問用スレッド」で質問しる
まあJavaScript使わなくてもいけるがな

>>219
実際にみないとわからんな

>>218
はい、ソースです。

<SCRIPT LANGAGE="javascript"><!--
document.write("<font class='SS'>写真の拡大</font>");
//　 ★photoWinOpen('拡大写真のHTMLファイル名',写真のWIDTH,写真のHEIGHT);
document.write("<A HREF='javascript:void(0);' ONCLICK=photoWinOpen('http://www.yomiuri.co.jp/zoom/1-A-20050212203437766M-L.htm',500,361,37)><B style='background-color:#dddddd'><font class='Md'>＋</font></B></A>");
//--></SCRIPT>

>>222
ブラウザでそれぐらい調整できるだろ？
ｱﾌｫか？

>>223
？

>>223 あわてんぼさん。

>>222
それは写真の拡大
文字の拡大は
<SCRIPT langage="javascript"> printResizeButton(); </SCRIPT>
<FONT class=SS>文字サイズ</FONT><IMG height=1 src="/g/d.gif" width=2><A
onclick=fontSizeChange(+1) href="javascript:void(0);"><B
style="BACKGROUND-COLOR: #dddddd"><FONT class=Md>＋</FONT></B></A><IMG height=1
src="/g/d.gif" width=2><A onclick=fontSizeChange(-1)
href="javascript:void(0);"><B style="BACKGROUND-COLOR: #dddddd"><FONT
class=Md>−</FONT></B></A>

CSSでレイアウトをしているんですが半角文字が続くと正しく改行されずレイアウトが
崩れてしまいます・・・、何か改善方法はないでしょうか？
お願いします

無い

>>218,222,226
擦れ違い

先頭の文字だけ色を変えているサイトを前に見たことがあるのですが
CSSでどう記述すれば可能でしょうか

span で class でOK

＿＿:first-letter {
color: ;
}

>>232
ありがとうございました、strictでは使えないみたいですね・・・。
教えて頂いたのに申し訳ないです

??

BACKGROUND-IMAGE　でテーブルの背景に画像を張りつけ、
その背景だけを半透明にしたいのですが。どんな方法がありますか？
filter: alpha(opacity=30);
とするとテーブル内の文字まで薄くなっちゃいます。orz
解決方法はあります？

画像を加工する。

いや、それ以外でお願いします。。。

>テーブルの背景だけを半透明

画像を加工する。それしかないのだよん。

そうですか、、、ありがとうございました。

>>227
IEに word-wrap: break-word があるよ。CSS2には無いがね。

IE6とNN7で表示確認してます。
font-sizeを相対指定してるんですが、大きさが違う…。
＞font-size:small とか large とかです
(ＮＮの方が一段階大きくなる）

絶対指定する以外に大きさを統一できる方法ありますか？

いや、逆でしたね。
「ＩＥの方が一段階大きくなる」でした。

>>241
無意味

既出かも知れないが、ＣＳＳと日本語ってデザインの相性が悪くない？
英語だとかっこいいデザインでも、日本語にするとあら不思議。ダサダサ。
ＣＳＳで作ったサイトにひじょーに多いと思うんだけど。

>>244
すげえ分かる

>>244
扇子の問題

>>241
ついでに言うと絶対指定にしても統一することは不可能。

>>244
わけわからん、使い方が下手なだけ

>244
まぁ別にtableレイアウトでも一緒な訳だが

フォントがダサいとか

要するに日本語をデザインとして美しいと思えるか思えないか、
或いはフォントそのものが美しいか美しくないか、の違いかと。

word-break: break-allとword-wrap: break-wordって
どう見ても全く同じにしか見えないんですが、
どう違うんですか？

h1{
color:#000000;
font-size:200%;
background-color:#8eafff;
background-image:url("bg.jpg");
background-repeat:no-repeat;
width:100%;
height:143px;
border-bottom:1pt solid #000000;
}

こういう風に指定しています、文字位置を下にしたいのですがどのようにすればよろしいでしょうか？
vertical-align:bottom;というのはできませんでした。
文字サイズを固定してpaddingを指定すれば出来ないことはないのですが…。

右側にメニューのあるページをfloatを使用してレイアウトしようと
思っているんですが、どうやってもうまくいきません。
右側のメニューを160pxのサイズ固定にし、残りの部分を全て
メインメニューとして使用したいのですが、
下の例で、「このサイトについて」という文字が、
残った画面のど真ん中に表示されるようにするには
どうすればいいのでしょうか？？
（わかりやすくするため背景に色をつけています。）

<body>
<div style="float:left;background-color:#eeeeee;">
<center>
１．このサイトについて
</center>
</div>
<div style="float:right;background-color:#ffcccc;width:160px;">
メニュー
</div>
</body>

>>254
ieでしかちぇっくしてないけど。
<body style="margin:0px;padding:0px;">
<div style="margin-right:160px;background-color:#eeeeee;text-align:center;">
１．このサイトについて
</div>
<div style="position:absolute;top:0px;right:0px;background-color:#ffcccc;width:160px;">
メニュー
</div>
</body>

>>254
メニューとコンテンツの順番変えたら？

<div style="float:right;background-color:#ffcccc;width:160px;">
メニュー
</div>
<div style="margin-right:160px;background-color:#eeeeee;">
<center>
１．このサイトについて
</center>
</div>

>>256
そっちの方が正しいね。多分。

>257
何で正しいの？

>254は
メニューを後ろに持って行きたいのに
HTMLの構造を変えられちゃ困るんでないか？

>>258
論理構造上は、メニューの方が本部より上位の概念だから。

ありがとうございます！
メニューとコンテンツの位置を入れ替える方法も考えたんですが、
それはお手上げだったときの最終的な代替案として考えてました。
できれば右メニューのレイアウトのまま相談にのっていただきたいんです。
わがまま言ってすみません！

>255さんの教えてくれたものに少し手を加えました。

<body style="margin:0px;padding:0px;">
<div style="margin-right:160px;background-color:#eeeeee;text-align:left;">
１．このサイトについて
<center>
<div style="width:600px;background-color:limegreen;">
表です
</div>
</center>
</div>
<div style="position:absolute;top:0px;right:0px;background-color:#ffcccc;width:160px;">
メニュー
</div>
</body>

↑のように左側にあるメインコンテンツにwidth:600pxの表を置きたいんですが、
画面のサイズを小さくしたときに、（600px以内）
右側のメニューが表に食い込まない形にするにはどうすればいいでしょうか？
画面を600以内にしたときに右メニューは見えなくなる感じにしたいのですが、
うまくいきません･･･。（イミわかるでしょうか・・？）

>>241
IE6 はDTD で標準モードにしたらいい

cssでレイアウトすると、印刷時に崩れませんか？
１ページくらい空白になったりします。
印刷用のcssで対応すればすむ問題なんですけど、
できれば、組んだとおりにピシッと印刷に出るとうれしいです。
ブラウザで見た時と印刷時とで同じレイアウトにできるよう
狙うコツを教えてください。

PDFにしろや。

>>262
>ブラウザで見た時と印刷時とで同じレイアウトにできるよう狙うコツを教えてください。

それを遣らかそうとすると、印刷時にあわせて画面上で
絶対単位を使ってレイアウトするとか、ナンセンスなことになる。

出力媒体やデバイスの特性にあわせてレイアウトするのが基本。
画面情報をそのまま印刷しても読み易くはならない、と考えべき。
そもそも画面情報のレイアウトが読み難ければ、話にならないし。

質問です。

1あいうえお　　　4たちつてと
2かきくけこ　　　 6なにぬねの
3さしすせそ　　　7はひふへほ

<ol>でこういうことしたいんですけど、
ｃｓｓで<ol start="">の代わりになるのは無いので、
どうしたらいいんでしょうか？
<ol>でやろうとしているのが間違いなんでしょうか？

間違い

olがなんのリストだか勉強しろ

>>266さん
レスありがとうございます。

選手名鑑みたいなのを作りたいんですけど、
そういう場合は<table>を使うのが正しいんでしょうか？

スレチガイデシタすいませんでした。

<body>
<div id="layout">
<!--タイトルロゴと住所-->
<h1>〜〜〜〜〜</h1>
<h2>〒〜〜〜　　tel/fax　〜〜〜〜</h2>
<!--メニュー-->
<div id="menu">
<h3>メニュー</h3>
<ul><li><li><li></ul>
</div>
<!--コンテンツ用ボックスー-->
<div id="1">
</div>
<!--コンテンツ用ボックス-->
<div id="2">
</div>
<!--コンテンツ用ボックス-->
<div id="3">
</div>
<!--コンテンツ用ボックス-->
<div id="4">
</div>
</div>
</body>

ソースは上記の通りです。

レイアウト用の<div>は幅を696pxにして背景に画像を指定、
４辺共に1pxでボーダーを指定しています。
画面上部にタイトルと住所、画面左にメニューバー、
そして正方形のボックスを順次フロートさせて、レイアウトしています。
それぞれのボックスの上と左に10pxのマージンを指定してボックス同士が
くっつかないようにしています。

質問ですが、ネスケだと時々、レイアウト用の<div>が下まで広がらないのです。
<h2>のあたりで切れてしまいます。
コンテンツ用のボックス4の後に改行を入れたり、空白の段落を一つ入れたりすると
きちんと表示される事もあります。
いらない改行を入れたりせずに表示させたいのですが、どうすればよいでしょうか？
よろしくお願い致します。

>>254が<center>を使っている件について

縦18px、横196pxの背景画像（実際はhover用も含め36×196の画像）を用意して、<ul>でhover時に背景が変わるメニューを作成したいのですが、
WindowsIE（5,6）で各<li>間にどうしても隙間ができてしまいます。MacIEやFireFox等ではピッチリ隙間なく表示されているのですが…
<ul>の直前のタイトル画像との間にも隙間ができます。どうやったらバグ回避できるでしょうか。
余分なものも含まれてると思いますが、以下現在のソースです。どなたかご助言、お願いします<(_ _)>

<img src="menutitle.gif" width="85" height="24" alt="menu"/>
<ul class="sidemenu">
<li><a href="URL">コンテンツA</a></li>
<li><a href="URL">コンテンツB</a></li>
<li><a href="URL">コンテンツC</a></li>
</ul>

ul.sidemenu {list-style-type: none; margin-left: 0; padding-left: 0;}
ul.sidemenu li a { display: block;}
.sidemenu li { width: 196px; height: 18px; font-size: 10px; line-height: 18px; border: none;}
.sidemenu li a { padding-left: 12px; color: #ffffff; text-decoration: none; background: transparent url("sidemenubg.gif") no-repeat 0 0;}
.sidemenu li a:visited{ color: #ffffff; text-decoration: none;}
.sidemenu li a:hover{ color: #000000; text-decoration: none; background: transparent url("sidemenubg.gif") no-repeat 0 -18px;}

>>272
ul や li の width を明示すると MSIE が変なスキマをこさえるようになった気がする。
で、ul の親が li だと、そのスキマが無くなることに気づいてDOM操作で無理矢理
追加した覚えがある。

>>253
不細工な方法だと思うが、これぐらいしか思いつかん。

h1{
position:relative;
color:#000000;
font-size:200%;
background-color:#8eafff;
background-image:url("bg.jpg");
background-repeat:no-repeat;
width:100%;
height:143px;
border-bottom:1pt solid #000000;
margin-top:0;
}
h1 span {
position:absolute;
bottom:0;
}

<h1><span>文字列</span></h1>

画像リンクをする際、画像にborderを指定していると
リンク後に紫色に染まってしまって見苦しいのですが、
これを解決するにはどうすればよろしいでしょうか。
どなたかご存知の方ご教授お願いします

少しはググれや　ﾌﾞｫｹ

ググって探したのですが、見つかりませんでした。
探し方が悪いのかもしれませんが、本当に見当たらなかったんです。
URLだけでもいいので、教えて頂けないでしょうか

>>277
http://www.google.co.jp/search?hl=ja&c2coff=1&q=%3Cimg+src%3D%22%7E.gif%22+border%3D%220%22%3E&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=

ありがとうございます。
質問が悪かったかもしれませんが、border=0指定ではなく、
borderを表示させて、なおかつ枠をリンク色に左右されずに特定の色に固定させる
という方法なのですが、教えて頂けないでしょうか。

>>279
あたま堅いなあ。
要はそのボーダの色はa要素のcolorなんだよ。

DIV要素で囲んだ領域の中で、
一番上にリスト要素(ulでもdlでもolでも一緒)を置くと、
余計なマージンが入ってしまいました。
現象を確認したのはFireFox1.0 Netscape7,Opera７.54u1です。
IE6では表示は崩れません（独自解釈？）
以下ソース、DOCTYPEはHTML4.01 Strictです。

<!--ヘッダ-->
<div style="width:600px;height:100px;background-color:#ff0000"></div>

<!--ボディ-->
<div style="width:600px;padding:10px;background-color:#00ff00>
<ul>
　<li>テスト１</li>
　<li>テスト２</li>
</ul>
</div>

<!--フッダ-->
<div style="width:600px;height:100px;background-color:#0000ff"></div>

こうすると、背景赤のヘッダ部と背景グリーンのボディ部の間に改行のような形で
隙間ができます。リスト要素以外では表示に異常はありませんでした。
position:absoluteでdivの位置を絶対指定すると解消されるものの、
relativeでは現象変わらずでした。

問題の原因がわかるかた、いらっしゃったら教えていただけないでしょうか。

>>273
ありがとうございます<(_ _)>
width指定を<li>から<a>に移動すると、WindowsIEでは隙間が解消されました。
（ただ、そうすると今度はMacIEではul.sidemenuを入れたボックスとメインボックスの間に隙間ができてしまいましたが）
DOM操作は今のスキルではよく分からないので、このままでいきたいと思います。
ずっとできないでいたので嬉しいです。本当にありがとうございました。

ttp://www.in3c.org/blogs/index.php
ttp://www.in3c.org/blogs/css/main.css
このページのように左側のメニューの背景を透かす方法が分かりません。
ググってみたところ、背景に透過PNGを使う方法と、CSSでalphaフィルタを使う方法
があることは分かったのですが、このページのソースを見ても、メニュー部の背景画像はgifで、
alphaフィルタを使った様子も無いようなのです。

よかったら教えていただきたいです。
よろしくお願いします。

良質問age

>>280
何度もすみません。おかげ様で分かりました。
ご指摘の通りもう少し柔軟な考えでやっていこうと思います。
ありがとうございました

>>283
http://www.in3c.org/blogs//images/menu_bg_top.gif

失礼。ソース修正します。

<!--ヘッダ-->
<div style="width:600px;height:100px;background-color:#ff0000"></div>

<!--ボディ-->
<div style="width:600px;padding:0px 10px;background-color:#00ff00>
<ul>
　<li>テスト１</li>
　<li>テスト２</li>
</ul>
</div>

<!--フッダ-->
<div style="width:600px;height:100px;background-color:#0000ff"></div>

リストが先頭に来るdivの、topとbottomのpaddingが0指定だと現象が再現します。

>>287
それ、ulのマージン。
この挙動が間違っているのか正しいのかはエロイ人に細くして頂きたいです。
ul（に関わらず各種ブロックでこのマージンはみ出しは怒るけど）の親となるブロックの
上方向paddingを1pxでも指定していれば何とかなったような気がする。

リンクのページで
（HTML）
<P><A href="〜"><IMG src="〜"alt="〜"></A>〜</P>
<P><A href="〜"><IMG src="〜"alt="〜"></A>〜</P>
（css）
img{
border:none;
vertical-align:middle;
margin-left:0px;
margin-right:50px;
margin-top:10px;
margin-bottom:10px;
}
p{text-align:center;}

とした場合、バナーのサイズが違うためそれぞれの説明文が綺麗に上下が揃わないんです。
どうすれば最初の一文字から揃えさせればいいんでしょうか。

>>286
！
なるほど。
透かしてたわけじゃなくて、
実際には透かしたように見せた画像を背景にしてたわけですね。
灰色のgifをどうにかさせて透過させてたのかと思ってた。
謎が解けました。ありがとう。

>>289
きれいに上下がそろわないってどういうふうにそろえたいの？
vertical-align: topとは意図してることが違うの？

fontやらtableやらtdやらなんとか頑張ってきた
実際、それほど難しくもなかった
だがcss？なんだそりゃ…さっぱりわからん…
通販サイトみたいなtableタグ多用したサイト作りたいのだけどcss無しではだめなのかい？
ビルダーもニンジャもよくわかんねーよぉーｗ

まぁ、cssはお前にぁー無理だ。

>>292
どうぞ勝手にtableと仲良く戯れていてください。
くだらないサイトを作って幸せになってください。
そしてこのスレに二度とあらわれないでください。

>>291
テキストの説明文をです。
（例）
バナー　　ここは〜です。
バナー　　ここは〜です。
このようにしたいんですがバナーのサイズがばらばらなんで今は
バナー　　ここは〜です。
バナー ここは〜です。

こういうふうになっているんです。

>>295
1　テーブルを使う。
2　バナーの種類ごとにクラス振ってマージン。

>>295
そういう内容なら、自分はtableでマークアップする。

スタイルシートでtableの色指定したとして
このtableだけは別の色にしたいっていう時は
どうしたらいいの？

>>298
classやid振るか文脈セレクタ使え

>>296 >>297
ありがとうございます。
素直にテーブルを使います。

ど真ん中にテーブルを配置したいのですが、
どうすれば良いのでしょうか？
ALIGN="center" VALIGN="center"　をやってもIE以外ではど真ん中になりません
cssでど真ん中配置する場合はどうすれば良いのでしょうか？

ど真ん中にテーブルっていう時点で
表としての扱いはしていないと思われるので
width100%、height100%のテーブルのなかに
入れ子でテーブルを入れましょう。
DOCTYPE宣言で標準モードにしないように。

今までIE使ってて、最近Firefoxを使いはじめた。
z-indexが効いていておどろいた。

>>301
<div align="center">テーブル</div>で解決

IEだと問題ないんですがFireFOXを使用して見た場合
画像にリンクを貼ってあるものにカーソルを合わせると「ｶﾞｸｯ」っと画像が動くのですが
回避方法等ご存知でしたらご教授ください。

>>302>>301
さんのやり方はIEではど真ん中に配置されるのですが
ネスケやMozillaだとど真ん中に配置されません。

>>306
>>6 Q2

まずどっち方向にど真ん中にいかないのか教えてくれ

>>308
横方向にはど真ん中になるんですが、
縦方向はど真ん中にならず一番↑に表示されるんです・・・

>>307
横方向のセンタリングはできるんです。

ぼくのは常に右曲がりです。

ＣＳＳ覚えないとどうなるの？

>>310
テーブルを入れ子にするのは先ほど言ったとおり。
親のテーブルの高さを１００％にしなさい

>>313
きちんと親テーブルは100%と設定しています。

インターネットオプションの「セキュリティー｜既定のレベル」を「低」に設定しないとだめ。

すべての祖先をheight:100%にしないと縦中央にならないのはcss2の仕様。

全て100%にしています・・・・・・

だからDOCTYPE宣言を見直せって
標準モードじゃできないよ

css関係ないじゃん...

ど真ん中厨が・・・　　　春だねぇ

厨達は夜が早いな。

<style type="text/css">
<!--
#test{
color: #33ff00;
}
-->
</style>
</head>
<body>
<p ID="test">123</p>
<h1 ID="test">abc</h1>
</body>
IDは1ページ内で一回しか適用されないはずなんですが、上のようしても、
「123」「abc」両方にcssが適用されます。何故でしょうか？

>>322
一回しか適用されないんじゃなくて一回しか使えない

>>322
>IDは1ページ内で一回しか適用されないはずなんですが

そもそもの根本的な考え方が間違っている。
　1. id属性値は、同一文書内で一意的な存在の筈であり、複数存在し得ない。
　2. 即ち、同一文書内で同一名称のIDセレクタは複数要素にマッチし得ない。
と、考えるべき。

>上のようしても、「123」「abc」両方にcssが適用されます。何故でしょうか？

HTMLパーザが「御めでたい」エラー訂正機能を働かしているから。
XMLプロセッサの妥当性検証のように、エラーを報告しないから。

パーザ の検索結果 約 4,830 件中 1 - 10 件目 (0.20 秒)

無駄な手間を…

天地中央は >>8

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

最近FireFox導入しました。
ここで紹介されてるものをエディタにコピペしてFireFoxで表示しても全くCSSが反映されてない。
おれのFireFoxがおかしいのか？

頭！

>>328
DOCTYPE宣言してねーだろ。

>>329
>>330
初歩でしたね。
HTMLもおれの頭もおかしかった…
サンクス。

>>331
あのな、頭！ ってのはおまいのじゃないの。

>>332
だから「HTML（DOCTYPE)も｣おかしかった、と。
「HTMLの頭もおれの頭もおかしかった｣と書けばよかったな。スマソ。

ﾄﾞｳｲﾀｼﾏｼﾃ｡

ブロック要素に、widthとpaddingやmargin、borderを指定した時、
例えば200pxでpadding10pxにするとmozillaの場合paddingを除いてwidthが再計算されますよね。(paddingあわせて220pxになる)
IEやOperaの場合これはありませんが、どっちが正しいのでしょうか？

>>328-331
の記事を見てもしかしてと思ったらDOCTYPE宣言してませんでした；
したらOperaは再計算されていたので、220pxになるのが正しいのかな？

IEが間違っているというか、そんなかんじっすね。

>>323
>>324
返答を参考に勉強しなおして来ます。ありがとうございました。

FireFoxで、ボックスにfloat属性を指定しないとmargin-topが無効になるのってバグ？？
IEだとfloatがなくても普通にマージンが効きます。
↓このソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
</head>

<body>

<div style="margin:0;width:400px;height:200px;background-color:#ffcc00;float:left">
<h1 style="margin-top:20px;margin-left:20px">回り込み指定あり（トップマージン有効）</h1>
</div>

<div style="margin:0;width:400px;height:200px;background-color:#00cc00;clear:left">
<h1 style="margin-top:20px;margin-left:20px">回り込み指定なし（トップマージン無効）</h1>
</div>

</body>
</html>

IEの独自解釈なのか、FireFoxのバグなのか・・・
さらにFireFoxだと見出しのmarginをem指定にすると、親のdivのマージンが変わったりとか、わけわからん・・・

<div id="body">
<p>あいうえお</p>
</div>

で、

#body{
width:50%;
height:100%;
background:#cccccc;
}

と指定すると、IE6だと縦いっぱいに背景#ccccccが適用されるのですが
Operaだと<div id="body">分の高さしか適用されません。
どのようにすれば、縦いっぱいにできるのでしょうか？

>>335
>例えば200pxでpadding10pxにするとmozillaの場合paddingを除いてwidthが再計算されますよね。(paddingあわせて220pxになる)

Mozilla が周辺領域を除いて「再計算」しているわけではなくて、本来、
width と height は、ボックスが持つ内容領域の寸法を指定するもの。

ボックスモデルでは、各ボックスは、テキストや画像などの内容領域を持ち、
その周囲に padding, border, margin という周辺領域を持つ構造になっている。

そして、通常フローのブロック要素であれば、以下の等式に基づいて計算される：
　　親ブロック要素の内容幅 = 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' （ただし、border-style が 'none' であれば、ボーダー幅は '0' になる）

IE や Mozilla、Opera 7 などの後方互換モードでは：
　　width = 'border-left-width' + 'padding-left' + 内容領域の幅 + 'padding-right' + 'border-right-width'
という具合に計算するように実装されている。すなわち：
　　親ブロック要素の内容幅 = 'margin-left' + 'width' + 'margin-right'
という具合に計算されていると推測される。

>>339

あーあるある。バグなのか仕様なのかは教えてエロイ人なんだけど、おれも苦しんだ。
俺の場合はヘッダにアイキャッチ画像置いてるサイトなので、横幅は740ピクセル指定で
固定してある。
センタリングとmargin有効を両立するために、float指定するボックスをまるごと囲むボックスを用意したり、
色々やりたくないこともやった。
さらにIEのWidthのバグ（borderとpaddingを含めてしまう）対応のために、
ボックスの入れ子を作ったり、もうダサダサ。

なんか疲れる・・・。

疲れたら寝ろ

だーかーらー

ＣＳＳで作るメリットはないって気づけよ！

(´･ω･｀).｡oO(やぁ… 世の中についていけない奴は何処にでも居るもんだね。)

>>339
（　´ _ゝ｀）...

h1{
margin-bottom:1em;
}
.hidari{
width:30%;
float:left;
}
.migi{
width:70%;
}
.clear{
clear:left;
}
と指定しています。

<h1>おだおｄｄ</h1>
<div class="hidari">a</div>
<div class="migi">i</div>
<div class="clear">ひげ</div>
とすると、h1に指定しているmargin-bottom:1em;がclearの上にも効いているのですが何故でしょうか？

>>347
これが原因かどうかはわかりませんが、
％指定で合計が１００％になるようにするのは
あまり好まれません。

>>344
そうですね、一生tableレイアウトしててくださいね

>>348
はい、実は上のは例で簡潔に書いただけでして本当は
2%ｽﾍﾟｰｽ|25%左|2%ｽﾍﾟｰｽ|右69%|
と98%にしまして一番右、2%は指定せず同じだけスペース開くようにとしています。
最初99%にしていましたが1%の違いが自分にとって気持ち悪かったので…

他にはフォントの色、大きさの指定等、問題について関係無いだろうと思われる物ははぶいて書きました。

>>347
「ひげ」と「i」の間が1em空くってことか？

IE6　Transitionalでテストした。　空かないよ。

>>351
はい、そうです。
空きませんか…では他に原因があるようですね、一時的にUPしてみます。

遅くなりました。
http://www.rinku.zaq.ne.jp/bkdgg507/
これです、ノートパソコンで見ていたらまぶしく無かったのですが今デスクトップで見たら
目が痛い…これは後日変更します。

作成途中で適当なんですが、宜しくお願いします。

>>353
試してみてもいないんだけどメニューのボーダーをそれぞれ逆にしたほうがいいんじゃないかと思った

何か違和感が

class="clearl"　外してみて。

>347と全く違うじゃないか。div厨の見本だな。

<div class="背景的なもの"></div> のheightを
<div id="メインの文章">
<?php メインの文章(); ?></div>
に相対的にあわせるのってどうすればできるんでしょうか。
というか今調べてて思ったんですが、これってそもそも可能なのでしょうか。心配です。

>>354
後ほど試してみます、有難う御座います。

>>355
http://www.rinku.zaq.ne.jp/bkdgg507/test.html
外してみました。確かにdivに頼りすぎですね申し訳ないです、精進します。

>>356
やってみれば解るんじゃないのか？

やらないんなら好きなだけ心配してろ。

やってみたんだけどうまくいかなかった。

>>339
IEのバグ
http://cssbug.at.infoseek.co.jp/detail/winie/b172.html

>>340
http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

>>356
JavaScriptでも使わない限り直接その両者の高さを合わせるすべはありません。
しかし、うまくやっている人はその親要素をうまく使っています。
参考にしてみて下さい。

>>347
#floatbox{
width:100%;
}

<h1>おだおｄｄ</h1>

<div id="floatbox">
<div class="hidari">a</div>
<div class="migi">i</div>
</div>

<div class="clear">ひげ</div>

これでOKだと思う。

DW2004のCSSでフォントの指定をするとおかしくなる。
例）
body {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
上記で指定した場合、指定したフォントが適用されません。
なぜでしょうか。

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

質問ですが、
a:hoverで、背景を変えるときに、

ボックスいっぱいに背景を変えたいときはどうしたらよいのでしょうか？？

>>366
a要素はデフォのママだとインラインレベル要素なので、ボックスはテキストの
分量しか形成されません。
もし、a要素が入っているli要素などがあって、そのli要素のブロックいっぱいに
背景を変えたい、というのであれば a { display: block } としてブロック化し、
さらにli要素のブロックと同じ大きさになるようにしてください。

>>367

丁寧で正確なレスありがとうございます。完璧に分かりました。ありがとうございました。

>>365さん

winXP home
firefox,IE 6で発生します。
2バイト文字をcssで使用すると現象が発生すると考えています。

おいニート共。検索するの面倒なんで俺様の質問に懇切丁寧に答えやがれ

bodyを幾つかに分けたいんだが
例えば1.htmlには1のbody　2には2のbody　といった感じに
その場合って
1.body{hogehoge}
2.body{hogehoge}で良いんだっけ？
で、適用する場合<body>タグに<body class=1>でいいんだっけ？

リンクをテキストだけではなく、ボックス全体に適用させるにはどうすればよいでしょうか？？

>>370
態度が気に入らないが 、答えてやろう。
body要素だけ内部CSS、他は外部CSSでFAだろ。
解決したなら、非礼を詫びて、感謝のレス書いとけ。

>>372
ばっか全て外部CSSでやりてぇんだよ

>>373
頭からっぽなんだから背伸びするな。

>>372が答えるから

やるのも教えるのも簡単だけどな、
1のbody、2のbodyて・・・センスなさすぎ。

class値に数字って問題ないですか？
<p class="10">みたいな感じなんですが。

>>371
あるボックス（というかブロック）内にあるa要素全てに、ってこと？

>>377

リンク先へ飛ぼうとするときに、テキスト上をクリックするだけでなく、余白部分とか、ボックス内のどこをクリックしても
リンク先へ飛べるようにしたいのです。

>>376
数字は使えるけどその使い方は間違い。
classとidは英数記号が使えるけど、数字から始めるのは NG 。
class="asdf-10" とかは大丈夫。

記号の中で一文字、例えばアンダースコアとか、を絶対使わないって
自分でルール決めしておくと、のちのち更新とかデバッグとかするときに、
エスケープシーケンス風に使えて便利。

>>378
それだったら、a要素のdisplayをブロックにすれば良い、

…はずなんだけど、MSIEは駄目っぽい。
夏に期待しる。

>>379さん
親切なレスありがとうございました。

>>380
ありがとうございます、一応displayをブロックまではやってたんですが、うまくいかなかったもので。
当方msie使いですが、ttp://voix.s16.xrea.com/の左側ぶぶんとかはもしかしてjava script
ですか？？こんな風にしたかったんです。

>>369
>2バイト文字をcssで使用すると現象が発生すると考えています。
そんなわけがない。うちではちゃんと反映される。他にヘンな指定してると見た。
あと、当然だが、入れてないフォントは反映されないぞ。
フォント・キャッシュをクリアーしてみたらどうだ。

>>382
ソースを。

>>378
ブロック化したアンカーの範囲が内容物の部分のみになる(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b072.html

>>382

>>7
リストを用いたレイアウト
　http://css.maxdesign.com.au/index.htm
ここから好きなのを。というかテンプレ読んでね。

a:link{
color:#000000;
text-decoration:none;
border-bottom-style:double;
border-width:4px;
}
ってしてるんだけど下線に二重線が付きません
visitedの方も同じようにしてるんですけどコチラもつきません
でも改行を入れて下に文字を入力すると二重線が付くのですが…

a { に汁

>>388
してもできませんでした（⊃Д｀)

普通に出来ますけど・・・

なんか余計なものが有りそうだね。
CSS全部出してみて

4pxだと細線・太線になるから　3px にしたほうがいいな。

>369
"ダブルコーテーション"でなく
'シングルコーテーション'でもダメか？

2バイト文字でのバグはSafariで発生する
ttp://members.at.infoseek.co.jp/cssbug/detail/safari/b003.html

>>390
<!--
body{
font-size:11px;
color:#000000;
background-color:#ffffff;
margin:0px;
scrollbar-face-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-arrow-color: #aaaaaa;
scrollbar-track-color: #ffffff;
cursor:url(cur.cur);
}
a {
font-size:11px;
color:#000000;
border-width:3px;
text-decoration:none;
border-bottom-style:double;
cursor:url(cur2.cur);
}

a:hover{
font-size:11px;
color:#000000;
background-color:#cccccc;
border-width:3px;
text-decoration:underline;
}
h1{
font-size:11px;
border-bottom-style:dashed;
border-bottom-width:1px;
margin-right:0px;
margin-bottom:5px;
margin-top:15px;
font-weight:normal;
}
h2{
font-size:11px;
border-top-style:solid;
border-bottom-style:solid;
margin-left:0px;
margin-bottom:1px;
margin-top:10px;
border-top-width:1px;
border-bottom-width:1px;
font-weight:normal;
}
-->ageてもた（⊃Д｀)以上です

>>393
ふつうに２重下線になるけど・・・

リンク部分のhtmも出してみな

ごめんなさい一時ファイル消去したらちゃんと表示されました（⊃Д｀)

ｺﾉｰ　　まあいいか・・・

a:hoverの
border-width:3px;
text-decoration:underline; は消しておけよ。

IEが position:fixed に対応してくれるのは
いつごろになりそうですか？

夏です

15年後のな

夏はセキュリティホール埋めだけだろうなあ。

でもメジャーバージョン上がるんだし…

>>363
有難う御座いました、無事解決しました。

藻前らさぁ
CSS以前に「HTML」を先に勉強供して下さい

藻前は国語勉強してくらはい。

>>402
Moz(FF)が、あまりにもセキュリティセキュリティ言うから、
その当てつけで6の穴ふさいだだけのものが出るんじゃないかな。

今cssでのレイアウトについて勉強してるんですが、float等によるレイアウトとtableによるレイアウトどちらが主流なのでしょうか？
どちらを使うべきでしょう？

>>407
意味分かってる？

どちらを使うべきかと聞かれたら、
前者としか言いようがない。
このスレ的には。

妥当なところでテーブルだろうな

主流なのはtableレイアウトだがね

↓W3C信者が一言

フロートのレイアウトは難しいよ
テーブルが楽、などなどの理由でテーブルが主流
若い人はフロートがんがれ。

イチゴフロート　好き　　　ｷｬｯ

テーブルが楽というのは、時間的に早く制作できるということでしょうか？
思いどおりにレイアウトできるということでしょうか？
簡単ということでしょうか？

実際webデザインを職業としている方々はfloat、position等はあまり使っていないのでしょうか？

デザインを職業とWebを職業では違うからねぇ

テーブルは表なんだよ。レイアウト用ではないっての。以上。

一般に言及されているテーブルレイアウトの欠点を、適当にピックアップ。

- 人間がテーブルレイアウトを実現するにはマークアップが困難。ソースが難解。
- 他人が再編集するのは困難。本人でも、飽きたレイアウトを組み直す作業は面倒。
- 本文とは関係のないレイアウトの再編集ばかりにコストを消費し、生産性を落とす。
- レイアウト情報が各HTML文書に内包するので、ソースが肥大化する要因になる。
- 逐次表示が難しい（表のデータをすべて読み込まないとレンダリングを開始できない）。
- ある一定の画面環境のユーザーしか、レイアウトの恩恵を得ることができない。
- 印刷出力、小型情報機器などの、個別のデバイスに適したレイアウトを提供できない。
- 代替スタイルシートのように、ユーザーの趣向に合わせたレイアウトを提供できない。
- ソース文書上の構造順序と、整形上におけるレイアウトの位置情報を分離できない。
- 非視覚メディアのユーザーにとっては、2次元的な表の構造を理解するのは非常に困難。
- ユーザースタイルシートで、個人的あるいは技術的な不都合を調整するのが困難。

だからといって、現状の CSS2 のレイアウト手法が万能ではないのは確か。

CSS3で飾り枠専用の属性を追加すればかなり助かる :b:aだと限界がある…

テーブルが主流っていうのは脳タリンで古いものにしがみついてる人。
テーブルレイアウトは減る一方。

「減っている」と「主流」はちげーよバーカ

主流はphotoshopだな
見栄えが良くて数稼げる
HTMLなんぞ知らなくてもOK

>>421
お前が馬鹿だろ。
減る一方なもの「主流」だと推すのは脳タリンで古いものにしがみついてる人。

>>420
テーブルレイアウト減ってるようには思えないんだが
どこで調べたの減る一方って。

テーブルレイアウト…InternetExplorer
CSSレイアウト…FireFox
ってカンジぃ？　みたいな〜。

まつたく・・・

主流だろうが傍流だろうがどっちでもいいではないか。
>>418とかCSSの欠点考えてやりたいようにやれや。

スレ違いも甚だしい

物理的なレイアウトの維持を最優先事項と考える観念は捨てよ。
思考の論理をマークアップし、その表現方法を CSS で具現化せよ。
WWW は流動的な漠然として世界であり、論理が唯一普遍である。

シーエスエスでバックグランドイメージを書くときに、ミームが必要ないのはなんでだろう？
{
background-image: url(URL) type("images/jpeg");
}
の方がすっきりするきがする。

>>427
>>418 は >>407 の質問に対するある種の回答だろう。スレ違いか？

>>429
MIMEタイプのことか。そんなのHTTPヘッダで判るだろう。
余計な記述が増えただけで、どこが「すっきり」なのよ。

>>429
それと、拡張子なしのURLにして「コンテント・ゴシエーション」で
UA が適切なリソースを選べるように設定した方が柔軟だと思わんか？
実際に W3C ではリソースの永続性を保つために、そう設定している。

CSS側でMIMEタイプを指定しても煩雑になるだけで、メリットないよ。

脱字訂正。
× コンテント・ゴシエーション
○ コンテント・ネゴシエーション

間違えるなら最初から書くな。　聞きかじり丸見えだ。

ゴーストネゴシエーターを思い出した。

大まかなレイアウトはテーブルがいいと思うな。
CSSにレイアウト用の要素がないのが痛い。
スレ違いだけど。

とりあえずtable推してる奴はこのスレで教える立場にない事は確か

>>430
>>427をよく読め

※ 議論はよそで ※

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

<a style="font-size:200%; line-height:1em; border:1px solid; padding:0em;">
qあwせdrftgyふじこlp；＠ qあwせdrftgyふじこlp；＠ qあwせdrftgyふじこlp；＠
</span>


a spanなどの非置換インライン要素のボーダーについてなのですが
MacのGeckoブラウザだと、ボーダーが次の行のど真ん中を横切ります。
(Win IE6でもすこしはみ出します)
(MacのFirefox1.0/Camino0.8/Mozilla1.8a6で確認しますた)

「非置換インライン要素の高さはline-heightで決まる。
だから、line-heightが1emでパディングが0のとき
ボーダー下辺は次の行のボーダー上辺とほぼ重なる」
はずだと思っていたんですが、もしかしてバグですか？

3週間過去ログ探してもどうしても見つけられませんでした。
再投稿スミマセン。
ポインタだけでも教えていただけないでしょうか＞えらいひと

>>433
脱字だけで「聞きかじり丸見え」って決め付けるかね。
単なる入力ミスでしょ。藻前は絶対にミスしないのか。

誰も気にしてないことを・・・　顔を赤くして・・・

バカは相手にしなくてもいいらしいよ☆ >440

(　´Α｀)つ　ttp://sugiue-t.s3.x-beat.com/cgi-bin/uploader/source/up6802.jpg

>>443
うける

>>439
>非置換インライン要素の高さはline-heightで決まる。だから、line-heightが1emでパディングが0のときボーダー下辺は次の行のボーダー上辺とほぼ重なる

font-size ＝ line-height であれば、非置換インライン要素の高さは、グリフ（字形）の高さと等しくなる。
各周辺領域は「非置換インラインボックスの高さの計算」に影響しないので、隣接する行へはみ出ることになる。

特に欧文フォントである場合は、アセンダやディセンダの都合で隣接する行に大幅にはみ出すことが多い。
例えば、アクセント記号付きのラテン文字（Á）を含む場合、キャップラインよりアセンダが高くなる。

ちなみにCSS2仕様では、非置換インラインボックスの内容辺の高さの決定について、明確化されていない。

『CSS2 勧告邦訳 10.8.1 行間と半行間（Leading and half-leading）』を参照。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#line-height

漢字とカタカナばっか　　　嫁ねぇ

>>446
http://white.jpg-gif.net/bbsx/10/img/124214.jpg

>439
前スレで見たときに自分もいろいろ試してみたが
Macのネスケなんかはfont-family:monospace;以外の指定をしていると
fontの高さの基準が違うように思う
背景色つけるとわかりやすいが文字自体がやや上気味になる

あとfont-sizeとline-heightを別々に指定してみ

いろいろみたのですが、わからないので質問します。
overflow:auto;をしたいのですが、Mac Safariで、スクロールしてくれません。
macIE、winIEではスクロールしました。
ttp://1st-q.jpn.org/sourceup/img/up0002.css

<div class="entry" id="ent1">
<div class="file"><img src="./img/xx.gif"></span></div>
<div class="comment">改行<br>改行<br>改行<br>改行<br>改行<br>改行</div>
<div class="color">--------------------------------</div>
</div>

commentの部分をスクロールしたい。
でも、横スクロールはだしたくない。
winIEで確認したところ、できました。

問題はMacSafariでまったくスクロールバーがでないことです。
必要ないときはスクロールしたくないのでautoでやりたいです。


原因がわかるかた、お願いします。

position:absoluteでレイアウトしたものは絶対指定だからセンタリングなんてできないんですよね？

photoshopのcssってposition:absoluteでしかレイアウトしてくれないんです。
floatでやり直してセンタリングするしかないですか？

なんとかできないかなと思ってるんですが、方法があるなら教えてください。

>>449
>.entry .comment {
...
overflow:auto;
}
auto の値は基本的にブラウザの初期値なので誤差が出る
><div class="comment">改行<br>改行<br>改行<br>改行<br>改行<br>改行</div>
の内容だけに合わせると "height: 7em;" で理想の視覚的効果は得られるはず。
基本的に、テキストを包含するモノの heigh の値に px 単位を用いる事は×
観覧者が同じフォントサイズで見ているとは限らない

loose.dtdなんですが、
ブロック要素で、width:100%にしてmarginなりpaddingなり、borderなりを指定すると、
横幅が100%+marginなりの幅になりますよね。
これを、合わせて100%にする方法はありますか？

>>450

<html>
<head>
<style type="text/css">
<!--
#back-container {
position: absolute;
top: 20px;
left: 0;
height: 200px;
width: 100%;
background-color: yellow;
}
#inner {
height: 200px;
width: 200px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
-->
</style>
</head>
<body>
<div id="back-container">
<div id="inner">#inner</div>
</div>
</body>
</html>

>>451
ありがとうございます。
emについて、勉強してみます。

あくまでその改行の文は例なのですが
ご指摘どおりに直してみましたが、やはりスクロールがでないので
文章がみれませんでした。

なにか方法はないでしょうか？

>>453
そういう意味じゃないんですよ。

photoshopでデザインした画像をhtmlとcss化するとdivをpositionで絶対指定したソースができるんです。


絶対指定の中の子供をセンタリングするんじゃなくて、
絶対指定そのものをセンタリングしたいんですが方法はないでしょうか？
floatでやり直すしかないですか？

>>455
ソースを晒す

>>456

<html>
<head>
<style type="text/css">
<!--
.title {
position: absolute;
left: 0px;
top: 0px;
height: 100px;
width: 100px;
}
.main {
position: absolute;
left: 0px;
top: 101px;
height:100px;
width: 100px;
}
-->
</style>
</head>
<body>
<div class="title">title</div>
<div class="main">main</div>
</body>
</html>

↑↑このページをセンタリングするには、
floatでレイアウトしなおす以外ないでしょうか？

センタリングしたいのに絶対座標指定ってありえないべ

>>450
よく分からないんだが、手作業でCSSを修正することは出来ないの？

とりあえず、cssでレイアウトするなら
手打ちでしましょう。ソフトは糞です。

>>452
横幅100%消してauto

>>457
> ↑↑このページをセンタリングするには、
floatでレイアウトしなおす以外ないでしょうか？
いまいち訳が解らないんだけど、 .title → .main の立て並びなら
body {
margin: 0;
}
.title {
background-color: blue;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
}
.main {
background-color: green;
margin-top: 1px;
margin-left: auto;
margin-right: auto;
height:100px;
width: 100px;
}
でいいんじゃないの

「絶対配置を使って」が条件なんじゃないの？

見出しとして画像を使用したいのですが、下の方法のうちどれが適切でしょうか
（3つとも本に紹介されていました）
もっと良い方法がありましたら教えて下さい

1.見出し要素の中に画像を入れalt属性で内容を指定する
2.cssの背景で画像を指定し、見出し要素のテキストをcssで{display:none}にするor非可視エリアに飛ばす
3.配置でテキストの上に画像を重ねる

1.は「見出しの中に画像を入れる」ことは妥当か疑問です
2.は画像の表示をオフにしている人（少ないでしょうが）は見えないですよね
3.は中身のない<span>を使っているので（下ソース）いいのかな？と思っています。

.heder{
width: 185px;
height: 49px;
font-size: 12px;
position: relative;
}
.heder span{
background: url("header.gif") no-repeat;
width: 100%;
heght: 100%;
position: absolute;
}

<h1 class="header"><span></span>タイトル</h1>

3.は中身のないを使っているので（下ソース）いいのかな？と思っています。

　　空の<span>がなぜ良いのか説明してくれ。

>>465
いや、中身のない<span>使ってもいいのかな？駄目なんじゃないの？の意味です。
紛らわしくてすみません。

hnは文字が基本。画像のみでは無いのと同じ。
文字で書いて、背景に画像でやりましょう。

>>464
市販の制作本を鵜呑みで作ると、悲惨なことになるから
先ずは基本に忠実に作ったほうがいいよ。
ここが参考になるよ。
　http://kanzaki.com/docs/htminfo.html#simple-html

>>457

<html>
<head>
<style type="text/css">
<!--
.title {
position: absolute;
left: -50px;top: 0px;
height: 100px;width: 100px;
}
.main {
position: absolute;
left: -50px;top: 101px;
height:100px;width: 100px;
}
.container
{
margin-left: auto;margin-right: auto;
position: relative;width:0px;
}
-->
</style>
</head>
<body style="text-align:center;">
<div class="container">
<div class="title">title</div>
<div class="main">main</div>
</div>
</body>
</html>

>>467
XHTMLとCSSの本で紹介されていたのですがやはり駄目なのですね
疑問が解消させてスッキリしました
ありがとうございます
3の方法も見出し要素に直接画像を使わない苦肉の策なのでしょうか
ロゴが既に決まっているのでテキストでは表現しきれずに困っています

>>468
製作本だけを参考にしないほうが良いのですね
一応スタイルブック系の本を2冊、辞典系の本を4冊読み
こちらのスレやご紹介いただいたサイトなども参考にしています
個人で製作している訳ではないので（web製作したことない人が口出ししてくる）基本だけで作ることができずいろいろな方法を探しています
悲惨なことにならない為にももう一度よく調べてみます
ありがとうございます

470
疑問が解消できて
の間違いです
すみません

がんがれ

>>464
別に、h1要素の子要素として img が入るのは、HTMLとしては別に invalid なことではない。

何について妥当かどうかを問題にしてるのかが、いまいちよくわからんのだけども
(というかCSSではなくてHTMLとしての問題ではないのか?)、
3. の空の span が問題だなという程度で、あとは、どういう画像をどういう意味で使うか
次第ではないのかと思う。

検索ロボットも考慮してるのかも・・・

こういう肝っ玉の小さいことを必死に考えているようでは、未熟。
そのうちどんな糞ソース書いても軒並みPR↑検索上位の時代が来る。
まともなサイトなら

>>469

すごい！できてる！

しかし {left: -50px}してあるのはなぜなんでしょう？
よくわかりません。よかったらおしえてもらえませんか？

よくないので教えません。。。

>>476
ｵﾏｲはなんでそんなにｱﾎなんだ？

もうやだ。
テーブルレイアウト脱却のために
float:left;しても隣の要素と段差が出来ちゃうよ
つд｀ﾟ

そうですか。

FLOATしてないほうのブロックの
一番最初の要素の上マージンを見直してみるべし

質問とちゃうでぇ。

一々人に訊いていないで、仕様書なり、レファレンスなりを読んで
確りと仕組みを理解した方が色々と応用が効くわけだが、初心書は読まない。

ほとんどの初心者は玄人に成らない。成る必要もないと考えている。
だから自称初心者の多くは努力しない。なんでも人任せで済ませる。
質問掲示板なんかに来る初心者なんて、そもそも碌な連中じゃない。

碌に勉強もせずに直ぐに諦めて「〜はこんなことも出来ない」と嘆いてみせる。
真面目に学ぶつもりがないのなら、テーブルレイアウトなり何なり続ければいい。

つまらない自己主張を質問スレに書くのも碌な奴じゃない。

>>476
　　　　　　　　　真中のここが原点（left:0がここ）　
　　　　　　　　　　　　　　↓
─────────＋──────┬──
　　　　　　　　　　　　　　│　　　title 　　　│
　　　　　　　　　　　　　　│　　　　　　　　　│
　　　　　　　　　　　　　　└──────┘
　　　　　　　　　　　　　　│←　100px →　│

左に50px（left:-50px）ずらすと真中にくる。

上の段差はなくなった！

でもfloatさせた要素の下辺で、隣に持ってきた要素内のテキストがガタつく・・・が、
>>7のサイトもそうなってるから、しかたのないことだと見た！

とにかく、出来た。原因は隣にもってきた要素のmarginがmarign になってただけだった。
一人で泣き入れてごめんよう

仕様書読んでるやつってキモい

>>486
それはIEのバグだから仕方ない。
隣に持ってくる要素の横幅が決まっているのなら、
それもfloat:leftをさせるとうまくいく。

そのキモいのに助けられていい気になるのもいいだろう

>>488
あ　り　が　と　う　！
あとは何とかできそうだー

>>469
>>453と結果としては同じことだし>>462の方がスマート
ただ>>457の無知な我がままなだけ

>>491
綺麗、汚いでなく、photoshopで出したソース（絶対配置）を最小の
修正でセンタリングするのにはどうすれば効率がいいか？

という質問だと思ったのですが。

>>491
人の話聞けよHAGE

"CSS 2.1CR section. 10.3.5" を翻訳してみたけど，どうよ？
http://www.w3.org/TR/CSS21/visudet.html#q7
ウェブ上の翻訳サービスを使って調べた程度なので，多分いい加減。
英語が堪能な人，適切に翻訳できているかどうか，確認してくれない？

以前に width: auto; のフロート云々で揉めたじゃない。
だからさ，これを推敲してFAQサイトに掲載してみたらどうよ。

<!-- 翻訳文の開始 -->
<p>'margin-left' または 'margin-right' の算出値が 'auto' ならば，その値には '0' を用いる。</p>
<p>'width' の算出値が 'auto' ならば，その値には "shrink-to-fit" width（内容に合わせて縮めた幅）を用いる。</p>
<p>shrink-to-fit width の計算は，自動テーブルレイアウトアルゴリズムを使用しているテーブルのセル幅の計算と類似している。
概略：明確に行区切りが起こる場所以外では行を区切らずに，内容を整形化することによって望ましい幅を計算する。次に，望ましい<em>最小限</em>の幅を（たとえば，可能な限りの行区切りを試みて）計算する。
CSS2.1 では，正確なアルゴリズムを定めない。
最後に，<em>利用可能な幅</em>を見つける。その計算は，包含ブロックの幅から 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right' と関連したスクロールバーの幅を差し引いて求める。</p>
<p>shrink-to-fit width は次のように算出する： 最小( 最大(望ましい最小限の幅, 利用可能な幅), 望ましい幅).</p>
<!-- 翻訳文の終了 -->

参考：
・「width: auto のフロート」
　http://altba.com/bakera/hatomaru.aspx/ebi/topic/472
・width 明示なしのブロック要素を float
　http://www.remus.dti.ne.jp/%7Ea-satomi/nikki/tmp/floattest/float_not-specified-width.html

<body>
<div id="header">
</div>
<div id="contentsbox">
　<div id="menubox">
　</div>
　<div id="mainbox">
　</div>
</div>
<div id="footer">
</div>
</body>

#header { margin: 0; padding: 0; display: block; position: relative; height: 110px; }
#contentsbox { clear: both; margin: 0; padding: 0; }
#mainbox { margin-left: 197px; padding: 0; display: block; height: 100%;}
#menubox { margin: 0; padding: 0; display: block; width: 196px; float: left; }
#footer { margin: 0; padding: 0; display: block; height: 74px; clear: both; }

試行錯誤の末、以上のソースでのレイアウトを行っています。
WindowsIEにおいて、mainbox内にブラウザウインドウサイズ以上の画像等が入ると、
mainboxの回り込みが解除されてmenuboxの下にガクンと下がってしまいます。
FireFox等ではおこりません。
どうしてもこの問題がクリアできません。
どなたか、対処法をご助言いただけませんでしょうか<(_ _)>

>>485
原点が中心にくるからwidthの半分を-することによって中心にくるってことですよね。
ありがとうございます。

スクロールしても動かないボックスをIEで実現するのは不可能でしょうか？

それ、すんごく邪魔じゃね？

たとえば左端か右端かにスペース空けて
そこに動かないボックスを置くとかなら邪魔とは思わない場合もあると思う。
しかしIEで実現しようとなるとスクリプト使うしかないんじゃないかな。
あるいはIEの独自拡張のexpressionとか。

3カラムのレイアウトで、
例えば左側を幅100px、右側を幅150px、中央を出来る限りの幅にってするのはCSSではかなり難しいですよね？
両側を position:absolute で頑張ればなんとか、幅は合うのですが、高さを合わせるのが至難の技です。
どうすればこのレイアウトをエレガントに出来ますか？
正直現時点ではＣＳＳでこのようなレイアウトをするのは現実的じゃないのでしょうか？

>>500
まず、左右に分ける。
<div id="AAAAA">左</div>
<div id="BBBBB">中</div>

このとき、
div#AAAAA{
width: 100px;
float: left;
}
div#BBBBB{
margin-left: 100px;
}

次にBBBBBの中で右ブロックを作る
<div id="AAAAA">左</div>
<div id="BBBBB">
中
    <div id="CCCCC">右</div>
</div>

ここで、
div#CCCCC{
width: 150px;
float: right;
}

とする。こうすると、漏れの脳内レンダリングではうまくいくはずなんだが、いかがか。

あ。
「中」のところを、
<div id="AAAAA">左</div>
<div id="BBBBB">
    <div id="DDDDD">中</div>
    <div id="CCCCC">右</div>
</div>

として、
div#DDDDD{
margin-right: 150px;
}

とすべきかな。

ご回答ありがとうございます。
俺も今、
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
を見て、それと同様のことを試していたのですが、
IEでしか確認していないのですが、右のパネルが下に表示されてしまうようです。

>>503
万人にわかるように。

あと、今更で申し訳ないけど、
出てくる順序にこだわりが無ければ。

<div id="aaa">左</div>
<div id="bbb">右</div>
としておいて、それぞれフロート左右して幅を固定すれば、
残りは真ん中のあいた空間に流れ込むな、たぶん。

opera.com参考汁

CSSで出来ないことなんてない。出来ないというやつはそいつが出来ないだけ。
旧ブラウザの対応が難しいだけで、今の主要ブラウザなら他でやれることはCSSでも出来る。

嘘つけ厨房

>>503
テーブル使えば5分でできるのに。
しかも全ブラウザー対応。

すみません。実際に書いたhtmlを挙げてませんでした。
この場合だと右側のカラム(さっきはパネルと書いてしまったが；)が下に表示されてしまうのですが、
なんとかならないでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<style type="text/css">
body{background-color:#666666; text-align:center}
div.main_panel{background-color:#FFFFFF; width:70%; margin-left:auto; margin-right:auto; text-align:justify}
div.left_panel{background-color:#CFCFFF; float:left; width:100px}
div.center_right_basi_panel{background-color:#FF0000; margin-left:100px}
div.center_panel{background-color:#00FF00; margin-right:150px}
div.right_panel{background-color:#CFFFCF; float:right; width:150px;}
</style>
</head>
<body>

漏れのLynxにも対応できますか？

時代遅れのtable厨はさっさとこのスレから出ていってくださいな

<div class="main_panel">
<div class="left_panel">
left_panel!
</div><!-- end left_panel -->

<div class="center_right_basi_panel">
<div class="center_panel">
center_panel!
</div><!-- end center_panel -->

<div class="right_panel">
right_panel!
</div><!-- end right_panel -->
</div><!-- end center_right_basi_panel -->
</div><!-- end main_panel -->


<br><br><br><br><br>
<!-- テーブルの場合のサンプル -->
<table style="width:70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width:100px; background-color:#CFCFFF;">left_panel!</td>
<td style=" background-color:#00FF00;">center_panel!</td>
<td style="width:150px; background-color:#CFFFCF;">right_panel!</td>
</tr>

</body>
</html>

>>513
width: 70%;

をちゃんと計算しなきゃいかんだろうな、たぶん。
相変わらず脳内レンダリングなんだけど。

とりあえず、いきなりあれこれやろうとせずに、
できるところからやっていって、
少しずつ装飾を足していけばいいんじゃないのかな。
色とか、後ででいいじゃん。

>>509
> しかも全ブラウザー対応。
けいたいでんわで　いんたーねっと　を　するときに
つかってるのは　ぶらうざ　じゃないのですか？

テーブル厨馬鹿丸出し→>>509

色付けは、実際表示させてみて分かりやすくしてるだけです。
配色はテキトーです。

width: 70% の部分はpx指定にしてもだめでした。

正直、 position:absolute を使わなければ出来ないレイアウトなら、
一つのHTMLで携帯対応までしないのであれば、現時点では Table レイアウトもありなのかなと思ってしまいます。
CSS3 Module:Multi-Column Layout とかのような追加仕様がない限りは……。

泣き言いうなら最初から手を出さなきゃいいのにｗ
テーブルレイアウトしさえすれば
携帯にとってすばらしいデザインになるわけでもないでしょう
>一つのHTMLで
大体あんた携帯コンテンツをわかってなさげ。

>>518
全くその通り。
CSSはレイアウト用の要素がない。
CSS3が出るまでテーブルレイアウトをするのが本道。
テーブルならshrink to fit もちゃんとしている。

floatによる対処療法は余分（余計な？）な知識が必要で、しかも
CSS3が出たら、いらなくなる知識が多い。

装飾や単純なレイアウトなら現状のCSSでOK。

いあ、確かに携帯コンテンツなんて作ったことありません、すみません；
519さんが携帯コンテンツを例に挙げていたので、てっきりそっちの現場はそういうことしてるのかと；

516だ；たびたびすみません；

どこがその通りなんだか。更に馬鹿な発言になってて内容に突っ込む気もしない。

>>521
携帯にも対応しようとしてるページを携帯で実際にみてみたら？
>一つのHTMLで
いかに無茶なことをいってるかわかる。

>>521
挙げてない。519が最初の発言

ブログサイトでよくある左にメニュー、右に日記というのを作ろうと思い、いろいろいじくっているのですが、うまくいきません。
何処が悪いのでしょうか。

<HTML>

<div id="container">
<p>container</p>
<div id="left">
<p>left</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>

<css>

body {
margin:0px;
padding:0px;
background-color: #000000;
}
#container {
width:480px;
margin:0px;
padding:0px;
background-color: #FFFFFF;
}
#left {
width:200px;
height:150px;
margin:10px;
padding:0px;
float:left;
background-color: red;
}
#right {
width:200px;
height:150px;
margin:10px;
padding:0px;
float:left;
background-color: blue;
}

ie6とfirefox1.0で確認しているのですが表示の仕方が違います。
ie6の表示の仕方を希望しているのですが。。

全部

>>528
と、いいますと。。？

あの、一応試しでやってますので実際に作るのはもっと違ったｃｓｓとHTMLになる予定です。
はい。。

>>518
難しく考えすぎだよ。
とりあえず書いてみた。

＃スタイルシート
div#content{
margin: 0px 15%;
}

div#AAAAA{
width: 100px;
float: left;
background-color: #ffe6e6;
}

div#CCCCC{
width: 150px;
float: right;
background-color: #e6ffe6;
}

div#BBBBB{
margin: 0px 150px 0px 100px;
background-color: #e6e6ff;
}
※「content」のブロックはbodyでヤルのが本筋なんだろうけど、
　MSIE対策として。

>>530の続き
＃html

<body>
<div id="content">

<div id="AAAAA">
<h2>左左左左左</h2>
<p>本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。</p>
</div>

<div id="CCCCC">
<h2>右右右右右</h2>
<p>本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。</p>
</div>

<div id="BBBBB">
<h2>中中中中中</h2>
<p>本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。</p>
</div>

</div>
</body>

>>526
たぶんMovable Typeをいじっているのだろうけど。
MTの吐くhtmlって結構変というか、遠回りなコトやっているので、
それに併せてスタイルシートいじっていると大変。
できるならテンプレ書き直した方がいいよ（漏れはそうした）。

とりあえず、container のブロックは全体をくくっているだけなので放置しておいて。
left{
width: 200px;
float: left;
}
right{
margin-left: 200px;
}

が基本。rightについては、
right{
margin-right: 0px;
float: left;
}

とすることもあります（MSIE対策として）。
あとはちょこちょこいじっていけばいいよ。
がんがれ。

>>532
へたれなんで最初よく解らなかったですが、いまやっと解りました。
考え方がちょっとおかしかったですねorz
めちゃめちゃ助かりましたです。
ありがとう！がんばりますです！

あと、Movable Typeではなく自分でMovable Typeモドキなプログラムを作ってまして、それのんなんです。

xhtmlとcssでwebページを作って見た。
mozillaで確認しながらしこしこと。
今日、そのページをIEで見たら、
メニューすらうまく表示されてなかった。
マイクロソフトさんが、メディアのイ
ンタビューとかでもじらよりIEが優れているみたいな
ことを言ってたので、もじらで表示できてれば、IEで
も見られるだろう、と。しかし、どういうことだ？
主に原因はなんなのでしょうか？

その質問の仕方から想像するに
原因はおまいの頭だ。

501さんありがとうございます。
float: right を使うときはHTML上では順番を逆にしたのですね；
勉強になりました。
これくらい楽に書けると table レイアウトはあまり必要なさそうですね。

>>536
さらにそのボックスの中でfloatを使うと崩れるという次の問題があったりするが。

>>496
馬鹿は引っ込んどけ
ウザイ

ヘッダー
-------------------------------
メニュー｜サブメニュー｜コンテンツ
-------------------------------
フッター

という構成なのですが
float:leftで指定していて、左右にマージンをとると
レイアウトが崩れてしまいます。
マージンをはずすと正常に戻るのですが
floatでレイアウトするときはマージンは取れないのでしょうか。
下記がそのファイルです。

http://puchipu.fc2web.com/
http://puchipu.fc2web.com/style.css

ヘッダー
-------------------------------
メニュー｜コンテンツ｜ サブメニュー
-------------------------------
フッター

でした。すいません。

やりたいことがようつかめないが
マークアップの順番は
ヘッダ→メニュー→サブメニュー→コンテンツ→フッタ
にして、スタイルシートは
メニューにfloat: left;、サブメニューにfloat: right;、
コンテンツにメニューとサブメニュー分のマージンを指定すれば
いいとおもうが。

全体の左右のマージンをとりたいのなら
bodyのpaddingで調整するよろし

>>541
全体の左右のマージンをとりたかったのです。
bodyのpaddingでできました。本当にありがとうございます。

.header{
background-color:#999999;
}

<div class="header">aaaaa</div>

この場合ちゃんと背景#999999となるのですが、<div></div>この間に
コメントを入れようと<!--ほにゃららら-->とすると指定が解除されるようです。
div外に入れれば問題ないので別に良いのですがこれは仕様ですか？

大丈夫だと思ったんですが、</div>の下の行に入れてみると
表示全て消えてしまいました、以前はこんなこと無かったんだけど…何だこれ。

>>543
Validatorにかけてみることをおすすめする。

>>545
>>4にあるCSS検証サービスというのをやってみましたが、出たのは
行番号 : 23 font-family: 一般フォントファミリー名(generic font family)を最後の選択肢として
付け加えておく事を推奨します
だけでした、付け加えましたが問題の解決にはなりませんでした。
後、HTMLクイックチェッカというのも試してみましたが特に何もありませんでした。

body内を問題の起こっている最低限の記述にしてみると、問題は解決しました
うーん、よくわかりませんがもう一度最初から見直してみます。有難う御座いました。

HTMLの方もヤレ

ttp://syobon.com/upload/src/syobon19805.zip.html
2つのhtmlファイルがあります。
2つの違いは、div.outer の指定があるかないかです。

2つのファイルを Firefox0.8 と IE5.5 でそれぞれ開いて画面を見比べてみると、
Firefox0.8 では1px（borderがある分）だけ画面がずれるのに対して、
IE5.5ではもっと大きくずれてしまいます。
これはブラウザの仕様なのでしょうか？

IEの方では、div.inner1 と div.inner2 の境目あたりが
背景色になってしまうことがあって、非常に格好悪く見えてしまいます。

最後の2行は文では説明しづらいので、
「境目あたりが背景色になってしまう」ときの画像をいれてあげ直しました。
ttp://syobon.com/upload/src/syobon19811.zip.html

>>498
>>499
499さんのおっしゃってるようなボックスを作ろうと思っています。
やっぱスクリプト弄らないとダメっぽいですね…
ありがとうございます。参考になりました。

>>445
>>448

本当にありがとう。
遅くなったけど、教えてもらった先をいろいろ読んで、いろいろ試してみて、
ようやっと理解がすすんできました。


>ちなみにCSS2仕様では、非置換インラインボックスの内容辺の高さの決定について、明確化されていない。

なるほど。
内容辺の高さはUA依存、当然、ボーダーなど周辺領域の位置もUA依存。

現状では「確実にはみだしを防止」する方法はなく、
line-heightを多めにとっておこうという予防策しかないんですね。

マックのネスケ・Geckoのバグじゃないかと思ってたけど、
そんなことないんだな。

これからはline-heightの値を多めにとるようにします。

>Macのネスケなんかはfont-family:monospace;以外の指定をしていると
>fontの高さの基準が違うように思う

これ、すごく役立ちました。
他の環境での間延び (line-heightが大きすぎることによる) を防ぎつつ、
Macでのボーダーはみだしを抑制することができます。
ばんざい


#今後のCSSではどうなるんだろう？勉強します。

>>551
#今後のCSSではどうなるんだろう？
http://www.w3.org/TR/css3-linebox/

今後って・・・資料が古い

>>553
(ﾟДﾟ)ﾊｧ? 何が古いって？

>>550
そういうのがやりたいならフレーム使ったほうがいいんじゃないか？
ボックスがウインドウはみだしたらはみ出した部分がみえないじゃん。

>>555
なるほど！簡単なコトでしたね…
CSSのことばかりに目がいって気付きませんでした。
ありがとうございます。目が覚めました。

まだフレームなんて使おうという制作者いたのか。
小学生が作ったようなサイトでしか最近みないんだが

>>524
ちょっと待って。俺は>>516だが、
携帯対応のページは作れるよ。
まあ、そこそこ新しい機種のみだけどね。

・1ページのファイルサイズが携帯電話の限界を超えない
・サイトに使う画像はそれぞれ携帯電話の限界を超えなくて、JPG
・見栄え用の画像はCSS
・テーブルは無理やりDL要素
・「図1」のような使い方をする画像の場合、
　リンクとし、そのA要素にIDを与え、サイズを指定し、
　背景画像にその参照先の画像を置く（CSS有効で画像、CSS無効でリンクになるように）
・media属性で、screen,tvのみにCSSを適応

これを厳守。
まあ、これをやる労力が果たして見合うものなのか、ってのは別だけど、
あくまでも趣味で作ってみた。企業のサイトだから晒せないけれど。

>>558
待つのはあんただ。
それはようするに携帯用コンテンツだろ。
>１つのHTMLで
からすでに外れてる。

>>558
>サイトに使う画像はそれぞれ携帯電話の限界を超えなくて、JPG
JPEG, PNG, GIF の3つのバージョンを用意しておいて、
コンテントネゴシエーションで端末ごとに振り分ける。

>テーブルは無理やりDL要素
単純なテーブルなら表示できるのだが。

>media属性で、screen,tvのみにCSSを適応
フルブラウザは screen も対応しているが、
携帯端末は一般に handheld か tty だろう。

---
携帯端末に Opera のような高度なフルブラウザが一般的に搭載されれば、
将来的には XHTML Basic + CSS Mobile Profile の組み合わせで、
PC と携帯端末の両方で閲覧できるようにウェブページを設計できるはず。

>>558
・つい最近の機種でもi-modeなんかはJPGが使えない場合があるので、GIF推奨。

--

結局、携帯端末のブラウザスタイルシート（実際そういう仕組みになっているか
どうかは別として）でdl要素のdtとddが区別つくように表示されてくれるから
そのような発想になるわけで、table同様に見栄えゼロなら、dlで代替しようとは
考えないでしょ。
このような見栄えの問題でhtmlの記述を変えるってのは結局、bやiやfont使うのと
根っこは同じじゃん。だったらいっそのことはじめから物理マーｋ


ごめん、スレ違いだ。次の質問ﾄﾞｿﾞｰ

>>551
インラインボックスのボーダーとかは明確になっとる。
フォントサイズの示す矩形が内容辺となり、
パディング領域、ボーダー領域が外接する。

理論的には、font-size+上下パディング+上下ボーダーの値より
line-heightが大きければボーダーが重なることはない。

フレームと同等の効果のものは
まだHTMLとCSSだけじゃ実現できないのに
偉そうですね>>557

>>563
しょうがくせい？
しーえすえすはボクにははやいよ

今時フレームて（ﾌﾟ

なかなか食いつきがいいですね
ここの堀は餌少なめですか？

質問です。
外部スタイルシートを使用しているのですが、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<title></title>
<script language="javascript">
<!--
function navi(obj) {
url = obj.options[obj.selectedIndex].value;
if(url != "") {
parent.location.href = url;
}
}
//-->
</script>
<BASE target="_top">
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>ジャンル：<!--genre--><BR>
･
<外部スタイルシートで背景が黒になるように指定してます>
body {
　　　　 background-color:#000000;
}
これで反映されない理由は何なんでしょうか？
style.cssは同じ階層に有ります。直接アドレスを入力しても反映されないのです。
どうしたらいいでしょうか？

>549が消えてしまったので、もう一度だけあげてみます。
ttp://www.42ch.net/UploaderSmall/source/1109074561.zip

しかたなく、body の padding をいじってみました。
ひとまず解決したものの、根本的には改善しないようです。

>>567
バスが間違っているとか。
<a href="style.css">スタイルシート見えるかな？</a>
（パスはlink要素のhref属性と同じに）

ってして、ちゃんとリンク繋がる？

>>562
>フォントサイズの示す矩形が内容辺となり、

CSS2 では 'font-size' と 'line-height' の差が行間である、
ということになっているけど、実は CSS2.1 の定義では違う。
この変更は CSS3 における再定義と実際の実装を反映したものだ。

CSS2.1 10.8.1 Leading and half-leading
>The difference between the content height and the used value of 'line-height' is called the leading.
content height と line-height の差が行間であると変更されている。

それでは non-replaced element の content height の定義は、
定義されているかというと、CSS2.1仕様では未定義になっている。

CSS2.1 10.6.1 Inline, non-replaced elements
>The 'height' property doesn't apply. The height of the content area should be based on the font, but this specification does not specify how.
>A UA may, e.g., use the em-box or the maximum ascender and descender of the font.

これは、CSS3 ではlineモジュールの 'text-height' property で使い分けが出来る。

Divボックスの右下に文字を配置したいのですが、どうすれば良いのでしょうか？
右寄せは　text-align: right;　と解るのですが
下寄せが分かりません。　教えてください

>>571
vertical-align:text-bottom

>>570
そーだったのか。おれのcss2の知識は
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x41
の時点で停止しとったよ。

>>571
ブロック下辺にそろえるプロパティは無い。

と言うだけでは何なので。
divをposition:static以外にして、子要素作って文字を放り込んで
小要素でposition:absolute; bottom:0; right:0;
スタイルのためにhtmlいじるのはあまり推奨されないが。

>>572
適当な事言っとるな・・・

今時フレーム使ってないサイトダサい。

テーブル厨とフレーム厨勢いないな。
一年位前まで堂々と恥ずかしい意見を主張してたのにね。
今じゃ単なる知恵遅れ的存在。

イントラで使うwebアプリとかだと、役立つ場面もあるんだけどな、フレーム。
今使っている2chブラウザのp2もそうだし。
ただ、webページで効果的に使うのは難しいな。




はい、次の質問ﾄﾞｿﾞｰ

２ｃｈブラウザと比較するのはおかしい。
んなのフレームキッチンと比較してるのと同じ。

作りたい本人が自由に作ればいいじゃない。

>>578
p2はphpで稼働するhtmlベースの2chブラウザ。

>>580
フレームキッチンはとってもおしゃれ

テキストを背景画像に置き換える手法で、
テキストをtext-indentで画面外に飛ばしたいんだが、
opera7.53とmac版IE5.5だとそのまま背景画像の上にテキストが残ってしまいます。
ちなみにWinIE6.0、Firefox1.0だと消えます。

cssは
#midashi{
display:block;
width:200px;
height:40px;
text-indent:-9000em;
background:url("../img/midashi.gif") no-repeat 0 0;
}

htmlは
<h1><span id="midashi">見出し</span><h1>

みたいな感じですが、どこかおかしいですか？

display:block;

text-indent:-9000em;
これだろpxにしる

なんだかなぁ・・・

そんな裏技を駆使してまでCSSを使う意義について

>559
> それはようするに携帯用コンテンツだろ。
おいおい。あれ読んで理解できないのか？
パソコンで見たらパソコン用の見栄えが提供される、ってのが前提なんだが。

>560
> JPEG, PNG, GIF の3つのバージョンを用意しておいて、
> コンテントネゴシエーションで端末ごとに振り分ける。
今日び、JPG対応してます。

> 単純なテーブルなら表示できるのだが。
テーブルネストのハング問題で、無視するブラウザ多い。

> 携帯端末は一般に handheld か tty だろう。
携帯端末に「CSSを読ませないため」って意味だよ。

>561
> ・つい最近の機種でもi-modeなんかはJPGが使えない場合があるので、GIF推奨。
あったっけ？　機能一覧とか見た限りでは対応してると思ったが。最近、ってのが1年前も含むのならその限りではないが。
あとgif対応してない携帯ブラウザは結構ある。

> そのような発想になるわけで、table同様に見栄えゼロなら、dlで代替しようとは
> 考えないでしょ。
違うよ。「見出し」と「内容（セル）」の関係として扱ってるだけ。勝手に非論理に仕立て上げようとしないでね。

> このような見栄えの問題でhtmlの記述を変えるってのは結局、bやiやfont使うのと
見栄えの問題で、って。携帯端末がテーブル実装してないのがあるんだから。バカ？
じゃあ、どうやってテーブルを携帯電話で再現すんの？おせーて。
こういう「最近、ｽﾄﾘｸﾀｿぽくなりますた」みたいなガキが能書き垂れてると反吐が出るね。

>そんな裏技を駆使してまでCSSを使う意義について

>まあ、これをやる労力が果たして見合うものなのか、ってのは別だけど、

議論は他所で

>>587
先日購入したソニエリのpreminiはgifしか見れんぞ、
とログを見ないでｶｷｺ

探しにくいのでageてください。

captionにmarginをとりたいんだけど、
IEはじめほとんど全部対応してないみたいなんですけど
こういう場合はどうやってmarginとればいいですか？
よろしくお願いします

上の要素のmargin-bottomをとることで解決しました
お騒がせしました

>>587
>おいおい。あれ読んで理解できないのか？

お前は本当に馬鹿なんだな。作ってみろ。理想だけじゃなくて。
PCで作ったHTMLの段階から携帯では合わない内容

質問失礼します、以前もお世話になったのですがまた問題が発生しました。

わかりやすい用にアップロードしました。
http://www.rinku.zaq.ne.jp/bkdgg507/
このページなんですが、タイトル、ヘッダーまでは自分の思った通りに表示できています。
その下のコンテンツや本文、フッターで表示がずれて見えるのですがそれは何が問題なんでしょうか？

>>7にある"段落れいあうとてすと"を参考にして作成しています。

宜しくお願いします。

「ずれる」とはどういった観点からなのかを述べてくらはい

>>596
基本レイアウトとして
　ヘッダ領域　サイド領域　メイン領域　フッタ領域
の四つに分けてから、それぞれの領域に気兼ねせずに中身を入れていくようにするのはダメかい？

>>597
失礼しました。
タイトル・ヘッダー・フッターの一番左のボーダーを基準とした時に

１．コンテンツの部分がそれよりも左側にきている
２．コンテンツと一番上の本文の上側の位置
３．本文とフッターに書かれている文字がleft-borderにかぶっている

等のことを言っています。後、WindowsXP IE6.0で見ています。

>>598
はい、思っているように表示できるのでしたらそういう方法でももちろん大丈夫です。
今別のパターンで作っている最中でした、もう少し考えてみます。

>596
たしかにズレてる。

ieのfloat回りはバグ多いから大変だね。

CSS有効時のみ、装飾のためのテキストを出現させる方法はないでしょうか。
contentがそれだと思いますがIEでは未実装ですし。

displayかな？

それじゃ逆

>>603
ないです

無念。画像貼ることにします

IEって未実相だったんだ。
NNだから気がつかなかった。
緊急更新しなくちゃ！

ttp://oshare.chips.jp/
上のサイトのメニューの様にオンマウスでボックスの背景が変わる
様になるには下の通りでいいのでしょうか？

<html>
<head>
<style type="text/css">
<!--
a {
width:150px;
padding: 5px 2px 5px auto;
background-color:#e4e4e4
}
a:hover {
color:#FA8072;
background-color:#af441a;
}
-->
</style>
</head>
<body>
<a href="index.html">メニュー</a>
<a href="index.html">メニュー</a>
<a href="index.html">メニュー</a>
<a href="index.html">メニュー</a>
</body>
</html>

簡単に言うと、下のようなことをcssでやりたいのです。
上のやり方であっているのでしょうか？（結果は別として）
<table width="100%" BORDER=0 BGCOLOR="#FFFFFF" CELLSPACING=0 cellpadding="0">
<tr>
<td class="b" onClick="window.location.href='index.html'" onmouseover="this.style.backgroundColor='#dbdbdb';" onmouseout="this.style.backgroundColor=''">トップ</TD>
</tr><tr>
<td class="b" onClick="window.location.href='menu.html'" onmouseover="this.style.backgroundColor='#dbdbdb';" onmouseout="this.style.backgroundColor=''">メニュー</TD>
</tr><tr>
<td class="b" onClick="window.location.href='menu.html'" onmouseover="this.style.backgroundColor='#dbdbdb';" onmouseout="this.style.backgroundColor=''">メニュー</TD>
</tr>
</table>

いける。

あ！　ブロック入れなきゃいけませんでしたね・・・

>>609
擦れ違い

>>608
単にそのサイトのソースを見ればいいのでは？

http://oshare.chips.jp/blue_img/blue.css

>>613 がいいこと言った

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

.honbunと.footer
にpadding-left:10pxを追加

ただ、俺もヘッダ領域　サイド領域　メイン領域　フッタ領域の4つに分けたほうがいいと思うけど。

>>615
>>596 にストリクトは荷が重いと思った。

>>596
↓これとは違うけ？

http://css.maxdesign.com.au/floatutorial/tutorial0816.htm

>>617
それ系のfloat使った段組って
ttp://cssbug.at.infoseek.co.jp/detail/winie/b151.html
のバグがいまだに直ってないんだね。

>>618
↓この問題は解決されてるのかな〜？

３段組ブログサイトのレシピ。
http://o-ume8.com/junsdiary/C2058415919/E42125766/

画像にリンクをはると外枠が青くなってしまうので
スタイルートを使って外枠を消すか、色を黒に変えたいと思っています。

記述はどうすれば設定できますか？

>>620
>>8
FAQぐらい読んでほしいな。

すみませんでした・・・。

>>618
いまだに、つーか、6より新しいバージョンがまだ出てないじゃんｗ

widthを指定する、各領域に分けてから中身を入れる。という方法で作ってみたところ。
思っているように表示することができました。
http://www.rinku.zaq.ne.jp/bkdgg507/

これで行こうかと思います、皆さんレス有難う御座いました。

>>624
今、khtmlで見てたんだけど、思うようになっていないと思う。残念。
ソースまではちゃんと見てないのだけど、回り込むガワのブロックのwidthを明示
するほかに、回り込むガワにもfloatを設定する、という方法でもMSIEでの微妙な
ズレは回避できるよ。

>>625
レス有難う御座います、khtmlとは何のことでしょうか？そういう名前のブラウザですか？
自分の環境(Windows XP IE6.0)で見た場合は
http://www.rinku.zaq.ne.jp/bkdgg507/001.gif　こんな感じで見えています。
回りこむ側(main)にもfloat:left;と指定してみると
http://www.rinku.zaq.ne.jp/bkdgg507/002.gif　こう見えるようになってしまいました。

ＭＡＣのＳａｆａｒｉも知らないのか！？どざーは馬鹿ばっかだなー
その調子じゃＬｉｎｕｘのも知らないでしょ？ぷ

全角のは知らないな。

そんなにえらそうに言うほどSafariなんて使われていないじゃん。
MacユーザーよりMozilla系の方がユーザーは多い。
まぁ俺もKHTMLでの表示チェックくらいはするけれど、多少の崩れなら流すよ。

>>624
FireFoxでも見てみることをお薦めする。

ドザーの制作者の立場から言わせてもらうと、safariの再現状況は気になる。
再現状況をキャプしてくれる程度のマカーの友人は必須だな。

ん？動作確認用のMac買えって？カテナが開き直りやがったんだよ！w
貧乏SOHOのボヤキですた･･･

レス有難う御座います。

>>630さんの言っているFireFoxというので見てみました。
ずれてますね。空きのある範囲での100%と勝手に考えてwidth:100%;とか指定してましたが
普通に画面の横幅分表示されていて横スクロールが出ていました。

手直せば直す程悪化していきました、あちらを立てればこちらが立たず。
もう少し考えてみます。

>>631
実際のところ Gecko と同じか、それ以上だと思えばいいと思う。
ボックスのズレとかボーダー消えたりしないしｗ。
XML とか JavaScript まわりは確認が必要だろうけど。。

IE6以外は切り捨てていいですか？

(・∀・)ｲｲ

何年もかけて作ってるのに、
たかがcssでの表示ひとつ同じに出来ないとは・・・
firefoxなどの偽IEはいつ本物のIEに追いつくの？

本物はもう2年以上放置されてますよ？
それで追いつけないなんて低能がすぎるのでは？

？

釣りなんだろうか

釣り・・・だと思う、けど？

>>636
今年IE7がでるんじゃないの？

IE7はposition:fixedに対応してくれるんでしょうか？

>>638,639
もしも、釣りではないとしたら漏れは本当に恐い

はい次どぞ〜

過去ログ探ったんですが解決しなかったので質問させてください。

一番下にTABLEでできた広告が表示される鯖でWebサイト運営してるんですが、
文字や画像をposition:absolute;　　top:10em;　　left:10em;というように配置しています。
で、これを鯖にうｐすると、広告が、body生書きの位置に来てしまいます。
自分の考えだと、ウィンドウの縦幅に関係なく、常に一番下に広告が来て欲しいんです。
---------------------
[ここに広告が入る]
　　　　　　　　　　　　字
　　　　絵
　　　　　　　絵
　　字

　　　　　　　字

（ここに広告を入れたい）
---------------------
bodyのほうでpositionをbottom:0em;としているんですが、どうもうまくいきません…。
ぜひ、解決方法をご教授ください…。

すいません、擬似フレーム使ったら解決しました。
スレ汚しごめんなさい。

初心者な質問ですみません。。
HTMLでJPEGの画像を背景に載せたいんですが、
<BODY BACKGROUND="画像名.JPEG">じゃないですよね？？

>>646
body {
background-image: url("画像名.JPEG");
}

これでOK。

>>647
ありがとうございます！！

ブログのように左右を色で塗りつぶした感じにしたいのですがどうしたらいいですか？

やり方はいろいろあると思うぞ

IEでfloat:left指定しているブロックにmarginを%指定するとマージンが二倍取られるみたいなんですが、これを回避する方法ありますか？

ある


次

すいません。やり方を教えてください。

>二倍取られるみたいなんですが

なら1/2にすれば医院じゃね？　IE以外で悲惨だが・・・

cssを　http://iroiro.matrix.jp/test/test.css
こうやって、htmlを
<body>
<p class="menu">
<a href="aaaa.htm">aaaa</a>
<a href="bbbb.htm">bbbb</a>
<a href="cccc.htm">cccc</a>
<a href="dddd.htm">dddd</a>
<a href="eeee.htm">eeee</a>
<a href="ffff.htm">ffff</a>
</p>
<img src="noimg.jpg" width="200" height="256">
</body>
こうすると、
http://iroiro.matrix.jp/
こんな風にメニューと写真の間に大きく隙間が出来てしまいます。
隙間を無くすにはどうればいいでしょうか？

隙間を詰めればいいんじゃね？

>>653
標準仕様に準拠していないブラウザでは表示が崩れることがあるという内容を書き添える。

>>655
ｵﾏｲが自分で　margin-bottom:50px;　こうしてるんだよ。

>>658
あー！助かりました！ありがとうございました！

>>651　既出。バグ辞典も見ること。

>>653　
かはいさうだから、教へてあげませう。

フロートの左右マージンが指定値より大きくなる(5.x/6.0)
　http://cssbug.at.infoseek.co.jp/detail/winie/b107.html

これを回避するには、アンダースコア・ハックを使ふがよい。

識別子の先頭にある「_」を無視する(5.x/6.0)
　http://cssbug.at.infoseek.co.jp/detail/winie/b157.html
>この不具合を使用すると、WinIEだけに特定のスタイル指定を適用させることができます。
http://wellstyled.com/css-underscore-hack.html
http://www.unknownplace.org/blosxom/web/140.html
http://hail2u.net/blog/webdesign/use_underscore_in_css_identifier.html
>こんな書き方をするとMozillaやOperaとInternet Explorer 5以降で適用
>されるスタイルを切り分けられるようです。
>#menu {
> position: fixed;
> _position: absolute;
>}
>MozillaやOperaではfixed、Internet Explorer 5以降ではabsoluteが
>適用されるということになりますね。

>633
何がそれ以上なの？
マカーって少しでも勝っている部分があると
誇大広告するから信じられん。
KHTML見ている限りは、長短それぞれって感じだけれどなぁ。

質問です。
プルダウン形式の選択メニューで、右のボタン等の色をスクロールバーを変える感じで変える事は出来ないのでしょうか？
初心者質問スレにて回答が出なかった為、こちらで質問させて下さい。よろしくお願いします。

div.top-comment {
font-size:0.85em;
color:#555555;
line-height:1.5em;
letter-spacing:0.1em;
border-top:solid 1px #555555;
border-bottom:solid 1px #555555;
border-right:solid 1px #555555;
border-left:solid 1px #555555;
width:780px;
margin-left:auto;
margin-right:auto;
padding:10px;
}

細い線で囲まれたBOXを横幅780pxで作ったのですが
実際の表示は780pxを超えてしまいます。
paddingの数値はwidthの値を無視してしまうのでしょうか？

IE、Opera共に同じ結果になります。

padding:10pxはやめて、マージンで我慢汁

>>664
互換モードにしてみれ。
もしくはpaddingとborderの分引く

これは
http://adp.daa.jp/archives/000250.html

書き忘れたのですが線で囲まれたBOXの中に文章を入れる予定です。
その文章と枠線の余白を設定したくpaddingを設定しました。

>>665
marginは既に設定しているのですが中の文章と枠線の間隔の調整として使えるのでしょうか？

>>666
「スタンダードモードで覚えていったほうが良い」と聞きました。
もしかして、その考えは間違いでしょうか？

互換モード以外だとpaddingとborderの分も計算する必要有りということですね。

ありがとうございました(*´∀｀)

トップページで
部屋１、
部屋2、
部屋3
のように大きな画像にリンクを貼って
それぞれ別種のコンテンツの入り口にするのは
CSSで作るのには好ましくないのでしょうか？

あと、部屋ごとにstyle1、style2、style3.cssと
別々のスタイルシートを使って背景色や表示方法を変えるのと
ひとつの同じcssファイルで、idやclassによって、背景色などを変えるのと
どっちがよい作り方なのでしょうか？

使い方しだいの気もしますが…

一枚絵でできるロールオーバーのやり方を教えてください。
おながいします。

画面の下の中央に数行の文字列を配置するにはどうすればいいですか？

DIV要素をセンタリングするのは　>6のQ2を見たのですが
これを一番下に張り付けようと　position:absolute; bottom:10;　などを入れると
真ん中ではなくなってしまいます。

>>671
オーバ前後の絵を上下または左右に並べた一枚絵をつくっておいて、
例えばaだったら、
a:link {
background-image: url(hoge.gif);
background-repeat: no-repeat;
background-position: top left;
}

a:hover {
}

途中で送信しちゃったすまそ。
a:hover {
background-position: bottom left;
}

とかするです。

<ul>
<li></li>
<ul>
で作ったリストの頭に画像を指定したのですが、上手く上下が整いません。
vertical-align:middleを<ul><li>に試してみるも結果は同じでした。

画像の方が文字のラインより上にいっているのですが、どうやってバランスを整えれば良いのでしょうか？

　　　　　　　　　　　　　　　 _,.　 -─‐- ､.
　　　　　　　 　 　 　 　 .,ィ´　　　　　　　 ｀ヽ.
　　　　　 　 　 　 　 r/´ / ///　　i　ｌ ヽ ヽ 　ヽ.
　　　　　　　　　　　| !　l l l ! ! l　　l ! l　!l　! i 　 ',
　　　　　　　　　　　| !　l l l ! ! l　　l l-l‐ﾘトl､ｌi ! l !
　　　　　　　　　　　| !　l ﾚl'l丁ｌ　 _jﾘv'_ﾉヽl　l ! l |
　　　　　　　　　　　| ! ,ﾊVｉ,ﾉ::!￣　 　li::;;::}|　l ! l l
＼　　　　　 　 　 　 〉ﾄ! ﾚ{.li:;::i}　 ,　　ヽ=' |　l ! lﾘ
　 ＼　　　　　　　　| !l　lﾊ ゝ'´　 r ┐　　_l　l ｌ jl
　　　ゝ.　_　　 　 　 !l ! l　lヽ､._　 ヽ'_,. ィ´-l il_ﾚ′
　　　ヽ,>f !.　　　　 ヽ! |_⊥＜_,二j　　 ﾄ､. l'´
　　　　{.!rヽヽ　　　　 ヽ!　 ／　/,'　　, ' / ＼
　　　 　 ヽ._ﾄ ヽ　　　　　_/ .i/ i f'ー　Y　　/ ヽ.
　　　　　　　'､　＼　　／¬ |　|TT┬/　　/　　|
　　　　　　　 ヽ　　ヽｲヽ 　 ｌ　j i i i i !　､　　　 li

>>662
Gecko は >>633 に書いた不具合がかなりイタイんですが、Safari (KHTML) は
（僕が）普段気になる不具合が無いので「それ以上」としました。表現がよくなかったですね。
OS X はフォント表示がダントツにイイので印象はよいのです。。

ちなみに僕は Windows メインですよ。 iPod 使ってるけど foobar2000 で管理してますし。
2,3行目は同意しますがw、印象悪いし余計に思います(;´д`) 是々非々でよいかと。

>>675
line-height とか、かなぁ。 場合によっては background-image でも試してみては。

>>675
まず、>>1に書いてあるようにあなたがどういう方法で指定したかなどの情報を書かないと、
しっかりした回答は得られません。
もし、list-style-imageを使っているならやめて
http://css.maxdesign.com.au/listamatic/vertical05.htm
このようにbackground-imageを使ってください。

ドリームウィーバーを使っています。
修正→ページプロパティー→カテゴリー→リンクで
リンクカラーやロールオーバーなどの色を指定したら
そのページ全部のリンクなどの色が同じになってしまいます。
部分的に指定することは可能なのでしょうか？
もしよろしければ教えてください。

CSSで class なり ID を・・・

　あとはググって下さい。

>>679
マルチめ

あっ　誘導されたのね。　ｺﾞﾐﾝ

>>677-678
こちらの書き込む情報が足りず申し訳ありませんでした。
苦戦しながらもbackground-image(no-repaet)で挑戦しているのですが
オプションとして指定する％がどうしても定まりません。

100％だとアイコンの上部分が削れてしまい80％だと下が削れます。
80〜100％の間を微調整してみたのですが、上下が削れることになり
結果的に上手く表示が出来ません。

画像の大きさを12px正方形から24pxまで試しましたが結果は一緒です。

background:url(../image/icon.gif) no-repeat 5px 80%;
↑のように書きました。

1pxの枠線で囲んだ中に背景色を入れ、その中に文字（リスト）を書いている状態です。
画面中央に表示させリストは左寄りに書いている為、下のような感じです。
width:300px;
margin-left:auto;
margin-right:auto;

上下の位置だけが調整できず悩んでおります。
アドバイスいただけませんでしょうか？

お騒がせしました。原因が判明しましたので書き込みます。

<li>要素に行間を空けようとmargin-bottom:0.8em;と書いていたので
そこを削除し<ul>に当てたclassの部分でline-heightで調整したところキレイに表示されました。

また1つ勉強になりました。どうもお騒がせいたしました。

ＣＳＳが永久に流行らないこれだけの理由。

・回線が拡大している現在では、ＣＳＳで作られたページ容量の
わずかな軽さは利点にならない。
・ブラウザや環境による表示ばらつきの大きさは致命的。
・ＣＳＳで作られたページは画一的で面白みがない。
・テーブルやＧＩＦを使ったサイトと比べて、ＣＳＳは安っぽい。
・文法自由度が高い分だけ、実現に高いスキルが必要となる。

要するに、ＣＳＳで作られたサイトは、デザイナーの自己満足であって、
「売れるサイト」ではない。ゆえに、商業ベースでは必要とされていない。
また、ブラウザごとの表示ばらつきはきわめてリスクが高く、意味がない。

>>685
CSSでうまく出来ないからってCSSに八つ当たりするのは寂しいよ。
腕をみがきな！

ＣＳＳが永久に流行らないのはこれだけの理由。
・文法自由度が高い分だけ、実現に高いスキルが必要となる。

出来ないわからないバカが多すぎるんだ。

ＣＳＳガ嫌イナ香具師ハ、ＣＳＳ以外ノ技術ダケデ視覚デザインヲ行ウノカ？
ソレコソ無茶ダロ？　何ンダカンダ文句言ッテル癖シテ少シハＣＳＳ使ウダロ？
自身ヤベンダニ技術力ガナイノコトヲＣＳＳニ責任転嫁シテイルダケダロ？
藻前ハＣＳＳニカワル技術ヲ考案シテ、新規ニブラウザヲ開発デキルノカ？
デキナイダロ？　タダ、自分ニ出来ルコトヲ精一杯スレバイイ。ソレダケダロ？

>>685
> ・回線が拡大している現在では、ＣＳＳで作られたページ容量の
> わずかな軽さは利点にならない。
わずかだろうがなんだろうが利点は利点。
無理矢理なかったことのようにする必要性はないよな。

> ・ブラウザや環境による表示ばらつきの大きさは致命的。
ばらつき程度は腕でカバー。
ブラウザや環境で見栄えが変わる程度なら「見れる」だけまだマシ。
テーブルレイアウトとかだったらハンドヘルドじゃ見れない場合だってある、ってことと比べてみろ。

> ・ＣＳＳで作られたページは画一的で面白みがない。
画一的なのは腕の悪さ。
デザイン能力がない人のサイトを見てCSSを非難するのはお門違い。

> ・テーブルやＧＩＦを使ったサイトと比べて、ＣＳＳは安っぽい。
テーブルやＧＩＦを使ったサイトは安っぽい。
感覚だけで物をいうとこういう意見も通るわけで。

> ・文法自由度が高い分だけ、実現に高いスキルが必要となる。
難しいから出来ないよ、は一理あるな。

> 要するに、ＣＳＳで作られたサイトは、デザイナーの自己満足であって、
CSSの利点を理解してないから「自己満足」と思うわけで。

> 「売れるサイト」ではない。ゆえに、商業ベースでは必要とされていない。
クライアントが無知なだけだ。

> また、ブラウザごとの表示ばらつきはきわめてリスクが高く、意味がない。
これは全く腕の悪いCSS使いのサイトしか知らない、としか思えない発言だな。
HTMLの特色ってわかるのかな。

689は今日の釣果一番だな(´ー`)y-~~

つられたっていいじゃないか 人間だもの

ＧＩＦを使ったサイトってなに？

ＧＩＦを使ったサイトじゃない？

>>690
「チャック開いてるよ」
「開けてるの」
くらいかっこ悪いな。

確かに企業サイトだとテーブルレイアウトかAllFlashしかみねーな。
HTML版も用意して・・。

>>695
企業が悪いんじゃない。
製作会社が悪いんじゃない。
製作会社に頼んだ、企業の偉いさんが悪いんだ。

>>695
数年前はそうだったから未だにお決まりの文句でそういうけど……
違うな。

>>697
オレ？

「プログラミングは簡単だ、そんなくだらねえことに夢中になる時間はないよ。」
という言葉は、昔から、医学科や数学科をはじめ、理工系の学生が時々口にする。
でも、実際には、すんなりと呑み込めない者がほとんどで、商用レベルの
コードを書ける者となると極めて少ない。現実とはそういうもの。
C も Java も一気に流行したが、これらが簡単だからではない。
教育制度が整っていて、教育される側もする側も、決まりきったことを
こなしていけば、必要とされる最低レベルをクリアできるようになっているからだ。
もちろん、資格という目標もある。古いプログラマで資格を持たない者は少なくないが、
そんな彼等でさえ、応募者を振り分ける時、機械的に有資格者を選んでいる。
だから、今時の入門者は、資格取得を入門レベル卒業のハードルにしている。

CSS は簡単だ。これは脳に障害でも無い限り、誰もが感じる事実だろう。
しかし、何事もなめてはいけない。教育資格制度が無いに等しいのは大問題だ。
仮に、教育資格制度が整って、制作者の CSS スキルの平均が飛躍的に向上したら、
これに関わる制作コストが桁違いに下がる。現状の印刷屋主導の制作業界内部の
パワーバランスが大きく変化するに違いない。権力争いは、詰まる所、生存競争である。
既に8年以上「画期的な」ままで放置されている CSS によるワークフローを
業界レベルで実際に運用することは、命の取り合いをする覚悟無しには取り組めない
大変重要な仕事である。

>>699
> C も Java も一気に流行したが、これらが簡単だからではない。
簡単だからだよ。

> CSS は簡単だ。これは脳に障害でも無い限り、誰もが感じる事実だろう。
そんなことない。

すみません672なんですが、どなたかアドバイス頂けないでしょうか

IEでvertical-align:super;すると上の行との間に無駄な空間が出来るのは何とかできない？

>>701
絶対配置した要素の中に子要素を入れ子にして、その子要素を中央寄せにすればいいだけ。
頭使ってよ。

>>702　始めからline-heightを高く取って置くとか。

H1,H2,H3,P,OL,UL,DLと構造的に並べろ、そうすれば楽になる、っつーのがcssでしょ。

そのとおり。CSSはデザインの手段であって
目的ではないのだ

のだ

body {
text-align: center;
margin: 0px;
}

div#main {
width: 750px;
height: 100%;
margin: 0px auto;
}

<body>
<div id="main">
hoge
</div>
</body>

これでブロックをセンタリングしたいんですが、
IE6では意図通り「| |」となるんですが、NN7.1では「□」みたいに
上と下に余白ができてしまいます。
marginとかpaddingとか色々いじってみたんですが、どうにも変化がないので、
何処がいけないか教えていただけますでしょうか？

body {
text-align: center;
margin: 0px;

padding: 0;

}

CSSクックブック ― Webデザインのための活用テクニック集
http://www.oreilly.co.jp/books/4873112192/

俺の代わりに誰か買って

*{
margin: 0;
padding: 0;
}

>703
↓こういうことじゃないんでしょうか。

<div style="position:absolute; bottom:10;">
<div style="text-align:center;">
<div style="width:400; margin-left:auto; margin-right:auto;">
ここに５行ぐらいの文字列
</div></div></div>

文字列の中ではセンタリングされてますが
ブロック自体は左端によってしまってます

>>709
それは無理でした。

>>711
それも上のマージンが消えても、heightが100%にならないんですよ。

別のページだったら同じやり方で問題無かったんですけどねぇ。
コピペしてidをあわせてもやっぱり駄目・・・。
わけわかんねぇや。

>>708
あれだ、divの直下の要素のマージンとかの問題じゃないか？

>>708
マージンを全部0pxにしても変わらなかったです。
っていうか100%って書いてるのに、内容によってheightが変わってるんですよね。
!importantとかも意味なしでした。

親ボックスの高さは全部100%にしてるか？

>>716
div#mainってのがbody直下のボックスなんで、それは大丈夫だと思います。

NNってGeckoエンジンだよね？
手元のFirefoxで見てみたけど、
別に余白があいてるようなことはないみたいだけど…
よかったらもうちっと詳しいソースくれるかい

>>718
ちょっとコンテの消して、ソースだけ上げてみるんで、少しお待ち下さい。

http://www.hcn.zaq.ne.jp/la_fouine34/smp.html

http://www.hcn.zaq.ne.jp/la_fouine34/css/default.css
http://www.hcn.zaq.ne.jp/la_fouine34/css/index.css

です。
お願いします。

あーこれはだな、XML宣言がうんぬんとかだが
説明するのも面倒だし、いろいろ複雑なんで


BODYの背景画像でやれ！
ってこった(；＿；)

>>721
あぁ、なるほど、DOCTYPEを消してみたら上手いこといきました。
かといってそうするわけにもいかないですしね・・・。
ありがとうございます。

ちなみに、この場合はNNの解釈がおかしいんですか？

>>717
bodyの高さも100%に・・・

ちょっとそこまでは・・・(´･ω･`)

タグのついたファイルから、
GUIでウェブページのデザインして、
スタイルシートを出力してくれるソフトってあります？？

つまり、HTMLの中に、デザインを埋め込まないで、
完全にスタイルシートを使うようなソフトってないですか？？

>>725
ソフトがやるんじゃなくて。使い手がそう使えばどんなソフトでも出来るよ。
ところで、そのスタイルシートは誰が作るのかね？

>>726
自分で作るつもりです。
CGI習って、HTMLの出力はできるようになったんですけど、
デザインを変えようと思うと大変なので、

divタグのclassとかidとかでデータを分類したものを出力して、
アプリケーションでスタイルシートだけ書けないかなぁと思いました。

じゃあ、GoLiveとか使ってみようかな。

<head>
span{ font-size:35pt;font-weight:bold;color:navy;position:absolute;filter:shadow(color=#ffff00,direction=125)}
</head>
<body>
<table border=1>
<tr><td width="220" height="50" align="left"><span>何を言う</span></td><td>早見優</td></tr>
<tr><td>上裕</td><td>北天裕</td></tr>
</table>
</body>

すいません、上記のようにCSSでFilterかけてtable内に表示させようとしたのですが「何を言う」が
枠からはみ出してどうにもなりません。
何か間違ってるのでしょうか？

例　html{border-style:solid 1em #000;}
と、指定してみたところ、IE6.0で動作しましたが
htmlタグに対して指定するのは推奨されることなんでしょうか？

>>729
他のブラウザでは違うところにborderが付いてるはず。
とはいえその辺は仕様でも未定義だったり曖昧なので
IE6以外はどうでもいい！と思ってるなら別に良いのでは？

>728
position

>>731
すいませんがもう少し具体的に教えてはいただけないでしょうか？

北天裕は北天佑のまちがいだとおもいます。

>>733
そうでしたか・・ご指摘ありがあとうございます。

>>730
なるほど、違う所に付くんですね。
レイアウト的にあっても無くてもどちらでも良いのでやめておきます。
有難う御座いました。

>>722
せっかく>>716が指摘してくれるのに勝手に勘違いしちゃって……
heightの初期値は100%じゃなくてautoだ。明示的に100%としない限り100%にはならない。
NNの解釈が正しく、IEが間違っているんだよ。

height: n%;の正しい仕様 - Web標準普及プロジェクト
ttp://www.mozilla.gr.jp/standards/webtips/webtips0032.html

ってかこれFAQに載せたほうがよくねえか？
結構勘違いしやすそうなポイントだと思うし。

>>712
widthの初期値はautoだから絶対配置にすると中の幅に合わせて縮んじゃうのよ。
というわけで一番外側のdivの幅を100%にするとどうなる？
ついでにtext-align: center;も一番外側のdivに指定すれば
無意味なdivが一つ減らせるんじゃない？

それから>>672なら672と名乗れ。
(専用ブラウザ使ってるとそのほうが元の質問を参照しやすい)
あと数字に単位(px)をつけろ。

>>736
ありがとう。解ってくれたのは君だけ。

>>728
position:absoluteは何のためにつけてるの？ その意味わかってる？

>>739
shadowのfontに対する位置指定じゃないんでしょうか？

absolute

やっぱりわからないです。tableにフィルター文字入れるの諦めます。。。

>>740
・・・。
position:absolute;消してdisplay:inline-block;とでもしとけ。

hasLayout==trueにしないとfilterはかからない。
ので、position:absoluteが指定されていたのだろう。

>>743
ああ、神様ありがとうございます。
タグ辞典読んでも書いてなく、ググってもわからなかったので助かりました。
感謝、感謝です。

>>736
>>716
やっと気づきました・・・。
<HTML>の存在を完全に忘れてました。

ありがとうございます。

ＣＳＳが凋落するこれだけの理由。

・実はなくても困らない。
・同上
・同上
・・
・・

５〜６ページのおまいじゃそうだろうなぁー

だからなんで釣られるの

もなー

最近かなりレベルが低くなったな
これも「ゆとり教育」のなせる技かな？（w

>>748
ｽﾄﾘｸﾀｿの俺としては、釣られるのが流儀だと思っていたんだが違うのか？
ﾈﾀにマジレスで完膚なきまで叩いて自己満足、が真骨頂だと思うぞ。

ｸﾘﾄﾘｽﾝなあたいは相手に逝かしてもらうのが好きなの。

すんごくレベルが低いと思う

ちょと質問よろしいでしょうか？

<dl>
<dt><img src="xxx.jpg" width="10" height="10"></dt>
<dd>この絵はxxxxxxxxxxxxxxxxxです</dd>
<dt><img src="xxx.jpg" width="10" height="10"></dt>
<dd>この絵はxxxxxxxxxxxxxxxxxです</dd>
</dl>

<table>
<tr><td><img src="xxx.jpg" width="10" height="10"></td><td>この絵はxxxxxxxxxxxxxxxxxです。</td></tr>
<tr><td><img src="xxx.jpg" width="10" height="10"></td><td>この絵はxxxxxxxxxxxxxxxxxです。</td></tr>
</tr>
</table>

上の<dl>で作った物を下の<table>と同じように再現するには
cssでどう記述すればよいか教えてください。

dt {
clear: left;
float: left;
width: 10px;
display: inline;
}

>>755
なるほど。それを参考にいろいろ試してみるっす。

ddが空要素だとfirefoxでずれまくるけどな

いつの間にinlineがfloatされるようになった？

この場合、float: left;を指定した時点でdisplayプロパティの値が
自動的にblockに設定されるからinlineがフロートされるわけではない。
というわけで>>755のdisplayの指定は無意味だな。

Googleのニュースサイトみたいな感じのレイアウトって、floatだけだとできないですか？？
２段目（社会と国際の段）とか３段目(経済と政治の段)の上を揃えたり、左を揃えたりするには
floatじゃなくて、positionじゃないとできないですか？

あと、もし良ければ、大体どういう感じでレイアウトしたらいいか
教えてください。お願いします。

↓Googleのニュースサイト
http://news.google.co.jp/

いや　できるよ

div {
border: 1px solid red;
margin: 5px; }
body {
margin: 5px;
padding: 0; }
.left {
float: left;
width: 48%;
height: 300px; }
.right {
float: right;
width: 48%;
height: 200px; }
.clear {
clear: all; }

<div class="left">a</div>
<div class="right">a</div>
<div class="clear"></div>
<div class="left">a</div>
<div class="right">a</div>
<div class="clear"></div>
　　：
　　：
　　：

空のDIV入れれば上が揃うけど
ここの住人が黙っちゃいない

>>760
入れ子を使えば余裕だろ

Mozillaなら入れ子を使わなくても左側のボックスにclear: bothを
指定すればいいんだけどIEにはこのバグがあるからな……
ttp://cssbug.at.infoseek.co.jp/detail/winie/b093.html
まあ>>764の言うとおり横に並ぶ二つの段をひとつのボックスで囲っちゃえば簡単だけど。
それから>>763、clear: allじゃなくてclear: bothね。

sorry

floatを用いて画像に対してテキストの回りこみをさせていますが
IE6でテキストが消えるバグの回避方法をご教授ください。

もうちょっと詳しく言ってくれないとわからんな。
これか？ ttp://cssbug.at.infoseek.co.jp/detail/winie/b032.html

ページを縦に3つ区切って、左右を幅固定（200px)、
中央をウィンドウに合わせて伸び縮みさせたいんですが、
ウィンドウを100pxぐらいに縮めると、left,center,rightのボックスが重なってしまいます。
<div id="left">左</div>
<div id="center">センター
<div id="right">右</div>
</div>



div#left {
height: 200px;
width:200px;
margin: 0px 0 0 0px;
border: 1px solid #4682B4;
position:absolute; top:auto; right:auto; bottom:auto; left:0px;
}
div#center {
height: 250px;
margin-left: 200px;
margin-right: 200px;
border: 1px solid #666666;
}
div#right {
width: 200px;
height: 200px;
border: 1px solid #666666;
position:absolute; top:0; right: 0px; bottom:auto; left:auto;
}

重ならないようにするには、どうすれば良いのでようか？
rightをフロート（right)で設定した場合も
rightの上にcenterの内容がきてしまいます。

ウインドウ小さすぎ

すいません、 link rel なんですが、 http:// 経由でアクセスできるところに
置かないといけないんでしょうか？
public_html と同じディレクトリに css を掘ってそこに入れたのにアクセス
させるようにしたら css が適用されず、アクセスログを見ると 404 エラーに
なっています。

>public_html と同じディレクトリ
　これじゃまずいだろ。

　public_htmlの下だよ。

>>772
当たり前だ。
http://から書いてなくてもHTTPでサーバにアクセスするんだよ。

left(200px),center(残りの横幅）,right（200px)
をcssを使って再現したいんです・・・
ウィンドウを縮めてもrightがcenterの下に潜り込まなないレイアウトがいいです。
ポジション、フロートを使って色々試したのですが、自分では無理でした；
誰かお願いします。。。教えてください

横幅640px程度のウインドウサイズで見れりゃそれでいいじゃん…
逆にそれ以上のサイズを要求するサイトが意外と多くてウザイ。

640pxとは言わないけど、お気に入り出したままだと見れないサイトはちょとうざい

min-width

>>775
>>500-531

>>779
ウインドウを縮めると、かなり崩れます・・・

* { margin:0;padding:0; }
.parent {
position:relative;
}
.left {
width: 200px;
}
.centerpad {
position:absolute; top:0; left:200px;
}
.center {
position:absolute; top:0;
padding-right: 200px;
}
.rightpad {
position:absolute; top:0; left:600px;
}
.rightpar {
width:100%;
position:relative;
}
.right {
position:absolute; top:0; right:0;
width: 200px;
}
そもそも縮めたときにどういう動作をさせたいのか、それが本当に必要な要件なのかわからん