5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

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

1 :Name_Not_Found:2001/08/03(金) 17:44
【過去ログ】
 http://mentai.2ch.net/hp/kako/974/974934062.html
 http://natto.2ch.net/hp/kako/984/984113434.html
 http://natto.2ch.net/test/read.cgi?bbs=hp&key=992992981

【CSSと特に関係ない初心者質問はこっちで】
・☆ Webサイト 初心者用スレッドver9 ☆
 http://natto.2ch.net/test/read.cgi?bbs=hp&key=995867650

792 :776:01/10/17 01:39 ID:HYpXkX7/
>>791
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
これでだったら変化は無かったですよ

793 :Name_Not_Found:01/10/17 03:05 ID:8ELBo7vS
IE6はHTML4.01StrictとかXHTMLのDOCTYPE宣言をすると
margin:autoによるセンタリングとかが効くようになったりするらしいね。

794 :Name_Not_Found:01/10/17 05:20 ID:Uz8gFfhg
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

WinIE6、MacIE5、mozillaはDOCTYPE宣言でCSSやHTMLの解釈が変化する。
これを知らない奴が多いみたいだが…これからFAQになっていくんだろうな。

ちなみにIE6のDOCTYPE SWITCHだが、UTFエンコーディング以外のXHTML
(XML宣言がファイルの先頭行にあるもの。/UTFの場合は省略可)では標準準拠モードにならないので気を付けよう。

795 :Name_Not_Found:01/10/17 10:48 ID:gz6iQJRz
くだらない質問だったらスイマセン。
http://www.outer-court.com/
こういうのもスタイルシートで作れるんですか?
どうなってるんですか?

796 :Name_Not_Found:01/10/17 11:14 ID:6k6L67sX
>>795

それ、漏れ見つけて「イケてるデザイン」スレい報告した覚えが。

CSSはそのものが持つ装飾(色とかborderとか)以外に、画像などを「配置」する
役割もあるんです。

CSSだってTABLEだって、それそのものの装飾能力なんてわずかなもんです。
線引いて色塗るだけ。

画像の自由度にはかなわない。

797 :Name_Not_Found:01/10/17 11:17 ID:6k6L67sX
>>794

鬱なのはIE6のStrictモードがまだまだ枯れていないこと。
さらに鬱なのは「IE6って厳密らしいぜ。本当はこれが正しいらしい。」と
単なるバグまでそれを正しいことだと盲信してるやつが少なくないこと。

798 :Name_Not_Found:01/10/17 17:58 ID:NGwzWULS
>>797
さらに鬱なのは、IEの仕様書も読まずに、W3Cの仕様と異なると、
「仕様」にも関わらず「バグ」だと言う奴かな。

799 :Name_Not_Found:01/10/17 22:10 ID:EyIvZnQg
NN6で、 div { align:center; }
が効かないんですが、これはIE専用なんでしょうか?
中身のテキストはセンタリングされるんですけど、
borderをつけるとボックス自体の位置が変わらないんです。
IEではちゃんと真ん中に来るんですけど。

800 :Name_Not_Found:01/10/17 22:21 ID:1IXzmb2Y
text-align?

801 :Name_Not_Found:01/10/17 22:28 ID:WS20bYvE
>>799
それ、よくある質問(FAQ)です。ここ参照。
http://www2u.biglobe.ne.jp/~zashiki/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html

802 :Name_Not_Found:01/10/17 23:06 ID:YDFEeNHC
現在ポジショニング使ってる人って正直どのくらい居るんですか?

803 :Name_Not_Found:01/10/17 23:07 ID:wtJwvtDq
>>802
私は使っているので最低でも一人以上はいます。

804 :Name_Not_Found:01/10/17 23:20 ID:WS20bYvE
>>802
私も使ってますので少なくとも二人以上は存在します。

805 :Name_Not_Found:01/10/17 23:23 ID:IX8jXG68
質問があります。
画像の横にテキストを流しこむと

____________
| | モナー
| | かわいい
| | 好きです。
| 画像 |
| |
| |
| |
 ̄ ̄ ̄ ̄ ̄ ̄
のようになりますが、
画像の横の文章を画像の高さの中央に置きたいのです。
つまり下のようにしたいのです。

____________
| |
| |
| | モナー
| 画像 | かわいい
| | 好きです。
| |
| |
 ̄ ̄ ̄ ̄ ̄ ̄

このようにすることは出来ますか?

806 :Name_Not_Found:01/10/17 23:23 ID:o39CqT5I
指定サイズの<div>タグ内の4隅にイメージ(<img>)を配置する事って
かのうですか?ただしテーブルを使わずにです。

