1read 100read
2011年12月2期Web制作48: CSS初心者スレッド＝10th＝ (815) TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▼
・　次のスレ
50: ゲーム関連サイト作成＆運営方法スレ9 (360)
51: 2ch発ホームページ製作会社立上げ【模索】 (884)
52: ◇ツール関連総合スレッド・Web制作方面◇ (363)
53: 魔法のｉらんどに疲れた奴の集い ２ (547)

CSS初心者スレッド＝10th＝


1 ：11/05/27 〜 最終レス ：11/12/23
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
《関連スレ》
Webサイト制作初心者用質問スレ Part 224
http://hibari.2ch.net/test/read.cgi/hp/1301891537
《前スレ》
CSS初心者スレッド＝9th＝
http://hibari.2ch.net/test/read.cgi/hp/1287470663/
《過去スレ》
CSS初心者スレッド＝8th＝
http://hibari.2ch.net/test/read.cgi/hp/1273383771/
CSS初心者スレッド＝7th＝
http://pc11.2ch.net/test/read.cgi/hp/1251527427/
CSS初心者スレッド＝6th＝
http://pc11.2ch.net/test/read.cgi/hp/1234355194/
CSS初心者スレッド＝5th＝
http://pc11.2ch.net/test/read.cgi/hp/1228900036/
CSS初心者スレッド＝４ｔｈ＝
http://pc11.2ch.net/test/read.cgi/hp/1218200382/
CSS初心者スレッド＝3rd＝
http://pc11.2ch.net/test/read.cgi/hp/1212198165/
CSS初心者スレッド＝2nd＝
http://pc11.2ch.net/test/read.cgi/hp/1207202319/
CSS初心者スレッド＝1st＝
http://pc11.2ch.net/test/read.cgi/hp/1193327030/

2 ：
あ、立てれた。
ということで、前スレは残り少ないのでこちらで質問させてもらいます。
非常に恥ずかしい質問なんですが、外部CSSを一切読み込ませてない状況で
以下のようにしたとき、
<div style="background:#FFCC33;">
　<div style="margin-bottom:20px;">ABC</div>
</div>
<p>XYZ</p>
外側のdivの背景色（オレンジ色）が「ABC」の下に20px分伸びるのかと思ったらそうならず、
XYZの上に白いスペースが20px分できます。
これってこの挙動で正しかったでしょうか？　オレンジ部分が20px伸びるのかと考えていたんですが。
また、外側のDIVにpadding:1px 0px;を指定すると最初思っていたようにオレンジ部分が20px伸びます。
（XYZはオレンジの真下にくっつくように配置されます、当たり前ですが）
なぜpadding:1px 0px;を指定したけっか正常に（？）動くのかもわかりません。
この挙動は正しいのでしょうか？
おかしいとしたら他にCSSは使っていないのですが、どんな原因が考えられるでしょうか？
すみませんが誰かご意見お願いします

3 ：
すみません、解決しました
マージン相って奴だったみたいです、恥ずかしい。はぁー

4 ：
>>2-3
マージン相というのを今日初めて知りましたが、
CSSは何のメリットがあってそういう仕様にしているのでしょうか。

5 ：
　下記を読むと書いて有るかも・・・
CSS1の仕様書（W3C勧告）
http://www.w3.org/pub/WWW/TR/REC-CSS1
CSS2の仕様書（W3C勧告）
http://www.w3.org/pub/WWW/TR/REC-CSS2
CSS1仕様書の日本語訳（どら猫本舗）
http://www.doraneko.org/webauth/css1/
Positioning（W3Cワーキングドラフト）
　とほほより転載　http://www.tohoho-web.com/css/basic.htm
http://www.w3.org/pub/WWW/TR/WD-positioning

6 ：
あっ　ごめんにゃ・・・
Positioning（W3Cワーキングドラフト）
http://www.w3.org/pub/WWW/TR/WD-positioning

7 ：
>>5
とほほ は内容もとほほだからオススメしない方がいいような。

8 ：
仕様書はとほほと関係ないでしょ ? >7

9 ：
10px * 10pxの範囲に
3px * 10pxの画像をrepeat-xした場合
12px表示されてはみ出るんでしょうか？
それとも画像が切れた感じで10px分になるんでしょうか？

