/* CSS・スタイルシート質問スレッド【52nd】

CSSに関する質問はこちらへどうぞ。 ※　議論はよそで　※

■■■■■　質問のしかた　■■■■■

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

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

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

【まとめサイト】　http://web2ch.s31.xrea.com/?CSS
【FAQ】　http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】　http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】　http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】　http://pc8.2ch.net/test/read.cgi/hp/1137310503/

関聯リンクは>>2-15 あたり
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9

【関聯スレッド】
CSS/DHTMLバグ辞典スレッド 第４版
　http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え?
　http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
　http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるデザインサイト 30
http://pc8.2ch.net/test/read.cgi/hp/1136660907/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.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

【解説など】
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
　http://www.nextindex.net/web/CSS/
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
　http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方法
　http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
　http://ike.s33.xrea.com/
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを："作れ";} 発表所
　http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php

【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://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
　ttp://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと（Netscape4でも崩れない段組みの実例）
　ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
スタイルシートスタイルブック
　http://stylesheet-stylebook.com/

【FAQ】
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://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
　http://web.archive.org/web/20040215182735/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. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
　http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

Q12: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（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.sakura.ne.jp/x/01/tips/page/p0037.html

【参考】
＊IEの position:absolute; のバグを利用した擬似フレーム
１．標準モードにする
２．body {height:100%; overflow:auto;}
３．fixしたいブロックを position: absolute; で指定

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}
/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html

アンダーバー・ハックの方がいいか？
http://cssbug.at.infoseek.co.jp/detail/winie/b157.html

>1
おつかれ

>>1
>【CSS検証】>>2
……って、落ちてるけど？

【CSS検証】
W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/

>>9
CSS Hack集
http://www.jaist.ac.jp/~m-tamura/article/web/css/csshack
"通"御用達、CSSハック
http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

WinIEのfloatのバグを回避する
http://www5e.biglobe.ne.jp/~bill/the/css/holly.html

>>1　スレッド移行済んだら、こちらへも宜しくね。

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

【まとめサイト】
http://web2ch.s31.xrea.com/?CSS （現行スレッドを変更）
http://web2ch.s31.xrea.com/?CSSLog （過去スレに追加）

ハックはマイクロソフトによって推奨されておりません。

ttp://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp?frame=true

コンディショナルコメントを用いるのが安全です。

>>13
条件分岐コメントはＷ３Ｃによって推奨されてません。
また、MacIEとをWinIEとを識別させることもできません。
一長一短です。

>>13-14
cssファイル内で分岐させるコメントとかはありますか？
IEでは認識しないセレクタを使ったりする方法しかありませんか？

985 ：Name_Not_Found：2006/02/14(火) 12:26:26 ID:???
あ、スレタイトルからしてコメント閉じ忘れてるや・・・orz

986 ：Name_Not_Found：2006/02/14(火) 12:32:33 ID:???
1000とったやつが*/書けばいい

>>14
W3C的には、”ただのコメント”です。IE以外に悪さはしません。

いちど、IE以外のブラウザを使ってみてはいかがでしょうか？
ハックは極めて行儀が悪いと言う事が理解できるでしょう。

>>17　
普通は、IE以外を考慮すればこそ、Hackを応用するものでしょ。

<!--[if gte IE 5.5000 ]> ……<![endif]-->
とか、コメント内に「>」や「<」を入れるのも行儀は悪い。

直接”CSS・スタイルシート”とは関係ないような・・・

>>18
ハックなんて他のブラウザでは、エラー吐きまくりなんですけど…
御存じない？

つか、なんでハックなんて、古い裏技にこだわるのか理解できないな。

否。他のブラウザでは反応しないがＩＥは反応する、それがハック。>>20

>>20　
具体的に、>>9や>>11の例だと、どのブラウザでどんなエラーが出るの？
そこを突っ込んでくれればＣＳＳの話になるね。

ハックというより（技術的）バックって感じ。

MacIEバグを回避するためのホーリー・ハックを、
条件コメントで代用できるのですか？

バグが起きないように手法を変えたほうが効率良くないかね。

CSSハックのベストソリューションを語るには、まさにこのスレが最適だと思うんだけど。

>>25
ならば、このバグを起さないでletter-spacingを適用させる手法を案出して頂戴。
http://cssbug.at.infoseek.co.jp/detail/macie/b014.html

>>21
真面目な話。>>11 が推奨しているサイトをFirefoxで見ると
ttp://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack0.htm

エラー: ',' または '{' であるできところが '*' になっています。 セレクタが不正であるため、ルールセットは無視されました。
ソースファイル: http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack0.htm
行: 17
エラー: ',' または '{' であるできところが '*' になっています。 セレクタが不正であるため、ルールセットは無視されました。
ソースファイル: http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack0.htm
行: 20
エラー: ',' または '{' であるできところが '*' になっています。 セレクタが不正であるため、ルールセットは無視されました。
ソースファイル: http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack0.htm
行: 24

つか、CSSヴァリデータとか通るの？

HTMLをいじらないためにCSSが最適なのに、
コンディショナルコメントはHTMLに書かなきゃならないからとても不合理で使いたくない。

>>11
すまん、ありがとうorz

>>12
誰だか知らんが、ましめに追加してくれた人ありがとう。

ましめ＞まとめ

スタイルシートでサブミットボタンを画像に置き換えることは可能でしょうか？
もしくはtype="image"のソースを書き換える事ができますでしょうか？
お教えください。

>>28　
invalidな記述は無視されるのがCSSのルール。
だからハックの記述は真っ当なブラウザには無視されて適用されない、問題無し。

>>31
>type="image"のソースを書き換える事ができますでしょうか？
これが・・・画像ボタン用なんだけど・・・

>>31
imageを使いたくないということだったら、background-imageでも駄目なの？

ハック排除派の>>13君は、>>24・>>27・>>32に応答・反論できないのですか。

>>35
そんなのどうでもいいから質問者が来たんだから答えろよ>>1

ハ？　31の質問だったら回答されてるやんけ。他に？

質問です。
>>24・>>27・>>32について応答・反論をお願いします。

スレッド52にしてついに全知全能の>>1現る。

>>36　あ、まだ>>15には誰も回答してないか。答：ありません。

うむ
質問者が来たら>>1が回答しないといけないようだ

36君はなぜ>>1氏に八つ当たりをしてるのでせう。

単に>>35に>>1嫁と言いたかっただけだが、なんか馬鹿らしくなった。

>>18
行儀が悪いどころか、そういう使途を想定していますよ、SGMLコメントは。
<p>aaa</p>
→ <!--<p>aaa</p>-->

質問です。本当馬鹿ですみません。
スタイルシートのテンプレサイトからもらってきて自分でいじっているのですが、
画像表示をfloatで左寄せにして文字をまわりこみさせたいのですがどうしても
できません・・・。
作成環境はmacです。
cssファイルに
img{
float:right;
}
を書き込んでも文字はまわりこみません。
ほかの部分が邪魔しているのかなぁ・・。
教えてください。

ＨＴＭＬソースも摘要を出しなさい。>>45

>>44
<p>aaa</p>
→ <!--p>aaa</p-->
としないか、普通。

しないよ

>>44
コメント中に `<` や `>` を書くと、いくつかのWWWブラウザを混乱させることがあります。
http://openlab.ring.gr.jp/k16/htmllint/explain.html#markup-in-comment

>>46

htmlでは、
<img src="imgtop01.jpg"alt="トップ画像"width="150"height="135">
みたいな感じです。
cssファイル内が結構つまっていてそれが影響したりするのでしょうか？

>>27
/* MacIE5 \*/
letter-spacing: 1px;
/* */

これで回避できるらしいが、そもそもこういうバグを気にするなら
letter-spacingを使わないという手法もあるよ。
それがデザイン的なものだったとしても、デザインを微修正すればいい。
適用が前提になる時点で、手法を限定した物にしてるという事だからね。

絶対に必要だという場合は、\*でも何でも使えばいいんだよ。

>>50　
あのね、imgの周りのHTMLを出してくれないとこちとらもわからないのね。
最小限の構成だけ抽出して試しても、成功しなかったの？

>>50
<img src="imgtop01.jpg"alt="トップ画像"width="150"height="135">
↓
<img src="imgtop01.jpg" alt="トップ画像" width="150" height="135">
半角スペース空けようね。

>>45
他の同ファイルのCSSは適用されてるの？

>>49
旧態依然、いったいどのブラウザよ？
MacIE4でもなんでも、古臭いブラウザに対応して喜んでなさい。

>>51
「使わないという手法」って、それは手法でなく代用でもありませんから。
そもそも、ＣＳＳは「デザイン的なもの」のはずですから。
ＣＳＳの「適用が前提になる時点で、手法を限定した物にしてる」のですから。
「\*でも何でも使えばいいんだ」ったら、ハックを全否定するには及ばなかった筈ですから。
残念。

おまえらいい加減よそ行ってやってくれ

>>52
なかなかうまくいかず、成功は一回もしていないです。
ちなみにこれがcss内です。ここにfloatを入れて画像を寄せたいのですが・・。
よりません。
（長いので何回かに分けます。）

@charset "Shift_Jis";


/* 自由に消して足して書き換えてください。 */


/***** ページの設定 ******/
body{
margin:0 5% 30px;padding:0; /* マージン、パディング */
background-color:#000; /* 背景色 */
color:#333; /* 文字色 */
font-family:Verdana,Chicago,osaka,"ＭＳ Ｐゴシック",sans-serif; /* 文字の指定 */
font-size:84%; /* 文字サイズ */
line-height:150%; /* 行間の設定 */
}

p{margin:3px 0 20px;} /* p要素の設定 */

>>49
意地はるなよ。もういいって。
そんな古いページですら、今はもうない、と書いてあるだろ。

>>55　古臭いブラウザに対応しなくていいと？　後方互換性はＣＳＳの基本理念ですよ？

>>56
残念ながら、俺はそもそもハックを否定してませんから。
俺は使わずにデザインするという手法も選択肢として存在するって言ってるだけだよ。
わざわざ環境依存する書き方をしなくてもいいじゃんってね。
それでも使いたいなら自由に使えばいいのよ。

>>60
だからさぁ、やりたきゃやれよ。
古臭いブラウザに対応して嬉しいんだろ？いいじゃねーか。

だが、そんなものを一般化して、こうじゃなきゃだめだ！とか叫ぶな、うざいから。

すみません。長くて表示できないのでうぷろだにアップしました。
45ですというやつです。
よろしくお願いいたします。

http://2sen.dip.jp/cgi-bin/up/upload.cgi

>>58
それと45と合わせてみたけど、こっちの環境じゃならない。
よかったらファイルうｐして。

>こうじゃなきゃだめだ！とか叫ぶな
そんな風に否定的に叫んだのは、ハック手法を排除したがる13だけです。

orz
うｐろだ見てきます・・・

ほんとうにわからんちんです。
あぷろだにhtmlの方もうぷしました。

質問は
＊どこにfloatを入れればおかしくないのか？
＊html内にはどう記載すれば表示されるのか？

教えてください。すみませんおながいします。

>>63
HTMLファイルはup1418.htmでいいの？
なんか変なんだけど。

>>58＝>>63
試すなら必要最小限の構成で、と言ったでしょ？
img {float:right;}
<p><img src="" alt="" width="" height="">文章文章文章文章文章……</p>
とかで試して、成功しなかったの？

>>64
す、スミマセン！おながいしまつ

２連発・・・orz
見てきます。

>>65
あのさぁ、HTMLコメントについて”間違った”事言ってるのおまえだろ？え、違うのか？
ここは、初心者から来るところなんだよ、でたらめ言ってるから、うざいって言ってんだよ。

わかんねーの？

>>69
あ、なるほど。それは試していませんでした。（バカ
ブラウザはmacのIEとサファリで確認しています。
macOSXです。

>>72
おまえもスレ違いウザイから消えろ。

>>45
<img src="img/0.gif" width="1" height="1" alt="">
これがフロートさせたい画像？

>>68
up1420.html
up1419.css
です。これはテンプレでもらったもので、ここからどういじればいいのか・・。

>>74
確かに、すまんかった。

>>72　
「こうじゃなきゃだめだ！とか叫」んだと見るのは、君が間違ってるね。
ハックを容認する>>14とかは、最初から「一長一短」と言っとる。

>>74
えっとフローとさせたい画像は入っていません。
htmlの中でこれから画像を張ったり文章を書いていこうと
おもったのですが、どうしても画像が思った位置に表示されないのと
floatを使ってもムシ？されているような感じです。

私がfloatとして書き込んだのは、
#contents
のしたに書き込みましたが失敗！

あほですいません。ほんとすいませんすいませんすいません。

>>78
<h2>Sample</h2>
<p>サンプルページ</p>
この下あたりに本文としてイメージを入れたいってところ？

>>73　で、最小限の構成で試したのかよ？　質問は自分の中で整理してからな。

>>79
そうです。そのとおりです。どうしたらよいのか方法を知っていたら
教えてください。

>>80
はい。今試してみました・・。うーんそれだけだと表示はされます。
（技術評論社のHTML&スタイルシートという本を見ながらやったら
例文はできました）
ただテンプレの中に入れるとおかしなことになります。

>>81
#contentの下に
#contents{
margin:0 2%; /* マージン */
width:66%; /* 横幅 */
float:left; /* 左寄せ */
}

img{
float:right;
}

でできたけどなぁ。
HTMLはこう。

<h2>Sample</h2>
<p><img src="test.jpg" width="100" height="100" alt="test"></p>
<p>サンプルページ</p>

>>83
えぇぇぇー！
その記載で文字は回り込みますか？
文字の記載場所がおかしいのでしょうか？

>>82
>ただテンプレの中に入れるとおかしなことになります。
どこにどう入れたら、どんな不具合が起ったのか。
質問は具体的に。回答者はテレパシーは持ってないので、説明が無ければわかりません。

今試してきたら>>83が既に書いてた。

全く同じ書き方で問題なく出来てるよ。

>>84
知らん。
君がうｐしたのに83を加えたのじゃ、君の環境じゃフロートしない？
だとしたら環境的にまずい書き方してるのかもしれないけど。

>>87
環境的にまずい書き方とは何でしょう？
マックはだめなのかなぁ・・。
すみませんお手数をおかけしました。
再度チャレンジしてみまつ！

ありがとうございます。ほんとに！

あ、あの、ついでにまわりこむ文字って
#contentの下に
#contents{
margin:0 2%; /* マージン */
width:66%; /* 横幅 */
float:left; /* 左寄せ */
}

img{
float:right;
}

でできたけどなぁ。
HTMLはこう。

<h2>Sample</h2>
<p><img src="test.jpg" width="100" height="100" alt="test"></p>
<p>サンプルページ</p>
　↑この部分にかけばいいのですよね？

MacOS9のIE4.5でも右に画像が行ったの確認。
safariはわからないけど。

ただ、MacIE4.5だと画像が右端まで行っちゃうな。

引用と地の文のけぢめをつけませう。>>88

>>88
いや、テンプレのその他がMacに優しくない書き方をしてる可能性が・・・
そこまでは検証してないからわからないんだけど。
というか、だから83だけで試してみてくれって。
それで駄目だったら、書き加えても無駄だから。

>>89
サファリはなるべく使わないようにします。わざわざ確認してくださって
ありがとうございます。

>>90
す、すみません。全部おっきい字だと変ですよね。気をつけます。
>>91
83だけで検証してみまつ。それでだめだったらあきらめます・・。
ご指摘ありがとうございます。ぺこ

>>92
いや、MacIEよりSafariのほうがCSS対応状況はよかったと思うよ。
とりあえずいってら。

>>93
ふむふむ。そうなのですか・・。
もう一度最初からやってみまつ。
いってきま

あ、失敬。
IE4.5じゃなくてIE5のbetaだった。
久々に起動したから忘れてたよ。

出来ないわけ無いからがんばれ。

>>92　はあ、「全部おっきい字」って？　引用は行頭に > つけるとかさあ……。

>>95
>>96
がんばってみます。
ほんとありがとございますです。

>>97
すみません・・。日本語すらだめだめですね。引用の意味すらわかって・・ｒｙ

>>97
引用をわかってないだけかと。

>>92
> >>89
> サファリはなるべく使わないようにします。わざわざ確認してくださって
> ありがとうございます。
> >>90
> す、すみません。全部おっきい字だと変ですよね。気をつけます。
> >>91
> 83だけで検証してみまつ。それでだめだったらあきらめます・・。
> ご指摘ありがとうございます。ぺこ

これが引用な。

ええっ。引用が解らないって、まさか小学生ではあるまいし。

本当にスレ違いが好きな奴らだな。

