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

このエントリーをはてなブックマークに追加
902Name_Not_Found:02/08/04 20:53 ID:???
‥‥”IE6から追加されたキーワード”だった。
あー、あとアンク監修→アンク著になってるね。
903Name_Not_Found:02/08/05 00:07 ID:MSRIuZO3
<div style="border-left: 3em solid blue; padding: 1em;">
<p>a</p>
</div>
<p>aaaabbbbccccddddeeee</p>

これをIE6で見ると下のparagraphがやたらに左に寄って表示される。
Operaだと予定通りに見えるんだけど、仕様ですか?
904Name_Not_Found:02/08/05 00:19 ID:???
>>903
仕様書見て。
905ボタン:02/08/05 00:50 ID:5kYuhB1c
ラジオボタンの丸の中の色を変更することは出来ますか?
(backgroundで変更できる 背景色(丸の外側の四角い部分)ではないです。)
906Name_Not_Found:02/08/05 01:00 ID:???
907Name_Not_Found:02/08/05 02:14 ID:???
楽して解答得ようとするクソ厨房。
それを見下すことで自分の立場を確立している知ったか厨房。

両者とももーちょい頭使ってくれ。
有意義なスレにしましょーよ。
908匿名希望(神奈川県/21歳):02/08/05 03:07 ID:???
>>907
では両方を見下すあなたは(以下割愛)。
いえいえ、中傷するつもりは毛頭ございません。ただのテストです :-)
多種多様の方々が読み書きする掲示板、常にあなたの思う通りになるとは限りません。
人を刺激するような文言で、フレームを起こすような書き込みをするよりも、
あなたの望むような「有意義な」話題を提示してみてはいかがでしょうか?

# 簡単な質問は、ある人にとっては答えるのが簡単かもしれませんが、
# する側は自己解決しようと努力した上でどうしても解けない謎だったりします。
# そんなとき、具体的なリファレンスや仕様書の箇所を指し示す事で、
# 「読み方」を身に付けていただければCSS普及にとって幸せな事だと思うのですが。
# 場合によっては「失せろ中坊」もいいですけどね :-P
909Name_Not_Found:02/08/05 03:11 ID:???
文頭に#をつけるのは最近のお洒落なのか
910Name_Not_Found:02/08/05 03:23 ID:???
「追伸」のような意味かと。。。
911Name_Not_Found:02/08/05 03:28 ID:???
スクリプトなんかのコメントアウトだよな。独り言だと思ってたが、これは語りかけてるな。
912Name_Not_Found:02/08/05 03:29 ID:???
#じゃぁこれから都合の悪い事は全部シャープ付けて書こう
#そしたら叩かれずに済むらしい
913Name_Not_Found:02/08/05 03:33 ID:???
( ゚д゚)ポカーン
914Name_Not_Found:02/08/05 03:41 ID:???
/*CSSなんだからこれでいいじゃん*/

以下、正常(・∀・)ウンコー!!
916Name_Not_Found:02/08/05 06:50 ID:???
最近下痢が止まりません、どうしたら良いですか
917916:02/08/05 08:44 ID:???
ごめんなさい、行き付けのウンコスレと間違いました
918Name_Not_Found:02/08/05 10:24 ID:???
>916
旦 ●
┳━━┳\(*゚Д゚*) セイロガンドウゾ....
919いつも名無し:02/08/05 10:25 ID:???
ワラタ
920Name_Not_Found:02/08/05 17:26 ID:???
body センタリングしてるんだけど
リスト使うとこうなってしまう
  ・ああああ
 ・ああああああ
・ああああああああ


リストを↓みたいに綺麗に揃えるにはどうすればいい?

・ああああ
・あああああああ
・あああああああああ
921Name_Not_Found:02/08/05 17:33 ID:???
>>920

