/* CSS･スタイルシート質問スレッド【33】 */

質問です。
フォーカスのあるリンクの周りに、点線の囲みができますが、
これを表示させないように CSS で指定するにはどうしたらよいでしょうか？

a:visited, a:active, a:focus{ border-style:none; }

としてみましたが、うまく行かないようです。

環境は win2000, IE6 です。よろしくお願いします。

>>357
それはスタイルじゃないと思う。
JS スレで解決した人なら、その旨告げて次の質問ﾄﾞｿﾞｰと書いてください。

たしかに私はJSスレ Part29の 853 です。
あそこでの質問は解決していただいたのですが、それと関連したトラブルが
他にありまして、JSスレでの質問と微妙に性質が違うので、こちらで
おうかがいしたいのです。

それはさておき、フォーカスの与えられたオブジェクトの周囲の点線を
指定するセレクタはCSSには存在しない、ということでしょうか？

>>358
いや、スタイルだよ。
:focus疑似クラスはWinIE未対応。:activeなら対応。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#pseudo-classes

>>359
点線の囲みってことはブロックレベルだろう？
aじゃなくてそのブロック要素にborder設定しないと。

>>361　はて。インライン要素にもborderは適用できますが。但しWinIEは5.5以降で対応。

それは Mozilla なら点線を消せる、と言うことでしょうか？
当方は Mozilla 1.7 Sylera でテストしておりますが、以下のコードだと
点線は消えません。

<style type='text/css'>
a:focus, a:active, a:visited {border-style:none;}
</style>

<ul>
<li><a href="#">ふんにゃか　ふんにゃか</a></li>
<li><a href="#">ふんにゃか　ふんにゃか</a></li>
<li><a href="#">ふんにゃか　ふんにゃか</a></li>
</ul>

あの点線はスタイルじゃないでしょ。borderとは別にあるみたいだし。

そういやＷＩＮＸＰでブラウザに限らず何のファイル選択するんでもあの点線でるな。

MacIEだと a:focus{border:〜;}で制馭できた憶えがある。

あの線は
・winIEではcssとは関係ない（が、独自属性で消せたと思う）
・macIEではcssのoutline
・gecko系では-moz-*
・safariも確かoutline(だったと思う)
・operaは、線なんてあったっけ？

borferでなくoutlineだったか。使用しないので忘れてた。
outlineプロパティーに対応してるのはMacIEとOpera7。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/ui.html#outline-properties

>>368
safariも対応してる

要するにMacのブラウザでは制御しやすいが、WinではＯＳが邪魔をするってこと？

そもそもフォーカスの印なくなったら
ＴＡＢ移動とか面倒じゃまいか。

これで Mozilla だと点線が消えるようになりました。
a:focus { -moz-outline:none; }

どたなか WinIEでのやり方をご存知での方はいらっしゃいませんか？

>>372
だからWinIEはa:focusにもoutlineにも対応してないんだって。
それに>>371も言ってるが、識別できなくなるから、消すなよ。
ユーザー・インターフェースの類は無闇にいぢらない方がよい。

前レスで、他スレの番号が出てしまいました。

お聞きしたいのは、スタイルシート以外でできるという設定についてです。
>>367・winIEではcssとは関係ない（が、独自属性で消せたと思う）

あと、今作っているのはイントラネットのメニュー画面で、線を消すのは
ある事情のためです。今回に限った話で、操作に問題はないはずなのです。

スタイルシート以外のことをここで訊かれても、をぢさん困っちゃふな。

>338
base.cssに問題はないと思われ。
W3Cが提供するチェックサービスで問題なしと出る。

Safariはここで表示確認。
http://www.danvine.com/icapture/

最近CSSを学び始めた者です

あるCSSの参考書の書き方なのですが

.head td{vertical-align:top;
padding-top:8px}

といった書き方がされていたので疑問に思ってしまいました。

このスレにある解説サイト等では
タグ .クラス名　という順番で記述するということのようなのですが…

どなたかご教授いただけませんでしょうか。

>>378
それはclassがheadの要素の子孫のtd要素にマッチするセレクタです。

>379さん

ご返答ありがとうございます。

書式の順番という事とは違う内容だったのですね。

うーん、classによって指定した範囲内のtd要素に、
設定が反映するということでしょうか･･･？

基礎概念の勉強がもっと必要だということが解りました…。
リファレンスページを読み直してきます；

bloggerのテーマを編集せいていて少し質問があります。

http://cgi.annie.ne.jp/~ika/uploader/files/0751.zip
なんですけど文字数が多くても左側が右側にはみ出ないようにしたいのですが
上のものをどうすればいいのでしょうか?　うーん、ちょっとわからない
どなたかよろしくお願いします

テーブルだからはみ出ないんじゃないの？

>382
そうなる予定で書いたんですけど
実際書いてみるときれいにはみ出てしまうんですよね
(´･ω･｀)ｼｮﾎﾞｰﾝ

ためしにaを100ぐらいを書くと完全にずれる。
どうすればいいのかなぁ。
何が悪いんだろう

>>383
アルファベットの羅列は改行されずにはみでるよ。
日本語でためしてみなよ。

>>383
連続する半角英数は一単語と見なされて、ブロックの端に到達しても
自動的には折れません。
本来、そういうときのために<br>という要素があるので、可能ならば
それで折ってください。

<br>を入れることが不可能ならば、MSIE ならば word-break という
プロパティを先行実装しているので、それで折ることが可能です。
Moz はまだ実装していません。

>384-385
あー、そうだったのか。
また賢くなった。教えてくれてありがとう。