10 ：
やってみたらええやん

11 ：
実際にやってみれば分かることを聞くな

12 ：
きっと実行結果を見ても信用できないんだろ
筋金入りの他力本願ｗ

13 ：
IE対応する場合ってIEのみCSSを分けるべきでしょうか？

14 ：
リンク付き画像のボーダーを一括で0にしたいのでググったら
a img { border:none} を書けばいいということはわかったのですが
どこに書いたらいいのかわかりません
<head></head>の中に書いたら、文字として出力されてしまいました。
解決策を教えてください。

15 ：
>>14
ホームページ制作入門的な本を読む

16 ：
>>13
分けない方がいい

17 ：
http://10plate.blog44.fc2.com/blog-entry-229.htmlの
img { border-style:none; }を加えたいのですが
「スタイルシート末尾」とはどこになるのでしょうか？
一番下でいいのでしょうか？

18 ：
<style type="text/css">
<!--
　　・
　　・
　　・
a img { border-style:none; }
-->
</style>

19 ：
>>18
すいません
自己可決しますたすた・・・

20 ：
回答もらっときながら自己解決って失礼だな
形だけでも礼は言っとくもんだ

21 ：
はい
ありがとうございました

22 ：
>>18
XHTMLでコメントアウトすんなｗ

23 ：
全くだ。XHTMLならCDATAだろうが。
IEも対応するなら外部スタイルシートだろうが。

24 ：
酷い回答だな

25 ：
どの辺が酷い？

26 ：
コメアウ

27 ：
コメントアウトが適切な表現じゃないってこと？

28 ：
それぐらいわかると思うが、普通はどう表現するんだ？

29 ：
もうとっくに答えは出てるだろ

30 ：
少なくとも>>22以降にはないな

31 ：
またDoCoMoの話かい？

32 ：
DoCoMoとか関係ないだろ
XHTMLならコメントにしたら動かん

33 ：
えっ　?

34 ：
この流れ何度目だろ
非似XHTMLなら動くから勘違いする人が多いんだよな
明確に文法違反なのに

35 ：
わからない人は Content-Type application/xhtml+xml でぐぐるといい

36 ：
ドコモはstyle要素を解釈できないって話

37 ：
それはコメントの話と関係ない

38 ：
>>35
サーバのヘッダにこれつけないと発生しないからねぇ。

39 ：
コメントアウトってstyle要素解釈しないブラウザ向けのバッドノウハウじゃないの？
拡張子.xhtmlにしてローカルで開けば、FirefoxとかはXHTMLとして解釈してくれるっぽいよ
MIMEタイプxmlで実際に使うときは拡張子.htmlにしないと、IEでダウンロードされてしまうけど

40 ：
>>38
動くことと仕様を守ることは話が別
text/html で動けばいいなら空要素を閉じなくていいし、終了タグを省略していいし、属性値をクオートでくくらなくていい。HTML と変わらない。
でもはれは XHTML にする意味がないだろ

41 ：
>>38は、だから気付かない　って言ってるだけだと思うが

42 ：
application/xhtml+xml では style要素の内容は #PCDATA、text/html では CDATA、
つまり、マークアップ区切り文字を認識するのかしないのか、違いがある。
ただ、XHTML+text/html の場合、どう考慮するべきかは難しい。
最終的にはブラウザの実装に合わせるしかないのが現状。
どうでもいいけど、XHTMLにする意味は何？
ドコモ対策のみ？

43 ：
ドコモ対策ならXHTMLにしない方がいいだろ

44 ：
iモードブラウザ1.0には、CSS無しで対応しろ、と？
ある意味納得。

45 ：
>>40
>>41の言ってるとおりです。
仕様を守らなくていいとかそういう意味じゃないっす。

46 ：
>>45
見当違いだったのか…、すまなかった

47 ：
よく「W3C勧告に準拠」などと言われる一方で、CSSMANIA等にアップされてるサイトに対して
Web Develperで「CSSファイルの検証」を試みると、エラーがズラリと列挙されるサイトも
少ないないのですが、あまり重要視されていないということでしょうか？

48 ：
>>47
重視しないサイトもあるとしか
それが多数派かどうかは知らないし、関係ない

