/* CSS、スタイルシート質問スレッド【10】 */
Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
関連スレやリンクは
>>2-5 あたりに。
■■■■■ 注意 ■■■■■
質問者 (特に「初心者」) は、
必ず
>>4 にある解説サイト (かなりわかりやすい) で
勉 強 してください。
質問の前には過去ログを WinIEの場合[Ctrl+F]で検索しましょう。
また、IE などではまだ対応できていない要素などやバグが多数存在します。
ですので、
>>2 (関連スレ)の「バグ辞典」に目を通しておきましょう。
また、「環境を書け」 とか 「ソースは?」 と求められたときは
応じるようにしましょう。 回答が早く返るようにするためです。
※ マターリ進行推奨 ※
6 :
ばけらった :02/08/07 00:17 ID:???
おつー
乙。
■■■ 終了 ■■■
1さん、スレ立て乙彼さまです。 こちらで質問してよろしいのでしょうか? 壁紙固定をしているのですが、私のページではスクロールすると なぜか、文字が波打つ(っていったらいいんでしょうか?)のです。 他の方の壁紙固定のページをみても、すんなり壁紙だけがスクロール固定され 文字は普通にスクロールされるんです。 なぜだかわかるかた、教えて頂けると有り難いです。 よろしくお願いします。 <style type="text/css"> <!-- body{ background-image : url(○○.gif) ; background-repeat : no-repeat ; background-position : bottom center; background-attachment:fixed;} --></style>
>>12 カクカクするってこと?
画像やフォントを変えても再現する?
何となく画像が大きいからじゃないかと。
>>12 ブラウザはIE?
画像固定するとスクロール重くなるよ。
その結果ウィンドウサイズがでかかったり、画像がでかかったり、CPUパワーが無かったりすると、
そんな風になることがあるような。
漏れはなぜか文字が消えることがある。 p.hoge{ color:black; background-color:#cccccc; border-style:solid; border-width:1px; border-color:#333333;} こんな感じの装飾で、パラグラフの中身がスクロールしてるとふっと消えたり。 Ctrl+A でも表示されないんだけど、文字の上までドラッグすると再表示。なんなんだか。
前スレ990でおます <img src="**" style="float: left;"> <table> . . これでやってみて、成功はしたんですが imgとtableの間にスペースが・・・(´・ω・`) 解決でけそうでしょうか。 ちなみにposition弄るとMozillaとかでずれる始末(´・ω・`)´・ω・`)
>>13 >>14 12です。答えてクダサッテ、有り難う御座いました。
画像が大きかったら、そうなる可能性があるんですか?
確かに画像・・・大きいのかも。
ちょっと画像を変えてもう一度見てみます。
>16 marginやpaddingあたりをイジれ
とったんは偉いなぁ
>>16 <img/><table>
<tr>...</tr>
</table>
<ol> <li> <dl> <dt>アイス</dt> <dd><p>ミルクで作ったもの</p></dd> </dl> </li> </ol> dlをliで囲んだのをIE5.5でみると、 1. アイス ミルクでつくったもの となり、アイスの左に1.が来ません。 来させるにはどうすればいいですか?
>>25 私も昔悩んだ(過去ログ既出)が、どうにもならない。
>>25 説明が短いなら
<li>アイス: ミルクで作ったもの</li>
>>25 <dl>
<ol>
<li>
<dt>アイス</dt>
<dd>ミルクで作ったもの</dd>
</li>
</ol>
</dl>
こんな感じの不思議マークアップをすればできる。
>>25 <ol>止めて、display:list-itemとlist-style-type:decimalで表現するとか。
dlをインラインにする
31 :
26 :02/08/08 16:22 ID:???
>>30 既出です。
それでもうまくゆかないんですってば。
32 :
26 :02/08/08 16:39 ID:???
つかえねーな
34 :
26 :02/08/08 16:44 ID:???
ルリたんでオナニーでもするか。
35 :
26 :02/08/08 16:46 ID:???
ばけらったでオナニーでもするか。
36 :
16 :02/08/08 20:16 ID:???
>>20 ,
>>24 ダメですた(´・ω・`)
Mozillaだとちゃんと間隔無しで見えるのになあ・・・。
逆に縦幅が分厚くなっちゃって不格好になるんですけどね・・。
モシヤ(´・ω・`;≡;´・ω・`)仕様!?
>>36 モシヤ(´・ω・`;≡;´・ω・`)仕様!?
>>25 li dl:before{content:"\A"}
li dl *{position:relative;top:-1em}
>>40 いや
>>25 には
>IE5.5でみると
とあるだろ。
>li dl:before{content:"\A"}
は通用しないよ、
>>25 結論
IEのCSS対応が糞なのでCSSでは無理っぽ。
どうしてもやりたければ
>>28 。
YA----N-----KE--------!!!!!!!
45 :
Name_Not_Found :02/08/09 12:57 ID:7/P8tf8N
過去の日記 : 1月8日 1月7日 1月6日 1月5日 1月4日 1月3日 1月2日 1月1日 ... こんな横長の、かつ必ずしもすべて表示される必要のない一覧があって、 ブラウザの横幅に応じて見られる範囲が変わるようにしたいと思います。 # 領域は1行におさめたいので、ブラウザの横幅が短ければ # 3日分(上記の例なら1月6日まで)とかしか表示されなくてもよい。 white-space:nowrap; overflow:hidden; これでやると失敗しました。hiddenにならず、領域の幅が伸びるだけでした。 height:1.0em; overflow:hidden; これでやるとheightの指定があいまいで文字の大きさによっては下部が切れたり、 隠れていてほしい2行目の頭が表示されたりしました。 ていうか、hidden部分は2行目というより、右方向の部分に隠れていてほしいです。 うまくやる方法はないものでしょうか。
??? フレームでメニューと本文表示部に分けるみたいな感じ?
>>45 widthも指定してみてはどうだろうか。
うむ。width:98%;位がオススメ。横スクロールが出ないので。
width: 100%;は横棒出るの?
51 :
Name_Not_Found :02/08/09 15:16 ID:PI1QBGpF
NNの4.7で大元のテーブルに背景画像を入れて その中にテーブルを入れ子にすると 背景画像がずれてしまいます。 それを回避する方法はありますか?
53 :
Name_Not_Found :02/08/09 15:43 ID:PI1QBGpF
ん? 言い方まずかったかなぁ? テーブルの中にテーブルを入れます。
58 :
Name_Not_Found :02/08/09 15:51 ID:PI1QBGpF
そのままです
60 :
Name_Not_Found :02/08/09 15:55 ID:PI1QBGpF
こんなんです <BODY bgcolor="#FFFFFF" text="#000000"> <P align="center">SAMPLE</P> <TABLE width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <TR> <TD><IMG src="bg_01.gif" width="600" height="18"></TD> </TR> <TR> <TD background="bg_03.gif" align="center"> <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </TD> </TR> <TR> <TD><IMG src="bg_05.gif" width="600" height="23"></TD> </TR> </TABLE> </BODY>
62 :
Name_Not_Found :02/08/09 15:57 ID:PI1QBGpF
NN4.7で見ると、背景がずれるんです それをCSSでどうにかならないものかと・・・
65 :
Name_Not_Found :02/08/09 16:01 ID:PI1QBGpF
ちょっと待っててください アップローダー探してきます
66 :
Name_Not_Found :02/08/09 16:02 ID:PI1QBGpF
IEでは、ずれないんです
>>66 なぜ、テーブルの中にテーブルを入れてるの?
普通こんな使い方するかな?
68 :
Name_Not_Found :02/08/09 16:05 ID:PI1QBGpF
アップローダー知りませんか? ちょっと見つかんなくって
>>62 NN4.7なんて気にしなくていいじゃない。
71 :
Name_Not_Found :02/08/09 16:12 ID:PI1QBGpF
あげました。 コメントはよろしくお願いします。です
>>67 >>51 では無いが良くやるよ。こういうの。
普通にテーブルを細かくするよりも表示が軽くなる場合があるし。
tdの中には普通にtable入るし。
73 :
Name_Not_Found :02/08/09 16:16 ID:PI1QBGpF
>>71 おーい、それだけじゃ分からないよ。
bg_01.gifはどれ?
75 :
Name_Not_Found :02/08/09 16:18 ID:PI1QBGpF
よろしくお願いします。 よろしくお願いします。02 よろしくお願いします。03 です。
77 :
Name_Not_Found :02/08/09 16:20 ID:PI1QBGpF
なにが分からないんですか?
>>71 ホントだ、妙にずれるね。
>>76 三枚の画像が
bg_01.gif
bg_03.gif
bg_05.gif
79 :
Name_Not_Found :02/08/09 16:21 ID:PI1QBGpF
あ、 よろしくお願いします。がbg_01です すんまそん
>>71 なんだか、二重になってるテーブルの各セルに背景が配置されてる感じだね。
一応これで直ったが、めんどくさいな。
<TD><IMG src="bg_01.gif" width="600" height="18"></TD>
</TR>
<TR>
<TD background="bg_03.gif" align="center">
<table width="75%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background=""> </td>
<td background=""> </td>
<td background=""> </td>
</tr>
<tr>
<td background=""> </td>
<td background=""> </td>
<td background=""> </td>
</tr>
<tr>
<td background=""> </td>
<td background=""> </td>
<td background=""> </td>
</tr>
</table>
</TD>
</TR>
<TR>
<TD><IMG src="bg_05.gif" width="600" height="23"></TD>
</TR>
</TABLE>
81 :
Name_Not_Found :02/08/09 16:29 ID:PI1QBGpF
>>78 そうなんですよ。
前からこれにずっと悩まされてました
82 :
80 :02/08/09 16:31 ID:fRgqgVyI
age忘れ。 補足:多分、親のTDのbackground属性が、 このテーブルのTDに承継されてるんだろうね。バグだわな。
83 :
Name_Not_Found :02/08/09 16:33 ID:PI1QBGpF
おーおできた! ありがとうです。 からTDにも入れるってことか~
84 :
Name_Not_Found :02/08/09 16:37 ID:PI1QBGpF
みなさん有難う御座いました。(ペコリ
85 :
45 :02/08/09 17:13 ID:qsL+IPLZ
遅くなりました。みなさまご回答ありがとうございます。 widthを指定しても、 100%だと文字列全体(1月1日まで)を表示しようとするので、 ブラウザに横スクロールが出てしまいます。 で、その後いろいろ試した結果、 本来は{width:100%}で大丈夫であることがわかりました。 それが、テーブルの中にある領域では大丈夫じゃなくなるようです。 図らずも、わたしがテーブルレイアウトしていることがばれてしまいました。 すみません…。 でも、これってブラウザのバクですよね? WinMe + IE6.0 です。
86 :
45 :02/08/09 17:47 ID:???
がんばってそのページだけテーブルレイアウトやめました。 こうなると、全ページでやめたくもなるが…。うむむっ。 おさわがせしました。
中途半端が一番良くない
て言うか何でテーブルレイアウトしてるの? CSS使うの辞めたら?
89 :
Name_Not_Found :02/08/09 19:37 ID:7zUQpBzq
別にテーブルレイアウトとCSSは併用できるよ
段組はCSS3で正式サポートだから、現状では別に テーブルレイアウトを使っても良いんじゃないかと言ってみる。 俺は使わんけど。
91 :
45 :02/08/09 20:18 ID:???
>>テーブルレイアウト
すでに覚えてないけど、IE5&6とNN6の表示を合わせるなどモロモロの苦悩があって、
確かやむにやまれぬ状況でテーブルレイアウトを選択をしますた。
でももういっぺんトライしてみます。
ところで、テーブルレイアウトをやめてDIVをfloat:leftしたんですが、
そしたら
>>16 さんの状況になってしまいました。
どうやらfloatすると3pxの余白が空くみたいです。
>>24 さんの指摘しているような、
htmlファイルの改行やスペースなどの問題でもないようです。
まいった。
93 :
16 :02/08/09 20:21 ID:???
ここってcssだよな
95 :
45 :02/08/09 20:22 ID:???
97 :
40 :02/08/09 21:26 ID:???
98 :
Name_Not_Found :02/08/09 22:45 ID:eGcNMhbu
見出しタグへのスタイルシートの適用方法がわかりません。 <h1><img src="hoge.gif" ~ ></h1> <h2><img src="hogehoge.gif" ~ ></h2> hoge.gif と hogehoge.gif の間を0にするにはどのように定義したら よいのでしょうか? windows環境で、Operaだと marginを0pxにするとうまいこと表示できます が、IEやNNではうまくいきません。
>>95 div.c にも float:left;
100 :
Name_Not_Found :02/08/09 23:01 ID:wbKKHxS9
>>98 こうかな?
h1, h2 { margin: 0; }
h1 img, h2 img { vertical-align: text-bottom; }
101 :
45 :02/08/09 23:14 ID:qsL+IPLZ
table{display:none} /*広告非表示*/ カッコいいね
>>101 white-space:nowrap;は消せないの?
>>98 marginだけでなくpaddingも0にしたかい?
改行する時<br>を使うと、 htmlと同じように改行できないんですけど、、、、 外部スタイルシートでbodyを指定してます。 body { font-size: 14px; background-color:ffffff; letter-spacing: 0.1em; font-family: "MS Pゴシック" } こんな感じなんですが、、、、
>>105 >改行する時<br>を使うと、
>htmlと同じように改行できないんですけど
質問の意味がわからないんですけど……。
107 :
98 :02/08/09 23:41 ID:eGcNMhbu
>>100 回答ありがとうございます。
画像の間を0にしたいんですが、教えていただいた方法でも
NNとIEだとうまくいきません。
>>107 この場合は
h1, h2 { margin: 0;}
だけでよくないかな?
なにが原因か調べるときは
border:1px solid black;
をいれて見るといいよ。
>105 それはバグ。 letter-spacingを指定すると<br>周りがおかしくなる。 br{letter-spacing: 0em} で回避しる。
110 :
105 :02/08/10 00:44 ID:???
>>109 バグなんですか。ありがとうございました!
文字間隔を調整するにはletter-spacingを使用する以外に、
他に方法があるんでしょうか?
111 :
45 :02/08/10 00:45 ID:VD2lOfaJ
112 :
98 :02/08/10 00:49 ID:???
>>100 >>107 無事にうまくいきました。
自分の確認不足だったようです。
すみません。
それといい調べる方法を教えていただき感謝いたします。
113 :
107 :02/08/10 00:50 ID:???
>110 いや、だから br{letter-spacing: 0em} で回避しると言ってるだろ。 そうじゃなければ、、 ス ペ ー ス 入 れ る し か な い な (藁
115 :
16 :02/08/10 01:32 ID:???
>>111 いっそ
div.b {
background:#99ff99;
position: absolute;
width:200px;
}
div.c {
background:#9999ff;
position: absolute;
left:200px;
white-space:nowrap;
}
dic.cの後がどうなってるのかしらないけど。
117 :
45 :02/08/10 01:49 ID:???
>>115 全体をDIVかなんかでくくって、
{
background:url(/*画像*/) no-repet;
padding:0 0 0 /*画像サイズ分*/;
}
これでどう?
118 :
45 :02/08/10 01:57 ID:VD2lOfaJ
>>116 それでいくと、div.cが200px分だけブラウザから右にはみ出してしまいました。
# div.cにwidth:100%を指定した上での話です。
# width指定しないと、さしすせそ…の文字列を全部横に表示してしまいます。
119 :
16 :02/08/10 02:02 ID:???
>>117 ああああ・・・
貴方は自分の中で神と化しますた。
ホントにありがとう(;`・ω・)人
他スレでも書いたんだけどこっちの方が良いと思われなので selectのスクロールバーの色を指定したいんだけどこれじゃできなかった… <html> <head> <title></title> <style type="text/css"> <!-- select { scrollbar-base-color: #ffffff; scrollbar-face-color: #ffffff; scrollbar-arrow-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-darkshadow-color: #ffffff; } --> </style > </head> <body> <form> <select name="test"> <option value="1" selected>A </select> </form> </body> </html> プロパティが違うの?
マルチかっつーの
123 :
120 :02/08/10 03:16 ID:???
>>121 レスサンクスコ
出来ないってのは根本的に指定出来ないの意?
123は偽者 氏ね
>>118 「ブラウザの横幅に応じて見られる範囲が変わるように」
という趣旨に合ってるとおもうのだが。
かなり卑怯くさいが
div.b {
background:#99ff99;
position: absolute;
width:200px;
z-index: 1;
}
div.c {
background:#9999ff;
position: absolute;
padding-left:200px;
width:100%;
white-space:nowrap;
overflow: hidden;
}
双方heightを指定しないと文章量によっては
悲しい事態になると思われ。
>>127 div.cに
box-sizing: border-box;
-moz-box-sizing: border-box;
追加ね。
li要素に孕ませてるformをインラインにして所謂メニューっぽくしようとしたのですが Mozillaで上手くいきませぬ。 IE5.5だとli form{display:inline;}でできるんですが。 どなたか解決方法教えてください。おながいします。
孕(はら)ませてる、所謂(いわゆる) 難しく書くね 再変換しないと読めないつーの
131 :
45 :02/08/10 13:04 ID:???
>>116 >>127 の双方を参考にして、
ページ内の他の要素との問題も解決しつつ
ぐちゃぐちゃのスタイルでなんとか希望の表示を実現しました。
しかし…ソースは恥ずかしくて他人に見せられないです。
これでいいんだろうか。藁
ありがとうございました。
>>132 所謂は2chでも時々レスでも見ることあるけど(極稀に)
「孕む」なんて初めて見たよ 絶対、読めない
って、スレ違いなので終わり
孕むはよく見るな。
読めるだろ… >129 どういうことかよくわからないんだが、 ○孕(はら)ますぞゴラ ○既出(がいしゅつ)です ○お願(なが)いします etc... というリンク群があって、:hover時にフォームっぽい動きをして欲しいと。 ┏━━━━━━━━━━━━━━┓ ┃お願(なが)いします ┃ ←反転中 ┗━━━━━━━━━━━━━━┛ こういうことか?
>>129 同じくわからんのだけど、フォームの部品を li に孕ませて、
それをスタイル指定で inline にしたい、ってこと? 下みたいに。
<html><head><style>
li {display: inline;}
</style></head>
<body><form>
<ul>
<li><input type="text"></li>
<li><select><option>#1</option><option>#2</option><option>#3</option></select></li>
<li><input type="submit"></li>
</ul>
</form></body></html>
これは Mozilla でも inline になる。
孕むは風を孕む、とかでも使うし。
138 :
129 :02/08/10 16:16 ID:???
書き方が悪かったですね、スマソ。 ソースはこんな感じです。 <div> <ul> <li><a href="">hogehoge</a></li> <li> <form action=うんちゃらかんちゃら><input type=hidden name=なんやらかんやら> <select><option>もにょもにょ</select><input type=submit"></form></li> </ul> </div> この時にhogehogeの横に来るようにinline指定したのですがダメですた。 他の要素(selectとかsubmit)辺りにも指定してもダメですた。 わ・・かりますかね?
139 :
45 :02/08/10 16:30 ID:???
>>138 ulとformの両方にinline指定。
140 :
129 :02/08/10 16:57 ID:???
ってかselectとか「submit」って何だよ(w
鬱氏。
訂正:selectとかoptionとかinputとか。
>>139 やり済み。でも無理。
(゚д゚)ハァ?
<li>の自動改行をCSSで防げる?
144 :
129 :02/08/10 22:09 ID:???
解らないのなら黙ってろ
>>143 IDだしてからもう一度、どうしたいのかを明確にしてレスおねがいします。
146 :
Name_Not_Found :02/08/10 22:32 ID:qWCtKX1x
li { display: inline; }
147 :
Name_Not_Found :02/08/10 23:28 ID:Fr9Xyr7U
border-bottom: 1pt #0066ff solid; border-left: 1pt #0066ff solid; border-right: 1pt #0066ff solid; と書くと何だかどうかと思ったので (要は上の線を消したい) border: 1pt #0066ff solid; border-top: 0pt; としたのですが、IE6.0以外だと問題ありますでしょうか?
149 :
147 :02/08/10 23:44 ID:???
>>148 なるほど…。ありがとうございました。
感謝します。
>>147 border:#0066FF solid;
border-width:0 1px 1px 1px;
とかどう?
漏れはいつもそーゆーときは↑のようにやってるんだけど。
152 :
147 :02/08/11 01:52 ID:???
>>150-151 なるほど、そんな方法もあるんですね…。
全然思いつきませんでした。(汗)
有難う御座います。早速使わせて頂きます。
153 :
Name_Not_Found :02/08/11 05:16 ID:hfInzqh6
すいません ちょっくら質問させてください <div>内にいくつか画像を置いて外部スタイルシートで画像の配置を position : absolute; top : 90% left : 90%; って感じで指定してるんですけど IEやMozillaではうまく表示されてるんですけど Operaで見たときにある画像だけが<div>の外にはみ出して表示されてしまうんです なんとかこれを回避する方法はないでしょうか
>>153 divの指定を書かないと何とも言えないな。
divにwidth,height指定してるんでしょ?で、そのdivにbackgroudとborder指定かなんかして
その枠外に画像が表示されるってこと?
155 :
153 :02/08/11 06:14 ID:???
156 :
153 :02/08/11 06:17 ID:???
>>154 えっと、divに当ててるCSSはこんな感じです
div {
width : 400px;
height : 200px;
border : dashed 1px #000000;
padding : 0;
margin : 0 auto;
position : relative;
top : 50px;
}
Opera、NNはボックス領域を指定してもIEと違いきっちりと width,heightを表示するよ。 IEの場合、width,height指定してもコンテンツがそれよりも大きければ ボックス領域が可変するけど、 Opera,NNは、コンテンツに関わらずwidth,height指定通りにボックス領域を レンタリングする。 回避する方法は、画像が一枚であればその画像に沿ったボックス領域を指定。 画像が複数枚であれば<br>などであらかじめ長さを決めといてボックス領域を指定するぐらい だろうと思う。 min/max-width/heightってのがあるけども、IE6では対応してない。
>>159 ここ
・CSSコミュニティの功罪を評価するスレ 6rd Stuff
が新スレになったみたいなんだなー。  ̄ ̄
だから今日からは
>>158 なんだなー。
ミスってageちゃったんだなー。 ゴメン。
そんなん移行前にまとめてやればいいじゃん
すみません スレ違いだと思うのですが 外部にjavaスクリプトファイルを作るにはどうすればいいのでしょうか? cssは作れたのですが・・・
164 :
Name_Not_Found :02/08/11 19:20 ID:Ze9j2FzY
<script type="text/javascript src="hoge.js"></script> スレ違いだが。
165 :
Name_Not_Found :02/08/11 19:20 ID:Ze9j2FzY
<script type="text/javascript" src="hoge.js"></script> まちがえた。
You is a big fool man
ありがとうございます 本当にどうも
Thank you. Really plese.
すいません ページへの記述は<LINK rel="javascript" href="usotsuki.js" type="text/javascript"> これだとならないのですが別のですか?
外部ファイルは <script type="text/javascript" src="usotsuki.js"> <!-- 不可視領域 function swMenu(elem){ if(elem.style.display != "none"){ elem.style.display = "none" } else{ elem.style.display = "inline" } } function dispImg(image,text) { photoArea.innerHTML = "<img src='" + image + "'><br><br><div style='font-size:9pt;text-align:center;image-align:center'>" + text + "<"+"/div>" window.status = photoArea.innerHTML } // 不可視領域終了 --> </script> こんな風に書きました
<html> への書き込みです
173 :
Name_Not_Found :02/08/11 19:55 ID:Ze9j2FzY
<html <LINK rel="javascript" href="usotsuki.js" type="text/javascript"> >
>>174 ありがとうございます
助かりました
>>175 板汚してすいません
今後はしませんし、自覚してます
>>176 自覚しましたでしょ。
自覚してるんだったら書き込むなよ。
onmouseover='this.style.backgroundColor="#FFDDDD", this.style.color="#444444",this.style.fontSize=13' onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13' これcssに書き込めますか? よろしくお願いします
span.1{この部分}
この部分に書いたんですが作動しません
>>180 さん、どうかきましたか?
182 :
180 :02/08/11 20:57 ID:???
やっても作動しないのですが span.1{ /* onmouseover='this.style.backgroundColor="#FFDDDD", this.style.color="#444444",this.style.fontSize=13' onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13'*/ } これだといけないのでしょうか?
/* これはコメントです。 「CSS」と「JavaScript Stylesheet」の違いを勉強しましょう */
なるほど
187 :
Name_Not_Found :02/08/11 21:48 ID:Ze9j2FzY
>>179 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
span.c1 a:link
{
color: red;
background-color: black;
font-size: 13pt;
text-decoration: none;
}
span.c1 a:visited
{
color: red;
background-color: black;
font-size: 13pt;
text-decoration: none;
}
span.c1 a:hover
{
color: #444444;
background-color: #ffdddd;
font-size: 13pt;
text-decoration: none;
}
-->
</style>
</head>
<body>
<p>
<span class="c1"><a href="#">ABCDE</a></span>
</p>
</body>
</html>
バリバリ使えるんだが?
自分のHPに適用したら拒否されました
君のやり方でいくとこうなる。タグに含めるんだな。 <span onmouseover='this.style.backgroundColor="#FFDDDD",this.style.color="#444444",this.style.fontSize=13' onmouseout='this.style.backgroundColor="black",this.style.color="red",this.style.fontSize=13'>ABCDE</span> ホントは分離したい。 <span onmouseover='eve1()'>ABCDE</span> eve1()を別途定義するわけだが、それは自分で勉強してくれ。 ちなみに、このレベルでjavascriptスレに行くと苛められるから止めとけ。
はい、ありがとうございました
>>192 あんた、もーちょいCSSの基礎から学ぶことをすすめする。
CSSは他との組み合わせによって表示が崩れたりするから
何が原因かをつかめるようにしといた方がいいぞ。
その場しのぎで今回に限って使いたいってのならまた別だが。
194 :
Name_Not_Found :02/08/11 22:39 ID:Ze9j2FzY
なんだよJavaScripじゃなくてCSSでやりたいけどって意味じゃないのか世。
どっちにしろ無理だろ
196 :
Name_Not_Found :02/08/11 23:37 ID:7pBl8Tl1
CSSなのかJavaScriptか分からないので こちらに書かせていただきます。 マウスカーソルの形を変えているサイトはよく見るのですが、 自分でそのマウスカーソルの画像を作るにはどうしたらよいのでしょうか? もちろん、自分のパソコンだけでなく、 サイトの訪問者全員が見られるようなものです。 どなたかよろしくお願いします。
>>196 そんな事するな。アクセシビリティ、ユーザビリティ共に不便な事極まりない。
以上。
>>196 ウィンドウズ用のカーソルファイルを作って、CSSで
body { curosr: url(my.cur); }
とする。ただしIE6のみ。
199 :
196 :02/08/12 00:05 ID:???
>>197 すみません。
あるサイトで普通のマウスカーソルに色がついたものを見て
どうやってやってみるのか知りたかったんです。
>>198 できました。ありがとうございます!
スクロールバーの色変えるのあるじゃないですか? 詳しく忘れたけど、 bodyのあとに、カーソルの色、矢印の色って、設定するやつです。 それは出来るんですが、 例えば、フレームを使ってるページで、 「フレーム内に表示されるものは、全部このスクロールバー」 っていう風に設定できないですか? おそらく出来ないんでしょうけど、 もしあれば、楽だなぁなんて思いまして・・・
>>200 あんまり言ってるいみがわかんないけど、
フレームの各ページにそれぞれの設定した外部スタイル
読み込ませればいいんじゃない?
全部タグに書いてるので外部スタイルなんて知らない罠
204 :
Name_Not_Found :02/08/12 14:48 ID:eBRpVk6L
ちょっとお聞きしたいんですが border-styleのdashedはNN4.7では表示されないんでしょうか?
はい
206 :
Name_Not_Found :02/08/12 14:50 ID:eBRpVk6L
そうですかー ありがとうです
なんで改行がBRじゃだめなんですか
208 :
Name_Not_Found :02/08/12 14:54 ID:t/7110mz
だめじゃないけど
でも<P>が多いですよね。 <BR>が好きなんでDreameWeaverでもいつもshift+enterなんですけど
突っ込まれる前にDreame=Dream
好き嫌いじゃなくて時と場合によりけり。 PとBRはそもそも用途が違うでしょ。
段落、ですよね。 でも一行改行するだけでも<br><br>としてしまう 俺はだめですか
だめです
214 :
212 :02/08/12 15:22 ID:???
だめ人間に認定されますた
ヤッタネ
俺も<br><br>だよ…
217 :
Name_Not_Found :02/08/12 15:41 ID:wYZ/F30x
body { font: 16px #000000 "MS Pゴシック"; background: #ffffff fixed url(kabe.gif); } h1 { font: 14px #000000 "MS Pゴシック" } こんな感じの外部スタイルソートを指定して、 文字を少し小さくしたい所だけ<h1>ここに小さくしたい文章</h1> としているのですが、NNで表示させるとフォントがやけにでかくなります。 <h1>の使い方間違ってますか?
NNもバージョンによる可能性あり。 あと、スタイルシートなしのときとの大きさは?
<hx>←文字装飾目的に使ってるなら間違い。
何から何までネタですか?
>>217 デザイン目的で装飾したいならdivやspan、
文字を小さくするだけならsmallでも使いなさい。
222 :
217 :02/08/12 15:50 ID:wYZ/F30x
外部スタイルシートへのリンクをはずし、 <h1>をはずし、NNで表示させるとと普通のサイズになります。 (K@tsukun's PAGE!さんをNNで見たときと同じ) ちなみにNN4.78とNN7どちらもためしました。
223 :
217 :02/08/12 15:55 ID:wYZ/F30x
ネタじゃないんです。。。<div>や<span>で指定すると、 文字装飾の指定できる数にも限界がありますよね? <hx>なら<h2><h3>..としていけば、、と思っていたもので、、 すいません。。アホです、、
>>223 classやidといった概念があるので
>>4 当たりのサイトを見て勉強してください
225 :
217 :02/08/12 15:59 ID:wYZ/F30x
はい、電波な質問連発ですいませんでした。
>>4 で勉強してきます。
226 :
217 :02/08/12 16:19 ID:???
できました! ではお世話になりました。
228 :
227 :02/08/12 16:26 ID:???
うわ、もう解決済みって話? バカは漏れか・・・。 逝ってきます。
特定の列にtext-alignを一括指定する方法はないのでしょうか? CSS2仕様書では、 'border' 'background' 'width' 'visibility' のセルそのものを操作するプロパティしか選べなくて、セル内の テキストを一括して操作するのは無理っぽいんですが。 IE6では無理やりテキスト操作しますが、Mozillaでは仕様書通りの 動作をするので・・・。できたら便利なんだけどな。
<col span="x" style="text-align:center">でいくしか思いつかない。 ところでMac IE5.0ってテーブルtext-align:center指定すると無視らない??
>>230 3列目を中央揃えなら
tr > * + * + td {text-align: center}
tr > * + * + * + td {text-align: left}
>>230 <col align="right">
でやるのが正しいのでは。
col, colgroup, td, thのalign属性はstrict DTDに含まれてるし。
>>232 無視はしないと思うが?
と言うか、tableにtext-align:centerを指定すると
結果がどうなるべきかわかってるよね?
>235 中身のテキストや画像が中央揃いになるはずなんだけど、ならない……。 Windowsだとなるんだけど。
237 :
235 :02/08/13 17:51 ID:???
>>236 スマン、tableに指定しても無視するかも。
tdにtext-algin:centerを指定してみれ。
238 :
235 :02/08/13 18:01 ID:???
てことで、ちょっと確認してみた。 tableに指定しても無視するね。 俺は自分のサイトでtdに指定してたよ(鬱)
239 :
230 :02/08/13 20:21 ID:???
>>234 なるほど、CSSでなく、HTMLでやればよかったのですね。
アドバイスをしてくださった皆さん、ありがとうございました。
これから試してみます。
240 :
Name_Not_Found :02/08/13 21:36 ID:xrDFbzG4
みんな、動作確認のブラウザはverいくつを使ってる?特にIE。 うかつに上げる訳にはいかないけど、CSSの現状も体感しておきたい。。 リファレンス本の対応表だけで知った顔してるのもアレだしね。 PC一台しかもってない身は潮時の見極めが難しいな。
>>240 6と5.01SP2と4.01SP2を用意。
まあ6と5.0xで行けるなら間の5.5でも大丈夫だと思い、5.5は省略。
難しいことをやると4.0xで崩壊することがあるので、時々チェック。
4からのバージョンアップした5なら(インストール時に指定したら)
4互換モードがあるので、それでもよい。
GeckoモノやOperaは最新版だけでよかろう。
3つも使えるのか…うらやましいな。 俺はつい最近、魔がさして5.0→5.5に上げてしまった。 あの頃の非対応ぶりを忘れるべからず、と自戒しつつも、やっぱりどこかで 下位互換に対する意識が甘くなっていっちゃうんだよね。1つだけしか持ってないと。 >GeckoモノやOperaは最新版 には同意だな。
>>240 N7.0PR1(Win&Mac)、WinIE5.5、MacIE5.1.5、Opera6.04で確認してる。
スタイルシート適用除外のブラウザ(N4.79、iCabとか)でも
一応念のためチェックしているけど、こっちはあまり意味はないな。
むしろlintで文法チェックすることの方を重視してる。
imgにボーダーなしで a:hoverの時のみボーダー出るようにするにはどうすればいい?
>>245 imgのボーダー関連は色々と問題があるから
具体的にどうやって、どう駄目だったか説明してくれないと。
247 :
245 :02/08/14 06:29 ID:???
本当はimgにボーダー表示したくないんだけど 1px指定しないとa:hoverも反映されないんだ だから今はこういうソースになってるよ img{ border : 1px solid #000000; } a:hover img{ border : 1px dashed #ff0000; } どうすればいいかな?
249 :
245 :02/08/14 06:34 ID:???
む、無理ってこと?
ポイントは擬似要素
251 :
Name_Not_Found :02/08/14 10:13 ID:4zvpkbJP
画面の左に線を出したいのですが html{ margin: 0; padding: 2em; border-color: #fff; border-style: solid; border-width: 0 0 0 4ex; } とするとUAの枠が消えてしまい、違和感が残るので body{ margin: 0; padding: 2em; border-color: #fff; border-style: solid; border-width: 0 0 0 4ex; } としましたら、UAの枠は残っていましたが 線が途中で切れてしまいます UAの枠を残して尚且つ画面いっぱいまで線を出すにはどうしたらいいでしょうか? 意味不明ですいません。
UAの使い方間違ってる。 htmlに指定したらできるぞ? html{ margin: 0; background:black; border-color: #fff; border-style: solid; border-width:0 0 0 3em; }
253 :
251 :02/08/14 10:41 ID:???
アフォか。志ね
騙りか?
255 :
251 :02/08/14 12:34 ID:???
それを見た瞬間、私は凄い誤爆だと思ったんですよ。
257 :
Name_Not_Found :02/08/14 16:50 ID:cPg04FUD
positionがabsoluteのボックスでは、margin-left:autoとmargin-right:autoで センタリング出来ますか。どうも左寄せのままになってしまうのですけれども。
259 :
257 :02/08/14 16:55 ID:cPg04FUD
初心者で申し訳ないのですが、どうしたらうまくセンタリングできますか。
>>259 ボックス位置を絶対指定してるしてるのに、センタリングしたいってのが意味不明。
absolute削って、普通にmarginをautoにすればいい。
261 :
257 :02/08/14 17:01 ID:cPg04FUD
absoluteを削るとボックスの中のボックスが外に出てしまうのですけど。
>>261 absolute指定したボックス内のボックスをセンタリングしたいってことね。。
んじゃ、普通に内側のボックスにmargin:autoを指定してやればできるでしょ?
.outer { color:white; background:black; width:300px; height:300px; position:absolute; top:100px; left:100px; } .inner { color:white; background:red; width:100px; height:100px; margin:auto; } ================== <div class="outer"> <p class="inner">うんこ</p> </div> というような感じ方
264 :
257 :02/08/14 17:09 ID:cPg04FUD
いえ、ボックスの中は絶対位置で配置してあるのです。 その配置してあるボックスを囲っているボックスを、 ページの真ん中にもってきたいのです。
>>264 ガーン・・・
それは無理。絶対指定ってのは親要素を無視(影響を与えない)するから親要素なんだよ
内側のボックスはrelativeにするとできるけど。absoluteジャム理。
267 :
257 :02/08/14 17:14 ID:cPg04FUD
そうですか・・・、ありがとうございました。 他のレイアウトを考えて見ます。では。
268 :
:02/08/14 17:39 ID:???
#outer {position: relative; top: 0; left: 0; margin: auto; width: 400px; height: 300px; border: solid 1px green;} #outer #inner1 {position: absolute; bottom: 10px; left: 30px; width: 200px; height: 100px; border: solid 1px blue;} #outer #inner2 {position: absolute; top: 40px; right: 80px; width: 260px; height: 120px; border: solid 1px red;} <body> <div id="outer"> <p id="inner1">inner1</p> <p id="inner2">inner2</p> <p>normal</p> </div> </body> こういうことがやりたいんじゃないの? outer はページ(左右)中央で,その中の inner1, 2 は outer に対して 絶対位置ってことじゃないの?
269 :
257 :02/08/14 18:32 ID:cPg04FUD
そうです。
270 :
257 :02/08/14 18:34 ID:cPg04FUD
ありがとうございます。上のソースは参考にさせていただきます。
271 :
245 :02/08/14 22:23 ID:???
>>271 しつこい。
だったらそのサイトを探せ。
img{ border : 1px solid #000000; } img:focus { border : 1px dashed #ff0000; }
274 :
245 :02/08/14 23:17 ID:???
だからさー できるっていってんだからさー あ もしかしてここの人スキル低いの?(w ごめんねー
275 :
Name_Not_Found :02/08/14 23:19 ID:D4X/kADy
276 :
245 :02/08/14 23:23 ID:???
>>275 わかんねえなら黙ってろって(w
>>276 わかんねぇなら調べろって(激ワラ
つーか、騙ってんなよ。おばぁちゃんの家からアクセスか?
そのまま、行方不明でもなれば?(pu
>>274 img{margin:1px}
a:hover img{border:1px solid #000}
とかで、できるかもなー。
ってことで失せろ。
>>277 >わかんねぇなら調べろって(激ワラ これじゃ質問スレッドの意義無いだろー アフォってやつですかー? >つーか、騙ってんなよ。おばぁちゃんの家からアクセスか? 君、どこからおばあちゃんが出てくるのかね おばあちゃんっこですかー? >そのまま、行方不明でもなれば?(pu 意味不明ですねー
280 :
274 :02/08/15 00:00 ID:???
img{margin:1px} a:hover img{border:1px solid #000;margin:0} marginなくすの忘れてた。
281 :
274 :02/08/15 00:01 ID:???
>>279 ぎゃはは、脳天爆発してんな、おまえ
いちいち引用して、解説まで加えちゃって(ぷー
めでてーめでてー 、ごくろうさん(ハァト
おいおい 煽る方が電波になってるぞ
いままで何度となくこのスレを救ってきた頼みの一言! ↓はい、次の質問。
感情的にならない
何の説明なく決め付ける文はよい印象を与えない。
また態度の大きい人は嫌われる。
ex) 答えられねぇんなら黙ってろ!!! <お前だけだよ>
弱気な表現は避ける
弁解じみた表現は良くない。また、まわりくどい。
ex) 超初心者で何もわかりませんが……
<わからないなら
>>3-5 ,
>>23 を読めよ>
表記ミスに注意
内容がどんなにすばらしくても
文字使いにミスがあると誤解を招く。
曖昧文は書かない
いくつにも解釈できる文章は絶対に書かない。
ex) ここではきものをぬいでください。
「」など無駄な強調は避ける
読みにくい。♪や顔文字も同様である。
情報を小出しにしない
読み手は馬鹿にされた気分になる。
無駄な倒置も不要だ。
使用したブラウザ、バージョン、OSくらい書こう。
読むのがめんどくせーから聞いてんだよ その程度の事もわからねーのか
夏、真っ盛りだな
291 :
230 :02/08/16 09:46 ID:???
以前テーブルの列にtext-alignを指定する方法について質問した者です。
>>232-234 の方法を試してみたのですが、WinNetscape7.0PR1は、
いずれの方法も無視してくれました。WinIE6.0は
>>234 だけが効きませんでした。
ブラウザが実装してないんですかね?
div{ border:1px solid #000000; margin: 0px 0px 1px 0px} <div>Name_Not_Found</div> <div>Name_Not_Found</div> <div>Name_Not_Found</div> そんなに変なことやってないと思うんですけど、IE5.0ではボーダー同士がくっついてしまいます。 marginを 0 0 3 0 にしたら、1px分だけ開きました。これはなんでしょうか? IE6.0、Mozilla1.0、Opera6.03では期待通りに動きます。後方互換モードです。
>292 IEはボーダーの内側からマージンを取ってるんじゃないの? マージン幅変えたり実験してんなら、自分でわかりそうなもんなんだけど・・・
>293 IE5と6ではマージンの計り方が違うということですか? んー、もうちょっと弄ってみます。。
295 :
Name_Not_Found :02/08/16 13:21 ID:ygVfxhJl
body {} html {} bodyとhtmlにスタイルするのはどちらも同じですか?
>>274 自分がわからなくて例え相手もわからなくても、
聞いてる側は下手に出なきゃいかんのです。
それが礼儀ってもんであり、厨房脱出の第一歩かもしれん。
あ、言うまでもなく僕はどうすればできるかは分かりません。
チョト覗きに来ただけなもんで。。
頼むから終わってる話題にレスして話題をループさせるようなマネは控えてくれんかね、夏君
300 :
Name_Not_Found :02/08/16 19:29 ID:a9NK8/fD
"Valid CSS!"貼ってる人いる?
302 :
Name_Not_Found :02/08/16 21:54 ID:wM4ZxKRU
いっぱいいるのか…
しかし、あんなバナー貼りたくない。カコワルイ
テキストに line-height: 150%;適用してるんですけど imgを貼ると文字の間隔が狭くなります 解決法はあるのでしょうか?
307 :
305 :02/08/17 03:28 ID:???
本当です。 ソースは↓です。 .text{ line-height : 150%; } <span class="text"> ラインヘイト無効になります。<img src="mojikankakusemakunaru.gif" width="15" height="15"> </span>
308 :
305 :02/08/17 03:30 ID:???
すいません間違えました。 <span class="text"> ラインヘイト無効になります。<br> ラインヘイト無効になします。<img src="mojikankakusemakunaru.gif" width="15" height="15"> </span>
309 :
Name_Not_Found :02/08/17 03:31 ID:eZ4cXauS
ヘイトじゃなくてハイトな。
310 :
Name_Not_Found :02/08/17 04:02 ID:v5NbE3a3
画像を、文字の右にもっていきたいのですが、 画像をdivかspanのとちらで囲めばいいですか? <h1>タイトル</h1> <img src="xxx.jpg" width="10" height="10" alt="女の子の画像"> タイトルの右に画像を持っていきたい場合、H1にfloat:leftとしますが、 imgはdivか、spanどちらで囲めばいいですか?
h1{ display:inline; }
312 :
Name_Not_Found :02/08/17 04:41 ID:v5NbE3a3
#a {width:10px padding:100px;} とするのはおかしいですか?
313 :
Name_Not_Found :02/08/17 04:46 ID:v5NbE3a3
>>310 StrictなHTMLではbodyの直下にインライン要素を置けないので、
ブロックレベル要素のほうがいいんだが、Transitional系HTMLなら
そういう制限はないから別にspanでもいいんだけど、レイアウトの
自由度からするとブロックレベルのほうがいいような。
あとその場合、altの使用が不適切だなあ。
そういう装飾用のワンポイント画像(サイズから判断した)なら、alt=""
のほうがいい。
俺なら、その画像はimgで挿入するのではなく、H1の背景画像に
しちゃうけど。
316 :
ひよっこ ◆HeNslLTA :02/08/17 16:09 ID:GRDQ60Qk
<HR>タグのborderを設定してるのですが、 paddingもしくはmarginのbottomって設定できますか? 下に空白を開けたくないんですが、なかなかできないのです。
>>316 フツウに出来ると思うが。
hr{
border : #SIZE #COLOR #STYLE ; /* 順不同可 */
padding : ???? ;
margin-bottom : ???? ;
}
でダメなの?
318 :
Name_Not_Found :02/08/17 22:51 ID:HBsGMFLB
すいません、便乗で質問があります。
>>310 さんのようなHTMLでCSSを使って画像をタイトルの左にもっていきたいのですが
どのように指定すればよろしいのでしょうか?
>319 HRの線自体が上下に空白の入った画像みたいなものだからそれ以上は無理。
321 :
305 :02/08/18 00:04 ID:???
やっぱり回避できないんですかね?
>>320 わかりました。どうもありがとございました。
できないとは知らず試行錯誤してました(恥ずかし..
>>322 <hr>を消して(display:none;とかで)、h3のborder-topに同じ色の
線引くのじゃダメなん??
>>323 H3
{ border-top-width:3px;
border-top-color:red;
margin-bottom:0px;
margin-top:0px;
padding-left:12px;
padding-top:2px;
padding-bottom:1px;
color:#2f4f4f;
background:#d3d3d3}
これに変えてみたのですが(色は暫定的にわかりやすい色で)
どうもうまくでません。
HR.2というのにdisplay:none;を入れたんですが。
何度も聞いて済みませんが教えていただけないでしょうか?
325 :
Name_Not_Found :02/08/18 01:02 ID:EGg0ZDBK
>>324 border-top に style 設定しる
318です。 あれから色々と試行錯誤してみましたが、やはりどうもうまくいきません。 どなたか、よろしければヒントを下さいませ。
>>318 CSS使わんでも普通に画像の回り込みをさせるだけではダメなのか?
>>325 できました!すごいです。
ちょっとしたアクセントが欲しかったんですけれど
助かりました。ありがとうございます。
329 :
318 :02/08/18 01:44 ID:d1AwvBx1
>>327 レスありがとうございます。
なるべくならStrictでやっていきたいと思っているのです。
現状のCSSではできないということでしょうか?
>>329 ん…imgの回り込み指定はstrictじゃなかったのか?alignは何が何でもダメだったっけ、わかんね。
いや、別にCSS使えばすぐに出来るよ、float使えばいい。
331 :
318 :02/08/18 02:38 ID:d1AwvBx1
レス感謝です。 alignはStrictではなかったと思います。 CSSでもfloatを使えばできるとのことですが <h1>タイトル</h1> <p>段落<p> <img src
332 :
318 :02/08/18 02:38 ID:d1AwvBx1
それを ┌────┐タイトル │ │段落 │イメージ│ │ │ └────┘ のようにしたいのです。 具体的には美術館のように絵とそれのタイトルと説明をいれたいのです。 確か過去のスレにも似たような質問をされている方がいましたが、そのときは <img src
333 :
Name_Not_Found :02/08/18 02:39 ID:d1AwvBx1
レス感謝です。 alignはStrictではなかったと思います。 CSSでもfloatを使えばできるとのことですが <h1>タイトル</h1> <p>段落<p> <img src="xxx.jpg" alt="xxx" height="xxx" width="xxx"> 例えばこのようなHTMLでイメージをテキストより左におく場合、 どこにどのようにfloatを指定すれば良いのでしょうか? イメージにfloat:leftを指定するだけでは タイトル 段落 ┌────┐ │ │ │イメージ│ │ │ └────┘ このようになってしまいます。 ↓続きます。
334 :
Name_Not_Found :02/08/18 02:40 ID:d1AwvBx1
それを ┌────┐タイトル │ │段落 │イメージ│ │ │ └────┘ のようにしたいのです。 具体的には美術館のように絵とそれのタイトルと説明をいれたいのです。 確か過去のスレにも似たような質問をされている方がいましたが、そのときは <img src="xxx.jpg" alt="xxx" height="xxx" width="xxx"> <h1>タイトル</h1> <p>段落<p> のようなHTMLだったので自分のとは状況が違っていました。 なにやら初歩的な質問をしているようで申し訳ありませんが、よろしければもう少々 お知恵をお貸し下さい。
335 :
318 :02/08/18 02:41 ID:???
すいません、一回目の書き込み途中できれてしまいました。 板汚しすいません。
336 :
Name_Not_Found :02/08/18 02:54 ID:EGg0ZDBK
アフォの意見 h1 と p に 画像の幅のぶんだけ margin-left 設定して 画像は絶対配置でその余白のとこに置く・・・
<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx"> <h1>タイトル</h1> <p>段落<p> 何でこの形にしないのか
>>337 Strictな考えからいうと、その場合画像はそのタイトルを説明する物だから、
段落と同格でHTML上タイトルより先に画像を配置するのは不自然では?
それに例えば
<h1>美術作品</h1>
<h2>XXXX年代の作品</h2>
<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
<h3>ゴッホの自画像</h3>
<p>これは****で****な絵。</p>
<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
<h3>ムンクの叫び</h3>
<p>これは****で****な絵。</p>
<h2>YYYY年代の作品</h2>
<img src="xxx.jpg" alt="xxx" height="xxx" width="xxx">
<h3>モナリザの手</h3>
<p>これは****で****な絵。</p>
みたいに画像を先にもっていくと1番めの画像がh2の、2番目のムンクの画像がゴッホの
下の階層、という解釈にならない?
ちなみに俺は美術とか詳しくないからそこら変の突っ込みはご勘弁を。
ここってつまらん突っ込みばっかで結局解決策はでないんだよな(藁) やっぱCSSなんてクソだな。 Goliveでレイアウトグリッドでも敷いて遊んでろ(藁)
342 :
338 :02/08/18 04:36 ID:???
>>331-334 その画像が、文書の中で明確な意味を持たない(装飾)ならば、
<div id="header">
<h1>タイトル</h1>
<p>段落</p>
</div>
といったようなHTMLに、
#header {
height : 100px; /* 画像の高さ */
padding-left : 100px; /* 画像の幅 */
background : transparent url(xxx.png) no-repeat scroll left;
}
#header h1,#header p {
margin-left : 1em;
}
という風なstyle指定をしてやるのが妥当かと。
画像の大きさに対して、読み手のウィンドウ幅が小さい場合、
レイアウトが乱れてしまうという難点はあるけど。
343 :
338 :02/08/18 04:43 ID:???
>>339 スレ違いだけど、画像の説明の場合は、
<dl>
<dt><img></dt>
<dd>説明</dd>
</dl>
とするのが一般的みたいだね。
一般的といっても、あくまでstrict界隈での話だけど。
344 :
318 :02/08/18 07:39 ID:d1AwvBx1
>>336 アドバイスどうも!
私もそれを考えたのですが、いじる所がおおくて他との兼ね合いで表示が崩れたり
もう少し楽なやり方はないかと探していた次第です。
でもありがとうございます。
>>338 上に書きました通り画像は絵ですので
「その画像が、文書の中で明確な意味を持たない(装飾)」
かどうかは正直怪しいのですが、
>>338 さんのいうようにしたらできました!
本当にありがとうございます。
これでやっとテーブルレイアウトを卒業できそうです。
レスして下さったみなさん、本当にありがとうございました。
自分の未熟さを知った次第です。
もっと調べて今後は他の方の質問に答えられるようなふうになりたいと思います。
ありがとうございました。
>>344 正直、CSSで凝った事やる前にHTMLをもうちょっと勉強した方がいい。
あ、XMLか(w
346 :
Name_Not_Found :02/08/18 10:39 ID:EflE0iCL
一つの要素に対して二つ以上の背景画像を指定することってできますか。
347 :
Name_Not_Found :02/08/18 11:23 ID:2WuExo3+
<h2>a</h2> <h3>b</h3> h2 margin-bottom:1em; h3 margin-top:1em; としたのですが、aとbの間が、1em分しか あかないのですが、正しいのでしょうか。
348 :
318 :02/08/18 11:33 ID:???
>>345 ムカッ!もうムカつきました。
こちらが丁寧にレスしているのに随分と失礼な方ですね。
それに、こないだちょっと聞きたいことがあってここで聞こうと思ってスレ立てたら滅
茶苦茶荒らされました。 なんか質問でスレ立てるのはルール違反だの質問スレで
聞けだの言われたけど、初めてここに来た初心者はそんなの知らないことが多いと
思うし 忙しいと検索して探したり過去ログ読んだりなんかできないと思う。急いでる
時なんかは質問スレ行ってもいつ答えてもらえるか分からないし。
そういう人たちに匿名でここまで読んだとか食べ物の話とかして荒らすほうが悪質
じゃないか?本当に困ってる人や初心者で知らずに質問スレ立てる人もいるんだか
ら、少しくらい質問スレが立っても大目に見るべきだと思う。
そうしないとWEB板の住人=知ったかで閉鎖的っていつまでも言われるよ?
ルールで質問スレ立てるの禁止でも上で書いたみたいに仕方が無い場合もあると
思うからWEB板全体のルールを含めて少し質問スレに対する態度を考え直してみ
ませんか?ここで前向きな議論が発展したら他の板にも同じスレを立てて住人の
反省を促していきます。
注・知ったか厨房の荒らし厳禁
>>347 marginは相殺されますので、正しいです。
<p>…</p>
<p>…</p>
とすると、pのmargin-topとmargin-bottomは、たいていデフォルトで1emですが、
2つのpの間は1emしか空かないのと同じことです。
>>348 もうちょっと改造を加えた方が良かったな
351 :
347 :02/08/18 12:00 ID:???
>>349 ありがとうございます。
説明が凄くわかりやすいです。
352 :
347 :02/08/18 12:05 ID:???
ブヒヒヒヒ
354 :
353 :02/08/18 13:31 ID:???
最近、騙りが多いな ID強制しないと荒れてばっかりだ(ブヒヒ
↓何こいつ、キモイよ。
↑何こいつ、キモイよ。
お前らみんな落ち着けや お前らが何を言おうがキモイのはこの俺だ、これだけは譲らんぞ
↑何こいつ、ウザイよ。
そうだ、俺はキモクてウザイ。それは間違いない。
↑何こいつ、臭いよ。
臭くもある
↑何こいつ、もちょいよ。
俺は年中もちょもちょしてるよ 蚊ぐらいは簡単に捕まえる
↑何こいつ、ぷるぷるしてるよ。
うん、よく言われるんだ。 「うわ、お前めっちゃぷるぷるやな!」って。 子供にはウケがいいよ。
↑何こいつ、カチカチだよ。
どーしたどーしたぁ!
369 :
245 :02/08/18 20:18 ID:???
おまいはあれだけ暴れといて。。。
なんかもっさりしてるな。 リンク多すぎるとa:hover重くならないか?
>>348 お前全然ダメ
自己厨ってお前
最悪しね
373 :
245 :02/08/18 20:41 ID:???
だれか言ってたけど暴れていたのは 騙り野郎ですよ。 教えてください。
>>369 タネは画像に枠を描いていて、それを透過色にしている。
□□□□□□□□□□□□□□□□□□
□■■■■■■■■■■■■■■■■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■□□□□□□□□□□□□□□■□
□■■■■■■■■■■■■■■■■□
□□□□□□□□□□□□□□□□□□
hoverでa要素で囲っているとこの背景色変えて、
変わった背景色が透過されてるとこから見えて
枠が出てるように見えるだけ。
終わり
それは初耳だな。ホントにできのか。 >369 a img{ border: 1px solid 背景色} a:hover img{ border-color: 出したい枠の色}
377 :
Name_Not_Found :02/08/18 21:39 ID:2Fea92jY
×できのか ○できんのか ついでにage
sage
hoge 最近いるのは同一人物なのかねぇ…。
>>376 たしかに、hoverに背景色指定してやると、画像の背景色も変わります。
Netscapeの6と7だと、画像の下半分しか変わらないけど(バグ?)。
ただ、
>>375 のやり方より、
>>376 の方が手間が少ないし、スマートな気が
するなあ。
381 :
245 :02/08/18 23:52 ID:???
>>374 本当だよ。
みんなわかってそうなもんだったから
わざわざ否定する必要ないかな~と思ったんだけど。
>>375 なるほどーそういうことか
ソース見てもわからないはずだねありがとう
>>376 この方法で行くよありがとう!
なんかなぁ、、、
383 :
245 :02/08/19 00:38 ID:???
>>382 なんだよ、この言語障害やろう
「なんかなぁ、、、」じゃ、何にもわかんねぇんだよ
言いたいことあるなら、言えよ
まぁまぁ落ち着いてくださいよ(^_^;
( ゚,_ゝ゚)バカジャネーノ
386 :
Name_Not_Found :02/08/19 04:47 ID:frCiBj92
チェックボックスのバックカラー変えることできますか? 探し方ヘタなのか、検索しても見つからない
( ゚,_ゝ゚)バカジャネーノ
style="background-color: blue;"
単独のファイルでIFRAMEタグのように振舞うテキストエリアを作りたいのですが、可能でしょうか。 もちろんフォームじゃなくてかまいません。 スクロールバーが付いていて、幅/高さの指定が出来ればいいんですけど。
>>390 <div style="overflow: scroll; width: 20em; height: 5em;">
ここに長いテキストを書く。
</div>
392 :
390 :02/08/19 11:11 ID:???
出来ました。 ありがとうございます。
393 :
Name_Not_Found :02/08/19 11:50 ID:kFY9QxIf
みなさまはネットスケープ6に対応させていますか? つい最近CSSの本を借りて勉強し始めたのですが、 いきなり、最初からやる気がしなくなりました。 本のサンプルの通りにpaddingを付けたらネットスケープ6では widthがその分広がってしまうのです。 CSSを使用している制作者の方々は、こんなブラウザ毎の違いに 時間をかけて対処しているのですか? あと、疑問なんですが、何故違う会社が作っているのにwidthとかcolor だとか同じ名前なんでしょうか?どうせブラウザ毎に違うんだから 違う名前にしてくれたほうが有り難いと思うのですが。 違う機能が同じ名前で、記述方法だけは同じだなんて、迷惑千万です。
>>393 >何故違う会社が作っているのにwidthとかcolor
>だとか同じ名前なんでしょうか?
CSSは違う会社が作っているのではないからです。
>>3-4 のリンク先で勉強してからまた来てね。
>>393 Mozilla=Netscape 6は仕様通り。WinIEが間違ってるんだけどね。
それがイヤなら、
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5で有效。*/
-moz-box-sizing:border-box; /* Mozilla用の記述。N6で有效。*/
}
とシートに書いておく。
397 :
Name_Not_Found :02/08/19 12:59 ID:LYHNKHK+
>>390 逆に、iframeを使った外部ファイルの表示を、
スクロールバーなどが出ないように高さを自動調整して
表示させるようなことはできないものでしょうか。
iframeを使うことにこだわりはないです。外部を埋め込めれば。
400 :
245 :02/08/19 16:53 ID:???
402 :
346 :02/08/19 18:52 ID:t/8P/JDk
可か不可かだけでも教えてもらえませんか。
>>402 可か不可といえば、CSSじゃ絶対できないので、スレ違いだから他のスレ
行ってくれというか。
405 :
Name_Not_Found :02/08/19 20:06 ID:/2IYV4O8
.jsでOS,ブラウザ別に振り分けた外部.cssでfont-sizeを反映させた場合 なんですが、テキストの色の指定はみなさんどのようにされてますか? font-size:10px; line-height:150%;のtxt10、で青でボールドの場合は <div class="txt10"><font color="#0000ff"><b>魂</b></font></div> なんて結局fontタグ使っちゃってんじゃん、、、おすすめはいかがで しょうか?
若干意味不明なんだが div{ font-size: 80%; line-height:150%; color: #00f; } こういうことじゃないの?
407 :
406 :02/08/19 20:18 ID:???
divtxt10{ font-size: 80%; line-height:150%; color: #00f font-weight: bold;; } こうかな ゴメソ
408 :
Name_Not_Found :02/08/19 20:46 ID:H62pFvHk
外部ファイルでテーブルの背景色を指定したいんですけど、 table { bgcolor: #CCCCFF} これじゃ変わりません。 正しい記述を教えてください。
411 :
346 :02/08/19 20:52 ID:t/8P/JDk
>>403 例えばh1要素に大して、alpha.pngとbravo.pngの両者を背景画像として
指定したいんですが。
>>404 そうですか。ちょっと論理要素以外を記述してまでやりたいわけでも
ないので、無理だったら諦めます。
412 :
408 :02/08/19 20:53 ID:???
>>409 ネタじゃないです。
でもお手数かけてすいません。
ありがとうございました。
>>411 初めからalpha.pngとbravo.pngを合成したalphabravo.pngを背景画像にしてはいけないのか?
でなきゃ、同一要素でなくてh1要素とそれを囲むdiv要素にそれぞれ
別の背景画像を指定して重ねる。透過画像をうまく使って。
414 :
346 :02/08/19 21:05 ID:t/8P/JDk
>>413 alpha.pngはタイル貼り、bravo.pngは位置を指定してno-repeatで貼る、
というようなことをしようと思っていたので・・・。
取り合えず後者のh1要素とdiv要素のやり方でやってみます。
有難うございました。
input { border: 1px solid #000; background-color: #fff; } こんな感じなんですけど属性値がsubmitの要素だと inputエリアの内枠が黒くなりますよね 擬似要素を使うのかと思ったんですが どの擬似要素を使えばいいのか教えてくださいです
416 :
397 :02/08/19 22:59 ID:???
そう、実はSSIと同じことをやりたいわけなんですが、 サーバーサイドにあんまり負担をかけたくなくて…。 SSI include の負担って大したことないんでしょうか? CSSでできない場合スレ違いスマソ。
>>415 その文章では、何をどうしたいのか判らないので、まずはCSSの前に日本語を
勉強しなおしてほしい。
>>416 外部ファイルの更新時間をチェックして、
更新されている時だけ、自動的に
HTMLを全部書き換えれえうようにすればいい。
サーバーへの負担が少なくなるように工夫できる。
CSSの話ではない。
419 :
Name_Not_Found :02/08/21 08:33 ID:5Rf12AkO
.zzzz li+.zzzz li:before {content:"、";} というのは、IE6では表示しないのですが、 .zzzz li+li:before {content:"、";} こうすると、表示します。 なぜ上のではいけないのですか?
IEは + も :before も content も対応してないと思うぞ。
>>419 .zzzz li+.zzzz li:before
.zzzz li+li:before
意味が違うけどわかってるのか?
422 :
Name_Not_Found :02/08/21 16:51 ID:1Fqec+ka
スタイルシートを外部CSSファイルで作成し、それにリンクさせる形で 使ってます。 そのファイルでクラス設定が多くなりすぎたので 新しく外部CSSファイルを作成することにしました。 そこで問題が出てきたのです。 最初の外部CSSファイルで、<a>タグの擬似クラスを設定しているのですが 新しく作った外部CSSファイルで全く同じ設定しているのにも関わらず キチンと動作してくれないのです。 要は、リンクの上にカーソルを乗せると色が変化する設定が 新しく作成したファイルで全く同じ設定なのに色が変わってくれなくて 困ってるってことなんですが、どうしてなんでしょうか? 最初に作ったファイルを使えば色は正しく変化します。
擬似要素の後は空白開けとけ a:link {}
むしろ全角空白だったり。
空白は俺はTAB派だな。
<html lang="ja"> (中略) <body> <p>日本語です</p> <p lang="en">English.</p> のとき、enに指定したいんだけど、どうしたらいい?IE等が対応してなくてもかまいません。
screen,tvにstylesheetをlink要素を使わずに 指定したいんだけど、 @mediaで指定したらOKですか? link要素を使うときは media属性ですよね?
431 :
422 :02/08/21 18:06 ID:1Fqec+ka
実はDW4使ってて、スレ違いかどうか迷って、こっちに書いたんです。すんません。 まだCSSを理解できてないので、該当する部分載せますので、今後のためにどこがいけないか教えてください。 正常に動作したソース a:link { font-family: "MS UI Gothic", "MS Pゴシック", "Osaka"; font-size: small; color: #FFFFFF; text-decoration: underline}<br> a:hover { font-family: "MS UI Gothic", "MS Pゴシック", "Osaka"; font-size: small; color: #FFCC00; text-decoration: underline}<br> a:active { font-family: "MS UI Gothic", "MS Pゴシック", "Osaka"; font-size: small; color: #FFFFFF; text-decoration: underline}<br> a:visited { font-family: "MS UI Gothic", "MS Pゴシック", "Osaka"; 正しく動かなかったソース a:link { font-family: "MS UI Gothic", "MS Pゴシック", "Osaka"; font-size: small; color: #FFFFFF; text-decoration: underline} a:hover { font-family: "MS UI Gothic", "MS Pゴシック", "Osaka"; font-size: small; color: #FFCC00; text-decoration: underline} a:active { font-family: "MS UI Gothic", "MS Pゴシック", "Osaka"; font-size: small; color: #FFFFFF; text-decoration: underline} a:visited { font-family: "MS UI Gothic", "MS Pゴシック", "Osaka"; font-size: small; color: #FFFFFF; text-decoration: underline}
なにが動作してないのか教えれ
433 :
Name_Not_Found :02/08/21 18:12 ID:SJlvWZuQ
en-USとかも拾えるようにするなら p[lang|="en"]
>>431 とりあえずこの順番に
a:link { }
a:visited { }
a:active { }
a:hover { }
ほかにこのあとにa要素にたいしてまたなにか指定してるとかないの?
435 :
422 :02/08/21 18:43 ID:???
>>432 リンク部分にカーソルが来ると色が変わる設定で
色が変化しなくて困っていたんです。
>>434 この疑似クラスって記述の順番があったんですね(^^;)
a要素にはこの後何も指定していませんでした。
おかげさまで、記述順に手書きで修正すれば
キチンと動作するようになりました。
ちょっとDWに頼り過ぎていたようです。
ありがとうございました <(_ _)>
436 :
Name_Not_Found :02/08/21 18:48 ID:Gq+56dLB
このスレでいいのかわかんないですけど、質問させてください。 複数のページで同じ外部スタイルシートを使用していると、 Apacheに*.cssに対するGET命令がこないんですが、これは <LINK>タグの仕様なんでしょうか? ついでに外部*.jsも同様の現象になります。 他のgifやjpegの場合は、GET命令を行い、HTTP304で返されているの ですが…。IE5.5、6.0 NN6.0で確認しました。
437 :
Name_Not_Found :02/08/21 18:57 ID:SJlvWZuQ
ブラウザのほうでキャッシュされてるだけでしょ
>>436 HTMLの仕様はもともと各要素に対して特定の挙動を要求はしません。
<LINK> タグの仕様ではなく、ブラウザの仕様(もしくは設定)です。
画像の場合でも同様の挙動を見せる場合もあるでしょう。
すれ違い
>>429 >>433 で、すべてのタグで有効にするときは
*[lang|="en"] {}
[lang|="en"] {}
どっち?
スマソ・・・。
両方
443 :
Name_Not_Found :02/08/21 20:10 ID:TM2xJ1PZ
1枚のスタイルシートで a:link { } a:visited { } a:active { } a:hover { } を2種類指定するにはどうすればよいでしょうか? 宜しくお願い致します。
>>443 classかid振ってそれに疑似クラスを設定すれ。
a:link { } div a:link { }
(;´Д⊂)
447 :
443 :02/08/21 20:31 ID:???
DWってDreamWaverのことだよな?
こんなソース吐くのか‥
>>431 スゴイな‥。
趣味で作るなら(やっぱり俺のレベルじゃ)手書きが一番かな…。
てゆうか、 >text-decoration: underline}<br> この<br>はなんなんだよ!
452 :
Name_Not_Found :02/08/21 23:44 ID:jK0xsMkK
外部ファイルで
.class { font-family: test; }
と指定して
HTML内で
<a href="
http://hogehoge.net/ " class=".class">hogehoge</a>
と指定してもいいんでしょうか。
一応
<a></a>内のフォントは変わるんですが・・・規約違反ですか?
453 :
Name_Not_Found :02/08/21 23:44 ID:jK0xsMkK
すいませんclass="class"でした。
>>448 セレクタを1行にずらずら書くのが不評でMXでは
a {
text-decoration:none;
}
みたいに記述してくれるようになりましたyo
457 :
Name_Not_Found :02/08/22 00:07 ID:g0lsQ1r5
>>455 今度HP評価スレッドにHP晒してみようとおもいまして。
<a href="hogehoge.html" class="class">
が叩かれそうな気がしてカキコしちゃいました ;)
458 :
Name_Not_Found :02/08/22 00:08 ID:g0lsQ1r5
>>456 <a>にはCSSは使っちゃいけないような気がしたので、
いえなんとなくですが
>>457 ピンと来たら容赦無く叩くことにしますた。
460 :
456 :02/08/22 00:15 ID:???
>>458 べつにそんなことはないけど?
aの表示をデフォルトの物から変えたらユーザーが困るということなら、確かに「aにスタイルを適用するべきではない」とは言えるけど。
リンクであるとわかるようなスタイルにして、ユーザーを困らせないように配慮してあるのなら、問題視する必要はないと思う。
aには擬似クラスで指定をしとくのが安心かも。 いずれhoverとか指定してみたくてうずうずしてくるでしょうし。
チモニ。
466 :
Name_Not_Found :02/08/22 14:31 ID:MeGPtWV6
>Operaブラウザのレンダリングエンジンを一から作り直した ――ってことは、枯れるまではまたぞろCSSバグに悩まされるのかあ。
まぁ、プレビュー版が出たらアラ探ししてみましょう。 これまで新版への移行が異常に速かったOperaユーザーも、今回は様子を見るのか?
amaya最強!
471 :
Name_Not_Found :02/08/22 19:03 ID:fPeUC+n5
例えば H3 { border-style: solid; border-width: 1px; border-color: red; } とすると、<H3></H3>の文字が赤いで囲まれますが、 この枠の長さを非固定に出来ますか? 5文字を囲うにも、10文字を囲むにも 一行の文字幅で囲うようにしたいのです。
>>471 質問の意味がよくわかりませんが、
white-space:nowrap;で改行不可・必ず一行にするってのでどうか。
473 :
:02/08/22 19:13 ID:???
>471 ・<h3><span>ほげ</span></h3> にして h3 span に border 指定 ・h3 を display: inline にする ・DHTMLとかで <h3></h3>の innerText の長さを調べて h3 の width を動的に変化させる 自分でやるなら 2番目 >472 |あああああ| |ああああああああああ| こんな感じで文字幅に合わせてborderを出したいんだと思った(NN4みたいに)
474 :
471 :02/08/22 19:21 ID:???
>>473 > こんな感じで文字幅に合わせてborderを出したいんだと思った(NN4みたいに)
その通りです。
> ・<h3><span>ほげ</span></h3> にして h3 span に border 指定
> ・h3 を display: inline にする
> ・DHTMLとかで <h3></h3>の innerText の長さを調べて h3 の width を動的に変化させる
ありがとうございます。参考にさせてもらいます。
475 :
Name_Not_Found :02/08/22 19:55 ID:1nFtHPew
カテゴリごとに別々のテーマ色を使ってることもあって、 style.css のファイルサイズが17.5KBもあります。 おかげで、Pen III 500MHz ですが a:hover などの反応が微妙に遅いです。 (軽いcssファイルで試したら速かったので、原因は重さで間違いないでしょう) 遅いマシンからのアクセスだともっと遅くなるんですよね…。 だからどうしようってわけでもないんですが。
>>474 IEとNNは、width: 0;にしたら文字幅と同じになったけど、
Operaは律儀に幅0になってしまった。
一応1つの方法ということで。
すんません、条件を変えていろいろ試したところ、 ファイルサイズが原因と言い切ることもできなさそうです。 でも、a:hoverの反応が遅いのは事実なのですが…。 スレ汚しすみません。
何か実験報告でもする気ですか? 安心しろ17.5KBも使ってるアフォはおまいしかいない
480 :
475 :02/08/22 20:53 ID:???
482 :
475 :02/08/22 21:05 ID:???
ブヒャヒャヒャヒャ また釣れましたあ(ゲラプ
483 :
475 :02/08/22 21:26 ID:???
ブヒーがmyboomだってさ(藁
?
いつも、font:normal normal normal 100%/150% monospace; としているのですが、font-familyの指定は要らないので、 font:normal normal normal 100%/150% ととしてもいいのでしょうか? そして、 font:normal 100%/150% としてもいいのでしょうか?
487 :
475 :02/08/22 22:57 ID:1nFtHPew
ジサクジエンデシタと言ってるのはにせものでつ。 ageてスマソ。
このスレも初心者スレと同じく質問者はトリップが必要になってくるか??
>490 んにゃ、ツールで見つけたトリップ。 自分のページに本人証明代わりにトリップ載せてるんでキー教えるのは勘弁
492 :
Name_Not_Found :02/08/23 09:02 ID:hO8v5jPw
order-style: dashed; が Mozillaだと点線になるのですがInternetExploreでは繋がって線に なります。そういう物なのでしょうか?
493 :
492 :02/08/23 09:03 ID:???
s/order/border/
IE4, 5は、点線は使えないね。
496 :
492 :02/08/23 13:00 ID:???
バージョンは5.01でした。 ありがとうございました。
なぜIE6にしないの?
>>496 IEは5.5からCSS対応が飛躍的に向上してるよ。
>>497 496ではないけど、5.5からそんなに向上したの?
Win9x系じゃあ6.0になって飛躍的に不安定になったよ
>>500 うちはWin98SEだが、そんなことはないぞ。
IE6はインストールしたては不安定だが、使ってるうちにフリーズしなくなった。
>>501 一般的にそうだからなあ。
今更な話題だが。
504 :
498 :02/08/23 15:15 ID:???
>>499 ,503
さんくす。
でもそれで「飛躍的に向上」と言って良いものか・・・
たしかにマシになったようだが、相変わらずposition:fixedがダメとかあるし。
Mozillaレベルまで向上すれば「飛躍的」と言うのはわかるけど。
不安定になるという話が多いんで当分使う気はないんだが。
開発側としては、不安定かどうか以前の問題もあるしな。>最新版 PCが複数台あればいいんだが…、上司に掛け合ってみるかなぁ…。
506 :
Name_Not_Found :02/08/23 15:41 ID:ium9yqNj
html形式のメルマガをまぐまぐから発行しようと思ってます。 その際にウチのサーバに置いてあるCSSを外部読み込みさせる つもりでまぐまぐに問い合わせたところ ----- HTML対応でもメールソフトによっては 有効でない場合やメールソフトの設定で禁止しているケースが 考えられます ----- と返ってきました。 WindowsならIEを使って表示するんですよね。ということは、 『HTMLは表示できるがCSSには対応してないメーラー』というよりは 『IEの設定でCSSを使わないようにしている場合、ダメですよ』 という解釈でいいんでしょうか? /* スレ違いでしたらスマソ */
507 :
Name_Not_Found :02/08/23 15:48 ID:tNxSJUqu
なんでWinIE(Outlook?)に限定した話になってるの
>>506 OutlookであってもHTMLメールは読まない設定にしてることもあるってことだろ。
私がHTML形式なんて貰ったら迷惑に感じるだけだけどなあ。
>>504 5.5からインライン要素の装飾が可能になったってのは大きいよ。
見たとき、受ける印象が相当変る。
まあ5.5以降、やっと本格的にCSSが使用できる環境になったって感じ。
はっきり言って、折角作ったのをver5以前では見て欲しくない。
<div id="block"> a aaaa aaaaaaaaaaaaa </div> これの左をそろえたまま、 aaaaaaaaaaaaaにそろえて、右マージン10%をあけるには、 どうすればいいですか? a aaaa を入れないといけないですか?
>>510 質問の意味がよくわかりません。
(空白)|もじれつ
(空白)|もじれつ
(空白)|もじれつもじれつ ←ここが10%margin→
ということか?
512 :
510 :02/08/23 16:10 ID:???
>>511 すみません。
もじれつ
もじれつ
もじれつもじれつ
これを、まとめて右に持っていきたいのですが、
そのとき、
もじれつ
もじれつ
もじれつもじれつ
の上の2つの「も」は、
もじれつもじれつ
の最初のもと同じ位置にしたいのですが、
どうすればいいでしょうか。
そのまま3つを、text-align:right;とすると、
最後の「つ」に合わさるので、変えようと思うのですが、
どうすればいいのでしょうか。
513 :
506 :02/08/23 16:17 ID:ium9yqNj
>>506 です。レスありがとう。
>>507 OSがWindowsなら大抵のメーラーはIEを使って表示するんですよね、
ということが言いたかったのでした。言葉足らずでしたね。
要するに、メーラー側でCSSを使うか設定するのでなく、
(標準で使う)ブラウザの設定だよね、ということです。
またこちらの勘違いであれば、
CSSを使えないメーラーなどを教えて欲しいっす。
>>508 こちらで無理やり読者登録するわけではないし、
登録フォームにHTML版だということを明記しておくから
読まない設定の方やHTML形式が嫌いな人は
最初から登録されないかと。
514 :
Name_Not_Found :02/08/23 16:19 ID:hYRNdrRu
>512 こういうことか? div#block{ padding-left: 数値} 視覚的にこの解釈でいいなら、下のようなやり方も。 div#block{ text-indent: 数値} >HTMLメール だが外部ファイルを読み込むってのは… よく知らんが、そういうのってノートン先生が騒いだりしないのか?
<a href="a.html">あ</a><a href="i.html">い</a> と、 <a href="a.html">あ</a> <a href="i.html">い</a> 一行と二行に分けるのでは、あといのスペースが 違うのですが、CSSのwhite-spaceでは直りませんか?
>>513 IE なんて使って表示する MUA なんて OE くらいでしょ。
(Becky は使うようにも設定できるけど多くが無効化してると思う。
IE を使わないで HTML メールを解釈する MUA だと Netscape(4/6)
とかあるけど、 4 なら…、だし。
素直に plain text にするべきだと思うけどね。
画像を挿入する必要があるとかなら別だけど、
読者が欲するのは情報であって雑誌ばりのデザインじゃない。
挿入する… 欲する…
(((( ;゚Д゚)))ガクガクブルブル
<丶`∀´>σ)∀・)カッコイイゼ、コノヤロウ
>>512 レイアウト次第では
div#block{
position: absolute;
right: 0;
}
としてもいいかもね。
>>515 変わらんはずだよ。少なくとも515がしたい様には。
( ゚д゚)517ガホスィ…
>514 自己レス。text-indentは違うわ。無視してくれ。
524 :
Name_Not_Found :02/08/24 05:38 ID:bzAE4Zxv
本文に混じってボタンを配置すると、その行だけ上下の幅が大きくなってしまいます。 <input type=button ~>のボタンの高さを調節したいのですが style="padding: 0; border: 0; margin: 0;" と指定しても ボタンのない行に比べて ほんの少し高さがあります。 どうすればボタンと本文の高さを揃えることができるのでしょうか? 対象ブラウザはIE5.5,IE6です。
>>524 周りの文字の大きさをボタンより大きくするとか。
ボタンのフォントサイズを小さくするとか。
駄目かな。
>>524 line-heightとかfont-sizeとかheightとかvertical-align試してみれば?
height:0.8emとかは使えないのか?
528 :
Name_Not_Found :02/08/24 11:12 ID:JemREE6k
CSS 3をすでに使用している人っていますか?
CSS3ってどこにあるんですか? どうやったら使えるの?
>>526 font-sizeは本文と同じにしたいので変更していません
vertical-alignはボタンの中にあるテキストの揃え位置のようでした
ボタンの大きさと、中のテキスト(valueで表示される文)の大きさは
イコールにできないのでしょうか。
横サイズを固定したdivをブラウザのサイズに関わらず中央に維持するのはどうすればよいのでしょう
534 :
Name_Not_Found :02/08/24 22:41 ID:Vxid1Qhu
>>534 それは仕様上ゼロになる。
IEで思い通りに再現されてそれでいいやと言うなら話は別だけど。
<div style="text-align:center"> <div style="display:inline">中央寄せ</div> </div>
>>535 Mozillaでもこれでいけるが、最近はこれじゃダメなことになったのか?
>>535 ごめん。勉強不足で言ってることはよくわかんないんだけど、どういうこと?
IEの互換・標準でmargin:autoに対する解釈が違うから
互換の場合は536のようにブロックレベルにもtext-alignを使うしかないけど、
文書型定義を標準モードにしとけばmargin:autoでセンタリングできるよ。
Mozilla(Opera)は関係無く解釈してくれる。
でも、IE6以降だからIE5.5は切り捨てになるよね。ってことで、しょうがないので
text-alignも使用しないといけないか。。。
535の解答待ち...
541 :
Name_Not_Found :02/08/25 00:43 ID:gD5mosDv
>541 んなこたーないと思うんだが…。 このソースは機械が吐いたのか? とりあえず、同じidが複数回出てくるってのは間違ってる。classにしる。 でも今はidの挙動ってclassとほぼ同じように使えるからなぁ…。他に何か…。
>>544 ■■■■■ 注意 ■■■■■
質問者 (特に「初心者」) は、
必ず
>>4 にある解説サイト (かなりわかりやすい) で
勉 強 してください。
>>1 くらい見ろよボケ!
549 :
Name_Not_Found :02/08/25 05:09 ID:uLPDFd1d
プルダウンメニューの淵とかボタンとかの色を変えれるやつってまだ存在してないんですか? 検索しても全然なかったもんですから…
550 :
教えてください :02/08/25 09:39 ID:UtTHLnZq
553 :
教えてください :02/08/25 09:48 ID:UtTHLnZq
>>552 おぉ!ありがとうございました。m(__)m
>>549 対応表でselect要素に無効と書いてないか調べたかい?
555 :
Name_Not_Found :02/08/25 12:10 ID:gD5mosDv
>>542 手書きphpで吐かしてます
ところでIDってたとえば
div#nanasi
h1#nanasi
みたいにcssの中で2重に使えないと理解してたのですが
これって勘違いだったのですか
ありがとうございました.
556 :
TOPEAK ◆2002ISZo :02/08/25 12:13 ID:gD5mosDv
>>543 xreaの人におねがいしてきました.
でも断られたらツライな・・・
560 :
Name_Not_Found :02/08/25 19:02 ID:o2761b9T
>>534-540 ありがとうございました
テーブルからCSSに乗り換えようとしてるんですが
IE5で動作させるにはCSSでもテーブルの入れ子のように
text-align:centerのボックスの中にボックスを作って中央に維持するわけですか。
あと入れ子のテーブル作ると外側のテーブルの読み込みが終わらないかぎり
中のテーブルもレンダリングされなかったのですが
<div></div>で囲んだ場合も同じなのでしょうか?
>560 実際には、100k超えるファイルとかじゃないと実感できないけど divは読んだとこからレンダリング始まるよ。 ただ、Geckoは一括レンダリングだからどっちも同じ。
ダイヤルアップで繋げつつIrvineでダウソしながらテレビみると その差が非常によくわかる>IE Geckoは同じなのか。 でも、バグとかあるしなぁ。
body {margin:1em 10% 10% 1em;} として、左右に10%、上下に1em開けたいのですが、 これはできますか? それとも、 <body> <div id="top"> <p>aaaaa<p> <address> aaaa </address> </div> #top {margin:1em 10% 10% 1em;} のようにしないといけないですか?
>>563 入門サイトを見るべきだが、
> body {margin:1em 10% 10% 1em;}
これは、上と左に1em、右と下に10%のマージンをとる
と言う意味になるぞ。
body {margin:1em 10%;}
俺は念のため全部書く派だな。
568 :
Name_Not_Found :02/08/25 22:09 ID:o2761b9T
サイズを固定したボックスにborder-left:1pxを指定すると IE5ではボックスの内側にボーダーが出て、NN6では外側に出るのですが 同じように表示するには各ブラウザごとに振り分けなければならないのでしょうか?
>>569 ありがとうございます、見落としてました・・・
hrタグのsize属性やcolor属性を スタイルシートであらわすにはどうすればいいのでしょう
574 :
Name_Not_Found :02/08/26 16:11 ID:izv1ODYU
dd {margin:1em 20% 1em 20%;} としても、 ddの中味が半角数字の場合は折り返されないのですか? ddの中味が 1111111111111111111111111111111111111111111 のようになり折り返されないのです。 11111111111111111111111111111111 11111111111 のようにしたのですが、どうすればいいのでしょうか。
11111111111111111111111111111111 <br> 11111111111
576 :
Name_Not_Found :02/08/26 16:21 ID:iGaunnhJ
1.スペースを挟む 2.word-break: break-all 3.<wbr>
word-break IE独自拡張
>>576 5.­をはさむ(ハイフンが表示されるが。)
4はどこだ?
縁起が悪いのでスキップ
583 :
トーマス愛 :02/08/26 23:34 ID:negqR0S9
選択した範囲を右クリックした というのを検出しるには どうしたらいかがでしょうか?
JavaScriptスレへどうぞ
>>574 widthは指定できないの?
あとどんなブラウザでもその問題が出るかい?
三日坊主++の部屋が閉鎖してるのを今頃知った。マジ困った。
>>586 半角英数は折り返さないという話。良く読め
590 :
Name_Not_Found :02/08/27 20:42 ID:ZWrHH5U0
2001年 ○月X日 出来事1 □日 出来事2 △月○日 出来事3 出来事4 2002年 ■月●日 出来事5 □日 出来事6 こんな形の年表を作りたいんだけど、出来事の部分が長くなって折り返される時に 2002年 ■月●日 hogehogehogehogehogehogeho gehogehogehogehogehogehoge こうならずに 2002年 ■月●日 hogehogehogehogehogehogeho gehogehogehogehogehogehoge こうなるようにしたいんです。 今はテーブルを使って実現しているんですが、 CSSで同じような事ができないでしょうか?
>>590 できます。
#年表なんだからtableでいいじゃん。
592 :
590 :02/08/27 20:50 ID:???
うげ、表示が激しく崩れてる 逝ってきます(-_-)
うむ。まったく変わっておらん。
body{ test:expression(alert("test")); } 警告を一回で止める方法をおしえてくだちい
IEの独自拡張だろ。
つうかJS?フラグ使え
600 :
594 :02/08/28 14:04 ID:???
JSじゃないです。 <style> body{ background:expression(alert("test")); } </style>
602 :
Name_Not_Found :02/08/28 14:27 ID:EBg9wXG3
>>600 俺も、初めて見た 試してみたら、ある意味ブラクラだね
603 :
602 :02/08/28 14:27 ID:???
ごめん、Ageてしまつた
ごめん、年てしまつた
<h3 style="font-size:expression(document.body.clientWidth/13);">Dynamic HTML</h3> まぁ驚け。俺は驚いた。
>605 何年も前からMSDNにあるサンプルじゃん。
検索ご苦労サマ
>606 そうか、じゃぁ594に答えてあげれ。
無能コテハンうざい
610 :
606 :02/08/28 15:12 ID:???
じゃあ答えよう。 無理。 expressionの中で一回しかアラート出さないように書いても expressionそのものが再評価される。 setTimeoutで永久に続いているような物。
一回で止まったよ。動作確認はIE6。 <style> body{ background:expression(typeof(a)=="undefined"?alert("test"):0,a=1); } </style>
612 :
594 :02/08/28 16:33 ID:???
解説ごくろうさんですが、 一回で止める方法が知りたいのれす。 わかる方、どうかよろしく
曲芸(?) <style> body{ background:expression(typeof(a)=="undefined"?alert("真っ赤に染まります。"):0,a="red"); } </style>
おもしろいけど、独自拡張か・・どうしたもんかね、IEは・・・
616 :
Name_Not_Found :02/08/28 17:25 ID:cgzewFg3
div.leftmenu { float:left; width:50%; } div.rightmenu { margin-left:50%; } でメニューを左右に分けてます. IE,Netscape6,Opera,Mozillaだと意図したとおりに見えるんですが,NetscapeCommunicator4.78で見ると, ┏━━━┓ ┏━┓ ┃ 左 ┃ ┃右┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗━━━┛ ┃ ┃ ┃ ┃ ┗━┛ になってしまうんですけど(右メニューはウィンドウの右に出ています), 回避する方法ってありますか?
結局
>>610 はただのアホに成り下がったわけですか?
>>616 NN4 向けの CSS は全く別に用意した方が多分ラク。
621 :
Name_Not_Found :02/08/28 22:12 ID:skOc7mnZ
float使うんじゃなくて横にマージンを空けてメニュー部分をpositionで動かすようにすれば ネスケ4.7にも対応のマルチカラムレイアウトは特に難しくないよ。 float使うとネスケ4.7では範囲選択できなくなってうざいし。 この前この板のどこかでテンプレかいてあげたのがネスケ4.7も対応だったんだけどどこだったかな。
622 :
Name_Not_Found :02/08/28 22:16 ID:KGAIRpHW
>>620 横レスですがそれってどうやるんですか?
623 :
・・・ :02/08/28 22:30 ID:JCJxm3fC
あのですね。さっき間違ってFlashスレに書いちゃったんですけど・・・ <html> <body> <div align="center"> ・ ・ ・ </div> </body> </html> をスタイルシートで「ポンッ」とできます?
>622 JAVASCRIPT使うのがイパーン的
>623
「ポンッ」て何?
とりあえず、
>>4 読んで来い。
>>622 一例ですが。
<link rel="stylesheet" type="text/css" href="./default.css" media="print, screen">
<!--NN4ではmedia属性にscreen以外の値を指定すれば読み飛ばされる -->
<script type="text/javascript" src="./nn4css.js"></script>
<!--NN4專用cssファイルを、JavaScriptで読み込ませる -->
<link rel="stylesheet" type="text/css" href="./dummy.css">
<!-- IE3対策の空ファイル -->
///*nn4css.jsの中味*///
if (location.protocol=='file:') Rt='file:///C:/WebFile/';
else if (location.protocol=='http:'){Rt ='
http://www. ~'};
var StyleRt = Rt+'stylesheets/'; // 規準ディレクトリ
var ua = navigator.userAgent;
var NN4=(ua.indexOf("MSIE")==-1 && ua.indexOf("Mozilla/4")==0)?1:0;
var tag = '<LINK REL="stylesheet" TYPE="text/css" HREF="';
if( ua.indexOf("Opera")!=-1 || ua.indexOf("OmniWeb")!=-1){NN4 = false;};
/* Operaの偽称対策。またOmniWebはdocument.layersに対応してるので。*/
if(NN4) {var cssFile = "nn4.css";}
else var cssFile = "dummy.css";
document.write(tag+StyleRt+cssFile+'">')
630 :
616 :02/08/28 22:55 ID:???
616です。
ありがとうございました。色々試してみます。
>>621 それ、私も見た覚えあります。覚えてるだけで再現できませんが(泣
初心者スレVol29(前スレ)だったような気がするのですが、dat落ちなんで・・・
A Boneのログも消してしまったし。
631 :
・・・ :02/08/28 22:56 ID:/gpqIjj4
>>627 「様々なブラウザを考慮した中央寄せには、
やはり div align=centerで中央寄せするのが無難なようです。」
結局、そうなんですか・・・
有難うございました。
>>631 WinIEもVer6からは
margin-left:auto; margin-right:auto; で
センタリングできるんだけどね。
>632 ぉほう、勉強になります。 あとは、body に直指定とか。
>あとは、body に直指定とか。 ハア?
>>634 あてずっぽうだが、GIFアニメをbackground-imageで指定してるんでは。
637 :
634 :02/08/29 00:36 ID:???
>>636 はっ…!そうか、気付きませんでした。
そうかもしれませんね。すごい盲点でした。
ありがとうございます。
>>634 なんでソース見ないの?
CSSファイル見ればすぐわかることやんけ。
640 :
Name_Not_Found :02/08/29 00:51 ID:pZ94kS+Z
>>632 実はXHTML1.1だとセンタリングされない罠。
<hr>に色をつけたいのですが、CSSでcolorでは、IE6の表示で 色がつき、Mozillaではつきません。background-colorでは、IE6では 色がつかなく、Mozillaでは色がつきます。どちらが正しいのでしょうか?
643 :
642 :02/08/29 02:31 ID:???
あと、height:1pxにしても1pxにならないのはなぜでしょうか。 あと、Mozillaでは、background-colorで色をつけられるのですが、 #ff0000と指定しても、赤ではなく、オレンジ色になるのです。 他の色でも、少し濃く暗い色になります。どうしてですか?
645 :
Name_Not_Found :02/08/29 08:35 ID:oIJ9c0Yp
トップページのみテーブルWIDTH="100%" HEIGHT="100%"で 囲んでレイアウトしているサイトをよく見かけますが、 CSSで同じことはできないのでしょうか?
ひとつひとつパーツをpositionで配置しているんですけど テーブルレイアウトに比べると、 ディスプレイサイズやブラウザで見栄えが変わりやすいので。
>>643 >少し濃く暗い色
noshadeを消せ。
>>646 かわってもいいじゃん.それなりにデザインすべし.
どのUAや環境でも同じように見せるという発想を捨てよ.
650 :
:02/08/29 11:16 ID:???
>641 文書を unicode で書いて先頭のxml宣言を消せば問題ありません.
>>641 XHTMLだとalign="center"は不可ではなかった?
どのみちCSSでやるしかない。
<dl> <dt>CDタイトル1</dt> <dd>発売日</dd> <dd> <ol> <li>曲名1</li> <li>曲名2</li> <li>曲名3</li> </ol> </dd> <dd>作詞作曲</dd> <dd>タイアップ</dd> <dd>解説</dd> </dl> 上記HTMLのリストを CDタイトル 発売日 作詞作曲 1.曲名1 タイアップ 2.曲名2 その他もろもろ解説 3.曲名3 こんな風にCDタイトルの行の下に 発売日と曲名のボックスと、作詞作曲とタイアップと解説のボックスが 左右に並ぶように表示したいんですけど可能でしょうか?
653 :
652 :02/08/29 11:38 ID:???
652続きです。 floatで回り込みさせようと思ったんですが、 dlの子要素はdtとddのみということは、例えば <dl> <dt>CDタイトル1</dt> <div class="list"> <dd>発売日</dd> <dd> <ol> <li>曲名1</li> <li>曲名2</li> <li>曲名3</li> </ol> </dd> </div> <div class="kaisetsu"> <dd>作詞作曲</dd> <dd>タイアップ</dd> <dd>解説</dd> </div> </dl> こんな風にはできないんですよね? マークアップそのものを変えた方がいいんでしょうか。
>>653 なぜ直接dd要素にclassを振らないのか? divで括る必要はあるまい。
655 :
:02/08/29 11:57 ID:???
>652 Win IE6とMoz1.1で確認. dd {margin: 0;} .date {float: left; width: 30%;} .song {clear: left; float: left; width: 30%;} .word, .tie, .exp {margin-left: 35%; width: 30%;} で,それぞれの ddに classをふる. 行が長くなったら,とかそういうのは適当に.
>>652 653のマクアプは文法違反だよ。
olにfloat指定してddはmarginでなんとかならん?
>>654 おそらくkaisetu部分をまとめてブロックにしたいんだろう。
ddにクラスを書いても1つ1つのブロックでしかない。
dlを使わないのも1つの手。
「CDタイトル」はdtでなくh2などの見出しにしてはどうか。
そもそもdlはしょせんlistingなので、dd項目ごとにスタイルを
いじるのは本来の使い方ではないと思う(スタイルの使い方次第だが)
658 :
652 :02/08/29 13:15 ID:???
>>655 このやり方でやってみたんですが、作詞作曲、タイアップの部分だけが
変な位置で折り返されてしまいました。
CDタイトル
発売日 作詞作
1.曲名1 曲
2.曲名2 タイア
3.曲名3 ップ
その他もろもろ解説
↑こんな風に。Win IE5.5で確認しました。
>>658 dlにこだわらず、tableを使うべきかと。
見出しがあるしな。これは表といっていいのでは。
661 :
:02/08/29 13:31 ID:???
>>652 そのマークアップだと、凡例を書かないと
何が何についての記述かわかりにくいかも。
table にしたほうがいいかもしれないが、
そうすると現状スタイルシートを適用しにくいのもまた事実。
662 :
655 :02/08/29 13:36 ID:???
>658 そりゃ,width: 30% って書いてるからね… 解説(exp)が折り返されないのが不思議だけど. 個人的には dl でもいいと思う.
663 :
652 :02/08/29 14:02 ID:???
>>657 そういう事です。
listの部分とkaisetsuの部分をそれぞれ1つのブロックと見て
段組レイアウトするようなイメージだったんですが、
それなら確かにdlを使わない方が楽にできますね。
>>659-661 テーブルレイアウトから卒業したくて最近CSSを勉強し始めたので
tableは使わないように、という意識が強すぎたのかも。
表といえる内容ならtable使ってもいいんだ・・・。
>>662 いろいろ見直したりいじくっていたらできました。
ありがとうございました。
664 :
655 :02/08/29 14:59 ID:???
>663 解決したみたいだけど,補足: >listの部分とkaisetsuの部分をそれぞれ1つのブロックと見て なら <dl> <dt>タイトル</dt> <dd class="list"><dl> <dt>発売日</dt><dd>2002/08/29</dd> <dt>曲目</dt><dd><ol>...</ol><dd> </dl></dd><!-- list の終わり --> <dd class="kaisetsu"><dl> <dt>作詞作曲</dt><dd>誰か</dd> ... </dl></dd><!-- kaisetsu の終わり --> </dl> で,dd.list {float: left; width: 20%;} dd.kaisetsu {margin-left: 22%;} とか. このほうがわかりやすいかな. ついでに dd.list dt, dd.kaisetsu dt {display: none;} としとけば「発売日」とかは表示されない.
665 :
652 :02/08/29 16:50 ID:???
>>664 この方がイメージに近いです。
>>661 さんの言う
>そのマークアップだと、凡例を書かないと
>何が何についての記述かわかりにくいかも。
の問題も解決されますし。
こちらでやってみます。ありがとうございました。
666 :
Name_Not_Found :02/08/29 17:57 ID:e0VUQvf3
BOXなんですが、tableのcenterみたいに、 枠を中央に位置指定するにはどのように記述すればいいでしょうか??
「センタリング」とかでログ検索しろ
668 :
Name_Not_Found :02/08/29 18:45 ID:e0VUQvf3
調べました。。 IE6で完全対応って、、だめぽ
>>666 DOCTYPE宣言はTransitionalで。
.center {text-align:center;}/*IE向け*/
.center {text-align:-moz-c1enter; margin-right:auto;margin-left:auto;}/*N6向け*/
670 :
Name_Not_Found :02/08/29 22:07 ID:e0VUQvf3
body { font-family: "MS Pゴシック"; font-size: 14px; font-color: #ffffff; background-color: #000000; letter-spacing: 0em; } body {scrollbar-base-color: gray; scrollbar-face-color: gray; scrollbar-arrow-color; color: #ffffff: #000000; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-darkshadow-color: #ffffff } こういった外部cssをリンクしているんですが、 どうしても文字が白の#ffffffに、背景が黒の#000000になりません。 どうしてなんでしょうか???
672 :
670 :02/08/29 22:18 ID:e0VUQvf3
まとめてもだめだったんで分けてみたんですよーー。。。
>>670 だから一つにまとめろと
body {
font-family: "MS Pゴシック";
font-size: 14px;
font-color: #ffffff
background-color: #000000
letter-spacing: 0em;
scrollbar-base-color: gray;
scrollbar-face-color: gray;
scrollbar-arrow-color; color: #ffffff: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
}
font-familyにはosakaも指定したほうが用ですよ
675 :
670 :02/08/29 22:36 ID:JRrd/QRL
やってみましたが、やっぱだめです。。。 わけわかりません。。。。。。。 一回これを外部スタイルシートとしてリンクしてみて、 実験していただけませんか?
>>675 >>673 のソースにはセミコロンが欠けているところがある&
>>674 の指摘通りのミスが
あるのでそのままコピペしてもダメだよ 修正すればいけるはず。
scrollbar-arrow-color; color: #ffffff: #000000; なんですかこれは? 質問する前にちゃんと検証してから書き込んでください。
>>675 まず必要な要素以外を排除して実験してみて。
body{ color: #ffffff; background-color: #000000; }
679 :
670 :02/08/29 22:54 ID:JRrd/QRL
すいません、きちんと指摘された通りに訂正した所、 うまくできました。ご迷惑おかけしました。
いったん、CMで~す。
でも、使うのか、と聞かれると…使わんわなぁ… Mozがあるから、テスト用にも入れてない。
684 :
Name_Not_Found :02/08/30 13:12 ID:oFT/rU97
単なる見た目の好みとかで、もうちょい使う人がいてもいいよな。 4.xは勘弁だけど。
同意、NN6でも同じように見えるようにがんばって書いてるんだから・・・ でもアクセス解析見るとNN6は1ヶ月に一人いるかいないか
やっぱり、ブラウザチェックするときはNN6で必ず見るけど アクセス解析みると4.xのほうがはるかに多い(w
>>686 それなら4.xでチェックしたほうがいいのでは?
4.x……あんなのCSSじゃないでつ。。
うちは訪問者の 5% は Netscape 系列。 ほとんどが NN6 。ついで 3.x、4.x の順に多い。 4.x の人数は割と現実的かと思うけど、 うちにくる 3.x はほとんど UA 情報を偽装した機械の体の人か ダウンロードツールじゃないかと。 物凄い時間間隔でサイト内を駆け巡っておられるので…。 でもたまに生身っぽい挙動の人もいる。(;´д⊂ アウ
>>690 3らしきのはたいていロボットとかプロクシだね。
でも、それをねすけ3としてカウントするような解析も問題だな。(でも多いんだ)
at-worksさんとこの解析はブラウザの分類が的確なので、このスレ住人
的な用途には重宝している。
そのへんをよくわかってるCGI作者ってほかにあまりいないんだよ。
でも本物のねすけ3なら恐れるに足りない。
CSS完全非対応は完全対応と等価なんだ。
CSSにおいて、4.xは9割方の挙動がおかしい。 あらゆるwidthが変ヽ(`Д´)ノ padding領域でbackground-color無効ヽ(`Д´)ノ border個別指定は全滅ヽ(`Д´)ノ etc..etc..etc.. さっさと配布停止しろやグルァ!!
>>692 使用期限を組み込んだ版をラストにとか(w
仕事でやってるのでなければ、NN4.xについては 「支障無く文章が読めればOK」程度の対応でいいんじゃないか。 使っている方も大抵そのつもりで使ってるだろうし。
だよなぁ。崩れたってかまわん、てことなんだろうからな。あれは。 >693 (゚∀゚)ソレダ!
>>694 でも、ちょっと凝ったことやると、支障なく文章読むことすら不可能な
ぐらい表示が乱れるよね?
やっぱり、media="all"やら@importやらでヨネスケ除けは必須?
NN4.xってどこでダウンロードできるの? トップから巧妙に隠されていてダウンロードページにたどり着けない
699 :
Name_Not_Found :02/08/31 01:42 ID:SUeX9TXL
a { text-decoration: none; } a:hover { color: #f7f7f7; } a:link { color: #68869f; } a:visited { color: #68869f; } a:active{ color: #f7f7f7; } と外部スタイルシートに記述してます。 が。どうしてもhoverした時色変わらないんですよ。。。。 なんでかな。。 activeはできてるのに・・
順番
701 :
Name_Not_Found :02/08/31 01:44 ID:SUeX9TXL
え?順番に決まりあるんですか?
別に決まりは無いが効果を期待したいなら考える必要はある
この注意は勧告にあるね。
>699 とりあえず、:hoverを最後にしてみれ。
>>699 :link
:visited
:hover
:focus
:active
の順で書くとよろし。
そうなのか? a a;hover 俺しか指定しないから知らんかった。<a name= は使わないしね。。
超鬱。 ×a;hover ○a:hover
もうだめぽ。。俺しかって何…。
>707 睡眠不足だ。そろそろ寝るよろし。 >705 入れるのか? ver6とかとの共存はできないんじゃなかったっけ…。メリットない…。
>710 共存できるから…
>>710 入れてみた。とんでもないなアレ。。。
とりあえずmedia指定して読み込ませないようにしておいた。
少なくともN4ユーザがこれから増えることはないだろうし、 そんなもんに対応するために曲がったHTML+CSSを書くなんて 阿呆らしくてやっとれませんわ 俺のチムポはやや左に傾いてるがな。
>>713 俺も左利きだから左にアンテナ張るな。今はそれをもどそうと右手が恋人ですが
外部CSSのurlを変えて見えなくしたら、@importをN4で見たときと同じ状態だよな?
>>714 俺は右利きだが左に偏角してるぞ
>>715 CSSオフの状態になるわけだから、そういうこと。
俺も右利きだけど左曲がり
利き手は関係ないと。 ずっと前に人から聞いた話だけど、陰部が勃起した状態で 利き手と反対方向に曲がっているというか方向を指しているのは 体のバランスがいいらしいよ。バランスといっても、食生活などのバランスじゃなくて 平衡感覚渡嘉の TUKA、スレ違いだね。。。糸冬
718 :
もな蔵 ◆fvSEMzgk :02/08/31 12:51 ID:81AgVfAH
フォントサイトでDLしてきたオリジナルフォントを自分のサイトに使用したいのですが 方法がわかりません。 フォントをサーバーにうpして見えるようにさせるとかそういう方法はないのでしょうか? 色々調べてみたのですがオリジナルフォントを使いたいときは画像にしてうpしている 人もいました。 でもそれだと表示に時間がかかるし、実用的ではないですよね。 最悪の場合はフラッシュで表示させようとも思っているのですができればHTMLで表示 できないかと・・・ すみませんが、教えて頂けないでしょうか(; ´Д`)オネガイ
720 :
もな蔵 ◆fvSEMzgk :02/08/31 13:04 ID:81AgVfAH
(; ´Д`)?
>>718 DynamicFont
・・・とか、腐ったことを言ってみるテスト。
722 :
もな蔵 ◆fvSEMzgk :02/08/31 13:06 ID:81AgVfAH
(; ´Д`)調べに逝って来ます・・・
723 :
もな蔵 ◆fvSEMzgk :02/08/31 13:11 ID:81AgVfAH
わからん・・死のう
ほんまアホなんやな。じゃヒント、「なんでこのスレで聞いてるんだ?」。
>>691 >at-worksさんとこの
初めて知ったよ。掲示板もxhtmlなのがイイw
>718 >フォントサイトでDLてきたオリジナルフォントを自分のサイトに使用したいのですが方法がわかりません。 フォントファミリーで使いたいフォント指定するだけ もちろん閲覧者がそのフォントを持っていなければ見えないが 閲覧者に見えなければ意味が無いと言うのであろうがその方法がわからんと言っているのが 皆、アホか?と言っているのだよ
>>718 IEなら@font-faceでダウンロードさせられる。
そのサイトの表示にしか使われないフォントで
システムにインストールさせるわけではない。
ただ、普通の設定ではダウンロード確認ダイアログがでるので
普通の人は見るとひきそう。
「通常は安全です」とか言われる。
DynamicFontはNetscapeとBitstreamが開発した技術で、 フォントをダウンロードさせて表示させるものだよ。
>>726 違う、CSSスレでいきなり何言い出すんだこのアホは?とミンナ思ってる
730 :
もな蔵 ◆fvSEMzgk :02/08/31 20:01 ID:MHiFEqxW
答えてもらってすみません(; ´Д`) 実はMacromediaDreamweaver3 P38 に特別なフォントはCSSで表示させる ことが出来るって書いてあったのでここで質問させて頂きました。 実際に上のソフトでやって見たのですがソース見ても相手サイトにそのフォ ントなければ表示できないようだったので疑問に思ったんです。 やっぱり画像にして表示させることにします。 あと、初心者だから何も知らないだけで特に知能が低いってことないっす。
いやいや、知能低いですって(^^;
>>730 >>287-
>>288 の
|弱気な表現は避ける
| 弁解じみた表現は良くない。また、まわりくどい。
| ex) 超初心者で何もわかりませんが……
| <わからないなら
>>3-4 ,
>>158 を読めよ>
をプレゼントしたい。
フラ板のモナ倉氏とは別人であることを祈る
>>734 フライトシム板にそんなのいたっけ?(w
paddingとmarginってどう使い分けてます? 漏れはmarginを0にしてpaddingで調整するようにしてるんですけど・・・ IEとMozillaで解釈の仕方に違いがあって難しいです。
paddingとmarginは全然意味が違う。リストの時は似たような挙動になるが。
738 :
Name_Not_Found :02/09/01 14:19 ID:AZ6wE523
borderつけてれば違いが分かるでしょ。 それとも二重になったボックスの外ボックスのpaddingか内ボックスのmarginかっていう意味?
そうなるともうどっちでもよい(; ´Д`)
740 :
736 :02/09/01 15:01 ID:???
marginはborderの外側で、paddingは内側で、 とかそういう概念は一応理解してるつもりなんですが、 margin-left:10px;としようがpadding-left:10px;としようが、見た目は変わらないですよね? んでどう使い分ければいいのかいまいち分からないんです。
marginは相殺されるがpaddingはそうではないってところか
いっぱいおっぱい試してみるしかないおっぱい? ボックスおっぱいあれば、マージョンもフュージョンするっぱい パッディンゴ気付いた時にはよ、拝啓挨拶文字カラー 枠船つけて見てみると、ボックス領域見えるDEATH。 デザインやるときゃ、服のセンスも問われるよ・・。問われはしないが 醸し出す。良さと悪さが醸し出る。滲み出る。あー、あー、滲み出る。 ケミカルデニムはいてるか?あれだけ、やめとけ。惨めだぞ。。 デニム吐くなら、とりあえず。青いの買っとけ青いの買っとけ。濃い青で決まりだね。 CSSの極限は、デニムの素材で決まるんだ。本物になりたいときにはさ。 インディゴデニムを買いなさい。
電波さんも訪れる賑やかなスレですね
>>736 IEのpaddingの対応が6からなので、なるべくpaddingは使わないようにしてる。
marginは相殺があったりで大変といえば大変だけど仕方ないかなと。
>>744 >IEのpaddingの対応が6からなので
ウソです。
IE4でもpaddingに対応してます。
但しインライン要素のborderやpaddingはIE5.5から対応です。
マージンの相殺ってなんですか?
>>746 例えばp{margin:1em;}としたとき上下に1emのマージンがあきますよね。
しかし、pを並べて書いたときはpとpの間には1emのマージンしかあかないということ。
>748 よくわかりました。ありがとう。
750 :
まるちごめんなさい :02/09/01 20:58 ID:smzEJulo
オプションメニューでページを切り替えたいと思うのですが アップロードしてもうまくいきません。前後の<form></form> をいれてもだめです。どこがいけないのでしょう?おしえてください! <SELECT onchange="location=this.options[this.selectedindex].value"> <OPTION value="ファイル名">項目</OPTION> <OPTION value="ファイル名">項目</OPTION> <OPTION value="ファイル名">項目</OPTION> <OPTION value="ファイル名">項目</OPTION> <OPTION value="ファイル名">項目</OPTION> <OPTION value="ファイル名">項目</OPTION> <OPTION value="ファイル名" selected>項目</OPTION> </SELECT>
(・∀・)カエレ!
753 :
750 :02/09/01 21:15 ID:smzEJulo
すいません逝ってきます
754 :
Name_Not_Found :02/09/02 01:30 ID:oXbBW70P
どなたか、教えていただけませんでしょうか。 background-img:url("xxxx.gif"); background-repeat:no-repeat; background-attachment:fixed; 上記にて、背景を指定しました。 この指定を使用している、htmlファイル単品で表示するときれいに 表示されるのですが、 画面をフレームで分割されたHTMLファイルに指定すると背景画像が砂嵐のように 崩れてしまいます。 何故なのでしょうか?
756 :
754 :02/09/02 02:02 ID:oXbBW70P
>>755 バイナリでUPしてみましたが、状態は変わりませんでした
757 :
茶文字 :02/09/02 02:28 ID:???
背景画像が砂嵐です! 今すぐ確認すてください
でんこ通せ。
質問なんですが 文字の位置を指定するにはどう書けばいいんでしょうか? 上から○px、左から○pxみたいに指定したいんですが 教えてください
>>759 ボックスの幅と高さを指定して、position:absolute,又はrelativeでボックスの位置指定。
>759 場合による。positionかpaddingでGo
position : absolute; top : **px; left : **px; padding : 0; margin : 0;
763 :
Name_Not_Found :02/09/02 13:25 ID:cVhZxmYT
>>763 そのCGIの、HTMLを書き出している部分にCSSの記述を追加。
765 :
Name_Not_Found :02/09/02 13:35 ID:cVhZxmYT
>>764 CGIにCSSを記述する方法が良く解らないんす(;
>>765 HTMLに記述する方法はわかるんだよね?
とりあえず、理解はできなくても良いからCGIのスクリプトをエディタで見る。
HTMLを記述している部分があるはずなのでhead内なりbodyタグなりを
(HTMLを書きかえるのと同様に)適宜書きかえる。
場合によっては記号のエスケープが必要かもしれんが…
とりあえずはソース見てみ。
それはCGIを勉強するしか。bodyタグとかそのまんま書き出してる箇所があるはず。
定義と引用の$backgroundを消して書き直さなきゃいけないな。 とりあえずCGIのソースをよく見ればなんとなくわかりそうな気もするが……。
770 :
765 :02/09/02 16:12 ID:cVhZxmYT
771 :
Name_Not_Found :02/09/02 16:30 ID:ehinUak2
フォントファミリーに関して質問なんですが、 「普通はimpactをつかって、impactが使えない場合はMS ゴシックを使う」 という風に指定するにはどうすればいいのでしょうか?
773 :
771 :02/09/02 16:45 ID:???
774 :
Name_Not_Found :02/09/04 04:10 ID:soP/i6mJ
DT要素にBOLDを施したんですけどネスケで反映されません dt { font-weight : bold ; } 試しにこれだけ設定して他の要素のスタイルを全て取り除きましたが無理でした 他の要素を使わずにDTを太字にするにはどうすればいいでしょうか? 使ったのはネスケ4.78です、どうかよろしくお願いします
775 :
Name_Not_Found :02/09/04 04:12 ID:F5Q4u4t1
<dt><span>ほにゃらら</span></dt> dt span { font-weight : bold ; } で、どうか。
776 :
774 :02/09/04 04:18 ID:soP/i6mJ
>>775 すみませんが他の要素を使わない方法でお願いします
無理を言って申し訳無い
777 :
Name_Not_Found :02/09/04 04:24 ID:F5Q4u4t1
じゃ無理
778 :
774 :02/09/04 04:28 ID:soP/i6mJ
>>777 あー、無理なのですか、わかりました
ネスケではDT要素にフォントプロパテイは効かないんですね
誰が何をどうやってしても現段階では不可能と言う事ですか
わざわざありがとうございました
779 :
Name_Not_Found :02/09/04 04:30 ID:F5Q4u4t1
誰が何をどうやってしても不可能かどうかは知らないので 無理じゃなくて知らないに訂正。 なんで逆切れみたいな文体なのか。
780 :
774 :02/09/04 04:39 ID:soP/i6mJ
>>779 悪意が伝わるようには書いたけど逆切れっぽくなってしまいましたか
んー、もっと注意して言葉を選んだ方が良かったですね、すいません
>悪意が伝わるようには書いたけど ワロタ
目撃DQN
783 :
Name_Not_Found :02/09/04 05:07 ID:F5Q4u4t1
質問したほうが答えた側に対して悪意を伝えるのを逆ギレっていわずになんていうんだ。
785 :
Name_Not_Found :02/09/04 08:15 ID:tYuS7tHB
こいつおもろい
786 :
Name_Not_Found :02/09/04 12:43 ID:yKeKDE4P
横幅って固定しないほうがいいんでしょうか? 場合による?
何の横幅だよ
788 :
786 :02/09/04 13:31 ID:yKeKDE4P
すんません ページ全体の横幅ってことです
>>788 横スクロールがでない程度におながいします。
790 :
786 :02/09/04 13:55 ID:???
かしこまりました どうもです 横スクロールは嫌われるみたいですね。
791 :
Name_Not_Found :02/09/04 14:02 ID:+bf549Gi
アクセス解析で、“Playstation2 EmotionEngine”てのが来たことを知りました。 ゲームを全くやらないので知らなかったのですが、ドリームキャストだけでなく プレイステーションもウェブ・ブラウジングができるのですね。 ところで、ドリームキャストは確かスタイルシートが有効でしたが、 プレイステーションの方はCSS対応度はいかがなもんなんでしょ? 御存知の方、ご示教ください。
>>791 UAに「EmotionEngine」はさすがに無いでしょ(w
そりゃ単なる偽装と思われ。
ちなみにPS2のブラウザは複数あるみたいで、
実際は「mozilla*.*」なんかの文字列と一緒にブラウザ名を吐くはずだから
そこから調べて(いずれも移植モノのようなので)対応すれば良いかと。
793 :
Name_Not_Found :02/09/04 15:05 ID:MnQFLpfk
<span style="width:100px;height:100px;padding:25px;border:1px solid #336699"> TEST</span> なんでネスケ6はこれを無視しますか ねすけ使用率4%切ったらしいので無視したほうがいいですか
794 :
:02/09/04 15:20 ID:???
>794 ありがとうございます display:blockにしたら出来ました でもIEより大きいです サイズの計算もできないんでしょうかネスケ6 やっぱり無視することにします
CSS+XHTML1.1で作ってるんですけど、 IE6.0の互換モードってのが良く分からないんです。 IE5.5とMozilla1.0で問題なかったら大丈夫なんでしょうか?
>795 ボックスサイズの計算方法は、ネスケ6の方が一応正しい。 IE6もモードによってはこっちの計算方法になる。 勉強しておいで。
>796 互換モードは、5.5とほぼ同等のCSS実装になるモード。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd ">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>floatした要素のmarginについて/続くhr要素の表示位置</title>
<style type="text/css">
<!--
p{float:left;clear:both;width:100%;}
-->
</style></head><body>
<p>嘘を嘘と見抜ける</p>
<p>人でないと難しい</p>
<hr>
</body></html>
というソースの表示結果について質問です。
表示結果は、IEとNN/Operaで下のような2点の違いがあります。
・IEでは2つのp要素の上下マージンが0になる
・NN/Operaではhr要素がp要素の上側に表示される
それぞれ、仕様上はNN/Operaが正しいのでしょうか?
捕捉:widthプロパティ宣言を省略すると、IEでのみ↓のように表示されます(NN/Operaの表示結果は変わりません)
嘘を嘘と見抜ける------------
人でないと難しい
やっぱIEが正義と信じてる馬鹿多いな。 いや、馬鹿はIEなのだけどそれくらい知っとかなきゃまずいしょ
IEもそこまでバカではないけどな。 ブラウザ作るのって大変だし。 M$でさえアレだから、 やっぱりOpera/Moz/NSはすごい(w
805 :
791 :02/09/04 21:31 ID:???
>>792 >UAに「EmotionEngine」はさすがに無いでしょ(w
>そりゃ単なる偽装と思われ。
なぜあり得ませんか?
OSもUAも“Playstation2 EmotionEngine”なのですが
それもこれもみな偽装ですか。だとしても偽装の意味が無いし……。
>>805 本物のPS2である可能性は無いわけではないけど、
>それもこれもみな偽装ですか。だとしても偽装の意味が無いし……。
偽装はユーモアの1つと考えたほうがいいかも。
実際、この板ではUA偽装スレが小盛り上がりをみせているし。
808 :
801 :02/09/04 22:02 ID:???
>802 素早いレスをありがとうございます。 ・IEで、floatした要素の上下マージンが0になるのはバグ ってことですよね。 hr要素の流し込まれ方の違いは、IEにおけるfloatの解釈のバグなのでしょうか? hr要素の解釈の違いのようにも思えるのですが…もう少し調べてきます
809 :
805 :02/09/04 22:11 ID:???
>>807 イコール付きでレスされると
「自作自演カコワルイ」と言われているような気がするのですが杞憂ですか?
あと、791=805ではないのでお前カコワルイ。
810 :
791 :02/09/04 22:24 ID:???
>>809 >あと、791=805ではないので
私は正真正銘
>>791 =
>>805 なんですが、
「805」を偽装するあなたは誰ですか。
意味のない偽装にしても「ユーモア」がかけらも感じられません。
それとも、レス番号を間違って書き込んでしまったのかな。
なにやってんの?
どちらも偽装っぽいな。
見事な着地でした。
816 :
Name_Not_Found :02/09/06 14:04 ID:MA6M6bFN
<p>のマージンを<br>とあわせるには結局何pxなのか 不安で夜も寝むれません
1emじゃないの?
818 :
Name_Not_Found :02/09/06 14:40 ID:MA6M6bFN
間違えました<br><br>と<p>です
820 :
Name_Not_Found :02/09/06 14:50 ID:MA6M6bFN
えーと。。。。。 ・・・・・IE6ですが、、、、わかんないです。。。
822 :
__ :02/09/07 17:12 ID:???
線を横線だけにしたテーブルを作りたいのですが、どうすればいいでしょうか? この板のCSS関係のスレッドで紹介されていたサイトで見た記憶があるのですが、 忘れてしまいました。お願いします。
>>822 table {
border-collapse : collapse;
}
td {
border-bottom : 1px solid black;
}
th {
border-bottom : 1px solid black;
}
borderの太さ・種類・色はお好みで。
>>824 table {
border-collapse : collapse;
}
td,th {
border-bottom : 1px solid black;
}
826 :
822 :02/09/07 18:18 ID:???
言われた方法でできました。ありがとうございました。
827 :
Name_Not_Found :02/09/07 20:18 ID:hZuNGx29
float:left;を指定した要素より、その後に続く要素の方が縦に長くなってしまうと、 後に続く要素の内容がfloat:left;を指定した要素の下にきてしまいます。そうで はなく、後に続く要素の幅を最後まで変えずに表示する方法はあるでしょうか? 具体的には、↓の様ではなく、 ┌───────────┐┌────────┐ │float:left;を指定した要素 ││その後に続く要素 │ │ ││ ..│ └───────────┘│ ..│ ┌────────────┘ ..│ │ .│ └─────────────────────┘ ↓の様にしたいのです。 ┌───────────┐┌────────┐ │float:left;を指定した要素 ││その後に続く要素 │ │ ││ ..│ └───────────┘│ ..│ │ ..│ │ ..│ │ ..│ └────────┘
>>827 floatしたボックスのwidthに応じたマージンを
後に続く要素に設定しる。
例えば左がwidth: 30% だったら 右に margin-left: 31%; とか。
float の基本。
829 :
827 :02/09/07 20:51 ID:???
>>828 その通りにやったらできました。ありがとうございます。
floatの基本でしたか。まだまだ勉強が足りないようです。
基本のことなのにわざわざ答えていただいてありがとうございました。
830 :
828 :02/09/07 21:06 ID:???
あ、基本つーても「主なfloatレイアウトの基本」ね 別にfloatの基本ではない。
AAが結構そろっていてすごい
>>827 は
AAエディターを使っていたのだろうか、と推測する
漏れのいるスレッドはここでつか?
832 :
827 :02/09/07 22:21 ID:???
833 :
:02/09/08 00:41 ID:???
おまいらのおすすめCSS(Level2)解説サイトはどこですか?
「三日坊主の部屋++」が好きだった。
インラインフレームを使ったページで、 対応してないブラウザの為に <iframe></iframe>間に色々書いてるんですけど、 そこに、背景をつけるのが、どうしてもうまくいきません。 ・ ・ <td> <iframe> <table> ・ ・ </table> </iframe> </td> ・ ・ ↑のとき、<td>幅全てに背景をつけたいので、 <table>を<td>幅に合わせ、スタイルシートで背景を指定すると、 </table>のあとに一行空白みたいなのができて、 周りのレイアウトまでぐちゃぐちゃにします。 何か言い方法ないでしょうか? 説明分かりにくくて、すいません。
837 :
836 :02/09/08 01:34 ID:???
age忘れ・・・
>>835 こんなときこそweb.archiveだろ。
>>838 つーかトップページ以外は残ってるんで、
Googleで検索かければ引っ掛かります。
840 :
435 :02/09/08 10:18 ID:???
>>838 TakeMeBack!して墓場から引きずり出した。
サイト丸ごとローカルに保存して活用させていただきます。
841 :
833 :02/09/08 10:19 ID:???
↑間違えた。 ×435 ○833
label { width: 8em; } ラベルの幅を揃えたいのですが Netscape 7.0正式版で有効になりません。IE6では効きます。 バグでしょうか?
>>836 >インラインフレームを使ったページで、
>対応してないブラウザの為に
><iframe></iframe>間に色々書いてるんですけど、
iframe要素未対応のブラウザであるならば
<iframe></iframe>間に色々書いても無意味では。読み込まないでしょ。
あと、iframe要素未対応のブラウザってネスケ4のことだよね?
ネスケ4はCSS対応がバグだらけだから、まともに相手にしてられませんよ。
>>844 逆だよ。
iframeに対応していれば<iframe></iframe>間に書いてあるものを無視して
指定されたページをフレーム表示する。
非対応ならば<iframe>を無視して<iframe></iframe>間に書いてあるものを表示する。
>>843 読みました。
IE6のバグでしょうか。
全部テーブルに入れてレイアウトしました。あまり良くありませんが、解決。
dtとddを横並びにする方法を教えて下さい。 <dt>本名</dt> <dd>Name_Not_Found</dd> ↑と打つと↓みたいに表示したいんです。 本名 Name_Not_Found
848 :
Name_Not_Found :02/09/08 18:30 ID:EFpbol2b
<dl compact> <dt>aaa</dt> <dd>bbb</dd> </dl>
>>848 それは外部CSSでは指定できないんですか?
htmlに記述するしかないんですか?
そりゃCSSじゃないし、StrictDTDにもない属性です。
852 :
Name_Not_Found :02/09/08 19:14 ID:EFpbol2b
こういうのできるけど対応ブラウザ少ないから現実的じゃないね。 dt { display : compact; } <dl> <dt>aaa</dt> <dd>bbb</dd> </dl>
dl dt,dl dd{ display : inline ; }
>>853 それじゃ全部一行になるだろ
dt{ float: left; width: *em; }
dd{ margin-left: *em; }
これをベースに色々やってみれ
>853 俺はそうやってんだけど、文法的にどうなんだろうな。
あー、そうか。並べたら1行になるから駄目なのか。 いまんとこ困ってないけど。
857 :
847 :02/09/08 20:03 ID:???
ありがとうございます!
>>854 さんの方法でいきたいと思います!
みなさん色々教えてくれてどうもありがとうございました!
859 :
836 :02/09/08 23:30 ID:???
もう、いっぱいいっぱいなってきたんで、 背景なしで、いきます。 スレ汚しすんませんでした。
captionにtext-alignを設定するのは間違いですか? ブロック要素しか当てられませんか?
862 :
Name_Not_Found :02/09/09 17:15 ID:qs1m4Ylt
text-alignが効かないお馬鹿なネスケ6対策をおしえてくらはい。 #o1 {text-align:center} #i1 {width:200;height:100} <div id="o1"> <img src="a.jpg" width="200" height="120"> <div id="i1">文章</div> ... </div>
864 :
ふひふひ :02/09/09 17:21 ID:HJRLEGKb
>>862 ネスケだったかオペラだったか忘れたけど、text-align属性を使う要素にwidthとheightを指定してやらないと、text-alignが効かなかったなあ・・・
>>862 div id="#i1"をセンタリングさせたいの?そうなら、お馬鹿なのはどっちかというとIEの方だね。
block要素のセンタリングはmarginの左右をautoにしましょう。
それかdivじゃなくてspanにするか。
>>862 #i1 { width:200px ; height:100px ; margin:auto ; }
数値には単位つけるように
あ・・・また間違えた・・それは別の話だった・・・ <div id="i1">文章</div> をspanにすれ・・
870 :
862 :02/09/09 18:02 ID:???
みなさまありがとうございます。できました。
>>867 単位っているんですか?frontpageで作ったページのソースは
全部単位無しですが、frontpageがお馬鹿なんですか?
お前が馬鹿
「ブロック要素にtext-alignは効かない」というのは直感的にわかりにくいので、 ネスケ6+の挙動の方を間違っていると思いこんでるCSS初心者は多そうな気がする。 というか、かくいう俺も、つい数ヶ月前まで、 「ちっ、なんでネスケ6はテーブルをセンタリングできないんだよ、だせえな」 とか思ってました。 逝こう……
margin:auto
IE5は逆にtext-alignでないとセンタリングできなかったりするから徹底しないんだよね。
captionにtext-alignを設定すると、 caption {text-align:center;} Warning: The text-align property only applies to block-level elements. と出るのはなぜですか?
Warningに理由出てるのに、なぜとか言われても。
>>876 <!ELEMENT CAPTION - - (%inline;)* -- table caption -->
ということです。
マジ?Captionって、ブロックレベルなの?
なんで、だんまりなの?
882 :
??? :02/09/09 21:27 ID:???
ギャハ
>>883 なるほど。例外に扱っていいってことだね
885 :
883 :02/09/09 23:10 ID:???
それじゃあ、 caption {text-align:center;} Warning: The text-align property only applies to block-level elements. っていうのは間違い?
888 :
887 :02/09/09 23:30 ID:???
あ、問題の意味が違ったか。 でも仕様通りの動作でないことは確かです。
889 :
883 :02/09/09 23:31 ID:???
>>886 その判定プログラムを作った人の勘違いか、その判定プログラムがCSS1のものか、
のどっちか。
つーか、そのWarningっていったいどこから出たメッセージ?
890 :
Name_Not_Found :02/09/10 00:06 ID:+yHSWYfD
floatの指定について質問させてください。 .left { float: left; width="65%"} .right{ float: left; width="35%"} として、 <TABLE width="100%"><TR><TD><div class="left"> <p>left</p></div> <div class="right"><p>right</p></div></TD></TR></TABLE> とします。実際の<p></p>の中にはもっと長い文字列を入れます。 これをIE5(Mac)で開き、ウィンドウの幅を徐々にせばめていくと、うまくleftとrightの比率が保持されず、横スクロールバーがでてしまいます。 IE6(Win)だと、それなりに比率を保ってくれました。 この比率を保持したいのですが、どうすればよいのでしょうか? よろしくお願いします。
width="65%"……? “:”!!
(´-`).。oO(divをfloatしてるのに何でテーブル組んでるんだろう)
893 :
890 :02/09/10 09:11 ID:???
>>891 ださい・・・すみません。修正してIE5(Mac)で比率を保持することを確認しました。ありがとうございます。
ですがleftに実際のコンテンツを入れてみると、rightが回り込まれずに下についてしまいました。
どこまで回り込まれるかは、左側のコンテンツの量に左右されるのでしょうか?
実際のコンテンツには、100文字程度の<p>とか、width="100%"の<table>、項目が10程度の<ul>などが入っています。
どれを削ればうまくいくのか、もういちど検証してみます。
>>892 なぜなら外注のデザイナーさんのレイアウトがそうなっているので。
(100%のtableに凝った背景画像とロールオーバーイメージつけただけですが)
あとは社内でレイアウトということなのですが、私、本来DTP担当なので、1から勉強しているのです・・・
tableをとってしまうのは、勉強不足ということと、時間がないので、避けたいのです。
894 :
Name_Not_Found :02/09/10 09:14 ID:CieiVAFA
質問させてください。。 UL{margin-bottom:0px} って、環境によっては、意図した通りにならないことありますか? (TD{line-height:120%} だとネスケの一部でくずれるじゃないですか。それみたいに)
895 :
Name_Not_Found :02/09/10 09:34 ID:T6r3MTOZ
tableつかうならdivにしないで tdにかけばいいじゃん
>>893 .leftと.rightのwidthの合計を100%未満にするとか
>894 期待する表示結果を書かないと答えづらいょ。
898 :
894 :02/09/10 14:33 ID:bzOeH6NL
>>897 確かに。ひとことでいっちゃうと、「バグ」と思われなければいいかな程度なのですが。
たとえば
<table border=0 cellspacing=0 cellpadding=0>
<tr><td>
<ul>
<li>モナー</li>
<li>ひろゆき</li>
<li>夜勤</li>
</ul>
</td></tr></table>
とすると、たとえばIEの場合うううのあとに空行があくじゃないですか。
その空行があかないようにしたいです。1px、2pxほどあいてしまっても、まぁ、かまわないですが、
上の例、ひろゆきと夜勤の文字が重なっちゃったりっていう、「バグ」じゃんって思われるほどのズレが、
生じるような環境はあるんでしょうか?
900 :
Name_Not_Found :02/09/10 15:07 ID:Aso4zuU6
外部スタイルシートにこう記述して、 p.bottom { margin-top: 0px; margin-bottom: 0px; line-height: 1.1em } p.2 { font-color: #787D84; margin-top: 0px; line-height: 1.1em } <div class="box1"> <p> 文章 <br> 文章 </p> <p class="2"> 文章 </p> <p class="bottom"> 文章 </p> </div> としているのですが、 <p class="2">の部分の色が変わらないんです。 これの原因はどこにありますでしょうか。
>>900 font-colorなんてもんはねえ。指詰めて出直して来い
>>900 font-colorなんてプロパティはありません。
(´-`).。oO(
>>900 クラス名の最初に数字て・・・)
905 :
900 :02/09/10 15:20 ID:Aso4zuU6
すいませんcolorですね。。。 アフォウでした失礼しました
>898 ひろゆきと夜勤の間はline-heightで調節。 ただ、font-sizeより小さい値にすると文字が重なったりするから注意。 UL{margin~ っていうのは、ULで生成されるボックスに付くマージン。 そのソースでいうと、セルの内側からの距離だな。
写真画像をサムネイル表示してページで紹介してます。 現在テーブルで囲んでるんですけど <table> <tr> <td><img src="aaa.gif"></td> <td><img src="bbb.gif"></td> <td><img src="ccc.gif"></td> </tr> <tr> 以下省略 CSSで実現するにはどうすればいいですか?
909 :
Name_Not_Found :02/09/10 18:12 ID:1tA4G0EH
なにを
910 :
Name_Not_Found :02/09/10 18:16 ID:GacXpmPw
>>904 すみません。ちょいと尋ねたいのですが。
数字のクラス名ってダメなんでしょうか?
普通に使ってた・・・
>>909 テーブルを使わずに
同じ表示を実現したいということです。
>>908 表組みをしたいならStrictに拘るんでもなきゃtableのままとか。
ulで列挙にして、floatすれば画面幅に応じて一列の数が変わるのが出来る。
li {
padding: 1em;
float: left;
list-style-type: none;
}
----
<ul>
<li><img src="02[1].jpg" width="100" height="100"></li>
・
・
</ul>
みたいに。
>>910 数字が先頭だとだめ。
たとえば
○c123
×123
<img src="aaa.gif"><img src="bbb.gif"><img src="ccc.gif">
915 :
910 :02/09/10 18:46 ID:GacXpmPw
>>913 うちではクラス名を数字にしてもIE5.5ではちゃんと表示されてしまう。
ダメというのはNN系では認識しないとかそんな感じですか。
916 :
Name_Not_Found :02/09/10 18:48 ID:1tA4G0EH
そういう決まりになってるんだよ
>>908 意味が大事だろ。単にサムネイル表示だけなら912みたいにリストにしちゃえば
いいだろうし。
写真→説明みたいな感じならdl,dt,dd使えばいいし。
htmlを見直す事をお薦めする。
918 :
910 :02/09/10 19:00 ID:GacXpmPw
決まり、か・・・。 閲覧自体になんら支障はないなら急いで直さなくてもいいのかな。
仕様を知らない人に「IE以外のブラウザはダメダメ」 と思わせるためにIEはわざと変な実装してるんちゃうんかと。
ほんま癌やわ
921 :
Name_Not_Found :02/09/10 19:13 ID:1tA4G0EH
ざっと試してみたがOperaとネスケ4.7は数字始まりのクラスとIDは無視するな。 ネスケ6.2はIDの場合だけ数字始まりを認識するがクラスの場合は無視する。
>>918 勉強汁
数字なんか普通に使ってる時点でクラスの意味も判ってなさそうだし
923 :
894=898 :02/09/10 19:20 ID:oIro5+19
>>899 &
>>901 すんません。さいしょ
<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>
って書いたあとに、なんかつまらんと思ってモナーとひろゆきと夜勤に書き換えて、
本文の方を書き換えるの忘れました。。。「ううう」じゃなくて「夜勤」のつもりだった・・・。
>>907 あ、そか。ULもボックスを生成しているわけだから、
<ul style="margin-bottom:0px">ってやっても、バグが発生するわけがないって・・・ってことかな
>>912 サムネイルを並べるのにリストにするなら、float使わなくても、
li {display : inline;}
で、よいのでは。
>>918 取り敢えずスタイルシート側で escape しとけ。
そろそろ次スレ?
929 :
908 :02/09/10 23:18 ID:???
みなさん色々手段を教えていただいてありがとうございます 実際にやってみて一番良い方法を選んでいきたいとおもいます ありがとうございました!
931 :
890 :02/09/10 23:44 ID:???
>>896 .left { float: left; width:"65%"}
.right{ float: left; width:"30%"}
としたらうまくいきました!ありがとうございます!
なぜ100%未満なのかwebで調べたのですが、<div></div>の中身が短かったり、
合計値が100%未満でも理由が書いていなかったりして、
つきとめることができませんでした。
なぜ100%未満なのか教えていただけますか?
>>895 Netscape 4.*はfloatの処理がダメということがわかり、泣きそうです・・・
いや、別に無理に同じに見せようとしなくてもええって。 元の HTML の記述さえちゃんとしてるなら。 > width width は本来 padding も border も含まないからでは。 Mac IE5 と Win IE6 がどう解釈しているかは知らないんだけど。
>>931 ブラウザ横幅のpx数が奇数だと
合計100%の分割をうまく処理できないってことでは。
仮に1000pxとすると、650-350でちょうどいい。
しかし999pxの場合も650-350になり、1pxはみ出すことになる。
よってスクロールバーが出てしまう。
MacIEの事情は知らんけど
>>932 >無理に同じに見せようとしなくてもええって。
まあ、フロートさせるとスタイルシートオンのN4じゃ何も見えないけどね。
935 :
890 :02/09/11 01:23 ID:???
>>932 >>933 なるほどです。理由がまったく思いつかず、考え過ぎて頭痛くなってました。
>>934 そうなんです。その場合、leftとrightの%をどう変えても、
left部分は頭一行だけ表示されて後は見えず、
right部分は右はじに細長くはりつく、というレイアウトのままでした。
N4のレイアウトもそれなりにしろとのことなので、
別の方法を考える必要がありますが、
みなさまのおかげでひとつ賢くなることができました。
ありがとうございます。
>>915 仕様ではできないことになっている。
IEはミスに寛大なので、それも許容している。
ただし、全てのブラウザがIEと同様に寛大な解釈をしてくれるとは限らない。
将来に渡ってIEがミスを許容してくれるとも限らない。
そろそろIEもガツンと過去の実装を捨てて欲しいんだがな… IEが腰を上げなきゃいつまで経っても変わらないっつーの。ver.7どーなってんのよ。
1%も普及してないようなブラウザを基準に決まりとか 言われても… 普及してるIEを基準にするべきだとおもいます。
938はもうちょっと勉強してください。 CSSは別に特定のブラウザを基準にしてるわけでは有りません。
>>938 ブラウザを基準に決まりを作っているわけではなく、
決まりに忠実なブラウザだってだけの話なんだが。
938は厨を装った釣師
>>936 >将来に渡ってIEがミスを許容してくれるとも限らない
してくれますよ。後方互換が損なわれる仕様には絶対に準拠しないって
言いきってますもの。そのための互換モード。
>942 M$がいくら言い切ろうが、それが覆らないとは限らない罠。
>>942 doctypeスイッチが出来る前は、
pxの単位抜けはサポートし続けるって言いきってたし、
white-space:pre は将来にわたってサポートすることは
絶対にありえないと言いきってたぞ。
見事に覆ってる。
M$も誰に媚びてんのか知らないけど、 漏れは真っ当なソースだけブラウズできればいいからさ、頼むわ。 フロペで作ったようなほむーぺじなんか見ねえっての ほんとゴメン。
フロントページのソースは難しすぎて僕には読めません。
947 :
Name_Not_Found :02/09/11 15:15 ID:ZxjOJeFg
どなたか教えて下さい。 table枠(縦横、角に4箇所、合計8)のやり方教えて下さい。 最大化してもそれがくずれないような(どんなPCからでもtable枠になっているように) 方法ありますか?
947のソースは難しすぎて僕には読めません。
>table枠(縦横、角に4箇所、合計8)のやり方教えて下さい。 この「やり方」とはどういうことか これを家の親父(48)に尋ねたところ 犯り方という意味合いが強い事がわかった。 つまり947はテーブル枠を女性の性器に仮想して自慰をしたいということなのだ 衝撃の事実 >最大化してもそれがくずれないような(どんなPCからでもtable枠になっているように)方法ありますか? そう、さっきの「犯り方」という言葉から想定すると なんと947はいつでもどこでもPCのあるところで自慰をしたいということなのだ そして947はこのテーブルを世間に売り出して大もうけしようと言うのだ その名も「テーブルオナニーちゃん」なんと浅ましい考えだろうか 我々は947を連行し 指導するに当たった
>>947 正しい日本語そして誰が読んでもその状況を容易に理解できる日本語で質問してください。
全体ではなく指定する区間だけ、link等の定義済みクラスの属性を変更する事ってできますか?
>>952 セレクタの連ね書きをすればいいんでない
>定義済みクラス 勝手に用語を作られてもわかりませぬ
956 :
952 :02/09/11 18:14 ID:???
例えば <a href="xxx.htm" style="---"> ---に何かを入れてhover{color:"red"}をすることってできますか?
958 :
952 :02/09/11 18:39 ID:???
そうですか・・・ありがとうございます
>>956 style属性なんだから素直にhoverを書いてるところに書けばいいんじゃねーの
ほかの属性値を変えたいのならまた別だけど
960 :
952 :02/09/11 21:26 ID:???
>>959 全体ではなく一部分だけhoverの属性を変えたいんですよ
何か良い方法無いですか?
961 :
Name_Not_Found :02/09/11 21:42 ID:o1HLFZ77
idつければ
>>952 その一部分にIDなりclassなり与えて、
a:hover { color: red; }
#ID a:hover { color: blue; }
のようにするか、当該a要素に直にID(class)を与えて、
a#ID:hover { color: blue; }
とするか。IDかclassかはそちらのソースと相談して。
IEがバカなのか? IEが一番思い通りの表示してくれると思ってるのは俺だけ? つーかネスケとオペラでIEと同じように見せるの諦めた。 このページはIEで閲覧しろとさりげなく匂わせたいんだけど IEのバナーとかないの?
964 :
Name_Not_Found :02/09/11 22:50 ID:zK/wqf4Z
>>963 お前がバカ。
…嘘。
バナーなら infoseek の下にあるやつでいいんじゃない?
965 :
952 :02/09/11 23:07 ID:???
>>962 丁寧に説明していただいてありがとうございます。
解決できました。cssの勉強に精進します。
仕様に忠実なソースを書けばMozタンはちゃんと応えてくれる。
それをIEでも不都合ないようにするんだろ。
>>963 あなたの「思い通り」って何かな。
>仕様に忠実なソースを書けばMozタンはちゃんと応えてくれる 現在あるCSS対応UAの中では一番マシってだけで、完全には答えてくれないだろ
モジィラは重過ぎるから問題外 シェア低いし
シェアは関係無いだろ
モズが重く感じるのは一括レンダリングのせいじゃないのか?
>>969 関係大有りです。シェアの高いIEの文法を標準にすべき。
シェア低いブラウザが標準標準言ったって、知らない人から見たら
IEと互換性が無い→使えないな で終わり。
そもそもIEは独自の仕様を確立しているわけではなく たんにバグ・未実装だらけなだけだし。
そうはいっても、シェア低いブラウザが標準のお墨付きで IEと違う実装されても製作者側には迷惑なだけ。 IEは絶対に後方互換を維持すると言ってるのだから IEに合わせれば何の問題も無い事は明白。
IEのCSS実装がまともならそれでも良いんだけどね。 さすがにあれだけひどいと。
そもそも
>>974 は、「まずIEありき」で論をすすめているところに問題があると
思う。
とはいえ、このスレの住人(含む俺)の方も「まず仕様ありき」で論をすすめがち
な点は反省を要するところ。
どちらに肩入れするのでもなく、冷静に「標準で定められている仕様」と「IEの実
装」の長短を比べて考えるべきだと思う。
……で、そうすると、必然的に、仕様の方がIEの実装よりも優れている、という結
論に落ち着くわけですが。
つーかIEの手前勝手を許せない。
IEが草案を先走り実装するのはM$が勝手にやってると 思ってる人も多いでしょうが、W3Cもフィードバック 得るために草案段階での実装を促してるのです。 このやり方が根本的な問題。フィードバックを受けて 仕様を変えようとなったときに、旧仕様で実装した側の立場は?
>>978 先取りをするのは Mozilla もやってるし、それがどうこうは言わないけど、
草案段階で実装するならこまめに追従するべきじゃないのかな? と。
まぁ、巨大なソフトウェアだから Mozilla や Opera の更新速度の方が異常なのかもしれないけど。
新スレも勃ったんだね。さぁ、埋めましょうか。 今日、山手線御徒町駅のホームベンチに「初体験!Java」という本を忘れてしまいました。 見つけた方は、下記のメールアドレスまでよろしくお願いします。 ↓
I_left_my_book_behind@okachimachi.st.jp 新スレが立つたびに思うんだが,コミュスレって関連スレに入れる意味あるの?
お前等、みんなバカ
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。