>385
><br>を入れることが不可能ならば、MSIE ならば word-break という(ry

（´-`）.｡oO（詳しく教えていただきたいなぁ。）

>>386
http://www.google.co.jp/search?q=css+word-break&ie=Shift_JIS&hl=ja&btnG=Google+%8C%9F%8D%F5&lr=lang_ja

なんて親切なんだ、俺ってヤツは。

>387
ﾌｰ('ε')ｰﾝ
お勉強しろということですか。
貴様ら付き合ってくださいまして本当にありがとう
ありがとう。　ばいばい

えーと。
9月半ばくらいまで、名前欄に括弧付きで年齢入れることにしないか？

>>389
これでいいでちゅか？

ちょーでちゅねー。
よくできまちたー。

くだらないルールだ

>>392
デーモン閣下ですか？

自分にレスつけて面白いの？

>>348
返信遅れました。
ええと、>>318と>>321の方法を両方試したのですが、
どちらの方法でも、私が用いた4つのブラウザ全てに反映する事がわかりました。
（とりあえずは、「body {margin-top:**%;}」のほうを現在使用中）

結局のところ、何が原因で
style="position: relative; top: ○○%;"
が反映されなかったのかは、私の知識ではなんとも・・・。

まだホームページ作成に関しても、覚え始めなので精進あるのみです(- -;A

うん。がんがってね。


夏バテに負けず、毅然として次！↓

　ふんにゃか　ふんにゃか
　　　　　　　　　　　　　　　　　　　　　　　　　　ﾁｮｯﾄﾁｶﾞｳﾖｳﾅｷｶﾞｼﾙ

>317っていい奴だな。こういう人は俺と違ってどんどん上達するな。

それはないけど>>398


あっ>>397
ふんにゃかうざったてー

>>395
仕様書によれば――
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#position-props
9.3.2 ボックスの位置を指定する（Box offsets: 'top', 'right', 'bottom', 'left'）
<percentage>
包含ブロックの幅（'left'と'right'）あるいは高さ（'top'と'bottom'）に対する割合で指定する。 'top'と'bottom'については、包含ブロックの高さが明確でなく内容量に依存する場合、パーセント値をすべて'auto'として扱う。

つまり、topの%指定には包含ブロックのheightが明示されていなければならない。
autoでは駄目。IEは余計なお世話をしてくれるだけ。Mozilla・Operaが正しい。

＿＿＿＿＿　　　　　　　　　　 ＿＿＿＿＿
|　　　　｜　　　　　　　　　　|　　　　｜
|　写真１｜　　　　　　　　　　|　写真２｜
|　　　　｜コメント：○○○　　|　　　　｜コメント：○○○
|　　　　｜○○○○○○　　　　|　　　　｜○○○○○○
￣￣￣￣￣　　　　　　　　　　 ￣￣￣￣￣

＿＿＿＿＿　　　　　　　　　　 ＿＿＿＿＿
|　　　　｜　　　　　　　　　　|　　　　｜
|　写真３｜　　　　　　　　　　|　写真４｜
|　　　　｜コメント：○○○　　|　　　　｜コメント：○○○
|　　　　｜○○○○○○　　　　|　　　　｜○○○○○○
￣￣￣￣￣　　　　　　　　　　 ￣￣￣￣￣

CSSでこのような段組レイアウトをしたいのですが、やり方が分かりません。
もちろんテンプレ読んで調べてみましたが、上のような段組の綺麗な組み方は理解するに至りませんでした。
どのように記述したらいいんでしょうか？条件として、、

・写真のコメント（何行になるかわからないものと仮定する）の最後の行は、写真の下側に合わせたい。
・写真1と写真2の上側、写真3と写真4の上側の位置をそれぞれ合わせたい。

よろしくお願いします。

↑絵がずれまくってしまいました。見にくくてスイマセン！！

このスレッドで既出。

>>401
意外と単純そうでやりずらーいな。
TABLEで組めば一瞬なんだけどな、やっぱ表じゃないしあんまりTABLEは好ましくないわな。
かといってCSSで組み込むとOS、ブラウザ毎に表示変わってくるし、
この手のレイアウトは、要素一つ一つをご丁寧にブロック化してから
各々floatなりpositionなりでレイアウト組み込まなきゃだから下手すりゃ
TABLEよりはるかに複雑な記述になる恐れもあるわな。
特にfloatはブラウザ毎でレイアウト崩れ起きやすく注意しなきゃならんし、
かといって絶対座標で位置をとっていくのも、Y座標に関しては難しいとこだよね。
だってこの場合、商品写真よりコメントの方が長くなってコメントの方が占める高さが写真以上になることもあるわけでしょ？？どー組み込むのが賢いのか？？
みんなどーレイアウトとってんのかね？

<input type="file">　に、
borderやfontなどのスタイルシートを用いる方法はないでしょうか？

>>405
input {
border: 適宜;
font: 適宜;
}

ulの入れ子で、以下のようなものがある場合、
第一階層の項目（下でいうと●ではじまる項目）についてだけ、
上マージンだけを10pxもうけるにはどうすればいいのでしょう？

●あああああ
●いいいいい
●ううううう
●えええええ
　○かかかかか
　　■さささささ
　○ききききき
　○くくくくく
　○けけけけけ
●おおおおお

<li class="hoge">
li.hoge{
　margin-top:10px;
}
</li>
とやってもだめでした。

>>407
第2階層以下にもクラスを設定してそれぞれマージンを設定汁。

tableで枠と中の文字の隙間を決めるのに使うcellpaddingをスタイルシートで一括して設定するにはどうすればいいのでしょうか？

>>407-408
ul li {margin-top:10px;}
ul li li {margin-top:0;}

>>409
padding

>>408は、いつもそんな面倒臭いことやってたのか。子孫セレクタ使ってネ。

なるほろなるほろ。
>>408さんと>>410さんありがとうございます。

>>410-411
いつもそんな面倒臭いことやってました・・・＿|￣|○
なるほど勉強になりました。感謝！

>>401って極端なことをいうと、こんな感じになるのかな。
tableでもけっこうしんどそうだ。
position駆使するしかない予感。

　　　　　　　　　　　 　 　 　 　 　 　 コメント：○○○
|￣￣|　　　　　　　　　　　 　 |￣￣|○○○○○○○
|画像|コメント：○○○ 　 　 |画像|○○○○○○○
|＿＿|○○○○○○○.　　 |＿＿|○○○○○

　　　　　　　　　　　 　 　 　 　 　 　 　 　 コメント：○
　　　　　　　　　　　 　 　 　 　 　 　 　 　 ○○○○○
　　　　　　　　　　　 　 　 　 　 　 　 　 　 ○○○○○
|￣￣|　　　　　　　　　　　 　 |￣￣￣￣|○○○○○
|画像|　　　　　　　　　　　 　 |　 画像　 |○○○○○
| 　 　|コメント：○○○.　　　 ￣￣￣￣
|＿＿|○○○○○○

クラス選択子を知ってて子孫選択子を知らないとはこれいかに

ハイ〜　キタカサッサー ホイサッサー

>>415
特に学習せず適当にやってきてしまってたので・・・＿|￣|○
これを機会に適当な性格を改めて精進していきたいと思います。

>>414
それじゃあデザインもナニもあったもんじゃないな。

>>414
おいおい、テーブルなら楽勝だろ〜？？
それからpositionじゃあやりづらくないか？？出来る気がしないな。

<table>
<tr>
<td valign=bottom>画像1</td>
<td valign=bottom>コメント1：○○○○○</td>
<td valign=bottom>画像2</td>
<td valign=bottom>コメント2：○○○○○○○○</td>
</tr>
<tr>
<td valign=bottom>画像3</td>
<td valign=bottom>コメント3：○○○</td>
<td valign=bottom>画像4</td>
<td valign=bottom>コメント4：○○○○○○○○○○○○</td>
</tr>
</table>

これならコメントが何行になろうが401のレイアウトは一応は保持できるから
この方が絶対簡単だし効率的ではあるんだよな。
ただ問題は、このレイアウトをテーブルでやるのはどーなの？？ってことだよな。

ポジションの方がテーブルよりうまくできるのは自明の理なので使い方覚えてください。

＃つーかテーブルとcssが相反するものと思っている時点で池ry

>>421
時と場合によるだろ。

>>420　だった、あぶね、自己レスしちまった。

>>420
じゃあpositionせっせと使って>>401の言ってるレイアウトの仕方をここに書いてみろよ。

さあ　面白くなってまいりました！

420はどこでもの予感

>>401＝>>423

これだからスキルの無い香具師はry

display:table-* とセレクタをちゃんと使えばリスト要素でも可能だとは思う。
しかしIEの対応が出来ていないいつもの罠

アンカー無けりゃわからんよ。

>>414
CSS以前に正しいマークアップを

>414は何も書いてないでしょ？

>>407
だから>>251以下既出だって。
>>261を改良して、
コメントのp要素をdivで括って
div {line-height:画像の高さ}とし、
p {display:inline;vertical-align:bottom}
で、どう？

http://pc5.2ch.net/test/read.cgi/hp/1089286062/l50

参加者大大大募集です。よろしくお願いします！

質問です！
上下（または左右）を真っ黒にして真ん中にメニューやらなんやらを置きたいんですが、
width:100%;にしても両端に余白が出来てしまいます。
border:none;なんかで対処できるかと思ったんですがうまくいかず…。
どうやったら余白を消せますか？

それと、body{background-color:black;}を外部から読み込んでも真っ白なんですけどなんででしょうか…。
とりあえず、.background{background-color:Black;}を加えて、
本体（？）の方に<body class="background">とやって強引にやってるんですが…。
一応、なぜ出来ないのかハッキリさせたいので、出来れば教えてください。

ソース出せ。

>>433
上：意味不明
下：body{background-color:black;} であってるよ。
他のシートやなんかが邪魔してる鴨ナー

>>433
５Ｗ１Ｈって知ってる？　主語と目的語をハッキリさせて質問し直して下さい。
でないとわかりません。
HTMLとCSSはチェッカーにかけて誤記が無いか確かめましたか。

>>433
どんなに正しい記述をしても、ブラウザによっては特定の記述を無視します（実装していないため）
「背景が真っ白になる」のは、おそらくあなたが使ったブラウザの「仕様」なので諦めてください
（たしかmacIE5.1や一部のNNではbodyの要素をいじられるのを嫌うはず）


＞上下（または左右）を真っ黒にして真ん中にメニューやらなんやらを置きたいんですが
ブロック要素は普通 width100％ で考えるはずな（特に指定が無ければ）
おそらくbodyのほうのmarginがデフォルトでついてると思うので

body {
margin : 0;
}

を追加してもういちど試してください。


あと勘違いかもしれないけど、こういうことがしたいのかな？
ttp://www.fromdfj.net/html/overflow.html

上下左右に分けるってんならこういう手もあるよ

padding: 0
も追加しとけ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

dl.a{
padding-left: 100px;
position: absolute;
bottom: 20px;}

p.b{
padding-left: 300px;
position: absolute;
bottom: 20px;}

<dl class="a">
<dt><a href="http://www.aaa.1.html">ほげ</a></dt>
<dt><a href="http://www.aaa.2.html">ほげほげ</a></dt>
<dt><a href="http://www.aaa.3.html">ふん</a></dt>
<dt><a href="http://www.aaa.4.html">にゃか</a></dt>
</dl>

<p class="b">
<a href="http://www.aaa.5.html">ふが</a><br>
<a href="http://www.aaa.6.html">しゅが</a>
</p>

上のようなのを書いてNN7で見てみると
「ふん」と「にゃか」のリンクが機能しません。
IEでは機能しました。

ソースは勉強中のものなので突っ込まないでください。

>>439
padding-left:とか使うから。
absoluteならleftで指定すればいいだろ。

まずCSSの前にHTMLから勉強してみよう

>>440
レイヤーが重なっているから。
試しにp.bにbackground:#000;などを加えるとわかりやすい。

で、例えば下記のようにすれば解決できる。
dl.a{
position: absolute;
bottom: 20px;
left:100px;}

p.b{
position: absolute;
bottom: 20px;
left:300px;}

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

>>442
元のHTMLを触らずCSSで見栄えを・・
という条件だったので突っ込まないでください。。

>>441 >>443
リンクしない理由が分かったので勉強になりました。ありがとうございます。
がんがりがす。

>>444
> 元のHTMLを触らずCSSで見栄えを・・
> という条件だったので突っ込まないでください。。
お前になんで問題出されなきゃなんないの。バカか。

>>445
バカはお前。
お前には聞いてないし問題も出してない。
必要とされていない人間が出てくるな。
｢さて問題です｣などとは一言も言ってない。
お前のような糞がいるから｢夏ですね｣と書き込むやつが増える。
夏休みならデートでも行ってこい。

>>446
相手いないし(´･ω･`)

>>445　>>446

(･∀･)

な……………ね

>>446
> ｢さて問題です｣などとは一言も言ってない。
言い忘れるなよ。ｳﾞｫｹが

夏ですね

　　はい、皆さんご一緒に・・

夏ですね。

　夏ですね。　　　　ﾂﾏﾝﾈ

>>444
ﾃﾞﾑﾊﾟを触らずまともな質問者に回答を・・
というスレだったので質問しないでください。。

じゃぁ空気入れ替えage

俺にも夏休みをくれ

だめ！

じゃぁ空気戻しsage

>>446
> お前のような糞がいるから｢夏ですね｣と書き込むやつが増える。
自分が言われて悔しかった言葉を人に言えば効果があると思ってるんだろうね。

>>457
＞言われて〜

それはお前だろう。


もうこの辺で次ﾄﾞｿﾞｰ

ソースいじれない理由をちゃんと説明しとけば荒れなかったのに

答えてやるから3分以内に質問しろ。

>>460
お前空しいな

>>461
http://iboard3.to/GAZOimage/200407/a81638_589_svfzx
http://massarmasa.s6.x-beat.com/cgi-bin/img-box/img20040719192916.jpg
http://f-ss.org/bbs3/img-box/img20040726031920.jpg
http://nirvana.s26.xrea.com/cgi-bin/upload/source/up0355.jpg
http://f-ss.org/bbs3/img-box/img20040715025043.jpg
http://nirvana.s26.xrea.com/cgi-bin/upload/source/up0355.jpg
http://pukapuka.s1.x-beat.com/img-box/img20040725004211.jpg

>>462はグロいチンコ写真

>>462
グロ画像をあげて感情表現か・・・・・

>>460
3分以上経っちゃったけど、いいかな。
漏れ、残業で今から帰るんだけど、
晩飯、何にしたらいい？

深夜だけど、胃腸の具合もいいし、
ガッツリ食いたいです。

味噌カツ醤油煮込み炒め焼きそば

どんどん460が哀れになっていく・・・・

相手してくれるお馬鹿さんがどんどん増えてて
むしろ喜んでいると思うが

　夏ですねぇ

background:url(img/hoge.gif) repeat-y center center fixed;
こういう一括指定と
background-image:url(img/hoge.gif);
...
のような個別指定？がありますが、これは何のためでしょうか？一括してしか効かない、または個別指定でしか効かないブラウザがあるのですか？
borderの場合は個別指定でないと、できないことがありますが、backgrounfに関しては一括指定と個別指定で
できることが同じだと思うんですが、どういうことなのかエロイ人いましたら教えてください。

どちらが推奨かもお願いします。

ほんとあつがなついですね

>>470
1.手打ちでCSS書く人の簡単の為。
2.伝送量を減らしたい人の為。

background: white;
が
background-color: white;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;

と等価なわけなので
手打ちで書く人にとっては楽チンでしょう。
伝送量も約100バイト節約されます。

どっちが推奨かは好みの問題でしかないですね。

#一括指定は、省略値は初期値にリセットされるのが正しいという点を
間違えて覚えるとハマるので注意。
ブラウザによってはリセットしないので、一括指定を使う場合、省略しない方が吉。

質問です。
ウィンドの見える位置の一番下の方に画像を置きたいんですけど、CSSだとどうすれば出来ますか？

position:fixed; bottom:0;
但しWinIEは未対応なので他の工夫が要る。

またIEか

>473
背景画像だったら
body {background:transparent url(画像のパス) no-repeat fixed bottom;}
とでもやればIEでもイケル

しかしwinはどうにもなんねーなー
ブラウザーくらいまともにつくれんのか・・・

Win使わなければいいじゃん。
それにWinじゃなく、IEだろ？

WIN != Windows

なら

しかしMSはどうにもなんねーなー
ブラウザーくらいまともにつくれんのか・・・

じゃね？

>>480
相手は小学生だ。細かいこと言いなさんな。

しかしIE6を無視できないのが辛いところで

どうもありがとうございます。無事出来ました。
画像を置くだけだったのでwinでも無事出来ました。

