CSS初心者スレッド＝４ｔｈ＝

CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。

《関連スレ》
Webサイト制作初心者用質問スレ Part 200
http://pc11.2ch.net/test/read.cgi/hp/1216894815/

《前スレ》
CSS初心者スレッド＝3nd＝
http://pc11.2ch.net/test/read.cgi/hp/1212198165/

【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:CSS2.1ではbackground-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
　もしくはCSS3を待ちませう。

【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

【初心者向けの解説】
正しい知識を得たい人の爲のCSS2リファレンス
　http://hp.vector.co.jp/authors/VA022006/css/

【構文チェック】
W3C Markup Validation Service
　http://validator.w3.org/
W3C CSS Validation Service
　http://jigsaw.w3.org/css-validator/

【ブラウザのバグリスト】
CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/

【仕様書】
CSS 2.1 Specification
　http://www.w3.org/TR/CSS21

質問です。
IE5.5用対策をメモしていたんですが
急ごしらえなんで、自分のメモがわからなくなりました。
以下で大丈夫でしょうか？

1.要素の幅揃え
#Header p {
margin: 0;
padding: 10px 0 5px 30px;
width: 530px;
}

#Header > p {
/*�*/ width: 500px; /* */
}

2.高さ合わせ
#top a {
display: block;
background: transparent url(*****) 0 0 no-repeat;
width: 100px;
height: 39px;
padding-top: 10px;
overflow: hidden;

#top a:hover {background-position: 0 -39px;}
#top > a {height: 0;}

よろしくお願いします。

5.5とか面倒だな

p {

width:540px;
font:9pt/150% ;
letter-spacing:0.1em;
margin-bottom:1.5em; }

上のような感じで行間などの設定をしましたがFFでは反映されるのですがIEでは反映されません
なにか間違ってますでしょうか？

