/* CSS･スタイルシート質問スレッド【41】 */

1 ：Name_Not_Found：05/03/08 07:59:53 ID:???

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

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

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

過去スレや関聯リンクは>>2-10
【過去ログ】>>2-3
【関連スレ】【仕様書】【CSS検証】>>4
【解説など】>>5
【FAQ】>>6-9

【まとめサイト】http://web2ch.s31.xrea.com:8080/?CSS
【FAQ】　　　　http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去スレ】　　http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】　http://web2ch.s31.xrea.com:8080/?CSSRelated

2 ：Name_Not_Found：05/03/08 08:01:39 ID:???

【過去ログ】
1 http://mentai.2ch.net/hp/kako/974/974934062.html
2 http://natto.2ch.net/hp/kako/984/984113434.html
3 http://natto.2ch.net/hp/kako/992/992992981.html
4 http://pc.2ch.net/hp/kako/996/996828258.html
5 http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
6 http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
7 http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
8 http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
9 http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
10 http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
11 http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
12 http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
13 http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
14 http://pc5.2ch.net/hp/kako/1041/10416/1041641395.html
15 http://pc5.2ch.net/hp/kako/1045/10451/1045124732.html

3 ：Name_Not_Found：05/03/08 08:02:24 ID:???

4 ：Name_Not_Found：05/03/08 08:03:24 ID:???

5 ：Name_Not_Found：05/03/08 08:06:49 ID:???

【関連スレッド】
CSS/DHTMLバグ辞典スレッド第４版
　http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え～
　http://pc5.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
　http://pc5.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc5.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるサイトをネタに雑談するスレ 24
　http://pc5.2ch.net/test/read.cgi/hp/1097724119/l50

6 ：Name_Not_Found：05/03/08 08:07:52 ID:???

【仕様書】
CSS1の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/css1/toc.htm
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html（消滅につき↓で）
　http://web.archive.org/web/20011005012937/http://www.fan.gr.jp/~kaz/rec-css1/rec-css1.html
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html（消滅につき↓で）
　http://web.archive.org/web/20011202074642/http://www.fan.gr.jp/~kaz/rec-css2/cover.html
CSS2の仕様書の邦訳アーカイブ（個人訳）
http://web.archive.org/web/20011021231417/http://www.fan.gr.jp/~kaz/rec-css2.zip
【CSS検証】
W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/

7 ：Name_Not_Found：05/03/08 08:36:14 ID:???

【解説など】
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/index.html
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

8 ：Name_Not_Found：05/03/08 08:36:28 ID:???

【解説など】
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート　http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/index.html
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

9 ：Name_Not_Found：05/03/08 08:37:27 ID:???

【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

10 ：Name_Not_Found：05/03/08 08:37:57 ID:???

【FAQ】
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://kobit.info/tips/overflow.html
　http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html
レイアウトサンプル擬似フレーム
　http://www.rju666.com/web/layout/imitate_frames.html

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート縦中央(垂直中央)」参照のこと。
　http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。

Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？　
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

11 ：Name_Not_Found：05/03/08 08:39:51 ID:???

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

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

12 ：Name_Not_Found：05/03/08 08:45:18 ID:???

【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
　http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと　(floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
リストを用いたレイアウト
　http://css.maxdesign.com.au/index.htm

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

13 ：Name_Not_Found：05/03/08 08:48:54 ID:???

前々スレからの持ち越し。 (＾＾;

テンプレ中の
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）は
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
↓に移転。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html

CSS2の仕様書の邦訳（日本規格協会訳／個人訳）は
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html
↓に移転。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

14 ：Name_Not_Found：05/03/08 08:53:24 ID:???

>>1
>過去スレや関聯リンクは>>2-10
「>>2-13」になってるね。
分割しすぎ、前みたいに纏めようよ。

15 ：1：05/03/08 08:53:28 ID:???

連投規制でテンプレを書き込めずにいたところ
親切な人が続きを書いてくれたようで
こんな風になってしまいました。
見苦しくて済まん。

あと
「httpの数が多い」ってエラーが出たので
一記事中の過去ログリストの数を減らしました。
てことで>>1のアンカーと合わなくなってしまいました。
ttpにすればよかったかしら。

次スレで直してください。

16 ：Name_Not_Found：05/03/08 09:30:08 ID:???

.box { display: block; margin: 0; padding: 0; width: 500px; float: none; clear: both }
.boxR { display: block; margin: 0; padding: 0 0 0 10px; width: auto; float: right; clear: both }

<div class="box">
　<div class="picBoxL">
　　<img src="Image.jpg" height="200" width="200"><br>
　</div>
　<h3><img src="Imagea.gif" height="20" width="100"></h3>
　<p>あああああああああ</p>
</div>
このHTMLの記述を二回以上繰り返すとする。

これをIEで表示させると、なぜか上のboxと下のboxの間に一文字分、
空白があいてしまいます。
firefoxだと行間は空きませんが
<div class="box">...</div>のあとの記述が回り込んでしまいます。

<div class="box">...</div>と<div class="box">...</div>の間に
行間が空かないようにして、かつ、そのあとの記述が回り込まないようにするにはどうすればいいですか？

17 ：Name_Not_Found：05/03/08 09:50:30 ID:???

>>16
とりあえず全角スペース止めれ。

18 ：Name_Not_Found：05/03/08 09:52:00 ID:???

>>17
すんません
これ2ちゃん用にスペース入れ直しました･･･

19 ：Name_Not_Found：05/03/08 09:53:10 ID:???

>>16　class="boxR"がＨＴＭＬソースの中に見当らない。

20 ：Name_Not_Found：05/03/08 09:54:28 ID:???

>>16
float: none; ってなに？

21 ：Name_Not_Found：05/03/08 09:56:17 ID:???

>>20
よく知らんのなら口はさまんといて、ややこしくなるから。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#float-position

22 ：Name_Not_Found：05/03/08 09:57:02 ID:???

>>18
検証すんのに邪魔なんだよ。

<p> ってのは解ってるよな？

23 ：Name_Not_Found：05/03/08 10:02:17 ID:???

>>16
元からマージンの無いdivに対してmargin: 0;だの
浮動要素に対してwidth: auto;だのと、
無意味で無駄な指定が多いよ。シェイプ・アップしなさい。

24 ：Name_Not_Found：05/03/08 10:06:10 ID:???

俺のfirefoxは回り込まないけど

25 ：Name_Not_Found：05/03/08 10:12:03 ID:???

>>19
すんません
LとRをまちがえました
どちらかに統一してみてください

>>22
すんません
パラグラフです
文章が短いので今回は画像の下に文章が回り込むと言うことはありません。

>>23
すんません
margin：0ってのは癖で入れてしまいました

>>24
あれー？
私は回り込んでしまいます･･･

26 ：Name_Not_Found：05/03/08 10:12:06 ID:???

>>24
そらぁ、だって>>16のソースには、フロートさせた要素がないもんな。当り前。
"picBoxL"ってクラス名が"boxR"のつもりなら話は別だが。

27 ：Name_Not_Found：05/03/08 10:14:38 ID:???

>>25
>LとRをまちがえました
どころではないぞ。
大文字と小文字も違ってるし、そもそもpicとか要らぬ文字がついてるし。

>margin：0ってのは癖で入れてしまいました
ならwidth: auto;ってのは何のつもりだ？

28 ：Name_Not_Found：05/03/08 10:19:05 ID:???

>>16
ところで、何処で習ってきたんだい？

29 ：書き直しました(´･ω･｀)：05/03/08 10:20:42 ID:???

<html>
<head>
<style type=text/css>
.box { display: block; padding: 0; width: 500px; float: none; clear: both}
.boxR { display: block; padding: 0 0 0 10px; width: auto; float: left; clear: both }
</style>
</head>
<body>
<div class="box">
<div class="BoxR">
<img src="Image.jpg" height="200" width="200"><br>
</div>
<h3><img src="Imagea.gif" height="20" width="100"></h3>
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<div class="box">
<div class="BoxR">
<img src="Image.jpg" height="200" width="200"><br>
</div>
<h3><img src="Imagea.gif" height="20" width="100"></h3>
<p>あああああああああ</p>
</div>
<div class="box">
<div class="BoxR">
<img src="Image.jpg" height="200" width="200"><br>
</div>
<h3><img src="Imagea.gif" height="20" width="100"></h3>
<p>あああああああああ</p>
</div>
あああああああああああああああああああああああああああああああああああああああああああああああああ
</body>
</html>

30 ：(´･ω･｀)：05/03/08 10:22:44 ID:???

>>28
いろんな人の作り方を見よう見まねで･･･(´･ω･｀)

31 ：(´･ω･｀)：05/03/08 10:26:35 ID:???

あれ>>29だと
IEに隙間あきませんね･･･

32 ：Name_Not_Found：05/03/08 10:52:10 ID:???

>>29
.box {
height: 200px;
}
h3 {
margin-top: 0;
}

33 ：Name_Not_Found：05/03/08 11:14:24 ID:???

やっばり春なんだねぇ

34 ：Name_Not_Found：05/03/08 11:48:25 ID:+nYYLyvm

* {
margin: 0;
padding: 0;
}
#menu {
float: left;
width: 10em;
}
#contents {
margin-left: 11em;
margin-top: 1em; /*これを加えるとmenuにもmargin-topがとられてしまう*/
}

<div id="menu">
<ul><li>menu</li></ul>
</div>
<div id="contents">
<h1>contents</h1>
</div>

floatdで左右に配置したのですが右contentsにmargin-topを与えると
operaとmozillaでは左のmenuの上にもマージンが取られてしまうのですが
これはIEの方のバグなんでしょうか？
bodyなどにmaginを取らずに三つのブラウザで両方を同じ高さに表示したいのですが
なにか対策とかわかる方いたらお願いします

35 ：Name_Not_Found：05/03/08 11:51:56 ID:???

>>33
そういうことを言う奴に限って房

36 ：Name_Not_Found：05/03/08 11:54:47 ID:???

ハゲドウ

37 ：Name_Not_Found：05/03/08 11:57:43 ID:???

何故解った？

38 ：Name_Not_Found：05/03/08 13:40:09 ID:???

前スレで
http://www.filemaker.com/
ここのメニュー部分にJS使ってないといい張っていらっしゃる
勘違いさんはどうしたらいいんでしょう…

39 ：Name_Not_Found：05/03/08 14:29:24 ID:???

>>38
おまえはどうしたいんだよ。

40 ：Name_Not_Found：05/03/08 15:15:29 ID:???

そこまで考えてなかった

41 ：Name_Not_Found：05/03/08 15:53:02 ID:???

やっばり春なんだねぇ

42 ：Name_Not_Found：05/03/08 16:06:20 ID:???

他人の勘違いなぞ放っておくがよい

43 ：Name_Not_Found：05/03/08 16:22:51 ID:???

>>41
そういうことを言う奴に限って房

44 ：Name_Not_Found：05/03/08 16:26:35 ID:???

ハゲドウ

45 ：Name_Not_Found：05/03/08 16:28:56 ID:???

何故解った？

46 ：Name_Not_Found：05/03/08 17:00:31 ID:???

前スレで
http://www.filemaker.com/
ここのメニュー部分にJS使ってないといい張っていらっしゃる
勘違いさんはどうしたらいいんでしょう…

47 ：Name_Not_Found：05/03/08 17:01:26 ID:???

>>46
おまえはどうしたいんだよ。

48 ：Name_Not_Found：05/03/08 17:38:19 ID:???

しつこいな。ほっとけっつの

49 ：Name_Not_Found：05/03/08 19:02:26 ID:???

h2 {
text-align: right;
float: right;
}
h2:before {
content: "●";
}

　これで自動生成された"●"を拡大・z-indexを負にしてh2の下にもぐらせたいのですが、出来ますか。
　それからh2のwidthはどのように書くべきですか。

50 ：Name_Not_Found：05/03/08 19:30:39 ID:LkqcSvzs

<html>
<head>
<title>てすと</title>
<style type="text/css">

</style>
</head>
<body>
<div class="left">a</div>
<div class="left">b</div>
</body>
</html>

こういう風に書いたところ、だんだん画面の幅を狭くしていくと、
二つ目のブロックが、回り込みじゃなくて、次の行に表示されてしまいます。
これは、何が起きてるんでしょうか？？

51 ：Name_Not_Found：05/03/08 19:34:21 ID:???

>>46
JavaScript使って無いって言ってんのこっちだろ。
ttp://www.kxen.com/

52 ：Name_Not_Found：05/03/08 20:07:37 ID:???

ボックスの縦が　b　<　a　になるから

53 ：50：05/03/08 20:34:20 ID:LkqcSvzs

>>52
もうちょっと詳しく教えてください。
お願いします。

54 ：Name_Not_Found：05/03/08 20:39:36 ID:???

最近.left等の奇抜なclass名を付ける方が増えてきましたね

55 ：Name_Not_Found：05/03/08 21:13:25 ID:???

春だからね。

56 ：Name_Not_Found：05/03/08 21:50:25 ID:???

>>53
回り込む余地が無ければ回り込みは起きない、ってコトだよ。
イヤならその親要素の幅を固定するなり、min-widthを使うなりするがいいです。

>>54
いや、leftってクラス名の要素の中には必ずサヨに関することが書いてあるのかもしれんぞ。

57 ：Name_Not_Found：05/03/08 22:07:31 ID:???

class名になぜleftはダメなんだ？

58 ：Name_Not_Found：05/03/08 22:08:22 ID:???

min-widthはIEで無視されるでしょ。

59 ：Name_Not_Found：05/03/08 22:13:22 ID:???

>57
htmlはレイアウトする物じゃなく～って話だろ

60 ：Name_Not_Found：05/03/08 22:17:44 ID:???

>>50
classじゃなくてidの方を使えよ

61 ：Name_Not_Found：05/03/09 00:10:47 ID:???

>>57
べつに駄目じゃないよ。

例）左側に持ってくるためのスタイルシートの為のクラス名だからleft、は駄目。

ってーのは、left = 左っていう英語を理解できる人間もしくは処理系だけの話だから。
同様の考え方を持った英語圏の人も、<div class="hidari">ってのには文句言わんだろう。

62 ：Name_Not_Found：05/03/09 00:40:47 ID:???

じゃあ　日本人は　hidari　を使えってことか？

63 ：50：05/03/09 00:44:23 ID:0idPPeH0

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

あと、もう一つ疑問がでてきました。
なんか、全然うまくいかなくなってきた。
いろいろやってて
<div class="left">a</div>
のところを
<div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
ってしたら、borderの線からはみ出してしまう。。なんででしょう？？

スタイルシートの理解が間違ってるみたいです。
私の理解では、
aaaaaaaaaaaaaaaaaaaaaaaaaaaの周りに、paddingがあって、borderがあって、marginのスペースがある
と思っていたので、
aaaaaaaaaaaaaaaaaaaaaaaaaaaが、borderと重なることはないと思っていたのですが。。
この理解はおかしいのでしょうか？

64 ：Name_Not_Found：05/03/09 01:04:28 ID:???

>>61
そんなこたぁ関係ない。
>>50自身は左側に表示したいからleftってつけてる訳で、
それを見る側がどうかは関係なく、>>50のhtmlのあり様に対する考え方がなってないわけだ。

65 ：Name_Not_Found：05/03/09 01:14:17 ID:???

>>63
内容によってブロックボックスのサイズが決まることもあるんだけど
今回のように幅や高さをしっかり指定されているときには
あくまでもブロックボックスのサイズはそれに従い、内容であるインラインボックスが
外側のブロックボックスを飛び出して配置されることもあるのよ。

まあとりあえずFAQに載ってるサイトとかで(できればHTMLから)勉強してきたほうがいいと思うよ。

66 ：50：05/03/09 01:32:13 ID:0idPPeH0

なるほど、ありがとうございます。

ブロックボックスのサイズを指定しているから
ブロックボックスはそれに従い、
内容は飛び出してしまってるんですか。。

１から勉強しなおしてみます。

67 ：Name_Not_Found：05/03/09 01:50:41 ID:???

>>51
使ってんじゃん

68 ：Name_Not_Found：05/03/09 02:07:07 ID:???

>>67
使ってないってのはHomeとかAbout KXENとかのポップアップするメニューのことでしょ。

69 ：68：05/03/09 02:17:18 ID:???

ああそうか。IE向けには使ってたよ…。

70 ：Name_Not_Found：05/03/09 03:10:09 ID:GabryLxk

質問なのですけど、マウスがリンクにのった時にキラキラさせるカーソルの
タグを教えて下さい。
例）www.neopets.com/randomfriend.phtml?randomfriend=mbifのページのキラキラです

71 ：Name_Not_Found：05/03/09 03:20:32 ID:???

>>70
左側の黄色いとこのメニューのアイコンのことならJavaScriptだよ。

72 ：Name_Not_Found：05/03/09 06:03:55 ID:???

ただ単に左や右に配置するためにつけるclass名は
どういう名前をつけるのがいいんでしょうか？
boxとかmenu,contentsとつけてる人もいるみたいですがそういうのなら大丈夫なんでしょうか？

73 ：Name_Not_Found：05/03/09 06:23:19 ID:???

そのボックスがメニューを含むのならmenuでいいだろうし本文ならcontentとかでもいいでしょ。
boxというのは何のボックスかわからないから避けたほうがいいと思うけど。

74 ：Name_Not_Found：05/03/09 10:32:49 ID:???

質問です。
float:leftでこのように二段組にしてるんですけど、

　A　　　　　　　　　　　　　　　　　B
項目1　　　　　　　　　　　　　長い文章
項目2　　　　　　　　　　　　　長い文章
項目3　　　　　　　　　　　　　長い文章
項目4　　　　　　　　　　　　　長い文章

IEでは問題ないんですが、
firefoxやNSだと、文章が長いとBがAの下にいってしまって段組になりません。
Bの方をwidthで指定してしまえば大丈夫なんですが、
そうするとブラウザの大きさを変えたときの柔軟性が無くなってしまいます。
どなたか回避方法おしえてください。

75 ：Name_Not_Found：05/03/09 10:48:12 ID:???

>下にいってしまって段組になりません。
>ブラウザの大きさを変えたときの柔軟性が無くなってしまいます。

　　全て伸縮は無理です。全体で650px位になるようにしてみたらいかがでしょうか？

76 ：Name_Not_Found：05/03/09 11:04:53 ID:???

>>74
Bのmargin-leftにAの
あるていどの横幅で下に回りこむのはfloatを使う限りしょうがない
positionでも使ってみれば

77 ：74：05/03/09 11:23:02 ID:???

>>75さん
>>76さん
そうですか。
IEだとうまくいくのはIEの解釈がまちがってるんでしょうね。
ありがとうございあｍした。

78 ：Name_Not_Found：05/03/09 11:33:21 ID:???

>>77
ＡにもＢにもfloat:left;を指定してるのか？
Ｂにはmargin-left:（Ａのwidth+α）;にしてみな。

79 ：76：05/03/09 11:44:48 ID:???

う、すまん。なんか文字が途中ぶっ途切れてた
言いたい事は>>78と同じ

80 ：74：05/03/09 12:04:19 ID:???

>78さん
>79さん
言われたとおりのやり方でうまくいきました。
今まで両方にfloat:leftが一般的だと思ってました・・・
ありがとうございました。

81 ：Name_Not_Found：05/03/09 14:30:35 ID:???

>>74
%ではいかんの？

block-A{
width: 30%;
float: left;
}
block-B{
margin-left: 30%;
}

では。

82 ：Name_Not_Found：05/03/09 15:17:06 ID:???

この人がマイミク0だよ、友達になってあげて！
http://mixi.jp/show_friend.pl?id=363049

83 ：Name_Not_Found：05/03/09 18:00:14 ID:???

>>80
フロートのＦＡＱを読んでから質問してほしかったな。>>12だ。

84 ：Name_Not_Found：05/03/09 22:51:11 ID:???

<div id="containerA">
　<div id="header"></div>
　<div id="containerB">
　　<div id="sidebar"></div>
　　<div id="main"></div>
　</div>
</div>

よくある固定ボックス内にサイドバーとメインという形なのですが、
Firefox1.0で見るとsidebarとmainの部分がcontainer部を貫通します。
ちなみに他のブラウザ(IE6/Opera/NN8BETA)ではちゃんと中に収まって表示されました。
原因が分かる方、どうかご教授お願いします。

85 ：Name_Not_Found：05/03/09 22:55:52 ID:???

>>84
CSSの中身は秘密かい？

86 ：Name_Not_Found：05/03/09 22:58:49 ID:???

>>84
そりゃ誰も解らんだろうな（w

87 ：Name_Not_Found：05/03/09 23:13:05 ID:???

ﾜﾛﾀｗ

88 ：Name_Not_Found：05/03/09 23:25:12 ID:???

ｷﾞｶﾞﾜﾛｽ

89 ：Name_Not_Found：05/03/09 23:30:52 ID:???

ﾃﾗﾜﾛｽｗ

90 ：Name_Not_Found：05/03/09 23:52:20 ID:???

ｸﾞﾗﾝﾄﾞﾜﾛｽ

91 ：Name_Not_Found：05/03/10 00:03:11 ID:???

ﾅｲﾂｵﾌﾞｸﾞﾗｳﾝﾄﾞﾜﾛｽ

92 ：Name_Not_Found：05/03/10 00:11:03 ID:???

84だが、正直すまんかった。
それとどうやらfloatが絡んでるみたいで、いじってたら修正出来たよ。
それにしても、本当に申し訳なかった。

93 ：Name_Not_Found：05/03/10 00:20:57 ID:???

気にすな

94 ：Name_Not_Found：05/03/10 00:27:25 ID:???

>>92
次から気をつければよろし

95 ：Name_Not_Found：05/03/10 00:39:12 ID:???

おまえらいいヤツだな。

96 ：Name_Not_Found：05/03/10 03:16:16 ID:E1uzjIEZ

<html>
<head>
<title>てすと</title>
<style type="text/css">

</style>
</head>

<body>
<div class="menu"><p>Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
<div class="main"><p>あいうえおかきくけこさしすせそたちつてと</p></div>
</body>
</html>

アルファベットを並べて書くと、改行されないんですが、なにか良い方法ってありますか？
どうも、ブラウザが、どこで改行すればいいか、わからないみたいで、ボックスからはみだしているようです。
適当にスペースを入れるいい感じになるんですが、
それだと、文章の方にスペースをいれないといけなくなるので、嫌なんですが。

Firefoxでテストしています。
ちなみに、IEの場合、内容の大きさからボックスの大きさを決めてるようで、論外な表示になりますが。。

97 ：Name_Not_Found：05/03/10 03:31:25 ID:???

break-all

98 ：Name_Not_Found：05/03/10 03:37:45 ID:???

文字列のどこでも改行できる言語は
世界的に見れば少数派なのですよ

99 ：Name_Not_Found：05/03/10 05:45:40 ID:???

>>96
そういうとき（長い単語を途中で折りたいとき）のために
<br>があるんだけど、どう？

100 ：Name_Not_Found：05/03/10 07:12:04 ID:???

ラテン・アルファベット（ローマ字）は、分かち書きで記すものなんです。

101 ：Name_Not_Found：05/03/10 08:30:32 ID:???

>>96
んなもん　禿禿しくｶﾞｲｼﾂ　

102 ：Name_Not_Found：05/03/10 11:04:46 ID:E1uzjIEZ

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

プログラム書いてて、
ちょっとマニュアルを自動生成しようと思って、
ついでにCSSも使ってみようと思ったんですけど、
"."ピリオドでも、改行されないのに、困ってました。
word-break: break-all;を使うとIEの方がうまく表示するようになりました(笑)

文字サイズから<br>入れるのもありかもしれないんですが、
プロポーショナルフォントだと、ちょっと大きさわからないし。。

Firefoxではあきらめます。

CSS使うとレイアウトはtableと同じことできるっていうけど、
微妙に違うんですね。

103 ：Name_Not_Found：05/03/10 11:11:53 ID:4LDiRwyb

<html>
<head>
<style type="text/css">

</style>
<title>hoge</title>
</head>
<body>
<ul>
<li id="hoge"><a href="hoge.html" title="hoge">hogehogehogehogehogehogehogehoge</a></li>
</ul>
</body>
</html>

上記で、ロールオーバーと同等の効果を出してみたんだけど、
text-indent: -9999px;
の部分の力技を、もう少しクールにするにはどうしたらいい？
<span>hogehogehogehogehogehogehogehoge</span>とかにするのは無しでw

104 ：Name_Not_Found：05/03/10 11:40:32 ID:???

>>103
何がしたいのかいまいちわからないけど
リンク部分は画像だけでやろうとしてんの？
それとも文字の背景として画像を使いたいの

105 ：103：05/03/10 11:51:15 ID:???

>>104
リンク部分は背景画像だけにして、テキストを表示させたくないのです。
背景画像はマウスアウト時とホバー時の画像を横に並べただけの１枚の画像です。

106 ：Name_Not_Found：05/03/10 11:54:30 ID:???

htmlはシンプルに、cssはクールにって気持ちはわかるけど、画像非表示下だとまったく無力

107 ：Name_Not_Found：05/03/10 11:59:47 ID:???

text-indent: -9999px;もなにかに認定とか・・・

108 ：Name_Not_Found：05/03/10 11:59:52 ID:???

全角スペースでも入れれば

109 ：103：05/03/10 12:01:24 ID:???

>>106
> 画像非表示下だとまったく無力
確かにそうですねw
画像だけは表示、または表示できる方向では、何とかならんもんでしょうか？

110 ：Name_Not_Found：05/03/10 12:09:11 ID:???

span display:none

111 ：Name_Not_Found：05/03/10 13:52:13 ID:E1uzjIEZ

ボックスの角を丸めたり、ボックスのボーダーに画像を使ったりするのを
解説してくれたページで、おすすめのページあったら教えてください。

112 ：Name_Not_Found：05/03/10 16:06:14 ID:???

>>111
CSS2 では「ボックスの角を丸めたり、ボーダーに画像を使ったり」できないんだけど。
CSS3 のことか？ CSS3 の草案だったら ttp://www.d-toybox.com/spec/CSS3/background/

113 ：49：05/03/10 19:39:12 ID:???

スルーされちゃったので、もう一度……
<h2>ごあんない</h2>
h2:before {content: "●";}
これで、"●"を"ごあんない"の下に置きたいのですが、どうしたらよいでしょう。

114 ：Name_Not_Found：05/03/10 19:57:08 ID:???

>>113
藻前はどうしたらいいと思うんだよ。

115 ：Name_Not_Found：05/03/10 20:17:44 ID:???

>>113
css2ではcontentで生成した内容はposition指定できない。
よってz-indexは無効。

マージンをうまくいじればできる。がんがれ。

116 ：Name_Not_Found：05/03/10 20:22:43 ID:???

↑誤爆？

117 ：Name_Not_Found：05/03/10 20:38:21 ID:4LDiRwyb

Safari 1.2.4(v125.12)　標準／互換両方
colorに不正なtransparentを指定すると透明になってしまう。

<html>
<head>
<style type="text/css">

<title>hoge</title>
</head>
<body>
<p>hogehogehogehogehogehogehogehoge</p>
<p id="hoge">Safariでは透明になります。</p>
</ul>
</body>
</html>

118 ：117：05/03/10 20:39:33 ID:???

</style>が抜けた。

119 ：117：05/03/10 20:48:11 ID:???

しかも誤爆した。ｽﾝﾏｿ

120 ：49：05/03/11 09:36:55 ID:???

>>115
ありがとうございました。画像が無難でしょうか。

121 ：Name_Not_Found：05/03/11 19:55:34 ID:FYayM1ZE

初心者板から来ました。
画像のレイアウトについて質問です。
＜ｃｅｎｔｅｒ＞や＜ｄｉｖ　ａｌｉｇｎ＝ｃｅｎｔｅｒ＞
じゃなくて中央に表示させるにはどのようにすればよいでしょうか？
ｃｓｓでやりたいのですが。
どなたか宜しくお願いいたします。

122 ：Name_Not_Found：05/03/11 20:11:32 ID:???

>>121
釣りでしょ

123 ：Name_Not_Found：05/03/11 20:11:37 ID:???

margin: auto;

124 ：Name_Not_Found：05/03/11 21:45:08 ID:Mx2XwREW

http://nvu.cc/
のサイトを見て、cssとnvuにひかれました。OSXを使ってるんですが、昔はホームページミル(?)とかいうソフトを使っててcssと全く縁がありませんでした。
そこのサイトの左側のメニュー(?)みたいなところのborderはどのように作ればいいのでしょうか？
そこのスタイルシートをコピペしてみてもうまくborderがでない・・。なんか、時代に取り残された・・・。

125 ：Name_Not_Found：05/03/11 21:55:36 ID:???

ちょっと見ただけじゃ何するソフトかぜんぜんわからん