49 ：
多くのブラウザで表示させようとしてハックを使うと、バリデータは通らなくなったりする

50 ：
横幅を1000pxで作る場合、以下のようなHTMLだったら
#box{width:1000px;}と単純に1000px指定するだけで問題ないですか？
もしboxにborder:1px solid #000000;を書く場合は#box{width:998px;}とborderの太さ分引くべきでしょうか？
<html>
<head>
</head>
<body>
<div id="box">
</div>
</body>
</html>

51 ：
>>48
お前朝鮮人か？
句読点の位置がおかしいぞ。

52 ：
>>51
２ちゃん初心者か？まあ肩の力抜けや

53 ：
>>51
「1番好き」とか「第3者」とか「50歩100歩」よりはまだマシだよｗ

54 ：
>>50
HTMLの準拠モードによって答えは違う。

55 ：
54先生どもです
標準モードで作ってます

56 ：
>>55
borderとmarginとpadding分は引く

57 ：
質問です。
CSSで背景に画像を指定して、その画像が常に中央に来るようにしたい。
例えば横幅1000pxの画像を指定して、ブラウザを100pxに狭めても画像の中央が常に画面の中央に来るようにしたいと思っています。
この説明でわかるかな？説明が下手ですみませんがよろしくお願いします。

58 ：
background-positionのこと？

59 ：
>>57
敬語なのにバカにされてる感じがする

60 ：
>>59
そう？

61 ：
>>59
慇懃無礼って奴だな。

62 ：
>>58
それと calc か

63 ：
>>56
先生のゆうとおりにやってみます
ありがとうございます

64 ：
質問
CSSで左側が四角で右側が三角のボックスを作りたい。
┌─
│　　＞
└─
こんな感じ
どうやったらいいですか？

65 ：
制作会社に依頼したら出来ます

66 ：
文章主体のページで、ボディー内の本文に当る部分を#includeするようなことは
出来ないものでしょうか？
もし、できれば、管理しやすいように思うんですが。
インラインフレームじゃなくて

67 ：
出来るよ
でもCSS関係ないよね

68 ：
>>65
2chでは難しいってことですか
ありがとうございました

69 ：
そうですね
質問でなく制作依頼を引き受けてくれる人はいないので難しいですね

70 ：
俺に作らせてよ

71 ：
>>64
CSSの斜め線はborderの角を使うんだってさ

72 ：
>>70>>71
よろしくお願いします
一応やってみたけどこれが限界でした
/* CSS */
.togatta_kado {
background-color: #999999;
padding: 20px;
-moz-border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px; /* Firefox用 */
-webkit-border-radius: 0px 40px 40px 0px / 0px 40px 40px 0px; /* Safari,Google Chrome用 */
-o-border-radius: 20px 30px 40px 50px / 30px 40px 50px 60px; /* Opera用 */
}
/* HTML */
<div class="togatta_kado">
<p>右だけ尖った角</p>
</div>

73 ：
border-radiusに接頭辞付けんな
てか三角部分のCSSは？

74 ：
::selection {
background: #ffb7b7;
}
::-moz-selection {
background: #ffb7b7;
}
このようにして、選択範囲の背景色を変更しようとしています。
が、これだと<input type="text">の入力値の選択範囲には適用されないようです。
<input type="text">にも適用するには、どうしたらいいでしょうか。

75 ：
使っちゃあかん

76 ：
>>75
input要素の背景色を変更してはいけないということですか？
それとも-moz-selectionだけでなく、selectionもあまり使ってはいけないということなんでしょうか？

77 ：
草案のセレクタだし、接頭辞ついてるし、>>74の通りブラウザごとに挙動違うし
早いと思う

78 ：
デザインはーじゃなくて思いやり

79 ：
>>77
ありがとうございます。
ベース色が暗い色のページを閲覧する際、通常の選択色だととても見難く、解決策として見つけたのが>>74の方法でした。proxiomitronでスタイルを書き換えればいいと。初めに書いておくべきでした。すみません。
-moz-selectionをはずしてFirefoxで確認したところ、スタイルシートで云々しなくても背景が黒っぽいと選択範囲の色が反転色に変わってくれるようなので、今のところは::selectionのみを使うことにします。
あとinputの件はやっぱり無理ですかね？

