Web製作 - 2ch-Libraryに戻る
元のスレッド

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

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

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

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

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

http://web2ch.s31.xrea.com:8080/?CSS
【FAQ】 http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com:8080/?CSSRelated

2Name_Not_Found :03/12/22 00:01 ID:EeFatYy0
【過去ログ】
 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/hp/kako/1041/10416/1041641395.html
 http://pc2.2ch.net/hp/kako/1045/10451/1045124732.html
 http://pc2.2ch.net/hp/kako/1047/10471/1047154499.html
 http://pc2.2ch.net/hp/kako/1048/10487/1048775997.html
 http://pc2.2ch.net/hp/kako/1050/10500/1050086156.html
 http://pc2.2ch.net/hp/kako/1053/10536/1053619342.html
 http://pc2.2ch.net/hp/kako/1055/10555/1055536413.html
 http://pc2.2ch.net/hp/kako/1057/10578/1057860130.html
 http://pc2.2ch.net/hp/kako/1060/10608/1060869440.html
http://pc2.2ch.net/hp/kako/1064/10645/1064502391.html
http://pc2.2ch.net/hp/kako/1066/10663/1066310242.html
【前スレッド】
http://pc2.2ch.net/test/read.cgi/hp/1069216458/l50


3Name_Not_Found :03/12/22 00:01 ID:EeFatYy0
【関連スレッド】
・CSS/DHTMLバグ辞典スレッド 第3版
 http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
・* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50
・代替スタイルシートに萌え〜
 http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
 http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
・CSSでイケてるデザインサイト 19
 http://pc2.2ch.net/test/read.cgi/hp/1067806559/l50
・CSSでデザインしたサイト 18
 http://pc2.2ch.net/test/read.cgi/hp/1065882318/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.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・CSS2の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html
 http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

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


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

5Name_Not_Found :03/12/22 00:03 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: text-align:center;を指定しても Netscape6(or7)ではtableなどブロック要素がセンタリングできません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に4.)をご覧ください。

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.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html


6Name_Not_Found :03/12/22 00:04 ID:EeFatYy0
【FAQ】
Q3: CSSで擬似フレームってどうやるの?
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://alt.s31.xrea.com/tips/overflow.html
 http://alt.s31.xrea.com/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html

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


7Name_Not_Found :03/12/22 00:07 ID:EeFatYy0
【FAQ】
Q5: なんかフロートの表示が崩れるみたいなんですけど?
A5: floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
 http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
 http://pc2.2ch.net/test/read.cgi/hp/991666454/683n

Q6:画面中央に配置するにはどうすれば?
A6:左右(水平方向)のセンタリングはA2に既出。垂直には色々な方法があります。
 「スタイルシート 縦中央(垂直中央)」参照のこと。
 http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm

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

Q8.いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A8.下記に書いてあります。テーブル・レイアウトは段組のFAQ(A4・>>6)をご覧あれ。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
 http://deztec.jp/site/tips/page/p0037.html


8Name_Not_Found :03/12/22 00:08 ID:???
Q9.dt・ddを横並びにしたいのですが。(会話文など)
A9.下記サイトを参照のこと。
「<dl> の整形」
 http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q10.リンクした画像の線が消えません。
A10.a:link img, a:visited img, a;hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。


91 :03/12/22 00:12 ID:???
ミスってたら、すみませんとしか言えません。すみません。

10Name_Not_Found :03/12/22 00:13 ID:???
>>1
>【FAQ】(>>5-7)を参照して、
>【FAQ】>>5-7

>>5-8 だね。

11Name_Not_Found :03/12/22 00:14 ID:???
>>1
ついでに http://web2ch.s31.xrea.com:8080/?CSS も「編集」してきてくれると偉い。

12Name_Not_Found :03/12/22 00:36 ID:???
>>10
すみませんすみません。
>>11
すみません、どなたかお願いします。

13Name_Not_Found :03/12/22 01:03 ID:???
>>1
乙華麗。ぐっじょぶ。
細かいことは(゚ε゚)キニスルナ!!

14Name_Not_Found :03/12/22 17:31 ID:lQwcqFUY
こちらの最初のほうで紹介されてるリンクも、全てでは無いですが
関係ありそうなものを見てみたのですが見つからなかったのでお尋ねします。


質問は、backgroundを使用して背景を表示させてるんですが、
tableでbackgroundを使用した場合、IEでは表示されるんですが
NN7.1だと表示できません。NNで表示させる方法はあるんでしょうか?

15Name_Not_Found :03/12/22 17:47 ID:???
>>14
どのように指定したか書けよ

16Name_Not_Found :03/12/22 18:06 ID:???
>>14
“表関連要素のうち何処に適用しているのか”など明確に質問してください。
Netscape7 は列および列グループへの背景指定には対応していませんが、
その他の表関連要素については、背景関連プロパティは適用される筈です。
まずは HTML および CSS文法の妥当性を検証サービスで確認してください。
それでも解決しない場合には、具体的なソースを提示してください。


17Name_Not_Found :03/12/22 18:31 ID:???
もう放置しようぜ

18Name_Not_Found :03/12/22 18:46 ID:???
backgroundにfixedを指定した場合はネスケで表示されないことがあるよ。

19Name_Not_Found :03/12/22 20:40 ID:???
>>18
それは閲覧領域に対して背景が固定されるからだろ。
その書き方だと Netscape のバグかのように取れる。

20Name_Not_Found :03/12/22 20:47 ID:YPBD2mxY
前スレに書いたのですが、新スレに移動しているようなので、こちらにも書かせていただきます。
985 :Name_Not_Found [] :03/12/22 20:27 ID:YPBD2mxY
a:link{
text-decoration:none;
border:dotted 1px blue;
color:navy;
}
.tabnavi a:link{
text-decoration:none;
color:navy;
}

として、文中のリンクには青い下線を、タブ型ナビゲーションのリンクには下線なし、にしようとしているのですが、下線が出てきてしまいます。
タブナビの方の文字色を赤にしてみても反映されません。
aに複数のクラスを指定して、複数のリンクスタイルを使用したい場合、どう書くべきなのでしょうか?
IE6での確認です。

988 :Name_Not_Found [] :03/12/22 20:39 ID:YPBD2mxY
>>986
タブナビのほうに border:none; を入れても出てきてしまいます…。
文字色の変更すら反映されないんですよ…。

21Name_Not_Found :03/12/22 21:33 ID:???
>>20
ちょっと話をずらして悪い。
インライン要素へのborderは右左にしか適用されないと思うが。
IE互換モードなら上下左右に適用されるけど。

22Name_Not_Found :03/12/22 21:40 ID:???
んなこたないよ。

23Name_Not_Found :03/12/22 21:42 ID:???
>>20
いろいろ突っ込みどころがあるが、まずはできない理由から。

その記述だと、a要素への装飾が、
text-decoration:none;
border:dotted 1px blue;
color:navy;

a要素、class名tabnaviへの装飾が、
text-decoration:none;
color:navy;

つまりa要素なら、class名"tabnavi"のほかに前者の装飾もかかる。
文字色の変更が効かないのは優先度の違い。前者のほうが優先される。

あとは自力で解決できるはず。難しい問題じゃないぞ。

あとうろ覚えだけど、>>21が言ってるのは確か俺も聞いたことがある。
displayプロパティでブロック要素にしたほうがいいと思う。
display : block;
ってね。

24Name_Not_Found :03/12/22 21:48 ID:???
>>23
だよなぁ。と思ったらあるみたい。俺も始めて知った。超やばい。
ttp://www.mozilla.gr.jp/standards/webtips0015.html#c1_4