126 ：121：05/03/11 22:08:03 ID:FYayM1ZE

>>123
ありがとうございます。
autoがききません。
Mac&IEだからですかね？

127 ：Name_Not_Found：05/03/11 22:14:41 ID:???

>>124
lists { border-style: solid;
border-color: rgb(216, 208, 166);
border-width: 1px 1px 1px 10px;
margin-left: 10px;
display: block;
margin-top: 5px;
margin-bottom: 0px;
padding-left: 5px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 11px;
font-family: 'ＭＳゴシック','osaka','verdana';
}
これだけだろうけど...
マークアップは滅茶苦茶なので　真似しない方がいいyo

128 ：Name_Not_Found：05/03/11 22:34:30 ID:???

>>126
たぶん藻前の書き方が間違ってるから

129 ：Name_Not_Found：05/03/11 22:51:51 ID:???

>>126
標準モードでやってね。

130 ：Name_Not_Found：05/03/11 22:55:45 ID:???

>>126
FAQぐらい嫁 >>9

131 ：Name_Not_Found：05/03/12 13:17:00 ID:???

>>124
ものすごく見る人を混乱させるつくりのサイトだね。
ナビゲーションとかひどい。
HTMLソースがひどいのはNvuのせいにしておけばいいけどさ。

132 ：124：05/03/12 13:47:30 ID:???

>>ものすごく見る人を混乱させるつくりのサイトだね。
えっ、そうなんですか？
なんか、全体的にブログっぽいのがとてもいいと思ったんですが。

メニューを左側の囲い（div?）と内容を右の囲いにいれてフレームのかわりみたいにしたいんですが、そういう場合はどうすればいいのでしょうか？
フレームしか左右を分ける手段をしらなかった・・・。１０代で時代遅れ・・。

133 ：Name_Not_Found：05/03/12 13:49:50 ID:???

すまん、何言ってるかわからん

134 ：Name_Not_Found：05/03/12 15:00:09 ID:???

確かにナビがわかりづらいな
>>132
floatかposition

135 ：Name_Not_Found：05/03/12 17:15:34 ID:???

質問です。

■
□

↑のようにdivボックスで作ったとします
■はheight: 100px;にして
□はheight:　を残りの縦幅にしたいのですが、フレームやテーブルを使わず
cssでできるんでしょうか？
できるとしたらやり方を教えてください。

136 ：Name_Not_Found：05/03/12 17:17:06 ID:???

> 残りの縦幅
ブラウザから見て？

137 ：Name_Not_Found：05/03/12 19:30:06 ID:???

ただいま>135はんこをしておりますので、少々お時間を頂きます。

138 ：Name_Not_Found：05/03/12 20:56:46 ID:???

なげーな　肛門切れて気を失ってるんじゃねーかー？

139 ：Name_Not_Found：05/03/12 21:31:10 ID:???

マルチ市ね

140 ：Name_Not_Found：05/03/12 21:34:44 ID:???

よーしチンカス共質問の時間だ

外部ファイルでｃｓｓを読み込むのだが
例えば
div.menu{
color:#cc0000;
width:200px;
float:left;
font-size:8pt;
padding:0px;
margin:0px;
}
といった様に。Divのクラス名「menu」で背景色や文字サイズなどを
指定できるまでは解った

この同じdiv.menu内でA属性も指定できないの?

Blogでデザインを変えたいんだけど
Div単位でA属性が指定できれば随分とスッキリするので
方法が知りたい

そこでおまえらチンカスの出番ときたわけだ。
答えろや

141 ：Name_Not_Found：05/03/12 21:39:26 ID:???

>>140
よく聞け、ハナクソ野郎。

div.menu a {
display:none;
}

だ。わかったか。

142 ：Name_Not_Found：05/03/12 21:41:57 ID:???

ところで、

http://pc5.2ch.net/test/read.cgi/hp/1110478221/492
> a:text.ｘｘｘ{decoration:none;}

:text擬似クラス（それとも擬似要素？）なんてあったっけ？

143 ：チンカス：05/03/12 21:43:35 ID:???

マルチ氏ねとか言わないように・・　だな。

オマイの方法では、色の変化がいろいろ付けられて、それはそれでよい。

より省力化したかったら、子孫だの子供だのつーのがあるから勉強しろ。

　http://msugai.fc2web.com/web/CSS/selector.html

なお、外には子供を作らないように・・・　　　嫁に泣かれる。

144 ：Name_Not_Found：05/03/12 21:54:58 ID:???

泣かれるだけならまだいいほうだ。

145 ：Name_Not_Found：05/03/12 21:55:54 ID:???

フェラティオされる

146 ：135：05/03/12 21:56:29 ID:???

>>136
はい　ブラウザから見てです。

147 ：Name_Not_Found：05/03/12 21:56:37 ID:???

>>144
オタッキ-がなにいってんの？？

148 ：144：05/03/12 22:00:29 ID:???

>>147
ホームレスはオタッキ-では無いぞ

149 ：Name_Not_Found：05/03/12 22:01:20 ID:???

>>146
肛門切れてないのか？

150 ：Name_Not_Found：05/03/12 22:08:44 ID:???

>>135さんの質問の答えは僕も知りたいです。

151 ：Name_Not_Found：05/03/12 22:12:56 ID:???

>>135
Mozilla系ならできる。
IEはIEの独自拡張を使えばできる。
IE7なら独自拡張を使わなくてもできるようになっているかもしれない。
Opera、Safari系は知らね。

152 ：472：05/03/12 22:15:28 ID:9p92oKfK

Webｻｲﾄ製作初心者質問ｽﾚで誘導されたのですが...
既に代わりに質問して頂いてるようですので

>>141
div.menu a{

}
とありますが具体的に言うとどういう記述方をとれば
良いのでしょうか？
例えば
div.menu a{
color:#000000; 　　div内の文字色指定
font-weight:bold; div内の文字フォント指定
padding:2px;　　　 div内の領域内指定
}
この記述ではdivに対しての指定ですよね？
この形式でどういう記述をすればa要素を指定出来るのでしょうか？

>>142
一応私の環境下（XP　IE6.0では私の意図した動作をしていますが
文法的におかしいのでしょうか？

>>143
マルチ氏ねとか言わ「れ」ないように
脱字でした。誤解を招く文章申し訳ないです。
紹介して頂いたｻｲﾄで勉強します。

重ね重ね板汚し申し訳ないです。。

153 ：135：05/03/12 22:23:16 ID:???

>>151
ありがとうございます。
テーブルやフレームを使えってことでいいのでしょうか？

154 ：Name_Not_Found：05/03/12 22:28:46 ID:???

はぁ？

155 ：Name_Not_Found：05/03/12 22:29:26 ID:???

>>152
> 例えば
> div.menu a{
> color:#000000; 　　div内の文字色指定
> font-weight:bold; div内の文字フォント指定
> padding:2px;　　　 div内の領域内指定
> }
> この記述ではdivに対しての指定ですよね？

違う。div.menuの中のa要素に対しての指定。

で、

http://pc5.2ch.net/test/read.cgi/hp/1110478221/492
> a:text.ｘｘｘ{decoration:none;}

どこにa:textという風に書けって書いてあったの？

156 ：Name_Not_Found：05/03/12 22:40:05 ID:???

>>155
しつこい

157 ：472：05/03/12 22:49:37 ID:9p92oKfK

