CSS初心者スレッド＝6th＝

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

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

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

《前スレ》
CSS初心者スレッド＝5th＝
http://pc11.2ch.net/test/read.cgi/hp/1228900036/l50

【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

>>1
<h1 id="otsu">乙</div>
#otsu {background:url(otsu.gif);}

【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を待ちませう。

1乙

さて議論はまたつづくよー

>>1乙

他人のせいにして擦り付けるタクトが一番の元凶

もうポナの話題はいいっての…

すいません、書き込めなくなってしまったので
どなたか代わりにFAQ書き込んで頂けませんか

【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

: Name_Not_Found Mail: sage 投稿日: 2008/12/10(水) 18:09:51 ID: ???
【参考】
　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

>>1>>11-13乙

<div style="margin: 0px auto 0px auto">
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
としても、4つのディブ要素がセンタリングされません。
どうしてでしょうか。
IE6とGoogleChromeで見ました。

>>2 Q2参照

※brを使うなとか押し付けない。
※それに対する議論は荒れるので禁止。

議論することは間違ってはないだろ
なぜbrをすすめるのか、また、なぜbrを使うのかを明確にすればいいだけのこと
ただbrがいいからとか、brなんて使いたくないなんて感情論は必要ないってこった

あーあ

>>17　もう書き込むなよ

それ以前にbrの話題はスレ違い

>>17
お前が書き込まなきゃ議論は起きないと思うよ

>>18
brを使う事自体は禁止されている事ではないし、大半のサイトで使われている。
使う使わない個人個人の考え方の違いであって議論して結論が出るとも思えない。

>>22
なぜbrをすすめるのか、また、なぜbrを使うのかを明確にすればいいだけのこと
ただbrがいいからとか、brなんて使いたくないなんて感情論は必要ないってこった

なぜbrをすすめるのか、また、なぜbrを使うのかを明確にすればいいだけのこと
ただbrがいいからとか、brなんて使いたくないなんて感情論は必要ないってこった

なぜbrをすすめるのか、また、なぜbrを使うのかを明確にすればいいだけのこと
ただbrがいいからとか、brなんて使いたくないなんて感情論は必要ないってこった

なぜbrをすすめるのか、また、なぜbrを使うのかを明確にすればいいだけのこと
ただbrがいいからとか、brなんて使いたくないなんて感情論は必要ないってこった

なぜbrをすすめるのか、また、なぜbrを使うのかを明確にすればいいだけのこと
ただbrがいいからとか、brなんて使いたくないなんて感情論は必要ないってこった

なぜbrをすすめるのか、また、なぜbrを使うのかを明確にすればいいだけのこと
ただbrがいいからとか、brなんて使いたくないなんて感情論は必要ないってこった

>>22
お前が書き込まなきゃ議論は起きないと思うよ

>>23
単なる感情論じゃなくて考え方と価値観の違い。

>>25
お前は考えてもないし価値観も持ってないで単にかき回したいだけだろ

という事でこの議論は終了。

僕みたいな初心者からすると混乱するからどっちか決めて欲しいです

>>28
そんな事まで他人任せにするな。

改行のためのbrは連続してなければ使っても文法違反にはならない。
これを嫌うのは趣味の問題で他人に押し付けるようなものではない。

それを感情論というのだよ
brを使うメリットとデメリットを示してからそういうことを言いたまえ

>>29-30
タクトは巣に帰れ

>>31
お前もだ

みんなで帰ろうよ

W3Cの公式サイトでも普通にbrは使われてるんだから好きにすればいいべ。

>>15

w　　　　　　　　　　　i　　　　　　　　　　　　　d　　　　　　　　

　　　　　　　　　　　　　　　t　　　　　　　　h　　　　　　　　指　　　　　　定　　　　　

　　　　　　　　　　　　　　　　　　　　し
　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ろ

どちらでも好きにしろってのは感情論じゃないよ。
「どっちも許されてるが俺がこう思うからこうすべきだ」ってのが感情論。

文法違反は承知でbr連続で使ってる。br連続ってそんなに悪かなぁ？
まぁ仕事だったらできないけど。

タクトが悪でFA

>>38
改行してもう一つbrってのはよくやるよね。
ブラウザによってはbrを一つにまとめて解釈するものがあるとか言ってたけど。

>>40
自作自演してんな

ポナはbrが大好き

>>38
それはテーブルをレイアウトに使ってるのと同じで
タグをレイアウトに使うのは今主流（？）のやり方ではない。

レイアウトはCSSで切り離しましょうってのが今の主流で
それだと連続改行でやるような文章と文章の間のスペースは
マージンで指定するルールになってる。
理由はいくつかあるけどとりあえず
連続改行すると無視されるブラウザもあるから
使わない方がいいらしい。

実装の話はどうでもいい
HTMLの話はもっとどうでもいい
自作自演消えろ

>>43
ブログのコメント欄などに投稿する時に一行間隔をあけたいのですが
そのときはどうすればいいですか？

>>45
ブログのレンダリングなんて仕様書に沿ってないんだから気にするだけ無駄

>>>46
仕様書そのものをあまり気にしないようにします。

>>47
それが言いたかっただけだろ
ブログのコメント欄が準拠してないから仕様書放棄ってなんの屁理屈だよ
そもそもブログしかやんねーんならこのスレに用はねーだろあほか

>>45
俺が作ってるスクリプトだとコメントの\n\nは</p><p>に置換するようにしてるな
使ってるそのブログのコメ欄に不満あるなら自分で組めばいいんじゃない？

>>49
仕様書を気にしない方をせんたくします。

>>50
>>43に噛み付きたかっただけだろ
そもそも仕様書読んだこともねえくせにネガキャンしてんじゃねえようぜーな

>>51
仕様書を読んだ事がない人間が仕様書を気にしても仕方がない事に
気がつきました。

タクトマジ師ねよ

和訳だけ読んで「俺、仕様書読破したから」とか自慢げに言ってるけど
原文読まないと意味ないんだぜ

>>54
・なんで和訳だけだと思い込んでいるのか。
・どこに自慢げなやつがいるのか。
・原文じゃないとなぜ意味がないのか。

流行ってる映画の原作かなんかと混同してねえか？
ただしけりゃそれこそ口語体でかかれてても問題ねえぞ

・なんで和訳だけだと思い込んでいるのか。
そいつがバカだから
・どこに自慢げなやつがいるのか。
タクトだから
・原文じゃないとなぜ意味がないのか。
日本語訳は素人がやったものの上、ニュアンス的に日本語では難しい部分もあるので
きっちりしたいときは原文を当たらないと駄目

>>56
> ニュアンス的に日本語では難しい部分もあるので
具体的にどれだよｗｗテキトーこいてんじゃねえｗｗ

html文書なら文法の揺れがあるけど、cssの仕様書で「ニュアンス的に日本語では難しい部分」なんてあんのか？
そもそもニュアンス的に日本語では難しい部分を日本語文書で扱うことなんてないだろ

>>58
＞ニュアンス的に日本語では難しい部分を日本語文書で扱うことなんてないだろ

え？え？え？え？え？

和訳は原文に沿って翻訳されているとは限らない
有名な和訳サイトで３点原文と和訳で意味の違いがある個所があるがそれもわからないなら
一人前に語ってんじゃねえぞｋｓ

>>57-59
Fxフォーラムとかで日本語スレッドでもなんで原文を引用されるのか考えてみようぜ
どうせポナにゃ英語なんて読めないだろうけど

英語が読めない奴って致命傷だな
最新技術が出ても和訳が出てこない限り読めないんだもんなｗｗｗｗｗｗｗｗｗｗｗｗ

最新技術が日本から出た場合の外国人の方が可哀想

スレの趣旨と関係ないところで荒れてるな

むしろ日本の技術なのに英語で論文を提出しなきゃならないのが理不尽

footerの背景画像を設定すると、画像の枠線が消える
んですがどうすればいいでしょうか？

widthもheightも少し大きめに設定したり100%で指定してもうまく表示されません。
borderで1px solid #333とかでやると表示されるのですがborderは使わない方向で
なんとかしたいです。

┌─┬─┐
│�@│　 │
├─┤�B│
│�A│　 │
└─┴─┘
floatでこんな感じの段組をしたいんですが、どうも上手く出来ません。
どう指定したらいいんでしょうか？

１と２をdivで囲んでそれと３とで２カラムにする

>>67
そんなもん普通の2カラムの左に�Aぶち込めば済むだろ

>>68
divはできれば増やしたくないのですが。
>>69
┌─┬─┐
│�@│　 │
└─┤�B│
　 　 │　 │
┌─┼─┘
│�A│
└─┘
こうなります。

divくらい気にするな
何も変わりはせん
まともに出来ないのに細かいこと気にするな

一応先に�Bにrightを指定してから残りにleftを指定すればdivを増やさなくてもできるんですが、
スタイルシートを読めない環境では数字順に表示して欲しかったので他の方法を聞きたかったのですが、無理なようですね。

１，２，３の順番で書くなら１と２を分けなきゃいいだろ

#a{float:left;}
#b{clear:both}
#c{float:left}

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

＞無理なようですね。

この受け身な態度が気に入らない

>>73
勿論理由はあります。
>>74
駄目っぽいです。
>>75
そうですね。

div aのなかにdiv bも含む

>>76
後出しジャンケンはやめろ

>>78
いえ詳細を聞かれても困りますが。
HTMLレベルで代替手段を講じて欲しいのではなく、あくまで質問は>>67です。

topとかbottomで場所を指定してしまうのは？

>>79
なぜdivを増やしたくないのか意味がわからない。
divでくくるのが正攻法だと思うが。

>>80-81
そういった手段しかなさそうですね。了解しました。

絶対配置は考えてないわけか

レイアウトをTableでガチガチにするのもダサイって言われますが
positionでガチガチにするのもどうかな…って思うのですが

positionでガチガチに固めるのって平気ですか？

ここなんかはpositionでガチガチにしてますが
http://www.checkpc.go.jp/simulation/index.html

すみません、>>84は私でこういった者です

>>84
こういった者ってあんた誰？

いやID出しただけだろう

多くのブラウザに対応してるんなら別に構わないんじゃね
完全にフラッシュでできてるサイトだってあるんだし

>レイアウトをTableでガチガチにするのもダサイって言われますが
初耳です。テーブルをレイアウト目的で使うのは止めようよってのはあるけど

>>84の例はほぼ全てを画像化しているから、
ポジションで位置指定でもいいんじゃないの

見た目に問題なければ何でもいいよ

>>84
どっちもダサいよ
テーブルよりはマシという程度

取り消し線 <del> を使って取り消し線を引こうと思うのですが
文字色を変えることなく線の色って指定できますか？
もし指定できるのであればアドバイスよろしくお願いします。

>>91
無理

>>92
やっぱりそうですよね、ありがとうございました。

取り消し線とかさむいからやめとけ

取り消し線は重要
使い方も意味もわからない>>94（爆笑

上から画像重ねればいいじゃん

字も隠れてしまいました。

ってのが来そうだな。

<style type="text/css">
body{margin: 15px 10px; font-size:12px;}
a:hover{color:red;}

.border{width:160px; border:solid 1px;}
.border p{padding:5px; text-align:center; color:white; font-size:13px; font-weight:bolder; background:black;}
.border ul{margin:0 0 0 0; padding:0 0 0 17px; list-style-image:url("marker.gif"); border:solid 1px;}

</style>

<body>
<div class="border">
<p>メニュー</p>
<ul>
<li><a href="">a</a></li>
<li><a href="">b</a></li>
<li><a href="">c</a></li>
<li><a href="">d</a></li>
<li><a href="">e</a></li>
<li><a href="">f</a></li>
<li><a href="">g</a></li>
<li><a href="">h</a></li>
<li><a href="">i</a></li>
</ul>
</div>

とするとメニューの下になぞの改行？が発生してしまいます。
なぜでしょうか？

<li><a href="">a</a></li><!--
--><li><a href="">a</a></li>

こんなかんじで作ればおｋ

<p>メニュー</p>のこと？
だとしたらpのマージン殺してないせいだろ

margin:0 0 0 0; (笑)

>>99
やってみましたが直りませんでした

>>100
どうやって<p>のマージンを殺せるんですか？

css 初期化　でググれ

DWで写真の枠をマウスオーバーで変化させるには
どうすればいいでしょうか？

>>100
ulのマージンは殺せてるのに何言ってる

>>104
DWスレ行け

>>100じゃなかった>>102宛

h1の後ろに色付きの文字を表示させたいのですが、
content afterで追加した文字にスタイルシートを適用させることは可能でしょうか？