807 :Name_Not_Found:01/10/17 23:25 ID:wtJwvtDq
>>805
半角スペース使いました?

808 :Name_Not_Found:01/10/17 23:25 ID:o39CqT5I
>>805
拙者も依然同じ事を思えたが挫折した。

809 :805訂正:01/10/17 23:27 ID:IX8jXG68

質問があります。
画像の横にテキストを流しこむと

____________
|..........|...モナー
|..........|...かわいい
|..........|...好きです。
|...画像...|
|..........|
|..........|
|..........|
 ̄ ̄ ̄ ̄ ̄ ̄

のようになりますが、
画像の横の文章を画像の高さの中央に置きたいのです。
つまり下のようにしたいのです。

____________
|..........|
|..........|
|..........|...モナー
|...画像...|...かわいい
|..........|...好きです。
|..........|
|..........|
 ̄ ̄ ̄ ̄ ̄ ̄

このようにすることは出来ますか?

810 :805:01/10/17 23:33 ID:IX8jXG68
図が汚くてすいません。
出直してきます。

811 :Name_Not_Found:01/10/17 23:37 ID:79kleoUK
table使えば

812 :Name_Not_Found:01/10/18 00:44 ID:1y9rHMnU
margin-topなんかでできるけど。>>809

813 :Name_Not_Found:01/10/18 00:52 ID:iAxDxoPr
>>806
mozillaで確認。
IE5.5不可。
貴方が言ってることは一応可能と言える。


<div class="four_corners">
<img id="a">
<img id="b">
<img id="c">
<img id="d">
<p>sample<br>
sample<br>
sample<br>
sample<br>
sample<br>
sample<br>
sample<br>
sample<br>
sample</p>
</div>

div.four_corners {
position: relative;
width: 50%;
}
div.four_corners img {
position: absolute;
}
#a {
top: 0px;
left: 0px;
}
#b {
top: 0px;
right: 0px;
}
#c {
bottom: 0px;
left: 0px;
}
#d {
bottom: 0px;
right: 0px;
}

814 :809=805:01/10/18 00:56 ID:0+TzygDk
>>808
ありがとうございます。
やはり、あきらめるしかないのですね。

>>811
仕事の都合上、「表」以外ではtableは使えないのです。
視覚障害などアクセシビリティを持つ方も利用するので。

>>812
画像の高さの「中央」に置きたいのです。

815 :Name_Not_Found:01/10/18 02:23 ID:883dgJpn
>>814
適当だから保証はしないぞ。

img {float:left;height:400px;width:100px;}
p.monar{margin-top:200px}
p.new{clear:both;}

<div>
<img src="uso.png" height="400" width="100" alt="uso">
</div>

<p class="monar">
質問があります。画像の横にテキストを流しこむとモナーかわいい好きです。
のようになりますが、画像の横の文章を画像の高さの中央に置きたいのです。
つまり下のようにしたいのです。モナーかわいい好きです。
このようにすることは出来ますか?
</p>

<p class="new">
次の文章
</p>

816 :799:01/10/18 20:45 ID:oBX6Bbqp
>>801
基本だったんですね、知りませんでした。
どうもありがとう。早速試してみます。

817 :Name_Not_Found:01/10/20 14:02 ID:TxHm9M/E
文字に影がついてくれません。
外部CSSファイルじゃ駄目なのでしょうか?

僕がCSSファイルに書いた文言をコピぺしておきます。

