CSS初心者スレッド＝2nd＝

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

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

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

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

クリックするとちんこが勃起する画像を作りたいんですがどうすればいいですか？

【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

１へ。

質問しているのに返信しないとはどういう事だ！！
こんバッカモンが！！
俺はこのスレがたつまで寝ないで待ってたんだぞ！！！



もう一度だけ言う。
ちんぽを勃起させるにはどうしたらいいですか？

ママにお願いする

Ｑ．オナニーは殺人罪ですか？
Ａ．チンコを息子って言うくらいだから幼児虐待になるんじゃないか？

>>8-10
上級レベルの話題は上級スレでお願いします。

そうは言うがな大佐･･･

おいテンプレ貼ると全部テンプレ嫁みたいな回答になって元祖CSS質問スレみたいに糞スレ化するぞ

回答でテンプレ嫁禁止なｗ

質問をして回答を待つ手間が省けるから
便利だと思うんだけどなぁ。

wrapper
　header
　contents
　　text
　　navi
　footer

というような構成で、text と navi を段組にしていて、
overflow:auto を使った clearfix を使ってたのですが、
これを書くと、Firefox で縦に長いページを見たときに
下の方の文章が消えてしまいます。
（それほど長くないページでは普通に見えています。）

これの原因や、解決方法ってありますか？
今のところ、clearfix を使わないようにして回避していますが、
CSS の勉強のために、そういうことが分かればいいなと思って
質問しました。よろしくお願いします。

それだけの情報で答えられる奴がいたらエスパーだ

overflow:auto だけで、Firefox でこういうバグが起こる、
というわけではないんですね…。
自分で色々調べてみます。

ていうかその構成だったら、単にfooterでclear:bothすればいいだけだと思うんだが。
clearfix使う必要性がわからん。

使いたくて仕方ないんだろ

確か、footer で clear:both だけだと、IE6 でフッターの
背景画像の表示がおかしくなっていたので、
解決策を探していたら、overflow:auto でうまく直った、
ということで使い始めていたと思います。

ただ、overflow:auto を使うと、今度は何故か
Firefox で、長いページで表示がおかしくなる、と…。

基本的にはclearだけでいいはず。
背景ってのはわからんが別のところが悪さしてるような。

>>21
ボキもそう思ふ。

□□□　□□□
□�@□　□　 □
□□□　□　 □
　 　 　 　□�B□
□□□　□　 □
□�A□　□　 □
□□□　□□□

�@�A�Bという出現順のブロックをfloatで上図のように配置できますか？

>>23
出現順って何の事でしょう？cssで動的な事は出来ませんよ。

>>23
�@�Aをdivで括って普通にfloatすればいいんじゃね？

>>20
とりあえずソース！

どうみても>>25がFAだろ

ttp://javaballista.ddo.jp/kjwiki/kjwiki?name=%83%58%83%5E%83%43%83%8B%83%56%81%5B%83%67%82%C5%8B%5E%8E%97%83%74%83%8C%81%5B%83%80%81%45%83%77%83%62%83%5F%82%C6%96%7B%95%B6

これを参考に疑似フレームを作成してみたのですが
IEでは正しく表示されるものの、firefoxではスクロールバーがはみ出して全てが表示されません。
上手く表示させるにはどうすればいいですか？

style.css というバカファイル名はよく見かけるのですが
hpertext.html や html.html といったバカファイル名はほとんど見かけません。
これは html 使いより css 使いのほうがアホということでしょうか？

>>28
firefoxで正しい表示がされるように作ってから、
IE用にハックする。

>>29
上級スレにお帰りください（笑）

media=printのときのテキストボックスがmedia=screenのときの
テキストボックスより大きくずれてしまいます。

テキストボックスを小さくするようなCSSはありますでしょうか？

うちはstyle.cssだし、script.jsだ。

<div id="out">
　<div id="in">
　　<div id="box1">�@</div>
　　<div id="box2">�A</div>
　　<div id="box3">�B</div>
　</div>
</div>

上記のソースを、floatで>>23のように配置できるかと尋ねたかったのです
�@と�Aだけを特別なdivに入れると、�Bだけが除け物になって嫌なんです

>�@と�Aだけを特別なdivに入れると、�Bだけが除け物になって嫌なんです
あきらめろ（笑）

out in なんて使ってるぐらいだからhtmlなんてどうでもいいじゃん、ひどい

>>34
position: absolute;

<head>
<style type="text/css">
<!--
div#box1 {
width: 100px;
height: 100px;
position: absolute;
float: left;
}
div#box2 {
width: 100px;
height: 100px;
position: absolute;
float: left;
top: 130px;
}
div#box3 {
width: 100px;
height: 214px;
position: absolute;
left: 125px;
}
-->
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>

>>36
そういう難しい話は上級スレでやるといい。

おまいらposition好きだねえ・・・

ﾋﾞﾙﾀﾞの「どこでも」使ったら ?

>29
たるいからCMSがデフォルトで指定しているファイルネームのままなだけなんだが。
複数ファイルにまたがるほど細かいcss書いている訳でもないんだが迷惑だったのか。そーかそーか。

マジレスしていいのなら、html複数に対してstyleは外部ファイルで「纏められる」というのが利点なんだから
そりゃhtmlの名前はファイル毎になって、CSSのファイル名は基本1つになると思うんだ。

>>37-38
おお！positionの併用で、>>23の配置になるんですね。
marginを調整すれば……という考えにはまって、positionは考えていませんでした。
スッキリしました。有難うございます。

IE6でのposition:fixedについて質問です。bodyに指定した背景の上に、もう一つ背景をページの最上部＆中央になるように重ねたくて、

HTML

<body>
<div id="box1">
<div id="box2">
</div>
</div>
</body>



CSS

body {background: url(aaa.gif) repeat fixed;}
#box2 {width: 800px; margin-right: auto; margin-left: auto; margin-top: 50px;}
#box1 {background: url(bbb.png) no-repeat fixed center top;
margin-right: auto; margin-left: auto; margin-top: 0; text-align: left;}


としたんですが、IE6だと、#box1で指定した画像が最上部には表示されますが中央に来ず、fixedも効きません。
スターハックで expression というものを使うということは分かったのですが、どうも使い方というか仕組みが理解出来ず
上手く出来ませんでした。（いろいろ例があったのですが、応用出来ませんでした…。）
中央に画像を来させる方法も、一番外側？をdivで囲んでtext-align:centerを使う方法が紹介されていたので
やってみましたがセンターに来てくれませんでした。
#box1でwidthを指定すればボックスは中央に来ますが背景の画像は左に寄ったままでした。

bodyの背景に重ねた画像を、画面最上部中央でfixedさせるにどのようにCSSを書けばよいのでしょうか？

追加です。#box1にはpadding-top: 50px;を追加してbox2を少し下に下げています。

>>44
IEが糞だからです。

>>46
その糞でなんとかしたいのでよろしくお願いします。

>>44
htmlはそのままで
* {
margin: 0; padding: 0;
}

* html {
overflow: hidden;
}

html body {
height: 100%;
background: url(aaa.gif) fixed;
}

#box1 {
height: 100%;
width: 100%;
position: absolute;
top: 0; left: 0;
overflow: auto;
background: url(bbb.png) 50% 0 no-repeat fixed;
}

#box2 {
margin-top: 50px;
}

こんなんでどう？
必要最低限しか確認して無いから動作保証は確証できんが
box1内に記述する分には多分問題は起こらないはず。
あと、IE6はposition:fixed;未対応な。

>>44
position:fixed;とbackground-position:fixed;を混同してないか？

寝起きですっきりな頭で考えると
position:absolute;指定するのは冗長だった。
html body {
margin: 0; padding: 0;
overflow: hidden;
background: url("./img/menu.png") fixed;
}

html > body { overflow: visible; }

div { margin: 0; padding: 0; }

#box1 {
height: 100%;
width: 100%;
overflow: auto;
background: url("./img/title.png") 50.01% 0 no-repeat fixed;
}

body > #box1 { overflow: visible; }

#box2 { padding-top: 50px; }

#box1のbcakground:50.01%;はIEとFxで1pxずれないようにする為の
同overflow: visible;はFxでちらつかないようにする為のおまじない。
それじゃお前らおやすみ。

>>48,50
お忙しい中色々試して頂いたようでありがとうございました。

>>48の方を試してみましたらちゃんと背景が固定されました。
（これは、bodyのスクロールバーを隠して、box1の方にスクロールバーを表示していると解釈してよいのでしょうか？）
ただ、使っているテンプレートがbox2の背景に透過PNGを使っているので、
IE6でPNGFix:のエラー（子要素をクリック出来ない？）が出てしまいました。

>>50の方は何故だか上手くいきませんでした。背景がスクロールされてしまいます。

>>49
親戚みたいなものだと思って混同していたようです。

両方で出来なかったここは、box1の背景がセンタリングされなかった事です。これはまた別の問題ですよね？
取りあえずご報告まで。再度チャレンジしてみます。

>>48
日本語でおｋ

<li class="tab"><h2>ブラウザ</h2>

<ul class="sub">

　<li><a href="agree.php">規約</a></li>
<li><a href="activity.php">活動内容</a></li>
<li><a href="member/index.php">連合員一覧</a>

</ul>

</li>
<li class="tab"><h3>データ</h3>
<ul class="sub">
<li><a href="war.php">連合戦マップ</a></li>
<li><a href="history.php">過去の連合戦結果</a></li>
</ul>
</li>

スタイルシートで"wrapper"の背景に白を指定してbodyにはリピートで画像を指定しています。
"wrapper"と"contents"は高さを【auto】にしたのですが、どちらもautoにしてしまうと"wrapper"の背景設定が反映されなくなってしまいます。
（すべての背景がbodyで指定した画像になってしまいます）

どちらかの高さを指定すると正しく表示されるのですが…
どちらもautoにした状態で、"wrapper"の背景の白を反映させることはできないでしょうか？

<div id="wrapper">

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

　　<div id="contents">

　　　　<div id="side">
　　　　</div>
　　　　<div id="main">
　　　　</div>

　　</div>

</div>

もしかして、#headerや#sideや#mainをフロートかposition:absoluteに
してない。そうだったら#wrapper { overflow: auto }でどうだろ。

>>54
divのheight初期値はauto、わざわざ指定する意味がわからない。
言っとくが、そのhtmlで適用されないと騒いでるのなら、相当な愚か者という事になる。

bodyとheaderは入りきらなかったので省略してます。
本を見ながらやったのですが、何かまずい間違いをしていますでしょうか？（；＞＜）

#wrapper {
　margin: 0px auto;
　padding: 0px;
　width: 900px;
　background: #FFFFFF;
}

#contents {
　margin: 0px;
　padding: 0px;
　width: 900px;
}

#contents #side {
　margin: 30px 50px 0px 0px;
　padding: 0px;
　height: 430px;
　width: 230px;
　float: right;
}

#contents #text {
　width: 580px;
　margin: 0px;
　padding: 0px;
　　　　　　　　float: left;
}

まずHP持っててもCSSの意味がわかんないオレはどうすんだべ？

>>58
とりあえずこれ使って適当なページ作ってソース見てみろ。（６０日体験版）
http://www.microsoft.com/downloads/details.aspx?familyid=44FA7F93-7D57-4523-B0C9-2CE54397B732&displaylang=ja

どなたか原因の分かる方、いらっしゃいませんでしょうか？（；＞＜）

>>60
htmlからやり直せ、愚か者。
boxだけ置いても中身がなけりゃ箱にならんだろ、height:auto;の意味を考えろ。
内容が無い箱＝height:0;ってこったアホくさ。

>>61
いえ、中身はあるのですが、ここに載せるとなると消した方が良いと思い、消しました。
実際には中身の途中で"wrapper"で設定した背景の白が消え、残りの中身の部分は"body"で設定した背景画像がきてしまいます。
何が原因だか色々試しているのですが、全く分かりません…

>>62
今頃何言ってんだか。説明も最初と違う。後出しはやめてくれ。
・cssに#textとあるがhtmlにない、#mainのつもりだろうか
・#wrapperのwidth:900px;に対し、中のboxのwidth合計値がオーバーしてる
・floatがclearされてない
など、どうしようもないソース。
2カラムでググッて基本をちゃんとやれ。

>>63
すみませんでした。
お恥ずかしいことに今回HPを作るのは2つめで、以前のもCSSで製作していたので
その前のと見比べてみても、何がこのようなエラーになるのか理解できませんでした。
前回作ってから結構時間が経っていたので、また解説本を読みながら同時進行で作っていました。

原因はfloatをclearするDivタグをまだ入れていないことでした。
ご指摘いただいた通りです。
0時頃からずっとこればかりやっていたので、物凄く助かりました。
何度も何度もしつこく質問してすみませんでしたm(_ _)m
夜遅くにありがとう。

＞＜　←これ系の顔文字使ってるバカの質問には絶対に答えないことにしている。
人にものを尋ねる態度ではない。

私の能力の限界を超えて解決することが出来ませんでした。
アドバイスを頂いたのに申し訳ありません。

背景のセンタリングは、画像の拡張子を.png（透過）から.gif（透過）に変えたら出来ました。
理由はわかりませんでしたが。

大変お世話になりました、ありがとうございました。

>>65
　　　　　　　　　　　 ,,.. -──-　､,
　 　 　　　　　　　 ,. ‐'":::::::::::::::::　 　....:｀`'-､
　　　　　　　　 ,／:::::::::::::::::::　....::::::::::::::::::::::::ヾ:､　　　　　　,....,
　 　 　 　 　 ／:::::::::::::::　..:::::::::::::::i､::::::::::::::::::::'､':,.　　　 ／　　ヽ
　　　　　　 /:::::::::::　....:::::::::::::::::::::i:::!`､:ﾄ､::::::::::::i i!　　 /　　　　 i
　　　　　　i　　　...::::::|'､ヽ;::::::::::::::|,!:!__ﾘ,,'iヽ::l''､:'､ 　 / 　 　 　/
　 　 　 　 |　..::::::::;:::i!:i ヾ:､ヽ:::::::::| ﾘ , -─ ﾘ　i;il:ヽ, i　　　　/　　　　あはははは〜
　 　 　　　l:::::::::::::::i',i ':i　,メ､ ＼;:l　'ﾞ　　　　`､　!::::/l ...::::::/｀`ヽ
　　　　　　l::ヽ:::::ヽ:i,レ',.ﾞ-‐''''　　　　　　　　　',/'/..::::::::::/ 　　 l'ヽ;､　　こいつ２ちゃんで態度を
　　　　　　 i:::::>､:ヾ,' /　　　　 _,.. -‐'ヾi　　　 ,ﾚ'::::::::::;r':..　　 /　 i_＼
　　　　　 　 i:::i.　`'‐,ゝ　　　 i" 　 　 　 '! ,.‐''" :::::::::::iﾞ::::::::...／.　 ﾉ 'i　　　　気にしてるよ
　 　 　 　 　 !::＼　`ヽ　　　　':,　　　　　l{　　 ..:::::／::L,. ‐'":::::;／　 !
　 　 　 　 　 l::::::::`''‐r＼　　　 ヽ.,＿_,.ノィ'‐-‐''"'ｫ‐--,ﾞ弋''''"::::::;.ノ
　　　　 　 　 |::::::::;ｨ:::}､　｀`'''─--､-‐ﾆ┤　＿__ハ,｀''ｰヽ-'=‐''":::
　 　 　 　 　 !::::::/ i:::|､＼　　　　　ヾ´.　i　　ヽ　　 ､''‐-､_:::::::::::::::::　／
　 　 　　　　i:::::/　i:::ハヽ｀''‐､／l＿_＼,|　／　　　 ヽ--､,.ﾆ=‐--‐'"

　『IE　透過png バグ』　でgoogle先生に尋ねればいいよ　

>67
こういうのがいるから答えない

>>69
>>67

答えないなら答えないでスルーすればいいのに
なぜわざわざ答えないという自己主張をしたがるのか

君も同じ穴のムジナなんだよ。それとも質問し辛い雰囲気でも作りたいのかね？

堅苦しい雰囲気は苦手ですぅ（＞＜）

CSS勉強し始めてから数時間しかたっていないのですが作ったサイトを鑑定してもらってもいいですか？

100円

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

>>76
どうもありがとうございます。
「おめでとうございます！ エラーはありません。」と出ました。
残念ながら僕が求めていたのはこのようなものではなくて、どのようにすればより見やすくなるか、や今の状態ではFirefoxでしか見れないのでどのようにすればIEでも同じように見えるか、などのアドバイスをしてほしかったのです。

>>77
さらせ

>>78
どうもありがとうございます！
アップしてみました。
pass : 1207202319
uri : http://www2.uploda.org/uporg1366250.css.html
です。

>>79
ロダにcssだけあげるってｗ
何で鑑定する人に労力かけさすの？
適用したHTMLを見れる状態でアップしたURLを晒せよ

>>80
ごめんなさいごめんなさい
恥ずかしかったもので。。。
http://periwnkl.onmitsu.jp/
これでどうですか？

>>77
っ ハック（* html）

>>82
アドバイスをして頂きたかったのですが。。。
言葉足らずですみません。

>>83
IEで見られないってどういう事？IEで表示されないって事？

うちではIEでもきれいに見えてるよ。
「にょろ」の文字が若干上に寄ってるけど

>>84,85
どうもありがとうございます。お手数をお掛けして申し訳ありません。

IEでおかしく見えてしまうのは気のせいでした。すみません。

僕が言いたかったのは習慣やここはこうすればもっとよくなる、などのアドバイスが欲しいということです。

恥かしいからValidator貼るのやめたほうがいい
今時貼ってる奴は馬鹿か初心者だけ

>>87
アドバイスどうもありがとうございます。
やめておきます。

イミフなヤツ

>>87
っ スレタイ

>>86
ベタ塗りの長方形がたくさんあって、単調な感じ。
あと、色合いが後ろのストライプとあまりマッチしていないような。
でも、初めてCSS使ってみるとこんな感じになるよね。

とりあえず基調色を一色決めて、それに合う色を加えるようにデザイン
するのがいいと思う。

CSS VaultとかCSS Maniaとかを探索してみれば、ストライプを使った
サイトが見つかるので、参考にするといいよ。

>>91
どうもありがとうございます。
教えを生かして頑張っていきます。

質問です。

<style>
div{ height:300px; overflow-y:auto; background:url(A.jpg) no-repeat right;}
p{ background:url(B.jpg) no-repeat right top;}
</style>

<body>
<div><p>（十分に長い文章）</p></div>
</body>

このようなデザインで、div要素右側にスクロールバーが表示されているとします、
divの背景であるAは「スクロールバーの右端」を基準に表示されますが、
pの背景であるBは「スクロールバーの左端」を基準に表示されるようです(IE6だけは両者とも左端基準のようです)。
ここで、AとBを重ねてデザインをしたいのですが、基準点がスクロールバーの幅だけ水平方向にずれており、
スクロールバーの幅というものがOSやブラウザに依存するため、任意の環境で両者を上手く合わせる事ができません。
両者の基準点を揃えたいのですが、何か方法をご存知の方がいらっしゃいましたらお教え下さい。
よろしくお願いします。