ULにtext-align、margin、paddingといったところを適切に設定する。
922Name_Not_Found:02/08/05 17:44 ID:???
>>920
ul に width か margin 指定して text-align: left;
923Name_Not_Found:02/08/05 17:45 ID:???
あれ、カブッテタ
寝ぼけますた
924Name_Not_Found:02/08/05 18:09 ID:???
あげ忘れ
925920:02/08/05 18:10 ID:???
もうレスあったんだ
すいません

>>921 >>922
最高!ありがとう!
926Name_Not_Found:02/08/05 19:25 ID:???
citeには、line-heightは当てられませんか?
line-heightはブロック要素にしか当てられないのでしょうか?
927Name_Not_Found:02/08/05 19:37 ID:???
>>926
インラインにも適用できるよ
928Name_Not_Found:02/08/05 19:48 ID:???
>>927
ありがとう。
929Name_Not_Found:02/08/06 12:26 ID:???
ウィンドウサイズを小さくした時に自分の意図したところで改行させることは可能でしょうか?
例えば、

<p>abcd-あいうえお</p>

となってるときにウィンドウサイズを小さくすると - の後で改行されるのですが、
それを え で改行したり指定することはできるのでしょうか?
930いつも名無し:02/08/06 14:18 ID:???
>>929
<p style="white-space:nowrap">abcd-あいうえ<br>お</p>
こうか?
931Name_Not_Found:02/08/06 14:28 ID:???
min-width使って細かく調整したら可能かな。
でもIEが対応してないかも。
932Name_Not_Found:02/08/06 15:52 ID:???
>>929
ウィンドウサイズが小さい時だけ改行(というか、折り返し)させたいのならば、
いっそ、画像にして、

<p>
<img src="a.png" alt="abcd-あいうえ"><img src="b.png" alt="お">
</p>

とか。
CSS使ってないけど。
933Name_Not_Found:02/08/06 16:16 ID:???
いっそ、画像にして、
いっそ、画像にして、
いっそ、画像にして、
934Name_Not_Found:02/08/06 16:19 ID:???
しかも

> alt="abcd-あいうえ"
> alt="お"

