/* CSS・スタイルシート質問スレッド【16th】 */
/* CSS・スタイルシート質問スレッド【16th】 */
- 1 名前：Name_Not_Found ：03/03/09 05:14 ID:???
- CSSに関する質問はこちらへどうぞ。 ※ ﾏﾀｰﾘ進行推奨 ※
■■■■■ 質問のやり方 ■■■■■
・まず解説サイト （かなりわかりやすい） で基礎を勉強してください。
・質問の前にはまず【FAQ】（>>5-6）を参照してください。
・【FAQ】でもわからなかった場合は、過去ログを検索しましょう。
WinIEの場合は、[Ctrl+F]で検索できます。
・IE などではまだ対応できていない要素などやバグが多数存在しますので、
【関連スレ】の「バグ辞典」に目を通しておきましょう。
初心者の疑問は大抵ここまでで解決します。
「環境を書け」とか「ソースは？」と求められたときは
応じるようにしましょう。回答が早く返るようにするためです。
OSやブラウザのヴァージョンについても必ず明記してください。
特にNetscapeは、4までと6以降でまったく別物です。
過去スレや関連リンクは>>2-10
- 2 名前：Name_Not_Found ：03/03/09 05:24 ID:???
- 【過去ログ】
http://mentai.2ch.net/hp/kako/974/974934062.html
http://natto.2ch.net/hp/kako/984/984113434.html
http://natto.2ch.net/hp/kako/992/992992981.html
http://pc.2ch.net/hp/kako/996/996828258.html
http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
http://pc2.2ch.net/test/read.cgi/hp/1041641395/
【前スレ】
http://pc2.2ch.net/test/read.cgi/hp/1045124732/
【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
http://pc2.2ch.net/test/read.cgi/hp/991666454/l50
・CSSでイケてるデザインサイト 9
http://pc2.2ch.net/test/read.cgi/hp/1046709491/l50
・* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50
・代替スタイルシートに萌え〜
http://pc2.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を懐かしむスレ 11th
http://pc2.2ch.net/test/read.cgi/hp/1045361055/l50
- 3 名前：Name_Not_Found ：03/03/09 05:25 ID:???
- 【仕様書】
・CSS1の仕様書の原文(英語)
http://www.w3.org/TR/REC-CSS1/
・CSS2の仕様書の原文(英語)
http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の翻訳(日本語)
http://www.y-adagio.com/public/standards/css1/toc.htm
・CSS2の仕様書の翻訳(日本語)
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html
【CSS検証】
・W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/
- 4 名前：Name_Not_Found ：03/03/09 05:28 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/
・とほほのスタイルシート入門
http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの 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
・CSS Laboratory対応表・一覧
http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
http://cssbug.tripod.co.jp/index.html
・Web標準普及プロジェクト（特に「HTML/CSSのよくある誤解・ミス」）
http://www.mozilla.gr.jp/standards/index.html
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集
http://webcafe.zive.net/~css/
・* CSS { イケてるスタイルを："作れ";} 発表所
http://strict.jp/~sappari/2ch/css.php
・ブラウザによる振り分け
http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
- 5 名前：Name_Not_Found ：03/03/09 05:29 ID:???
- 【FAQ】
Q: IEで見ると大丈夫なのに、Netscape6（or7）で見ると、横スクロールバーが出てしまうのですが……
A: WinIEのボックス・モデルが間違ってるからです。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width
widthプロパティは、要素の内容領域の幅を指定するプロパティですが、
Windows版 Internet Explorer は、ボーダー領域 + パディング領域 + 内容領域 の幅で
計算されてしまいます。
Macintosh版 Internet Explorer 5 や Netscape 6 では正しく計算されます。
Windows版 Inernet Explorer 6 の標準準拠モードでは、正しく計算されるようになりました。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html
Q: Netscape6(or7)では、text-alignにcenterを指定してやっても、table（や、その他のブロック要素）をセンタリングできません。IEではセンタリングされるのに……
A: IEの実装が間違っています。くわしくは下記のページをごらんください。
http://anslasax.net/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html
- 6 名前：Name_Not_Found ：03/03/09 05:29 ID:???
- Q: CSSで擬似フレームってどうやるの？
A: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/overflow.html
http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/files/frame.html
overflowを用いた擬似フレーム
http://www.fromdfj.net/html/overflow.html
Q: CSSで段組するには？
A: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと（ネスケ４でも崩れない段組みの実例）
http://village.infoweb.ne.jp/~fores/
Q: なんかMacIEやOperaでフロートの表示が崩れるみたいなんですけど？
A: floatさせる要素にはwidth指定が必須（img要素以外）。
これ、CSSの仕様書の決まりなんです。WinIEが勝手に補ってるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
- 7 名前：Name_Not_Found ：03/03/09 05:31 ID:???
- >>4に追加。ここもオススメ。
Web Site 作成支援 ＞ CSS 解説
http://msugai.fc2web.com/web/index.html
Academic HTML ::CSS2
http://www.tg.rim.or.jp/~hexane/ach/
- 8 名前：Name_Not_Found ：03/03/09 07:11 ID:???
- >>1
スレ見てない奴が立てんな
http://fake_lint.tripod.co.jp/css.html
【FAQ】 http://fake_lint.tripod.co.jp/css.html#faq
【過去ログ】 http://fake_lint.tripod.co.jp/css.html#log
【関連リンク】 http://fake_lint.tripod.co.jp/css.html#related
- 9 名前：Name_Not_Found ：03/03/09 07:29 ID:???
- テーブルについての質問です。
リンク表を作ろうと思い、以下のように記述しました。
.link { width: 80%;
margin: 2% 10%;
background-color: #fcfcfc; }
.dec1 { span: 1;
width: 3%;
background-color; #dceaed; }
.bannar { span: 1;
width: 26%;
align; center; }
.name { span: 1;
width: 24%
background-color: #dceaed;
color: #323232;
text-align: center; }
.prof { span:1
width: 24%; }
.dce2 { span:1
width: 3%;
background-color: #dceacd; }
- 10 名前：続きです ：03/03/09 07:32 ID:???
- これを<body>内に
<table class="link" border="1" summary="リンク表">
<colgroup class="dec1"></colgroup>
<colgroup class="bannar"></colgroup>
<colgroup class="name"></colgroup>
<colgroup class="prof"></colgroup>
<colgroup class="dce2"></colgroup>
・・・以下はリンクの説明。
と書きました。
ブラウザ（MacIE5.1.6&NN7.02）で確認すると、.link以外のスタイルが
反映されていません。自分でもいろいろ調べたのですが、分かりかねます。
どなたか教えてください。お願いします。
- 11 名前：Name_Not_Found ：03/03/09 08:10 ID:???
- >>9-10
>span: 1;
spanなんてプロパティーは存在しません。何がやりたいの？
- 12 名前：Name_Not_Found ：03/03/09 09:40 ID:???
- >>10
span は CSS のプロパティじゃなくて
colgroup/col タグ内に書く"属性"ですよ。
……でいいんだよね、多分？
と言うか、colgroup の中に col が一つも無いんだったら
全部 col でいいんじゃ？ 省略してるだけ？
- 13 名前：Name_Not_Found ：03/03/09 10:38 ID:???
- >>9
.prof { span:1
.dce2 { span:1
「;」の区切りがないから認識されない
- 14 名前：Name_Not_Found ：03/03/09 10:55 ID:???
- >>13
ネタですよね？
- 15 名前：Name_Not_Found ：03/03/09 11:54 ID:???
- .bannerのalignてのもないだろ。
text-alignの間違い？
- 16 名前：Name_Not_Found ：03/03/09 13:08 ID:???
- >>8
無事にすれた照れたんだからいいんじゃ？
スレに張られたほうが参照する時に便利だし（藁
>>1 乙
- 17 名前：Name_Not_Found ：03/03/09 13:12 ID:???
- http://pc2.2ch.net/test/read.cgi/hp/1045124732/964 （前スレ）です。
この際だから http://pc2.2ch.net/test/read.cgi/hp/1045124732/965 の条件はもういいです（ｗ
http://pc2.2ch.net/test/read.cgi/hp/1045124732/968
という方法を教えてもらったんですが、
まさにその方法で行き詰っていました。
１と３を囲むブロックをどう作れというんですか？
- 18 名前：Name_Not_Found ：03/03/09 13:13 ID:???
- >>9-10
とりあえず、
:と;を間違えてるところが何箇所かある。
spanなんてプロパティはない。
alignなんてプロパティはない。
というか、CSSはHTMLの属性を肩代わりするものだと勘違いしてないか。
そもそも、tdやthはcolgroupの子要素ではないから、スタイルは継承されない。
ついでに、tableのborder属性は非推奨。それ使うくらいだったらCSS使わなくていい。
あと、tableのsummary属性はもっと詳しく書くべき。詳しく書けないならそもそも書く必要ない。
というか、>>4みて勉強し直してからまた来てください。
- 19 名前：Name_Not_Found ：03/03/09 13:13 ID:???
- >>7
http://msugai.fc2web.com/web/CSS/visudet.html#box
>パッディング領域を含めた要素は、この要素の子要素にとってのコンテナブロック (containing block) と呼ばれます。
そんな単純ではありません。
http://msugai.fc2web.com/web/CSS/display.html#position の絶対配置の例を参照。
>【注意】 MS I.E.5.5 では、 'absolute' で参照されるコンテナブロックが BODY 要素が配置するコンテナブロックに解釈されるようです。従って、どの階層のボックスに対しても、 BODY 要素の左上すみが原点として計算されます。
祖先に位置指定されている要素が存在しない場合は、
ルート要素の内容辺がコンテナブロックになります。
http://msugai.fc2web.com/web/CSS/box.html#margin
> <%> 元になる量 (100%) は親要素のパッディング領域を含めた幅（コンテナブロック）の長さです。
ルートではなく、かつ絶対配置でもない要素の場合、
最も近い祖先ブロックレベル要素の内容辺がコンテナブロックになります。
このサイトのリファレンスも良質な部類だが、
著者はコンテナブロックの概念を理解していない。
- 20 名前：Name_Not_Found ：03/03/09 13:23 ID:???
- 前スレ1000行っちゃった？
- 21 名前：Name_Not_Found ：03/03/09 13:25 ID:???
- 行!?
- 22 名前：Name_Not_Found ：03/03/09 13:40 ID:???
- >>18
>tableのborder属性は非推奨。
>それ使うくらいだったらCSS使わなくていい。
何処に非推奨なんて書いてありますか。
table要素に border属性を付加しても Strict になりますが。
border属性を付加しておかないと、
CSS が無効な場合、表が読みにくくて困ります。
寧ろ表を示す上では、重要な属性では。
- 23 名前：Name_Not_Found ：03/03/09 15:09 ID:???
- >>22
分かったようなこと言うなよ。
もう一回勉強しなおせ
- 24 名前：Name_Not_Found ：03/03/09 15:12 ID:???
- 恥の上塗りですか ぷぷぷ
- 25 名前：Name_Not_Found ：03/03/09 15:17 ID:???
- >>22
<table>で記述した時点ですでに「表」なんだから、border属性は不要。
論理要素で見た目の変化がないものなんていっぱいあるでしょ。
- 26 名前：Name_Not_Found ：03/03/09 15:28 ID:???
- border 属性は非推奨では あ り ま せ ん よ、電波さん？うぷぷぷ
- 27 名前：Name_Not_Found ：03/03/09 15:32 ID:???
- きもいよ↑。
「非推奨」というのは彼(女)から見て、などと解釈してみるテスト
- 28 名前：Name_Not_Found ：03/03/09 15:33 ID:???
- ISO/XHTML Basic なら使えないけど、それと勘違いしてる？
どちらにせよ、table に border を使うか否かは各個人の判断で
Strict スレとかの話題っぽいんだけど。
- 29 名前：Name_Not_Found ：03/03/09 15:36 ID:???
- >>27
必死だな（藁
- 30 名前：Name_Not_Found ：03/03/09 16:02 ID:???
- 新スレから変な話題で盛り上げるのはよそうさ。
>>29
落ち着け。
- 31 名前：Name_Not_Found ：03/03/09 16:19 ID:???
- ----------------------------------------------------------------
↑
アホ
次どぞ
- 32 名前：Name_Not_Found ：03/03/09 19:15 ID:???
- ∧ ∧ ／￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
( ・３・) ＜ ぼるじょあがムーンウォークで3ｹﾞｯﾄｫｰ!!
./ つ つ ＼＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
〜（＿⌒ヽ (´⌒(´
.)ノ ｀J≡≡≡(´⌒;;;≡≡≡
(´⌒(´⌒;;
ｽﾞｻﾞｰｰｰｰｰｯ
- 33 名前：Name_Not_Found ：03/03/09 19:25 ID:???
- >>32
難しい質問ですね。
- 34 名前：Name_Not_Found ：03/03/09 20:02 ID:???
- >>17
div.one {
float: left;
width: 40%;
}
div.two {
float: right;
width: 40%;
}
div.three {
float: left;
width: 40%;
}
div.four {
clear: left;
width: 100%;
}
こんなんじゃ駄目？
- 35 名前：Name_Not_Found ：03/03/09 20:44 ID:gdzJaKQS
- 以前、どこぞのスレで聞いたのですが・・
--------------------------------------------------------------
|任意の文字列|
--------------
と、CSSで行うにはどうすればいいんでしょうか？
既に答えがあった場合は、大変申し訳ありません。
その時は、ソースの提示をしていただけると大変ありがたいです。
- 36 名前：Name_Not_Found ：03/03/09 21:27 ID:???
- >>35
どうしたいのかサパーリわからん
- 37 名前：Name_Not_Found ：03/03/09 21:53 ID:???
- >>35
div { border-top:1px solid #000000 }
span { border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000; }
<div><span>任意の文字列</span></div>
divとspanでテキトーにｗ
- 38 名前：Name_Not_Found ：03/03/09 21:58 ID:qopnASLk
- HTMLをHtmllintとAnHTTPdでローカルチェックできるみたいに
スタイルシートを簡単にローカルでチェックする方法ｔってありますか？
- 39 名前：Name_Not_Found ：03/03/09 22:00 ID:???
- >>38
http://jigsaw.w3.org/css-validator/
- 40 名前：Name_Not_Found ：03/03/09 22:05 ID:???
- >>38
http://homepage2.nifty.com/hobbit/html/cssvalid.html
漏れは、このページを参考にしてローカルで CSS Validator 使ってる。
- 41 名前：38 ：03/03/09 22:15 ID:???
- >>39
どもです。でもダウンロード押しても、なんかよくわからんファイルしかDLできませ
んでした（TT
>>40
なんかいろいろ入れるのですね。とりあえず、みながらやってみます。
ありがとうございました。
- 42 名前：9-10 ：03/03/09 22:20 ID:???
- 朝に書き込みした9-10です。スタイルを書き直してきました。
.link { width: 80%;
margin: 2% 10%;
border-style: solid;
border-color: #cccccc;
background-color: #dceaed }
.dec1 { width: 3%;
background-color: #508282 }
.bannar { width: 26%;
text-align: center;
background-color: #fcfcfc }
.name { width: 24%;
text-align: center;
background-color: #fcfcfc }
.prof { width: 24%;
background-color: #fcfcfc }
.dce2 { width: 3%;
background-color: #508282 }
以上ここまでがスタイルの記述です。
- 43 名前：9-10 ：03/03/09 22:27 ID:???
- これを<body>内に、このように書き直しました。
<table border="2" cellspacing="5" class="link" summary="リンク表">
<col span="1" class="dec1">
<col span="1" class="bannar">
<col span="1" class="name">
<col span="1" class="prof">
<col span="1" class="dce2">
<tr>
・・・以下リンクの表。
ブラウザチェックをMacIE5.16&MacNN7.01で行ったところ、
IEはtext-align以外は有効に表示されました。
NNは.linkのみ有効で<col>内のスタイルは総て無効でした。
スレ案内に書いてある解説サイトをいろいろ見て勉強したつもりなんですが、ダメです。
しつこくてすいません、どなたか教えてください。
自分のあまりのバカ度に、うんざりしていますけれど頑張ります。
リファレンス本も買いに行きます。
すみませんが、重ねてお願い申し上げます。教えて君で本当にすいません。
- 44 名前：Name_Not_Found ：03/03/09 22:30 ID:???
- >>43
colgroup使ってみれ
- 45 名前：Name_Not_Found ：03/03/09 23:12 ID:???
- >>44
「ごく簡単なHTMLの説明」によれば――
http://www.kanzaki.com/docs/html/htminfo16.html#colgr
グループに含まれる列が全て同じ属性である場合は、col要素なしで直接colgroupに属性を設定することもできます。逆に、colgroup要素なしで直接col要素を記述することもできます。
- 46 名前：Name_Not_Found ：03/03/09 23:14 ID:???
- >>43
CSSよりHTMLの問題って可能性はないか？
HTML-Lintでチェックするか、<tr>以下のHTMLソースをさらすか、してみてくれ。
- 47 名前：Name_Not_Found ：03/03/10 01:46 ID:???
- NNってcol要素に対応してなかったのでは…？
- 48 名前：Name_Not_Found ：03/03/10 01:53 ID:???
- Netscape4ではなく7ですよ？ >>47
- 49 名前：Name_Not_Found ：03/03/10 02:48 ID:???
- 立て直しました。こちらは削除依頼墮出しておきます。
本スレッドは下記ってことで。
/* CSS・スタイルシート質問スレッド【16th】 */
http://pc2.2ch.net/test/read.cgi/hp/1047152247/
- 50 名前：Name_Not_Found ：03/03/10 02:48 ID:???
- 本すれあげ
- 51 名前：Name_Not_Found ：03/03/10 02:54 ID:???
- >>49は騙り。默殺して下さい。
- 52 名前：Name_Not_Found ：03/03/10 03:28 ID:???
- なんでわざわざ立て直したのさ？
- 53 名前：Name_Not_Found ：03/03/10 03:40 ID:???
- あっちを立てたのはアンチCSSの人でないの？
↓これだもの。
1 名前：ＩＥとＮＮで見れてテーブルレイアウトで充分[重箱の隅つついてばかじゃね？] 投稿日：03/03/09 04:37 ID:???
- 54 名前：Name_Not_Found ：03/03/10 03:48 ID:???
- 厨房に構わず速やかに立て直したのには感心した
- 55 名前：Name_Not_Found ：03/03/10 03:57 ID:???
- >17
段落1には float:left
段落2には float:right
段落3には clear:leftとfloat:left
段落4には clear:both
で、どうよ。
- 56 名前：55 ：03/03/10 04:01 ID:???
- 説明が足りないかもしれないので…
段落1を左寄せにする。
段落2を右寄せにする。
段落3は前までの左寄せを解除（1と2の間に入るのを防ぐ）、左寄せにする。
段落4は左寄せも右寄せも解除。
段落1〜3まではwidth必須です。
- 57 名前：Name_Not_Found ：03/03/10 06:21 ID:FK1bJZ5y
- DIVブロック内に位置を指定して
背景画像を複数入れたいのですが、可能でしょうか。
1つしかだめでしょうか。
- 58 名前：Name_Not_Found ：03/03/10 07:47 ID:???
- >>57
これもＦＡＱだな……。
background-imageは一要素に一つだけ、だ。
- 59 名前：Name_Not_Found ：03/03/10 08:10 ID:???
- div内に複数の要素を配置して、
そのそれぞれに背景画像を入れることならできますな。
- 60 名前：Name_Not_Found ：03/03/10 10:24 ID:???
- 立て直しました。こちらは削除依頼墮出しておきます。
本スレッドは下記ってことで。
/* CSS・スタイルシート質問スレッド【16th】 */
http://pc2.2ch.net/test/read.cgi/hp/1047152247/
- 61 名前：9-10-42-43 ：03/03/10 11:55 ID:???
- >>46さん
HTML-Lintでチェックもしたのですが、特に問題点は見あたりませんでした。
一応<tr>からのソースを書きます。
<tr>
<td></td>
<td><a href="http://www.***.com/"><img src="image/***.gif" alt="*****" width="200" height="40" border="0"></a></td>
<td>***さん<br>****</td>
<td>*****</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="http://www.***.ne.jp/****/"><img src="image/***.gif" alt="*****" width="200" height="40" border="0"></a></td>
<td>***さん<br>****</td>
<td>*****</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="http://www.****.ne.jp/****/"><img src="image/****.jpg" alt="****" width="200" height="40" border="0"></a></td>
<td>***さん<br>****</td>
<td>****</td>
<td></td>
</tr>
<tr>
<td></td>
- 62 名前：9-10-42-43 ：03/03/10 11:57 ID:???
- 続きです。
<td><a href="http://****jp/*****/"><img src="image/*****.gif" alt="****" width="200" height="40" border="0"></a></td>
<td>****さん<br> ******</td>
<td>******</td>
<td></td>
</tr>
<tr>
<td></td>
<td><a href="http://www.****.ne.jp/****/">**** </a></td>
<td>******<br>*******</td>
<td>*******</td>
<td></td>
</tr>
</table>
以上なんですが、HTMLの記述でおかしいところがあったら教えてください。
よろしくお願いします。本当にすいません。見苦しくてごめんなさい。
レスをくれた方々、感謝しています。
- 63 名前：Name_Not_Found ：03/03/10 12:05 ID:???
- >>60 しつこいな。
>>61-62
<col>でなく、驗しに各tdに直にclassを振ってみては。
それでも效かなかったらお宅のNetscape 7がヘンだってことになります。
- 64 名前：Name_Not_Found ：03/03/10 12:17 ID:???
- img{border:none;}
- 65 名前：Name_Not_Found ：03/03/10 12:40 ID:???
- NN7やMozillaでは，col や colgroup に指定したCSSで縦列のスタイルを
一括指定することは今のところできません．残念ですが．
- 66 名前：Name_Not_Found ：03/03/10 12:42 ID:???
- >>60
そっちは削除依頼済み
http://qb.2ch.net/test/read.cgi/saku/1027465273/139-140
139=140の気がしないでもないがな。
- 67 名前：Name_Not_Found ：03/03/10 12:43 ID:???
- >>61-62
とりあえず、こんなところでどう？
.link { width: 80%; margin: 2% 10%; border-width : 2px; border-style: solid; border-color: #cccccc; background-color: #dceaed; border-spacing : 5px; }
.link td { background-color : #fcfcfc; text-align : center; width : 24%; }
.bannar { width: 26%; border-left : 1em solid #508282; }
.prof { text-align : left; border-right : 1em solid #508282; }
<table class="link" summary="リンク表">
<tbody>
<tr>
<td class="bannar"><a href="***"><img src="***.gif" alt="***" width="200" height="40" border="0"></a></td>
<td>***さん<br>****</td>
<td class="prof">*****</td>
</tr>
<tr>
<td class="bannar"><a href="***"><img src="***.gif" alt="***" width="200" height="40" border="0"></a></td>
<td>***さん<br>****</td>
<td class="prof">*****</td>
</tr>
<tr>
<td class="bannar"><a href="***">****</a></td>
<td>******<br>*******</td>
<td class="prof">*******</td>
</tr>
</tbody>
</table>
- 68 名前：Name_Not_Found ：03/03/10 12:54 ID:???
- >>67
>>64の意見も聞いてやれ
- 69 名前：67 ：03/03/10 12:54 ID:???
- >>67
修正のポイントも説明しとく。
まず、>>63も言ってるように、class属性を各tdにふり直した。
それから、tableの見栄えに関する属性を削除し、すべてCSSで
指定するようにした。
また、指定の共通している部分はまとめてtdに指定し、指定の
異なる部分だけ個別に指定することにした。これによって、
nameというclassは（CSSのセレクタとしては）不要になったので
削除した。
また、dec1とdce2も、飾りのための不要なセルとみなして削除し、
bannarとprofのborderとして再現してみた。
ついでに言っておくと、"リンク表"というのは、summary属性
じゃなくてcaption要素として明記した方がいいかもしれない。
あと、バナーのないサイトの場合も考えて、bannarという
クラス名もsite-nameとかに替えた方がいいかも。
最後に、HTMLとかCSSとは直接関係ないけど、bannarというのは
スペルが間違ってる。正しくはbanner。
- 70 名前：Name_Not_Found ：03/03/10 12:55 ID:???
- >>9=10=42=43=61
スレ違いはなはだしくて悪いが
summary="各行にバナー(サイト名)、作者、プロフィールを示したリンク表です。"
ぐらいにしたほうが良い。
- 71 名前：Name_Not_Found ：03/03/10 12:57 ID:???
- >>65
>NN7やMozillaでは，col や colgroup に指定したCSSで縦列のスタイルを
>一括指定することは今のところできません．残念ですが．
へえっ、MozillaがIEよりCSS対応度で劣る場合もあるんだ？
- 72 名前：Name_Not_Found ：03/03/10 13:00 ID:???
- 結局サマリーて何のために有るん？
- 73 名前：Name_Not_Found ：03/03/10 13:00 ID:???
- >>71
少し人生に希望が湧いたか？
- 74 名前：67 ：03/03/10 13:03 ID:???
- >>68
ああ、ごめん、忘れてた。
それもつけくわえてください。>>61-62
でもって、HTMLの方のborder="0"を消した方がいいかも。
あともうひとつ、質問するのにソースを例示するときは、***じゃなくて、
「サイト名」とか「作者」とか「サイトの説明」とか具体的に書いた方が
わかりやすいよ。
- 75 名前：Name_Not_Found ：03/03/10 13:06 ID:???
- 意味ワカラン。>>73
まあNetscape 6から、テーブル方面に色々バグがあったからなあ。
border-collapseとか未だに対応しないし。
- 76 名前：Name_Not_Found ：03/03/10 14:00 ID:???
- NN７ならcollapseは対応してるような
- 77 名前：Name_Not_Found ：03/03/10 14:09 ID:???
- >>72
要約
音声対応UAとかで「この表は〜〜〜〜です。」みたいにかいつまんで説明してもらえたらいいなあとかなんとか
- 78 名前：Name_Not_Found ：03/03/10 14:32 ID:???
- >>72 >>77
http://www.kanzaki.com/docs/html/tbl-access.html#summary-atr
IBM ホームページリーダーは、summary属性を読み上げるそうです。
- 79 名前：Name_Not_Found ：03/03/10 14:54 ID:???
- スタイルシート辞典 安川英明 著 アンク 監修 (ISBN4-7981-0020-X)
http://www.shoeisha.com/book/pc/dic/
著者は絶対に仕様書を読んでいませんし、理解していません。
絶対に参考にしてはならない本の一つですので、ご注意を。
この本持っている人いますかァ？ 漏れは何故か持っている。
のけぞった所の一例。
>行送りを調整したい line-height:★;
>パーセント値を表す数値＋％、比率
>親要素の行間に対しての相対的な指定です。
○嵜氏や、ば○ら氏みたいに、斬ってみたいと思ったり【謎】
- 80 名前：Name_Not_Found ：03/03/10 15:05 ID:???
- >>58>>59
ありがとうございます。要素を複数使うことにします。
- 81 名前：Name_Not_Found ：03/03/10 15:05 ID:???
- >>79
スレ違い気味だけど、
http://www.shoeisha.com/book/pc/dic/ccs.asp
~~~~~
カードキャプターさ○ら？
- 82 名前：Name_Not_Found ：03/03/10 17:08 ID:V2vOEG+B
- <font color="#FF0000">●</font>テキスト<br>
<font color="#FF0000">●</font>テキスト<br>
<font color="#FF0000">●</font>テキスト<br>
こんな感じのHTMLをcssのlist-styleを使って書くことは出来ますでしょうか？
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
と書くだけで、上のような赤丸に付きのリストになると嬉しいです。
- 83 名前：Name_Not_Found ：03/03/10 17:11 ID:???
- 調べてから聞け
- 84 名前：Name_Not_Found ：03/03/10 17:15 ID:???
- >>82
<font color="#FF0000">●</font>
これをキャプチャしてgif画像にして
list-style-image : url("画像ファイル名")
- 85 名前：Name_Not_Found ：03/03/10 17:17 ID:???
- しかし、list-style-color というプロパティがなぜ定義されなかったのかなぁ。。。
脱線スマン
- 86 名前：Name_Not_Found ：03/03/10 17:23 ID:V2vOEG+B
- >>84
やっぱり、list-style-image使うしかないっすか？
CSSの便利さに目覚めて今いろいろ調べながら書いてはいるんですが、
何が出来るかはいろんなサイトで調べられるけど、何が出来ないのかは
なかなか分からないっすよ〜。>83
あと、UAごとの解釈のくせとか...このスレの職人のように経験つみたいっす。
- 87 名前：Name_Not_Found ：03/03/10 17:24 ID:???
- >>82
list-style-type: circle
でいいとおもうが
- 88 名前：Name_Not_Found ：03/03/10 17:27 ID:???
- >>85
細かいことは「display: marker」を使えということだろう。
実装している UA が存在しないのが残念だけど。
- 89 名前：Name_Not_Found ：03/03/10 17:30 ID:???
- >>88
display: marker 自体がCSS2.1で廃止され、将来は ::marker擬似クラスに
取って代わられるという時点で萎え萎えなわけですが。。。
再脱線スマン
- 90 名前：Name_Not_Found ：03/03/10 18:31 ID:XhI66yDN
- <html>
<head>
<style type="text/css">
<!--
.d100pix{width:100px;height:40px;background-color:red;}
.d200pix{width:200px;height:40px;background-color:blue;}
.d100per{width:100%;height:40px;background-color:green;}
-->
</style>
</head>
<body>
<div class="d100pix">
<div class="d100per"></div>
<div class="d200pix"></div>
<div class="d100per"></div>
</div>
</body>
</html>
というコードで、緑色の100%指定したDIV要素の右端が
中段の400px指定したDIV要素の右端と揃わなくて困っています。
入れ子になっているDIV要素の幅の方が大きい場合、それによって
伸びた差分(赤色部分)はどのような扱いになるのかもよく分かりません。
「.d100per」のスタイルシートの指定を変えるだけで100%指定した
緑色のDIV要素が赤い部分を覆い隠すようにめいっぱい表示するように
したい場合はどうすればいいのでしょうか？
- 91 名前：Name_Not_Found ：03/03/10 19:12 ID:???
- >>90
ネスケ7やOperaのように、d200pixがd100pixからはみ出し、
赤いd100pxは広がらないのがたぶん正しい。
WinIEのようにd100pxが広がる表示は間違い。たぶん。
緑のd100perの幅は、どうしたって親の幅と同じになる。
JavaScriptでも使って調整するしかないでしょう。
- 92 名前：Name_Not_Found ：03/03/10 19:29 ID:???
- 多分じゃなくて、完全に WinIE の実装の間違い。
屡々このスレでも挙がるけど「oveflow: visible」の実装が間違ってる。
heightプロパティの注意点〜内容が大きい場合
http://www.mozilla.gr.jp/standards/webtips0020.html
>>79 の本とか、間違ったことを教えている香具師が居て困る。
>領域指定を無視して高さや幅を調整し、収まりきらないコンテンツも表示する
完全に WinIE の実装を基に本を書いている。
- 93 名前：Name_Not_Found ：03/03/10 19:44 ID:1u9SAtYl
- 質問させていただきます。
div.foo { border: 1px solid #1b1b1b ;}
として、局所的に
<div class="foo" style="border-top: 0;">
とすると、IE6.0/Mozilla1.0では正しく表示されるのですが、
Opera6.0ではうまくいきません。
これはOperaの仕様でしょうか?
- 94 名前：Name_Not_Found ：03/03/10 19:59 ID:???
- >>93
手元に6.0がないから何とも言えないけど
<div class="foo" style="border-top-width: 0;">bar</div>
にしてもだめ？
- 95 名前：93 ：03/03/10 20:08 ID:???
- えーと、謝ります。すみませんでした。
属性値後の" が抜けておりました。申し訳ない。
しかし、これは補完するMozillaが賢いのか、解釈しないOperaが賢いのか。。
ともかく、スレ汚し申し訳ありませんでした。
- 96 名前：90 ：03/03/10 20:38 ID:XhI66yDN
- >>91 >>92
ありがとうございました。元のコードのスタイルシートの
「.d100pix」に「position:relative」を加えるとNN7.02でも
親要素の赤い背景色が見えるようになります。Opera7.02では
見えません。Operaが正しく表示しているということになるので
しょうか？
- 97 名前：Name_Not_Found ：03/03/10 21:42 ID:???
- >>96
ほんとだ。
position: relativeでも計算方法は同じなはずなので、
ネスケの動作はなぞですな。
- 98 名前：61 ：03/03/10 22:39 ID:???
- レスを下さった皆さん、本当に参考になりました。
これから修正したいと思います。
たくさんの御指導をムダにしないように頑張ります。
正直「ここはおめえみたいな分かってない奴のくるところじゃねぇ、ｶｴﾚ」くらい
言われるだろうなぁと思ってたんです。で、自分でも検索いろいろしてやった
のですが、本当に分からなかったので質問してみました。
質問して良かったです。
いずれは自分も、答えてあげられる側になれるように精進します。
本当にありがとうございました。
- 99 名前：Name_Not_Found ：03/03/10 23:00 ID:???
- >>98
ガンガレ
- 100 名前：Name_Not_Found ：03/03/10 23:08 ID:???
- >>96-97
↓これと關係あるかな？
http://pc2.2ch.net/test/read.cgi/hp/991666454/683
【IE6】
http://cssbug.tripod.co.jp/detail/winie/b079.html
フロートの後続フロー制御を設定したbr要素が親要素に包含されない
<div style="border:2px solid red;">
<div style="float:left; width:50px; height:50px; background:aqua;">Float</div>
<br style="clear:left;">
</div>
これへの対処法。
親divに値がauto以外のwidth（heightでなく）を指定してやるとなぜかうまく包含してくれる。
しかも<br style="clear:left;">は要らない。
ちなみにN6の場合、親divにposition:relative;を指定してやると
やはり<br style="clear:left;">無しにfloatさせた子要素まで包含する。
Opera6だけはどうしてもclearさせる要素が後続しないと包含してくれぬ。
- 101 名前：Name_Not_Found ：03/03/11 00:21 ID:Yc5kfUMQ
- 質問ですが
object{
overflow:hidden;
border:0px;
}
<object data="hoge.html" type="text/html">
hogehoge
</object>
という感じで、objectタグを使ってhtmlファイルを埋め込もうとしているんですが
ネットスケープではスクロールバーがでなくてフレームの枠線（？）みたいなのも
消えたのですが、IEではどうあがいてもスクロールバーも消えず、フレームの
枠線（？）みたいのも表示されてしまいます。
これは、CSSの書き方が不味いからでしょうか、
それともIEでは実装されてないとかでしょうか？
- 102 名前：101 ：03/03/11 00:30 ID:Yc5kfUMQ
- すいません、書き忘れました。
IEのヴァージョンは6
ネットスケープは7
です。
- 103 名前：Name_Not_Found ：03/03/11 00:41 ID:???
- >>101
埋め込み先のHTMLで、
html {
overflow:hidden;
border:0px;
}
としてやればいい。
- 104 名前：Name_Not_Found ：03/03/11 01:10 ID:???
- >>103
まんこっていいですよね？
あの臭い、形、触り心地といい。
そこから流れてくる、愛液って奴ですか？
美味しいんですよね。じゅるじゅるじゅるじゅる吸っては舐め、吸っては舐め、
でも永遠に汁は止まらない。面白いですよね。
人間の半分がまんこが付いてるんですよね。いい時代に生まれたと思います。
まんこって見てて飽きないんですよね。
男なら本来玉袋が付いているところに、まんこが付いているんですよ。
不思議ですよね。面白いですね。
まんこを触るとその人は悦ぶんですよね。我慢しきれず声まで発声して。
まんこをベロベロ舐めても悦ぶんですよね。
終いには「私のまんこを見て！触って！舐めて！あーーー！！」なんて言う始末ですからね。
そしてまんこにちんこを入れると、これまた悦ぶんですよね。
「もっとー！もっとー！ああー気持ちいいー！！」なんて言いながらね。面白いですね。
まんこほど面白いものも少ないですよ。
別の穴からはおしっこは出るし、触ってるとネバネバした液が出てくるし。
これからもまんこのために生きていこうと思いますよ。
- 105 名前：101 ：03/03/11 02:03 ID:???
- >>103
ありがとうございます。
無事できました。
埋め込み先のhtmlのCSSで指定するなんて思いもつきませんでした。
重ね重ねありがとうでした。
- 106 名前：質問です ：03/03/11 11:01 ID:pJCR6tgV
- div.menu{
float : left;
width : 23%;
margin : 0;
padding : 0;
}
div.menu ul.guaid{
position: fixed;
width:90%;
overflow:auto;
height:20em;
margin : 1em;
padding : 1em auto;
}
div.contents{
border-left : solid 1px #fc6;
border-right : solid 1px #fc6;
float : left;
width : 73%;
margin : 0;
padding : 0 0 1em 0;
}
として段組をさせたのですが、class="menu"の中のulが
うまくいきません。
IE6だとwidthがclass="menu"から算出されるのですが
Mozzila1.3aだとbodyから、Opra７だとmarginが微妙です。
なんかいい手はありませんか？
- 107 名前：Name_Not_Found ：03/03/11 11:18 ID:???
- >>106 何がどう「うまくいきません」なのか判らない。
HTMLソースも出して、もう少し他者に通じる説明をして。
- 108 名前：Name_Not_Found ：03/03/11 12:54 ID:???
- （´-｀）.｡oO(guaidってなんだろう……
- 109 名前：Name_Not_Found ：03/03/11 13:24 ID:???
- >>108
ガイドに根性入れたもの
- 110 名前：Name_Not_Found ：03/03/11 13:55 ID:???
- >>109
ぐぅあいど！
- 111 名前：Name_Not_Found ：03/03/11 14:39 ID:???
- #menu{ width:20%; float:left; height:1.2em;}
#right{ float:left; width:65%; }
<div id="menu"></div>
<div id="right"></div>
こんな感じにして右側のdivにいろいろ詰め込んでくと、窓を小さくしたときにrightがmenuの下に行ってしまいます。
これを防ぐ方法はありませんか？
- 112 名前：Name_Not_Found ：03/03/11 14:46 ID:???
- >>111
div#menuとdiv#rightとをさらにdivで括り、その親divにwidthを指定する、とか。
……かくて人はdiv病になりゆくものなり。
でなきゃ、floatやめてpositionにする。
- 113 名前：Name_Not_Found ：03/03/11 16:06 ID:???
- >>111
floatだから幅が狭くなったら周りこみが解除されるのは当たり前。
それが嫌ならpositionに汁。
- 114 名前：Name_Not_Found ：03/03/11 16:18 ID:???
- >>112-113
ﾚｽｻﾝｸｽ
絶対指定を避けたpositionに慣れてないから難しくて難しくて・・・(;´Д｀)
まだ公開前の段階なんでページ全体を見直してみまつ。
そもそもサイトメニューとBBSをくっつける事自体無謀か・・・
- 115 名前：Name_Not_Found ：03/03/11 16:42 ID:???
- >>111
これで、どうだ？
#menu{ width:20%; float:left; height:1.2em;}
#right{ float:right; width:65%; }
- 116 名前：Name_Not_Found ：03/03/11 17:43 ID:???
- >>115
そうすると右側が窓の右にくっつくわけで。（しかも窓小さくしたときの動作を防ぐわけでもなし）
- 117 名前：Name_Not_Found ：03/03/11 17:51 ID:???
- >>111
これで、いいはず。
#menu {width:20%; float:left; height:1.2em;}
#right {margin-left:22.5%; width:65%; }
- 118 名前：Name_Not_Found ：03/03/11 20:22 ID:???
- floatにしてる時点で（ｒｙ
- 119 名前：Name_Not_Found ：03/03/11 21:16 ID:???
- 要を言うと
.＿＿
|＿＿|＿
| | |
|＿| |
|＿＿|
これがトップで
.＿_＿＿
| | |
| | |
|＿| |
|＿＿|
これがコンテンツやリンクなどのページになるようにしたいんです。
んで左の縦長のやつだけでも横幅が同じであって欲しい・・・と。
各々の欄でフォントサイズが変わるからposition使いにくくて・・・
- 120 名前：106 ：03/03/11 21:57 ID:???
- 言葉が足りませんでした。補足です。
menuの中にoverflowのスクロールバーを出させたいのですが、
・IEの場合は希望通り表示される（もちろんfixedは期待してません）
・moziilaはbodyから幅を算出し、.contentsのところにバーが出てします。
・Opera7の話はよく分からないので取り下げます
スタイルは
.menu{ float : left; width : 23%; margin : 0; padding : 0; }
.menu .guaid{ position: fixed; width:90%; overflow:auto; height:20em;
margin : 1em; padding : 1em auto; }
div.contents{ border-left : solid 1px #fc6; border-right : solid 1px #fc6;
float : left; width : 73%; margin : 0; padding : 0 0 1em 0; }
- 121 名前：106 ：03/03/11 22:06 ID:pJCR6tgV
- htmlはつぎのようにしてます
<body>
<h1>hogehoge</h1>
<div class="menu">
<h2>めぬー</h2>
<ul class="guide">
<li>a</li>
<li>b</li>
</ul></div>
<div class="contents">
<h2>ほげほえ</h2>
<p>ほえほえ</p>
</div>
</body>
#guideの間違いですって、また間違えてる
#これでわかってもらえるといいのですが
- 122 名前：Name_Not_Found ：03/03/11 22:20 ID:???
- >>104
overflow:hidden;
だと大きなま○こがすべて見えないぢゃないか!
せめて overflow:scroll; にしる!
それに border:0px は萎える。スジぐらい入ってくれないと逝けません。
- 123 名前：61 ：03/03/11 22:32 ID:???
- 気合いを入れて勉強したいと思って、リファレンスブック買いに行きました。
>>79さんの本があったのですが、買わない方がいいんですか？
結局立ち読みだけして帰ってきました。
みなさんのおすすめの本があったら教えてください。
サイトで参照しながらでも良いのですが、手元に紙媒体があった方が良いので。
プリンタ持ってないんです。
- 124 名前：Name_Not_Found ：03/03/11 22:34 ID:???
- >>123
役に立つ書籍は？
http://pc2.2ch.net/test/read.cgi/hp/992793435/
- 125 名前：