a.menu img
{background:#ffcc00;
border-bottom:1px solid #333333;}
a.menu img:link
{background:#ffcc00;
border-bottom:1px solid #333333;}
a.menu img:visit
{background:#ffcc00;
border-bottom:1px solid #333333;}
a.menu img:hover
{background:#ffffff;
border-bottom:1px solid #333333;}
a.menu img:active
{background:#ffffff;
border-bottom:1px solid #333333;}

こんな感じで透明背景の画像を使用して
マウスオーバーで背景色が変わるメニューボタンにしたんですが
オペラでは思い通りになったんですが、
IEだとHOVERしても色が変わりません（FFCC00のまま）
どこかおかしかったら教えて欲しいです。

あと、構文チェックしたら
visitだけエラーが出ました。
「visitは未知の疑似要素または疑似クラスです」
VISITは書かなくていいという事でしょうか？

よろしくお願いします。

×visit
○visited

ちょっとぐらい調べような

>>12
あっちゃー、そうでしたか！
最初にいい加減に覚えてたのがアダに。

すんませんありがとうございます。
おっしゃるとおりです。

>>10
違うところに原因があるような気はするが
fontプロパティはfonr-sizeとfont-familyを省略すると間違い

>>14
ありがとうございます
とりあえずfonr-sizeとfont-family追加してみます

お願い、誤字は直してね（こそっ

ページの背景画像を半透明化処理したいのですが、
文字の方が半透明化処理されてしまいます。

body{
font-family: helvetic, arial, sans-serif;
color: #fff;
background-color: #000000;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity="90");
background-image: url(../images/bg.png);
}

backgroundに関して新しく別に定義すればいいんでしょうか？
よろしくお願いします。

bodyの背景を半透明化して意味あるの？

>>18
こうしたら解りやすいかな？

background-color: #000000;
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

bodyの背景画像を半透明にしたかったんだけど・・・
それとも、普通は最初から薄めた画像を使うべきなんでしょうか？

>>18
折角応えてくれたのにスマン。
腕がないって事で今回は諦める。
本買って本格的に勉強するわ。ありがとう。

普段は隠れてるけど、リンクをクリックした時だけ同一ページ上に表示されるテキストって、CSS？
もしそうなら、誰か作り方を教えてくれませんか？

>>21
JavaScript onClick でググれ。
わからない事はJavaScript手取り足取りスレ池。

>>19
>それとも、普通は最初から薄めた画像を使うべきなんでしょうか？
そうです

えっと、どんなもんでしょう？
大丈夫なのかな？
>>8

<li>〜</li>
で囲んだ文字の左側に「黒・」がでるようになったのですが、どうすれば消えるでしょうか?

何に適用してるのか分からんのに大丈夫かどうかなんて分かるかよ

>>12
list-style-type:none;

レス番わざとだろｗ

質問です。

-- HTML --
<p>こんな文章があったとします。<br />
<br />
Pタグのなかでbrを使い改行して<br />
<br />
こんな風に段落を作ります。</p>

-- CSS --
p {
letter-spacing:0;
}

こうすると改行がなくなります。解決方法はあるのでしょうか？

>>29
br {
letter-spacing: 0;
}

見事解決です！！ありがとうございました！

本当に初心者質問で申し訳ないのですが、どなたか回答お願い致します。

ドリームウェーバーなどを使わずに練習するには、
同じフォルダ内にHTMLとCSSのファイルを作って書き込んでけばいいんですよね？？
何回やってもCSSが反映されなくて困ってます。

HTMLのHEAD部分に
<link href="ファイル名.css" rel="stylesheet" type="text/css">
>を入れています。

<link rel="ファイル名"

やべ、途中で切れた

外部でリンクしないでｈｔｍｌ内にスタイルシート書いてみては？

>>34
なるほど!!
ありがとうございます!!やってみます。

俺もこんな時代あったな


微笑ましい光景だ

ローゼンメイデン　ハリウッドで実写映画化

ワーナーブラザースは13日、『ローゼンメイデン』の実写映画化を正式に発表した。
同作品はPEACH-PIT原作の人気漫画及びアニメ作品で、一部のファンからは熱狂役な支持を得ている。
大ヒットとなった「マトリックス」シリーズを手掛けたウォシャフスキー兄弟が、今回は何とも意表をつく作品に手を出した。
日本のアニメの大ファンで知られる彼らだが、まさかこの作品を手掛けるとは意外に感じるファンも多いのではないだろうか。
『実は2年前からこの作品にハマってしまって、自分の手で実写映画にしてみたいと思っていたんだ』
堰を切ったように、アンディ・ウォシャフスキーは興奮気味に熱く語り出した
『オタク・アニメのカテゴリに分類されて、一般受けしなさそうだという意見もたくさんあったよ。でも僕はそうは思わないんだ。
　魂を持つドール達が、愛する父に会うために悲しい運命を辿っていく、これはもう誇るべきストーリーなんだ。
　実写にすればこの作品が本来持っている素晴らしさが存分に表現できると確信しているんだ。
　だからこそ今回、周囲の反対を押し切り踏み切ったのさ。期待は絶対に裏切らない。
　哀しくて儚い、でも美しいアリスゲーム（作中でドール達が戦う行為）をお見せできると思うよ。』
物語の“主役”ともいえる“ドール”は子役にCG加工を加え人形と人間の中間のような雰囲気を出す手法を取るという。
製作の中心となるのは日本製アニメの海外配給を多数手がけてきた米国のADV Filmsで、
製作費は6億ドル、公開は再来年夏になる見通し。

【ジュンが】ローゼンメイデン実写映画化 part5【ジョンに】
http://anime3.2ch.net/test/read.cgi/comicnews/1182689647/l50

a:link { color: �@; text-decoration: none; }
a:visited { color: �@; text-decoration: none; }
a:hover { color: �C; text-decoration: none; }

a.classA { color:�A; }
a:link.classA { color:�A; }
a:visited.classA { color:�A; }
a:hover.classA { color:�@; }

a.classB { color:�B; }
a:link.classB { color:�B; }
a:visited.classB { color:�B; }
a:hover.classB { color:�@; }

とCSSに記述して
<a class="classA">○○○</a>×××<a class="classB">□□□</a>
とHTMLを記述したところ
IE6では期待通り○○○は�Aの色、□□□は�Bの色、どちらもhover時には�@の色になるのですが
FireFoxでは○○○はclassAのとおりに動作してくれるのですが、□□□ではclassBが反映されず
�Bの色にならずに�@の色になります。hover時には�Cになります。

何度か試行錯誤してみましたが直りませんでした
原因はなんでしょうか？

ブラウザが違うから

a.classA:link { color:�A; }
以下略

a.classB:link { color:�B; }
以下略

そもそも記述の仕方が間違ってたんですね、指摘ありがとうございます
しかし全ての項目を修正してブラウザで確認してみましたが、
表示の結果は>>38と全く同じです
キャッシュも消して再度読み込みしましたが、FireFoxでは期待通りの結果が得られません
ちなみにFireFoxは3.0です

間違ってないから。

>>40
嘘教えるな。
結合子で連結されたなかで最後の単純セレクタのさらに末尾じゃないといけないのは、擬似クラスではなくて擬似要素のほう。
その制限もレベル2までの話（となる予定）

>>41
間違ってるよ。htmlがホントに>>38の通り書いてるなら。

で、間違ってるのか間違ってないのかどっちなの？

>>38のhtmlが間違ってるだろ

つまり42氏ねでFA？

>>42が言及してること自体(CSSのセレクタについて)は間違ってないよ
>>42は単に>>40の打消しだし

>>45
>>38のhtmlのどこが間違っているか教えて下さい。

>>48
どこが間違ってるかわからないようでは、
htmlを全く勉強してないという事になります。
cssを使うレベルではありません。

>>49
指摘できないのね ?

ていうかやってみたけどFxでもちゃんとclassBも変わったよ
<!DOCTYPE HTML><html lang="ja">
<head><meta charset="UTF-8"><title>>>38</title><style type="text/css">
/*
1. red
2. blue
3. green
4. orange
*/
a:link { color: red; text-decoration: none; }
a:visited { color: red; text-decoration: none; }
a:hover { color: orange; text-decoration: none; }

a.classA { color:blue; }
a:link.classA { color:blue; }
a:visited.classA { color:blue; }
a:hover.classA { color:red; }

a.classB { color:green; }
a:link.classB { color:green; }
a:visited.classB { color:green; }
a:hover.classB { color:red; }
</style></head><body>
<h1>>>38</h1>
<p><a class="classA">○○○</a>×××<a class="classB">□□□</a></p>
</body></html>

>>50
出た得意の厨レスｗｗｗ

>>50
ちょこっと齧った奴が知ったか回答してんだよ。
許してやれや。

以前から「なんなんだ、この低ラベルは」っつーレスがあるが
俺もおもいっきり書きたくなったぜ。

で、間違ってるのか間違ってないのかどっちなの？

>>53
俺もおもいっきり釣られて書くね。
表示される＝間違っていない ではないよ。
ただね、間違ってないと言ってる人と間違ってると言ってる人は、
全く別の次元からそれぞれの主張をしている。
次元が違うから、どちらが正しいという議論も成り立たない。
初心者が回答者として威張っていいスレだから仕方ないんだよね。

>初心者が回答者として威張っていいスレ

知らんかった・・・

>>51の通りやってみたらこちらでも問題なく動作したので
別の部分に問題があると考え、確認してみました

結論から言うと自己解決したので報告します
すみません、実に非常に初歩的な問題でした
実際にはclassA,classB,classC,classD....と続いていたのですが
classB以降のクラス名の先頭にアルファベットではなく数字がきていたのが原因でした
IEではクラス名として認識してくれましたが、正しくは先頭に記号、数字を使えないんですね
些細なことでお騒がせしたことをお詫びします。助言してくださった方ありがとうございました

>>56
そりゃマズイっしょ

>>57 >些細なことでお騒がせ
おまいが隠していたからだろが！

>>56
初心者(基礎知識がないような初心者含む)が質問して気のいい人が答えるスレであって
>>59みたいに初心者が威張っていいスレじゃねぇよｗ

もっと穏やかにいこうぜー

>>60みたいに他人に威張っていいスレじゃねぇよｗ　ｵﾚﾓﾅｰ

で、間違ってるのか間違ってないのかどっちなの？

どっちでもいい

>>63
まとめると
>>38は結果的に質問外のところでクラスセレクタを数字で始めちゃったのが間違ってたよ！
>>40は間違ったことは書いてないけど回答としては意味がないよ！
>>42 >>47は間違ったことは書いてないけど回答はしてないよ！
>>43 >>45は間違ってるか融通が利かない人だよ！
>>51は間違ったことは書いてないけど何故かHTMLがHTML5形式だよ！
あとはにぎやかしだよ！

>>65
間違ってない派の奴がまとめても無意味

しっかしほんとにレベル低いのな・・・

初心者スレでハイレベルなもん求められても、と思う

今に始まったことじゃなし・・・

>>67
お前に合った高レベルなスレ行けばいいんじゃね？

>>66
間違ってない派？

どうやら本当に38のHTMLのどこが間違ってるのかわからない低脳しかいないようだ。程度が知れるな。

>>63に釣られてるようじゃ・・・

ハゲしい自演を見た !

pがあるとかないとかどうでもいいこと

ハゲ言うな

>>75
しつこい釣りですね、わかります。

href属性も無いのにlinkやvisitedで色が変わるものか

印刷したときに、紙面の右上に文書名とページ番号を
表示したいんですが、HTML+CSS で実現できるでしょうか？

>>79
印刷用cssを用意すればhtml+cssで出来ますが、
ページ数などを印刷する・しないは訪問者側が決める事であり、
あらかじめ設定もしているでしょう。
印刷用cssにも賛否両論ありますし、
サイト側が強制的にあれこれ指定するのは、あまりいい事だとは思いません。

できるのかできないのかを聞いているのです。
どうしていい事だとか悪いことだとか余計なことを言われないと
いけないのでしょうか。気分を害しました！

しかも別のところで調べた結果、html+cssだけでは結局できないではないですか！
自動で文書名やページ数を取得するにはCSS3とやらが実用化されなければできないとか
ふざけるな！！！

ぷらぷら(AA略

>>81
死ねばいいのに

ちがうよ。死ね。

別人だろうが、>>81死ね。

できるかできないかで言えばできるわ糞ボケ。
＞自動で文書名やページ数を取得する
後出しの戯言に過ぎんわドアホ。
静的なHTML+CSSで出来るわけもないわ間抜け。
お前の頭につまってんのはうんこだわ基地外。

>81の人気に嫉妬

ワシ79なんですが。
81は暑さで頭になんか湧いたちゃったみたいでｻｰｾﾝ。

>ワシ79

こんな名前の車体あったよね

XHTML+CSSでできないと、XML+XSL 使わんとあかんのでﾏﾝﾄﾞｸｾ｡
フリーな処理系 Apache FOP くらいしか無さそうだし。
日本語通せるのかもよくわからんし。

自分で言ってる意味分かってるのかと

<ul>
<li>レコード1</li>
<li>レコード2</li>
<li>レコード3</li>
<li>レコード4</li>
<li>レコード5</li>
　　　　　（略）
<li>レコード20</li>
<ul>

というリストをCSSのみで

レコード1　レコード2　レコード3
レコード4　レコード5　レコード6
　　　　　　　 （略）
レコード19 レコード20

のように、配置することは可能でしょうか。
自分で記述してみた所、

レコード1 レコード2　レコード3　■■
　　　　　　　　　　　　　　　　　　　　　■

の様に折り返しできずに崩れてしまって難儀しています。
皆様のお知恵を拝借できれば幸いです。

>>92
li要素と親divにwidth指定してfloatじゃだめなの？

>>92
親divどころかulにwidth+height、liにfloat:left;でおｋ。
あと、単純にul閉じ忘れてね？

/* -- css -- */
ul {
width:500px;
height:140px;
background-color:#cccccc;
}
li {
width:150px;
height:15px;
margin:0 0 4px 15px;
float:left;
display:inline;
}

<!-- html -->
<ul>
<li>レコード1</li>
( 略 )
<li>レコード20</li>
</ul>

>>93
現在のソースはこれです。
HTML
<div class="listbox">
<ul>
<li>レコード1</li>
<li>レコード2</li>
<li>レコード3</li>
　　　　　（略）
<li>レコード20</li>
<ul>
</div>

CSS
.listbox {width:560px;}
.listbox ul {list-style:none; padding:0;}
.listbox li a {display:block; float:left; width:185px;}

これだと>>92のように、改行されずに画面端でテキストが固まってしまいました。
記述ミスではないかとも思いますが、ちょっと頭が固くなってるのか判別しかねまして。。

>>95
やっぱりソース閉じ忘れだね。

</ul>にするだけでもおｋ。

ごめん。cssみてなかった。

.listbox {width:560px; height:150px;}
.listbox li {display:inline; float:left; width:185px; height:20px;}
.listbox li a {display:block; width:185px; height:20px;}

こうしなきゃ動かなくね？

表は表で・・・

listbox li にblockでいいんじゃない？

>>98
そこは、選択肢だと思ってあげたら？もしくは課題とか。

>>99
IE6の回避用とでも考えといてくだしあ

>>96-100
無事解決できました。有難うございました。

フッタのレイアウトで詰まってしまったので質問させてください。

＞　トップ | 会社概要 | プライバシーポリシー | アクセス | お問い合わせ 　┌─┐
＞　　　　(c)2008 なんちゃら株式会社 All rightsなんちゃら　　　　　　　　　　└─┘←ロゴ

のような一般的なフッタのメニュー（センタリング）の右横に、ロゴマークを入れたい（上図）んですが
floatで右に回り込ませると「最大幅からロゴの大きさを除いた幅」の範囲でしかセンタリングされないですよね？

ロゴを右に回り込ませつつ、最大幅の中央に揃える事って可能なんでしょうか？

>>102
せめて、簡素なソースかなんかは乗せような？
テンプレ通りやれとか五月蝿いのいるし、エスパーじゃないから。

/* -- CSS -- */
#footer {
position:relative;
}
#footer img#logo {
position:absolute;
top:90%;
left:95%;
}

背景指定していれちゃえば

102、103のどちらかだな、方法としては。
だけど、何でそんなとこにロゴ入れるのかな？

ログといったら、ふつう上部左側くらいだしょ。

>>104
その方法もあるけど、ソースがないから案内しづらいんだよね。

>>105
上にも下にも付けたいんだよ。ホテルとか旅館だと上下につけてるなぁ

ソース張らないとそりゃアドバイスのしようも無いですよね･･･すいませんorz

<!-- HTML -->
<div id="footer">
　<div class="footermenu">
　　<ul>
　　<li>トップ</li>
　　<li>会社概要</li>
　　<li>プライバシーポリシー</li>
　　<li>アクセス</li>
　　<li>お問い合わせ</li>
　　</ul>
　</div>
　<div class="logo"><img src="ロゴ.gif" /></div>
<br style="clear:both;" />
　<div class="copylights">(c)2008 なんちゃら株式会社 All rightsなんちゃら</div>
</div>

/* CSS */
.footermenu {width:800px; height:25px; }
.footermenu ul {list-style:none;}
.footermenu li {display:inline; font-size:10px;}
.footermenu a {display:block; float:left; background:url(../images/icon_list.gif) left no-repeat; padding:0 0 0 15px; margin:10px 5px 0 0;}
.footermenu .mi {width:80px; height:25px; float:right;}

.copylights {font-size:10px;}

クリック出来なくていいなら背景画像にしちゃうとか

>>107
一番簡単なのは>>104のいう通り、背景を<div id="footer">へ割り当てる。

#footer {
background:url(../images/logo.gif) no-repeat 000px 00px;
}

次が>>103の絶対指定配置かな。
その際には<div class="logo">は要らなくなる感じでおｋ
ソースは>>103をおよそ参考にしてください。

<div>使わなければcss軽くなるしシンプルになるけど、それは
余計なお世話かね('A`)

>>103-109
ありがとうございます。
絶対配置で巧く行きそうです。

>>109
これやっぱdiv厨ですよねぇ･･･orz

複雑なCSS組み合わせて打開するのも悪くはないが
divひとつ入れてスマートに解決できるなら安いもんだ

おせっかいついでに、こんな風に出来るんじゃね?

.footermenu = <ul>
.copyrght = <p>とか<address>とかそのへん

/* -- css的にはこんな風に。 -- */

#footer {position:relative;}
#footer ul {width:800px; height:25px; list-style:none;}
#footer ul li {display:inline; font-size:10px;}
#footer ul li a {display:block; float:left; background:url(../images/icon_list.gif) left no-repeat; padding:0 0 0 15px; margin:10px 5px 0 0;}
#footer ul li .mi {width:80px; height:25px; float:right;}
#footer img#logo {position:absolute; top:90%; left:95%;}
#footer p {font-size:10px;clear:both;}

<!-- HTML的にはこんな感じ？ -->

<div id="footer">
　　<ul>
　　<li>トップ</li>
　　<li>会社概要</li>
　　<li>プライバシーポリシー</li>
　　<li>アクセス</li>
　　<li>お問い合わせ</li>
　　</ul>
　<p>(c)2008 なんちゃら株式会社 All rightsなんちゃら</p>
　<img src="ロゴ.gif" id="logo" />
</div>

すいません、質問です。

http://fc2-wlink.com/
↑このページの上段の方、「カードローン」等の前についてる
矢印マークの画像は背景画像として設定しているのでしょうか？
この設定のやりかたなどの参考サイトもしくは簡単な説明でよければ
よろしくお願いします。

カーソルを変えるにはCSSのどこをどういじればいいんでしょうか？
ちなみにzipファイルを使えないところです(´；ω；｀)

>>102
おれはいつもこんな感じ

<!-- HTML -->
<div id="footer">
　　<ul>
　　<li>トップ</li>
　　<li>会社概要</li>
　　<li>プライバシーポリシー</li>
　　<li>アクセス</li>
　　<li>お問い合わせ</li>
　　</ul>
　　<img src="ロゴ.gif" />　
　　<address>(c)2008 なんちゃら株式会社 All rightsなんちゃら</address>
</div>

/* 細かいところは省略 */
#footer ul {
float: left;
margin-right: -000px;
}
#footer img {
display: block;
float: left;
width: 000px;
height: XXpx;
}
address {
clear: both;
}

>>113
背景画像
ソースとCSS読めばわかるよ

>>114
http://www.tagindex.com/stylesheet/page/cursor.html

114です。
説明不足でした。
カーソルを画像で使いたいのですが、zipファイルが対応になっていないサイトで使うんです。
CSSのどこかをいじればzipファイルも使えると聞いたのですが…

意味わがんね

多分なんかと間違えてるんだろうけど、何と間違えてるのかがわからない
あなたの言うzipて何よ

zip→gif？？
それにしても意味わからんが

google(css zip カーソル)
で出てくるような話なのだろうか

そもそもカーソルを画像で使うってところから詳しく教えてくれｗ
Javascriptの範囲かもしれないし。

>>118
カーソルを
cursor: url(hoge.cur)
とかで任意のものに変えたいという話では？
多分カーソル素材配布サイトとかでzipを落としてきたんだろうけど
解凍して中に入ってるものを使うんだよ

>>114
Q1.カーソルを変えるにはCSSのどこをどういじればいいんでしょうか？
A1.>>124。 ただし一部ブラウザで反映されません。

Q2.CSSのどこかをいじればzipファイルも使えると聞いたのですが？
A2.出来ません。聞き間違いです。

htaccessとcssを間違えてんだろ
zipが使えない鯖なんてタダ鯖だろうし、htaccessも使えないor制限ありの悪寒

>>125
あなたのネット用語の使い方はめちゃくちゃです。われわれには理解できません。
「・・・と聞いた」のなら、そう聞いた人にたずねて下さい。

ええー

>>128
マスオさん乙

>>127
安価まちがいだろ

うん。直さなかったんだ。くどいから。

×くどいから
○馬鹿だから

114は良い釣り師だねぇ・・・

巾600px 高600px サイズのテーブルを
ページの上下中央左右ど真ん中に表示させるための
cssの書き方が分かりません！誰か助けて！
昔みたいに <table> の中に
align などを書き込むやり方しか分からん。

王様、テンプレ読んでくれ。

スタイルシートを使っていてずっと疑問に思っているのですが、
<FONT SIZE="-3"> などに相当するようなスタイルシートが無いような気がするのは
きっと気のせいですよね?

はい、気のせいです

>>137
%による相対指定ではなく、ね。
絶対指定が折角7段階あるのに、3段階小さくしたいとか実現できない。

IE基準で考えない方がいいと思います。

samllやらなんやらあるだろ

ageてまで間違えないでくれ

いやいや間違えちゃいないだろ

ageてまで否定しないでくれ

>>135
どうもです。んー、左右ど真ん中のあわせ方については
margin-left と margin-right に等しい値を指定してやるという tips があることは理解できました。
実際、とりあえずはこの方法でうまく行くようです。
しかし上下中央のあわせ方というのが見つからないです。
ググっても分かりませんでした。

今どきの書き方では、これはできない、っていうことなんでしょうかねぇ。
table を二重にして、外側の table を height=100% valign=middle などとしてやれば、
内側の table を見た目上はブラウザのど真ん中に据えることはできますけど、
これ、昔のやり方と何にも変わりませんよね。

趣味なら色々試行錯誤するけど、仕事ならテーブルでも何でも使うぞw

枠線のある丸角ボックスを作ろうとしているのですが、方法が分からず困っています。

丸角の部分、４隅それぞれに画像を使い、それをボーダーで囲ってみたのですが、それだとボーダーの端がはみ出してしまいました。
他にもいくつか試してみたのですが、素人故かなかなか上手くいきません。

ご助言お願いします。

意味がわからん

>>146
枠線つきなら四つ角で画像使うより
上下に分けたほうが簡単じゃね？

恐れ入りますが、質問です。

一つのページのテーブルデザインをそれぞれ、別のcssファイルで指定したいのですが、できますでしょうか？

table_a.css ,table_b.css　という別々のデザインを

<link ...... href="a.css">
<link ...... href="b.css">

<div class="a.cssのデザイン">
Aテーブル
</div>

<div class="b.cssのデザイン">
Bテーブル
</div>

といったイメージなのかなと調べてるのですが、よくわかりません。

別々のcssファイルというより、テーブル毎にガツンとまとめて指定できれば良いのですが・・・

ご教授頂ければ幸いです。m(_)m

△　ご教授
○　ご教示

a.cssにtable.xxx { aaa:bbb; }
b.cssにtable.yyy { aaa:ccc; }
って記述して
<link ...... href="a.css">
<link ...... href="b.css">
<table class="xxx">bbbのスタイル</table>
<table class="yyy">cccのスタイル</table>
ってHTML書くだけじゃねぇの？

c.cssにable.xxx { aaa:bbb; } table.yyy { aaa:ccc; }

<link ...... href="c.css">
<table class="xxx">bbbのスタイル</table>
<table class="yyy">cccのスタイル</table>
って感じにひとつのファイルに書いてもいいし

>>150　さん

丁寧なレスを頂きましてありがとうございますｍ（＿）ｍ感謝致します。
内容をよく読んで、勉強させていただきます。

追記なのですが、（というか質問の仕方が的確でなく誠にスミマセン）

table_a.css には
table xxx{　　}

だけではなく、他のテーブルタグ用の
tr {} , td {}, thead {} , tbody {} 等もあり、

また、 tr,td {} tbody ,thead{} 等共通指定とかもしてますので
それられにいちいちユニークなIDをつけて指定？それは大変T_T

それらを一括して

<div class=xxxx> テーブル</div>

に反映できないものかと調べています。

table に対して　tr,tdを入れ子に？

今も一生懸命調べ中で質問がゴチャっとしていますが、
ヒント等ご教示頂ければ幸いです。

>>151 継承しらないの？
つまり、白人の子供は白人。
勿論、日本人の毛をオレンジにすることもできるけど。

>>151
検索する努力をしろ
http://www.google.co.jp/search?hl=ja&q=css+%E5%85%A5%E3%82%8C%E5%AD%90&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=&aq=f&oq=

>>151
一生懸命調べる事は大事ですが、1+1はなぜ2なの的質問をしてるようでは、
あまりにも理解不足と思われます。

>>151
<div class=xxxx> テーブル</div>
これも間違いでね？
<table class="xxxx"></table>
でしょ？調べる事よりまず、基本からやった方が早いよ。

まぁ待てよ
もしかしたら10年くらい前の時代から書き込んでるのかもしれないじゃないか

10年前というとIE4の時代だっけ

.hogehoge
.hogehoge table
.hogehoge td
.hogehoge th
.hoehoe
.hoehote table
.hoehoe td
.hoehoe th
で定義して

<div class="hogehoge">
<table・・・・
・・・</table>
</div>
<div class="hoehoe"・・・・

みたいに、した方がテーブルの中身はそのままで色々変えれて便利かも

<table class="*">
<tr>
<td>
タイトル<br>
<a href="**">コンテンツ1</a>　<a href="***">コンテンツ2</a>　<a href="****">コンテンツ3</a><br>
本文
</tr>
</td>
</table>

このような感じで、テーブルを骨組みにし、本文をその中にぶちこんでページを作ろうと思っています。
色々調べて、テーブルの色や線の色等を外部cssで定義することができました。
そこで、もっと多くの情報を外部cssに予め記述しておくことはできないでしょうか。

つまり、　<table><tr><td>...〜...<a href="">コンテンツ3</a><br>　と、
最後の　</tr></td></table>　は、骨組みのテーブルと、タイトルと、コンテンツですから、
１つのウェブページ内の全てのページで共通のものです。
これを記述するのも外部cssに書いておくことはできないでしょうか？
実際のhtmlファイルでは、外部cssを呼び出すタグと、本文を入力するだけ、のような感じにしたいのです。

稚拙な文章で申し訳ありません。
何かありましたらまた追記させて頂きます。

<tr><td></tr></td>じゃなくて<tr><td></td></tr>だろ

>>159
CSSにはclassやidってのがあってだな

多分、HTML文書の中身を
「<link rel="stylesheet" type="text/css" href="xxxx.css">」と
「本文」だけにできないの？って質問だろうけど
結論から言うとできない。

似たようなことをやりたいなら、
<table><tr><td>
[外部ファイル「yyyy.txt」を読み込むように記述]
</table></td></tr>
と、してyyyy.txtを編集するようにすればいいんじゃね

>>160
すみません。ケアレスミスでした……。
>>161
tableタグに使ってるのがclassですよね？
まだまだ勉強不足なので、自分が知らない部分に何かあるのでしょうか。
>>162
逆にそっちを別に記述しちゃうというわけですか。
それも楽そうで良いですね。

みなさん回答ありがとうございました。
もう少し学んでみることにします。

>>159
PHPとかならその方法とは逆に骨組みにコンテンツを流し込む感じに作れるんで
将来的にはPHPもw

ボックスの背景画像をスタイルシートで指定しているのですが、
ＣＳＳファイルと背景画像のディレクトリの位置関係によって
背景画像が表示されない時があります。原因は何でしょうか？
ブラウザはＩＥ７です。

(1)表示されない指定

background-image : url(".../images/backimg.jpg");

(2)表示される指定[CSSファイルを１つ上のディレクトリ位置に移動]

background-image : url("../images/backimg.jpg");

よろしくお願いします。

原因は「ＣＳＳファイルと背景画像のディレクトリの位置関係」です。

>>165
.../ って ../../ のこと？

<div id="left" style="float:left">
  <p>本文</p>
  <p>本文</p>
  <p>本文</p>
</div>
<div id="right" style="float:right">
  <p>メニュー</p>
  <p>メニュー</p>
</p>

というHTMLがあったとき、左右のボックスの高さが違います。
当然と言えば当然なんですけど、CSSで高さを高いほうに揃えることはできますか。
よろしくお願いします。

むり

文字数や画像なんかで必死に合わせてる

padding-bottom: 32768px;
margin-bottom: -32768px;

両方に

>>166
レスありがとうございます。

位置関係の何が問題なのでしょうか？

相対指定なり相対リンクなりぐぐりなさいな
ディレクトリの位置が違うのに同じアドレスでアクセス出来るわけがないでしょ

>>168
高さが高い方にの意味がわからないんだけど、
高い方に合わせるのはなに？！背景色？

よくあるのは、その二つの外側にもう一つボックスで囲って、
そのボックスに背景色の付いた画像でもおけば
高い方ひっぱられて背景画像も伸びるよ

>>173
レスありがとうございます。

同じアドレスでアクセスしていません。
．．．／を．．／に変えてますが。

お前は点々増やしていくつもりなのか・・・・

>>177
.../という指定はありません。そしてこれはCSSのご質問ではありません。
今迄ついたレスでは理解できなかったようですので、
相対パスや相対指定などの検索ワードでググってください。

>>157
チャンネルバーが登場しますたよ

いろんなサイトのソース見て頑張ってみてるんだけど、どうも解決しないので
教えていただけるとありがたいです。

フッターにリストメニューを入れてfloatで横並びにしているのですが、
このリストメニューをフッターの真ん中に配置したいんですよ。
textalignとかやってみたけどダメでした。
--------------------
【HTMLソース】
<body>
<div id="footer">
<ul class="footer_navi">
<li class="first"><a href="#">ホーム</a></li>
<li class=""><a href="#">プライバシーポリシー</a></li>
<li class=""><a href="#">サイトマップ</a></li>
<li class=""><a href="#">リンク</a></li>
<li class=""><a href="#">お問い合わせ</a></li>
</ul>
</div>
</body>
--------------------

>>179
cssも

<body align="center">

--------------------
【CSSソース】
a{color:#CCCCCC;}
a:hover{color:#FF0000;}

#footer{width:800px; height:50px;
background-color:#000066;
margin:auto;}

#footer li{float:left;}

#footer ul.footer_navi li {
list-style-type:none;
border-left:1px solid #FFFFFF;
margin-top:10px;
padding:0 0.5em;
}
#footer ul.footer_navi li.first {
border-left:medium none;
}
--------------------
申し訳ありませんがよろしくお願いします。

コピペで作ってると何もわかんねえ人間になっちまうぞ

>>180
すいません。よろしくお願いします。
>>181
やってみましたが何の変化もなしです。（入力補完候補にも出てきませんでした）
もしこれで出来たとした場合、align="center"がbody全体に掛かるような気がするので
他のところにも影響が出そうな気がします。

>>183
申し訳ないです。いちお本読んだりネットで調べたり、後自分でいろいろ試してるんですが
どうも解決策が見つからず。

これが解決すれば、ほぼ外枠（テンプレート）が完成するので、下層ページの制作に
取りかかれるので。。

textalignはどうしたの？正しいスペルだった？
ダメなブラウザは？宣言は？

答えはいらないから、ヒントにして自分で調べるんだよ。

text-alignでセンタリングできるのはIEだけだぞ

取り敢えずdivで囲ってalign="center"指定するか
table使ってセンタリングするか
margin:0px autoで中央に置くとか

つーかググれば腐るほど出てくるだろ
誰かの回答を待つより自分で調べたほうが早いぞ

>>171
ttp://coliss.com/articles/build-websites/operation/css/558.html

コメント参照

段落(p)のpaddingとmarginの既定値を教えて下さい。

ブラウザによって違う

Google ChromeでIE死滅に期待。

CSSでテーブルの幅の最大値を指定することってできる？
文字数が少ないときは
|１１１　　　|
|２２２２２２|
|３３３３３　|
のように最大文字数の行に合わせて
文字数が多くて幅の最大値を超えるときは改行して
|１１１１　　　　|
|２２２２２２２２|
|２２　　　　　　|
|３３３３３３３　|
のようにしたいのですが

サイトを作っていると、どうしてもdivが多くなってしまいます。
ですが、スレを見ているとdivの多用はあまり好かれていないようです。

divの多用によっておきるデメリットは何ですか？
また、divを多用しないようにサイトを作成するコツなどはありますか？

多い、ってどのくらい？10ケくらいなら普通だろう。

（テーブルとかリスト以外で）スタイル指定したいブロック要素にdiv使うのは普通だと思うけどなあ

どのスレで質問すればいいのかわからなかったので、
こちらで質問します。

このサイト（http://www.deli-deli.net/）なんですが、
Ｗ３Ｃ（http://validator.w3.org/）の文法チェックを行うと、
緑色でパスするんだけど、1 warning(s)って出るのはなんで？

わかる人教えて頂戴。

>>195
CSS関係ないからスレ違い。
文字コードがUTF-8（BOM付）になってるよって警告に読めた。
BOMなし（UTF-８N）にしてみたら？

>>179
a{color:#CCCCCC;}
a:hover{color:#FF0000;}

#footer{width:800px; height:50px;
background-color:#000066;
margin:auto;}

/*#footer li{float:left;} */　//ｲﾗﾈ　　
#footer ul.footer_navi li {
list-style-type:none;
border-left:1px solid #FFFFFF;
/*margin-top:10px; */　//ｲﾗﾈ
padding:0 0.5em;

display:inline;　　//float:left;を消してinlineにする

}
#footer ul.footer_navi li.first {
border-left:medium none;
}

