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

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/1157985465/

関聯リンクは>>2-10
【関連スレ】【仕様書】【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でイケてるデザインサイト 26
　http://pc8.2ch.net/test/read.cgi/hp/1120837682/

【仕様書】
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

【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/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・K@tsukun's PAGE! > 付録：CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・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
・Web Site 作成支援 - What is CSS?
　http://www.nextindex.net/web/CSS/index.html
・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段組レイアウトデザ委員会
　ttp://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://css.maxdesign.com.au/index.htm

【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

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は一要素に一つだけ。要素を重ねるなど工夫しませう。

【FAQ】
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

Q10: リンクを新しいウィンドウで開かせるにはどうしたら？
A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
　http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ（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; のバグを利用した擬似フレーム

----------------------------------------------------------------

＊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

できたかな

>>1
乙華麗

リストを入れ子にしてプルダウンメニューを作ってます。
その前段階としてリストをテーブルのように表示させたいのですが、IEでは見れてもFFではずれてしまいます。
【親１】【親２】【親３】……
（子11）（子21）（子31）
（子12）（子22）（子32）
（子13）（子23）（子33）

となるはずが

【親１】
　（子11）
　（子12）
　（子13）【親２】
　（子21）
　（子22）
　（子23）【親３】……

という感じにずれます。以下HTML↓

<div id="globalNav">
<ul>
<li><a href="#">親その1</a></li>
<div class="popmenu">
<ul>
<li><a href="#">子その１</a></li>
<li><a href="#">子その２</a></li>（以下略）

ソースは以下の通りです。アドバイスお願いします。

/***　親リスト設定　***/
#globalNav {
position : relative;
top : 10px;
height : 35px;
z-index : 100;}

#globalNav ul {
margin : 0;
list-style-type : none;}

#globalNav li {float : left;}

#globalNav li a {
display : block;
width : 103px;
line-height : 1.5em;
background-color : #557755;
border : 2px solid;
text-align : center;
text-decoration : none;}

#globalNav li a:hover {background-color : #ffffff;}

/*** プルダウン（子）設定 ***/
.popmenu {
width : 100px;
clear : both;}

>>12,13
ここ↓とか参照。
http://www.cssplay.co.uk/menus/drop_fly.html

>14
ありがとうございます。
参照してきました。まさに私がやりたいことはそれなんです。
ですが私のコピぺが悪いのか、それだとWinIEでは動かないようでした。
私のソースのずれていく理由も理解できませんでした。
申し訳ないのですがもう少し教えていただけないでしょうか。

そのサイトにいろんなサンプルあるでしょ。好きなの使えよ。
ちゃんと説明読めば、どのブラウザで使えるか書いてある。
正直CSSだけでは、全てのブラウザ対応は難しそう。

>>12
正しいCSSは正しいHTMLから。

>>12
HTMLがおーばーらっぴんぐ

>>17
信じられないだろうが、ここはアホの巣窟なので、その短い指摘では決して通じない。

おまいら前スレを先に消費せよ

　前スレ 終

<html>
<head>
<title>質問</title>
<style type="text/css">
<!--
* {margin: 0; padding: 0;}
#main {width: 500px; height:300px; text-align: left; background-color: green;}
#title {width: 500px; height: 70px; text-align:center; border-bottom: 1px solid #000000;
background-color: red; padding: 1em;}
-->
</style>
</head>
<body>
<div align="center">
<div id="main">
<div id="title">
おぺら
</div>
<p>
ああああああああ
<p>
</div>
</div>
</body>
</html>

赤い要素を緑の要素内に収めたいんですが、Opera（9.02）とFirefox（1.5.0.7）だと赤い所が膨張してレイアウトが崩れてしまいます。
膨張しないようにするには、どこをどう改善すれば良いのでしょうか？

>>22
>>5を嫁。

#title { width : 500px }
↑不要

>>23,24
ありがとうございます。解決しました。

input要素にsizeで長さを指定しても、普通のtypeとpasswordのtypeで長さが
IEだと異なってしまいます。（Firefoxだと両方同じ長さです。）
どうやれば、両方のブラウザでも同じ長さにできるでしょうか？
宜しくお願いします。

>>26
『普通のtype』とは何の事か説明してくれ。話はそれからだ。

textのこと言ってるような気がする

>>26
size属性を使わないで、CSSのwidthプロパティを指定。値はお好みでどぞ。

>>26
俺もそれで悩んだ。
結論はIEが標準の仕様ではないから次のバージョンに期待するしかない。
passwordを指定しなければいいということ。

>>30
width指定でおkなんだが...

>>30
そもそも次のバージョンに期待できない

全くだ

いつも、なぜ各ブラウザはもっと積極的に統一表示に動いてくれないん？
と思うんだけど巨大シェアIEがさぼってるんだからしゃーないわな…

だからwidth指定でOKなんだってば！

ひとつのtdのcolspanが指定されていて、別のtdが複数、動的に作成されるときに
指定されたcolspanよりも、動的に作成されるtdの数が少ないときに、
tdに空白ができます。
そのtdにwidthやheightを指定すると、firefoxでは空白が削除されましたが
IEだと、その空白は変わらずです。どうすれば、IEでも、tdの調整だできるでしょうか？
わかりずらいかもしれませんが、解る方がいらっしゃいましたら教えてください。

>>36
コードカケ

他のスレ荒らしてるから連投制限ひっかかるんだよ

誤爆？

幅760pxで固定したレイアウトで
bodyに背景で780pxの画像(両サイド10pxにグラデがかかった感じの物)を用意。中央に配置して縦にリピートする。
この時中のコンテンツは(ここではid mainにあたる)中央に配置されるはずです。つまりbodyの背景画像の左から10pxの場所です。
firefoxなどではそうなるのですが、ieでは1pxくらい左にずれてしまいます。1024x768の画面で全画面にしたときになります。左にお気に入りなどが出てる場合は平気です。
標準、過去どっちのモードでもいっしょです。
ソースは過去互換で動く用です。
どうすれば全部ちゃんと表示されますか？

<div id="main">
<div id="header">
</div>
<div id="contents">
</div>
</div>

body {
text-align: center;
margin: 0px;
padding: 0px;
background-image: url(../img/bg.gif);
background-repeat: repeat-y;
background-position: center top;
background-color: #E0E0E0;
}
#main {
width: 760px;
padding: 0px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
height: 145px;
width: 760px;
background-image: url(../img/header_bg.gif);
background-repeat: no-repeat;
background-color: #CCCCCC;
}

#contentsのプロパティ書いてないじゃん。
いい加減に回答するが、中身のdivにwidth指定いらないんでない。

contentsの内容はこんな感じです。
#contents {
width: 760px;
background-color: #FFFFFF;
}

中のdivのwidthをなくしても関係なかったです。
わかる人いないでしょうか？

>>43
これで治ったっつーワケ分からん話を聞いた事がある。
html, body, #nakami {height:100%;}

>>44
やってみましたが治りませんでした。。。

>>45
bodyに
padding-right:1px;
を指定でおk

IE向けのハック使ってね　はーと（棒読み）

>>45
ワリ。ミスった恥ずかし
padding-left : 1px
はーと

※IE6 クラッシュ

<style type="text/css">
* { margin:0; }
#hoge { position:absolute; }
#hoge:first-letter { font-size:150%; }
</style>
<p id="hoge"><a href="hoge.html">hogehoge</a></p>
<p>hogehogehoge</p>

なにこれ？(´･ω･)

ちなみに #title → p#title でクラッシュ回避ｗ pじゃなくてもクラッシュするお。 ﾜｹﾜｶ

クラッシュしないが

スタイルシートでテーブルのセルを横や縦にまたいだりすることって可能でしょうか

>>48
#hoge { position : absolute ; display : inline ;}
↑で回避可能

>>50
『またぐ』とはどういう意味か

>>52
セルを結合するというんでしょうか・・・
colspanとかrowspanとか、そういうのをスタイルシートで使えるかってことです。

>>53
テーブルの結合をCSSで指定する方法はある。
ただし、IE6までは対応していない。

>>51
うおっ サンクス！！

と思いけやうちだとそれでも蔵った(´；ω；｀)
ようわからんが環境次第なのかねー。
まあ一応 inline 入れておいた！ ｱﾘｶﾞﾄﾝ

>>55
おかしいなー
このバグはブロックレベル要素の場合にのみ起きる有名かつ致命的バグだと思ったんだが...

>>54
マジですか・・・
けど、どんなのですか？

>>57
displayプロパティを使う。
指定する値については調べれば出てくるんじゃない？
漏れは知ってるけど書くのメンドイ

>>55
漏れの勘違いだったみたいだスマソ

>>58
調べてみます・・・どうもですよ。

>>59
気にしないでーｗ

>>58
"結合じゃなくてグループ化だったらできる"の間違いだった。暴走ぎみだな漏れしっかりしろ

グループ化だったら
displayプロパティにtable-row-groupやtable-column-groupを使う。
でも結合だったら素直にhtmlに書くしかないね。

また、空セルの枠線を非表示にするには、empty-cells : hideを指定。
いづれもIE未対応

>>62
なるほど・・・試してみます。

border-bottom:solid #FF0000;
このように下線部の色を変えるタグあるんですが、
何故か太くなってしまうんです。
このタグ使ってるサイトさん大体細い下線引いてるのに
なんでだろう。

>>64
リファレンス読め。

border-???系は、パラメータを３つ指定できる。省略された場合は、デフォルトが使われる。
そのデフォルトが、太い。

あるいは、先行して、border に太さ指定をしてる。そんなこった。

リファレンス読め。

1px 入れてみ

>>64
ホンのちょっとググッてみれば解決するだろうに。
いくつかCSS解説サイト見てまわってみ。

>>65 >>66
できました！　ありがとうございます！

回答ありがとうございます。
>>44
>>46-47
の両方を指定したらxml宣言が無い場合は直りましたが、
xml宣言がある場合は駄目なようです。

ieが過去互換の場合
>>44のみでは変化なし>>47も書くと全画面ではちゃんとなりますが
左にお気に入りなどを表示した場合は逆に右に1pxずれてしまうようです。

xml宣言ありでちゃんと表示する方法をご存知の方がいらっしゃったら
よろしくお願いします。

>>69
おまい、禿げるぞ。

>>69
再現できない。目の錯覚では？

>>71
正解！

一応報告。
#hoge * { position:absolute; }
を入れても回避できました。(´･ω･｀)

>>71
その後も色々やってみましたが、
出現条件がかなり限られてる事がわかりました。
多分左にお気に入りを出して
お気に入りを徐々に大きくしていくと再現されると思います。
大体表示画面が780〜790pxになった時になると思います。
又表示画面サイズが760px未満の場合も右に1pxずれます。
xml宣言があってもなくても一緒でした。

まぁそんな微妙なことは気にするなと言われたらそうなんですが。。。

>>74
そんな微妙なことは気にするな。

>>74
それはキリないよ。　これからもそんなの一杯あるぜ。
目的を忘れてはいけない。　これを解決する方法発見が
目的ならいい。

そりゃあ中央に表示だと解像度が 768で偶数でも
お気に入りとか出すと横幅が奇数になる可能性があるんだから
横幅の関係でどっちか片側が 1px 広くなることは
あり得るってことなんじゃないの？

あと、XML宣言は文字コードにUnicode指定してるときは
省略してもいいらしいよ。

すみません質問させてください。
ローカルでは問題ないのに、テストのためにサーバ（忍者）にあげたら
cssが適用されなくなりました。
IE6とFireFox両方ともだめでした。
忍者のFAQは見たんですがらしき答えは載ってなかったです。
というか、そもそも記述の問題なのかサーバの問題なのかも
よく分からず…。
誰かたすけてください。もしスレ違いでしたらご指摘ください。

CSSファイルはちゃんとアップできてるの？
リンクの指定は相対？

cssファイルはアップできてます。
リンクの指定も相対リンクです…
link href="aaa.css"ということですよね？

初心者ですが、申し訳ありません。
CSSでテーブルを中央に配置するにはどうすればいいですか？
※<div align="center">じゃなく、クラスかidでお願いします。

>>80
一回フルパスで書いてみたら？

>>81
テンプレ読んで勉強して来い。
初心者だから〜なんて言い訳にもならん。

>>82
フルパスにしてみました…が、駄目ですた。
忍者は初めてではないし、前はこんなことも起きなかったので
何か自分の記述がおかしいんだとは思うんですが。
ちょっと頭冷やして見直してみます。

初心者ですが、申し訳ありません、width500pxのように指定して場所に、
改行せずに文字を書くと、その幅よりも大きくなったときに、
widthの幅も広がってしまいます。どうすれば、一定の枠内に文字を収める（
自動的に改行される）ようになるのでしょうか？
お願いします。

>>84
ブラウザからそのアドレスに直接飛んだらCSSファイル見れてるのそれ？

オンラインだったかオフだったか忘れたけど
俺も前に何故か効かなくなったことがあるなぁ…

>>86
ブラウザから直接入力してcss見れてます。

>>87
そのときの原因ってわかりました？参考までに聞きたいです。

>>88
他のブラウザでもダメ？

めちゃくちゃ初歩的なミスだと思われ
headあたり全部消して初めから書き直してみ
ミスは初歩的なほどどつぼにはまる

CSSがTEXTモードで送れてないとか、文字コードとか
そんなとこでねーの。　恐らくイージーミスで、ここであまり追求しても。

あとはスペルミスか文字コードで血迷ってるとかかねー

>>89
明日会社からMac+Netscape試してみます。
>>90
自分もそう思います…。
既にどつぼっぽいので明日冷静に書き直してみます。
みなさんありがとう。

以下の文でそれぞれの文章ボックスを並べてるのですが
ページの幅を狭くした時クラスｃを指定した文章のほうがｂの下に
なってしまいます。
両方のボックスをdivで囲んでwidthを設定しても無理でした。
固定できる方法ありませんか？


(HTML文)
<div class="a">
<p class="b">
文章
</p>
<p class="c">
文章
</p>
</div>


(css文)
.a{
width:600px;}
.b
{width:200px;
background-color:#00cc00;
float:left;}
.c{
width:400px;
background-color:#00ffff;
float:left;}

>>94
floatしてんだから当然の挙動。
親要素にborder入れてつっかえ棒にすりゃいい。

普通に固定されるけど？

＞ページの幅を

>>94
>ページの幅を狭くした時クラスｃを指定した文章のほうがｂの下に
>なってしまいます。
むしろそのためのfloatです。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

marginとz-indexを使ってdivの表示を重ねているんですが
IEでうまく表示されません。
GoLiveのプレビューではきちんと表示されるのですが、
IEでは重なる順番が逆になってしまいます。

.menu { width: 105px; z-index: 10; float: left; margin: 0; }
.pagebox { width: 580px; z-index: 1; clear: both; margin-top: -50px; }

IEでも.menuの方を上に表示させるにはどうしたらいいでしょうか。

z-indexを何だと思ってんだ。落第！

くだらないこと言っていい？

「height:100%;　が出来ない！」って2時間くらい悩んだんだけど、検証していったら<form>の閉じ忘れが原因でした。。。
CSS関係無いし!!

レスくれた人サンクス。自己解決しました。
クラス名aを指定している所は、
実際には●●＆●●というクラス名にしていたのですが
＆という記号ではクラス指定できないようで、
このスタイルが適用されてなかったみたいです。
＆を外したらウィンドウを狭くしても下に行くような事はなくなりました。

（ ﾟдﾟ）ﾎﾟｶｰﾝ

これは大漁

>>103
HTMLのclass属性の値に & を書いてもいい。
CSSのセレクタには、たとえば、\000026 と書く。

教えてください。
XHTMLとCSSでサイト作成してます。
XHTMLは小文字で書かなければいけない事は理解しています。
このときclass名やid名も小文字で書かなければいけないのでしょうか。
もし、そうなら書き直さないと（T＿T）

実は下記のように書いていました。

<h1 id="pageHedder">ページの見出し</h1>
<div id="mainContents">
<h2>コンテンツの見出し</h2>
<p class="loadOfTheRings">なんたらかんたら</p>
</div>

↑間違えです。

下記のように書いてました。

<h1 id="pageHedder">ページの見出し</h1> 
<div id="mainContents"> 
<h2>コンテンツの見出し</h2> 
<p class="loardOfTheRings">なんたらかんたら</p> 
</div> 

あ、また間違えた

下記のように書いてました。 

<h1 id="pageHedder">ページの見出し</h1>  
<div id="mainContents">  
<h2>コンテンツの見出し</h2>  
<p class="lordOfTheRings">なんたらかんたら</p>  
</div>  

>>106に付け加えると、属性中では直接&を書くのではなく、&amp;としないといけない。

>>107
idやclass属性値に大文字を使うのはかまわんが、"hedder"は何とかしろ。

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

質問です。
>"hedder"は何とかしろ。
これはどういうことでしょうか。

>>110
何言ってんだよ、混乱してんじゃねえよ。
HTMLのclass属性値が&amp;であれば、
CSSセレクタでは、 .\000026amp\00003b と書かなきゃならんだろ。
& を \000026 で表現することにかわりない。

>>111
"hedder"というのは一体どういう意味の単語だ。
「ヘッダ」のつもりなら"header"が正しい。

>>112
例えば"alpha&beta"というクラス名を使いたいときに、
<span class="alpha&beta">と書くのはダメで
<span class="alpha&amp;beta">と書かなくてはいけない、
ということをいいたかったのだが。
後者なら .alpha\000026beta で参照できるが、
前者の場合、 .alpha\0003b2 としないと参照できないブラウザがあるかもしれない。

そんな面倒臭いことするな

何かこう、基礎的なことを軽くスルーして
一気に制作に入っちゃう人が多いよね。
それ系の本やサイトでもう少し地味に勉強すればっていう。

テキストボックス(<input type="text"...)のスタイルに、border:1px solid　を設定したいんですが
ひとつずつではなくてページ全部のテキストボックスに反映する書き方ってあるんでしょうか？
ループで回すでもなく・・・

>>117
inputに対して指定すればいい

>>118
ありがとうございます

テキストボックスのみ指定したかったのですがNetscape・Firefoxのみ可能でIEは不可のようです
一つずつ書いていくことにしますXD

input[type="タイプ名"] { ... }

>>114
alpha-and-betaでいいじゃん。

>>112
いや、属性値中の実体参照は展開されるんだから、
.\000026amp\00003bと書かなきゃならないのはclass="&amp;amp;"のときだろ。

>>119
classふれ

buttonタグへのスタイル指定で苦労しています。

自動的に表示されるボタンのような見た目はbackgroud-colorとborder-widthで消せるのですが、
IEだとwidhtが中身の要素と一致しなかったり、FFだと変なマージンがあいたり、
うまく、ブラウザごとのスタイルを殺すことができません。
どのように対処すればよいでしょうか？

>>123
プラウザ依存のモノを弄るな。

┌──┬──────────┬──┐
│ Ａ │ Ｂ │ │
│ │ ┌┬┐ │ │
│ │ ├Ｃ┤ │ │
│ │ └┴┘ │ │
│ │ │ │
└──┴──────────┴──┘
スクリーンをＡとします。
その中に、中心によるように<div>を作りました。
その後、画像CをBから、離れた指定の位置におきたいのですが、
position: absolute; では、Ａの端からの位置になってしまいます。
そうしないためにはいい方法がありませんでしょうか。

すまそ。ずれました
┌──┬───┬┐
│　Ａ　│Ｂ　　　│ │
│　　　│┌┬┐│ │
│　　　│├Ｃ ┤│ │
│　　　│└┴┘│ │
│　　　│　　　 　│ │
└──┴───┴ ┘