質問です。
背景いっぱいに写真などの画像を指定して余白ができないようにしたいのですが
1024×768の画像を用意しても、最近はそれより大きい画面で閲覧している方も
多いのでどうしても余白が出来てしまうと思います。
どの大きさの画面でも余白ができないように指定する方法はありますか？

>>472
エロイですね！

>#一括指定は、省略値は初期値にリセットされるのが正しいという点を
これ重要なことですね。これが一括と個別の大きな違いですね＾＾

ものすごくわかりやすかったです！エロイ！

画像を上手く加工してrepeatさせりゃいいんじゃん

>486は
>484ね

>>484
img{width:100%: height:100%}

>>484
既出

>>488
ハァ？こいつ馬鹿

>>490
>>1

質問です。
widthで幅を指定したdiv要素の中に、
URLを表記しているのですが、
そうしますとURLのせいで指定した幅を押し広げてしまいます。
これはバグでしょうかね？
良い回避策などありましたらご教授下さい。

ギリシャ語やキリル語のフォントを指定するにはどうしたらいいんでしょうか？

font-family:ＭＳ Ｐゴシック;
↑と書くと日本語の部分は指定したフォントになるんですが、ギリシャ語とキリル語は
そのまま（デフォルト）です。

要は、ＡＡをずれないように表示したいんですが・・・

>>492
<span style="word-break:break-all;">http://www.qawsedrftgyhujikolp.com/くぁｗせｄｒｆｔｇｙふじこｌ.html</span>
↑私はこんな感じにしてます。

あ、ごめんspanじゃないや。divとかtdとかブロック要素ね。スマン！

>>493
ブラウザはなんですか?
IE5.5/6 ならモナ板のトップなどに対処法があるのでそっちを見てください。
閲覧者側での対処が必要ということです。
CSSだけではたぶん無理。

>>494-495
おお、なるほど！助かりました。
ありがとうございました。

あ、でもこれって今のところIE独自でしか効かないのか。
う〜む。。やっぱり適当に改行するしか方法ないのかな。