ul.footer_navi{ margin:0;
padding:10px 0 0; 　//　　#footer ul.footer_navi li のmargin-top:10px; の代わり
text-align:center;　　//コイツでセンター寄せ
}

下記の構成で、
htmlのbackground: #f3f3f3;
wrapperのbackground: #ffffff;
と指定しているのですが、
wrapper部分の色が#ffffffになりません。
どうすれば良いのでしょうか。

<html>
<body>
<div class="wrapper">
</div>
</body>
</html>

ホームページのbody部分の背景色を#ffffffにして、
ブラウザWindowの左右の空き領域の色を#f3f3f3にしたいのですが。

よろしくお願いします。

<body class="wrapper">

>>199
レスありがとうございます。
そのパータンもやってみましたが、
その場合、ホームページの左右のブラウザ空き領域も#ffffffに
なるのですが・・・

>body部分の背景色を#ffffffにして、
　上記で正解のはずだけど・・・


　こういう事　?
wrapperのbackground: #f3f3f3;
コンテンツのbackground: #ffffff;  

>>201
レスありがとうございます。

やりたい事は、
ホームページのwidthが700pxで、ブラウザの表示領域の横幅が1000pxの時、
ホームページを中央に配置すると、ブラウザの左右に横幅150pxの空きが
出来ます。
この空き領域の色を#f3f3f3に、
ホームページの背景を#ffffffにしたいのです。

<html>か<body>で、background: #f3f3f3を指定し、
<wrapper>で、bachground: #ffffffを指定すれば、
できると思っているのですが、
<wrapper>指定が有効にならず、全て#f3f3f3になります。
<html>で#f3f3f3を指定して、<body>で#ffffffを指定しても
全て#f3f3f3になります。

どうすれば良いのでしょうか。

bachgroundと書いたから

ｳﾌｯ

>>202
htmlが>>198の通りなら、#wrapperに何を指定しようが無駄だ

ブラウザの可視領域が1000pxならホームページ全体も1000pxだろうが

tdタグに高さを指定し、高さからはみ出たものは表示しないようにしたいと考え、次のようなテストページを作りました。
目的は”本文<br>本文……”の部分が一部だけ表示されるようにすることです。しかし、このHTMLだと、全部表示されてしまいます。
指定した高さの分だけ表示させるにはどうしたらいいでしょうか？
よろしくお願いします。

なお、対応ブラウザはIE7、FireFox3を想定しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
<style type="text/css">
<!--
tr{overflow:hidden;}
td{height:10px;}
-->
</style>
</head>
<body>
<table border="1"><tr>
<td>
本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文
</td>
</tr></table>
</body></html>

見せたくないものは書かなければいいのよ。

これを機にテーブルレイアウトから脱却するんだな

初心者でもレイアウトを崩さずに作れるのは
TDの中にIFRAMEを入れちゃうことだ

cssの読み込みについて質問させてください。

縦にフレーム3分割で左右のhtmlに同じ背景画像を指定しています。
左はメニューなどのコンテンツがあり右にコンテンツはありません。
共通しているのは背景画像だけなのですが同じcssを読ませるのと別々のものを読ませる（又は右は背景だけなのでhtml内
に記述）のとどちらがスマートでしょうか？
cssは1度読めばキャッシュに残るので共通の項目が1つでもあれば使い回していいような気もするのですが自信が無いので
質問させてください。
お願いします。

どっちでもいいよ
管理が楽なほうにしな

よろしくお願いします。
<img src="aaa.jpg" style="float:left;"><div>あいうえお<br />かきくけこ<br />さしすせそ</div>


画　あいうえお
像　かきくけこ
さしすせそ

画像の高さがある時は、大丈夫なのですが、画像の高さがない時に上記のように表示されてしまいます。


画　 あいうえお
像　 かきくけこ
　　　さしすせそ

画像の高さがあまり無い場合でも上記のように表示させたいのですが、どうすればよろしいでしょうか？

divにfloat:right;でもつけとけ

学校の課題でCSS化ホームページというのが出題されました
ｃｓｓとフレームページもどっちも一緒だと思うのですが
ｃｓｓの指定が全く分かりません
参考になるｃｓｓで使ってあるホームページを教えて頂けないでしょうか？
期限が迫ってきて焦っています

>>215
うーん・・・、その質問の仕方では、まだ修行が足りない。

>>215
わからないから、学校に来てるんですって先生に言う勇気をもとう。
わからないものを課題で出来るわけがない

どうせテキトーに授業受けてたけど課題があることを知って焦ったダメ学生

>>207
そういうことができるなら是非とも知りたいところなのだけど。

テーブルセル、テーブル行に対するheightは少々特殊で、一言で表すとmin-heightと同じような効果となります。
（厳密には違うのですが。）
行と行内の全セルにmax-heightを指定すれば、（CSS2.1の)理論上ではOKなはずです。
が、
CSS2ではテーブル関係にmin-*, max-*は一切無効とされていたり、厳密な挙動は未定義だったりしたという歴史的理由により
いまだに実装に依存する部分が大きい分野です。（セルに対するoverflowとか、ひどいもんです。）

つーことで現実的に無理。

>>207
tdの中に1つdiv入れるとかなら・・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang='ja'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
<style type="text/css">
<!--
tr{overflow:hidden;}
td{height:10px;}
td div{overflow:hidden;height:10px;}
-->
</style>
</head>
<body>
<table border="1"><tr>
<td><div>
本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文<br>本文</div>
</td>
</tr></table>
</body></html>

自己解決しました。
divタグを中に入れて、このような形にしてみました。
なお、どうして、これが必要になったかというと、テーブルセルをダブルクリックして表示/非表示（と言っても完全に非表示にするつもりはない）を切り替える必要が出てきたからです。
１セル内に、20行程度の文章が入っており、ダブルクリックすると折りたたまれて、1行の文章に変わります。そんな感じのjavascriptを作るための
前段階として、これが必要でした。とりあえず、javascriptもできましたが、下に示すのは、その前段階のHTMLサンプルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
<!--
td {height:5px;}
td div {overflow:hidden; height:100%;}
-->
</style>
</head>
<body>
<table border="1">
<tr><td>
<div>あいうえお<br />かきくけこ<br />さしすせそ</div>
</td></tr>
</table>
</body>
</html>

orz かぶってしまいました……。

皆さん、ありがとうございました。

そんな糞ソースよくまあ堂々と書けるもんだ

質問を変えます。
下記のように、ホームページの固定表示領域以外の部分に、
別の背景色をつけるためには、
どのように指定したら良いのでしょうか？

http://yaplog.jp/f-pavane/

固定表示領域…？
お前は日本語から勉強したほうがいいんじゃないか
ってか、サンプルあるならそのソース見ろよヴォケガ

>>225
まず初心者向けHP作成サイトでも読んで、最低限の基礎くらいやりなさいよ。
テンプレにも参考サイトあるんだし、webサイトスレにはhtmlの参考サイトが載ってる。
君の場合、htmlさえさっぱりなんだし、そのサイトはブログだし、
ソース見たってわかりゃしないでしょ。

>>226
自分が分からなかったら、黙ってたらいいんじゃないですか。
ソース見てわからないから質問してるんですが。

>>227
ブログだろうとホームページだろうとＨＴＭＬは同じでしょう。
あなたみたいにレベルの低い人には質問していません。
引っこんでて下さい。