スクリーンをＡとします。
その中に、中心によるように<div>を作りました。
その後、画像CをBから、離れた指定の位置におきたいのですが、
position: absolute; では、Ａの端からの位置になってしまいます。
そうしないためにはいい方法がありませんでしょうか。

>その中に、中心によるように<div>を作りました。
その中に、中心によるように<div> Bを作りました。

>>126
margin:とかpaddingを使う。
position:が良いならBに
position: relativeを指定して
Cにposition: absoluteその場合Bの左上からの位置になる。
当然CがBのdivの中って事が前提ね。

>>128
ありがとうございます。
試してみます。
できたら、報告しに来ます

>>128
うまくいきました！


別の質問なのですが、

IE6で、水平線<hr>の枠線は消すことはできないのでしょうか？
枠線に画像を指定したいのですが、消せずに困っています。
border: 0px none;
でも、IEだけではダメなのです。

こういう時って、<div>とか使って代用するものなんでしょうか？

hrは区切り線だ。なぜ枠線という発想が湧くのか疑問。
基礎を疎かにしてるな。留年決定！

てか、線消したいのになぜhrを使うのかと

>>131
よく読め、hr自体の枠線(?)のことだ。

>>133
よく嫁、hr自体の枠線(?)に画像を指定したいんだとよ。

hr自体の枠線？？？？？？？？
それの方がわけわかめ。

ワキ線などない！

ワキガなどある！

<table width="100%">
にして、テーブルのみ左右の余白を無くしたいのですがどうすればいいでしょうか？

body {
margin:10,0,10,0;
padding: 0;
}

とかだと全ての左右の余白が無くなってしまいお手上げ状態です

すみません、正確には一部のtableのみに左右の余白を無くすということでした

.tabody {
margin:15,10,0,10;
padding: 0;
}


<table class="tabody">

と、こんな感じにしているのですがどうしても機能してくれません
間違い等ありましたらご教授くださいませ

>>138
margin,padding等に数値を指定する場合は単位が必要、0の場合は省略可。
で、左右10pxだかに指定してるのは冗談か？
ついでにwidthをcssで指定したくない理由でも？

>>140
数字は何か勘違いしてました、申し訳ないです

.tabody {
margin:0,0,0,0;
padding: 0;
}

これで
<table class="tabody">
としても機能してくれませんでした

widthはcssで指定したことないのでよくわかっていませんでした
何かこちらをいじらないと機能してくれないのでしょうか？

>>141
ワケ分からんヤツだなあ。
<table width="100%">と<table class="tabody">とバラバラに書いても意味無いだろ。
単位は入れたの？　もしかして全然わかってないの？
だったらテンプレ読んで出直した方がいいよ。

カンマ区切りなんてできたっけ？
つかこの程度、背景色変えたりとさ、対象物を
少しずつ変化させる実験すれば、質問するような
事じゃないですよ。

結局お前らもわからないだけだろ？
ほんと自尊心だけしかない糞ニートどもはクズ丸出しだな
理解ある人間だけレスすればいいのにマジで無駄なことしてるな

どうせ生きてる価値もないんだから死ねば？

台湾の親日派老人の中に、「日本は良い統治をした。
朝鮮でも同様の統治をしただろうに、どうして韓国は
日本の統治を悪し様に言うのか」と言う人がいる。

しかしこれは、物事の多面性を理解しない偏った
意見と言わざるを得ない。

たとえ話を挙げよう。
盗賊や強姦魔のはびこる、すさみきった町があるとする。

そこへ警官隊がやってきて、厳しく取り締まりをし、
町に秩序と平和を取り戻した。
町に住む良民は警官隊を歓迎した。


しかし、ちょっと待って欲しい。


盗賊や強姦魔にとって、警官隊はどう映っただろうか？

>>141
.tabody {
margin: 0;
padding: 0;
width: 100%;
}
は試した？ひょっとしたら包含ブロックのマージンやパディングが関係してるかもしれないけど、その時はこの応用。詳しく言えば親要素にも同じスタイルを適用する。body要素の中に直接table置いてるなら、
body, .tabody {
margin: 0;
padding: 0;
width: 100%;
}
でいいはず。ちなみにtableのwidth指定はこれでいらない。
まずはCSSを一通り学ぶのを推奨。W3Cの英文で書かれた仕様を読めとは言わないけど、入門書でまがりなりにもセレクタやプロパティを知っとくといい。

駄目かな、この回答の仕方？

ただの煽りに反応するなよ。

>>147
そうなんだけどさ。区切り付けるのにはいいと思って。

ところで、CSS3のcontentプロパティの実装してるのってある？

h1 {
content: url(FIR.png);
}

で置換されるようなやつね。

CSS3自体が草案。

じゃぁCSS4は？

>>146
ところで、tabody って何？

>>151
その直前を目見開いて嫁
もしくはコピペ
もしくはフォントサイズでかくしろ

>>151
それを声に出してる間だけ、敵にタッチして捕まえることが出来る競技。

JavaScript不使用でCSSだけを使う

途中で書き込んでしまったorz


だけを使うメニュー
http://www.stylish-style.com/csstec/ultimate/css-roll-1.htmlみたいなやつ
を作りたいんだけど　どうすればおｋ？

そこ見てもわからんなら諦めるが吉。

わかるけど99％CSSじゃなく
JavaScript一切使わず　100%CSSで作りたい

>>157
スレ内検索しろよ。

