/* CSS、スタイルシート質問スレッド【12】 */
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:???
3 :
1:02/10/18 15:31 ID:???
4 :
1:02/10/18 15:32 ID:???
5 :
1:02/10/18 15:33 ID:???
10 :
Name_Not_Found:02/10/18 20:32 ID:53E0J7kL
www.cssmaker.com
yahooに載ってたけど使えるの?
14 :
Name_Not_Found:02/10/18 22:23 ID:IasG4rAo
どっかのスレで「クラス名に"right"はよくない」ってみたんだけど、
なんでなんですか?
数字を使うのはよくないってのは知ってるんですが。
>>14 「右」だから
class、ID名はhtmlの内容に基づいて付けられるべきものです
>>16 でもまあ、見栄えを制禦するためのCSSなんだから、
見栄えから来たclass名があってもいい気がするけどね、私は。
>>17 代替シートはどうします?
「右」と名付けられた要素がどのシートでも右に来るとは限らないでしょう
>>17 いや、class属性の値はCSSだけじゃなくて、HTMLにも書かれるものだから。
というか、そもそもclass属性自体がCSSのために書くものじゃないし。
>>21 話が見えてない厨房はすっこんでて下さい。
>>14 > どっかのスレで「クラス名に"right"はよくない」ってみたんだけど、
> なんでなんですか?
見た目の「右」を制御するためのクラス名で無ければ、問題無いと思うよ。
例えば、以下のように。
<ul>
<li class="right">稲葉</li>
<li class="center">飯田</li>
<li class="left">ラミレス</li>
</ul>
クラス名も含めて、HTML に見た目を指定する痕跡を残さない方が、
CSS を書く上ではあとあと便利ですよーって話かと。
>>14 CSS(3)でそのページを縦書きにしたら「右」でなくなるかも。
ところでクラス名に数字ってほんとによくないの?
先頭でなければいいと思ったけど。
たとえば強調したいときに赤くしたので class="red" ってしてたけど
後になって青くして強調しようと思ったときマズーだから
っていうのでもあってるかな?
>>25 強調なら<em>や<strong>といってみる
>>25 まあそういうことです。てゆーか、それに尽きます。
一時の気まぐれをhtml中に持ち込むと、後々面倒だというのは
やっているうちにわかってくる。
一時の気まぐれでなくても後々変えたくなるものは出てくるがね。
>>27 確かに面倒だね。確かに。
文書構成・構造の正しい理解がない俺は、いつも後で息詰まってる。
最近、ようやくこなれてきた感じかな。
class="red"で赤くしたり、class="right"で右寄せしたりするのは
レガシーな物理マークアップをしてるのと大差ないと思う。
31 :
14:02/10/18 23:57 ID:???
たくさんのレス、ありがとうございます。
つまり、クラス名は「どうしたいか」という基準で名前を
つけるのはよろしくない、と。
えっ!?
いやまあ、彼なりに分かってるんだと思う。
>>19 >というか、そもそもclass属性自体がCSSのために書くものじゃないし。
でも、class属性がCSSのセレクタとして以外に利用される場合ってありますか?
では実際に、右寄せするだけの指定に対し、みなさんならどんなclass名を付与しますか?
.right {text-align:right;}
とか
.right {float:left;width:50%;}
とかですが。
text-align:left/center/rightをそれぞれmitame1,mitame2,mitame3とするとか?
他にうまい名が浮かびません……。
あんたみたいなひとがいるから後方互換がなくなるんです、この野郎。
?
>>35 1から読め。根本的にそういう名づけ方はおすすめできない。
どんな要素について右寄せするのか、ということを考えよう。
39 :
35:02/10/19 02:37 ID:???
>>38 >どんな要素について右寄せするのか
要素は特に決まってなくて、或る位置のpだったり或る部分のciteだったり任意で、
見た目のデザイン上右寄せしたいものです。
だからclass名が無くて困ってるんです。
どう対処すればいいですか?
id振れば?
>>40 それだと、セレクタが異様に肥大化することになりますね。
ID1, ID2, ID3, ……IDn {text-align:right;}
クラス・セレクタ一つだけの簡潔性に如かず。
.class1 {text-align:right;}
>>39 そっちの意味の要素じゃなくて、
右寄せしたい部分の内容に則ったclassを振ればってことでしょ。
43 :
35:02/10/19 03:19 ID:???
>>42 >右寄せしたい部分の内容に則ったclassを振ればってことでしょ。
右寄せしたい部分が場合によってさまざまで、
それらの内容に統一された性格が無いわけです。
だからclassを振るにも“right”とでもする以外、案が出ないんですよ。
そこまでこだわるなら、デザイン上なぜ右寄せにしたいのか理由を述べなさい、この野郎。
発想からして違うな
意味もなくあっちにやったりこっちにやったりすな
としか言えん
正直おれも
>>35といっしょのことしてる(・∀・)イイヨネ
classは内容に即したものを与えて、
何を右寄せするかといった選択はCSS側でやればいい。
論理構造とデザインの分離ってそういうことじゃないの?
>>5 > Macintosh版 Internet Explorer 5 や Netscape 6 では正しく計算されます。
> Windows版 Inernet Explorer 6 の標準準拠モードでは、正しく計算されるようになりました。
MacIEも正しく計算するのは標準準拠モードのときだけだったはず
>>34 スクリプトで特定のclassをふられた要素のコレクションを取得する時などに便利です。
>>41 .right { text-align:right; }
よりも
#header, #navigation, #footer { text-align: right; }
のほうがまだマシだとおもう。
ほんの数文字の差で前者を選ぶのはエレガントではない。
idの数が異様に多くてKB単位のセレクタになってしまうのなら、スタイルシートの記述を根本的に考え直した方がいい。
例えば、共通の親にtext-align:rightを指定して、左寄せする部分だけclassなり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名を振ってるわけで。
適用される要素はページによって様々で、一定しないから、内容による名前の付与ができない。
いい方法があるならどうかご教示ください。
>>50 漏れは
.right { text-align:right; }
でいいや〜。
エレガントではないけど、CSS的に間違ってるかもだけどスマートだし〜。
名前考えるのめんどっちぃし〜。
〜〜〜ヽ(´ー`)ノ
最初に書くときはめんどっちいし適当でいいや〜
と思うんだけど、あとでスタイル変えたくなったときに泣くハメに
スタイル変更するたびにHTMLにまで手を加えなけりゃならんのは
「論理構造とデザインの分離」とは言えない
定義語リストを使って、例えば図のようなセンタリング
(dtとそれに続くddを1行にして、その行全体をセンタリング)をするには
どのようなCSSにすればいいでしょうか?
dtの内容=●、ddの内容=○
●●○○○○○○
●●●●●○○○○○○○
●●○○○○○○○○
●●●●○○○○○○○○○○
●●●●○○○○
>>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>
こんなんでどうよ。
<br>かよ…
>>52 .leftcol > .col-main (左のカラムが本文の場合)
.rightcol > .col-menu
.clear > .clearer
内容によっては
.leftcol > .col-content
.rightcol > .col-description
かもしれない。
>>52のものとの違いが分かりますか?
>>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; }
対応ブラウザが少ないのは、私の不徳の致すところであります。
今回の件につきましては、これにて御容赦願えませんでしょうか。
>>56 dt{display:run-in}
dd{text-align:center}
でいいんじゃねーの?
macのie5とoperaしか対応してないけど
● ●
● ●
● ● ○
● ●
● ●
● ワーワー
● ●
● ○ ●
● ●
●●
● ワーワー
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
実際試してみればいいのでは
>>67 Windowsなら試せますが、Macまで手が回りません。
それに自分の解釈が合ってるかどうかの自信もありません。
Mozillaが100%正しいってわけでもないみたいですし。
じゃあ無理では
>>69 そんな…
WEBサイトはともかく、本は金取るくせに
こんないい加減なことでいいのですか…
だからよ なんでここで文句言ってんだよ アフォか?
著者に聞けや
そんなきわどいプロパティ使わなくても効果的なサイトデザインは十分できると思うがなあ。
あなた自身が本を出すのでもなければ何もそこまで血まなこで情報集めなくても。
すいませんでした。文句言いたかったのではなく、
信用できるのを教えて欲しかったのです。
3冊見たら、3冊とも違う事が書いてある所があったので
何なんだこれは?と思った次第であります。
違う事書いてあるのは使わないようにします。
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を軸にどのブラウザでも違和感なく表示させたいと思います
>>75 横と縦の関係がはっきりしているからtableでもいいんじゃねえの?
>>60 >
>>52のものとの違いが分かりますか?
いやあ、わからんね。.clear と .clearer とで何が異なるってのさ?
(
>>51-52が尋ねたのは.leftcolではなく.clearの方ですぜ)
結局、class="right"と大差無いんでは? 解決になってない。
>>61 contentなんかに頼らずとも、<br>を<dd></dd>の中に入れれば済む話やんけ。
>>66 対応、非対応の基準が違うだけでしょ。
厳しい人と甘い人、いろいろいるからね。
80 :
Name_Not_Found:02/10/20 02:02 ID:A6d5k0hl
表示に直結する命名を否定したのに clearer じゃ
煽られて当然だな。
> 「論理構造とデザインの分離」する命名法
なんてあるとしても文書それぞれでしょ。
どっかにページうpすれば誰かが適切にアドバイスできるかもねえ。
>>82 てゆかbrに論理的なclass名を付けるのは無意味でしょ。
それ自体すでに物理要素だから。
違うサイトに置いたcssを読み込んで使うことは不可能?
>>84 「違うサイト」とは、異なるWWWサーバのことですか?
サーバAのCSSをサーバBのHTML文書に適用する、といった形でしょうか?
Aが外部からのリクエストに制限を加えていなければ可能ですよ。
一度お試しになってはいかがでしょう。
86 :
Name_Not_Found:02/10/20 09:18 ID:oJ6U1AhQ
<A> の属性 `TARGET` はあまり薦められない属性です。
と怒られたのですが、CSSでTARGET指定はできるのでしょうか。
Final Answer?残念。ぼくが。
body { color: #000000; background: #f5f5f5 url(../images/hoge.jpg) repeat }で
背景画像の設定を行ったのですが、NN4以外のブラウザで反映されません。相対パスで
指定したのがいけないのか、と絶対パスで記述したものをWebにあげても見たのですが
ダメでした。
記述上の勘違い・誤りがあれば御教授いただけませんでしょうか。よろしくお願いします。
自己レスです。
body { background-color: #f5f5f5; background-image: url(../images/hoge.jpg) repeat }
おもいっきり属性が記述されてませんでした。GoLive6のCSS設定機能に頼り切った
のが原因のようです。大変失礼しました。
>>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;}
>90
GoLiveってよく「外部CSS記述には強い」と聞いていたんだけど、その自動生成ソースは
かなり無茶苦茶ですな。
95 :
sage:02/10/20 13:02 ID:???
>>94 90の何がダメなのか、わかんない・・・なんで?
body{color:#000; background:#f5f5f5 url("../images/hoge.jpg") repeat;}
ってダメなの?
勘弁してくれよ…
どうなってんだこのスレ
repeatって何さ。
repeatじゃなかった。
簡略化プロパティを知らない人がいたのかな?
>101
Mac版ネスケ7/IE5.1.6に外部.cssを読み込ませて試したけど、簡略化
プロパティを認識しない。Win版IEとOperaは持ってないから分からん。
>93の記述だと、今度はネスケ4.08が認識しない。
正直わけがわからん。面倒だけどネスケ専用.css設定するしかないみたい
簡略化プロパティについてのバグ?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設定するしかないみたい
報告書こうとして誤爆した、すまそ
幅固定したサイト作ってます
それを中央に配置したいんです
すべてdivで囲って
div{
margin-right : auto;
margin-left : auto;
}
でやちゃっていいものですか?
また、↑right left autoを省略して書けたと思うんですけどどう書けばいいんでしたっけ?
margin: 0 auto;
デザインなんか指定しない方がいい
サイトによってナビゲーションの表現もまちまちになって
全体的にユーザビリティが低下する
>>109 div{
margin-right : auto;
margin-left : auto;
width: 幅値;/*これを忘れるとmargin:autoだけではセンタリングにならないヨ*/
}
幅値;/*半角じゃないとだめだヨ*/
116 :
109:02/10/20 21:14 ID:???
みなさんありがとうございます!
勉強になります!
幅固定してるのは
カスイケリンク集登録サイトの方々のような
長い文章が書けないからです
(個人サイトでもないもので。)
幅固定しなくてもすっからかんなイメージにならない
ようなサイト作りを勉強します!
ありがとう!
>>60 で、結局
>>51-52のclass="clear"に対して
.clearerよりマシな代案は無いんですか?
>>117 そもそもクラスを振らないで
#main p + br
のようにセレクタの記述で指定してやる。
ただ、シェア最大の某ブラウザが
セレクタ関係の実装がボロボロなんだよね。
>>118 やはり現状ではclass属性は、CSSのためにあるものなんですねえ……。
まづCSSありき、で、クラスが振られるってことで。
そんならstyle属性使ってろよ
121 :
Name_Not_Found:02/10/21 01:15 ID:EzQeaT4u
携帯端末のCSS対応度ってどの程度なんでしょ?
ドリーム・キャストなみ? 考慮しなくてもよい?
>>114 marginのauto指定はIEは認識しないんじゃ?
125 :
Name_Not_Found:02/10/21 23:50 ID:eHJvEL3v
無印の<br>は改行せず、<br class="hoge">は改行するようなスタイルシートを
作りたいのですが、うまくいきません。
こんなことできるんでしょうか?
>>125 display:none;の応用とか、やり方によってはできるブラウザもあるみたいだが、
そんな無駄な<br>を挿入する位なら
インライン要素に対するdisplay:block;とdisplay:none;を活用してはどうか。
誤>インライン要素に対するdisplay:block;とdisplay:none;を活用してはどうか。
正>インライン要素に対するdisplay:block;とdisplay:inline;を活用してはどうか。
皆様はdisplay:none;したいあれやこれやの箇所に、どんなclass名を振ってますか?
class="none"ではダメなんでせうか。
>>129 classは付けずにセレクタによって指定している。
状況依存セレクタっすね
うふふ
……?
HTML+CSSを理解してない人多いけど
一度代替スタイル試してみれば解ると思うんだよね
オフラインででも
他人の代替シートを適用された時にヘンにならぬためにも
classを振ってるのだが。
135 :
Name_Not_Found:02/10/22 11:55 ID:0qAfb4b8
テーブルを半透明にしたいと思い、
style="filter: Alpha();"を記述してみますた。
MacIE5では、半透明にならないのですが、
Win&Macともに半透明になるようにするにはどうしたらよいのでしょうか?
ネスケは無視してくださって結構です
>135
IEだったら同じ動作するなんて期待しても無駄。
>>135 background:trasnparent;でいいんでないの?
filterなんて使いなさんな。レンタリングが遅くなるし、いいことないよ
半透明なんて誰も求めてないし、透明でがまんしなさい。
あまり独自拡張使うと、Webオンチになるよ
138 :
Name_Not_Found:02/10/22 12:08 ID:0qAfb4b8
>>136 >>137 レスありがとうございます
background:trasnparent;を使って、半透明に近い色を指定してやってみます。
>>138 いや、近い色というかtransparentはとにかく透明。
背景画像にぼかしをつけた画像を指定し、ボックスの枠などに
transparentを指定すれば、半透明に見えなくもなくなくなくなくなくないかもね
140 :
138:02/10/22 12:25 ID:???
勉強してきます。
スマソ
セレクタの複数宣言で、大量にセレクタを宣言するときって書き方どうしてる?
改行は含められないから見辛くて仕方が無いんだけど...
JIS Z 8301 規格票の様式
これに沿ったレイアウトのスタイルシートどっかにありません?
145 :
Name_Not_Found:02/10/22 21:48 ID:VkId/p2C
同じページにtableが2つ有って、
このtableは全tdのフォントサイズ90%で、
このtableは全tdのフォントサイズ80%で、
というような一括指定方法が有ったら教えて下さい。
>>145 tableになんかclassつけて(仮にaとbとする)
table.a td{font-size: 90%}
table.b td{font-size: 80%}
一つのテーブル(又は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 どうせなら
table.main
table.sub
といった例を
151 :
Name_Not_Found:02/10/22 23:13 ID:PBAlrdU+
フレームで2分割した画面のメニューに使う方に、
フォトショップで自分で作ったタイトルや各種のボタンなどを
GoLiveのレイアウトグリッドという機能を使って貼り付けて
いるのですが、
これだとモニタでブラウザの半分の画面で表示させているのを
最大化させた場合、
ボタン間とタイトルの距離が画面が半分のときと同じで
もう半分が空きスペースになってしまいます。
これはスタイルシートを使ったらブラウザの画面を最大化しても
半分くらいにしてもその時の画面一杯で表示させることができ
るのでしょうか?
もし可能ならその方法を教えて欲しいのですが。
>>151 GoLiveの機能とか言われてもソース貼らなきゃわからん。
位置やサイズを%とかで適宜指定すればいいんでねーの?
154 :
Name_Not_Found:02/10/23 16:59 ID:RWvbMjT4
idとclassはどう使い分ければいいんでしょうか?
イデッてときはid
クラッときたときはclass
ワラタ。w
>>154 単にCSSのセレクタとして使うだけならclass。
>>154 意味からして混同しようがない。
辞典引けYO!
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作成をしています。
角丸テーブルを作ろうと思ってるのですが、タグを教えて下さい。
(素材に入ってるものには気に入った素材がないので。。。)お願いします。
>>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ではリストのマークが消えてしまい駄目でした。
よろしくお願いします。
>>160 >マウスを離しても下線が消えない、というもの。
a:linkの初期値がtext-decoration:underline;なので当り前かと。
>>165 floatを応用すれば?
>>164 >ラジオボタンの大きさをスタイルシートでいじることは可能ですか?
できません。
>それと、ラジオボタンやチェックボックスの選択と非選択で
>CGを割り当てたりすることはできるのでしょうか?
それはCSSではなくCGIかJavaScriptの仕事です。
>167
いや、たぶんラジオボタンそのものを変えたいんだろう。
169 :
165:02/10/24 13:53 ID:???
>>166 さん
ありがとうございます。
早速、floatを試してみましたが、今度はレイアウトが著しく崩れます。
もう少し研究してみます。
>>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以外は最初から正常に表示しています。
もう諦めます。スマソ
>>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
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に戻したいと言うことです。
>>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 早速のレスありがとうございます。
具体的には、イベントでクラスをかえるにはどうしたらいいですか?
>>178 具体的にどうしたいのかはっきりしているなら、最初からそう言えよ
と、答えられもしないのに煽ってみるテスト
180 :
175:02/10/24 20:02 ID:Xys0tmFt
javascript使わずにブラウザ別にCSSを振り分けることは出来ますか?
183 :
160:02/10/24 21:14 ID:???
>>172 > そもそもvisibilty:hiddenで括ったら、表示されないはずだけど? それが効いてないってのからしてヘンだよ。
スマソ。言ってなかったけど、visibilty:hiddenで隠しておいて、違う画像のマウスオーバーでサブメニューみたいなもんを表示するって仕組みなんですよ。
position:relativeにするとまた自分に出来ないことしなきゃなんないし、、。
やっぱ、バグってことなんですかね、、。
( ´Д⊂ヽ
>>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の中のリンクだけ全部まとめて
色を変えるようなことってできますか?
>>186 div.age a {color:red;}
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となるようですが。
>>189 >IEでもMozillaでも動作はage:1 sage:1となるようですが。
で正解
>>189 肝かどうか分からんけど、文脈セレクタ駆使してclass使用を減らすのが最近楽しい。
このことに触れているページが見つけられなかったので
質問いたします。
CSSの記述の仕方で
A:link{font-size:10px;}
と
A:link{font-size:10px}
最後の「;」は正しくは必要なのでしょうか?
どちらも同じ効果になるので、気になって仕方ありません。
よろしくお願いいたします。
>>192 "{"と"}"の間には"property:value"という形の文を書きますが、
複数の文を書く場合、一つ一つの文の間に";"が区切りとして必要です。
ですから、";"で改行するような形が一般的によく取られています。
そういうわけなので、本来最後の文の後の";"は必要ありません。
ですが、あってもエラーにはなりませんので、";"で改行するコーディング
スタイルで統一している人は、混乱を避けるためにも、最後の文にも";"を
付けていることが多いです。
あってもなくてもいい。
スタイル追加するとき便利なのよ
クセ付けとくとよろし
>>189 後に書かれた記述が優先される。
後から書かれたものが、前に書かれた指定に上書きされる、と考えると、
直感的でおぼえやすい。
197 :
192:02/10/25 21:14 ID:???
詳しい説明をありがとうございました。
今までの悶々とした気分が消え、すっきりです。
外部ファイルのスタイルシートを利用して
tableを中央に配置したいのですが、
どのように記述すればいいのでしょうか?
ぼくの人生を、人生の花道の中央に無理やり配置したいのですが、
誰を蹴落とせばいいですか?
女子供。
>>201 誰もけ落とさない。
自分が努力する。
そうすれば道は開ける。
腰は低く、志は高く!!
>>202 早速のレス、ありがとうごさいます。
女子供ですか・・・、あまり気乗りがしません。
>>203 ありがたい言葉ありがとうございます。ものすごく、感銘を受けました。
腰は低く、志は高く。いい言葉ですね。精進します。
>>201 駅のホームからか?
タイミングはよく見極めろよ
>>201-206 一瞬、板を間違えたのかと思いますた。
・・・ここってB級グルメ板でいいんだよね?
208 :
Name_Not_Found:02/10/25 23:56 ID:mjuG44MV
tableのcellpaddingをcssで指定したいです。
どうやって記述すればいいですか?
th, td {
padding: 5px;
}
>>210 table-cellへのmargin指定は無効。
tableにborder-spacingを適用すべし。
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のバグ?
HTML 4.01 ってなんだろう(´Д`;
バグでもなんでもねーじゃん
>>212 DOCTYPEスイッチの作用です。
正常な動作です。
Transitionalだとできないのか
>>214 >正常な動作です。
ということはネスケのバグか?
>>216 IEは後方互換を維持するため、そういう実装になっている。
Netscape7の挙動に問題は無い。
まあいってみりゃautoってのは「ブラウザにおまかせ!」って解釈で
いいような気がする。
>>220 誤爆?
tdにmargin設定できないよ。
marginは
Applies to: all elementsだよ。
ブラウザが対応してないだけじゃないの?
やってみたけどmargin効かないね。WinIE6
DOCTYPEによってHTMLの解釈を変えるなら兎も角、CSSの挙動を変える
とはこれいかに
>>225 標準仕様にそぐわないデファクトスタンダードをNetscapeとMicrosoftが作ってしまった弊害です。
IE7はタブブラウザだそうだが、そんなことよりレタリングエンジンを1から書き直してもらいたいな。
もちろん標準に沿ったものを
スレ違いスマソ
皆さんは、bodyに指定するようなフォントカラーとかリンクカラーも別ファイルのCSSで指定しますか?
>>230 ふつーに別ファイルから指定してるよ。
ページがたくさんあるなら尚更。
Mozクラスになったとしても、結局旧IEを意識せざるを得ないんじゃないか。
今におきかえると、IE5は切り捨て、というわけにもいかないだろう。
レンダリング…
IEでレタリングする方法を教えてください
はぁ?お前ら何言ってんだ?
レタリングで何が悪いんだ?
英語の発音に近いのはレンダリングかも知れないがな。
>>236 適当なHTMLファイルをIEで開け。HTMLをパースして、それに基づいて
レタリングしてくれる。
>>237,238
レタリングつったら画像の事だと思ってるなんておめでてーな。
たしかに3DCGでレタリングつったらテキストなんて関係無いがな、
テキストだけのWEBページでもブラウザはレタリングするんだよ。
レタリング【lettering】 視覚的効果を考えて文字をデザインすること。そのような文字を書くこと。
>>239痛すぎるよ君
レタリング [lettering]
レンダリング [rendering]
これはネタだな。こんなバカが実在するわけがない。
243 :
Name_Not_Found:02/10/26 22:20 ID:t3P2jQn6
とりあえずage
244 :
239:02/10/26 22:33 ID:???
たくさん釣れたな(プププ
次の質問どうぞ↓
246 :
Name_Not_Found:02/10/26 22:40 ID:25AE9CPP
ブラウザのサイズに関係なく、
左右両隅に画像を置く場合、
どのようにスタイルシートを指定すればよいでしょうか?
dejavu...
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
ここでも宣伝してやがる
254 :
Name_Not_Found:02/10/27 18:45 ID:6Ss1XJwR
リンクやフォームクリック時に表示される点線を消したいのだが、CSSなんかで一括して指定できないんでつか?
それぞれにonFocus="this.blur"を打つのはめんどくさい。
スレ違いかも知れないですが、こちらのほうがいいと思うので
IE6ダウンロドしたんですけど、スクロールバーのスタイルって読み込まれます?
みんなデフォルトで表示されるんですけど。
今まで、スクロルバーも全体のデザインの一部に考えてたんでちと鬱
もうちょっと落ち着いて書け
257 :
255:02/10/27 20:26 ID:???
259 :
Name_Not_Found:02/10/27 20:46 ID:CIRFmSki
1 2
3 4
4つの文のかたまりがあってCSSを使って上の様に配置したいのですが
どのようにすればよいのでしょうか?
floatとclearを使って色々やってるんですが一向にうまくいきません。
どなたかご教授願えないでしょうか。
>>259 widthの指定はちゃんとしてる?
あと、ソース貼って聞いた方がいいよ。
>>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だけでもっと綺麗に出来ないかなぁと思いまして。。。
>>261 これでbrは要らない。
#3 {clear:left; float:left; width: 50%; }
>>261 widthは足して100%よりちょっと少なめになる位がいいよ。
それぞれ各width:49%;とか。
その方がウィンドウ幅を狭くした時も崩れないから。
>>262 返信ありがとう、ありがとうございます。
綺麗に表示されました。
本当にありがとうございました。
サイト作成がんばるぞー
>>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では、どの様に
プロパティーと、値を指定すれば良いのでしょうか?お願いします。
>>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>
>>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を隙間無く右隅に置いて置きたいんですが。
ページ自体をリサイズしても、同じ様な位置に置いて
置きたいんです。
>>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で数値は適当にって入れてたんだけどね…
>>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 ;
}
>>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 を入れたくて。
こういう目的は不純なのはわかるが。
>>280 互換モードで見たいなら、DOCTYPE宣言をTransitionalのものに変えてみては。
284 :
Name_Not_Found:02/10/28 19:48 ID:SEV51hqG
286 :
284:02/10/28 19:53 ID:???
訂正
誤>この子要素のdivをtableにすればいいだけでしょ。widthも指定して。
正>この子要素のdivをpにすればいいだけでしょ。widthも指定して。
どっちにしろ、FAQも読まないで質問してはいかんよ。
>>266
287 :
279:02/10/28 19:58 ID:???
>>281 漏れも同じような書き方してるからtextとつけてるが…
この命名はW3C信者的に良いのだろうかとふと不安になってきた。
色指定でWindowsのシステムの色(窓の色とか)が指定できるのは
もちろんIEの拡張なんですよね?
あと背景色なんかにグラデーションなどは使えませんか?
フィルタですか?
>>289 IEの拡張ではありません。しかしWindowsのシステムの色はWinIEしか対応しません。
フィルタです。
>>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入れるから名前付けるのに困るんだ
って言われればそれまでだが。
>>292 >なんかこういう命名規則のガイドラインとかあると便利なのに
たしかに便利だけど、どうせそれだったら、最初からそういう要素を
用意してほしいと考えるのは俺だけだろうか。
自分でDTD書け、と言われたらそれまでだが。
プログラムの変数名とかもそうだけど、慣れれば自分なりの定型ができてくるもんだよ。
>>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>がいいのかもしれませんが)
>>298 overflow:scroll あたりではみ出したぶんをスクロールさせるくらいしか手はないと思う。
300 :
297:02/10/30 02:32 ID:???
縦横幅を固定しているわけではないので、overflow:scrollは効きませんですた。
ちょっと調べてみたら、Deltaの掲示板でもはみ出してますね。
>>297 word-break: break-all
むしろ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です。
>>304 absoluteした要素の包含ブロックは
positionプロパティ(static以外)が指定された祖先要素。
divにposition: relativeなり指定しないと駄目です
306 :
Name_Not_Found:02/10/31 22:38 ID:8yfPjYZ9
ブロックにheight:100%と指定しても他の要素がウィンドウサイズより大きかった場合
スクロールすると100%のブロックがウィンドウサイズの大きさで切れてしまいます。
tableにheight="100%"と指定したときと同じようにできないでしょうか?
CSSを分かり易く説明してるページありますか?
全くCSSはやったことないんで、よろしくおながいします。
>>306 ブロックに%指定した場合はそのブロックの最も近い祖先ブロックの内容辺が元になる。
祖先ブロックがない場合は初期包括ブロックが元になる。
初期包括ブロックはUAが自由に定めることが出来るが、大抵のUAはその時点での
観閲領域を元にする。つまり切れて当然。
TABLEで%指定した場合何を元に算出するか決まっていない。
(普通は最小限の値かないように合わせた高さになると思うが)
他の要素を含む包括ブロックに入れろ。
310 :
307:02/10/31 23:23 ID:???
311 :
Name Not Found:02/11/01 10:12 ID:R2gwZ3Hj
イメージマップでborderを設定して、斜めとか円とかの表現はできますか?
また、イメージマップ以外でhtml、cssでは斜めの表現できますか?
チャート図?みたいのを作りたいのです。価格.comみたいなやつ。
よろしくおねがいもうしあげたてまつりまする。
>>311 できません。
画像を使用すべし。
IE独自拡張のフィルターで廻転させれば斜めも表現できるけどね。
313 :
311:02/11/01 10:50 ID:R2gwZ3Hj
>>312 そうですか・・できませんか・・・。
ワッカリマーシタ
ありがとうでございまあした。。。
もしくは SVG の普及を待て
待たずに使って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>
.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、勘違いは許して名。
>>316はW3Cのトップページみたいのを作りたいと言っているのだと思うが……
>>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>
あれをやりたいのならテーブル使おう。
>>318 スクロールしても画面上部に(フレームみたいに)残るやつのことか。
<div class="menu">メニューです</div>
<div class="submenu">サブメニュー</div>
<div class="content">内容です</div>
をさらにdivで囲って
そのdivに位置を指定したらどうよ。
結構スマートでなおかつstrict(信者的)にかけそうだが
>>322 信者的にはそれをDIV厨と呼んで忌み嫌っていますが何か?
難しい言い回し遣うからバカが釣られてやがる。
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
327 :
319:02/11/01 23:33 ID:???
勢いで書いてから思ったのだが、tableで組むのがいちばん無難かな。
ともかく、CSS切ってもちゃんと表示できるようにすべきです。
328 :
319:02/11/01 23:36 ID:???
>>326 うーむ、floatの存在を忘れてた(w
これでいいはず。
>>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>
長さはpxよりem単位がいいな。
文字サイズを大中小とどれにしても表示が崩れないからね。
float厨うざい。
いったいいつからfloatは段組を作るためのプロパティーになったんだ?
>>331 なってませんけど?
別に擬似段組に応用して悪いわけではあるまい。
下手に絶対配置をするより安全。うまくやればNN4でも崩れないし。
333 :
Name_Not_Found:02/11/02 01:51 ID:7Be73KW+
ふと思ったんですけど
現在CSS未対応で見られてる人ってどんな環境の人ですか?
もうIE3の人なんて、きっとマニアぐらいですよね?
WinCEの人ぐらいですか?
CE3.0で Handheld PCならIE4だ。
PocketPCはIE3。まあ、画面サイズ的にも辛いものがあるな。
OperaにはCSSのON/OFFボタンが付いているので、
それをプチッと押してみることはある。
OFFにしてもほとんど変わらないサイトは
従来手法だということがわかる程度のことだが。
プチッとOFFにした時に、まるで違ったデフォルトのレンダリングで
きちんと見出しや段落などが区別されていて、
しかもONの時に表示されていた装飾用画像が一切表示されない
スッキリとした画面になると、ををっと思ったりする。
CSS未対応というより、CSSの実装の不具合の方が困るわな。
未対応なら放置でいいわけなので。
>>333 たしかにたまにIE3の客が来たと思ったら、CEだったりする。
CE版はCSSは一切対応していないので、HTML部分がまともなら
まったく問題はない。むしろtableレイアウトを苦手としている(これは
CE機のCPU性能の問題もあるだろう)から、CSSデザインのほうが
よい。
>>336 たまにDreamPassport/3.*(ドリキャス)とかいうお客さんが来るのだが、
これもCSS非対応なのかな?
338 :
297:02/11/02 09:55 ID:???
IE6での確認ですが、word-wrap:break-word はうまくいきませんですた。
word-break:break-all でうまくいきますた。
うれしいでつ。ありがとうございますた。
クラス指定で .01 { 〜〜〜 } のようにした時に
IE以外ではCSSが適用されないのは何故ですか?
>339
クラス名の1文字目には数字が使えない…だったと思うのです。
で私も知りたいことがありまして、CSSの仕様書で、クラス名に使える文字について
説明している部分を探しているのです。
5.8.3「class selectors」のあたりがクラスについて説明していると思うのですが、
どんな文字を使えるかについてはここではふれられてなくないですか?
補足:
>340 の 「4.1.3 文字と活字ケース(Characters and case)」の項
343 :
340:02/11/02 15:27 ID:???
わーんありがとー>341-342
>>340 そうだったんですか。私の持っている仕様書には
書かれていなかったので今まで知りませんでした。
そういう部分をもう少し詳しく書かれている仕様書
を探す事にします。ありがとう御座いました。
345 :
333:02/11/02 15:39 ID:???
ふとした疑問にまで答えてくださって嬉しいです。
CEはCSSよりもtableのほうが苦手なんですか!
CS非対応さんにも同じレイアウトで見てもらいたいから、と
テーブル使うとこでした。やめます。
ありがとうございました。
「font」プロパティには「font-size」と「font-family」の値の指定が
必須だそうですが、「font-family」を特に指定したくない(ブラウザの
標準的なフォントで表示してくれればいい)場合は「inherit」を指定
しておけばいいんでしょうか。
body要素に「font:1em inherit」とか指定した場合でも、html要素の
font-familyを拾ってきてくれるのかな。そもそもhtml要素にはもと
もとfont-familyプロパティが指定されているのだろうか。
外部スタイルシート使ってます。
ページ毎に背景画像を変えたいんですが、
htmlのHEAD内に書かなくても背景画像をページ毎に変えることは
可能でしょうか?
>>347 bodyにclassなりidを振って変える
350 :
347:02/11/02 19:38 ID:???
351 :
Name_Not_Found:02/11/02 23:30 ID:JSptGkie
CSSをページに埋め込んでやっているのですが
ページがなかなか開きません。
テーブルとかわらないくらい重いです。
画像もほとんど使用していないんですけど
タグ使いすぎなんでしょうか?
外部読み込みのほうが、すっきり早かったりするのでしょうか?
>>351 style属性でちまちま指定しているのだったらHEADか外部にまとめれ。
つーかソースかURL晒せ
353 :
☆南幸☆:02/11/02 23:46 ID:IYEtcIwK
>>353=351か?
画像以外はすんなり開いたぞ。(当方ISDN)
トップのソース見る限りCSSのかけらも無いが(w
ドリンク剤の画像サイズ落とせ。221KBってせめて10分の1にしろ。
つーか業者だな、まぎらわしい。
ここは業者サイトを批評するスレになりました。
356 :
351:02/11/03 00:49 ID:2PAPBh6o
すみません、353とは無関係です。
CSsって、たくさん使用しても重くならないと
思ってたけど、そうじゃないんですね。反省。
すっかりDIVにハマっていました。
恥ずかしいのでソースも出せません。
358 :
346:02/11/03 14:46 ID:???
>357
説明が悪くてスイマセン。
太字にしてfont-sizeとline-heightを同時に指定したいとき、
「font-weight:bold;font-size:1.2em;line-height:1.5em;」
を
「font:bold 1.2em/1.5em inherit」
みたいに簡単にすませられればいいなと思ったんです。
font-styleの値の指定はfontプロパティでは必須だから、ブラウザ
標準のフォントで表示してもらいたい場合「inherit」を使えばいいの
ではないかと思った。
しかし、body要素に上のようなfontプロパティを指定してもよいのか?
という話なのでした。
(body要素に上のようなfontプロパティを指定したくなるかは別の話で)
簡略化プロパティはブラウザ選ぶところもあるし、
あまりきわどい使い方しない方が安全じゃないかな。
分割すれば確実なんだし。
bodyにinheritでDepends on UAの意には確かになりそうだけどね。
それ以前にWindowsIEでinheritは効かない
きくつーの。
362 :
357:02/11/03 20:43 ID:???
>>358 fontプロパティは、
font-style、font-variant、font-weight、font-size、line-height、font-family
などが指定できる。サイズとファミリは省略しないことを勧められるが、
いずれにしても省略された値は仕様書上では「初期化」される。
これを踏まえてinheritで明示してもCSS"2"を正しく実装しない
ブラウザでは動作は保証されない。
というより、現実のブラウザの実装では初期化されないで継承するものもある。
# むしろ省略したのだから継承されると誤認されているケースもある。
ブラウザが過渡期的状況ではターゲットとするブラウザの実装に合わせるか、
重要と思うセレクタにアヤシイものは使わないのが吉。
みなさん、class と id の名称どんなのにしてますか?
作っているうちは良かったのですが
後から見直してみると不思議な名前ばかりで
もう何がなんやら……
オレもだよ>不思議
historyとか打つの面倒で hstrとか、「文字列」しか思いつかん名前だ(;´Д`)
image->imgはまだ分かるけどw
なんか打つのが面倒ということもあって
6文字以下くらいに収まってます(藁
ちょっと他人のclass名でもパクろうか。
>>363 .red {font-color:red}
div.bar1 { background-color: #cccccc;}
div.bar2 { background-color: #ccccff;}
.big {font-size: large;}
.wide100 { width: 100%}
.red_wide100 { font-color:red; width: 100%;}
ナイスジョーク ナイスジョーク
ごめんなさい。
.box{font-size:80%; margin:0 0 16px 0; width:200px}
.box .a1{color:#ffffff; background:#666666; padding:2px 2px 1px 2px; margin:0 0 0 0; border-bottom:1px solid #000000; text-align:center}
.box .a2{color:#000000; background:#999999; padding:4px 2px 1px 2px; margin:0 0 0 0; border-bottom:1px solid #000000}
.box .a3{color:#000000; background:#cccccc; padding:1px 2px 4px 2px; margin:0 0 0 0; border-bottom:1px solid #000000; line-height:1.2em}
段落ではなく文の背景にだけ背景色を適用するにはどうすればいいですか?
私にはspanで1行1行指定していく方法しか思いつきません。
他にもっと効率の良い方法があったら教えて下さい。
>>369 やりたいことがいまいち不明瞭ですな。
とりあえずソースを出す。
371 :
Name_Not_Found:02/11/04 14:20 ID:KusSwFbo
>>369 NN4でブロックレベル要素に背景指定した場合の表示みたいにしたいのか?
spanなり何なりインライン要素として括るがよいさ。
何も「1行1行指定し」なくとも、<p><span>文章</span></p>と一回括ればいいだろ。
>369
NN4.7のバグ的背景色表示をしたいのだとみた。
「ブロック要素に指定した背景やボーダーが、要素の内容物に対応した部分に
しか表示されない。」
ttp://members.tripod.co.jp/cssbug/detail/nn4x/b010.html ブロック全体に対して矩形に背景色が塗られるのを望まず、文字のあるところ
だけ背景色が塗られてほしい、ということですよね。
文字に背景色を指定したい理由が「強調」だったら<em>や<strong>で囲めば、
「class="…"」を書かなくていいぶん少しだけ省力化できる…くらいしか私には
思いつきません。
>>362 > サイズとファミリは省略しないことを勧められるが、
fontプロパティの値は
[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]…(以下はcaptionとかなので略)
だから、font-weightとfont-familyの値は必須でわないの?
(漏れの読み方が間違ってる?)
>>368 何を根拠に効かないと言ってるのだ?
ちょっと試せば効いてるのは一目瞭然。
inherit効く派も効かない派も、お互いの主張を確認できる具体例を出してくださらんか
「効かない派」からまずは軽いジャブ。
しかしこのサイトを作っている人が間違えている可能性もゼロではない。
ここで「効く派」が具体的な例を出せれば逆転も可能だが、果たして?
p { color :red; }
em { color: blue; }
em.hoge { color: inherit; }
<p><em>まげまげ</em>もげもげ<em class="hoge">ほげほげ</em></p>
IE6(標準)ではほげほげが青。効いてない
379 :
369:02/11/04 17:30 ID:???
>>370 言葉足らずですみません。
>>371と
>>372で言っている
NN4.7のバグ的背景色表示をしたかったのです。
>>371 >>372 ありがとう御座います。そして説明不足ですみません。
spanで1行1行指定していかなきゃならないのは最初の
文字の前に余白が欲しかったからです。具体的には
span { background-color:#000000;
padding-left:1%;
}
という指定を適用させたいので1行1行指定してます。
でも他に効率いい指定の仕方があるんじゃないかと
思いまして...
>>373 蛇足レスだが、それが正しいよね。
line-heightって必須じゃなかったんだな…
>>379 「1行1行」って……もしかしていちいちbrで改行してるの?
だとしたらCSSではなくHTMLのマークアップからやり直した方がいいよ。
ソース出してみてくれない?
>>379 同じくソースきぼん。
最初の文字の前に余白が必要なケースがわからない。
構文としての文字下げなら「text-indent」を使う方がヨロシイのでは。
この場合は、例えば<p>などのブロック要素に設定する。
<span>は、これらのブロック要素内にあるはずだから、
万一<br>で改行しているとしても、上位ブロックの左辺に余白を
持たせておけば済む話。
>>378 inheritの解釈がいまいちな人間の思うところ。
そのCSSだと、おかしくない?
>各プロパティは指定値として'inherit'という値を取ることができる。この値は、当該要素の
>そのプロパティが、親要素と同じ算出値を取ることを意味する。 'inherit'を明示的に設定
>すれば、通常は代替値としてのみ用いられる継承値を強制的に使用できる。
となってるので、親要素p要素のcolorが継承されていて、正しい動作だと思うけど。
強調を赤と青に指定したいなら、
p {color:red; background:black;}
em#hoge {color:red; background:inherit;}
em#hage {color:blue; background:green;}
というような使い方が正しいんじゃないかな?
ぐひぐひ荒れろ荒れろ
>>383 >親要素p要素のcolorが継承されていて、
それならばem.hogeの色は赤にならなければならぬはずだ。
しかるに
>>378の報告では青になると言ってるのだ。ここがIEのinherit未対応たる所以だ。
>強調を赤と青に指定したいなら、
これも、
>>378のやり方で何ら問題無い。むしろ
>>383の方がスマートではないよ。
387 :
378:02/11/05 00:21 ID:???
>>378はinherit確認用のためだけに書いたんで
細かいことは考えてないでつ
混乱させてスマンヨ
388 :
383:02/11/05 01:15 ID:???
>>387 ごめんさない、
>>384の指摘のように、読み間違えてました。
inheritは利いてない。
>>381 >>382 p { line-height:140%; }
span { background-color:#000000;
padding-left:1%; }
<p>
<span>ここの文字列の背景にだけ背景色を指定したい。</span><br>
<span>ここの文字列の背景にだけ背景色を指定したい。</span><br>
<span>ここの文字列の背景にだけ背景色を指定したい。</span><br>
<span>ここの文字列の背景にだけ背景色を指定したい。</span><br>
<span>ここの文字列の背景にだけ背景色を指定したい。</span><br>
<br>
<span>ここの文字列の背景にだけ背景色を指定したい。</span>
</p>
ソースはこんな感じです。全ての行の左側に余白が欲しいのはレイアウト
としてなので、最初の1行だけだと具合が悪いというのが理由です。
brを使ったのは文章自体が詩みたいなものだからなんですが、もう一度
HTMLの基本からよく勉強し直してみます。
brを使う意味はまったく無いな
もしくはCSSを使う意味がまったく無い
>>389これでいいだろ
2回の連続した改行は段落とみなしたほうがいいと思うが
p {
line-height:140%;
padding-left:1%;
}
span {
background-color:#000000;
}
<p>
<span>
ここの文字列の背景にだけ背景色を指定したい。<br>
ここの文字列の背景にだけ背景色を指定したい。<br>
ここの文字列の背景にだけ背景色を指定したい。<br>
ここの文字列の背景にだけ背景色を指定したい。<br>
ここの文字列の背景にだけ背景色を指定したい。<br>
</span>
</p>
<p>
<span>
ここの文字列の背景にだけ背景色を指定したい。
</span>
</p>
>>390 詩みたいな内容なら<br>を使っても問題ないと思う
>>389 一行ごとをひとつの段落とみなすことができるのならば、
p {
line-height : 140%;
margin : 0;
padding-left : 1%;
background-color : #000000;
}
でOKでは。
>>392 pはブロック要素だからボックス全体に背景色が指定されちゃうよ
394 :
392:02/11/05 12:43 ID:???
>>393 あー、だから、一行をひとつの段落とみなして、HTMLの方を、
<p>そんな事より聞いてくれよ、>>1よ。あんまりスレと関係無いんだけどさ。</p>
<p>昨日、近所の吉野家行ったんです。吉野家。</p>
<p>そしたらなんか人がめちゃくちゃいっぱいで座れないんです。</p>
みたいな感じにすれば、一行ごとに色つけられますよ、という意味でした。
>>389 が意図してる見栄えとは微妙に違うと思うけど。
あー、でも、その場合、margin : 0; じゃなくて、margin : 0.4em 0;
の方がいいか。
395 :
346:02/11/05 13:03 ID:???
fontプロパティの指定について質問した者です。
inheritの実装にまで話が進むとは思いませんでした。大いに参考にさせていただきます。
ありがとうございました。
>>389 >brを使ったのは文章自体が詩みたいなものだからなんですが
「詩みたいなもの」には<pre>を使用しませう。
<br>の強制改行はいかにもみにくい。
preの方がみにくいだろ。
>>397 例えば漢詩では縦書きか横書きかは別にして、
途中改行されることを作者は望まないだろう。
<br>の場合は画面幅によって途中改行され、さらに<br>で
改行される。これは詩の創作者にとっては耐え難い。
アクセシビリティは詩の作品性に優先されるものではないと思うが。
#スレ違いスマソ
401 :
399:02/11/05 21:16 ID:???
>>400 話しを戻すと、
>>389 が成形文としての表現を<p>で
実現しようとするのは違和感があるということだと思う。
センテンスとして*一行である*ことに意味があるなら、
<pre>にCSSを適用する方が自然ではないかという提案だろう>396
# 本人がいう「詩のようなもの」の実態は本人にしか分からないがw
もう画像にしちゃえ
403 :
Name_Not_Found:02/11/06 12:06 ID:nUZh99py
CSSでchecked radio ボタンの色を変更したいのですが、
指定方法を教えてください。
>>403 ラジオボタンにCSSならinputに書いてちょ。
id属性を与えてlabelを使っているならlabelにCSSも可。
チェック済みのものだけCSSを適用するならJavaScript併用。
さんざガイシュツだけど、具体例を書くべし。
フォームパーツはCSSが効かないブラウザもあるし。
>>402 画像にするならpreだろ。
どうせimgならalt属性も入るし、
objectなら代替部分を結局 まーくうぷ しないといけない。
406 :
Name_Not_Found:02/11/07 02:48 ID:CZ/B9NdM
異なる単位の数値の和や差を与えることって出来ないんですかね?
body{
background : url(back.jpg) ;
padding : 50px ; /* back.jpgのheight=50px */
}
#main{
overflow : auto ;
height : □□□ ;
}
□□□の部分に、100%マイナス50pxという数値を入れたいんです。
ちょっと試してみましたが、駄目でした。(・100%-50px ・100% - 50px)
このような方法が不可能なら、それに代わる巧い方法は無いでしょうか。
407 :
406:02/11/07 02:54 ID:CZ/B9NdM
>>406 の修正&補足
body{
background : url(back.jpg) ; /* back.jpgのheight=50px */
}}
#main{
margin-top : 50px ;
overflow : auto ;
height : □□□ ;
}
<body>
<div id="main">
あ<br>
あ<br>
あ<br>
あ<br>
あ<br>
</div>
</body>
余白を設定すれば?
上: 25px; 下: 25px;
じゃだめ?
409 :
408:02/11/07 03:14 ID:???
ごめん。寝ぼけてた。
逝ってくる・・・。
現状のCSSだけでは無理
JavaScript使えばできるかもしれないけどもう寝るので誰か任せた
IEのexpression使ってもできるのかもしれないけど使ったことないので誰か任せた
>>406 長いので第一部、とりあえず↓
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
}
#main {
margin-top:50px;
height:100%;
border:2px solid #333;
}
//-->
</style>
</head>
>>406 第二部、とりあえず↓
<body>
<div id="main"></div>
<script type="text/javascript">
<!--
var ob = 'main';
var of = 50;
var a,y;
if (document.getElementById) {
y = document.getElementById(ob).offsetHeight;
a = y - of; //←[100%-50px]
document.getElementById(ob).style.height = a + 'px';
}
//-->
</script>
</body>
</html>
# IE5/NN6 以上(DOMのため) Opera6は不可。
# IEとNNで*少し*実行結果が違うのはしょうがない。
HTML 4.0 Strictで作っているのですが、
addressを背景色指定、横幅100%、右寄せで表示したいのですが、
text-align:rightでは右にくっつきすぎてしまいます。
右から1em分、余白をとりたい場合はどうしたらいいでしょうか?
余分なdivは入れたくないし、横スクロールが出るのはいやなんですが。
414 :
406:02/11/07 20:11 ID:6JjV+tXW
>>411-412 ご丁寧に有難う御座います。
ですが、JavaScript使うなら大人しく
height : 90% ; overflow : auto ;
あたりで妥協しようと思います。すみません。
で。
height を設定すると、何故かそのブロックの left にmarginだかpaddingだかが発生しちゃってるようなんです。
おかげで横スクロールバーが出ちゃう。
当方、Win98+IE6 。仕様なのでしょうか?
>>413 addressのwidth:100%;を外してpadding-right:1em;でいいと思う。
<body>
2chは掲示板です。2chの管理人はひろゆきです。
</body>
と<body>内に書いただけで
「2ch」の部分だけを赤い色で表示してくれる、というような指定は
CSSでできますか?
「2ch」という文字列が(これは例だけど)ページ内にたくさんあるので
いちいち全てに赤の指定をするのはソースの見た目もよくないし面倒だなと思ったのですが、
どうでしょうか?
417 :
Name_Not_Found:02/11/07 20:52 ID:+OLXuCSB
あ、IDにスペース入ってました。。。
よろしくおながいします。。
短くしても、一文字のタグ(<b>2ch</b>とか<i>2ch</i>とか)で囲ってCSSで色指定くらいかな。
せめてemとか
421 :
416:02/11/07 21:18 ID:???
>>418-419 やっぱり無理ですか。。でも419の方法はイイかも。その辺でやってみます。
ありがとうございました。
>416
DHTMLならおそらく可能
Javascriptスレで聞いてみてください
423 :
413:02/11/07 21:56 ID:???
>>415 忘れてました、position:absolute;なので、
幅指定しないと、文字部分にだけ背景色がかからないんです・・・。
いっそ全角スペース入れたほうがいいでしょうか?
>>423 width:95%;
padding-right:5%;
%指定じゃだめ?
425 :
411:02/11/07 22:28 ID:???
>>414 少しの横スクロール量かな。
画面サイズをリサイズ(大小)すると出なくなることもある。
標準モードと互換モードで違うみたいだけど、仕様。
426 :
413:02/11/07 22:37 ID:???
>>424 ありがとうございます。
やってみたんですけど、それだとなぜか横スクロールが・・・。なんで?(泣)
>>426 positionのleftかrightの数値も考慮してみる。
428 :
bery:02/11/07 23:04 ID:bXdvx5EE
>>428 cgiに関する質問ですか?cssに関する質問ですか?
cgiソースの中を見ればどこにcssの記述があるかわかるでしょ。そこを変えればいいのさ
こういう質問板って、だんだん厨房板になるな
質問板???
スレ。亀ツッコミ。
朝
>428
CSSでなら、background-repeatプロパティとかbackground-positionプロパティとか
background-attachmentプロパティとか。
またはそれらをまとめて宣言できるbackgroundプロパティでできるでしょう。
あとは自分で調べてね
昼
HTML 4.01 Strict(互換モード) でブロックレベルの要素を
センタリングさせるにはどうしたらいいですか?
>>438 .ex {
text-align:center;
}
#box1 {
margin:0 auto;
width:50%;
}
<div class="ex">
<div id="box1"></div>
</div>
後方互換なら次善的にマークアップするしかない
440 :
438:02/11/08 17:59 ID:???
>>439 そうなんですか。。。ありがとう御座いました。
地道にマークアップしていきます。
Opera6.05 Win なんですが、ユーザースタイルシートに
br+br{display:none;}
とやって、2個以上続く<BR>を無効化してやろうと、
つまりフォントいじり野郎の努力を無駄にしてやりたい!
と思ったんですが、これだと全部の<BR>が消えちゃって
単なる強制改行無効になってしまいます。
隣接セレクタに関する俺の理解が間違ってますか?
まあとりあえず
br+br{line-height:0%;}
とすることで当初の目的は概ね達成できているんですが
気になって気になって夜は熟睡です。
「おい!>443の書き込み時刻を見てみろ!!」
「なっ!こっ、これは…寝言!?」
446 :
612:02/11/09 21:20 ID:???
一番上にちょっとした短い文章、そしてページのぴったり一番下に
広告や同盟バナーを表示させたいと思って、
>>4のサイトを見て
<!--
.xxx {
margin-bottom: 0%;}
-->
そして広告とか同盟バナーのところを<div class="xxx"> </div>
でくくったのですが、うまくページの一番下にバナーとかが行きません。
なにが変なのでしょうか・・
447 :
446:02/11/09 21:21 ID:???
クッキーのこってた。すいません
>>446 position使えば?
margin-bottom:0の意味することは分かるよね?
たとえば
<body>
<h1>test</h1>
<div id="xxx">TEST</div>
</body>
のとき、margin-bottom:0で指定するなら
bodyにもmargin-bottom:0を指定汁。
<div id(class)="xxx" />
と
</body>の間に何らかの要素を挟むとダメだけどねw
449 :
446:02/11/09 21:39 ID:???
ありがとうございます。
でもよく分かりませんでした・・
初心者なのでちゃんと勉強して出直します。すいませんでした。
>>448 marginだけじゃなくてpaddingも0にしないと。
451 :
Name_Not_Found:02/11/09 23:15 ID:2imV+8OK
特別セレクタを振らずに、
リスト要素の間だけにボーダーを表示することはできるでしょうか。
イメージとしてはこんな感じ。
<ul id="list1">
<li class="top">aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
#list1 li { border-top:1px solid #000 }
#list1 li.top { border-top-width:0 }
いまのところこんな風に一番上のリスト要素にだけ「top」っていうクラス振って
お茶を濁してるんですけど、これを振らずにできたらな、と。
別にborderはtopでもbottomでも間に表示できればどっちでもかまいません。
基本の話だったらすみません。
隣接セレクタかfirst-child疑似クラスを使う所だろうけど
IEが対応していないんで多分それで正解。
453 :
451:02/11/10 08:42 ID:???
>>452 やはり今のIEじゃムリなのか。
じゃあ、ひとまずはこのままか…。
でもバージョン上がったら対応するだろうってことで、
一応、隣接セレクタとfirst-child疑似クラスも調べてみます。
ありがとうございました。
>>453 バージョンあがっても対応しないと思う。
自分とこの独自拡張は増やすだろうけど。
IEのCSS独自拡張ってふざけてる
はやく position: fixed サポートして欲しいな、IE タン
というか、IE7.0が出ないとか噂が流れてる現状では...。
>>454 だろうね。MS自身がはっきりそう言ってるし。
460 :
Name_Not_Found:02/11/10 18:56 ID:ERe0peTT
リストマーカーにlist-style-image を使わず
background-imageを使うのって邪道?
何のスレと思ったんだろう…
464 :
461:02/11/10 20:01 ID:???
ごめん、最後の3行は無視して…
465 :
Name_Not_Found:02/11/10 20:01 ID:ERe0peTT
つーかOperaでも表示されるしな
466 :
Name_Not_Found:02/11/10 20:04 ID:ERe0peTT
うーん、結局よくわからん
これってtableをレイアウトに使うのとどう違うんだろう?
テーブルは表を作成する時に使います
ハァ?見えればそれでいいじゃん?とお考えならこのスレには来ない方が良いです
468 :
Name_Not_Found:02/11/10 22:44 ID:ERe0peTT
>>467 俺に言ってるのかな?俺の発言は
「リストマーカーをbackground-imageで実現するのってStrict的にどうなの?
背景画像はあくまで背景画像でマーカーじゃないじゃん?」
ってことなんだけど、なんでそんな発言になるの?
初歩的な質問ですみません。
テキストを均等割付(漢字違うかも)するCSSを教えて下さい。
473 :
Name_Not_Found:02/11/11 01:36 ID:45Bb5Iy/
Strict 的には HTML 文書が正しければ CSS で少々何してもいいと個人的には思ってる。
ちなみに俺は某ブラウザが対応したら
li{ list-style: none; }
li:before{ color: #800; content: "◇"; }
とかやりたい。 background でマーカーつけようが別にいいんじゃないかと思います。
476 :
Name_Not_Found:02/11/11 12:10 ID:0sdKUL3a
ネスケ4.78で、
p { line-height : 133%; }
のようにline-heightが設定してある場合、
<img>で画像を表示させるとレイアウトがメチャクチャになるのはバグですか?
(画像の下に文字がもぐりこんでしまう???)
-------
hoge |
|
-------
このようにしてカーソルがhogeの上に乗ったら、
|------|
| hoge |
|------|
のようにしたいのですが、eの右の方やhの左の方にカーソルが乗ったときも四角いリンクが出るようにしたいのですが、
hogeの上に乗ったときにしか出てきません。
どうしたらいいのでしょうか?
480 :
479:02/11/11 14:10 ID:???
すいません。
意味不明になってしまいました。
つまり
hogeの上にカーソルが乗ったときに四角いリンクを出すことはできたのですが、
eの横やhの横にカーソルが乗ったときもリンクが出るようにしたいです。
つまりhogeの行にカーソルが乗った時です。
よろしくお願いします。
>>479 「リンクを出す」ってなんじゃらほい?
とりあえずここに該当部分のソースを貼ることをおすすめする。
何をしたいのか全然分かんないけど hoge を div で囲むとかは?
483 :
479:02/11/11 14:30 ID:???
すみませんでした。
http://www.microsoft.com/japan/default.asp マイクロソフトのサイトの製品情報やユーザー別サイトのリンクの所のようにしたいのです。
で、マイクロソフトのサイトでいうとwindowsの上にカーソルが乗ったときはちゃんとあの四角いリンクが出てくるのですが、
windowsの文字の横にカーソルを置いた時も四角いリンクが出てくるじゃないですか。
それのやり方を教えていただきたいのです。
a { width : 100% ; } でいいんでない
485 :
Name_Not_Found:02/11/11 14:46 ID:d7rHuhxj
a{ display : block }
100%はいらん。
>>476 7だと問題なかった。6なんて無視するわけにはいかんの。
487 :
Name_Not_Found:02/11/11 15:34 ID:0sdKUL3a
476です
>>486 レスありがとうございます。
どうやら6はなってしまうみたいですね。
お騒がせしました。
>>477 そう。バグ。
画像をTABLEで囲んで対処したことがある。
お勧めしないケドな。
>>485 a を display: block した時は width が要る場合があるよ
テキスト以外の部分で認識しなかったり
変な余白ができたり
とりあえず幅指定した ul 要素内だとそうなる
>487
:hover → a:hover で直る。
>489
そういえばなんかバグ辞典に挙がってたっけか。
491 :
Name_Not_Found:02/11/11 15:56 ID:0sdKUL3a
>490
レスありがとうございます。
残念ながら、a:hoverにしています。
>491
whitebase.cssの15行目のことね。
493 :
Name_Not_Found:02/11/11 16:49 ID:0sdKUL3a
>492
whitebase.css?
なんですかそれ・・・。
>493
勘違いスマソ。
>476が君のサイトなのかと思ったょ…鬱だシノウ…。
495 :
Name_Not_Found:02/11/11 17:00 ID:0sdKUL3a
>494
死んでください
∧||∧
( ⌒ ヽ てゆうかソース出しぃな。
∪ ノ
∪∪
497 :
Name_Not_Found:02/11/11 17:15 ID:0sdKUL3a
>496
誰に言ってんの?
質問者の意に反する事を書くと死ねと言われてしまいます、気をつけましょう
大暴れだ!
0sdKUL3a 何様
俺様だぁぁぁ、かしずけ阿呆ども
502 :
Name_Not_Found:02/11/11 17:27 ID:0sdKUL3a
自分でシノウとか言うから死ねつったんだよ
ギャーギャー騒ぐな
ギャーギャー!
504 :
Name_Not_Found:02/11/11 17:35 ID:0sdKUL3a
ワンパターンな奴だ・・・。
おつかれさん。
ありがとね〜。
とりあえずage
506 :
Name_Not_Found:02/11/11 17:38 ID:ndfFaM/P
ちょっと待て。ID見る限り騙りじゃねーよな。
>>493 ほんまもんの気違いか?
最初だけ殊勝な口聞いて突然何なんだこの豹変ぶり。
>>487>>491からの ID:0sdKUL3a の変わりようは一体!?
おそらくあの一時間たらずの間に何かあったんだね・・。
彼女にふられ、父親がリストラされ、母親が財布をひったくられ、妹が○○されたんだ・・。
とりあえずtinge
508 :
Name_Not_Found:02/11/11 17:40 ID:0sdKUL3a
俺が本物の0sdKUL3aだ
キタ━━━━━━(゚∀゚)━━━━━━ッ!!
510 :
Name_Not_Found:02/11/11 17:44 ID:0sdKUL3a
>507
そーそーよくわかったね
またキタ━━━━━━━━━(゜∀゜)━━━━━━━━━!!
512 :
Name_Not_Found:02/11/11 17:47 ID:0sdKUL3a
織田裕二さんが目薬さしてます。
真性だがネタは弱いらしい(´д`)
514 :
Name_Not_Found:02/11/11 17:52 ID:0sdKUL3a
真性包茎だがネタは強いらしい(´д`)
516 :
479:02/11/11 19:09 ID:???
返信遅くなって申し訳ありませんでした。
display:block;はすでにやっていたので、width:100%;にしたらうまくいきました。
ありがとうございます。
517 :
日々之 ◆dA48kKoXXA :02/11/11 21:53 ID:CKcl1Uzt
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN" "
http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEDA>
<META NAME="generator" CONTENT="notepad">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV=Content-Script-Type" CONTENT="text/javascript">
<BASE HREF="
http://www3.justnet.ne.jp/~sincerity/HP02/" TARGET="_blank">
<STYLE TYPE="text/css">
<!--
BODY {background-color:;}
-->
</STYLE>
<TITLE>TheWorksOfM</TITLE>
</HEDA>
<BODY>
<FRAMESET ROWS="200,*">
<FRAME SRC="ue.html">
<FRAME SRC="main.html">
</FRAMEST>
</BODY>
</HTML>
↑
このソースでやったら、フレームが表示されませんでした
真っ白の画面になる
どうしてですか?
518 :
日々之 ◆dA48kKoXXA :02/11/11 22:00 ID:CKcl1Uzt
↑
このソースでやったら、フレームが表示されませんでした
真っ白の画面になる
どうしてですか?
</HEDA> になってる
<BODY> の中に<FRAMESET> 書いてる
お前がアホだから表示されないんじゃないの?
ここは何スレ?
521 :
日々之 ◆dA48kKoXXA :02/11/11 22:11 ID:CKcl1Uzt
あ、もしかしてBODYではなく
HEDA内に書かないとだめなのか
あはははは(^_^;)
522 :
日々之 ◆dA48kKoXXA :02/11/11 22:14 ID:CKcl1Uzt
ありがとうちょ(・_・)ノ
だめぽ・・・
>>521 違う。framesetの中にbodyを含ませるんだよ。
<html>
<frameset rows="hoge,*" nantokakantokanantokakantoka>
<frame src="" id="" name="">
<frame src="" id="" name="">
<head><title>hoge</title></head>
<body>.....</body>
</frameset>
</html>
何でスレ違いのネタに反応しまくってる馬鹿が居るんだ?
528 :
日々之 ◆dA48kKoXXA :02/11/11 23:35 ID:CKcl1Uzt
度々でもうしわけない
実は先ほどのページでだけど
http://www3.justnet.ne.jp/~sincerity/HP02/ スタイルシートでリンク色の指定をしていたところ、どうしてもうまくいきません
理想としては、マウスをリンクにあわせたときだけ文字が白になって
その他のすべての状態時を灰色にしたいのですが
A:link {background-color:gray;} /*未参照のAタグは灰色*/
A:visited {background-color:gray;} /*既参照のAタグは灰色*/
A:active {color:gray;} /*アクティブなAタグは灰色*/
A:hover {color:white;} /*マウスオーバーで白*/
↑これでスタイルシートを設定したら、文字ではなく、リンク部分の背景が灰色になるだけで
リンクそのものの文字色は変わりません、まぁバックグランドと書いてあるので
背景の色になっちゃうのですか・・・、文字の色を灰色にするにはどう指定すればいいの?
何方か教えてください
>528
ポカーン
君はCSSの勉強をもう一度やり直した方が…
>>528 あなたの脳ミソはうんこでできていますか?
ネタ師キタ―( )―
532 :
日々之 ◆dA48kKoXXA :02/11/11 23:43 ID:CKcl1Uzt
>530
オマエモナー
>532
悪いことは言わん、君は解説サイトで勉強し直してきなさい
535 :
日々之 ◆dA48kKoXXA :02/11/11 23:45 ID:CKcl1Uzt
A:link {background-color:gray;} /*未参照のAタグは灰色*/
A:visited {background-color:gray;} /*既参照のAタグは灰色*/
これを外したらとりあえず背景が灰色になること防げたけど
リンクの文字色が灰色にならないじゃん!(>_<)
赤紫みたいな色になる(>_<)
537 :
日々之 ◆dA48kKoXXA :02/11/11 23:50 ID:CKcl1Uzt
だーかーらー 教えて(>_< ) ( >_<)教えて
540 :
日々之 ◆dA48kKoXXA :02/11/11 23:52 ID:CKcl1Uzt
いじわる! わ〜ん (((((((((\(>O<)/
判っているのなら教えてよ(/_;)
ここ質問スレでしょ?(・_・*)
>>540 ■■■■■ 注意 ■■■■■
質問者 (特に「初心者」) は、
必ず
>>4にある解説サイト (かなりわかりやすい) で
勉 強 してください。
あなたは
>>1の日本語が読めませんか?
(・∀・)カエレ!
日々之のちんちん わるいちんちん
日々之のちんちん くさいちんちん
日々之のちんちん なんでぼうしかぶってるの〜
543 :
日々之 ◆dA48kKoXXA :02/11/11 23:57 ID:CKcl1Uzt
544 :
日々之 ◆dA48kKoXXA :02/11/11 23:57 ID:CKcl1Uzt
┌─┐
|ま.|
|た |
│来│
│る│
│よ .|
マタネ イェア │ !!.│
└─┤ ニコニコ
ヽ(´∀`)ノ ヽ(´∀`)ノ (´∀`)ノ ( ´∀)
| ̄ ̄ ̄|─| ̄ ̄ ̄|─| ̄ ̄ ̄|─□( ヽ┐U
〜 〜  ̄◎ ̄ . ̄◎ ̄  ̄◎ ̄ ◎−>┘◎
聞く前にまず調べろ。
基本的なことも理解できないでここに来るな。
546 :
日々之 ◆dA48kKoXXA :02/11/12 00:00 ID:XF2yyRcu
>>545 ┌─┐
|ま.|
|た |
│来│
│る│
│よ .|
マタネ イェア │ !!.│
└─┤ ニコニコ
ヽ(´∀`)ノ ヽ(´∀`)ノ (´∀`)ノ ( ´∀)
| ̄ ̄ ̄|─| ̄ ̄ ̄|─| ̄ ̄ ̄|─□( ヽ┐U
〜 〜  ̄◎ ̄ . ̄◎ ̄  ̄◎ ̄ ◎−>┘◎
ネタ師に反応した時点で負け
548 :
日々之 ◆dA48kKoXXA :02/11/12 00:04 ID:XF2yyRcu
ネタ師じゃないもん!(>_<)
Mozilla 1.0 が colgroup に指定したスタイルを
無視するのを知って鬱でつ。
↓↓↓↓ 次の方どうぞ ↓↓↓↓
珍しく盛り上がってたんだな
ネタ師晒しage
>>488 どうもありがとう。
TABLEはあんまりレイアウトに使いたくないなぁ(´Д`;
555 :
Name_Not_Found:02/11/12 15:11 ID:zMLt7r7Z
入力フォームの枠線の色を指定したり、
細い線にするにはどうしたらいいですか?
>>555 borderをinputやtextarea要素に適用させなさい。
ちょっとお訊きしたいのですが、img について、CSSでmargin-leftを設定した所、
IE6で正しく表示されません。時々、気が向いたときは正しく数%マージンを
とって表示してくれるのですが、それ以外の時にはマージンを無視します。
ちなみに、そのimgに設定したmargin-topは常に動作してます。
あと、NN7とオペラ6.05でも確認しましたが、こちらの意図通りに表示されて
ます。こういう現象はバグなんでしょうか?
559 :
558:02/11/12 21:16 ID:???
position: relative;を挟んだらIE6での表示も安定しました。
お騒がせしました。
>>558 ウィンドウの左端にimgを表示させているのであれば
bodyにmarginやpaddingを設定した方がよいかも。
あるいは隣接する要素のmarginなどを見直すとか。
関係ないかもしれないけど
IE6にはimgにfloatを設定した時に、回り込ませた文字が
imgの後ろに隠れるバグがあるらしい(詳しいことはよく知らない)
561 :
560:02/11/12 21:17 ID:???
562 :
558:02/11/12 21:23 ID:???
>>560 いえ、二つの親要素にそれぞれマージンが設定されていて、その入れ子の中に
imgを入れてます。どうしてposition: relativeを書き加えたら安定したのかは
未だにわかりません。誰かお詳しくてお時間のある方に説明して頂きたいくらい。
ともあれ、ありがとうございました。
564 :
Name_Not_Found:02/11/12 21:33 ID:lOL08gR6
565 :
558:02/11/12 21:40 ID:???
>>564 もう一度、同じ条件で同じ現象が起きるかどうか確認して、もしそれが
起きるようなら報告させて頂きます。スレ違いであれば失礼しました。
566 :
558:02/11/12 23:11 ID:???
>>564 すみません。
別のファイルで再現して、不要な箇所を削除することで問題の所在を絞り
込もうとしたのですが、絞り切れませんでした。
ソースそのものの提出はご勘弁ください。失礼しました。
物凄い久しぶりに初心者スレ見たが
相変わらず面白いなあっちは
imgのa:hover等は
インラインでは適用されないんですか?
なぜか外部で指定したらできるのに
インラインでは無理です!
571 :
569:02/11/14 00:10 ID:???
<style type="text/css">
<!--
a img{
border : 1px dashed #000;
}
a:active img{
border : 1px dashed #f00;
}
a:hover img{
border : 1px dashed #f00;
}
-->
</style>
572 :
569:02/11/14 00:11 ID:???
↑じゃだめなんすか?
ん?もしやhover指定の順番問題では。
>>569-574 いや、順序だとかエンベッティングスタイルシートだとか、
そういった問題もあるんだけれど、
何れにせよそれはIEでは効かんのだ。
順序揃えて、MozillaとIEで比べてみ。
576 :
569:02/11/14 06:28 ID:???
皆さんありがとうございます!
インラインとは全然違いますねすいません
たしかにIEでは効果なかったです!
おとなしく外部で指定するようにします
ありがとうございました!
(スレ違い&ガイシュツ覚悟で)
Opera7で代替スタイルシート対応になったんだね!記念age
それは大いに結構なことなんですが、
レンダリングのほう、まるで改善されてないような気がするですよ
このままリリースする気なんだろうか
する気なんだろうな…
tfootに対応してないね。ルビは表示してほしかった。
まさかこのままリリースってことはありえないと思う
これ以上言うとスレ違いとか叩かれそうだから
>>579のリンク先にでも報告しとくかな。
581 :
Name_Not_Found:02/11/15 00:33 ID:UffElnRB
CSS記述についての質問よろしくです。
SCRIPT { display: none:}
と書いて、JAVAスクリプトとかオフに出来るもんなんでしょーか?
識者の人レスキボンヌ
583 :
OperaバグバグだYO!(; ´Д`):02/11/15 00:48 ID:05x9wl13
>581
script{display: none}
<script language=javascript>
document.write('test')
</script>
しっかり「test」と表示されます。試してみなされ。
584 :
581:02/11/15 00:58 ID:UffElnRB
>>582-583 win IE6の環境で、ユーザスタイルシート使ってCSS記述でスクリプト切ること出来ん
かと思ってやってみたんだけど、ダメっぽかったんで…
SCRIPTはセレクタに指定出来んのかな?
>>584 ならわかったでしょ。できないんですよ。
586 :
581:02/11/15 01:21 ID:UffElnRB
>>585 スクリプトのオフは無理ですた…
BG-imageなんかも、<BODY backgroud="hoge.jpg">とか指定してあると、
ユーザCSSでnoneにしても反映されないみたいですね。
背景だけカットする方法ってないスかねー。
587 :
569:02/11/15 08:39 ID:???
画像をfloatしたら
borderが効かなくなるんですか?
a img{
border : 1px dashed #000;
}
a:active img{
border : 1px dashed #f00;
}
a:hover img{
border : 1px dashed #f00;
}
.textari{
float : left;
}
<img src="test.gif" width="100" height="100" alt="" class="textari">
これだとborder出ません!
588 :
569:02/11/15 08:41 ID:???
すいません指摘された箇所をそのままコピペしてしまいました
a img{
border : 1px dashed #000;
}
a:hover img{
border : 1px dashed #f00;
}
a:active img{
border : 1px dashed #f00;
}
.textari{
float : left;
}
<img src="test.gif" width="100" height="100" alt="" class="textari">
こうです。border出ません!
position:absolute;
top:3em;
みたいに指定してる所があるのですが、IE5.5とMozilla1.1ではピッタリと表示されているのに、
Operaでは少し下にずれてしまいます。
どうしてOperaだと表示が変わってしまうのでしょうか。
また対策がありましたらお願いいたします。
>>589 Operaはbodyのpadding値がデフォルトだと0でない。
591 :
Name_Not_Found:02/11/15 14:02 ID:q2g792As
592 :
Name_Not_Found:02/11/15 14:52 ID:WbCkAuwE
>>569-576 >a:hover img{border : 1px dashed #f00;}
これ、別に外部スタイルシートにしなくても、
head 要素内での<style>でのスタイル指定でも効くよ。IE6にて確認。
但しその前の行で、子要素無しで擬似クラスを指定して置かねばならないけど。
つまり、a:hover {border:none;}とかね。
593 :
Name_Not_Found:02/11/15 15:58 ID:4WbnX9o1
<td nowrap> をCSSではどう書けばいいでしょうか?
nowrapは廃止属性ですよね?
>>593 td:white-space:nowlap
white-space:nowrap;
だったゴメン。
何ですかそれは
597 :
593:02/11/15 16:07 ID:???
サンキュ!
td {white-space:nowrap;} だろ、正しくは。
>>594
599 :
589:02/11/16 03:03 ID:???
>>590 bodyのmargin、paddingはすべて0にしてるのでそことは関係ないと思います。
position:absolute;
top:3em;
としてる部分の上の一つborderがあってそれにあわせたいのですが、
IEとMozillaだとぴったりになるのにOperaだと下に少しずれてしまいます。
読み込みとかがOperaは違うのでしょうか?
そういやOperaのフォントサイズって小さいときあるよな。
overflow-y:scroll;
これがCSS Validatorに引っかかる。(存在しない
代替案ってない?
>>602 auto指定して横スクロールバー出ないようにwidth等を工夫するとか。
>>602 仕様通りに正しくCSSを実装しているUAなら読み飛ばしてくれるはずなので自分は放置してます。
そうなんだけどね。しかし
>>602は「Validatorに引っかかるのが嫌」だって言ってる訳で。
<meta http-equiv="Content-Style-Type" content="text/css" />
って設定してます?
なんか、ここで text/css だって宣言しなくても
<link type="text/css"... っていってるわけだし
冗長な気がして・・
style 属性でスタイル設定する時以外はいらないのかな?
>>606 HTML4.01の仕様書だと「style属性が設定された要素を含んでいて<meta 〜>が
定められていない文書は不正」とあるから、<link>だけなら省略可だと思うよ。
ただ、「HTML文書に結びつけるスタイル情報を記した、スタイルシート言語を
指定しなければならない」ともあるから記述するに越した事はないかと。
ここはstrict厨の比率が大きいですか?
だってテーブルレイアウト厨がここに来る意味無いでしょ?
>>610 だよね。CSSをちゃんと使おうとすると自然にStrict(またはそれに近いもの)になっていく筈だもん。
このスレは
strictでできることは可能な限りstrictでやって、出来ないものは柔軟に対処せよ
って感じの人が多いと思う。strict厨ってのは要するに
「strictでできないことは最初からやるな」って人達のことでしょ?
strictでないことをどうしてもしなければならない理由があるのなら、すればいい。
理由がないのなら、しなければいい。
Strict厨だのテーブル厨だののレッテル張りは不毛
外部スタイルシートに
さらに外部スタイルシートをリンクする
メリットをわかりやすく教えて下さい
>>616 複数のドキュメントに同じスタイルシートを適用している場合、スタイルシートを入れ替えるとき
修正箇所が1ヶ所で済むから。
NN4.xにスタイルシートを読み込ませないため。
>>616 各項目ごとに分けておけば自分が編集しやすいから。
619 :
Name_Not_Found:02/11/17 13:16 ID:JvUUQ/ML
初心者ですいません。調べてもわからなかったのでどうぞ教えてください。
body{ color: #666666;
font-size: 0.8em;
line-height: 1.5em;
background-color: #ffffff;
background-image: url("sh1.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 5% 95%;
text-decoration: none;
margin: 3em 10% }
の中にスクロールバーの
<!--
BODY{
scrollbar-face-color :#色指定;
scrollbar-highlight-color : #色指定;
scrollbar-shadow-color : #色指定;
scrollbar-arrow-color : #色指定;
scrollbar-3dlight-color : #色指定;
scrollbar-darkshadow-color : #色指定;
}
-->
を入れたいのですが、どこに入れればいいのでしょうか。すいません。
>>621 初心者のボクにご丁寧にどうもすいません。いま読んでみましたが、これで良いのか見ていただけないでしょうか。
body{ color: #666666;
font-size: 0.8em;
line-height: 1.5em;
background-color: #ffffff;
background-image: url("sh1.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 5% 95%;
text-decoration: none;
margin: 3em 10%
scrollbar-face-color :#色指定;
scrollbar-highlight-color : #色指定;
scrollbar-shadow-color : #色指定;
scrollbar-arrow-color : #色指定;
scrollbar-3dlight-color : #色指定;
scrollbar-darkshadow-color : #色指定;
}
>>622 margin: 3em 10%
のあとに「;」がいりますよ。
「;」は、複数のスタイル指定を書く時に区切りとして必要です(普通は改行の前に入れることが多いです)。
>>623 やっと安心して先に進めます。
これから勉強してから質問するようにします。
本当にどうもありがとうございました。
何で試せば判ることを聞くの
しかも二度も
626 :
Name_Not_Found:02/11/17 19:33 ID:M5ByxiFX
失敗した時の爆発を恐れているんだろ
どうせ暇なんだから黙って教えろよ。
628 :
Name_Not_Found:02/11/17 19:42 ID:alFF9rG7
あのー釣りですか?
ええ、カリブの方にカジキを釣りに。
630 :
Name_Not_Found:02/11/18 00:21 ID:z70zn8au
pre 要素のスタイルをCSSでエミュレーションするにはどうすれば良いんでしょうか。それとも、整形済み文書として、物理的(?)な要素指定をしなければならないんでしょうか。
white-space:pre;
632 :
Name_Not_Found:02/11/18 13:29 ID:9+ZtIagK
preは別に物理要素じゃないと思うよ。
<style>とか<script>みたいなもんじゃない?
「整形済み文書」という非HTMLな言語を書く要素だと考えてる。
>>630 論理的な要素指定をすりゃいいじゃん。
例えば詩とかも「段落じゃないけど、雰囲気を伝えるためには改行が必要」だったりするし、
class="pre" とかやらんでも済むと思うんだけど。
>>632 でも white-space:pre がCSSにある以上、これを使わない理由もないよね。
CSSオフの環境でも整形済み文書として表示したい場合はpre。
CSSオフの環境なら別にいいや、と思える場合は、他の適当な要素に適当なclassを
ふって、white-space:preを指定。
というのがいいのではないかと。
プログラムのコードなんかは前者なので、一般的にpreでマークアップされてるん
じゃないかしら。
UAがpreをどう処理しようが、
予め整形されたテキスト(ソースコード、メール・掲示板からの引用)、
或いは整形が意味を持っているテキスト(詩など)なら
preでマークアップする以外ないだろ
preは整形するための要素じゃない
W3Cが非推奨としてる以上、<pre>はなんか使い辛い。
637 :
636:02/11/18 17:31 ID:???
間違えたっぽい
638 :
nobodyさん:02/11/18 19:02 ID:La9Zg7Fy
そんなことないでしょ。html4.01に非推奨との記述はない。
XHTML2.0ではどうなの?
とことんいぢめる
ワラタ
前このスレで
CSSのソースをパクられたくないから
何か対策ないか?って質問してた人いたんだけど、
その時のレスってなにか文字コードを変えろって話だったけど
もっとスマートな方法ないですか?
@importを使って
階層あげたりさげたりしたらソース見る気失せるかな?
でも気になるのは重くなるかな?ってこと
>>646 そもそも、ソースを隠そうとするのがスマートじゃないと思う。
CSSファイルに直リンされるよりは、パクられた方がマシだと考えた方がいいので
は。
それだって、よっぽどアクセス数の多いサイトにやられない限り実害はないけど。
まあ、@import使えば、意味もわからずファイル丸写しにするレベルの奴は
よけられると思う。
俺は、ネスケ4対策で@import使ってるけど、それほど重くなってはいないし。
>646
前のスレの文字コード云々は、パクらたくない?(゚Д゚)ハァ?
とう気持ちを婉曲的に表したものだったのでは?
なんでまたぶり返すわけ?
隠したがるような奴のコードなんか大したことないに決まってるから
パクられる心配なんて杞憂以外の何物でもない。
本当は笑われそうだから隠したいんでしょ?
>>649 まあ、笑い物にするために人のCSSのソース見るような底意地の悪いやつもそうは
いないだろうから、どっちにしても杞憂じゃないかな。
むしろ隠そうとしてることを笑う。右クリ禁止と同じ。
ていうかなぜ隠したがるかなぁ。
パクられて困るような技巧的な css
= 独自仕様使いまくりのごちゃごちゃで div span がいっぱいないと
使いものにならない css
って感じなんだけど。
シンプルで素晴しい出来栄えのが出来たら
むしろ率先して配布して布教したほうがいいとおもうけどなぁ。
>>652 だね、<div>や<span>、classに依存しないカコイイスタイルって理想だわ。
そういうのが広まるといいなあ、そのままユーザースタイルシートに適用できそうなやつとか。
まあ、ファイル丸写しにするくらいの厨なら
font, b, i, tt, s, u, strike{ font-size: 200em; }
とかしとけば、多分引っかかってくれると思う。
655 :
646:02/11/19 14:40 ID:???
同業サイトが本当に脅威なので
隠したいと思ったんですが無駄ですよね。
ありがとうございました。
文章にアンダーラインを入れたいのですが、どうすれば良いでしょう?
text-decoration:underline
のようなものではなくて、ノートの罫線のように表示させたいのです。
連続済みません。
border-bottom:1px solid #000;
のような見栄えになると、想像に近いのですが、どうも巧く行きません。
良い方法等ありましたら、御教授をお願いします。
658 :
Name_Not_Found:02/11/19 15:44 ID:7c5KuJgA
>>657の想像してる出力がどんなものか、こっちにはわからんからなんともいえない。
だから「ノートの罫線」だろ。CSSのみでやるのは難しいな。
line-heightをpxで固定してそれに併せた背景画像を用意する
ぐらいしか思い付かない。
>>658 ごめんなさい。
つまり
* CSS { イケてるスタイルを:"作れ";}
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄……
びっくりするほどユートピア!びっくりするほどユートピア!
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄……
こんな感じで、改行を入れても罫線が端まで延びていく感じです。
661 :
660:02/11/19 15:57 ID:???
>>659 レスありがとうございます。
なるほど、やはり無理だったのですね。
背景画像を用意する形で検討してみます。
情報ありがとうございました。
ul li {
border-bottom:1px solid #000;
}
<ul>
<li>* CSS { イケてるスタイルを:"作れ";}</li>
<li>びっくりするほどユートピア!びっくりするほどユートピア!</li>
</ul>
>662のアイデアは面白い。けど箇条書きでないものに対してこの手は使わないでね>660
日本語の段落の最初って字下げするでしょ。
あれはやはり、CSSでやるのが正道なのか?
いや、全角スペースでって意見もあったもんで。
スレ違いか?CSSの思想、原理原則的な話はここでOK?
なんかCSSでやるのが正道な気がしてきたぞ。
段落の最初といっても、1字下げるのは「1つの手段」で
あって、最初の1文字を大きくしたりする手法もあるからな。
上又 促状を送ったがナシのつぶて。やむを
目 得ず事務所に乗り込んでみるがもぬけの殻・・・
↑「督」のつもり。こういうやつね。キャップっていうのかなこれは。
>>662 それ電子僻地がやってるな
>>664 字下げはCSSだよ
段落であることはpで示されている訳だから
全角空白は不要
>>664 ただ、CSSを切って閲覧する人がいることも考慮すべき。
小説とか掲載してて、段落頭の一字あけが文意の正確な表現に必要なら、
あえてCSSではなく全角スペースであけても良いと思う。
>>667 確かに小説の場合、「空白それ自体」も一つの小説の構成要素というか。
漏れの場合は小説じゃないからCSSでOKだな。
>>667 小説でのインデントも結局はプレゼンテーションじゃないか?
HTMLでの整形自体に意味があるなら、それこそpreを使うべきだと思う。
まあ、筆者が「この空白も一つの文字だ」と言うなら、第三者には
全角空白だろうと否定する理由は無いんだけどね。
css Validator 行けないんですが
>>669 確かにそうだけど、以前preを使ったときは、何やらひどく読みにくいものに
なったような記憶が──? 結構昔なので曖昧だけど。
そりゃお前の使い方が悪かったんだろ
>>673 ちゃんとしたテキストに正しいマークアップがされていれば、
読みにくい、読みやすいの問題はCSSとUAの実装次第だよ。
そもそもHTMLで「読みやすさを求めた整形」しようってのが間違い。
今更ですが、 class 属性と id 属性の違いって何でしょうか。
私の場合;
<div class="navigator" id="head">ヘッダーのナビメニュー</div>
<div class="navigator" id="foot">フッターのナビメニュー</div>
みたいに使ったりするのですが、問題ないと思いますか。
あと、思ったんですが、自分はいつも;
<body>
<div class="head">ヘッダー</div>
<div class="body">メイン</div>
<div class="foot">フッター</div>
</body>
みたいにまず区切ってHTML書いてcssで見栄えを作ろうとしてきたんですけど、
これだと、何か色々制約がかかる感じで思い通りにデザインできないことに気づいたのですが、
これって単に私の発想力がないだけでしょうか。
イケてるデザインのサイトぐらい、思い通りにカコイイデザインできるようになりたいですわ・・・ハァ
まぁdiv厨くさいマークアップしてるうちは、な・・・
>>665 いまさら何を。
なんのためにfirst-letter擬似要素があると思ってたんですか?
>>676 それだけだと、実際の文書の中でどのように使われているのかわからないので、
問題ないかどうかは判断しづらいというのが正直なところ。
あと、質問の趣旨とは違うけど、ナビメニューには、divじゃなくて、リスト
(ulとか)を使った方がいいのでは。
それから、ヘッダ、メイン、フッタなどは、構造的に一度しか現れないもの
(だよね?)だから、classじゃなくてidの方がふさわしいと思う。
「何か色々制約がかかる感じで思い通りにデザインできない」ということだけど、
「validなHTML+CSS」という組み合わせでは、構造的にあまり意味のないデザイン
はしづらいから、やむをえないんじゃないかな。
>>676 検索して解けない疑問じゃねえだろーに。
>これだと、何か色々制約がかかる感じで思い通りにデザインできないことに気づいたのですが、
せめて「何か」と「制約」を具体的にしてくれ。
>>679 「同一文書中に一度しか表れない要素にはid」って覚え方してるならやめた方がいい。
>>679 >(ulとか)を使った方がいいのでは。
そうですね・・・ulとかdtとかのくくりに使おうと思ったのですが、それだと、スタイルの跡についた
HTMLになってしまいますね・・・その時点で私は失格か。
>それから、ヘッダ、メイン、フッタなどは、構造的に一度しか現れないもの
>(だよね?)だから、classじゃなくてidの方がふさわしいと思う。
はい、そうです。あと、知らなかったのですが id 属性は1度しか現れないものにつけるべきものなんですか。
(= id 属性内の値はHTML内に2つと存在しないということですか。)
>>680 検索するのが面倒でした。ごめんなさい。周りにHTMLとかCSSヲタな友達がいれば最高なんですが。
>>これだと、何か色々制約がかかる感じで思い通りにデザインできないことに気づいたのですが、
>せめて「何か」と「制約」を具体的にしてくれ。
<div class="A">
X1
X2
X3
</div>
<div class="B">
Y1
Y2
Y3
</div>
とあったとして、X2とY2に同じスタイルを適用したい場合・・・とかいいながら、できますね。
やっぱ私がアフォなだけかな・・・
>>682 「面倒」だの「ヲタ」だのいちいち癇に障る奴だな
もうひとつ質問させてください。
擬似要素というのは、その親というか、それに帰属するんでしょうか。
たとえば、h1:first-letterだったらブロック、strong:first-letterだったらインライン、みたいに。
>>685 なんで試してみればすぐ分かることを聞くんだ?
そんなことすら面倒臭がる奴がサイト運営やっていけるのかよ?
>>681 「たまたま一度しか現れなかった」のではなくて、「構造的に一度しか現れえない」
ものなら問題ないと思ってたんですが、違いましたか。
/* スレ違いっぽくてスマン */
>>689 「idには役割が複数あるから、CSSの選択子としてのみに用いるべきではない」
ということかと。
役割が複数??
id属性は識別子を指定するだけです。
>>691 スタイルシート選択子として。
ハイパテキストリンクのためのターゲットアンカとして。
スクリプトから特別な要素を参照する手段として。
宣言されたOBJECT要素の名前として。
HTMLページからデータを抽出してデータベースに入れる場合にフィールドを識別するとか,HTML文書を他の書式に変換するなど,利用者エージェントによる一般的な目的の処理のために。
>>689 「構造的に一度しか現れえない」 からidを使う、という
消極的な選び方はどうかと思う。
自分は
・要素を分類したい時はclass
・要素に名前を付けたい時はid
という考え方で積極的に使い分けてる。
好きなようにしろ
>>693 俺もそんな感じ。てか、
>>689の主張だと、まだ順序が逆な気がする。
IDナンバーとかも「ある個」を識別するものだし、「ある個」は一つしか存在し得ない、と考えるのがいいと思う。
696 :
689:02/11/20 17:24 ID:???
>>693 >>695 まあ、俺もだいたい同じように考えてたんですけど、説明の仕方が舌足らずだった
かも。
697 :
Name_Not_Found:02/11/20 17:58 ID:60C7/bui
偉そうに物事語ってる人たちがいるスレはここですか?
698 :
Name_Not_Found:02/11/20 18:11 ID:iUQCkeMx
<div><table><tr><td>
<img src="パス" align=right>
文字
</td></tr></table></div>
で画像が、divの範囲よりも下に飛び出て表示されます。
divにはCSSで幅を指定したりしています。
画像が下に飛び出る説明のあるページを知っている方はどうか教えて下さい。
IE5.5です。
なんで??バカ?
>>698 画像のサイズとか含めて正確に書いてもらわないと答えようが無い。
それだとtable使っている意味もわからないし。
あと、imgのalignは非推奨属性。
align使ってるからじゃないの
これってfloatみたいなもんじゃなかったっけ
>>698 ソースが分からんが、divで指定しる高さよりtableの高さが大きいのなら
'overflow'を指定してない限り正しい動作。
img に align なんて使うのか。
td に使えばいいのでは?
a{
color: #369;
}
a:hover, a:active {
border-bottom: 1px dashed #f00;
color: #f00;
text-decoration: none;
}
a img{
border: none;
}
a:hover img, a:active img{
border: none;
}
なぜか上記のようにしても
画像をhoverした際に
border-bottomが出てしまいます
なぜですか?
まだ font-size-adjust が実装されたブラウザは N7 くらいだと聞きましたが、
ところで、 font-size-adjust の値を指定する場合は x-height / height で出た値を指定するわけですが、
x-heightってどうやって調べればいいのでしょうか。
フォントツール系を検索して使ってみたのですが、 height の値は表示してくれるのは発見したのですが
x-height を表示してくれるものはありませんでした。
何かご存知の方教えてください。
711 :
706:02/11/20 19:46 ID:???
そうかそうか!ありがとう!
CSSは糞
ぶっちゃけ雰囲気悪いですね。ココ。
刺すか刺されるかのこの殺伐さを理解できない奴は帰れ
と、いうわけで715はおんぼろアパートに帰宅されました。
まぁ、お前らド素人は豚の角煮定食でも食ってなさいってこった。
どこが雰囲気悪いのかさっぱりな漏れは終わってんのかして
というわけでここから始まります。
先生の次回作にご期待ください
・・・はっ!
夢オチでした。
対話調の文章ってありますよね。
<p>
田中 なんだぁこの物理マークアップは?ちったぁCSS勉強しろよ。<br>
鈴木 すまんこ。<br>
田中 すまんこじゃねえんだよ。<br>
</p>
こういうやつって、マークアップ的には上のような感じでいいんすかねー。
スレ違いだヴォケ
>>725 むぅ......相対性理論が崩れるときがやってきたようだ
divってはじめからmargin0なんですよね?
なぜかIEとMozillaでmarginの取り方が違います
同じにする方法はないですか?
729 :
Name_Not_Found:02/11/21 15:40 ID:z4AGTMtg
>>728 そんなことない、divだけならIEとMozillaで一緒だよ。
何か他の条件が干渉してるんでないかな。
ソース出してくれないとわからんな。
paddingが違う罠
731 :
Name_Not_Found:02/11/21 19:27 ID:bsI7uYvV
positionプロパティは問題が多いと聞きましたが、具体的に
どのような問題があるのですか?
規格と違う動作をするUAが多いってことかな?
>>731 position:absoluteを設定すると
top,leftといった位置づけがすごいシビアになるのに
この値をどこを基準に測るかの実装がバラバラ。
735 :
731:02/11/21 22:07 ID:???
うわー…おとなしくtableでレイアウトしようと思います。
ありがとうございました。
736 :
Name_Not_Found:02/11/21 22:34 ID:zZ+ExdNY
あくまで position: fixed にこだわってますが何か?
>Netscape 4.x は無視しています
>又、ここであげている手法は、NN4は全く考慮に入れていません。
漢
初心者な質問ですみません
font-size でフォントのサイズ指定した場合
例 <div style="font-size:12px;">本文</div>
IEでは ブラウザの表示→文字のサイズを最初〜最大にしても サイズ固定で変化しないのですが
NN6または7では ブラウザのテキストの拡大 縮小で フォントのサイズが変化してしまいます
NN6、7で変化させない方法教えてくださいませ。
pxでの指定がいけないんでしょうか?
当方windowsです
>>739 俺もマジでやめた方がいいと思う。(色んな意味で
まあこの板の他のCSS関連スレを参照してみて。
あと、「初心者〜」って書いても意味ないよ。
それどころか叩かれることもあるから気を付けてね。
>>728 line-height とかそこらへんの違いが影響してるんじゃない?
>739
とりあえずどうしようもない解決策として
「画像にする」
Operaだとそれすら大きさ変わるけど
>>746 そうそう、俺もやってみてあまりに違和感感じたから % で指定してる。
ところで lineheight って単位付けないで指定するのが良いというのを
どっかで読んだ気がするんだが、何故だかわかる人いる?
>>747 文字サイズ可変でレイアウトが崩れるようなページ作りに問題があるんじゃないかな。
見る方はウィンドウサイズも見やすいように変えるだろうし、そこらは柔軟にしといた方がいいよ。
750 :
age:02/11/21 23:48 ID:???
CSSでお聞きしたいのですが
・普通のボタン・ラジオボタン・チェックボックス・テキストフィールド
等にはCSSで
INPUT {color : #000000; border-style : solid; border-color : #999999}
SELECT {color : #000000; background-color : #c0c0c0; border-style : solid; border-color : #999999}
TEXTAREA {color : #000000; border-style : solid; border-color : #999999}
などと指定してやれば色が変わったりしますが
<input type="file" name="file">
↑こいつを仕様した時に
左側にファイルのパスを表示するフィールド、右側に「参照」ってなりますよね。
左のファイルのパスが表示されるところはCSSで色が変更できるんですが
「参照」の部分の色を変える方法はないでしょうか?こいつだけグレーから色が変えれず困っています。
一部のブラウザでしか動作しないとかでもいいので、よろしくお願いします。
<input type="file" name="file">は糞
>>748 既出だと思うけど回答しておく。
body {
line-height: 1.5em;
font-size: 10px;
}
p {
font-size: 200%;
}
この場合、pにはbodyのline-height算出値の「15px」が継承されるので、文字が重なる。
body {
line-height: 1.5;
font-size: 10px;
}
p {
font-size: 200%;
}
この場合、pには「1.5文字分」という比率が継承されるので、文字は重ならない。
>748
単位を付けないで line-height:1.4 と指定するのと
%で line-height:140% と指定するのはそもそも意味が違う。
詳しくはお調べください。
>>754 1.4も140%も当該要素のフォントの高さに対しての倍率じゃないの?
756 :
Name_Not_Found:02/11/22 00:00 ID:9PbZYiTQ
>>750 知らんな。聞いたこともない。おれが無知なだけか…?
>>750 それ無理だったはず。
おれも変えられるなら変えたいでつ。。
>>750 >一部のブラウザでしか動作しないとかでもいいので
本当に一部のブラウザでしか動かなくてもいいの?
この場合の動くというのは、一部のブラウザでしかスタイルが適用されないというのではなく、
一部のブラウザでしかファイルのアップロード機能が働かないことをさす。
IE(とりあえずVer6では確認)は動くけど、ネスケ、Mozillaはダメ。Operaはしらん
760 :
750:02/11/22 00:08 ID:???
>>758 ありがとうございます。
やっぱ色を変えないでレイアウトするしかないんですかねぇ…
761 :
750:02/11/22 00:10 ID:???
>>760 あ、そうなんですか。知りませんでした。
私は「一部のブラウザでしかスタイルが適用されないでもいい」
と言いたかったんですが、文章がまずかったですね。すいませんでした。
自己レスは糞
764 :
Name_Not_Found:02/11/22 00:22 ID:9PbZYiTQ
>>763 えー、font-size固定時の話だけなん?
>>765 算出値がわかりやすいようにpxで書いただけ。
font-size相対指定時でも起こる現象は変わらない。
767 :
Name_Not_Found:02/11/22 11:12 ID:97cNef7Q
>>767 ナニナニ? そのブルーリボンとやらをスタイルシートで表示しろってえのかね? 無茶ぬかしなさんな。
bodyの背景に
二つのimgを重ねて表示することなんてできますか?
さらにその重なりを
操作できますか?
よろしくお願いします!
774 :
772:02/11/22 15:17 ID:???
どうすればよろしいのでしょうか?
方法を教えてください。
ネスケってバージョン6くらいのときは
単位のない指定を無視してたような記憶があるけど
今はそんなこと無いのかな?
>>774 要素に背景を指定してz-indexいじくってみれ。
わからなかったらz-indexで検索してみれ。
777 :
772:02/11/22 16:26 ID:???
どうもありがとうございました!
bodyのcolorはNN4.xに非対応だったのでしょうか。
とほほやあちこちのリファレンスを見ても対応しているようなのですが
実際に色番号を指定しても反映されませんでした。
他のCSSを削除して、
BODY { color:#cc9966; }
のみ指定してもダメでした。
>>778 試して結論でたんならそれでいいじゃん。
大体NN4.xなんつー糞ブラウザを考慮する事ないよ。
気にしてたらCSS使えない。
>>780 IEも7以降でちゃんとCSS2に対応して
現行のはさっさとその地位に押しやって欲しいところ…
783 :
Name_Not_Found:02/11/22 19:40 ID:ivIybAKm
質問です。おながいします。
日時別テーブルを作りました。
<table>
<colgroup><col class="day"><col class="line" colspan="48"></colgroup>
<tr><th>日時</th><th id="hour" colspan="2">0</th><th id="hour" colspan="2">1</th> (以下23まで)</tr>
<tr><td>11/21</td><td onclick="wtcellclick(0);"></td><td onclick="wtcellclick(1);"></td><td onclick="wtcellclick(2);">(以下48項目)</tr>
<tr><td>11/22</td><td onclick="wtcellclick(48);"></td><td onclick="wtcellclick(49);"></td><td onclick="wtcellclick(50);">(以下48項目)</tr>
(以下13行同文)
</table>
これをIE5で表示すると、tdの幅がばらばら(時刻欄の桁数次第)になるので、
tdセレクタにwidthを設定しましたが、何を指定しても全く効きません。
単純なテーブルならうまくいくのですが、どこかまずいところがあるのでしょうか?
関係ないと思いますがphp4で書き出したものです。
理想は半角1文字分の幅にしたいのですが、揃えば問題ありません。
社内で使うのでWin+IE5以降限定で十分です。
785 :
783:02/11/22 19:53 ID:ivIybAKm
thは2倍の幅にして試しました。
っていうか自己解決しました。すみません
上位要素の幅が狭くて勝手に抑制されていたようです。
まだ余裕があったのになぜだぁ(`△`)
自己解決は糞
新鮮な顔文字は糞
(`△`)オマエガナ
(`△`)オマエガナ は糞
IEのposition:fixed;のバグで困っています。
うちの環境では、position:fixed;を使用したページをIEで表示すると、スピーカーから
「びっくりするほどユートピア!びっくりするほどユートピア!」
と聞こえます。どうしたらいいのか教えてください
|┌ 、::::::l l;;;;;;;;::::/- ,,, _ _,,, -llll:;;;;lヽ:;::;::::|
| l「 l::::::| |::;;;:::::/ ,,`,,-ゝ ニ -,,,´ lll:;;;;l l;;;;;::::l
|::ヽ\::| |::::::::/<(7)ヽ :: <(7ノllll;;;;l l/ ll
|::::::ヽ l l l::::/ :: llll;;l /ll
倉木麻衣です。
ねえみんな聞いて!
まず全裸になり、自分の尻を両手でバンバン叩きながら白目をむき、
「びっくりするほどユートピア!びっくりするほどユートピア!」
とハイトーンで連呼しながらベットを昇り降りするの。
これを10分程続けると妙な脱力感に襲われ、解脱気分に浸れるの。
サイコーよ!
position:fixedで固定して背景は半透明PNG、これ最強。
しかしIEだと固定されないばかりかPNGの色が潰れる、諸刃の剣。
256のPNGならIEでも透過するよ。
フルカラーは透過しないけど。
795 :
Name_Not_Found:02/11/22 22:56 ID:ybnm9K+I
<style type="text/css">
<!--
table.90 td{font-size:90%;}
table.80 td{font-size:80%;}
-->
</style>
以前、これを質問したものなんですが、ネスケ6では無効でした。
どうすれば有効になるでしょうか。
796 :
Name_Not_Found:02/11/22 22:57 ID:ybnm9K+I
あ、勿論
<table border class="90">
<table border class="80">
こうしてます。
class(IDもだけど)を数字からはじめる香具師は糞
でもページ内リンクはID数字でも動くんだよな>Gecko
選択子は無効だけど。
糞っつーかそれinvalid。不正。
invalidは糞
>800
言ってることは正しい。
802 :
795-796:02/11/23 00:41 ID:ksEgE4Xg
ごめんなさい、td一括指定にしかCSSを使わないアホ初心者なもので…
勉強しますのでせめて糞(大便)ではなくカス(生物付着物)にして下さい。
数字から始めるのは駄目という事は「nine9」ならいいんですね。
htmlでは、タグに使う文字の際にネームエンティティなんかを使うというのを覚えていたので…
CSSでは駄目なんですね。ページ内リンクはhtml(a name)で出来るのでOKという事ですね。
では数字以外でもCSSに使う文字 . , : ; なんかは駄目という事ですね?
>>802 根本的に違う。もうちょい基本を勉強してから来た方がいいと思うぞ。
>>802 あるブラウザで動くか動かないかではなく、仕様で認められているか否かで判断した方がいい。
(CSSでセレクタに使える文字は三日坊主++あたりに情報があったはず)
仕様で認められている用法に限って使うなら「安全」だから。
Geckoが急に「ページ内リンクでも数字から始まるidは無効」と仕様通りの解釈をし始めた場合でも混乱せずに済む。
それは別として、この場合の90とか80とかのクラス名は
フォントサイズを変えたくなった時に意味が成り立たなくなるので、やめた方がいいと思う。
半角英数と - だけにしといた方が無難。
がんばれば他にも使えるけどややこしくなるだけだからネ。
807 :
Name_Not_Found:02/11/23 01:07 ID:wNgUpTSC
>>807 charset変えればイイだけではない?
>>807 CSS関係無し。文字コード指定を変えるだけ。
>>805 言いたいことは分かるけど、半角英数じゃなくて、半角英字だネ
先頭に数字がこなければ英数でよし
で、先頭に数字は裂ける
814 :
Name_Not_Found:02/11/23 01:47 ID:ksEgE4Xg
>>803-804n
>もうちょい基本を勉強してから来た方がいいと思うぞ。
tdのフォントサイズ一括指定にしかCSSを使わない俺が基本からやるのは時間の無駄だと思うぞ。
>フォントサイズを変えたくなった時に意味が成り立たなくなるので、やめた方がいいと思う。
%でのフォントサイズ指定は、(IEでの表示を考慮して)90と80しかやらないと決めてるから、絶対に変える事は無いんです。
というか、2つ以上のフォントサイズを指定してるページ自体今1つしかんです(爆)
もうそういう理想論は聞き飽きたんですよ。aとbでもmainとsubでもchinkoとmankoでも自分が編集し易ければいい話。
数字は使わない方が無難と知ったので、それは守りますから。
>>805 そうですか!ありがとうございますネ。
不思議マークアップの尻拭いにCSSを使うのは止めて欲しいと思う
やっぱ質問スレって
>>814みたいな香具師ばっかなのね…
もうそういう理想論は聞き飽きたんですよ
理想論は聞き飽きたんです
聞き飽きたんですよ
飽きたんです
仕様書に書いてあることを聞き飽きたとか言われてもな
Strictな方々ってハタチになるまでは絶対にエッチしない、って本当ですか?
>>819 (´-`).。oO(ストイックかなんかと間違えたんだろうか.....)
>>819 日本の法律の仕様書にはそんなこと書かれてない
823 :
804:02/11/23 02:40 ID:???
>>814 理想論じゃないんだがな。
ブラウザの挙動が変わった時に慌てないで済むように、と
君にとっての現実的なメリットを考慮してアドバイスしたんだが。
聞き飽きたとか言われるんならしょうがない。もう何も言わんよ。
(爆)
まあ一度痛い目にあわないとわかんないやつもいるだろし。
痛い目にあったまま、「こりゃ使えん!」ってなるやつもいるけど
そういうのはそれまでのやつだったってこった。
826 :
Name_Not_Found:02/11/23 03:13 ID:dara/y00
なー
cssのclass指定でtableのbgにcolor引いたら、
ie5.5とかnn4.7で最初の読み込みの時、変な風にcolorが出るときが
あるんだけど、原因わかる?
828 :
Name_Not_Found:02/11/23 03:21 ID:dara/y00
>>827 やぱそだよね…
フォームが絡むとさらに出やすくなるね…
>>811 全角文字使う香具師なんざいねえんだから半角英数なのは当たり前。
あえて明記してると言うことは「頭に」が前提として読むだろ。それとも一から噛み砕かないと分かりませんってか?
<q>ハゲオタ<q>が癇に障ったんだろうか…
834 :
Name_Not_Found:02/11/23 08:03 ID:ksEgE4Xg
初心者のくせに生意気な香具師
>>818 >仕様書に書いてあることを聞き飽きたとか言われてもな
こういう場合はmainとsubにしろって書いてあるんですか
>>823 >ブラウザの挙動が変わった時に慌てないで済むように、と
>君にとっての現実的なメリットを考慮してアドバイスしたんだが。
僕のサイトのアクセス解析によりますと、
IE4-6が95%、ネスケが3%、その他2%/Win95,98,NTが94%、Macが3%、その他3% です。
はっきり言って、プライベートの時間を削ってまで5-6%の人にまで合わせる為に細かく勉強しようとは思いません。
とはいえ、ジャバスクリプトやCGIやジャバは一切使ってません。これでも僕はウェブページ作者として失格ですか?
ネスケ6はDLしたけど重いし、家族全部で4台PC有るけど全部Winです。
で、ウェブ初心者で分からないんですけど、現実的な問題、DLしたIE4-6の挙動が自動的に変更される事は有るんですか?
823氏は僕のレスも見たくないようですから、誰か答えて下さい。
僕はIEを4も5も6も使った事有るんですけど、
HTMLとフォントサイズ一括指定程度のCSSだけに関して言えば、全く覚えが有りません。
そもそもその現象の意味が分かりません。IE7移行とかならわかりますけど…
>>825 今回がまさにその一度あった痛い目だという事はわかりませんか?
で、わからん!ネスケ信者はまぁ少し見辛いけど我慢して。ではなく
ここにこのweb制作管理板の住人の考え方とは全く正反対の、僕が、数ヶ月ぶりに
その考え方が重要となってくるスレに、勇気を持って書き込んだのです。
しつこいようですが、tdサイズ一括指定関連に関してはもう落とし穴は無いでしょ?
>>834 > はっきり言って、プライベートの時間を削ってまで5-6%の人にまで合わせる為に細かく勉強しようとは思いません。
挙動が変わったら、がわからんなら黙ってろ
>>831 全角文字禁止を指摘されないとわからない椰子ハケーン
テメイの脳内でプラズマが発生してますか?
そうとしか考えられない脊髄レスのカンドー。
>>831 マジレスで悪いんだけど、それまでの流れを見たうえでのレスなのか?
だとしたら喪舞はここに来ない方がよいような。
841 :
Name_Not_Found:02/11/23 09:16 ID:ksEgE4Xg
>>836 うっせーバ〜カ、
黙ってろ?最初に二度と書き込むなと言っとけよ!
本当に見下ろしてるのが最低だな。
ID晒す勇気が無いって事は、強制IDの時はそんなに書き込まなかったんだな。
(質問以外はsageで?お前は長時間subback.htmlをチェックしてる暇人か)
教える気無いくせに放置という発想も無いのか。
挙動変更なんて分からなくても10万ヒットしてんだよ。
別に個人サイトなんだからいいだろうが。
2度とこのスレには書き込まないから。
だ っ て C S S 要 ら な い も ん。
個人サイトだから デ ザ イ ン な ん て 発 想 無 い も ん 。
これからはHTMLの事で初心者質問スレで質問するね。
さ よ う な ら
843 :
Name_Not_Found:02/11/23 09:43 ID:lDTxkbky
>>841 あんたの頭も10万ヒットだよ( ´,_ゝ`)プッ
もしかして、本当に「挙動変更」の言葉の意味がわかってないんじゃないかな。
ブラウザの仕様が変わって、今までの通りでは通用しなくなるかも、
って危惧してくれた
>>823=804の優しさが伝わってないんだろうな。
そう考えると切ない。
>>841="185"=ホノカタンですか?w
>2度とこのスレには書き込まないから。
絶対に書き込むなよ。迷惑だからw
>さ よ う な ら
とかいっちゃって〜w
どうせまた来るんでしょ。
もう来なくて良いよ。帰れ。
>>845 放っておくのが一番。
あーいう連中は本当に2度と見に来ることもないから何言っても無駄無駄無駄。
>>847 いや、多分悶々としながらまた見に来て、捨て台詞。
またもーこねーよ!って言いに来るよ。
香ばしい。
うむ、香ばしい。
>>841 自分が気に喰わない回答をする人には徹底的に攻撃して、
誰も羨ましいと思わない自サイト論を繰り広げて、
「誰か他の人いませんか」って言われてもねぇ。
>>848 暴れるだけ暴れて、あとは完全に忘れて本当に見にも来ないって奴もいるよ。
あちこちにマルチポストして、どっかで答えが得られたら
後は放置&忘却の彼方。ってのと似た行動原理(?)
185問題(だっけ?)思い出した
xhtmlで書いてます
target="_blank"タグと同じ効果を
xhtmlで再現するにはどう記述すればいいですか?
javascriptですか?
javascriptスレよりもこちらの方の方が
strictな方が多いと思ったので
こちらで質問しています
よろしくお願いします
>854
あなたには2つの選択肢があります。
・xhtmlを使うのをやめる
・target属性を使うのをやめる
個人的には target="_blank" やられると迷惑だ。
>>854 別窓開きたければ素直にxhtml1.0 Transitional 使って
target使う方がよい。
JavaScript使おうがなに使おうが、
別窓開くのは、strictではないと思う。
>>857 そこはかとなく同意。 てか、
>>854はスレ違いを自覚してるようだが、
「strictな方」と書いてる以上はStrictスレで聞くべきだろ。
---
<h1>タイトル</h1>
<p>本文ズラズラズラズラズラズラズラズラズラズラズラズラズラズラ・・・</p>
---
---
h1 {
font: bolder 1em sans-serif;
margin: 0; }
h1:first-letter {
float: left;
font: 3em/1 serif; }
p { margin: 0; }
---
こんな感じで、h1の1文字目を通常サイズの2倍にして、続くh1残りの文字と p を回り込ませたのですが、
どうして3行目まで回り込んでしまいます。 p だけでやればちゃんと2行までしか回り込まないのに・・・
どうすればよいのかアドバイスください。
>>859 1文字目のフォントサイズを 2em にすりゃいいじゃん
>>859 あるいは p の margin-top を 1em にするとか
863 :
696:02/11/23 18:28 ID:???
>>751 前半はおっしゃるとおりなので、深く反省。
でも、後半については、俺、
>>691じゃないので、
反論の必要がないんですけど。
以上亀でした。
864 :
859:02/11/23 18:33 ID:???
いや、私は 1行目の h1 の2文字目の上辺と2行目にくる p の底辺に first-letter の高さを合わせたいので・・・
書き忘れてしまったのですが、基本となる line-height は 1.5 です。
first-letter の line-height を 1 にしておけば 3em でピッタリくるじゃないですか? 1.5+1.5で。
この方法で p だけでやった場合はうまくいったんですが・・・
舌足らずな質問ですが、アドバイスお願いします。
h1 {
font: bolder 1em sans-serif;
margin: 0; }
h1:first-letter {
float: left;
font: 3em/1 serif; }
p {
margin-top: .5em;
line-height: 1.5;
}
こうするとなんかカッコいいな〜
パクらせてもらうとすっか
866 :
859:02/11/23 18:38 ID:???
一応、図にするとこんな感じです。
~~T~~ ITLE
| 本文ズラズラ・・・
やべ、ずれまくり・・・
>>865 floatさせる要素にはwidthが必須です。
>>868 は?なんで?どこにそんなこと書いてあんの?
でもさ。1文字って分かってんだから幅ぐらい自動的に算出してくれないのかな?
ダメなんだろうけど。
そう言うwidth属性値は策定中。
876 :
Name_Not_Found:02/11/23 19:59 ID:qNdTZehp
質問させていただきます。
たとえば
<ul>
<li>あああ
<li>いいい
</ul>
となっているものを
改行させずにそのまま
あああ いいい
と表示させるにはどうすればよいでしょうか?
>>876 li { display : inline ;}
>>876 li{float:left;}
ところで<li>の閉ぢタグ</li>は省略可だけど
CSSを適用させるならあった方が安全だよ。
>>877 できました。
答え方からしてかなり既出の質問だったみたいですね。
ほんとうにありがとうございました。
880 :
878:02/11/23 20:09 ID:???
おっと、floatはwidth必須だったな。
訂正
li{
float:left;
min-width:1em;
}
んで、</ul>の後に来る要素にclearを指定するのを忘れずに。
( ゚д゚)ポカーン
>>877でいいじゃんか
と。
/* list-styleを適用したいならfloatの方がいいけど。 */
display : inline ;
ってどのブラウザか対応してなかったよな?
>>882 list-styleはdisplay:list-itemにしか適用されないけど、
floatすると自動的にdisplay:blockになるので
結局list-styleは無効になる。仕様上は。
885 :
Name_Not_Found:02/11/23 21:42 ID:8jAcE6IH
886 :
Name_Not_Found:02/11/23 21:44 ID:8jAcE6IH
間違えマスタ
age
fontの一括指定記述方法はどういう順番で書けばよろしいのでしょうか?
>>888 size/line-heigt はセットだがあとは決まってない
仕様書によればこうかな。
1番目 font-style、font-variant、font-weight。この中で順番は自由。どれを省略しても可。
2番目 font-sizeまたはfont-size/line-height
3番目 font-family
891 :
Name_Not_Found:02/11/24 16:23 ID:Rrb05Ned
892 :
888:02/11/24 16:34 ID:???
わかりました!
皆様どうもありがとうございました!
893 :
Name_Not_Found:02/11/25 18:54 ID:wjBWzH+a
リストについて質問させてください
テーブルのようなレイアウトなのにソースを見るとULタグなことがありますが
アレは一体どうやるのでしょうか?
>>893 まずはそのサイトのCSSの記述を見てみたら?
ULでテーブルのようなレイアウトってのがあまりよく想像できない俺は逝ってよしですか?
li{ border: 1px solid; } とかで枠線作って、とかじゃないのかな。
多分ULで段組組んでるサイトのことじゃないかな。
>>893にそのお手本サイトを教えてもらわんことには断言できないんだが。
勝手に想像:li {display: inline; width: ??;} って感じかな
>899
ul {width: 8em;}
li {display: inline; width: 2em;}
あたりにして(marginやpaddingも適当に)
li を8個くらい書くと 4x2 にならないかなーと思って
いやまあそういう話じゃないって言うんならそれでいいんだ
901 :
Name_Not_Found:02/11/25 22:54 ID:MWoxf7dg
float:leftとnoneをclassで使い分けているのかも。
実際そこまでやってしまうと、「いいからtable使え」って感じだが。
display: inline で width ですか
padding: 1em;
width: 25%;
って指定するとMozillaとOperaでは字がはみ出してしまいます。IE6ではちゃんと
padding が適用されているようなのですが・・・
私の指定方法に何か誤りがあるのでしょうか。それともUAの表示バグ?
何か回避方法あれば教えてください。
字がはみ出すってよくわからないんだが
取り敢えず
>>5参照
>display: inline で width ですか
あー,そうか…全くそのとおりです.申し訳ございませんでした.
うろ覚えでものを書くものではありませんね.
罰として part12 の間はもう発言いたしません.すみませんでした.
IE6なので、計算方法の違いではないと思います。
はみ出すというのは、例えば DIV を width: 25%; padding: 1em; にしているのにその中の <p>ズラズラ</p> と
文章があった場合、IE6ではちゃんと25%の辺りで折り返してくれるんですが、他では
25%をちょっとはみ出した辺りで折り返すんです。
>>906 罰として次スレ用のテンプレ案と
このスレが970くらいになったら次スレを立ててください。
IE6でもDOCTYPE宣言をしないと互換モードになる気がする>907
>>909 あ、そうなんですか。XHTML1.1宣言しているのですが、これだとダメなんでしたっけ。
911 :
909:02/11/26 00:26 ID:???
>910
あのさぁ…最初の質問(>904)ではほとんど情報を示さずに、話が進んでから
「実はXHTMLなんだ」とか言い出されるとやる気が一気に失せるんですけど。
悪いけどあとはほかの方に聞くか、頑張って自分で調べてくれ。
自己解決したら結果も報告してくれな。
>>911 偉そうなヤシだな、別に嫌ならシカトすりゃいーだろ。
さっさと逝けや。
今度は逆ギれですか、フルコースで攻めるおつもりですね?
ハーイ、シツモーン! (/*・・)/
pにwriting-mode:tb-rl;で縦書きにしましたが、
下詰めにしたいときはどう書けばいいのれすか?
WinIE6で見てみるとtext-align text-vertical-alignとも効きません。
やっぱ無理ですか?
915 :
Name_Not_Found:02/11/26 02:43 ID:Elx3hUHu
スタイルシートで、例えばgif1とgif2という
二つの画像があったとして、この二つを背景に固定したいと思います。で、1つは
background-color :black;
background-image :url("gif1");
background-repeat:no-repeat;
background-attachment:fixed;
background-position :15% 25%;}
で絶対的な位置に指定できるんですけど、もう1つの画像(gif2)も背景として固定したい(例えばbackground-position :15% 35%;の
ように)のですが、二つを同時に固定するにはどうしたら良いのでしょうか
>>915 無理だと思いますが、画像を合成したらどうでしょうか?
917 :
Name_Not_Found:02/11/26 03:18 ID:Elx3hUHu
あ〜 やっぱりムリなんですかね。。何回か記述試してみたけど、ダメだったし
なぁ・・・
やぱ合成ですかね
質問する前に参考書を買いなさい。
おすすめは・・・
>>914 いや、text-align:right;でできますよ。
そろそろ次スレッドの準備が要りますね。
920 :
Name_Not_Found:02/11/26 07:07 ID:mAP7u2Yu
>>919 できました!
どうやら、ボックスの大きさが文字の大きさと丁度同じだった模様。
これじゃtext-alignでは変化しないはずだ・・・
ボーダーをつけてみるとはっきりしました。
それにしてもボックスの縦幅がかなり理不尽な感じ。
CSS3:text的にこんなのでいいのかな?
>>917 全体をdivで囲うようにして、それにもう1つの背景画像を指定できないかしら?
>>921 "fixed"にできないのでは?
div要素そのものはスクロールしてしまうし
って実験する気力ないんで想像です。ごめん
923 :
1:02/11/26 12:35 ID:???
>>1より、次スレ立てる人に業務連絡です。
このスレ立てる時にポカやって、
>>2の参考サイトにリンク切れが多発してるので、
参考サイトは、
>>6-8のをコピペしてください。
あと、
>>470と
>>873もFAQに入れてください。
お願いします。
……しかし、FAQがあんまり増えるようだと、それ用にサイト立ち上げた方が
いいような気もするな。
ずっとIEでデザインの確認しててさっきNNで見たら見れたもんじゃなかった。
いっそのことNNはスルーしてもいいですか。直すの面倒くせー。
愚痴ってスマソ。逝って来ます。
>>924 NNってバージョン何よ。
漏れもずーっと、NNは無視しているのだが最近気になってきている。
>>924 もーしょうがないと思うYo!
漏れはデザインはほっぽって、リンクだけ機能するようにしといたよ。>NN4向けページ
nn4で見たらテキストのみのサイト。
926は「nn4とそれ以外」で振り分けてるってことです、スマソ
>>925 バージョンは6.2です。iframe使ってるようにしたかったのに(鬱
あるサイトさんではOPERAは崩れてたものの、NNではきちんと表示されてた。
面倒臭いからNNはスルーしようとも思ったけど、出来るならうちでもきちんと
表示させたいからソース見させてもらう事にしました。
>>928 ガーン 6.2でも崩れるのか。
一度確認してみっか。恐る恐る...
>>929 記述やマージン等の計算がきちんと出来てれば崩れないんじゃないかな、と。
931 :
Name_Not_Found:02/11/26 14:39 ID:tRaFX6e1
>>930 そのはずなんだけんどね。
ところで質問。FAQだと思うのだけどなぜか出来なかった。
幅が例えば500pxあるdivのなかに。小さな画像と文字をセンターに置きたいのだが、
text-align:center だけだとテキストしかよってくれなかったのよ。
<hr>なんかもwidth:80%にすると、IEだと中心に来るけど、コカンラなんかだと
左に寄ったまま。
とりあえずパディング左右10%などで<hr>は見た目中央に持ってこれるんだが、
なにが足りらんのでしょうか?
932 :
931:02/11/26 14:44 ID:???
今、
>>4 に上げてあるサイトを見てきた、マージンを左右autoでいいのか?
>>932も何かと不安なんだよ。こんな世の中だから。
935 :
931:02/11/26 14:57 ID:???
>>933 今、手元にはIEしかないので、マージンをautoにしなくてもよっちゃうのよ。
>>934 ふぉろーさんすこ。
不安一杯っす。
帰ってから試すよ。
漏れとしては早くtableを使ったレイアウトから脱却しないと、と思っている。
過去ログもここまで来ると1つのサイトにまとめて欲しくなりますね。
*自分でやれって言わないで*
みんな死ねよ。
939 :
Name_Not_Found:02/11/26 16:23 ID:tRaFX6e1
941 :
Name_Not_Found:02/11/26 20:59 ID:LGLU12LF
>>939 そのページがMETAタグでエンコードを指定しないから。
942 :
470:02/11/26 22:02 ID:???
944 :
Name_Not_Found:02/11/26 22:19 ID:ewTVU2iB
floatのwidth指定についてなんですけど、 width: auto; でもいいですか?
それとも何らかの幅を指定しないといけないですか?
>>941 エンコード指定してます...うーむ、なぜだろ。
それと
>>929のつづきだが、NN7.0を落として確認したら
tableタグで囲われた画像のがバラけた。各セルの下側のみ余白が現れて
バラけ状態に。その他は問題なさそうなんすけど。
精進がたりんか。
>>944 明示しないとダメ。
私は時々min-width:1em;で誤魔化すね。
min-widthはWinIE未対応だけど、NN7やOperaは対応してるから。
947 :
長文スマソ:02/11/27 06:27 ID:mwBAGBkl
スミマセン。質問させてくださいませ。
例えばtableタグで、
<table width="○○%">
<tr>
<td width="●●px">〜</td>
<td>〜</td>
</tr>
</table>
のように書くと、2番目のセルの幅は「Windowの幅の○○%」−「●●px」と
いった値に自動で整形されますよね。
この「○○%−●●px」と言った幅をTABLEを使わずCSSで同じように指定して
やることは可能でしょうか?僕の中途半端な知識では実現できませんでした。
どなたか知恵をお貸しください。
えっと説明が充分かどうかわかりませんが、実際はこれを縦幅で行い、
1番目のセル内は文字数固定で伸縮なし。2番目のセルだけ伸縮させ、
中の要素を「overflow: auto」で囲んで、低めの解像度や小さ目のウィンドウで
見てる人でも無理やり1ページで見えるようにしようと考えています。
現在は、tableタグ内にspanでスクロールボックスを作るという非常にアレな
ソースを書いたら、IEでは%指定の基準をテーブル幅に取ってくれたので期待道理
に動作しましたがネスケではテーブル幅基準のつもりの%指定がWindow幅基準なの
でとても見れたものじゃないページができあがりました。
>>947 overflow:autoはOperaだと凄いことになるぞ
外部スタイルシートをちまちま頑張っている者です。
いくつかの見出し(h)にボーダーやフォント、色などを指定していたのですが、
改行のあと次の標準の分との間に幅があってイマイチなので、
高さを調節したいのですが、どうもうまくいきません。
p要素にine-height:50%をいれると文字が重なってしまい、肝心の段落の隙間はうまりませんでした。
自分はなにか勘違いしていると思っているのですが、
よいヒントがあればあとは検索で探しますので、御指南ください。
margin-bottom
>950
ありがとうございました、今
position:relative; top:10px
なんて無茶を試みていました。
marginは試していたのですが、改めて確認すると負の値も使えることに気づきました。
そして、margin-bottom:-10px
にしてうまく言ったのですが、
そのすぐ下に表があると、文字が表に埋まってしまうので、また直し中です。道は遠いです・・。
ありがとうございました。
952 :
Name_Not_Found:02/11/27 15:49 ID:UWNklzMk
下のようにテーブル風のレイアウトをスタイルシートで
作ろうとしており、ここまで至りましたが、併せて700px全体を
中央に寄せる方法が解りません。どなたか方法を教えてください。
CD紹介
| ̄ ̄T ̄ ̄ ̄ ̄ ̄ |
|img | コメント |
|__⊥_____ |
<style type="text/css" media="screen"><!--
.cdjake { background-color: black; margin-right: 0px;padding: 12px; border: solid 3px red; width: 130px; float: left }
.cdcomment { background-color: black; margin-left: 0px; border: solid 3px red; width: 540px; height: 160px }
--></style>
</head>
<body >
<h2>CD紹介</h2>
<img class="cdjake" src="img/cd_1.jpg" width="130" height="130" border="0">
<div class="cdcomment">
<h3>アルバムタイトル/アーティスト名</h3>
<div class="maintext">
コメント</div>
953 :
Name_Not_Found:02/11/27 17:27 ID:n5enP63U
IE6を使っています。英単語を含んだ見出しを作りたいのですが、
h2 {font-family:'Arial Black','HGP創英角ゴシックUB',sans-serif;}
と書くと、英単語はArial Blackになってくれると言うのに、
日本語はMS Pゴシックになってしまいます。
※HGP創英角ゴシックUBフォントは持っています
英語はArial Blackで、日本語はHGP創英角ゴシックUBで、
というふうに、同じ見出し中に別々のフォントを使うことは出来ないのでしょうか?
ご教示お願いします。
>>953 フォントスタイルって一個しか適応できないんじゃなかったっけ?
>>953 officeインスコしなきゃ見れないフォントなんてWebで使うなよ
956 :
Name_Not_Found:02/11/27 17:55 ID:eDGSh5gf
>>953 フォント名において
英字の全角/半角は正しいか?
スペースの全角/半角は正しいか?
カタカナの全角/半角は正しいか?
CSSではまるのはこんなのとろだ、まさかと思うが確認してみなされ。
>>953 IEではダメみたいだね。ネスケ7だとうまくいく。
h1の中でspanでも使うしかないだろうな。
958 :
Name_Not_Found:02/11/27 18:00 ID:eDGSh5gf
<style>
h2 {
font-family:'Arial Black','HGP創英角ゴシックUB',sans-serif;}
span[lang="ja"]{
font-family:'HGP創英角ゴシックUB';}
</style>
---------------------------------------
<h2><span lang="ja">日本語</span>English</h1>
でどうよ?
959 :
Name_Not_Found:02/11/27 18:00 ID:eDGSh5gf
やば、</h1> → </h2> でよろしこ
>>953 半角カナをエスケープしてみてはどうだろう。
ゴシック→\ff7a \ff9e \ff7c \ff6f \ff78
意味ないかも知れんけど。
ついでに@charsetをシート先頭に書き加えた方がいいかも知れない。
>>954 フォントファミリの指定は、前の方から順に見て、
その字が含まれている最初のフォントが使われる。
このチェックは文字毎に行われるので、欧文と和文を
混ぜて書いていた場合などは、それぞれに違うフォントが
適用されることになる。
961 :
953:02/11/27 19:44 ID:???
>>960 >>956 エンコードや、フォント名の書き間違いではなかったようです。すみません。
>>955 仰る通りです。Officeの購入者って少ないのでしょうか。新ゴUも追加します。
>>958 Netscapeだと認識するのですが、IE6では、lang属性ごとのスタイルを認識してくれません。
IEの実装の問題でしょうか、英単語専用のclassを作ると認識しました。
心なしか、ベースラインがきっちり揃ったような気がします。有難うございました。
>>961 俺はオフィス持ってるが、フォントは入れないようにしてる。
オフィス限定フォントでも、
他候補が指定されてれば構わないと思いますが。
そういう俺もオフィス持っててフォント入れてない派w
>>952 その700pxのボックスをdiv.boxで括って
.box {
margin-left:auto; margin-right:auto;/*NN7,Opera,MacIE向け*/
text-align:center;/*WinIE後方互換モード向け*/
}
を指定する。
ついでに
.cdjake, maintext {text-align:left;}
も指定しておく。
ところで誰か次スレッドよろしく。
>>923参照。
>>942-943をFAQに追加してね。
(私の使ってるプロバイダはスレッド立てられませんので)
>>964もFAQの方が良くないか?
幅固定真ん中寄せもよく出てくる質問だ。
966 :
947:02/11/28 07:20 ID:???
>>948さん
OPERA、、考えたことも無かったです。
対して大きいサイトでもないのでアクセス解析いれてもIEとネスケ少々だけだし。
>>966 凄いことになるから誰も来ない可能性も。
Opera7だと直ってたはずだけどね、overflow。
敢えてOpera使ってるくせに敢えて6にこだわるような香具師は頃せ
IE ユーザはなんとなく OS についてるから使ってるとか
とかバージョンアップしたら OS が挙動不審になるとかいう理由から
アップデートしない人も多いだろうけど
Opera は Win 付属のブラウザを使わずに好んで Opera を使ってる人だろうから
正式版が出てしばらくすればほとんどが 7 に移行するんじゃないかな
まあそれでも不安なら @media とかで Opera 6 に CSS をその部分だけ読ませないようにするとか
# 7 は media 対応どうなってるんだろ。
Operaの古いver使ってる人が来たのを見たことない。
いるのかも知らんが、ブラウザシェア数%の内の、さらに数%と思われ。
Operaユーザーは最新版が出たら、バージョンアップしたものと見なしてる。
もちろんN6ユーザーもN7にバージョンアップしたものと見なしてるよ(w
じゃあMozillaユーザーももちろんナイトビ(ry
うちのとこなんかそうなんだけど、会社だとネットワーク間で
同じソフトを入れておきたいということでバージョンアップも結構
大仕事になる場合があるから、しばらく古いブラウザのままってことも
考えられる。
会社内でoperaがデフォルトブラウザってことは
ちょっと考えにくいがN6は捨てがたくないか
そろそろスレも移行したいものだ
>>976 ここで話されてるのは企業向けのサイトじゃないだろう。
会社でもなにかと個人サイトのお世話になる機会が多い・・・
って奴は少数派か。
979 :
hp:02/11/29 10:47 ID:E1wkz9oR
質問です。
たとえば
<DIV style="margin-left:50px; margin-top:5px">
で、この中にtableを入れてtableの中にテキストを流し込むと
ブラウザで、テキストが切れてしまうんですが
これを防ぐ方法はないのでしょうか?
それともこのやり方は間違ってるんでしょうか?
>>979 余計なお世話だけど、新スレで聞いたほうがいい気がするよ。
Opera7って連続した全角スペースが消えない?
モナ版の「右のAAのズレない環境が標準です」のAAだけど
ってスレ違いだな