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

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

CSS初心者スレッド=8th=

1 :Name_Not_Found:2010/05/09(日) 14:42:51 ID:???
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。

《関連スレ》
Webサイト制作初心者用質問スレ Part 212
http://pc11.2ch.net/test/read.cgi/hp/1249471196/

《前スレ》
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初心者スレッド=4th=
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 :Name_Not_Found:2010/05/09(日) 14:43:39 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
 http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには? text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に5.)をご覧ください。
1.'text-align'に関する考察
 http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
 http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
 http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
 http://www.mozilla.gr.jp/standards/webtips0004.html

3 :Name_Not_Found:2010/05/09(日) 14:46:17 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 http://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
 http://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと(Netscape4でも崩れない段組みの実例)
 http://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm

4 :Name_Not_Found:2010/05/09(日) 14:47:45 ID:???
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど?
A4: まずclear忘れがないかを確認してください。
floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト(imgを含む)だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:(浮動要素のwidth);”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
 http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
 http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
 http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
 http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
 http://www.rju666.com/web/layout/imitate_frames.html

Q6:画面中央に配置するにはどうすれば?
A6:左右(水平方向)のセンタリングはA2に既出。垂直には色々な方法があります。
 「スタイルシート 縦中央(垂直中央)」参照のこと。
 http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうするか。
A7:CSS2.1ではbackground-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
 もしくはCSS3を待ちませう。

5 :Name_Not_Found:2010/05/09(日) 14:50:19 ID:???
【FAQ】
Q8.dt・ddを横並びにしたいのですが。(会話文など)
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
 http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか?
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

Q10: リンクを新しいウィンドウで開かせるにはどうしたら?
A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
 http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ(A3)を見なさい。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
 http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html

6 :Name_Not_Found:2010/05/09(日) 15:49:42 ID:???
【参考】
 IEの position:absolute; のバグを利用した擬似フレーム

----------------------------------------------------------------

*IEの position:absolute; のバグを利用した擬似フレーム

1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}

/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html

7 :Name_Not_Found:2010/05/09(日) 15:51:07 ID:???
【初心者向けの解説】
正しい知識を得たい人の爲のCSS2リファレンス
 http://hp.vector.co.jp/authors/VA022006/css/

【構文チェック】
W3C Markup Validation Service
 http://validator.w3.org/
W3C CSS Validation Service
 http://jigsaw.w3.org/css-validator/

【ブラウザのバグリスト】
CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.at.infoseek.co.jp/

【仕様書】
CSS 2.1 Specification
 http://www.w3.org/TR/CSS21

8 :Name_Not_Found:2010/05/09(日) 18:13:27 ID:???
>>1

9 :Name_Not_Found:2010/05/09(日) 23:13:30 ID:???
いちょつ!

10 :Name_Not_Found:2010/05/09(日) 23:15:10 ID:???
お薦め良書はないの?

11 :Name_Not_Found:2010/05/09(日) 23:54:16 ID:???
無い

12 :Name_Not_Found:2010/05/12(水) 09:58:04 ID:QJMLhqpR
下記のコードは、現在表示中のサブメニューとその他のサブメニュー表示の文字と背景の色を変えるものです。
これで、うまく表示できているのですが、
現在表示中のサブメニュー(例ではトップページ)の<li>の中で<div id="curr_menu">を指定する方法が、
ダサイ感じがしています。もっとスマートな方法があれば教えて下さい。

【html】
<div id="menu"><ul>
<li><div id="curr_menu"><a href="/index.html">トップページ</a></div></li>
<li><a href="/service.html">サービス</a></li><li><a href="/price.html">料金</a></li>
<li><a href="/aboutus.html">会社概要</a></li><li><a href="/contact.html">お問い合わせ</a></li>
</ul></div>

【styleシート】
#menu a{ text-decoration:none;background-color:#99ccff;color:black;display:block;width:180px;}
#menu a:hover { text-decoration:none;background-color:#0090ad;color:white;display:block;width:180px;}
#menu li {list-style-type:none;text-align:center;margin:1px;line-height:2;}
#curr_menu a{ text-decoration:none;background-color:#0090ad;color:white;display:block;width:180px;}
#curr_menu a:hover { text-decoration:none;background-color:#0090ad;color:white;display:block;width:180px;}

よろしくお願いします。

13 :Name_Not_Found:2010/05/12(水) 14:10:07 ID:???
【html】
<ul id="menu">
<li><a href="/index.html">トップページ</a></li>
<li><a href="/service.html">サービス</a></li><li><a href="/price.html">料金</a></li>
<li><a href="/aboutus.html">会社概要</a></li><li><a href="/contact.html">お問い合わせ</a></li>
</ul>

【styleシート】
#menu a{ text-decoration:none;background-color:#99ccff;color:black;display:block;width:180px;}
#menu a:hover { background-color:#0090ad;color:white;}
#menu li {list-style-type:none;text-align:center;margin:1px;line-height:2;}
#menu li:first-child a{ background-color:#0090ad;color:white;}

14 :Name_Not_Found:2010/05/12(水) 15:16:03 ID:axmsOv9K
うえ

これじゃ変わらないじゃん。

>>12

がやりたいのは、ページ事に curr_menu で分けたいんだと思うぞ。

おいらも同じような事考えたんだけど、難しいのでjavaにした。



15 :Name_Not_Found:2010/05/12(水) 15:54:57 ID:???
>java

16 :Name_Not_Found:2010/05/12(水) 15:59:03 ID:???
>おいら

17 :Name_Not_Found:2010/05/12(水) 16:55:16 ID:???
泣くなよ

18 :Name_Not_Found:2010/05/12(水) 18:27:20 ID:???
PHPのことかえ?

19 :Name_Not_Found:2010/05/12(水) 19:59:14 ID:axmsOv9K
javascriptだよ

20 :Name_Not_Found:2010/05/12(水) 20:12:29 ID:???
liにclass="on"
とかつけるんじゃないか普通

21 :Name_Not_Found:2010/05/12(水) 20:18:52 ID:???
id="" じゃ駄目?

22 :Name_Not_Found:2010/05/12(水) 20:37:07 ID:???
#menu li:first-child+li a{ background-color:#0090ad;color:white;}

23 :Name_Not_Found:2010/05/13(木) 13:36:32 ID:???
background-color
background-image
ではbackground-imageのほうが優先されるのでしょうか?

24 :Name_Not_Found:2010/05/13(木) 13:52:40 ID:???
レイヤー2:background-image
レイヤー1:background-color

こういう風に上に乗ってるだけ
だから画像の表示できない環境の時背景色が見える
もしくは画像を全面にしてないとき画像の切れ目から背景色が見える
あるいは半透明の画像なら背景色が画像の下に見て取れるってこと
優先がどうとかの問題じゃなくて別物が上下に並んでるだけ

25 :Name_Not_Found:2010/05/13(木) 13:56:01 ID:???
>>24
ありがとうござんす。

26 :Name_Not_Found:2010/05/13(木) 14:38:47 ID:???
CSSが何の略なのか調べるといいよ

27 :Name_Not_Found:2010/05/13(木) 15:11:58 ID:???
>>26
この流れでそのレスが出てくるお前が調べた方がいいと思うが・・・

28 :Name_Not_Found:2010/05/13(木) 16:50:26 ID:???
じゃあみんなで調べるか

29 :Name_Not_Found:2010/05/13(木) 16:59:50 ID:???
滝がどうの

30 :Name_Not_Found:2010/05/13(木) 17:30:57 ID:???
* { margin: 0; padding: 0; list-style-type: none; }

#Box ol { width: 200px; background: url(back.gif); }
#Box li a { display: block; }
#Box li a span { display: block; background: url(frame.gif); text-align:center; padding:5px; margin: 0 auto; }

#Box li a { position: relative; z-index: 1; }
#Box li a span { position: relative; z-index: 3; }
#Box li a img { position: relative; z-index: 2; }




<div id="Box">
<ol>
<li>
<a href="#">
<span>
<img src="tds_idou.jpg" width="120" height="90" border="0" alt="">
</span>
</a>
</li>
</ol>
</div>

31 :30:2010/05/13(木) 17:35:32 ID:???
上記のソースで、
olに下地の背景画像を設定、
spanに画像のフレーム(額のような透明部分のある画像)を背景画像を設定し、
spanを入れ子のimgの上に持ってくる事は可能でしょうか?
※z-indexはマイナスではなく

32 :Name_Not_Found:2010/05/13(木) 18:14:00 ID:???
額縁用のspan要素を、img要素と同じ階層に作らないと駄目

33 :30:2010/05/14(金) 13:48:23 ID:???
やはり無理ですか。空要素入れたくないな…。
spanの下にstrongでタイトル付けてそれ伸ばして引っ張るかな。
ありがとうございます。

34 :Name_Not_Found:2010/05/14(金) 18:01:52 ID:???
ページ幅はどれくらいにするのがいいでしょうか?
できるだけ広い方がいいのですが、ユーザー視点だとどれくらいなのでしょうか

35 :Name_Not_Found:2010/05/14(金) 18:22:43 ID:???
>>33
そこまで酷いHTMLで空要素だけは嫌がる理由がわかんね

>>34
ユーザからして一番広い幅は、指定なしにしてやればその人の環境で一番広い幅になる

36 :12:2010/05/14(金) 19:30:19 ID:BO58iRP/
皆さん、レスありがとうございます。


37 :Name_Not_Found:2010/05/14(金) 21:53:42 ID:mByv59dY
回り込み解除で.clear{ clear : both; }を使う場合どちらがよいのでしょうか?

・ <br class="clear" />

・ <div class="clear"></div>

38 :Name_Not_Found:2010/05/14(金) 21:58:05 ID:???
>>34
アクセス解析で訪問者の解像度を見てみ。XGA以下は2〜3割になってきた。
リキッドでないなら、最近はほとんど900〜980pxくらいかねぇ。

39 :Name_Not_Found:2010/05/14(金) 22:14:13 ID:???
>>37
どっちもダメ

40 :Name_Not_Found:2010/05/14(金) 22:16:16 ID:???
>>37
上:clearはフロック要素にしか使えない
下:空要素は駄目

41 :Name_Not_Found:2010/05/14(金) 22:17:21 ID:mByv59dY
>>39
ただしい方法は?

42 :Name_Not_Found:2010/05/14(金) 22:18:52 ID:???
次の要素に指定

43 :Name_Not_Found:2010/05/14(金) 23:20:58 ID:mByv59dY
状況説明が足りなかったようです、すいません。
<div></div>の中に<div></div>、その中に横並びのリストを入れると<div></div>をはみ出してしまいます。
それを回避するために使います。

#mmm{
width : 100%;
background-color : #ffff00;
}
#ttt{
margin:0px auto;
width : 700px;
}
#ttt ul{
padding : 0;
margin : 0;
}
#ttt li{
float : left;
padding-right : 20px;
margin : 0px 10px 0px 0px;
}

<div id="mmm">
文字
<div id="ttt">
<ul>
<li>リンク1</li>
<li>リンク2</li>
<li>リンク3</li>
</ul>
</div>
</div>

44 :Name_Not_Found:2010/05/14(金) 23:35:40 ID:???
>>43
足りる足りないではなくみんなわかった上で
どっちも間違い
と言っているだけ
はみ出て普通の動作

45 :Name_Not_Found:2010/05/14(金) 23:38:44 ID:3QcjsyKC
>>37
>・ <br class="clear" />
<br clear="all" />が正解かと。


>・ <div class="clear"></div>
CSSで以下を指定してるならあり
.clear {
clear:both;
}

46 :Name_Not_Found:2010/05/14(金) 23:42:22 ID:3QcjsyKC
>>34
迷ったときはYahooに合わせろってのが定説だけど
俺は最近だと1000pxまでは許容範囲って感覚を持ってる

47 :Name_Not_Found:2010/05/14(金) 23:44:32 ID:3QcjsyKC
>>37
ごめん、一行目を読み飛ばしてた・・・

48 :Name_Not_Found:2010/05/14(金) 23:46:16 ID:mByv59dY
>>44
それでは、はみ出さないようにするには?

49 :Name_Not_Found:2010/05/15(土) 00:56:07 ID:???
>>46
YAHOOって実は可変なんだぜ

>>48
リストの下にブロック要素を入れてクリア
どうしてもそれが嫌ならclearfixでググれ

50 :Name_Not_Found:2010/05/15(土) 04:22:01 ID:???
>>37>>41>>43>>48

ttp://blog.d-spica.com/entry/070307clearfix.html

51 :Name_Not_Found:2010/05/16(日) 22:12:22 ID:???
無料のテンプレートで勉強をしておるのですが
bodyタグで text-align: center;して次の子要素であるページ全体を包むdivタグでまたtext-align: left;してるのが大半です。
何故これをしてるのかがわかりません。
最初からbodyタグでtext-align: left;だけでいいのではないのかと悩んでます。
どなたかご教授お願い致します。

52 :Name_Not_Found:2010/05/16(日) 22:22:11 ID:???
>>51
コンテンツのセンター寄せで正しいcssではmargin:0 auto;を使うのだが
IE6とか対応してないブラウザ用にそういう操作が必要

53 :Name_Not_Found:2010/05/16(日) 22:24:58 ID:???
>>51
IE6+互換モードの場合、margin:autoでのブロック要素の中央寄せができないため
まずブロックを中央寄せにするためbodyでtext-align:centerして
そのブロック内のテキストを左寄せするためにそのブロックでtext-align:leftする
ぶっちゃけ素直に標準モードにすればそんなことしなくていい

54 :Name_Not_Found:2010/05/16(日) 23:41:36 ID:???
>>52-53
あーざっす。
なぞが解けました。

55 :Name_Not_Found:2010/05/16(日) 23:57:29 ID:???
>>52-53
質問してないけど、勉強になりました
やっぱそういうのを知るきっかけって、学校とか会社なんですかね?
私も独学中ですが、ここを覗いてなかったら知らなかったまま・・

56 :Name_Not_Found:2010/05/17(月) 00:07:49 ID:???
>>55
学校でも会社でもやってませんw
ただの趣味ですつーかサイト作ってると自然と憶える

57 :Name_Not_Found:2010/05/17(月) 00:26:27 ID:???
ブラウザによってまったく言うことを聞いてくれないときは、悲嘆にくれることもあるもんなあ。

58 :Name_Not_Found:2010/05/17(月) 00:57:33 ID:???
IEではよくあること

59 :Name_Not_Found:2010/05/17(月) 03:25:53 ID:???
HTML
<div id="menu">
<ul class="menu_f02">
<li><a href="#">HOME</a></li>
  <li><a href="#">MENU</a></li>
</ul>
</div>