body { background-color:#●●●●●●; }

　body{
margin:0px;
padding:0px; }

#head{
width:●●●px;
height:●●●px;
background-color:#●●●●●●;
border-right: 1px solid #●●●●●●; }

#wrap{
position:relative;
width:●●●px;
background-color:#●●●●●●;
border-right: 1px solid #●●●●●●; }

#left{
width:●●●px;
height:●●●px;
float:left;
background-color:#●●●●●●; }

#right{
width:●●●px;
height:●●●px;
float:right;
background-color:#●●●●●●; }

こういうことじゃなくて？

書けば数行の内容なのだが
「教えてください」の立場なのに、まず質問してること自体が勘違いしていることも判らず
アドバイスの真意も読み取れずそれらに対して逆ギレレスで「黙ってろ」「レベルが低い」
「引っ込んでろ」などと返す奴に、>225は丁寧に教える気になるかい？

>228
>ブログだろうとホームページだろうとＨＴＭＬは同じでしょう。

ひとつ教えてあげる、サーバソフトで動く世間一般のブログと、単純なHTMLは同じじゃないからさ。

>>228
すまんが、おまえの言ってることがおかしいと俺も思うぞ。

固定表示領域（？）外に背景乗せればいいだけでしょ。

だ・か・ら〜
日本語が不自由らしいから、もう一度だけ言ってやる。
ありがたく思って、耳くそかっぽじってよく聞け、低能共。

わからないなら黙ってればいいんだよ。

サーバソフトだかなんだか知らないが、ＨＴＭＬも知らないカスが偉そうに回答してるのが笑える。
固定表示領域の意味がわからない？日本語学校へ通えや。それか国に帰れボケが。

理解できたか？クズ共？

あぼーん

>>233
あの・・　それ、固定表示領域をつくりますか ?

>>232
キムチｷﾀ――(ﾟ∀ﾟ)――!!

CSSで
フレームみたいにページを２箇所左と右に分散して表示したいのですが
辞典を読んでも理解できません
ｃｓｓのタグを教えて頂けないでしょうか？
位置の指定はなんとなくわかります
ブロックとか領域とか難しくてわかりません＞＜」

擬似フレームでGugurecus

>>236

>>237と被るけど>>4のQ5

「固定」された「表示領域」以外の部分に背景色だろ？
CSSでやりゃいいだけじゃん。
CSSはＨＴＭＬじゃないよWWWWWWWWWWWWWWWW


以上、終了。

z-indexで色々と重ねて表示をためしてるんだけど
javaアプレットの上にどうやってもこないんです。
やりたいのはjavaアプレットの上にflashを重ねることなんだけど・・・

Flash板に行きましょう

>>241
これってFLASHの範疇の話なの？
ってことはあなたはこの問題分かるってこと？
HTML上で重ねるからこの板であってると思ってた。

>>242
なんでもいいけどそんなレス入れたら誰も回答したいとは思わないんじゃないかい？

妙な粘着ばかりだな

このスレのタイトルは、次からは

ＣＳＳバカ初心者が回答するスレッド=5th=

にした方が良いですね。

pgr

いきなり失礼します。
質問なのですが、
縦方向のグラデーションのかかった角丸ボックスを
文字可変に耐えられるように組むのってどうしたらいいのでしょうか？

とにかくでっかい背景を用意する
横グラデに変える
デザインを見直す

ちょっとスレ違いかもしれんが
CSS使ってるHPで裏ページ見つけるのってどうすればいい？
リンク式にしてるらしいが見つからなくて

>>247
必要と思うだけの大きさのグラデーションの背景を用意する。
角丸の外側だけ枠の外側の色で塗りつぶして、内側を透明にする。
角丸を配置する。

247です。
248さん、250さん、
ありがとうございました！！

textリンクでhoverで色と太さを変えているのですが、

例えば
A　B　C　D
とtextメニューがあって、Bのみをhoverで設定した状態で表示したいのですが
どうすればいいのでしょうか？

Bにclassを振る

下にソースを書くつもりが、途中送信すいません。

テキスト部分はliを使っていて、
#menu li {〜〜〜}
#menu li a {〜〜〜｝
#menu li a:link,#menu li a:visited{〜〜〜}
#menu li a:hover{〜〜〜｝
とそれぞれ設定しています。

classを使用すると、font-weight:boldは適用されるのですが
colorが適用されない状況です。

何か解決策はあるでしょうか？

class振ったliは別途指定しなきゃ

>>255
別途指定、とはどういうことでしょうか？
よろしければ教えていただければと思います。

>>256
まずどうやったのか書くべき。

>>257
すいませんでした。

cssは
--------------------------------------------------------
#menu ul li {〜〜〜}
#menu ul li a {〜〜〜｝
#menu ul li a:link,#menu li a:visited{color:#FFFFFF;〜〜〜}
#menu ul li a:hover{〜〜〜｝

.on {color:#000000;
font-weight:bold;
}
--------------------------------------------------------
ページでの記述は
<div id="menu>
<ul>
<li><a href="a.htm">A</a></li>
<li><a class="on" href="b.htm">B</a></li>
<li><a href="c.htm">C</a></li>
<li><a href="d.htm">D</a></li>
</ul>
</div>
--------------------------------------------------------
こんな感じです。
class.onで指定した、boldは適用されるんですがcolorが適用されない状況です。

ご指摘いただければと思います。

#menu ul li a {〜〜〜｝が余計なんだよ
どうしても指定する事があるなら、a:linkなんかと一緒に書く

あーごめん、aで色指定してないなら>>259は忘れて
そんで、#menu ul li.on a:link という風にちゃんと指定してね

.on {color:#000000; 〜　じゃなくて、
#menu .on {color:#000000; 〜　って書いてみ。

.on　だけじゃ弱いんで、指定が上書きされないんだよ。

>>260
>>261
助言ありがとうございます。

試してみたのですが、改善されませんでした。
#menu ul li.on a:link　や　 #menu .on 　のように指定すると
.onのboldもcolorも適用されませんでした。
.on{〜〜だけだとboldのみ適用されて、よく分からない状況です。。

>>262
aにclass属性つけてるんだから
#menu li a.on, #menu li a.on:link {〜〜
じゃね？

>>262
適用されないって、、、あんただけだよ

>>263
ありがとうございました。
おかげ様で全て適用させることができました。

感謝。

aにclass付けるメリットってあんのかな？
a要素にゴチャゴチャ付いてんのは嫌いなんだけど。

それは個人の好き嫌いの問題じゃね？
逆に聞くけど>>266にとって
aタグがごちゃごちゃしてるのが嫌い以外のデメリットってある？

わざわざ聞き返す程の話でもなし、特に無い、でいいだろ．．

<h1 class="logo"><img src="ロゴ"></h1>
<h2 class="description">サイト説明文</h2>

というマークアップのHTMLを

┌───┐
│　ロゴ　│サイト説明文
└───┘

という表示にしたいんですが、回り込ませることが出来ません･･･。
皆様のお知恵拝借できませんでしょうか。

どんな風に書いたの ?

うわー、H2にinlineつけてなかった･･･
解決しました。すみません。

cssのmargin:autoでセンターにしてるんですけどセンターから左に100pxずらす、みたいな指定って可能でしょうか？
よろしくお願いします。

叶

>>273
教えてください。

質問です。
100×100pxのdivの中に写真を配置した時に、
天地左右均等に中央に来るように記述したいのですが、
左右は中央に来るのに天地は中央に寄りません。
これってCSSでは不可能な事なのでしょうか？
お忙しいとこすみません。

>>275
imgにmarginまたはpaddingを指定すれば良いだけの事と思われます。
細かい事を言えば、div内にimg直書きはいただけませんが、
どうでもいいと思われるのも自由です。

>>264は結局的確な指摘だったのだろうか

>>276

返信ありがとうございます。
marginやpaddingで指定はごもっともだと思うのですが、
指定無しで自動に配置ってできないでしょうか？
それとdivの中にimg直書きって何でいけないんですか？

>>278
テンプレ読めよ。cssにはボックス縦方向中央という指定は無い。

>>278
どうせ何枚も画像があって大きさがバラバラで、
てな後出し条件があるんだろ。
それはもう表だから、table使え。

>>277
>>264は適当に煽りたいだけだろ。

質問者はテンプレを読めと。
回答者は余計な煽りを入れるなと。

質問者はそれに逆ギレするなと。
回答者は（ry

無駄レス無駄レス

質問です。
メールフォームのtextareaの背景を固定してIE6では正常に表示されていたのですが、
IE7では表示がおかしくなり、bodyの背景に固定されている風？になってしまいました。

改めて色々なCSS講座サイトなどを調べてみたのですが、その講座サイトのサンプルにも同じ現象が起こっています。
IE7では、textareaの背景固定はできないのでしょうか？

--------------------------------------------------
<TEXTAREA name="message" cols="50" rows="20"
style="background-color: #ffffff;
background-image : url(○○.gif);
background-repeat : no-repeat;
background-attachment : fixed;
background-position:50% 50%;"></TEXTAREA>

>>283
background-attachment : fixed; は余計だし、
全てのブラウザで背景表示されるわけでもなし。

.bodyのmargin-bottom:1pxがie他で有効になりません。0pxになってしまいます。
下で言うと赤のボーダーが下に回りこむようにしたいのです。
block部分は後で角丸にするため、.blockのpadding:2pxとかはできません。
.bodyのmargin-bottomを1pxにするための方法を教えてほしいです。
<html>
<head>
<style>
.block{
border:0px solid black;
background-color:#ff8888;
margin:0px;
padding:0px;
}
.body{
border:0px solid black;
background-color:#8888ff;
margin:1px;
padding:1px;
}
</style>
</head>
<body>

<div class="block">
<h3>trest</h3>
<div class="body">
tes
<div>
</div>
</body>
</html>

>>285
赤のボーダーがどこに？　黒のボーダーは0pxだし。

なんか伸びてると思ったらキムチが降臨してたか

誤爆ですね、わかります

どなたか教えていただけないでしょうか。

>>289
ソースくらい出せ

>>290
{
margin-left: auto;
margin-right:auto:
}
で今はセンターにしてます。

>>284
背景を固定するからにはbackground-attachment : fixed;は必須だと思うのですが･･･
この入力がなければ背景がスクロールするだけなんです。

そもそも全てのブラウザに対応するとは思っていませんでしたが、
IE6ではOKでIE7ではダメ、というのはやはり残念です。
レスありがとうございました。

みなさんはGoogle Chromeでチェックしてますか？

>>292
fixedはそもそもbody（正確にはviewport）に対して固定すると規定されている。
IE7やIE以外のブラウザが正しいだけ。

どうしてもやりたければ、現時点では
textareaを含むブロックに背景画像を表示し、textareaの背景を透明にするとか、しかない。

>>291
ふーんそれだけかい。後だしでごちゃごちゃ言うなよ。
左にfloat:left;、width:50%;、height:適宜; padding-right:100px;のboxを置く。
あんたが置きたいboxにfloat:left;、width:適宜;。Fxで確認済み。

>>293
Safariと同じだよ。Googleの言う事を信じるなら。

>>294
教えていただいた方法で上手くいきました！
自分では考えもつかなかったことだったので、本当に助かりました。
IE7にしてから、自分がいかにIE6の表示に依存していたかを実感しています。
ありがとうございました！

>>295
わざわざありがとうございます。
本当にあれだけなんです。
ブログのcontainerを少し左に表示させたかったので。
助かりました。

http://www.uploda.org/uporg1667625.png
のように作ってたのにアップロードしたら
http://www2.uploda.org/uporg1667626.png
になったんだけどどうすればいいんですか？

IEとFirefoxで見たんだけど両方崩れてた…

>>299
外部CSSやimageファイルがアップロードされていない悪寒。

>>300
CSSアップロードしてなかった…

でも画像はアップロードしたのに出てこない…他になんか忘れてることでもあるんだろうか？

パスの記述が間違ってんでしょ。

画像がCMYKカラーだとか。

>>286
勘違いさせてすいません。ボーダーってのはcssのborderのことではなく、
.bodyのmargin-bottom:1pxのところにできる隙間のことで、
.bodyを外包している、.blockの背景色赤が
.bodyのmargin-bottom:1pxによって1px分の線となってみえるはずなのに
表示されないのです。

だれか答えてほしいです。

>>304
仕様だか知らんけど、そうなるんだよ。
border-bottom付ければ隙間開くし、border自体を隙間の代わりにする手もある。

知らんけどって・・・

marginの相殺（collapse）です。.blockにborderかpaddingがあれば相殺は起こりません。
が、それをしたくないということであれば、HTMLの構造を変えるしかないかと。

-----------------------------------------------
input,
textarea,
select
{
line-height: 1.4;
padding: 0.1em;
color: #333333;
border: 1px solid;
line-height: 1.2;
}
input:hover,
textarea:hover,
select:hover
{
background: #fafafa;
border: 1px solid #448ab3;
}
input[type="submit"]
{
background: #448ab3;
color: #333333;
border: 1px solid #333333;
padding: 2px 3px;
}
-----------------------------------------------
上記のフォームの設定で、チェックボックスとラジオボタンを置くと
真横に文字が並んでしまいます。少し余白を空けるにはどうしたら
良いのでしょうか？ご助力どうぞよろしくお願いします。

質問し直します(´・ω・｀)

alphaEDIT使ってます。
プレビューで見ると画像は表示されてるんだけどアップロードしたら見れなくなります。
（プレビューで見れるって事はタグは間違ってないんだよね？）

>外部CSSやimageファイルがアップロードされていない悪寒。
全部アップロードしたけど見れない…他に何か忘れてることってあります？

ちなみに忍者のアップローダー使ってます。
よろしくお願いします。

>>308
パスが間違ってないか確認。
つかcssの質問じゃない。

#left{ float: left; width: 500px}
#right{ float: right; width: 350px;}

<div id="left">左側</div>
<div id="right">右側</div>

で画面を左右に分割してます。
右側の横幅は350pxに指定してます。

それで質問なんですが、
左側の幅を、画面の大きさに合わせて自動調整するにはどうすればいいんですか？

widht:100%;　にすると左側だけで画面の幅が100%埋まってしまいます。
右側350を固定したままで、左側を自動調整にしたいんです。

>>309
できるよ。
以上。
↓次どうぞ

左に右側分だけ右マージンとって幅を指定しない

leftもfloat:rightに

www.blackmaxmedia.com.au/contact.php
↑のサイトのメニューバーを作成したいです。
自分なりにいらない部分を削除し、htmlとcssを抽出しようとしましたが、
できませんでした。

参考になるサイトがありましたら教えてください。

（作りたいもの
　プルダウンメニューではない。
　オンマウスで、メニュー下に横方向のサブメニューを表示させたい。
　ジャバスクリプトでもかまいません。）

今wikiを作ってるんですが、タイトルを画像にすると
ttp://pai.no.land.to/up/src/dgz3675.jpg
このようにずれてしまいます。CSSでタイトル位置を修正すればできると思うんですが、
どこを変えればいいのでしょうか？
現在のCSSは
ttp://pai.no.land.to/up/src/dgz3676.txtこうなってます

>>314
タブメニューの一種だな
デモttp://www.dhtmlgoodies.com/scripts/dhtmlgoodies-tabmenu/dhtmlgoodies-tabmenu.html
解説ttp://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies-tabmenu

>>315
#atwiki-jp-bg1のwidth、#headerのheightを画像とそろえる（この場合は760ｘ200が無難？）
#atwiki-jp-bg1とか#header h1のpaddingを切ってみる
低能力者にはそれぐらいしか思い浮かばん

・・・どうでもいいけど、タイトルだけ隠してURLが丸見えなのは有なのか？

>>312
左側の自動調整はできましたが、
それで空いた部分が空白のままで、右側が入ってきませんでした。

>>313
上記と同様の結果にプラスして
右側にスクロールが延長されて関係ない余白ができました。よくわかりません。

ありがとうございました。まだ何か方法があればご教示お願いします。

>>316
回答ありがとうございます。
まだ詳しくは見ていませんが、早々ありがとうございます。
サブメニューが表示されたままなのが少し気になりました。

>315
cssだけ見せても意味ねーだろ
htmlも見せないと

でもまぁ見当付いたから教えてやる

画像ファイル名をnight.jpgにして↓の場所に上書き
サイズは760×150px
http://img.atwiki.com/image/night/night.jpg

#header h1と#header pをdisplay:none

違ってても知らん

うまく行ったみたいだよ
http://www26.atwiki.jp/riesbyfe/

うお腹立つ

つか物凄い汚いソースだな

>>316
ありがとうございます。
参考にして今から弄ってみます。
URLは忘れてしまいましたorz
>>319
ありがとうございます。
>>316さんのと両方やってみます。
やっぱり大した知識もないのにやるべきことじゃなかったですかね。
低レベルな質問すいませんでした

>>315
@wikiは検索機能が糞だから、
もし情報量の多いwikiになるなら、
今のうちから別のwikiに移行しておいた方がいいと思うよ

情報量の多い物を@wikiで運営して泣いている管理者より

一応できました。教えてくださってかたありがとうございました

>>323
検索するようなwikiでもないので大丈夫かもです。助言ありがとうございます

質問させてください

xhtml+cssで、
縦置きメニューを横幅20%、コンテンツを横幅75%の
ワイド100%でホームページを作っています

コンテンツ側に画像を置く場合、
横幅って%で表示させるほうがいいのでしょうか？
1024環境でIE6を使い
お気にを出すと、コンテンツとメニューが崩れてしまいますorz

画像処理について
アドバイスお願いします
　

class hogeの中のtable要素にだけcssを設定したいのですがどう書けばいいのでしょうか？
.hoge table{}
と書いてもうまくいかないのですが

>>326
その適用させたいtableにclassなりidなり指定すればいんじゃね？

ありがとうございます。
数が多かったり使い勝手の問題で
table,td,tr自体にidなどつけたくないのです
なので、class指定されているdivで囲ってある物だけを適用させたいと思いまして
<div class="hoge1">
<table>〜
<table>〜
</div>

>>328
>>326では.hoge、>>328ではhoge1。
その手のアホミスだろ。

すいません、328は例で書いたのですが、実際はhoge1ではなくhogeにしています
cssの指定方法はあっているのでしょうか？

簡単なソースなのになぜ自分で試さないの？
例だからいい加減でいいとか馬鹿にしてんの？
よく最少ソース出せっていうのは、
その時点である程度問題解決や切り分けが出来るからだよ。

>>326
div.hoge table とか
body div.hoge table とか書いてみ

<table class="hoge">
とかじゃだめ？何でまた、わざわざ余分なdiv増やすのか説明せよ

table,td,tr自体にidなどつけたくないのです

理由は聞かないで下さい

知ると後悔しますよ

各タグに最初から設定されているCSSのパラメータ(marginやpadding)を知りたいのですが
どうやれば分かるでしょうか？

>>337
ウェブブラウザによって異なります

詳細はウェブブラウザの仕様書を探して確認してください

<div id="hoge">
<h3><a href="hoge">文字列</a></h3>
</div>

id属性hogeの中のh3のaタグの文字列だけ文字色を変更したく下記のように記述しましたが、反映されません
どう記述すればいいですか？

#hoge h3 a:link {
color:#ffffff;
}

違うスタイルシートに記述していただけで、ちゃんと反映されておりました
スレ汚しすみませんでした

リンクの下線と、文字の間を広げるにはどうしたら良いでしょうか。
たとえば、このぐらいの間のものを

あああああああああああああああ←ここと
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣←ここの幅

このぐらいにしたいのですが…

あああああああああああああああ←ここと
ーーーーーーーーーーーーーーー←ここの幅

>>341
border使う。弊害もある。

>>341
IE7でメイリオを使う

overflowした内容をメインカラムのみスクロールするようにしたいのですがなかなか上手くいきません。
　　　ヘッダー
メイン　　　メニュー
　　　フッター
の位置関係で、メインの右端をスクロールできるようにしたいです。

メイン縦幅の数値入力でできませんか？

リストで左側に画像を表示しているのですが左側にかなりの空白が空いてしまいます
どこがおかしいのでしょうか？

li
{
list-style-type: none;
background-image: url('./JPEGdata/dia.jpg');
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 16px;
}

<ul><li>○○○○○○○</li></ul>

マージン消した？

>>347
レイアウトカラムのマージンですか？
それなら消してないです

とりあえず一回全部マージンとパディング消しなよ

既読リンクの一文字目の指定の仕方教えてください

a:visited:first-letterだと一文字目じゃなくて全部対象になります

>>350
疑似クラス・疑似要素はセレクタ後尾に指定するもの。
a:visited:first-letterなんてありえない。

>>351
仕様書嫁。
CSS2では
:疑似クラス:擬似要素はOK。
:擬似要素:擬似クラスはNG。
:疑似クラス:疑似クラスもOK。
とにかく擬似要素は最後に一つでなければならない。結合子が続いてもダメ。
擬似クラスはクラスと同じく、そんな制限はない。

>>350
それだけの情報では、そのブラウザがおかしいとしか言えない。

>>352
a:visited:first-letterが反映されるブラウザを教えてください。

だから、それだけじゃわからんってのに。

:first-letterはブロックの1行目の1文字目だから、ブロックボックスにしてないと
効かないけど。原因はそんなところじゃないの？多分。

a要素はインラインでブロックは入れられないだろ。
するとa:visited:first-letterは間違いという結論になる。

ハァ？
display:blockとかinline-blockとか、・・・、
position:absoluteとかfloatにすればa要素からブロックボックスを生成できる。

HTMLのブロック要素とCSSのブロックボックスを混同すんな。仕様書嫁。

>>355
ブロックを入れる？？？

「a:visited:first-letter」←これ読めるんですよね？
何も入れる必要は無いし、また、何か入ってようが関係ないですよね？

>>356
だからa:visited:first-letterが反映される状態ってのを教えてよ。
わからんじゃなくて、出来ないの間違いだろ。

b.class1.class2.class3{ color: red;}

<b class="class1">
　あ
　<b class="class2">
　　い
　　<b class="class3">う</b>
　</b>
</b>
<b class="class1 class2 class3">え</b>

言ってることから推測するに、これで赤くなるのは「う」だと思ってる人ですか？

はいはい、できませんできませんw

ちょっと煽りあってる人ら、
PCから離れて飯ちゃんと食って顔洗って来てくださいな

冷静になれば気がつくだろうけど、
顔真っ赤にしてやりあうほどのことじゃないですぜ？

なんだ仕様書読めってのは出来ないって事か

>>361
くだらない茶々入れてるヒマがあるなら
茶入れて来いよ、気きかねえな。

実は出来ないんですぅ！
もうしません！ほんの出来心だったんですぅ！土下座しているので許してください！！！

>>359
お前は一体何を言っているのだ？

>>364
俺は心が広いから許してやろうと思う。二度とあんな事をするんじゃないぞ。

出来ようが出来まいがどうでもいいじゃない
そんな変なことする奴普通いないよ

>>364
良かったな！

>>367
今更出来ない事に気付いたんで、言い訳に走っているのですね。
バレバレなのに本人は気づいてない。良くある光景ですが笑えますね。

お前は誰と闘ってるんだ

「論点のすりかえ」ですか。ステロタイプですね。

頑張ってくれ

で、結論はどうなったの？
「出来ない」で確定？

おまいは出来たわけ？オレは出来なかったけどね。

＞そんな変なことする奴普通いないよ
質問者の存在を完全に無視するアホ

ズバリ書かれてるのに出来ないと言い張ってる奴って一体…？

そんな罵り合いはいいから、結論だけ書け

>>376
出来るって言い張るならソース出せ。

>>377 しょうがねーなー。俺様がまとめてやんよ。

結論：
出来ると思い込んで見えない敵とバトルしてた。「出来るんだよ、なんでわからないのかね、カス共は！」
ところが、ふと出来ないことに気付いた。「ど、ど、ど、どうしよう〜！出来ねーじゃん！あわあわわわ」
そこで、論点をすり替えて誤魔化そうとした。「出来る出来ない関係ねーよ、誰もやらねーからwww」
しかし、あっさり自演がバレたので、真っ赤になって逃げた。「うぇーん！ママー！」

ほれ、これで完璧だ

なるほど。

見てて思ったんだけど・・・

「a:visited :first-letter」だと思ってるんじゃないの？
「a:visited:first-letter」の話だよね？

「a:visited :first-letter」だと思ってる上に、351、355のように間違えて覚えてるから
話がかみ合わないのではないの？

で、ここまで読んで出来ないなら、ただのアホなのではないかと。
少なくともfirefox3とOpera9.5で「出来た」けど。

別人のフリしなくていいし、アンカーくらい付けてね。
そしてソースを出さなければただのアホだ。

>>381
そこまで言うなら、早いとこソースよろしく
出来る出来ないだけ言い合ってたって水掛け論にしかならんよ
さっさと結論出してスッキリしようぜ

>>381
>「a:visited :first-letter」
>「a:visited:first-letter」
同じだろうが。バカか。

>351、355のように間違えて
間違いだという論拠を示せボケ。何をエラソーに。

>firefox3とOpera9.5で「出来た」けど。
お前の脳内世界の妄想で出来ても、現実世界では「出来た」とは言わねーんだよ。
これ以上ひどくならないうちに頭の病院逝け。な？

あと、自演がばれないと思いこんでるみたいだけど、誰が見てもバレバレだから。

ボクは「実は出来ませんでした」って謝ったのに、
知らない誰かが「出来る！」って言って、荒らしてるんですぅ！
自演じゃありません！！！

>>382,>>383
ホントに更に別人だけど、Fx2で一応出来たよ。
でも、なぜか更新ボタン押さないと反映しないんだよね。。
a:link {color:green; display:block; width:50px; height:30px;}
a:visited:first-letter {color:red;}
<p><a href="tes1.html">りんく1</a></p>
<p><a href="tes2.html">りんく2</a></p>

出来るって言ってた人じゃないけど…

<a href="...">abc</a>
で
a {display: inline-block; white-space: nowrap;}
a:visited:first-letter { color: red; }
とか？
他にも何通りもあると思うんだけど…



…はっ？
もしかして、真面目に答えちゃダメなスレだった？

かぶりました…

>>386
:linkであり、かつ:visitedであることはないから。
1行目のセレクタはa:link, a:visitedじゃないと。

>>389
へ？

勿体つけて威張りたいだけのボケがいるから、こんなに長引くんだよ。
>>350の回答はdisplay:block;と言えば済むんだし。
自分なら画像でやるだろうし、確かにこんな指定したい奴の気は知れないが、
まともな回答もせず、こんなに引き延ばす必要がどこにあるんだろ。

議論するのが好きなおっさんが潜伏してるからだと思うｗ
┐(´ー｀)┌ﾔﾚﾔﾚ

とあるブログのＣＳＳソースを見るにはどうしたらいいの？
htmlソースしか見られません。。

そのhtmlソースの上の方に、
<link href="style.css" type="text/css" rel="stylesheet" />
とかあるんでそれを見ればいい

>>394
サンクス！

overflowにscrollを設定したdivの、
内部コンテンツのサイズを知りたいのですが、
どうやれば分かりますか？

>>396
イミフ

>>389
:linkと:visitedは互いに排他的、と言いたいのではないかと。
それでも意味不明だが。

>>「a:visited :first-letter」
>>「a:visited:first-letter」
>同じだろうが。バカか。

同じだっけ？本気で忘れた。

もう掘り返すなよｗ

だから出来ようができまいがどうでもいいだろ・・・

>>399
出来ない派（派なのか一人なのか知らんけど）にとっては同じなようですね。
それでいいじゃないですか。どっちでも世界は変わらないよ。

403 Forbidden

404 edwin

551 Hourai

くだらない会話してるやつ消えろよ
邪魔
無知な回答者も消えろレベル低すぎ

そして>>406みたいのしか残らない悪循環

じゃあまず俺から消えるよ

じゃあ俺も消えるよ

問題
（配点： 5点）

406が
・くだらない会話はしない（人によってくだらないと感じる定義が曖昧だと思うのだが）
・無知でない（何について無知でないのか説明が無いのでこの時点でお察しだが）
・レベル高い（何についてのレベルか説明が無いので（ｒｙ）
回答者であることを証明せよ

>>406が自身で上記を証明してもよし、
>>406以外の者が上記を証明してもよし、
手段は問わないものとする

制限時間はこの書きこみより3日とする

>>410
ｸﾞｸﾞﾚｶｽ

>>410
だからそういうノリがくだらないんだよボケ
他の板でやってろ

<div class="hogehoge1">
<div class="hoge1">あ</div>
<div class="hoge2">い</div>
</div>

<div class="hogehoge2">
<div class="hoge1">う</div>
<div class="hoge2">え</div>
</div>

このようなhtmlがあった場合
class hogehoge1の中のhoge1のみにcss適用させたいのですが
どのように指定したらいいのでしょうか？
お願いします

hogehoge1 hoge1

本一冊くらい買ってこいよ
それともどうしようもないほど馬鹿なのか？

>>414
いちいち初心者煽るなカス
いらないから消えろ

そして>>415みたいのしか残らない悪循環

>>412=>>414
だからそういう答える気の無い回答がくだらないんだよハゲ
他の板でやってろ

>>1
> CSS初心者の方のための質問スレッドです。
> 具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
>
> ※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。

テンプレぐらい嫁よ
玄人気取りで煽るやつはなんなの？馬鹿なの？
そういう質問が見たくないんならこの板去るかスルーしろよカス
いらないから

初心者スレだからって聞いていいこととダメなことがあるだろｗ
ちょっと普通に勉強すればわかることを一々聞くなよ

ところで「.」・・・いや、なんでもない・・・

いや、さすがに>>414みたいなのが初心者スレ以外にいたらダメだろ。
このスレは正常に機能してるよ。問題ない。

レスの不快さは>>418の方が数段上。

IDつけて分ければいいんじゃね

まったく0の状態からCSS勉強したいんだけど、何かお勧めな方法ないでしょうか？

>>424
実例の載ってるリファレンス一冊買って丸覚え
覚えたら今度はネットで仕様書に目を通す
後は実戦あるのみ

>>421
どういうことだ？

>>424
初心者向けサイトがテンプレ含めていっぱいあるんだから、
そういうの見ながらどんどん書いてみれば覚えると。
最初から仕様書ってのは、そういうの好きならいいけどね。

>>414
これ間違ってね？

>>425
>>427
なるほど　明日からはじめてみます　ありがとうございました。

>>429
ソフトバンクパブリッシングが出してる10万部突破だかって帯に書いてある本、
その本と、それと同じ著者・編者が関わってる本は買っちゃダメですよ

h1, h2, hx...について説明しているページを見ていただければ分かるんですけど、
初心者がよく間違って覚えているような間違っている事が
堂々と正しい事のように書かれていますので注意してください

この板を見てる方が詳しいと思いましたので、質問です。
パソコンにもともと入ってるフォントの中に、
HGS創英角ﾎﾟｯﾌﾟ体は、ありますか？？

そもそもどんなフォントもあるとは限らない
当然MSゴシックだってない環境もある

>>431
無い
そりゃオフィスのせい
マニュアルに書いてる
読みなさい

http://blog.livedoor.com/design_demo/default_2008_pink_3c_cms.html
サイドバーを開いた状態でこのレイアウトを見ると、中心のカラムが狭くなります。
リキッドレイアウトでは無く固定にするにはどこをどのようにすればいいですか？

画像だけじゃ具体的な変更箇所はわかりません＞＜

テーブルの一部のカラムだけを、枠で囲ったり、背景色を変えたりできますか。
例えば、

<tr><td>Aa <td>Ab <td>Ac</tr>
<tr><td>Ba <td>Bb <td>Bc</tr>
<tr><td>Ca <td>Cb <td>Cc</tr>

とあるとき、 Ab,Ac, Bc, Cb,Cc の外側を　凹　（左90度回転） みたいな枠で括るか、
その背景色を変えて、注目させたいのですが。

背景色なら単純に

.style1 {
background-color: #00FFFF;
}

<tr><td>Aa <td class="style1">Ab <td class="style1">Ac</tr>
<tr><td>Ba <td>Bb <td class="style1">Bc</tr>
<tr><td>Ca <td class="style1">Cb <td class="style1">Cc</tr>

td への class　指定だと、collapse にしない限り、「地の色」が見えてしまいますよね。
separate の場合でも、その<td> 周りの「地の色」ごと変えたいのですが。

>>438
ロクなソースも出さず、後出しでうるさいわ。table2個作れ。

>>438
少しは自分でやってみたわけ？
やってみりゃ何が可能かくらいわかるでしょ。

質問です。
テキストをマウスオーバー時に右寄せにしたいのですが、
IE７だと動くのですが、Firefoxだと動きません。
やり方が間違ってますでしょうか？↓

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=euc-jp">
<title>タイトル</title><style type="text/css" media="screen"><!--
.list1 { font-size: 12px; line-height: 21px; background-image: url(image1.gif)
; background-repeat: no-repeat; text-decoration: none; text-align: left
; text-indent: 40px; width: 180px; margin-top: 0; margin-bottom: 0; padding-top: 2px; }
a:link { color: blue; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: none; text-align: right; width: 140px; }
--></style>
</head>
<body>
<p class="list1"><a href="(EmptyReference!)">テキスト</a></p>
</body>
</html>
長ったらしいレスですいません。

質問です。

<STYLE type="text/css">
<!--
body{cursor:url(カーソル画像のアドレス);}
a{cursor:url(カーソル画像のアドレス);}
-->
</STYLE>

このソースを使用すると、
リンク文字にオンマウスした際に
カーソルが点滅して瞬きを繰り返しているように
表示されてしまうのですが、対処法はありますか？
お願いします。

>>441
インライン要素だから動かないFirefoxが正しいんだよ。
動かしたきゃ hover に display:block; でも追加しろ。

>>442
点滅に合わせて瞬きしろ。

>>441
できました。どうもありがとう

↑アンカーミス。>>443です。失礼しました

背景画がFWだとちゃんと表示されるのですが、IE6や7だと表示されません（背景色は反映されます）
知恵袋等で似たような質問があったのですが、馬鹿なので分かりませんでした
よろしくお願いします

何を言ってるのかわかりません。
FWとは特定PCのお話でしょうか。

別の知恵袋等で知りたい情報があって解決できました
お騒がせしました

446は自己厨の見本だな。

FWの略語も知らない人が回答者なんですね
わかりますよ　わかりますとも

俺も知らないんだがFWってなんだ？

Fireworks

こんなのweb業界の常識以前の用語知識でっせ　旦那さん

FireWall

こんなのネット業界の常識以前だぜ。

てかここ制作板だし

>>452
それソフトウェアの名称じゃないのか

>>453
カスは消えろよ・・・

つーかこれFFの打ち間違いだろ
>背景画がFW
この文脈から>>452>>453だと思うやつは馬鹿？

Firewox も FF も馬鹿だろ。
略すならFｘが好ましいって書いてあっただろ。

強制IDにならないとこの板はいつまでもこういう流れのままだな

ＩＤついても変わらんと思うけど

いずれにしても、446が自己中ということで、FA。

divでくくられた枠を、

□□□

このように３つ横に並べるのにはどのようにすればいいでしょうか？

□□

こう２つ並べるのは簡単なのですが、３つ並べるのがよくわかりません。

最初のdivだけfloatつけてるという落ちか？

３つ全部floatさせればいいだけ

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

Ｑ．■■■■　として　それぞれの中身の縦の長さが変化することを
前提にして、全ての■の高さを常に等しく表示させる方法を考えています。

Ａ．ＣＳＳでは無理です！　テーブルで我慢してください。

>>465
なんっちゆー回答

cssでも余裕でできますよ

FWではなく、FX？（FIRE FOX3）でした

話にならないレベルみたいなので、出直してきます
お騒がせしました。すいません

Fire fox(火狐）　じゃなくて　Ｆirefox（あらいぐま）　な

>>466
すみませんが、余裕で出来る方法があれば、
一度提示してみてください。＾＾
簡単で結構ですから・・・

http://coliss.com/articles/build-websites/operation/css/558.html
これで出来ないかな？

あらい熊はraccoonだゾと。

>>470
これだけ姑息な手を使うなら、テーブルの方がいさぎよい。

ごめアライグマじゃなくてレッサーパンダだったｗ

>>470
これまた懐かしいハックだな。
それ、アンカリンクバグとかあって使い物にならないよ。
お前、実はぜんぜん余裕ないだろ。

余裕って言ったのはおれじゃないもん＞＜
そういうならおまいさんがもっといい方法教えてやってください

>465
各■の幅が固定で一行ならという仮定で、

4つの■をリストで表示して、ulの背景をbottomで4つの■の下部分を表示させて（縦に長めにつくっておく）、
各liの上部を■の上部で上書きしてやればいいんじゃない？

リキッドなら・・・、思い浮かばないわ。

>>466でも>>474でもないがoverflow:autoじゃだめなのか？

<html>
<head>
<title></title>
<style type="text/css">
<!--
div{
width:100;
height:100;
margin:10;
overflow:auto;
border:1px solid;
float:left;
}
//-->
</style>
</head>
<body>
<div>a<br>a<br>a<br>a<br>a<br>a<br></div>
<div>a<br>a<br></div>
<div>a<br></div>
<div>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div>
</body>
</html>

お代官様ぁ〜
このラベルの低さをなんとかしてくだせぇ〜
おねげえしますだあ〜〜

>>477
なんでoverflow:autoさせるの？？

高さ揃えるためだろ

ちょぉーっと待った

目の覚めるようなcssを
>>478-479が書いてくれますから
全員しばし注目
　

テーブルでっしゃろ ?

質問させていただきます。

ttp://blog.webcreativepark.net/2008/02/06-221054.html
ここで提示されているコードを、headerとcontentの間に入れたいのです。
使用しているのはWordpressで、ithemeというテーマに修正を加えようとしています。
申し訳ありませんが、style.cssとheader.phpのどちらに手を加えたらいいのかすら分かっていません。
詳しい方の御教授願います。

>>483
ブログの質問はブログ板

>>484
ありがとうございます。
該当しそうなスレが見つかったので、そちらで聞いてみます。

IE6で作ってるんだけど、XML宣言を削除してもレイアウトが崩れます。ハック使ってもまだ崩れてます。何が原因なんですかね？

おまいのスキル

好きな人がいるんだけど、告白しても断られます。
ハック使ってもまだ断られます。何が原因なんですかね？

おまえの顔

本当は好きな人なんか現実の世界にはいないというオチ？

このスレはゴミしかいないようだな

いやいや、お前の質問の仕方がゴミなんだろ。
お前は>>488の質問に答えられるのか？
ようするに情報不足なんだよ。

おれが適切な答えをだしてやったのにゴミとは失礼な！

>>486
(X)HTMLソースとCSSを見せてください
486の情報だけでは何も答えられません

そう言って、ソースを収集しパクリサイトを量産しているのか。

そんなあからさまな手に騙されるとでも思っているのかね？

何も答えられないのは、おまえが低能であるからに他ならない。
優秀な人材であれば、ズバッと的確に簡潔に即座に答えている。
ゴミは黙ってな。

> ゴミは黙ってな

ゴミが喋ったこと見たことあるのか？

　　 　 /　　　　　　　　　　　　　　　 /　 　 　 ﾞi,　 ヽ
　　　 j　　　　　　　　　 　 　 　 ,ｨ／　 　 　 　 |　　|
　 　 lｨ'　　　　　　 　 　 　 ,ｨ／j/　　　 　 　 　 |　iﾘ
　　　|　　　　　　　　 /l ／　　　　　　　　　 '"` |　j
　　　ﾘ!　　　　　 /,ノ　　　　　　　　　　 _,､-''''` /ﾘ　　＿＿＿＿＿＿＿＿＿＿
　　 　 |　　 _.._　l/ 　 ,.--;==ﾐ ､ ___,.ﾉ /{.○-ﾞ‐rV　／
　　　　ヽ,/｀ヽヽﾄ､　´　 {,.○-`‐‐ ､,.-ﾄ|　　　　,ﾉ＜　ハッハッハ！　見ろ！
　　　　 ∧￣　ﾞi, 　 `ヽ,r'´　　　 　 ﾉ.　 ﾞ､--‐''´|　＼　　人がゴミのようだ！
　　　　　|　|￣　ﾞi　　 　 ヽ､ __,,､-'" ,-､,:‐､〉　　/　　￣￣￣￣￣￣￣￣￣￣
　　　　　＼＼/.　|　　　　　　　　　　＼＼＼　 i
　　　　　　　＼＿'i　　　　　　　＿＿＿＼＼＼|
　　　　　　　　　　　ヽ　　　　　`ー─''''"´＼＼＼
　　　　　　　　　　　　ヽ　　　　　　　　　　　j＼＼＼"．;":;"．"　:
　"．;":;"．"　:"．;":;"． ＼　　　　　　　　　/　＼＼＼"．;":;"．"　:
　　．;"．;:　．;"　　　　　　 ＼ ___＿＿＿ /´　 　＼＼＼　"．;":;"．"　:
　:　　　ゴ　オ　ォ　ォ　……　！　！"．;" 　　　　＼＼＼　　　;":　．．;．;"．;":
　;"　　　　　　　　　．;"．;":　＿．;．;_"．;":　　　 　 　＼＼＼　　　ド　カ　ァ　ン　！
　　．;"．;":　．．;．;"．;　ζ /＿．;＿/|　．;"．;", ＿ 　 ＼＼＼　　．;"．;．;"．;":.
　．;"．;":　．．;．;"．;":　;:'．;| ΓΓ |　|;":从へ＿/|　　 .　 ＼＼＼"＿．;_＿．．:
　从へ从へへ从　　;　ζ 　| Γ从 |　|;:..　|从Γ | |　 　 　从へ从∠＿＿_／|　　:
　　　　 （　⌒（　⌒　）　ζ　| 从Γ |　|.:;.　|从Γζ．;"．． ．;． ＼ |ΓΓΓ|　|　　　　　|
　（　　　⌒　⌒　　⌒　）;　　| ΓΓ | |．;;::|ΓΓ | |　 　（　从へ ;: |从ΓΓ|　|　　　　　|
　　Σ（　⌒（　⌒　）　ζ　　（　（　）　）⌒　）　（　从へ从）_．;:．;|Γ从Γ|　|　　　　　（　|　|

こんなとこにソースをうＰするとか自殺行為だな。

>>486
XML宣言もハックも関係ないところで崩れてる。
つまり、元からおかしい。

え？　そのままソースあげようとしてんの？
こんなとこでそんなこと考えるのはやめてくれよ。
質問するの初めての人か？
どういう風に崩れるのかしらんが、幅指定してる部分だけでいいだろ。
>>477みたいに崩れが再現できれば中身適当でいいんだぞ。

・りんご　　　10
・みかん　　　9
・たぬき　　333

こんな風に数字を右で揃えるリストはどうやったらいいですか？

ｄｌ
ｄｄ内を右揃え

<div id="a">
　　<p id="b">aaaaaaaaaaaaaaaaa<p>

　　<p>abc</p>
</div>

div, p {
　　margin: 0;
　　padding: 0;
}

#a {
　　float: right;
　　max-width: 300px;
　　margin: 0;
　　padding: 0;
}

#b {
　　max-width: 150px;
　　margin: 0 auto;
}

p, div {
　　border:1px solid #000;
}

↑の表示例↓
http://www.uploda.org/uporg1713777.png

これIEが悪いんでしょうけど、どうやったら統一できますか？

>>503
ハック

>>503
テンプレ>>1-7くらい読め！！！！！！！！！！！！！！！！！！！！！

>>505
ブロック要素のセンタリングのところにはこれの解決方法書いてないんですけど〜

>>506
君のやりたい事はすべて書いてあるぞ
http://www.mozilla.gr.jp/standards/webtips0004.html

リンク先もよく確認しましょう

IEだとmax-width150を無視して300になるっていうのが問題なんですけど
widthに関する話一切ないんですけど
どこにあるんですか？

maxはＩＥ用にＪＳ使うしかない

>>1も読めない片言君たちはどうでもいいが
<p id="b">aaaaaaaaaaaaaaaaa<p>
どうみてもこの部分はちゃんと150になってるよ。

問題はそっちじゃなくて３００のほうだろ

IEのmargin-right,left:autoの算出方法がアホだからどうしようもならないだろこれｗ

この問題はIE用のJSとか関係ないです。
だいたいこれはIE7の問題で、サンプル通りの書き方ならば、
非対応のIE6などはFirefoxと同じ結果になるはずです。

floatにwidthを明示せず、max-widthのみを使ってるのがダメなんです。
508さん的には150を無視して300になるというのが問題らしいので
max-width150が無視されてないことが伝われば解決ボタンを押してくれますよ＾＾
大丈夫です。

firefoxみたいにfloatでwidthを指定してないときは
いい感じに縮まるのがCSS2からのトレンドだからな
IEはアホなんだよ特に７は

macの動作確認とかって皆さんはどうしてるんですか？
やっぱりmac持ってないと出来ないのかな？

>>515
Macは近所のキンコーズに行ってチェックしてます

Windowsについては
2k、XP、Vista上で、IE6・7、Firefox2・3、OPeraでチェックしてます

そこで、WinSafariですよ

>>514
Win版のSafariは全然マック版とCSSの解釈が違う気がする

フォントも違うからねぇ

全然なのに気がするとはこれいかに
速度の比較はよく見かけるけど、CSSはよく知らんので詳しく頼む

<dl>
<dt>DT1</dt>
<dd>DD1</dd>
<dt>DT2</dt>
<dd>DD2</dd></dd>

を

DT1　DT2
DD1　DD2

の様な順番で表示させたいんですが、どのように書けばいいでしょうか？
適当にclassをつけていただいてかまいません。

すみません、最後の</dd>じゃなくて</dl>です。
あと、2組だけじゃなくて、さらに横につなげていきたい感じです。

>>520
518じゃないがそういう表現は出来るぞ？

全然をとてもや非常に置き換えると分かりやすいだろうし、
「とても」の部分を「少し」のような程度の違う文面と並べると分かりやすい

とても違う気がする
少し違う気がする

というように、程度の差が違っていると感じている様を表せるわけだな

いやおかしいだろｗ
全然違うと言えるレベルなら気がするなんて言葉は不適切
少しなら気がするはありえる

>>521
http://www.d-spica.com/designcatalog/list/list309.html

>>523
話がそれてくから本筋と関係ないところのフォローはやめれ。

>>521-522
floatとwidthをdt、ddにそれぞれつけてdlでclearして繋げればいいんじゃないか。
というかどう見てもそれじゃ表だし、tabl

tableってときどきイラっとくるけど、使える奴だと思うんだ。

テーブルレイアウトがダメって言ってるのに
テーブル自体がダメみたいに勘違いされてるよな

んだんだ

>>521-522
どうしてもこのソースを守らにゃいかんのだったら絶対配置かな。
でも内容量に対して柔軟じゃないし、おれも文章構造を見直してtableでいけるならそれが一番良いと思う。
___CSS___
dl {
position:relative;
width:300px;
height:4em;/* 後続要素にかぶらない程度に確保。可変ならJS使っても良い */
}
dt {
position:absolute;
top:0;
}
.dt1 {left:0;}
.dt2 {left:100px;}
.dt3 {left:200px;}
dd {
position:absolute;
top:1em;/* 適当にdtの分を確保 */
margin:0 0 0 0;}
.dd1 {left:0;}
.dd2 {left:100px;}
.dd3 {left:200px;}

>>521　BOXのサイズが決まってることを前提に
dl { width: 400px; }
dt, dd {
width: 195px;
height: 200px;
padding: 0;
margin: 0;
}
.dtL { background: #ffcccc; }
.ddL {
float: left;
background: #ff9999;
}
.dtR {
float: right;
margin-top: -200px;
background: #ccccff;
}
.ddR {
float: right;
background: #9999ff;
}

<dl>
<dt class="dtL">DT1</dt>
<dd class="ddL">DD1</dd>
<dt class="dtR">DT2</dt>
<dd class="ddR">DD2</dd>
</dl>

>>531
522を見ると、まだ横に繋がるってあるよ。
その場合もfloatで段組みできるかな。
漏れも考えてみる。

dl { width: 400px; }
dt, dd { width: 100px; height: 100px; padding: 0; margin: 0; }
.dt1 { }
.dd1 { float: left; }
.dt2, .dt3 {
float: left;
margin-top: -100px;
}
.dd2, .dd3 {
float: left;
margin-left: -100px;
}
.dt4 {
float: left;
margin-top: -100px;
}
.dd4 { float: left; }
.dt1, .dt3 { background: #ffcccc; }
.dd1, .dd3 { background: #ff9999; }
.dt2, .dt4 { background: #ccccff; }
.dd2, .dd4 { background: #9999ff; }

<dl>
<dt class="dt1">DT1</dt>
<dd class="dd1">DD1</dd>
<dt class="dt2">DT2</dt>
<dd class="dd2">DD2</dd>
<dt class="dt3">DT3</dt>
<dd class="dd3">DD3</dd>
<dt class="dt4">DT4</dt>
<dd class="dd4">DD4</dd>
</dl>

いくつでも出来るみたいだな。

左のdtは何もなし。
残りのdtはfloat: left; margin-top: -BOXの高さ;

左と右のddはfloat: left;
残りのddはfloat: left; margin-left: -BOXの幅;

と思ったらFirefoxでボロボロだったｗ

firefoxでボロボロなのはoperaでもsafariでもボロボロ
いい加減IEがマイノリティだと気づいて欲しいです

>>533-524
試してみた。
すげー
first-childだけ別のスタイルだから頭にだけclass付けとけば大丈夫かもな。
532だけど、勉強になりました！　ありがとう！

完成品
dl { width: 500px; }
dt, dd { width: 100px; height: 100px; padding: 0; margin: 0; }
.dtC, .dtR {
float: left;
margin-top: -100px;
}
.ddL, .ddR { float: left; }
.ddC { float: left; }
*+html .ddC { margin-left: -100px; } /* IE7 */
* html .ddC { margin-left: -100px; } /* IE6 */

<dl>
<dt class="dtL">DT1</dt>
<dd class="ddL">DD1</dd>
<dt class="dtC">DT2</dt>
<dd class="ddC">DD2</dd>
<dt class="dtC">DT3</dt>
<dd class="ddC">DD3</dd>
<dt class="dtC">DT4</dt>
<dd class="ddC">DD4</dd>
<dt class="dtR">DT5</dt>
<dd class="ddR">DD5</dd>
</dl>
ddのマイナスマージンはIEだけ必要なのでハックで対応

>>536
Firefoxざまぁ（笑）
http://japan.internet.com/busnews/20081003/11.html

海外のリサーチでこんな結果だから、
日本はもっと酷い数値80%超の逃亡率を達成してそうだね！＞＜

何度もすまん
<style>
dl { width: 400px; }
dt, dd { float: left; width: 100px; height: 100px; padding: 0; margin: 0; }
dt { margin-top: -100px; }
.dtL { float: none; margin-top: 0; }
</style>
<!--[if IE]>　←IEだけ読み込む条件付コメント
<style>
dd { margin-left: -100px; }
.ie { margin-left: 0; }
</style>
<![endif]-->

<dl>
<dt class="dtL">DT-L</dt>
<dd class="ie">DD-L</dd>
<dt>DT-1</dt>
<dd>DD-1</dd>
<dt>DT-2</dt>
<dd>DD-2</dd>
<dt>DT-R</dt>
<dd class="ie">DD-R</dd>
</dl>

これでdlの幅だけ注意すれば、中央にいくつdt,ddが入っても余計なclass付けなくて済む。

ほんとだ。シンプルに書くとIEは崩れるね。
結局、無理しないとダメか。

だから表使えと小1時間・・・

そもそもそこだよな。
tableかunordered list+hnとかにすれば無理はないし、本当に定義リストなのかが謎。

おまえunordered list言いたいだけちゃうんかと

定義リストも definition list にしろよｗ

tableかunordered list+hnとかにすれば無理はないし、本当にdefinition listなのかがmystery

どうして質問自体と関係無い事についてとやかくいわれないといけないのでしょうか？
非常に不愉快です！
聞いたことに対してだけ答えればいいのに。
こういう人は、日常生活でも関係無い事に口をはさんでウザがられているのでしょうね。

答えが欲しけりゃ金払えｗ

ところで>>521は>>541で解決？

>>547
IDか名前（レスNo.）出して言わないと
あんさんのレスもこのスレにとっては
他のとやかく言ってるレスと同じように感じまっせ〜
ヾ(´ー｀)ノ

>>547=521？table使えって言われて怒ってるのか？
>>543じゃないよな？質問もしてないし、文体も全然違うし。

てか、もう解決でいいだろ。

<button>タグってfocus使えないんですかね？

IEは無理

返信遅くなってすみません。

ブログを1カラムにして、サイドバー的な部分をページ下部に横に並べたいなと思っていて、
ダウンロードしたテンプレートのhtmlをいじらないで出来ないかなと考えておりました。
tableは違うかなーと思うので、dlではなくul+hnかulの入れ子を使った方が簡単そうですね。
htmlをいじってみようと思います。

>>531氏をはじめ、考えてくださった皆様、どうもありがとうございました。

>>553
ご回答ありがとうございます。
FireFox3でもダメでした。
hoverとactiveは効くのに。

<a>要素だと上手く出来たのですが・・・。

×FireFox
○Firefox

くだらん。

IEでform要素の文字のベースラインを一致させる方法ってないんですか？
label、input text、input buttonを横に並べると文字のベースラインががたがたになるんですが・・・
vertical-align: baselineは意味なし？

がたがた？
それ、input{margin:0;} なの？

なし

「プレステと略さずにPSと略してください！」といくら訴えたところで、プレステはプレステ。
「FFとか略さずにFxと略してください！」も同じこと。
くだらないこと言ってないで現実を受け入れるべき。
IEが標準だという現実をいつまでたっても受け入れない愚鈍さがこういう所にも如実に表れる。

>>559
それぞれの要素のスタイルはmargin、paddingとも0指定ですが、親要素にはmarginもpaddingもあります。
fontもfont-sizeもline-heightも指定された枠の中です。その外にも親要素があったりで、どのスタイルの
継承が原因なのかがわからないです・・・。
他のブラウザ（Firefox、Opera）ではきちんとベースラインが揃うのですが、IEだけがたがたになります・・・。
そうなってしまうのをリセットする意味でvertical-align: baselineがあると思っていたのですが残念です。

俺もIEは何がなんだかわからないからガタガタにしてる
ボタンの中のテキストが全部日本語だと上に寄るバグもあるし
どうしようもない

input使うときは＊でマージンもパディングも消しちゃ駄目

>>564
それだ！
でも、他のブラウザ対応で隠れmarginや隠れpaddingを簡単に対策しようと思うと*が便利なんですよね・・・
IEだと*でborderを消すとテキストボックスのインセットやボタンのアウトセットが回復できないので、*とIEに相性の
悪さは感じていました。
全廃してやってみます！
ありがとうございました。

Firefox3では適用されるフォントがIEだと適用されません。
Arialで表示したいのに標準のゴシック体で表示されてしまいます。
考えられる原因はなんでしょうか。

>>566
Arial指定してる？

>>567
font-family: Arial, sans-serif;
フォントの指定はこういう形になっています。

マージンの相殺について質問です
構成的には
・・・
h2見出し（1）
テーブル
h2見出し（2）

この様な感じで、h2にマージン上10px、テーブルにクラス設定でマージン上下10px、としております。
この状態でIE7だとマージンの相殺で全ての間隔が10px均等に開くのですが、
Firefox3では、テーブルと見出し（2）の間は相殺されず、20px開いてしまいます。
なぜでしょうか？

IEとFirefoxは解釈が違うからじゃ？

んだ。
解決法ならともかく、なぜと言われてもそれ以外答えられんがな。

言われたことしかできない無能の巣ですね

金さえ払えばいくらでもサポートするお＾＾

>>570-571
ありがとうございます。
少し書き方が悪かったようで、出来れば解決策を教えて頂けないでしょうか？

ちなみに、試してみたのですが
h2見出し（1）
P〜文章〜/P
h2見出し（2）

h2にマージン上10px、P要素にクラス設定でマージン上下10px、としました。
この場合だとどちらのブラウザでもマージンが相殺されて全ての間隔が10px均等に開くようです。
テーブルの場合のみ相殺されないようです。
よろしくお願いします。

pかh2どちらかをmargin:0;にし、paddingで余白を取る。
marginを上下に指定するのをやめて、上か下どちらか一方に統一する。
h2とpのあいだに何かを入れる。
pをmargin:0;line-height:2em;などにする。

上下どちらかに統一した方が無難だと思いますけどね。

tableはマージンの相殺が行われないなんじゃないかな？
古いIEにはdisplay:tableの概念がないから、
blockの時と同じように振る舞うのではないかと。。。間違ってたら指摘よろしく。
対応策は>>575に賛成。

>blockの時と同じように振る舞うのではないかと
ブロック要素だと相殺するんじゃないかな？
ｈもPもブロック要素だよね？
こちらこそ間違ったら指摘よろ

すまん。「古いIE」って書いたのがダメだったか?

IE = テーブルでも相殺する（display:tableの概念がない）
IE以外 = テーブルだと相殺しない
と言いたかった。

仕様的には相殺されるので、珍しくIEが正しい。

あるクラスを持った要素の子要素に適用するセレクタってどうすればいいですか？
table.sta > th,td
ではできませんでした。

それはIE未実装

子孫なら
table.sta th,td
でおｋなはずだが

「>」は子だから
table.sta > tbody > tr > th とかになる。

table.sta th,
table.sta td
だろ。

>>575-579
テーブルのマージン相殺ですが、display属性をblockにする事で相殺されるようになりました。
沢山のレスをくださり、みなさんありがとうございました。

！！
私も＊でボーダー消してます
border: none;
を指定しても、javascriptで参照するとborderXXXWidthに値が入るのが邪魔でそうしました
ただこれやるとfirefoxでフォームボタンの押したときのアニメーションが起こらなくなるので困ってました
＊でのスタイル設定は消すしかないですね・・・

>>581-582
これもIE未実装だったりしないよね?

お。ひとつ分かった。
table.sta th,td
だとすべてのtableに適用されちゃうね。
table.sta td
table.sta th
って別々に書けば良いみたい。

一つのタグに複数のクラスって指定できる？

できない。後ろが優先。

出来るよ！ブラウザが対応してるか知らん！
class="A B"

588
もとい、指定そのものはできる。
重複した指定は、後ろが優先。

ありがと。
クラスの継承とかできればいいんだけどね……。
あと、inveritも対応してないの多いよね。

<p class="a b c">

p.a {・・・}
p.b {・・・}
p.c {・・・}
p.a.b {・・・}
p.a.b.c {・・・}
とかできるよ！

inheritはIE7以前はほとんど全てのプロパティで非対応だね。対応してるのはunicode-bidiとか誰が使うのかよくわからんのだけ。

inheritって何も指定しなければinherit何じゃないの？
そういうことじゃなくてか？

textareaなんかの文字サイズにinherit使ってるよ！
IEだと何も指定しなくても継承してくれる。

<div style="font-size:12px;">
あああああ
<textarea style="font-size:inherit;">いいいいい</textarea>
</div>

http://www.estate-satei.com/
こんなしょうもないアフィサイトを作っているものですが、
IEではCSSが反映されるのですが、forefoxは無視されます＞＜
どうすればいいの？
おしえてちょっとエロい人！

無視されます＞＜

<<595
全角スペース消せばおk

forefoxだから仕方ない

あるラベルに対し、取り消し線を引いた上で、後ろに文字列を追加しようとしています。
具体的には、

<label class="obsolete">ファイルアップロード</label>

というHTMLと

.obsolete {
text-decoration: line-through;
}
.obsolete:after {
content: "(廃止)";
}

というCSSを作成しました。
ただ、この方法だと content: で追加した "(廃止)" という文字列にも取り消し線が引かれてしまいます。
取り消し線は "ファイルアップロード" の部分だけにして、"(廃止)" の部分には引かれないようにするいい方法はありますか。
なおできればHTMLの変更はせずに、CSSのみで対処するのが希望です。

>>599
.obsolete:after {
content: "</終了タグ>(廃止)";
}

みたいにすれば？

htmlいじってさえいいなら

<label class="obsolete"><span>ファイルアップロード</span></label>

.obsolete span{
text-decoration: line-through;
}
.obsolete:after {
content: "(廃止)";
}

>>600
その方法だと </終了タグ> がそのまま表示されてしまいました。

>>601
labelタグの中にspanタグを入れるのですか。なるほど。
HTMLを変更する必要がありますが、この方法が最善策のように思えます。
どうもありがとうございました。

IE非対応のことを考えると
spanを入れる手間が許せるなら、最善策はlabelの横に（廃止）を直接入れｔ

noneは効かないね
てか、Opera限定だと別の方法で打ち消し線なしにできることに気づいた

>>599
う〜んテキストはできなそうだね

同じ状況で私なら　(廃止)　って描いた画像を一枚用意して
content:URL指定で画像張るかも

>>600のが効かないのは、ブラウザのバグという理解でよい？
そんな気はするけど、よくわからない。

>>605
IEだと出ないよ
FireFoxで見てみるんだー！

いや、ごめんなさい、label:after{content: "</label>hogehoge"}ってやると
そのまま"</label>hogehoge"と、出るけど、
ただしくは、"</label>"と出るかわりにlabel要素はそこで終了して、
その後ろに"hogehoge"と出るんじゃないの？ってことです。
言葉足らずですいませんでした。

課題として『以下の文章をhtmlでマークアップし，cssでデザインせよ。』
と出されたのですが、これは、その文章をhtml,css両方で表現すれば
いいのでしょうか；；

今まで何聞いてたんだよ・・・

>>595
せっかく答えたのになぜ直さん

24ってリアルのタイトルとかでよく見かけるけど何ナノ?

宣伝だろ

背景画像が固定されていると表示が重いので
body{background-attachment:scroll !important;}
記述のユーザースタイルシートで解除しています。
大半のサイトはこれで大丈夫だったんですが
この記述が効かないサイトがあります。
どこをいじったらいいのでしょうか…
URLは書けないのですが
「essence　素材」でググって出てくるサイトです。

>>613
スタイルシートoffにすればいい

>>613
body以外の要素に対してbackground-attachment:fixed;
が定義されてるんじゃない？
CSSを表示してbackground-attachmentで検索。

>>597
どうもありがとうございました。
直りました。o(´▽｀*)/
>>610
すみません。対応遅れてしまいまして。
しーえすえすってデリケートですね。

>614
オフにすると見辛いとこもあるんで…
>615
確かにbody以外の要素に定義されてました。

#PAGETOP {position: relative;
background-image : url(cssbg2/le-3.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
background-position : 527px bottom;

こうなっていたんで
* {background-attachment:scroll !important;}
とか
html,body,#PAGETOP{background-attachment:scroll !important;}
どっちも試したんですけど効かないんです…どう記述したらいいんでしょう？

>>617
環境は？
漏れは普段ユーザースタイルとか使ってないから、
試しにFirefoxでStylishというアドオン入れてチェックしたけどちゃんと
上書きできてたよ。

background-position : 527px bottom;
で大きめの画像を敷いてたら、余程ディスプレイが大きくないと
結局はfixedに見えると思うけどね。

>618
WinXP　Duron1.10GHz、752MB（古いので動作がもっさり）
■sleipnir（バージョン　2.7.1）、
■IE7（バージョン 7.0.5730.13）、
■firefox（バージョン　3.0）Stylishアドオンで記述

で試したんですがそのサイトだけ効かないんです。
説明文はかなりスクロールするのに背景は固定のままでもっさり。
他のサイトは問題なく動くんで気になって気になって。
背景画像の大きさ自体は368×550だからそこまで大きくないと思うんですが。
でも618さんはFirefoxできちんと見られたみたいなんで
やはり私の環境が悪いのかな。諦めます。ありがとうございました。

>>619
サイト自体の作りによるけど、高さ550の画像が常に下揃えになってたら、事実上固定と一緒のように見せる事は可能だよ。
もちろん、解像度が2592×1944の画面で見てるなら話は別だが。。。
漏れは、あるサイトで試した時、ほぼ同じ状態で見えたよ。
でもFirebugでスタイルを見ると、ちゃんと上書き出来てる。
ただ、「表示が重いから」って理由だけなら、重くなきゃあきらめれば？

background-image: url()

に、絶対パスでURLを指定すると、外部ファイルでも読み込めます。
ですが、外部ファイルのURLやドメイン名が変更になった場合、
絶対パスで指定した箇所は全て変更しなくてはいけません。

一括で指定する方法はないでしょうか？(PHPのincldueのような

相対でいいじゃん

一括置換でいいじゃん。

ブログでCSSの編集をしたいのです。

困っている症状
タグやボタン操作をしていなくても、本文を入力してアップすると勝手に
センタリングになって表示される。

どこをどういじればいいのか分からず困っています。
よろしくお願いします。

text-align: center;があったら消すとか

text-align:centerを消せばいい

あらまぁ

>>625-626
ありがとうございます。
その語句があった部分は
・サイト全体　　　　・ヘッダー　　・ 中央エントリー
などあって、他はサイドバーのめにゅう項目なので割愛します。
関係あるのは中央エントリーでしょうか。

div#entry {
padding: 5px 20px 10px 20px;
text-align: center;
}

とりあえずバックアップとって自分で弄ってみなよ

セレクトボックス(プルダウン)に背景画像やtransparentは指定出来ないのでしょうか。

opacity使った方が簡単だよ。

olにlist-style-type:decimal;を指定して
桁数が増えても、IEだけマーカーボックスが移動してくれないんですが
どなたか解決方法わかる方いらっしゃいますか？

■こうなるはずが
1. テキスト
2. テキスト
10. テキスト

■こうなってしまう
1. テキスト
2. テキスト
10テキスト

↑テキストの位置がそろってしまう（ドットとテキストがかぶる）

どなたか教えてください〜！！

liのスタイルをリセットするのやめるか、2桁分のpaddingを確保

ttp://hamu86.web.fc2.com/reading/novel/ss/kanon/
ここみたいに文字を縦にしたいんですがどうすればいいんですか？

>>634
縦書きになってる訳じゃなくて文字サイズに対して幅が狭いだけ
詳しくはCSS開いて#titleとh1で検索

結果として縦書きじゃないですか。縦書き機能を使ってないから縦書きじゃないとか、
そんなの使う側からすれば、知った事じゃありません。縦書きになってれば縦書きです。
なんでそういう、どうでもいいような細かい所に突っ込みたがるのでしょうか。

どこを縦読み？

突っ込んでるんじゃなくて、解説してくれてるのにどうして文句を言うんでしょうか。
読解力が足りないんでしょうか。

>>547の臭いがぷんぷんするぜ

>>638
フォローありがとう！
>>634
言葉が足らなかったかもな。すまん
で、解決したの？

>>635さん
ありがとうございます。幅を狭めてるんですね。
css的にはアリなのかな・・・。

文字によってははみ出てるから、このスタイルをそのまま使うのは微妙だな
まあ、CSSは要素をどのように修飾（表示）するかを指示する仕様だからいんじゃね？
と、あまり軽はずみな発言をすると怒る人が出てきそうなので寝ます

widthをpxじゃなくてemで指定すればはみ出ないだろ。

等幅フォントで解決

フォントはPCによるからダメだよ
あ、自分さえ見れればいいんですね

これはひどい

質問です。
ページ全体のフォントサイズを90%にしたい。
ただし70%や80%のフォントも併用したい。

初歩的な質問かもしれませんがよろしくお願いします。

ページ全体のフォントサイズに対して％で指定すればよくね
70%にしたいところを77.77%
80%にしたいところを88.88%

>>646
bodyに90％指定
あとは647さんの通り

>>646
同じ%指定でもブラウザによってサイズが変わってしまうことがあるので注意。
詳しくは以下を参照
http://blog.d-spica.com/entry/070310fontsize.html

> 70%にしたいところを77.77%
これどういう意味ですか？
70%にしたいところを70% じゃダメなの？

bodyを90%に設定したいがclass(.table1)を80%に設定したいとき

body { font-size:90%; }
.table1 { font-size:80%; }

cssにこれを設定すると.table1は 80% / 90% になりますよね。
bodyは90/100 .table1は80/100に設定するには
cssにどのように書いたらスマートでしょうか？

算数初心者スレッドに行けばいいんじゃね

激ﾜﾛｽw

質問です。
padding-left:10px;
margin-left:10px;
position:relative;　left:10px;
では、どう違うのでしょうか。
paddingは背景込みで距離を取りますがposition〜でも同じですよね？
cssがスッキリする以外のメリットって何でしょうか。

全然違う分からないなら勉強しなおせ

>>654
まず、positionは位置。
そのサンプルだと、標準位置から左に10pxってことね。

paddingはボックス内の余白。全然別物。

marginは他のボックスとのスペース。positionで同じようにすることは出きるが、めんどくさいから試してみるといい。

ブロックのwidthを指定するとき、最大と最小って指定できませんか？
ウィンドウサイズが非常に大きくても一定よりは大きくならず、
ある範囲はウィンドウに応じて小さくなり、
ウィンドウを小さくしてもある一定より小さくはならない
ブロック要素を作りたいのですが

そこでネ申なのが
jsですよjs

>>657
左右フロートを包含するdivを使います
左+右＝希望する最低限のサイズを記入すればおk

腐ったIE6はどうでもいいから、max-width、min-widthでいいだろ。

そこでスペーサーGIFですよ♪

>>660
おまえは勝手に無視してりゃいいけど、まともなサイト管理者はIE6はまだまだ無視できないだろ

俺は有益なサイトを作って古いIEなんか使ってるやつに
バージョンアップを促したい
そう思っている

maxmin-widthくらいなら、別に表示されないわけじゃないから無視していいよ。
むしろウインドウサイズを閲覧者が調整できるにこしたことはない。

ボックス要素のwidthとpaddingって
IEはwidth＝表示領域+padding
Firefoxはwitdh＝表示領域
って解釈でよろしい？

IEとFirefoxみたいな区別やめてほしい
これからはIEとそれ以外って言ってくれ
IEの孤立感が際立つ

IEの変態仕様にあわせるために消費されるリソースを概算すると、
年間どれくらいの経済的損失になるのだろうか

ブロック要素をさらにブロック要素で囲んで、
親要素にwidth指定、子要素にmargin使えば、
ブラウザを選ばず同じ表示になる

しかしキモい方法だ

-moz-box-sizing
-webkit-box-sizing
-ms-box-sizing
box-sizing
全部border-boxにすればOK

質問しますね

IE7対策でフォントについてです
メイリオは表示させずにMSゴチを強制的に
表示させる方法ってありますか？

全てのユーザーに対して強制的にフォントを指定させる事は不可能

font-family:MSゴチ;

>>670
余計な事すんなと言いたい

>>673
ブラウザ指定のフォントで表示させたい奴は
余計なことされないようにユーザースタイルシート使うのが普通だよ

そもそもLinuxとかで見たらMSゴシックもメイリオも入ってないしな

>>674
実用上はそれで問題無いが、本来なら制作者側が注意してなんとかするべきことじゃないかと思う

レス�dです

ただねIE6ユーザーもいまだに50％健在だし
MSゴチとメイリオの文字幅の違いを考慮すると
微妙なズレが気になったんですよ
もちろんリキッドで作ってます
ここんとこ css > ブラウザ　って感じになってくれないかな

デフォルトでフォント指定してるブラウザ制作者側のことですね。

てか、VistaでもIE7のデフォは「MS P ゴシック」だったような。
どのみち「メイリオ」で見るにはユーザーが設定しないといかんし、
ついでにウェブのフォント指定を無効にするチェックボックスもクリックしてるだろ。
何したって無駄なのさ。

wordpressの事なんですが、CSS関連なので質問させてください。

本体バージョンが2.6.3
テーマがwp.Vicuna Ext（特にいじってない）
で、プラグインのwp-tmkm-amazonを使用すると、記事の左端に寄ってしまいます。
ただ寄るだけなら良いんですが、本来記事の左側に隙間が空くはずがピッタリとくっついてしまいます。
見た目が崩れるので直したいのですが、この場合はどの辺をどういじればいいんでしょうか？
よろしくお願いします。

モジラは丸角も表現できるんだな。
なんかIEが一人でネット活性化の足を引っ張っているような気がする。
マイクロソフトはIEのバグを治そうと思えばできるんだろうけど、
なんで放置したままなんだろうかね。

何を今更ｗ

IE8のことはご存じかな？

>>682
IE8はべつにイイヤ

>>683
IE8でバグ修正に取り組んでるのにその反応はねーよｗｗ

>>679
これってWordpressスレで聞いた方がいいでしょうか？

>>685
wordpressについて知らないと答えられないような質問をCSSスレで聞くのは適当じゃないと思う
このスレで質問するならURLを貼るとかソースを貼るとかしてCSSの知識で解決できる問題に落とし込んでくれ

プラグインと言われてもねぇ
空くはずってことはmarginなりpaddingなりあるってことだから
それを無視するってのはpositionくらいじゃないですかね？

ありがとうございます。
Wordpressスレのほうで聞いてみます。

「CSSでレイアウトしている為、IEでの正常な表示は保証できません」
って言う但し書きを入れても良いんでしょうか？

>>689
そんなやつはいない

俺は入れてる

個人サイトならおｋ
推奨するブラウザへのリンクも忘れずに

>>689
「私はヘタレです」と同じ意味なのだが・・・

>>689
個人サイトなら、好きにしてくれ。
プロなら「失格の烙印」を押されることになる。

初心者スレッドにプロは無いでしょｗ

まそうだけど、Web会社に勤める新入社員ってこともあるな。
この場合プロだけど初心者。

web製作会社は初心者なんか採用しない

ハックもスクリプトでの振り分けも出来るんだが
IEに迎合し続ける限り
MSはまともに取り組もうとしないだろうと思ってね

但し書きサイトが増えれば状況は変わ…らんか
ε-(ーдー)ハァ

>>698
名前打ち間違えた
>>698を書いたのは>>689です

もうちょっとニュースも見ましょうね
かなり時代から遅れてますよ

もしかしてIE8の事？
俺には地雷にしか見えん
ってスレ違いだね

お前の存在が地雷だよｗ

IE8が地雷というより
IEユーザーが地雷だろ
８がでても６とか使ってそう
っていうかアホな自称プロが
8で標準になったCSSについていけなくて
仕様を戻せとか吼えそう

んなアホな。
とは言い切れないのが恐いな。

そんなやつプロじゃないよ。

そもそもすべてのブラウザで
Webページが同じように表示されるなら
プロは必要とされない。ソフトで十分

その程度で必要なくなるのはただの代書屋だよｗ

IE6とか使ってそうだから、一応IE6でも見れるようにするんだろ。
切り捨てはあっても戻せはねーよ。面倒くさいのに。

人は俺のことを
代打ちの龍と呼ぶがなにか

携帯からすみません。
こちらで聞いて良いのか判らないのですが、質問させてください。

サーバ側の仕様でヘッダとフッタはフレーム固定されているのですが、自分が作ったサイトのメニュー部分を固定したいのですが、どなたか判られる方教えて下さい。
初心者なもので、うまく説明できずにすみません。
よろしくお願いします。

>>709
フレームを使ってやるんだとしたら、ここじゃなくて初心者スレ

よく､テーブルレイアウトは嫌われると聞きますが、
どう言う理由で嫌われるのですか？

CSS関係なす

日本は卓袱台の国だから

卓袱台を英語で言うとtableじゃないのか？

>>711
それを語っていた当時は、Linux使いのブラウザがtableに対応していなかったのと
パソコン及び通信回線が今より非力だったから。
今では両方が解消されたから好きなだけtableを使っていいんじゃないか。

そうでもないと思うよ。
改善されたとはいえＳＥＯには弱いし、そもそも本来の用法と違うんじゃない？

>>706
ググっても落語とかしかでてこないんだけど
ここで言ってる代書屋ってなんのことだ？

テーブルつかっちゃダメってのは
本来の用途と違うってのが一番だろうね。
まあ好きに使っていいよって言われても
position使ったほうが楽な気がするから使わんけどｗ

王様ですか ?

皇帝です

>>717
>>706が使い方を間違ってるだけだろ
代書屋ってのは司法書士や行政書士に対する蔑称
弁護士が代理権があるのに対し代理権がないのを言ったもの

本来の用途よりも、テーブルは中のもん全部読み込まないと表示されないのが大きいだろ。
今はサイドバーに広告やらガジェットやらべったべたの時代だぜ？
てか、カスタマイズしにくい。CSSじゃなくてHTMLだな。

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

>>711
未だにマンション関連のサイトはテーブルがっちがちのとこ多い
超大手ですらだよ

超大手はSEOなんて関係ないからな
どんな手法だろうが、見れれば良いというWEB制作者の考え
超大手はユーザーが最初から企業名で検索してくれるから楽だわ

divで３行２列のレイアウトを作ろうと
以下のように記述しました

<div>
<div style="width:30px;float:left;">
<INPUT type=checkbox CHECKED>
</div>
<div>
11
</div>

<div style="width:30px;float:left;">
<INPUT type=checkbox CHECKED>
</div>
<div>
22
</div>

<div style="width:30px;float:left;">
<INPUT type=checkbox CHECKED>
</div>
<div>
31
</div>
</div>

つづき

ＦＦ３では正常に表示されるのですが
ＩＥ７では２行目の１列目の左端が一行目の一列目の右端に配置され
その下の行も更にずれて表示されます
この現象は一列目の要素がinputの時だけ起こります
inputのtypeがtextの時もbuttonの時もずれました
単純なテキストの時はずれません
対処法をご存知でしたら教えてください

原因
FF：inputの高さ＜テキストの高さ
IE：inputの高さ＞テキストの高さ

対処法
高さをそろえる

>>727
仰るとおり高さを全て同じにしたらずれなくなりました
ありがとう御座いました

高さも何も次に続くfloatの前でちゃんとclearした方がいいと思います＞＜

positionをabsolute指定するとＩＥとＦＦでは表示位置が違うと思うのですが
これを解決するにはどうしたらいいですか？
よろしくお願いします。

>>730
もうちょい具体的にお願い
具体的にどうしたい？
HTML（XHTML）は標準モード？
対象とするIEのバージョンは？

>>731
説明不足ですいません
宣言はXHTML1.0　Tranditionalで
ブラウザはＩＥ６です

次のような構成で

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

<div id="footer">
</div>

「main」の中を二列にする為に
「left」「right」に左寄せとして「float: left;」と指定して

「left」「right」の中にテキストや画像などをいれて
プレビューしてみると

<div id="footer"></div>
の部分が

<div id="left"></div>
<div id="right"></div>
の下へ回り込んでしまいます

ＩＥでは特に問題ないのですが
サファリーだとこの様な問題が起きてしまいます。

高さなどを指定してやれば回り込む事はないのですが
ページ毎に高さなどの指定をしなくてはいけないので
改善方法があればよろしくお願いします。

footerにclearかけてないってことか？
それともmainの重なりを言っているのか？
main、left、right、footerの最低限のプロパティぐらい整理して書いとけよ。
そんなんだから、いつまでたってもサファリーなんだよ。

>>730
bodyのmarginを0にしてないとか？

>>734
bodyのマージンは0にしてます
どうしてもＩＥ６で見るとＦＦより１ｃｍ近く下に表示されるんですよね

positionの親要素がどうなってるかもわからんし、
それと同じ現象になる部分だけを抜き出して再現した
HTMLとCSS書いた方がよくね？

>>736
HTML
　<div id="album">
<ul>
<li><a id="photo01" href="#slide"><em><img src="img/photo01.jpg" /></em><span>○○○</span></a></li>
<li><a id="photo02" href="#slide"><em><img src="img/photo02.jpg" /></em><span>○○○</span></a></li>
<li><a id="photo03" href="#slide"><em><img src="img/photo03.jpg" /></em><span>○○○</span></a></li>
<li><a id="photo04" href="#slide"><em><img src="img/photo04.jpg" /></em><span>○○○</span></a></li>
<li><a id="photo05" href="#slide"><em><img src="img/photo05.jpg" /></em><span>○○○</span></a></li>
<li><a id="photo06" href="#slide"><em><img src="img/photo06.jpg" /></em><span>○○○</span></a></li>
<li><a id="photo07" href="#slide"><em><img src="img/photo07.jpg" /></em><span>旗の台5丁目</span></a></li>
<li><a id="photo08" href="#slide"><em><img src="img/photo08.jpg" /></em><span>西品川2丁目</span></a></li>
<li><a id="photo09" href="#slide"><em><img src="img/photo09.jpg" /></em><span>堀船4丁目</span></a></li>
<li><a id="photo10" href="#slide"><em><img src="img/photo10.jpg" /></em><span>領家</span></a></li>
</ul>
</div>

>>737
ＣＳＳ
div#album {
position: relative;
width: 796px;
height: 432px;
margin: 0 auto 1em;
background: #373737 url(img/bg_album.gif) no-repeat 230px 110px;
border: 1px #878787 solid;
}
div#album ul {
position: absolute;
top: 30px;
left: 12px;
width: 200px;
height: 355px;
list-style-type:none;
background: url(img/bg_title.gif) no-repeat 0 310px;
}
div#album ul li {
float: left;
margin: 0 5px 5px 0;
}

>>736

div#album ul li a,
div#album ul li a:visited {
display: block;
width: 80px;
height: 52px;
border: 2px #FFFFFF solid;
z-index: 50;
outline: none;
}
div#album ul li a:hover {
border: 2px #FF6600 solid;
outline: none;
}
div#album ul li a:active,
div#album ul li a:focus {
border: 2px #666666 solid;
outline: none;
}
div#album ul li a em,
div#album ul li a span {
display: none;
}

