■ 2ちゃんねるは、ここのサーバを使ってるです。。。
 .jp ドメインお持ちのお客様大歓迎。maido3.jp
 .fm 取得代行します。(US) maido3.fm
 .ca 取得代行します。(US) maido3.ca
 .com .net .org 取得代行します。(US) maido3.com
 .cc .to .tv 取得代行はじめました。NEW
人気サイト
月々1,000円からの BinboServer.com 2ちゃんねるも使っている Big-Server.com
>> 2ちゃんねる、サーバ監視所

■掲示板に戻る■ ■過去ログ倉庫めにゅーに戻る■
/*CSS、スタイルシート質問スレッド【5】 */
1 名前: Name_Not_Found 投稿日: 01/11/06 20:51 ID:qftEYrKp
Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
>>2も参考に。
【過去ログ】
 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/test/read.cgi/hp/996828258/

【CSSと特に関係ない初心者質問はこっちで】
・☆ Webサイト制作初心者用スレッドver12 ☆
 http://pc.2ch.net/test/read.cgi/hp/1005035374/

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc.2ch.net/test/read.cgi/hp/991666454/
・/*CSSでイケてるデザインサイト { number:2 }*/
 http://pc.2ch.net/test/read.cgi/hp/998894057/
・* CSS { イケてるスタイルを:"作れ";}
 http://pc.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
 http://pc.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ その2
 http://pc.2ch.net/test/read.cgi/hp/1003378794/


2 名前: ご参考まで 投稿日: 01/11/06 20:52 ID:qftEYrKp
【仕様書】
・CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1-961217.html
・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

【その他資料など】
・W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
・ごく簡単な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
・三日坊主++の部屋
 http://east.portland.ne.jp/~sigekazu/
・CSS Laboratory対応表・一覧
 http://www.inter-cool.net/~phantasm/wdzone/note/index.html


3 名前: Name_Not_Found 投稿日: 01/11/06 23:10 ID:bUC3L4H8
おぉ、もう五代目なのね。新スレおめでとうございます。


CSSがもう少し普及してくれれば(と言うか実装がいけないんだけど)、
authorも大分楽になるのになぁ……って、その時はもう新しい仕様が出てるか……鬱。


4 名前: 仮死 投稿日: 01/11/07 02:30 ID:TDxZUDmC
スレ立てサンクス


5 名前: Name_Not_Found 投稿日: 01/11/07 09:47 ID:wdjsf67A
しっつも〜んっす
リストを横に並べる方法を教えてたもれ


6 名前: Name_Not_Found 投稿日: 01/11/07 10:23 ID:ufjNxgEB
li { display:inline }

これかな?


7 名前: Name_Not_Found 投稿日: 01/11/07 19:11 ID:gnsN5y2y
>>6
お〜〜thx!
アリガタヤアリガタヤ


8 名前: Name_Not_Found 投稿日: 01/11/07 20:47 ID:Y6XObqwU
行間や文字と文字の幅って単位どれを指定すればよいのですか?
ポイントとかピクセルとかパーセントとかありますけど


9 名前: Name_Not_Found 投稿日: 01/11/07 20:57 ID:gnsN5y2y
ワシはemにしとるよ


10 名前: Name_Not_Found 投稿日: 01/11/07 22:06 ID:wagdf2cZ
漏れもem。でも、%のほうがいいという噂


11 名前: Name_Not_Found 投稿日: 01/11/07 22:38 ID:32SaoEjG
自分は %。日記や小説などの長文(日記が長いんだ俺)は 150%。
ちなみに IEのデフォルトがだいたい 120%、ネスケ4.xが 100%相当。らしい。


12 名前: Name_Not_Found 投稿日: 01/11/07 22:38 ID:32SaoEjG
↑あ、行間ね。


13 名前: 8 投稿日: 01/11/07 23:20 ID:vYpB0Oct
有難うございます。
文字間の幅は皆さんどれくらいとってますか?


14 名前: 8 投稿日: 01/11/07 23:28 ID:vYpB0Oct
文字間の幅はとると見にくくなるものなのですか?


15 名前: Name_Not_Found 投稿日: 01/11/07 23:38 ID:GtW/0e6j
letter-spacing は IE がバグ持ってたはず。 どんなんだっけ。