こんな感じでできたらいいのですが
h1 :after {content: "<span style="color:#ff0000">text</span>";}

>>107
h1:after {content: "text";　color: #ff0000; }

>>108
ありがとうございます！最高です。

div p {
　color : red;
}

というスタイルがある時、

<div><p>あいうえお<b>かきくけこ</b>さしすせそ</p></div>

とすると、かきくけこの部分が赤くなってくれません。
スタイルが指定されたタグに囲まれていても、そのスタイルは継承されないのでしょうか？
こんな時に一つ一つスタイルを付け足していくのは大変なので、継承されると嬉しいのですが、
何か方法はありませんか？

>>110
div p, div p * {

突然ですみませんが　ＣＳＳの設定でスプレーをインポートして画像を選択すると
スプレー画像ファイルの書き込みに失敗しました。現在のユーザーが許可されていない可能性があります。
という風に出て　スプレーを登録することが出来ません。解決方法教えてください。

>>112
ソフトの話なら専用スレへ

>>112
スプレーってSpryフレームワークのことだよな？

http://pc11.2ch.net/test/read.cgi/hp/1213772400/

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

ヘッダーが全く指定できないHTML自動制作ソフトを使って仕事をしておりますが、
仕事仲間が一部分(テーブルに分かれた2文)のフォントを小さくするために、
下記のCSSを、本文中<body>〜</body>内に埋め込んで指定しています。

<style type="text/css">
<!--
.style2 {font-size: 10}
-->
</style>

私は、CSS勉強中ですが、どのサイトをみても「<HEAD>内に記述」と書いております。
フォントサイズも10のみもおかしいと感じましたが、
ブラウザーでは普通に動くので、この記述で良いのかどうなのかがわかりません。
このまま見習ってもよろしいのでしょうか？

私的には、ヘッダーが触れないなら、無理にCSSを使わなくても、
<font>タグでもよいのでは？と思うのですが、勉強不足であまり自信がありません。

よろしくお願いします。

>>116
なにがしりたいの？

>>116
の指定方法があっている、指定方法は正しい、
このまま見習って使っていっても良いのか、、
的な事が知りたいです。

>>118
> の指定方法があっている、指定方法は正しい、
> このまま見習って使っていっても良いのか、、
> 的な事が知りたいです。

font要素を使うよりはマシ、程度
style1のような指定の仕方など見習う価値はない

そうですか…。
fontタグを使うよりも、<body>内に<style>記述した方がマシなのですね

その逆と思っていた私としては少し残念な気がしますが、
やはり勉強不足なのですね…

>>120
span要素使ってそこに仕込めば？つかCSSの質問じゃねーぞそれ

!CSSの質問ではないのですか？　すみません；

その人のソースは下記のような記述なのですが、、
<style type="text/css">
<!--
.style2 {font-size: 10}
-->
</style>
<table style="font-size:12px; text-align:center">
<tr>
<td><span class="style2">****<br></span>
</td>
<td><span class="style2">****<br></span></td>
</tr>
</table>

>span要素使ってそこに仕込めば？
こういうことでしょうか？？↓↓↓↓↓
<span style="font-size: 10px;">***</span>

>>122
要点は、「body要素内にstyle要素を入れてスタイルシートを指定するのを見習うべきか」なんだろ？
その内容ならWEB制作初心者スレの内容と思うよ

ありがとうございます！
では、そちらのスレッドに質問をしてみます！

style2（笑）

まあ表示に問題はないわけだがネーミングが最悪だな。

css1、css2、css2.1、css3別にプロパティをリストにして入力補完用に使いたいのですが
どこかにこのように分けられてるサイトありませんか？

質問です。
プニルとIE6で動作確認の取れたcssが、IE7でだけ動作しません。
下記のような記述になっているのですが、この中にIE7でだけ問題を起こす（もしくは対応してない）内容があるのでしょうか？

td.menu1{
background: #ffdddd url(image/menu_bg_r.png) repeat-x left center fixed;
color: #0044bb;
border-style: solid;
border-color: #666666;
border-width: 1px 1px 1px 1px;
font-weight: bold;
padding: 5px;
}

ちなみに、IE7で見るとセルの背景画像が表示されず、背景は#ffdddd一色になっています。
それ以外の部分（文字・枠線の色や、paddingなど）はちゃんと反映されているのですが…。
もちろん下層フォルダimageの中に、該当の背景画像ファイルはあり、IE6ではちゃんと表示されています。

IE7とcssでググっても、ハックのことしか出てこなくて、
具体的にどの要素がIE7に対応してないのか、などを記載したサイトがあっても、
<td>に背景画像が使えないなんてことは載っていませんでした。当たり前ですが。

修正すべき点や、IE7に対応したcssの書き方（ハックの記述方法ではなくcssそのもの）を
載せたサイト等があれば教えてください。よろしくお願いします。

background: #ffdddd;
background-image: url(image/menu_bg_r.png) repeat-x left center fixed;

というよりなんだこれは

border-style: solid;
border-color: #666666;
border-width: 1px 1px 1px 1px;


border: solid 1px #666;

fixedがいらない

>>128>>130
ありがとうございます。
早速試してみます。

>>129
それは、menu1ではborder-widthが全て1pxですが、menu2や3では上下左右で太さが変わったり、
別の外部cssファイルではmenu1も上下左右で太さが違うものがあるので、統一を取るためにそうしてあります。

>>128と>>130に例示していただいた通りに修正してみたのですが
やはり背景画像が表示されません…

画像のファイル名を変えてみたり、同じフォルダにうつしてみたりと
色々試しましたが、やはり背景画像だけが表示されず、途方にくれております。

他に考えられる原因や対処法はありませんでしょうか？

>>132
tableやめてliにするとかはダメなのか？

>>133
んー…今回質問させていただいている部分は、上部メニューバーを構成する、
tableのtdタグに適用しようと思っているのですが、同じ形のものがliでも作れるのでしょうか？

ちなみに、該当のtable部分は下記の通りになってます。JavaScriptっぽいのも混じってますが。
後出しの上に、すっごい醜くてすみません…。

<TABLE ALIGN="center" WIDTH="600" CELLSPACING="0" CELLPADDING="5"><TR>
<TD WIDTH="200" CLASS="menu1" ALIGN="center"
onmouseover="this.style.background='#ff8888 url(none) repeat-x left center fixed';this.style.cursor='pointer';this.style.color='#ffffff'"
onmouseout="this.style.background='#ffdddd url(image/menu_bg_r.png) repeat-x left center fixed';this.style.color='#0044bb'"
onclick="window.location.href='kojin.htm'"><NOBR>メニュー１</NOBR></TD>
<TD WIDTH="200" CLASS="menu2" ALIGN="center"
onmouseover="this.style.background='#77cc77 url(none) repeat-x left center fixed';this.style.cursor='pointer';this.style.color='#ffffff'"
onmouseout="this.style.background='#ddffdd url(image/menu_bg_g.png) repeat-x left center fixed';this.style.color='#0044bb'"
onclick="window.location.href='kigyo.htm'"><NOBR>メニュー２</NOBR></TD>
<TD WIDTH="200" CLASS="menu3" ALIGN="center"
onmouseover="this.style.background='#8888ff url(none) repeat-x left center fixed';this.style.cursor='pointer';this.style.color='#ffffff'"
onmouseout="this.style.background='#ddddff url(image/menu_bg_b.png) repeat-x left center fixed';this.style.color='#0044bb'"
onclick="window.location.href='gakko.htm'"><NOBR>メニュー３</NOBR></TD>
</TR>
</TABLE>

また後出し・・・('A｀)
JSが悪さしてんじゃねーの

>>134
原因はJavaScriptっぽいな。試しにFireFox3でやったらダメだった。

すみません。質問があります。
下のようなレイアウトを作ろうとしています。
■header、□side、▲content、△content2、●footer(底辺固定)、☆sidebar(縦100%)
レイアウト全体はセンタリング

■■■☆
□▲▲☆
□△△☆
●●●☆

☆sidebar無しのfooter固定は↓のページで実現したのですが、☆sidebarを上手く入れる事ができません。
http://www.cssstickyfooter.com/
http://www.cssstickyfooter.com/using-sticky-footer-code.html

footerが底辺固定（サイズ変更しても上の□▲△とは重ならない）、sidebarが縦100%になればいいのですが、
footerの下で☆sidebarをfloat:rightしてもfooterのさらに下に配置されるだけです。

何か方法あるでしょうか？

html、cssを下に書いておきます。

<html><head><title>フッタ固定、サイドバー縦100%</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">/***** http://www.cssstickyfooter.com *****/
* { margin:0; padding:0;}
body * { margin:1px; border: 1px solid red;} /* デバッグ用 */
html,body,#wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 50px; /* footer高さと同値 */}
#footer {position: relative; clear:both; height: 50px;
margin-top: -50px; /* footer高さと同じマイナス値 */}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix { display: inline-block;}
* html .clearfix {height: 1%;}/* Hides from IE-mac */
.clearfix { display: block;}/* Hides from IE-mac */
#side { width:100px ; float:left;}
#content, #content2{ width:500px; float:right;}
#wrap,#footer { width: 650px;}
#container { margin:0 auto; width: 800px; height: 100%;}
#sidebar { float: right; height: 100%; width: 100px;} /* これだとfooterの下に配置される */
</style></head><body>
<div id="container">
<div id="wrap">
<div id="header">■■■Header</div>
<div id="main" class="clearfix">
<div id="side">□□□side</div>
<div id="content">▲▲▲content</div> <div id="content2">△△△content2</div>
</div><!-- //main --> </div><!-- //wrap -->
<div id="footer">●●●footer</div>
</div><!-- //container -->
<div id="sidebar">☆☆☆sidebar</div> <!-- 右側に縦100%で入れたい-->
</body></html>

読む気も起きんな・・・

>>139
すみません。３２行に収めようとしたので・・・
貼りなおします。

<html>
<head>
<title>フッタ固定、サイドバー縦100%</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
/***** http://www.cssstickyfooter.com *****/

* {
margin: 0;
padding: 0;
}

body * { /* デバッグ用 */
margin: 1px;
border: 1px solid red;
}

html,body,#wrap {
height: 100%;
}

body > #wrap {
height: auto;
min-height: 100%;
}

その２

#main {
padding-bottom: 50px; /* footer高さと同値 */
}

#footer {
position: relative;
clear: both;
height: 50px;
margin-top: -50px; /* footer高さと同じマイナス値 */
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

* html .clearfix {
height: 1%; /* Hides from IE-mac */
}

.clearfix {
display: block; /* Hides from IE-mac */
}

その３

#container {
margin: 0 auto;
width: 800px;
height: 100%;
}

#wrap,#footer {
width: 650px;
}

#content, #content2{
width: 500px;
float: right;
}

#side {
width: 100px ;
float: left;
}

#sidebar {
float: right;
height: 100%;
}
</style>
</head>

<body>

その４

<div id="container">
<div id="wrap">
<div id="header">■■■Header</div>
<div id="main" class="clearfix">
<div id="side">□□□side</div>
<div id="content">▲▲▲content</div>
<div id="content2">△△△content2</div>
</div><!-- //main -->
</div><!-- //wrap -->

<div id="footer">●●●footer</div>

</div><!-- //container -->

<div id="sidebar">☆☆☆sidebar</div> <!-- 右側に縦100%で入れたい-->

</body>
</html>

以上です。
よろしくお願いします。

ソースがあれすぎて・・・

<div id="container">の中にサイドバーを入れるんだろ？
なのになぜか外になっているのが原因。

>>145
containerの中に入れても上手くいかなかったのです。

でも解決しました。
container とsidebarを丸ごと囲むようにdiv追加したら上手くできました。
お騒がせしてすみませんでした。

>>146
後はdiv減らす努力をしようね

中のマークアップをちゃんとやってりゃおｋ

こんなふうな、divでかこまれたエリアの中にあるdivが、
自動で改行されないようにするにはどうしたらいいでしょうか？？
<div id=body>
 <div class=A>
   12345
 </div>
 <div class=B>
   67891
 </div>
</div>

周辺のレイアウトに影響を出さずに、1234567891となってほしいです

よくわからんが初心者の俺の考えではこれでいけるはず。

#oppai1 div{float: left; /* 回り込ませる */}
#oppai2{clear: both; /* 回り込みを解除 */}

<div id="oppai1">
<div>(　ﾟ∀ﾟ)o彡゜オッパイ！１２３！</div>
<div>(　ﾟ∀ﾟ)o彡゜オッパイ！４５６！</div>
</div>
<div id="oppai2">(　ﾟ∀ﾟ)o彡゜オッパイ！オッパイ！</div>

何がしたいのか分からないけどこれでも同じことが再現できるはず。

<div><span>(　ﾟ∀ﾟ)o彡゜オッパイ！１２３！</span><span>(　ﾟ∀ﾟ)o彡゜オッパイ！４５６！</span></div>

>>149

<span>が自然だと思うけどdiv使いたいならインライン表示に変更するのも手

<style>
.A, .B{ display: inline;}
</style>

ただ上もspanも「<div class=A>12345</div><div class=B>67891</div>」 のように
改行を取り除かないと「12345 67891」と間が開いてしまう。

>>150>>151
ありがとうございます！
出力されたHTMLを扱うのでSPANにすることができませんので
最適な方法を探してみます。助かりました

見事な後出しだな

tableレイアウトからcssレイアウトへの移行中です
サイトの一番上に、サイトロゴとヘッダーメニューを表示しているのですが、
ロゴを左寄せに、メニューを右寄せに表示したいのに、うまくできません。

元のタグ（tableレイアウト）は
<TABLE ALIGN="center" WIDTH="600" CELLSPACING="0" CELLPADDING="3" BGCOLOR="#ffffff"><TR>
<TD ALIGN="left"><A HREF="index.htm"><IMG SRC="image/title.jpg" WIDTH="200" ALT="" BORDER="0"></A></TD>
<TD ALIGN="right" HEIGHT="30" VALIGN="bottom">
<A HREF="index.htm">サイトマップ</A><IMG SRC="image/spacer.gif" WIDTH="20px" HEIGHT="5px">
<A HREF="index.htm">お問い合わせ</A><IMG SRC="image/spacer.gif" WIDTH="20px" HEIGHT="5px">
<A HREF="index.htm">トップページ</A></TD>
</TR></TABLE>
で、

現状（cssレイアウト作成中）は
<div class="head">
<div style="text-align: left; float: left;"><A HREF="index.htm"><IMG SRC="image/title.jpg" WIDTH="200" ALT="" BORDER="0"></A></div>
<div style="text-align: right; float: right;"><!--
--><A HREF="index.htm">サイトマップ</A><IMG SRC="image/spacer.gif" WIDTH="20px" HEIGHT="5px"><!--
--><A HREF="index.htm">お問い合わせ</A><IMG SRC="image/spacer.gif" WIDTH="20px" HEIGHT="5px"><!--
--><A HREF="index.htm">トップページ</A></div>
</div>
です。

しかしながら、これだとメニューの文字が上に寄ってしまいます。
元のtableレイアウトで言うところのVALIGN="bottom"を、cssでdivに適用させるにはどうすればいいのでしょうか？

続きです。

cssファイルの該当部分の内容は
div.head{
background: #fff;
width: 800px;
}
となっています。

文字サイズは固定していない&できません。
老眼のお年寄りでも見やすいように、ブラウザ側で文字サイズを変えやすいようにするのが目的です。
ですので、「メニュー部分も画像にする」や「文字サイズを固定して上部paddingを指定する」などはできません＞＜

ややこしいかもしれないですが、文字サイズを固定しない状態で、
尚且つロゴ画像（左寄せ）と文字メニュー（右寄せ）をボトムラインで揃える方法があれば、ご教示ください。

下揃えは画像でない限り諦めろ

>>156
わかりました、ありがとうございます。
仕方ないので、該当部分だけtableに戻します…。

CSSの管理について教えてください。

トップページと３つのコンテンツページの合計４つからなるwebページをつくる予定です。
その４つのページはトップバーメニューとサイドバーメニューが共用で
中央のコンテンツの内容が違うだけという作りです。

--index.html
|-lesson1.html
|-lesson2.html
|-lesson3.html

そこで、まずトップバーメニューとサイバーメニューだけで中央のコンテンツ部分を抜かして
共用できるようなページを作成しました。

template.html（トップバーとサイドメニューのみのひな形のページ）
template.css(ひな形になるページのCSS）
image_template（ひな形になるページの画像イメージを入れたフォルダ）

次にトップページである"index.html"のページで使うCSSなのですが
"index.css"というのを新しく作るのか、"template.css"をそのまま使ってどんどん長くしていくのか
どのようにしたらよいのでしょうか？

今はページ数が少ないのですが、将来"lesson60"くらいまでページを追加しても
"template.css"を長くしていくのですか？それとも"lesson"のページを追加していったら
"lesson60.css"をつくるのですか教えてください。

>>157
デザインを変えろ

>>158
人によって違うとしか言いようがない

たいへん申し上げにくいのですが、table病とdiv病を併発しています。
このままではもってあと半年。いや、三ヶ月かもしれません。
strictワクチンの投与も有り得ますが、こちらは副作用が問題視されています。
しかし、、、。
しかし、このままでは、、、。

>>158
一案として・・・

index.htmlとlesson**.htmlでともに使いそうならtemplate.cssに入れる
個別.htmlでしか使わないものは個別.css（index.css、lesson1.css等）を作る
複数のlesson**.htmlで共通CSSが多くなりそうならlesson.cssなりを新規に作る

とりあえず全部template.cssに入れて、個別にしか使わないものを別ファイルに切り出すってがいいんじゃねの

>>161
一つのhtmlに複数のCSSを使用することってできますか？

現在、"index.html"では"template.css"のみで長くしていってるんですけど
中央のコンテンツのCSSは"index.css"にして
"index.html"に"template.css"と"index.css"を反映させることってできるんでしょうか？

>>162
@import でぐぐってみ。

使い勝手を考えるとトップとコンテンツページもあんまり大きくレイアウトかえるべきじゃない

会社のIE6で自分のHPを見ると、
CSSの２カラムレイアウトがずれるんですが、
うちで見るとFireFox3, IE7, IE6全部大丈夫でした。

同じIE6でもなにか設定の違いとかあるんでしょうか？

その家のIE6がおかしいんじゃないか？
７と６は並存出来ないだろ普通は

すいません。ちょっと嘘つきました。
うちで見たのはFireFox3, IE6で、
IE7は友達に確認してもらいました。

一応６内にもマイナーバージョン違いがあるけどわかんね
とりあえずよくある段組のバグ対策しとけばいけるんじゃね？

DOCTYPEや互換モードとかいうのは無かったっけ？

カラムが崩れるなら大外の横幅に対して中の各カラムの横幅が大きすぎるとかじゃないでしょうか？
マージンやパディングなども含めて

よくわからないので、10pxくらい余裕もってwidthとっとくことにします。

>>165

今まさに、俺が質問しようとしていた内容と全く同じ！

最近作ったサイトを会社のIEで見たら大丈夫だったのに
家のIEで見たらカラム落ちしてた。
バージョン同じなのに。

これはなんでだ？？

これとか？
http://adp.daa.jp/archives/000265.html

「IE6　レイアウト　崩れ」でググってみるもよし

1)　　　　　　　　...2)┌─┐
.　.　.　 　 　　　　　 │�@｜
┌─┬─┬─┐　├─┼─┬─┐
│�@│　 │　 │　│　 │　 │　 │
├─┤�A│�C│　│�B│�A│�C│
│�B│　 │　 │　│　 │　 │　 │
└─┴─┴─┘　└─┴─┴─┘
floatを用いて1)の様な段組にしたいのですが、どうしてもうまくいかず2)の様になってしまいます
3)
┌─┬─┬─┐　┌─┬─┬─┐
│�@│　 │　 │　│�A│　 │　 │
├─┤�B│�C│　├─┤�@│�C│
│�A│　 │　 │　│�B│　 │　 │
└─┴─┴─┘　└─┴─┴─┘
3)や4)の様にすると出来るのですが、出来れば1)の様にしたいのです
良い方法は無いでしょうか

>>173　絶対配置

>>174
やはり絶対配置が妥当なのでしょうか

#�@{

}

すみません、途中で誤って書き込んでしまいました。
少し自信が無いのですが、以下の様なやり方で問題無いでしょうか？
#�@ { left: 50%; margin-left: -350px; width: 150px; height: 80px; position: absolute;}
#container { width: 700px; margin: 0 auto;}
#wrapper { float: left; width: 100%;}
#�A { margin: 0 150px;}
#�B { float:left; width:150px; margin-top: 80px; margin-left:-700px;}
#�C { float:left; width:150px; margin-left:-150px;}
#footer{ clear: left; width: 100%;}
<div id="�@"></div>
<div id="container">
<div id="wrapper">
<div id="�A"></div></div>
<div id="�B"></div>
<div id="�C"></div>
<div id="footer"></div></div>

自分で試せばええがな

とりあえず問題は無さそうなのでこのままでいってみます
ありがとうございました

cssのバージョン別(1、2、2.1、3の４つですかね？)にプロパティ一覧が知りたいのですが
参考になるサイトございましたら教えてください

>>179
W3C

どのページでしょうか？もしよければ該当するURL教えてください

>>181

よくない　ググれ、てかちゃんとW3Cのコンテンツ嫁

>>182
知らないなら無理してレスしなくていいですよｗ

>>183
>>1から読み直せ
話はそれからだ

それも出来ないなら
無能、相手をする価値無しだ