>>157
CSSではできるが、IE(ry

<dl>
<dt>foo</dt>
<dd>
<ul>
<li><a>bar</a></li>
<li><a>baz</a></li>
</ul>
</dd>
</dl>

dt:hover + dd { display : block ; }
dd { display : none ; }
/*あと、positionとかで適当に調整。*/

IEに対応したければJavaScriptを使うしかない。
>>155のみたいにon何とか属性でやるのはおすすめしないが、スレ違いなので割愛。

>>159
IE対応じゃなくていい
JavaScriptOFFのIE以外のブラウザにも対応させようとしてるから。

>>160
JavaScriptOFFのIE以外のブラウザ=IEを含む
IE非対応=JavascriptのONOFFに限らずIEを含まない

>>160
このスレ検索しろって言ったじゃん。もう全部読め。

テーブルに背景画像を埋め込んで記事の周りに枠を作っています。
横の幅は固定で、内容の長さによって縦の長さが変わるよくあるアレです。


　　　　　　　　←固定→
角画像 | 横画像横画像横画像 | 角画像
-------------------------
縦画像 |　　　　　　　　　　　　　　| 縦画像　　↑
縦画像 |　　　　　　　　　　　　　　| 縦画像　　可
縦画像 |　　　　　　内容　　　　　| 縦画像　　変
縦画像 |　　　　　　　　　　　　　　| 縦画像　　↓
縦画像 |　　　　　　　　　　　　　　| 縦画像
-------------------------
角画像 | 横画像横画像横画像 | 角画像


このとき、縦画像で少し大きめの画像を使うと
内容の長さが中途半端な時に画像がちょん切れてしまいます。
一番下の縦画像がちょん切れないようにすることは可能でしょうか。

tdのheightを任意の高さで固定すればいいじゃん

>>163
tu min-height

>>165
IE用にheightもいるんじゃない？ハックなり条件分岐コメントなりでIE以外に隠してからだけど。

>>164-165
説明が足りませんでした

　　　　　background-repeat : repeat-x;
　　　　　width : 画像の横幅 * n　(nは定数)で固定
　　　　　　　　　　↓
　　　　　　　　　　　
　　　　　　　　←固定→

角画像 | 　　　横画像　　　　　 | 角画像
----------------------------------
　　　 　|　　　　　　　　　　　　　　| 　　　　　　↑
　　　　 |　　　　　　　　　　　　　　| 　　　　　　可　　←background-repeat : repeat-y;
縦画像|　　　　　　内容　　　　　| 縦画像 　変　　　　height :　指定なし (内容の長さで決まる)
　　　　 |　　　　　　　　　　　　　　| 　　　　　　↓　　　　　　>>　height : 画像の縦幅 * x (xは内容の長さによって決まる変数)　にしたい
　　　　 |　　　　　　　　　　　　　　|
----------------------------------
角画像 | 　　　横画像　　　　　 | 角画像

>>167
repeat-yする画像には、あまり縦幅が必要な柄モノは使うべきでないが。。
background-colorも指定して誤摩化せ。

>>167
画像の高さの定数倍にしたいのね。ごめん、よく読んでなかった。
今のCSSでは無理だから、画像に工夫して妥協するか、JavaScriptでやるか。

>>168-169
ありがとうございました。画像を高さ1pxのものに作り直すことにします。

くだらんことを聞きたいんだが
800x600の背景に画像を敷くとき1x1で敷くのと
５０ｘ５０で敷くのだとどっちがいいのかな？
変わらんのかな？

>>171
1x1だとマシンによっては描画にえらい時間かかったりする

そうなのか
じゃあある程度の大きさはあったほうがいいわけだね
描画の考え方としては一枚オリジナルをダウンロードで
残りはキャッシュでコピーってことでいいのかな
ってことはあんまり大きすぎても駄目なわけだ
結構むずかしいね　まぁ、そんなに気にする必要もないだろうけど

>>171
まだトップページ８秒ルールがあったころ、
適正サイズを検証してたページがあったな
あまり小さくても描画に時間がかかるということで
40px四方だか24px四方だか、4の倍数が
具合いいっぽいって結論出してたような記憶がある

>>155
http://www.k5.dion.ne.jp/~i-araki/css/pulldown.html
IE6にも対応。スクリプト一切使ってない。macはしらね。

>>175
どうもありがとうございます。

<option>タグとstyle="display:none;"について教えてください。

OS　WinXP pro SP2
ブラウザ　IE 6.0.29
ブラウザ　FireFox 1.5.0.7

<select name="hoge">
<option value="aaaa">aaaa</option>
<option value="bbbb" style="display:none;">bbbb</option>
<option value="cccc">cccc</option>
</select>

とすることで、aaaaとccccだけをプルダウンメニューに表示させたいのですが、IEでは出来ませんでした。FireFoxではできました。

IEの場合、displayが可能な要素が限られているのでしょうか。

フォーム関連ばっか聞くヤツって何なのよぉ。

それが質問フォームなんじゃない？

>>177
bは選択させる必要ないのだからそこだけ削除すれば良いんでは？
好き好んで残す必要ないと思うが。

本来はJavaScriptで element.style.display = 'none' として
選択肢を動的に変化させようと思ってました。
でも element.style.display = 'none'  が IEに効かないので
一番シンプルなHTMLにしてみたけど動かなかったというわけです。

display:none; が効かなきゃ element.style.display = 'none が効くわけないわな。

POCHIKING*: 画像に自動的に影をつけてテキストを回り込ませる
http://boo.chu.jp/pochiking/archives/000009.html

このように、画像の白フチつけて、影をつけるcssテクニックがありますよね。
これって、xhtmlでIEだと、6の後方互換モードのせいで、できないんですが、
html+cssでなんとかする方法ってないですかね？

> xhtmlでIEだと、6の後方互換モードのせいで
xhtmlでIE6だと、後方互換モードのせいで

div二つ使ったらできました。
無理やりですが・・・
JavaScriptとかで、div勝手につけたりできないものだろうか。

----xhtml---
<div class="shadow img_left"><div class="frame_200px"><img src="files/site_ver1.0.jpg"/></div></div>

----css----
.shadow {
background-image: url("images/shadow_001.gif");
background-repeat: no-repeat;
background-position: bottom right;
margin: 10px 5px 10px 5px;
padding: 0px;
position: relative;
}

.frame_200px {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
width: 200px;
}

ユニコードにしてxml宣言外して標準モード？

>>186
xhtmlはxmlなのに、なんでxml宣言はずすのよ！
って、それやりたくないっていう話なんです、スマソ

utf-8なら仕様としてxml宣言外してもいいんじゃなかったっけ？

AA表示用スタイルシートはどうすれば最適でしょうか。
CSS適用せずに全てデフォルトでする案はなしでお願いします。
.aa{
font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","ＭＳ Ｐゴシック","MS Pｺﾞｼｯｸ","MS Pゴシック",sans-serif;
font-size:12pt;
line-height:normal;
}

>>189
その指定で何か問題あるの？

あまりAAに詳しくないので問題があるのかないのかも分からない。
MS Pゴシック 12ptはAA系板でよく言われてるので反映してみた。
font-familyははてなを参考にした。
line-heightの指定はnormalでいいのか、推奨値があるのかどうか気になる。
他に入れたほうがいいプロパティはある？

AA系のサイトを参考にした方が早い気がする。

自分が見つけたAAサイトはあまりスタイルシートとか使ってなくて、
あまりスタイルシートの参考にならないくて困ってるんだ…。
IEとFirefoxやOperaではAAの見え方が違うみたい。
line-heightの標準値って参考サイトってある？

>>193
当事者が探して無いなら無いんだろ。
AA板で丁寧に聞いて来い。

>>193
ずれるならAAを画像にしたらいい

12ptだとmacとwinでサイズが変わる
12pxにしとけ
でline-heightも12px

横槍ごめん。
>>196
line-heightはnormalがよくないかな。ブラウザ標準値で普通見てるから。それとも2ch自体がそういうスタイル指定してるの？

>>188
良いよ

>>188
マジスか？
その辺、仕様しりたいなあ。

XML宣言は文字コードがUTF-8もしくはUTF-16以外の（かつサーバーからの応答ヘッダなどで文字コードを示していない）
場合は先頭に記述しなければなりません。

XHTML document authors are strongly encouraged to use XML declarations in all their documents.
Such a declaration is required when the character encoding of the document is other than-
the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol.

旧版[XHTML10-1]の仕様書では" and no encoding..."以下の最後の部分がなかったため、
「XHTMLでは文書の文字コードがUTF-8もしくはUTF-16でない場合はXML宣言が必須と」といわれてきましたが、
XHTML1.0 Second Edition[XHTML10-2]の仕様書C.9. Character Encodingでは

In order to portably present documents with specific character encodings,
the best approach is to ensure that the web server provides the correct headers.
If this is not possible, a document that wants to set its character encoding explicitly-
must include both the XML declaration an encoding declaration and a meta http-equiv statemen

と、サーバーのヘッダ情報を指定できない環境で文字コードを明示したい場合は、XML宣言とmeta要素の両方が必要であるとしています。
ちなみにXMLの仕様書[XML1]では、4.3.3 Character Encoding in Entitiesにおいて次のように定められています：

In the absence of external character encoding information (such as MIME headers),
parsed entities which are stored in an encoding other than UTF-8 or UTF-16 must begin with a text declaration
(see 4.3.1 The Text Declaration) containing an encoding declaration...

つまり、HTTPヘッダなどで文字コード情報が送られない場合のみ、encoding宣言が必要だというわけです。


だそうな
「サーバーが文字コード情報を送らない場合のみXML宣言が必要」ってことかな

あ、もちろん文字コードはutf-8か16であることが前提でね

CSS関係なくて済まない。
XHTMLの話ばかりしてるけど、HTML4.0(4.01)のデフォルト(指定されてない時に処理される)文字コードはUTF-8なのか、それともLatin-1(ISO-8859-1)とかなのか？

dreamweaver で XML 宣言いれないで
Shift-Jis 使ってるけど
とりあえず問題は出てないなー

ブラウザが補完してくれるんじゃない？タグの省略みたいに。

済みません、ぐぐってもよく分からなかったので質問です。
font-familyでプロポーショナルの明朝フォントを指定したいので、
font-family:"ＭＳ Ｐ明朝","？",serif; とやりたいのです。
この「？」のところにMac OS向けのフォントを入れたいのですが、
種類がいまいちわかりません。
"平成明朝"？　"細明朝体"？　"リュウミン"？　他の何か？
どなたか教えて頂けると幸いです。

済みません、ぐぐってもよく分からなかったので質問です。
font-familyでプロポーショナルの明朝フォントを指定したいので、
font-family:"ＭＳ Ｐ明朝","？",serif; とやりたいのです。
この「？」のところにMac OS向けのフォントを入れたいのですが、
種類がいまいちわかりません。
"平成明朝"？　"細明朝体"？　"リュウミン"？　他の何か？
どなたか教えて頂けると幸いです。

連投失礼しました。

平成明朝、ヒラギノ明朝 Pro

どうもです！
早速書いてきます。

>>206
MacならアップルのサイトのCSSみればいいんじゃね？

>>203
HTTPヘッダで文字コードを指定していても
UTF-8/UTF-16以外の文字コードがXML宣言なしで使われたとき
エラーになるXML処理系もあるのでXML宣言を指定しておいたほうがいいと思う。

2007年のクリスマスは、サンタクロースの大井競馬場での騎乗のため
中止となります。また、それに伴いましてクリスマスイヴやプレゼント交換会
も中止となります。ご了承下さい
http://2chart.fc2web.com/2chart/2007kurichuusi.html
また、昨年お伝えしましたように、2006年のクリスマスも中止です。
http://2chart.fc2web.com/2chart/2006kurisumasuchuushi.html

毎年、各所でこのような楽しいクリスマスの風景が見られましたが
自粛でお願いします。
http://2chart.fc2web.com/2chart/tanosiikurisumsu.html

>>202
RFC2616（HTTP 1.1）の定めるところ
http://www.studyinghttp.net/cgi-bin/rfc.cgi?2616#Sec3.7.1

によれば、text/html で charset パラメータを指定していない場合、
ISO8859-1 とみなされることになってる。
meta タグで指定しておけばブラウザがよきに計らってくれるのが現実だけど。

オフラインでも知識のたしになるかと思って
なにか参考書やデザイン本買おうかと探してます。

お勧めなのとか普段参考にしてるのが知りたいんだけど、
住人さん、何かよさげなのありませんか？
もしかしてスレ違いになるかな。

教えてください
２段カラムでメインに右にメニューを設定した場合でメインがメニュー
より短い場合、どうやってメインに高さをだせばいいでしょうか？
contenerの中にmeinとmenuをフロートfooterでクリアとゆう構成です。

>>213
ありがとう。指定しておけば悩まなくていいんだな、結局。

>>214
もしあなたが昔ながらのコーディングをしているなら、または「Web標準」が気になるなら、
「DESIGNING WITH WEB STANDARDS」
インスピレーションが欲しいなら、
「CSS Zen Garden Book」
デザイン初心者なら、
「Non Designer's Design Book」

いや、これは俺の趣味が中心だが。ちなみに全部邦訳本あるから心配しなくていい。
あと、1冊目と2冊目はそれぞれ
ttp://www.zeldman.com/
ttp://www.csszengarden.com/
に深く関連していて(というより2冊目は上記サイトの解説)、こちらもよくお世話になってる。

俺の意見はあまり参考にならないかもしれないが、面白い本だよ。俺は推す。

日本の本は益子貴寛、大藤幹、神崎正英辺りが定番かつお勧め。

>>215
メインにheightをCSSで設定するか、絶対配置・相対配置のコンビネーションかな、俺なら。メニューの長さが決まっているなら、前者で十分だけど、決まってないなら後者。

質問させてください。
CSSで文字を呼び出すことはできるでしょうか？
複数のページをclassを使って一気にURLなどを変えることができたらいいなと思うのですが…。

無理だ無理
死んでも逆立ちしても無理

>>217
リンク関係かな？
要素生成の為のcontentプロパティはあるけど、属性制御は出来ないから、たぶん>>217さんの言うような事は出来ないと思う。
PerlやPHPを使うか、GREP付きのテキストエディタで置換していくか、インラインフレームか、JavaScriptで生成か……。少なくともCSSでは出来ないと思う。

217です。
ありがとうございます。
地道にHTMLを編集して頑張っていきます。

2段組で左右の段が自動的に同じ高さになるように配置を変えてくれる方法はありますか

divで囲む

テーブル使う。

>>221
＞配置を変えてくれる方法
？？

基本的にTableのセルみたいに高さを揃えることはできない。
全体を div で囲んだ場合、左右とも float を指定すると外側 div の高さが
0 になってしまうので、片方（長い方）は float を指定しないようにする。

あるいは clear を指定したフッター部も外側 div の中に入れればなんとかなる。

>>224

イメージ的には
[BOX1] [BOX3]
[BOX2] [BOX4]
っていう所にBOX5,6を追加したら
[BOX1] [BOX4]
[BOX2] [BOX5]
[BOX3] [BOX6]
のように配置を変えてくれるっていう事です。

自動的ってのが、html側を書き換えないって事なら無理。

>>226
boxをfloat:left;してwidth固定のdivで囲む、ってのなら出来るかもね。

>>228
ヒント：順番

センタリングしたいだけなのにいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい

ああぁぁぁぁぁぁぁぁぁぁぁぁ

>>226
どうでも良いといえば良いのだが、そういう順番にされると混乱する人がいる。具体的には俺。

boxの縦サイズを指定せずに横に2つずつ配置したくて
こんな記述にしてみたのですが、こんなのでいいんでしょうか？
もっと良い書き方はありますか？

.inbox {
width: 700px;
}
.entry_box {
width: 350px;
float: left;
}
.crear {
clear: both;
}

<div class="inbox">
　　<div class="entry_box">〜</div>
　　<div class="entry_box">〜</div>
　<div class="crear"></div>
　　<div class="entry_box">〜</div>
　　<div class="entry_box">〜</div>
　<div class="crear"></div>
</div>

>>233
アンタ、>>226？

.entry_box, .entry_box2 {
width: 350px;
float: left;
}
.entry_box2{
clear: both;
}

<div class="inbox">
　　<div class="entry_box">〜</div>
　　<div class="entry_box">〜</div>
　　<div class="entry_box2">〜</div>
　　<div class="entry_box">〜</div>
</div>

>>234
へ？違いますよ。
普通に横並びにしたいだけです。

>>235
それだと1つ目のboxの縦が2つ目より大きいと
4つめのboxの上が3つ目と揃わないんですよね。

もうしばらく悩んでみます。float難しい…。

>>236
こんなのは？

.inbox{width:700px; clear:both;}

<div class="inbox">
<div class="entry_box">〜</div>
　<div class="entry_box">〜</div>
</div>
<div class="inbox">
<div class="entry_box">〜</div>
　<div class="entry_box">〜</div>
</div>


＃ <div class="crear"></div> は中身が空だと効かないでしょ。

>>237
><div class="crear"></div> は中身が空だと効かないでしょ。
有効

>>238
ブラウザによっては無効になるよ。以前試した。

>>239
そのブラウザをあげてみ

もちろん、天下のIE様さ！

>>241
IEでも効いてるのだが…。ちなみにIE6

>>239>>241
ﾋｿﾋｿ( ；ﾟд)ｻﾞﾜ(；ﾟдﾟ；)ｻﾞﾜ(дﾟ； ) ﾋｿﾋｿ

ねえ、crearには突っ込まないの？
わざとか？
まあいいや、釣られよう。
clearじゃね？

>>244
class名はなんだってヨカヨカ

>>245
そうなんだけど、スペルミス続いていって質問者がそのまま使ったらどこかのスレで叩かれかねないのと、ほっといたらもっと馬鹿にしたような言い方する奴が出て雰囲気悪くなるかもと思った。

君だけが騒ぎ立ててる。そしてそんな奴を呼ぶ事になるんだよ。

clearの為だけに空タグつくるぐらいなら
<br>に {line-height: 0; clear:both} をつけた方がいいと思うのですがいかがですか？

>>248
brはインライン要素だから多分clear指定不可。
HTMLのclear="both"とは違うから間違えやすいけど。

はあ？

w3c上は>249が正しい
実際は<br style="clear:both;">でもちゃんとなってくれるがね

stricterが指定不可と決めつけてるからだろ。

xhtml1.1でbrのclearないからだろ。

常識だぞ。

大丈夫だよ
親切なＩＥは拡大解釈してくれるから
他のブラウザじゃ無理なことでもＩＥならへっちゃらさ！

ほんとIEはきたないなｗ

ボタンの上に画像を配置してレイヤーのようにしているのですが
フォーカスが画像に当たってボタンが押せません

画像は見えるけどフォーカスは受け取らない、というようにするにはどうすればいいんでしょうか？
※理由によりボタンの上に画像を配置する処理は変更出来ません。

>>249
指定じゃなくて、適用な。
文法さえ合っていれば、指定はなんでもできるだろ。
有名な具体例で言えば、アンダースコアハックで、指定しても、Fxなどが適用しないだろ。

あと、CSS1では適用されるが、CSS2.(?:0|1) では適用されない。
IE6までは、CSS1を仕様としていると明言してあるわけで、適用されなきゃバグになる。

>>257
どんなおバカな理由なんだ？w

>>258
言い方を変えようが、メジャーブラウザは皆実装してる。
明言してようがしてまいがね。
W3Cに無いって事は、将来的には実装にバラつきが出るのかも知れない。いつだか知らんが。

>>257
JSスレ行けよ。

clear="both"ってなに？

そもそもどうしてbrのデフォルトスタイルがdisplay:inline;だと断言できるんだ、ということで検証。

<p>test test<br>test</p>

このHTMLに br { width : 1em ; height : 1em ; border : thin solid red ; }
を適用して、Opera9、Fx1.5、IE6に表示させてみた。
結果、3者とも改行はするが、widthとheightは効いてない。ということはdisplay:inline;だと思われる。
だが何故かborderも無視される。

display:block;をつけたしてみると、
OperaとIEはwidthとheightを反映するが、borderはやはり無視する。Fxはwidthとheightすら無視。
brじゃなく空のspanにしたらどれでもちゃんと仕様通りになる。完全にバグだな。

ちなみに、CSS1のデフォルトスタイルの例ではbrはdisplay:block;。

下の方に理由らしき事が書いてある。
http://www.mozilla.gr.jp/standards/webtips0021.html

質問です
一応、Xhtml+CSSで書いてIE6/FireFox/IE7で画面崩れなければ
とりあえずはOKですか?
IE7は今日ｲﾝｽﾄして大丈夫でした
正式ﾘﾘｰｽでまた変わるんですかね?
MACは持ってないんで試せませないんですが…

基本的にはそれでおｋ。
Operaでもチェックするとなお良しだけど、Firefoxで大丈夫なら多分問題ない。

>>265
ありがとです。
MAC会社に無いんで無理っす
商用ｻｲﾄ個人で造るのって大変ですね
3週間もかかりました

IE7よか6で確認した方がいいんじゃないか？
バグ多いしw

Firefox2でたけど仕様は１と一緒なのかな？

>>267
IE6で試してIE7に切り替えたんで問題なさそうです

IE7もバグおおくない？

バグなんてひとつもないよ。全部仕様だよｗｗｗ

>>268
Fx2では表示の仕様変更はなかったはず。
ただ「間違った記述をしていてもバグのおかげでたまたままともに表示されていたサイトは大変な事になるかも」って記事をどこかで見た。

Fx1.X→2.0の表示の仕様変更はあったよ。
先行実装やら非対応だったやつの対応やら。

画像を<br>無しでただ並べるとウインドウの端で勝手に折り返して表示してくれますが。
下記のように「テキスト＋画像」を一つのコンテンツとして、中身の配置を崩さず
画像を並べた時のようにウインドウの端で折り返してくれるような事は出来ますか？

ttp://kasamatusan.sakura.ne.jp/cgi-bin2/src/ichi58223.jpg

>>274
個々をtableで作ってfloat:left;

filterを外部CSSから読み込ませてます。
HTMLとCSSが同一ディレクトリにあるときは問題なくfilterが反映されるのですがHTMLとCSSが別ディレクトリだと反映しません。
filter以外の効果はちゃんと反映されます。
HTMLとCSSを別ディレクトリに置いた状態でfilterを反映させるにはどうすれば良いでしょうか。
ご教示下さい。

filterはcssじゃないしシラネ

>>275
できました。ありがとうございます。

異なる属性の間に発生する行間
例えば…
</p>と<p>の間
</hx>と<p>の間
</p>と<hr>の間
など
これらの行間をスタイルシートで調節することは出来ますか?
hxタグで囲んだ画像の下に<hr>を付けているのですが IE6だと画像と
<hr>の間の行間が空き過ぎて困ってます…

すいません即効で解決しました
各属性にmargin:0;とするだけだったのですね
こんな簡単なことに気づかず ご迷惑をおかけしましたorz

ここのスレはいい人ばかりで大好きです。
ありがとう。

uruse-baka

uruse-bakaさんこんにちは。
自己紹介だけじゃなく、質問もどうぞ。

ブラウザについて聞きたいのですが、今までIE6とFirefoxに対応するように
サイトを作成したのですが、IE7で見ると、デザインが一部ずれてしまいます。
これは、仕様が変更され、Fxとは異なる仕様がまだまだたくさんあるということでしょうか？

IE7でFXに追いついたわけじゃない。
大ボケのIE6からボケの7になっただけ。

まだIE7入れてないけど、6→7でこう崩れた！
みたいなお話ありますか？

>>277
あれ？
filterは画像やブロック要素を透けさせるCSSではないのでしょうか？

テンプレにある仕様書でもお読み下さい。

>>287
違うよ。そもそも透過だけがfilterの効果じゃない。発光効果とかドロップシャドウとかあったと思うよ。
そして、filterはIEの独自拡張だから本当はW3Cが策定した「CSS」にはあたらない。
filterが「透過」と勘違いして覚えられる原因はIE6までは透過PNG(正確にはPNGの8bit透過、またはアルファ透過と呼ばれる機能)に対応していない(FirefoxやOperaやSafariなどは対応している)から、
次善の策として使われた事にある。IE7では対応したけどね。
MSDNかどこかで詳しく調べて。ちなみにfilterを使ったスタイルシートはCSSの検証に通らない。

>>289
そうでしたか。
親切丁寧なご説明ありがとうございます。
filterを使うのやめます。

　　　　　　　　ﾞ／　　　　　　　　　　　　　　　　.｀｡
　　 　　.　　 ﾝ^　　　　　　.　　　　　　.　　　　　　.’、
　　 　　.　 /´　　　　　　　　　，　　　　　 　　　　　.’　 　.　 、、＿
　　.　　.　.・　　　　　､。　　　ﾞ′　　.　　.　._　　 　　.’　　.　.｀　　ﾞ｀ﾞ
　　　　　　　　　，　 .，　　　 ﾉ｀_：　､､　 　.i､・，、　.､’　.､／　 . ．・・.v　，
　　　　　ﾞi　　.　.’　..､　..ｪ．./　 ”ﾞ・ . ､． . ，､ﾘ　’ﾞ)　.　...・｡_ li.､〜-.、 ’、
　　 　.　 i　.　.　..’　.I....r∴・　　､｀ﾞ’..’.’rﾞ、-w、ﾞ，　　.　　､｀　.　.　.I　.､”
　　.　　､，∴　 ／： .I e．．._、ｨ：　　／　.， x､__..┨　　.　.　._、x､_　.I　 . |‐_
　　.　　､｀｀-､_､’、’ ｀　.　..´　　 、‐--＿＼．￣ﾞ､’　.　､‐¨´ {....｀｀．i　.､}　＼
　　　　 ｿ′､¨vﾞ’､ .’　　　　ﾞ_．ﾅ_^^¨^､　.､｀､｀　　　　ﾞj　　　 ｀・　　.’　..’_　 .，
　　　　ﾞ´ .、＿_｀.′〜・ . 、・｀.、__｀^〜＾!...／.｀　　　　ﾞ，　　 　　.　　 1　....｀､，
　　 　　.｀　.　､｀＾“━-…､_､、．￣｀“＾　.．´　　　　　　・　　　　　　　　 、._、 ﾞ
　　　　　　　　　　　　　　　　　､・　ﾞ，　　　　　.　　　　.｀・､　　　　 　　　.｀｀
　　　　　.　　　　　.　　　　.　　　　.，　　　　　.　　　　､、＜、　　　　　　　　　i
　　　　　　　　　　　　　　　　　　 ，　　　.　　　.　　._．´・　...｀〜，　　.　.　.　.i
　　　　　　　　　　　　　　　　　　.′ . 。　　　　　､ｲ´ .・　.　...。-ﾞ､...､-・ゞ´､ゝ
　　　　　　　　　　 　　　　　　　　　.，´　　　　　　 ’　.　.，・~-，・ ._､．・¨´　.｀
　　　　　　　　　　　　　　．　.　.　../　　.　._　　　ﾝ・､‥-　､’　 _・′.､，　　､）
　　　　 ´¨“━-｡．　..._。　　.　.　.，　.　..ｰ′....ﾝ′　　　ﾞ｀・、 . ’　..../　 　. ，
　　　　　　　　　　　ﾞ¨´　　　　　.，　　_．(-・｀¨　　.　　､・、ﾞ_．...｝　 /　　　 ，
　　　　　　　　　.　　　　　　　　､I　　ﾞ，...．　.　､-_　　 　　.ﾞｰw┛^゛′　　 ，
　　　　　　.　　　　　　.　　　　　.’　.､ﾞ　 .’_　　　 ’　　　.　　　.　　　.　　　.・

なんのAAだろう…

フック船長がサッチェルで爆殺された図

bodyタグにページレイアウトのパターンごとの
cssの振り分けをしてるんですけど、これって
使い方としてはいいんでしょうか。

たとえば、
body#LayoutA h1 {なんちゃら}
body#LayoutB h1 {なんちゃら}
でつくると、<body id="LayoutA">のページが
何ページができるんですけど、別に同じページ内で
同じidが出てこなければいいんですよね？

>>294
スレ違いだけど、仕様上は問題無い。
ただ、body要素の「名前」じゃなくて「分類」だから、俺ならそういうのはclassにするかな。
あと一応言っておくと、スタイルありきなidやclassは良くない。

なるほど、LayoutAは普通に考えるとclassですよね。

.AAA .bbb {なんちゃら} なパターンになったときに
希にどっちが優先するかで悩むことがなくid指定だと
すっきりするので楽だったりしたもんで…。
スレチガイすんませんでした。

tableのcellpaddingとCSSのpaddingの挙動が違うのは仕様ですか？
上下の「■」が違って見えます（当初は画像で検証してました）
最新のIE,Firefox,opera,NNすべてで同じでした。
CSSでcellpadding=0,cellspacing=0を実現する方法はありますか？

<table style="background-color: #555555; padding: 0px; border: none;">
<tr><td style="padding:0px; color:#FFFFFF;">
■
</td></tr>
</table>
<br>
<table bgcolor="#555555" cellpadding="0" cellspacing="0">
<tr><td>
<font color="#FFFFFF">■</font>
</td></tr>
</table>

あるよ。

どうやるんですか？教えてください。

ぼｒでｒ-こっぁｐせ

border-collapseですね。やってみたところ、どちらも同じになりました。
ありがとうございました！

>>301
あれ、よく読めたな。
ちなみにcell-spacing属性はborder-spacingプロパティ、cell-padding属性はth、tdのpaddingプロパティで代用。cell-spacing="0"はborder-collapse: collapseも使えるっていう蛇足な説明。

せっかくCSSでや(ry

　　　　　なんだかなぁ

>>303
……るなら外部スタイルシートに(ry
とか？

>>303
いや、言い訳すると、テーブルレイアウトからCSSへの移行を提案中だが、
一番外側ののテーブルはまだ排除できないので、仕方なく段階的に
内側コンテンツだけCSS化。問題がなければ全面的に移行というわけ。

あんま冒険したくないらしい。ま、気持ちはわかるがｗ 以上、ﾁﾗｼの裏ｽﾏﾝ

「移行」するなら「タグ」は全部削除して最初からマークアップしなおしたほうが早いよね。

>>305
勉強が足りんようだが、おまいさんプロかい？

MacIE5を考慮するとハイブリッドにしたほうが楽だ

一応そのつもりだが、そもそもの要望が、1pxもずれることなく移行してくれ、だからねぇ。
レイアウトはwebの宿命で諦めてくれと言っても紙屋だから分かってくれない。

氏ねよそんな時代錯誤の馬鹿紙屋

＞CSSへの移行を提案中
＞そもそもの要望が、1pxもずれることなく移行
CSSでの表現方法も知らないくせに提案。矛盾した言い訳。そして態度の肥大化。
プロのレベルの低さったらないね。
ここの回答者と気の利いた営業マン捕まえてweb制作会社作れば、簡単に日本制覇出来るわ。
意見は全然まとまりそうにないが。

別にいいけどさ。客の希望が、「1pxもずらさず、テーブルからCSSへ移行しろ」
なんだよ。
無理だから、CSSにしてレイアウトの変更を飲むか、いままのままテーブルで組めって
言っても聞かないんだよ。
で、お前と違って、仕事選んでる余裕はないんだよ。

実際のところまだまだTableとCSSの折半サイトって相当多いでしょ

>>312
客がなぜcssに移行したがってるんだ？
どういうメリットを期待してるんだ？
そこを汲み取れなきゃダメでしょうが。

>>314
世間に流されやすいお偉いさんの頭ん中に聞いてくれ

お前のレベルが低いだけじゃん。
こんなところで愚痴るなよみっともない

へえ聞いてみようともしないんだ。
最初から客を馬鹿にしてんだろ。そういう気持ちは間違いなく伝わる。最悪。

この程度の無茶な要求なんか腐るほどあるんじゃないか？
もっと酷い要求だっていくらでも。
プロだからそういう要求にもできるだけ答えないといけない訳だし。

なんつうか、ここで聞いてるプロもどうかと思うけど、
それ以上に批判してる方も見当違いって感じだな。

1pxもずらさないのは絶対に不可能なの？

>>318は見当違いも甚だしい。
上っ面だけの同情、同意が何になる？朝まで一緒に飲んでやるならそれもいいさ。
愚痴ばっか言ってるヤツにはビシビシ言うしかないんだよ。

じゃあ俺が朝まで呑んでやる。

>>320
何のために？

>>320 は、その後一緒に行くベッドの中ではもの凄く優しいとの噂です。

(*´Д`*)ﾊｧｰﾝ

でもまあ、そのお偉いさんのぱそこんで1pxもズレずに表示されればOK出るだろ。

DOCTYPE 宣言でHTML4.0 Transitionalを先頭に記述してます。

<div style="width:100px; padding-right: 20px;">
要素
</div>

などとすると、divの横幅が winIE6 だと 100+20px となって表示されちゃいます。
横幅、というより div そのものは 100px なんだけど、横に 20px の空白が生まれるというか…。
padding って要素内部の空白のはずですよね。


HTML4.0 Transitional宣言をしない場合は、問題なかったです。
これは、HTML4.0 Transitional宣言 しない以外に解決方法はないですか？
IE6とそれ以外のブラウザで読み込むCSSを変える最後の手は別にして…。

>>326
いろいろ勘違いしてるようなので>>5を読んでね。

ん〜…んん…
DOCTYPE宣言して、padding使ったら、
IE6と他ブラウザでは結果が変わってしまうってことですよねつまりは。

paddingは使わないでmarginで解決させるようにした方がいい…ってことかな。

>>328
お前みたいなゴミは死んだ方がいい

仮にも質問スレなんだから言葉を慎め

書いてある事を素直に受け止めろよ。
アンタの解決法なんて聞いてない。

>>319
まずはフォントのポイント固定をしないと話が始まらない。
この時点で、俺的にはもう、どうでもいいや、みたいなｗ

わかりました。
さようなら。

>>328
標準モードにすればいいって問題。
4.0ではなく4.01にして、URI付きのDOCTYPEにするとよいのでは？

と生真面目に答えておく。

適当なこと言ってんじゃないよ

>>319
元のHTMLを画像にしてcssのbackground-imageで貼り付けちゃえ。
それで終わりってどう？だめ？。

質問です。

ブロック要素にheightを絶対値指定して、overflow: visible; と指定した場合、
収まりきらない要素は、ブロックからはみ出して表示される仕様になっている
のは理解しています。

ただ、IEだと、勝手にブロックを拡張してくれるので、使い勝手が
よい気がいたします。（実装上はIEの方がバグっているのは理解しています）

なので、IE以外でもheightを絶対値指定して、あふれ出る場合は、ボックスを
適宜拡張してくれるようにする方法ってないのでしょうか？
（overflow: hidden scroll auto以外の方法で）

例としては、基本的には1行に収まることをを想定しているHnタグの文字数が
たまに多くなってしまい2行になってしまうときなどに困っています。
（この場合 HnタグのHeightを30pxとかに設定している）

1行に収まらない見出しなど、もはや見出しではないと思う。

min-height

min-height を設定した場合、
IE向けにはheightの設定をどうやれば良いのでしょうか？

IEにだけheightを読み込ませて、
他のUAにはmin-heightだけを読み込ませる
ことが出来ればベストなのですが…

>>340
スターハック

>>340
Fx、Opera用に、まともなCSSを書く。でもって、そのまともなCSSの読み込みの後に、

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/hoge_for_ie.css" media="all" />
<![endif]-->

とか書いて、IEだけにIE用訂正CSSファイルを読み込ませる。

>>340
IE6は、<Hn>要素には、min-heightを適用しない。
だから、その質問が成立しない。

IE7は、その<Hn>要素をスクリプトで調べて、
(HTMLHeadingElement hn).currentStyle.hasLayout
の値が true の時に限って、min-height を適用する。
だから、Hn にマッチするCSSセレクタの宣言を書かなきゃ、回答者は判断できない。

質問です。

現在CSSのサイズが7kbなのですが、ファイルサイズが大きくなりすぎると
ホームページにアクセスした際に重くなってしまうのでしょうか？現在indexが4kbなので、
7kb分重くなってしまうのでしょうか・・・

うん。
気になるならCSSを分割して、必要な部分(複数でもOK)だけ読み出すように記述したら？
500k超えるならともかく、11kぐらいとうという事無いと思うけど。

ありがとうございます。いらない部分がページ毎にあるので
名前をつけて区分けしたいと思います。

>>341, 342
ありがとうございます。
スターハックを使えばよい話でしたね。ちょっとそれで試してみます。

また、[if IE]という書式は恥ずかしながら知りませんでした。
ありがとうございました。

>>347
ハックは、IE7じゃ効かないと思うが。

>>348
>343

ページのタイトルを画像にする場合、
<a>のclassにtext-indent付けるか
<a>の中に<span>入れて<span>にvisibilityつけて消すのとでは、
SEOの観点から見てどっちがいいですか？

それ両方とも拾わないﾛﾎﾞｯﾄが有るよ

>>350
SEOスレで聞けば

段落と段落の間にある程度の余白を設けたいんですけれど

<p>〜</p>
<div style="margin: 50px;"> </div>
<p>〜</p>

こんな風にして間隔を取るのは、ＣＳＳの文法的に駄目ですか？

pにマージン設定すりゃいいじゃねえか

ブログの投稿に毎回そこを<p>で囲って設定するのは
手間がかかりますので、
それなら<div>〜</div>に間隔を空けるようにしてしまえば
楽だなと思ってしまいました。

>>355
よく分からんがｐに下マージン設定でいいんじゃないのかい？

もう<br>でいいよ。

ブログやたらと空いてるよね。

>>355
>ブログの投稿に毎回そこを<p>で囲って設定するのは
何か勘違いしてるような気がする。「そこ」ってどこ？

質問です。

<div>で囲んだ文章エリアが、横並びに２つあります。
両方とも行間文字サイズ等は全て同じです。

　ここで、右エリア文章の１行目と２行目の間を
例えば１０行（又はｎ行）空けて表示したいと考えています。
但し、仮に１０行空けた場合、隣エリアの１２行目と同じ高さ
から表示される必要があります。

現在はとりあえず<br>連続で表示していますが、<br>をやめ
CSSでなんとかしたいです。　必要ならタグ追加可能です。

ちなみに、margin-bottom:10em などをやってみたのですが
文章エリアのline-height（110%等状況によって異なる）が影響してか、
ブラウザによってはずれが発生しています。

行数n値の変更だけで、line-heightを加味した行空けをする事は
可能でしょうか？（line-height×nの数値を与えるのは難しい状況です）

<p>〜</p>
<p style="margin-top: 50px;">〜</p>

こんな感じです。
こうするためには、段落タグでちゃんと囲わないといけませんし
（ブログなら改行したところで勝手に<p>つけてくれるので）
その上でマージンの指定もしないといけませんから、手間がかかります。

なので、段落と段落の間に
<div style="margin: 25px">＆ｎｂｓｐ；</div>
を入れて余白を作ることできたら楽なのになと思うんですけれど。

手間がいやならやらないことだ。

line-heightが違う時点で、n行の高さが変わっちゃう。
まずはそれだけで実現不可能だよね。
実現するには>>361みたいにmarginでpx単位で入れるしかない。

あと、1行目と2行目の間を開けるのは、first-childで実現可能だけど、
IEが対応してないからなぁ。

>>363
first-childじゃ無理だろ。最初の子要素が2行目入ったらどうするんだ？

それはfirst-lineじゃなくて？

背景色と同じ色のhrを仕込む。

SEOスパムと判断されたりして。

line-heightは算出値だから単位無しが良いと思ってる俺は低能ですか。そうですか。

>>361
</p>(改行)<p>をコピーしといて、改行する代わりにCtrl+vとか。

まあ、そうしたいならそれで良いと思うよ。
そもそもブログサービスでHTMLとか気にしても本末転倒というか、木を見て森を見ずというか。

いいか、みんな
　　　　　　　　(ﾟдﾟ )
　　　　　　　　(|　y |)

小さな木でも三本も集まれば　
　　　　　　　　　　木
　　　　　 木　 ( ﾟдﾟ)　　木
　　　　　　＼／|　y |＼／

森にな・・・
　　　　　　　　( ﾟдﾟ)　木林
　　　　　　　　(＼／＼／

・・・・・・・・・
　　　　　　　　(；ﾟдﾟ)　　木林＜なんだってー!
　　　　　　　　(＼／＼／

>>361
<br>でいいじゃん

>>365
:first-lineってpaddingやmarginは指定出来ない気がする。実装は別だっけ？

>>326
俺もこれ、困ってます。
FirefoxとOperaでは、期待通りになるけど、IE6では駄目・・・
何とかする方法ないんですかね。

質問です。
見出しに、記号を付けたいと思い

h2 {
text-indent: 20px;
background: url("images/h2bg.png") no-repeat left center;
}
というように、CSSを書きました。

期待では、<h2>見出し</h2>で、
　■ 見出し
となるのですが、
見出しが長くなると、二行目が重なってしまいます。

　■ぬるぽぬるぽぬるぽぬるぽぬるぽ
　ガッガッガッガッガッガッ

となってしまいます。

　■ぬるぽぬるぽぬるぽぬるぽぬるぽ
　　 ガッガッガッガッガッガッ
のようにするには、どうしたらよいでしょうか？

レスを全部読め

>>373
ttp://www.keynavi.net/ja/bugh/css_misc.html#_title_4_2

>>374
text-indent＞padding-left

>>374
見出し長くなるほうがおかしい。

>>377
なんで？

見出しは説明ではないから

見出しってのは内容を簡潔にまとめて、読む人にわかりやすく伝えるためのモノだろ？
なぜ2行も3行もあるんだ、ってのは当然の疑問だと思う。

確かにヘンだが、>>374通りにするにはtext-align:center;でいいんじゃまいか。

( ﾟдﾟ)ﾎﾟｶｰﾝ

味

>>381
馬鹿なのか無知なのか

>>380
3行は多いが2行になってしまうことはありえるべ。
法律とか政策名とか削れないくせに無闇に長いのがあって困る。

>>385
質問者が法律や政治問題関連のサイトを作っているとでも？

見出しが短いってのが単なる固定概念じゃね？
ちょっと長い文章みたいなのが来る位、普通にありえるぞ。

>>386
なんでそんなに必死なんだ。

例えに噛みつく >>386 ｗ

質問と回答以外はﾔﾒﾚ

勝手に困ってろ

例えが悪いって事でしょ。

はい、次の質問ど〜ぞ。

>>374
ひらめいたぞ。画像をbackgroundじゃなくてimgにするんだ。
2行見出しの時は、縦幅が2倍の画像を使う。下半分は背景色にすれば無問題。

意図的に、二行にするつもりはないのですが、
フォントサイズが大きい環境だと、折り返して見えちゃうことがあるようなのでした。
見出しは、短くするのが道理なのですが、
わかりやすく書こうとするとどうしても長くなってしまうのでした(´д｀;)

>>376
> ttp://www.keynavi.net/ja/bugh/css_misc.html#_title_4_2
これは、すごい。情報ありがとうございます。
さっそく直さなければ・・・。

> text-indent＞padding-left
paddingですね！試してみます。

見出しの件は、

h2 {
　　padding-left: 20px;
　　background: url("images/h2bg.png") no-repeat left center;
}

で上手くいきました。
ご助言ありがとうございました！

>>395
自分の説明能力を上げろ
無駄に解り易さを強調するよりも、文章表現の向上が第一

>>397
肝に命じます・・・

バナー（画像をクリックするとリンク先へ飛ぶ）を、サイト内の全ページに設置したいのですが
CSSで上手いことやる方法ありますか？

>>399
CSSだけで何かが出来るわけではない。対応するhtmlがなければ意味が無い。

>>399
そういうのはSSI

どもです。
サーバーサイドインクルード
この単語を聞いただけで大まかに何が出来るか察しました。
俺が求めていたのは、そっちだったのか・・・・・む、無念・・・・

fieldsetを横に3つ並べたいのですが、左右2つまでしか作成する方法が思いつきません。。
floatを取ると、縦に並んでしまいます。
真ん中に作るにはどうしたらいいでしょうか。

CSS
.right{
　　block:inline;
　　width:30%;
　　float:right;
}
.center{
　　/* ここが思いつきません。。 */
}
.left{
　　block:inline;
　　width:30%;
　　float:left;
}

HTML
<fleldset class="right">右側のボックス</fieldset>
<fleldset class="center">真ん中のボックス</fieldset>
<fleldset class="left">左側のボックス</fieldset>


わかりにくい説明ですが、よろしくお願いします。

全部float:left;にしてdivで囲む

<table>
<tr>
<td>右側のボックス</td>
<td>真ん中のボックス</td>
<td>左側のボックス</td>
</tr>
</table>

>>405
てぶる厨カエレ

IE7入れた人いない？
paddingやらの独自解釈は変わったの？

paddingの独自解釈なんて前から気にしてないからどうでもいい

>>407
自分で試すと良い。個人的にはPNGのサポートだけでも「IE的には」良くやったと思う。IE6よりはバグ減ったし。
でもねぇ……って感じではあるが。

一般的には来年春の自動インスコからが本格普及でしょ
まーだまーだ６ですわ

>>410
webで飯食ってる身としては対応するの遅いくらいだわ・・・

>>411
そりゃ、MSはwebで飯食ってないからなぁ

俺は箸使ってる

>>412
ﾌﾟｷﾞｬ

ttp://www.hippopotamus-cabaret.com/foto/foto.htm

左側の小窓をクリックすると右側に大きく写真が表示されるのですが
これってどうやって作ればいいのですか？

ただのフレームだと思うお

フレームですか。ありがとうございます。

すいません。もう一度質問していいですか？

擬似フレームとやらで上記のサイトのような表示のさせ方できますか？

>>418
フレームの基礎が解ってれば簡単。
メニューhtmlで画像サムネイルをクリックすると（それか縮小画像で）、メインhtmlに画像と説明文を載せたhtmlを表示する様に設定。

始めに画像と説明文を掲載したHTMLを作成。
メニューhtmlに以下のタグ。

<a href="表示させるHTMLのURL" title="リンク先の説明" target="main"><img src="画像URL" alt="代替テキスト" title="画像タイトル" width="横幅" height="高さ"></a>

>>419
フレームにしたくないと仰っているようですが、なぜフレームを薦めるのですか。

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

ブログのCSS部分を弄っていて よく分からない事があったのですが、
ブログの質問も こちらで大丈夫でしょうか？
該当ｽﾚを探したのですが、見当たりませんでした…

１カラムのブログの
エントリー部分の背景画像を 半透明にしたいと思い、

・HTML
----------
<div id="main">
<div class="entry">
記事部分
</div>
</div>
----------
・CSS
------------
#main{width:**px;
background: url(url);
filter:Alpha(opacity=**);
}

と書いてみたのですが、これだと背景画像だけでなく、記事部分まで半透明になってしまいました。
記事部分はそのままで、背景にだけ「filter:Alpha(opacity=**);」を指定するには どうすれば良いのでしょうか？
分かり難い説明でしたらすみません。
宜しければご教示下さい。

散々ｶﾞｲｼｭﾂ。スレ内検索くらい汁。

IE7にしたらスタイルシートの設定がおかしくなった。
以前はインターネットオプションのユーザー補助でスタイルシートを
指定してやればブラウザを再起動しても適用された状態になってたけど、
7にしたらスタイルシートを指定していない状態で起動した上で
どこかのサイトを表示し、その状態でスタイルシートを指定してやらないと
適用されなくなった。解決策はないのかな？

>>424
IE7のスレか、せめてユーザスタイルのスレで聞こうとは思わなかったのか。
そりゃ全くのスレ違いではないけど。

全くのスレ違いだと思うぞ

IEのレンダリングに関するバグや変な挙動と大差無いだろうと思ったが、ここはWeb制作板だからそもそも板違いだな。

リストを横に隙間なく並べたいのですがどうしても隙間ができてしまいます。
----
CSS
----
ul#menu li{
list-style-type:none;
display: inline;
}
ul#menu a{
background-color:#CCCCCC ;
text-decoration: none;
}
ul#menu a:hover{
background-color:#3399FF;
}

----
html
----
<ul id="menu">
<li><a href="#">テキスト1</a></li>
<li><a href="#">テキスト2</a></li>

何が足りないのでしょうか？

足りないのではなく、隙間が多いのです。
隙間を消せばいいのです。

CSSでレイアウトする際には、まず
*{padding:0; margin:0;}
って最初に入れてからやるのが確実でオススメ。
結果的にこれが一番早い。

default.cssをimportするのが今の流行

>>430
既存のサイトに導入する危険性を説明しといた方がいいんじゃ。

>>431
理由は？

未対応ブラウザ除外

それだけだとIE4しか弾けないけど？
ていうかDWとか使ってたらそもそも自動で読み込めるように書き直して下さって
弾けすらしないですけれども。

>>432
何が危険なの？

全くの新規なら問題ないですけども
これを見て
「おおそうか！CSSではこれを入れるのが良いんだな！」
って今までデザインしてたCSSの最上部にこれ書き込むと…後は判るな？

一目でわかる事だし、「おおそうか！次からにしよう！」ってなるんでは・・

おおそうか！確かに！

…ごめんね？気になったの、ごめんね、ごめんね？

嫌だったら1行消すだけだし、危険でもなんでもない気がｗ

>>434
あほか？
IE4以外も弾けるし

DWどんな設定して使ってんだ？

<form> の <submit> とか <reset> とかのボタンだけど、
灰色の四角いやつを下の端に貼るんじゃなく、
PNGイメージでボタンをつくり、自由な位置に貼り付けたい。
どうやってやるの？
貼り付け位置は、DIV＋Positionかな？
PNGイメージは？
灰色ボタンの上にイメージを貼る方法は知ってるのですが、
PNGイメージそのものをボタンにする方法はどうやるんでしょうか。

結局、Javascriptでやるしかないでせうか？
めんどくさいんですが・・・。

HTML　ボタン　画像　
等でぐぐれ

>>440
DWはディフォルトだと
@import "sample.css";
を、保存時に
@import url("sample.css");
と記述しなおすからじゃね？こうすると普通に適用されちゃうからなー

>>443
THANX!!
http://www.tagindex.com/html_tag/form/input_image.html
一発で見つかりますた。

ずーずーしくも追加質問、OK?
これ、ボタンの位置はどーやって指定するんですかね。
あと、submitじゃなく reset を画像ボタンにする方法は？

>>445
バカなの？

うるせー。
ボタンの位置の指定がいまだにうまくいかないんだよーーー。
まあ、バ○という指摘は正しいんだけど。

>>445
そのURLの方法でもいいけど、CSSのbackground-imageを<input>タグに
指定する方法もいいよ。　押すと凹むし。

>>448
THANX again!.

でも、いまだに位置指定ができないんだよなぁ。
俺ってやっぱりバカ？くっそぉ。

>>444
ばか？

>>448
このひとなにいってるの？

>>449
＞貼り付け位置は、DIV＋Positionかな？
そこまで書いておいてなんで位置指定できないのか気になる。

CSSでテーブルの角を丸くすることはできないのでしょうか？

なぜできないと思われるのでしょうか？

調べてないからなので死んできます。

ファイアーフォックスの独自拡張で出来たはず。
正確なプロパティは忘れた

ごめんテーブルじゃなくてボックスかも、アウトラインだかなんだかだったよーな

各種ブラウザの仕様まとめてるとことかって知ってる人いませんか？

さんざん探して無かったのなら、無い。

>>456
webkitにもそっくりなやつあったよ。でもMozilla.orgのやり方が何となく好き。
IEまで対応するならdiv入れ子かな。好きじゃないが。

>>460
書き忘れてた。
例。
div {
border: 1px solid #cccccc;
border-radius: 10px;/*CSS3*/
-moz-border-radius: 10px;/*Mozilla系*/
-webkit-border-radius: 10px;/*Safari用*/
}
CSS3が正式になれば3つ目と4つ目は不要になるはず。Mozilla.orgのやり方はソースを見て。

filter:shadowを使って

<div class="out">
<div class="in">
<p>ここが中身</p>
</div>
</div>

入れ子にしたdivのoutに影をつけて、inには影なしにして文字は影がないけど、文字がかいてるdiv全体に影がかかってる
みたいにしたいんですけど、うまいこといきません
説明下手で申し訳ない。
画像の影がつくように、外枠divでくくったところだけに影をつけたいのですができますでしょうか？

>>462
まずどこに画像を置いているのか教えて欲しい。あと、勿論ブラウザはIEだよね？

CSSスレでの正しい回答をしたるよ。
最初から影付き画像に加工しとけ。

>>464
それはCSS？まあそもそもfilterは「正式な」CSSではないからね。IE7が普及したら透過PNGとかもあるんだけど……。
まあ>>461書いた俺がfilter批判はしちゃいけないんだろうけどね。

すんません、画像じゃなくてdivでくくった範囲を影付にしたかったんですが、どうもそういうことはできないようで（画像を対象にしたものということで）
甘かったです。

>>461
>CSS3が正式になれば
なんか、この勘違いしてる人が多いな。しかも、講演してるような自称上級者だったりする。
ただのベンダースペシフィックを示す接頭辞であって、W3Cの進行状況とは関係ないから。

例えば、-moz-outline と outline は、アウトラインがボーダー内と外という違いがあった。
つまり、前者は後者の先行実装などではなく、独自（ベンダースペシフィック）実装そのものだった。

>>461
「正式な」CSSなんてどこに書いてあるんだ？　日本語不自由なら、最初に言っておいてくれないと。

上に通常の状態、下にオンマウス時の状態がある一つの画像を背景にして横並びのメニュー（6つ）を
リストで作成したいのですが、通常の状態の時に全て一番左上の画像が背景に表示されてしまいます。
オンマウスの状態は正常に表示されます。下記のcssに何か問題があるんでしょうか。

#topmenu ul{list-style:none; position:relative;padding:0;margin:0;}
#topmenu li{display:block; float:left;position:relative;padding:0;margin:0;}
div#topmenu a{
width:130px;height:50px;display:block; float:left;background:#990000 url(image/topmenu.gif) no-repeat;
}
#toppage a{background-position:0px 0px;position:absolute;top:0px; left:0px;}
#toppage a:hover{background-position:0px -50px;}
#web a{background-position:-130px 0px;position:absolute;top:0px; left:130px;}
#web a:hover{background-position:-130px -50px;}
#aku a{background-position:-260px 0px;position:absolute;top:0px; left:260px;}
#aku a:hover{background-position:-260px -50px;}
#ma a {background-position:-390px 0px;position:absolute;top:0px; left:390px;}
#ma a:hover{background-position:-390px -50px;}
#kai a{background-position:-520px 0px;position:absolute;top:0px; left:520px;}
#kai a:hover{background-position:-520px -50px;}
#si a{background-position:-650px 0px;position:absolute;top:0px; left:650px;}
#si a:hover{background-position:-650px -50px;}

以上です。画像は横780px、縦100pxです。宜しくお願い致します。

htmlは下記になります

<div id="topmenu">
<ul>
<li id="toppage"><a href="#"><span class="none">めにゅ−１</span></a></li>
<li id="web"><a href="#"><span class="none">めにゅ−2</span></a></li>
<li id="aku"><a href="#"><span class="none">めにゅー3</span></a></li>
<li id="ma"><a href="#"><span class="none">めにゅー4</span></a></li>
<li id="kai"><a href="#"><span class="none">めにゅー5</span></a></li>
<li id="si"><a href="#"><span class="none">めにゅー6</span></a></li>
</ul>
</div>

>>469-470
なんでもかんでも質問すんな初心者

>>469,470
自分で書いたソースもわからんの？
全て一番左上の画像を背景に指定してんじゃん。
あー目痛ー

言葉が足りませんでした。
通常の状態に画像の左上の部分が表示されてしまうという意味でした。
もう一度CSSを1から勉強しに逝ってきます
有難うございました

質問するときはもっと整理するべきだろ。常識的に考えて。

質問です。

１ページしかないページでCSSを外部にするメリットはありますか？
（読み込み速度とか）

メンテナンスしやすい

>>476
だけ？

>>475
何のためにCSSを導入する？
HTMLはなるべく本来の文書表現を行いレイアウトはCSSでと考えてみて。
読み上げブラウザなどのことを考えればおのずと理解できると思うが。

俺はHTMLのソースだけで書かれている内容がだいたいわかるよう努力している。
だからCSSが複雑でわかりにくくなる傾向があるがメンテは楽かも。

>>475
この先そのスタイルを利用する事がぜったいにないなら外部にする必要ないんじゃない？

質問

absolute　で対象を画面外に出すのは何pxまで可能ですか？

用語は正しく覚えましょう

誰も答えられないのか・・・

ぼくらには無理です

いまいち質問の意味がわからん。
ただ外にするなら好きなようにすればよい

(´・ω・)つhidden

floatで左に枠と右に枠をつくってコンテンツをいれてアップしたのですが、
dreamweaverでデザイン画面で見ると普通なのですが、アップしてから見ると右の枠が
左の枠の隣じゃなくて右側の下にずれているのです。どなたか教えてくださいませ。

ソース

>>486
ブラウザの表示画面全体の幅が左右の枠の幅の合計より狭いから

>>486
ひょっとしてブラウザはIE？もしそうだったらIEの有名なアレじゃないかな？幅の合計が100%(レイアウトによっては99%や98%でも起きる)だとpx値への計算誤差で下にずれ込むやつ。
枠の幅の合計を少しゆとりを持ってレイアウトしてみたら？
まあ、>>487の言う通り、ソースコードがないと確信には至れないけど。

>>489
お前って…

横幅を小さくすればちゃんと表示されました・・・
が、ちゃんと横幅700pxにサイズぴったりに合わせたのにそれじゃ下にずれるってどういうことだ・・・

横幅合計680ｐｘぐらいにすればちゃんと表示できました・・・┐(´д｀)┌一応解決はしたがわからん・・・

>>491
まさかpaddingを計算に入れてない……わけないか。

>>490
やっぱお節介過ぎたかな。それとも別の事？

なんか、うん、いいやつだよな

テーブルの中の列に対してpadding設定してるんだけどさ、

<tr style="padding-top: 100px">
<td>あ</td><td>い</td><td>う</td>
</tr>

みたいな運用方法ができれば便利なんだけどなんで使えないのかね？
現状じゃ、

<tr>
<td style="padding-top: 100px">あ</td><td style="padding-top: 100px">い</td><td style="padding-top: 100px">う</td>
</tr>

のように各セルに対していちいち設定していかないといけない。
3セルだからまだしも、もし100セルとかあったら100回設定せんとあかねん(´･ω･｀)
できれば<tr>の中で1発で設定できれば気持ちええんやがなぁ・・・

td {
padding-top:100px;
}

>>494
外部ファイルか、せめてstyle要素にしたら少し幸せになれたりしなくもないかもしれない。

>>492
は本気でいってんのか…
1日2日前にはじめたばっかりなのかな？

ヘッダーとフッターをＰＨＰで外部ファイルにしたんだけど

ヘッダーとフッターをＰＨＰで外部ファイルにしたんだけど
ヘッダー、フッターは外部にしてるけどindexの方には#headerとかでレイアウトスペースつくるのが普通なの？
それとも#header、#footerのスペースはなくして#mainだけつくればいいのかな・・・そこらへんだれかおしえてくださいな

>>499
PHPは違うかもしれないけど、ssiとかaspxとかjspだとスペースは作るよ

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

全部つくって最終的に#allで囲んでそれにボーダーを四隅に１ピクセルの黒をぬって枠をつくったんだけど
dreamweaver上なら正常なんだけどアップするとなにもはみだしていないのに右側に３ピクセルほどの空白が・・・・もうどうすればよいのやら・・・お力をお貸しください。

>>502
body{margin:0px;padding:0px;}
#all{width:100%}

bodyに直にformを置いてみた。

inputに1pxのボーダーを付けてみたが、ボーダーと画面の一番上端に
1pxほどのマージンが出来るんだが何とかなら無い？

Mozilla系だとinputにvertical-align:topを設定したら直ったんだが、
IEがどうしても隙間を埋められない。
ハックで-1px上に詰めれば出来ない事も無いが、それ以外の方法は無い？

dreamweaver上で見ることなんかほとんどないなぁ･･･。
ブラウザでチェックばっかりだ。

>>504
padding:1px。formに大きさを指定し、position: absoluteを使う。
Mozillaには-moz-box-sizing: border-boxを指定して、width/heightにborderやpaddingを含めるほうにそろえる。

・・じゃだめ？

>>506
ダメっぽい。

仕方ないからハック使おうと思うんだが、IE7用の
*+html form
ってのがOpera9.0にも効いてしまうんだが何か間違ってる？

あ、良く見たらこのハックはベータ版でしか確認されて無いのか。
正式版じゃ出来なくなったのか？

あ、何言ってんだ俺。
Operaはベータとか関係無しに、元からそのままじゃんorz

ttp://www.lucky-bag.com/archives/2006/06/css-hacks.html

ここのページのハックはちゃんと動いてるのに、なんでうちの奴は動かないんだ・・。
コピペでやってもダメだ。

自己解決。
ttp://www.studionh.net/fplusr/stylesheet/ie7cssopera_css_hack.html
ここに詳しく書いてあった。

でも何であのサンプルだと上手く動くんだろう。
外部CSSとか関係あるんだろうか…。

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/hoge_for_ie_7.css" media="all" />
<![endif]-->

なんでハックなんて使うんだろう？？？
7なんて、いつバグ取りでハックが効かなくなるかわかんないし、8も時間を置かずに出すとか言ってるのに…

CSSの設定で横の中央に設定はできるんだけど、縦の中央に設定しても反映されないんだけど・・・なぜ？

>>512
できるわけがない

<HEAD>
<style type="text/css">
td.test {font-size: 200%}
</style>
</HEAD>

<BODY>
</BODY>

うわ、途中で書き込みボタンを押してしまった・・・

<HEAD>
<style type="text/css">
td.test {font-size: 200%}
</style>
</HEAD>

<BODY>

<div class="test">
<table>
<tr><td>テスト</td></tr>
</table>
</div>

</BODY>

上記のようにスタイルシートを設定したのですが、なぜかうまく「テスト」の部分の
フォントサイズが200%になってくれません。どこがおかしいのでしょうか？

>>515
td.testだろ？ だったらhtmlはどう書くか考えろ。

>>515
>>516の言うとおり、あまりに基本的な間違いだから
自分でおかしいところを見つけて欲しい。
クラスを設定し、タグにクラスを指定する、
この２点のやりかたを復習してください。

>>517
<div>で分けようと思ったのはこういうことをやりたかったですね。

<HEAD>
<style type="text/css">
td.test {font-size: 200%}
</style>
</HEAD>

<BODY>

<div class="test">
<table>
<tr><td>ここは200%になるよ♪</td></tr>
</table>
</div>

<table>
<tr><td>でもここはデフォのままだよ♪</td></tr>
</table>

というわけでタグにクラス指定したくなかったわけです（ ´∀｀）ｂ

>>518
俺は優しくないので、そういう質問の仕方には答えない。
基本である事に変わりないし、全く理由になってない。
また、そのためだけのdiv使用はdiv厨の誹りを受けて当然。
聞きたい事は素直に聞くべき。

>>519
でもdivで選別できるようになれば>>518は

<table>
<tr><td>ここは200%になるよ♪</td></tr>
</table>

<div class="test">
<table>
<tr><td>でもここはデフォのままだよ♪</td></tr>
</table>
</div>


のように簡単に入れ替えることができるようになるんですよ。
うえの例ではタグは１つだけですがたくさんのタグ数になるほど
このdivによる切り替えは効果的になったりします。

間違えそのままで何突っ込もうとしてるのかわからないんだけど・・・。
とりあえず前レスに出てた復習やってみたら？

>>520
でももクソもないので勉強しなおしてください

>>520
<td style="font-size: 200%">ここは200%になるよ♪</td>
ってやればいいじゃん。
何血迷っとる？（ｗ

で文字は200％になったのかｗ
（ ´,_ゝ`）

きっとあるパターンは既に試していて、それが糞IEでは効かなかったから
今のパターンにしようとしてるんだよ。

>>525
IEのせい？何を言っているんだ

>>520
今更なに講釈たれてんだよw
お前がバカタレなのはよーくわかってる。もう一度だけ言おう、聞きたい事は素直に聞け。

(´；ω；｀)・・・

<style type="text/css">
td.test {font-size: 200%}
</style>

ではなく、正解は

<style type="text/css">
.test td {font-size: 200%}
</style>

でしたか(´･ω･｀)・・・

まぁ、泣くな・・・ガンバレ

でもここはデフォのままだよ♪

>>529
よかったね！

DIVタグって線幅あるの？

は？
何言ってるんだ？

<div class="box">

<div class="block1">
<p>　ここに文章が入る。 </p>
</div>
<div class="block2">
<p>　ここに文章が入る。 </p>
</div>
<div class="block3">
<p>　ここに文章が入る。 </p>
</div>
</div>
*CSSソースは別記

blockを横3列に並べて正しく表示させることは出来るのですが
最後のblock3のP要素の一部がIE6だと不正に重複して表示され困っています。
具体的にはblock3の「ここに文章が入る。」は意図した場所に正しく表示されますが
末尾の一部、例えば、「入る。」の部分だけがblock1の下に重複して表示されてしまいます。

例示）
　ここに文章が入る。　　　ここに文章が入る。　ここに文章が入る。

入る。(←ここにblock3の一部があらわれる)

親要素のwidthを取り払うとこのようなことはありません。
またFFでは正常に表示されました。IEのバグなんでしょうか？

CSSソース

.box { font-size: 90%;
line-height: 140%;
background: transparent;
margin: 20px 32px 10px 32px;
width: 766px;
}
.block1 {
width: 200px;
float: left;
margin: 0 20px 0 0;
}（block2もこれと同一）
.blok3 {
width: 200px;
float: left;
margin: 0;
}
.p {
margint: 5 0 8;
border-left: #ccc 1px solid;
border-bottom: #ccc 1px solid;
padding: 0.5em 0 5px 10px;
font-size: smaller;
}

>>535
まず、このサンプルではpのcss間違えてるけどね。

>>536の
margint→margin　ですm(_ _)m

親要素boxのwidthに子要素block1〜3の横幅の合計が
同じになるようにしてみても変わりませんでした。

>>535
それだけじゃないし。
まあそれは置いといて、IEのfloatには山程バグがある。
バグ辞典見てみたら。

>>539
IE7でだいぶ解決されたんじゃないのか？

PのCSSを取っ払っても症状が変わらないのでほかに原因がありそうです。
再度辞典確認してまた来ます。

>>540
７で解決されたからって他はどうなってもいいのか･･･？

float多用してるんですが、IE6の印刷ﾌﾟﾚﾋﾞｭｰｶﾞﾀｶﾞﾀ…。IE7では大丈夫なのに。printcssでどこを直せばいいかさっぱりです；

ソースも描かないでそんなこといわれても…w

以下ソースです。
<div id="wrapper">
<div id="header">
もろもろ
</div>
<div id="left">
もろもろ
</div>
<div id="right">
もろもろ
</div>
<div id="footer">
もろもろ
</div>
</div>

#wrapper{
margin:0 auto;
padding-top:3px;
padding-left:0;
padding-right:0;
padding-bottom:0;
width:780px;
text-align:left;
position:relative;
height:100%;
}
#header{
width : 100%;height: 25px;
}
#left{
width:574px;float:left;padding-bottom:10px;
}
#right{
width:195px;float:right;padding: 0px 0px 15px 0px;
}
#footer{
clear:both;width:100%;height:150px;
}

