/* CSS、スタイルシート質問スレッド【12】 */(2ちゃんねる)

FTP、CGI、SSI、telnetが自由に使える超高速レンタルサーバ。
工夫しだいで、楽しさ100倍。 www.binboserver.com
月額千円サーバ | サブドメインコース | BIGなサーバ

サブドメインコース:CGIやFTPが使いたい・お金を掛けたくない人のために。
 *****.syo-ten.com *****.gasuki.com *****.zansu.com
 お好きな名前を無料で使えます。早い者勝ち。

人気サイト 月額千円サーバ:.com .net .org で取得できます。.JPドメイン大歓迎!
 超高速・高機能サーバを1000円で!使ってみれば、分かります。

BIGなサーバ:Big なBig なサーバー。充実したサポートをお求めの方へ。
 インターネットでご活躍の皆様へ、そしてご活躍予定の皆様へ。
2ちゃんねるは、このサーバを使っているです。

■掲示板に戻る■ ■過去ログ倉庫めにゅーに戻る■

/* CSS、スタイルシート質問スレッド【12】 */
1 名前: 前スレの980 投稿日: 02/10/18 15:29 ID:???
Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
関連スレやリンクは>>2-5あたりに。

■■■■■ 注意 ■■■■■
質問者 (特に「初心者」) は、
必ず>>4にある解説サイト (かなりわかりやすい) で
 勉 強 してください。

質問の前に、まず >>5 の【FAQ】を参照してください。
【FAQ】でわからなかった場合は、過去ログを検索しましょう。
WinIEの場合は、[Ctrl+F]で検索できます。

また、IE などではまだ対応できていない要素などやバグが多数存在します。
ですので、>>2(関連スレ)の「バグ辞典」に目を通しておきましょう。

また、「環境を書け」とか「ソースは?」と求められたときは
応じるようにしましょう。回答が早く返るようにするためです。
特にNetscapeについては、ヴァージョンについても必ず明記する
ようにしてください。ネスケは、4までと6以降でまったく別物です。

※ マターリ進行推奨 ※

>>2 【前スレ】【過去ログ】【関連スレ】
>>3 【仕様書】【CSS検証】
>>4 【解説など】
>>5 【FAQ】


2 名前: 1 投稿日: 02/10/18 15:30 ID:???
【前スレ】
 http://pc3.2ch.net/test/read.cgi/hp/1031773943/

【過去ログ】
 http://mentai.2ch.net/hp/kako/974/974934062.html
 http://natto.2ch.net/hp/kako/984/984113434.html
 http://natto.2ch.net/hp/kako/992/992992981.html
 http://pc.2ch.net/hp/kako/996/996828258.html
 http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
 http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
 http://pc3.2ch.net/test/read.cgi/hp/1015474859/
 http://pc3.2ch.net/test/read.cgi/hp/1019881572/
 http://pc3.2ch.net/test/read.cgi/hp/1025346520/
 http://pc3.2ch.net/test/read.cgi/hp/1028646616/

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


3 名前: 1 投稿日: 02/10/18 15:31 ID:???
【仕様書】
・CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1/
・CSS2の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の翻訳(日本語)
 http://www.y-adagio.com/public/standards/css1/toc.htm
・CSS2の仕様書の翻訳(日本語)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html
 http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

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


4 名前: 1 投稿日: 02/10/18 15:32 ID:???
【解説など】
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS1テストスイート
 http://www.doraneko.org/css1test/
・とほほのスタイルシート入門
 http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・CSS Laboratory対応表・一覧
 http://is.vis.ne.jp/charts/index.xhtml


5 名前: 1 投稿日: 02/10/18 15:33 ID:???
【FAQ】

Q: IEで見ると大丈夫なのに、Netscape6(or7)で見ると、横スクロールバーが出てしまうのですが……

A: WinIEのボックス・モデルが間違ってるからです。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width
widthプロパティは、要素の内容領域の幅を指定するプロパティですが、
Windows版 Internet Explorer は、ボーダー領域 + パディング領域 + 内容領域 の幅で
計算されてしまいます。
Macintosh版 Internet Explorer 5 や Netscape 6 では正しく計算されます。
Windows版 Inernet Explorer 6 の標準準拠モードでは、正しく計算されるようになりました。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

Q: Netscape6(or7)では、text-alignにcenterを指定してやっても、table(や、その他のブロック要素)をセンタリングできません。IEではセンタリングされるのに……

A: IEの実装が間違っています。くわしくは下記のページをごらんください。

http://anslasax.net/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html


6 名前: Name_Not_Found 投稿日: 02/10/18 17:27 ID:???
>>2はリンク切れ多し。訂正!

【前スレ】
 http://pc3.2ch.net/test/read.cgi/hp/1031773943/

【過去ログ】
 http://mentai.2ch.net/hp/kako/974/974934062.html
 http://natto.2ch.net/hp/kako/984/984113434.html
 http://natto.2ch.net/hp/kako/992/992992981.html
 http://pc.2ch.net/hp/kako/996/996828258.html
 http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
 http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
 http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
 http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
 http://pc3.2ch.net/test/read.cgi/hp/1025346520/
 http://pc3.2ch.net/test/read.cgi/hp/1028646616/

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



7 名前: Name_Not_Found 投稿日: 02/10/18 17:34 ID:???
追加参考ページ

CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.tripod.co.jp/index.html

