03/02/14 03:45
裸でもみあうか？
51:Name_Not_Found
03/02/14 03:47
↓この後衝撃の質問が！！！！！！！
52:Name_Not_Found
03/02/14 03:48
↓Skip
53:Name_Not_Found
03/02/14 03:51
→↑Reverse
54:Name_Not_Found
03/02/14 03:55 R9N9o+KC
div要素に設定したクラスに、background-colorをいつも厳密に記述してますか？
かなりのページにわたって利用したクラスをlintにかけたら、back...が
指定されてないと出た。ページの背景色が違う。。。めんどくさくないですか？
55:Name_Not_Found
03/02/14 04:01
>>54
color と background-colorはペアですたい。
56:Name_Not_Found
03/02/14 04:15
>>54
指定したくなかったら、
background-color:transparent;
にするべし。んで、辞書にでも食わせとけ。
57:54
03/02/14 04:17
CSS勉強始めなんですが、こんな事多くっていやになる。
ペアだとは学んでいましたが、背景がイラストの時とか、出したくないじゃないですか。
できる方々は、どう考えるのだろう。
58:Name_Not_Found
03/02/14 04:19
嫌ならやめれば良いよ。
仕事ならそうはいかないだろうけど、
趣味でなら無理して嫌な思いする必要ないし。
59:Name_Not_Found
03/02/14 04:23
>>57
>>56
60:Name_Not_Found
03/02/14 04:23
>>57
嫌でもやめちゃ、いけない。
良い癖をつければ、後でためになる。仕事・趣味関係無しに。
そういう物事の考え方をしてても進歩なし。仕事・趣味関係無しに。
61:54
03/02/14 04:26
>>56
有難う。規定値透明の値があったんだね。確認せずに57書いた。
THX!
62:Name_Not_Found
03/02/14 04:27
確認せずに質問して、「いやになる」とか言っちゃって・・・
凄く失礼なことのような・・・
63:Name_Not_Found
03/02/14 04:30
* {color: ..., background: transparent none;}
64:Name_Not_Found
03/02/14 04:31
, -> ;
失礼
65:Name_Not_Found
03/02/14 04:33
URLﾘﾝｸ(www.fromdfj.net)
上のサイトで幅固定なわけですけども、こういうのもだめなんでしょうか？
あと何故かURLﾘﾝｸ(tohoho.wakusei.ne.jp)で
各項目にいくと必ずブラウザＩＥが落ちるんですが、みなさんはなんともないですか？
66:57
03/02/14 04:55
>60HTML初学で同時にCSSも勉強してて、初日にささっとページ作れたけど、
本当の基礎は難しい（論理/物理構造からの理解）と感じてる。
趣味だけど、辛くてもやめないよ。てきとー…なページなら作れるけど、ヤだし。
レス有難う。
67:Name_Not_Found
03/02/14 05:06
>>66
がんばれよ。一生
68:Name_Not_Found
03/02/14 05:12
>>66
がんばって！p(^-^)q
69:Name_Not_Found
03/02/14 05:20
p(^-^) q
└（ ）┘
｜｜
⊂ つ
70:Name_Not_Found
03/02/14 05:23
下の写真を見て答えなさい
URLﾘﾝｸ(lounge.dip.jp)
この写真が撮影された理由
71:Name_Not_Found
03/02/14 06:00
>>70
ぐろ、と言って見る
72:Name_Not_Found
03/02/14 06:40
<li>にheightを設定した時、
中にいれるテキストを垂直方向に
真ん中に持ってくることってできますか？
73:Name_Not_Found
03/02/14 12:38
↑
え？
74:Name_Not_Found
03/02/14 12:42 zA1llYuO
一括指定について教えてください。
背景画像の固定、フォント（face、color、size)、英文のフォント指定、スクロールバーの色指定など
全部ひとつの<style>～</style>の中に入れるにはどう書けばいいんですか？
それと、日本文と英文のそれぞれのフォント指定はどう書けばいいんでしょうか？
75:Name_Not_Found
03/02/14 12:46
>>74
>>3-4
76:Name_Not_Found
03/02/14 13:04
高校受験終わったからかなぁ……
77:Name_Not_Found
03/02/14 13:27
>>74
検索すりゃあ分かるようなことをいちいちここで聞かないよーにね。
78:74
03/02/14 14:05 OHUgGA2j
すいません、リンク先調べてみました。
あと、日本語と英字の指定の仕方だけがわかりません。
79:Name_Not_Found
03/02/14 15:17
>>78
お前の検索の仕方が悪いだけだよ。
「CSS フォント指定 英語 日本語」あたりで。
80:Name_Not_Found
03/02/14 18:17
余計なレスすると長引くんだからとっとと教えてかえってもらえよ
かすばっかだな。
お前なんか別に来なくていいからさ。
81:Name_Not_Found
03/02/14 18:29
どうやら>>80がズバリ教えてくれるみたいだぞ
82:Name_Not_Found
03/02/14 18:32
ばかはしね
わからないから聞いてるんだよ
83:Name_Not_Found
03/02/14 19:25
まず、HTMLの英語の部分に、lang="en"と明記し、CSSに、
[lang="en"] { font-family : "Times New Roman",serif; }
なとと指定します。
<p>まんこのことを英語では<span lang="en">cunt</span>と言います。</p>
この場合、cuntという部分にだけ、指定が適用されます。
ただし、IEは未対応です。
84:Name_Not_Found
03/02/14 19:29
>>83
<p><dfn lang="en">cunt</dfn>は日本語でまんこの意味です。</p>
の方が言いと思うYP。
いや、どうでもいいんだけど。
85:Name_Not_Found
03/02/14 19:50
今日見てて思ったけど、
sageてない香具師多すぎ。余計なことはsageてよ。
-------------------------解決-------------------------
86:Name_Not_Found
03/02/14 20:27
わかったよ
87:Name_Not_Found
03/02/14 20:50
次の質問どぞー
88:Name_Not_Found
03/02/14 21:48
<dl>
<dt>キャラ名</dt> っていうのを
<dd>読み方</dd> [キャラ名][読み方][持ち物][行動]
<dd>持ち物</dd> [キャラ名][読み方][持ち物][行動]
<dd>行動</dd> と横に並べたいのですがどうしたらいいでしょう？
<dt>キャラ名</dt> ddにclass="1"～class="3"までつけて
<dd>読み方</dd> CSSで
<dd>持ち物</dd> dt {float:left; width:20%;}
<dd>行動</dd> dd .1 {float:left; width:30%;} dd .2{float:left; width:15%;}
</dl> dd .3 {clear:left; width:40%:}
とやってもできませんでした。やり方教えてもらえませんでしょうか？
89:Name_Not_Found
03/02/14 21:56
>>88
class名の先頭には数字は使えないけどそのせいじゃないかね？
90:Name_Not_Found
03/02/14 22:03
>>88
li.name {clear:left;float:left; width:20%;}
li.reading {float:left; width:30%;}
li.item {float:left; width:10%;}
li.action {float:left; width:40%;}
<ul>
<li class="name">キャラ名</li>
<li class="reading">読み方</li>
<li class="item">持ち物</li>
<li class="action">行動</li>
<li class="name">キャラ名</li>
<li class="reading">読み方</li>
<li class="item">持ち物</li>
<li class="action">行動</li>
</ul>
widthの%は100%超えてるわ、クラス名は数字からはじめるわ。
<dd>やたらでてくるわ。
91:88
03/02/14 22:03
>89
あぁ、すいません。
でもa,b,cにしてもできませんでした
92:90
03/02/14 22:05
とえらそうなこと書いておきながらふと思った。
li.name {clear:left;float:left; width:20%;}
clear:left;float:left;
これってありよね？
これから自分で調べてきますが、博識のかたダメならダメだししてください
93:88
03/02/14 22:12
>90
すいません（汗。
そのまま書いてみたらできました。
ところで、リストの最初（キャラ名）がなぜか左端によらないのですが、
なんでなんでしょう？（2-3文字分くらい左に隙間ができるのですが）
IE6.0 XP 800*600
clear:leftはnameの所につかうのですね！ ずっと最後（action)に
使ってました・・・
94:Name_Not_Found
03/02/14 22:16
この場合 width が100%になるから clear:leftする必要もないのかなぁ
もう一度出直してきます。スレ汚しｽﾏｿ
>>93 ごめんこれ追加
ul {margin-left:0;padding-left:0}
li { list-style-type:none;}
95:88
03/02/14 22:18
>94
おおぉ！できました
すいません、もう一つ。
これって画面のサイズをちっちゃくすると段落がたがたになって
しまいますよね？
なんとか回避する方法ってありますでしょうか？（table使わずに）
96:Name_Not_Found
03/02/14 22:57
つかこの<dl>の使い方自体は問題ないのでは？
で90のにするならdisplay: inlineのほうが簡単では？
97:88
03/02/14 23:21
>96
え～と、display:inlineを使えっていうのは、dlをインライン要素にしろ！
ってことでしょうか？
すいません、それと横に並べることがいまいち頭の中で繋がらないです（TT
言い訳：各キャラクターの解説の箇条書きなので、dlを使ってみました。
98:Name_Not_Found
03/02/14 23:28
table使った方が早くないか？
99:Name_Not_Found
03/02/14 23:36
>>95
こういう場合は、表で正しいから、表使ってもいいんだけどな。
100:Name_Not_Found
03/02/14 23:40
>>97
いや<ul>使うなら<li>にdisplay:inlineしたほうがめんどくさくなくてよいかと。
そしてこの場合表なんだからtableでいいじゃんって意見に禿同。
101:Name_Not_Found
03/02/14 23:46
<table>使えよ
本末転倒になってきてるぞ
102:88
03/02/14 23:46
>98-100
tableですか。
なんかtableを使ってイイ場面というのがいまいちよくわからなくて。
解説の箇条書きならdlかなぁとか思ってたので・・・。
ありがとうございました。
>95 自己レス。毎回 </ul>とか</dl>で閉じればできました。すいません
103:Name_Not_Found
03/02/14 23:51
>>102
いやわかるよその気持ち。
ちょっと複雑なリストになってくるとこれ表にしたほういいよなみたいな。
でもリストでズラズラ－っと並べられるより表にしたほうが見やすいって時は
迷わずtable使うべし。
104:103
03/02/14 23:51
ってスレ違いだった。すいません。
105:Name_Not_Found
03/02/15 00:21
>>104
ｽﾚ違いｳｻﾞｲ。したり顔で、わかるよ。とか言ってんなよ。
106:Name_Not_Found
03/02/15 00:31
>>105
まあまあ。
107:Name_Not_Found
03/02/15 00:53
>105
したり顔でしたり顔の奴にうざいっていうお前が一番うざい。
108:Name_Not_Found
03/02/15 00:56
>>107
まあまあ。
109:Name_Not_Found
03/02/15 01:09
105と107は今日ﾁｮｺもらえなかった香具師
110:Name_Not_Found
03/02/15 03:34
いやわかるよその気持ち。
111:Name_Not_Found
03/02/15 03:49
>>110
185を思い出しますた。
わたし185さんのゆーことよっくわかります、だっけか。
112:Name_Not_Found
03/02/15 07:52 Y7XNBJDm
すみませんが、質問させて下さい。
なるべくCSSでレイアウトしようと思っているのですが、やっていいことなのかわかりません。
解像度に依存されること無く、画面の真ん中に画像と画像に回り込んだテキストを置きたいのですが、
横方向では上手くいくのですが、やっぱり縦方向では上にへばりついたままです。
margin : autoも効果ナシでした。
それで、
BODY{background-image : url(hoge.jpg);background-repeat : no-repeat;background-position:10% 50%;}
として、重ならないような位置にDIV（中にテキスト）の位置指定をしています。
しかし、CSSオフにすると間抜けなページになってしまいます（涙）。
あきらめてTABLEレイアウトした方がいいですか？
アフォな質問ですが、よろしくおながいします。
113:Name_Not_Found
03/02/15 08:28
ど真ん中にこだわらないで適当に上マージン取れば？ %で
Web媒体の特性を把握してからレイアウト考えよう
114:Name_Not_Found
03/02/15 09:09
>>1へ。
>>2の【関連スレ】がみなpc3.2ch.netのままで、つながらんぞよ。
次回スレッド立てる人は注意しよう。
115:Name_Not_Found
03/02/15 09:26
まあ>>14もあるしな。↓
「CSS、スタイルシート質問スレッド」テンプレ
URLﾘﾝｸ(fake_lint.tripod.co.jp)
116:Name_Not_Found
03/02/15 09:28
>>112
hoge.jpgが120*120と仮定。
.hoge {
margin-top:-60px;
margin-left:-60px;
position:absolute;
top:50%;
left:50%;
}
<img src="hoge.jpg" alt="hogehoge" width="120" height="120" class="hoge">
回り込みは適当に（w
117:Name_Not_Found
03/02/15 16:05
質問する際にHTMLファイルとCSSファイルを当たり障り無く加工して、
うｐロダにでも上げると適切な答えが返って来やすくなります。
118:Name_Not_Found
03/02/15 16:32
W3C信者にサイトを正しい記述に直して貰うスレ
っぽくなってまいりました。
119:Name_Not_Found
03/02/15 16:32 7OIm6Fru
煽りじゃなくて、
現状でサポートされてない部分が多いＣＳＳでレイアウトするのと
テーブルレイアウト
どちらがユーザビリティに優れているのでしょうか？
120:Name_Not_Found
03/02/15 16:34
>>119
サポートされていない部分が多いCSSでレイアウト
テーブルタグでレイアウト
→別のレイアウトにする
121:Name_Not_Found
03/02/15 17:07
URLﾘﾝｸ(minatsu.pos.to)
↑の様にリストを横に並べつつマーカーを表示させるにはどうしたらよいのですか？
122:Name_Not_Found
03/02/15 17:13
>>121
そこのCSSソースは見たの？ 見てもわからなかったらまた訊いて。
123:Name_Not_Found
03/02/15 17:56
>>122
個人的にはMozillaのDOM Inspectorで見ることをおすすめしたい。
フリーだし。
124:121
03/02/15 18:02
>>122
見ても分からなかったです・・・
125:Name_Not_Found
03/02/15 18:12
>>124
質問の下手な人ですね。
わからなかった箇所を示してくれなくちゃ。
あと、list-style-imageって知ってるのかな？
URLﾘﾝｸ(msugai.fc2web.com)
126:Name_Not_Found
03/02/15 18:24
>>125
list-style-image は diplay プロパティの値が list-item でないと有効でない。
したがって、津波荘のように inline などで横に並べると無効になる。
（少なくとも仕様上はそのような挙動が正しい。）
>>121
津波荘は各 li 要素の background に画像を指定することで、
横に並べつつ“疑似マーカー”を表示している（ように思える）。
127:126
03/02/15 18:25
>>126 誤字 diplay → display ゴメン
>>121
追記：import されているのをたどっていけ
128:Name_Not_Found
03/02/15 18:26
>>121
のサイト importしてるｃｓｓファイルはアクセス制限かけてるね。
>>124
恐らく、liにクラスとid振って
display : inline;とdisplay:list-item; と list-style-imageとmargin, padding
を駆使すればできるよ。
そうやってるみたいだし。
129:Name_Not_Found
03/02/15 18:28
でも、津波莊のCSSはlist-style-imageを指定してますよ。
WinIEでもNN7でもマーカー画像が見えるし。
130:128
03/02/15 18:29
>>128
アクセス制限なんてかけてません。ディレクトり見誤っただけです。ｽﾏｿ
131:Name_Not_Found
03/02/15 18:32
>>129は>>126の前半へのレスね。
132:Name_Not_Found
03/02/15 18:37
すみませんが、質問させて下さい。
なるべくCSSでレイアウトしようと思っているのですが、やっていいことなのかわかりません。
解像度に依存されること無く、画面の真ん中に画像と画像に回り込んだテキストを置きたいのですが、
横方向では上手くいくのですが、やっぱり縦方向では上にへばりついたままです。
margin : autoも効果ナシでした。
それで、
BODY{background-image : url(hoge.jpg);background-repeat : no-repeat;background-position:10% 50%;}
として、重ならないような位置にDIV（中にテキスト）の位置指定をしています。
しかし、CSSオフにすると間抜けなページになってしまいます（涙）。
あきらめてTABLEレイアウトした方がいいですか？
アフォな質問ですが、よろしくおながいします。
133:Name_Not_Found
03/02/15 18:37
>>125
list-style-imageはdisplay:list-itemの要素にしか効果が出ないのが正しいので
それを使って>>121のようなことをするのは特定ブラウザの実装依存になり宜しくない
という話が確か以前にも出ていた気がする。
134:Name_Not_Found
03/02/15 18:39
>>132
img { display: none; }
とでも書いてCSSオン時は背景・CSSオフ時はimgで見せるようにしては？
135:Name_Not_Found
03/02/15 18:39
∧ ∧
|1/ |1/
／￣￣￣｀ヽ、
/ ,, ヽ
/ 丿 ＼ |
| （●） （●） |
/ | さすがのムーミンも
/ ^ |
{ /| | このスレには
ヽ、. ／丿ノ |
｀`ー―‐''" | 呆れ果てているようです
./ . | |
(⌒―| | ﾞ―^⌒)
.￣￣| ￣￣|￣
136:112
03/02/15 18:41
>>113
>>116
説明不足にも関わらず、親切なアドバイスありがとうございました。
お陰様で出来ました～（嬉）。
>>118
妙な流れ作ってしまってスマソです（汗）。
回線切って逝てきまつ。
137:112
03/02/15 18:48
ちなみに132は私ではないです。
138:Name_Not_Found
03/02/15 19:30
質問させてください
body{
color: #fff;
background: #000 url("../bg.gif") repeat-y 0% 0%;
border-left: solid #999 1em;
}
という設定をしています。
IEで見ると問題ないのですが
Mozilla,Operaで見るとbg.gifがボーダーの下に隠れてしまいます。
ボーダーのぴったり隣り合わせにbg.gifを置きたいのですがどうすればできますか？
139:Name_Not_Found
03/02/15 19:47
>>138 >>6をごらん。
【FAQ】
A: WinIEのボックス・モデルが間違ってるからです。
140:Name_Not_Found
03/02/15 19:52
>>138
background: #000 url("../bg.gif") repeat-y 0% 1em;
で、どうです？
141:Name_Not_Found
03/02/15 19:59
border-left: solid #999 1em;
を含めた背景画像を用意すればいいと思った。
142:Name_Not_Found
03/02/15 20:09
>>139
ありがとうございます
対策を教えていただけませんでしょうか
>>140
ありがとうございます
しかしIEで崩れてしまいます。
申し訳ありません。
>>141
ありがとうございます。
しかし画像のサイズが大きくなってしまうので
その方法は最終手段ということにしようと思っています。
申し訳ありません
143:Name_Not_Found
03/02/15 20:31
>>142
とりあえずマイクロソフトに『ふざけんな(ﾟДﾟ)ｺﾞﾙｧ!』とメールを送ることをお勧めします。
144:Name_Not_Found
03/02/15 20:42
>>142
IEのバージョンは？
6.0でDOCTYPEスイッチが標準準拠モードになってれば大丈夫でないかい？
>>118
正しいhtmlのほうがcssを適用しやすいから多少はしょうがないような。
145:Name_Not_Found
03/02/15 20:44
>>144
6.0です。
Doctype宣言は
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "URLﾘﾝｸ(www.w3.org)">
です。
146:Name_Not_Found
03/02/15 20:52
>>145
そのDOCTYPE宣言の前に
<?xml version="1.0"?>
ってつけてみたら大丈夫だと思う。
147:Name_Not_Found
03/02/15 20:53
>>145
<?xml version="1.0" encoding="Shift_JIS"?>
はつけていますがどうにも効果が無いです。
ウザくて申し訳ないです
148:Name_Not_Found
03/02/15 20:53
訂正
すいません >>146でした
149:Name_Not_Found
03/02/15 20:55
あ、嘘書いてしまった。
>>146は無視してください。
150:149
03/02/15 20:56
>>147
それを削れば標準準拠モードになります。
lintには怒られちゃうけどxhtmlで標準準拠モードにするには
そのxml宣言を削るしかないです。
151:138
03/02/15 21:01
どうもありがとうございますた
152:Name_Not_Found
03/02/15 21:05
XHTMLのことをよくわかってないIE6は、XML宣言を「余計な文字列」とみなし、
XHTML文書を互換モードで表示してしまう。
IE6の標準モードで表示される文書を書きたかったら、HTML4.01 strict
にするしかない。
まあ、IE5.5以前のユーザが依然として多い現状では、標準モードでも
互換モードでも意図通りとなるCSSを書くのが無難だと思う。
153:Name_Not_Found
03/02/15 21:30
Opera7にもDOCスイッチってあるの？
box-sizing: border-boxは効かないみたいだし。
154:Name_Not_Found
03/02/15 21:37
>>152
.htacsessいじってhttpレスポンスヘッダで文字コードを明示
するようにすればxml宣言はいらないはずです。
つまり標準準拠モードでxhtmlも使えるわけです。
155:Name_Not_Found
03/02/15 21:40
>>153
URLﾘﾝｸ(www.opera.com)
>box-sizing: border-boxは効かないみたいだし。
嘘つくな。効きます。
156:Name_Not_Found
03/02/15 21:50
>>155
サンクス。効くんだ。書き方間違ってたんだな。
157:Name_Not_Found
03/02/15 21:53 t8dRIuPm
こんにちは。
Hタグを使うと次行に絶対に改行が入りますが、それを強引に解除させる方法は
ないものでしょうか?
158:Name_Not_Found
03/02/15 22:05
>>157
こんにちは。
hn { display: inline }
159:Name_Not_Found
03/02/15 22:14
つーか、変なマークアップしてそう。
160:Name_Not_Found
03/02/15 22:27
157です。
>158
早いレスどうもありがとう!早速試してみます。
161:Name_Not_Found
03/02/15 22:29
minatsuさん自身が答えてくれたので、
>>121は解決ということで。
162:Name_Not_Found
03/02/15 22:46
>>161
background-imageだったんだ。
163:Name_Not_Found
03/02/15 22:47
>>161
つーか一応報告しておけよ
どうやっていたんだよ
164:Name_Not_Found
03/02/15 23:28
後に他の人が同じところでつまずくことを考えて
解決した方法を 残していくのが常識。
報告汁。
165:Name_Not_Found
03/02/15 23:29
>>121の津波荘は
background : url(～) no-repeat 0px 50%;
ってやっているね。
166:Name_Not_Found
03/02/15 23:31
つまり>>126が正しかったってこと？
list-style-image 指定してるとか主張していた奴は何だったの？
167:Name_Not_Found
03/02/15 23:45
>>166
うん（≫121の場合は）。
display: inline; じゃマーカーは出ない（仕様）だっての
168:Name_Not_Found
03/02/16 00:20
俺も以前、background-imageで同じことやってたけど、IE5.0以前は、
inlineに対するpaddingが効かないので、background-imageが文字と
重なって見づらくなることに気づいてやめた。
津波荘さんはどうやって回避してるんだろう。
それとも、IE5.0以前は放置なのかな。
169:Name_Not_Found
03/02/16 00:45 Buy6Uknk
リストを横並びにするにはどうすればいいでしょうか？
170:Name_Not_Found
03/02/16 00:51
>>169
display:inline
>1をよめ。そして実行しろ。この糞野郎。
171:Name_Not_Found
03/02/16 00:56 Buy6Uknk
>>170
なんだとこの童貞インポテンツが。
display:inlineなんて糞要素使ってられっか、早く別のやり方教えろ。
172:Name_Not_Found
03/02/16 01:02
糞要素 糞要素
糞 要 素
173:Name_Not_Found
03/02/16 01:06
>>168
>津波荘さんはどうやって回避してるんだろう。
特に回避とかはしていないようだ。
>それとも、IE5.0以前は放置なのかな。
真面に実装していない WinIE5.0以前が悪い。
WinIE5.0以前とか Mozilla Classic とかは無視するに限る。
174:Name_Not_Found
03/02/16 01:07
>>171
float: leftでもしとけや糞が！
175:Name_Not_Found
03/02/16 01:10 Buy6Uknk
>>174
なんだよフロートって！糞じゃん！！
ポジションでやりてーんだよ。なんとかしろや。
176:Name_Not_Found
03/02/16 01:11
>>168
IE5.0以前なんて今じゃほぼいないに等しいから安心しる！
…うち一人だけIE5.0の常連がいる。どうしましょう？
177:Name_Not_Found
03/02/16 01:12 Buy6Uknk
>>176
アクセス禁止しちまえばいいんじゃないか！？なんつってな！がはは！！（ｗ
178:Name_Not_Found
03/02/16 01:13
>>175
マジレスするとpositionでも可能。
んなめんどくせーことやってられっかボケナスが！！！
179:Name_Not_Found
03/02/16 01:14 Buy6Uknk
もういいよ！！ふざけんなよ！！やってられっかよ！
180:Name_Not_Found
03/02/16 01:16 Buy6Uknk
すいません、おしえてください。
181:168
03/02/16 01:22
>>173
レスありがとう。
でも、IE5.0って、使ってる人結構多いからいまいち踏み切れないのよね。
>>176
ひとりだけなら、メールして
「お願いですからアップデートしてください」
と頼んでみるとか。
182:Name_Not_Found
03/02/16 01:27
>>180
li { display : inline; margin : 0 1em 0 0; }
これで、リストの中身が横並びになる。
183:Name_Not_Found
03/02/16 02:36
ボックスを中央に配置したいのですが、上手い方法はないものでしょうか。
positionを使うとIEかNNどちらかの配置がおかしくなってしまうのですが。
184:Name_Not_Found
03/02/16 03:10
>>183
margin-left: auto; margin-right: auto;
縦方向に中央というならちょっとわからん。
185:Name_Not_Found
03/02/16 03:18
>>183
そう云う、レイアウトは自滅するから止めとけ。
ボックスの高さは内容量に依存するかな。
それと top と bottom のパーセント値は、コンテナブロックの高さが
明示されていないと「auto」として扱われるから注意しろよ。
垂直方向に中央ってのは、HTML+CSS の仕様の範疇じゃまず無理だな。
互換モード+テーブルレイアウトとかで可能だが、
初心者が良くやりたがる、カステクだから止めとけ。
186:Name_Not_Found
03/02/16 03:34 3gEDGp6V
IEで、右のスクロールバーを
左に移すことは可能ですか？
187:183
03/02/16 03:45
>>184
水平方向はこんな便利な技があったんですね。助かりました。
こんな夜中にどうもありがとうございます。
>>185
垂直の方は無理ですか。
>top と bottom のパーセント値は、コンテナブロックの高さが
明示されていないと「auto」として扱われるから注意しろよ。
あ、全然知らなかったです。これは親切にどうも。
188:Name_Not_Found
03/02/16 03:46
>>186
無理かも。
189:Name_Not_Found
03/02/16 03:48
>>186
filterでページ全体を反転させることはできるけど、
内容全部、反転されるから意味がない。
つーか、そんな操作性０の作り方はやめたほうがいいよ。
190:Name_Not_Found
03/02/16 04:05
>186
body {direction: rtl;}
body * {direction: ltr;}
191:Name_Not_Found
03/02/16 04:27
>>190
変なことを教えるな大馬鹿者。
direction は、双方向書字を再現する為のものだ。
URLﾘﾝｸ(www.swlab.csce.kyushu-u.ac.jp)
192:Name_Not_Found
03/02/16 04:30
>>190
（ﾟ∀ﾟ）ｻﾝｸｽｺ
>>191
そういうことはあまり気にしないので大丈夫です
193:Name_Not_Found
03/02/16 04:38
>>192
てめぇが気にするかしないかなんて関係ねぇんだよ。
ユーザーが迷惑するからヤメロってんだよ。
一昨日来やがれ、アフォが。
194:Name_Not_Found
03/02/16 04:38
body * {direction: ltr;} がうまく効かなかったので
body {direction: rtl; text-align : left;} で代用してみました。
なんとなく大丈夫そうなのでこれでいってみようと思います。
195:Name_Not_Found
03/02/16 04:40
>>190
それじゃ不思議マークアップと変わらんだろ。
196:Name_Not_Found
03/02/16 04:45
ブラクラがまた一つネット上に誕生しました。
197:Name_Not_Found
03/02/16 04:46
strictにがちがちにやれ、とは言わないけど不思議マークアップのお手伝いはここではやらないでほしいよな。
198:Name_Not_Found
03/02/16 04:46
>>193
あなたはユーザなのですか？
199:Name_Not_Found
03/02/16 04:49
>>194
氏ね。ウェブから消えろ。
リアルワールドからも消えろ。
200:Name_Not_Found
03/02/16 04:50
>>198
ユーザビリティの対象がユーザなら、閲覧者＝ユーザなわけで、
>>193がどうかとかは無関係なわけで。
とにかく、不思議なお手伝いは不思議を生む要因になるので、やめてほしいですね。
201:Name_Not_Found
03/02/16 04:51
>>197
でもそうゆうのってどこで聞けばいいのですか？
当方2chﾌﾞﾗｳｻﾞのスキンを少し作ってるんですけど
どうしても今後必要な技術だったんで聞いてみました。
別にホムーページとして公開するわけじゃないんで
まぁ大目に見てほしいとか思った次第ですが。
202:Name_Not_Found
03/02/16 04:54
>>201
2chブラウザのスキンで、左にバーが必要？どんな状態だよ？意味不明。
203:Name_Not_Found
03/02/16 04:57
>>201
>どうしても今後必要な技術だったんで聞いてみました。
どうして必要なのか論理的に述べてみよ。
>別にホムーページとして公開するわけじゃないんで
ホムーページとは初耳だ。新手のｶﾙﾄ宗教団体かなんかのページか。
204:Name_Not_Found
03/02/16 04:57
>>203
ホムーペジならわかるんだけどな。
205:Name_Not_Found
03/02/16 05:01
本当は左右にスクロールバーが欲しいんだけど
とりあえず片方ずつやってみようと思って
206:Name_Not_Found
03/02/16 05:05
>左右にスクロールバーが欲しいんだけど
そんなインタフェイス見た事ねぇぞ、ゴラァ！
207:Name_Not_Found
03/02/16 05:06
便乗質問いいですか？
アップダウンコントロールの代わりにスクロールバーを使いたいんだけど
スクロールバーだけを表示させるのって出来ますか？
208:Name_Not_Found
03/02/16 05:07
>>207
質問いいですか？
アップダウンコントロールってなんですか？
209:207
03/02/16 05:08
>>208
URLﾘﾝｸ(www.bcap.co.jp)
こういうのです
210:Name_Not_Found
03/02/16 05:13
以後194と207には反応禁止の方向で良いでしょうか？
211:Name_Not_Found
03/02/16 05:15
>>210
いいですよ。
212:207
03/02/16 05:17
>>210
その前に質問いいですか？
スクロールバーだけを表示させるのは
・出来るけど推奨されない
・出来ない
どちらですか？
213:Name_Not_Found
03/02/16 05:27
>>212
一回だけ答えるね。
VBはVBスレで。
214:207
03/02/16 05:27
すみません
このままではまっとうなみなさんにご迷惑おかけするので
推奨から離れた使用方法を追求する専用スレを立てます
215:207
03/02/16 05:28
>>213
VBではありません。そのリンクはVBのページですが
それと同様の画面をHTMLで表現したいのです
216:Name_Not_Found
03/02/16 05:34
>>215
VBじゃないのに、アップダウンコントロール？
プルダウンメニューのことか？
217:Name_Not_Found
03/02/16 05:36
何か面白い奴がいるな。
このままヲチさせてもらうよ。
218:207
03/02/16 05:42
>>216
プルダウンではないです。
VBでいうところのアップダウンコントロールと同等の機能を
Web上でスクロールバーを使って簡易的に実現しようと思っています。
また、スクロールバーを単体で表示させることができるなら
それを応用してボリュームバーも作りたいと考えています。
(スクロール量/係数＝ボリュームとして使用を検討中）
219:Name_Not_Found
03/02/16 07:03
とりあえず次の質問どうぞ
220:Name_Not_Found
03/02/16 09:10
>>218
URLﾘﾝｸ(report.s22.xrea.com)
ここを参考にして、divのスクロールバーの幅を変えればできると思う。
221:Name_Not_Found
03/02/16 11:19
>>218
一般にはスピンボタンと呼ぶ模様
222:Name_Not_Found
03/02/16 13:00
おい、VB使ってるならPG=技術者な訳だろ、
とりあえず自分で考えろや(ﾟДﾟ)ｺﾞﾙｧ!
223:Name_Not_Found
03/02/16 13:28
（ ﾟдﾟ）ﾎﾟｶｰﾝ
224:Name_Not_Found
03/02/16 13:29
( ﾟдﾟ）ﾎﾟｶｰﾝ
225:Name_Not_Found
03/02/16 13:30
( ﾟдﾟ)ﾎﾟｶｰﾝ
226:Name_Not_Found
03/02/16 13:45
（´-`）.｡oO（便乗ﾎﾟｶｰﾝはわかってない香具師も混ざってそう。
227:Name_Not_Found
03/02/16 13:57
( ﾟдﾟ)ﾎﾟｶｰﾝ
228:Name_Not_Found
03/02/16 14:07
>>222
VBﾌﾟﾛｸﾞﾗﾏなんざ糞ばかり（ ´,_ゝ`）
229:Name_Not_Found
03/02/16 14:24
>>223-225 >>227
全部微妙に違うな
230:222
03/02/16 17:38
>>228
正直、「VBプログラマは糞だから教えてもどうせ理解しねーよ」とどっち書こうか迷った。
231:Name_Not_Found
03/02/16 17:53
次の質問どぞー
232:Name_Not_Found
03/02/16 17:59
皆さんにとってCSSとはどういう存在ですか
233:Name_Not_Found
03/02/16 18:08
>>232
んー、やっぱスタイルシートって感じかな。
234:Name_Not_Found
03/02/16 18:30
>>232
心の支えです。
235:Name_Not_Found
03/02/16 18:35
>>232
一緒にいると煩わしいけど、
いなきゃいないで淋しいかな
236:Name_Not_Found
03/02/16 18:47
>>232
カレーには必ず入れるよ
237:Name_Not_Found
03/02/16 19:20
imgを中央寄せにしたいのですが
img {text-align:center;}ってやってもよってくれないのですが、
どうしたらいいでしょう？
現在は、<p class="center"><img～></p>ってやって
.center {text-align:center;}とごまかしてるのですが・・・
238:Name_Not_Found
03/02/16 19:22
>>237
img {
display: block;
margin-left: auto;
margin-right: auto;
}
つーかbody直下にimg置けたっけ？
239:Name_Not_Found
03/02/16 19:41
>>232
パワポ使ってるときに，CSSとJavascriptでレイアウトとかしてプレゼン出来るソフトが（ ﾟдﾟ)ﾎｽｨ…と思った，って感じ．
240:Name_Not_Found
03/02/16 20:22
>237
ごまかすも何もそれで正しいと思いますが
241:237
03/02/16 20:35
>238
即レスどもです。
display要素を使うのですね。ありがとうございます。
使ったことない要素なので、色々やってみます！
>240
毎回、クラスを指定するのが鬱陶しくて・・・
242:Name_Not_Found
03/02/16 21:09
>>237
クラス名「center」はいただけない。
（それじゃ<center>を使うのと何も変わらない）
あと、body直下にimgを置くのはよろしくないです
<p class="image"><img ... /></p>
でファイナルアンサーじゃないかな…
243:Name_Not_Found
03/02/16 21:11
>>239
Mozilla(Netscape 7)やOperaならそういう使い方ができると思われ。
そもそもOperaの全画面モードは media="projection" なスタイルシートしか読まないのでそういう用途を想定していると考えられる。
244:Name_Not_Found
03/02/16 21:14
ID名やclass名には
大文字小文字使えるんですよね？
245:237
03/02/16 21:15
>242
なるたけわかりやすいクラス名がいいかなとおもって安直に
つけてしまいましたが、クラス名につかっちゃいけない文字とかは
ないですよね？今度気をつけます。（imgはちゃんとpで囲ってます）
すいません、もう一つ聞いてもイイですか？
h1に枠線をつけたいんですが、可能でしょうか？
h1 {border-width:0 0 1 10; border-color:red;}
ってやって付箋紙みたいにしたいのですが。。。
246:Name_Not_Found
03/02/16 21:17
>>245
まずやってみるベシ．ベシ！
247:237
03/02/16 21:20
>246
うぅ。できんかったとですたい
248:Name_Not_Found
03/02/16 21:21
>245
0以外の数値には単位をつけてくださいませ
249:207
03/02/16 21:24
>>220
ありがとう！
250:Name_Not_Found
03/02/16 21:25
solid も入れて
251:Name_Not_Found
03/02/16 21:25
>>244
何が聞きたいのかわからん…。
大文字も小文字も使えなかったら何使うんだって話。
とりあえず、大文字小文字を混ぜていいのか？
という意味ならYes。
大文字、小文字の区別があるの？を聞きたいのなら
標準モードなら区別する。互換モードはしない。
質問の意味が違ってたら、わかりやすい日本語でお願いします。
252:237
03/02/16 21:29
>246
あぁ、すいません！！
>250
できました。 border-style:solid忘れてました。ありがとうございます
253:Name_Not_Found
03/02/16 21:31
>>251
私の聞きたいことは全て答えて下さいました
ありがとうございました！
254:Name_Not_Found
03/02/16 22:43
日記などでインデントを使う場合 blockquote は引用だからやめた方が良いようなんですが、
その場合は何を使うのが一番適切なんでしょうか。
255:Name_Not_Found
03/02/16 22:43
>>242
<center>使うのとは全然違うだろ。
256:Name_Not_Found
03/02/16 22:47
>>254
<p class="diary"></p>の
p.diary {padding-left:2em;}
日記の文の中で段落分けあって<p>をそこで使うなら当然
<div class="diary">ね。
257:Name_Not_Found
03/02/16 22:49
>>254
インデントってtext-indentの方ではなく？
知らなかったら検索すれ
258:Name_Not_Found
03/02/16 23:16
>>254
全体の余白を取りたいならmarginもしくはpadding
文章の頭だけの余白ならtext-indent
259:Name_Not_Found
03/02/17 00:09
>>256-258
Thx
<p>でpaddingを使うのがいいのね。
260:Name_Not_Found
03/02/17 00:14
>>1-259
氏ね。ウェブから消えろ。
リアルワールドからも消えろ。
261:Name_Not_Found
03/02/17 00:19
もう春房の季節ですか？
262:Name_Not_Found
03/02/17 00:27
もう春房の季節ですか？
263:Name_Not_Found
03/02/17 00:28
何でも房つけちゃって。（ぷ
264:Name_Not_Found
03/02/17 00:49
ポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョムポチョム
265:Name_Not_Found
03/02/17 02:27
>>263
房じゃなくて厨だもんね。
春夏秋冬厨ならだいぶ前からあるし。
266:Name_Not_Found
03/02/17 02:30
そういうことじゃなく
267:Name_Not_Found
03/02/17 02:36
季節厨
268:Name_Not_Found
03/02/17 02:59
ｽﾚﾘﾝｸ(cat板)
269:Name_Not_Found
03/02/17 03:05
ぎるもねどす、へぶらけめ。
ぴぶりねりこ！>>268
270:Name_Not_Found
03/02/17 03:24 AEK2wnSL
おながいします
<STYLE TYPE="text/css">
<!--
BODY {
scrollbar-base-color : #FFFFFF;
scrollbar-face-color : #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color : #000000;
scrollbar-3dlight-color: #000000;
scrollbar-highlight-color : #FFFFFF;
scrollbar-shadow-color : #FFFFFF;
scrollbar-darkshadow-color : #000000;
}
-->
</STYLE>
これを<head></head>のところに貼り付ければ
スクロールバーを平面的に出来る、と聞いて
あるサイトから↑のソースを貼り付けみたのですが
なんどやっても平面的になりません。
どなたか教えて頂けないでしょうか、既出だったらすいません
ちなみにIE6です
271:Name_Not_Found
03/02/17 03:36
>>270
バカチン､>1を読んで出直しな
272:Name_Not_Found
03/02/17 03:36
BODY を html に変えて試してみて
273:270
03/02/17 03:54
>271 出直してきます(´･ω･`)。気に障ってたらすいません
>772 平面的なスクロールバーになりました。ありがとうございました
274:Name_Not_Found
03/02/17 10:37
リストに画像を使いたいのですが
{style-type-image:url('CSSファイルから見た画像パス');}
この指定をdlやdtにやっても一向に画像が表示されません。
ulでやったらできました。
dlの場合にはなんか他に各必要があるのでしょうか？
それともう一つ、リストに任意の言葉や画像の連続使用は可能でしょうか？
例えば、リストの先頭に「リスト」って言葉をつけたり
画像1画像2画像3と並べたいのですが。。。
275:Name_Not_Found
03/02/17 11:20
>>274
list-style-***はdisplay:list-itemが指定された要素にだけ反映される。
dtにも表示させたいのならdt { display: list-item }を書き加えれ。
あとlist-style-***は継承されるので記述の簡略化のためにulやdlなどの
コンテナに指定される「ことが多い」が、それをして「ulやdlなどのコンテナにのみ
指定するためのもの」と勘違いして憶えるのは良くない。
276:Name_Not_Found
03/02/17 11:23
追記。
リストのマーカーに何が使えるのかは、仕様書（邦訳でよい）のプロパティ索引からlist-style-***プロパティの説明に飛べばわかる。
文字を表示させたい場合はcontentプロパティの説明を見れ。
仕様に書いてある事はこのように自力で調べるくせを付けると良い。
277:Name_Not_Found
03/02/17 12:32
img border="0"と同じ役割をするCSSはなんですか？
ついでに
<noscript>の中にimgをいれるとりんとに怒られるのですが回避方法は？
278:Name_Not_Found
03/02/17 12:55
>>277
img { border:none; }
<noscript><p><img src"***" width="***" height="***" alt="***"></a></p></noscript>
279:278
03/02/17 12:56
間違えた。</a>は無視してくれ。
280:Name_Not_Found
03/02/17 12:57
>>277
img { border-style: none; }
srictDTDでは<noscript>直下に<img>は置けないので
<noscript><p><img></p></noscript>
とか。
こっちの質問はスレ違いですよ。
281:278
03/02/17 12:57
× src"***"
〇 src="***"
逝ってきます
282:280
03/02/17 12:59
かぶったスマソ。
しかもsrictDTDって。正しくはstrictDTD。
283:274
03/02/17 12:59
>275-276
ども。読みにいってきます！
284:Name_Not_Found
03/02/17 13:00
同一時間帯におっちょこちょいが二人いる奇跡。
285:278
03/02/17 13:01
マジごめん
286:Name_Not_Found
03/02/17 13:10
ｹｺｰﾝしる
微笑ましい夫婦になれそうだ
287:274
03/02/17 15:31
>275-276
こことか URLﾘﾝｸ(www.w3.org)
こことか URLﾘﾝｸ(members.tripod.co.jp)
読んでみたのですけど、liに画像・画像2・画像3などと
画像を続けて表示とかが書いてませんでした。
ご存じの方いたら教え頂けませんでしょうか？
288:Name_Not_Found
03/02/17 15:35
>>287
仕様書にはできることしか書かれてないの。
書いてないことは「できないこと」なの。
「仕様」の意味わかってる？(´Д｀；)
仕様に書かれてないことをしようと思ったら、仕様に書かれてることや他の技術を組み合わせてやるしかないでしょう。
画像を連結しておくとかbackground-imageを使うとかいくらでも手はある。
url(img.cgi)とか指定して画像を動的に生成する手もある。
289:Name_Not_Found
03/02/17 15:50
contentで代用すれば？
290:Name_Not_Found
03/02/17 23:20 TM8mkwNQ
ポジションで段組を行なっているのですが、
深い階層にあるリンクにbackground-colorが適用されません。
hoverとactiveに設定しているのですが…。
浅い階層にあるリンクには適用されます。
なにか解決策はありませんでしょうか？
291:Name_Not_Found
03/02/17 23:24
>>290
実際にどういう構造でどういうスタイルシートを用いているのか提示してください。
292:Name_Not_Found
03/02/17 23:25
WinXP+IE6に激しく依存した話で申し訳ないんだけど、
IEの独自拡張のスクロールバーの色を変更されると
（たとえ一部分でも）XPのスクロールバーが
それ以前のスクロールバー風 < A > になってしまうのが気に食わないので
ユーザースタイルシートに!important指定をしてみましたが、
前述のように、どれかひとつでも変更されると
< A > になってしまうので、うまくいかないようです。
何とか、スクロールバーを弄られないようにする方法は無いのですか？
レジストリ弄るとか、リソースハッカーとかそういうワザしか使えないのかな。
#長くなってｽﾏｿ
293:Name_Not_Found
03/02/17 23:28 TM8mkwNQ
>>291
<div class="outline">
<div class="inline">
<h2 id="top">■ ほにゃらら</h2>
<p>ほにゃらら</p>
<hr />
<h2 class="sec1">■ ほにゃらら</h2>
<ul>
<li><a href="ほにゃらら">ほにゃらら</a></li>←これが適用されないリンク
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
<li>ほにゃらら</li>
</ul>
<hr />
<h2 class="sec1">■ ほにゃらら</h2>
<p>ほにゃらら</p>
<div class="lefts">
<noedit><script language="JavaScript" src="URLﾘﾝｸ(www.)ほにゃらら"></script></noedit>
</div>
</div>
</div>
こんな感じです。
294:Name_Not_Found
03/02/17 23:29 vK+36gKq
>>293
cssも書けよ
295:Name_Not_Found
03/02/17 23:35 TM8mkwNQ
.outline { position:relative; width:99%; background-color: #F0FFF0; border-color:
#669966; border-width: 2px; border-style: solid; margin-top:3em; }
.inline { position:relative; width:99%; background-color: #99cc99; border-color: #669966;
border-width: 2px; border-style: solid; margin:1em 0.5em 1em 1em; }
h2 { margin: 0;border: solid; border-color: #669966; width: 50%;
padding: 0.2em 0em 0.1em 0em; font-size: 100%; background-color: #F0FFF0; }
#top { position:relative; top:-0.15em; left:-0.15em; border-width: 0px 2px 2px 0px;}
.sec1 { position:relative; left:-0.15em; border-width: 2px 2px 2px 0px; }
p { text-indent: 1em; padding: 0em 2em 0em 2em; }
.lefts { position:relative; top:-0.5em; left:0.5em; }
a:link { color:#00509f; }
a:visited{ color:#dfd; }
a:hover { background-color:#696;color:#dfd; }
a:active { color: #FF8000; text-decoration: underline;
background-color: #FFFFF0; }
こんな感じです。
296:Name_Not_Found
03/02/17 23:39
アプロダ使えや
297:Name_Not_Found
03/02/17 23:39
>>290>>293>>295
ちゃんと適用されてるように思えますが？
WinXP IE6 Netscape7
298:Name_Not_Found
03/02/17 23:47 TM8mkwNQ
IE5.01で動作確認しているのですが、UAの方の問題でしょうか…。
299:Name_Not_Found
03/02/17 23:56
128 名前：Name_Not_Found 投稿日：03/02/02 17:27 ???
おまいら参考にしる
URLﾘﾝｸ(www.annie.ne.jp)
URLﾘﾝｸ(3110.sunnyday.jp)
URLﾘﾝｸ(cheser25.hp.infoseek.co.jp)
URLﾘﾝｸ(phoenity.com)
URLﾘﾝｸ(www.users.yun.co.jp)
URLﾘﾝｸ(d-o-b.ciao.jp)
URLﾘﾝｸ(www.windfarm.co.jp)
URLﾘﾝｸ(www.deadbydesign.com)
URLﾘﾝｸ(www006.upp.so-net.ne.jp)
URLﾘﾝｸ(raku-gaki.com)
URLﾘﾝｸ(akiko.kuhndesign.com)
URLﾘﾝｸ(apc.dip.jp)
URLﾘﾝｸ(www1.odn.ne.jp)
URLﾘﾝｸ(www2.ocn.ne.jp)
300:Name_Not_Found
03/02/18 00:10
>>298
そう。俺も同じことあった。
301:Name_Not_Found
03/02/18 00:38
>>295
原因はよく分からないけど、
li a:hover { background-color:#696;color:#dfd; }
li a:active { color: #FF8000; text-decoration: underline; background-color: #FFFFF0; }
って付け加えておくとか。
302:Name_Not_Found
03/02/18 05:02 69LTcOYo
CSS level2の仕様書訳の子孫セレクタと子供セレクタの違いについて教えてください。
子供セレクタのとこの説明で
DIV OL>LI Pは DIV OL LI P
と違うのですか？
DIV OL>LI Pは
このセレクタはLIの子孫であるP要素にマッチするが、そのLI要素はOL要素の子供でなければならず、
更にそのOL要素はDIVの子孫でなければならない。閉じ不等号結合子の両側にある空白類文字は
無視されるということに注意する。
DIV OL LI Pも同じような気がするんですけど・・・。よろしく、お願いします。
303:Name_Not_Found
03/02/18 05:05
>>302
こっちの探す手間が省けるからそのURIも示しましょう。
304:Name_Not_Found
03/02/18 05:08
>>302
DIV OL LI P だと
<div>
<ol>
<li><p>ここにマッチ</p>
<ol>
<li><p>ここにもマッチ</p>
</ol>
</li>
</ol>
</div>
DIV OL>LI P だと
<div>
<ol>
<li><p>ここにマッチ</p>
<ol>
<li><p>ここにはマッチしない</p>
</ol>
</li>
</ol>
</div>
305:Name_Not_Found
03/02/18 05:09
ごめん早とちりした。
この例だとどっちでもマッチするね。
仕様書のしょうもないミスのひとつということでしょう。
306:Name_Not_Found
03/02/18 05:19 UhPa2ECI
>>303
すいません、PCが固まっちゃって、再起動してました。
ここです。
URLﾘﾝｸ(www.swlab.csce.kyushu-u.ac.jp)
307:Name_Not_Found
03/02/18 05:22
段組するのに、フロート以外でやるとしたら何を使いますか？
308:Name_Not_Found
03/02/18 05:23
HTMLの場合、olとulの子供はliしかあり得ないので、
ol>liとol liは等しいです。
子セレクタの例としては不適当。
309:Name_Not_Found
03/02/18 05:26
まあ，ol直下はliしかダメだしね
310:Name_Not_Found
03/02/18 05:27
同じ所の原典。typoも多いぞ（ｗ
URLﾘﾝｸ(www.w3.org)
311:302
03/02/18 05:28
例では、
BODY>Pはbody要素内のp要素にスタイル適用
でも、
BODY Pでもbody要素内のp要素にスタイル適用されますよね？
じゃあ、
BODY>P STRONG だと、bodyの子供セレクタのp要素内のstrongにスタイル適用される。
でも、
BODY P STRONG でも、bodyの子孫セレクタのp要素内のstrongに適用される。
結果的に同じじゃないですか？子供セレクタの使用方法がいまいち理解できません。
初め、子孫セレクタと併用して条件分岐的な使用方法かと思いましたが、
結果的に子孫セレクタのみでできる方法しか思いつきません。
分かる方、よろしくお願いします。
312:Name_Not_Found
03/02/18 05:30
>>311
body>pは
<body>
<div>
<p>text</p>
</div>
</body>
のpにはマッチしない．
313:302
03/02/18 05:36
>>312
あっ・・・！？ なるほど！！
と思って、確認しましたが現状で対応しているブラウザってないんですね・・・。
Netscape7.01とOpera7.02でも動作してません。。。
ってことは、例題が悪いということか。あきらめます。
返答くださった方、ありがとうございました。
314:Name_Not_Found
03/02/18 05:41
>>307さんの質問が流れてしまったので、誰か答えてやってください。スンマソン
315:302
03/02/18 05:52
>>312
嘘書いちゃいました。Netscape7.01、Opera6.05、Opera7.02では動作するようです。
使い方は、いまいちわかりませんが。。。
スレ汚し、ｽﾏｿ
316:Name_Not_Found
03/02/18 06:34
>>307
position
317:Name_Not_Found
03/02/18 06:37
>>311
じゃあ、
>BODY>P STRONG だと、bodyの子供セレクタのp要素内のstrongにスタイル適用される。
>でも、
>BODY P STRONG でも、bodyの子孫セレクタのp要素内のstrongに適用される。
この例ならすぐに差が分かるな。
<body>
<p><strong>～</strong></p>
<div class="menu">
<p><strong>～</strong></p>
</div>
</body>
BODY>P STRONGだと、最初の方の<strong></strong>にだけ適用される。
318:307
03/02/18 07:52
>>314
親切な方ですね。
>>316
ありがとうございあｍした。
319:Name_Not_Found
03/02/18 07:53
>>308
>ol>liとol liは等しいです。
>子セレクタの例としては不適当。
嘘をつくな馬鹿が。
ul li { list-style-image: url(foo.png) } なんて指定してみろ、
ulの子孫の序列リストまでマーカー画像が適用されるだろうが。
ul li ol li { list-style-type: decimal } と指定してみろ、
今度は ul li ol li ul li に番号が振られてしまうだろうが。
従って、
ul > li { list-style-type: url(foo.png) }
ol > li { list-style-type: decimal }
と指定する必要性が出て来るだろうが。
320:319
03/02/18 07:56
ul > li { list-style-type: url(foo.png) } は、
ul > li { list-style-image: url(foo.png) } に訂正。
321:Name_Not_Found
03/02/18 12:13
正しいことを教えてくださるのはとても嬉しいのですが
馬鹿呼ばわりは（たとえ真に馬鹿だとしても）やめていただきたく存じます
>1にも「ﾏﾀｰﾘ進行推奨」とあることですし
322:Name_Not_Found
03/02/18 12:20
>>321
無理に答えなければ解決。
323:Name_Not_Found
03/02/18 12:46
>>321
たしかに、ちょっと勘違いしただけで人を馬鹿呼ばわりする方も悪いと
思うけど、それでいちいち反論してるとスレの無駄遣いになるので、
心の中で小学生チックに、
「ばかっていったら、じぶんがばーか！」
と罵ることをおすすめします。
324:Name_Not_Found
03/02/18 12:58
（´-`）.｡oO（馬鹿と言われる方が「馬鹿と言われる要素がある」ので馬鹿
325:Name_Not_Found
03/02/18 13:38
つまり馬鹿は馬鹿
326:Name_Not_Found
03/02/18 14:52
（・３・） エェー この板の住人はみんなＢＡＫＡなんだＹＯ！
327:Name_Not_Found
03/02/18 15:39
今のところ、自分のサイトでは、デザインが共通のページの場合は外部CSSに、
共通部分が少ない場合はページ内のhead部にいれてるんですが、
後者のような場合、外部CSSにした方がいいとかいくないとかどっちでもいいとかってありますか?
328:Name_Not_Found
03/02/18 15:43
>>327
それでいいと思う。
329:327
03/02/18 15:49
>>328
そのまんまでいいってことですね。ありがとう。
330:Name_Not_Found
03/02/18 16:03
>>327
W3Cは内部スタイルシートはｲｸﾅｲとしてるぽ。
XHTMLからは<!-- -->内を完全無視することが許されるようになるから、
内部スタイルシートが無視されるか、無視されない代わりに非対応のUAで丸見えになるかを選択する事になる。
将来の話だけどね。参考までに。
331:Name_Not_Found
03/02/18 16:05
>>330
> W3Cは内部スタイルシートはｲｸﾅｲとしてるぽ。
マジですか。それを示してるところを教えてくれない？
332:Name_Not_Found
03/02/18 16:06
>>331
あと10分ぐらい探してから聞こう
333:Name_Not_Found
03/02/18 16:13
>>332
じゃあいいや。英語読めないし。
334:Name_Not_Found
03/02/18 16:14
ｵｹｰ次↓
335:Name_Not_Found
03/02/18 16:33
ここは爽やかなインターネットですね。
336:Name_Not_Found
03/02/18 16:50
邦訳読めよ馬鹿と突っ込む気にもならん馬鹿だ
337:Name_Not_Found
03/02/18 16:57
>>327
共通部のスタイルを変更する場合、それに合わせて非共通部分のスタイルを
変更するのに手間がかかる、というのもあるけど、要は本人の問題だから、
自分が納得してるなら構わないと思う。
あとは、なんらかの不具合で外部CSSを読み損なった場合、内部CSSだけ解釈
されると読みづらくなる可能性がある、ぐらいかな。
338:Name_Not_Found
03/02/18 17:16
>>336
どれか示すのがそんなに苦痛なの？
それくらいの手間惜しまないでよね。減るもんじゃないし。
339:Name_Not_Found
03/02/18 17:20
>>338
ちょっと検索するのがそんなに苦痛なの？
それくらいの手間惜しまないでよね。減るもんじゃないし。
340:Name_Not_Found
03/02/18 17:25
いいからバカと罵られたくなかったらこんなとこで質問しなければいいし、
バカと罵る奴もえらそうに質問者見下したりすんなよってことでどうですか？
ここは２ちゃんですよ？
・・・でここなんのスレだったっけ？
341:Name_Not_Found
03/02/18 17:31
>>339
苦痛、そして面倒。さらに睡眠時間が減る。
342:Name_Not_Modified
03/02/18 18:04 Zc7tySBB
ここは、
/* CSS・スタイルシート質問スレッド【15】 */
ｽﾚﾘﾝｸ(hp板)
でぇす(^-^)
343:Name_Not_Found
03/02/18 19:12 xx78DGE5
リストを入れ子にした状態で
リスト1の先頭には画像1を、リスト2の先頭には画像２を表示させるには
<body class="list">
<dl>
<dt>リスト１</dt>
<dd>
<dl>
<dt>リスト２</dt>
<dd>ここが孫？子？</dd>
</dl>
</dd>
</dl>
</body>
スタイルシートで
.list dt {display:list-item; list-style-image:url('./gazou1.gif');}
.list dd dt {display:list-item; list-style-image:url('./gazou2.gif');}
じゃだめでした。なんかいい手ないでしょうか？
344:Name_Not_Found
03/02/18 19:17 /j06/Kl/
テーブルで、上と左の線だけ表示させたいのですが・・・
Γ ←こんな感じで
border-width を使っても、線の太さしか変わらず、
どうしても四辺とも表示されてしまいます。
教えてください。
345:Name_Not_Found
03/02/18 19:19
border-width: 1px 0px 0px 1px;
346:Name_Not_Found
03/02/18 19:26
>>345
0は単位省略可
347:344
03/02/18 19:28 /j06/Kl/
さっそくの返答ありがとうございます。
ですが、どうしても四辺に線が出てしまいます。
上と右だけが太い状態です。
う～ん・・・
348:Name_Not_Found
03/02/18 19:29
>>347
おまいの書いたソースを晒さないとダメだよ
349:Name_Not_Found
03/02/18 19:31
>>343
適用されたけど？（Win2000＋IE6、Opera7で確認）
350:344
03/02/18 19:34 /j06/Kl/
<STYLE type="text/css">
TD {border-width:1px 0 0 1px;}
</STYLE>
<TABLE border="1" cellspacing="0">
<TR><TD>
以下略
351:Name_Not_Found
03/02/18 19:36
>>350
border-colorとborder-styleもしていしる
352:Name_Not_Found
03/02/18 19:37
>349
まじすか！
だめです。やってみても
リスト２に画像は表示されますが、リスト１に画像がでないのです（TT
353:Name_Not_Found
03/02/18 19:40
>>352
つーかなんで素直に ul li 使わないの？
354:344
03/02/18 19:44
できました^^
>>352 どうもでした。
355:343
03/02/18 19:46
>352=>343です。すいません
>353
実際は、名前とその説明なので、dlが適当かと思いまして。
たまたま、その中の入れ子も名前、説明なのでulよりdlかなと。
>354
いえ、私は何もやってません＾＾
356:Name_Not_Found
03/02/18 20:03
>>355
単にリストマーカーが表示される領域が隠れてる(って表現でいいのかな？)だけ
じゃないの？.list に padding-left とかなんか適当なもの指定してみては
.list { padding-left:30px; }
357:343
03/02/18 20:37
>356
おぉぉ！！！
出てきました。そんなことあるんですね。
ひとつ賢くなりました。ありがとうございます！！
すいません、ついでにもう一ついいでしょうか？
テーブルの行と行の間の隙間を設定するやり方ってありますか？
paddingだと、中の文字と枠の間が広がるだけなので、
margin使って tr {margin-top:1em;}とかってやってみてもうまく
広がってくれなくて（TT
358:319
03/02/18 21:05
>>357
>margin使って tr {margin-top:1em;}とかってやってみても
表内部要素には、マージン領域はありません。
>テーブルの行と行の間の隙間を設定するやり方ってありますか？
border-spacing を利用すればできそう。
Internet Explorer では不可。
Netscape 6以降, Opera 6以降では可。
table {
border-collapse: separate;
border-spacing: 0 1em;
}
359:Name_Not_Found
03/02/18 21:24
>>358
>'margin'
>Applies to: all elements
360:343
03/02/18 21:27
>358
＞表内部要素には、マージン領域はありません
ごめんなさい。勉強不足でした。
＞border-spacing を利用すればできそう
できました！
ついでに↓にも書いてありました。検索不足でした。
URLﾘﾝｸ(www.htmq.com)
361:319
03/02/18 21:43
>>359
>17.5 Visual layout of table contents
>Like other elements of the document language, internal table elements generate rectangular boxes with content, padding, and borders. They do not have margins, however.
362:Name_Not_Found
03/02/18 21:50
質問するものもばかならば答える方もばかばっかりだなおい
363:Name_Not_Found
03/02/18 21:52
あのー釣りですか？
364:Name_Not_Found
03/02/18 21:53
>>362
うん、馬鹿だよ。なんか文句ある？
365:Name_Not_Found
03/02/18 21:57
>>362
ばかだと思うならてめーが回答しろよ
366:Name_Not_Found
03/02/18 22:08
>URLﾘﾝｸ(www.htmq.com)
おお、こういう独自仕様まで、まとめて一覧できる資料が欲しかったんだ。
英語ならあるけど読めねーんだよな。
367:319
03/02/18 22:15
>>366
そういう資料なら、こっちの方が良い。
URLﾘﾝｸ(is.vis.ne.jp)
368:Name_Not_Found
03/02/18 22:20
URLﾘﾝｸ(www.htmq.com)
>値を2つ指定した場合： 記述した順に[上下][左右]の間隔が指定された値になります。
どうでもいいけど間違ってるな。
369:Name_Not_Found
03/02/18 23:26 HiFXbF7L
質問です。
IEでユーザーCSSを使ってmarqueeを無効にしようと考え、
色々調べてMozilla系では-moz-binding: noneで無効にできるとこまではわかったのですが
IEでの方法はわからずじまいでした。
誰かご存知の方がいらっしゃったら教えてください。
370:Name_Not_Found
03/02/18 23:34
.textBorder{
border-style: dashed;
border-width: 2px;
border-color: #996666;
letter-spacing: 0.1em;
padding: 10px;
margin: 5% 15% 5% 15%;
}
と、設定しています。
MacIE5.1.6で表示すると、ところどころ枠から文字がはみ出てしまいます。
この状態を直すのには、どのようにしたら良いのでしょうか。
どなたかご回答お願いいたします。
371:Name_Not_Found
03/02/18 23:56
>>370
どうでもいいがpaddingには個人的に～emを推奨
372:Name_Not_Found
03/02/19 00:02
>>368
えっ？2つ指定した場合は、上下・左右の値を指定することになるんじゃないの？
373:Name_Not_Found
03/02/19 00:29
>>372
[上下][左右]じゃなくて[左右][上下]
374:Name_Not_Found
03/02/19 00:37
[上下][左右]であってるよ。
これだからIDでないとこはいやだ。
375:Name_Not_Found
03/02/19 00:38
びっくりした
376:Name_Not_Found
03/02/19 00:42
>>373
値を1つだけ指定した場合、その値は上下左右の全ボーダーに適用される。
2つの値を指定した場合、1つ目の値が上下のボーダー、2つ目の値が左右のボーダーに適用される。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3つの値を指定した場合、1つ目の値が上のボーダー、2つ目の値が左右のボーダー、3つ目の値が
下のボーダーに適用される。 4つの値を指定した場合、1つ目の値から順に上、右、下、左のボーダーに適用される。
377:Name_Not_Found
03/02/19 00:49
こと border-spacing に関しては［左右][上下]であってます
URLﾘﾝｸ(www.swlab.csce.kyushu-u.ac.jp)
td {border: solid 1px #00f;}
.spacing {border-spacing: 1em 5em;}
<table>
<tbody>
<tr>
<td>cell</td><td>cell</td>
</tr>
<tr>
<td>cell</td><td>cell</td>
</tr>
</tbody>
</table>
<table class="spacing">
<tbody>
<tr>
<td>cell</td><td>cell</td>
</tr>
<tr>
<td>cell</td><td>cell</td>
</tr>
</tbody>
</table>
378:Name_Not_Found
03/02/19 00:53
（続き）
NN7.01，Moz1.2.1（ともにWin)で見た場合，
2つ目のtableのセルは明らかに上下のほう
（border-spacingで後に指定したほう）が間隔が開いています．
どこかで仕様が変更になっていたり，その仕様変更にブラウザが
対応してないなら，その旨教えてください．よろしくお願いします．
379:369
03/02/19 01:56
やはりユーザーCSSでマーキー無効にするのは無理なんでしょうか？
マーキー使ってるようなサイト見る私が悪いのでしょうか？
380:368
03/02/19 02:10
>>374-376
本当に無知な香具師ばかりだな。
お前等、本当に仕様書読んだのか。
>'border-spacing'
>the first gives the horizontal spacing and the second the vertical spacing.
381:375
03/02/19 02:18
border-spacing
すら知りませんでした。
382:Name_Not_Found
03/02/19 02:32
>379
display: none; でも visibility: hidden; でも消えるけど，
多分中のテキストは見たいとかそういう要求だよね？
Proxomitron使ってmarqueeをpに置き換えるとかくらいしかないんじゃないかなあ
383:369
03/02/19 02:47
>>382
レスありがとうございます。
どうにも文字が動いたりすると目がチカチカしてしまうもので。
消してしまえば楽なのでしょうがmarqueeで更新情報マークアップしてる
サイトもあるのでそうもいかなくて。
ユーザーCSSではない方法を探ります。ありがとうございました。
384:Name_Not_Found
03/02/19 02:56
質問です。
外部（別サーバ）に置いているcssファイルを読み込んでいるのですが、
その場合 background-image の背景画像(image.gif)も
cssファイルと同じ別サーバに置いていますが、
background-image:url(image.gif)と記述しても表示されません。
cssファイルからの相対パスで指定しているのでokかと思ったのですが…
背景画像を表示させるには、やはりhtmlと同じサーバに
cssファイル+背景画像ファイルを置く以外に手立てはないのでしょうか？
385:Name_Not_Found
03/02/19 03:08
>>384
とりあえず使ってるブラウザの情報を。
ネスケ４だと背景画像の基準がCSSファイルでなくてHTMLファイルだったりする。
でも予想されるのはCSSファイルで外部サーバじゃないほうの相対パスで
画像呼び出してるからでないかな？
hoge.pngと相対パスで記述してるAサーバのCSSファイルをBサーバで呼び出すと
Bサーバのhoge.pngを呼び出すとか。
386:Name_Not_Found
03/02/19 03:11
>>370
letter-spacingをやめる。
387:Name_Not_Found
03/02/19 03:12
>>855
自己解決しました。
どうもキャッシュで古いcssファイルを読み込んでいたようで、うまくいきました。
388:387
03/02/19 03:13
○385
×855
389:Name_Not_Found
03/02/19 04:33
%
で指定しても支障はない。ＥＭなんかくそくらえだ。
390:Name_Not_Found
03/02/19 05:43
文字の左右に、ページ幅に合わせて伸縮するボーダーを入れたいのですが、どうすれば良いでしょうか。
―――タイトル――― ←こんな感じ
現在はテーブルで区切って
┌―┬――┬―┐
│ hr │ タイトル │ hr │
└―┴――┴―┘
こんな風にして対応しています。
391:Name_Not_Found
03/02/19 06:43
>>390
CSSでできないこともないけどあんまりお勧めはしない．まあ，tableよりはましかな．
<h1><span class="text">タイトル</span></h1>
h1{
background-image:url("..."); /* 幅数十pxのボーダー画像 */
background-repeat:repeat-x;
background-position:center;
text-align:center;
}
h1 span.text {
background-color:#fff; / *背景と同じ色 */
}
素直に，
<h1>タイトル</h1>
h1{
text-align:center;
border-bottom:solid 2px #f90;
}
でもいいと思うんだけどな．
392:Name_Not_Found
03/02/19 07:26
<head>
<title>こんなんとか。</title>
<style type="text/css">
body {
color: Black;
background: White;
}
div#documentHead {
color: inherit; background: #f90;
/* WinIE5.5以前対策 */
text-align: center;
}
h1 {
text-align: center;
color: inherit; background: White;
min-width: 4em; width: 20%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="documentHead">
<h1>タイトル</h1>
</div>
</body>
393:392
03/02/19 07:30
一寸、違うか。
394:390
03/02/19 11:03
考えてから書き込めよたこ
395:Name_Not_Found
03/02/19 11:34
また嵐か
396:370
03/02/19 11:46
>>371さん
emに直しました。ありがとうございます。
>>386さん
お返事ありがとうございます。
letter-spacingをやめればちゃんと表示されるのは分かっているのですが
テキストの量が多いので、微妙に文字間隔が空いていた方が読みやすいんですよ。
letter-spacingアリでもちゃんと表示される方法はないですか？
すみません、引き続きどなたかご回答お願いいたします。
397:Name_Not_Found
03/02/19 14:54
insで文字色と下線の色を別個に指定したいんですが、
どないな指定すればよいですか。
そもそもできますか。
398:Name_Not_Found
03/02/19 15:14
>>397
下線を消して border-bottom で擬似的に再現するとか
399:397
03/02/19 15:19
>>398
普通の指定じゃやっぱ無理ですか。
それでやってみます。
ありがとうです。
400:Name_Not_Found
03/02/19 15:27
<dl>
<dt> xxxxxx
<dd>
ここに文字を書く
<div class="oooo"> この部分だけ背景色を変えたい </div>
ここに文字を書く
</dd>
</dl>
のように<dd>の中で一部分だけ背景色を変えたいと思っているのですが、<div>を
入れるのは文法上良くないらしくOperaでは表示が崩れてしまいました。
<span>で囲むと行間に隙間ができるので<div>で囲みたいのですが、何か良い方法は
ありますでしょうか？
401:Name_Not_Found
03/02/19 15:50
<style>
<!--
dd.color {background-color:red }
-->
</style>
<dl>
<dt>xxxxxxx
<dd>ここに文字を書く
<dd class="color">この部分だけ背景色を変えたい
<dd>ここに文字を書く
</dl>
402:Name_Not_Found
03/02/19 16:07
＞<div>を入れるのは文法上良くないらしく
ガタガタブルブル((((ﾟДﾟ;))))
403:400
03/02/19 16:07
ありがとうございました！
<dt>と<dd>が1対nでもいいのは初めて知りましたです。。。
404:Name_Not_Found
03/02/19 19:52
<style>
<!--
dd.color {background-color:red }
-->
</style>
<dl>
<dt>xxxxxxx</dt>
<dd>ここに文字を書く</dd>
<dd class="color">この部分だけ背景色を変えたい</dd>
<dd>ここに文字を書く</dd>
</dl>
405:Name_Not_Found
03/02/19 20:40
>>403
CSSをはじめる前に一通りHTMLを勉強しとけってことですな。
W3CのCSSValidatorさんも
>CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。
>つまり、正当(valid)なHTML文書と共に、CSSスタイルシートを用いる必要があります。
と仰ってるわけですし。
406:Name_Not_Found
03/02/19 21:52
>>367
ダウンロード画面になって、ダウンロードした奴をIEにドロップ
したらテキストファイルだったんですが、何すかコレ？
407:Name_Not_Found
03/02/19 22:01
>>406
application/xhtml+xmlですがなにか？
408:Name_Not_Found
03/02/19 22:26
>>407
う、何すかソレ？良く知らないけどXHTMLすか？
IE5じゃ見れないって事すか？
でもXHTMLって古いブラウザでも問題ないってどこかで聞いた覚えが？？？
409:Name_Not_Found
03/02/19 22:29
>>408
IEはXHTMLをapplication/xhtml+xmlで受け取ると、自分で解釈できないと思いﾀﾞｳｿをはじめる。
Strict-HTML スレッド10
ｽﾚﾘﾝｸ(hp板:6番)
参照。
410:Name_Not_Found
03/02/19 22:43
>>409
あ、そうなんすか。ありがとう。
怖いのでやめときます。
411:Name_Not_Found
03/02/20 02:02
怖いのは最初だけだから
412:390
03/02/20 04:20
>>391さん
あまりお薦めされない方法のようなので、少し考えてみます。
でも参考になりました。ありがとうございます。
>>392さんも考えてくださってありがとうございます。
413:Name_Not_Found
03/02/20 04:37 mOLY465N
↓こんなテーブルでデータの整理をしているのですが、
┌─┬─┬─┬─┬─────┐
│th│td│th│td│td（クラス設定あり）│
└─┴─┴─┴─┴─────┘
thをそれぞれ同じ幅（固定）にして、
クラス設定をしたtdには幅（固定）を設定した場合、
td２つをそれぞれ同じ幅（可変）にすることはできますでしょうか。
thおよびtd（クラス設定あり）には画像が入るため
固定幅にしなければならないという都合があるのです。
『固定幅になんかするなボケ』というツッコミは無しの方向でお願いします。
414:Name_Not_Found
03/02/20 05:08 8qV5aVQJ
∋8ノノハ.∩
川o・-・）ノ ＜先生！こんなのがありました！
＿_/ / /
＼(_ﾉ￣￣￣＼
||ヽ||￣￣￣￣||
...||￣￣￣￣||
URLﾘﾝｸ(saitama.gasuki.com)
415:Name_Not_Found
03/02/20 06:50
>>413
固定幅を可変させたい？ってどういうことですか？
416:Name_Not_Found
03/02/20 07:03
┌─┬─┬─┬─┬─────┐
│th│td.│th.│td│td（クラス設定あり） │
└─┴─┴─┴─┴─────┘
固 変 固 変 固
こういうことですか
417:Name_Not_Found
03/02/20 07:11
>>413
ソースさらした方がわかりやすいよ。
こんな感じ？
<table>
<tbody>
<tr>
<th><img width="**"></th>
<td>文章</td>
<th><img width="**"></th>
<td>文章</td>
<td class="hoge"><img width="**"></td>
</tr>
</tbody>
</table>
で、画像の入ってるセルだけ画像と同じ幅に固定し、文章の入ってるセルは可変（ただし、両者は同じ幅）にしたい、ということ？
だとしたら、JavaScriptとか使わないと、CSSだけじゃ無理じゃないかな。
418:Name_Not_Found
03/02/20 07:14
>>413
tdだけパーセンテージ、じゃダメなの？
419:↓これでいいと思われ。
03/02/20 07:16
<table>
<tr>
<th><img src="hoge1.jpg"></th>
<td width="50%">文章</td>
<th><img src="hoge2.jpg"></th>
<td width="50%">文章</td>
<td class="hoge"><img src="hoge3.jpg"></td>
</tr>
</table>
420:Name_Not_Found
03/02/20 07:17
>>418
画像の幅とウィンドウの幅の比によっては、table全体の幅が100%を超えて、
横スクロールバーが出てしまうのを避けたいのでは。
421:420
03/02/20 07:21
まあ、画像を使ってる時点で、ウィンドウの大きさによっては横スクロール
バーが出るのは避けられないことだけどさ。
422:Name_Not_Found
03/02/20 07:24
>>413
『幅固定よくない』という以前に、肝心のHTMLの方が適切でないのではないかと疑っている。
レイアウト目的ではなく、「データを整理」するのが目的でtableを使うのならば、
おそらくもう少し簡潔な表にまとめられるんじゃないか。
HTMLのソースを見直すことをおすすめする。
423:413
03/02/20 15:35 mOLY465N
こちらの説明不足で余計な混乱を招いてしまいました。
実際のテーブルは以下のようになります。商品説明のページです。
┌────────────┐
│td colspan=5 class=name(商品名) │
├─┬───┬─┬───┬───┤
│th│td(データ１)│th│td(データ２)│td rowspan=3│
├─┼───┼─┼───┤ class=image│
│th│td(データ３)│th│td(データ４)│(商品画像) │
├─┼───┼─┼───┤ │
│th│td(データ５)│th│td(データ６)│ │
├─┴───┴─┴───┴───┤
│td colspan=5 class=info(商品の詳細説明) │
└────────────┘
thは各データの見出しなのですが、クライアントの要望で画像使用。
ということでthおよびtd class=imageについては幅固定なのですが、
テーブルの幅は％による可変なので、
td(データ１)とtd(データ２)の幅が内容の長さによって
まちまちになってしまうのをどうしようかと思いました。
現在の記述は以下のような感じです。
table{ width:90%; }
th{ width:50px; }
td.image{ width:150px; }
td.name,td.info{ width:100% }
困っているのはクラス無しのtdに設定するwidthです。
<td width="50%">で解決することはできるのですが、
なるべくHTMLでのwidth属性は使用したくないので・・・。
よろしくお願いします。
424:
03/02/20 15:40 WXA8JLcq
表を使っている時に、
｜ Ａ｜ ｃｃ ｜ｂｂ ｜
｜ ＢＢ｜ｄｄｄｄ｜ＦＦＦ｜
という感じで右・中央・左そろえを使いたいのですが、
tdではクラスわけせずに、colgroupかcolを使いたいです。
どのようにすればよろしいでしょうか。
ちなみにIE6では col {text-align:right;}で出来るのですが、
Opera7やMozilla1.3aでダメということは、CSS的には間違いってことですよね。
識者の方々お教え下さい。
425:Name_Not_Found
03/02/20 16:34
>>424
>col {text-align:right;}
col td {text-align:right;}ではどうだろう
でも、td要素はブロックレヴェルじゃないので仕様違反かな
426:Name_Not_Found
03/02/20 16:38
>>424
CSS2仕様 17.3. Column Selector
URLﾘﾝｸ(www.w3.org)
<col> と <colgroup> に適用されるプロパティとして、
border, backgroud, width, visibility の4つが挙げられている。
つまり、text-align は反映されなくてもよいので、OperaやMozillaの挙動は正しい。
で、HTML4では、<col> と <colgroup> に align属性が定義されているので
それを使いなさいってことになるが、多分、Mozilla（Netscape）で反映されないと思われ。
427:Name_Not_Found
03/02/20 16:49
>>425
>>426の引用元と同じ箇所に
Table cells may belong to two contexts: rows and columns.
However, in the source document cells are descendants of rows, never of columns.
Nevertheless, some aspects of cells can be influenced by setting properties on columns.
とあって、td は tr など行の子孫であるが、col など列の子孫ではないと言っている。
だから、col td { ... } という指定の仕方が成り立つかどうかよくわからん。
ちなみに、td はブロックレベル要素なので、td { text-align: right } の指定自体は問題ない。
428:Name_Not_Found
03/02/20 17:02
だから半端な知識で答えるなと何度（ｒ
いや、このまま名物化してもいいな
429:Name_Not_Found
03/02/20 17:05 0Lqt/3Jc
>>428
答えられない奴は黙れ。
これ以上のくだらないレスは必要ない。
430:Name_Not_Found
03/02/20 17:17
>>429
いつも完璧な回答をされてる方ですね。ありがとうございます
質問したことないけど
431:422
03/02/20 17:30
>>423
思いっきり「レイアウト目的」でtable使ってるね。
なんでwidth属性使いたくないの？
432:Name_Not_Found
03/02/20 17:43
>>431
クライアントに「Strictで作れ」って言われてるだけでしょ、たぶん
433:Name_Not_Found
03/02/20 17:46
例えば
body {
color: #000;
background-color: #fff;
font: 100%/100% "Font Name", sans-serif;
letter-spacing: 0.1em;
margin: 1em;
padding: 0;
}
というソースがあった場合
どのような方法でこのソースを見やすくしますか？
434:Name_Not_Found
03/02/20 17:51
・適当にインデント
・エディタで行間、文字色をカスタマイズ
435:Name_Not_Found
03/02/20 17:55
>>434
>エディタで行間、文字色をカスタマイズ
( ´,_ゝ｀)
436:Name_Not_Found
03/02/20 19:01
そのソースを見やすく？
<pre><code>
body {
color: #000;
background-color: #fff;
font: 100%/100% "Font Name", sans-serif;
letter-spacing: 0.1em;
margin: 1em;
padding: 0;
}
</code></pre>
code{
color:#000;
background-color:#ccc;
font:normal 1em/1.3 monospace;
letter-spacing:0.1em;
margin:1em;
padding:0.5em;
border:inset 1px #777;
}
こうでいいのか？
437:422
03/02/20 19:38
>>423
もし、>>432が言うように、なんらかの理由（クライアントの要望等）で
Strictにしなければならないのだとしたら、このレイアウトを実現するのは
あきらめ、なおかつHTMLについて勉強し直すことをすすめる。
逆に、このレイアウトの実現が優先されるのであれば、Strictにすることは
あきらめた方がいい。
どちらにせよ、こういった幅固定を多用せざるを得ないレイアウトは可読性
を損なうので、個人的にはStrict云々とは無関係にやめた方がいいと思う。
438:Name_Not_Found
03/02/20 21:48
>>424
tr > * + * + td {
text-align: hogehoge
}
とかやればできるべ。
439:Name_Not_Found
03/02/20 22:53 uay6ormZ
<td>田中</td><td>田中の発言内容</td></tr>
<tr><td>斉藤</td><td>斉藤の発言内容</td></tr>
<tr><td>山本</td><td.山本の発言内容</td></tr>
というのをテーブルを外してやりたいのですが、
条件が合わずに出来ません。条件とは
「名前」と「名前の発言内容」の間にスペースを入れる。
名前ごとに色を変える。
今は
<span class="red">田中 田中の発言内容</span>
のように、全角スペースで間に合わせているのですが
もっと効率的なものがあれば、教えていただけないでしょうか。
440:tantei
03/02/20 23:00
★あなたのお悩み解決致します！！
●浮気素行調査
彼氏、彼女、妻、夫の浮気を調査致します！！
●盗聴器盗撮機発見
あなたの部屋に誰かが仕掛けているかも！！
●行方調査
行方不明になっている家族の消息を調査致します！！
●電話番号から住所割り出し
一般電話、携帯から住所を割り出し致します！！
●ストーカー対策
社会問題ともなっているストーカーを撃退致します！！
その他人生相談からどんなお悩みでも解決いたします！！
２４時間受付 ０９０－８５０５－３０８６
ＵＲＬ URLﾘﾝｸ(www.h5.dion.ne.jp)
メール hentaimtt@k9.dion.ne.jp
グローバル探偵事務局
441:Name_Not_Found
03/02/20 23:05
>>439
表を使え。
いやならpaddingとmarginで
442:Name_Not_Found
03/02/20 23:09
>>439
>404みたいにDL、DT、DDを使えば？
443:Name_Not_Found
03/02/20 23:35
>>439
名前ごとに色を変えるなら、class="名前"だろ。
そして、スレ違いのおかん。
444:413
03/02/20 23:44 mOLY465N
>>437
最初にクライアントにも説明したことはしたのですが
『大量の共通項目によるデータを整理して表示するのが表なのだから
このデータはリストではなくテーブルでレイアウトするのが正しいのだ！』
と逆に強弁されてしまったのでつ（´Д｀;）
スレ違いですが、正解はDL要素ですよね・・・。
ともあれ、なんとか他の案を提示してみます。ありがとうございました。
445:439
03/02/20 23:46 TOA7Cilt
443さん混乱させてしまってすいません。
色替えがわかりやすいようにclassで色を示してみただけです。
404さんのようにしてみたのですが<dt>と<dd>の間で
改行されてしまいますよね。出来れば並べたいのです。
446:Name_Not_Found
03/02/20 23:50
>>445
>>6でも読んでfloatの使いかた学んでみてください
447:439
03/02/20 23:51 TOA7Cilt
追記。
属性にcompact入れても、私のブラウザでは改行されてしまうのです。
448:422
03/02/20 23:57
>>444
いや、そうじゃなくて、こういう場合はtable使っても全然構わないんだけど、
>>423の表は、tableの使い方が間違ってるって言ってんの。
HTMLのソースが「たまたま」Strict DTDに適合してればいいってもんじゃ
ないんだよ。
そのクライアントもHTMLについて分かってないかもしれないけど、あんたも
わかってないんだって。
とりあえず、レイアウト目的ではないなら、この表は、colspan属性だの
rowspan属性だのを使う必要は全然ない。
商品名はcaptionかh1～h6でマーク付けすべきだ。
449:422
03/02/21 00:29
>>444
とりあえず、こんな感じでマークアップして、クライアントに見せてみ。
属性は省略してるんで、imgのsrc属性とかalt属性とかは適宜補って。
<table>
<caption>商品名</caption>
<tbody>
<tr>
<th>商品の外観</th>
<td><img><!-- 商品の画像 --></td>
</tr>
<tr>
<th>価格</th>
<td>***円</td>
</tr>
<tr>
<th>サイズ</th>
<td>縦**cm×横**cm</td>
</tr>
<tr>
<th>説明</th>
<td>**で**な商品です。</td>
</tr>
</tbody>
</table>
これで納得してくれるようなら、少なくともそのクライアントはあんたよりHTMLのことがわかってる。
いいかげんスレ違いなので、以後はこっちで。
ｽﾚﾘﾝｸ(hp板)l50
450:Name_Not_Found
03/02/21 00:49
意図した表と全然違うじゃん
451:Name_Not_Found
03/02/21 00:56
「いいかげんスレ違い」というより、
無理やりスレ違いな話題へ誘導したきらいが…
452:Name_Not_Found
03/02/21 01:18
クライアントってなに？質問者がwebデかなんかなのか？
こんな厨房知識しか持ち合わせていなくてもなれるなら俺もwebﾃﾞｻﾞｲﾅｰになるべ。
453:439
03/02/21 01:22 Bpf9cjAo
すみません。難しく考えすぎていました。
position使えば簡単に出来たんですね。
ありがとうございました。
454:Name_Not_Found
03/02/21 01:37
Web"デザイナー"だからな。あくまでも
455:422
03/02/21 01:41
>>450
レイアウトを無視して「意図した表」から構造だけ取り出すとこうなるでしょ。
>>451
いや、「width属性使いたくない」とか言うから、strictにしたいのかなあ、と思って。
そしたら「正解はdl要素ですよね」とかしゃらくさいこと言うし。
456:Name_Not_Found
03/02/21 01:47
>>454
「デザイナー」って言葉にもいろんな意味があるけどな。
URLﾘﾝｸ(www.ne.jp)
ここの「2002-07-22」の項を見れ。
# ばけらさん、見出しにidふってほしいな……ってここで言っても無意味だが。
457:Name_Not_Found
03/02/21 01:51
>>439
.tanaka{
color : #ff0000;
background-color : #ffffff;
}
.yamamoto{
color : #0000ff;
background-color : #ffffff;
}
.saito{
color : #009900;
background-color : #ffffff;
}
DT{
float : left;
width : 3em;
}
DD{
margin-left : 1em;
}
458:451
03/02/21 01:54
>>455 了解。
＞ HTMLのソースが「たまたま」Strict DTDに適合してればいいってもんじゃないんだよ。
という言葉に、あなたの信念を感じます。
459:Name_Not_Found
03/02/21 09:26
外部cssを使って1つのHTMLに対し、2つの a:link 等を使うことは出来るでしょうか？
デザイン上、どうしてもリンクの色やホバー時のアクションを分けたいのですが
今のままですとどうしても1つにまとめられてしまうので。
460:Name_Not_Found
03/02/21 09:30
できるよ
461:Name_Not_Found
03/02/21 09:34
a{color:yellow}
li a{color:red}
とかすれば<li>の下にあるリンクは赤、それ以外が黄色になるよ
li→.hogeとかクラスに変えてもよし
462:Name_Not_Found
03/02/21 11:55
擬似セレクタの説明としては
div.kurohaikei a:link { color:yellow; }
div.sirohaikei a:link { color:blue; }
かな
463:Name_Not_Found
03/02/21 12:16
>>462
例とは言え物理的なclass名はｲﾔﾝな感じ
464:Name_Not_Found
03/02/21 12:42
そういうクラス名つけてんだろ
465:Name_Not_Found
03/02/21 12:44
ごめん
466:Name_Not_Found
03/02/21 13:02
>>461
yellowなどの色名は依存するから使わない方がいいと聞いたんだが…
467:Name_Not_Found
03/02/21 14:33
>>466
yellowやredなんかの基本色はOKなんでないの。
fuchsiaとかは怪しいけど。
でも実際のところ色名指定のほうがわかりやすくない？