IE7やMacIE5は問題なく印刷プレビューされるんですが、WinIE6だけleftとrightの部分がwrapper内におさまりきらず、縦長になってしまいます…。
それとも、「もろもろ」の部分にあるCSSに問題があるのでしょうか；
初心者ですみませんが、ご教授お願いします。

質問です。
id セレクタにワイルドカードを
使う方法はありますでしょうか？
例えば、html 側に
<div id="id1">
</div>
<div id="id2">
</div>
:
と id が振られている場合に、
id* {
background-color: ...
}
として、id が幾つ増えても対応できるようにしたいのです。
上記の各 div に class を振ればいいと思うのですが、
html は外部ウェブサイトなので変更できません
（ブラウザのユーザー スタイル シートで設定する方法を探しています）。

まとめサイトにて「ワイルドカード」「総称」「全称」
で検索しましたが該当するものは見つかりませんでした。

>>547
無い。

タイトルをcenterizeして、その左右に文字列を右寄せ・左寄せで表示させたいのですが、やり方がよくわかりません。
やりたいのはこんな感じです。

＋ーーーーーーーーーーーーーーーーーーーーーーー＋
｜　　　　　　　　　　　　　　　　　　　　　　　｜
｜←前へ　　　　　　タイトル　　　　　　　次へ→｜
｜　　　　　　　　　　　　　　　　　　　　　　　｜
＋ーーーーーーーーーーーーーーーーーーーーーーー＋