>>496
IE6です。
結論としてCSSだけじゃ無理なんですね(´･ω･`)ｼｮﾎﾞｰﾝ

不便ですねぇ・・・

classとidはどう違うのですか？
どう使い分ければいいのでしょうか？

>>486
空とか一色ではない画像を全面に表示させたいのです…。
>>488
background-position: 100% 100%;
だと単に右下に固定になってしまいますよね。
>>489
すみません。
さんざん探したのですが背景に関わるCSSは画像をリピートさせるもの、
左上〜右下・中央に固定するものと簡略化タグしか書いていないところがほとんどで…。
探し方が良くないのでしょうか。

>>493
font-family : "ＭＳ Ｐゴシック";

…まさか囲み忘れじゃないよね。

<div class=test1>テスト１</div>
<div class=test2>テスト２</div>
div{
background-color:#ccc;
}
div.test1{
text-align:center;
}
とした場合はdiv.test1にも背景色があるのが仕様書通りの解釈だと思いますが、
div.test1に背景色がつかない、何故かdiv.test1のセレクタが後から出た時点で
以前のdiv全体に対する指定が反映されず初期化されてしまうようなブラウザってありますか？

一応n6以上ie5以上で問題なければいいんですが。

>>501
1枚でどんなウィンドウサイズでも画面いっぱいにしたいなら、
物凄く大きな画像を用意するしかないのでは？

もしかしてウィンドウサイズに応じて伸び縮みする画像を
望まれているのでしょうか？
それは現時点では無理かと思います。

でかい画像用意したとこで内容はどうなるのよ？
でかい画面使ってても、画面いっぱいにウィンドウ表示するとは思えんが

>>501
だから>>486が言っているように、繋ぎ目部分をPhotoshopなどで加工して
Repeatしても自然な繋ぎ目になるようにすればいいだろう。
具体的な手ほどきは割愛。

<div id="news">
<p class="news">川口がものすごい活躍をして日本を救いました</p>
</div>
これに対して
p.news{
padding:100px;
color:red;
}
#news p{
padding-bootom:0px;
color:blue;
}
の順番でブラウザに読ませた場合、どちらが優先順位が高いんですか？一応ie6標準準拠モードでは
この二つのセレクタは同じ優先順位と解釈してるっぽく、後から読み込んだ方を優先順位が高いものと
してレンダリングしますが。

IDからの文脈セレクタとクラス名を使ったセレクタが同じ優先順位というのが正しいのか良くわからないですが
エロイ人いませんか？

ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity
>507　classセレクタよりも、idセレクタの方が詳細度が高いことになっている。
常にidセレクタの方を優先するべきだろう。
ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#at-important-rule
最重要規則を用いれば、また変わってくるだろうとは思うのだが。

>>508
エロイですね！
いいサイトを紹介してくださってありがとうございます！

じっくり読んでみます！

>>508
結構わかりやすい計算方法なんですね。
classのみのセレクタはひっくり返ってもIDセレクタを含むセレクタにはかなわないってことですね。

ところで仕様は理解しましたが、実際のブラウザはこの辺を仕様とおりに実装してるのでしょうか？
セレクタの詳細度の算出方法が仕様と食い違っている有名なブラウザはありますでしょうか？
NN4とかIE4未満はCSSを適用させないようにしてるので、どんな実装でもかまわないですが。

>>504-506
＞ウィンドウサイズに応じて伸び縮みする画像
そうです、どこかでそういう指定をＣＳＳでできるという書き込みを見たもので、
探していたんですが…。現状では無理ですか。
どうも丁寧なレス有難うございました。

>>510
自分が表示確認できないブラウザがあったとしてどうするつもり？

とりあえずCSS完成してみれば
クロスブラウザなんかその後の話だっつーの

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
|　　　　　　　　見出し　　　 　　　　　｜　　　　　　　　　――――――見出し――――――
|文章文章文章文章文章文章文章 |　　　　　　　　　　|文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 |　　　　　　　　　　|文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 |　　　　　　　　　　|文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 |　　　　　　　　　　|文章文章文章文章文章文章文章 |
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣　　　　　　　　　　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
分かりにくいですが、角はそれぞれ繋がっていると思ってください
左のAAのようにborder-topを上ではなく、
右のAA のように見出しの上下真ん中に持っていくことは可能でしょうか？

やってみたのかい？　　borderでは出来ないよ。

>>513
見出しにrelativeで負の値でも付けてあげたらよいかと。

>borderでは出来ないよ。
となると？ヒントだけでも

やろうと思いましたが、アイディアが浮かばなかったので…

>>515
やってみます

<div>
<h3>見出し</h3>
<p>文章文章文章文章文章文章文章
文章文章文章文章文章文章文章</p>
</div>
スタイルシート
div{
　　width:200px;
　　border:solid 1px;
}
h3{
　　position:relative;
　　top:-0.5em;
　　text-align:center;
}

↑みたいな感じでやってみたのですが、opera、NNは駄目でした
IEでは形は出来たのですが、borderと見出し部分が重なってしまいました
他にいいアイディアあればよろしくお願いします

見出しのwidthを文字列ぴったりに指定。
そして背景色を指定。

>opera、NNは駄目でした
どう駄目だったか書かないとワカンネよ。

h1 {
font-size: 100%;
margin: 0px;
padding: 0px;
position: relative;
top: -0.5em;
left: 75px;
width: 48px;
background: white;
}
div {
border: 1px solid black;
width: 200px
}
<div class="box"><h1>見出し</h1>あああああああああああいいいいいいいいいいいううううううううううう</div>

出た！文字サイズピクセル固定！！出た！固定！！
バカ丸出し〜ｗ

オマイ便秘だろ？

>>521
class="box"の内容も書きなよ。

>>512
クロスブラウザってなんですか？
とりあえず詳細度の実装があまりよくなければ、問題ない単純セレクタのみで工夫しようかなと思います。

少しは自分で調べたらどうだ？

>>521
まぁ…それはかなり力技だが（^^;）

>>513
OpreaやNNでは単位概念が微妙に異なるので em　系ではズレる。
このズレをなんとかするには>>521のピクセル指定もやむを得ないのでは。

あと見出しにかかるline-heightとmargin/padding、
DIV（box）内にある（かもしれない）paddingの値をうまくとってみて。

自分なりにいろいろやってみましたが見出しのセンタリングがうまくいきません
>>521のようなピクセル指定はあまりしたくないので
センタリングにはこだわらないようにします
いろいろありがとうございました

>528
>521の見出しをspanで括って以下でどう？
* {margin:0px;padding:0px;}
div {
margin-top:5em;
border-top:2px solid #ccc;
}
h1 {
text-align:center;
margin-top:-0.5em;
}
h1 span {
padding:0px 0.5em;
background:#fff;
}

divのmargin-topやspanのpadding等は適宜

普通のimgは指定ボーダーを、リンクが貼られてるimgにはaのボーダーを表示されたいがうまくいかん・・・
<img><a><img></a>
こんな構造のHTMLがあるとして
img { border: 1px solid black;}
a img { border-style: none;}
とするとa img なimg要素にはボーダーが表示されなくなる
逆に img { border: 1px solid black;} だけだとアンカーのボーダーが表示されないのだが
うまい振り分け方法ありますかね？
できればa img な部分は圧倒的に少ないのでクラスで振り分けるならa img のimg要素だけにクラスを付けたいのですが

>>529
バグなのか家の環境でそれやってみたら
表示は期待通りなんだけど
ウインドウサイズをかえるとdivのマージンが表示されなくなる。

htmlを学ぶのが先です>>530

ttp://openlab.ring.gr.jp/k16/htmllint/htmllint.html
ttp://validator.w3.org/
ttp://kanzaki.com/docs/htminfo.html

このスレなら構造って言えばある程度略したって伝わると思ったんだけどね

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head><title>test</title>
<style type="text/css">
img { border: 1px solid black;}
</style>
</head><body>
<p><img src="test.jpg"></p>
<p><a href="#"><img src="test.jpg"></a></p>
</body></html>

上のHTML2つ目のimgにはボーダーを表示しないでアンカーによるボーダーが表示されるようにしたいのだが

>>533
悪いけど言いたいことがよく分からない。
多分アンカー張られた画像にマウスが重なったらボーダーを出したいと解釈した。
違ったら説明よろ。
img { border:none }
a:link { border:none }
a:visited { border:none }
a:hover { border:1px solid black }

リンクになっている IMG とただの IMG とに、差異を設けたいってことじゃないでしょうか。

a:link img { border : 1px solid #00f ; }
（ｒｙ

仮定さえ正しければ、子孫セレクタで解決……かな。

cf．http://www.parkcity.ne.jp/~chaichan/src/style.htm#shison

>>535
なるほど。でもそれなら何も設定しなくても
リンク画像だけにボーダー表示されるのにな。
そんなに黒線がいいのか。

んとちょっと違うです＾＾；
img { border: 1px solid black;}　があると、リンクを張った画像にはアンカーによるボーダーよりCSSによるボーダーが優先されるので
これをアンカー側ののボーダーが表示されるようにしたいわけです
しかしながらただのimg（リンクを貼られてない画像）にはimg { border: 1px solid black;}を適用させたいのです

>>535
その通りです
が、アンカーのボーダーのスタイルはCSSの保守性の観点から1度の定義だけで済ませたいので、できれば子孫セレクタなどで再定義はしたくないのです・・・
特に色やボーダーの太さなど視覚的な値は
例えば
a:link {border-color: red}
がすでに書かれてるのに
a:link img {border-color: red}
とは書きたくないのですが＾＾；

例えば
a:link {border-color: red}
がすでに書かれてるのに

a:link {color: red}
ですね。ゴメンなさい

んー、結構ややこしいな
ただの画像にクラス付けて
img.foo { border: 1px solid black;}
なんてやればOKじゃね？
まぁ「ただの画像」いちいちクラスってのも個人的には嫌いだが

複数セレクタとかどうでしょうか。
（でも、両者間でスタイルの指定が違ったらそれでダメだしなぁ……。）

cf．http://www.parkcity.ne.jp/~chaichan/src/style.htm#fuku

img { border:1px solid black; }
a img { boder:none; }

a { border:1px solid red; }

じゃいかんのかいな…。

>>537 のは、border-color:red; が2箇所にわかれるのがいやというなら、
a:link, a:link img { border-color:red; } でええんとちゃいますのん。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
BODY {background-color:#EFEFEF;}
DIV {width:50%;border:1px solid black;}
UL LI {list-style:circle url() outside;display:inline;border-bottom:2px dashed red;border-left:2px dashed red; background-color:#EEEEEE;}
</style></head><body>
<div>
IEのみで見られるバグ?NNで
<ul>
<li>LIに下線をつけて左マージンを指定。</li>
<li>背景色を指定すると、LIが上下に重なったところ(下行に送られたところ)の上の行のLIの下線が表示されない。</li>
</ul>
</div></body></html>

>>541
＞a { border:1px solid red; }
なるほど、テキストのリンクな場合もborderで囲む気ですか(・∀・)

>>542
スレ違い
CSS/DHTMLバグ辞典スレッド 第４版
http://pc5.2ch.net/test/read.cgi/hp/1078463560/

IEデフォルト見たいに既読ページは色分けしたいならこうとか。
img { border:1px solid black }
a img {border:none }
a:link { border:3px solid blue }
a:visited { border:3px solid purple}

>>544
すまん。逝って来る。

ああ>>542のは>>531のか。

>>543
いや、だってあーた、テキストリンクはボーダーつけないなんて言ってないじゃん。(´･ω･｀)

<a href="hogehoge">テキストリンク</a>
<a href="hoehoge" class="image" title="画像リンク"><img src="mogemoge" alt="もげもげ"></a>
<img src="hanya-n" alt="リンクなし画像">

a { border:none; text-decoratin:underline; }

a.image { border:1px solid red; }

img { border:1px solid black; }
a img { border:none; }

こうでもするしかないのでは?
「これこれを子要素にもつ親要素」のようなセレクタ構文でもでっちあげない限り、
class抜きでは無理でしょう。

めんどくせｗ
ここまでしてやることか。

みなさん色々どうもです
ただ単にリンクはリンクらしく、ただの画像にはボーダーをってやりたいだけなんですけどね＾＾；

いちおう*仕様上*解決はしました
a img { border-color: inherit}
で親のaのcolorを継承するのでFireFoxでは希望どおりの動作をします
ただあくまで*仕様上*
ええ、IEがinheritに対応してません＿|￣|○

>>548
お前誰よ。

お前ら難しく考えすぎ
>>533の例文なら、
p > img {border:1px solid black}

>>551
自己レス。勘違いだったわ。>>548、正直スマンかった。

>>551
それIE対応してねぇよ……。

今のとこ>>539しかうまい解決法は無いみたいですね・・・
ありがとうございました

span img { border:1px solid black }

<p><span><img src="1.jpg"></span></p>
<p><a href="#"><img src="1.jpg"></a></p>

>537の
>a:link {color: red} がすでに書かれてるのに
> a:link img {border-color: red} とは書きたくない
この考え方自体がおかしいんじゃね？
aにつけたcolorとimgのborder-colorは違うもんでない？

a {color:#f00;}
img { border:2px solid #000; }
a img {border:2px solid #0f0;}
これでテキストリンクは赤、ただの画像は黒ボーダー、
リンク画像は緑ボーダーにならないか？

いやただの素imgにはborder設定して
aとaの入れ子imgにはborder設定なしでデフォルト設定にしておきたい。
さらに素imgは沢山あるので、できれば一つ一つclass設定記述はしたくない。
さぁどうしる、という問いかと。

結論、>>551に対応してないIEが糞。

>>555
spanで囲うのはクラス付けるのと等価ではありますね

>>556
「リンクはリンクらしく」つまりページ全体でリンクの見栄えを統一したいってのがあって
できれば画像リンクもアンカーのボーダー表示で済ませたいってことです
ところが画像にボーダーが設定されてる場合、アンカーによるボーダーよりも優先されてしまうというのがネックになってたのです
>a:link {color: red} がすでに書かれてるのに
> a:link img {border-color: red} とは書きたくない
ってのは見栄えに関する red とい値が2箇所に書かれるので保守性が良くないからやだなってことです
さらに付け加えると
a:hover などが設定される場合↑の方法で見た目を統一しようと
a:hover や a img:hover というセレクタを使ってもIEが対応してないという問題も孕んでますので・・・

＞a:hover や a img:hover というセレクタを
a:hover img や a img:hover というセレクタを
ですね、すいません

>>557
まさにそうです

レスありがとうございました。
body {margin : 0;}を追加したら出来ました。

それと、背景色が出なかった方の問題ですが、
cssファイルの方の一番上にあった(cssref.css）ってのを消したらできるようになりました。
ちなみに(cssref.css）ってのはどっかのサイトからのコピペだったと思います。

>559
ちと反則かもしれんが、リンクの色をa一括で指定したいというのなら
img {padding:2px;background:#000;}
a img {padding:0px;}
でどうかな？

>>562
なるほど〜
うまいですね。これでいかせてもらいます

しかしIEで内容が画像だけのアンカーでhoverが効かないってのはバグですかね・・・

とりあえず皆様どうもでした

a:hover img はなぜかクリックした時に反映されるようになった。
下記だとIEでもうまくいったよ。
img { border:1px solid black }
a img {border:none }
a:link img { border:3px solid blue }
a:visited img { border:3px solid purple }

<p><img src="1.jpg"></p>
<p><a href="hoge.html"><img src="1.jpg" class="hoge"></a></p>
<a href="hoge.html">テキストリンク</a>

OPERAで、フォームのinputボタンの立体感とかを無くすことは出来ませんか？
IEで見えるような形にしたいですが。

>563
IEのバグはこのへんかな？
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b077.html
疑似クラスまわりはやっかいかもね

>>565
input {
background:gray;
border:1px solid black;
}
<input type="submit" value="ほげらっちょ">

とか。
好きな画像貼り付けることもできるよ。

>>567
ありがとうございます。
border-bottomにだけ、ラインを入れるという指定はOPERAでは無理なのでしょうか？

border-topを消すことは出来るのですが、
border-right、border-leftの指定で反映されません。

今までtableでやっていたレイアウトをfloatに変えてやろうと思っているのですが、
どうしても上手くいきません。どなたか教えていただけないでしょうか。
３段落構成で、２段落目を{float:left}と{float:right}の２つに別けたいんです。
３段落全てのwidth指定を100%にした時は上手くレイアウトできるのですが、
70%にするとレイアウトが崩れます。
どのように記述すれば崩れないで済むでしょうか。

教えられる人がいるのでしょうか？

>>571さん
不可能、ということなんでしょうか？

CSSで縦にのばしまくっても
横にのばしまくっても素敵なデザインって実現可能ですか？

あげてる奴は確実に夏まっさかり

>>570
ソース出してくれないと、指示もできない。

>>568-569　何をどうやったらどう失敗したのか、他人にもわかる形で書いて下さい。

>>565
input {
background:gray;
border-top:none;
border-left:none;
border-right:none;
border-bottom:1px solid red;
}
一応こんな感じでできるけど、ＩＥと同じ感じは無理そうだね。
どうしてもＩＥの見た目がいいなら、ＩＥのボタンをスクリーンショットとって画像にして
ボタンに張るのがいいかも。

>>573　質問の意味がわかりません。通じる言葉に直してね。

>>565
すまん、できた。
かなり反則だけど許してくれ。
border-top:0px solid;
border-left:0px solid;
border-right:0px solid;
border-bottom:5px solid black;
これでＩＥでもオペラでも下線だけ出る。
borderの値をnoneにするとオペラで凸ってなるから、上の様にしてくれ。

文字の大きさを固定するのって普通はやらないこと？
90%とかのがいいんですか？

>>580
まぁ固定は好ましくないと言われてる。
ただ一般個人サイトの訪問者で一番多いのがＩＥ、文字サイズ中、1024×768って環境だろうから
その環境でちゃんと見えるんであれば、自己責任でやってもいいんでないかな。
俺はやらんけども。

すいません、テーブルやdivタグ内の背景を多少色を付けて透明にして、bodyの背景を透かせたいんですが、
どうやれば出来るんでしょうか？

□■□■
■□■□
□■□■
■□■□
上みたいな１ピクセルごとに透過の入ったＧＩＦファイルを背景にしる。

>>582　ＣＳＳでやることではありません。

いやＩＥの独自スタイルシートで半透明フィルタがある。
使ってる奴はいまだに見たことないが。

ttp://strayshape.com/nadiel/
このサイトみたいにしたいんですが。

>>586
ソース見ろ

>>586
これだよ。
filter: Alpha(opacity=80) background-color #000000
てかこれ使ってるやつ初めて見た……。

フィルターですか、以前私も使ったんですが、私が使った時は文字までボケて見難くなってしまったんですが。
また、グラデーションがかかったみたいにボケてたんですが。どこか違うんですかね？

何つーか、お勧めできないマークアップの典型例な訳だが。
Mozillaだったら-moz-opacityで出来るな。もちろん非推奨だけど。

スタイルシートはマークアップ言語じゃないわけだが。

やっぱりフィルターを使わないと無理なんですかね？
出来ればフィルターは使いたくないんですが。

>>592
だから>>583やってみろって。

>>５９３
すいません、まだ勉強し始めて間もないので、５８３のやり方がわからないんですが。

>>586
>>583が言ってるのを実際やっているサイトの例
ttp://homepage.mac.com/bluesofbondi/


>>ALL
スレ違いすマソ

>>586
αチャンネルを指定したpng画像をテーブルやdivタグ内の背景に敷けば良いんじゃ無い。
対応できないブラウザは、ほぼ「IE」だけでしょ？（笑

>>579
おかげさまで無事出来ました。
ありがとうございます。

>>596
またIEか・・・
IEを使う人はどこに魅力と利点があってIEを使うのだろうか。
IEならどのページでも見れるといっても、
web制作者が泥沼の努力の玉ものってのを糞MSは知っているのだろうか。

>598
Windows付録のブラウザがIEだからだろ
IE以外にブラウザがあることを知らない人も多い

>>599
そうそう。そういう人をターゲットにせざるを得ない仕事って多いしね。
確かに困るけど、現状を見つめないとビジネスは回せない。

そこが数前に問題になった部分なんだな。
MSは独自企画のIEでもIEユーザーが多いので、そのうち他のブラウザーも
IE企画に参入してくるだろうと、にらんでいるのだろうが、
現実はIE離れしていってることに気づいていない情けない会社。
そう。それがMS

>598
制作者側が無理に対応しないで、IE批判の啓蒙することも必要なんかね
自分はMacIEで見れないページが増えたなーと感じた頃に
Netscapeに乗り換えたんだが、そういう経験がユーザー側にも必要かと

まぁIE議論は以下で
ttp://pc5.2ch.net/test/read.cgi/hp/1052099937/

一度画面を切り替え（タブを切り替えるか、一度最小化して戻すかなど）ないと
ボックスの枠（破線）が表示されないんですが、ブラウザとかのバグですか？
それともなにかのミスですか？
.main{
position:absolute;
top:82px;
width:100%;
height:450px;
z-index:0;
clear:both;
border-top:dashed;
border-bottom:dashed;
border-width:1px;
border-color:#ffffff;
background-image:url("http://sound.jp/aroe/img/purin.gif");
background-repeat:no-repeat;
background-position:right bottom;
background-color:white;
}
こんな感じです。必要なら全部出します。
XP、Donut P（IE6.0）です。

しまった…そのままコピペしちった…

>>604
ｳﾋﾋ

自己責任。却下。に一票。

hp：Web制作管理［レス削除］
http://qb5.2ch.net/test/read.cgi/saku/1033061518/137

うわぁ・・・痛いサイトですね

140 名前：削除白河さやか ★　[sage]　投稿日：04/08/01 23:41 ID:???
>>137=139さん
８． URL表記・リンクのどれに該当するのでしょう？
大まかな項目だけじゃなくて、その下にある項目まで引用してくださいね。
例えば、エロ画像リンクとか宣伝とか。
どの項目にも該当しないのでしたら、削除対象外ですよー。

http://sound.jp/aroe/ を HTML4.01 Transitional としてチェックしました。
99個のエラーがありました。このHTMLは -154点です。タグが 17種類 93組使われています。
文字コードは Shift JIS のようです。

>>603
ボーダーが消えるのは確かIEのバグ。まあおまいの場合は本当にIEのバグで消えてるのかしらんがな。ゴミソース書くやつがわるい。
とりあえず
IE ボーダー 消える
とかでぐぐれ。確かfloat,position:relative辺りが関係して条件がそろうと消える。

IE 6.0 です．

CSS で

body{
background-color: #000000;
line-height: 160%;
margin: 1.0em 10% 1.0em 10%;
}

のように書いて適用しても効果がありません．

p, h1, h2 table の要素はちゃんと効果があります．

body だけなぜかまったくきかないんです．
IE のバグってこともなさそうだし…

何か心あたりがある人はいますか？

>>611
html{
background-color: #fff;
}

こういうことかな。

上げちゃった...。すみません。

>>612
htmlにはスタイル指定するべきではないと思うが。

まぁともかく基本的にbodyの背景は窓全体に塗られるから

924 名前： Name_Not_Found [sage] 投稿日： 04/08/01 21:14 ID:???
>>919
ieで見た限り <em class="n">高知県中村市</em>
　これはロボットでスパムと認定されるよ。

HP評価スレッドにてこのような書き込みを見つけました。
依頼者ではないのですが、この理由を教えていただきたいです。
class名はどのようにつけるのが正しいのでしょうか？

スレ違いすまそ。書かずにいられなかったんで。スルーしてください

自分の好きなように付けるのが正しいです

>>617は私ではないです。
>>618
それでいいんでしょうかねぇ…
何あちらこちらでいろいろ言われているのを目にするのですが。

このスレに書いてあることは一部フィクションです。<em>ご利用は自己責任で。</em>

em{
color: #ff0000;
font-style: normal;
}

これでスパムなら、世の中のem要素使っているドキュメントの半分くらいはスパムだ罠。

>>620
cssが使えればem要素使わない。

そうですか

>>616
書かれたサイトを見たのかい？
emで太字強調表示している部分と <em class="n">で消してる部分がある。
これは明らかにロボット対策。現行ではスパムと判断されてるんじゃない？

<INPUT type=TEXT>の入力窓の大きさを指定したいんだけど
INPUT {width:130}
のように指定するとボタンからなにから全部変わってしまうので
どうしたらいいでしょうか

今はclass=textなどと付加して一時しのぎしてますが

>624
input[type="text"]{
width:130em
}
IEとかｼﾗﾈｰﾖ

IE6をムシしないでくれ〜

expressionでも使っとけ

IEなんてのはweb制作の足枷だからな。
IEがなければweb制作者はもっと幅広いデザインが出来るのに。
IE無くなってほしい。と言うか。MSはまともにブラウザー作れないのか？

せめてIEのシェアが3％程度だったらなあ・・

>>621
頭の悪さを晒すのも程々に。
冗談は顔だけに。

Web製作はMacが常識だっつーのｗｗｗｗ

>>631
それは我々商業制作者だけの話だよ。
この板の多くの人たちは一般の人なので。
ね。

Macで作ってwinで見ると、色文字画像のレンダリングの汚さにげっそり、するからね。

企業のページでテキストの部分を画像で作ってるサイトが多いが。
あれは、制作者の意図したデザインにwinでは見えないのでやむなしに画像にしてる。
winももう少し見た目にも気を使わないとな。
しかしwinは文字は汚いはウイルス満タンだは、いいところが1つもないですな。

>>614
htmlに指定しないと、スクロールバーとかきちんと反映されないはず。

>>633
漏れもマクをベースに作業してはいるが、
そのようなキモイ発言は慎んだ方が良いと思う。



荒れる前に次の質問ﾄﾞｿﾞｰ

>>623
スパム判定されないだろ。ロボはCSSを読まないんだから、EMの羅列には反応するが
EMにどんなクラス名があっても関係ない。

フォントサイズ固定の文字のサイズ固定を解除するだけのCSSってできますでしょうか

野原の松の林の陰の…

クサムラの中で、ﾊｧﾊｧした。

>>636
そのサイトまさに >EMの羅列 で、class="n"を使って見た目を制御している。

まぁCSSは見た目を制御するものだからな

IE糞だと言わずに、
IEで表示できるなら他でも大丈夫という認識がよいのでは？

よーし、パパこれから"@i"で済ますぞー

　寝る！！

番号つきリストにCSSで横幅設定したときに、
それまで1.2.3.〜となっていたものが

1.あいうえお
1.かきくけこ
　さしすせそ
1.たちつてと
（以下略・・・）

となるのはなぜ？

また、リストの中で改行していたときに
1.かきくけこ
　さしすせそ
であったものが
　かきくけこ
1.さしすせそ
になっていることもあるのですが、
どちらかでも修正方法かヒントをいただければ嬉しいです。

ちなみに以下のような設定です。
OLなどに幅を設定するなどもためしてしてみましたが、
数字やリストマークが消えてしまうなど芳しい成果は得られませんでした。

LI{
width : 600px;
list-style-type : decimal;
list-style-position : inside;
}

BODYの幅設定が効かないのでLIに幅をつけようとしたのが
きっかけなのですが、いちおうDIVで囲んでやり過ごしています。
ほかに適切な方法はないものでしょうか？

>>646
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b070.html
および
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b153.html
と思われます。
前者については、li{vertical-align: top;}　でおそらく回避できます。
後者は上のページにある、div{display:list-item;}　に書き直す方法を試してはどうでしょうか。

>BODYの幅設定が効かないのでLIに幅をつけようとした
ulまたはolに幅つけてはダメなのですか？

>>642
IEでもちゃんと表示できるようにはしてまつが
IEが糞だという認識は変わりようがありませんでつ

世界のほとんどのPCはwindowsだっつーのにMacでWeb作ってデザイナー気取りの奴がアホ

でつまつ口調のヤツに何言われても説得力がねぇんだよな

元々頭の悪い奴なんだよ。

でつでつｗ

>>633
基地外マカーはウイルス作者に相手にされなくて、嫉妬してるんですね。
基地外マカーはそのユーザー数が少なくて、馬鹿高い金を払って購入するのに、
ウィンドウズは安価なハードウェアがあるのを嫉妬してるんですね。
基地外マカーはアップルコンピューターに吸い取られているのに、憤慨してるんですね。
(windowsも高いけどな。けど、ハードウェアが安いから問題ない。)
基地外マカーはデザイナーに多いと聞くけど、まさしく基地外ばかりですね。
基地外マカーはデザイナーに多いと聞くけど、基地外だからマカーなんですね。

基地外で悪いか？

悪い

>>653
マカーがうらやましーんですね。
自信があるならもっとゆったりしてろよ。
マック使いたくてしょうがないから無理なんだろーけど。

質問です。

CSS部：
div.section {　position: relative;　left; 5%;　width: 90%;}
div.sub_section1 {　position; relative;　width: 60%;}
div.sub_section2 {　position; relative　left; 60%;　width; 40%;}

HTML部：
<body>
　<div id="section">
　　<div id="sub_section1">
　　　〜〜〜
　　</div>
　　<div id="sub_section2">
　　　〜〜〜
　　</div>
　<div>
</body>

とした場合、IE6では、
sub_section1,2の幅はsectionに対しての60%,40%になり、
sectionを6：4にきれいに分割したレイアウトになるのですが、
Mozilla1.7(Mozilla系全部？)では、
sub_section1,2の幅はbodyに対しての60%,40%になり(？)、
sub_section1,2がsection内で重なり合ってしまいます。

どのようにCSSを記述すれば、Mozilla系でもIE6の様表示できるんでしょうか？
個人的には幅をピクセル等で絶対指定をするのは避けたいのですが・・・。

ｽﾐﾏｾﾝ訂正です。

CSS部：
#section {　position: relative;　left; 5%;　width: 90%;}
#sub_section1 {　position; relative;　width: 60%;}
#sub_section2 {　position; relative　left; 60%;　width; 40%;}

HTML部：
<body>
　<div id="section">
　　<div id="sub_section1">
　　　〜〜〜
　　</div>
　　<div id="sub_section2">
　　　〜〜〜
　　</div>
　</div>
</body>

です。

質問です

リンクテキストの下線を消したのですが、hoverの時だけ下線をあらわすように
するにはどうすればよいのでしょうか？お願いいたします。

>>659
a:hover {text-decoration:underline;}
これで出来ます。

>>660
ありがとうございました。勉強はじめたばかりです。難しいけどがんばります。

って言うか次からは>１読んでから質問してください

原因がわかりました。
どうやらIE6では、ブロック要素の幅はwidth指定値がそのまま適用されるのに対し、
Mozilla系では、ブロック要素の幅はwidth指定値+padding-left値+padding-right値+(他？)となっていた事が
原因だったようです。(既出？)

まぁ原因がわかった所で対策は思いつかないんですが_no
何かいい方法はないでしょうか・・・？

超既出。
FAQの一番初めに書いてある。

あ〜あ　鼻高々だったのに・・・・

・・・ですね_no

とりあえずFAQ熟読してきます。
ご迷惑おかけしました。

お前らは自分が井の中の蛙ってことを自覚してないよな

うん。自覚してない。

乞うご指導

body {
border-style:solid;
border-width:130px;
border-color:#??????
}
のborder部分に画像を表示したいのです。
何かよい方法は無いでしょうか。
さらに欲を言えば枠内側をラインで縁取りしたいのです。
おとなしくTBタグ使っとけって感じですか？

>>647様
教えていただいたdisplay:list-item;とvertical-align: top;で
数字と位置の問題は両方解決しました。本当にありがとうございます。
教えていただいたサイトをじっくり読んで精進いたします。

上記タグのない状態でOLとULに幅を設定した場合ですが、
OLにした場合はリスト自体が視認できなくなり（リストマークが消滅）
ULにした場合は、数字の位置は戻るものの、幅の設定も効きませんでした。
LIの場合は前述のとおり、リストマークが1.1.1.になりその段落の最下行に移動してしまいます。

これまではDIVに幅設定をしてやり過ごしていましたが、
教えていただいたCSSのおかげでこれからは快適にレイアウトできそうです♪

ちなみにDIVは取っ払って、
display:list-item;もCSSのLI項目に追加しました。

>>669
borderに画像は指定できない。
入れ子ボックスの外側ブロックにbackground-imageを指定した上で
paddingを細く取って、borderのごとく見せかけるとか。

>>671
>display:list-item;もCSSのLI項目に追加しました。
無意味なことしなさんな。
li要素は、指定しなくてももともとlist-itemだっての。

でつ　　　　　←スヌーピー

>>674
常識

IEなどでは、手打ちな人々の利便の為に
trueをt、falseをfと略記できる仕様なのは有名な話。
@iも@mも、同様に手打ちな人々のための略記法として用意された。
つまり、これはバグなどではなく仕様。

バグだ！と得意げに大はしゃぎしてる香具師はアホ丸出し。

>676
それはすごいねよかったよかった

>>676
そんなの知らなかった。


しかし知ったところでIE以外の互換性を無くしてしまう罠

ものすごい糞仕様じゃん、それって。エラーになるべき
ものはエラーにしないと。

それはどうかな。
まあ使う際には独自仕様だという事を念頭におけばいい。

利便性のためとかいっても、独自仕様だとかなんとか、
そういう余計なことをおぼえなければならないことを思うとぜんぜん利便性なし。
属性値のダブルクォートや、終了タグの省略についてもしかり。

>>625
ありがとうございます。 でも、IEでは使えませんでした。
これはIE以外のブラウザでの方言ですか？

>>682
> これはIE以外のブラウザでの方言ですか？
逆逆。IEが標準語を知らんのだ。

そうタイ、方言タイ！

IE　≒　どこに行っても関西弁でしゃべりまくる関西人
ということでよろしいか？

>>685
IE　≒　東京で使っている言葉が標準語と勘違いしている香具師
の方が、近くね?

>>685
それだと他のブラウザが郷土愛のない薄っぺらなものみたいに聞こえるじゃないか。

IE準拠でサイト作ってる香具師　＝　東京で使っている言葉が標準語と勘違いしている香具師

∩(　´Α｀)＜　先生、質問です。
display要素って、色々ありますが、いったいどんな時に使えばいいんでしょうか。

W3C信者　≒　東京で使っている言葉が標準語と勘違いしている香具師

>>689
http://www.htmq.com/style/display.shtml

>>691
す・・・・すげぇ！！！まさかそんなに便利なものだったなんて････

それを知らずに今まで来ていた自分がはずかしいです orz

>689
display要素ってなんですか？

>690
お前だけ例えがおかしい。

>>693
プロパティですね。すんません。

>>693
信者ｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━!!!!

>>695=>>690
いやいや落ち着きたまいよ
「ブラウザ」の話をしてるのに、「ブラウザ」側を書き換えた例えを出すのはどう考えてもイカレてるでしょ。

釣られてますよ

menuを｜A｜B｜C｜D｜E｜ という風に<ul><li>で表示したいと思うんですけど、
ねこめしにっきのサイトがマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいﾆﾗﾒｯｺしてて吐き気してきた・・・・ｱｰｷﾓ。

>>698
>>691

>698
何故そこでありみか氏のサイトを引っ張ってきて貶すのかよくわからんが
li{
display:inline
}
とでもしとけ

>>700
>>7のQ8みたいな感じで、floatで出来るんじゃないんですか？

つーか、俺が激しく池沼だったわけだが。orz
float+display:inlineだろーがと。ｽﾚ汚しすんません。

　なんでこう馬鹿ばっかりなんだろうなぁ・・・

　　　　おまえもなーは聞き飽きたぞ。

>702
displayを使った上でfloatさせる意図がﾜｶﾗﾝ

浮動してるほうが何かかっこいいじゃん。

山の浮動

>>698
menuを｜A｜B｜C｜D｜E｜ という風に<ul><li>で表示する方法はわかるんですけど、
>>698の書き込みがマジ生理的に受け付けられないんで、
どうやればいいのか教えたくないんです。
2時間以上ﾆﾗﾒｯｺしてマジで吐けばいいのに・・・・ｱｰｷﾓ。

昼飯吉野家の豚丼にしようと思うんですけど、
吉野家の看板のオレンジががマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいﾆﾗﾒｯｺしてて吐き気してきた・・・・ｱｰｷﾓ。

>>708に2時間ぐらいレスしようと思うんですけど、
ﾆﾗﾒｯｺがマジ生理的に受け付けられないんで、
オレンジががの「が」が一個多いので吐き気してきた・・・・ｱｰｷﾓ。

うわ！　アホのスクツだ。

オナニーしようと思うんですけど、
余った皮がマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいﾆﾗﾒｯｺしてて吐き気してきた・・・・ｱｰｷﾓ。

アホのスクツだ。を｜アホ｜のス｜クツ｜だ。｜という風に<ul><li>で表示したいと思うんですけど、
うわ！がマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいﾆﾗﾒｯｺしてて吐き気してきた・・・・ｱｰｷﾓ。

夏場に食べるアンキモはまずいね。







次の質問ﾄﾞｿﾞｰ

結局、どうしようもないということですか？
IEのシェアは95%ほどと聞いたので
IEでなんとしてもうまくやりたかったのですが

>714
IEでやりたきゃclass指定してやるしかない

>>624
みんながそんなことばっか言ってるから、
いつまで経っても間違った言葉でしゃべらなければイカンくなる。
あなたも、まず、うぃんどうずとIEを離れてみまそー。
少しずつでもただしーほうへ変えるために。

ただしー言葉を礼儀正しくしゃべれるなら、べつにうぃんどうずとIEでもいーんじゃけどね。

まーおいらは使わんけどね。でんでん美しくないんで。

んぢゃ。

くだらない質問で申し訳ないのですが、<p></p>と次の<p></p>の間にデフォルトで
シングルスペース（1行空行）が入るのですが、これを<br>と同じように、<p>内の
行間と同じだけの間隔に段落間を設定するには、どんなCSSの記述にすればよいの
でしょうか？

>>717
margin:0

>>718
おぉぉぉ、うまくいきました。ありがとう。
あれだけ悩んだのに。。。。盲点でした。

遅くなりましたが
>>672よ、どうもありがとう
入れ子を食わず嫌いしてたけど初体験してみますよ

>>717
ブラウザのデフォルトスタイルはできるだけ殺しておいたほうが楽だよ。

* {
margin: 0; padding: 0;
}

といった感じ。font-sizeやfont-weightなんかもやったほうがいいかも。

3カラムレイアウトでそれぞれのカラムの高さを
カラムの中で一番高いカラムの高さに合わせたい
のですがどのようにすれば良いのでしょうか。

３つのカラムの高さを常に同じにしておきたいのです。

フロートで１カラムずつ回り込ませるだけで同じ高さになると思よ。

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

普通にやると

http://www.skipup.com/~l-_-l/web/

こんな感じでカラムごとの高さが
内容の量によって変わってしまいませんか？

ここの例でいうと右カラムの高さに
左カラムの高さを合わせたいのです
（黄色の背景を下まで伸ばしたい）。

ああ、そういうことか。
それはカラムにheightを設定してやればいいよ。
でも個人的にブログなんかのマルチカラムってそういう凸凹が普通だと思うけどね。

即レス感謝します。
blogって見抜かれてしまった！

カラム全体をdivでくくって各カラムのheightを
100%などと指定しているんですけどダメでした。
px以外に指定する値ってありますか？

>>722
カラム全体をくくっているdivに背景を設定するとか。
そうすれば各カラムの高さは追従しなくとも、
見た目上、各カラムは一番長いカラムに追従するよ。

http://www.geocities.co.jp/Hollywood-Kouen/5272/index.html

>>727
むむむ。その方法だと>>724のサイトみたいな
各カラムの背景色が違う場合はダメですよね。
難しい…。

blogだし凹凸は諦めます。回答ありがとうございました。

>>722
できるよ。
ttp://www.stopdesign.com/
ここを参考にするといいよ。

ほ、ほんとだ。
サイトごと保存できないみたいですが
がんばって参考にしたいと思います。

ありがとうございました。

ボディとテーブル内で、font-sizeはどっちも80%にしたんですが、
テーブル内の文字のほうが、明らかにボディ内の文字より小さくなります。
これって普通なんでしょうか？

<!--
body{
font-family : "MS Gothic"
font-size : 80%;
line-height : 130%;
}
table{
font-family : "MS Gothic";
font-size : 80%;
line-height : 130%;
}
-->

>>732
テーブルはbodyの中にあるので、
80%で縮小された文字サイズがさらに80%縮小されている。
よって、テーブル内の文字の方が小さくなるのは当然。

ptで指定すれば？

>>732
body,td {
font-family : "MS Gothic"
font-size : 80%;
line-height : 130%;
}
とまとめたほうがよろしいのではないのでしょうか。。

>735
なんでもまとめればいいというわけではない
ここで問題となっているfont-sizeの継承が解決しない

回答者ALLアホ！

font-size : 100%; なら何の問題もない。
80%の必要性を再考しる。

俺は90%でも目がしょぼしょぼする…

しかしアレだな・・・。
「HPのテンプレート」なんかを配布・紹介してるサイトは沢山あるけど、
ほとんどはtableガチガチのレイアウトなんだな〜。

日記帳に書け

あの、CSSを吐き出してくれるツールって何かいいのがあるんでしょうか？
　HPを作り始めたら、FONTだとかのタグは使ってはいけないとかいろいろ
書いてあって、どうも最新のHPはCSSかなとおもっていたら、XMLと
いうのがあるらしい。そこで　VISUAL　Studio　のXMLデザイナーの
チュートリアルを色々ためしてみましたが、HP作成というよりデータ構造の
構築のような感じで、HPにするにはどうしたらいいのかわからん。
スキーマをクリックしても色選択なんて出てこんし、どうやって色つけたり
影つけたりするのか？
　データ構造のテーブルなんかどうでもいいから、普通にHPをスタイルシート
使って書きたいのだが、皆さん、まさかテキストエディターで作っておれれるの
でしょうか？
　XML＋CSS的ホームページ作成ツールってあるのでしょうか？

>>742
ネタはやめてください。

>>742
スタイルはXLSを使う。

どう考えてもおめえさんにぁ無理ずら。
HPBでやってつかぁさい。

>>742
HTMLはHTML
CSSはCSS

全く別のものを一つのページとして考えるのはおかしい。
別のものなんだから抱き合わせでソース吐かせるのもヘン。


…と俺は思うんだけどどうよ？頭固いな。

>>742
XMLじゃなくて
HTMLは4で、開発終了。
今後はXHTMLとして開発が進んでます。
XHTMLはXMLの応用規格の一つです。

>ネタはやめてください。
ちゃう

＞スタイルはXLSを使う。
おれの本にはCSSと書いてある。まあスタイルシートってことだ。

＞どう考えてもおめえさんにぁ無理ずら。
＞HPBでやってつかぁさい。
　んにゃ。

＞全く別のものを一つのページとして考えるのはおかしい。
＞別のものなんだから抱き合わせでソース吐かせるのもヘン。

たとえば
　目次
　CCSの自動生成方法１
　CCSの自動生成方法２
　CCSの自動生成方法３
　CCSの自動生成方法４

これをだよ。
　目次をハイライトしてクリックしたら属性の選択画面がでて
　　色、だとか　フォントサイズだとか、■で囲むだとか
　が選択できて、チョンチョンと選択するだけでたちまちのうちに
　
　■目次■
　１）CCSの自動生成方法１
　２）CCSの自動生成方法２
　３）CCSの自動生成方法３
　４）CCSの自動生成方法４

こういう画面にかわる。でそのときの、スタイルをスタイルシートに登録
していく。まあこういうツールがほしい。

ネタはやめてください。

>>749
その程度なら何だって出来るずら。

Lunarのことか？

＞今後はXHTMLとして開発が進んでます。
＞XHTMLはXMLの応用規格の一つです。
　それがよくわからんのですが、高橋麻奈の「やさしいXML」という本があって
　その中に、
　「
　XSLはXSLTとXSLFOからなり
　　XSLTはデータを取り出す仕様で
　　XSLFOは書式情報を与える仕様だが未定で現在はCSSをXLFOの代わりに使う。
　」
　と書いてあります。２００１年出版の本ですが。

　ということは、XML文書とCSSがあれば、XHTMLになり、少なくとも表示だけは
厳密にできるわけですね。

ネタはやめてください。

Lunarでできるのですか？　ちょいと調べてみます。

貴男、素敵よ。

＞７５２３
　多分これです。厳密に評価するには２，３日かもっとかかりそうですので
まず前もって御礼申し上げます。

>>749
その程度ならツールなんか使わずにいくらでもできるわけだが、
あえてツールが欲しいというのならもっと高度なことがしたいんだろうな。
次の降臨をイヤーな顔してお待ちしております。使い勝手も聞かせてね。

XMLとか言ってた割には、かわいいツールが欲しかったのね。

>>753
惜しい。
XML で本文構造を作って置いて、XSLT を通して、
xhtml + css を吐くために XSL が、めそ…




みんなあんまり冷たくすんなよ。
タコは大事にしろって先輩から教わったでしょ？

食っても良いって教わった。

ちんぽ丸出しだな

言いかけで終わるのも…まあもう来なそうだけど。

うなさんのカエルのイラストが凄いんで見とれてました。ですので
評価まだです。

>XML で本文構造を作って置いて、XSLT を通して、
>xhtml + css を吐くために XSL が、めそ…

タコたらふく食って、この続きおながいします。どうぞ。
めそ...

＞XMLとか言ってた割には、かわいいツールが欲しかったのね。

　いやXMLとスキーマはVS使うと簡単に作れます。Accsessや
モデラーみたいにVisualなリレーションをドラッグドロップすると
自動的に出来上がります。
出来上がったものをどう使うかはまた別問題で、そこのところがわからん。

スレ違いの希ガス

めそ…

はい次どぞ〜

このコテハン、どっかで見たなぁと思ったらレン鯖で「レンタルサーバー契約したんだからプロバイダ解約してもいいよね」
など言い出しえらい粘着したやつだったな
どこ行っても的外れなこと言って粘着してるんだな・・・

>>769
それはどこのスレ？かなり見たいな
解約してもいいよと言って本当に解約させたかったなｗ

background-imageを閲覧者側のブラウザのサイズに自動的に合わせるにはどうしたら良いのでしょうか？
例えば□←このくらいの画像とかを無理に引き伸ばしてブラウザサイズにする方法です。お願いします。

っと、ageてしまいました、すみません；

めそって何さーーー！

はよせな

>>771
その画像見られたもんじゃなくなるけど、それでいいの？

>>771
厨の考えることは素晴らしいな。

>>771
少なくとも、 CSS では無理かと。
繰り返しはありますが、拡大縮小は……。

>771
あきらめれ
だけではなんなので、代案
繰り返しても繋ぎ目が不自然でないような画像を作って、繰り返して表示

>>775
はい、それでもOKです。ただそう言うことが出来るのであれば、やり方が知りたいだけです。

jsとcgiをゴニョゴニョすれば出来そう。

>>779
知ったか厨かい！

>>779
必要でもないのに手を煩わせるなよ

1x1の赤青チカチカのgifを引き伸ばすつもりだったりして。

>>761-770 くらい
誤解されやすい書き方だったかも。
タコっていうのは貶める言葉ではなくて、SE系用語で、
技術力はまだ乏しいけどそれを埋めるべく日夜努力するもの、
を指す言葉です。
タコはときに、頭の凝り固まった識者では発想できないような
何かを創り出してしまうことがあるので大事にしたほうがよい、という話。


最近はそんなこと言わないのかな… orz

>>784
わかってるやつは流し、カン違いしたやつがレスしただけだ。気にするな。

業界用語なんざ知りたくもねー。

"業界用語" はとある業界で造られた業界用語だ。気を付けろ。

a:hover {
border:solid 1 #ffffff;
}
とした時、マウスオーバーすると
リンク文などが微妙に
ぴょこっとずれますが
この動きを封じることはできますか？

>>788
aそのものに透明のボーダーをつけておく。
最初なかったものが現れるからずれるんだ。

>この動きを封じる

すげえ表現だな。

>>787
なにを？

>>791　　　知ったかはスルーしとけよ

長井さんですか

>>789
なるほど！
それで行ってみます
どうもありがとうございました

ねーねー、秋まで板を閉鎖しない？
見なけりゃ良いんだろうけど、過去ログ読むにも邪魔だし。

みなさん、残念な事しましたね。
769の言うスレを見たのですが、
あのコテハンの方は、例の「LANボードをつけたいが・・・」の方ではないかと、
ふと思いました。
うまく引っ張る事ができれば、あの「LANボードをつけたいが・・・」スレ以来の
見る人、書く人、みんなが微笑む、楽しいスレにできたかも知れないのに......。

>>771
どうしても引き伸ばしたいならCSSでも可能。
ただ background じゃなくて単純に img を下に表示するだけ。

使ってるとこ見たこと無いけど。

>>796
不要

>>788
出来ます。

liはこういう要素に使う、dtはこういう要素に使う、など
体系的に学べる本かサイトないですか？Pやtable位はわかるんですけど。
英語の仕様書は解読する頃には定年迎えそうなのでjpな方向でお願いします。

>>800
まず国語から勉強し直してください。
そしてここはcss質問スレです。

>>800
いい歳して書店へ行って本を選ぶ事ができないあなたには、
日本語で書かれた情報でも、定年までの残り半年では、無理。

>>800
スレ違いなので誘導で。
http://pc5.2ch.net/test/read.cgi/hp/1091428116/-100
http://pc5.2ch.net/test/read.cgi/hp/992793435/l50

書き方悪すぎたようで申し訳ない。どうか平に。
最近構造とデザインを分離するって流れで、犬も杓子もCSSじゃないですか。
で、勉強を進めるにつれてCSSって深いなぁと感激する訳ですが
色々と人様のソースを眺めていると、なんでもリストにいれたり
内容とタグが必ずしも一致してない人が多い、と感じるのです。
＃divタグ地獄だったり（これは問題外ですが）

で、Pであればパラグラフを入れる、h*タグなら見出しを書くなど
わかりやすいものは良いのですが、
例えば「定義リストって普通のリストとどう違いがあるのかしら？」
「俺は本当にこのタグで囲って良いのか？」など思う今日この頃なのです。
こういうのはCSS本格的にやる上で必須の知識ですよね。
タグの持つ意味を理解した上で構造を書いてCSSでデザインを行っている
このスレなら、いい話が聞けるかなと思ったんです。
俺はこの本読んだよとか、W３C逝けバカ、とか暖かいお言葉を期待したんです。

が、、、よく考えたらHTMLスレ池だよね。(´･ω･`) ﾇﾙｰしてください。
キリ番げっとｼﾃﾀﾜｰ*･*:.｡.:*･（n‘∀‘)ηﾟ･*:.｡..*･*