>>736
div#album ul li a:active em,
div#album ul li a:focus em {
position: absolute;
top: 0;
left: 198px;
display: block;
width: 540px;
border: 8px #E7E7E7 solid;
z-index: 50;
}
div#album ul li a:hover span {
position: absolute;
top: 317px;
left: 0;
display: block;
width: 170px;
text-align: center;
font-weight: bold;
font-size: 120%;
color: #C7C7C7;
z-index: 100;
}
a#photo01 {background:url(img/photo01_thumb.jpg);}
〜
a#photo10 {background:url(img/photo10_thumb.jpg);}
こんな感じです

そこまで徹底して再現しなくても・・・

縦横の幅指定してるクラスにmarginやpaddingを指定してるのが原因
IEは幅の解釈が違う

bodyのmarginが0とかいうcssどこよ？

とりあえず、div#album ul に margin:0; padding:0; を加えてみようぜ。

リンクが超高速で点滅してIE6が落ちたｗ

皆さん有難うございます
いろいろ試してみましたが、ダメでした
ちなみに位置がずれる部分は背景にしてる
background: url(img/bg_title.gif) no-repeat 0 310px;
この部分がＩＥだと下にずれ込むんです

うむ　見事な後出しだな。

>>746
ごめんなさい

>>745
ずれるのが背景だけなら、どうせno-repeatだし
最初から「0 310px」ずらした画像にすれば？