今はtableタグを使っているのですが、できればtableタグを使わずCSSだけで実現したいです。
どなたかお助けを。

>>543
このスレの最初のほうを見ればたぶん幸せになれる

<center>や<div align="center">と同じことをCSSで行うにはどうしたらいいですか。
text-align: center; だとブロック要素が中央そろえにならないようです。

>>551
div {
margin: auto;
}

>>551
>>550

MacとPCとの違いで苦しんでます。
HTMLで、
<ul>
<li class="menu">MENU1</li>
<ul><li>sub1</li><li>sub2</li></ul>
<li class="menu">MENU2</li>
<ul><li>sub3</li><li>sub4</li></ul>
</ul>
とリストを作り、それぞれ「MENU1」「MENU2」の部分を装飾しようとCSSを
.menu{ }
として記述したのですが、

MacのSafari,firefoxの場合、意図した通り、
「MENU1」、「MENU2」の部分にのみCSSが適用されるのですが、
WindowsのIE6の場合、
「MENU1〜sub2」、「MENU2〜sub4」まで一緒に適用されてしまい、
おかしくなってしまいます。

このようなことを回避して、WinIEでも「MENU1」「MENU2」の部分にのみ
CSSを適用するにはどのようにしたらいいでしょうか。

htmlが間違ってる

>>556
うお、なるほど。
WinIEがおかしいわけではなく、間違ったHTMLの記述がMac側で、たまたま意図した通りに表示されていただけだったんですね。
正しいHTMLにしてみたら、Macでも「MENU1〜sub2」、「MENU2〜sub4」までCSSが適用されるようになりました。
今までずっと勘違いしていました。勉強になりました、ありがとうございます。

spanタグを使って、「MENU1」,「MENU2」にCSSを適用してやってみます。
ありがとうございました。

コンディショナルコメントでググれ

クラス名にはアンダースコアは使えますか？
ハイフンの方がいいでしょうか？

自己レスです。

http://www.kanzaki.com/docs/html/htminfo17.html#S32
の「セレクタで使用できる文字」によると、
CSS2仕様書の間違いにより、_が使えないブラウザもあったけれど、
今では仕様が修正されて、_もOKになっているということですね？

＞今では仕様が修正されて、_もOKになっている
OKだけど、仕様＝実装ではないので誤解しないよう。
それから、前にどっかの質問スレで、_を正しく解釈しないcgiを使いたいが〜という人が居た。
_使わなければ済む話だが、慣れてるから使いたいという真に頑迷な人だった。
そういう人にならないように。

>>561
しかし今では実際、_がダメな実装は例外的とみていいくらいではないでしょうか？？
そして今後、時が経つほど例外度は上がっていくでしょう。

なぜ_を使いたいかというと、単にPHPの変数名と共通化できて、
扱いやすいケースがあるということなんです。
（-は変数名には使えないので）

普段他のプログラム書かない人にはわからないかもしれないが
慣れた書き方できないと気持ち悪いもんなんだよ
効率落ちるしね

好きにすりゃーええがな。
うごこうが、止まろうが大勢に影響ないがな。

SEOマンセー

>>562
イヤな奴だねー。おkだって言ってんじゃない。

画像幅とかマージンとかあわせてきっちり７００pxになるようにしてるのにサーバーにアップ
すると絶対ずれてるんだけど・・・なんででしょうか？何回見直してもあってるのに・・・orz

>>567
その書き込みから原因を言い当てられると思うか？

>>567
>>568の言う通り。確認したブラウザくらい書いてね。IEのみの確認は論外。
まあIEは700px未満にしないとダメだし、floatはアレだし。

マルチだよん