Web標準普及プロジェクト(特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/index.html


8 名前: Name_Not_Found 投稿日: 02/10/18 17:43 ID:???
( ´∀`)< CSS でイケてるデザインサイトリンク集
 http://webcafe.zive.net/~css/

* CSS { イケてるスタイルを:"作れ";} 発表所
 http://www32.tok2.com/home/css/clip/joyful.cgi

ブラウザによる振り分け
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua


9 名前: Name_Not_Found 投稿日: 02/10/18 19:38 ID:???
>>1-8乙。

ついでにage


10 名前: Name_Not_Found 投稿日: 02/10/18 20:32 ID:53E0J7kL
www.cssmaker.com

yahooに載ってたけど使えるの?



11 名前: Name_Not_Found 投稿日: 02/10/18 20:52 ID:???
>>10
http://www.cssmaker.com
背景色を画像に頼ってるね。background-colorでないから、画像切ると読みにくくて……。
CSS流布サイトとしてはいかがなものか。
それに結局は色とフォントの指定だけでしょ?


12 名前: Name_Not_Found 投稿日: 02/10/18 20:57 ID:???
http://www.cssmaker.com/css/
font-sizeをpxとpt単位でしか指定できない点でもう失格。
固定はダメ。%かemですよ、やっぱり。


13 名前: Name_Not_Found 投稿日: 02/10/18 21:05 ID:???
>>10 ここでも読んで出直せ、と。

「フォント名の指定は一般名と併用するべきです」
http://www.mozilla.gr.jp/standards/webtips0007.html


14 名前: Name_Not_Found 投稿日: 02/10/18 22:23 ID:IasG4rAo
どっかのスレで「クラス名に"right"はよくない」ってみたんだけど、
なんでなんですか?

数字を使うのはよくないってのは知ってるんですが。


15 名前: Name_Not_Found 投稿日: 02/10/18 22:29 ID:???
>>14
Strict教徒のみなさんに訊いた方がよくわかるのでは。↓
http://pc3.2ch.net/test/read.cgi/hp/1033282702/l50


16 名前: Name_Not_Found 投稿日: 02/10/18 22:34 ID:???
>>14
「右」だから
class、ID名はhtmlの内容に基づいて付けられるべきものです


17 名前: Name_Not_Found 投稿日: 02/10/18 22:47 ID:???
>>16
でもまあ、見栄えを制禦するためのCSSなんだから、
見栄えから来たclass名があってもいい気がするけどね、私は。


18 名前: Name_Not_Found 投稿日: 02/10/18 22:50 ID:???
>>17
代替シートはどうします?
「右」と名付けられた要素がどのシートでも右に来るとは限らないでしょう


19 名前: Name_Not_Found 投稿日: 02/10/18 22:54 ID:???
>>17
いや、class属性の値はCSSだけじゃなくて、HTMLにも書かれるものだから。
というか、そもそもclass属性自体がCSSのために書くものじゃないし。


20 名前: Name_Not_Found 投稿日: 02/10/18 23:00 ID:???
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.2
> The class attribute has several roles in HTML:
> - As a style sheet selector (when an author wishes to assign style information to a set of elements).


21 名前: Name_Not_Found 投稿日: 02/10/18 23:11 ID:???
>>18
ハァ?


22 名前: Name_Not_Found 投稿日: 02/10/18 23:16 ID:???
>>21
話が見えてない厨房はすっこんでて下さい。


23 名前: Name_Not_Found 投稿日: 02/10/18 23:24 ID:???
>>14
> どっかのスレで「クラス名に"right"はよくない」ってみたんだけど、
> なんでなんですか?
見た目の「右」を制御するためのクラス名で無ければ、問題無いと思うよ。
例えば、以下のように。

  <ul>
    <li class="right">稲葉</li>
    <li class="center">飯田</li>
    <li class="left">ラミレス</li>
  </ul>

クラス名も含めて、HTML に見た目を指定する痕跡を残さない方が、
CSS を書く上ではあとあと便利ですよーって話かと。


24 名前: Name_Not_Found 投稿日: 02/10/18 23:29 ID:???
>>14
CSS(3)でそのページを縦書きにしたら「右」でなくなるかも。

ところでクラス名に数字ってほんとによくないの?
先頭でなければいいと思ったけど。


25 名前: Name_Not_Found 投稿日: 02/10/18 23:31 ID:???
たとえば強調したいときに赤くしたので class="red" ってしてたけど
後になって青くして強調しようと思ったときマズーだから
っていうのでもあってるかな?


26 名前: Name_Not_Found 投稿日: 02/10/18 23:34 ID:???
>>25
強調なら<em>や<strong>といってみる


27 名前: Name_Not_Found 投稿日: 02/10/18 23:34 ID:???
>>25

まあそういうことです。てゆーか、それに尽きます。

一時の気まぐれをhtml中に持ち込むと、後々面倒だというのは
やっているうちにわかってくる。


28 名前: Name_Not_Found 投稿日: 02/10/18 23:37 ID:???
一時の気まぐれでなくても後々変えたくなるものは出てくるがね。


29 名前: Name_Not_Found 投稿日: 02/10/18 23:37 ID:???
>>27
確かに面倒だね。確かに。
文書構成・構造の正しい理解がない俺は、いつも後で息詰まってる。
最近、ようやくこなれてきた感じかな。


30 名前: Name_Not_Found 投稿日: 02/10/18 23:38 ID:???
class="red"で赤くしたり、class="right"で右寄せしたりするのは
レガシーな物理マークアップをしてるのと大差ないと思う。


31 名前: 14 投稿日: 02/10/18 23:57 ID:???
たくさんのレス、ありがとうございます。

つまり、クラス名は「どうしたいか」という基準で名前を
つけるのはよろしくない、と。


32 名前: Name_Not_Found 投稿日: 02/10/19 00:11 ID:???
えっ!?


33 名前: Name_Not_Found 投稿日: 02/10/19 01:20 ID:???
いやまあ、彼なりに分かってるんだと思う。


34 名前: Name_Not_Found 投稿日: 02/10/19 02:06 ID:???
>>19
>というか、そもそもclass属性自体がCSSのために書くものじゃないし。

でも、class属性がCSSのセレクタとして以外に利用される場合ってありますか?


35 名前: Name_Not_Found 投稿日: 02/10/19 02:26 ID:???
では実際に、右寄せするだけの指定に対し、みなさんならどんなclass名を付与しますか?
.right {text-align:right;}
とか
.right {float:left;width:50%;}
とかですが。
text-align:left/center/rightをそれぞれmitame1,mitame2,mitame3とするとか?
他にうまい名が浮かびません……。


36 名前: Name_Not_Found 投稿日: 02/10/19 02:26 ID:???
あんたみたいなひとがいるから後方互換がなくなるんです、この野郎。


37 名前: Name_Not_Found 投稿日: 02/10/19 02:28 ID:???



38 名前: Name_Not_Found 投稿日: 02/10/19 02:32 ID:???
>>35
1から読め。根本的にそういう名づけ方はおすすめできない。
どんな要素について右寄せするのか、ということを考えよう。



39 名前: 35 投稿日: 02/10/19 02:37 ID:???
>>38
>どんな要素について右寄せするのか

要素は特に決まってなくて、或る位置のpだったり或る部分のciteだったり任意で、
見た目のデザイン上右寄せしたいものです。
だからclass名が無くて困ってるんです。
どう対処すればいいですか?


40 名前: Name_Not_Found 投稿日: 02/10/19 03:01 ID:???
id振れば?


41 名前: Name_Not_Found 投稿日: 02/10/19 03:08 ID:???
>>40
それだと、セレクタが異様に肥大化することになりますね。
 ID1, ID2, ID3, ……IDn {text-align:right;}
クラス・セレクタ一つだけの簡潔性に如かず。
 .class1 {text-align:right;}


42 名前: Name_Not_Found 投稿日: 02/10/19 03:13 ID:???
>>39
そっちの意味の要素じゃなくて、
右寄せしたい部分の内容に則ったclassを振ればってことでしょ。


43 名前: 35 投稿日: 02/10/19 03:19 ID:???
>>42
>右寄せしたい部分の内容に則ったclassを振ればってことでしょ。
右寄せしたい部分が場合によってさまざまで、
それらの内容に統一された性格が無いわけです。
だからclassを振るにも“right”とでもする以外、案が出ないんですよ。


44 名前: Name_Not_Found 投稿日: 02/10/19 03:36 ID:???
そこまでこだわるなら、デザイン上なぜ右寄せにしたいのか理由を述べなさい、この野郎。


45 名前: Name_Not_Found 投稿日: 02/10/19 03:39 ID:???
発想からして違うな

意味もなくあっちにやったりこっちにやったりすな
としか言えん


46 名前: Name_Not_Found 投稿日: 02/10/19 03:47 ID:???
                         正直おれも>>35といっしょのことしてる(・∀・)イイヨネ


47 名前: Name_Not_Found 投稿日: 02/10/19 03:53 ID:???
classは内容に即したものを与えて、
何を右寄せするかといった選択はCSS側でやればいい。
論理構造とデザインの分離ってそういうことじゃないの?


48 名前: Name_Not_Found 投稿日: 02/10/19 03:59 ID:???
>>5
> Macintosh版 Internet Explorer 5 や Netscape 6 では正しく計算されます。
> Windows版 Inernet Explorer 6 の標準準拠モードでは、正しく計算されるようになりました。
MacIEも正しく計算するのは標準準拠モードのときだけだったはず


49 名前: Name_Not_Found 投稿日: 02/10/19 04:49 ID:???
>>34
スクリプトで特定のclassをふられた要素のコレクションを取得する時などに便利です。



50 名前: Name_Not_Found 投稿日: 02/10/19 04:54 ID:???
>>41
.right { text-align:right; }
よりも
#header, #navigation, #footer { text-align: right; }
のほうがまだマシだとおもう。
ほんの数文字の差で前者を選ぶのはエレガントではない。

idの数が異様に多くてKB単位のセレクタになってしまうのなら、スタイルシートの記述を根本的に考え直した方がいい。
例えば、共通の親にtext-align:rightを指定して、左寄せする部分だけclassなりidなりを指定する、とか。



51 名前: これもやっぱりいけないのかな? 投稿日: 02/10/19 05:28 ID:???
http://www.mozilla.gr.jp/standards/webtips0021.html
↑ここみたいに、floatによる擬似段組を包含する親要素に高さを持たせるために
<br>や<hr>にclear;both;を指定してる。(でないと背景色も見えなくなるからね)
勿論、他のブロックレベル要素があるならそれにclearを指定する。
その場合、シートに .claer {clear:both;} として、
clearさせたい<br>や<hr>やブロックレベル要素にclass="clear"を振ってる。
#main {border:4px double red; background:black;}
.leftcol {float:left; width:49%; background:#ccc;}
.rightcol {float:right; width:49%; background:#ccc;}
.claer {clear:both;}
<div id="main">
<p class="leftcol">左段です</p>
<p class="rightcol">右段です</p>
<br class="clear">
</div>
これもやっぱりいけないのかな?


52 名前: 51 投稿日: 02/10/19 05:32 ID:???
つまり"right"と同様、その見た目の形式によって"clear"とclass名を振ってるわけで。
適用される要素はページによって様々で、一定しないから、内容による名前の付与ができない。
いい方法があるならどうかご教示ください。


53 名前: Name_Not_Found 投稿日: 02/10/19 06:28 ID:???
>>50
漏れは
.right { text-align:right; }
でいいや〜。
エレガントではないけど、CSS的に間違ってるかもだけどスマートだし〜。
名前考えるのめんどっちぃし〜。
〜〜〜ヽ(´ー`)ノ


54 名前: Name_Not_Found 投稿日: 02/10/19 08:26 ID:???
>>53
開き直り(・A・)イクナイ!


55 名前: Name_Not_Found 投稿日: 02/10/19 09:28 ID:???
最初に書くときはめんどっちいし適当でいいや〜
と思うんだけど、あとでスタイル変えたくなったときに泣くハメに

スタイル変更するたびにHTMLにまで手を加えなけりゃならんのは
「論理構造とデザインの分離」とは言えない


56 名前: Name_Not_Found 投稿日: 02/10/19 10:05 ID:???
定義語リストを使って、例えば図のようなセンタリング
(dtとそれに続くddを1行にして、その行全体をセンタリング)をするには
どのようなCSSにすればいいでしょうか?

dtの内容=●、ddの内容=○

     ●●○○○○○○
   ●●●●●○○○○○○○
    ●●○○○○○○○○
  ●●●●○○○○○○○○○○
     ●●●●○○○○


57 名前: ◆zkraGArAss 投稿日: 02/10/19 11:39 ID:???
>>56
DL要素にセンタリングして、
DT、DD要素に色つけてマージンを0にする。
で、ディスプレーはインライン。


dl{ text-align:center;}
dt{ color:#000; display:inline; margin-right:0;}
dd{ color:#f00; display:inline; margin-left :0;}
--ソース--
<dl>
<dt>YOYO</dt><dd>YOYOYOYOYO</dd><br>
<dt>YOYO</dt><dd>YOYOYOYOYO</dd><br>
<dt>YOYO</dt><dd>YOYOYOYOYO</dd><br>
<dt>YOYO</dt><dd>YOYOYOYOYO</dd><br>
</dl>

こんなんでどうよ。


58 名前: Name_Not_Found 投稿日: 02/10/19 12:54 ID:???
>>57
dl直下のbrは不正です。


59 名前: Name_Not_Found 投稿日: 02/10/19 12:56 ID:???
<br>かよ…


60 名前: Name_Not_Found 投稿日: 02/10/19 12:57 ID:???
>>52
.leftcol > .col-main (左のカラムが本文の場合)
.rightcol > .col-menu
.clear > .clearer

内容によっては
.leftcol > .col-content
.rightcol > .col-description
かもしれない。

>>52のものとの違いが分かりますか?



61 名前: Name_Not_Found 投稿日: 02/10/19 13:09 ID:???
>>57
あの、既出になりまして大変恐縮なんですが、
DL要素の子になれるのは DT と DD だけじゃないでしょうか。
いえ、HTMLソースを拝見した所 BR があるのが気になりまして…。
そこで提案なのですが、:after 疑似要素で改行を加えてはいかがですか。
  dl{ text-align:center; }
  dt{ display:inline; padding:0; margin:0; font-weight:bold; }
  dd{ display:inline; padding:0; margin:0; }
  dd:after { content:'\A'; white-space:pre; }
対応ブラウザが少ないのは、私の不徳の致すところであります。
今回の件につきましては、これにて御容赦願えませんでしょうか。


62 名前: Name_Not_Found 投稿日: 02/10/19 13:26 ID:???
>>56
dt{display:run-in}
dd{text-align:center}
でいいんじゃねーの?
macのie5とoperaしか対応してないけど


63 名前: 4-4-2 投稿日: 02/10/19 13:31 ID:???
    ●   ●
●      ●
  ●  ●    ○
●       ●
    ●   ●


64 名前: Name_Not_Found 投稿日: 02/10/19 13:43 ID:???
   ●  ワーワー
 ●   ●
●  ○  ●
 ●    ●
    ●●
   ●  ワーワー


65 名前: Name_Not_Found 投稿日: 02/10/19 13:51 ID:???
dtの内容=●、ddの内容=○


66 名前: Name_Not_Found 投稿日: 02/10/19 14:17 ID:Yl71pmeL
CSSの対応について知りたかったので本やWEBサイトを
見てまわりました。
しかし、本によって同じプロパティが対応となってたり、非対応となってたり、
WEBサイトでも同じ状況です。
どれを信用すればいいですか?おしえてください


67 名前: Name_Not_Found 投稿日: 02/10/19 14:41 ID:9r3kkJUF
実際試してみればいいのでは


68 名前: Name_Not_Found 投稿日: 02/10/19 14:50 ID:???
>>67
Windowsなら試せますが、Macまで手が回りません。
それに自分の解釈が合ってるかどうかの自信もありません。
Mozillaが100%正しいってわけでもないみたいですし。


69 名前: Name_Not_Found 投稿日: 02/10/19 14:52 ID:???
じゃあ無理では


70 名前: Name_Not_Found 投稿日: 02/10/19 14:59 ID:???
>>69
そんな…
WEBサイトはともかく、本は金取るくせに
こんないい加減なことでいいのですか…


71 名前: Name_Not_Found 投稿日: 02/10/19 15:06 ID:???
だからよ なんでここで文句言ってんだよ アフォか?
著者に聞けや


72 名前: Name_Not_Found 投稿日: 02/10/19 15:12 ID:???
そんなきわどいプロパティ使わなくても効果的なサイトデザインは十分できると思うがなあ。
あなた自身が本を出すのでもなければ何もそこまで血まなこで情報集めなくても。


73 名前: Name_Not_Found 投稿日: 02/10/19 16:13 ID:???
すいませんでした。文句言いたかったのではなく、
信用できるのを教えて欲しかったのです。
3冊見たら、3冊とも違う事が書いてある所があったので
何なんだこれは?と思った次第であります。

違う事書いてあるのは使わないようにします。


74 名前: Name_Not_Found 投稿日: 02/10/19 16:23 ID:???
>73
3冊にそれぞれどうかいてあったのか書かないことには判断できませんが,何か?

スレ違いっぽいし.↓でも読めば?
役に立つ書籍は?
http://pc3.2ch.net/test/read.cgi/hp/992793435/l50


75 名前: 56 投稿日: 02/10/19 17:45 ID:zy5tZNZ+
レスをいただいた方、ありがとうございます。
>>57さん
<dt>●●</dt><dd>○○○<br /></dd>
とすると、どのブラウザ(IE5.5、NN7、Opera6.05)でもうまくいきました

>>61さん
そう、これです!
たしかにNN7しか正しく表示してくれないのは仕方ありませんね

>>62さん
残念ながらMacでは確認できないもので・・・

>>64-65さん
ちょっとウケました

あまりHTMLに手を加えたくないので、
>>61を軸にどのブラウザでも違和感なく表示させたいと思います


76 名前: Name_Not_Found 投稿日: 02/10/19 17:47 ID:???
>>75
横と縦の関係がはっきりしているからtableでもいいんじゃねえの?


77 名前: Name_Not_Found 投稿日: 02/10/20 01:42 ID:???
>>60
>>>52のものとの違いが分かりますか?

いやあ、わからんね。.clear と .clearer とで何が異なるってのさ?
>>51-52が尋ねたのは.leftcolではなく.clearの方ですぜ)
結局、class="right"と大差無いんでは? 解決になってない。


78 名前: Name_Not_Found 投稿日: 02/10/20 01:45 ID:???
>>61
contentなんかに頼らずとも、<br>を<dd></dd>の中に入れれば済む話やんけ。


79 名前: Name_Not_Found 投稿日: 02/10/20 01:48 ID:???
>>66
対応、非対応の基準が違うだけでしょ。
厳しい人と甘い人、いろいろいるからね。


80 名前: Name_Not_Found 投稿日: 02/10/20 02:02 ID:A6d5k0hl
>>55
なら>>51-52に「論理構造とデザインの分離」する命名法を助言してやりな。

>>66
聞く前に>>4は見たのかね。


81 名前: Name_Not_Found 投稿日: 02/10/20 03:24 ID:???
>>77
煽ってますね。



82 名前: Name_Not_Found 投稿日: 02/10/20 03:40 ID:???
表示に直結する命名を否定したのに clearer じゃ
煽られて当然だな。

> 「論理構造とデザインの分離」する命名法
なんてあるとしても文書それぞれでしょ。
どっかにページうpすれば誰かが適切にアドバイスできるかもねえ。


83 名前: Name_Not_Found 投稿日: 02/10/20 03:59 ID:???
>>82
てゆかbrに論理的なclass名を付けるのは無意味でしょ。
それ自体すでに物理要素だから。



84 名前: Name_Not_Found 投稿日: 02/10/20 04:04 ID:???
違うサイトに置いたcssを読み込んで使うことは不可能?


85 名前: Name_Not_Found 投稿日: 02/10/20 04:56 ID:???
>>84
「違うサイト」とは、異なるWWWサーバのことですか?
サーバAのCSSをサーバBのHTML文書に適用する、といった形でしょうか?
Aが外部からのリクエストに制限を加えていなければ可能ですよ。
一度お試しになってはいかがでしょう。


86 名前: Name_Not_Found 投稿日: 02/10/20 09:18 ID:oJ6U1AhQ
<A> の属性 `TARGET` はあまり薦められない属性です。
と怒られたのですが、CSSでTARGET指定はできるのでしょうか。


87 名前: Name_Not_Found 投稿日: 02/10/20 09:32 ID:???
>>86
無理


88 名前: Name_Not_Found 投稿日: 02/10/20 09:57 ID:???
Final Answer?残念。ぼくが。


89 名前: Name_Not_Found 投稿日: 02/10/20 10:03 ID:???
>>83
>てゆかbrに論理的なclass名を付けるのは無意味でしょ。
>>51をよく読みなはれ。brだけではないと言ってるし。
>clearさせたい<br>や<hr>やブロックレベル要素にclass="clear"を振ってる。
また、なぜbrを使用せざるを得ないことがあるのかは>>51の出したリンク先参照。
http://www.mozilla.gr.jp/standards/webtips0021.html


90 名前: Name_Not_Found 投稿日: 02/10/20 11:02 ID:???
body { color: #000000; background: #f5f5f5 url(../images/hoge.jpg) repeat }で
背景画像の設定を行ったのですが、NN4以外のブラウザで反映されません。相対パスで
指定したのがいけないのか、と絶対パスで記述したものをWebにあげても見たのですが
ダメでした。

記述上の勘違い・誤りがあれば御教授いただけませんでしょうか。よろしくお願いします。



91 名前: Name_Not_Found 投稿日: 02/10/20 11:12 ID:???
自己レスです。
body { background-color: #f5f5f5; background-image: url(../images/hoge.jpg) repeat }

おもいっきり属性が記述されてませんでした。GoLive6のCSS設定機能に頼り切った
のが原因のようです。大変失礼しました。


92 名前: Name_Not_Found 投稿日: 02/10/20 12:05 ID:???
>>83
> clearさせたい<br>や<hr>やブロックレベル要素にclass="clear"を振ってる。


93 名前: Name_Not_Found 投稿日: 02/10/20 12:22 ID:nyOy2LdR
>>90-91
body { background-color: #f5f5f5;
background-image: url(../images/hoge.jpg);
background-repeat: repeat;}


94 名前: Name_Not_Found 投稿日: 02/10/20 12:30 ID:???
>90
GoLiveってよく「外部CSS記述には強い」と聞いていたんだけど、その自動生成ソースは
かなり無茶苦茶ですな。


95 名前: sage 投稿日: 02/10/20 13:02 ID:???
>>92 それ>>89に既出。


96 名前: Name_Not_Found 投稿日: 02/10/20 13:44 ID:???
>>94
90の何がダメなのか、わかんない・・・なんで?
body{color:#000; background:#f5f5f5 url("../images/hoge.jpg") repeat;}
ってダメなの?


97 名前: Name_Not_Found 投稿日: 02/10/20 14:33 ID:???
>>96
別におかしくないな。
>>90-91 >>93 >>94 は一から出直せ。


98 名前: Name_Not_Found 投稿日: 02/10/20 14:36 ID:???
勘弁してくれよ…
どうなってんだこのスレ


99 名前: Name_Not_Found 投稿日: 02/10/20 14:57 ID:???
repeatって何さ。


100 名前: Name_Not_Found 投稿日: 02/10/20 15:00 ID:???
repeatじゃなかった。


101 名前: Name_Not_Found 投稿日: 02/10/20 15:40 ID:???
簡略化プロパティを知らない人がいたのかな?


102 名前: Name_Not_Found 投稿日: 02/10/20 17:18 ID:???
>101
Mac版ネスケ7/IE5.1.6に外部.cssを読み込ませて試したけど、簡略化
プロパティを認識しない。Win版IEとOperaは持ってないから分からん。


103 名前: Name_Not_Found 投稿日: 02/10/20 17:22 ID:???
>93の記述だと、今度はネスケ4.08が認識しない。
正直わけがわからん。面倒だけどネスケ専用.css設定するしかないみたい


104 名前: Name_Not_Found 投稿日: 02/10/20 17:28 ID:???
>>102-103
できたらこちらへも報告していただけませんか。

CSS/DHTMLバグ辞典スレッド ver2.0
http://pc3.2ch.net/test/read.cgi/hp/991666454/l50


105 名前: Name_Not_Found 投稿日: 02/10/20 17:35 ID:???
>>101
「CSS2対応状況ガイド:background-image」によれば――
http://www.zspc.com/documents/css2/colorbg/bgimage.html
Macintosh版 IE 5.0:[○]
「url()」内でURIの前後に「'」をつけた場合は背景画像が表示されない(「background-image: url('back.jpg')」は無効)。




106 名前: Name_Not_Found 投稿日: 02/10/20 18:29 ID:???
簡略化プロパティについてのバグ?CSS質問スレ12より転載

body { color: #000000; background: #f5f5f5 url(../images/hoge.jpg) repeat }

102 名前:Name_Not_Found メェル:sage 投稿日:02/10/20 17:18 ID:???
>101
Mac版ネスケ7/IE5.1.6に外部.cssを読み込ませて試したけど、簡略化
プロパティを認識しない。Win版IEとOperaは持ってないから分からん。


body { background-color: #f5f5f5;
background-image: url(../images/hoge.jpg);
background-repeat: repeat;}

103 名前:Name_Not_Found メェル:sage 投稿日:02/10/20 17:22 ID:???
今度はネスケ4.08が認識しない。
正直わけがわからん。面倒だけどネスケ専用.css設定するしかないみたい


107 名前: Name_Not_Found 投稿日: 02/10/20 18:30 ID:???
報告書こうとして誤爆した、すまそ


108 名前: Name_Not_Found 投稿日: 02/10/20 19:05 ID:???
>>103 >>106
「Netscape Navigator 4.x CSSバグリスト」より
http://cssbug.tripod.co.jp/detail/nn4x/b008.html
>本来、外部スタイルシート内の相対パスはスタイルシートファイルを基準にした
>パスであるが、NN4はこれをリンク元の文書ファイルを基準にしたパスとして扱う。


「ブラウザごとのHTML/CSSバグ?」によれば――
http://www.fromdfj.net/html/html_css_bug.html
NN4 url()
【症状】外部スタイルシートを用いた場合のパスの基準点がCSSファイルではなくHTMLファイル。有名なバグですね。
【回避策】同じフォルダ内におく


109 名前: Name_Not_Found 投稿日: 02/10/20 19:56 ID:???
幅固定したサイト作ってます
それを中央に配置したいんです
すべてdivで囲って
div{
margin-right : auto;
margin-left : auto;
}
でやちゃっていいものですか?
また、↑right left autoを省略して書けたと思うんですけどどう書けばいいんでしたっけ?


110 名前: Name_Not_Found 投稿日: 02/10/20 20:02 ID:???
margin: 0 auto;


111 名前: Name_Not_Found 投稿日: 02/10/20 20:07 ID:???
>>109
div{margin:auto;}


112 名前: Name_Not_Found 投稿日: 02/10/20 20:08 ID:???
>>109-110
margin一括指定はMacIEで無効になるバグがある。
http://www.zspc.com/documents/css2/box/margin.html
個別指定のままがよいよ。

あと、幅固定はあまり感心しないな。>>109
「横幅800固定やめろ。ブラウザ最大化するのウザイ。」
 http://pc3.2ch.net/test/read.cgi/hp/1031302476/l50


113 名前: Name_Not_Found 投稿日: 02/10/20 20:16 ID:???
デザインなんか指定しない方がいい
サイトによってナビゲーションの表現もまちまちになって
全体的にユーザビリティが低下する


114 名前: Name_Not_Found 投稿日: 02/10/20 20:17 ID:???
>>109
div{
margin-right : auto;
margin-left : auto;
width: 幅値;/*これを忘れるとmargin:autoだけではセンタリングにならないヨ*/
}



115 名前: Name_Not_Found 投稿日: 02/10/20 20:34 ID:???
幅値;/*半角じゃないとだめだヨ*/


116 名前: 109 投稿日: 02/10/20 21:14 ID:???
みなさんありがとうございます!
勉強になります!

幅固定してるのは
カスイケリンク集登録サイトの方々のような
長い文章が書けないからです
(個人サイトでもないもので。)
幅固定しなくてもすっからかんなイメージにならない
ようなサイト作りを勉強します!
ありがとう!


117 名前: Name_Not_Found 投稿日: 02/10/20 23:18 ID:???
>>60
で、結局>>51-52のclass="clear"に対して
.clearerよりマシな代案は無いんですか?


118 名前: Name_Not_Found 投稿日: 02/10/20 23:53 ID:???
>>117
そもそもクラスを振らないで
#main p + br
のようにセレクタの記述で指定してやる。
ただ、シェア最大の某ブラウザが
セレクタ関係の実装がボロボロなんだよね。


119 名前: Name_Not_Found 投稿日: 02/10/21 00:03 ID:???
>>118
やはり現状ではclass属性は、CSSのためにあるものなんですねえ……。
まづCSSありき、で、クラスが振られるってことで。


120 名前: Name_Not_Found 投稿日: 02/10/21 00:37 ID:???
そんならstyle属性使ってろよ


121 名前: Name_Not_Found 投稿日: 02/10/21 01:15 ID:EzQeaT4u
携帯端末のCSS対応度ってどの程度なんでしょ?
ドリーム・キャストなみ? 考慮しなくてもよい?


122 名前: Name_Not_Found 投稿日: 02/10/21 01:25 ID:???
>>114
marginのauto指定はIEは認識しないんじゃ?


123 名前: Name_Not_Found 投稿日: 02/10/21 01:30 ID:???
>>122
>>5のFAQのリンク先読め↓。IE6から対応してるよ(但し標準モードのみ)。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html



124 名前: Name_Not_Found 投稿日: 02/10/21 02:12 ID:???
>>119
文脈セレクタは比較的効くけどね。


125 名前: Name_Not_Found 投稿日: 02/10/21 23:50 ID:eHJvEL3v
無印の<br>は改行せず、<br class="hoge">は改行するようなスタイルシートを
作りたいのですが、うまくいきません。
こんなことできるんでしょうか?


126 名前: Name_Not_Found 投稿日: 02/10/22 00:00 ID:???
>>125
display:none;の応用とか、やり方によってはできるブラウザもあるみたいだが、
そんな無駄な<br>を挿入する位なら
インライン要素に対するdisplay:block;とdisplay:none;を活用してはどうか。


127 名前: Name_Not_Found 投稿日: 02/10/22 00:05 ID:???
>>126
できました
ありがとうぞざいます


128 名前: Name_Not_Found 投稿日: 02/10/22 00:21 ID:???
誤>インライン要素に対するdisplay:block;とdisplay:none;を活用してはどうか。
正>インライン要素に対するdisplay:block;とdisplay:inline;を活用してはどうか。



129 名前: visibility:hidden; 投稿日: 02/10/22 01:05 ID:???
皆様はdisplay:none;したいあれやこれやの箇所に、どんなclass名を振ってますか?
class="none"ではダメなんでせうか。


130 名前: Name_Not_Found 投稿日: 02/10/22 01:08 ID:???
>>129
classは付けずにセレクタによって指定している。


131 名前: Name_Not_Found 投稿日: 02/10/22 01:20 ID:???
状況依存セレクタっすね
うふふ


132 名前: Name_Not_Found 投稿日: 02/10/22 01:49 ID:???
……?


133 名前: Name_Not_Found 投稿日: 02/10/22 02:54 ID:???
HTML+CSSを理解してない人多いけど
一度代替スタイル試してみれば解ると思うんだよね
オフラインででも


134 名前: Name_Not_Found 投稿日: 02/10/22 10:10 ID:???
他人の代替シートを適用された時にヘンにならぬためにも
classを振ってるのだが。


135 名前: Name_Not_Found 投稿日: 02/10/22 11:55 ID:0qAfb4b8
テーブルを半透明にしたいと思い、
style="filter: Alpha();"を記述してみますた。
MacIE5では、半透明にならないのですが、
Win&Macともに半透明になるようにするにはどうしたらよいのでしょうか?
ネスケは無視してくださって結構です


136 名前: Name_Not_Found 投稿日: 02/10/22 12:01 ID:???
>135
IEだったら同じ動作するなんて期待しても無駄。


137 名前: Name_Not_Found 投稿日: 02/10/22 12:02 ID:???
>>135
background:trasnparent;でいいんでないの?
filterなんて使いなさんな。レンタリングが遅くなるし、いいことないよ
半透明なんて誰も求めてないし、透明でがまんしなさい。
あまり独自拡張使うと、Webオンチになるよ


138 名前: Name_Not_Found 投稿日: 02/10/22 12:08 ID:0qAfb4b8
>>136
>>137
レスありがとうございます
background:trasnparent;を使って、半透明に近い色を指定してやってみます。


139 名前: Name_Not_Found 投稿日: 02/10/22 12:15 ID:???
>>138
いや、近い色というかtransparentはとにかく透明。

背景画像にぼかしをつけた画像を指定し、ボックスの枠などに
transparentを指定すれば、半透明に見えなくもなくなくなくなくなくないかもね






140 名前: 138 投稿日: 02/10/22 12:25 ID:???
勉強してきます。
スマソ


141 名前: Name_Not_Found 投稿日: 02/10/22 13:16 ID:???
セレクタの複数宣言で、大量にセレクタを宣言するときって書き方どうしてる?
改行は含められないから見辛くて仕方が無いんだけど...


142 名前: Name_Not_Found 投稿日: 02/10/22 13:36 ID:???
JIS Z 8301 規格票の様式
これに沿ったレイアウトのスタイルシートどっかにありません?


143 名前: Name_Not_Found 投稿日: 02/10/22 16:03 ID:???
>>141
カンマで改行しちゃいけないんだっけ?


144 名前: Name_Not_Found 投稿日: 02/10/22 17:10 ID:???
>>143
あ、改行できた。ごめん勘違い。


145 名前: Name_Not_Found 投稿日: 02/10/22 21:48 ID:VkId/p2C
同じページにtableが2つ有って、
このtableは全tdのフォントサイズ90%で、
このtableは全tdのフォントサイズ80%で、
というような一括指定方法が有ったら教えて下さい。


146 名前: Name_Not_Found 投稿日: 02/10/22 21:55 ID:???
>>145

tableになんかclassつけて(仮にaとbとする)

table.a td{font-size: 90%}
table.b td{font-size: 80%}


147 名前: Name_Not_Found 投稿日: 02/10/22 21:59 ID:???
一つのテーブル(又はtdの親要素)はクラス(又はid)無指定で
table (ここの間隔には必要があればtbody,th等が入る) td{
font-size: 90%;
}

もう一つのテーブル(又はtdの親要素)にはクラス(又はid)を指定する(ここでは仮に a)
table.a (ここの間隔には必要があればtbody,th等が入る) td{
font-size: 80%;
}

<table>
<tr><td></td></tr>
</tabel>

<table class="a">
<tr><td></td></tr>
</table>


148 名前: 147 投稿日: 02/10/22 22:00 ID:???
ありゃ かぶったな。。。


149 名前: Name_Not_Found 投稿日: 02/10/22 22:38 ID:VkId/p2C
>>146
>>147-148
誠にありがとうございました!
「table td」ですか…勉強になりました。


150 名前: Name_Not_Found 投稿日: 02/10/22 23:04 ID:???
>>146
どうせなら
table.main
table.sub
といった例を


151 名前: Name_Not_Found 投稿日: 02/10/22 23:13 ID:PBAlrdU+
フレームで2分割した画面のメニューに使う方に、
フォトショップで自分で作ったタイトルや各種のボタンなどを
GoLiveのレイアウトグリッドという機能を使って貼り付けて
いるのですが、
これだとモニタでブラウザの半分の画面で表示させているのを
最大化させた場合、
ボタン間とタイトルの距離が画面が半分のときと同じで
もう半分が空きスペースになってしまいます。

これはスタイルシートを使ったらブラウザの画面を最大化しても
半分くらいにしてもその時の画面一杯で表示させることができ
るのでしょうか?

もし可能ならその方法を教えて欲しいのですが。



152 名前: Name_Not_Found 投稿日: 02/10/22 23:24 ID:???
>>151
テーブルレイアウトでも出来るがな。
>>4で一から勉強するよろし。


153 名前: Name_Not_Found 投稿日: 02/10/23 00:13 ID:???
>>151
GoLiveの機能とか言われてもソース貼らなきゃわからん。

位置やサイズを%とかで適宜指定すればいいんでねーの?


154 名前: Name_Not_Found 投稿日: 02/10/23 16:59 ID:RWvbMjT4
idとclassはどう使い分ければいいんでしょうか?


155 名前: Name_Not_Found 投稿日: 02/10/23 17:02 ID:???
イデッてときはid
クラッときたときはclass


156 名前: Name_Not_Found 投稿日: 02/10/23 17:27 ID:???
>>155
てめーnameてんじゃねーぞゴルァ


157 名前: Name_Not_Found 投稿日: 02/10/23 17:37 ID:???
ワラタ。w


158 名前: Name_Not_Found 投稿日: 02/10/23 20:23 ID:???
>>154
単にCSSのセレクタとして使うだけならclass。


159 名前: Name_Not_Found 投稿日: 02/10/23 21:02 ID:???
>>154
意味からして混同しようがない。
辞典引けYO!


160 名前: Name_Not_Found 投稿日: 02/10/23 21:38 ID:???
Mac IE4.5で
<div id="test" style="position:absolute; visibility:hidden; left:213px; top:281px; z-index:1">
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#6699CC">
<tr>
<td>
<a href="#" onMouseOver="Swap('1','hoge');showLAYER('test')" onMouseOut="Swap('0','hoge');hydeLAYER('test')">リンク</a>
</td>
</tr>
</table>
</div>
としたところ、
外部ファイルで指定している
A:link{font-size:10px;color:#FFFFFF}
A:visited{font-size:10px;color:#CC0000}
A:hover{font-size:10px;color:#FF3300;text-decoration:underline}
が効きません。
どう効かないかというと、マウスを当てた時の色が変わりません。アンダーラインは効きますが、
マウスを離しても下線が消えない、というもの。
tableごとdivから外したら正常に動作しましたが、外さずに動作する方法はないものでしょうか、、。
ご享受お願いします。


161 名前: Name_Not_Found 投稿日: 02/10/24 01:09 ID:pEZKC54g
Windows MeでIEを使ってます。
IBMホームページビルダーを使ってHP作成をしています。
角丸テーブルを作ろうと思ってるのですが、タグを教えて下さい。
(素材に入ってるものには気に入った素材がないので。。。)お願いします。


162 名前: Name_Not_Found 投稿日: 02/10/24 01:18 ID:???
>>161
言いたい事はわからんでもないが、根本的に間違ってるから
初心者質問系のスレで聞いたほうがいいかもよ。


163 名前: 161 投稿日: 02/10/24 01:20 ID:pEZKC54g
わかりました。ありがとうございます。失礼致します。


164 名前: Name_Not_Found 投稿日: 02/10/24 12:34 ID:YhW4q4oH
ラジオボタンの大きさをスタイルシートでいじることは可能ですか?
それと、ラジオボタンやチェックボックスの選択と非選択で
CGを割り当てたりすることはできるのでしょうか?



165 名前: Name_Not_Found 投稿日: 02/10/24 12:43 ID:UzwaGp80
はじめまして、こんにちは。
音楽系サイトを作っています。
アルバムの曲目リストを掲載しようと思い、
順序つきリストでデータを作成しました。
曲目リストで場所をとりたくないので、改行させないようにしたいのですが、
いい方法はあるでしょうか?
display:inlineではリストのマークが消えてしまい駄目でした。
よろしくお願いします。


166 名前: Name_Not_Found 投稿日: 02/10/24 12:52 ID:???
>>160
>マウスを離しても下線が消えない、というもの。

a:linkの初期値がtext-decoration:underline;なので当り前かと。

>>165
floatを応用すれば?


167 名前: Name_Not_Found 投稿日: 02/10/24 12:53 ID:???
>>164
>ラジオボタンの大きさをスタイルシートでいじることは可能ですか?

できません。

>それと、ラジオボタンやチェックボックスの選択と非選択で
>CGを割り当てたりすることはできるのでしょうか?
それはCSSではなくCGIかJavaScriptの仕事です。


168 名前: Name_Not_Found 投稿日: 02/10/24 13:01 ID:???
>167
いや、たぶんラジオボタンそのものを変えたいんだろう。


169 名前: 165 投稿日: 02/10/24 13:53 ID:???
>>166 さん
ありがとうございます。
早速、floatを試してみましたが、今度はレイアウトが著しく崩れます。
もう少し研究してみます。


170 名前: Name_Not_Found 投稿日: 02/10/24 14:32 ID:???
>>169
ol li {float:left;min-width:2em;padding-left:1.5em;}
これで、あとはolの次に出現する要素にclear:left;を指定すればいいはず。


171 名前: 160 投稿日: 02/10/24 15:01 ID:???
>>166
ありがとうございます。
> a:linkの初期値がtext-decoration:underline;なので当り前かと。

A:link{font-size:10px;color:#FFFFFF;text-decoration:none}
A:visited{font-size:10px;color:#CC0000;text-decoration:none}
A:hover{font-size:10px;color:#FF3300;text-decoration:underline}

としてみましたが、やっぱりdivの中に入っているのが問題らしく、外すとなおります。
これをサポートしているブラウザは、MacのIE4.5以外は最初から正常に表示しています。
もう諦めます。スマソ


172 名前: Name_Not_Found 投稿日: 02/10/24 16:38 ID:???
>>160>>171
><div id="test" style="position:absolute; visibility:hidden; left:213px; top:281px; z-index:1">

そもそもvisibilty:hiddenで括ったら、表示されないはずだけど?
それが効いてないってのからしてヘンだよ。
まあでも、多分原因はposition:absolute;にあるのかな。
そこだけコメントアウト(/* */)して実験してごらん。
できればこちらに報告して下さい。
 ↓
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc3.2ch.net/test/read.cgi/hp/991666454/l50


173 名前: Name_Not_Found 投稿日: 02/10/24 17:06 ID:wW+70X4z
【殺伐】引換券だけで食うオフ【吉野家】10/26(土)
http://live.2ch.net/test/read.cgi/festival/1034862260/l50

今現在で5人以上のところ
・東京都 新宿東口靖国通り店(オゴリキター!かも)・19 町田(どっちか)・5
・京都府 河原町三条店・5
・大阪府 お初天神店・13
・兵庫県 三宮駅南店・11
・岡山県 岡山桃太郎通り店・16
       ・
       ・
       ・


174 名前: Name_Not_Found 投稿日: 02/10/24 17:19 ID:???
>>167
どうも、ありがとうございました。


175 名前: Name_Not_Found 投稿日: 02/10/24 19:14 ID:Xys0tmFt
input.hoge { border: inset 2 white; }
と定義してあるときに

<input type=text class=hoge name="author"
onFocus="this.style.border='solid 2 #6699ff'"
onBlur="this.style.border='inset 2 white'">
というアイテムを作ります。

ここで、onBlurの内容を、class=hogeで決められたものに
するには、どうしたらいいですか?
つまり、onBlurでclass=hogeで定義されたborderに戻したいと言うことです。


176 名前: Name_Not_Found 投稿日: 02/10/24 19:30 ID:???
>>175
別のクラス(hoge2など)にもスタイルを設定しておいて、
onfocus/onblurでクラス名を変えてみてはどうでしょうか


177 名前: 176 投稿日: 02/10/24 19:31 ID:???
ていうかIEってinput:focusに対応してないんでしたっけ?



178 名前: 175 投稿日: 02/10/24 19:49 ID:Xys0tmFt
>>176
早速のレスありがとうございます。

具体的には、イベントでクラスをかえるにはどうしたらいいですか?


179 名前: Name_Not_Found 投稿日: 02/10/24 19:55 ID:???
>>178
具体的にどうしたいのかはっきりしているなら、最初からそう言えよ

と、答えられもしないのに煽ってみるテスト


180 名前: 175 投稿日: 02/10/24 20:02 ID:Xys0tmFt
>>179
>>178で具体的に「イベントでクラスをかえる」とかけたのは、
>>176さんのレスのおかげです。
最初はわからなかったです。



181 名前: Name_Not_Found 投稿日: 02/10/24 20:03 ID:???
>>178
そうなると質問内容がスレ違い。


182 名前: Name_Not_Found 投稿日: 02/10/24 21:11 ID:???
javascript使わずにブラウザ別にCSSを振り分けることは出来ますか?


183 名前: 160 投稿日: 02/10/24 21:14 ID:???
>>172
> そもそもvisibilty:hiddenで括ったら、表示されないはずだけど? それが効いてないってのからしてヘンだよ。
スマソ。言ってなかったけど、visibilty:hiddenで隠しておいて、違う画像のマウスオーバーでサブメニューみたいなもんを表示するって仕組みなんですよ。
position:relativeにするとまた自分に出来ないことしなきゃなんないし、、。
やっぱ、バグってことなんですかね、、。
( ´Д⊂ヽ


184 名前: Name_Not_Found 投稿日: 02/10/24 21:19 ID:???
>>182
テンプレくらい見れ>>8

でも面倒だからいっそのことSSIとゆー手もある。


185 名前: 175 投稿日: 02/10/24 21:52 ID:Xys0tmFt
自己レスです

<input class=hogehoge onFocus="this.className='hoge'" onBlur="this.className='hogehoge'">

でできました。
皆さんサンクスです。


186 名前: Name_Not_Found 投稿日: 02/10/24 22:42 ID:DG0SOhh0
[Web制作]/* CSS、スタイルシート質問スレッド【12】 */ 2002/10/24 22:39:56

リンクの色を一時的に変更したいのですが、
.hoge:link{color:red;}
として<a href="" class="hoge">hogehoge</a>で変わるみたいです。

ですが、<a>の度にclass書くのが面倒なので、
<div class="age"><a href="">ageage</a></div>
みたいなときに、ageの中のリンクだけ全部まとめて
色を変えるようなことってできますか?


187 名前: Name_Not_Found 投稿日: 02/10/24 22:46 ID:???
>>186
div.age a {color:red;}


188 名前: Name_Not_Found 投稿日: 02/10/24 23:51 ID:???
>>186
1行目は何だ??


189 名前: 186 投稿日: 02/10/25 14:25 ID:???
>>187
なーるほど、子とか子孫とか、いろいろあるんですね。
CSS入門とかで最初のほうに解説があったけど、.hoge{}しか使ったことがなくて
忘れてました。いま見直してみると、これって便利というか
CSSの肝みたいな気がしてきました。

>>188
書き込みのときに変なものが紛れ込んだみたいです。謎です。

えっと、すいません、もう一つよろしいでしょうか。CSSファイルの中で、

.hoge{age:0;sage:0}
.hoge{age:1}
.hoge{sage:1}

と書いた時には、どう処理されるのが正しいのでしょう?
IEでもMozillaでも動作はage:1 sage:1となるようですが。


190 名前: Name_Not_Found 投稿日: 02/10/25 14:33 ID:???
>>189
>IEでもMozillaでも動作はage:1 sage:1となるようですが。
で正解


191 名前: Name_Not_Found 投稿日: 02/10/25 14:54 ID:???
>>189
肝かどうか分からんけど、文脈セレクタ駆使してclass使用を減らすのが最近楽しい。


192 名前: Name_Not_Found 投稿日: 02/10/25 17:56 ID:???
このことに触れているページが見つけられなかったので
質問いたします。

CSSの記述の仕方で
A:link{font-size:10px;}

A:link{font-size:10px}
最後の「;」は正しくは必要なのでしょうか?
どちらも同じ効果になるので、気になって仕方ありません。
よろしくお願いいたします。


193 名前: Name_Not_Found 投稿日: 02/10/25 18:05 ID:???
>>192
"{"と"}"の間には"property:value"という形の文を書きますが、
複数の文を書く場合、一つ一つの文の間に";"が区切りとして必要です。
ですから、";"で改行するような形が一般的によく取られています。

そういうわけなので、本来最後の文の後の";"は必要ありません。
ですが、あってもエラーにはなりませんので、";"で改行するコーディング
スタイルで統一している人は、混乱を避けるためにも、最後の文にも";"を
付けていることが多いです。



194 名前: Name_Not_Found 投稿日: 02/10/25 18:06 ID:???
あってもなくてもいい。


195 名前: Name_Not_Found 投稿日: 02/10/25 18:15 ID:???
スタイル追加するとき便利なのよ
クセ付けとくとよろし


196 名前: Name_Not_Found 投稿日: 02/10/25 18:25 ID:???
>>189
後に書かれた記述が優先される。
後から書かれたものが、前に書かれた指定に上書きされる、と考えると、
直感的でおぼえやすい。


197 名前: 192 投稿日: 02/10/25 21:14 ID:???
詳しい説明をありがとうございました。
今までの悶々とした気分が消え、すっきりです。


198 名前: Name_Not_Found 投稿日: 02/10/25 22:03 ID:???
外部ファイルのスタイルシートを利用して
tableを中央に配置したいのですが、
どのように記述すればいいのでしょうか?


199 名前: Name_Not_Found 投稿日: 02/10/25 22:05 ID:???
>>198
FAQっていったじゃん


200 名前: Name_Not_Found 投稿日: 02/10/25 22:10 ID:???
>>198

>>5


201 名前: Name_Not_Found 投稿日: 02/10/25 22:18 ID:???
ぼくの人生を、人生の花道の中央に無理やり配置したいのですが、
誰を蹴落とせばいいですか?


202 名前: Name_Not_Found 投稿日: 02/10/25 22:20 ID:???
女子供。


203 名前: マヂレス君 投稿日: 02/10/25 22:21 ID:???
>>201
誰もけ落とさない。
自分が努力する。
そうすれば道は開ける。

腰は低く、志は高く!!


204 名前: Name_Not_Found 投稿日: 02/10/25 22:24 ID:???
>>202
早速のレス、ありがとうごさいます。
女子供ですか・・・、あまり気乗りがしません。

>>203
ありがたい言葉ありがとうございます。ものすごく、感銘を受けました。
腰は低く、志は高く。いい言葉ですね。精進します。


205 名前: Name_Not_Found 投稿日: 02/10/25 22:32 ID:???
>>201
駅のホームからか?
タイミングはよく見極めろよ


206 名前: Name_Not_Found 投稿日: 02/10/25 22:37 ID:???
>>203
専門スレで嘘教えんなヴォケ


207 名前: Name_Not_Found 投稿日: 02/10/25 23:42 ID:???
>>201-206
一瞬、板を間違えたのかと思いますた。






・・・ここってB級グルメ板でいいんだよね?


208 名前: Name_Not_Found 投稿日: 02/10/25 23:56 ID:mjuG44MV
tableのcellpaddingをcssで指定したいです。
どうやって記述すればいいですか?


209 名前: Name_Not_Found 投稿日: 02/10/26 00:07 ID:???
th, td {
padding: 5px;
}


210 名前: Name_Not_Found 投稿日: 02/10/26 00:08 ID:???
>>208
td { margin: n;}



211 名前: Name_Not_Found 投稿日: 02/10/26 00:55 ID:???
>>210
table-cellへのmargin指定は無効。
tableにborder-spacingを適用すべし。




212 名前: Name_Not_Found 投稿日: 02/10/26 05:52 ID:???
P
{
margin:0 auto;
width:66%;
border:2px solid;
}

IE6で
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
だと真ん中に表示されるのに、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
の場合は表示されない。

Netscape7ではそういうことなかったんだけど……IEのバグ?


213 名前: 事故レス 投稿日: 02/10/26 05:55 ID:???
HTML 4.01 ってなんだろう(´Д`;
バグでもなんでもねーじゃん


214 名前: Name_Not_Found 投稿日: 02/10/26 06:14 ID:???
>>212
DOCTYPEスイッチの作用です。
正常な動作です。


215 名前: Name_Not_Found 投稿日: 02/10/26 06:32 ID:???
Transitionalだとできないのか


216 名前: Name_Not_Found 投稿日: 02/10/26 06:41 ID:???
>>214
>正常な動作です。
ということはネスケのバグか?


217 名前: Name_Not_Found 投稿日: 02/10/26 06:59 ID:???
>>216
IEは後方互換を維持するため、そういう実装になっている。
Netscape7の挙動に問題は無い。


218 名前: Name_Not_Found 投稿日: 02/10/26 07:41 ID:???
まあいってみりゃautoってのは「ブラウザにおまかせ!」って解釈で
いいような気がする。



219 名前: Name_Not_Found 投稿日: 02/10/26 09:31 ID:???
ttp://www.w3.org/TR/REC-CSS1#horizontal-formatting

> Otherwise, if both 'margin-left' and 'margin-right' are 'auto',
> they will be set to equal values.
> This will center the element inside its parent.

ダメじゃんIE……


220 名前: Name_Not_Found 投稿日: 02/10/26 09:34 ID:???
>>211
ハァ?


221 名前: Name_Not_Found 投稿日: 02/10/26 09:44 ID:???
>>220
誤爆?
tdにmargin設定できないよ。


222 名前: Name_Not_Found 投稿日: 02/10/26 09:47 ID:???
>>221
paddingと間違えたんだろ(藁


223 名前: Name_Not_Found 投稿日: 02/10/26 11:21 ID:???
marginは
Applies to: all elementsだよ。
ブラウザが対応してないだけじゃないの?


224 名前: Name_Not_Found 投稿日: 02/10/26 11:27 ID:???
やってみたけどmargin効かないね。WinIE6


225 名前: Name_Not_Found 投稿日: 02/10/26 12:52 ID:???
DOCTYPEによってHTMLの解釈を変えるなら兎も角、CSSの挙動を変える
とはこれいかに


226 名前: Name_Not_Found 投稿日: 02/10/26 13:11 ID:???
>>225
標準仕様にそぐわないデファクトスタンダードをNetscapeとMicrosoftが作ってしまった弊害です。



227 名前: Name_Not_Found 投稿日: 02/10/26 13:50 ID:???
>>223-224
http://www.w3.org/TR/2002/WD-CSS21-20020802/tables.html#q7
> Like other elements of the document language, internal table elements generate
> rectangular boxes with content and borders.
> Cells have padding as well. Internal table elements do not have margins.


228 名前: Name_Not_Found 投稿日: 02/10/26 13:57 ID:???
>>212-
既出なんだよ。>>5のFAQを見なさい。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
http://www.mozilla.gr.jp/standards/webtips0004.html


229 名前: Name_Not_Found 投稿日: 02/10/26 16:31 ID:???
IE7はタブブラウザだそうだが、そんなことよりレタリングエンジンを1から書き直してもらいたいな。
もちろん標準に沿ったものを

スレ違いスマソ


230 名前: Name_Not_Found 投稿日: 02/10/26 18:44 ID:???
皆さんは、bodyに指定するようなフォントカラーとかリンクカラーも別ファイルのCSSで指定しますか?


231 名前: Name_Not_Found 投稿日: 02/10/26 18:46 ID:???
>>230
ふつーに別ファイルから指定してるよ。
ページがたくさんあるなら尚更。


232 名前: Name_Not_Found 投稿日: 02/10/26 18:47 ID:???
Mozクラスになったとしても、結局旧IEを意識せざるを得ないんじゃないか。
今におきかえると、IE5は切り捨て、というわけにもいかないだろう。


233 名前: Name_Not_Found 投稿日: 02/10/26 19:21 ID:???
レンダリング…


234 名前: Name_Not_Found 投稿日: 02/10/26 19:37 ID:???
>>233
納得。何言ってんだと思っちゃったよ。


235 名前: Name_Not_Found 投稿日: 02/10/26 19:57 ID:???
>>229は葉書に印刷するのが日課なんだよ


236 名前: Name_Not_Found 投稿日: 02/10/26 20:15 ID:???
IEでレタリングする方法を教えてください


237 名前: Name_Not_Found 投稿日: 02/10/26 20:40 ID:???
>>236
VMLでパスを書けばできます。


238 名前: Name_Not_Found 投稿日: 02/10/26 20:46 ID:???
>>236
お絵描き掲示板。


239 名前: Name_Not_Found 投稿日: 02/10/26 21:41 ID:???
はぁ?お前ら何言ってんだ?
レタリングで何が悪いんだ?
英語の発音に近いのはレンダリングかも知れないがな。

>>236
適当なHTMLファイルをIEで開け。HTMLをパースして、それに基づいて
レタリングしてくれる。

>>237,238
レタリングつったら画像の事だと思ってるなんておめでてーな。
たしかに3DCGでレタリングつったらテキストなんて関係無いがな、
テキストだけのWEBページでもブラウザはレタリングするんだよ。


240 名前: Name_Not_Found 投稿日: 02/10/26 21:50 ID:???
レタリング【lettering】 視覚的効果を考えて文字をデザインすること。そのような文字を書くこと。



241 名前: Name_Not_Found 投稿日: 02/10/26 21:50 ID:???
>>239痛すぎるよ君
レタリング [lettering]
レンダリング [rendering]


242 名前: Name_Not_Found 投稿日: 02/10/26 21:52 ID:???
これはネタだな。こんなバカが実在するわけがない。


243 名前: Name_Not_Found 投稿日: 02/10/26 22:20 ID:t3P2jQn6
とりあえずage


244 名前: 239 投稿日: 02/10/26 22:33 ID:???
たくさん釣れたな(プププ


245 名前: Name_Not_Found 投稿日: 02/10/26 22:37 ID:???
次の質問どうぞ↓


246 名前: Name_Not_Found 投稿日: 02/10/26 22:40 ID:25AE9CPP
ブラウザのサイズに関係なく、
左右両隅に画像を置く場合、
どのようにスタイルシートを指定すればよいでしょうか?


247 名前: Name_Not_Found 投稿日: 02/10/26 22:43 ID:???
dejavu...


248 名前: Name_Not_Found 投稿日: 02/10/26 22:52 ID:???
bodyとは別の要素に背景を指定するしかない。
Mozillaだけならbefore疑似要素で何とかならんこともないが。

>>247
いい加減これもFAQだね。


249 名前: 投稿日: 02/10/26 22:53 ID:xFJP6hWC
position:absolute等で場所を指定すれ。
左側に置きたい画像はposition:absolute;left:0px;とかで、
右側に置きたい画像はposition:absolute;right:0px;とかでやれ。
ただし、rightを使う場合、画像にwidthとheightを指定しないとIE以外ではposition:absoluteが機能しない。



250 名前: Name_Not_Found 投稿日: 02/10/27 00:03 ID:Vv/h73Bc
いい本ないですか?・・・


251 名前: Name_Not_Found 投稿日: 02/10/27 00:44 ID:mj7Gk7cU
このゲームすっごくおもしろかった
http://my.vector.co.jp/servlet/System.FileDownload/download/ftp/0/255552/pack/win95/game/table/pachinko/yume2.lzh


252 名前: Name_Not_Found 投稿日: 02/10/27 01:05 ID:???
ここでも宣伝してやがる


253 名前: マヂレス君 投稿日: 02/10/27 01:18 ID:???
>>251
http://job.jpn.ph:591/cgi-bin/img-box/img20021027011347.mp3


254 名前: Name_Not_Found 投稿日: 02/10/27 18:45 ID:6Ss1XJwR
リンクやフォームクリック時に表示される点線を消したいのだが、CSSなんかで一括して指定できないんでつか?
それぞれにonFocus="this.blur"を打つのはめんどくさい。


255 名前: Name_Not_Found 投稿日: 02/10/27 20:23 ID:???
スレ違いかも知れないですが、こちらのほうがいいと思うので
IE6ダウンロドしたんですけど、スクロールバーのスタイルって読み込まれます?
みんなデフォルトで表示されるんですけど。
今まで、スクロルバーも全体のデザインの一部に考えてたんでちと鬱


256 名前: Name_Not_Found 投稿日: 02/10/27 20:25 ID:???
もうちょっと落ち着いて書け


257 名前: 255 投稿日: 02/10/27 20:26 ID:???
>>256
おまえもなー!!!


258 名前: Name_Not_Found 投稿日: 02/10/27 20:40 ID:???
>>255
読み込まれるヨ。
http://www.parkcity.ne.jp/~chaichan/src/cssmain.htm
↑落ち着いて確認しなさい。


259 名前: Name_Not_Found 投稿日: 02/10/27 20:46 ID:CIRFmSki
 1 2
 3 4
4つの文のかたまりがあってCSSを使って上の様に配置したいのですが
どのようにすればよいのでしょうか?
floatとclearを使って色々やってるんですが一向にうまくいきません。
どなたかご教授願えないでしょうか。


260 名前: Name_Not_Found 投稿日: 02/10/27 21:10 ID:???
>>259
widthの指定はちゃんとしてる?
あと、ソース貼って聞いた方がいいよ。


261 名前: Name_Not_Found 投稿日: 02/10/27 21:43 ID:???
>>260
すみません。

現状では、CSSファイルに
#1 { float: left; width: 50%; }
#2 { float: left; width: 50%; }
#3 { float: left; width: 50%; }
#4 { float: left; width: 50%; }
と記述し、
htmlファイルの2と3の間に <br style="clear: both;">
を入れて無理矢理?表示させているのですが、
CSSだけでもっと綺麗に出来ないかなぁと思いまして。。。


262 名前: Name_Not_Found 投稿日: 02/10/27 22:23 ID:???
>>261
これでbrは要らない。
#3 {clear:left; float:left; width: 50%; }


263 名前: Name_Not_Found 投稿日: 02/10/27 22:26 ID:???
>>261
widthは足して100%よりちょっと少なめになる位がいいよ。
それぞれ各width:49%;とか。
その方がウィンドウ幅を狭くした時も崩れないから。


264 名前: Name_Not_Found 投稿日: 02/10/27 22:35 ID:???
>>262
返信ありがとう、ありがとうございます。
綺麗に表示されました。
本当にありがとうございました。

サイト作成がんばるぞー


265 名前: Name_Not_Found 投稿日: 02/10/27 22:37 ID:???
>>263
そうなんですか。
色々勉強になります。
これも早速反映させました。
ありがとうございます。


266 名前: Name_Not_Found 投稿日: 02/10/28 15:50 ID:+UgM64HQ
テーブルを中央に配置してその中に左寄せの長い文章を入れてるページがあるのですが
これをテーブル無しのCSSで出来ませんか?



267 名前: Name_Not_Found 投稿日: 02/10/28 15:59 ID:cnBZaI7C
tableを常に右隅に表示させたいのですが、relativeでは、どの様に
プロパティーと、値を指定すれば良いのでしょうか?お願いします。


268 名前: Name_Not_Found 投稿日: 02/10/28 16:00 ID:???
>>266
<P style="texy-align:left;width:60%;margin-right:20%;margin-left:20%;">
本文
</P>
数値は適当に


269 名前: 268 投稿日: 02/10/28 16:03 ID:???
訂正
<P style="texy-align:left;width:60%;margin-right:auto;margin-left:auto;">
本文
</P>


270 名前: Name_Not_Found 投稿日: 02/10/28 16:13 ID:???
>>267
「常に右端に表示されるtable」はrelativeではあり得ないような気がするが…。


271 名前: 266 投稿日: 02/10/28 16:20 ID:CkJpTFTH
>>268
それだとブラウザの大きさを変えたら文字がグシャーと動いちゃうんで嫌なんです。
そうならない為に横500ピクセルのテーブルに文字を入れてたんです。例え横スクロールが出ても…
あと>>269だと左寄せになったのですが…


272 名前: 267 投稿日: 02/10/28 16:27 ID:cnBZaI7C
>>270
相対配置は出来ないんですかねぇ?縦方向は%で指定して、
常にtableを隙間無く右隅に置いて置きたいんですが。
ページ自体をリサイズしても、同じ様な位置に置いて
置きたいんです。


273 名前: Name_Not_Found 投稿日: 02/10/28 16:36 ID:???
>>272
position: absolute; right: 0 か text-align: right ではダメ?


274 名前: 267 投稿日: 02/10/28 16:59 ID:cnBZaI7C
text-align: right では、隙間が出てしまったんで、right: 0 で、
試してみます。どうもです。



275 名前: 267 投稿日: 02/10/28 17:15 ID:cnBZaI7C
>>273 多少ずれましたが出来ました!ありがとうございます。


276 名前: 268 投稿日: 02/10/28 17:47 ID:???
>>271これでうまくいきます。
<DIV style="width:500px;margin-right:auto;margin-left:auto;">
<P>本文
</P>
</DIV>

268で数値は適当にって入れてたんだけどね…


277 名前: Name_Not_Found 投稿日: 02/10/28 18:11 ID:???
>>276
互換モード(IE5.5以下など)でも大丈夫?


278 名前: Name_Not_Found 投稿日: 02/10/28 18:49 ID:Y/J7bOxm
すいません質問させてください

入力フォームなんですけど
winIEで見ると大丈夫なんですけどmacIEで見ると文字が激しくズレます
良い訂正の仕方などがあればご教授いただけたら幸いです
よろしくお願いします

select
{
border: 1px double #333333 ;
background-color :#FFFFFF ;
color : #000000;
font-size : 11px ;
font-family: Verdana,"MS Pゴシック",Osaka;
}

input
{
border: 1px double #333333 ;
background-color :#FFFFFF ;
color : #000000;
font-size : 11px ;
}

textarea
{
border: 1px double #333333 ;
background-color :#FFFFFF ;
color : #000000;
font-size : 11px ;
}



279 名前: Name_Not_Found 投稿日: 02/10/28 18:58 ID:???
>>277
互換というかIE5.5以下はmarginやwidthが駄目駄目だから
<P style="text-align:left;">にして<CENTER>で括るしかないね。
<CENTER><DIV><P>の順で。


280 名前: 266 投稿日: 02/10/28 19:01 ID:U/1FDKv8
>>276
ありがとうございました
>>277
とりあえずIE6とNN7ではokのようですが…
互換モードでの見方がわからないので私にはわからないです…


281 名前: Name_Not_Found 投稿日: 02/10/28 19:05 ID:CCUf39jf
<div class="section">
  <h2>heading</h2>
  <div class="?"> ←
    <p>...</p> (p, h3, h4, blockquote, pre, table, etc)+
  </div>
</div>

クラス名、何にしたらいいやろ。
ちょっとレイアウトでそこに div を入れたくて。
こういう目的は不純なのはわかるが。


282 名前: Name_Not_Found 投稿日: 02/10/28 19:15 ID:???
>>281
layout


283 名前: Name_Not_Found 投稿日: 02/10/28 19:46 ID:???
>>280
互換モードで見たいなら、DOCTYPE宣言をTransitionalのものに変えてみては。


284 名前: Name_Not_Found 投稿日: 02/10/28 19:48 ID:SEV51hqG
>>279
><P style="text-align:left;">にして<CENTER>で括るしかないね。

手はありますよ。あなたがご存知ないだけで。
>>5のFAQの見て下さい。
標準/互換モードにスイッチする方法↓
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
どちらでもセンタリングする方法↓
http://www.mozilla.gr.jp/standards/webtips0004.html
<div style="text-align:center;border:black;">
<div style="margin-left:auto;margin-right:auto;text-align:left;border:red;">
ブロックレベル要素
</div>
</div>
この子要素のdivをtableにすればいいだけでしょ。widthも指定して。


285 名前: Name_Not_Found 投稿日: 02/10/28 19:49 ID:???
>>281
subsectionでいいと思う


286 名前: 284 投稿日: 02/10/28 19:53 ID:???
訂正
誤>この子要素のdivをtableにすればいいだけでしょ。widthも指定して。
正>この子要素のdivをpにすればいいだけでしょ。widthも指定して。

どっちにしろ、FAQも読まないで質問してはいかんよ。>>266


287 名前: 279 投稿日: 02/10/28 19:58 ID:???
>>284
勉強になりますた。


288 名前: Name_Not_Found 投稿日: 02/10/28 20:00 ID:???
>>281
漏れも同じような書き方してるからtextとつけてるが…
この命名はW3C信者的に良いのだろうかとふと不安になってきた。



289 名前: Name_Not_Found 投稿日: 02/10/28 20:04 ID:???
色指定でWindowsのシステムの色(窓の色とか)が指定できるのは
もちろんIEの拡張なんですよね?

あと背景色なんかにグラデーションなどは使えませんか?
フィルタですか?


290 名前: Name_Not_Found 投稿日: 02/10/28 20:06 ID:???
>>289
IEの拡張ではありません。しかしWindowsのシステムの色はWinIEしか対応しません。

フィルタです。


291 名前: Name_Not_Found 投稿日: 02/10/28 20:10 ID:???
>>289
>グラデーション
たとえばこんな感じで(自分のページから抜き出したものを改変)
body{width:100%:
filter:progid:dximagetransform.microsoft.gradient
(gradienttype='1',
startcolorstr='#6699ff',
endcolorstr='#ffffff'); }

みるからにIEの独自拡張だわな


292 名前: 281 投稿日: 02/10/28 20:21 ID:???
>>282 ヽ(`Д´)ノ

>>285
.subsection も考えたけど、あそこに section を使ってる以上
使うとすれば <div.subsection><h3>...</h3> ... </div> とかしたいのですよ。。。

>>288
text ですか。個人的に text は inline っていう謎なイメージがあるんでちょっと…
中に入るのは画像だったりもしますし。

で、CSS でイケてるデザインスレ周辺とか調べて見たんだけど
・section-haut ← haut って何やろ
・section-body
・content
・indent ← マズー

なんかこういう命名規則のガイドラインとかあると便利なのに
必要無いところに無理にdiv入れるから名前付けるのに困るんだ
って言われればそれまでだが。


293 名前: Name_Not_Found 投稿日: 02/10/28 20:22 ID:???
>>289
CSSのシステムカラーは仕様書に書いてある
あくまでCSSであってHTMLでは使えないが

ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/ui.html#system-colors


294 名前: Name_Not_Found 投稿日: 02/10/28 21:06 ID:???
>>292

>なんかこういう命名規則のガイドラインとかあると便利なのに

たしかに便利だけど、どうせそれだったら、最初からそういう要素を
用意してほしいと考えるのは俺だけだろうか。

自分でDTD書け、と言われたらそれまでだが。


295 名前: Name_Not_Found 投稿日: 02/10/29 01:29 ID:???
プログラムの変数名とかもそうだけど、慣れれば自分なりの定型ができてくるもんだよ。


296 名前: Name_Not_Found 投稿日: 02/10/29 02:06 ID:???
>>292=>>281
レイアウトのためだけに入れているのなら
.section > div
.section h2 + div
とか。
対応していないブラウザは
.section div
としておいて、適用されるとまずい部分は上書きしてやる。


297 名前: Name_Not_Found 投稿日: 02/10/29 23:11 ID:/AFiR6BQ
質問です。掲示板作ってます。

<DIV>の中に書き込みの本文があるんですが、
文中に単語の切れ目のない長い英数字が書き込まれると、
<DIV>で指定した幅を無視してブラウザが横スクロールバーを出してしまいます。
<DIV>の幅をしっかりレンダリングさせるようにはできないでしょうか。
ちなみに、<DIV>に指定しているのは、{margin:0 20% 0 32px}です。

確か2chでも同様の現象がありますよね。


298 名前: 297 投稿日: 02/10/29 23:17 ID:???
「文中に単語の切れ目のない長い英数字」とは、
具体的には長めのURLなんかが当てはまります。
あと、本文をくくるのは<DIV>でなくてもいいです。
(HTML的には<P>がいいのかもしれませんが)


299 名前: Name_Not_Found 投稿日: 02/10/30 00:43 ID:???
>>298
overflow:scroll あたりではみ出したぶんをスクロールさせるくらいしか手はないと思う。




300 名前: 297 投稿日: 02/10/30 02:32 ID:???
縦横幅を固定しているわけではないので、overflow:scrollは効きませんですた。
ちょっと調べてみたら、Deltaの掲示板でもはみ出してますね。


301 名前: マヂレス君 投稿日: 02/10/30 04:41 ID:???
>>297
word-break: break-all


302 名前: Name_Not_Found 投稿日: 02/10/30 07:14 ID:???
むしろword-wrap


303 名前: Name_Not_Found 投稿日: 02/10/30 22:16 ID:8+xnfD+W
ヽ(・∀・)ノ <あげ!


304 名前: Name_Not_Found 投稿日: 02/10/31 01:38 ID:eT9Mwdyi
position:absoluteは包含ブロックからの位置とアル
しかし

blockquote{margin-top:50em;}
div{margin-top:30em;}
p{position:absolute; top:0;}

<blockquote cite="http://www.w3.org/">
<div id="w3c">
<p>The CSS Working Group has
released two Last Call Working Drafts and welcomes comments on them
through 27 November......</p>
</div>
</div>

としても包含ブロックのdivではなくbodyからになってしまうけど
なんで?N6.2です。


305 名前: Name_Not_Found 投稿日: 02/10/31 02:29 ID:???
>>304
absoluteした要素の包含ブロックは
positionプロパティ(static以外)が指定された祖先要素。

divにposition: relativeなり指定しないと駄目です


306 名前: Name_Not_Found 投稿日: 02/10/31 22:38 ID:8yfPjYZ9
ブロックにheight:100%と指定しても他の要素がウィンドウサイズより大きかった場合
スクロールすると100%のブロックがウィンドウサイズの大きさで切れてしまいます。
tableにheight="100%"と指定したときと同じようにできないでしょうか?


307 名前: Name_Not_Found 投稿日: 02/10/31 23:05 ID:???
CSSを分かり易く説明してるページありますか?
全くCSSはやったことないんで、よろしくおながいします。


308 名前: Name_Not_Found 投稿日: 02/10/31 23:09 ID:???
>>307
>>4


309 名前: Name_Not_Found 投稿日: 02/10/31 23:16 ID:???
>>306
ブロックに%指定した場合はそのブロックの最も近い祖先ブロックの内容辺が元になる。
祖先ブロックがない場合は初期包括ブロックが元になる。
初期包括ブロックはUAが自由に定めることが出来るが、大抵のUAはその時点での
観閲領域を元にする。つまり切れて当然。
TABLEで%指定した場合何を元に算出するか決まっていない。
(普通は最小限の値かないように合わせた高さになると思うが)

他の要素を含む包括ブロックに入れろ。


310 名前: 307 投稿日: 02/10/31 23:23 ID:???
>>308
>>2-10を見たつもりだったのに…ありがとう、逝ってきます。


311 名前: Name Not Found 投稿日: 02/11/01 10:12 ID:R2gwZ3Hj
イメージマップでborderを設定して、斜めとか円とかの表現はできますか?
また、イメージマップ以外でhtml、cssでは斜めの表現できますか?

チャート図?みたいのを作りたいのです。価格.comみたいなやつ。

よろしくおねがいもうしあげたてまつりまする。


312 名前: Name_Not_Found 投稿日: 02/11/01 10:37 ID:???
>>311
できません。
画像を使用すべし。
IE独自拡張のフィルターで廻転させれば斜めも表現できるけどね。


313 名前: 311 投稿日: 02/11/01 10:50 ID:R2gwZ3Hj
>>312
そうですか・・できませんか・・・。
ワッカリマーシタ
ありがとうでございまあした。。。


314 名前: Name_Not_Found 投稿日: 02/11/01 10:53 ID:???
もしくは SVG の普及を待て


315 名前: Name_Not_Found 投稿日: 02/11/01 14:26 ID:???
待たずに使ってSVGの普及に貢献せよ。


316 名前:   投稿日: 02/11/01 20:05 ID:PqyBhtPz
CSS初心者の質問です。。

メニュー  |     内容   | サブメニュー
(メニューとサブメニューはピクセル幅固定、内容はブラウザ幅に応じて可変)

といった構成のページを作る場合、以下の設定でよろしいのでしょうか?

.menu { position:absolute; left:0px; width:100px; display:inline;}
.content { margin-left:110px; margin-right:110px; width:100%; display:inline;}
.submenu { position:absolute; right:0px; width:100px; display:inline;}

<div class="menu">メニューです</div>
<div class="content">内容です</div>
<div class="submenu">サブメニュー</div>


317 名前: Name_Not_Found 投稿日: 02/11/01 20:13 ID:???
.navi li {display:inline;
          padding:0 3em;}
.navi li:before {content:"["}
.navi li:after {content:"]"}


<ol class="navi">
<li>メニューです</li>
<li>内容です</li>
<li>サブメニュー</li>
</ol>

対応ブラウザは少ないけどw
#ちょっとしたtypo、勘違いは許して名。


318 名前: Name_Not_Found 投稿日: 02/11/01 21:08 ID:???
>>316はW3Cのトップページみたいのを作りたいと言っているのだと思うが……


319 名前: Name_Not_Found 投稿日: 02/11/01 21:16 ID:???
>>316
取り急ぎこんなところでどうでしょうか?あまり上出来ではありませんが。
とりあえずIE5.5とNN7.0ではだいじょうぶです。
メニューは<div>より<ul>とかを使った方がいいかも(その辺の議論はstrictスレでどうぞ)。

<style type="text/css">
.menu { position:absolute; left:0;top:0; width:100px;}
.content { margin-left:110px;margin-right:110px;}
.submenu { position:absolute; right:0;top:0; width:100px;}
</style>
<div class="menu">メニューです</div>
<div class="submenu">サブメニュー</div>
<div class="content">内容です</div>


320 名前: Name_Not_Found 投稿日: 02/11/01 21:17 ID:???
あれをやりたいのならテーブル使おう。


321 名前: Name_Not_Found 投稿日: 02/11/01 21:17 ID:???
>>318
スクロールしても画面上部に(フレームみたいに)残るやつのことか。


322 名前: Name_Not_Found 投稿日: 02/11/01 21:19 ID:???
<div class="menu">メニューです</div>
<div class="submenu">サブメニュー</div>
<div class="content">内容です</div>

をさらにdivで囲って
そのdivに位置を指定したらどうよ。
結構スマートでなおかつstrict(信者的)にかけそうだが


323 名前: Name_Not_Found 投稿日: 02/11/01 22:15 ID:???
>>322
信者的にはそれをDIV厨と呼んで忌み嫌っていますが何か?


324 名前: Name_Not_Found 投稿日: 02/11/01 22:27 ID:???
難しい言い回し遣うからバカが釣られてやがる。


325 名前: 316 投稿日: 02/11/01 22:48 ID:???
ご回答いただいたみなさんありがとうございます。

>>317
これだと内容の分量・文字数が多いとレイアウトが破綻しそうな。。

>>318>>320
W3C… http://www.w3.org/ まさにそうです。
ってソース見たらtableで組んでました…。

>>319
ありがとうございます。こっちでも確認できました。
ただ、これをひとつの固まりとして、繰り返されるようなデザインを
(左に日付とデータ・中に本文・右に脚注が入る日記サイトのようなもの)
考えているので、top0固定はちょっとキツイです。
<div>はあんまり美しくなさそうなので<li>の方がいいんですかね。

おとなしtableで組むか、
それともCSSでできる範囲内でのデザインを考えるか…。うーむ。


326 名前: Name_Not_Found 投稿日: 02/11/01 23:33 ID:xmznptSH
>>325
floatで段組すればぁ?
さんざん既出ですが、以下参照。
「CSSを用いた段組の作成のコツ 」
 http://www.fromdfj.net/html/column.html


327 名前: 319 投稿日: 02/11/01 23:33 ID:???
勢いで書いてから思ったのだが、tableで組むのがいちばん無難かな。
ともかく、CSS切ってもちゃんと表示できるようにすべきです。



328 名前: 319 投稿日: 02/11/01 23:36 ID:???
>>326
うーむ、floatの存在を忘れてた(w


329 名前: Name_Not_Found 投稿日: 02/11/01 23:37 ID:???
これでいいはず。>>325
<hr>〜<hr>までを繰り返す。
.menu { float:left; width:100px;}
.content { margin-left:110px;margin-right:110px;}
.submenu { float:right; width:100px;}
hr {clear:both;}
<hr>
<div class="menu">メニューです</div>
<div class="submenu">サブメニュー</div>
<div class="content">内容です</div>
<hr>


330 名前: Name_Not_Found 投稿日: 02/11/02 00:00 ID:???
長さはpxよりem単位がいいな。
文字サイズを大中小とどれにしても表示が崩れないからね。


331 名前: Name_Not_Found 投稿日: 02/11/02 00:27 ID:???
float厨うざい。
いったいいつからfloatは段組を作るためのプロパティーになったんだ?



332 名前: Name_Not_Found 投稿日: 02/11/02 00:32 ID:???
>>331
なってませんけど?
別に擬似段組に応用して悪いわけではあるまい。
下手に絶対配置をするより安全。うまくやればNN4でも崩れないし。


333 名前: Name_Not_Found 投稿日: 02/11/02 01:51 ID:7Be73KW+
ふと思ったんですけど
現在CSS未対応で見られてる人ってどんな環境の人ですか?
もうIE3の人なんて、きっとマニアぐらいですよね?
WinCEの人ぐらいですか?



334 名前: Name_Not_Found 投稿日: 02/11/02 02:19 ID:???
CE3.0で Handheld PCならIE4だ。
PocketPCはIE3。まあ、画面サイズ的にも辛いものがあるな。



335 名前: Name_Not_Found 投稿日: 02/11/02 02:22 ID:???
OperaにはCSSのON/OFFボタンが付いているので、
それをプチッと押してみることはある。
OFFにしてもほとんど変わらないサイトは
従来手法だということがわかる程度のことだが。

プチッとOFFにした時に、まるで違ったデフォルトのレンダリングで
きちんと見出しや段落などが区別されていて、
しかもONの時に表示されていた装飾用画像が一切表示されない
スッキリとした画面になると、ををっと思ったりする。

CSS未対応というより、CSSの実装の不具合の方が困るわな。
未対応なら放置でいいわけなので。


336 名前: Name_Not_Found 投稿日: 02/11/02 08:45 ID:???
>>333

たしかにたまにIE3の客が来たと思ったら、CEだったりする。

CE版はCSSは一切対応していないので、HTML部分がまともなら
まったく問題はない。むしろtableレイアウトを苦手としている(これは
CE機のCPU性能の問題もあるだろう)から、CSSデザインのほうが
よい。


337 名前: Name_Not_Found 投稿日: 02/11/02 09:36 ID:???
>>336
たまにDreamPassport/3.*(ドリキャス)とかいうお客さんが来るのだが、
これもCSS非対応なのかな?


338 名前: 297 投稿日: 02/11/02 09:55 ID:???
IE6での確認ですが、word-wrap:break-word はうまくいきませんですた。
word-break:break-all でうまくいきますた。
うれしいでつ。ありがとうございますた。


339 名前: Name_Not_Found 投稿日: 02/11/02 12:14 ID:???
クラス指定で .01 { 〜〜〜 } のようにした時に
IE以外ではCSSが適用されないのは何故ですか?


340 名前: Name_Not_Found 投稿日: 02/11/02 14:33 ID:???
>339
クラス名の1文字目には数字が使えない…だったと思うのです。

で私も知りたいことがありまして、CSSの仕様書で、クラス名に使える文字について
説明している部分を探しているのです。
5.8.3「class selectors」のあたりがクラスについて説明していると思うのですが、
どんな文字を使えるかについてはここではふれられてなくないですか?


341 名前: Name_Not_Found 投稿日: 02/11/02 14:43 ID:???
>340
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/syndata.html


342 名前: Name_Not_Found 投稿日: 02/11/02 14:45 ID:???
補足:
>340 の 「4.1.3 文字と活字ケース(Characters and case)」の項


343 名前: 340 投稿日: 02/11/02 15:27 ID:???
わーんありがとー>341-342


344 名前: Name_Not_Found 投稿日: 02/11/02 15:34 ID:???
>>340
そうだったんですか。私の持っている仕様書には
書かれていなかったので今まで知りませんでした。
そういう部分をもう少し詳しく書かれている仕様書
を探す事にします。ありがとう御座いました。


345 名前: 333 投稿日: 02/11/02 15:39 ID:???
ふとした疑問にまで答えてくださって嬉しいです。
CEはCSSよりもtableのほうが苦手なんですか!
CS非対応さんにも同じレイアウトで見てもらいたいから、と
テーブル使うとこでした。やめます。
ありがとうございました。


346 名前: Name_Not_Found 投稿日: 02/11/02 18:19 ID:???
「font」プロパティには「font-size」と「font-family」の値の指定が
必須だそうですが、「font-family」を特に指定したくない(ブラウザの
標準的なフォントで表示してくれればいい)場合は「inherit」を指定
しておけばいいんでしょうか。
body要素に「font:1em inherit」とか指定した場合でも、html要素の
font-familyを拾ってきてくれるのかな。そもそもhtml要素にはもと
もとfont-familyプロパティが指定されているのだろうか。


347 名前: Name_Not_Found 投稿日: 02/11/02 18:50 ID:???
外部スタイルシート使ってます。
ページ毎に背景画像を変えたいんですが、
htmlのHEAD内に書かなくても背景画像をページ毎に変えることは
可能でしょうか?


348 名前: Name_Not_Found 投稿日: 02/11/02 19:17 ID:???
>>347
bodyにclassなりidを振って変える


349 名前: Name_Not_Found 投稿日: 02/11/02 19:21 ID:???
>>347

bodyにセレクタ振れば?


350 名前: 347 投稿日: 02/11/02 19:38 ID:???
>>348-349
ありがとうございます。
早速やってみます!


351 名前: Name_Not_Found 投稿日: 02/11/02 23:30 ID:JSptGkie
CSSをページに埋め込んでやっているのですが
ページがなかなか開きません。
テーブルとかわらないくらい重いです。
画像もほとんど使用していないんですけど
タグ使いすぎなんでしょうか?
外部読み込みのほうが、すっきり早かったりするのでしょうか?



352 名前: Name_Not_Found 投稿日: 02/11/02 23:44 ID:???
>>351
style属性でちまちま指定しているのだったらHEADか外部にまとめれ。
つーかソースかURL晒せ


353 名前: ☆南幸☆ 投稿日: 02/11/02 23:46 ID:IYEtcIwK
http://www5e.biglobe.ne.jp/~nanko-m/index.htm


354 名前: Name_Not_Found 投稿日: 02/11/02 23:52 ID:???
>>353=351か?
画像以外はすんなり開いたぞ。(当方ISDN)
トップのソース見る限りCSSのかけらも無いが(w
ドリンク剤の画像サイズ落とせ。221KBってせめて10分の1にしろ。

つーか業者だな、まぎらわしい。


355 名前: Name_Not_Found 投稿日: 02/11/03 00:37 ID:???
ここは業者サイトを批評するスレになりました。


356 名前: 351 投稿日: 02/11/03 00:49 ID:2PAPBh6o
すみません、353とは無関係です。
CSsって、たくさん使用しても重くならないと
思ってたけど、そうじゃないんですね。反省。
すっかりDIVにハマっていました。
恥ずかしいのでソースも出せません。
 


357 名前: Name_Not_Found 投稿日: 02/11/03 03:45 ID:???
>>346
難しいこと考えずに、fontプロパティを使わなければいいだけでは。
font-sizeプロパティを単独で使えば済む話。
そもそもfontプロパティは簡略記述だし。
制作者が指定しない場合、ブラウザが自身のレンダリング
(フォントファミリなど)を実施する。それだけのこと。