>>99
や・・やさしい・・。
ありがとうございます。ほんと恥ずかしいです。厨ですね。わたし。
スレ汚しほんとすみませんでした。
助かりました。もうちょっとがんばってみます。日本語も・・(鬱

メールとかで使ってても、こういう所でもつかうのかとかは
なかなか一見さんにはわからんものだよ。

いやいや、引用文の行頭に記号をつけないまでも、
普通は地の文との間に空行を入れたり線を引いたり、工夫するものだよ。

すみません、
quotesの指定で
quotes:'"' '"';
だけじゃなく
quotes:'"' '"' "'" "'";
と二種類指定しているサンプルを見かけるのですが
このようにしたほうがいいのでしょうか？またどういった意味があるのでしょうか？

>更に引用符のペアを複数指定することによって，
>入れ子の深さに応じて引用符を変更することもできます。
http://hp.vector.co.jp/authors/VA022006/css/generate.html#quotes

>>106
レスどうもありがとうございます。
たとえばq要素にquotesを指定した場合、

例：<q>引用文その一<q>さらに引用文</q>引用文その一</q>

外のq要素と中のq要素に違う引用符を振ってくれるんですね。
べんきょうになりました。

超初歩的な質問ですみませんが、
たくさんボックスがあるページで１つのボックスの中だけ
同じボックスの中の他のテキストには影響さないで、
リンク部分の文字色を変えるにはどうしたらいいですか？

超初歩的過ぎるので、classセレクタについて解説サイトを読んで下さい。

半角スペースで入れ子を設定できるからそれを使ってみては。
CSS　入れ子でググルと幸せになれるかも。

ちなみに、たしか
div.content p em{}
だと、class="content"を持つdivの中にあるpの中のemって感じだったはず。

>>110　「入れ子」よりも、子孫セレクタとか子要素とか言ってほしかったところだ。

そんな難しい言葉、オラ知らない！

知らねえことに口出しちゃなんね。知らねならちっと調べればええだけだべ。

おめぇあだまいいな！

じゃが、キーワードまで提示してるということは、実際にググったという可能性が高い訳じゃ
そう考えると、わかっていて言っている可能性も考慮する必要が出てくるという事じゃのぅ

>>108-116まで全部俺の自演でした！
ごめんなさいっ！

>>105も>>108も、なんで解説サイトを見んで、検索もしないで質問するだかハア。

117にがっかり。
ぶち壊しだ！

むしろ116がつまらん。

はいはい、119様よかったですね。

*/

久しぶりにスタイルシート使おうとしたらなんかうまくいかないorz

メニュー　コンテッツ
メニュー　コンテッツ
メニュー　コンテッツ
メニュー　コンテッツ
メニュー　コンテッツ
メニュー　コンテッツ

って感じにしようとしてるのだが

メニュー
メニュー
メニュー
メニュー
メニュー
メニュー
　　　　　　　　コンテッツ
　　　　　　　　コンテッツ
　　　　　　　　コンテッツ
　　　　　　　　コンテッツ
　　　　　　　　コンテッツ
　　　　　　　　コンテッツ

って感じに縦になっちゃうんですけど・・・（汗
<div id="test1">
メニュー
</div>
<div id="test2">
コンテッツ
</div>
って囲んでます。

#test1{
padding: 10px 0px 0px 10px;
}
#test2{
padding: 30px 0px 0px 190px;
}


CSSファイルの中身はこんな感じです

>>123
floatとかpositionとかdisplayを使わないでやってるの？

>>122
>5あたり

#test1にfloat:left;を足すと幸せになれるかも。

お伺いいたします。
タイトルバー左端のアイコンを任意の画像にするのはCSSで出来るのでしょうか？

できません

できますん

先日読んだ本に外部シートは１ページに付き１つが望ましいと
書いてました。どうしても２つ埋めたいなら＠impotant使ってやれと。
自分はアップロードもしたことない初心者で　
ブラウザ相手に動作確認しながらサイト作りをしていて
そんなこととは知らずに普通に１ページに２つ埋めていました。　
ぶっちゃけ
ひとつにまとめるかインポータントを使うかどちらが良いでしょう？

間抜けな質問かもしれませんがひとつにまとめるとその分重くなったり
しないでしょうか？　　　

>>130
IEだと表示するのに時間かかちゃうお＾＾;

>>130
どっちでもいい

それから @import ね

https://www.google.com/adsense/adformats
このページにある、googleのサンプル広告の
レクタングル (大) (336x280)を HTMLで書こうとしています。
GOOGLEアフリの代替広告の為です。

ttp://www.sabii.com/blog/archives/2005/04/126_adsense.php
こちらのページに書かれているやり方を参考にしてやりましたが
上手く出来ません。

結局テーブルを組んでフォントサイズを毎回決めうちで書くという
大昔のやり方しか実現できませんでした。

もし、スタイルシートを使ってすぐに出来る方がいらしゃれば
作って頂けないでしょうか？

>もし、スタイルシートを使ってすぐに出来る方がいらしゃれば
>作って頂けないでしょうか？

hahahaha

誰か、>>133がNGワード使っちゃってgoogleアフィで代替広告が出たときにも
>>133が儲けを取りこぼさないようにする手伝いをしてやれよ！　「すぐに」！

>>133はマルチ

>>133
ここにしか質問していません。

テーブルで作ると、OPERAで表示したときにテーブル丸出しになってしまいます。
スタイルシートで作るとかなり違うと思うのですが。

アンカー間違えた。。。

>>136
何でマルチなの？

何がいいたいのかさっぱりわかんないんだけど
これってgoogle adsenseの設定ページのテキストボックスか何かで
代替広告用のhtmlを登録する仕組みなわけ？
なんでサンプル通りにやってうまくいかないの？

>>133
これはなんだね？

30 Name_Not_Found sage New! 2006/02/15(水) 04:47:19 ID:???
https://www.google.com/adsense/adformats
このページにある、googleのサンプル広告の
レクタングル (大) (336x280)を HTMLで書こうとしています。
GOOGLEアフリの代替広告の為です。

ttp://www.sabii.com/blog/archives/2005/04/126_adsense.php
こちらのページに書かれているやり方を参考にしてやりましたが
上手く出来ません。

結局テーブルを組んでフォントサイズを毎回決めうちで書くという
大昔のやり方しか実現できませんでした。

もし、スタイルシートを使ってすぐに出来る方がいらしゃれば
作って頂けないでしょうか？

>>140
それって >>133 でしょ？

>>30 全然ちがうじゃないか。

手がつけられませんなこりゃ

133 Name_Not_Found sage New! 2006/02/15(水) 04:10:17 ID:???
30 Name_Not_Found sage New! 2006/02/15(水) 04:47:19 ID:???

なんで誤字しただけの俺が挙げられてんの・・・？

>>140がもう一方のスレタイやURLを挙げないのが悪い

てめーら両方見てんだろうが？

Webサイト制作初心者用質問スレ Part 154
ttp://pc8.2ch.net/test/read.cgi/hp/1139924613/30

http://nyaromenyarome.hp.infoseek.co.jp/index.html
リンクの部分でtext-indentでテキストを飛ばし背景画像を表示させる方法
を採用しています。ですが、firefox1.5ではクリックしたときに飛ばした
テキストの位置から点線が表示されてしまい、見栄えが悪いです。
解決法を知っている人がいたら教えてくださいでつ。
一応、HTML,CSSに文法エラーはないようです。

>>147
overflow:hidden;

>>147
前スレにも書いたけど、それは正しい挙動なんだってさ。とりあえず
対応のために修正版のPhark Image Replacementメソッドを提示してる
人がいる。Stu NichollsのNAFIR↓ね。余計なタグが増えるけれども
点線びろーんは消せる。
http://www.cssplay.co.uk/menu/naf_ir.html

それがイヤだったら古典的なFehrer Image Replacementとか、text-
indentを使わない方法でアプローチするのもいいかも。その種の技法は
http://www.mezzoblue.com/tests/revised-image-replacement/
にまとまってる。

>>148
当該ページみたいに画像代替した部分にさらにリンクかけてると、
hiddenで隠した場合に、MacIEはリンク不可・画像無反応になることが
あるよ。

floatを使って段組みをしたときに、段のなかでfloatとclearを使うと、
段組みのfloatもclearされてしまいます。段の中で自由にfloatとclearを
使うには、positionで段組みをするべきですか？
floatを使った段組みでも、段の中で自由にfloatとclearを使うことはできますか？
よろしくおねがいします。

>>149 >>148
ありがとうございます。教えていただいた
CSSPLAYに載っている手法を採用しようと思います。

>>150　float:left;に続くfloat:right;はmargin-leftで代用できるって知ってたか。

sageもできなくて、はずかしいです。
>>152
２段のカラムを作るとして、右のカラムに対するmargin-leftですか？
その場合でも、右のカラムでfloatとclearを使えば、左のカラムに対する
floatはclearされてしまいますよね。

<ブロック１>ほげほげ</ブロック１>
<ブロック２>ほにゃほにゃほにゃほにゃほにゃほにゃほにゃほにゃ・・・</ブロック２>

これを

ほげほげ ほにゃほにゃほにゃほにゃ
　　　　　　 ほにゃほにゃほにゃほにゃ
　　　　　　 ほにゃほにゃほにゃほにゃ
　　　　　　 ほにゃほにゃほにゃほにゃ
　　　　　　 ほにゃほにゃほにゃ・・・

と表示させたいのですが、「ほげほげ」の横幅が一定ではないため
ブロック１にfloat:left;、ブロック２にmargin-left:（ブロック１の横幅）;が使えません。
<ブロック１>ほげほげ</ブロック１>の横幅がどんな数値でも
上記のような表示にさせる方法はありますか？

質問です
画像を表示させて枠で囲むと必ず一番下に1mmくらいの隙間ができてしまうのですが
コレの解決策って無いんでしょうか?詳しい方お願いします

>>155
ひょっとして画像自体にボーダーを設定してるんじゃなくて

<span style="border:〜">
<img 〜>
</span>

とかやってる？

>>156
即レスありがとうゴザイマス
多分それはやってないと思います

photoshopでスライスした画像を置いてるんですが・・・・・

.f_box {
margin: 0px;
padding: 0px;
clear: both;
width: 801px;
background-color: #000000;

これの真上に1mmくらいの隙間ができてしまいます

> clear: both;
ってfloatがからむと微妙な調整は難しいとおも

何か解決策はないでしょうか？(TT)

前後のソースを見ていないからはっきりしたことは言えないけど
＞photoshopでスライスした画像
というのは大きい画像を細切れにしてタイル状に並べてるということ？
もしそうならもともと物理的でむちゃなマークアップをしていると思われるので
無理にcssでしないでテーブルレイアウターになればいいと思うお（＾ω＾）

>>157
スライスしたって事は、1mm分の画像が出来てるのかも知れない。
つまりスライス失敗って事なんだけど。
書き出しツールでhtmlを出力してみて隙間が出来ないなら、可能性あり。

>>154
右固定幅float:right;、左margin-right

右はなおさらwidth不定だと思うが・・・どうだろう

>>157
imgに適用してるの？divに適用してるの？
divだったらソース中の空白文字かもよ。

>155
img { vertical^align : bottom; }

あ、誤字してるや・・・まあ酔っぱらってるんで適宜直して。

>>157
う〜ん、それだけではなんとも･･････。
ほかの人が言ってるみたいにそもそもスライス失敗してるかもしれないし。
差し支えなかったらどこかにそのページをアップロードしてみてもらえませんか？
そっくりそのままではなくてもスタイルシートと問題の画像前後の部分の
抜粋だけあれば色々と確認できますから。

スタイルシートでの段組に初挑戦していますが、表示がサンプル通りにうまくいきません。参考雑誌の｢スタイルシートスタイルブック｣のp28にある基本のブロックをレイアウトするという項目なのですが、考えとしては
・ヘッタ部分とコンテンツ部分は別ブロック
・コンテンツ部分のブロック内にはさらに三つのブロックがあり、幅が左から33% 36% 36%でコンテンツブロックの幅が100%

サンプルスタイルを保存してサーバーにアップしていますが、こんな感じで良いのでしょうか？自分としてもサンプル内容が間違っている気がしてならないのですが・・・

http://take-off.org/yoshihiko/sample/test01.html

>>168
スペルミス：abusolute
あと、reLativも認識するだろうけど小文字統一がいいでしょうね。

105%

ごめんなさい。助けて下さい。
やりたいことのイメージ↓
ttp://oxygen.sakura.ne.jp/uploader/images/114002137800.gif

具体的に,html側は
<body>
<div id=container>
　　<div id=head>
　　</div>
　　<div id=main>
　　　　<div id=menu>
　　　　</div>
　　　　<div id=content>
　　　　</div>
　　</div>
　　<div id=foot>
　　</div>
</div>
</body>
となっており、テーブルを使用せずにgeckoエンジンにてメニューとコンテンツを左右表示させたい。
IEだとfloat:leftで問題なし。但しFirefoxだとめちゃくちゃ（縦表示+なぜかfootが上部に来る）。
全部absolute指定で上手く行くが、メニューとコンテンツはページにより高さが異なり、footの位置をabosoluteで指定することが出来ないため却下。

無い方が好ましいのであればcontainerとmainは無しで構いません。
上記の条件を満たすcssを教えて頂けませんでしょうか？
宜しくお願いします。

うはっ　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ﾁｭｳ

>>171
一から全部やれってか？

　　やなこった！！！

メニューとコンテントにフロートレフトでよくない？

>>169
お恥ずかしい。。。スペルミスなんて基本的なミス。
早速直しました。ralativも小文字の方で統一しました。

>>170
そうなんです。
左右中央のブロックパーセントを足すと5パーセント余分なのですが
本を見るとこのとおりなのです。

>>171
うちのサイトちょうどこんな感じで
mainとmenuをなくした形なんだけど
1から作ってみたらなぜか再現できない
変だな…

menuじゃなくてContainerだった

>171
ブロックを順に積み上げていって、並んでいるのをfloatでいいのでは？

フッターを常に表示させたいのなら、メインのブロックにスクロールバーを出すとか。

>>168　>>175
105%は明らかに間違っている。捨てちまえ。

本のとおりだからそれで良いと思った根拠を教えてくれ。

>>171
floatするdiv要素のwidthは明示した？
winIEでイケてFireFoxでダメっていうとwidthなしfloatの
サイズ自動充当のありなしの気が。ちなみにFireFoxの挙動が正しいのよ。

>>171
おまいのCSS出せ。

>>171
これでどうよ。MacIE5.2/FireFox1.5/Safari2.0.2で正常レンダ確認済み。
WinIEは起動するのめんどいから勘弁してくれ。

<style type="text/css">
<!--
div {
border: #999 solid 1px;
}
div#menu {
float: left;
width: 30%;
}
div#content {
width: auto;
}
div#footer {
clear: both;
}
-->
</style>

div#content {
width: auto;
}
は明示不要かも。

これでいける

div#menu {
margin-left: auto;
}
div#menu, div#content {
float: left;
}
div#foot {
clear: left;
}


margin-left:はautoじゃなくてもいいけど忘れるとダメ

<html><head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>sample</title></head><body>
<div id="container">
　　<div id="head">
　　　　HEAD
　　</div>
　　<div id="main">
　　<div id="menu">
　　　　start
　　　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　end
　　</div>
　　<div id="content">
　　　　start
　　　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
　　　　end
　　</div>
</div>
<div id="foot">
　　FOOT
</div>
</div>
</body></html>

#container{
background-color: #FFFFFF;
width: 765px;
height:100%;
position: relative;
}
#head{
height: 75;
width: 745;
position: relative;
border-bottom: solid 2px orange;
}
#main{
position: relative;
padding: 5;
}
#menu{
float: left;
width: 180;
}
#content{
width: 560;
float: left;
}
#foot{
position: relative;
height: 56;
border-top: solid 2px orange;
}

一応載せて見ました。
書き込んでいる間に、色々提案があったようなので、先にそちらを試して見ます。
みなさんありがとうございます。

>>186
なんかえらい複雑なことしてるなあ。オッカムの剃刀で
ザクザク切った方がいいよ。position:relativeいらんべ。
containerのheightとかどういう意味あんだろ？　あと
数値指定にはpxつけよう。あとpaddingとwidthをIEで
いっぱい使う場合は「ボックスモデルハック」についても
ぐぐる。

度々すいません。
解決致しました。
containerの高さを指定せず、footにclear:leftもしくはclear:bothで上手く行きました。
本当にありがとうございます。

>>188
ご指摘ありがとうございます。
早速『ボックスモデルハック』調べてみます。

>>180
どうする？

divの中にdiv入れてpadding設定するのってボックスモデルハックっていうのか。
floatとborderでずれるのを何とかしようと無理やり編み出したんだけど、
知ってたらあんな苦労しなかったんだな･･･orz

ちっと違うような・・・

>>191
食パンくわえてダッシュしながら街角での出会いを期待するよ。

>>192
ちがうのー。ボックスモデルハックはWinIE5系固有のCSS解釈の
バグ（というか間違った実装）を吸収するためのCSSハックなのー。
これで調べればWinIE5系のmargin/padding解釈の問題がわかる
だろうから、それ由来の「ガターン」が解決しやすくなるだろうと
思って。

>>194
んー、IEだとborderの太さの分も含まれるとかいうやつと一緒じゃないの？
width: 200px; border: 20px solod;
だったら、200pxと240pxの違いになってしまうのを、
入れ子のdivにborderを設定すると同じに出来るって感じで。

わかった、間違った要素を書くと無視されるのを利用して、
後から正しい要素を上書きするってことか。

調べたけど>>192でも合ってるっぽくない？
margin/paddingじゃなくて、margin/padding/borderだよね。
で、解決策の一つとして>>192のdiv入れ子もあるっぽいんだけど。

>>197
ボックスモデル解釈誤りに対する対応策としてはそれでもOK。でもそれは
ストレートアヘッドなやり方で、いわゆる「CSSハック」としてのボックス
モデルハックとは呼ばないと思う。あとはhtml側に余計なラッパーdivタグが
増えるのを嫌うか、css側にダーティハックを持ち込むのを嫌うか、という
好みの問題だね。

192はよく自力で解決できたなぁ

>>198
なるほど、理解した。
どっちも覚えておいて損はなさそうだね。
応用もできそうだし。

>>179
わかりました,

でパーセントで作成する場合は
.container 100%
.left　　33%
.mid　　34%
.right　33%
で良いですかい？

WinIE6.0ではthead,tbody,tfootに
border関連のスタイルのが適用されないんですか？
mozillaでは適用されてるみたいなんで・・・
どちらが正しい解釈なんですか？

>>154です。
>>162さんレスありがとうございます。返信が遅くなってすみません。
言い忘れていましたが、<ブロック２>のほうも可変なんです。
親要素が100%とすると<ブロック１>と<ブロック２>の合計が100%になるような感じです。