>>184
何えらそうに言ってるんだよ

>>185
質問者がえらそうだからじゃね？

w3cしか書けない人は100％の確率で回答者自身もよくわかってない確率

>>187
w3c見たら解決する話であることは確かだけどな

　　　　　　　　　: :::::::::::::::::::::::::::::::::::::::::::::
　　　　　　　 ∧＿∧ . . . .: : : ::: : :　http://p.pita.st/?szv2l8mx　:::::
　　　　　 　/:彡ミ゛ヽ;）ー､　. . .: : : :::::: :::::::::::::::::::::::::::::::::
　　　　　 / :::/:: ヽ、ヽ、 ::i . .::::::::
　　 　　 / :::/;;: 　 ヽ　ヽ ::ｌ　. :. :. .:: : :: :: :::::::: : ::::::::::::::::::
￣￣￣ （_,ノ ￣￣￣ヽ､_ノ￣￣

>>188
このスレのタイトル見てみ。
初心者がw3c見ただけで解決するとはとても思われん。

理解できるように教えるのが回答ってもんだ

サイト教えろ→つw3c

至極まっとうな答えだと思うが
回答者に噛みついてる方が明らかにおかしいだろ

それで済むならそもそもこんなスレはいらない

>>193
質問内容がcssの書き方でサイト勧めてるなら投げっぱなしでスレ趣旨に沿ってないがサイト教えろって質問なんだぞ？
初心者スレは質問者がなんでもありってことじゃないからな

初心者スレでw3c見ろ。
くらいの回答しかしないような回答者はダメですね。

だな
それは回答とは言わないしな

きっとW3Cのサイトが見つからないんだよ。
名前じゃなくてURLを張るべきだった。

探し物には2cnより便利な
Googleという検索サイトがあるのだが

その前にW3Cが何なんのかがわからないのかも知れん

そういう場合はGoogleよりWikipediaという便利なサイトがで調べるのがよい
http://ko.wikipedia.org/wiki/W3C

Wikipedia（笑）

必死にW3Cって回答を叩いてるくずは質問者本人だろ
横柄なうえに口の利き方もなってないしまともにお礼も言えないとは三重苦だな

>>195
初心者スレでサイト教えろって方がおかしいだろ
能書きたれる余裕があるならお前が懇切丁寧な回答を用意してみろｗ

凄いな
IDが出ないとここまで自演し放題なのか

初心者にCSSのバージョン別情報なんていらない
よってスレ違い

google・yahooのトップページでさえエラーだらけだから気にする必要ないだろ

>>203
擁護装った質問者の回答者たたきは目に余るものがあるな

そして総意としてURLは教えないと

>>207
教えてほしいならそれなりの聞き方があるだろ
お前が質問者じゃないのならお前が張ればいい
近頃の質問者はお客気分で来るのが笑える

>>205
なんか勘違いしてるようだがw3c見て正しい記述覚えてこいって話じゃないぞ

http://www.w3.org/

W3Cすら見つけられないような人がサイト作ってなにすんだよｗ
もっと先に覚えるべきことが山ほどあるな
謙虚さとかｗｗ

俺は質問者じゃないけど初心者に対してW3Cのサイトを教えてこれ見て
理解しろって言っても無理だと思う。

つまり適切な回答じゃないと思う。

>>212
じゃあ変わりに正しい回答よろw

>俺は質問者
まで読んだ

まだ質問者ｗが暴れてんのか
しつこい奴だな

>>180にケチつけてる人はかわりに>>179に答えれば解決するだろ
文句言いながら未だ誰も他の回答してないとかﾜﾛﾁ

>>179に回答しないということでスレ住人の統一はとれてんだよｗ

誰かW3C初心者スレに誘導してやれ

W3C以外にそんな意味のないもん作ってるとこはない以上

というか質問者が暴れてる根拠は？
一応暴れてる一人だけどなぜその妄想に至ったか>>215にｋｗｓｋ聞きたい

>>220＝>>179
もう帰れようぜーな

わかりやすすぎ
回答者に噛みついてんのはお前だけだぞ

暴れてる一人わろた
自覚あるなら消えろよｗ

質問者当人だろうが他人だろうがアホなことにはかわらん

こんな雰囲気じゃ質問したくてもできないだろ、そろそろ締めようぜ

>>220が>>179にまともな回答をすれば終わるだろ
あの回答に不満ある一人らしいし

黙ってれば鎮火したのに>>220ってやつはｗｗｗ

前スレで評価していただいた美容ベースです。
メニューの位置・カラーなど、その他もろもろ修正しました。
再度、評価をお願いいたします。

肌スキンケア・髪ヘアケア　美容ベース
http://biyoubase.com/

>>228
ここはカスイケじゃないぞ

色使いにセンスがない
やり直し

ちょい質問なんだが、ＣＳＳ対応ブラウザの中で、ＣＳＳ省略をすると動作しないって事はあるのか？