見出しを画像で作りたいと思います。その時の表現方法で質問なのですが
<h1><img〜 alt="見出し"></h1>とするのと
<h1>見出し</h1>にして、h1のテキストを非表示にして背景に画像を入れるのと
どちらの方が正しいというかおすすめの表現なんでしょうか？

どっちでも好きなほうにしろ
ハイ次

cssのセレクタの名前の付け方が
勉強できるサイトありませんか？

CSSが膨大な量になってきたので、
規則を身に着けないと整理しきれないんです。

>>571
たいした理由がなければ、
コードが簡単な前者だと思う。

htmlのコードは短くなるけど、
CSSの設定はややこしくて手直しの原因になりやすいし。

>>572、>>574
自分がわかりやすい前者でやることにします。
ありがとうございました。

CSS2.1のワーキングドラフトが新しく出たみたいなんで読んでいるんですが、
http://www.w3.org/TR/CSS21/#crec
の 「interoperable」 って何を言っているんですか？
誰か解説お願いします。

YOUエキサイト翻訳へGOしちゃいなYO!

<div class="container">
<div class="content">

〜〜〜中 略〜〜〜〜
</div>
</div>


このような感じでcontainerで背景を指定して
contentの中に色々配置しています。
IEだとcontentの中の要素全体に背景が広がりますが
FireFoxだと背景が途中で途切れてしまいます。
どうすればいいでしょう？

floatしてる要素の高さは無視される
</div>の前に<div style="clear:both;"></div>
を入れる

cssソース

>>579
うまく表示されるようになりました。
ありがとうございました。

えへ

>>579
>>578だけでよく分かるなあ。

同じ事やったんだろうて。

>>583
エスパーなんだよ

CSSレイアウトでコーディングガリガリやってればたいてい想像が付くようになるYO

＞CSSレイアウトでコーディングガリガリやってれば

質問者以外は大体そうだろ

中央寄せに関する質問です。IE6〜7です。

とあるdiv要素をページの中央に配置したいんですが、IEでは中央に行かずに、左側に寄ってしまいます。
ソースはこんな感じです↓。中央寄せになるようにするには、cssをどう書けばいいでしょうか？

<div class="xxx"><img src="〜"></div>

css部分
.xxx{text-align:center; margin-left:auto; margin-right:auto; width:470px}

>>588
中央寄せしたいdiv要素の包含ブロックに対しtext-align:centerして
.xxx { text-align: left }する。
詳しくはテンプレのFAQを見てね。

こんにちは。質問です

今、影をつけたくて四苦八苦しているんですけど、どうしたらいいでしょうか。
画像ではなく、http://boo.chu.jp/pochiking/　のページの右側のように、全体に影をつけたいのです。


ちなみに今のhtml構成はこんな感じです

<body>
<div id="all">
<div id="all2">
<div id="contents">
<h1>やらコンテンツやら
</div>
<div id="naiyou">
文章
</div>
</div>
</div>
</body>

id="all"は、外側からマージンかけたり width="70%" とかしたり text-align:center　とかしたりしてます。
id="all2"は、テキストを左寄せとか、とりあえず内容全体のわくの役割をしてます。


で、id="all2"の、右側と下部に、影の画像をつけて、全体が浮いている感じを出したいのです。
よろしくお願いします。

>>590
影は画像にしたほうが良いと思うんだけどねぇ・・・
嫌ならborderで良いのでは。

普通に画像でいいと思うけどな。
あと同じくボーダーで。

画像がいいんじゃないかな。
borderって手もあるけど。

同じく

質問させてください。
よく、メインとなる部分の両側に影を付けているページがありますが、
（ttp://www.jackfruitdesign.com/ とか）
固定であればやり方は思いつくのですが、
リキッドデザインの場合どうしたらいいか分かりません。

どなたか教えてください。お願いします。

リキッドデザインで影つけてるところのソース見れば良いんじゃね？

>>596
それがなかなか見つからなくて…。

できない。

tableなんじゃないの？

外枠に左側縦リピート
右端に接する内枠全てに右側縦リピート

参考にどうぞ
ttp://firefox.geckodev.org/

ありがとうございます。
やってみます。

>>601
IEだととんでもない事になるね

＞メインとなる部分の両側に影
普通はbodyとhtmlに左右それぞれ指定するでしょ。

>>603
ほんとだｗ
そこまで見てなかった
まぁ、今回のには関係ないし
こういうサイトがアンチＩＥ・ＭＳなのはしょうがない

>>603
ほんとだｗ
まぁ、このサイトのマークアップとCSSは仕様に厳格に準拠しているから、苦情はMSにでもいうんだな。

IE7だと正常に見られるかな。

MSって何？モビルスーツ？＾＾；

>>607
MicroSoft ＾＾；

高さで%の指定はできないのでしょうか？

div#back{
width:100%;
height:100%;
border:solid black;
}

これで幅と高さが100％のボックスを作って、
表示部を　□←こういう感じに黒線で囲みたいのですが
何か中に入れた分の高さしかでてくれません。

>>609
%は相対単位だから、何に対して100%なのかを指定しないと。
具体的には、body ,html {height:100%;}を指定、同時にmargin,paddingも殺す必要がある。
Opera用にもう一つ指定が必要だったと思うが、まあそれは調べてくれい。

>>609
ttp://www.stylish-style.com/csstec/ultimate/height100.html

こういう事？

>>610-611

ありがとうございます！

上下に横幅100％のヘッダーとフッターを入れて、
真ん中が２カラムデザインで、合計widthが780pxの場合、
ウィンドウサイズが780pxよりも狭くなった時に、
右のが左の下に来てしまいます。
それを何とかしようと、その二つを囲う入れ物を780pxで作ったんですが、
センターにしていなくて、左に寄せているにも関わらず、
FireFoxの場合だけセンターに来てしまいます。
この現象は何とかならないのでしょうか？

ソースが無いとなんとも・・・

よくボックスの上下左右に影みたいなボヤがあるのを見るんですが
あれはどうやってやるんでしょうか？

サンプルのサイトくらい書けやボケ

>>615
入れ子、画像。
つーか、そんくらいぐぐれ。

特殊効果

<div id="main">
<div id="left">
hogehoge
</div>
<div id="right">
hogehoge
</div>
</div>

こんな感じで、CSSが

#main {
background: url(../img/main.gif);
background-repeat: repeat-y;
}
#left {
float: left;
}
#right {
float: right;
}

こんな感じなんだけど、IEだとmainに指定した背景が
right,leftにも表示されるのに、Firefoxだと表示されない。
なぜ？

>>619
>>578-579
自スレくらい見返せボケ

死ぬ程ｶﾞｲｼｭﾂなんだよ。このスレだけでも何回も何回もな。

いや、キーワード分からんしググりようがないんだが？

>>622
足りない脳味噌をちょっとは使え
http://www.google.com/search?q=firefox+%E8%83%8C%E6%99%AF+%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84

>>620,621
ありがと、愛してる

>>623
はぁ？意味が分からん。
>>615のことなんだが

>>625
君の言ってる事がわからんよ。ボヤって何さ？
よく見る、ってならそのサイトのソース見りゃわかるだろうが。

http://www.google.com/search?num=10000&hl=ja&c2coff=1&q=%E4%B8%8A%E4%B8%8B%E5%B7%A6%E5%8F%B3%E3%80%80%E5%BD%B1%E3%80%80%E3%83%9C%E3%83%A4%E3%80%80%E6%AD%BB%E3%81%AD&lr=lang_ja

根暗だな

>>625
バーカ

ボヤって何ｗ

http://ja.wikipedia.org/wiki/%E3%83%9C%E3%83%A4

>>625
ドロップシャドウの事？でもボヤって「小火(「ぼや」と読む)」の事だから……？良く分からない。
影ならhtml要素に右揃え(というか右端)で右の影の画像を下に繰り返し、body要素に左揃えで左の影の画像を下に繰り返し、paddingで影の画像の分だけ左右に空白作ってやれば良いんじゃないの？面倒くさいから試してないけど。
そもそも何故喧嘩腰なの？他の人のやり方に口出ししたくないけど「教わる」ってもっと真摯に謙虚にするものだと自分は思うよ。

そしてfloatの話をしている時に「キーワード分からんしググりようがないんだが」って言われたら普通はそっちの検索ワードで考えるわけで、そういう事がないように多くの質問者は最初の質問した時のレス番号を名前欄に入れているわけ。キレるのはお門違いだよね。
大体、HTMLとCSSのソースを見れば、(「メモ帳」にすら実装されている「検索」という機能を駆使して)すぐ分かるんじゃないの？
俺が言いたい事を要約すると、

「努力もせずに人のせいにするな」ってうちのせんせーがいってました。だからほかのひとにおこったりするのはよくないとおもいます。

って事。ネチネチした言い方でごめんね。失礼な人にいちいち丁寧な対応できるほど自律してないから。

>>632
途中で切れた。
「丁寧な対応できるほど自律してないから。」って書いてた。まあ内容に変化ないけど。

>>633
切れてなかった。何やってんだ、俺。

おまえながすぎ
30文字で言い尽くせ

>>635
ほかのひとにおこったりするのはあんまりよくないとおもいます。(30文字)

marker-offset は CSS2.1 で削除されるとの話があるのですが、
現在使用できるプロパティで marker-offset に相当するものはありますか？
マーカーに画像を指定したとき、
マーカーの位置を CSS でずらす方法があれば教えてください。

どこにそんな話があるんだよ

ttp://www.w3.org/TR/css3-lists/#markers
ttp://hp.vector.co.jp/authors/VA022006/css/lists.html#marker-offset
ttp://dai.pekori.to/opera/docs/specs#css-2.0
こんなところです。
Opera は使っていないのでわかりませんが、サポートしていないそうです。
CSS3 のドラフトによると、::marker 擬似要素で置換されるようです。
試しに Firefox 2.0 で使ってみましたが、エラーが検出されました。

>>639
マーカーをoutsideにして、liにpaddingでいいんではあるまいか。

>640
list-style-position: outside; は既定値です。
マーカーは border の外に生成されるので、padding をいじっても影響しません。
margin をいじるとマーカーがずれますが、リストの内容（テキストなど）もずれます。
あと、list-style-position: inside; は以前試したことがありますが、
2行目以降の字下げがされなかったりなど不都合があるので不採用となりました。

>>641
backgroundにしたら？

>>641
スマンね、使った事もないプロパティなんでな。実装してるブラウザって何？
そりゃ置いといて、君がやりたい事を普通の言葉で説明してくれないか？
borderは何に指定してあるのかね？ソース出して説明するのがいいぞ。

＞list-style-position: outside; は既定値です。
君がinsideにしてるかも知れないだろ？

Pの一行目の背景色を変えて太字にしたいのですが

