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

1 ：Name_Not_Found：2005/08/27(土) 01:51:21 ID:???

CSSに関する質問はこちらへどうぞ。 ※　議論はよそで　※

■■■■■　質問のしかた　■■■■■

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

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

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

【まとめサイト】　http://web2ch.s31.xrea.com/?CSS
【FAQ】　http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】　http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】　http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】　http://pc8.2ch.net/test/read.cgi/hp/1121926305/l50

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

2 ：Name_Not_Found：2005/08/27(土) 01:53:02 ID:???

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

【仕様書】
CSS1の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/css1/toc.htm
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

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

3 ：Name_Not_Found：2005/08/27(土) 01:53:53 ID:???

【解説など】
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・K@tsukun's PAGE! > 付録：CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/index.html

4 ：Name_Not_Found：2005/08/27(土) 01:54:23 ID:???

【解説など】
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
　http://www.nextindex.net/web/CSS/index.html
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
　http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方
　http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
　http://ike.s33.xrea.com/
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを："作れ";} 発表所
　http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php

5 ：Name_Not_Found：2005/08/27(土) 01:54:55 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

6 ：Name_Not_Found：2005/08/27(土) 02:00:27 ID:???

一応このスレが一番古いかな

7 ： ◆CHUTA/Ht4w ：2005/08/27(土) 02:04:17 ID:???

まとめて削除依頼してきますねん

8 ：Name_Not_Found：2005/08/27(土) 02:14:24 ID:???

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

9 ：Name_Not_Found：2005/08/27(土) 02:16:04 ID:???

【FAQ】

Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: まずclear忘れがないかをを確認してください。
floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト（imgを含む）だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
　http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
　http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
　http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
　http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

10 ：Name_Not_Found：2005/08/27(土) 02:16:35 ID:???

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

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

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

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：2005/08/27(土) 02:17:12 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.sakura.ne.jp/x/01/tips/page/p0037.html

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

12 ：Name_Not_Found：2005/08/27(土) 02:19:12 ID:???

【参考】
　IEの position:absolute; のバグを利用した擬似フレーム

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

＊IEの position:absolute; のバグを利用した擬似フレーム

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

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}

/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html

13 ：1：2005/08/27(土) 02:21:09 ID:???

>>8-12
ありがとう。そして乙。

14 ：Name_Not_Found：2005/08/27(土) 04:07:47 ID:???

■(X)HTML検証
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html
http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/
http://so.7walker.net/guide.php
http://web-sniffer.net/

■XML検証
http://www.stg.brown.edu/service/xmlvalid/
http://www.w3.org/RDF/

■CSS検証
http://jigsaw.w3.org/css-validator/
http://www.htmlhelp.com/tools/csscheck/

■Linkチェック
http://validator.w3.org/checklink/
http://www.htmlhelp.com/tools/valet/

15 ：Name_Not_Found：2005/08/27(土) 04:08:18 ID:???

■検索エンジンロボットシミュレーター
http://robot-simulator.seo-tool.jp/

■ページの重さ検証
http://www.aubs.net/tools/link_s_04.htm
http://www.kaipara.net/cgi-bin/size_check.cgi

■ページをキャプチャ
http://webscan.jp/

■サイトのキャッシュ
http://www.archive.org/web/web.php

16 ：Name_Not_Found：2005/08/27(土) 15:53:28 ID:???

質問です
body {
margin : 0 ;
padding: 0 ;
background-color: black ;
background-image: url(アドレス);
}
a { color: ; text-decoration: none; font- weight:normal; }

#box { 　　width : 650px;
　　background-color: black ;
　　margin : 0 auto;
　　padding : 0 ;
}

ソース

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

id="box"が終わったあとに１行分くらいの余白が出来てbodyで指定した壁紙が
になってしまいます。上は余白がないのですが、どうしたら下の余白を無くせますか？
よろしくお願いします。

17 ：Name_Not_Found：2005/08/27(土) 16:48:28 ID:???

質問です。

CSSをブラウザによって振り分ける際、
FirefoxなどのGecko系のみを別にする
（IEやOperaなどは別のスタイルを適用する）事は可能ですか？
可能でしたら、そのやり方を教えて下さい。

18 ：Name_Not_Found：2005/08/27(土) 17:47:24 ID:???

>>16
内容の最後の方におもしろおかしい指定をしている要素はないか？
たとえばpとか

>>17
テンプレ見て自分で調べれ

19 ：Name_Not_Found：2005/08/27(土) 17:49:34 ID:???

>>16
bodyに「background-repeat」を追加。
値は表示によるので自分で調べて。
repeat
repeat-x
repeat-y
のどれか。

20 ：19：2005/08/27(土) 17:50:26 ID:???

あれっ？違うっぽいな…orz

21 ：Name_Not_Found：2005/08/27(土) 18:00:37 ID:???

>>16
ぱっと見、ソースには問題ないように思える。
font-weightプロパティの記述がおかしいようにも見えるが。
どっかに全角スペースとか入ってたりするんじゃないか？
html要素で指定する必要は無いと思われるし。

>>17
Mozzila,Gecko系の区別は覚えがない。
確実なのはブラウザの識別で適用CSSの区別。
でなかったら、CSSハックを組み合わせてくれ。
IEはスターハック、Operaだけってのは分からん。
http://www.dithered.com/css_filters/css_only/index.php
自分で探してみてくれ。

22 ：Name_Not_Found：2005/08/27(土) 18:01:23 ID:???

21
mozillaのスペルってかタイプミスった。

23 ：16：2005/08/27(土) 19:53:35 ID:???

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

>>19
background-repeatはやってみましたが駄目でした。

>>18
pとかも全く入れていません。この原因追求のために
上記のソースと全くおなじソースです。
内容部分には長さを出してスクロールさせるための<br>を入れているだけです。

>>21
font-weightは確かに変なスペースが空いていたので
a { color: ; text-decoration: none; font- weight:normal; } ごと削除してみましたが
やはり変わり、ありませんでした・・・。
全角スペースなどもいれていません。

background-image: url(アドレス); も削除してbackground-colorを白と黒に変えて
試してみましたがやはり駄目です・・・。

これだけシンプルなソースにしても駄目なので
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
の宣言に何かミスでもありますかね・・・？

24 ：Name_Not_Found：2005/08/27(土) 20:06:10 ID:???

>>23
ページ晒せ

25 ：16：2005/08/27(土) 20:44:37 ID:???

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-jp">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<link rel=stylesheet type=text/css href="アドレス.css">
</head>
<body>
<div id="box">
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
</div>
</body>
</html>

26 ：16：2005/08/27(土) 20:45:07 ID:???

CSS

body {
margin : 0;
padding : 0;
background-color : black;
}
#box {
width : 650px;
background-color : white;
margin : 0 auto;
padding : 0;
}

これがソースとCSSです何もいじっていません。
IEでもFFでも同じように下に１行くらいの余白が・・・
全く問題ないなら、もう諦めます・・・

27 ：Name_Not_Found：2005/08/27(土) 22:23:49 ID:???

ソースの検証結果：
IEでもFFでもそんな現象は起こらなかった。

冗談半分みたいで悪いが、ウィンドウを縮めたら消えますとはないんだよな。
それによって対応が変わる。

28 ：Name_Not_Found：2005/08/27(土) 22:36:47 ID:???

line-heightは？

29 ：16：2005/08/27(土) 23:03:27 ID:???

>>27
ソースには問題ないのですから、そうなりますよね・・・。

>>ウィンドウを縮めたら消えますとはないんだよな。

ちょっと分からないのですが、ウィンドウの大きさに関わらずスクロールして
一番下まで行くと必ず余白があります。こういう事じゃない？

>>28

line-height？試してみましたが、bodyに入れた場合はbodyだけになってしまって
boxの方に入れたら何も変わりませんでした。

こうなってくると、自分のブラウザというかPC自体がオカシイのかもしれないですね。
他のPCで確認してみたいと思います。

30 ：Name_Not_Found：2005/08/27(土) 23:04:10 ID:???

質問です。

単一のブロック要素の中で、
背景色を中央で上下に分けて二色指定する方法を教えて下さい。
高さが決まっている要素ならそういった画像を用意して出来るのですが、
文字の大きさによって変動してしまうので…。

31 ：Name_Not_Found：2005/08/27(土) 23:25:11 ID:???

>>30
完璧には無理です
まん中に一本線を引く事なら極小の画像でできるが
そういうことは十分な長さを持つと「思われる」画像を
用意しないといけない
俺がやるとしたら縦に異常に長くて横1pxの画像を
縦方向はセンター、横方向に繰り返しで表示させるね

32 ：Name_Not_Found：2005/08/27(土) 23:29:10 ID:???

・・・最近的外れな回答が多すぎやしないか？

33 ：Name_Not_Found：2005/08/27(土) 23:46:30 ID:zbG6e7zw

>>29
先程ジオにあげた際にそうなる現象を確認した。
最下行に1pxの画像が入ってるためと考えた。

<ジオの対処法>
img　{　display: none;}
div img　{　display: inline;}/*上部の広告を消さないため*/

こんな風にしたら下の余白は消えた。
ただ、これをすると画像を張る度にスタイルを指定するリスクを負う。

広告ウェブスペースが入るところではデザインは思い通りにならないと思った方がいい。

34 ：誤スレで質問したもの（再投稿）：2005/08/27(土) 23:47:41 ID:???

まだ解決していないのでよろしくお願いします（＾＾；

floatやwidthを使って段組レイアウトを作った中で、
a:hoverに背景色を設定した場合に、
IEでマウスオーバー時の描画が微妙に遅くなります（反応が鈍くなる）

上位の要素にposition:absolute;を設定すると直るようなのですが、
これを使うと既存のレイアウトが崩れてしまいます。

何か他によい解決方法はないでしょうか？

35 ：Name_Not_Found：2005/08/27(土) 23:50:24 ID:qM+OnkIF

3つの<div>を float:left で3段組にして、width を 25% 25% 50% とやると
なぜか隙間が出来てしまいます。これを回避するにはどうすれは良いのでしょうか？

36 ：16：2005/08/28(日) 00:23:50 ID:SBR9rxbK

>>33
ありがとうございます。
まさにジオで作ってます・・・。

広告の出ない方のやつなんで　div img　{　display: inline;}/*上部の広告を消さないため*/
の方はいらないのかな。

img　{　display: none;}
div img　{　display: inline;}/*上部の広告を消さないため*/
を下のどこにどういれると、余白が消えるのでしょうか・・・。ここまで教えて頂き
あれこれやってみたのですが分かりません・・・。申し訳ないですが具体的なソース
を教えて頂けませんか・・・。

<body>
<div id="box">
</div>
</body>
</html>

body {
margin : 0;
padding : 0;
background-color : black; }
#box {
width : 650px;
background-color : white;
margin : 0 auto;
padding : 0; }

37 ：Name_Not_Found：2005/08/28(日) 00:45:46 ID:???

[CSSファイル]
body {
margin : 0;
padding : 0;
background-color : black; }
#box {
width : 650px;
background-color : white;
margin : 0 auto;
padding : 0; }
img {
display: none; }

これでいいと思います。
アップロードした際ソースの最下行に足されている
<IMG SRC="http://geocities.yahoo.co.jp/serv?s=382116061&t=1125156793" ALT=1 WIDTH=1 HEIGHT=1>
が表示されなくなり余白が消えてくれるます。

38 ：Name_Not_Found：2005/08/28(日) 00:46:24 ID:???

>>34
環境も書かない奴は知らん

>>35
ソース晒せ

39 ：Name_Not_Found：2005/08/28(日) 01:24:30 ID:???

>>35
マルチカラムの時は和＜100％にしないとダメってテンプレサイトに書いてるので半年ROMってなさい

40 ：16：2005/08/28(日) 01:37:36 ID:???

>>37
本当にありがとうございます。
全角スペースの所を直していない事で手間取ってました。

img { display: none; }
だけだと、ようやく余白は消す事が出来たのですがアップしていた画像まで消えてしまっていたので、

広告非表示ですが
div img　{　display: inline;}
を加えました。

これを加えたら、アップしていた画像も表示できるようになったのですが

>>29に「ただ、これをすると画像を張る度にスタイルを指定するリスクを負う。」

というのがあったので何かしらの指定を全てにしないといけないという事と考えたの
ですが何も手を加える事無く画像が表示されました。

細かく教えて頂き全て解決出来たので何の問題も無いのですが
「スタイルを指定するリスクを負う。」が気になったので。

長々とお付き合い頂き、みなさん、ありがとうございました。

41 ：Name_Not_Found：2005/08/28(日) 01:48:05 ID:???

うむ　　がんがれ

42 ：Name_Not_Found：2005/08/28(日) 02:39:20 ID:???

ものすごく初歩的な質問ですが…
未だにmargin:0 指定がよく分かりません。

/* 全体-----------------------------*/
body {
margin: 0;
padding: 0;
color: #333333;
}
#wrapper {
width: 777px;
}
/* ヘッダ------------------------------*/
#header {
padding-top: 25px;
}
h1 {
margin: 0;
width: 200px;
}
解説本からの引用ですが、例えばこの場合、
body要素とh1要素にmargin:0指定があり、
wrapperなどのIDセレクタに指定が無いのはなぜですか？
この例ではIDセレクタがそれぞれdiv要素に使われていて
marginが0なんですが…

43 ：Name_Not_Found：2005/08/28(日) 02:42:47 ID:???

>>42
HTMLのソースがないと分からない
本に書いてなかった？

44 ：Name_Not_Found：2005/08/28(日) 02:58:04 ID:???

>>42
ほとんどのUAで
h1もbodyもmargin(あるいはpadding)を0と「指定してやらないと0にならない」から。
ほかにもp ol ul dl address ....なんかもそう。(pは上下のmarginのことね)

45 ：Name_Not_Found：2005/08/28(日) 03:20:51 ID:???

*　　{ margin: 0; padding: 0; }

46 ：Name_Not_Found：2005/08/28(日) 03:25:06 ID:???

↑なにが言いたいの？

47 ：Name_Not_Found：2005/08/28(日) 03:35:48 ID:???

>>32

48 ：42：2005/08/28(日) 03:48:35 ID:???

>>43
レスありがとうございます。
その本は上級者向けみたいでその辺は無視でした。

>>44
ものすごい勢いで理解できました。
特に解説が入っていないことを考えると
本的にも多分そういうことだろうと思います。
これで一歩前進できました。ありがとう！

49 ：Name_Not_Found：2005/08/28(日) 13:31:00 ID:???

tableからスタイルシートに移行しようと苦戦中なのですが、
http://2sen.dip.jp/cgi-bin/upgun/up1/source/up0134.png
左図のようなレイアウトにしたい場合、
右図のような考え方で作るのが一般的なのでしょうか？
それともtableのcolspanやrowspanみたいなことができるのでしょうか？
一応スタイルシートのみで左図のようにできたんですが、
heightを指定しないとバラバラに崩れてしまったので困っています。
水色の部分は画像なのですが、右図の場合は
上下に分割しなくてはいけないので、分割する必要性がないやり方がありましたら、
ヒントいただけるとありがたいです。
わかりづらいかもしれませんがよろしくお願いします。

50 ：Name_Not_Found：2005/08/28(日) 14:09:29 ID:???

緑 : float : left;
ピンク : float right;
黄色 : float : left;
オレンジ : float : left;
灰色 : float : left;

の順番で大丈夫、なハズ…。

51 ：Name_Not_Found：2005/08/28(日) 14:11:14 ID:???

あ、それぞれの色をDIVで囲ってフロートを指定。
>>50の順番でHTMLに記述。

でヨロ。

52 ：Name_Not_Found：2005/08/28(日) 14:24:28 ID:???

>>32

53 ：Name_Not_Found：2005/08/28(日) 14:26:17 ID:???

>>52
>>32

54 ：Name_Not_Found：2005/08/28(日) 14:29:26 ID:???

正解

緑 : float : left;
ピンク : float right;
他は指定なし

55 ：49：2005/08/28(日) 14:30:14 ID:???

>>50-51
レスどうもありがとうございます。
教えていただいた手順でやってみたところ、近い形になってきました。
(さきほどまで緑-黄-ピンク-オレンジ-灰色の順でやっていました。)
入れ子にするやり方が少し間違っているようなので、
もう少し勉強していじったらできそうです。
大変参考になりました。どうもありがとうございました。

56 ：カス野郎 ◆z.fnC4lCx2 ：2005/08/28(日) 15:43:00 ID:???

(´･ω･｀)

57 ：Name_Not_Found：2005/08/28(日) 16:16:09 ID:???

メニューに表示しているアンカー文字列が、途中で切れてしまいます。

<h2>最近の更新</h2>
<ul>
<li><a href="">個人情報の取り扱いについて</a></li>
<li><a href="">AA月BB日：○○○を公開しました</a></li>
</ul>

これが実際には

個人情報の取り扱いに
いて

AA月BB日：○○○を公
しました

という具合に、メニューの幅に収まりきれず改行されてしまい、かつ文字列が1文字分隠れてしまいます。
マージンやパディングなど、どのように指定すれば

個人情報の取り扱いに
ついて

AA月BB日：○○○を公
開しました

というように表示できるのでしょうか？
突発的なアイデアでも構いません。お教え下さい・・・

58 ：Name_Not_Found：2005/08/28(日) 16:18:04 ID:???

CSS教えてもらわんと

59 ：Name_Not_Found：2005/08/28(日) 17:02:41 ID:???

>57
じゃあ突発的なアイデア

個人情報の取り扱いにつついて

AA月BB日：○○○を公開開しました

1文字増やすとかネ

60 ：Name_Not_Found：2005/08/28(日) 17:25:07 ID:???

あほかｗ

61 ：Name_Not_Found：2005/08/28(日) 17:49:14 ID:???

>>57です。解決しました。

.sidebar li a{width: 170px;
display: block;
text-decoration: none;
}

で修正完了です。
どうやら
左メニューの幅200px
サイドバーの幅190px
li要素にアンカーがあれば180ox
とすることで解決しました。

原因はこの幅がおかしくなった場合はdisplay:none;としていたため、テキストが隠れていたようです。
お騒がせ致しました

62 ：1/4：2005/08/28(日) 23:33:30 ID:ZQjrKqKf

質問です。

NN、Opera、FFでは

---------------
ナビ
---------------
本文
---------------
フッター
---------------

になるのですが、IEでだけ

---------------
（ブランク）
---------------
本文
---------------
ナビ
---------------
フッター
---------------

になってしまいます。
どうしたらIEでも同じように表示できるでしょうか？

63 ：2/4：2005/08/28(日) 23:35:54 ID:???

［HTMLファイル］
<div id="contener">

<div id="content">
<h1>本文</h1>
<p>いろいろと。</p>
</div>

<div id="navi">
<h1>ナビ</h1>
<ul>
<li class="navi1">メニュー1</li>
<li class="navi2">メニュー2</li>
<li class="navi3">メニュー3</li>
<li class="navi4">メニュー4</li>
<li class="navi5">メニュー5</li>
</ul>
<br>
</div>
<div id="footer">フッター</div>
</div>

64 ：3/4：2005/08/28(日) 23:39:04 ID:???

［CSS］
* {margin: 0; padding: 0; }
body {width: 100%; text-align: center; }

div {text-align: left; }

div#contener {border: 2px solid red; margin: 0 auto; width: 650px; }

div#content {border: 2px solid yellow; margin-top: 50px; float: left; width: 650px; }

div#navi {border: 2px solid pink; height: 50px; position: relative; top: 0; left: 0; }
div#navi h1 {position: absolute; top: 0; left: 10px; }
div#navi li {float: left; list-style: none; }
div#navi .navi1 {position: absolute; top: 0; left: 100px; }
div#navi .navi2 {position: absolute; top: 0; left: 190px; }
div#navi .navi3 {position: absolute; top: 0; left: 280px; }
div#navi .navi4 {position: absolute; top: 0; left: 370px; }
div#navi .navi5 {position: absolute; top: 0; left: 460px; }

div#footer {clear: both; border: 2px solid green; }

65 ：4/4：2005/08/28(日) 23:40:45 ID:???

以上です。
よろしくお願いします(･_･)(._.)ぺこり

66 ：Name_Not_Found：2005/08/28(日) 23:43:36 ID:???

contener?

67 ：Name_Not_Found：2005/08/28(日) 23:56:54 ID:???

>>66
「container」ですね（>_<）
スペルミスりました（>_<）

68 ：Name_Not_Found：2005/08/29(月) 02:00:11 ID:???

#banner
は意味はわかるのですが、
#banner a
の意味を教えてください。

69 ：Name_Not_Found：2005/08/29(月) 02:02:20 ID:???

#banner　に内包される a

70 ：Name_Not_Found：2005/08/29(月) 02:51:22 ID:???

>>68
レスありがとうございます。
もう少し簡単に言ってくれませんでしょうか？
#banner{
}
上のやつと下のやつの違いをお願いします。
#banner a {
}

ないほう　―はう【内包】<

(1)内部にもつこと。
「危険性を―する」

(2)〔論〕〔intension; connotation〕ある概念において、その適用される事物（外延）が共通に有する性質。
概念に含まれる意味・内容。例えば、「人間」の内包は人間を特徴づけるさまざまな性質。
さらに「日本人」の内包は、これに「日本国籍をもつ」などが加わる。「日本人」は「人間」に対して内包を増すが、外延は減ずる。

71 ：Name_Not_Found：2005/08/29(月) 02:54:08 ID:???

>>70
内包される

<div id="banner">
　　　：
<a href="piyo.html">ほげ</a>
　　　：
</div>

72 ：Name_Not_Found：2005/08/29(月) 02:59:56 ID:???

>>71
またのレスありがとうございます。判ったような気がします。
よかったら、次も良かったら教えてください。

今度のものは　body a{}　でないのですが、内包されているのでしょうか？
別物なのでしょうか？

body{　
}
a{
}

73 ：Name_Not_Found：2005/08/29(月) 03:01:08 ID:???

>>70

#banner{ id属性値がbannerの要素に適用 }

上のやつと下のやつの違いをお願いします。

#banner a { id属性値がbannerの要素に包含されたa要素に適用 }

っと釣られてみる。

74 ：Name_Not_Found：2005/08/29(月) 03:03:17 ID:???

>>72
body{ body要素に適用 }
a{ a要素に適用 }

body a{ body要素に包含されるa要素に適用 }
⇒変な事考えない限り、a{}と同様。

75 ：Name_Not_Found：2005/08/29(月) 03:07:05 ID:???

>>72
a は body 内に書くもんだから

body a {
　　：
}

と書いたっていい。
が
body 内にあるのは分かり切ってるから

a {
　　：
}

と書いた方が余計なことを考えなくてすむので楽だ。

76 ：Name_Not_Found：2005/08/29(月) 03:09:13 ID:???

>>73
釣りでは無いです。
bannerでグループ化したような感じなんですね。

ブログのテンプレートを見てみるとこのようなものがありました。
コレは、下のカラーは意味が無いように思えるのですが、どうなんでしょうか？
.navi {　
color: #808080;
}
.navi a{
color: #fff;
}

77 ：Name_Not_Found：2005/08/29(月) 03:19:47 ID:???

>>74-75
body a{}　と　a{}　は同じなんですね。
省略できる　a{}　の方を使ってみることにします。
勝手に、body要素である事を認識してくれるんですね。

　　　 a{ 　　　　　　　　　　　　　　a要素に適用 }
body a{ body要素に包含されるa要素に適用 }

78 ：Name_Not_Found：2005/08/29(月) 03:29:41 ID:???

>>76
基本的には条件の狭い(強い)方が優先されるから
navi の中のテキストは #808080 に
navi の中の a タグのテキストは #ffffff になる。

79 ：Name_Not_Found：2005/08/29(月) 03:35:34 ID:???

>>78＋みなさん
優劣で表示が変わるのですね。
基本的には条件の狭い方(naviの中のaタグ)が優先されるからでいいでしょうか？
間違っている場合だけ、コラとレスをお願いします。
合っていたらこのまま去りますので、色々とどうもありがとうございました。

80 ：Name_Not_Found：2005/08/29(月) 03:38:51 ID:???

>>62-65
#contentにある{ float: left; }はIEでは無効になっている。
無効というかブラウザ側が勝手{ clear: left; }を入れてしまうからだ。

（前略）
<p>いろいろと。</p>
</div>

<div style="clear: left;"></div>

<div id="navi">
<h1>ナビ</h1>
（以下略）
とすればNN、Opera、FFでもIEと同じようになると思う。

<IEでも同じようにするには・変更点のみ>
div#container {border: 2px solid red; margin: 0 auto; width: 650px; position: relative;}
div#content {border: 2px solid yellow; margin-top: 54px; }
div#navi {border: 2px solid pink; height: 50px; width: 646px; position: absolute; top: 0; left: 0; }
すればIE、FFでは同じように表示された。
marginとwidthはこの際関係ないがborderの分だけいじった。

81 ：Name_Not_Found：2005/08/29(月) 07:16:11 ID:???

マージンの書き方と、ブラウザのバグについてです。

margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;

と

margin:10px auto 10px auto;

どちらも同じ意味の記述ですが、ネスケだと、下の記述だと6以外でバグがでるって聞きました。
対応表などが欲しいのですが、どういうった用語でぐぐれば宜しいでしょうか？

82 ：Name_Not_Found：2005/08/29(月) 07:34:23 ID:???

>>81
ttp://www.zspc.com/documents/css2/index.html

83 ：Name_Not_Found：2005/08/29(月) 11:56:58 ID:???

おまいら暇だな

84 ：Name_Not_Found：2005/08/29(月) 12:43:56 ID:???

オマエモナー

85 ：Name_Not_Found：2005/08/29(月) 13:36:25 ID:???

>>62-65 です。

>>80ｻﾏ　ありがとうございます。

やっぱりposition使うしかないでしょうか（；_；）
出来れば絶対指定はしたくないのですが…

86 ：Name_Not_Found：2005/08/29(月) 13:38:12 ID:???

質問です。

ブログで写真をポラロイドのように見せるために写真部の<img>に

.pict{
padding:5px 5px 25px;
border:1px solid #999;
margin:0 5px 5px 0;
background:#ffffff
}

のようにスタイルを指定しているのですが、
WinXP SP1で確認したところFirefoxでは問題ないのですがIE6ではうまく表現されません。

IE6でも正しく枠を表示するにはどうしたらいいでしょうか？

87 ：Name_Not_Found：2005/08/29(月) 13:51:21 ID:???

>>86
>padding:5px 5px 25px;
この部分は
padding:5px 5px 5px 25px;
じゃない？

88 ：Name_Not_Found：2005/08/29(月) 13:54:12 ID:???

ポラロイド写真のようにならこうか？
padding:5px 5px 25px 5px;

つーか意味が解らん
ポラロイド写真のようにって具体的にどんな風にしたいのよ

89 ：Name_Not_Found：2005/08/29(月) 14:09:11 ID:???

>ポラロイド写真のよう
写真に白い枠を付けて、下だけ太くするような感じです。

padding:5px 5px 25px 5px;
↑のように4方向の数値を入れてもかわりませんでした。
IEの不具合でしょうか？

90 ：Name_Not_Found：2005/08/29(月) 14:10:41 ID:???

IEのバージョンは？6だと問題ないみたいだけど。

91 ：Name_Not_Found：2005/08/29(月) 14:13:21 ID:???

doctypeでね？

92 ：Name_Not_Found：2005/08/29(月) 14:36:57 ID:???

>>89
borderで白枠ではどうしてダメなのか

93 ：Name_Not_Found：2005/08/29(月) 14:37:51 ID:???

>>87-88
padding は、３つパラメータを指定すると、順に、上、左右、下の paddingを指定した物と解釈される。

94 ：Name_Not_Found：2005/08/29(月) 14:43:50 ID:???

===HTML文書===

<dl>
<dt>定義１</dt>
<dd>定義１の説明</dd>
<dt>定義２</dt>
<dd>定義２の説明</dd>
<dt>定義３</dt>
<dd>定義３の説明</dd>
<dt>定義４</dt>
<dd>定義４の説明</dd>
</dl>

===CSS===