.midashi{
font-weight : bold;
font-family : monospace;
filter : DropShadow(color=#FFCC00 , offX=4 , offY=4);
}

ちなみに、同じCSSファイルに記述した他のプロパティは
きちんと動作します。

当方、Win+IE5.5です。

818 :Name_Not_Found:01/10/20 14:07 ID:yqEgYQRV
width:100%;??

819 :依頼:01/10/20 14:35 ID:DBmSZzbW
痴漢でっちあげ女子高生に抗議しています。
クリックするだけで簡単投票はコチラ↓
http://www.pweb.ne.jp/~kouki/vote/tvote.cgi?event=vote1&sid=1002332773&item1=%92%86%91%BA%8DK%8Eq%83%81%83%93%83o%81%5B%81i%92s%8A%BF%82%C5%82%C1%82%BF%8F%E3%82%B0%8F%97%8Eq%8D%82%90%B6%81j&add=true
1時間に10票まで投票できます。
詳細は速報板の→【速報】前代未聞の極悪人女子高生中村幸子
http://news.2ch.net/test/read.cgi?bbs=news&key=1003548032
ぜひお立ち寄り下さい。お邪魔しました。

820 :Name_Not_Found:01/10/21 09:13 ID:7s6Am55z
>>817
widthを明示しよう

821 :Name_Not_Found:01/10/21 15:51 ID:sDh9b5hr
すいません質問です。
CSS でイケてるデザインサイトリンク集にあった
http://www.gihyo.co.jp/css/の本を買おうかと思ったんですが
ブックサビースで検索したら98年の本みたいで…。
内容は古くないんでしょうか?

822 :Name_Not_Found:01/10/21 16:15 ID:0U/WuZv1
>>821

だいじょうぶ。良書というものはそうすぐには古くなるものではありません。
いまだにそれ以上の良書をみたことがない。

でも在庫あるのかなあ?

823 :Name_Not_Found:01/10/21 16:30 ID:58YOYBuB
そうですか。では注文してみます。
どうもありがとうございました。

書店の店頭ではスタイルシートという文字を全然見つけられませんでした。

824 :Name_Not_Found:01/10/21 22:39 ID:aKz/I1VF
>>821
著者本人によって2000年4月にobsoleteされています。笑
ttp://www.asahi-net.or.jp/%7Ejy3k-sm/css1/index.html

「ビギニング XHTML」
 オープンウェアシステムズ監修
 インプレス刊
 4,980円
 ISBN4-8443-1489-0

「ユニバーサル HTML/XHTML」
 神崎正英著
 毎日コミュニケーションズ
 2,200円
 ISBN4-8399-0454-5

とか。

825 :821:01/10/22 04:09 ID:0Z6F+/bk
>824
ありがとう…もう注文しちゃいましたが……。

826 :Name_Not_Found:01/10/24 13:34 ID:+88VNZNg
レイヤーを使って動くアイキャッチ風の物を作りたいのです。
移動と表示/非表示はDWでWYSIWYG環境でスクリプト生成出来ますが
フォントサイズや透明度の設定はどうやったら良いのでしょう。
やはり手書きですか?それともWYSIWYGエディターがありますか?

827 :Name_Not_Found:01/10/24 15:18 ID:OuNQKuyX
>>826
http://natto.2ch.net/test/read.cgi/hp/1002699258/l50

828 :Name_Not_Found:01/10/24 17:08 ID:P4UQEWgH
質問です。まだCSS最近はまったばかりで知らぬことも多いのですが
みなさんよければ教えてください。もしかしたらすごい初歩的な質問かもしれませんが・・・

掲示板で、フォントサイズを10ptにしてあるのですが、
他にもいろいろ付け加えたため長くなったので外部ファイルから定義したところ
急にフォントサイズが変わってしまいました。というか、
それまではIEの「表示→文字のサイズ」を変えても変わらなかったのに
外部ファイルから定義した途端、10ptと指定してあるにもかかわらず大きさが変わってしまいます。
フォント小以上ではでかすぎて読みつらいんです。
内部に組み込めば直るんですけど重くなりそうで・・・、これってどうすればいいんでしょうか。

829 :Name_Not_Found:01/10/24 17:16 ID:JMptp3Hp
>>828
ptではなく、%で指定するのがいいと思われ。

830 :Name_Not_Found:01/10/24 17:34 ID:HlHCfrTb
>>828

>フォント小以上ではでかすぎて読みつらいんです。

ディスプレイ環境によって小がよかったり中がよかったりするので、
あなたが「小」がいいと思っていても、お客さんがそう思ってるとは限らんです。

たとえば、うちの15インチ1024×768では、中(12pt)でちょうどいい。
こういう環境(15インチ1024×768)は多いはず。

ロゴ的に使う文字なら画像とのバランスもあるだろうから絶対指定でもいいけど、
掲示板みたいに「読む」文字は特に大きさを指定せず、読者の好みにゆだねてほしい。
ここを絶対指定されるとほとんど読むに耐えない。

まあ、一般論はさておき、外部ファイルにして適用されなくなったってのは、
きっと何かを間違えているに違いない。

その外部CSSの中身と、それを呼び出しているタグをここに出しましょう。

831 :Name_Not_Found:01/10/24 21:13 ID:P4UQEWgH
私も1024×768なのですが、フォントをverdana,Arialにしてあるので
若干文字が大きくなってしまうんです。
さらに、アクセス解析を入れたら1024×768の次に800×600の方が多く、
1024×768なら10ptでも12ptでもさほど外観に影響ないんですが
800×600でフォント中−12ptのVerdana,Arial− だと、すごく大きな文字になってしまうのです。
私としては、フォント中で見てる人も多いと思うので、10ptに指定したいんですよ。
あと掲示板の配布スクリプト自体、デフォルトが10ptだったのでということもありますが。
なので外部にした途端どうしてサイズだけがちゃんと指定された通りになってくれないのか・・・
文字のサイズだけなんです。後はちゃんと問題ありません。

呼び出しタグ(bbs.cgi内のheadタグの中に入れてます)
<link rel=stylesheet type="text/css" href="base.css" title="bbs">

外部CSS"base.css"の中身(ちゃんと同じフォルダに入れてます)
body,tr,td,th { font-size: $pt; font-family: 'Verdana','Arial',sans-serif;}
a:link { font-size: $pt; text-decoration:underline; color:#00bfff;}
a:visited { font-size: $pt; text-decoration:underline; color:#1190ff;}
a:active { font-size: $pt; text-decoration:none; color:#0000ff; background-color:#e6e6fa ;}
a:hover { font-size: $pt; text-decoration:none; color:#0000ff; background-color:#e6e6fa ;}
span { font-size: $t_point }
big { font-size: $pt_b }
small { font-size: $pt_s }
div.back { background:black url(image/water.gif) no-repeat right bottom;
padding: 5px
border-top: 5px solid #ffffff;
border-bottom: 3px solid #888888;
border-left: 4px solid #666666;
border-right: 4px solid #666666;}
div.block { background:black url(image/back2.jpg) no-repeat;
clear:both;
margin: 0;
border: 1px solid #666699;
text-align: center;
padding: 7px;
width:70%; }
.form { font-size: $pt; color: #ffffff; background-color:#000000;
border: 1px solid #666699; }


$ptは、当然ですがbbs.cgiの最初の設定箇所で10ptにしてあります。この辺に何か問題あるのでしょうか。

832 :Name_Not_Found:01/10/24 21:15 ID:P4UQEWgH
あ、上の私は828です。

833 :Name_Not_Found:01/10/24 21:27 ID:70zg9aLH
$ではじまってるところを全部10ptに変えてみそ。

834 :Name_Not_Found:01/10/24 21:36 ID:EE5lfA1i
>>831

>$ptは、当然ですがbbs.cgiの最初の設定箇所で10ptにしてあります。この辺に何か問題あるのでしょうか。

それしかありえないでしょう。
CGIは<link rel=stylesheet type="text/css" href="base.css" title="bbs">
をHTML中に書き出すまでが自分の仕事で、外部のファイルに書かれたフォントの
大きさまで書き換えないでしょ?
そこに希望のポイント数を直接数値で入れたらどうなります?

HTML内部に書かれたCSSなら、CGIがその$ptの部分に既定値を代入した上で
出力するんでしょうが。

835 :Name_Not_Found:01/10/24 22:47 ID:P4UQEWgH
>>833,834
うわー!直りました!
なんで今までそんなことに気付かず変なところばかりいじっていたんだろう・・・
すっごいアホですね。ほんとお騒がせ申し訳ないです。
ああ、もっとがんばります・・・ギャフン。

836 :Name_Not_Found:01/10/25 15:11 ID:jUHW/cHl
>>831
別にVerdanaにしようがTahomaにしようがArialにしようが
12pt(=16px)なことには変わりないじゃん。
俺もVerdana指定してるけど大きさ変わらないよ?
読む人のことを考えてあげるならメインの文章はフォントサイズを変えないのが礼儀。
それで大きいと思う人は自分でフォントサイズ小や最小にする。
要するに>>830が言ってることとほとんど同じことを言いたいわけだけど。

あと pt 指定や px 指定は極力避けてくれ。
閲覧者が「文字大くてうぜえ」と思ってフォントサイズを小にしても12pt指定されていると12ptのまま変わらない。
「小さくて読みにくい」と思ってフォントサイズ大にしても10ptに指定されていると10ptのまま変わらない。
これが % 指定されていれば閲覧者の設定に応じて大小される。
まあこれはIEの実装が悪いといや悪いんだが。

837 :Name_Not_Found:01/10/25 16:42 ID:cSVIjGsI
>>836
ベラドンナは有毒だぞ。
素人にはおすすめできない。

838 :Name_Not_Found:01/10/25 17:24 ID:jUHW/cHl
>>837
ありゃ、そうなの?
理由きぼんぬ

839 :Name_Not_Found:01/10/25 17:28 ID:cSVIjGsI
>>838
ここ見てみ
http://www.joy.hi-ho.ne.jp/tukihara/poison/0022.htm

840 :Name_Not_Found:01/10/25 17:41 ID:HqnCwXzp
軽〜いネタレスしたらマジにとるヒトがいて
ちょこっと困ってる>>837がいるスレ。

841 :Name_Not_Found:01/10/25 21:53 ID:jUHW/cHl
なんだ、ネタか…

256 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)