16 名前: name{ not:found} 投稿日: 01/11/08 00:47 ID:n0AOcnbu
画像の周りに1ピクセルの枠をつけるのに、
img {border:1px solid #000000}
だとNN4.xでは対応してくれません。なんとかCSSで切り抜けたいのですが、
どうにかならないものですかこれ?


17 名前: Name_Not_Found 投稿日: 01/11/08 06:25 ID:voGAtLzG
>>16
一括指定ではなく、boeder-lett/-right/top/bottomでバラバラに指定しよう


18 名前: Name_Not_Found 投稿日: 01/11/08 06:28 ID:unaHdYI0
>>16
N4はクソだからな…
確かダメなんじゃなかったかな?
俺も画像リンクに枠がつくのを無しにしたくて
a img { border: none; }
とかやったけどN4は無視してくれた記憶がある。

>>8
俺は文字間隔は特に指定してない。
もし指定するとしたら em を使うと思う。
行間は140%程度にしてるかな。


19 名前: Name_Not_Found 投稿日: 01/11/08 07:07 ID:pSyNWMBp
>>18

A IMG {
 border:0px none;
 color:#ffffff;/*NN4はborder:0px none;だけだと画像リンクの枠線が消せないので*/
}


20 名前: Name_Not_Found 投稿日: 01/11/08 07:12 ID:pSyNWMBp
>>15
letter-spacingがバグるのはMacIEだけ。WinIEは大丈夫。


21 名前: まかー 投稿日: 01/11/08 10:56 ID:pYRbEcdQ
>>20
そりゃtex-align:justifyじゃねーの?


22 名前: まかー 投稿日: 01/11/08 11:00 ID:pYRbEcdQ
あうー、ゴメンzspcで調べたらおかしかった。


23 名前: Name_Not_Found 投稿日: 01/11/08 16:09 ID:5IhISpav
>>20-22
「自分の文書を「可哀想なマカーにも快適に読ませてあげよう」という、愛に満ちた方おられましたら、@media screen{}にでも収めて」とのこと。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001_06a.html#day03num01


24 名前: Name_Not_Found 投稿日: 01/11/09 14:48 ID:WZGK6zQz
HTML文書から、呼び出すスタイルシートのレベルを明示的に指定する方法ってあるんでしょうか。
link rel="stylesheet" type="txt/css"
だと、CSS1かCSS2かの区別ってないですよね。

CSS1はCSS2のサブセットになっているから、必要ないといえば必要ないのかもしれませんが。


25 名前: Name_Not_Found 投稿日: 01/11/09 14:51 ID:SyoDdTC9
>>24
>HTML文書から、呼び出すスタイルシートのレベルを明示的に指定する
なんでそんなことしたいと思ったの?


26 名前: Name_Not_Found 投稿日: 01/11/09 15:38 ID:ZT5rYYOa
ブラウザの実相状況に合わせたいと思われ。
<script language="JavaScript1.x">の感覚では。


27 名前: Name_Not_Found 投稿日: 01/11/09 15:52 ID:SyoDdTC9
CSS1だけOKでCSS2はダメ――みたいにきっちりわかれてるブラウザなんてあるの?
ブラウザの実装に合せて振り分けするなら、別の方法があるし。
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm


28 名前: Name_Not_Found 投稿日: 01/11/09 16:06 ID:W9SwMvHr
>>24
関係ないけど、CSSのContent-Typeはtext/cssだと思われ。


29 名前: 24 投稿日: 01/11/09 16:08 ID:WZGK6zQz
>>HTML文書から、呼び出すスタイルシートのレベルを明示的に指定する
>なんでそんなことしたいと思ったの?

自分が書いているところでCSS1しか使っていない(というか知識がなくて使えない)ので、
そこらへんをきっちり書けたらちょっといいかな、と思ったのです。

わざわざ自分の無知無能を晒すこともないスね。
逝きます。


30 名前: Name_Not_Found 投稿日: 01/11/09 16:31 ID:Dm1WWMT9
>>29
割とよく使用されるA:hoverもCSS2ですよ。使ってないんですか?


31 名前: 投稿日: 01/11/09 17:35 ID:HbeHohjV
行高
line-heightは1.5か1.75がよい
日本語にはね。


32 名前: Name_Not_Found 投稿日: 01/11/10 06:46 ID:AM0+n4hD
シツモンなんですけども、tableじゃなくスタイルシートでレイアウトするメリットというのはいったいなんなんでしょう。。


33 名前: Name_Not_Found 投稿日: 01/11/10 07:06 ID:oms6jngk
>>32
・文書構造と見栄えの分離。
・ほかに閲覧機器の種類によって表示を変えることも可能。(ディスプレイ表示用と印刷用でスタイル変えるとか)
・スタイルシートに未対応の古い環境でも正常に表示できる。


34 名前: Name_Not_Found 投稿日: 01/11/10 09:48 ID:wpMYZ2oz
ガイシュツだったらごめんなさい。
IE6ってスクロールバー関連のCSSに対応していないんですか?
5.5の時はちゃんと出てたんですが…。
独自CSSはやっぱり消える運命なんですかね…。


35 名前: Name_Not_Found 投稿日: 01/11/10 10:18 ID:7Tsuvkfx
>>34
IE6使っている人に聞いたけど、対応しているって話ですよ。
私はまだIE5.01なので確認できませんが。


36 名前: Name_Not_Found 投稿日: 01/11/10 11:58 ID:sMfTtZsw
>>34
bodyでなくhtmlに指定すべし。


37 名前: Name_Not_Found 投稿日: 01/11/10 12:00 ID:B4nDVf7I
>>32

たとえば、CSSでイケてるデザインスレにageられているようなところのいくつかには
スタイル選択スクリプトなんてのが仕掛けられていて、デザインを何種類かから選べたり
するんだが、そういうのをクライアント側だけで対応するなんて、CSSでないと無理。

それは>>33氏がいう「文書構造と見栄えの分離。 」の応用事例。

まあ、複数のCSSファイルを用意するような凝ったことをしないまでも、外部CSSファイル
の数字をちょいちょいと書き換えて、サイト全体の見た目を簡単に変えられるこの快感
を一度覚えてしまうと、TABLEレイアウトなんてやってられんし、そういう経験を踏まないと
なかなかわかってもらえんかも。


38 名前: Name_Not_Found 投稿日: 01/11/10 13:20 ID:ruqcb/eJ
>>32
スタイルシートはテーブル・レイアウトの代用だけのためのものではなく、
もっと表示スタイル全般に関して色々できる可能性のあるものですよ。
まあご存知の上でテーブル・レイアウトとだけ比較したいのだったらいいんですが。


39 名前: 32 投稿日: 01/11/10 14:16 ID:fWo2YqWu
>>33
>>37
>>38
解説有り難うゴザイマス
CSSイケてるスレできれいなサイトのソースを見てびっくりです。
dt?dd?暗号?でtableみたいなレイアウトが出来てる!って。
>スタイル選択スクリプトなんてのが仕掛けられていて、デザインを何種類かから選べたりする
みたいなのはいきなり無理でしょうが、tableのレイアウトをcssで表現してみようかと思います。
htmlについての知識も古いので(HTML3.0)一から勉強してきます。
有り難うございました!


40 名前: Name_Not_Found 投稿日: 01/11/10 16:31 ID:evNrlZDn
HTML3.0 !!

そりゃ勉強したほうが良いよ…。


41 名前: Name_Not_Found 投稿日: 01/11/10 22:23 ID:g3O03Rra
>>39
3.2じゃなくて3.0ってあたりが漢だねぇ…


42 名前: Name_Not_Found 投稿日: 01/11/10 22:30 ID:cvWtKdrs
>dt?dd?暗号?でtableみたいなレイアウトが出来てる!

って、テーブルレイアウトばっかやってた頃の私と全く一緒だ。(笑)
え?<div>でやってんの?出来るのか?そうなのか?とか
<ul><li>なのになんでそんな事してんの!?オレもやりて〜!!みたいな。
なつかしい・・。


43 名前: Name_Not_Found 投稿日: 01/11/10 23:16 ID:m4e5mhhl
>>42

漏れもそんな感じ。
もう何年も前ですが、自分より詳しそうな人のソースを見ると、自分と全く違う
タグ使いで、そのあたりから興味を持ちだしました。
好奇心は大事です。


44 名前: Name_Not_Found 投稿日: 01/11/10 23:20 ID:BxafCuFe
>>39
まず3.0ってのが問題ありだな。
その知識はどこで仕入れたんだい?
本?だったらその本は今すぐに捨てることをお勧めする。


45 名前: 44 投稿日: 01/11/10 23:24 ID:BxafCuFe
僕の場合、HTMLを最初に習ったときに、いいHTMLの書き方を習ってたらしく、それをそのままひきずってたんで結構良かったとおもう。


46 名前: オカダ 投稿日: 01/11/11 01:57 ID:9TQLeGFi
position:fixed;
……対応してないブラウザがけっこう多いので、
http://hp-design.net/dhtml/sample-menuelevatenavi.html
↑のダイナミックHTMLサンプルを使ってました。
ところがIE6標準モードでは、これが動かないのです。
IE6の標準モードで、position:fixed; と同等の効果を
出せる方法はないものでしょうか?
対応ブラウザはIE6の標準モードに限定でよいのですが……。


47 名前: こんなページがあったよ。 投稿日: 01/11/11 05:48 ID:l/thuOpR
「 IE6 と IE5.5 の互換性について」
http://hp-design.net/announce/ie6_ie55.html


48 名前: Name_Not_Found 投稿日: 01/11/11 12:36 ID:CK+yJWZM
>>46

固定したい部分をfixedするのでなく、それ以外の部分をoverflowさせる手がよく使われてる
ようですね。


49 名前: Name_Not_Found 投稿日: 01/11/11 12:47 ID:JqjS/LMb
>>48
なるほどそういう手が、と一瞬思ったが
それだと閲覧者がスクロールするのにPageUp/Downキーやカーソルキー、
ヘタするとホイールまで使えなくならない?


50 名前: オカダ 投稿日: 01/11/11 12:52 ID:5La0DDG4
>>47
ご指摘ありがとうございます。
私もそのページのことは知っていましたが、
将来的なことも考えて、標準ではない「互換モード」を
利用したくないと思っています。
margin:0px auto;
でセンタリングされないといった問題もありますので。

>>48
なるほど、固定したい部分以外をoverflowさせるのですね。
どうもありがとうございました。助かります。


51 名前: Name_Not_Found 投稿日: 01/11/11 13:03 ID:CK+yJWZM
>>50
http://www.cc-net.or.jp/~piro/
ここの"Flat"が実例でし。


52 名前: Name_Not_Found 投稿日: 01/11/11 15:26 ID:+Il47Wmd
>>50
overflowを用いた擬似フレーム
http://dfj.cool.ne.jp/html/overflow.html
http://pc.2ch.net/test/read.cgi/hp/991666454/118-129


53 名前: Name_Not_Found 投稿日: 01/11/11 16:55 ID:/bvcpGQH
<hr size="1" width="600" align="left">

このタグを同じ見栄えのまま、スタイルシートに置き換えて方法を教えて下さい。
どのスタイルシートに置き換えて良いのか、イマイチ分かりません。
対応ブラウザはIE5だけになっても構いません。


54 名前: Name_Not_Found 投稿日: 01/11/11 17:04 ID:rptySOIh
hr
{display:none;}


55 名前: Name_Not_Found 投稿日: 01/11/11 17:25 ID:FoGWIcuV
HR{heigh:1px; widyh:600px; float:left;}


56 名前: Name_Not_Found 投稿日: 01/11/11 17:25 ID:BwYaIF/O
hr
{
width:600px;
height:1px;
margin-left:0;
margin-right:auto;
text-align:left;
}
CSS対応ならこれぐらいで動くだろう。


57 名前: Name_Not_Found 投稿日: 01/11/11 18:03 ID:nfJwu7ZO
IE6ってbox-sizing対応してないんですか?
初期値は変わってるのに。


58 名前: 53 投稿日: 01/11/11 18:38 ID:/bvcpGQH
>>55
自分も、float:left を指定していましたが、これだとIEで
適用されないんです。

>>56
text-align:left を使うんですね。知りませんでした。

協力してくださってありがとうございました。感謝。


59 名前: Name_Not_Found 投稿日: 01/11/11 20:38 ID:SrnH+3/U
>>57
文書型宣言によって自動的にモードを切り替えますが、
box-sizingプロパティ自体には対応してません。


#CSS3が勧告になったら対応してくれるのかなぁ……って、いつのことやら(泣)。


60 名前: オカダ 投稿日: 01/11/11 20:49 ID:5La0DDG4
>>51
>>52
overflowを用いた擬似フレームについて、よくわかりました。
感謝してます。

>>49
たしかに擬似フレームですと、ページが表示された直後では
ホイールなどが効きません。けれども、スクロールさせたい
ボックスの内部を一回左クリックしますと、以降はOKでした。


61 名前: 57 投稿日: 01/11/12 00:26 ID:rd+QbC5g
>>59
レスどうもです。やはりですか。すると、

{
width: 100%;
padding: 1em;
-moz-box-sizing: border-box;
}

こういうケースでは、IE6だけ横バーが出るのを回避できないことになりますが、
これはどうしたら・・・。泣き寝入りでしょうか。


62 名前: Name_Not_Found 投稿日: 01/11/12 00:38 ID:fsUEPWRV
>>61
XHTMLにすればIE6でも互換モードになるから大丈夫。


63 名前: Name_Not_Found 投稿日: 01/11/12 00:40 ID:RAvGcurV
>>61
overflow-x:hidden;
overflow-y:auto;
を追加すればいいと思われ。


64 名前: 白夜 投稿日: 01/11/12 00:40 ID:l7oQBdIs
質問です。
画面をスクロールさせても文字が追従してくるのって
スタイルシートで出来るんでしょうか?

例えば画面右上にトップに戻るリンクがあるとして
画面を1番したまでスクロールさせても
ちゃんと右上にトップへのリンクが表示されてるようなものです。

よろしくお願いします。


65 名前: 57 投稿日: 01/11/12 01:48 ID:rd+QbC5g
>>62-63
ありがとうです。
>XHTML
移行となると厄介ですが、
いよいよとなったらせざるを得ないかも知れないですです。。。

>overflow-x
当面はそれで誤魔化そうと思います。

>>64
Moz, N6, MacIE5でなら可能です。(position: fixed;)
ただしWinIEがさっぱりなので、使わないのが無難です。

エスケープ文字を用いて、IEはabsolute、Mozはfixedにする方法があったような・・・。
これかな?
http://www.cc-net.or.jp/~piro/latest/2001/09.html


66 名前: Name_Not_Found 投稿日: 01/11/12 02:24 ID:ck3m+tUp
>>64
ここみたいなの?
http://www.inter-cool.net/~phantasm/wdzone/index.html
だったら、それがいま話題になってるoverflowによる擬似フレームです。


67 名前: 調布 投稿日: 01/11/12 02:38 ID:M2qEUUtY
間違えてスレッド4の方に質問してしまいました、あらためて・・・・

縦に長いTABLEを印刷したら、改頁の時にセルが分断されました。
そこで、10行毎に <TABLE>・・・</TABLE> とやって、
スタイルシートの印刷時の改ページの指定を
TABLE {page-break-after:always;}
とやったら、紙1ページにTABLE10行分となって具合が良いのでが、
ブラウザーIE5.5で見ると、TABLE10行毎に、ワケメができて
カッコ悪いです。ブラウザーで見た時にTABLEをすっきりつなげるには
どんな手段があるでしょうか?


68 名前: Name_Not_Found 投稿日: 01/11/12 03:35 ID:ck3m+tUp
10行づつのtableを作るのはムダな手間です。一つの大きなテーブルで十分。
.printarea {page-break-after:always;}
とでもして、
その表の10行ごと、つまり10箇目のTR要素ごとに
<TR class="printarea">とclass指定を振ってはいかが。


69 名前: かん 投稿日: 01/11/12 07:55 ID:rvAgDCiT
すいません…
tableの中にtable入れた文字がcssの影響を受けないんですけど…
どうしたらいいでしょうか?


70 名前: yuu ◆xo3ilszg 投稿日: 01/11/12 08:50 ID:94/SBoem
>>69
tdにもスタイルつけたらいいんじゃない?
td td とか。


71 名前: Name_Not_Found 投稿日: 01/11/12 09:28 ID:vxLkEX4S
>>65
WinIE に position: fixed; を使うと、効かないこと以外に何かあるんですか?


72 名前: Name_Not_Found 投稿日: 01/11/12 14:50 ID:xCU/QjX1
>>69
もしかしてネスケ4の話ですか。
あれはダメです。Cascading Style Sheetの解釈がバグだらけです。
バグらないものだけにすると、NC4.xにはごく簡単なスタイルしか適用させられません。
どうしてもネスケ4でってことなら、JavaScript Style Sheetでやるしかないかも。


73 名前:   投稿日: 01/11/12 16:30 ID:bwByNHEs
>>67
table に margin を指定するとか(できたっけ?)
>>68
確かに無駄だね。
まぁ、替わりにtableの中身が大きすぎると画面で表示が遅くなるけどさ。


74 名前: Name_Not_Found 投稿日: 01/11/12 18:25 ID:CI1CCkMK
イメージに色付の枠線を表示させたいのですが、
{ border-style:soid; border-color:#ffffff; }
でいいんでしょうか??
ぜんぜん表示されないんですが、もしかして激しく間違ってるんでしょおか。


75 名前: Name_Not_Found 投稿日: 01/11/12 18:42 ID:HjO/TVsq
>>74

soid→solid


76 名前: 白夜 投稿日: 01/11/12 18:52 ID:b9vETjRh
>65
うーん、WinIEじゃ、ダメなんですか。
ありがとうございます。

>66
そう!こんな感じです!
overflowですか!ありがとうございます。
早速、やってみます!


77 名前: 74 投稿日: 01/11/12 19:10 ID:tps0pmT4
>>75
ありがとうございました。
スペル間違ってただけッスね。恥ずかし〜。


78 名前: Name_Not_Found 投稿日: 01/11/12 19:33 ID:oZVaay7p
img{display:none}にしても画像はDLされちゃうのでしょうか?


79 名前: Name_Not_Found 投稿日: 01/11/12 20:04 ID:gI7mQWTZ
どうやらWindows版IEの5.01以降だと
日本語フォントは10pt以下にならないような気がするんですが
実際のところどうなっているんですか?


80 名前: Name_Not_Found 投稿日: 01/11/12 20:40 ID:Qf3SM3G6
>>78
される


81 名前: 調布 投稿日: 01/11/12 21:15 ID:IHsWirg5
>68
>73 ありがとうございました。
<TR class="printarea">でうまく出来ました、
ただ、私の環境では、
<TR class=printarea>
としないと、 Internal Server Error
と言う表示が出てしまいました、
スタイルシート辞典のCLASSのページにも ” ” を付けるようになっていた
のですが・・・・
あと私の感想ですが、印刷した時の10行づつの区切れは、
<TABLE>・・・</TABLE> の方がスッキリしているようです。
今、marginとは何か調べているところです。


82 名前: Name_Not_Found 投稿日: 01/11/12 21:17 ID:oZVaay7p
>>80
ムムム・・ありがとうございますた。

もう一つ質問してごめんなさい。

111
222
333
444
555
666

縦にずらーっと並んだ行を

111 333 555
222 444 666

みたいにしたいのですが、table使わないとダメ?
どうみても表じゃない内容なので、できればcssを使って何とかしたいのです。


83 名前: 白夜 投稿日: 01/11/12 21:18 ID:b9vETjRh
すみません。
66さんに教えてもらった擬似フレームのやり方がいまいちわかりません。

以下にソース貼ります。

□HTML□
<DIV class="contents">
<SPAN>TOP</SPAN>
<A href="column.html">COLUMN</A>
<A href="bbs.html">BBS</A>
<A href="link.html">LINK</A>
<A href="mail.html">MAIL</A>
</DIV>

□CSS□
DIV.contents {
margin: 5px;
padding: 0px;
float: right;
}
DIV.contents A:link, DIV.contents A:visited {
margin: 0px 0px 0px 2px;
padding: 0px;
width: 100px; color: #000000;
font-size: 8pt; font-weight: bold;
text-align: center;
background-color: #cccccc;
border-style: solid;
border-color: #ffffff #666666 #666666 #ffffff;
border-width: 2px;
}
DIV.contents A:hover {
margin: 0px 0px 0px 2px;
padding: 0px;
width: 100px; color: #ffffff;
font-size: 8pt; font-weight: bold;
text-align: center;
background-color: #999999;
border-style: solid;
border-color: #666666 #cccccc #cccccc #666666;
border-width: 2px;
}
DIV.contents SPAN {
margin: 0px 0px 0px 2px;
padding: 0px;
width: 100px; color: #ffffff;
font-size: 8pt; font-weight: bold;
text-align: center;
background-color: #999999;
border-style: solid;
border-color: #666666 #cccccc #cccccc #666666;
border-width: 2px;
}

と、いう風になってます。

ドコにoverflowを指定するんでしょうか?
何度もすみません。お願いします。


84 名前: ちょこら 投稿日: 01/11/12 21:26 ID:Zwxh/9uS
>>83
どこをどう固定したいのか、
とかも書かないとわからないよ。


85 名前: 白夜 投稿日: 01/11/12 21:28 ID:b9vETjRh
>84
すみません。
DIVで囲んだトコ全て固定したいんです。


86 名前: Name_Not_Found 投稿日: 01/11/12 21:29 ID:BsF8WPuc
>>82

<div style="float: left">
111
222
</div>
<div style="float: left">
333
444
</div>
<div>
555
666
</div>

とか


87 名前: 投稿日: 01/11/12 21:31 ID:cvHMxzRB
>86
お行儀よく width も指定してあげてね.
この場合 33% とか?


88 名前: 白夜 投稿日: 01/11/12 21:37 ID:b9vETjRh
85の訂正
DIVで囲んだトコをページ右上に固定したいです。
よろしくお願いします。


89 名前: ちょこら 投稿日: 01/11/12 21:44 ID:Zwxh/9uS
<DIV class="contents">
<SPAN>TOP</SPAN>
<A href="column.html">COLUMN</A>
<A href="bbs.html">BBS</A>
<A href="link.html">LINK</A>
<A href="mail.html">MAIL</A>
</DIV>

これ以外に
<div class="main">

</div>

というのを作っておいて、

body {
overflow: hidden;
}

.main {
width: 100%;
height: 100%;
overflow: auto;
}

.contents {
position: absolute;
top: 1em;
right: 1em;
/*位置は適当にね*/
}

これでいいんじゃないかな。
間違ってたら誰か訂正お願いします。


90 名前: ちょこら 投稿日: 01/11/12 21:44 ID:Zwxh/9uS
>>89>>85,>>88
でした。


91 名前: ちょこら 投稿日: 01/11/12 21:49 ID:Zwxh/9uS
>>89
忘れてた。

body のスタイル指定に
margin: 0;
を追加してください。


92 名前: 白夜 投稿日: 01/11/12 22:02 ID:b9vETjRh
ちょこらさん!出来ました!
親切に教えていただきありがとうございます!


93 名前: Name_Not_Found 投稿日: 01/11/12 23:39 ID:UJ84oqOB
>>81
table {margin-top: 0; margin-bottom: 0;}
で、テーブルの上下の余白(マージン)が無くなります。


94 名前: Name_Not_Found 投稿日: 01/11/13 02:58 ID:ygQgQPVc
>>79
俺の5.01では font-size:1pt; とかやるときちんと激しく小さい読めない字になるが。

>>81
>ただ、私の環境では、 <TR class=printarea> としないと、
>Internal Server Error と言う表示が出てしまいました、
CGIで出力するときに " をエスケープしてないという初歩的なミスでは?


95 名前: 初心者 投稿日: 01/11/14 01:39 ID:ONFQTcP5
<STYLE type="text/css">
<!--
BODY {
color: #666666;
background-color: #ffffff;


/*リンク部分の下線を消去*/
A:link, A:visited, A:active, A:hover { text-decoration: none ;}

/*リンク部分の色*/
A:link { color: #666666 ;}
A:visited { color: #666666 ;}
A:active { color: #666666 ;}
A:hover { color: #333333 ;}

/*文字の位置*/
DIV { text-align: center ;}
P { text-align: center ;}
TD { text-align: center ;}
-->
</STYLE>

NN4.5でみると、リンクの設定以外は認識してくれますが
IE6で見ると思いっきりシカトされてしまいます・・・・
どう書いたら認識してもらえるでしょうか


96 名前: Name_Not_Found 投稿日: 01/11/14 01:57 ID:HSh+XG8c
質問はあげれ。


97 名前: 投稿日: 01/11/14 01:58 ID:wVDsvK8m
>95
どうなることを期待して,どうならないのかを書かないことには,
誰にもどうにもしようがないと思うのですが….
関係ないとは思うけど,
・<head></head> 内に書いてる?
・<head></head>内でそれより前に <meta http-equiv="Content-Style-Type" content="text/css"> って書いてる?


98 名前: 初心者 投稿日: 01/11/14 02:07 ID:ONFQTcP5
>>97
><head></head> 内に書いてる?
><head></head>内でそれより前に <meta http-equiv="Content-Style-Type" content="text/css"> って書いてる?
はい。

何がしたいのかというとリンク部分の色を指定し、
また、リンク部分の下線を表示させたくないんです


99 名前: 初心者 投稿日: 01/11/14 02:08 ID:ONFQTcP5
sageてしまいました・・・すみません


100 名前: 投稿日: 01/11/14 02:19 ID:wVDsvK8m
>98
そのままコピー&ペーストしたんだよね?
だとしたら BODY の閉じカッコ } が全角なのが原因.


101 名前: 初心者 投稿日: 01/11/14 02:26 ID:ONFQTcP5
>>100
うわ、、、致命的なミス(w
ご指摘ありがとうございます。

でも何故か下線は消えないのですが・・・


102 名前: 投稿日: 01/11/14 02:30 ID:w877rQwV
>95

A:link { color: #666666 ; text-decoration: none ;}
A:visited { color: #666666 ; text-decoration: none ;}
A:active { color: #666666 ; text-decoration: none ;}
A:hover { color: #333333 ; text-decoration: none ;}

なんでこうなるのかは知らん


103 名前: 初心者 投稿日: 01/11/14 02:35 ID:ONFQTcP5
>>102
ありがとうございます。できました!

>>95のやつは本で調べた通りにやったんですがね・・・・


104 名前: 投稿日: 01/11/14 02:51 ID:wVDsvK8m
>103
まだ見てるかな…少なくともうちの IE6 じゃちゃんと消えるんだけど.
もちろん underline にすれば下線が出るし.インターネットオプションの「リンクの下線」の
ところもいろいろ変えてみたけど関係なさげ.

で,上手くいくようになれば a{text-decoration: none;} だけでいい.
上手くいかないうちは原因不明なので何とも言えないが.

しかし…もちろんわざとだろうが,来た人はリンクかそうじゃないかどうやって判断するのさ?


105 名前: Name_Not_Found 投稿日: 01/11/14 04:53 ID:8oTLdrCm
>>104
うちのIE5.5でも>>95のスタイル記述でちゃんと下線は消えました。
なんかシートかhead内に他によけいな指定を入れてるのでは? >>103


106 名前: 白夜 投稿日: 01/11/14 07:11 ID:6TaUiexe
>103
漏れもIE5.5でa{text-decoration: none;} だけで桶だたよ


107 名前:   投稿日: 01/11/14 13:38 ID:UETipLgW
<DIV style="text-align:justify; text-justify:distribute-all-lines">
aiueo</DIV>
どうして均等割付はtext-justify:distribute-all-linesの部分も付けなきゃ
有効にならないんですか?
あと、「distribute-all-lines」の値を変えると何か変わりますか?


108 名前: 初心者 投稿日: 01/11/14 15:06 ID:kg9DOzkK
>>100さんに指摘された全角を半角に直したらちゃんと機能しました
(下線が表示されなかったのはフレームページ側のソースを直してなかったのが原因でしたw)
お騒がせしましたm(_ _)m

それとアクセシビリティーを考えて
<STYLE type="text/css">
<!--
BODY {
color: #666666;
background-color: #ffffff;

/*リンク部分の指定*/
A:link { color: #666666 ;}
A:visited { color: #666666 ;}
A:active { color: #666666 ;}
A:hover { color: #999999 ; text-decoration: none ;}

/*文字の位置*/
DIV { text-align: center ;}
P { text-align: center ;}
TD { text-align: center ;}
-->
</STYLE>
に変更しました
あえて下線を消してるページもありますが(^^;


109 名前: Name_Not_Found 投稿日: 01/11/14 19:29 ID:CxFZEIHq
>>107
text-justify:の他の値についてはここを見て。
 http://www.doraneko.org/misc/i18n-format/WD990127.html#a5
 http://east.portland.ne.jp/~sigekazu/css/international.htm
要は、英語だけでなく各言語での組版規則の慣例を考慮すると
justifyにも色々な種類があってよいって提案がされてる。
といっても草案段階だが、これをIE5以降は独自拡張プロパティとして
先取り実装したわけです。したがってIE以外では指定しても効き目無し。
またMacIEではtext-align:justify;で表示が変になることがあるので注意(>>23参照)。


110 名前: Name_Not_Found 投稿日: 01/11/15 09:46 ID:xctKSZvS
http://x31.rsjp.net/tmp/admin.html
(実際はphp3ではき出しているものなのですが、そのhtmlソースをとってきて「.html」にしました。
なお、文字はダミーのものに変えています)
で、印刷の際に不具合が起きています。

●想定しているブラウザ:
IE5.0以上、Win98

●不具合の内容:
================================================================
3台のPC(Win98+IE5.5が2台、WinME+IE6が1台)で印刷したところ、
2台ではつねに正常に印刷される。
しかし、
1台で(Win98+IE5.5)印刷した際、時々(3回に1回くらい?)
2カ所とぎれるところがある。

その2カ所の内訳:
・左上の方にある「団体管理者の会員コード:」がとぎれる
(「団体管理者の会員コ」までしか表示されない。)

・左下の方にある「株式会社あいうえ(かぶしきがいしゃあいうえ)」
の、()内が、途中でとぎれる
================================================================

しかし、その不具合の起きていた
うっかりPCのプリンタドライバを更新してしまったところ、正常に表示されるようになってしまった。
(古いプリンタドライバを入手できないため、症状が再現できなくなってしまった)

(追記:
また、クライアント(依頼主)のPCでは、
同様のとぎれる症状が起きるらしい(IE5.5))

●自力で探した情報:

いろいろウェブを探したものの、
http://www.microsoft.com/japan/support/kb/articles/J054/7/06.htm
(ただしその大元の情報は、microsoft 本家の
http://support.microsoft.com/support/kb/articles/Q255/9/65.asp

にある
================================================================
現象
Select コントロールが含まれている Web ページを印刷または印刷プレビューすると、
ページが、ブラウザに表示されているとおりに表示されない場合があります。
原因
弊社では、これを、この資料の冒頭に示す
Internet Explorer 5.5 の問題として認識しております。
================================================================
という、こころもとない情報しか見つかりませんでした。

なんとも症状が再現できないだけに、途方に暮れています。
(クライアント様のパソコンで何度も試すわけにもいきませんし・・・)

上記ページの原因なり、あるいはこういった印刷バグ関係の情報なり、
何かお持ちな方、いらっしゃいませんでしょうか?


111 名前: Name_Not_Found 投稿日: 01/11/15 23:00 ID:rSTMswu5
>>110
それって全然スタイルシートの問題ではない気が……。
別のスレッドでお尋ねになっては?
それとも印刷仕上がり状態をCSSで制禦したいってことなんですか?


112 名前: 110 投稿日: 01/11/16 00:28 ID:N5/I1w/m
>>111
>それって全然スタイルシートの問題ではない気が……。
いや、CSSをかなり使ってるから、それが原因かな、という自分の推測なんですが。
CSSを抜かすと、単純なテーブルなんで(しかもネストすらしてない)
(ただ、なんせ、状態を再現できないので、確信もてないんですが)


113 名前: Name_Not_Found 投稿日: 01/11/16 03:40 ID:wDBEp8uB
ブラウザ振り分けを教えて下さい。
NC4とIE3には空にしたcssファイルへ振り分けたい->kara.css
ネットスケープ6とIE5.5では見え方が違うので、これも振り分けたい->n6.css ie55.css
おねがいしまっす


114 名前: Name_Not_Found 投稿日: 01/11/16 03:57 ID:mAmJo8yP
>>113
既出。
http://east.portland.ne.jp/~sigekazu/css/boxm.htm


115 名前: Name_Not_Found 投稿日: 01/11/16 04:30 ID:wDBEp8uB
>>114
そこ見たのですが具体的な書き方がわからなかったので書き込んだのです。
ずばり、答えを下さい。おねがいしまっす


116 名前: Name_Not_Found 投稿日: 01/11/16 04:44 ID:mAmJo8yP
>>115
あまり甘えないで少しは自分の頭を使ってはどうか。

<link rel="stylesheet" type="text/css" href="ie55n6.css"
lang="ja" charset="Shift_jis" media="print, screen">
<!-- NN4ではmedia属性にscreen以外の値を指定すれば読み飛ばされる -->
<link rel="stylesheet" type="text/css" href="kara.css">
<!-- IE3は一番下しか読み込まない -->

で、ie55n6.cssの先頭に
@import 'nn6.css' screen, print;
と書く。適当に“! important”を使用すべし。

他にもやり方はある。目的によって振り分け方法をあれこれ案出すること。


117 名前: Name_Not_Found 投稿日: 01/11/16 04:56 ID:wDBEp8uB
>>116
ごめんね、ありがとう。
xとかyじゃどれに振り分けられるのかわからなかったの。
答えくれてありがとう。いろいろいじってみます^^


118 名前: Name_Not_Found 投稿日: 01/11/16 04:59 ID:wDBEp8uB
113と115と117です。
コピペしてから気が付いた。
ネットスケープ6には振り分けは効かないの?


119 名前: 113 115 117 118 投稿日: 01/11/16 05:03 ID:wDBEp8uB
ごめん、私あほかも。

>で、ie55n6.cssの先頭に
>@import 'nn6.css' screen, print;
>と書く。適当に“! important”を使用すべし。

これがネットスケープ6に振り分けてるのかな・・・


120 名前: Name_Not_Found 投稿日: 01/11/16 05:09 ID:mAmJo8yP
>>119
もういっぺん>>114のリンク先を熟読してください。
>除 IE3 & IE4 & IE5/6 & NC4
><STYLE type="text/css">
><!--
>@import "x.css" all;
>@import 'y.css' screen, print;

>Netscape6は対応している。

わからなかったら各シートにcolor:red;とか簡単なスタイル指定を書き込んでブラウザによって表示が変化するか実験してみること。


121 名前: 113 115 117 118 119 投稿日: 01/11/16 05:23 ID:wDBEp8uB
>>120
何度もごめんね。

nn6.cssにbody{display:none}書いたら真っ白になったよ。
nn6.cssをkara.cssと同じように何も書いてなかったの。
何も書いてなかったら元のcssが適応されるんだね。

他の振り分けもうまくいきました。ありがとう!


122 名前: 113 115 117 118 119 121 投稿日: 01/11/16 05:26 ID:wDBEp8uB
>nn6.cssをkara.cssと同じように何も書いてなかったの。
>何も書いてなかったら元のcssが適応されるんだね。

もうしわけない。これウソ。
cssの指定が間違ってただけでした(;´Д`)
板汚しごめん。


123 名前: Name_Not_Found 投稿日: 01/11/16 10:59 ID:xKgSZsUb
セル内のテキストにフォントサイズを指定したいのですが、
<td>にスタイルを適用した方が良いのでしょうか?
それとも各テキストに対して<p>を付けてそちらに適用
した方が良いのでしょうか?
ちなみに行間などの指定はしていなくて、フォントサイズ
だけ設定したクラスです。


124 名前: Name_Not_Found 投稿日: 01/11/16 11:18 ID:gtyk6rsy
>>123

td内にp以外が入る可能性を考慮したら、tdに基本的なスタイルを設定しておいて
セル内の各要素に継承させる方がツブシがきくのではないですか?
td内にはいろんなものを含むことができるのですから。

そして、td内の各要素毎に違う部分だけ改めて設定し直すと。

だいたい、スタイル設定のためにpにするとかじゃなくて、それが段落であるなら
スタイルがどうであれ、pはp。


125 名前: Name_Not_Found 投稿日: 01/11/16 18:43 ID:2IAVsMIZ
http://east.portland.ne.jp/~sigekazu/css/boxm.htm
↑これの応用でIEやネスケに対する外部スタイルシート振り分けはできますが、
iCabやOperaといったマイナー・ブラウザへの振り分けもしたいのです。
JavaScriptでないと無理ですか? でもUA名を擬装してくる場合もあるし……。
シートを読み込ませない方法でもいいです(特にiCabは実装がひどいらしいので)。


126 名前: Name_Not_Found 投稿日: 01/11/16 19:02 ID:gtyk6rsy
>>125

http://www.remus.dti.ne.jp/~a-satomi/nikki/2001_11b2.html#day16num02
Operaは偽装してもOperaという文字列は含まれてるので判別可能らしい。

iCabは知らん。


127 名前: 125 投稿日: 01/11/16 19:18 ID:0Ze3u4oJ
>>126
これですか?
===================================
uaVer = navigator.userAgent;

isNN4 = (document.layers);
isIE50 = (uaVer.indexOf("MSIE 5.0")!=-1);
isIE4 = (uaVer.indexOf("MSIE 4")!=-1);
isIE = (uaVer.indexOf("MSIE")!=-1);
isMoz = (uaVer.indexOf("Gecko")!=-1);
isOp6 = (uaVer.match(/Opera.6/)!=null);

if (isOp6) { isIE50 = false; isIE = false; }

isWin = (uaVer.indexOf("Windows")!=-1);
isMac = (uaVer.indexOf("Mac")!=-1);
================================================
できればJavaScriptに頼らず、>>125のリンク先みたいな応用で
振り分けられるとbetterなのですが。
逆に、いままでスクリプト抜きで振り分けしてた場合、Operaにそれが通用せず、
却って妙な表示になることもあるかもしれないので、不安です。
Operaは@importにどの程度まで対応してるのか……。


128 名前: Name_Not_Found 投稿日: 01/11/16 19:36 ID:PHxCbSir
>>127
var isOp6=(uaVer.indexOf("Opera")!=-1);
でいいんじゃないの?

>>125
http://east.portland.ne.jp/~sigekazu/css/boxm.htm
ここの説明は間違っている部分があるので、
実際にブラウザで確認した方がいいよ。


129 名前: 125 投稿日: 01/11/16 19:48 ID:0Ze3u4oJ
>>128
>http://east.portland.ne.jp/~sigekazu/css/boxm.htm
>ここの説明は間違っている部分があるので、
知りませんでした。すみません、具体的にはどの部分で、正しくはどうなのですか。
一応、私のサイトではあそこの説明通りにやって問題が確認されてませんので。


130 名前:   投稿日: 01/11/16 20:23 ID:qZ0Njp2o
フレームボーダーを無くそうと思ってもなくせません。

そこで
フレームとフレームの間の色を黒にしたいのですが
これはスタイルシートで指定すべきなんでしょうか?


131 名前: 白夜 投稿日: 01/11/16 21:00 ID:d5LoP+aH
>130
<FRAMESET bordercolor="black">


132 名前: 白夜 投稿日: 01/11/16 21:01 ID:d5LoP+aH
あ、ごめん。CSSで答えてないや・・・


133 名前: Name_Not_Found 投稿日: 01/11/16 22:56 ID:gcwk7CkL
CSSって大量にマークアップした文書には向いてないのでしょうか。
50KB〜100KBくらいのhtml文書をローカルで表示させると、
「リンクにカーソルを乗せる」動作で数秒フリーズしてしまいます。
完全に表示させるまでに4秒ほどかかったりもします。
外部CSSファイルは6KBくらいなのですが、、、
マークアップの仕方かCSSの使い方がおかしいのでしょうか。
こういった問題に関するサイトなどどなたかご存じではありませんか?
または解決方法などお教えいただければ幸いです。
よろしくお願いします。


134 名前: Name_Not_Found 投稿日: 01/11/16 23:01 ID:OPVWUYO0
>>128
あそこはよく参照してるので、誤ってる箇所を指摘してくれると助かります。

>>133
使用してるブラウザは? どんなスタイルを適用してるの?
もう少し具体的な情報が無いと、判断できません。


135 名前: Name_Not_Found 投稿日: 01/11/17 13:31 ID:NNU45TT3
>>133

掲示板の大きい過去ログ(ファイルサイズはちょうどあなたのいうくらい)
で、ビシバシCSS使っているが、うちの超ポンコツ機(メモリ20MCPU100MHz)
のIE5で見てもそんな現象はなかった。


136 名前: Name_Not_Found 投稿日: 01/11/17 17:52 ID:yL/e9MdX
MacIE5について質問です。

ZSPCによると、caption-sideは×となってるのですが、
友人が言うには「bottomなら対応してる。」とのこと。

しかし、この友人もMac持ってるわけではないので、
記憶違いしてる可能性は否定できず。
caption-sideなんて使いそうにないので、どーでもいいといえば
どーでもいいのですが、気になってしまいます。

実際のところどうなのでしょうか。MacIE5を持ってる方教えてください。


137 名前: Name_Not_Found 投稿日: 01/11/17 20:54 ID:GF8Ctmvx
>>127

CSSそのものをCGIとしてしまう手はどうでしょうか?

たとえばこんなん。
http://homepage2.nifty.com/afterglow/data/other/css.txt


138 名前: 133 投稿日: 01/11/18 00:49 ID:nwLaTQMq
>>134

ブラウザはIE5です。
<DL>〜</DL>で囲った内容、画像(両方とも50個くらい)をfloatさせているとフリーズします。
サイト共通のスタイルとしてアンカーの装飾(background-color)をしています。
<DL>をfloatさせる必要はないのですけども、画像はfloatさせたいのです。
PCのスペックはそんなに悪くはないので(P3-550MHz、メモリ256)、やはりCSSかと。
CSSの限界ってどのくらいなんでしょうかねぇ。


139 名前: Name_Not_Found 投稿日: 01/11/18 00:54 ID:AGqr1GYq
>>138
ナゼそうすぐに css の限界とかいう話になるの?
あんたの書き方がおかしかったり、
特定ブラウザの挙動がおかしいだけの可能性が高いでしょ。
はっきり言って css の仕様とは関係ない話だよ。

っていうか css の限界っていう言い方が変です。


140 名前: Name_Not_Found 投稿日: 01/11/18 01:17 ID:2gtlAEXh
>>138
それはcssの限界ではなく、メモリーやリソースの問題。
だから、環境によって激しく異なる。


141 名前: 133 投稿日: 01/11/18 02:03 ID:P7K+Evk/
あんまり噛みつかないでください。

>>139-140
ということは
>CSSって大量にマークアップした文書には向いてないのでしょうか。
には「そうでもない」ということでしょうか?
でも自分の環境で軽く表示させるようにするのが先決ですね、、がんばりまふ。


142 名前: Name_Not_Found 投稿日: 01/11/18 02:28 ID:AGqr1GYq
>>141
>>CSSって大量にマークアップした文書には向いてないのでしょうか。
>には「そうでもない」ということでしょうか?

だからー、適用させる文書の容量と、cssを適用させた
ことよる不具合の間にそもそも因果関係がないでしょうが。仕様的には。
特定のUAの実装か適用させたシートの問題でしょう。


143 名前: Name_Not_Found 投稿日: 01/11/18 02:36 ID:npb3hf70
どうしてもCSSのせいにしたいなら、
CSSを使わずに画像を回り込ませてフリーズしない事を確認しろ。


144 名前: Name_Not_Found 投稿日: 01/11/18 02:49 ID:OWk1Vide
CSSのせいなんじゃなくて、直接的には「その処理」が原因でしょ。
CSSの限界ではなく、自分のPCの限界を知る方が重要かと。


145 名前: Name_Not_Found 投稿日: 01/11/18 13:32 ID:vHGOMEiQ
マウスカーソルがリンクのところに触れると下線が出たり色が変わるやつってありますよね。
それで、はじめリンク文字が灰色だったのが、カーソルが触れて赤色の下線が出てリンク文字が白に変わる、というようにするにはどうすればいいのでしょうか。

現在こんな↓感じなんですが。どうも下線の色の変え方がわからないんです。
a:link { text-decoration:none; color:silver; }
a:visited { text-decoration:none; color:silver; }
a:hover { text-decoration:underline; color:white; }

よろしくおねがいします。


146 名前: Name_Not_Found 投稿日: 01/11/18 14:32 ID:nAW1tH+W
>>145
下線(text-decoration:underline;)はテクストのcolorと同色になるので無理。
もしどうしてもやりたいなら
a {text-decoration:none;}
a:link { color:silver; }
a:visited { color:silver; }
a:hover { color:white; border-bottom:1px solid red;}
これで下線が文字に近づきすぎだったら、お好みでpadding-bottomも指定する。

但しインライン要素へのborder指定はIE5.5以降でないと効きません。
(display:block;とすれば話は別だが)


147 名前: 145 投稿日: 01/11/18 14:43 ID:vHGOMEiQ
>>146 やってみました。自分のイメージにかなり近くて良い感じです。ありがとうございました。


148 名前: Name_Not_Found 投稿日: 01/11/18 20:58 ID:gTtbDneX
自分で作ったHTML文章にcssを適用させて
ie4で見ると固まりました。
ie4のことは無視してもいいでしょうか。


149 名前: Name_Not_Found 投稿日: 01/11/18 21:17 ID:vtjlUZYd
IE4だけ蹴る方法なかったかな。


150 名前: Name_Not_Found 投稿日: 01/11/18 21:22 ID:JyVZS/os
「IE4で見ないでください。特にMacIE4は死んでください」
と書いておく。


151 名前: 白夜 投稿日: 01/11/18 21:25 ID:RVynwZWS
>148
ジャバスクリプトでスタイルシートを切り替えたら?

+ JavaScript の質問用スレッド vol.5 +
http://pc.2ch.net/test/read.cgi/hp/1002539301/

↑ここのガイシュツらしいけど・・・


152 名前: Name_Not_Found 投稿日: 01/11/18 21:56 ID:lWJT/Ncu
>>148-149
たぶんガイシュツだと思うけどこれは?
ttp://east.portland.ne.jp/~sigekazu/css/boxm.htm


153 名前: Name_Not_Found 投稿日: 01/11/18 23:54 ID:oeTMoq78
背景色の指定について質問です。

widthの、中央60%だけ白、その他の部分を違う色にしたいんですが、
どのように指定すれば出来るんでしょうか?
いろいろ試行錯誤しているんですけどどうしてもうまくいかなくて。


154 名前: Name_Not_Found 投稿日: 01/11/19 00:07 ID:E8a4XMzH
>>153
20%,60%,20%の<div>三つを横に並べるのではダメですか。
両脇の20%づつの部分にも中央と連続したテキストを載せるの?
ならムリかもしれない……。
背景画像を配置したら? きっちり60%にはならないけど。


155 名前: Name_Not_Found 投稿日: 01/11/19 00:07 ID:u0wTbmCz
>>153
完全に60%にする方法は今はなさそうだけど、
適当な幅の画像を中央で縦方向のみ繰り返し表示させるというやり方はどうでしょうか。


156 名前: 153 投稿日: 01/11/19 00:18 ID:xCSoK4pB
なるほど、それは思いつきませんでした。どうもありがとう。
背景画像を使う方法、試してみます。


157 名前: 白夜 投稿日: 01/11/19 03:01 ID:NBUv1L4p
>153
遅くなったけど
>>154のやり方で指定して
メインはポジションを絶対指定したものを作ると(・∀・)イイ!!


158 名前: Name_Not_Found 投稿日: 01/11/19 06:08 ID:YJfLzCuz
各ページからTOPへリンクを張ろうと思い、そこだけ共通のスタイルシートを
作りたいのでス。今は、
<head>
<style type="text/css">
<!--
@import url(cmn.css);
-->
</style>
</head>
<body>
<p class="a">
<a class="b" href="http://〜">TOP</a>へもどる
</p>

というふうにしてるのですが、アンカー部分のクラス指定がうまくできません。
a.b:link{〜}
ではダメだったので、アンカー部分のクラス指定のやり方を教えて下さい。
それともある範囲にだけ特定のスタイルシートを適用することってできるのでしょうか? それができればそっちの方がソースがきれいですよね。いくつも
クラス指定しなくていいし。
御教授プリーズ。


159 名前: Name_Not_Found 投稿日: 01/11/19 06:18 ID:UldqZi5t
>>158
A:link.b {font-weight:bold;}
または
.a A {font-weight:bold;}

.a A:link, .a A:visited {font-weight:bold;}

P.a A {font-weight:bold;}
でもよい。

ついでながらCSSの「セレクタ」について勉強し直した方がよいかと思ふ。


160 名前: Name_Not_Found 投稿日: 01/11/19 14:23 ID:a8r88QFs
>>159
そう言うあなたも間違ってますけど……。
> A:link.b {font-weight:bold;}
これはダメ。通常のクラスと擬似クラスを併用する時は、
A.b:link { font-weight:bold; }
のように、通常のクラスを先に書かなければいけない。


161 名前: Name_Not_Found 投稿日: 01/11/19 17:28 ID:n7sXJUlA
>>150-152
thx


162 名前: Name_Not_Found 投稿日: 01/11/19 20:49 ID:HFGzEf4a
仕様書(日本語訳)のをどこかでダウソできないかなぁ?
しってたら教えてね。ネタちゃうんで。よろしく。


163 名前: Name_Not_Found 投稿日: 01/11/19 21:50 ID:qwYtvDVR
http://www.google.com/search?hl=ja&q=CSS+%96M%96%F3&btnG=Google+%8C%9F%8D%F5&lr=lang_ja


164 名前: Name_Not_Found 投稿日: 01/11/19 21:53 ID:mdfFuYX4
{ position:relative; top:○○%; left:○○%; } って記述しても、
ネスケで見るとぜんぜん無視されちゃってるみたいなのですが・・・。
なぜなぜ。。???


165 名前: Name_Not_Found 投稿日: 01/11/19 22:27 ID:R1YPbv9q
>>164
Netscapeのいくつよ。


166 名前: 164 投稿日: 01/11/19 22:46 ID:vQOy8iP1
>>165
6.2です。


167 名前: Name_Not_Found 投稿日: 01/11/19 22:56 ID:VfWIctaP
やっぱダメだね。6.2


168 名前: 159 投稿日: 01/11/19 22:58 ID:5tzcmyuG
あ、間違った。ご指摘有り難う。>>160
>>158
>a.b:link{〜}
>ではダメだったので、
とあったので混乱しました。自分のシートにはA.b:link{〜} で書いてるのに……。
しかし、すると>>158のはナゼ効かなかったんだ?


169 名前: Name_Not_Found 投稿日: 01/11/19 23:15 ID:5tzcmyuG
>>164-167
うちのNetscape6.2では、その記述で有効だったよ。
但し特に親要素を持たない場合。
その適用させた要素を<div>とかで括ると、
なぜかtop:y%が無視されて、left:x%だけ有効になりました。
しかし単位を%でなくpxやemにするとtopの記述も無視されなかった。
バグかな。


170 名前: 164 投稿日: 01/11/19 23:33 ID:vQOy8iP1
>>169
そうですかー。
spanで括ったのがダメな要因なのかな。
あと、インラインフレームもpositionで指定したいんだけど、
これもダメダメでした。
IEではばっちりーだったんだけど。。
ってか、もしかしてインラインフレーム自体ネスケではダメダメなんだっけ?
うう。もうちょっとちゃんと勉強してきます。


171 名前: 白夜 ◆GiKO.QrM 投稿日: 01/11/19 23:40 ID:GcM8VuUW
>170
ネスケはインライソフレームは未対応


172 名前: 164 投稿日: 01/11/19 23:45 ID:vQOy8iP1
>>171
あーそうなんですか。ありがとうございます。
6.2で見たところ一応表示はされてるんだけど、変な表示になっちゃってた。。
インラインはダメか。。作り直しだ。


173 名前: Name_Not_Found 投稿日: 01/11/19 23:47 ID:I9q7FwxV
>>170
<IFRAME>未対応なのはネスケ4まで。
NN6以降はサポートされてます。
但しStrictではないはず。
overflowプロパティを使ってみては?


174 名前: 158 投稿日: 01/11/20 00:38 ID:w/MFhS17
>159 >160
えと、結論から言うとできました。
A.b:link{〜}ではできなかったのではなく、できていたのですが
そのページのみに使っている(クラス指定の中では使用してない)
リンク時のスタイル(ex)background-color:#000000)をも適用していたため
できていないように感じたのです。
だからアンカー部分をクラス指定する場合は、通常の疑似クラス指定で使っている
要素も全て書いていなくてはいけないようです。
説明わかりにくかったらスンマソ。
でもどうもありがとうございました。


175 名前: 164 投稿日: 01/11/20 23:16 ID:S6RjAwuc
>>173
6以降なら対応してるんですね、ありがとう!
position:relativeで%指定じゃなくしたら、ちゃんと表示されるようになりました。


176 名前: Name_Not_Found 投稿日: 01/11/21 17:13 ID:1QzcIhj7
NN4.xで<LAYER>を使って<IFRAME>を実現する方法がNetscapeのサイトに載ってたような。

http://jt.mozilla.gr.jp/docs/web-developer/upgrade_2.html
http://sites.netscape.net/ekrockhome/standards.html


177 名前: 白夜 ◆GiKO.QrM 投稿日: 01/11/22 00:47 ID:U3GGNz82
ガイシュツだったらすみません。
テキストエリアにボーダーを指定すると
ネスケじゃ書込めないと言われたんですが
これは仕様(?)なんですか?バグなんですか?


178 名前: Name_Not_Found 投稿日: 01/11/22 06:57 ID:pbx4megY
>>177
「書き込めない」なんてそんな無茶な「仕様」がありますか。
たぶんバグでしょ。
ところでどの「ネスケ」って4のこと、それとも6のこと?


179 名前: 白夜 ◆GiKO.QrM 投稿日: 01/11/22 12:27 ID:FhnepUyo
>178
回答ありがとうございます。
よく考えたらそんな「仕様」なワケないですよね。
ネスケ4の事でした、説明不足ですみません。


180 名前: Name_Not_Found 投稿日: 01/11/22 13:54 ID:mDaVn0PQ
 <Hn>要素の下のmarginって、CSSでどう設定すればいいナリか?
ゼロにしたいナリが、どうしてもあいてしまうナリ。

 ちなみにDTDは4.01Strictナリ。


181 名前: Name_Not_Found 投稿日: 01/11/22 13:56 ID:5v0MCiB4
>>180


182 名前: Name_Not_Found 投稿日: 01/11/22 13:59 ID:5v0MCiB4
>>180
下のmargin ? margin-bottom のこと?
h1{ margin-bottom: 0px; }
とかでいいはずだけど。

これは想像だけど、Hn の次の要素( p とか )の
margin-top が 0 になってないのでは?

# >180 うっかり書き込みしてもうた。スマソ


183 名前: 180 投稿日: 01/11/22 14:18 ID:mDaVn0PQ
 なんか下の要素(h2)のmargin-topを0pxにしたら解決したでし。
hnはmargin-top:もデフォであるんですね……。thx


184 名前: Name_Not_Found 投稿日: 01/11/22 14:29 ID:G0meolSU
>>183
私はNN6のデフォルトスタイルでH2〜6がマージン空けすぎで気に入らないので、
いちいちmargin:5px 0;と指定してます。


185 名前: Name_Not_Found 投稿日: 01/11/22 14:36 ID:O7dGqLld
textareaをMozillaやNetscapeで見るときと
InternetExplorerで見るときで微妙に大きさが
違うのはCSSでどうにかなりませんでしょうか....


186 名前: Name_Not_Found 投稿日: 01/11/22 15:21 ID:2HtvhAoE
>>180-184
漏れは
p, h1, h2, h3, h4, h5, h6 { margin: 0.5em 0em; }
にしてる。
IEもNNもデフォルトは 1em 0em っぽいけど空きすぎだと思う。


187 名前: Name_Not_Found 投稿日: 01/11/22 16:59 ID:ZP7SZRdO
NNのデフォルトは自分で確かめられますよ。
C:\Program Files\Netscape\Netscape 6\res\html.cssに格納されてます。
全部1emではなくもうちょっとそれぞれに微妙なスタイルが設定されてます。


188 名前: Name_Not_Found 投稿日: 01/11/22 17:41 ID:AEIxSGQV
>>186
N4でも動作するのでしょうか?


189 名前: Name_Not_Found 投稿日: 01/11/22 17:46 ID:0/qzZMPQ
>>188
もちろん。
でも、その手のブラウザ別の実装状況については
CSS対応表が各種あるからそれで調べること。
>>2にも挙げてあります。


190 名前: Name_Not_Found 投稿日: 01/11/22 18:58 ID:O7dGqLld
textareaをMozillaやNetscapeで見るときと
InternetExplorerで見るときで微妙に大きさが
違うのはCSSでどうにかなりませんでしょうか....


191 名前: Name_Not_Found 投稿日: 01/11/22 19:07 ID:2t69sHX3
>>185>>190
繰り返すなよ……
うんだ、どもならんべや。――これで満足かい?


192 名前: Name_Not_Found 投稿日: 01/11/22 20:01 ID:R32uFfKd
>>190
<input type="text" name="xxx" class="textarea">
----
input.textarea { width: 80%; }

もし仮に、こういうことを聞いているんじゃなかったらすまぬ。


193 名前: Name_Not_Found 投稿日: 01/11/22 20:04 ID:cTrNUPer
>>179
borderの指定の仕方によって回避可能。
border-style: solid;
border-color: #ccc;
border-width: 1px 1px 2px 2px;
こんな風にばらしてやるとうまくいくかもしれない。


194 名前: Name_Not_Found 投稿日: 01/11/22 20:36 ID:mjvWiNLT
>>192
textareaは普通のタグですが?


195 名前: 192 投稿日: 01/11/22 20:57 ID:R32uFfKd
>>194
そうですね。


196 名前: Name_Not_Found 投稿日: 01/11/22 21:07 ID:a2GW5AOy
>>194
念の為に言っとくけど、class属性値のtextareaと
要素名のtextareaに関係は無いぞ。


197 名前: Name_Not_Found 投稿日: 01/11/22 21:13 ID:2N/WcWsd
>>194
textareaは普通の"要素"ですが?


198 名前: 白夜 ◆GiKO.QrM 投稿日: 01/11/22 23:51 ID:LKFYe2o6
>193
あ、なるほど。
試してみます。
ありがとうございます。


199 名前: Name_Not_Found 投稿日: 01/11/23 05:56 ID:COex5ag8
>>198
ネスケ4はダメ子ちゃんだから、textareaに限らず
borderの一括指定がうまく機能しなかったりする。
これ有名なバグね。
http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html#NN4
http://www.asahi-net.or.jp/~xk3t-cb/css/css-bugs-ns-j.html


200 名前: 白夜 ◆GiKO.QrM 投稿日: 01/11/23 07:16 ID:FeIui1yw
>199
ありがとー。
ホント、ダメダメですねぇ。。。
やっぱり指定しないようにしときます。
1番無難なんで(w


201 名前: Name_Not_Found 投稿日: 01/11/23 08:24 ID:wAkQYxBk
>>200
ネスケ4にもせめてブロック要素のborder位は指定してやれよ、可哀相だろ。


202 名前: Name_Not_Found 投稿日: 01/11/23 11:39 ID:OtxEZb3G
ガイシュツだったらすいません。
IE6.0を使っているんですが、CSSが使えません。
<style type="text/css">
<!--
-->
と書くと何も表示されなくなってしまいます。
これってバグでしょうか。


203 名前: ちょこら 投稿日: 01/11/23 12:01 ID:KYbiFCae
>>202
xhtml で書いてるんならその挙動で正解。
DOCTYPEスイッチが標準準拠モードになってるんでしょう。
xhtml では<style></style>の中は#PCDATAとして解釈されるため、コメント等が有効になります。

…で合ってるよね?
質問は age れば?といいつつsage。


204 名前: Name_Not_Found 投稿日: 01/11/23 12:42 ID:OtxEZb3G
すいません
初心者な者でxhtmlとかDOCTYPEと言われてもわかりません。
xhtmlってなんですか。htmlとどう違うんでしょうか。
要するにIE6.0でCSSを使うにはどうすればよいのでしょうか。
ちなみにインラインではCSSは使えるのですが、html文書全体にCSSを適用することができません。


205 名前: Name_Not_Found 投稿日: 01/11/23 12:45 ID:JHEHm90B
      
      
     


206 名前: Name_Not_Found 投稿日: 01/11/23 12:48 ID:gC2tJ8zu
204>>
さらしage


207 名前: ちょこら 投稿日: 01/11/23 12:53 ID:KYbiFCae
>>204
特別な事は何もないよ。
何も考えずに普通に使えると思うんだが…。

もし、いろんなところからソースをコピペしてるんなら
組み合わせによってはそういう症状が出るでしょう。
そういうときは諦めて一から勉強しましょう。


208 名前: Name_Not_Found 投稿日: 01/11/23 13:10 ID:tA9lYnA0
>>202

</style>閉じてないんじゃないの?


209 名前: Name_Not_Found 投稿日: 01/11/23 13:11 ID:BfP52YOP
>>204
<style type="text/css">
<!--
-->
</style>
↑閉じタグ忘れとか、そういう単純なのではなく?


210 名前: Name_Not_Found 投稿日: 01/11/23 13:12 ID:BfP52YOP
あっ、かぶっちゃった。打つの遅くて鬱。


211 名前: Name_Not_Found 投稿日: 01/11/23 13:27 ID:yFM6+eql
>>208
>>209
</style>の閉じ忘れでした。
1から勉強しに逝って来ます。


212 名前: ちょこら 投稿日: 01/11/23 13:43 ID:KYbiFCae
ガ━━(゚Д゚;)━━ン!


213 名前: ちょこら 投稿日: 01/11/23 13:45 ID:KYbiFCae
っていうか、良く見たら
>何も表示されなくなってしまいます。
って書いてあるじゃん。
俺が勘違いヤローだ。
逝ってきます。


214 名前: Name_Not_Found 投稿日: 01/11/23 17:00 ID:h1RMImgX
>>203
>xhtml では<style></style>の中は#PCDATAとして解釈されるため、コメント等が有効になります。
これってほんと?
んじゃ今後は<style>の中身はコメントで括らない方が正しいってこと?
でもそうすると一部の古いブラウザでスタイル指定がまんま表示されちゃうんだよなあ…


215 名前: Name_Not_Found 投稿日: 01/11/23 17:01 ID:74KOPn/J
わらった


216 名前: Name_Not_Found 投稿日: 01/11/23 17:51 ID:cvK8Ys9h
>>214
なるべく外部スタイルシートにしろってAnother HTML Lintでも注意されるでしょ。


217 名前: Name_Not_Found 投稿日: 01/11/23 20:38 ID:rWKhCdy1
>>214
<style type="text/css">
<![CDATA[
<!--
-->
]]>
</style>

という風に、CDATAマーク空間にすればいいと思われ。


218 名前: Name_Not_Found 投稿日: 01/11/23 20:39 ID:rWKhCdy1
age忘れ、すまん。


219 名前: Name_Not_Found 投稿日: 01/11/24 06:52 ID:rqFxRd3y
リンク部分を文字色は本文と同じで、下線だけ青くしたいので、
次の通り指定しました。
A:link, A:visited {
text-decoration:none;
border-bottom:1px solid blue;
color:black;
}

しかしWinIE5.5未満はインライン要素へのborder指定が効きませんよね。
つまりリンク部分が全く他と区別つかなくなってしまって、これはいけない。
そこでWinIE5以前では通常の下線表示のままにして、version 5.5以降
及びMacIE5・NN6等では上記のtext-decoration:noneが適用される風に
仕組めないかと思ったのですが……。
下記ページを見たんですが、いい手が浮かびません。
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm
JavaScriptを使ったシート振り分けしか手はありませんかね?
ご教示いただけると助かります。


220 名前: Name_Not_Found 投稿日: 01/11/24 11:27 ID:GBZ8shRJ
@import url() all;
でa{text-decoration: none}を呼び出し、さらに
<!--[if gte IE 5.5000 ]>
<style type="text/css">
a {text-decoration: none}
</style>
<![endif]-->
も書いておくってのは?

JavaSriptでやったほうがスマートに見えそう。


221 名前: Name_Not_Found 投稿日: 01/11/24 12:34 ID:nmisyc6z
text-decoration:expression('none');だとIE4〜5でも対応ですか?


222 名前: 219 投稿日: 01/11/24 12:47 ID:nmisyc6z
>>220
有り難う。うーん、head内style要素が要りますか……。
確かにスマートでありませんね。

JavaScriptで補正用外部CSSシートを読み込ませると、
JavaScriptオフにしてる閲覧者に問題が生じるので、
なるたけスクリプト無しでやってみたいんです。


223 名前: Name_Not_Found 投稿日: 01/11/24 12:52 ID:rGyBxada
>>222

SSIがつかるならそうするとか、
あるいは外部CSSをCGIにしてしまうとか・・・


224 名前: 219 投稿日: 01/11/24 12:54 ID:nmisyc6z
>>223 借りてるWebスペースがSSI・CGI共に不可なんです……


225 名前: Name_Not_Found 投稿日: 01/11/24 13:02 ID:bsiyzsxk
>>221
expression(〜)は確かIE5以降。
しかも、初期バージョンではインラインスタイルとして書いたものしか
効かないというのを、MSDNのどこかで見た記憶がある。


226 名前: 219 投稿日: 01/11/24 13:12 ID:JGULGIZF
>>225 おおっ、朗報。
てことは、外部スタイルシートにexpressionで指定しておけば
head内style要素で<!--[if gte IE 5.5000 ]> 〜<![endif]--> とするのと
同じ効果があるわけですか。
しかし確認したくともMSDNのどこに載ってるのかが見つけられず。


227 名前: 219 投稿日: 01/11/24 13:25 ID:JGULGIZF
すみません、見つけました。
http://www.microsoft.com/JAPAN/developer/library/jpwebwk/author/dhtml/dude061198.htm
「最後に : 現在提案されている CSS 関数構文は、スタイル シートの中で使用した場合には機能しま
せん。インライン スタイルでのみ設定するようにしてください。これについては近いうちに修正する
予定です。」――1999 年 3 月 19 日
この修正がIE5.5からなのか、IE5.0でもなのかが問題ですね。
うちのマシンは5.5なもんで確認できません。
どなたか5.0の方いらっしゃいませんか。


228 名前: Name_Not_Found 投稿日: 01/11/24 15:16 ID:PmZhnkzF
>>227
5.0でもいけるよ。


229 名前: 219 投稿日: 01/11/24 15:36 ID:zZsM0GKo
>>228
あ、試験してくれて有り難う。
となるとやはりIE5.5以上にだけ適用させる手には応用できませんね。残念。


230 名前: Name_Not_Found 投稿日: 01/11/24 16:04 ID:+vrkuKDn
5.01ってなかったっけ? Win版IE。


231 名前: Name_Not_Found 投稿日: 01/11/24 16:05 ID:ScHHPtRR
Selectors Becomes a W3C Candidate Recommendation

15 November 2001: W3C is pleased to announce the advancement of
"Selectors" to Candidate Recommendation. Selectors are patterns in
the Cascading Style Sheets (CSS) language that match to elements in
HTML and XML. This specification describes the CSS1 and CSS2
selectors and new selectors for CSS3. A test suite is available.
Please send your comments by May 2002 and read more on the CSS home
page.

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/
http://www.w3.org/Style/CSS/Test/
http://www.w3.org/Style/CSS/


232 名前: Name_Not_Found 投稿日: 01/11/26 09:42 ID:EWj+7wjH
>>221-9
もしexpression()で振り分けができるとしても、
CSS関数構文はスクリプト・オフでは機能しないんだから
JavaScriptでブラウザ振り分けするのと結果は同じことになります。


233 名前: Name_Not_Found 投稿日: 01/11/26 13:50 ID:bLHUXiWd
今さっきスタイルシートの本を読み始めたばかりの超初心者です。
<DIV ALIGN="center">でセンタリングしたテーブルの中のテキストの
フォントサイズなどを設定したいのですが、セレクタをDIVとしても
フォントが設定されません。
テーブルの中のテキストは<P>や<H>なので囲んでいないのですが、
セレクタを何にすればいいのでしょうか???



<DIV ALIGN="center">
<TABLE>
.
<TABLE>
.
</TABLE>
.
</TABLE>
</DIV>


234 名前: 233 投稿日: 01/11/26 13:51 ID:bLHUXiWd
すいません。。。↑のタグたちはなんでもないです。消し忘れました。


235 名前: Name_Not_Found 投稿日: 01/11/26 14:05 ID:8LHOdXAR
tr や td でも囲んでいないのか?
ていうかそういうページの作りなら素直に font size とか使えよ。


236 名前: Name_Not_Found 投稿日: 01/11/26 14:08 ID:OgyWbgGM
>>233
div, div table {font-size:80%;}
これで、div直下の文字もdiv内テーブルの文字も80%になる。
div td { }でもよいが。


237 名前: 233 投稿日: 01/11/26 14:13 ID:bLHUXiWd
ありがとうございます!
<TABLE>や<TR>、<TD>もセレクタにしていいんですか。そうか〜。

> font size とか使えよ。
<FONT SIZE>だと、Winで見るとやたらとでかいのでいやなんです。


238 名前: 236 投稿日: 01/11/26 14:21 ID:StzOFnCU
分けて書くなら、これでもいい。

div {font-size:200%;}
table, th, td, caption {font-size:100%;}

この下の行の指定によって、テーブルの文字サイズは
divへの文字サイズ指定(200%)を初期値(100%)として引き継ぎ、
2倍角の文字として表示される。


239 名前: 235ではないが 投稿日: 01/11/26 14:28 ID:1XSCdL7E
>>237
せっかくCSSを勉強し出したんだから、テーブル・レイアウトからは卒業しようねってことだよ。

あと、HTMLの要素は全てセレクタになるんだな、これが。
http://www.tg.rim.or.jp/~hexane/ach/fscs/


240 名前: 233=237 投稿日: 01/11/26 15:19 ID:bLHUXiWd
> divへの文字サイズ指定(200%)を初期値(100%)として引き継ぎ、
(´Д`?)
table, th, td, caption {font-size:100%;} も実質200%になるということですか?
そしたら
div {font-size:200%;}
table, th, td, caption {font-size:200%;}
にしたらテーブルの文字サイズは400%になるかと思ったら、ならなかった。
意味がわからにゃい。。。


241 名前: Name_Not_Found 投稿日: 01/11/26 15:44 ID:R50JMmat
>>240
次のソースに対して適用して実験してみた。

<div>
<table>
<tr><td>VSSの試験中</td></tr>
</table>
</div>

div {font-size:1.5em;}
table {font-size:2em;}
これは下記に等しい。
div table {font-size:3em;}

確認したブラウザはWinIE5.5とNetscape6.2。
単位をemでなく%にしても同様だった。


242 名前: Name_Not_Found 投稿日: 01/11/26 15:59 ID:R50JMmat
>>240
table, th, td, caption {font-size:200%;}
これだと、最初にtable要素全体が200%とされ、
ついでその子要素であるtd要素等も200%にされるから
都合400%になる。
table {font-size:200%;} かtd {font-size:200%;} だけの指定にすべし。


243 名前: Name_Not_Found 投稿日: 01/11/26 16:27 ID:MUUl4Sz0
スタイルシートでこういう指定の仕方ってわからないです。
#FileList {position: absolute; left: 30%; width: 70%; height: 100%}
#Media {margin-left: 15px}
#Panel {position: absolute; width: 30%; height: 100%; overflow: auto}
#PieChart {width: 100px; height: 50px; margin-top: 10px}

#FileListとか#***** で指定するとどのタグに対して、指定してるのかもサッパリです。
p.linkのような指定の仕方なら分かりますが、#を使った書き方ってなんですか?


244 名前: Name_Not_Found 投稿日: 01/11/26 16:31 ID:6a5ZfZWv
>>243
いっぺんここ通して読んでくれ。基礎です、基礎。
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocs05.htm


245 名前: Name_Not_Found 投稿日: 01/11/26 16:38 ID:yQm2WCDg
#はidです

<p id="giko">はぁ?</p>
な場合は
P#giko
としますが、1つのファイルにIDは一個しか使っていけないので
要素は書かないことが多いのです


246 名前: 243 投稿日: 01/11/26 16:57 ID:MUUl4Sz0
>>244-245
ほんとに基礎でした。
でも、助かりました。ありがとう!


247 名前: 240 投稿日: 01/11/26 17:39 ID:bLHUXiWd
>>241-242
(´Д` ?)
さっきからずーっと実験やってます。わかったようでわからない。。。
とりあえずありがとうございます。。。


248 名前: 白夜 ◆GiKO.QrM 投稿日: 01/11/26 20:38 ID:V0Rnqtwb
>247
TABLE, TD {font-size: 200%;}
だと、

<TABLE> ←ここでまず200%になる
<TR>
<TD> ←ここでさらに200%になる
てすと ←実質400%
</TD>
</TR>
</TABLE>

って事。
カンマは複数の要素に指定する事。
この場合<TABLE>と<TD>に
font-size: 200%;が適用されてる。


249 名前: Name_Not_Found 投稿日: 01/11/27 17:46 ID:iqF9S18e
NNでもまともに見えて、
IEならそこそこ洒落たデザインになるようなCSSの例を教えてください。
ちなみにHTML4.01Strictと<BR>、
JavaScript無しでやってます。


250 名前: Name_Not_Found 投稿日: 01/11/27 17:53 ID:uMnCjoyN
>>249

NN4で使えるものを、まず何かまとめておいて、IEやN6/Mozilla向けを
@importで呼び出すのが常套かと。
http://east.portland.ne.jp/~sigekazu/css/boxm.htm


251 名前: Name_Not_Found 投稿日: 01/11/27 18:14 ID:C41ZJhqq
@importの多用は感心しない。私はmedia設定でNN4除けをしてる。
そしてNN4に対してだけ専用cssファイルをJavaScriptで読み込ませる。
できればJavaScriptも使用したくないんですが、
どのみちNN4ではスクリプト・オフだとスタイルシートも無効になるので
まあいいかと。


252 名前: Name_Not_Found 投稿日: 01/11/27 18:15 ID:N1slhFeK
>>250
参考になりました。
thx


253 名前: Name_Not_Found 投稿日: 01/11/27 18:27 ID:DfkchFgQ
>>249
確かに、一つのCSSファイルを全てのブラウザに適用させて済ませたいところだが
ネスケ4はバグがひどすぎて、組合せによっては何がバグるかも推測つかないので、
CSSを認識させないか、専用のファイルを作ってやるのが一般的方法です。


254 名前: Name_Not_Found 投稿日: 01/11/27 18:32 ID:vJcMXiRa
@importを使うと
NN4.0xが落ちるって本当?


255 名前: Name_Not_Found 投稿日: 01/11/27 19:01 ID:haLemKfy
>>251
なぜimportだめ?


256 名前: Name_Not_Found 投稿日: 01/11/27 19:11 ID:DfkchFgQ
>>255
ダメではないが好もしくない。読み込みが遅くなるし、構造がつかみづらい。
IEの「名前を付けて保存」>「Webページ、完全」でも、@importで指定された
外部cssファイルだと保存してくれないし。

参考:
LEVEL5「やたらとCSSファイルを小分けにする」
http://members.jcom.home.ne.jp/jintrick/Personal/bad_css.html


257 名前: Name_Not_Found 投稿日: 01/11/27 19:26 ID:a8QtDBK0
N4をよけるためだけにmedia="print,screen"を指定するのってなんか釈然としないんだけど。。
印刷した場合の見え方、確認してないし。。
割り切った方がイイ?


258 名前: Name_Not_Found 投稿日: 01/11/27 19:31 ID:DfkchFgQ
>>257
ならばmedia="all"でどうですか?
どのみち何も指定してない場合は、allと同じことですよね。
それともscreenにだけ適用したいってことですか?


259 名前: Name_Not_Found 投稿日: 01/11/27 20:15 ID:a8QtDBK0
>>258
allだったらauralにもbrailleにもtvにもOK!ってコトじゃないの?

表示確認してるのはscreenだけなんだけど。。


260 名前: Name_Not_Found 投稿日: 01/11/27 20:45 ID:Q0FH+SE0
>>259
メディア・グループがvisualに属するプロパティならば
いくら指定してもauralやbrailleには関係無いはずです。
それに、プリントアウトして読む人だって珍しくないんだから、
印刷プレビューでprintの表示確認位しようよ。


261 名前: Name_Not_Found 投稿日: 01/11/27 20:47 ID:Df4IkChI
NN4避けのために使用する@imortなど一回で済むのにいきなり「多用」まで話が飛躍する上、
「感心しない」などと偉ぶった口調の>>251の態度は感心しない。


262 名前: Name_Not_Found 投稿日: 01/11/27 21:09 ID:8bj1BC8R
>>261
うん、感心しない。しかし@import一回で済むにしても、
やはり@importしか書いてないまっさらのCSSファイルって
何か間違ってる気がする……。裏技だから仕方無いのか?


263 名前: Name_Not_Found 投稿日: 01/11/27 21:11 ID:XW53It8u
>>261
どうでも良いが話のレベルをすり替えないでくれ。
251の態度について話したいんじゃない。
CSSについて話したいんだ。

>>260
CSSのmedia指定にきちんと対応してるブラウザってあったか?


264 名前: Name_Not_Found 投稿日: 01/11/27 21:14 ID:wybgafWN
極惡CSS研究所「ステルスCSS!隠せ」
http://www.geocities.co.jp/Milano-Killer/8583/gokuwaza/kakuse.html
↑import20回だってさ。IEだと認識しない。


265 名前: Name_Not_Found 投稿日: 01/11/27 21:32 ID:wybgafWN
>>260
気になったので簡単な実験をしてみました。
<link rel="stylesheet" href="./red.css" media="print">
red.cssにはbody{color:red;}とだけ指定を入れました。

ブラウザはWinIE5.5SP2。
モニターで見ると、文字色に変化無し。しかし印刷プレビューでは文字色は赤に。

次にmedia="screen"とすると、ブラウザでは文字色赤、印刷プレビューでは黒。

結論――ちゃんと対応してるみたいです。


266 名前: Name_Not_Found 投稿日: 01/11/27 21:45 ID:V66EZg1r
NN4避けのためなら<nolayer></nolayer>で囲めばいいでしょ


267 名前: Name_Not_Found 投稿日: 01/11/27 21:50 ID:gMG2SCHf
>>266
そんなHTML4.01に存在しない独自拡張タグ使用する方が問題多いよ。
大体それHEAD内に書き込んでも意味無いし。


268 名前: Name_Not_Found 投稿日: 01/11/28 00:15 ID:OP19kqQi
>>267
あるもないも、意味大有りよ〜


269 名前: Name_Not_Found 投稿日: 01/11/28 00:38 ID:Az+Ab3Jt
>>262
俺は@importの後にNN4に読み込まれても困らない分を書き込んでるよ。
どっちかと言うとNN4で処理できない分をimport先に追い出した感じ。


270 名前: Name_Not_Found 投稿日: 01/11/28 07:33 ID:yYAA/Nep
>>269
その「NN4で処理できない分」が明確に分けられるんならいいんですが、
ネスケ4のバグっぷりは(組合せ次第では)何がバグるか見当もつかないから……。
結局専用CSSを書くのと労力は同等になりませんか。


271 名前: Name_Not_Found 投稿日: 01/11/28 09:21 ID:L5fxRUiu
>>270
同等(以上かも)。表示確認を果てしなく繰り返すしかなく…。
もともとNetscape4でもしょぼいなりの表示をしたかったからなんだけど。


272 名前: Name_Not_Found 投稿日: 01/11/28 10:13 ID:jtx1UR/8
ネスケ4専用のCSSファイルを作る位なら、いっそJavaScript Style Sheetにするってのはどう?
http://www.zspc.com/stylesheets/jss/index.html
それでももし、自分とこの独自拡張であるJSSも満足に表示できないのなら、NC4.xは本当のクズ。


273 名前: Name_Not_Found 投稿日: 01/11/28 13:17 ID:GTpfJ81m
H2とH3にスタイルシートで背景色と背景画像を指定してます。
パソコンの画面で見ると問題なく意図通り表示されるのですが、
プリントアウトすると背景色だけ刷られて背景画像が印刷されません。
IE5.5の印刷プレビューでもやはり背景色は見えるのに背景画像が見えなくなってます。
オプションの「背景の色とイメージを印刷する」はチェック済みです。
シートでmedia="print"や@media printと指定してみても結果は同じ。
これはIEの仕様(バグ)なんですか?
印刷にも背景画像を反映させるにはどうしたらよいのか、助言ください。


274 名前: Name_Not_Found 投稿日: 01/11/28 19:44 ID:Ch3wxPGJ
>>273
プリントアウトの設定が背景色も印刷することが出来たなら
黒背景色のサイトなんかを印刷したら、インクいくらあっても足りない。
背景色が省略されたときは、その文字色も違う色になって印刷されるはずです。
それなりに親切な設定だと思いますよ。

どうしてもブラウザで見たままの印刷をしたいなら、画面ごとプリントスクリーンキーで
キャプチャして、画像編集ソフトから印刷してみてはどうでしょ。


275 名前: Name_Nyot_Foundにょ 投稿日: 01/11/28 21:07 ID:76W9ThI1
フォントの大きさ等をHEAD内に指定し、
TABLEタグ内でそれを使うとなぜか下に
空白が出来てしまいますが、なぜでしょう?


276 名前: Name_Not_Found 投稿日: 01/11/28 21:23 ID:GwY2nA6B
>>272
使ってみたけど、全然だめ。
ネスケ4のクソスタイルシートをJavaScriptで書けるだけ。
表示はまったく変わらん。
ネスケ4なんて@importで十分だゴルァ!


277 名前: 273 投稿日: 01/11/28 22:33 ID:I33kHPra
>>274
>プリントアウトの設定が背景色も印刷することが出来たなら
なにか誤解なさってませんか。
既に>>273でも書きましたが、背景“色”は現に印刷できるのです。
(そのための設定がIEの「インターネットオプション>詳細設定」にもあります。)
にも拘らず背景“画像”だけが印刷に出ないので、これを何とかしたいのですが。
つまり、background-colorでなくてbackground-imageの方です。


278 名前: Name_Not_Found 投稿日: 01/11/29 00:20 ID:I/0xIjdm
>>275
質問の意味がわからん。
>TABLEタグ内でそれを使うとなぜか下に
それって何? 下って何の下?
もっと具体的に、できればソースを出して質問しておくれ。

>>276
表示は変らんけど、CSSでの意味不明なバグり方はしないだけマシでもない?


279 名前: 275 投稿日: 01/11/29 00:46 ID:+yJ5xusL
最初から書くとこんな感じです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>2ch</TITLE>

<STYLE TYPE="text/css">
H3{font-size:17px;font-family:"Times New Roman";font-style:normal;color:#000000;}
H4{font-size:14px;font-family:"MS ゴシック";font-weight:lighter;font-style:normal;color:#000000;}
</STYLE>

<META content="text/html; charset=Shift_JIS" http-equiv=Content-Type>
<META content="MSHTML 5.50.4134.0600" name=GENERATOR></HEAD>
<BODY>

<TABLE CELLPADDING=2 CELLSPACING=0 BORDER="1" BORDERCOLOR="#FFFFFF" WIDTH="375">
<TR>
<TD BGCOLOR="#DAF2FE" ALIGN="RIGHT" WIDTH="120">
<H3>11/29,002001</H3></TD>
<TD BGCOLOR="#E3E4FF" ALIGN="RIGHT"><H4>今日はいい天気でした。</H4>
</TD></TR>
</TABLE>

</BODY>
</HTML>


TABLEタグ内に HEIGHT="小さい数" を記述しても変わリません。
HEAD内に記述せずにSPANで各々やれば大丈夫なんですが、
日記なので、後々管理が辛いのです。

これはどうしたらいいのでしょうか?


280 名前: 275 投稿日: 01/11/29 00:52 ID:+yJ5xusL
補足。
セル内の文字の下に空間が出来てしまうという事です。


281 名前: ネットマフィア ◆4mrpMqxg 投稿日: 01/11/29 00:54 ID:DTsj+P3M
俺様のいうウェッブデザイン書けや!!下僕ども!!
ってところに来い!!そして書けよ!!わかったか!!


282 名前: Name_Not_Found 投稿日: 01/11/29 00:56 ID:nsks0o69
H3と H4に margin-bottom: 0px とか入れるが吉。


283 名前: 275 投稿日: 01/11/29 00:59 ID:+yJ5xusL
>>282

ありがとうございます!! 解決いたしました。
よ〜し、徹夜でホムペをCSSでリフォームするにょ〜。


284 名前: Name_Not_Found 投稿日: 01/11/29 01:05 ID:ehF5/CBn
>>279
せっかくCSSを利用するなら、もう少し勉強してテーブルレイアウトを止めるといいよ。


285 名前: Name_Not_Found 投稿日: 01/11/29 01:06 ID:nsks0o69
「今日はいい天気でした。」ってぇのは日記の本文?
だったら H4を使うのはどうかと思う。


286 名前: Name_Not_Found 投稿日: 01/11/29 01:53 ID:uxo2n6Tz
>>279
何でH3とH4なの?ってのは置いといて

H3とH4のスタイル指定に margin-bottom:0px を追加してみれ


287 名前: 286 投稿日: 01/11/29 01:55 ID:uxo2n6Tz
あーなんでこんな古いのにレスつけてんだ、漏れ
すでに解決済みだっつーのに
逝ってきます・・・


288 名前: Name_Not_Found 投稿日: 01/11/29 03:28 ID:ogVPFo1y
スタイルシートの切り替えにJAVAスクリプトを使わない方法ってありますか?
スレ違いかな・・


289 名前: 275 投稿日: 01/11/29 04:09 ID:x9Th/qEa
>>285様、286様。

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

H1,H2は、他に記述するものが出来たときの為にあけたんですが、
CSSじゃない<H1>タグのように、大きさが順々に小さくなったりするものではないですよね?


290 名前: Name_Not_Found 投稿日: 01/11/29 05:05 ID:AbJc1jQY
>>289
<H3><H4>を使うのはどうか、というのは
<H1>から使うべきだという意味ではないと思われ。
<Hn>は見出しを記述するために使うべきもの。
http://tohoho.wakusei.ne.jp/html/h1.htm


291 名前: Name_Not_Found 投稿日: 01/11/29 10:16 ID:qEj2hSAm
>>288
代替スタイルシートのことなら↓
http://pc.2ch.net/test/read.cgi/hp/991400015/l50
http://www.xinada.ne.jp/~handa/tech/CSS/StyleChange/index
ブラウザへの振り分けのことなら↓
http://east.portland.ne.jp/~sigekazu/css/boxm.htm


292 名前: Name_Not_Found 投稿日: 01/11/29 13:01 ID:HLPr1L9w
tableのセルの上にマウスがきたらセルの背景色を変えるっていうのは
ジャバスクリプトじゃないと無理ですか?


293 名前: 投稿日: 01/11/29 14:06 ID:no3+VYQS
>292
td:hover とかやればできるはずなのだが,
まともに対応している UA は多分まだない.
(N6 で不完全に対応していた気がする.)


294 名前: Name_Not_Found 投稿日: 01/11/29 14:07 ID:crTlkipW
>>292
CSSだけではムリです(少なくとも今の:hoverの実装では)。
cf. ttp://east.portland.ne.jp/~sigekazu/css/javascript.htm


295 名前: Name_Not_Found 投稿日: 01/11/29 14:23 ID:HLPr1L9w
どうもありがとうございます。
ジャスクリプト行きます。


296 名前: Name_Not_Found 投稿日: 01/11/30 16:52 ID:NB/RRvhG
>>294
ウソを言うな〜
セルの中で便宜的にAタグを使えばできる。
ついでに、IEならHTML+TIMEという技術を使えばできる。


297 名前: オカダ 投稿日: 01/12/01 06:53 ID:Nsgpp8zQ
IE6標準モードでふつうのボックス要素にoverflowを適用する方法は
ないものでしょうか? 擬似フレームをやってたので、HTML要素のみに
適用というのは残念。どうにかならないものでしょうか。せっかく
標準モードで margin-right:auto; margin-left:auto; という
ブロック要素のセンタリングが使えるようになっただけに……。


298 名前: Name_Not_Found 投稿日: 01/12/01 11:24 ID:7st21Uox
>>297
>HTML要素のみに
何のこと?
divとかならIEはwidthかheightを指定しないとoverflowが効かない。


299 名前: 298 投稿日: 01/12/01 11:45 ID:7st21Uox
追加
html,body{height:100%}
も指定しておくと疑似フレームには役立つかも。


300 名前: 300 投稿日: 01/12/01 17:11 ID:KFygR0+6
CSSをCCSと言う人がまわりにいて鬱。


301 名前: Name_Not_Found 投稿日: 01/12/01 18:29 ID:JTijVgWa
HTMLの <TABLE> のレイアウト利用が大っ嫌いで、
CSSをはじめたんですが、(かちゅスキン改造の為でもあるけど)
TABLE の代替策が見つからない(わかりません)。

枠線の表示は、borderで出来るのは分かるんですが…
いろいろ考えてみたんですが(1hour程)サパーリです(苦笑

どなたか教えてください。


302 名前: Name_Not_Found 投稿日: 01/12/01 18:33 ID:qhYSDkTx
まず、tableの代わりに使うのだと言う発想をやめる事。
それから具体的にはどのようなレイアウトにしたいかを明確に。


303 名前: Name_Not_Found 投稿日: 01/12/01 18:56 ID:GsBo7A8e
>>301

まあ、イケてるデザインスレのソースをじっくり研究することだ。
特にposition、floatまわりを重点的に。


304 名前: イケデザ住人 投稿日: 01/12/01 19:21 ID:giKLdJN+
>>301
入門でてっとり早いのが、左右どちらかにマージンをとって、そのマージン以下の幅の
ブロック要素をabsoluteで配置するとか。左右2段レイアウト程度なら
以下が参考になるんでは。

↓簡単なフロート例
http://www.skipup.com/~l-_-l/web/jikken/1.html
http://www.geocities.co.jp/Milano-Killer/8583/gokuwaza/divkage.html
↑こっちはあくまで『極悪サンプル』らしいが(笑)


305 名前: Name_Not_Found 投稿日: 01/12/01 20:59 ID:AsTCyrIu
>>304
僕も勉強の為そのサイトに逝こうとしたら、
IEの。。。で、OS落ちました(泣
IEのばかやろぉぉぉお!M$なんで分割されなかったんだよぅsage


306 名前: 100 投稿日: 01/12/02 01:39 ID:QrDM7CEN
<span onmouseover="this.style.background='#ff3399';" onmouseout="this.style.background='';">トップページへ</span>
これを全体に効果がでるってことにはどうすればいいですかねぇ?


307 名前: 白夜 ◆GiKO.QrM 投稿日: 01/12/02 03:11 ID:BGIGmY2L
>306
↓削除依頼だしたらね
質問スレ
http://pc.2ch.net/test/read.cgi/hp/1007225570/


308 名前: Name_Not_Found 投稿日: 01/12/02 03:23 ID:BhizBq3w
>>304
↓簡単なフロート例
http://www.skipup.com/~l-_-l/web/jikken/1.html

ドキュソタイプ宣言に激しくワラタ


309 名前: Name_Not_Found 投稿日: 01/12/02 09:33 ID:5XVBVQ1M
http://www.skipup.com/~l-_-l/web/jikken/1.html に曰く、
>左側はdivで囲っていない。というのも、 それをやると(やってみればわかると
>思うが) 頭の横巾100%から先程の40%を引いた値のままだらだらと下へ続く。と
>いうか、めんどくさいので作った。

しかしその http://www.skipup.com/~l-_-l/web/jikken/2.html を見ても、
1.htmlと何ら変りがない。IE5.5、NN6で確認。
むしろ http://www.skipup.com/~l-_-l/web/jikken/3.html がそれに近い。
どうなってるの?


310 名前: Name_Not_Found 投稿日: 01/12/02 10:16 ID:1kb4cN9p
http://dfj.cool.ne.jp/のformスタイルのときに、
背景画像が透けて、したの文字が見えるのですが、コレはどうすればいいのでしょうか。
網目状の透過gifでも使っているのでしょうか。


311 名前: うっ。 投稿日: 01/12/02 11:02 ID:AQuYs/K9
>>310
ソース見てないけど、filterのアルファブレンダリングでしょ。
bodyとかtableにstyle="filter:alpha(opacity=60)"とかにしてみ。
style="filter:alpha(filter:alpha(style=1,startX=0,startY=100,finishX=100,finishY=0,opacity=100,finishopacity=20)"
とか、細かく設定もできる。
あとは自分で調べて。いろいろあるし。


312 名前: Name_Not_Found 投稿日: 01/12/03 12:58 ID:NAeaD+SR
×アルファブレンダリング
○アルファブレンディング Alpha Blending


313 名前: Name_Not_Found 投稿日: 01/12/03 13:09 ID:/sdiTgB3
>>311
ありがとう御座います。
そうか、だからIE専用スタイルなんだ…


314 名前: 297 投稿日: 01/12/03 23:49 ID:oVWFFsQR
>>298,>>299
IE6の厳格モードでは、何でそんな仕様にしたのかわかりませんけど、
BODY要素にoverflowが効かないんですよ。

http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp

にも、

> 注 : 属性 overflow、overflow-x、および overflow-y は、コンテナのサイズより大きい
> コンテンツを管理するときに使用するもので、標準準拠モードが有効になっていると、
> これらの属性は HTML 要素に適用されます。

とあります。


315 名前: 297 投稿日: 01/12/03 23:49 ID:oVWFFsQR
実際に調べてみますと、標準モードでは従来の擬似フレームの設定では
フレームにならない場合が多くあります。例えば縦に長いページの場合、
メインの部分をoverflow属性でスクロールさせたつもりが、HTML文書の
全体がスクロールして、position:absolute;で位置を固定したはずの
ナビゲーション部分が上に流れていってしまいます。

そこで、IE6標準モード対応型の擬似フレーム作成術があれば、
どなたか知恵を貸していただきたいな、と思った次第です。


316 名前: 297 投稿日: 01/12/03 23:50 ID:oVWFFsQR
とりあえず>>297より日も経ち、http://hp-design.net/
新規公開された標準モード対応のELAVATING NAVIGATOR 2を
使用することで落ち着きました。

いずれにせよ、いずれ互換モードは朽ち果てるわけでして、
どうせ一年も続かない私のサイトなどはどうでもいいですが、
企業サイトに関わるプロのデザイナーさんはたいへんですね。
対応すべきブラウザが一つ増え、その一方でノウハウの蓄積が
ある準拠ブラウザが消えてしまうわけですから。


317 名前: Name_Not_Found 投稿日: 01/12/04 11:18 ID:2vXlz8X8
>>314-316
ここ参考になりませんか。
http://www17.u-page.so-net.ne.jp/qb4/chiharu-/overflow.html#mozilla
http://pc.2ch.net/test/read.cgi/hp/991666454/118-129


318 名前: Name_Not_Found 投稿日: 01/12/04 15:49 ID:AlC/dwkx
おしえてください!hover対象のテキストをポイントすると
そのテキストを含んだテーブルがちょこっと動くんですよ。
グラっと。ガイシュツだったらスマソですが回避方法ご存知ありませんか


319 名前: Name_Not_Found 投稿日: 01/12/04 17:34 ID:z4lvX7kC
>>318への宿題。
その現象が起こるOS、UA及び、A:link、A:visited、A:hoverに対する
スタイル指定を、全て示せ。


320 名前:   投稿日: 01/12/04 18:06 ID:FWi9S/pa
>>318

要するにa:hoverにしかborder指定してないだけじゃん

A:link、A:visitedとかにa:hoverと同じwidth指定して
色をtransparent(透明)にでもしろ


321 名前: Name_Not_Found 投稿日: 01/12/04 21:01 ID:E/k6b5t/
UL{margin:0 auto;}と指定しました。
NN6やIE6の標準準拠モードでは左右マージンをautoにすればセンタリングされるはず。
しかしちっとも表示に変化がありません。margin-leftとmargin-rightにしても同様。
ULでなくliをセレクタにして指定すると、ULに設定したborderから間が空きすぎますし。
リスト・コンテナを中央揃にするにはどうしたらよいのですか。


322 名前: Name_Not_Found 投稿日: 01/12/04 21:02 ID:/06UgKs+
318です。ありがとうございます


323 名前: Name_Not_Found 投稿日: 01/12/05 10:00 ID:wdBgvhi9
>>321
ulのwidthを定めると良いでしょう。


324 名前: Name_Not_Found 投稿日: 01/12/05 10:48 ID:elEck6B4
>>323
??? width指定ではセンタリングにはならないのでは?
――特にリストの横幅が入れる内容によって定まらない場合は。
もしうまく中央寄せにするやり方があるのならご教示くださいませんか。


325 名前: Name_Not_Found 投稿日: 01/12/05 12:37 ID:Gf6STMfX
>>316
だからbody{height:100%}
が必要なんだってば。

<style type="text/css">
html,body{overflow:hidden;height:100%;margin:0;}
div.scroll{height:100%;overflow-x:hidden;overflow-y:scroll;}
</style>

これでbody直下のdiv.scrollをスクロールさせれるはず。


326 名前: Name_Not_Found 投稿日: 01/12/05 13:03 ID:wdBgvhi9
>>324
いや、{margin:0 auto;}と同時に、です。

http://www.fan.gr.jp/~kaz/rec-css2/visudet.html#the-width-property
ここの「10.3.3 通常フローの非置換ブロック要素の場合(Block-level, non-replaced elements in normal flow)」
を読む限り、ブロックレベル要素の width を auto にした場合
( デフォルトが auto なので指定しない = auto を指定 )
margin-left や margin-right に指定した auto は 0 と算出される。

誤読してたらゴメンだけど。


327 名前: 324 投稿日: 01/12/05 14:23 ID:8H9Dk338
>>326
ここですね。見ました、有り難うございます。
http://www.fan.gr.jp/~kaz/rec-css2/visudet.html#q6

width:x%(100%以外)を指定すれば、中央寄せにできました。
しかしできれば、リストコンテナ内の最長のli要素に合せて
ul要素のwidthを自働的に指定できる手があると助かるんですが。
IEのCSS関数構文(expression)でもないと無理ですかね?


328 名前: Name_Not_Found 投稿日: 01/12/05 15:39 ID:wdBgvhi9
>>327
自動的となると俺には思いつかない。
すまん。


329 名前: Name_Not_Found 投稿日: 01/12/06 01:19 ID:pwfBjt9M
UICの「もっと書き込み隊」カスタマイズが上手く出来ない・・・


330 名前: Name_Not_Found 投稿日: 01/12/06 10:12 ID:RVUNkfK2
>>329
それはご愁傷様。
で、質問は?


331 名前: Name_Not_Found 投稿日: 01/12/06 23:58 ID:5QVaOlp5
age


332 名前: Name_Not_Found 投稿日: 01/12/07 01:00 ID:V54p3vid
Mac_NN6
外部スタイルシートで

body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}
.j9, .j10. .12 {font-family:Osaka, MS Pゴシック, MS UI Gothic, sans-serif;}

はスタイルを読むけど、

.j9, .j10. .12 {font-family:Osaka, MS Pゴシック, MS UI Gothic, sans-serif;}
body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

(つまりクラスの指定が先の場合)はダメってのは
そういう仕様?それともなんか間違ってます?
だれかおしえてくさい。


333 名前: Name_Not_Found 投稿日: 01/12/07 01:05 ID:2Cy2v0ZI
>>332
>.j9, .j10. .12
.j9, .j10, .j12、ではなくて?


334 名前: 333 投稿日: 01/12/07 01:16 ID:2Cy2v0ZI
一応、解説しておきますか。
ピリオド“.”とカンマ“,”を間違ってはどれがセレクタかブラウザも混乱します。
クラス名は先頭に数字を使ってはいけません。「.12」は不可。


335 名前: 297,314-316 投稿日: 01/12/07 03:32 ID:k0mqkU7e
>>317
>>325
どうもありがとうございました。スクロールバーが二本出ることさえ諦めれば、
IE6標準モードで擬似フレームを実現できることを確認しました。

もっとも外側のバーは空なので、見た目に気になるだけ不都合はありません。
(NN6では予想通りバーは一本のみでした)


336 名前: Name_Not_Found 投稿日: 01/12/07 12:04 ID:8+1uPd9s
>>332
「MS Pゴシック」「MS UI Gothic」は'で括らないと。
http://www.fan.gr.jp/~kaz/rec-css2/fonts.html#value-def-family-name

Macもっていないんで、これが原因かは分からないけど。


337 名前: Name_Not_Found 投稿日: 01/12/07 17:49 ID:Ud0nVczr
テーブルセルに
td { font-size: 10pt; text-align: center; vertical-align: middle}
というカンジでテキスト位置を中央に指定しています。
テーブルの中のテーブルセルには有効なのですが、大元のテーブルの中に
あるテーブル自体はネスケでは中央にきてくれません。
IEでは大丈夫なのですがネスケではこういう場合無理なのでしょうか?
入れ子になった内側のテーブルをネスケでセルの中央に配置するには
どうしたらよいのでしょうか。


338 名前: Name_Not_Found 投稿日: 01/12/07 18:00 ID:IL74rrGI
ネスケってネスケ6?
内側のテーブルに次のスタイルを付ける。
table#naka { margin-left: auto; margin-right: auto; }

テーブルがtext-align: centerでセンタリングされないのは
正しい動作。ってFAQかな?


339 名前: Name_Not_Found 投稿日: 01/12/07 21:18 ID:9EvYWv0S
>>335
外側のスクロールバーも消せる。
ちっとは自分で考えれ。


340 名前: Name_Not_Found 投稿日: 01/12/07 23:02 ID:vyQKz28W
IE6のみにスタイルを適用させる方法があったと思うのですが、
googleあたりで探しても見付かりません。
検索語が悪いのかもしれませんが・・・。
ご存知の方がいらっしゃいましたら、教えて下さい。
宜しくお願いします。


341 名前: Name_Not_Found 投稿日: 01/12/07 23:07 ID:yvFN5ElP
>>340
<!--[if gte IE 6 ]>
<LINK rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
で、どうか。
cf.http://east.portland.ne.jp/~sigekazu/css/boxm.htm


342 名前: Name_Not_Found 投稿日: 01/12/07 23:11 ID:yvFN5ElP
あと、piro氏によれば――
>WinIE4/5/6 にのみスタイルを適用したい場合、独自拡張の expression()を使えば可能。
>例: margin:expression('0 0 1em 2%');
>
>WinIE6 にのみスタイルを適用したい場合、1に加え、文字列のエスケープを使えば可能。
>例: \6D\61\72\67\69\6E:expression('0 0 1em 2%');
>
>MacIE5 のみ除外したい場合、文字列のエスケープに空白を含めれば可能。
>例: \6D \61 \72 \67 \69 \6E :0 0 1em 2%;


343 名前: 340 投稿日: 01/12/07 23:15 ID:vyQKz28W
>>341-342 お二方
は・・・早いですね(^^。
どうもありがとうございましたm(_ _)m


344 名前: 340 投稿日: 01/12/07 23:16 ID:vyQKz28W
あ、お一人でした。すみません。


345 名前: 332 投稿日: 01/12/08 00:50 ID:/67rhIAC
>333-334
あ、書き込みミス。
.12は.j12の間違い。
で、やっぱり順番とか関係あるんスかねぇ。


346 名前: Name_Not_Found 投稿日: 01/12/08 00:54 ID:QbiweLCS
>>345
で、カンマとピリオドの混同もちゃんと直したの?
順番は、同じセレクタ・同じプロパティなら下の記述ほど優先する決まりだが。


347 名前: Name_Not_Found 投稿日: 01/12/08 00:57 ID:fb7r3mt9
>>345
もう>>336の指摘は験したの?


348 名前: ☆!☆ 投稿日: 01/12/08 01:28 ID:Yx5TD+pJ
インラインフレームの属性でallowTransparency とは何なのでしょうか?
allowTransparency をgoogleで検索しても、8件しか出てきません


349 名前: Name_Not_Found 投稿日: 01/12/08 01:36 ID:btdCfGEJ
>>342
その方法だと、
スクリプトがOFFのときにスタイルが適用されないので、
使うべきではない。


350 名前: Name_Not_Found 投稿日: 01/12/08 01:39 ID:btdCfGEJ
>>348
IE5.5以降でフレームの背景を透明にして、
透過させることができます。


351 名前: ☆!☆ 投稿日: 01/12/08 01:51 ID:Yx5TD+pJ
>>350
早いレスありがとう!

バリューコマースのバナータグに付いてて、
ビルダーV6でエラー表示(赤字)になるのですが、
未対応という事でいいのでしょうか?


352 名前: Name_Not_Found 投稿日: 01/12/08 01:56 ID:btdCfGEJ
>>351
マイナーな機能だから、
たいていのHP制作ソフトでは未対応だと思うよ。


353 名前: Name_Not_Found 投稿日: 01/12/08 02:03 ID:fra0umGi
>>338
ありがとうございました。
text-align: centerではテーブルはセンタリングされないのですね。
IEではうまくいくのになぁ。やはりネスケ対策は難しいです。


354 名前: 投稿日: 01/12/08 02:57 ID:/RSUta4V
>353
それはネスケ対策と言うのか…?
#text-align: center; で IE5.5 以前(と 6 の互換モード?)でテーブルが
#センタリングされるのは IE の正しくない動作,というのが FAQ なのです.


355 名前: ☆!☆ 投稿日: 01/12/08 04:00 ID:Yx5TD+pJ
>>351
ありがと!


356 名前: 341 投稿日: 01/12/08 12:20 ID:XDYJ+bJT
実は>>341の方法は験してないので、IE6と5.5未満をお持ちの方、結果を聞かせてくれると有り難い。


357 名前: Name_Not_Found 投稿日: 01/12/08 17:22 ID:btdCfGEJ
>>356
×IE4.0以前(未確認だけど確認するまでもなく×)
×IE5.01
×IE5.5
○IE6.0
×Netscape,Mozilla
×Opera


358 名前: 341=356 投稿日: 01/12/08 21:17 ID:mkFgbZqZ
>>357
おお、バッチリ大丈夫ですね。有り難う。


359 名前: 投稿日: 01/12/09 00:15 ID:iSLgK9w3
>>354
テーブルのセンタリングは、text-align: center;かつ、テーブルの
左右のマージンをautoにすればほとんどのブラウザに対応できる

でオッケーかな?


360 名前: アホクサ 投稿日: 01/12/09 00:41 ID:MgxueAIk
<center></center>でくくった方がマシだな。
テーブル枠はテキストじゃないぞ。


361 名前: Name_Not_Found 投稿日: 01/12/09 00:47 ID:r3OTfsTJ
スレタイトル読んでくれや。
読んでないにしても、なぜよりによって <center> ?
せめて <div align="center"></div> とか
テーブルなんだから <table align="center">


362 名前: 投稿日: 01/12/09 01:00 ID:kITCh39W
>359
で,text-align: center; を正しく解釈してくれるブラウザが
内容までセンタリングしないように
td{text-align: left;} とか入れとくとさらに幸せかも.


363 名前: 332 投稿日: 01/12/09 01:42 ID:q92zeAFY
346-347
レスおそくてスマソ。
336の指摘は験しました。
やっぱり順番すかねェ。


364 名前: Name_Not_Found 投稿日: 01/12/09 01:49 ID:KZNT43fd
>>363
具体的に、>>332の後者でどのスタイル指定が効かなくなるのかを書いてくれないと。
>>332の通りの記述なら順番は関係無いはず。もし順番に左右されるならバグ。


365 名前: Name_Not_Found 投稿日: 01/12/09 05:44 ID:C7+YngP0
┌────────────────────┐
│           コンテンツ            │
├───┬───┬────┬───┬───┤
│ ほ げ │. うま │ かえれ │ ギコ │ もなー│
├───┴───┼────┼───┴───┤
│. 逝ってよし!. │.      │. オマエモナー │
└───────┴────┴───────┘

上記のようにCSSで記述しようとおもったんですが
%で幅を決めてたら上手くいきません。

<DIV class="contents">
<H2>コンテンツ</H2>
<UL class="up">
<LI>ほげ
<LI>うま
<LI>かえれ
<LI>ぎこ
<LI>もなー
</UL>
<UL class="under">
<LI>逝ってよし!
<LI>オマエモナー
</UL>
</DIV>

HTMLはこんな感じです。
%記述じゃムリなんでしょうか?
よろしくお願いします。


366 名前: Name_Not_Found 投稿日: 01/12/09 09:06 ID:Kh/z3PyX
方法はいくつかあるけど、何でCSSは書かない?
絶対配置? float?


367 名前: 359 投稿日: 01/12/09 11:36 ID:iSLgK9w3
>>362
サンクス!参考にさせていただきます。


368 名前: Name_Not_Found 投稿日: 01/12/09 14:21 ID:GgsGKJtA
2ch の上の欄の「掲示板タイトル」と「■ ▼」みたいな
テキストを両端に位置させるのを、
<table>タグを使わないでスタイルシートで実現できますか?


369 名前: Name_Not_Found 投稿日: 01/12/09 14:29 ID:bRjZaP8Y
>>368
float:leftとfloat:rightでやってみ。


370 名前: 名無しさん@Emacs 投稿日: 01/12/09 14:44 ID:GgsGKJtA
>>369 サンクスコできたよー


371 名前: 365 投稿日: 01/12/09 17:20 ID:Bfqybrzw
>366
バカなんで
display: inline;
と書いてますが問題ありでしょうか?

絶対配置ではありません。


372 名前: Name_Not_Found 投稿日: 01/12/09 17:26 ID:9+cTo4b/
だから何をdisplay:inlineにしたんだよ。
それから、
置換要素でないインライン要素にはwidth,heightは適用されないぞ。
IEだと適用されるが、それはIEが間違って実装している。


373 名前: 365 投稿日: 01/12/09 17:55 ID:Bfqybrzw
説明不足すません。

LIをインラインにしてます。
floatの方がいいんですね。
書き換えます。


374 名前: 365 投稿日: 01/12/09 18:24 ID:Bfqybrzw
粘着で申し訳ない・・・

floatのしたらborderが消えるんですがぁ・・・(;´Д`)


375 名前: 投稿日: 01/12/09 18:30 ID:fOhDr9pi
>365
あのね,情報を小出しにされるよりは,
CSS を全部(と言うか少なくとも li まわりとか ul とか)書いてくれたほうが
答える側も答えやすいのよ.
今の状態だと 1 つずつしか進めないから.


376 名前: Name_Not_Found 投稿日: 01/12/09 18:33 ID:nOvWQxS9
>>365
HTMLソース出したんならスタイルシートのソースも全部さらしてくれや。


377 名前: 365 投稿日: 01/12/09 18:47 ID:Bfqybrzw
.contents {
margin: 0 10%;
padding: 0;
}

H2 {
margin: 0;
padding: 1pt;
background-color: #ccc;
font-size: 85%;
line-height: 110%;
text-align: center;
font-weight: bold;
border-width: 0 1pt 1pt;
border-style: none solid solid;
border-color: #333;
}

.contents UL {
margin: 0;
padding: 0;
font-size: 80%;
line-height: 110%;
text-align: center;
font-weight: bold;
}

.contents UL LI {
margin: 0;
padding: 0;
list-style-type: none;
border-width: 0 0 1pt 1pt;
border-style: none none solid solid;
border-color: #333;
float: left;
}

.contents UL LI.last {
margin: 0;
padding: 0;
list-style-type: none;
border-width: 0 1pt 1pt 1pt;
border-style: none solid solid solid;
border-color: #333;
}

.contents UL.up LI {
margin: 0;
padding: 0;
width: 10%;
}

.contents UL.under LI {
margin: 0;
padding: 0;
width: 20%;
}


378 名前: 365 投稿日: 01/12/09 18:49 ID:Bfqybrzw
すみませんです。
↑ので出来たと思ったら画面サイズ変えたら
上段のコンテンツが何故か指定幅より小さくなっちゃいました。


379 名前: 365 投稿日: 01/12/09 18:50 ID:Bfqybrzw
あ、ちなみに上段に8つ、
下段に4つコンテンツを入れてるんです。


380 名前: Name_Not_Found 投稿日: 01/12/09 18:58 ID:nOvWQxS9
>>377
floatさせる要素には同時にwidth指定が必要です。


381 名前: 365 投稿日: 01/12/09 19:19 ID:Bfqybrzw
>380
後述の
.contents UL.up LI {
margin: 0;
padding: 0;
width: 10%;
}
じゃ、ダメでしょうか?


382 名前: 365 投稿日: 01/12/09 19:42 ID:Bfqybrzw
妥協して解決させました・・・。(トホホ


383 名前:   投稿日: 01/12/09 22:19 ID:RgFeSctl
background-colorは継承されないですよね
なのに、例えばbodyに指定した色が子要素にも引き継がれて
bodyの全ての背景色が同じになるのが理解できません。
どういうことなのでしょうか?


384 名前: Name_Not_Found 投稿日: 01/12/09 22:25 ID:jvN0sIjY
transparent だから。


385 名前: 383 投稿日: 01/12/09 22:44 ID:RgFeSctl
>>384
ありがとうございます
しばらく意味がわからなかったのですが、じっくり考えたらわかりました
初期設定がtransparentというのが原因で、継承してるように見えてしまう
わけなんですね。なるほどなるほど。


386 名前: 332 投稿日: 01/12/09 23:30 ID:1qecMy96
>364
.j9, .j10, .j12 {font-family:Osaka, MS Pゴシック, MS UI Gothic, sans-serif;}

を先にもってくるとNN6(Mac)では
body {background:#ff3300;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:none;}

が効かないんですわ。


387 名前: Name_Not_Found 投稿日: 01/12/09 23:54 ID:QiWds+9q
>>386
.j9, .j10, .j12 {font-family:Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;}
でも駄目ですか?


388 名前: Name_Not_Found 投稿日: 01/12/10 01:05 ID:mdbS/pTZ
初心者バレバレで申し訳ないですが、どなたか画像をページの右上にはっつける方法を教えてください。
お願いします


389 名前: Name_Not_Found 投稿日: 01/12/10 01:11 ID:LY29C/nJ
>>388
ここ見て試してごらん。
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background-position


390 名前: Name_Not_Found 投稿日: 01/12/10 01:13 ID:b8586i0j
>>388
背景として表示させるんじゃなければ
http://hp.vector.co.jp/authors/VA022006/css/text.html#text-align


391 名前: 388 投稿日: 01/12/10 01:28 ID:mdbS/pTZ
389-390さんありがとうございます。
見たんですが正直わかりませんでした。やりたいのは、同じ行の左端と右端に画像を載せる、ということです。
最初tableでやろうとしたんですが、CSSの方がスマートかなと思いまして。
tableでいうと、
<table border="0" width="100%">
<tr><td align="left"><img src="a.gif"></td><td align="right"><img src="b.gif"></td>
</table>
という感じの配置です。
もしわかりましたらよろしくお願いします


392 名前: 389 投稿日: 01/12/10 02:09 ID:NkcuTqIm
>>391
ならば、この辺見ればわかるかな。
http://www.sugai.f2s.com/web/CSS/back.html#background-image
http://dfj.cool.ne.jp/html/background.html#background_image

同じ行の左右両端に置くのなら、floatで位置指定がいいかも。
http://dfj.cool.ne.jp/html/position.html
頑張って勉強してね。


393 名前: 391 投稿日: 01/12/10 03:23 ID:Ah2VTRvW
なんとなくそれっぽい事ができました。
といってもdivでそれぞれを別の要素にしてポジション指定し並べたっていう場当たり的な方法ですが。。
ともかく389さんご丁寧にありがとうございました。


394 名前: Name_Not_Found 投稿日: 01/12/12 01:11 ID:l5uOr/1j
Win2Kなんですが、外部スタイルシートでのフォント指定が反映されて
ないようなのですが(一部)・・cursiveフォントとかが普通のゴシックになり
ます。IE5.5SP2です。Win98の時はちゃんと表示されました。表示させる
方法ないですか?

Win板でも訊いちゃいました・・まるちスマソ・・。こちらのほうがいいかなと
思いまして・・


395 名前: Name_Not_Found 投稿日: 01/12/12 17:36 ID:T7ysIgpL
質問です
◆レイヤーを常にブラウザ中央に表示させたい!
◆サイトの見栄えをチェックする時、win上でmacやunixの表示確認は可能ですか?
教えてください


396 名前: Name_Not_Found 投稿日: 01/12/12 17:43 ID:A1PuWS+m
>>395
左右の中央ならともかく上下でも中央ってのは(CSSでは)無理みたい。
http://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?past=5&c=r&n=226
div{position:absolute;top:50%;left:50%}が関の山、かな。

プラットフォームが別なのにそんな表示確認できる方法があったら私が知りたい。


397 名前: Name_Not_Found 投稿日: 01/12/12 17:55 ID:N59NruEW
Operaでpaddingが効かないんですがどしたらよいでしょうか?


398 名前: Name_Not_Found 投稿日: 01/12/12 18:14 ID:UPE9BbW2
>>397
インライン要素への padding 指定は無視してるみたいだね。
margin は効くのに。
正直、「諦める」以外の対策を思いつきません。

span のネスト?いやそれはダメだろ>俺。


399 名前: Name_Not_Found 投稿日: 01/12/12 18:22 ID:N59NruEW
>>398
レスどうもです。
つまり今後paddingは使わない方向で
対策していくしかないのですか・・・・。

゚゚(´□`。)°゚。ウワアアァァァーーーン!
Operaのうんこたれ〜!


400 名前: Name_Not_Found 投稿日: 01/12/12 18:56 ID:UPE9BbW2
>>399
Opera ユーザの数なんてたいした数でもないし、
無視すると言うのも、手ではある。
Opera 普及サイトだとでも言うなら話は別だけど。


401 名前: Name_Not_Found 投稿日: 01/12/12 19:22 ID:Qe/S+BIj
>>397-9
???……Opera6で、ちゃんとインライン要素へのpadding有効ですが?


402 名前: Name_Not_Found 投稿日: 01/12/12 20:17 ID:UPE9BbW2
>>401
あ、ホントだ。恥。

効かないのはインライン要素じゃなくてリンク系の擬似クラスだった。


403 名前: 403質問 投稿日: 01/12/12 23:18 ID:qrcILXSg
左marginを空けたwidth100%の画像を置いています。
(区切り線として、hrの換わりに)
IE6だと、「ウィンドウ幅の80%-右margin」の幅の画像が描かれます。
しかしNN6.2だと、「左marginを20%とった後で100%の幅」の画像が
描かれてしまい、どうしても横スクロールしてしまいます。

要は
IE:margin幅を除いた100%が幅になる
NN:margin幅は関係無しにウィンドウ幅100%を幅にして、その後でmarginを
  付け加える
となるのですが、どちらのブラウザの解釈が正しいのでしょうか?

ちなみにCSSは
img.line{
margin:0px 5px 0px 20%;
width:100%;height:2px;
}
です。IEの方が正しそうなんですが・・・


404 名前: Name_Not_Found 投稿日: 01/12/12 23:32 ID:x1MWsYnB
>>403
widthの幅は、marginとpaddingは含まない。
また、widthを%で指定すると親要素の幅から計算されるから、
実装はN6が正しい。はず。


405 名前: 403質問 投稿日: 01/12/12 23:36 ID:qrcILXSg
>>404
おぉ!そうなんですか!ありがとうございます。
そうなってくると、両方のブラウザで左20%、右5pxのmarginを残した
画像を表示するのはなかなかムツカシイですね。
他の方法を考えてみるか・・・


406 名前: Name_Not_Found 投稿日: 01/12/12 23:37 ID:0EDtl3Kr
>>403
NN6が正しい。WinIEでもver6で標準準拠モードにすれば正しく計算する。
cf.http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width

IEの互換モード(従来の正しくなかった表示)の方に合せたいのなら、
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5で有效。*/
-moz-box-sizing:border-box; /* Mozillaの記述。N6で有效。*/
}
とする。
但し、Operaには効かない。


407 名前: 403質問 投稿日: 01/12/12 23:37 ID:qrcILXSg
カキコした瞬間に思いついたんですが、
divかなんかに画像を入れて、divにmarginを設定したらいけるかな?
とりあえず試してみます。大きなヒントになりました。
ありがとうございます>>404


408 名前: 403質問 投稿日: 01/12/12 23:41 ID:qrcILXSg
っと。>>406さんのは高度なテクですね。
CSS2の辞典しか持ってないもんで、そんな方法は
思いつきませんでした。CSS3辞典も買わなきゃ!(^^)


409 名前: 404 投稿日: 01/12/12 23:44 ID:x1MWsYnB
>>403
これとか
hr.line {
 margin: 0px 5px 0px 20%;
 height: 2px;
 background-image: url(line.gif);
}
ただ、2pxだと画像がちゃんと表示されない。むぅ。


410 名前: 403質問 投稿日: 01/12/12 23:53 ID:qrcILXSg
>>409
フム・・・文法的にはhr使った方が正しいですもんね。
とりあえず、今はそれを試してみます。10分後に結果
報告します。笑


411 名前: 403質問 投稿日: 01/12/13 00:03 ID:6WIV3Uva
ぐげ・・・>>409でおっしゃったとおり、画像が出ませんでした(;´Д`)
DIV使ってみるかな


412 名前: 403質問 投稿日: 01/12/13 00:09 ID:6WIV3Uva
DIV使ったらどちらも表示OKでしたヽ( ´∀`)ノ

文法的には少しおかしいけれど、表示さえうまく
いけば問題ないので万事オッケーです(^^

しかし、けっこうマスターしてきたつもりだったけど
CSS3があるとは思わなかった。笑
box-sizing:border-box;なんて初めて見たんでびっくり。
勉強が足りませんな。


413 名前: Name_Not_Found 投稿日: 01/12/13 00:19 ID:YiFRIxfI
>>412
CSS3は勧告候補でまだ正式に規格となってません。
だから裏技みたいなもんです。
前はその辺に詳しいページがあったのだけど、作者に削除されてしまって、
いまは下記の圧縮ファイルをダウンロードしないと読めません。
http://www.cc-net.or.jp/~piro/tips.lzh


414 名前: 403質問 投稿日: 01/12/13 00:25 ID:6WIV3Uva
>>413
なんと・・・そうでしたか。
では、とりあえずはCSS3の勉強は見送ることにします。
規格化されたら始めます。

皆さんありがとうございました。>>404 >>406 >>413


415 名前: Name_Not_Found 投稿日: 01/12/13 01:31 ID:gKWkRL7K
>>414
まぁ無理にとは言わないけど、少しずつでも読んどいた方がいいと思うよ。
仕様書の量は多いけど、基本的にはCSS2と殆ど変わらないし。

ttp://www.w3.org/TR/2001/CR-css3-selectors-20011113
ttp://www.w3.org/TR/2001/WD-css3-background-20010924
ttp://www.w3.org/TR/2001/WD-css3-fonts-20010731
ttp://www.w3.org/TR/2001/WD-css3-box-20010726
ttp://www.w3.org/TR/2001/WD-css3-values-20010713
ttp://www.w3.org/TR/2001/WD-css3-cascade-20010713
ttp://www.w3.org/TR/2001/WD-css3-text-20010517
ttp://www.w3.org/TR/2001/WD-css3-mediaqueries-20010517
ttp://www.w3.org/TR/2001/WD-css3-roadmap-20010406
ttp://www.w3.org/TR/2001/WD-css3-color-20010305
ttp://www.w3.org/TR/2001/WD-css3-ruby-20010216
ttp://www.w3.org/TR/2001/WD-css3-multicol-20010118
ttp://www.w3.org/TR/2000/WD-css3-userint-20000216
ttp://www.w3.org/TR/1999/WD-css3-page-19990928


416 名前: Name_Not_Found 投稿日: 01/12/14 00:36 ID:ZD/d5KCU
恐ろしく間抜けな質問ですが、どうか教えてください。
画像をセンタリングしたいのです。
一体どうすれば。。


417 名前: Name_Not_Found 投稿日: 01/12/14 00:39 ID:ABQlsI8s
<div style="text-align: center">
<img src="***" alt="***" width="***" height="***">
</div>


418 名前: 416 投稿日: 01/12/14 00:40 ID:ZD/d5KCU
text-alignでできました。お騒がせしました。。
textじゃないのに、、


419 名前: Name_Not_Found 投稿日: 01/12/14 00:42 ID:AYyud0Vy
>>416
img{text-align:center;}でどう?
どんな文脈で配置するか、画像を挿入する前後の要素の関係にもよるけど。
できればHTMLソースも出してみて。


420 名前: Name_Not_Found 投稿日: 01/12/14 00:44 ID:AYyud0Vy
>>418
この場合、textってのはインライン要素のことだからね。


421 名前: 416 投稿日: 01/12/14 00:49 ID:ZD/d5KCU
417さん419-420さんどうもです。
単純にバナーみたいなGIF画像を配置したかっただけで、リファレンスを見たのですが、
どうしてもセンタリングにtextしかないので悩んでしまいました。
インライン要素、、というのはつまり、ボックスをセンタリングするのではなく、
ボックスの要素をセンタリングする、という概念でよろしいでしょうか?

まだまだ勉強不足なようで、教えてくださる皆様にはほんと感謝しています。
このスレッドの方はみんな親切で幸せです。では。


422 名前: Name_Not_Found 投稿日: 01/12/14 00:52 ID:EsbolDvs
というか、HTMLは全部テキスト(文字)だから。感覚的には画像はテキスト
じゃないけど、それを表示させるタグはテキストだし。タグ自体に
せン太リングスタイルを使うという感じかな


423 名前: Name_Not_Found 投稿日: 01/12/14 01:19 ID:xgSaczea
>>421
ボックス・モデルはCSSでは全ての要素に当てはまるんですけど。
その全要素はインライン要素とブロック要素とに大別されます。
http://www.kanzaki.com/docs/html/element-level.html#inline
↑基本ですので勉強して下さい。


424 名前: Name_Not_Found 投稿日: 01/12/14 01:23 ID:xgSaczea
ブロック要素のセンタリングはmargin-left:ayto;margin-right:autoでできることになってます。
つい最近も話題になったFAQなので、読んで下さい。↓
http://pc.2ch.net/test/read.cgi/hp/1007538322/445-484


425 名前: Name_Not_Found 投稿日: 01/12/14 22:45 ID:J6P/a0Ew
おいらこーゆーレイアウト(http://user404.hoops.ne.jp/page01.html
を外部スタイルシート2枚(各ページ共通のdefault.cssにこのページ専用のレイアウトを上書きするtable.css
で作ったんですけど、全てのtableを中央揃いにするのに一個一個のtabeleタグにalign=centerって埋めてるんですけど
他のタグと共にスタイルシートで一括表現出来ないでしょうか?centerタグを先頭と後尾に指定は邪道っぽいんで使いたくないので
なんとかスタイルシートで表現したいんですけど、だれかスタイルシート詳しい方いらはりますか?


426 名前: Name_Not_Found 投稿日: 01/12/14 22:51 ID:ABQlsI8s
そもそもこーゆー状況で table を使う事自体がアレなので
(ここは strict スレじゃないから良いのか? まぁいいや)
div とかで囲んでてきとーに左右の margin 設定するのが吉かと。


427 名前: Name_Not_Found 投稿日: 01/12/14 22:54 ID:t3EtYaxy
>>425
ネタですか? ほんとにCSSを勉強してますか?
すぐ上に類似のFAQがある事に気が付きませんか?


428 名前: 425 投稿日: 01/12/14 23:08 ID:J6P/a0Ew
上っすか?たぶんmarginのやつですか?
えーとモデルが323女史の日記なんですけどあれをスタイルシートで書き直して
うまくいかないなぁと思ってたんですが
<center>
<table>
日記本文A
</table>
<table>
日記本文B
</table>

</center>
をなんとか

<table>
日記本文A
</table>
<table>
日記本文B
</table>


スタイルシートに一行記述

にしたくて

とほほさんとこで見てそれ(maginなんとか)一回試してうまくいかなかった気がしたんですけど
もっかい試してみます


429 名前: 425 投稿日: 01/12/14 23:19 ID:J6P/a0Ew
あ、やっぱうまくいかないみたいなんですが

左右に均等にマージン振ってテーブルを中央に寄せるのは出来るんですけど
テーブルの横幅がブラウザのサイズや解像度でぶれるので、モデルにしてるサイトみたいな
左右の空白が大きいのを再現するとブラウザ最大にしてるとそっくりなんですけど
小さい窓にしたら横空き幅固定だと線みたいなテーブルになるんですけどなんとか
要素の大きさ保ったままセンタリングって出来ないっすか?


430 名前: Name_Not_Found 投稿日: 01/12/14 23:44 ID:t3EtYaxy
>>429
本当に>>424のを読んだの?
……ひょっとして、幅の指定は%だけって思ってる?


431 名前: 425 投稿日: 01/12/14 23:59 ID:J6P/a0Ew
えーと‥‥、一応ptで指定を、なんかやはり間違ってます?ためしに424を真似たら左寄りになるんですけど

<table style="margin-left:auto; margin-right:auto; width:400pt;">
<thead><tr><th>
■ 2001年12月中旬 ■
</th></tr></thead>
<tbody><tr><td>
日記本文
</td></tr></tbody>
</table>


432 名前: Name_Not_Found 投稿日: 01/12/15 00:05 ID:Sn5BrJHP
autoはIE6から


433 名前: 425 投稿日: 01/12/15 00:10 ID:oBidc1rA
うちのブラウザ5.5でした(^^;

友人にネスケはいないんですけど5.01とか5.5の方が
6.0使ってるやつより多いんで、スタイルシート使って
テーブル要素ごとセンタリングゆーのは諦めます
5.5でもセンタリング反映って現時点では無理ってことでいいんですか?


434 名前: 425 投稿日: 01/12/15 00:14 ID:oBidc1rA
連続投稿すいません、>>433の現状で無理、の意味ですけど
tableのwidthは400ptか500pxにしたままでセンタリングという意味で


435 名前: Name_Not_Found 投稿日: 01/12/15 00:29 ID:Ifjsfnpu
IE5 は text-align:center で table センタリングするんじゃなかったっけ。
インライン要素みたいに。


436 名前: 425 投稿日: 01/12/15 00:37 ID:oBidc1rA
>>435
<table style=text-align:center;>にしてみたんですが
IE5.5の環境だと左寄りのまんまみたいです


437 名前: Name_Not_Found 投稿日: 01/12/15 00:55 ID:Ifjsfnpu
>>436
そうじゃなくて、<table></table>を含む要素で text-align:center を指定するの。


438 名前: 425 投稿日: 01/12/15 01:04 ID:oBidc1rA
>>431の<thead>や<td><th>にtext-align:centerを指定するとセル中の文章のセンタリングですよね

えーと<table></table>を含むってことは

<ココ↓>
<table>日記12/14</table>
<table>日記12/13</table>
<table>日記12/12</table>
</ココ>

ってこと(tabeleより外側)ってことでしょうか?おれのページだと
tableの外側は<body></body>になってしまうんですがtable以外にも
題名とか連絡先等の左寄せのテキストコンテンツを置いてるので<body>に埋めると
他の部分が冗長になってしまいます、すいません


439 名前: 425 投稿日: 01/12/15 01:15 ID:oBidc1rA
あ、<p style=text-align:center;>〜(テーブル数個)〜</p>でいけました
ありがとうございます

<center>の方が早いのかも知れないけど使わないですみました(^^


440 名前: 投稿日: 01/12/15 01:18 ID:DuzNQ/st
>439
せめて <div> にして….
つーか,IE55 なら <table> に text-align:center; でいいはずだよ.
それでならないのは,他の何かがおかしいと思うのだけど.


441 名前: 425 投稿日: 01/12/15 01:24 ID:oBidc1rA
そうなんスか(^^; < 他がおかしい
>>436みたいな感じに書いたんですけど

あとどうせ<br>で間隔調整してるんで<br>一個減らして<p>のがいいかなぁと(^^;
<br><div>=<p>のつもりで今までいたんですけどやっぱ定義とかつかいどころとか
w3oなんとかってとこの勧めでやっちゃだめとかあるんでしょうか?


442 名前: Name_Not_Found 投稿日: 01/12/15 01:24 ID:Ifjsfnpu
>>438
そういうことです。
tableをdivタグで囲むだけのことすら冗長と思うなら
私ごときからはもう何も言うことはありません。


443 名前: Name_Not_Found 投稿日: 01/12/15 01:28 ID:OPvrN5bb
正直、425は<center></center>でいいと思われ…。


444 名前: 425 投稿日: 01/12/15 01:32 ID:oBidc1rA
>>443
だって<center>はdiなんたらtag(廃止予定、使っちゃイカンtag)とか
どっかで聞いたんでエラー判定サイトで出るエラーを減らそうかなぁと(^^;

おれも最初そうやってたんですけど < <center>〜</center>


445 名前: 投稿日: 01/12/15 01:41 ID:DuzNQ/st
>425
<html>
<body>
<table style="text-align: center; width: 100px; border: solid thick red">
<tr><td>
あほーあほーあほー
</td></tr>
</table>
</body>
</html>
枠つきの幅 100px テーブルが中央寄せ,その中で左寄せで文字,にならない?


446 名前: Name_Not_Found 投稿日: 01/12/15 01:49 ID:RqNZhc9n
>>440
>あとどうせ<br>で間隔調整してるんで<br>一個減らして...
おいおい、それこそcss使うところじゃねーか。
あとdefault.cssでfontを指定してるのになんでfont-familyを何度も指定してるんだ?
それにfont-size固定は好まれないよ。
単に中央寄せしたいだけならテーブルレイアウトから脱却しろよ。

てな感じで原理主義者が突っ込みを入れると思われるので注意が必要かも。


447 名前: 425 投稿日: 01/12/15 01:49 ID:oBidc1rA
>>445
そのインラインの方法でも外部cssファイル参照の方法でも
>>436でも言ってるけどやってみたのに中央に表示されなかったよ
環境はIE55のSP2だけど

たぶん<div style=text-a〜>〜</div>が正解なのかなぁ


448 名前: 425 投稿日: 01/12/15 01:53 ID:oBidc1rA
なるへそです

出来るだけ原理主義な方に指摘されないようなソース目指してたんですけど
ツッコみどころ満載でしたね、すんません
とりあえずこのスレの教訓を旨に<center>〜</center>は
<div style=text-a〜>〜</div>で置き換えときます


449 名前: 445 投稿日: 01/12/15 02:11 ID:DuzNQ/st
あー,僕が勘違いしてた.確かに table に指定じゃ無理だわ.
勉強しなおしてくる.ごめん.

#table も使わないし IE は 6 だしでまったく検証のしようがなかった.
#あちこち検索して表示例見てやっと理解した.ダメすぎ.


450 名前: Name_Not_Found 投稿日: 01/12/15 02:38 ID:bVXfOwyN
CSSである要素内での改行を禁止することはできますか?

具体的には、2chの「スレッド名一覧」において、

======
1. ++++ 2.@@@@@ 3.XXXX
XX 4.OOOO
======
ではなく、

======
1. ++++ 2.@@@@@
3.XXXXXX 4.OOOO
======
という風に、3を途中で改行させない方が見易いですよね。
a要素内での改行を禁止すれば、できるのではないかなと
思いまして。

色々調べると、印刷時にページ分割をしないプロパティは
見つかったんですが、上記のようなプロパティが見つかりません。

どなたかご存知の方いませんか?


451 名前: Name_Not_Found 投稿日: 01/12/15 03:26 ID:nZ6d3F03
>>450
a{
white-space: nowrap;
}
で一応可能だと思う。
ただしwhite-spaceはブロック要素に限るのでお勧めしない。

a{
width: ***
display: block;
float: left;
}
という手もある。widthが必須なのでこれもお勧めできない。


452 名前: Name_Not_Found 投稿日: 01/12/15 03:52 ID:jbbRLFsk
インラインOKだよ。エラッタも読もう。


453 名前: Name_Not_Found 投稿日: 01/12/15 04:18 ID:nZ6d3F03
すまん。知ったか厨ぶりを遺憾なく発揮してしまった。
首吊ってくる。


454 名前: Name_Not_Found 投稿日: 01/12/15 04:20 ID:nZ6d3F03
The 'white-space' property applies to all elements, not just block-level elements.
これね。


455 名前: Name_Not_Found 投稿日: 01/12/15 05:39 ID:bgSG01Xk
しかし、初心者から熟練者まで、まったり混在したスレではあるね。
レベルを問わずCSSについて質問できるという、かなり理想的なスレですな。

良スレsage


456 名前: Name_Not_Found 投稿日: 01/12/15 10:42 ID:zPVkjgR5
>>425 遅レス御免
そもそも、CSSを使って一括指定したいのなら
tableでレイアウトしている事自体意味が無いZO!
centerが廃止予定だと知っていてなんでtableでレイアウトを
しようとするんだか……

<body>
<div class="main">
<h2>日付</h2>
<div class="sentence">
日記本文
</div>
<h2>日付</h2>
<div class="sentence">
日記本文
</div>
</div>
</body>

div.main { text-align: center }
h2, div.sentence { width: 400pt; margin: 0 auto; padding: 5pt; font-size: 100% }
h2 { background-color:#a9a9ca; color: white }
div.sentence { text-align: left }

これは、模範解答じゃ無いYO!
div.mainのタグ付けとCSSの指定はbodyに置き換えてもいい
(その場合はやその他の要素にtext-alignを指定し直す必要あり)
兎に角、頑張って勉強しましょう。


457 名前: Name_Not_Found 投稿日: 01/12/15 12:00 ID:83xHJKH0
テーブルの中の背景を、外部cssから読み込みで
作っています。
bg画像を下固定でx軸繰りかえし・・・までは上手くいったのですが
なぜか背景色が指定していない緑になります。


458 名前: 457 投稿日: 01/12/15 12:05 ID:83xHJKH0
途中で送信してしまいました。すみません。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=x-sjis">
<title>タイトル</title>
<link REL="stylesheet" TYPE="text/css" href="1.css">
</head>
<body bgcolor="#000000">
<table>
<tr>
<td class="bg">
<br>
内容</td>
</tr>
</table>
</body>

1.cssの方は
.bg {
BODY {bgcolor="#000000"; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}
こんな感じです。

何方かお教えくださいませんか?
宜しくお願いします。


459 名前: iMa 投稿日: 01/12/15 12:08 ID:xaSAtwNK
BODY {bgcolor

じゃなくて
BODY {background-color:#000000}

だね


460 名前: 457 投稿日: 01/12/15 12:17 ID:83xHJKH0
>>459
レス有り難うございます。

.bg {
BODY {background-color:#000000; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}
こう変えてみたんですが、背景画像の上がなぜか緑になります。
環境がmacIEなのは関係あるのでしょうか?


461 名前: iMa 投稿日: 01/12/15 12:28 ID:xaSAtwNK
ああ、とんでもないことやってたんだね

.bg {
bgcolor="#000000"; background-image:url(img/bg.jpg); background-repeat:repeat-x background-attachment:fixed; background-position:bottom left
}

こうすれば。BODY { はいらない。


462 名前: 457 投稿日: 01/12/15 12:34 ID:83xHJKH0
何度も有り難うございます。
でもやっぱり緑になるのは解消できません。
申し訳ないです・・・。


463 名前: Name_Not_Found 投稿日: 01/12/15 12:38 ID:GWX+0fad
.bg {
background-color: black; ...以下同じ...


464 名前: iMa 投稿日: 01/12/15 12:37 ID:xaSAtwNK
何度もごめん

bgcolor=""じゃなくて

bgcolor:#000000;

だ。


465 名前: 457 投稿日: 01/12/15 12:42 ID:83xHJKH0
>>463
>>464
本当にすみません。
どちらもやってみたのですが、駄目でした。
背景画像の方は上手くいくのですが・・・。
どうして背景色は駄目なんでしょう…。


466 名前: iMa 投稿日: 01/12/15 12:43 ID:xaSAtwNK
基本的でした。
以下をコピ。

.bg {
background-color:#000000;
background-image:url(img/bg.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position:bottom left;
}

これこれ。こんな感じだ。


467 名前: Name_Not_Found 投稿日: 01/12/15 12:48 ID:xaSAtwNK
というか
.bg {
background:#000 url(img/bg.jpg) repeat-x bottom left fixed;
}

と簡略化した方がスッキリする。


468 名前: 457 投稿日: 01/12/15 12:49 ID:83xHJKH0
>>466
それで上手くいきました!
本当に感謝してます!有り難うございました!!
ちなみに、今まではどうして駄目だったんでしょうか?
参考までに教えて頂けませんか?


469 名前: Name_Not_Found 投稿日: 01/12/15 13:00 ID:xaSAtwNK
1つめ

.bgの指定内にさらにBODY要素に対する指定があった

2つめ

bgcolor="#000000"
てのはHTML用であり、CSSには使えない。(HTMLからコピーしたのかどうか知らないけど)


CSSの本でも1冊購入すればいいと思う。


470 名前: Name_Not_Found 投稿日: 01/12/15 13:05 ID:4ndlypG2
>>460
repeat-xの後ろに ; が入ってなかったよ。単純なミス


471 名前: 457 投稿日: 01/12/15 13:25 ID:83xHJKH0
本当にお世話になりました。
今日にでも本を買って、もっと勉強します。
有り難うございました。


472 名前: Name_Not_Found 投稿日: 01/12/15 16:26 ID:GcAB25PV
IE6、Mozillaともに、A要素にbackground-positonプロパティが効いてしまうんですが、
これは実装バグでしょうか。

A:link の下辺にマーカー風の画像を貼り込んでるんです。


473 名前: Name_Not_Found 投稿日: 01/12/15 16:31 ID:b4Q+CvGM
わざとそういう実装にしたんじゃないかな?
仕様書には効かないとしか書いてないけど、
実際問題どこを基準に表示するのかは実装依存で
それなら、効くようにしたほうが融通が利くし。

しかし、インライン要素が複数行にわたったときの
background-positonの挙動って、
WinIE,MacIE,Mozで全部ちがうのね。。。


474 名前: Name_Not_Found 投稿日: 01/12/15 16:46 ID:GcAB25PV
>>473
速レス感謝します。
そういうものですか。実際使ってる以上そのほうが助かるんですが、
何かこう、もやもやして落ち着きません。

確かに折り返し以降がおかしなことになりますね。
MacIEはわかりませんが。


475 名前: Name_Not_Found 投稿日: 01/12/15 18:08 ID:K2XUaEks
ul { list-style-image: url(hoge) ]
li { line-height: 1.4; }
この二つを組み合わせると、IE5やIE6でimageの位置がずれまくります。
なにかいい解決策はないでしょうか?


476 名前: Name_Not_Found 投稿日: 01/12/15 18:32 ID:LSr06CY1
<object>使ってでできるスクロールバーって
スタイルシートで色変えれなくないですか?
おしえてください

<textarea>なら変わるんですけどね。


477 名前: Name_Not_Found 投稿日: 01/12/15 18:45 ID:zPVkjgR5
>>475
解決策は無い。
リストマーカーの位置は厳密には定められてないもんで。


478 名前: Name_Not_Found 投稿日: 01/12/15 19:23 ID:QBzDLtKr
>>476
objectで呼び出された側のHTMLで変えないと無理。
画像とかだと不可能なんじゃないかな。

Win版IEだけobjectの扱いが他と違うよね。
変な余白が付くし、枠とスクロールバーが付くし。


479 名前: Name_Not_Found 投稿日: 01/12/15 20:46 ID:K2XUaEks
>>477
そうですか・・・ありがとうございます。

line-height: 1.0 にして、padding-bottom: 0.3em 等で行間をとってみたりと
いろいろ挑戦したのですが、別のところが崩れやがって挫折したぞゴルァ(゚Д゚)


480 名前: Name_Not_Found 投稿日: 01/12/15 21:56 ID:zPVkjgR5
>>479
リストマーカーの代わりに、
padding-left: *px;
background: url(hoge) no-repeat;
でやってみるって手もあるけど、
微妙にリストマーカーと違うから……


481 名前: Name_Not_Found 投稿日: 01/12/15 21:59 ID:b+gt5jHO
特定要素中にしか現れない要素
<caption>, <tr>, <td>, <li>, <dt>, <dd>あたりって、
css2的にはブロックレベル要素扱いでいいのかな?


482 名前: Name_Not_Found 投稿日: 01/12/15 22:09 ID:zPVkjgR5
>>481
dtやddはブロックレベルで扱えるが、tableは違う。
http://www.fan.gr.jp/~kaz/rec-css2/tables.html
仕様書に載ってる。疑問に思うなら先ず読む様に。


483 名前: 481 投稿日: 01/12/15 22:40 ID:V76JoxHx
>>482
いや、そこを読んだんだよ。そしたら、

>TH { text-align: center; font-weight: bold }
>CAPTION { caption-side: bottom; width: auto; text-align: left }

って例が出てたから、「あれ、text-alignが使えるってことは、
thやcaptionもブロックレベル要素扱いなのかな」と思って。


484 名前: Name_Not_Found 投稿日: 01/12/15 22:50 ID:E++hM7Gg
>>483
テーブル関連は例外と考えた方がいいと思われ。


485 名前: Name_Not_Found 投稿日: 01/12/15 22:54 ID:zPVkjgR5
http://www.fan.gr.jp/~kaz/rec-css2/visuren.html#q5
別にdisplay:blockがブロックレベル要素、と言う訳ではないのだろうね。
tableのページにはtext-alignを使うと書いてあるけど、
明記はされてないみたい。
インライン要素を含むボックスを生成する、と言う意味では
ブロックレベルだと考えていいんじゃない?


486 名前: Name_Not_Found 投稿日: 01/12/16 00:29 ID:qT6hj2AR
>>479
画像に余白を入れるなどして調整したらどう?


487 名前: 雀板初心者質問スレの1 投稿日: 01/12/16 00:36 ID:fxnN3vG2
>>456
あ!そうやればtable初めから要らないですやね(^^;
さすがここの人に聞くとスキルが別次元

CSS勉強始めたばっかで、lintで出る文法エラー一個一個
潰してる途中なんですけど勉強しなおしてきます(^^ ども


488 名前: Name_Not_Found 投稿日: 01/12/16 00:47 ID:TyUKZXGW
>487
スキルが別次元って…。
なぜ CSS があるのかを勉強すべし。


489 名前: Name_Not_Found 投稿日: 01/12/16 03:25 ID:z9Dlu7J9
あげるなYO!


490 名前: Name_Not_Found 投稿日: 01/12/16 04:29 ID:Va0Jf7Oz
>>489
ここ良スレだし、別にいいと思う。


491 名前: Name_Not_Found 投稿日: 01/12/16 12:33 ID:P6W1wmJg
>>480
どうしようもなく困ったらその手を使おうと思います。

>>486
IE5/6に合わせると、Netscape6でずれてしまいます。
N6は中心揃えしてくれるみたいです。
N6を基準にしようか……
サイトの性格上、N6/Moz使いがけっこう多そうだし


492 名前: Name_Not_Found 投稿日: 01/12/16 15:08 ID:yYo0O69y
>>491
そうでもないよ。


493 名前: Name_Not_Found 投稿日: 01/12/16 18:31 ID:pvh1euxs
「左揃え」「真ん中」「右揃え」意外で、
左よりちょいと半分ぐらい右よりの位置から
文章を書き出せるように、なんてことは出来ますか?
分かりにくくてごめんなさい。
お願いします。


494 名前: Name_Not_Found 投稿日: 01/12/16 18:32 ID:Z7EiZ2Py
marginでも指定しろ


495 名前: Name_Not_Found 投稿日: 01/12/16 18:33 ID:pvh1euxs
いぢわる・・・。
ごめんなさい、分かりません。


496 名前: Name_Not_Found 投稿日: 01/12/16 18:35 ID:C0RPZbW8
>左よりちょいと半分ぐらい右よりの位置から
ワケわからん♪

margin: 0 0 0 20%;


497 名前: Name_Not_Found 投稿日: 01/12/16 18:38 ID:Z7EiZ2Py
何が意地悪なのか俺わけわかりません(w

ってか基礎覚えれ


498 名前: Name_Not_Found 投稿日: 01/12/16 18:50 ID:HVbrn/LI
実はtext-indentのことだったりして。


499 名前: Name_Not_Found 投稿日: 01/12/16 18:58 ID:C0RPZbW8
>498
ガ━━━(゚Д゚;)━━━ン!


500 名前: Name_Not_Found 投稿日: 01/12/16 20:27 ID:mIsfL67E
1. 質問する
2. marginでも指定しろ、と言われる
3. 「margin」というのが何なのか判らない
4. 検索する
http://www.google.com/search?q=margin&hl=ja&btnG=Google+%8C%9F%8D%F5&lr=lang_ja

という流れに行かない理由が判りません。


501 名前: Name_Not_Found 投稿日: 01/12/16 20:52 ID:C0RPZbW8
>500
聞くほうが早いと思ってんじゃない?
検索のほうが早いのに


502 名前: Name_Not_Found 投稿日: 01/12/16 21:08 ID:5mb2PyF7
自分の頭は使いたくないんだろうな。自分の頭で達成した方が楽しいのに。


503 名前: Name_Not_Found 投稿日: 01/12/16 21:34 ID:Y/yttHaK
むしろ Google 知らないんではないかと思われ。


504 名前: 425や487なんかの雀板住人 投稿日: 01/12/17 01:45 ID:Nnj942qg
>>456
今頃ですが、色々勉強しなおしてきてちょっと気になったので

あの後>>456を参考に手直ししてみたんですがまず>>456の指示の
--
<div class=A>←これが

<div class=B>
○○
</div>←これに
<div class=B>
△△
</div>

</div>←class=Aの終了になって欲しかったとこ
--
だと、←でツッコみ入れたみたいなことになってしまいますよね

それで<div class=A>の替わりに<p class=A>で置き換えてみたんですけど
調べていくうちに、そもそもブロック要素(<p>〜</p>や<div>〜</div>)の中に
ブロック要素を置くことは出来ないってあったんで始めから文法上まずい指定文だったんじゃないですか?
生意気言ってすいません(^^;、いま一時的にtableに戻して表現方法を模索中っす
今→http://isweb35.infoseek.co.jp/diary/zch/page02.html


505 名前: 425や487なんかの雀板住人 投稿日: 01/12/17 01:46 ID:Nnj942qg
あ、間違えた
http://isweb35.infoseek.co.jp/diary/zch/page01.html


506 名前: Name_Not_Found 投稿日: 01/12/17 01:56 ID:UUP5zYN6
>>504
>そもそもブロック要素(<p>〜</p>や<div>〜</div>)の中に
>ブロック要素を置くことは出来ないって
div の中にブロック要素置けないなんてどこに書いてあった?URL教えてくれ

疑問があれば質問する前に>>2のその他資料をよく読みましょう。


507 名前: 504 投稿日: 01/12/17 02:02 ID:Nnj942qg
>>506
lintのエラー解説37番ですよttp://openlab.ring.gr.jp/k16/htmllint/explain.html
< div の中にブロック要素置けないなんてどこに書いてあった?URL教えてくれ


508 名前: Name_Not_Found 投稿日: 01/12/17 02:14 ID:jjKJGBEv
>>507
誤解してますね。
<p>〜</p>の中にはブロック要素は含めませんが、
<div>〜</div>ならば文法とも適合してます。
http://www.ne.jp/asahi/minazuki/bakera/html/reference/block#div


509 名前: 雀板初心者質問スレの1 投稿日: 01/12/17 02:20 ID:Nnj942qg
>>507
あ、そうだったんスか!すいませんありがとうございます(^^


510 名前: Name_Not_Found 投稿日: 01/12/17 15:03 ID:lgfy90y9
CSS切り替えスクリプトってドコで配布してるんですか?


511 名前: Name_Not_Found 投稿日: 01/12/17 15:06 ID:bxP9fub1
>>510
検索すれば?

http://www.google.com/search?q=CSS%90%D8%82%E8%91%D6%82%A6%83X%83N%83%8A%83v%83g&hl=ja&btnG=Google+%8C%9F%8D%F5&lr=


512 名前: Name_Not_Found 投稿日: 01/12/17 15:50 ID:ERT7JYpR
すんまそん、ddのインデントって、CSSの何で変えられましょうか。
text-indext:0pxとかだと、IE6では無視されてしまうのです。


513 名前: Name_Not_Found 投稿日: 01/12/17 15:57 ID:ERT7JYpR
超すんまそん。dlが抜けてただけにおじゃりました。


514 名前: yuu ◆xo3ilszg 投稿日: 01/12/17 16:20 ID:1W76Rx7n
>>504
DIVの閉じは省略できないので、「←これに」のところが「←これが」の
閉じタグだとすると、文法的におかしいわけです。
ですから、class=Aの閉じは、「←class=Aの終了になって欲しかったとこ」の
ところであるとパーズされて問題ないのです。


515 名前: 504 投稿日: 01/12/17 18:17 ID:Nnj942qg
そうなんスか、いっこ勉強になりました(^^


516 名前: Name_Not_Found 投稿日: 01/12/17 19:18 ID:7wyjET+K
<ul>のマージンについて質問です。

ul { list-style-type: none;text-align:left;padding-left:0px}
↑この場合、N6ではマージンが無くなるのですが、IE6だと無くならないんです。

ul { list-style-type: none;text-align:left;margin-left:0px}
↑この場合、IE6ではマージンが無くなり、N6では無くなりません。

どっちの解釈が正しいのでしょうか?ちなみにOpera6はIEと同じです。
どっちも書けばどっちでも同じようになるので良いのですが、なんだか
気持ち悪くて・・・。
というよりそもそもこのスタイル定義自体NG?
px単位に関してはこの際置いといて・・・。


517 名前: Name_Not_Found 投稿日: 01/12/17 19:27 ID:gMtNutbk
>>516
>どっちの解釈が正しいのでしょうか?
デフォルトスタイルに正しいも何もあるわけがない。
デフォルトスタイルのレンダリング方法が、UAによって異なるのは当たり前。

>どっちも書けばどっちでも同じようになるので良いのですが
margin と padding を同時に指定すれば良いのです。

HTML文書の制作者が、
特定のUAの整形結果(デフォルトスタイルシート)に依存して、
スタイルシートを部分的にしか記述しない事。


518 名前: 517 投稿日: 01/12/17 19:35 ID:gMtNutbk
>スタイルシートを部分的にしか記述しない事。
訂正。スタイルシートを部分的にしか記述しない事に問題があるのです。


519 名前: Name_Not_Found 投稿日: 01/12/17 20:14 ID:ELcckRei
>>516
ボックスモデルの勉強をした方がいいと思われ。
http://www.fan.gr.jp/~kaz/rec-css2/box.html
http://east.portland.ne.jp/~sigekazu/css/style.htm

marginやpaddingの初期値は、規格だと確かに0だけど、
実際にはブラウザ(User-Agent)が持っている(と見なされる)スタイルシートで
上書きされてしまうので、きっちり詰めたいのならちゃんと0と指定すること。

> px単位に関してはこの際置いといて・・・。
つうか、0なら単位を付ける必要は無いと思われ。


520 名前: Name_Not_Found 投稿日: 01/12/17 21:08 ID:hFh5xgE4
秀和システムのHTML&CSS&Javascript本が新版出てますね。
IE6とかMoz/N6も考慮されてます。


521 名前: Name_Not_Found 投稿日: 01/12/17 21:11 ID:EH6RftiM
Bodyのデフォルトの余白はOperaだとpaddingだよな。


522 名前: Name_Not_Found 投稿日: 01/12/17 21:14 ID:BTnPdsoa
>>520
これ?
http://www.shuwasystem.co.jp/~book0828/
新版出たのか。欲しいな。


523 名前: Name_Not_Found 投稿日: 01/12/17 21:32 ID:hFh5xgE4
>>522

ああ、そのシリーズだと思う。青い表紙です。


524 名前: Name_Not_Found 投稿日: 01/12/19 12:23 ID:/g1CweEM
Opera6日本語パッチあてているもので確認したんだけれど
font-variant:small-capsを指定していると、親要素のフォント
サイズより小さく表示されるんだね。
日本語にsmall-capsなんて考えられないけどね。


525 名前: Name_Not_Found 投稿日: 01/12/19 13:05 ID:d+F6hKwm
>>524
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc.2ch.net/test/read.cgi/hp/991666454/


526 名前: Name_Not_Found 投稿日: 01/12/19 13:06 ID:FB3AS/c/
>>519のリンク先でmarginのautoの意味はなんとなく(おそらく他で指定した値に矛盾しない平均値)
になるんだということは分かったのですが集約形で書いた指定文の意味がサパーリ
例えば[margin: 0 auto;]って集約形ですか?

それとmarginとpaddingの違いは、marginは上2em下1em空けろ指定した時
指定要素が二つ続いたら指定空き同士が重なって二つの内大きい方の値2emになり
合算値の3emにはならないけれどpaddingは重ならず合算の3emになるってこと
なんでしょうか?、他にも定義的な違いとかあるんでしょうか?


527 名前: Name_Not_Found 投稿日: 01/12/19 13:13 ID:FB3AS/c/
> 2つの値を指定した場合、1つ目の値が上下のマージン
> 2つ目の値が左右のマージンに適用される。
ですよね、上下は0で左右がautoってことでいいんですよね・・・
margin最近使い出したんでよく分かってないんですがpaddingとの
違いが相殺するか否かしか私には気づけないんですが


528 名前: Name_Not_Found 投稿日: 01/12/19 13:16 ID:3gGJx59o
>>526-527
ボックス・モデルを理解してください。
http://www.sugai.f2s.com/web/CSS/box.html


529 名前: Name_Not_Found 投稿日: 01/12/19 14:15 ID:FB3AS/c/
>>528
勉強させてもらいます


530 名前: 名無さん 投稿日: 01/12/19 19:33 ID:X+8FEluX
リストを、

画面幅広
-----------------------
・ほげ1 ・ほげ4 ・ほげ7
・ほげ2 ・ほげ5 ・ほげ8
・ほげ3 ・ほげ6 ・ほげ9

画面幅狭
---------------
・ほげ1 ・ほげ6
・ほげ2 ・ほげ7
・ほげ3 ・ほげ8
・ほげ4 ・ほげ9
・ほげ5

みたいに表示させるにはどうしたらいいんでしょうか。


531 名前: Name_Not_Found 投稿日: 01/12/19 19:39 ID:7fnir/7u
>>530

li{display:inline;}
li:before{content:"・";}
li{white-space:nowrap;}

こんな感じか? contentプロパティの対応状況がアレだが…。


532 名前: 名無さん 投稿日: 01/12/19 19:50 ID:X+8FEluX
>>531
ありがとうございます。
その方法だと、

1 2 3
4 5 6
7

って配置になっちゃいます。

1 4 7
2 5
3 6

って配置が理想なんです。

float を使った段組みだと、事前に決めただけの段数にしかできませんよね?
それ以前に、一つのリストで段組できるかどうかがわからない...


533 名前: 531 投稿日: 01/12/19 20:00 ID:7fnir/7u
>>532
スマ。番号よくみてなかった。漏れのスキルではその組み方はわからない。
CSS2では無理な気がするけど…。


534 名前: 投稿日: 01/12/19 20:22 ID:BQ9FELs7
DHTML ならできそうな気がする.気がするだけで僕にそれを作る能力はないけど.
いずれにせよ HTML+CSS2 だけじゃ無理だと思う.CSS3 の multicol(だっけ) を待つか.


535 名前: Name_Not_Found 投稿日: 01/12/19 21:24 ID:IflONOGS
スクロールバーの色とかは変え方知ってるけど
セレクトボックスの矢印とかスクロールとかの色の変え方わかりません
というか出来るの?


536 名前: Name_Not_Found 投稿日: 01/12/19 21:34 ID:v9ixxAL6
>>535 できない。背景色なら指定できるが。


537 名前: 名無さん 投稿日: 01/12/19 22:12 ID:ZzuQaq/3
>>534
おぉ、multicol なんてのがあるんですね。
そのものズバリってかんじだ。

でも CSS3 ってまだ正式に採用されてるわけじゃないんですよね。
マターリまつしかないのかぁ。

CSS でデザイン組むのって、C でプログラム組んだりするより遥かに面倒ですな...
互換性が無さすぎるYO!


538 名前: Name_Not_Found 投稿日: 01/12/19 22:34 ID:FFaQyHTi
>>537
CSSではないがmulticolはある。
http://tohoho.wakusei.ne.jp/html/multicol.htm
但しNC4のみの独自拡張タグ。


539 名前: Name_Not_Found 投稿日: 01/12/19 22:58 ID:YddAvnK2
>>537
俺はCSSしかできんが、Cってそんなに面倒くさくないの!?
マジっすか!?

Cもやってみようかな・・・このままじゃ就職ないし。笑


540 名前: 534 投稿日: 01/12/19 23:02 ID:tV0ktJtX
ID 違うけど 534

>537
CSS3 のマルチコラム(草案),リンク先は神崎さんのところ
www.kanzaki.com/book/html/updates.html#css3-multicol


541 名前: Name_Not_Found 投稿日: 01/12/20 00:05 ID:7fyY1V6f
もし間抜けな質問だったらすいません。

サイズの違う画像を並べて配置したいのですが、その方法がわかりません。
具体的には、100*100の画像2つと、200*200の画像1つを、
--------------
|100| |
----- 200 |
|100| |
--------------
って感じで配置したいのですが、その方法がわからないのです。
tableだったらcolspanを使う感じのレイアウトです。
左寄せ(か右寄せ)だったら絶対座標で指定できるのですが、
この画像全体を中央寄せにしたいので、座標が指定できないのです。。

どなたか識者の方、力をお貸しください。
宜しくです。


542 名前: 541 投稿日: 01/12/20 00:07 ID:7fyY1V6f
--------------
|100|     |
|---| 200  |
|100|     |
--------------
なんか表がズレました。。
わかるとは思いますが一応訂正させて下さい


543 名前: Name_Not_Found 投稿日: 01/12/20 00:21 ID:3PUQ6xL6
>>541-2 一例ですが。
--------------
| A |     |
|---|  B   |
| C |     |
--------------
<div aligh="center">
<div id="imagearea">
<img src="A.gif" alt="A" width="100" height="100" id="A">
<img src="B.gif" alt="B" width="200" height="200" id="B">
<img src="C.gif" alt="C" width="100" height="100" id="C">
</div>
</div>
#imagearea {width:300;height:200;}
#A {float:left;}
#B {float:right;}
#C {clear:left;float:left}


544 名前: 541 投稿日: 01/12/20 00:39 ID:7fyY1V6f
543さんありがとうございます。お教えいただいた方法でできました。
図々しいのですが、さらに
---------------------
| A |     | D  |
|---|  B   |-----|
| C |     | E  |
--------------------
とする方法もあれば教えていただきたいのですが。。
思ったより難しくて苦戦しています。いじってるうちに詳しくなれるでしょうか、、


545 名前: 543 投稿日: 01/12/20 00:41 ID:3PUQ6xL6
ごめん、間違った。
<div aligh="center"> →<div align="center">
で、
#imagearea {width:315px;height:215px;}
と少し大きめにしたら、狙った通りに配置される。
でももっといい方法があるかも。


546 名前: Name_Not_Found 投稿日: 01/12/20 00:49 ID:3PUQ6xL6
>>544
それは結局、[A・C][B][D・E]から成る三段組ですね。

CSSを用いた段組の作成のコツ
http://dfj.cool.ne.jp/html/column.html


547 名前: 541 投稿日: 01/12/20 00:50 ID:7fyY1V6f
あ、読んでみます。ありがとうございます


548 名前: Name_Not_Found 投稿日: 01/12/20 08:28 ID:tP1PgXRk
>>529
CSS話とは少し外れますが、
画面幅が狭いということは

---------------^
・ほげ1 ・ほげ6 |
・ほげ2 ・ほげ7
・ほげ3 ・ほげ8
---------------v
(画面外)
・ほげ4 ・ほげ9
・ほげ5

みたいに、途中の要素が画面の下まではみ出して
スクロールさせないと見えなくなる可能性も高いわけで、
ユーザビリティ的に問題がある気がします。
>>531 の方法のほうが、
同じはみ出すにしても順番に最後だけはみ出すので
使いやすいかと思われ。


549 名前: Name_Not_Found 投稿日: 01/12/20 10:49 ID:tG2jn4dL
>>548
たしかに。項目を並べたときに、自然と

・ほげ1 ・ほげ2
・ほげ3 ・ほげ4
・ほげ5 ・ほげ6

と思ってしまうかもしれないし、それにあえて逆らう必要も
ないのでは?

・・・と思いつつ、TVの番組表みたいなのを
作りたいのかもしれないですね。
それだと意地でも縦に並べたい気持ちもわかる


550 名前: Name_Not_Found 投稿日: 01/12/20 12:55 ID:YGkB8adw
>549
番組表なら「表」なんだしテーブルでいいと思う


551 名前: Name_Not_Found 投稿日: 01/12/20 13:25 ID:pHFvkPmY
>>550
同意。データを納めるのに表があるんだからねぇ。
ところでCSS3っていつ頃勧告になるんでしょうね。
すごく期待しちゃうんですけど。
でも対応ブラウザがないね。


552 名前: Name_Not_Found 投稿日: 01/12/20 17:58 ID:g+gVfudJ
>>551
http://www.w3.org/Style/CSS/current-work#table
によると、まず"Selectors"が2002/06にRecommendationとなる予定。
もちろん、他にもモジュールは沢山あるから、ブラウザが実装するのは2003年以降かな……。


553 名前: Name_Not_Found 投稿日: 01/12/20 18:07 ID:OzJNgzFx
初歩的な質問ですみませんが、HP作らなければならなくなったのですが、
本などみるとスタイルシート を利用したほうが良いと書いてあるのですが、

その反面スタイルシートに書いてもブラウザで対応していない部分が
あるようなことも書いてあるのですが、実際のところ今のHTMLってどうなんですか?


554 名前: Name_Not_Found 投稿日: 01/12/20 18:15 ID:/pErEqmM
>>553
ブラウザやバージョンによってまちまち。
特にNetscape4はスタイルシートを読み込ませただけで落ちたりする。
以前にもまして各ブラウザの各バージョンでの表示チェックは怠れない。


555 名前: Name_Not_Found 投稿日: 01/12/20 18:24 ID:OzJNgzFx
>>554
各ブラウザの各バージョンのチェックをする時間が無い場合、スタイルシートは使わない方がいいのでしょうか?


556 名前: Name_Not_Found 投稿日: 01/12/20 19:02 ID:4BSN/o/P
・CSS 使用の場合

 現在使われているブラウザで CSS にそこそこマトモに対応しているのは
 IE5 、 IE5.5 、 IE6 、 Netscape6/Mozilla 、Opera6
 (Opera は 6 以前でもそこそこ対応してるけど
  日本語がまともに表示出来ないのでとりあえず除外)。

 NN4.x と IE3 も一応対応してるけど実装がメタメタで。
 また CSS を読み込ませない方法もあるので除外。
 IE4 はよく知らないけど一応除外(ヲイ。

 IE5 以降は極端な違いは無いのでとりあえず 5 を使うとして
 表示確認に使うべきブラウザは
 IE5 、 Netscape6 or Mozilla 、 Opera6 の 3 つ。
 (Opera はまだマイナーなので除外しても良いかも知れない)
 一応 CSS 非対応ブラウザ(及び IE3 、 NN4)での表示も
 確認するとして NN3 とか加えて、計 4(3) つ。


・CSS 非使用で、物理要素やテーブルレイアウトで作る場合

 上記 4 つに加えて NN4 、 IE3 も含めて計 6(5) つ。


557 名前: Name_Not_Found 投稿日: 01/12/20 19:06 ID:4BSN/o/P
それから、
CSS 使用──というか HTML4.01 以上に準拠した記述を行えば
例え CSS に対応していないブラウザでも見た目が殺風景ではあるけど
文字情報の閲覧に(少なくとも理屈のうえでは)問題はない。
音声読み上げブラウザなど非視覚系 UA にも(たぶん)対応。

また極論ではあるけど、将来
「 HTML4.01 及び CSS2 完全対応、 ただし物理要素は一切非対応」
なんてブラウザが出てこないとも限らない。
まぁ今日明日にこんなブラウザが出ても普及は無理だろうけど
自分ならとりあえず使ってみるかも知れない。

なによりも W3C が
「文書構造は HTML で、見栄えは CSS で記述」
と言ってて、 UA 制作側もそれを意識してきているので
従っておけば安全。
例え HTML4.01 以上 + CSS で正しい記述をしていて
レイアウトが崩れてしまうようなブラウザがあっても
「ちゃんとした規格がある以上、それに対応していないブラウザが悪い」
と胸を張って言える。


558 名前: Name_Not_Found 投稿日: 01/12/20 19:07 ID:4BSN/o/P
ただし「胸を張って云々」はやっぱ個人サイトに限るかな。
どうして「HP作らなければならなくなった」のかは知らないけど
もし企業とかのサイトを作るのならば
NN3 や NN4 でもそこそこ見栄えのするサイトを作らなければ
ならないかも知れない。


559 名前: Name_Not_Found 投稿日: 01/12/20 19:41 ID:pHFvkPmY
>>558
でも、http://www.harmonate-town.com/
こういった例もあるわけじゃないですか。
結局は、いかにクライアントに理解してもらうかなんじゃ
ないのかな?
そういう意味では、「紀野と」なんかじゃこのようなサイトを
作ることないでしょうけどね。


560 名前: Name_Not_Found 投稿日: 01/12/20 20:49 ID:YfjbnPQj
>>552
>まず"Selectors"が2002/06にRecommendationとなる予定。
>ブラウザが実装するのは2003年以降かな……。
IEなんかは草案からのフライング対応が十八番だから、(rubyとか縦書きとか)
次のバージョンでは対応してるって可能性もないとは言えないと思う。
まあ、次のバージョンがいつ出るかっていうとアレだが(わら


561 名前: Name_Not_Found 投稿日: 01/12/20 21:00 ID:pZCsnh4k
カーソルについて質問です。
以前は

A:link
{
cursor:n-resize;
text-decoration:none;

}

A:active
{
cursor:n-resize;
text-decoration:none;

}

A:visited
{
cursor:n-resize;
text-decoration:none;

}

A:hover
{
text-decoration:underline , overline;
color:magenta;
background:aquamarine;
cursor:n-resize;
}

とするとリンクにポイントするとカーソルが↑のような表記になったのですが
IE6にしてからはサイズ変更のアイコンになってしまいました。
これはどうしたら直るものなのでしょうか?


562 名前: Name_Not_Found 投稿日: 01/12/20 21:13 ID:SKaBfGme
横れすでスマソ。&& IE6はよく分からんが、
カーソルって基本的に (以下・時間がないので省略)


563 名前: Name_Not_Found 投稿日: 01/12/20 21:26 ID:5vtDcD3f
>>561 "n-resize"の意味って分かってっる?


564 名前: 549 投稿日: 01/12/20 22:10 ID:tG2jn4dL
>>550 >>551
確かに。でも、テーブルにするとメンテナンス性悪いやん。
縦のテーブルがあれば・・・


565 名前: Name_Not_Found 投稿日: 01/12/20 22:13 ID:YfjbnPQj
>>561
>>562-563の意訳は「カーソル変更するなヴォゲ!!」です。
「n-resize」は「上方向へのサイズ変更を示すカーソル形状」です。
英語くらいできた方が良いのでは。

あと、a:hoverなカーソルはpointer(デフォルト)にしておいて下さい。
Winではpointerもdefaultも矢印ですが、
マックではふつうpointerが「手」の形状になるので、
これを変更されるとリンクの区別が付きにくくなってマジうざいです。

無意味なカーソル変更は初心者丸出し。


566 名前: Name_Not_Found 投稿日: 01/12/20 22:21 ID:DB9R3S1o
なぜ意味を知らずに値を与えるということがあり得るんだろう?


567 名前: Name_Not_Found 投稿日: 01/12/20 22:40 ID:YfjbnPQj
>>566
「blockquoteは字下げを行うタグです」


568 名前: Name_Not_Found 投稿日: 01/12/20 23:49 ID:0mLDOkfU
>567
???


569 名前: 561 投稿日: 01/12/20 23:50 ID:O1TWI+AN
>>565

わかりました。
どうも私は解釈を間違っていたようですね。
Macのことは全然頭に入れてませんでした。
出直してきます。
因みにあのカーソルのものはwww.tanasan.comというところでソースが載ってたので
そのまま載せただけです。当時はそんな事知らなかったもので、ろくに意味もふかく
気にしなかったのです。


570 名前: Name_Not_Found 投稿日: 01/12/21 00:07 ID:c55+mQ+L
>>568
そう解説してる本/サイトは少なくとも要素の意味なんて考えてないんだろ。


571 名前: 568 投稿日: 01/12/21 00:20 ID:mocg4zHR
>570
あ、なんとなく理解出来た。ありがとう。


572 名前: Name_Not_Found 投稿日: 01/12/21 00:31 ID:12hmk5xr
IEでTABコードを表示する方法を探しています。
PREタグでかこむのも方法ですが、ソースコードならこれでも良いのですが、
文章などが混じっていると、ブラウザのウィンドウサイズに合わせて文章を折
り返してくれず、横スクロールバーが出てしまうのでいやです。
スタイルシートを使うのも手ですが、white-spaceのpreはIEではまだ実装さ
れていないです。
TABをスペースに変換してやるのも手ですが、その画面をコピペすると当然、
TABがスペースの集合になっちゃうので、これもいやです。TABはTABとして
扱いたいんです。
TEXTAREAフォームをリードオンリーにして、そこに表示させる手も考えまし
たが、これもブラウザのサイズに応じてフォームサイズが可変しないのでい
やです。

一晩考え試行錯誤しましたがわかりませんでした。
そんなわけで、なんかいい方法分かる人いませんか?


573 名前: 566 投稿日: 01/12/21 00:45 ID:EKDxZzzU
>>568 >>570
いい加減な解説はいくらでもありうるってことやね。
CSS勧告ぐらい見りゃいいのになあ。


574 名前: Name_Not_Found 投稿日: 01/12/21 01:06 ID:2vsUr6z7
>>572
pre {
width: *%;
overflow: auto;
}
タブをタブとして扱うならpreを使うしかない。
コピペされることを考慮してるってことはソース関係じゃないの?


575 名前: 541 投稿日: 01/12/21 01:10 ID:GWZ4h/8q
541です。あれから色々調べてみました。
結局のところ、tableやdivで現状では使えるalign="center"に相当する機能は、
CSSでは場当たり的な方法でないと実装できないということみたいですね。
tableで場当たり的デザインをするのに飽きたので、CSSを勉強しようと思ったのですが、
いきなり壁にぶつかってしまって困っています。
CSSからしてみれば、Webページは左寄せにしろ、中央寄せにはするな、という事なんでしょうか。
んー、難しい。もうちょっと勉強してみます。


576 名前: Name_Not_Found 投稿日: 01/12/21 01:41 ID:OiwZ/Pkz
>>575 はい。せめて、もう少しでいいから、勉強してください。


577 名前: 572 投稿日: 01/12/21 02:07 ID:12hmk5xr
>>574
さっそくありがとうございます。
ソース関係の表示ですが、解説本のように、説明もついてるし、
ソースもついているようなものの表示に使いたいのです。

pre {
width: *%;
overflow: auto;
}

を試してみましたが、残念ながらうちのIE5.5では、
望んでいるようには表示されませんでした。
でもありがと。


578 名前: Name_Not_Found 投稿日: 01/12/21 02:41 ID:mocg4zHR
>577
まさか、
width: *%;
↑このまま記述したんじゃないよね?


579 名前: 572 投稿日: 01/12/21 02:56 ID:12hmk5xr
>>578

width: 100%;
width: 200pt;

などとも指定してみましたが、なにか?


580 名前: Name_Not_Found 投稿日: 01/12/21 03:22 ID:mocg4zHR
>579
急に態度変わるなぁ。

今、試したけどムリっぽいね。
PRE要素をインラインにしてタブだけを囲ってみたけど
これでもブラウザサイズに対しての改行はムリだった。
(囲ってないとこの改行ね)


581 名前: 574 投稿日: 01/12/21 03:32 ID:2vsUr6z7
>>577
PREだと溢れる分はどうしようもない。
ページに横バーが出ないだけマシだと思って。

TEXTAREAを使うのなら、
textarea {
width: *%;
}
これでサイズは可変になるよ。あんまりお勧めしないけど。


582 名前: 572 投稿日: 01/12/21 03:57 ID:12hmk5xr
>>581
なかなか良い方法だと思いましたが、なんというかこー、
いまいち割り切れないものが残りますね。
でも一つ勉強になりました。ありがと。
やっぱIEだと無理なのかな。


583 名前: Name_Not_Found 投稿日: 01/12/21 06:10 ID:HQSg6JU5
>>575-576
実際、みなさんはセンタリングをどうやってますか?
私は
.center {
margin-left:auto;
margin-right:auto;/*NN6,Opera,MacIE・WinIE6標準準拠モード向け*/
text-align:center;/*NN4,WinIE5.5,MacIE・WinIE6互換モード向け*/
}
です。但しこれだとtext-align:centerの所為でブロックだけでなく
中の文字も中央寄せになりますが、まだまだ多数を占めるWinIE5.5以下の
閲覧者のためには仕方が無い。
あと、NN6/Mozilla独自拡張のtext-align:-moz-centerもありますが、
text-align:centerとmargin:0 auto;を共に指定してる以上無意味ですし。


584 名前: Name_Not_Found 投稿日: 01/12/21 06:23 ID:9h0cQWcO
場合によるけど、こういうのならやったことある。

body{
text-align: center;
}

div{
width: *px;
margin-right: auto;
margin-left: auto;
text-align: left;
}


585 名前: 名無さん 投稿日: 01/12/21 11:01 ID:p7+qCQXx
こういうときどうしたらいいんでしょう。

/* in basic.css */
body{
background-color: #7cc; /* A */
color: #000;
}


/* in article.css */
div.navigator{
background-color: #fff;
color: #7cc; /* B */
}

A と B の値を同期させたいんですけど、
いちいち両方書換えるしか方法ないんでしょうか。
変数使いたい....


586 名前: 投稿日: 01/12/21 12:02 ID:SC2hcv2a
>583
で .center p{text-align: left;} とかやる.


587 名前: Name_Not_Found 投稿日: 01/12/21 12:40 ID:BABLTxX0
>>585
今ちょっと眠いから見当違いのこと言うかもしれないが我慢しれ。

色の管理が面倒だということなら、
レイアウト用のシートと配色用のシートに分けれ。
あとは置換でイパーツだ。


588 名前: Name_Not_Found 投稿日: 01/12/21 16:48 ID:8rZ2W/DF
例のヤツで初めて自分のCSSファイルチェックしたら
指定された背景色(background-color)に対応する前面色(color)が指定されていません : BODY
と出ました。もっと下の階層(要素)に指定してあれば問題なさそうなのにわざわざbodyにもcolor
を指定するのはなんででしょう?厨房な質問でスマそ


589 名前: Name_Not_Found 投稿日: 01/12/21 17:48 ID:OiwZ/Pkz
>>588
スタイルシートが、
body {background: black;}
p {color: white; background: transparent;}
だとすると、
<h1>ごるぁ</h1> とか <pre>藁</pre>の色が不定になるからだと思われ。
なんてったって、カスケーディングですので。


590 名前: ◆HTMLQ/Ac 投稿日: 01/12/22 01:57 ID:rgyuqKsi
>>572
>IEでタブコード
ここにタブを書いてみます「 」←ここにタブがあります
&#9;ね。文字参照。これじゃタブにならないの?


591 名前: 572 投稿日: 01/12/22 02:33 ID:siWo8/Zg
>>590
IEだと だとタブは表示されないよ>>590
$a = 0;
$b = 0;


592 名前: 590 投稿日: 01/12/22 03:37 ID:rgyuqKsi
>>591
WinIEは対応してないのか? MacIE5ではきちんとタブになるんだけど…。
WinIEだとどんな表示になるの? そのまま&#9;って見えるのか?


593 名前: 572 投稿日: 01/12/22 04:02 ID:siWo8/Zg
>>592
だと、WinIEでは無いものとみなされるようです。
スペースにもならない。
バージョンよって振る舞いは違うかもしれないですが。


594 名前: 590 投稿日: 01/12/22 04:21 ID:rgyuqKsi
>>593
ふーんそうなのか。
役に立てずスマソ。


595 名前: 572 投稿日: 01/12/22 04:55 ID:siWo8/Zg
いえいえ、親切にありがと>>594


596 名前: Name_Not_Found 投稿日: 01/12/22 23:46 ID:XV35yJWA
すみませんが、CSSのbehaviorについて
詳しく説明されてるサイトって無いでしょうか?

検索したんですが関係ないものばっかり出てきてしまって・・・。


597 名前: Name_Not_Found 投稿日: 01/12/23 01:25 ID:xZpNVasW
>>596
「ビヘイビア」で検索


598 名前: 596 投稿日: 01/12/23 02:31 ID:ay9/d/Qe
>597
ありがd。
そか、英字じゃダメか。チクショー(わ


599 名前: 596 投稿日: 01/12/23 03:42 ID:ay9/d/Qe
DHTML BehaviorってCSSのと同じ使い方なんですか?
何度もすみません。


600 名前: Name_Not_Found 投稿日: 01/12/23 12:32 ID:/pI8RM5F
600

しつもんです。
CSSの「width」の働き方は、IE5とIE6で違うんですか?


601 名前: Name_Not_Found 投稿日: 01/12/23 12:33 ID:/pI8RM5F
age


602 名前: Name_Not_Found 投稿日: 01/12/23 13:07 ID:gJjN9L+l
>>600

ここの「ボックスのサイズの指定方法の違い」を参照。

http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp


603 名前: Name_Not_Found 投稿日: 01/12/23 15:20 ID:/pI8RM5F
>>602
ありがとうございました。
どっちに合わせたらいいんだろ。
うーん…。


604 名前: Name_Not_Found 投稿日: 01/12/23 15:46 ID:5OL1AFSk
>>603
お勧めはXHTML(XML宣言あり)

-moz-box-sizing: border-box;


605 名前: Name_Not_Found 投稿日: 01/12/23 19:12 ID:6LfysPKG
macIEはどーでもいいのか・・・
box-sizng:border-box


606 名前: Name_Not_Found 投稿日: 01/12/23 22:14 ID:hqBuU+O+
box-sizing:border-box;
ってIE6標準モードでは効くんだっけ?


607 名前: ◆/PTR4B.. 投稿日: 01/12/23 22:55 ID:t1s/l1Se
>>606
効きません。
モードによって自動的にbox-sizingは切り替えられますが、
box-sizingプロパティ自体には未対応です>IE6


608 名前: Name_Not_Found 投稿日: 01/12/23 23:30 ID:hqBuU+O+
とすると、
-moz-box-sizing: border-box;
box-sizing: border-box;
を書いておいてもIE6標準モードでだけ意図しない表示になっちゃうのか…
ううむ


609 名前: 名無さん 投稿日: 01/12/24 03:15 ID:LuIsbl3y
hr を幅 40% にして左寄せしたいんですが上手くいきません。

<div class="note">
<hr />
<ul>
<li>hogehoge</li>
<li>hagehage</li>
</ul>
</div>

div.note hr{
width: 40%;
margin-left; 0em;
margin-right: auto;
}

Mozilla は上手くいくんだけど、 IE5.5 だとセンタリングされてしまう...


610 名前: Name_Not_Found 投稿日: 01/12/24 06:22 ID:/xZfc1lj
>>609
IE5.5ならば、text-align:left;で、どうですか。


611 名前: Name_Not_Found 投稿日: 01/12/24 06:34 ID:jQSThiRW
-moz-box-sizing: border-box;とかの使い方を
学べるサイトってどこでしょうか?


612 名前: 名無さん 投稿日: 01/12/24 06:39 ID:LuIsbl3y
>>610
おぉ、勉強になりました。


613 名前: Name_Not_Found 投稿日: 01/12/24 06:47 ID:/xZfc1lj
>>611
http://www.cc-net.or.jp/~piro/tips.lzh


614 名前: 名無さん 投稿日: 01/12/24 06:54 ID:LuIsbl3y
たて続けですみません。

li の背景色を一松模様にすることってできませんかね。

<ul>
<li>背景緑</li>
<li>背景黒</li>
<li>背景茶</li>
<li>背景緑</li>
<li>背景黒</li>
<li>背景茶</li>
...
</ul>

一個一個にclass=..つけるのは面倒です...


615 名前: Name_Not_Found 投稿日: 01/12/24 07:00 ID:/xZfc1lj
>>614
市松模様は、CSS3の実装を待って下さい。ずっと先になるかもしれないけど。
全部にclassを振らないでも、li{background:green;}とでもして、
あと二種類はクラスにして上書きすれば、少しは手間が省けます。


616 名前: Name_Not_Found 投稿日: 01/12/24 07:16 ID:9+KzmWt1
>>606-613
みんな既出です。
http://pc.2ch.net/test/read.cgi/hp/1005047493/56-62
http://pc.2ch.net/test/read.cgi/hp/1005047493/403-413
過去ログ活用しようよ。


617 名前: アホ 投稿日: 01/12/24 07:21 ID:BMIVKDjC
1.CSS=スタイルシート
2.CSS≒スタイルシート
3.CSS≠スタイルシート
どれですか?
答える気にならなければ無視して下さい。


618 名前: Name_Not_Found 投稿日: 01/12/24 07:38 ID:GjBkvwQp
つーか答えようがないんだが。
問題の意図がわかるようでわからん。


619 名前: Name_Not_Found 投稿日: 01/12/24 07:46 ID:9+KzmWt1
>>617
CSSはCascading Style Sheetです。
世の中にはJavaScript Style Sheetなんてものもあります。
が、Web制作の世界でスタイルシートと言ったら十中八九CSSのことです。
セロテープ(商標名)と言ったら類似商品を総称するみたいなもんです。


620 名前: Name_Not_Found 投稿日: 01/12/24 08:08 ID:rGmCYygo
XSL(Extensible Stylesheet Language)なんてのもある。
つまり

スタイルシート ⊃ CSS

ということです。


621 名前: 617 投稿日: 01/12/24 09:58 ID:BMIVKDjC
>>619-620
なるほど。
という事は、少なくとも「このスレでは」スタイルシート=CSS、と解釈してOKな訳ですね。
ご回答有り難う御座いました。


622 名前: Name_Not_Found 投稿日: 01/12/24 10:22 ID:pHJSygA3
CSS2仕様書邦訳がNot Foundになるよ。↓
http://www.fan.gr.jp/~kaz/rec-css2/
困るなあ。
まあこっちもあるけど。↓
http://www.y-adagio.com/public/standards/tr_css2/


623 名前: Name_Not_Found 投稿日: 01/12/24 11:03 ID:rGmCYygo
>>622
Googleのキャッシュやウェイバックマシーンを活用しる!!


624 名前: Name_Not_Found 投稿日: 01/12/24 18:07 ID:dMbOu4W3
CSSにCSSを読み込む方法ってNN6だと対応されてるんでしょうか?


625 名前: Name_Not_Found 投稿日: 01/12/24 18:15 ID:5NqLf42N
>>624
@importのこと? 勿論、大丈夫。
NN6は最もCSS対応の進んだブラウザですよ。
cf.http://hp.vector.co.jp/authors/VA022006/css/media.html#at-import-rule


626 名前: 624 投稿日: 01/12/24 18:18 ID:JpmS21mf
>>625
素早い解答、ありがとうございます。
自分で確認しようにも私のPC、何故かNN6が上手くインストールできないのでちょっと不安だったんです。


627 名前: 611 投稿日: 01/12/24 18:39 ID:lvxHXREn
亀レス、スマソ。

>611
ありがとうございます。今から熟読します。

>616
すみません。次からは検索かけてから質問します。


628 名前: Name_Not_Found 投稿日: 01/12/24 19:13 ID:oHWhLyYx
テーブルとCSSのレイアウト論争みたいなスレッドないですか?


629 名前: Name_Not_Found 投稿日: 01/12/24 21:15 ID:uE321HdG
>>628
枯れた議論ではあるけど、やりたいなら

Strict-HTML スレッド 2.0 (W2C Recommendation)
http://pc.2ch.net/test/read.cgi/hp/1008380243/l50

がいいと思うよ。


630 名前: Name_Not_Found 投稿日: 01/12/24 22:59 ID:oHWhLyYx
>>629
ありがとうございます。
確かに枯れてる…。


631 名前: Name_Not_Found 投稿日: 01/12/25 08:35 ID:jGID/wOv
floatの効果がよく分からない(T-T)
上で出てる段組の解説サイトってもうかなり分かってる人を前提に話してるんだもん


632 名前: 566 投稿日: 01/12/25 08:38 ID:lD7RAman
>>631
<img align="left"
とか使ったことない?


633 名前: Name_Not_Found 投稿日: 01/12/25 08:44 ID:gIxFKm6m
>>631
他に解説サイトを検索で探したら?
http://www.sugai.f2s.com/web/CSS/display.html#float


634 名前: Name_Not_Found 投稿日: 01/12/25 08:55 ID:5FQxcxFz
>>631
Academic HTMLを通して讀み給へ。
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocs04.htm
http://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs3-12.htm


635 名前: 631 投稿日: 01/12/25 09:00 ID:jGID/wOv
、ありがとう! (^^
上のサイト解読するには実力不足だから>>634のひとに教えてもらったトコで
勉強しなおしてきます、どもすいません


636 名前: Name_Not_Found 投稿日: 01/12/25 13:50 ID:rraEVf14
いまだにフォント指定の仕方がよくわかりません。
本文全部のフォントカラーなどを指定するのはどうすれば良いのでしょう?
リンクだったら
A:link{color:7B68EE;}
って書けばいいのはわかるんだけど。
本文内の一文(タイトルとか)を指定する方法はわかるんだけど。
超基礎であろうフォント指定がいまだわからないのです…。
どなたか教えて下さいm(__)m
フォント名はDHP平成明朝体W3で、フォントサイズは小
(8pt?xx-small??)でのサンプル希望。


637 名前: Name_Not_Found 投稿日: 01/12/25 14:03 ID:e0KhVd5F
>>636
BODY { font-family: 'DHP平成明朝体W3'; font-size: small; }


638 名前: 636 投稿日: 01/12/25 14:10 ID:rraEVf14
>637
ありがとうございます!
普通にBODY内に書けば良かったんですね。
あまりに基本的過ぎなのか、何処を探してもサンプル
載ってなくて困ってたんです。
早速使わせて頂きます〜(礼


639 名前: 名無さん 投稿日: 01/12/25 14:43 ID:NnLGFvny
border の四辺の長さを変えることって出来ますか?

+----+
|ハンヌラ党
+-----------+

みたいな感じで。


640 名前: Name_Not_Found 投稿日: 01/12/25 14:53 ID:IErp20xb
>>639
無理。ボックスはあくまで長方形。
違う長さのボーダーが欲しければ違うボックスが用意されてないとしょうがない。


641 名前: 640 投稿日: 01/12/25 15:00 ID:IErp20xb
追記。
>>639みたいのであれば上の線はbackgroundでやると言う手もある。
border-left、border-bottomは普通に設定して、
同じ太さ、適当な長さの2色GIFを
background: url(gif) no-repeat 0 0;
で指定してやるといい。
ただ、この場合上の線のサイズpxに固定されてしまうけど。


642 名前: Name_Not_Found 投稿日: 01/12/25 15:00 ID:Fq3EH9tb
ダミーの要素を用意すればできそうだけど、そのためにダミーを入れるのもアレですな。

ただ、利用できそうな要素があるならそれを利用するのはいいだろうけど。
その「ハンヌラ党」のところにspanを指定してborder-topつければいいんでない?


643 名前: Name_Not_Found 投稿日: 01/12/25 15:05 ID:pNcgTDsy
>>639
#hannu{border-top:1px;border-bottom:1px;border-left:1px;}
#ratou{border-bottom:1px;}
<span id="hannu">ハンヌ</span><span id="ratou">ラ党</span>

とかにすればできるけど、ソースが汚くなるなぁ。


644 名前: 名無さん 投稿日: 01/12/25 15:13 ID:NnLGFvny
>>640-643
うーん、前後に hr 入れて長さ変えるとかの手段とるしかないのかなぁ..
でも意味の無い要素が出てくるのって気持ち悪いですよね...

とりあえず、一つの要素でやるのが無理だと理解出来ただけでも助かりました。

ありがとうございます。


645 名前: 名無さん 投稿日: 01/12/25 18:08 ID:NnLGFvny
<div class="header">
<h1>ほげほげ</h1>
<p class="navi"><a href="..">↑</a><a href="..">↓</a></p>
</div>

みたいなのを、

+-------------------+
|ほげほげ ↑↓|
+-------------------+

みたいにしようと思って以下のような CSS を書いたんですけど上手くいきません。
float した部分って親のブロックからはみでるんですね...

+-------------------+
| ↑↓|
+ほげほげ-----------+

こうなってしまう...


div.header {
width: 100%;
background-color: #f00;
text-align: right;
}

div.header h1 {
float: left;
}

div.header .navigator{
background-color: #0f0;
}


646 名前: Name_Not_Found 投稿日: 01/12/25 18:27 ID:QnyX7b/7
navigator -> navi と h1のmargin / padding 設定。


647 名前: 名無さん 投稿日: 01/12/25 18:35 ID:NnLGFvny
>>646
げふん、navigator -> navi はコピー時のミスです...

h1 の margin / padding を 0 にしても、
p の高さが低くてだめでした。

p の margin とか padding をいじって高さを高くすれば OK ですが、
どれぐらい高くすればいいかいまいちわかりません。
h1 のフォントサイズに依存すると思うんだけど...
うーん...


648 名前: Name_Not_Found 投稿日: 01/12/25 18:41 ID:6v2gO8tO
h1 のサイズを **em ってカンジで明示的にしておいて
それにあわせればよろしいかと。


649 名前: 名無さん 投稿日: 01/12/25 18:47 ID:NnLGFvny
>>648
うー、やっぱそれしかないんですかね...
うーーうーーうーー...
あんまり font-size はさわりたくなかった...sage


650 名前: Name_Not_Found 投稿日: 01/12/25 19:23 ID:LwAmAMyT
>>645
回り込み(float)させる要素にはwidth指定が必須です。


651 名前: 名無さん 投稿日: 01/12/25 19:37 ID:NnLGFvny
>>650
改良してみました。が、さっぱりです...
高さがぁ。
いい加減面倒になってきた...

<style>
div.header{
width: 100%;
background-color: #f00;
text-align: right;
}

div.header h1{
float: left;
width: 80%;
text-align: left;
}

div.header div.navi{
background-color: #0f0;
}
</style>

<div class="header">
<h1>ほげほげ</h1>
<p class="navi"><a href="..">↑</a><a href="..">↓</a></p>
</div>


652 名前: 名無さん 投稿日: 01/12/25 19:46 ID:NnLGFvny
あきらめました。ここだけテーブル使います。

+---------------+
|AB← →C|
+---------------+
<div class="box">
<div class="left">A</div>
<div class="left">B</div>
<div class="right">C</div>
</div>

みたいなことを簡単にできることを期待してたんですが。


653 名前: 名無さん 投稿日: 01/12/25 19:48 ID:NnLGFvny
>>652
違うな...
<div class="box">
<span class="left">A</span>
<span class="left">B</span>
<span class="right">C</span>
</div>
でした。


654 名前: Name_Not_Found 投稿日: 01/12/25 19:57 ID:LwAmAMyT
>>651
div.header div.navi{
background-color: #0f0;
}
を下記に改良すべし。
div.header p.navi{
background-color: #0f0;
float:right; width:10%;
}
float:leftでもよい。ブロック要素を改行分下げずに回り込ませるには必要。


655 名前: 名無さん 投稿日: 01/12/25 20:04 ID:NnLGFvny
もうちょっと頑張ってみます。

>>654
上手く左右に分配されました。
でも div.header 自身が死んでます。
中の要素が全て float だと、空だってことになっちゃうんでしょうか。


656 名前: Name_Not_Found 投稿日: 01/12/25 20:11 ID:LwAmAMyT
>>655
使ってるブラウザは?
WinIEならdiv.headerの背景色がh1やdiv.naviも包含してくれる。
(CSSの仕様からすれば正しくないが)
NN6ならdiv.header{position:relative}を追加すれば同様に。
(正しいのかどうかわからない)

floatでなくてposition:absoluteを使った段組の応用でもいい。


657 名前: 名無さん 投稿日: 01/12/25 20:18 ID:NnLGFvny
>>656
NN6系です。
position: relative; を入れたらうまくいきました。
ほんとにほんとにほんとーーーに感謝してます。
あなたは神です。


658 名前: Name_Not_Found 投稿日: 01/12/25 20:23 ID:LwAmAMyT
>>656
一応、参考まで。
ttp://sigekazu.vis.ne.jp/file/dir34/column.html
ttp://sigekazu.vis.ne.jp/cgi/bbs/sylpheed.cgi?c=r&n=321
http://pc.2ch.net/test/read.cgi/hp/991666454/273-274


659 名前: 名無さん 投稿日: 01/12/25 20:34 ID:NnLGFvny
>>658
読みました。なんかテーブルに流れそうです...
頭痛い...


660 名前: Name_Not_Found 投稿日: 01/12/25 21:25 ID:L8onXVrT
>>651
別解を以下に。
.header{
width: 100%;
background-color: #f00;
position:relative;
}

.header h1{
position: absolute;
width: 80%;
text-align: left;
}

.header .navi{
margin-left:82%;
width:15%;
background-color: #0f0;
text-align: right;
}


661 名前: Name_Not_Found 投稿日: 01/12/25 21:40 ID:L8onXVrT
>>651
改良版。これでも同じことになるはず。
.header{
width: 100%;
background-color: #f00;
position:relative;left:0;top:0;
height:2em;
}

.header h1{
position: absolute;left:0;top:0;
width: 80%;
padding:0;margin:0;
}

.header .navi{
position:relative;
left:82%;
width:17%;
background-color: #0f0;
text-align: right;
}


662 名前: Name_Not_Found 投稿日: 01/12/25 22:09 ID:L8onXVrT
>>651
これが一番簡単かも。
.header{ background-color: #f00; }
.header h1{ display:inline;}
.header .navi{
display:inline;
background-color: #0f0;
}
naviの右寄せはh1にmarginでも設定するか。


663 名前: Name_Not_Found 投稿日: 01/12/25 23:54 ID:+epy9qd6
こんなことを聞いてはいけないのかもしれないのですが、
ttp://homepage1.nifty.com/fujitay1/index.html
このトップページのCSSがオンの時のInformation、Othersの部分の
CSSがどうなっているのか分かりません。
分かる方がおられましたらよろしくお願いします。


664 名前: Name_Not_Found 投稿日: 01/12/26 00:03 ID:OcdR7+ah
>>663
>CSSがオンの時のInformation、Othersの部分の
訊ねたいのが背景色なのかborderなのかa:hoverなのかワカラン。

>CSSがどうなっているのか分かりません
ソース見て、外部cssファイルをダウンロードすべし。


665 名前: Name_Not_Found 投稿日: 01/12/26 00:04 ID:gltEWVrv
>>663

h2.menu-title2{
font-family: "Verdana","Helvetica",sans-serif;
font-size: 1.0em;
font-weight: bold;
text-align: center;
line-height: 1.4em;
padding-left: 0.0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
margin-left: 0.5em;
margin-right: 0.5em;
background-color: #ffd000;
}


666 名前: 663 投稿日: 01/12/26 00:12 ID:4QYjdzJY
レスありがとうございました。
それと、質問の仕方が悪くて大変ご迷惑をおかけしました。
申し訳ありません。

>>664さん
伺いたいのは、上記の部分の位置に関してです。
テーブルを使わないで、どうやってInformationとOthersを表示しているのかが分からないのです。
クラスはおそらく、"menublock"の部分だと思います。
外部CSSはたくさんあるようで、自分がダウンできた3つ(top_ie4.css、base.css、fugure.css)
には該当の所がなかったのです。

>>665さん
本当にありがとうございました。


667 名前: 665 投稿日: 01/12/26 00:25 ID:gltEWVrv
これか?top.cssより。

div.menublock{
width: 49.99%;
float: left;
}


668 名前: 663 投稿日: 01/12/26 00:29 ID:4QYjdzJY
>>665さん
ありがとうございます。おそらくそれだと思います。
さらに伺ってしまいますが、
どうやったらそのCSS(top.css)を出すことができるのですか?
自分はスクリプトの自動振り分けが理解できなかったので、
iCabのCSS表示機能を使いました。


669 名前: 665 投稿日: 01/12/26 00:39 ID:gltEWVrv
よくわからんけど、キャッシュを漁ったらみつかった。

なんか、ブラウザ判別スクリプトと、その結果によって
違うcssを食わせるスクリプトを併用してるようだけど、
IE6じゃ段組にならなかった・・・(あとでIE5で見て気がつく)


670 名前: 663 投稿日: 01/12/26 01:45 ID:9bC7K7hm
>>665さん
ありがとうございました。レス遅くなってすみません。


671 名前: Name_Not_Found 投稿日: 01/12/27 01:14 ID:pBmt71Zl
クラス定義するときって、要素名入れてる?

p.section{...}

.section{...}

どっちがいいんだろう。


672 名前: Name_Not_Found 投稿日: 01/12/27 01:29 ID:nxWRtQ/L
タグごとに使い分けたいのなら入れる。
使いまわししたいのなら入れない。


673 名前: Name_Not_Found 投稿日: 01/12/27 02:44 ID:Vdwziy9J
>>671
便乗質問ですが、要素名入れたほうが、例えば参照が速くなるとか、
そういうあたりのメリットはありますか?


674 名前: Name_Not_Found 投稿日: 01/12/27 02:51 ID:o9NlLyiw
あの、ジオシティーズとかにメモ帳で書いたcssをアップするにわどうしたらいいんでしょうか?超初心者なのですがよかったらおしえてほしいです


675 名前: Name_Not_Found 投稿日: 01/12/27 03:25 ID:pBmt71Zl
<ul>
<li>りんご</li>
<li>ごりら</li>
<li>らっぱ</li>
</ul>

みたいなのを、

りんご+ごりら+らっぱ

みたいに表示したいんですが、これは CSS レベルで対処可能でしょうか。


676 名前: Name_Not_Found 投稿日: 01/12/27 03:26 ID:xRvZhi8L
>>674
普通にFTPとか
ファイルマネージャのEZファイルアップロードツールとかで
転送できます。


677 名前: Name_Not_Found 投稿日: 01/12/27 03:53 ID:W0m/afWw
>>675
li { display: inline; }

でどう?


678 名前: 674 投稿日: 01/12/27 03:55 ID:o9NlLyiw
できました!んでですね、text-decoration:none;てしたんですけど、下線が消えないんですけど、なんででしょうか?


679 名前: Name_Not_Found 投稿日: 01/12/27 03:56 ID:kRIlJ3OF
>>675
li { display: inline; }
li:before { content: "+"; }
li:first-child:before { content: ""; }


680 名前: 675 投稿日: 01/12/27 05:52 ID:Cl1PhqiF
>>679
ありがとうです。

+の代わりに画像表示したくなった場合って
どうしたらいいんでしょう。


681 名前: Name_Not_Found 投稿日: 01/12/27 06:02 ID:kRIlJ3OF
li:before { content: url(image.gif); }


682 名前: Name_Not_Found 投稿日: 01/12/27 13:39 ID:VQkKM7x7
内容生成プロパティー(content:)や、擬似要素の:beforeや:after等は、
まだMozilla/NN6位しか対応してなくてWinIEが実装してないので、
指定しても絵に描いた餅にしかなりませんよ。


683 名前: CSS初心者 投稿日: 01/12/27 15:18 ID:1TX8c+YH
CSSの主旨に著しく反するかもしれないのですが、
任意の画像をある位置を基点に相対位置で表示したい場合には
どうしたらいいのでしょうか?

ある位置というのが、閲覧環境によって絶対座標が
変ってしまうような場合で、この文字の右に画像を
表示したい、などという場合です。

最初からレイアウトに画像を組み込んでおけばいいのですが、
画像は状況に応じて適宜表示したいので、CSS使ってるです。


684 名前: Name_Not_Found 投稿日: 01/12/27 16:06 ID:pznN81eZ
>>682
今更何を言い出すやら。


685 名前: Name_Not_Found 投稿日: 01/12/27 17:14 ID:+UO3S5vK
初心者質問板からここに誘われてきました。

ガイシュツだったらすみません。
背景画像で、左側と、上側、下側に画像を挿入して
フレームで囲ったようなページを作りたいのですが、
例示:
http://home4.highway.ne.jp/radicon/
 の、"Plain"のスタイルのような感じです。

background のrepeatを使用すると、xかyかどちらかしか出来ません。
三つとも表示させるにはどのようにしたらよいのでしょうか?


686 名前: Name_Not_Found 投稿日: 01/12/27 17:23 ID:K40r6YT+
>>685

画像は左上と左下のカーブの部分にしかないみたいよ。


687 名前: 685 投稿日: 01/12/27 17:27 ID:pelXi0hX
>>686
となると、あれはどうやってあるんですかねぇ?

結果的にああいう感じになれば良いのですが・・・


688 名前: Name_Not_Found 投稿日: 01/12/27 17:38 ID:K40r6YT+
関係ありそうなのはこのへんか?

body{
font-family:"MS Pゴシック","Osaka",sans-serif;
background:#eeeeee;
color:#555555;
margin:0;
padding:0;
}


左上のカーブ

#bodyfake{
margin:40px 0 30px 15%;
padding:2em 1em 0 0;
background:white url("../Theme/plain/corner_t.png") no-repeat;
height:expression('1px');
}


左下のカーブ
address{
font-family:"Arial";
text-align:right;
background:url("../Theme/plain/corner_b.png") bottom left no-repeat;
padding:100px 0 1em 0;
clear:both;
}


689 名前: 685 投稿日: 01/12/27 17:47 ID:pelXi0hX
>>688
あ、スタイルシートの場所はJSからのファイルから行けるんですね。
すみません、ありがとうございます。
なんとか検討してみます。


690 名前: 質問です 投稿日: 01/12/28 06:55 ID:hCFFqN55
td { text-align: center; margin-right: auto; margin-left: auto}
これを追加したら、NN4.7では<center>タグを無視してテーブルが
全部左に寄ってしまうのはなぜなのでしょう?
テーブル内ではセンタリングされているのですが。


691 名前: Name_Not_Found 投稿日: 01/12/28 06:59 ID:We+CgplL
>>690
中味でなくテーブル全体を中央揃にしたいんでしょ?
セレクターをtdでなくてtableにしてみよう。


692 名前: Name_Not_Found 投稿日: 01/12/28 07:01 ID:hFbk9fNB
autoは6からじゃなかたけ?


693 名前: Name_Not_Found 投稿日: 01/12/28 11:27 ID:Y8nJl6YV
>>690
どこのtdに指定していてそれがどこのcenterと関係してるのか知りたいが、
tableをセンタリングさせたいならtdに指定しても無駄だぞ。
て言うかtdのmarginは基本的に無意味なんだが。
……え、centerタグ?
取り敢えず、そのtableとcenterのHTMLとCSSソースをコピペしてくれ。
何か無茶やってる気がする。


694 名前: 推理 投稿日: 01/12/28 14:33 ID:okUDPh9V
NN4じゃautoが効かないから<center>使ってテーブルをセンタリングした。
各セル内部もセンタリングしたいからと align:center で指定してみたら
NN4ではテーブルがセンタリングされなくなった…。

NN4ならそんなもんなんじゃないのかなあ。
<table align=center>とかどう。NN4だけのためにそこまでやる必要があるかどうかだけど。


695 名前: Name_Not_Found 投稿日: 01/12/28 17:07 ID:Z0ec9/Oq
スタイルシートをHEADに書いて
BODYの一カ所だけに適用したいときに
何か目印つけますよね?
あれって、なんでしたっけ?


696 名前: Name_Not_Found 投稿日: 01/12/28 17:14 ID:NT6kM+71
>>695

idのこと?


697 名前: Name_Not_Found 投稿日: 01/12/28 17:17 ID:Z0ec9/Oq
>>696
そう!それです!

<!--
filter:alpha(opacity=80) }
-->

↑これを1つのテーブルだけに適用したいのですが
どうこにidをつければいいんでしたっけ?


698 名前: Name_Not_Found 投稿日: 01/12/28 17:22 ID:Z0ec9/Oq
まちがえた
これです
table {
  filter:alpha(opacity=88);
}


699 名前: Name_Not_Found 投稿日: 01/12/28 17:25 ID:ZvE7fSpN
基礎から勉強するよろし。

table#abc {
  filter:alpha(opacity=88);
}



<table id="abc">

もっともこの場合classのほうがいいかもしれん


700 名前: Name_Not_Found 投稿日: 01/12/28 17:35 ID:Z0ec9/Oq
>>699
ありがとうございます!!
休み中に基礎から勉強したいと思います


701 名前: Name_Not_Found 投稿日: 01/12/28 20:22 ID:Y8nJl6YV
>>694
だから、そもそもtdに指定しているのが間違いなの。
marginを指定するならtableに、
text-alignを指定するならtableの親要素に。


702 名前: 694 投稿日: 01/12/28 21:06 ID:XxRFrSQm
だってさ。
>>690


703 名前: Name_Not_Found 投稿日: 01/12/28 21:51 ID:BAxuxiuC
CLASS名って日本語でも可ってどっかにあったんですけど、
実際のところどうなんすか?
何か不具合とかあります?


704 名前: ネオ ◆/PTR4B.. 投稿日: 01/12/28 22:46 ID:c6+npU8H
>>703
既出かもしれませんが、一応。
HTML 2.xのclass属性はSGML NAME tokenなので、日本語は使えません。
HTML 4.0/4.01のclass属性はcdata-listなので、日本語も使えます。
XHTML 1.0のclass属性も同上。
XHTML 1.1/XHTML Basicのclass属性はNMTOKENSなので、日本語は使えません。
#Modularization of XHTMLで、class属性の定義が変更された為(CDATA→NMTOKENS)。
http://www.kanzaki.com/docs/html/xmodules.html#s_cmnatts
参照。

但し、CSSで使えるのは基本的にASCII文字だけなので、
実際にCSSで日本語を使うには、\(U+005C)でエスケープしてやる必要があります。
p.\65E5 \672C \8A9E { color: red } /* 「日本語」をエスケープした例 */
対応しているUser-Agentについては
http://sigekazu.vis.ne.jp/char/sjis/charset.htm
参照。

【結論】
HTML 4.0/4.01 or XHTML 1.0を宣言した文書に於いて、スタイルシート側でエスケープをすれば
使えますが、よっぽどのことが無い限り、止めておいた方が賢明かと存じます。


705 名前: Name_Not_Found 投稿日: 01/12/28 22:57 ID:BAxuxiuC
>>704
ありがたく存じます。

やめておくことにします。


706 名前: Name_Not_Found 投稿日: 01/12/28 23:01 ID:Y8nJl6YV
>>704
XMLのNMTOKENSは日本語使えるぞ。
それから、@charset構文で日本語コードも使えるので、
セレクタ中の日本語も問題無し。仕様書的には。
ただし、誰もやらないので不具合はほとんど報告されていない。
最新のMozillaやIEは問題無いと思うけど。


707 名前: ネオ ◆/PTR4B.. 投稿日: 01/12/29 00:01 ID:zza4hcwA
>>706
そうでした……。
適当なこと書いて申し訳ありませんでした>>705
味噌汁で顔洗って、修行し直して参ります……。


708 名前: Name_Not_Found 投稿日: 01/12/29 00:05 ID:b9r4SM34
td { text-align: center; margin-right: auto; margin-left: auto}
について質問させてもらったものです。皆さんありがとうございます。

もともとCSSは使わず<body>全体を<center>タグのみで中央揃えに
していたのです。ところがCSSを突っ込んだ途端、NNで中央に行かなく
なった・・・という訳です。テーブルも、セル内部も全て中央揃えにしたいのですが
<table align=center>ではうまくいきませんでした。CSSを使わず
各tdにいちいち位置指定してやれば両方でうまくいくのですが。
うう、くじけそうです。


709 名前: 教えて君 投稿日: 01/12/29 01:04 ID:2Cz9+zJO
>>706
>>707
どちらにせよ、やめとくのが無難ということで。

で、ついでにもう一つ質問があります。
textareaにVerdanaとかのフォント指定をすると、
Macで文字化けするって聞いたことがあるんですけども。

検索してもよくわかんなかったんで。


710 名前: Name_Not_Found 投稿日: 01/12/29 09:11 ID:WcSHEcHN
>>708
table自体の中央寄せはtableへの横marginをauto、
tableの親要素にtext-alignをcenter。
セル内の中央寄せはtdにtext-alignをcenter。

http://www.asahi-net.or.jp/~xk3t-cb/css/CSSBugsJ.html#NN4

……何で頑なにソースを見せない?


711 名前: Name_Not_Found 投稿日: 01/12/30 01:49 ID:AH2goiXP
>>710
すいません、忘れてました。
ソースはこんなカンジです。
とりあえずIE・NNとも中央にきましたが、
NNのほうはセルの中身が左寄せになってます。

<html>
<head>

<style type="text/css">
<!--
table { text-align: center; margin-right: auto; margin-left: auto}
-->
</style>
</head>

<body>
<center>

<table width="300">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td><img src="img1.gif"></td>
<td><img src="img2.gif"></td>
</tr>
<tr>
<td width="150"><b>テキスト1</b></td>
<td width="150"><b>テキスト2</b></td>
</tr>
</table>
</center>
</body>
</html>

ここへあらたに
td { text-align: center; margin-right: auto; margin-left: auto}
を追加すると、NNだと全体が左に寄ってしまいます。
やっぱり無理にCSS使わないほうがよいでしょうか?


712 名前: MOULIN ◆ROUGEr/U 投稿日: 01/12/30 02:04 ID:AC6qUqu1
>>709
MAC IEのどのバージョンか忘れましたが、
font-familyの先頭にVerdanaなどの英語フォントを指定すると、
フォームの入力を促す要素関連で文字化けした、と記憶しています。

フォント指定の順番で、何より最初にMACにある日本語フォント
例えばOsakaなどを入れてやると文字化けは回避できるはずです。


713 名前: Name_Not_Found 投稿日: 01/12/30 09:24 ID:GlqD8Bx3
>>711
だから何でtdにマージンを…。


714 名前: Name_Not_Found 投稿日: 01/12/30 12:02 ID:/BWZJas+
>713
....


715 名前: 投稿日: 01/12/30 12:46 ID:AyyiTV09
>711
そりゃどうも N4 のバグっぽいなあ,と思った.以下全て,
td{text-align: center;} を入れるとテーブル全体が左によってしまう.
<div align="center">
<div style="text-align: center;">
<table align="center">

何か間違っている気がしないでもないが,とりあえず,CSS は使わないってことで.

>713
試してみたけどそこは本質じゃない.


716 名前: Name_Not_Found 投稿日: 01/12/30 13:28 ID:t6m5TEsc
すいませそ。
ガソバッタんですが解決出来なかったので質問します。

TDにIEおまけのfilter:Alphaをかけてスケさせました。
でもTD内に含まれるIMGはスケさせたくないのです。
このスケ解除の方法はあるんでしょうか?

TD{filter:alpha(style=0,opacity=80,)}

試しにIMGに
opacity=100
とやってみましたがTDの80を基準にしたみたいでスケでした。(逝

さらにIMGに
style=1,
opacity=100,
finishopacity=100,
startx=0,
starty=0,
finishx=0,
finishy=0,
とかやって「無かった事に」しようとしたんですがヤパーリスケでした。(逝

どうか助けて下さい。


717 名前: Name_Not_Found 投稿日: 01/12/30 16:13 ID:aissWtfa
背景画像のリピートなんですが、
部分的にリピートさせるってことは出来ますでしょうか。

□□□▽▽▽▽
□□□▽▽▽
□□□▽▽
□□□▽

リサイズすると、

□□□□□□▽▽▽▽
□□□□□□▽▽▽
□□□□□□▽▽
□□□□□□▽

のように、□の部分だけ増えるみたいな。


718 名前: Name_Not_Found 投稿日: 01/12/30 16:43 ID:oVA1Qiu4
>>717
たぶんムリ。
どうしてもってことならば、□と▽とでボックスを分けて
それをbody全面に絶対配置しz-indexも指定するとか、かな。


719 名前: Name_Not_Found 投稿日: 01/12/30 18:18 ID:aissWtfa
印刷用のスタイルシートを書くときってどうしてます?

私の場合、ナビゲーション部分は印刷時はいらんだろうってことで、

<div class="navigation">
<a href="prev.html">戻る</a>
</div>

で、

.navigation { display: none; }

ってしてます。

他にこうしたらいいぞーみたいなのってありますか?


720 名前: Name_Not_Found 投稿日: 01/12/30 19:09 ID:cmEHX0Ig
>>719
font-size:10pt;
ウェブと違って印刷では文字サイズ固定で弊害が無いから。
それからバックグラウンドが暗い色で白抜き文字なんかの場合、
インク代が無駄だから*{background:white none; color:black}にする。
あと無料スペースでは広告部分にIDを振って、#adv{display:none;}。


721 名前: Name_Not_Found 投稿日: 01/12/30 19:49 ID:jkA7TVA7
で、印刷すんの?きみら


722 名前: Name_Not_Found 投稿日: 01/12/30 19:59 ID:aissWtfa
>>721
しないんすか?
やったら文章多いとこって結構印刷しますが...


723 名前: Name_Not_Found 投稿日: 01/12/30 20:39 ID:oNIMJ3D8
>>721
技術情報系は印刷するねぇ。


724 名前: Name_Not_Found 投稿日: 01/12/30 22:35 ID:XxGcZioI
すみません、旧スレに書いてしまいました。

カーソルをCSSで、<body>等のところはcrosshairで、
<A>の上だけはe-resizeになるように設定しています。
そこでユーザーサイドクリッカブルマップを使っているのですが、
その上のクリックできる部分でもカーソルを変えたいと思い、
<area 〜(省略)〜 style="cursor:e-resize;">としたのですが、
カーソルは変わらずcrosshairのままです。
念のためと思い、<map>にも同じ指定をしたのですが変わりません。
カーソルがデフォルトのままなら、普通に手の形になるのに…。
すみませんどなたかアドバイスをいただけませんか?
試したブラウザはIE5.5とNN6.2とNN4.73とOpera6.0です。


725 名前: Name_Not_Found 投稿日: 01/12/30 23:12 ID:809ZojnI
>>724
見たよ。前スレの流れからして絶対ネタだと思った。質問自体も。
「カーソル変えるなゴルァ(゚Д゚)」
って答えが返ってくる前に逃げたほうが良いかと。


726 名前: Name_Not_Found 投稿日: 01/12/30 23:14 ID:ss1AoSKI
>724
カーソル変えるなゴルァ(゚Д゚)


727 名前: Name_Not_Found 投稿日: 01/12/30 23:34 ID:809ZojnI
ほら言わんこっちゃない。


728 名前: Name_Not_Found 投稿日: 01/12/31 00:03 ID:bSHRNUIf
>>724 こちらへの登録をお勧めします。

CSS/DHTMLバグ辞典スレッド ver2.0
http://pc.2ch.net/test/read.cgi/hp/991666454/l50


729 名前: 724 投稿日: 01/12/31 00:40 ID:y/BQKu+O
>>725
済みませんでした…。

>>728
わかりました。
どうもありがとうございます。


730 名前: Name_Not_Found 投稿日: 01/12/31 02:05 ID:wI2oT13K
Alpha解除は出来なそうなんでしょうか・・・。


731 名前: Name_Not_Found 投稿日: 01/12/31 02:46 ID:4WaCvgpO
>>730
ブラウザの実装から考えると、それはちょっと辛いのではないかと思います。
思うだけなのでsage。


732 名前: Name_Not_Found 投稿日: 01/12/31 03:07 ID:wI2oT13K
>>731
思うだけでも返答して頂いてありがたいです。
だってレス0なんですもん。
やっぱり難易度高いんでしょうか。(ナキ

一応sage。


733 名前: Name_Not_Found 投稿日: 01/12/31 03:46 ID:mmNrRvwQ
>716=730=732
たった今、テストしました。
出来ましたよ。

TD { filter: alpha(〜);}
IMG {
  position: relative;
  filter: alpha(style=0,opacity=100,finishopacity=100,);
}

って感じです。
相対位置指定を書けば桶でした。絶対位置指定でも桶のようです。

では、頑張って下さい。


734 名前: Name_Not_Found 投稿日: 01/12/31 03:58 ID:mmNrRvwQ
見てくれてなかったら寂しいのでageますね(w

そうそう、ヒントは
「<DIV> <SPAN>にフィルタを設定する場合には
position属性でrelativeかabsoluteと、
width属性、height属性を設定する必要があります」って
書かれてたからです、と。


735 名前: Name_Not_Found 投稿日: 01/12/31 04:21 ID:wI2oT13K
>>734
可能だったんですね!!!!
今やってみましたが完璧桶でした!!
すごい感動です感謝の気持ちでイパーイです!!

>見てくれてなかったら寂しいのでage
>「<DIV> <SPAN>にフィルタを設定する場合には
>position属性でrelativeかabsoluteと、
>width属性、height属性を設定する必要があります」
わざわざageて頂いた上にヒントまでーー!!
ホントありがとうございました!
もっと勉強して精進します!!


736 名前: bigbrother 投稿日: 01/12/31 07:27 ID:cfG9Hyfa
  タイトル
 あいうえお
 あい
 あいう
という風に、
タイトルは中央、
下の3つは、タイトルの左に一文字前のところから表示されるには
どうすればいいですか?
文字の大きさを固定すればいけるかもしれませんが、
文字のサイズは%で設定していて、ブラウザから変えられるようにしています。
どのような文字サイズでも、下の3つは、タイトルの最初の文字の左に一つ前のところから表示させたいのです。
margin-leftや、border-style:solidなどを使って色々しましたが、出来ませんでした。

知っている方いらっしゃいましたら、教えてください。


737 名前: Name_Not_Found 投稿日: 01/12/31 09:44 ID:+sQCFvRN
>736
タイトルと下の文が同じ大きさなら
margin-left: 1em
で可能。

後は眠いから任せた・・・


738 名前: Name_Not_Found 投稿日: 01/12/31 09:44 ID:+sQCFvRN
追記 タイトルにマージンね。


739 名前: Name_Not_Found 投稿日: 01/12/31 12:13 ID:BLUbL063
>>736
タイトルや下の三つの文字列の長さは決まってる?
それから、下の三つは始点がタイトルの一文字前なのはいいけど、
終点はどこ? ウインドウの端?

タイトルの文字列の長さが決まってるなら下三つのwidthをそれより
2em大きくしてブロック要素をセンタリングさせればいい。
それで終点もタイトルの一文字後ろになる。

タイトルの文字列の長さも決まっていないなら、
そもそもセンタリングさせるべきかどうかも疑問。
下三つのよりもmarginなりtext-indentなりで1em下げる方がいい。

どこかの文字列の長さに自動的に併せるなんて芸当は
CSSには出来ないので期待しない様に。


740 名前: Name_Not_Found 投稿日: 01/12/31 17:48 ID:afQYkilf
なんか、他の要素の大きさとかぐらい参照出来たっていいのになあって思うよ...


741 名前: Name_Not_Found 投稿日: 01/12/31 18:25 ID:rcmCalZb
line-heightで行間指定した行に画像をつけると、行間が元に戻ってしまいます。

あいうえお      あいうえお 画像
         →  かきくけこ
かきくけこ

といった感じです。
なにか良い解決方法はありますでしょうか。


742 名前: Name_Not_Found 投稿日: 01/12/31 18:40 ID:yBOdiIEX
>741
おそらくテーブルの TD 要素で CSS を指定しているのでは?
文字列を
<SPAN STYLE="font-height:140%;"></SPAN>
のようにくくってみそ。


743 名前: Name_Not_Found 投稿日: 01/12/31 19:12 ID:K3/ODC6/
font-heightって・・・


744 名前: Name_Not_Found 投稿日: 01/12/31 19:16 ID:yF5qYvMU
>>741
表示確認したブラウザ名(とバージョン)も書いて下さい。
それがNN4なら有名なバグです。どうにもなりません。
http://www.zspc.com/documents/css2/text/lineheight.html


745 名前: 742 投稿日: 01/12/31 19:27 ID:zm99z9k1
>743
やっちまった!はづかしー!


746 名前: Name_Not_Found 投稿日: 01/12/31 19:37 ID:yF5qYvMU
>>740
IE5.0以降ならば、CSS関数構文(expression)で出来るのではないかな。
cf.「DHTML Dude: さらにダイナミックに」
http://www.microsoft.com/japan/developer/workshop/default.asp
まあ結局、CSSにJScriptを組み合せたみたいなものですが。


747 名前: Name_Not_Found 投稿日: 01/12/31 19:48 ID:afQYkilf
table 要素をレイアウトに使うのは間違いだとしても、
table 的なレイアウト方法は間違っていないと思いますがどうでしょうか。

.section {
display: grid;
bin: 2 2; /* 2x2 のグリッド */
}

.section .log { slot: 0 0; } /* 親要素の (0,0) に配置 */
.section .info { slot: 1 0; } /* 親要素の (1,0) に配置 */
.section .main { slot: 0 1; } /* 親要素の (0,1) に配置 */
.section .contact { slot: 1 1; } /* 親要素の (1,1) に配置 */

+-----+--------+
|log |info |
+-----+--------+
|main |contact |
+-----+--------+

みたいなの出来るようにならんかなあ。


748 名前: Name_Not_Found 投稿日: 01/12/31 19:49 ID:afQYkilf
妄想なのに age ちまった...逝ってきます...


749 名前: Name_Not_Found 投稿日: 01/12/31 20:07 ID:Mb13cnR0
>>747
ちょっと違うかもしれないけど、
役に立つはず。
http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html


750 名前: Name_Not_Found 投稿日: 01/12/31 20:07 ID:BLUbL063
>>747
trとtdに相当する要素があればdisplayでそれを指定出来るが、
今の所出来るのはMozillaだけ。


751 名前: Name_Not_Found 投稿日: 01/12/31 20:12 ID:afQYkilf
>>749
はい。
その手の float とか position を使ったレイアウトにうんざりしたので
妄想してみました。
float とか position って grid 的レイアウトに使うものじゃないですよね。

>>750
それは知りませんでした。勉強してみます。


752 名前: Name_Not_Found 投稿日: 01/12/31 21:41 ID:+2gnEbQy
Mozillaでfilter:alpha()みたいな事できませんか?
-moz-opacityが怪しいと思い,いろいろいじってみたのですが,
透明化ができませんでした。
どうしたらいいのでしょうか。


753 名前: 741 投稿日: 01/12/31 23:40 ID:rcmCalZb
>>744
すみません。忘れてました・・・
今更でしょうがIE5.5です。

>>746
な、なんかむずかしそう・・・・ですが、やってみます。
ありがとうございますー。


754 名前: Name_Not_Found 投稿日: 01/12/31 23:53 ID:ePO9fDPh
>>740>>741なの? 意外。


755 名前: 741 投稿日: 02/01/01 02:33 ID:C3/0YUdP
>>754
あああああー! 間違えたー!!
>>746を俺に対してのレスだと思ってしまった・・・
ホントすみません。
はずかしー。ひー。


756 名前: Name_Not_Found 投稿日: 02/01/01 03:01 ID:vb9Qps/w
-moz-* なプロパティのリストってどこにあります?


757 名前: Name_Not_Found 投稿日: 02/01/01 03:14 ID:+btljE+6
>>756
Piro氏のところに昔あったんだが。
で、webarchive漁ったらあったよ。
http://web.archive.org/web/20010620011420/www.cc-net.or.jp/~piro/tips/page/p0032.html


758 名前: Name_Not_Found 投稿日: 02/01/01 09:39 ID:mh02XTRD
あげましておめでとう(w


759 名前: Name_Not_Found 投稿日: 02/01/01 23:42 ID:3k2yDyYK
初歩的質問で恐縮。どなたか教えてください。
body{
font:small/125%;
color:#6600cc;
background-image : url(2ch.gif);
}
この際、時々ではあるがテキストに背景画が上書きされてしまう。これの対処法を。
上書きが起こる部分は上部右側。環境はIE6です。
既出ですよね。すんません。過去ログも見たんだけどちょっと分かんなくて。


760 名前: Name_Not_Found 投稿日: 02/01/02 00:44 ID:7bYKPfxb
formのselectタグをなんとかスタイルシートで
立体化を平面化にしたいのですが、出来ないのでしょうか?
フォームボタンとテキストボタンとスクロールのデザインの変え方は判っているのですが
CSS関係のサイトをあちこちに探して見ましたが、見つかりません。
どなたかご存知の方、いらっしゃいますか?
一応selectタグの背景色の指定方法は判るのですが
style="color : black; background-color : silver;"・・・かな?
(一応class=txtとしておいてまとめて書いているのですが)

しかし、borderの指定をしてもできなくて。
不可能でしょうか?


761 名前: Name_Not_Found 投稿日: 02/01/02 02:53 ID:5KAQHex1
余計な要素を追加しないで、
hr を n本の違った色の横線にするってことは出来ますかね。

そういう需要は画像ですますべき?


762 名前: Name_Not_Found 投稿日: 02/01/02 03:55 ID:j/Tdd6Rx
それ以前に、そんな線を引く意味があるかどうか。


763 名前: Name_Not_Found 投稿日: 02/01/02 11:25 ID:1rTBPjTg
>>760
Win版IEでは不可能。


764 名前: Name_Not_Found 投稿日: 02/01/02 14:40 ID:+Uc5qjit
border-topとborder-bottomで2ほーん


765 名前: Name_Not_Found 投稿日: 02/01/02 16:45 ID:BDgPeZaj
ちょっと恥ずかしいこと聞きますが、
世間一般でスタイルシートと言うと、CSSの事を指しているのですか?
なんかjavaスクリプトスタイルシートというのがあると聞いたので。


766 名前: Name_Not_Found 投稿日: 02/01/02 17:09 ID:c1Ya5AxC
>765
過去ロ(以下略

ま、一般にはCSSを指す。


767 名前: Name_Not_Found 投稿日: 02/01/02 17:19 ID:xSPYoEK6
>766
ありがとふ


768 名前: Name_Not_Found 投稿日: 02/01/02 18:28 ID:R0/c1eoY
idは「一度しか使えない」ということを聞いたんですが、それは
「idそのものが一度しか使えない」ということでしょうか?それとも
「idに使う英数字の組み合わせが一度しか使えない」ということでしょうか?


769 名前: Name_Not_Found 投稿日: 02/01/02 18:32 ID:yKlu+Wxz
ID="名前"
要素に対して名前をつけます。ただし、同一の文書中で同じ名前を重複して使うことはできません。


770 名前: Name_Not_Found 投稿日: 02/01/02 21:41 ID:GFsjgCfs
>>762
デザイン上必要だったんじゃ?


771 名前: Name_Not_Found 投稿日: 02/01/03 00:54 ID:NmUESC6S
>>759
>font:small/125%;
……?
font-size:smallの誤記かな。


772 名前: Name_Not_Found 投稿日: 02/01/03 01:04 ID:Upyupbhg
>>760
Netscape6.2だったらできたような気もする。
selectへのスタイル指定で下向き三角のボタン部分の表示を、optionへのスタイル指定でドロップダウンロストの背景を変更できる。
(もし6.2でできなくても、次期バージョンでは確実にできる。)

>>761
-moz-border-top-colors: white red black;
のような感じに書けば、外側から1pxごとに色を変えられる。
ただし最新のMozillaのみ対応。


773 名前: Name_Not_Found 投稿日: 02/01/03 03:36 ID:9lmvrUjh
>>771
読めやゴルァ!
ttp://www.w3.org/TR/REC-CSS2/fonts.html#font-shorthand

ただし、この書き方の場合font-familyが省略不可になってるから、>>759
そこが間違い。互換モードじゃないとはじかれる可能性も


774 名前: Name_Not_Found 投稿日: 02/01/03 07:19 ID:gKIAkCyZ
>>772
-moz-* って、CSS3 で実装されるかもしれない機能の先取りですよね?
将来的には border-top-colors 的なのが導入される可能性があるってことですか?


775 名前: Name_Not_Found 投稿日: 02/01/03 09:22 ID:gKIAkCyZ
<input class="button" type="submit" value="ok" accesskey="o" />

とかやっといて、ボタンのラベルの横に accesskey を表示しようと思って

.button { content: "(" attr(accesskey) ")"; text-decoration: underline; }

ってやったんですが、ボタンのラベルの横でなくボタンの横に出ちゃいました。

ラベルの横に出すにはどうしたらいいんでしょう?
div で囲むぐらいしか思いつかない...


776 名前: 759 投稿日: 02/01/03 12:56 ID:qsy/X6l7
>>773
どうもです。font-familyを使いたく無かったんで、まとめ指定をやめました。
でも症状改善せず。他人のサイトでも同じ症状をみたことあるんだけど、バグ?


777 名前: Name_Not_Found 投稿日: 02/01/04 01:23 ID:wHLquHB5
>>759>>776
こちらへどうぞ。

CSS/DHTMLバグ辞典スレッド ver2.0
http://pc.2ch.net/test/read.cgi/hp/991666454/l50


778 名前: Name_Not_Found 投稿日: 02/01/04 20:58 ID:iPwtrgjH
>>759
うちでもそれあるよ。float使ってるんじゃない?

うちは全ページの隅に同じ背景入れてるんだけど、
float使ったページのみ画像がテキストにカブってる。
IEはfloatに弱くて関係ないとこにも不具合が出るから、
これもそうなんじゃないかと思う。


779 名前: 759 投稿日: 02/01/04 23:45 ID:Lea4B9wJ
>>778
ありがとう。
でもfroat使ってないんだよね。
バグにしてjは簡易なタグなんで、こちらで質問させて頂いた。
どうなんでしょう、同じ症状の方っていらっっしゃいませんか?


780 名前: Name_Not_Found 投稿日: 02/01/04 23:49 ID:xaJZpgye
>>774
詳しくはCSS3の仕様(策定中)を見ないと分かんないけど、
一概に「-moz-*はCSS3の先取り」とは言い切れない。


781 名前: Name_Not_Found 投稿日: 02/01/05 00:38 ID:7XUU8Swz
画像とテキストを違うブロックにしてみたら。


782 名前: 778 投稿日: 02/01/05 01:48 ID:XMY7jmhg
>>779
改めて確認してみたら、以前その現象が起こってた2ページのうち、
片方では再現しなくなってた。
floatは依然使ってるから原因は別にあるみたいね。スマソ
シートいじったからだと思うんだけど、どこをどういじったか忘れちった。

>>781
それが別ブロックなんだわ。うちは。


783 名前: 質問 投稿日: 02/01/05 03:34 ID:aDz4vMBw
画面四隅をぐるっと囲むように色or画像を入れたいのですが、
フレームを使ってやってみたところ、NN4.7ではどうしても
誤差が生じてずれてしまいます。(IEではOK)
画面サイズに応じて伸び縮みしなくてもいいので、CSSで
カチっと表示させる適当な方法があれば教えてください。
ちなみに枠の中身は別ページを表示させたいのでテーブルは
使えません。(インフレーム機能はネスケはダメですよね?)


784 名前: Name_Not_Found 投稿日: 02/01/05 04:24 ID:MWXbRwoZ
>>783
無理だと思う。
そもそもNN4.7をCSSでどうにかしようと思うのは諸刃の剣ではないの?


785 名前: Name_Not_Found 投稿日: 02/01/05 21:57 ID:eE0NvMlo
>>783
色でいいのなら、囲みたい要素に
border:100px solid red;
とかで、どう?
或いは親要素にpadding:100px;background-image:url(img.gif);と指定して
広めに取ったパディング領域に画像を配置。で、そのパディングに囲まれる領域には
IDでも振って#id{background-image:none;}とか。


786 名前: 785 投稿日: 02/01/05 21:59 ID:eE0NvMlo
あ、ごめん。
「枠の中身は別ページを表示させたい」のか。
うーん、JavaScript(DHTML)で何とかできない?


787 名前: Name_Not_Found 投稿日: 02/01/06 02:07 ID:Nj1M2Kxc
>>784
>>786
やっぱむずかしいですよね・・・お手間とらせました。m(_ _)m


788 名前: Name_Not_Found 投稿日: 02/01/06 21:23 ID:I1r2pFSQ
移行しました。

スクロールしても動かない背景ってできますよね。
それみたいにスクロールしても動かない文字ってできますか?


789 名前: Name_Not_Found 投稿日: 02/01/06 21:52 ID:yhEKHhs1
div { display: fiexed; } だっけ?
(綴り合ってるか知らん)
けど、これはまだ実装に問題多いからオススメできない。


790 名前: Name_Not_Found 投稿日: 02/01/06 21:59 ID:I1r2pFSQ
div { display: fixed; }
(多分綴りこう)

ありがとうございます!
いろいろ試してみます。


791 名前: Name_Not_Found 投稿日: 02/01/06 22:15 ID:SQFSRmxn
>>789-790
いや、position:fixed;でしょ。WinIEが実装してないけど、
position:absolute;とoverflowプロパティの組合せで擬似フレームが出来るから、
応用すれば、背景に文字を固定することも可能かな。


792 名前: Name_Not_Found 投稿日: 02/01/06 22:15 ID:1QcbgdXZ
>>789-790
そんなむちゃくちゃな知識を……試すんではなく、調べろ。
http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme
このposition:fixedにはIEが対応してない。
そこで留めたい要素には何もせず、スクロールさせたい方をdiv等で括って
丁度iframeと同じ様に設定する手もある。


793 名前: Name_Not_Found 投稿日: 02/01/06 23:16 ID:SQFSRmxn
>>788-790
ここの真似するよろし。(新年限定バージョンみたいだからお早目に)
http://www.sal.tohoku.ac.jp/~gothit/gothitj.html


794 名前: Name_Not_Found 投稿日: 02/01/07 05:33 ID:FrZ2fptw
>>791-792
あ、すまん。うろ覚えで書いてもた。
ID:I1r2pFSQさん、ゴメンナサイ。


795 名前: Name_Not_Found 投稿日: 02/01/07 08:59 ID:/aSoj742
>>788です。
ありがとう(^◇^;)(^◇^;)


796 名前: Name_Not_Found 投稿日: 02/01/07 11:57 ID:+ftvg6CU
>>793
そこのソースだけど……
<BODY>
<DIV CLASS="center" STYLE="margin-bottom: -80em">
<SPAN STYLE="font-size: 20em; color: #FFCCCC">謹<BR>賀<BR>新<BR>年</SPAN>
</DIV>

これだとWinIEで画面上部の要素(このdivに続く部分)が表示されなくなるね。


797 名前: 投稿日: 02/01/07 12:10 ID:T3Z0B9qV
がいしゅつだったらごめんなさい。

行間指定するときは

layout-grid-line:

使えば良いのですか?


798 名前: Name_Not_Found 投稿日: 02/01/07 12:19 ID:4ij34HUe
>>797
なんじゃそりゃ。普通 line-height: じゃないのか?


799 名前: Name_Not_Found 投稿日: 02/01/07 12:22 ID:+ftvg6CU
>>797
こちらをお読み下さい。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#line-height
http://east.portland.ne.jp/~sigekazu/css/international.htm


800 名前: Name_Not_Found 投稿日: 02/01/07 16:28 ID:flexzaBJ
style="res: 800; get: zuzaaaa;"


801 名前: Name_Not_Found 投稿日: 02/01/07 18:26 ID:qLnZTmix
800{display:none)


802 名前: Name_Not_Found 投稿日: 02/01/07 19:46 ID:NuK4/n6a
>>796
>これだとWinIEで画面上部の要素(このdivに続く部分)が表示されなくなるね。
MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。


803 名前: Name_Not_Found 投稿日: 02/01/08 02:59 ID:J7JFfRRN
要素を増やすことって出来ますか?

<h1 id="a112">ほげりすぎ - <cite>中田さんより</cite></h1>
<ul class="navigation">
<li><a href="#a111">前の記事</a></li>
<li><a href="#a113">次の記事</a></li>
</ul>
<p>
もー、ほげほげほげほげうるさいったらないんですよ。
</p>

みたいなのがあったとして、
<ul class="navigation">..</ul> を、 p 要素の後ろにも表示したいんです。
これって CSS レベルでの対処は可能でしょうか。

ナビゲーション関係は文章構造の範疇なのかなぁ。


804 名前: Name_Not_Found 投稿日: 02/01/08 04:52 ID:31lH4Aa5
CSSでは無理だけどXSLならできるのでは。


805 名前: Name_Not_Found 投稿日: 02/01/08 08:06 ID:J7JFfRRN
クラスの派生がしたい....

.section { border: 1px solid black; }

.update { border: 1px solid black; font-size: 0.9em; }

この程度だったら逐一書換えればいいけどさ。
プロパティが増えてくると同期が面倒。
とりあえず、共通部分だけまとめてみる。

.section, .update { border: 1px solid black; }

.update { font-size: 0.9em; }

この方法は、.section が別の場所で定義されてたりすると破綻しちゃう。
ぬうん。

.section { border: 1px solid black; }

.section::.update { font-size: 0.9em; }

とかやりてー。


806 名前: Name_Not_Found 投稿日: 02/01/08 11:07 ID:tQOYQU+e
>>805
"派生" って概念とは違うと思うけど
class 属性に複数のクラス名を記述できること、知ってる?


807 名前: Name_Not_Found 投稿日: 02/01/08 11:47 ID:J7JFfRRN
>>806
なんですとー?
<div class="section update">...</div>
みたいなこと出来るんですか?

Mozilla で試したら上手くいった...知らなかった....
IE とかはどうなんでしょう?

何にしても、感謝ですー。


808 名前: Name_Not_Found 投稿日: 02/01/08 15:15 ID:M06DXjHt
>>807
IE〜4、NC4は未対応らしい。


809 名前: 名無しさん@名前キボンヌ 投稿日: 02/01/08 17:57 ID:Ft9r8HvI
例えば あ の文字は全て <font color=red> で表示するとかできますか?
(説明ヘタですね・・・(^◇^;))


810 名前: Name_Not_Found 投稿日: 02/01/08 18:03 ID:cpwgbfVT
あ の文字を全てマークアップし
適切なクラス名をつける必要があるでしょう。


811 名前: 名無しさん@名前キボンヌ 投稿日: 02/01/08 18:07 ID:Ft9r8HvI
やっぱマークアップしなきゃ無理ですか・・ありがとうございました。


812 名前: Name_Not_Found 投稿日: 02/01/08 21:01 ID:O26U3dTc
>>802
>>これだとWinIEで画面上部の要素(このdivに続く部分)が表示されなくなるね。
>MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。

MSIEでは「表示−文字のサイズ」に依存するようだ。emの基準が違うのかなあ。


813 名前: 投稿日: 02/01/08 23:34 ID:UyeLpES0
>>798>>799
ありがとうございます。
勘違いしてました。


814 名前: Name_Not_Found 投稿日: 02/01/09 00:08 ID:LQ37kbnz
<TABLE width=400 align="center">
<TR><TD align="right">あいうえお</TD></TR>
</TABLE>

「センタリングの幅400の右端」に表示したくてこんなことをやってるんですが、
スタイルシートでの表示方法があったら教えてください。


815 名前: Name_Not_Found 投稿日: 02/01/09 00:55 ID:hOihItB0
<div style="text-align:center;">
<div style="width:400px;text-align:right;">あいうえお</div>
</div>
文法的に正しいかどうかは別にして、とりあえずどうでしょう?


816 名前: Name_Not_Found 投稿日: 02/01/09 05:11 ID:FjA20C4h
<STYLE type="text/css">
<!--
A{
text-decoration : none;
cursor : default;
}
A:HOVER{
color :ここに文字色;
text-decoration : none;
cursor : default;
visibility : visible;
float : none;
clear : none;
position : relative;
top : 2pt;
left : 2pt;
}
-->
</STYLE>
お聞きしたいのですが、↑上のタグをつかって、リンクの上にカーソルを置くと
字や画像が少しズレて、さもへこんだように見えるようにしたのですが、
画像が動かないのです。(字はちゃんとへこんだように見える)

でも、例えば外部から直リンしたバナーなどの画像はちゃんとへこんだように見えます。
この違いはどういうことなのでしょうか?


817 名前: Name_Not_Found 投稿日: 02/01/09 05:47 ID:aeBRwAp/
Win2kで、スタイルシートなどでのフォント指定が効かない
のは、何とかなりませんか?例えばcursiveフォントとか。
普通のゴシックみたいになってしまうんですが・・。


818 名前: Name_Not_Found 投稿日: 02/01/09 12:19 ID:wp7d7nrX
>>816
無駄が多すぎ。

A:HOVER{
color :ここに文字色;
position : relative;
top : 1;
left : 1;
}


819 名前: Name_Not_Found 投稿日: 02/01/09 14:05 ID:vevw6H+5
<html>
<head>
<style type="text/css">
<!--
.note {
text-indent: 1em;
}
-->
</style>
</head>
<body>
<div class="note">
<p>段落1</p>
<p>段落2</p>
段落じゃないけど
</div>
</body>
</html>

この場合、最後の「段落じゃないけど」のところが、IE6ではインデントされるのに
N6ではされません。text-indentってブロック要素にしか有効じゃないと思った
のですが、クラス指定しているdivがブロック要素だから中のものに対してIE6だと
有効になってしまうのかな?


820 名前: 814 投稿日: 02/01/09 17:04 ID:mFB18ZIY
>>815
TABLEレイアウトから卒業したいので、それで行きたいと思います。
ありがとうございました。


821 名前: Name_Not_Found 投稿日: 02/01/09 18:33 ID:U8IV2Oxn
>>819
答えられなくて申し訳ないのだけど、
あなたは、IE と Netscape のどちらの描画を望んでいるの?


822 名前: 819 投稿日: 02/01/09 19:08 ID:vevw6H+5
>>821
この書き方だとIE6の表示を望んでいるように取れますね。
私としては、N6の方が正しい解釈なのかなと思っているの
ですが、どうなんでしょう?
描画を望むというのではなく、どちらかの実装的な不具合
なのか、仕様書的にはどっちの表示もありなのかという
部分でのお話です。

どちらかの実装的な不具合ならば、ゴルァって言いたいん
ですけどね。


823 名前: Name_Not_Found 投稿日: 02/01/09 21:00 ID:sq7yO034
>>822
Netscape 6の方が正しい解釈だと思ふ。


824 名前: 817 投稿日: 02/01/09 22:54 ID:VVvTvh99
2度目の放置決定な予感・・板違いっすか?


825 名前: Name_Not_Found 投稿日: 02/01/10 00:54 ID:3vZSHmwt
>817
そんなフォント、オイラのPCには入ってない。
フォント名は大文字・小文字区別するんじゃなかったっけ?
大抵、頭文字は大文字だと思うけど、どうよ?


826 名前: Name_Not_Found 投稿日: 02/01/10 02:35 ID:jj+UruCs
>>825
仕様書読め。


827 名前: Name_Not_Found 投稿日: 02/01/10 07:15 ID:gtJgaG6P
cursiveはフォントファミリー名


828 名前: 名無しさん ◆MZ2000oY 投稿日: 02/01/10 14:00 ID:rzK8YWF0
・「ス切リボ」は便利そうだけど Moon Browser じゃ使えない〜
・すっきり風スタイルシートチェンジャは別窓とかプロンプトが
出るのがちょっとヤだ〜
・ ieex のスタイルシート切り替え機能って腐ってるじゃん

という自分の不満を満足させるために(ワラ 、 ieex を更新しました。
右クリックから「スタイルシートの切り替え」を実行するたびに、代替
スタイルシートを順次適用してゆきます。
ちょっとスクリプトがごちゃごちゃになってしまったのと、あまりたく
さんのケースで実験していないので不具合があるかもしれません。
人柱になってくださるかたを募集中しています。

http://www.kohshi.org/ieex/ の ieex 0.10 alpha 5 です。
なんかあったらこのスレかうちの掲示板に連絡ください〜 宣伝スマソ


829 名前: 名無しさん ◆MZ2000oY 投稿日: 02/01/10 14:07 ID:rzK8YWF0
Outsider Reflex で切り替えがぜんぜんできないのはいまのところ
仕様です(;´Д`)


830 名前: Name_Not_Found 投稿日: 02/01/10 14:49 ID:eeBDtrj2
CSSを見られるのがどうしても嫌なので
外部ファイルとして読み込みたいのですが
どうしたらよいのでしょうか?


831 名前: Name_Not_Found 投稿日: 02/01/10 14:59 ID:QAxN9UXE
>>830
外部ファイルにしても
リンクすることになるので
アドレスがバレで見られちゃいます。


832 名前: 名無しさん ◆MZ2000oY 投稿日: 02/01/10 15:21 ID:rzK8YWF0
「募集中しています」… 電波か漏れは… 逝ってきます


833 名前: Name_Not_Found 投稿日: 02/01/10 18:30 ID:nyLErBBF
え?でもどこを見ればバレるんですか?
例えば他のサイトを見ても</.***>  (*は適当です)
みたいに書いてあってバレないと思うのですが。


834 名前: Name_Not_Found 投稿日: 02/01/10 18:36 ID:Z78xVuFd
JavaScriptはクライアントサイドで動いている以上、ブラウザから見えないと不都合が起こる気がする。


835 名前: Name_Not_Found 投稿日: 02/01/10 18:37 ID:Z78xVuFd
>>834
失敗。CSSに読み替えて。
鬱だ。ゴハン煎ってきます。


836 名前: Name_Not_Found 投稿日: 02/01/10 18:47 ID:yYkIAh7P
>>833
<LINK rel="stylesheet" type="text/css" href="../mona.css">

<HEAD>内に↑こういうのない?
っていうか、これが外部リンクのやり方なんだけどさ。
あと、その例えは意味不明。


837 名前: Name_Not_Found 投稿日: 02/01/10 18:49 ID:vvyixr1r
>>833
たとえば
http://www.bakabakka.com/
というサイトがあったとして、そのサイトのトップページで
外部CSSが使われていたとする。
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
で、http://www.bakabakka.com/のあとにstyle.cssをつけて
http://www.bakabakka.com/style.css
にアクセスすると、見えちゃうんだなこれが。
あと、IEで「名前を付けて保存」するときに
ファイルの種類を「Webページ、完全」にしておくと、
リンクされているCSSファイルごとローカルに保存できるので
オフラインでじっくり読んじゃったりもできます。


838 名前: Name_Not_Found 投稿日: 02/01/10 19:08 ID:Z78xVuFd
じゃあ、>>833はパスの基本というかパスのこと全くわかってなかったことで。
いいですか?


839 名前: Name_Not_Found 投稿日: 02/01/10 19:13 ID:Wn2pdzmV
ん、次の質問はこちら。
↓↓↓↓↓↓↓↓↓


840 名前: 祝、初書き込み 投稿日: 02/01/10 19:17 ID:FYeU6j6b
恐る恐る2chに初めて書き込みします。
<TABLE STYLE="table-layout:fixed">
:
</TABLE>
これを書くと表示時間が早くなる様なのですが、
外部CSSに、
TABLE { table-layout: fixed; }
と記述して全てに適用させると、レイアウトが崩れてしまいます。
一つ一つサイズ指定をしなければ駄目なのでしょうか?
(初心者ですが宜しくお願いします)


841 名前: 840 投稿日: 02/01/10 19:50 ID:FYeU6j6b
あっ、質問はageるんですよね・・・


842 名前: Name_Not_Found 投稿日: 02/01/10 20:21 ID:JTdmujkG
>>840
最近のパソコンのCPUパワーからいけば、
表示時間はたいして変わらない気がする。
よっぽど長大なテーブルを作っているのなら別だけど。

table-layout:fixedを使うときは、
<TABLE>
<COL WIDTH="100"><COL WIDTH="300"><COL WIDTH="200">
のように列幅を指定する。


843 名前: Name_Not_Found 投稿日: 02/01/10 20:30 ID:/QT0uD87
>>840
と言うか、サイズを指定しないと自動テーブルレイアウトアルゴリズム(table-layout: auto)になるのでは。
http://www.w3.org/TR/1998/REC-CSS2-19980512/tables.html#fixed-table-layout
> The table's width may be specified explicitly with the 'width' property.
> A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm.


844 名前: Name_Not_Found 投稿日: 02/01/10 20:36 ID:v5OVjPFC
サイズ指定しないと
IEは勝手にtable幅100%にするよ。


845 名前: 817 投稿日: 02/01/10 23:23 ID:zTptX82x
ダメか・・これはWin2kだけの症状なのかな?
前使ってたWin98SEではちゃんと認識されたんだけどな・・。
何でcursive使うわけ?って言われればそれまでなんですが(藁


846 名前: Name_Not_Found 投稿日: 02/01/10 23:50 ID:g+BbptQw
>>845
>>817の質問の仕方がまづいからでは。
そもそも表示確認したブラウザの名前とバージョンは?
指定は一般フォントファミリーだけ指定してるの?
(body{font-family:cursive}とか)
それとも特定のフォント・ファミリーでもなのか?
(body{font-famiy:'MS P明朝',serif})
……等々、もっと具体的に状況を記述してくれないと応答できません。

あと、font-family:sans-serif;だけだと、却ってWinIE5〜で弊害がありますよ。
http://www.microsoft.com/japan/support/kb/articles/J058/3/67.asp
http://members.jcom.home.ne.jp/jintrick/Personal/bad_css.html#level4


847 名前: Name_Not_Found 投稿日: 02/01/11 01:24 ID:duSZhUd8
background: #fff url(hoge.jpg) no-repeat top 100px;
は誤った書式なのでしょうか?
N6だと何も表示されません。IE6は大丈夫のようです。


848 名前: Name_Not_Found 投稿日: 02/01/11 01:30 ID:mviFhGCc
>>847
同様の書式でここ↓の【使用例】はNN6.2でちゃんと見えてますが?
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background


849 名前: Name_Not_Found 投稿日: 02/01/11 01:43 ID:RteBlg0T
>>847
100px top と書いてみてはどうですか。


850 名前: Name_Not_Found 投稿日: 02/01/11 01:46 ID:duSZhUd8
>>848
top right 等は大丈夫でした。
px指定にするとダメです。


851 名前: Name_Not_Found 投稿日: 02/01/11 01:47 ID:duSZhUd8
>>849
ダメでした。


852 名前: Name_Not_Found 投稿日: 02/01/11 01:54 ID:EisS/Knr
>>850
指定した要素の幅は100px以上ありますか?

これはバグかもしれませんが、こんな例があります。
body{
background-image:url(test.gif);
background-repeat:no-repeat;
background-position:600px top;
}
<body>
<h1>見出し</h1>
<div>
短い文章
</div>
</body>

これで、ブラウザのウィンドウ幅を600px以下で視ると背景画像は現れず、
600px以上にして閲覧された場合のみ背景画像が表示されるはずです。
ところが、WinIE6やOpera6では意図通りになりますが、NN6では
ウィンドウ幅に拘らず、背景画像は現れません。


853 名前: Name_Not_Found 投稿日: 02/01/11 02:00 ID:duSZhUd8
>>852
body直下のdiv要素です。幅は100px以上あります。
バグかもしれません。


854 名前: 巨額詐欺 投稿日: 02/01/11 02:03 ID:ASJJA4dU

巨額詐欺の疑いのある、グローバリーについて

掲示板を拝見されてるの皆様、新年あけましておめでとうございます。
掲示板の趣旨とは直接関係ない話で申し訳ないのですが、この世の中では許せない事があります。

http://www.max.hi-ho.ne.jp/sakimono/index.htm

この会社はありもしない儲け話をでっち上げ、巧みに客の財産を聞き出し、全財産を巻き上げます。

2002年になりましたが、一向に改善する気配すらなく、悪質化は進む一方です。
この会社の営業は世間の皆様の迷惑になっています。

それだけではなく、殺人事件なども実際に発生し、新聞ザタになっています。

みなさんもこちらの掲示板に投稿し、悪徳会社に騙される不幸な人が増えないようご協力お願いしま
す。


http://messages.yahoo.co.jp/bbs?action=q&board=8745

また、この書き込みを見て賛同頂ける方はこの内容をコピーしていろんな掲示板に書き込みをお願いします。


           


855 名前: 852 投稿日: 02/01/11 02:05 ID:EisS/Knr
因みに、確か>>852の例は、一括指定でpxをemにしても表示されませんでした。


856 名前: Name_Not_Found 投稿日: 02/01/11 02:05 ID:ML1nbygP
>>847
http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position
> 'background-position'
> Value: [ [<percentage> | <length> ] {1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit

仕様ではlength(pxやem等)とtop等を混ぜて使ってはダメ。
よってNetscape6の動作は正しいと思われ。

つーか
background: #fff url(hoge.jpg) no-repeat 0 100px;
じゃだめなの?>>847


857 名前: Name_Not_Found 投稿日: 02/01/11 02:35 ID:duSZhUd8
>>856
ありがとうございます!
0 100px で上手くいきました。


858 名前: Name_Not_Found 投稿日: 02/01/11 02:56 ID:7EdWoKmp
ブラウザ標準の色を使う事ってできるんでしょうか?

例えば、body {color:#000000}の状態で、
DIVタグの中の文章をブラウザ標準の色(たいていは黒だけど)で表示したりできるんでしょうか?


859 名前: Name_Not_Found 投稿日: 02/01/11 03:04 ID:ZgtQa6oP
>>858
できない。
標準色はユーザーによって違うから依存すべきではない。


860 名前: Name_Not_Found 投稿日: 02/01/11 03:10 ID:EisS/Knr
>>858
ブラウザってよりもOSのGUI環境に合せたシステム色なら指定できるけど。
http://www.y-adagio.com/public/standards/tr_css2/ui.html#system-colors
つまり、ユーザーの好みに合せた指定ってことになりますね。


861 名前: 860 投稿日: 02/01/11 03:13 ID:EisS/Knr
下記の「システム色見本」を視ればそのブラウザが対応してるかどうかわかります。
http://openlab.ring.gr.jp/k16/htmllint/colors.html


862 名前: 840 投稿日: 02/01/11 07:39 ID:XM5YGvwo
>>842; >>843; >>844; さん有り難う御座いました。
というか、このスレを見て勉強し
テーブルレイアウト自体から卒業した方が良いですよね。(笑)

とりあえず今はIE6でしか確認できないので、
ネスケやマックの事とかまで考えると、混乱してきて大変です。


863 名前: 840 投稿日: 02/01/11 07:45 ID:XM5YGvwo
あっ、ID:XM5YGvwo に変わってる。
IDって変わるんですね・・・。
あそこが???になってる人は一体どうやってるんですか?


864 名前: Name_Not_Found 投稿日: 02/01/11 10:35 ID:Bta36zmq
>>863
メールアドレス欄に何か書いてあればなります。<???
でもこの板はいまのところ強制IDなので、なりません。
IDは日付が変わったり接続しなおしてIPが変わったりすれば変わります。
2ちゃんねるのことでわからないことがあったら、
↓を見るといいです。
「2ch初心者FAQ」
http://www.skipup.com/~niwatori/
「2典」
http://freezone.kakiko.com/jiten/index.html
あとは初心者板で訊くとか。
http://cheese.2ch.net/qa/


865 名前: Name_Not_Found 投稿日: 02/01/11 19:49 ID:RJLfdojW
CSS で

.fbox {
border: 1px solid black;
margin: 0;
padding: .2em;
}

のように書き、HTML で

<div class="fbox">

</div>
<div class="fbox">
<P>中</P>
</div>
<div class="fbox">

</div>

とすると、IE 4 以降では中央のボックスの上下に <P> によるスキマができます。Opera 6、Mozilla 0.9.7 ではボックス内にスキマが空くので 3 つのボックスがくっついて見えます。

IE でこのスキマを生じさせないようにするにはどうすればいいのでしょうか? 悪あがきに

p {
margin: 0;
}

としてみたものの、<P> 以外の要素についても同じことを書くわけにもいかず、参っています。


866 名前: &gt;&gt;865 投稿日: 02/01/11 19:54 ID:o/M/jg4W
.fbox *
{
margin: 0;
}
でいいのでは?


867 名前: Name_Not_Found 投稿日: 02/01/11 19:56 ID:o/M/jg4W
ミスった……。
>>866>>865への解答。


868 名前: 865 投稿日: 02/01/11 20:07 ID:RJLfdojW
<a href=866 target=_blank>>>866</a>

それも考えたのですが、そうすると <ul> や <blockquote>などの表示が悲惨になってしまいます。

せっかく回答をくださったのにすみません。


869 名前: 865 投稿日: 02/01/11 20:09 ID:RJLfdojW

う、みっともない。見苦しくて失礼。


870 名前: Name_Not_Found 投稿日: 02/01/11 20:21 ID:CtsdvOuF
>865
UL等を先に記述して最後に>>866さんのを書けば
桶かもしれない。(未確認)


871 名前: 名無しさん 投稿日: 02/01/11 20:26 ID:Sj/M5p8t
DIV とかを2個使うにはどうしたらいいのでしょうか?

<style TYPE="text/css">
<!--
DIV{margin-top : 5pt;
margin-right : 5pt;}
DIV2{margin-bottom : 10pt;
margin-left : 10pt;}
-->
</style>

DIV2にしたらできるかなぁ・・
とか思ってやってみてもやっぱり無理でした・・(当たり前か・・。)
どうすればよいのでしょうか?


872 名前: Name_Not_Found 投稿日: 02/01/11 20:45 ID:8+oi53Pa
>>871 classを使え。
classが何かって? 調べろ。


873 名前: Name_Not_Found 投稿日: 02/01/11 20:47 ID:2rymCieg
みなさん-moz-*なプロパティって
どこで情報を仕入れてるですか?

自分でWeb上をあさってみたものの
某P氏のサイトにあったものには
遠く及ばないのですが。


874 名前: Name_Not_Found 投稿日: 02/01/11 21:23 ID:93n8VRdv
>>873
多分ここが一番詳しいんでないかと。
http://www.xulplanet.com/tutorials/xultu/elemref/ref_StyleProperties.html


875 名前: Name_Not_Found 投稿日: 02/01/12 12:43 ID:Sp8YVqBs
スクロールバーの色を変えるプロパティは
W3Cが定めるCSSの範囲では、認められていないと
聞きましたが本当?


876 名前: Name_Not_Found 投稿日: 02/01/12 12:54 ID:0Uoeg1Ih
>>875
WinIE5.5以降の独自拡張です。


877 名前: Name_Not_Found 投稿日: 02/01/12 12:57 ID:+xL0QDvZ
N6のユーザCSSってどこで設定するんでしょう?


878 名前: Name_Not_Found 投稿日: 02/01/12 13:18 ID:OQYd4pSB
>>877
プロファイルディレクトリの中の \chrome\userContent.css に記述する。
プロファイルディレクトリの場所については
http://pc.2ch.net/test/read.cgi/software/996198735/908 を参照。


879 名前: 873 投稿日: 02/01/12 15:15 ID:bbHY6coi
>>874
ありがとう。
がんばって訳してみるっす。


880 名前: 質問です 投稿日: 02/01/12 16:20 ID:bBgfeaKP
font-familyとfont-sizeを組み合わせで指定する方法はありますか?

たとえば、
font-family:Arial;font-size:100%が第一志望として、
このフォントがない場合は、
font-family:Times New Roman;font-size:110%
を指定するような?
フォントってモノによってサイズが違うから、希望がない場合は、
代替フォントをサイズ指定を含めて指定したいのです。。。


881 名前: Name_Not_Found 投稿日: 02/01/12 16:52 ID:JvymBIxC
>>880
まさにそのために
font-size-adjustがあるけど、
対応してるUAは皆無だと思われ。


882 名前: 880です 投稿日: 02/01/12 17:23 ID:vZ9AJKdD
>>881
そうですか。。。(泣)
ジャバスクリプトで相手のパソコンがフォント持ってるか
調べる方法はありますか?


883 名前: Name_Not_Found 投稿日: 02/01/12 18:01 ID:GGRnpQd+
>>882
あるっちゃーあるよ


884 名前: 880です 投稿日: 02/01/12 23:58 ID:pqEnQCI3
>>883
おおお、その方法はいかに?
とってもむずかしいのですか?
ブラウザやOS判別するみたいに簡単なのですか?
でも、、、
あんまむずかしいとできそうにないや(また泣く)


885 名前: Name_Not_Found 投稿日: 02/01/13 02:41 ID:007dX70N
これってどうよ
http://www.geocities.co.jp/HeartLand-Oak/8031/Lunar/Lunar.html


886 名前: Name_Not_Found 投稿日: 02/01/13 02:47 ID:m39rWuF4
なんか根本的なところで CSS の使い方を間違ってる気がするサイトだな。
あと NS って何よ。


887 名前: Name_Not_Found 投稿日: 02/01/13 03:14 ID:MJja3X41
>>884
"EnumFontFamiliesEx"で検索。


888 名前: Name_Not_Found 投稿日: 02/01/13 03:28 ID:EiBia7CG
>>886
わかってんだろーけど、一応こたえるよ。
NetScape=ネスケ。アメリカではこう略す。


889 名前: Name_Not_Found 投稿日: 02/01/13 03:31 ID:m39rWuF4
>アメリカでは
あ、そーなんスか。勉強になりました。


890 名前: 880です 投稿日: 02/01/13 14:14 ID:mQ5UobjT
>>884
ありがとうございます!
でもこれってVBですか。。。?
むずかしそうです(泣)
でもがんばって勉強してみます。


891 名前: Name_Not_Found 投稿日: 02/01/13 14:20 ID:umghksbf
>>890
+ JavaScript の質問用スレッド vol.7 +
http://pc.2ch.net/test/read.cgi/hp/1010823511/9-13


892 名前: Name_Not_Found 投稿日: 02/01/13 21:43 ID:ewi3vR8g
>>885
全体的になんか、わかってない感がただよってるんだよな。
ソフトの方は先を考えて作ってないというか。


893 名前: CSS初心者 投稿日: 02/01/13 22:19 ID:L9hTJyPh
フォントの設定について教えて欲しいのですが、
全体的にMacではフォントサイズ12、
Winsowsでは「小」を前提にレイアウトを組んでいます。

でもIEでは「小」はデフォじゃないですよね?
これを強制的に「小」にするにはどうしたらいいのでしょう?

CSSスタイル定義で
「h4」に再定義してフォントを「小」として
ページ全体に「h4」をかぶせたのですがダメでした。

こういうやり方ではないの?


894 名前: Name_Not_Found 投稿日: 02/01/13 22:30 ID:zXhj6w13
>>893
ユーザーに小さいフォントサイズを強制すんな。
h4を全体に被せんな。見出しに使え見出しに。
フォントを「小」とした、って、一体何やったの?
h4 { font-size: small } か?

ページ全体のフォントサイズを指定したいならbodyだ。例えば
body { font-size: x-small }
ここで重要なのはブラウザで自由にフォントサイズを変えられる様に
em、%、あるいはlarge等キーワード指定してやる事。
ただし、おすすめは%。


895 名前: Name_Not_Found 投稿日: 02/01/13 22:32 ID:DequuYlm
>>893
>ページ全体に「h4」をかぶせたのですが
んな無茶苦茶な。
CSSの前にHTMLの書き方を勉強した方がよさげ。

あと、小さい文字サイズでの固定指定はよろしくない。
body{font-size:100%}がよい。下記参照。
 http://pc.2ch.net/test/read.cgi/hp/1004167821/l50
 http://dfj.cool.ne.jp/html/fontsize.html


896 名前: 893 投稿日: 02/01/14 00:12 ID:m5AQCoR+
さっそくのレスさんきゅ〜です。

たしかにフォントサイズを強制するのは迷惑という話を聞いていたので
「フォントサイズ小で最適化してます」みたいな
コメントだけで終わらせることも考えてますが・・・。

最終的にはMacな人はフォントサイズ12、
Winの人は、デスクトップの設定でフォントサイズ9くらいで見てもらいたいな〜と思ってるのですが
フォントサイズをごちゃごちゃ考えても
一長一短でキリがないような気がするので
それに影響されないレイアウトを考えろってことですかねぇ。


897 名前: Name_Not_Found 投稿日: 02/01/14 00:29 ID:D6/EJSn5
>フォントサイズをごちゃごちゃ考えても
>一長一短でキリがないような気がするので
>それに影響されないレイアウトを考えろってことですかねぇ。

そ。


898 名前: Name_Not_Found 投稿日: 02/01/14 03:37 ID:u9WrhIq9
>>796 >>802 >>812
>>>これだとWinIEで画面上部の要素(このdivに続く部分)が表示されなくなるね。
>>MSIE6とNetscape6とで挙動が違うようだけど、どっちの実装がいいのかな。
>MSIEでは「表示−文字のサイズ」に依存するようだ。emの基準が違うのかなあ。

↓ここですよね。なんか今IE6で見ても異常無くて直ってるみたいなんですが。
http://www.sal.tohoku.ac.jp/~gothit/gothitj.html
でもソースを見ると、>>796の抄出したのと一緒で変ってないんだけど……
どうなってるの? ブラウザの問題ではなかったのかな。


899 名前: Name_Not_Found 投稿日: 02/01/14 03:57 ID:+qT9BreY
>>896
こういうスレもあるぞ

なんで字が小さいんだ?
http://pc.2ch.net/test/read.cgi/hp/1004167821/


900 名前: Name_Not_Found 投稿日: 02/01/14 11:42 ID:n2Q9aM91
900!!


901 名前: Name_Not_Found 投稿日: 02/01/14 13:00 ID:+Js0lMeJ
>>898
>↓ここですよね。なんか今IE6で見ても異常無くて直ってるみたいなんですが。
>http://www.sal.tohoku.ac.jp/~gothit/gothitj.html
>でもソースを見ると、>>796の抄出したのと一緒で変ってないんだけど……
>どうなってるの? ブラウザの問題ではなかったのかな。
変わっているよ。

<DIV CLASS="center" STYLE="font-size: 80mm; line-height: 110mm; margin-bottom: -440mm; color: #FFCCCC">
<SPAN>謹<BR>賀<BR>新<BR>年</SPAN></DIV>

font-sizeの4倍じゃなく、line-heightの4倍margin-bottomをマイナスにしている。
異常があるように見えたのは、デフォルトのline-heightの取り方がブラウザによって
違っているからじゃないかな。


902 名前: 898 投稿日: 02/01/14 15:43 ID:5jNlNJiq
>>901
あれ、ソース変ってる。表示も少し変化した!
昨晩見た時は下記の通りだったのに。
<BODY>
<DIV CLASS="center" STYLE="margin-bottom: -80em">
<SPAN STYLE="font-size: 20em; color: #FFCCCC">謹<BR>賀<BR>新<BR>年</SPAN>
</DIV>


903 名前: Name_Not_Found 投稿日: 02/01/14 16:21 ID:daRtzNtg
<hr>を左に位置させたいんだけど
hr {
align: left;
width: 50%;
}
で、上手くいかないんです。
助けてくらはい。


904 名前: Name_Not_Found 投稿日: 02/01/14 16:24 ID:oa/qDpeR
align なんて無いんじゃ・・・・

hr{
width:50%;
margin-left:0;
margin-right:auto;
}


905 名前: Name_Not_Found 投稿日: 02/01/14 16:29 ID:daRtzNtg
>>904
ども。
でも上手くいかない…なんでだろ?


906 名前: Name_Not_Found 投稿日: 02/01/14 16:35 ID:5jNlNJiq
>>904-905
hr{text-align:left}を追加してみ。


907 名前: Name_Not_Found 投稿日: 02/01/14 16:43 ID:daRtzNtg
>>906
うぉう出来た。ありがと。


908 名前: Name_Not_Found 投稿日: 02/01/14 21:24 ID:9uXNLIjQ
DreamWeaverでテーブルのボーダーを指定したんですが、NS6.2とIE5で見た目が違うんですが、どうしたらいいのでしょう?

tdの定義>ボーダー>左右上下 1ピクセル カラー#CCCCCC

とやるのですが、この状態だとNSできちんと見えるのですが、IEだと何も見えません。

ちなみにMac。

HTML初心者なので、的はずれな質問かも知れませんが、どなたか教えて下さい。

薄い色の四角い枠でテキスト囲みたいだけなんですが、やり方自体違うのかな?


909 名前: Name_Not_Found 投稿日: 02/01/14 22:08 ID:shssQHkK
>>902
ここはヲチ板じゃないんだから、そのサイトがいつ更新されたかは
関係ないよ。
もともとそのサイトが話に出たのは、背景の文字を固定したい、という
ことだったよね。"position: fixed"を加えれば、一応、対応している
ブラウザでは希望は満たされそうだ。
ただ、縦方向の位置合わせだけど、line-height × 行数だけmargin-bottomを
マイナスにするというやり方は、行数があらかじめわかっていないと
使えないんじゃないかな。そのサイトの場合は「謹賀新年」を一字一行に
分けているので、4行ということがわかっているけれど、一般性は
ないよね。

>>908
スレ違い
http://pc.2ch.net/test/read.cgi/hp/1007610142/l50


910 名前: Name_Not_Found 投稿日: 02/01/14 22:09 ID:eRxCwZuK
overflowだけど、visible、hidden、auto、scroll …まだあったっけ?
これらってie5でも全部機能します?
ie6にしてしまい自分では確認できんので教えてください


911 名前: Name_Not_Found 投稿日: 02/01/14 22:10 ID:Sa9MhKtL
ありがとう!


912 名前: Name_Not_Found 投稿日: 02/01/14 22:14 ID:3meOvflL
>910
visibleってデフォルトのハズなんだけど、
指定無しでは縦スクロールバーは常に見えてるが
visibleを指定しても overflow-y:auto; のように解釈されてるような・・・。

当方、Win98SE IE5.5SP2


913 名前: Name_Not_Found 投稿日: 02/01/14 22:17 ID:LTJ0MbW9
>>908
この野郎!css使うな呆け!W3C信者のお仲間入りはやねてねo
テーブルネストでお願いo
☆☆☆IE4〜6、NN4、NN6で確認済み☆☆☆

<!--↓枠の色はbgcolorで指定ねo-->
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<!--
↓枠のサイズはcellspacingで指定ねo背景色はもちbgcolorで指定o
 widthを指定する場合コッチに指定ネ☆-->
<table border="0" cellspacing="1" cellpadding="10" bgcolor="#FFFFFF">
<tr><td>
これにしてお願い...☆(はあと
</td></tr>
</table>
</td></tr>
</table>

あ、ドキュソ宣言もやめてねo
Dreamweaverだと大丈夫だがo


914 名前: Name_Not_Found 投稿日: 02/01/14 22:19 ID:3meOvflL
ごめ、912は無視して。
bodyに指定したときの話してました。。。


915 名前: Name_Not_Found 投稿日: 02/01/14 22:19 ID:cywOolfy
>>910
対応表、見ようね。
http://www.zspc.com/documents/css2/display/overflow.html


916 名前: Name_Not_Found 投稿日: 02/01/14 22:26 ID:C65V6HnZ
CSSなんてどうせOFFにしているし…。
だいたいONにしてる奴なんかいるのか?


917 名前: 913 投稿日: 02/01/14 22:26 ID:LTJ0MbW9
間違ったわ☆呆けッ!!
<!--↓枠の色はbgcolorで指定ねo枠のサイズはcellspacingで指定ねo-->
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
<tr><td>
<!--
↓背景色はもちbgcolorで指定o
 widthを指定する場合コッチに指定ネ☆-->
<table border="0" cellspacing="0" cellpadding="10" bgcolor="#FFFFFF">
<tr><td>
これにしてお願い...☆(はあと
</td></tr>
</table>
</td></tr>
</table>

ウトゥー


918 名前: 912 投稿日: 02/01/14 22:32 ID:3meOvflL
>910
お詫びにテストした。IE5.5SP2
http://www.kiss-kiss.net/overflow.png


919 名前: Name_Not_Found 投稿日: 02/01/14 22:35 ID:cywOolfy
>>916-917
アホくさ。
CSSなら簡単なのに……
<div style="border:1px solid #ccc">
テキスト
</div>

いまだにテーブルレイアウトだけに執着してる奴ぁご苦労さん。


920 名前: 910 投稿日: 02/01/14 22:44 ID:d6+8xsM0
>912 >915
どうもありがとうございまっす!
912さん画像まで…ほんとに感謝します。おかげで今日は良く眠れそうです


921 名前: Name_Not_Found 投稿日: 02/01/14 22:46 ID:daRtzNtg
なんとか出来たと思い、NN4.xと6.xでチェックしたら
…なんか目も当てられない状況になっていたのですが…

これは鬱氏する以外に方法が無いものでしょうか?


922 名前: Name_Not_Found 投稿日: 02/01/14 22:52 ID:cywOolfy
>>921
ハア? 何が出来たって?
名前と用件を述べてくれ。


923 名前: 912 投稿日: 02/01/14 23:00 ID:3meOvflL
>920
じゃ画像消しますね。
ちなみにテストでheightは全て70pxだったんですが
visibleでIEでは、背景色も一緒に幅が広がってましたが
NN6だと背景色は伸びないので注意して下さい。

>921
多分、ボックスサイズの実装の違いかな?
HTML * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
これでも追加しとくとよろし。
NN4は知らんが。


924 名前: Name_Not_Found 投稿日: 02/01/14 23:08 ID:cywOolfy
>>921>>903か?
あのな、>>904>>906を「追加」指定するんだよ。
hr{margin-left:0}はNN6・Opera向け記述、
hr{text-align:left}はWinIE向け記述、
NN4は水平線にスタイルシート効かない。
以上。


925 名前: Name_Not_Found 投稿日: 02/01/14 23:20 ID:9uXNLIjQ
>>913

ありがとうございます。何とか出来ました。


926 名前: Name_Not_Found 投稿日: 02/01/15 17:56 ID:sCWBFCeU
h1とかh2とかにborder-bottom指定すると行全体に下線が引かれて
しまうのですが、文字部分だけに下線を引くことってできませんか?


927 名前: Name_Not_Found 投稿日: 02/01/15 18:02 ID:9vZjiprg
下線が引きたいだけなら text-decoration とか、
色とか太さとかもいじりたいから border-bottom のが良い、というのなら
span で囲ってそっちに設定するとか。


928 名前: Name_Not_Found 投稿日: 02/01/15 18:03 ID:qlAWkpiR
>>926

width指定したらどうですか?

例)
<h1 style="width: 1em;border-style: solid;border-width:0 0 1px 0;border-color:black">あ</h1>


929 名前: 926 投稿日: 02/01/15 18:34 ID:sCWBFCeU
>>927-928
どうもありがとうございます。やっぱり基本は行全体なんですね。
spanでくくるかwidth指定するか、はたまたtext-decorationで
片づけてしまうか色々いじりながら考えてみます。
早速のレスありがとうございました。


930 名前: Name_Not_Found 投稿日: 02/01/15 18:50 ID:1s0bLhw9
>>928
文字数が変わるたびに長さを再指定するのがやや鬱だな・・・
926がその労を厭わないというなら別にいいけど。


931 名前: Name_Not_Found 投稿日: 02/01/15 23:27 ID:BqViac3+
画像のサイズを % 指定したいんですが、上手くいきません。

img.thumbnail {
width: 30%;
height: 30%;
}

これだと、親要素の大きさの 30% になっちゃいますよね。
自分のサイズの 30% にするにはどうしたらいいんでしょう。

あと、
.something {
padding: 2em - 1px; /* 2em より 1ピクセル短かく */
}
みたいなことするにはどうしたらいいんでしょう?

.something {
padding: 2em;
}

.anything {
padding: 2em - 1px;
border: 1px solid black;
}

みたいにして、 .something と .anything を同じ大きさにしたいのです。
もっとも中身に依存はしますけど。


932 名前: Name_Not_Found 投稿日: 02/01/15 23:58 ID:HE38q6Dk
BBSのメッセージ欄のスタイルに
background: #000000; filter:Alpha(opacity=60)
としてフィルタをかけて半透明にしたのですが、
テーブルの中全体が半透明になってしまいます。
背景だけを透かせて文章は半透明にしたくないのですが、
CGIのHTML書き出し部分を変更せずにそのようなことは可能でしょうか?


933 名前: Name_Not_Found 投稿日: 02/01/16 00:21 ID:YPVhjVDo
>>932
>>733 あたりどうぞ。

.message {
透過指定
}

.message *{
透過解除
}

ってかんじかな?

フィルタ周りは使ったことないんでよく判ってる人キボン。


934 名前: Name_Not_Found 投稿日: 02/01/16 00:36 ID:UpmFb/Tv
>>932
背景にアルファ埋め込みの透過PNGを使うのが一番イイと思う。
対応しているブラウザ(NS6など)では透過されるし、未対応の場合は普通の背景画像になるし。


935 名前: Name_Not_Found 投稿日: 02/01/16 00:48 ID:oT844DWd
>>933>>934

一応テーブル無いでも再度不透明のアルファを設定したのですが、
どこか間違っていたのかもしれません (^-^;
透過PNGは思いつきませんでした。試してみようと思います。

お早いレスありがとうございました♪


936 名前: Name_Not_Found 投稿日: 02/01/16 01:36 ID:YPVhjVDo
>>935
相対or絶対指定が抜けてたってやつじゃないの?


937 名前: Name_Not_Found 投稿日: 02/01/16 01:38 ID:4+fqp3pV
>>926
h1{
display:inline;
border-bottom:solid thin black;
}


938 名前: Name_Not_Found 投稿日: 02/01/16 01:41 ID:YPVhjVDo
>>937
インラインにしちゃうと、微妙に意味が変わっちゃうような。


939 名前: Name_Not_Found 投稿日: 02/01/16 02:46 ID:FsqkP48X
>926
h1{
width: 50%; /* ここで調節 */
border:solid thin black;
}


940 名前: 935 投稿日: 02/01/16 03:27 ID:oT844DWd
>>936
その通りみたいです。
相対位置指定を書き加えたらちゃんと適応されました。


941 名前: 投稿日: 02/01/16 13:15 ID:kc1VENIv
>931
前半.自分の(つまりオリジナルの)30% にならない?なるはずだけど.
後半.JavaScript と組み合わせるか IE 限定で expression とかいうのを使うか.
いずれにしても規格内の CSS だけでは無理だと思う.


942 名前: Name_Not_Found 投稿日: 02/01/16 14:09 ID:nqdVmOJW
>>941
うーん、当方 Mozilla 9.7 ですが、ウィンドウリサイズすると大きさ変っちゃいます。

後者の方はあきらめました。


943 名前: 941 投稿日: 02/01/16 16:10 ID:kc1VENIv
>942
あ,ほんとだ.仕様書に「containing block を元に計算される」って書いてあるや.
どこかで違うことを読んだような気がしたけど勘違いだったらしい.ごめん.
ということで,これも JS とか使わなきゃだめそうだね.


944 名前: Name_Not_Found 投稿日: 02/01/16 21:08 ID:+/q5cVsx
テーブルで言う、
<table>
<tr>
<td>メニュー</td>
<td>ニュースとか</td>
</tr>
</table>
このような形にしたいので色々駆使しているのですが、どうしてもニュースとか、の部分が
下にいってしまいます。どうすればいいでしょうか?


945 名前: 944 投稿日: 02/01/16 23:53 ID:+/q5cVsx
答えてホスィのでage


946 名前: Name_Not_Found 投稿日: 02/01/17 00:00 ID:lznFZw6m
float: left;


947 名前: Name_Not_Found 投稿日: 02/01/17 00:27 ID:9U1iBnh3
>>946
ども、float:left; と float:right; を両方に入れたらできました。

ただ、左と右の間がすごくあいちゃうんです…
なにか手は無いものでしょうか?


948 名前: Name_Not_Found 投稿日: 02/01/17 00:27 ID:i5BFFOBO
<INPUT TYPE="TEXT" SIZE=20 STYLE="BORDER-STYLE:solid;BORDER-COLOR:white;BACKGROUND:#CCCCFF;" onFocus = "if (document.all)
{ this.style.backgroundColor='orange';this.style.color='#FFFFFF'; }" onBlur = "if (document.all) { this.style.backgroundColor='hotpink';this.style.color='#FFFFFF'; }">
 ボタン全部の外観をこのように変えたいのですが・・・。
離れたときと書き込みしたときに、外観が変わるようにスタイルシートで設定はできないのでしょうか?


949 名前: Name_Not_Found 投稿日: 02/01/17 00:34 ID:XVXo8b6/
>>948
A要素をdisplay: block 化して、width、heightの設定で出来ると思う。


950 名前: Name_Not_Found 投稿日: 02/01/17 00:35 ID:YlOtV//B
>>947
td{
display:inline;
margin:0;
}


951 名前: Name_Not_Found 投稿日: 02/01/17 00:36 ID:YlOtV//B
>>948
つまりどうしても擬似クラスを使いたくないと?


952 名前: 948 投稿日: 02/01/17 00:44 ID:i5BFFOBO
すいません、ほんと初心者なんで、わからないんです。
 擬似クラスとか
A要素をdisplay: block 化して
とかさっぱりわからないです。(汗)


953 名前: Name_Not_Found 投稿日: 02/01/17 00:44 ID:S6ZWOzmI
>>947
いっそのこと

<ul>
<li>メニュー</li>
<li>ニュースとか</li>
</ul>

li {
list-style-type: none;
display:inline;
}
とか


954 名前: 948 投稿日: 02/01/17 00:47 ID:i5BFFOBO
どっかネットで拾ってきます。。。
 すいませんでした。


955 名前: 947 投稿日: 02/01/17 00:49 ID:9U1iBnh3
>>950
すいません。テーブルレイアウトをやめるためになるべく
divで指定しているのですが…こんな感じで。

div.a{
color:#000000;
background-color:transparent;
padding-top:1em;
padding-bottom:1em;
width:15%;
float:left;}

div.b{
width: 50%;
height: 35em;
margin-bottom: 2em;
border:1px solid #CC9966;
float: right;}

これをくっつけたいのですが―
我儘いってすいません。


956 名前: 947 投稿日: 02/01/17 00:50 ID:9U1iBnh3
>>953
あーなるほど。
やってみます。


957 名前: Name_Not_Found 投稿日: 02/01/17 00:55 ID:YlOtV//B
>948 まだいるか?

a{
color:transparent; /* 任意に */
background:#ccccff;
border:solid #ffffff 1px;
}
a:visited{
color:#ffffff;
background:#ff69b4; /* hotpink */
}
a:focus{
color:#ffffff;
background:#ffa500; /* orange */
}

意図したものになってなさげ。後は自分でどうにかしてみぃ


958 名前: 948 投稿日: 02/01/17 01:16 ID:i5BFFOBO
>>957
本当にすいませんでした。m(__)m
 自分でよく調べてみましたら、ここにわたしの求めていたようなことが書いてありましたので、
下記のアドレスのサイトにある書きこみを参考にしようと思いました。
 本当に親切にありがとうございました。m(__)m
http://bbs.otd.co.jp/wizard/bbs_tree?base=3947&range=1


959 名前: Name_Not_Found 投稿日: 02/01/17 07:47 ID:dJWzlm5n
>>947
両方にfloat:left;で。

ところで、次スレッドの雛型だれか作って。


960 名前: 次スレ1 投稿日: 02/01/17 14:35 ID:2QAW1FKR
/*【CSS】 スタイルシート質問スレッド【6】*/

CSSに関する質問はこちらへ。
>>2 関連リンク集。参考にすれ。

【過去ログ】
#1 { http://mentai.2ch.net/hp/kako/974/974934062.html }
#2 { http://natto.2ch.net/hp/kako/984/984113434.html }
#3 { http://natto.2ch.net/hp/kako/992/992992981.html }
#4 { http://pc.2ch.net/test/read.cgi/hp/996828258/ }
#5 { http://pc.2ch.net/test/read.cgi/hp/1005047493/ }

【CSSと関係ない初心者質問はこっちで】
☆ Webサイト制作初心者用スレッドver15 ☆
 http://pc.2ch.net/test/read.cgi/hp/1010524882/

【関連スレ】
・CSS/DHTMLバグ辞典スレッド ver2.0
 http://pc.2ch.net/test/read.cgi/hp/991666454/
・/* CSSでイケてるデザインサイト { number: 3; } */
 http://pc.2ch.net/test/read.cgi/hp/1010800617/
・* CSS { イケてるスタイルを:"作れ";}
 http://pc.2ch.net/test/read.cgi/hp/991906104/
・代替スタイルシートに萌え〜
 http://pc.2ch.net/test/read.cgi/hp/991400015/
・CSSコミュニティの功罪を評価するスレ 3rd style
 http://pc.2ch.net/test/read.cgi/hp/1010065020/


961 名前: 次スレ2 投稿日: 02/01/17 14:37 ID:2QAW1FKR
【仕様書】
・CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1-961217.html
・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

【その他資料など】
・W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
・ごく簡単な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
・三日坊主++の部屋
 http://east.portland.ne.jp/~sigekazu/
・CSS Laboratory対応表・一覧
 http://www.inter-cool.net/~phantasm/wdzone/note/index.html
・CSSでイケてるデザインサイトリンク集
 http://members.tripod.co.jp/monar01/

1個追加してみた。リンクチェックはしてない。


962 名前: Name_Not_Found 投稿日: 02/01/17 14:39 ID:2QAW1FKR
>>960
過去ログのURLの前、全角になっちゃってた。シパイ。


963 名前: 投稿日: 02/01/17 15:43 ID:q02I9PiK
功罪評価スレッドは入れなくてもいいと思う….
あと,CSS関連 の FAQ とかあったっけ?あったら 3-5 あたりに.


964 名前: 947 投稿日: 02/01/17 17:03 ID:9U1iBnh3
>>959
出来た!!
皆様。本当にありがとうございました。


965 名前: Name_Not_Found 投稿日: 02/01/17 20:31 ID:YY8q5iIb
>>963
功罪スレは要らないだろ…それだったらStrict-HTMLスレにしろYO!
http://pc.2ch.net/test/read.cgi/hp/1008380243/l50


966 名前: Name_Not_Found 投稿日: 02/01/17 21:07 ID:zyTVdM5q
Strictもいらんだろ・・・! 


967 名前: Name_Not_Found 投稿日: 02/01/17 21:38 ID:2OcKi93P
strictHTML+CSSが理想形だとすると関係なくもない。
けどあっちはかなりディープだし、敢えて貼ることもないんじゃ。


968 名前: 963 投稿日: 02/01/17 22:39 ID:6OUat5i4
>965
いや,僕に言われましても….

FAQ 的なものを考えてみたけど,
・table のセンタリング
・スクロールバーの色変え
・擬似フレーム
ってところか.やっぱ別になくてもいいか.


969 名前: Name_Not_Found 投稿日: 02/01/17 22:50 ID:YY8q5iIb
>>966-967
同意。

>>968
FAQは欲しい気がする。

# それと、>>1が長くなりすぎると(l50とかで)読みづらいから、
FAQは>>2-4、関連スレ等は>>5-6あたりに纏めてホスィ。

--次スレ用テンプレ--

Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
質問は内容を吟味して、正しい日本語で。
特定の環境で問題が生じる場合には、ブラウザ・OSのバージョンを明記して下さい。
FAQは>>2-4、関連スレ等は>>5-6あたりにあります。

って感じで。


970 名前: Name_Not_Found 投稿日: 02/01/17 23:10 ID:bwXMMlTi
Dreamweaver3でCSS指定、NS6.2で確認。でもIE5では全く反映しません。
バックグランドイメージやフォント色など基本的な指定なので、IE5が未対応とは思えませんし、
他人が作ったCSSのWebサイトは問題なく閲覧できます。
特にバックグラウンドイメージはまっさらなWebページを作成し、bodyタグに指定するだけで(他に余計なことしない)も
表示してくれません。

何か原因になりそうなこと、CSSの指定で気を付けることありませんか?
ちなみにMac版です。


971 名前: 投稿日: 02/01/17 23:19 ID:6OUat5i4
>969
ふむ.そうすると FAQ に入れるべきはなんだろう?
あと「特定の…」の一文,常に環境を書いてもらうようにしたほうがいいと
思うので(特定の環境かどうかわからない場合も多いだろうから)
「OS やブラウザによって結果が異なることがあるので質問の際には OS や
ブラウザのバージョンを明記してください」くらいでどうでしょう?

>970
DW の吐いたCSS 見ないことにはなんとも….
あるいは DW 専用スレッドのほうが答えてくれるかも.
 Dreamweaver教えます♪(その3)
 pc.2ch.net/test/read.cgi/hp/1007610142/



972 名前: 970 投稿日: 02/01/18 00:11 ID:UX9Z+WFq
>>971

<style type="text/css">
<!--
body { background-attachment: fixed; background-color: #000000; background-image: url(file:///〜省略〜.jpg);
background-repeat: no-repeat; background-position: left top}
-->
</style>

で他の部分は新規ファイル状態からいじっていません。
やはりこれだけでもIE5(Mac)ではただ背景が真っ黒になるだけです。

うーん、特に問題あるとは思えないんですけどね。
Netscapeではきちんと見えてるし・・・




973 名前: Name_Not_Found 投稿日: 02/01/18 00:52 ID:ZJsWxP6D
>>970
うちのMacIE5ではちゃんと見えるけど?
まさかurl(~)の部分、アップした後もfile:///にしてるんじゃないよね?
ていうか相対URIにすれば大丈夫だと思われ。


974 名前: Name_Not_Found 投稿日: 02/01/18 01:01 ID:z+ySLKFs
FAQに擬似フレームはあった方がいいかも。


975 名前: Name_Not_Found 投稿日: 02/01/18 02:28 ID:H48SXVEz
あのー、質問したいんですけどレスが950すぎてるので
次スレにしたほうがいいですよね?


976 名前: Name_Not_Found 投稿日: 02/01/18 03:43 ID:jl+TllFs
【FAQ】
Q.tableをセンタリングするには?
A.下記を読んで下さい。
http://pc.2ch.net/test/read.cgi/hp/1005047493/337-354
http://pc.2ch.net/test/read.cgi/hp/1005047493/359-362
http://pc.2ch.net/test/read.cgi/hp/1005047493/416-449
http://pc.2ch.net/test/read.cgi/hp/1007538322/445-484
http://pc.2ch.net/test/read.cgi/hp/1005047493/583-584
http://tancro.stp-1.com/stylesheet/n6_center.html


977 名前: Name_Not_Found 投稿日: 02/01/18 06:11 ID:1I5ZDuW3
>>976
これも追加。
http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp#cssenhancements_topic6


978 名前: Name_Not_Found 投稿日: 02/01/18 06:43 ID:/FD2wE6u
>>976-977
まとめると――
旧来の<center></center>で括る代用としては、

1.<div align="center"></div>で括る。しかしStrictでは非推奨。

2.<div></div>で括ってそのdivに対して、もしくはセンタリングしたい要素の
親要素に対して、text-align:center;を指定する。
IE(互換モード)・NN4で有効だが、しかし"text"-alignなのだから
ブロック要素の中身(インライン・テキスト)だけでなくブロック要素自体をも
整列するこの動作は、仕様書の誤った解釈であった。
Mozilla/NN6にもこの誤った解釈をさせたい場合、text-align:-moz-centerを指定。

3.センタリングしたい要素に、margin-left:auto;margin-right:autoを指定。
Mozilla/NN6・Opera・WinIE6標準準拠モードで有効。これが仕様書通りの正しいやり方。
但しMacIE5ではblockquote要素・ul要素・ol要素はセンタリングされないし、
「margin: 50px auto」みたいに一括指定した場合、table要素は中央寄せされない。
MacIE4.5では、table要素・div要素・ul要素・ol要素・dl要素で左右のマージンを
「auto」にしてもセンタリングされない。

WinIE6以降実装の標準準拠/互換モードについてはDOCTYPE宣言でスイッチする。
http://www.microsoft.com/japan/developer/articles/dnie60/html/cssenhancements.asp#cssenhancements_topic2


979 名前: Name_Not_Found 投稿日: 02/01/18 07:03 ID:/FD2wE6u
>>971
FAQに段組のやり方の参考サイトを挙げておきたい。
テーブル・レイアウトから卒業するには必須だし。擬似フレームより頻出でしょ。
要はfloatとpositionの利用法ですが。
http://dfj.cool.ne.jp/html/column.html
http://www.skipup.com/~l-_-l/web/
http://homepage.mac.com/csstyler/css-multicol.html
http://www32.tok2.com/home/eyeeye/css001.html
http://www.motchie.com/article/multicolumn.html
http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html


980 名前: Name_Not_Found 投稿日: 02/01/18 10:01 ID:D6XA1Hl6
CSSの書き方で、
例えば、「A.xxxx」と「.xxxx a」は同じですよね?
でも、「.xxxx a」の場合だと、先にページ全体のa要素を指定していたら、
適用されなかったんですけど、「A.xxxx」の場合は大丈夫でした。
なにか違いがあるのでしょうか?
質問の意味がわからなかったらごめんなさい・・。


981 名前: Name_Not_Found 投稿日: 02/01/18 10:07 ID:D6XA1Hl6
980です。
ちなみにIE6です。


982 名前: 投稿日: 02/01/18 10:15 ID:WHYBlzZx
>980
>例えば、「A.xxxx」と「.xxxx a」は同じですよね?
違います.
・ a.xxxx : a 要素で xxxx というクラス名をもつもの
・.xxxx a : どんな要素であれ xxxx というクラス名を持つもの(p でも div でも)の中にある a 要素


983 名前: Name_Not_Found 投稿日: 02/01/18 10:45 ID:D6XA1Hl6
>982
違うんですね・・。ありがとうございます!

でも、どういう時にどういう風に使い分ければいいのかいまいち??です。
もっと勉強します。




984 名前: Name_Not_Found 投稿日: 02/01/18 11:40 ID:04EZr0wl
疑似フレームの例としてこれどうよ?

例)http://www17.u-page.so-net.ne.jp/qb4/chiharu-/files/frame.html
その方法)http://www17.u-page.so-net.ne.jp/qb4/chiharu-/overflow.html



985 名前: 1000 投稿日: 02/01/18 12:28 ID:8B2Vx6vk
1000


986 名前: Name_Not_Found 投稿日: 02/01/18 15:40 ID:klCqTlF7
input.hankaku { ime-mode: disabled }
こんな事出来るんだ。便利だなcssは。


987 名前: Name_Not_Found 投稿日: 02/01/18 15:48 ID:jB8owuLx
>>986
IEのみだけど


988 名前: Name_Not_Found 投稿日: 02/01/18 17:59 ID:WZmqPTSS
フォントサイズはデセンダからダイアクリティカルまでの距離というcss1と
行間をつめた場合のベースライン間の距離というcss2と2こあっけど
どっちよ?


989 名前: Name_Not_Found 投稿日: 02/01/18 21:09 ID:ixuuGFk/
ユーザースタイルシートかなにかで
リンクを張ってある画像をすべて border=0
にすることはできますでしょうか?
htmlであらわすと↓のような感じにしたいのですが・・・。

<a href="link.html"><img src="ファイル名.gif border=0"></a>


990 名前: Name_Not_Found 投稿日: 02/01/18 21:11 ID:iDZms9/9
新スレ作成キボンヌ


991 名前: Name_Not_Found 投稿日: 02/01/18 21:12 ID:QJf6nF1d
a img { border: 0 none; }


992 名前: 991 投稿日: 02/01/18 21:13 ID:QJf6nF1d
>989へのレスでした


993 名前: Name_Not_Found 投稿日: 02/01/18 21:13 ID:ixuuGFk/
ありがとうございました♪


994 名前: 1000 投稿日: 02/01/18 21:46 ID:f2w8Z9ar
1000


995 名前: Name_Not_Found 投稿日: 02/01/18 22:04 ID:Y0mC9zbV
うわ、1000ギリギリじゃん。
というわけで新スレ立てました。

/* CSS、スタイルシート質問スレッド【6】 */
http://pc.2ch.net/test/read.cgi/hp/1011358982/l50



996 名前: Name_Not_Found 投稿日: 02/01/18 22:11 ID:iDZms9/9
とりあえずさげで1000を狙ってみる


997 名前: Name_Not_Found 投稿日: 02/01/19 00:05 ID:ZXpTBWBB
記念カキコ


998 名前: Name_Not_Found 投稿日: 02/01/19 00:06 ID:ZXpTBWBB
なんかID(・∀・)イイ!!


999 名前: Name_Not_Found 投稿日: 02/01/19 00:06 ID:ZXpTBWBB
ここで去る。誰かどぞ。


1000 名前: Name_Not_Found 投稿日: 02/01/19 00:13 ID:hBLRIZgG



1001 名前: 1001 投稿日: Over 1000 Thread
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。



2ちゃんねるは、ここのサーバを使ってるです。。。