>>804
もう一度言います。
「まず国語から勉強し直してください。 」

多分、あなたはHTMLをちょっとだけかじっていい気分になってるだけなのだと思いますが、
それじゃあいけません。自己主張などせずにコツコツと勉強してください。
色々な意味で痛すぎる。

>>804はスレ違いだが何を言わんとするかはわかる。
中身のない>>805のレスの方が痛い気がする。

相変わらずこのスレは馬鹿を集めてるんだな
誘蛾灯みたいな作用があるんだろな

HTMLの仕様書和訳すら見つけられないアフォと
そこへ一発で誘導できないアフォ

>>807
そしてアナタもここに集められたうちの一人。











ｦﾚﾓﾅｰ（　´∀｀）

>>800
書籍読むよりこの板の初心者スレやそこのリンク先見ればいいよ。

タグの使い方はちゃんと構造が正しければ自由。というのがタグ自体が少ない。
階層構造を表現することも出来ないし（それでパンクズもめてるし）、これにはこれ！
という一問一答は必ずしも期待できないはず。

マニアックな話を聞きたいならストリクトHTMLスレでも覗くといいかもしれないけど、
頭でっかちな話になるから好きにするといいかも

>>809
>階層構造を表現することも出来ないし（それでパンクズもめてるし）、
何言ってんの？
パンクズはやり方が色々あるだけで、階層構造が表現できないからもめてるわけではない。
っていうか仕様書読めよ