入れ子になっている任意の要素が表示されているかされていないかを調べようと思います。
上位要素のdisplayがnoneだったら、
それ以降の子孫要素は表示されないですよね。
ある要素が表示されているかされていないかを知るには、
トップのノードまで逆にたどっていき、
先祖のdisplay属性をすべて調べるしかないのでしょうか？
もっと簡単な方法があれば教えてください。

それくらい視覚的に判断できると思うが
Firebugでも使えば？

写真とテキストを配置するためのボックスについてなんですが、ボックスの幅はピクセル指定の固定で、
写真の下にいれるテキストの1行辺りの文字数を指定して自動で改行表示することは可能でしょうか？

<div>
<img 〜>
<p>テキスト</p>
</div>
divの幅はpx指定
pの幅はem指定

>>752
ありがとうございます。
pにemで文字数指定するコードも教えていただいてよろしいでしょうか？

blockquoteにmarginとpaddingで上下にそれぞれ余白を作りたいのですが、
指定するとFirefoxでは右に、IEでは左に1pxほどずれてしまいます
一応、ググってみてそれらしい解決方法を試してみましたがダメでした
何か解決する方法はありますでしょうか？

.picbox-01 {
width: 545px;
height: 700px;
float: left;
margin: 5px 0px 5px 0px;
}
このボックスクラスの中でだけPタグの1行の文字数を設定したいです。