補足です、上記のように描画される事を確認したのはFirefox2.0, konquerorです
IE7はIE6と同様でした

>>93
overflowでスクロールする限り避けられない。
そういうデザインをしたいなら、そんな手抜きをせず、objectやiframeを使うべき。
念のためoverflow-x,yはIEの独自プロパティ（とはいえFxは解釈する）なので、
解釈しないブラウザもある。

>とはいえFxは解釈する
CSS3で導入予定のプロパティだから先行実装してるだけ
IEが予定前に導入した独自拡張と一緒にすんな

しつもん

<a href="http://〜" style="text-decoration:none">
<a href="#top" style="text-decoration:none">

FireFoxだと両方とも下線が消えますが、IEだと下は下線が残りっぱなです。バグ？

>>96
CSS3はIEに擦り寄りまくりなんだよ。そんな事も知らんでエラそうだな。

>>97
IEの仕様です

>>988
知ってるが、それが「決められる前に勝手に突っ走った」傲慢さと
「決められるから仕方無い従おう」の差を一緒にすんな

>>100
ロングパスはｽﾙｰするとして、
×「決められる前に勝手に突っ走った」　○「仕様書？なにそれやっちまえ」
×「決められるから仕方無い従おう」　　○「とにかく新しモノ大好き」
Firefoxは嫌いじゃないが、そーいうトコはハナにつくんだよ。

>>100
>>95だがそりゃスマンカッタ。

>>101
別に○のほうでも構わんが、「何それ」と突っ走る姿勢を言ってるわけだが
おまえのそれは全く反論になってない

FC2のテンプレート管理だとサイトがセンターに表示されるのですが、
ホームページビルダーでは左側にに表示されてしまいます。
どのようにCSSを変更すればセンターに表示されるのでしょうか?

>>97
IEでもちゃんと消えるよ。

>>104
ビルダースレ池

>>106
わかりました。

いまさらだが、hack使えるな。
netscapeは無視の方向でいいんだったか。

今更っていうか・・・もう終焉っていうか・・・

html5まだかい

スレ違い

IEでの 空spanでのwidth,height指定を標準モードでも行うために、inline-block指定をした場合、
つまり、
<span style="width:32px;height:32px;display:inline-block;"></span>
相当のことをFirefox にて行う方法はありませんでしょうか？
もしある場合は、どのようにしたらよいでしょうか？

>>95
わかりました
ありがとうございました

>>112
正常動作のCSSは正しいHTMLから。
サヨウナラ。

ここのサイトの半透明表示はどうやってるの？
ttp://www.opaque.ne.jp/home.html

>>114
上級スレへお帰りください
サヨウナラ。

>>115
ソース見ろよ・・・

宜しくお願いします。

あるテキスト表示のカテゴリメニューの頭にアイコン画像をつけました。

A.category, A.category:visited {
margin:3px;
　　padding-left: 12px;
　　color: #008000;
background: url(../img/folder.gif) no-repeat 0px 0px;
text-decoration: none;
}

このような感じになっています。

アイコン画像とテキストの縦が奇麗に並ばずテキストがアイコンに比べて下にズレて表示されてしまいます。

奇麗に縦を揃えるにはどうすれば良いでしょうか？
vertical-align:やmargin-top:も試してみたのですが。。

>>118
再現出来ないソース貼ったって意味がない。htmlもちゃんと貼れ。
大体合わないったって画像の大きさにもよるし、vertical-alignなんか背景に関係ない。
それにAはなんで大文字なんだ？

>>119
レス有り難うございます。
<a class="category-top" href="（サイトパス）/index.php?main_page=index&cPath=5">タイトル-></a><br />
アイコン画像のサイズは8 x 8(px)です。

こんなんで何か見当がつきますでしょうか？
zen-cartというカートです。
色々テンプレを弄ってますがここだけうまくいきません。
ズレは数ピクセル程度なので微調整という事だと思うのでつが。。

>>120
background: url(../img/folder.gif) no-repeat 0px 0px; ←これが何を意味してるかわかってないんだろ。
勉強したくないなら、テンプレのアレンジなんか諦めろと言いたいわ。
background: url(../img/folder.gif) no-repeat 0 50%;

>>121
即答有り難うございます。
>no-repeat 0px 0px
なんか物凄く基本的な部分だったのですね。。orz

助かりまちた

「助かった」じゃなくて「勉強します」だろ・・・
言われてること全然理解してNeeeeeee

勉強します勉強します勉強します

orz

なぜか俺は勉強しない

何か初心者スレだとわかってない奴が多いな

ボックス内の送信ボタン "input" の位置指定について質問させてください

現在、IE から見ると以下の vertical-align: top; のような雰囲気で
ボタン●がボックス（ td や div ）の上隅の方へ寄って見えています

□□□
□●□
□■□
□　 □
□□□

これを上記の■の位置に表示させる最善の方法はどういったものでしょうか？

td や div に対して vertical-align で位置指定すればよいのか、
input 自体に位置を指定できるのか、また、どういった方法がスマートなのか、
教えていただきたくどうぞよろしくお願いいたします

>>127

tdに対してvalign="middle"じゃダメでつか？
たぶんダメ。ごめんw

ttp://suzumi.boo.jp/yoi/
春待草というテンプレートを使っています。
*{
margin: 0;
padding: 0;
font-size: 100%;}
となっていて、上がぴったりくっついています。

htmlに
<link rel="shortcut icon" href="favicon.ico">
を追加すると、上が１cmほど開いて真っ白になってしまいます。
ファビコンタグを消せば、やっぱりぴったりくっつきます。

なんでなんでしょう？

>>127
margin、paddingを殺す

>>129
>htmlに<link rel="shortcut icon" href="favicon.ico">
>を追加すると、上が１cmほど開いて真っ白になってしまいます。
どこに追加したわけ？

この部分です。
</head>

head内で</head>のすぐ上です。

>>132
css全然関係ねえじゃん。
テンプレ配布先で聞くべき質問。
掲示板、しかもレンタル掲示板のスキンなんか知るか。

>>128
CSS スレでお伺いしているにもかかわらず、タグ指定で回答されては
後々このスレをご覧になる方々も困るのではないでしょうか？

>>130
margin、padding を封じても IE 6.0 だけは頑なに >>127 のままでした
Firefox、Opera、Safari などは期待通りの表示をしてくれました

IE 7.x で改善されていると信じて様子を見てみたいと思います
ありがとうございました

>div に対して vertical-align で位置指定
こんなこと言ってる時点でおまえの（ｒｙ

>>127
普通に　margin-top: ○○○px;　で指定すれば？

>>127,134
<input>は確かにな。
firefoxでは正常だがIE6だと上寄せされる。

簡単な解決策としては、inputに_margin-top:10px;のように入れるんだ。
多分すでにmargin-topが入ってるだろ？その下に_で同じものを入れてやれ。

質問させてください。
フォントサイズを変更しようと下記のように記述しましたが、
windows IE6、IE7だけ効きません。
win FF2x mac FF2x safari3x
は問題なく反映されます。
IE固有の問題でしょうか？
おわかりになる方、ご教授ください。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無題ドキュメント</title>
</head>
<body>
<div>
<p style="font-size:11px;">ああああ１１PX</p>
<p style="font-size:12px;">ああああ１２PX</p>
<ul>
<li>いいいいい</li>
</ul>
</div>
</body>
</html>

多分shift-jisならならない

>>139
>多分shift-jisならならない

「shift-jis」「utf-8」環境で10pxと11pxをキャプチャーして比較したところ文字間が詰まっただけでした。
制作の事情でpx指定をしなければいけないので悩んでいましたが10pxで指定して調整します。

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

プロがこんなところで聞くなよ('A`)

>>140
視力が悪いのか？
139の通りすればちゃんと小さくなったが。IE6。
IE7はインスコしてないから知らんが。

140です。
>139の通りすればちゃんと小さくなったが。IE6。

質問前にshift-jisも試してみて、実際に小さくなったように思えたのですが、
キャプチャーして文字をを重ねて比較してところ文字間だけが縮まっていたのです。

試した事は、
・エンコードの変更、各エンコードの比較
・font-sizeをsmall、x-smallにしての比較
・font-familyで、和文、欧文の調整です。

ちなみに環境は、
winXP SP2 IE.6、IE.7、FF.2x を３台で確認

mac OS10.5 FF.2x safari.3xを
・mac 仮想環境 winXP SP2 IE.6、IE.7、FF.2x

です。

なんでしょね…

>>143
そうか？漏れの環境では小さくなってるんだが。IE6。

utf-8
http://www-2ch.net:8080/up/download/1208498796597578.IbUxwC

shift-jis
http://www-2ch.net:8080/up/download/1208498677288226.oO50UC

>>144

すみません。
説明がわかりにくかったようです。
http://www-2ch.net:8080/up/download/1208498677288226.oO50UC
で検証していただいた内容ですが、確かに11PXと12PXと比較した場合は小さくなっています。

そこに10PXを追加した場合、10PXと11PXの大きさは一緒でした。
文字間が詰まっただけだったんです。

フォントを重ねて検証するまで気がつきませんでした。
文字ばかりの説明ですみません。

今回、10PXと12PXのちょうど中間の大きさがほしかったもので…
わざわざアップロードまでしただいての検証、
ありがとうございます。

>>136-137
アドバイス頂きましてありがとうございます

>>137の "_" を margin の前に書いてみましたところ、頑固に動かなかった input が
他のブラウザでは今までどおりの位置のまま、IE 6.0 では期待通りの位置になりました
　input { _margin-top: 10px; }
たったこれだけで解決してしまい驚きました

CSSハック / アンダースコアハック なるものがあったことはとても勉強になりました
ヒントを与えて下さってありがとうございました

後々の方のために、_ハックについて自分が調べて参考になった情報を貼っておきます
ttp://css-happylife.com/log/css-hack/000022.shtml

>>145
文字を微妙な大きさで調節するなら％指定すればいいのでは？

<style type="text/css">
<!--
.p11{
font: 60% serif;
}
.p12{
font: 80% serif;
}
-->
</style>
</head>

<body>
<div>
<p class="p11">ああああ１１PX</p>
<p class="p12">ああああ１２PX</p>
<ul>
<li>いいいいい</li>
</ul>
</div>
</body>

>>147
質問者の内容くらい読んでやれよ

px指定なんてオナニーだし質問内容もグダグダなんだから放っとけ

>>149
上級者さんは上級スレへどぞ

ブラウザで文字サイズを大きくすると
検索フォームで入力する部分が
ボックスを突き破ってレイアウトが崩れてしまうのですが
どのように対処すればいいのでしょうか？

ソースは以下のような感じになってます

<dd><input type="text" name="word" size="20" value="" /></dd>

>>151
size="15"

>>151
size="20"を消して、CSSでinput要素にwidthプロパティを指定するのはどう？

>>153

<dd><input type="text" name="word" value="" /></dd>


dd input {

width : 80%;


}

これでボックスのはみ出しなくなりました
即レス感謝

むむ
実際に入力フォームに文字入れると
IE6だと、ボックスのはみ出しはしないけど
入力エリアが微妙に広がりますね
FireFoxでは通常通りなのに

それIEのバグ

Firefoxで最適化して、ハックでIE用のを作る。
これが一番簡単だよ。

うちもfireFoxベースで制作してからIEやSafari用に微調整。
Firefoxがモットメジャーになってくれればなー

3でめっちゃ軽くなるそうだから、それからだろうねー。

>>158
日本で30%、欧州じゃ国によっちゃ601%超えてるが
まだメジャーじゃないと抜かすか

おっと、601%はねーなｗ　60%

IE用とFF・OPERA用に２パターン作ってJavaScriptで振り分けてる。
ハックなんかやってらんね。

JavaScript切ってる奴もいるのだが・・・

そんな奴まで見てもらわんでいい。

javascriptは重くなるから使わない、そう思っていた時期がありました。
CSSもガンガン使ったらかわんねーのな。

>>160
データ的にはそうなってるような傾向があるけど実際肌で感じられないんですよねぇ

自分のサイト、ユニークユーザー数万/月のデータを見ると
Firefox 使用率は結局 10% にも届いていなかったりしまして…

ヒント：類友

<pre>で書いた文章を拡大するとボックスからはみ出ちゃうんだが・・・
どーすりゃいい？

>>168
1.preをやめる
2.ボックスの幅を指定しない
3.サイトをあきらめる

>>169
ｻﾝｸｽ。
preをやめます

>>168
おーばーふろーをおーとにすればいいんじゃないかなー

>>171
それっぽいのが出来ますた
ｻﾝｸｽ

>>172
http://d.hatena.ne.jp/designset?sort=count_desc
ここお勧め。

>>165
スタイル属性でソース書きまくるビルダーでは特にな。

>>168
pre { white-space: pre-wrap }
がいいと思うよ。'pre-wrap'に未対応なブラウザでも、ブラウザの独自拡張で
同じことができるかもしれないので、調べてみるといい。

http://nullpoarchives.orz.hm/uploader/upload/File747.zip

上記の中にhtmlとCSSのサンプルが入っております。

メニューの横にボックスを設置するにはどうすればいいんでしょうか？

メニューをボックスで囲んで回り込みの設定をしても回り込んでくれません・・・

zipを落とせってかよ。
ソースで質問しろよ。

>>176
HTMLもCSSもソースがおかしいので、まずそれを直さないと。

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
でチェックするといいよ。

正しいコードでフロートを使えばうまくゆくと思う。

幅50x高30pxのボックスにメニュー項目を入れています。

<div id="menu">
<ul>
<li><a>Menu1</a></li>
</ul>
</div>

IE6とIE7で、
Menu1の文字を垂直方向に中央にするにはどうすればいいですか？
IE6ではできてるんですが、
IE7では上に寄ってしまいます。

>>179
li { height: 30px; line-height: 30px; }
とかどう？

自分のHPにcssを適用させたいんですが、
<link href="flame1.css" type="text/css" rel="stylesheet">
をヘッダ内に書き込んでるし、ちゃんと適用させたいページのディレクトリに
cssのファイルはあるのに、HPを立ち上げても、CSSが反映されません・・・。
もとのソースにもｃｓｓを適用させるためのコードは入れてます。

反映されない理由がわかりません、誰か教えてくださいm(_ _)m
よろしくお願いします。

>>181
flame1.css はどこのディレクトリに入っているのかな？
読み込ませたい階層が間違っているのでは…。

同階層に入っているなら別なんですが。

>>181
フレームってあたりでエスパー
CSSを読み込ませるページはフレームの内部ページのほうだぞっと

frame=骨組み
flame=炎

俺もよくfroatとfloatを間違える

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

flame1.cssは、適用させたいページがあるフォルダと、同階層に入っております。


炎でしたね(汗)いま治します。

やはりソースを載せた方が御指摘しやすいですよね、今載せるのでお願いします。

cssのソースがこれで
body{
margin: 0;
padding: 0;
text-align: center;
color:#000000
background: #e6e6e6}
#wrapper{ margin: 20px ;
width: 700px;
text-align: left;
color: #333333;
background: #ffffff
url(///}
#sidebar{
float: left;
width: 180px;}
#maincontent {
float: left;
width: 390px;
margin-right: 10px}
#rightbar{
float: right
width: 120px}
#footer { clear: both;}

ホームページのソースはこれです。それと、３段組をやりたいんですが、
このやり方で合ってるでしょうか？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTMLlang="ja">
<HEAD>
<link href="superflame1.css" type="text/css" rel="stylesheet">
<META HTTP-EQUIV="CONTENT-SCRIPT-TYPE" CONTENT="〜">
<meta name="robots" content="index,follow">
<META name="keywords" content="cc">
<META name="description" content="cc">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>cc</TITLE>
</HEAD>
<BODY>
<div id="wrapper">
<div id="header">
<h1>c！</h1>
<ul id="navigation" >
<li><a href="" >cc</a></li>> <li><a href="">cc</a></li>
</ul>
</div>
<div id="sidebar">
<h2>cc</h2>
</div>
<div id="maincontent">
<p>■cc</p>
</div>
<div id="rightbar">
c</div><div id="footer">
<p>c</p></div></div></body></html>

<HTMLlang="ja">
スペース抜けてる

>>188
＞<link href="superflame1.css" type="text/css" rel="stylesheet">
あんたさっきflame1.cssって書いたよな。違うじゃない。

あ、すみません、色々いじってて、superflame1.cssも同じディレクトリにあるんです。
なので言ってなかったので申し訳ないんですが、そこは大丈夫です。 スペース入れて見ましたが変わりません(汗)

>>181
こっちで試してみたけど、普通に出来てますよ。
cssをアップしてないorファイル名をそもそも間違えているとしか
考えられないかなぁ。どうだろー。

cssをアップしていないって言うのは、ディレクトリ内にflame.cssがないって事ですよね？
う〜ん、もう一度試してみます。お手数かけて申し訳ないですm（＿ ＿）m

>>181
cssをアップしていないって言うのは、ローカルにはあるけどWebサーバに載せて
ないってことね。
181さんは該当htmlだけはアップしているのは確実のようなので、cssは同時に
アップしたのか確認したかったので。

あああ！なるほど！自分cssはアップしてませんでした(汗)

本当にありがとうございます！
今からアップしてみます！
また何かあったら宜しくお願いします。ありがとうございましたm(__)m

>>187
bodyのcolorと#rightbarのfloatにセミコロンが付いてないぞ

196番さんもわざわざありがとうございます！
治します(^0^)

CSSどうこうより
superflameに笑った

スーパー炎！

自分がわかりやすけりゃいいんだよ。

質問させてください

textarea の指定で wrap="soft" という指定があったのですが、
これと同じ効果を CSS で実現できるのでしょうか？

HTML のタグのオプション等と同等の機能を発揮してくれる CSS は？
といった方向で>>1-テンプレにあるリンク先など調べてみたのですが見つかりませんでした…

スクリプトで文章を投稿するような掲示板のコメント欄に使っていますので、
できれば wrap="soft" と同等の機能を果たしてくれると嬉しいのですが、
機能しなくてもまぁそれはそれで使えるのでいいか、といった感じが現状です

ご存知の方がいらっしゃいましたら教えていただきたくよろしくお願いいたします

>>200
主語と目的語を省略しすぎている。
複数の解釈を出来てしまうな。
wrap="soft"とまったく同じである必要が有るのか、自動改行だけ出来れば問題ないのか
適用する要素はform内のみなのか、一般的なブロック要素なのか等々、あいまいな点が多くて判断に困る。

とりあえず自動改行属性を変更したいなら　display　inline とdisplay blockで切り替えるという手も有る。

>>201
つたない質問に対して回答いただきましてありがとうございます