こういうレイアウトはCSSで可能ですか？
http://f-ss.org/bbs3/img-box/img20040715025043.jpg

>>811
グロ

>>811
1ドット単位でテーブル作れば可能

811<<
できればJavaScriptの知識もほしいところだな


次！↓

divやpreなどのブロック要素でボーダーをつけると
中身の行が短くてもボーダーの右端はページの右端までいってしまいますが
これをちょうど中身に合わせた大きさで収めるようにできるでしょうか?
(widthに値を設定するのでなしに)

margin-right: auto;
とか試してみても全然うまくいきません。

変えても問題ないなら

*** {
display : inline;
border : 云々;
}

ブロック要素である以上、枠線が右端まで行くのは仕方ないかと。
って俺なんかヘンなこと言ってる？エロイ人補足ｷﾎﾞﾝﾇ↓

>>7に書いてある背景画像を２つ指定する方法についてですが、
1要素につき1つだけということは、1ページにつき1つということでしょうか？
要素を重ねるとありますが、この方法を具体的に教えていただけないでしょうか？

>>817
＞1要素につき1つだけということは、1ページにつき1つということでしょうか？
ちゃう。要素とはBODYとかDIVとか。
BODYとDIVそれぞれに背景指定汁。

>804
Webサイト制作初心者用質問スレ vol.99
http://pc5.2ch.net/test/read.cgi/hp/1091428116/