31です。
ネットが死んでいて返事が遅くなりすぎて申し訳ありません。
やりたいこととしては、CSSを使わない場合は通常のサブミットボタンで
「登録」というテキストが書いてあるものを、完全に画像のボタンに置き換えるか、
type="image"のボタンで、デフォルトで画像が指定されていないものを、CSSで設定する
ような処理をしたいのです。
通常のサブミットボタンの方は背景色を透過し、background-imageを設定すると、
もともと書いてあるテキストが邪魔になってしまいました。
imageボタンのほうは、background-imageで画像は出るのですが、×も同時に出てしまい
ました。
これをなんとか解決する方法はありますでしょうか？
何度も申し訳ありませんが、アドバイスをお願いいたします。

文章を何とかしてくれ

>>203
ブロック1とブロック2をブロック0で囲んで
ブロック0{display:table}
ブロック1,ブロック2{display:table-cell}

IEとかでもやりたいなら固定floatかdisplay:inlineで我慢

>205
了解

CSS切り替えで「登録」と書いてあるサブミットボタンの画像を
切り替えるにはどうしたらよいですか？

カーソルを乗せた時にリンクの色を変えるには
<style type="text/css">
<!--
a:hover {color:#ｆｆｆｆｆｆ;}
-->
</style>
で、出来ましたけど、これだとページのリンク全体にかかってしまいますよね。
これを部分的に適用するにはどうすればいいでしょう？

>>208
1つ：ID
複数：クラス
で指定する

>>209
ありがとございます。なんとかできました。

float
position
display
の違いがよくわかりません・・・

違いの何がわからないのかがわからないくらいに全然違います・・・

質問じゃないけど、>>3の
> ・IE で min-width を指定する方法
> 　http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
このページのコメントに笑ってしまった人は他にもいるはず。

>>213
すげー阿呆かと。

IEがmin-widthを適用した風に見せかける方法。

CSS作者が指定する。
UAが適用する。

IEはCSS作者じゃないから、指定は出来ない。

IEであろうが、何であろうが、min-widthを指定するのは簡単。書くだけ。
IEは、適用するか、無視するか。

>>213
どうみても釣りです。
本当に

ソースを用意したので、もう一度お願いします。
左メニュー、右コンテンツの２段組みをfloatで作って、
コンテンツの中でfloatとclearを指定すると、段組みのfloatまで
解除されてしまいます。こういう場合はpositionで段組みするべきですか？
難しいテクニックは使わず、オーソドックスにできればと
思っています。よろしくお願いします。

スタイル：
#menu {float: left; width: 40%}
#contents {margin-left: 40%; width:60%}
img {float: left; width: 50px; height: 50px; border-style: solid}
p {clear: left}

HTML：
<div id="menu">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>

<div id="contents">
<p><img src="test.jpg" alt="">text text text</p>
<p><img src="test.jpg" alt="">text text text</p>
<p><img src="test.jpg" alt="">text text text</p>
</div>

>>150
imgをfloatしなくてもいいんでないの？

>>218
textの部分をimgの右隣に持ってくるには、floatが一番簡単かなと
思いました。textの長さはまちまちなので、imgが必ずコンテンツの左端にくるように
p {clear: left}としています。

え？

えーふつうはどうするのですか？
一人で本読んだりしてやっているので
常識がよくわかりません。どうかおしえてください。

>>150
『やってみる』という事をしなければ、進歩はない。
常識が足りないなら学ぶ努力をするべき。

>>222
floatを使った段組みも、コンテンツの中でやっているfloatとclearの
使い方も、よくあると思うのですが、一緒に使ってはいけないという
話をどうしても見つけられませんでした。
それで、両方を一緒に使うのに、何か私の知らないやり方が
あるのではないかと思ってお聞きしています。
それとも、やはり両方を一緒に使ってはいけないのでしょうか？

>>150
一緒に使ったら出来なかったんでしょ？
出来てるサイトがあるなら、そのサイトのソースを勉強すれば？

>>217
とりあえず、CSSを全部無効にしてごらん

テーブルの行幅なんですが
textbox等のフォーム部品を入れると部品下とセル下線の間に空白部分ができるのですが
これをつめることってできませんでしょうか？
テーブルで一応cellpaddingとcellspacingは0にしているのですが・・・

>>226
「textbox」ってのがどういうものかわからないけど、

・　ソース内での「フォーム部品」の前後にスペースやタブを入れず他の要素を続けて書く
・　「フォーム部品」たちをdisplay:block;にする

などはどう？うまくいくかどうかは、試していないけど。

質問お願いします。
数年前にHTMLのみでHPを作ったことがある程度で、新しくCSSを使って勉強している者です。

http://www.2step-css.com/flowchart/index.htm
このサイトの上から2番目のBarのHPの構成を参考にしているのですが、
レフトボックスにメニューが表示され、センターボックスに内容が表示されているようです。
レフトボックスのメニューのリンクから、センターボックスのみの内容を変更するリンクを作ることはできますか？

以前HTMLだけで作っていたときは、ページを二つ作ってフレームで結合させる方法でやっていて、それしか知らないので。。
CSSだと例えば標準的なブログ系HPの構成のように、メニューリンクからページの一部分だけを変更する設定ができるのでしょうか？

>>228
単にリンク先の同じ場所に同じメニューが表示されてるだけ。

1枚目の紙に回、2枚目の紙に囚、3枚目に困でも書いて
ペラペラ動かしたら□の中身だけ入れ替わってるようにみえるでしょ。

>>229
なるほど、よくわかりました。
どうもありがとうございます。

ライブドアブログのデザインを変更したいのですが
ド素人でも一から勉強できるサイトってないでしょうか

ありません

*{margin:0;padding0;}
にして全てのマージンとパディングを０にしました。
これをにセレクタよって解除、あるいは指定しない方法はありますか？

例えば「ul」に対してはマージンを０にはしない、あるいは解除するといった様にです。

>>233
各ブラウザのデフォルトのマージンを使うのは無理だけど
*{margin:0;padding0;}
のあとに
ul {margin:0 0 0 4em;}
などとすれば左側に4emマージンをとったりできる

>>231
ttp://www.k2.dion.ne.jp/~spag/
ttp://pasokon-yugi.cool.ne.jp/website_kouza/

>>233
どんぴしゃに期待通りのはまだ待たないといけない
*:not(ul){margin:0;padding:0;}

CSS3の勧告っていつ出るんかな

ありがとうございます。

h1 {text-align: center}

をW3CのCSSvalidatorで検証すると１０回に１回ぐらいの割合で、
「このプロパティはブロックレベル要素に適用されます」
って警告出るんですけど、なんででしょうね。

さぁ・・・

>>238
ヒントtext-align: center

@importってあまり使わないほうが良いのでしょうか？

そんなことはないよ
自分が混乱しないならいいんじゃないかな

無駄に使えばそれだけ無駄なリクエストが発生するんじゃないの？
と無駄なレスを付けてみる。
あまりにも微々たる物だから
よっぽど余裕がないんでなければそんな努力無駄だと思うが。

CSSファイルを外部ファイルとして読み込んでいるのですが
bodyとかtableのスタイルは反映されるのですが
inputに対するスタイルが反映されません。
直接書くと当然反映されるのに何が悪いのでしょうか？
もちろん優先順位はわかっています。
<link href="./style.css" rel="stylesheet" type="text/css">
<input id=hoge value=0>

>>244
とりあえず
<input id=hoge value=0>
を
<input id="hoge" value="0">
にして

あとinputにだけ反映されないのなら
cssファイル内のinput部分をコピペしたほうがいいかと

えっと
input.#num {text-align=right;ime-mode:disabled;}
が外部記述です。
#抜いてclassにしても駄目でした・・orz

>>246
<input id="hoge" 〜 />
なら
input#hoge {}
でinputの後に「.（ピリオド）」はいらないし
text-align=right;
じゃなくて
text-align:right;
だよ
適当にやらないでください

>>244はケアレスミスで受験に失敗する

ime-modeって何かと思って調べてみれば
まだM$の独自拡張かよ・・・(´А｀)

>>249
なかなか便利な機能だよね

>>250
IEなんか使わないし、使ったとしても勝手に切り替えられるのはうざいことこの上ない。
ユーザの自由を勝手に奪うという点でtarget="_blank"と同列だな。

gooの検索フォームはime-mode:active;になっててこの上なくうざい
英和辞書を使う気満々のとき

>>252
IEで行ってもならないならないどうしよう壊れたか
と思ったらgoo辞書のホームじゃなくてgooトップから辞書を使う場合ね・・・orz

それはgooの中の人に非がある。

>>247 すいません・・。
けっこうどう書いても動くので正規がわかりにくくて。
もっかいちゃんと書いてやっています。

ﾊｳ･･駄目でした。
皆さんは外部ファイルからでもinputにスタイルを与えられますか？？

inputのdisplayのデフォルトはinline-blockで
text-alignの適用対象はblock-level elements

>>256
<input id="num" 〜
にtext-align:right;
を適用させたいのなら

/*ここから*/
input#num {
width:8em; /*←ここの数字や単位は任意*/
display:block;
text-align:right;
}
/*ここまで*/

をcssファイルにコピペして試してみて
確認はしていないから思い通りに行くかどうかはわからないけど

>>256
あたりめぇだ。

どうせ HTML がおかしいだけなんじゃねぇの？
とにかく CSS と HTML を W3C の Validator にかけろ。
話はそれからだ。

うーんわからない・・　直接ならいけるのになぁ・・
>>258　駄目でした。
>>259　ime-modeはないとか言われたのでime-modeなしでやってみたが駄目でした
html文
<HTML>
<HEAD><link href="./style.css" rel="stylesheet" type="text/css"><HEAD>
<BODY><input type=Text id="num" value=0></BODY>
</HTML>

CSS文
input#num {text-align:right;ime-mode:disabled;}

>>260
おまえさ・・・言われたことやってるか？
lintで確認してこい。

↑　すいません256でした。
でvalidatorの細かい警告とか直してると知らない間にいけてました。
結果的にはそれ以外のスタイルもファイルに乗せているのですが
その上のところでうまく読み取れず下にあったこのスタイルも反映されていなかった
かと思われます。

みなさんご迷惑かけてすみませんでした。

>>262
>>>235

「すいません、時計の針がこうなってるんですけど、今、何時ですか？」
「9時ですよ」
「ありがとうございました！」

「すいません、時計の針がこうなりました。今、何時ですか？」
「どれ？　ああ、9時15分ですね。」
「ありがとうございました！」

「すいません、さらに時計の針が動いて、こうなりました。何時でしょう？」
「9時30分です」
「ありがとうございました！長い針が6の位置に来た時は30分なんですね！」

「ええ、そうです（・・・時計の見方を勉強すればいいのに・・・）」

デジタル時計の例も書いてもらおうか。

body{hight:155cm:character:good;}
.h{eye:x-large;
hair:medium-straight;
hair-color:darkbrown;}
.b{bust:B-cup;
waist:60cm;
hip:79cm}

<div class="h">〇</div>
<div class="b">十</div>
∧

typoで身長と性格の指定が無効になってるな。
占星術殺人事件か？

contentプロパティでアンカーを生成するにはどうしたらいいんでしょうか
<blockquote>のcite内のURIをクリックできるように
<a href="attr(cite)">attr(title)</a>
といったものを生成したいのですがそのまま表示されてしまいます
そのまま表示されるのが当然だと思いますがなんとかならないでしょうか
Javascript等を使用しないでCSSだけで・・・・

って、やっぱり無理ですか？

>>268
ちょｗｗｗおまｗｗｗｗｗ
ttp://linkage.xrea.jp/article/2004/07/css2print.php
ここのURI出力のとこ参考に汁。

>>268
あ、ゴメン読み間違いしてた、けどそれすげー間違いｗｗｗ
JS使わないと無理だよ。

>>269-270
レスどうもありがとうございます。
やっぱりcssだけでは無理ですか・・・・
うすうす感づいていたんです。
でも、それでもこのスレの人ならやってくれる！・・と思って。
どうもありがとうございました

＞スレの人ならやってくれる！
・・・規格から作り直せるとでも？

ハックは規格を超越する！そんな騙しのテクニックみたいなのがあるのかな・・・・と。
IEならまだしもFireFoxとかは騙せませんよね。すみません。

IE7 で content が解釈されるようになったらバグって実現できるかもね

今のところIE7はcontentに対応する気配もないがナ・・・ハハハ

textareaに自動改行させたくないのですが、wrap="off"の代替となるcssってどう書きますか？
white-space: nowrap
はtextareaに効きませんでした。

Mozilla/5.0 (Windows; U; Windows NT 5.0; ja; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

>>276
ソース失念。
Mozillaの-moz-うんちゃらに隠しであったと思う、探してみ。

>>277
white-space: -moz-pre-wrap;
のことでしょうか？
やりたいことはwrapではなくてnowrapなので。。。

>>278
それじゃない。

>>279
了解です。引き続き調べてみます。

WinXP、Firefox1.5、IE6使用してます。質問させてください。

<body>
<div id="box">
<div id="navi">あああ</div>
<div id="list">いいい</div>
</div>
</body>

#box { width: 500px;
position: relative; }

#navi { position: absolute;
top: 10px; right: 15px; }

#list { position: absolute;
top: 140px; left: 30px; }

としたとき、Firefoxでは理想の形に表示されるのですが
IEだと #list が消えてしまいます。IEの独自バグでしょうか？
また近い形にする方法などありましたらアドバイスください。
よろしくお願いします。

まr銀ーとp：10px；
ｆぉあｔ：りｇｈｔ

まｒぎんーとｐ：140ｐｘ；
fぉ亜t：ぇｆｔ；

>>281
何がどう理想外なんだ？
それだけのソースだとIE6とFirefoxで同じ表示なんだが。

>>283
他のcssのせいなのでしょうか？
私のブラウザではIEの場合#listのほうが表示されなくなってしまうのですが・・・
もう少し見直してみます。

>>284
たぶん。
ホントに281だけのHTMLファイル作って確認してごらん。

>>285
そうしてみます。どうもありがとうございました。

body { margin-top: 0px; margin-left: 0px; margin-right: 0px; } 、
div { height: auto; width: 100%; } の中に画像を置いたものを2つ並べる際、
2つの div の間に空白ができてしまいます。この空白をどうにかして消せない
ものかと試行錯誤しているのですが、どうもうまくいきません。

下の div に padding-top: -4px; を適用することにより解決できましたが、
マジックナンバーを指定してしまうことにより一部の環境で正しく表示されなくなって
しまうという事態を恐れています。上の方法以外での解決策はありませんでしょうか。
どうかご教示願います。

(Internet Explorer 6 および Firefox 1.5.0.1 (ともに 1280x1024, Windows) で確認しました)

>>287 は、
<div>
　<img ... />
</div>
<div>
　<img ... />
</div>
ということです。
変な日本語のまま書き込んでしまい申し訳ありません。

こ、こうかな！？

div img { vertical-align: bottom;}

>>288
単純にdivに
{margin:0; padding:0}
を追加してもダメかな？

おれはCSS書く時にまず最初に

*{margin: 0; padding: 0;}

って書いてからやってるよ。
必要な時にだけ入れるほうが判りやすいから。

はじめにリセットすると確かに作りやすい。