CSS
 #menu {
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
ul.menu_f02{
height: 30px;
margin: 0px;
border-bottom: 5px solid #333333;
background-color: #0B7A8E;
}
ul.menu_f02 li{
float: left;
border-right: 1px solid #9AA7B6;
display: inline;
}
ul.menu_f02 li a{
height: 20px;
width: 130px;
padding: 10px 0px 0px;
border-bottom: 5px solid #333333;

60 :59:2010/05/17(月) 03:26:41 ID:???
上のようなメニューアイコンを作るコードがあったとします。
そこでお聞きしたいのはCSS上の[#menu ] [ul.menu_f02] [ul.menu_f02 li] [ul.menu_f02 li a]
これらはそれぞれどういう意図を持ってコーディングすればいいのかをお聞きしたいのです。
もっと具体的にいいますと、[#menu]と[ul.menu_f02]は同じように見えるんですが・・・ならばばらばらに書かずに#menuにすべてコードを統一しないのは何故なのか・・・。
[ul.menu_f02]と[ul.menu_f02 li]の違いはなんなのか・・・。
こんなことで二日も悩んでおります。
どなたかお教えください。


61 :Name_Not_Found:2010/05/17(月) 04:40:03 ID:???
一応つっこんどくと「メニューアイコンを作るコード」は存在しないからなw
アイコンを表示させるコードならともかく
あとCSSじゃソースはともかくコードともそもそも言わないかな
ついでにそのソースにはアイコンは存在してない件

>[#menu]と[ul.menu_f02]
[#menu]はリストを囲むブロック。そこの左右にボーダー
ul.menu_f02はリストそのもの。背景色と下線を設定
正直このソースだけだと別ける必要は感じないが、ものによってはdivの中に他のリストがあるかもしれないだろ

>[ul.menu_f02]と[ul.menu_f02 li]
ul.menu_f02はさっき言ったとおり、ul.menu_f02 liはリスト全体の中の項目
ul.menu_f02は通常フローのブロックなので横幅いっぱい背景色と下線が付く
ul.menu_f02 li(とul.menu_f02 li a)は不動要素なので内容物の幅分だけ
右側に横線と下線が(ul.menu_f02の下線の上に)付く

ていうかホントに基礎の基礎から勉強してきた方がいいぞ
ttp://az-store.nrym.org/archive/mynotes/lecture/

62 :59:2010/05/17(月) 13:12:40 ID:???
>>61
ul.menu_f02は通常フローのブロックなので横幅いっぱい背景色と下線が付く
ul.menu_f02 li(とul.menu_f02 li a)は不動要素なので内容物の幅分だけ

これははっと気がつかされました。
丁寧にご指導ありがとうございました。
そのURLで勉強しなおしてきます。

63 :Name_Not_Found:2010/05/18(火) 16:15:22 ID:???
#MENU li+li+li+li+li

この+ってなんですか?

64 :Name_Not_Found:2010/05/18(火) 18:03:14 ID:???
すみません、質問です。

独学でCSSを勉強して何とかサイトを構築しているのですが、例えば
<body></body>の中で、

<h1>お店の宣伝</h1>
<h2>見出し</h2>
<p>説明</p>

とすると、普通はCSSで設定した通りの位置や文字の大きさ、色などで
上記の順通りに上から下にブラウザ上で表示されますよね。

それで例えば、<h1></h1>をサイトの一番上部の左端に配置する設置で、
お店のマークや問い合せのリンクボタン、RSSのマークなどをその同じ位置
の右端に置きたい場合、どのようにすればいいのでしょうか?




65 :Name_Not_Found:2010/05/18(火) 18:12:44 ID:ncVAbPE+
質問です。

下記のHTML1とスタイルシートの組み合わせだと、
h1の文字サイズがスタイルシートの指定通りの11pxになるのですが、

DOCTYPEを付けたHTML2とスタイルシートの組み合わせだと
h1の指定が無視されて、h1の既定サイズになります。

どうしてでしょうか?

【HTML1】
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テスト</title>
<link href="css.css" rel="stylesheet" type="text/css" >
</head>

【スタイルシート(css.css)】
h1 {font-size=11px;
text-align:center;
}

【HTML2】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テスト</title>
<link href="css.css" rel="stylesheet" type="text/css" >
</head>

66 :Name_Not_Found:2010/05/18(火) 18:29:18 ID:???
>>64
positionでもいけるけどfloatでの方法はこんな感じ

html
<div id="wrap">
<h1>お店の宣伝</h1>
<ul class="menu">
<li><img src="お店のマーク" width="*" height="*" /></li>
<li><img src="問い合わせボタン" width="*" height="*" /></li>
<li><img src="RSSのマーク" width="*" height="*" /></li>
</ul>
<h2>見出し</h2>
</div>

css
#wrap { width: 800px; }
h1 { float: left; }
ul.menu { float: right; }
ul.menu li { display: inline; }
h2 { clear: both; }

67 :Name_Not_Found:2010/05/18(火) 18:31:20 ID:???
>>65
× h1 {font-size=11px;
○ h1 {font-size:11px;

68 :Name_Not_Found:2010/05/18(火) 18:33:41 ID:???
>>63
隣接セレクタ

69 :Name_Not_Found:2010/05/18(火) 18:38:32 ID:???
>>63
css3で調べるといいよ
その他にもたくさん面白そうなものがあるから

70 :Name_Not_Found:2010/05/18(火) 18:53:57 ID:???
>>66
早速のレス、ありがとうございました。
相当頂けると思っていなかったの感激です。

質問をシンプルにするため、実際の(こちらの)CSSと異なりますが
色々と試してみます。
ありがとうございました。

71 :Name_Not_Found:2010/05/18(火) 19:10:56 ID:???
隣接セレクタはCSS2.1に含まれてるだろ

72 :65:2010/05/18(火) 19:24:31 ID:ncVAbPE+
>>67
レスありがとうございます


73 :Name_Not_Found:2010/05/18(火) 20:10:33 ID:???
>>1
上のようなlinkのwidthを任意の横幅確保したいのですがどうすればいいでしょうか?
下のようにやっても無理でした
link {
width : 100px;
}

74 :Name_Not_Found:2010/05/18(火) 20:25:24 ID:???
何をやりたいのかわからないけど、link要素にwidthは指定出来ないよ

75 :Name_Not_Found:2010/05/18(火) 20:27:00 ID:???
>>73
>linkのwidthを任意の横幅確保したい
意味がよくわかんないなー
ちなみに書き間違えただけかもしれないけど、
link { width: 100px; } じゃなくて a { width: 100px; } にすべき

76 :75:2010/05/18(火) 20:29:34 ID:???
ああ間違えた
正しくは以下
a {
display: inline-block;
width: 100px;
}

77 :Name_Not_Found:2010/05/18(火) 20:30:02 ID:???
>>74,75
レスありがとうございます

<a href="hoge">a</a>
上のようなリンクだと押しづらいのでwidth:200pxみたいにしたいなと思いました。


78 :Name_Not_Found:2010/05/18(火) 20:32:20 ID:???
>>77
押しづらいっていう理由で広げたいなら、
a { padding: 0 2px; }
とかでいんじゃない?
画像とかならwidth指定(px)してもいいけど、
文字とか可変のものにwidth指定(px)するのはあんまよろしくないかな

79 :Name_Not_Found:2010/05/19(水) 13:31:20 ID:K/SoyvRK
paddingだと前後に別の文字がある場合、

80 :Name_Not_Found:2010/05/19(水) 15:27:21 ID:???
>>78
それだと全く解決にならないのです

もっとわかりやすく言うと
<ul>
<li><a href="hoge1">a</a></li>
<li><a href="hoge2">ab</a></li>

<li><a href="hoge3">abc</a></li>
</ul>

上のようなソースでリンクの幅だけでも合わせたいのです。
・a__
・ab_
・abc


81 :Name_Not_Found:2010/05/19(水) 17:09:47 ID:???
>>80
テーブルみたいなことやりたいなら、こんな感じかな。
aタグにtdタグの役割を、liタグにtrタグ役割をそれぞれ与える感じ。
ただし、IE7以下はtable系は使えない。

ul li a {
display: table-cell;;
background: #aaaaaa;
}
ul li {
display: table-row;
}


82 :Name_Not_Found:2010/05/19(水) 17:33:32 ID:???
>>80
別のやり方
ulをフロートして内容幅に合わせる方法。フロートでなくてもインラインブロックでもいい。

ul li a {
display: block;
background: #aaaaaa;
}
ul {
float: left;
}


83 :Name_Not_Found:2010/05/20(木) 09:44:21 ID:???
>>80
リストをdisplay:inline;
リストの中のaをdisplay:block; width:●em;
●を最大文字数にする。


84 :Name_Not_Found:2010/05/20(木) 17:05:01 ID:???
>>81-83
みなさまありがとうございます。

教えていただいたものを試してみたのですが、できませんでした
自分で調べてみます

85 :Name_Not_Found:2010/05/21(金) 10:04:14 ID:???
それはどっか別の所がおかしいんじゃないか?

86 :Name_Not_Found:2010/05/21(金) 11:30:59 ID:lKutqnUs
質問です。
下記のコーディングは2カラムレイアウトのサイドメニューの一部ですが、
「メニューの表示」と、「住所xxxと個人情報保護方針の文字」が重なって
表示されます。どうすれば、メニュー表示の下に住所等が表示されるように
なるのでしょうか?
よろしくお願いします。

【css】
#sub { width:200px; float:left;}
#menu {margin:0px;width:200px; height:40px;}
#menu a{ text-decoration:none;background-color:#99ccff;display:block;width:200px; height:40px;}
#menu a:hover { text-decoration:none;background-color:#0090ad;display:block; width:200px; height:40px;}
#menu li {list-style-type:none;text-align:center;margin:0px;height:40px;}
#note {margin:280px,0px,20px,0px;padding:280px,0px,20px,0px;}
#address { margin:20px,2px,0px,4px;}
#policy {margin:10px,,2px,0px,4px;}

【html】
<div id="sub">
<div id="menu"><ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="/service.html">サービス内容</a></li>
<li><a href="/price.html">料金案内</a></li>
<li><a href="/aboutus.html">プロフィール</a></li>
<li><a href="/contact.html">お問い合わせ</a></li>
</ul></div>

<div id="note">
<div id="address"><p>〒xxx-xxxx<BR>住所xxxx<BR>x-xx-xx</p></div>
<div id="policy"><p><a href="/policy.html">個人情報保護方針</a></p></div>
</div>
</div>

87 :Name_Not_Found:2010/05/21(金) 11:54:15 ID:???
>>86
まとめて書く時、,ではなく半角スペースで区切るんだよ
#address { margin:20px,2px,0px,4px;}
  ↓
#address { margin:20px 2px 0px 4px;}

88 :Name_Not_Found:2010/05/21(金) 12:26:59 ID:???
軽くdiv病だな

89 :Name_Not_Found:2010/05/21(金) 12:35:31 ID:???
<div id="address">
せめてこのくらい普通にaddress要素でやってほしい

90 :Name_Not_Found:2010/05/21(金) 15:32:28 ID:???
住所=address要素 ではないとおもうけどどうなんだろ…

91 :Name_Not_Found:2010/05/21(金) 16:23:06 ID:???
内容からしてaddress要素だろ

92 :86:2010/05/21(金) 16:53:58 ID:lKutqnUs
皆さん、レスありがとうございます。


93 :Name_Not_Found:2010/05/21(金) 17:39:33 ID:???
id="menu"もulさんに付けてあげて

94 :Name_Not_Found:2010/05/21(金) 21:40:14 ID:9TuhD5t0
真のdiv厨はbr使わんがな

95 :Name_Not_Found:2010/05/22(土) 03:28:44 ID:???
むしろdiv厨の方がbr厨兼ねてることが多い

96 :Name_Not_Found:2010/05/23(日) 14:27:36 ID:Quz1FPR+
header
---------
sub | main
---------
footer      のsubとmainの間に、ボーダーラインを引きたいのですが、

subの右側に引くと、subよりmainの高さが高いと、途中でラインが切れます。
mainの左側に引くと、mainよりsubの高さが高いと、途中でラインが切れます。
どちらの場合でも、ラインがfooterの所まで引かれるようにするには、
どうすれば良いのでしょうか?

97 :Name_Not_Found:2010/05/23(日) 14:54:08 ID:???
背景画像を使う

98 :Name_Not_Found:2010/05/23(日) 15:17:53 ID:???
おれ、テーブル厨だからそんな心配したことない。

99 :Name_Not_Found:2010/05/23(日) 15:34:46 ID:96SLUpFy
subとmainの両方に引けば?


#sub {
border-right:solid 1px #f00;
float:left;
}

#main {
position:relative;
left:-1px;
border-left:solid 1px #f00;
float:left;
}


100 :Name_Not_Found:2010/05/23(日) 15:42:41 ID:XCtq1jJC
質問です。

ある要素に次のようにフォントを指定しているのですが、FIREBUGで確認
してみると指定フォントが化けてしまっています。

.test{font-family : Arial,'MS Pゴシック',sans-serif;}

firebug:
font-family: '繝。繧、繝ェ繧ェ'

アドバイスお願いします。


101 :96:2010/05/23(日) 16:57:50 ID:Quz1FPR+
>>97,98,99
レスありがとうございます。

102 :Name_Not_Found:2010/05/23(日) 17:23:00 ID:???
>>96
ttp://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

あとは全体をもう一つdivでくくり背景画像で線を引いてやるとか。

103 :Name_Not_Found:2010/05/23(日) 21:09:21 ID:???
>>100
CSSにちゃんとフォント指定してるか?

104 :Name_Not_Found:2010/05/24(月) 06:11:08 ID:BuLNYj7r
下記のようにpositionを使った時、リンク位置が実際とずれてしまうのですが原因はわかるでしょうか?

具体的には、「パスワードを忘れた場合はこちら」の文字の、”場合はこちら”あたりにポインタを
持って行くと、新規登録へジャンプしてしまうのです。。


<a class="forgot_pass" href="../users/reset">パスワードを忘れた場合はこちら</a>
<a class="register" href="../users/add">新規登録</a>

#login_screen .forgot_pass {
display: block;
float: left;
position: relative;
left: 145px;
margin-top: 40px;
}

#login_screen .register {
display: block;
position: relative;
left: 200px;
margin-top: 40px;
}



105 :Name_Not_Found:2010/05/24(月) 07:00:32 ID:???
何をしたいのかさっぱりわからん。
position: relative; で left: 200px; って何?さらにマージン指定???

position: absolute; か?絶対指定はdisplay: block; 指定しなくても有効になるし。
ムダな指定消して最初からやってみな。

106 :Name_Not_Found:2010/05/24(月) 07:03:36 ID:???
>>100
HTMLとCSSファイルの文字コードが違ってんだよ多分。
ファイルの最初に @charset "文字コード"; って書いて保存しな。

UTF-8なら @charset "utf-8";

107 :Name_Not_Found:2010/05/24(月) 07:04:54 ID:???
>>106の @charset "文字コード"; 書くのはCSSファイルな。

108 :Name_Not_Found:2010/05/24(月) 07:22:35 ID:BuLNYj7r
>>105

了解です!

109 :Name_Not_Found:2010/05/24(月) 07:38:13 ID:BuLNYj7r
>>105

blockを消したら上手くいきました!
ありがとうございます!

110 :Name_Not_Found:2010/05/24(月) 21:21:58 ID:???
>>109
(ヽ´ω`) 横レスしますが、どういたしまして…

111 :Name_Not_Found:2010/05/27(木) 08:14:41 ID:???

   /|∧_∧|
   ||. ('ω'` | 今日のパンツはどんなかな
   ||oと.  U|
   || |(__)J|
   ||/彡 ̄ ガチャ

     ___
   /|∧_∧|
   ||. (    | すいません スレ間違えました
   ||oと.   |
   || |(__)J|
   ||/彡 ̄ ガチャ


112 :Name_Not_Found:2010/05/27(木) 10:25:24 ID:j+o1Bsa4
フォームでラジオボタンを配置しているのですが、
IE7/8で表示した際にデフォルトの緑色のラジオボタンではなく
黒色のシンプルなラジオボタンになってしまっています。
デフォルトの表示にしたいのですが、これはCSSで何を変えてやれば
良いのでしょうか?

113 :Name_Not_Found:2010/05/27(木) 11:18:31 ID:???
むしろ何も変えなければデフォルトになる
何かいじっちゃってるんだろ、見直せ

114 :Name_Not_Found:2010/05/27(木) 19:02:14 ID:???
height: 0 !important;
height /**/: 50px;

とセットでよく見るんですが、それぞれ何を意味してるんでしょうか?

115 :Name_Not_Found:2010/05/27(木) 19:39:52 ID:???
>>114
上は基礎的すぎるので最重要規則を調べてくれ
下のはIE6のみ除外するためのハック

116 :Name_Not_Found:2010/05/27(木) 20:06:03 ID:j+o1Bsa4
>>113
それ自体のCSSは外してもやっぱり変わらなくて、
継承でこういうことになっちゃうことってありますか?

117 :Name_Not_Found:2010/05/27(木) 21:54:36 ID:???
擬似フレームって要するに該当カラムにoverflowつけてやるだけで成立しますよね?

118 :Name_Not_Found:2010/05/27(木) 22:55:56 ID:???
いいえ

119 :Name_Not_Found:2010/05/28(金) 00:31:29 ID:???
CSSフレームの件について質問です

左をコンテンツ、右をメニューというレイアウトです
一応レイアウト自体はうまくいったのですが
スクロールバーが一番右(右のメニューの隣)に表示されてしまいます
見た目的にできれば左のコンテンツにスクロールバーを表示させたいのですが
どうすれば可能になるでしょうか?

120 :Name_Not_Found:2010/05/28(金) 00:41:41 ID:???
補足です
左コンテンツの幅は可変
右のメニューの幅は固定です

121 :Name_Not_Found:2010/05/28(金) 01:17:56 ID:???
スクロールバーを表示させたい左側のブロック要素に overflow:scroll; を指定

122 :119:2010/05/28(金) 01:44:50 ID:???
返答ありがとうございます
ご指摘の通り左側のブロック要素にoverflow:scroll;をつけてみました
スクロールバーは確かについたのですが、右のメニューのスクロールバーはつきっぱなしでした・・・
右のメニューのスクロールバーを消して、左側のコンテンツのみにスクロールバーをつける事は無理でしょうか?
* {
margin:0;
padding:0;
font-style:normal;
font-weight:normal;
font-size:13px;
}
#page{
width:auto;
height:100%;
background-color: #deeeda;
}
#left{
padding:0px 0px 50px 0px;
text-align:left;
background-color:#abcde0;
float: left;
overflow:scroll;
}
#right{
position:absolute;
width:200px;
height:100%;
background-color:#098765;
}

こんな感じで書いてあります
どうかお助けください

123 :Name_Not_Found:2010/05/28(金) 03:35:37 ID:???
html か body に overflow: hidden;

124 :119:2010/05/28(金) 07:57:39 ID:???
いえ、それをやると右のメニューのスクロールバーは非表示になり
左にスクロールバーは表示されるんですが
表示されるだけで自分では動かせないんです・・・
表示はされるけど実際は自分で動かせないお飾りみたいな感じでして・・・

やはり無理なのでしょうか?

125 :Name_Not_Found:2010/05/28(金) 08:34:45 ID:???
.>116
当然

>>124
body幅狭めれ

126 :Name_Not_Found:2010/05/28(金) 08:41:01 ID:jfe+URTi
>>125
ラジオボタンに影響するものって何でしょうか?

127 :119:2010/05/28(金) 09:11:24 ID:???
>>125
すみません幅はこれ以上狭められないです・・・
大人しく左にメニューを置いた方がいいんでしょうか?
個人的にはどうしても右にメニューを置きたいのです

元々のCSSの書き方に問題があったりしたらお教えください
こういう書き方ならばお前の希望通りにはなるよみたいな形で、どうか

128 :Name_Not_Found:2010/05/28(金) 09:20:34 ID:???
>>119
どっかにサンプル桶
あんたがどう書いてるかわからんと面倒だ

129 :Name_Not_Found:2010/05/28(金) 09:28:35 ID:???
>>119
#rightに position: fixed;
これじゃだめなの?
IE6でfixedバグあるから、そのへんは自分で探すとしてさ。

130 :Name_Not_Found:2010/05/28(金) 09:33:19 ID:???
>>126
根本的に勉強しろ

>>127
全部やらせようとすんな

131 :Name_Not_Found:2010/05/28(金) 09:36:07 ID:???
>>129
ありゃバグじゃなくて単純に未対応なだけ

132 :Name_Not_Found:2010/05/28(金) 09:38:45 ID:???
すなわちバグ

133 :Name_Not_Found:2010/05/28(金) 09:39:08 ID:???
バグでぐぐった方が情報量多いんだからどっちでもいいだろ

134 :Name_Not_Found:2010/05/28(金) 10:46:25 ID:???
>>132-133
間違いを指摘されたからって恥ずかしい奴だな

135 :Name_Not_Found:2010/05/28(金) 11:04:03 ID:???
>>134
ほっといてやれ

>>124
適当に作ったから勝手に改造しれ

html,body { height:100%; margin:0; }
#left { height:100%; margin-right:200px; overflow:auto; }
#right { height:100%; position:absolute; right:0; top:0; width:200px; overflow:none; }

<div id="left"><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p>
<p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p>
<p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p></div>
<div id="right"><p>メニュー</p></div>

136 :119:2010/05/28(金) 11:21:01 ID:???
すいません遅れました

>>128
そうでしたね、まどろっこしすぎましたね・・・
これがテストレイアウトです
ダウンロードパスは「テスト」です
AntiVirでウィルスチェック済みです
始めて1ヶ月少々なものですので、記述の稚拙さはご容赦を
ttp://uproda.2ch-library.com/lib250424.zip.shtml

>>130
申し訳ないです

>>135
ちょっと改造させてもらいます

137 :Name_Not_Found:2010/05/28(金) 11:24:50 ID:???
>>136
ならなくて当然だろ、>>135のhtml,bodyを見ろ

138 :119:2010/05/28(金) 11:35:00 ID:???
>>137
お答えいただいたということは拙いサンプルを見ていただけた事だろうと思いますので
それを前提としての話なのですがそれを行ってしまうと
左にスクロールバーはつきますが、右にもついてしまうのです
さらには#EX内部のリンクが映らなくもなってしまうのです・・・

まさにあっちが立てばこっちが立たず状態でほとほと困っています

139 :Name_Not_Found:2010/05/28(金) 11:51:34 ID:???
>>119
DOCTYPEは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" />
にしてるか?
dtdあるとうまくいかんかった希ガス。

140 :Name_Not_Found:2010/05/28(金) 11:55:00 ID:???
>>138
右についてない
というかそれ以前の問題で全体が縦に伸びている
ブラウザはFx基準にしろ、IE6は取り敢えず後回しにしろ

141 :119:2010/05/28(金) 12:40:41 ID:???
>>139
XHTML 1.0 Transitional//ENで行っております

>>140
確かに全体が縦に伸びてしまうのが問題です
左のコンテンツ部分のみ伸ばしたいのですが
どうにもそれが上手くいきません

IE6、Fxなど特にブラウザにはこだわっていないのですが
現状の記述ですと問題ありますでしょうか?

142 :Name_Not_Found:2010/05/28(金) 12:52:43 ID:???
>>141
html {width:100%;height:100%;}
#page{position:relative;height:100%;overflow:hidden;background-color: #deeeda;}
#left{height:100%;padding:text-align:left;background-color:#abcde0;float:left;overflow-y:scroll;}
#right{position:absolute;right:0;top:0;}

143 :119:2010/05/28(金) 13:05:03 ID:???
>>142
これを参考にしたらうまくいきました
ありがとうございます

何故この記述だとこうなるのか自分なりに解読してみます

144 :119:2010/05/28(金) 13:12:55 ID:???
・・・すいません、左のコンテンツ部分を可変にする場合はどうすればいいんでしょうか?
右のメニューの幅は固定、その余りを全て左のコンテンツに回す〜と言うような形なのですが

145 :Name_Not_Found:2010/05/28(金) 13:20:12 ID:???
>>144
>>>135
自分の頭で考えられないなら何も作ろうとするな

146 :Name_Not_Found:2010/05/28(金) 13:23:38 ID:???
>>144
float:left;をはずせ
で右のメニュー幅分右マージンとれ

147 :119:2010/05/28(金) 13:30:56 ID:???
マージン指定で行うんですね・・・ありがとうございます
これらを参考に作っていこうと思います
今日は本当にありがとうございました

148 :Name_Not_Found:2010/05/28(金) 13:34:53 ID:???
参考?

149 :Name_Not_Found:2010/05/28(金) 14:32:07 ID:???
>>148
まぁまぁ・・

それにしてもみんな優しいんだなあ
おれなんかフレーム使ったことがないから、ただ傍観していた。
>>119は幸せ者よ。うらやましいよ。ほんとに。

150 :ペ・ヨンジュン ◆3cMgdlp8VY :2010/05/29(土) 17:03:45 ID:???
CSS2.0で背景画像を自由に複雑に並べることはできますでしょうか?
例えば

・横に2種類
AABB
AABB
・縦に2種類
AA
AA
BB
BB
・複雑
AA  CC
AABBCC
  BB
DD
DD EEE
DD EEE

あくまで背景画像として並べたいのでtable等は使えません
よろしくお願いします


151 :Name_Not_Found:2010/05/29(土) 17:08:01 ID:???
>>150
position:absolute;

152 :Name_Not_Found:2010/05/29(土) 17:40:45 ID:???
コテには教えてやんねー

153 :Name_Not_Found:2010/05/29(土) 20:41:36 ID:qMl3o4yB
ヘッダーの作り方の違いが分からず困っています。
要素にheightを指定した場合、指定しなかった場合の違いを教えて下さい。

@ヘッダー自体にheightを指定してヘッダーインナー内でpaddingを使いロゴ等の位置を調整する方法

Aヘッダーにはheightを指定せずにロゴ等のpaddingで位置を調整する方法

この2つの違いは何ですか?どういう場合にどちらの方法を採用すればいいんでしょうか?

154 :Name_Not_Found:2010/05/29(土) 21:07:24 ID:sMpoop0z
名無しには教えてやんねー

155 :Name_Not_Found:2010/05/29(土) 21:20:05 ID:???
急に冷たくなったなあww

156 :Name_Not_Found:2010/05/29(土) 21:54:18 ID:???
>>153
ヘッダーインナー内って何?
<div id="header">
<div class="in">
<h1>ロゴ</h1>
</div>
</div>
ってこと?

157 :153:2010/05/29(土) 22:10:46 ID:qMl3o4yB
>>156
そうです。説明不足でした。

#head{
width:***px;
height:***px;
}

#header .in{
padding:**px;
}