■■■　お勧めレンタルサーバー　■■■

★あなたのHPのアドレス長くて憶えられません！

【独自ドメインでホームページを作るならここ！】

Ａ：無難なサーバー。 お勧め!!　　
　http://www.webspeed.ne.jp/　　
　http://www.wadax.ne.jp/
　http://www.ktplan.ne.jp/
　http://domainya.net/
　http://www.cpi.ad.jp/ 　
　http://solid.ad.jp/ 　

Ｂ：ある程度の障害は大目に。 　
　http://www.binboserver.com/
　http://s55.net/
　http://www.j-navi.com/
　http://www.wakuwaku.ne.jp/
　http://www.j-speed.net/main/
　http://www.cyberjellyfish.com/

811は811のちょっと前で質問してたアフォが暴れたのか？

ｱｰｷﾓ

ﾄﾗｳﾏなるからｸﾞﾛとか見ないほうがいいよ

日々の生活でなれたので別になんとも思わない。

皆さんあと一ヶ月の辛抱ですよ

811の画像は、精神的につらいだけでPC的には安全だよね？
最近画像から感染するウイルスが流行ってるから怖いね。一応ウイルスバスター使ってるけど。

>825
そんなビビらんでもｗ

俺は811の画像で癒されたけどなあ

現在、テーブルタグでレイアウトしているサイトのデザインを
CSSだけできちんとデザインしなおそうと考えています。