2524 :03/12/22 21:50 ID:???
上下のボーダー(border) 要素の上下に存在 各行に存在するが、他の行に重なる場合がある
あ、存在するのか。読めてなかった(´・ω・`)

26Name_Not_Found :03/12/22 21:55 ID:???
インライン要素に指定できないのは、heightとwidth。
しっかりしろよ。

27Name_Not_Found :03/12/22 22:05 ID:???
>>20
>aに複数のクラスを指定して
という書き方からの想像だけど、もしかして、<a class="tabnavi">とか書いてたりはしない?
もしそうだったら、cssは a:link.tabnavi になるよ。
で、↑ではなく親要素に class="tabnavi" つけてるなら、
改めてa要素にclassふってやれば優先順位上がるから、できると思う。
a:link.navilink {
border:none;
}
<a class="navilink">〜</a>
という感じ。(クラス名は適当につけてみた)
text-decoration:none;
color:navy;
のふたつは a:link の方と重複するので、無くてかまわない。
それと、下線なら border-bottom:dotted 1px blue; じゃないの?

28kai- ◆kai/rQnSpY :03/12/22 22:06 ID:???
>つまりa要素なら、class名"tabnavi"のほかに前者の装飾もかかる。
>文字色の変更が効かないのは優先度の違い。前者のほうが優先される。

これ、間違ってませんか…?
後者というのは子孫セレクタの方のことでしょうけど、この場合後者が優先では?

29kai- ◆kai/rQnSpY :03/12/22 22:14 ID:???
意味不明だ…何書いてるんだ。
「後者と言うのは子孫セレクタの方のことでしょうけど、」の部分は読み飛ばしてください…。

30Name_Not_Found :03/12/22 22:15 ID:???
>>23の説明で
後者の .tabnavi a:link より前者の a:link が優先される理由が知りたいものだ。

>>20 多分
a:link{     .tabnavi a:link{
↓         ↓
a:link {     .tabnavi a:link {

31Name_Not_Found :03/12/22 22:20 ID:???
ところで、kai-さんは何時ごろからこのスレにいるんですか?

32kai- ◆kai/rQnSpY :03/12/22 22:23 ID:???
>>31
「ところで」も何も、スレ違いです。
糞コテですけど、別に荒らしに来てるわけじゃないのでそういう質問には答えられません。

33Name_Not_Found :03/12/22 23:21 ID:YPBD2mxY
>>21
border-bottomでした、書き間違いですスミマセン。オリジナルにはきちんと書いてます。

>>23
常にa要素への記述が優先されるのでしょうか…勉強してきます…。

>>27
> >>20
> >aに複数のクラスを指定して
> という書き方からの想像だけど、もしかして、<a class="tabnavi">とか書いてたりはしない?
> もしそうだったら、cssは a:link.tabnavi になるよ。
<a class="tabnavi">と書いています。
最初、cssは a:link.tabnavi と書いていたのですが、どうにも反映されないので .tabnavi a:link としてみました。
が、やっぱりダメでした。。。

>>30
> >>20 多分
> a:link{     .tabnavi a:link{
> ↓         ↓
> a:link {     .tabnavi a:link {
ハンカクスペース入れてみたけど、やはり…_| ̄|○

席を外していて、レスが遅れてスミマセンでした。
風呂に行って、すべてのa要素にクラス振ってみます…。ありがとうございました。

34Name_Not_Found :03/12/23 00:01 ID:???
a要素にクラス属性つけたのなら、
a.tabnavi:link
では?

そもそも、IE(6.0)は、祖先がクラスセレクタで子孫が擬似クラス、
というのに対応しているんでしょうか。

35Name_Not_Found :03/12/23 00:15 ID:???
>>33
特定のクラスが指定されているリンクの設定
a.tabnavi:link{...}
<a h." class="tabnavi">

特定のクラスが指定された要素に含まれるリンクの設定
.tabnavi a:link{...}
<p class="tabnavi">
<a h."></a>
</p>

という感じ。

36Name_Not_Found :03/12/23 02:34 ID:QryxhHhl
質問です。
ブロック要素に
h1, h2{
  display : inline;
}
などとした場合、これらはインライン要素としての扱いをされるということを
知ったのですが、このようなスタイル設定をした要素を
以下のようにbody直下に置いても良いのでしょうか?

<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
</body>

これは、一応ValidなHTMLということになりますが、事実上、
inline要素をbody直下に置いているということになるので、
非常に気持ち悪いのです。

37Name_Not_Found :03/12/23 02:57 ID:???
>>36
さて、inlineにした理由から伺おうか…

38Name_Not_Found :03/12/23 03:10 ID:???
>>36
>これらはインライン要素としての扱いをされるということ
インライン要素になるのではなく、整形構造がインラインになるだけ。
'display' は HTML の文書構造を変化させるためのものではない。
ソース文書は DTD に沿って記述しなければならない事には変わりない。

>inline要素をbody直下に置いているということになるので、非常に気持ち悪いのです。
少しは仕様書を読んだらどうだ。

[HTML 4.01仕様書邦訳 7.5.3 ブロックレベル要素と行内要素]
>リスト要素を行内スタイルにするなど、ブロック要素を行内スタイルでレンダリングすることが適当であるような場合もある。しかし一般的に言って、著者はHTML要素の慣習的解釈を上書きするようなことはしないよう求められる。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3


3936 :03/12/23 03:22 ID:QryxhHhl
>>37
ブロック要素を、インラインのように扱う必要があったからです。
ページのレイアウトは、次のようにします。
-------------------------
※ウィンドウの幅が広い場合
┌─────────┐ ┌───────┐
│タイトル画像      │ | ナビゲーション |
└─────────┘ └───────┘
メインコンテンツ

------------------------
※ウィンドウの幅が狭い場合

┌─────────┐
│タイトル画像      │
└─────────┘
┌─────────┐
│ナビゲーション     │
└─────────┘
メインコンテンツ

---------------------------
ウィンドウの幅が広いときは、ナビゲーションがタイトルの横に、
狭いときはタイトルの下に来るのがミソです。
タイトル画像は<h1>、ナビゲーションは<div>によるブロック要素です。

40Name_Not_Found :03/12/23 06:20 ID:???
もしかしたらスレ違いかもしれませんが、
スタイルシートで指定したレイヤー上に、
JavaScriptで…例えばテーブルや画像などを…同位置に指定し重ねると、
どうしてもレイヤーの下にテーブルが隠れてしまいます。
これをテーブルが上位に重なって表示させるにはどうしたら
良いのでしょうか?
説明が分り難くて申し訳ないのですが、何卒ご教授下さい。

41Name_Not_Found :03/12/23 07:17 ID:2QjUIEc8
js板いけ

42Name_Not_Found :03/12/23 08:32 ID:???
>>39
何もdisplay:inline;でなくても h1 img {float:left;} で充分なのでは。

4337 :03/12/23 16:47 ID:???
>>42
まったくそのとおりで

4436 :03/12/23 18:19 ID:QryxhHhl
>>42, >>43
レスありがとうございます。
実は、以前はそのようにfloatさせていたのですが、
それだと、ウィンドウの幅が狭くなったときに以下の問題が発生します。
・強制的にナビゲーションをタイトルの横に置こうとするので、
 横方向のスクロールバーが発生する(場合がある)。
・以下のようなレイアウトになってしまう。

┌────────┐ ┌─
│タイトル画像     │ | ナ
└────────┘ │ ビ
 ┌─────────┘
 │ゲーション
 └───────────

メインコンテンツ

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

これを防ぐには、インラインとして配置させるのが最も合理的であると
判断しました。


45Name_Not_Found :03/12/23 18:20 ID:5a841lVG
絶対的位置配置ってやらない方がいいんでしょうか?
<ul>や<h1>に絶対位置指定してたら、
先輩から「アホか、古いブラウザで見られへんやろ」って
頭叩かれたんですが・・

46Name_Not_Found :03/12/23 18:52 ID:???
>>45
古いブラウザは@importなどでCSS適用されないようにすれば読めるようになる

4745 :03/12/23 18:59 ID:5a841lVG
>>46
それ言ったら
「はぁ? とにかく絶対位置指定だけはやめとけ。ずれまくる。
 相対指定にしろ」
とか言うんですよ・・。

48Name_Not_Found :03/12/23 19:05 ID:???
>>47
古いブラウザ対策をして、具体的に表示例を見せてやれば、納得するのでは?

49Name_Not_Found :03/12/23 19:30 ID:???
>>44
そのナビゲーションの要素にwidthを指定すればだいじょぶなんじゃないの?

50Name_Not_Found :03/12/23 19:31 ID:???
あーでも、幅固定じゃないとだめなのか(´・ω・`)
display:inline;が一番いいかもしれんね

5114 :03/12/23 20:01 ID:tjLgP7f8
ゴメンなさい、解決しました。
どうも、ファイル名に日本語を使用していたのが問題だったようです。
NN7.1だと日本語のファイルって読んでくれないんですね・・・
お騒がせしました。

52Name_Not_Found :03/12/23 20:03 ID:???
>>47
たしかに絶対配置は、いい加減な知識で下手にやられると困ったことになる。
よぅく理解した上で使用してほしいものだ。

53Name_Not_Found :03/12/23 20:33 ID:/Rev/GXy
IE6 表示OK
NN4.7 表示OK

なのにNN7.1で見ると
ボックスの背景色は出てないわ、
文章表示は全部上の方にごちゃごちゃ固まるわ
でむちゃくちゃなんですが・・・
NN7.1の時も、NN4のscreenみたいにスタイルシートを
適用させない方法ありますか?

54Name_Not_Found :03/12/23 20:36 ID:???
むちゃくちゃなのは IE6 & NN4.7 の方の予感。

5553 :03/12/23 20:38 ID:???
>>54
違わい違わい。
NN7.1って何か変なスタイルシートになりはらへん??

56Name_Not_Found :03/12/23 20:51 ID:???
>>55
君のスタイル指定かHTMLソースが間違ってる方に百万点。

ソース出してくれないと、対策も回答できませんよ。

57Name_Not_Found :03/12/23 20:59 ID:/Rev/GXy
>>56
(1)全部文字が上に集合する
   これはおそらく<br><p>等改行タグが一切入っていないからだと思うが・・。