という感じです。

158 :Name_Not_Found:2010/05/29(土) 22:24:43 ID:???
>>156
#header .inって必要なの?
#headerにpaddingかh1にmarginだかpaddingを持たせるのはだめなの?

159 :158:2010/05/29(土) 22:25:26 ID:???
レス番間違えた
× >>156
>>157

160 :Name_Not_Found:2010/05/29(土) 22:36:02 ID:qMl3o4yB
>>158
#headerにそのままpaddingを使うと#headerの大きさが高さが変ってしまい、
#header自体の高さを再指定する必要があるので面倒です。
#header_inにpaddingを指定すれば#headerの高さを変える事なく位置調整ができる、
というのを本を読んで学びました。

h1自体にmarginやpaddingを持たせる事も可能だと思います。

web標準ではできるだけheightの指定をしないようにするという事なので、
>>153でAが正しい記述の仕方なのか確認したかったので質問しました。

http://www.mozilla.gr.jp/standards/webtips0020.html

161 :Name_Not_Found:2010/05/30(日) 00:06:22 ID:???
>>160
絶対正しいってわけでもないし別に間違ってもいないよ
1より2の方があらゆる環境下(OS、ブラウザの違い)において優しいってだけ

> #headerにそのままpaddingを使うと#headerの大きさが高さが変ってしまい、
> #header自体の高さを再指定する必要があるので面倒です。
headerの高さを指定しなければいいんじゃないの?

> #header_inにpaddingを指定すれば#headerの高さを変える事なく位置調整ができる
例えば#headerに200pxのheightを指定して、#header .inにpadding20pxを指定したとして、
#header .inの中身が160pxを超えた場合、1~2行目と同じく高さ指定しなければならないと思うんだけど

うまく理解出来てないから変なこと言ってたらごめんね

162 :ペ・ヨンジュン ◆3cMgdlp8VY :2010/05/30(日) 10:12:44 ID:???
>151
大変ありがとうございます
最悪それでもいいのですが、
できるだけbodyやdiv等への一括指定のみで実現したいのです
(タグ別に何かを指定するのではなく)
CSS2.0以降や独自のものでもよいのでどうか教えてください

163 :Name_Not_Found:2010/05/30(日) 11:37:58 ID:???
コテには教えてやんねー

164 :Name_Not_Found:2010/05/30(日) 14:16:34 ID:???
>>162
jQueryの要素追加と背景のposition使え。

165 :Name_Not_Found:2010/05/30(日) 15:24:23 ID:???
position: absolute;を指定した要素の後に続く要素の配置について質問させてください。
<div id="header"><hi>logo</h1></div>
<div id="content"><img src="http://xxxxx/xxxxx.jpg" width="100%" /></div>
<div id="footer">footer</div>

#header {
position: relative;
z-index: 2;
width: 100%;
}
#content {
position: absolute;
z-index: 1;
width: 100%;
}
#footer {
width: 100%;
}

headerとcontent内の画像が重なって表示されるようにしたいと考え、上のソースのように指定しました。
headerと画像は重なって表示されましたが、position: absolute;を指定した要素は存在しない扱いになるので、
footerはheaderのすぐ下に配置されてしまいます。
footerがcontentの下に続くように配置するにはどの様にすればよいですか?
なるべくhtml側はそのままでcssで実現させたいのですが、
リキッドレイアウトなのでfooterの位置を絶対指定することも難しく行き詰まっております。
良い方法をご存知の方ご教示願います。
宜しくお願いします。

166 :165:2010/05/30(日) 15:26:58 ID:???
すいません。
<div id="header"><h1>logo</h1></div>
でした。


167 :Name_Not_Found:2010/05/30(日) 16:10:41 ID:???
>>165
#content内に置くのはその画像だけ?

168 :Name_Not_Found:2010/05/30(日) 16:30:52 ID:???
>>165
#contentじゃなく#headerをabsoluteにする

169 :165:2010/05/30(日) 16:57:53 ID:???
>167,168
ありがとうございます。
#content内にはテキストもありましたが、168の方法でうまくいきました。
#contentの位置を変更したいので#contentにabsoluteを指定しましたが、
#headerに指定すれば上手くいったんですね。
勉強になりました。
ありがとうございました。

170 :Name_Not_Found:2010/05/31(月) 16:43:33 ID:???
2カラムレイアウトでサイトを作ったのですが、
OperaとFirefoxは大丈夫だったのにIEだけ
フッターの背景画像が下まで表示されません
どうしたらいいかわからないです
お願いします

171 :170:2010/05/31(月) 16:48:33 ID:???
ほんとすみません
自己解決しました
原因はアクセス解析の画像でした…

172 :Name_Not_Found:2010/06/02(水) 10:06:19 ID:???
Opera、firefox、IEで動作確認したところ、
Operaとfirefoxは同じ表示で、IE(IE7)だけスペースが広いみたいで
背景画像と文字の位置がずれてしまいます
行間なのかmarginまたはpaddingが悪いのかよくわかりません
よろしくお願いします。