こちらにあるサンプルを使ってサイトを作ってるんですが
リンクに関して判らないことがあります。
http://desperadoes.biz/style/p_frame.php
http://desperadoes.biz/cat/fw/set/site/pseudo/pink/index.html

こちらのサンプルは、リンク先が黒くて、下線が長いですが
通常のリンク先のように、青くて下線は文字の長さに合わせる
といったことは出来ないのでしょうか？

もし出来るなら、そのやり方をご教授ねがいます。

↓を（特に下から4行）カッコ良く、まとめられませんか･･･？　お願いいたします。




#menu {
background-image: url(img/menubg.gif);
font-size: 16px;
width: 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #cccccc;
}
#menu a:link { color:#FFFFFF; }
#menu a:visited { color:#FFFFFF; }
#menu a:hover { color:#0066FF; }
}

自決しました。

.picbox-01 {
width: 545px;
height: 700px;
float: left;
margin: 5px 0px 5px 0px;
}
.picbox p {
width:10em;
}

特定の要素タイプの子要素であるときにだけ適用されるスタイルを作ればよかったんですね。

>>756
width 指定

>>757
border-bottom: 1px solid #cccccc;

>>757
終点アンカーをa要素としてマークアップしないと決めれば

#menu a { color:#FFFFFF; }
#menu a:hover { color:#0066FF; }