p:first-line{ background:99CCFF;font-weight:bold }
p{ border-color:blue;border-style:outset;background:#9999FF }

だとうまく表示されません。
どこがおかしいのでしょう？？

すいません#入れ忘れました

p:first-line{ background:#99CCFF;font-weight:bold }
p{ border-color:blue;border-style:outset;background:#9999FF }

です。

>642
現在は背景画像で対応しています。

>643
「マーカーは border の外に生成される」のは一般的なことです。
ttp://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#markers
＞マーカーボックスは主要ボックスのボーダー辺より外側に位置する
とある通りで、マーカーはボーダーよりも外側に置かれるようになっています。
padding はボーダーの内側にあるので、
>641では padding をいじったところで影響しないと書いたのですが……
わかっていただけましたでしょうか。
もちろん、inside にしたまま忘れているなどということはありません。

dt { display: list-item; list-style-image: url(); }
具体的なソースはこんな感じです。
dt をリストのように見せるために display を変更し、
マーカーの画像を指定しています。

<dt><img〜〜></dt>
<dd>文章</dd>

これを<dt>幅固定した上でimgを中央寄せにしたいのですがCSSでどうやったらよいかアドバイス願えませんでしょうか？
centerやtext-alignではうまいことよってくれません（imgサイズがバラバラなのでpaddingだとうまく中央にならない）

それとdd全体をvertical-alignみたいにdtのimgの縦方向真ん中に位置させたいのですがどれをつかったらよいかお願いします

>>646
＞>>641では padding をいじったところで影響しない
dl使ってるなんて初めて聞いたわ。最初に言うべき重要な情報だろうが。
ul使え。以上。

はじめて。
フルスタイルシートで見よう見まねで作ってみたんですけど、つまづいてしまいました。

wrapperの中へ要素を左右に配置すると、
wrapperの背景が反映されないというか、なくなってしまうというか、、、
wrapperがどういう状態なのかすらわかんない状態で・・・
どなたか、ご指摘してください。


以下のようにレイアウトを組んでみました。

【ＨＴＭＬ】
<body>
<div id="container-out">
<div id="container">
<div id="container-in">
<div id="header">
<h1>title</h1>
</div>
<div id="wrapper">
<h2>catch copy</h2>
<p>Please select the menu</p>
<ul>
<li>menu_01</li>
<li>menu_02</li>
<li>menu_03</li>
<li>menu_04</li>
</ul>
<h3>subtitle</h3>
<p class="nomaltext">text</p>
<h3>subtitle</h3>
<p class="nomaltext">text</p>
</div>
<div id="footer">
<p>Copyright(C)2006 ++++. All rights reserved.</p>
</div>
</div>
</div>
</div>
</body>

【ＣＳＳ】
* { font-size: 100%; margin: 0; padding: 0; background-color: transparent; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

h1 { color: #FFFFFF; }

ul, ol, li { margin: 0; padding: 0; border: 0; line-height: 100%; list-style-type: none; }

/* -----------------ベース----------------- */
body { background-color: #f7f7ec; font-family: arial,helvetica,osaka,"ＭＳ Ｐゴシック",sans-serif; }
div#container-out { width: 100%; text-align: center; }
div#container { width:770px; background-color: #d8d8cc; margin: 0 auto; text-align: left; }
div#container-in { background-color: #bcbcad; margin: 0 3px; }

/* -----------------ヘッダー----------------- */
div#header { background-color:#280000; padding: 15px; margin: 0 2px; }

/* -----------------メインコンテンツ----------------- */
div#wrapper { background-color:#ffffff; margin: 0 2px; border-top-color: #1f2802; }

/* ------左ナビゲーション------ */
div#navi-left { padding-left: 15px; width: 185px; float:left; }

/* -----右メインコンテンツ----- */
div#main-right { padding-right: 15px; width: 545px; text-align:left; float:right; }

/* -----------------フッター----------------- */
div#footer { clear:both; text-align:center; background-color:#744747; padding: 15px; margin: 2px; }
div#footer p { color:#FFFFFF; }

それで、
<h2>catch copy</h2>
<p>Please select the menu</p>
<ul>
<li>menu_01</li>
<li>menu_02</li>
<li>menu_03</li>
<li>menu_04</li>
</ul>
の部分を左側に配置し、

<h3>subtitle</h3>
<p class="nomaltext">text</p>
<h3>subtitle</h3>
<p class="nomaltext">text</p>
の部分を右側に配置したいんです。

それぞれを<div id="navi-left">と<div id="main-right">で
囲んだわけですが、そしたらfirefoxでみると背景が#ffffffにならず、
IE6でみるとなんかもうヘッダーの色も反映されず、
どこが間違っているのかよくわかりません。
おねがいします、教えて！エロい人！

>>644,645
1行目が太字って事だから、例えば<p></p><p></p>としてたら、
両方太字になってしまい違いがわからないわけだが。

>>649-652
＞ wrapperがどういう状態なのかすらわかんない状態で
慣れるまではdivにそれぞれborderを指定するとわかりやすい。
その質問は、このスレ内で何度も出てる超既出質問だからスレ内検索すれば回答がある。
ちなみに昨日も同じ質問あり。
それからテンプレに参考になるサイトがリンクされてるから、よく読んで基礎を勉強してね。

>>647
dlはブロック要素だよ。>>5や>>8を読んでね。

>>654

ありがとうございました。floatに関しては解決いたしました。
もう一点、div#headder がIE6で表示されないのですがこれはどうしてでしょうか。

>648
そんなことを言っていたら CSS の存在意義はありません。
dt としてマークするべきと判断したので dt を使用しているだけのことです。
リストとして「見せたい」から CSS 側では display: list-item; とする。
しかし「文書構造」は dt なので、HTML 側では dt とする。
何か間違っていますか？

<li>は display: list-item; ですが、
display: list-item; を指定している以上、<li>と同じように表示するでしょう。
つまり、dt だろうと li だろうと関係ないだろうとと思います。
UAの動作には詳しくないので断言できませんが。
マーカーの表示がおかしいからといって li に変更するなど、
スタイルのためにマークアップを変更するのと同じことです。
テーブルレイアウトと同等ですよ？
それで満足するのなら問題ありませんが。

とりあえず CSS3 が使えるようになるまで待った方がよさそうですね。

別にやりたいようにやればいいんだけどね
手段と目的をとりちがえちゃ駄目だよ
大事なのは目的であって手段は方法でしかないんだからね
まぁ、好きなようにやったらいいんだけどね
今のウェブじゃ文書構造完璧にしても意味がないんだよね
それよりも見た目のユーザビリティを優先すべきだと思うよ
結局個人サイトならどうでもいいんだけどね

>>637
知ったかして満足したかい？

>>658
> 今のウェブじゃ文書構造完璧にしても意味がないんだよね
> それよりも見た目のユーザビリティを優先すべきだと思うよ

閲覧者にとってはそうだろう
既存のブラウザで表示できれば文法なんて守らなくても問題ないし
正しい文法で書いてIEで見れなくなったら本末転倒と思うかもしれない

でも、そんなの（ブラウザで表示できればいい）は自己中心的な発想でしかないんだよ
Webの未来を考えるなら、ブラウザ製作者を考えるなら、仕様を忠実に守るべきだ

いまのブラウザで表示できればいい、という考えで作るならば、ブラウザ製作がより一層困難になり、
新たなブラウザの誕生やWeb標準を忠実に解釈するブラウザの発展を阻害するだろう

まあ、口ではどうとでも言えるわな。
現実的な問題として、やりたい事がやれないなら、やりたい事を諦めるか、
文法でベストをベターに妥協するかしかない訳だが。

漏れは CSS2のブラウザに完全に準拠してレイアウトして、IEのみにIE用のCSSを出してるな・・・。

おまいら熱でもでたのか？

>>637 >>657

リストとして見せたいのに文書構造がdtってどんな状況でしょう？
その画像がマーカーとしてだけではなくなんかの意味があるのならdtにそのまま画像を入れればいいんじゃないの？

あと、現在はdtに背景表示してるんだよね？
そのdtには文字を入れているのかな？そして非表示にしてる？
dtに文字情報があるならリストに見せたいってのも変じゃないかな？普通にdtでOKな気がします。


状況を考えてみたけど

・おすすめ商品その１　　商品説明が入る。商品説明が入る。商品説明が入る。
・おすすめ商品その２　　商品説明が入る。商品説明が入る。商品説明が入る。
・おすすめ商品その３　　商品説明が入る。商品説明が入る。商品説明が入る。

こんな感じなのかな？

そんな未来まで残るコンテンツでもあるまい

>>655
どもです
ブロック要素を中央寄せにしたいのではなく、ブロック要素内のインライン要素(img)を中央寄せにしたいのですが可能でしょうか？

text-align: center;でいいんじゃん？

>>666
もうtableに汁

>>649-652に関して、もうひとつ質問いいでしょうか

はしょって書きますが、
【HTML】
<body>
<div id="container-out">
<div id="container">
<div id="container-in">
<div id="header">もろもろ</div>
<div id="wrapper">もろもろ</div>
<div id="footer">もろもろ</div>
</div>
</div>
</div>
</body>

【CSS】
body {background-color: #f7f7ec;}

div#container-out {width: 100%; text-align: center;}

div#container {width:770px; background-color: #d8d8cc; margin: 0 auto; text-align: center;}

div#container-in {background-color: #bcbcad; margin: 0 3px; text-align: left;}

div#header {background-color:#660000; padding: 0 15px; margin: 0 2px; border: 1px solid #FF9900;}

div#wrapper {background-color:#ffffff; margin: 0 2px; border-top-color: #1f2802;}

div#footer {clear:both; text-align:left; background-color:#744747; padding: 0px 15px 0px 15px; margin: 0 2px;}

div#clear {clear:both}

これだとfirefoxではヘッダー背景色がちゃんと反映されるのに
IE6だとdiv#container-inの背景になっちゃいます。
そんで、ブラウザでドラッグしてみると、headerの背景が出てくるんです。

なんででしょう・・・教えて下さい！

>>670,671
再現しない。このソースで確認したわけ？
あと#container-outはいらないと思うけど。

実験をしていたら偶然にも自己解決しちゃいました。
body div {}に、autoを入れていた事が問題でした。

それにしても、コードの解釈は統一してもらいたい物ですね。
borderがwidthに対して−で計算するIEと＋で計算するFireFoxと…
いくらFFが正しいからと言っても、この場合はIEの方が良い部分とか。

>>673
あら探しすると、Firefoxはレッサーパンダ(Firefox)であって炎の狐(Fire Fox)ではないから大文字は最初だけなんだけどさ。

まあそれはともかく、ボックスモデルは仕方がないね。開発チームがどう考えてそうしたのかは知らないけど、その方が直感的なのは確かだしね……。
CSS3には解決用のプロパティがあるけど、いまさら感がある上に、MSの解釈への妥協みたいな気もするし。
大体、IE5解釈に設定してレイアウトすれば、今の多くのブラウザが「誤解」する。
で、IE5とNetscape、Opera、Firefox、Safariなどの現行バージョンまで(+おそらくあといくつか先のメジャーアップデートまで)のどちらが先にシェアが減るかといえば、多分IE5が先に消える気がするんだよ。
俺はきっとこの先もCSS1/2のレイアウトを使うと思う。box-sizingが90%以上のブラウザでサポートされたらその時にまた考える。
あと、IE8に期待。まだIEは出遅れているからね。(IE8が出た頃には「IE9に期待」って言ってる悪寒)

>>613,673

そりゃまあコードが統一されているにこしたことはないんだけど、
最近ではいかにハックを使わずに全てのブラウザの表示をあわせるかが楽しくて仕方ない。

widthなんかとpadding,borderを一緒に使わない、floatの向きにmarginをとらない、
clearは自然に、無駄なdivはつくらない。

こんな感じで気をつけてると結構綺麗にまとまります。
いろいろな制限があったほうが工夫するようになるから頭の体操にもなるね。

>>672
すみません、はしょり方さえ失敗してしまう私・・・
そのままソースをコピペします。

<body>
<div id="container"><div id="container-in">
<div id="header">
<div id="header-title">
<h1>title</h1><p class="title-read">read</p>
</div>
<div id="header-navi">
<ul><li><a href="html_lesson.html">home</a></li></ul>
</div>
<div id="clear"></div></div>
<div id="wrapper">
<div id="navi-left">
<h2>catch copy</h2>
<p>read_text</p>
<ul><li>menu_01</li><li>menu_02</li><li>menu_03</li><li>menu_04</li></ul>
</div>
<div id="main-right">
<p class="nomaltext">text text text text text.</p>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p>Copyright(C)2006 ++++. All rights reserved.</p>
</div>
</div></div>
</body>

body {background-color: #f7f7ec;}

div#container {width:770px;background-color: #d8d8cc;margin: 0 auto;text-align: center;}
div#container-in {background-color: #bcbcad;margin: 0 3px;text-align: left;}

div#header {background-color:#660000;margin: 0 2px;border: 1px solid #FF9900;}
div#header-title {padding-left: 15px;width: 180px;float: left;}
div#header div#header-navi {padding-right: 15px;width: 540px;float: right;}
div#header div#header-navi ul {list-style-type : none;color: #ffffff;}
div#header div#header-navi ul li{font-size:12px;color: #ffffff;float: left;display: inline;padding-left: 20px;}
div#header div#header-navi ul li a {color: #ffffff;text-decoration: underline;}
div#header div#header-navi ul li a:hover {color: #f7f7ec;}

div#mainimage {background-color:#666666;height:250px;margin: 0 2px;clear: both;background-image: url(../images/pic_01.jpg);background-repeat: no-repeat;}

div#wrapper {background-color:#ffffff;margin: 0 2px;border-top-color: #1f2802;clear:both;}

div#navi-left {padding-left: 15px;width: 180px;float:left;border: 1px solid #000000;}

div#main-right {padding-right: 15px;width: 540px;text-align:left;float:right;border: 1px solid #000000;}

div#footer {border-top-width: 1px;border-top-color: #5b3434;border-top-style: solid;clear:both;text-align:left;background-color:#744747;padding: 0px 15px 0px 15px;margin: 0 2px;}

div#clear {clear:both}

>>676-677
こんなかんじでつくってます
ヘッダーの背景がfirefoxではちゃんと表示されます。
IE6では・・・・・出ません。

ここでずーっとつっかかってます。

>>678
ちょっとさあ整理しようよ、ソース。いらないdiv大杉、div厨だよ。
大目に見るとしても、#header-naviとかidふってるのに、
div#header div#header-navi {〜}って。。意味ないじゃん。

あとclearは複数あるからclassね。
今調べているけど、ちょっと面倒くさい……。
あ、nomaltextはnormaltextね。それと、「普通のテキスト」にclassふるくらいなら別なのにふった方が。
突っ込み入れても仕方ないけどさ。

>>679-680
すみません。。恥ずかしいです！
div#header div#header-navi {〜}の部分、確かにそうですよね、、、
スペルも間違ってました、、、。

あと、clearをclassに変更しました。
依然、ヘッダーの背景は格闘中です。

それで、headerに高さを指定してあげたら、IE6で表示されたんですけど、
これは根本的な解決にはならないんですよね？

>>682
IEは高さか幅を指定してやればとりあえずやってくれるから正解。
height:100%でもOK。もろ裏技なハックも必要なし。
たださ、footerのボーダー系はborder-top一つに纏めようとかさ、wrapperのボーダーはnoneになってるぜとかさ、header-naviの文字色はaに指定するだけでいいだろとかさ、言わなくても分かってくれるよね。
ストイックにタイトにいこうよ。

>>623
もちろん突っ込み所はそこだけじゃないけどさ。携帯で打つのは面倒くさいから他の人に突っ込みくらっといて。他の人が乗り気だったらだけどさ。

>>682
それでいいならいいでしょ。
ところで、#clearと#wrapperと2度clearしてるが。#footerもだし、意味なくclearしてる要素もある。
冗長なソースは間違いに気付きにくくなる。君の場合、書き直した方がマシと思う。

携帯ﾜﾛﾀ

箸が転げてもおかしいお年頃なのねん

>>683

ありがとうございますありがとうございます！！わかりました！
初めてフルCSSでコーディングすることが出来ました。

もっとタイトに書いていくようにします。
つっこみ箇所に関してはお恥ずかしいです、全部理解しました。
こちらにコピーする時にいらないものが色々と残ってたみたいです。

あーすっきりしました。ほんとうにありがとうございました。

>>688
もう見てないかもだが、#header-navi ul liはdisplay: inlineだけでなんとか上手くいく気がするよ。
もちろん、widthやheightを指定したりしたいならfloatだが、その時はdisplay: inlineが邪魔。
これが(少なくともナビゲーションの)デザインそのままなら、不要なフロートは削除する方がいい。レイアウトが無意味に複雑になるし、それにレンダリング速度にも影響……するかどうかは知らないが。
それに、body要素への指定をhtml要素へ、containerへの指定をbody要素へ、container-inへの指定をcontainerへ変更してcontainer-in(HTML)を削ってもいいと思う。
最初は合理的な書き方ってよく分かんないけど、やっていったら何か掴めるかも。好きなサイトのソースコード見たりすると面白い。
CSSコードの整理の仕方は自分はmozilla.orgの整理手法を参考にした。全ての人に必ずしも合うやり方とは決して言えないけど。

まあチラシの裏として全てスルーしてもいいけどさ。

スルースル

外部スタイルシートを使っているんですが、operaだけ反映されなくて困っています…
macで作っているんですが、何故こういった現象になるんでしょうか？
ご教授お願いいたします

operaで反映されるように書いてないから。

>>692
＞operaで反映されるように書いてないから。

ありがとうございます。
それはopera専用に何か宣言を記述しなければならないという事ですか？
他のブラウザでは普通の記述で反映されてるので…

そう言う事もある

>>694
了解しました。
記述法調べてみます。
ありがとうございました！

可哀想だから適当なレスすんなよｗ

>>693
普通に記述すれば反映される筈。
CSS全てが反映されないの？
なんか変な書き方してるんだろうと思うよ。
該当部分書き出してみ。

適当な質問だもん、適当なレスにしかならないでしょ

まぁ、適当な奴が答えてるもんな

>>691
Operaは確かacid2テストにも合格するほどきっちりした
つくりになっているから、外部スタイルシートが読み込まれないのは
Operaの問題ではなく書き方が間違っている可能性が高い。
とりあえず、ソース出してみそ。

適当な質問ですよね、すいませんでした。
自分のサイトでは主に外部スタイルシートはフォントの種類や色などを制御するだけのものにしているんですが…


@charset "Shift_JIS";

.text { font-family: "Verdana", "Osaka", "MS UI Gothic"; font-size: 9px; line-height: 15px; color: #ffffff}

A:{text-decoration:none; color:#ffcc33}
A:active{text-decoration:none;}
A:visited{text-decoration:none;}
A:hover{text-decoration:none; color:#999999;}

もっと長いですが、classのは全部同じ感じなので…
根本的に記述が間違っているのでしょうか…

>>700
適当な質問じゃないから気にするなって。

見た感じ所々セミコロンが抜けてるんだけどどうかな？

>>701
ありがとうございます。
あっ！セミコロン確かに抜けてますね…

訂正して確認してみます！

外部cssファイルの問題ではなく、cssファイルの呼び出し方の問題な希ガス

記述訂正してみましたが、ダメでした。

>>703
ちなみにhtmlファイルには
<link rel="stylesheet" type="text/css" href="style.css">
とだけ書いてるんですが…
何か加えなければならないんでしょうか？

ところで、「A:」って何？素で分からないんだけど。

>>701,702
最後の指定はセミコロン省略可だよ。

>>704
それから、まさかとは思うが、環境設定で作成者css使わないとか、
表示で他のcss指定してるとか、なんて事はないよな？

とりあえずもう一回色々と調べて勉強してみます。
またいつかお世話になるかもしれませんが…

色々と教えていただいた方、本当にありがとうございました。
必ずoperaでも反映させてみせますです。

>>706
省略可っつーか本来書かないのが正しいだろ

>>707
はい、それはしてないです。

>>709
実装上、書いても書かなくても問題ない。

>>700
とりあえず、そのHTMLファイルをCSS validatorにかけてみるんだ！

>>710
operaでそのhtml開いて、ツール＞詳細ツール＞エラーコンソールを見てみ。

>>711
んなこたわかっとるよ

うわっ！！！！！

>>712-713
その通りにしてみたら、反映されました！やばいです！！
何がダメだったのか、正確には分からないのですが、font-familyの指定で日本語使ってる箇所（ヒラギノ丸ゴ）が一つあって、それを消したら表示されました。
基本的な間違いだったんですかね…

本当に皆さんありがとうございました！

Operaのバージョンいくつ？
最新版では修正されてた気がしたけど、フォントファミリーを記述する時、
日本語のフォント名の後は読み込まなくなるだか忘れたけどってバグが有ったような。

つかさあ、初心者ならソースを略すなって。

問題が再現するソースじゃないと意味無いよな。

でも、全部ここに貼り付けるわけにもいかんよな。
サイト晒すかアップローダーに上げるしかないかな。

省略したって構わないが、少なくとも再現するか確認してから貼るべきだと。
そのプロセスを経る事で、自己解決する場合もあると思う。
最初から全部うpして、どこがおかしいでしょうってバグ取り的質問されても困るし。
まあ今回のようにfont-famly指定してる所は晒しといて、中身を省略する意味はわからないがね。

あらタイポ。font-familyね。

>>689

ありがとうございました。
為になる情報ありがとうございます！

>>709
最後にセミコロンつけたほうが美しいと思うし、
セミコロンをつけた状態で CSS Validator にかけてもエラーで無いけど。

本当にセミコロンつけることが間違っているというなら、
ソース (W3Cのドキュメントなど) をよろです。

>>723
しつけえな。間違ってるなんて言ってねえだろ。俺も毎回書いてるし。
"省略可"じゃなくて"書いても構わない"。単に表現の問題。

「本来書かないのが正しいだろ」って書いてあったからつい反応しちゃった
ごめんね

こういうことね。
「本来書かないのが正しい」が、別に「書いても構わない」

どっちが正しいとかいう規定はないだろ?
あとから追加で要素を加えるときに、ミスにならないように常につけておくことを推奨するがね
個人の好みの問題

「本来書かないのが正しい」じゃなくて、
「書くのも書かないのも正しい」

んな青臭い話はみっともねーぞ、おい！

Because of the way selectors work, multiple declarations for the same
selector may be organized into semicolon (;) separated groups.
http://www.w3.org/TR/REC-CSS2/syndata.html#declaration

ということらしいよ。最後にセミコロンがあってもvalidなんだから、どっち
でもいいんじゃないの。

http://www.w3.org/StyleSheets/home.css

W3CのCSSは最後にセミコロンあるみたいだね。
外部CSSだけどね。

本来は書かなくても書いてる様に画面には書かれますが
仕様書には書いても書かなくても良いと書いてるので　ってどうでもええわ！

本日のおやつはコロン

「本来書かないのが正しい」ってどんな俺ルールだｗ
それが間違ってるのに、「書くのが間違い」なんて言ってないなんて主張してるしｗ

もうコロンを書くななんて〜 言わないよ絶対ぃ〜

>>726
Appendix D. The grammar of CSS2
http://www.w3.org/TR/REC-CSS2/grammar.html
には以下の様に定義されている。

>ruleset
> : selector [ ',' S* selector ]*
> '{' S* declaration [ ';' S* declaration ]* '}' S*

「[ ';' S* declaration ]*」とグループ化されているので、
最後のセミコロンは省略するのが正しい様にも見えるけど、

>declaration
> : property ':' S* expr prio?
> | /* empty */

なので、declaration が空値の場合、セミコロンで終わっても間違いではない。
−−と読んだのだけど、どうよ？

CSS制作初心者です、どうぞ宜しくお願いします。

http://www.goodtheater.jp/
こういうサイトのように、上のあるメニューをクリックすれば、
下の部分がリンク先ページ表示されるには、どのように
すればいいのでしょうか？
フレームでは、target指定で済むと思うのですが。

よろしくです。

全ページに同じメニューを入れる。手動でやるなりSSIでincludeするなり
CMS使うなりすればよし。CSSでは無理。

どうも、ありがとうございます。

全ページに同じメニューを入れるとしても、
http://goodtheater.jp/link/
のサイトでは、メニューをクリックした時、
上のメニューは再度読み込んでないような気がするのですが。
どうしているのでしょうか？？

再度読み込んでるから安心しとき。

リキッドで作ってるんですが、画面縮小時にイメージがつっかえて(横幅が原因）
崩れてしまいます。
　
画面の可変時にイメージをボックスから
はみ出させるにはどうすればよいですか。

>>741
IEだとそれできないかも
画像の横幅も一緒に変わるようにした方がいい気がする。

一度違うスレに書き込んでしまったのですが、CSSの質問なので移動してまいりました。
よろしくお願いいたします。

CSSのpositionの値のfixedは、IEではウィンドウ固定ではなくページ固定になってしまうのでしょうか？
表を参照させながら文字で説明をするページにしたかったので、表をfixed指定したのですが、NNではウィンドウ固定されてもIEではページ固定なのかスクロールしてしまいます。

CSSだけで表現しようと思ったら擬似フレームなどを使うしかないですか？
でなければ、HTMLでフレームかインラインフレームを使うか、JSを使うとかしかないでしょうか。
それとも自分の指定の仕方が間違っていて、positionのfixedはIEでも正しく書けば表示される値なのでしょうか。

>>743
IE6 は psoition: fixed を解しない。
有名なバグなので、ググって見るといいかも。

>>744
ありがとうございました。
有名なバグだったのですね。
自分の調べ方がヘタだったのだと思い知りました。
もう一度調べなおしてみます。

>>745
>>9読みなされ。

>>746
あ！　ありがとうございます。
すみませんでした、１〜８までにある参照リンク先の文章を順々に読んで内容を判別していくのに必死で
すぐそこにあるそれに気づきませんでした・・・
まさに欲しかった知識です。灯台下暗しでした・・・

角丸ボックス（塗りつぶしでなく枠のみの型）を作りたいんですが、
ググっても塗りつぶしボックスの作り方しか載っていませんでした。
軽くて初心者にも分かりやすい作り方は無いでしょうか？

>>748
ttp://d.hatena.ne.jp/tikeda/20060501/1146444788
下のほう

IEとFireFoxでの見え方の違いに困ってるんですが、
主になにに気をつければいいのでしょうか？

まとめて説明してあるサイトとかありますか？

>>750
最初からFirefoxに合わせて標準モードで作れば、さほど面倒な事にはならないと思うが。

>>736
それが正しいと思う。

>>750
IEとFirefoxに限定しなければ
http://mb.blog7.fc2.com/blog-entry-83.html
が役立つかもよ。

すみません、どなたかお力添えをお願いします。
HTML質問スレかこちらか迷ったのですが、板違いでしたら申し訳ありません。

HTMLファイルのほうに
<div class="menutitle"><img src="./img/menu.jpg" align="left"></div>
という風に画像を表示させているんですが、
画像の左側と右側の余白が消せなくて困っています。

CSSファイルのほうには
.menutitle{
width: 73px;
height: 320px;
margin: 0px;
padding: 0px;
float: left;
}
と設定しており、画像のサイズは横幅が73pxです。
理論上、画像の幅とDIVの幅が一緒なので左右に隙間はでないと思うんですが、
この隙間ができる理由と対処法がありましたらご教授願えませんでしょうか。

一応IE6で動作確認しております。

>>753
imgに対するpadding/marginは試した？
あとさ、単なる疑問だけど、divをfloatさせてさらに中でimgをalign="left"させてるのは何故？

>>754
align="left"に関しては、floatさせる前につけてたのを消し忘れていました。
消したらなぜか余白は消えましたので、そこが問題だったようです。
すばやいご回答ありがとうございました〜。

なーんか変な指定方法なキガス。そもそもボックス要素にする意味が無いからDIVで囲む必要が感じられない
SEO対策にテキストを配置して、それtext-indentとかですっとばしてバックグラウンドに画像配置するならまだしもさ。

どうしてもそれでやりたいならこうかなぁ。

XHTML側は
<div class="menutitle">
<img src="../img/menu.jpg" width="73" height="320" alt="代替えテキスト">
</div>

で、CSS側は
.menutitle{text-align:left;}

これでいーんじゃないの？
廻りのソースがわかんないから微妙だが。

というより、imgにfloatを適用させてdivを消すとか……。もしdivの高さとimgの高さが同じであれば、だけど。
実際のコードを見ないとはっきりは言えないけど、無意味なdivは叩かれる原因になりかねないし。有意義なものならいいけど。

>>756
divが適切かは置いといて、imgが他のどのブロック要素にも入ってないなら入れなきゃならんのでは？
Transitionalで適当にやるならいいけど。

それと、XHTMLというなら　/　入れようよ。

PS3のネットブラウザって、ここ的にはどうなの？ 関係有るの？

>>759
ここみたいに過疎る予感
ttp://pc8.2ch.net/test/read.cgi/hp/1154787266/

すげえ今更だけど誰も突っ込んでないみたいなんで念のため。

>>648,658
display:list-item;にしたらliでもdtでもdivでもspanでも関係無くね？

>>664
>リストとして見せたいのに文書構造がdtってどんな状況でしょう？
dtって本来はどっちかというとlist-itemだと思う。
たまたまMosicやNetscapeが採用したデフォルトスタイルがblock風だったってだけで。
実際、リスト風にしてる人もいる
ttp://www.remus.dti.ne.jp/~a-satomi/nikki/
し、俺もしてるし。

今更だな

menutitleならhxでもいんじゃないかなとおもった。

リストになってるならdtとか。

質問させて下さい。
下記のようにソースを書いていますが、MacIEで正常動作しません。
リンクそのものが機能せず（カーソルを乗せてもカーソル表示が変わらず、
リンク先に飛ばない）また、<h1>や<ul>、本文との間に大きなスペースが開きます。
（Win&MacのFirefox，WinIEは、特に問題なく動きます）
何が原因なのでしょうか？

body{ margin:0;}
ul{ margin:0; padding:0; list-style:none; }
#contents{ margin:0; padding-bottom: 24px; padding-left:10px; border-bottom:1px solid #cc9999; }
#contents li{ margin:0; display:inline; list-style:none; }
#contents a{ margin-right:10px; margin-bottom:4px; line-height:18px;
                 width:2.5em; height:18px; float:left; text-align:center; }
#contents a.active, #contents a:hover{ border-bottom:4px solid #cc9999; padding-bottom:2px; }

<h1>タイトル</h1>
<ul id="contents">
    <li><a href="./list1.html">項目１</a></li>
    <li><a href="./list2.html">項目２</a></li>
    <li><a href="./list3.html">項目３</a></li>
</ul>
文章<br />
文章<br />
文章<br />

ＰＨＰで外部のフッターとか読み込んでいるんだけど、外部のフッターにＣＳＳ使っているんだけど、それをＰＨＰで
読み込むとソースに＜ＨＥＡＤ＞＜ＢＯＤＹ＞などがまたできてしまうのです。

でもそれを消すとその間に挟まってるＣＳＳまで消えてしまうので困っています。
こういう場合は読み込むメインの方にあらかじめフッターのＣＳＳを設定しとくのでしょうか？

もうしそうだったらすごくややこしくなりますよね？

フッタに<head>とか<body>とか書いてあるのか？ 日本語でおｋ

>>765
外部CSS使おうぜ

>>764
あてずっぽうだけど、#contents aをfloatしてるのがいかにも怪しい。
というかfloatしなくても良いような。どういうレイアウトにしたいの？

a:activeがa.activeになってる。

>>765
そう。メインのCSSに一緒に書く。

>>764
＞リンクそのものが機能せず（カーソルを乗せてもカーソル表示が変わらず、
＞リンク先に飛ばない）また、<h1>や<ul>、本文との間に大きなスペースが開きます。
MacIE5.2で上記は再現しない。
別の問題が発生してるワケだが、取り合えず再現するソース貼れ。

>>760
DS等にはテスト環境として、operaのスモールスクリーン表示を
使うのか。 なかなかいいねこれ。

OperaのDebug with outlineはCSSではまったときちょっと使える。

<img class="green" src="***.gif" />

といったようにimgにclass属性を指定してもよいのでしょうか？
というかweb標準になってますか？

class
All elements but BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

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

いきなり質問してすいません。

表の縦幅をブラウザの下端までぴったりくっつけたい
ときはどうすればいいですか。

ディスプレイの画面サイズによって下端までの高さが
変わってくるのでうまく調整できないです。

どなたかわかる方いらっしゃいますか？

>>776
html, body {
margin: 0;
padding: 0;
height: 100%;
}

table {
margin: 0;
padding: 0;
height: 100%;
(その他のスタイル)
}
を試してみて。

言い忘れてた。
>>777は「html, body」を「*」にしても多分動くけど、レイアウトが崩れかねないから、そっちにしたいときは注意ね。

>>773
altもREQUIREDだから忘れずに。

こんにちは！
動かないので教えてください。。。
<style type="text/css">
<!--
INPUT{text-decoration:none;border-style: none;color:blue;background-color:white;}
INPUT:Link{color:blue;}
INPUT:Visited{color:blue;}
INPUT:Active{color:blue;}
INPUT:Hover{color:#f00;text-decoration:underline;background-color:#fdd;}
-->
</style>
<INPUT type=submit value=【　送　信　】>

よろしくおねがいします。
なお、めんどうなので、 " は消しています。

>>780
動かないって言われても･･･何がしたいの？

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

>>780
:linkと:visitedはリンク疑似クラスだから普通のinputには無意味。
:link、:visited、:hover、:activeの記述順は「LoVe and HAte」だから:activeと:hoverは順番が逆。
さらにWindows IEのバージョン6まではa以外への:hoverをサポートしない。だからIE6だったら動かない。7は知らない。

分かった？

<span>あ</span>
でくくった部分に29*22の画像を挿入したく

span
{background:url(画像パス) norepeat;
padding-left:29px;}
とすると、画像と文字が上下にずれるのと、画像の下がすこし切れてしまいます。
(line-heigt:1.8em;にしています）

画像と文字を上下中央揃えにして画像の下がきれてしまうのを防ぐにはどうしたらよいでしょうか？
vertical-alignを使うのかとも思いましたがうまくいきませんでした
お願いします

spanはインライン要素だから背景でやるならブロック要素でやったほうがいいとおもう。
<p>とかそれにあったやつでタイトルならh1とか

>>784
span {
background: url(xxx.png) no-repeat left center;
padding-left: 29px;
}

あと「line-height」ね。

>>785
インライン要素だとまずい理由を教えてほしいな。

愛して傷ついて。。。
へえー
ありがとう！いろいろ。。。

>>781

Hoverです！！
テキストライクのHover！！
Ｊａｖａ無しで。。。

>>786
即レスどもです。
ん〜　さらっと解決できる人尊敬します

訂正ども

レスが遅くなってすみません。

>768
bodyで{ text-align: right; }を指定しています。
（書き込みの際に間違えて削除してしまいました）
全体の文章は右寄りで、リストだけ左寄りというデザインになります。

> a:activeがa.activeになってる。
ありがとうございます。修正しました

>770
失礼しました。以下のソースで再現すると思います。

確認の際に色々弄ってみましたが、body{ font-size: normal; }が
原因なのでしょうか…？

ソースです

body{ margin: 0; font-size: normal; text-align: right; line-height: 140%; }
#sub{ padding-right : 10px; }
#little{ font-size: small; line-height: 120%; }
ul{ margin-bottom: 0em; margin-top: 0em; margin-right : 0em; padding-left: 0; list-style: none; }
#contents{ margin:0; padding-bottom: 24px; padding-left:10px; border-bottom:1px solid #cc9999; }
#contents li{ margin:0; display:inline; list-style:none; }
#contents a{ margin-right:10px; margin-bottom:4px; line-height:18px;
             width:2.5em; height:18px; float:left; text-align:center; }
#contents a:active, #contents a:hover{ border-bottom:4px solid #cc9999; padding-bottom:2px; }

<h1>タイトル</h1>
<ul id="contents">
    <li><a href="./list1.html">項目１</a></li>
    <li><a href="./list2.html">項目２</a></li>
    <li><a href="./list3.html">項目３</a></li>
</ul>
<div id="sub">
<br />
<span id="little" style="clear: left;">文章<br />
>>文章<br />
</span>
<div style="clear: both;"></div>
</div>
<div style="position : absolute; bottom : 2px; right : 2px; z-index : 0; visibility : visible; text-align: right; ">
<br />
<!--#include virtual="./cgi/count.cgi"--> <br />
</div>

左にアイコン代わりに入れるってことか。

でもie5だとpaddingインライン要素のパッディングきかないからなるたけブロック要素のが

きにしないならいいけど
そもそもspanっていみないから、アイコンつけるだけ目的で入れるのは間違ってる

>>792
なるべく厳密なhtmlを書こうとは思っていますが、
<p>にしないのは、段落ではなく、文章の中の一部だからです。

具体的には　<dl><dt>サイト名</dt><dd>「〜というサイトです<span>相互</span>」</dd></dl>といった使い方なので、<p>にはしませんでした。
ブロック要素の入れ子は基本的には不可というのをどこかでみたのが頭にあったからかもしれません

>>791,764
今度のソースでは何も問題ないと思うが。
少し気になるのは疑似クラスの順番で、少し上のレスで詳しく書いてくれてる人が居るから読んでね。
あと、2度clearする必要ないと思う。

インライン要素にブロック要素を入れちゃだめだけど、
ブロック要素にブロック要素を入れてもいいでしょ。
あと、<span>ではなくて、
<em>とか<strong>とか<dfn>とか、
要素に意味を与えた方がいいと思う。

>>790,791,764
＞font-size: normal;
こんな指定ないから。smallなど使うのはUAに依って解釈が違うので、やめた方いい。
font-sizeは%指定がいいと思う。

>794
ありがとうございました。
疑似クラスの部分、修正します

>796
ありがとうございました。
font-size指定はmediumでしたね…
%指定に直します

>>795
そうだったのですかぁ。
斜め読みしたようです。失礼しました

StrictなHTMLはまだまだ勉強中なので精進します
これ以上はスレ違いになりそうなのでこれにて。多謝！！

<table style="width:600;" border="1">
　　<tr><td style="text-align:center;" colspan="2">aaaaaaaaaaaaaaaaaaaaaaa</td></tr>
　　<tr><td style="width:120px;border:0x000000 1px solid;">aaa</td><td>aaa</td></tr>
</table>
<br />
<table style="width:600;" border="1">
　　<tr><td style="text-align:center;" colspan="2">aaaaaaaaaaaaaaaaaaaaaaa</td></tr>
　　<tr><td style="width:120px;">aaaaaa</td><td>aaaaaa</td></tr>
</table>

こういうのって左の列のセルサイズ統一できないでしょうか？

>>799
できる

>>774
これらの要素はセレクタに使ってはいけないのでしょうか？

普通に考えて指定するスタイルがないと思うんだが
使えたとして何を指定するの？

htmlは使うこともあったな他は使わんでしょ

>>801
使っても良いよ。HTMLの文法がCSSのセレクタの書き方に影響するんだったら
他のSGML/XMLアプリケーションに適用させるためのCSSが書けなくなる。

ただし、HTMLで<style class="myclass" ...>とかいうことができない以上、
style.myclass { display : block ; } とかいう記述が意味を成すことは絶対に無い。仕様上は。

以下のような2つのフローを、1枚画像で処理せずにCSSを利用して2つ並べて見たいのですが、
CaseAとBでのフェーズの文章量が違ったりすると、フローの最後の位置がどうしても異なってしまいます。
（たとえば、result:Bがpahse3aのところにきてしまったり、result:Aが☆のところにきてしまったり）

皆様はこういう場合はどのように処理されているのでしょうか。
あきらめていいものかどうか悩んでいます。ヒント下さいorz

case:A　　　case:B
　　　　　　　
phase:a1　　phase:b1
↓　　　　　　↓
phase:2（caseA/caseB共通）
↓　　　　　　↓
phase:3a　　↓☆
↓　　　　　　↓　　　
result:A　　result:B

>>805
どの位文章量に差があるのかわからんけど、↓の長さで調節すれば。

>>805
table

>>805
それは表だからtableで良いと思う。矢印を入れたければスタイルシートで。

っていう話であってる？

>>800
ご教授いただけないでしょうか。
firefoxだと意図した通りに表示されるのですがIEだと・・・
colspanを用いると内容の長さに影響しセルサイズが固定になりません
左のカラムだけ固定で他方のセルは複数個の場合が有り得るので
幅は固定せずに作成したいと思っています

>>809
半角英数はテスト用文字列に使うべきではない。特にIEは(ry
実際入る文字がそうなら仕方ないが。
尚、>>799のソースは間違ってる。

右もいれてやれよ

<body>で背景を固定するようにしたとき、
その背景が見えるように他の要素の背景がほとんどbackground-color:transparent;になってしまうのですが、
こうせずに、または背景色を設定しても<body>の背景が見えるようにする方法はないでしょうか。

>>812
イマイチわかりにくいのだが、z-indexの事か？

>>810
どうもそのようです。
意図した通りに表示される同様のページが存在するのですが
そちらとの差異を潰していった際に日本語に直すと120pxで表示されたりと
いうことがありました。（sampleでは再現できませんでしたが

すみません、確認してませんでした。
途中CSSでは長くなるのでhtmlでのborder指定に変えたままでした
0xってなんですかね（苦笑
幅を完全に指定するか、空白で内容を水増しするとかしかないでしょうか。

>>813　分かりにくくてすみません。
background: url(...) no-repeat right bottom fixed #ffffff;　をbodyに書いてます。
そうすると背景画像が不自然に見えなくなる関係で、
bodyの中の要素で背景を変えにくくなりますが 変える方法はありませんか?と言いたかったです。
filter:という手もありますがいろいろ問題ありますし・・・
そもそもbodyの背景を固定したいというのが間違っているんでしょうか。

>>806-808

divとliでぐるぐる巻きになってました。
tableで組んできまつ。矢印も調節できそうです。

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

>>815
透過画像

>>814
まあcolspan使った時の挙動だから、そこをcaption（FXが変かも）やhnで代用する手もあるが。

>>815
＞bodyの背景を固定したいというのが間違っている
むしろbody以外にfixedは間違ってるのだが。
>>817氏の方法か、隠れて不自然な背景画像はやめた方がいいと思う。

>>815
多分、
1.透過PNG(IEは7以外対応してない)
2.opacity(GeckoとOperaとWebkit。ただしCSS3のプロパティ)
3.「1.」の方法にfilterを追加(独自拡張含む)
かな……？ちなみに理想としては1.が標準ベースだから好ましいと思う。3.はIE6(多分わざわざIE7入れた人以外はこれ)を含んだ現実的(妥協尽くめ)な手法、2.はCSS3が勧告になるまでは避けた方がいい(実験に使うのは構わないと思う)。
もし、子要素の背景の上にbody要素の背景、その上に子要素の内容、という表示がいいのなら……いいやり方が思いつかない。

返信ありがとうございます。
>>817
透過で実現できるなんて知らなかったです。
背景の画像はJPEGなのでとりあえず別の画像で実験して見ます。
GIFに直しても画質の劣化はそれほど目立たないようですが　写真なので透過は少し大変そうなので。
>>819
body以外にfixedできないこと知らなかったです(無知、、
他がかなりシンプルですこし淋しかったので つけてみようとしているだけで
絶対にいれなければならない！ものではないですが・・。
サイト全体になるとデザインにもやっぱり不便なので
使うにしてもトップページのみに抑えようかなと検討してます。
>>820
背景はtransparentと同じように見えてくれたらいいと思っています。
3がなんとなくよさそう？です。CSS3の普及を待ちますが、
strictにこだわらずfilter:や-moz-opacityなんかも念のためにいれておいたほうが
親切なのかもしれませんね。

>>821
-moz-opacityはFirefox 1.0相当のビルドからopacityを実装するようになってる。Geckoのバージョンは忘れた。
念の為言うと、透過させるべきなのは子要素の背景ね。body要素のは別に透過しなくてもいい。そして透過「GIF」じゃ透明になるんじゃ……。「PNG」で半透明にする方が汎用性があるかと。
CSS3が普及するにはCSS3が勧告にならないと……。遠い話。
body以外はfixed出来ないかといえば、CSSの仕様としてはそうではなかったはずだけど、IEの実装からいえばbody以外は無理。

CSS3か……calc()関数(今もこの呼び名かは知らないし、削除されてるかも)は欲しい。例えば、calc(100% - 13px)とか出来ればpx指定のborderやpaddingを%指定のwidthやheightに絡めて使えるし。

>>822
つ【チラシ】

外部から直接DL出来ないようにするタグはありますか？
動画を設置してますが、外部からのDLが激しいので。

>>824
ないと思う。一般的な文書(紙の書類を含めて)に「これはダウンロードしない」という構造的意味が存在する要素があるならともかく。
もしあっても実装しなければ無駄だし多分わざと実装しないモノも出るだろうし。

>>824
それはタグとかではなくサーバーの設定で行います。

>>824
スレタイも読めないのかよ

>>824
ｽﾄﾘｰﾐﾝｸﾞ

外部アクセスが嫌ならリファラーでdeny

文字、画像を除いて半透明(半透過？)にしたいのですが、
どのような方法が良いでしょうか？

filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;

こういう感じのを使うというのは分かったのですが、簡単に文字と画像を除く方法がわかりません。
分かりにくい質問かも知れませんが、よろしくお願いします。

>>829
文字と画像以外とは何を半透明にしたいのだ?

pngとかのアルファブレンドの透過はIE6が対応してないから諦めといた方が良い。
できるのは1色だけか、全体を薄くするかって感じだな。

>>829
要するに、背景のみを透過させたいって事？
子要素に別の値(opacity: 1.0)を与えればいいかと思ったけどうまくいかない……。
背景に半透明のPNGを使うのはIE6がネックだし……。

格子か縞状のGIF・・いやなんでもない。

>>829
CSSの質問してくれ。

>>830-834
うまく説明できなくてすみません。
もうちょっと具体的に言いますと、一番後の背景画像は背景画像として、透過させません。
そして、ブログの記事欄やサイドバーの部分の背景のみを透過させたいのです。
それぞれに>>829の方法をやってとりあえずは上手くいったのですが、
画像や文字だけは不透明度100%で表示したいと思い色々やってみたのですが、上手くいきません。

これは自分の知識不足で出来ないのか、それとも機能的に出来ないのかを聞きたくて質問しました。

一々ageんな、ウルサいよ。
filterはCSSじゃねえし、IE独自拡張機能で、このスレ的にはアウト。
少しはスレ内検索しろ。

五月蝿いって…（苦笑

「ｓage」← ふざけてんのかオイ

>>835
少し前に別の話題で突っ込んだ人がいるけど、-moz-opacityはGecko 1.7系(詳しいバージョンは忘れた。多分Firefox 1.0になったくらいの頃)でopacityに変更されたから指定しなくても別にいいのでは？
あと散々言われてるけど、filterはIE独自だから好きじゃない人が多い。このスレではあまり積極的な利用は推奨しないスタンスだし。そもそもopacityは「要素」を透過させるものだからその使い方は微妙といえば微妙。

参考(チラシの裏とも言う)
<div style="background: #0000ff; opacity: 0.5;>
<div style="opacity: 1.0;>test</div>
</div>
(divだけ使ってるのはあくまで例だから)
としてればいいかと思ったんだけどGecko 1.8じゃうまくいかない。webkitはmac持ってないから分からない。Operaは試し忘れた。
opacityの詳細は http://www.w3.org/TR/css3-color/#transparency で。
ちなみに勧告案だからopacity自体がアウトという考え方もある。IE6を見捨てて透過PNGでいいかも。(そういうのをMOSeって言うんだっけ？)

>>839
私がいるとスレに良くないみたいなので、取り急ぎお礼まで。
詳しい説明ありがとうございました。

みなさん、スレの流れ等を読まずおかしな質問をして申し訳ありませんでした。