173 :Name_Not_Found:2010/06/02(水) 11:09:09 ID:???
IE7使ってる奴なんてIE6より少ないから気にしなくていいよ

174 :Name_Not_Found:2010/06/02(水) 11:38:52 ID:???
>>172
それだけでわかる奴がいるはずないだろー
CSSを一行ずつ削っていって
どこが悪さしてるか調べてみるといいよ

175 :Name_Not_Found:2010/06/02(水) 12:18:51 ID:???
エスパーしてみるとfloatとmarginがバッティングしてる

176 :Name_Not_Found:2010/06/02(水) 12:36:51 ID:???
floatのmarginが2倍になるバグはIE6までで
7では解消されてるからそこじゃないと思うんだが

177 :Name_Not_Found:2010/06/03(木) 00:08:37 ID:???
CSS Tab Designerでタブメニューをつくり、そのタブを右寄せにしようと思っています
floatやtext-alignを使って色々やってみたのですがどうも上手くいきません
タブメニューの作り方等のサイト様を色々見てみたのですが
左寄せばかりで右寄せのソースが無く、煮詰まってしまいました
どこにどう書いたらいいのかご教示いただけないでしょうか

改行多すぎと言われたので発行されたコードは次レスに書きます

178 :177:2010/06/03(木) 00:09:57 ID:???
/* CSS Tab */
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #E0FFFF;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #99CCFF;
border-color: #227;
}
#navlist li a#current {
background: white;
border-bottom: 1px solid white;
}

179 :Name_Not_Found:2010/06/03(木) 01:47:56 ID:???
>>178
#navlist liにfloat: right;

180 :Name_Not_Found:2010/06/04(金) 00:13:53 ID:???
>>179
ありがとうございます、おかげで上手く出来ました!
#navlistの方ばっかり見て自分で#navlist ul{とか追加ばかりしてました
本当に助かりました

181 :Name_Not_Found:2010/06/08(火) 08:16:16 ID:???
>>2からのM$のサイト
リンク切れしてるよ

182 :Name_Not_Found:2010/06/08(火) 12:17:41 ID:???
そこに限らずリンク切れはしてるが
別にアーカイブスで探せるしURLを乗せておいて悪くはない

183 :Name_Not_Found:2010/06/09(水) 22:47:12 ID:???
IE8でtest1の方だけが透過が適用されません。
FireFoxdato両方透過が適用されます。
IE8でidに対して適用させる方法はあるのでしょうか?

div#test1 {
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
background-color: #000;
}
.test2 {
width:100%;
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
background-color: #000;
}

<div id="test1">test</div>
<div class="test2">test</div>

184 :Name_Not_Found:2010/06/09(水) 22:50:32 ID:???
書き込んでから気がつきました。
widthがあるかないかで変わるみたいでした。

185 :Name_Not_Found:2010/06/09(水) 22:50:45 ID:???
>>183
独自拡張、先行実装はスレチ

186 :Name_Not_Found:2010/06/11(金) 15:35:57 ID:DVQX/8sZ
外出しのスタイルシート (hoge.css) ファイルの書き方についての質問です。

# foo {
 width: "100%";
}

というように、width の値に "" (ダブルコーテーション) でくくっている箇所があるのですが、
これは書式的に間違いですか?

# foo {
 width: 100%;
}

このように、"" で囲まないのが正しいでしょうか?

また、囲っている場合、ブラウザはそれでも 100% を適用しているのか、それとも無視しているのでしょうか?

今の仕事で引き継いだ CSS で、こうなっているところが多いので直すべきかどうか悩んでいます。
IE6 です。

187 :Name_Not_Found:2010/06/11(金) 16:22:57 ID:???
#の後のスペースも"100%"も間違い
IE6ですら機能せんぞ

188 :Name_Not_Found:2010/06/11(金) 23:49:59 ID:???
IE6とか聞くだけでイヤになる

189 :Name_Not_Found:2010/06/12(土) 01:43:07 ID:???
floatに関して質問させて下さい。
<div id="rightBox">でボックスを作って右に配置し、左に<p>でテキストを配置し<p>には最小幅・最大幅をcssで指定しました。
また<div id="rightBox">と<p>は<div id="outer">で囲ってあります。

これをFirefox3.5.9や10.5.3やChrome5.0で見ると<p>のテキストのうち後半部分は
<div id="rightBox">を囲むように回り込んで見えます。
ですが、IE7だと<p>のテキストのうち後半部分は
<div id="rightBox">を囲むように回り込んで見えません。

IE7でもFirefox3.5.9や10.5.3やChrome5.0のように見えるようにするためにはどうすれば良いのでしょうか?

190 :189:2010/06/12(土) 01:44:13 ID:???
ソースです</head>まで
--------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#rightBox>p {
widows:500px;
height:200px;
float:right;
background-color:#CCC;
margin:0;
}
p {
font-size:5em;
min-width:400px;
max-width:1000px;
background-color:#CC6;
}
</style>
<title>Floatのテスト/title>
</head>

191 :190の続き〜最後まで:2010/06/12(土) 01:48:32 ID:???
<body>
<h1>Floatのテスト</h1>
<div id="outer">
<div id="rightBox"><p>右のボックス</p></div>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</body>
</html>

--------
宜しくお願いします。

190の<title>Floatのテスト/title> のところミスコピしてしまいました、すいません。
正しくは<title>Floatのテスト</title>です。

192 :Name_Not_Found:2010/06/12(土) 01:57:10 ID:???
何度もすいません....orz
#rightBox>pのスタイルのとこwidowsじゃなくてwidthでした。

<style type="text/css">
#rightBox>p {
width:500px;
height:200px;
float:right;
background-color:#CCC;
margin:0;
}


193 :Name_Not_Found:2010/06/12(土) 11:27:07 ID:???
さらにやり直せ
いらないプロパティまで入れるな、最小単位まで切り分けしてから情報は出せ
一行ずつ削って悪い部分を調べるくらいはしろ

194 :Name_Not_Found:2010/06/13(日) 00:42:19 ID:???
>>193
失礼しました。再度、掲載させていただきます。こんな感じでいいでしょうか?

やりたいことは、最小・最大の幅で伸び縮むテキストがあって
例えば、そのテキストが比較的長いテキストで、
右にfloatで配置したボックスの縦幅を超えるときなどに
IE7でも右にfloatで配置したボックスに対して回り込むようにしたいのです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

#rightBox>p {float:right;}

p {min-width:300px;
max-width:500px;}

</style>
<title>Floatのテスト</title>
</head>

<body>
<h1>Floatのテスト</h1>

<div id="rightBox"><p>右のボックス</p></div>
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

</body>
</html>


195 :Name_Not_Found:2010/06/13(日) 00:49:09 ID:???
#rightBox>p {float:right;} じゃなくて#rightBox {float:right;}でも変わりありません。あと削るとしたらどういうところなんでしょう.

196 :Name_Not_Found:2010/06/13(日) 01:06:51 ID:???
すんません、質問の質問、横レスさせてください。
>>194 さんのCSSで
#rightBox>p {float:right;}
ってある #rightBox>p の > の意味ってなんですか?
こういう記述方法があるのですか?初めてみました。
ただのスペースからタグの記述ならわかるんですが、IDの後に>で、その後に
タグが来るのは別の意味があるのでしょうか?

197 :194:2010/06/13(日) 01:17:43 ID:???
>>196
「css 子供セクレタ」で検索してみてください。
私は質問させてもらってる身分なので詳しいことは再度、他の方に質問してみてください、すいません。


198 :Name_Not_Found:2010/06/13(日) 01:20:14 ID:???
>>196
ie6以前ではきかないってだけ
スペースと同じで、"〜内の"という意味
と、俺は解釈してる

199 :Name_Not_Found:2010/06/13(日) 01:46:35 ID:???
>>194
これでどう?全ブラウザで確認したわけじゃないけど

<style type="text/css">
#right{
float:right;
width:600px;
background:blue;
}
#left{
display: inline;
min-width:300px;
max-width:500px;
}
#left p{background:red;}
</style>
</head>
<body>
<h1>Floatのテスト</h1>
<div id="right"><p>右</p></div>
<div id="left"><p>あああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
ああああああ</p></div>
</body>
</html>

200 :194:2010/06/13(日) 02:15:25 ID:???
>>199
アドバイスありがとうございます!
すごい、IE7でもやりたかったように表示されます。
回り込むテキストを囲む<div>のプロパティにdisplay: inline; を指定するのですね。
まったく気が付かなかったです。

なんか、上手くいえないんですがIE7のblockって頑丈なんですかね。
Chromeやfirefoxのblockって割と柔らかい、そんな感じです。

こんな時間にありがとうございました。
とても勉強になりました。


201 :194:2010/06/13(日) 02:20:22 ID:???
って、今更ながら気が付いた
>>196
「css 子供セレクタ」です、駄目だ、俺...orz

202 :Name_Not_Found:2010/06/13(日) 02:58:38 ID:???
>>199書いといてなんだけど、
IE7ってシェア率低いからそんな気にしなくてもいいと思うよ

203 :Name_Not_Found:2010/06/13(日) 09:31:06 ID:???
a:link
a:visited
a:hover
a:active

↑で全体で色指定をして、特定の箇所で違う色を指定して表示させることはできますか?

204 :Name_Not_Found:2010/06/13(日) 10:10:19 ID:???
>>202
IE7ってIE6よりも低いよな。
IE7使うくらいならIE6を使い続けるかIE8に移った人が多いのだろう。

205 :Name_Not_Found:2010/06/13(日) 10:44:18 ID:???
>>203
調べてもないだろ。基礎の基礎だよそれ
親要素 aで指定するかaにクラス指定で出来る

206 :Name_Not_Found:2010/06/13(日) 11:18:12 ID:???
>>198
>>201
ありがとうございますm(_ _)m


207 :Name_Not_Found:2010/06/13(日) 12:04:54 ID:???
>>198
かなり違うぞ?

208 :Name_Not_Found:2010/06/17(木) 09:03:35 ID:???
selectタグをsize=nにしたとき、縦幅をIEとFireFoxでCSSで統一したいのですが
heightを設定してもズレがあり、line-heightも無効でした。

IEとFireFoxでselectタグ(size=n)の縦幅の差異を無くすにはどのように実現できますか?

209 :Name_Not_Found:2010/06/17(木) 09:21:01 ID:???
>>208
ハック使えば?
ブラウザ毎の細かい差異は正直あきらめろとしか

210 :Name_Not_Found:2010/06/17(木) 09:58:31 ID:???
>>208
Firefox3.5あたりからselectやinputのフォントサイズが小さくなったけど、フォントサイズはそろえている?
完全にそろえるのは難しいかもしれないけど、margin、padding、border、font-familyあたりもブラウザ
任せにせずに指定すれば、ある程度揃えることはできるんじゃないかな。


211 :Name_Not_Found:2010/06/17(木) 10:48:15 ID:???
>>209-210
フォントサイズその他指定しましたが、どうにも変わりませんでした。

select内部のline-heightがIEとFireFoxで異なるのに変更できず、
IEでは行ごとに合わせて縦幅が確定してしまうのでズレてしまうみたいです。
フォーム部品もある程度統一してほしいなー

どうにもならなさそうなのでハックで対応してみます。
ありがとうございました。

212 :Name_Not_Found:2010/06/17(木) 17:14:37 ID:jE28daYY
すみません、クラスを複数持つタグの指定についておしえてください。
DIV class="class1 class2"
というようなHTMLタグを指定したい場合、CSSで
div.class1.class2 { }
と書くのは正しいのでしょうか?
FireFox3では普通に表示されるんですが、なんだか自信がないので…

213 :Name_Not_Found:2010/06/17(木) 17:19:53 ID:???
おk
ただIEだかにバグがあったはずなんでそこだけ注意

214 :Name_Not_Found:2010/06/17(木) 19:50:55 ID:???
div.class1 div.class2 {
}

オフィシャルで公式な書き方はこうだろ

215 :Name_Not_Found:2010/06/17(木) 19:57:01 ID:???
>>214
お前は基礎から勉強してこい

216 :Name_Not_Found:2010/06/17(木) 19:58:36 ID:???
>>214
読み取る能力どっかで取得してこい

217 :Name_Not_Found:2010/06/17(木) 20:41:29 ID:???
>オフィシャルで公式

力こそパワー!

218 :212:2010/06/17(木) 20:49:56 ID:jE28daYY
>>213
ありがとうございます、たすかりました!

219 :Name_Not_Found:2010/06/17(木) 21:41:46 ID:???
危険が危ない

220 :Name_Not_Found:2010/06/17(木) 21:52:38 ID:???
それは違う気がする

221 :Name_Not_Found:2010/06/17(木) 22:21:46 ID:???
ウィンドウ全体を枠で囲みたいと思い

.waku {
border: red solid 5px;
width: 100%;
height: 100%;
overflow: scroll;
}

てな感じでクラス使ってやってみたんですが
なぜかDOCTYPE宣言を入れると、横幅がウィンドウ幅を超えてしまい
縦幅はその内容の分までになってしまいます。
(宣言入れてないと全体を囲める)
これはなぜですか?思うように全体を囲むには、どうすればいいんでしょうか
IE8での確認

222 :Name_Not_Found:2010/06/17(木) 23:13:32 ID:???
>>221
IE8ではdoctype有だとborderが要素の外に表示され、
無だと要素の内に表示されるんじゃないかな。
IE以外のブラウザでは基本的にborderは要素の外に表示される。

223 :Name_Not_Found:2010/06/17(木) 23:36:44 ID:???
通常               要素全体の大きさ = width/height + margin + padding + border
古いIE(互換モード) 要素全体の大きさ = width/height

224 :Name_Not_Found:2010/06/18(金) 17:09:42 ID:???
これ見てよ↓
http://livedoor.2.blogimg.jp/agomesu/imgs/5/8/58ff257e.jpg
ばらまこうぜ!


225 :Name_Not_Found:2010/06/18(金) 18:20:51 ID:???
>>222-223
ありがとうございます。

ネット徘徊してたら↓のようなページもありました。
http://www.programming-magic.com/20071226033545/

border等を別口で計算するのって感覚的に変な気がするけど。それがHTML的に正しいんですね
するとウィンドウサイズから、常に絶対数値で一定のborder等を取るっていうのは
ちょっと無理みたいですね。100%-5pxとか式で表せたらいいのに
互換モードか、表示領域を絶対数値で固定するしかないのかな

226 :255:2010/06/18(金) 19:31:28 ID:???
自己レスなんですが、ボックスを2重にして
外のボックスでwidthだけ指定、中のボックスでmargin等だけ指定
さらに親要素に幅100%指定という方法で
横幅についてはうまくいったっぽいです。↓を参考にさせていただきました。
http://adp.daa.jp/archives/000265.html

さて今度は縦方向なんですが
まず外のボックスからその親要素まで、すべてheight: 100%とすると
ウィンドウのスクロールバーが出てしまうんですが、これはなぜですか?
99%だとバーは消えます

あと枠の下側については、ウィンドウ一杯まで拡がらず
内容の終わったところまでになってしまいます。下端まで拡げる方法はないでしょうか

227 :Name_Not_Found:2010/06/18(金) 19:41:55 ID:???
>>226
ごめんソース出して

228 :Name_Not_Found:2010/06/18(金) 19:48:46 ID:???
>>226
横幅については、わざわざ100%のボックスで囲まなくても
widthを指定せずにborderだけ指定すればうまくいくんじゃないかな