(;´Д`)
935Name_Not_Found:02/08/06 17:10 ID:???
>>932
( ゚д゚)ポカーン
936コネリー:02/08/06 18:43 ID:???
>>932
アホンダラ!
937Name_Not_Found:02/08/06 19:39 ID:???
938ひばむす:02/08/06 20:08 ID:???
>>932
ふじゃけてんじゃねえよ!
939701:02/08/06 21:22 ID:???
>>932
いや、いいぞ!これが一番簡単で確実な方法だ。
940いつも名無し:02/08/06 22:06 ID:???
質問スレでこれはやばい流れだ。おい早く次の質問をもって来るんだ
941Name_Not_Found:02/08/06 22:08 ID:???
content使ってみたのですが、何故かMozillaですら反映されません。
ローカルでは上手くいってるんですが、ウプすると途端に効かなくなります。
原因は何だと思いますか?ちなみに代替CSSファイルで指定してます。
一応、ソース。
h3 a:before,h3 a:after{
content : "●";
color : #DAA520;
background-color : transparent;
}
942Name_Not_Found:02/08/06 22:13 ID:???
943Name_Not_Found:02/08/06 22:20 ID:???
>>941
代替スタイルを選んでいないだろ。

冗談はさて置き、charsetは指定したか?
944Name_Not_Found:02/08/06 22:51 ID:nNQuJC0O
こんばんは。
HTML4.01 Strict + 外部スタイルシートに興味をもち、サイトを作り直しています。
そこで疑問に思ったのですが、このような場合はどうするのが適切でしょうか?

<h1>タイトル</h1>
<h3>サブタイトル</h3>
<p>文章</p>
<p>画像</p>

のようなHTMLをCSSを使って

タイトル
┏━━━┓サブタイトル
┃ 画 ┃文章
┃ 像 ┃
┗━━━┛

のようなレイアウトにしたいのです。
もしよろしければ、お知恵をお貸し下さい。
945Name_Not_Found:02/08/06 22:59 ID:???
946Name_Not_Found:02/08/06 23:16 ID:???
>>944

<h1>タイトル</h1>
<p>画像</p>
<h3>サブタイトル</h3>
<p>文章</p>

という風に、画像を先に持ってきていいんだったら、画像の収まってるブロックに
適当なクラスをつけて、
float : left;
と指定してやるのが、たぶんいちばん簡単。

それはそうと、
<h3>サブタイトル</h3>
というタグの使い方は間違ってるので、やめといた方がいいと、個人的には思う。
947Name_Not_Found:02/08/06 23:20 ID:???
>>944
Strictを念頭におくのなら、<h1>-<h2>-<h3>-<h4>-<h5>-<h6>とやるべきだろうね。
948Name_Not_Found:02/08/06 23:20 ID:???
>>944
その画像が何なのかによって変わるんだけど。
図かなんかなら img でいいが、
ただの装飾用なら background-image にする。
949Name_Not_Found:02/08/06 23:22 ID:???
>>946
画像は文章を補足するものじゃないか?
とすれば画像を先に持ってくる事自体がおかしいと思うが。
たぶんわかってるとは思うけど、一応。
950Name_Not_Found:02/08/06 23:31 ID:???
tableにclassでborder:1px;padding:1em;
としたのですが、
Operaだけスペースが開きません。
どうしてなのでしょうか。
951Name_Not_Found:02/08/06 23:41 ID:nNQuJC0O
みなさん、レス本当にありがとうございます。

>>946
>>947
<h3>は他のページと統一させるためにこのようにしていましたが、このページ一枚で
ひとつの独立したページとしてみるとやはり<h2>がないのはおかしい、のようなこと
が書いてありましたので、みなさんのおっしゃるとおり、<h2>をいれ、文章構成を
見直したいと思います。

>>948
>>949
それと、画像は大きめのアイコンとして使っています。
この場合は文章を補足してあらわすものだから.imgと判断しました。
そして、このような意味の場合、画像はHTMLの構成上は文章の後におくべきかな?
と、思ったのですが難しいところです。

もうしこし、試行錯誤してみます。
ありがとうございました。
952Name_Not_Found:02/08/06 23:46 ID:Iox57AL4
<html>
<head>
<style type="text/css">
<!--
div {
float: right;
}
-->
</style>
</head>
<body><h1>タイトル</h1>
<div>
<h3>サブタイトル</h3>
<p>文章</p>
</div>
<p>画像</p>
</body>
</html>
これでいいんじゃないの?
953Name_Not_Found:02/08/06 23:55 ID:???
>>950
次スレよろ
954Name_Not_Found:02/08/06 23:56 ID:???
>>932
次スレよろ
955Name_Not_Found:02/08/07 00:07 ID:JCpBHpzp
align=centerなどで、中央に表示した画像の上に、
画像を重ねて表示するにはどうすればいいのでしょう?

中央に〜ってのがなければposition:absolute; left:100; right:100;
なりなんなりで重ねちゃえるのですが・・・。
ウィンドウサイズが変わると中央の座標変わっちゃうので。
・・・どうすれば?
956932:02/08/07 00:13 ID:???
>>954
立ててきたけど……何故俺?
957941:02/08/07 00:18 ID:???
>>942
おぉ、こんなバグがあったのですか。ご教授有り難う御座います。

>>943
CSSファイルの側で@charset "Shift_JIS";と指定はしています。
恐らく「●」この文字との関係の事だと思うのですがこの点は大丈夫です。

ついでにもう一つ。
これも代替での指定なんですが、first-letter擬似要素も効かないですね。
IE5.5で効いてるのにMozilla1.0で効かない。鬱です。
ソース
h2:first-letter{
font-size : 3em;
}
958Name_Not_Found:02/08/07 00:18 ID:???
>>956
立てたのなら誘導しなよ

/* CSS、スタイルシート質問スレッド【10】 */
http://pc3.2ch.net/test/read.cgi/hp/1028646616/
959Name_Not_Found:02/08/07 00:36 ID:???
>>954
>>958

なんかぶーたれてるな。

>>956
なぜ指名されたかはわかりませんが、お疲れです。
960Name_Not_Found:02/08/07 00:52 ID:K4easTpP
すいません、便乗で質問があります。>>944みたいのを何回かくりかえすと
<h1>タイトル</h1>
<p class="test">画像</p>
<h2>サブタイトル</h2>
<p文章</p>
<p class="test">画像</p>
<h2>サブタイトル</h2>
<p>文章</p>

ってHTMLでCCSでクラスtestをfloat : left;にすると画像と文字の大きさのバランスによっては
タイトル
┏━━━┓サブタイトル
┃ 画 ┃文章
┃ 像 ┃┏━━━┓サブタイトル
┗━━━┛┃ 画 ┃文章
     ┃ 像 ┃
     ┗━━━┛
ってずれずれになってしましますー。
これをしっかりと左に揃うようにしたいんです。
バランスを取るために文字サイズを固定ってのはしたくないですが、なんとかなりますでしょうか??
961Name_Not_Found:02/08/07 00:55 ID:vrxIs/cy
clearとか使うんじゃないの?
962Name_Not_Found:02/08/07 03:29 ID:???
>>960
ばーか、
963Name_Not_Found:02/08/07 04:12 ID:???
↑こいつ、なに?

お前みたいなやつが一番の害悪。2chのな
頼むから消えろ。一刻も早く消えろ。
964Name_Not_Found:02/08/07 05:41 ID:???
>>963
>>962は自分がちんぷんかんぷんでわからんもんだから邪魔してるんでしょう。
こんなやつは2chに限らずほっとけば自分の人生に絶望感じて首くくって消えるでしょう。
私たちもこんなやつらにこれ以上かまわず、人生を有効に使いましょ。。
965Name_Not_Found:02/08/07 06:55 ID:???
っていうか、そもそも何で画像を<p>で囲んでんの?
divとかspanならまだかわいげもあるが…
966Name_Not_Found:02/08/07 08:49 ID:???
荒れてるところ申し訳ないですが質問させてください
DWスレで質問してみたんですがそういったサイトのソース見と言われて終わってしまったのですがcssを使って疑似フレームみたいなのをやるやり方、もしくはそういったものの作り方を解説しているサイトなんかがあったら教えて下さい。
よろしくお願いします
967Name_Not_Found:02/08/07 09:37 ID:???
968Name_Not_Found:02/08/07 10:36 ID:???
>>965
正直、<p>のほうがなにもしらなそうで可愛げがあると思う。
煽りたいならもーちょい上手にどうぞ。
969Name_Not_Found:02/08/07 10:53 ID:???
いや、煽りたいとかそう言うわけじゃないがなぜ誰もそれを修正しないで
そのまま<p>のまま話を進行させているのかが不思議でさ。
テーブルレイアウトでやれば簡単な所をCSSにこだわるのはStrictなHTMLを書きたい
と言う願望がやはりあるのであって、それならやっぱり<p>は無いよなぁと思ってるから。
何か特別な訳があるのなら仕方ないんだろうけど。
970Name_Not_Found:02/08/07 11:24 ID:???
>969
つーか普通は <p> だと思うがな…
(<div> 直下にインラインは置きたくない,なぜ <span>?)
続けたければ strict スレで
971Name_Not_Found:02/08/07 11:29 ID:???
>>965 >>968 >>969
pではいけないという理由がわからないのですが、何故ですか?

> divとかspanならまだかわいげもあるが…
pもdivもダメ、というなら、何を使ったらいいのかわからないのですが。
というか、spanはインライン要素だから、この場合は文法違反だし。
972971:02/08/07 11:33 ID:???
>>970
というか、もしかして俺たち煽りに釣られましたか。
973Name_Not_Found:02/08/07 11:35 ID:???
>970-971
<p>は段落だから中身は文章じゃないと駄目だろ、って言いたいんだろうな…
974941=957:02/08/07 11:48 ID:???
誰か〜ん、教えておくれヨン。やっぱバグなんっすか?

>>960
<h1>タイトル</h1>
<dl><dt class="test">画像</dt>
<dd><h2>サブタイトル</h2><p>文章</p></dd></dl>

こんなマクウプしてみたら?ってかスレ違いでスマソ。
975Name_Not_Found:02/08/07 11:55 ID:???
>>974
first-letter普通なら効くからバグじゃないの?
どう書いたら効かなくなったの?
976971:02/08/07 11:57 ID:???
>>973
というかそもそも、 >>960 のソースだけだと、具体的なこと(どんな目的で画像
を使いたいのか)が判らないので、どういうマークアップが適切なのか、一概には
言えないと思う。
画像の説明をしたいなら、>>974のようにdlで。(ddにh2を含むのは賛成できないけど)
独立した意味を持たないけど不可欠な画像は、文章と一緒に<p><img> 文章</p>。
単なる飾りなら、CSSでbackground-imageを指定。
上記のどれにもあてはまらない場合のみ、pかdivで。

……くどい上にスレ違いだな。ごめん。
977Name_Not_Found:02/08/07 12:04 ID:???
<img class=ほにゃらら>
っていうか、alignでもいけそうだが。
978Name_Not_Found:02/08/07 12:11 ID:???
画像が<p>についてはこのような論争になるのが目に見えていたからあえてだれも
触れなかったんじゃ。

>>969
あとCSSにこだわる=StrictなHTMLを書きたい、って人は確かに多いとは思うが
必ずしもそうではないと思う。
俺はただたんに外部CSSを使ってデザインをまとめて管理したいだけ。
だから、そのためにはマークアップ上は間違っていようがテーブルレイアウトを使う
こともあるし、<h1>のあとに<h3>が来ようが、画像が<p>で囲まれてようがそこまで
気にならない。

HTMLやCSSの規格や実装がまだ完璧じゃない現状、このへんで妥協するのがベスト
ではないかと個人的に思う。



979Name_Not_Found:02/08/07 12:31 ID:xH6Q2r8B
今、HPを作ろうと思って中身のファイルを作っている最中なのですが、
ソースの〈HEAD〉〈/HEAD〉の間に

<style type="text/css">
<!--
body{
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#adadad;
scrollbar-face-color:#d0e8f1;
scrollbar-highlight-color:#d0e8f1;
scrollbar-shadow-color:#adadad;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#ffffff
}
-->
</style>
をはさんでスクロールバーの色を変えようとしても、
その場では指定したとおりの色になるのですが
しばらく経ってまた開くと、元の灰色と黒のスクロールバーに戻ってしまいます。
web上にアップすれば、指定通りの色のままなのでしょうか?
980Name_Not_Found:02/08/07 12:59 ID:???
まぁとりあえず試してから聞け
981Name_Not_Found:02/08/07 14:46 ID:???
982Name_Not_Found:02/08/07 15:01 ID:???
>>975
代替スタイルで
h2:first-letter{
font-size : 3em;
}

>>976
<dd>に<h2>を入れちゃうのは書いた後でいかがなものかと思ったが、
まぁスレの趣旨と反するので敢えて放置でおながいします。
仰る通り、一概にどのマクアプが適切なのかは言えないと思うので。

#スレ違いスマソ。
983971:02/08/07 15:06 ID:???
984971:02/08/07 15:15 ID:???
ごめん、 >>983 は送信ミスね。

>>978
strictにこだわる立場からいっても、pで画像をマークアップするのはそれほど
不適切ではないと思う。
少なくとも >>969 が力いっぱい断言するほど、「適切ではない」という認識が
コンセンサスを得られていないことはたしか。
だから、 >>972 で書いたように、手の込んだ煽りだったのかなあ、と思ったり。
「pは段落だから画像入れちゃいけない」と思いこんだ厨房が、生半可な知識を
ふりかざして自滅しただけかもしれないけど。

スレ違いだし、そろそろ1000届きそうだから、strict云々については、
http://pc3.2ch.net/test/read.cgi/hp/1022751972/
で。
CSSに関する話題なら、
http://pc3.2ch.net/test/read.cgi/hp/1028646616/
で。
985Name_Not_Found:02/08/07 15:40 ID:???
しかしコイツもしつこいな
986Name_Not_Found:02/08/07 15:43 ID:???
 
987Name_Not_Found:02/08/07 15:50 ID:???
記念パピコV(^o^)V
988Name_Not_Found:02/08/07 17:58 ID:???
>>985
流行ってんの?
989Name_Not_Found:02/08/07 22:14 ID:???
979<980
まだプロバイダは探してない状態だったんですけど、
やっぱりやってみないと分からないってことですね。
またアップしてみて事態が変わらなかったら報告します。
レスありがとうございました。
990Name_Not_Found:02/08/07 23:59 ID:???
申し訳ないが質問させてくだちい。
cssでできるかワカランのですが・・・

--
<img src="**">
<table>
.
.
--

と書いた時に強制的に改行するのを抑制する方法ってあるますか?
991Name_Not_Found:02/08/08 00:06 ID:6+F4tbcq
<img src="**" style="float: left;">
<table>
992990:02/08/08 01:36 ID:???
ダメですた(´・ω・`)
993990:02/08/08 02:11 ID:???
解決ですー。