超初心者な質問かもしれませんが、
UL、LIタグでリスト表示させた時の、字下げの幅を変更したいのですが、
この幅を任意の幅に設定するにはどうすればいいのでしょうか？

hoge
・hoge01
・hoge02
・hoge03
↑
ここの幅

marginで±の値を指定することで、相対的に調整する事はできるのですが、
この幅を仮に20pxなら、20pxぴったりに指定する方法が、どうしてもわかりません。
どうか、よろしくお願いします。

なんか、矢印の位置がずれてしまった…
黒丸の前の字下げの幅を変えたいということです。

ブラウザのデフォルトスタイルシート
http://is.vis.ne.jp/notes/browser/default_style.xhtml
/*
* Internet Explorer 6.0,
* Internet Explorer 5.5,
* Internet Explorer 5.0,
* Opera 7.2
*/
ol, ul {margin-left: 40px;}
/*
* Internet Explorer for Mac 5.2
*/
ol, ul {margin-left: 2.5em;}
/*
* Mozilla 1.6,
* Netscape 7.1,
* Netscape 6.2,
* Safari 1.2,
* OmniWeb 4.5
*/
ol, ul {padding-left: 40px;}
/*
* Opera 6.0
*/
ol, ul {margin-left: 40px;}
li {margin: 5px 0;}

>>828
何が言いたいのかよくわからんが
・と本文の間をいじりたいのならpadding

>>828
←20px→ ・ hoge
←20px→ ・ hage
←20px→ ・ hige

こんな感じで 20px 空けるのか、

・ ←20px→ hoge
・ ←20px→ hage
・ ←20px→ hige

この様に 20px 空けるのかがいまいち。

前者なら margin : * * * 20px ;
後者なら padding : * * * 20px ;
で良いと思います……どうも、質問に対する解釈を間違えている気はしますが。

被ってしまった…… ＿|￣|○

>>830
ul {
margin-left: 0px;
padding-left: 0px;
}
li {
margin-left: 20px;
padding-left: 0px;
}

と指定することで、意図した用に指定できました、有難うございます。

>>831
説明が下手ですいませんでした。

>>832
前者のようにしたかったのでした。

説明下手ですいませんでした。

>>834
ul {
margin-left: 0;
padding-left: 20px;
}
だけで済むはず。li要素への指定は不要。
もしくは
ul {
margin-left: 20px;
padding-left: 0;
}
でもよい。

>>836
なるほど、有難うございます。

|■▲▼　　　　　　　　　|　　　←こういうのを

|■　　　　　　　　　▲▼|　　　←こういう風にしたいんですが


どうしたらいけますか？
<SPAN>で右寄せしたらできると思ったんですが、
ブロック要素でしかtext-alignは使えないみたいだし
<div>つかうと前後に改行入って見てくれが悪いし・・・

>>838
float

あれ？floatって画像用じゃなかったでしたっけ？

どんなボケだよ。

スミマセン
どっかにそんな事が書いてあった記憶があったので・・・
ありがとうございました。

>>840
つまり、
■
だけのブロックレベルと、
▲▼
だけのブロックレベルにわけて、
それをfloatってわけだ。　　　

>>843
まわりこませるわけだから、
<div style="float:right;">▲▼</div><div>■</div>
って、書けばいいんですよね？

>>844
それでもいいんだが、それだと「CSSを適応するためだけに無理矢理書いた文書」だよな。
そんなやり方するくらいならテーブル使うといい。

なぜ、■が左にあって（左にある理由じゃなくて、■が独立してる理由ね）、
▲▼が右にある、という形になるのか、って考えていくと、それぞれが「どういうブロックレベル要素」でマーク付けすべきか見えてくると思うが。

余談が長すぎたな。すまん。

>>844
ああ、あとfloatにはwidthつけとけよー

絶対配置でも使っとけ

HPBがおすすめだい。

初めてｽﾀｲﾙｼｰﾄでｻｲﾄ作ってみたんだが、どこもかしこもdivとspanで房になっちまった。
しかも、サイトの構成で両端背景で真ん中650pxのとこにコンテンツが表示されるようにしたくて、
一番外回りをこんな風に書いて括ったんだが、表示してみたらIEとNCで横幅が違うんだ。どうしてだかﾜｶﾝﾈ
しかもど真ん中に表示する方法が分からず左から座標指定してるんだが、真ん中表示の方法ってあるのか？
教えてチャンで申し訳ない。どうか教えてくれ

div.in { position:relative;
width:650px;
left:50px;
margin:0;
padding:0 10px;
background-color:#ffffff;}

alignをセンターに

>>849
既出

＞横幅
>>830

＞真中によせる
>>5-8

>>849
FAQ(>>5-8)を読んでください。

あらやだ。
ｹｺｰﾝ>>852

>>850-853
thx！FAQに載ってるような事聞いてｽﾏｿ
もうちょっと詳しくなるよう出直してくる
align センターってすごい初歩だよな
ﾃｰﾌﾞﾙﾚｲｱｳﾄんときから使ってたからすっかり頭から抜けていた

FAQってなんて読むの？
ファッキュー？

口に出すときは「えふえーきゅー」だが
意味は「何回も同じこと聞いてくるんじゃねえﾌｧｯｸﾕｰ」ってこと

Q&Aは
クエスチョン＆アンサーで、
FAQ何の略だ？

>>857
FAQ見てこい。

ファンタスティック　アメイジング　クエスト

新作ＲＰＧ？

全米が泣いた。

http://dictionary.goo.ne.jp/search.php?MT=FAQ&ej.x=0&ej.y=0&ej=%B1%D1%CF%C2&kind=ej&mode=0

>>845
横から見てたんだけど結局どうやるのん？

むしろ>859の親が泣いた

>>862
それぞれ適切にマークアップして、
インラインレベル要素の場合はブロックにしてから、
float 。

いい加減なことばかり教へてはいけません。
わざわざブロック要素としてマークアップする必要は無いはず。
インライン要素でも、floatかければブロック・ボックス扱ひになると仕樣書にあるでせう？
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#floats

・CSS2の仕様書の邦訳（個人訳）
　http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

↑つながらないね。またサイト消滅ですか？

864　100叩き

http://cssbug.at.infoseek.co.jp/detail/mozilla/b047.html
絶対配置（position: absolute;）／固定配置／フロート状態にした要素はdisplayプロパティが強制的に「block」に設定される
CSS2.1では、displayプロパティがlist-item値の要素はフロート化してもlist-item値のままであると定義されています。このため、リストマーカーが消えないのが正しいことになります。

おおおおお。
いままで何の疑いもなく、

display: block;
width: 適宜;
float: left;

とか、コンボで叩いていた。
スマンカッタ。

>>864
すまんがソース書いてくれん？

<tag_1>▲▼</tag_1><tag_2>■</tag_2>

tag_1{
    float: left;
    width: 適宜;
}
tag_2{
    display: block;
    text-align: right;
}

でいいんじゃないの？

>>871
ｻﾝｸｽｺ

うむ。久々にちゃんとした流れだったな。

>857

Frequently Answered Questions
Frequency Answer and Question

>>874
http://e-words.jp/w/FAQ.html

おまいら脱線しすぎ

>>876
すまん。初心者スレとごっちゃになってた。

＜li＞＜/li＞内にblockに指定した＜ins＞を挿入すると
各＜li＞の間が開きすぎてしまう。
http://www.geocities.jp/sugi103/css-test.html

1.何故でしょう。
2.何かよい方法は無いでしょうか。

>>878
これ？
http://cssbug.at.infoseek.co.jp/detail/winie/b071.html

>>878
1.IEのバグ
2.
.brdr ol li{border:1px solid #fff;}

>878
そのページ　マクのIE5とNetscape7で文字化けするんだが
なんでだろ

#adsense{
position:absolute;
left:620px;
width:240


代替広告にテキスト広告を使いたいと思っています。(google adsense
それでwidth:240を超えたら...か省略するようにしたいのですが、
どうやったらいいのでしょうか?

http://www5e.biglobe.ne.jp/~access_r/hp/css/css_property.html#text
http://www5e.biglobe.ne.jp/~access_r/hp/css/css_property.html#look
みても具体的にどう修正すればいいかわからなくて。
(´･ω･｀)ｼｮﾎﾞｰﾝ　どなたか教えてください。

UTF-8で書いてあるのにShift_JISが指定されてるからじゃないの？

>883
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
って入れてるから問題ないと思うんだけど、間違ってる?

>>884
ん〜、UTF-8で書いてあるなら、こうじゃないの？
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

って、おめーへのレスじゃねぇよ(#゜Д゜)
>>883 は、>>881に対するレス。

>>882
他人の金儲けに協力する気はねぇ(　´д｀)

>886
すみません。

>他人の金儲けに協力する気はねぇ(　´д｀)
いやぁ、bannerだと見る人がうざがるから
テキスト広告にしようと。鯖代だけでも稼ぎたくて･･･

http://www5e.biglobe.ne.jp/~access_r/hp/css/css_text_013.html
で解決しました。
お騒がせしました。

続けて質問してすみません。

#adsense{
position:absolute;
left:620px;
width:240

ってなっているものなのですが、
位置指定を絶対的なものではなくて
相対的なものにするにはどうすればいいのでしょうか?

今のままならブラウザーの大きさを変えても同じところに
表示されるのですが、これをブラウザーの大きさに従って
同じ間隔で縮小拡大するようにしたいです。


よろしくお願いします

＞width:240
単位は？

>>889
とりあえずwidthに単位付けれ。まぁ多分コピペミスだろうけど。
ブラウザサイズにあわせるなら%指定。いっぺん相対サイズについて学んで来い