縦幅100%でスクロールバーが出るのは、上で説明されてる通り、ボックス全体の縦幅 = height + border だから
ネガティブパディングとか使えば上手くいくのかもしれんけど

229 :Name_Not_Found:2010/06/19(土) 20:09:59 ID:???
widthを%指定したレイアウトがIE8のQuirksで崩れます。
IE6用に作成したページなのですが、widthの解釈など変わっているのでしょうか。


230 :Name_Not_Found:2010/06/19(土) 21:19:29 ID:???
>>229
IE6の絡んだcssの初歩中の初歩だからそれくらいぐぐって調べましょう

231 :229:2010/06/19(土) 21:47:13 ID:???
IE6もIE8も後方互換モードでした。同じQuirksでも違うのでしょうか。

232 :Name_Not_Found:2010/06/20(日) 00:24:13 ID:???
>>231
「IE6 IE8 後方互換モード 違い」とでもぐぐれば出てくるよ
IE6だけ特殊

233 :Name_Not_Found:2010/06/20(日) 09:38:17 ID:???
IE6なんか使ってるやつはハブっておkってこと?

234 :Name_Not_Found:2010/06/20(日) 10:03:23 ID:???
>>233
アクセス解析ではまだまだ現役。悩ましい。

235 :Name_Not_Found:2010/06/20(日) 10:30:26 ID:???
IE最新版にアップグレードするよう促せばおk

236 :Name_Not_Found:2010/06/20(日) 11:04:23 ID:???
IE6を使っている人はファイヤーフォックスかクロームあたり
それかIE8とかにアップグレード促すのがいい
そういうキャンペーンを実施していく方向が大切なの

237 :Name_Not_Found:2010/06/20(日) 11:38:46 ID:???
そもそもIEのバージョンなんか分からない人、気にしない人たちだからなあ。

238 :Name_Not_Found:2010/06/20(日) 12:33:57 ID:???
・とりあえずOSにIE6ついてるから
・IE7やIE8にすると動作が不安定になる
・IE8は使いづらい ほかのブラウザなんて以ての外
・IE6以外だとWebサービスやASP(EC系/ゲーム/業務用Webアプリ)が使えない
・会社のPCが未だw2k
・会社・学校の管理部がブラウザをアップデートしてくれない

など理由は様々らしい
Webアプリに関してはIE6でしか開発・検証してない制作者にも問題あるが

239 :Name_Not_Found:2010/06/20(日) 12:53:57 ID:???
Google,Youtube、大手のweb企業がIE6サポートを外したんだから、
IE6云々は気にしなくてもいいと思うけどな。
寧ろ日本人はそういう古い層に対して気を遣いすぎな気がする。

240 :Name_Not_Found:2010/06/20(日) 14:21:03 ID:???
IE9が出ればIE7,8も直に切られるだろ。
IE9からは標準に近くなるらしいし。

241 :Name_Not_Found:2010/06/20(日) 16:16:46 ID:???
XPというものがあってな

242 :Name_Not_Found:2010/06/20(日) 21:54:17 ID:???
XPのデフォブラウザがIE6だからって言いたいの?

めっ!!!

243 :Name_Not_Found:2010/06/20(日) 21:55:50 ID:???
普通はmicrosoftの更新があるからブラウザ更新されるはず
更新も切っちゃうようなアホを視野に入れる必要はない

244 :Name_Not_Found:2010/06/20(日) 22:29:11 ID:???
IE9がXPには対応しないってこと

245 :229:2010/06/21(月) 19:39:26 ID:???
>>232
回答ありがとう御座います。
1日調べてみましたが解決には至りませんでした。
具体的には
width %指定したとき、実際に確保される幅はIE6でApx、IE8ではA-1pxしか確保されない
というものです。
親のwidthはpx指定で幅を決めています。

246 :Name_Not_Found:2010/06/21(月) 22:02:12 ID:???
0.5pxを切り上げるか切り捨てるかの話か?

247 :229:2010/06/21(月) 22:30:48 ID:???
いろいろ試していてfont-sizeが13pxの時のみ挙動が違ったので
フォントのバージョン?も気になるのですが、切捨ても変わっているのでしょうか。


248 :Name_Not_Found:2010/06/21(月) 23:02:26 ID:???
文章だけじゃなくてどんなソースなのかも示さないと、ロクに答えてくれる人いないよ
ていうかIE6用に作成したページならIE8気にする必要ないんじゃ?

249 :Name_Not_Found:2010/06/21(月) 23:32:51 ID:???
>>248
失礼しました。以下のように書いたとき、IE6とIE8(ともに後方互換)で表示が異なります。

<table cellspacing="0" border="1" width="1052px"
<tr align="center" style='font-family:"MS ゴシック";font-size:13px;'>
<td width="3%">あい</td>
<td width="97%">うえお</td>
</tr>
</table>
IE6だと「あい」が1行、IE8だと2行

IE6用でしたがIE8でも必要になりました。

250 :Name_Not_Found:2010/06/22(火) 00:38:14 ID:???
>>249
こっちの環境ではIE6でも「あい」が1行で表示されるよ
IE6はIETesterで表示確認

251 :Name_Not_Found:2010/06/22(火) 00:43:01 ID:???
ゆとりを持たせることはできないのかい?

252 :250:2010/06/22(火) 00:45:31 ID:???
ちなみに
*{margin:0;padding:0;}がないとIE6でもIE8でも2行表示
あると両方1行表示

253 :250:2010/06/22(火) 00:47:30 ID:???
連投すまん
>>252 1行表示と2行表示逆だった・・・orz

254 :250:2010/06/22(火) 00:48:17 ID:???
いや>>252で文章あってたわ、もうだめだ寝る

255 :Name_Not_Found:2010/06/22(火) 00:50:27 ID:???
もやすみ

256 :Name_Not_Found:2010/06/24(木) 10:58:57 ID:???
P要素の最終行だけ下マージンを0にするって
直接クラス指定する以外に良い方法ありませんか?

257 :Name_Not_Found:2010/06/24(木) 13:18:46 ID:???


258 :Name_Not_Found:2010/06/24(木) 14:47:15 ID:???
css2か3でp:lastchildみたいなのなかったっけ


259 :Name_Not_Found:2010/06/24(木) 15:31:11 ID:???
ボックスの横幅を指定せずに、内容に応じたぶんになるようにしつつ
左右を中央に配置したいんですが
どのようにしたらできますか。

260 :Name_Not_Found:2010/06/24(木) 15:34:27 ID:???
margin:autoほか駆使 / table
ぐぐれよ
というか>>2Q2

261 :Name_Not_Found:2010/06/24(木) 17:30:57 ID:???
>>260
ああ、CSSスレでtableをレイアウトのためだけに使用するのが
当たり前のような回答を頂くとは、盲点でした。
ありがとうございます。諦めます

262 :Name_Not_Found:2010/06/24(木) 17:50:39 ID:???
>>260
table厨はこのスレから出てってくれませんか?><

263 :Name_Not_Found:2010/06/24(木) 18:20:49 ID:???
でも>>260の言う通り少しはググるべきだな
ブロック要素 中央でググればいくらでも出るだろ

264 :Name_Not_Found:2010/06/24(木) 19:45:12 ID:???
たしかにいくらでも出てくるな

幅を指定したり、非推奨使ったりする方法なら

265 :Name_Not_Found:2010/06/24(木) 20:14:52 ID:???
>>259
このクラス(ID)を横幅指定せずに中央にしたい、って具体的にソース出してほしいかも。
どういうふうにしたいのか正直よく分かんない。
外ボックスにtext-align: center;、
中央配置したいものにdisplay: inline-block;とかどう?

266 :Name_Not_Found:2010/06/24(木) 21:20:49 ID:???
自演って分かるよね

267 :260:2010/06/24(木) 22:00:37 ID:???
一応言っておくが、
1,margin:autoほか駆使
2,table
な。1推奨だけど、わからないんだったらtable使うのが楽っていうつもりで書いた。
さすがにjsつかうのはスレチ過ぎると思ったので書かなかった。
どうやら>>259は1ができないようなのでこのままでいいんじゃね。

個人的には非推奨でも主要ブラウザでちゃんと表示できるならいいと思うけどな。

268 :Name_Not_Found:2010/06/25(金) 03:33:05 ID:???
>>267
>1,margin:autoほか駆使
ほか駆使ってw
具体案出せないなら回答すんなよ・・・

269 :Name_Not_Found:2010/06/25(金) 04:50:27 ID:???
margin:autoを使う方法は
幅の指定がいるorIE6とかで認識に問題があるらしいがな

270 :Name_Not_Found:2010/06/25(金) 05:40:44 ID:???
幅指定なしって書いてるのにmargin:auto薦めちゃう人って…
答える側になる前にもうちょい勉強した方がいいぞw

271 :Name_Not_Found:2010/06/25(金) 09:24:32 ID:???
横だけど対案も出せず、批判する奴ってカコワルイよね

272 :Name_Not_Found:2010/06/25(金) 10:01:43 ID:???
っ 鏡

273 :Name_Not_Found:2010/06/25(金) 10:03:40 ID:???
スレタイ以外の話は他でやれ

274 :Name_Not_Found:2010/06/25(金) 10:08:32 ID:???
>>265でいいじゃん。