自分でも試しながらあれやこれやとやっていることもあってか、
# 悩ましい質問の仕方で申し訳ありません…orz
おそらく自動改行だけ出来れば、自分の求めている機能を満たしてくれるのだと信じています

なお、適用する要素（範囲？）は form 内のみになると思いますので、
教えていただきました display inline など試してみたいと思います

携帯で見るとどのように表示されるのか
エミュレーションしてくれるサイトってないですか？
CSSのどれが対応しているのかとか分からなくて。

自分の携帯ではSoftbankだけど思ったとおりに表示されていた。

>>203

ない…

Firefoxでは全体がセンターに表示されるのですがIE7だとセンターに表示されずに左側によって表示されてしまいます。

テキストの位置
#body { text-align: center;}
#ALL { text-align: center;}
.entry_data { text-align: center;}
#FOOTER { text-align: center;}

上記のように指定しているのですが、どのようにすればIE7でもセンターに表示されるのでしょうか?

<body>
<center>


</center>
</body>

>>205
自己解決しました。
>>206
お答えいただきありがとうございます。

すみません、質問です。
widthを設定したdivタグの中に、その横幅よりも広い（長い）英単語などが
入るとタグを突き破ってしまいます。
回避する方法はないでしょうか？

>>208
タグを突き破るわけがないだろボケ。
長い英単語が入るとわかってるなら、最初からwidthに余裕を持たせるのが普通。

まあ表現がおかしかったのはそのとおりなんですけど、
やっぱりそういう対処法しかないかぁ

すみません、質問です。

現在、charsetしてないせいか、ブラウザによって文字化けします。
全てのHTMLファイルを直すのは面倒なので、cssの直しでなんとか
出来ないものでしょうか？

教えてください。

面倒ならそのままでいいんじゃね ?

>>208
overflow:auto;

＞208
あ　それバグらしいよ
半角で連続した文字列だと突き破る
全角だとならんけどね〜

何がバグだよドアホ

>>213-214
ありがとうございます
しかしなんでこの板は他愛のないことで
偉そうに人を罵倒する人が多いんですかね

しかしなんでこの板は基本も知らない自分を棚に上げて
偉そうに人を批判する質問者が多いんですかね

実は解答者も全員初心者だからナメられないように必死なんだろうね

>>216
実業に近い板はどこもそうよ。データベースとか。
金が絡むとどうしてもね。

初心者以外を追い出すスレだから、もちろん回答者も初心者。
バカ同士でバカ自慢がデフォ。

>>203
「携帯 シミュレータ」でググると結構見つかるよ。Windows専用ソフトだけど。
http://www.au.kddi.com/ezfactory/tool/ue/index.html
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/
http://developers.softbankmobile.co.jp/dp/tool_dl/web/tool.php

>>211
CSSではどうにもできない。.htaccessが使えるなら
AddType text/html;charset=shift_jis .html .htm
みたいに書くといい。それができないならテキスト置換ソフトを使って
文字コードを指定するmetaタグを挿入する。

Web制作というのは一番手っ取り早くやり始めることが出来るから、
実はわたし主婦なんですけどねっ！とかいう人でも口出ししやすいからだと思うなぁ
同じWebでも、Webプログラム板に行くと途端にすごい平和だしｗ

あと、ここ数日は満月の影響で気が立っているというのもあるかと
ttp://www.moonsystem.to/calendar/cgi/calendar2.cgi?year=2008&month=4
気が立ったりして事件や事故が多くなるからね

話し戻して、
まぁ『このツンデレどもめっ！ﾌﾟﾆｭ( ´∀｀)σ)Д`)』くらいに思っておけば気楽っすよ？ｗ

>199
複数人数が絡んでくるとそうも言えなくなってくるけどね

概ね同意

floatで3列並べた所火狐とIE7では普通に見れるのにIE6だとカラム落ちするのですが
これを回避する方法教えてください

marginの解釈が違うんだよな。
カラム落ちというと縦方向か？

テーブルで組む

>>225
それだけでわかれというのはエスパー希望かよ
たぶんwidthの合計値がぴったり包含ブロックのwidthになってる

<a href="*****" title="aaa"><img src="*****" width="***" height="***" alt="bbb" /></a>としてる場合
カーソルを合わせるとIEではaltが表示されてFirefoxではtitleが表示されます
どちらもtitleを表示したいのですがどうしたらよいですか？

>>299
CSSの問題じゃないじゃん・・・スレ違い

>>229
imgタグの中にtitleを記述する

下記ソースの通り、フォームのスクリプトによって強制的に改行<br />の入るページが
あるのですが、このページにスタイルシートを適用させることは簡単ですので、
スタイルシートによる指定で（α）の改行を無くし、
価格と差額の inputフォームを横並びに表示させたいと考えています

<label for="kakaku">価格</label>:
<input type="text" name="kakaku" id="kakaku" value="" size="4" /><br /> ←（α）
<label for="sagaku">差額</label>:
<input type="text" name="sagaku" id="sagaku" value="" size="4" /><br />

このような場合、スタイルシートで上記のようなことは実現できますでしょうか？

すいません。質問させて下さい。
fc2の掲示板を使ってるんですが、
cssを携帯用とPC用で分けることは可能ですか？

>>233
それはfc2の仕様次第ですので、fc2関連の場所で質問してください

FC2ブログ ユーザーフォーラム
http://blog.fc2.com/forum/

FC2 blog vol.37
http://pc11.2ch.net/test/read.cgi/blog/1208356708/

>>232
上下のフォームを切り離して挿入、というか間に</div>を割り込ませられるなら

<style type="text/css">
<!--
#box{
float:left;
}
-->
</style>
</head>

<body>
<div id="box">
<label for="kakaku">価格</label>:
<input type="text" name="kakaku" id="kakaku" value="" size="4" /><br /> ←（α）
</div>
<label for="sagaku">差額</label>:
<input type="text" name="sagaku" id="sagaku" value="" size="4" /><br />
</body>

>>214
どう考えても仕様だろ
単語が途中で改行されたら困るだろ

以下のページにSlepnir（IE7）にてユーザースタイルシートを適用し、CSSの練習をしています。
http://eow.alc.co.jp/test/UTF-8

しかしながら、
body > div > table:first-child + table {
　　display: none;
}
や、
table[height~="65"] {
　　display: none;
}

などをしても、上のヘッダーを消去することができません。Firefoxでは後者の方法で消えることが確認できました。
これはどういったことが考えられますでしょうか？

>>237
IE7がどこまで対応してるかは知らんが前者はおかしくね？
table:first-childってtrだが、それに隣接する兄弟tableって？？？

上の方法はセレクタを"body > div > script + table"とかにしないと
いけないんじゃないかな。
下の方法はIE7でも対応しているはずなので、ちょっとわからない。

＞以下のページにSlepnir（IE7）にてユーザースタイルシートを適用し、CSSの練習をしています。
無駄な練習方法だな

実際にこんなごちゃごちゃなソース書くのか？

body > div > table:first-child + table {
　　display: none;
}

じゃなくて

body div table:first-child + table {
　　display: none;
}

とか

body div table table {
　　display: none;
}

で、いいんじゃない？
あと、IE6もまだ淘汰されていないから、暫く > とか + は使わない方がいい。

>>225
・フロートした要素にマージンとパディングを指定しない
・横並びになったブロックの幅が外側のブロックの90%以内にする
・ブロックプロパディでインライン扱いさせる。

文字サイズを変えられると当然崩れるわけだから、段組に限ってテーブルが楽。
あくまで、再現の話だけどね。

書き忘れたけど

A　B　C

と横並びにする場合、
AとBに幅を指定。余白と枠線は指定しない。
Cのみ幅指定しなくていいが、中身が小さければ幅指定。
とすればOKだ。
IE６はフロートされた要素に余白指定すると二倍値になるし、
幅を指定して横に余白をとっても他のブラウザとは解釈が違う。

>>243
それでいつもIE死ねと思う

>>241
>>237はいろいろなサイトに対してユーザースタイルシートを書く試みを
しているんではないの？ユーザースタイルシートを書くときは、セレクタを
細かく指定したほうが暴発が少ないし、後で見たときにコードの意味が
わかりやすいのでいいと思う。

IE6って、@importでメディア指定できないんだな。
どこまでクソ仕様なんだ。その上、知り合いは揃ってIE6にしがみつきやがるし。

糞Vistaが全て悪い。

IE6はXPのデフォだからな。
vista乗り換えなんてクソと考える奴が多いから、しばらくIE6対応だぜ。

まあ、IE6も@import不備をつついてCSSを読ませないという選択にしたいが。

ネットワーク業界の隅っこの人がとおりますよー

IE7 の新機能は、ほんっとーーーにクソですから
例えば、フィッシング詐欺検知機能
あれの検知用の DB、どこのを使ってるか知ってます？

日本国内のサイトのことなんて優先度くそみそですから、
ハッキリ言って日本では役に立たないと思いますよ（苦笑）

ゲイツ製品はアメリカで使えればいいんだよ。
日本は純正国産ブラウザを導入すべきだ。

228の回答ビンゴ〜その通り全体のマージンとカラムのマージンが判らなければ答えようがないで乙 ただしエスパーには答えが解る

IE6はまだマシだよｗ

>>251

* {
margin:0;
padding:0;
}

これで潰して、指定するなって言えば関係なくね？

ちょっと気になったのですが

CSSでのコメント/*　　　*/の中に
日本語を/*このように入れても*/問題はないでしょうか？

>>254
/* 見ちゃらめぇぇぇ */
とか
/* クライアントのくせしてうっせんだよ！ */
とか
/* 今日も愛してるわ（ちゅっ） */
とか
書いたまま納品しなければ OK

>>254
CSS の先頭行に
@charset "<文字コード>";
を入れておきましょう
ttp://www.mozilla.gr.jp/standards/webtips0023.html

参考
ttp://www.tagindex.com/kakolog/q3bbs/301/372.html

IEのバグ対策を条件分岐コメントを使ってやろうと考えているのですが
例えば
　IE7なら→ie7.css
　IE6なら→ie6.css
　IE5.5以下なら→ie5x.css
という条件の場合
DOCTYPE宣言やXML宣言の有無などで
ブラウザが後方互換モードになると
どのように認識されるのでしょうか？

みんなまだIE５対応してる？

>>255
カンベンしてくれ、仕事中にふいたｗ
質問の回答ありがとうございました

>>256
参考にさせていただきます
ありがとうございました。

IE6は後方互換にさせてIE5.5と一緒に扱わせている。
いや、XML宣言があるから意図していないけどね。

普通にコメントに日本語つかってるけど
charsetなんて知らなかった
俺初心者すぎ

普通に使うことなんかまずないもんな
けど、@importは使っとけよ？
さもないと、旧世代の負の遺産たちがお前のページを読めない状態にしやがるから

>>257
Conditional CommentはIEのバージョンで切り替えを行うわけだから、
標準/後方互換モードのどちらになっていても読み込まれるCSSが
変わることはないと思うが。

253 その通りただしワイズの書き間違えだぽよよ〜ん。横に三列でレイアウトしたらカラム落ちするんだってぇ〜。ガンガレ

mediaとかimportantでIE3やNN4を排除させてるけど
検索エンジンには大丈夫だよね？
キャッシュの表示がCSS無しになったりして。

初心者です、質問させてください。
ウインド幅を狭くしても文字が改行されないようにwhite-space:nowrapの設定をしたのですが、
<center>で指定されている文字はいまだ自動改行のままなんですが
何かよい設定ありますか？部分的なタグでの指定でも良いです。
宜しくお願い致します。

>>266
<center>使うのやめて、CSSにしなよ。
テキスト中央寄せなら "text-align:center",
ブロックボックスの中央寄せなら
"margin-left:auto;margin-right:auto;width:80%"
などでできるよ。

>>265
大丈夫。
キャッシュはlink要素も含んでいるよ。

>>266
CSS使うのになんでcenterなんか使うの？
それだけじゃ理由は分からないがcenter要素内になにか別の要素含んでない？

もしかしてCGIじゃね？
widthプロパディが使えるならそれ使え。

266です。みなさんありがとうございます。

タグで作成したものをリンキングスタイルシート？に
作り直しているところなんです・・・。家に帰ったら早速アドバイスに挑戦してみます。

フルCSSを目指すのなら、フォント遊びでもしない限りフォントを使用しない。
align=""という位置取り、brの乱打をやめれば、
テーブルを使っていても読みやすくなる。

最低限でもいいからCSSを適応させる文書に意味を持たせるんだ。
h*とpとul・ol・dl・address・blockquote・pre・a・q・ins・del
(divおよびspanは除く)
このあたりが使えて一人前だ。道のりは長いが頑張れ。

CSSは繰り返し使う要素の装飾用で良いよ。

勝手にいいことにされても

まあ、マイナーなdfnとかabbrとか誰も使わないからな。
tbodyとかtheadとかtfootとか初心者は知らないだろうし。

>>274
普通に使われてるだろ・・・

>>275
そうか？　個人サイトならまだしも企業のサイトでdfnとかabbrとか見たことがないんだが。

strictスレへお帰りください

失礼しましたorz

┌────────┐
│サンプルテキスト.....│
└────────┘
━━━━━━━━━━━━━

こういったボックスがあり、中のテキストが増えたときに自動的に
上方向に伸びていくようにすることはできますか？

┌────────┐
│サンプルテキスト.....│
│サンプルテキスト.....│
│サンプルテキスト.....│
└────────┘
━━━━━━━━━━━━━

>>279
positionで下の方に配置すればいいんじゃないですかね

いやCSSじゃ無理だろｗ

テキストとその下のラインまでをボックス内にまとめて
そのボックスを固定配置で位置指定すればいいよ。

但しテキストの行数がやたら伸びると不都合が起る場合も

bodyでヘッダー・コンテンツ・フッターの合計値を100%にして、
ヘッダーとコンテンツとフッターで%指定だな。
俺もよくやったけど、難しいことをCSSでやるもんじゃないとは思う。

フォントのTrebuchet MSを使いたいんですけど、
IE6でみると同じ行の日本語とローマ字にズレが生じるんですが矯正する方法はないでしょうか？

ない。

>>284
同じ行内にある日本語かローマ字のどちらかに対して
span などを使って行の高さを調整してはいかがでしょう？

例
<p>ねぇあたいのこと<span>LOVE</span>だよね？</p>

日本語と英語の文字量が等しくある場合、
かなりタグの数が増えてしまうのが難点ですが

親要素にＭＳ Ｐゴシックが指定してあります。
そして<pre>にＭＳ ゴシックをcssで設定しました。

この<pre>に<font color="">指定すると
このcolor指定したところだけ親要素のＭＳ Ｐゴシックが反映されます。
color指定してもＭＳ ゴシックで表示させるようにするにはどうすればよいでしょうか？

>>287
そもそもpreの中でfontは使えない…。
IE8betaの標準モード/互換モードで表示テストしてみたが再現できなかった。

デザインの変更はfontを使うよりもCSS使うのがいいと思うよ。

>>287
ごめん、補足。fontを使わないにしても
pre, pre * { font-family: "ＭＳ ゴシック",sans-serif; }
と書いておくといいかも。

font使うのならcssで、cssだとしたらspanやcodeが適任
ブロックなら間違いなくpreかな？
あるいはfirst系の擬似クラス

>>288-290
ありがとうございました。
根本的なところから間違ってたようです。
cssでやってみます。

>>286
解答ありがとうございます。仰るとおりタグが多くなってしまいますので、
なんか負けた気分になるけど一枚の画像に文章をまとめてしまいました。
今後の参考にさせていただきます。

画像かあ。まあ、いいんじゃないかな？
ちなみに英文にspanはlang属性を指定すれば決して意味のないものではないよ

margin : 0px auto;で
body要素をセンタリング。

IE6.0で見る分には常にセンタリングの位置がずれないんだけど
Firefox2.xで見たとき
縦のスクロールバーが出ると
スクロールバーの幅を引いてセンタリングされるのですが
こっちの動作が正しい仕様ですか？

ヘッダ固定で使い回ししてるけど
縦のスクロールバーが出ると全体が左にずれるので気持ち悪いんですよね。

>>294
Firefoxが正しいかと。
http://www.w3.org/TR/CSS21/visudet.html#blockwidth

でも、仕様書に"scrollbar width (if any)"が加わったのは結構最近のこと
なので、IEの実装と異っているのは仕方がないのかもしれない。

IEのスクロールバー処理がおかしいのは昔から・・・

>>295
>>296

レスサンクス
またIEですか('A`)

h2の背景画像にwidth714px、height30pxの画像を設定し、
borderの左、下、右を1pxずつとったものを真下にくっつけて表示したいのですがうまくいきません。
イメージ的に
___________________________________
|h2 .bar |
|___________________________________|
|.txt |.img |
|文章 | 画像挿入 |
|文章 | |　
|________|__________________________|

こんな感じにしたいのですがうまくいかなくて困っています。
IEだと何とかなるんですが、火狐だとうまくいかなくて・・・。
.txtを入れないとどちらもうまくいくのでなおさら困ってしまっています。
同じ様なものを3つ作成したいのでわかる方いたらお願いします。

>>298

>>298です。ミスです。

____________________________________
|h2 .bar |
|___________________________________|
|.txt |.img |
|文章 | 画像挿入 |
|文章 | |　
|_____|_____________________________|

ソースも出さずに何言ってるんだか

まずh2の背景画像にwidth714px、height30pxの画像を設定する
borderの左、下、右を1pxずつとったものを真下にくっつけて表示させればOK

エスパー回答するぜ。
border込みで画像作れ。

IEだとって人はちゃんとソース書けてないんだろうな
Mozillaの方がよっぽど再現が楽だよ

>>298
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
*{margin:0;padding:0}.c{width:714px;overflow:hidden;}
.c:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.txt,.img{float:left;padding-bottom:32768px;margin-bottom:-32768px;}
.bar {background:orange;}.txt {background:lime;width:214px;}.img {background:yellow;width:500px;}
</style>
</head>
<body>
<div class="c">
<h2 class="bar">bar</h2>
<div class="txt">文章文章</div>
<div class="img">画像</div>
</div>
</body>
</html>

>>298です。
すいません。2ch初心者なもので書き方がまずかったみたいですねorz