横に長すぎるとうまくfloat機能しないんですね。
お騒がせしました。
994いつも名無し:02/08/08 03:12 ID:???
>>993
もっと制御したいならfloat:leftとwhite-space:nowrapを組み合わせるといいかも。
995Name_Not_Found:02/08/08 04:41 ID:91OMKY8X
まあどっちにしろつづきは新スレで
996Name_Not_Found:02/08/08 05:18 ID:???
じゃ、お前に1000譲るからな
997名無し募集中。。。:02/08/08 05:23 ID:???
このスレはモーヲタが占拠した!
998名無し募集中。。。:02/08/08 05:24 ID:???
∋oノハヽo∈  
  (´D` )  < おしりぺんぺん
   ⊂  ヽつ)) 
    (_ ノノ ☆ペチペチ
999名無し募集中。。。:02/08/08 05:27 ID:???
          /
        /
にゅるん♪ \
        /      /
∋oノハヽo∈\/ \/
⊂(´D`*) ⊂ ノ
 ‖‖‖‖‖‖
 ШШШШШШ_________________
(_______________________)
1000名無し募集中。。。:02/08/08 05:27 ID:???
  ケーチャン…                 ?

 ノノノハヽ                ノノノハヽ
 ( ´ Д `)                ( `.∀´) ∬
 (    つ                (    つ□
 (_)_)                 (_)_)



 ゴトー ムスメ。 ヤメルンダ…          !

 ノノノハヽ                ノノノハヽ
 ( ´ Д `)              Σ (`.∀´ )
 (    つ                (    つ
 (_)_)                 (_)_) □-カタン !


            
                      あたしもよ

 ノノノハヽ                ノノノハヽ
 ( ´ Д `) !             (`.∀´ )
 (    つ                (    つ
 (_)_)                 (_)_) □-


  ……                   ……

 ノノノハヽ                ノノノハヽ
 ( ´ Д `)               (`.∀´ )
 (    つ                (    つ
 (_)_)                 (_)_) □-
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。