でよいでしょう｡

>>758
安らかにお眠り下さい

>>761
コードどっか間違ってましたか？汗

自決した人間が喋ってる！おばけ！？

(ﾟДﾟ;)

>>759-760
先輩方、勉強になりました。ｱﾘｶﾞﾄﾃﾞｽ｡

>>759
＞width 指定
すいません。
2002や2008など、短い言葉によるリンク先なら
下線部を短くしても構わないのですが
長文のリンク先の場合　縦長になってしまいます。
どうしたらいいですか？

ようは、リンク先の文章にあわせて自動的に下線部の長さも決まるよう
して欲しいんです。出来ないですかね？

ヘッダー 左メニュー メインコンテンツ 右メニュー フッタ− とCSSで作ったのですが IE6でみると右メニューが入り切らないのか 下へいってしまいます 幅を狭くしても 変わらないので 他になにか原因ありますか？ IE7は正常にみえます

>>766
通常のリンクのように表示したいなら
スタイルシートのa部分を全部削除すればいいんじゃないの？

>>769
ほんとだ。ありがとう。

ちなみに、これが（今の）当サイトです。
http://red.ribbon.to/~donmai/
宜しければ来て下さい。
http://red.ribbon.to/~donmai/

すまん　同じアドレスを２つ貼ってしまった(´・ω・｀)

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

<table>
<thead>
<tr><th>ID</th><th>name</th><th>age</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>木下</td><td>14</td></tr>
<tr><td>2</td><td>田中</td><td>8</td></tr>
<tr><td>3</td><td>山田</td><td>22</td></tr>
</tbody>
</table>

Firefox3.03使ってます
テーブルにborderをつけたいのですが、右側だけborderがつきません
ttp://www2.vipper.org/vip985250.jpg.html
↑に症状を画像でうｐしました。
（IE7ではちゃんと線が表示されました）
どなたかご指摘・ご教授よろしくお願いいたします。

なんだよ、なんだよ・・・
俺はもう誰の質問にもまじめに答えないぞ・・・

クリックしたらリストが下にバーーーッと出て、
またクリックしたらリストが消えるhtmlをどなたかご存知ありませんか･･･??
探して試してもリストが消えなくて困ってます･･･

>>774
spryのブライドじゃないかな？

http://labs.adobe.com/technologies/spry/demos/effects/index.html

ってごめんそれじゃCSS関係ないね
775は忘れてください

う〜ん･･･やっぱりよくわからないんで、もう一度試してきてみます･･･;
返答ありがとうございました

普通にうｐすると、サーバーの広告が出てくるのに
スタイルシート（CSS）にすると
広告が消えてしまいます。どうしたらいいですか？

ちなみに、こちらにあるサンプルを使ってます
ttp://desperadoes.biz/style/p_frame.php

解決しました。

dreamwaeverでサムネイル画像をクリックするとリンクに飛ぶという基本的な部分で質問です。
Cssで画像に余白のピクセルを指定しました。
そしたら画像の余白の部分まで、リンクのクリック領域になってしまいます。
サムネイル画像のみにしたいのですが、どすればよいのでしょうか。

paddingをやめてmarginにする

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

どなたか>>772もよろしくお願いいたします

>>783
普通に表示される
本当に772のHTMLでテストしてないだろ？

余計なCSS外してみろ

DTDは何でためしました？
ソースはあれだけです。
xhtml1.0 strictですが、日によって正常に表示したり表示されなかったりしてます
グーグル先生で調べても解決方法がないです
ttp://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla%3Aja%3Aofficial&hs=Hy7&q=collapse+%E6%B6%88%E3%81%88%E3%82%8B%E3%80%80%E7%B7%9A&btnG=%E6%A4%9C%E7%B4%A2&lr=lang_ja

>>785
後出し情報でもちゃんと表示されるもんはされる

いいからちゃんと自分で最小限のHTMLで試せよ

>>772
昔からあるfirefoxの描画バグ

Bugzilla collapse

>>786の回答にフイタ

ここは初心者の質問場であるから初心者な回答者は不要なんだぜ

じゃあ、回答も質問もしない俺やお前は何者なん？

三波春夫でございます。

うー、まんこ！

IEの list-style-type:circle ってなんであんなにデカいんだろうな。

僕の奮起したオチンチンには負けるだろ。

幅が固定された後の方のブロックを絶対相対を使用して前というか左サイドに配置した場合に、
内容の量によってはフッターからはみ出す（金玉がパンツからはみ出すように）といった不具合も、
ちょっとした工夫次第で解消できるんだな。

まぁもちつけ
で高速でシコれ

誠に申し訳ありませんでした。
勉強しなおしてきてます。ごめんなさい

すいません、質問させてください。

2カラムで左にメニュー、右がメインでありながら
html上の記述はメインが先、メニューを後にしたいんです。

<div id="header"></div>
<div id="main">コンテンツ</div>
<div id="menu">メニュー</div>
<div id="footer"></div>


ttp://desperadoes.biz/style/dan/ にある
ttp://desperadoes.biz/style/dan/2-d.html の逆をしたいんですね。

#menu {
position:relative;
/* position:absolute; */
top:0px;
left:0px;
}

こんな感じで試したものの実現できておりません。

解説サイト、実際に動いているサイト、
アドバイス何でもかまいませんのでお助けを m(_ _)m

>>799
解説サイトはここがオススメ
http://desperadoes.biz/style/dan/

めんどいから止めとけ
実際それでどれだけＳＥＯの意味があるかも分からん

#main{
margin-left:150px;
}
#menu {
position:absolute;
top:○○px;
left:0px;
width:150px;
}

めんどいってrightをleftに変えるだけだろｗ

もっとごちゃごちゃとやらないと何かでひっかかったはず
忘れたけど

知ったかぶりかよ
反対にするだけなんだし、これでひっかかるなら
サンプルの右メニューでもごちゃごちゃとやらないとダメってことになるだろ

んじゃやり方だけ教えてあげよう
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/

>>ID:inTUPteO
positionレイアウトの質問なのにfloatで答えてどうするんだｗ
的外れなレスはやめれ

ポジションでやるのはよろしくない

記載順を無視した配置にするのはポジションの方が簡単。
しかしボックス幅が可変ならフロートも使う必要がある。

下記のような表があり、ヘッダ部を縦書きで表示し横幅をなるべく抑えたいと考えています。
しかし合計の列の幅がさほど縮まりません。どうすれば最小になりますか？

何に使うかというとですね、こういうのをJavaScriptで
大量に計算させて書き出し紙に印刷して仕事で使うものです。
HTMLとCSSなら段組とかもよろしくやってくれますが、ExcelではVBAを使用しても難しそうです。

<style type="text/css">
table {
border-collapse: collapse;
}
th {
writing-mode: tb-rl;
}
td, th {
border: solid 1px #999;
padding: 1px;
}
</style>

<table>
<thead><tr><th>合計</th><th>\100</th><th>\200</th></tr></thead>
<tbody><tr><td>13</td><td>8</td><td>5</td></tr></tbody>
</table>

２バイト文字の縦書きは幅を取るもんなんじゃね
「合計」をローマ字で書いたり、「SUM」とか「TOTAL」にすれば？
それか合計の列だけクラスつけて、widthで幅を決めるとか

>>808
可変でもポジションでできるだろ

>>809
そもそも縦書き表示なんてCSSじゃ想定されてない

縦ガッキーはcss3で提案されてるらしいよ。

>>811
>可変でもポジションでできるだろ

一般的なヤツは出来ん
ポジションは位置が固定されるのに可変（位置が動く）が出来る分けないだろ。

>>813
メインカラム可変のサイドカラム幅固定で２カラムも３カラムも簡単に出来るだろ。
これって一般的なヤツじゃないのか？

>>813
両サイドからのポジションが取れるんだから普通にできるだろ
何か勘違いしてね？

>>814
>サイドカラム幅固定

可変の話だぞ。馬鹿w

>>816
可変の意味を勘違いしてるだろ、全体で幅が可変なら可変レイアウトと言う
別にパーセント可変でも同じ事はできるから、どっちにしろおまえズレてるけどな

desperadoes.biz/style/dan/2-d.html の逆をしたいって話なんです＞＜

>>799>>802>>779

>>818
right :0;→left :0;
margin-right:150px;→margin-left:150px;

外部ファイルに「勝手にDLしてんじゃねーよ」と記入してますか？

>>820
してません

>>820
DLされたくなかったらULするなってことだ

>>817
誰が可変レイアウトの話をしている？
それに俺は「ボックス幅が可変ならフロートも使う必要がある」と書いているんだが。
自分勝手に話を進めるなよ。ボンクラw
したがってオマエの知ったかぶりは空振りw

>>823
ボックス幅が可変でもpositionで可能だ
いいかげん上級者スレに帰れ

もうそいつほっとけ

>>824
ポジションだけじゃ出来ないってw
話の流れすら読めないで何が「全体で幅が可変なら可変レイアウトと言う」だ（大爆笑
恥知らずw

それとな一般的には四分割されるんだぞ。
そして、それが細分化されていく。
それを右左だけで考えているチンパンは死ねw

なんでそんなに必死なん ?

自分だけ出来ないのが悔しいんだろう？

四段レイアウトは普通じゃないしポジションでできる
ヘッダフッタ中二段レイアウトでもポジションでできる
恥ずかしい奴だな>>Vw7PFygM

>>826
話の流れが読めない人が多いのは
単にオマエの日本語がおかしいせいだよ。

おまえらそいつで遊びすぎ

何にしろ最近は組むの楽になったな
昔はごちゃごちゃと面倒だった

一昨日、上顧客から急遽電話
簡単でいいから、Wordptessのデモデザインを至急提出いただけないですか、と

俺CMS苦手だから実はWordpressは
知っていたけどインストールもテストも何もしてなかった
2日間必死でやった
まぁPHPとcssと格闘したけど、カスタムデザインまでの状態で
いま仕上がった

まぁXoopsよりはファイル数少ないけど
カスタムまんどくせー
でも便利っちゃー便利そう
でもCMSは使わないしお勧めしないな

今度からそういうことはブログにでも書こうな。

h1のリンク色を変えたいのですが、うまくいきません

h1 a:link {color: #0000FF;}

上記のようにしておりますが、間違ってますでしょうか？

デフォと同じ色に設定してどうする

>>836
h1 a {color: #123456;}
これでもダメならソースか何か他に問題があるのではなかろうか？いやそうに違いない（反語

>>836
ひょっとして、指定した状態とは違う状態にあるリンクを見ているとか。

:link　　　未訪問
:viisted　訪問済み
:hover　 カーソルが乗ったとき
:active　アクティブなとき
:focus　 フォーカスされたとき

>>836
ちゃんと839の順番通りに記述してるか？

質問です、フッタのmargin-top指定が、IE7とGoogle Chromeで見え方が異なります。
どのように記述すれば差異を無くす事ができるでしょうか？

参考画像、左がIE7、右がGoogle Chrome
http://kissho.xii.jp/1/src/1jyou55411.jpg

以下フッタ周辺html

</div><!-- /left --/* 左枠 */>
<br style="clear:both;">
<div class ="foot">
</div><!-- /foot -->
</div><!-- /wrapper --/* primary-columnとsecondary-columnの回り込み */>
</div><!-- /baseline --/* コンテナ */>
</div><!--IE5センタリングバグ対応ここまで-->
</body>
</html>

フッタ部分CSS

.foot {
font-family:Osaka','MS UI Gothic','sans-serif;
font-size: 9pt;
color: #344434;
background-color:#74917c;
border-top:dotted 2px #344434;
margin-top:5%;
margin-right: 20px;
margin-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
}

関係ないことだけど、できることならフォントサイズのポイント指定は止めよう

多分、margin-top:5%;の解釈の違い
+マージンの相殺

ttp://www.techdego.com/2007/05/margin_collapsing_css.php
とか参照

あとは、margin css 相殺 でぐぐるときっと幸せになる

なんか恐ろしいhtmlだね。

どの辺が恐ろしいんだ？

>>841
クロームはβ
まだまだ仕様変更があるはず
そんな未完成のβに合わせて上手くいったとしても、
完成品が出てまた変更しなければならない可能性のある
質問はやめなさい

http://www.techdego.com/2007/05/margin_collapsing_css.php
言いたいことは分かるけど、
初心者にはちょっと分かりにくそうだね

レスありがとうございます、追記でFirefoxとoperaはクロームと同じマージン幅が空きます
IE7はmarginを35px以上にしてやっと空きます

margin css 相殺でぐぐって調べて色々試してみたのですが、
上下それぞれの要素のうち、大きい方のマージンが採用されるとあるのですが、
フッタの上の要素（Titlelist　OLD＞＞）のmargin-bottomは35pxもありませんし、
原因となる要素がさっぱりわかりません・・・
Firefoxとoperaは使っている人も多いと思うので、なんとか見た目が同じになるようにしたいのですが・・・

その記事のmargin相殺は関係ないよ。
clearをつけたbrの高さがIEで無視されてるのが原因だろ。
margin-topじゃなくて、フッタの前要素にpadding-bottomでpx余白つければいいよ。
それか、フッタを入れ子構造にしたり、空タグをつくってもいいなら
brじゃなくてdivでclearするとか。

<br style="clear:both;font-size:1px;">
てな風にclearしてるbrにfont-sizeを指定しても面白いかもしれん。

divでclearするとoperaでだけ反映されなかったので、
フッタのmargin-topを削って上要素にmargin-bottomを加えてみたら
やっと全ブラウザで同じ見た目になりました
brの高さがIEでだけ無視されているというのはさすがに気付けませんでした・・・
アドバイス感謝です、ありがとうございます！

http://cssdesign.s3.sitepoint.com/Art_Science_Of_CSS_Giveaway.zip

質問させてください。
これをCSSでやるにはどうしたらいいでしょうか？

<table cellpadding="0" cellspacing="0">
<tr>
<td background="bg01.jpg" width="50" height="50"></td>
<td background="bg02.jpg" width="500" height="50"></td>
<td background="bg03.jpg" width="50" height="50"></td>
</tr>
<tr>
<td background="bg04.jpg" width="50" height="50"></td>
<td>ここに本文</td>
<td background="bg05.jpg" width="50" height="50"></td>
</tr>
</table>

貴方がどんな風にしたのか先に書いてくださいな。

おんぶにだっこでは嘘書かれてもしかたがないよね ?

>>851
そもそもそれ自体がHTMLとしておかしいから何ともかんとも

>>851
はいどうぞ

/* ---CSS--- */
table { bordar: 0; }
td { width: 50px; height: 50px; }
td.w500 { width: 500px; }
#td1 { background: url(bg01.jpg) }
#td2 { background: url(bg02.jpg) }
#td3 { background: url(bg03.jpg) }
#td4 { background: url(bg04.jpg) }
#td5 { background: url(bg05.jpg) }

<!-- HTML -->
<table>
<tr>
<td id="td1"></td>
<td id="td2" class="w500"></td>
<td id="td3"></td>
</tr>
<tr>
<td id="td4"></td>
<td class="w500">ここに本文</td>
<td id="td5"></td>
</tr>
</table>

>>854
ありがとうございます。使わせて頂きます。
さらにそれをTABLEタグを使わずCSSのDIVだけでやることってできますか？

予想通りり展開だな。

>854 お手並み拝見といこうか。

>>855
ひとつ忠告しておくとTABLEタグは表を作る時のタグであって
レイアウトをする為のものじゃないぞ

なんでここで質問する奴はいつも後出しなんだｗ
最初に何がしたいか全部書いとけよ

つーか、縦横幅がガッチリ決まってるなら
画像を繋げて１つにするか、上下段の２つにした方がすっきりするだろ