これとか↓
body{border:1px solid #000000;}

>>231
順番が違うｗｗｗ
borderは太さ・色・形の順番じゃなかったっけ？

なんで232みたいな初心者が回答しようとするのか理解できない。

なんでそんなに殺伐としたがるのか

得意げにでたらめ書かれるのはさすがに

超初心者ですみませんが、
個人でHPを作成しようとするとき、
CSSはどのような役割を果たしてくれるのでしょうか。
(どういったときにCSSを利用するのでしょうか。)
よろしくお願いします。

本嫁

ここで煽るしかできない奴は初心者ってことでＦＡ？

人に聞く前にググってこい
自分の手間を省くために人に時間を使わせるなカス

ID:yHwnNpio必死ｗｗｗｗｗｗｗｗｗｗ

>>236
役割はサイトに見栄えを与えること

一括してデザインを変えたりできるよ

>>236
サイトの見た目を簡単に変えられて楽

アウトルックエクスプレスの最新バージョンでhtmlメールを開いた時のCSSの解釈はIE7
に準じているのでしょうか？
IE6の方でしょうか？

どっちにも準じてないんじゃね？

>>244
CSSそのものには対処してますよね・

>>245
HTMLメールの仕様とHTMLの仕様は違います。
更に環境によって表示は異なります。
私の知る限りではCSSには対応していないのですが、なんせ三年も前の知識です。

タグ使うしかないな

247 Name_Not_Found [sage] Date:2009/02/28(土) 19:01:04  ID:??? Be:
    タグ使うしかないな

<table cellpadding=0 cellspacing=0 width="100%"><tr>
<td background="001.gif" width="5"></td>
<td background="002.gif">xxx</td>
<td background="003.gif" width="5"></td>
</tr></table>

これは┏━━━━━━┓のような表示になりますが
これと同じようにCSSで作りたいと思ってます。
CSSのソースはどのようになりますでしょうか？
よろしくお願いします。

ググってこいよ
何年前の話題よ

できればこのようなhtmlソースで使えるとありがたいです。
よろしくお願いします。

<div class="box-all">
　<div class="box-a"></div>
　<div class="box-b">xxx</div>
　<div class="box-c"></div>
</div>

とりあえず自分で考えろって言ってるだろ・・・
おかしいとこは教えてやる

タグってこいよ
何年前の話題よ

>>253
不覚にもｗｗｗ

てか可変３カラムって結構難しいなｗ
ミス指摘されるの怖いからググってこいくらいしか言えないｗｗ

SEO用のリンク集める方法知りませんか？

>>255
せつこ、それ3カラムちゃう、見直すんだ

>>256
スレ違い

ググレカス
ヤフレカス
タグレカス
カスレカス
ジャヴァレカス
フラレカス
アジャレカス

ググレの一言で済ましていい質問とそうでない質問とがあると思うんだけどな。

>>259
例えば上のどれ？

>>260
ググレカス

>>260
タグレカス

タダレカス

アナレカス

質問です。
CSSにて

* {
font-family: Osaka-Mono !important;
}

のように強制的にフォントを指定してみましたが、
半角英数字だけフォントが適用されてなく、メイリオ（？）になっています
これを修正する方法はないでしょうか？

半角英数があるフォントをその次に指定

てかOsakaなんてwinにはいってないだろ

フォント指定なんて制作側のオナニーなんだからいいじゃん

>>265
自分だけ見えれば良いのかい ?

>>267
Osaka-Mono＝ＭＳＰゴシックの英表記かと思ってた・・・

アホすぐるｗｗｗ

>>267
釣りですか

<h3>テスト</h3>

これに
width: 500px;
passing-left: 10px;
にすると、実質widthが510pxになってしまうんだけど仕様？
それとも何か宣言によって動作変わる？

passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left
passing-left

ごめんうちミス
padding

ブラウザも書きましょうね

>>276
はい、忘れてました

IE6とFirefox3です

paddingの性質を知ってるなら答えは出てくると思うが・・・

テンプレ嫁

テンプレ厨大活躍ｗ

そのものズバリ書いてるます

left:10px で十分です

marginとpaddingを間違えているに3000ﾏｦﾀ

tbodyの一列目のみにCSSでbackground:#000000;color:#ffffff;を適用させたいのですが
classとidとcolとcolgroupを使わず、下記のソースをいじらずにcssだけで適用させるには
どのようにしたらよろしいでしょうか？

<table>
<thead>
<tr><th>ID</th><th>名前</th><th>性別</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>高梨</td><td>男</td></tr>
<tr><td>2</td><td>木下</td><td>女</td></tr>
<tr><td>3</td><td>後藤</td><td>男</td></tr>
</tbody>
</table>

tbody td:first-child

わざわざtbody使うならcaptionも使えよって思うのは俺だけ？＾＾

わざわざって言い草もなんなの？

うむ。tbody要素はタグの省略が可能なだけで、table要素の内容には必須なのだ。

>>288
XHTMLだと必須ではないのです｡

>>289
ｗｗｗ
ばーか

　 ∧＿∧
　（´・ω・）ﾁﾝｯ!☆
〜(,,＿ｕ_っ—[]／
　　　　　　と＿"っ。A。)っ >>290
　　　　　　　　　∨￣∨ ﾊｳｯ

>>290
なぜ ｢ばーか｣ と言われなければならないのですか｡

IDがなんか惜しいから

>>292
ソースぷりーず

素直にクラスやIDふって装飾しろと

テーブルの最後列にcolor:#000を適用するにはどのように記述したらよろしいでしょうか？

>>294
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd より
> <!ELEMENT table (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

>>296
本当に列か？行じゃないのか？

>>297
またはか・・・
trがあればいいのか。じゃあtbodyがあればtrはなくてもいいのか？

>>296
CSS3の時代が来れば､ last-child擬似クラスを利用して

td:last-child {color: #000;}

のように書ける｡ それまでは､ 行の最後のtd要素を一々last-childクラスに分類して

td.last-child {color: #000;}

と書くようにすべし｡

>>299
> <!ELEMENT tbody (tr)+>

>>301
なるほど
すまんかった
一通り見て来るよ

なにか構造的に意味があって区別したいなら、まさにそんな時こそclass属性id属性だろう
そんなに毛嫌いしなくても良いじゃないか

CSS3の時代なんて俺が生きてる間には来ないだろうな

携帯HPについて質問です。

XHTML1.0 Transitonalでcssで携帯サイトを作成しています。

クリックするだけで文字サイズが変更出来ようにしたいのですが、どのようにすればよいのでしょうか？

サイト自体は検索エンジンに登録されているので、文字サイズごとにページを増やしたくなく、ワンクリックでスタイルシートだけを変更したいんですが。

よろしくお願いします。

muri

サーバー側で動的に読み込むCSSファイルを切り替える。

>>307
携帯サイトだから
docomoにはムリ

>>304が90歳ならたぶん来ない｡

ttp://www.ilikebeethoven.com/
このサイトのメニューを自分でも作ろうと思って作っているのですが
#cat-9全体の色が変わる意味がわかりません。
display:block;してるのですが。

できました。

Expression Web2を使って入門の勉強中です。

あるhtmlファイルのコンテンツを画面の中央に配置したいのですが、
ググってやってみましたがうまくできません。

divがひとつあってその中にpがいくつかあります。
このdivを中央にしたいのですが、幅は800pxで高さはpの中のテキストの量によって変わります。
そこで、divのスタイルで
　marginのleftを-400px
　positionをabsolute
　widthを800px
　leftを50%
にしました。
こうすると、画面表示上は問題なさそうなんですが、印刷するとダメです。
テキスト量が２ページになるはずなのに、無理に１ページで印刷しようとして、紙の最後でテキストが
重なったり途切れたりします。IEでもFireFoxでも同様でした。
なにが問題なんでしょうか？

bodyのtext-alignをcenter、件のdivの左右マージンをautoでOKでわ。

Expression Web2（笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑笑

本当に使っている奴が存在するなんて、感動した！

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

>>314-315
くだらない奴だね、きみたち

おまえは愉快な奴だな

人が何を使おうが自由だ

だからおれはお前らを人力検索エンジンとして使ってる

簡単なドロップダウンメニューを作っています。
とりあえずは見た目を作っていて、Firefox3.xやChromeではうまく表示されるのですが、IE7では表示できませんでした。
http://www1.axfc.net/uploader/File/so/19627.zip
問題はおそらくCSS部分なのですが把握しづらいと思い他ファイルも含めてアップしました。
どの部分に問題があるか、もしくは足りないかをよろしければ教えてください。

具体的にどのように表示されないかを書いていませんでした。
Firefoxなどではmouseoverでメニューの左と下(つまり真下)にそろえてドロップダウンするのですが、IEでは右と上(つまり真横)に表示されてしまいます。

めんどくさいからどこかHPスペースかりてそこで再現しろ
zipってめんどいんだよね

ブログの背景色を変更しようとして
background-colorの#からを好きな色のコードにしたのに
まったく変わってないんだけどなんで？

>>322
おそくなりました。
http://mbanapa.web.fc2.com/menutest/test.html
このような感じです。

>>323
再現可能な最小限のソース

>>324
標準モードか互換モードで変わるんだからまずは統一しようぜ

>>321
cssの問題

>>326
どちらも試しましたがやはりIEでは右にメニューコンテンツが表示されてしまいます。
>>327
はい。そう思いましてこちらのスレッドで質問させていただきました。
もしよろしければ教えてください。

無駄にjavascript使ってるな

すみません。JavaScriptも今日始めたばかりで全然分からなくて冗長になってます。
あれから改善はしましたが、今回の問題はそこにもあるのでしょうか？
表示位置なので関係ない気はしますが・・

>>325
マジで！
もっとすごいことしないとダメなのかぁ

使わなきゃ欠点とか利点とかわかんないからいいんじゃね

leftとポジショニングの設定を変えることでかなり改善できました。
現在はこの状態ですが
http://mbanapa.web.fc2.com/menutest/test.html
メニューアイテムのホバー状態で、文字列の背景にしか色が付いていないのですが、これをブロックいっぱいに広げるにはどうすればよいのでしょうか？
今回私が書いたのはliタグがメニューアイテムに相当し、それはインライン要素だからこのような現象が起こっているのだと思います。
しかしdisplay:blockを指定しても変化がりませんでした。引き続きお願いします。

span だからおかしいでしょ

ああ>>334は勘違い
CSSでやりたいんでしょ？ならhtml内にソースを入れて。
それとヘンなインデントもやめて。

>>335
CSSを取り込み、HTML内のインデントも消去しました。
見づらくてすみません。

勘弁してくれよｗｗｗｗ
DTD宣言する箇所ちげえしｗ
htmlから勉強しろよｗ

あと根本的にjavascript側でバグがあるな
挙動おかしいし

>>337
勘違いしてました。気をつけます。
>>338
はい。JavaScriptはとりあえずそれっぽい挙動するようにしてるだけですので。
教えていただきたいのは「ブロックいっぱいに広げる」方法です。

>>339
ちょっと待ってろ。いま落としてみてやってみる。

とりあえず.MenuItem aにdisplay : block;かな
どっかミスっているからだろうけどローカルで出来ないんだよな。

>>341
ありがとうございます！
.MenuItemでdisplay : blockを定義していたのでaに入れてませんでした。
もう一息でとりあえずUIだけ完成しそうです。
あとは自分でやってみます。

お時間を割いていただいた方々、本当にありがとうございました。

Another HTML-lint gateway
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
死ぬまでに見ておくべきCSSデザインサイト集まとめ
http://gigazine.net/index.php?/news/comments/20070425_bestcss/
CSS Zen Garden
http://www.csszengarden.com/
http://az-store.nrym.org/archive/mynotes/lecture/

長くてすいません。
色んなサイトで調べたんですが、どうしてもmenubがmenuaの下に回りこんでしまいます。
どうすればいいのかアドバイスお願いします。

<div class="menu00">
<div class="menua">
<div class="menu1">画像
</div>
<div class="menu2">空白
</div>
<div class="clearc">
</div>
</div>
<div class="menub">
<div class="menu3">画像
</div>
<div class="menu4">画像
</div>
<div class="menu5">画像
</div>
<div class="clear">
</div>
</div>

補足です。
↑は、ﾌﾞﾗｳｻﾞの幅を縮めた時に回りこみます。

>>344
そりゃそうだろｗ
float:leftとかしてないならそうなるわな。

<div class="menu00">
<div class="menua" style="float:left">
<div class="menu1">画像
</div>
<div class="menu2">空白
</div>
<div class="clearc">
</div>
</div>
<div class="menub">
<div class="menu3">画像
</div>
<div class="menu4">画像
</div>
<div class="menu5">画像
</div>
<div class="clear">
</div>
</div>


適当。

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

という文があったとき、上段の文字の幅を均等にして、

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

というようにしたいのです。
等幅ではなく・・・、どういうふうに記述すればよいのかわかりません。
すみませんがお願いします。

>>348
日本語じゃ無理

348です。そうでしたか・・・ありがとうございました。
テーブル使えばそれっぽく出来るので、苦肉の策としてそれでいこうと思います。

最悪…

なんで最悪なんだ？
等幅を使わないという条件下ならテーブル以外に方法はないだろ？
diｖでも代用可だけどさ。

1文字ずつ position 指定すればいいじゃない。

divなんて無茶苦茶

letter-spacing も知らねえのかよ ! !

letter-spacing 関係ねえ

画像にしろ

>>346-347
有難うございます。

結果、新規に書き直したら解決しました。
今度はclearなくても回り込まないです。　
IE７とFireFoxで確認。

違うところって、CSSでfloatとwidthのどっちを先に書いてるか・・・位なんですが。
関係ないですよねぇ。

>>358
class="menu00"とかになにを書いているのか分からないから答えようがない。
答えを求めるのならソースを書いて他の人に理解してもらうようにしないと。

>>359
ああ、すいません。今後気をつけます。
勉強中なので、また何かあったら
よろしくお願いします。

幅に文章合わせるcssあるけど日本語対応してないんじゃねーの

text-align: justify; のことならIEとFirefoxが対応している
IEは別個text-justifyの指定が必要だが

<body>
<div id="header"><h1>タイトル</h1></div>
</body>

#header {
background: #330000;
}
h1 {
width: 300px;
}

上記ソースで、横スクロールバーが表示されるまでブラウザを縮めていったとします。
横スクロールバーが表示された状態でスクロールさせて非表示領域を見ると
ヘッダーの背景色が非表示領域だった部分まで反映されていません。
これは仕様的にただしいのでしょうか？

ちなみにfirefox3で上記現象がおきます。

仕様です

/* レイアウト設定--------------------------------------------------- */

/* ベースボックス */
#container{

#header{

#unit{

/* センターカラム */
#contents{

/* レフトカラム */
#menu{

/* ライトカラム */

これを
#menu − #contents = #unit
#menu2 + #unit= #header = #container
こういう風にしてもIEでレイアウト崩れるのはなぜですか？

それだけじゃわからん

うーん・・・
ブログ晒すの嫌だし詰まった＼(^o^)／

いや、せめてこの部分のスタイル全部書いて
対応部分のHTMLも書いてくれよ。

-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

これを指定すると四隅が丸くなってしまいますが、
例えば上側の二隅だけ丸くする指定ってあるんでしょうか？

ない

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

-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;

ついでにこれ↓も書いとけばKoqueror系でも効く
-khtml-border-top-left-radius: 8px;
-khtml-border-top-right-radius: 8px;

そういうのって古いのだとアウトじゃね？

>>372
将来的に廃止されますよ

いや、たしか分からんのは読み飛ばすように規定してあったとおもう。

>>372
神様〜！本当にありがとうございました！

江戸っ子は宵越しのコーディングはしないのさ

と埼玉県産まれのやつが言う

>>378
埼玉に嫉妬してる田舎者乙

埼玉に嫉妬 www

>>379
栃木に謝れ !

ごめんねごめんねー

おし、許す !

ttp://rinrin.saiin.net/~es/xxx/temp/017/index.html
のメニューとかを全部左側に持っていきたいのですがどうすればいいんでしょうか？

↑ここのサイトの17番です

テンプレ配布してるサイト自体が糞だとそこのテンプレ使う気はしなくなるな

最近CSSの教科書読んでて思ったんだど
PHPでフォント間のスペースをあけまくったらおもしろいよね。

ボタンを一回おすごとに、フォントとフォントの間の間隔を
どんどんふやしていくっていう。ちょっとした遊びなんだけど。

ああああああ
　　　↓
あ　　　あ　　　あ　　　あ　　　　あ

みたいにしてくれるっていう。

JSだろ

>>388
javascriptわかんないんですよねー
でもｐｈｐならわかる。
そういう状況です。
それと、数値をファイルに保存したい、
というのもあるし。

javascriptだと、一回ブラウザ閉じたら終わりですよね。
PHPでファイルに保存しておけば、次に
アクセスしてきた人がブラウザで画面開いたら、
いきなり最初から

あ　　　あ　　　　あ　　　　あ　　　　あ

になるっていう。

どうでもいいｗ

http://7ddcf5z5qy.sqweebs.com/qAuyTFC5/1.php

試作品できた。
CSS＋PHPで、
ランダムで１−２０の数字を生成して、
フォント間の間隔を
1em　−　20em　で
一回ページを読み込むごとに
ランダムに変更している。

PHPなのでjavascript使ってないので
javascript切っても逃げられませんｗ

ついでに字の色も
PHPでランダムに変更するように変えておいたｗｗｗ

何が楽しいのか分からん

>>393
HTML＋CSSだけでは
不可能なことがPHPで可能になった。

これが楽しい。

まあjavascriptでも同じことできるのかもしらんけど。

marqueeのほうがマシｗ

何か技術的にすごいとでも思ってるんかねぇ

>>396
すごいさ。
HTML＋CSSだけしか知らなかった時代には
できなかったもん。

もういいよ

CSSスレなのでPHPはスレ違い

というか文字コード宣言すらしないページに価値はない

>>397
そういうのは自分のブログででも自慢しててください

文句を言う割には見てるんだね

根本的に君の用途ではphpを使う理由が見当たらない

>>402
他の選択肢は？
javascriptしか思い浮かばないけど？

ｊｓでおｋ

javascriptだと、ユーザーの行動をファイルに
記録できないよね。

クッキーには記録できるけど。
それだと個人の設定になっちゃうんで、
前の閲覧者がやった行動をそのまま
ファイルに記録しておいて、
次に見にきた人に受け継ぎたいんだよね。

それだとjavascriptではできない。

php.js 使ってみろとか書いてみる

php.js重すぎ

こういうのって数年後になって見て赤面しちゃうんだよねｗ

まあこのスレでPHP使えるのは漏れくらい。

>>409
function a() {
echo "<p>".($a+$b)."</p>";;
}

$a=array(1,3,5,7,9);
$b=array(1,2,3,4,5);
array_map("a",$a,$b);

>>410
エラーで動かないぞ

まあ、PHP知らないバカは無理しないでいいよ

>>412はニセモノ

ニセモノがでるとはオレ様大人気、って感じ。

私男だけどこの程度でphp使えるとか言っちゃう男の人って…

まあお前らもHTML+CSS+PHPで
何かおもしろい仕組み作ってみなよ。
無理だと思うけど。

もういいって

PHP使えるなら、SQLも覚えれば？って、もう習得済み？

http://7ddcf5z5qy.sqweebs.com/qAuyTFC5/

indexページ作って、
シリーズ化することにしたよ。

勝手にやっとれ

>>418
文字コードぐらいちゃんと指定しとけよ。

IEでは反映されるのにFirefoxでは何故か反映されずに
寝ないで悩んでたら全角スペースが原因だった・・・俺の時間返して！

Firefoxならエラーコンソール見れば分かるんじゃないか？

ＣＳＳで、文字列を出力できるのでしょうか？

例えば、HTML側　＜div class="moji">〜
スタイルシート側　.moji{〜〜　文字列の指定

何がしたいかトいうと、
　例えば、全Ｈ１タグの真下に文字列を表示したくなったからで。

:before および :after疑似要素
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html#before_and_after-pseudo

>>418
いつのまにか、「４」まで、できとるな！

float初心者でつ・・・

wikipediaだとfloatとclearを同じ要素に指定してますよね？
これってオフィシャルな使い方なんですか？ご教授ください

オフィシャルかどうかなんてどうでもいい
それでちゃんと表示されるならそれでいいんです

WEBブラウザ上ではcssを読み込んで正常に表示されるのですが
SEOツールというサイトで、サイト診断した時に出ているサムネイル画像には
cssが読み込まれずhtmlのみの表示になってしまいます。
何が原因なのでしょうか？

ツールが悪い

SEOにCSSは関係ないから問題ないだろ

>>429 >>430

ありがとうございます。
ちなみにこのサイトです。
ttp://www.seotools.jp/

他のサイトアドレスで試すとｃｓｓを読み込んで表示されていて
自分のアドレスだと読み込まれなくて
記述が間違っているのかと気になったので。。。

質問です。

昔、代替スタイルシートを非常にうまく使った "from DFJ" というサイトがあっ
たのですが、CSSの切り替えにJavaScriptを使っていたせいか、Internet
Archiveで見ても、CSSの反映が行われません。

from DFJ index
http://web.archive.org/web/20060128015808/http://www.fromdfj.net/

（まあ「津波荘」とかも、Internet Archiveで見るとCSSが無効になるので、そ
ういうものなのかもしれませんが）

ということで、

1. "from DFJ"のHTMLやCSSを（一部でも）保存していて、今も見られるサイト
はどこかにないでしょうか？

2. "from DFJ"並みにダイナミックにページレイアウトの変わる、代替CSSを利
用したサイトがあったら、お教えいただけないでしょうか？

以上です。よろしくお願いします。

ヘッダーとコンテンツの間に隙間ができてまうよ

>>432

http://web.archive.org/web/20060128015808js_/http://www.fromdfj.net/js/styleSelector.js

の中の上の方にある

// cssDir ="http://www.fromdfj.net/css/" ;
// alert( (location+"").match(/http:\/\/[^\/]+(\/~[^\/]\/|\/)/i) );
Dir1 = '';
if( (location + "").search(/\/~[^\/]+/i)>0 ){
Dir1 = (location + "").match(/\/~[^\/]+/i);
}
if(document.domain){
Dir2 = document.domain;
}else{
Dir2 ="www.age.jp";
}

cssDir = "http://" + Dir2 + Dir1 + "/css/" ;

ここらへんをいじり倒せばどうにかなるんじゃなかろうか

あと、Firefoxいれて、
ttp://mozilla-ext-ja.way-nifty.com/blog/jsview/index.html
のJSView入れとくと少しは幸せになれると思う

>>433
ヘッダーって画像？
それなら
img{
vertical-align:bottom;
}
をCSSに入れてみて。
若しくはヘッダーの高さを指定して下マージン0にするとか
もしまだ隙間が開いたらごめんね(´・ω・｀)

とりあえず隙間とか配置で悩んだら、firefoxにfirebug入れて
サイト見れば原因分かるでしょ多分。

>>418
サイト名どうにかしろｗｗｗｗｗｗｗ

とほほの***入門のぱくりだろｗ

>>434
ありがとうございます。結局、そうするしかないんですね。
今度、時間のあるときにでもいじってみます。

アチーブも鯖内の全ファイル保存してるわけじゃないし無理じゃないの？

あちーぶｗ

ああ、アーカイブだったなｗ
ずっとアチーブだと思ってた

あるひーふ

>>440
> 鯖内の全ファイル保存してるわけじゃないし無理じゃないの？

まあ、無理なんですよね。
実際、背景画像とかは、大部分が残っていないです。

他にこれぐらいダイナミックにレイアウトが変わるサイトというと、
outsider reflex
http://piro.sakura.ne.jp/
ここのトップページくらいしか知らないんですけど、他にありませんか？

まあそれは↓のスレで聞くべきかもしれませんが。

代替スタイルシートに萌え〜
http://pc11.2ch.net/test/read.cgi/hp/991400015/

>>432
CSSのURLを直接叩けばちゃんとアーカイブにも保存されてるだろ
DLしてローカルで表示させるようにしろよ

>>445
いや、それがされてないんです。
保存されているのは外部CSSまでで、そこから先の背景画像は大部分が駄目です。
http://web.archive.org/web/*/www.fromdfj.net/img/*

具体例も出しましょう。

自分がいちばん見たかったのは、以下のCSSの適用例だったのですが、
http://web.archive.org/web/20050207155209/http://www.fromdfj.net/css/orange.css

背景画像のorange_back.jpgは保存されていないんです。
Internet Archive Wayback Machine
http://web.archive.org/web/*/www.fromdfj.net/img/orange/orange_back.jpg

他にも、このCSSの
http://web.archive.org/web/20060114161056/http://www.fromdfj.net/css/summer.css
この背景画像とか。
http://web.archive.org/web/*/www.fromdfj.net/img/summer/koori_title_.png

派手に見掛けを変えるための大きめの画像は、ほとんど駄目みたいです。

>>446
そのままパクるつもりじゃなく勉強のつもりだったら画像なんて適当でいいだろうが

>>448
まあ、そうかもしれませんが、できたら当時のそのままのイメージをもう一度
見てみたかったのです。残念。

ちょっと探してみたが、結構ないもんだな
一時切り替えが流行ったときはわんさかあったのに
ttp://deztec.jp/design/
ttp://www.akatsukinishisu.net/wiki.cgi
ttp://scrlab.g-7.ne.jp/
ttp://kissmoon.net/
ttp://feelin-good.oops.jp/
ttp://lowreal.net/

>>450
ありがとうございます。やはり、流行らなくなっていますよね。
自分も↓ぐらいしか知りません。
http://www.bookshelf.jp/texi/elisp-manual-20-2.5-jp/elisp.html

津波荘も、移転先では代替CSSをなくしてしまったようです。
流行らなくなった理由を考えると、

・blogサービスが普及したが、代替スタイルシートを利用できるサービスはなかった。
・WordPressなどのblogツールは、もっとダイナミックにレイアウトを変更できるので
  見劣りするようになった。
・RSSが普及して、サイトオーナーの指定とは無関係のレイアウトで見る閲覧者が増えた。

月並みですが、こんなところですかねえ。

cssを利用してマウスカーソルアイコンを変更する方法はありませんか？
アメブロなので、htmlがいじれないのでcssだけでどうにかしたいのですが
難しいとは思いますが、ご存知の方いましたら教えてください

>>451
結局は製作者のオナニーだったってこと

>>452
たしか、あったとおもった。＋
くらいだけど。

あと画像にもできたかな？

body{cursor:url(カーソル画像のurl);}
IE以外じゃ反応しなかったがな

リンクにカーソルを持っていくと、クラス名：redを適用した箇所の背景色を変更したいのですが
カーソルを載せた箇所しか適用されません

divタグ(クラス名:red)とaタグにどちらに乗せても両方とも背景色を変えるにはどのように直したらよろしいでしょうか？

.red:hover {
background:#FF0000;
color:#FFFFFF;
}

<div class="red">赤</div>
<div class="none">ここは変わりません</div>
<a href="#" class="red">赤になります</a>

>>456
.red:hover
なんて書き方はないよ

>>456
IE6で確認してるんじゃないのか？
IE7以降やFirefoxならdivの方も赤になるよ。

>>457
あるよｗ

同じクラスを適用したからといって
別々の要素が同時に片方のマウスオーバーに反応するわけではない。
そういうことをやるなら普通はCSSではなくjsを使う。

女子小学生を使う・・・ｺﾞｸﾘ

試してないがaを無理矢理relativeすればできるんかねｗ
結論：CSSでやるな

無理だろ

自分でブラウザを作れば無理じゃありませんが、何か？

作ってから言え

子供を？

4か5の過去スレでcssで実現してたコードなかったっけ？
見ようにも見れないけど

floatについて

<div id="a">
　<p><img class="b" />あいうえおあいうえお</p>
<div><!-- a -->

img.bを右にfloatしたとき
float:rightの効力はdiv#a内に限定されますか？

される

img.bを右にfloatしたら、img.bだけが効果を受ける。

>>467
floatの範囲は>>469の言うとおりだが、お前の訊きたいのは回り込みの範囲じゃないのか？
だとしたら限定されない。
ttp://az-store.nrym.org/archive/mynotes/lecture/css21/position#float

>>470
俺に断りもいれず誰がマジレスしていいと許可した？

俺が許可したけど何か

http://www.w3.org/TR/CSS21の日本語訳をさがしているのですが
どなたかご存知の方いらっしゃいましたら教えてください

>>13
リンク切れ張るなよ

>>473
http://translate.google.co.jp/translate_t?hl=ja#

>>475
はいはい、自分で翻訳しますよ

>>437
2.0と殆ど変わらないから恐らく公開されているのはない
2.0の邦訳＋
ttp://www.d-toybox.com/spec/CSS2.1/appendixC/
で頑張れ

2.1からdisplayでcompactが使えなくなったのか

<ul>
<li><a>〜</a></li>
<li><a>〜</a></li>
<li><a>〜</a></li>
</ul>

こうやってナビバー並べたら　　・　　　が付くんだけど
CSSで消す方法教えてください。

>>479
ttp://hp.vector.co.jp/authors/VA022006/css/lists.html#list-style-type

>>479
li{
display:block;
}

>>479
"none"をｈｔｍｌの方の<img の中に入れるでよろしいのでしょうか

>>481
liをclass分けしてるのですがCSSで

li#id {
display:block:
}
ですか？

#id li {
じゃね？

つーかクラス分けしてるんだったら

li .class {
じゃね？

ID:OMZkMO/v＝釣り師

>>483
う〜ん出来ない、後は自分でガム場って見ます
>>484
釣りじゃないよ

IDなら　li#id{〜}
Classなら　li.class{〜}
基本だろ…

どっか他のスレで既出のネタだろ

>>482
本気でhtmlに入れるんだと思うんなら
ここで質問する前にまず基礎の基礎から勉強してこないと無理だよ
ttp://az-store.nrym.org/archive/mynotes/lecture/

text や select, checkbox のあるフォームのクールな CSS 集ってないでしょうか。

ttp://www.csszengarden.com/tr/japanese/ のフォーム版みたいなのがあると最高です。

>>489
html　部品でググるか、英語に訳してからググってみるとたくさんでてきます

>>489
http://particletree.com/features/rediscovering-the-button-element/

>>490
CSS は世にいっぱいあるけど、クールとなると。

もしかして css Zen に text, select 系などもある？

>>491
ブラウザごとに用意されていて素晴らしいですね。ありがとうございます！

ttp://www.456bereastreet.com/lab/form_controls/select/

>>480
やっと消えました。ありがとう！ありがとう！ありがとう！

空のdivってホイホイ使っちゃってもいいのかな？
代替方法が思いつかないから使っちゃってるけど、何か不具合あるならなんとかしたい

クラスもidも定義しないdivを使うコーディングする人って疑っちゃうね

失礼、空のdivってのは
<div class="abc"></div>
みたいなやつのことね

別にいいと思うよ

現在、IllustratorCSでちょっとしたアイコン(背景画像）を作ったのですが作成したアイコンのサイズが

【icon_image.gif】
　100px 50px(横・縦）

でその画像よりも、サイズの大きいブロック要素（<div>）の背景に設定しているのですが
そのブロック要素のサイズに一杯に画像を幅、縦共に拡大する方法とかってありますか？

毎回画面の要素のサイズに合わせて画像を作成するのもメンドクサイのでなんとか
css or htmlだけで対応させる事が出来ればと思っています。

　<div style="width: 350px;height=100; background-image: url(icon_image.gif); background-repeat: repeat-x;">
　　　あいうえお
　</div>


あと、もし<dic>で出来たならば、テーブルの<td></td>の背景画像にもしたいと思っているのですが、
<td>の背景に画像を拡大して表示させる事は可能でしょうか？

>>499
SOHOスレより釣り乙

>>497
pとかも使おうね

誰も答えてくれないから。色々と回ってる
教えて下さい。

だから金払えばなんでも教えてやるって。
予算はいくらですか。

>>503
C#のシリアライズ通信について押して下さい。
予算１０万

<div>タグの中に入れた文字を上下中央に配置しようと思って次の
コードを書いてみたのですが、一向に中央に文字が表示されません。
※IE7

どうすれば上下中央に表示されますか？
文法的にはこれで正しい筈なのですが。。。

<div style="font-weight: bold; z-index: 100; left: 119px; width: 424px; color: #ffff66;
position: absolute; top: 140px; height: 44px; background-color: black; vertical-align: middle;">
永遠の１７歳</div>

テキスト全部pで囲いたがる奴何なの？
別に段落じゃないのにpで囲いたがる奴何なの？

>>505
<div style="
color: #ffff66;
background-color: black;
font-weight: bold;
line-height:44px;
text-align:center;
top: 140px;
left: 119px;
width: 424px;
height: 44px;
position: absolute;
z-index: 100;
">
永遠の１７歳</div>

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

>>506
line要素がまだ無いから。

>>506はテーブルでレイアウトする古い人だと思う。

>>510
テーブルでレイアウトしちゃ何がいけないの？
別に綺麗に見れれば良いと思うけど

>>511
テーブルは作るのがめんどいから。

>>512
あなたは何でデザインしてるんですか？

<DIV>ONLY?

そうだよ満足した？

自分の力不足だと思うけど<div>だけでレイアウトするとNetscape6で上手く表示出来ないのでテーブルも使う

>>515
今どき誰もNetscapeなんて使ってない

>>516
Netscapeスレッド Part20
http://pc12.2ch.net/test/read.cgi/software/1193470236/

閲覧者の切捨てとかどれだけ偉いんだよ

SeaMonkeyはたまに来るけどNetscapeは無いな
5万セッションのうちネスケは10だったぞ
ソースはGoogleAnalytics

寝助をバカにするな
Win3.1の頃はブラウザと言えばネスケだったんだぞ
俺なんか3000円も払って2.0を買ったんだぞ

>>514 divオンリーｗダセ

>>518
1万人来ても一人や二人しかいない突然変異といっても良いようなものに対応する必要なんかない

もし、冷蔵庫のブラウザからアクセスするやつがいるとして、それに対応する気なのか？馬鹿馬鹿しい

↑
意味不明
日本語の勉強をしろ

>>521
display属性使えばいいんです。

>>522
インターネット冷蔵庫、ナツカシス。
NECからはコタツ一体型が出るって噂だったが。

>>515
6どころか4でも段組くらい普通にできる

なんで DIV なんだか。もっと他にいろいろあるの知らないのか。

divを無駄に多用しないといけない今の(x)htmlが良くなればいいんだよな

いけないと思ってるのがそもそも間違い
構造的に意味のあるdiv程度で充分できる
できないほどのことを無理にhtmlを歪めてでもやろうとする馬鹿なら
テーブルレイアウトだろうが変わらん

できるだけdiv使わずに書いて、どうしても必要ならJavaScriptでdiv要素を後付けするようにすればHTMLを汚さずにすむ。

>>528
<div class="naiyou">
てｓｔ
</div>

これを角丸にしてください
できますよねあなたなら

<script>
var pre = '<div><div><div><div><div><div><div>';
var sfx = '</div></div></div></div></div></div></div>';
var div = document.getElementsByTagName('div');
for (var i in div) { var d = div[i]; if (d.className=='naiyou') { d.innerHTML =pre + d.innerHTML + sfx; } }
</script>

<div class="naiyou">
てｓｔ
</div>

>>531
それはjsでタグを吐いてるわけですからできたことにはならいです

>>528はたぶん意味をわかってないと思うのでこれ以上いじめるのはやめます
xhtml2.0でちょっと解決することなので

>>530
画像一枚でやれｗ
>>528はできないことはやんなって書いてあるのに読解力のない奴だな

<style>
. naiyou { position:relative }
. hidari_ue { position:absolute; left:0; top:0 }
. hidari_shita { position:absolute; left:0; bottom:0 }
. migi_ue { position:absolute; right:0; top:0 }
. migi_shita { position:absolute; right:0; bottom:0 }
</style>

<div class="naiyou">
<img src="hidari_ue" class="hidari_ue" alt="左上の角画像">
<img src="hidari_shita" class="hidari_shita" alt="左下の角画像">
<img src="migi_ue" class="migi_ue" alt="右上の角画像">
<img src="migi_shita" class="migi_shita" alt="右下の角画像">
てｓｔ
</div>

530はテーブルレイアウトで十分ということですね、分かります
つーかstrictスレでやれよおまえら

<style>
. naiyou {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-khtml-border-radius: 100px;
border-radius: 100px;
}
</style>

<div class="naiyou">
てｓｔ
</div>

divでwidthを指定しその中にulでリストを作ったのですが、

リンクをポイントした時に最下部にbackground-colorが出てくるのは>>2のQ1と言うことになるのでしょうか？
回避方法がいまいち良くわからないので教えてください

>>535
それは構造的に問題がある

テーブルレイアウトかっこわるいし、
W3C非推奨じゃね？

>>538
状況が全くわからない
出現する「最小単位の」html/cssを曝せ

テーブルレイアウトこそ王道にして最強。divなど邪道に過ぎん
W3Cが間違ってる。偉い人が常に正しいとは限らないのだよ

<style type="text/css">
div#content {width: 750px; text-align: center; background-color: #00FF00; margin-bottom: 30px}
ul#contentmenu {font-size: 0.75em; padding: 8px; margin-bottom: 7px}
ul#contentmenu li {list-style-type: none; display: inline}
ul#contentmenu li a {text-decoration: none; border-left: solid 1px #005087; color: #000000; padding: 3px 20px 3px}
ul#contentmenu li a:hover {background-color: #BAFFFD}
ul#contentmenu li.menulast a {border-right: solid 1px #005087}
address {font-size: 0.75em; margin-top: none; color: #ffffff; line-height: 30px; background-color: #005087; font-style: normal}
</style>
</head>
<body>
<div id="content">
<ul id="contentmenu">
<li><a href="link.html">リンク１</a></li>
<li><a href="link.html">リンク２</a></li>
<li class="menulast"><a href="link.html">リンク３</a></li>
</ul>
<address>NEET</address>
</div></body>

>>541
HTML/XHTML＆スタイルシートという本を読みながら継ぎ接ぎしていたら>>538のようなことになりました。

>>543
なんでaddressをmargin:0;にせずにtopだけ？

いまいち何がしたいかわかんないけど
インラインで並べてたら高さの調整が難しいでしょう。
a要素をfloatにしたほうが良いのでは。

最下部ってどこの要素だよ

>>544
特に意味合いはなかったですね、コピペした名残です。

>>545
floatは下記のように記述すれば問題は解消できたのですが、センター表示出来ないので・・・やっぱり戻して・・・試行錯誤してます
ul#footermenu li {list-style-type: none; float: left; display: inline}

センター表示出来ないというのは text-align でやろうとしているからでは。
どうして margin でやらないの。

>>546
addressの部分になります。IE6で表示するとdivで指定するbackground-colorがaddressより下に表示されてしまうのです。
Firefoxではこのような現象が出ず、色々探していたら>>2のQ1なのではにのかなと勝手な解釈をしていますが・・・

>>548
text-align: center;はセンター表示でき便利なので使いました。

>>549
margin-top:noneをmargin:0にしたらいい

<style type="text/css">
div#content {width: 750px; text-align: center; background-color: #00FF00; margin-bottom: 30px}

ul#footermenu {font-size: 0.75em;padding: 8px; margin-left: 225px; margin-bottom: 20px}

ul#contentmenu li {list-style-type: none; display: inline}
ul#contentmenu li a {text-decoration: none; border-left: solid 1px #005087; color: #000000; padding: 3px 20px 3px}
ul#contentmenu li a:hover {background-color: #BAFFFD}
ul#contentmenu li.menulast a {border-right: solid 1px #005087}
address {font-size: 0.75em; margin: 0; color: #ffffff; line-height: 30px; background-color: #005087; font-style: normal}
</style>

皆様のアドバイスを頂き上記のように修正したところ538の現象は出なくなりました。
お知恵を貸してくださり本当にありがとうございました。

>>548氏のmargin指定ですがliが増えるたびに変更していくのが少々面倒ですが、慣れることにします。

別に見た目が綺麗で一緒ならどっちでもいいじゃん

糞どもが

じゃあ全部画像かPDFにすればいいってことですね

全然最小単位じゃねえな・・・

>>553
ＨＰ見る奴がいちいちソースなんて見るか
タコ

divならCSSで簡単にレイアウトを変更できる。

>>551
margin:auto を知らんのか。

２ちゃんの皆さんにテンプレになるようなサイトを作りたいんですけど
どんな情報が欲しいですか？
アフィリエイトは興味ないのでやりません

>>558
スレ違い

↑
人に聞かないと出来ないレベルの奴の作るサイトなんてみねーよ

少なくともてめえ（>>560）よりはスキルはあるんだぜ

>>561
大体お前の作る糞サイトなんて誰もみたかねーよ

>>558
こいつのサイトなんて見た日には2.0の視力が0.1まで落ちてしまうよｗ

>>563
スキルがない人はその典型的な反論しかできないんだなｗｗｗｗｗｗｗｗｗｗ
くやしいのうｗｗｗくやしいのうｗｗｗうぇｗっうぇｗｗｗｗｗｗｗｗ

頭のない人間は悲しいね

スキルも頭も視力もない俺は、逆にハッピー！！

<P>と<Div>の使い分け方がいまいち分かりません。

分らなくても問題ない

>>567
使い分けというか、違うんだから

そのまえにpをPと書くな！

Divはいいのかw

CSSを勉強している初心者です。
他人からホームページの管理を頼まれ、今までのTableレイアウトをCSSに変更中です。
段組をして<h3>タグで文字を入力したら崩れてしまいます。<h*>タグなしで<ul>タグだけなら
無問題です。

IE7とFirefoxだと問題はないのですが、IE6で見るとfloatのレイアウトが崩れます。
下記のJustシステムのInternetDiskにファイルを置きました。全部を落として見て下さい。

index1.html　　IE7・IE6・Firefox どれでも異常なし。
index2.html　　文字を入れるとIE7・Firefox　は正常　IE6で崩れる。
index3.html　　外枠を10px大きくすると上下にずれる事はないです。もちろん使えません。

http://pub.idisk-just.com/fview/LqvORQjHOEnYSoLO09-wjKBxU7siPBru1OlaZRSYYgaXXVSjSpwp3dNKrHKYsC9t

何処に問題があるのかお教えいただけないでしょうか。

せめてzipで固めてくれよ
１１個も落とすのめんどくさくてやりたかねえよ

圧縮してhtml.zipにまとめて、今アップロードしました。

HTML
<hr class="left1" width="300" align="left"><h2>あいうえお</h2><hr class="right1" width="300" align="right">

CSS
h2 {
color: #ff66ff;
text-align: center;
}

hr.left1 {
filter: alpha(style=1, opacity=0, finishopacity=100)
}

hr.right1 {
filter: alpha(style=1, opacity=100, finishopacity=0)
}

↑これだと下記のように改行になってしまうのですが

-----------
あいうえお
　　　　　　　　　　　　　　　　----------------

----------
あいうえお
　　　　　　　　　　　　　　　-------------

こうです

↓こうするにはCSSでどう書いたら宜しいのでしょうか？

------------ あいうえお --------------

　←　　　　　　　　　　　　　　　　　　　　　　　→

線の部分はフィルターで矢印の方向に向かって消えていく感じにしたいのですが
ご教授ください
HTML/CSSの記述例頂ければ幸いです

ごめんなさい。
きもちわるいです。

言いたかないが、テーブルレイアウトの方がが幸せな奴もいるんだろう

ブックマークツールバーのフォルダの
ポップアップの幅を広げたいたいのですが
どのようにcssに記述すればいいでしょうか？

http://up2.viploader.net/pic/src/viploader972573.png

>>580
>>580
ttp://forum.mozilla.gr.jp/cbbs.cgi?mode=al2&namber=10026&rev=&&KLOG=66

ありがとう

>>572
出来ないもの引き受けるなよ

>>572
何をどうしたいのか説明しないと答えようがない

ページの部分修正を頼まれていますが、CSS組み替えは勝手に勉強のためテストしています。
ExcelやWord以外PC駄目な人の集まりです。もちろん「HTMLって何？」状態。

>>584
IE6でindex2.htmlをinndex.1htmlの様に水平に並べて表示したいのです。
そのためにCSSをどう書き換えたら良いのか？
もちろんIE7やFirefoxでも正しく表示させたいです。

>>107
ウンチ舐めたことあるの？
どんな味だった？

>>585
divの使い過ぎなんだよね
ちなみに文字が入ってるところの背景に単色画像が使われてるけど
例として単色画像を使ってるのなら別にいいけど、実際のサイトでも単色なら
cssで背景色を指定してあげた方がユーザーに優しい

>>587
事故解決しました。
>divの使い過ぎなんだよね
ヒントになりました。<div>を１個外したらCSSが無効になり
#header #headercont #topleft h3 {
の中のどれかが原因とわかり一つずつ外して調べた。

width: 100%;が原因でした。
お騒がせしました。InternetDiskに修正したindex4.htmlとstyle4.cssをあげました。

本当の背景は画像をスライスしたものです。わかりやすいよう単色GIFに入れ替えました。

数値を変えて色々やってみたのですが、ブックマークツールバーの表示名の幅は変わるのですが
フォルダを開いた時のポップアップで表示される幅が変わりません。アドバイスお願いします。

>>589
chrome://browser/content/browser.xul
の
window#main-window > toolbox#navigator-toolbox > toolbar#toolbar-menubar > toolbaritem#menubar-items > menu#bookmarksMenu > menupopup#bookmarksMenuPopup
がメニューのツリー
ttp://www.dotup.org/uploda/www.dotup.org33127.png

複数のdiv idに共通の設定を持たせるにはどうしたらいいでしょう？
ひとつひとつに記述しないとだめですか？

>>591

div { 設定 }

または

#id1,#id2{ 設定 }

または

.test { 設定 }
<div id="id1" class="test"></div>
<div id="id2" class="test"></div>
<div id="id3" class="test"></div>

>>592
なるほど！
#id1,#id2{ 設定 } って出来るんですね
参考にします、ありがとうございました

インラインフレームのスクロールバー色変えたらブラウザのバー色も変わってしまったのですが
何がいけないのでしょう？
ｈｔｍｌは普通に<iframe></iframe>で


CSSは
<style type="text/css">
<!--
html,body {
scrollbar-arrow-color: #000000;
scrollbar-face-color: #666666;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #666666;
scrollbar-track-color: #cccccc;
}
-->
</style>

です。

IE独自拡張なんか知らね

>>595
IE独自拡張てなんでわかるの？

ｇｇｒｋｓ

それぐらいおしえてよ

>>595は初心者だからIE独自のプロパティを使いこなせないだけって言えばいいのに

scrollbarとかfilterとかはMSの独自プロパティ
IEのブラウザシェアが50％台まで落ちてるから使わないのがデフォ

スクロールバーのデザインを変えるcssはIE独自の機能。
Operaでも一部使えるけど、閲覧者の設定次第では機能しない。

んで、>>594のcssはもちろんインラインで呼び出されるhtmlファイルの方に書いてるんだよな？
「ブラウザのバー色」がどこなのかわからんので、スクリーンショットうｐしてくれ。

>>600
マジ？エディタから出したのにデフォ扱いなの？
凄いねみんな知識豊富で

ちなみにIEでおｋなのにFirefoxだと並べた写真ズレルんですがこれも使ってる
プロパティがダメとかですか？

>>601
CSSは同じじゃいけないのですか？同じにしてます。
ブラウザのバー色って、
これがブラウザだとしたら

--------
｜　　　　　｜
｜　　　　　｜
｜　　　　　｜←この部分に出てくるスクロールバーのことです
｜　　　　　｜
｜　　　　　｜

>>602
CSSの解釈はIEはおかしいからそっちに合わせるな
FxやOperaに合わせてCSSを組んでからIE用にちょこっと修正しろ

インラインフレームする時は

作ってるHPの　　　　　　　　<iframe>内にいれるURL先の
HTML・CSS　　　　　　　　　　HTML・CSS

と分けないといけないのですか？

>>603
cssやhtmlの要素は、IEでしか使えない（というよりMicroSoft社が勝手に作った）ものがある
それ以外にも、IEだとレイアウトに余計な隙間が入ったりするという、変なことが起きたりもする
なので、普段IEで動作確認しててOKでも、それ以外のブラウザだとボロボロになることが多々ある
というわけで、>>604の言うとおり、他のブラウザで確認した後でIEで確認するという順番の方がオススメ

>>605
その通り
そもそもフレーム自体がそういうもの
まぁ、外部CSSを<link>で呼び出す場合は、その限りでもないが

>>604
何か便利なサイトありますか？これがIEだと使えるけどFirefox、Operaだと使えないとか
知識ないもので・・・

エディタなんかもこれを使ったほうが良いとかありますか？

>>607
つ ttp://www.tagindex.com/
エディタはしらん

>>606
＞＞それ以外のブラウザだとボロボロになることが多々ある

いまその状態です。今後そういたします。ありがとうございます。


なんだよちくしょうープロパティくらい万国共通にしろよ、ブラウザごとに
動きが違うってなんだよ作る側は大変じゃないか

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

>>609
ブラウザ毎に違うってよりIEだけが死んでいる状態
その他はそう違わないよ

>>607
ttp://hp.vector.co.jp/authors/VA022006/css/
ttp://az-store.nrym.org/archive/mynotes/lecture/
ttp://deztec.jp/lecture/rn/index.html
ttp://www.w-frontier.com/software/ezhtml.html
ttps://addons.mozilla.org/ja/firefox/addon/1843

>>600
＞IEのブラウザシェアが50％台まで落ちてるから
そんなに落ちてるのか？
まあIE7が重くてクソだったからな。

国によっては30%切ってるらしいが、日本だとまだ60%はあるだろう

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

すみません。他スレで質問したのですが誰もいない様ですのでこちらで
質問させて下さい。

３つのDIV（A　B　C）
を横に並べるにはどうすれば良いでしょうか？

２つ（A、B）の場合だと

A
　float:left

B
　float:right

で良いのですが３つ並べる方法が分かりません。

>>615
「css　3カラム」でググれば色々出てくるよ

>>616
ありがとうございます。
divを使わずテーブルを使うことにより無事解決しました。

そもそもdivでレイアウトを調節するよりテーブルを使った方が手軽にレイアウトを作れる
気がするのですが皆さんはどう思われますか？

>>617
display:inline-block;

これだけでおｋ

>>617
素人ならtableで良い

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

>>619
デザイン（WEB)については素人なのでテーブルを使います

>>615
全部float leftでいいんだよ。

<div style=""></div>のタグ使ったときCSSはどうやって指定したらいいのですか？

>>622
どういうデザインにしたいんですか？
それによって指定内容は全然違います

<div style="width: 100%; filter: glow(color=red);">
<img src="example1.gif" alt="［サンプル］" style="margin: 10px;">
</div>


.example {
filter: glow(color=red, strength=100);
}

画像を発光させたくて記述例もあるのですがいまいち良くわからなくて・・・

>>624
IE独自拡張でCSSじゃないのでスレ違い

>>625
IEでもｆirefoxでも画像周り発光してるのありますがそれは発光ではなく別の方法に
なるんですか？

>>626
その画像をローカルに保存して表示してみれば分かる

>>626
filterはIEでしか機能しない
なのでFxで発光してるとしたら、それも含めて画像とかじゃないか？
むしろ独自拡張以外のCSSで発光させてるサイトがあるなら、実際にそのサイトを見てみたい

>>627
保存して見ましたが画像周りは発光してないです

と言うことは、フィルター画像かもしくは透過でしょうか？

透けるテーブルとかありますよね、それ利用してろのかな？

もういいや解らない。

>>629-630
せめて画像うｐか該当サイトのURL載せれば答えてもらえるんじゃね？
解答者はエスパーじゃないから、実物見ないことにはわかるわけないじゃん

>>621さん
ありがとうございます！！
助かりました。
３つ位のボックスならテーブルを使わずにfloat:leftやった方が手っ取り速いですね。
ありがとうございました。

テーブルでってネタじゃなかったのかｙｐ

★　　あいうえおかきくけこ
★　　さしすせそなにぬねの

上記のように横並びに書きたく、星の色と
文字の色を変えたいのですが、その際タグは何使えばいいでしょうか？
<p></p>で囲うと段落つくし、こういう時はなに使うのですか？

span

マルチすんなはげ

>>634
これでどうっすか？

http://pc11.2ch.net/test/read.cgi/hp/1238669869/380

>>635
<p><span style="background-color: #00ff99">◆</span>あいうえお</p>

これで横並びにはなるのですが、スパンだと
＿＿
｜◆｜ こんな風に四角の部分だけ色が変わるだけなのですがこれは何とかなりませんか？
￣￣

はあ？

>>638
そういう仕様なので何ともなりません。

>>634
.ster{
color:blue;
}
.ster:first-letter{
color:red;
}
<div class="ster">★　あいうえお</ster>

first-letter疑似要素で最初の文字だけを赤色に指定

<div class="ster">★　あいうえお</div>
だわ、しかもスペル間違ってた

>>641-642
おーーーーすごい！出来ましたありがとう！

ググッテもなかなか答えが出てこなかったのです。

>>638
おまえは背景色を変えたいのか？background-colorは背景だぞ
フォントの色を変えたいなら単なるcolorだ

マルチに解答しすぎ

好きな女性を自分の色に変えるにはどうすればいいですか？

まずホームセンターに行きます

ム板の今日のマルチ乙
http://pc12.2ch.net/test/read.cgi/tech/1237091698/493
http://pc12.2ch.net/test/read.cgi/tech/1232055225/770
http://pc12.2ch.net/test/read.cgi/tech/1217575832/499
http://pc12.2ch.net/test/read.cgi/tech/1235927586/774
http://pc12.2ch.net/test/read.cgi/tech/1212498448/876
http://pc12.2ch.net/test/read.cgi/tech/1212409946/66
http://pc12.2ch.net/test/read.cgi/tech/1217575832/499
http://pc12.2ch.net/test/read.cgi/tech/1192201659/808
http://pc12.2ch.net/test/read.cgi/tech/1205156417/821
http://pc12.2ch.net/test/read.cgi/tech/1238032584/16
http://pc12.2ch.net/test/read.cgi/tech/1224719784/934

<li>で書いて、CSSで隙間を調整したけど火狐とlEで微妙に違うんだけど何故ですか？

メールの設定なんですが
<a href="mailto:メールアドレス[email protected]&body=住所　名前　質問内容">Mail</a>

これだと本文部分の初期値の項目が横並びになってしまうのですが
縦ならびにするにはどうしたら宜しいでしょうか？


名前　住所　質問内容

↑
これを

名前
住所
質問内容

こうしたいのですがご指導お願いします。

>>650
Googleって知ってる？同じようなキーワード調べたの？

調べてない奴に教えるきないわ

>>651
出来ました！ありがとう！あなたの言葉がキーワードになりました！
ありがとう！

>>651
IEだとOKなのですが、他だと文字化けしてしまいます。

>>653
そもそも、そんなお粗末なメールフォーム作ったひには(笑)

>>651
エンコードでできた！
>>654
フォーム用は別です

>>655
使い分ける意味あるの？

>>656
Googleって知ってる？同じようなキーワード調べたの？

調べてない奴に教えるきないわ

先にマルチポストでググれよ

すみまへん。画像に白のフィルター掛けたいのですが、
黒のフィルターになってしまいまふ。
どうしたらいいんでしょうか？あとIE以外でも表示される場合は、
これ以外になにかあるのでしょうか？
IEだけで我慢しろと言うなら我慢しまふ。

style="filter:alpha(opacity=100);" onMouseover="this.filters['alpha'].opacity=50" onMouseout="this.filters['alpha'].opacity=100"

よろしくでふ。

IEだけで我慢しろ

白のフィルターの意味がわからんが、透明度ならオペラ以外は対応してる。
ブラウザ毎にやり方が違うがね。

>>661
Operaは対応してる

>>660-662
ありがとサンキューでおざす！
白のフィルターってのは、あれ入れると自分のブログの確認画面や、
あのコード見つけたサイトでは、マウスオンで白っぽいフィルターがかかるんやけど、
実際ブログに載せると、フィルターが黒くなるんでごわす。
これはバックカラーに関係するんかなぁ。
ブログの確認画面や、コードを拾ったサイトのバックカラーは、白なんやよね。
今、ちょっと色変えてしてみるわ〜。

あ、やっぱバックカラーの色でフィルターの色が変わったやぁ。
白くしたらフィルターも白で、赤にしたらフィルターも赤だったよ。
白のフィルターにしたいので、またちょっとくぐってきますー♪

Operaでのやり方おせーて

>>664
女の子紹介してくれるなら教えてあげてもいいよ

色をつけるのは見つかったんやけど、
style="filter:gray" onmouseover="this.style.filter=''" onmouseout="this.style.filter='gray'"
これはグレーしかできないのかなぁ。
grayをWhiteに変えてもできへんよ。
フィルターとグレー以外で色つけるのは無理なんかなぁ。

テーブルでバックカラーで色つけたら、できたんやけど、
画像からテーブルのバックカラーが少しはみ出てしまうわぁ〜

>>646
推測だが、
　女 {color : '自分好みの色'}
とかざっくり書いてるんじゃないか？　もしそうなら、ほかの奴が規定した
　女#ID名 {color : 'やつ好みの色'}
の方が詳細度の高いため優先されちまってるのかもしれん。

ターゲットのID名…つまり携帯電話番号を手にいれるのがまず先といえそうだ。

>>666-667
そこで指定してる gray は グレースケールという罠。

Terapad使ってるんですが、HTMLには便利ですが、CSSやJavaScriptには、今何列めを書いてるのか出てこないし、色分けも無くて変えようかなと思っています
何かいいソフトないでしょうか？

terapadは使うな！！！！！
波ダッシュが化けるテキストエディタなんて使うな！！！！
内部文字コードがshift_jisのテキストエディタは使うな！！！！

emeditor(有料・無料版どちらもあり）を使え！！！！
秀丸（有料を使え！！！！
unicode版サクラエディタ（無料）を使え！！！！

>>670
firebugとか画面見ながら色分けされたCSSを編集できるけど

>>674
terapadで別に化けてませんがw
@2k、XP、Vista

そんなあなたの環境だけのバグを全体みたいにして吐かれてもねーw

>>673
さて・・・俺がURLを晒した時点で貴様の負けが確定するんだが
恥をかく準備はいいかね？

でももう少し泳がせてから仕留めてやろうか
もっと煽ってみろよ>>673

>>674
つ[ﾄﾞｿﾞ]w

　　　　　　　　ゴガギーン
　　　　　　　　　　　　　ドッカン
　　　　　　　　　ｍ　　　　ドッカン
　　＝＝＝＝＝）　）)　　　　　　　　　☆
　　　　　 ∧_∧ |　|　　　　　　　　　／　　　　　　　　　　／￣￣￣￣￣￣￣￣￣￣￣
　　　　　（　　　）|　|＿＿＿＿＿　　　　∧＿∧　　　＜　　おらっ！出てこい>>673早く煽ってこいや！！！
　　　　　「　⌒￣　|　　　|　　　　||　　　（´Д｀　）　　　　＼＿＿＿＿＿＿＿＿＿＿＿
　　　　　|　　　/ ￣　　　|　　　　|/　 　 「 　　　＼
　　　　　|　　　|　|　　　　|　　　　||　　　 ||　　 /＼＼
　　　　　|　　　 | |　　　　|　　　　|　　へ//|　　|　　| |
　　　　　|　　　 | | 　　　ﾛ|ﾛ　　　|／,へ ＼|　　|　 | |
　　　　　|　∧　| |　　　　|　　　　|／　　＼　　/　（　）
　　　　　|　|　|　|〈　　　　|　　　　|　　　　　|　|
　　　　 / /　/ / |　　/ 　|　　　 〈|　　　　　|　|
　　　 / /　 / /　|　　　　|　　　　||　　　　　 |　|
　　　/ /　/ /　=-----=--------　　　　 |　|

673逃亡きめえｗｗｗ

ちょwwwwwwwwwwwうぜーーーーーーーーーーーwwwwwwwwwwwwwwwwwwwwwwww

>>674-675
>>677-678

かかって鯉やあぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁwwwwwwwwwwww

んで673の反撃ﾏﾀﾞｰ
理論武装してｺﾅｲﾉ？？？？

おいおい、ワクテカしてるんだから早く始めろよ！ｗ

ねーよwwwwwwww 地雷ふんだwwwwwwwwwwwwww
やったね

>>674
URLまだーﾁﾝﾁﾝｺｽｺｽ

そもそも>>674が何を言いたいのかがサッパリ分からん
負けって・・・ｗ

>>683
お前もか

まあこれでも読んで勉強したまえ
ttp://www.informe.co.jp/useful/character/character14.html

違う違う、URLを出すという事の意味が分からないの

>>686
それはゆとりだから

もうめんどくさいな
terapadが何で嫌われるの変わらないなら自分で勉強しろ
煽って教えてもらうつもりかもしれないけどじゃあな

嫌われるって言うけど利用者もある程度いるわけで

×嫌われる
○使えない

×利用者もある程度いるわけで
○初心者が使っているわけで

>>690
こういうソフトってのは自然淘汰される。
初心者が使ってるにせよ初心者に使いよかったらそれでいいんだよ。

terapadは使うな！！！！！

途中送信になっちゃった。

＞terapadは使うな！！！！！

なんて書き方をするから反発を招いているわけだな。

初心者がterapadを使ってるといつか壁にぶち当たる
機能的な面でもそうだが、肝心の文字コードの面でどうにもならない日がくる
プロでterapadのそういうデメリットを知った上で意図的にterapadを使うならいいが
何も知らないでterapadを使ってるならやめろってこった
ここでterapad信者は初心者か作者乙としか言いようがない

理由がわからない人はまだそのレベルに達してないだけ
別にレベルも高いわけじゃない
terapadで満足してるなら止める理由は誰にもないけどな

HP入門サイトなどで初心者にterapadを勧めているのが間違い
そういうサイトは初心者が管理してるので見てはいけない
本当に知識のある人が入門サイトをやってるならフリーのサクラエディタか秀丸やEmEditorを勧めるはずだ

これこれこういう理由で使わない方がいいって書けばいいものを

＞terapadは使うな！！！！！

＞そういうサイトは初心者が管理してるので見てはいけない

こういう書き方をするからだめなんだって。

ならそれを調べればいいだけだろ
なんでも煽れば教えてもらえると勘違いしすぎ
壁にぶち当たるまで使い続けてればいいよ

>>689
あおってるのは使うなって言ってる方だろ。
ちなみに俺はterapadは持ってるけどほとんど使ってません。

ちょっとｽﾚ違いかもしれませんが質問させて下さい。

Illustratorで複数オブジェクトの間隔を一度に狭くしたり、大きくしたりする方法はありますか？

どうやら私が使っているIllustratorがCSと古い為に無い様ですね。

あまり詳しくないけど端同士の位置を狭めたり広げたあと
整列使って同間隔にしたらいいんじゃないすか？

>>702
いや、そもそもそういった機能がCSだと無いみたいです。

>>703
windows版でしたらメニューの
ウィンドウ→整列のところにチェックいれてますか？
mac版はちょっと画面分らないですけど
まぁ画像系のスレでご確認下さい

つまり秀丸最強と

<dl><dt><dd>で困ったことがあるので教えてください。
<dd>内で<div>を使って左寄せ、右寄せは使って良いものでしょうか？

また
<dt>〜</dt>
<dd>〜</dd>
<br class="clear-both" />
<dt>〜</dt>
<dd>〜</dd>
のように記述しても良いのでしょうか？

DW8を使っているのですが上記のようにしないと見た目が崩れます。
<dt>〜</dt>
<dd>〜<br class="clear-both" /></dd>
これだと崩れます。

目的のddもしくはdtにクラス指定してtext-alignぢゃだめなん？

>>707
<dd>内で3カラムにしています。

解決しました。

<dd>に指定していた幅をなくして

<dd>
<div class="">〜</div>
<br class="bothclear" />
</dd>
のクラスで幅を指定することによりうまくいきました。

ただソースがごちゃごちゃです - -；

DW8のプレビューだけでみてないよね？
ちゃんとブラウザでプレビューしてるよね？

<div class="">〜</div>
<br class="bothclear" />

↑こいつになにを言っても無駄だろう

ddはblockだから、要素内にdiv作る必要ないのでは？

>>710
IEとOperaとFireFoxで確認しましたが問題なかったです。

>>712
ブラウザ上では問題なかったのですが、DW8で表示がおかしかったので気持ち悪かったです。
<dd></dd>の表示の中に次の<dt></dt>が入ってきちゃいます。

な、無駄だろ

テーブルとボタンを横に並べたいのですが、
改行してテーブルとボタンで２行になってしまいます。

改行させないにはどうすればいいのでしょうか。

float

初心者なもんで凄く気になってます
tableの中にtableの入れ子って正直どうなんだろう

どういう表を作りたいの？

>>717
10×10のテーブルの各セル内に10×10のテーブルを入れて、
それを繰り返し10重の入れ子作ってブラウザで見てみな。

>>716
ありがとうございます。
簡単にできるかと思ってましたが、意外にめんどくさいですね。

表を作りたいわけではないのですが
外注かなんかで恐らくプロが作ったものだろうと思われるサイトを見た時に
そんな造りになっていたのがショックだったもので

　＿＿＿＿　　＿＿＿＿　　＿＿＿＿　
｜　１　　　｜｜　１　　　｜｜　１　　　｜
｜　２　　　｜｜　２　　　｜｜　２　　　｜
｜＿３＿　｜｜＿３＿　｜｜＿３＿　｜

分かりずらいかもしれませんがこんなのが何個もある感じです

自分としてはdivの中に見出しだったりなんだりで設計出来るだろうと思っていたのですが
ソースを見たらtableの入れ子だったもので不思議に思った次第です

別に不思議でもなんでもない・・・
CSSを使わないでレイアウトすりゃテーブルになるだけのこと

DWの画面表示なんてあてにならない。
DW8どころか、CS3もCS4もdｌ、dt、ddの表示は苦手じゃん

どうでもいいです

質問なんですが、時間によって適用する
cssを変えることは出来ますか？

例:
7:00から17:00まではAのcss
17:00から7:00まではBのcss

こんな感じにする事は出来ますか？

できる。
が、css単独じゃ無理かな。javascript使うか、サーバサイド言語使うかしなきゃかな。

>>726
レスありがとうございます！
そのスクリプトって難しいですか？

>>727
ググったらあるよ

>>728
質問ばっかりですみませんが、
どんな単語でググれば良いでしょうか？
ほんとすいません

>>729
あなたの質問にある言葉「時間によって切り替え

ごめん。途中だった。

「時間によって切り替え 」と「css」と「javascript」で出てきます。

>>730
ありがとうございます！
早速ググって来ます！

ググったら色々出て来ました！
教えていただき感謝です！
ありがとうございました！

class属性を class="admin.name" のようにしたとき、
cssでのセレクタはどう書けばいいですか。
セレクタでは「.foo」のように「.」+「class属性値」で指定しますが、
class属性値自体に「.」を含んでいる場合はセレクタでどのように指定すればいのか分かりません。
どなたかアドバイスを。

[class="admin.name"]

. はセレクタ名に使っちゃいけないのでは？

どうしても使うのなら . の前にバックスラッシュ � を付けて。
こんな感じ→ �.

セレクタで使用できる文字

CSSのセレクタ名で使える文字は、HTMLでの名前文字より制約が厳しく、「"使用できる文字は大小アルファベットと数
字 [A-Za-z0-9] 、ASCII以外のUnicode文字、およびハイフン（-）とアンダースコア（_）に限る。識別名は数字もしくはハイ
フンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはでき
ない"」とされています。HTMLではコロン( : )、ピリオド( . )も2文字目以降の名前文字として認められているので注意してくだ
さい。
ttp://www.kanzaki.com/docs/html/htminfo17.html

使っちゃいけないなんて、仕様書のどこにも書いてないだろーに。いいかげんなこと書いちゃだめだ。

[class~="admin.name"]
.admin\.name
.admin\2E name

クラス名にピリオド含めないのが、一番いいけど

>>736
- と _ 以外の記号は使っちゃ駄目

どっちだよ

使えないんじゃなくて構文がおかしくなるんだろ
div.testなんて書いたら<div>のclass="test"に適用されるし

>>どっちだよ
739がまちがいだよ。
ピリオドはクラス属性値に使える。
cssで使える文字は
specificationの4.1.3にあるとおり。
\でエスケープするか、UCSのコード番号で指定すれば良いだけのこと。

HTMLでclass属性値に使える文字
と
CSSでセレクタに使える文字
とは違うんだけど

ばっかじゃねーの

随分くやしそうだな

HTMLでclass属性値に使える文字 の集合はCSSで選択子に使える文字の集合よりずっーと多い。
だから、その差分をエスケープしたりコード番号にしたりする
だけど実装はどうなん？大丈夫なん？
エスケープしたりコード番号にしたりしなきゃいけないのを「使える文字」と表現してよろしいの？
つか、どう考えても作業効率悪いだろう

通りがかりだけど「使えない」って認識した方がいいとおもう。

クラス指定子でなんとか指定することはできるけど普通そんなクラス名はつけない、ってことでいいじゃん

>>735-747
どうもありがとうございます。
>>737にあるように、クラス属性値で使える文字(HTMLの話)とセレクタで使える文字(CSSの話)とが違うことは知りませんでした。
あきらめてピリオドを使わないようにします。

>>738
>[class~="admin.name"]
これはセレクタとして指定しているのではなくて属性値として指定しているわけですよね。
だからこれをもって「セレクタでもピリオドが使える」という主張は間違いなんですね。なるほど。

>>745
実装で問題あるのは確認されてない、エスケープで大丈夫
というかそれが駄目なんだったらJSの方で最初に問題になってる

>>748
「セレクタでもピリオドが使える」でいいんだよ
それはセレクタの書き方の一種

auとsoftbankは実機でエスケープだめだな。全機種かどうかはわからないが。
携帯も一応視野には入れておきたい人への情報。
>>750
「セレクタではピリオドを直接使えない」

そうなのか…

>>751
そもそもケータイではHTML自体怪しいんだしここで扱う話じゃない
だったらJSも「直接扱えない」なんて変な言い方するか？ｗ
「扱える」「エスケープが必要な文字もある」ってだけの話だ

>>753
ま、糞ブラウザだから眼中になければ無視してかまわないから「一応」と書いといたんだけど。スレ違いとはいえ情報として必要な人もいるかなと思って。否定材料にはしません。
「セレクタではピリオドを直接使えない」わざわざ変な言い方じゃないと思うよ。だってわざわざ変なことしないと扱えないんだから
「セレクタでもピリオドを使える」の方が誤解を生む。「セレクタでも(ゴニョゴニョすれば)ピリオドを使える」なんだからさー
JavaScriptはまた別の話しでしょう

>>754
まず改行を覚えような
クソブラウザ云々以前にケータイはケータイスレでが原則だよ

>>753
「エスケープ」している時点で「直接扱えていない」わけで

>>755
改行してるけどなー。
糞ブラウザなんじゃない？
携帯のことは否定の根拠には致しません。
スレ違いはすみませんでした。
よろしいでしょうか。

ここは初心者スレなんだから初心者にわかりやすいやり方を推奨。
補足事項として「こうすれば使えるが携帯ブラウザ等では〜なのであまりお勧めできません」
というのが妥当なところじゃないの。

>>756
エスケープの意味勘違いしてね？
直接扱えるからエスケープするんだろう

>>759
じゃあエスケープもなんにもしないでそのまま使ってなさい

>>758
どうせもういつものごとく質問者はいないんだろうがなｗ

>>760
読解力なさすぎだろＪＫ

>>761
もう見苦しいよ

c も java も javascript も ruby も python も改行を直接扱えない。なぜなら\nとかって書くから。ファイルも直接扱えない。なせならファイルそのものを直接書かないから。
正規表現は、* や \ や ( などの文字を直接扱えない。なぜならエスケープして指定するから。
html は、画像を直接扱えない。なぜなら置換インライン要素で書くから。

こうして並べて書くと、ほんとにその表現でいいのか？という疑問がひしひしと
沸くのだが。

言語が「扱う」かどうかと、プログラマが「どう指定するか」とは、区別した方が誤解を産みにくい表現になると思う。

テーブルレイアウトにしたがる勢力に対抗するには、どーしたらいいですか？
CSS使いの知恵を教えてください。

div

>>763
一番上以外は直接扱うの範囲だな

>>764
しないでよろしい

>>765

「div？ それじゃレイアウトできないだろ？こういうときはtableを使うんだよ。えっへん。」
あなたの呟きはテーブルレイアウターには理解されなかったようだ。

ENDING-1 いつも通りの日々。

>>767
じゃあどうしようもねぇじゃねぇかｗｗｗｗ

>>766

「CSSにした方が…」そう言おうと思った矢先、頭の中に天啓が閃いた。
『対抗しないでよろしい』
うん。ここでぶつかるのは得策じゃないよな。もらえるお金は一緒だし。
「…」
数年後。CSSを使う機会もなく、書き方も忘れてしまったようだ。
「じゃ。テーブルでレイアウトお願いね」

ENDING-1 いつも通りの日々

>>763
rubyにはヒアドキュメントがあるしPythonにも複数行の文字列があるし改行を直接扱えるな
すごくどうでもいいけど

>>770
そういう処理を入れることを直接扱わないという奴が一人いるだけだろう。
\nだって充分直接扱ってる。

俺はモニターを直接見ていないし、ファイルにも直接は書いてない

セレクタでピリオドを直接使える
馬鹿だろこいつｗｗｗ

>>759-760を見る限りバカなのは>>773だな

そこは760だと言ってやれｗ
しかしこのネタもう飽きた

まだまだ叩くぜｗｗｗ

>759:Name_Not_Found :2009/04/20(月) 21:23:48 ID:??? [sage]
>>>756
>エスケープの意味勘違いしてね？
>直接扱えるからエスケープするんだろう

↑
素敵なお花畑ですねｗ

何と言うｵﾏｴｶﾞﾅｰ

うぜー

だから直接使えるんだけど
「セレクタでは直接ピリオドを使える」
ってそこだけ言ったら引っ掛けというか、詭弁だろ。
「えっ？！」ってなるだろ。それから蘊蓄垂れ流して得意になりたいのか。
そんな誤解を生む表現には同意出来ないな。
ここは初心者スレなんだから書くならきちんと書いてやれ。

>>780
>>734を100回読んでこい
質問内容は使い方だ
だけら答えはエスケープであって初心者であろうと引っかかる奴はどこにもいないはずだった
それをできないと言い出す馬鹿がいただけの話だ
だから「できる」「できない」の話になって、これならば答えは「できる」一択だ
初めから初心者に誤解を与える余地もない話だった

ていうか書いてから気付いたけどいつも醜態を晒す例に馬鹿に口調がそっくりだな
よく考えりゃ最初から全部こいつだったんだろうか
うわー

タクトができないと答えちゃったので、
できるけど分かりやすい表現しないと（俺が）騙されるだろ！
という詭弁で議論をすり替えようとしている訳ですね、分かります

そして分かりやすい表現以前の質問だった事で自爆したいつものパターンか

だからいいかげん飽きたって

なんでこんなに必死なの？

タクトはいつも必死
あの情熱だけは尊敬す…しないしないｗ

「セレクタでは直接ピリオドを使える」は、いくらなんでもはしょり過ぎだわ・・・

通りがかりの初心者です。
「使わない方がいい」という説明の方がありがたいです。

>>788
タクト乙

ちがうよー

バレないと思ってるのかね

違うから違うって言ってるんでー
ちなみに私はこの議論に参加してません。

そもそもセレクタにエスケープなんてきくのか？

>>793
効くよ
実際運用しているところもある

>>792
全然通りすがりじゃないなタクトWeb先生ポナパルト

ポナに構ってる奴もいいかげんにしてくれ

テーブルのCSS
<table style="border:0px;">もうしません。許して下さい。</table>

HTMLとして間違ってる

それに table タグはもっと多段に入れ子にして初めてその成果を発揮する。テーブルレイアウターの常識だ。

leftの値が0以外になっている要素を指定するにはどうしたらいいですか？

初心者なんですけど質問してもよろしいですか。

<div id="container">
<div id="main">メイン</div>
<div id="sidebar-left">サイドバー左</div>
<div id="sidebar-right">サイドバー右</div>
</div>

こういうHTML構成で、3カラムを実現したいと思うのですが
↓のようにしても、真ん中に「メイン」が表示されません。

#container{float: left;width: 800px;}
#main{float: right;width: 400px;}
#sidebar-left{float: left;width: 200px;}
#sidebar-right{float: right;width: 200px;}

positionを使わず、HTMLの構造を変えずに実現する方法はありますでしょうか？

どういう表示になるの？
使ってるブラウザは？

>>802
containerにfloat指定は必要ないでしょ。
sidebar-leftとmainを<div id="○○"></div>でくくる。
#○○にfloat:left指定をして、sidebar-rightをfloat:rightで良いかと。

HTMLの構造を変えずにって言ってるだろーがぁぁぁッ

だがっしかしっっ。目を寄り目にしたら真ん中に見えるよーになりました。

HTMLを変更せず、はともかく。
positionを使わず、の理由が知りたいとこだな。無駄に難しくしてる感が。

#main {float:left; margin-left:200px; width:400px;}
#sidebar-left {float:left; margin-left:-600px; width:200px;}
#sidebar-right { float:right; width:200px;}

こんな感じじゃね？

あと、id名にleftとかrightとかを含めるのは微妙だな。

>>807
素人乙

>>808
レイアウト変更時に、leftの名がついた箇所を右寄せするよーなコードにして恥かいとけ
命名センスが疑われるだろ

どうでもいいこと

HTMLを変更したくないなら尚更>>807の言う通り

>>806
ネガティブマージン使うんですね・・。参考になりました。

あと、id名は質問する時にわかりやすくする為に付けただけです。

その程度と思われていたわけだ ｗ
まあ当たってるがｗｗｗｗ

>>809
レイアウト変更することない場合は関係ないだろ
お前の知識を疑っちまうぜ

>>814
span class="red"と同じこと

>>815
色変更することない場合は関係ないだろ
お前の知識を疑っちまうぜ





という発言待ち。

span class="red"なんてまず変更されることはないと断言できる
てかそのくらい変えるのなんてわけないだろ初心者じゃあるまいし

class="bold"とかclass="size14"なんてのとセットになってるのが相場だーー。
だから、変更要望があがるころには廃棄されるw
確かに変更はされないwww

クラス名とかどうでもいいから、自分の子どもの名前はちゃんと考えろよ

>>819
一生懸命かんがえて、未来来(ミラクル)にしますた！

DQN親乙

てか、style="width:100px"をwidth100としたクラスにする場合あるけど、
それが何か問題あるのか？変更しなければ良いだけだし、わかりやすいだろ。

相場どおりだーw
ストーリーどおりだーーーw

ID名にしようがclassにしようが
分かりやすいようにするのが基本じゃないの

作ってる人間が問題なければ何でもいいんだよんなもの

class="witdh100 red bold itaric center" とか書いてれば問題ないんじゃないかな。
新人君が置換してくれるから。

↑ >>822の存在を。

>>822
誰も真似することのできないオリジナリティー

うーんなかなかいいね。ただ、ここのとこ数ビクセル狭くして貰えるかな？

できますたっ
つ class="width99 red bold italic center"

style属性で直書きしちゃえよ

たぶんこの流れは>>809がプライドを傷つけられて>>829を書いてると思うよ

>>829
土木建築関係の人ですね

class="style001"(笑)

<body id="nice"></body>
BODYタグにid="nice" でナイスバディになりますか？

ならない。

>>834
ナイスバディ＝ムキムキ兄貴バディ

背景が画像でcolorが白のエラーってどうやって回避するの？
結局隠れるのにbackgroundに#000とか指定すればいいの？

再現手順がほしい。どんなエラーかわからん。

白白で見えなくなるとかアホなことじゃなかろうか
どんなときでも背景画像と背景色は入れとけ
環境によっては背景色が白じゃないこともあるんだし背景白でも背景色は必要

まぁそんな特殊な奴は無視だがな

タクト知らなくて悔しかったんだね

標準モードでヘッダ・本文・メニュー・フッタの順番で記述されたものがあります
これを2カラムにして左本文、右メニューにしたいのですが
ttp://www.geocities.jp/multi_column/practice/2column1.html#fixed-liquidを参考にしてみたのですが
メニューと本文がかぶってしまいます
かぶらないように2カラムにしたいのですがどなたかご教示お願い致します

#mybody {width:96%; margin:0 auto;}
#box2 {width:100%; float:left; margin-right:-200px;}
#box2>* {margin-right:200px;}
#box3 {width:200px; float:left;}
#box4 {width:100%; clear:left;}

<div id="mybody">
<div id="box1">タイトル</div>
<div id="box2">本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　</div>
<div id="box3">ここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニュ</div>
<div id="box4">フッタ</div>
</div>

>>842
例の通りそのまんまやればいいだろ・・・

IDは名前を変更しましたが記述は例の通りのです
例のソースをいじくってdiv直下に文字を置くとかぶってしまいます

ユーザースタイルシートで「br 連続3つ」をdisplay:noneしたい。
br {display: none !important;}
をどう書き換えたらいいですか？

あめぶろの改行しまくりが読みづらいから。
でもbr自体をnoneしてしまうと、
改行の少ないほりえもんブログまで読みづらくなってしまい、
br3つ以上の場合だといいはずと思い質問。

無理
js使うか、br class="none"みたいにすればおｋ

>>942
標準モードでやっても被らない
何か間違えてるだけだろ

>>845
三ついっぺんに消すのはCSSでは無理
最後の一つだけでいいならbr+br+br

>>842
お手本例のソース見てみなよ。

本文　本文　本文…を<p>でくくってあり、
#boxB p { margin-right:200px;}
ってのが入ってるでしょ。

俺の環境ではちゃんと被ってるしこの場合は被るのが正しい挙動
>>847が間違えてるんだろ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css">
#mybody {width:96%; margin:0 auto;}
#box2 {width:100%; float:left; margin-right:-200px;}
#box2>* {margin-right:200px;}
#box3 {width:200px; float:left;}
#box4 {width:100%; clear:left;}
</style>
</head>

<body>
<div id="mybody">
<div id="box1">タイトル</div>
<div id="box2">本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　本文　</div>
<div id="box3">ここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニューここはメニュ</div>
<div id="box4">フッタ</div>
</div>
</body>
</html>

>>847
文字コードがsjisとかeucで作ってない？

>>850
まさか文字コードで標準・互換モードが決まるとか思ってないだろうな

>>849
そこのサンプルが標準モードで被らない件
ttp://www.geocities.jp/multi_column/practice/sample/2column1_fixed.html

>>851
多分IEのXHTMLを基準にしてるんじゃないか

すみません、誤解を与えてしまい申し訳ありません
例にある場合のようにdiv内にpなどのタグで囲まれた文字列はOKなんですが
>>842のソースの通りにdiv直下に文字列を置きたいのですがかぶってしまいます
div直下に文字列を置いてもかぶらないようにしたいのですがご教示お願い致します

>>851
xhtmlにおいて
sjisとeucの場合は先頭にxml宣言必須→互換モード
unicodeの場合はxml宣言省略化→標準モード
unicodeでxml宣言を記述→互換モード

>>854
なんかよくわからんけど、>>852のサンプルページはpを取っ払っても大丈夫なようだよ

>>846-847
ありがとうございます。
br+br　という書き方もあるんですね、それを参考にぐぐって、
br+br {display:run-in;}
　これをOperaであめぶろだけに適応することで妥協します。

>>855
それIEだけのバグだから一般のように語っちゃ駄目

すみません>>852さんのURLと私が>>842で出したURLのやり方は違います
>>852さんの出したURL(幅固定 2カラム 右サイドバー)は私が出したURL別の物です
http://www.geocities.jp/multi_column/practice/2column1.html#fixed-liquid(メインカラム幅可変、サイドバー幅固定 2カラム)

>>855
>>858のとおりなんだが
一応言っておくとunicodeでも省略可能ってだけで省略するものではないからな

>>859
何でできるほうがあるのにできないほうでやろうとするん・・・？

途中で送信してしまいました申し訳ありません
>>842で出したURLの「幅固定 2カラム 右サイドバー」を元にどなたか>>854をご教示お願い致します

出来ない方でやろうとする悪い子に教えるやり方はありません

>>860
「マジレスすると省略するものではないからな」は間違え

XML宣言てのは、XMLで記述されたXHTML文章をデフォルトの文字コードであるUTF-8やUTF-16以外の文字コードを利用する際に、文字コードを適切にデバイスに対して伝えるために記述するもの

いじめるなよｗ
マイナスマージンの上にマージンが必要だからどうしても入れ子が必要だろう

>>863
お前のそれ全然反論になってないぞ
>>863も>>860も「その通り」でしかない

>>860
w3cではunicodeでも宣言することには推奨と唱っているが
これは特殊な環境の為に推奨してるだけ
理由があるから省略できるってことだけどわかるかな？
とりあえずw3c英文でも読んでこい

ていうか>>855なんか書いちゃったから必死なんだろ・・・
って少し前にもあったなこのパターン
嫌な予感するからスルー

>>851が無知を指摘されたから荒らすパターンきますた

>理由があるから省略できる
>省略可能ってだけで省略するものではない
ポナは同じ事を書いてることにも気が付かない

同じに見えるお前は末期

>>861
おかしな流れになっちゃったけど答えとしては>>862>>864で「無理」がFA
別のやり方にしなされ

>>852が上げ足を取るつもりで自信満々に〜件と書いたにも関わらず
それについて素人に指摘されてプライドを傷つけられて荒らしたで一件落着

教えてください。
スレがおかしな流れになっちゃった場合は、clear : both; とすれば良いですか？

タクトの相手をしなければいい

タクトとは2ちゃん用語ですか？
それと、文字コードとquirksは関係ないと思っていたのですが違うのでしょうか？

(ﾟ∀ﾟ)「では、出席をとります。名前を呼ばれたら大きな声で『はい！』と答えてください。」
生徒「ワイワイガヤガヤ」
(´･ω･｀)「・・・・、浅田美羽（みう）さん」
浅田「はい」
( ﾟДﾟ)「（呼びづらいな・・・）・・・安藤優由（ゆ・・・・・ゆ？）さん」
安藤「はい」
Σ(´Д｀　） 「（・・・ゆゆで良いのか・・・）上野・・・・ポチ男・・・・くん」
ポチ男「はーい」
;｀;:ﾞ;｀(;ﾟ;ж;ﾟ; )ﾌﾞｯ 「・・・・・・・・・ｸｸ・・・・・近藤・・・───麗音菜愛梨亜（・・・読めん）・・・近藤さん！」
近藤「はい」
(;´Д`)「近藤さんのお名前はなんて読むのかな？」
近藤「れおなあめりあ」
(;´Д`)「そうですか、ありがとうございます・・・・・・・（読めねえよ）・・・・佐藤・・・光中（こうちゅう）・・・くん？」
佐藤「ぴかちゅう」
(;´Д`)「そうですか、ごめんね・・・（１０万ボルト・・・）・・・佐々木メロディ愛（めろでぃあ）さん　
（今度こそ正しいだろ！）」
佐々木「メロディあい！」
(;´Д`)「ごめんなさい・・・メロディあいね・・・・・中野世歩玲（せふれ？）さん」
中野「はい」
(;´Д`)「（セックスフレンド・・・・・略してセフレ・・・・）・・・・西田・・・・・・・・・・王子様君・・・・」
西田「はーいはーい」
(;´Д`)「（あだ名はプリンス）・・・浜田光宙（こうう？）くん」
浜田「せんせー、俺、ピカチュウ！」
(;´Д`)「ごめんごめん、ピカチュウね（２匹目ゲットだぜ）・・・・・松田太郎くん（やっとマトモなのが来た・・・）」
松田「？」
(;´Д`)「あれ？松田君？松田太郎君？」
松田「ジョンです」
Σ(ﾟДﾟ；≡；ﾟдﾟ) 「ジョン！・・・・（いいえ、それはトムです）・・・・・山下愛子さ・・・・・愛子エンジェルさん・・・・」
山下「はーい」
orz「ねーよ」

>>876
フィギュアオタがまとめたのか？

　「週刊文春」には、「先生が名前を呼べない子供たち」という特集が組まれていた。
　一度では、読めない名前が増えてきた。その名付けの変化は、ここ10年劇的だと言うのだ。

　その記事の中で、個人的に気になった子供の名前ベスト５は、こんなところ・・・。
【男の子の名前】和源→わーげんくん、天使→みかえるくん、英雄→ひいろくん、強運→らっきいくん、沙風→さあふぁくん
【女の子の名前】愛声→あのんちゃん、絆→はあとちゃん、樹里亜菜→じゅりあなちゃん、楓→はいじちゃん

　「名前ランキング2008」には、さらに、こんな名前も紹介されている。奏人→タクト、光舞→テルマ、
　月→ライト、獅人→レオト、大虎→タイガ、星穏→シオン、遥空→ハルク、琉煌→ルキヤ、怜音→レイン、
　瑠楓→ルカ、望来→ミライ、伶音→レノン、來夢→ラム、心暖→シノン、煌羅→キラ・・・きりがない。何でもありだ。

　珍しい名前ををみんなで評価するサイト「ＤＱＮネーム」には、４月２０日に、こんな名前が新しく
　登録された。流楽→るんら、愛々→なな、桜心→ももね、詩映愛→しえら、洛→りいち、美心菜→みふぁな、
　翔飛→しょう、肇陽→はっぴ、綺麗麗→きらら、宙大→ゆうだい・・・。

「いぢめに耐えて丈夫に育って欲しいわ」とか、そんな感じの親心なのか？

純粋にｶｺｲｲと思って付けてるDQN親

みかえるｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

カタカナに当て字でそれらしくなるっぽいな。

どれ。
死逝餌捨絵図(シイエスエス)ちゃん

>>878
愛々→なな
だけはありだと思うが、将来子供が困るような名前にしか思えないのが多いな

個性の時代ですよ

ていうか時々くる名前ネタなんなの

時々？

>>885
きちんと調べたところ自分の方が無知だったことが発覚した>>868がスレを流そうとした結果が名前ネタ

タクトしつこいよ

しつこくされると俺様の無知が発覚しちまうだろうが！
それはさけねばならん。なんとしても。

本物が出てきちゃった死

上、下左、下右の三分割フレームを擬似フレームでやりたいのですが、下の高さはどう指定すればいいのでしょうか？
Firefoxならbottom:0だけでうまくいくのですが、IE6とIE7で動くようにしたいです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>擬似フレーム</title>
<style type="text/css">
html { height: 100%; }
body { margin:0; height: 100%; }
#header { height: 100px; background: #00f; }
#menu { width: 30%; position: absolute; top: 100px; left: 0; overflow: auto;background: #0f0; }
#main { width: 70%; position:absolute; top: 100px; left: 30%; overflow: auto; background: #f00; }
#menu, #main {
height: 70%; /* ? */
bottom: 0;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="menu">menu</div>
<div id="main">main</div>
</body>
</html>

まずxml宣言するのやめてくれないか？

今xhtml1.1で作るメリットなんてxhtml1.0よりもメリットないのに必死だな

コンテンツ量が少なくてもfooterを下の方で固定したいのですが
fixedを使う以外で良い方法はございませんか？

cdataセクションにしといた方があとあと無難…というか外部がよい。

質問の本意に関係ない回答を競い中なんですね。わかります。

>>891
footerも書けないのかｋｓｇ

>>896＝>>891乙

日本語も流れも読めない人は黙ってろという見本ですね。わかります。

>>891=>>896=>>898

発想の貧困さと決めつけ廚ぶりをアピールしてるんですね。わかります。

意図しないレスしかもらえないとすぐ荒らしになるんだから>>981をスルー推奨

う〜ん、ロングパスｗ
>>981に期待ｗ

>>893
ルビを使う要件があるのでXHTML1.1は避けられないのです。

>>897
上、下左、下右の三分割なので、footerはありません。

>>903
height指定しなければいんでね？ どんな不具合でてるのがいまいちわからん。

すみません二つ質問お願いします。

まずposition:absolute;でboxを移動したときIE6だとboxが元あった場所に
そのboxの大きさの空間が残ってしまうんですがこれを何とか回避できませんでしょうか

次に親要素にposition:relative;、子要素にposition:absolute;でtop:-300px;のような親要素をはみ出る数値を入れた場合
IE6ですと親要素を越えた場所が表示されなくなってしまうのですがこれもなんとかなりませんでしょうか

よろしくお願いします。

具体的に再現できるソース晒せや！でございますことよ。

>>904
>>891で背景色を付けてみたのでわかるかと思いますが、
下左と下右が内容量にあわせて高さが伸び縮みしてしまいます。
普通のフレームのときと同様に、表示領域の下辺にぴったりとあわせたいのです。

>>906
すみません忘れてました・・・
で、簡素化したものを作ったところ何故か希望通り表示されまして
どうも前後の兼ね合いで起こってるようなのでもうちょっと弄ってきます・・・どうもすみません

>>907
height:70%指定してる行を消せば巧くいくんでは？
内容量増えれば縦スクロール出るのframe使った時と同じだと思うし。
ie6だとどーだかしらんけど、ie7なら巧くいくと思われ。

敢えてエスパーしてみるなら、overflow指定してるとこか、その直前あたりでtypoしてるとかか。

どうしてもできないので、すいませんが教えてください。

例えばyahooみたいにブラウザを広げても
常にページが中心にくるようにしたいのですが
ググったところ

div.base{width:800px;margin:0px auto 0px auto;}
で囲い、その中にdivボックスを作っていけば良い

と見つけたのですが、実際にやると反映されません。
ボックスを作らずテキストのみでやれば反映されるんですが・・
なんとかフルCSSでできるようになりたいので、助言お願いします

yahooのCSSみてみた？

>>912
今見てきました、見た感じ
<div id="wrapper">
というボックスで囲んで外部CSSでセンタリングしてる
って感じだと思うんですが・・

今自分でレン鯖で練習してみてもやっぱりだめで
しかもIE火狐でボックス組の見え方が違う・・
これは予想以上に壁が高そうです

それでいいと思うけど
とりあえずmargin:0 auto;な

>>913
それはHTMLを見ているという
CSSを開いてみなよ
webdeveloper.xpi　：Firefox　とか
Accessibility Toolbar　：IE　とか使って全体を見る

body{text-align:center}
#wrapper{margin:0 auto; width:______px; text-align:left;}

body全体はセンタリングで指定。
全体をかこむwrapper（別になんのIDでもかまわんけど）は
幅を指定する必要があって、マージンは0 auto

css firefox　センタリング　とかでググれ

textalignとかもういらんだろ
さすがにヤフーくらいになればまだいるのかもしれんが

IE6使ってる自称情報強者とか切り捨ててもいいよな

あれ６ってマージンきかなかったっけ？

標準モードなら効く。

あーそういえば互換モードもあったね
完全に忘れてた

>>914-915
朝まで試行錯誤していて力尽きてました、すいません。
外部ＣＳＳって見れるんですね、知りませんでした・・

結果としてはclassをidに変えたら火狐だけできました。
ただボックスのpxが合わずにはみ出している・・

一方、IEだとセンタリングされないものの
ボックスのpxは綺麗にかみ合って整っている状況です。
ますます意味がわからない、calssだと駄目なんでしょうか？


教えて頂いた言葉でググったら良さそうなサイトがあったので、
とりあえずそこでまた試行錯誤して駄目だったら伺いますね。
色々と詳しくありがとうございました

>>905
1.ソースが無いと判断出来ない
2.z-index指定して重なり順を適切なものにする

>>921
IDとclassは全く関係ない。お前の書いたソースが悪いだけ。
継承の個別値がIDの方が高いからclassで無視されてたのが適用されただけだろう。
よって他要素のCSSが影響していると考えられる。
pxが噛みあわないってのは計算ミスじゃないの？borderとかのサイズも当然入れてるよね

>>921
ボディーにテキストセンター
ラッパーにマージン 0 auto ＆テキストレフト　＆ 幅指定
でいけるだろ

>>923
片仮名とは斬新だな

IDとクラス名にひらがなやカタカナを使ってもcss適用できますか？

200くらい遡って読んでくるといい

>>925
それ、楽しそうだな。
やってみようかな