<kbd>@</kbd>
kbd { padding: 0.5em; border-width: 1px;
border-style: solid; border-color: #999999; }

例えばこんなコードを書いたとき、
「@」の文字が親要素の右端ぎりぎりのところにくると、
Firefox 1.5.0.1 では、親要素の padding の領域内に「@」が侵入してしまいます。
この場合はマークをはずすと通常通りに改行されるのですが、
これはバグなのでしょうか？
長い URL などを書いたときに強制改行されないのと
同じ原因かもしれないとも思うのですが、どうでしょう。

半角ですと長くなっても改行されずに続いてしまうようですよ

それは仕様。
英単語は途中で改行されると意味不明になってしまうからね。
日本語みたいに途中で改行されても意味を保てるのが特殊。

半角スペースの無い英数が続くと、paddingどころかtableも突破して横に伸びつづけるよ。

>>289-290
どちらの方法でもうまくいきました。
ありがとうございました。
>>291
確かにこれは便利ですね。
ありがたく使わせていただきます。

訂正します。
{margin:0; padding:0} だけではできませんでした。
div img { vertical-align: bottom;} も使う必要があるようです。

スレ汚し失礼いたしました。

<kbd>P</kbd>キーの右隣に<kbd>@</kbd>キーがあります。

例えばこのように、日本語に混じって他言語の文字があるとき、
Firefox では、kbd 要素内の文字がたった1文字でも、強制改行されないようです。
IE では word-wrap や word-break が先行実装されているうえに、
デフォルトでは勝手に改行されるので、
改行重視とでも言えるのでしょうか。
Firefox はその反対で、言語の仕様を重視といったところでしょうか。
他の言語に詳しくないので、日本語だけが特殊なのかまではわかりませんが、
「途中で改行されても意味を保てるのが特殊」というのは、説得力がありますね。

超初心者なのですがＩＥで代替テキストを表示されないようにするには
ＣＳＳにどのように記述すればいいでしょうか 教えてください

ナビゲーションバーは、見栄えよく画像にしたいのです。
その時、ＣＳＳで背景として指定した方が、その画像を変更したりするときに
全ページに反映されるから便利だと思うのですが、何か不都合とかありますか？
そういう風にやっているサイト、あまり見かけないものですから。

imgタグでも元のファイル変えれば全部に反映されるしょ？

あ、そっか。気が付きませんでした・・・
ありがとうございました。

おまいかわいいな！
うちにこないか？

>>302,303
画像サイズごと変える場合は普通imgタグで画像サイズも指定してる（DWでは
デフォで画像サイズがimgに入る）から、あかん。だからサイト全体にまたがる
画像をサイズごと変更したときにソース変更工数を少なくする工夫としては、
CSSによる画像置換テクニックは結構使える選択肢のひとつ。

もちろん不都合もいくつかある。特に大多数の画像置換（≒何らかの形での
「文字消し」テクニックを含む）で問題になるのは、「画像非表示／CSSオン」
シナリオにおいて、画像置換した画像も文字も見えなくなってしまうという問題。
これは画像置換をナビゲーションバーに使う場合は致命的問題になりうる。

リストを使用しようとおもっているんですが、
■a
■b
■c
a、b、cのリストの間隔をCSSを使用して変えることはできないんでしょうか？
よろしくお願いします。

liにCSSでmargin-topとmargin-bottom設定。

>>306
解決しました。
ありがとうございました。

そういえばイメージタグの場合ですと、ナビゲーションバーを横に配置するとき
タグは改行できないじゃないですか。
改行すると、ＩＥで閲覧したとき隙間できてしまいますし。
そういう意味でソースも見やすいＣＳＳでやった方が良いかなって思いました。
自己満足な部分かもしれませんけれど。

CSSで段組に挑戦しています。
　作成しているサイトのソースは

【HTML】
<div id="continer">
<div id="whatsnew">
更新履歴
</div>
</div>

【CSS】
body,td,th { color: #6699CC; }
body { background-color: #FFFFCC; }
#div .whatsnew { width: 200px; left:20px; margin: 0px; padding: 0px; position:absolute; left:auto;}
#continer { width:100%; }
実はwhstsnewは右表示にしてナビゲーションを設置する場合は rightで場所を決めてpositionは絶対配置にすればよいのでしょうか？

どこが段組なん？

無心になれ
さすれば自ずと道は開かれる…

>>308
というか、ナビゲーションパーは「リスト」の部類なんだからul/liでマークアップすべき。
たとえ字で書いてCSSの画像置き換えを使おうが、img要素で行おうがね。
どっちにしろ横に並べるときはfloatを使う。

>>308
>>312氏の言うとおり、水平ナビゲーションバーの要素についてはul/liを使い、
横並べのときはliにfloatをかけたり、display:inlineにして横並べしていくのが主流。
俺はレンダ結果がイメージしやすいinline化の方が好きだな。

具体的なCSSコードの書き方については、下記のListamaticにほぼあらゆる
パターン（水平型・垂直型・画像置換など）が集約されているので、参考に。
http://css.maxdesign.com.au/listamatic/

たとえばこれ↓なんかはお望みのものにかなり近いんじゃないだろうか。
水平・画像置換・ロールオーバー効果有り。
http://css.maxdesign.com.au/listamatic/horizontal29.htm

>>313
inlineを薦めるとaをblock化する置き換えでハマる希ガス

sleipnirを使っていますが、タブの左側に表示されるアイコンだとか、
お気に入りの左側に表示されるアイコンを変更する為にはどうすれば良いのでしょうか？
検索をしてみても、「タブの左側に表示されるアイコン」の名称がわからないので検索できません。
ご教授願います。

faviconでググルと幸せになれる。

>>316
幸せになれました。
ありがとうございました。

>>316-317
この流れ、以前にも見たような・・・・デジャヴか・・・・

すぐ真下に初心者用質問スレがあるのになんでこっちで訊くかね

表全体にハイパーリンクを張ることってできるのでしょうか？
各セルに<a href>書いていくのがめんどくて・・・

>>320
できません。
つーかCSSじゃないし。

かなり無理矢理な方法だが

<a href="〜〜〜"><object>
<table summary="○○○">

（省略）

</table>
</object></a>

>>322
代替のないobjectは邪道

お前ら全員あっち逝け

Webサイト制作初心者用質問スレ Part 154
http://pc8.2ch.net/test/read.cgi/hp/1139924613/

代替しかない・・・・

>>320
<table>
<tbody onclick="javascript:location.href='hogehoge';">

とかすればいいジャマイカ

……まぁ、なんでCSSスレ聞くかって事だけどな

>>324 の言うとおりこっち逝け

Webサイト制作初心者用質問スレ Part 154
http://pc8.2ch.net/test/read.cgi/hp/1139924613/

>>326　すいません。
Web製作いこか迷ったのですがCSS寄りかと思ったので・・
ありがとう。

>322
氏んで、氏んで。

構造を考え直した方がいいよ
tableの前にリンク置いとくなりcaption入れてその文字列にリンクするなり

ブログをキャッシュから見たらTOPの画像がズレるっていうか
同じ画像が4枚くらい出るんですけど、何で？
テンプレの仕様？CSSが原因じゃなかったらすみません

はいはい丸恥

http://www.2uwebdesign.com/lecture/img/layout.gif
この画像のデザインをスタイルシートで再現したいのですが
うまくいきません・・・

<DIV align="center">
<DIV class="linetop">
<HR size="1" color="#9696FF" align="center">
</DIV>
<DIV style='font-family : "Times New Roman";font-size : 13px;margin : -17 0 -9 0px ;'>test</DIV>
<DIV class="linebottom">
<HR size="1" color="#9696FF" align="center">
</DIV>
</DIV>

<STYLE type="text/css">
<!--
.linetop{position : relative;margin:20px 20% 1px 10%;z-index : -4;}
.linebottom{position : relative;margin:2px 10% 0px 20%;z-index : -5;}
-->
</STYLE>

>>332
<hr>にスタイル付けようとしてるようだが、
一部ブラウザでしか反映されないよ。

hrの上下にもブロック要素をおいて幅を指定するとか

CSSで画像を立にならべて表示するのってどうやってやんの？

>>335
●基礎は解説サイト（→【解説など】>>3-4）で勉強してください。
●OSやブラウザの種類とヴァージョンについては必ず明記してください。
●「環境を書け」とか「ソースは？」と求められたら応じませう。

>>336
氏ね( ´Д｀);∵ぶっ

ここまで馬鹿丸出しの質問者も珍しいかも。

336=338
オマエガナー(　´･∀･`)

ということは336=338（？）が質問者ということですね

いや、「質問者」の意味がわからないほど馬鹿丸出しの339ってことですね。

アフォが一人でおどってまつ↑↑↓↓←→←→BA(ﾟ∀ﾟ)↑↑↓↓←→←→BA!!!!!　

たしかに342が独りで踊ってるな。↑
ハイ次の方、質問どうぞ。

>>342
コナミコマンドなんか使ったら自爆しちゃうよ！

up up down down left right left right b a

っていうバンドがあったね。
http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?p=63333651&s=143462

>>332
初心者スレでもそうなんだが、
この頃つけなきゃならない場所にpxを付けないのは流行りなのか？

彼らはWinIE互換モードだけで確認してるからでしょ。>>346

>>347
それでもまともに動かないんだけどな

ネタ質問者が増えてる予感。

我が家の環境は、日当たり良好。

<div id="main">

<div id="a">
</div>

<div id="b">
</div>

</div>

div#menu{
background-color:#000000;
}

とやっているのですが、背景色が適用されません
これはどこかコードをミスをしているということなんでしょうか？
それともまだ何か足りないのでしょうか？
<div id="main">と<div id="a">の間に「あ」などの文字を入れたら、<div id="a">の上の方の「あ」の所だけ色が付きました

div#menu→div#main

訂正です

追記です
IEの方だけdiv#mainでwidthを指定したら背景色が付きました
opera、firefoxは何も付きません

bの方に内容をぶっこんだら背景付きました
解決しました
でもaの方には内容があるから背景付いてもいいような気がするんですが仕様なら仕方ないですね

>>351

<div id="main">

<div id="a">
</div>

<div id="b">
</div>

</div>

↑これには実際にも<div id="a"></div>や<div id="b"></div>の中身も空なのかい？
それともここに載せるために省略したのかい？

>>361
中身がないところに背景色もクソもない。
HTMLはまず中身（テキスト）ありき。
IE以外が正しいです。
空divはいけません。

>354
> <div id="a">
をfloatしてない？

実は div#a にも背景色指定があってそれが body の背景色指定と
同じだったとかいうオチとか。

>>355
aの方にはあります
bの方にはないです
まだ外枠だけ作っているところなので

>>357
イエッサー

>>354、>>357、>>359という一連の流れ。シンでもいいですよ♪

音符とかつけてバカみたい

359に無視された・・・

だいたひかるのネタのパクリでそ

おｋおｋｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ
うっぇｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

>>359　フロートのＦＡＱを読んでおけよ。>>6だ。

ありがとうございました。
ナビゲーションバーはとりあえず、<li>をインライン要素に設定して
横ならべにしました。

ところで、ファイアフォックスで閲覧すると、なんだかフォントが
明朝っぽい表示になってしまうのですが、ファイアフォックスは
元が明朝なのでしょうか？
どのブラウザでも、なるべく同じように表示させたいと思っています。
ちなみにゴシックに設定してみたんですけれど、微妙に違うようです。

>ゴシックに設定してみたんですけれど

設定出来る事を知っているなら、閲覧者個々の違いも解るよな？

みなさんが基本的にCSSで定義する項目ってどんなものなのでしょうか？
俺は一応
body table th td input @media screen,print
くらいなんですが他に便利なものなどあれば教えていただきたいのですが・・

全部

>>368はテーブルレイアウター

>>368
物理要素を除く論理要素は一通り

うーん・・

>>368が言う便利の意義がわからない

リストに関する質問なのですが
<ul>
<li>内容</li>
<li>内容</li>
</ul>
とやると、

・内容
・内容

と表示されますよね？それを

・内容・内容

の様に横に表示させたいのですが、どのように設定すればよいのでしょうか？

そういうときにはli要素をdisplay:inline化するか、float:left化します。

>>375
んなるほど
分りやすい説明どーもです

floatは結構ややこしいから使うなら気をつけてね。

>>373　失礼しますた
便利というのは　管理がしやすい・全体的なhtmlコードを少なくする等
でしょうか

>>374ともかぶる質問なのですが、

<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
</ul>

と言うリストを

・list1　 ・list2
・list3　 ・list4
・list5

と言う風にするには、最初から<li id="#xxx">ってid（またはクラス）を
振っておかないと無理なんでしょうか？
現在css勉強中のため、教えてく頂ければ有り難いです。

携帯からなんで検証できないけど
親要素を横幅指定しておいて
liをその半分の横幅でフロート、
でも行けるかな。

>>379
ul { ... }
li { ... }
って書けばいいんじゃない？

>>379

既出ですよ
>>264

>>380

それは例えば
ul{
width:500px;
}
li{
width:250px;
float:left;
}

と言うことでしょうか？
つまり、ulの幅を超えると下の段に「押しやられる」ことを利用すると言うことですね？


>>381
も同様の意味でしょうか？

>>382
9時30分は読めるのですが、9時45分の見方が分かりません。
より的確な時間の読み方（既出場所）を教えていただければ有り難いです。

>>383
そもそもなんでリストにしたいんだ？
テーブルに入れればいいじゃん

>>384
順序無しリストと表は違うだろ
とストリクタかぶれの俺は言いました

表と定義リストならまだ良いと思うけど

可変幅のサイトで、ブラウザの左端と右端に背景画像を
表示させたいのですが、どうしたらいいでしょうか？

画像はブラウザの上から下まで繰り返し表示で、画像の上には
他のコンテンツは乗りません。

テーブルを使って書くとこんな感じです。
<table width=100% height=100% border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=60 background="left-bk.gif"></td>
<td>コンテンツは全てここ</td>
<td width=60 background="right-bk.gif"></td>
</tr>
</table>

これをtableを使わずにスタイルシートで実現したいのですが、
高さをブラウザいっぱいにする方法が分からなくて困っています。

>>384
最初の例では「list1」とかと入れていますが、これが「menu1」であればお考えも変わるかもしれません。
ただ、汎用性をかんがえて「list」としているまでです。

>>385
私も「strict」で作ることを前提に考えています。
今回の疑問は、可能か不可能かと言う部分ですので、不可能なら不可能で構わないと思っているのですが、可能ならどのような方法があるのか知りたいのです（380や
381に書かれている方法以外無いのであれば、これ以上疑問を持っても意味が無い
ので、質問は終了しますが、他に手があれば教えていただければと思います）。

>>386
htmlとbodyの両方の左右に背景を設定。

罫線を引きたくてborder-bottomで線を引いたんですけれど
ＩＥだけ右側に微妙な隙間ができてるんですよね。
ＮＮ、オペラ、ファイアはちゃんと端まで線が引かれてるんですけれど。

ちなみに、そのborder-bottomの親要素には固定のサイズ指定してあります。
これは一体、どういった症状でしょうか？
ボックスの解釈の違いですか？

>>389
つまり後方互換モードにしてるということか？
それだけの情報で解析しろってほうが無理。

>>389
いまエスパーいないよ。

す、すいません。後方互換モードというのはいまいちよく
わからないのですが、

ＸＨＴＭＬで書いております。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
を入れているので、後方互換ですよね？
よろしくお願いいたします。

連続投稿恐れ入ります。
392のところは関係ないですね。
xml宣言でXHTMLのstrictで書いていますので、互換モードです。
よろしくお願いいたします。

>>388
ありがとうございました。
htmlで背景色と右端の画像を、bodyで左端の画像を指定したら
期待通りの動作になりました。

>>392
XHTML1.0だな・・・それでもXML宣言を入れると互換モードになるんだが。
DOCTYPEでググってみろ。

>>392
ttp://cssbug.at.infoseek.co.jp/detail/winie.html
を見て下さい。
ちなみにDOCTYPE宣言は無くてもStrictは通ります（一応、書いた方が良いのですが…）
どうしても、DOCTYPE宣言を入れたい場合はcssの振り分けが必要です。

すみません、392=393です。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

なので、互換モードです。
ＩＥの振り分けといっても、いま使われているIE6.0との切り分けは
できないですよね。ブラウザごとに、ＣＳＳの切り替えが出来るのですか？

とりあえず、固定した親要素の中にborder-bottomを入れると
右側に隙間が出来てしまう症状は、困りますよね。
なんとかしたいものです。

>>397
border-collapse: collapse;

エスパーの俺がレスしてみる。
これ使ってみ。

画像と画像を重ねたいと思っています。
以下のようなソースを書き、DW8上では重なって見えるのですが、IE6やFirefoxでは
重なって見えません。どうしたらいいでしょうか？

<img border="0" src="img/test.gif" width="100" height="100">
<img border="0" src="img/test2.gif" width="100" height="100" style="position: relative; top: 0; left: -155;">

ありがとうございます。
一応、border-collapaseで出来ないことありませんでしたが
なるべくテーブルレイアウトは避けたいのと、下線だけで良いので
悩むところです。

一応、自己解決ですが考えた末、なんとかなりました。
<div id="wrapper">
<div> テキスト </div>
</div>

#wrapper { width: 800px; }
#wrapper div { border-bottom: 1px solid; }

下線引きたいところに直接サイズ指定してしまうと、ブラウザによって
長さが変わってきてしまうので、その上の要素に線を引きたいサイズのみ
指定しておけば、解決することができました。

>>399
よ〜く考えよう〜単位は大事だよ〜

>>400
そのやり方はちょっとdivの入れ子が深くなってなってしまうけど便利だよな。

css適用の文字が小さくてcssをoffにしています。
(IEで、指定されたフォントサイズを指定しない)
これで文字サイズを最大にしていると、
縦に区切ってるサイトが激しく崩れます。

ツタヤだと3列。ttp://www.tsutaya.co.jp/index.zhtml
1列目の下に2列目、3列目と表示てしまう。

これってcssの仕様？
それとも記述が適切じゃないの？

>>403
「最大」ということはIEだな・・・・
どう見てもIEの糞仕様のせいです本当にありがｔ（ｒｙ
FirefoxやOpera使いなはれ。

>>401
<img border="0" src="img/test.gif" width="100" height="100">
<img border="0" src="img/test2.gif" width="100" height="100" style="position: relative; top: 0px; left: -155px;">

こういう事ですよね？
これで画像が重なったのですが、重なった画像の右側にスペースが出来てしまいます。
ちょうど重ねた画像分の。

これは仕方ないのでしょうか？

>>405
だってrelativeってそういうものじゃないか・・・
そんなことしないで、imgの背景画像にしてやったら？
relativeは動きが重くなるぞ。
あとCSS使ってるんだから、border="0"もCSSでやりなはれ。

>>406
なるほど…勉強になります。

imgの背景画像の場合、画像を固定できませんよね？
どのサイズの画像でも一定にしたいのです。大きい画像でも小さい画像でも
どの画像でも同じサイズで表示して、その上に画像を被せたい。

無理な話なんですかね。。。

>>407
いまいち日本語が不明なのだが、
背景画像が全部同じ大きさで、その上に別々の大きさのimgを被せたいということか？
方法は思いつく限りで二つ、
・背景と同じ大きさの24bitPNGで、背景を透かす部分を前景画像そのもので調節して、
　IE6以下用にはVMLレンダラを用いる。勿論256色なんかの場合には半透明PNGの処理は必要ない。
・前景画像はバラバラの大きさのままで、paddingで一つずつ調整して背景との重なりを指定する。

幅 50px の画像でも拡大して 100px で表示
幅 200px の画像でも縮小して 100px で表示
で
それを重ねたいってことなんじゃないかと

だったら悩む必要ないやんけ

すみません、>>388を試してみて一見上手くいったと思ったのですが、
コンテンツがブラウザの高さより短いときに、htmlの背景はブラウザ
全体に描画されますが、bodyの背景はコンテンツの下端までしか
表示されませんでした。

このような場合でも、下端まで描画させる方法はありませんか？

そもそもhtml要素に指定なんか不確実なんだから。
うだうだ言わんで画像を加工しろよ。
少しは考えれば？

怒ってる怒ってる…w

>>411
何か適当な要素を入れてbodyが画面下端まで伸びるようにしてやればいいのでは。
見えない画像をposition:fixed;で表示領域下端に置くとか。faux columnでも
疑似コラム背景を縦に伸ばすために似た手法を使うことがある。

fixedで更に深みにハメるのか？
駄目駄目。

>>415
「深みにハメる」の意味がわからない
駄目出しするなら駄目な理由と代替案出してほしいなと

じゃfixed以外の案も出しとく。htmlとbodyにheight:100%を指定する。
もちろんhtmlへのCSSは適用されないブラウザもあるしあまり美しくないから
bodyとdivでもいいけれど、とにかく最親要素から表示面の高さを100%で
継承してくるのが大事。このへんtransitionalとstrictで挙動違うので参考に。
http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

あ、手許環境でチェックしたらposition:fixedは親要素のストレッチに使えないかも…。
>>417のほうが安定して縦伸びする。

>417>418馬鹿。

>>419
煽るだけのおまえのがバカだよ、消えな

fixedとabsoluteでは包含ブロックからの関係が切り離されるから
挙動が仕様通りの場合は包含ブロックの拡張には使えないね。
だから正解は>>417でOK。>>419は馬鹿でOK。

答えは>412。

>>422
質問を嫁

長文系のサイトなんですが、スタイルシートって利用価値どんなもんでしょう？
毎回HTMLのテンプレで間に合ってしまうのですが。

>>424
CSSデザイン的なメリットとHTML構造化的なメリットがある。
上がデザイン的なメリット、下に行くにつれてHTML的なメリット。

・リニューアルがCSSファイルだけで済む。何万ものHTMLファイルをいじる必要がなくなる。
・代替CSSを用いて様々なデザインを同HTMLファイルで提供できる。
・すべてのHTMLファイルでデザイン（CSSファイル）を共有できるので、データが少なくなる。
・文書構造とデザインを分離することで、どんな環境でもCSSを切れば閲覧できるようになる。
　HTMLだけでは音声メディアや弱視環境に耐えられない。
・ソースを構造だけにできるので、あとで自分で見て非常に理解しやすくなる。
・ソースを構造化することでDOMの利用が容易くなる。
・（XML→XHTMLの場合）バースエラーを起こさないようにするためソース間違いが少なくなる。

>>424
自分で必要だと思えば、勉強して取り入れたらいい。

>>414の方法も試してみました。
IE6では完璧でしたが、Firefoxではコンテンツがブラウザの高さよりも
長いときに、背景がブラウザの高さ分しか表示されませんでした。
(下にスクロールすると背景がない)

ちなみに背景はbodyの下にdivを2つ作って、それぞれに左右の画像を
貼り付けています。

さすがにもう疲れたので、今回はコンテンツが短いときに表示が
崩れる方で妥協することにしました。
ブログの背景なので、エントリが増えればほとんど影響ないですし。
（月別アーカイブに1件しかエントリがないときだけおかしくなりそう）

414ではなくて>>417でした。

そしたらそこからブラウザ振り分け系のハックってのはどう？
FireFoxだとmin-height:が使えるはずではないかな。

まったく現実的ではない回答の嵐。
答えは『あきらめろ』だ。

誰かhttp://www.lv3.net/みたいな感じにcss書いてください

>>431
www.lv3.net/<CSSのアドレス>

質問させてください。
http://www.restspace.jp/~orz/cgi-bin/img-box/img20060223221012.jpg
overflow: scroll;　とした場合に画像のように下と右に白いスクロールバーのスペースが
できてしまいます。
これを隠す方法はないのでしょうか？
よろしくお願いします。

>>433
それはIEの仕様。
IE以外のブラウザなら出ないよ。

>>434
回答ありがとうございます。
自分もIEの使用と聞いていたのですが、Operaやシイラやサファリでもでてしまうんです。

>>435
とりあえずoverflowするボックスに、
スクロール分のpadding入れてみて。

>>433
scroll じゃなくて auto にするんじゃ駄目なわけ？
ttp://www.w3.org/TR/CSS21/visufx.html#propdef-overflow の scroll の説明だと

(略)コンテントがクリップされていようといまいとスクロールメカニズムが表示されます。
これによってスクロールバーが現れたり隠れたりすることによるさまざまな問題が
回避されます。(後略)

ってなってるから scroll にするとスクロール不要でも必ず表示されちゃうはずだけど。

>>436
>>437さんの回答で解決しました。ありがとうございました。

>>437
autoにすることで解決することができました。ありがとうございました。

<親>
<子1>
<子2></子2>
</子1>
</親>
となっている状態で、
IEだと、子1も子2も親の要素の影響（widthとか）を受けてくれるのですが、
firefoxだと、子1は親要素の影響を受けてくれるのですが、子2は影響を受けてくれません。
どのようにすれば子2にも親要素の影響を受けさせることができるでしょうか。

http://ee.uuhp.com/~starman/test/index.html←ちなみにこんな感じです。
IEだと大丈夫なんですが、firefoxだと崩れます。

それから、widthについてなんですが、firefoxでは10%と設定しても反映されません。
これは仕様ですか？px指定するしかないのですか？

明らかにcssを全く理解していないものの文章ですが、よろしければ教えてください。

>>439
とりあえずどういうCSS書いてるのかも書け。

>>439
とりあえず、IEを基準にしてはいけない

ところでみなさんはhtmlは詳しいですか？
CSSを覚えちゃうと最低限のマークアップしか使いませんよね。
最初からこっちを覚えたからhtmlがわかんない。

ボックスの後ろの背景？と、ボックス内の背景の関係を
テーブルのように分けているのは風にやっているのでしょうか？
ソース見てもどの部分かよく分かりません。
よろしくお願いします。

その程度の知識なら、無理してアレするより素直にテーブルレイアウトしたほうがいいんじゃね

>>443
日本語がわからん。
それぞれのボックスに背景を別々に指定するんじゃ駄目なのか。

>>440
上手くまとめられんです…。
>>443
ただ背景をつけたdiv要素の中に背景をつけた<p>要素を入れ子にしてるだけです。

>>439
なんでリスト知ってんのに
その後ろで
・うんちゃら
・かんちゃら
みたいなことしてんの・・・

>>446
とりあえずIEも標準モードにしてみよう。

ＣＳＳとは関係ないが

<ul id="menu">
<li class="menu"><a class="menu" href="index.html">TOP</a></li>
↑これはclass入れ子にする必要がある？
　そもそもclassセレクタで良い？

<h4><a href="#title">▲</a></h4>
↑見出しの要素？


あと、CSSではブロックにwidthと左右padding両方指定指定している。
ブロックがはみ出すのはそのせい？
IE6を標準準拠モードでレンダしてみると原因が分かるかも

>>442
その方が好ましいからいいんでないかね。
必要だったりわからなかったら覚えればいいだけだし、覚えなおすよりはマシかと。

それにそらで完璧に書ける人って殆どいないんじゃない？
tableとかって書き込む要素の数も凄い量になるからなぁ。

hr {color : #000000 ;}　は無効になりますか？
hrに色をつけたいんですが、色の指定だけ反映されません…。

>>442
最低限ってのがどういうものかにもよる。
html,body,hn,p,dl,dt,dd,ul,ol,li,
div,span,a,img,br
table,tr,th,td,caption
くらいあればレイアウトはまあ問題なかろうと思うけど。あとは、
いろいろ意味づけするインライン要素系をしこしこ覚えていけばいいんじゃね？

テーブルレイアウト一本の人はまじで
table,tr,td,a,img,br
くらいしか使わない（しらない？）。

>>451
CSSに
hr{border-color: #000000;}
って書いて設定してみ。

おいおい

>>453
できました！ありがとうございました！！

>>449
とりあえずボックスがはみだす原因だけ知りたくて、
まだ未完成のまま晒してしまったため、無茶苦茶になっとるだけです。申し訳ない。

>>428
もう諦めちゃったならいいけど

body { margin:0; padding:0;}
* html div.container {height: 100%;}
div.container1 {min-height: 100%; background: left url(hidari.jpg) repeat-y;}
div.container2 {min-height: 100%; background: right url(migi.jpg) repeat-y;}

で、全体をcontainer1とcontainer2を指定したdivで
くくるアプローチでイケるような気がする。
2行目はIEのみ適用のハック。3/4行目のmin-heightは
IEには適用されないので問題なし。絶対同じことを
考えてる人がいるはずだと思ってぐぐったらやっぱり
あったので、これで一応動作はするみたい↓。
さらに別の方法についても2番目で紹介されてるから参考に。
http://reverb.jp/vivian/index.php?itemid=457
http://reverb.jp/vivian/index.php?itemid=460


このネタtipsスレに転載しておいてもいいかな。

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

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

>>457
min-height: 100%;も試してみましたが、FireFoxでは
2つめ(内側になる方)のdivの高さがコンテンツの高さと
同じになってしまいました。(min-heightが無視されている)

divを1個だけ使って、bodyとペアにすればmin-heightで
いけそうですが…

CSSのハックは使いたくないので、現状で我慢することにします。

質問お願いします。
文章の部分に本当に簡単な外部CSSをちょっとだけ使ってるのですが、
今日はじめてFIREFOXで見たところ
CSSが全く呼び込まれておらず？非常におかしな文字になっていました。

FIREFOXでは外部CSSは読み込まれないのでしょうか？

初心的な質問で失礼しますが、
スタイルシートでネットスケープでもtable全体が
センタリングできる記述を教えてください。
宜しくお願いします。

>>461
テンプレのFAQ。

>>460
＞FIREFOXでは外部CSSは読み込まれないのでしょうか？
そんなワケないだろうが。書き方ミスってんだろ。

>462
そうですよね…すいません。
リンク先の色指定とスクロールバーの色指定、あとは文字の指定程度の
本当に簡単なCSSなのですが、ミスしてるんですよね。
色々調べながら直してみます。
もしいくらやってもまだ直らなかったら、もう一度相談させていただけると
有難いです。

div使いすぎとかdiv病とかって、どういう事なんですか？

どうしたらいいって事なんですかね？

>>460
スクロールバーの指定は一部ブラウザしか反映しない。
ヘタすると表示されない事になる。

>>439
style.css
の中の#textareaにある「 width:100%;」を削除（同様にwith="100%"のところは不要）。
特に指定しなければ「親要素の100%」になる（一部語弊あり）。

今回なぜ崩れたかと言うと、親要素の#mainに対し、width="100%"のボックスを発生さ
せている（つまりサイズを固定している）上で、paddingなど指定しているのでその分、
位置がずれる。しかも%指定なので、ウインドウサイズを変えても、margin-left分ずれる
ので、ずれが解消されにくい（#mainが実質上width指定が%なので。今の設定では親要素
からのwidth="70%"分が必ず#textareaに適応される）。

あと、idとclassの概念が無茶苦茶（idとclassで同じ名称は避けた方が無難）。
無駄な指定が多い（li内のclass="menu"とa内のclass="menu"など）。


まあ、頑張り〜。

>>464
もー、全部divとspanとaとimgだけでやってるようなのが病気。
どの辺までが普通で、どのへんからが原理主義者なのかはわかんないけど、
このレイアウトするにはこんくらいのdivはしょうがないんじゃね？って程度で
収まってればきにしなくて良いでしょう。

CSSスレ的には。

yahooのトップページあるような

＞このページをスタートページに設定する

に類似したものを作ろうと思ってます。

.topbar{
border:1px solid #000000;
width:100%;background-color:#ffffff;color:#000000;
position:absolute;top:0%;　}

という具合にやりましたが左右に空白が出来てしまいます。
左右の空白を埋めるのはどうすればいいのでしょうか？

>>468
例えがなんだか分からんが、
margin:0; padding:0;にする。

* html body {
margin:0;padding:0;
}

>>469
ページ最上部に張り付いてる灰色のバーの事です。＞例え

margin:0; padding:0;でも横に隙間が空いちゃうんですよね。
横の隙間無くボックスを配置したいのですがなんとも上手く出来ません。
ちなみにWin-IE6で確認してます。

ttp://okg.ifdef.jp/homepage_style1.html
ここのボックスセンタリング方法でやっているのですが
NN4とかIE4.5(Mac)、それ以前のブラウザではどのように見えてるんでしょうか？

>>470
書き込んでる間にレスすいません。
出来ました｡･ﾟ･(ﾉ∀`)･ﾟ･｡

が、ページ全体が詰まっちゃいますね。
一部分だけ適用させることは無理でしょうか？

>ページ全体が詰まっちゃいますね。

ｵﾏｲの設計ミス

>>467
分かりやすい説明あらがとうございます。

あとliとaにclassを指定してるのは、まだ記述してないのですが、リンク部分にカーソルを合わせた場合、そこだけ通常の変化とは違う変化をさせるためにするためです。
classとidで同じ名称を使うのは確かに辞めたほうがよさそうですね。


それからliのwidth値を10%で指定しているのですが適用されないのは何故でしょうか？
もしよろしければ教えてください。お願いします。

>>472
DLできるんだから入れろよ。
ttp://mata-ri.tk/pic/img/2388.png

>>475
classとidの値が同じなのは問題ないよ。
ただ意味づけ的にどうかとは思うが。

>>476
知りませんでした、ごめんなさい。今度から使います。ありがとうございました

>>475
同じ名称を避けた方が良いのは、混乱しないために止めておいた方が「無難」と言うだけ。
仕様上は問題ない（ただし、>477が言うように「意味付け」と言う意味では個人の判断だと思う）。

さて、widthの件だけど、それはdisplay:inline;だからです。widthを設定するためにはブロック要素（つまり「箱」）
になってなくてはいけません。そのため、ここの表記はdisplay:inline;だとテキスト要素（まあ、ちょっと違うけど
分かりやすく言えばです）になるため、width指定をしても無視されます。

liはブロック要素ですので、横に回り込ませるだけならfloat:left;を使うのが一般的です（ただし、背景やサイズの指定が
無い倍場合はdisplay:inlne;を使うこともあります）。

ただ、問題もあります。
float:leftをすると「親要素の一番左側に自動的に配置される」ことになります。
現在のデザインはセンタリングされているので、センタリングしたい…と思っても、%指定でのセンタリングは非常に
困難です（やって出来ない訳ではないが、非常にめんどくさい）。
.menuには%では無くpxで設定し、#にそのサイズに合うwidthをpxで設定する必要があります。
また、floatするとul要素全てがフロートされるので（今回は一括指定）、ul要素が表示されません。そのため、
ul要素に「明示的に」高さを与える必要があります（ul要素はブロック要素です）。

ただ、これだけではうまく行きません。それは#menuが<ul>に定義されているからです。
<ul>からid="menu"を削除し、親要素として<div id="menu">をつくり、<ul>要素をその子要素にしなくてはなりません。

>>479の続き
ですから、ソースとしては
<div id="menu">
<ul>
<li><a href="index.html">TOP</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="text/index.html">TEXT</a></li>
<li><a href="illust/index.html">ILLUST</a></li>
<li><a href="bbs.html">BBS</a></li>
<li><a href="links.html">LINKS</a></li>
</ul>
</div>
となります。
その場合は、<ul>に高さの指定を入れても無意味ですので、#menu（親要素）に入れます。
cssとしては
#menu{background-color:#FFFFFF;height:2em;}
#menu ul{width:492px;margin:0 auto;}
#menu li{background-color:#000;list-style:none;float:left;width:80px;height:1.5em;margin:0.25em 1px;text-align:center;}
となります。
※メニューの横幅80pxとして天地幅1.5em（文字サイズの1.5倍）、背景（白帯）天地2em、メニューの天地マージン0.25emの場合

どちらにしても、widthを指定する以上、リキッドデザインの場合、そのwidthを割り込んだ時点でレイアウトが崩れます。

>>480のつづき

なお、<li class="menu"><a class="menu" href="〜>は全く無駄です。
もしやるなら<li id="top"><a href="〜>（id="top"は各li要素で分かりやしものに変えて下さい）にして、
cssでは#top{xxxx:xxx;}と指定し、その子要素の<a>にcssで指定を入れる場合は#top a{yyyyy:yyy;}とした方がhtmlソースが綺麗です。
li要素全部に同じ指定を入れる場合は#menu li{wwwww:www;}で良く、
li要素の子要素である<a>全てに同じ指定を入れる場合は#menu * a{zzzzz:zzzz;}で良いのです。
※なお、ほとんどの要素は継承されますので、特別な指定をしない限りは関係ありません。

まあ、努力は買いますが、もう少しhtmlから勉強し直した方が良いかと思います。

ｃｓｓの切替で質問なんですが
ｉｎｄｅｘにインラインフレームを付けてその中にメニューを読み込ませています
ｉｎｄｅｘにｃｓｓの切替用のボタンを配置して、インラインフレームの背景を変更するには
どうしたらよいのでしょうか？

>>466
私のようなものでも非常に分りやすい説明をありがとうございます。
自分はもう少しhtml、cssともに基礎から勉強しなおすべきですね。
とりあえず、早速変更してみました。

>>482
CSSじゃなくてJSのほうの問題。

>>483

macのFFでは崩れていません。SAFARI、OPERAでも問題ないようです。
現在、リンクの下に下線が出ています。
これを消すには「text-decoration: none;」を設定して下さい（<a>タグになりますから#menu * a{}の中に指定をして下さい）。
これからも頑張って自分のホームページを充実してたものにして下さい。

やけに善良なスレになってきたな・・

>>486
トリップつけなされ。
そしたら、ご希望通りお前さんには特別に極悪非道なレスをして差し上げよう。

>>486
>現在、リンクの下に下線が出ています。
>これを消すには「text-decoration: none;」を設定して下さい

　これを善良と言えるか？

>>485
追伸
<ul id="menu">のid="menu"部分は不要です。
idはそのページで「一度しか」使ってはいけません（classは何度でも使用して構いません。idはあなた本人を表す「名前」で
あり、classは「男性」「女性」など、不特定の要素を表す「属性」です）。
<div id="menu">をその直前で使っていますので、削除しないとhtmlのルールに違反します。
ついでに<div class="p">も下に<p>タグがありますので「p{bbbb:bbb;}」で指定した方が良いかと思います。
もし、他のページでこの部分を使う場合は「p」以外の（例えばcontentsなど）の他の名称にした方が混乱が無いと思います。
最後に<h4>を<div>で囲んでいるのも意味が無いかも。<h>タグはブロック要素ですし、
一般に更新日時等に<h>タグを使用することは無いので、<div id="date"><p>日時</p></div>にしておいた方が、
マークアップ的には正しいと思います。
なお、<h4>タグの下に<h3>タグが出てくるのもマークアップ的には正しくありません。<h>タグは、見出しの構造を示す
ものですので<h>タグによるフォントサイズの違いを利用するのは間違いです（つまり<h2>の直接下に<4>があり、<h3>
があるのはマークアップ的には問題が合うと言うことです。これが直接表示に不具合を引き起こすものではありません）。

>>488
善良かどうかは解釈次第です。
ただ、あまりにも（手取り足取り）教えすぎていて「そうでなければならない」と取られることを考慮していませんでした。
そう言う意味では「善良」とは言えないかもしれませんね。
使うか使わないか、これ以上どうしようかと考えるのは彼の役目だと思いますが、彼の選択範囲を結果的に
狭めてしまったのは反省しなければなりません。
また、これがリンクであることを明示的にするには下線が出ていた方が分かりやすいかもしれませんね。
いや、おっしゃる通りと思います。

ていうか長文邪魔。
纏めろや。

(´-`).｡oO( ヘタレほど講釈が多いんなんだよなぁ・・・)

>※なお、ほとんどの要素は継承されますので

何の話をしているのだろうか。

>>217
> 左メニュー、右コンテンツの２段組みをfloatで作って、
> コンテンツの中でfloatとclearを指定すると、段組みのfloatまで
> 解除されてしまいます。こういう場合はpositionで段組みするべきですか？
> 難しいテクニックは使わず、オーソドックスにできればと
> 思っています。よろしくお願いします。

これに対するレス、まともなのがないんだけど、僕(217とは別人です)も困って
います。誰かほんとうにわかりませんか?

ようするに、float:leftを使って段組みした場合、右側(floatされた側)のボックス
の中にある要素にclearを使うと、そのボックスが左ボックスの終端まで下がっ
てしまうわけです。

いろいろ調べてみたのですが、僕もほんとうにわかりません。

だれかご教示下さい。

別にそんなことにならないけど。ちゃんと入れ子にしてますか？

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

217さんのソースはもちろんちゃんと入れ子になっています。
が、ブラウザで見てみると、
http://tomippe.jp/clearfailed.png
こうなるはずです。

217さんや僕がなってほしい状態であれば、右のpは水平位置で言うと
左メニューの上端と同じところから始まるのです。
しかし、単に画像に対する回り込みを解除したいだけなのに、その親の
divに関する「段組み」までもがclearされてしまっているので、左メニュー
が終わった水平位置から右のコンテンツが始まってしまっているのです。

そもそも>>217のソースがおかしいんよ。
これじゃ実際には「float段組」になってない。
段組するなら右も左もfloatしてやらないと。



で、>>217とは別人なんだって？　ふーん。

>>217すごいな、右カラムは浮かせないでmargin-leftで横開けしてたんだ…w

>>498
それ常識。
Liquidデザインで左メニューだと右にfloat使えないから、margin-leftで空けておく。

217は両方width指定しているから、それをする必要は全くないが。

とりあえずこれでやってみれば。
#menu {float: left; width: 40%; }
#contents {float: left; width: 60%; }
img {float: left; width: 50px; height: 50px; border-style: solid;}
p {clear: left;}

>>499
>Liquidデザインで左メニューだと右にfloat使えないから

なぜ？

そんな常識はじめて聞いた

div.entry_body img,
div.entry_more img { margin:0 5px; }
.xxx { margin:0 0px; }

ブログなんですが、
<div class="entry_body"></div>の中に
<img src="画像A" alt="" class="xxx">
の画像を挿入した場合
画像Aのマージン0を有効にするには、どうしたらいいのでしょうか？
どうしても、右側が5pxだけあいてしまいます。
class="xxx"を指定したときだけ、マージン0にしたいのですが。

img.xxx { margin:0px; }　でもだめでした。
お願いします。

すみません。環境を書き忘れました。
mac/safari&FFで確認しました。
アドバイスお願いします。

<form method="post" action="">
お名前：<input type="text" name="name"><br>
E-mail：<input type="text" name="mail" size="35"><br>
タイトル：<input type="text" name="title" size="30"><br>
コメント：<textarea name="comment" cols="60" rows="15"></textarea><br>
<input type="submit" value="送信">　<input type="reset" value="やり直し">
</form>

このようなformをCSSで綺麗にレイアウトするにはどうやったらいいのでしょうか？

>505
display:none;

*{font-size:5px;}

>>505
それ以前の問題としてさ、
form直下にはブロック要素しか置いちゃならないんだよ。
HTMLが間違ってる。

>>508
transitionalじゃないと言い切る根拠は？

>>499
> 217は両方width指定しているから、それをする必要は全くないが。
margin-left: 40%; と width: 60%; が同じ？脳みそ腐ってる？

>>498
普通に使う手法の一つじゃない？
俺もwidthでpx指定してfloat:left;とwidthで100%指定の左大マージンでやってる。

>>509
Transitionalなら非推奨な方法をとってもいいと思ってるのかバカ

>>512
無理するなよ。　　　ﾊﾊﾊ

>>497 >>498 >>500
ありがとうございます!!

なるほど、右側も浮かせりゃすむのですね。。

参考になりました。灯台もと暗し的な方法でした。

従来の方法が珍しいとは思いませんが、汎用的に解決
できる方法が分かってとてもうれしいです。

ちなみに>>217さんとは本当に別人です。

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

すみません、contentで生成した文字列を
Firefoxでもコピー（というか文字列を選択）できるようにするにはどうすればいいですか？
Opera8.5では選択可能です。

そんなのブラウザの実装依存でしょ

>>501
2カラムのLiquidデザインで、左カラムの幅が固定の場合は
右カラムの幅を指定できないから、右側にfloatは使えないよ。
floatは幅を指定しないと使えない。

>>6

>>517
左カラム固定ならそうだね。


で、問題の右カラムでのclear遣いなんだが。(1)実装正しいUAなら
pをclearせずにpを右カラム内でさらにfloatさせて縦落としすればOK
ということになるはずだ。実際
body {margin:0; padding:0;}
#menu {float: left; width: 200px; }
#contents {margin-left: 200px; }
img {float:left; width: 50px; height: 50px; border-style: solid;}
p {float:left;}
でイケた（Fx/Safariで確認）。でもIEは勝手にpを最適幅に縮めるから、
textが1行分に満たない場合は下に落ちない。そこで
p {float:left; width: 100%;}
としてみると、MacIEではなぜか「左コラムも巻き込んでclear」が
再発してしまう。週末で手許に実験環境がないんだけど、WinIEでも
似た結果になるかな？

もうひとつのアプローチ、pがimgの高さ以上になるようにすれば
いいということでpのmin-heightをimg以上にするという手もある。
使いたいimgの縦幅が決まってる時はこれで問題ない（Fx/Safariで
確認）。しかしこれもIEには効かないので、困ってしまう。

メニューだけfloatする手法って知らないやつこんなにいるんだな

>>520
知ってるならその手法で発生する問題への解決策を答えてやれよ
それができないならチラ裏に書け

>>519
WIN IE6.0だと、p {float:left; width: 100%;}でも大丈夫っぽい。
ただ、p {float:left;}だと画面サイズによっては右端が崩れる。
.＿＿＿
|　　　　 |
|　　　 　|
|＿＿＿|
texttext
text

こんな感じで文字だけ下に行っちゃう感じね。
Operaだと大丈夫なんだけど。

imgとpの両方にborderでsolidを適用させれば文字がずれるのは何とかなるが、
無理やりって感じで根本的解決にはなってないなぁ。

作業してたらふと思いついたのでやってみたら出来た。
IDとかclassは面倒なので省略、ベースは>>519。
dl {float:left;}
dt {float:left;}
dd {float:left;}

<div id="contents">
　　<dl>
　　　<dt><img src="test.gif" alt=""></dt><dd>text text text</dd>
　　</dl>
　　<dl>
　　　<dt><img src="test.gif" alt=""></dt><dd>text text text</dd>
　　</dl>
　　<dl>
　　<dt><img src="test.gif" alt=""></dt><dd>text text text</dd>
　　</dl>
　　<dl>
　　　<dt><img src="test.gif" alt=""></dt><dd>text text text</dd>
　　</dl>
　　<dl>
　　　<dt><img src="test.gif" alt=""></dt><dd>text text text</dd>
　　</dl>
　　<dl>
　　　<dt><img src="test.gif" alt=""></dt><dd>text text text</dd>
　　</dl>
　　<dl>
　　　<dt><img src="test.gif" alt=""></dt><dd>text text text</dd>
　　</dl>
</div>

ちなみにMacIE4.5で表示すると、やっぱり幅によっては右端がこうなってしまう。
.＿＿＿
|　　　　 |
|　　　 　|
|＿＿＿|
　　　text text text

Win IE6.0だと
.＿＿＿
|　　　　 |　　text
|　　　 　|　　text
|＿＿＿|　　text

こんな感じ。
WinでずれなくてもMacでずれる･･･
めんどいねぇ。

結局テーブルレイアウト最強ってことですね　ヽ(`Д´)ﾉ

ていうか幅によって下に落ちた方がいいに決まってるだろ。
下に落ちなかったら横スクロールバーが出るってことじゃんか。

そんなのは人それぞれだねぇ

人のサイトで横スクロールバーが出たらうるさいくせに
自分のサイトでは自分の作成したデザインで見ろってか、最低だなｗ

横5*縦4だったら横4*縦5になれば良いだけだろ。
なぜそこから横スクロールバーになるんだよｗｗｗ

>>530
そうやって落ちるんならいいが、
落ちないほうがいいって話だろ？

>>530
5*4だろうが4*5だろうが
ブラウザ幅より横に行っても落ちない仕様なら同じ。

>>531
どっちが良いんだよｗ

>>532
だから落とすように試行錯誤してるんだろ。
そこで横スクロールバーとか言い出すのが意味不明すぎるだけ。

オマイ達がアホなのはよく解ったから、少し黙ってろや。

と、アホ様が言うに事欠いてほざいております。

>>533
>>525

>>536
そもそも落ちずに>>525みたいに半端にずれる方がダメ。

くだらん質問でもうしわけないのだが...

縦横100pxボックス 中身を縦位置を真ん中にしたいのです。

CSSに vertical-align:middle; を追加しても
中身の「あいうえお」は上のまま...orz
中身は増えたり減ったりするんでpaddingは×
win-IE forefox mac-safari forefox でみれればいいのですが…

CSSとHTMLは以下のよう

#mybox{
width:100px;
height:100px;
background-color:#FF0000;
}

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

table使わないと無理

>>538
FAQ見てないだろ

すみません；

http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
このへんですね

簡単にはいかないことは理解できました…
しょぼーん；

これ見ても標準モードじゃ解決してないみたいだし？

アホがいるな。

>>538
強引にline-height: 100px;でいけんじゃね？

padding: auto auto;じゃダメなんだっけ？

ずみﾞまﾞぜんﾞ

divのボックス作って、そのボックス内の縦横の中心に、文字が来るようにするにはどうすればいいのですか？

くんなよｗ

すみません。初歩的な質問ですみません。
h1とh2を横一列に並べて表示させたいのですが、
ブラウザのサイズを変更していると
ブラウザのサイズに合わせて文字が改行されていってしまいます

white-space: nowrap;
をh1とh2それぞれに指定すると
それぞれのHは改行されないのですが、
どんどんブラウザの横幅を小さくすると
カクンとh1の下にh2が着てしまいます。

横幅を狭めてもカクンとならないようにするには
どのようにしたらよいのでしょうか？
よろしくお願い致します

<div class="header">
<h1>あああああああああああ</h1>
<h2>ああああああああああああああああああああああああああああ</h2>
</div>

h1とh2はdivで囲っています

>>548
初歩的というより
そ　ん　な　こ　と　や　ら　な　い　で　く　だ　さ　い

ありがとうございます、解決いたしました

>>546
文字を画像化して
div {
background-image:url(画像化した文字のURL);
background-repeat:no-repeat;
background-position:center center;
}

恐れ入ります、困っています。初心者ですが教えていただけませんか。
ホームページビルダーV8で外部スタイルシートを使いました。
自分のパソコン上ではきれいに表示されるのに、
サーバーにアップロードしたら
外部スタイルシートを読み込んでくれません。
どうしてでしょうか？

>>553
パスが違うのでは？

>>554さん、ありがとうございます。
合っていると思うのですが...。
htmlファイルと同じ階層に置いても問題ないですよね。

>>555
CSSのURLを直接叩いてみ。

http://www.jfast1.net/~seiko/index.html
このサイトの左右にコンテッツと配色との間に
ぼやけた縦線がありますがどうやってるのでしょうか？
ソースを見ましたがどうやってるのかわかりませんでした。

>>557
背景画像

>>557
これ
http://www.jfast1.net/~seiko/back_left.gif

A:hoverを使って、ポイントすると画像の下に下線を表示させるようにしたいのです。
Win+IE6.0では思っていたとおりにできたのですが、
Firefoxで動作確認すると大きくデザインが崩れてしまうのです。
具体的にはIEでは画像の直ぐ下に線が引かれるのですがFirefoxでは数ピクセル下に表示されます。
以下スタイルシートの一文です。（対象aタグのidはnavi）
A:HOVER#navi{
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : black;
}

どこを正せばいいですか？

a {
display:block;
width: 200px;
height: 40px;
background-image: url('bg.png');
}

a:link{
position: relative;
top: 10px;
left: 10px;
float: left;
vertical-align: 50px;
}

>>560
IEを標準モードにする。

>560

a img { vertical-align: bottom;}

こうかな！？

スタイルシートでページつくったのですが
どうも重いみたいでCPUの温度が上がる気がします
重すぎてスタンバイにも落ちないような気もします
ブラウザはIE６です

そうだすか。

新しい強力なファンと高速なCPUを購入しましょう。

>>556さん、ありがとうございました！
直接たたいたところでわかりました。
スタイルシートのファイル名が日本語になっていたからでした。
英語になおしたら、ちゃんと表示されました！
（ビルダー、警告してくれたらいいのに...）
あ〜、嬉しいっ！！皆様本当にありがとうございました。

・・・・・？

ここのテンプレートを使用したいと思ってるのですが、
http://sozai.wdcro.com/template/temp16_20.html
横幅を固定させたいのですが、どうすればよいでしょうか？

CSSで横幅を固定してください

widthを指定したりすればいいんじゃね？

widthでピクセル指定してるんですが、なんか全体に反映しないんですよ。
bodyじゃダメなんですか？

もー、幅はばハバhavaうるせー！！！！！！！！
少しは検索しろ！クズ！

CSSにJavaScript書いて
<div>で囲んで(画像なんかを)使えると
とっても便利！だと思うのは俺だけ？

言ってる意味がさっぱりわからんが、たぶんおまいだけ

>>575
まずおまえの日本語を便利にしてくれないか

>>573
havaじゃなくてhave aの方がいいぞ。

>>573
HAVA固定がダメなんです＾＾

色々とご意見ありがとうございました。
最終的には>>561さんのを参考にしました。

>>425 >>426
激しく遅レスなんだが、サンクス。
ちょっくらCSS入れてくる。

初心者で申し訳ないのですが
例えばdiv class="main"でHTMLに指定したら
その設定ってCSSにはdiv.mainで指定するんですか？
classとidがよく分かんないんです･･･
divでいろいろ固定したいのですが･･･よろしくお願いします。

divでいろいろ固定すんな。
idとclassの話しはさんざん既出。

>>582
そうです、が、初心者という自覚があるなら、
せめてテンプレの解説サイトくらいは目を通した方がいいと思います。
基礎が判らないと結局つまずきまくりとなります。
近道はありません。

ありがとうございます。
あまりいい解説サイトを知らなかったのですが
擬似フレームこれから見ます
ありがとうございました

できたー！！！
しつこいですが、本当にありがとうございました

外部ＣＳＳで
a { color: #1e78be; line-height: 120%; }
a:visited { color: #a87ca8; line-height: 120%; }
a:active { color: #323232; line-height: 120%; background-color: #cd7d7d; }
a:hover { color: #323232; line-height: 120%; background-color: #cd7d7d; }
div.mail { color: #000000; }

というように色を指定しているのですが、下記のソース内のリンクの文字色だけを黒色にするにはどう修正すればいいのでしょうか。

<div class="mail">
  お問い合わせは<a href="mailto:[email protected]">[email protected]</a>まで。
</div>

>>587
メールアドレスへのリンクにIDでも付けて、そのIDに設定を付ける。

>>588
わざわざ時間を割いてくださって、ありがとうございます。
早速試してみることにします。

background-imageなどのurl()で指定できる画像の種類は
どういうものが使えるのでしょうか。
MIMEtypeが「image/〜」のものだけでしょうか。
それともブラウザ等によっても違ってくるのでしょうか？
>>2のCSS2の仕様書の邦訳を見てもそれらしいものが見当たらなくて。

>>590
一般Web画像と同じ。
jpg/gif/png（mngはとりあえず除く）

body {
font-size: 94%;
line-height: 150%;
background-image: url(01.gif);
scrollbar-arrow-color:#8f6743;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#d2b596;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color:#8f6743;
scrollbar-darkshadow-color:#ffffff; }
で、スクロールの変更が反映されないのですが、どこがいけないのでしょうか？

>>591
どうもです。
mngは通常のimg要素で対応してないブラウザでは当然cssでも対応してないもんですよね。
よく考えればわかることですよね、すみません。
というかflashをbackground-imageにできないかと妄想していました。すみません。

>>592

> スクロールバーの色指定は、
> IE5.5では<BODY>タグへの指定で有効となりますが、
> IE6では<!DOCTYPE>宣言の内容により、
> <BODY>タグのみへの指定では無効となる場合があります。
> IE5.5とIE6の両方でスクロールバーの色指定を有効にするには、
> <HTML>と <BODY>の両方にスタイルシートを指定してください。
>
> 尚、Netscape Navigator等の
> スクロールバーの色指定に対応していないブラウザでは
> 無視されるので注意してください。

上記いずれかに当てはまる予感。

>スクロールバーの色指定に対応していないブラウザ
対応しないのが正しい仕様なのに・・・

したいと言う人にはさせてあげたい！

>>596
あードキュメントの宣言だと思います。
ありがとうございます！
スクロールバーの色を変えるのはうざいと分かりつつも変えてしまいます。

>>597
うざい故意犯だな。

評価されるのはサイト運営者だから別にいいじゃん。
IEユーザでかつスクロールバーの色が変わっていることに抵抗のない閲覧者は残るし、
IEユーザでかつスクロールバーの色が変わっていることがうざい閲覧者は離れていくし。
ここで回答したからといて最後まで責任を持たないといけないわけじゃない。

>>599
だから「評価」してるんじゃないのか？ｗｗｗ

聞き分けのない子には
ここであーだこーだ言うよりも直接訪問者数に影響して考えを改める結果になったほうが

というかIEなんか使ってないから関係ない罠

したいと言う人にはさせてあげたい！

じゃあしたいんでcontentsに対応してくださいMS。
じゃあしたいんでapplication/xhtml+xmlに対応してくださいMS。

たぶんなのだが>>575の言いたいことは
CSSでIDかclassに直接JavaScriptを書いておいて、
そのIDかclassで指定するとCSSに書いてあるJavaScriptが
作動する・・・と言うものなのではないのか？と推測してみるのだが？

これが出来ると俺も便利だと思う。

どうせサークルのサイトなんで内輪しか使わないし
観覧者数なんてどうでもいいんですよ。
スクロール変更機能が廃止になるってなら使いませんが。

>>606
スクロールバーだけじゃなくあんたもうざいから消えてくれないか。

>>605
なんで、cssファイルに書かなきゃならんのだ？
jsファイルに書けば良いだけだろ。

>>605
つ【behavior】

>>605
つ【expression】
どうしようもないIEにのみ使うもので
どれにでもできてもただ煩雑になるだけ。

>>607
どーでもいいのにあーだこーだ言うからだろ

#link A{
color : #0000ff;
text-decoration : underline;
}
#link A:HOVER{
color : #ff80c0;
background-color : #d7ffff;
text-decoration : none;
}
---------------------------------------
<html>
<body>
<div id="link">
<a href="index.html">こんな感じで？</a>
</div>
</body>
</html>
<body>


こんな感じで？JavaScriptを動かしたいと？

あ！ごめん
最後の<body>がよけいだった・・・・。

>>611
どうでもよくないので両方消えてください

protorype.jsの新しいやつだとちょっとCSS風の指定ができるらしいよ

prototype.jsじゃなく
protorype.jsかあー

きゃー間違えた///

>>612
こんな感じも糞も、id class をターゲットに簡単にJavaScript動作させられるのに、何を言いたいわけ？
つか、css スレなんすけど。

cssで擬似フレームして、メニューバーのリンク先を
このフレームの中に入れる！みたいにするのはどうやってやるの？

>>619
根本的に勘違いしてそうだが、
擬似フレームではナビ部分とメイン部分が同一ファイルだ。
つまりリンクで移動した先に、同じナビ部分とメイン部分があれば
メイン部分だけ書き換わったように見えるだけ。
これは擬似フレームを使わない場合と全く同じ。

>>620
ということはやはり、外部ＵＲＬをある擬似フレーム内にリンクさせることは
不可能ってことですか？

>>621
だから、ただのページからページへのリンクだっつーの。
できないはずない。
いいか、擬似フレームというのは、別のページが二つくっついてるわけじゃないんだ。

>>621
擬似フレームのページをCSSを切って見てみれば理解できるかも。

初歩的かもわからないんですが困っています。

<div ID="contents">
<div ID="left">左に配置</div>
<div ID="right">右に配置</div>
</div>
--------------------------------
#contents {width:700px;}
#left {float:left; width:200px;}
#right {float:left; width:500px;}

こんな感じで作ってるんですが、

WinIE6では
#contentsの中に#leftと#rightが収まるんですが
Firefoxだと
#contentsを突き破って#leftと#rightが下にはみ出します。
というか#contents自体が表示されません。
IEと同じように表示させるにはどうすればいいでしょうか？
根本的に何か間違ってるんでしょうか

>>622の言ってることは分かってるんだけど
外部ＵＲＬってのは他のサイトですよ？それも可能ってこと？

<CENTER>
<TABLE border="0" width="770">
<TBODY>
<TR>
<TD colspan="2" class=td_left_back>Title</TD>
</TR>
<TR>
<TD colspan="2" class=td_left_back>Menu</TD>
</TR>
<TR>
<TD width="250" class=td_left_back>SideMenu</TD>
<TD>Main</TD>
</TR>
<TR>
<TD colspan="2" class=td_left_back>test</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

.td_left_back {
background-color: #FFFFFF;
background-image: url(back_left.gif);
background-repeat: repeat-y;
}
.td_right_back {
background-color: #FFFFFF;
background-image: url(back_right.gif);
background-repeat: repeat-y;
}
http://www.jfast1.net/~seiko/
このサイトのやり方ぱくりたいのだがやり方いまいちわからんorz

>>624
まず、IEを標準モードにしてみてごらん。

>>625
わかってないわかってないｗｗ
擬似フレームとページ組み込みは全く別の問題だということを早く理解汁。

>>627
早速ありがとうございます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
↑いま、これになってるんですが、これでいいんでしょうか？

>>624
・#rightのfloat:leftを外す
・:afterを入れる

>>627
いや、わかるって
１つのページでそれぞれフレームに見えてるだけだってことは。
その「フレームに見えてるテーブルのような部分」に
例えば外でレンタルしてる掲示板を入れることっていうのはできるのかできないのか
できるなら何を使ってやるのかヒントをいただきたい

>>628
>>>5

すまん、「入れる」というか「入っているように見える」
つまりその部分もフレームのようにする秘策みたいなのはあるのかってこと

>>630
擬似フレームはなしにして考えろ。
CSSも一切入れてないHTMLに、別のページを埋め込むにはどうしたらいいと思う？

>>633
分からん･･･a hrefとかじゃなく？
なんていうかデザインをそのまま崩すことなくレンタル掲示板やらレンタルフォームやらを
使えるようにしたい

>>629
初心者ですみません
>afterを入れる
ってのはどういうことでしょうか？

>>634
ヒント：スレ違い
HTMLの仕様書を読んできたほうがいいとオモ。
HTML4.01なら二つ方法があるよ。
XHTMLなら一個かな。

>>635
after擬似要素を使う方法のことかと。
擬似要素がわからないなら、別の方法にしたほうがいい。
要するに、floatさせると通常のフローから取り残されるから
親コンテナは「中身がない」と見なしちゃうのが正しい動作。
つまり「中身がある」と親に思わせればいいわけ。
片方をfloatじゃなくさせるの方法は、そういう理由。

background-imageを二つ指定したいのですがどうすればいいのでしょうか？

background-image: url(aaa.gif);
background-image: url(bbb.gif);

background-image: url(aaa.gif,bbb.gif);

って感じに試したのですが・・・

>>637
それはCSS3（草案）にしかない。
対応してるブラウザはSafariのみ。

>>636
なるほど！
つまり、もしフッダーがあるならそこまでを#contentsの中に入れてしまえば
解決ってことですか？

それでおＫ

>>637
入れ子にしたボックスにそれぞれの背景画像を（ｒｙ

>>636
XHTMLかーそこまで学ぶのはちょっと余裕ないから無理っすわ
ありがとうございました

・・・HTMLを学ばずにCSSを学ぶとはこれ如何に

>>643
何度もすいません最後に１つだけ教えてください
フラグメント識別子でできますか？

と思いやってみたけどできるわけねー･･･

>>644
関係ないですよ・・・
iframe/objectあたりを調べてみ。

・・・645は何がやりたかったんだかわからなくなった。

インラインフレームかー
できそうな気がしてきた！スレ違いなのにみなさんどうもありがとう！

しかしiframeを使うんだったら、初めからフレームでもいいような希ガス・・・

よく考えたらフレーム使いたくない派なんだった･･･
なんか自分でもよくわかんなくなってきた

>>650
objectで。
iframeはすでにXHTMLでは廃止されてる。
ただそうするとIEがヤバめだが。
表示がうまくいかない可能性はあるが、
SSIで埋め込むという手もなくはない・・・・が、HTMLの二重入れ子になる。

質問のスレを移動するのでそっちで見かけたら教えてください･･･

質問のスレを移動するのでそっちで見かけたら教えてください･･･

>>652
初心者質問スレになると思うが、
あっちだと確実に「フレーム使え」でFAになると思うぞ。
Strictスレで聞くとしたら絶対的にiframeは悪、objectでFAになる。
まずおまいさんのやりたいことをしっかりと定めてからにしたほうがいい。
とりあえず
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html

以前のIEだと、padding,border,width,marginあたりの実装が、異常だったと思うのですが、
現行のブラウザに合わせて、これらを作成した場合に、古いIEで完全に崩れるという状況になるのは
やはり諦めるしかないのでしょうか？

>>654
ありがとうございます
埋め込み文書ってやつですよね
読めば読むほどわけわかめ

>>654
widthとpaddingとborderを同時に指定しなきゃいいんじゃね

これだけ丁寧に教えてもらって理解できないんだから諦めろ。
自分でも調べようとしてないしな。

>>658
調べてはいるよ
ずっと現在進行形です
>>654のところも２時間前ぐらいから読んでるし

>>655
バージョン毎に振り分けるという手はある。
が、俺は個人サイトなら多少崩れてもいいんじゃないかと思う。
可読性が無くなるほどの崩れだったら考えるけど。

>>660
レスありがとうございます。
バージョン毎に振り分けるってのは、ページ自体を分けるってことでしょうか？
それとも、javascript等を使って実装するということでしょうか？

>>661
分けるべき部分のCSSだけが各々別ファイルで、
振り分ける方法はJSや呼び出し元のハックで。

http://ex14.2ch.net/test/read.cgi/news4vip/1141058833/
誰かｺｲﾂを助けてやってくれ。
ﾌﾞﾛｸﾞのCSSをあり得ないほど破壊し尽くして手に負えなくなってるｗ

>>663
一旦全部テンプレのままに戻せ、
そして修正一つごとに確認する方法に変えるんだ、
とアドバイスしろ。

>>662
やはり、CSS記述自体ではどうしようもない問題、ということですね。
ありがとうございました。

>>665
CSS　ハック　でググってみ。
望むものが見つかる筈。
あとは、div id="test1"の中にdiv id="test2"を入れて、
1にwidthを設定し2にmarginとかpaddingとかを設定するって方法もあった筈。

あー色々試したけどもうむりぽ・・・気がついたら朝かよorz
<TABLE border=0 width=772>
<TBODY>
<TR>
<TD nowrap width=1 class=td_left_back></TD>
<TD nowrap width=770 colspan=2>Title</TD>
<TD nowrap width=1 class=td_right_back></TD>
</TR>
<TR>
<TD nowrap width=1 class=td_left_back></TD>
<TD nowrap width=770 colspan=2>Menu</TD>
<TD nowrap width=1 class=td_right_back></TD>
</TR>
<TR>
<TD nowrap width=1 class=td_left_back></TD>
<TD nowrap width=250>SideMenu</TD>
<TD nowrap width=520>Main</TD>
<TD nowrap width=1 class=td_right_back></TD>
</TR>
<TR>
<TD nowrap width=1 class=td_left_back></TD>
<TD nowrap width=770 colspan=2>CCCCCCCCCCCCC</TD>
<TD nowrap width=1 class=td_right_back></TD>
</TR>
</TBODY>
</TABLE>

.td_left_back {
background-color: #FFFFFF;
background-image: url(back_left.gif);
background-repeat: repeat-y;
}
.td_right_back {
background-color: #FFFFFF;
background-image: url(back_right.gif);
background-repeat: repeat-y;
}

残念ながら、何がしたいのか意味不明。

>>669
http://www.jfast1.net/~seiko/
の左右にあるぼんやりをぱくりたい

単に端に画像を配置すればいいだけだぞ？

>>671
画像関係のスタイルやったことないから全然わからないorz

全然わかりません＞＜

<TD nowrap width=8 class=td_left_back></TD>

<TD nowrap width=8 class=td_right_back></TD>

こんな感じにしたらいけた。

わからないときは極限までシンプルにすればいい。
これで理解できたら、次はtable使わずやってみ。

<style>
*{margin:0;padding:0;}
.td_left {
background-image: url(back_left.gif);
background-repeat: repeat-y;
width: 8px;
}
.td_right {
background-image: url(back_right.gif);
background-repeat: repeat-y;
width: 8px;
}
</style>
<table>
<tr>
<td class="td_left"></td>
<td>中身</td>
<td class="td_right"></td>
</tr>
</table>

>>665
よく読んでくれ。
呼び出し元のハック、というのは
CSSでCSSを呼び出すときの問題だ。

仕様書にid属性使用時の注意があるようですがよくわかりません
1.5の「HTMLの構造要素の利点」ってなんですか？

何の何バージョンの仕様書だよ
あと何がどう分からないのかも書けよ

初心者ですが、

<P>タグだと、改行に一行空白が入ってしまいます。
その空白を無くす方法と、
文章の行間は変えずに
その空白の高さを指定する方法を教えてください。
<BR>を使わなくてはいけないのでしょうか。。

>>679
CSSデザインの基本は
* { margin : 0; padding : 0; }
ここらへん参考にがんばってみ。
ttp://deztec.jp/lecture/rn/index.html

>>679
そんな時こそスタイルシート使えばいいんじゃない？

ttp://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs1-09.htm
ttp://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs3-07.htm

有難う御座います。頑張ってみます。

* { margin : 0; padding : 0; }
の理念が理解出来そうになかったらまた来ます。(^^;

>>683
えーっと、pの上下にスペースが空くのは、CSSで余白で取られてるせいなのね。
で、*（全要素）の余白をゼロにして殺してやってるわけ。
もっと基礎のほうがいいかな。
ttp://www.k2.dion.ne.jp/~spag/
ttp://pasokon-yugi.cool.ne.jp/website_kouza/

>>684
有難う御座います。丁度今その部分を理解したところです。

デフォルトの余白の取り方がブラウザによっても違ってしまうから、
最初に全ての要素のmarginとpaddingを殺して、
自分で設定しなおすのが一番わかりやすいんだよな。

body {
line-height:1.2;
margin:0;
padding:0 0.5em 0em 0.5em;
font-size:100%;
color:#000; background-color:#fff;
}
p {margin:0.2em 0;}
ってとこかね、基本は。

line-heightは1.0、pのマージンは無しがゼロに近くね？
背景色は指定無し。

emは便利な単位だと思うが、
bodyのpaddingに使うってのは凄い違和感がある。
勿論間違いではないけど・・・・ねえ

全然違和感はない。

>>687
丁度いい感じに無難って感じだな。
悪くないと思う。

ただ俺はpaddingとmarginはいつも0指定でいくな。

とりあえず、ブラウザのデフォのスタイルをリセットするＣＳＳ
をコピペしる。
age

何様

殿様

どこのスレにも変なのが湧いてるなぁ。

無駄な独り言レスをしつつ自分は変ではないと思うその認識。最大限守ってあげたい。

守って守って

ieではcssのみでポップアップメニュー（でいいのかな？）て出来ないのでしょうか？
ttp://css.maxdesign.com.au/listamatic2/vertical11.htm
を参考に作ってみたのですが、ieのみ動作しません（例はスライドするタイプですが）。

ieでも使えるcssのみのポップアップメニューってどうすれば作れるのか教えてもらえませんか？
それともjavascriptが必須なのでしょうか？

ポップアップメニューって窓開けるでしょう？

cssだけでは無りっしょ

　それと、用語は正しく使わないと正しい答えは出てこないよ。

嘘ｲｸﾅｲ

target="_blank"

こっちにまできたのか139。

>>698
ttp://www.stylish-style.com/csstec/ultimate/css-roll-4.html
これをCSSのみと言うかは別の話だが。

初心者なのですが、

スタイルシートを使って場所を指定した場合、IEの窓の大きさを変えるときに画像が一緒にスクロールしてくれません。
一緒にスクロールさせることは可能でしょうか？
ソースは、

<img src="material/menu.gif" width="303" height="600" style="position:absolute; bottom:0px;>

です。
ウィンドウの下部に固定したいのですが………
わかる方どうぞ教えてください。

>>703
absoluteの挙動を誤解してるんで、まずそれを確認して恋。
ttp://hp.vector.co.jp/authors/VA022006/css/visualren.html#position
それをやりたいなら「IE Fixed」でググる。

>>702
リンク先見ました。
99%ってのがいまいち分かりませんが、こんな感じです。
有り難うございました。
ポップアップメニューではなくプルダウンメニューっていうんですね。

>>705
JSを切ると動かないから＞99%

>>705
どちらも通称だから適当で構わない。

通称だからこそ、よく通じてる名前を出さないと
困るのは自分なんだけどなー

IE7でbeforeとか使えないんですが、
正式版になったら対応してくれるんですか？

M$に聞いてください

>>704
どうにか実現出来ました。
どうもありがとうございました。

tp://www.netmania.jp/styles-site.css
このファイルの中身、ちゃんと改行されてないのだがなんとかならない？？

(´･ω･｀)知らんがな

>>712
うちではされてるよ。Macレガシーの改行コード(CR)で保存してるんでしょう。
UNIXの改行コードはLF、Windowsだと改行コードはCRLFだからね。でも
どれでもブラウザは問題なく読むはずだからおk。

>>712
改行されてるよ。
DOS/Windows形式じゃないだけで。

HTMLに
<div id="l">あいうえお</div>
<div id="r">かきくけこ</div>
とあった時にブラウザ上で
┏━━━━━━━━━━━━━┓
┃あいうえお　　　　　　 かきくけこ┃
┃　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
┃　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
┃　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
┃　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
┗━━━━━━━━━━━━━┛
のように最初のdivを左寄せに、後のdivを右寄せに
それぞれ同じ高さに表示させる方法を教えてください。


今思いついている方法は
#r{text-align:right;margin-top:-1em;}
後のdivを文字を右寄せにして上マージンをマイナスにするやり方
#r{float:right;margin-top:-1em;}
後のdivの回り込みを右にして上マージンをマイナスにするやり方
#r{text-align:right;position:relative;top:-1em;}
後のdivを文字を右寄せにして配置方法を相対にして上にずらすやり方
#r{position:absolute;right:0;top:1em;}
後のdivを文字を右寄せにして配置方法を絶対にしてrightを指定するやり方
などが思いつきますが他の方法もありますか？

両方floatじゃダメなの？

<div id="r">かきくけこ</div> を先に持ってきて、
#r に幅と float: right; って指定すればいいと思う。

自分が試してみたら両方floatだとうまくいかなかった。
書いたソースが悪かったのかも知れないけど。

>>716
フロート50%で左右にもってきて、かきくけこのほうはtext-align:right。

<style type="text/css">
body {margin:0; padding:0;}
div {border: 1px #000 solid;}
div.contents {width: 600px;}
div.left {float: left; width: 200px;}
div.right {float: right; width: 200px; text-align: right;}
div.center {clear: both;}
</style>
</head>
<body>
<div class="contents">
<div class="left">hidarihidari</div>
<div class="right">migimigimigi</div>
<div class="center">mannnaka mannnaka mannnaka mannnaka</div>
</div>
</body>

で、だめすか。

div divしやがってこのー

FONT-FAMILY:Verdana,Arial,"ＭＳ Ｐゴシック",Osaka;
こんな感じにフォント指定したら左の方が優先？

>>721
まあ3番目はpでもいいんだけどさ、黒枠つけてレイアウトを
可視化するのに行数少なくて便利だったから、今回はdiv厨。
ようは

・両方に配置したいブロック要素に明示的に幅を指定する（%でもemでもpxでも）
・それぞれをfloat: left、float: rightする
・右側はtext-align: rightする
・次の要素でclear: bothする

ということだよね。

>>722
そう。

CSSのコメントは、/* ふんにゃか */　が基本なんですか？
色んなサイトに行っても、
// ふんにゃか
の形式でコメントしてるのは見たことありません。

オレも見た事ありません。
終わり。

稀に馬鹿が間違って<!-- -->にしてるのなら見たことあります。

#これはコメントです
#これはコメントです
#これはコメントです

<!--コメントを書きます--!>
ワラタ

どうもありがとう
#r{float:right;margin-top:-1em;}にする

>>730
負のマージン入れるんだったら、floatはいらないぞ？

ボックスを中央揃えした時にfirrefoｘなどで見た場合、
横にスクロールバーが出ているときと出ていないときでは
スクロールバー分くらいセンター揃えがずれてしまうのですがどうしたらいいでしょうか。

横スクロールを出さない設計で、100%内にwidth（+padding）を収める。

>>733
レスありがとうございます
横スクロールでは無く、縦スクロールなのです・・・
書き方悪くてすいません

>>734
無理。

スタイルシートを使うときって改行を <br /> にしたほうがいいの？
スタイルシートを上手に使ってるサイトは <br /> になってるみたいだけど
<BR>との違いがわからない・・・orz

┏━┯━┯━━━┓
┃　 │　 │　 　 　 ┃
┃　 │　 │　 　 　 ┃
┃　 │　 │　 　 　 ┃
┃　 │　 │　 　 　 ┃
┃　 │　 │　 　 　 ┃
┗━┷━┷━━━┛
って感じに背景色を三種類に分けて境目には
Border色をつけたいのですがどうすればいいのでしょうか？
結構探してみたのですがどこのサイトも一色だけでした。

>>736
<br>と<br />はHTMLかXHTMLかの違い。
本当にStrictHTML+CSSでやってる人間はbrを使わずにpだけのところが多い。
brってのは「改行したい」という見栄え用だからfontと変わらないという意見が多い。
Strictスレの過去ログでも読んでおいで。

>>737
高さを揃えてborderで行うのはJSでも使わないと無理。

スタイルシートで背景色を一括で指定する方法どうやるんだっけ？
スタイルシート忘れまくりｗ

つ【テンプレ】

>>737
z-index をマイナスにして位置を絶対指定した img を並べて置くとか (リピートが
必要なら div を使う)。

>>741
そんなバカなことするんだったら
初めから全コンテナの背景画像として縦方向の繰り返しにして
フタと底をくっつけたほうがマシじゃ…

久しぶりに来てみたら なんだこのラベルは！

じゃあラベルを上げてくださいよ神

>>742
ゴメン、質問を見間違えてた。
｢背景画像を3種類｣じゃなくて単に「3色」だったのね。
img も background-image も全然関係なかったわ。

>>735
そうですか。。。
ありがとうございます。

>741が消えれば少しラベルが上がりそう・・・

741が一人でこのスレのラベルをコントロールしているのか。ある意味すご

７４３　７４４　７４７　７４８が自演くさい
７３７　７４１も同一人物？

たぶん749 750 751も同一人物だよ

わーい俺お前ー

あれ、俺はどれと同一人物なんだ

というか>>749の全角数字は何とかならんものか。

俺がお前でお前が俺で

float:right;　したやつを左側の底の部分に合わせたいんですけど
（左の方がサイズ大きい）
そんなことできましたっけ。

>>755
できません。
親コンテナの背景画像でそれっぽくごまかすのが常套手段。

そうですか。やっぱり背景にしないと駄目なんですね。
ありがとうございました。

どこかのWEBサイトで拾ったCSSデザインなのだが・・・
ソース見てスタイルシート見てたらいまいちわからない部分があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<STYLE TYPE="text/css">
<!--
BODY{
color : lightslategray;
font-family : Verdana;
background : url(bb2.gif) repeat-y 20% 0px ghostwhite;
font-size : x-small;
}
A{
color : lightslategray;
text-decoration : none;
}
a:hover{
color : lightblue;
text-decoration : underline;
}

.note{
padding : 19px 0px 19px 30%;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class="note">
<P><B>SAMPLE PAGE</B></P>
メニューは<BR>
<BR>
<FONT color="#000000"><P class="<B>menu</B>"></FONT><FONT color="#cc0000"><A href="page1.htm"></FONT>
about this site<FONT color="#cc0000"></A></FONT><FONT color="#000000"></P></FONT><BR><BR>
のようにクラス名menuのP(段落)で囲んでます。すると左側に●が出てきます。<BR>
</DIV>
</BODY>
</HTML>



の
background : url(bb2.gif) repeat-y 20% 0px ghostwhite;
0pxってありますが何の大きさなのでしょうか？

20％がleftからの距離で0がtopからの距離です

本題より、素敵すぎるマークアップのほうが気になる

物理マークアップ等を無視しても
入れ子状態とかP要素のクラス名とか感動的。

久しぶりに物凄いマークアップを見た。

マークアップって何？

<abbr title="HyperText Markup Language">HTML</abbr>

marginの指定に関する質問なのですが、たとえば
margin: 10% 5% 5% 10%;
のように、パーセント指定をしても良いものでしょうか？

％指定をしてもきちんと反映はされるのですが、ぐぐってみたところ
CSSの解説サイトでも、pxで指定してるところばかり見るので
正しくない記述なのかもしれないと不安になったので。
よろしくお願いします。

>>766
ttp://hp.vector.co.jp/authors/VA022006/css/box.html#margin-properties

#test {
background-color:yellow;
font-size:10px;
width:185px;
hight:100%;
}

<div id="test">
testtesttest
</div>

上記のようにすると下の画像のようになりますが
http://jisaku.u-satellite.net/uploader/files/1141304519.jpg
185pxの幅で上から下まで背景色を伸ばしたいのですがどうすればいいのでしょうか？

>>768
ttp://www.mozilla.gr.jp/standards/webtips/webtips0032.html

>>767
大丈夫みたいですね。ありがとうございました。

段組に関する質問です、よろしくお願いします

AAAAA　BBBBBBB
AAAAA　BBBBBBB
AAAAA　BBBBBBB
AAAAA　BBBBBBB
AAAAA
AAAAAAAAAAAAA
AAAAAAAAAAAAA
AAAAAAAAAAAAA
AAAAAAAAAAAAA

とやる方法があれば教えてください。A,Bは文章で、Bは幅固定です。
左右逆の形は実現できたのですが、
上の形だとfloatするためにはAの幅を指定しなければいけないような、
でもそうするとBの下にまで広がってくれないような…

解決策はあるのでしょうか。

b {
displar:inline;
float:right;
}

<div><b>B</b>A</div>

すみません、ひとつ抜けていました

携帯などCSSオフの環境ではAを先に、Bを後にしたいので、
Bを先に書いてBにfloat:right;を適応するという手が使えない、という状況です

よろしくお願いします。

既に回答が…本当にすみません

>>773
無理。
文字サイズ固定ならBを絶対配置して
Aを二つに分けて無理矢理それっぽく魅せることはできるけど。

>>775
わかりました、どうもありがとうございます

一括で左寄せをしたいのですが
body {
text-align: left;
}
でできないみたいで・・・

何も書かなければ左寄せになるじゃろが！

>>778
スタイルシートで作った擬似テーブルを中央に寄せたくて
<center>
<div class=擬似テーブル（メニュー）>
hogehogeメニュー
</div>
<div class=擬似テーブル（本文）>
hogehoge本文
</div>
</center>
実際にclassは日本語使ってません

ってしたのですが、そうするとhogehoge本文とメニューの文字が中央になってしまいました。
divで囲んでるその他のも中央になってしまったのです。
擬似テーブルだけブラウザの真ん中に持っていく方法はないのでしょうか？

>>779
FAQの2では?

｡･ﾟ･（ﾉД｀）･ﾟ･｡ ｳﾜｰﾝ
まじでｽﾏﾝかった。CSSファイルを上書きしてなかった。orz
こんな単純ミスをするなんて・・・

テキストの質問よろしくおねがいします

BODY {
font-size : 100%;
background-color : #ffffff;
color: #000000;
text-align : center;
margin-top :30px;}
#main{
text-align : left;
}
#main p{
margin: 10px 10% 20px 70px;
text-align : left;
}

こんな感じで指定してテキスト書いてるんですけど、これとは違う大きさの文字や位置、幅で
テキストを書きたいので、main p　の他にもう1つ指定をしたいんです
そういう場合、＜p＞の代わりになる文字って何でもいいんですか？
一応調べたんですけど、見つけられませんでした
p2とかって指定はできないですよね？
#main moji{〜〜〜
って指定とかでもいいんでしょうか

p要素にclass属性をつけるのはダメなのかい？

ありがとうございます、調べてやってみました

#main p,test{
〜〜〜〜（指定）
}

で、HTMLの方は
<div id="main">
<p class="test">

って書くので大丈夫ですかね？
われながら恐ろしいほど低次元な質問ですいません

>>782
ttp://www.k2.dion.ne.jp/~spag/
ttp://pasokon-yugi.cool.ne.jp/website_kouza/
基礎を勉強しておいで

ちっとあれだけどな・・・

>>785
読んできました。ありがとうです
ていうか激しく難しいですね。なんでみんなできるんですかね・・・・

ちょっとアレって、一応は動くけど、わかる人がみたらﾌﾟｹﾞﾗって感じですかね？
難しいっすね・・・

ていうかこの速さで読み切れる天才なら簡単だと思う、マジで。
そこにもちょっとした間違いはあるけど、って意味のアレ>>786だと思うけど、
そこらのタグ講座なんかよりはずっと正しい記述だから、
後々まで参考にしても問題はないと思うよ。

>>788
あ、読んだっていっても自分の必要そうなページのみなんですけどね・・・
ぎっちり読み込んでみます。
ありがとうございました。

>>789

>>264

それを引用する意味がわからない。

なんで？

時計の見方を今まさに勉強しようとしているのに
>（・・・時計の見方を勉強すればいいのに・・・）
はおかしいだろ

次々質問しているわけでもなく、そして>>793だからね

aにblock要素をつけて背景画像を配置し、a:hoverで別の画像を配置しました。
ロールオーバーをCSSでやっているのですが、なぜかIE6.0でみると
ロールオーバーはされるものの、リンクのテキストが別のテキストと被って
表示されます。

これはIE6.0のエラーなのでしょうか？それともCSSの組み方の問題でしょうか？

それだけではなんとも・・・

>aにblock要素をつけて
・・・たぶんaセレクタにdisplayプロパティでblockを設定、という意味だよね？
書き方が悪いだけだと思う、ソースがないとこれ以上のことはわからないけど。

↓こんな感じです。ロールオーバーした時に、思い切り上下のテキストが被ります。

#sidebar a{
height: 22px;
width: 190px;
padding-top: 8px;
padding-left: 10px;
color: #000099;
text-decoration: none;
display: block;
background-image: url(side_back.jpg);
}
#sidebar a:hover{
background-image: url(side_hover.jpg);
}

質問です。
テーブルのcellpadding="5"にあたるものをCSSでやろうとすると、どうすればいいでしょうか？

>>799
FAQ12

>>798
上下のテキストが被るってどういう意味？

>>798
a:link{height…

>>799
td{padding:5px;}

>>802
別に:linkにする必要はないはずだが。

>>798
IE6でまともにできたんだが。これ↓でもなるんだったらあんたの環境がおかしいんじゃ。

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

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<!-- あ -->
<title></title>
<style type="text/css">
<!--
#sidebar a{ height: 22px; width: 190px; padding-top: 8px; padding-left: 10px; color: #000099; text-decoration: none; display: block; background-image: url(side_back.jpg); }
#sidebar a:hover{ background-image: url(side_hover.jpg); }
-->
</style>
</head>
<body>
<p>テスト</p>
<ul>
<li id="sidebar"><a href="#">テスト</a></li>
</ul>
<p>テスト</p>
</body>
</html>

すまん一部XHTMLの記述になってるとこ直して。

>>804
大丈夫でした。以下のように新たに作成したのですが、特に適すとが
被って表示されるとかありませんでした。なにか他が影響しているのかもしれません・・。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#test a{height: 22px;width: 170px;padding-top: 8px;padding-left: 10px;color: #000099;text-decoration: none;display: block;background-image: url(side_back.jpg);
}
#test a:hover{display: block;background-image: url(side_over.jpg);}
</style>
</head>

<body>
<div id="test">
<ul>
<li><a href="#">ああああ</a></li>
<li><a href="#">いいいい</a></li>
<li><a href="#">ううううう</a></li>
</ul>
</div>
</body>
</html>

いやだから被るの意味がわからん。
まあ他のところのせいだとわかったんならがんばり。

>>806
あと余計なお世話だけどxml:lang="ja"とlang="ja"をhtmlにつけといて。

皮被りがトラウマになってんのとちゃうん？

さっきの問題ですが、私のPCのブラウザの問題でした・・・

ノートパソコンで見ると、変な現象は起きませんでした。
お騒がせ致しました・・。

ちょｗｗｗ再インストールしたほうがいいよ

floatを使用して、ごくごく普通の2段組なレイアウトを作成しています。

#head
-------------
#menu | #main
-------------
#foot

な感じの。ですが、IEで #menu の要素の下端まで
#main の内容が3ピクセルほど右にずれてしまう現象に悩まされています。
解決方法、原因等を教えていただければと思います。

【スクリーンショット】
ttp://www.occn.zaq.ne.jp/cuffm500/cmz82jtr/sample.gif

【ソース】
ttp://www.occn.zaq.ne.jp/cuffm500/cmz82jtr/index.html
ttp://www.occn.zaq.ne.jp/cuffm500/cmz82jtr/style.css.html

#main {
float: left;
background-color: #ccc;
}

CSSレイアウト楽しすぎ＼(^o^)／
さらばテーブル。

>>813
それだと左がpx固定の場合リキッドデザインにならないんじゃなかったっけ？

そういえば、俺は左と右の間に境界線入れたくて
四苦八苦して背景色のborderを入れたんだよな。
逆に境目できてしまう場合もあるのね。

>>812 既出。
http://cssbug.at.infoseek.co.jp/detail/winie/b151.html

>>813
それも考えたのですが、#main の幅をウィンドウいっぱいまで
取りたかったので断念しました…。

>>815
フォローありがとうございます。
左の #menu の幅を固定して、右の #main の幅を可変にする
リキッドデザインが前提である事を明記しておくべきでした。

>>817
ありがとうございます。しかし、「具体的な値を明示」とありますが、
#main の幅は可変にしたいので、width に具体的な値を明示する事はできません。
というわけで、

height: 100%;

としてみました。
確かにずれは直りましたが、今度は #menu と #main の間に妙な隙間が開いてしまいました。
こちらはどのように回避すれば良いのでしょうか？

【スクリーンショット】
ttp://www.occn.zaq.ne.jp/cuffm500/cmz82jtr/sample2.gif

っていうかもうIE使うのマジやめて…。

#menu {
width: 200px;
float: left;
background-color: #f60;
margin-right: -200px;
}
#main {
float: left;
background-color: #ccc;
width: 100%;
}

>>819
>margin-right: -200px;

ﾜﾗﾀwww

Lucky bag::blog: IE で min-width を指定する方法
ttp://www.lucky-bag.com/archives/2005/05/ie_minwidth.html

すいません。

(･∀･)ﾊﾟｯﾃﾞｨﾝ♪ (-∀-)ﾏｰｼﾞﾝ♪ (*ﾟ∀ﾟ)=3ﾎﾞ〜 ﾀﾞ〜♪
↑この顔文字が生まれたスレってどこでしたっけ？

>>822
ここの過去スレ。番号は忘れた。

<div id="main">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
■<br />■<br />■<br />■<br />...
</td>
</tr>
</table>
</div>

---------

#main table {
position: relative;
left: -3px;
}

回避成功！！！
…自分でも馬鹿だと思ったorz