275 :Name_Not_Found:2010/06/26(土) 23:02:06 ID:???
htmlの中の<p class="001">ってクラス付けたのを装飾したくて、
スタイルシートに p.001 { color: #03C; } って記入したんだけど反映されない。
.(ピリオド)の前に付けるpタグを外せば反映されるんだけど原因がわかりません。
だれかアドバイスプリーズ。

276 :Name_Not_Found:2010/06/26(土) 23:03:39 ID:???
>識別名は数字もしくはハイフンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない

277 :Name_Not_Found:2010/06/26(土) 23:15:03 ID:4j0XkMIJ
見落としてたorz
>>276
助かりました。サンクス

278 :Name_Not_Found:2010/06/27(日) 05:12:58 ID:???
FC2ブログを使っています。
最新記事等で

記事名A
記事名B

の間に区切り線を入れたいんですがどうすればいいでしょうか?
自分で作成する記事本文の間に区切り線は入れれますが自動でどんどん追加されていく物に毎回手動で入れるのは…
自分で考えた限りでは

記事名
===

というように更新されるように最新記事等のHTMLを変更すればいいと思うのですがいまいちわかりません。
抽象的な質問ですいませんでした。

279 :Name_Not_Found:2010/06/27(日) 05:13:45 ID:???
イメージとしてはこのような感じです。
http://news020.blog13.fc2.com/

280 :Name_Not_Found:2010/06/27(日) 05:28:20 ID:???
>>278-279
CSS以前にhtml勉強してこい

281 :Name_Not_Found:2010/06/28(月) 11:30:19 ID:???
>>278
記事の外枠に
border:solid 1px #000;
border-top-width:3px;
margin-bottom:20px;
padding:20px 10px;
を追加汁


282 :Name_Not_Found:2010/06/28(月) 14:54:29 ID:8++6Bv7m
@import url("style.css");と
<link href="./style.css" rel="stylesheet" type="text/css">
の違いって無いですよね?

283 :Name_Not_Found:2010/06/28(月) 15:08:04 ID:???
>>282
ttp://screw-axis.com/2009/06/07/css-import%e3%82%92%e4%bd%bf%e3%81%86%e3%81%b9%e3%81%8d%e3%81%a7%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1/
読み込み方が違うみたい

284 :Name_Not_Found:2010/06/28(月) 15:41:44 ID:???
>>282
使う場所が全然違うだろうがw

285 :Name_Not_Found:2010/06/28(月) 16:02:59 ID:???
>>284
多分だけど、1つのCSSから複数を読み込ませるか、
headに<link href〜を複数書くかで迷ってたんじゃない?
違ったらごめんよ

286 :Name_Not_Found:2010/06/29(火) 07:06:55 ID:???
>>284
こういうつまらないことを平気でやってのける
シビれないしあこがれない害虫は、さっさと駆除されるべき

287 :Name_Not_Found:2010/06/29(火) 11:29:03 ID:PvngDh9K
safari3.0.4とSafari4.0.5の外部CSSの見え方の差について教えて下さい。( XHTML 1.0 )

safari3.0.4ではきちんと表示されるのですが、Safari4.0.5ではそもそもCSSを読み込んでいないような表示になってしまいます。
SafariのVerがあがることで何か変更された部分があるのでしょうか。(ブラウザは諸事情でこの2つの環境のみ使用しないといけない状態です。)
以下はCSSの記述になります。よろしくお願いいたします。

@charset "Shift_JIS";

/* ========BASIC======== */
* {margin:0px;padding:0px;font-size:12px;font-family:Verdana, Helvetica, sans-serif;
font-weight:normal;;color:#333;line-height:20px;letter-spacing:1px;}
body {background:#fff;text-align:center;}
br {letter-spacing:normal;}
img {border:0;}
a {color:#68903C;text-decoration:none;}
a:hover {color:#92C45B;}


長文がかきこめないので一部になってしまうのですが・・・。

288 :Name_Not_Found:2010/06/29(火) 11:54:04 ID:???
>>287
そういうのは全部見ないと分からないかな・・・
よくあるのは、CSSのcharsetが実際とは異なってる時
見れないブラウザからソース表示でhtmlとcss両方見れる?

289 :Name_Not_Found:2010/06/29(火) 12:16:10 ID:PvngDh9K
>>288 さん
今見てみたらソースは見ることができました。
テンプレートを再加工している形なのですが、今確かめてみたら元のテンプレートのほうも、表示がSafari4.0.5では駄目でした。

ttp://www.coolwebwindow.com/template/css001.php
こちらのサイトさんのTypeB_001 というものになります。

290 :Name_Not_Found:2010/06/29(火) 13:12:26 ID:???
>>289
確認しようと思ったけど、俺この前Safari5インストールしたんだった
Safari4.0.5は不具合が多いらしいけど、cssが読み込めないっていうのは聞いたことないな
とりあえず俺は力にはなれなさそうだ、ごめんよ

291 :Name_Not_Found:2010/06/29(火) 13:14:19 ID:???
Windows版の5.0では問題なく見られてるな

292 :290:2010/06/29(火) 13:15:34 ID:???
>>289
cssの27行目、セミコロンが1個多いから消しておくといいよ
div#menu li aのcolorの前

293 :レス代行:2010/06/29(火) 13:28:22 ID:???
>>287
明らかにテンプレのレベル低すぎだろ。
「font-weight:normal;;」みたいなクソミスもあるし。
一応、これ↑の;一つ削ったら表示されないか?

Win用のSafari4.0.5では見れたし、文字コードは問題ないみたい。
ダメなら他のテンプレ探した方が早そうだな。

294 :287:2010/06/29(火) 16:16:23 ID:PvngDh9K
>>290-293さん
みなさんご確認ありがとうございました。
上記の対処を試したのですが、残念ながらうちの環境では正しく見ることができませんでした;

自分の勉強がてらもうちょっとがんばって試してみようと思います。
ありがとうございました。



295 :Name_Not_Found:2010/06/29(火) 18:42:55 ID:???
borderとoutlineって
どう区別するものですか?

296 :Name_Not_Found:2010/06/29(火) 19:29:38 ID:???
>>295
outlineはborderより外
borderには上下左右と各々で指定出来るけど、outlineはそれが出来ない

297 :Name_Not_Found:2010/06/30(水) 14:09:33 ID:???
outlineは要素の幅とかに干渉しないし
四角形じゃない要素に指定したら複数描画されたりする

298 :Name_Not_Found:2010/07/01(木) 11:29:12 ID:???
overflow: auto; を指定した親要素の
中の子要素を、親要素よりハミ出して表示させたいんですが
やっぱり不可能ですか?
z-indexでは無理でした

299 :Name_Not_Found:2010/07/01(木) 12:33:35 ID:???
position

300 :Name_Not_Found:2010/07/01(木) 14:37:19 ID:???
>>298
overflow: auto;付けちゃうと無理じゃないかなぁ
overflowを取れば可能だけれども

301 :Name_Not_Found:2010/07/01(木) 15:25:46 ID:???
ですよね
ハミ出しつつも、親要素と一緒にスクロールさせる
なんて都合のいいことはできませんよね

302 :Name_Not_Found:2010/07/01(木) 15:52:23 ID:???
そういうふうに見せかけたいだけなら出来ると思うよ

303 :Name_Not_Found:2010/07/01(木) 18:26:08 ID:???
TABLEで、あるセルだけ枠線を二重線にしたいんだけど
どうしたらいいだろ
わけあって、TDタグのなかにSPANとか書けません

304 :Name_Not_Found:2010/07/01(木) 18:31:09 ID:???
>>303
二重線にしたいセルにクラスを付けて、
cssでそのクラスを二重線になるよう指定するだけ

305 :Name_Not_Found:2010/07/01(木) 18:56:15 ID:???
ここで聞いていいのかわからないんですが、ご教示願います。
最近webfontなるものを見つけて、ブログのタイトルやらを
CSSをいじりwebfontで表示させようとしているのですが、さっぱりわかりません。

そこで、webfontを使用している方のCSSの記述例なんかを教えていただけませんか?

以下環境です
ブログ:blogger
webfont:Fonts.com http://webfonts.fonts.com/ (アカウント作成済み)

俺はこんな感じの記述でやってるよ、みたいな感じの例でも構いません。
よろしくお願いします。

また、webfontならここを使ったほうがいいんじゃね?みたいなのがあれば是非そちらの方も教えてください。

306 :Name_Not_Found:2010/07/01(木) 19:59:16 ID:???
>>304
それやって出来なくて、あれーと思ってたんだけど、できました。

TABLE.unko TD で色とか枠の太さを設定していると
TD.chinko よりも優先されんだな。知らんかったわ。

307 :Name_Not_Found:2010/07/01(木) 20:04:47 ID:???
>>305
@font-faceをjs用いてどのブラウザでも表示させたいんだけど
方法が分からないから教えてってこと?
それともそのwebfont:Fonts.comの使い方を教えてってこと?

308 :Name_Not_Found:2010/07/01(木) 22:04:10 ID:???
>>307
すいません、前者のことです。

309 :Name_Not_Found:2010/07/01(木) 22:39:19 ID:???
>>308
cufonっていうのどう?
ttp://www.netch.jp/articles/2009/06/25/cufon/
こういうフォント関係は日本語(2バイト文字)だと環境によってはめちゃくちゃ重いから、
出来れば英字フォントだけがいいと思うよ
タイトルのみって書いてるからそこんとこ考慮してるとは思うけど一応ね

310 :Name_Not_Found:2010/07/03(土) 12:55:57 ID:JS3mfM2j
下記のSUBMITボタンを左寄せしたいのですが
うまくいきません。

<form
省略・・・
<div class="submit"><input type="submit" value="Submit" />
</div>
</form>

下記のように書いたのですが、左いっぱいまで詰まりません。
幅は反映されるものの高さも文字の大きさも変わらずです。

<style type="text/css">

.submit{
display:block;
width:80px;
height:15px;
text-align:left;
font-size:11px;

</style>




311 :Name_Not_Found:2010/07/03(土) 13:15:09 ID:???
cssじゃなくてhtml勉強してきた方がいいよ

312 :Name_Not_Found:2010/07/03(土) 13:38:01 ID:???
>>310
divにあれこれしたって意味ないよ
.submit input{ }
でボタンそのものを指定しる

他にもツッコミ所は満載だけど、とりあえず後は自分でやってみ

313 :Name_Not_Found:2010/07/03(土) 13:55:57 ID:JS3mfM2j
ありがとうございました。
下記でできました。

.submit input{
display:block;
width:80px;
height:25px;
text-align:center;
font-size:11px;

position: absolute;
left:0px;
}

314 :Name_Not_Found:2010/07/03(土) 16:45:03 ID:???
>>313
display:block; → イラネ
position:absolute; + left:0; → float:left;

315 :Name_Not_Found:2010/07/04(日) 11:11:58 ID:???
>>309
遅くなってしまいすいません
目的はタイトルやサブタイトルをwebfontにしようと考えていて
そのタイトル等は英語なので英字フォントのみ適応させようと思っています。

cufon参照しました。これはこちらでフォントファイルを用意する必要があるようですね。
この場合著作権に触れないフォントであることが前提になる気がするので、
できれば前述したFonts.comから引っ張ってくる方法をとりたいです。

316 :Name_Not_Found:2010/07/04(日) 13:03:57 ID:???
>>315
これで分からないなら諦めた方がいい
ttp://blog.petitboys.com/archives/fontscom-web-fonts.html
あと著作権フリーの英字フォントなんてググればいくらでも見つかるぞ

317 :Name_Not_Found:2010/07/04(日) 17:15:47 ID:???
CSSのソフトってネット繋いでなくても、オフゲ出来ますか?

318 :Name_Not_Found:2010/07/04(日) 17:21:11 ID:???
申し訳ないです。板違いでした

319 :Name_Not_Found:2010/07/04(日) 20:21:37 ID:???
preタグをchromeやsafariで表示すると文字サイズが小さく表示されます。
他の文字サイズと統一させたいのですが、どうするべきでしょうか?



320 :Name_Not_Found:2010/07/05(月) 12:46:38 ID:???
100%指定したら

321 :Name_Not_Found:2010/07/06(火) 00:29:34 ID:???
<input src="http://example.com/gazou.png" class="borderbottom">

.borderbottom:hover {
border-bottom:2px solid black;
}

inputで貼りつけた画像にマウスオーバーした時2ピクセルのボーダーライン(下部にだけ)を表示させたいのですが
実際にマウスオーバーすると下のほうが全て2ピクセル下にズレて表示されてしまいます。(マウス外すと元に戻る)
何か解決法ないでしょうか?

322 :Name_Not_Found:2010/07/06(火) 00:44:48 ID:???
>>321
inputのtypeは書き忘れ?

.borderbottom { border-bottom: 2px solid white; }
.borderbottom:hover { border-color: black; }
or
.borderbottom { margin-bottom: 2px; }
.borderbottom:hover { margin-bottom: 0; border-bottom: 2px solid black; }

元から線をつけておくか、hover時にmargin-bottomを外すかのどっちかでいいと思うよ

323 :Name_Not_Found:2010/07/06(火) 00:46:23 ID:???
>>322
なるほど。頭良いですね。
type等は関係なさそうだったので省略しました。ありがとうございました。

324 :Name_Not_Found:2010/07/07(水) 01:06:54 ID:???
下線(underline)そのものだけ色を別にするってことは、できないんでしょうか?
border-bottomで代用するしかありませんか

325 :Name_Not_Found:2010/07/07(水) 04:46:13 ID:???
>>324
できない

326 :Name_Not_Found:2010/07/07(水) 13:57:43 ID:???
無駄な要素を増やさないと無理やね

327 :Name_Not_Found:2010/07/07(水) 22:20:52 ID:???
>>316
そのページでwebfontを知って各登録であったりはできていたんですが、
手順どおりやってもブログのフォントが反映されなかったためここで質問しました。
フリーのフォントを変換してもbloggerだとアップロード先が無いので
別でサーバ借用となるのも変な気がしたので
できればwebfontっていうのが希望です。
このサイトはフォントの大御所も参加してるってとこも是非とも使いたい理由です。

328 :Name_Not_Found:2010/07/07(水) 22:58:29 ID:???
ヘッダとフッタ以外を全てCSSで擬似インラインフレームにしたいのですが、ヘッダとフッタ部分をピクセル数や行数で指定できないので、margineを使ったやり方が使えません。
他にどのようなやり方がありますか?

329 :Name_Not_Found:2010/07/07(水) 23:43:30 ID:???
もっと人にモノを伝えようという努力をしよう

330 :Name_Not_Found:2010/07/08(木) 02:42:44 ID:???
IE以外のFireFoxやSafariの場合には、正常に表示されるのですが、
<form>タグと<div>タグが連続している場合に、
特別 margin-top といった余白の指定している訳では無いのですが、

<form>
 〜 略 〜
</form>
  ↑
 この form と div の上下間隔がIE8では大きくなるのはなぜでしょうか?
 また、この不具合を解消するにはどうすれば良いのでしょうか?
  ↓
<div>

</div>



331 :Name_Not_Found:2010/07/08(木) 03:38:42 ID:???
>>330
>  この form と div の上下間隔がIE8では大きくなるのはなぜでしょうか?
こっちの環境では大きくならないから何らかのcssが影響してると思う
解消したいなら具体的なソース出してください

332 :Name_Not_Found:2010/07/08(木) 14:48:58 ID:???
クラス名に大文字を使う(大文字と小文字を混在させる)って
定石的に言って問題ありませんか?

IDは大文字で書くのが慣わしでしたっけ?

クラス名にアンダースコア'_'を使うと古いブラウザで認識できないと見ましたが
古いブラウザというのは、具体的になんでしょうか?

333 :Name_Not_Found:2010/07/08(木) 15:00:34 ID:???
HTMLならIDはある意味習わしってよりリンク先のための必須事項だがXHTMLなら関係ない
アンダースコアはIE4で駄目だったと思うがNN4以上IE6以上なら関係ない
クラス名に大文字小文字混在は問題ないが大小間違えるとapplication/xhtml+xmlでは間違い

334 :Name_Not_Found:2010/07/08(木) 19:00:51 ID:???
>>332
> クラス名に大文字を使う(大文字と小文字を混在させる)って
> 定石的に言って問題ありませんか?
はい
> IDは大文字で書くのが慣わしでしたっけ?
いいえ
> クラス名にアンダースコア'_'を使うと古いブラウザで認識できないと見ましたが
> 古いブラウザというのは、具体的になんでしょうか?
IE6以下だから気にする必要は全くない

335 :Name_Not_Found:2010/07/08(木) 20:03:07 ID:???
どっかのサイトでIDは大文字で書いとけって見たような気がする

336 :Name_Not_Found:2010/07/09(金) 00:46:31 ID:???
HTMLならIDは大文字
ていうか>>333が言ってるじゃないか

337 :Name_Not_Found:2010/07/09(金) 01:01:05 ID:???
いい加減ブラウザ、CSSの仕様を統一してくれんかね。
メンドクサイ。

携帯会社の docomo もひどい。

338 :Name_Not_Found:2010/07/09(金) 01:02:06 ID:???
CSSで、リンクでページ内の特定の領域だけを書き換えるって
できませんよね?

339 :Name_Not_Found:2010/07/09(金) 01:39:40 ID:???
ちょっと何言ってるかわかんないっすね

340 :Name_Not_Found:2010/07/09(金) 02:37:34 ID:???
>>337
CSSの仕様とブラウザの実装をごっちゃに語るな

>>338
わからんがa要素にcontnetで文字挿入とかの話か?

341 :Name_Not_Found:2010/07/10(土) 00:48:27 ID:???
スパイウェアを仕込んでるJane Styleは危険です。

Google Adsense違反報告スレ Part10
http://pc12.2ch.net/test/read.cgi/affiliate/1267346244/

JaneStyleがスパイウェアみたいな動作するらしい件
http://namidame.2ch.net/test/read.cgi/poverty/1278496905/

【スパイウェア?】JaneStyleで書き込みしようとしたら、○○に情報が送信されていた件
http://tsushima.2ch.net/test/read.cgi/news/1278681871/


■Google Adsense 違反通報URL
https://www.google.com/adsense/support/bin/request.py?contact=violation_report


※個人情報漏洩による被害者をこれ以上出さない為に、
 このコピペを見つけた方は一人5箇所以上にコピペをお願いします。


342 :名無しさん@そうだ選挙に行こう:2010/07/10(土) 14:46:16 ID:???
CSSでテキストボックスの入力を全角カナにするには
どう指定すればよいのでしょうか?

343 :名無しさん@そうだ選挙に行こう:2010/07/10(土) 15:11:01 ID:???
CSSでやることじゃない

344 :名無しさん@そうだ選挙に行こう:2010/07/10(土) 18:59:08 ID:???
displayプロパティって
何に使うものですか?

345 :名無しさん@そうだ選挙に行こう:2010/07/10(土) 21:31:06 ID:???
>>344
そんくらいググれ
css display

346 :Name_Not_Found:2010/07/12(月) 02:05:15 ID:XQV3VeAa
<div style="positon:relative">
<img src="main.jpg">
<img src="sub.png" syle="position:absolute; top:-3px;left:-3px;">
</div>
メインの画像に対してサブの画像を上と左に-3pxずつずらし絶対位置を指定して表示しています。

この場合に、親のdivタグの透明度を動的に変えると、
親タグの外に表示される部分(sub.pngの上と左側に3px分)がIEだと表示されなくなります。
英語ページで同様の問題は見つけることはできるのですが解決策がわかりません。
解決策等ありましたら教えてください、宜しくお願いします。

347 :Name_Not_Found:2010/07/12(月) 10:53:55 ID:???
静的に変えて問題がないのなら
その動的に変えるスクリプトの問題だろ
スレチ

348 :Name_Not_Found:2010/07/13(火) 12:05:56 ID:???
>>346
物理的に親の外に出てようが親子関係は変わらねーだろ
親にマスクされたような状態になって透明度も継承されてんじゃね?
subだけに再度透明度を設定し直してみれば?

349 :Name_Not_Found:2010/07/17(土) 14:00:00 ID:???
line-heightで行の高さを大きくすると、文字の上下に均等に余白が付く感じなのですが
余白を文字の下側のみにしたいのですが、どうにかならないでしょうか?
一緒にvertical-align: top; を指定しても、変化ありません

一行ごとにmargin-bottomを付けたボックスとしていては面倒だし
折り返しになったときに問題が出ます

350 :Name_Not_Found:2010/07/17(土) 14:13:12 ID:???
上下についてもいいじゃん。
その段落の上の余白を無いように見せれば。

351 :Name_Not_Found:2010/07/17(土) 16:20:44 ID:???
ですよねー

352 :Name_Not_Found:2010/07/18(日) 06:15:24 ID:???
firefox3.6.6を使っています。
すみませんが教えて下さい。
全てのサイトで、全ての文字のサイズを同じに、且つ、文字が上下左右に重ならないcssを。

なお、デスクトップ右クリ→プロパティ→設定→詳細→フォントサイズを192パーセントにしています。
firefoxのオプション→コンテンツ→フォントと配色の詳細設定→最小フォントサイズは24です。

どうぞよろしくお願いします。


353 :Name_Not_Found:2010/07/18(日) 06:19:34 ID:???
firefoxスレで聞け。スレチ

354 :352:2010/07/18(日) 06:30:29 ID:???
スレチではないと思います。
わかる方、どうぞご回答お願いします。

355 :Name_Not_Found:2010/07/18(日) 06:43:15 ID:???
>>354
スレチではない理由を教えてよ

356 :352:2010/07/18(日) 06:55:52 ID:???
cssに関する質問だからです。
この質問がスレチというなら、全ての質問が「そのcssを使うhtmlビューワのスレで聞け」となってしまいます。

357 :Name_Not_Found:2010/07/18(日) 07:22:26 ID:???
>>352
> 全てのサイトで、全ての文字のサイズを同じに、且つ、文字が上下左右に重ならないcssを。
無理だね
優先度:サイト側css>ユーザーcss

358 :352:2010/07/18(日) 07:48:59 ID:???
ありがとうございます。
ie6だと、以下のcssで、私の知る限りの全てのページで同じ文字サイズで表示できましたが、firefoxだと同じ文字サイズにならないページがあります。

a:link, a:visited, a:hover, a:active, body, dd, div, dl, font, h1, h2, h3, h4, h5, h6, hr, img, input, li, ol, p, select, span, table, td, textarea, th, tr, ul {
line-height : 2 !important;
}

完璧でなくてもかまいませんので、上記のcssより確実に、同じ文字サイズにできるcssがありましたどうぞ教えてください。

359 :Name_Not_Found:2010/07/18(日) 08:04:53 ID:???
>>358
> firefoxだと同じ文字サイズにならないページがあります。
サイト側cssでfont関連に!importantされてたら無理
> line-height : 2 !important;
文字サイズではなくこれは行間

!importantしているサイトを除けば、単純に
* {
font-size: 13px !important;
line-height: 1.4 !important;
}
とでも書けばいんじゃね?

360 :Name_Not_Found:2010/07/18(日) 09:27:49 ID:???
>>358
IEでも無理です。残念でした

361 :Name_Not_Found:2010/07/18(日) 12:32:51 ID:???
>>357
最後の行ェ・・・

362 :Name_Not_Found:2010/07/21(水) 01:10:40 ID:Ib1IbRdz
下のような、画像に対してテーブルが回りこむようなレイアウトは可能でしょうか?
・画像にfloat: leftを指定してもテーブルは回り込みまない(その後ろの文字が回りこむ)。
・tableにfloat: rightを指定すると画像とテーブルの間隔が大きくあいてしまう。

画像画像画像画像 |―――――――|
画像画像画像画像 |―――――――|
画像画像画像画像 |―――――――|
画像画像画像画像 |―――――――|
画像画像画像画像 |―――――――|
画像画像画像画像 |―――――――|
画像画像画像画像 |―――――――|

363 :Name_Not_Found:2010/07/21(水) 05:09:18 ID:???
>>362
>・画像にfloat: leftを指定
で普通にできてるけど?

364 :Name_Not_Found:2010/07/21(水) 21:17:05 ID:???
>>362
両方floatをleftでテーブルの左にだけマージン入れたらどうよ?
table { margin-left:20px; }
とか。

365 :Name_Not_Found:2010/07/21(水) 21:21:08 ID:???
>>362
それか、両方を囲むdivで囲って、横幅持たせて
画像はレフト。テーブルはライトでどうよ?
親の幅で隙間の広さが調整出来るんじゃね?

366 :Name_Not_Found:2010/07/23(金) 07:23:40 ID:zLNfJwtH
position:absolute;やposition:fixed;を指定した要素ないの文字が画面の端で折り返してしまいます
どうすればよいでしょうか

こうしたい↓
┏━━━━━━━━━┓
┃         ┃
┃   今日はいい天┃
┃         ┃
┃         ┃

こうなる↓
┏━━━━━━━━━┓
┃         ┃
┃   今日はいい天┃
┃      気です┃
┃         ┃


367 :Name_Not_Found:2010/07/23(金) 07:49:10 ID:CB2G+3Cc
>>366
その要素にwidthもたせて、
overflow:hidden;
かな。


368 :Name_Not_Found:2010/07/23(金) 07:53:17 ID:CB2G+3Cc
http://www.dotup.org/uploda/www.dotup.org1045511.png

みなさん↑こういうデザインつくるときどうコーディングしてる?

<div>
 <img />
 <div>
  <h2>見出し</h2>
  <p>あいうえおあいうえおあいうえお…</p>
</div>

今まで、こうやって、
imgと内部のdivにfloat:left;もたせていたんだけど、
もっと簡単な方法ないかなぁと思いまして。


369 :366:2010/07/23(金) 08:22:44 ID:???
>367
だめでした…

370 :Name_Not_Found:2010/07/23(金) 09:17:40 ID:???
質問です。

サイト全体で、リンクの文字の背景色を指定していて、
ある部分だけ背景色"無し"にしたい場合はどうしたらいいんでしょうか?



371 :Name_Not_Found:2010/07/23(金) 09:18:34 ID:???
すいません、解決しました。
transparentでした。

372 :Name_Not_Found:2010/07/23(金) 10:42:44 ID:???
>>369
white-space: nowrap;

373 :Name_Not_Found:2010/07/23(金) 11:53:12 ID:???
>372
できました!
ありがとうございました

374 :Name_Not_Found:2010/07/24(土) 13:59:25 ID:???
a:hover
{
color:darkblue;
background-color:white;
text-decoration:none;
}

こういうのを設定したんですが、
whiteが反映されません。
なぜでしょうか?

snowやredはちゃんと反映されるんだけど、whiteはダメです。

375 :374:2010/07/24(土) 14:01:10 ID:???
>snowやredはちゃんと反映されるんだけど、

whiteのところをsnowやredに変えたらってことです。

376 :374:2010/07/24(土) 14:36:53 ID:???
Firefoxだとちゃんと白になるなあ。

IE8のバグだったのか。

377 :Name_Not_Found:2010/07/24(土) 16:25:39 ID:???
>>376
IE8でも普通に変わった
他のところ間違えてるだけだろ

378 :Name_Not_Found:2010/07/24(土) 16:47:33 ID:???
>>377
マジ?

他のCSSを削除して
>>374だけにしても白にならなかった
orz

379 :Name_Not_Found:2010/07/24(土) 17:21:35 ID:???
制作者のCSSを反映させない設定にでもしてるんじゃね

380 :374:2010/07/25(日) 09:34:30 ID:???
うーん、どうやってもダメだわ。
snowで行っとくか。

381 :Name_Not_Found:2010/07/25(日) 09:49:45 ID:???
link
visited
hover
active
と順に書いてる?

382 :374:2010/07/25(日) 10:37:18 ID:???
sage1_22148.zip
で、うぷしてみた。

383 :Name_Not_Found:2010/07/25(日) 10:53:50 ID:???


384 :Name_Not_Found:2010/07/25(日) 11:05:15 ID:???
1、UPロダをさがすのが大変。
2、パスが明確でない。候補をいくつか試したが全部NG
答えてもらいたくないらしい。

385 :374:2010/07/25(日) 11:36:13 ID:???
パスは「33568」です。
スマソ

削除キーだと思ってたw

でも、hoverを設定しただけの簡単なHTMLです。

386 :Name_Not_Found:2010/07/25(日) 11:50:56 ID:???
だめだこいつはやくなんとかしないと・・・

387 :Name_Not_Found:2010/07/25(日) 12:03:54 ID:???
IEのバグじゃね。
white → #FFF でも同じ結果。
aにdisplay:block付けると色変化。
しょうがないからbackground-color:#FFE;でいいじゃん。

388 :Name_Not_Found:2010/07/25(日) 12:25:13 ID:???
>>374
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

ていうかなんで今更html4.01使ってるの?xhtml1.0以降にしなよ

389 :374:2010/07/25(日) 13:14:17 ID:???
>>387
やっぱりバグですか。安心しました。

>>374
いや、それはホームページビルダーが勝手に入れるので・・・

「タグ直打ち」→「ホームページビルダーでタグ整形」
でやってます。

390 :Name_Not_Found:2010/07/25(日) 14:17:57 ID:???
えっ・・・  それはまた・・・

391 :Name_Not_Found:2010/07/25(日) 14:18:37 ID:???
機械任せもいいけど、それがどういう意味を示しているのか、
どう解釈が違ってくるのか、なんとなくでいいいから覚えた方がいいよ

392 :Name_Not_Found:2010/07/25(日) 15:24:06 ID:???
うぷろだ見つからないからそいつのソースは知らんけどさ
普通にしてればwhiteだろうが#fffだろうが普通にIE8でも変化するんだから
そいつのソースが間違ってるとしか思えないんだが

393 :374:2010/07/25(日) 15:56:00 ID:???
ttp://sageuploader.vs.land.to/1upload/upload.html?1280021790
です。

394 :Name_Not_Found:2010/07/25(日) 16:30:44 ID:???
だから>>388のようにDOCTYPE変更すれば背景白くなるってば

395 :374:2010/07/25(日) 16:48:33 ID:???
>>394
白になりました。
THANKS!!

396 :374:2010/07/25(日) 18:12:10 ID:???
でも、結局はIEのバグなんだよね?

397 :Name_Not_Found:2010/07/25(日) 18:17:26 ID:???
はぁ?お前の設定ミスだろ。
IEの動きがあやしいのは事実だが、自分のミスなのをバグバグ言う奴はイラッとくるわ。

398 :Name_Not_Found:2010/07/25(日) 18:28:33 ID:???
>397
そこは堪えて!!

399 :Name_Not_Found:2010/07/25(日) 18:33:34 ID:???
>>396
DOCTYPEスイッチ でググるといいよ
元々書いてあったDOCTYPEでは後方互換モードになって、
>>388で書いたDOCTYPEでは標準準拠モードになる
>>397も言ってるけど、自分が納得いかない=バグっていうのはやめようぜ

400 :Name_Not_Found:2010/07/25(日) 18:45:59 ID:???
>399
その言い方だとめっちゃ傷つくかもしれないだろ
本人がどういう意図や意味でバグと言ったのか分からないし
もうちょっとできるだけ当たり障りのないようにレスして欲しいな
そうすれば神スレになるしそのうち神板になる

2chを変えて行こうよ


401 :Name_Not_Found:2010/07/25(日) 19:04:21 ID:???
>>400
ググっても出てこないんだけどこれコピペじゃないの?

402 :Name_Not_Found:2010/07/25(日) 20:40:28 ID:???
fc2で配布されているテンプレートの内、
ttp://www1.axfc.net/uploader/Sc/so/137469.txt(パス:PASS)を、
使っているのですが…

記事を投稿する時、
文字の大きさを変えようとしても、
何故か反映されません。

どこが原因なのか、まるでわからないので、
どなたか、ご教授願います。。。

403 :402:2010/07/25(日) 20:41:57 ID:???
ごめんなさい、パスは小文字です…。

404 :Name_Not_Found:2010/07/25(日) 21:18:58 ID:???
html側は見てないけど、そのカスタマイズ部分の下に.entry_body font-sizeがたくさんあったから、上書きされてるのかもって思った。
font-size: 11px !important;に変えてみてもダメ?

あと、パスをURLに入れれるよ。
http://www1.axfc.net/uploader/Sc/so/137469.txt&key=pass

405 :Name_Not_Found:2010/07/25(日) 21:24:33 ID:???
>>399
後方互換でも普通は変わる
やっぱりそいつのソースが何かおかしいんだろう
もう見る気も失せたが

>>402
それだけじゃわからない
HTML/CSSの最小単位出して

406 :Name_Not_Found:2010/07/25(日) 21:39:58 ID:???
>>405
>もう見る気も失せたが

1分で見れるのに何を恐がってるんだかw

407 :Name_Not_Found:2010/07/25(日) 21:47:35 ID:???
/* 基本
------------------------------------------------- */
body {
background: #fff;
color: #1b1310;
font-family: 'ヒラギノ角ゴ Pro W3',**** sans-serif;
font-size: 12px;
line-height: 1;
text-align: center;
}

12pxだな。

408 :Name_Not_Found:2010/07/25(日) 22:26:36 ID:???
怖が・・・る・・・?

409 :Name_Not_Found:2010/07/25(日) 22:41:29 ID:???
>>406は違法DLで痛い目に遭ったことがあるんだろw
そっとしておいてやれ

410 :Name_Not_Found:2010/07/26(月) 06:36:11 ID:???
>>405
>後方互換でも普通は変わる

今回の場合はどうやっても無理みたいw

>やっぱりそいつのソースが何かおかしいんだろう

ソースには問題ない。

411 :Name_Not_Found:2010/07/26(月) 08:29:37 ID:???
自分で*今回の場合は*と言ってるんだかソースの問題だべ

412 :Name_Not_Found:2010/07/26(月) 09:38:48 ID:???
いや、ソースには問題ないと思うよ。
374じゃないけど。
他のブラウザでは問題なく動くし、明らかにおかしいと思う点もない。
「a:hover使うときに:activeとか他のも必ず明記しなければならない」とか
「<META http-equiv="Content-Style-Type" content="text/css">とは別に<meta>が必要」とか
「html部分を大文字でcss部分は小文字で書くのはNG」とかだったら俺の知識不足だ。

413 :Name_Not_Found:2010/07/26(月) 09:46:46 ID:???
他のIEシリーズで同様に動かないなら「仕様」
旧シリーズの方では正しく動くなら「バグ」

414 :Name_Not_Found:2010/07/26(月) 09:56:37 ID:???

 な ん な ん だ  こ の 低 ラ ベ ル は !

415 :Name_Not_Found:2010/07/26(月) 10:10:00 ID:r9WwU6Ia
                                                  
                         /)
                        ( i )))        
                 / ̄\  / /
                 |  ^o^ | ノ / < いみがわかりませんなぁ
                 \   /  ,/
                 / _   /´.
                (___)/
               / l`、  ノ  ノ
           ,...-‐''"  _.l::::`ー,=-'(
         /     ´ ,.!_;;;:r''..   ` 、
      ,...-‐'   _,....-‐'"  `'-、::    ` 、
     /..  ,....―'"        `ー、__  `l
    /_;::::-'"            /::::::::::::::::ノ
 ,.../._r'"               ヽ`''「 ̄ ̄
(__ノ'                 \_\

416 :Name_Not_Found:2010/07/26(月) 12:36:53 ID:???
>>412
hoverオンリーの後方互換でも普通に動くが
どんな酷いソースだったんだよwww

417 :Name_Not_Found:2010/07/26(月) 13:47:43 ID:???
もう解決してる案件なんだから無駄にスレ消費するなよおまえら
特にAA

418 :Name_Not_Found:2010/07/26(月) 15:23:34 ID:???
2ちゃんねるまとめサイトみたいにRSSをヘッドラインに設置するのはどうやってやるんですか^^

419 :Name_Not_Found:2010/07/26(月) 16:05:36 ID:???
スレチ

420 :Name_Not_Found:2010/07/26(月) 18:11:22 ID:???
>>416
そのHTMLのタグを晒してみてくれ

421 :Name_Not_Found:2010/07/26(月) 18:53:57 ID:???
精神異常者A「>>393のファイルは見ない。けど、ソースがおかしいんだろ。」

健常者「ソ−スを見たけど、変なところは無かったよ。」

精神異常者A「おかしくないわけがないだろ!!」&逆ギレ

何これ・・・・

422 :Name_Not_Found:2010/07/26(月) 19:18:19 ID:???
自己紹介しなくていいよ

423 :Name_Not_Found:2010/07/26(月) 19:31:53 ID:???
お前だろw

424 :Name_Not_Found:2010/07/26(月) 19:32:30 ID:???
うわー

425 :Name_Not_Found:2010/07/26(月) 19:37:14 ID:???
>>420-424
>>417

426 :Name_Not_Found:2010/07/26(月) 19:38:43 ID:???
いや、解決してない

427 :Name_Not_Found:2010/07/26(月) 19:40:24 ID:???

精神異常者

428 :Name_Not_Found:2010/07/26(月) 19:41:23 ID:???

精神異常者B

429 :Name_Not_Found:2010/07/26(月) 19:59:20 ID:???

精神異常者C

430 :Name_Not_Found:2010/07/26(月) 20:04:12 ID:???

精神異常者D

431 :Name_Not_Found:2010/07/26(月) 20:07:57 ID:???
いいかげんにしろ・・・

432 :Name_Not_Found:2010/07/26(月) 20:26:05 ID:???
お前がなw

433 :Name_Not_Found:2010/07/26(月) 20:48:49 ID:???
>>413
IE6ではたしか普通に動いてたからバグだな。

434 :Name_Not_Found:2010/07/26(月) 21:16:42 ID:???
もういい

435 :Name_Not_Found:2010/07/26(月) 21:34:42 ID:???
取り敢えず暴れてる奴、せめて文体くらい変えろよ恥ずかしい

436 :Name_Not_Found:2010/07/26(月) 21:36:02 ID:???
???

437 :Name_Not_Found:2010/07/26(月) 21:44:17 ID:???
>>435は、

432と433の語尾が「な」だから同一人物って言ってんの?
痛すぎる・・・

438 :Name_Not_Found:2010/07/26(月) 21:47:32 ID:???
お前は何を言っているんだ

439 :Name_Not_Found:2010/07/26(月) 21:54:56 ID:???
>>437
駄目だこいつ

440 :Name_Not_Found:2010/07/26(月) 22:18:57 ID:???
ここまで俺の自演

441 :Name_Not_Found:2010/07/26(月) 23:37:17 ID:???
>>440
おれはお前か?それともお前がおれか?

442 :Name_Not_Found:2010/07/27(火) 00:36:39 ID:???
>>441
俺がお前だけど>>440もお前だ

443 :Name_Not_Found:2010/07/27(火) 05:40:51 ID:???
>>427-430
!?
精神異常者たちが・・・

444 :Name_Not_Found:2010/07/27(火) 16:20:36 ID:???
なんだこのうぜー流れ

445 :Name_Not_Found:2010/07/27(火) 17:32:09 ID:???
                                                  
                         /)
                        ( i )))        
                 / ̄\  / /
                 |  ^o^ | ノ / < いみがわかりませんなぁ
                 \   /  ,/
                 / _   /´.
                (___)/
               / l`、  ノ  ノ
           ,...-‐''"  _.l::::`ー,=-'(
         /     ´ ,.!_;;;:r''..   ` 、
      ,...-‐'   _,....-‐'"  `'-、::    ` 、
     /..  ,....―'"        `ー、__  `l
    /_;::::-'"            /::::::::::::::::ノ
 ,.../._r'"               ヽ`''「 ̄ ̄
(__ノ'                 \_\

446 :Name_Not_Found:2010/07/27(火) 19:57:45 ID:???
--------------スレ終了--------------

447 :Name_Not_Found:2010/07/27(火) 21:01:42 ID:???
                           __,,:::========:::,,__
                        ...‐''゙ .  ` ´ ´、 ゝ   ''‐...
                      ..‐´      ゙          `‐..
                    /                   \
        .................;;;;;;;;;;;;;;;;;;;;;;::´                      ヽ.:;;;;;;;;;;;;;;;;;;;;;;.................
   .......;;;;;;;;;;゙゙゙゙゙゙゙゙゙゙゙゙゙      .'                            ヽ      ゙゙゙゙゙゙゙゙゙゙゙゙゙;;;;;;;;;;......
  ;;;;;;゙゙゙゙゙            /                           ゙:               ゙゙゙゙゙;;;;;;
  ゙゙゙゙゙;;;;;;;;............        ;゙                             ゙;       .............;;;;;;;;゙゙゙゙゙
      ゙゙゙゙゙゙゙゙゙;;;;;;;;;;;;;;;;;.......;.............................              ................................;.......;;;;;;;;;;;;;;;;;゙゙゙゙゙゙゙゙゙
                ゙゙゙゙i;゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙゙;l゙゙゙゙゙
              ノi|lli; i . .;, 、    .,,            ` ; 、  .; ´ ;,il||iγ
                 /゙||lii|li||,;,.il|i;, ; . ., ,li   ' ;   .` .;    il,.;;.:||i .i| :;il|l||;(゙
                `;;i|l|li||lll|||il;i:ii,..,.i||l´i,,.;,.. .il `,  ,i|;.,l;;:`ii||iil||il||il||l||i|lii゙ゝ
                 ゙゙´`´゙-;il||||il|||li||i||iiii;ilii;lili;||i;;;,,|i;,:,i|liil||ill|||ilill|||ii||lli゙/`゙
                    ´゙`゙⌒ゞ;iill|||lli|llii:;゙i|||||l||ilil||i|llii;|;_゙ι´゚゙´

448 :Name_Not_Found:2010/07/27(火) 22:32:58 ID:wrnyHRV/
はてなダイアリーで http://d.hatena.ne.jp/hatenadiary/ と同じテーマを使っているんですが、
IEで表示した時だけカラムの幅が広がってしまいます。(上のブログでもそうなっていると思います)
CSSで最大幅を指定してIEでも他のブラウザと同じように表示させるにはどうすればいいでしょうか?

また、Safariでブログ名などの一部フォントが異なって表示されるのですが、
そちらも指定する方法があれば教えてください。

449 :Name_Not_Found:2010/07/27(火) 22:38:07 ID:???
>>448
> IEで表示した時だけカラムの幅が広がってしまいます。(上のブログでもそうなっていると思います)
俺の環境だとなってない
> また、Safariでブログ名などの一部フォントが異なって表示されるのですが、
フォントサイズ変えればいいだけの話じゃ?

450 :Name_Not_Found:2010/07/27(火) 22:42:47 ID:???
IE8でみたが普通に広がってるね。
フォントの方はMacに存在するフォントもしていすればよくね。

451 :Name_Not_Found:2010/07/27(火) 23:01:08 ID:???
IEはmax-width 910pxが機能してないっぽい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">がいけない。
別のに(オミトロンで見る側から)変えたらIEも910だったよ。ページ作成者側で変えられるかは知らん。


452 :Name_Not_Found:2010/07/28(水) 05:12:56 ID:???
max-widthとかはブラウザ独自拡張

453 :Name_Not_Found:2010/07/28(水) 06:09:22 ID:???
>>452
ちげーよ
知ったかは10年ROMってろ

454 :Name_Not_Found:2010/07/28(水) 07:14:59 ID:???
max-width−スタイルシートリファレンス
http://www.htmq.com/style/max-width.shtml

IEは非対応

455 :Name_Not_Found:2010/07/28(水) 07:29:56 ID:???
>>454
IE6以下は非対応

ここは初心者が回答するスレだっけ?

456 :Name_Not_Found:2010/07/28(水) 10:02:25 ID:???
初心者が知ったかぶりで回答するスレ

457 :Name_Not_Found:2010/07/28(水) 16:35:05 ID:???
>>455-456
<div style="float: left;">ボックス1</div>
<div style="float: left;">ボックス2</div>
<div style="float: left;">ボックス3</div>
・・・
という感じで、ボックスを横並びに次々と配置したいのですが
ウィンドウ幅を超えた時点で、ボックスごと下に折り返してしまいます。
折り返さないようにしてください。

458 :Name_Not_Found:2010/07/28(水) 17:54:29 ID:???
>>455=自称玄人

459 :Name_Not_Found:2010/07/28(水) 18:04:57 ID:???
>>457
それらを覆うボックスに好きなだけ横幅を取る

460 :Name_Not_Found:2010/07/28(水) 19:07:50 ID:???
>>459
あー申し訳ないけど、それはできないです。
ボックス1、2、・・・は、内容に応じて幅が可変する
(ブラウザ側の文字サイズ変更にも対応)ようにしておき
またスクロール量も、あくまで内容に応じたぶんまでに留めたいので
それはしませんでした。

461 :Name_Not_Found:2010/07/28(水) 20:39:41 ID:???
幅をmax-widthの%指定すりゃいいんじゃね

462 :Name_Not_Found:2010/07/28(水) 22:47:18 ID:???
>>460
だったらテーブル
まあそんなサイト行かんが

463 :Name_Not_Found:2010/07/28(水) 22:51:51 ID:???
テーブル……

464 :Name_Not_Found:2010/07/28(水) 23:19:24 ID:???
いやだけどね

465 :Name_Not_Found:2010/07/29(木) 05:14:31 ID:???
出たっ、ティボゥ!

466 :Name_Not_Found:2010/07/29(木) 16:08:19 ID:???
line-heightに100%を指定すると
IE8、標準フォントで余白がない場合
「ウ」の上端1ドットなどがウィンドウからはみ出してしまいますが
どういうことですか?

467 :Name_Not_Found:2010/07/29(木) 21:20:05 ID:???
そういうことです

468 :Name_Not_Found:2010/07/29(木) 21:24:15 ID:???
インターネットマガジンで連載してた、HTML&スタイルシートクイックリファレンス
みたいなHPない?

469 :Name_Not_Found:2010/07/29(木) 21:27:41 ID:???
ここはCSSの質問スレッドです

470 :Name_Not_Found:2010/07/30(金) 03:34:53 ID:???
スタイルシートで数値のテキスト(divとかで囲って任意のidやらclassやらが振ってあるとして)の
整数部分のフォントスタイルを変えることってできますか?

471 :Name_Not_Found:2010/07/30(金) 04:50:29 ID:???
やればできる

472 :Name_Not_Found:2010/07/30(金) 09:23:47 ID:???
整数部分って何だ
半角英数だけのフォントを先に指定して、優先順位下げて日本語フォント指定とかの話か?

473 :Name_Not_Found:2010/07/31(土) 03:01:39 ID:???
スタイルシートの解説サイトって、
デザインがイマイチなものばかりで見る気が失せるな。

474 :Name_Not_Found:2010/07/31(土) 08:14:07 ID:???
フォントのbaselineの上と下の幅は、何対何ですか

475 :Name_Not_Found:2010/07/31(土) 08:52:22 ID:???
フォントの種類とbaselineの設定とブラウザによって違う

476 :Name_Not_Found:2010/07/31(土) 13:18:04 ID:???
HTML 4.01 Strictで
<table>
<caption></caption>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
のような表を作ってCSSを
table { height: 200px; }
tr { height: 33%; }
のようにしてtableとtrにのみ高さを指定してIE8に表示させた場合、
trの高さがtableの高さに満たない状態でもcaption部分の高さで
残りの高さのつじつまを合わせるような描画はされないですよね?

477 :Name_Not_Found:2010/07/31(土) 14:03:42 ID:???
captionの扱いについては規定がない

478 :Name_Not_Found:2010/07/31(土) 14:39:56 ID:???
CSS3っていつになったら普及するんですか?

479 :Name_Not_Found:2010/07/31(土) 15:03:59 ID:???
普及以前に規格が完成していません

480 :Name_Not_Found:2010/07/31(土) 15:59:30 ID:???
>>477
ありがとうございます。
widthとかheightとかの方を重視するならcaptionではなくcolspanを指定したtdを1つ入れた
trを使った方が良いという感じになるのかな?

481 :Name_Not_Found:2010/07/31(土) 19:03:28 ID:???
>>476
何をやりたいんだか全然わからん
trが200px÷3=66px以下しか内容物がない場合
空白でtrの高さが取られるだけでその高さにcaptionは関係ない
お前がそういう指定をしているだけだ

482 :Name_Not_Found:2010/08/02(月) 00:02:19 ID:???
>>477
IE8はtableに指定したheightの中にcaptionのheightは含まれないっぽいです。
Gecko 1.9.1.11はtableに指定したheightの中にcaptionのheightも含まれるっぽいです。

483 :Name_Not_Found:2010/08/02(月) 09:48:40 ID:???
だから規定がないって言ってるんだろ?
で?

484 :Name_Not_Found:2010/08/02(月) 10:57:20 ID:???
>>476
なにをやりたいのかよく分からないから、まず>>481に答えてあげてよ。

trが2段で「残りの高さのつじつまを合わせ」(ここがよく分からんのだが)
ってことは
 captionの高さが 68px(200pxの34%)
 trの高さが 66px(200pxの33%)が2段
っていうのを望んでいるの?
>>480で「widthとかheightとかの方を重視」って言っているのは
高さとかが溢れる可能性があるの?溢れた場合はどのような動作を
望んでいるわけ?

>>477が散々既定がないって言っているのは、ブラウザ毎に動作が違うって
いうこと。
統一動作させたいならcaptionは使わずdivなりhタグなり使う。

485 :Name_Not_Found:2010/08/02(月) 11:31:33 ID:???
>統一動作させたいならcaptionは使わずdivなりhタグなり使う
外見のために意味を変えるのはここでは薦めんなよ

486 :Name_Not_Found:2010/08/02(月) 23:35:32 ID:???
cssって見た目用でしょ。
作った人がブラウザで見た目が違ってもよくてcaptionがいいってならそれでいいじゃん。

487 :Name_Not_Found:2010/08/03(火) 00:20:38 ID:???
>>486
お前全然流れ読めてないだろ・・・

488 :Name_Not_Found:2010/08/03(火) 19:27:49 ID:???
1px=1ドット
ではないんですか?

489 :Name_Not_Found:2010/08/03(火) 20:10:44 ID:???
なにが?

490 :Name_Not_Found:2010/08/03(火) 20:51:40 ID:???
>>488
まぁそれでいいよ
でもスレチ

491 :Name_Not_Found:2010/08/03(火) 21:03:55 ID:???
CSSでも単位はあるだろ
何でスレチになるんだよカス

492 :Name_Not_Found:2010/08/03(火) 21:19:34 ID:???
スレチ

493 :Name_Not_Found:2010/08/04(水) 14:54:45 ID:ML22nXE4
ie6でのoverflow:hiddenのエラーについて教えてください。

<body>
<div style="width:100px;height:0px;padding-top:30px;overflow:hidden;background:url(/img/logo.gif) no-repeat;">
この文章は表示されません
</div>
</body>

よくあるテクニックだと思うんですが
縦30px × 横100 の画像を同サイズのブロック要素の背景として表示し、
ブロック外に押し出された文章を非表示にしたいと思っています。
上記のコードで ie6で「この文章は表示されません」が表示されます(firefoxなら問題ない)。
なぜでしょうか? 以前同様にして問題なかったのに、今回エラーになり困っています。
ieエラー集で見てもエラーを呼ぶ条件には引っかかっていないと思ったんですが…
※他のcssファイルは一切読み込んでいません。

firefoxは3.5.11 ieは6.0 OSはwinXP-sp3です。
アドバイスよろしくお願いします。

494 :Name_Not_Found:2010/08/04(水) 15:11:27 ID:???
なんでってdivの中身なんだから表示されるのは当たり前なんじゃ?

495 :Name_Not_Found:2010/08/04(水) 15:15:51 ID:???
あれか、互換モードか標準モードかの話か
IE6がアレだから

496 :Name_Not_Found:2010/08/04(水) 15:49:11 ID:???
>>493
それはIE6の有名なバグ
高さがフォントサイズ分取られてしまう
だからfont-size:0pxを追加で大丈夫だと思うが手元にないから確かめられんのですまん

497 :Name_Not_Found:2010/08/04(水) 19:58:36 ID:ML22nXE4
>>495
もう神様って感じですわ。ホント助かりました!

他の人もありがとう

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

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

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