80 ：
floatレイアウトでサイドバーを付けてるページがあります。
下のようなイメージです。上下にヘッダ、フッタ(clear:both;)はありますが重要ではありません。
contents　　　　sidebar(幅固定)
　　↓　　　　　　　　↓
「　　　　　　　　　「
　　float:left;　　float:right
　　　　　　　　」　　　　　　」
contentsの中身が文字なら全く問題なくsidebarがサイドバーとして表示されるのですが、
contentsの画面の横幅を超える大きいテーブルだった場合に、サイドバーが右下部分に表示されてしまうようです。
<- 画面幅 ->
「
　　float:left;
　　　　　　　　」
　　　「
　　　float:right　←サイドバーがここに移動
　　　　　　　　」
これではサイドバーでなくフッタ右バーになってしまいます。
・コンテンツが文字列など場合はサイドバーが右端
・テーブルがある場合はサイドバーが画面からはみ出ても構わない
とかするうまい方法はあるでしょうか？

81 ：
>>80
2つ目の問題がよく分からなかったけど…
サイドバーもfloat:leftにする。
一番いいのはテーブルがはみ出ないようにサイズ指定。

82 ：
>>81
それだとサイドバーが下に行っちゃいませんか？
テーブルのサイズを小さくするのは無理です。
と、いうよりブラウザの横幅を小さくされたときにサイドバーが下に飛んでしまうのを何とかしたいというのが発端なので。

83 ：
>>82
もう少し自分で工夫したら？

84 ：
>>80
floatって単語の意味知ってるの？

85 ：
浮く　浮かせる(´・ω・｀)

86 ：
>>85
それを知ってたらどうすればいいかもう分かるよね！(^o^)v

87 ：
いちごフロートを食べるん ? >>86

88 ：
質問
UTF-8環境でアスキーアートを表示するための
font-family等の設定はどのようにすると良いでしょうか？

89 ：
フロートって浮動小数点扱う時の型でしょ

90 ：
ここで質問していいどうか分かりませんが、一応質問させて頂きます。
初心者でホームページ作成してて、
メニューのとこに小さい線がで来て、それを消したいんですが、
どう直しても消えません。
http://db.tt/EOITpCQ
スクリーンキャプチャで赤丸のとこ
http://db.tt/V9HK4IQ
CSS
#menu a menu a:linkのあたりのCSSが間違ってるでしょうか？
display:inline-block;をblockにすると、メニューの文字が一行ずつズレます。

91 ：
質問するときにすぐ試せるようにhttp://cssdesk.com/みたいにすぐ確認できるようなとこに張ってもらえると俺は助かる

92 ：
>>91
ありがとう。出直して来ます。
あとで教えて下さい！！

93 ：
http://cssdesk.com/ERgqw
出来ました。助けて下さい。

94 ：
http://phpspot.org/blog/archives/2011/06/csscss_prism.html
見出しタイトルの「CSSのアドレスを入力すると使われている色の一覧をプレビューできる「CSS Prism」」
の部分の文字列が何かかっこいいんですが
これはどうやってるのでしょうか？

95 ：
>>94
っ 開発ツール

96 ：
>>91
まだー？

97 ：
こっち沙希にお願いします

98 ：
>>96
うるせーはげ！
#menu a,#menu a:link,#menu a:visited {
font-size: 18px;
text-decoration: none;
color: #b3b3b3;
background-color: transparent;
width: 100px;
height: auto;
text-align: center;
padding: 2px 5px;
display: inline-block;

}
の部分を見直せ！

99 ：
>>98
見直しても分からないんだよな。
ほぼ本の丸写しなのに、上手く行かなくて涙目。
display: inline-block; ここら辺間違ってると思うが、どうやって直せばいいのかしら
>>96
ありがとう

100read 1read
1read 100read
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲
・　次のスレ
50: ゲーム関連サイト作成＆運営方法スレ9 (360)
51: 2ch発ホームページ製作会社立上げ【模索】 (884)
52: ◇ツール関連総合スレッド・Web制作方面◇ (363)
53: 魔法のｉらんどに疲れた奴の集い ２ (547)