07/10/26 00:43:50
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
《関連スレ》
Webサイト制作初心者用質問スレ Part 189
ｽﾚﾘﾝｸ(hp板)
/* CSS・スタイルシート質問スレッド【68th】
ｽﾚﾘﾝｸ(hp板)
2:Name_Not_Found
07/10/26 18:39:18
2
3:Name_Not_Found
07/10/27 00:50:03
初めての３ｹﾞｯﾂ！
4:Name_Not_Found
07/10/27 02:00:37
4ゲットー
5:Name_Not_Found
07/10/27 21:27:41
5ゲット！
6:Name_Not_Found
07/10/27 23:14:39
一桁！ 6get
7:Name_Not_Found
07/11/07 02:12:16
こんな↓感じの、ヘッダとフッタがあって、中央が左右ふたつ（左はメニューですが）
に別れているページの作成法について質問です。
HTMLは上から要素がABCDの順に記述されており、それをスタイルシートで段組にします。
[ A ]
[B][ C ]
[ D ]
問題は、↑の、Cの縦の長さが不定（１ページの半分くらい-２ページ分くらい）なため、
Bの方が長い場合とCの方が長い場合があり、例えばBをposition:absoluteで固定すると
Cの方が短い場合にBとDが重なってしまいます。
やりたいことは、「BとCの縦の長さが長い方に合わせてフッタDを配置する」なのですが、
これはスタイルシートではどのような位置指定をすれば出来るのでしょうか。
8:Name_Not_Found
07/11/07 02:41:42
>>7
position使うなら、他のブロックもpositionでレイアウトしないと。
floatにしてフッタDでclearした方が、希望に近いと思う。
9:Name_Not_Found
07/11/07 23:54:26
優しいスレだな、おい。
10:Name_Not_Found
07/11/08 07:28:26
>>8-9
ありがとうございます。調べてみます。
11:Name_Not_Found
07/11/13 11:13:09
IE6でレイアウトが崩れてしまって悩んでいます。
こちらのサイトで使われているものと同じテンプレートを買ったんですが、IE6でレイアウトが崩れることがあります。
URLﾘﾝｸ(www.med-designs.com)
URLﾘﾝｸ(www.med-designs.com)
URLﾘﾝｸ(www.med-designs.com)
上記URLの全てで、メニュー部分がコンテンツの一番下まで下がっていると思うのですが、私も同様の症状が出ています。
私の場合は、ブログでアーカイブされたページを表示する時にメニューが下まで下がってしまいました。
記事の数が少ない場合は問題ないのですが、数が多くなると（縦に長くなる）とレイアウトが崩れます。
IE6用にCSSが用意されていますが、それを修正すればよいのでしょうか？
解決策があればお願いします。
12:Name_Not_Found
07/11/14 19:22:11
>>11
URLﾘﾝｸ(www.geocities.jp)
URLﾘﾝｸ(redline.hippy.jp)
13:Name_Not_Found
07/11/18 21:42:21
>>12
ありがとうございました。
原因は、ブログエントリの１つで、貼っていた画像が少し大きかったからでした。
紹介してもらったリンクの内容を１つずつ確認していって、やっと気付く事が出来ました。
長い間悩んでいましたが解決して良かったです。リンク先のサイトの他の記事も凄く参考になりました。
14:お助け下さい
07/11/20 20:46:21 UNYsdm2G
MacOSX10.4.11にアップグレードしたら、Safariが3.0.4になり、
一部のWebのフォントが明朝で表示され読みにくくなってしまいました。
句読点が文頭に来るなど、見た目も崩れています。
環境設定の「表示」では、標準フォント等幅フォントともに
ヒラギノ角ゴになっています。
Safariのスレで初めてCSSというものの存在を知りましたが、
全くのド素人で何をどうしていいやらわかりません。
「/* CSS・スタイルシート質問スレッド【69th】」のテンプレを
いくらか開いてみましたが、実際の作業のやりかたがわかりません。
Safariを全部ヒラギノ角ゴ表示にしたいだけなのですが、
「CSSを自分で作る」ことをしなければならないでしょうか？
既に作成してあるCSSはないでしょうか？
全くの初心者が自分で作る為の説明サイトがあったら
誘導して下さい。お願いします。
15:Name_Not_Found
07/11/20 21:07:03
>>14
Safari38
ｽﾚﾘﾝｸ(mac板)
16:Name_Not_Found
07/11/20 21:17:23
>>14
正直板違いなんだが>>15読んでも理解出来ないだろ。これからは勉強してねってことで。
1.Text Edit メニュー＞フォーマット＞シンプルテキストにしてから下記をコピー
* {font-family:"Hiragino Kaku Gothic Pro",sans-serif !important;}
2.ファイル名を○○.cssとしてわかる場所に保存（.txtにしないように注意）
3.Sahari 環境設定＞詳細＞スタイルシート で上記ファイルを指定
17:お助け下さい
07/11/21 00:35:19
すみません。やってみます。
18:助けていただきました
07/11/21 00:43:42
>>16
ありがとうございました！出来ました！！
本当に助かりました！！ 感謝感激です！！！
19:Name_Not_Found
07/11/28 08:55:10 Qzt8Huoz
質問です。
Firefoxの一部のスキンで検索バーやアドレスバーが
クリック(アクティブ状態)して画像が変わるのですが
これをweb上の検索窓で実現させることは可能でしょうか？
20:Name_Not_Found
07/11/28 17:09:00
>>19
Firefoxテーマは山程あるので、どのテーマまたはアドオンなのか具体的に。
また、web上の検索窓とは自サイトの検索窓の事なのかを明確に。
21:Name_Not_Found
07/11/28 22:01:54
>>19
cssに動的なアレを求めるのはお門違い。
「テキストエリア 背景画像 JavaScript」でググれ。
22:Name_Not_Found
07/12/01 01:41:01
html
<div class=box1>AAAAAAAAAAAAAAAA</div>
css
.box1 {width:200;height:200;}
で下詰めにできませんか？
vertical-align:bottom;
をやってみましたがだめでした・・・
23:Name_Not_Found
07/12/01 06:45:32
>>22
・文章ならp要素。
・vertical-alignはインライン要素に使う。
・数値にはほとんどの場合、単位が必要。
24:Name_Not_Found
07/12/07 13:46:25
>>22
divを二重にすればできなくもないが…
.box1 { position: relative; width: 200px; height: 200px }
.box2 { position: absolute; bottom: 0 }
<div class="box1">
<div class="box2">AAAAAAAAAAAAAAAA</div>
</div>
行ボックスを下に揃えるってやっぱ無理なのかな？
25:Name_Not_Found
07/12/11 23:51:00
wikiの日本語表記の部分を英語表記にしたいんですが
どうすればいいんでしょうか？
URLﾘﾝｸ(www29.atwiki.jp)
ここのトップページという表記を英語とかにしたいんです。
26:Name_Not_Found
07/12/12 00:22:26
>>24
おお、できた！！ﾄﾝｸｽ。単位漏れﾊｽﾞｶｼｽorz
27:Name_Not_Found
07/12/12 00:24:56
>>25
ブログ板にwikiスレがある。
質問もcssに関係ないhtmlの話。
28:25
07/12/12 01:52:27
>>27
ありがとごじゃます。＞誘導
そっちの知識はさっぱりでして・・・（＾＾；
29:Name_Not_Found
08/01/03 01:06:10
age
30:Name_Not_Found
08/01/06 12:26:31 p0Of7KpV
URLﾘﾝｸ(blog.goo.ne.jp)
の一番上の右端に画像を貼り付けたいんですが
どうしたらいいですか？
ホント初心者なんでスレ読んでもわかんなくて・・＞＜
しょうもないこと聞いてすみません↓
レスお願いします!
31:Name_Not_Found
08/01/06 15:28:29
マルチは氏ね
32:Name_Not_Found
08/01/06 15:41:49
マルチするのは上級者の役目なんだが
33:Name_Not_Found
08/01/06 16:03:08
人間初心者だろ。
34:Name_Not_Found
08/01/06 16:19:30
おまいは剥けてから言うように !
35:Name_Not_Found
08/01/06 16:25:41
二匹目の人間初心者
36:Name_Not_Found
08/01/06 16:57:21
>>30
body {
background-image: url(画像アド);
background-repeat: no-repeat;
background-position: right top;
}
37:Name_Not_Found
08/01/06 17:19:38
>>36
マルチの上、解決済みです。
38:Name_Not_Found
08/01/06 18:00:09
ライトップなんて2重命令できんのか？
39:Name_Not_Found
08/01/06 18:17:18
こちらのスレではマルチ歓迎です
40:Name_Not_Found
08/01/06 18:35:28
>>38
なぜできないと思うんだ？
そもそも二重って言い方もおかしいが。
41:Name_Not_Found
08/01/06 18:36:55
>>40
それは俺の固定概念があったからだよ
42:Name_Not_Found
08/01/06 18:55:46
>>40はエスパーだな。
43:Name_Not_Found
08/01/06 18:59:33 vy6uNWad
>>36 さん
ありがとうございました☆゜
44:Name_Not_Found
08/01/06 19:02:19
>>43
まず謝れ馬鹿。
45:Name_Not_Found
08/01/06 19:04:25
というか移動しろと言われてきてるのにマルチとは何事か
46:Name_Not_Found
08/01/06 19:08:39
＞ありがとうございますッ
＞初心者スレ行かなくてすいません＞＜
何時間経ってると思ってんだ馬鹿。
47:Name_Not_Found
08/01/06 19:10:10
キモい顔文字使う奴なんてそんなもんだよ・・
48:Name_Not_Found
08/01/06 19:11:47
>>46
時間関係あるのか？
49:Name_Not_Found
08/01/06 19:17:23 vZ2XIm5l
>>43
ちょｗその前に本文の文字色なんとかしろｗ
50:Name_Not_Found
08/01/06 19:21:49
どうせ人来ない
51:Name_Not_Found
08/01/06 21:33:28
こっちにも初心者叩きが湧くのかよ…
52:Name_Not_Found
08/01/08 17:30:24
左にナビゲーション、右にコンテンツ内容の文章という、よくある形。
印刷用として、Javascriptを使ってCSSを切り替えて、
代替スタイルシートで左ナビの表示をdisplay:none で消して表示させて
いるのですが、実際に印刷すると、見えないナビが印刷されてしまいます。
問題はXPのIE6でおきており、どうやら既知のバグのようなのですが、
これを回避する方法はあるでしょうか。
できれば、印刷用のページを別に作るのではなく、同じページを
CSS切り替えで使い回せたらと思ったのですが…。
53:Name_Not_Found
08/01/08 18:02:16
media="print"
54:Name_Not_Found
08/01/09 01:52:57
>>53
52です。不要なナビを非表示にする設定をしたcssを、media="print"に
するということ？
そうすると、印刷用のページに切り替えた時に、印刷されないナビが
表示されたままになってしまいませんか？
同じ内容のcssを別名で用意して、そっちをprintにして一緒に読み込ませれば
いいということかな…。
こんがらがってワケわからなくなってきた…orz
とりあえず、試してみます。どうもありがとう。
55:Name_Not_Found
08/01/09 13:21:12
52です。なんとなく解決したようです。どうもお邪魔しました。
56:Name_Not_Found
08/01/09 19:41:21 ilsPoUkq
済みません～。リンクと既読済みのリンクに色を付けたいのですが、
<SPAN STYLE="color:#ff6666">
みたいなやり方でやる場合は、どのような記入でするのでしょうか？
お願いしますー。
57:Name_Not_Found
08/01/09 19:50:24
；最後にこれがいる
58:Name_Not_Found
08/01/09 20:00:51
>>56
そんなやり方ならcss使うまでもありません。htmlで十分です。
59:Name_Not_Found
08/01/09 20:05:29 ilsPoUkq
>>58
某RSS使ってるんですけど、スタイルシートじゃないと反映しないみたいなんで、
お願いしますだ～。
60:Name_Not_Found
08/01/09 20:17:27 ilsPoUkq
おまえらみんなウンコオオオおおおおおおおおおおおおおおおお
ヘッダの中に入れてできたからいいもん～だ
もう来ないよ
ぺっえええええええええええ
61:Name_Not_Found
08/01/09 22:25:24
>>56
ヘッダー内に
a:link{
color:#f666;
}
a:visited{
color:ff6666;
}
62:Name_Not_Found
08/01/09 22:26:30
なんだウンコまでしか読んでなかった('A`ﾒ)ﾁッ
63:Name_Not_Found
08/01/09 22:35:40
ｳﾝｺまで読んで回答するお前に惚れた
64:Name_Not_Found
08/01/10 01:00:30
>>56
<style type="text/css">
a:link { color: #00ff00; }
a:visited { color: #0000ff; }
</style>
みたいなのを<head>...</head>の中に
65:Name_Not_Found
08/01/10 01:01:50
アホばかり
66:Name_Not_Found
08/01/10 13:38:36
>>65 だから初心者向け
67:Name_Not_Found
08/01/10 13:44:06
なんにでも始めてはある
先駆者がえらいって分野でもあるまい
68:Name_Not_Found
08/01/10 17:54:59
ココは初心者ｽﾚです
煽り叩きは一切禁止
69:Name_Not_Found
08/01/10 20:28:18
回答者も初心者でいい、というスレではない。
70:Name_Not_Found
08/01/10 20:29:44
>>69
ｽﾚﾘﾝｸ(hp板)
ここから出てくるなっていったろ
71:Name_Not_Found
08/01/10 20:45:15
流れも読まずに、答えたがり共がソース書きまくるって馬鹿だろ。
72:Name_Not_Found
08/01/10 20:58:08
あはは
73:Name_Not_Found
08/01/10 21:03:59
>>71
知られたらWEB制作会社儲からないもんな
74:Name_Not_Found
08/01/10 21:20:30
>>73
会社に頼んでるんだ。どんだけー
75:Name_Not_Found
08/01/10 22:20:27
質問よいですか？
最近流行りのブログの形をしたページを作ろうと思ってます。
ヘッダ、左にメニュー一覧、メニューの右側に文章などを書けるスペース、フッダ
ってやつです。
<div>でそれぞれ、ヘッダ、メニュー、文章、フッダというように4つに分けているんですが。
この<div>で作ったボックスをブログのようにセンタリングするにはどうすればよいでしょうか？
76:Name_Not_Found
08/01/10 22:27:10
>>75
2カラムでググる。
URLﾘﾝｸ(www.geocities.jp)
77:Name_Not_Found
08/01/10 22:38:10
>>75
body { text-align: center; }
#container { text-align: left; margin-left: auto; margin-right: auto; }
<body>
<div id="container">
ここにメニューや文章などのdiv要素
</div>
</body>
詳しくは
URLﾘﾝｸ(www.mozilla.gr.jp)
を読んでください。
78:Name_Not_Found
08/01/10 22:57:33
>>77
よくまあ堂々とそんなソース出せるもんだ。初心者は厚顔無恥ってこったな。
79:Name_Not_Found
08/01/10 23:08:56
できました！！
ありがとうございます。
80:Name_Not_Found
08/01/11 00:07:42
>>78
中野さんに「よくそんな恥ずかしいソース晒せますね」ってメールするといいと思うよ。
81:Name_Not_Found
08/01/11 00:10:33
>>78
上級スレにお帰りくださいませｗ
82:Name_Not_Found
08/01/11 00:15:31
>>80
そんな古い記事を手本にしてるおまえが馬鹿。
>>81
初心者が初心者にいい加減なこと教えて何かいい事があるの？
83:Name_Not_Found
08/01/11 00:21:20
>>82
お手本となるソースを教えてください＞＜
84:Name_Not_Found
08/01/11 00:28:43
>>82
自分も知りたいです。後方互換のIE対応でブロックレベル要素をセンタリング
する方法がほかにあるんですよね。上級者様、お願いします。
85:Name_Not_Found
08/01/11 00:29:20
>>82
せっかく上級付けて隔離したのにわざわざでてくるなよｗ
86:Name_Not_Found
08/01/11 00:30:53
聞いても無駄。適当に理由つけて逃げるだけ。
87:Name_Not_Found
08/01/11 00:31:57
>>83
ソースをお手本？何を勘違いしてるんだか。
88:Name_Not_Found
08/01/11 00:32:28
本当だｗ
89:Name_Not_Found
08/01/11 00:33:18
>>84
>>86に答えが出てるだろ。
90:Name_Not_Found
08/01/11 00:34:05
ほう
さすが上級者
91:Name_Not_Found
08/01/11 00:47:33
面倒くさいから、cssを使う時の基本を教えてやるよ。
HTML4.0な。XHTMLなんか初心者には無駄だからな。
□標準モードにする
・Transitionalなら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"URLﾘﾝｸ(www.w3.org)">
・strictなら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"URLﾘﾝｸ(www.w3.org)">
□ブラウザ初期値をリセットする
・最低これをcssに入れる
* {margin:0; padding:0;}
92:Name_Not_Found
08/01/11 00:53:30
>>91
正しいHTML・CSS教えますスレでもたててそこでやれよ
93:Name_Not_Found
08/01/11 00:57:13
なるほど、上級者様の間では
ユニバーサルセレクタでmarginとpaddingを0にするのが
ナウいやりかたなんですね！
94:Name_Not_Found
08/01/11 00:58:58
>>91
答えになってないワロタw
95:Name_Not_Found
08/01/11 01:11:01
□段組＝カラム
・解説サイトはググればいくらでもある。タダなんだからどんどん読め。
□ブロックレベルとインラインレベル
・要素は大きく分けてこの2種類。それぞれ使えるプロバティが違うから、以下同上。
□センタリング
・よくある間違いとして、ブロックレベルをtext-align:center;でセンタリングさせている。
これは特定ブラウザの誤った仕様なので、忘れる事。
text-align:center;でセンタリング出来るのはインラインレベル。
・ブロックレベルのセンタリングの例として、
div {margin:0 auto; width:xx%;}
div {margin-left:xx%; margin-right:xx%;}
など。
96:Name_Not_Found
08/01/11 01:13:38
>>92-94
おまえらは人を馬鹿にする事しか出来ないのか？
グダグダ言ってる間に、1個でも初心者にコツを伝授してやれ。
97:Name_Not_Found
08/01/11 01:26:31
>>96
スレッド立ててやったから、こっちに移動しな。
【W3C準拠】正しいHTML・CSS教えます【ウェブ標準】
ｽﾚﾘﾝｸ(hp板)
98:Name_Not_Found
08/01/11 01:28:40
>>96
スレ立ててもらえてよかったですね
さようならｗ
99:Name_Not_Found
08/01/11 01:38:50
>>97-98
おまえらには呆れるな。本当に脳味噌腐ってるわ。
その糞スレの削除依頼責任持って出せよ。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ここで質問してもいい加減な答えしか返って来ない。
馬鹿が常駐しているので全くの無意味。
どうでもいいから答えが欲しい人はどーぞ。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
100:Name_Not_Found
08/01/11 01:42:00
ほれ、初心者にコツを伝授したいんだろ。>>97を活用しろよ。
101:Name_Not_Found
08/01/11 07:17:16
つーか、>>78で初心者を馬鹿にしといて
何言ってんだって話だよな。ただのキチガイじゃん。
もう>>97のスレから出てくんなよ。
102:Name_Not_Found
08/01/11 09:00:59
あるHP作成ソフトで作ったブログページをWin6で表示すると、自動的に少し下にスクロールして表示されてしまいます。
テクノラティなんかに記録されているサムネイルを見て気がつきました。
これは一般的に症例のある症状なんでしょうか？
（ページやソースを晒さないとどうにも答えようがないでしょうか？）
103:Name_Not_Found
08/01/11 09:17:18
リンクが途中のIDに張られてるとかじゃなくて？
104:Name_Not_Found
08/01/11 10:26:26
>>102
アドレスに＃とかついてない？
105:Name_Not_Found
08/01/11 14:04:29 xQPfkY8A
すまん
padding : 10px 70px 20px 30px;
とやったとき
┌──────┐
│ ↑ │
│ 10px │
│ ↓ │
│←30px→ぬるぽ←70px→│
│ ↑ │
│ 20px │
│ ↓ │
└──────┘
これであってたよな？
なんか
┌──────┐
│ ↑ │
│ 10px │
│ ↓ │
│←70px→ぬるぽ←30px→│
│ ↑ │
│ 20px │
│ ↓ │
└──────┘
こうなったんだが・・・
30と70が左右逆な気がするんだが・・・
os:meブラウザ:IE6
俺間違って覚えてえる？
106:Name_Not_Found
08/01/11 15:01:27
逆なら逆で数字くらい入れかえるだろ
107:Name_Not_Found
08/01/11 18:35:34
>>105
WinXP+IE6で表示させてみたけど、上の図のようになったよ。
ソース：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>test</title>
</head>
<body>
<div style="border: 1px solid gray;
padding : 10px 70px 20px 30px;">
テキスト テキスト …</div>
</body>
</html>
108:Name_Not_Found
08/01/11 22:39:55
>>105
上であってるよ
109:102
08/01/12 00:13:07
>>103,104
誤爆質問でした…。答えて頂いてありがとうございます。
アドレスに#などは付けていませんでしたが、<body>のすぐ下にページトップに戻る用のIDをいれています。
（ちなみにブログページはサイトのトップページにしています。）
その上には何も記述していないのですがそれが原因なんでしょうか。その辺を調べてみようと思います。
スレ違い失礼しました。
110:Name_Not_Found
08/01/12 00:42:12
>>109
たまにページの作り方間違えてるとなることがある。
html-lintで確認してみな。
111:Name_Not_Found
08/01/12 21:51:44
誘導されて来ました
ｽﾚﾘﾝｸ(hp板:6番)
スクロールバーの色指定はIE限定ですか？
112:Name_Not_Found
08/01/12 22:23:12
text-decoration:underline;
としている場合、サイトによってフォントとアンダーラインの間が空いている場合があるのですが、これはどういう要因でなるのでしょうか？
例えば
楽天 URLﾘﾝｸ(www.rakuten.co.jp)
だとフォントとアンダーラインに間隔がありませんが
Amazon URLﾘﾝｸ(www.amazon.co.jp)
だと少しだけ間隔がありますよね。
後者の方がデザイン的に見やすいのかな～と思っています。
ご指南よろしくお願いします。
113:Name_Not_Found
08/01/12 22:25:29 JiUKiMMb
すいません。IEとFireFoxで見え方が違うようですね。IEだとどちらも間隔がありませんでした。
114:Name_Not_Found
08/01/13 00:07:36
>>111 そだよ
独自拡張みたいなもんだったはず 記述は忘れたけど
Fxじゃ使えないとかいう以前に、UI無視でやるしかないから、
クライックテーマ使っている人でもないと、なんかうざいっていう問題もある
115:Name_Not_Found
08/01/13 00:18:33
一応Operaもだった気が
116:Name_Not_Found
08/01/13 10:19:03
>>112
Windowsのブラウザでいろいろ表示してみたけれど、違いがよくわからなかった。
underlineの位置を調節するのは、CSSではできないはず。
117:Name_Not_Found
08/01/13 11:58:38
IEとOperaだな＜スクロールバーの色
自分が落としたOperaの場合、初期設定では反映されなかったので
プロパティで有効にした。
118:Name_Not_Found
08/01/13 12:02:50
ﾎﾟｶｰﾝ（AA略
119:111
08/01/13 14:51:22
>>114>>115>>117
ありがとう
120:Name_Not_Found
08/01/13 23:58:14 ldkFNhcf
CSSでリストを下記のように配置するとき、
A B
C D
A-B幅が一定なのでULで幅を指定し、float:leftとするとCで折り返すので、
狙ったとおりのレイアウトになるのですが、
AとBの高さが異なると、C-Dががたがたになってしまいます。
AまたはB要素に合わせてその逆のBまたはA要素が可変してくれると
レイアウトを合わせられるのですが、うまいやり方ないでしょうか？
現状やり方が思いつかなくて、ABでULを一旦終了させて回り込みをクリアさせて、
またULでCDとしているのですが、スマートじゃない気がします。
よろしくお願いします。
121:Name_Not_Found
08/01/14 01:05:25
テーブルでもない限り高さの可変は無理じゃね？
ABの高さが一定になるようにテキストで工夫せよ
122:Name_Not_Found
08/01/14 12:24:54
Cをclear:leftでどうよ
123:Name_Not_Found
08/01/14 16:50:05 M2ruLRIZ
macとWinで表示が異なるのでjavascriptで
CSSを分けて表示させようと思います
解説サイトを参考に以下のように書いて読み込ませると、
win,macともにFireFOXがcssのリンクを読んでくれません
var os = (navigator.appVersion.indexOf ("Win", 0) != -1) ? "win" : "mac";
var bw = (navigator.appName.indexOf ("Mic", 0) != -1) ? "ie" : "ns";
document.write ('<link rel="stylesheet" type="text/css" href="./' + os + '-' + bw + '.css">');
原因と対策のヒントを頂けませんか？
124:Name_Not_Found
08/01/14 18:59:55
スレタイ百回読んで下さい
125:Name_Not_Found
08/01/14 19:09:50
>>124
スレタイ百壱回読んで下さい
126:Name_Not_Found
08/01/14 19:17:19
ﾂﾏﾝﾈ
127:Name_Not_Found
08/01/14 23:46:59 z95ZkZZo
Macで見てる人は居ないと思って作成してま
128:Name_Not_Found
08/01/15 02:08:59 grzGtbf2
そりゃ悪かったです
私自身がcssは初心者なので、ここで良いかと思ったんですよ
Yahooのトップのページなどは、Win、Macのどのブラウザで見ても
ほぼ同じように表示されます、コンテンツのページは違うけどね
やっぱりそれなりに凄いなぁと感心しますね
どうもFirefoxはJavaScriptに記載されたstyleとかリンクを読めないようです
この手法は諦めました
結果、WinのFirefoxだけを捨てるのが私の力の限界点です
結果報告でした
129:Name_Not_Found
08/01/15 02:25:20
>>128
おまえがCSS初心者であることこと、
おまえがここでJavaScriptの質問をすることは、
何の関連性もない。
130:Name_Not_Found
08/01/15 02:52:23
>>128
大胆な決断だなあ。あまりいい方法ではないが.htaccess + mod_rewriteで
User-Agentを見てCSS振り分けって手もあるよ。
WindowsのFirefoxとMacのFirefoxとの表示の差異が、CSSを振り分けないとい
けないほどのものなのか、ちょっと気になった。
131:Name_Not_Found
08/01/17 12:30:33
>>107,108
レス遅れてすいません。>>105です。
検証ありがとうございます。
何で俺のだけ逆になってるんだろう・・・？
132:Name_Not_Found
08/01/17 13:07:24 ZpuiBZVV
▼DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"URLﾘﾝｸ(www.w3.org)">
▼機種
Docomo SH904i
上記で、<div style="display:-wap-marquee;">Text</div>
で、マーキーのように文字をスクロールさせたいのですが、動いてくれません。
どのようにすれば動いてくれるのでしょうか？
133:Name_Not_Found
08/01/17 17:34:55
階層式メニューを作りたいのです。bodyのidで切り替えできるようにしたいです。
Dreamweaverのデザインビューではちゃんとサブメニューが見えるのに、
ブラウザでプレビューすると見えません。どう指定すればよいでしょうか。
displayだけじゃ足りませんか？
MacOSXの10.4.11で、Safari3.0.4、FireFox2.0.0.11で確認しました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "URLﾘﾝｸ(www.w3.org)">
<body id="show">
<ul>
<li id="hoge"><a href="#">メニュー1</a>
<ul><li><a href="#">メニュー1-1</a></li>
<li><a href="#">メニュー1-2</a></li></ul></li>
<li id="hoge2"><a href="#">メニュー2</a>
<ul><li><a href="#">メニュー2-1</a></li>
<li><a href="#">メニュー2-2</a></li></ul></li>
</ul>
ul li ul{
display: none;
}
#show ul li#hoge ul {
display: block;
}
134:Name_Not_Found
08/01/17 17:40:21
>>133
CSSだけじゃ現状無理。
JSのやつは探せばいっぱいあるよ。
135:Name_Not_Found
08/01/17 23:35:03
>>133
WindowsのOpera 9.5、Firefox 2.0.0.11ではメニュー1-1と1-2がちゃんと表示されたよ。
ググればサンプルがたくさん見つかるので、参考にしてください。
URLﾘﾝｸ(www.google.com)
136:Name_Not_Found
08/01/18 10:34:41
>>134,135
ありがとうございました
自分でググって見ても、js使うものしか出てこなかったんで、
やっぱCSSオンリーでは無理なのかなと思ってました
Macでは簡単にいかないと言うことでしょうか
検索の糸口も見つかったし、いろいろ試してみようと思います
137:Name_Not_Found
08/01/18 14:14:22
再び来ました。>>133,136です。
マウスオーバーでメニューがフロートで出てくるものではなくて、
HTMLには予めすべてのメニューを書いておいて、
コンテンツごとにサブメニューの表示非表示を切り替えたいのです。
よくある左タテメニューです。
>>133のソースで言うと、メニュー1-1と1-2が表示されたことによって
メニュー2が移動すればいいのかと思い、マージンで位置移動しましたが、
空いた空間にやっぱりメニュー1-1と1-2は表示されていませんでした。
windowsなら見えるのなら、macではもう仕方ないのでしょうか。
138:Name_Not_Found
08/01/18 14:34:07
身の丈に合ったもの作りなよ。
139:Name_Not_Found
08/01/18 14:36:19
>>137
何か記述ミスしている可能性が高いんじゃないかな。
Windowsではうまく表示できたファイル↓
URLﾘﾝｸ(www.hsjp.net)
検証してみて。
140:Name_Not_Found
08/01/18 21:08:13
>>139
ファイルありがとうございました！
よく見直して、原因がわかりました。
bodyのidのひとつに、数字から始まるものがありました。
気を付けていたのですが、コンテンツ名がそれだったのでウッカリ。
そのページ以外にも反応しなかった理由はわかりませんが、
↓こんな感じでまとめて指定したのが影響したようです。
#show ul li#hoge ul ,
#2show ul li#hoge2 ul,
#show3 ul li#hoge3 ul {
display: block;
}
141:Name_Not_Found
08/01/18 21:30:41 T4uhgX14
二つのリストを横に並べるにはどうすればいいでしょうか？
リストは以下のように作成しました。[ListA], [ListB]
<ul>
<li>Test1</li>
<li>Test2</li>
</ul>
上記のようなリストを二つ用意し、これらを横に並べたいと思います。
また、これらを一つのブロックとして管理したいです。
<div align="center">
[ListA] [ListB]
</div>
よろしくお願いします。
142:Name_Not_Found
08/01/18 21:48:22
ヒント インライン
あとはググッてちょ
143:Name_Not_Found
08/01/18 21:49:17
いやfloatだろw
144:Name_Not_Found
08/01/18 21:52:47
[ListA]ってのがulならfloat。
liならdisplay:inline。
ついでに仮にもCSS使うならalign属性はやめとけ。
145:Name_Not_Found
08/01/18 22:05:19
別にliもfloatでいいけどな。
146:Name_Not_Found
08/01/18 22:18:02
>>145
昔、lifloatでulをセンタリングだとおかしくなるのがあった気がするから。
147:Name_Not_Found
08/01/18 22:18:07
ｃｓｓで擬似テーブルみたいなのを作って行を切り替えたら勝手にboxが出てくるように設定してるんだけど
それの1部分だけ背景の色を変えたいんだけどCSSの修正なしで追加だけで設定できる方法ないですか？
148:Name_Not_Found
08/01/18 22:23:36
日本語でおＫ
149:Name_Not_Found
08/01/18 22:26:44 T4uhgX14
>>142-146
お早い、アドバイスありがとうございます。
ご指摘どおり、floatプロパティを追加してみたところ正常に表示が
行われました。
150:Name_Not_Found
08/01/19 01:32:51
>>147
ソースがないとわからない。
151:Name_Not_Found
08/01/19 17:20:08 lwqCD2/+
ほぼ同じスタイルで一部（例えばwidth）だけが違う複数のdivのスタイル指定を
[css]
.box {color:white; border:1px solid blue; background-color:red;}
#box1 {width:300px;}
#box2 {width:200px;}
.box_s {width:100px;}
[html]
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box box_s">box_s 1</div>
<div class="box box_s">box_s 2</div>
としたら、思い通りにできたんだけど、これが普通のやり方？
152:Name_Not_Found
08/01/19 18:04:37
>>151
普通だよ。.boxの内容を#box1,#box2,.box_sに書いても同じになるけど、
ボーダーの線種だけを個別に変えたりするようなことがないのなら、
>>151でいいと思う。
153:Name_Not_Found
08/01/19 22:56:22
>>151
[css]
.box {color:white; border:1px solid blue; background-color:red; width:100px;}
#box1 {width:300px;}
#box2 {width:200px;}
[html]
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box">box_s 1</div>
<div class="box">box_s 2</div>
おれならこうする
154:Name_Not_Found
08/01/20 21:30:36
div idで指定されている画像に
トップページのリンクを貼るにはどうすればいいでしょうか？
div idをa hrefで括ってしまっても良いものなんでしょうか？
155:Name_Not_Found
08/01/20 22:56:49
>>154
駄目。
それ以前に完全にスレ違い。
156:Name_Not_Found
08/01/20 23:19:21
>>154
完全にはすれ違いではないかも。
とりあえず、divいっぱいにaを広げたらいいんでない？
blockとか使って。
157:Name_Not_Found
08/01/21 00:17:57
#HEADER
height:～px;
background:url(img) no-repeat 0% 0%;
#HEADER a
display: block;
width: ～px;
height:～px;
widthはページのサイズにあわせて
heightはheaerのサイズにあわせています
<a href="～html" div id="HEADER"></a>
こうするとリンクはおろかヘッダー画像が表示されずサイトの本文が
本来フッターがある場所より下に表示されます
スレ違いでしたら申し訳ありませんが
どこのスレへ行けば良いのかさっぱり分からないので誘導をお願いします
158:Name_Not_Found
08/01/21 01:33:11
>>154
背景画像に無理やりリンク貼るぐらいなら<img />使えば？
159:Name_Not_Found
08/01/21 09:26:23
>>156
おまえが初心者だから
悪いことは言わない、勉強しておいで。
>>157
中身が空だとまともに機能しなくて当然です・・・
>>158にしてください。
160:Name_Not_Found
08/01/21 10:00:31
どこであんなのを覚えてくるんだろうねぇ・・・
お母さんは悲しいよ。
161:Name_Not_Found
08/01/21 16:35:06 K5Z5EnIx
背景を、ブラウザの大きさに合わせて、拡大、縮小したいんですが、
そういうことはスタイルシートでできますか？
162:Name_Not_Found
08/01/21 16:58:18
そんなこといわれたのはじめてだ
163:Name_Not_Found
08/01/21 17:08:11
できるよ
pngにしておいて、パーセント指定
のはずなんだけど･･･
したことないからわかんない
164:Name_Not_Found
08/01/21 17:37:15
>>163
パーセント指定、とはどこでどうやるんでしょうか…？
165:Name_Not_Found
08/01/21 17:45:00
そこからかよｗ
166:Name_Not_Found
08/01/21 18:02:16
>>165
いや、場所のパーセント指定はやったことあるんですが…。
大きさのパーセント指定？？
そんなパラメータありました？
167:Name_Not_Found
08/01/21 18:41:40
100px→50%
168:Name_Not_Found
08/01/21 21:05:19
.marie a:link,a:visited { color: #fff; border-left: #fff 5px solid; }
.marie a:hover { color: #000; border-left: #000 5px solid; }
｜ ヘッダ ｜
｜1｜２｜３｜
｜ フッタ ｜
おい、カラム２の中にあるテキストリンクにカーソルを合わせたら、
IE6だけ、｜１２３｜と｜フッター｜の間に余白ができたりするんだが、どういうことだ？
ａ要素で指定してるborderを削ったらできたりしないんだが、hoverってお前らどう読む？
169:Name_Not_Found
08/01/21 21:09:12
>>161
背景画像はできないよ。
170:Name_Not_Found
08/01/21 21:44:34
h3でタイトルを付けてリンクをリストしたいのですが
リストの途中でh3タイトルを付けると
以下全てのリストがIEで見たときに左に寄ってしまいます
こんなふうにulでh3を囲んでしまうとなぜか寄らなくなります
</li>
</ul>
<ul>
<h3>タイトル</h3>
</ul>
<ul>
<li>
#side h3
margin:5px 10px 10px;
#side ul
list-style:none outside;
margin:0.5em 1.8em 0.2em 1.4em;
どうすればIEでずれずに表示されるんでしょうか？
171:Name_Not_Found
08/01/21 21:53:14
<li>とか<ul>には<hx>タグはつけんとちゃうん？
172:Name_Not_Found
08/01/21 22:00:24
>>170
スレ違い。
html-lintにでも行ってください。
173:Name_Not_Found
08/01/21 22:05:28
彼の真の狙いはブラウザ間による余白の違いでしょう。
IEで寄っていると述べているので、Firefoxに合わせたいと考えているに違いありません。
#side ul
list-style:none outside;
margin:0.5em 1.8em 0.2em 1.4em;
padding: 0 0 0 40px;
これで問題ないはずです。
<h>は<textarea>で囲んでその中にタイトルを書き込めばいいと思いますよ。
174:Name_Not_Found
08/01/21 22:40:02
>>173
初心者をからかうな
175:Name_Not_Found
08/01/22 00:10:49
>>170
IE7、Firefox2、Opera9で表示させてみたが、変わったところはなかったよ。
↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>test</title></head>
<body>
<ul><li>list1</li></ul>
<h3>h3 element</h3>
<ul><li>list2</li></ul>
</body>
</html>
176:Name_Not_Found
08/01/22 00:40:29
全然別物になってる件
177:Name_Not_Found
08/01/22 01:05:58 g7vGqz/4
>>171
ユニバーサルクリアした？
178:Name_Not_Found
08/01/22 01:06:55 g7vGqz/4
↑めんご
>>170宛
179:Name_Not_Found
08/01/22 08:39:29
>168
メ欄が気に入らない
情報の小出しが気に入らない
態度が気に入らない
180:151
08/01/22 11:17:29
>>152-153
ありがとう。
181:Name_Not_Found
08/01/22 17:14:36
>>169
ありがとうございました。
やっぱり背景画像ではできないんですね、どうしようかな…。
182:sage
08/01/22 19:03:45 sc0mVWWn
質問させてください。
今、姉に頼まれてサイトを作っています。
トップページのレイアウトができて仮ＵＰしたのですが、私のＰＣ（ＩＥ６）ではちゃんと表示されているのに、姉のＰＣ（ＩＥ５）ではズレて表示されているようです。
このような場合、どのように対処したら良いのでしょうか・・・
詳しい方宜しくお願いします＞＜
183:Name_Not_Found
08/01/22 19:06:44
>>182
それだけでアドバイスできると思ってんのか？
とりあえず姉のほめぱげうｐ
184:Name_Not_Found
08/01/22 19:14:38
>>182
CSSはIE6.0と5.0で違いがあるみたいだね
よく知らんけど
185:Name_Not_Found
08/01/22 19:14:57
>>183
あほ スリーサイズが先だろ ?
186:Name_Not_Found
08/01/22 19:47:50
姉は上付きなんだよ
187:182
08/01/22 20:36:35
>>183
2ちゃんに晒すほどの勇気は持ち合わせていません。
ありがとうございました。
自力でなんとかします＾＾
188:Name_Not_Found
08/01/22 22:46:35
IE5なんて使うな
189:Name_Not_Found
08/01/23 08:06:28
>187
じゃぁ最初から質問なんかしないほうがいいと思ったのは俺ちゃんだけ？
姉のスペックうｐはまだぁ？
190:Name_Not_Found
08/01/23 15:43:11
姉は38歳とかだよ
191:Name_Not_Found
08/01/23 16:21:34
どんと来い 熟女カモン
192:Name_Not_Found
08/01/23 21:50:03 FDmg1s+n
IEで見ると、行の最後に半角スペースが入ってしまうのですが
これを防ぐことはCSSで出来ますか？
もし、出来るのであればやり方を教えていただきたいです
193:Name_Not_Found
08/01/23 22:31:38
残念ながらIEではできません。
194:Name_Not_Found
08/01/24 15:39:43
テキストノードに対応するセレクタはどう書けばいいですか？
<p>
foo<em>bar</em>foo
</p>
の場合foo両方に対応したいです
195:Name_Not_Found
08/01/24 17:04:37
>>194
CSS3 の否定擬似クラスで
p:not(p > em)
196:Name_Not_Found
08/01/24 17:53:19
そんなのに対応しとるブラウザーが(ry
って、IE7対応してるみたいじゃん
197:Name_Not_Found
08/01/24 20:08:55
>>195
答えになってねー
(p直下の子であるem)以外のp
pはemでないので、このセレクタは何にもマッチしない。
>>194
CSSセレクタでは無理。
198:Name_Not_Found
08/01/25 15:50:45
>>197
そもそも:not()の中に単純セレクタ以外を書けないからセレクタ自体が無効に
なるんじゃない？p:not(em)なら全てのp要素にマッチする。
199:Name_Not_Found
08/01/25 15:53:56
もっとスマートな書き方あったら教えてください
h1.h:before {
content: counter(head1) ". ";
}
h1.h {
counter-increment: head1;
}
h2.h {
counter-increment: head2;
}
h2.h:before {
content: counter(head1) "." counter(head2) ". ";
}
h3.h {
counter-increment: head3;
}
h3.h:before {
content: counter(head1) "." counter(head2) "." counter(head3) ". ";
}
あと、リストにも同様に counter() 使ってるんですが、通常の list-style-type が表示されてしまうんで、
以下の様にしているんですが、問題無いでしょうか？
ol { counter-reset: item; }
li {
list-style-type: none; /* ← 質問：これでいいの？ */
}
li:before { content: counters(item, ".") ". "; counter-increment: item; }
200:Name_Not_Found
08/01/25 19:11:19 ZQfvyK9A
すいません。なんか初心者スレなのにまったく話が見えないので尻込みしてましたが
あまりにも低級な質問お許しください、まず、CSSを購入し、インストールしたのですが
起動→ロード画面数秒→真っ暗、と、メニューすら開けないまま行動不能になってしまいます。
HL２の方は体験版、製品版共にストレスのない程度の動きはしてくれます。ｆｐｓは４０～５０
なぜ起動できないのか？また、対応策を教えて戴きたいと思いこのスレを探し当てました
また。CSSスクール、CSS２ちゃんテンプレ、教えてgooなどのサイトを回りましたがこの症状を訴える人はいますが
解決策はみつからなかったです。こんな低級な質問ですが起動すらできない状況が二週間以上続いています。
またメモリクリーン、再セットアップなど試しましたが駄目でした。
201:Name_Not_Found
08/01/25 19:24:22
>>200
このスレで話されているCSSは
購入するものでもインストールするものでもないので
答えられません、ごめんなさい。
202:Name_Not_Found
08/01/25 19:31:23
>>200を再インストールすればおk
203:Name_Not_Found
08/01/25 19:42:10
おいゲーマーが紛れ込んでないか？
204:Name_Not_Found
08/01/25 19:44:41 ZQfvyK9A
すいませんスレ違いもいいとこでした（泣）
ほんとに謝っても謝りきれません
そうですね僕が再インストールされればいいんです。
叩かずに冷静に対応してくれた２０１さん
また、笑い飛ばしてくれた２０２さん
ありがとうございます。
しかもキリ番
すいません僕が間違えたのはカウンターストライクソース略してCSSだったんです
本当にすいませんでした。
205:Name_Not_Found
08/01/25 19:46:21
>>204
略し方はCS:Sだと思うけど
206:Name_Not_Found
08/01/25 21:09:26
>>199
それ以上どうしようもないかと。
CSS3でカウンタ定義文とか議論されてた気がするけど、消えたっぽい（？）
リストもそうなるかと。::beforeはリストマーカーではないので。
CSS2.0では ::before=マーカー だったけど、
CSS2.1以降は ::marker(CSS3)=マーカー かつ マーカーとは独立して::beforeも存在する
ので問題なし。
207:Name_Not_Found
08/01/25 21:58:46 ByB760Ju
W3Cの CSS Validatorに「エラー 96 Parse error - Unrecognized }」と言われます
フォント名が日本語のものを消してチェックしています
このエラーはどういう問題がある場合に出るのでしょうか？
どうすればエラーを出さずにチェックしてもらえるのでしょうか？
208:Name_Not_Found
08/01/25 22:21:32
パース出来ないようと言われてるから、
正しく書けばエラーも出なくなるかもしれない。
209:Name_Not_Found
08/01/26 00:14:40
207です
規制中なので携帯から失礼します
>>208
ありがとうございました
}の数が多かったのが原因でした
210:Name_Not_Found
08/01/26 02:00:42
>>206
レス来ないと思ってたけど…レスありがとう。
リストマーカーの list-style-type: none; をやると、ieじゃ counter 自体サポートしてないから、
何も表示しないので結局 display: block; にした。
211:Name_Not_Found
08/01/26 17:58:10
リンクについて質問です。
現在作っているHPでメニューの部分を↓のような感じに、
|―――――|
| |
| TOPへ戻る |
| |
|―――――|
文字の周りをCSSで適用したbackgroundの色で囲っているようにしています。
そこでリンクは上の図でいう「TOPへ戻る」という部分にだけ適用したいのですが、
この枠全体にリンクがかかるようになってしまいます。(余白にまでリンクが適用されている状態)
文字だけにリンクを適用するにはどうしたらいいのでしょうか？
色々調べたのですが、見つからなかったため質問させていただきました。
212:211
08/01/26 17:58:54
めちゃくちゃずれてますね。見づらくてすみません。
長方形をイメージしてください…。
213:Name_Not_Found
08/01/26 18:17:22
>>211
a要素はインラインだから何かのブロック要素で囲ってるだろう。
そっちに背景色を着けろ。
214:Name_Not_Found
08/01/26 18:29:33
【 上 】
【左】 【右】
【 下 】
こんな感じに枠を四つ作り、
それらを更に大きな枠で囲んでいます。
その大きな枠にbackgroung-imageを反映させたいのですが、
どうも大枠が縦に伸びないようでうまくいきません。
ページのよって四つの枠の縦の長さが変わる為、
heightで長さ指定するのはNGです。
どうやれば解決できるでしょうか…。
よろしくお願いします。
215:211
08/01/26 18:36:39
>>213
わかりました。どうもありがとうございました。
216:214
08/01/26 18:43:33
【右】の後に（もしくは【下】）の後に全角スペース挿入することで、
なんとかうまくいきました。
ただ、今後の為に、スペース入れないで解決できる方法あれば
教えていただきたいです。
217:Name_Not_Found
08/01/26 20:15:54
単に【下】をclearしてないだけじゃね？
218:214
08/01/26 20:45:46
>>217
！！！！！！！！！！！
できました…。
どうもありがとう。
219:Name_Not_Found
08/01/27 16:03:30
div#container {
width: 740px;
height: auto;
margin: 0 auto;
padding: 0;
background-color: transparent;
text-align: left;
}
と書きましたがセンタリングされません。
どうすればよろし？
220:Name_Not_Found
08/01/27 16:46:04
>>219
IE5.5や後方互換モードのIE6、7ではバグがあってセンタリングされない。
FirefoxやOperaなど他のブラウザではちゃんとセンタリングされます。
詳細は URLﾘﾝｸ(www.mozilla.gr.jp) を読んでください。
221:Name_Not_Found
08/01/27 17:10:48
>>220
ありがとう！
助かりましたm(_ _)m
222:Name_Not_Found
08/01/28 19:05:26
h要素の自動連番について質問なんですが、カウンターの初期値を指定していする方法でもっと良い方法はありませんか？
ol要素については li子要素が必須なので、ol要素で初期値を設定できるので問題ないのですが、
h要素についてはリスト要素のような親、子関係がないので以下の様にしていますが…
div.init { counter-reset: head1 2; } /* 自動連番は h1要素を対象に 3 から */
h1.h { counter-increment: head1; }
h1.h:before { content: counter(head1) ". "; }
h2.h { counter-increment: head2; }
h2.h:before { content: counter(head1) "." counter(head2) ". "; }
h3.h { counter-increment: head3; }
h3.h:before { content: counter(head1) "." counter(head2) "." counter(head3) ". "; }
<div class="init"><h1 class="h">あ</h1></div>
<h1 class="h">い</h1>
<h2 class="h">か</h2>
<h2 class="h">き</h2>
<h2 class="h">く</h2>
<h2 class="h">け</h2>
<h3 class="h">さ</h3>
<h3 class="h">し</h3>
<h3 class="h">す</h3>
<h3 class="h">せ</h3>
<h3 class="h">そ</h3>
<h2 class="h">こ</h2>
<h1 class="h">う</h1>
<h1 class="h">え</h1>
<h1 class="h">お</h1>
なんか、こう…私が知らない、セレクタ、他の書き方があったら教えてください。
223:Name_Not_Found
08/01/28 19:54:52
ｱﾁｬｰ・・・
224:Name_Not_Found
08/01/28 20:19:59
ｱ
225:Name_Not_Found
08/01/28 21:52:17
>>222
よっぽど変な見出し関係にしてなきゃbodyの初期化でおＫなんだが・・・
よっぽど変な見出しの付け方してるみたいね・・・
多分CSSに手を着けるより、strictスレに出入りしたほうが早いと思われる。
226:Name_Not_Found
08/01/28 22:28:21
どこが変なんだろう？
俺には解らん。誰か解説頼む。
227:Name_Not_Found
08/01/28 22:56:06
変
228:Name_Not_Found
08/01/28 23:01:02 Sm5GqKgm
一つのタグの中に2つ以上のクラスって付けられますか？
例えば
<h2 class="animal" class="moe">ネコ</h2>
みたいな感じにです
229:Name_Not_Found
08/01/28 23:07:44
「複数のclass」でググればすぐ出てくるが、一応回答。
<h2 class="animal moe">ネコ</h2>
230:Name_Not_Found
08/01/28 23:10:12
>>229
そんな書き方が！何度も出来ないと途方に暮れてました
ありがとうございました！！！！
231:Name_Not_Found
08/01/29 02:15:49 z6P2g0Qo
ググれカス
って言われないようにしようね。
232:Name_Not_Found
08/01/29 03:41:35
ググれの前に、自分でやってみろよと・・・。
233:Name_Not_Found
08/01/29 04:18:53 DNGbDsxE
style属性の中にlist-style-type: disc;と入れても黒丸が出ないんですが、
これはなぜなんでしょうか
234:Name_Not_Found
08/01/29 08:53:04
liかul要素に適用してる？
235:Name_Not_Found
08/01/29 08:57:28
>233
list-style-position: inside; してみ
というかソースくらい添えろこのちんぼこ野郎
236:Name_Not_Found
08/01/29 09:03:44
むしろ>>235の頭が大丈夫かと
237:Name_Not_Found
08/01/29 09:10:03
>236
ほどんと溶けてマス
238:Name_Not_Found
08/01/29 09:59:34
ほどんって可愛いな。
239:Name_Not_Found
08/01/29 12:35:30
display: list-item
240:Name_Not_Found
08/01/29 15:07:42
質問する側も答える側も酷いなｗ
情報小出し質問者に、レベル低い解答者ｗ
最凶だなｗ
241:Name_Not_Found
08/01/29 16:50:49
初心者スレだからこれでいいんだよ。せっかく棲み分けできてるんだし。
242:Name_Not_Found
08/01/29 18:45:05
質問です。
IE6で
<sselect>
<option>ああああああ</option>
<option>いいいいいいいいいいいいいいいいい</option>
<option>うううう</option>
</select>
とした場合
いいいいい…が長過ぎる為、途中で見えなくなってしまいます。
FF、safariのように選択した際に全てのテキストを表示するか
長過ぎるテキストを改行させることは可能でしょうか？
調べてみたのですが、<option>内での改行は無理とのことでした。
詳しい方よろしくお願いします。
243:Name_Not_Found
08/01/29 19:27:54
>>240
過疎ってる上級スレにお帰りくださいｗｗｗ
244:Name_Not_Found
08/01/29 19:34:50
overflow: scroll;
これじゃ、駄目かもｗ
245:Name_Not_Found
08/01/29 20:06:32
ジオシティーズで外部スタイルシート読み込みの
<link rel="stylesheet" type="text/css" href="ファイルの名前.css">
と書いても読み込めません…
ジオシティーズ使ってる方はできますか？
246:Name_Not_Found
08/01/29 20:15:28
>>242
無理。
>>245
ジオ覗いてきたが、普通にみんなつかってるぞ。
単にパス間違えてるとかじゃねーの？
247:245
08/01/29 20:25:40
>>246
色々書き直したらできました
パスは間違ってないと思ってましたが…
とにかくありがとうございました
248:Name_Not_Found
08/01/30 00:41:34
質問させて下さい。
背景を指定する時は以下の記述で何か違いがあるのですか？
色々なテンプレを借りてみたら、三つのパターンがあって気になってます。
background : url('ime/sample.gif')
background : url("ime/sample.gif")
background : url(./ime/sample.gif)
249:Name_Not_Found
08/01/30 02:13:05
>>248
仕様としてはどれでもいいが、古いブラウザだと認バグで識されなかったりする。
一番下が一番普及してるかな。
250:Name_Not_Found
08/01/30 10:25:19
画像にclassを設定して、その画像を中央に表示したい時はどうすれば良いのでしょうか？
float：center;
だと、文字が回り込んでしまうので、周りこませずに中央に固定させたいのですが。
どなたかお教えください。
251:248
08/01/30 12:10:19
>>249
ありがとうございました
252:Name_Not_Found
08/01/30 15:43:21
>>250
「画像にclassを設定して」という条件では無理じゃないかな。
その条件抜きなら
<p>text</p>
<div class="figure"><img ...></div>
<p>text</p>
.figure { text-align: center; }
みたいに、ブロックレベル要素の中に画像を入れてtext-alignでセンタリング
すればいいよ。ちなみにfloatプロパティに指定できる値は'left', 'right',
'none', 'inherit'だけで、'center'はありません。
253:Name_Not_Found
08/01/30 19:39:46
>>250
/* CSS・スタイルシート質問スレ 上級者用【70th】
ｽﾚﾘﾝｸ(hp板)
ここのテンプレに書いてある。
254:250
08/01/30 23:19:14
>>252-253
画像へのclass設定では無理のようですね。
<div>で設定するのも面倒なので、
素直に<p align="center">を使っていきたいと思います。
お答えいただき、ありがとうございました。
255:Name_Not_Found
08/01/30 23:44:51
img.className {
display: block;
width: 画像の幅px;
margin-right: auto;
margin-left: auto;
}
とは違うの？
256:Name_Not_Found
08/01/30 23:48:04
body {
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
p {
text-align: left;
}
257:Name_Not_Found
08/01/31 00:38:50 8des78HX
初の書き込み失礼します。
今サイトを作っているのですが、文字が自動で改行してくれなくてレイアウトが崩れて困っています。
ソースはこんな感じです。
#wrapper{
width:800px;height:500px;border:solid 1px #c9c9c9;}
#left1{float:left;width:200px;height:500px;}
#main{float:left;width:600px;height:500px;}
#right{float:right;width:200px;height:500px;}
<div id="wrapper">
<div id="left">
</div>
<div id="main">
<p>テキストテキストテキストテキスト</p>
</div>
<div id="right">
</div>
</div>
こんな感じなのですが、<p></p>間のテキストが自動改行してくれなくてレイアウトが崩れてしまうんです･･･
何か良い方法を知っている方はいらっしゃいませんか？
258:Name_Not_Found
08/01/31 00:53:48
まずwrapperが800pxなので200px+600px+200pxは入らない。
IE6の互換モードではwrapperの内寸が798pxしかないのでleftとmainも入らない。
left1というIDが存在しない。
259:Name_Not_Found
08/01/31 06:43:27
最も使われているブラウザだけど、最もレンダリングがオカシイブラウザは基準にしない方がいいよ。
260:257
08/01/31 08:34:20 wAED2pOe
ありがとうございます。
今晩帰宅したらpxの調整してみます！
261:250
08/01/31 12:56:43
>>255
margin-right: auto;
margin-left: auto;
は上級スレで見てきて試したのですが、ダメでした。
指摘された「display: block;」を入れても残念ながら中央に寄りません。
>>256
奇麗にタグを書いてこなかったこともあり、pタグが閉じられていなかったりなど問題があり
教えていただいた方法を使うのは難しい状態です。
もともと画像にリンクをすること前提だったため、
リンクの方にクラス設定をしてそこにblock入れるとなんとか中央に寄ることができました。
display: block; について知らなかったため、みなさんの教えが大変役に立ちました。
ありがとうございます。
262:Name_Not_Found
08/01/31 13:31:40 r0RNFldU
ユーザーによって大きさを変えられるように
文字サイズを相対指定したいんですが、、、
％とemの違いが分かりません。
何が違うんでしょうか？
どちらが推奨だとかはありますか？
263:Name_Not_Found
08/01/31 19:58:33
どっちかというと font-size だったら % 推奨
firefox, opera は .1 刻みで単位を em 指定しても、ちゃんと大きさ変わるけど ie6 だと全然駄目。
ie の事考慮する必要なければ em でもいいんじゃね？
264:Name_Not_Found
08/01/31 20:09:58
IE6もあと少しの命だしな
265:Name_Not_Found
08/01/31 20:17:21
>>262
仕様としては、font-sizeプロパティに対するemも%も親要素の
font-sizeプロパティの値を参照するので、特別な違いはありません。
もちろん他のプロパティでは、参照するものが違う(例えばwidth)
とか、片方しか指定できない(例えばborder-width)とか、違いがあります。
266:Name_Not_Found
08/01/31 20:22:59
>>261
<p>text
<img style="display:block;margin:auto" src="hoge" alt="hoge">
text</p>
標準モードのIE6,7,Firefox2,Opera9ではこれでうまくいったよ。
後方互換モードのIE6はだめみたい。
267:Name_Not_Found
08/01/31 20:38:02
P要素の中にブロック要素を入れてはいけない
268:Name_Not_Found
08/01/31 20:38:59
>>267
269:Name_Not_Found
08/01/31 21:07:29
夜の一本釣り乙ｗ
270:Name_Not_Found
08/01/31 22:48:16
>>267
一応マジレスしておくと、display:blockが適用されたimg要素はCSSの上では
ブロックレベル要素になるが、HTMLでは以前としてインライン要素なので、
何も問題ない。CSSのdisplayプロパティでHTMLの要素の種類や意味合いが
変わることはないよ。
271:Name_Not_Found
08/02/01 10:34:40
どこで質問すればいいか迷ったんですが
適切な場所があれば誘導お願いします
フォントを指定した場合、欧文書体,MSゴシックと指定したのですが
これだと三点リーダが...←こうなってしまいます（火狐使用）
…←こう表示されるようにするには、欧文書体を指定しないようにするか、
…←を使用する場合にはこの部分に日本語書体を別に割り当てるしか道はないんでしょうか
272:Name_Not_Found
08/02/01 12:05:25
>>271
中点を3つに置換する
273:Name_Not_Found
08/02/01 12:33:47
>>271
そう。だけど閲覧者はそんなもの気にしちゃいない。
274:Name_Not_Found
08/02/02 03:58:22 6qWALHcv
>>272-271
ありがとう、やっぱそうか……
まわりはさんてんりーだに煩い人ばかりなので、
本文はゴシックのみとかで対処しますです。
275:Name_Not_Found
08/02/03 01:12:49 gY0gG6lZ
ニコニコ動画のcss覗いてみたらこんな記述があったのですが
font-family:osaka,MS Pゴシック,arial,helvetica,sans-serif;
ＭＳ Ｐゴシックの表記はこれでいいんですか？
"MS Pゴシック"と半角で指定しても大丈夫なんでしょうか。
まあ、WindowsでOsaka入れてない限り関係ないかもしれませんが…
276:Name_Not_Found
08/02/03 02:01:54
それ以前にスペースを含んでいるのに引用符でか括ってないのがよくない。
これで認識してくれるブラウザは親切 or 余計なお世話。
MSPゴシックのフォント名は、日本語名"ＭＳ Ｐゴシック"
SとPの間のスペースだけ半角であとは全角。
英語名なら全部半角。
277:Name_Not_Found
08/02/03 06:59:53
<li>abcdefg<br />xyz</li>
と、あって xyz の部分にだけ適用したいように書くにはどうしたらいい？
li::first-line 擬似要素で abcdefg にプロパティは適用できるけど、
xyz の部分にだけプロパティを適用させる書き方が解らない…
要は li 要素の中の1行目以外に適用させたいんだが…
278:Name_Not_Found
08/02/03 08:56:45
spanで括るんじゃダメなの？
279:Name_Not_Found
08/02/03 09:08:11
abcdefg の所に <span>が要素が入っている場合もあるんだ…
でさ、できれば html は弄らないで css で何とかならないかなーって…
280:Name_Not_Found
08/02/03 12:15:24
ていうかそのhtmlはむしろ弄った方がいい。
なんだそれ。spanも変だけど。
281:Name_Not_Found
08/02/03 12:23:21
>>267
なるほど、ありがとうございます。
大手サイトでも結構適当だったりするんですね。
282:281
08/02/03 12:24:18
すいません>>281は>>276様へのレスです…間違えました
283:Name_Not_Found
08/02/03 13:30:02
>>277
li全体にxyzに適用させたいcss書いて
li::first-lineでabcdefgの部分を元に戻すのはどうよ
284:Name_Not_Found
08/02/03 16:10:12
280みたいなのたまに沸いてくるけど、こういう奴に限って何も根拠示さない（示せない）な
285:Name_Not_Found
08/02/03 18:05:10
むしろそのHTMLでいいという根拠がない
286:Name_Not_Found
08/02/03 20:05:13
CSSの表示例のためのHTMLを添削してもらっても…
そういうハイレベルなのは上級スレでやってくれ
287:Name_Not_Found
08/02/03 22:15:12
教えてつかーさぁい
<div>
<p style="folat: left;">あいうえおかきくけこ</p>
<p stylle="margin: 0px 0px 0px 200px;">さしすせそたちつてと<br />
なにぬねのはひふへほ</p>
</div>
とかやった時にIE6だと右側に表示される<p>タグ内の一行目の頭が
若干だけ右ズレるのですが理由と解決策を教えてください。
FFだと二行目と同じ様にきちんと揃って表示されます。
288:Name_Not_Found
08/02/03 22:32:20
stylle って何？
俺の知らない新しい属性か？
289:Name_Not_Found
08/02/03 22:36:21
styleの間違い
290:Name_Not_Found
08/02/03 22:36:46
>>285 どうせ、言えないと思うけど、理由は？
291:Name_Not_Found
08/02/03 22:43:09
>>287
IE6のバグ。たぶんフロートすると3pxがどうのこうのっていうやつ。
(URLﾘﾝｸ(www.positioniseverything.net))
↓で直ると思う。
<p style="margin: 0px 0px 0px 200px; zoom:100%">
292:287
08/02/03 22:52:39
>>291
ありがとうございますー！！
早速やってみます。
293:Name_Not_Found
08/02/04 00:14:20
不明なプロパティ 'zoom' が使用されています。このスタイル宣言は無視されました。
294:Name_Not_Found
08/02/04 03:44:39
zoom:100%はIE以外のブラウザではCSSのエラー処理規定に従って無視される
から問題ないんだよ。知っているとは思うが、一応。
295:Name_Not_Found
08/02/04 12:04:41
IEで表示がおかしいときのおまじない＞zoom:1;
296:Name_Not_Found
08/02/05 21:18:11
すみません
<p>だとborder内の余白をpaddingで狭められるのですが
<h1>だと狭めれません
どうしたらいいのでしょうか
297:Name_Not_Found
08/02/05 22:05:20
cssで
a:visited{color:#3366FF;}
として
<a href="xxx.html#top" target="xxx">
というふうにフレーム指定と#で位置指定させた時、
訪問済みリンクが一度は指定したとおりに既リンク色に変化するものの、
IEをもう一度起動させると未リンクの色に戻ってしまいます。
いろいろためした結果#での指定とtarget指定を同時にやるとなるみたいです。
このようにターゲット指定と#での位置指定を使ってvisitedをきちんと動作させる方法はありますか？
よろしくお願いします。
298:Name_Not_Found
08/02/05 22:10:02
>>296
* {margin:0;padding:0;}
299:Name_Not_Found
08/02/05 22:25:33
＞298
できました。 ありがとうございます。
それなしだと border-leftと-right だと狭められるのに
-topとbottomだと広がってしまうのですね～ 不思議。
300:Name_Not_Found
08/02/05 22:34:36
>>299
borderとmarginとpaddingの違いを理解してくださいね♥
301:Name_Not_Found
08/02/05 23:38:43
>>297
IEはパラグラフの解釈がおかしい。諦めろ
302:Name_Not_Found
08/02/06 13:35:51
あるボックスの中に画像を複数入れて、その画像がすべて同じサイズでborderも0にしたい場合、
外部CSSに共通の属性と値を記述してHTML内の<img～をすっきりさせるのって正しいのでしょうか？
#box1 { width: 150px; height: 300px; }
#box1 img { width: 100px; height: 100px; border: 0; }
<div id="box1">
<img src="gazou1.jpg" alt="画像1"> ←ｽｯｷﾘ
<img src="gazou2.jpg" alt="画像2"> ←ｽｯｷﾘ
</div>
303:Name_Not_Found
08/02/06 14:50:07
>>302
CSSがどうだろうとHTMLの文法は変わらない。
304:Name_Not_Found
08/02/06 15:18:44
>>303
borderはともかくwidthやheightは装飾じゃないってことなのね。
わかりました。どうもありがとうございました
305:Name_Not_Found
08/02/06 16:15:32
てかwidthもheightも必須じゃないからなー
書きたくなければ書かなくていいんじゃない？
306:Name_Not_Found
08/02/06 19:09:57
>>302
別にいいと思うよ。ただ、表示させる画像の大きさが元のサイズと違うなら、
HTMLにwidth,height属性を書いておいたほうが、CSSオフでも同じ大きさで
表示されるので、安心かもしれない。あと、Safariにはimg要素にwidth,
height属性が指定されていないと、画像が表示できないときにalt属性の
文字列が表示されないというバグがあるらしいので、それに対応する意味も
あるね。
307:Name_Not_Found
08/02/06 21:51:20
質問させてください。
働き始めた会社がテーブルレイアウトばかりしてるのですが
テーブル使わなくてもいいトコロはCSS使おうという事になったんです。
しかし、諸事情でstyleタグだけを使ってCSS指定しようという事なんですが
SEO的にはテーブルレイアウトと大して変わらないですか？
外部ファイルもヘッダーに記述もできなくて
タグにのみ直接CSSを指定するんです。
テーブルレイアウト同様、ソースが長くなるのでかなり抵抗があるのですが…
どうなのでしょうか？
308:Name_Not_Found
08/02/06 22:06:46
Googleに聞け
309:Name_Not_Found
08/02/06 22:29:34
>>307
あまりスタイルシートの意味なくない？
310:Name_Not_Found
08/02/06 22:51:51
>>307
個人的な感覚ではテーブルレイアウトでもCSSレイアウトでもそんなに
大差ないかな。どっかのページにあった(URL失念)専門家によるSEO要素の
ランキングでも、title要素内のキーワードなどに比べて、CSSレイアウト
によるSEO効果はかなり低く評価されていたよ。
それより、メンテナンスのしやすさなどでCSSの導入を考えたほうがいいんで
ないかな。SEOのために部分的にテーブルレイアウトをやめるのって、あまり
意味がないような。
311:Name_Not_Found
08/02/06 22:58:59
教えて下さい。
サイト全体を画面の中心にしたいのですが
margin:5px auto;
と書いても中央表示できません。
分かる人はいるでしょうか？
宜しくお願いします。
312:Name_Not_Found
08/02/06 23:20:50
>>311
標準準拠モードにしないと効かない
313:311
08/02/06 23:30:11
標準準拠モードとはなんでしょうか？
314:Name_Not_Found
08/02/06 23:37:45 TCAVXvEZ
ヒント出してくれたんだから
それを手掛かりに調べるくらいしようぜ
315:311
08/02/06 23:38:13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "URLﾘﾝｸ(www.w3.org)">
ではだめですか？
316:３１１
08/02/06 23:56:35
インターネット上で中央表示されているサイトのソースをコピーして
パソコンに保存して開いても中央表示になりません。
何故？？？
317:Name_Not_Found
08/02/06 23:57:48
その他が間違えてるんじゃねーの
318:３１１
08/02/07 00:11:51
htmlで<div>で全体を囲んだとこをcssでmarginでauto使えばいいだけじゃないの？？？
319:311
08/02/07 00:52:33
text-align:center;でできました。
･･･が、全てが中央に寄ってしまいます。
cssファイル
*{
padding:0px;
margin:0px;
text-align:center;
}
#site{
width:750px;
text-align:left;
margin:5px auto;
}
ではもどりません。
どうすればいいでしょうか？質問ばかりですが宜しくお願いします。
320:Name_Not_Found
08/02/07 01:05:14
text-alignでできるということは、標準準拠モードになってない。
まずそこから見直せ。
321:311
08/02/07 01:19:19
できました。ありがとう。
322:Name_Not_Found
08/02/07 01:28:17
>>319
text-align:center でブロックボックスがセンタリングされるのはIEのバグです。
URLﾘﾝｸ(www.mozilla.gr.jp) を読んでみてください。
* { text-align: center }があると、#siteの中にあるブロックレベル要素に
text-align:centerが適用されてしまうので、#siteからの継承が行なわれず、
テキストが中央に寄るはず。IE 5.5対策にtext-align:centerを指定するなら、
#siteの親要素に指定したほうがいい。↓
body { text-align:center; }
#site{ width:750px; text-align:left; margin:5px auto; }
<body>
<div id="site">
<p>テキスト テキスト...</p>
</div>
</body>
323:Name_Not_Found
08/02/07 01:32:55
遅いし
324:311
08/02/07 01:38:28
>>322
ありがとうございます。一応できたのだけど
HTML内にcssを書く場合はbodyに書けばいいと思うのですが
外部にcssファイルを置く場合には＊じゃないと無理かと思うのですが
どうなんでしょうか？
325:Name_Not_Found
08/02/07 01:58:31
>>324
別に、HTMLでstyle要素を使っても、外部CSSファイルに書いても、問題ないよ。
外部CSSではbody { text-align:center }が使えないなんていう特例はない。
326:Name_Not_Found
08/02/07 02:44:28
というか標準モードにできたのに
どうして互換モードでtext-alignでやらせようとするんだｙｐ
327:Name_Not_Found
08/02/07 03:52:12
px 厨 ktkr ！！１１
328:302
08/02/07 08:38:29
>>305 >>306
返事おそくなりました。ありがとうございます。
とくにsafariの件は参考になりました。念のためwidth,heightはちゃんと書くようにします。
329:Name_Not_Found
08/02/07 12:25:24 PYBW4fE1
<h1>title</h1>
<ul>
<li>menu</li>
</ul>
* { margin:0; padding:0; }
h1 { background:#eee; }
li { display:inline; background:#eee; }
こんな状態のときに、firefox2.0.0.1で見ると、h1とliの間に1pxぐらいスペースが開くんだけど、これは仕様？
久しぶりにcss書いてあれ？と思った。以前のバージョンではこんなスペース開かなかった気がするんだけどなぁ。
あと、liにpadding:10px;とかやると、h1と重なってしまうんだけど、以前はliがいくら大きくなっても対応して
他の要素と重なることなんてなかったはずなのに、、、。
330:Name_Not_Found
08/02/08 00:17:37
>>329
Firefox 2.0.0.11では再現しなかったので、マイナーなバグと思われ。
331:Name_Not_Found
08/02/08 10:03:20
こちらで質問して良いのかわかりませんが、
ＣＳＳを弄ったら思った通りの動きをしたので
こちらで質問させていただきます。
ｽﾚﾁなら誘導お願いします。
URLﾘﾝｸ(www.free-movabletype.jp)
こちらで配布してるテンプレートを試しに入れてみたところ、
スクロールがもっさりしました。
なんでかわからず、とにかくサイトに連絡してみたんですが
何が原因かわからない様で、自分でググったりして
fixedが原因かもと思いコメントアウトしたらスクロールは
スムーズになりました。
ですが、この配布してるサイト自体もfixedを使っているんですが
スクロールがもっさりしたことはありませんでした。
何がどう違って、何が影響してるのかググったりもしてるのですが
ヒントになるサイトを見つけられませんでした。
何故fixedを有効にしてても大丈夫なのか、テンプレートの方は何故ダメなのか
知りたいと思い質問させていただきました。
サイトの方にはfixedをコメントアウトしたらもっさりしなくなったと
伝えたのですが、明確な改善案はまだされないので
おそらくサイト側も何が原因かわからない状態なんだと思います。
わかる方いらっしゃいましたらよろしくお願いいたします。
332:Name_Not_Found
08/02/08 12:39:26
断る！
他人のテンプレート訂正に手を貸すつもりは無い。
333:Name_Not_Found
08/02/08 12:45:20
>>331
し
り ま
断 す
お ま す お
し ！
,ﾊ,,ﾊ 断
り （ ﾟωﾟ )
((⊂ﾉ ヽつ )) り
断 （＿⌒ヽ
ε≡Ξﾉノ ｀J し
お ま
す
334:Name_Not_Found
08/02/08 13:10:14
>>331
'fixed'というのはbackground-positionプロパティに対して？
それともpositionプロパティ？重くなるテンプレを使ったページを
見ないことにはわからないが、'fixed'だけでなく使用している画像の
数やサイズなども関係しているんじゃないかな。
335:329
08/02/08 14:00:37 kYpjWMne
>>330
さきほど2.0.0.12にアップグレードして試したけど、やはり1px空く。
そしてpadding:10pxをliに指定すると、h1と重なってしまう。
336:Name_Not_Found
08/02/08 14:27:24
>>334
スタイルシートを見ると
background: url("monster-img/gra.png") top center no-repeat fixed;
となっています。
以前自分でブログデザインをしたときももっさりしたので
（確かその時もfixedを使っていました）、fixedが原因だったのか
と思ったんですが、あれこれ見てるとそればっかりでも
無いようなので何故かなと疑問に思った次第です。
ちなみにテンプレは配布元にfixedをコメントアウトして使用する旨
を伝えており、許可も出てるのでこれはこのまま行くつもりです。
337:Name_Not_Found
08/02/08 14:47:04
ともかく
スクロールがもっさり
とかよく判らない表現はやめてほしい。
338:Name_Not_Found
08/02/08 15:33:03
>>336
閲覧者がもっさりで苦労しようとデザイン優先ってか。最低だな。
339:Name_Not_Found
08/02/08 15:39:46
>>338
>>336はfixedをコメントアウトしてもっさりを解消したんでしょ？
背景画像を固定するとスクロールが重くなるって他でも聞いたことある気がする
340:Name_Not_Found
08/02/08 15:45:50
何でこういうマルチカラムのデザインってUAの幅狭くしたら水平スクロールバー出るの？
相対的にUAの領域に合わせたデザインできないの？
341:Name_Not_Found
08/02/08 16:04:17
>340
そこまで気を遣えるのはこのスレに来ないだろ
342:Name_Not_Found
08/02/08 16:09:27
でも3カラムで幅可変でUA幅狭くしたらメインの幅が狭くなるのは嫌じゃね？
サイドバーだけ幅変わんなくてメインが凄く見難い。
結構こういうカラムの組み方してるとこ見るんだけど…
343:Name_Not_Found
08/02/08 18:32:51
>>335
Firefox2のバグ（仕様？）っぽい。
1pxだけだったからborderの分かと思った（border:1px solidで指定すると丁度隙間がなくなる）けど
font-size変えると幅が変わったりするから特にはそういうわけでも無いらしい。
margin:0,padding:0,border:0いずれも効果無しで特にこれと言った対処方はすぐには思いつかんね。
ちなみにIE6,Opera9では隙間は空かず、win版Safariだと下にだけ隙間が出来た。
インライン要素の上下のpaddingが行の高さの計算に影響しないのはCSSの仕様っぽい。
以前は～って言うのはたぶんブロック要素のまま表示してたときじゃないかね。
どちらもまとめて解決できそうなのは下みたいなのか。
ul { list-style-type: none; }
li { float:left; background:#eee; padding:10px;}
リストの次の要素でclear:leftを忘れずに。
344:Name_Not_Found
08/02/08 20:04:41 WhFH6Nv5
1ページ目-----------------------
<div id="contents" class="page01">内容1が入る</div>
2ページ目-----------------------
<div id="contents" class="page02">内容2が入る</div>
と書いて、class別でページごとに背景を変えようと思い
div#contents.page1 {background:（1ページ目の背景画像を指定）;}
div#contents.page2 {background:（2ページ目の背景画像を指定）;}
～以下ページごとに指定が続く～
と指定しても、
→IE6では二つ目に指定した画像まではちゃんと表示
それ以降は一つ目に指定した画像が表示される
→IE7 全ページちゃんと表示される
→Firefox 画像そのものが表示されない
となっていて、実に困る。
多分私のCSSの理解が間違えているのだと思うのだけど
誰か指摘して下さいませんか。id="contents_page1"とか
ビーンボールは投げたくありません。よろしくお願いしますm(_ _)m
345:Name_Not_Found
08/02/08 20:05:43 WhFH6Nv5
div#contents.page1 {background:（1ページ目の背景画像を指定）;}
div#contents.page2 {background:（2ページ目の背景画像を指定）;}
↓
div#contents.page01
div#contents.page02 です
書き間違えました、ごめんなさい
346:Name_Not_Found
08/02/08 20:26:44
>>344-345
それで問題ないと思うんだけど
元のほうでどっかタイプミスとかしてるんじゃねーの
347:Name_Not_Found
08/02/08 21:14:54 WhFH6Nv5
自己解決しました…
レスで書いた箇所は関係ありませんでした
floatを含んだボックス云々で高さがちゃんと算出されず
表示されてなかっただけみたいです。
height:100% とか入れて浮かれてました。
overflow: visible; とか書いて調子に乗ってました。
参考：URLﾘﾝｸ(www.geocities.jp)
関連 overflow:auto
>>346
レスありがとうございました。
セレクタの書き方とか、間違えてなったのがわかったので
それだけでも助かりました。
スレ汚し失礼しましたm(_ _)m
348:Name_Not_Found
08/02/08 22:22:09
id にピリオド（.）使ってるし…(;´Д｀)
349:Name_Not_Found
08/02/08 22:31:53
夜釣り乙
350:Name_Not_Found
08/02/09 10:24:37
>>338
339さんの仰るとおりうちではコメントアウトして
背景固定は解除してます。
まだテスト段階ですので公開はしてませんが。
知りたかったのはfixedを使ってもスクロールが
スムーズになる場合とならない場合があるので
その理由です。
何か相性の良くない組み合わせでもしてるんでしょうか？
351:Name_Not_Found
08/02/09 10:55:04
relativeとかopacityとか
要するに処理が面倒臭いのは全部重くなる
352:Name_Not_Found
08/02/11 00:46:04
サイドメニューのコメント欄を5件表示（現在は10件表示）に変更し、
6件目以降は『＞＞続きを読む』という表示に変更したいのですが
cssをどの様に弄れば宜しいでしょうか？ご教授よろしくお願いします。
353:Name_Not_Found
08/02/11 01:12:14
スレ違いと言うか、板違いだな。
354:Name_Not_Found
08/02/11 10:21:33
>>352
それは多分ブログの設定で変えられる。ブログ板の該当スレで聞くといいよ。
CSSではどうにもできない。
355:352
08/02/11 10:59:25
>>353-354 ㌧です
ブログ板で聞いてみます。
356:Name_Not_Found
08/02/11 20:06:08
質問ですが、
ThickBoxのライブラリは商業サイトで使って問題ないですかね？
357:Name_Not_Found
08/02/11 21:08:37
な ぜ こ こ で 聞 く
作者に家
358:Name_Not_Found
08/02/11 22:23:13
英語だらけでよう分らんとです(´・ω・`)
359:Name_Not_Found
08/02/11 22:29:06
>>358
英語を勉強しろ。
そしてJavaScriptを勉強しろ。
360:Name_Not_Found
08/02/11 22:41:36
>>356
「MIT License/GNU License」とあるのでOKなはず。
361:Name_Not_Found
08/02/11 22:54:29
>>360
内容見ないとダメだが
362:Name_Not_Found
08/02/11 23:48:07
>>360
どうもです。
とりあえず大丈夫かもしれないけど一応英語出来る人に確認させて
と言って先方に出しときます
363:Name_Not_Found
08/02/12 05:25:46
仕 事 か よ
364:Name_Not_Found
08/02/12 05:47:48 po6TFI/j
<A>タグのスタイルを指定してしまうと、
classで一部の<A>タグだけ別の属性にすることできないんですか？
出来なくてこまってます
365:Name_Not_Found
08/02/12 05:59:31
できる。何か間違えてるだけだろ。
366:Name_Not_Found
08/02/12 06:23:37 HhE4ZOiw
どのスレで聞こうか迷ったのですが、教えてください
px単位で指定したwidthの値をJavaScrptで取得しようと、以下のようなコードを書き
document.defaultView.getComputedStyle(element, null).getPropertyValue('width');
標準モードでFirefox, Opera, Safariで確認したのですが、
Opera (v9.25) のみ、paddingとborderを含んだ値が返って来ます
まるで互換モードのような感じなのですが、これはOperaの癖なのでしょうか？
367:Name_Not_Found
08/02/12 06:37:42 po6TFI/j
>>365
はい。間違えてました。
解決しました。ありがとうございました。
368:Name_Not_Found
08/02/12 07:50:59
>>366
スレ違い
369:366
08/02/12 08:27:46
>>368
失礼しました
JavaScriptスレに逝ってきます
370:Name_Not_Found
08/02/12 08:39:47
単位を pxで指定、しかも javascript使用…
さすが初心者スレｗｗｗｗｗｗｗ
371:Name_Not_Found
08/02/12 10:05:27
そのための初心者スレだろ。
間違っていると思うなら正してやれよ。
出来ないなら消えろ。
372:Name_Not_Found
08/02/12 12:47:12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "URLﾘﾝｸ(www.w3.org)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
#div1 {
margin: 0;
padding: 0;
background-color: #afa;
}
#div2 {
width: 100px;
margin: 10px;
background-color: #f00;
}
-->
</style>
</head>
<body>
<div id="div1"><div id="div2"><span>テスト</span></div></div>
</body>
</html>
これで id="div2"の上のマージンが、親要素 id="div1"を突き抜けるのは何でですか？
373:Name_Not_Found
08/02/12 13:03:59
┌─┐
│■□│
└─┘
大枠の中にふたつのボックスがあり、
■の中には、毎回縦の高さの値が変わる画像が入ります。
┌─┐
│■□│
│■ │
│■ │
└─┘
┌─┐
│■□│
│■ │
└─┘
□の高さを、■の画像の高さと合わせるにはどうしたらよいでしょうか？
ちなみに、大枠の高さも、■の高さによって可変にしたいのです。
どなたかお教えいただけるとありがたいです･･･
374:Name_Not_Found
08/02/12 13:05:06
>>373
js使えば幸せになれる
詳しくはwebで
375:Name_Not_Found
08/02/12 13:27:37
>>372
そういう仕様だから。
376:Name_Not_Found
08/02/12 13:30:10
>>374,375
即レスありがとうございました。
テーブルでの作成も視野に入れて、まずはjsでのやり方をググってきます。
377:Name_Not_Found
08/02/12 13:31:27
単にそれっぽくしたいなら、背景をy方向に繰り返しかな
378:Name_Not_Found
08/02/12 15:24:24
>>372
マージンの相殺というルールがあって、隣接しているマージンは一つにまとめ
られて、値が最も大きいマージンが適用されるようになっています。
#div1にパディングとボーダーがないので、#div1と#div2の上マージンが隣接
しており、マージンの相殺が発生しているわけです。
参考→URLﾘﾝｸ(www.techdego.com)
379:372
08/02/12 16:49:07
>>375
仕様なのですね
あれから調べてみて、height: 1px を指定してみたら
IEだけは自分が想像したように動いてくれたのですが、
これはいわゆるIE独自の解釈なんですね
>>378
相殺というルールを知りませんでした
勉強してみます
どうもありがとうございました
380:Name_Not_Found
08/02/12 16:51:10
？
372と373が別人だったのなら
376はなぜ375に礼を言ってるんだろう
勘違いしてる悪寒
381:376
08/02/12 17:17:21
いま気がついた･･･
恥ずかしすぎて、勃起がとまりません。
382:Name_Not_Found
08/02/12 17:50:02
>>381
(*･ω･)ﾍﾝﾀｲ!
383:Name_Not_Found
08/02/14 00:19:28 KEqrkz+p
すみません、聞きたいのですが
webページを印刷するときって、ページや表などの背景の色ってブラウザの設定を変えないと印刷されないと思うんですが
どうしても背景を黒で印刷したい表があって、なんとかブラウザの設定を変えずに背景を印刷する方法を考えています。
よく、スタイルシートを使って背景を印刷しないようにする方法は見かけるんですが、
逆に背景は印刷しないという設定になってるブラウザでも、スタイルシートなどを使ってきちんと表の背景を印刷させる方法ってないでしょうか？
384:Name_Not_Found
08/02/14 01:22:18
１．見てる奴全員のブラウザの設定を変えてまわる。
２．WindowsでIEなら、そういうActiveXをインストールさせる。インストール拒否した奴、Windows、IE以外は締め出す。
３．諦める。
４．IEの設定を変えるウイルスをばらまいて犯罪者になる。
以上いずれか。
385:Name_Not_Found
08/02/14 04:48:50
メニュー
→○○○ →○○○
→○○○ →○○○
→○○○ →○○○
→○○○ →○○○
メニュー２
→○○○ →○○○
→○○○ →○○○
→○○○ →○○○
→○○○ →○○○
→はイメージ
こんなかんじに横に並べるにはどうしたらいいですか？
float をいじればいいのでしょうか？
386:Name_Not_Found
08/02/14 06:03:00
インラインレベル要素に potision: absolute を指定すると、
width, height が適用できるようになりますが、
暗黙的にブロックレベル要素になっていると考えてよいのでしょうか
387:Name_Not_Found
08/02/14 07:12:18
インラインレベルとかブロックレベルとか、その「レベル」って何？
388:Name_Not_Found
08/02/14 08:35:21
ﾜﾛﾀｗ
389:Name_Not_Found
08/02/14 09:00:12
>>どうしても背景を黒で印刷したい表があって、なんとかブラウザの設定を変えずに背景を印刷する方法を考えています
この発想が既にダメ
390:Name_Not_Found
08/02/14 09:38:04
>>383
そんな表、インクがもったいなくて印刷したくないよ
391:Name_Not_Found
08/02/14 17:36:30
ブログでのCSSの質問はこちらでよろしいでしょうか？
392:Name_Not_Found
08/02/14 17:57:17
内容にもよるんじゃね？
「～なCMSツールでのページで～したい」てんなら該当CMSスレに誘導されるとか。
393:Name_Not_Found
08/02/14 18:03:13
>>386
簡単に言えばそう。詳しく知りたいなら
URLﾘﾝｸ(www.w3.org) とか
URLﾘﾝｸ(d.hatena.ne.jp) を
読むといいと思う
394:Name_Not_Found
08/02/14 18:13:19
391です。とりあえず質問内容を書くのでスレチならスルーして下さい。
ココログを使って、ブログをやっているのですが
ココログだと真ん中の記事が表示される場所に
「最近の記事」というカテゴリーをうｐすることができないません。（ちなみに
これは本来サイドバーに表示されるものです）
CSSを使えば記事を表示するのと同じ場所に表示できますか？
395:Name_Not_Found
08/02/14 18:28:26
>>394
HTMLのソースがどうなっているかによる。
396:Name_Not_Found
08/02/14 18:33:51
>>395
そう言ったのはまったく分からないのですが・・・
まだこのスレにくるには早過ぎましたかね？
397:Name_Not_Found
08/02/14 19:23:20
板違いだな
398:Name_Not_Found
08/02/14 21:40:59 5GM3dJ6S
スタイルシートのみでの「ロールオーバーで背景色が変わる」もしくはボーダーがつくやり方について質問です。
リンクを設定したテキストの背景だけではなく、他のテキストを含んだtestの領域の背景をロールオーバー時に変化させたいのですが、これは可能でしょうか？
<div class="test">
</p>テキストはここにもあります。</p>
<a href="#" class="test">リンクを設定しているテキスト</a>
<div class="aaa">ここのテキストはdivで囲われたりしています</div>
</div>
スタイルシート
.test{ width:200px; height:150px; }
a.test{ width:200px; height:150px; }
a.test:hover{ width:200px; height:150px; background-color:#333; border:1px; }
399:398
08/02/14 21:42:28 5GM3dJ6S
書き直しです
<div class="test">
<p>テキストはここにもあります。</p>
<a href="#" class="test">リンクを設定しているテキスト</a>
<div class="aaa">ここのテキストはdivで囲われたりしています</div>
</div>
スタイルシート
.test{ width:200px; height:150px; }
a.test{ width:200px; height:150px; }
a.test:hover{ width:200px; height:150px; background-color:#333; border:1px; }
400:Name_Not_Found
08/02/14 22:43:57
>>399
IE以外のモダンブラウザではa要素以外への:hover指定も可能（IE7が対応してるかどうかは不明）
そのCSSではa要素の:hover指定しかしてないから
.test:hover {
border: ～～;
background: ～～;
}
で対応ブラウザでは class="test"の領域がホバー時に変化すると思う
401:386
08/02/14 23:25:39
>>393
提示していただいたURL、とても参考になりました
どうもありがとうございました
402:Name_Not_Found
08/02/15 08:41:32 XtnXDQtu
URLﾘﾝｸ(3d.skr.jp)
このタイプの掲示板をなるべくCSSに置き換えれる部分は置き換えようと思っているのですが
レスを付けると画像を迂回するようにレスが設置されていく表現はCSSでは難しいでしょうか？
画像部分、投稿時のコメント部分、レス部分とすべて<div>で囲んでいるのですが。
403:Name_Not_Found
08/02/15 08:53:20
そうか。
簡単にブログが作れると宣伝→とりあえずライト層が集まってくる
→俺様の思い通りにしたいからなんとか汁→初心者スレ
って流れなのか。html知らずにブログできる時代なんだなぁ。
404:Name_Not_Found
08/02/15 12:03:23 MVIbgkRm
┌─┐文字文字
├画像┤文字文字
└─┘文字文字文字
モジモジモジモジモジモジ
モジモジ
ってしたいってこと？
だったら、画像にフローとを指定すればいいんじゃね？
405:Name_Not_Found
08/02/15 12:03:57
>>404は>>402へ
406:Name_Not_Found
08/02/15 13:30:32
>403
小野田さんかよ
407:Name_Not_Found
08/02/15 19:45:50 XtnXDQtu
>>404
あ、そうか、今画像と画像サイズ情報などをdivで囲ってたから
float指定してもそのようにならなかったのかな。
試してみます。
408:Name_Not_Found
08/02/16 14:33:42
すいません教えてください。
<table>の<tr>に :hover 指定して横一列をマウスオーバーで色変更したのですが、
なぜかIE6だけで色が変わりませんでした。
ググってみたらいろいろなやり方があるので試したところ、
jsを使ったりすればIE6でもできるようになりましたが
今度はブラウザで警告メッセージが出るようになっちゃいました。
この警告メッセージが出ないようにIE6で効果がでるようにするにはどうしたらいいですか？
よろしくお願いします。