>>155
>違う。div.menuの中のa要素に対しての指定。
なるほど、これで解りました。有難うございます。
div.menu a{
　link{color: #000000; background:#e7dfce;}
　visited{color: #000000; background:#e7dfce;}
　active{color: #FF69B4;}
　hover{color: #ffe42a; background:#5a4dbd;}
}
と言う記述方でよいのですか？

> a:text.ｘｘｘ{decoration:none;}
えっと、、どこで見つけたまでは覚えてませんが
基本的に情報元は検索して調べてるので
検索した結果としか。。
私の脳内解釈が間違っていたのかもしれません。

158 ：Name_Not_Found：05/03/12 22:56:46 ID:???

なんとまぁ、ユニークだこと・・・　　ﾎﾎﾎ

159 ：Name_Not_Found：05/03/12 22:58:50 ID:???

>>157
div.menu a:link {
color: #000000; background:#e7dfce;
}

visited、active、hoverも同じように。

160 ：472：05/03/12 23:03:12 ID:9p92oKfK

>>159
あれ？
div.menu a{
　link{color: #000000; background:#e7dfce;}
　visited{color: #000000; background:#e7dfce;}
　active{color: #FF69B4;}
　hover{color: #ffe42a; background:#5a4dbd;}
}
で早速自分のBlogで試したところ
意図する動作したので満足していたのですが

div.menu a:link {
color: #000000; background:#e7dfce;
}
div.menu a:visited{
color: #000000; background:#e7dfce;
}

っと一つ一つ括弧閉じていくほうが文法的に良いですか？

161 ：Name_Not_Found：05/03/12 23:10:30 ID:???

>>160
今後のこともあるから、IE以外でも試しなよ。

162 ：472：05/03/12 23:17:08 ID:9p92oKfK

>>161
了解しました。
すべての環境で意図した表示するというのが理想なので
どういう文法が正しいのか等その辺の因果関係の
解説ｻｲﾄを探して見ます。

長々と失礼しました。では、これにて失礼します。

163 ：Name_Not_Found：05/03/12 23:19:53 ID:???

うむ

164 ：Name_Not_Found：05/03/12 23:25:30 ID:???

いや、おろしてくれ。

165 ：Name_Not_Found：05/03/12 23:56:32 ID:???

例えばこうして下記のようなCSSとHTMLソースがあって、
後から指定したはずの p.aaa の指定がカスケードできない部分があるのは何故？
漏れなんか勘違いしてる？

p {
margin: 4em;
}
.section .section p {
margin: 2em;
}
p.aaa {
margin: 0em;
}

<div class="section">
<h1>h1</h1>
<p>ppppppppppppppppppppp</p>
<p class="aaa">ppppppppppppppppppppp</p>
<div class="section">
<h2>h2</h2>
<p>ppppppppppppppppppppp</p>
<p class="aaa">ppppppppppppppppppppp</p>
</div>
</div>

166 ：Name_Not_Found：05/03/13 00:15:55 ID:???

>>165
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#specificity

.section .section p → 詳細度21
p.aaa → 詳細度11

167 ：Name_Not_Found：05/03/13 00:28:02 ID:???

p.aaaじゃなく、.section p.aaaじゃなきゃだめなんじゃない？

168 ：165：05/03/13 00:48:22 ID:???

>>166
ありがとう。さっそく解説サイト読みました。
詳細度。そんな仕様になってたのね。理解しました。

となると例えば、div.section div.section として指定するのと
.section .section とするのでは、他への影響が変わってくる可能性もあるわけか。

実際のソースでは div.section 連打指定も多く
p.aaa は特殊な存在で、文脈とかあまり関係なしに !important 指定な感じなんだが、
ユーザスタイルのこと考えてあまりしたくないなあとか思ったり。
そうなると、>>167 さんの言うように、つらつら書き連ねるのがいいのかなあ。

169 ：Name_Not_Found：05/03/13 09:03:03 ID:???

>>168
基本はカスケードです。

170 ：Name_Not_Found：05/03/13 10:39:01 ID:???

>さっそく解説サイト読みました。
「解説」ではなくて「仕様書の邦訳」なわけだが。
提示された資料の文責ぐらい読みませんか、普通。
何でもかんでも鵜呑みにしてしまう気風を感じる。

カスケードするから Cascading Style Sheets なわけで。
本来、こんなことは CSS を学ぶものとして基礎中の基礎。

171 ：Name_Not_Found：05/03/13 12:10:11 ID:rL1Q3lMH

リンク部分を四角で囲んだ範囲全体を反応させて、ロールオーバー効果を持たせるようにするには
どうしたらいいのでしょうか？

メニュー部分に使いたいのですが、言葉の長さが違うので困っています。

172 ：Name_Not_Found：05/03/13 13:32:55 ID:bzpF8cmy

<h1>や<h2>って絶対に改行入ってしまうんですが、
改行されないようにする方法ってありますか？
nowrapとか使ったのですがうまくいきませんでした。

<h1>のタイトルの両脇に画像を配置したいのですが･･･。

173 ：Name_Not_Found：05/03/13 13:49:19 ID:???

>>172
<h1><img *> タイトル <img *></h1> で良いんじゃないの

174 ：Name_Not_Found：05/03/13 14:00:06 ID:???

>>172 ><h1>や<h2>って絶対に改行入ってしまうんですが、

ブロック要素　インライン要素っつーのを勉強しようぜ。

175 ：Name_Not_Found：05/03/13 14:03:17 ID:???

>>171
aじゃなくてその一個上の要素にwidthを指定してみれば
ソースがないからなんともいえないけど

>>172
display: inline
無駄に行があくのが嫌ならmargin: 0

176 ：Name_Not_Found：05/03/13 14:03:47 ID:???

>>171
幅を指定したいのか、したくないのか？
前者なら

a {
display: block;
width: 任意;
paddinng: 任意;
}

後者ならpaddinngのみでとか。

177 ：Name_Not_Found：05/03/13 14:13:10 ID:???

>>176
widthを指定しないとIEで手のマークになってくれない

178 ：Name_Not_Found：05/03/13 14:18:45 ID:???

質問です。
<h1>にアンカー付きのテキストが入っています。
背景画像としてタイトルロゴを入れて、テキストは
text-indentをつかって表示しないようにしたのですが、
<h1>のボックスをクリックするとアンカーに飛ぶように
うまくできないでしょうか？

179 ：Name_Not_Found：05/03/13 14:22:38 ID:???

>>171
ul {
margin: 0;
padding: 0;
list-style: none;
width: お好きな長さﾞ;
}
li {
margin: 1em;
padding: 0;
}
a {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
border: solid #000000 1px;
text-decoration: none;
display: block;
}
a:link {
color: #000000;
background: #ffffff;
}
a:hover {
color: #ffffff;
background: #000000;
}

とか

180 ：Name_Not_Found：05/03/13 14:38:16 ID:???

>>178
>>103の方ですか？
a {
width: 100%;
display: block;
}
画像使ったほうがいい気がするけど

181 ：124：05/03/13 17:47:51 ID:???

cssがんばるぞーとか思った矢先に、携帯からも見れるいい掲示板作れ命令がでた・・・・。俺わかんないよ・・、掲示板は。

182 ：Name_Not_Found：05/03/13 18:07:36 ID:???

>>181
とりあえずレンタルにすれば？　てか、命令ってなんだ

183 ：172：05/03/13 18:21:12 ID:???

>>173
なるほど！失念してました。そう言えばその手がありましたね。
>>174
いや、そこは承知の上で聞いておりま。
>>175
ありがとうございます。助かりました！

184 ：Name_Not_Found：05/03/13 18:37:50 ID:???

お願いですからhtmlを最低限覚えてから質問してください
htmlなんて難しいものじゃないんで

185 ：124：05/03/13 19:21:59 ID:???

クラスのお偉いさんの命令。今度の体育祭に向けて。
携帯で掲示板みてみたんだけど、意味わからなかった。
誰か、お勧めない？

186 ：Name_Not_Found：05/03/13 19:29:52 ID:???

まずスレ違い
次に自分で検索してダメだったものを言え
そして、勉強し直してこい

187 ：Name_Not_Found：05/03/13 19:37:12 ID:???

ダメだった物を言えなんて優しすぎるだろ
スレ違いだから他でやれ

188 ：Name_Not_Found：05/03/13 20:25:26 ID:???

普段学校生活でパソヲタ臭全開で自慢話でも
してるから妙な仕事任されるんだろ(　`,_ゝ`)

189 ：124：05/03/13 20:31:58 ID:???

やつがやるよりましなんだよ！

190 ：Name_Not_Found：05/03/13 20:33:20 ID:???

>>189
とりあえず、おすすめの携帯用レンタル掲示板とやらは別のスレで聞いてくれい。
でなきゃ、リンク集でも検索すればよかろう。

191 ：171：05/03/13 21:10:03 ID:rL1Q3lMH

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

>>179
おー、ほぼ期待通りです！ありがとうございます。

それでこの場合、リストのマージンを０にしてボックスを近づけると、上下の線が二重になってしまいますよね。
右、左、下にボーダーを入れると一番上だけ、ボーダーが付かなくなっちゃうし…。

どうすればいいのでしょうか、よろしくお願いします。

192 ：Name_Not_Found：05/03/13 22:25:09 ID:D/LM2Q6/

>>191
> 右、左、下にボーダーを入れると一番上だけ、ボーダーが付かなくなっちゃうし…。

ならul要素の上辺にボーダー描けばいい。

193 ：Name_Not_Found：05/03/13 22:30:43 ID:???

ul {
list-style: none;
width: **px;
}
li {
border: solid;
border-width: 1px 1px 1px 1px;
}
li + li {
border-width: 0px 1px 1px 1px
}
テストしてない上IE無視でスマソ

194 ：171：05/03/13 23:00:44 ID:rL1Q3lMH

>>192
それでバッチリでした！ｔｈｘ

195 ：Name_Not_Found：05/03/14 05:56:46 ID:YyTZ8Uuk

すまそん
スタイルシートでちょっとおせーて欲しいことがあるのだが
この画像を背景全体に↓
http://www.wa.commufa.jp/~x68000/1.gif
そしてこの画像を画面　左5%　上50%↓
http://www.wa.commufa.jp/~x68000/600_450.jpg
で表示させるにはどの様なふうにすればいいのですか？
タグを教えてください。
すいませんド素人でm( __ __ )m

196 ：Name_Not_Found：05/03/14 09:26:58 ID:???

素人は言い訳にならんし、スタイルシートにタグなど無い！

197 ：Name_Not_Found：05/03/14 11:48:48 ID:???

>>195
background-position
%でうまくいかないUAには、ブロックを一つ追加して対応するのもいいんじゃないかな、と。

198 ：Name_Not_Found：05/03/14 13:39:24 ID:QYfadxPt

HTML 4.01doctype宣言するとpaddingも内包されたボックスになってしまうんだけど、paddingを内包しないように回避する方法ある？

199 ：Name_Not_Found：05/03/14 13:41:25 ID:???

（・д・）

200 ：Name_Not_Found：05/03/14 14:14:17 ID:???

まずHTMLから勉強されてはいかがでしょうか

201 ：Name_Not_Found：05/03/14 14:19:58 ID:???

たぶん標準か互換かのことを言ってるんだろうな

202 ：Name_Not_Found：05/03/14 15:25:44 ID:???

>>198
>184

203 ：Name_Not_Found：05/03/14 19:32:13 ID:???

>>195
<html><head><title>195</title></head><style type="text/css">html {height: 100%;background: url("http://www.wa.commufa.jp/~x68000/1.gif");}
body {height: 100%;margin: 0;background: url("http://www.wa.commufa.jp/~x68000/600_450.jpg") no-repeat 5% 50%;}</style>
<body></body></html>

204 ：Name_Not_Found：05/03/14 19:48:40 ID:???

オマイって奴は・・・

205 ：Name_Not_Found：05/03/14 20:14:27 ID:???

>>203
回答にしては恥ずかしいぞ。

206 ：Name_Not_Found：05/03/14 21:21:26 ID:???

html>body {}
の『>』はどういった意味でしょうか？
説明が載ってるサイトがありましたら教えてください

207 ：Name_Not_Found：05/03/14 21:26:34 ID:???

>>206
タグを表します。
あるいは不等号。

208 ：203：05/03/14 21:35:16 ID:???

>>205
頭から糞ブラウザは眼中に無い
論理的には十分

209 ：Name_Not_Found：05/03/14 22:15:40 ID:???

>>206
IE5.xで凄い事になるので使っちゃダメ☆

210 ：フラッシュマン：05/03/14 23:06:50 ID:???

Flashで不完全なCSSを使えるらしいんで、勉強するぞ！！！

ｵﾏｲﾗよろしくな！！！

211 ：昔の人：05/03/14 23:36:40 ID:???

>>206
なぜ解説サイト一覽（>>7）も見ないのでせうか。檢索すらできないのでせうか。

212 ：Name_Not_Found：05/03/14 23:49:48 ID:???

>>203
これ↓入れるの忘れてないかい？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

213 ：Name_Not_Found：05/03/15 00:14:29 ID:???

おまえ頭悪いなｗ

214 ：Name_Not_Found：05/03/15 00:27:27 ID:???

れもそう思った

215 ：Name_Not_Found：05/03/15 00:30:56 ID:???

れもれも

216 ：Name_Not_Found：05/03/15 00:45:05 ID:???

れもﾀﾝﾊｧﾊｧ

217 ：Name_Not_Found：05/03/15 00:54:56 ID:???

郡山にれもというお菓子があってとてもうまい。
檸檬と書いてれも。

218 ：Name_Not_Found：05/03/15 01:04:06 ID:???

れも萌え！！

219 ：Name_Not_Found：05/03/15 01:22:53 ID:???

れもがぁみんなの質問にいっしょうけんめい答えるぉ

220 ：Name_Not_Found：05/03/15 01:23:56 ID:???

れも

221 ：Name_Not_Found：05/03/15 02:09:12 ID:???

おまいら勘違いしすぎだ。よく読め。

214 名前：Name_Not_Found[sage] 投稿日：05/03/15 00:27:27 ID:???
れもそう思った

正式名称は「れ」だったんだよ！！！！！！

222 ：Name_Not_Found：05/03/15 04:06:38 ID:eRjbE5id

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
で書いています。

<table width="800">
<tr>
<td align="right"><a href="hoge">menu1</a><a href="hoge">menu2</a><a href="hoge">menu3</a></td>
</tr>
</table>

以上のhtmlをULのfloatで表現しようとしたのですが、まるで駄目でした。
どうすればよろしいでしょうか。

223 ：Name_Not_Found：05/03/15 05:48:43 ID:???

cssによって、htmlの<b>タグを無効化することができないでしょうか。
例えば<hr color="#ff0000">とやってても。
cssでhrの色を設定していれば、cssの方が優先されるみたいなやり方で。

224 ：Name_Not_Found：05/03/15 07:50:14 ID:???

なんでそれがしたいの？
b {font-weight:normal;}

他のことは知らん

225 ：Name_Not_Found：05/03/15 07:58:03 ID:???

>>222
なにをどうして何がダメだったの？
何を教えれば良いかわからん。

226 ：Name_Not_Found：05/03/15 08:02:49 ID:???

>>224さん
助かりました、ありがとうございます。
レンタルし一行掲示板のコメントが勝手にすべて<b>が付けられてて、読みにくくて。
設定でも変えられないようなので、cssで可能ならばと思って。

227 ：Name_Not_Found：05/03/15 08:03:51 ID:???

>>222
ul {
width:800px;
}
li {
float: right;
width: auto;
display: inline;
}

脳内だから多分間違ってる

228 ：Name_Not_Found：05/03/15 13:21:40 ID:???

このまえfloatはブロックだからinlineはｲﾗﾈとつっこまれた

229 ：Name_Not_Found：05/03/15 15:27:36 ID:???

>>227
floatはいらんね。
あと、inlineにした場合
<li>hoge</li>
<li>hoge</li>
とするとスキマができるので
<li>hoge</li
><li>hoge</li>
みたいにするといいかも。

230 ：Name_Not_Found：05/03/15 15:54:14 ID:???

お前らハイエナか

231 ：Name_Not_Found：05/03/15 17:05:52 ID:???

li > ul {
top: auto;
left: auto;
}

li > ul って初めて見たんだけど、どういうこと。
こんなんあったっけ。

232 ：Name_Not_Found：05/03/15 17:55:36 ID:???

IEが対応してないので知らなくていい

233 ：Name_Not_Found：05/03/15 18:00:56 ID:???

>>231
li の子の ul の意味。
<ul>
<li>
    <ul>←このul限定
    <li></li>
    </ul>
</li>
</ul>

li ul って書くと、li の子孫の ul って意味。
<ul>
<li>
    <ul>←これも
    <li>
        <ul>←これも含む
        <li></li>
        </ul>
    </li>
    </ul>
</li>
</ul>

234 ：Name_Not_Found：05/03/15 19:16:45 ID:???

>>232-233
へぇぇ。ありがとう。li>ul と li ul は違うというこったね。

http://www.alistapart.com/articles/dropdowns/
を参考にこだわりのCSSドロップダウンメニューを作ってて、初めて見たんだよ。
そんなもの入れなくてもモジラとIEでは表示されるし、
いったいなんだろうなと不思議だった。

235 ：Name_Not_Found：05/03/15 20:11:34 ID:???

div#top a でcssを適応させるのと
クラスで分けるってどっちがいいの？

236 ：Name_Not_Found：05/03/15 20:49:40 ID:???

>>234
>>232の言うとおり、MSIEは今のところ対応していないセレクタの書き方なので、
実際には、li ul と li ul li ul を別指定することで対応するしかないね。

>>235
おこのみで。

237 ：Name_Not_Found：05/03/15 21:26:20 ID:???

li ulもli ul li ulも、li直下、liの子ulにはかわり無いんじゃね？

238 ：Name_Not_Found：05/03/15 22:00:37 ID:???

liとulが逆なんだと思われ

239 ：Name_Not_Found：05/03/15 22:21:10 ID:???

>>237
あ。
li > ul とするのって、
li直下のulに“のみ”指定をしたい場合につかうじゃん、その子孫のulには影響してほしくない場合。
そういうことかと。

240 ：239：05/03/15 22:21:41 ID:???

あ、激しく勘違いした。
すまそ。

241 ：Name_Not_Found：05/03/16 00:32:26 ID:???

http://www.stunicholls.myby.co.uk/menu/background2.html

ここ、ＩＥでも左側のメニューが動かないんだけど、
どういう仕組み？ソースみてもいまいちよくわからない。
教えてください。

242 ：Name_Not_Found：05/03/16 00:44:28 ID:???

>>241
擬似フレームとかいうのじゃ?

243 ：Name_Not_Found：05/03/16 00:46:15 ID:???

>>242
どうやら違うみたいなんです。

244 ：Name_Not_Found：05/03/16 00:48:46 ID:???

擬似フレームじゃないな
position:fixedてIE対応してたっけ？

245 ：Name_Not_Found：05/03/16 00:49:20 ID:???

>>244
してないです

246 ：Name_Not_Found：05/03/16 01:17:02 ID:???

やり方はよくある擬似フレームと似たようなもんだけど
mozillaでもスクロールできるしこっちの方がスマートだな

247 ：Name_Not_Found：05/03/16 07:50:37 ID:65N0WvmC

ローカルでは効いているのに、サーバにアップすると効きません。
今までと同じ方法で作っていて、同じようにアップしています。
こんな症状になったのは初めてです。Macで作成しています。
変わったことは、今までWinでEmEditerで書いてたのを、Macのmiにしたことくらいです。

CSSファイルは文字コードはShift Jis、改行コードはCR+LFで保存しました。
何か関係がありますか？

リンクのタグ
<link rel=stylesheet href="css/main.css" type="text/css">

試したブラウザ
Mac ：Safari1.2　IE5　Firefox
Win：IE6　Firefox

248 ：Name_Not_Found：05/03/16 07:59:30 ID:???

>>247
改行コードLFで保存する。
あるいは、アップロード時にFTPソフトでLFに変換する。

とか、してみれば？

249 ：247：05/03/16 08:07:38 ID:???

>>248
あっ！Macでは表示できるようになりました。
でもWinではまだダメです。何故でしょう…。

CSSはLFで保存しないといけないんですか？

250 ：Name_Not_Found：05/03/16 09:13:10 ID:???

>>241
height: 100%;

251 ：Name_Not_Found：05/03/16 09:52:18 ID:???

>>249
CSSつーか、サーバがユニックス系なら、サーバ側のテキストファイルの改行コードがLFだからって話。
テキストファイルは全部、LFでアップロードしなおさなきゃならんかもね。

252 ：Name_Not_Found：05/03/16 13:48:58 ID:???

そうだ、ﾀｲﾄﾙに自動的にﾅﾝﾊﾞｰを振ってみよう！と思い、以下のように書いてみました。

<style type="text/css"></style>
<html>
<body>
<h1 class="list">hogehoge</h1>
<p>fugafuga</p>
<h2 class="list">hogehoge</h2>
<p>fugafuga</p>
<h3 class="list">hogehoge</h3>
<p>fugafuga</p>
<h2 class="list">hogehoge</h2>
<p>fugafuga</p>
</body>
</html>

すると、ﾀｲﾄﾙに　1　3　5　7　とﾅﾝﾊﾞｰが振られていきます。
間にある段落をとり省くと、　1　2　3　4　と振られます。
pをaとかに変えてみても、　1　3　5　7　と…。
順番通り　1　2　3　4　と番号を振るにはどうすればいいのでしょうか…？

253 ：Name_Not_Found：05/03/16 13:49:58 ID:???

>>250
わかりません

254 ：Name_Not_Found：05/03/16 13:58:38 ID:???

JSこーい

255 ：Name_Not_Found：05/03/16 14:22:37 ID:uDBRApbS

>>252
Mac の Safari , Opera7.54 は、1,2,3,4 と表示
Mac の Firefox1.0.1 は 0,0,0,0 と表示
どちらも、間のpは関係なし。あっても無くても同じ表示

256 ：Name_Not_Found：05/03/16 14:23:43 ID:???

>>250
( ﾟдﾟ)ﾎﾟｶｰﾝ

257 ：Name_Not_Found：05/03/16 15:46:10 ID:EAp6hnS2

>>252
ttp://kur0nek0.web.infoseek.co.jp/obon/04/index.html

258 ：Name_Not_Found：05/03/16 15:56:04 ID:???

↑なんかびっくりさせるページ。精神的ブラクラみたいな。

259 ：Name_Not_Found：05/03/16 16:03:32 ID:???

ﾜﾛﾀｗ

258　被害妄想激しすぎ

260 ：Name_Not_Found：05/03/16 16:13:15 ID:???

そうか? 音量でかいとびびらん?

261 ：Name_Not_Found：05/03/16 16:16:44 ID:???

慣れていないだけかと思われ。
で259は毎日こんなのに引っ掛かって慣れている。

262 ：Name_Not_Found：05/03/16 16:19:43 ID:???

なんだ音出るページなのか

263 ：Name_Not_Found：05/03/16 16:24:08 ID:???

普通のサイトだと思って開いちまったじゃねええかああああああ
ｸｿｯ、久しぶりだ。

264 ：Name_Not_Found：05/03/16 16:26:45 ID:???

大漁のようで

265 ：Name_Not_Found：05/03/16 16:43:50 ID:???

俺見たけど「プラグインが必要です」ってブラウザに怒られた

266 ：Name_Not_Found：05/03/16 16:52:42 ID:???

>>252
以下CSS
body {padding:2em;}
.ol {list-style-type:decimal; -moz-counter-reset: -html-counter 0;}
.list {display:list-item;}
.list h1, .list h2, .list h3 {border:1px red solid;}
p {disply:inline;}

以下body内
<div class="ol">
<div class="list">
<h1>hogehoge</h1>
<p>fugafuga</p>
</div>
<div class="list">
<h2>hogehoge</h2>
<p>fugafuga</p>
</div>
<div class="list">
<h3>hogehoge</h3>
<p>fugafuga</p>
</div>
<div class="list">
<h2>hogehoge</h2>
<p>fugafuga</p>
</div>
</div>

267 ：Name_Not_Found：05/03/16 16:56:18 ID:???

>>257
ｲｲ！( ^ω^)

268 ：Name_Not_Found：05/03/16 17:05:36 ID:???

>>253
body {height:100%; overflow:auto;}
を入れると、position:absolute 指定がｆｉｘed指定と同じになる。
もちろん、fixedでも同じ。

269 ：268：05/03/16 17:30:48 ID:???

あっ、失礼。
IE6には fixed がないから absolute だけだね。
後、標準モードにせないかんのかな。

270 ：Name_Not_Found：05/03/16 18:09:09 ID:EtNnT8VH

http://deztec.sakura.ne.jp/x/03/02/design/index.html
このサイトの右上のメニューのように、
スクロールしても位置が動かないボックスを作りたいのですが、
ソースを見ても全然分かりません。
どういうスタイルがそういう動きにしているのか、分かる人は教えてください。

271 ：Name_Not_Found：05/03/16 18:33:47 ID:???

>270
position: fixed;

272 ：Name_Not_Found：05/03/16 18:39:09 ID:???

>>270
>>241と同じような方法っぽい。

273 ：Name_Not_Found：05/03/16 18:44:08 ID:???

じゃばすくりぷと

274 ：268：05/03/16 18:56:17 ID:???

もしかして俺が答えたばっかりじゃないの？

>>270
１．標準モードにする
２．body {height:100%; overflow:auto;}
３．fixしたいブロックを position: absolute; で指定

おそらくIE6のバグなんだろう（ラッキーなバグだ）。
他のブラウザーは position: fixed; にしないとダメみたいだね。

>>241を見ると↓でハックさせてるみたい。

/* 全ブラウザー */
#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;}

275 ：268：05/03/16 19:07:24 ID:???

もしかしてアンダーラインHack を使えば1行ですみそうな。。。

#menu {position:fixed; _position:absolute;　display:block; top:100px; left:10px; width:130px; height:200px;}

276 ：Name_Not_Found：05/03/16 20:02:38 ID:???

* html
WinIEだとこんなものが通用するのか。

277 ：Name_Not_Found：05/03/16 20:20:48 ID:???

>>275
スコアじゃない？

278 ：Name_Not_Found：05/03/16 20:41:48 ID:???

IEは*を知らないのでhtml要素に対する指定だと勘違い
*を知ってるブラウザは、なにかの子孫のhtml要素なんかﾈｰﾖと無視する
ってことか？

279 ：Name_Not_Found：05/03/16 21:21:35 ID:???

fixedって全ブラウザ（最新）対応しているの？

280 ：Name_Not_Found：05/03/16 21:26:21 ID:???

糞なIEの為にみんな苦労してるんだな
すべてM$の怠慢の為に...
M$の会長は左手にうちわ

馬鹿は所詮馬鹿

281 ：Name_Not_Found：05/03/16 21:28:12 ID:???

>>275
それだと、多分Operaも認識しちゃうんじゃ？

282 ：Name_Not_Found：05/03/16 21:29:08 ID:???

糞なIEのために苦労しているんではない。
お客,金のために苦労している。

283 ：Name_Not_Found：05/03/16 21:43:09 ID:???

とか、使ってるけど。

284 ：Name_Not_Found：05/03/16 21:44:16 ID:???

なにそれなにそれ

285 ：Name_Not_Found：05/03/16 22:04:52 ID:???

別ファイルじゃなくて
htmlファイルにcssを書いてるってことか？

286 ：283：05/03/16 22:08:55 ID:???

IEは

これの中身をコメントとして呼び飛ばさない。versionとかも指定できたはず。（IE5とかIE6とか）

で、”まとも”なcssは別ファイルで書いといて、IEのバグに対処する部分をHTMLの方に
このコメントもどき（IE以外じゃコメント）で上書きしてる。

287 ：Name_Not_Found：05/03/16 22:09:55 ID:???

×呼び飛ばす
○読み飛ばす

失礼。

288 ：Name_Not_Found：05/03/16 22:39:41 ID:???

p {float:left;}

<div style="background:#ddd;">
<p>ほげほげ</p>
<p>ほげほげ</p>
<p>ほげほげ</p>
<br style="clear:both;" />
</div>

こう言うbrの使い方ってあんまり良くない？

289 ：Name_Not_Found：05/03/16 22:49:13 ID:???

よくないけどしょうがない

290 ：Name_Not_Found：05/03/16 22:49:40 ID:???

理由があってきちんと表示されるなら良いと思うけど

291 ：Name_Not_Found：05/03/16 22:50:28 ID:???

>>286
ここはIEのスレはありません。
>>288
論外

292 ：Name_Not_Found：05/03/16 23:06:20 ID:???

すごく初歩的なことなんだろうと思うんですけど
一応cssなのでここで質問させてください。

画像にリンクを設定して、枠線（1px）を表示して
オンマウスでその枠線の色が変わるようにしたいだけなのですが、
うちの環境（Mac + IE or NN）では↓のソースで表示できるのに
Windowsでは枠線の色が変わらないのです。
どちらでも同じように、オンマウスで枠線の色が変わるようにする
方法はないでしょうか？教えてください。

<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>

<body>
<a href="#"><img src="01.jpg" width="80" height="80" alt=""></a>
</body>
</html>

293 ：Name_Not_Found：05/03/16 23:40:30 ID:???

>>292
aにボーダーをつけて、その色をborder-colorで変えればいいのでは？

294 ：Name_Not_Found：05/03/16 23:42:37 ID:???

colorでなくborder-colorでやればできると思うぞ

295 ：292：05/03/17 00:20:42 ID:???

>>293
a:link { border : 1px solid : #000000 ;}
a:hover { border : 1px solid : #FF0000 ;}
にしてみました。Win、Macともにダメでした～。

>>294
img { border-style : solid ;
border-width : 1px ;}
a:link { border-color : #000000 ;}
a:hover { border-color : #FF0000 ;}
にしてみました。やっぱりWin、Macともにダメでした～。

>>293-294　ありがとう。指定の仕方が間違ってたら教えてください。
うち一応Mac・Win両方あるのですぐに試せます。
ただ私の中にアイデアとか知識とか選択肢がないのです。

Macでは、単にa { color }でカラーを指定しておけば
枠線にも適用されるんですけど、Windowsは適用されないんです。
すごい単純なことのように思うんですけど……。

296 ：Name_Not_Found：05/03/17 00:30:42 ID:???

セレクタが違うな
a img:hover {}とかでやんなきゃダメだよ

297 ：Name_Not_Found：05/03/17 00:31:19 ID:???

ごめん間違った

a:hover img {}

…でできるのか？

298 ：Name_Not_Found：05/03/17 00:34:17 ID:???

>>295
とりあえずこれで Win + IE6 でできたよ。

img{border:0px;}
a:link{border:1px solid #000000;}
a:visited{border:1px solid #000000;}
a:active{border:1px solid #000000;}
a:hover{border:1px solid #ff0000;}

あと、これ↓はおかしいからね。
> a:link { border : 1px solid : #000000 ;}
> a:hover { border : 1px solid : #FF0000 ;}

299 ：292：05/03/17 00:48:44 ID:???

>>296
ありがとう。
a:link img{ border-color : #000000 ;}
a:visited img{ border-color : #000000 ;}
a:hover img{ border-color : #FF0000 ;}
a:active img{ border-color : #000000 ;}
にしたらMacでは枠線の色変わりましたがWinは変化なしでした。

>>298
うちのWin + IE5ではなぜかうんともすんとも言わず枠線も表示されずじまいです……。
ありがとう。おかしいってのはスペースが要らないってことですか？

300 ：Name_Not_Found：05/03/17 00:51:58 ID:???

>>299
a:link { border : 1px solid : #000000 ;}
a:hover { border : 1px solid : #FF0000 ;}

こう↑じゃなくて、こう↓

a:link { border : 1px solid #000000 ;}
a:hover { border : 1px solid #FF0000 ;}

私はブラウザとかOSによる互換性があまりわからないんだよね。ごめん。
わかる人には一発でわかりそうだから、ちょっと待てば教えてもらえるかも……。

301 ：292：05/03/17 00:56:19 ID:???

>>300
ハァッ！ありがとう。わかりました。恥ずかしいなあ。
今夜中に解決しなければいけない問題でもないので
いろいろ試しながら気長に待つことにします。どうもありがとう。

302 ：Name_Not_Found：05/03/17 02:57:13 ID:???

え　>>300のやり方でもできなかったの？

303 ：Name_Not_Found：05/03/17 03:59:02 ID:???

多分、クラス付けとかしないとできないよ。
a:hover imgとかのセレクタはIEじゃ対応してないからね。

304 ：Name_Not_Found：05/03/17 07:38:07 ID:LdHXf7H/

日本電子専門学校のサイトを参考にしているんだけど、
ttp://www.jec.ac.jp/
どうして、ＭａｃＩＥだけハックしているのか分からない。

305 ：Name_Not_Found：05/03/17 12:27:23 ID:???

>>303
うそは駄目。
だいたい何で>>292はＦＡＱのＡ９（>>10）も読まずに質問してるのかな。
ＩＥ５なんて古いのは試せないが、ＩＥ６でも
A:hover IMG {border:1px solid #f00;}
で出来てるよ。

306 ：292：05/03/17 14:14:31 ID:???

>>305
>>10読みましたよ。
あと事実うちのWinにはIE5が入ってるし、全員がIE6使ってるわけではないから
出来る限り多くのバージョンに対応したいと思うことがそんなにいけないことですか。
あなたの出してくださった例に関しては>>299で実践済みです。

307 ：292：05/03/17 14:24:03 ID:???

↑間違いました。>>299「のあと」で実践済みです。
IE5ではオンマウスでも色が変わらないです。Macでは変わるんですが。

JavaScriptで解決する方法があるらしいので
ttp://www.gac.jp/article/index.php?stats=question&command=msg&category=3&id=3542
そっちを使うことにします。どうもありがとうございました。

308 ：Name_Not_Found：05/03/17 14:24:48 ID:???

>>>10読みましたよ。
それなのに、なんでcolorなんかで指定して、borderを使ってなかったわけ？
読んでも理解できなかったのかな。

309 ：Name_Not_Found：05/03/17 14:26:50 ID:???

>>306
セキュリティーの問題があるからIE5なんてヴァージョン・アップしなくちゃダメ。
インライン要素へのborder指定などが有効なのはIE5.5からだし。

310 ：Name_Not_Found：05/03/17 14:27:45 ID:???

あと事実うちのWinにはIE5が入ってるし、全員がIE6使ってるわけではないから
出来る限り多くのバージョンに対応したいと思うことがそんなにいけないことですか。

311 ：292：05/03/17 14:28:26 ID:???

>>309
ハァッ！ありがとう。わかりました。恥ずかしいなあ。

312 ：Name_Not_Found：05/03/17 14:30:50 ID:???

CSS対応表（>>7）も見てないのかい。

313 ：Name_Not_Found：05/03/17 14:54:43 ID:???

できたら、教えてね
オレも解らなかったから

314 ：Name_Not_Found：05/03/17 15:01:38 ID:???

何を？ >>313

315 ：Name_Not_Found：05/03/17 15:12:00 ID:???

オンマウスで線の色が変わる方法

316 ：Name_Not_Found：05/03/17 15:17:18 ID:???

>>315
とっくに既出だが？
a:hover img {border:1px solid #f00;}

317 ：Name_Not_Found：05/03/17 15:20:48 ID:???

>>292
IE6だと両方出てしまうけど、両方書けばIE5でもできたよ。

img {
border : 1px solid #000 ;
}
a {
border : 1px solid #000 ;
}
a:hover {
border : 1px solid #f00 ;
}
a:hover img {
border : 1px solid #f00 ;
}

318 ：Name_Not_Found：05/03/17 15:23:51 ID:???

「両方出てしまう」とは、何が？

319 ：Name_Not_Found：05/03/17 15:37:35 ID:???

すまそ、IE6だとimgとaのボーダーが両方でているので、
ボーダーが2pxに見えませんか？IE5だとOKです。

320 ：Name_Not_Found：05/03/17 15:46:40 ID:???

>>319
うん、IE6だとそうなる。で、2pxのうち内側のaのボーダーだけ色が変わる。
で、imgのボーダーを0pxにするとIE6以外ではボーダーが全く見えなくなる、のかな？

321 ：320：05/03/17 15:47:27 ID:???

まちがえた

×　内側のaのボーダー
○　外側のaのボーダー

322 ：Name_Not_Found：05/03/17 15:49:38 ID:???

>>317
a {
border : 1px solid #000 ;
}
ではなく
a img {border:1px solid #000;}
か
a:link img, a:visited img {border:1px solid #000;}
にすべきなんだよ。

323 ：Name_Not_Found：05/03/17 15:53:52 ID:???

>>320
>で、imgのボーダーを0pxにするとIE6以外ではボーダーが全く見えなくなる、のかな？
は？　何でＩＥ６が？　「NN4以外では」の誤りでは。

324 ：Name_Not_Found：05/03/17 15:58:52 ID:???

簡単そうでなかなか難問だったんだな。

325 ：Name_Not_Found：05/03/17 15:59:54 ID:???

>>317
a:link img, a:visited img {border:1px solid #000;}
a:hover img, a:active img {border:1px solid #f00;}
で、沢山だよ。
それでうまくゆかなかったら、他に変な指定をしてるから。

326 ：Name_Not_Found：05/03/17 16:00:47 ID:???

>>324　回答者の程度が下がっただけでしょ。

327 ：Name_Not_Found：05/03/17 16:04:48 ID:???

>>323
ごめんまちがえた。
でも、少なくともIE6で>>298の方法で見れるのは確か。

328 ：Name_Not_Found：05/03/17 16:08:49 ID:???

>>326
お前が言うなよ

329 ：Name_Not_Found：05/03/17 16:17:06 ID:???

>>327
だからさ、>>298のやり方が駄目なのは、
アンカーの中のimgではなくアンカーに対してborderを設定してるから。

330 ：Name_Not_Found：05/03/17 16:19:33 ID:???

>>329
じゃあ>>325のやつで全ブラウザ対応＆解決ってこと？

331 ：Name_Not_Found：05/03/17 16:21:36 ID:???

ＮＮ４以外は。

332 ：Name_Not_Found：05/03/17 16:26:54 ID:???

>>320-322
a img {border:1px solid #000;} の方がいいですね。IE5でもOKです。

>>325
サンx。なぜかIE6とIE5両方ともhoverが効かないです。バグですかね？

333 ：Name_Not_Found：05/03/17 16:30:39 ID:???

×a img {border:1px solid #000;}
○a img {border:1px solid #000;} とボーダーを0pxにする

334 ：Name_Not_Found：05/03/17 17:03:05 ID:???

>>332
擬似クラスにスタイル指定がないと擬似クラスの子孫要素への指定が効かない(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b077.html
だから、下記の通りすれば、効く。
a:hover {background: transparent;}
a:link img, a:visited img {border:1px solid #000;}
a:hover img, a:active img {border:1px solid #f00;}

335 ：Name_Not_Found：05/03/17 18:14:45 ID:???

http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/syntax.html
このページのテーブルは、マウスが乗ると色が変わるのですが、
こういうのはどうやるんですか？

336 ：Name_Not_Found：05/03/17 18:25:17 ID:???

>>335
tdやtrのhoverがつかえるUAならそれで。
駄目ならJavaScriptで。

337 ：Name_Not_Found：05/03/17 18:36:01 ID:???

>>335　なぜソースも見ずに訊くのですか。

338 ：Name_Not_Found：05/03/17 18:44:08 ID:???

>>334

効いたです。BLAVO！

339 ：Name_Not_Found：05/03/17 18:56:20 ID:???

>>335

カーソルが乗ると　　色が変わるよ

って組んであるから

340 ：Name_Not_Found：05/03/17 20:10:11 ID:???

>>339
「どうやるのか」を聞いてるのに、
「どうしてそうなるのか」に答えてる。

それは違うだろ。

341 ：Name_Not_Found：05/03/17 20:13:25 ID:???

うん、違うね。つぎぃ。

342 ：Name_Not_Found：05/03/17 20:25:09 ID:???

□□□
□□□■
□□□■
　 ■■■

上の図がずれていないといいんですが。

すみません。上記のようにboxに影をつけることはCSSでは可能でしょうか。
boxと同サイズで背景が黒のboxを用意して、positionをずらして配置すればいいというのは
分かるのですが、それだと、boxの大きさに合わせて毎回指定しなければなりません。

私がこのデザインを見たことのあるサイト様では、tableタグを使用していましたが、
表でもないものにtableタグを使用することに違和感を感じてしまいます。

自動的に上のboxのサイズを読み取って、下の影のboxのサイズも決定できるような
方法と言うのはありますでしょうか？

343 ：Name_Not_Found：05/03/17 20:31:41 ID:???

>>342
背景画像を使ってみたらどうか。
ボックス自体の右にパディングを入れて、そこに背景画像として、右側の影を入れる。
その下にヘッダーとかなんとか言ってボックスを設けて、
そいつの背景画像を、下の影にすればいいのでは。

□□□
□□□■
□□□■
□□□■

　 ■■■
□□□

344 ：Name_Not_Found：05/03/17 20:43:26 ID:???

脳内だが、この方法はどうだ？
影になるボックスの中に本文のボックスを入れる
そして、右上や左下の影がないところは違うボックスを入れて、影ボックスの背景を隠す。
paddingを使えばいけそうだが、ﾑﾘああるか・・・・

345 ：Name_Not_Found：05/03/17 20:56:22 ID:???

divで囲んでそのdivにborder-rightとborder-bottomをつけるやり方じゃダメなん？

346 ：292：05/03/17 21:00:06 ID:???

>>334
神様！ありがとう！感謝します。出来ました。

みなさん考えてくれてどうもありがとう。途中キレてごめんなさい。
あと>>311は騙りです。わかると思うけど一応書いておきます。

>>308
>なんでcolorなんかで
うちのMacではその指定で思い通り表示できるからですよ。
292で書き込む前にborderもテストしてたんですが、
説明するのに一番手間取らなくて済みそうな書き方が292だったので。
クラス分けしてでもcolorで指定できればそれが一番ややこしくないと思ったので。
>>306
うちのWinは今は常時オフラインなのでIE5は動作確認用に取っておきます。
最新版をインストールしてるとは限らない人をターゲットにした
ページを作っているので。心配してくれてありがとう。

結局>>334の方法以外は全部Win、Macのどちらか、あるいは両方がダメでした。
>>325さんごめんなさい。他に変な指定はしていませんがやっぱりそれではダメでした。
ありがとうございました。

347 ：342：05/03/17 21:16:46 ID:???

皆様アドバイスありがとうございます。

>>343
boxを上下に分割して、影を画像として扱うのですね。
画像で処理をするというのは考えていませんでした。参考になります。

>>344
私も最初はそう考えました。
が、生半可にしか勉強していない頭からいい書き方が生まれてくるはずもなく。
floatをうまく使えばいけるのかなぁと思ったのですが。。。

>>345
その方法だとboxの右と下の端から端までborderが描かれることになってしまいます。
borderの幅が小さければいいのですが、大きくすると不自然になってしまうのです。

343様が提案してくださったように、画像を使って一度創ってみたいと思います。
皆さん色々な意見ありがとうございました。

348 ：Name_Not_Found：05/03/17 21:46:25 ID:???

>>347
昔、こんな↓案があったね。
まぁ、参考程度に。

<html>
<head>
<style type="text/css">
.shadow
{
background:#999;
width: 100px;
}

.light
{
padding: 5px;
background:#fff;
border: 1px solid black;
position:relative; left:-7px; top:-7px;
}
</style>
</head>

<body>
<div class="shadow">
<div class="light">ボックス</div>
</div>
</body>
</html>

349 ：Name_Not_Found：05/03/17 22:06:32 ID:???

>>346
線（border）なのにcolorで何とかしようって、その発想がどうかしてるのよ。

350 ：Name_Not_Found：05/03/17 22:15:45 ID:???

border-colorの初期値はcolorの指定値だがね

351 ：Name_Not_Found：05/03/17 22:32:00 ID:???

>>349
結局わからなかったオカマが偉そうに何を言うか

352 ：Name_Not_Found：05/03/17 22:41:55 ID:???

325＝334＝349

353 ：342=347：05/03/17 22:43:58 ID:???

おおお！　まさにイメージしたとおりのレイアウトです。
ありがとうございます。

先に影となるboxを書いてから、相対位置を左上にとって本命のboxを書くのですね。
負の値で位置を指定することは、全然思いつきませんでした。
目から鱗が落ちた思いです。勉強になりました。

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

354 ：Name_Not_Found：05/03/18 10:29:31 ID:???

質問でーす。
bodyにリンクの色を定義して、　あるクラスの中で例として<b>タグを使うとする。
<b>以外のリンクはbodyのリンク色になる。<b>にbodyとは違うリンクの色を定義したんだけど。
反映されなかった。でもリンクの色じゃなくてcolor指定なら変わった。
bとかstrongにリンク色定義するのは無駄無駄無駄仕様？
***.css
a:link{
color: #------
}
(visitedとhoverも書いて)
.class b a:link{
color: #------
}
(visitedとhoverも書いて)
これだとb文字のリンクした色がbodyになったので.class b{ color: #------ }に変えたら
色は変わったので一応間違ってないと思う。　誰か教えてえろい人

355 ：Name_Not_Found：05/03/18 10:54:01 ID:???

何いってるかわからんよ。

356 ：354：05/03/18 11:31:27 ID:???

>>355
…（´Д｀;）　多分これで解ると思う。

<table border="0" cellpadding="0" cellspacing="0" width="300" class="abc">
<tr>
<td><a href="1">テスト</a><p><a href="2"><b>テスト２</b></a></p>
</td>
</tr>
</table>
ちょっと略したけど…これで表に通常文字と太文字が入ってる状態。
↓***.ccs↓
a:link{
color: #0000ff　←青
}
a:hover{
color: #ff0000　←赤
}

.abc b a:link{
color: #008000　←緑
}
.abc b a:hover{
color: #ff8000　←オレンジ
}

こうしたら表の中の「テスト」のリンクの色は青、onで赤。
<b>タグで定義されてる「テスト２」のリンクの色は緑、onでオレンジじゃない？
でも色は青と赤のリンクだった。
「.abc b a:link」ってのが間違ってるのかな？って思って「.abc b」にしてみたら
色が変わったから多分間違ってる書き方ではないよね？
だから<b>や<strong>タグ等に合わせてリンク色指定しても色が変わらない仕様なのかな？って聞いてる質問だった。。(最初からこう書けばよかったな…orz
あと仮に仕様だとして　どういう回避法で同じ見方に出来るかな？　出来るだけバイトは食いたくないんで一個一個リンク色決める方法はちょっと…(´；ω；｀)

357 ：Name_Not_Found：05/03/18 11:38:29 ID:???

>>356
.abc b a:link は class="abc"の中の<b>の中の<a>なんだから、
提示されたHTMLソースにそんな場所無いじゃん。
テスト２の部分は .abc a:link b だろ。

358 ：354：05/03/18 11:47:46 ID:???

>>357
ぉ。　ホントだ…　.abc a:link b　でやったら出来た。。
ちゃんと順番があったのか…orz　知らなかったorz
ホント　ありがとぉ。

359 ：Name_Not_Found：05/03/18 11:48:35 ID:???

>>354でbody bodyと連呼しているがbodyの指定なんかどこにも無いのな。

360 ：354：05/03/18 11:57:06 ID:???

>>359
クラス定義の中に入ってるのがクラスごとのソースって思ってて
それ以外の　いきなり「a:～」とか「strong:～」から始まるのは全部bodyの部分だと解釈してるんだけど…
違うかな？(´･ω･`)

361 ：Name_Not_Found：05/03/18 11:59:54 ID:???

body body bodyに清き一票を・・・

362 ：Name_Not_Found：05/03/18 12:24:39 ID:???

>>360
確かにHTMLのスタイル指定なら、普通の場合はbodyの子孫ではあるなぁ。
でも、CSSにおいてはすべての要素は平等だから、bodyだけ特別扱いされるのも困る。

a{...} は <a> に。strong{...} は <strong> に指定しているのであって、
aのスタイルを指定するのにbodyは関係ないし、bodyにはリンク色など無い。
というか仕様書とか読んでCSSの書き方勉強した方がいいかも。

363 ：354：05/03/18 12:49:37 ID:???

>>362
なるほど。　前者に言ってた全部bodyってのは　まぁ当たってるけど(?)。
もっとよく掘り下げて考えてみると362さんが言ってるのが深くて正しいね。

仕様書は…色々言語とかやってるけど全部独学だから多分コマコマしたところは読まない主義なのかも…orz（駄目
でもまぁこの議題に措いては362さん(357さん)の観点から見れるようになれました。

あぁ…あと最後にいいかな…orz
ナローバンドじゃないから解らないんだけど。cssインクルードするのとHTMLに直接埋め込んでおくのとじゃ　前者の方がちょっとは早く読めたりするのかな？(´･ω･`)

364 ：Name_Not_Found：05/03/18 13:04:44 ID:???

>>363
ファイル分けると、キャッシュに期待できるから。
その分だけ。

365 ：Name_Not_Found：05/03/18 15:05:50 ID:cl2Xdpqc

スタイルシートの設定のところ
.mozinoookisa150{font-size:150px}

本文
<div class="mozinoookisa150"><br></div>
でたくさんの空白行を作っているのですが、

下みたいなやり方とどっちが文法的にはよいのでしょうか？
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

366 ：Name_Not_Found：05/03/18 15:17:12 ID:???

>>365
おもしろいね君

367 ：Name_Not_Found：05/03/18 15:27:28 ID:cl2Xdpqc

かなり真面目に作ってるんですが、こういうスタイルシートの使い方はヤバイとかあるのでしょうか。
他のブラウザで見ると表示がくずれるとか。
もしそうならばすぐにでもやめたいと思いますが、
ちょっと文法的にまずいぐらいなら使っていきたいと思うので。

368 ：Name_Not_Found：05/03/18 15:30:49 ID:???

どうでもいい質問なんだけど
<STYLE type="text/css"></STYLE>
みたいにstyleの内側をコメントでくくるのって厳密には文法違反だったりしない？

369 ：Name_Not_Found：05/03/18 15:33:34 ID:???

適当な文字列　：　ほげほげ
適当な文字列２　：　たらたら

こんなのをコロンの水平位置をそろえたい（table使うみたいに）

適当な文字列の長さはまちまち。
字の大きさを変えても表示は崩れない。
各々１行で表示。
縦をまとめてdiv辺りで括れば良いんだろうが、文書構造的に…なので。

こんな条件で、どうすれば良いか教えてくださいな。

370 ：Name_Not_Found：05/03/18 15:35:52 ID:???

>>367
空白を空ける前後のブロック要素にmargin-bottomなり、margin-topなりを指定すれば済む。

371 ：365：05/03/18 15:48:45 ID:???

そのブロック要素がどこにも無くて困ってます。

スタイルシートの設定のところ
.mozinoookisa150{margin-top:150px}

<div class="mozinoookisa150"></div>
こっちの方がいいのかな。

372 ：Name_Not_Found：05/03/18 16:11:36 ID:???

>>371
何でブロック要素がどこにも無いんだ？
インラインの途中なら前後の文章をdivで囲ってmarginが一般的かと。

インライン要素の途中で空間開ける必要性があまりわからんけど。

373 ：Name_Not_Found：05/03/18 16:13:36 ID:???

>>369
dlとdtとddで。

374 ：Name_Not_Found：05/03/18 16:28:02 ID:???

>>373
いや、それだけじゃ無理だろ。

>>369
これは、漏れもやりたくて悩んだが結局出来なかった。
マージンを固定するしかないような希ガス。

dt { width:8em; float: left }
dd { margin-left: 8em }
<dl><dt>適当な文字列</dt><dd>：　ほげほげ</dd></dl>
<dl><dt>適当な文字列２</dt><dd>：　たらたら</dd></dl>

それでもブラウザ縮めたら↓こうなる罠。
適当な文字列２　：　たらた |
　　　　　　　　　　ら　　　　　 |

誰か出来た人いたら例をplz.

375 ：Name_Not_Found：05/03/18 16:50:21 ID:???

dl { white-space :nowrap }
じゃダメ？

376 ：Name_Not_Found：05/03/18 16:58:59 ID:???

>>374-375
width:8em　の段階で、＞適当な文字列の長さはまちまち。　に対応できないような。
長いの来たらどうする？

377 ：373：05/03/18 16:59:58 ID:???

>>374
スマソ。
普段は、dlなりその親の幅を固定して、
dtの右端か、ddの左端に、background-imageでコロンを置く。

このコロンは性格的にリストのマーカーと同じものなので、
contentを使うのは無理、という判断からです。

378 ：Name_Not_Found：05/03/18 17:30:26 ID:???

>>374
dt { margin: 0; padding: 0; display: block; float: left; clear: left; width: 25%; }
dd { margin: 0; padding: 0; display: list-item; float: right; clear: right; width: 50%; list-style-image: url("colon.png"); }

とか。
colon.pngは:を画像にしたもの。

IEなどをシカトするなら素直に
dd:before { display: marker; content: ":"; }
とか。

またはdisplay: tabell-cell;を駆使するというのでも良さげ。

379 ：Name_Not_Found：05/03/18 17:32:42 ID:???

tebellってなんだおい

380 ：Name_Not_Found：05/03/18 17:40:21 ID:???

>>369
tableでやれ、それは”表”だ。

381 ：Name_Not_Found：05/03/18 17:48:43 ID:???

ハゲドウ

382 ：Name_Not_Found：05/03/18 18:18:29 ID:???

もう、表すらもテーブルで作りたくないとこまで
行っちゃってるんだね

383 ：Name_Not_Found：05/03/18 18:26:10 ID:???

いや、たんなるアホかと・・・

384 ：Name_Not_Found：05/03/18 18:37:04 ID:???

スレによって同じことをしてもアホと呼ばれたり呼ばれなかったりするのがこの板の困ったところです。

385 ：Name_Not_Found：05/03/18 18:54:19 ID:revYUrWO

先生！教えてください。

画面中央に高さ100%のボックスを置きたいのです。
以下のようなソースで、一見成功なのですが、
内容テキストの量が増えて、ブラウザの高さをはみ出すと（スクロールすると）、
Mac Safariでは背景のグレーが初期表示されている箇所以降表示されません。
内容テキストが増えたら、ボックス"main"の高さも一緒に増えて欲しいんです。

何か良い方法ご存知ありませんか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html4/loose.dtd">
<html>
<head>
<style type="text/css">
HTML,BODY { height:100%; }
.main { height:100%; width:500px;background-color:#cccccc;
　　　　margin-left:auto; margin-right:auto;}
</style>
</head>

<body>
<div class="main">
<p>内容テキスト</p>
<p>内容テキスト</p>
<p>内容テキスト</p>
</div>
</body>
</html>

386 ：Name_Not_Found：05/03/18 19:12:56 ID:revYUrWO

>オレへ

これじゃないかな
http://www.mozilla.gr.jp/standards/webtips0020.html

387 ：Name_Not_Found：05/03/18 19:30:00 ID:???

告知
developer.kde.org
> KHTML: Complete CSS 2.1 support
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━ｯ!!

388 ：Name_Not_Found：05/03/18 22:32:40 ID:???

>>371
とりあえず、空白入れたい所の前後を<div>でくくる。

.mozinoookisa150{margin-top:150px}

<div>
　・
　・
　・
</div>
<div class="mozinoookisa150">
　・
　・
　・
</div>

389 ：Name_Not_Found：05/03/18 23:41:00 ID:???

>>368
HTMLでは全然文法違反じゃない。
ただしXHTMLでは「」でくくられた部分が無視されてもおかしくはない。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#comments

390 ：Name_Not_Found：05/03/19 05:31:28 ID:???

Ｗ３Ｃﾏﾝｾｰな人が作るサイトって>>389の参照先みたいなのが多いよなぁ…。
デザインセンスの欠片もない…。

391 ：Name_Not_Found：05/03/19 06:31:21 ID:???

リファレンスサイトのデザインが凝りまくってたほうがいい
という超絶センスの持ち主がいるスレはここですか。

392 ：Name_Not_Found：05/03/19 07:20:47 ID:???

自称「デザインセンスのあるサイト」は大概字が小さかったり幅固定だったりして読みづらい
(もちろん全部がそうだと言ってる訳じゃない)

見た目だけじゃなく、ユーザビリティとか色々なことに気を遣った総合的な「デザイン」をやってもらいたい

393 ：Name_Not_Found：05/03/19 09:07:07 ID:???

でも実際よくあるよな、事象HTML講座やってるくせにJavascript切ってるだけでびくとも動かないサイトとか

394 ：Name_Not_Found：05/03/19 14:05:15 ID:???

>>391
どうせなら凝ればいいのにと思う。
正直>>389のサイトは見づらいと思うし。

395 ：Name_Not_Found：05/03/19 15:26:41 ID:???

>>394
凝りに凝ってあっさりと・・・

あんたの言う凝ったのは厨予備軍になりそう

396 ：Name_Not_Found：05/03/19 15:38:47 ID:???

>>389のサイトに何か違和感を感じる、見やすいけど見にくい、みたいな。

397 ：Name_Not_Found：05/03/19 16:41:01 ID:???

>>396
hrとかh2やh3にborderを使ったサイトを見慣れてると
パッと見みづらく感じるのだと思う。

398 ：Name_Not_Found：05/03/19 17:19:58 ID:???

デザインセンスがあればデザイナーになっとるわい

399 ：Name_Not_Found：05/03/19 18:51:01 ID:???

俺、自称デザイナー　　ﾊｼﾞｶｼﾊｼﾞｶｼ

400 ：Name_Not_Found：05/03/19 22:06:45 ID:???

390-399
オマエらスレ違い

401 ：Name_Not_Found：05/03/19 22:35:58 ID:???

>>392
自称WEBデザイナーは、「デザイン」の勉強なんか
したことない奴が大多数なので
「デザイン＝見た目がすべて」だと信じて疑わない連中。

402 ：Name_Not_Found：05/03/19 22:56:35 ID:???

自称じゃなくても、見た目しか考えないデザイナー多いような・・

403 ：Name_Not_Found：05/03/19 23:17:11 ID:???

デザイナーって名刺作っちゃった。
でも、恥ずかしくて使えない。

404 ：Name_Not_Found：05/03/19 23:54:00 ID:???

見た目しか気にしないお客もいる。

405 ：Name_Not_Found：05/03/20 00:14:53 ID:???

最近、自作スクリプトでHTMLを吐くようになったら、
CSSの便利さが今まで以上に分かるようになった。
しかし、IEの糞さが今まで以上に響く。。。
（見た目だけのために、スクリプトを書き換えるの万度ry）

406 ：Name_Not_Found：05/03/20 01:44:01 ID:uiP3qfBG

IE6で、ＨＴＭＬファイルに
<div id="topframe">
<img src="img/topframe.png" width="800" height="100">
</div>
というタグを入れて、cssファイルに
#topframe{
background-color:#FF0000;
width:800;
height:100;
margin:0px;
padding:0px;
}
という、命令をいれました。
うまく、画像だけ表示すればいいのですが、なぜか画像に下に赤い余白がでてしまいます。
これを防ぐ方法はないでしょうか？

407 ：Name_Not_Found：05/03/20 03:35:17 ID:???

>>406

<div id="topframe">
<img src="img/topframe.png" width="800" height="100">
</div>

この部分の改行をなくして詰めてみてはいかがか

408 ：Name_Not_Found：05/03/20 10:07:42 ID:JDKULTH5

>>407
div使うと自動的に改行はいりますが、spanなどのタグに変えるということですか？

409 ：Name_Not_Found：05/03/20 10:15:34 ID:???

>>408
#topframe {
background-color: #FF0000;
width: 800px;
height: 100px;
margin: 0;
padding: 0;
}

410 ：Name_Not_Found：05/03/20 11:41:40 ID:???

>>408
<div id="topframe"><img src="img/topframe.png" width="800" height="100"></div>

411 ：Name_Not_Found：05/03/20 13:19:03 ID:???

position: relative;で位置を調整しているブロック要素にz-indexを指定しても前後が変わりません。
これはこうゆう仕様なのですか？
それとも私の記述におかしなところがあるのでしょうか？？

412 ：Name_Not_Found：05/03/20 13:47:11 ID:???

class と id を指定する時に
名　前　に　悩　む　
のは織れだけ？

413 ：Name_Not_Found：05/03/20 13:50:53 ID:???

>>411の便乗質問ですが、下記サイトは何故、position: relative; を使ってるのですか？

http://www.stunicholls.myby.co.uk/layouts/3cols.html

414 ：Name_Not_Found：05/03/20 14:42:40 ID:???

>>413
ソース見てないからわかんないけど、その下位にpodition:absolute;でもあるんじゃねーの？

>>411
そのブロック要素にテキストフォームとか入ってんじゃねーの？

415 ：Name_Not_Found：05/03/20 19:47:14 ID:???

>>401
WEBデザイナーに限らないよ。
パッと見だけはカッコイイけど、
使ってみると激しく使いづらい、なんて物は巷にあふれてる。
artistとdesignerの違いが「デザイナー」にはわかってないんだよ。

最近近所の駅前ロータリーがどっかの有名デザイナのデザインで新しくなったが、
使いづらいなんてものじゃない。自分で歩いたり、車とか自転車に乗って
使ってみろバカ！と言いたい。おかげで毎朝渋滞だボケ！

416 ：Name_Not_Found：05/03/20 20:24:24 ID:???

しみません。

417 ：Name_Not_Found：05/03/20 20:33:53 ID:???

>>10
http://kobit.info/
閉鎖してるよ。

418 ：Name_Not_Found：05/03/20 20:43:34 ID:???

ブロック要素を横に３つ並べて左から、200px,残り全部,200pxとしたいのですが、
真ん中を%指定するとバランスが崩れてしまいます。
どんな横幅でもwidth: 100%;で表示したいので、絶対値で指定はしたくありません。
どのように指定すれば、うまく表示されますか?

http://slashdot.jp
(テーブルで実装されています。)

419 ：Name_Not_Found：05/03/20 20:46:00 ID:???

宣伝かい！

420 ：Name_Not_Found：05/03/20 21:38:49 ID:c6fxaSfO

質問。

CSSの勉強をしてるんですけど、実際あるサイトのソースを
見ようと思ったら、CSSは別ファイルになってることがほとんどですよね。
みなさんはそのCSSファイルをどうやって閲覧・ダウンロードしているんですか？

私は他に方法を知らないので、わざわざローカルで
そのCSSファイルにリンクするHTMLを打って、右クリックで保存しているのですが……。

421 ：Name_Not_Found：05/03/20 21:42:26 ID:???

>>420
自動巡回ソフト使えば全部ローカルに保存されるじゃん。
ファイル＿名前をつけて保存　でもいいし。

422 ：Name_Not_Found：05/03/20 21:51:21 ID:???

おれは普通にサイトのソースを見て、cssのアドレスをコピペしてるけど

423 ：420：05/03/20 21:52:20 ID:???

……すいませんでした。
普通にブラウザでCSSファイルって見れるんですね。
今の今まで知らなかった。何となく見れないと思い込んでました。
ごめんなさい。>>420は忘れてください。

424 ：Name_Not_Found：05/03/20 23:06:49 ID:???

>>407
>>410
ｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━ !!!!!
ありがとうございます。
>>409
px抜かすとなにか違うのですか？(´・ω・｀)

425 ：Name_Not_Found：05/03/20 23:11:28 ID:???

>>424
CSSをちゃんと書くなら単位は必須だよ。

426 ：Name_Not_Found：05/03/20 23:22:42 ID:???

０に単位はいらん

427 ：Name_Not_Found：05/03/20 23:27:34 ID:???

>>423
このサイト↓にあるソフトであなたに役立つものがあるかもね。

CSS Peeper
http://pasokon-yugi.cool.ne.jp/freeware/

428 ：413：05/03/20 23:28:48 ID:???

>>414
それが podition:absolute; ないんですよ。

429 ：Name_Not_Found：05/03/20 23:38:02 ID:???

>>420
FireFoxでも入れるとよろし。
インストール時にカスタムインストールでDOMインスペクタってのを入れると、非常に勉強になる。

さらに、ttp://www.infoaxia.com/tools/webdeveloper/index.html　こいつも入れると
これも勉強に役立つだろう。

430 ：Name_Not_Found：05/03/21 00:04:49 ID:???

431 ：Name_Not_Found：05/03/21 00:17:42 ID:???

原因はわからんがulに背景色設定すればいい

432 ：430：05/03/21 00:39:40 ID:???

>>431
返信ありがとうございます。
liが単色のときはそれでもいいんですが、liを色々いじくって
メニューとして使ったりするとどうも気になってしまうんですよー

table使えばいいんですが<ul><li>のほうがスマートな気がしますし。
それともそういう使い方はあんまり推奨されないもんなんでしょうか？
引き続き回答を希望-

433 ：Name_Not_Found：05/03/21 00:48:09 ID:???

いや、メニューやナビゲーションパネル等に使うのであれば本来それが正しいです。

434 ：Name_Not_Found：05/03/21 01:31:52 ID:pzaTeRcF

<div id="1">
<p>aaaaaaaaaaa</p>
</div>

<div id="2">
<p>aaaaaaaaaaa</p>
</div>

とした時の横幅について質問させてください。

<div id="1">を　width: 100px; float: right; で右に、<body>の marginを各 30px; 、
<div id="1">と<div id="2">の間を10px; 、
残りを<div id="2">で％で左に指定したいのですが、
重なったり、間が開きすぎたりでうまくいきません。

形的には
ttp://www.igorboog.com/
こんな風にしたいのですが・・・

435 ：Name_Not_Found：05/03/21 01:55:14 ID:???

>>434
おそらくだが、そこのページは
BODYの左右マージンが％で指定されているんじゃないか？
そうすれば

body {
margin: 30px ○○%;
}

#1 {
width: 100px;
float: right;
}

#2 {
margin-right: 110px;
}

こんな感じで如何

436 ：Name_Not_Found：05/03/21 02:06:22 ID:???

>>434
関係ないけどID属性値は数字で始められないぜ。

437 ：430：05/03/21 02:11:36 ID:???

>433
ではそのfirefoxのバグ？には目をつむるべきでしょうかね～？
作った本人でなければ、言われないとワカランと言われそうですがどうも気になってしまう。

438 ：434：05/03/21 02:19:27 ID:???

>435
ありがとうございます、ずいぶん長い間悩んでいたんですがあっという間に解決しました。
margin-right: 110px; 　だとなぜか重なったのですが少し数値を増やすと理想の形になりました。
どうもありがとうございました！

>436
忘れてました(w
自分のソースのほうではちゃんと文字で始めてます。

439 ：Name_Not_Found：2005/03/21(月) 07:24:32 ID:???

>>428
それなら今後のことを考えて、自分なりの基準を設けているだけだろ。
以後絶対指定が必要になったときのために。
あんまり深く考えることも無いと思うよ。

440 ：413：2005/03/21(月) 09:51:52 ID:???

>>439
そうですか。
サンクス。

441 ：Name_Not_Found：2005/03/21(月) 13:16:15 ID:???

font size を完全に使わずCSSで指定しようと思うのですが、
文字サイズは前のままを継承したいのです。
font size="-2"であれば、font-size：～%；みたいな対応表ってないでしょうか…

442 ：Name_Not_Found：2005/03/21(月) 13:23:17 ID:???

>441
font-size：xx-small, x-small, small, medium, large, x-large, xx-large
じゃダメなのか？

443 ：Name_Not_Found：2005/03/21(月) 14:08:53 ID:???

%は小さい文字を容赦なく潰す。

444 ：441：2005/03/21(月) 14:35:41 ID:???

>>442
あ、そういうのあったんですね。ありがとう！
%だと、まったく同じにはならないっぽいですね。
ブラウザの文字サイズ変更で同一に拡大縮小しないです。
font size="-1"と同じにしようとしたら、84%と85%の間くらいみたい。

445 ：Name_Not_Found：2005/03/21(月) 18:23:47 ID:???

そんな糞小さい字はやめてくれ

446 ：Name_Not_Found：2005/03/21(月) 19:46:22 ID:???

>>445
-1が「糞小さい字」か？
ブラウザの設定「最小」とかにしてんの？

447 ：Name_Not_Found：2005/03/21(月) 20:26:09 ID:???

解像度1600x1200じゃなきゃ仕事にならんもんでね

フォントサイズは無指定で頼む

448 ：Name_Not_Found：2005/03/21(月) 20:27:56 ID:???

ｵﾏｲの仕事などどうでもいい、

449 ：441：2005/03/21(月) 20:37:14 ID:???

通常使うフォントは無指定にしてます。
注釈的なものや、付加的なものを-1にしてますです。
また、サイズ指定するにしても固定のものは避けてます。
ま、このへんは議論しだすとキリがありませんが。

450 ：Name_Not_Found：2005/03/21(月) 20:38:41 ID:???

>>441
ttp://www.webreference.com/html/tutorial22/7.html
末尾付近の日付に注意。当時は、WinIE5が4を追い抜いた頃。MacはIE4が多かった。
とりあえず、CSSブラウザ＝IEの時代。Geckoを知る人は、この年の秋まで殆どいなかった。
日本でdocument.getElementByIdとか使うと「何それ？」の時代。
また、当時も今も、この手の記事はトンデモだから、目を通すだけにしとけ。

451 ：Name_Not_Found：2005/03/21(月) 22:07:38 ID:???

>>441
ttp://www.ichiro.to/note/fsize

452 ：Name_Not_Found：2005/03/22(火) 21:53:13 ID:???

IEの独自拡張のzoomを使おうとしてるのですが
（諸事情により、閲覧するブラウザはIEに限定されるので）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
<style type="text/css">

</style>
</head>
<body>
<p>ここは通常配置<span>ここは相対配置</span></p>
</body>
</html>

こんな感じで書くと、IE6だとspan要素の内容に拡大が適用されません。
DOCTYPE宣言弄って互換モードでレンダリングさせるとちゃんと拡大されるのですが・・・。
何とかして準拠モードで正しく表示させる方法はないでしょうか？

ちなみに、positionにrelativeではなくabsoluteを指定しても同じ現象が発生します。

453 ：Name_Not_Found：2005/03/22(火) 22:00:26 ID:???

>>444
キーワードでフォントサイズを指定するのは止めてくれ。
IE 以外のブラウザでは、フォントサイズが一回り小さくなってしまう。
（正確には、IE の解釈が間違っているのだが）
できるだけ、% か em で指定しよう。
参考：ttp://blog.livedoor.jp/tanahata/archives/12582293.html

454 ：Name_Not_Found：2005/03/22(火) 22:04:35 ID:???

リンクの下のアンダーラインを点線にするために、

a{text-decoration: none;
border-bottom: 1px dashed;
}

のように書いているのですが、画像の下にも点線が表示されてしまいます。
イメージの下の点線を消すには、どうすればよいでしょう。
教えていただけると嬉しいです。

455 ：Name_Not_Found：2005/03/22(火) 22:41:44 ID:???

>454
a img{
border:none;
}

456 ：Name_Not_Found：2005/03/22(火) 23:01:29 ID:???

Aのボーダーっていってんじゃんアポ

457 ：Name_Not_Found：2005/03/22(火) 23:24:04 ID:???

>>455
困ったことに、!important にしてもそれが効きません。
他の方法があれば教えてください。

458 ：Name_Not_Found：2005/03/23(水) 00:35:28 ID:???

<ul style="float: right">
<li style="float: none"></li>
<li style="float: left"></li>
<li style="float: left"></li>
</ul>
<br style="clear:both">

この記述でOpera7だとleftが無効になり2段に表示されます。
なにか対処法はないでしょうか？

リスト全体は右寄せにし、個々のリストの内2つめ、3つめを1行で表示したいです。
個々のリストも右寄せです。

459 ：Name_Not_Found：2005/03/23(水) 01:21:28 ID:???

？

460 ：Name_Not_Found：2005/03/23(水) 02:32:05 ID:???

>>458
style="float: left"でなくて、style="display:inline;"にしてみるとか。

>>454
その<img>は<a><img></a>と言う形のリンクなんだよね？
それだったら、その<img>の下についてる線は、
実際には<img>でなく、<img>を囲っている<a>に付いてるものだから、
>>455の方法では消せない。
<a>にクラスをふってborder:none;にするか、
style="border:none"を<a>に入れてみる。

461 ：455：2005/03/23(水) 05:52:03 ID:???

あんぽんたんな答えですまんかった。

462 ：Name_Not_Found：2005/03/23(水) 11:14:17 ID:???

質問です。

#box{
margin: 0;
padding: 0;
height: 100px;
}

.left{
margin: 0;
padding: 0;
float: left;
text-align: center;
}
.right{
margin: 0;
padding: 0;
clear: both;
}

<div id="box">
<div class="left">あああ</div>
<div class="right">いいい<br />ううう</div>
</div>

.left、.rightを#box要素に対して真ん中に配置したいのですが、
どうしたらいいのでしょうか…。

よろしくお願いします。

463 ：Name_Not_Found：2005/03/23(水) 11:19:38 ID:???

margin: 0;
padding: 0;

で、真ん中と言われても・・・

464 ：462：2005/03/23(水) 11:41:14 ID:???

>>463

あ…すみません…

.left{
width: 100px;
float: left;
text-align: center;
}
.right{
margin: 0 0 0 100px;
clear: both;
}

でどうでしょうか。
.leftにvertical-align: middle;を指定してみたのですが駄目でした…。

465 ：Name_Not_Found：2005/03/23(水) 12:16:02 ID:???

"ど真ん中"かい！

禿しく外出。過去スレでも当たってください。

466 ：462：2005/03/23(水) 12:58:56 ID:???

http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
↑ は読んだんですけどよくわからなくって…

出来れば教えていただきたいのですが…

467 ：Name_Not_Found：2005/03/23(水) 13:22:58 ID:???

読んで理解出来るようになるまで勉強してください。
　結論は「無理」ということ。

誰でも始めは初心者で解らないことだらけです。
これは煽りではなく、この程度が理解出来ないと
自己満足だけの、自分の環境での「見た目」だけのサイトになりがちだからです。

外見より中身に重点を置きましょう。

468 ：462：2005/03/23(水) 13:25:22 ID:???

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

469 ：Name_Not_Found：2005/03/23(水) 17:13:20 ID:???

質問です。a:hover{～}と同じ感じで、div:hover{～}と指定してもいいんでしょうか？
それはちゃんとブラウザで表示されますか？

470 ：Name_Not_Found：2005/03/23(水) 17:22:19 ID:???

>>469
やってみたらどうなったのか教えれ。

471 ：469：2005/03/23(水) 17:24:37 ID:???

>>470　div:hover{background-color:#～}とやってみたら、当方macなんですが、
ネスケとsafariではちゃんと表示されてました。IEではされませんでした。

472 ：Name_Not_Found：2005/03/23(水) 17:31:03 ID:???

>>471
IEはa以外の疑似クラスは駄目ぽ。

473 ：Name_Not_Found：2005/03/23(水) 17:33:56 ID:???

>>471
答えでてるじゃんかw

474 ：Name_Not_Found：2005/03/23(水) 17:58:31 ID:???

>>462
#box{
display: table;
height: 100px;
width: 100%;
}
.left, .right {
display: table-cell;
vertical-align: middle;
}
.left{
width: 100px;
text-align: center;
}

475 ：Name_Not_Found：2005/03/23(水) 18:24:23 ID:WBwDCGVK

web製作初心者スレでも質問したのですが、問題が解決出来なかったので、こちらでも質問させて頂きます。

HTMLソース：
<div id="block1"></div>
<hr />
<div id="block2">
<div class="block3">
<h2>xxxxx</h2>
<h3>xxxxx</h3>
</div>
</div>

CSSソース：
#block1{float:left; width:500px;}
#block2{margin:0 0 0 520px;}
.block3{position:relative; margin: 0 0 20px 0;}
h2{padding:1em 0 0 0;}
h3{position:absolute; top:0; left:0;}
hr{display:none;}

476 ：Name_Not_Found：2005/03/23(水) 18:27:52 ID:WBwDCGVK

続き

実際の見え方：
[block1]　　　　　[block2]
[block1]　　　　　[h3]xxxxx
[block1]　　　　　[h2]xxxxx

こうなるはずなのですが、画像解像度が1024*764以下になると、h3がblock2を飛び出して、
block1の方に流れていってしまい、h3がblock1の一部と重なってしまいます。

こんな感じ：
[block1]←↓重なってる　　[block2]
[h3]xxxxx
[block1]　　　　　　　　　　　[h2]xxxxx

FirefoxとNN7.1では大丈夫なんですが、IE6.0（もしかしたら5.5かも）で見るとこうなってしまいます。
CSSのバグ辞典でも調べてみたのですが、それらしいものを発見出来なかったので、ここでお聞きしました。
どなたかご教授頂けると光栄です。

477 ：Name_Not_Found：2005/03/23(水) 18:45:32 ID:???

>>475
根本的に、id="block1" が複数存在する事態間違い
また、視覚的意味だけとしても<h3>が<h2>を乗り越えるようなレイアウトは妙
Firefox でも他にも不具合が見れます。
#block1,2,3の文書的な構造が解らなければアドバイスしようがない

478 ：Name_Not_Found：2005/03/23(水) 18:57:57 ID:???

>>477
とりあえずお前は頭冷やして来い

>>475
そう言うことたまにあるが、だいたいがblock1とかのpaddingとかの問題だったりする。

479 ：Name_Not_Found：2005/03/23(水) 19:01:47 ID:???

>>460
“どの要素に”破線が付いているのか、考えないといけなかったのですね。
勉強になりました。
ありがとう。

480 ：Name_Not_Found：2005/03/23(水) 19:07:28 ID:???

>>475
.block3が何処にもないわけだが・・・

481 ：475：2005/03/23(水) 19:15:46 ID:WBwDCGVK

>>477
block1は一つしか無いと思いますが……。

>>478
block1 li a　で指定されていたpadding-bottomを弄ってみたところ、
h3が解像度1024*764以上でもblock2の外に飛び出てしまいました。
色々と変えてみたりしたんですが、あまり効果ないっぽいです。

>>480
えと、.block3は実際はちゃんとh2とh3を囲んでいます。

ちょっと色々と弄ってみて気付いたのですが、h3が隠れるくらいに下の方にスクロールして、
そこから解像度を小さくして、上にスクロールしてみるとh3はちゃんと普通になっていました。
だけどh3が見える状態で解像度を変更すると、またblock1の方に流れていってしまいます。
これってどう言うことなんでしょうか……。

482 ：Name_Not_Found：2005/03/23(水) 19:26:53 ID:???

>>481
そう言う意味不明な問題持ってくんなよ馬鹿

483 ：Name_Not_Found：2005/03/23(水) 19:47:08 ID:???

初心者スレに続いてマルチな活躍ですね。

484 ：Name_Not_Found：2005/03/23(水) 19:54:00 ID:???

>>475
諦めれ

485 ：Name_Not_Found：2005/03/23(水) 19:57:01 ID:???

>>481
>block1 li a　で指定されていたpadding-bottomを弄ってみたところ

どこにも書かなかった物を持ち出されてもねぇ・・・

486 ：Name_Not_Found：2005/03/23(水) 19:59:42 ID:WBwDCGVK

>>485
すみません、最初はあまり関係ないと思っていたもので……。

487 ：Name_Not_Found：2005/03/23(水) 20:00:02 ID:???

>>475
ソースぜ～～んぶ出汁やがれ！！

488 ：475：2005/03/23(水) 20:08:44 ID:???

>>487
命令すんなハゲ！！

489 ：Name_Not_Found：2005/03/23(水) 20:13:58 ID:???

俺の秘密をばらすな！

490 ：Name_Not_Found：2005/03/23(水) 20:16:50 ID:???

あーざす！

491 ：475：2005/03/23(水) 20:30:50 ID:WBwDCGVK

<html>
<head>
<title>xxxxxxxxxx</title>
</head>

<body>
<h1>xxxxxxxxxx</h1>

<div id="block1">
<h2>xxxxxxxxxx</h2>
<ul>
<li>xxxxxxxxxx</li>
<li>xxxxxxxxxx</li>
<li>xxxxxxxxxx</li>
</ul>
</div>

<div id="block2">
<div class="block3">
<h2>xxxxxxxxxx</h2>
<h3>xxxxxxxxxx</h3>
</div>
</div>

</body>
</html>

492 ：475：2005/03/23(水) 20:32:44 ID:WBwDCGVK

h1{position:relative; text-align:left; margin: 0 auto;}
#block1{float:left; width:200px;}
#block2{margin:0 0 0 210px;}
.block3{position:relative; margin:0 0 20px;}
#block1 h2{margin:0 0 5px; padding:10px 15px;}
#block2 h2,h3{margin:0 0 .5em; padding:2px 5px;}
.block3 h2{padding:1em 5px 2px 5px;}
.block3 h3{position:absolute; top:0; left:0; margin:0; padding:0 0 0 5px;}
#block1 ul{padding:0 0 20px;}
#block1 ul li {width:180px; margin:0 8px; padding:7px 20px;}

とりあえず必要最低限なものを。
これでお願いします。

493 ：Name_Not_Found：2005/03/23(水) 20:35:49 ID:???

>>491-492
ﾌﾟお前あそこの管理任だろｹﾞﾗ

494 ：Name_Not_Found：2005/03/23(水) 20:41:07 ID:???

どこどこどこー？

495 ：Name_Not_Found：2005/03/23(水) 20:50:04 ID:???

>>475
それだけじゃないだろう
もっと晒せよ

496 ：Name_Not_Found：2005/03/23(水) 20:54:49 ID:???

>>475
とりあえずそれだけだと問題はないようだが

497 ：Name_Not_Found：2005/03/23(水) 21:01:35 ID:???

全部書いたら丸ごとパクられるだろうが！
CSSマスターなら、ソースが足りなくても推測できるはずだ！
バカだと思ってバカにするなー！！！バカ！

498 ：Name_Not_Found：2005/03/23(水) 21:02:56 ID:???

可哀想だから教えてやれって

499 ：Name_Not_Found：2005/03/23(水) 21:08:04 ID:???

>>493がアドレス出せば解決するぞ。

500 ：Name_Not_Found：2005/03/23(水) 21:26:37 ID:???

>>475
某イラストサイト管理人

501 ：475：2005/03/23(水) 22:05:12 ID:WBwDCGVK

どうやって知ったのか知りませんけど、どなたか解決法教えて下さい。

502 ：Name_Not_Found：2005/03/23(水) 23:19:25 ID:???

>>501
どうして＜h2＞と<h3>の配置が逆にした訳？
何遊んでんだよ

503 ：Name_Not_Found：2005/03/23(水) 23:20:27 ID:???

>>502
別にどこにも悪いところはないと思うが

504 ：Name_Not_Found：2005/03/23(水) 23:32:48 ID:???

おまいら何>>475のサイト必死に探し回ってるんだよｗ

とりあえず、今の状況では何が原因なのか判断出来ないないんで、
完全に諦めるか、IEふぁけは違う表示方法にするとかどうだろう。

505 ：Name_Not_Found：2005/03/24(木) 00:28:32 ID:???

なんでわかるんだよ

506 ：Name_Not_Found：2005/03/24(木) 01:05:11 ID:???

ちょっと疑問に思ったんだが、CSSでレイアウトする場合って、
絶対配置とフロートのどっちが良いわけなのよ？

507 ：Name_Not_Found：2005/03/24(木) 01:18:22 ID:???

どっちも良い

508 ：Name_Not_Found：2005/03/24(木) 01:26:22 ID:???

1. 作成者の意図したとおりの表示を望むならば，position:absolute
2. アクセシビリティや検索エンジンを重視し，論理構造を気にしないならば，float
3. 複雑なことは気にせず，レイアウトを組みたいならば，table

509 ：Name_Not_Found：2005/03/24(木) 04:08:10 ID:2x1Of15H

よく左側にメニューがあるサイトってあるじゃん。
メニュー見出しはhにするべきなの？

　コンテンツ
　・旅の写真
　・旅行
　・旅行記

って感じであったら、↓にするべき？

<h3>コンテンツ</h3>
<ul>
<li>旅の写真</li>
<li>旅行</li>
<li>旅行記</li>
</ul>

510 ：Name_Not_Found：2005/03/24(木) 04:15:55 ID:???

>>508
floatがposition:absoluteよりアクセシブルでないとは一概には言えない

>>509
マークアップの問題はスレ違いです

511 ：Name_Not_Found：2005/03/24(木) 04:18:36 ID:???

>>510前半逆だった。スマンね

512 ：Name_Not_Found：2005/03/24(木) 05:49:40 ID:???

で、>>475のサイトどこだよ？

513 ：質問：2005/03/24(木) 13:12:12 ID:MbkHsc7Q

はじめまして、質問です。
以下のhtmlで表示させると吹き出し文字がでるのですが、その際に、selectの要素の上に表示した際に吹き出しが
selectの要素の下に入ってしまいます。z-indexを使って重なる順位は変えたのですが、どうもうまく表示できません。
どなたかこれを上手く吹き出しをselectの要素の上に表示出来るようなCSSをご指導お願いいたします。
----------------------------------
<html><head><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<style type=text/css>
.position1{position:absolute;}
.position2{display:none;position:absolute;left:10px;top:-10px;border:1px solid #7F9DB9;}
</style></head><body>
<p onMouseOver="view_on('help')" onMouseOut="view_off('help')">ここにマウスを
<span class=position1><span id="help" class=position2>ほげほげ</span></span>
<select name="cc" STYLE="z-index:0;">
<option value="aa" selected>aa
<option value="bb">bb
</select></html>
----------------------------------
java scriptと混ざっているので、ここで書き込むべきか悩みましたが問題は
CSSの問題ですので、ここに書かせてもらいました。

514 ：質問：2005/03/24(木) 13:15:03 ID:MbkHsc7Q

z-indexの要素を入れ前のものを出してしまいました。
こっちです。
-------------------------------------------------------
<html><head>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<style type=text/css>
.position1{position:absolute;}
.position2{display:none;position:absolute;left:10px;top:-10px;border:1px solid #7F9DB9;z-index:10;}
</style>
</head><body>
<p onMouseOver="view_on('help')" onMouseOut="view_off('help')">ここにマウスを
<span class=position1><span id="help" class=position2>ほげほげ</span></span>
<select name="cc" STYLE="z-index:0;">
<option value="aa" selected>aa
<option value="bb">bb
</select></html>
-------------------------------------------------------

515 ：Name_Not_Found：2005/03/24(木) 14:16:35 ID:0yW/wPHL

はじめて、CSSでレイアウト組みしてるんだけど、一個つまづいちゃった。
ボックス作るときにIEでheightは100%効かないの？

516 ：Name_Not_Found：2005/03/24(木) 14:22:13 ID:0yW/wPHL

あ。IEの互換モードとかそこら辺が原因かな？

間違ってたら教えてくれ。
っつーか、回避方法はなさげだけど、みんなはどうやって回避してるの？

517 ：Name_Not_Found：2005/03/24(木) 14:27:59 ID:???

height 100%　なんてのは通常は使わないよ。

518 ：Name_Not_Found：2005/03/24(木) 14:38:29 ID:???

ブログで、float使ってメイン領域とサイドバーを分けてるんですけど、
メイン領域の本文が、IEだと文字選択が出来なくなりました。

ぐぐって、position:absolute;を使ったボックスでは、
IEで文字選択が出来なくなるということは分かったんですけど、
floatだけで配置してるのに、選択できません。
何か対処法があれば教えてください。

519 ：Name_Not_Found：2005/03/24(木) 14:49:31 ID:???

>>517
表示をブラウザのど真ん中にしたい場合はどうしたらいいの？
例えば<img src="gazou.jpg">をど真ん中にしたい場合。

520 ：Name_Not_Found：2005/03/24(木) 14:52:41 ID:0yW/wPHL

>>517
普段使わなくってもいいから、やり方知ってたら教えてくれ。

521 ：Name_Not_Found：2005/03/24(木) 15:10:51 ID:???

たとえば高さ40px、幅450pxのエリアに入る文字を
垂直の中央揃えにしたいのですが、
<div style="height:40px;width:450px;vertical-align:middle;">
では垂直の中央揃えになりません。
tableだとうまくいきます。

バナーっぽい表示を画像を使わずテキストで表したいのですが、
これはdivで表示せずにtableにするべきなのでしょうか。

522 ：Name_Not_Found：2005/03/24(木) 15:18:13 ID:0yW/wPHL

heightを100%にする件、回避できたからもういいや。

523 ：Name_Not_Found：2005/03/24(木) 15:19:13 ID:???

>>519
<img src="gazou.jpg"
　width="320"
　heigh="240"
　style="position: absolute; top: 50%; left: 50%; margin-top: -120px; margin-left: -160px;" />

524 ：Name_Not_Found：2005/03/24(木) 15:52:41 ID:???

　ど真ん中厨達へ

>>10 Q6 を読まっしゃい！　　　しばくど　ふんとに・・・

525 ：521：2005/03/24(木) 15:55:57 ID:???

>524
すみません、思い切り見落としていました。お恥ずかしい。
今からしばかれにうかがいます。

526 ：Name_Not_Found：2005/03/24(木) 16:10:05 ID:0yW/wPHL

>>524
ど真ん中はどうでもいいよ。
ブラウザいっぱいに可変のオランダの国旗を作ってみてくれ。

527 ：Name_Not_Found：2005/03/24(木) 16:15:35 ID:0yW/wPHL

オランダじゃなくてフランスだった。

ちょっと凹む

528 ：Name_Not_Found：2005/03/24(木) 16:19:31 ID:???

>>527
さして変わらないだろ

529 ：Name_Not_Found：2005/03/24(木) 16:44:35 ID:???

>>526

body {margin:0;padding:0;height:100%;}

#no1 {float:left;width:33%;background-color:#c28100;height:100%;}

#no2 {float:left;width:33%;background-color:#76f100;height:100%;}

#no3 {float:left;width:33%;background-color:#f33500;height:100%;}

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

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

<div id="no3">c</div>

</body>

　　色は適当だ。

530 ：529：2005/03/24(木) 16:48:14 ID:???

でもなんだぁ　こんなデザイン色がどうであれ美しくねーだよ。

531 ：529：2005/03/24(木) 17:01:26 ID:???

body にoverflow:hidden;　を追加すればもっといいっぺ？

532 ：Name_Not_Found：2005/03/24(木) 17:53:10 ID:???

(´-`).｡oO(>526は何がしたいんだろう・・・ )

533 ：Name_Not_Found：2005/03/24(木) 18:12:35 ID:???

ぼくの歌を聴きたいのかな？
まあいいけどね

534 ：Name_Not_Found：2005/03/24(木) 18:32:46 ID:???

聴かせて！

535 ：Name_Not_Found：2005/03/24(木) 19:42:05 ID:???

いいけどぼくリンダリンダしか歌えないよ？

536 ：Name_Not_Found：2005/03/24(木) 19:56:57 ID:???

ヘイ！！！

537 ：519：2005/03/24(木) 19:58:41 ID:???

>>523
すみません。中央にきません。

538 ：Name_Not_Found：2005/03/24(木) 20:00:34 ID:???

>>537
>>524

539 ：Name_Not_Found：2005/03/24(木) 20:01:12 ID:???

>>531
どこかを34%にしたほうがいいのでは？

540 ：Name_Not_Found：2005/03/24(木) 20:04:57 ID:???

お好きなように

541 ：Name_Not_Found：2005/03/24(木) 20:18:12 ID:0yW/wPHL

>>529
だから、これだとファイヤーフォックスとサファリでheightが効かないじゃん。
heightの％で使うときのポイントが知りたいの。

542 ：Name_Not_Found：2005/03/24(木) 20:22:33 ID:???

>>541
いま、リンダリンダ唄うから、ﾁｯﾄまっててくれー

543 ：Name_Not_Found：2005/03/24(木) 20:24:12 ID:???

>>541
522 ：Name_Not_Found：2005/03/24(木) 15:18:13 ID:0yW/wPHL
heightを100%にする件、回避できたからもういいや。

544 ：Name_Not_Found：2005/03/24(木) 20:34:34 ID:0yW/wPHL

>>543

回避し切れてなかった。
IEでも見られる様になったけど、
全ブラウザで
レンダリング後、ウインドウのサイズ大きくすると、
大きくした部分のheightが
表示されない。

オレはCSSのレイアウトは初めてだけど、みんなはもう何個ぐらい作ってるの？

545 ：Name_Not_Found：2005/03/24(木) 20:39:17 ID:0yW/wPHL

ちなみにオレも529みたいに、
親要素のhtmlとbodyにheight:100%を入れてた。

でも、なんかレンダリング後に挙動がおかしいんだよね。

546 ：Name_Not_Found：2005/03/24(木) 20:56:00 ID:???

>>521
漏れは最近知ったんだけど、以下のようにするといい。
ボックスの幅に収まるテキストや画像が必要だけど。。

h1
{
　height: 80px;
　line-height: 80px;
　...
}

<h1>hoge.hage</h1>

547 ：Name_Not_Found：2005/03/24(木) 20:59:01 ID:???

ＣＳＳでトラブル出る場合はＴＡＢＬＥでレイアウトしてしまえばいいんだよ。

548 ：Name_Not_Found：2005/03/24(木) 21:00:30 ID:???

その通り

549 ：Name_Not_Found：2005/03/24(木) 21:03:36 ID:0yW/wPHL

いわゆる、ハイブリッドってヤツか・・・・

550 ：Name_Not_Found：2005/03/24(木) 22:14:15 ID:???

apple.comみたいにタブを表すのってスクリプトとか必要だと思ってたけど
cssだけで再現できる事にびっくらこいた

551 ：Name_Not_Found：2005/03/24(木) 22:19:37 ID:???

移転に今気づいた

552 ：Name_Not_Found：2005/03/24(木) 22:34:21 ID:???

ページによって上部の余白がバラバラなのが気になるな。

553 ：Name_Not_Found：2005/03/24(木) 22:52:50 ID:???

Webサイトの本質的に個々のサイトが見映えのデザインに凝るのは間違い。
UA標準のスタイルシートで閲覧するか、
見映えをカスタマイズしたければユーザースタイルシートを使うべき。
Webサイトの作者はコンテンツの充実と有意義なリンク貼りにさえ没頭すればいい。
見映えに注意を発散させるのは大いなる時間の無駄だ。

554 ：Name_Not_Found：2005/03/24(木) 22:54:07 ID:???

なめんなよ。

商業広告サイト製作の全否定かよ。

そんなんだからCSSはバカにされんだよ。カス

555 ：＼＿＿＿＿＿＿＿＿＿＿＿＿＿／：2005/03/24(木) 22:57:30 ID:???

　　　　　　　　＼( 　　　　　　 r―-､、
　　　　　　　　　　,r''^tヽ　　　　　〉､::::::::ヽ落ち着け！
　　　　　　　　　　t'L`､f)　　　　ﾑ`''^)ヾj'′
　　　　　　　　　　ヽlヲノｰ､-、　 ,.ﾞ'r'''ﾆヽ､,
　　　　　　　　　 r'^ヽt,..,j:::ﾞi ヽ f,..つ'''ヽ､ヽ!
　　　　　　　　　ﾞi､　ヾ._ﾞ)_;::-:'"r-ミ=　__):l.l
　　　　　　　 =ﾃ`'i,,ﾞ>､ '"_,,.ィ"`′ ノ´!;;;;;;l !
　　　　　　　 '"'^´l　ﾞi｀1234､_ｨ'"´:::::l;;;;;;l l

556 ：Name_Not_Found：2005/03/24(木) 23:00:57 ID:???

>>553
ネタなのか何なのかﾜｶﾗﾝが、おまいは激しく時代遅れだな。
ネットで論文発表してウハウハしてろ。

557 ：Name_Not_Found：2005/03/24(木) 23:11:00 ID:???

だって、俺出来ないんだもん。

558 ：Name_Not_Found：2005/03/24(木) 23:40:12 ID:???

>>553
なにこいつキモい

559 ：Name_Not_Found：2005/03/24(木) 23:43:34 ID:???

553=557

560 ：Name_Not_Found：2005/03/25(金) 01:38:17 ID:???

質問です。

<table><tr><td style="～"></td><td></td></tr></table>

最初のtdの中だけmarginを0にしたいのですが、何か方法などあったらご教授下さると助かります。

561 ：Name_Not_Found：2005/03/25(金) 01:49:39 ID:zUf+8F8K

ここのHPみたいにスタイルシート（CSS）を使わなくても文字の大きさを一括で変えられる
ようにしたいのですがどうすればいいのですか？
ソース拝見したんですがCSSは使っていないようです。これはどうやってるんですか？
HPはhttp://www.ktv.co.jp/minakodo/　です。

562 ：Name_Not_Found：2005/03/25(金) 02:02:43 ID:???

下まで表示できねぇ

563 ：Name_Not_Found：2005/03/25(金) 02:42:55 ID:???

>>561
JSの中身はチェックした？

564 ：Name_Not_Found：2005/03/25(金) 02:48:29 ID:???

>>561
そのページのどこをイジると文字の大きさが変わるのか分からない。

565 ：Name_Not_Found：2005/03/25(金) 03:34:31 ID:zUf+8F8K

>>562
スクロールなしになってるんで見にくいですよね。
>>563
おっと、スクリプトの中に隠れていたとは・・・。＿|￣|○　ばっちりCSSの場所が書かれていました。
そんなことが出来るんですね。
>>564
難しいですよね。
ありがとうございました。

566 ：Name_Not_Found：2005/03/25(金) 04:08:01 ID:???

>>565
>難しいですよね。
バカにしてんのか？

567 ：Name_Not_Found：2005/03/25(金) 04:23:24 ID:???

</HEAD>
<link href="s.css" rel="stylesheet" type="text/css">
<BODY>

<DIV class=sutairu1>

ええええええ＋っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっさ＋ああ
あああddddddddddddddddddっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっ
ｄddddddddddaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaああああああああああああああああああ
</DIV>
</BODY></HTML>

でスタイルシートにはwidth100pxとちゃんと指定しているんですが、
途中までは100pxで右端で折りかえされているみたいなんですけど、
aaaのあたりから100pxを超えてはみ出してしまうんです。

なぜなんでしょうか？

理論的に考えて私は間違えてないと思うのですが悩みましたがわかりません
でした。

また、cssを用いて一行の文字数を制限するようなやりかたは、いけないのでしょうか？

568 ：Name_Not_Found：2005/03/25(金) 04:25:48 ID:???

>>567
半角のアルファベットだから

569 ：Name_Not_Found：2005/03/25(金) 04:27:45 ID:???

また、サイトの構成をブロックごとに分ける際に、DIVを使うのはよくない
と言われているようなのですが、テーブルの時も同じようなことが言われていた
ような気がします。

CSS、テーブル以外でサイトデザインをするの方法は特に見あたらない気が
するのですが、存在するのでしょうか？

sony等を見てみるとcssよりテーブルデザインのところが多いような気がしますが。

570 ：Name_Not_Found：2005/03/25(金) 04:29:54 ID:???

567様
それは本当でしょうか？
もし半角でそのようになるのでしたら、英語圏ではwidthで幅を指定すること
ができなくなっていると思います。

CSS自体、日本で策定されたものではないのではないでしょうか。

571 ：Name_Not_Found：2005/03/25(金) 04:36:08 ID:???

すみません実際にやってみたら半角では一切指定されたwidthで折りかえされ
ることはありませんでした。

そうなると、プロや詳しい方の間ではどのように一行の文字数を制限するのが
一般的なのかますますわかりません。

どなたかご存じでしたらご教授願えませんでしょうか

572 ：Name_Not_Found：2005/03/25(金) 04:57:04 ID:???

英語なんかの場合単語の途中で改行されたらまずいでしょ
だから一続きの半角アルファベット改行されない
スペースなり入れればちゃんと改行されるよ

cssとテーブル以外で同じようなレイアウトを出来るものは自分は知らない
でもうまくやればdivは使わないでcssで複雑なレイアウトは出来る

573 ：Name_Not_Found：2005/03/25(金) 05:04:37 ID:???

なるほどそう言った背景があるのですね
いくつかのブロックにわけてセクションを作り、大元のブロックに最後に
並べていちを調整するやり方で行こうと思ったところで詰まっていました。

なんとなくですが理解できましたので、まずはいろいろなサイトを見て
解析してみようとおもいます。

divは使わないけどテキストや画像一個一個に個別にstyleを指定するようだ
と、面倒ですね。
なかなか難しいものです。

574 ：Name_Not_Found：2005/03/25(金) 05:04:46 ID:???

.sutairu1{
word-break: break-all;
}
IEのみだけど。

575 ：Name_Not_Found：2005/03/25(金) 05:05:58 ID:???

>>569
無駄なdivを使うとdiv厨といわれるが
必要な場合にdivを使ったって問題ない。

大手サイトでテーブルレイアウトが使われているのは
テーブルレイアウトの方が多くのブラウザで意図した表示にしやすいから。
大手サイトではw3c的理想より見た目のデザインを重視している傾向にある。

576 ：Name_Not_Found：2005/03/25(金) 05:09:38 ID:???

574様
すいません、感動しました。

ただ最低限Mozillaでも表示できるようにしたいので実際に使うことは
なさそうですが。
やはり自分と同じような問題に直面している方は少なからずいらっしゃ
るのですね。wordbreakを手がかりにその辺の事情を検索してみます

感謝いたします

577 ：Name_Not_Found：2005/03/25(金) 05:14:53 ID:???

575様
なるほど。
現段階での私見ですがサイトをいくつかのブロックに分ける場合に使用する
のは、DIVは必要であると解釈しています。
やはりw3cに準拠したほうがよいかとは思いましたが、時間的制限からいって
オペラNNを切り捨てざるを得ないような状況です。
致命的なまでに崩れるようであれば、読み込むCSｓを変えて対処したいとは
思いますが。

こんな夜明けに回答が得られるとは思いませんでした
どうもありがとう。

578 ：Name_Not_Found：2005/03/25(金) 05:26:40 ID:???

ソースを見ないとなんともいえないが
きっと無駄なdivだらけなんだろうな

579 ：Name_Not_Found：2005/03/25(金) 05:38:48 ID:???

divだらけですよ　笑
ソースのインデントも崩れてなにがなんだかわからず、脳のメモリーに１ページ
の構造を記憶してなんとか作業しているといったところです。
たぶん、時間がたったら無理でしょうね。
別のページではテーブルレイアウトにチャレンジしてCSSの時との違いを
検証してみるつもりです。

580 ：Name_Not_Found：2005/03/25(金) 08:06:59 ID:???

CSSってプログラミングに近くない？
一カ所直せば他がおかしくなってテンパるｗ
少しずつ直していってうまく表示できればあとは野となれ山となれだ

どっか間違ってるんだろうけど

581 ：Name_Not_Found：2005/03/25(金) 08:28:12 ID:???

うん、間違ってる。

582 ：Name_Not_Found：2005/03/25(金) 08:30:20 ID:???

>580
自分も初めはそうだったけど
コツが判ると大きくテンパることはなくなってきたよ。
ｶﾞﾝｶﾞﾚ

583 ：Name_Not_Found：2005/03/25(金) 09:01:58 ID:???

みなさんはCSS2（拡張なし）で満足してますか？
頭に浮かんだデザインを全てCSSで思い通りに表現できているんでしょうか？
個人的に、枠を画像を使用して表現したい時、どうしてもいけてない記述(無意味なタグや入れ子等)
になってしまうのでどうにかしたいんですけども。

584 ：Name_Not_Found：2005/03/25(金) 09:27:30 ID:???

精進精進!

585 ：Name_Not_Found：2005/03/25(金) 09:31:58 ID:???

before afterとかの擬似要素や固定配置なんかが
某ブラウザの新バーションで使えるようになれば大分楽になるんだがね。

586 ：Name_Not_Found：2005/03/25(金) 10:00:27 ID:???

というか、

> サイトをいくつかのブロックに分ける場合に使用する

これこそdivの使い道だと思うのだが、それがいけないなんて誰が言ってるんだ？

587 ：Name_Not_Found：2005/03/25(金) 10:25:48 ID:???

枠の全面が画像の場合で可変だとbefore afterじゃ足らなくなるんだよね。
どうにかして欲しいね。

588 ：Name_Not_Found：2005/03/25(金) 15:12:31 ID:???

ｈｔｍｌ{ｂａｃｋｇｒｏｕｎｄ-ｉｍａｇｅ:ｕｒｌ(ｈａｉｋｅｅ.ｇｉｆ);}
ｂｏｄｙ{ｂａｃｋｇｒｏｕｎｄ-ｉｍａｇｅ:ｕｒｌ(ｈａｉｋｅｅ２.ｇｉｆ);}

こうすれば背景写真が２つ使えると聞いたのですが、表示できません。どうしてですか？

589 ：Name_Not_Found：2005/03/25(金) 15:37:10 ID:???

全角かい！！

590 ：Name_Not_Found：2005/03/25(金) 16:27:42 ID:???

盲点でした。ありがとうございました。
＞５８９

591 ：Name_Not_Found：2005/03/25(金) 16:33:46 ID:???

工エｴェｪ(´Д｀)ｪェｴエ工

592 ：Name_Not_Found：2005/03/25(金) 16:53:02 ID:???

皆の衆　しばらくの辛抱じゃて

593 ：Name_Not_Found：2005/03/25(金) 18:11:47 ID:???

>>588-590
一連の流れにﾜﾛﾀ

594 ：Name_Not_Found：2005/03/25(金) 18:12:08 ID:???

おっとミスった。
>>588-591ね。

595 ：Name_Not_Found：2005/03/25(金) 18:21:47 ID:???

はいけえ

596 ：Name_Not_Found：2005/03/25(金) 21:21:16 ID:w+No0kQv

letter-spaceingはみんなつかってる？
IEで軽くはみださない？

597 ：Name_Not_Found：2005/03/25(金) 21:43:37 ID:???

>divは使わないけどテキストや画像一個一個に個別にstyleを指定するようだ

もしかしてstyle属性？

598 ：Name_Not_Found：2005/03/25(金) 22:02:04 ID:???

なにを今頃・・・

599 ：質問です。（１－３）：2005/03/25(金) 22:49:21 ID:sNLChIqY

<div class="upper">
最上段部
</div>

<div class="main_right">
右
<div class="textarea_r">
右テキストエリア
</div>
</div>

<div class="main_left">
左
<div class="menu_l">
左メニュー
</div>
</div>

<div class="lower">
最下段部
</div>

600 ：質問です。（２－３）：2005/03/25(金) 22:51:02 ID:sNLChIqY

601 ：質問です。（３－３）：2005/03/25(金) 22:53:06 ID:sNLChIqY

連投申し訳ないです。

上記のように実行すると
左部分と右部分で隙間が開いてしまうのですが
左部分にくっつける様に右部分に回りこませれるように
出来ませんか？

602 ：Name_Not_Found：2005/03/25(金) 23:13:39 ID:???

HTML全部をdivで囲んでwidth指定すれば

左divより右がdivが先に記述されるのは譲れない条件なんだよな？

603 ：質問です。（３－３）：2005/03/25(金) 23:18:00 ID:sNLChIqY

>>602

>HTML全部をdivで囲んでwidth指定すれば
それだと全てのデーターを読み込み終わるまで
何も表示されませんよね？

blogのCSSなので鯖が重いとき等は読み込み終わるまで
全く何も表示されないというような事になるのではないでしょうか？

>左divより右がdivが先に記述されるのは譲れない条件なんだよな？
生意気にもSEO対策と言いますか。。。
一応これは拘りたいポイントです。申し訳ないです。

604 ：Name_Not_Found：2005/03/25(金) 23:21:20 ID:???

>>603
> それだと全てのデーターを読み込み終わるまで
> 何も表示されませんよね？
んなこたない

605 ：質問です。（３－３）：2005/03/25(金) 23:25:40 ID:sNLChIqY

>>604
そうなんですか！！！！！！！！！

テーブルは確か読み込みが終わるまで
表示しませんでしたよね？

それと同じだと勝手に脳内解釈していました。

これで解決しました。ありがとうございました！！

606 ：Name_Not_Found：2005/03/25(金) 23:34:07 ID:???

テーブルとは違うのだよ！テーブルとは！

607 ：Name_Not_Found：2005/03/25(金) 23:36:30 ID:???

ポジション使えば

608 ：質問です。（３－３）：2005/03/25(金) 23:41:53 ID:???

もういいんだってば。

609 ：Name_Not_Found：2005/03/26(土) 00:05:46 ID:???

よく、テーブルレイアウトだと全部読み込むまで表示されないと言うけど
実際、今の通信環境やPCスペックじゃ、よほど巨大な文字列じゃない限りテーブルが原因で表示されないってのは少ないと思う。
巨大なテキスト扱うページだけ注意すれば良いんじゃないの？
なるべくスタイルシートでデザインするようにしてるけど、もう少しCSSが充実するまでは、テーブルレイアウトも完全に捨てられないな。

610 ：Name_Not_Found：2005/03/26(土) 00:07:09 ID:???

もしくは、凝ったデザインにしたいならFlashページを別に作成するか、という選択になるのかな。

611 ：Name_Not_Found：2005/03/26(土) 00:13:27 ID:???

テーブルの遅さ結構よくわかるぞエロサイトとかめぐってると

612 ：Name_Not_Found：2005/03/26(土) 00:30:44 ID:???

お兄ちゃんのエッチ(*ﾉωﾉ)

613 ：Name_Not_Found：2005/03/26(土) 00:33:14 ID:???

テーブルの表示って画像の中身も含まれるの？

614 ：Name_Not_Found：2005/03/26(土) 00:46:29 ID:???

画像の中身ってなんだろな～

615 ：Name_Not_Found：2005/03/26(土) 00:52:58 ID:???

バイナリデータの事じゃないの？

616 ：Name_Not_Found：2005/03/26(土) 03:11:09 ID:???

レンダリングの速さなんかどうでもいい。
将来性のある規格に従うのが一番。
よってテーブルレイアウトがお勧めだ。

617 ：Name_Not_Found：2005/03/26(土) 10:50:29 ID:???

現状としてレイアウト用の要素がないから仕方がない。
float position ではどうしても不具合が出る。
table なら阿保でもできるし、不具合もない。（俺はｱﾌｫだからtable）

618 ：Name_Not_Found：2005/03/26(土) 10:54:14 ID:???

レイアウト用の要素はあるだろ
fontとかbとか

619 ：Name_Not_Found：2005/03/26(土) 11:26:24 ID:???

？？

620 ：Name_Not_Found：2005/03/26(土) 11:31:38 ID:???

>>618は本気で言っているのかが問題だ

621 ：Name_Not_Found：2005/03/26(土) 12:02:13 ID:egfx8zZy

SEO対策でトップページの一番上にサイトのタイトルとか紹介文を入れたいのですが、
デザイン上はあんまり入れたくないのです。

テレビ王国　ttp://www.so-net.ne.jp/tv/
を見ると、

<h1>テレビ王国 | ソニーのiEPGテレビ番組表</h1>

が、最初に来ているしH1要素なのに画面に表示されません。これはどうやるのでしょうか？
（もしかして、あまりよろしくない手なのかもしれませんが）

622 ：Name_Not_Found：2005/03/26(土) 12:07:34 ID:???

よろしくない

623 ：Name_Not_Found：2005/03/26(土) 12:18:31 ID:???

>>621
CSSに↓って書いてあるYO。

h1 { display: none; }

624 ：Name_Not_Found：2005/03/26(土) 12:49:14 ID:???

そりゃーよろしくない

625 ：Name_Not_Found：2005/03/26(土) 15:41:24 ID:???

>621
下手にdisplay:none;で消すと、google先生がspam扱いすることがあるから>622

626 ：Name_Not_Found：2005/03/26(土) 15:52:17 ID:???

>>625
GoogleはCSSを解釈しているのか。

627 ：Name_Not_Found：2005/03/26(土) 16:09:35 ID:???

>626
よく分からないが、display:noneで消すとたまにspam認定されるらしい

628 ：Name_Not_Found：2005/03/26(土) 17:41:33 ID:???

>>627
<link>や<style>でも？
都市伝説？

629 ：Name_Not_Found：2005/03/26(土) 20:40:28 ID:???

>628
ttp://adp.daa.jp/archives/000206.htmlってのがあったからさ
googleだと違うかも、ｽﾏｿ

630 ：Name_Not_Found：2005/03/26(土) 22:13:04 ID:???

ログで、Googlebotがtext/cssを取りに来てるの見た記憶がないわけで。
他所のログではあるのかなあと疑問に思ったわけですよ。
仮にあったとして、HTMLとCSS(別ファイル)を短絡的な判断で関連付けるものだろうか？と。

>>629
そこに書いてあることは、この疑問には大きな関わりは無いですね。

631 ：Name_Not_Found：2005/03/26(土) 22:55:59 ID:???

ビビリが

632 ：Name_Not_Found：2005/03/27(日) 07:21:59 ID:???

うちのサイトではちゃんとサマリーで拾ってるよ。

633 ：621：2005/03/27(日) 11:35:33 ID:Y8dihZj3

やっぱりｈ1要素は表示しないってやりかたはズルイっちゃズルイですよね。
SEOスパム認定されるかも。

問題は外部CSSをgoogle様が読みに行くかどうかだと思います。
どーなんだろ。

634 ：Name_Not_Found：2005/03/27(日) 11:43:33 ID:???

俺は{display:none}やってみたが、spam扱いされるどころか上位に表示された。

635 ：Name_Not_Found：2005/03/27(日) 12:13:30 ID:???

俺は h1 {visibility:hidden} にして背景画像を表題にしている

636 ：Name_Not_Found：2005/03/27(日) 13:15:47 ID:???

>>635
text-indent: -9999px;とするのが最近の流行

637 ：Name_Not_Found：2005/03/27(日) 13:21:22 ID:???

それはMS Windowsの十八番

638 ：Name_Not_Found：2005/03/27(日) 15:20:09 ID:???

ＮＮでみるとなんと背景にカーソル合わせると色がなくなるまるでロールオーバー状態
なんですが私は一体なにをしてしまったんでしょうか？

639 ：Name_Not_Found：2005/03/27(日) 15:25:45 ID:???

かいけつしました。すいませんでした。

640 ：Name_Not_Found：2005/03/27(日) 15:26:37 ID:???

>>638
ソースはコピペ？

641 ：Name_Not_Found：2005/03/27(日) 15:48:15 ID:???

いつになったらCSSは変数を使えるようになるのか？
せめて色だけでも変数で指定できれば、一斉変更もしやすいし楽になるんだが
いや、やっぱりmarginとpaddingの変数指定も対応してくれ

642 ：Name_Not_Found：2005/03/27(日) 16:14:55 ID:???

>>641
> せめて色だけでも変数で指定できれば、一斉変更もしやすいし楽になるんだが
そうだ、そうだ！と、以前は思っていたんだが…
色指定を全て一つにまとめれば良い事じゃん、と、気が付いた、あの日。

643 ：Name_Not_Found：2005/03/27(日) 16:38:56 ID:???

>>641
スレ違い？
賛成だが、一斉変更もしやすくなる、という点は意味分からん
一斉変更は今でも十分楽では？スマソ。説明ぷりーず

俺は＋－*/の計算ができるようにしてほしいとおもた
あとは要素をグルーピングして擬似要素を作れるような関数とかほしい

tattooえば
リストと見出しを纏めたような見た目にしたいけど、文書の論理的構造上divで包むのも微妙なバヤイ
$hoge = pack_element( h2#hige, ul#hage, block);
/* 見出しhigeと見出しhageがあたかもボックスで包まれているようにする */
で、$hoge{ min-width: 100px; width: 30%; float: left;}ってな感じで指定

これがあればw3厨的なHTMLでもデザインの幅も広がるよね
妄想すまん

644 ：６４３：2005/03/27(日) 16:40:15 ID:???

見出しhigeとリストhageの間違い

645 ：Name_Not_Found：2005/03/27(日) 17:38:31 ID:???

>>643
$ # 変数型だとJavaScript、ActionScriptやってる人がパニックになってしまうので、
ぜひともECMA準拠でよろしくお願いします。
それの方が整合性も高いと思うので。

646 ：Name_Not_Found：2005/03/27(日) 18:00:33 ID:???

藻前ら、ここは日記帳ではないよ

647 ：Name_Not_Found：2005/03/27(日) 18:12:39 ID:???

まぁスレ違いだ間違いn(ry
ここは日記帳じゃないけど面白いとお股

648 ：Name_Not_Found：2005/03/27(日) 20:03:19 ID:???

$HEIGHTでviewportの高さを参照する
とか、かなり昔の草案にあったんだけどね

649 ：Name_Not_Found：2005/03/27(日) 22:51:23 ID:???

Javascriptでウィンドウのサイズとか取得して
document.writeでCSS吐かせるのは
やっぱり邪道ですか？
（疑似フレームが使いたくてそんなことしてます）

650 ：Name_Not_Found：2005/03/27(日) 23:09:37 ID:???

>>649
javascript切ってもちゃんと読めるようなサイトだったら無問題

651 ：Name_Not_Found：2005/03/27(日) 23:31:57 ID:???

そんなことしなくても疑似フレームできると思うけど
リサイズされたらどうするの？

652 ：Name_Not_Found：2005/03/27(日) 23:34:20 ID:6IcnDCap

質問です。
テンプレ>>12のhttp://css.maxdesign.com.au/index.htmを見まして、
one list,many optionsの中の「Horizontal lists」を真似しようとしたのですが、
<div>で囲ったbackground-colorとかborderが、このサイトのように
左右の隙間なしになりません。
どうしてなんでしょうか？

653 ：Name_Not_Found：2005/03/27(日) 23:41:03 ID:???

>>652
Horizontalのどれ？
あと説明ちゃんとしてちょ

654 ：Name_Not_Found：2005/03/27(日) 23:54:01 ID:???

テキストボックスに背景画像貼り付けるのって、IEしかできませんか？

655 ：Name_Not_Found：2005/03/27(日) 23:58:27 ID:???

>>654
出来なかったら擬似フレームを使うのはどう？
border-style: inset;
overflow: auto;
background: url(背景画像)

656 ：652：2005/03/28(月) 00:03:02 ID:???

あ、すみません>>653
3番目、4番目などです。

657 ：Name_Not_Found：2005/03/28(月) 00:05:23 ID:???

>>654
逆にどうやったら出来ないのよ？
今時NN4とか？
FirefoxとかOperaとかSafariで出来ないなら、あんたの書き方が間違ってる

658 ：649：2005/03/28(月) 00:10:29 ID:???

>>651
リサイズされたら、onresizeイベントで、再設定させてます。
切り分けの幅を％指定じゃなくてpxで指定したいのでまどろっこしいことしてます。
ページロード後にそれを１回動かせば済むような気も・・・・。
javascriptが切ってあるときは只の一枚のページです。

659 ：Name_Not_Found：2005/03/28(月) 00:16:37 ID:???

>>656
左右の隙間ってもしかしてページ全体の両端のこと？
隙間の説明してちょ

660 ：652：2005/03/28(月) 00:20:45 ID:???

>>657
SafariとFirefoxとOperaとMacIEで確認しました。
まるっとコピーしてもなんです。。

>>659
はい、ページ全体の両端です。
>>12のサイト自体、ナビゲーション部分の両端隙間がないですよね。

661 ：Name_Not_Found：2005/03/28(月) 00:23:25 ID:???

>>660
これはbodyの問題だね。
marginとpadding両方をゼロにすればよろし。
IEの場合はmarginだけでいいかもしれんが

662 ：Name_Not_Found：2005/03/28(月) 00:25:07 ID:???

body{ margin: 0; padding: 0}みたいに

663 ：652：2005/03/28(月) 00:29:01 ID:???

>>661,662
なるほどー。ご丁寧なレスありがとうございました。

664 ：Name_Not_Found：2005/03/28(月) 01:23:01 ID:???

こっち↓を推薦

* { margin: 0; padding: 0}

665 ：Name_Not_Found：2005/03/28(月) 01:47:22 ID:PNsYZLOm

スレと関係ない話ですが
ゲッコーとケーエイチティーエムエルとではCSSでどちらが正しいするのでしたか？

666 ：Name_Not_Found：2005/03/28(月) 02:18:18 ID:???

>>665
http://cssbug.at.infoseek.co.jp/detail/mozilla.html
http://cssbug.at.infoseek.co.jp/detail/safari.html

667 ：Name_Not_Found：2005/03/28(月) 02:18:31 ID:???

Gecko

668 ：Name_Not_Found：2005/03/28(月) 05:34:05 ID:???

http://www.fromdfj.net/html/changestyle.html
これって、外部ＣＳＳをボタンで切り替えることが可能なスクリプトですよね？
早速ダウンロードしてみたのですがうまく動きません
解説を読んでみて分からない、自信がない部分を以下に書きます

・ＣＳＳファイｒ格納ディレクトリのアドレスは、自分のサイトのアドレスを記入すればいいのか
・３つ目の手順の「デフォルトシートの変更」は何を記入すればいいのか
・style2は何も変更しなくていいのか
・アップロードは普通にしていいのか

ちなみに、使っているサーバーはaaacafeですが、それも関係あるのでしょうか

説明が下手ですみません。
また、これ以外に外部ＣＳＳを切り替える方法などを知っていたら教えてください。

669 ：Name_Not_Found：2005/03/28(月) 05:53:43 ID:???

>>668
View - Pagestyle

670 ：668：2005/03/28(月) 08:01:16 ID:pFo8k4ZU

>>669に言われたとおりあっちのソースを見ながらやり直したら、無事設置できました。
いくつか記述を間違ってたのと、ファイルがちゃんとアップしきれてなかったのが原因のようです。
ありがとうございました。

671 ：Name_Not_Found：2005/03/28(月) 08:26:12 ID:???

工エｴェｪ(´Д｀)ｪェｴエ工

672 ：Name_Not_Found：2005/03/28(月) 19:01:55 ID:???

win2000pro
IE6使用です

div.heightline{
background:
url(box.jpg)
top left
repeat-y;
}
画面のサイズを変更してもスクロールが出ず、
box.jpgが縦に走る画面を作成したいのですが繰り返しが行われません。
例えばheight: 1000px;等にすると表示されるのですが当然画面サイズに関わらずスクロールしてしまいます。
また横方向に画像を繰り返す
div.widthline{
background:
url(box.jpg)
top left
repeat-x;
}
はうまく表示されます。

解決策をお知りの方ご教授お願いします。

673 ：Name_Not_Found：2005/03/28(月) 19:24:57 ID:???

>>672
border:solid red 1px;
って書いてdivのカタチを確認してみ？

674 ：Name_Not_Found：2005/03/28(月) 19:26:43 ID:???

>>672
border:1px solid #ff0000;

とでも付け足して、div.heightlineがどんな形をしているのかを確かめてみれば、
なんでそうなるのかわかると思う。

675 ：674：2005/03/28(月) 19:27:21 ID:???

だからあれほどリロードしろと orz

676 ：Name_Not_Found：2005/03/28(月) 19:55:21 ID:???

早速ご返答ありがとうございます。
確かに高さを指定しないとheightが内容分の高さにしかならないですね。
bodyに上記の指定をすれば範囲が画面全体になり期待通りの表示が行われます。
しかしbodyには他の画像を使用させたい為別の手段にて表示させる方法がないかと思ったのですが・・・・
bodyに使用している画像を別枠で表示させ、bodyに上記の指定を行うしかないのでしょうか？

677 ：Name_Not_Found：2005/03/28(月) 21:02:54 ID:???

>>676
html {（ｒｙ

678 ：Name_Not_Found：2005/03/29(火) 06:14:09 ID:1TUNSlYZ

>>96
url等のアルファベットが改行されない件は
break-all使えと答えが出てるみたいですが、
NNでは break-all 使えませんよね。
どう対応していますか？

679 ：Name_Not_Found：2005/03/29(火) 06:23:14 ID:???

>>678
width:??? と overflow:auto

680 ：Name_Not_Found：2005/03/29(火) 06:24:54 ID:???

>>678
> url等のアルファベットが改行されない件は
> break-all使えと答えが出てるみたいですが、

俺ん中では
突き抜けるのが普通って答えが出ているんだが

681 ：Name_Not_Found：2005/03/29(火) 07:09:20 ID:1TUNSlYZ

>>679
え？それで解決するんですか？
うちでも>>680設定です。

682 ：Name_Not_Found：2005/03/29(火) 12:41:12 ID:???

ブロック要素の中に収まりきらない置き換え要素があるときは、
ブロック要素が大きくなるのとならなくて中身がはみ出すのとどっちが正しいんですか?
例:
<div class="imgbox"><img src="image.gif" width="300" height="300" alt="image"></div>

683 ：Name_Not_Found：2005/03/29(火) 13:04:45 ID:???

>>682
overflowの初期値はvisibleだからはみ出すのが正解
子要素がブロック要素でも置換要素でも同じ

試してみたら
Win IE は標準モードでもブロックを拡張してしまうね

684 ：Name_Not_Found：2005/03/29(火) 15:25:58 ID:???

682です。ありがとうございました。
とあるサイトで、絵が枠からはみだしてるのが気になって仕方がなかったので。

685 ：Name_Not_Found：2005/03/29(火) 16:10:45 ID:???

<dt>と<dl>を<div>で囲んだら
IE6とその他のブラウザでは表示方法が異なる件

細かく言うと、上に余白ができる件

余計な空白をなくす方法を教えていただきたく

686 ：Name_Not_Found：2005/03/29(火) 16:23:58 ID:???

ソースを出せ

というか、<div>の直下に<dt>置いてるのか？
だとしたら大間違いなのでHTMLの勉強からやり直し

687 ：Name_Not_Found：2005/03/29(火) 16:36:30 ID:1VbPLtSL

h1.index{
　border-width:0px 0px 1px 0px;
　border-style:solid;
　border-color:red;
　margin:0px;
　padding:0px;
}
　
span.indesBack{
　background-color:red;
}
　
<h1 class="index"><span class="indexBack">Index</span></h1>

このようにして、ﾀﾌﾞのように表示させています。
IEだと綺麗に表示されますが、ﾓｼﾞﾗなどで見るとIndexの背景色と、h1の下線の間に1px程の隙間が出てきます。
この隙間を消すことは出来ますでしょうか？マージンやパディング弄っても上手くいきません。。。

688 ：Name_Not_Found：2005/03/29(火) 16:46:23 ID:???

<dl><dt><dd>って
上に隙間ができてしまうモノなの？
マージンもパディングも0にしても1文字文ぐらいあいてしまいます。

689 ：Name_Not_Found：2005/03/29(火) 16:54:13 ID:???

>>688
dlの上にマージンあるか、dtの上にマージンがあるか、divにパディングがあるか。

690 ：Name_Not_Found：2005/03/29(火) 16:54:22 ID:???

*{padding:0; margin:0}
でまず試せ

691 ：Name_Not_Found：2005/03/29(火) 16:54:35 ID:???

>>686
これだめなの？
<div>
<dl><dd><dt></dt></dd></dl>
</div>

692 ：Name_Not_Found：2005/03/29(火) 16:58:18 ID:???

>>691
>>685には

> <dt>と<dl>を<div>で囲んだら

と書いてあって、<dl>が出て来てないから言われたのではないかと推察。

693 ：Name_Not_Found：2005/03/29(火) 17:06:44 ID:???

>>691
そりゃダメだろ

<div><dl><dt></dt><dd></dd></dl></div>
ならよい

694 ：Name_Not_Found：2005/03/29(火) 21:36:45 ID:IkyOfPMu

ブロックより大きな内容がある場合、
内容が収まるようにブロックを拡張するにはどうすれば良いですか？

IEが仕様に準拠してないとか、そんなことは私にはどうでも良い事であって
IE以外のブラウザでもIEのような挙動にしたいというのが私の望む事です。

695 ：Name_Not_Found：2005/03/29(火) 21:54:44 ID:???

mozillaはheigh: auto;とかできなかったっけ？

696 ：Name_Not_Found：2005/03/29(火) 21:55:44 ID:???

typoへの突っ込みは無しで

697 ：Name_Not_Found：2005/03/29(火) 23:02:02 ID:???

「ブロックより大きな内容がある場合」って解ってるなら
ブロックを合わせればいいんでねーの？
頭でっかちへりくつ野郎はこれだから困るんでー

698 ：Name_Not_Found：2005/03/29(火) 23:16:48 ID:???

自分が必要無いとしか思えない機能は、
世界中の誰にとっても必要ないはずだと言ってるようにしか聞こえないんですが

699 ：Name_Not_Found：2005/03/29(火) 23:42:21 ID:???

>>694
たとえば普段は幅70%だけど幅1000pxの画像全体が常にボックスに含まれるようにしたいというのなら
width: 70%;
min-width: 1000px;
とか

700 ：Name_Not_Found：2005/03/30(水) 00:42:07 ID:MMQXQSSF

WinXP(IE6),MacX(IE5)使用してます。

font-familyを外部cssで指定するとき、
div {font-family: Verdana,sans-serif; }
だとWinではちゃんと変わるのですがMacではそのままのOsakaで表示されて
しまいます。

<div span="font-family: Verdana,sans-serif; " lang="en">
だとMacでも見れるのでフォントがないということはないと思うのですが・・・。

MacのIEでは無効化されてしまうのでしょうか？
どなたかアドバイスしてください。よろしくお願いします。

701 ：Name_Not_Found：2005/03/30(水) 00:47:45 ID:???

ttp://cssbug.at.infoseek.co.jp/detail/macie/b032.html

702 ：Name_Not_Found：2005/03/30(水) 00:48:53 ID:???

>>700
lang="en" はどちらにも付いてるのね?

703 ：700：2005/03/30(水) 00:54:49 ID:???

>701,702
レスありがとうございます。
>702
どちらにも、というのは・・・htmlと外部cssファイルのことでしょうか？
とりあえず今はつけていません。
<div span="font-family: Verdana,sans-serif; " lang="en">
はフォントがインストールされているかを試しただけなので。

div {font-family: Verdana,sans-serif; }
<div lang="en">

こんな感じになるのでしょうか？

704 ：Name_Not_Found：2005/03/30(水) 10:25:58 ID:WTD1DZ4u

cssの名前に大文字って使わない方が良いのだっけ？

705 ：Name_Not_Found：2005/03/30(水) 11:30:44 ID:???

ｃｓｓの名前ってBASE.cssとかって事か？そりゃ小文字の方がいいわな

706 ：Name_Not_Found：2005/03/30(水) 12:07:16 ID:TZzE2Izn

質問させてください。

<input type="submit" class="button" name="menu" value="PAGE1">
このようにボタンオブジェクトを作り
.button{
border: 3px double #F93C0A;
background-color:#FFFFFF;
font: bold 10pt Sans Serif;
color:#F93C0A;
}
こうしてボタンの装飾をしました。

ここでボタンにマウスオーバーしたときに色が変わるように
したいのですが、どうしたらよいでしょうか？

707 ：Name_Not_Found：2005/03/30(水) 12:42:10 ID:???

.button:hover{
background:#ccc;
}
みたいに汁
IEは窓から投げ捨てろ

708 ：706：2005/03/30(水) 13:49:40 ID:???

>>707
返答ありがとうございます。
これってＩＥだと動きませんね。
ＩＥで動かすにはJAVAスクリプト使ったほうが早いですかね？

709 ：Name_Not_Found：2005/03/30(水) 14:39:44 ID:???

>>708
inputやめてaをCSSで加工するのが一番早い

710 ：Name_Not_Found：2005/03/30(水) 16:05:13 ID:BlWJTCqK

ﾓｼﾞﾗにて、
table内でword-break:break-all的な、
文字列に勝手に横を拡張されない処理をしたいのですが、
overflowを指定しても反映せず、table-fixedやらとにかく指定しまくったのですが
全然だめぽです。
tableで当該処理は不可能なのでしょうか？
<div>で書き直さないと駄目でしょうか。

711 ：Name_Not_Found：2005/03/30(水) 16:15:32 ID:???

TABLEの中にDIV入れれば？

712 ：Name_Not_Found：2005/03/30(水) 16:19:09 ID:???

>>711
出来ました！
ありがとうございます。

713 ：Name_Not_Found：2005/03/30(水) 16:36:42 ID:???

なんだかなぁ・・・

714 ：Name_Not_Found：2005/03/30(水) 17:56:22 ID:???

はっきり言えよう

715 ：Name_Not_Found：2005/03/30(水) 18:14:34 ID:???

大泉洋

716 ：Name_Not_Found：2005/03/30(水) 18:17:59 ID:???

>>715
残念それは私のおいなりさんだ

717 ：Name_Not_Found：2005/03/30(水) 18:54:58 ID:JL0x+dtH

.fuga { color:#ff0000; margin:12px 0px 12px 0px; }

<select size=2>
<option>aaaaaaaaaaaa</option>
<option class="fuga">bbbbbbbbbbbbbb</option>
<option>cccccccccccccccc</option>
</select>

このようにすると Firefox では意図したとおり（bbbbbbbbbbbの行が赤字になり上下にマージンがとられる）に
なりますが、 IE だと赤字になるのみでマージンは反映してくれません。

IE で select 内 option 要素の行間を設定するにはどうすればよいでしょうか？

718 ：Name_Not_Found：2005/03/30(水) 19:12:38 ID:???

option 要素の行間なら option に marginだしょ？

719 ：Name_Not_Found：2005/03/30(水) 19:22:20 ID:JL0x+dtH

>>718
ありがとうございます、こういうことですか？
option { margin:12px 0px 12px 0px; }

でも何も変わりませんでした・・・

720 ：718：2005/03/30(水) 21:51:18 ID:???

>>719
ごめんよ。確認せず書いたから間違ってるよ>718は。

ﾁｯﾄ待ってくれ。俺のIE6では赤くもならないな。

721 ：718：2005/03/30(水) 21:57:42 ID:???

わりい　呆けてた。
赤くはなるな。

722 ：Name_Not_Found：2005/03/30(水) 22:06:02 ID:???

>>717
ttp://cssbug.at.infoseek.co.jp/detail/winie/b112.html
ただしこれはバグではなく許された動作の範囲内であることに注意。

723 ：718：2005/03/30(水) 22:12:34 ID:???

selectはsize="1"でやってるから全く知らなかったよ。
ヘタレでごめんな。

724 ：Name_Not_Found：2005/03/31(木) 16:43:00 ID:Kp9+KDiJ

Q要素の内容に対して quotes: '"' '"' "'" "'"; で引用符を表示するようにしている
のですが、画像を引用したときだけ引用符を付けないようにするにはどうしたら
良いのでしょうか？

725 ：Name_Not_Found：2005/03/31(木) 16:56:56 ID:???

classで振り分けろ

726 ：724：2005/03/31(木) 20:24:14 ID:???

>>725
そうすることにします。ありがとうございました。

727 ：Name_Not_Found：2005/04/01(金) 00:00:53 ID:???

table等の囲むような要素自体をリンクにしてボタン状にしてるのだけど、
tableやtd、divをaで囲むとIEでもNNでもいけることは行けるけど、やはり正式にはよくないことのようだ。
画像やformのボタンを使わずにきちんとリンクボタン作る方法ってない？

728 ：Name_Not_Found：皇紀2665/04/01(金) 00:16:19 ID:???

>>727
border-style: outset とか
background-color: ButtonFace とかで似せるとか。

729 ：Name_Not_Found：皇紀2665/04/01(金) 00:36:40 ID:???

ぎりぎりで４月馬鹿にならなかった>>727は神

730 ：Name_Not_Found：皇紀2665/04/01(金) 00:54:50 ID:???

あ、すごい

731 ：727：皇紀2665/04/01(金) 10:00:25 ID:???

どういう意味？

732 ：Name_Not_Found：皇紀2665/04/01(金) 10:45:01 ID:kIdPRNjE

<TD>でボーダーを実線にすると重なり合うところが２重線になってしまいます
重なり合うところを上手く１本の線に見せるにはどうしたらいいでしょうか？

733 ：Name_Not_Found：皇紀2665/04/01(金) 11:40:46 ID:7xWrrdd0

ウインドウのサイズを伸縮させても内容全体を常に中央にくるようにしたいのですが、スタイルシートではどうやったらよいのでしょうか？？

一応body要素にマージンで左右に10％とかってやってみたんですが、ダメみたいです。

734 ：Name_Not_Found：皇紀2665/04/01(金) 11:52:16 ID:???

>>733
>>9のQ2や>>10のQ6を参照

735 ：Name_Not_Found：皇紀2665/04/01(金) 13:55:39 ID:HBUN/sms

bodyをstyle="text-align:center;"にしてもネスケでは中央配置できません。
どうしたらよいですか。

736 ：Name_Not_Found：皇紀2665/04/01(金) 13:56:24 ID:???

>>735
>>1を読んでください。

737 ：Name_Not_Found：皇紀2665/04/01(金) 16:14:20 ID:7xWrrdd0

>>734

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

しかし、ネスケで、ウインドウを縮めると左側が切れて、左端までスクロールバーをうごかしても、途中までしか
戻らないような状態になります。これは何故でしょうか

738 ：Name_Not_Found：livedoor06/04/01(金) 16:50:44 ID:???

liにdisplay: inline;とdisplay: block;の両方を適用させたいです

li{ display: inline; }
li span{ display: block; width:100px; height:100px; }
では出来ませんでした

なにかいい方法を教えてください

739 ：Name_Not_Found：livedoor06/04/01(金) 16:55:24 ID:???

>liにdisplay: inline;とdisplay: block;の両方を適用させたいです

あとから書いた奴に上書きされるよ。

740 ：Name_Not_Found：livedoor06/04/01(金) 17:02:45 ID:???

li {
width: 100px;
height:100px;
display: block;
display: inline;
float:left; }
にすると、階段みたいに段々になりました・・・。

741 ：Name_Not_Found：livedoor06/04/01(金) 17:05:17 ID:???

li aにも同じ指定をしたら出来ました！ありがとうごます！

742 ：Name_Not_Found：livedoor06/04/01(金) 17:05:51 ID:???

ありがとうございます！でした。たびたび申し訳ありません。

743 ：Name_Not_Found：livedoor06/04/01(金) 19:01:33 ID:???

ごますワラタ

744 ：Name_Not_Found：livedoor06/04/02(土) 02:12:09 ID:mmzOMhej

リンク文字(Aで指定する物)に
boder-bottom:#444444 1px dotted;
という記述で下線を引いているのですが、画像のリンクボタンにも下線がついてしまい困っています。
画像ボタンのみ下線が付かないようにするにはどうしたらよいのでしょうか？
外部.CSSでまとめて指定しているんですけど、一つづつHTML内で個別指定するしかないのでしょうか…。

745 ：Name_Not_Found：livedoor06/04/02(土) 02:29:15 ID:???

>>744

a{border-bottom:#444444 1px dotted}
a.unko{border:0}

<a href="744.html">LINK</a>
<a href="2ch.html" class="unko"><img src="chinko.jpg" border="0"></a>

/*
a{border-bottom:#444444 1px dotted;text-decoration:none}にしたほうが良くない？
*/

746 ：Name_Not_Found：livedoor06/04/02(土) 02:32:55 ID:???

ずらしてしまえ！
a img { vertical-align: bottom; position: relative; top: 1px }

とか変か……。

747 ：744：livedoor06/04/02(土) 02:49:06 ID:mmzOMhej

text-dacoration:none も入れてあります。
.a .a:link .a:visited .a:active .a:focas .a:hover でそれぞれ違う色の破線を引いているのですが…。
CLASSで画像に指定してみましたが消えてくれません。逆に文字リンクに全てclass指定しかないですかね。

748 ：Name_Not_Found：livedoor06/04/02(土) 03:06:16 ID:???

いや、中身が画像のみのa要素にclassつけようよ。

749 ：744：livedoor06/04/02(土) 03:27:46 ID:mmzOMhej

a.link{boder-botom:#444444 1px dotted;}
a.img:link{boder:0}

<a href="test.html">TEST</a>
<a href="test.html"><img src="btn.gif" boder="0" class="img"></a>

どこか間違っているでしょうか…

750 ：745：livedoor06/04/02(土) 03:37:33 ID:???

>>749
なぁなぁ、俺のレス見てくれた？
あれをやりたいんじゃないの？

751 ：744：livedoor06/04/02(土) 03:40:08 ID:mmzOMhej

745さんでしょうか。
試してみたのですがうまく消えず…。すみません。

752 ：Name_Not_Found：livedoor06/04/02(土) 03:45:17 ID:???

>>751
文字には下線（ドット）を。
画像には何も付けないんでしょ？
あれでできるが…。

何がしたいのかイマイチ分からん。

753 ：744：livedoor06/04/02(土) 03:47:06 ID:mmzOMhej

あああああ!imgタグにclassを書き込んでいました…。
うまくいかなくて当たり前ですね…。無事消すことができました。
お騒がせしてすみません。本当にありがとうございました。

754 ：744：livedoor06/04/02(土) 03:55:46 ID:???

あの、ちなみにアクセス解析用に貼っている画像からは消えないのですが…。
<script src="ｱﾄﾞﾚｽ"></script>
というタグで呼び出しています。忍者TOOLSさんのものです。

755 ：Name_Not_Found：livedoor06/04/02(土) 04:19:49 ID:???

文脈セレクタを使いなさい

756 ：744：livedoor06/04/02(土) 04:31:55 ID:???

script{boder:0}
ではダメなのでしょうか…？

>>5 のサイト様も読んだのですがよくわかりません…

757 ：Name_Not_Found：livedoor06/04/02(土) 05:03:44 ID:???

まずHTMLから勉強しなさい。script要素は画像を表示する要素ではありません。
script要素によってa要素とかimg要素とかが動的に追加されているんです。

758 ：Name_Not_Found：livedoor06/04/02(土) 05:07:37 ID:???

>>754
何がどう消えないのか分からない。
試しに↓書いてhtmlフィアル作ってみたけど画像にライン出ないぞ？

<style type="text/css">

</style>

<a href="#">LINK</a>
<script type="text/javascript">

</script>

759 ：Name_Not_Found：livedoor06/04/02(土) 05:13:36 ID:???

boder・・・

760 ：759：livedoor06/04/02(土) 05:15:36 ID:???

botomとかフィアルとか、四月バカかぁぁぁ！と思ったけどもう4/2じゃないか。寝る。

761 ：744：livedoor06/04/02(土) 05:46:07 ID:mmzOMhej

すみません。写し間違いです…。作業しているファイルではbottom border で書いてます。
解析の呼び出しが
<script src="http://IDを含むアドレス"></script>
<noscript><a href="http://IDを含むアドレス"><img src="http://IDを含むアドレス" boder="0"><br>
<a href="http://neutrals.jp">ホームページ制作</a></noscript>
となっています。
noscript時の方はclass指定できたのですが、切ってない時に出る画像に下線が入ってしまうので…。
こんな時間にお付き合い頂いてありがとうございました。
もう少しHTML解説サイト様を読んでみます

762 ：759：livedoor06/04/02(土) 06:34:32 ID:???

あ、俺は>>758にレスしたんだよ。回答は他の人にしてもらってくれ。おやすみ。

763 ：Name_Not_Found：livedoor06/04/02(土) 08:52:22 ID:BhMkSWIl

あるブロック要素内にだけ、a:hoverやa:linkを適用させるにはどう記述したらよいですか？？

764 ：Name_Not_Found：livedoor06/04/02(土) 08:56:49 ID:???

あるブロック要素 a:hover { 適当; }
　　　　　　　　　　↑スペースで区切って並べる

765 ：Name_Not_Found：livedoor06/04/02(土) 09:06:24 ID:BhMkSWIl

>>764

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

766 ：Name_Not_Found：livedoor06/04/02(土) 09:50:35 ID:nw7iku4H

width:700pxに指定したボックスにテキストを入力したのですが
IEではぴったりと幅があっているのに
NNやfirefoxだとやや幅が右にはみ出します。

paddingを消すと両方ともぴったり合うのですが、
そうなるとテキストがボックスにぴったりくっついてしまって
読みづらいです。
対処方法はありますか？

767 ：Name_Not_Found：livedoor06/04/02(土) 09:59:25 ID:???

FAQくらい読もうよ

768 ：Name_Not_Found：livedoor06/04/02(土) 10:19:21 ID:BhMkSWIl

http://www.mushline.com/

ここのトップの丸いリンク背景、スタイルシートみたいなのですが、いったいどういう理屈、仕組みでなりたっているか
教えてください。また、ここはスタイルシートが@inportしてあるのですが、その場合cssの呼び出し方を教えてください。

769 ：Name_Not_Found：livedoor06/04/02(土) 11:06:58 ID:???

>768
そのサイトのFAQのQ4は読んだのかい？

770 ：Name_Not_Found：livedoor06/04/02(土) 11:35:10 ID:BhMkSWIl

>>768

このページは保存できませんでしたって出ます。。。。。。。なんでー

771 ：Name_Not_Found：livedoor06/04/02(土) 12:24:28 ID:???

>>770
だったら、あきらめろ

772 ：Name_Not_Found：livedoor06/04/02(土) 12:24:29 ID:???

>>770
CSS見ればすべて書いてあるんだからさ、ちょっとは頑張ろうぜ。
というかそのサイトの人が自分で書いてるじゃないの。
ttp://www.mushline.com/junky/2003/111523.shtml
ttp://wellstyled.com/css-nopreload-rollovers.html

773 ：Name_Not_Found：livedoor06/04/02(土) 13:11:04 ID:???

>>772

ほんとだー。よく気づきましたね！

つーか、CSS解析する気は十分あるんですが、@importってなってて、そこから先のCSSをどうやって呼び出したら
よいかわからなかったもので。。すみません、がんばってググります

774 ：758：livedoor06/04/02(土) 13:31:41 ID:???

やべ～～！超恥ずかしいｏｒｚ
>>749をコピペしたんだけどboderとかbotomとか何だよ…。気づかんかった…。
自分で書いた>>745ではborder、bottomって書いてあるんで叱らないでネ。

775 ：Name_Not_Found：livedoor6年,2005/04/02(土) 17:59:13 ID:???

質問です。
cssはcssというディレクトリの中にstyle.cssというファイルを作り、まとめて管理しています。
ですが、indexだけはcssがどうしても反映されません。
その原因と解決方法を教えてください。

<style TYPE="text/css">と試した場合では、特に問題はありませんでした。
ので、普通に書いた方が早いですかね…。

OS：win　XP（SP2）
ブラウザ：N.N　7.1（動作確認のためIE　6.0も使用）

776 ：Name_Not_Found：livedoor6年,2005/04/02(土) 18:02:37 ID:???

>775
あのね、君は../css/style.cssって指定しているからマズイんだと思うんだ
./css/style.cssって指定すれば良いんじゃないかな

ディレクトリの勉強しような

777 ：Name_Not_Found：livedoor6年,2005/04/02(土) 18:08:59 ID:???

えーっと、そういう指定方法ではなくて、<body class="XXXBody">で指定してます。
他のページはこの方法で平気なので、間違ってはいないはずなんですが…。

ちなみに、style.cssの記述方法
body.XXXBody {
background-image: url();
background-repeat: repeat;
}
以下、cssを並べる

778 ：Name_Not_Found：livedoor6年,2005/04/02(土) 18:18:15 ID:???

もちろんindexも他のhtmlと同じディレクトリにあるんですよね？

779 ：Name_Not_Found：livedoor6年,2005/04/02(土) 18:24:08 ID:???

話がかみ合ってないな

780 ：Name_Not_Found：livedoor6年,2005/04/02(土) 18:31:24 ID:???

本当にすみません、反映されました。
<link href="css/style.css" rel="stylesheet" type="text/css">の一行が抜けていました。
本当に初歩の初歩の話ですよね。
お手数をかけました。
そして、ありがとうございました。

781 ：Name_Not_Found：livedoor6年,2005/04/02(土) 18:34:16 ID:???

初歩の初歩どころじゃないぞ

782 ：Name_Not_Found：livedoor6年,2005/04/02(土) 19:11:18 ID:???

>>777
>body.XXXBody
body#XXXBody じゃないのか？

783 ：Name_Not_Found：livedoor6年,2005/04/02(土) 19:55:10 ID:???

>>780
おいおい四月馬鹿は今日なくて昨日だぜ。

784 ：Name_Not_Found：livedoor6年,2005/04/02(土) 20:43:23 ID:???

あーざす！

785 ：Name_Not_Found：2005/04/03(日) 00:00:52 ID:???

>>782
>>783

786 ：Name_Not_Found：2005/04/03(日) 02:22:21 ID:???

>>780
ﾜﾛﾀ

787 ：Name_Not_Found：2005/04/03(日) 02:22:28 ID:+rEDIzUq

>>736
ネスケ7.1でし。すいません。

788 ：Name_Not_Found：2005/04/03(日) 02:31:21 ID:???

>>787
そうでなくてテンプレのFAQを読めってこと

789 ：Name_Not_Found：2005/04/03(日) 05:37:25 ID:yTdLzWoW

すいません。質問です。

ブラウザによる表示の違いの問題だけど、
一般的にはボックスの幅 width だけ気をつけておけばいいですよね？
それ以外で特に気をつけるポイントあるでしょうか？

790 ：Name_Not_Found：2005/04/03(日) 05:43:38 ID:???

>>789
よくﾜｶﾗﾝがありまくりな稀ｶﾞｽ。

791 ：Name_Not_Found：2005/04/03(日) 08:08:41 ID:???

>>789
たくさんあってかききれません

792 ：Name_Not_Found：2005/04/03(日) 23:23:49 ID:???

画像や領域をリンクに設定して、クリックした時に点線が出るのを
表示しないようにってできますでしょうか？

793 ：Name_Not_Found：2005/04/03(日) 23:55:10 ID:???

outlineかな。対応ブラウザは少ない。

794 ：Name_Not_Found：2005/04/04(月) 01:21:51 ID:???

>>792
試してないがJavaScriptでblur()するのもありかも。

795 ：Name_Not_Found：2005/04/04(月) 10:35:25 ID:???

>>792
それ、禿しく使いにくいんだけんど、やるのかい？

796 ：Name_Not_Found：2005/04/04(月) 13:13:21 ID:xNLba3SM

テーブルを極細にする方法がわからん。
table {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
ってやると右、下は細くなるが上、左が細くならん。
しかも、内側の線は全くかわらんのよ。
なぜだ？

797 ：Name_Not_Found：2005/04/04(月) 13:44:36 ID:???

>>796
td

798 ：Name_Not_Found：2005/04/04(月) 19:01:57 ID:XAX+vNDD

cssでフォームのボタンを画像に変えたいのですが、うまくいきません。

input type="submit" を　input type="image"

に変えた場合、動作しなくなるということはあるのでしょうか？

ちなみにブログサービスでのお話です。フォームの受け手がsubmitじゃないと
ダメってことはありえるのかなーって思いまして。

799 ：Name_Not_Found：2005/04/04(月) 19:35:55 ID:???

>>798
> cssで
ここがわからん

800 ：Name_Not_Found：2005/04/04(月) 19:41:40 ID:???

どんな解像度のクライアント環境でも、
ウィンドウの最下方にblock要素を配置するにはどうしたらいいでしょうか？

801 ：798：2005/04/04(月) 20:11:33 ID:XAX+vNDD

そっか、よく考えたらcssじゃないか…。ゴメンなさい。

802 ：Name_Not_Found：2005/04/04(月) 20:39:02 ID:1JkGT+DH

div#original
{
float:left;
width:50%;
}

div#critical
{
float:left;
width:50%;
}
div.status
{
clear:left;
}

div#criticalにも、width:50%がいるのはなぜですか？

803 ：Name_Not_Found：2005/04/04(月) 20:51:29 ID:???

ソースを書いた方に聞いてください

804 ：Name_Not_Found：2005/04/04(月) 22:15:56 ID:???

>>802
自分に聞けよ

805 ：Name_Not_Found：2005/04/04(月) 22:57:14 ID:NRCmfWH9

<div class="aaa">　　</div>

で囲んであるリスト項目があるとして、その囲んであるリストだけに効果を与えようとしたら、どうやって
記述したらよいでしょうか？？？

806 ：Name_Not_Found：2005/04/04(月) 23:15:39 ID:???

>>805
囲んであるリスト項目だけに効果を与える記述をしたらいいんだ

807 ：Name_Not_Found：2005/04/04(月) 23:19:29 ID:???

魚を与えるより、釣り方を教えよという言葉があるけれど
とりあえず魚だけｸﾚｸﾚって人の方が多いんだよな。

808 ：Name_Not_Found：2005/04/04(月) 23:40:32 ID:???

>>805
.aaa ul {}
.aaa li {}

809 ：Name_Not_Found：2005/04/05(火) 00:33:53 ID:???

gooがcss

810 ：Name_Not_Found：2005/04/05(火) 01:14:58 ID:???

firefoxと netscapeでボックスの上端になぜか余白があくのは何でですか！！？
もうどーなってんの！！？？プンプン！！

811 ：Name_Not_Found：2005/04/05(火) 01:33:24 ID:???

クマー？

812 ：Name_Not_Found：2005/04/05(火) 02:03:02 ID:???

>>810
そのボックス（ブロックレベルに限るけど）の中の、
一番目のブロックの上マージンではなかろうか。

もしくは、vetrical-alignがbaselineになっていて、ベースラインから下の分が
空白に見えるとか。

813 ：Name_Not_Found：2005/04/05(火) 10:15:11 ID:???

>>810
検証くらい自分でしょうな。

814 ：Name_Not_Found：2005/04/05(火) 11:26:30 ID:cE/GYQr3

リスト項目を横並びにしてナビゲージョンバーをつくりたいんですが、

<li>をflortさせるしか横並びにする方法はないのでしょうか？？これだとpでやるよりかなり
ややこしくなるのですが。。

815 ：Name_Not_Found：2005/04/05(火) 11:33:55 ID:???

>>814
display:inline;

816 ：Name_Not_Found：2005/04/05(火) 13:22:19 ID:bV8rM8SQ

817 ：Name_Not_Found：2005/04/05(火) 13:58:20 ID:???

818 ：Name_Not_Found：2005/04/05(火) 17:32:08 ID:cE/GYQr3

flort三段組のレイアウトのとき、相対表示にするとウインドウを小さくしたときに回りこみが解除され、
レイアウトがくずれます。相対表示を維持しながら、縮小してもレイアウト崩れないなんて方法ありますか？？

819 ：Name_Not_Found：2005/04/05(火) 18:12:35 ID:???

ソースを（ｒｙ

820 ：Name_Not_Found：2005/04/05(火) 18:36:46 ID:???

>>818
幅を%で指定しているなら、合計の値をすこし小さくする。
今、合計99%とかなら、98,97%とかにしてみる。

あるいは、min-widthを指定する。

とか、ごにょごにょ。

821 ：Name_Not_Found：2005/04/05(火) 19:27:44 ID:???

ｽﾀｲﾙｼｰﾄで構築したのに
MAC IE5じゃ表示すらされず･･･
よくある原因は何でしょうか？

WIN IEだと問題ないのに･･･

822 ：Name_Not_Found：2005/04/05(火) 19:44:44 ID:???

取りあえず HTML Validator と CSS Validator にかけてミナ

823 ：821：2005/04/05(火) 19:58:05 ID:???

>>822
HTML Validatorは79点
CSS Validatorはｴﾗｰ二個

二個でもｴﾗｰあると表示されないﾓﾉでしょうか？

824 ：Name_Not_Found：2005/04/05(火) 20:22:25 ID:???

>>821
表示されないっていうのはどういう意味？
もっと詳しく書いてくれなきゃ答えたくても無理だよ。

825 ：821：2005/04/05(火) 22:22:24 ID:???

>>824
なぜかずーっと、読み込もうとして
そのまま進まない状態です・・・。
ブラウザのステータスバーで目盛りが全然進みません。

他のサイトだとそういうことはないので
回線が止まってるとか、ブラウザがおかしいとかではないと思います。

826 ：Name_Not_Found：2005/04/05(火) 23:16:21 ID:???

htmlの閉じタグかな？

827 ：Name_Not_Found：2005/04/05(火) 23:25:23 ID:???

>823

＞二個でもｴﾗｰあると表示されないﾓﾉでしょうか？
それよりまずHTMLを何とかすべき
100点でなくてもいいけど何がエラーでそれをどう直すとか調べた？

828 ：Name_Not_Found：2005/04/05(火) 23:31:59 ID:???

JavaScript質問スレから誘導でこちらに来させて頂きました。

ページを印刷する必要があるのですが、WEBページでの表示は　ロゴ部分＋データ表示部分　となっております。
ブラウザからページ印刷をすると、印刷の際には不要なロゴ部分も印刷されてしまうので、
データ部分を選択して、選択部分を印刷しております。

ところが、この工程が不評なので、簡略化・自動化などを考えておる状態です。

質問なのですが、
ページ全体を印刷　した時、CSSでロゴ部分は印刷されないorデータ部分のみを印刷
と言う情報を組み込む事は可能でしょうか？

よろしくお願いします。

829 ：Name_Not_Found：2005/04/05(火) 23:34:57 ID:???

>>828
@media つうのを調べてみなされ、その上でわからなかったら、また、どうぞ。

830 ：821：2005/04/06(水) 00:16:58 ID:???

>>827
それほど問題のあるエラーじゃないような・・・。
imgにBORDER=0があるよ　と言う程度

CSSも、そのページに使っていないものなので
影響ないかと。

831 ：Name_Not_Found：2005/04/06(水) 06:20:13 ID:n+CV8JbB

IE6で、
overflow:autoにしたdiv要素内にフォーカスを当てると、
スクロールバーが出ていなくても
キーによる画面全体のスクロールが効かなくなります。
div要素にキーイベントが飲み込まれているのだと思います。
スクロールバーが出ている時ならユーザーも分かると思いますが
出ていない時になるので、
ユーザビリティーがかなり悪いです。
これはどうすれば解決出来るでしょうか？

832 ：Name_Not_Found：2005/04/06(水) 07:37:39 ID:???

>>825
ローカルで表示した場合は大丈夫なんだろうね？
ちゃんとアップロード出来てないとか、そんな話ではないことを祈るよｗ

適当にアーカイブしてうｐろだにあげてもらった方が楽でいいけど。。

833 ：Name_Not_Found：2005/04/06(水) 09:05:45 ID:???

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

@mediaを検索したのですが、「＠」　「media」　と別単語扱いになってしまうらしく、
「@media」としてヒットさせる事ができずに、上手く調べられませんでした。

外注しようと考えているのですが、ブラウザ改造のプログラムハウスに投げるか、
それともCSSで可能ならばWEB製作事務所に投げられるか、と言う所で考えております。

アドバイス頂けると嬉しいです。

834 ：Name_Not_Found：2005/04/06(水) 09:47:18 ID:???

まずはgoogleの使い方からだな…
"@media"で検索してみ

835 ：Name_Not_Found：2005/04/06(水) 11:11:13 ID:UuEkm2yC

CSS@mediaで調べてみました。

ページ全体を印刷　させた時に、CSSで印刷させる領域（部分）と印刷させないでブラウザ表示だけの領域
と設定出来ると言う認識でよろしいでしょうか？

ロゴ部分（A部分）とデータ部分（B部分）があるとして、
ブラウザ上で閲覧する時には、A＋Bが表示されていても、
「ページを印刷」するとBのみが印刷される。

と言う形になりそうですね。
同時に、データ部分が大きくなった際には印刷の時だけ1ページに押し込むなども可能ですか？＞CSS

もしも認識が間違っている部分があったらご指摘ください。
認識が正しいようでしたら、CSSが得意なWEB事務所に外注する事が出来そうです。
どうも度々ありがとうございました。

836 ：Name_Not_Found：2005/04/06(水) 11:22:04 ID:???

>>835
そんな大層なもんじゃないが。これ表示して印刷してみれ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>???</title>
<style type="text/css">
@media print {
#d0 { display: none }
}
@media screen {
#d1 { display: none }
}
</style>
</head><body>
<div id="d0">あいうえお</div>
<div id="d1">かきくけこ</div>
</body></html>

837 ：Name_Not_Found：2005/04/06(水) 11:35:47 ID:???

>>835
外注先がCSSに関して信頼できるなら、そこにとりあえず依頼してみれば済んでいたのでは

838 ：Name_Not_Found：2005/04/06(水) 11:54:55 ID:???

>>836
ありがとうございます。これから確認してみます。

>>837
印刷の時に表示させない　||　目的の部分だけを印刷する
と言う方法を調べておりました。
CSSでそれが実現出来るのを知ったのも先ほどでした。
複雑なプログラムが必要かと思っておりましたので、
WEB事務所に注文するべきか、プログラムハウスに注文すべきかを調べていた次第にございます。

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

839 ：Name_Not_Found：2005/04/06(水) 11:59:36 ID:???

>>836
確認してみました。

@media print で指定された　id　要素が　display：none　でhiddenとなるようですね。
先ほど調べたサイトで、screen　がディスプレイ上に表示させるプロパティと記憶していたので、
このような挙動になったと勉強になりました。

このソースを下に、既にWEB事務所に追加外注の形でなんとかなりそうです。

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

840 ：Name_Not_Found：2005/04/06(水) 12:13:25 ID:???

日本語おかしかったです。すみません。

CSSも奥が深そうですね。
色々と商用で便利に使えそうだと感じました。

今度CSSの勉強もしてみます。そのときはまたよろしくお願いします。
であであ。

841 ：Name_Not_Found：2005/04/06(水) 12:23:57 ID:???

css 生かすも殺すも自分次第

842 ：Name_Not_Found：2005/04/06(水) 12:33:37 ID:???

頭悪い奴は無駄が多いんだよなあ

843 ：Name_Not_Found：2005/04/06(水) 12:38:56 ID:???

ぢゃあ俺はきっと馬鹿だな

844 ：Name_Not_Found：2005/04/06(水) 13:22:14 ID:???

俺は不器用な男だからな

845 ：Name_Not_Found：2005/04/06(水) 13:48:38 ID:???

不器用で短小包茎で禿なおいらはどしたらいいんかいな？

846 ：Name_Not_Found：2005/04/06(水) 14:26:03 ID:eVqO8zU8

<h3><div ..><img ...></div></h3>

という記述は文法的にダメのようなので

<h3><img ...></h3>

という記述で
h3 img {...}
というスタイルシートを作りましたが
問題ない？

847 ：Name_Not_Found：2005/04/06(水) 14:34:15 ID:???

はい

848 ：Name_Not_Found：2005/04/06(水) 14:39:21 ID:???

>>846
> <h3><div ..><img ...></div></h3>
>
> という記述は文法的にダメのようなので

ん？
hnってブロック含んでもよかったんじゃなかったっけ？

849 ：Name_Not_Found：2005/04/06(水) 14:43:01 ID:???

>>848
hは要素内にブロックモデルを入れることができない
ってwebdesigning4月号に書いてある。

850 ：Name_Not_Found：2005/04/06(水) 14:55:23 ID:???

>>849
仕様書参照しろよ。あってるけど。

851 ：Name_Not_Found：2005/04/06(水) 15:05:24 ID:???

不器用って言えば納得されると思ってんじゃねーよ
素直に童貞って言え

852 ：Name_Not_Found：2005/04/06(水) 15:08:42 ID:665b4MZR

つーか素直に<span>という選択肢は無いのか？？

853 ：Name_Not_Found：2005/04/06(水) 15:27:54 ID:???

アホかｵﾏｲは

854 ：Name_Not_Found：2005/04/06(水) 15:50:06 ID:???

ヒットしちゃったぁ？m9(＾Д＾)ﾌﾟｷﾞｬｰ

855 ：846：2005/04/06(水) 16:12:23 ID:eVqO8zU8

で、答えは何ﾃﾞｨｽか？
spanを使えばよいと言うことでしょうか？

856 ：Name_Not_Found：2005/04/06(水) 16:22:20 ID:???

何をしたいのかが解らんのでなんとも言えんが、普通はspanなんざ挟む必要性は無い

857 ：846：2005/04/06(水) 16:24:28 ID:???

>>856
下に10pxぐらいｽﾍﾟｰｽを作りたいのﾃﾞｨｽ

858 ：Name_Not_Found：2005/04/06(水) 16:25:45 ID:???

君が書いたので問題ないよ

859 ：Name_Not_Found：2005/04/06(水) 17:02:19 ID:???

ttp://hl.fpsjp.org/
このようなサイトを表現するとなると、やっぱりCSSですか？
phpはできそうにないので。。。

860 ：Name_Not_Found：2005/04/06(水) 17:10:09 ID:???

>>859
なんか、かんちがいしてるぞ。

861 ：Name_Not_Found：2005/04/06(水) 17:12:00 ID:???

>>860
どういった所でしょうか？
まだ全然分かっていない状態なので、おかしな所があれば教えていただきたいのですが。

ちなみに他スレで
「ttp://hl.fpsjp.org/のようなサイトはHTMLで表現できますか？」
ときいてみると、「スタイルシート使え」といわれたもので。

862 ：Name_Not_Found：2005/04/06(水) 17:19:59 ID:???

>>861
んーとな、PHP,HTML,CSSがそれぞれどういう技術か？と言うことを把握してないだろ？

まぁ、CSSでやるってんで、良いと思うがな。（TABLE使ってもできるだろうけどさ）

863 ：Name_Not_Found：2005/04/06(水) 17:22:54 ID:???

>>862
PHPはサーバサイドプログラミングってくらいしか理解できてません(汗
とりあず、CSSでやるということは正解なのですか。良かったです。

864 ：Name_Not_Found：2005/04/06(水) 17:23:31 ID:???

>>863
たぶんその「サーバサイドプログラミング」の意味がわかってないだろう……

865 ：Name_Not_Found：2005/04/06(水) 18:56:21 ID:???

>>859
麻婆豆腐
このような料理を作るとなると、やっぱり豆板醤ですか？
圧力鍋ではできそうにないので。。。

というくらい変。

866 ：Name_Not_Found：2005/04/06(水) 18:56:44 ID:???

これはネタなのか？
玩んでイイのか？
それともスルーするか？
次逝くか？

867 ：Name_Not_Found：2005/04/06(水) 21:34:00 ID:pWlOw28+

すみません、クラスの使い方が解らないので教えてください
現在使っている、スタイルのソース以下の通りです
<style type="text/css">

</style>

リンクの色をグレーだけでなく、一部分だけピンクに変更したくて
クラスについて超初心者向けのページで勉強して
ソースの一部を弄ったのですが、
リンクの下線が現れたり訳のわからない事になってしまいました
どこを、どのようにして指定すればいいのでしょうか？
宜しくお願いします

868 ：Name_Not_Found：2005/04/06(水) 21:40:36 ID:???

a.クラス名:link{
color:#******;
text-decoration:none;
}
後はよしなに・・・

869 ：Name_Not_Found：2005/04/06(水) 21:43:24 ID:???

くだらない質問だと思いますが…

今、ロケットＢＢＳ用のスキン（ＲＢＭＬ）を作っているのですが
どうしても文字サイズが小さくならない…
スタイルシートで一括指定、ということになってるんですが…

body{
color : #7F7F7F;
font-family : Osaka, Verdana, Arial;
font-size : x-small;
　　　background-color : #FFFFFF;
scrollbar-3dlight-color : #FF8080;
scrollbar-arrow-color : #FF8080;
scrollbar-base-color : #FFFFFF;
scrollbar-darkshadow-color : #FF8080;
scrollbar-face-color : #FFFFFF;
scrollbar-highlight-color : #FFFFFF;
scrollbar-shadow-color : #FFFFFF;
}

何か間違いありますか？？どうか御教示願います…
実際の文字はテーブル内に表示されるようになってるんですが、
…適用されますよね！？
ちなみに<small>タグは効いてるｗ　みたいなんですが
ひょっとしてそれがダメ、とか…！？

長文ｽﾏｿです。

870 ：Name_Not_Found：2005/04/06(水) 21:43:40 ID:WDlNgEy4

フレームの幅をcssで調整することは可能ですか？

871 ：Name_Not_Found：2005/04/06(水) 21:46:13 ID:???

tableのセンタリングで悩んでたら、ちゃんとテンプレがあった。
やっぱFAQには載るレベルの話なんだ。俺だけが桁外れに
バカすぎるってわけじゃないんだな。良かった良かった。
テンプレまとめてくれてる人たち、ありがとう。これから
リンク先読み漁ります。

以上、感謝の言葉だけ。質問なくてｽﾏｿ。

872 ：Name_Not_Found：2005/04/06(水) 21:55:40 ID:???

>>869 >…適用されますよね！？
自分で検証出来るだろ？　　

873 ：Name_Not_Found：2005/04/06(水) 21:59:45 ID:???

フォント指定しないでほしいな
Osaka汚い

874 ：Name_Not_Found：2005/04/06(水) 22:21:28 ID:???

>>873
マカーは MS ゴシック見て汚いって言うね
お互い様じゃない？

875 ：Name_Not_Found：2005/04/06(水) 22:24:17 ID:???

んだんだ

876 ：Name_Not_Found：2005/04/06(水) 22:55:34 ID:???

無指定が一番良いのじゃ

877 ：Name_Not_Found：2005/04/06(水) 23:24:16 ID:???

せっかく高解像度のモニタでアンチエイリアスかかるフォントを
使ってるのにMS Pゴシックとか指定されると・・・
Macも持ってるが、せっかくヒラギノなのに、
MSゴシックとかOsakaとか余計なお世話って感じ

ところで、MS Pゴシックなんて
なんで皆、そうするのが普通であるかのように指定するんだ？

878 ：Name_Not_Found：2005/04/06(水) 23:28:08 ID:???

>>877
sans-serif だけだと化ける糞ブラウザがあるから。

879 ：Name_Not_Found：2005/04/07(木) 00:01:44 ID:???

>>877
ヒラギノって見出し向けの懐の広い書体だから、
網になると読むのきつくね？

880 ：Name_Not_Found：2005/04/07(木) 00:03:45 ID:???

>>877
そんなに不満ならユーザースタイルシート使えば？

881 ：Name_Not_Found：2005/04/07(木) 02:24:23 ID:???

ユーザースタイルシートなんか使わなくても
IE なら"ユーザー補助"の "Web ページで指定されたフォントスタイルを使用しない"
Firefox なら"全般"の "フォント/色" の "常に自分の設定を使用する" の "フォント" にチェックを付ければいいだけ。

882 ：870：2005/04/07(木) 02:30:40 ID:abrOR9aa

スルーかよ豚ども。
さっさと教えろ

883 ：Name_Not_Found：2005/04/07(木) 02:40:58 ID:???

>>882
　>>6

884 ：Name_Not_Found：2005/04/07(木) 02:42:47 ID:???

ユーザースタイルシート使えってよく言うけど、
つーか使ってるけど、ウェブ板的にはどうかと思うぜ。

885 ：Name_Not_Found：2005/04/07(木) 07:23:07 ID:???

>>877

・Winユーザーでの見え方のチェックが必須、標準環境とする
・で、明朝系がデフォルトのブラウザがあるわけだ
・で、多くのページではゴシックの方があう
・で、製作環境にヒラギノが入っている
・ヒラギノ最優先だと、普通のWinユーザーの見え方がわからん

886 ：Name_Not_Found：2005/04/07(木) 10:18:02 ID:???

>>884
>>1

887 ：Name_Not_Found：2005/04/07(木) 11:05:28 ID:???

>>877
フラッシュにフォント埋め込めよ。
くだらねぇ事でグチグチ言わずに、表現したい通りにやれや。

888 ：Name_Not_Found：2005/04/07(木) 12:53:06 ID:???

そのスキルが無いんだよ、きっと。

889 ：Name_Not_Found：2005/04/07(木) 13:40:38 ID:???

font指定は豆字固定と大差ない！

890 ：Name_Not_Found：2005/04/07(木) 14:18:02 ID:???

んなわけないだろ

891 ：Name_Not_Found：2005/04/07(木) 14:36:37 ID:???

CSSのソフトでオススメのものはどれですか？

892 ：Name_Not_Found：2005/04/07(木) 15:15:47 ID:???

>>891
本でも買って手打ちしろ
ゴミが溜まってもいいならドリームウィーバー使え

893 ：Name_Not_Found：2005/04/07(木) 15:36:46 ID:2qEVjuLi

画像を中央寄せするのにHTMLを
<div id="img"><img src="hogehoge.jpg"></div>
と記述し、スタイルシートを
#img{
text-align: center;
}
でやっているのですが、textという点が意味不明です。
もっとスマートに寄せる方法は無いのでしょうか。

894 ：Name_Not_Found：2005/04/07(木) 15:51:28 ID:???

margin: 0 auto;　　　標準でね。

895 ：Name_Not_Found：2005/04/07(木) 17:55:13 ID:???

teutikadori-muwi-ba-desuka.arigatougozaimasita.

896 ：Name_Not_Found：2005/04/07(木) 18:00:22 ID:???

わがんね

897 ：Name_Not_Found：2005/04/07(木) 18:57:44 ID:???

>>893
hogehoge.jpg が文字などの置き換えであるならそれで問題なし。
絵だとか写真だとかでストリクトな記述にしたいんだったら、
#img{
width: 画像サイズpx;
margin: 0 auto;
}
とか、
#img img{
display: block;
margin: 0 auto;
}
とかどう？

898 ：Name_Not_Found：2005/04/07(木) 19:33:08 ID:dqfsHkY+

<body>
<div id="head">
<p>aaaaa</p>
</div>
<div id="foot">
<address>abcdef</address>
</div>
</body>

#foot{
display:absolute;
bottom:0;
}

とやると、id="foot" がブラウザの一番下に表示されて思った通りのレイアウトに
なるのですが、スクロールバーが出るくらいのボリュームになったときにも常に
id="foot" が見えてしまっています。（前のコンテンツにかぶって表示される）
これを回避するには、どういった記述をすればいいのでしょうか？

899 ：Name_Not_Found：2005/04/07(木) 21:24:28 ID:???

>>894
>>897
ありがとうございます。
その記述を試してみたんですが、寄りませんでしたorz

900 ：Name_Not_Found：2005/04/07(木) 21:59:14 ID:???

>>899
うちのFirefoxだと >>897 の指定両方とも動くが。
ちなみに、IEとかだと腐ってるから margin: 0 auto; が効かない。

901 ：Name_Not_Found：2005/04/07(木) 22:24:20 ID:???

>>898
違うことを同時にやろうとしても埒は空かないよ。
JavaScriptでコンテンツの高さとウィンドウの高さを比べて、
スタイルを切り替えるのも手。

902 ：Name_Not_Found：2005/04/07(木) 23:11:44 ID:???

>>899　>>900
標準モードならＩＥでもセンターに来るよ。
>894に書いてあるだろ

903 ：Name_Not_Found：2005/04/07(木) 23:37:51 ID:???

<!DOCTYPE 知らなかったりして・・・

904 ：Name_Not_Found：2005/04/07(木) 23:43:27 ID:???

知らなくてもしなねーよ
DOCTYPE強要する奴はキモいんだから
大人しくテーブル勧めときゃいいんだよ

905 ：Name_Not_Found：2005/04/07(木) 23:52:01 ID:???

>>904
煽りご苦労さんだねぇ・・・

906 ：Name_Not_Found：2005/04/08(金) 00:31:10 ID:???

>>904
夜毎シヌシヌ言ってたのはおまいだろうが！

907 ：900：2005/04/08(金) 08:59:42 ID:???

>>902 >>903
<!DOCTYPE はやってる
がセンターにならねぇYO！ヽ(｀∀´)ノ
と思ってぐぐってみたらXML宣言ありだとIEは互換モードになるのな。

というわけでXML宣言削ったりHTML4.01とかにしたら動いたわ。
どっちにしても腐ってるな。

908 ：Name_Not_Found：2005/04/08(金) 09:37:00 ID:???

古いIEを使っている人ってまだいるから、text-align: center; の記述もまだ必要なんだろうな。

909 ：Name_Not_Found：2005/04/08(金) 13:35:26 ID:2tZF+UM/

ttp://connect.seesaa.net/

こういうスタイルシートを作りたいんですが、サイドメニューとメインコンテンツの境界線の縦線を引くには
どこにどういった記述をすればできますか？

910 ：Name_Not_Found：2005/04/08(金) 14:00:25 ID:???

画像を同行内で左右に配置することはできませんか？
テーブルだと簡単だけどさ

911 ：Name_Not_Found：2005/04/08(金) 14:01:27 ID:???

>>909
君、初心者すぎないか？
勉強不足杉。

912 ：Name_Not_Found：2005/04/08(金) 14:14:58 ID:???

馬鹿だな、HPの宣伝に決まってるだろ！

913 ：Name_Not_Found：2005/04/08(金) 14:17:56 ID:???

>>912
では、スタイルシートで指定するボーダーは
ブラウザによって表示が異なりますよね？
なので、作ったボーダーの画像を縦の区切り線にしたいのですが
方法はありませんか？
テーブルだと簡単だけどさ

914 ：Name_Not_Found：2005/04/08(金) 14:30:47 ID:???

質問でございます。
ITモバイル（http://www.itmedia.co.jp/mobile/）の左側にあるような
メニューを作成したいのですが、
先ず、box1の大きさの中にボタン1～5までがあり、それぞれをボックス指定して、
マウスオーバーするとボックスの中の背景色を変えたいのですが、
リンクの場合、どの様にボックス指定を行えば良いでしょうか？
こんな中途半端な所から行き詰まってしもいました。
どなたかご教授願えないでしょうか？
次にHTMLとCSSの記述を書込みします。
宜しくお願いいたします。

915 ：Name_Not_Found：2005/04/08(金) 14:32:58 ID:???

■HTML(BODY内を記述)
<div id="box1">
<div id="href">
<a href="#1">Button1</a><br>
<a href="#2">Button2</a><br>
<a href="#3">Button3</a><br>
<a href="#4">Button4</a><br>
<a href="#5">Button5</a>
</div>
</div>
</body>
</html>

916 ：Name_Not_Found：2005/04/08(金) 14:33:20 ID:???

■CSS
#box1 {
width:177px;
height:405px;
background-color:#666666;
}

#href a:link {
width:177px;
height:20px;
text-align:center;
color:#000000;
background-color:#ffffff;
}

#href a:hover {
width:177px;
height:20px;
text-align:center;
background-color:#cccccc;
}

917 ：Name_Not_Found：2005/04/08(金) 14:53:43 ID:???

>>914
Block と Inline の勉強してくれ。
話はそれからだ。

918 ：Name_Not_Found：2005/04/08(金) 14:56:09 ID:???

>917
まずhtmlの勉強からだろ

919 ：Name_Not_Found：2005/04/08(金) 15:22:16 ID:???

>>913
テーブルでやるのと同じ感じでやればできるよ。
煽りではなくて、まじで。
手間もそんなにかわんない。

920 ：Name_Not_Found：2005/04/08(金) 15:24:39 ID:???

>>919
CSSでボックスを三つ用意する
最背面のボックスの背景にボーダーの絵を表示させる
前面のボックス二つの背景は白にして間を少しだけ見せる
こうして間に画像のボーダーを表示させる

こういうやり方は駄目ですか？

921 ：Name_Not_Found：2005/04/08(金) 15:24:55 ID:???

>>915
とりあえず
<div id="box1">
<ul>
<li><a href="#1">Button1</a></li>
　　　　　　　：
</ul>
</div>

てな感じにして、a要素をブロック化すれば、先は自ずと見えてくると思うよ。
がんがれ。

922 ：Name_Not_Found：2005/04/08(金) 15:26:00 ID:???

>>917
えらっそうなこといわずに
ブロックとインラインで何が駄目か言えよ！

923 ：Name_Not_Found：2005/04/08(金) 15:26:46 ID:???

>>920
概ねあっていると思います。
ただ背景白にしなくても、transparentのままではいかんの？
そうすれば間をあける手間もいらないし。

924 ：Name_Not_Found：2005/04/08(金) 16:51:12 ID:???

>>922
ｵﾏｲも勉強しろ。

925 ：Name_Not_Found：2005/04/08(金) 20:19:55 ID:???

ここでHTMLからやり直せとか言うやつはスレ違い
HTMLを正しく書かないとCSS使っちゃいけないと
勘違いしてませんか？ｗｗｗｗｗどまｗｗｗｗｗｗ

926 ：Name_Not_Found：2005/04/08(金) 21:04:45 ID:???

>>925
　>>1

927 ：Name_Not_Found：2005/04/08(金) 21:44:05 ID:???

>877 遅レスだが。

ttp://memo.readalittle.net/?date=20050324#p03
こんな記事もあるくらいなので、同意できるところもある。
だが、>885にあることを優先させざるをえないところ。
body要素にidかclassでもつければ、何もしないよりはましかと。

928 ：Name_Not_Found：2005/04/08(金) 23:11:19 ID:OBxZrlmC

h1要素をCSSで
position:absolute;
と指定したところwidthが必要最小限の大きさになってしまいました。
いままでと同じ様にブラウザの横幅いっぱいに指定するにはどうすればいいのでしょうか？
widthで指定するのではなくなるべくどの解像度でも同じ様に見えるようにしたいです。
よろしくお願いします。

929 ：Name_Not_Found：2005/04/08(金) 23:23:41 ID:???

「どの解像度でも同じ」の意味がよくわからんが100%じゃ駄目なのか？
パディングやボーダーを使ってるのなら話は別だが

930 ：928：2005/04/08(金) 23:37:40 ID:???

>>929
最初にそれをやってみたんですが、
マージンでレフトを指定してるため横スクロールバーがでてしまうんですよね。
困った…

931 ：Name_Not_Found：2005/04/08(金) 23:45:51 ID:???

横幅いっぱいじゃないじゃん

932 ：Name_Not_Found：2005/04/08(金) 23:57:07 ID:???

>>930
marginの%分widthから引く

933 ：初心者：2005/04/09(土) 01:09:42 ID:???

absolute で margin をとるとはどういう意図があるのですか？

934 ：Name_Not_Found：2005/04/09(土) 02:12:44 ID:???

>>933
おまい初心者じゃないだろ

935 ：初心者：2005/04/09(土) 03:00:57 ID:???

>>934
ごめんなさい。
煽るとかわいそうと思ったので。。。

936 ：初心者：2005/04/09(土) 05:53:08 ID:???

後ろの穴は初心者ですが何か？

937 ：Name_Not_Found：2005/04/09(土) 11:07:13 ID:???

left: 0; right: 0;で
いけるけどね。

IE以外は。

938 ：質問厨 ◆iP9eDdpuDc ：2005/04/09(土) 15:45:27 ID:???

ttp://www.fromdfj.net/
↑のサイトにとび"grayscale"のスタイルシートを選択してください。

ここで左上と左下と右下に浮遊固定したBOXが現れます。
（背景画像のfixed指定みたいな感じで動きません。）
これはどのような原理で設定されているのですか？
CSSのソースを見ましたが僕にはレベルが高くて分かりませんでした。
このように固定する方法を教えてください。
CSS＞ ttp://www.fromdfj.net/css/grayscale.css

939 ：Name_Not_Found：2005/04/09(土) 15:54:02 ID:???

コピペ

940 ：938質問厨 ◆iP9eDdpuDc ：2005/04/09(土) 16:11:16 ID:???

>>939
固定させるのに最低限必要な箇所が分からないのです。
どうかお教えくださいませ。m(_ _)m

941 ：Name_Not_Found：2005/04/09(土) 16:33:34 ID:A4wOflgP

リスト項目のdisplayを inlineにして、横並びのナビゲーションバーを作っていますが、
a:hoverでボックス全体の背景を変えるときにaに対してdisplayをblockにしますよね。

そうすると、全部縦並びになってしまうのですが、どうすれば横並びを維持したまま
ボックス全体の背景を変えられるでしょうか？

942 ：Name_Not_Found：2005/04/09(土) 16:57:40 ID:???

>>641
li a{display:inline}
ではダメですか？

943 ：Name_Not_Found：2005/04/09(土) 17:01:08 ID:A4wOflgP

>>942
はい、それだと文字の部分の背景のみ変わります。

ボックスの幅全体の背景を変えたいのです。

944 ：Name_Not_Found：2005/04/09(土) 17:16:06 ID:QRJu8hip

margin-top : 0px;
margin-bottom : 0px;
共に0pxに指定しているのですが、FireFoxで表示すると、
margin-topに少しだけ隙間ができてしまい、
margin-top : -8px;
にすると上下は綺麗に揃うのですが、
IEで表示すると上下に隙間ができてしまいます。
IEでも上下に隙間ができないようにはできますでしょうか？
どなたか教えてくださいませ。

html {
height : 100%;
}

body {
height : 100%;
background: #e2deac no-repeat;
}

#box {
width : 710px;
height : 100%;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
background:#ffffff;
}

945 ：Name_Not_Found：2005/04/09(土) 17:40:10 ID:???

>>941
フロート使うのは？

>>944
html, bodyのマージンとパディングも0にするとどうなる？

946 ：Name_Not_Found：2005/04/09(土) 18:38:27 ID:UxqpjHhP

ttp://nothing.but.jp/sb/log/eid127.html

ここのサイトのようなリンクの張った画像にポインタを乗せると罫線を表示させるようにしたいんですが
CSSの記述はどうすればいいですか？

947 ：Name_Not_Found：2005/04/09(土) 19:22:20 ID:7GFn86pd

>945氏

margin : 0px;
padding: 0px;
にした所、どちらも隙間ができなくなりました。
ありがとうございます。
因みにbodyにだけ設定しても同じ結果になるのですが、
htmlの方には記述しなくても大丈夫でしょうか？

948 ：Name_Not_Found：2005/04/09(土) 20:08:59 ID:???

>>946
a:hover img {}
でいいんじゃないの

949 ：Name_Not_Found：2005/04/09(土) 22:10:47 ID:???

>>946
質問の前に最低限CSSについて勉強しろ

950 ：Name_Not_Found：2005/04/09(土) 22:20:27 ID:???

はあ？なに偉そうにしてんの？死ねよ

951 ：Name_Not_Found：2005/04/09(土) 22:24:33 ID:???

すいませんでした。反省してます

952 ：Name_Not_Found：2005/04/09(土) 22:36:45 ID:???

>>950
質問以前の問題

953 ：Name_Not_Found：2005/04/09(土) 22:57:00 ID:???

いいから答えろや糞共
わからない奴は黙ってろ

954 ：Name_Not_Found：2005/04/09(土) 22:59:59 ID:???

>>953
糞したらそのあと何でケツ拭くか？と同じこと

955 ：Name_Not_Found：2005/04/09(土) 23:34:29 ID:???

わからなければ黙ってればいいだろ？
わからないからって何ムキになってんだ？暇人ニート共
俺はテメーラのような社会のクズと違って仕事持ってるから忙しいんだよ！
さっさと答えろや糞カス共

956 ：950：2005/04/09(土) 23:39:07 ID:???

おれは質問者じゃないのだがね。
ここはCSSの質問スレなのに、
質問に答えもしないで、他の問題に転換してるじゃねーか。
答えるほど暇じゃないんなら黙ってていいよ。
忠告するくらい暇なら答えてやりゃいいだろ。

957 ：Name_Not_Found：2005/04/10(日) 00:18:33 ID:???

>>956
m9(＾Д＾)ﾌﾟｷﾞｬｰ

958 ：938質問厨 ◆iP9eDdpuDc ：2005/04/10(日) 00:20:28 ID:???

よろしくお願いします。
>>938
>>940

959 ：Name_Not_Found：2005/04/10(日) 00:24:24 ID:AoVJABJp

テキストの背景に画像が指定できません。。もう五時間ぐらい格闘してます。死にたいです。

なにが悪いのでしょうか？？？

960 ：Name_Not_Found：2005/04/10(日) 00:35:41 ID:???

>>958
position:fixed;
position:expression("absolute");

上のでfirefoxやoperaでポジションが固定されて、
下のでIEが固定される。

961 ：Name_Not_Found：2005/04/10(日) 00:39:59 ID:???

あと、そのサイトのセンスだけは絶対真似しないでね。
技術はいくらでも盗めって感じだけれど。

>>959
とりあえずソース見せてください

962 ：Name_Not_Found：2005/04/10(日) 00:53:55 ID:???

<a href="http://2ch.net" style="width:100%;">

これをIE以外で再現するにはどう記述したらよろしいですか？
もう１０数時間悩んでます。。。　参考リンク先でも結構なのでお願いします。

963 ：Name_Not_Found：2005/04/10(日) 01:00:14 ID:???

>>962
なにがしたいのか理解できないです。
もすこし詳しくたのんます。

964 ：962：2005/04/10(日) 01:13:52 ID:???

>>963
すみません。

下記のような感じで左のTD幅全部を使うようなリンクにしたいんですけど
NCやFireFoxだと背景色が文字の後ろだけしか変わりません。

私の知識では細かく表組みをして再現する方法だけは思いつくのですが
CSSで他にWidthで指定できればと思っています。

<table>
<tr><td width="150">

<a href="http://2ch.net" style="width:100%;background-color:#000">2ch</a><br>

<a href="http://3ch.net" style="width:100%;background-color:#666">3ch</a><br>

<a href="http://4ch.net" style="width:100%;background-color:#fff">4ch</a><br>

</td>

<td width="150">
●●●
</td>
</tr>
</table>

965 ：Name_Not_Found：2005/04/10(日) 01:17:09 ID:AoVJABJp

index.html
｜
｜
｜
/asset/
｜
｜--/img/--aaa.gif
｜
｜--/style/bbb.css

となっているとき、bbb.cssから、url( )などでaaa.gifを指定できるのですか？？？/style/
の下にimgディレクトリが来ないといけないのでしょうか？？できるならば、その場合
どう記述したらよいのでしょうか？？？

わかりにくくてすみません。

966 ：Name_Not_Found：2005/04/10(日) 01:20:38 ID:???

>>965
フルパスでも相対パスでも問題なくいけるでしょう・・・。

967 ：Name_Not_Found：2005/04/10(日) 01:24:01 ID:???

url(../img/aaa.gif)

url(/img/aaa.gif)

url(http://xxx.com/img/aaa.gif)

読み込むHTMLからの相対パスでいけるはず。

968 ：Name_Not_Found：2005/04/10(日) 01:25:33 ID:AoVJABJp

>>966
それが、無理で、
background-image: url(./asset/img/aaa.gif);
だとダメで、styleディレクトリの中にimgディレクトリを入れて、
background-image: url(./img/ro_bunner.jpg);

としたら出来たので。どういうことなんでしょうか？？

969 ：Name_Not_Found：2005/04/10(日) 01:29:24 ID:???

.cssからのパスじゃなくて読み込むファイルからのパスにしてますか？
>>698

970 ：Name_Not_Found：2005/04/10(日) 01:34:26 ID:???

background-image: url(./asset/img/aaa.gif);
↓
background-image: url(/asset/img/aaa.gif);

にすれば無問題

971 ：698：2005/04/10(日) 01:34:57 ID:???

長時間やりすぎて頭が混乱してきました。。。

とりあえず相対パス・絶対パスをもう少し勉強します。。。

ありがとうございました

972 ：Name_Not_Found：2005/04/10(日) 01:43:31 ID:???

ちゃんとCSSファイルからの相対パスにしとけよ。 ../../img/aaa.gif

973 ：Name_Not_Found：2005/04/10(日) 01:45:38 ID:???

13 ：Name_Not_Found：05/03/08 08:48:54 ID:???
前々スレからの持ち越し。 (＾＾;

テンプレ中の
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）は
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
↓に移転。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html

CSS2の仕様書の邦訳（日本規格協会訳／個人訳）は
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html
↓に移転。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

15 ：1：05/03/08 08:53:28 ID:???
連投規制でテンプレを書き込めずにいたところ
親切な人が続きを書いてくれたようで
こんな風になってしまいました。
見苦しくて済まん。

あと
「httpの数が多い」ってエラーが出たので
一記事中の過去ログリストの数を減らしました。
てことで>>1のアンカーと合わなくなってしまいました。
ttpにすればよかったかしら。

次スレで直してください。

974 ：Name_Not_Found：2005/04/10(日) 01:46:01 ID:???

>>964
CSSを有効に使うために正しいHTMLを学んだほうがいいと思う。
それからインラインボックスとブロックボックスの違いについて調べたら。

975 ：Name_Not_Found：2005/04/10(日) 02:14:41 ID:???

わけわかんないこと言い出すんじゃねえよ
インラインとブロックさえ分かってれば
ほとんどは理解できるだろうが
まじ原理主義者キモい　しね

976 ：Name_Not_Found：2005/04/10(日) 02:32:34 ID:???

ったく釣堀ならサカナの腹くらいすかせておけよ…
まったく食いつかねえじゃねえか

977 ：Name_Not_Found：2005/04/10(日) 02:40:24 ID:???

包茎・禿・油デブの戯れ言には飽きたよ・・・（棒読み

978 ：Name_Not_Found：2005/04/10(日) 03:03:36 ID:dKfTM4Sg

主要ブラウザで表示できれば文法なんてどうでもいいだろ
頭かたいなー

979 ：Name_Not_Found：2005/04/10(日) 03:32:23 ID:???

W3Cオタクがぼろぼろでワロタｗｗｗｗ