(2)背景色が出ない
   .menubar {height: 40px;
         width: 600px;
  background-color: #000000;
  color: #FFFFFF;}
   これでNN7.1で背景色が#000000にならない。文字色は合ってる。

58Name_Not_Found :03/12/23 21:03 ID:???
>>57 そのスタイルを適用させるHTMLソースを書きませう。
もしや他にfloatとか使ってないか? だったらFAQ(>>7)を参考に。

59Name_Not_Found :03/12/23 21:08 ID:/Rev/GXy
>>58
<img src="top.jpg">
メニュー
<div class="menubar">
トップ | このサイトについて | 朝食 | 昼食 | 夕食 | メール |
</div>
■更新履歴
<h1>更新履歴</h1>
<ul>
<li>2003.12.21 朝食更新</li>
</ul>

こうすると、更新履歴がまずtop.jpgにかぶる。IEでは正常表示
menubarは背景色が出ない。

60Name_Not_Found :03/12/23 21:15 ID:???
>更新履歴がまずtop.jpgにかぶる。

何もしてないのにそんなことなる筈ない。
>>57に出した以外にも何かヘンなCSS指定してるでしょ? それを提示すること。

6159 :03/12/23 21:18 ID:???
>>60
してないんですよ・・・・信じて・・・

試してみた所、
.menubar の
height: 40px;
width: 600px;
この2つの要素外すと、表示はずれるけど
一応画像には被らなくなった。
でもメニューの範囲作るために必須なんだよなぁ・・
これ駄目なのかな・・。

62Name_Not_Found :03/12/23 21:29 ID:???
>>61
全部絶対配置しろ。
対応してないNN4以下は

ブラウザによる振り分け (JavaScriptを使用しない方法)
http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua

で弾ける。

63Name_Not_Found :03/12/23 21:30 ID:???
>>61 信じられません。下記のソースでちゃんと表示されました。Win98SE・NS7.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<STYLE type="text/css"><!--
.menubar {
height: 40px;
width: 600px;
background-color:#000;
color:#fff;
}
--></STYLE>
</HEAD>
<body>
<img src="top.jpg">
メニュー
<div class="menubar">
トップ | このサイトについて | 朝食 | 昼食 | 夕食 | メール |
</div>
■更新履歴
<h1>更新履歴</h1>
<ul>
<li>2003.12.21 朝食更新</li>
</ul>
</body>
</HTML>

64Name_Not_Found :03/12/23 21:31 ID:???
その昔NN6を初めて導入して、自分のページを見たらレイアウトがめちゃめちゃだった。
「Nって使えねぇ!」と思ったが、その後もう少しHTMLやらCSSやら勉強したら
結局自分のページの方がめちゃめちゃだったことに気づいた2年前の夏。
>>61
とりあえずValidatorとかには掛けてみました?


65Name_Not_Found :03/12/23 21:35 ID:???
>>63
スタイルシートを外部に持っていくと駄目なんですよ。。

66Name_Not_Found :03/12/23 21:36 ID:???
>>63
あ、勘違い!!
行けました!!

でもなんで!?!?!?

67Name_Not_Found :03/12/23 21:37 ID:???
>>62は何かの冗談のつもりなの? それにしてはつまらないし……。

68Name_Not_Found :03/12/23 21:39 ID:???
おい、まさか>>57はタブや半角スペースではなく、全角スペースを使ってやしないか?

6962 :03/12/23 21:40 ID:???
>>67
はぁ?

70Name_Not_Found :03/12/23 21:41 ID:VEwAR23J
>>64
> 「Nって使えねぇ!」と思ったが、その後もう少しHTMLやらCSSやら勉強したら
> 結局自分のページの方がめちゃめちゃだったことに気づいた2年前の夏。
 それ、非常にわかる。まず自分を信じてる、ってあるよね。

>>61
>してないんですよ・・・・信じて・・・
俺らがお前を信じて解決するならいくらでも信じてやるが。
望みは信用を得ることか?問題をクリアすることか?

71Name_Not_Found :03/12/23 21:42 ID:???
>>66
感嘆符使いすぎで非常に鬱陶しいんだけど。

72Name_Not_Found :03/12/23 21:42 ID:???
>>62
>全部絶対配置しろ。

本気で言ってるなら、寒いな。

7362 :03/12/23 21:45 ID:???
>>72
全部絶対配置の方が画像と文章がだぶったりする事も無いし、
置きたい場所に置けるから確実だろが。
俺は常にHPBのどこでも配置モードでスタイルシート作ってるが。

とりあえず鬱陶しいので消えてくれ>>72
な?皆。

74Name_Not_Found :03/12/23 21:47 ID:???
おお!あの悪名高き「どこでも配置モード」ユーザーが!!


75Name_Not_Found :03/12/23 21:47 ID:???
>>73 「どこでも配置モード」にチト笑ったが、やはり下手な冗談だな。

76Name_Not_Found :03/12/23 21:48 ID:???
>>72-74
ワロタw 腹いてーーww
おまいら最高だよ。

77Name_Not_Found :03/12/23 21:48 ID:???
つまらないと思ったらレスをしないでください。

78Name_Not_Found :03/12/23 21:49 ID:???
>>77
>>72よ、必死だな

79Name_Not_Found :03/12/23 21:50 ID:???
縦方向に点線入れる方法ありますか?

80Name_Not_Found :03/12/23 21:51 ID:???
説明不足ですよ。 何の縦方向さ? >>79 

81Name_Not_Found :03/12/23 21:54 ID:???
>>79
↓縦に太い点線
http://www.zspc.com/index.html

>>78
いや、>>73>>77でないの?

8279 :03/12/23 21:56 ID:???
>>81
どうもです

83Name_Not_Found :03/12/23 22:21 ID:???
頼むから真性のお子様を煽って無駄にレスを増やすのはやめてください。

84Name_Not_Found :03/12/23 23:02 ID:???
>44
ナビゲーション部分も float: left; でいいと思うが

85Name_Not_Found :03/12/23 23:33 ID:???
背景の画像をスクロールバーを動かしても動かないようにするにはどうすれば?

86Name_Not_Found :03/12/23 23:48 ID:???
固定する

87Name_Not_Found :03/12/23 23:55 ID:???
>>85
background-attachment:fixed;

やりたいことが分かっているなら、背景関係のリファレンスを見ませう。
http://hp.vector.co.jp/authors/VA022006/css/colors.html

88Name_Not_Found :03/12/23 23:56 ID:???
>>85

それをやってるページのソースとシートを見る→理解する→真似する→応用する
→熟達する

89Name_Not_Found :03/12/24 00:25 ID:???
それをやってるページのソースとシートを見る→間違って理解する→真似する→応用できない
→初心者を脱却できない


90Name_Not_Found :03/12/24 02:04 ID:???
それをやってるページのソースとシートを見る→理解する→真似する
→それをやってるページの管理人に見つかる→訴えられる
→裁判をする→敗訴する→罰金を払う→破産する→首をくくる
→天国へ行き再生の準備をする→生まれ変わる

91Name_Not_Found :03/12/24 08:24 ID:???
前世で私と一緒に戦ってくれた戦士を探しています

92Name_Not_Found :03/12/24 09:59 ID:???
>>90
てんごくいけませn

93Name_Not_Found :03/12/24 10:38 ID:???
>>91
ひょっとして貴方はエンジェルアドバイズ!?

94Name_Not_Found :03/12/24 11:40 ID:???
>>91
無理を言うな。前世も現世も一緒に戦う人なんてお前にはいない。

95宇野そうすけ :03/12/24 20:33 ID:???
テーブルを使わないで、新聞みたいに段組する方法教えてください。

<p> <P>
文章ブロック 文章ブロック
<P> <p>
文章文章文章 文文文文文文
文章文章文章 文章文章文章

こんなのって、無理ですの??

96Name_Not_Found :03/12/24 20:35 ID:???
>>95
>>6-7

97宇野そうすけ :03/12/24 20:38 ID:???
96氏

よく見ないで発言してごめんなさい。
そして、レスの番号表示してくれてありがとう。

早速見に行って、頑張って Web サイト作成します。

メリークリスマス。良いお年を。

98Name_Not_Found :03/12/24 21:53 ID:???
> <p> <P>
> <P> <p>
……。頑張ってくださいね。

9936 :03/12/25 05:34 ID:???
>>84
結局、displayとfloatを併用して
display : inline;
float : left;
width : x;
とすることで解決しました。
ウィンドウ幅が2x以下になるとブロック要素が改行します。

レスありがとうござです。


100Name_Not_Found :03/12/25 19:50 ID:???
質問です。

フィルターを使用し
.alfa {filter:alpha(opacity=70);}
これを定義して
テーブルにクラス設定してあるのですが、
テーブル内の特定のテキスト・画像にはフィルターを
適用させない方法って有りますか?

101Name_Not_Found :03/12/25 20:14 ID:???
>>100
というか、フィルター使うのはやめましょう。

102Name_Not_Found :03/12/25 20:27 ID:???
特定の要素にクラス指定して.hoge{filter:alpha(false)}
フィルタ使わないから正しいかどうかわかんない。
それとクラス名にalfaはどうかと思うよ(もし使っているとすれば)。

あと>>101に同意

103Name_Not_Found :03/12/25 21:35 ID:???
HPデザインをCSSで作り直そうと思っている。
んで、PS2のイージーブラウザーにも対応したい訳。
「Cascade Style Sheet(CSS)1.0 対応 ※一部対応のみ」って書いてある(この一部ってのが気になる・・・)。
また、どっかにPC用のイージーブラウザーのエミュレータみたいなもとないでしょうか?

104Name_Not_Found :03/12/25 21:37 ID:???
>100
こういう人がもっと増えますよう

105Name_Not_Found :03/12/25 21:45 ID:???
>>100
フィルタ使っても不快なだけで魅力に感じないよ。
可読性を損なってまでも表現すべきことなのかな。

>>103
碌なもんじゃない気がする。

106Name_Not_Found :03/12/25 22:46 ID:???
>>100の質問もFAQに入れた方がいいんじゃない?
filter関係の質問てこんなのばっかだし

107Name_Not_Found :03/12/25 23:04 ID:???
>99
誰か突っ込むと思っていたらまだ突っ込まれてないので

float: left; を指定した段階で強制的に display: block; になってます
よって display: inline は(間違いではないにせよ)あっても意味を成しません

ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#float-position
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#q24

108Name_Not_Found :03/12/26 00:29 ID:???
>>107
更に突っ込むと Errata in REC-CSS2 および CSS2.1 では
必ずしも「block」になるとは限らないと変更されている。

ttp://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata#s-9-7
ttp://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
ttp://cssbug.at.infoseek.co.jp/detail/mozilla/b047.html

109Name_Not_Found :03/12/26 11:21 ID:???
>>108
と言っても、それはlist-itemの場合だから、>>36=>>99の件には関係ない。

110Name_Not_Found :03/12/26 13:59 ID:???
>>109
>>99 の件に関係なく「提示された仕様書は修正されていますよ」ってこと。
また突っ込むとだな display: list-item; の場合に限ったことではない。
例えば表要素(display: table)をフロート配置にしても「table」のままになる。

111Name_Not_Found :03/12/26 16:55 ID:???
質問です。IE6で、
body { line-height:1.3em; }
div.example { border:1px solid #000; }
dt { width:7em;float:left; }
として、
<div class="example">
<dl>
<dt>ほにゃほにゃ</dt><dd>なんとかかんとか</dd>
<dt>ほげほげ</dt><dd>なんとかかんとか</dd>
<dt>ぽにゃぽにゃ</dt><dd>なんとかかんとか</dd>
</dl>
</div>
とすると、何故か全体を囲う線のみでなく、各行の間にも線が入ってしまいます。
どのようにすれば解決されるのでしょうか?

112Name_Not_Found :03/12/26 17:33 ID:???
<dl class="example">


113Name_Not_Found :03/12/26 17:34 ID:???
幾つかの解説サイトでは、一部分の文字の色を変えるとき等に span タグを使うように と
書かれていますが、実際spanを使っているサイトは少ないように思えます。
これは何故なんでしょうか? spanタグ自体が不適切だからでしょうか?

114111 :03/12/26 18:14 ID:???
>>112
実際は
<div class="example">
<ul>
<li>ぽにゃぽにゃ</li>
<li>ほらぽら</li>
</ul>
<p>さて、これから定義リストを始めます。</p>
<dl>
<dt>ほにゃほにゃ</dt><dd>なんとかかんとか</dd> ……
のようにexampleの中にはdl以外にもいろいろなものが入っているので
そのように解決する事が出来ず困っています。

115Name_Not_Found :03/12/26 18:25 ID:???
>>113
「一部分の文字の色を変えるとき」というのは,潜在的に何かしらの意図がある筈です。
その意図が HTML の要素型で用意されていれば,その要素で印付けして意図を明示します。
HTML4 には,構造を示すインラインの要素型として,
em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym が用意されています。
なんの構造を持たない div, span要素はなるべく使わないようにするのが基本です。

場合によっては,物理的なsmall, big要素型などを使っても構いません。
例えば「呟き」を表現する要素型は HTML には存在しませんが,
<small class="mutter">〜</small> として表現するのも一つの方法です。
違和感を感じるのであれば,span要素でマーク付けすればよいです。


116Name_Not_Found :03/12/26 18:27 ID:???
>>114
とりあえず手持ちのFirebird0.7では出なかったから、IEのバグかも知れんな。
解決法は↓の方よろしく。

117Name_Not_Found :03/12/26 18:31 ID:???
おかしくはない、他が原因だろ

118Name_Not_Found :03/12/26 19:57 ID:???
いや、確かにIE5.5だと出る。Opera7.23では出なかったけど。

119Name_Not_Found :03/12/26 20:01 ID:???
>>114
Operaでも行の間の線は出ないですね。
IEで確認してみたのですが、なぜか border-top が
定義リストの間に表示されるみたいですね。

解決法(?)
・試しに、div.exampleに背景色(background-color))を指定してみたら、
定義リストの間の線が消えました。
・ dl{background-color:white;} でも消えました。
色はなんでも良いみたい。

一応、CSSバグ報告スレッドにもいった方が良いかも。
http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50

120111 :03/12/26 20:23 ID:???
返信有難うございます。IEの問題のようですね。
>>119
backgroud-colorの指定は盲点でした。
dtをborder-style:none;にしてみたりしても解決されなかったので、
悩んでいました。
バグ報告スレの方はほとんど覗いた事が無いのですが、
報告させていただくことにします。有難うございました。

121Name_Not_Found :03/12/28 04:51 ID:???
<table border="1">と同じ事をスタイルシートで
やろうとしているのですが、上手く行きません。どうしたら同じことができるでしょうか?

122Name_Not_Found :03/12/28 07:22 ID:???
>>121
table要素のborder属性は非推奨じゃないと思うが・・・

123Name_Not_Found :03/12/28 08:09 ID:???
いや。ISO-HTMLかもしれん。
tableの外枠はブラウザによって微妙に色が違うから

table { border: 1px outset silver }

とか

table {
 border-width: 1px;
 border-style: solid;
 border-color: white gray gray white;
}

とか ThreeDDarkShadow みたいにシステム色使うとか
好きなやつ選んでくれとしか言いようがない。

124Name_Not_Found :03/12/28 08:19 ID:???
>>123
ありがとうございます。でも、それでやると内枠が消えるんです。
テーブルタグだと、内枠まで自動設定されるのですが、スタイルシートでは無効になります。
逆にスタイルシートでtdについて指定すると、現在テーブルタグで指定しているものまで書き換えられてしまうのです。

125Name_Not_Found :03/12/28 08:38 ID:???


↓これで既存の <table border="1"> みたいになるっしょ。CSSのborderは子孫に継承しないんだし。

table {
 border-width: 1px;
 border-style: solid;
 border-color: white gray gray white;
}
td {
 border-width: 1px;
 border-style: solid;
 border-color: gray white white gray;
}

つーか、「現在テーブルタグで指定しているもの」って何?

126Name_Not_Found :03/12/28 12:04 ID:???
>>125
ありがとうございます。できました。
あと、class使ったら影響を閉じ込めれました。

127Name_Not_Found :03/12/28 12:07 ID:???
しかし、2種類のテーブルを使い分けるとき、
いちいち<td>だったところを<td class="hogehoge">とか指定しなければいけないのがつらいです。

128Name_Not_Found :03/12/28 12:09 ID:???
tableにだけclassを指定すれば充分でしょ。

129Name_Not_Found :03/12/28 12:16 ID:???
>>128
だめでした。classをtableだけに指定するとtdの指定が無くなり、<table border="1">みたいなことが出来ません。

130Name_Not_Found :03/12/28 12:20 ID:???
>>129
仕様書か解説サイトの「セレクタ」の項を参照されたし。

131Name_Not_Found :03/12/28 12:36 ID:???
>>130
それを参考に書いているのですが、
class指定がなければデフォルトの一種類の指定が使われてしまいます。たぶん仕様どおり。
td { border-width: 1px; border-style: solid; border-color: gray white white gray; }
td.test { border-width: 2px; border-style: solid; border-color: gray white white gray; }
で、
<td class="test">ほげほげ</td>
みたいなことをやろうとすると、各<td>でいちいちこのclassを指定しないとダメみたいです。
指定しないとクラス無し指定になります。
やりたいことは、<table class="test">な感じで、中の<td>も一括して設定変更をしたいのです。

132Name_Not_Found :03/12/28 12:47 ID:???
具体的には、ここにあるような
ttp://www.ne.jp/asahi/ohisama/ohisama2/hiko/table6.html
切り替えを境界線にも適用したいのです。

133Name_Not_Found :03/12/28 12:54 ID:???
table.test { 略 }
.test td { 略 }

134Name_Not_Found :03/12/28 13:00 ID:???
>>133
ありがとうございます!できました!

135Name_Not_Found :03/12/28 13:07 ID:???
オイオイ、子孫セレクタがわかってなかったのかよ……。基礎だよ? >>134

136Name_Not_Found :03/12/28 13:53 ID:ZLnWO3Ti
フジテレビHPより
<TITLE>もしもツアーズ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

<!--スタイルシート-->
<SCRIPT LANGUAGE="javaScript" TYPE="text/javascript" SRC="css/css.js">
</SCRIPT>
<!--スタイルシートここまで-->

このスタイルシートって・・・なんですか?

137Name_Not_Found :03/12/28 14:44 ID:???
>>136
スタイルシート振り分け用じゃないの?

関係ないけど、新聞・テレビとか大手メディアの悲惨なhtmlはなんとかしてもらいたいとか思った。

138Name_Not_Found :03/12/28 15:08 ID:???
いいんだ、ちゃんと振り込んでくれれば
後は知らん。知ったことじゃない。

139Name_Not_Found :03/12/28 15:32 ID:???
台本形式のテキストをCSS使って表現したいんですが、

モナー:今日はいい天気だ。
     明日もいい天気だろう
ギコ :あさっても多分いい天気だな

という感じに表現したい時、2行目以降にインデントをつけるのと、
2行目以降にマージンつけるのとどちらが正しいのでしょうか?

140Name_Not_Found :03/12/28 15:48 ID:???
>>139
フロート使って下記の感じでいいじゃない?

<head>
<title>台本形式のテキストをCSS使って表現</title>
<style type="text/css">
dt {
text-align: right;
float: left;
width: 3.5em;
}
dd {
margin-left: 3.5em;
}
p { margin: 0; }
</style>
</head>
<body>
<dl>
<dt>モナー:</dt>
<dd><p>今日はいい天気だ。<br>明日もいい天気だろう。</p></dd>
<dt>ギコ:</dt>
<dd><p>あさっても多分いい天気だな。</p></dd>
</dl>
</body>

141Name_Not_Found :03/12/28 16:39 ID:???
pタグは入れなくていいような気がするんだが…

142Name_Not_Found :03/12/28 16:46 ID:???
完全に間違いだな

143Name_Not_Found :03/12/28 17:23 ID:???
>>141-142
会話文だって文章なのだから、一つの主題をもって纏まった部分を
段落としてマーク付けするのは至極当たりまえのことだと思うが。

ここはCSS質問スレであって、Strictスレではないのだから、
最終的なマーク付け方法は >>139 が考えればよいことだろう。

明確な根拠を提示するつもりがないのなら黙ってろ。

144Name_Not_Found :03/12/28 18:46 ID:???
こんな感じだとどうなんでしょう。

<title>脚本</title>
<style type="text/css">
* {margin:0; padding:0;}
body{line-height:1.5em;}
dl{margin:1em 0 1em 4.5em;}
dt{position:absolute; left:1em;}
</style>

<dl>
<dt>モナー:</dt>
<dd>
<p>今日はいい天気だ。</p>
<p>明日もいい天気だろう。</p>
</dd>
<dt>ギコ:</dt>
<dd>
<p>あさっても多分いい天気だな。</p>
</dd>
</dl>


145Name_Not_Found :03/12/28 19:23 ID:???
>>144 なんで絶対配置なんかするのかね。せめて相対配置だろ。

146Name_Not_Found :03/12/28 19:54 ID:???
>>145
上記で、dt{position:relative; left:-4em; top:1.5em;} とかにしろってこと?
理由は?

147Name_Not_Found :03/12/28 20:01 ID:???
どこからtop:1.5em;が出てきたんだ? >>146
ともあれ、positionを使用する位なら、margin-leftに負の値、でよかろ。
positionを使用すると、その子孫要素によっては面倒が起きやすいから。
特にabsoluteはいかんよ。本来の位置を無視してキャンバスに対して配置するんだから。

148Name_Not_Found :03/12/28 20:39 ID:???
>>147
>どこから出てきた
スルーでお願いします。

>本来の位置を無視してキャンバスに対して配置するんだから。
(positionにstatic以外の値を指定してない)包含ブロックがない場合?
というか、IEにバグがあるし、使わないほうが無難というのはもっともか。
>positionを使用すると、その子孫要素によっては面倒が起きやすいから。
そうですね。サンクス。

149Name_Not_Found :03/12/28 22:35 ID:???
<dl>
 <dt>Title</dt>
 <dd>
  <ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
  </ul>
 </dd>
</dl>

を、

<table>
 <tr>
  <td>A</td>
  <td>
   TITLE
   <ul>
    <li>B</li>
    <li>C</li>
   </ul>
  </td>
 </tr>
</table>

みたいな感じに表示させるには
どんな css を書けば良いのか教えて頂けませんか?

TITLE には本の題名、
A には本の表紙画像、
B, C には著者名等を入れるつもりです。

150Name_Not_Found :03/12/28 22:42 ID:???
>>149
自分では、どんなスタイル指定を書いてみたのですか。
それを添削するとしませう(全部他人頼みはよくない)。


関係ないけど。
 li要素の子孫にdl要素があるとリストマークが上方にずれる
 http://cssbug.at.infoseek.co.jp/detail/winie/b028.html

151Name_Not_Found :03/12/28 22:45 ID:???
ほんとに関係ないな(w


152Name_Not_Found :03/12/28 22:47 ID:???
>>149
<dl>
 <dt>Title</dt>
 <dd><img src="A.gif" alt="A"></dd>
<dd>
  <ul>
   <li>B</li>
   <li>C</li>
  </ul>
 </dd>
</dl>
で、ddを横並びにすればよし。
dt一つに対しdd複数でもいいんだよ?

153Name_Not_Found :03/12/28 22:48 ID:???
>>149
>>150も言ってるが、
人に聞くほどの質問じゃないだろ。


154Name_Not_Found :03/12/28 22:58 ID:???
>>149
無理に定義リストにしなくとも、表ならばtableを使ってよし。
<table>
 <tr>
  <th rowspan="3">表紙画像</th>
  <th>タイトル</th>
</tr>
<tr><td>著者名</td></tr>
 <tr><td>発行年</td></tr>
</table>
とか。

155Name_Not_Found :03/12/28 23:01 ID:???
 以前にもこのスレなどで質問したことがあるのですが、原因がわかったので再度質問
させていただきます。 わかる方お願いします。

 Mozilla で XHTML(application/xhtml+xml) 文章に <?xml-stylesheet ...?> で CSS
を関連付けると、例えば

   <dc:title>         ⇒  dc\:title {...}
   <hoge xml:lang="..">   ⇒  hoge[xml\:lang] {...}

のようにエスケープしていても反映されません。 これは XHTML に Link 要素で関連付けても、
XHTML 内に CDATA として書き込んでも同様でした。 Opera7 ではどちらも反映されています。
 また、同じ文章を HTML(text/html) として Link 要素で CSS を関連付けると、こちらは反映さ
れています。 これは Mozilla のバグと考えていいでしょうか?

 上にもある通り Dublin Core や SVG を埋め込んでいるので、どうしても application/xhtml+xml
として扱いたいんです。 また、Moz スレで訊こうかとも思いましたが、あちらのスレもみている
web 制作板の住人さん(全員?)に判断してもらおうと思ってこっちにカキコしました。
 以前は私の説明不足で話が噛み合わなかったので、今回はどうぞよろしく。。。 長文スマソ

156149 :03/12/28 23:03 ID:???
>>150
1: TITLE 部分の background image として A を使う
 変だったので保留。

2: A を dl の外側に出して float
 html として変か・・・

発想が乏しく、試したのはこの 2 つくらいのもんで・・・
後は、画面左側からの位置をきっちり定めるくらいしか方法が思い付きませんが、
出来たらこの方法は採りたくない・・・

>>152
説明不足で申し訳ない。
TITLE も、画像 A の横に来て欲しいんです。
その方法だと、まず TITLE が来て、
その次に画像 A と B, C が来てしまうかと。


157149 :03/12/28 23:11 ID:???
>>154
表、と言う事になるのか・・・
そうか、表か・・・

なんかこういうのを表として書いて良いのかどうなのか
ちと疑問だったんスけど、表で逝く事にします。



愚問につきあって下さった皆様、有り難う御座いました。



158Name_Not_Found :03/12/28 23:14 ID:???
>>156 
float:right;なら順序を変更できますが。

159139 :03/12/29 00:49 ID:???
遅くなりましたが、レスをくださったみなさんありがとうございます。
私にはちょっと難しいので、また研究しながらやってみます。
ありがとうございました。

160Name_Not_Found :03/12/29 13:52 ID:???
>>159  別に難しくはないだろ。>>140でよいではないか。

161159 :03/12/29 17:26 ID:???
すみません、知らない書き方もあるので、教えていただいた書き方を研究するという意味です。
ただコピーするだけだといつまでたっても理解できないと思うので、意味とか使い方とかを
知ってからにしようと思っています。



162Name_Not_Found :03/12/29 19:05 ID:???
久しぶりの謙虚なタコに心洗われる年末。

163Name_Not_Found :03/12/29 22:06 ID:???
ここでタコなどと聞くとは。知らないやつが言われると煽りと勘違いされそうだ

164Name_Not_Found :03/12/29 22:22 ID:???
↑うぜー

165155 :03/12/30 00:10 ID:???
CSS Laboratory さんのソースを眺めていて気付いたんですが、
dc:title を dc|title のようにすればよかったみたいです。
これってどの仕様書にかいてあるんでしょうか?

166Name_Not_Found :03/12/30 04:43 ID:dY/zFyBK
教えて下さい。
<h1>こんにちはアリガトウ</h1>
というタイトルで、こんにちは      アリガトウ のように、
間にスペースをあけるにはどうしたらいいのでしょうか?

167Name_Not_Found :03/12/30 04:45 ID:???
<h1>メインタイトル<small>サブタイトル</small></h1>

h1 small { margin-left : 50px }

とか。
ダメか。

168166 :03/12/30 05:20 ID:dY/zFyBK
>>167さん
できました!
pxの数値を変えたら左右のスペースを思い通りに動かせました。
即レスで教えて下さってありがとうございます!
感謝!!<(_ _)>

169Name_Not_Found :03/12/30 05:37 ID:b86aNd1w
>>166
<h1>こんにちは<span style="margin-left:50px">アリガトウ</span></h1>
とか。
スタイルシートでなければ
<h1>こんにちは      アリガトウ</h1>
とか。

アリガトウの部分が本当にサブタイトルなら
<h2>にでもして分けて、あとはfloatでやるのがいいと思う。

170Name_Not_Found :03/12/30 05:39 ID:b86aNd1w
&nbsp;が消えたよう(´Д`)


171Name_Not_Found :03/12/30 05:43 ID:p38WRZ4A
フォントサイズ固定するアホは死んでもらいたいんですが
政府の見解はいかがなものでしょうか?

172166 :03/12/30 05:44 ID:dY/zFyBK
すみません...ブラウザの大きさ変えてみたら、
こんにちはとアリガトウがピッタリ左右には分かれないみたいです。
pxの数値を大きくしたら改行になってしまいます。
169さんのも試してみます。

173166 :03/12/30 05:48 ID:dY/zFyBK
度々、後だし情報ですみません。
こんにちはとアリガトウを、
一本の罫線の中で左右に分けることができたらと思って。

174Name_Not_Found :03/12/30 06:00 ID:???
>>169
サブタイトルをh2に回すのか?(´д`;)
なんかおかしなことにならないかそれ。
口じゃ説明できないような、モヤモヤが。

>>172
pxじゃそりゃだめだ。それで気に入らないなら、%にしてみな。

175Name_Not_Found :03/12/30 06:01 ID:???
>一本の罫線の中で左右に分けることができたらと思って。
俺が文盲なのか、貴方が文盲なのかはおいておいてだな。
もうちょっと意味をしてくれ。

176Name_Not_Found :03/12/30 06:10 ID:???
>>175
要するに、画面の左端に「こんにちは」
画面の右端に「有り難う」と表示させたいのだろう。

但し「こんにちは」と「有り難う」は、同じ行に在る・・・と。


177Name_Not_Found :03/12/30 06:24 ID:???
h1 big{
position : absolute;
left : 20px;
}
h1 small{
position : absolute;
right : 20px;
}

<h1><big>メインタイトル</big><small>サブタイトル</small></h1>

一応これでできるみたいだけど、インライン要素にしちゃダメな希ガス(´・ω・`)

178Name_Not_Found :03/12/30 06:28 ID:???
あんまり関係ないかもしれないけれど、自分は
<h1>タイトル<br><span id="hogehoge">サブタイトル</span></h1>
にしています。
タイトルだけで<h2>まで使ってしまうのはどうだろう、と思ったことがひとつ。
タイトルとサブタイトルを
CSSだけで確実に配置分けできるかどうか不安だ、というのがひとつ。
しかし、強制的に改行させていいのだろうかという迷いもあります。

179Name_Not_Found :03/12/30 06:37 ID:???
br は使わない方が良いだろう


180Name_Not_Found :03/12/30 08:16 ID:???
>>177
position、しかもabsoluteはおすすめできない。
横並びにさせるならfloatがよいと思ふ。

181Name_Not_Found :03/12/30 08:46 ID:???
>>178
お前の理念に興味はないが、「強制的に改行させていいのだろうかという迷い」や「タイトルだけで<h2>まで使ってしまうのはどうだろう」なんてことはつまらんことであることは、もっと勉強すればおのずと理解できる。

182162 :03/12/30 09:36 ID:???
>>163
漏れの周りでは普通に使ったりするおっさんが多く、
タコは珍重、もとい、尊重されてるっす。スマソ

>>164
なぜに?

183Name_Not_Found :03/12/30 09:38 ID:???
>>182
> なぜに?
勘違いしたやつだろ気にスンナ

184Name_Not_Found :03/12/30 09:57 ID:???
( ´ _ゝ`)...
オマエらCSSより先にマークアップを勉強しろよ

185Name_Not_Found :03/12/30 10:10 ID:???
>>178
>強制的に改行させていいのだろうかという迷いもあります。

ならばこれでよかろ。悩むほどのことかい。
<h1>タイトル&nbsp;<small>サブタイトル</small></h1>
h1 small {display:block;}

186Name_Not_Found :03/12/30 10:28 ID:???
  って何?


187Name_Not_Found :03/12/30 10:38 ID:???
>>185
ソレってhtml的にも正しいと言えるの?


188Name_Not_Found :03/12/30 12:56 ID:???
>>187 誤りや不審な点があるなら具体的に指摘してください。

189Name_Not_Found :03/12/30 13:20 ID:???
HTMLがどうだろうとここはCSSの質問スレだ。
W3C信者が集う場所ではない

190Name_Not_Found :03/12/30 17:46 ID:???
でもHTMLの記述すらできないヤシは、そもそもこのスレで
質問する資格をもたない。

191Name_Not_Found :03/12/30 17:57 ID:nlmZXRDi
質問です。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/selector.html#attribute-selectors
にあるように属性セレクタのテストをやってみたんですが、
下記の「aaaa...」が赤で表示されませんでした。ブラウザはIE6です。
解決策のご教示を請います。


<html><head><title>selectortest</title>
<style type="text/css">
div [align="center"] {color: red;}
</style></head><body>
<div align="center">
aaaaaaaaaaaaaaaa
</div></body></html>

192Name_Not_Found :03/12/30 18:02 ID:???
IEは属性セレクタ未対応

193178 :03/12/30 18:25 ID:???
お答えをくださった方、どうもありがとうございます。
>179 参考にしてみます。
>181 つまらないことだとは思います。割り切ってしまうことも必要でしょうか。
>185 <small>を使うよりは、<span>の方が適しているかと思います。
確かに、メインのタイトルよりも小さくなりますが・・・。

>191 クラスをつけるのが無難かと思います。

194Name_Not_Found :03/12/30 18:25 ID:???
>>185
>ならばこれでよかろ。悩むほどのことかい。
( ´,_ゝ`)プッ

195Name_Not_Found :03/12/30 18:49 ID:???
>>193
smallは非推奨ではなかったはず。なんで無意味なspanなの?
emの反対で強調度を下げる要素が無いのだから、smallでいいかと。

196Name_Not_Found :03/12/30 18:53 ID:???
>>194 ?

197Name_Not_Found :03/12/30 19:35 ID:???
>>190
初心者用質問スレなのに、なんでそんなに鼻息荒いの?必死杉w

198166 :03/12/30 19:39 ID:D3t19gir
166です。みなさんこんなに考えて下さって
ありがとうございます。
レイアウトは>>176さんの仰るとおりです。
説明が足りませんでした。
みなさんのお答えを参考に色々試してみます。
ありがとうございました。

199Name_Not_Found :03/12/30 19:41 ID:???
>>198 で、結局どうやって解決したの? 結果報告が無いと今後に生かせない。

200Name_Not_Found :03/12/30 19:44 ID:???
>>193

small要素に関して。

 このモジュールは、単純なプレゼンテーション関係の
 マークアップのための要素、属性、最小内容モデルを定義する

XHTML1.1でもsmallは非推奨要素でないし、間違った使い方でもないと思う。

まぁStrictスレ行きだわなこれは。

201166 :03/12/30 20:54 ID:???
pxを%に変えてみました。勉強不足で、たびたび恐れ入ります。

202Name_Not_Found :03/12/30 21:18 ID:???
>>201
横並びにするのはpositionでやったのかfloatでやったのか、はどうなんです?

203Name_Not_Found :03/12/30 21:31 ID:???
うぜー粘着し寝

204Name_Not_Found :03/12/30 22:45 ID:???
早めに答えてもらえませんか?
さもないと本当にあなたたちを無知だと見なしますよ。

205Name_Not_Found :03/12/30 22:58 ID:???
見做せばええやん。見做したところで何か変わるとは思えないが。

206Name_Not_Found :03/12/30 23:20 ID:???
↑冬将軍釣られまくり。

207Name_Not_Found :03/12/31 09:53 ID:???
>>204
だから、本買えよ


208Name_Not_Found :03/12/31 11:15 ID:???
そもそも>>204がいったい何の質問をしたといふのか。

209Name_Not_Found :03/12/31 12:06 ID:???
日本語の喋れない奴は黙れ

210Name_Not_Found :03/12/31 13:43 ID:???
質問です。
デフォルトスタイルシート言語の設定:
<meta http-equiv="Content-Style-Type" content="text/css">
をしなくても、タグ内のstyle属性の記述がIE6などのwebブラウザで有効なのは、
CSSの仕様ではなくブラウザの仕様によるものという理解は正しいですか?

211Name_Not_Found :03/12/31 15:15 ID:???
仕樣と實裝とを區別しませう。>>210

212Name_Not_Found :03/12/31 15:29 ID:???
>>211
書き方が悪かったせいか、思い違いなさってます。
仕様と実装を区別した上で、どっちの要因によるものかという質問の主旨です。

仕様書を見ますと、はっきりした記述が読み取れなかったので、どっちかなあと思ったんです。
IEやNNで使えるんだからそれでいいといえばそうですが。

とにかく
デフォルトスタイルシートの宣言なしでもタグ内でstyle属性使えることがあるのは事実ですよね。
厳格に学習していこうとする上でちょっと引っかかっただけです。

213Name_Not_Found :03/12/31 17:34 ID:???
>>212
これかな。Another HTML-lint の解説から。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#h-14.2.1
> どちらもない場合、デフォルトスタイルシート言語は text/css である。


214Name_Not_Found :03/12/31 17:44 ID:???
>>211
正しい日本語を使いましょう。

215Name_Not_Found :03/12/31 18:08 ID:???
これテーブルの枠線が表示しなかったんですがどうしてですか?IE6です。

<html><head><title>a</title><style type="text/css">
table {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 400px;
border-width: 10px;
border-color: black;
}
div {
text-align: center;
}
</style></head><body><div><table><tr><td>a</td></tr></table></div></body></html>

216Name_Not_Found :03/12/31 18:08 ID:???
>>214
「正かな遣い」で書いている人にいちいち反応するな。

217Name_Not_Found :03/12/31 18:47 ID:???
2chで煽られた香具師が明治神宮に爆弾設置宣言!警察官500人体制!
http://live4.2ch.net/test/read.cgi/mmonews/1072845014/
↑↑↑↑↑
お祭り会場!

218昔の人 :03/12/31 20:45 ID:???
>>215
枠線が表示“され”なかったのは、border-widthとborder-colorだけで
border-styleプロパティーを指定してないからではないでせうか。

219Name_Not_Found :03/12/31 20:57 ID:???
初期値が「none」なんですね!勉強になりました。
ご丁寧にも文法の指摘までしていただいて。

220Name_Not_Found :03/12/31 21:01 ID:???
>>215
ふつうは簡略化プロパティを使用しないかい?
border:10px solid #000; にすればいいのに。
cf. http://hp.vector.co.jp/authors/VA022006/css/box.html#border-shorthand-properties

221215 :03/12/31 21:04 ID:???
>>215
はいそうですね。初心者でした。
参考にします

222215 :03/12/31 21:05 ID:???
>>221>>220の間違い。

223Name_Not_Found :04/01/01 00:51 ID:???
旧かな旧字使いはアポ!

224Name_Not_Found :04/01/01 08:29 ID:???
↑あけまして、おめでたう。

225Name_Not_Found :04/01/01 21:06 ID:???
アホばっかりだな!

226Name_Not_Found :04/01/02 19:46 ID:???
文字の色の変え方を教えてください!
リンクは全部読みましたがわかりません!

227Name_Not_Found :04/01/02 20:02 ID:???
旧字旧仮名遣い=ウヨ=木違い

228Name_Not_Found :04/01/02 20:25 ID:???
>>226
ネタかな?
讀んでわからない人には、ここで説明してもわからないのではないかと思ふ。

229Name_Not_Found :04/01/02 20:42 ID:???
色の指定
http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs1-04.htm
color(前景色)
http://hp.vector.co.jp/authors/VA022006/css/colors.html#color
色(Colors)
http://hp.vector.co.jp/authors/VA022006/css/data.html#colors

230Name_Not_Found :04/01/02 21:44 ID:???
質問です。
<div>でstyle="float:○○;"を使って、divの箱を左右に並べます。これ自体に問題はないのですが、
その中で<ol>を使ったリストがあるのですが、左と右で通し番号を付けたいのです。

1. ○○ 5. ○○
2. ○○ 6. ○○
3. ○○ 7. ○○
4. ○○ 8. ○○

と言った感じです。可能ですか?
(もしガイシュツだったらスマソ)

231Name_Not_Found :04/01/02 21:58 ID:???
>>230
質問はageで。

順序付きリストのstart属性をCSSで指定したいのかな?

http://www.ne.jp/asahi/minazuki/bakera/html/reference/list#ol
しかし
>compact、start属性については、代替する属性/CSSプロパティはありません。
http://www.cybergarden.net/xhtml/attributes.html

CSS3でも無いのかね? 誰か無い理由を知ってますか。

232Name_Not_Found :04/01/02 22:08 ID:???
counterプロパティーで生成しろってことかしらん。
しかしOperaしか実装されてないし。↓
 http://is.vis.ne.jp/charts/css2_values/index.xhtml#counter

233Name_Not_Found :04/01/03 05:05 ID:arsUX4ir
<div title="hogehoge">
<p><abbr title="Internet Explorer">IE</abbr> 5.5<br>
<kbd>Alt</kbd>キー</p>
</div>

簡略に書くとこのような状態なのですが、
abbr要素のスタイルが適用されません。
lintでもCSS検証でも問題なかったのですが、なぜなのでしょうか。
(読みこむCSSの指定をまちがえているわけでもありません)
ブラウザはIE5.5です。

ttp://www.remus.dti.ne.jp/~a-satomi/nikki/
ここでは反映されて表示されるのですが・・・。

234Name_Not_Found :04/01/03 05:11 ID:???
少々わかりにくい書き方になったので訂正。
abbr要素だけは、通常のテキストと同様に表示されてしまいます。

いじっている途中のものを書くのもなんですが、
現在のスタイルはこんな状態になっています。
abbr {
cursor: help;
background-color: transparent;
font-style: normal;
border-width: 0px 0px 2px 0px;
border-style: dotted;
border-color: #333366;
}

235Name_Not_Found :04/01/03 08:00 ID:???
>233
abbr要素はIEが非対応じゃなかったっけか。IE6でも。
マークアップとして不適当になるがacronym要素やspan要素で代用するしかなさげ。

236Name_Not_Found :04/01/03 08:09 ID:???
>>233
そのサイトはJS使ってる。
JSをきってみ。

237Name_Not_Found :04/01/03 08:56 ID:???
>>233
http://www.akatsukinishisu.net/itazuragaki/id/copying_javascript
 http://www.akatsukinishisu.net/style/head.js
http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/06c2.html#d26n02

238233 :04/01/03 13:43 ID:???
いろいろ参考になりました。どうもありがとうございます。
IEの環境が早く整ってくれないことには、なかなか難しい問題ですね。
IEでないブラウザを使うような人のほとんどは
多少でもPCの知識を持っている人だと思われるので、
あまり<abbr>の恩恵がなさそうな気がします。

239Name_Not_Found :04/01/03 13:45 ID:???
>>238
abbrの恩恵って。

240Name_Not_Found :04/01/03 14:23 ID:???
hr 要素の線の太さ(size)はCSSではどうやって変更するのですか?

241Name_Not_Found :04/01/03 14:26 ID:???
>>240
デフォルトで線などないと思うんだけど。

242Name_Not_Found :04/01/03 14:46 ID:???
>>240
訊く前に、>>4のリンク先からすぐ見つけられるはずだ。

hr要素へのスタイル指定
 http://cssbug.at.infoseek.co.jp/misc/hr.html

243Name_Not_Found :04/01/03 15:05 ID:???
>>242
なんとかできました。ありがとうございます。
そこのリンク思いっきりスルーしてました。次からは気をつけます。

244230 :04/01/03 15:55 ID:2EneXQof
>>231
ageですか。気をつけますー。

>>232
これでつ!でもOPだけってのは…
地道に普通に1. 2. って打ちますよ...(´З`)チェッ
ありがとうございました。

245Name_Not_Found :04/01/03 16:57 ID:???
ここはスタイルシートの中身だけを取り扱うスレですか?
故あって、本文(BODY)の中でスタイルシートを定義したいのですが、
そんなことって許されるのでしょうか?

246Name_Not_Found :04/01/03 17:02 ID:???
>>245
HTMLの話ではないかと。
ちなみにHTML4.01にあるのはstyle属性だけ。もしくはscript

247Name_Not_Found :04/01/03 17:46 ID:???
list-item で

・△item
 ↑ここの隙間の長さを調整するのってどうやるんですか?

248Name_Not_Found :04/01/03 18:39 ID:???
padding-left

249Name_Not_Found :04/01/03 21:54 ID:???
>>248
ごめんなさい。小さくしたいんです。

250Name_Not_Found :04/01/03 22:05 ID:???
>>249
marker-offset


251Name_Not_Found :04/01/03 22:07 ID:???
>>249
liの中をdivでもpででも括って、それにmargin-leftでマイナス値、とか。

252Name_Not_Found :04/01/03 22:11 ID:???
marker-offsetに對應してゐるのはMozilla/Netscape7だけ。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/generate.html#marker-offset

253Name_Not_Found :04/01/03 22:20 ID:???
>>250
>>252
すいません、できればIEにも対応したいので…

>>251
試してみましたがダメでした(IE6)。

+長めの説
 明文章

というのを綺麗に出力したいんですが、テーブル組まないと仕方ないですかね…


254Name_Not_Found :04/01/03 22:38 ID:???
>>253
margin-leftでマイナス値、が駄目ならposition:relative;でleft:-1em;とか。
工夫しなさい。

255Name_Not_Found :04/01/03 23:24 ID:9bXmXTAb
net shopやるに、strictでサイト作ろう
というのどうでしょか?PC初心者。
HPビルダーがいいとこ?
なぜにstrict?わからんす、すんまそん・・

256Name_Not_Found :04/01/03 23:25 ID:???
わけわからん質問すな。strict HTMLスレッドへ行きなさい。>>255

257Name_Not_Found :04/01/04 00:27 ID:???
>>255はこっち。


Webサイト制作初心者用スレ vol.78
http://pc2.2ch.net/test/read.cgi/hp/1072860019

電子商店-オンラインショップ-スレッド
http://pc2.2ch.net/test/read.cgi/hp/1022242508


というかネットショップやるにも、その程度の事が判断できないレベルでは、
すべて自分でやるにしても一部外注するにしても必ず火傷をするぞ。
頭冷やして一から勉強してこい。

258Name_Not_Found :04/01/04 00:33 ID:???
擬似クラスと擬似要素って名前がどうして分かれてるんですか?

259Name_Not_Found :04/01/04 00:38 ID:???
要素とclassは別物だから。セレクタの優先度があるわけだし。

260Name_Not_Found :04/01/04 01:47 ID:???
疑似クラス関連で質問です。今リンクをhoverでボックスハイライトで表示してるんだけれど
画像リンクがあったとして、カーソルをその画像に持っていくと下の方にうっすらとハイライト
が残ってしまうのです。画像リンク要素だけボックスハイライトを無効にする事って出来ます?

261Name_Not_Found :04/01/04 02:07 ID:???
ボックスハイライトってナニ? 一般に通用する言葉で記述してくれないかな。

262Name_Not_Found :04/01/04 02:09 ID:???
>>260
>画像リンク要素だけボックスハイライトを無効にする事って出来ます?

ボックスハイライトが何かは知らんが、FAQの>>8を見れば解決する問題では。

263Name_Not_Found :04/01/04 02:27 ID:???
>>261

通常ブラウザはリンクを表示する時は大抵アンダーラインで示すでしょ。それをa:hover疑似クラスを
使ってそのリンク表示をアンダーラインからリンク文字を別の色で覆う様に表示してるんだけれど、
<a herf="./hoge.html"><img src="hoge.jpg"></a>とした画像を使ったリンクがあったら、その画像
リンクの下の方にa:hoverがかかっているので画像(img要素)だけa:hoverを適用させない様にしたい
のでつ。border周りも弄ってみたけど駄目ですた。

説明が下手で申し訳ない_| ̄|○

264Name_Not_Found :04/01/04 02:30 ID:???
リロードしたら答えが出てた
吊ってきます(´・ω・`)

265Name_Not_Found :04/01/04 02:50 ID:???
説明がヘタって言うか・・・
脳内用語使いたがる人って、どうしてこうなんだろ

266Name_Not_Found :04/01/04 03:05 ID:???
やっぱ駄目ですた・・・仕様書見てきます。お騒がせしますた_| ̄|○

>説明がヘタって言うか・・・
>脳内用語使いたがる人って、どうしてこうなんだろ

おーう、何とでも云ってくれ。ガンガン貶してくれ。他の人みたいに出来て当然な事が洩れには出来ないしな

267Name_Not_Found :04/01/04 03:56 ID:???
>>263
>リンク表示をアンダーラインからリンク文字を別の色で覆う様に表示してるん
意味わからん。
具体的に、どんなスタイル指定をしたのか、CSSのソースを出してくれ。
でないと何をしようとして何で駄目だったのか見えないから、助言できない。>>266

268Name_Not_Found :04/01/04 04:26 ID:???
a:hover img の場合だけ、
a:hover が適用されないようにするという意味かな?
hover状態になっても、画像だけは
アンダーラインをつけたくないということでしょ。
余計なことをたくさん書いているから、肝心なことが伝わっていない。

269Name_Not_Found :04/01/04 04:28 ID:???
いや、そもそも
a:hover img なんてものがあれば
自分も使ってみたいとは思うのだが・・・。
そういうのは無理なのかな。
過去に試したことがあるけれど、思い通りにはならなかった。

270Name_Not_Found :04/01/04 04:45 ID:/bU6QBQM
<div class="aaaaa">
で囲った中のpとかaにだけ、囲われていないpやaと別のスタイルを適用したい場合、
.aaaaa p{ }とか
.aaaaa a{ }
とかって書けばいいんですか?

271Name_Not_Found :04/01/04 06:28 ID:???
試してみればいいんじゃないですか?

272Name_Not_Found :04/01/04 09:11 ID:???
>>269
>a:hover img なんてものがあれば

ハア? ありますけど。
もしもし、下位要素(子孫)セレクターってわかってますか。
http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs2-02.htm
http://hp.vector.co.jp/authors/VA022006/css/selector.html#descendant-selectors



273Name_Not_Found :04/01/04 09:16 ID:???
>>270も、>>269のリンク先でお勉強したまへ。

274Name_Not_Found :04/01/04 11:58 ID:???
>>266
> 他の人みたいに出来て当然な事が洩れには出来ないしな
 出来ない、ってことと、自作の用語を使うことには関係が見受けられないんだけど。

275Name_Not_Found :04/01/04 12:25 ID:???
>>266
ボックスハイライト→背景色のことかと解釈してみたが(もしかしたら文字色かもしれないが)、
それは単に藻前さんがハイライトとして使用しているというだけのこと。
表現方法わからなければ、
a:hoverにbackground-color(文字色ならcolor)を指定して…とかそのまんま書けばいいんだよ。
下手に言い換えようとするから他人に伝わらない。

子要素がimgの時のみa:hoverでの指定を適用したくないなら、classを使うとかしたら?

276Name_Not_Found :04/01/04 13:39 ID:???
img:hover

277Name_Not_Found :04/01/04 21:05 ID:???
>>274
他の人みたいに日本語を上手に使う事が出来ないので

278Name_Not_Found :04/01/04 22:19 ID:???
>>277
なんなら英語で書いても良いよ。
語学力の問題ではなく、論理的に伝えたいことを伝える能力に欠如していることに気がつけ。


a:hover img {background-color: transparent !important}

279Name_Not_Found :04/01/04 22:57 ID:???
266じゃないけど、a:hover img{〜}でうまく出来ないな。
画像の下にテキストに付けた色が数pxぐらいはみ出る。
これはブラウザ依存なのかな?

280Name_Not_Found :04/01/04 23:07 ID:???
>279だけど、ソースさらす。なんかまずい?

<style type="text/css">
<!--
body{color:#000; background-color:#fff}
a:link {text-decoration:none;color:#000;background-color:#ccc;}
a.visited{text-decoration:none;color:#000;background-color:#ccc;}
a:hover{color:#fff;background-color:#f00;}
a:active{color:#fff;background-color:#00f;}

a:link img{text-decoration:none;color:#000;background-color:#ccc;}
a:visited img{text-decoration:none;color:#000;background-color:#ccc;}
a:hover img{color:#0f0;background-color:#0f0;}
a:active img{color:#fff;background-color:#00f;}
-->
</style>
</head>

<body>
<a href="x">画像だよ><img src="あーたら.jpg" alt="あーたら"></a>
</body>


281Name_Not_Found :04/01/04 23:32 ID:???
border

282Name_Not_Found :04/01/04 23:34 ID:???
>>280
そもそもaにボーダーが指定してあるので間に何が挟まってようが、
imgのボーダー消しても <a></a>間のボーダーは消えない。
もともと a imgにボーダーがかかってるわけではないので。

この質問頻出。


283Name_Not_Found :04/01/05 00:05 ID:???
じゃ次スレはテンプレ追加でよろしく。

284Name_Not_Found :04/01/05 00:09 ID:???
>>2読め、でいいんだけどな

285Name_Not_Found :04/01/05 00:41 ID:???
そんな殺生な・・・(・_・;)

286Name_Not_Found :04/01/05 01:21 ID:???
280 >>282
> そもそもaにボーダーが指定してあるので

a の border-widthを0にすればいいってこと?、、、じゃないよな。。。

これって、消せるんすか?まじで。
ちなみに、

<body>
<a href="x">画像だよ><br>
<img src="あーたら.jpg" alt="あーたら"></a>
</body>

これで画像の下にはみ出るa:hoverの色は消えますけど、そういうことじゃないと思うんだな。。。

287Name_Not_Found :04/01/05 02:14 ID:???
もしかして>>286の言いたいのは、>>280のソースで言うと、
hoverのとき画像の下に赤い部分があることを言いたいのかな?

288Name_Not_Found :04/01/05 02:30 ID:???
inline-tableとかの実例載ったサイト教えて下さい

289Name_Not_Found :04/01/05 04:44 ID:???
>>286
a:link imgにvertical-align:bottom;とでも指定すれば良いような。
テキストのline-hightよりimgがでかけりゃ赤い部分は隠れるはず。

…って、IE(5.5)で何かおかしいなぁ。
http://cssbug.at.infoseek.co.jp/detail/winie/b069.html
の影響?

つーか、ちょっとテストしてみたら壊滅的に変だぞIE…


290Name_Not_Found :04/01/05 09:49 ID:x3I3uJOw
テーブルの中の文字のサイズも一括で指定する方法はありますか?
どのようにすればいいのでしょうか。

291Name_Not_Found :04/01/05 10:07 ID:???
ハァ…?
普段はどうやって指定しているのかを聞くのも怖いな

292Name_Not_Found :04/01/05 11:04 ID:BTT/TPeg
CSSでlist-style-imageを使って箇条書きのマークを
自分でペイントで作ったgif画像にしようと思ったらちゃんと表示されませんでした(普通の黒丸になる)。
ところが、誰か他の人が作ったgif画像を指定したらちゃんと表示されました。
なぜでしょうか???

293Name_Not_Found :04/01/05 11:13 ID:???
それはCSSの問題か・・・

294Name_Not_Found :04/01/05 11:13 ID:???
>>292 パス(URL)を間違へてゐませんか。

295Name_Not_Found :04/01/05 11:21 ID:???
>>289
何が、どう変なのか。
報告たのみます。↓
 CSS/DHTMLバグ辞典スレッド 第3版
 http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50

296Name_Not_Found :04/01/05 11:34 ID:???
>>290 table, th, td {font-size:100%;}

297Name_Not_Found :04/01/05 13:07 ID:FQqSPchs
>>293自分もそう思いましたが今度は他のページでは正しく表示されていた画像を使ったら
やっぱり表示されなかったのです。
>>294URLはあっています。
なぜ?
ちなみにCSSは別ファイルにしてあって
ul {
list-style-image: url(list.gif)
}
list.gifはhtmlと同じディレクトリにあります。

298Name_Not_Found :04/01/05 13:14 ID:???
>>297
やはり問題はパスにあったか。自分で気づいてほしかったね。
>なお,CSS の外部スタイルシートにおける基準URIは,
>“ソース文書の URI” ではなく “外部スタイルシートの URI” です。
http://hp.vector.co.jp/authors/VA022006/css/data.html#uri


299Name_Not_Found :04/01/05 14:10 ID:???
もっと単純な部分でセミコロンが無いとかじゃね?

300Name_Not_Found :04/01/05 15:07 ID:???
おい藻前ら!厨な質問だがCSSを外部ファイルで管理していて@ルールを記述してない香具師はいるかい?
文字コードを合わせててもやっぱ明示的に@charsetで指定した方がブラウザに優しいの?
教えて偉い人(・∀・)

301Name_Not_Found :04/01/05 15:21 ID:???
>>300よ、なぜ>>4の解説サイトを読まないのか。
 文字コード宣言は行いましょう(CSS)
 http://www.mozilla.gr.jp/standards/webtips0023.html#c1

302300 :04/01/05 15:30 ID:???
>>301
今までHTMLと外部CSSの文字コードをShift JISにしていて特に問題なかったし
いちいち@ルールを追加するのが面倒臭かったのもあるが、やっぱ追加した方が
いいのね。サンクスコ

303Name_Not_Found :04/01/05 20:39 ID:???
286 >>287
そうっす。

>>289
> a:link imgにvertical-align:bottom;とでも指定すれば良いような。
> テキストのline-hightよりimgがでかけりゃ赤い部分は隠れるはず。

Mozillaでいけました。Safariはだめっす。IEは論外な状態です。

304Name_Not_Found :04/01/05 21:16 ID:HzaXKBc2
可能か不可能なのか解らないので質問させて頂きます。
http://www.geocities.co.jp/Playtown-Domino/4598/HTML_11.html←ここのページ
にあるようなテーブル内のスクロールなのですが
これの応用でEXCELの枠固定みたいなことは出来ないのでしょうか?
(行、列のヘッダ部を固定)

305Name_Not_Found :04/01/05 21:32 ID:???
>>304
IEオナニーで頑張って


306Name_Not_Found :04/01/05 23:03 ID:???
>>303
なんだIEってMacIEなのか。IE6ならちゃんと表示されるもの。
最初からOSとバージョンを明示してほしいね。

まあMacIEのバグならバグで報告しておいておくれ。
 CSS/DHTMLバグ辞典スレッド 第3版
 http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50

307Name_Not_Found :04/01/06 01:56 ID:???
303 >>306
> なんだIEってMacIEなのか。IE6ならちゃんと表示されるもの。
> 最初からOSとバージョンを明示してほしいね。

スマソ。こちらマカーOSX 10.2.6 でWinについてはわからないっす。

>289の方法で、画像の下のhoverの赤は、
Mozilla 1.2.1では、消える。
Safari 1.0(v85)、Opera 6.0で消えない。
IE 5.2では画像の下の赤が消えない上に、文字が緑になり文字背景の赤が画像の高さに沿って上に延びます。かなり変です。


308Name_Not_Found :04/01/06 05:11 ID:???
>307の補足。
vertical-align:bottom;を、
a:link img、a:visited img、a:hover img、a:active img、全てに付けてみた。
そしたら、Mozilla 1.2.1、Safari 1.0(v85)、IE 5.2では、画像の下のhoverの赤が消えた。
Opera 6.0で消えない。

309Name_Not_Found :04/01/06 05:18 ID:???
あ、、、a:link imgに付けるだけで>308と同じですね。

そして今更、>289を読み間違えてたことに気付いた。




   _| ̄|○




310遅レスながら290 :04/01/06 10:06 ID:???
>>296
ありがとうございます。できました。

311Name_Not_Found :04/01/06 10:29 ID:rPfZ52To
>>293
>>294
>>298
>>299
やっぱりURLが間違ってました
自信ありげに「URLはあってる」なんて言ってすみません。
ありがとうございました。

312Name_Not_Found :04/01/06 15:55 ID:???
>>165
何か今更ですが、名前空間付きセレクタは
CSS3 モジュールの1つ "Selectors" の 6.1.1

Selectors - 6.1.1 Type selectors and Namespaces
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#typenmsp

辺りで提案されています。まだ勧告候補(Candidate Recommendation)だけど。

313Name_Not_Found :04/01/06 18:15 ID:???
FAQのA3(>>6)の参照ページが移転した(させられた)みたいだ。
 overflow プロパティは擬似フレームも作成できる
 http://www2.u-netsurf.ne.jp/~alt/tips/overflow.html
 http://www2.u-netsurf.ne.jp/~alt/files/frame.html

経緯を知ると、XREAもinfoseek isweb もひどいプロバイダだと思った。
>誰かが不利益だと言いさえすれば内容如何に関わらず削除される
批判の自由などてんで考慮してないのだ。
cf. http://www.google.co.jp/search?sourceid=navclient&hl=ja&q=cache:http%3A%2F%2Fmar0%2Ehp%2Einfoseek%2Eco%2Ejp%2F

314Name_Not_Found :04/01/06 18:34 ID:???
にしても、一番ひどいのは「西久保希光」って人か。
プロバイダに告げ口してまで自分への批判を封じたいものかね。
それを鵜呑みにしてとにかく出てけってXREAも情けなや。
http://www.google.co.jp/search?sourceid=navclient&hl=ja&q=cache:http%3A%2F%2Fthat%2E2ch%2Enet%2Ftest%2Fread%2Ecgi%2Fnanmin%2F1071246734%2F

315Name_Not_Found :04/01/06 21:35 ID:???
批判を批判するのも自由、って言うか、お前らウザイ。xreaスレから出てくるな

316Name_Not_Found :04/01/07 00:27 ID:???
xreaスレってどこ? あと、批判の批判ももちろん自由だが、批判を封じるのはよくない。

317Name_Not_Found :04/01/07 02:18 ID:???
あー粘着ヴァカが住み着いちゃった

318Name_Not_Found :04/01/07 02:44 ID:???
こちらへ。
 CSSコミュニティの功罪を懷かしむスレ 16th
  http://etc.2ch.net/test/read.cgi/nanmin/1071246734/l50

319Name_Not_Found :04/01/07 11:32 ID:tH6uSX2A
http://web2ch.s31.xrea.com:8080/?plugin=attach&pcmd=open&file=oshiete.jpg&refer=Uploader
↑のように、cssを使って正しく配列するにはどうしたらいいのでしょうか?
HTMLならテーブルを使って簡単にできるんですが・・・

320Name_Not_Found :04/01/07 11:42 ID:???
div {float :left;}
div#none {clear : left;}

<body>

<h1>aaaa</h1>

<div>bbb</div>
<div>ccc</div>
<div>ddd</div>

<div id="none">eee</div>

</body>

激しく適当だがこれで十分だろ。
あとはmarginとかやるよろし。

321Name_Not_Found :04/01/07 11:51 ID:tH6uSX2A
できたあああぁぁぁ
ありがとうございました

322Name_Not_Found :04/01/07 12:01 ID:???
>>320-321
駄目! floatさせる要素にはwidth指定が必須!
MacIEとかで表示が崩れるよ。
FAQにもあるんだから、見てよね。

323Name_Not_Found :04/01/07 15:53 ID:???
あー、素で忘れてた
吊ってくる

324Name_Not_Found :04/01/07 22:06 ID:z3dcz5XN
指定した場所だけをCSSを無効にしたいのですが、どのようにすればいいでしょうか?

325Name_Not_Found :04/01/07 22:58 ID:???
>>324
そこだけクラス名与えてやって、そのクラスだけ「デフォのスタイル」を記述してやったらどうかね?

326324 :04/01/07 23:10 ID:???
>>325
初心者なんで、おっしゃってることを理解するのが難しいですが、そのヒントを元にネットで答えを探してみます。
ありがとうございました。

327Name_Not_Found :04/01/07 23:38 ID:???
>>312
ありがとうございました。

328Name_Not_Found :04/01/07 23:39 ID:???
>>326
こんな感じ。

em{
font-size : 3em;
font-weight : normal;
}
.foo{
font-size : 1em;
font-weight : bold;
}

em要素は3emで表示。でも、クラス名fooのem要素は太字でレンダリング、みたいな。

329Name_Not_Found :04/01/07 23:58 ID:???
>>326
id と class ぐらいはわからないの?
解らないのなら基本的なことを勉強すべし

330324 :04/01/08 00:14 ID:???
>>328
参考になります。

スタイルシートの基礎を勉強してきます。。
ありがとうございました。

331324 :04/01/08 00:36 ID:???
あと、一つだけ教えてください。
ttp://www.interq.or.jp/www1/da4393/begin/stkozo_5.html
↑ここにある二番目のHTML文書をメモ帳にコピーしてHTMLで保存してから開いても
どうもうまくいかないのです・・
どうしたらいいでしょうか・・

332Name_Not_Found :04/01/08 00:41 ID:???
>>331
全角スペースを全部消せ。

333Name_Not_Found :04/01/08 00:42 ID:???
>>324
全角スペースで字下げしてます。

334324 :04/01/08 00:53 ID:???
助かりました。

335289 :04/01/08 01:32 ID:???
今更だが、補足。

WindowsのIE5.5/6(標準/互換)にて確認。
vertical-align:bottomを行で一番heightが高い要素に指定すると、
vertical-align:topを指定したようなレイアウトになってしまう。
詳細はバグ辞典スレに報告しとく。

>>307の問題(文字背景が画像の高さまで延びる)については、どうも
規格解釈の範囲内のような気もする。
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q22
での"リーディング"が行内ボックスの中と外どちらに挿入されるか
明確には定められてないみたいだし…

…って、原文を確認したら
> User agents center glyphs vertically in an inline box,
> adding half-leading on the top and bottom.
か?これ"挿入"より素直に"追加"と訳した方が適切な気がするなぁ。

だとすると、行内ボックスが拡張されるIEの実装は駄目っぽいかも。


336289 :04/01/08 03:02 ID:???
補足の補足。

>>280の例に限った話なら、bottomの代わりにtext-bottomで対応可能。

337Name_Not_Found :04/01/08 22:59 ID:205CjgYs
1箇所だけaのhoverスタイルを変更したいのですが、どうしたら良いでしょうか?

338Name_Not_Found :04/01/08 23:02 ID:???
>>337
class id セレクタ

339Name_Not_Found :04/01/08 23:25 ID:???
>>337 とりあへず訊く前に>>324-330を讀んで貰ひたかった。

340337 :04/01/08 23:43 ID:205CjgYs
>>339
ごめんなさい。

341Name_Not_Found :04/01/09 00:26 ID:???
>>340
a#mage:hover{hogehoge}

-----------

<a href="hoge" id="mage">変えたいところ</a>

342Name_Not_Found :04/01/09 05:50 ID:???
何で341みたいなんが出てくるのかが解らない

343Name_Not_Found :04/01/09 08:54 ID:uu1TycfK
すみません質問なんですけどよろしいですか?

http://internet.watch.impress.co.jp/
例えばこういうページでリンクの色を変えて表示するために

a:link{color:#0000FF;}
a:visited{color:#800080;}
a:hover{color:#FF0000;}

ってやったんですけど、

左側の
■ ニュース
■ 特別企画
■ イベントレポート
■ リンク集
■ ダイジェストニュース
とかの色が変わんないんですよ。

それでちょっと調べてみたんですけど、タグに依存しないクラスっていうのになっていると思うんですが、
それをどうにかして上のが適応するようにできないですか?

344Name_Not_Found :04/01/09 08:57 ID:???
言いたいことはよく解らないが、>>1読んでこい

345Name_Not_Found :04/01/09 09:03 ID:uu1TycfK
ちなみにDonutpでCSS使ってます。

346Name_Not_Found :04/01/09 09:05 ID:uu1TycfK
<STYLE type="text/css">
<!--
.indextext{ font-size: 9pt}
A { TEXT-DECORATION: none }
A:hover { TEXT-DECORATION: underline }
--></STYLE>

スタイルシートに関してど素人なんですが
たぶんこの部分が原因なんだろうなぁという所まではいったんですが。


347Name_Not_Found :04/01/09 09:10 ID:???
なんとなく事情は解ったんだが、とにかくお前が今一体何をしようとしているかを
客観的に説明してくれ
ユーザースタイルシートがキーワードだ

348Name_Not_Found :04/01/09 09:21 ID:uu1TycfK
http://internet.watch.impress.co.jp/
このページをユーザースタイルシートで

a:link{color:#0000FF;}
a:visited{color:#800080;}
a:hover{color:#FF0000;}

にしたんですけど。

■ ニュース
■ 特別企画
■ イベントレポート
■ リンク集
■ ダイジェストニュース
■ 〜2003年7月記事一覧

<!-- 今月のバックナンバー -->
<TR>
<TD valign="top" width="16" class="text"><FONT color="#000000" size="2" class="indextext">■</FONT></TD>
<TD class="text" width="144"><a href="http://internet.watch.impress.co.jp/cda/news_backnumber/"><font color="#000000" size="2" class="indextext">ニュース</FONT></A></TD>
</TR>
<!-- /今月のバックナンバー -->

この部分が変わらないのでこの部分も変わるようにしたいということです。



349Name_Not_Found :04/01/09 09:29 ID:???
無理です
classじゃなくて、<font>のせいです
文句はこんな不細工なhtml書いた本人に言ってください

350Name_Not_Found :04/01/09 09:33 ID:uu1TycfK
<font color="#000000" size="2" class="indextext">ニュース</FONT>

この部分のせいで、
これにユーザースタイルシートを適応させる方法は無いということですか?

351Name_Not_Found :04/01/09 09:40 ID:???
>348
あーと、擬似クラスと"{"の間に一つ以上の空白文字が無いと認識しないIE様のバグがあるので、
a:link {〜〜} 以下同
のようにするとよろしかろ。

んで、
font { color: inherit; font-size: inherit; }
で解決しないかな。試してないから判らんけど。

352Name_Not_Found :04/01/09 09:43 ID:???
>>351
解決するわけ無いだろ

353