dt { background-color: #335; }

dd { margin: 0 0 1em; background-color: #aab; }

というようにしたものをIEで見ると上手く意図した通りに表示されるのですが、
Firefoxで見てみると『定義２』のところの<dt>と<dd>の間に1pxの隙間が空いてしまいます。

解決するにはどうしたら良いでしょうか？

95 ：Name_Not_Found：2005/08/29(月) 15:06:14 ID:???

>>94
FFで見てみたがそんな隙間は空かなかった。
もう一度ソースを見直すことをお勧めする。

それでも解決しない場合はもっと詳しいソースを。

96 ：Name_Not_Found：2005/08/29(月) 15:29:05 ID:???

>>90
バージョン6なんですけどダメなんです。
SP2じゃないからかなぁ？

>>91
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<
このようにしてます。

97 ：Name_Not_Found：2005/08/29(月) 15:33:32 ID:???

うまく表現されないって、どう表現されないんだよ
だれかエスパーいたら教えてやれや

98 ：Name_Not_Found：2005/08/29(月) 15:38:03 ID:???

>>86
スクショ撮って見せてみ

99 ：Name_Not_Found：2005/08/29(月) 15:40:20 ID:???

doctypeを
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
これにしてもダメ？
いやできるかわからんorz

100 ：86：2005/08/29(月) 15:47:36 ID:???

ttp://blog.livedoor.jp/uehara_nami/

ここのソースを参考にしたんですけど、私の環境ではIEでみると写真の周りの白い枠が見えません。

101 ：Name_Not_Found：2005/08/29(月) 15:49:14 ID:f1FrlN+L

>>86
>>99が正解を言っているのでそのとおりにしてみるんだ。

102 ：86：2005/08/29(月) 16:03:39 ID:???

>>99のとおりにしたらできました！
みなさんありがとうございました。

103 ：Name_Not_Found：2005/08/29(月) 16:41:21 ID:???

質問です
<dl>
<dt>DT1</dt>
<dd>DD1</dd>
<dt>DT2</dt>
<dd>DD2</dd>
<dd>DD3</dd>
<dl>
とかいて
スタイルシートを
dt {
width: 70px;
float: left;
}
dd {
margin-left: 70px;
}
などと書いた場合
IE6だと、DD3のところのmargin-left: 70;が
数pixleづれてしまうのですが

対処法ありましたらよろしくお願いします。

104 ：Name_Not_Found：2005/08/29(月) 16:51:37 ID:???

仕様です
ddのマージンをdtのマージン+5pxくらいにすれば
多分平気

105 ：Name_Not_Found：2005/08/29(月) 16:55:13 ID:???

どうでもいいけど
<ul>
<li></li>
<li></li>
<li></li>
</ul>

こんなカンジでボックスなんたら、display:block;なんたらにすると、余白ができちゃいます。
って質問と似てるな。

106 ：Name_Not_Found：2005/08/29(月) 16:57:07 ID:???

dtのwhidth 70＋５ってことですか？

それでやっても、だめな模様です。

107 ：こう：2005/08/29(月) 16:58:57 ID:???

dt {
width: 70px;
float: left;
}
dd {
margin-left: 75px;
}

108 ：Name_Not_Found：2005/08/29(月) 17:00:21 ID:???

それでやりましたが無理でしたね・・。
ただづれるいちが5px増えただけで・・

109 ：Name_Not_Found：2005/08/29(月) 17:01:22 ID:???

>>108
づれてしまうのか…。

110 ：Name_Not_Found：2005/08/29(月) 17:02:08 ID:???

づれますね・・

111 ：Name_Not_Found：2005/08/29(月) 17:09:55 ID:???

づれる→ずれる

112 ：Name_Not_Found：2005/08/29(月) 17:10:27 ID:???

無理なのかな・・

強引でもいいので、対処法ありましたらよろ

113 ：Name_Not_Found：2005/08/29(月) 17:15:54 ID:???

<dt>DT</dt>
<dd>DD1</dd>
<dd>DD2</dd>
とするのではなくて、

<dt>DT</dt>
<dd>DD1<br>
　　　DD2</dd>
とすればいいのだよ。
こうすればwidth = marginのままでＯＫ

114 ：Name_Not_Found：2005/08/29(月) 17:19:18 ID:???

んー
<br>
でもずれませんか？

115 ：Name_Not_Found：2005/08/29(月) 17:20:02 ID:???

>>103
たぶんだけど、dtの高さ設定が後続のddに影響してる。
dd3の反応がまとも。

dtにline-heightとかheightとかfont-sizeとか設定してないかい？

116 ：Name_Not_Found：2005/08/29(月) 17:22:23 ID:???

ｄｔにはしてないですね。

dl に　font-size: 80%;

が適当されてます。

117 ：Name_Not_Found：2005/08/29(月) 17:25:31 ID:???

適当され？

118 ：Name_Not_Found：2005/08/29(月) 17:26:02 ID:???

適応でした

119 ：Name_Not_Found：2005/08/29(月) 17:30:48 ID:???

適用

120 ：Name_Not_Found：2005/08/29(月) 17:45:11 ID:???

ddは複数連ねないで<br>で繋げて
CSSの記述は

dt {
width: 70px;
clear: both;
float: left;
}
dd {
float:left;
}

（多分）いける

121 ：Name_Not_Found：2005/08/29(月) 17:49:44 ID:???

やはり無理なような・・

122 ：Name_Not_Found：2005/08/29(月) 17:54:18 ID:???

しかしCSSの表示のためにHTML書き換えるってのもな。
dl {
margin-left : 2em;
}
dt {
position : absolute;
left : 2em;
}
dd {
position : relative;
}
これじゃダメか？幅は自分で調節汁。

123 ：Name_Not_Found：2005/08/29(月) 17:56:04 ID:???

ですよね
なるべくｈｔｍｌは書き換えたくはないですね・・

ためしてみます

124 ：Name_Not_Found：2005/08/29(月) 17:57:27 ID:???

実はddを2つ並べるのは好ましくないらしいんですよ

125 ：Name_Not_Found：2005/08/29(月) 17:59:21 ID:???

>>124
なんじゃそりゃ
一つの項目に対し説明が一つ以上なんて充分あり得るだろ
ソースは？

126 ：Name_Not_Found：2005/08/29(月) 17:59:33 ID:???

float はつかわないてことですか？
>>121

127 ：Name_Not_Found：2005/08/29(月) 18:00:47 ID:???

>>126
使わない。
position:absoluteとposition:relativeの意味を考えてみろ。

128 ：Name_Not_Found：2005/08/29(月) 18:02:11 ID:???

なるほど・・absolute
でむりやりやっちゃうわけですか

できればfloat では　この数px は無理なんですかね

129 ：Name_Not_Found：2005/08/29(月) 18:02:49 ID:???

113だが少し書き漏らしがあった。
ddの方にも適当な数値でいいからwidthを指定しておく。
そうすれば<br>で改行してもずれない

130 ：Name_Not_Found：2005/08/29(月) 18:03:02 ID:???

↑
できればfloat でやりたいけど
float ではこの数pxは無理なんですかね

131 ：Name_Not_Found：2005/08/29(月) 18:06:23 ID:???

なるほど、たしかに<br>つかって、
ddにwidthを使えば、たしかに、できるみたいですね

132 ：Name_Not_Found：2005/08/29(月) 18:08:13 ID:???

なんでfloatに拘るんだかわからん

133 ：Name_Not_Found：2005/08/29(月) 18:17:27 ID:???

たしかにpositionでやっちゃえばできるとおもうけど
質問の　float　の　数ｐｘ　づれるっていうのの
解決にはなってないと思う

134 ：Name_Not_Found：2005/08/29(月) 18:20:34 ID:???

>>133
そうか？
ずれるのはIEのバグなんだから、HTML書き換えなしにそれにも対処しようと思ったら
CSSのほうをいじるしかないから、方法はどうやったって問題ないと思うがな

135 ：カス野郎 ◆z.fnC4lCx2 ：2005/08/29(月) 18:22:15 ID:???

(´･ω･｀)およっ？

136 ：Name_Not_Found：2005/08/29(月) 18:24:05 ID:???

長文すみません。
cssソース
/*大きい枠*/
#a {width:500px;}
/*大きい枠の中にいれる枠*/
#b {width:100px; float:left; margin:0px; padding:0px; border:0px none #ffffff;}
#c {width:300px; float:right; margin:0px; padding:0px; border:0px none #ffffff;}
#d {width:100px; margin:0px; padding:0px; border:0px none #ffffff;}

htmlソース
<div id="a">
<div id="b">あいうえお</div>
<div id="c">かきくけこ</div>
<div id="d">さしすせそ</div>
</div>

このようにした場合、OperaとNNでは
|あいうえお|かきくけこ|さしすせそ
と表示されるのですが、IEでみた場合、
|あいうえお|　　　　　　|さしすせそ
　　　　　　　|かきくけこ|
といった感じで表示されてしまいます。
borderを0pxにしたのにもかかわらずこのようになってしまったんですが、
単なるIEのバグでしょうか？
大きい枠の中に入れる枠の、左右のborder計6px分を大きい枠のほうに足せば、
問題は解決するのですが、枠内に色をつけた場合おかしくなってしまうので、
何かよい解決方法ありましたら教えてください。

137 ：Name_Not_Found：2005/08/29(月) 18:32:46 ID:???

３つともよこならびにしたいってことですか？

138 ：Name_Not_Found：2005/08/29(月) 18:33:49 ID:???

#a {width:500px;}
#b {width:100px; float:left; margin:0px; padding:0px;}
#c {width:300px; float:left; margin:0px; padding:0px;}
#d {width:100px; float:left; margin:0px; padding:0px;}

とりあえずこれで横並びにできます。

下の要素にclear : both
は忘れずに;

139 ：136：2005/08/29(月) 18:40:35 ID:???

ソース微妙に違ってましたすみません。
#c {width:100px; float:right; padding:0px; border:0px none #ffffff;}
#d {width:300px; margin:0px 0px 0px 100px; padding:0px; border:0px none #ffffff;}

>>137
はい、そうです。
教えていただいた通りやってみたところできました。
どうもありがとうございました。

140 ：Name_Not_Found：2005/08/29(月) 19:11:30 ID:???

>>125
(´･ω･`)おかしい…
昔はlintか何かで指摘されたような気がするのに
今やっても出ない…

でもどっかで見ましたマジ！
でも、たしかに複数あっておかしくないとは思う

141 ：Name_Not_Found：2005/08/29(月) 19:23:12 ID:???

ハイハイﾜﾛｽﾜﾛｽ

142 ：Name_Not_Found：2005/08/29(月) 19:35:18 ID:???

>>125 >>140
<dd>の中に段落作るとか、更に同じ<dt>を記述するとかが適切な気がするんだが、
定義ちゃんと確認して無いので間違ってるかもしれん。

143 ：Name_Not_Found：2005/08/29(月) 19:36:30 ID:???

Internet Explorer6.0で、背景色や背景画像をいくつか重ねると背景画像の一部が表示されずに、
スクロールやテキストドラッグで再描画するたびところどこのの背景が消えて後ろの背景が見えてしまうって症状が出る方他にいませんか？
「背景　消える」とかいくつかの単語でググったり、Web上のバグ辞典をいくつか見ても事例が載ってなくて…
ソースはちょっと煩雑なので、必要ならうｐしますが、症状だけでピンとくる方がいらっしゃったら原因を教えていただけると助かります。

144 ：Name_Not_Found：2005/08/29(月) 19:38:56 ID:???

>>143
何の要素に対して重ねてる？htmlとbodyか？bodyとdivか？
divだったら、幅指定しないでフロート使ってないか？

まずはそのくらいがピンときた。

145 ：Name_Not_Found：2005/08/29(月) 19:56:53 ID:???

>>144
回答ありがとうございます。
floatは使ってません。
position:absoluteを使ってメインメニューを左に持ってきて2カラムにしています。
大まかな構造としては
body
　|-h1
　　|-div#NAVIGATE
　　|-div#MAIN
　　|-div#PROPERTY
って感じで、#NAVIGATE内にあるdiv#MAIN_MENUを左側にposition:absoluteで配置してます。
それで、上記3つのdiv.partの背景をmargin:0にしてつなげてるのですが、
なぜか#NAVIGATEの部分とh1の部分の背景だけ消えたり現れたりするんです。

146 ：Name_Not_Found：2005/08/29(月) 19:57:39 ID:???

CSSだけソース載せてみます。
HTMLは上記のような感じです。
body{

background:#fff url("./graphics/back.png") left bottom repeat;
position:relative;
padding:0 7%;
}

h1{

margin:0;
padding:80px 10px 0 ;
background:url("./graphics/campus.jpg") left top no-repeat #d9d7cd;
color:#fff;
font-size:22px;
}

.part{

margin:-1px 0;
padding:0 3em 0 4em;
border-left:#8e7063 solid 10em;
background:#fff url("./graphics/back_part.png");
font-size:90%;
}

147 ：Name_Not_Found：2005/08/29(月) 19:59:56 ID:???

ちょっと樹形図がわかりにくかったのでHTMLの大まかな構造だけ書いておきます。

<body>
<h1>ほげほげ</h1>
<div class="part" id="NAVIGATE">
hogehogehoge
</div>
<div class="part" id="MAIN">
hogehogehoge
</div>
<div class="part" id="PROPERTY">
hogehogehoge
</div>
</body>

こうしているのですが、なぜかNAVIGATE部分の背景が正常に表示されず
h1の背景もたまに消えたりします。

148 ：Name_Not_Found：2005/08/29(月) 20:01:44 ID:kBxbzeWp

写真の周りに線をかいているんだけど
その色が初期で青色になっています。
色指定で000とすると、紫になります。
コレはドコを直せばいいでしょうか？

149 ：Name_Not_Found：2005/08/29(月) 20:05:46 ID:???

>>148
それは色指定で000にしたからじゃなくて、訪問済みになったからでは？
普通にimg{border-color:#000}で黒くならないか？
またはa img{border-color:#000}か

150 ：Name_Not_Found：2005/08/29(月) 20:07:06 ID:???

>>148
的ハズレだったら申し訳ないが、
imgにアンカーつけたらimg画像のまわりにで青のリンク線が出たってことかな？
000で紫になるっていうのはおかしいから(000は黒色)
a img {border-style:none;}
これで線は消せる。

151 ：Name_Not_Found：2005/08/29(月) 20:08:45 ID:???

>>149
>>150
二人とも、ありがとうございます。
教えてもらったように一度やってみます。

152 ：Name_Not_Found：2005/08/29(月) 20:10:46 ID:???

>>142
ttp://members.jcom.home.ne.jp/pctips/www/Element/dl.html

<!ELEMENT DL - - (DT|DD)+ -- definition list -->
つまりdl内にdt/ddが1回以上出てくることが前提。
で、複数の項目を扱うことが可能、なのだから、
一つの用語に二つ以上の説明が入る、
つまり意味が一つではない用語に対してその分説明が入る、
ことについてはOKだと思う。

153 ：Name_Not_Found：2005/08/29(月) 20:44:23 ID:???

<table border=2 cellspacing=0 cellpadding=0><tr><td VALIGN="bottom"><p>
<img src="http://＊＊＊＊＊/image/bb.jpg"/>
</p></td></tr></table>

テーブルの中に画像を入れているのですが、
画像がテーブルにしっかりはまりません。
いつも画像の上にスペース(テーブル背景)ができてしまいます。
画像だけ表示するにはどうしたらいいでしょうか・

154 ：Name_Not_Found：2005/08/29(月) 20:54:42 ID:+J94uwIJ

質問です。ソースからのせます。
[html]
<div class="top">
<a href="./index.html"><img src="./data/logo.gif" width="200" height="60" border="0" /></a>
<object classid="clsid:～省略～ width="550" height="60">
<param name="movie" value="./data/logoflash.swf" />
<param name="scale" value="noscale" />
<embed src=～省略～ width="550" height="60" scale="noborder">
</object>
</div>
<div>
省略
</div>

[css]
.top {
white-space:nowrap;
width:750px;
color:#000;
margin:0 auto 0 auto;
padding:0;
background:#ddd;
line-height:0px;
}

155 ：Name_Not_Found：2005/08/29(月) 20:54:43 ID:???

>>153
それだけ見るとCSSの質問なのだろうかという気もしつつ、
pのmarginのせいじゃね？とか言ってみる。（おぉ、CSSの質問にはやがわりした）

/*
余談だけど、imgはalt属性必須ですよ（HTML4.0以降）
*/

156 ：154：2005/08/29(月) 20:55:42 ID:+J94uwIJ

GIFとFLASHが上下左右隙間なくぴったりくっつけたいのですがうまくいきません。
上下は
line-height:0px;
を追加したことによってできましたが、左右はどのようにすればよいのでしょうか？
IE6だとぴったりなんですが、Opera6とFF1だと隙間ができてしまいます。
img {
margin:0;
}
とCSSに追加してもできませんでした。

157 ：Name_Not_Found：2005/08/29(月) 21:05:13 ID:???

>>154
img要素とobject要素の間にホワイトスペースが入っているからでは？
改行やタブ、半角スペースを全て取り除いてみたら解決するかも

158 ：Name_Not_Found：2005/08/29(月) 21:08:35 ID:???

とりえず
* {
mragin: 0;
padding: 0;
}

を指定する

あとは
imgをdisplay: block;

するなどかな

159 ：Name_Not_Found：2005/08/29(月) 21:14:45 ID:???

>>62-65、>>85です。

position: absolute;（div#navi { position: absolute; top: 0; left: 0; } ）を
使わない方法がもしありましたら教えてください。

160 ：154：2005/08/29(月) 21:16:28 ID:+J94uwIJ

スペースと改行を取り除いたらできました。
・・・が、すごく見づらいソースになった・・・；；
>>158さんの両方やっても無理でした。
display: block; したらGIFの次で改行されちゃいました。
ソース見やすいようにスペースと改行入れてたんだすが、これしか方法ないんですかね。
普通見やすいように改行とかしますよね？

161 ：Name_Not_Found：2005/08/29(月) 21:20:32 ID:HQdYL0zQ

border: none; }
border: 0;

162 ：Name_Not_Found：2005/08/29(月) 21:23:54 ID:HQdYL0zQ

すみません手がすべっちゃって・・・
素朴な疑問なんですが、

{ border: none; }
{ border: 0px; }
{ border: 0; }

↑この三つのうちで、どれが正しい記述とか、ありますか・・・？

163 ：Name_Not_Found：2005/08/29(月) 21:26:20 ID:???

>>160
<a href="./index.html"><img src="./data/logo.gif" width="200" height="60" border="0" /></a>
<object classid="clsid:～省略～ width="550" height="60">
この二行の改行だけ消せば何とかなると思う。
改行が半角スペースになるのは仕様。諦める。

164 ：Name_Not_Found：2005/08/29(月) 21:26:46 ID:???

>>155
すれ違いでしたか、スマソ。
pのmarginについては、詳しく聞いてもいいですか？
どうすれば。。。

165 ：Name_Not_Found：2005/08/29(月) 21:34:52 ID:???

<a href="./index.html"><img src="./data/logo.gif" width="200" height="60" border="0" /></a>

<p>でかこってないけど、かこむべきなのでは？

166 ：Name_Not_Found：2005/08/29(月) 21:36:29 ID:???

>>162
noneはborder-style。単位指定無しは自動補完。

>>164
p{margin:0px;}
これが理解できないなら、CSSの基礎から勉強汁。

167 ：155：2005/08/29(月) 21:49:43 ID:???

>>166
table外のpのことも考えるとtable p{margin:0}がいいかもね。
ってか、ぶっちゃけtdの中だしpいらない希ｶﾞｽ。

168 ：Name_Not_Found：2005/08/29(月) 21:59:48 ID:???

>166
＞単位指定無しは自動補完。
んなこたない 0なら単位をつけなくてもよいというだけ

>162
>166さんも書いているが none は border-style に対する指定で
0px と 0 は border-width に対する指定
borderそのものを描画しない（none）か幅0のborderを描画する（0）かの違い
どれも正しいので間違いはない

169 ：Name_Not_Found：2005/08/29(月) 22:02:03 ID:???

>>168
だから0の場合は自動補完

170 ：Name_Not_Found：2005/08/29(月) 22:02:35 ID:???

外部リンクと内部リンクを自動で振り分けてくれるようにする
にはどうしたらいいでしょうか？

171 ：Name_Not_Found：2005/08/29(月) 22:04:42 ID:???

>>170
つ【.htaccess】

172 ：Name_Not_Found：2005/08/29(月) 22:04:56 ID:???

>>166
>>167
CSSにぶち込んでみたのですが、
やり方ちがいますでしょうか？

173 ：Name_Not_Found：2005/08/29(月) 22:06:07 ID:???

>>153はまずhtmlの基礎を覚えたほうがいいと思う。
絶対パス(フルパス)で指定してるけど、相対パスで指定できたら楽になるよ。
直リンならスマソ。
で、空白が空く原因はimgの前後に<p>要素を指定しているから。
<img～>前後の<p></p>をとりのぞくのが一番てっとりばやい。

とりあえずCSS関係ではなさそうなんで誘導
Webサイト制作初心者用質問スレ
http://pc8.2ch.net/test/read.cgi/hp/1125024202/

174 ：Name_Not_Found：2005/08/29(月) 22:07:24 ID:???

>>171

Webサーバーですか。
cssではムリとか難しすぎるということなんでしょうか？

175 ：Name_Not_Found：2005/08/29(月) 22:09:44 ID:???

>>173
スレ誘導ありがとうございます。
<p>を取り除いたのですが、空白が解消されませんでした。。
コレもあっちのスレで聞いてみることにします。
相対パスも勉強してみます。
どうもありがとうございました。

176 ：Name_Not_Found：2005/08/29(月) 22:18:26 ID:???

>>172
HTML/CSSのソースを晒せ

>>174
CSS以前に鯖の基礎から勉強したほうがよさそげ

177 ：Name_Not_Found：2005/08/29(月) 22:25:44 ID:???

>>176
わかりました。
もう少し勉強してみます。ども。

178 ：Name_Not_Found：2005/08/29(月) 22:29:07 ID:???

IE で　max-width を指定する方法　ありますかね。。。

179 ：Name_Not_Found：2005/08/29(月) 22:30:43 ID:???

>>178
つ【ttp://www.zspc.com/documents/css2/index.html】

180 ：Name_Not_Found：2005/08/29(月) 22:32:58 ID:???

>>174
言いたいことがよくわからないのだが、外部リンクと内部リンクでスタイルをわけるということかな？
内部リンクを全て相対パスで書いていて、外部リンクを全て絶対URIで書いてるという前提なら、
a[href|="http://"]とa[href|="."]でいいんじゃないか？
ただどっかのシェアNo.1のバカブラウザは対応してくれてないが。
これに対応させるなら、Java Script使って自動でclass属性振るようにするとかしたらよさげ。

181 ：Name_Not_Found：2005/08/29(月) 22:37:26 ID:???

>>180
それです。
外部リンクを全て絶対URIで書いて、そのようにわけるのですね。
対応ブラウザがオペラ？しか対応してないようなので、
ジャバの方を考えてみることにします。どうもです。

182 ：Name_Not_Found：2005/08/29(月) 22:38:19 ID:???

>>181
もっと質問のしかたから勉強ヨロ

183 ：180：2005/08/29(月) 22:42:57 ID:???

>>181
念のため。
JavaとJava Scriptは違うものなので。
あとGeckoも対応してるよ
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#attribute-selectors

184 ：Name_Not_Found：2005/08/29(月) 23:04:06 ID:???

> Java Script使って自動でclass属性振るようにするとか

この技を紹介してるサイト教えて欲しい

185 ：Name_Not_Found：2005/08/29(月) 23:06:18 ID:???

Java ScriptじゃなくてJavaS（ｒｙ

186 ：171：2005/08/29(月) 23:06:39 ID:???

>>174
ｽﾏｿ誤爆した。これなかった事にしてちょ。
＃＃本当は、初心者スレに投稿するハズだったのに…

187 ：180：2005/08/29(月) 23:09:28 ID:???

>>185
確かに。ちょっと前にwikiを弄ったときに「?」がつくのが嫌でワザとスペース入れたりしてたのでつられたのかも（と言い訳してみる）
いつもはスペース入れないのになんで入れちゃったんだろ…

>>184
具体的には俺は知らないので他の人に任せる。
俺は以前http://www.parkcity.ne.jp/~chaichan/src/2ndthema.htmを見ながら試行錯誤して
ようやくあれこれポップアップに似た奴の簡易版みたいのを作るところまでいけた程度なので…
おんなじ要領でclassを自動で振ることもできるんじゃないかなぁと思っただけです。

188 ：184：2005/08/29(月) 23:14:22 ID:???

>>187
>できるんじゃないかなぁと思っただけです
そういうことかトンクス
おれも文章構造とは関係の無い見栄えやお節介機能をJava Scriptでまとめてしまおうと思ってるので頑張るわ

189 ：Name_Not_Found：2005/08/29(月) 23:15:16 ID:???

>>186
171は自分なわけだが、おまえは誰だ。

190 ：171：2005/08/29(月) 23:18:25 ID:???

>>189
え、違うよ！それは俺の投稿だってば。

191 ：171 190：2005/08/29(月) 23:19:56 ID:???

>>189
ｽﾏｿ…
違うスレでもつ .htaccessって書き込んだから間違えた。
逝ってくる…

192 ：Name_Not_Found：2005/08/29(月) 23:21:36 ID:???

これか？
http://pc8.2ch.net/test/read.cgi/hp/1125024202/161

193 ：Name_Not_Found：2005/08/29(月) 23:32:17 ID:???

>>191
良かった。
ドッペルゲンガーが出て俺の命は（ｒｙかとオモタ。

194 ：Name_Not_Found：2005/08/30(火) 02:59:35 ID:???

>>191の素直な謝罪と、>>193がうまい冗談で許してるこのやり取りがなんだか見てて微笑ましかった(´･ω･`)

195 ：Name_Not_Found：2005/08/30(火) 10:19:25 ID:???

FirefoxにだけCSSを読み込ませたい時って
HTMLとCSSの記述だけで振り分ける方法ってありますか？

196 ：159：2005/08/30(火) 11:02:22 ID:???

>>159
誰も答えてくれない…（´・ω・｀）

197 ：Name_Not_Found：2005/08/30(火) 11:09:42 ID:???

今までフレームやテーブルを使ってデザインしていたんですが、
スタイルシートで挑戦しています。
参考になるサイトがなかなかないので、
スタイルシートデザイン主体サイトのソースを見ながら、
1つずつ解析してやっているのですが、
複雑でいまいち構造がわからなくて困っています。
>>4のサイトは一通り見ましたが、どこも断片的なものばかりで、
スタイルシートデザインに特化してる解説・参考サイトがありましたら紹介してください。

198 ：Name_Not_Found：2005/08/30(火) 11:11:33 ID:???

>>197
HTMLがよくわかってるなら
ttp://deztec.jp/lecture/rn/index.shtml
HTML→CSSでのリニューアル講座

199 ：Name_Not_Found：2005/08/30(火) 11:13:24 ID:???

>>195
Firefoxだけはムリポ

200 ：197：2005/08/30(火) 11:20:45 ID:???

>>198
どうもありがとうございます。
web制作歴は3年なので、たぶん平気だと思います。
早速教えていただいたサイトを見てきたいと思います。

201 ：Name_Not_Found：2005/08/30(火) 12:24:05 ID:???

>>196
あるけど、元々の喪前が示した構成が最適じゃないから回答しにくい。
どんな風にしたいのかよく分からないんだが。

202 ：159：2005/08/30(火) 12:42:56 ID:???

>>201
ごめんなさい(´･ω･`)

htmlを
<div>本文</div>
<div>ナビ（サイト内メニュー）</div>
<div>フッター</div>
と書いて、表示を

---------------
ナビ
---------------
本文

---------------
フッター
---------------

にしたいんです。
ナビは全ページ共通なので、HTMLとしては下、実際の表示は上に持ってきたいです。
（CSSオフにしたときに、毎回上部にナビが出てうざいので）

これで伝わりますでしょうか(´･ω･`)

出来れば座標の絶対指定（position: absolute;）は使いたくないんです。
本文の上にヘッダ（ヘッダのheightは可変）を書く可能性があるので。

マークアップが汚いのはごめんなさい。
もしよろしければ指南いただけたら嬉しいです(･_･)(._.)ぺこり

203 ：Name_Not_Found：2005/08/30(火) 13:11:17 ID:???

>>202
なるほど。
containerはbody直下の全体を包含するブロックなのか？
何のためのcontainerブロックなのか分からないが、とりあえず、

<body>
　<container>
　　　<header></header>
　　<wrapper>
　　　<content></content>
　　　<navi></navi>
　　<wrapper>
　　　<footer></footer>
　</container>
</body>

こんな感じにして、wrapperを基点にnaviでposition指定すればいいかと。
あと、>>80でも言われてるけど、borderの分の幅が考慮されてない。
そんなところかな。

204 ：159：2005/08/30(火) 15:41:02 ID:???

>>203ｻﾏ
ありがとうございます。
<wrapper>で navi と content を括ってしまうんですね！
目から鱗です。これなら行けそうです(`･ω･´)

> 何のためのcontainerブロックなのか分からないが
そういや意味ないかもしれません…
消すことも考えてみます。

>>80ｻﾏ
分かりにくい＆言葉足らずな説明にもかかわらず、
教えてくださりありがとうございました☆

> #contentにある{ float: left; }はIEでは無効になっている。
> 無効というかブラウザ側が勝手{ clear: left; }を入れてしまうからだ。
というのは初耳でした。ブラウザがそんな挙動することもあるのですね。

>>80ｻﾏ、>>203ｻﾏ　本当にありがとうございました
*・゜゜・*:.。..。.:*・゜(n‘∀‘)η゜・*:.。. .。.:*・゜゜・*

これにて退散しますﾉｼ

205 ：Name_Not_Found：2005/08/30(火) 15:49:21 ID:???

divにwidthとpaddingを同時に設定する場合、
ブラウザによってwidthの設定を振り分ける必要があると思うのですが、
XML宣言を入れた上でも正しく動作する振り分け方法はあるでしょうか？

http://www6.plala.or.jp/go_west/nextcss/tip/trans/boxmodelhack_jp.htm
では「XML宣言は不要」とつっぱねられてるんですが、やはり気持ち悪いので

206 ：Name_Not_Found：2005/08/30(火) 15:55:06 ID:???

>>205
標準モードであれば振り分ける必要はない
ただしWin IEにはXML宣言があると互換モードになるというバグがある
よってWin IEだけ振り分ければいい
振り分け方法はテンプレ見れ

207 ：205：2005/08/30(火) 16:00:39 ID:???

>>206
なるほど、よく理解してなかったみたいです
速レスどもでしたー

208 ：超初心者：2005/08/30(火) 16:56:14 ID:???

どなたか教えてください。【CSSファイルの設定】
#content {width:720px; margin:0px;}
#content ul,li{margin:0px; padding:7px; list-style:none;
background-color:#FFF8DC; font-size:14px; line-height:23px;}
【htmlファイルの設定】<ul><li>200字くらいの英文</li></ul>

をFireFox1とNetscape7&8（Mac&Win両方）で見ると、長い英文が
折り返されずにボックスからはみだすのですが、overflowを使わないで
回避する方法はありますか?（Safari、IE、Opera及び日本語の長文は
折り返されます。）

209 ：Name_Not_Found：2005/08/30(火) 17:01:33 ID:???

>>208
単語で区切ってたら普通に折り返されるはずだが。
ページ晒せ。

210 ：Name_Not_Found：2005/08/30(火) 17:03:20 ID:???

その前に、<li>に２００字くらいの文章ってなんだ？

211 ：Name_Not_Found：2005/08/30(火) 17:13:19 ID:???

>>208
適当に文字列並べただけで英文打ってないだろ
たとえば「aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa」なんてずっと並べても
英文の特性上、これは一つの単語とみなされる
この場合、間にハイフンが入っていない箇所では改行されない
普通に「I'm a pen（私はペンです）」みたいに打ってみ？
この場合は a の前後で改行される可能性がでてくるから。

212 ：208：2005/08/30(火) 18:08:18 ID:???

こんな大バカ者にレスありがとうございます。
>>209　まだ全然できてないからとても晒せないです。
>>210　実は洋書の京都ガイド本の紹介文とアマゾンやセブンドリームのような
ブックサイトのリンク先数カ所を入れようとしていました。
←これ全部書くより「長い英文」と書いた方が短くていいかなと思ったんです。
>>211　もうまさにご指摘の通りです。何行入れたらどのくらいボックスが
広がるんだろうとか思って、コピーしたリンク先アドレス（これも微妙に長い）
をいくつもペーストしちゃってました。仰せの通りI'm a penを入れてみたら
折り返されました。ほんと感謝です。長文ごめんなさい。

213 ：Name_Not_Found：2005/08/30(火) 18:12:52 ID:???

半角スペースは恋を呼び寄せるよ

折り返されて描写されるでしょ？

折り返し地点って事さ、これがラブハーフパッディンなんだよ

214 ：Name_Not_Found：2005/08/30(火) 19:22:31 ID:???

(･∀･)ﾊﾟｯﾃﾞｨﾝ♪

215 ：Name_Not_Found：2005/08/30(火) 19:31:12 ID:???

(-∀-)ﾏｰｼﾞﾝ♪

216 ：Name_Not_Found：2005/08/30(火) 19:59:33 ID:???

(*ﾟ∀ﾟ)=3ﾎﾞ～ﾀﾞ～♪

217 ：Name_Not_Found：2005/08/30(火) 20:30:41 ID:???

Web制作板だからこそ通じるAAお疲れさん

218 ：Name_Not_Found：2005/08/30(火) 23:31:48 ID:???

可愛いなぁ・・・そいつら・・・

219 ：Name_Not_Found：2005/08/30(火) 23:35:31 ID:???

冷蔵庫のCMかと思った

220 ：Name_Not_Found：2005/08/30(火) 23:40:51 ID:???

>>214-216
なにこの可愛いやつら

221 ：Name_Not_Found：2005/08/30(火) 23:49:00 ID:???

(@﨣@ .:;)?+逐?!準?

222 ：Name_Not_Found：2005/08/31(水) 00:14:57 ID:???

>>221
何よその変な顔文字は！ふざけてるの？

223 ：Name_Not_Found：2005/08/31(水) 04:11:33 ID:???

>>222
な　ん　だ　と

224 ：Name_Not_Found：2005/08/31(水) 04:46:00 ID:???

文字化けか>>221

225 ：質問：2005/08/31(水) 10:47:25 ID:???

全体の横幅を固定から変動にしようと挑戦してみたのですが
力不足なためか自力ではできなかったので教えてください。

【HTML】（中身省略）
<div id="container">
　　<div id="head">
　　　　タイトルやページの説明うんぬん…
　　</div>
　　<div id="menu">
　　　　メニュー（画像を使っているのでここだけ横幅固定）
　　</div>
　　<div id="main">
　　　　本文…わりと多め。
　　</div>
　　<div id="foot">
　　　　CopyRightうんぬん…
　　</div>
</div>

226 ：225：2005/08/31(水) 10:49:16 ID:???

【CSS】(現状・幅px固定)
#container{
　　　　 width:750px;
}

#head {
　　　　 width:550px;
　　　　float:right;
}

#menu {
　　　　 width:200px;
　　　　 float:left;
}

#main {
　　　　 width:550px;
　　　　float:right;
}

#foot {
　　　　width:750px;
　　　　clear:both;
}

227 ：225：2005/08/31(水) 11:05:38 ID:???

【イメージ】
http://puka-world.com/upload/img-box/1125450565659.jpg

【やって見た事】
・#menuの横幅のみpx指定で他の横幅は％指定
　　⇒画面サイズを変えたりするとボックスが被って見えなくなります(TAT）
・ただ単に#headと#menuの横幅指定を解除
　　⇒あたりまえですがfloatがききませんでした。
・#headと#menuの横幅指定を解除し#headと#menuの左をmargin指定で空けて#menuをposition:absoluteで左上にぶち込む
　　⇒#menuの上のほうが#headに隠れてしまいました。#headの行数が変動するため#menuをpositionで指定する事はできません。

CSSの先輩方よろしくお願いします。m(_ _)m

228 ：225：2005/08/31(水) 11:12:20 ID:???

>>227の訂正
・#headと#mainの横幅指定を解除し#headと#mainの左をmargin指定で空けて#menuをposition:absoluteで左上にぶち込む
　　⇒#mainの上のほうが#headに重なってしまいました。#headの縦幅がページや閲覧者が指定するの文字の大きさにより異なるため#mainをpositionで指定する事ができません。

229 ：Name_Not_Found：2005/08/31(水) 11:59:46 ID:???

※夏休み終了直前のよいこのみなさんへ　最後の夏休みの宿題だよ！

「売国新聞」をgoogleで調べてみよう
http://www.google.com/search?hl=ja&lr=lang_ja&ie=UTF-8&oe=UTF-8&q=%E5%A3%B2%E5%9B%BD%E6%96%B0%E8%81%9E&num=50

上位はあの新聞のことばっかりだね、どこの新聞のことか調べてみよう！

230 ：Name_Not_Found：2005/08/31(水) 12:02:06 ID:???

231 ：Name_Not_Found：2005/08/31(水) 12:43:10 ID:???

>>225
http://puka-world.com/upload/img-box/1125459662308.htm

メニューの方が短いこと前提。
長かったら構成変えろ。
後は勝手に汁。

232 ：225：2005/08/31(水) 13:00:52 ID:???

>>231
ソースの順番は#head⇒#menu⇒#main⇒#footが前提なんですよ。
これだと#head⇒#main⇒#menu⇒#footですよね？

CSSをいじるだけでは不可能なんでしょうか？

233 ：Name_Not_Found：2005/08/31(水) 13:47:44 ID:???

>>232
ソース見る力ないのか？
SEO対策を考えて敢えて順番変えたんだが。
menuブロックとmainブロックを入れ替えても表示結果は全く変わらない。

だから後は勝手に汁って言ってんだろうが。

234 ：Name_Not_Found：2005/08/31(水) 13:51:21 ID:???

SEOだけじゃなく音声ブラウザの事も考えてな

235 ：Name_Not_Found：2005/08/31(水) 14:07:16 ID:???

>>225
パクリ先に質問するよろし

236 ：Name_Not_Found：2005/08/31(水) 14:08:37 ID:???

唐突にすいません。
CSSでページの表示が重くなることってあるんですかね？経験上、
* {position:relative;}
とか危険なことしなければ、けっこう複雑なCSS組んでもページが重くなることはないのですが。
ブラウザの内部的にはCSSってどう処理しているのだろう･･･？とちょっと疑問に思ったので。

237 ：159：2005/08/31(水) 14:17:55 ID:???

>>236　あるある

俺が重いと感じるのはIEが多いな。
IEで重いと感じるページでもFirefoxだと軽いことも。

238 ：Name_Not_Found：2005/08/31(水) 14:26:55 ID:???

志村ー！名前名前！

239 ：Name_Not_Found：2005/08/31(水) 17:02:18 ID:???

filter:Alphaを使う場合widthやheightの値を指定しないと効果が現れないのはなぜですか？

240 ：Name_Not_Found：2005/08/31(水) 17:08:16 ID:???

　　仕　　様　　で　　す

241 ：Name_Not_Found：2005/08/31(水) 17:35:08 ID:???

どこで質問すればわからなかったので、スレ違いだったらごめんなさい。

左右分割フレームのホームページで、左がメニュー、右が本文
なんていう構成のところをよくみかけますよね。
あんなかんじのをスタイルシートでやろうと思うのですが、
とうぜんメニュー部分と本文部分のソース全てを各ページにかかないと
いけないと思うのですが、そうなるとソースが長くなって複雑になると思います。
メニュー部分は変わらないので、本文部分だけカスタマイズできるような
都合のいい方法はないでしょうか？

やはりサーバーサイドスクリプトなどで、メニュー部分を別に書いて
インクルードするような方法しかないのでしょうか？

html+cssだけで実現するような方法あったら教えてください。
(外部cssにhtmlソース書いてインクルードするなんてことはできないですよね･･･)

242 ：Name_Not_Found：2005/08/31(水) 17:40:30 ID:???

('A｀)＜ホームページ→ウェブサイト
これが正しい

243 ：Name_Not_Found：2005/08/31(水) 17:44:50 ID:???

ホームページ　【home page】
読み方：エイチピー
別名： HP

　Webサイト、もしくはそのトップページ。サイトのトップではないWebページをホームページと呼ぶこともある。また、Webブラウザを起動したとき最初に表示されるページ。

　当初は、ブラウザ起動時に最初に表示されるページの意味だったが、転じてWebサイトのトップページのことを意味するようになり、さらに、Webサイト・Webページの同義語として用いられるようになった。

時代は変わってるんだよ

244 ：Name_Not_Found：2005/08/31(水) 17:53:20 ID:???

いろんな問題孕んでるが、フレーム使えば楽。

245 ：Name_Not_Found：2005/08/31(水) 17:56:08 ID:???

('A｀)＜ >>243 ﾏｼﾞかよ、おい!?時代に乗り遅れたか＿|￣|◯

246 ：Name_Not_Found：2005/08/31(水) 17:57:41 ID:???

年寄りが元気だな。

247 ：Name_Not_Found：2005/08/31(水) 17:57:57 ID:???

>>236
最近のブラウザは普段から内部に持ってるCSSを元に処理している
つまり、プレーンな表示にもCSSが適応されている事になる
Firefoxなどはブラウザ自体のレイアウトにもCSSをつかっていて、
更にそれがむき出しだから分かりやすいかも

248 ：241：2005/08/31(水) 18:01:42 ID:???

>>242
すみません。ウェブサイトでしたorz

>>244
やっぱそうですよねえ・・・
楽なほうに楽なほうにと考えてるので。
無理そうなのであきらめてphpあたりで
固定部分を書いていきたいと思います。

249 ：Name_Not_Found：2005/08/31(水) 18:57:26 ID:???

フレームの作り方教えてくんろー

250 ：Name_Not_Found：2005/08/31(水) 19:10:50 ID:???

CSS では出来ません

251 ：Name_Not_Found：2005/08/31(水) 19:16:38 ID:???

擬似フレームだったらﾃﾝﾌﾟﾚみれ。

252 ：Name_Not_Found：2005/08/31(水) 19:17:27 ID:???

彼女の作り方教えてくんろー

253 ：Name_Not_Found：2005/08/31(水) 19:19:15 ID:???

短小包茎では出来ません

254 ：Name_Not_Found：2005/08/31(水) 19:20:45 ID:???

真性包茎だったら上野ｸﾘﾆｯｸみれ。

255 ：Name_Not_Found：2005/08/31(水) 19:50:02 ID:???

>>249-254
ﾜﾗﾀ

てか疑似フレームってマウスホイール効かないんだよね、使う気にならんよ

256 ：Name_Not_Found：2005/08/31(水) 19:57:30 ID:???

擬似フレームのとこはやっぱインラインフレームつかったほうが妥当？

257 ：Name_Not_Found：2005/08/31(水) 19:59:43 ID:???

>>255
IE6とサハリが対応しているので、事実上OKってことでいいんじゃね？

258 ：Name_Not_Found：2005/08/31(水) 20:05:30 ID:???

('A｀)＜ >256 NN4.xだと表示されなかった(涙

259 ：Name_Not_Found：2005/08/31(水) 20:11:15 ID:???

NN4には初めからスタイルシート適応させない俺がいる
もちろんIE3なども

260 ：Name_Not_Found：2005/08/31(水) 20:14:20 ID:???

('A｀)＜俺はIEスルー派

261 ：Name_Not_Found：2005/08/31(水) 20:17:59 ID:???

IE6 NN7 Opera8以下のバージョン使ってる人は切り捨てていいｙ

262 ：Name_Not_Found：2005/08/31(水) 20:19:02 ID:???

以下じゃなくて未満だ。

263 ：Name_Not_Found：2005/08/31(水) 20:32:17 ID:???

('A｀)をいをい、冗談はよしたまえ。

俺はこう…

IE全部
NN4.x
Opera(確認もできないので知らん)

264 ：Name_Not_Found：2005/08/31(水) 20:50:25 ID:???

商売じゃないときはCaminoだけですが何か？
XHTML1.1でMIMEタイプはtext/xml、拡張子も.xhtmlにしてあるので
時々苦情が来たりするが、そんときは「ゲイツに文句いってください」で済ませてる

265 ：Name_Not_Found：2005/08/31(水) 20:56:53 ID:???

('A｀)＜あ、あれね。俺は「そんなブラウザを使ってるのが悪い、はいコレ」って
言ってFirefox配布する

266 ：Name_Not_Found：2005/08/31(水) 22:34:04 ID:???

CSS切替をしたいのですが、検索をしてそれっぽいサイトはありました。
そこに．cssファイルを作れと書いてあったのですが、これはテキストエディタで
スタイルシートを書いて、拡張子を変えるだけでいいんでしょうか？

267 ：Name_Not_Found：2005/08/31(水) 22:41:45 ID:???

>256
('A｀)つ ttp://critical.s6.xrea.com/web/cssselect.html

268 ：Name_Not_Found：2005/08/31(水) 22:42:24 ID:???

>>266
その文章じゃいまいち何がしたいかわからないけど、
外部cssを作る方法はそれであってる。
エディタにスタイルシート記述して拡張子cssで保存。
ぶっちゃけtxtのままでも読み込めるからいいんだけどね。

269 ：267：2005/08/31(水) 22:42:27 ID:???

('A｀)＜レスアンカー間違えた、>>266だよ

270 ：Name_Not_Found：2005/08/31(水) 22:47:49 ID:???

>>267
>>268
お二人ともありがとうございます。
もう1つ聞きたいことがありまして、
seesaaブログでトップ画面と記事画面とでCSSを変えられるのですが、
そのようなものを外部CSSに記述するにはどうしたらいいでしょうか？
トップ画面のCSSを書き足してから、記事画面のCSSを追加して保存すればいいのでしょうか？
よろしくおねがいします。

271 ：Name_Not_Found：2005/08/31(水) 22:50:34 ID:???

>>270
CSSは上書きできる
一般的には後から書いた方が優先度が高く、
制作者よりユーザが指定したものの方が優先される
いろいろ調べてみ

272 ：Name_Not_Found：2005/08/31(水) 22:55:00 ID:???

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

273 ：Name_Not_Found：2005/08/31(水) 23:16:47 ID:???

質問です。
スクロールバーの色を変えようと思い、

scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#A9A9A9;
scrollbar-darkshadow-color:#000000;　…

と記述しましたが一向に反映されず、
あれこれ試した結果、DOCTYPE宣言の
"http://www.w3.org/TR/html4/loose.dtd"
の部分を削除したら反映されました。
なぜなのか全く分かりません。
どなたか理由をご存じでしょうか？

274 ：Name_Not_Found：2005/08/31(水) 23:22:47 ID:???

参考にした本なりサイトなりに書いてなかったか？

IE独自であり、互換モード以外は無視される。
つまり、IE以外では見えてないのよ。

DTD　勉強しれ

275 ：Name_Not_Found：2005/08/31(水) 23:37:27 ID:???

後方互換モードって言い方古いだろうよ、今の時代、Quirksモードだろうよ

276 ：Name_Not_Found：2005/08/31(水) 23:40:54 ID:???

>>273
互換モードならbody、標準モードならhtmlに記述しなきゃ認識してくれなかったとオモ
だからhtml, body{すくろ～るば～設定}と書けばどっちでもOK

277 ：Name_Not_Found：2005/08/31(水) 23:42:03 ID:???

書こうと思ったが>>276の通り。

>>275
どっちでも良くね？IEに関しては。

278 ：Name_Not_Found：2005/08/31(水) 23:42:45 ID:???

>275('A｀)＜どっちでもいいがな

279 ：Name_Not_Found：2005/08/31(水) 23:58:38 ID:???

でもさすがにWebサイトをホムペと言うのには慣れない…古いのかなorz

280 ：273：2005/09/01(木) 00:08:57 ID:???

皆さんご親切にありがとうございます。
もちっと勉強します。
CSSは難しいなあ。

281 ：Name_Not_Found：2005/09/01(木) 00:09:21 ID:???

('A｀)俺のHome PageはGoogleだよって言うと皆なビビるだろうな。
何しろ設定がGoogleなのでね。

282 ：Name_Not_Found：2005/09/01(木) 00:28:49 ID:???

ホムペ、Webサイト、Webページについて。（板違いスマソ
閲覧者（ユーザー側）よりもサーバー側や製作側がそう明示してるよな。
ホームページ作成ソフトとか、ホームページを作ろう、って。
参考：http://www.ippo.ne.jp/g/63.html

283 ：Name_Not_Found：2005/09/01(木) 00:30:04 ID:???

どうでもいいが質問系のスレに最近いる
('A`)＜
これではじまるやつ。
ウザイからやめてくれ。

284 ：Name_Not_Found：2005/09/01(木) 00:48:09 ID:???

おれも、('A`)←こいつ嫌い

285 ：Name_Not_Found：2005/09/01(木) 00:56:34 ID:???

>283
違うよ、こうだって…

× ('A`)
◯ ('A｀)

286 ：Name_Not_Found：2005/09/01(木) 00:59:06 ID:???

('A｀)＜ OKおーけー、以後消えます。ﾉｼ

287 ：Name_Not_Found：2005/09/01(木) 01:07:36 ID:???

(・３・)アルェー

288 ：Name_Not_Found：2005/09/01(木) 02:03:57 ID:???

・)３('A｀)

289 ：Name_Not_Found：2005/09/01(木) 02:31:09 ID:???

・)３('A｀；)
ｳｰﾝ…

290 ：236：2005/09/01(木) 09:57:17 ID:???

>>237
IEはCSS処理重いですね。
複雑なCSS組んで、a:hoverとか設定するとさらに激重に。
あれが嫌でFirefoxに乗り換えたようなもんです。

>>247
言われてみればたしかに。ブラウザのデフォルトCSSってありますね。
h1のフォントが大きくなったりマージンがついたり。
内部処理的にはDOMみたく各要素にそれぞれCSSプロパティを持っていて、
スタイルシートに記述された値をひたすら代入していき、全部読み終わったらレンダリング開始･･･てな感じですかね？
ということはCSSのサイズが大きくなればなるほど時間がかかるということですか･･･。

291 ：Name_Not_Found：2005/09/01(木) 10:34:24 ID:???

>>290
知ったような事言うもんじゃねぇよｗｗｗ
後に見返してみな、恥ずかしい思いすんのはてめぇだよｗｗｗｗ

292 ：Name_Not_Found：2005/09/01(木) 10:50:12 ID:???

>>291
おまえの発言のほうが恥ずかしい感じだよ…

293 ：Name_Not_Found：2005/09/01(木) 10:55:21 ID:???

OperaだけにCSSハックできない？

294 ：Name_Not_Found：2005/09/01(木) 11:07:26 ID:???

>>293
ttp://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

295 ：Name_Not_Found：2005/09/01(木) 12:25:47 ID:???

質問よろしいでしょうか。

<div class="**">あいうえお</div>

だといいのですが、

<div class="**"><img src="**"></div>

という形（文字を入れずに画像だけ）にすると、
次に入力したDIVがこれの下に表示されず、
ウィンドウの左上に表示されてしまいます。

このような場合、どうしたら順番に表示させられるでしょうか。
position:absoluteはできるだけ使いたくありません。

296 ：Name_Not_Found：2005/09/01(木) 12:29:15 ID:???

>>295
いや普通は下に配置されるから
もっと詳しいHTML/CSSソースを出してホスィ

297 ：Name_Not_Found：2005/09/01(木) 12:42:11 ID:???

------------html-----------
<div class="wrap">

<div class="a">
<img src="**" width="10" height="108"><img src="**" width="740" height="108">
</div>

<div class="b">
<img src="**" width="150" height="27"></div>

</div>
------------CSS-----------
.wrap {width:100%;}
.a {width:750px;}
.b {width:750px;}
---------------------------
こんな感じです。
『wrap』というdivで『a』と『b』を纏めるようにしていますが、
なぜか『a』の下までしかwrapの下辺が来ません。
こいつのせいかと思って一度『wrap』をはずしてみましたが、
『b』が左上に来てしまうのは直らなかったです。

298 ：Name_Not_Found：2005/09/01(木) 12:49:17 ID:???

>>297
何をしたいのか相手に分かるように書いてくれ

299 ：Name_Not_Found：2005/09/01(木) 12:57:13 ID:???

>>297
> なぜか『a』の下までしかwrapの下辺が来ません。
どうやって確認した？

スタイル指定は確認した時のまま全て晒せ。

300 ：Name_Not_Found：2005/09/01(木) 12:57:32 ID:???

>>298
つ>>295,>>297

301 ：Name_Not_Found：2005/09/01(木) 12:59:23 ID:???

>>297
bのimgがaの左上に来てしまう、ということでよろし？
その部分だけのファイルを作って確認したが、
NN/Firefox/Opera/IE
どれでもちゃんとbがaの下に来たよ
それ以外のところでなんかへましてないか？
もし
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd">
<html>
<head>

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

</style>
</head>
<body>
<div class="wrap">
<div class="a">
<img src="1.png" width="10" height="108"><img src="2.png" width="740" height="108">
</div>
<div class="b">
<img src="3.png" width="150" height="27"></div>
</div>
</body>
</html>
これだけでもbが上に来るってんなら、おまいさんの環境がおかしくなってると思われ

302 ：Name_Not_Found：2005/09/01(木) 13:09:53 ID:???

>>301
最近DTDすらちゃんと書けない香具師が多いな。
<!DOCTYPE html PUBLIC (ry
ここのhtml以外は大文字小文字変更不可。システム識別子も同様。

303 ：Name_Not_Found：2005/09/01(木) 13:16:33 ID:???

>>302
悪い、間違えて置き換えちまっただけ

304 ：297：2005/09/01(木) 13:21:25 ID:???

皆さんご助言ありがとうございます！
なにやら書き方が不味かったようで、
混乱およびご迷惑おかけして申し訳ありませんでした。

!doctypeを入れ替えることで解決いたしました。
皆さんどうもありがとうございました。

305 ：Name_Not_Found：2005/09/01(木) 13:24:20 ID:???

>>304
スマソ、間違えてたんだけどそれでもいった？
正しくは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
なんでヨロ

306 ：Name_Not_Found：2005/09/01(木) 13:31:29 ID:???

>>302
htmlの大文字小文字って自由に決めていいのか…
HTML 大文字、XHTML 小文字だと思ってた

307 ：297：2005/09/01(木) 13:32:22 ID:???

>>305
はい、ここに書き込む直前に
ちょうど!doctypeについて調べていて、
ブックマークに入っていたサイトからコピペして使いました。

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

308 ：Name_Not_Found：2005/09/01(木) 13:39:06 ID:???

>>306
それは要素の話じゃないか？
htmlは大文字小文字が区別されないってだけ

309 ：Name_Not_Found：2005/09/01(木) 14:39:00 ID:???

>>306
文書型宣言のDOCTYPEに続くキーワードはルート要素名に一致する必要がある。
で、HTML (っていうかSGML) だと要素名の大文字小文字は無視されるから
<!DOCTYPE HTML ...>でも<!DOCTYPE html ...>でも<!DOCTYPE HtmL ...>でもOK。
だけどXHTML (っていうかXML) だと要素名の大文字小文字が区別されるから
<!DOCTYPE html ...>じゃないとダメ。

310 ：Name_Not_Found：2005/09/01(木) 15:26:33 ID:???

さがってきたからage

311 ：Name_Not_Found：2005/09/01(木) 16:53:07 ID:Yxf39ByD

htmlには
<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>

cssには
ruby { white-space: nowrap; ruby-align: distribute-letter; }

っていう風に記述しました。
脳内ブラウザでは、「漢字」は改行されることなく、「かんじ」が均等に振られるはずでした。

ところが現実ブラウザでは、たしかに「漢字」は改行されなくなりましたが、
「かんじ」が左寄せされたままです。

脳内ブラウザの表示を実現するためには、どうすればよいでしょうか。

312 ：Name_Not_Found：2005/09/01(木) 16:54:08 ID:???

body{}とbody a{}って分ける意味があるのでしょうか？
見やすいとかの理由でしょうか？

313 ：Name_Not_Found：2005/09/01(木) 17:04:40 ID:???

>>312
bodyは<body>～</body>で囲まれた全てのものに適用される。
body aは<body>～</body>の中にある、<a>要素だけに適用される。
意味がぜんぜん違うってことだな。

314 ：Name_Not_Found：2005/09/01(木) 17:08:32 ID:???

>>312
追記しとくと、body a{}なんていうのは普通かかない。
body{}とa{}で分けるのが普通。

315 ：Name_Not_Found：2005/09/01(木) 17:23:39 ID:???

IE6を最新のFirefox1.0.6の表示に出来るだけ近くしたいと思います。

ドキュメントタイプの設定を
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
としているのですが、よりFirefoxの表示・仕様に合わせることが出来る
ドキュメントタイプってあるのでしょうか？

316 ：Name_Not_Found：2005/09/01(木) 17:27:45 ID:???

>>311
特に不都合がないのならば、以下のものを勧める。

{ white-space: pre; }

preとnowrapの違いは空白を残すか残さないかぐらいだからいいんじゃないかな？

317 ：Name_Not_Found：2005/09/01(木) 17:56:43 ID:rTyF40RQ

postionのabsoluteの使い方について質問です。
まず、以下のように記述しています。（画面上、詰めて書きます）

【CSS】
html,body{
height:100%; width:600px; padding: 0px;
margin-top: 0px; margin-right: auto;
margin-bottom: 0px; margin-left: auto;
}
#wrapper{　width:600px;　height:100%;　background-color:#cccccc;}
#main{　width:560px;　height:100%;　background-color:#ffcc00;
top: 20px;position: absolute; left: 20px;
}
【HTML】
<div id="wrapper">
<div id="main">あああ</div>
</div>

Firefoxだとwrapperのグレーの枠内にオレンジの枠が納まりますが
IE6.0だとブラウザの位置で固定されてしまう為、表示が大幅に崩れます。

IE6.0をFirefoxのような表示・仕様にする事は出来ないのでしょうか？

318 ：Name_Not_Found：2005/09/01(木) 18:21:18 ID:???

>>313

>>314

ﾜｶﾘﾏｼﾀ。どうもありがとうございました。

319 ：Name_Not_Found：2005/09/01(木) 18:23:25 ID:???

>317 >ブラウザの位置で固定されてしまう為
意味不明

320 ：Name_Not_Found：2005/09/01(木) 18:37:46 ID:???

>>317
基準点作くらっしゃい。

321 ：Name_Not_Found：2005/09/01(木) 18:40:12 ID:???

リストについての質問です。

<li><a>写真の部屋</a></li>
<li><a>掲示板</a></li>

みたいに文字を入れてcssでtext-indent:-3000等を掛けて文字を見えなくし
backgroundで画像を表示させてボタンのメニューにしたいのですが
display:inlineをするとどうしても画像の方にもindentが掛かってしまいます
これはどうにかできないのでしょうか？
どうぞよろしくお願いいたします。

322 ：Name_Not_Found：2005/09/01(木) 18:47:18 ID:???

>>321
display:none;

323 ：Name_Not_Found：2005/09/01(木) 19:02:28 ID:???

今度は画像も消えてしまいました

324 ：317：2005/09/01(木) 19:18:05 ID:???

>>320
すみません、「基準点を作る」の意味がよくわかりません・・。
だいぶググったのですが、詳しく書かれているサイトないし・・。

325 ：Name_Not_Found：2005/09/01(木) 19:43:21 ID:???

>>323
画像は、
background-image: url('sutyaraka.jpg');

326 ：321：2005/09/01(木) 20:01:36 ID:???

すいませんどうにか横並びにしたいんでinlineって事にしたのですが
inlineでなんとかうまくいかないものでしょうか・・？

327 ：Name_Not_Found：2005/09/01(木) 20:09:34 ID:???

>>321
横槍を入れてスマンが、その技は結構危険だってことを認識して欲しい。なぜ危険かは次の文書に書いてある。
http://www.marguerite-site.com/Nihongo/HowToMakeYourWeb/Columns/ViewableWithoutImage.html#Off-left

328 ：Name_Not_Found：2005/09/01(木) 21:42:13 ID:???

全然危険じゃない。
なぜなら画像をＯＦＦにして巡回するやつなんていないから。乙

329 ：Name_Not_Found：2005/09/01(木) 21:47:27 ID:???

>>328
少ないけど、確実にいる。
通信速度が出ない場合に、とりあえずブラウザでは画像をオフにする、
っていう文化つか慣習は、ブロードバンド以前の頃から確実に存在しますよ。

330 ：Name_Not_Found：2005/09/01(木) 22:01:40 ID:???

別に画像をOFFにしてなくても、何らかのトラブルで画像が読み込めないってこともありえるしな

331 ：３１１：2005/09/01(木) 22:32:15 ID:???

>>316
感謝する。卿の提言を採用したところ、件の問題点が解決されたことを確認した。

めちゃくちゃサンキュー！　ありがとう！！！！
nowrap と　pre の違いも理解できた！！！！
お世話になりました

332 ：Name_Not_Found：2005/09/01(木) 22:55:17 ID:???

>>328
俺はOFFにしているが何か？

333 ：Name_Not_Found：2005/09/01(木) 23:06:15 ID:???

俺もオフにしてるな

334 ：Name_Not_Found：2005/09/01(木) 23:12:30 ID:???

オフ会やらね？

335 ：Name_Not_Found：2005/09/01(木) 23:14:17 ID:???

みんなでノート持ち込んで画像表示をOFFにする会か？

336 ：Name_Not_Found：2005/09/01(木) 23:17:04 ID:???

.｡oO( 画像表示させないとさっぱりわからないサイトも
　　　　沢山あるのに何意地張ってるんだか…

337 ：Name_Not_Found：2005/09/01(木) 23:20:49 ID:???

そういうときは、しゃあなしに戻してる。

338 ：カス野郎 ◆z.fnC4lCx2 ：2005/09/01(木) 23:25:18 ID:???

そういうときは、帰る。

339 ：Name_Not_Found：2005/09/01(木) 23:44:35 ID:???

どうせ画像ＯＮで見てるんでしょ
変な見栄張らなくていいよ。別にかこよくない

340 ：Name_Not_Found：2005/09/01(木) 23:47:18 ID:???

>>339
オペラやファイアフォックスはクリックの１、２回で簡単に切り替えられるのに
なんでわざわざみたくもないサイトで画像を読み込まなきゃいけないんだ？

341 ：Name_Not_Found：2005/09/02(金) 00:00:26 ID:???

ネット小説読んだりするときは画像いらないからなぁ

342 ：Name_Not_Found：2005/09/02(金) 00:02:20 ID:???

テキストメインのサイトを巡回してる奴は
画像オフってるのが多いよ。
おれもそうだけど。

343 ：カス野郎 ◆z.fnC4lCx2 ：2005/09/02(金) 00:06:04 ID:???

テキストブラウザだからそんなの関係ありません

344 ：Name_Not_Found：2005/09/02(金) 00:40:37 ID:???

テキストブラウザってlynx以外に知らんなぁ。

345 ：Name_Not_Found：2005/09/02(金) 00:49:14 ID:???

w3mは？

346 ：Name_Not_Found：2005/09/02(金) 00:51:04 ID:???

おまいらなんていうパケット料金制ブラウザつかってるの？

347 ：Name_Not_Found：2005/09/02(金) 00:52:19 ID:???

ほぼテキストブラウザってのもあったな。

348 ：Name_Not_Found：2005/09/02(金) 00:53:06 ID:???

持ってないからわからないんだが、ケータイってテキストブラウザだったのか？
フルブラウザ機能とか盛り上がるわけだ・・・

349 ：Name_Not_Found：2005/09/02(金) 00:56:13 ID:???

なんだか一人必死な奴がいるな
画像を表示させてない奴がいるのがそんなに許せないのか？

350 ：Name_Not_Found：2005/09/02(金) 01:11:37 ID:???

画像を表示させないと背景画像も表示されないの?

351 ：カス野郎 ◆z.fnC4lCx2 ：2005/09/02(金) 01:13:32 ID:???

そうですよん。。背景画像は飾りだから別に良い。
img要素にはaltをしっかり入れてくれれば。

352 ：Name_Not_Found：2005/09/02(金) 01:19:33 ID:???

もち
俺の場合、背景画像は常に表示させていない
配色も自分で指定したものを強制的に当てはめてる
極めて普通の事だがね

353 ：Name_Not_Found：2005/09/02(金) 02:02:22 ID:???

少数派の癖に威張り散らすのが気に入らない

354 ：Name_Not_Found：2005/09/02(金) 08:50:02 ID:???

スタイルシート切った方が閲覧しやすいですねｗｗｗｗ
ってコメントをもらいました

切って閲覧してる人っているんですか？

355 ：Name_Not_Found：2005/09/02(金) 09:14:23 ID:???

>>654
切ったほう、つまり自分の見やすいCSSに切り替えたほうが見やすいのは当然
ユーザーCSSでぐぐってみ

356 ：Name_Not_Found：2005/09/02(金) 09:31:37 ID:???

654・・スマソ

357 ：Name_Not_Found：2005/09/02(金) 09:35:40 ID:???

>>354
常に切ってるわけじゃないが
見づらいときは躊躇いなく切るよ。

358 ：Name_Not_Found：2005/09/02(金) 10:38:09 ID:???

IE|Moz ウェブページのCSSを無効にする方法
http://members.jcom.home.ne.jp/jintrick/Personal/usr_styleoff.html

359 ：Name_Not_Found：2005/09/02(金) 12:06:57 ID:???

>>354
「Opera」ってブラウザ試してみ
ボタン一つで切ったり切らなかったりできるから
試すだけなら無料版で十分

360 ：Name_Not_Found：2005/09/02(金) 12:34:22 ID:???

354です
opera導入す
なるほど、こりゃーべんりだ

ゆーざーCSSってのもあるんですね

で、自分のサイトをスタイルシート切って閲覧したら、
たしかに見やすかった
情報が整理され、流れるように閲覧できました

ＩＥ以外のブラウザ使うと勉強になるなぁ

361 ：Name_Not_Found：2005/09/02(金) 12:37:51 ID:???

>>360
それを見やすいと感じたんなら
それに合わせてCSSを作ってみるってのも手だよ

362 ：Name_Not_Found：2005/09/02(金) 14:32:50 ID:???

OperaじゃなくてもCSSの適応設定は大体のブラウザに付いてるだろ。
タブブラウザにもあるし。

363 ：Name_Not_Found：2005/09/02(金) 14:47:16 ID:???

でもOperaが一番使いやすいなぁ
ということで359は薦めたんだろう
自分のOperaが一番楽、ただし7

364 ：Name_Not_Found：2005/09/02(金) 15:05:40 ID:???

携帯から見たらどうなるかスタイルシートで再現する方法があったと思うのですが、
何処のサイトだったか忘れてしまって…。教えてください。

365 ：Name_Not_Found：2005/09/02(金) 15:22:25 ID:???

http://www.marguerite-site.com/Nihongo/HowToMakeYourWeb/Mobile/CSSVerify.html
これか？
大分古い記事のようだけど。

366 ：365：2005/09/02(金) 15:23:34 ID:???

すまん、何か他のものと勘違いしてた。
ちゃんと更新されてる記事のようです。

367 ：Name_Not_Found：2005/09/02(金) 15:37:46 ID:???

>>365
それ！ありがと。

368 ：Name_Not_Found：2005/09/02(金) 16:02:47 ID:???

h1～h6まで同じものを記述するときは、
普通、h1,h2,h3,h4,h5,h6{*}とやるのでしょうが、
正規表現でもっと適切なやり方はないのでしょうか？
h{*}とかh1-h6{*}とか試したのですが、だめそうなので・・・

369 ：Name_Not_Found：2005/09/02(金) 16:26:47 ID:???

>>368
それでいい

370 ：368：2005/09/02(金) 16:32:43 ID:???

>>369
やっぱh1,h2,h3とやらなきゃだめですかー
なんか長くなるし汚いので他に方法ないかと思いましたが、
あきらめてこれでやっていきたいと思います。

371 ：Name_Not_Found：2005/09/02(金) 16:53:35 ID:???

>>368
*{*}

372 ：Name_Not_Found：2005/09/02(金) 17:20:33 ID:???

>>371
何が言いたい

373 ：Name_Not_Found：2005/09/02(金) 17:21:11 ID:???

>>371
それじゃあ余計めんどくさくなるだけだろ

374 ：Name_Not_Found：2005/09/02(金) 17:25:46 ID:???

h1,h2,h3{}
ではなくて
h1{}
h2{}
h3{}
ってこと？ｗ
どうみたって面倒だな。

375 ：Name_Not_Found：2005/09/02(金) 23:21:58 ID:???

幅：230cm
高さ：21mm
白さ：52bb
鮮度：10x4

みたいなデータ一覧を表示させるときに「：」の位置を揃える方法はありますか？
table以外の方法で何かいい手はありませんでしょうか？

今こんな感じです。
もっといい方法はありませんか？

<span>幅</span><em>幅：230cm</em>

span { position:absolute; width:5em; }
em { position: absolute; margin-left: 6em; }

376 ：Name_Not_Found：2005/09/02(金) 23:23:24 ID:???

まちげぇた。

<div><span>幅</span><em>：230cm</em></div>

div { position: relative; }
span { position:absolute; width:5em; }
em { position: absolute; margin-left: 6em; }

377 ：Name_Not_Found：2005/09/02(金) 23:25:11 ID:???

>>375
方法はいいと思うけどdl/dt/dd使ったらどうか

378 ：Name_Not_Found：2005/09/02(金) 23:25:54 ID:???

なんじゃそりゃ

379 ：375：2005/09/02(金) 23:30:24 ID:???

>>377
方法いいの？
もっと簡単でうまいやり方はないのでしょうか？

dl要素が望ましいんでしょうけどcssを外したときに縦長になるので。

380 ：Name_Not_Found：2005/09/02(金) 23:37:10 ID:???

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<dl>
<dt>幅</dt><dd>：230cm</dd>
<dt>高さ</dt><dd>：21mm</dd>
<dt>白さ</dt><dd>：52bb</dd>
<dt>鮮度</dt><dd>：10x4</dd>
</dl>
</body>
</html>

381 ：Name_Not_Found：2005/09/02(金) 23:42:56 ID:???

あ、別にdl使わなくても一緒
absoluteが親要素からの絶対位置、ということさえわかってれば
spanでやろうとemでやろうと同じ

382 ：375：2005/09/02(金) 23:47:57 ID:???

position:absoluteを使うしかないのか。
絶対配置って使いどころによっては具合悪かったりするんですよね。
中にa要素があったりすると死んでたり…。
Opera8とか。

383 ：Name_Not_Found：2005/09/02(金) 23:50:42 ID:???

幅：230cm
高さ：21mm
白さ：52bb
鮮度：10x4

　これ、立派な表　　　　無理しなさんな。

384 ：Name_Not_Found：2005/09/02(金) 23:53:55 ID:???

俺も思った
>>375がなぜそこまでtableを使いたくないのか気になる

385 ：375：2005/09/02(金) 23:55:16 ID:???

>>383
例みたいなデータだったらtableでもいいですけど

住所：
電話番号：
メールアドレス：

とかだったらtableでマークアップするのはなんか不自然じゃない？

386 ：Name_Not_Found：2005/09/02(金) 23:58:04 ID:???

データとしての表なんだから別にいいのでは…
あぁでもコロンをそろえるのは視覚的なマークアップになるのか？

387 ：Name_Not_Found：2005/09/03(土) 00:00:36 ID:???

表だと言い張れば問題無い

388 ：Name_Not_Found：2005/09/03(土) 00:00:45 ID:???

>>385
「連絡先」として記載しているのではなく「データ」として記載しているのであれば表でいいと思われ

389 ：375：2005/09/03(土) 00:01:56 ID:???

>>384
tableはcaptionのcssの効き具合がブラウザごとに違かったりして面倒なんです。
あとtableはcolとかcolgroupの使い方をいまひとつ理解していません。

なんかcssでレイアウトしているとtableっていう方法は最後の手段みたいに考えてしまうんです。
表の形式になるデータだったらtableでいいんですけど。

390 ：Name_Not_Found：2005/09/03(土) 00:11:06 ID:???

アンチテーブル派の主張がミスリードされることによる弊害
と思えるような事例だな

>>385それをたとえば昆虫図鑑のサイト
・カブトムシ
体長：
全長：
幅：
季節：
餌：

とかに置き換えて、例えば50種類の昆虫を掲載してると考えても「表」は不自然に思えるか？

391 ：Name_Not_Found：2005/09/03(土) 00:14:23 ID:???

>>376のほうが不自然だろうにｗ

392 ：Name_Not_Found：2005/09/03(土) 00:14:44 ID:???

>>389
> tableはcaptionのcssの効き具合がブラウザごとに違かったりして面倒なんです。
captionがどうした？使わなくてもいいだろう。

> あとtableはcolとかcolgroupの使い方をいまひとつ理解していません。
使う必要は別に無いだろ。理解しようと思えばすぐ分かる氏ね。

> なんかcssでレイアウトしているとtableっていう方法は最後の手段みたいに考えてしまうんです。
ピュアCSSアプローチのメリットを良く考えてからピュアCSSで構成しろ。

> 表の形式になるデータだったらtableでいいんですけど。
表になり得る要素が判断できないのか。低脳だな。

393 ：Name_Not_Found：2005/09/03(土) 00:15:33 ID:???

>>389
tableは表の為の要素なんだから、データを用いて表を作る際には
「用いるべきである」といわれている。
つまり箇条書きのときのリストなどと同様に、使う事が好ましい。

394 ：375：2005/09/03(土) 00:20:07 ID:???

CSSでもっと簡単な方法があったら教えて欲しかっただけなんだけど。
ここはCSSの上手な使い方を質問したり回答したりするスレッドなんでしょ？

tableを使おうがdlを使おうがどちらも間違いではないよ。

395 ：Name_Not_Found：2005/09/03(土) 00:22:21 ID:???

だが何でもＣＳＳでやることを推奨するスレでもないんだな

396 ：Name_Not_Found：2005/09/03(土) 00:23:38 ID:???

<th>幅：</th><td>230cm</td>

th {
　均等割付にするか、右寄せ
}

かな？

397 ：375：2005/09/03(土) 00:29:10 ID:???

<dl>
<dt>幅：</dt><dd>230cm</dd>
<dt>高さ：</dt><dd>230cm</dd>
</dl>

dt { text-align: right; width:4em; clear:left; }
dd { float:left; }

だめかな。

398 ：Name_Not_Found：2005/09/03(土) 00:29:25 ID:???

先生、プロパティの一括指定についての質問ですっ！！

border:1px solid #000;
について、border-width , border-style(ry
と、ひとつずつ指定するのはどちらが推奨されますか？
理由もお願いします。IE3対応の為とか、CSSの記述量を考えてとか。

background:#000 url("back.gif") repeat scroll center center;
についても教えてください！
あと、borderに関してはwidthとstyleとcolorの記述順序、
backgroundに関してはcolorとimageと(ry)の記述順序についても考察お願いします。

信者的な回答をお待ちしております。

399 ：Name_Not_Found：2005/09/03(土) 00:32:42 ID:???

そんなこと心配しなくてもIE3で見たら
見られたもんじゃないので問題無いです

400 ：375：2005/09/03(土) 00:34:48 ID:???

>>398
私の場合ですが
borderとbackgroundは一括指定。
marginとpaddingは個別指定です。

理由は margin: 1em 1px 3em 2px;とやると、どれがどれだかわからなくなるからです。

border: 幅　線種　色
background: 色　画像　リピート　固定　水平配置　垂直配置

401 ：Name_Not_Found：2005/09/03(土) 00:41:30 ID:???

>>394
そう。「上手な」使い方。そして「正しい」使い方の為のスレッド。
けっして間違った使い方を広める為ではない。
ってか、四の五の言わずにテーブル使え。
無理してCSSつかっても誰も褒めてくれんぞ。

>>398
borderは慣れると一気に指定してしまった方が楽になってくるが、
初めのうちは分かりやすい方がいいかもね。
特別分かりにくい記述じゃなければ特に決まりはないから、
分かりやすいのが一番だよ。

402 ：Name_Not_Found：2005/09/03(土) 01:11:06 ID:fu0gu7kg

ｃｓｓ

403 ：Name_Not_Found：2005/09/03(土) 01:11:13 ID:???

idとclassって何がどう違うんですか？

404 ：Name_Not_Found：2005/09/03(土) 01:13:59 ID:???

>>403
頻出
過去ログ読むかテンプレ読め

405 ：Name_Not_Found：2005/09/03(土) 01:20:00 ID:???

>>404
読んだ。

406 ：Name_Not_Found：2005/09/03(土) 01:24:33 ID:???

>>405
なら分かったな

407 ：Name_Not_Found：2005/09/03(土) 01:26:16 ID:???

>>406
わかった。

408 ：Name_Not_Found：2005/09/03(土) 01:26:46 ID:v5lQy8e9

　　　　　＿＿＿＿
　　　／∵∴∵∴＼
　　 /∵∴∵∴∵∴＼
　　/∵∴∴,（・）（・）∴|
　　|∵∵／　　 ○　＼|
　　|∵ /　　三　|　三　|　　／￣￣￣￣￣
　　|∵ |　　　＿_|＿_ 　|　＜　うるせー馬鹿！
　　＼|　　　＼＿/　／　　＼＿＿＿＿＿
　　　＼＿＿＿_／

409 ：Name_Not_Found：2005/09/03(土) 01:35:35 ID:???

>>405
404で読めたのか？　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ｺﾞﾒｿ

410 ：Name_Not_Found：2005/09/03(土) 01:36:52 ID:???

ブログでコンテンツを横に追加指定期待のですが、
CSSでどのようにすればいいでしょうか・

411 ：398：2005/09/03(土) 01:37:29 ID:???

>>399-401
回答ありがと。

プロパティ別整理法を考えた時に、何か弊害が生じるかと思って聞いてみますた。
分かりやすさから図書館方式で記述しているのですが。
後方互換はあまり考えないでいいか。ｻｯ

412 ：Name_Not_Found：2005/09/03(土) 01:42:06 ID:???

おいらテーブル毛嫌いしてたけど、いざ使ってみると結構便利よね
いい感じに揃うじゃん？便利じゃん？>>385にはピッタリだと思うYO

413 ：Name_Not_Found：2005/09/03(土) 01:45:16 ID:???

>>409
よっぽど頻出なのか「css id class 違い」でぐぐったら該当サイトが見つかった。

414 ：Name_Not_Found：2005/09/03(土) 01:45:29 ID:???

>>410
馬鹿な俺にも解るように、>>1を読んできちんと質問してくれ。

415 ：Name_Not_Found：2005/09/03(土) 01:47:59 ID:???

>411
あなたのさっきの質問と、後方互換はどう関係してくるんですかｗｗｗｗｗｗｗ

416 ：Name_Not_Found：2005/09/03(土) 02:21:42 ID:???

>>413
俺も違いはわかるが使い分け方法は適当
一度定義すればすむやつに適応とかにしてるがあってるのか・・・

417 ：Name_Not_Found：2005/09/03(土) 02:55:40 ID:???

>>414
読みません。

418 ：Name_Not_Found：2005/09/03(土) 05:44:46 ID:???

css上手い人のHTMLソースを覗いて研究するという勉強法もあります

419 ：Name_Not_Found：2005/09/03(土) 13:38:31 ID:???

>>418
そうですか。でも読みません。

420 ：Name_Not_Found：2005/09/03(土) 15:27:57 ID:???

>>410
考えてやってもいいが、まずはお前さんのブログを晒してからだな。
どこをどうしたいのかが判らんのでは話にならんよ。

421 ：Name_Not_Found：2005/09/03(土) 16:44:38 ID:???

３カラムとか邪道だな、２カラムで十分よ

422 ：Name_Not_Found：2005/09/03(土) 19:02:36 ID:???

あるWebページの背景色が目に優しい色なのでRGB値を知りたいと思ったのですが、
外部CSSなので知る術がありません。何か方法はないでしょうか？
ちなみにこのページです。

games.flabber.nl/squares2sheep/

423 ：Name_Not_Found：2005/09/03(土) 19:09:20 ID:???

>>422
目に優しいか・・・？
個人的に黒が最強だと思うが。

ソース見るのがめんどくさいから適当だけど、
#66CCCCあたりか？
http://noz.day-break.net/webcolor/cyan.html

424 ：Name_Not_Found：2005/09/03(土) 19:16:38 ID:???

>>422
そういう時はプリントスクリーンでキャプチャして、画像編集ソフトに貼り付けて色見ればいい

そこのページの色は#99CCCC

425 ：Name_Not_Found：2005/09/03(土) 19:19:01 ID:???

>>422
つ【カラーピッカーでぐぐる】

426 ：422：2005/09/03(土) 19:26:19 ID:???

どうもです。さっそく試してみます。

427 ：Name_Not_Found：2005/09/03(土) 21:09:10 ID:???

>>422
FFを入れて、DOMインスペクタで覗く。
外部CSSを覗く、ttp://games.flabber.nl/games/style.css

428 ：Name_Not_Found：2005/09/03(土) 21:24:45 ID:???

追加指定期待

429 ：Name_Not_Found：2005/09/03(土) 21:30:14 ID:???

#99ccccです。
IEでHTMLをローカルに保存すれば勝手に外部CSSがついてきますが？

430 ：Name_Not_Found：2005/09/03(土) 21:30:57 ID:???

やってみればいいじゃん

431 ：Name_Not_Found：2005/09/03(土) 21:46:54 ID:???

しますが？　だろ

432 ：Name_Not_Found：2005/09/03(土) 21:49:20 ID:???

>>427
わざわざ手間かかる方法チョイスして伝授させるとは、ただのバカですねバカｗｗｗｗｗｗｗｗｗｗｗ

433 ：Name_Not_Found：2005/09/03(土) 21:52:27 ID:???

黙っていれば大人なのに

434 ：Name_Not_Found：2005/09/04(日) 00:39:01 ID:???

body.otona { paddin: 1px; }

435 ：Name_Not_Found：2005/09/04(日) 00:55:14 ID:???

(･∀･)ﾊﾟｯﾃﾞｨﾝ♪

436 ：Name_Not_Found：2005/09/04(日) 01:12:34 ID:???

(-∀-)ﾏｰｼﾞﾝ♪

437 ：ぼるじょあ ◆borujoa.NA ：2005/09/04(日) 01:25:22 ID:???

(*ﾟ∀ﾟ)=3ﾎﾞ～DA～♪

438 ：Name_Not_Found：2005/09/04(日) 13:32:36 ID:xX9V5R3R

>>400

>理由は margin: 1em 1px 3em 2px;とやると、どれがどれだかわからなくなるからです。

時計をイメージするとｲｲよ、上右下左。とけいまわり。

439 ：Name_Not_Found：2005/09/04(日) 13:38:35 ID:???

fontの一括指定の順序をいつも忘れる

440 ：Name_Not_Found：2005/09/04(日) 14:15:32 ID:???

漏れはバラバラに指定するかな
そもそも↓全てを指定するシチュエーションにあったためしがない

font-style、font-variant、font-weight（順不同）
font-size
line-height
font-family

441 ：Name_Not_Found：2005/09/04(日) 15:40:06 ID:???

え、一括指定で省略できるんじゃないのか？

442 ：Name_Not_Found：2005/09/04(日) 16:01:11 ID:???

font-size ,font-familyだっけ＞省略

443 ：Name_Not_Found：2005/09/04(日) 16:23:10 ID:???

ページ内で1回しか使わないものはid指定
ページ内で2回以上使う場合はclass指定
これであっていますか？

444 ： ◆z.fnC4lCx2 ：2005/09/04(日) 18:00:11 ID:???

>>443

#container #banner #nav #content #footer
いじょ。

445 ：Name_Not_Found：2005/09/04(日) 18:04:48 ID:???

>>443
現時点ではidもclassも好きなの使えばいい。
一応W3Cの定義としてはそれであってる。

>>444
あまり適当なこというなよ。

446 ：Name_Not_Found：2005/09/04(日) 18:09:09 ID:???

>>443
サラリーマンの山田太郎さんと杉本徹子さん
魚屋の松下修一さんがいたとする

<h1>同級生達</h1>
<h2 class="サラリーマン" id="山田太郎">山田太郎さん</h2>
<h2 class="サラリーマン" id="杉本徹子">杉本徹子さん</h2>
<h2 class="魚屋" id="松下修一">松下修一さん</h2>

447 ：Name_Not_Found：2005/09/04(日) 18:18:31 ID:???

↑うはわろす

448 ：Name_Not_Found：2005/09/04(日) 18:56:44 ID:???

>>446
xml使え。

449 ：Name_Not_Found：2005/09/04(日) 19:03:43 ID:???

↑
おまえ読解力が無いだとか空気読めないとか一緒に居ると疲れるとか言われるだろ

450 ：Name_Not_Found：2005/09/04(日) 19:05:53 ID:???

貴男素敵！　とも言われるが・・・

451 ：Name_Not_Found：2005/09/04(日) 19:09:25 ID:???

「やらないか」っていわれるわけだな

452 ：Name_Not_Found：2005/09/04(日) 20:05:58 ID:???

>>450
初めての時は血が出たろ？

453 ：Name_Not_Found：2005/09/04(日) 20:39:20 ID:???

癖になりそうだ

454 ：Name_Not_Found：2005/09/04(日) 20:46:23 ID:???

448人気者だな

455 ：Name_Not_Found：2005/09/04(日) 22:09:29 ID:???

idってのはさ、文書中に唯一なわけ。
つまり一つしか使えないとも言えるし、ただ一箇所だけを指し示す指標になるとも言える。

>>446を否定してしまって悪いが、例えば氏名というのは同姓同名の人がいる可能性もあるから
一つのページ内で後々かぶってしまう可能性もある。仮にその必要性が出てきたら文書全部他の基準でidを
振りなおさないといけないので、これは（メンテナンス性などの観点からは）いいidとは言えない。

逆に、classしか（使わ）なかったら特定の要素だけに何かしたいときに不便になる。
CSSでプレゼンテーションを変えたいときはclassだけでも事足りるかもしれないが、JavaScriptなどを使い出すと不便になってくる。
逆を言えば、CSSでの装飾以外にHTMLの特定の要素を指すことがない人にとってはclassだけ使うのが無難とも言える。
ただ、前述のように、後々の可能性を考慮するなら、あらかじめある程度の要素にidを振っておくのも（慣れてきたら）いいかもしれない。

まとめると
・idは唯一なので、かぶる可能性のあるようなつけ方はよくない。つまり怪しいときはclassが無難。
・idは特定の要素を明確に指し示すことができる点がclassより優れている。そういった要素を想定する場合はかぶることの無いような基準でidを振るのが便利。

持論です。
ちなみに自分はdivにsectionやsubsectionというclassを振ると同時に、それぞれのsectionにidで名前を振ってます。

456 ：Name_Not_Found：2005/09/04(日) 22:13:32 ID:???

>>455
>>446はただのイメージだろ？
実際には適当にID割り振るだろ

457 ：Name_Not_Found：2005/09/04(日) 22:21:46 ID:???

>>456
> >>446はただのイメージだろ？
わかってる。ただ俺の持論で説明するなら>>446は否定せざるを得なかった。
もちろん適当に振りたい人は振っても構わない。（>>445と同意）
ただ、idとclassをどう使い分けるかと問われれば、俺は>>455のように説明するというだけ。

458 ：Name_Not_Found：2005/09/04(日) 23:45:11 ID:jw3QpJuZ

idは要素を唯一それと特定するためのものだから、かぶってはいけないのは当然。
classは要素を分類するためのものだから、同じclassの要素が2つ以上ありえる。

>>455
> ・idは唯一なので、かぶる可能性のあるようなつけ方はよくない。

「クールなURIは変わらない」に恒久的なURIを作るには日付けをURIにすればいいって書いてあるけど、
かぶらないidを作る究極の方法ってのも、日付けを付けることなんじゃないかなと思ってみたりもした。

459 ：Name_Not_Found：2005/09/04(日) 23:47:47 ID:???

おｋ。じゃあまとめ。
>>443
でOKですね？

460 ：Name_Not_Found：2005/09/04(日) 23:47:54 ID:jw3QpJuZ

idの場合は日付けってよりも日時か。秒まで付ければさすがにかぶらないだろう。

461 ：Name_Not_Found：2005/09/04(日) 23:52:45 ID:???

>>458
単純にユニークな文字列を指定したいだけなら
時刻を埋め込むのは簡単で確実な方法だが
識別のしやすさから考えるとどうかと思う

日記やブログのような場合には
その時刻というのが意味を持っているけれど
一般のサイトにとっては
時刻はただの意味を持たない文字列にすぎないのではないかと

462 ：Name_Not_Found：2005/09/04(日) 23:56:52 ID:???

なんか異様に勉強になる流れですね

463 ：Name_Not_Found：2005/09/05(月) 00:15:45 ID:???

>>462
同感。勉強になるなぁ。

464 ：457：2005/09/05(月) 00:16:44 ID:???

>>461に同意。
一意性では優れているかもしれないけど、やっぱり自分で把握しにくいというのは不便かも。

465 ：Name_Not_Found：2005/09/05(月) 14:47:33 ID:???

IE6で、背景画像やボーダーの線が消える（欠けるって言ったほうが近いかも）ときがあるんです。
画面のスクロールで出たり消えたりもします←わかりずらい表現でスミマセン。
同じような経験がある人いませんか？？対策ってありますか？
　

466 ：Name_Not_Found：2005/09/05(月) 14:53:01 ID:???

>>465
一番上で使ってるdottedボーダーでよくなるな
IEのクソのせい、M$に文句を言うしかないかも
じゃなかったらOSと同じ、ごっついスペックのマシンにすれば、バグらないことが多くなる
と言ってる駄目なほうのマシンスペックはPen4 1.8Ghz DDRメモリ1GBなわけだが
これでも駄目かよM$・・・orz
とりあえずPen4 3.2Ghzメモリ1GBのマシンではボーダーに関してはバグ見たことないな
背景はなったことがない

467 ：Name_Not_Found：2005/09/05(月) 14:59:07 ID:???

他スレでちょっと盛り上がったんですけど…
http://pc8.2ch.net/test/read.cgi/hp/1121262770/439-
の>>439 >>442

これをスタイルシートでやることって可能なんですかね？
ちなみに俺は>>439ではありませんが、興味あってやってみたのですが出来ませんでした。
よろしくお願いします。

468 ：Name_Not_Found：2005/09/05(月) 15:06:03 ID:???

>>466
ありがとうございます！
背景はrepeat-yでしたものが一部欠けて表示されるんです。
画面スクロールさせると出たり、また消えたり。
バグとなるとしょうがないんですね。

469 ：Name_Not_Found：2005/09/05(月) 15:08:31 ID:???

CSS云々にかぎらず、上下方向の寄せは、td以外ではできないじゃなかろうかね。
現状の仕様と実装では。

470 ：469：2005/09/05(月) 15:23:38 ID:???

>>469
そうなんですかね。自分で調べた範囲でもその意見が多かったです。
できたって人が居たもんで、それを信じて色々やってみたんですが…
なんか嘘だったみたいだし…矢張り無理なんですかね

471 ：Name_Not_Found：2005/09/05(月) 15:29:57 ID:???

div#右ボックス {background:url(….gif) right center }
画像だったらコレでいけないですか？

472 ：Name_Not_Found：2005/09/05(月) 15:36:01 ID:???

いけたとしてもそれじゃ本質的なテクニックの解決にはならないだろ。
CSSでの縦センタリングは無理なんじゃなかったけ？
高さを固定すれば近似的に誤魔化せるけど

473 ：Name_Not_Found：2005/09/05(月) 15:36:43 ID:???

上下中央もheight固定だったら簡単なんだけどな

474 ：Name_Not_Found：2005/09/05(月) 15:37:32 ID:???

被っちまったorz

やるとしたらJSで高さ算出して、とか面倒なことやればだきるだろうがなあ

475 ：Name_Not_Found：2005/09/05(月) 15:39:38 ID:???

>>468
Firefox/Operaなどの別のUAを使うってのが一番早い解決策だとオモ
IEの描画は、どうもモタついておかしくなることが多い

476 ：469：2005/09/05(月) 15:44:32 ID:???

うーむどうもそんな感じのようですよね。
無理なら無理で興味的には解決です。どうもありがとうございました。
需要ありそうな感じですが、CSSで出来ないのが意外でした。

>>471
それはある意味盲点でしたｗ

477 ：467=470=476：2005/09/05(月) 15:45:22 ID:???

ごめんなさい。HN間違えてました

478 ：Name_Not_Found：2005/09/05(月) 15:48:57 ID:???

>>476
厳密に言うと「tableでもできない」が正解
heightってのは物凄く扱いの難しいものなんだ

479 ：143：2005/09/05(月) 17:38:23 ID:V5F9GPaY

>>465
おまえもかｗ

いまだに解決しねぇorz

480 ：Name_Not_Found：2005/09/05(月) 17:42:57 ID:???

>>479
つ再描画

481 ：Name_Not_Found：2005/09/05(月) 20:23:35 ID:???

>>466
スペックはあんま関係なくね？
グラフィックのチップとドライバくらいじゃね？

482 ：Name_Not_Found：2005/09/05(月) 21:01:04 ID:rKHBqeDe

>>143=479さん
>>465です。
背景画像の上にのってる<hr>タグを消したら
普通に画像が表示されるようになりました。
謎ですね。

483 ：Name_Not_Found：2005/09/05(月) 21:15:48 ID:???

ドット線が消えるという方は
背景画像を固定してみてどうなるか試してみて

484 ：Name_Not_Found：2005/09/05(月) 21:17:26 ID:???

>>481
それもスペックの一部だろう

>>482
ちょｗｗｗナニソレｗｗｗｗｗ

485 ：Name_Not_Found：2005/09/05(月) 21:18:20 ID:???

>>483
背景画像なしだよーん
当てて固定したけど変わらなかったな

486 ：Name_Not_Found：2005/09/05(月) 22:50:53 ID:???

背景画像やボーダーもだけど、テキストも消えることあるね。
多分、floatが関係してるんだと思う。

487 ：Name_Not_Found：2005/09/05(月) 23:00:14 ID:???

floatコメントアウトしてみたが、やっぱり出るな

488 ：Name_Not_Found：2005/09/05(月) 23:14:58 ID:???

WinIE特有のバグ。終了。

489 ：Name_Not_Found：2005/09/05(月) 23:19:54 ID:???

ちょっと質問良いですか？
自分もサイトに結構スタイルシート使ってますけど、
そもそもスタイルシートってのはどうようメリットがあるんでしょう？

490 ：Name_Not_Found：2005/09/05(月) 23:22:56 ID:???

>>489
何言ってる不明。

491 ：Name_Not_Found：2005/09/05(月) 23:27:18 ID:???

なんというか自分は、
使うことでより深みのあるデザインにできる程度にしか考えてないんですが、
たとえば容量削減になるとか、そういうメリットはあるのかなとふと疑問に思ったところなんです

492 ：Name_Not_Found：2005/09/05(月) 23:28:50 ID:???

>>489
文書構造と装飾の分離。
これがきっちりしてあるところだと、
管理人の場合：統一性の取れたページが作りやすい。
　　　　　　　　　一つの装飾指定だけで同要素にいくつも指定しなくて済む。
　　　　　　　　　改装が非常に楽。
　　　　　　　　　全体のファイルサイズが小さくなる。
閲覧者の場合：管理人のセンスと合わなかった場合、ユーザCSSを当てやすい。
　　　　　　　　　ユーザCSSは自分の好きに作れる、つまり自分の見やすい配色や大きさで閲覧できる。
機械の場合：文書構造がしっかり書かれてないと、どれが見出しだか重要度が高い文書だか
　　　　　　　　どういうファイルの繋がりをもってるんだか全然わからねえぞゴルァとなる。
アクセシビリティの場合：音声ブラウザや携帯でも見られる可能性が高くなる、
　　　　　　　　　　　　　つまり色んな人に見てもらえる可能性が広がる。
こんなところかな。

493 ：Name_Not_Found：2005/09/05(月) 23:29:42 ID:???

>>492乙。

494 ：Name_Not_Found：2005/09/05(月) 23:31:45 ID:???

>>492
どうもありがとうございます。
なるほど何かとメリットの多いもののようですね。
現在、より上手に活用するために猛勉強中なので、参考にしたいと思います。

495 ：Name_Not_Found：2005/09/06(火) 01:31:35 ID:???

>>492
乙
おまい優しいな
おれなら「テンプレ読めボケ」で終わらせるがw

496 ：Name_Not_Found：2005/09/06(火) 02:44:58 ID:???

>>465
今さらアレだが、もしかして結構有名なバグのことぢゃ？
peekaboo バグ　でググって味噌。

497 ：Name_Not_Found：2005/09/06(火) 02:49:31 ID:???

>>496
自分のところの現象はそれじゃないなあ
floatとは無関係だし、見えなくなるというよりはモノクロモザイクバーになる感じだし

498 ：Name_Not_Found：2005/09/06(火) 02:53:26 ID:???

ボーダー（破線、点線）の描写がおかしかったり、更新するごとに微妙に表示結果に差異がでるのは大丈夫だろうか。

499 ：Name_Not_Found：2005/09/06(火) 03:27:24 ID:???

FirefoxとOpera使ってみて思ったよ。
IEってCSSに関して糞だね。
といっても90％以上訪問者IEだからな・・・
早くIE7リリースして普及してもらいたい。

500 ：Name_Not_Found：2005/09/06(火) 09:00:39 ID:???

IE7 beta 1 はインストールできないのですか？

501 ：Name_Not_Found：2005/09/06(火) 09:44:21 ID:???

>>500
おまい読解力無いってよく言われるだろ

502 ：Name_Not_Found：2005/09/06(火) 10:45:36 ID:???

>>496
まさにpeekabooバグだと思います！
ですが、対処法にある、
１）floatに関わる要素に「position:relative;」
２）floatを囲う親要素に「line-height」指定
でもうまくいきませんでした…。もうお手上げだー。
　

503 ：Name_Not_Found：2005/09/06(火) 18:15:35 ID:???

.a {height: 500px; width: 500px; border-color: red;}
.b {height: 500px; width: 500px; border-color: blue;}
.c {height: 500px; width: 500px; border-color: green;}
.d {height: 500px; width: 500px; border-color: yellow;}

例えば上記のようなパターンの場合

.a, .b, .c, .d {height: 500px; width: 500px;}
.a {border-color: red;}
.b {border-color: blue;}
.c {border-color: green;}
.d {border-color: yellow;}

上の例えだと2個ですが、5個6個と
クラスの呼び出し先を複数に分けて書いても記述的にはOKなのでしょうか？
実際には機能してるようなんですが。

504 ：Name_Not_Found：2005/09/06(火) 18:21:32 ID:???

何ら問題ありません。

505 ：503：2005/09/06(火) 18:22:34 ID:???

さようですか。どうもありがとうございました。

506 ：Name_Not_Found：2005/09/06(火) 19:32:08 ID:???

>>503
むしろそうまとめた方が見やすい場合はそのようにすべきだと思われ

507 ：Name_Not_Found：2005/09/06(火) 22:55:45 ID:???

>>503
.e {height: 500px; width: 500px;}
として、
<p class="a e">あいうえお</p>
でもaとeが適用されるよね？これも問題ナシ？

508 ：Name_Not_Found：2005/09/06(火) 22:59:30 ID:???

>>507
うん。
うまく使い分けれ。

509 ：Name_Not_Found：2005/09/06(火) 23:04:14 ID:???

>>507
その書き方だと後々混乱しそうだから、よく注意しながら使ってね

510 ：Name_Not_Found：2005/09/06(火) 23:17:02 ID:???

CSSとJava script　どっちが覚えるの簡単？

511 ：Name_Not_Found：2005/09/06(火) 23:27:30 ID:???

>>510
人による
マークアップを理解してる香具師は前者
プログラミングに慣れた香具師は後者

512 ：Name_Not_Found：2005/09/06(火) 23:28:38 ID:???

>>510
変な質問するね。
CSSはHTMLやる上じゃ必須事項みたいなもんだよ。

513 ：Name_Not_Found：2005/09/06(火) 23:34:30 ID:???

>>511
昔(４，５年前）VBをちょこっとかじった程度だけど、java script は簡単かい？

>>512
ｺﾞﾒ
比較するのがおかしかったね

514 ：Name_Not_Found：2005/09/06(火) 23:35:02 ID:???

VBとJSはそっくりだから簡単だお

515 ：Name_Not_Found：2005/09/06(火) 23:36:38 ID:???

>>514
ありがと＾＾
時間作れたらがんばってみるよ

516 ：Name_Not_Found：2005/09/06(火) 23:36:45 ID:???

>>513
むしろ最新のVBに慣れてるよりもいいかも。
JSは何が最悪かって、デバッグ環境だから。
ただJSだけでなくDHTMLまで手を出す気なら、CSSも覚えないと話にならない。

517 ：Name_Not_Found：2005/09/06(火) 23:37:50 ID:???

>>514
ちょｗｗｗｗ待ｗｗｗｗｗｗｗｗｗｗおまｗｗｗｗｗｗｗｗｗ

518 ：Name_Not_Found：2005/09/06(火) 23:41:10 ID:???

VBScriptなんてのもあったっけか
VB触ったことあるならCやればCGIｳﾏｰ

519 ：Name_Not_Found：2005/09/06(火) 23:46:17 ID:???

VBつーても.NETはだいぶCに近づいてるからなー
しかしCのCGIは少なくないか？

520 ：Name_Not_Found：2005/09/06(火) 23:53:05 ID:???

そんな僕はVB6ちゃん
みなさんどうも親切にありがとう、いろいろ勉強になりました
スレ汚してごめんちん、じゃおやすみﾉｼ

521 ：Name_Not_Found：2005/09/07(水) 00:06:06 ID:???

>>510
何故その2つを比較する

522 ：Name_Not_Found：2005/09/07(水) 00:13:30 ID:???

>>521
510じゃないか、その気持ちはわかる。
HTML3.2、NN4使いのときに、よく使えんCSSとJSと
どっち覚えたほうがWebラーとして良いじゃろと考えて、JS選んだことがある。
どっちも「HTMLを覚えた次のステップ」に見えるんだ。

523 ：Name_Not_Found：2005/09/07(水) 06:29:01 ID:???

2枚の背景画像を設定する方法を質問させてください。
Aの画像を反転したBの画像を作ったんですが、
Aの画像をページ左隅、Bの画像をページ右隅といった具合に
背景に指定して配置しようと思うのですが、
適切な記述方法を教えていただけませんでしょうか？
とりあえずbodyでAとBの画像を別々に指定してみたところ、
後から記述したBの画像しか表示されませんでした。
このようなことは不可能なのでしょうか？

524 ：Name_Not_Found：2005/09/07(水) 08:21:09 ID:???

CSSでテーブルのように段落をつくりました。
テーブルでは字が多すぎると、自動で改行(？)されてましたが、
CSSではとなりの段落にまで進入してしまいます。
これを防ぐ方法はありますか？
それとも適切なとこで<br>などを入れないといけないのでしょうか？

525 ：Name_Not_Found：2005/09/07(水) 08:31:42 ID:???

>>523
１つの要素には無理なので、二つの要素に配置する
そのさい必ず背景色を透過させるのを忘れないように

526 ：Name_Not_Found：2005/09/07(水) 08:32:15 ID:???

>>524
HTMLとCSSをさらしてみ

527 ：Name_Not_Found：2005/09/07(水) 11:17:11 ID:BQVKy2DA

safariだけをハックス方法ってないのでしょうか？
ググっても出てこないorz

528 ：Name_Not_Found：2005/09/07(水) 12:56:50 ID:???

ハックス方法？？

529 ：Name_Not_Found：2005/09/07(水) 13:02:37 ID:???

セックス方法？

530 ：Name_Not_Found：2005/09/07(水) 13:55:45 ID:???

>>527
http://www.dithered.com/css_filters/
自分で調べれ

531 ：Name_Not_Found：2005/09/07(水) 14:18:42 ID:???

*ってどういう意味なんですか？
bodyに指定するのと何が違うのでしょうか？

532 ：Name_Not_Found：2005/09/07(水) 15:09:49 ID:???

flotを使ってリストを横に並べた場合に
一部のブラウザで文字が重なってしまうのを改善するには
どうすれば良いでしょうか？

533 ：Name_Not_Found：2005/09/07(水) 15:20:21 ID:???

>>531
cssの問題ではなく、*はワイルドカードを表す

>>532
floatの間違いだよな？
flotで重なってるとか言ってるわけじゃないよな？

534 ：Name_Not_Found：2005/09/07(水) 15:20:28 ID:???

>>531
全称セレクタ

535 ：Name_Not_Found：2005/09/07(水) 15:30:07 ID:???

>>533
すみませんfloatの間違いでした

536 ：Name_Not_Found：2005/09/07(水) 15:52:11 ID:???

やりたいこと↓

サイドA　　本文　サイドD
サイドB　　　　　　サイドE
サイドC　　　　　　サイドF

左右にジグザグで3カラムにする場合はfloat:left/rightをしてclearすると
大丈夫なのですが、上記のようにA～Cは左、D～Fは右
のようにしたい場合、下記のようになります。

サイドA　　本文　
サイドB　　　　　　
サイドC
　　　　　　　　　　サイドD
　　　　　　　　　　サイドE
　　　　　　　　　　サイドF

IE6ならサイドDがAの反対側に来るのですが、Firefoxだとこのような表示になります。
こういうやり方は現時点で無理なのでしょうか？

537 ：Name_Not_Found：2005/09/07(水) 16:09:34 ID:???

>>535
状況がよくわからない、width以上に文字がはみ出るのか？

>>536
左右のじくざくの意味がわからんが、
<div>ABC</div><div>本文</div><div>CDE</div>
div{float:left;}またはdiv本文,divCDE{position:absolute;}でうまくいかないのか？
テンプレに3カラムの方法もいろいろ載ってるが、見た？

538 ：532：2005/09/07(水) 16:18:24 ID:???

>>537
すみません、左揃えしたみたいに完全に重なっています

539 ：Name_Not_Found：2005/09/07(水) 16:25:28 ID:???

>>537
テンプレは何回も見ました。その書き方・説明の仕方がよく分からないのですが

<div =id"a">サイドA</div>
<div =id"b">サイドB</div>
<div =id"c">サイドC</div>
<div =id"d">サイドD</div>
<div =id"e">サイドE</div>
<div =id"f">サイドF</div>
<div =id"main">本文</div>

というHTMLになるので、すみませんが、そのやり方は出来ないと思います。
それぞれにfloatでleft/rightどちらか指定して左右に振り分けるわけです。
真ん中はかならずmainがくるように。
しかし、536の下に書いたようにclearをするとその後の段落からはじまるので
どうしても余白が空いてしまい、左右対称に並ばないのです。

540 ：Name_Not_Found：2005/09/07(水) 16:26:02 ID:???

>>532
display:inline;でやればいいよ

541 ：Name_Not_Found：2005/09/07(水) 16:29:54 ID:???

>>539
テンプレさえ理解できないのにいきなり難しいことをやろうとする神経がわからない
まずはテンプレをそのまま書いて、どうなるか確かめてみろ

542 ：Name_Not_Found：2005/09/07(水) 16:31:49 ID:???

>>541
テンプレをそのまま書いたら出来ました。
「書き方・説明の仕方がわからない」というのは537さんの
書き方が分からないという意味です。

543 ：Name_Not_Found：2005/09/07(水) 16:33:23 ID:???

>>538
width指定忘れてないか？
普通に行くぞ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<ol>
<li>１</li>
<li>２</li>
<li>３</li>
</ol>
</body>
</html>

544 ：Name_Not_Found：2005/09/07(水) 16:35:26 ID:???

>>542
テンプレでできたんなら、その中におまいのHTMLを逆に流し込めばいいじゃん。

545 ：Name_Not_Found：2005/09/07(水) 16:37:50 ID:???

>>544
自分でやりたい「難しいレベルの３カラム」がテンプレにはありません。

546 ：Name_Not_Found：2005/09/07(水) 16:40:05 ID:???

>>539
少なくともそのHTMLを使ってる限り一生できない。
<div id="a">

547 ：Name_Not_Found：2005/09/07(水) 16:42:37 ID:???

>>546
ですので、やり方を教えて欲しいのですが・・・・。

548 ：Name_Not_Found：2005/09/07(水) 16:44:02 ID:???

>>547
時代がお前に追いつくのを待つんだ

=id"a"

549 ：Name_Not_Found：2005/09/07(水) 16:44:07 ID:???

>>547
546を100回見直せ。話はそれからだ。

550 ：Name_Not_Found：2005/09/07(水) 16:44:58 ID:???

>>548
そんな追いつき方イヤだｗｗｗｗｗ

551 ：Name_Not_Found：2005/09/07(水) 16:49:30 ID:???

>>547
おまえはすでに教えられている

552 ：Name_Not_Found：2005/09/07(水) 17:05:00 ID:???

そんな揚げ足取らないでも・・・OTL

553 ：Name_Not_Found：2005/09/07(水) 17:14:58 ID:???

なんだ、間違えてたわけじゃないのか
それもこっちにはわからないんだぞ

554 ：Name_Not_Found：2005/09/07(水) 17:17:10 ID:???

>>552
どうしてもfloatがいいの？

555 ：536：2005/09/07(水) 17:21:56 ID:aiwl8e60

皆さん、ややこしいことを書いてしまい、申し訳ありません。
自分の説明不足でした。自分でやっていたソースをさらします。
（簡略化して記載しています。）

<style type="text/css">
div#a,div#c,div#d,div#e{
float:left;
clear:left;
width:50px;
}
div#b,div#f,div#g{
float:right;
clear:both;
width:50px;
}
</style>

<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
<div id="e">e</div>
<div id="f">f</div>
<div id="g">g</div>
<div id="main">main</div>

これをIE6.0で見たときのようにFirefoxの表示をしたいのです。floatじゃなくても結構です。

556 ：Name_Not_Found：2005/09/07(水) 17:23:59 ID:???

自分の理解力を疑わない漢らしさに惚れた

557 ：Name_Not_Found：2005/09/07(水) 17:25:25 ID:???

だから3カラムは邪道だと言ってるだろうに。2カラムでじゅうぶんだと言ってるだろうに。

558 ：536：2005/09/07(水) 17:26:07 ID:???

>>557
それだとブログのカスタマイズができません・・。

559 ：Name_Not_Found：2005/09/07(水) 17:29:03 ID:???

根本を否定すんなよ無能

560 ：Name_Not_Found：2005/09/07(水) 17:29:44 ID:???

>>555
何も考えずに一番簡単なの。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<div class="left">
<div id="a">サイドA</div><div id="b">サイドB</div><div id="c">サイドC</div>
</div>
<div class="right">
<div id="d">サイドD</div><div id="e">サイドE</div><div id="f">サイドF</div>
</div>
<div id="main">本文</div>
</body>
</html>

561 ：Name_Not_Found：2005/09/07(水) 17:33:38 ID:???

どうせホリエモンブログでしょ
既存のデザイン使ってろYO

562 ：Name_Not_Found：2005/09/07(水) 17:38:40 ID:???

あ、560はちゃんとwidth指定は自分でヨロ

563 ：Name_Not_Found：2005/09/07(水) 17:40:29 ID:???

質問者はID表示してくれんと　答えにくす

564 ：536：2005/09/07(水) 17:46:03 ID:???

>>560
いや、そうじゃないのですが・・。これだとleftとrightの中身は
常に同じものが表示されますよね？サイドDを左にしたい場合は
いちいちHTMLを修正しなければいけなくなります。

とりあえず、諦めます。色々とありあｇとうございました。

565 ：Name_Not_Found：2005/09/07(水) 17:51:31 ID:???

>>564
おまえ、どうして情報をそうやって後出しに…。

566 ：Name_Not_Found：2005/09/07(水) 17:54:17 ID:???

>>564
とりあえず俺はお前という人間に諦めた

567 ：Name_Not_Found：2005/09/07(水) 17:55:23 ID:???

568 ：Name_Not_Found：2005/09/07(水) 18:04:49 ID:???

cssやらhtmlやらetc...
これらに当てはまる総称はなんですか

569 ：Name_Not_Found：2005/09/07(水) 18:08:34 ID:???

ｱﾙﾌｧﾍﾞｯﾄ　かな？

570 ：Name_Not_Found：2005/09/07(水) 18:09:55 ID:???

webテクニック、とか

571 ：Name_Not_Found：2005/09/07(水) 18:10:02 ID:???

地球文字

572 ：Name_Not_Found：2005/09/07(水) 18:33:48 ID:???

領域をはみだした文字をcssを使って改行する手段はありませんか？
overflow:hiddenではみ出した部分は消えるのですが、
はみ出した部分が表示されないと意味がないので・・・
scrollでスクロールバーを出すと、全部読めるんですが、
デザインが崩れてしまいます。
とほほに書いてるビジュアルのcssを一通り試しましたが、
どれも思ったとおりにはいきませんでした。
何かよい方法ありませんか？

573 ：Name_Not_Found：2005/09/07(水) 18:40:03 ID:???

>>572
block要素にwidth指定してりゃ、普通にそれ以上になったら改行されるんだが

574 ：Name_Not_Found：2005/09/07(水) 18:40:46 ID:???

領域をはみだした文字　　を見せてごらん

575 ：Name_Not_Found：2005/09/07(水) 18:50:15 ID:???

>>573
一応ブロック要素につけているつもりなのですが、間違っているのでしょうか？

#a {width:200px; margin:5px; float:left;}
#b {width:198px; border:1px solid gray;}
#b dt {text-align:center; }
#b li {margin-left:5px;}

<div id="a">
<div id="b">
<dl>
<dt>リンク</dt>
<dd>
<ul>
<li>ながったらしい名前のホームページ</li>
</ul>
</dd>
</dl>
</div>
</div>

liの部分がはみだす可能性がある部分なのですが、
liにwidthをつけないといけないのでしょうか？

576 ：Name_Not_Found：2005/09/07(水) 19:00:26 ID:???

いけてんじゃね？
mozillaとieは普通に表示されたよん

577 ：Name_Not_Found：2005/09/07(水) 19:01:22 ID:???

ついでに、operaははみ出したよん

578 ：Name_Not_Found：2005/09/07(水) 19:03:36 ID:???

>>576
やりかたは合ってる。
ただ「長ったらしい名前のホームページ」が
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
みたいに区切れのないアルファベットだとはみ出る、これは仕方ない。

579 ：Name_Not_Found：2005/09/07(水) 19:04:37 ID:???

>>576
どうもありがとうございます。
やっぱ問題はないですか。

>>578
すみません・・・
実はテスト用に、aaaaaaaaaaaaaaaaaaaaaaaaaaでやってましたorz
それが原因でしたか。

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

580 ：Name_Not_Found：2005/09/07(水) 19:06:04 ID:???

>>577
Operaも7/8共にはみ出なかったぞ？

581 ：Name_Not_Found：2005/09/07(水) 19:14:58 ID:???

ちょっと質問です。
<li>をつかい、横並びのメニューをつくるには
floatをつかうとおもうのですが
自分は中の<a>をblockし<li>のほうをinlineにし
<a>をfloatしてつくるのですが、メニューとメニューの間をmragin-left: 2px;
づつあける指定をすると、ＩＥのバグで一番左のmargin-leftのpxが2倍になってしまいます

<a>をblockしてるのは、widthで指定したいためです。

どのように対処しますすればいいですかね・・

582 ：Name_Not_Found：2005/09/07(水) 19:16:33 ID:???

どのように対処すればいいですかね↑

583 ：Name_Not_Found：2005/09/07(水) 19:25:12 ID:???

何が肢体の皮からないけれど、おれはtable→tdの中に<li>使うけれどね。
<li>って縦並びこその<li>じゃない？

584 ：Name_Not_Found：2005/09/07(水) 19:27:59 ID:???

>>583
おまえこそ何が死体のかわからない…

585 ：Name_Not_Found：2005/09/07(水) 19:28:58 ID:???

>>583
リストは順不同リストであって、それ以上でもそれ以下でもない。以上。

586 ：Name_Not_Found：2005/09/07(水) 19:30:15 ID:???

>>581
aをブロックってどういう意味だ
ソース晒せ

587 ：Name_Not_Found：2005/09/07(水) 19:30:52 ID:???

<ul>
<li><a href="#">work</a></li>
<li><a href="#">work</a></li>
<li><a href="#">work</a></li>
</ul>
という感じの場合です。
テーブルデザインは勘弁です・・

588 ：Name_Not_Found：2005/09/07(水) 19:31:30 ID:???

<a> はインライン要素だけど、ブロック化しないと、widthで指定できないので
そうしてあります。

589 ：Name_Not_Found：2005/09/07(水) 19:32:15 ID:???

>>581
IEだけ振り分けるといいよ
詳しくはテンプレを

590 ：Name_Not_Found：2005/09/07(水) 19:43:30 ID:???

float使った3段カラムなんだけど、中カラムにclearを使うと(例えば、画像にfloat使
ったりして)
左右の分だけ余白が出来ちゃうんだよね。
っつか、説明下手でスマン。

ttp://o-ume8.com/junsdiary/C2058415919/E42125766/
このサイトが詳しく書いてあるんだけど、コレ
固定幅での解決方法で、可変だと上手くいかないんだよね。
min-width・max-width使ってるので、absolute使った可変カラムは出来ないし
どうしたら良いものか。

しかし、説明が下手すぎるぜ俺

591 ：Name_Not_Found：2005/09/07(水) 19:49:35 ID:???

3段カラムって初心者には魅力的なのかな

592 ：Name_Not_Found：2005/09/07(水) 20:08:12 ID:???

大手のサイトだと結構使ってるからじゃね？

593 ：Name_Not_Found：2005/09/07(水) 20:09:07 ID:???

でも3段カラムをCSSで組むのは初心者には鬼門だよな。
テーブルでやるのが吉。

594 ：583：2005/09/07(水) 20:12:45 ID:???

3段カラムはソースが膨大。初めからやりたくないです。

595 ：Name_Not_Found：2005/09/07(水) 20:20:53 ID:???

回答してる奴より、質問者のレベルのほうが高いように見えるのは俺だけか？

596 ：Name_Not_Found：2005/09/07(水) 20:21:23 ID:BQVKy2DA

＞530
レベルの低いカスだな～
リンク貼るだけなら猿でもできるぞ！ボケェ！
そのページに書いてあるのか！？書いてあるのかよ！？
そんなページはとうの昔に確認済みなんだよ！

下らんレスしかできねぇ～なら今すぐ首吊って市ね。市ね市ね

市んだか！？

ホラ死ねよ。カス。低脳。無能。三流。

597 ：Name_Not_Found：2005/09/07(水) 20:23:30 ID:???

>>596
質問者のレベルのほうが高いから。がまんしれ

598 ：583：2005/09/07(水) 20:25:03 ID:???

まぁそうカラムなよ。

599 ：Name_Not_Found：2005/09/07(水) 20:27:07 ID:???

3カラムってアフィリエイトたくさん載せたいからするんだろ？
2カラムできちんとした内容の方がどれだけ良い事か

600 ：Name_Not_Found：2005/09/07(水) 20:31:42 ID:???

>598
お後がよろしいようで　　ﾃｹﾃﾝﾃﾝ

601 ：Name_Not_Found：2005/09/07(水) 20:39:55 ID:???

↓オチが付いたところで次の方ﾄﾞｿﾞｰ

602 ：Name_Not_Found：2005/09/07(水) 20:43:42 ID:???

　ふんにやか　ふんにゃか

603 ：Name_Not_Found：2005/09/07(水) 20:54:54 ID:???

メロッサメロッサ

604 ：Name_Not_Found：2005/09/07(水) 21:20:23 ID:???

パプアくんだっけ？パプワくんだっけ？

605 ：Name_Not_Found：2005/09/07(水) 21:22:06 ID:???

なんだかんだ言って、３カラムが大流行するんだろうな、きっと

606 ：Name_Not_Found：2005/09/07(水) 21:26:57 ID:???

2カラムがシンプルで好き。
メニューと本文の構成。
3カラムにしても、何入れるか困るな・・・

607 ：Name_Not_Found：2005/09/07(水) 21:28:18 ID:???

10カラムって可能ですか??

608 ：Name_Not_Found：2005/09/07(水) 21:30:30 ID:???

>>607
理論的には何カラムでも可能。
問題なのは解像度が低いほど読みづらい。
そんな10カラムもわけられてたら
俺ならスタイルシートきって読むな。

多くても4カラムぐらいじゃないかね。

609 ：Name_Not_Found：2005/09/07(水) 22:11:32 ID:???

左右をそろえるのはtext-alignでできたのですが下揃えにする
方法はないのでしょうか？お願いします。

610 ：Name_Not_Found：2005/09/07(水) 22:13:57 ID:???

>>610
インラインだったらvertical-align

611 ：Name_Not_Found：2005/09/07(水) 22:14:55 ID:???

自己レスしちまったorz
609宛

612 ：Name_Not_Found：2005/09/07(水) 22:19:28 ID:???

>>610
heigthを指定した<h2>の文字を下揃えにしたかったのですが無理でした・・・
回答有難うございました。

613 ：Name_Not_Found：2005/09/07(水) 22:22:56 ID:???

>>612
そういうのだったら、line-heightで調節

614 ：Name_Not_Found：2005/09/07(水) 22:36:50 ID:???

先頭一文字を違う色や大きさにしてるのを見た事があるんですけど
どうしているんですか？spanは使われてませんでした。

615 ：Name_Not_Found：2005/09/07(水) 22:45:35 ID:???

>>614
疑似セレクタ

616 ：Name_Not_Found：2005/09/07(水) 22:46:38 ID:???

>>614
疑似要素ね。

p:first-letter{
font-size:2em;
}

とかやればOK。

617 ： ◆z.fnC4lCx2 ：2005/09/07(水) 22:48:10 ID:???

>>614
:first-letter

618 ： ◆z.fnC4lCx2 ：2005/09/07(水) 22:48:46 ID:???

>>616と、かぶりましたorz

619 ：Name_Not_Found：2005/09/07(水) 22:49:12 ID:???

あれほどリロードしろと・・・・

620 ：614：2005/09/07(水) 22:49:40 ID:???

>>615
見つかりました
ありがとうございます

621 ：614：2005/09/07(水) 22:51:14 ID:???

すみません>>615さんのをヒントを探してるうちに他の方も、
返答下さった方有難うございました。

622 ：Name_Not_Found：2005/09/07(水) 23:43:38 ID:???

だから質問者はID表示しろつってんだろ

623 ：Name_Not_Found：2005/09/08(木) 00:26:41 ID:???

ｃｓｓの質問とは少し違うかもしれませんが

マックのブラウザの表示、をウィンドウズで確認することは可能でしょうか？

マックのＩＥで見たらすこしづれたりしてたもので

624 ：Name_Not_Found：2005/09/08(木) 00:38:20 ID:???

>>623
ttp://www.danvine.com/icapture/

625 ：Name_Not_Found：2005/09/08(木) 00:39:34 ID:???

>>623
ものすごくどうでもいいが「ずれる」だ

626 ：Name_Not_Found：2005/09/08(木) 00:52:15 ID:???

>>624 のはサファリのを確認というやつですか？

627 ：Name_Not_Found：2005/09/08(木) 05:00:30 ID:???

#a(id)は、ページ内で1度しか使えないらしいですが、
#a p.a(一応class？)っていうのは、2回以上使えるのでしょうか？

628 ：Name_Not_Found：2005/09/08(木) 05:09:23 ID:???

ハゲしく外出！！

629 ：Name_Not_Found：2005/09/08(木) 05:18:51 ID:???

>>627
とりあえずクラスとIDに同じ名前を付けるのはどうかと思うよ。

630 ：Name_Not_Found：2005/09/08(木) 07:36:58 ID:???

>>624
どうやって使うんですか？
URL入力してもThe queue is fullと表示されるんですけど

631 ：Name_Not_Found：2005/09/08(木) 07:40:01 ID:???

>>630
お前は英語が理解できたら、それを翻訳しようとか思わないのかね・・・
今人いっぱいだからあとでやってくださいってことだろ。

632 ：Name_Not_Found：2005/09/08(木) 07:41:05 ID:???

×理解できたら
○理解できなかったら

633 ： ◆z.fnC4lCx2 ：2005/09/08(木) 08:01:28 ID:???

>>631
英語が駄目なら、ほれ｡｡｡
つﾐ
http://webscan.jp/

634 ：Name_Not_Found：2005/09/08(木) 08:07:15 ID:???

質問です

見当違いなことを質問していたら申し訳ないですが、内部CSSで構成する場合、複数のDOCTYPEを宣言することはできるのでしょうか？
またできるとするならば、複数のDOCTYPEの使い分けはどのようにすれば良いのでしょうか？

635 ：Name_Not_Found：2005/09/08(木) 08:16:29 ID:???

>>633
それはまた別もんだろ

636 ：Name_Not_Found：2005/09/08(木) 09:26:53 ID:???

>>634
いや、そもそもCSSに対してDOCTYPE宣言ってなにさ？
HTML文章にたいしてなら無理

637 ：Name_Not_Found：2005/09/08(木) 14:59:14 ID:???

ulリストの・を消すことってできるんでしょうか？

638 ：Name_Not_Found：2005/09/08(木) 15:02:43 ID:???

>>637 none
できるよ

639 ：Name_Not_Found：2005/09/08(木) 15:04:24 ID:???

list-style-type:none;

640 ：Name_Not_Found：2005/09/08(木) 15:04:29 ID:???

>>638
どっちですか

641 ：Name_Not_Found：2005/09/08(木) 15:06:04 ID:???

>>639
できました、ありがとう！

642 ：ｶｽ ◆z.fnC4lCx2 ：2005/09/08(木) 17:29:33 ID:???

>>635
レスアンカー間違えた。

643 ：Name_Not_Found：2005/09/08(木) 17:59:14 ID:LvoT+10f

<SUP>, <SUB> に相当するスタイルシートの設定ってあるの？

644 ：Name_Not_Found：2005/09/08(木) 18:06:33 ID:ymB4SVr6

http://www38.tok2.com/home/omega/

645 ：Name_Not_Found：2005/09/08(木) 18:19:18 ID:???

>>643
意味が分からん
sup/subの意味を持つものなら、それを使えばいいだけ
スタイルシートは意味を規定するものじゃないぞ？

646 ：Name_Not_Found：2005/09/08(木) 18:44:45 ID:???

#a{ background: #999999;
padding: 210px 30px 0 0;
margin: 0px; }
#b{ background:#cccccc;
padding: 5px 5px 5px 15em; }
#c{ background:#ff0000;
width: 14em;
position: absolute;
padding: 0;
margin: 0;
top: 210px; }
#d{ background: #0000ff;
margin: 0;
padding: 0; }

<div id="a">
へっだー
<div id="b">めいん</div>
<div id="c">めにゅー<br><br><br><br><br><br><br></div>
<div id="d">ふったー</div>
</div>

こうした時に、メニューの高さがメイン＋フッターをオーバーすると、
メニューがメインやフッターからはみ出してしまうんですが、
メニューの高さがどうなってもヘッダー（あるいはメイン、フッター）
の背景色がはみ出している部分の後ろに来るようにするには
どうすればいいでしょうか。

647 ：Name_Not_Found：2005/09/08(木) 18:52:19 ID:???

http://pc8.2ch.net/test/read.cgi/hp/1093950965/ から誘導されて参りました。

xhtml1.0strict(xml宣言なし)についてIE6とFireFoxで<hn>のパディング表示の違いで困っています。

#hoge{
　padding:0;
}

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

IE6では、padding:0;の有無に関わらず常に上下左のパディングが0
FireFoxでは、padding:0;の有無に関わらず常に左のパディングが0、上下はデフォルトの間隔

ちなみにxhtml1.0-Transitionalでは期待したとおり、両ブラウザ共にpaddingの指定に従います
なにかよい解決方法はありませんでしょうか？

648 ：Name_Not_Found：2005/09/08(木) 18:53:31 ID:zUEge5gR

>>643
>>11にある http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html 見れ、と言おうとしたけど
不十分な上に間違ってるね。

> HTMLでの指定
> 　sup, sub
> CSSで置き換える場合
> 　vertical-align: sup/sub
> 指定例
> 　span.Number { vertical-align: sup; }

vertical-alignを指定しただけでは文字の大きさは変わらない。
一般的な視覚系ブラウザはsup、sub要素を「小さくして」上または下に付けるのでこれだけでは不十分。
しかも、supという値は不正だ。正しくはsuper。subはsubで合ってるけどね。

よって正しくは次のとおり。font-sizeは絶対0.75emというわけではないが、これくらいがちょうどいいと思われる。

<style>
span.sup {font-size: 0.75em; vertical-align: super;}
span.sub {font-size: 0.75em; vertical-align: sub;}
</style>

<ul>
<li>TEST<sup>sup</sup> (sup要素)</li>
<li>TEST<span class="sup">sup</span> (CSS)</li>
<li>TEST<sub>sub</sub> (sub要素)</li>
<li>TEST<span class="sub">sub</span> (CSS)</li>
</ul>

ただ、なんでもかんでもCSSに置き換えればいいってもんじゃないよ。
数式や化学式などの上付き、下付きはsup要素、sub要素としてマーク付けするのが無難だね。

649 ：Name_Not_Found：2005/09/08(木) 20:28:42 ID:???

このページについて質問です。
デザインはいじってる途中なので突っ込みはあまりナシでお願いします。

ttp://blog.livedoor.jp/iruris/archives/50042494.html
ttp://blog.livedoor.jp/iruris/site.css

連続「！」の後ろの方がDIVの外にはみ出してしまってるのですが、なぜなのでしょうか。
他の長い行ではこうならないのですが……

650 ：Name_Not_Found：2005/09/08(木) 20:35:01 ID:???

>>645
連続した記号、英数字等は続き文字として改行されないUAが殆どです

651 ：Name_Not_Found：2005/09/08(木) 20:49:06 ID:???

ただの宣伝かよぅ

652 ：Name_Not_Found：2005/09/08(木) 21:09:02 ID:???

>>650
ああ、そうだったのですか。初めて知りました。

653 ：Name_Not_Found：2005/09/08(木) 21:35:36 ID:???

http://read.kir.jp/file/read17362.htm
こういう3カラムを作成したのですが、左右が
真ん中に平行して伸びません。きれてしまいます。
Firefoxで表示するとすべてのエリアが100%表示されません。

これをテーブルの3カラムのように各エリアの文字数に応じて
可変するようにするにはどうしたらいいのでしょうか？

（ちなみにアップしているCSSを記述しています）

654 ：Name_Not_Found：2005/09/08(木) 21:44:19 ID:???

>>653

なんかよくわからんが、
>>8の「段組れいあうとてすと」なんてどうだ？

655 ：653：2005/09/08(木) 21:49:30 ID:???

>>654
そこも見ましたが、CSSレイアウトがしたいのではなく、
3カラムで100％表示可変したいのです。

656 ：Name_Not_Found：2005/09/08(木) 21:50:22 ID:???

hrに
color:#000000;
height:10px;
width:100px;
としたのですがFirefoxで見てみると太さと長さだけ適応されて
色が透明？になってしまいます。
色もちゃんとつける事はできますか？

657 ：Name_Not_Found：2005/09/08(木) 21:50:41 ID:???

i need 翻訳者

658 ：Name_Not_Found：2005/09/08(木) 21:52:24 ID:???

>>656
color　IE用
background-color　FF用

659 ：Name_Not_Found：2005/09/08(木) 21:54:46 ID:???

>>658
できました！周りの凸凹を消すことはできないんでしょうか？

660 ：Name_Not_Found：2005/09/08(木) 21:59:01 ID:???

>>659
border:0;

661 ：Name_Not_Found：2005/09/08(木) 22:00:22 ID:???

>>660
ありがとう

662 ：Name_Not_Found：2005/09/08(木) 22:01:27 ID:???

height: 10px;
color: #000;
border-top: solid 2px #000;
border-left: none;
border-right: none;
border-bottom: none;

でどうだ？

663 ：Name_Not_Found：2005/09/08(木) 22:01:31 ID:???

text-decoration って打ち消せないの?

<SPAN STYLE="text-decoration:underline;">
　　あいうえお
　　<SPAN STYLE="text-decoration:none;">
　　　　かきくけこ
　　</SPAN>
</SPAN>

とすると「あいうえおかきくけこ」全体に下線が引かれてしまうんだが。

664 ：Name_Not_Found：2005/09/08(木) 22:02:27 ID:???

×border-top: solid 2px #000;
○border-top: solid 10px #000;

665 ：Name_Not_Found：2005/09/08(木) 22:03:31 ID:???

>>653
エッチな管理人さんに萌え

666 ：Name_Not_Found：2005/09/08(木) 22:05:15 ID:???

勃起した

667 ：Name_Not_Found：2005/09/08(木) 22:18:35 ID:???

>>663
ttp://www.mozilla.gr.jp/standards/webtips0002.html

668 ：Name_Not_Found：2005/09/08(木) 22:18:37 ID:???

>>663
打ち消せないらしいね。
このことは http://www.mozilla.gr.jp/standards/webtips0002.html に分かりやすく書いてあるよ。

669 ：Name_Not_Found：2005/09/08(木) 22:21:39 ID:???

>>667-668
こんな過疎板で結婚なんて

670 ：ｶｽ ◆z.fnC4lCx2 ：2005/09/08(木) 22:22:32 ID:???

>>653
斜め読みだけど、ﾄﾞｰｿﾞ
http://www.inknoise.com/experimental/layoutomatic.php

671 ：Name_Not_Found：2005/09/08(木) 22:22:46 ID:???

ふしだらな女ですが末永くよろしく

672 ：ｶｽ ◆z.fnC4lCx2 ：2005/09/08(木) 22:23:54 ID:???

あ、やっぱりよく読んでなかったorz

673 ：Name_Not_Found：2005/09/08(木) 22:26:10 ID:???

>>663
spanの入れ子・・・　　あ～～～～ぁ

674 ：653：2005/09/08(木) 23:04:45 ID:???

>>670
そこからダウンロードしてみましたが、やっぱり
文字数に応じて可変されません・・。

CSSでは無理なのでしょうか？

675 ：Name_Not_Found：2005/09/08(木) 23:13:07 ID:???

長さを揃えたいのか、それぞれの高さが可変するようにしたいのか、よくわからんのだが。

676 ：653：2005/09/08(木) 23:14:11 ID:???

>>675
両方です。説明不足ですみません。

677 ：Name_Not_Found：2005/09/08(木) 23:54:33 ID:???

三つのカラムのうち、もっとも長いものに他の二つが追従する
ってことか？

678 ：Name_Not_Found：2005/09/09(金) 00:02:54 ID:???

可変なんてwidth height指定してなきゃできるだろ

679 ：653：2005/09/09(金) 00:23:49 ID:???

>>677
そういうことです。
>>678
>>653にアップしているソースでは指定してます。

って今見たら消えているので、再アップします。
http://oda.minidns.net/file/data/index_1.html

680 ：Name_Not_Found：2005/09/09(金) 01:18:18 ID:???

>>679
そういうもんだよ。
http://www.w3.org/
W3Cのページもそうなってるでしょ？
追従したものがいいなら、テーブルで組みな。

681 ：Name_Not_Found：2005/09/09(金) 04:08:16 ID:???

ttp://www.positioniseverything.net/ordered-borders-center.html

682 ：653：2005/09/09(金) 11:14:35 ID:???

>>680
わかりました。結論として「テーブルで組まないと出来ない」
ということですね・・。覚えておくようにします。ご説明ありがとうございました。

683 ：Name_Not_Found：2005/09/09(金) 11:21:14 ID:???

>681の方法だったらできるみたいね。
でも、単純な仕組みでは無理みたい。

684 ：Name_Not_Found：2005/09/09(金) 12:49:35 ID:???

縦可変、横固定なら、背景画像でごまかせる？

685 ：Name_Not_Found：2005/09/09(金) 14:56:12 ID:???

>684
>618のやつ、左右の背景色はボーダーの色で指定してるみたい。
ボーダーの上に左右のdivの中身が重なるようにしてるから、
.leftと.rightに背景画像持ってくればごまかせると思うよ。

686 ：質問：2005/09/09(金) 16:10:45 ID:???

SEO対策を考えて
<div id="header">タイトル</div>
<div id="main">本文</div>
<div id="menu">メニュー</div>
<div id="footer">コピーライト</div>
という順序で組んでいるのですが

見た目を上から順に　1.タイトル、2.メニュー、3.本文、4.コピーライト
としたいのですがどうすればできますか？（幅は全て同じです。）

※とりあえずやってみたこと（結果的には失敗）
・タイトルとメニューの高さをpx固定して、タイトルと本文の間をmarginで空けてそこにメニューをposition:absoluteでぶちこむ。
⇒FireFoxで文字の大きさを大きくすると重なり合って使い物になりませんでした。

687 ：Name_Not_Found：2005/09/09(金) 16:28:10 ID:???

<body>
<div id="content"><p>
内容
</p></div>
<div id="nav"><p>
ナビゲーション
</p></div>
</body>

html, body {height: 100%;width: 100%;overflow: auto;}
body {margin:0px;padding:0px;}
#content {height: 80%;width: 100%;margin:0px;padding:0px;overflow: auto;background-color:#9999CC;}
#nav {background-color: #99CCCC;width: 100%;height: 20%;margin: 0px;}

cssで擬似フレームを組んだのですが、Firefoxで見ると内容とナビゲーションの間に1行分の隙間が出来てしまいます。
どうすれば隙間をなくすことができますか?

688 ：Name_Not_Found：2005/09/09(金) 16:28:12 ID:???

代替スタイルシートを定義するじゃないですか、
ブラウザで代替スタイルシートに適用するじゃないですか、
この場合、代替スタイルシートで記述されていない部分は、
最初に読み込んだデフォルトの固定スタイルシートから継承されたりするんですか？

689 ：Name_Not_Found：2005/09/09(金) 16:32:39 ID:???

タメシテミレバ

690 ：Name_Not_Found：2005/09/09(金) 16:46:16 ID:???

>>687
<p></p>

691 ：687：2005/09/09(金) 17:10:24 ID:???

>>690
ありがとうございます。
でも実際には<ul>とかも入ってるんですが

692 ：Name_Not_Found：2005/09/09(金) 17:19:54 ID:???

小出しじゃ回答出んわな。

693 ：Name_Not_Found：2005/09/09(金) 17:34:28 ID:???

SEO対策なんてdisplay:noneでいろいろかいときゃいいんじゃないの

694 ：Name_Not_Found：2005/09/09(金) 17:46:08 ID:???

>>684
[CSS]
* { margin: 0; padding: 0; border: 0; }
.block { background: #55a; width: 500px; }
.block2 { background: #a55; width: 400px; float: left; }
.left { width: 100px; float: left; }
.center { background: #5a5; width: 300px; float: right; }
.right { width: 100px; float: right; }
.top,.bottom { background: #999; }
.clear{ clear: both; }

[HTML]
<div class="block">
<div class="top">TOP</div>

<div class="block2">
<div class="left">LEFT</div>
<div class="center">CENTER<br><br><br><br><br><br><br><br><br></div>
<div class="clear"></div>
</div>

<div class="right">RIGHT</div>
<div class="clear"></div>

<div class="bottom">BOTTOM</div>
</div>

[説明]
ボックス内を大ボックスと小ボックスに二分する。(小ボックスがRIGHT
大ボックスの方をさらに二分する。(LEFTとCENTER
上記のソースではLEFTもしくはCENTERが一番長い場合は追従する。

695 ：Name_Not_Found：2005/09/09(金) 18:52:53 ID:???

background-imageで指定した背景画像の長さを、
<img>のwidthやheigtのように、長さを決めることはできませんでしょうか？
あらかじめ希望通りの長さの画像を指定しないとだめなのでしょうか？

696 ：695：2005/09/09(金) 18:54:04 ID:???

日本語へんでした。

あらかじめ希望通りの長さの画像を指定しないとだめなのでしょうか？
を
あらかじめ希望通りの長さの画像を用意しないとだめなのでしょうか？
に読み替えてください。

697 ：Name_Not_Found：2005/09/09(金) 19:42:46 ID:???

>>695
無理

698 ：Name_Not_Found：2005/09/09(金) 21:21:53 ID:???

先ほど代替スタイルシートで質問させていただきました者です。
IEで代替スタイルシートを選択させたい場合は、Java Scriptを使うしか方法はありませんか？

699 ：Name_Not_Found：2005/09/09(金) 21:46:24 ID:NGRzQHw5

>>698
サーバーサイドスクリプト（CGIやPHP）でもできるよ。

700 ：ｶｽ ◆z.fnC4lCx2 ：2005/09/09(金) 21:58:27 ID:???

>>698
JSはやめた方が良い。JSをOffにしてるユーザもいるからね。

701 ：Name_Not_Found：2005/09/09(金) 22:08:59 ID:???

ス切リボは？

702 ：Name_Not_Found：2005/09/09(金) 22:19:47 ID:???

>>700
JSオフだったら単にCSSなしになるだけだろ？

703 ：ｶｽ ◆z.fnC4lCx2 ：2005/09/09(金) 22:27:15 ID:???

それって(´･ω･｀)ｶﾅｼｲｯｽ

704 ：Name_Not_Found：2005/09/09(金) 22:29:41 ID:???

どのサイトもユーザCSS被せちまってるよ、すまんな

705 ：Name_Not_Found：2005/09/09(金) 22:38:18 ID:???

全ての値のリセットってどんなだっけ
*{ * }
こんなんでよかった??

706 ：Name_Not_Found：2005/09/09(金) 22:54:59 ID:???

(´･ω･｀)試してガッテン

707 ：Name_Not_Found：2005/09/09(金) 23:05:43 ID:???

ﾑﾘだた・・・orz
*←これは合ってると思うんだけどなぁ

708 ：Name_Not_Found：2005/09/09(金) 23:10:40 ID:???

そもそもリセットって何よ。

709 ：Name_Not_Found：2005/09/09(金) 23:11:46 ID:???

* {
font: normal normal normal 100%/100% Osaka,Times,"ＭＳＰゴシック";
margin: 0px;
padding: 0px;
border: none;
text-align: left;
text-decoration: none;
text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis;
background: transparent;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

全部じゃないがこのくらいやっときゃいいかと

710 ：Name_Not_Found：2005/09/09(金) 23:16:53 ID:???

* { display : none }

711 ：Name_Not_Found：2005/09/09(金) 23:32:01 ID:???

せっかくfont-size:125%;を指定しているのに、戻されていたのか・・・ｶﾅｼｽ

712 ：Name_Not_Found：2005/09/09(金) 23:42:07 ID:???

誰か肛門のAAくれ

713 ：Name_Not_Found：2005/09/09(金) 23:43:12 ID:???

>707

*{ position:static; margin:0; padding:0 position:static; }
h1,h2,h3,h4,h5,h6{ position:static; margin:0; padding:0; }
ul,ol,dl,dt,dd{ position:static; margin:0; padding:0; font-style:normal; font-weight:normal; }
p,div,pre,blockquote,address,noscript,script{ position:static; margin:0; padding:0; font-style:normal; font-weight:normal; }
hr,table,from,fieldset,del{ position:static; margin:0; padding:0; font-style:normal; font-weight:normal; }
em,strong,q,dfn,code,samp,kbd,var,cite,abbr,acronym{ position:static; margin:0; padding:0; border:none; font-style:normal; font-weight:normal; }
span,img{ position:static; margin:0; padding:0; font-style:normal; font-weight:normal; border:0 none #FFFFFF; }

微妙にインライン要素足りないけど、まぁ多分そこらへんは使わないからスルー。
* を認識しない旧UAとかもあるから無駄に長いけど。

714 ：Name_Not_Found：2005/09/09(金) 23:55:08 ID:???

sugeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!!!!!!!!!!!!!

715 ：687：2005/09/10(土) 00:04:24 ID:???

>>687,691は無理なんですか？

716 ：Name_Not_Found：2005/09/10(土) 00:30:28 ID:???

>>715
？

717 ：686：2005/09/10(土) 00:53:16 ID:???

>>686は無理なんですか？

718 ：Name_Not_Found：2005/09/10(土) 00:55:53 ID:???

>>715
p{
margin-top:0;
margin-bottom:0;
}
でよくない？

pのmarginで隙間が出来てるんでしょ。

719 ：Name_Not_Found：2005/09/10(土) 01:02:18 ID:???

>>686
pxじゃなくてemでやればちょっとだけましにならない？

>>687
マージンの相殺によりp要素のマージンがdiv#contentとdiv#navの間に
出現しているからのような気がする。p要素のマージンを0にするか
<div id="content/nav"><div style="padding: 1px;"><p>...</p></div></div>
とやってみるとどうなる？

720 ：Name_Not_Found：2005/09/10(土) 01:10:05 ID:???

>>717
>>719も言ってるけど大きさを相対値指定すれば少しマシになると思うよ。

721 ：Name_Not_Found：2005/09/10(土) 01:19:18 ID:???

なんか、IE6のバグかと思うんですが、
最後の文が繰り返し表示されるバグに出くわした人いませんか？

例）

インターネット上で
ご覧いただけます。

いただけます。←なぜか表示される。

722 ：Name_Not_Found：2005/09/10(土) 01:25:12 ID:???

F5押せば消えないか？

723 ：Name_Not_Found：2005/09/10(土) 01:32:41 ID:???

消えないですねぇ。firefoxでは表示されないので、IEのバグかと思うんですが。
同じような症状が出た人いませんかね。うーん。困った。

724 ：Name_Not_Found：2005/09/10(土) 01:41:53 ID:???

>>723
そう思うんならサンプル晒せばいいじゃん。

725 ：Name_Not_Found：2005/09/10(土) 02:00:55 ID:???

サンプル晒そうと思い、ソースがすっきりするようコメントアウトを消したら、消えました・・・。
コメントアウトとかがいけなかったみたいです。

726 ：787：2005/09/10(土) 02:03:27 ID:???

>>718,719ありがとうございました
>>718の方法でできました。

727 ：Name_Not_Found：2005/09/10(土) 02:46:18 ID:???

擬似インラインフレームDIV(ボックス)の中に
日記CGI(フリー配布モノ)を表示をさせたいのですが
これってできるのでしょうか？

728 ：Name_Not_Found：2005/09/10(土) 02:53:16 ID:???

>>727
つ【PHP】
つ【SSI】

729 ：Name_Not_Found：2005/09/10(土) 06:23:10 ID:???

>>687　>>726
>>690で見当付かなかったのか？

730 ：Name_Not_Found：2005/09/10(土) 12:24:20 ID:???

H1 {font-family: Tahoma, "ＭＳＰゴシック", sans-serif;}

とかやると、フォントリンクとか何もしてない環境だとどうなるのでしょうか?

731 ：Name_Not_Found：2005/09/10(土) 12:42:59 ID:???

フォントリンクって何??

732 ：686：2005/09/10(土) 13:33:35 ID:???

>>719
>>720
em指定でもだめでした。
文字が大きくなって横１列のメニューが２行以上になると
２行目以降が本文の冒頭と重なってしまいます。

733 ：Name_Not_Found：2005/09/10(土) 14:35:39 ID:???

CSS使ってかっこいいページ作りたい。
でも勉強ﾏﾝﾄﾞｸｾ。
CSS作成支援ツールとかも機能が制限されてるものが多くて中々いいものがない。

オレはどうすれば？

734 ：Name_Not_Found：2005/09/10(土) 14:36:05 ID:???

勉強しろ

735 ：Name_Not_Found：2005/09/10(土) 14:36:59 ID:???

一回書いたら終わりになるからそのために何週間もかけて勉強するのもなぁ
と思ったオレだよん。

736 ：Name_Not_Found：2005/09/10(土) 14:38:14 ID:???

諦めろ、お前じゃ勉強しても一生無理だ

737 ：Name_Not_Found：2005/09/10(土) 14:40:50 ID:???

キャｯ＞＜
でも勉強するのもダルいしなぁ。
とりあえず真ん中に文字をよせて(ボックスとか言う奴なのか？)そんで上に画像表示してテーブルパーでいいんだよ、俺は。

738 ：Name_Not_Found：2005/09/10(土) 14:43:58 ID:???

>>737
ホームページビルダー使うといいよ

それ以上必要ない

739 ：Name_Not_Found：2005/09/10(土) 14:44:18 ID:???

>>738
あぁあれね。割れでもいい？

740 ：Name_Not_Found：2005/09/10(土) 14:51:01 ID:???

テーブルレイアウト

741 ：Name_Not_Found：2005/09/10(土) 14:56:31 ID:???

釣りに構うなよお前ら

742 ：Name_Not_Found：2005/09/10(土) 15:10:06 ID:???

743 ：Name_Not_Found：2005/09/10(土) 15:16:50 ID:???

あ？ずれてんじゃん。なめてンのかよ。
こんなかんじね＞＜
http://www.uploda.org/file/uporg189462.jpg

744 ：Name_Not_Found：2005/09/10(土) 15:25:38 ID:Qb80cGI0

>>742
2chやるよりよっぽど簡単

745 ：Name_Not_Found：2005/09/10(土) 15:27:17 ID:???

h1{margin:0;}
#unco{margin:0 auto;width:80%;border-width:0 3px;borderstyle:double;}

<h1>gazou</h1>
<div id="unco">ようこそ</div>

746 ：ｶｽ ◆z.fnC4lCx2 ：2005/09/10(土) 16:51:31 ID:???

>>733
CSSの勉強が難しいだとぉ？
どこがだよ…
楽しみながらやればいいじゃん。

>>745
どうも、うんこ野郎です

747 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 17:02:19 ID:???

お前うざいから消えろ

748 ：ｶｽ ◆z.fnC4lCx2 ：2005/09/10(土) 17:10:50 ID:???

あいあい

749 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 17:19:07 ID:???

>>748
へーいｶｽｶｽへいｶｽｶｽ。

750 ：Name_Not_Found：2005/09/10(土) 18:58:37 ID:???

>>747 >>749
その名前流行ってんの？

751 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 18:59:08 ID:???

ｶｽほんと氏ねよ

752 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 19:00:55 ID:???

>>750

753 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 19:05:20 ID:???

borderが使えるタグ要素教えてください

ぼくの知ってる限りでは<p>と<div>です

754 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 19:06:33 ID:???

>>753
全部

755 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 19:07:12 ID:???

>>753
たとえインライン要素でも可能
使えない方が例外

756 ： ◆z.fnC4lCx2 ：2005/09/10(土) 19:10:38 ID:???

>>751
嫌だ死にたくないよorz

757 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 19:47:43 ID:???

Firefoxでtext-align:centerとしても真ん中に表示されないのですが
centerはIEの独自なのでしょうか？

758 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 19:50:23 ID:???

>>757
text-align:center でブロック要素がセンター寄せになってしまうのは IE のバグです

759 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 19:52:00 ID:???

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

760 ：757：2005/09/10(土) 21:24:02 ID:???

すみません、このIEでのバグを回避する方法は何かありませんか？

761 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 21:25:00 ID:???

IEだけ適用しなければいい

762 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 21:41:31 ID:???

>>760
つ振り分け

763 ：757：2005/09/10(土) 21:44:36 ID:???

>>762
詳しく教えて頂けませんか？

764 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 21:50:56 ID:d9y3GJye

>>760
文書型宣言は何にしてる？

765 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 21:51:15 ID:???

ｶｴﾚ

766 ：757：2005/09/10(土) 21:52:28 ID:???

>>764
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
です。

767 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 21:57:04 ID:???

<br />にborderを試してみたけどﾑﾘでした、こういう系はダメって事なんですか？

768 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 21:59:43 ID:???

何がしたいんだお前は

769 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 22:01:10 ID:d9y3GJye

>>766
すまん、DOCTYPEスイッチでなんとかなるかと思ったが俺の勘違いだった

770 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 22:01:58 ID:???

>>767
改行に線があったらおかしいと思わないか？
なんとなーく、ね。

771 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 22:03:58 ID:???

doctypeでなんとかなるんだよ
センタリングしたい要素にwidthを指定した上で
margin: 0 auto;
かなにかを付ければいいよ

772 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 22:08:21 ID:???

>>763
>>4
テンプレ読んでるか？

773 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 22:11:10 ID:???

ttp://hmw.boo.jp/blog/index.html
ttp://hmw.boo.jp/blog/styles-site.css

なぜか上のタイトル部分の横幅がその下より横幅が長くなってしまいます。
どちらも width:95% にしてるのですが……　どうすれば同じ横幅になるのでしょうか。

774 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 22:13:46 ID:???

％指定はいろいろ曖昧だからなあ
と原因探してないけど言ってみる…。

左右のマージンを２．５％に指定するんじゃだめなのかい？

775 ：773：2005/09/10(土) 22:16:46 ID:???

>>774
ダメみたいです。
ちなみに、IEで見たら綺麗に表示されました……
OperaとMozilla系でみるときはそうなるようです

776 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 22:19:11 ID:???

>>773
box-sizing: border-box;
-moz-box-sizing: border-box;

777 ：名無しさん＠そうだ選挙に行こう：2005/09/10(土) 22:26:15 ID:???

>>773
ぼくなら、HTMLの記述順を
左、右、真ん中にして
body{width:95%;margin:0 auto;}
#left{float:left;width:20%;}
#right{float:right;width:20%;}
#center{margin:0 21%;}
という感じでやる。

778 ：773：2005/09/10(土) 22:55:22 ID:???

>>776
そんなのがあったとは。知らなかったです。
ちゃんとなりました。

>>777
参考にします

779 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 09:56:35 ID:???

<div class="content">
<h2>ああああ</h2>
<p>あああああああああああああああ</p>
</div>

.content h2 {
font-size:100%;
}

.content p {
text-indent:1em;
}

のような使い方は何か問題あるんでしょうか？
あまりしてるサイトを見ないのですが

780 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 10:04:03 ID:???

>>779
子、子孫指定のことを言ってるのか？だとしたら問題も糞もないだろ。
その記述が、自分のサイトで運用し易いか否かは自分で判断するしかない。

781 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 10:04:58 ID:???

>>780
何かバグがあるのかと思ったのですが問題ないようですね、
ありがとうございました。

782 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 10:05:38 ID:???

ちなみに子指定はブラウザにより、解釈にばらつきがある。
これが問題っちゃあ問題だけど、子孫指定は問題ないのでは？
少なくとも俺が使ってる範囲では問題は見当たらない。

783 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 11:51:43 ID:???

>>779
俺はそうしているが、全く問題ない。

784 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 11:55:44 ID:???

>>779
便利だし、みんな結構使ってるぞ
ユーザスタイルシートだと無いと困るぐらい

785 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 11:56:39 ID:???

便利とか問題ないとかの話じゃないだろ。
あたりまえのことだ。

786 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 12:09:33 ID:???

子指定できないIEを取り除くために>指定

787 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 13:07:19 ID:???

MT系はだいたいそんな感じの指定してないか？

788 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 14:39:19 ID:???

IMG におけるstyle ”float: left” と ”vertical-align: text-bottom(middle)” は両立しないのでしょうか？

789 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 15:22:33 ID:???

ttp://jigsaw.w3.org/css-validator/
の
＞行番号 : 4 font-family: 一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します
という警告は何を直せば良いのでしょうか？
4行目に書いているのは
font-family: Arial, Osaka, ＭＳＰゴシック;
です、お願いします。

790 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 15:50:00 ID:???

serif,sans-serif,cursive,fantasy,monospeceのいずれかを追加すればいいのだよ。
それらのフォントがどういうものかぐらいは自分で調べるのだ。

791 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 16:02:41 ID:???

>>790
エラーが出なくなりました、有難うございます。
今から詳しく調べてみます

792 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 16:27:36 ID:???

FirefoxやNetscapeで同ページにclass要素を複数使うと
1回目と2回目以降で違う動作をする
(1度目ではピッタリと付いていた要素同士が1px離れていたり、
　上部のborderが正常に表示されなかったり)
ことがあるのですが何故なのでしょうか？

793 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 16:32:03 ID:L0XtqvMh

CSSレイアウトで・・・
#content #nav
|￣￣￣￣￣￣￣￣￣￣￣￣￣￣|￣￣￣￣￣￣￣|
| ふんにゃかふんにゃか | メニュー |
| | ・ﾎｰﾑ |
| ほにゃららほにゃらら‥… | ・ﾌﾞﾄﾞｳ |
| なんたらかんたら‥… | ・ｶｽ |
| | |

こんな感じで、レイアウトをしましたが…
ブラウザのウィンドウ幅を縮小すると…

|￣￣￣￣￣￣￣|￣￣￣￣￣￣|￣￣￣￣|
| ふんにゃ | メニュー |か |
| | ・ﾎｰﾑ | |
| ほにゃららほ | ・ﾌﾞﾄﾞｳ |ら |
| なんたらかん | ・ｶｽ |ら |
| | | |

と、なってしまいます。(メニュー領域がズレてしまう)
原因が分かりません。ちなみに#navはposition:absoluteで指定しました。
教えてください、お願いします。

794 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 16:32:12 ID:???

訂正→同ページに同一classを複数回使うと

795 ：793：2005/09/11(日) 16:33:38 ID:L0XtqvMh

AAがズレました。
訂正↓

#content #nav
|￣￣￣￣￣￣￣￣￣￣￣￣￣￣|￣￣￣￣￣￣￣|
| ふんにゃかふんにゃか | メニュー |
| | ・ﾎｰﾑ |
| ほにゃららほにゃらら‥… | ・ﾌﾞﾄﾞｳ |
| なんたらかんたら‥… | ・ｶｽ |
| | |

こんな感じで、レイアウトをしましたが…
ブラウザのウィンドウ幅を縮小すると…

|￣￣￣￣￣￣￣|￣￣￣￣￣￣|￣￣￣￣|
| ふんにゃ | メニュー |か |
| | ・ﾎｰﾑ | |
| ほにゃららほ | ・ﾌﾞﾄﾞｳ |ら |
| なんたらかん | ・ｶｽ |ら |
| | | |

796 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 16:47:53 ID:???

>>793=795
ttp://aaesp.at.infoseek.co.jp/
全然わからんのでこれ使って再トライ

797 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 16:49:40 ID:???

>>792
なったことない
なった例を提示して

798 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 16:52:38 ID:???

CSSでテーブルの大きさを決めることは危険でしょうか？
これによって表示が崩れるブラウザなどはありますか？

799 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 17:17:53 ID:???

>>798
ピクセル指定だと横スクロールバーが出る可能性はHTMLでやったときと同じ危険性

800 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 18:27:09 ID:???

質問です　XHTML 1.1　の場合
IEだと
margin :aunto;
がきかなくなるのですが

bodyにtext-align: centeｒl;
で無理やりセンターにするぐらいしか方法はないですかね？

801 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 18:37:51 ID:???

>>800
いいからもちつけ

802 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 19:04:18 ID:???

>>800
IE 6.0 の場合、<!DOCTYPE ～> を最初に置かないと互換モードになる。
XML 文書において xml 制御命令は必須ではないので省略すればいい。
そもそも Content-Type: text/html で送り出した場合 xml 制御命令の
処理を期待すべきではないし、実際に書いた場合のメリットもない。

803 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 20:19:13 ID:???

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

このへんはかかないでいけてことですか？

804 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 20:30:33 ID:???

>>803
<!DOCTYPE ～> を「最初に置かないと」互換モードになる
て書いてあるだろ(#ﾟДﾟ)ｺﾞﾙｧ!!!

805 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 20:38:05 ID:???

最終リリースIE7でCSSバグが改善されるのはピーカーブとギロチンの二つだけなの？

806 ：名無しさん＠そうだ選挙に行こう：2005/09/11(日) 22:54:49 ID:???

>>805
ｷﾞﾛﾁﾝてどんなﾊﾞｸﾞ？

807 ：Name_Not_Found：2005/09/12(月) 02:09:38 ID:???

>>800
http://www.google.co.jp/search?hl=ja&ie=Shift_JIS&oe=Shift_JIS&lr=lang_ja&q=aunto
これの一番上かな？

808 ：Name_Not_Found：2005/09/12(月) 03:02:47 ID:???

？

809 ：Name_Not_Found：2005/09/12(月) 08:27:28 ID:2fYYLDcd

おはようございます。

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

</style>
</head><body>
<div id="tanaka">
<h1>田中君と鈴木君</h1>
</div></body></html>

上のようなコードで、h1タグの田中君と鈴木君という文字をID=tanakaボックスの一番下に表示したいのですが上手くいきません。左右中央寄せはtext-alignでできるのですがvertical-alignを設定してもウンともすんとも言わないですし・・どうすれば良いのでしょうか？

810 ：Name_Not_Found：2005/09/12(月) 08:33:30 ID:???

高さも幅も決まってるなら

#tanaka h1 {position : absolute; top : ***px;}

で。tanakaには{position : relative;}を仕掛けておく。
正直このくらいしか思いつかんかった。

811 ：Name_Not_Found：2005/09/12(月) 09:25:07 ID:???

padding:-top で調整

812 ：Name_Not_Found：2005/09/12(月) 13:05:04 ID:???

CSSﾒﾝﾄﾞｸｾ。

もう2年も3年もやってると飽きる

813 ：Name_Not_Found：2005/09/12(月) 14:07:50 ID:???

* { margin: 0; padding: 0; }　body { margin: 20px; }
h1 { margin: 20px; padding: 20px; background: #99ff99; }
#header1, #header2 { margin: 0 auto; width: 760px; background: #ff9999; }
#header2 { border: thin solid red; }
<body>
<div id="header1"><h1>Heading</h1></div>
<div id="header2"><h1>Heading</h1></div>
</body>

IEとFirefoxでheader1の見え方が違うんですが、
この場合Firefoxの見え方が正解なんでしょうか？
あと、header1とheader2でボーダーがないのとあるので
header1の上下のピンクの部分が消える理由がわからないんですが…

814 ：Name_Not_Found：2005/09/12(月) 14:18:46 ID:???

>>813
>margin: 0 auto;
ここか？
Win IEでセンタリングされないのは有名すぎるバグ

>あと、header1とheader2でボーダーがないのとあるので
>header1の上下のピンクの部分が消える理由がわからないんですが…
は？

815 ：Name_Not_Found：2005/09/12(月) 15:00:23 ID:???

ピンクの部分がボーダーじゃねえのかよ

816 ：813：2005/09/12(月) 15:17:34 ID:???

IEで見た場合
http://www.hakusi.com/up/src/up3915.jpg
Firefoxで見た場合
http://www.hakusi.com/up/src/up3914.jpg

>>814 センタリングのことではないです…
>>815 ボーダーの線は赤のやつですが、ピンクの部分のことです

817 ：Name_Not_Found：2005/09/12(月) 15:38:07 ID:???

>>816
「マージンの相殺」でググれ。

818 ：817：2005/09/12(月) 15:42:15 ID:???

あと、試してないがおそらく#header1, #header2へのwidth指定をなくせば
IEでもFirefoxでも似たような表示になると思う。

819 ：Name_Not_Found：2005/09/12(月) 17:46:09 ID:???

marginやwidthやheightのautoってどういう意味なんですか？

820 ：Name_Not_Found：2005/09/12(月) 18:03:43 ID:???

自動

821 ：819：2005/09/12(月) 18:04:10 ID:???

>>820
自動って具体的にどういう動作をするんですか？

822 ：Name_Not_Found：2005/09/12(月) 18:05:14 ID:???

ブラウザが適当に設定する

823 ：819：2005/09/12(月) 18:06:21 ID:???

>>822
具体的にどういう動作をするんですか？

824 ：Name_Not_Found：2005/09/12(月) 18:07:37 ID:???

自分で実験しろよ・・・

825 ：Name_Not_Found：2005/09/12(月) 18:08:18 ID:???

勝手に動き回るんだよ

826 ：Name_Not_Found：2005/09/12(月) 18:08:24 ID:???

どうして自分で試すなり調べるなりしないんだろう・・・

827 ：Name_Not_Found：2005/09/12(月) 18:09:03 ID:???

しつこい教えてｸﾝを自動で排除してくれるcssｷﾎﾞﾝ

828 ：Name_Not_Found：2005/09/12(月) 18:09:07 ID:???

ヒント：ゆとり世代

829 ：819：2005/09/12(月) 18:11:14 ID:???

無駄レスする暇があったら一度で答えてほしかった
自分で調べてきます

830 ：Name_Not_Found：2005/09/12(月) 18:12:04 ID:???

819=真性

831 ：Name_Not_Found：2005/09/12(月) 18:12:39 ID:???

>>819(＝ >>829)
質問した以上は、報告しろな。

832 ：Name_Not_Found：2005/09/12(月) 18:13:58 ID:???

つーか、質問する香具師はID晒せよ。ｶｽが。

833 ：819：2005/09/12(月) 18:14:51 ID:???

>>831
そのプロパティを指定しなかった時と動作の変化がありませんでした。

834 ：Name_Not_Found：2005/09/12(月) 18:17:41 ID:???

ﾌﾟ。理解できてない。

835 ：819：2005/09/12(月) 18:21:15 ID:???

私の低脳な頭じゃ優越感に浸りたい人の無駄レスで
スレを無駄に消費することしかできないようです。

せめてmargin:0 auto;の用途だけ教えてください。

836 ：Name_Not_Found：2005/09/12(月) 18:24:01 ID:???

用途といわれても自動で設定したいときに使うとしか・・・。
あのさ、そもそもデフォルト値がどうなってるかとか
他の値に変えたらどうなるかとか考えないの？

用途が想像出来ないようなもの、元から使うわけがないんだから
心配しても仕方ないでしょうに。

837 ：Name_Not_Found：2005/09/12(月) 18:27:07 ID:???

>>835
>>1に書いてあることも読まずに質問する方が正義を訴えますか？
優越感以前にこの程度のルールも守れない自分を恥じようよ。

838 ：819：2005/09/12(月) 18:27:11 ID:???

そんな事を言われても>>814のレスに心を奪われてしまったんです。
親切から自分で調べさせて覚えさせようとしているのは分かったので
どうか答案をお願いします

839 ：819：2005/09/12(月) 18:29:14 ID:???

>>837
優越感に正義も悪もないと思いますよ
私が悪だろうと正義だろうと>>835の意味は多分変わらないです
よく読んでください

840 ：Name_Not_Found：2005/09/12(月) 18:31:06 ID:???

>>839
何逆切れしてんの？
お前がルールを守らないから、相手にされていないのに
それを見て「相手が優越感に浸っている」という発想はおかしいでしょ？

よく読んでください？

そちらこそスレのルールをよく読んでください。

841 ：819：2005/09/12(月) 18:34:53 ID:???

>>840
私は冷静に茶化してるだけです、失礼な
＞834 名前：Name_Not_Found[sage] 投稿日：2005/09/12(月) 18:17:41 ID:???
＞ﾌﾟ。理解できてない。
このレスの特にそう「ﾌﾟ。」は優越感によるものかと思われます。

そしてお説教についてですがこのスレに書かれる質問なんて
殆どテンプレを細かく読めば分かる事ばかりですし、今更言う事じゃないと思います。

842 ：Name_Not_Found：2005/09/12(月) 18:36:15 ID:???

>>841
はあ。じゃあ、テンプレ読んでください。

843 ：Name_Not_Found：2005/09/12(月) 18:36:37 ID:PyPf401j

>>841
ID出してください。

844 ：Name_Not_Found：2005/09/12(月) 18:38:12 ID:PyPf401j

最近質問者の態度でかいけど、中学生なのかな？

845 ：Name_Not_Found：2005/09/12(月) 18:39:17 ID:???

少なくとも社会人じゃねえな

846 ：Name_Not_Found：2005/09/12(月) 18:39:30 ID:???

>>844
意外とこういうのに限って本職のweb屋な気がする

847 ：819：2005/09/12(月) 18:40:10 ID:???

>>842
読みますね

>>843
私のレスがID出してやる事じゃないというくらい理解してください、ぷんぷん

848 ：Name_Not_Found：2005/09/12(月) 18:40:21 ID:???

>>841
> そしてお説教についてですがこのスレに書かれる質問なんて
> 殆どテンプレを細かく読めば分かる事ばかりですし、今更言う事じゃないと思います。

つ鏡

849 ：819：2005/09/12(月) 18:41:36 ID:???

>>844
顔がでかいのは生まれつきです

>>845-846
大穴狙いをする方は好きですよ

850 ：819：2005/09/12(月) 18:42:14 ID:???

>>848
つ鏡
この鏡と向き合わせれば無限ループですね

ところでいつまで付き合ってくれるんですか皆さん

851 ：Name_Not_Found：2005/09/12(月) 18:43:19 ID:???

素晴らしい釣りだった819に敬意を表して

ではそろそろ次の質問ドゾー。

852 ：Name_Not_Found：2005/09/12(月) 18:44:49 ID:PyPf401j

釣りだったか…

853 ：Name_Not_Found：2005/09/12(月) 18:49:33 ID:???

釣りのふりして自己を保ちたいだけでしょ。
こんな馬鹿はいよいよ放置しかないね。

854 ：819：2005/09/12(月) 19:18:39 ID:???

答えろ

855 ：Name_Not_Found：2005/09/12(月) 19:29:38 ID:???

華麗にスルー

856 ：Name_Not_Found：2005/09/12(月) 19:32:57 ID:???

ここまで>>819の自演

857 ：Name_Not_Found：2005/09/12(月) 19:34:41 ID:???

そして次の話題へ
↓

858 ：Name_Not_Found：2005/09/12(月) 19:35:19 ID:yGSvzUVa

IEで<li>要素に指定した指定したmarginが上手く表示されないのですが
バグなのでしょうか？margin-bottom:1px;としているのに
文字サイズによって2pxになったり3pxになったりします。

859 ：Name_Not_Found：2005/09/12(月) 19:46:46 ID:???

マージンの相殺。すっかり忘れていたorz

860 ：Name_Not_Found：2005/09/12(月) 23:06:43 ID:???

>>819
autoはブラウザごとに設定されている初期値が適応される。
要するに「何も指定しなかった場合」の数値を明示したい時に使う。
ただし例外あり。
左右両方のマージンにautoを指定した場合（margin:0 autoはこれ）、
センタリングされる事が望ましいとされているが、それはこの例外の一つ。

>>858
>>858＝859なの？
ならもう解決？

861 ：858：2005/09/12(月) 23:08:09 ID:WwrMA//U

いえ、>>859は別の方です

862 ：Name_Not_Found：2005/09/12(月) 23:18:49 ID:???

floatはwidthを指定しないとダメですか・・・？

863 ：Name_Not_Found：2005/09/12(月) 23:22:43 ID:???

>>861
別の割には>>859が答えでは・・・

864 ：Name_Not_Found：2005/09/12(月) 23:34:49 ID:7k2DZN2l

いや、俺も>>858に便乗質問。全く同じことで質問しようと思ってた。

IEだと<li>要素のmarginがおかしいと思う。Firefoxなら数値通りなのに。

<li><img src="hoge1.gif"></li>
<li><img src="hoge2.gif"></li>

とあったとして、li {margin:0} にしても隙間ができる。
それもフォントサイズを大とか最大にしたら隙間が空き、小だと空かなかったり。
まるで文字が入っているかのような。

<li>hoge</li>
<li>hoge</li>

として、li {width:100px; height:30px; margin:0 padding:0; text-indent:-999px; background:url('hoge.gif') repeat-no;}
のようにする、よくある画像を背景として、ボタン風に見せる手法の場合も、
なぜかIEだと隙間が入る・・・。なぜだろう・・・・。line-heightをいじってもだめなんだよな・・。

865 ：Name_Not_Found：2005/09/12(月) 23:36:17 ID:???

float にはwidth 指定しないとだめですね

866 ：Name_Not_Found：2005/09/12(月) 23:41:01 ID:???

margin:0　のあとに　; ついてないけど、それのせいとかではないのかなぁ？

liのmarginでこまったことはないけどなぁ・・

867 ：Name_Not_Found：2005/09/12(月) 23:53:13 ID:???

>>864
老婆心ながら、
<li>hoge</li><li>hoge</li>
みたいにliつなげてますよね？

868 ：864：2005/09/12(月) 23:53:37 ID:7k2DZN2l

>>866
あ、それは今サンプルで適当に打った時のTYPOです。
数ピクセルの隙間が上下に入りません？

869 ：864：2005/09/12(月) 23:54:21 ID:7k2DZN2l

>>867
途中の改行コードを全部切っても同じでした。

連投失礼

870 ：Name_Not_Found：2005/09/12(月) 23:56:23 ID:???

画像のベースラインはどう？

871 ：Name_Not_Found：2005/09/13(火) 00:05:06 ID:???

margin の上下はあれじゃないですか？

line-height　指定してないとか？

872 ：864 ◆IeH7cPLwpc ：2005/09/13(火) 00:07:18 ID:???

ちょっと今サンプルページ作ってみます。

#age続けもあれなので、ﾄﾘｯﾌﾟつけました。

873 ：Name_Not_Found：2005/09/13(火) 00:17:23 ID:???

なにをいっちょまえに

874 ：Name_Not_Found：2005/09/13(火) 00:18:50 ID:???

おかしいな・・・その鳥に見覚えが・・・ｗ

と思って検索したが2件しかなかった。

875 ：864 ◆IeH7cPLwpc ：2005/09/13(火) 00:25:51 ID:???

ttp://morphinae.com/test/

こうなります。（>>864の上のパターン）
ちなみにDOCTYPE宣言をSTRICTにしたり、
識別子入れたり、XHTMLにしてもだめでした・・・。

>>871
line-heightが無指定だと、Firefoxでも隙間が出来ますね。
サンプルでは0指定しています。

>>870
vertical-alignですか？そこはまだ未検証ですが・・・。

876 ：Name_Not_Found：2005/09/13(火) 00:28:49 ID:???

>>874
デジャｂ

877 ：864 ◆IeH7cPLwpc ：2005/09/13(火) 00:36:41 ID:???

>>874
適当に入れたらかぶりましたorz

>>864下のパターンです。
ttp://morphinae.com/test/index2.html

878 ：Name_Not_Found：2005/09/13(火) 00:47:44 ID:???

>>870 の言う通りでしょ。
普通にimg要素を置くと、画像の下端はbaselineに来ます、デフォでは。
なので、liに画像をつめて縦にツラツラ並べるときは、
li img { vertical-align: bottom; }

とすると良いですよん。

879 ：Name_Not_Found：2005/09/13(火) 00:49:08 ID:???

背景画像

880 ：Name_Not_Found：2005/09/13(火) 00:51:54 ID:???

今まで参加してなかったが。

リスト要素間に空白類文字を直接含まないようにしたらどうだ？
<ul><li></li></ul>

とか

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

って形で。試してないから知らんが。

881 ：Name_Not_Found：2005/09/13(火) 00:53:00 ID:???

heightの指定をなくして
line-heightを40pxにしなさい

882 ：Name_Not_Found：2005/09/13(火) 00:55:53 ID:???

>>878
bottomってIEで正常に解釈されるのか？
topと同じ挙動をするバグがあった気がするんだが。

883 ：Name_Not_Found：2005/09/13(火) 00:58:56 ID:???

>>882
試したらわかるじゃん。
きちんと直るよ。

884 ：864 ◆IeH7cPLwpc ：2005/09/13(火) 01:01:42 ID:???

>>870 >>878
ttp://morphinae.com/test/index_bottom.html
li img { vertical-align: bottom; } を入れました。
うまくいきました！

>>881
http://morphinae.com/test/index2_lineheight.html
背景画像パターンも、直りました。
height:40pxを残したままでも大丈夫みたいです。

どうやら解決したみたいです。
もう一度あれこれいじって、挙動を確認してきます。
みなさん、ありがとうございました。

885 ：Name_Not_Found：2005/09/13(火) 01:02:50 ID:???

>>882
これか？
http://www.htmq.com/style/vertical-align.shtml

886 ：Name_Not_Found：2005/09/13(火) 01:10:50 ID:???

vertical-align: bottom;でできるみたいですが

li のほうをinlineにしてimgのほうをblockにしても解決できますね

887 ：864 ◆IeH7cPLwpc ：2005/09/13(火) 01:14:01 ID:???

>>886
ttp://morphinae.com/test/index_block.html
試してみました。

888 ：Name_Not_Found：2005/09/13(火) 01:18:07 ID:???

menu として使う場合<a>のほうをblockしてもいけますね

889 ：864 ◆IeH7cPLwpc ：2005/09/13(火) 01:23:23 ID:???

>>888
ttp://morphinae.com/test/index_block_anchor.html
こちらも試してみました。

ところで、この手法であるような、
ブロック要素がインライン要素の中にあるというのは、文法的には問題無いのでしょうか？
イメージ的にまずそうな感じがするのですが・・。

890 ：Name_Not_Found：2005/09/13(火) 01:36:49 ID:???

IE6にだけCSS読ませて、それ以外のブラウザには違うCSSを読ませるテクニックってある？

891 ：Name_Not_Found：2005/09/13(火) 01:37:44 ID:???

問題ありまくり

892 ：Name_Not_Found：2005/09/13(火) 01:37:59 ID:???

<ul>
<li><a><img src="" src="a" widht="" height=""></a><li>
<ul>

特に文法的に間違ってはいないと思うので、大丈夫だと思いますよ

>>889

893 ：Name_Not_Found：2005/09/13(火) 01:38:36 ID:???

http://ssx.morphinae.com/

894 ：Name_Not_Found：2005/09/13(火) 01:40:30 ID:???

>>890
「CSSハック」でぐぐる

895 ：Name_Not_Found：2005/09/13(火) 01:42:23 ID:???

この場合、aにdisplay:bokck;を指定するのは問題ないと思うけど。

896 ：Name_Not_Found：2005/09/13(火) 01:43:41 ID:???

ひどいタイポだなｗ
display:block;だ

897 ：Name_Not_Found：2005/09/13(火) 01:51:36 ID:???

cssの参考書はどれがおすすめ？

898 ：Name_Not_Found：2005/09/13(火) 01:58:31 ID:???

>>897
と訊くような香具師はHTMLもわかってなさそうなので
ttp://www.amazon.co.jp/exec/obidos/ASIN/4767802504/qid%3D1126544278/250-9479136-5072234
これ

899 ：Name_Not_Found：2005/09/13(火) 02:01:07 ID:???

またすごい本を見つけたな・・・

900 ：Name_Not_Found：2005/09/13(火) 02:06:58 ID:???

凄いの？

901 ：Name_Not_Found：2005/09/13(火) 02:19:49 ID:???

┃━┏┃

902 ：Name_Not_Found：2005/09/13(火) 03:44:15 ID:ZowGwu/U

>>900
凄いのよね

903 ：Name_Not_Found：2005/09/13(火) 09:06:46 ID:???

>864は>886が一般的な解決方法かな。
これ使っているところ多いよね。

>895は誤りではないよ。
HTMLソースは、HTMLの仕様に基づいてＨＴＭＬはマークアップすれば良いのです。
HTMLの使用では、aはインライン要素でしょ。だからliに入れてもいいのよ。

CSSはHTMLとは別に考えて、あくまでも見た目を変えているだけ。

904 ：Name_Not_Found：2005/09/13(火) 10:39:00 ID:???

>>903
横レスだが
>>864のマークアップで隙間がですのはIEのほぼ仕様で、
<ul>
　<li><a href="グーグルへ"></a></li><li><a
href="ヤフーヘ"></a></li><li><a href="グーヘ"></a></li><a
href="マイクロソフトへ"></a><li><a href="アスクジーブスへ"></a></li><a
href="検索エンジンへ"></a></li>
<ul>

ってするんじゃなかったっけ？

905 ：Name_Not_Found：2005/09/13(火) 10:40:50 ID:???

手打ちしたら間違いまくった。IEで空白を出さずにぴったるくっつける方法
<ul>
　<li><a href="グーグルへ"></a></li><li><a
href="ヤフーヘ"></a></li><li><a
href="グーヘ"></a></li><a
href="MSNへ"></a><li><a
href="Ask.jpへ"></a></li><a
href="検索エンジンへ"></a></li>
<ul>

こんな具合。多分HTML側で対処するはず

906 ：864 ◆IeH7cPLwpc ：2005/09/13(火) 10:54:49 ID:???

>>905
つ ttp://morphinae.com/test/index_nowrap.html

私も最初これで解決？かと思ったんですが・・・。

>>903
なるほど。HTMLでしっかりマークアップしていれば、
CSSで後ブロック要素とインライン要素をひっくり返そうが大丈夫なんですね。

907 ：Name_Not_Found：2005/09/13(火) 11:13:39 ID:???

>>904
>>869

908 ：Name_Not_Found：2005/09/13(火) 11:30:19 ID:???

何で「　;　」で区切るの？

909 ：Name_Not_Found：2005/09/13(火) 11:30:38 ID:???

>>906
body {
margin:0;
padding:10px;
}

10pxって何？

910 ：Name_Not_Found：2005/09/13(火) 11:36:04 ID:???

見やすくするために入れてるだけでしょ。
なんで検証しないのかなあ。

911 ：Name_Not_Found：2005/09/13(火) 11:59:52 ID:???

(･∀･)ゞ　ｽﾝﾏｾﾝ

m9（^Д^）ﾌﾟｷﾞｬー

912 ：Name_Not_Found：2005/09/13(火) 13:30:06 ID:???

テーブル（表）をCSSで再現しようと躍起になっていたのですが、

｜　項目　｜　　　　　　内容　　　　　　　｜
｜　項目　｜　　　　　　内容　　　　　　　｜
｜　項目　｜　　　　　　内容　　　　　　　｜
　（こんなの）

途中で、表はそもそもこういう役割のために生まれたんじゃん意味ねぇ…orz
と言うことに遅まきながら気がつきました(´･ω･`)ｼｮﾎﾞｰﾝ

と言うことで、それはテーブルでやっているのですけども、上記のよ
うなものをCSSで再現した場合に何かメリットはあるのでしょうか？

913 ：Name_Not_Found：2005/09/13(火) 13:31:03 ID:???

にゃい

914 ：Name_Not_Found：2005/09/13(火) 13:31:10 ID:???

>>912
無い、寧ろ間違った使い方

915 ：Name_Not_Found：2005/09/13(火) 13:41:02 ID:???

検索したのですが、解説してるサイトが見つけられなかったので質問させてください。
子孫設定で

DIV#hoge .hoge1 P . hoge2 EM {hoge: hoge;}

というようにIDやclassを入れ子にしても良いのでしょうか？
ブラウザには反映されているようなんですが、厳密に言っていかがなんでしょうか？

916 ：912：2005/09/13(火) 13:43:31 ID:???

>>913
>>914

ありがとうございました。
やぱり意味ないですよね。勉強になりました

917 ：Name_Not_Found：2005/09/13(火) 13:48:38 ID:???

>>915
いい

918 ：Name_Not_Found：2005/09/13(火) 13:49:27 ID:???

>>915
構わないけどidの場合はわざわざそういう指定する必要がある場合はあまり無いんじゃないかな

919 ：915：2005/09/13(火) 13:56:07 ID:???

>>917-918
どうもありがとうございました。スッキリしました。

>>918
はい。例がちょっとあれでしたね

920 ：Name_Not_Found：2005/09/13(火) 15:39:12 ID:???

ｃｓｓで表は dl dt dd ＋　float で再現できるけど
ie だとdd二つ重ねたときに、すうピクセルずれるのがいなめないですね・・

921 ：Name_Not_Found：2005/09/13(火) 15:44:34 ID:???

否めないの使い方が違う・・・

922 ：Name_Not_Found：2005/09/13(火) 15:45:01 ID:???

>>920
なんか勘違いしているようだけど、CSS使おうが使うまいが、
表はtableで書くよ、ふつう。

あと、dd二つ重ねた、ってなに？

923 ：Name_Not_Found：2005/09/13(火) 15:49:20 ID:???

たしかにいなめないおかしいな・・

<dl>
<dt>dt 1</dt>
<dd>dd 1</dd>
<dd>dd 2</dd>
<dt>dt 1</dt>
<dd>dd 1</dd>
<dd>dd 2</dd>
</dl>
これでfloat して　dt dd ともにwidth: 70px;とか指定して　ddのmargin-left: 75px;

とかにしたとします

ＩＥだとdd2だけ　、数ピクセルずれます

たしかに表場合は普通にテーブルですね

924 ：Name_Not_Found：2005/09/13(火) 16:33:49 ID:???

次スレッド移行したら、これも宜しくね。

■ ローカルルール等リンク先更新総合スレッド 14
http://qb5.2ch.net/test/read.cgi/operate/1116864899/l50

925 ：Name_Not_Found：2005/09/13(火) 17:27:26 ID:???

質問者はID表示　も、よろ

926 ：Name_Not_Found：2005/09/13(火) 17:47:35 ID:???

>>923
それはその通り。

ddにもfloat:left;を指定して、dtにはclear:left;も指定する、もしくは
dtとddの幅を決め打ちして、dlの幅を(dt幅+dd幅)以上、(dt幅×2+dd幅)以下にすると、
その隙間はなくなる模様。

927 ：926：2005/09/13(火) 17:48:40 ID:???

>>926の補足。
ddにfloat:left;としたときは、ddのmargin-leftは0で。

928 ：Name_Not_Found：2005/09/13(火) 18:11:59 ID:???

ddにもfloat　をつけると、ddの横に二つ目のddがいってしまう。

margin-left: 0;にすると、ddがdlの下に来てしまう。

ddとddの幅を・・・
というのもやってみましたが、できませんでした・・。

929 ：Name_Not_Found：2005/09/13(火) 18:18:03 ID:???

>>928
もう少し基本を勉強しような
テンプレサイトなどを見ながら一週間色々試して遊んできて、
それでも分からなかったらもう一度おいで

930 ：Name_Not_Found：2005/09/13(火) 18:18:54 ID:???

>>928
>ddの横に二つ目のddがいってしまう。
だから>>926が「dtにはclear:left;も指定する」と言ってるだろが。
そもそもＦＡＱをなぜ見ない？　>>10のＡ６だ。

931 ：Name_Not_Found：2005/09/13(火) 18:19:41 ID:???

誤：>>10のＡ６だ。
正：>>10のＡ８だ。

932 ：Name_Not_Found：2005/09/13(火) 18:27:01 ID:???

いやいや・・
そもそもdtにclearつけたところで、
ddにclearかかってるわけではないから、

dt dd1 dd2

ってかんじになるね・・

933 ：Name_Not_Found：2005/09/13(火) 18:33:15 ID:???

>>923
>ＩＥだとdd2だけ　、数ピクセルずれます
結局、このバグだろ。
　フロートの左右にある行の端がずれる(5.x/6.0)
　http://cssbug.at.infoseek.co.jp/detail/winie/b151.html
回避法も載ってるな。

934 ：Name_Not_Found：2005/09/13(火) 18:38:41 ID:???

普通にバグ違いだと

<dl>
<dt>dt1</dt>
<dd>dd1</dd>
<dd>dd1</dd>
<dd>dd1</dd>
<dt>dt1</dt>
<dd>dd1</dd>
<dl>

dt {
float: left;
width: 70;
}
dd {
margin-left: 70px;
}

などとした場合

dt dd
dd　　　　　←このずれ
dd

dt dd

上の状態

935 ：Name_Not_Found：2005/09/13(火) 18:42:01 ID:???

>>934　widthには単位が必須！　それに、もしかして図示がズレてる？

936 ：Name_Not_Found：2005/09/13(火) 18:42:58 ID:???

単位は書き忘れです。

70pxですね

937 ：Name_Not_Found：2005/09/13(火) 23:12:52 ID:???

おまいらまだCSSとかやってんの

はっきり言って時代おくれ

938 ：Name_Not_Found：2005/09/14(水) 00:01:50 ID:???

議論厨が発生しました!!!!!!!!

939 ：Name_Not_Found：2005/09/14(水) 00:25:02 ID:???

>>937
最新って何？おせーて！

940 ：Name_Not_Found：2005/09/14(水) 00:33:58 ID:???

やっぱ、一枚画像にクリッカブルマップでしょう。

941 ：Name_Not_Found：2005/09/14(水) 00:35:31 ID:???

>>940
一枚絵だけが真の漢

942 ：Name_Not_Found：2005/09/14(水) 00:45:00 ID:???

釣られすぎだろｗ

大体、このスレに書き込む時点で（ｒｙ

943 ：Name_Not_Found：2005/09/14(水) 00:52:38 ID:???

てか、TABLE使ってるの奴の方が時代遅れ

944 ：Name_Not_Found：2005/09/14(水) 00:55:55 ID:???

これからはPDFだよな。

945 ：Name_Not_Found：2005/09/14(水) 00:57:00 ID:???

これからはワードだろ？

946 ：Name_Not_Found：2005/09/14(水) 01:00:23 ID:???

議論厨が発生しました!!!!

議論はよそで…
http://pc8.2ch.net/test/read.cgi/hp/1121262770/l50

947 ：Name_Not_Found：2005/09/14(水) 01:04:54 ID:???

>>943
おまえ空気読めないやつだな

948 ：Name_Not_Found：2005/09/14(水) 01:21:45 ID:???

>>946
この野郎、俺の体を張ったネタ振りを台無しにしやがって！

949 ：Name_Not_Found：2005/09/14(水) 02:32:24 ID:???

これからはflash paperさ

950 ：Name_Not_Found：2005/09/14(水) 03:04:07 ID:???

<li>で括ったナビゲーションなどをinlineで横に並べたとします。

・あああ　・いいい　・ううう

このうち前のリスト項目に対して画像を適応することは出来ないのでしょうか？
というかインラインにするとリストが消えますが、これは仕様なのでしょうか？

951 ：Name_Not_Found：2005/09/14(水) 03:09:06 ID:???

inline で横並びつくるよりも、float でつくったほうがいいかとおもいますよ

自分はliをfloatしないで、aのほうでfloatさせてます

liのほうはinlineにして,aをblockして

952 ：950：2005/09/14(水) 04:17:08 ID:???

>>951
それでも文字の前に「・」などがつきません。
<li>はinlineにして、aをblockにしてlist-style-position: outside;してますが。。

953 ：Name_Not_Found：2005/09/14(水) 04:31:58 ID:???

文字の前のは
noeしておいて、
画像とか出していしたほうがいいかもね

954 ：Name_Not_Found：2005/09/14(水) 04:39:52 ID:???

最近回答者のﾗﾍﾞﾙが下がったと感じるのは俺だけだろうか？

955 ：Name_Not_Found：2005/09/14(水) 04:42:54 ID:???

list-sytle-sype: none;

ですね↑のは

956 ：Name_Not_Found：2005/09/14(水) 06:48:23 ID:???

最近の質問は後出しで詳細を伝えてくるから答えにくいと思うのは俺だけだろうか？

957 ：Name_Not_Found：2005/09/14(水) 07:01:06 ID:???

>>954
そうお感じになられるのでしたら、
是非お答えしてあげて欲しいのですが…。

958 ：Name_Not_Found：2005/09/14(水) 07:07:06 ID:???

回答以外のレスをする回答者が増えすぎ

959 ：Name_Not_Found：2005/09/14(水) 07:08:44 ID:???

typoにtypoを重ねる・・

960 ：Name_Not_Found：2005/09/14(水) 07:49:25 ID:???

生半可な知識で教えるわりに、激しく偉そうだからな、タイプミスなどしても後に退けないんだよ

961 ：Name_Not_Found：2005/09/14(水) 09:18:21 ID:???

>>864-のような有意義な議論をしろ

962 ：Name_Not_Found：2005/09/14(水) 11:17:44 ID:???

(´-`).｡oO( 質問スレなんだけどなぁ・・・)

963 ：Name_Not_Found：2005/09/14(水) 11:35:39 ID:???

>>961
スレタイを１００回くらい声に出して読むんだ。

964 ：Name_Not_Found：2005/09/14(水) 11:37:14 ID:???

３５回くらいで息切れがした。

965 ：Name_Not_Found：2005/09/14(水) 11:45:55 ID:???

あのサンプル作るくらいの努力を見せろってことじゃね？

966 ：Name_Not_Found：2005/09/14(水) 12:25:22 ID:???

次スレッド移行したら、これも宜しくね。

■ ローカルルール等リンク先更新総合スレッド 14
http://qb5.2ch.net/test/read.cgi/operate/1116864899/l50

【まとめサイト】　http://web2ch.s31.xrea.com/?CSS

967 ：Name_Not_Found：2005/09/14(水) 16:54:26 ID:???

じゃあ質問ってほどでもないが……

中身が全体から30%の大きさのボックスに1pxのボーダをつけたい場合、
div.box {
border: 1px solid #000;
}
div.box div {
width: 30%;
}
ってしてるんだけど、もっとマークアップ的にスマートなやつないか？
div二回使ってると意味的に変な感じがする。気のせいかもしれないが。

968 ：967：2005/09/14(水) 16:57:42 ID:???

よく見直したら意味が全然違うorz
ボーダを含めて幅を全体から30%のボックスを作りたいってことだった。スマン

969 ：Name_Not_Found：2005/09/14(水) 18:08:23 ID:???

widthで余っている幅全てを指定ってできないんでしょうか？

970 ：Name_Not_Found：2005/09/14(水) 19:06:12 ID:???

>>967
基礎の基礎からやったほうがよくね？

971 ：967：2005/09/15(木) 17:54:21 ID:???

>>970
div.box {
width: 30%;
border: 1px solid #000;
}
ってやったら、「大抵boxの全体の幅は30% + 2pxになる（はず）」
で間違ってますか？
それで30%の幅の中に2pxのボーダが内包されるようにしたいんですが。

972 ：Name_Not_Found：2005/09/15(木) 18:03:50 ID:???

>>967
条件がよくわからんから詳しいことは云えないが

div. {
border: 1px solid #000;
margin: 0 35%;
}

っていう左右のmarginの和を７０％にするってのは駄目なのかね？

973 ：Name_Not_Found：2005/09/15(木) 20:18:02 ID:???

>>894
ありがと。
アンダースコアハックでIEにだけ適用させます

974 ：Name_Not_Found：2005/09/15(木) 21:55:20 ID:???

おまいらまだCSSとかやってんの

はっきり言って時代おくれ

975 ：Name_Not_Found：2005/09/15(木) 21:57:52 ID:???

>>974
最新って何？おせーて！

976 ：967：2005/09/15(木) 21:57:53 ID:???

>>972
まさにそれです。ありがとうございました。

977 ：Name_Not_Found：2005/09/15(木) 21:59:03 ID:???

>>974-975の組み合わせって、前にも見た希ガス(w

978 ：Name_Not_Found：2005/09/15(木) 22:01:47 ID:???

てか、TABLE使ってるの奴の方が時代遅れ

979 ：Name_Not_Found：2005/09/15(木) 22:04:25 ID:???

TABLEとCSS

比較になっていないよな・・・？

980 ：Name_Not_Found：2005/09/15(木) 22:18:24 ID:???

>>937-949
これだろ（ｗ

981 ：Name_Not_Found：2005/09/15(木) 22:19:05 ID:lijNasLq

<ul>
<li>ふんにゃかふんにゃか</li>
<li>ああああああああ</li>
</ul>

ul li{
list-style:none;
display:inline;
}

と、やってみましたが…リストが横並びになりませんでした。
floatを使うべきでしょうか？

982 ：Name_Not_Found：2005/09/15(木) 22:24:40 ID:???

>>981
FFでは横並びになってますが

983 ：Name_Not_Found：2005/09/15(木) 22:27:15 ID:???

ふんにゃか。ふんにゃか。

984 ：Name_Not_Found：2005/09/15(木) 22:27:37 ID:???

Final Fantasia ??

985 ：Name_Not_Found：2005/09/15(木) 22:32:21 ID:???

めろっさ。めろっさ。

986 ：Name_Not_Found：2005/09/15(木) 22:33:23 ID:???

ふぁんたふぁんた

987 ：981：2005/09/15(木) 22:34:54 ID:lijNasLq

>>982
本当ですか？自分も火狐です。
横幅固定したからかな？もう一回試してみます。

988 ：Name_Not_Found：2005/09/15(木) 22:36:26 ID:???

火狐とか言ってる時点でださいッｗｗ
変換大変だろーがよッｗｗｗｗ乙津ｗ

989 ：Name_Not_Found：2005/09/15(木) 22:37:39 ID:???

６代目火影は俺がなる

990 ：Name_Not_Found：2005/09/15(木) 22:40:42 ID:???

うわー　　こどもだぁーーー

991 ：981：2005/09/15(木) 22:43:25 ID:lijNasLq

横幅指定を外しましたが、駄目でした。orz

992 ：Name_Not_Found：2005/09/15(木) 22:45:21 ID:???

>>991
これだけのファイルで試してみ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<ul>
<li>ふんにゃかふんにゃか</li>
<li>ああああああああ</li>
</ul>
</body>
</html>

993 ：981：2005/09/15(木) 22:57:34 ID:lijNasLq

>>992
で、できました。ありがとうございます。
本当は…

ul li{
display:inline
}

なのに、間違えて…

ul{
display:inline
}

と、してしまいました。ソースそのままコピペすれば良かったのです。
反省してます、すみませんでした。

994 ：Name_Not_Found：2005/09/15(木) 23:00:50 ID:???

よくあるミスだね、気に死なさんな

995 ：Name_Not_Found：2005/09/15(木) 23:14:44 ID:???

＞死なさんな＞死なさんな
＞死なさんな＞死なさんな
＞死なさんな＞死なさんな

次スレﾄﾞｺｰ??

996 ：Name_Not_Found：2005/09/15(木) 23:15:12 ID:???

次スレッド移行したら、これも宜しくね。

■ ローカルルール等リンク先更新総合スレッド 14
http://qb5.2ch.net/test/read.cgi/operate/1116864899/l50

【まとめサイト】　http://web2ch.s31.xrea.com/?CSS

あと、スレッド・タイトルの「th」は、もう不要な気がする。

997 ：Name_Not_Found：2005/09/15(木) 23:17:26 ID:???

/* CSS・スタイルシート質問スレッド【paddin : 47】 */

998 ：981：2005/09/15(木) 23:19:51 ID:lijNasLq

今度はあれです！
Firefoxでは正常なのに、IEではfloatで横並べにした物が
ズレます。(下にきてしまいます)

ブラウザの幅も同じです。xml宣言外してみましたが駄目です。
どうしたらorz

999 ：Name_Not_Found：2005/09/15(木) 23:45:29 ID:RW8n0CsT

http://pc21.nikkeibp.co.jp/

1000 ：Name_Not_Found：2005/09/15(木) 23:47:12 ID:???

1000だったらバージョンうｐ

1001 ：１００１：Over 1000 Thread

このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。