>>305
試してみましたがfirefoxはOKでIEはダメでした。ソースなんですが
＝＝＝＝＝HTML＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<div class="main">
<div class="logo"></div><!-- end logo-->
<div class="photo"><img src="img/top_photo.jpg" width="513" height="210"></div><!-- end photo-->
<div class="c_both"></div><!-- end c_both-->
<div class="intro">
<img src="img/intro_bar.jpg" alt="intro_bar" class="intro_bar">
<div class="intro_box">
<div class="intro_txt">
<p>テキスト・・・・・・・・<br>
テキスト・・・・・・・・・</p>
</div><!-- end intro_txt-->
</div><!-- end intro_box-->
</div><!-- end intro-->
</div><!-- end main-->
＝＝＝＝＝CSS＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
.main{width:740px; float:left;background-color:#FFFFFF;}
.logo{background-image:url(../img/logo.jpg);background-repeat:no-repeat;width:227px;height:210px;float:left;}
.photo{width:513px;height:210px;float:left;}
.intro{width:716px;margin:10px;}
.intro_bar{width:714px;height:30px;}
.intro_box{margin:0px;padding:0px;width:712px;border-left:1px solid #999999;border-bottom:1px solid #999999;border-right:1px solid #999999;}
.intro_txt{margin:10px;float:left;}
.intro_img{float:left;}
=＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ソースしかなくて、わかりづらいとは思いますが、是非いい案があったらお願いします。

>>306
イマイチ何が上手く行かんのかわからんが、.intro_bar画像の下にborderをピッタリくっつけて表示したい、
ということか？
まず、ソースがごちゃごちゃしてわかりにくいだろ。
オレなら所謂ヘッダーとしてdivを置きborder付けるなら付けた上、
その中に3つの背景画像を付けたdiv等を配置するがな。

一つ聞いていいか？
何で空のdivなんだ？

>>307
そんな感じです。
詳しく言うと、intro_barの画像の下に、borderで左、下、右を囲ったdiv(intro_box)をくっつけて配置します。
intro_boxの中にテキスト、画像３つほどを表示させたいんです。だからこんなにソースがぐちゃぐちゃになってますorz

こんな感じのものを４つほど作成しようと思っています。それぞれ幅、高さがすべて違う形になります。

>>308
logoのdivは背景画像を使用しています。
たぶんイメージのクラスを使えばいいってことを言いたいんですよね？
CSS初心者なので統一性がなかったりして見にくかったり、間違っていると感じています。
詳しく、ご指摘頂ければうれしいです。

>>310
まず基本的な作法だけ述べれば、画像しか表示されないタグ付けはimgしかないってことだよ
空白をマークアップすることはありえないというか不可能

私のホームページ

あばうと
・さいとまっぷ
・にっき
・しゃしんしゅう

↑をタグ付けすると

<h1>わたしのほーむぺーじ</h1>
<h2>あばうと</h2>
<ul>
<li>さいとまっぷ</li>
<li>にっき</li>
<li>しゃしんしゅう</li>
</ul.

HTML側の記述を少なくしたいのですが
次のようなことはCSS側で実現できますか？

HTML側
　今の状態
　　<a>
　　　<b>タイトル</b>
　　　<c>中身</c>
　　</a>
　こうしたい
　　<a>タイトル
　　　<b>中身</b>
　　</a>
出力
　_____________
　|タイトル
　|____________
　|中身
　|____________

途中で落としたんだが、いいか

ともかく例示のようになる。
で、CSSというのは例示のようにタグ付けしたものを装飾するためのものなんだ
だから空の<div></div>みたいなものはありえない
じゃあ、どうするのかというと、

<h1>logo</h1>
<hr>
<p>てきすと</p>

みたくしてごちゃごちゃとCSSをいじるわけ
足りない分はdivやspanで補う感じだな
だから難しいようなら物理マークアップでいいんじゃなかろうか？
もう、それこそimgで上部表示しちゃうくらい強引でいいんじゃと思った次第

>>312
デタラメなタグのようなもので回答を得ようとは図々しいですね。
正しいhtmlをcssで装飾する、それだけです。

>>312
divの直下になんらタグ付けされないタイトルを書けばできる
いいか悪いかは別としてね
俺がやるのならdlリストとかulリストで下のようにする

<ul>
<li>タイトル
<ul>
<li>中身</li>
</ul>
</li>
</ul>

みたくすればOKかな。
で、CSSでごにょごにょすればできるよ。もちろん、divでもできる

>312
aの上下左にborder。bの上にborder。

　_____________
　|a
　|____________

　　　　　+
　_____________
　b

>>312
すみません、htmlではなくxhtmlでした
(わかりやすくするためタグ名を短くしたつもりでした)
頭が悪いのでどうも要点をついた質問ができてないですが
XHTML+CSSの場合、div="hoge"とやればクラス指定はできますよね
<a>は例えば、<p div="class1 class2">みたいなものだと思ってください

>>313
どうもです
私の質問はこの例だと、「中身」を囲っている<ul>を
もっとも外側の<ul>へのdiv指定等でごにょごにょして
元の文書側で省略できないかな、と思ったんです
<ul>←これはIDなりクラスなりで修飾
　<li>タイトル
　　<ul>←これってやっぱり省略できない？
　　　<li>中身</li>
　　</ul>
　</li>
</ul>
こういうのって見た目というよりは構造の話になるような気もするのですが
やっぱり不可能ですかね？

>>316
どもです。ちょっと試してみます。

入れ子にすることを想定しているので
全体を囲っているボックスが長方形になれば
この方式でいこうと思います

317のアンカーミスってる
>>312は>>314さん宛0
>>314は>>315さん宛でした

>>313
わかりやすいご指摘ありがとうございます。
ソース書き換えてもう一度書き込みます。

たとえば
　＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
｜intro_bar（画像)
｜-----------------------------
｜intro_box（左、下、右にborder指定したい）
｜　-------------------------
｜｜intro_txt｜intro_img
｜｜＿＿＿｜＿＿＿＿＿＿＿＿
｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

見たいにしたい場合、どんなソースが一番なのでしょうか？

>>317
xhtmlはルーズじゃないからムリ
というか、サボりたいならHTML4.01使いなさい
アレはルーズだからガンガン省略できるよ

>>320
そんなありふれたレイアウト、一々他人に聞かなきゃできないわけ？
あまりに勉強不足。できもしない事やろうとすんな。

>>320
どうしても、CSSを使うんだ！　というのであればまずはタグ付け前のテキストを起こしてみよう
そうすれば自ずと何が足りないのかが見えてくる。大事なのはCSSを適用する前の状態だよ
そうじゃなくて、ソースが汚くても画像表示中心であれば、テーブル+img+あとちょっとCSSとする

別に>>306でもいいんだけど、空divの制御って無茶なもんだから難しいのよ
で、見た感じわざわざ難しいことに突っ走っている感じがする
CSSに慣れた人ってCSSであえて難しいことをしないんだ

省略はできないみたいだけれども
一端は316さんの方式で対応することにしました
div.a{ border:1px solid #000;}
div.a div{ border-top:1px solid #000;}

>>321
やっぱりそうですか、しょぼん・・
後で再利用したいので、頑張って書くことにします

>>324
サボっていいのは、細かい文字単位のマークアップだ
骨子になる見出しとか、テキストはちゃんとマークアップしなさい
そうすれば再利用できるから。省略するから再利用できないのであって

今後のことを考えたら最小ブロック単位はp要素でhrとかbr要素は使わない
divもなるべく避ければいいと思うよ。なるべく素直に丁寧にタグ付けしなされ

>>325
アドバイスありがとうございます
上のマークアップはプログラムのソースコードを表示する欄が作りたかったので
preを使うことにしました。

それと、すみません、まだよくわかってないのですが、
divを避けるべきというのはどういった理由でしょうか？
最小単位はpのほうが扱いやすいということでしょうか

>>320
できないから聞いてるんですorz
テーブル使って見た感じはきれいにできますが、CSSの勉強のためにわざわざめんどくさいことやってるので。

>>321
確かにご指摘の通りです。見直してみてなんかめんどくさいことやってるなとはかんじました。
できれば、難しいとは思いますが、CSSでレイアウトをしたいと（勉強のために）考えています。
今までのようにテーブル使えば簡単なんですが・・・。

何で、テーブルだと簡単なのか、一回パソコンから離れて考えろ
CSSでももちろんテーブルのレイアウトは可能だが、
慣れた人はどうしてやらないのか、
そこを考えれば答えは分かるよ
CSSは万能に見えるけど、そうじゃないんだ

>>327
世の中ナメ杉
できないから勉強する、できないから金払って頼む、できないから諦める

>>321
HTMLのソースから見直して見たらなりました。
やっぱりCSSはHTMLがしっかりしてこそ機能するんだなと感じました。

他にも厳しい指摘がありますが、何とか努力していきたいと思います。

>>309
おますはますCSSの基本を勉強してこい
高さなんて揃わなくて当然だ

質問厨の初心者フルボッコだなｗ
こういう奴は2ちゃんよりはミクシィで教えを請えばいい。

人はこうやって成長するんだよ

２ちゃんの赤の他人なら二度と会うこともわからんから屁でもないが、直属の上司とかに言われると精神的にくるよな
それを勘違いした奴らが社会に増えて、スポ根アニメのように叩いて育てるが社風になっているところは地獄だ
新人は潰れるか、新たな新人を叩く鬼に育つかのスパイラルで、人というものが育たなくなる

CSS で出来ることと勘違いしている人、
CSS 以前に HTML の領分の場合は↓へ淡々と誘導ご協力お願いします

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

このスレにも「基礎から」厨が出るようになったのか。
初心者スレだっつーの。

初心者は何の努力もいらないとでも。そりゃまたすごい世話好きクンだな。
一からソース書きますスレ立てたらいいよ。

>>1を100回くらい読んで上級スレ行けばいいのに

本スレで「回答者は『基礎から勉強しろ』と説教しているばかりじゃん」
「不勉強な馬鹿はほおっておけ」ってさんざんもめて、基礎もわかって
ない初心者はこのスレで対応する流れになったのに、何を言っているのか。
初心者に手取り足取りレクチャーしたいなら初心者スレ使えって
言っていたくせに…
上級者は本スレで初心者に説教できなくかったからって初心者スレにまで
しゃしゃり出て来ないでもらいたい。

本当に呆れたアホ共ですな。
おまえらと違ってこのスレで何度も回答してる。
基礎からやれなんて書いた事もないが、一からソース書いてやる程お人好しではない。
手取り足取りやるってなら、上の質問者に答えてやればいいだろ。
ソース書いたれ。能書きたれる前になぜやらない？

まあまあ。すでに回答は各種出てるんだよ。
ただ質問者はそれらをことごとくスルーしてるわけさ。ソースにしか反応しない。
親切心が起きないのも仕方ないよ。

>>320はこうしたいのか？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
*{margin:0;padding:0;} .main{width:740px;}
.intro_box{border-left:1px solid #999999;border-bottom:1px solid #999999;border-right:1px solid #999999;}
.intro_box img{float:right;} .intro_txt{margin-right: 300px;}
</style>
</head>
<body>
<div class="main">
<div class="intro_bar"><img src="intro_bar.jpg" alt="intro_bar" width="714" height="30"></div>
<div class="intro_box">
<img src="intro_img.jpg" alt="intro_img" width="300" height="50">
<p class="intro_txt">テキスト…</p>
</div>
</div>
</body>
</html>

確かにこの質問者は2chよりOKWebとかで聞いたほうがいいんじゃないか
という気がする。

OKWebじゃなくてOKWaveだった。

質問です。
CSSで縦書きの値段表を作成しています。

○ソース
<div style="writing-mode:tb-rl; height:200px;">
<dl>
<dt>顔文字</dt>
<dd>やるお　　　壱千円</dd>
<dd>やらないお　弐千円</dd>
<dd>ツン　　　　壱万円</dd>
</dl>
</div>

○画面上では
やるお　　　壱千円
やらないお　 弐千円
ツン　　　壱万円
と表示されます。項目と値段の間にスペースを使用していますが、スペースを使わずに、
<dd>内の頭と終わりを綺麗に合わせたいのですがCSSの何を使えばよいでしょうか？

表はテーブル使え。その時点からして間違いだ

>>345
スペース使うけどfont-family:monospace;で揃えられるお（ ＾ω＾）

>>345
ddに項目と値段の両方書くからそうなる。
dt項目dd値段で横並びにすればそんな問題は起きない。
しかしそんなテクにはしるより>>346が正解。

基礎とか言ってる奴はスルーすればいい

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

基礎とか言うぐらいならわざわざ奴は答えなくていい

※上級者スレにお帰りください

馬鹿丸出し
お前らが上級者スレに粘着してた連中だってのがよーくわかった
次はここの番だ

次はここの番だ？ｗ

すみませんどなたか教えてください
よくheight:100%でスクロールしても背景が途切れないようにするというのがありますが
それを横幅に応用しようと思ってみたのですがうまくいきません。
説明がうまくできないので簡単なサンプルのソースを用意してみました。

<style type="text/css">
*{margin:0;padding:0;}
html{width:100%;}
body{width:100%;background:#999;}
#Container{width:100%;min-width:100%;background:#555;}
img{background:#fff;}
</style>

<div id="Container"><img src="xxx.jpg" width="500" height="500" /></div>
<img src="xxx.jpg" width="700" height="500" />

ブラウザのウインドウを下の画像より小さくして横にスクロールした場合
上のDIV要素の背景が途中で切れてしまいます。
これをなんとかスクロールしても伸び続けるようにしたいのですが
なにか方法はありませんでしょうか・・・？
どうかよろしくお願いします。

width値をautoにしてみたら？

height値をautoにしてみたら？

>>354
ダメでした・・・

これ背景画像の表示でしょ？
素直に表示位置いじって、背景画像と色が合えば文句ないと思うよ？

違ったか。すまんすまん
この場合はpositionの方がうまくいくと思う
表示位置をいじる場合は親要素の幅を指定するより、positionで位置定めたほうが一発なんだ

>>358
レスありがとうございます。
表示位置というか横幅の100％以上の表示をどうしたらいいかが知りたいのです・・
縦の場合は色々と探せば出てくるのですが横のこんなケースの場合が見つからなくて・・・

横幅100%の場合はそもそも指定する必要がない
当たり前だけれどそういう場合はスクロールバーを出さずに折り返すでしょ？
それとも窓・タブが表示された画面の大きさを計算したいのかな？
それだとちょっと縮めたらスクロールバーが出るほどの固定なんだけど

一つだけ代案かな？
自分は後方互換に多く用いる方法

<body>
<h1>hoge</h1>
<p>hoge</p>
<h2>hoge</h2>
<p>hoge</p>
</body>

例えばこんな簡単な形式の骨子があったとする
で、こいつを中央固定幅に指定してやりたい
そういう時はあえてbodyに幅を指定せず
body直下のブロック要素に幅とmargin:autoを指定するんだ
bodyに幅・marginを指定したとしても同じ表示結果になる
でもこの場合には多少自由度が生まれる
例えば、一部分だけ右端にテキストを表示したいとかね
多分、これがヒントになると思うよ

>>360-361
レスありがとうございます。
是非参考にしたいと思います

みなさまどうもありがとうございましたm(_ _)m

いかにアホな答えを書くかを競うスレです。アホな回答ほどポイントがあがります。
エラそうに他人の批判のみ書きまくるのも得意としてます。
珍回答が数々ありますが上記理由の為、致し方ありません。
期待せずご質問をどうぞ。

下記ソースの通り、フォームのスクリプトによって強制的に改行<br />の入るページが
あるのですが、このページにスタイルシートを適用させることは簡単ですので、
スタイルシートによる指定で（α）の改行を無くし、
価格と差額の inputフォームを横並びに表示させたいと考えています

<label for="kakaku">価格</label>:
<input type="text" name="kakaku" id="kakaku" value="" size="4" /><br /> ←（α）
<label for="sagaku">差額</label>:
<input type="text" name="sagaku" id="sagaku" value="" size="4" /><br />

このような場合、スタイルシートで上記のようなことは実現できますでしょうか？

tableでいいじゃん

htmlに<br>と出力されてしまう限りどうしようもない。
cssはhtmlと同じく静的なもの、魔法の杖ではない。
書き出す側で処理する問題であり、
何のスクリプトだか知らんが、JavaScriptスレまたはwebprog板。

>>364
display:none;

>>364
改行外して正しくマークアップすればよくね？

>>367の方法で出来ました。
ありがとうございました。

<form class="f1" action="test.cgi" method="post">〜〜</form>
<form class="f1" action="test.cgi" method="post">〜〜</form>

みたいな感じのソースで、formの二つを左右に並べるように配置したいのですけど、
どのようにすれば可能でしょうか？

>>370
<form class="f1" action="test.cgi" method="post">～～</form><form class="f1" action="test.cgi" method="post">～～</form>

.f1 {
width: 40%;
float: left;
}

>>372
うまくできました。ありがとうございました

<form class="f1" action="test.cgi" method="post">～～</form>
<form class="f1" action="test.cgi" method="post">～～</form>
<form class="f1" action="test.cgi" method="post">～～</form>

みたいな感じのソースで、formの三つを左右に並べるように配置したいのですけど、
どのようにすれば可能でしょうか？

質問がイミフ
横一列にしたいってことじゃないよな

馬鹿にしているのかｗｗｗｗ
position
float
table
好きなものを使え

>>376
意味わかりません
cssでお願いします

>>376
意味わかりません
日本語でお願いします

<form class="f1" action="test.cgi" method="post">～～</form>
<form class="f1" action="test.cgi" method="post">～～</form>
<form class="f2" action="test.cgi" method="post">～～</form>

form.f1 {
width:30%;
float:left;
}

form.f2 {
width:30%;
clear:both;
}

ほぼ>>370の質問だろ。これ

お人好し度検定だろ。これ

<form class="f1" action="test.cgi" method="post">～～</form>
<form class="f1" action="test.cgi" method="post">～～</form>
<form class="f1" action="test.cgi" method="post">～～</form>
<form class="f1" action="test.cgi" method="post">～～</form>

みたいな感じのソースで、formの四つを横一列に並べるように配置したいのですけど、
どのようにすれば可能でしょうか？

>>381
.f1 { float: left }
でどうでしょうか。

できませんでした。

>>383
お使いのブラウザとOSを教えてください。

float使うときはwidthを忘れるなってお母さんに言われなかったか？

最近のブラウザはshrink-to-fit方式でフロートの幅を決められるので、
幅指定がなくてもいいんだよ。

ブラウザじゃないブラウザらしき物だとダメらしいです

文法規則だから幅を指定しないのはアウトだ

>>388
CSS2.1では問題ないよ
IE6の時点では2.0だったから、あれは単なるバグだけどｗ

ブラウザじゃないから当然です。

>>390
ご主人様、そろそろ上級スレに行く時間ですぞ！

社員登場

お前らブラウザとか使ってるの？？？

>>392
零細企業のweb担当の俺がなれるものなら是非

IEがCSSをキャッシュする期間ってどれくらいでしょうか？
デフォルトで。

文字数に応じて背景画像がのびていくCSSを作ったのですが、IEのみ適用されません。何でですか？下のmiddleが消えているようなのです。

<div class="top"></div>
<div class="middle">ここが内容。</div>
<div class="bottom"></div>

.top{
width:210;
height:50px;
background:url(top.jpg) no-repeat;
}


.middle{
width:210px;
margin:0;
background:url(middle.jpg)repeat-y;
}

.left_bottom{
width:210px;
background:url(bottom.jpg) no-repeat;
height:30px;
}

>>396
TopとBottomは必ずテキストを内包しよう
例：Topはh1でbottomはaddressがいい

で、left_bottomってなに？

>>396
url(middle.jpg)repeat-y;
を
url(middle.jpg) repeat-y;
に直したらどう？(スペースを入れる)

>>397
ありがとうごさいます。
装飾するのに便宜的に空のdivを用いてはいけないんですね。
テキストを入れる場合、半角英数でも大丈夫ですか？
left_bottomは素のコードを消し忘れていました。

>>398
ありがとうございます。細かなところまで注意しないといけないんですね。
試してみます。

>>399
カウンターでしょ？　大丈夫だよ
後

セレクタ {
プロパディ:数値;
}

のような書き方をすると問題は起こりにくい
後、一括指定はなるべく半角スペースで空けた方がいい
人間にも優しいし機械もたまに読み違えるから
ちゃんとコード打ってるstrictなサイト参考にしたほうがいいよ
書き方に関してはほぼ間違いは少ないから

どうでもいいけど
width:210;
はまちがい

>>400
参考サイトのリンクお願い

自分も知りたい。
初心者には、どのサイトや書籍が正しいかって分らないんだもんね。
自分が8年前、サイトつくるときに参考にしてしまったのがとほほだった…。
最近、勉強しなおしてるけど、途方にくれてる。

FAQのA1のサイトは大抵正しいよ。

まさにとほほですね、わかります

自分が参考にするのはイケてるCSS集のCSSだとかかな
ただ、参考にすべきCSSというのは、人によって違うというのが今のところの結論
中身に関して言えばStrictな方向に走るか、
それとも描画ありきのCSSに走るのかは各々によってやっぱり違う
何を参考にすべきかっていうのは自分がどんなCSSを書くかになるかだから

単純に難しいことを望むのなら推奨されなくてもテクニック型のサイトになる
Strictでブラウザを考えたい自分はADPと睨めっこして
どういう元のHTMLを書くかが最重要であって、難しいCSSはあまり望んでいないし

>>405
>>405
>>405

ていうか、どのようなデザインのCSSを書くか、ということと
どのような文書規則でCSSを書くか、ということを
ごっちゃにしてる奴が多いな。

>>404
正確なんだけど詳しすぎて初心者向けではないんだよね。

http://www.stylish-style.com/
は読みやすくていいんじゃないかと思う。実用的なテクニックも
まとまっているし。

>409
ありがとう。
そうなんだよね、詳しすぎて訳が分らない。
これまで、テクニック集とされてるものをコピペしてきただけだから。
助かる。

>>409
待て、そっちこそ初心者向けじゃないｗｗｗ
小手先の技ばかり捕らわれて本質を見失いがちなのが初心者だ。

>>403
だからこそ、FAQみたいなサイトのがいいんだよ・・・
>>409のようなところを使ってたら、いつまで経っても上達しないぞ

ほっとけよ
そういうトコに頼ろうとするからずっと初心者なんだろ

何にせよ読むのも考えるのもイヤなんだろ。コピペ出来れば何でもいい。
だから回答もソース書いてなきゃスルー。
それでおkってのがこのスレのスタンスらしいし。

>>412
確かに、全くCSSを知らない人には>>409をおすすめできるけど、
>>403みたいな人は http://hp.vector.co.jp/authors/VA022006/css/ で
CSSの仕組みを知るのがいいかも。でもそれだけだとCSSにやたら詳しい
だけの知識バカになりうる危険もあるので、いろいろなノウハウを
身に付けるべきだと思うんだけど、日本語のサイトでそういった
テクニックをまとめているところはあまりないんだよね。英語圏なら
http://maxdesign.com.au/presentation/ とかあるんだが。

>確かに、全くCSSを知らない人には>>409をおすすめできるけど
誰　が　そ　ん　な　こ　と　言　っ　て　る　ん　だ　よ　ｗｗｗ

>>415
初心者にテクニック覚えさせてどうするんだよ。
必要なのはまず基礎だろ。

基礎基礎と繰り返して言っているその基礎っていったい何なの？
セレクタ・プロパティ・単位・HTMLとCSSの結び付け、これだけでは
不十分なの？

以下のページにSlepnir（IE7）にてユーザースタイルシートを適用し、CSSの練習をしています。
http://eow.alc.co.jp/test/UTF-8

しかしながら、
body > div > table:first-child + table {
　　display: none;
}
や、
table[height~="65"] {
　　display: none;
}

などをしても、上のヘッダーを消去することができません。Firefoxでは後者の方法で消えることが確認できました。
これはどういったことが考えられますでしょうか？

なんか荒れてしまったようですみません。
htmlとcssは、一応今はサイトからコピペしなくても
自分で考えて書いてるけど、単に書いているだけで、めちゃくちゃな状態です。
（たとえば、駄目だというのを知りつつ、テーブルでサイトのデザインをしていたり、
ドキュメント宣言の存在はしっていても、それぞれの違いは全く知らないとか）

Ａ１参考にしてみます。
ほんとごめんなさい。

>>419
上のセレクタはヘッダのtable要素にマッチしない。
下のセレクタは目的のtable要素にマッチする。IEは値が数字で始まる
属性を持った要素に、属性セレクタを適用できない不具合があるっぽい。

質問させてください。

FORMで「type=text」の場合はCSSで高さを指定できるのですが
「type=file」の場合どうやって高さをしていできるのでしょうか？
よろしくお願いします。

解決しました。

>>418
結局基礎って「知恵」じゃなくて「知識」でしょ。

言う通り、セレクタ、プロパティ(全てを完全に覚えてる人はいないよな)、単位、リンク、
@ルール、floatの特質などを「知識」として知ってれば基礎はマスターしてる、というところじゃない？

どうやればデザイン的にどうなる、というのは応用の領域だと思う。

自分で思い通りに行かないときに切り分けができれば基礎はマスターしてる
コピペじゃ無理

少なくとも、ここで質問する人間はコピペレベルだよな
このタグよさげじゃんって使うレベル

>>400
IEでも表示されるようになりました。
セレクタのあとに半スペが無かったせいだとおもいます。ありがとうございました。あと、半角英数ではなくて、半スペの間違いでした。
<div class="middle">の上にbackgroundで画像を入れたいだけなので、<h1> </h1>みたいなようにしてもいいのかと。

>>401
ですね。firebugからコピペしてしまうのも悪習です。すべてのソース見直して単位を付けました。

><div class="middle">の上にbackgroundで画像を入れたいだけなので、<h1> </h1>みたいなようにしてもいいのかと。
中身のテキストは空じゃ駄目だと半角スペースでも駄目だと（ｒｙ

うーん……どうしたらいいのかね……
>>396はbodyとhtmlに画像表示指定していないの？
もし何も指定していないなら

html {
color:#000;
background:#fff url(top.jpg) top no-repeat;
}

body {
color:#000;
background:#fff url(bottom.jpg) no-repeat;
}

#main {
background:#fff url(middle.jpg)repeat-y;
}

<body>
<div>
本文
</div>
</body>

こうした方がないdivを使うよりもずっとマシだと思うんだけど

ああ、分かると思うけど、paddingで描画位置を操る感じになる。

あ、bodyにbottom center　が抜けてるし、colorも抜けてるorz

>>428
あ、やはりダメなんですね。


>>429
丁寧にありがとうございます。
そのように作り直してみます

というか、質問に来るお前らはそんなに画像表示する必要があるのか？
俺、自前のサイト見直したら背景画像しか表示してなかったよ。

背伸びして出来もしない事をやろうってのが間違い

これで複数背景が実現したら
素人のサイトのほうが重くて行けたもんじゃなくなりそうだ・・・

まあ、固定よりは幾分もマシだろう
何箇所も固定しまくるブログとか重すぎるよ

fixedのことか？
それだったら制作者のIE6じゃどうせ固定されてないだろうにな

>>437
最近は狐ユーザーも多い
IE6は俺のサイトだと見かけなくなったな
検索来客がIE5.5いるから合わせてるだけだけど

>IE6は俺のサイトだと見かけなくなったな
何その羨ましい環境('A`)

何そのあり得ない環境('A`)

なんだか上級者が質問の内容をネタに雑談するスレになりつつあるな…
まあ誰も困らないからいいんだけど

はいはい

こんばんは、インライン置換要素の幅の計算について質問です。
http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width に
> If 'height' and 'width' both have computed values of 'auto' and the
> element has an intrinsic ratio but no intrinsic height or width and
> the containing block's width doesn't itself depend on the replaced
> element's width, then the used value of 'width' is calculated from
> the constraint equation used for block-level, non-replaced elements
> in normal flow.
とあるのですが、これは具体的にはどのようなケースがあるのでしょうか。
他の条件は具体例が見つかるのですがこれだけはよくわかりませんでした。
よろしくお願いします。

>>443
＞他の条件は具体例が見つかるのですが
質問内容が意味不明ですが、どこで見つけようってんですか？

ここは初心者スレッドです。
高等な質問はよそでやってください

>>444
質問がわかりにくくてすみません。例えば一番目の条件はimg要素にラスタ
形式の画像が指定されていてheight,widthが無指定の場合だとか、二番目の
条件はimg要素にheightをpx指定でwidthが無指定の場合だとか、具体例を
考えられるのですが、引用した三番目の条件だけは具体例が想像つかない
ので教えてもらいたいのです。

重ね重ねよろしくお願いします。

ん？それってimg等置き換え要素そのものじゃなくて、
img等が行内に入れられたブロック要素の話だろ？
そもそも根本からして考え違いしてない？

>>447
うーん、タイトルが「Inline, replaced elements」だし、内在幅や内在比の
あるなしで場合分けしているので、img要素やobject要素などの置換要素の
幅についての項目であることは間違いないと思うのですが。そうでないと
(used height) * (intrinsic ratio) なんて計算はできっこないですし。

この3番目だけは謎なんですよね…手元の本もここは飛ばして解説されて
いるし、ウェブ上にも説明がなさそうなので中の人に聞かないとわから
ないんじゃないかという気もしてきました。

>>448
あんたの言ってる事が謎なんだが、無理せず2.0邦訳を読め。

>>448
そのページ全部包含ブロックの説明だろ・・・

>>449
2.0のほうにはない。

しかし443は何か質問の仕方自体を間違えているような気がするから答えられない。

>>449
邦訳は
http://hp.vector.co.jp/authors/VA022006/css/css21_visudet.html#inline-replaced-width
にありますが、邦訳読んでもやはり何を想定して書かれた条件なのかが
わからないのは変わらないです。

>>450
包含ブロックの定義は頭の
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
の部分だけで、メインはwidth, height, marginの計算方法だと思います。

>>451
仕様書を読んでCSSの基礎をじっくり固めようとしているところなので、
そうしていると「これこれするにはどうすればいいのか」という疑問より
「仕様書のここはどういう意味なのか」といった疑問がわいてくることが
多いのですが、言われてみると何か方向性を間違えているような気が
してきました。http://hp.vector.co.jp/authors/VA022006/css/ に
書かれていることがわかるくらいでいいのかなあと、妥協しそうです。

>>453
別に深く考えても仕方ないような。日本語でおkと言いたい文章だし。
imgで言うと、縦10px ＆ 縦1：横2という情報を持ってる画像で、
height:10px; width:auto; にすっと、widthは10px*2＝20px になるってことでしょ。

あー>>454訂正、インラインだったよ。
×height:10px; width:auto; にすっと
○width:auto; にすっと

>>454
どうもです。
>>454の例は二番目の条件ですね。三番目の条件はとりあえず考えない
ようにします。
意味不明な質問におつきあいいただいてありがとうございました。

本を2冊買って、ネットで調べたのですがどうにもわかりません。
教えてください。　よろしくお願いします

外部出力で作成しています。
他人のページですが、自分の目指す物はこんな感じです。http://www.affiliatemanual.net/

このサイトのように余白と内容の色の区分けをしたいです。
余白はマージンで設定していると思うのですが、body{background-color}で背景色を設定すると
余白も中身も同じ色になってしまいます。

ＨＴＭＬのソースだけで表示してみるとＨＴＭＬの表は使っていないようです。

このサイトのように、ＣＳＳだけでマージンと中身の色を分けるにはどうすればよいのでしょうか？

>>457
たとえば、そのサイトなら
「body」 「indexmenu」「pick1」
みたいな感じに重なってできてるのよ
で、 「indexmenu」「pick1」の背景は透明なので
「body」に色をつけると、すべてが変わる

こんな感じ
「body(黒)」 「indexmenu(透明)」「pick1(透明)」　→すべて黒

だから、pick1,2,3に色をつけたらOK

ただ、、、、

まぁ、また壁にぶつかると思うね。その時はまた着なさい。

>>457
cssのソース見れっての。cssスレだぜ？

>>457です
ずっと試行錯誤で考えたらやり方がなんとなくわかりました。

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

>>460
あれ、高さが合わないから変になると思うねんけど。。。
ま、いっか

wrapperのwidthを900pxに設定してます。
headerのwidthは700pxで、残り200pxあるのでそこに文字を書きたいのですが
良い方法ご存知でしょうか？？

書けばいいと思います

#wrapper {
width : 950px;
margin : 0 auto;

}

#header{
height : 150px;
background-color: #FFFFFF;
}

.test {
width:140px;
margin-left: 800px;
}

これでいけたんですが。　あってますか？

floatさせたほうがいいんじゃない？

やっぱそれでいいや

>>466
親切にありがとうございます。

いうか900px・・・

本を2冊買って、ネットで調べたのですがどうにもわかりません。
教えてください。　よろしくお願いします

外部出力で作成しています。
他人のページですが、自分の目指す物はこんな感じです。http://www.affiliatemanual.net/

このサイトのように余白と内容の色の区分けをしたいです。
余白はマージンで設定していると思うのですが、body{background-color}で背景色を設定すると
余白も中身も同じ色になってしまいます。

ＨＴＭＬのソースだけで表示してみるとＨＴＭＬの表は使っていないようです。

このサイトのように、ＣＳＳだけでマージンと中身の色を分けるにはどうすればよいのでしょうか？

色をつけたいとこのブロックの大きさ決めてそこに指定する
bodyは全体に指定しまうから背景の時しか使わない

>>469
本読めば分かるはずなんだが、
一要素には一つの背景色（画像）しか指定できない
つまり、どういうことかというと

body {
color:#000;
background-color:#fff;
}

h1 {
color:#fff;
background-color:#000;
}

<body>
<h1>見出し</h1>
</body>

つまりこういうこと。君の場合は答え載せても進歩しないから解説付きだ

>>469
ああ、分かるように、文字色なども基本的に一つ
※本当は違うんだが、それはおいおい勉強してくれ
だから、部分的にサイズや色を変える時はspanとかdivを使うだろう？
よって>>471になるんだ。二回言ったのはそれだけ基本的で重要なことだからさ

というか、俺の頭はCSS2.0で止まっているんだ深い突っ込みはよしてくれ

ボックス内の送信ボタン "input" の位置指定について質問させてください

現在、IE から見ると以下の vertical-align: top; のような雰囲気で
ボタン●がボックス（ td や div ）の上隅の方へ寄って見えています

□□□
□●□
□■□
□　 □
□□□

これを上記の■の位置に表示させる最善の方法はどういったものでしょうか？

td や div に対して vertical-align で位置指定すればよいのか、
input 自体に位置を指定できるのか、また、どういった方法がスマートなのか、
教えていただきたくどうぞよろしくお願いいたします

単に改行して下へ押しやればいいんでないの？
ぜんぜん意図が違う？
div内だったらinputをdisplay:blockしてmarginとかはダメかな

>>473
普通に親ボックスに上パディングを設定すればいいと思うんだが。

>>473
>上記の■の位置
上から1emの位置なのか、垂直方向の中央なのか。

中央の場合
tp://phpspot.org/blog/archives/2006/12/divcss.html
tp://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm

ここでいいのか分からないけど質問です。

overflow:auto;
を使ってスクロールを出して固定範囲内に文章を表示させてるんですが、その文章内のリンクがうまく飛びません。

<a href="#moge">moge</a>

<a id="moge"><img src="xxx.jpg"></a>


って感じに書いてるんですが、クリックしてもスクロールが動きません。
そこからマウスでくりくりするとリンクを張った先から動いたように見えるのでリンク自体は生きてるみたいなんだけど描画されてないというか。

説明下手で済みませんがこれで分かるエスパーの方がいたら解決法教えてください。

それは動かなくていいと思うよ。

スタイルシートで背景色をブリンクさせることは
できないでしょうか？

gifアニメーション

>>480
目から鱗が発生しました。

止めろと言いたい・・・

<div class="hoge">hoge</div>
のhogeクラスの中身をJavaScriptで動的に変更できないでしょうか？

それができればブリンクっぽくできると思うのですが・・・

$("#hoge").html("fuga");

俺ならSSI使う

大量の<div class="hoge">hoge</div>のスタイルを
一気に変更したいのでCSSのhoge内を動的に変更したいのですが
やっぱり無理でしょうか？

var elements=document.getElementByTagName('div');
for(var i=0,e; e=elements[i];i++) {
if(e.getAttribute('class')=='hoge') {
e.setAttribute('class','fuga');
}
}

こうかな？

ごめん。getElementsByTagName が正しい。

>>487
それだとひとつひとつ<div>のclassを変更していくことになるので
遅いんですよねー

>>489が改良版を書いてくれるそうです。

486＝489か？
なんか、質問のくせしてたまにこういうやついるからなあ

phpやperlやruby使って置換するのはダメなのか？
JSよりも効果的だと思うぞ

というかおまいらスレ違い

http://www2.uploda.org/uporg1419228.zip.html

これは・・・！

>>491
ブリンクさせたいのでサーバー側で処理は無理だと思いますよ。

ブリンクってblink？
なんであんなもんが好きなんだろうか

超初心者だから

>>496
ジコチュウのページを作りたいんじゃね？

アクセントとしてはいい。ただ、センスが問われるが。

いやただダサいだけだろｗ

こういうページをつくりたいんじゃないかな。
http://www.quieroverunfantasma.com/

>>501
そこ、ほとんどFLASHじゃねえかよ……

静的css内でphpファイルを@import
importしたphp内で動的cssを生成
元の静的cssに@import。
それで動的css完成。
cssで可能なことは全部出来る。

上級者様ｷﾀｰ

>>503
phpが使えれば俺もよくやるね
perlとかでもできるのかな？　そうなるとcgi連動の動的ページだけど

こういうページ作りたいんだろ？ｗ
http://www.aiseikai.or.jp/

これはハイセンスだな・・・

>>506
そうです
こういうページが作りたかったんです
良いですよね、ブリンクは目立つので

は、はやく作れるようになるといいな
ブリンクサイト・・

ユーザービリティーを優先すると目立たせるというのは大切だと思うのですよ
いつも操作する先に目が行くように考えて作っています

blinkってIE非対応じゃなかったか？

だからCSSで作るんですよ
これぐらい発想力がないと今のWeb生き残れませんよｗ

発想力とWEB的センスは別物だろｗ

遅くなりましたが動的にCSSを変更ってこんな感じですか？
http://www.box.net/shared/womctwckks

blink！
http://jm80s.s201.xrea.com/

>>514
それだとあまりメリットがないな。
javascriptは苦手だからphpでポイントだけ。

/*pageの頭に変数を片っ端から宣言して*/
$color1="#ffe0f0"
$color2="#ffa0f0"
$border1=" solid 1px #ffffff"
$pageWidth="40em"
$sideWidth="40%"
//// 変数同士の足し算引き算でdivの横幅とか設定できるから便利////
$mainWidth=100 - intval($sideWidth) . "%";

/*css適用時には変数でやる。*/
body{background:<?= $color1 ?>;
border: <?= $border1 ?>:}

こうすれば、微調整は変数宣言部をちょっと弄るだけでok。
ループで連番classとかも作れる。
if文でブラウザごとに違う数値を適用したりも出来る。

こりゃまた的外れな

上級者様だから

>>516
おまいのお陰でphpによる切り替えCSSを思いついたぜ！

普通、インポートするCSSで切り替えないか？

質問

font-sizeを%じゃなくpxで指定すると、ユーザー側で文字サイズを変更できません。
pxで指定しつつ、ユーザー側で変更できるようにするにはどうしたらいいでしょうか？
ついでにもう1つ質問。
font-sizeはどのような指定方法がオススメ？

>>521
pxで指定して変更させるには、CSSの切り替えだね。
医療などのホームページに「文字のサイズ[小][中][大]」
みたいなのがあるから、それを参考にしたらいい。

もうひとつの質問の意図がわからん、もう少し具体的にお願い。

ちなみに、基本的にはfont-size指定ってのはやらないほうが良い。
font-size指定ってのは、あくまで「作る人のワガママ」であって、決して「ユーザーの為」ではないから。

>>521
パーセントだろうがpxだろうが本文にフォントサイズ指定すんな。以上。

フォントサイズは指定すべき
固定させるとユーザビリティをそこなうとこいう信者もいるけど
フォントサイズを変更するやつなんてそんなにいない
そもそも変更できることを知ってるやつもそんなにいない
かえる奴はＩＥなんて使ってない
よって気にする必要はない

>>524
そういう風に断言しちゃったら、webデザイナーって終わりじゃね？
ちゃんと調査したなら分かるが、想像だけで言っていたら、デザイン自体がいらなくなってきてしまう。

この議論はスレ違いだな。

>>524
指定すべきなことはわかるけど、変更は許可するべきだと思う。
変更する人はそんなにいないとは思うけどやはり目が悪い人は変更するわけだし。

%で指定すると崩れる部分があるのでできればpxで指定したい。
smallやmediumで指定もいいけど7段階しかないので細かい指定ができない。
よって、pxで指定してなおかつユーザーが変更できるようにしたいのです。

>>522
わがままなことは十分承知です。
でもいまどきmediumで表示してるサイトは皆無。
Yahooにしてもgoogleにしてもどんなサイトも%などを使って多少小さくしている。
自分のサイトにきたときだけでかい文字になるのは、ユーザーに対してもやさしくないと思う。
やはり合わせるべき部分はあわせなきゃ。大多数至上主義。

いや俺も>>524に同感だな
デザイン重視のページではデザインを崩さないほうがユーザのためになる
だいたい商業デザインってのは発注者側も客を絞り込んでいるからそれでいい

逆に内容さえ読めればいいっていうページでは
CSS自体がいらなくなる

>>527
2chのような文字だけのサイトではsize指定は不要だと思うけど
やはり一般的なサイトでは指定は必要ですよね。
でも変更を許可しないのはどうかと。
ということで、pxで指定してなおかつユーザーが変更できるようにしたい。

>>522で答えでてるんじゃないの？
ＪＳ使って変えれるようにしとくしかないでしょ

うーん、俺はシンプルCSSとメインCSSの二種読み込み＋切り替えＪＳ使っている
デフォはシンプルCSSで可変幅＋フォントサイズ指定はしていない（その代わり全部100%統一だけど）
メインCSSはpx指定の固定幅かな。こういう風に二種用意するのも一つの手段
まあ、まともなHTMLができていたらCSSなんていらないんだけどね
ユーザーCSSがあれば事足りるし、自分もユーザーCSS使ってみているし

>>522
レスするの忘れてました。
CTRL押しながらマウスホイールくるくる程度ならいいけど
ユーザーにはなるべく「クリック」はさせたくないです。

>>529
いや、pxで指定してもサイズ変更できる方法はあるにはある。
pxと%を併用だったかな？ちょっと度忘れしたのでここで質問してみました。

ユーザーＣＳＳ使ってる奴なんてそれこそ一部も一部だろ

％で崩れるとこなんてある？

>>532
俺は%こそやめてほしい
あれ使われたら解像度によっては酷い崩れ方になる
デフォの文字の大きさが豆粒以下ってなっていたから調整しなおすとか不便だったよ

>>527
うちのオヤジはIEで文字サイズ「大」でみているんですが、
フォントサイズ指定しているサイトは、かなり見にくそうに見ている。
あんな姿を見ていたら、px指定はなるべく使わないようなデザイナーになるね。
(オヤジは俺の近場の実験体だから、Firefoxの存在を教える事はしないw)
ターゲット層に45以上の人がいる場合は必ず％指定で作ってる。

それに、%でやっていてデザインが崩れるなら、それはお前の技能が足らないだけじゃないのか？

>>526
Google,Yahooの場合は、ちと違うと思う。
文字が小さいのは情報サイトだから、なるべく多くの情報を見せるためじゃないのか？
情報サイトを作ろうとしているのか？

>>534
いや、狐教えろよ。いかにIEがクソかわかる
文字サイズの最低値を知らなかった頃は不便極まりなかった
せめてそれだけでも教えろと

ただ、固定幅においては%は無理。デフォをIEの大にされたら650pxの文章部分が非常に読みにくい
基本が印刷物取り扱いだからwebはオマケに過ぎないんだがね

>>534
何のサイトかは伏せますが情報系ではないです。
ところでみなさん
mediumは大きすぎだと思いません？逆にsmallは小さすぎ。
%で指定してる人もその中間くらいにしてないですか？

>>536
12〜13pxが文章部分だからねえ。これでも解像度上げられたら目も当てられない豆字になるんだけどねえ。
俺が好きなのは文庫本の文字サイズ（爺さんたちが虫眼鏡使うようなサイズだから読者層から切り捨ててる）
重要なのは誰に向けて見せているかを考えれば大抵のCSSは事足りる
何故って、新規層よりも常連層がターゲットなのだから、答えはもうあるはずなんだ
俺は創作系部類のサイトだから、主要層の創作系のレイアウトを見て、半ば必然的に書くCSSすら決まっている

あくまで文字サイズの問題は主要層とターゲットにしていない一見層との摩擦で起きる問題だよ
それこそtarget属性と同じ。だから、>>521が誰を想定するかによって文字サイズを可変にするか固定にするか決めればいいよ

>>536
mediumでも小さすぎ。
そんなのは人によって違うんだバカやろう

>>527
それはそもそもWebデザインとして発想がおかしいだろ。
フォントサイズを変えたくらいで崩れるデザインなんか設計すんなよ・・・
紙媒体じゃないんだから。

IE信者がとんでもねえ暴論を正論と勘違いしている。
IEなんて絶滅するのが世のため人のため。

もうCSSで全要素の文字サイズを100%にすりゃいいじゃん
誰も文句言わないよ

emでしていしてもいいんすよね
ふぉんと

おまいらフォントサイズの話になると食いつきよすぎw
ベキ論は得意分野だもんな

はいはい釣り宣言

上級者がたくさん釣れました！

ボーデー1emであとは各所％指定でおｋ

body {
height: 100%; width: 100%;
}
#box {
height: 500px; width: 500px;
margin-right: auto; margin-left: auto;
vertical-align: middle;
}

<body>
<div id="box">内容 </div>
</body>

boxエリアの中で、テキストの上下を中央寄せしたいのですが、変化がありません
テーブルの中央寄せのような設定はできないでしょうか？

>>547
#box { display: table-cell; }を追加すればIE以外でうまくゆくと思う。
vertical-align:middle;はdisplay:blockとdisplay:table-cellのときで
意味合いが全然違う。

>>548
Firefoxで中央に寄りました
IEは対応してないのですね
もう少し調べてみます
ありがとうございました

テーブル使うしか無理

>>549
ドキュメントタイプ宣言を一行目に書けばいいと思うよ

>>534
う〜ん、なるほど＾＾；
オヤジさんがいるかぎり、素人目線を忘れる事はなさそうだな。

素人目線（笑）
玄人なんですねわかります＾＾

CSS Validatorについて質問です。

CSS Validatorをローカルで動作させたいのですが、うまくゆきません。
http://jigsaw.w3.org/css-validator/DOWNLOAD.html からcss-validator.jar
をダウンロードして、"java -jar css-validator.jar http://www.w3.org"を
実行すると以下のようなエラーメッセージが表示されてしまいます。

Exception in thread "main" java.lang.NoClassDefFoundError: org/w3c/tools/resources/ProtocolException
Caused by: java.lang.ClassNotFoundException: org.w3c.tools.resources.ProtocolException
at java.net.URLClassLoader$1.run(URLClassLoader.java:200)
at java.security.AccessController.doPrivileged(Native Method)
at java.net.URLClassLoader.findClass(URLClassLoader.java:188)
at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:276)
at java.lang.ClassLoader.loadClass(ClassLoader.java:251)
at java.lang.ClassLoader.loadClassInternal(ClassLoader.java:319)


ソースコードからのビルドにも挑戦してみましたが、antを実行すると84個の
エラーが発生してビルドすることができませんでした。

CSS Validatorをローカルで動作させる方法をご存知の方がいましたら
ご教示願います。環境はUbuntu 8.04 + JRE 1.6.0_06です。
(コマンドラインから起動することができるようになれば十分です。)

CSS初心者スレで、linuxのビルドの質問する奴の頭の中はどんなのだろう・・・

くだらねえ質問はここに書き込め！ Part 163
ttp://pc11.2ch.net/test/read.cgi/linux/1209177182/

>>555
このスレならCSS Validatorをローカルで動かしている人がいるんじゃ
ないかと思ったのですが、スレ違いだったのですね、すみません。
誘導先で聞いてみます。

>>556
上のようなのをローカルで使っていますけど、
ビルドは「CSSの問題」とは異なるからスレ違いになりますよ

つうか初心者の域超えてるし

スレ違いというより板違いだからなあ

CSSでmarpueeもしくはそれに変わるような縦スクロールする文字の設定方法を教えて下さい
wap-maquee-みたいなのををIEやfirefoxでできるようにしたいんです。
jsスレになりますかね？

釣りなのか笑いどころなのか迷うところだ

>>560
なんで点滅とか字を動かすとか好きなんだろうか

現時点では定義も実装もされていないから物理タグ使え

ネコがネコじゃらしに飛び付くような動物的本能(違)
マーキーを使うサイトは見なくなったけど、lightboxみたいな
スタイリッシュなアニメーションは人気があるよね。

画像置換について、DKIRという手法がはっきりと理解出来ません

ttp://kikky.net/pc/css_ir2.html

URL先のサンプル1のソースで、DKIRに関連した重要な箇所がどの部分なのか
細かな説明でなくともヒント程度で構いませんので、ご教示頂けないでしょうか

自己解決しました

>>565
自己解決した時は後の初心者の人のために
どうやって解決したか書いてくださいよ〜（´･ω･｀）

例えばこれね

div#main {
background:url(画像パス) 0 0 no-repeat;
}
div#main h2 {
position:relative;
top:0;
left:0;
z-index:-1;
overflow: hidden;

/*\*//*/
display:inline-table;
/**/
}

<div id="main">
<h2>hoge</h2>
</div>

もう見れば分かるんだけど、positionでテキストを画面の一番奥に表示させて
後は外回りのdivで背景画像を表示しただけ。他にもやり方はあったと思うんだけどね
ちなみに
/*\*//*/
display:inline-table;
/**/
はcssハック。他にも画像を表示する要素をブロック化させるとかいうやり方もあったはず

>>566
すみません
>>567氏が既に説明をして下さっているので書く事が無いのですが
次の機会がありましたら、必ず書く様にします

すんごい基本的なことなんですけど、質問っす。

メニュー部分を<div id="navi"></div>
footer部分を<div id="footer"></div>
でくくり、それぞれの中にリストでリンクを作ってるんだけど、

naviの中の<a>タグに反映させようと以下のCSSを記入
#navi a:link,a:active,a:visited{display:block;}
#navi a:hover{display:block;}

すると、footerの<a>タグにも上記のCSSが適応されちゃうんだけど、
<div id="navi"></div>の中の<a>タグに対するCSSの記入って
#navi a:link,a:active,a:visited{　}　じゃないすかね？

ややこしい書き込みですがご教示お願いします。

#navi a:link,#navi a:active,#navi a:visited{} だよ。
それだと、#naviの子孫のa:link、全てのa:active、全てのa:visited
が対象になってしまう。

>>570
早速の書き込み感謝します。
#navi a:link,#navi a:active,#navi a:visited{　}が正解とのことですが、
当方が書いた#navi a:link,a:active,a:visited{　}（#navi a:hover{　}も書いてた）だと、
navi内のみ適応はlinkとhoverでlink、active、visitedは全てのaに適応ってことですね。

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

基本的に理解してない。

>>571
セレクタがわかっていないとどうにもならないので、一度
http://hp.vector.co.jp/authors/VA022006/css/selector.html
を読むといいと思うよ！

なぜ#navi a { display:block; }にはしないのですか？

あの、昨日CSSでマーキーについて聞いたものですが、サイトに適用したいんじゃなくて、ちょっとどうしても文字がしたから上に流れる効果が必要なスクリプトがあって。
物理たぐって言うのはhtmlのマーキーですか？

日本語で話してくれ

分からないことがあるので教えてください。
テーブルレイアウトからの脱却を試みてＣＳＳを部分的に導入したのですが、
トップページ以外のページを開くと、左下に「ページでエラーが発生しました」
という文字が出てきてしまいます。

ホームページ作成ソフトのプレビュー機能を使ったときにも、
「ランタイムエラーが発生しました。エラー：オブジェクトを指定してください」
という表示が出てきて、デバックしますか？と聞かれてしまいます。

原因が分かる方がいらっしゃいましたら教えてください。
よろしくお願いします。

ttp://www.boki-navi.com/
（外部ＣＳＳ）ttp://www.boki-navi.com/design.css

>>577
君は普通にテーブルでいいと思うんだが。これ、デザインこまめに変わるサイトじゃないと思うんだが
それとも正しいHTMLを使いたい欲が出たとかサイトのデザインを簡単に一新したい欲が出たとか？

font-size:0.90em;

これは

font-size:0.9em;

でいいよ。
というか、どうしてCSSを使いたいのかさっぱり分からんのだが

>>578さん
ありがとうございます。
今後のことを考えて、少しずつ使えるようになったほうがいいと思って導入しました。
しかし、ＣＳＳのことは本を１冊読んだだけなので、四苦八苦しているところです。

スタイルシートを使わないと行間の設定や全体の文字サイズの指定が大変な気がするのですが、
もしかして単にホームページ作成ソフトの設定方法を知らないだけなのでしょうか？

>>579　
ホームページ作成ソフトの設定方法知ってても
CSSを理解してなかったら、意味が無いですよ。
今はTABLEのままでいいと思う。　ある程度慣れてきたら変えていったらいいですよ

>>579
正直に言うと、CSSの利点があまりないサイト
ついでに理解も不十分だから疑問なの
だから「えー？　使うのー？」となっているのよ
個人的には使わなくていいんじゃなかろうかとね
行間空けくらいしかCSS使い道がないのは残念だけど

> ページでエラーが発生しました

怪しいのはCSSではなくJS

javascript offにしたらエラーが出なくなるのを確認。
原因はjavascriptだな。

みなさん、ありがとうございました。
ご指摘の通り、javaのコードに問題がありました。
なんとか原因を突き止められたので良かったです。

遅い時間にありがとうございました。
本当に助かりました。

何でもいいから、勉強して来い
昔の俺を見ているようだ。勘弁してくれ

ＣＳＳでご大層にエラーとか言ってくれるわけがない

今の一般PCならテーブルでもササっと表示しちゃうし、CSSにするメリットは確かに薄いね。
でも簿記検定は大学でもよく見かけるから、あの糞遅いPCでも快適に見れるようにCSSにはしたいかな。

俺の中でのCSSメリットは
1.容量が軽くなる。大学のパソコンでも表示が速くなった。（大体3〜5秒の差が出る。マジで。）
2.H1やH2などのタグや文法を勉強できた。
3.本文→サイドナビの順にコードを書けるのでSEO効果もあるらしい。知らんけど。

ほとんどの人にとってのCSSメリットは
1.「こいつtebleで作ってるぜｗｗｗ」とバカにされないで済む。
2.「こいつtebleで作ってるぜｗｗｗ」とバカにされないで済む。
3.「こいつtebleで作ってるぜｗｗｗ」とバカにされないで済む。

カンタンな綴りもマトモに書けない人らしい意見ですね

"大学のパソコン" なんてのは、どうでもいいですよ〜

>>586
読み込む画像とソースの量は変わらないから容量圧縮にはならないぞ？
ただ、あのごちゃごちゃーっとしたソースを見ながら
「えーっと……次は136行目のテーブルを」
ってならないのがCSSのいいところ
ただし、段組にしてごちゃごちゃソースを書いたら泣けてくるけど

結局1カラムは最高だと思うのですよ

>>590
明確な差が出るよ。
一度、1000行位のtable作ってみればわかる。
非スタイルシートで<TD>一つ一つに　背景色、縦横サイズ、フォントカラー　フォント指定をした場合
htmlファイルが1M超える。

これをスタイルシートにして<td class="">と書いた場合、サイズが3分の一になる。

>>591
いや、元のHTMLの容量は小さくなるよ？
でも、代償としてCSSファイルが大きくなるって事

>>577は無駄なテーブルがあるからCSS使ったら容量はもっと小さくなるけどね
線と見出しと本文でバカみたいにテーブル使っているし
この部分はCSSでいいんじゃなかろうかとは思った

CSSは一回読み込めばキャッシュされるし明らかに違うけど。

htmlはキャッシュされないんだー(´・∀・｀)ﾍｰ

そこでstrictなHTMLですよ

>>594
htmlもキャッシュされるから2回目以降は大差ないけどな。
初回読み込みの速度が桁違いだろ。
で、転送量も大違い。

間抜けな>>587をバカにしないここのみんな優しいね

既にバカにされてるから

>>597みたいなもっとバカがいるし。

で、また小競り合いが始まるわけか
お前らほどほどにしろよ

で、ネタ半分の質問を投下しようにも思いつかねえや
仕方がないから茶をおいておくよ　っ且~

趣味でHPを作っています。
CSSに挑戦しようと思って、今日新しいサイトを作りました。
（まだ内容は皆無です）

ttp://wwww.kumogakure.com/

見て分かるとおり、
「aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa」
の文字がずれてしまうのですが、これをカウンタの下にもっていきたいのですが
どうすればいいのでしょうか。
忍のウェブスペースを借りていますが、その広告もずれています。

いい方法はありませんでしょうか。
スタイルシートはこれです
ttp://wwww.kumogakure.com/css.css

body直下にタグ付けされていないテキストがある時点で論外
で、
clear:both;

これがないんだからfloatされるでしょ

って、positionかよ
positionで最下部に指定。
absoluteで弄繰り回せばいいと思うよ

というか、positionよりはfloat使うからなあ。
で、関係ないけどul要素がになんでli要素でもないimg要素を包括しているんだ？

>>601
関係ないがcssにタイポがある・・・

>>601
HTMLのソース上でもカウンタの下に「aaa...」を書けばいいのでは。

あー違うか。広告がメニューの下になるのを防ぎたいわけか。
フロートを使った段組に変えて、フッタかdiv.tdftdivで
clear:bothを指定するのがいいかと思う。

皆さんレスありがとうございます
少し説明不足だったようです

忍の広告はあっち側で勝手に /body タグの直前に付け足されるので、
自分で弄れないみたいなんです
なのでタグを使ってないaaaaaaaaaaaaがちゃんとした場所に表示されれば、
広告もちゃんとした場所に表示されるかなと思いまして、
それをうまくする方法を聞きたかったわけです

>>602,603,606
参考にさせていただきます

>>604
ご指摘ありがとうございます

>>601
わかりやすいようにdiv要素に線を入れてみると
http://uproda.2ch-library.com/src/lib026408.png.shtml
↑こうなってるのを
http://uproda.2ch-library.com/src/lib026409.png.shtml
↑こうしたいってこと？
///////////////////////
<div class="leftmenu">
〜略〜
《《ここ（left menuを閉じる寸前）にaaaaaaaaa》》
</div>

<div class="main">
〜略〜
《《ここ（mainのを閉じる寸前）に広告を入れる》》
</div>
///////////////////////

>>607
</body>の直前に広告が挿入される場合
メニューと本文を丸ごと大きなdivで囲むのがいい。
そしたら一番下に広告が表示されるようになる

>>608
そうではなくて、こういうことです
http://uproda.2ch-library.com/src/lib026422.png
目的は、広告とメニューが重ならないようにすることです。

そちらのブラウザだとレイアウトが大分汚くなっていますね。
気付かせていただいてありがとうございました。

>>609
なるほど！
やってみます

英数はスペースいれないと改行されない
普通に文字打ってる分には気付かないけど
デザイン作ってる時に嵌るポイント

それにしても酷いデザインだなｗ
意気込みは分かるがまずは真似からはいりなさい
これも初心者がよく陥るポイントです

>>612
ん？　画像は適当だろう？
このレイアウトは普通だと思うぞ

配色と画像は明らかに適当だろｗ

>>610
下に置くとどうしても重なってしまうので、
.tdftdiv {position:absolute; top:0; left:0;}
body {margin-top:32px;}
とかやって上に置けば重ならないに違いない。

質問
画像付きボタンを　img src=　で書いたのですが、FireFoxだけちょっと横長で
小さくなりません、小さくするにはどうしたらいいのでしょうか？

margin:0;
padding:0;

>>616
それだけではわからないが、ソースと画像をどこかに上げてくれれば
検証できる。

>>616
cssに何か関係あるんでしょうか？
あなたの質問を見る限り意味不明です。

>>616
Firefox からのアクセスの場合だけ、
Firefox 用に作った CSS を用意し、
その CSS の中で img { width: <小さくしたい指定>; }
のようにしてみてはいかがでしょう？

なお、Firefox からのアクセスを振り分けるには、
.htaccess を使ってもよいですし、
PHP で振り分けてもよいですし、
自分が調べて分かりやすい方法で対応すればよいと思います

overflow:をautoにしています。
インラインフレームで、表示内容が指定したheightの内容未満でも
fire fox とoperaでは常にスクロールバーが表示されてしまいます。

何故かbodyの中にある見出しのh2やh3を削除してみたところ
スクロールバーが消えました。

h2やh3を入れた状態でも内容が少ない場合にスクロールバーが
出ないようにしたいと思っております。

どなたか解決策をよろしくお願いします。

セレクタ　セレクタ　セレクタ　セレクタ {

とした時の、挙動は？

そしてこれは正規ですか？　hackですか？

補足です。すみません。

table table table table {

などです。

なんでtableの中に四つもtableが？
idとclass指定じゃ対処できないの？

すまん、勘違いだった

>>621
それって仕様じゃ……ないな
原因はh2とh3にありそう。高さを細やかに指定するのはどうざんしょ
min-heightが有効だと思う。IEは対応イマイチだけどFxとOは実装済みの正しい指定だから問題ないかと

>>621
overflowをautoにしたら出るのは当たり前

>>622

セレクタ1　セレクタ2　セレクタ3　セレクタ4{

１に含まれる２に含まれる３にふくまれる４にスタイル適用
これ基礎だよ

>>621
iframe{
scrolling="auto";
}
じゃだめ？

>>625

早速min-heightでもやってみましたがダメでした。
何故かｈ2、ｈ3要素のmaginを0pxにしたらスクロールバーを
消すことができました。

当面はこれでしのごうと思います。

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

>>626

overflow:auto;
は内容領域を超える場合はスクロールバーをつけると
思っていたのですが、内容領域を超えなくても
出るんでしょうか

>>626
正規の解釈でいいんですね。

海外のCSSにあったんですが、調べるとき検索の仕方がまずかったかも。

いかにも過ぎてhackの一種かとｗ

ありがと。

>>627

アドバイスありがとうございます。
早速やってみましたがダメでした。

でも、ご返答ありがとうございます。

>>628
＞内容領域を超える場合はスクロールバーをつけると
そうだけど、見えてるのが領域じゃないし、お前のソースも無しに何がわかるってんだ。

>>628
ソースがないから俺も適当なこというしかないね
えーと、上でも書いたように

hoge hoge hoge hoge {
}

とするなら、なるべくclass指定したほうが人間には優しい
まあ、中身に何が入っているのか知らんけどね

>>632

そう。

そのスタイルになるのはなぜなのか見たかったわけ。

まさしく人に優しくない !important 連発とその記述でしたｗ

基礎がないので惑わされた。

このスレの質問者にvalidatorの存在を知ってもらいたいと思った。

W3C Markup Validation Service
　http://validator.w3.org/
W3C CSS Validation Service
　http://jigsaw.w3.org/css-validator/

次スレにはぜひ！

で、div病患者がやってくるわけか

それと、まだ先の話だが、次スレにもテンプレ貼るなら内容を修正した
ほうがいいと思うんだ。IE7やFx2などのモダンブラウザ登場以前から
変わっておらず、Netscapeだとかサポート対象外のブラウザのことが
書いてあったり、リンク切れが結構あったり、「テキストの上下中央寄せ」
などのよくある質問が抜けていたり、誰も使わなさそうな疑似フレームが
解説されていたり、どっかの掲示板にリンクしていたりと、いろいろ問題が
あるので。

＞IE7やFx2などのモダンブラウザ
ﾌﾟｹﾞﾗ

<li>のブリットをイメージにして、

↑文字数が多すぎます

等のエラーメッセージを表示させたいと思います。
「↑」がイメージです。
一応できたのですが、ブリットと文字の間が広すぎるのです。
ブリットと文字の間隔を調整するにはどうしたらいいでしょうか？

スティーブとの間が広いのは当然だろう
相手は天国なんだから

>>636
頑張れ。

>>638
ブリットって何の事かと思ったぜ。
英語をカタカナにするのは難しいが、どーしても使いたいならビュレットじゃねーの。
リストマーク、マーカーが一般的だろ。
で画像でやる時はlist-markに指定せず、liの背景画像にした方がいい。

>>638
>>641の言うとおりマーカーを背景画像にしてpadding-leftの値で
調整するのがいいと思う。

>>641-642
ありがとうございます
どこかでブリットと書いてあった気がしたのですが勘違いだったようです
背景画像を使った場合、文字サイズを変更すると中心がズレていくと思うのですが、
このテクニックは文字サイズを固定して使うものでしょうか？

っem指定

ちょっとくらいずれてもキニシナイ
どうせ文字でかくしたらデザインなんてあったもんじゃないし

まあ、そりゃスタンスだよなあ
画像をなるだけ使用しないで、製作者が見れりゃいいのよってデザインにするか
画像多用+フォントサイズ固定で、製作者のデザインを見て欲しいとして押し付けるか

ま、製作者CSSなんぞ製作者の押し付けだろうから、本当は使いたくないんだがね

別に画像を使用したってデザインはできるだろ。
一字一句たりともずれていてはいけないなんてガチガチのデザイン考えるのが根本的に間違い。

見られるデザインは、だ。
ていうか「製作者が見れりゃいいのよ」じゃなくて「閲覧者が」だよな？

http://www.jessonyip.com/
このサイトのflash時計のみを表示させたいと思ってます。

ユーザースタイルシートとして、

li,h1,h2,p { display: none; }

こんなcssを適用したら、時計下の文章を隠せるところまでは分かりました。
できればブラウザ枠内まで時計を拡大表示させたいのですが・・あとは何を追加で記述すればいいでしょうか？

>>649
あのフラッシュはwidthもheightも%指定だから、ファイルと直接表示するだけで見れるよ。
純粋に勉強のためというなら、親要素とflash classのwidth、height100% それ以外は最小にしてdisplay:none

>>650
ありがとうございます。
なんとか・・ファイルの直接表示に気づきました。
しかしｃｓｓの方は・・手に負えません。
cssの本さえ読んだことないから、ちょっと無謀な試みだったかもorz

CSSのブロック要素の完全なリストってどこにありますか？
ググっていろいろ見たのですが、なんか、サイトによって違うみたいで・・・

>>652
ブロック要素という括りはCSSではなくHTMLです。

書き忘れ。
ブロック要素の範囲はそれぞれ違うので、DTDを見るのが一番正しい。

>>652
CSSのブロックレベル要素と言うとこれ。
http://www.w3.org/TR/CSS21/visuren.html#block-boxes
(displayプロパティが'block','list-item','run-in','table'のいずれかである要素)

HTMLにもブロックレベル要素という用語があるが、定義が全然違うので要注意。

というかブロックレベル要素とブロック要素で言葉違うだろ

リストタグの記号や数字の部分だけを色変えたり大きさを変えたりする方法ってないですかね？
中のテキストだけ無理やり小さくしたりするしかないかな・・・？

フォント入れてない人には表示されなかったりするからなぁ。
背景画像にしてリストにするのが無難かもしれん。

あぁ、スマン。数字は背景画像にしても無意味だったｗ

>>658
数字のリストタグで整列してる文章で、
ある一部の数字だけ大きくしてくれって言われてるんだよね。
できればcssとかで制御したかったけど、やっぱ数字の画像作るしかないんかなあー・・・。

>>657
IEにはJSを使うことになるが、beforeでcontentを使えばできる。

なぜこれが良回答なのかわからん…。
http://oshiete1.goo.ne.jp/qa3939558.html

これはギャグだな

>>658
リストマーク非表示にしていればいいんじゃないか？

>>664は何を言いたいんだ・・・？

リストマーク非表示→背景画像表示→お望みの数字やフォントやサイズや色のリストマークを表示

いや、リストマークを画像にする手法もあるから>>657はそっちでもいいんじゃないの？
そうすれば記号や数字の部分だけ別の色とか別のサイズになるでしょ。固定だけど

>>666=>>664なんだとしたら
とっくに既出で答えてもらった質問者が渋ってる方法を
またもや提示するってのはどういうことなのかと小一時間

いや、before+contentだと……ああ、そうか、この場合リストマーク非表示にすりゃいいんだよな
いや、てっきりCSSを非表示にしたら

1.1.hogehoge

見たいになるのかと思った
でもその場合、JSはダメだろ。なんか気持ち悪いような

日本語でおＫ・・・

変に面倒な方法挙げなくていいよ
普通に画像で作るのが一番だろ
リスト内に数字打ってスパンとかも
求められるものによっちゃ使えなくもないけど

おいおまいら、ちっとラベルが低すぎやしないかい ?

>>670
少し前のレスくらい読もうよ

すいません。
http://hp.vector.co.jp/authors/VA022006/css/selector.html
ここを読み返してCSSのセレクタについて復習してるんだけど、

【子供セレクタ】
div ol > li p { line-height: 1.2; }

【隣接兄弟セレクタ】
body > h2 + p { border: dotted gray; }

上記で出てるように「>」とか「+」って当然使うもんだよね？

俺、いくつかサイト作って来たけど「>」とか「+」を一度も使ったことないっす（苦笑）

使いたいけど、IE6がまだウチのサイトは半分いるんで、敢えて使わないorz
JS入れたりモダンブラウザ限定なら、使った方が便利だよ。

いや、便利なときもある、ね。
用途によって子孫のほうがよかったり子供のほうがよかったり、当然するから。

スペースしか使わね
見難くなるだけだし

>スペース
>スペース
>スペース

スペースのどこがおかしいのか言ってみろよ

初心者スレでバカなこと言ってた奴か

日本語の読めないクズかｗ

え、マジにそうだったのかｗｗｗｗｗ

お前はどうしようもないクズだね＾＾

>>673
一個一個使う必要はないんじゃないかな？
あれは複雑な構造の元文に見栄えを付与するもんだろう
ただidとclassが省けるから便利っちゃあ便利

ブラウザ設定で文字サイズを大きくしていますが
<iframe /略/ scrolling="no">
となっているサイトでは、内容が見切れていしまいます
そこで、ユーザースタイルシートでスクロールバーを表示させたいのですが
どのように描けばいいのでしょうか?

iframe{
overflow:scroll;
}
ではダメでした。よろしくお願いします。

iframeの中身のほうだと思うよ。

いや、iframeの中身の量を外側が知ってるはずはないからさ・・・

めんどいから＊で

すみませんjavascriptでページの内容を書き換えて便利につかえるgreasemonkeyというものをしています。
divを挿入し、パネルのような感じでページの左下あたりに表示させているのです。
今はdiv style のbottomプロパティを０にしているのですが、これを0以外に設定するとパネルがまったく表示されなくなるページがあります。
たとえばyahoojapanなどです。
おそらくページの元のcssが邪魔しているのではないかと考えているのですが、詳しくないのでわかりません。
どなたか教えていただけませんか？
greasemonkey関連なのでjavascriptのほうに書いたのですが、すれ違いでした。

javascript切ってるおいらはどうしましょ ?

javascript切ってるやつなんてほっといたほうがいい

>>688
つ　Firebug

>>691
それも試してみたのですが・・・
全部のスタイルシートを消してもダメみたいです。
リアルタイムで反映されるはずですよね？
特定のページでのみだめなので、元のソースが原因ではなさそうです。
なにか心当たりあれば教えてくださいまし〜m(__

>>692
そのGreaseMonkeyスクリプトを教えてほしい

少し前にこのスレで質問させていただいた者です。
あれから試行錯誤を繰り返してＣＳＳを導入したのですが、
どうしても分からないことがありますので教えてください。

まずＴＯＰページのタイトルバナーを<h1>で囲みたいのですが、
他のページの各タイトルに<h1>を使っているのでうまくいきません。
タイトルバナーを<h1>でマークアップしようとすると背景画像まで読み込んでしまいます。
h1.top{〜}をdesign.cssに記述して、<h1 class="top"></h1>なども試したのですが、
なぜか<h1>の画像が出てきてしまいますorz

ＣＳＳのサイトは以下のところに臨時にアップしています。
http://www.bomberman-online.info/

（外部ＣＳＳ）http://www.bomberman-online.info/design.css

>>693

var GM_infoPanel = document.createElement('div');
with(GM_infoPanel.style) {

bottom = 0;
left = 0;
padding = '2px';
opacity = '0.5';
fontSize = 'x-small';
color = '#000000';
backgroundColor = '#FFFFFF';
border = '3px double #C0C0C0';
zIndex = 800;
position = 'fixed';

}

GM_infoPanel.innerHTML="test";
document.body.appendChild(GM_infoPanel);

これで、bottomを0以上に設定するとyahooなどでは表示されなくなります・・・
どうしたもんでしょう

縦100%のdivを入れ子にする方法はないのでしょうか？
http://oshiete1.goo.ne.jp/qa3045035.html
これが一番近いのですが、結局完全には解決していません
tableでするしかないでしょうか…

初めてcssでHP作ってみたところ
body内がほとんど<div>で埋め尽くされてしまいました。
これって普通ですか？

>>694
それ以前にFxで見てみた方が・・・

>>696
また「1pxのずれ」ｗｗｗ失せろｗｗｗ

>>697
DIV厨乙と言われたいんですねわかります

>>695
アホが構うから今更だけどスレ違い。
JS本スレはバカしかいないから、スレチと言われたんだろうが、
手取り足取りスレがJS初心者のスレ。そっちで聞いてね。

>>694
俺が書いたほうが早いだろうけど、それじゃあお前の勉強にならんしなあ
＞<h1></h1>
だから空タグはダメだと何度言わせれば（ry

>>694
>>698の言う通り・・。
でh1の件だが、cssはその名の通りカスケーディングしてるんだから、
h1.topにh1の指定が継承されて当然。
それからhxはブロック要素。
IEでしか確認してないと間違った指定を正しいと誤解して覚えるから、百害あって一利無しね。

>>700
</HEAD>
<BODY>
<H1 class="top">簿記検定ナビ</H1>
<TABLE cellspacing="0">
<TBODY>
<TR>

とりあえずこんな感じにしてみました。
で、h1.top{display:none;}にしたのですが・・・。
これで一応、外見的にはなんとかなったのですが、まずいでしょうか？

>>702
一応、他のブラウザでも確認してみな？
大丈夫かどうかあえて俺の口からいわないけど

CSSを使うのならもっと直すべき箇所いっぱいあるだろって思うよ
元のHTMLがひどすぐる

とりあえず、元のテーブルのデザインに戻してＣＳＳを勉強しなおします。
ひどすぎると言われても、どこがひどすぎるのかも分からないのが一番ショックですorz

ＦＸというのはFireFoxの略と言うことでよろしいでしょうか？
皆さん、ありがとうございました。

変に混ぜるよりは最初から作り直すほうが簡単だよ

>>705
いちおう最初から作り直したのですが・・・まだまだ勉強不足のようです。
きちんと勉強して、見やすくて使いやすいサイトを作れるようにがんばります。

貴重なアドバイス、ありがとうございました。

今度はbody内がほとんど<p>で埋め尽くされてしまいました。
これって普通ですか？

P厨乙と（ｒｙ
マジレスすると、pの中にブロック要素を入れてそうで怖い。

>>707
普通最小ブロック要素ってのはp addressになる
次に大きいブロック要素は dd li かな
さらに大きい要素になると hn dt dl ol ul 後は引用ブロックと整形テキスト
divはどこにでも使えるから除くね

CSSでやってるとどうしてもdivは多くなるもんだよ
ソースみてないからどんな書き方してるのか分からないけど

勘違いされそうだが、hn の中には p は入り込まない
で、p以下のブロックが必要になった場合はspanを使う

spanはインラインだぜ？

>>710
おまえのそれもDIV厨（ｒｙ

>>712
っdisplay:block;

あんまいるとまた巣に帰れといわれそうだな
本文マークアップをここで扱うのはスレ違いな気もするんだが？

spanを無理やりブロックにしないといけない状態って普通外にdiv置くだろ
そこまでしてdiv使いたくないのかよｗ

今はこんな感じになってます


<div class="right">
<p class="table1">
<a href="">子泣き爺</a><br>
<a href="">砂かけ婆</a><br>
<a href="">南米妖怪チンポ</a><br>
</p>
<p class="table1">
<a href="">目玉の親父</a><br>
<a href="">毛玉の親父</a><br>
<a href="">金玉の親父</a><br>
</p>
</div>


こんな感じのがいっぱいあります

箇条書きはリスト

<p>
<span>つまり私は小段落と大段落を分けたいわけですよ。しかし、p要素で小段落を示すのは気持ちが悪いのです</span>
<span>br要素はあくまで改行を示すものであって段落明示ではありません。ですからこのように便宜的に使うほかのないとき用います</span>
</p>

pで小段落を表すとその分だけdivが増える
かといって、pで大段落を示すとその分spanが増える
いい加減日本語仕様のマークアップ言語が欲しい

>>718
その書き方おかしい

>>716
何のために箇条書きリストがあるんだ？
というかそろそろお前もここに聞きに来るな
ここはCSSの質問だろ？

>>719
仕方ないだろ。元文がこうなんだもん

　文章。文章文章文章文章文章文章。
文章文章文章文章文章。文章文章文
文章文章文章文章文章。文章文章文
　文章文章文章文章文章文章文章文
文章文章文章文章文章文章文章文章
文章文章文章文章。文章文章。

　文章文章文章文章文章文章文章文
文章文章文章文章文章文章文章。
文章文章文章文章文章文章文章。文
文章文章文章。
　文章文章文章文章文章文章。
　文章文章文章文章文章文章文章文。

この明示について散々頭を悩ましてきたけれど、pもdivも正直使いにくい
小段落と大段落を明示する要素が欲しいんだよ

そこまでして意味の無いことにこだわるわけが分からん
別にちゃんと表示できてればなんでもいいけどさ

うーん、一応書いておく
生理的に気持ち悪いよりもdivが増えると俺の脳みそがついていけない
例示の場合、divを使うなら俺は二種類のdivを使う
一つは見出し含め、文章部のグルーピング
もう一つは、大段落のグルーピング
ところが、見出しが一つ下のものができた瞬間に、使用されるdivがまた二種類増える
一つ下の文章部グルーピングと大段落グルーピングだね
で、これは煩雑すぎるんだ。少なくともソースがごちゃごちゃして分かりにくい

ありがとうございました
悩みぬいた結果DIV厨でのし上がって行こうと思います

>>697
待て、お前はまずＨＴＭＬをやり直せｗ

>>723
それならそれでいいと思うよ
おはもう慣れたが確かに見づらいっちゃ見づらい
自分の見やすいように書くのが一番ですよ

自分の見易いようにじゃなくて「機械が読みやすいように」だろ・・・

機械なんてしったこっちゃないですたいｗ
やつらはおれらより頭いいから大丈夫！

一応書くけれど、小段落と大段落を分け隔てる要素は存在しない
divは匿名なんだから小段落と大段落をdivで機械が見分けるのは無理でしょ
人が見分けるのはそれこそCSSで事足りるけど
line要素とsection要素が導入されていない現状だとspanとdivで多少無理が出てもおかしくないよ

<h1><span>NNNN</span>ZZZZ</h1>

これを
-------
NNNN
ZZZZ
-------
こういう風に<span>以降の文字列をインデントをつけて表示させたい。

<span>をブロック要素にすれば<h1>内で改行できるけど、
そっから先どうすればインデントつけられるか思い付かない

ご助言お願いします

>>729
なんでZZZZの部分はマークアップしないの？　むしろそっちの理由が気になる

<h1>
<span class="Title">hoge</span>
<span class="Sub-Title">hoge</span>
</h1>

こうなっている方がスマートでしょ

>>730
ですよねー

でも今回はこのマークアップで
後はCSSでどうにかしろよ
みたいな感じでして

>>728
一応言っておくけど、形式段落がp、それの包括なんだから意味段落がdiv。
普通に機械として理解できるだろ常考。

>>729
マークアップ自体が謎だが、h1自体に左マージンつけてspanをマイナスマージンでいけね？

>>729
>こういう風に<span>以降の文字列をインデントをつけて表示させたい。
それは h1 じゃない。h2 にでもしろや。

>>732
と、思うだろ？　俺も最初はそうだった

見出し１
見出し１に呼応する文章
　見出し２
　文章２に呼応する文章
見出し１に呼応する文章

これをdivとpを用いてマークアップすると酷いことになる
あれと同じ。pにブロックレベルの引用や整形テキストやリストを内包できない気持ち悪さに似ている
pはあくまで最小要素なんだけど、意味段落明示がdivしかない上に、divはグルーピング要素だから
他のグルーピング要素を使用するときのdivと分け隔てできないから混乱する

形式段落＝見出しつきといつのまにか改変されている件について

>>734
それは単に一番下の行が初めからおかしいだけ。
ていうか>>735。
ていうかそんなのStrictスレで散々既出なんでカエレ。

すまん。この場合、見出し+文章は一個の大きな意味段落と考えて
さらにその中に中規模の意味段落（本来の意味段落）と形式段落があると
だから、最初から言ったように、

・文章部グルーピングするdiv
・意味段落のグルーピング明示するdiv
・形式段落を明示するp

だから変わっていないんだ

すまん。そろそろ帰るよ

・文章部グルーピングするdiv
・意味段落のグルーピング明示するdiv
だめだこいつ・・・はやくなんとかしないと・・・

ストリクトやりたい奴は勝手にやればいい

iframe内に表示したページにCSSを適用する方法があれば教えてください

普通にiframe内のページで読み込め

結局見るのは人だから文法はそこそこでもええよ。

>>743
お前のページなんて誰も見ないから安心汁

あるdivの中のdivをすべて横センタリングするには、
中のdivすべてにmargin:autoを設定するしかないですか？
外のdivのプロパティーで一括指定したいのですが
そういう方法があれば教えてください

>>745
ボックスの条件によるが、外divのpaddingじゃ駄目なのか？

やっぱDIVばっかは嫌だよう

やめなはれ

やっぱ教えてください

.table1
{
width:500px;
background-color: #111111;
height: 30px;
}

↑これの背景色違いとかサイズ違いのを10個ぐらい作って書くと
bodyがdivだらけになってしまいます

<div class="left">
<div class="table1">タイトル</div>
<div class="table2">内容をだらだらと</div>

<div class="table3">タイトル</div>
<div class="table4">内容をだらだらと</div>

<div class="table5">タイトル</div>
<div class="table6">内容をだらだらと</div>
</div>


seo対策によくないとどっかで読んだのですが
divをpにすれば問題ないですか？

>>749
内容が表なら、素直にtable使う。
違うなら、dlやhx+p等、内容に適したマークアップをする。
ここまでhtmlの話でスレ違い。SEOもスレ違い。

＞背景色違いとかサイズ違いのを10個ぐらい作って書くと
上手くデザインしないと見辛いだけ。

>>750
わかりました素直にtableで作る事にします
ありがとうございます

やめなはれ

企業からコーディング受注したら１pxもずれることなく
デザインに忠実にコーディングするべきですか？

どうしてもフォントの行間などの解釈の違いで
OperaとIEなどはずれるのですが・・

いちいちハックして調整するべきなのかなぁ

それは蔵によるかと

>>754

そうですよね。クライアントに聞いてみます。

<li>でキーボード入力みたいな中黒「・」
を出したいのですが、皆さんどうしてますか？
キーボード入力すると、
改行された時にインデントが合わなかったりして困ってます。

わざわざ「・」を画像化するのもどうかと思ったり。。

before使えよ

>>757
ありがとうございます、そんな方法もあるんですね
しかしIEが対応してないらしいです

だってIEだもん

IEがクソなのは今に始まったことじゃないな

もう面倒くさいので改行した次の行は<span>で
無理やりインデント合わせますｗ

あー蔵に怒られるかなｗ

画像作れよ。元文をいじる時点でCSSの意味がない

プロでそのレベルｗｗｗｗｗ

>>762
たしかにそうだ。
やはり中黒画像なのか・・

>>763
なんか画像以外に良い方法あったら教えてくだされ

入れ子の<li>だからbackgroundにするとちょっと無理ある
list-styleもブラウザ間でずれるから使いたくない
文書構造も保ちたいので入れ子の<li>を外したくない・・

中黒ひとつに時間とられすぎ俺低脳ｗｗｗ

自己解決しました。すいませんでした。

>>765
余白操作しろよ。それでもプロかよ

filter: alphaが燃狐でうまく表示されません、どして？

filterプロパティはIEの独自拡張じゃなかったっけ？ググるとそんな記述が
見つかる。

どうでもいいが火狐は見たことあるが燃狐は初めて見た。

Firefox 燃え〜

aタグのすべての疑似クラスにいっぺんに値を設定する方法があれば教えて下さい

a:* {}

みたいな書き方ができればいいのですが

妙な事考えるもんだな。

>>771
ない

幅500px、高さ300pxのDIV要素のみがBODY内に含まれていて、
それをブラウザの真ん中に表示することはできますか？

上下の真ん中表示ができません。上にくっついてしまいます。

>>774
できる。http://www.lucky-bag.com/archives/2005/06/centering.html

段組について教えてください。

DIV.body { margin: 0 auto; width : 810px ; }
DIV.blocka {
FLOAT: left; WIDTH: 160px; LINE-HEIGHT: 1.5em
}
DIV.blockb {
LINE-HEIGHT: 2em;
}

色々調べてここまで出来るようになったのですが、


左　右テキスト
左　右テキスト
左　右テキスト
左　右テキスト
右テーブル

こういった感じに左側のテキストより下に
右側にテーブルを設置すると、左に回りこんでしまいます。
回りこみ防止というのはどうやればよいのでしょうか？
初心者の質問ですいません。

clear:both;

>>776
回り込むのが正しい動作だから、
右テキストのほうはマージン取るとか、そっちもフロートにするとか。

左にマージンとればいいよ

教えていただきましてありがとうございます。
margin-left: 160px
これで回り込まなくなりました。
ありがとうございます。

margin-bottomを指定しても、
下だけはマージンが効かない場合があるのですが、
どうしてなのでしょうか…。

例えば
margin:20px;
とすると、上と左右はマージンされ、
ブラウザのウィンドウ内であれば下もマージンされるのですが、
ウィンドウをスクロールする場合、一番下だけマージンされません…。

理由が分かるかた、誰か教えてください。
よろしくお願いします。

>>781
現象が再現できるソースとブラウザは何か。ちゃんと書きましょう。

html {height:100%;}

body {
height:100%;
}

#left {
position:absolute;
top:50px;
left:20px;
width:88px;
margin:20px;
}

だいたいこんな感じです。
例えば、leftの中が充実して下に伸びた場合、
スクロールさせると下のマージンだけが効かず、
中の文字などがウィンドウの下にくっつくような感じになります。

うちはマックを使っているのですが、
Safari、Firefoxで同じ現象が見られました。
ウィンドウズのIEでも同じです。
マック版ウィンドウズだけなぜか普通です（他がズレるけど）。

>>783
マック版ウィンドウズなんてないけどね。
positionやfloatした要素（浮動要素）には高さが無い。だからmargin-bottomが生じる基点も無い。

Intel MacはWindows載るんだぜ

マック版ウィンドウズとやらが売ってるんですかそうですか。

まぁ、そういうなよ
言ってる意味くらい分かるだろｗ

馬鹿って事がわかりました。

細かいことに一々突っ込む使えない奴だってわかりました

オマエガナー

どう考えてもおまいです

回答もせずツッコミだけに命懸けてるアホはどこにでも居る。放っとけよ。

マック版IEね…。
ごめんね…。

>>784
解決法ってあるんでしょうか？

フォームコントロールのdisabled、readonly等の状態用に
静的にCSSを定義する方法があれば教えてください

つCSS3

質問させてください。

現在テーブルを使用しないサイトに
変更しようとしていますが、下記の所で悩んでいます。

<table bgcolor="#000000">
<tr>
<td bgcolor="#背景色" width="150" height="25">
<a href="hoge1.html">タイトル1</a>
</td>
<td bgcolor="#背景色" width="150" height="25">
<a href="hoge2.html">タイトル2</a>
</td>
<td bgcolor="#背景色" width="150" height="25">
<a href="hoge3.html">タイトル3</a>
</td>
</tr>
<tr>
以下タイトル4...と加算して、繰り返す
</tr>
</table>
上記は黒背景に各タイトルの背景に色がついた状態で、
横３列縦数列タイトルが表示されます。

見た目を変えずXHTML+CSSに変更したいのですが、
CSSサイトのソースを調べた範囲では
テキストの場合、横一列のものが多く、
横数列のものはli等を使用していても
画像のことが多いようでした。

タイトルのコンテンツは随時追加されるので
画像でなく文字を使用したいのですが、
文字の大きさはユーザーの環境に合わせたいので、
背景色から文字がはみ出るのは避けたいと思っています。

また、divを３列分作り
フロートで表示しようかとも思ったのですが、
行は常に揃っている必要があるので、
ずれてしまうのは困ります。

かといって行を揃える為に１行３列ごとにdivで囲むのも
divの多用になりそうで、どうしたものかと悩んでいます。

似たような見た目に制作するには
どのような方法があるでしょうか？

作成環境はMac OS 10.5.2 Firefox 2.0.0.14です。
Windows Me, 2000, XP, VISTAの
各IEや他ブラウザで動作確認はしており、
サイトの外枠や他の部分はCSSに変更できたのですが、
上記部分の作製方法でつまずいています。

ご教示頂けるとうれしいです。
スレ違いの場合、誘導願います。

よろしくお願いします。

>>767
ワケ分からん説明するより、ソース出せ。
そして何がつまづいてるのか具体的に。
今言えるのは、ulを何でdivで囲む必要があるんだかって事だ。

いまいち何を言いたいのかわからんが
ttp://desperadoes.biz/style/ul.php
こういうのがやりたいんかのう・・・

>>793
右にもboxがあるんだろうから、そっちにmargin-bottomすりゃいいだろ。

>>800
よく分からないのですけど、
leftが一番文字量が多くて、ウィンドウ幅を越えるのは
leftだけなんです。
rightもありますけど、そこは文字量少ないので、
問題となる事象は起こらないのです。

問題の事象ではなく「正しい」事象です

下のブロックにpaddingとったら？
それかbrでclearとか

>>803
clearはブロック要素

brにclearできるわけねーだろ……

これがoperaの古いの以外は効くんだわよ

>>805
調べてみれば分かりますよ

>>807
バグを「できる」とか言うな、はずかしいから

できるもんはできるんだよ
事実をいうことに何の問題があるんだ

なるほど、恥ずかしいな。

これはひどい

そこまで広まってるんなら、そのうち仕様書の方が変わるんじゃね？

広まってないしな。

そもそもバグじゃないブラウザの仕様です
これだから信者は使えないゴミばっかりなんです

M$様乙

いや、信者じゃないけど文法規則に則らないと別の意味で不具合出るだろ？
float周りで痛い目を見たから俺は勉強しなおしたぜ

2.1のclearのところにinlineのclearの実装のこと書いてない？

>>801
何がわかんねーんだよ、右boxのmargin-bottomで調整しろって言ってんだ。
あんたが指定したいmargin-bottom(20px) + 左boxのはみだし分 を指定しろ。

文法的にどうこうは置いといて、brにclear指定は出来る。
そんなことよりpositionにclearって効くのかい。
positionの段組みは、>>801みたいな場合に面倒な事になるんだよな。

positionにclearは利かない
その場合は適切に位置を調整してやる
left:任意数値
だね
rightとbottomは一部ブラウザの挙動がよくないからお勧めしない
基本は上と左かな

rightがうまくいかないブラウザあるのか…どおりで。
positionのほうが確実？

日本語でおｋ

>>820
どっちも大差ない
俺はfloat主体だし、基本1カラムだし（擬似フレーム採用の2カラムもやるけど）
一応、次期ブラウザがdisplay:inline-blockで描画するから段組がはるかに楽になるわけだけれど
当面は使いやすいほうを使えばいいよ

というか、あちこち段組する必要のあるレイアウトはどーかと思う

日本語あれだし、レスが全くかみ合ってないな・・

ごめん俺初心者なんだけど、結局
<br style="clear:both;" />ってのは、
効いてしまうブラウザが多いけど、仕様上は間違い（効かない）という事ですか？？

あ、positionとは全く関係ないのはさすがにわかってます。
floatを解除したい場合です。念のためっス。

そッス。

>>824
仕様書に間違いとか効かないとか書いてあるわけじゃないし、効かないブラウザもない。
ダメと言ってるのはstrictスレの人だろ。

>>817

>>826-828
ありがとう！理解したっス。

>>824
うーん……否定はしない。ただ、推奨しない
仕様に従う主な理由ってそれぞれなんだけど、
せつな的にブラウザの描画を重視すると、後で修正する羽目になる
面倒くさいんだよね。ただ、それだけ

brにclearを指定すべきか指定すべきではないかなんて俺たちが決められないし

巣に帰れ

>>830
＞せつな的にブラウザの描画を重視すると、後で修正する羽目になる

たしかにです。
今までclearはブロック要素にしか使えない、って理解してたんだけど、<br style="clear:both;" />ってのをわりとみかけるんで、
「あれ・・・いいのか。。」と思って近頃使ってました。今後ヤメときますね。ありがと！

>>831
別に俺が決められるわけじゃないから勝手にしてよね！って遠まわしに書いただけだが？

>>818
左ボックスはページによって文章量が違うので、
はみだし度も違うんです。

ってなにか勘違いしてるのかな？

そう書けばいいじゃない。

>>834
後出しのにほい。。
はみ出しまくりなら、なぜpositionなんて使うんだ？
ほとんどがはみ出すのなら、もはや全体のレイアウトから見直す時期。
もう十分答え貰ってんだから、後は自分で考えな。

798-799

すみません。時間がないので、後ほど出直してきます。