CSS初心者スレッド＝3rd＝

このエントリーをはてなブックマークに追加
1 ：Name_Not_Found：
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

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

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

《前スレ》
CSS初心者スレッド＝2nd＝
http://pc11.2ch.net/test/read.cgi/hp/1207202319/
2 ：Name_Not_Found：2008/05/31(土) 12:57:36 ID:vOJ5MKRX
【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：2008/05/31(土) 12:58:18 ID:vOJ5MKRX
【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　ttp://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
　ttp://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でも崩れない段組みの実例）
　ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
　http://css.maxdesign.com.au/index.htm
4 ：Name_Not_Found：2008/05/31(土) 12:58:56 ID:vOJ5MKRX
【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：2008/05/31(土) 12:59:38 ID:vOJ5MKRX
【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：2008/05/31(土) 13:00:19 ID:vOJ5MKRX
【参考】
　IEの position:absolute; のバグを利用した擬似フレーム

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

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

１．標準モードにする
２．body {height:100%; overflow:auto;}
３．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：2008/05/31(土) 13:41:06 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：2008/05/31(土) 13:56:58 ID:???
しかし今時IE6をデフォルトで使用してる層なんてのは、
自動アップデートをONにしてるような連中だから、
大半はXPsp3にもアップデートしつつあるんじゃないか？
となるとIE6組はIE7に移行しつつある流れと読んでいいか？
9 ：Name_Not_Found：2008/05/31(土) 15:44:25 ID:???
>>8
しかし、SPとかIEの自動更新って、インストール確認があるんじゃないか？
10 ：Name_Not_Found：2008/05/31(土) 16:02:42 ID:???
IE7は許す。たから6は早く死んでくれ！
11 ：Name_Not_Found：2008/05/31(土) 16:11:39 ID:TR9K27KZ
cssを使った表組みをしたいのですが
下記のような1ピクセルの線で横2、縦5程度の
表はどのようなソースになりますでしょうか？

参考ページ
ttp://www.photocreate.co.jp/company/outline.html
12 ：Name_Not_Found：2008/05/31(土) 17:21:22 ID:???
>>11
「表」なら素直にtable使ってそれにCSS適用させればいいんじゃないの
table {
border-collapse: collapse
}
th {
border: 1px solid #ccc;
background: #eee;
}
td {
border: 1px solid #ccc;
background: #fff;
}
13 ：Name_Not_Found：2008/05/31(土) 17:27:03 ID:???
>>11
border-collapse: collapseがポイント
14 ：Name_Not_Found：2008/05/31(土) 17:37:50 ID:???
マジレス。
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
15 ：Name_Not_Found：2008/05/31(土) 17:50:38 ID:???
>>8
Win2k組も多いよん
16 ：11：2008/05/31(土) 17:57:12 ID:TR9K27KZ
>>12

ありがとうございます
<style type="text/css">
table {
border-collapse: collapse
}
th {
border: 1px solid #ccc;
background: #eee;
}
td {
border: 1px solid #ccc;
background: #fff;
}
</style>

って事ですよね？
これだとそのファイルすべてに反映されてしまい
見せたくないtableまで1ピクセルで表示されてしまいます

ほんと初心者ですんません
17 ：Name_Not_Found：2008/05/31(土) 18:23:40 ID:???
>>16
クラスセレクタ使えばよいのでは。
<table class="hoge">

table.hoge {}
table.hoge th {}
table.hoge td {}
18 ：11：2008/05/31(土) 18:42:30 ID:TR9K27KZ
>>17
サンクスです
下記のとおり書いたのですが
先ほどまではセル幅が0（重なっていた？＞border-collapse: collapseがポイント ）
だったのですが今度はセル幅があいてしまいました・・・

<style type="text/css">

<table class="hoge">

table.hoge {
border-collapse: collapse
}
table.hoge th {
border: 1px solid #ccc;
background: #eee;
}
table.hoge td {
border: 1px solid #ccc;
background: #fff;
}
</style>

19 ：Name_Not_Found：2008/05/31(土) 19:13:29 ID:???
>>18
<table class="hoge">をstyle要素の中に書くんではなくて、スタイルを
変えたいtable要素のタグに class="hoge" と書く。
20 ：Name_Not_Found：2008/05/31(土) 19:15:30 ID:???
それから http://www.kanzaki.com/docs/html/htminfo17.html を読むといいよ。
21 ：11：2008/05/31(土) 19:27:43 ID:TR9K27KZ
すんません
タグを書いていただけるとフムフムとわかりやすいのですが・・・


>>それから http://www.kanzaki.com/docs/html/htminfo17.html を読むといいよ。

よんでみます


22 ：Name_Not_Found：2008/05/31(土) 19:50:00 ID:???
スタイルシートは、これで
<style type="text/css">
table.hoge {
border-collapse: collapse
}
table.hoge th {
border: 1px solid #ccc;
background: #eee;
}
table.hoge td {
border: 1px solid #ccc;
background: #fff;
}
</style>

HTMLで、変えたいテーブルの部分を
<table>　→　<table class="hoge">
にする

こういうのは応急処置的なやり方なので
いろいろ変えたいなら、基礎から勉強してください
23 ：Name_Not_Found：2008/05/31(土) 20:22:36 ID:???
>>17
できるよ。
以上。
はい、次。
24 ：935：2008/06/01(日) 00:07:33 ID:???
*{margin:0; padding:0;}
body {background-color:#ff0000;
font-size : 100%;
color : #000000;
line-height : 100%;}
#my_body{margin:0 auto;
width:690px;
border:0px;}
#main {background-color:#ffffff;
width:552px;
border-right-style : solid;
border-right-width : 2px;
border-right-color : #000000;
text-align:left;
float:left;
padding:3em;}
#menu {width:135px; float:left;}
img {margin:0px;
border:0px;
padding:0px;
vertical-align:bottom}
ul#menu li{list-style:none;
float:left;
width:135px;}
ul#menu a{display:block;
width:135px;
height:40px;}
a.m1{background-image:url(1.png);}
a.m2{background-image:url(2.png);}
a.m3{background-image:url(3.png);}
a.m4{background-image:url(4.png);}
25 ：935：2008/06/01(日) 00:09:29 ID:???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<TITLE>タイトル</TITLE>
<link REL="stylesheet" href="style.css" TYPE="TEXT/CSS">
</head>
<body>
<div align="center">
<div id="my_body">
<img src="タイトル画像.png">
<div id="menu">
<ul id="menu">
メニュー画像
</ul>
</div>
<div id="main">
内容
</div>
</div>
</body>
</html>
CSSを書き直し、チェックでは何の問題も無かったのですが
相変わらずheightを受け付けてくれません
CSSではなく、htmlがおかしいのでしょうか？
26 ：Name_Not_Found：2008/06/01(日) 00:22:11 ID:???
>>25
なんのheightよ？どこにも指定してないだろ。
何度も言われてる事だが、floatやpositionした要素には高さが無いんだよ。
それを踏まえて、質問を具体的に書け。
27 ：Name_Not_Found：2008/06/01(日) 00:43:14 ID:???
>>25
> CSSではなく、htmlがおかしいのでしょうか？

その通り
28 ：Name_Not_Found：2008/06/01(日) 02:03:39 ID:???
エスパーレスするとFirefoxとIEでの表示の違いをまず書いてくれ。
隙間が出来るっていうのも解釈が違うからだし。
29 ：11：2008/06/01(日) 09:59:16 ID:???
>>22

39
できました

30 ：30：2008/06/01(日) 15:52:48 ID:???
#header内の要素（h1）に対してmargin-topを指定したときFireFoxだと#headerのボックスごと下にずれてしまいます。
IE6、7では#headerはずれずに、#header内でずれてくれます。
FirefoxでもIEのように#header内でずれるようにしたいのですが、原因が分かりません。
どこに問題がるのか教えていただけないでしょうか。

以下、HTMLとCSSです。

/*HTML*/
<body>
<div id="wrapper">
<div id="header">
<h1>サンプルサイト</h1>
</div>
<div id="menu">
</div>
<div id="content"></div>
<div id="footer">
</div>
</div>
</body>
31 ：30：2008/06/01(日) 15:53:08 ID:???
/*CSS*/
body {
font-family: "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif;
text-align: center;
}
#wrapper {
width: 800px;
text-align: left;
margin-right: auto;
margin-left: auto;
}
#header {
height: 100px;
margin: 0px;
}
#menu {
height: 30px;
}
#content {
height: 100px;
}
#footer {
height: 80px;
}

#header h1 {
margin-top: 10px;
}
32 ：Name_Not_Found：2008/06/01(日) 15:55:57 ID:???
基本高さは指定するな
33 ：Name_Not_Found：2008/06/01(日) 15:57:43 ID:???
高さ指定したら文字サイズ変えた時みれたもんじゃなくなるぞ
34 ：30：2008/06/01(日) 16:05:25 ID:???
すいません。
テストとして作ったものなので、高さとか指定してあります。
本番用は高さは指定していなくボックス内の各要素のmarginやpaddingの値をemで指定して、
要素の大きさによってそれぞれのボックスが拡大縮小するようになっています。
それでも質問させていただいてる現象が発生してしまいます。

あと本番用はMovableTypeとYahoo YUI のリセット用のCSSを参考にして適用しています。
35 ：Name_Not_Found：2008/06/01(日) 16:09:29 ID:???
>>30
＞margin-topを指定したときFireFoxだと#headerのボックスごと下にずれてしまいます。
そんな事ないが。
36 ：30：2008/06/01(日) 16:25:19 ID:???
>>35
上記質問にて提示させていただいた、全く同じソースでずれないということでしょうか？

あと申し訳ありませんが、ちょっとで外出しなくてはならなくなってしまいましたので、
１８時以降にまた期待と思います。
37 ：Name_Not_Found：2008/06/01(日) 16:31:28 ID:???
疑り深い上に王様www
38 ：Name_Not_Found：2008/06/01(日) 16:46:41 ID:???
>>36
まさに慇懃無礼。
その糞ソースで確認したのかよってお前に聞きたいわ。
お前の糞ソースで、どうやってブロックがずれたってわかるんだ？
つまりお前は確認なんかしてない。

39 ：Name_Not_Found：2008/06/01(日) 19:17:00 ID:???
言葉を慎みたまえ
君はr
40 ：Name_Not_Found：2008/06/01(日) 19:57:59 ID:???
YUIのリセットよさげかと思って見てみたが無駄なの多すぎてイラネ
41 ：Name_Not_Found：2008/06/07(土) 20:09:38 ID:ZlGJaVPN
http://pc11.2ch.net/test/read.cgi/hp/1205680031/261-262
誘導されてきました。
なぜなのでしょうか？まだCSS暦は短いですが
思ったとおりにできないとなんかすっきりしません。
何方か教えてください。
42 ：Name_Not_Found：2008/06/07(土) 20:16:10 ID:???
標準モードになってないからググレ
43 ：Name_Not_Found：2008/06/07(土) 20:21:04 ID:???
>>41
DOCTYPEとかの確認が必要。
特にxml宣言、すなわちDOCTYPEより前に特定の文字があると互換モードなるIE６のバグとかがあるから注意。

http://rmt.sub.jp/Lab/1/

↑少し前に書いたドキュメントだが、参考にしてみてくれ。
44 ：Name_Not_Found：2008/06/07(土) 20:25:27 ID:???
宣伝乙
45 ：Name_Not_Found：2008/06/07(土) 22:18:42 ID:???
>>43
宣伝でも良いさ
少しは知識が増えた　ありがと
46 ：Name_Not_Found：2008/06/07(土) 22:28:23 ID:???
自演乙
47 ：Name_Not_Found：2008/06/07(土) 22:45:04 ID:???
>>46
悲しいな
48 ：Name_Not_Found：2008/06/07(土) 22:52:26 ID:???
忙しいな
49 ：Name_Not_Found：2008/06/07(土) 23:05:54 ID:???
ボックスサイズの解釈のバグはIE6で直ってるんじゃなかったっけ、
と思ってテンプレのサイトを見たらやっぱそうだった。
50 ：Name_Not_Found：2008/06/08(日) 12:03:22 ID:???
floatを解除するために<div class="clear"></div>を入れているのですが、空要素というのが気持ち悪くて…
いい方法があれば教えて下さい。（left,rightの行数は固定ではありません）

<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Test</title>
<style type="text/css">
<!--
* { margin:0; padding:0; }
div#main { width:600px; margin:0 auto; border: 1px solid #000; }
div#left { float:left; width:298px; border: 1px solid #f00; }
div#right { float:left; width:298px; border: 1px solid #00f; }
div#bottom { width:600px; margin:0 auto; border: 1px solid #0f0; }
.clear { clear:both; }
-->
</style>
</head>
<body>
<div id="main">
<div id="left">left<br>left</div>
<div id="right">right</div>
<div class="clear"></div>
</div>
<div id="bottom">bottom</div>
</body>
</html>
51 ：Name_Not_Found：2008/06/08(日) 12:06:36 ID:???
bottomにつければ？
52 ：Name_Not_Found：2008/06/08(日) 13:30:31 ID:???
うむ、bottomでclearだな常考
53 ：50：2008/06/08(日) 13:46:27 ID:???
>>51-52
レスありがとうございます。

div#bottom { width:600px; margin:0 auto; border: 1px solid #0f0; clear:both; }
にすれば <div class="clear"></div> はなくてOKということでしょうか？

それは試してみたのですが、そうするとFirefox で main の border が上しか表示されなかった
（float した要素は高さを持たないから？）ので
>>50 のように <div class="clear"></div> を入れました。
後出しすみません。
54 ：Name_Not_Found：2008/06/08(日) 14:11:23 ID:???
clearfix
55 ：Name_Not_Found：2008/06/08(日) 14:31:20 ID:???
おれがよく使うのは<br style="clear;both;"/>
56 ：Name_Not_Found：2008/06/08(日) 14:37:52 ID:bIGDOlXW
>>53
まああまり考えなくても大丈夫だと思うよ
ソースなんて極一部の人しか見ないから
57 ：50：2008/06/08(日) 16:23:24 ID:???
>>54-56
ありがとうございます。

clearfix でぐぐって
div#main:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
としたらうまくいきました！
58 ：Name_Not_Found：2008/06/08(日) 16:38:03 ID:???
わざわざclearfix・・
59 ：Name_Not_Found：2008/06/08(日) 18:47:37 ID:???
#main { width:100%; overflow:hidden }

じゃ駄目なんかい。
60 ：Name_Not_Found：2008/06/08(日) 18:48:39 ID:???
div#main { overflow: auto }でよくね？
61 ：Name_Not_Found：2008/06/08(日) 19:14:58 ID:???
>>59-60おまいら・・・
62 ：Name_Not_Found：2008/06/09(月) 06:57:11 ID:???
>>61

何さ
63 ：Name_Not_Found：2008/06/09(月) 07:18:42 ID:???
overflowじゃ無理だよ
64 ：Name_Not_Found：2008/06/09(月) 07:32:56 ID:???
無理じゃねーよ。


<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Test</title>
<style type="text/css">
* { margin:0; padding:0; }
div#main { width:600px; margin:0 auto; border: 1px solid #000; overflow:hidden; }
div#left { float:left; width:298px; border: 1px solid #f00; }
div#right { float:left; width:298px; border: 1px solid #00f; }
div#bottom { width:600px; margin:0 auto; border: 1px solid #0f0; }
</style>
</head>
<body>
<div id="main">
<div id="left">left<br>left</div>
<div id="right">right</div>
</div>
<div id="bottom">bottom</div>
</body>
</html>
65 ：Name_Not_Found：2008/06/09(月) 08:20:01 ID:???
あー、ごめん試した時幅指定してなかったわ
66 ：50：2008/06/09(月) 11:43:33 ID:???
>>58-65
レスありがとうございます。

どうして overflow でできるんだろうと思ったら

overflow:hiddenでfloatをclear - とその理由
http://gyauza.egoism.jp/clip/archives/2007/06/070602-overflow-hidden-clear/

overflow を visible（初期値）以外に指定すると float した要素の高さが無視されなくなるのですね。
勉強になりました！
67 ：Name_Not_Found：2008/06/09(月) 23:56:55 ID:???
IEと狐で表示するとほとんどが位置がずれてるので
ちまちまとアンダースコアハックで調整してますが、こんなものでしょうか？
発狂しそうです。
68 ：Name_Not_Found：2008/06/10(火) 00:11:25 ID:???
ずれない書き方を覚えればハックはあまり使わない。
AlphaImageLoader 使うときにスターハックするくらいか。
69 ：Name_Not_Found：2008/06/10(火) 00:26:36 ID:???
そうですか・・　やはり一般的じゃないんですね　しんどすぎるし
ずれない書き方というのがわからないのでまだまだひよっこですな
本を読みあさります
ありがとうございました。
70 ：Name_Not_Found：2008/06/10(火) 00:30:57 ID:???
とりあえず標準モードになっとるのかね？
標準モードなら1pxのずれも許さないとかじゃなければ
そんなに問題ないと思うけど
71 ：Name_Not_Found：2008/06/10(火) 01:17:13 ID:???
げー、互換モードでした
基本的なスペル間違いで反映されない・・と悩みまくる馬鹿をお許しを。
72 ：Name_Not_Found：2008/06/10(火) 01:18:07 ID:???
俺もはじめはアンダースコアハック使いまくりだった。
そのうち分かってくるようになるよ。
CSSは頭の中でイメージするからどうしても慣れないと。
73 ：Name_Not_Found：2008/06/10(火) 01:32:55 ID:???
>>72
なりますか！
がんばります　
74 ：Name_Not_Found：2008/06/10(火) 02:36:27 ID:???
IE6 がこれ以上悪くなることはないので、地雷の場所だけ覚えれば
すいすい歩けるようになるよ。
75 ：Name_Not_Found：2008/06/10(火) 05:15:36 ID:kqIq2YFQ
縦型ナビゲーションのサイトを作ってるのですが、
ナビの高さがメインの高さと合わず、ナビの背景色が表示されません。

htmlが
==============================
<div id="main"><div id="navi">
<ul>
　<li>～<li>
<li>～<li>
</ul></div>
<div id="contents">～</div>
</div>
==============================

cssが
==============================
#navi{
width:170px;background-color: #BBA484;float:left;margin:0px;padding:0px;line-height: 0px;
}
==============================

てな場合のとき、
navi内のulの高さまでしかnaviが表示されず、
背景色がでてくれません。
どうすればいいのでしょうか。。。

ttp://coliss.com/articles/build-websites/operation/css/558.html
これを試したことがあるのですが、DW上での表示がおかしくなるので、
できれば使いたくありません。
これ以外で高さの異なるカラムをそろえる方法はありますでしょうか。
76 ：Name_Not_Found：2008/06/10(火) 06:21:39 ID:???
おー、そのＵＲＬのすごいじゃん
覚えとこう
ってことでない
だからそのハックが存在する
77 ：Name_Not_Found：2008/06/10(火) 08:35:47 ID:???
display:tableを使えばできるけど、IE6,7が対応していない。
http://blog.ibnet.ne.jp/archives/2008/04/ogawa-24.php

table要素を使えば楽勝なのだが…
78 ：Name_Not_Found：2008/06/10(火) 09:37:23 ID:???
少なくとも後５，６年は使えんな
79 ：Name_Not_Found：2008/06/10(火) 09:51:49 ID:???
>>75
いろいろ方法がある
・#mainを#naviと同背景色にする
・#naviの背景を画像にしてrepeat-y
etc.
80 ：Name_Not_Found：2008/06/10(火) 12:03:35 ID:???
背景画像を bottomから貼り付けるようにしたらダメかな
81 ：Name_Not_Found：2008/06/10(火) 13:07:18 ID:???
手書きでcssを書いてるのがそろそろしんどくなりました

Dreamweaverとか使うと少しはラクになりますか？

アプリケーションなどを使ってcssの設定など出来ることって
どの程度なんでしょうか・・・

tableタグを使わなくてレイアウトできたり
javascript無しでマウスオーバーできたりだと便利なのですが

おすすめなソフトありますか？
82 ：Name_Not_Found：2008/06/10(火) 13:19:27 ID:6gBqT8An
>>81
Dreamweaverしか分かりませんが便利といえば便利ですよ。
僕は特定の機能だけ使ってあとはテキストエディタですけど
>>81さんは手書きでもできるようですから後から書き換えたりもできるでしょうし。
各デモ版なんから試してみては？
Dreamweaverは最低限の機能ならHTML+CSSを知っていれば
マニュアルは参照程度で使えるでしょう。
83 ：Name_Not_Found：2008/06/10(火) 13:20:32 ID:???
TopStyle
84 ：Name_Not_Found：2008/06/11(水) 03:36:27 ID:/9YP68KZ
table { width: 100% }
と指定してあるのを、<table class="foo"> のときだけ width: の指定を
なしにしたいんですが、どうしたらいいですか。
.foo { width: none }
としたけどだめでした。
85 ：Name_Not_Found：2008/06/11(水) 04:08:24 ID:???
ほかのにclassつけにゃしょうがないだろ
86 ：Name_Not_Found：2008/06/11(水) 11:04:05 ID:???
>>84
.foo { width:auto; }
87 ：Name_Not_Found：2008/06/13(金) 06:12:25 ID:???
下記ソースでFirefoxで見た時に、ページのトップとヘッダーの間に空きが出来てしまいます
ページのトップにぴったりと付く様にしたいのですが、色々と調べてみても解決する術が分かりません
body{
margin: 0;
padding: 0;
}
#head,
#foot{
width: 750px;
margin: 0 auto;
}
#head{
width: 700px;
height: 80px;
background: url("images/header.gif") 0 0 no-repeat;
}
#logo{
display: block;
margin: 20px 0px 0px 20px;
width: 180px;
height: 50px;
}
#logo{
background: url(images/logo.gif) 0 0 no-repeat;
}
#logo h1{
margin: 0;
width: 180px;
height: 50px;
}
88 ：87：2008/06/13(金) 06:13:18 ID:???
#logo h1{
position: relative;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
/*\*//*/
display: inline-table;
/**/
}
<div id="head"><div id="logo"><h1>タイトル</h1></div></div>

どなたか解決出来る方法がありましたら、アドバイス願います
89 ：Name_Not_Found：2008/06/13(金) 06:55:57 ID:???
それそれれボーダーを付けて表示して見ればすぐ判るぞ。
90 ：Name_Not_Found：2008/06/13(金) 07:09:12 ID:???
#headにborder{ 1px solid #000}としてボーダーを付けると上にくっ付きました
borderを0pxにするとまた離れました
理屈が分からないのですが、どういう事なのでしょうか

また、ボーダーを付けたくないのですが、どうすれば良いのでしょうか
91 ：Name_Not_Found：2008/06/13(金) 07:29:01 ID:???
border:none

ま、試してみれ
92 ：Name_Not_Found：2008/06/13(金) 07:33:05 ID:???
試してみたのですが、くっ付いてはくれませんでした
やはり、borderを設定するしかないのでしょうか
93 ：Name_Not_Found：2008/06/13(金) 09:38:50 ID:???
どこかで margin か line-height が変なふうに働いてると思われるから
しらみ潰しに調べて修正するか

あるいは float を使う。
くっつけたいブロックに float を付けて、全体を別の要素で囲む。
94 ：Name_Not_Found：2008/06/13(金) 10:55:51 ID:???
#logoのmarginを消すとくっ付く様になりました
しかし、これだと位置調整が出来ないですね…

出来ればあまり使いたくはないのですが、大人しくfloatを使おうと思います
95 ：Name_Not_Found：2008/06/13(金) 11:02:09 ID:???
>>94
#headにoverflow: hidden; でいけるんじゃない？
96 ：Name_Not_Found：2008/06/13(金) 11:07:37 ID:???
>>95
凄いです、いけました
理論的な部分で理屈を説明して頂けると嬉しいのですが、自分でも調べてみて理解を深めようと思います

>>95氏とお答え頂いた皆様、本当にありがとうございました
97 ：Name_Not_Found：2008/06/13(金) 11:20:09 ID:???
すみません…
いけたのはいいのですが、#head内で#logoの後にpタグで文章などを入れると、文章が見えなくなりました
やはりfloatにします
98 ：Name_Not_Found：2008/06/13(金) 12:06:36 ID:???
>>94
padding使えばいいじゃん
99 ：Name_Not_Found：2008/06/13(金) 12:19:12 ID:???
clearfix
100 ：Name_Not_Found：2008/06/13(金) 13:20:56 ID:???
height いらんだろ
101 ：Name_Not_Found：2008/06/13(金) 16:04:41 ID:???
>>96
理論的じゃないソース書いといて、理論的な理由求められてもね。
102 ：Name_Not_Found：2008/06/13(金) 17:19:02 ID:???
>>98
paddingを#logoに使うと表示がおかしくなってしまうのです
他の箇所でしたらごめんなさい

>>99
clearfixを#logoや#headに適用してみたのですが、#logoの表示は綺麗に出来るのですが
その後に続く要素の表示が思う様にいきません

>>100
h1にheightを指定しないと、文字サイズを変更した時にはみ出してしまうので出来ないのです

>>101
要はDKIRを使えれば良いのですが、理解が足りない為に目的と手段が入れ替わってしまっていますね…
確かにおかしなソースになっていると思います

一度最初から見直して考えてみます
皆様ありがとうございました
103 ：Name_Not_Found：2008/06/13(金) 17:43:33 ID:hXfj5S8G
HTMLは大体分かるのですが、CSSを勉強し始めたばかりなので
教えてください。

テキストリンクに下線をつけるように外部CSSで指定しているのですが
画像のリンクにも画像の下に点線が付いてしまいます。
画像には下線をつけないようにしたいのですが、どのように
指定したらよいのでしょうか？

外部CSSファイルの元は無料で提供されていたものを流用しています。
a link:などの記述はなく、
div#main a{
border-bottom:1px dotted #333;
}
と書かれています。すみませんが、ご教授下さい・・・。
104 ：Name_Not_Found：2008/06/13(金) 18:54:11 ID:wjGrrnlW
img {
border:none;
}
105 ：Name_Not_Found：2008/06/13(金) 19:53:36 ID:???
無料で提供…？
106 ：Name_Not_Found：2008/06/13(金) 20:08:04 ID:???
あれだろ
CSSの解説サイトとかで、説明してる記述をそのままコピーして使うんだろ
107 ：Name_Not_Found：2008/06/13(金) 20:37:34 ID:???
CGIかなんかのスキンいじってるとか
108 ：Name_Not_Found：2008/06/13(金) 22:53:09 ID:???
IEだと高さが目いっぱい伸びてるんですが
FireFoxだとcontainで指定した#fffが途中で切れて背景色になってしまいます。
IEと同じように再現するにはどうすればいいんでしょうか？

body{
background:#000;
}
#contain{
height:100%;
background:#fff;
}
109 ：103：2008/06/14(土) 00:35:07 ID:M9+lFfsl
レス下さった皆様ありがとうございます。
>> 104
img {
border:none;
}
試しましたが変わらず、です。記述する場所とか決まっているのでしょうか？

>> 105、106
テンプレートを無償で提供しているところからダウンロードして、合わない部分をいじって
修正しているところです。

テキストのリンクには下線の点線が付いていて、マウスオーバーすると点線は消え、
テキストの色が変わるようになっています。
linkの指定箇所を探したのですが、特になく、点線指定の箇所を探すと

div#main a{
border-bottom:1px dotted #333;
}

と

div#sub a{
border-bottom:1px dotted #333;
}

の2箇所のようです。現在Win IE6.0のみでの検証ですが、画像リンクにも下線が付き
マウスオーバーすると点線が消える状態です。
画像に点線をつけないように指定するにはどのように記述すればいいのでしょうか？
度々申し訳ありませんがお願いします。
110 ：Name_Not_Found：2008/06/14(土) 01:16:57 ID:???
>>109
a.img_link {
border: 0;
}
とかしておいて、<a class="img_link"><img src... /></a>とすればいいかな。
本来リンクの下線はtext-decorationで指定するもので、
borderでやるのはどーかと思うけど。
111 ：Name_Not_Found：2008/06/14(土) 01:34:58 ID:???
質問です。
ttp://www.free-css-templates.com/preview/business/
知識が無いので、このテンプレートを改造して使用したいと思っているのですが、
ダウンロードしたものを開いてみると、左側の背景色が右側と同じになっている等の不具合があります。
「ページを保存」からダウンロードしたものでも、同様な症状がみられます。
どなたか解決策を教えてください。

ヨロシクお願いします。
112 ：Name_Not_Found：2008/06/14(土) 01:36:05 ID:???
img {
border:none;
}
を
div#main a{
border-bottom:1px dotted #333;
}
div#sub a{
border-bottom:1px dotted #333;
}
の後に書く
113 ：Name_Not_Found：2008/06/14(土) 01:37:43 ID:???
>>112
それじゃ駄目でしょ。imgの親要素に下線付いちゃってるんだから。
114 ：Name_Not_Found：2008/06/14(土) 01:41:26 ID:???
>>111
左側の背景画像が表示されていないのが原因じゃないの？
というか、知識もないのにテンプレート丸ごと使うのは如何なものかと
115 ：Name_Not_Found：2008/06/14(土) 01:43:49 ID:???
background-image: url(images/background.gif);
background-repeat: repeat-y;
background-color: #292929;

実はこれ、背景色指定じゃなくて、画像指定なのよね
きちんと画像を読まなければ右も左も一緒に表示されてしまう
不具合ではないんだけど、画像を表示しない環境の対策のために
htmlとかdiv要素に黒色指定した方が親切っちゃあ親切なんだよね

ソース直すやる気なんてないけど
116 ：Name_Not_Found：2008/06/14(土) 02:07:53 ID:???
aタグにborder使いまくりだぜ
117 ：Name_Not_Found：2008/06/14(土) 11:27:25 ID:9kVTALgt
<!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>test</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#main { width:600px; }
.box { position:relative; margin: 10px 0; border:1px solid #00f; }
.box1 { margin-right:80px; width:500px; border:1px solid #0f0; }
.box2 { position: absolute; bottom: 0%; right: 0; width:72px; border:1px solid #f00; }
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="box1">text1<br>text1</div>
<div class="box2">詳細1</div>
</div>
<div class="box">
<div class="box1">text2<br>text2</div>
<div class="box2">詳細2</div>
</div>
</div><!-- /main -->
</body>
</html>
118 ：117：2008/06/14(土) 11:28:31 ID:9kVTALgt
>>117 について質問です。
IE7とFirefoxでは期待通りに表示されるのですが、IE6でみると「詳細1」が「text2」の枠の下に表示されてしまいました。

http://coliss.com/articles/build-websites/operation/css/143.html
を見て、.box に height:1% を追加したところIE6でもIE7,Firefox 同様に表示されました。

上記サイトでは「IEのhasLayoutが原因」とあるのですが、なぜIE7では最初から正しく表示されたのでしょうか？

また、対策として「height:1%」を使ったのですが弊害はないのでしょうか？
*{zoom:1;} がおすすめのようですが、テンプレ >>7 の W3C CSS Validation Service で引っかかるのであまり使いたくないのですが・・・

119 ：Name_Not_Found：2008/06/14(土) 11:32:20 ID:0I5yDPib
positionで段組するの止めたほうがいいよ
120 ：Name_Not_Found：2008/06/14(土) 12:00:22 ID:???
>>118
＞上記サイトでは「IEのhasLayoutが原因」とあるのですが、なぜIE7では最初から正しく表示されたのでしょうか？
MSはバグだらけのIE6を放置し、バージョンアップという姑息な手段でバグはなかったと言い張る会社だから。

＞また、対策として「height:1%」を使ったのですが弊害はないのでしょうか？
他のブラウザで自分で確認してみろ。

＞*{zoom:1;} がおすすめのようですが、テンプレ >>7 の W3C CSS Validation Service で引っかかるのであまり使いたくないのですが・・・
そんなに100点取りたいなら、IE6は見捨てろ。
121 ：Name_Not_Found：2008/06/14(土) 12:10:12 ID:???
position:absoluteで位置を決めたタグを回り込ませる方法を教えてください。

ttp://07055944295.com/policy.php

↑ここの右上の人物はposition:absoluteを使っているようなのですが
どうやって文字のまわりこみをさせているのか理解できません。
ヒントだけでも教えていただけましたらうれしいです・・・
122 ：121：2008/06/14(土) 12:18:34 ID:???
すいません。なんとなくわかってきました。
123 ：Name_Not_Found：2008/06/14(土) 12:21:13 ID:???
>>118
.boxにwidth: 600px;でくずれないと思う
それから.box1のmargin-right: 80px;はいらないんじゃない
.box1と.box2の間は.boxのwidthの値で決まってくるよ。
124 ：111：2008/06/14(土) 12:46:43 ID:???
>>112-115
返信レスありがとうございます。
いままで4回ほどテンプレートを改造してサイトを作った経験があったので、
またどうにかなると思ったのですが、、、

とりあえず、.left系の背景色を#212121（濃いグレー）、.rightを#292929（薄いグレー）にしてみたところ
おしい感じになりました。
あと、左側が下まで濃いグレーになって、リンクのホバーが働いてくれると良いのですが・・・
ちなみに、この方法ってあまり良くない方法なのでしょうか？
125 ：111：2008/06/14(土) 12:52:27 ID:???
すいません。リンクのホバーは自己解決しました。
126 ：103,109：2008/06/14(土) 14:03:43 ID:M9+lFfsl
レスありがとうございます。

>>110
class指定してみたのですが、変わらず、です。
記述の場所が悪いのでしょうか？どこに記述すると決まっていますか？

>>112、113
img {
border:none;
}
をそれぞれの下に書いてみましたが、やはり変わりません。
どこか他にチェックすべきタグはありますでしょうか？何度もすみません。。。
127 ：Name_Not_Found：2008/06/14(土) 14:13:17 ID:ZDSWUO0+
スポーツカーDQN男の家族消えろ　スポーツカーDQN男の親消えろ　スポーツカーDQN男の子供消えろ　スポーツカーDQN男の親戚消えろ
スポーツカーDQN男の家族消えろ　スポーツカーDQN男の親消えろ　スポーツカーDQN男の子供消えろ　スポーツカーDQN男の親戚消えろ
スポーツカーDQN男の家族消えろ　スポーツカーDQN男の親消えろ　スポーツカーDQN男の子供消えろ　スポーツカーDQN男の親戚消えろ
スポーツカーDQN男の家族消えろ　スポーツカーDQN男の親消えろ　スポーツカーDQN男の子供消えろ　スポーツカーDQN男の親戚消えろ
ニヤニヤ(・∀・)　ニヤニヤ(・∀・)　ニヤニヤ(・∀・)　ニヤニヤ(・∀・)
死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね
死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね
死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね
死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね
苦しんで死ね 苦しんで死ね 苦しんで死ね 苦しんで死ね 苦しんで死ね 苦しんで死ね 苦しんで死ね
死ぬとき　このレスの事思い出してから地獄へ行けよ
ニヤ(・∀・)ニヤ(・∀・)
128 ：Name_Not_Found：2008/06/14(土) 15:05:16 ID:???
>>126
UAによって仕様が違うんだからしかたないだろ。
imgにlinkを指定しないか、dottedはあきらめるかしろ。
129 ：Name_Not_Found：2008/06/14(土) 16:06:02 ID:6aDEyTFB
>>126
div#main img {
border:none;
}

これでは？
130 ：Name_Not_Found：2008/06/14(土) 16:19:34 ID:???
ボタンのフォントに関する質問です。
ttp://www.google.co.jp/ などのボタンのように、
button要素と、buttonタイプのinput要素を、
ブラウザの標準フォントで表示させるには
どうすればよいでしょうか。
body, td, a, p, .h {font-family:arial,sans-serif;}
が継承されているようなのですが、
font-family:arial,sans-serif;
を自分のページに適用させても、
他の要素はメイリオになっているにもかかわらず、
ボタン要素だけはゴシックで表示されてしまうのです。
よろしくお願いします。
131 ：117：2008/06/14(土) 16:34:41 ID:???
>>119 >>120 >>123
レスありがとうございました。
132 ：Name_Not_Found：2008/06/14(土) 16:56:05 ID:6aDEyTFB
input, textarea {
font-family: "メイリオ", meiryo, arial, sans-serif;
}

これでどう？
133 ：110：2008/06/14(土) 17:27:53 ID:???
>>126
クラス指定はどこに書いてもいいよ。
これでダメだとCSSファイルにミスがありそう。
どこかでセミコロンを入れ忘れてるとか、
編集してるCSSファイルが実は読み込まれてないとか。

>>129
img要素のborderを消しても意味ない。
ボーダーはa要素に付いてるから。
134 ：Name_Not_Found：2008/06/14(土) 17:39:23 ID:6aDEyTFB
>>133
あーそっか・・・
じゃぁborderやめて通常のアンダーラインにするしかなさそうだね
135 ：Name_Not_Found：2008/06/14(土) 17:51:27 ID:???
imgのaにborder:none;つけりゃいいじゃん。
136 ：130：2008/06/14(土) 18:01:27 ID:???
>>132さんありがとうございます。
button要素を使っていたので、
button {
font-family: "メイリオ", meiryo, arial, sans-serif;
}
にしたのですが、だめでした。
HTMLの方をinputにして
input, textarea {
font-family: "メイリオ", meiryo, arial, sans-serif;
}
を試してみましたがやっぱりゴシックのままです。
僕のPCがおかしいのかな。
137 ：Name_Not_Found：2008/06/14(土) 18:05:49 ID:???
>>110さんのやり方ちょっと改変してみます。
a.img_link {
border: 0;
}
なのですが、これはセレクタに要素名1つとclassが1つなので個別性が11です。
一方こちらの2つ、
div#main a{
border-bottom:1px dotted #333;
}
と
div#sub a{
border-bottom:1px dotted #333;
}
は共にセレクタに要素名が2つとidが1つ含まれているので個別性が102になります。
これでは
a.img_link {
border: 0;
}
が無視されてしまうので、
div#main a.img_link,div#sub a.img_link{
border: none;
}
としてみてください。
こうするとセレクタの個別性が共に112になるので優先されるかと思われます。
当然、<a class="img_link"><img src... /></a>としておく必要がありますが、
これでどうでしょうか？
138 ：Name_Not_Found：2008/06/14(土) 18:06:54 ID:6aDEyTFB
>>135
それだとブログだった場合は結構大変だったりしないかい？
通常のWebページなら毎回その作業しなくて良いから問題なさそうだけどね
139 ：130：2008/06/14(土) 18:09:39 ID:???
名前欄忘れましたが、
>>130=136=137 です。一応。
140 ：Name_Not_Found：2008/06/14(土) 18:11:40 ID:???
>>136
Firefoxでも確認してみた？
141 ：130：2008/06/14(土) 18:14:49 ID:???
>>140
Firefoxだと ttp://www.google.co.jp/ でもゴシックなんですけど、
もしかして他の方はブラウザの標準フォントだったりするんですか？
142 ：110：2008/06/14(土) 18:16:02 ID:???
>>137
おっとそうだね。訂正サンクス。
143 ：Name_Not_Found：2008/06/14(土) 18:30:45 ID:???
>>126
かなり強引だがこれでどうだ！

div#main a, div#sub a, {
position: relative;
}
div#main a img, div#sub a img {
position: absolute;
top: 1px;
}
144 ：Name_Not_Found：2008/06/14(土) 21:41:58 ID:???
文法の質問です
CSSはブロックコメント(「/**/」のような)しかないようなのですが
CSSの策定過程で1行コメント(「//」のような)の導入が検討されたことはないのでしょうか？
145 ：Name_Not_Found：2008/06/14(土) 21:57:03 ID:zz1MmsQJ
リンクについて良く分からない部分が出てきたので質問させて下さい。

文字リンクは元々のラインを消して、線種を変えてラインを表示しています。
画像リンクはリストで一つずつ線を作って囲んでいるのですが、
その際に、文字リンクで指定してあるリンクのラインが消えてくれるのですけど
これは環境によって不都合が出てしまいますか？

画像リンクはwidthとheightを指定してborder:1px solid #;で囲っています。
146 ：Name_Not_Found：2008/06/14(土) 22:05:58 ID:???
>>103
vicunaのテンプレサイトに説明が書いてあったような気がした
147 ：Name_Not_Found：2008/06/14(土) 23:05:05 ID:???
>>145
＞これは環境によって不都合が出てしまいますか？
複数ブラウザでの確認くらい自分でしろ
148 ：Name_Not_Found：2008/06/14(土) 23:20:26 ID:zz1MmsQJ
>>１47
火狐さんとoperaさんとIE0.6では確認しました。
ですが、これらもWinの話で、こちらからでは問題無かった表示が
閲覧者の方には崩れてたりするみたいです。

とりあえず、リンクで指定したラインが無視されて
liで指定したボーダーが優先される事に問題が無いのならそれで良いのですが…。
149 ：Name_Not_Found：2008/06/14(土) 23:21:05 ID:TyrFMHyr
IE0.6って・・・
150 ：Name_Not_Found：2008/06/14(土) 23:28:56 ID:???
sageも出来ないIEの表記もまともに出来ない初心者に答えるもんはねぇよ
そんなに気になるならその閲覧者(笑)とやらに確認でも頼んだら良いだろ
つかまだ他の質問者の回答も出て無いのに空気読めないの？
2ch五年ＲＯＭってろ低能
151 ：Name_Not_Found：2008/06/14(土) 23:32:06 ID:???
質問スレでは質問者がageるのが慣例だと思うが。
つーかageとかsageは本当はどうでもいいんだよ。
152 ：Name_Not_Found：2008/06/14(土) 23:34:02 ID:???
0.6……IEのクソさを表現するにはいい言葉だ
153 ：Name_Not_Found：2008/06/14(土) 23:37:32 ID:???
すいません、IE0.6というのは間違った表記だったのですか、
以前見かけてそれが通例なのだと勘違いしていました
154 ：Name_Not_Found：2008/06/14(土) 23:40:29 ID:???
>>153
現状考慮すべきブラウザはIE6.0とIE7.0かな。Fxにあわせれば、必然的にOperaもいけるはず
で、text-decorationについて

* {
text-decoration:none;
}

とするほうがスマート。で、必要な箇所のみに後で付与するほうが賢いね
155 ：Name_Not_Found：2008/06/14(土) 23:50:31 ID:dayJETtL
上げ足鶏とかちょっとした勘違いで叩くようなことするなよ
上級者スレみたいになるだろがボケが
156 ：Name_Not_Found：2008/06/14(土) 23:52:14 ID:9zyTiuCo
>>150
今の時代にサゲろとか言うやつも珍しいよ
それは5～10年ぐらい前の2ｃｈだｗ
157 ：Name_Not_Found：2008/06/14(土) 23:52:51 ID:???
まあ揚げ足というより今回は完全に間違ってるようだが…
158 ：Name_Not_Found：2008/06/14(土) 23:54:33 ID:???
>>155
揚げ足で無くて間違いを指摘しただけだが？
159 ：Name_Not_Found：2008/06/14(土) 23:56:00 ID:???
IE6.0ですよって優しく教えてあげればいい
160 ：Name_Not_Found：2008/06/14(土) 23:58:47 ID:???
おまえが教えりゃ済む話
161 ：Name_Not_Found：2008/06/14(土) 23:59:32 ID:???
質問者の皆さんは>>150みたいなのはスルーすればいいともうよ
162 ：Name_Not_Found：2008/06/15(日) 00:00:36 ID:???
なんか香ばしいのが来てるな・・・
>>150とか>>160とか・・・
163 ：Name_Not_Found：2008/06/15(日) 00:03:19 ID:???
俺のゲームサイトではいまだにIE6が一番多いな。
IE6、7、Fxに最適化すれば取りあえずオッケー。
つい癖でIE表示みながらデザインしちゃうけどね。
164 ：Name_Not_Found：2008/06/15(日) 00:05:20 ID:wsivoz5w
>>154
あばばばばｂ、IE6.0！お恥ずかしい。

>必要な箇所のみに後で付与するほうが賢いね
リンクだけを改めて書き直す事にします。
リストタグと組み合わせて使う事は諦める事にしました。
まだ良く分からない部分があるので、もう少し精進してから使うようにします。
回答ありがとうございました！
165 ：Name_Not_Found：2008/06/15(日) 00:06:41 ID:ll214GxM
俺のサイトは
IE6＝5割
IE7＝2割
Firefox＝2割
その他＝1割

こんな感じ
166 ：Name_Not_Found：2008/06/15(日) 00:10:10 ID:wsivoz5w
>>165
まだIE6が多いんだな･･･
俺も確認とは別にIE6使ってるけど
167 ：Name_Not_Found：2008/06/15(日) 00:12:04 ID:???
>>166
ID見えてますよ初心者さん^^;
168 ：Name_Not_Found：2008/06/15(日) 00:15:47 ID:ll214GxM
自演するわけでもないのにID見えて困る事はないだろ
169 ：Name_Not_Found：2008/06/15(日) 00:17:57 ID:???
＞火狐さんとoperaさん
どの面下げて言ってんだか・・・
170 ：Name_Not_Found：2008/06/15(日) 00:21:49 ID:???
俺、ID出したいからageてたら、sageろだったし、
sageて、NG用に酉つけたら、酉外せといわれたな
171 ：Name_Not_Found：2008/06/15(日) 00:24:03 ID:???
>>169
敬称つけた方が良いと思っただけだ
172 ：144：2008/06/15(日) 00:26:05 ID:???
どなたか>>144ご存知の方いらっしゃいませんか…？
173 ：Name_Not_Found：2008/06/15(日) 00:26:55 ID:???
>>172
何言ってるのかわかりません
174 ：144：2008/06/15(日) 00:31:21 ID:???
>>173
何言ってるのかわからない、というのは>>144の質問内容のことでしょうか？
175 ：Name_Not_Found：2008/06/15(日) 01:07:53 ID:???
>>174
文法どうこう言ってる位だから、当然1.0～2.1仕様書は読んだんだろ？
策定過程なんてW3Cに聞いて来い。
176 ：Name_Not_Found：2008/06/15(日) 01:31:44 ID:???
よくわからんけど、コメントを簡単にしたいってことか？
177 ：144：2008/06/15(日) 01:52:42 ID:???
>>175
ご存知の方がいらっしゃるかと思って質問したのですが…

>>176
ブロックコメントだけだと
/*
/* h1 { color: red } *//*
h2 { color: blue }
*/
のように入れ子にしようとしたとき面倒だな、と思っていまして
Cのようなブロックコメントは導入して
1行コメントを導入しなかったのは何故だろうと疑問に思ったので質問しました
今の文法規則のままでも規則集合などが不正になるようにすればそれは無視されるのでいいのでしょうが
それを1行コメントと言い張るのもどうかと思いますし
178 ：Name_Not_Found：2008/06/15(日) 02:11:36 ID:???
>>177
やっぱり読んじゃいねえ。言い張る前に読めよ、これ以上アホを晒すな。
179 ：144：2008/06/15(日) 02:19:07 ID:???
>>178
正直全ては読めていません。すみません
該当箇所をご存知でしたら教えていただけないでしょうか？
180 ：Name_Not_Found：2008/06/15(日) 02:40:02 ID:???
>>179
全て読めと誰が言った。commentsで探す知恵も無いとは呆れたわ・・・
181 ：144：2008/06/15(日) 03:00:55 ID:???
>>180
2.1でいうと4.1.9ですか？
182 ：Name_Not_Found：2008/06/15(日) 03:25:38 ID:???
正直、>>144は場違いだと思う。
というわけでふさわしいと思うスレに誘導。
http://pc11.2ch.net/test/read.cgi/hp/1019912046/
183 ：Name_Not_Found：2008/06/15(日) 05:50:06 ID:???
ここは解答者も初心者なので>>144の質問の意味が理解できる者はいないのです
184 ：Name_Not_Found：2008/06/15(日) 06:04:55 ID:???
いつまでたっても低ラベルなんだよねぇ・・・
185 ：Name_Not_Found：2008/06/15(日) 12:17:55 ID:???
ここは一つ、>>111の話題に変えてみませんか？
186 ：Name_Not_Found：2008/06/15(日) 12:20:00 ID:???
お断りだ
187 ：Name_Not_Found：2008/06/15(日) 15:21:09 ID:???
>>144
一応こんなのがあるよ。
http://www.w3.org/TR/1998/NOTE-CSS-potential-19981210#id00230344912

1行コメントはほしいけれど新しいsyntaxの導入は互換性の問題が生じるから
導入されることはないだろうね。
188 ：Name_Not_Found：2008/06/15(日) 15:30:55 ID:???
ぬるぽ
189 ：144：2008/06/15(日) 15:48:04 ID:???
>>187
こういう文書があるのは初めて知りました。本当にありがとうございます。

> 1行コメントはほしいけれど新しいsyntaxの導入は互換性の問題が生じるから
> 導入されることはないだろうね。

そうですね…。今更もう入れられないということは理解できました
ともあれ検討されたようだということがわかってよかったです
皆さんありがとうございました
190 ：Name_Not_Found：2008/06/15(日) 16:40:23 ID:???
ブラウザの左右横幅を大きくしても小さくしても
横に並べた背景画像をウィンドウ幅いっぱいに表示させる方法を教えてください。

div.d1 {
margin: 0;
width : 100%;
background-image: url("img.jpg");
background-repeat: repeat-x;
}

例えば上記の方法で小さいウィンドウ幅でページを表示させてから
左右の幅を大きくするとブラウザに映っていない部分の背景が白色で表示されてしまいます。

今まで、そんなことは出来ないものと諦めていたのですが、
Windows Live　のサインイン画面ではそれが出来ていました。
ソースを見て解析を試みてみましたが
外部CSSを５つも使っていて複雑すぎて苦戦しています。
191 ：Name_Not_Found：2008/06/15(日) 17:20:51 ID:???
>>190

width:100% しなければそうなるんじゃ・・・
192 ：Name_Not_Found：2008/06/15(日) 17:42:52 ID:???
>>191
ブラウザを最大画面にして背景画像を横並びに画面いっぱいに表示させつつ
テキストは画面の一番右端に表示させる。
その状態でウィンドウ幅を小さくしてもテキストがついてこないようにしたい。
193 ：Name_Not_Found：2008/06/15(日) 18:05:21 ID:???
最大画面　画面一杯横は何を想定しているの　?
194 ：Name_Not_Found：2008/06/15(日) 18:09:49 ID:???
>>192
100%の意味理解してるか ?
195 ：Name_Not_Found：2008/06/15(日) 23:32:52 ID:???
100%初心者
196 ：Name_Not_Found：2008/06/15(日) 23:44:18 ID:???
100％片想い
197 ：Name_Not_Found：2008/06/15(日) 23:59:45 ID:???
いちご100%
198 ：Name_Not_Found：2008/06/16(月) 19:37:50 ID:w0BnIgcv
ttp://www.flashdaweb.com/resources/free-xhtml-templates
こちらのページにあるテンプレート「DreamLine」を改造しているのですが、
・フッターが画面両端に寄ってしまう。
・/*design box Third*/使用時（width100.html）に広告欄がずれてしまう。
という2つの問題が発生し、いるいろ試しても解決できず行き詰ってしまいました。
どなたか、解決策をご教授いただけませんか？

ソースでレスが潰れてしまいそうなので、製作途中のものをうｐしました↓
（改造内容はmemo.txtにかいてあります）
ttp://toku.xdisc.net/cgi/up2/nbb/xs6045.zip.html
199 ：Name_Not_Found：2008/06/16(月) 19:45:01 ID:2NLZWHsZ
>>198
フォーラムへどうぞ
200 ：Name_Not_Found：2008/06/16(月) 20:15:11 ID:???
能力も無いのになぜ改造しようなどと思うのだろう
能力が無いからテンプレートを使うのだし、
他人が書いたソースを理解する行為は、自分で書くより面倒な場合もある
201 ：Name_Not_Found：2008/06/16(月) 21:19:27 ID:4UwLal6Z
>>200
気持ちはわかるがスレタイを読め
202 ：Name_Not_Found：2008/06/17(火) 12:22:17 ID:JZTgN6Df
<div id='top'></div>
<div id='main'></div>

というソースで、
#topのheightをブラウザの上から200px固定、
#mainのheightを#topの下からブラウザの下までいっぱいに表示させるにはスタイルシートどう書けば良いですか？
203 ：Name_Not_Found：2008/06/17(火) 12:30:54 ID:???
>>202
CSSは高さの面で弱い
どうしてもやりたいならテーブル使えば簡単
204 ：Name_Not_Found：2008/06/17(火) 13:58:05 ID:???
質問です。
ページ全体のリンク色をa:link等で指定しています。
ページ内のdivで囲ったところのリンク色を別の色に変えたく
div a:link {color: #色２;}
のようにしているのですが
火狐だと表示されるのですがIEではページ全体のリンク色の方が反映してしまい
どうにもうまくいきません。

どうしたらよいものでしょうか
205 ：Name_Not_Found：2008/06/17(火) 14:23:02 ID:eH1K4Qys
>>204
そのdivにセレクタは付いていないのかい？
206 ：Name_Not_Found：2008/06/17(火) 14:48:26 ID:???
IDをつけています
207 ：Name_Not_Found：2008/06/17(火) 21:51:22 ID:???
>>204
div a:link {color: #色２;}を一番下にもってけばおｋ
208 ：Name_Not_Found：2008/06/17(火) 22:27:32 ID:WVh/qF1N
>>204
#id a:link {color: #色２;} にすればいいんじゃね？
209 ：Name_Not_Found：2008/06/18(水) 00:25:48 ID:Ma9fqpLk
>>202
main の高さを100％
マージントップを-200pxでどうやろか？

bodyに高さ100％とかいるかも
210 ：Name_Not_Found：2008/06/18(水) 01:23:54 ID:dD3iCkat
>>209
そうゆうことをするとブラウザの幅を変えたときに背景が表示されないとかの問題が出てくる悪寒
211 ：Name_Not_Found：2008/06/18(水) 04:36:36 ID:Ma9fqpLk
>>210
幅100％でいいんでは？
多分可能。

テーブルみたいにフッターを常に画面の一番下に表示する方法もある。
詳細はググってちょ。
212 ：103,109,126：2008/06/18(水) 11:06:52 ID:UhjRfOlm
>>133
>>137
回答ありがとうございました！
div#main a.img_link,div#sub a.img_link{
border: none;
}
上記で指定したところうまくいきました！
画像に点線が付かないようになりました。
ほんとうにありがとうございました！！
助かりました。
213 ：204：2008/06/18(水) 12:58:17 ID:???
>>207>>208
回答ありがとうございます！
やっぱりダメでした。なんか普通のa:linkとかも反映しなくなったりで
原因が訳分からなくなってきたのでごちゃごちゃしてるCSSをもう一回
整理してみたりします
ありがとうございました
214 ：Name_Not_Found：2008/06/18(水) 13:20:34 ID:???
bloggerのｎａｖｂａｒ非表示させるのがうまくいきません。


#navbar #Navbar1 iframe{
height:0px;
display:none;
visibility:hidden;
}

を<head> と</head>の間に入れるということなのですが
自分の使っているﾃﾝﾌﾟﾚｰﾄでは<head>の箇所が見つからなくて。
使っているテンプレート→http://tabo.aurealsys.com/templates/hemingway-template-for-blogger/

ちなみに</head>は見つかります。そもそもどこに入力したらいいか
安易に尋ねるのではなく基本的な知識をもっと身につければすぐに分かる問題なのかもしれませんが
ちょっと急いでて・・

もし分かる方、bloggerつかってらっしゃる方いましたら教えてください。
215 ：Name_Not_Found：2008/06/18(水) 13:53:26 ID:???
>>214
普通にheadあるみたいだが??

<style type="text/css" media="screen">

#page { background: url("http://tabo.aurealsys.com/wp-content/themes/default/images/kubrickbgwide.jpg") repeat-y top; border: none; }

</style>
とこに入れればいいんじゃないの？
216 ：Name_Not_Found：2008/06/18(水) 13:54:16 ID:???
スマン、そのままコピペしてしまった
217 ：Name_Not_Found：2008/06/18(水) 14:07:07 ID:LRnRMLs6
display:none;なんて使うと検索エンジンから嫌われるよ
218 ：Name_Not_Found：2008/06/18(水) 14:16:15 ID:???
ブログの質問はブログ板池
219 ：Name_Not_Found：2008/06/18(水) 20:13:59 ID:???
>>217
SEOスパム業者みたいなやり方してれば嫌われるかもしれないけど
普通に使って嫌われるならその検索エンジンは
よっぽど精度悪いものなんだろうね
220 ：Name_Not_Found：2008/06/18(水) 20:17:30 ID:vaoCLo75
float: left;を使って
□□□（□の大きさはまちまち）
みたいに横に並べたいんですが、ウインドウを小さくしていくと
□□
□
のように下に勝手に回り込んでしまいます。
強制的に右方向に並べる方法はございませんでしょうか？
221 ：Name_Not_Found：2008/06/18(水) 20:21:33 ID:???
>>220
幅固定しれ
222 ：Name_Not_Found：2008/06/18(水) 20:23:34 ID:???
>>221
申し訳ないのですが、言い忘れてました。
入力によって幅は動的に変化するのです・・・
223 ：Name_Not_Found：2008/06/18(水) 20:24:51 ID:???
>>222
っJavaScript

CSSとHTMLのソース晒したら書いてもいいよ
224 ：Name_Not_Found：2008/06/18(水) 20:25:56 ID:???
>>222
意味不明
225 ：Name_Not_Found：2008/06/18(水) 20:28:09 ID:???
>>223
CSSでやれるのかなぁって疑問に思いまして質問いたしました。
JSってことは、topとleftを動的にかっちり指定するやり方ですね。
やはりCSSだけだと無理ですよね、ありがとうございました。
226 ：Name_Not_Found：2008/06/19(木) 07:58:02 ID:???
>>220
俺がいつもやってるテクを言わせてもらうとですね
その□□□を<div>で囲んでその<div>を横幅を固定するようにしてます
227 ：Name_Not_Found：2008/06/19(木) 20:09:40 ID:???
text-align:justfy;
がFireFoxでしか効いてないくさいんですが
ＩＥやOpera、Safariでも効かせるにはどうしたらいいんでしょう
228 ：Name_Not_Found：2008/06/19(木) 21:08:43 ID:Ay0UYx+R
スタイルシートで<p>を使わないフォント指定方法は？
229 ：Name_Not_Found：2008/06/19(木) 21:29:52 ID:???
意味を含めないならspanだな
230 ：Name_Not_Found：2008/06/19(木) 22:00:41 ID:???
>>227
justfyじゃ無理だろ
231 ：Name_Not_Found：2008/06/19(木) 23:17:54 ID:XCoh9Yaz
>>229

回答ありがとうございました！
232 ：Name_Not_Found：2008/06/20(金) 00:12:28 ID:XURdgRmW
a { text-decoration: none; }でリンクの下線が取れない。
233 ：Name_Not_Found：2008/06/20(金) 00:34:04 ID:GGAuFzle
a:link
234 ：Name_Not_Found：2008/06/20(金) 01:17:54 ID:9Z3Okjhl
floatとposition
段組を作る場合どっちでレイアウトをすればいいのでしょうか？
明確な使い分けの差ががいまいち理解できません。
235 ：Name_Not_Found：2008/06/20(金) 02:13:44 ID:???
ｃｓｓの仕様書ってどこで読めますか？
236 ：Name_Not_Found：2008/06/20(金) 06:08:41 ID:???
>>235
>>7
237 ：Name_Not_Found：2008/06/20(金) 07:45:28 ID:IortDLAo
>>234
floatは融通が利いて微調整が楽
positionは融通が利かなくて微調整が手間
238 ：Name_Not_Found：2008/06/20(金) 12:35:44 ID:U64Udsvk
<div id="navi"><ul>
<li><a href="#">HOME</a></li>
<li><a href="#">サービス概要</a></li>
<li><a class="hae" href="#">サービス概要その１</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#"><span class="1">サイトマップ</span></a></li>
</ul></div>

#navi a{ background: #ffffff url(../img/image131.gif) no-repeat left center;
display: block;
text-decoration: none;}

#navi a:hover {background: #FFFFFF url(../img/image133.gif) left center no-repeat;
display: block;
text-decoration: none;}

#navi .hae{background:none;
display: block;
text-decoration: none;
}

#navi .hae a:hover{ background:none;
display: block;
color: #333;text-decoration: none;}


メニューを作成しています。メニューのテキストの左には画像を表示させるようにしています。
メニューの1部（上記ではサービス概要その１）だけ画像を非表示にしたいと思い、クラスをつけました。
しかし、#navi a:hoverのbaskgroundに指定してある画像が表示されてしまいます。記述で間違っているところがあれば教えて下さい。
239 ：Name_Not_Found：2008/06/20(金) 12:56:20 ID:???
#navi .hae a:hover{ background:none;
display: block;
color: #333;text-decoration: none;}

div#naviの中の
　a.haeの中の
　　a:hoverに対して指定してある


↓

#navi a.hae:hover{ background:none;
display: block;
color: #333;text-decoration: none;}


確認してないけどこれでいいんじゃね？
240 ：Name_Not_Found：2008/06/20(金) 13:18:09 ID:???
リンクの左の画像は全部違うんだよね。
同じならliにclass与えるのが楽だけども。
241 ：Name_Not_Found：2008/06/20(金) 13:29:04 ID:U64Udsvk
>>230
ありがとうございます。
上記の方法でうまくいきました。
242 ：Name_Not_Found：2008/06/20(金) 16:10:14 ID:tA6DaX6U
採点、アドバイスお願いします。
http://minkara.carview.co.jp/userid/311648/blog/
243 ：Name_Not_Found：2008/06/20(金) 16:18:47 ID:???
素晴らしく重い
244 ：Name_Not_Found：2008/06/20(金) 16:26:50 ID:tA6DaX6U
重いときはどうしたらかるくなりますか？
245 ：Name_Not_Found：2008/06/20(金) 16:35:53 ID:???
ダイエット
246 ：Name_Not_Found：2008/06/20(金) 16:36:43 ID:???
重いとか以前にド素人のソースだから
blog借りてよくあそこまで滅茶苦茶に出来るもんだ
おとなしくテンプレート使え
247 ：Name_Not_Found：2008/06/20(金) 16:59:22 ID:???
調べてみたけど、テンプレートそのものが腐ってた件
248 ：Name_Not_Found：2008/06/20(金) 17:01:35 ID:???
>>242
釣り？
249 ：Name_Not_Found：2008/06/20(金) 17:08:45 ID:???
>>242
IEなのかな？
Fxでは見れたものじゃ・・・
250 ：Name_Not_Found：2008/06/20(金) 17:16:40 ID:tA6DaX6U
色々アドバイスありがとうございました。
個人的には力作なんですがｗｗｗ
251 ：Name_Not_Found：2008/06/20(金) 17:42:42 ID:???
インターネット最近始めましたな人かな
252 ：Name_Not_Found：2008/06/20(金) 17:45:31 ID:???
言うだけじゃアレだから、こういうとこ見るといいよ。
デザインとの両立ができる。俗に言うDiv使いまくるけどね。

W3C Sites
http://www.w3csites.com/sites_thumbs.asp

CSS web template
http://www.ex-designz.net/template/default.asp


個人的に好きなのがコレ。簡単に作れる。
http://www.free-css-templates.com/preview/hapal/

こういうのは見てるだけでイメージが沸いてくる
253 ：Name_Not_Found：2008/06/20(金) 18:06:40 ID:tA6DaX6U
>>252
ネット歴は古いんですがＣＳＳ歴は浅いです。
サイトのリンク有り難うございます、勉強させてもらいます。
色々アイデアが浮かんできそうですね。

直したたほうがいい箇所とかあれば教えてください。
254 ：Name_Not_Found：2008/06/20(金) 18:14:50 ID:???
>>253
悪いけど全部
釣りとしか思えないほどひどい
255 ：Name_Not_Found：2008/06/20(金) 18:21:43 ID:tA6DaX6U
釣り？
それはどういうことですか？
256 ：Name_Not_Found：2008/06/20(金) 18:37:26 ID:???
2ch初めてか？力抜けよｗ
257 ：Name_Not_Found：2008/06/20(金) 18:39:28 ID:KV0SAZSS
>>242
これは酷い・・・採点の仕様がない
258 ：Name_Not_Found：2008/06/20(金) 18:57:18 ID:tA6DaX6U
凹みますが正直な感想ありがとうございます。
一度手直ししてみます。

ちなみにブログ内容にはツッコミ無しでお願いします。
個人的趣味が強いものでｗｗｗ

259 ：Name_Not_Found：2008/06/20(金) 19:00:12 ID:???
>>258
>>249も言ってるけど、ＩＥでしかチェックしてないのかな？
Fxで見たらひどいよ。他のブラウザでもチェックすべき。
あと、サイトの評価はそれ専用のスレがあるからそこでやったほうがいい
CSSどうのの問題以前だと思うよ
260 ：Name_Not_Found：2008/06/20(金) 19:07:39 ID:???
>>258
個人攻撃でなく、対象リンク批評なので凹まないように。
CSSを突き詰めたいならSEOだとかAccessibilityも念頭に入れましょう。
各個ググってみてください。
261 ：Name_Not_Found：2008/06/20(金) 19:11:49 ID:tA6DaX6U
>>259
>>260
ありがとうございます。
できるかどうかどうか不安ですが。
262 ：Name_Not_Found：2008/06/20(金) 19:30:28 ID:???
はい次の方
263 ：Name_Not_Found：2008/06/20(金) 20:44:20 ID:???
何かの方法を聞こうと思っていたはずなんですが、忘れてしまいました。
思い出したらまた来ます。
264 ：Name_Not_Found：2008/06/20(金) 20:47:27 ID:???
スタイルシートを直接ダウンロードさせない方法を教えてください。
えっとつまりホームページの中から呼ばれたときだけ見えるというやりかたです。
265 ：Name_Not_Found：2008/06/20(金) 20:48:21 ID:???
無理です。はい次の方。
266 ：Name_Not_Found：2008/06/20(金) 20:48:42 ID:???
そんなもんキニスンナ
お前のなんか使い道ない
267 ：Name_Not_Found：2008/06/20(金) 20:50:15 ID:???
無理じゃないです。
268 ：Name_Not_Found：2008/06/20(金) 20:51:48 ID:???
リファラーで判断すれば出来なくもないが少なくともお前には無理だから安心汁
269 ：Name_Not_Found：2008/06/20(金) 21:56:01 ID:???
>>264
.htaccess質問コーナー Part7
http://pc11.2ch.net/test/read.cgi/hp/1206025115/
270 ：Name_Not_Found：2008/06/21(土) 11:03:38 ID:???
>>258
ここに先週ダウンロードが開始されたばかりの最新ブラウザFirefox3があります。
http://mozilla.jp/firefox/
つべこべ言わずにこれをダウンロードしてインストールしたら自分のブログを見てみよう
271 ：Name_Not_Found：2008/06/21(土) 11:06:13 ID:???
>>264
なぜ隠す？コソコソしやがって
そういうとこがキモイんだよ
272 ：Name_Not_Found：2008/06/21(土) 12:30:29 ID:???
日本人には多いよな、そういうの。
俺はオープンにやってるけど逆にそういうのは叩かれやすい。
273 ：Name_Not_Found：2008/06/21(土) 12:35:56 ID:???
プログラムのソースコードとかもそうだよね
274 ：Name_Not_Found：2008/06/21(土) 12:55:49 ID:???
i-mode で文字スクロールさせると、30文字で切れてるみたい。これって解決策あるの？

やってることは↓。

div タグに style でスクロールするように指定。

style="display:-wap-marquee;"

30文字丁度で切れてるから、文字数に上限があるのかなと思って。パソコンから見たら問題なく全部（50文字ぐらい）表示してる。
275 ：Name_Not_Found：2008/06/21(土) 13:00:56 ID:???
>>274

ごめ。自己解決。

ドコモは 64kb までしか表示できないっぽいね。全角だと32文字か。
276 ：Name_Not_Found：2008/06/21(土) 13:02:36 ID:???
同じCSSを使ったページをいくつか作りましたが、そのうちの一つがページを開いてもすぐに適用されず、一瞬間を置いて適用されます。
原因は何ですかね？
知識が限りなく０に等しいので言葉がおかしいと思いますが、何方か助けて頂けたら嬉しいです。
277 ：Name_Not_Found：2008/06/21(土) 13:42:52 ID:???
知識が0ではどんな不具合が起ころうと不思議ではない
地道に勉強しろというとヒステリーを起こす奴がいるが、とても大事な事なのだ
278 ：Name_Not_Found：2008/06/21(土) 13:45:16 ID:???
>>276
そりゃ、重いからだろう
279 ：Name_Not_Found：2008/06/21(土) 14:01:15 ID:???
>>278
正解
280 ：Name_Not_Found：2008/06/21(土) 15:33:51 ID:???
プログラムのソースを隠すのは当たり前
ＣＳＳはあんなもん隠す意味が無いから隠さないだけ
281 ：Name_Not_Found：2008/06/21(土) 15:34:53 ID:???
>>280
いろいろな意味で哀れです
282 ：Name_Not_Found：2008/06/21(土) 15:37:18 ID:???
>>281
唯一つの意味で可愛そうです
283 ：Name_Not_Found：2008/06/21(土) 16:02:58 ID:???
あなたたちを見ていると興奮してきましたよ
284 ：Name_Not_Found：2008/06/21(土) 16:28:39 ID:???
わたしは萎えてきましたよ
285 ：Name_Not_Found：2008/06/21(土) 20:11:09 ID:???
質問です。

classとidの使い分けって、どのようにしていますか？
286 ：Name_Not_Found：2008/06/21(土) 20:45:17 ID:???
一つだけのものはid
使いまわしするようなものはclass
287 ：Name_Not_Found：2008/06/22(日) 00:30:25 ID:VjrQIKSK
この形式<IMG SRC="">で絶対配置にするには？
288 ：Name_Not_Found：2008/06/22(日) 00:38:04 ID:???
>>287
class　id　物理style
289 ：Name_Not_Found：2008/06/22(日) 01:01:41 ID:VjrQIKSK
>>288
テンプレ求る
290 ：Name_Not_Found：2008/06/22(日) 01:21:39 ID:???
>>289
ヒント
ダーク・アブソリュート！お前は死ぬ
291 ：Name_Not_Found：2008/06/22(日) 02:32:52 ID:???
>>285
a href="#" として使うならid
使わないならclass
292 ：Name_Not_Found：2008/06/22(日) 13:22:22 ID:???
>>291
だから>>286なんだよ
複数指定してるとこに飛ばせないだろ
293 ：Name_Not_Found：2008/06/22(日) 15:02:01 ID:???
idとclassの使い方わかってないな。

<div id="idone" class="clone">あいうえお</div>

こんな風にHTMLを書くんだよ
294 ：Name_Not_Found：2008/06/22(日) 15:08:09 ID:???
次の質問どうぞ
295 ：Name_Not_Found：2008/06/22(日) 15:21:47 ID:???
しっかしまぁなんというか・・・　ラベルが・・・
296 ：Name_Not_Found：2008/06/22(日) 15:42:22 ID:???
Firefoxでフォントがカクカクになるんですけど改善できませんか？
297 ：Name_Not_Found：2008/06/22(日) 15:43:38 ID:???
>>285 >>291
直感的だから説明しにくいな
例えば、上部パンくずと下部パンにそれぞれパンくずリストがあったとしよう
同じ物と見なしたらclassで違うものと見なしたらidになる
俺は違うものと見なすからidを使う
で、共通の指定もするのならclassもするから>>293もある
298 ：Name_Not_Found：2008/06/22(日) 16:16:48 ID:???
>>296
それだけの情報でどう答えろと言うんだ？
299 ：Name_Not_Found：2008/06/22(日) 16:18:45 ID:???
>>293
Another HTMLによるとidは大文字で書かないといけないらすぃ
ttp://htmllint.itc.keio.ac.jp/htmllint/explain.html#lower-id
300 ：Name_Not_Found：2008/06/22(日) 18:09:02 ID:???
どうでもいい
301 ：Name_Not_Found：2008/06/22(日) 19:47:49 ID:???
>>297
id="PANKUZU1"
id="PANKUZU2"
ってこと？
302 ：Name_Not_Found：2008/06/22(日) 19:49:49 ID:???
装飾がclassで住所がid
303 ：Name_Not_Found：2008/06/22(日) 19:51:27 ID:???
>>301
id="HEAD_NAVI" class="NAVI"
id="FOOT_NAVI" class="NAVI"

になるね。さすがに数字はちょっと。意味ないじゃん
304 ：Name_Not_Found：2008/06/22(日) 19:52:11 ID:???
idは名前じゃないの？
classは種類
305 ：Name_Not_Found：2008/06/22(日) 20:11:15 ID:???
まぁ好きに使っても特に問題ないよ
306 ：Name_Not_Found：2008/06/22(日) 21:19:48 ID:???
idは特定の一つを区別できるようにするための識別子でしょ。
同じidが複数あっちゃダメ。

>>297
俺には余計わからん。
307 ：Name_Not_Found：2008/06/22(日) 22:00:50 ID:???
divぐらいにしかidつかわねーｗ
body,head,wrap,menu,foot
308 ：Name_Not_Found：2008/06/22(日) 22:10:40 ID:???
まあ、区別できるように明示するのもidの使い方だしね
むしろ、spanとdivはidもclassも存在しなければ、意義のないような要素だし
309 ：Name_Not_Found：2008/06/22(日) 22:16:09 ID:???
>spanとdivはidもclassも存在しなければ、意義のないような要素だし

全然そんなことないだろｗ
310 ：Name_Not_Found：2008/06/22(日) 22:16:56 ID:???
>>299
それ、準拠してる処理系があったら教えて欲しいくらいだ
311 ：Name_Not_Found：2008/06/22(日) 22:24:24 ID:???
>>309
ああ、titleがあったか。すまん
でもさ、俺、こんなの用意しちゃったんだ

<div>
<div><span>あいうえお</span></div>
</div>

これに意味があるかって聞かれたら「ねーよｗｗｗ」っていいたかったんだ
align？style？そんなのなしで
312 ：Name_Not_Found：2008/06/22(日) 23:26:10 ID:???
そんなヘンなソースで言われても
313 ：Name_Not_Found：2008/06/24(火) 08:18:01 ID:???
Osaka－等幅って、IE6だと使えない？
Osaka－等幅を使うと、何故かフォントサイズとか色とか、
フォント関連の設定が全部無視される。
Osaka-monoにすると問題ないんだけどね。
314 ：Name_Not_Found：2008/06/24(火) 23:19:40 ID:???
>>313
sans-serif
serif
monospace
fantasy
cursive

これらもセットで指定しろ
315 ：Name_Not_Found：2008/06/25(水) 10:35:14 ID:???
>>314
ダメでしたね。
「font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka－等幅', monospace;」
と指定してたんですが、やはり、フォントは全て無視されて表示されます。

「font-family: 'ＭＳ ゴシック', 'MS Gothic', Osaka-mono, monospace;」
だと問題ありませんでした。
これで、うまくいってるんで、これで使うしかないか。
316 ：Name_Not_Found：2008/06/25(水) 11:22:43 ID:???
[ CSS ] ｢ Osaka?等幅 ｣ フォントの指定方法 | Bowz::Notebook
ttp://bowz.info/434

そういうものなのかも
317 ：Name_Not_Found：2008/06/25(水) 11:49:13 ID:???
>>316
おおおぉぉぉ、まさしく探していた情報です。
ありがとうございます。
ここ1週間ほどググったりして格闘していた答えが書いてあります。
これですっきりと仕事が進みそうです。
318 ：Name_Not_Found：2008/06/25(水) 19:39:26 ID:???
background: url(../images/kage.gif) repeat-y;
と指定してるんですが Firefoxでみると表示されません
IEはOKでした　ご教授願います
319 ：Name_Not_Found：2008/06/25(水) 19:49:14 ID:???
そんな事はありえません。あなたが間違ってるのです。
320 ：Name_Not_Found：2008/06/25(水) 20:25:03 ID:???
>>318
ブラウザの設定じゃね？
321 ：Name_Not_Found：2008/06/25(水) 20:35:09 ID:???
どうせ高さ消えてたりしてるんだろ
322 ：Name_Not_Found：2008/06/25(水) 21:34:10 ID:???
お返事ありがとうございます
やはり無理でした
詳細に書くとこんな感じです。

#wrapper {
width : 850px;
margin : 0 auto;
background: url(../images/kage.gif) repeat-y;
}
323 ：Name_Not_Found：2008/06/25(水) 22:20:55 ID:???
firefoxとIEでボックスのwidthの計算が違うと言うの分かったんですが
テーブルの場合の幅の算出がいまいちわかりません。
下記のような場合、幅は何pxになるんでしょうか？

単順にボーダー1pxとセル25pxを足していったものでいいのでしょうか？
幅 1 + 25 + 1 + 25 + 1　で53px ?

よろしくお願いします。

/* html */

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>a</td>
<td>b</td>
</tr>
<table>

/* CSS */
table {
border-collapse : collapse;
border-spacing : 0;
}
td {
width : 25px;
border: 1px solid #000000;
}
324 ：Name_Not_Found：2008/06/26(木) 10:17:46 ID:???
>>322
border:1px solid red;

足してみな
赤い一直線が出てくるはずだ
まあつまり、>>321の状況だってのを理解してくれ

ttp://www.geocities.jp/multi_column/float/05.html
の例3を参考にすると解決するはず
325 ：Name_Not_Found：2008/06/26(木) 15:01:28 ID:???
>>323
それであってるはず・・・だけどFx & firebugでみると52pxになってる。
IE & Developer Toolbar だと53px。

ところで、セルの高さがIEとFxでずれるのはなぜ？

/* CSS */
table {
border-collapse : collapse;
}
td {
width : 25px;
border: 1px solid #000000;
height: 30px;
padding: 3px;
}

/* HTML */
<table>
<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
</tr>
</table>

table の幅、高さが
・IE7 - 129 x 75
・Fx2 - 128 x 60
になる。

326 ：Name_Not_Found：2008/06/26(木) 15:27:44 ID:???
>>325
Fx3でプリントスクリーン撮って確認してみたら、大きさは129x61だった
IE6は7と同じで128x60になった
327 ：Name_Not_Found：2008/06/26(木) 15:39:08 ID:???
table関係はFxだとtranditionalとstrictでも変わったはず
328 ：325：2008/06/27(金) 10:45:53 ID:???
>>326-327
>>325 は「HTML4.01 Transitional URLあり」での数値でした。
「HTML4.01 Strict URLあり」に変更しても、IE7, Fx2 とも変わらず。
DOCTYPE 宣言をなくすと、
・IE7 - 129 x 60
・Fx2 - 129 x 61
になりました。

標準モードにすれば
table の height = (td の height) x 2 + (td の padding) x 4 + (td の border) x 3 = 75
になると思っていたのですが。

329 ：Name_Not_Found：2008/06/27(金) 16:09:04 ID:???
その1pxの違いが何だっての？
330 ：Name_Not_Found：2008/06/27(金) 16:41:29 ID:???
>>328
＞table の height = (td の height) x 2 + (td の padding) x 4 + (td の border) x 3 = 75
font-sizeが25px以上なけりゃpaddingは相殺されるだろ。
それにその計算式はboxについての話で、tableの話は知らん。
オレはメンドいから探さないが、どっかに書いてあんじゃね。
331 ：Name_Not_Found：2008/06/27(金) 18:13:15 ID:???
IE7にて不可解な挙動を示しましたので質問をさせていただきたく思います。
以下のようなHTML、CSSにて<cite>内に background がIE7では2回表示されます。
Firefox3, Operaでは問題ありません。また、<img>を非表示すると問題ありません。
<cite>の変わりに他のインライン要素(<span>など)でも起こります。
バグのように見えるのですが、これはどのような現象でしょうか？
以下にコードを示します。（最小限に再現する状態にしましたので無用な突っ込みはご容赦を）
--------test.html------------
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head><link rel="stylesheet" type="text/css" href="test.css" charset="iso-8859-1" /></head>
<body><div class="bubble">
<cite>via: <img src="ext_link.png" class="external_link" /> <a href="test.html">ほあげほげaaaaaaaaaaaaaaaaaaaaaa</a></cite>
</div></body></html>
---------test.css----------
img.external_link{ padding: 0 0; margin: 0 0.2em; }

div.bubble cite {
position: relative; top: 10px; padding: 10px;
background: url(tip.gif) no-repeat 30px 0px;
}
div.bubble cite img {
/* margin: 0px; *//* for IE bug */
}
332 ：331：2008/06/27(金) 18:16:09 ID:ywLy1HsV
スクリーンショットを用意しましたので、拝見ください。

http://sylphys.ddo.jp/upld2nd/pc3/src/1214558145340.jpg
333 ：331：2008/06/27(金) 19:15:25 ID:ywLy1HsV
>>331の現象を回避する方法は、<img>のcssのmarginを 0にすることでした。

div.bubble cite img {
　margin: 0px; /* for IE bug */
}

今回はこれで切り抜けられましたが、
もしかすると既知の現象ではないか？と思ったしだいです。
334 ：Name_Not_Found：2008/06/27(金) 19:26:37 ID:???
margin・padding皆殺しが基本なの
335 ：Name_Not_Found：2008/06/27(金) 23:55:47 ID:???
>>334
通報しますた
336 ：Name_Not_Found：2008/06/28(土) 00:06:55 ID:???
>>335
どうぞ
337 ：Name_Not_Found：2008/06/28(土) 00:12:07 ID:tXF1E9vk
タグクラウドについて教えてください。

<li class="tagRank10"><a href="①" title="">ブラウザに表示される文字</a></li>

この①に入るリンク先はどこを入れれば良いのでしょうか？自分のサイト内？
338 ：Name_Not_Found：2008/06/28(土) 00:15:07 ID:???
集え！全てのパーディングとマージン達を皆殺しだ！！！








* {
margin:0;
padding:0;
}
339 ：Name_Not_Found：2008/06/28(土) 00:16:07 ID:???
>>337
聞かせてください。なんのタグクラウドなんですか？
340 ：Name_Not_Found：2008/06/28(土) 00:19:31 ID:???
パーディングって何すか先生
341 ：Name_Not_Found：2008/06/28(土) 00:20:44 ID:???
パーデンネンのはとこです
342 ：Name_Not_Found：2008/06/28(土) 00:21:50 ID:???
>>337
cssに全く関係ありませんね。スレタイくらい読んでください。
343 ：Name_Not_Found：2008/06/28(土) 00:28:00 ID:???
<p style="display:none">スレタイなんぞ読んでたまるか。</p>
344 ：Name_Not_Found：2008/06/28(土) 00:28:43 ID:???
そこはコメントアウトだろ
345 ：Name_Not_Found：2008/06/28(土) 00:34:28 ID:???
>>343
見えませんよ
346 ：Name_Not_Found：2008/06/28(土) 00:46:58 ID:???
>>345
全て消えろ!

/* そこは無反応だろｊｋ */
dl.thread dt,dl.thread dd {
text-indent:-9999px;
}
347 ：Name_Not_Found：2008/06/28(土) 00:52:26 ID:tXF1E9vk
>>339
http://css-happylife.com/log/css-template/000336.shtml
スレ違いでしたらすいません
348 ：Name_Not_Found：2008/06/28(土) 01:00:57 ID:???
<h1><strong>スレタイなんぞ</strong>読んでたまるか。</h1>
349 ：Name_Not_Found：2008/06/28(土) 01:02:52 ID:???
<h1><em><strong>スレタイなんぞ<strong>読んでたまるか</em></h1>
350 ：Name_Not_Found：2008/06/28(土) 01:03:13 ID:???
あ、スラッシュ忘れた
351 ：Name_Not_Found：2008/06/28(土) 01:04:12 ID:???
>>350
-600点
352 ：Name_Not_Found：2008/06/28(土) 01:05:03 ID:???
＜/html>
353 ：Name_Not_Found：2008/06/28(土) 01:08:18 ID:???
352個のエラーがありました。
このスレッドは-1,200点です。
354 ：Name_Not_Found：2008/06/28(土) 01:55:39 ID:???
訂正
エラーは353個でした
355 ：Name_Not_Found：2008/06/28(土) 03:48:43 ID:???
font-weightも殺すぜ。
bodyにwidth height100%も基本。
356 ：Name_Not_Found：2008/06/28(土) 04:59:27 ID:???
近所の電器店でアレに使う大容量HDDなどを物色しておりましたら、
「萌えー！萌えー！」と叫びながらフロアをうろつくおっさんを発見いたしました。
ああ、春だな。
ああいうおっさんの存在を根本から抹消したらさぞかし楽しいだろうなとバッファローの
２００GBHDDを凝視しながらレジへと並びました。
ふとおっさんに目をやると、いつのまにやらおっさんが幼女に寄り添っているではありませんか。
これはいけませんと、買い物かごにあった唯一武器になりそうなUSBケーブルを握り締めていると、
おっさんと幼女の会話が聞こえてまいりました。
「もえ。お父さんから離れたらダメじゃないか」
「ごめんなさい」
ああ、アレだ。親子だ。もえって名前のお子さんですか。利口そうなお嬢さんですね。
抹消されるべきは私ですね。
357 ：Name_Not_Found：2008/06/28(土) 05:06:49 ID:???
教えてください。
<hr>をCSSで装飾したときに、ブラウザによって挙動が違うため、画像を使うことにしました。


.novelhr{
background-image: url("line.gif");
height: 30px; width:80px;
border:none;
text-align:center;/* IE用センタリング */
margin:auto;/* その他ブラウザ用センタリング*/}


上記のようなCSSを書いたところ、Frefoxでは希望通りの表示がされたのですが、
IE6ではborder:none;が効いていないのか、画像に枠線が出てしましました。
border:hiddenや、border:0;などいろいろ試したのですが無理でした。
枠線を消す方法はありませんか？

HRの装飾としてではなく、普通に画像を貼り付けるだけでもいいのですが、
意味合い的には「仕切り線」というところに使いたいので、出来たらタグは＜HR＞のままがいいのですが。
358 ：Name_Not_Found：2008/06/28(土) 05:13:14 ID:???
fontweightなんて殺しても意味無いだろ
heightも意味ない
359 ：Name_Not_Found：2008/06/28(土) 05:17:04 ID:???
>>357
visibility
360 ：Name_Not_Found：2008/06/28(土) 05:42:41 ID:???
>>357
ありがとうございます。
ですが、
visibility:hidden;
としても内枠は消えず、

visibility:none;
とすれば、HR自体が消えてしまいます……。
361 ：Name_Not_Found：2008/06/28(土) 05:43:32 ID:???
すみません。

×　>>357
○　>>359
362 ：Name_Not_Found：2008/06/28(土) 05:53:42 ID:???
んじゃpositionかtext-indentで飛ばしちゃえばおｋ
363 ：Name_Not_Found：2008/06/28(土) 15:30:24 ID:???
border:none !important ;
364 ：Name_Not_Found：2008/06/28(土) 16:16:41 ID:???
hrを装飾しようって考えが間違い。
365 ：Name_Not_Found：2008/06/28(土) 16:18:28 ID:???
>>364
<hr>なんてなくなればいい。
366 ：Name_Not_Found：2008/06/28(土) 16:26:24 ID:???
流石IEだ、悉く邪魔をしてくれるな
367 ：Name_Not_Found：2008/06/28(土) 16:34:30 ID:???
hrなんてCHTML以来使ったことねーな
368 ：Name_Not_Found：2008/06/28(土) 16:48:54 ID:???
>>365
旦那！　CSSだけだと引っぺがした時に、どこで区切るのか分からないページがあるんだぜ！

頼むから、たまには使ってやってください。hr
369 ：357：2008/06/28(土) 16:51:57 ID:???
みなさん回答ありがとうございます。
やっぱりＨＲは変ですかねー。
小説を書いているんですが、セクションとセクションの区切りにちょうどいいんですが。


文章文章文章
文章文章文章
文章文章文章

　＊　＊　＊　←ここに、なにか区切りマークを入れたいが、Hrの初期設定のsolidじゃ変。

文章文章文章
文章文章文章
文章文章文章


<div>
<p>文章</p>
<p>文章</p>
</div>
<hr>←ここ
<div>
<p>文章</p>
<p>文章</p>
</div>
370 ：Name_Not_Found：2008/06/28(土) 16:53:49 ID:???
よくわかんないけどbrにクラス設定すればいいんじゃない？
<br class='区切り' />
みたいな感じで。
371 ：Name_Not_Found：2008/06/28(土) 16:54:04 ID:???
>>369
divでもpでもいいが、背景画像指定
hrも同じだったはず。ただし、hrで画像表示は面倒くさい
372 ：357：2008/06/28(土) 16:58:56 ID:???
>>371
自分としては、HRに背景画像指定が一番いいんだけど、
>>357に書いたみたいに、IE6で変な枠線（borderじゃなくて、HR自身の枠線？）が出ちゃうんだよね。
やっぱり<DIV>か<p>か……

<div>に背景画像指定しするとしたら、
<div class="">ここに何か入れないと気持ち悪い</div>

やっぱり
<p class="">テキストで『※　※　※』あたりを入れる</p>
方がきれいかな。

枠線を消す方法は分からなかったけど、
皆さんの意見参考になりました。
373 ：Name_Not_Found：2008/06/28(土) 17:03:33 ID:???
>>372
オヌヌメはhrとpかdivのセット
hrは非表示にし、pとdivに背景画像の表示を行う
すると、CSSが適用されないブラウザでも可読性は上昇する

ただ、記事本文の中にhrを指定するやり方って前を歩いてきた人たちはあんまりやらない
じゃあ、何のために用いるのかというと、「一番下のaddressとそれ以外の部分は違うんだよ」という明示のために行う
あるいは、ブログみたいに、いくつもの記事をタグ付けしたときに、「一つ一つの記事は異なるんですよ」とかね

あんまり使用するとうるさくなるから、使う人は滅多に見ないけど
374 ：Name_Not_Found：2008/06/28(土) 17:10:30 ID:???
>>373
つまり、こういうこと？

*********************
.novelhr{
　　background-image: url("line.gif");
　　height: 30px; width:80px;
　　border:none;
　　text-align:center;/* IE用センタリング */
　　margin:auto;/* その他ブラウザ用センタリング*/}

div.novelhr hr{
　　display: none;}

*********************
<div class="novelhr"><hr></div>
*********************

なんか不思議な感じがするが、これしか解決方法なさそうだなー。
ありがとん。

でもHRって、普通に使うことを想定してないんだな。
知らなかった。
375 ：Name_Not_Found：2008/06/28(土) 17:33:52 ID:???
>>374
どこをどう解釈したんだｗｗｗｗｗｗｗｗｗ

<div id="hogehoge1">
</div>
<hr />
<div id="hogehoge2">
</div>

ないし

<p id="hogehoge1">
</p>
<hr />
<p id="hogehoge2">
</p>

みたくしろと書いたんだが
376 ：Name_Not_Found：2008/06/28(土) 17:37:22 ID:???
＞でもHRって、普通に使うことを想定してないんだな。
普通に使えばいいのに、どうこうしようとしてるのはお前だ
377 ：Name_Not_Found：2008/06/28(土) 17:41:04 ID:???
ｈｒシンプルでおれは好きなんだけどな
378 ：Name_Not_Found：2008/06/28(土) 17:58:29 ID:???
>>373
それいいな。
一応<p>文</p>を一区切りにしてるけど物足りないんだよなぁ。
<hr>をdisplay:none;は思いつかなかったわ。

hrって区切りの意味だけど検索エンジンにも分かってもらえるかな。
379 ：Name_Not_Found：2008/06/28(土) 18:19:21 ID:???
分ってもらえたとして、メリットあんの？
380 ：Name_Not_Found：2008/06/28(土) 18:22:08 ID:???
オッスおら悟空！
オイラは<hr>も初期化

hr {
border:0;
height:1px;
background-color:#000;
color:#000;
}
381 ：Name_Not_Found：2008/06/29(日) 18:09:19 ID:???
web標準を始めようと思います。kanzakiさんの所で理念はわかりました。
実践的なことを学びたいのですが、お奨めのページを紹介してください。
382 ：Name_Not_Found：2008/06/29(日) 18:21:30 ID:???
>>381
テンプレ
383 ：Name_Not_Found：2008/06/29(日) 18:35:07 ID:???
昔はずっとHR使ってたから、
CSSでもしばらくは区切りに使いたいと思ってたなぁ。
でもやっぱりDIVとかPになっちゃうね。
384 ：Name_Not_Found：2008/06/29(日) 19:00:09 ID:???
標準語を覚えるには東京に住むしかない。
385 ：Name_Not_Found：2008/06/29(日) 19:28:26 ID:???
>>384
なにがあた
386 ：Name_Not_Found：2008/06/29(日) 19:35:07 ID:???
昔は、<HR>, <BR> 厨でした。
今じゃ立派な <div> <span> <p> 厨です。
387 ：Name_Not_Found：2008/06/29(日) 19:56:43 ID:???
使い勝手を考えれば今でもhrは普通に使うはず
388 ：Name_Not_Found：2008/06/29(日) 20:44:56 ID:???
pはともかくインライン要素ってアンカーくらいしか使わないな
他のタグ付けが面倒すぎる
389 ：Name_Not_Found：2008/06/29(日) 20:49:41 ID:???
DIV を使わずに組めた時は勝ったと思う。
そのぶんスクリプトに頼りがちだけど。
390 ：Name_Not_Found：2008/06/29(日) 23:02:22 ID:???
strongとか使ったことねぇ
391 ：Name_Not_Found：2008/06/30(月) 00:11:07 ID:???
emは割と使うかも
392 ：Name_Not_Found：2008/06/30(月) 00:45:51 ID:???
運営しているtumblelogの特性上、どうしても引用が増えてくるからciteは頻繁に使うな
あとはabbrもたまに使う程度
393 ：Name_Not_Found：2008/06/30(月) 00:48:02 ID:???
そんなの使っても何もいいことないですよ
394 ：Name_Not_Found：2008/06/30(月) 00:52:26 ID:???
>>393
たのしいよ！いいことは文法上正しくなるし、余計なIDが減ると思えばいいよ！
395 ：Name_Not_Found：2008/06/30(月) 00:52:57 ID:???
emは最近やたら使うな俺
396 ：Name_Not_Found：2008/06/30(月) 00:53:01 ID:???
>>393
Microformatsに対応させておけばWebブラウジングが快適になるよ
397 ：Name_Not_Found：2008/06/30(月) 00:57:18 ID:???
はいはい
398 ：Name_Not_Found：2008/06/30(月) 05:56:38 ID:???
Microformatsなんて普及しない
399 ：Name_Not_Found：2008/06/30(月) 06:46:00 ID:???
>>398
面白いことを言うね

ttp://microformats.org/wiki/implementations
これだけ対応してるのに？
400 ：Name_Not_Found：2008/06/30(月) 06:59:51 ID:???
ＩＥとFxが標準対応してない時点で何の意味も無い
401 ：Name_Not_Found：2008/06/30(月) 09:55:07 ID:???
スレ違いじゃね？
そういやMicroformatsスレってありそうでないんだね。
セマンティック・ウェブスレならあるけれど。
402 ：Name_Not_Found：2008/06/30(月) 12:56:11 ID:???
<hr>を使うと上下に空白が出来てうっとうしいでしょ？
スタイルシートで消すことは出来るけど、それも面倒だし、
ＩＥとFirefoxの両者で同じように消すことは出来ないよね？

だったら、<div>か<p>を使って
スタイルシートで下側にボーダーを引けばスマートに解決
ブラウザ間の互換性も一発で解決

border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #000000;

だから、<hr>っていらないよね。
というかすでに廃止される予定になっております。
403 ：Name_Not_Found：2008/06/30(月) 13:25:49 ID:???
スマート(笑)
404 ：Name_Not_Found：2008/06/30(月) 16:11:21 ID:???
>>402
知ってました
405 ：Name_Not_Found：2008/06/30(月) 16:24:29 ID:???
>>402
XHTMLならseparator要素がまんまだし
HTML5ならパラグラフレベルでの主題変化を表すから
実質なくならない
406 ：Name_Not_Found：2008/06/30(月) 16:29:50 ID:???
>>402
marginとpaddingプロパティの初期化は基本だし、display: noneでどっちでも消せるだろ
何が言いたいんだか
407 ：Name_Not_Found：2008/06/30(月) 16:59:51 ID:???
hrのdisplayは目から鱗です
408 ：Name_Not_Found：2008/06/30(月) 21:09:48 ID:qHqGlWzz
背景画像じゃなくテキスト画像を横方向に繰り返しするタグは
どのようになりますか。
サンプルをお願いします
409 ：Name_Not_Found：2008/06/30(月) 21:12:27 ID:???
ｈｒはＣＳＳの無い環境を考慮した場合必須
410 ：Name_Not_Found：2008/06/30(月) 21:16:15 ID:???
>>408
日本語を話してくれ
テキストの画像って何だ？
411 ：Name_Not_Found：2008/06/30(月) 21:19:13 ID:???
imgの画像を自動リピートするようなものはない
背景画像にしてリピートさせろ
あとはググレ
412 ：Name_Not_Found：2008/06/30(月) 22:10:28 ID:qHqGlWzz
>>410
imgの画像

>>411
ありがと
413 ：Name_Not_Found：2008/07/01(火) 12:04:31 ID:???
テキスト画像
imgの画像

　　おら、頭が痛くなってきたずら・・・
414 ：Name_Not_Found：2008/07/01(火) 12:15:20 ID:???
初心者スレに長いこといるとよっぽど変なこと言い出さない限りエスパー出来る
415 ：Name_Not_Found：2008/07/01(火) 13:40:13 ID:RRWfGZKt
ロールオーバーするタブを二つ作ってみたくて、それぞれ
ノーマル時、マウスオーバ時、クリック時、選択された時用の4つを縦1枚の画像に
したものを用意して、a, a:hover, a:active, a:visitedで（縦に0,-30,-60,-90px移動という感じで）
ロールオーバーするするようにしたのですが、最後のクリックして選択した時の画像が
なぜがうまくいかず、最初のノーマル時の絵が出てしまいます
最後にクリックして選択された時に、-90px目で用意している画像で固定されるには
どうすればいいでしょうか？


416 ：Name_Not_Found：2008/07/01(火) 14:17:17 ID:???
a:link
a:visited
a:hover
a:active
の順で記述
417 ：Name_Not_Found：2008/07/01(火) 17:18:43 ID:Ju7lwt/u
/*read.php*/
header("Content-type:application/xhtml+xml; charset=utf-8");
以下html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>test page</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
<h1>test page</h1>
<p>ちょっとだけよーん</p>
</body>
</html>

/*style.css その1*/
*{margin:0; padding:0; border:0; font-size:100%;}
body{background-color:#f9f7ed;}

/*style.css その2*/
*{margin:0; padding:0; border:0; font-size:100%; background-color:#f9f7ed;}
body{}

とした場合Safari3で「style.css その2」の時はbackground-colorはページ全体を塗りつぶしますが
「style.css その1」の時は<p>ちょっとだけよーん</p>の下から塗りつぶしてくれず白（無色）のままです。
FirefoxやIE7ではページ全体を塗りつぶしてくれます。恐らくバグだと思うのですが
bodyへbackground-colorをする方法はないでしょうか？
418 ：Name_Not_Found：2008/07/01(火) 18:02:25 ID:???
>>417
windowsのsafari3.1.2だけど、その1でも背景に色が付いてる

その2の場合、*で指定してあるのでhtml要素にも背景色が付いてるせいで
ページ全体に色が付いてるのかも。

というか、bodyに書いちゃだめなの？
419 ：Name_Not_Found：2008/07/01(火) 18:07:13 ID:???
>>417
body { background-color: #f9f7ed; height: 100%; }

これだとどうなる？
420 ：Name_Not_Found：2008/07/01(火) 18:58:04 ID:Ju7lwt/u
レスありがとう。1・2ともにheader("Content-type:application/xhtml+xml; charset=utf-8"); を
送らなければ問題なく背景色は全塗りされるんですが、
headerを送るとダメです。>>419さんのを試して見ましたが変わらず中途半端な背景色のままです。
>>417さんの「その1」でも背景も全部色が付いていると言うこのとようですが
headerでapplication/xhtml+xml を送っての事でしょうか？ 上でも書いたのですが送らなければ（text/htmlな状態だと）
その1・その2いずれも問題ないのです。
＞というか、bodyに書いちゃだめなの？
はい。bodyへ書きたいんです～
421 ：Name_Not_Found：2008/07/01(火) 19:00:01 ID:???
>>417
htmlだけで検証したのかよ？再現しないぞ。
php側で妙な制御してるんだろ。
422 ：Name_Not_Found：2008/07/01(火) 19:04:03 ID:???
>>420
phpの話なんか知らねーよ。webprog板池。
423 ：Name_Not_Found：2008/07/01(火) 19:19:56 ID:???
レスありがとう。
>>422さん
phpと言うかheaderですよ。
レスポンスヘッダをapplication/xhtml+xmlにしたいので(xhtmlなので）
headerでapplication/xhtml+xmlを送ってるだけです。
htmlに直接<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />としただけではレスポンスヘッダは変えれないので。

>>421さん
上記の理由でhtmlだけだとレスポンスヘッダーがapplication/xhtml+xmlにならないのでこの問題は起きないようです。

cssの問題ではなくsafari自身の問題のようなのでこれで失礼します。

424 ：Name_Not_Found：2008/07/01(火) 19:38:15 ID:???
>>423
header関数はphpやPerlで使うって事くらい知っとるわ。
フツーにhtml書いてる人に関係ねえんだよ。
だから板違いって言ってんのに、なんて頭カタいんだろね。
425 ：Name_Not_Found：2008/07/01(火) 19:41:57 ID:???
まあまあ。プログラマなんてそんなモンだし、
イタチの最後っ屁ってやつさ。
426 ：Name_Not_Found：2008/07/01(火) 19:47:45 ID:???
> htmlだけだとレスポンスヘッダーがapplication/xhtml+xmlにならない

することもできる。
というか変な設定のサーバーをあてがわれて悩んだことがある。
427 ：Name_Not_Found：2008/07/01(火) 20:26:36 ID:???
application/xhtml+xml
これを使わないのは基礎だと思うんだが
428 ：Name_Not_Found：2008/07/01(火) 20:27:38 ID:???
application/xhtml+xmlじゃないXHTMLなんてクソ同然だろ……
429 ：Name_Not_Found：2008/07/01(火) 20:29:50 ID:???
そう思うならやめればいい
430 ：Name_Not_Found：2008/07/01(火) 21:04:30 ID:???
application/xhtml+xml じゃないxhtmlなんてありえないですから；；
あ、ieの方でしたか・・・あはぁはぁはははぁぁ
431 ：Name_Not_Found：2008/07/01(火) 21:08:33 ID:???
>>417
バグではなく仕様だよ。
> For HTML documents whose root HTML element has computed values of
> 'transparent' for 'background-color' and 'none' for
> 'background-image', user agents must instead use the computed value of
> those properties from that HTML element's first BODY element child
> when painting backgrounds for the canvas, and must not paint a
> background for that BODY element. Such backgrounds must also be
> anchored at the same point as they would be if they were painted only
> for the root element. This does not apply to XHTML documents.
http://www.w3.org/TR/CSS21/colors.html#background
body要素の背景がキャンバス全体を描画するのはHTMLだけの特例とされている
わけだけれど、これは仕様変更があるかもしれない。

>>418
拡張子を.xhtmlにすると再現できるはず。
432 ：Name_Not_Found：2008/07/01(火) 21:12:34 ID:SuiV9Oba
正方形の画像を長方形に見せる…というか、youtubeの動画のサムネイルみたいに
切り抜いてるように見せる方法はないでしょうか？（CSSで）
divの背景画像として指定し、ポジションを中央にしてそのdivのサイズを画像のタテヨコよりも
小さくすれば出来るかなと思いましたが、背景画像として扱わない方法があれば
知りたいと思っています。
どなたかｱﾄﾞﾊﾞｲｽお願いします
433 ：Name_Not_Found：2008/07/01(火) 21:16:03 ID:???
>>431
safariの問題じゃなくcssの仕様って事ですか。firefoxでは問題ないって事は
firefoxではごまかしてくれてるのかな？
こちらのテストでIEで起きないのはIEはapplication/xhtml+xmlを理解出来ないのでtext/htmlをheaderで出してるからですね。
少しその辺で対策考えてみます。調べていただきありがとうございました。
434 ：Name_Not_Found：2008/07/01(火) 21:25:15 ID:???
>>432
clipプロパティというなかなか不便なプロパティがあるよ。
435 ：Name_Not_Found：2008/07/01(火) 21:26:18 ID:???
>>432
画像をトリミングした方が早いと
436 ：Name_Not_Found：2008/07/01(火) 21:29:03 ID:???
>>432

clip
437 ：Name_Not_Found：2008/07/01(火) 21:53:53 ID:???
clipってのがあるんですね　知らなかった！
ありがとうございました
438 ：Name_Not_Found：2008/07/02(水) 01:56:33 ID:???
safariでブログ画面一番下に余白を入れたいんですが
margin: 10px 10px;では効きません
firefoxではちゃんと効いてるんですが…
何か方法はありませんでしょうか？
439 ：Name_Not_Found：2008/07/02(水) 02:32:17 ID:???
>>438
ブログの質問はブログ板
440 ：Name_Not_Found：2008/07/02(水) 07:29:24 ID:lVupFM/n
ただ余白が欲しいなら
パッヂィングにしてみるとか
441 ：Name_Not_Found：2008/07/02(水) 13:52:30 ID:???
>>438
ブラウザ互換を目指すならそろそろmarginは卒業した方がいい。

position: relative;
top: 10px;

を使って開始位置を指定し


下側の余白は、

height: 30px;

で縦幅を指定
442 ：441：2008/07/02(水) 13:59:29 ID:???
>>441は、縦幅が30pxの範囲の
上から10px目から表示を開始させるスタイルシートです。

例：
div {
　　margin: 0px auto;
　　clear : both ;
　　position: relative;
　　top: 10px;
　　left: 20px;
　　width: 100px;
　　height: 60px;
}

上記のCSSは100px×60pxのブロック要素の中の
上から10px、左から20px目から表示を開始させよという命令
さらに本体のブロック要素はセンタリング
443 ：441：2008/07/02(水) 14:09:48 ID:???
間違えました・・

HTMLソース
<div><span>あいうえお</span></div>

スタイルシート
div {
margin: 0px auto;
clear : both ;
width: 100px;
height: 60px;
background-color: #0000ff;
}
span {
position: relative;
top: 10px;
left: 20px;
}

こっちが正解
444 ：Name_Not_Found：2008/07/02(水) 19:24:40 ID:1QQX2MOR
なんで<span>なんだか説明しろ。
445 ：Name_Not_Found：2008/07/02(水) 19:43:21 ID:???
>>444
かまうなよ
446 ：Name_Not_Found：2008/07/02(水) 19:43:29 ID:???
　　γ´ ￣ `ヽ
　　 |ノﾉﾉ人))〉∩
　　ノ◎ ﾟ ヮﾟﾉ彡　 ｡、 ｽﾊﾟｰﾝ
　　　　　⊂彡☆))Д´） >>444
447 ：Name_Not_Found：2008/07/02(水) 20:09:52 ID:???
もっとぶって！
448 ：Name_Not_Found：2008/07/02(水) 21:05:11 ID:???
>>440-443
ありがとうございます！
これから修正に次ぐ修正を試してみますね
449 ：Name_Not_Found：2008/07/02(水) 21:21:03 ID:t2mDmNrj
インターネット閲覧ソフトのＩＥ７でposition:fixed;が上手く表示されないけど、正常にする方法は？
450 ：Name_Not_Found：2008/07/02(水) 21:22:27 ID:???
>>449
absolute
451 ：Name_Not_Found：2008/07/02(水) 21:37:35 ID:???
>>449

標準モードにする
452 ：Name_Not_Found：2008/07/02(水) 23:13:13 ID:f06YDclM
ＩＥ７という糞ブラウザを捨てる
FxとかSafariに乗り換える
453 ：Name_Not_Found：2008/07/02(水) 23:20:59 ID:Cb7HbqSQ
>>450
absoluteだとスクロールで一緒に動くから困る


454 ：Name_Not_Found：2008/07/02(水) 23:32:16 ID:???
fixed.jsでググr
455 ：Name_Not_Found：2008/07/03(木) 01:05:47 ID:???
fixed.jsでスクロールした時にFixした要素がガタつくのって
回避方法あります？
456 ：Name_Not_Found：2008/07/03(木) 01:07:28 ID:???
CSS と filter だけで出来る。
457 ：Name_Not_Found：2008/07/03(木) 03:10:24 ID:WgXkTa1b
罫線なんですけど、
背景白の場合に線を引いたって感じではなくて、
へこんだ感じの線にするにはどう指定すればいいですか？
458 ：Name_Not_Found：2008/07/03(木) 03:33:55 ID:???
へこんだ感じなら、まず左と上に影がつく。くぼみに対しての影だ。
で、側面に光が当たるから、右と下はちょっと明るくなる。

光
　　　影
　　影□明
　　　明

∇←これがくぼんで見えるのも、左側に影があるように見えるから。
あとはborderとbackgroundを使ってがんばればい。
459 ：Name_Not_Found：2008/07/03(木) 04:00:52 ID:???
そして、今日も冗長なゴミスタイルが生成されるのであった…めでたし。めでたし。
460 ：Name_Not_Found：2008/07/03(木) 04:01:37 ID:WgXkTa1b
>>458
詳しくありがとうございます。
テーブルとかではなくてhrをそういう線にしたいんですけど、

タイトル
ーーーーーーーーーーーーーーーーー
ここに記事


ーーーーーーーーーーーーーーーーー
日付

みたいな区切り線をそうしたい場合の指定の仕方が分かりません。
色んなサイトでよく見かけるんですけど、
いざ見たい時には見つからなくてソースが分からず。
よろしくお願いします。
461 ：Name_Not_Found：2008/07/03(木) 04:20:56 ID:???
またhrかよ
462 ：Name_Not_Found：2008/07/03(木) 05:06:57 ID:???
>>460
ほれ

<hr>
<hn class="text_title">タイトル</hn>
<hr>
<p class="text">ほにゃららら</p>
<hr>
<p class="text_date">日付</p>
<hr>

hr {
display:none;
}

hn.text_title {
border-bottom:1px dashed #000;
}

p.text_date {
border-top:1px dashed #000;
}

こんな感じになる
でも、hn要素とp要素はどう見てもぶった切っちゃまずいだろうから、ナンセンスだと思うんだが
装飾目的であれば、hr要素は使いたくないんだけど、弱小端末相手にはhrって有効なんだよなあ
463 ：Name_Not_Found：2008/07/03(木) 05:38:04 ID:YO8XrEKM
<table id="hoge">
<tr><td>a</td><td>b</td>
</table>

<table id="moge">
<tr><td>a</td><td>b</td>
</table>

とあったとき、
table"hoge"の中のtdにだけ文字色やボーダーなどの属性を設定することは可能でしょうか。
464 ：Name_Not_Found：2008/07/03(木) 05:39:20 ID:???
>>463
すみません自己解決しました
465 ：Name_Not_Found：2008/07/03(木) 06:10:08 ID:WgXkTa1b
>>462
ありがとうございます
でもこれだと点線、、、
へこんだ感じというのは色が重要ポイントだと思うんですが、
あれってどうやってるんだろう、、、二重線にして立体的に見せてる感じなんでしょうか
装飾目的なんですけどhrはよくないんですか？
466 ：Name_Not_Found：2008/07/03(木) 06:15:33 ID:LYtrJ+99
>>454
headタグ内に <script type="text/javascript" src="fixed.js" ></script >


<style type="text/css">
<!--

.img1 {
position: fixed;
z-index: 0;
top: 0px;
left: 0px;
border: 0px #f00 solid;
}
//-->
</style>

bodyタグ内に
<img src=".jpg" class="img1">

固定できず
467 ：Name_Not_Found：2008/07/03(木) 07:59:09 ID:???
もう面倒だから

────────────────────────
↑
これ使えｗ
468 ：Name_Not_Found：2008/07/03(木) 08:07:38 ID:???
>>465
それをやってる実際のサイトをみせろ
469 ：Name_Not_Found：2008/07/03(木) 08:15:14 ID:???
普通にｈｒ使えばいい
strictなんて糞くらえ
470 ：Name_Not_Found：2008/07/03(木) 08:17:14 ID:???
jpgでおｋ
471 ：Name_Not_Found：2008/07/03(木) 08:21:45 ID:???
>>466
http://www.google.co.jp/search?hl=ja&q=CSS+%E6%93%AC%E4%BC%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=
472 ：Name_Not_Found：2008/07/03(木) 12:56:46 ID:MKm1EkQN
>>465
この場合のソースでhrは普通使わない。hnとかpにborderを指定する。
立体的にしたいならdashedじゃなくてridgeとかgrooveを使えばいい。

もしくはborderじゃなくて画像使ってbackgournd-image指定するとか。
473 ：Name_Not_Found：2008/07/03(木) 13:22:09 ID:???
やっぱさhr無理に使うより、pにborderやったほうがいいな。
474 ：Name_Not_Found：2008/07/03(木) 15:36:11 ID:???
おまいら頭悪くね　?
hrにborderで全ブラウザOKだぜ。
475 ：Name_Not_Found：2008/07/03(木) 16:23:13 ID:???
というかこれ嗜好の問題で片付けているけど
きちっと設計するならhr使える場面は多いぜ？

pとかにborderを使うのは、慣例的なもので
推奨できるものじゃない。
476 ：Name_Not_Found：2008/07/03(木) 17:38:20 ID:???
見出しと本文の間にhrが入るなんてありえないだろｊｋ
477 ：Name_Not_Found：2008/07/03(木) 17:46:07 ID:???
うん。それが慣例の場面であって、使える場面と使えない場面の違いだろ？
いくらいってもこの子はhrを使いたいみたいだし、hrを使いたいなら
つかえばいいだけじゃないかな。



478 ：Name_Not_Found：2008/07/03(木) 17:52:52 ID:PpQpnGfC
classの<p>文章だけ、文章の最後に指定した分の空白を開けたいときは
外部のcssにkuuhaku { bottom-margin:1em;}でOKなのでしょうか？

<p class="kuuhaku">これはテストの文章です<p>
<p>次の文章</p>

これで何も変化が無かったで何か間違っていればアドバイスお願いいたします。
479 ：Name_Not_Found：2008/07/03(木) 18:00:39 ID:???
padding-bottom
480 ：Name_Not_Found：2008/07/03(木) 18:14:01 ID:???
bottom-marginはない。
>>479がいい。
481 ：Name_Not_Found：2008/07/03(木) 19:58:18 ID:???
>>479-480
できました。ありがとうございました！
482 ：Name_Not_Found：2008/07/03(木) 21:03:00 ID:???
全称セレクタでborder:none;の時、
Horizontal Ruleはブラウザ毎に表示・非表示する挙動を示しますか？
483 ：Name_Not_Found：2008/07/03(木) 21:19:00 ID:???
IEは表示するだろ。
484 ：482：2008/07/03(木) 21:34:45 ID:???
>>483
ブラウザ依存なのですかね？

もうひとつ。
IE7でDIVを
display: inline;にして、
overflow-x:hidden; overflow-y:scroll;にすると、
scrollbarが正常に動作しないケースがありますか？
485 ：Name_Not_Found：2008/07/03(木) 21:38:41 ID:???
overflow-x:hiddenいらね
486 ：482：2008/07/03(木) 21:47:42 ID:???
>>485
overflow-x:hidden;指定しないと横軸barが出て、自動改行しなくなりませんか？
IE
487 ：Name_Not_Found：2008/07/03(木) 21:57:10 ID:???
どのブラウザにあわせたいか教えてくださいな。
取り合えずIE７を目指していると判断したので、外すように書きましたよ。
488 ：Name_Not_Found：2008/07/03(木) 22:04:41 ID:???
inilineにoverflowなんか効かないんだよ。IEはoverflow指定されると勝手にinline-blockにしてるだけ。
489 ：482：2008/07/03(木) 22:08:57 ID:???
>>487
ごめんなさい＾＾；
overflow-xはIE独自のものらしいので、
できる限りの話なんですけど、
なるべく同じ見た目をめざしているんですが、
せめてIE7、Fx3.0、Safari3.1.2だけでも同じようにしたいです。

↑日本語変だな＾＾；
490 ：Name_Not_Found：2008/07/03(木) 22:13:52 ID:???
じゃあこんな？

#hoge {
overflow-x:hidden;
overflow-y:scroll;
}
*:first-child+html #hoge {
overflow-y:scroll;
}
491 ：482：2008/07/03(木) 22:15:03 ID:???
>>488
inline-block！

調べます。ありがと＾＾

clearfixとか出てきた＾＾；
492 ：482：2008/07/03(木) 22:18:47 ID:???
>>490
ハックも合わせて調べてみます。ありがと
493 ：Name_Not_Found：2008/07/03(木) 22:34:45 ID:hneVi5Co
>>471
画像を固定したいだよね。それも背景じゃないほうで
494 ：Name_Not_Found：2008/07/04(金) 07:50:49 ID:/UeyYkFR
CSSは後に指定したものが適用されるけど読み込む順番としては
meta link先の別ファイルＣＳＳ→head style→属性style
これであってますか？
495 ：Name_Not_Found：2008/07/04(金) 14:33:21 ID:???
読み込む順番はHTMLファイル→link要素で指定されたCSSファイル。

どっちが優先されるのかは
> HTML文書ではスタイルをlink要素もしくはstyle要素で適用でき，これらが
> 競合します。一般的な実装ではstyle要素の中身のほうを後にあると見做し，
> 外部スタイルの宣言より優先されます； ただし仕様書では明言されません。
http://hp.vector.co.jp/authors/VA022006/css/cascade.html#cascading-order
ということらしいよ。
496 ：Name_Not_Found：2008/07/04(金) 16:53:28 ID:/UeyYkFR
すいません日本語おかしかったです
適用される順番です
一応>>494でいいのかな
ありがとう
497 ：Name_Not_Found：2008/07/04(金) 23:10:42 ID:???
適用される規則は「カスケーディング」で決まるので、それについて
調べてみると理解が深まるかも。>>495のリンク先に書いてある。
498 ：Name_Not_Found：2008/07/05(土) 18:48:41 ID:???
ttp://pc11.2ch.net/test/read.cgi/hp/1212031089/から移動してきました。

質問させてください。
下記のようなリンクが複数(可変)あります。
なお画像１A、２A・・・のサイズは不定となっております。

－－－－－－－－－－－－－－－
｜画像１A｜画像１B｜テキスト１｜←この行で一つのリンクとなります。
－－－－－－－－－－－－－－－
｜画像２A｜画像２B｜テキスト２｜←この行で一つのリンクとなります。
－－－－－－－－－－－－－－－
｜画像３A｜画像３B｜テキスト３｜←この行で一つのリンクとなります。
－－－－－－－－－－－－－－－

画像１A、画像１B、テキスト１のどれかにマウスオーバー時、画像１Bの画像とテキスト１の文字色を変更したいと思います。

今の所、JavaScriptスレでアドバイスを頂き、下記のソースがあるのですが、こちらのソースでは下記の問題があります。
・IE6…マウスオーバーでテキスト1の文字色しか変化しません(画像1Bの画像がさしかわりません)。
・Firefox2…通常時は矢印画像が表示されず、マウスオーバーで矢印が表示され文字色が変化します。
499 ：Name_Not_Found：2008/07/05(土) 18:50:31 ID:???
>>498の続きです。
<html>
<head>
<title>title</title>
<style type="text/css">
<!--
img {border:0;}
a { text-decoration:none;}
a.foo:hover { color: red; }
a.foo:hover > img.bar { display: none; }
a.foo:hover > img.baz { display: inline; }
a.foo > img.baz { display: none; }
-->
</style>
</head>
<body>
<a href="index.html" class="foo"><img src="img/kiku.jpg" alt="キク" width="200" height="100">
<img src="img/arrow.gif" alt="" width="13" height="13" class="bar baz">キク</a>
</body>
</html>

その為、上記ソースに下記の機能を付加させたいと思っています。
・矢印画像は通常時、マウスオーバー時ともに表示させ、マウスオーバー時には画像を変化させたいです。
・IE6,IE7,Firefox2で動作してほしいです。

どうかよろしくお願いします。
500 ：Name_Not_Found：2008/07/05(土) 19:30:32 ID:???
>>498
まず、htmlの基礎を勉強しろ。
次に、JavaScriptでやりたいのか、cssでやりたいのか、はっきりしろ。

今のいい加減なhtmlからして、scriptから入ったタイプなんだろうし、
JavaScript手取り足取りスレで最後まで面倒見てもらえよ。
501 ：Name_Not_Found：2008/07/05(土) 20:33:49 ID:???
JavaScriptスレからきました
>>498
<html><head><title>title</title><style type="text/css">
img { border-style: none; }
.link a:hover { color: red; }
.link a:hover .subA { display: none; }
.link a:hover .subB { display: inline; }
.subA, .subB { width: 13px; height: 13px; }
.subB { display: none; }
</style></head><body><ul class="link">
  <li><a href="index.html">
    <img class="main" src="img/foo.jpg" alt="foo">
    <img class="subA" src="img/arrowA.gif" alt="→">
    <img class="subB" src="img/arrowB.gif" alt="→">
    foo
  </a></li>
  <li><a href="page1.html">
    <img class="main" src="img/bar.jpg" alt="bar">
    <img class="subA" src="img/arrowA.gif" alt="→">
    <img class="subB" src="img/arrowB.gif" alt="→">
    bar
  </a></li>
  <li><a href="page2.html">
    <img class="main" src="img/baz.jpg" alt="baz">
    <img class="subA" src="img/arrowA.gif" alt="→">
    <img class="subB" src="img/arrowB.gif" alt="→">
    baz
  </a></li>
</ul></body></html>
502 ：Name_Not_Found：2008/07/05(土) 21:47:54 ID:???
スレ違いは出てけ
503 ：Name_Not_Found：2008/07/05(土) 21:58:41 ID:???
つまり>>501が中途半端に誘導したって事か。
そして糞のようなcssを教えてる、と。
基礎からやりなおしだな。
504 ：Name_Not_Found：2008/07/05(土) 23:36:21 ID:I7XwdngD
聞きたいんですが、ブラウザによって文字間ってまちまちですよね？
・そろえてますか？
・letter-spacing　を使っていて困ったこととかありますか？
　（注意点などあるんでしょうか？）
505 ：Name_Not_Found：2008/07/05(土) 23:40:50 ID:???
>>501
ご足労いただきありがとうございます。
ソースの方ためさせていただきました。
Firefox2での動作はこれで完璧です。
ただ、IE6ではマウスオーバーした所、下記の現象が出ました。
・arrowA.gifが消えませんでした。
・テキストが左に動いてしまいました。

どうもdisplay:noneやdisplay:inlineがIE6でうまく認識されていないようなのですが、
こちらの回避法をご存知でしたらご指導いただければと思います。

>>500
> htmlの基礎を勉強しろ。
これが何を指してるのか不明ですが、
ttp://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
で100点にならないソースという意味ですか？
それいう意味なら単に行数削減の為に、動作確認が取れる最低限の記述量に削っただけです。
普段はXHTML 1.0 Strictに準拠した記述をしています。

> JavaScriptでやりたいのか、cssでやりたいのか、はっきりしろ。
機能が実現できればどちらでも良いですが、可能であればcssのみで実現させたいです。
本件はJavaScriptがないと難しいと思ったので、JavaScriptスレに書き込みましたが、cssのみで実現可能みたいなのでこちらに移動しました。

とりあえず>>501のソースより確かにcssのみで実現出来そう(少なくともFirefox2は>>501のソースでOK)な為、こちらのスレのほうが適切な感じです。

引き続きよろしくお願いします。
506 ：Name_Not_Found：2008/07/06(日) 00:16:08 ID:???
スレ違いを覚悟で
strictな方向ならalt=""やalt="→"はありえないし、body要素の直下にa要素はもっとありえない
さらにいうと、直下にdiv要素がくればいい問題でもない。divに意味はないから明示できる要素じゃないとだめ
p要素なら正しいとかul要素が正しいとか一概に言えない。文書を見て判断するからね
で、CSSは正確な文書の装飾を簡便にするための代物
CSSを選ぶ必要があるのか、考え直せ。だから勉強しなおせといわれたのさ
レイアウトをこの先ずっと同じにするつもりなら、別にテーブルでもJSでも何でもいいんだよ
507 ：Name_Not_Found：2008/07/06(日) 00:20:48 ID:???
>>504
好きにすればいいわ。

>>505
あのね、ソース出せってのはね、そいつのレベルを見るって重要な意味があんの。
行数削減とか勝手に言ってるけど、長々書いてるあんたの意味不明文章を
まず何とかしろってことよ。
それからね、>>501のソース間違ってるわけ。糞と言われても仕方ないわ。
508 ：Name_Not_Found：2008/07/06(日) 00:27:15 ID:???
498です。
>>501のソースを元に、綺麗に整形した所IE6でも希望の動作となりました。
どうもありがとうございました。
509 ：Name_Not_Found：2008/07/06(日) 00:31:43 ID:???
>>505
それからね、cssでやるなら背景画像にして動かすのが一般的なのよ。
imgでゴリゴリやろうって考え方が、JS的よねー。
あんたにはそっちの方が向いてると思うわー。
510 ：Name_Not_Found：2008/07/06(日) 00:43:01 ID:???
>>509
普段は背景画像として書いてます。
下のサイトのように。
ttp://hac-design.com/css/rollover.html

ただ>>498に要望を書きましたけど、
> なお画像１A、２A・・・のサイズは不定となっております。
というのを満たすのに背景画像でどう実現すればよいか分かりませんでした。
>>501は私の文章から私の要望を汲み取り、きちんと動く物を作ってくれました。

>>506、>>507、>>509
>>501のソースは私の要望を満たすものでありますが、それより良い記述方法があるようでしたら、ソースを例示していただければと思います。
511 ：Name_Not_Found：2008/07/06(日) 00:48:17 ID:???
不定というのはCGIカウンターか何かかな？
桁が増えたり字を変えたりすれば画像サイズは変動するからね
そうだとしたら、背景画像はまず無理。あきらめなさいとしかいえない
512 ：Name_Not_Found：2008/07/06(日) 00:55:38 ID:???
>>510
いつまでもうるせーよ。
Aの画像を動かすわけじゃあるまいし、全く関係ないだろが。
知ってんならやれってんだボケ。
大体、お前の判りにくい長文からお前の要望をわざわざ汲み取る義理がどこにある。
まともな説明も出来ないくせに王様かよ図々しい。
513 ：Name_Not_Found：2008/07/06(日) 00:57:25 ID:???
>>510
もう一度スレ違いを承知で書く
たとえばロールオーバーもそうだけれど、CSSでやると
a要素をブロックに、img要素をインラインに、:hoverを非表示に……
とかごちゃごちゃやる。で、これはナンセンスだって俺は書いているんだ
難しいことはまずやらない。簡便なものを採用する
別に難しいことをやっても構わない。でも、ごちゃごちゃいじるということは無理が生じているでしょ
当然、ブラウザ間で齟齬も発生する確率が高くなる。なるべく勉強してできる範囲のしたらどうでしょ？と
514 ：Name_Not_Found：2008/07/06(日) 03:06:00 ID:???
>>513
おっしゃることは了解いたしました。
確かにそうだと思います。
ただ私にとってcssが一番敷居が低かったりします。
他に簡単な方法があればそちらを採用したいのですが。

>>512
> Aの画像を動かすわけじゃあるまいし、全く関係ないだろが。
具体的にどこがどう関係ないか教えてもらえませんか？

> 大体、お前の判りにくい長文からお前の要望をわざわざ汲み取る義理がどこにある。
もちろんないです。

ここの>>1に
> ※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
と書いてあったので、それに従ったつもりではいますが。

もっとも本件が
>>498の文章が分かりにくいのを>>501がエスパー級の能力で解決したのか、
>>512の日本語読解力に問題があるのか
は、スレを見た人が判断することですが。

それと本件は>>501ですでに解決しているので、closeということでいいのですが、
>>510にも書きましたけど、そこまで言うならソースを書いてください。
>>501を貼り付けて、適当な画像を用意してリネームすれば動作します。
そのソースが間違っているというのであれば、どこがどう間違っているのが、理論ではなくソースで示してください。



ちなみに本気にはしないでください。
期待してないので。
ネットには口だけ番長がそこかしこにいますし。
515 ：Name_Not_Found：2008/07/06(日) 03:19:14 ID:???
馬鹿はどこまでも馬鹿なんですね。
516 ：Name_Not_Found：2008/07/06(日) 03:55:18 ID:???
>>514
＞具体的にどこがどう関係ないか教えてもらえませんか？
どこがどう関係あるのか教えろよ。
517 ：Name_Not_Found：2008/07/06(日) 04:18:20 ID:???
>>514
敷居が低いとかわけのわからん言葉を使うな。辞書引いてから書き込め
画像が装飾なのか明示すべきデーターなのかで別なんだが(だから明示できないんだけど？)
装飾とみなして、ソース書くよ。無茶苦茶な前提をよこすなと書いたんだが
518 ：Name_Not_Found：2008/07/06(日) 04:22:47 ID:???
* {
margin:0;
padding:0;
border:none;
text-decoration:none;
list-style-type:none;
}
#Hoge01 {
display:block;
height:hoge;
width:hoge;
padding:hoge;
border:1px solid #000;
}
#Hoge01:link {
background:#fff url(hoge01) no-repeat left;
color:#000;
}
#Hoge01:visited {
background:#fff url(hoge01) no-repeat left;
color:#000;
}
#Hoge01:active {
background:#fff url(hoge02) no-repeat left;
color:#999;
}
#Hoge01:hover {
background:#fff url(hoge02) no-repeat left;
color:#999;
}
519 ：Name_Not_Found：2008/07/06(日) 04:23:07 ID:???
<ul>
<li><a href="hoge" id="Hoge01">hoge</a></li>
<li><a href="hoge" id="Hoge02">hoge</a></li>
<li><a href="hoge" id="Hoge03">hoge</a></li>
</ul>
520 ：Name_Not_Found：2008/07/06(日) 04:28:43 ID:???
「大きさは不定」らしいけど、背景画像をリストマークとして認識したので大きさもへったくれもないね
あくまで飛び越えるような範囲で縦横を指定しなければいいので、無茶苦茶な指定にはならないはず
画像が装飾なら、というお話で、画像を指定せよというのならStrictではお手上げ
というのも画像は縦横を指定して表示することが前提になっている

で、ID指定だけどa要素ならIEは挙動するはずだからたぶん大丈夫
a要素にID指定しても駄目なら

#Hoge01:link {
background:#fff url(hoge01) no-repeat left;
color:#000;
}
#Hoge01 a:visited {
background:#fff url(hoge01) no-repeat left;
color:#000;
}
#Hoge01 a:active {
background:#fff url(hoge02) no-repeat left;
color:#999;
}
#Hoge01 a:hover {
background:#fff url(hoge02) no-repeat left;
color:#999;
}

<li id="Hoge01"><a href="hoge">hoge</a></li>

として下さればOKなはず。というかborder:1px solid #000;は要らないね
521 ：Name_Not_Found：2008/07/06(日) 04:34:56 ID:???
ごめん素でボケてる。疲れてるのかね

#Hoge01{
padding:hoge;
}

ではなく

#Hoge01:link {
padding:hoge;

#Hoge01 a:link {
padding:hoge;
以下略

だわ……がちゃがちゃと文の位置を指定してやって
522 ：Name_Not_Found：2008/07/06(日) 04:49:47 ID:???
>>521
そんなに恐縮する必要はないぜ。
>>514は>>510によると、普段は:hoverに背景画像を使ってるそうだから、
このくらいのソースは軽く書けるわけだし。

次スレから>>1に
・質問者は名前欄に最初のレス番号を書く
って入れてほしいね。
523 ：498：2008/07/06(日) 05:59:10 ID:???
>>517
移動前のスレにはもう少し詳細を書いてますが、下記となります。
http://pc11.2ch.net/test/read.cgi/hp/1212031089/701

> なお上記の画像などの中身には下記が入ります。
> 画像１A・・・花の写真
> 画像１B・・・矢印画像
> テキスト１・・・花の名前

その為、>>498の画像１A、画像２A、画像３Aの部分には、キクとかタンポポとかの画像が入ります。
そしてその画像のサイズは不定となります(100x50の場合もあれば、200x70の場合もあります。もっとも800x600とかそういう極端にサイズが違うことはないです)。
なので、装飾ではなく画像となります(画像１B、画像２B、画像３Bは矢印画像の為、装飾でも画像でもどちらでも良いです)。
>>501が各列の先頭の画像名をfoo.jpg, bar.jpg, baz.jpgにし、各列の2番目の画像名をarrow*.gifとしているのはそういう理由からだと思います。
なので>>520のソースは私の要望は満たしておらず、>>501が私の要望を満たしたソースとなります。
後、特にStrictにこだわっているわけではないので、Transitionalでも良いです。
524 ：498：2008/07/06(日) 06:02:47 ID:???
って、よく考えたら>>499で下記の記述をしていましたね。
>>523をソースにすると>>499の下記となります。
> <a href="index.html" class="foo"><img src="img/kiku.jpg" alt="キク" width="200" height="100">
> <img src="img/arrow.gif" alt="" width="13" height="13" class="bar baz">キク</a>

>>516
ロールオーバーを背景画像とし、画像１Bを背景画像に組み込んだのですが、画像１Aのサイズが不定の為、思い通りの位置
(画像１Aと画像１Bの間には10pxほど隙間があり、画像1Aの縦方向の真ん中の位置に画像１Bを表示したい)に来ないからです。
例えば、画像１Aを100x50という前提で背景画像の45x60の位置に矢印画像を作成したとします。
その場合、画像１Aのサイズが100x50固定ならば意図した動作となるのですが、画像１Aのサイズが100x70の場合、画像１Aの後ろに画像１Bが隠れてしまいます。
また画像１Aのサイズが200x50の場合、画像１Bは画像１Aの縦中央よりかなり上の位置に表示され不恰好です。
その為、背景に画像１Bを埋め込みa:hoverを使う手法は難しく、cssではなくJavaScriptを使う必要があると判断し、JavaScriptスレに書き込みました。
もっとも結果としてはJavaScriptスレ住人の>>501にcssだけで出来ることを教えてもらいましたが。
>>501のソースは画像１Aも画像１Bもimgタグを使用しているため、>>498の下記の仕様を対応する動作となっているものと思います。
> なお画像１A、２A・・・のサイズは不定となっております。
525 ：Name_Not_Found：2008/07/06(日) 06:33:57 ID:japDz9Sw
すみません、質問です。
win、IEでのhrの上下のスペースってどうやったら消えるんでしょう？
hr{
width:440px;
height:1px;
margin:5px 0;
padding:0;
border:none;
background:url(../img_common/dotline_grey_bg.gif);
}
上記のcssを指定していますが、5px以上のスペースがIEでのみ出てしまいます。
また、背景のドットラインも再現されません。一本線になります。
対策を知りたいです。どなたかよろしくお願いします。
526 ：Name_Not_Found：2008/07/06(日) 07:14:25 ID:japDz9Sw
ごめんなさい、もう一つ聞かせてください
フォームで、submitボタンを画像で作ってるんですが、プルダウンと横並びにした時、
ボタンのみ上にずり上がってしまい天地があいません。マージン指定してもダメでしたが
cssで解決できるんでしょうか？　画像サイズはwidth:37px height:18pxです

<form>
おすすめを見る
<select name="genre" style="margin-left:4px;">
<option value="0">サッカー</option>
<option value="1">野球</option>
<option value="1">ゴルフ</option>
</select>
<input type="image" title="さがす" src="b_searchS.gif" style="bottom; margin-top:5px;" />
</form>
527 ：Name_Not_Found：2008/07/06(日) 11:01:28 ID:???
>>523-524
その場合は見せるべき画像じゃねーかよ……img要素にするべきかよ(矢印は装飾だろうけど)
後出しじゃんけんやめてくれ。エスパーしても、別の条件ならまるで意味がないんだから

サイズ不定ならスクリプトを使うのが定石
Aの画像(サイズ決まっている)をAの条件で
Bの画像(サイズ決まっている)をBの条件で
Cの画像(サイズ決まっている)をCの条件で
読み出したいのだから普通のCSSでは土台不可能な条件
背景画像にしようにもimg要素を使おうにも無理をやっている条件なのよ

Aの条件においてAのCSSを適用、
Bの条件においてBのCSSを適用、
と考えたほうがスマート。そうすれば「サイズが不定」となる条件など存在しない
この場合は「画像をどうしたら表示？」ではなく「サイズをどうしたら固定になる？」と考えるべき
画像を表示する！　と見なしたからCSSに引っ張られたんだろ……
528 ：Name_Not_Found：2008/07/06(日) 11:03:24 ID:???
px…
529 ：Name_Not_Found：2008/07/06(日) 11:09:27 ID:???
>>525
忘れ物がありますよ　っ*
530 ：498：2008/07/06(日) 13:16:50 ID:???
>>527
>>508とかにも書いてますが、一応CSSで記述された>501がサイズ不定でも動作しますよ。
display: none;やdisplay: inline;を効果的に使ってて勉強になります。
一度試してみてください。

後、下記はおっしゃる事は確かに一理あると思いますが、それを自動的に実現する方法が分からないんですよね。
> 「サイズをどうしたら固定になる？」と考えるべき

それと下記は非現実的な話のような気がします。
> Aの条件においてAのCSSを適用、
> Bの条件においてBのCSSを適用、

これはサイズの異なる画像を追加するたびにCSSを別途記述しなおさないといけないのですか？
極端な例をあげると、30種類の花があり、その画像サイズがすべてばらばらの場合、30種類のCSSを記述しないといけないのですか？
もっといえば、1年後異なるサイズの画像を追加したいとおもったら、そのときはCSSも触らないと意図した動作にならないのですか？

例えば、>>501のソースはHTMLの部分を定型的に触るだけで、サイズの異なる画像を増やすことが出来ます。
CSSを触る必要はありません(←これはメンテナンス性を向上させる上で重要なことです)。

それと本件はJavaScriptスレの住人にはCSSのみで実現可能な範疇ととららえられたようです。
実際>>501がJavaScriptスレから出張してきてCSSのソースで動きましたし。
531 ：Name_Not_Found：2008/07/06(日) 13:29:25 ID:???
どこまでおんぶにだっこなんだい ?
532 ：Name_Not_Found：2008/07/06(日) 13:46:12 ID:???
質問します。
CSSで背景や画像などに影をつける方法などはあるのでしょうか?
533 ：Name_Not_Found：2008/07/06(日) 13:52:21 ID:???
>>532
CSS だけでは無理ですが JavaScript を併用すれば超簡単です。
534 ：Name_Not_Found：2008/07/06(日) 15:16:43 ID:???
>>530
>>501で解決したんならそれでいいだろうが。
君も言ってるが、JSスレでは詳しく説明してたんだろ。だから回答が得られた。
このスレでは、要点の定まらないダラダラした説明しか出来ず、妙なソースまで貼ったせいで、
回答は得られず、結果叩かれる羽目になった。
それだけの事だ。

あと>>501はどうみても間違ってるよ。.linkというclassがどこにあるのだろうか？
君の言うように>>501をコピーするだけで動作する、というのはウソだ。
535 ：Name_Not_Found：2008/07/06(日) 15:49:42 ID:???
>>534
><ul class="link">

ちゃんとあるやん
536 ：Name_Not_Found：2008/07/06(日) 15:52:10 ID:???
/* html */
<a href="#"><img src="image.jpg" alt="画像"><br />何か文字列</a>

/* css */
a:link, a:visited {
text-decoration : none;
}
a:hover, a:active {
text-decoration : underline;
}

全てのリンクにおいてマウスオーバー時にアンダーラインを出すようにしているのですが、
リンクタグの中に画像と文字列をおいた場合、FireFoxでは画像にもアンダーラインがでてしまいます。
文字列のみにアンダーラインを出すにはどのようにすればいいのでしょうか？
537 ：Name_Not_Found：2008/07/06(日) 15:59:34 ID:???
>>536

画像とテキストを同じ a要素に含めないようにして、classで制御すればいい。
538 ：Name_Not_Found：2008/07/06(日) 16:19:29 ID:???
>>535
こりゃすまんかった。
539 ：536：2008/07/06(日) 16:24:11 ID:???
>>537
画像と文字列をワンセットと考えていて、
画像と文字列どちらにマウスオーバーしても、文字列はアンダーライン、
画像は周囲のボーダー色を変えることを考えていたので同じ a要素に含めていました。

↓のユニクロの商品一覧みたいな感じです。
http://store.uniqlo.com/jp/CSaDisp/Mdrypolo

画像とテキストを同じ a要素に含めずにCSSのclass制御だけで
上記のような実装を実現することができるんでしょうか。

試してみます。
540 ：Name_Not_Found：2008/07/06(日) 16:28:06 ID:???
ユニクロはスクリプトでやってるじゃないの。
541 ：536：2008/07/06(日) 16:31:03 ID:???
>>540
はい、スクリプトでやっています。
ただ今回制限があって思うようにスクリプトが実装できない環境なので
できればCSSだけで実装できないものかと思っていました。

サンプルさがしたりもう少し試行錯誤してみます。
542 ：Name_Not_Found：2008/07/06(日) 16:33:08 ID:???
>>541

スクリプトを外部に出してしまえば、タグにいろいろ付けたりしなくても
実装出来ますけど。
まあスレチになるんで詳しくは書きません。
543 ：Name_Not_Found：2008/07/06(日) 16:35:19 ID:???
>>530
っ【php】でも【perl】でも【ruby】でもご自由にどうぞ
544 ：Name_Not_Found：2008/07/06(日) 16:35:26 ID:kT9J4NpW
デコレーション消してボーダーにすればいいじゃなーい
545 ：Name_Not_Found：2008/07/06(日) 16:37:46 ID:???
>>541
画像クリックでもokにするんなら、a要素に含めないわけにはいかないだろ。
それに画像のborderを変えるってのも、IEではcssだけで出来なかった気がする。
546 ：Name_Not_Found：2008/07/06(日) 16:40:00 ID:???
<style>
a { text-decoration:none }
a:hover span { text-decoration:underline }
</style>

<a href="kamichu.html">
<img src="kamichu.png" alt="xxx">
<span>かみちゅ</span>
</a>
547 ：536：2008/07/06(日) 16:41:27 ID:c74o8GSQ
>>536
＞思うようにスクリプトが実装できない環境
すみません、スクリプトを実装できない環境の間違いでした。
外部ファイルの読み込みもできません。

>>544
そういう発想もあるんですね。思いつきませんでした。
まだ初心者なもんで。。。

>>545
やはりCSSだけでは難しいんですかね。

いろいろ試してみてどうしてもできないようなら見せ方を変えてみようと思います。
ありがとうございました。
548 ：536：2008/07/06(日) 16:47:03 ID:???
>>546
FireFoxでも画像にアンダーラインが表示されません。
ただIE6ではテキストにアンダーラインが表示されていません。
リセット用のCSSなどかましているのでその影響なのかもしれませんが、
なんか教えていただいた方法でできそうなきがすます。

ありがとうございました。
549 ：Name_Not_Found：2008/07/06(日) 16:47:41 ID:???
a:link img , a:visited img , a:hover img , a:active img {
text-decoration : none;
}

ってダメなんだっけ？　IEって
ダメならボーダーだけどボーダーがいい
550 ：536：2008/07/06(日) 17:02:26 ID:???
>>546
教えていただいた方法で実現できました。

a:link {
text-decoration : none;
color: #0000FF;
}
a:visited {
text-decoration : none;
color: #FF0000;
}
a:hover {
text-decoration : none;
color: #66FF00;
}
a:active {
text-decoration : none;
color: #FF6600;
}
a:hover span.text {
text-decoration: underline;
}

<a href="#"><img src="img/item.jpg" /><br /><span class="text">かみちゅ</span></a>

ありがとうございました。
551 ：Name_Not_Found：2008/07/06(日) 20:53:34 ID:japDz9Sw
<div style="width:500px;">
<ul><li><a href="">サンプルの文章</a></li></ul>
</div>
としたとき、aタグで囲まれた「サンプルの文章」の最後の文字から右端まで
linkの効果がついてしまっています。どうしたら解決するんでしょうか？
aタグにwidthを指定しても、文章の長さによっては折り返すのでうまくいきません。
552 ：Name_Not_Found：2008/07/06(日) 21:13:14 ID:???
>>551
1コ上のレスも読めんの？
553 ：Name_Not_Found：2008/07/06(日) 21:30:58 ID:???
>>551

a { display:block } にしちゃってるんじゃないの。
やっちゃったって感じ。
554 ：Name_Not_Found：2008/07/06(日) 23:13:50 ID:???
メインの記事からはみ出た分を隠す方法ってどうすればいいんでしょうか？
555 ：Name_Not_Found：2008/07/06(日) 23:22:05 ID:???
>>554

overflow って知ってますか。
556 ：Name_Not_Found：2008/07/07(月) 17:33:47 ID:???
>>549

a img {
border:none;
}

これだけでいいんじゃね？
557 ：Name_Not_Found：2008/07/07(月) 21:44:02 ID:???
>>555
わかりません、教えてください。
私の環境だと、センターから右にはみ出ても、右かラムが上から上書きのようにして、ちゃんとテンプレートを保っているんですが、
別の環境だと、右に出た部分と右かラムが重ならないようにセンターが左に押し出され、左からラムが下に行ってしまいます。
これはなぜでしょうか？解決策を教えてください
558 ：Name_Not_Found：2008/07/07(月) 21:52:32 ID:???
左右カラムのwidth+padding/margin合計値が
それを包むboxのwidthを超えてる。
559 ：Name_Not_Found：2008/07/08(火) 11:19:11 ID:231I2cMv
<DIV>メインコンテンツ</DIV>
<DIV>フッター</DIV>
っていう構成のとき、メインコンテンツがほとんどカラみたいな状態のときも
フッターをブラウザの下まで引き伸ばしていたいです。
フッターのDIVにはどんなCSSを仕掛けるべきでしょう？
また、メインコンテンツのに最低500pxくらいの高さを常に持たせたいときは
どうしたらいいでしょうか？　よろしくお願いします。
560 ：Name_Not_Found：2008/07/08(火) 11:25:53 ID:???
div#maincontents
{min-height:500px;}
561 ：Name_Not_Found：2008/07/08(火) 11:49:32 ID:???
>>559
Web工房きくちゃんの所に行ってみそ
562 ：Name_Not_Found：2008/07/08(火) 15:37:56 ID:???
>>559
css使ってるなら、タグくらい半角英数小文字つかえよ。
たく、そんぐらい自分で調べろよ金魚の糞が( ﾟдﾟ)､ﾍﾟｯ

こんな時はmin-width、max-widthを使うのだよ。

IEの場合は認識しないからexpressionという
IE独自のダイナミックプロパティを使う。

ttp://coliss.com/articles/build-websites/operation/css/518.html

あとはieFixed.htcというのも使えるけどググれカレー
べっべつにあんたの為に教えてるんじゃないんだからね/////かっ勘違いしないでよ////
563 ：Name_Not_Found：2008/07/08(火) 18:57:46 ID:???
>>562
min-widthはＩＥ６には対応していないけど
新しいブラウザを普及させるためにもmin-widthまたはmax-widthは積極的に使っていくべきですね
564 ：Name_Not_Found：2008/07/08(火) 19:04:51 ID:???
min-widthまたはmax-widthが無かった時代はちょっと面倒でしたね
昔は<div>を二重にして組む必要がありました。
565 ：Name_Not_Found：2008/07/08(火) 19:50:16 ID:???
自分はexpression使ってる。
Fixed.jsだとスクロールしたときガタつくよね。
566 ：Name_Not_Found：2008/07/08(火) 22:18:40 ID:???
質問です。ボックスの中で無駄に下部にスペースが空いてしまいます。
スペースを無くす方法を教えて下さい。

#container #container-inner {
background-color: #CCFF00;
}
#container #container-inner #box1 {
background-color: #FFFF99;
}
#content-end {
background-color: #FFCC99;
height: 20px;
}
/* Bottom Nav */
div.btmnav {
text-align: center;

background-color: #66CCFF;
}
div.btmnav ul li {
display: inline;
list-style: none;
}
#container-inner {
}
#footer-2 {
background-color: #CCCCCC;
}
#container {
background-color: #FF6699;
}
567 ：Name_Not_Found：2008/07/08(火) 22:19:31 ID:???
HTMLです。
緑とピンクの部分を見せたくないんです。

<div id="container">
<div id="container-inner">
<div id="box1">box1</div>
<div id="footer">
<div id="content-end"> 縺薙?ｮ荳九?ｮ繧ｹ繝壹?ｼ繧ｹ繧堤┌縺上＠縺溘＞縲? </div>
<div class="btmnav">
<ul>
<li>繧ｵ繧､繝医?槭ャ繝?</li>
<li>繝励Λ繧､繝舌す繝ｼ繝昴Μ繧ｷ繝ｼ</li>
<li>縺雁撫縺?蜷医ｏ縺?</li>
</ul>
</div>
</div>
</div>
<div id="footer-2">縺昴?ｮ?ｼ?</div>
</div>
568 ：567：2008/07/08(火) 22:21:02 ID:1pQf7Bbq
文字化けしてたので貼り直し。。。

<div id="container">
<div id="container-inner">
<div id="box1">box1</div>
<div id="footer">
<div id="content-end"> この下のスペースを無くしたい。 </div>
<div class="btmnav">
<ul>
<li>サイトマップ</li>
<li>プライバシーポリシー</li>
<li>お問い合わせ</li>
</ul>
</div>
</div>
</div>
<div id="footer-2">その２</div>
</div>
569 ：Name_Not_Found：2008/07/08(火) 22:30:53 ID:???
>>566
検証環境をくわしく。
・Win or Mac
・IE(6 or 7) or Firefox)
570 ：Name_Not_Found：2008/07/08(火) 22:37:56 ID:???
>>569
WinのIE7&FireFox3で検証しました

http://www.imgup.org/iup642249.jpg.html

これに出てる緑の部分とピンクの部分を見せたくないという感じです。
571 ：Name_Not_Found：2008/07/08(火) 22:47:58 ID:???
>>570
一番上に、これ足してみ。

* {
margin:0;
padding:0;
}
572 ：Name_Not_Found：2008/07/09(水) 00:03:05 ID:???
>>571
ありがとう。
ありがとう。
ありがとう。
573 ：Name_Not_Found：2008/07/09(水) 00:47:15 ID:???
AAでおｋ
574 ：Name_Not_Found：2008/07/09(水) 01:07:29 ID:5ymJfwkZ
検索したり、いろいろ探しているのですが、
どうしてもわからなかったので、質問させていただきます。

CSSのみでメニューを書いているのですが、
オンマウスで背景色を変えることはできるのですが、
オンマウスで文字を
変更することはできますか？
もしご存知の方がいましたら教えていただけないでしょうか。

メニューは以下のとおり単純なものです。
<ul>
<li>メニュ－１</li>
<li>メニュ－２</li>
<li>メニュ－３</li>
<li>メニュ－４</li>
</ul>

これをメニュー１にマウスを合わせた時に、menu1などに変更させたいのです。
画像を使わずにできるのでしょうか？
javascriptなどを使用してできるのであれば、それでもかまいません。

深夜ですが、ご存知の方がいらっしゃったら宜しくお願いします。
575 ：Name_Not_Found：2008/07/09(水) 05:21:24 ID:qiJZC3BC
文字変えるには何使うにしても画像にしないと無理
576 ：Name_Not_Found：2008/07/09(水) 06:14:33 ID:???
javascript 使えばぜんぜん無理じゃないっていうか簡単。
でもスレチな。
577 ：Name_Not_Found：2008/07/09(水) 12:21:27 ID:???
>>574
CSS3だと
li:hover { content: "menu"; }
で変えられる。最新のOperaなどが対応している。

既存のブラウザにも対応させるならJavaScriptでinnerHTMLとかだと思う。
578 ：Name_Not_Found：2008/07/09(水) 16:45:16 ID:yuM7ssaU
<li><a href="#">
<h2>見出し</h2>
<span class="">文章文章文章文章文章文章文章文章文章文章文章</span>
</a></li>

li a:hover h2{
text-decoration:underline;
}
としたとき、マウスオーバー時にwinIE6でのみ見出し部分に下線がつきません
どこに問題があるんでしょうか
579 ：Name_Not_Found：2008/07/09(水) 16:56:56 ID:???
a 要素の中に h2 というのが文法違反なんだが。
とりあえず h2 にクラスかID付けてやれば下線は出ると思うよ。
580 ：Name_Not_Found：2008/07/09(水) 16:58:54 ID:???
なんかタグがいい加減だな
581 ：Name_Not_Found：2008/07/09(水) 17:13:21 ID:???
h2の場所に違和感が
普通、liじゃなくてdivじゃねーか？
582 ：Name_Not_Found：2008/07/09(水) 17:25:22 ID:???
li の中に h2 はすごく普通だけど
a の中に h2 はありえない。
583 ：Name_Not_Found：2008/07/09(水) 17:33:14 ID:???
<li>
<h2><a href="hoge">hoge</a></h2>
<p>hoge</p>
</li>
に直せ
584 ：Name_Not_Found：2008/07/09(水) 17:44:41 ID:???
<p>hoge</p>
疑問なんだけどhtmlで段落使う意味ってなにかあるの？
<br>とどう違うのかが知りたい・・
585 ：Name_Not_Found：2008/07/09(水) 18:06:37 ID:???
うーん、これを理解するのに1レスじゃ無理
強いて言えばHTMLの思想みたいなもん
「ブロックレベル要素の兄弟要素はすべてブロックレベル要素となるべき」というものね
実際にはならなくていいのも分かるよね。本文をp要素やdiv要素にして、中身をbr要素で区切るとか
でも、思想に従うのなら、br要素ではなく最小要素はpになる
何でかというと合間に引用ブロックでも挟めば分かる

ここで＊＊さんは

　ほにゃらららほにゃらら

というわけです。

というものをタグ付けしようとしたときに、div要素とblockquote要素だけで区切ると
「ここで＊＊さんは」と「というわけです。」がまったくブロック要素で示せなくなるわけだ
ついでに「ほにゃらららほにゃらら」もブロック要素で示されなくなり、何がなんだかわからねーぞとなる
というわけで思想に従った人々は末端のブロック要素にp要素を採用するわけです。はい
586 ：Name_Not_Found：2008/07/09(水) 18:07:38 ID:YeBIs2z9
リストの中に見出しが入るのもおかしいんだぜ
587 ：Name_Not_Found：2008/07/09(水) 18:11:58 ID:???
で、spanはインライン要素
もしブロック要素の使い方を行うのならば、CSSで
「spanをブロック要素の働きにします！」
などの手間も発生する
ブロック要素として扱いたいのなら最初からブロック要素にしたほうが素直だし労力も少ない
例外的にdivなどをテーブルの働きにaをブロックになんて指定の仕方はあるけど
この場合は代替できない場合においてだよね。仕方ないからCSSを使おうなんだ
CSSを使わずに正しいタグ付けを心がければ済む話なら、CSSをがちゃがちゃいじる必要もないよね
588 ：Name_Not_Found：2008/07/09(水) 18:16:17 ID:???
hogeってなに？
589 ：Name_Not_Found：2008/07/09(水) 18:18:28 ID:???
つ【google】
590 ：Name_Not_Found：2008/07/09(水) 18:38:50 ID:???
>>589
すまん　ありがとう
591 ：Name_Not_Found：2008/07/09(水) 19:31:27 ID:???
俺は未だに<br>を使う理由がわかりません
HTMLタグの中で<br>が一番いらないかな
592 ：Name_Not_Found：2008/07/09(水) 19:38:40 ID:???
brは時々いる子だよ。

でも時々しかいらない子
593 ：Name_Not_Found：2008/07/09(水) 19:50:47 ID:???
liの中にHも違和感あるなぁ俺ｗ
594 ：Name_Not_Found：2008/07/09(水) 20:06:09 ID:???
li にはたいていの要素を入れられる。
595 ：Name_Not_Found：2008/07/09(水) 20:06:52 ID:???
strongとか使ったことねぇ
596 ：Name_Not_Found：2008/07/09(水) 20:09:01 ID:???
>>595
どうやってるの？
597 ：Name_Not_Found：2008/07/09(水) 20:11:54 ID:???
emだけでいいじゃん？
598 ：Name_Not_Found：2008/07/09(水) 20:13:18 ID:63FUnbyj
b房？
599 ：Name_Not_Found：2008/07/09(水) 20:18:24 ID:???
bって何だ？
600 ：Name_Not_Found：2008/07/09(水) 20:40:32 ID:???
bold,strong,em
全部意味違うんだけど。馬鹿なの？死ぬの？
601 ：Name_Not_Found：2008/07/09(水) 20:44:44 ID:???
>>598
何を勘違いしているんだ！

文章に装飾なんかしないからemもstrongもqもspanもいらない
後から書いたり消したりしないからinsもdelもいらない
略語なんて知っている人が分かればいい
キーボードの数値とかコードとか書かない
アンカーさえあれば十分じゃね？
602 ：Name_Not_Found：2008/07/09(水) 21:44:46 ID:???
>>600
boldはそこに入るものなのか？
603 ：Name_Not_Found：2008/07/09(水) 22:10:40 ID:???
601 は何でこのスレにいるんだろう…
604 ：Name_Not_Found：2008/07/09(水) 22:11:13 ID:???
ごめ、bっていれるとboldってはいるんだた
605 ：605：2008/07/10(木) 00:43:12 ID:???
filter:progid:DXImageTransform.Microsoft.Gradient
(gradientType='0',startColorstr='#fff',
endColorstr='#000');

↑
これって全ブラウザ共通で使えますか？
606 ：Name_Not_Found：2008/07/10(木) 00:52:49 ID:???
いいえ。普通のブラウザでは無視されます。
607 ：605：2008/07/10(木) 00:57:26 ID:???
グラデーションしたくて検索してコピペしてみたんですけどどっか違ってますか？
試しにtextareaにこのままやってみたらtextareaの背景が真っ白になってしまいました。
608 ：Name_Not_Found：2008/07/10(木) 01:13:53 ID:???
・gradientTypeはInteger
・色はAlpha 2桁、Red 2桁、Green 2桁、Blue 2桁
　'#FFFFFFFF' とか
609 ：Name_Not_Found：2008/07/10(木) 01:14:08 ID:???
>>607
グラデーションをやろうと思えばスタイルシートでもJavascriptでも出来ますが
ブラウザの互換性を考慮して画像でやった方がいい
あくまでもこれは俺流のやり方ですが
俺の場合グラデーションを使いたい時は
まずJavascriptでグラデーションを作っておいて
それをスクリーンショットしてペイントに貼り付ける
グラデーションの部分だけ切り取ってpngで保存してそれを使っています。
610 ：605：2008/07/10(木) 01:34:10 ID:???
なるほどそういう手があったんですね。
>>608さん>>609さんありがとうございます！
611 ：Name_Not_Found：2008/07/10(木) 05:17:08 ID:???
>>609
今はPhotoshopで済ませてるけど、ちょっと前まではまさにそんな感じだったｗ
612 ：Name_Not_Found：2008/07/10(木) 05:35:13 ID:???
そんなの、Paint.NET使えば簡単。フリーだから使ってみな。

ダウンロード
http://www.dotpdn.com/downloads/pdn.html

グラデーションのやり方
http://paintnet.web.fc2.com/Interface/gradienttool.htm
613 ：Name_Not_Found：2008/07/10(木) 06:57:18 ID:???
また、変な宣伝きた…
614 ：Name_Not_Found：2008/07/10(木) 13:01:05 ID:???
CSS適用しないブラウザ用にhr試してみたら、
display:none;だけだと表示されるんだけど
hrには指定できない？
615 ：Name_Not_Found：2008/07/10(木) 15:30:53 ID:???
CSS適用しない←display:none;はCSS
616 ：Name_Not_Found：2008/07/10(木) 15:38:33 ID:hL6F+T2R
hrはHTMLの物理要素だからＣＳＳ関係ない
617 ：Name_Not_Found：2008/07/10(木) 16:50:51 ID:???
例えばパソコンにはhrを表示させない
携帯にはhrを表示させるってやりたかったんだけどね
まいっか
618 ：Name_Not_Found：2008/07/10(木) 16:56:40 ID:???
CSS適用しないブラウザ用に"display:none;"って書く

　どういう頭の構造なのか・・・　おねいさんは困ったわ。
619 ：Name_Not_Found：2008/07/10(木) 17:13:37 ID:GEj+ulvW
>>617
それならＰＣ用のＣＳＳで消せばいい
620 ：Name_Not_Found：2008/07/10(木) 18:24:29 ID:???
>>617
hrにCSS適用でPCにはdisplay:none;を携帯には任意の線表示に切り替え
スクリプトで振り分けてもいいんだけどね
621 ：Name_Not_Found：2008/07/10(木) 18:50:16 ID:???
>>612
これはMacでも使えますか？
622 ：Name_Not_Found：2008/07/10(木) 18:53:39 ID:uCPwW/f0
文字の扱いについて質問です。
FxとIE6で10pxや90%と指定したとき、Fxのサイズの方が一回り小さくなります。
というか、IEが12pxの大きさのまま？のような状態です
加えて、line-heightもIEの方が広いようです。

・上記の２点、皆さんの環境じゃどうでしょうか？　僕の環境が異常なんでしょうか？
・フォントの大きさやline-heightはブラウザごとに指定していますか？（ハック使うなどして）
・指定するなら、その際に注意してる点はありますか？
623 ：Name_Not_Found：2008/07/10(木) 18:55:38 ID:???
・line-heightに単位を使用しない
・一度全体100%などでブラウザのゆらぎをつぶす

読めればいいんだから下手に小さくするよりは100%にした方がいいかも
自分が小さく読みたいのならブラウザの設定いじればいいんだし
624 ：Name_Not_Found：2008/07/10(木) 19:05:24 ID:???
Yahoo! のライブラリ使ってブラウザの差異を吸収すると楽。
625 ：Name_Not_Found：2008/07/10(木) 19:37:15 ID:/oK9jGEM
YUIは無駄なの多すぎね？
626 ：Name_Not_Found：2008/07/10(木) 19:38:24 ID:???
切り替えといえば、media screenでも読み込む携帯あるんだな。
困ったもんだよ。
627 ：Name_Not_Found：2008/07/11(金) 10:44:24 ID:ySXjcQ9N
background-repeat : no-repeat;にした時にセンターにするにはどうするのでしょうか？
background-position : 50% 50%;にしたなんかセンターじゃないんですけど・・・・
628 ：Name_Not_Found：2008/07/11(金) 17:18:45 ID:???
>>627
あんたの言ってるセンターは縦方向の話なわけ？
なら背景指定した要素が縦100％にしろよ。
629 ：Name_Not_Found：2008/07/11(金) 17:45:06 ID:???
これ家来、日本語が変じゃぞ。
630 ：Name_Not_Found：2008/07/11(金) 18:37:54 ID:???
殿、上司なら添削しとけよ。
631 ：Name_Not_Found：2008/07/11(金) 21:50:56 ID:RzFHkLm2
IE6でliタグの間に隙間が出来るのはどうしたら解消できますか？
あと、floatのclearってみんなどうしてるの？
<br style="clear:both" />？
<div style="clear:both"></div>？　これは中身がカラだとまずい？
632 ：Name_Not_Found：2008/07/11(金) 21:52:55 ID:???
っ* {padding:0; margin:0}

ぶんぽーなんてきにしません！　なら空でいいよ。もう突き抜けて良いよ
633 ：Name_Not_Found：2008/07/11(金) 21:59:54 ID:???
>>631

li の隙間解消は li { display:inline }
float の解除は overflow
634 ：Name_Not_Found：2008/07/11(金) 22:41:26 ID:RzFHkLm2
>>633
display:inlineしたら、２つあったリストが一行になってしまいました
これでいいんでしょうか？　brで２行に分けるんですか？
635 ：Name_Not_Found：2008/07/11(金) 22:50:49 ID:???
>>634
簡単な方法教えてやるよ。本当にIEの糞ぶりを実感できるいい例だ。

・一行空く
<li>list1</li>
<li>list2</li>

・空かない
<li>list1</li><li>list2</li>
636 ：Name_Not_Found：2008/07/11(金) 23:31:57 ID:???
>>635
IE6ってそこまで糞なのか。IE7でしか確認してないから分からなかったけど･･･。
637 ：Name_Not_Found：2008/07/11(金) 23:44:10 ID:C4Cu9faH
<style type="text/css">......</style>
の......の部分に見出しの大きさを変更しようとして
h1{font-size:1.25em}と記入したのですが、何の変化も
起きません。これはどういったことなのでしょうか？
本当に困っています。分かる人教えてください。


638 ：Name_Not_Found：2008/07/11(金) 23:51:14 ID:???
>>637
元のスレでレスついてるよ
こんなんで誘導する奴が悪い
639 ：Name_Not_Found：2008/07/12(土) 00:43:58 ID:???
これは暗号だ。
640 ：Name_Not_Found：2008/07/12(土) 20:16:15 ID:ncdTQD9O
どこで聞いたらいいのかわからないのですが、質問させてください
昔は、フラッシュの部分にjavascriptのプルダウンメニューがかかると
メニューが表示されなかったですが、最近はちゃんと表示されてる例があるようです
アレはどうやって実現するんでしょうか？　cssを利用してるんですか？
やり方を簡単にでいいので教えてください
641 ：Name_Not_Found：2008/07/12(土) 20:38:45 ID:U1qK/349
ＪＳのスレ池
642 ：Name_Not_Found：2008/07/13(日) 00:18:13 ID:???
ソース見れば分かるだろ
643 ：Name_Not_Found：2008/07/13(日) 01:50:03 ID:Yk2uvvb0
教えてください。
HTMLでテーブルを使わずに画像（下に説明付き）のサムネイルを横に並べたいのですが、やり方がちょっとわからないのです。どうすればいいのでしょうか。<img>タグに個別にCSSでMargin-left:10%とかつけてもだめみたいです。
やり方が悪いのかなあ
644 ：Name_Not_Found：2008/07/13(日) 01:51:23 ID:Yk2uvvb0
ＣＳＳ
#1{margin-left:50%}

ＨＴＭＬ
<img class id="1" src="./alephcode/alephcode1/aleph.jpg" width="100" height="130" class id="1">

なかんじだとＮＧになっちゃいます。
645 ：Name_Not_Found：2008/07/13(日) 01:59:44 ID:???
<dl>
<dt>画像</dt>
<dd>説明</dd>
<dt>画像</dt>
<dd>説明</dd>
<dt>画像</dt>
<dd>説明</dd>
</dl>

既に定義リストをテーブルっぽく見せるチップは転がっているから自分で探して
でも、逆に表として見れるのならテーブルの方が素直だと思うけど
646 ：Name_Not_Found：2008/07/13(日) 02:01:34 ID:???
id="1" はないよ。
数字で始まってはいけない。
数字だけでももちろんいけない。
647 ：Name_Not_Found：2008/07/13(日) 02:10:54 ID:???
チラ裏だけど、ようやくテーブルレイアウトから脱却
positionで組んだけどrelativeとabsoluteがツンデレすぎな件

技術評論社の河内正紀著『スタイルシート上級レイアウト』を参考にしたのですが
この参考書はこのスレ的にどのような評価がされているのでしょうか？
648 ：Name_Not_Found：2008/07/13(日) 02:16:19 ID:???
>>646
文法厨キモい。IEで無問題なのだから無問題。
649 ：Name_Not_Found：2008/07/13(日) 02:16:52 ID:Yk2uvvb0
>>645　難しそうですが試してみます
>>646　数字で始まっちゃダメだったんですか。。

おふたがた、ありがとうございます。これから試してみますので、先にお礼言っておきます。

CSSから組んだテーブルなども書いたんですが、IEで閲覧したときにTDとTDの幅が反映されなかったりで、レイアウト面で困ってしまって。。
<dl>～が良さそうですね。買った本に詳しく書いてなかったので、ちょっと実験してみます。
650 ：Name_Not_Found：2008/07/13(日) 03:21:28 ID:???
>>648

文法と無視するのねいけないが思いませた。
651 ：Name_Not_Found：2008/07/13(日) 04:05:45 ID:???
>>648
あなた私気持ち似てる仲がとてもいいです
652 ：Name_Not_Found：2008/07/13(日) 09:38:35 ID:???
>>649
ついでに>>299も見ておくといいお（ ＾ω＾）
653 ：Name_Not_Found：2008/07/13(日) 21:33:57 ID:???
>>652
文法厨キモい。IEで無問題なのだから無問題。
654 ：Name_Not_Found：2008/07/13(日) 21:38:31 ID:???
>>653

　夏　だ　な　あ
655 ：Name_Not_Found：2008/07/13(日) 21:39:22 ID:???
IEともう過去がブラウザですねと消え去りでしょうかも。
656 ：Name_Not_Found：2008/07/13(日) 21:47:17 ID:???
だれか>>655の説明頼む
657 ：Name_Not_Found：2008/07/13(日) 21:54:40 ID:???
IEなんか消えればいいのに
658 ：Name_Not_Found：2008/07/13(日) 21:57:58 ID:???
>>655

文法にこだわるなよ。文字化けしてなきゃ無問題。
659 ：Name_Not_Found：2008/07/13(日) 21:59:31 ID:???
「IEと　もう過去が　ブラウザですね」と消え去りで　しょうか（消化）　も。


こうですか？わかりません＞＜
660 ：Name_Not_Found：2008/07/13(日) 22:11:46 ID:PI1RAod7
TVチャンピョン
CSS王座決定戦！

があったら出てみないか？
661 ：Name_Not_Found：2008/07/13(日) 22:12:32 ID:???
いいよ。出ても。
CSS くらい目を閉じてても書ける。
662 ：Name_Not_Found：2008/07/13(日) 22:14:32 ID:???
みてても面白くないだろｗｗｗ
663 ：Name_Not_Found：2008/07/13(日) 22:31:41 ID:nh9u4r9F
一万行のＣＳＳの中から３箇所の間違いを見つけよ！
スタート！
664 ：Name_Not_Found：2008/07/13(日) 22:37:08 ID:???
他人の書いたコードほどやっかいなものはない。
665 ：Name_Not_Found：2008/07/13(日) 22:40:12 ID:???
div厨のコードは読めない
だったらstrictな人間のコードのほうが読みやすい
666 ：Name_Not_Found：2008/07/13(日) 22:54:07 ID:nh9u4r9F
まず他人に読める必要がない
何故わざわざ同業者に優しく書いてやる必要があるのかｗ
strict厨のサイトはアホほどシンプルなだけで既にデザイン放棄の域
目的と手段を取り違えてる
往々にしてデザイン出来ない人間がstrict厨になる
667 ：Name_Not_Found：2008/07/13(日) 22:57:01 ID:???
>>666
おいおい、中には自分ですら読めないコードが存在するんだぞ？
668 ：Name_Not_Found：2008/07/13(日) 22:57:27 ID:???
デザインとは機能のことだ。
669 ：Name_Not_Found：2008/07/13(日) 22:57:52 ID:???
自分で出題しといてなんなんだか・・
670 ：Name_Not_Found：2008/07/13(日) 23:00:23 ID:nh9u4r9F
自分で読めないのはルール作りが甘いとしか言えない

見た目という機能は大事ですよ
人は見た目が９割って言葉聞いた事ないですか？
671 ：Name_Not_Found：2008/07/13(日) 23:02:22 ID:???
少なくともidに

#1 ｛
hogehoge;
}

#2 {
foo;
}

#3 {
bar;
}
672 ：Name_Not_Found：2008/07/13(日) 23:02:56 ID:???
なんて書いてある奴はCSSだけじゃ想像つかんよ
１とか２とかわけわからねえよ
673 ：Name_Not_Found：2008/07/13(日) 23:03:36 ID:???
釣りはヨソで
674 ：Name_Not_Found：2008/07/13(日) 23:05:30 ID:???
>>672
俺はちょっと違うけど、ID名とかクラス名に困った時はとりあえずアルファベット一文字にする

#s { foo: bar; }

とか
675 ：Name_Not_Found：2008/07/13(日) 23:06:18 ID:???
ビジュアルのプライオリティをどの程度に置くかは制作者が決めることだ。
それが正しいかどうかは結果を見なければわからない。
676 ：Name_Not_Found：2008/07/13(日) 23:08:50 ID:???
別にidとか好きにつければいいがそれは後で自分が困るぜベイベー
677 ：Name_Not_Found：2008/07/13(日) 23:12:18 ID:PI1RAod7
これは番組があれば本当に面白そうだなw
678 ：Name_Not_Found：2008/07/13(日) 23:16:43 ID:???
いや、つまんねーよ絶対…
679 ：Name_Not_Found：2008/07/13(日) 23:25:58 ID:???
確実につまらないからｗ
680 ：Name_Not_Found：2008/07/14(月) 00:09:18 ID:???
最初の数分でチャンネル変えられるな
視聴率1％以下
681 ：Name_Not_Found：2008/07/14(月) 01:19:03 ID:qYqTxphJ
hタグなどのブロック要素にidをつけて
positon：absoluteの指定をすると
なぜインライン要素みたいな表示になるのでしょうか。。
hタグには背景色をつけていて、absoluteの指定をしなければ画面の端まで
背景色が表示されるのに、この指定をすることによって
インライン要素みたいにテキストのある個所にしか色が表示されません。
682 ：Name_Not_Found：2008/07/14(月) 01:23:28 ID:???
>>681
ブロック要素の width のデフォルト値 100% が解除されるからでしょ。
683 ：Name_Not_Found：2008/07/14(月) 06:28:44 ID:???
>>681
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
を読めばわかるんだが…
position:absoluteのときはleft, right, widthが'auto'(初期値)だと、
widthの値はshrink-to-fit(内容に合わせた幅)になる。
left:0;right:0などを指定するとposition:staticのときと似たような
感じになる。
684 ：Name_Not_Found：2008/07/14(月) 12:55:57 ID:???
SafariのWebインスペクタがわかりやすい
685 ：Name_Not_Found：2008/07/15(火) 01:10:32 ID:???
隣接セレクタなんだけど

li + li + li + li

なんて書き方はちょっと不便だと思うのは俺だけ？

li:siblings(n+3) とか、逆に li:siblings(n-2) とか書けたら面白いのに
686 ：Name_Not_Found：2008/07/15(火) 03:59:48 ID:???
初心者スレでわざと難しい事を書いて悦に浸ってるキモイのが最近よく居る。
687 ：685：2008/07/15(火) 05:21:36 ID:???
>>686
CSS上級者スレは荒れてるし、それに難しいことなんて一言も言ってないけど？
688 ：Name_Not_Found：2008/07/15(火) 07:22:14 ID:???
classかidにしとけ
どうせ文法として定まってもブラウザが動かなきゃ意味がない

IEを捨てたくなるよ。隣接セレクタ通じないし
689 ：Name_Not_Found：2008/07/15(火) 08:49:52 ID:???
そんなに沢山隣接してるhtml書くヤツはおかしいんだろ。

690 ：Name_Not_Found：2008/07/15(火) 09:40:49 ID:???
>>688-689
すまん説明不足だったわ
こういうのとかね
ttp://forum.mozilla.gr.jp/?mode=al2&namber=36636&no=0&KLOG=230

あとは
ttp://www.lucky-bag.com/archives/2007/04/thinking-about-content-pseudo-class.html
こういうのもほしー
691 ：Name_Not_Found：2008/07/15(火) 10:57:43 ID:???
単に頭悪いだけだろ
スペースあればそれでいい
692 ：Name_Not_Found：2008/07/15(火) 11:11:38 ID:???
>>685-687
この流れで脊髄反射してるとこみると
完全に指摘通り「ご自分では高度なこと書いて悦に浸ってる」ようだなｗｗｗ
ホントに人格的に低能な奴は救いようがないぞ
693 ：Name_Not_Found：2008/07/15(火) 11:32:17 ID:???
>>685
スレ違いのような気がするので

独自拡張、草案段階のCSSについて語れ
http://pc11.2ch.net/test/read.cgi/hp/1019912046/

へどうぞ。
694 ：Name_Not_Found：2008/07/15(火) 12:55:05 ID:???
初心者ってどのくらいを初心者っていうのだろうか

テーブルレイアウトではなくCSSレイアウトできれば初心者卒業？
でも段組みはCSSの初歩だよな‥‥
695 ：Name_Not_Found：2008/07/15(火) 13:26:01 ID:???
まあ今回はこっちでレスするけど

>>685
隣接セレクタ自体があんまりうまみがないと思うので
自分としてはそれの簡略化のための新しい記法を入れる必要が
あんまり感じられない (CSSセレクタの表現力が増えるって点ではまあ)

あとそのli + li + li + liの簡略化、ということに限って言えば
html:li周りの内容モデルからして
parent > li:nth-of-type(n+4)で十分代替可能だといえるし
>>690のもじら組のものも:nth-child(n)を使って表現可能(Firefoxは3.1から対応だったか？)
Lucky bag::blogのそれは自分もほしいがまあ望み薄じゃないか
696 ：Name_Not_Found：2008/07/15(火) 13:27:51 ID:???
人に聞かないと解決できないレベルが初心者
697 ：Name_Not_Found：2008/07/15(火) 13:39:54 ID:???
font-familyで日本語が含まれていないフォントを指定しているとき
日本語の表示には勝手に選択された日本語フォントで表示されますが
この日本語フォントを明示的に指定したフォントに変更することはできませんか？
698 ：Name_Not_Found：2008/07/15(火) 14:01:08 ID:???
font-familyに日本語フォントを追加すればいい
699 ：Name_Not_Found：2008/07/15(火) 14:09:47 ID:???
>>698
二重引用符囲みのカンマ区切りで列挙するやつですよね？
通常は複数指定で明示的に日本語表示フォントを選択できるんですね。

少し気になるのが
プロポーショナルな英数字フォントの後に
等幅な日本語フォントを指定しようとしているんですが
これが原因ということはありませんか？

指定した等幅フォントではなく、
プロポーショナルな日本語フォントで表示されています。
700 ：Name_Not_Found：2008/07/15(火) 16:08:40 ID:???
いや、ソースを提示してみなよ･･･
701 ：Name_Not_Found：2008/07/15(火) 17:24:50 ID:W9fILLXp
width:400px;height:300px（固定値）のdivの中に、縦横のサイズの定まらないimgを
常に天地左右中央配置するにはどうしたらいいの？

<div style="width:400px;height:300px;">
<img src="a.jpg" width="?" height="?">
</div>
って感じで。。　左右はtext-align:centerだとして上下はどうしたら良いですか？

あと、ひとつのタグに複数のクラス設定するのって　<div class="class1 class2">でOK？
実際やってみたらうまく行ってるんだけど、なんとなく不安で質問しました
702 ：Name_Not_Found：2008/07/15(火) 17:29:01 ID:???
>>701
サイズ不定ならテーブルを使うしかない。
703 ：Name_Not_Found：2008/07/15(火) 18:09:27 ID:???
サイズ不定でも最大値が400×300以内ならいいんだけどねー
手っ取り早く使いまわすんなら>>702でいいんじゃないかな。
704 ：Name_Not_Found：2008/07/16(水) 07:54:37 ID:2W0V7ReN
>>702-703
ありがとうございます　　が、書き損じがありました、すみません。
気にされているとおり、最大値についてですが　写真も最大で400*300になります
この条件だとどういうやり方があるでしょうか…
（もちろんテーブルというやり方も参考にさせてもらいます）
705 ：Name_Not_Found：2008/07/16(水) 09:42:05 ID:???
>>704
vertical-align
706 ：Name_Not_Found：2008/07/16(水) 09:59:28 ID:Keb7xWou
Excelのような表をHTMLで表示する際の行・列固定について教えてください

列固定はテーブルを二つに並べ左側テーブルを固定、右側テーブルを
overflow-x:scroll
行固定はテーブル一つでヘッダ部分を固定、データ部分をoverflow-y:scroll
で一応できていますが、これらを同時に実現することは可能でしょうか?
また、どのような方法でしょうか?
707 ：Name_Not_Found：2008/07/16(水) 22:26:48 ID:???
行・列固定ってなに？
708 ：706：2008/07/17(木) 09:10:32 ID:???
>>707
すいません。
エクセルのウィンドウ枠の固定みたいなものです。
709 ：Name_Not_Found：2008/07/17(木) 10:36:54 ID:???
知らね
710 ：Name_Not_Found：2008/07/17(木) 11:05:25 ID:???
background画像を表示させるためだけのスペースは
テーブル以外でどうやって指定したらいいんでしょうか？
テキストは入れないためサイズ指定とか含めて最適な方法を
教えて下さい。
よろしくお願いします。
711 ：Name_Not_Found：2008/07/17(木) 11:58:32 ID:???
paddingで確保するのが普通
てかそれ以外無理だろ
712 ：Name_Not_Found：2008/07/17(木) 11:59:38 ID:???
完全に置き換えるならサイズ指定して
positionなりなんなりでテキスト吹き飛ばす
713 ：Name_Not_Found：2008/07/17(木) 12:52:19 ID:???
>>711
>>712
ありがとう！
714 ：Name_Not_Found：2008/07/17(木) 12:54:01 ID:???
paddingで調整してno-repeartでドーン。
715 ：Name_Not_Found：2008/07/17(木) 23:22:21 ID:???
>>714
ドーンしたｗ
ありがとう！
716 ：Name_Not_Found：2008/07/18(金) 11:19:08 ID:NPcCZee4
…と、思います<br /><br />
ところで（以下略）

ソースを確認して上記のようになっている部分が、Fxでなら一行目と二行目の間に
一行分のスペースが開いているのに（brが二つあるので）、IE6で見るとそのスペースがなく、
普通のbrひとつの改行と変わらない見た目になっています
何が原因と考えられるでしょうか？
CSSの指定は以下の通りなんですが…
p.text, div.text{
line-height:1.5;
padding:0 3px 0 3px;
margin:0 4px 20px 4px;
}
717 ：Name_Not_Found：2008/07/18(金) 12:26:46 ID:???
ttp://cssbug.at.infoseek.co.jp/detail/winie/b022.html
718 ：Name_Not_Found：2008/07/18(金) 13:36:20 ID:???
基本brは使わない構成を考えるべき
719 ：Name_Not_Found：2008/07/18(金) 14:27:00 ID:???
どうしてbrを使わない方がいいんですか？＞＜
720 ：Name_Not_Found：2008/07/18(金) 14:29:33 ID:???
>>719
br要素は改行するためのものであって行間を空けるものではない

<p>…と、思います</p>
<p>ところで・・・</p>

とするのが好ましい
721 ：Name_Not_Found：2008/07/18(金) 14:34:32 ID:???
好ましいか好ましくないかは制作者の判断でいいんだよ。
段落と改行をどう使い分けるかは自由だ。
722 ：Name_Not_Found：2008/07/18(金) 14:50:32 ID:???
<br>でデザインするなっつーことよ。
723 ：Name_Not_Found：2008/07/18(金) 15:34:12 ID:???
それは勝手だろう。仕様に書いてないことを強制するな。
724 ：Name_Not_Found：2008/07/18(金) 15:36:00 ID:???
２ちゃんで何を書こうが勝手だろ
725 ：Name_Not_Found：2008/07/18(金) 15:59:09 ID:???
<dl>は箇条書きするためのものであって、メニュを作るべきものではない。
<indent>は文字を頭下げするためのものであって、文字を飛ばすためのものではない。
<hn>は見出しに使うべきであって、inlineにすべきものではない。
<table>は表組みに使うべきであって、レイアウトに使うべきではない。
・・・・・・・・・・・・・・・・・・・・以下省略
726 ：Name_Not_Found：2008/07/18(金) 16:19:06 ID:???
というかね。<br>使わないで叶えたいなら
助言してもらった内容を試して上手くいくなら儲けモンじゃね？

>>723
ということで、お前のエゴが一番邪魔くさい。強制でも適うならいいんじゃね？
カスみたいなソースでも書いてろカス
727 ：Name_Not_Found：2008/07/18(金) 16:57:46 ID:???
そもそもこんなスレに強制力など存在しない
参考にしようがしまいが好きにすればいいだけの話です
728 ：Name_Not_Found：2008/07/18(金) 17:06:15 ID:???
回答者に絡むヤツが一番タチ悪いぜ。
729 ：Name_Not_Found：2008/07/18(金) 17:26:57 ID:???
前もいたな、そんなの。
期待する答えが得られなくて暴れた奴。
730 ：Name_Not_Found：2008/07/18(金) 17:29:54 ID:???
回答者も無能だから絡まれても文句は言えない
731 ：Name_Not_Found：2008/07/18(金) 17:32:04 ID:???
以降、他の回答者にケチをつけるだけで、自分は建設的な意見を何一つ述べない人はスルーで。
732 ：Name_Not_Found：2008/07/18(金) 17:49:46 ID:???
テーブルでのレイアウトをCSSでやるの初心者にはむずいです
べきでない、ってんならブラウザなんとかしてちょと思うこと多し
733 ：Name_Not_Found：2008/07/18(金) 18:08:07 ID:???
>>732
そうだね。IEとか死んでしまえばいいのにね。

でも、できるようになるまでが大変なのは免許取得なんかも同じじゃないかな？
できるようになったら、なんだ意外と簡単だってこと多いよ～
734 ：Name_Not_Found：2008/07/18(金) 18:40:08 ID:???
以外と簡単とか言うわりにIEにケチ付けてるマヌケさ。
735 ：Name_Not_Found：2008/07/18(金) 18:41:10 ID:???
>>733
それ言ったらこのスレの回答者が可愛そうだ。
736 ：Name_Not_Found：2008/07/18(金) 18:44:59 ID:???
>>734
いやはや間抜けでごめんねー。

文脈を捉えられない人にも分かり良く書くのは難しいね。
737 ：Name_Not_Found：2008/07/18(金) 20:30:47 ID:???
>>732
そうそう。テーブルの内容が最後に表示されるって仕様が糞なんだよね。
それさえ無ければ、意味とか無視して使いまくれるのに。
738 ：Name_Not_Found：2008/07/18(金) 22:36:46 ID:???
>>732
それの解決策も有るのだが・・・
739 ：Name_Not_Found：2008/07/18(金) 22:38:28 ID:???
　　おめんなぁ・・・

>>737
それの解決策も有るのだが・・・
740 ：Name_Not_Found：2008/07/18(金) 23:15:07 ID:???
ん？解決策てのはブラウザのバグ回避方法て意味？
ならやっぱ簡単ではない。基本に沿ってんのになんで？？てなるし
すまぬテーブルに限らないけどただの愚痴です
741 ：Name_Not_Found：2008/07/18(金) 23:29:20 ID:???
>>740
少しは勉強せんかい！！
742 ：Name_Not_Found：2008/07/19(土) 02:05:26 ID:???
君にはdivを授けよう。
どんなことにも使える万能君だぞ。
743 ：Name_Not_Found：2008/07/19(土) 03:01:12 ID:???
>>725
dlは定義リストであって箇条書きはulだぜ？

>>742
DIVHTMLを思い出した。全要素DIVで書けるもんな
744 ：Name_Not_Found：2008/07/19(土) 03:10:30 ID:???
http://cowboycat.s206.xrea.com/test/

メニューのテストしているのですが
どうもFireFoxやOpera、Safariでは正常に動くのに
IE6では正常に動きません、なぜでしょうか？

http://cowboycat.s206.xrea.com/test/sbm.css
745 ：Name_Not_Found：2008/07/19(土) 03:48:54 ID:???
>>744
li aをblockにしてwidth,height指定
746 ：Name_Not_Found：2008/07/19(土) 04:05:46 ID:???
blockにするとはどういうことでしょうか？
.solidblockmenu li a{

のところでwidth,height指定するのはわかりました
747 ：Name_Not_Found：2008/07/19(土) 04:23:21 ID:???
あ、displayでblock要素にするんですね
やってみます
748 ：Name_Not_Found：2008/07/19(土) 04:29:41 ID:???
できました！ありがとうございます
749 ：716：2008/07/19(土) 04:34:43 ID:???
どうもです　回答してくれた方ありがとう
件の長文部分はDBから出力されたものをphpの関数nl2br()で変換してるのでbrでデザインするなと
言われてもしたくてしてるわけじゃないんです
phpで面倒な制御すれば対応できるでしょうが、仕様やルールと現場の現実とのズレって
めんどくさいですね…
>>717
本当にありがとう　助かりました
750 ：Name_Not_Found：2008/07/19(土) 08:22:37 ID:???
出た ! 後出し。
751 ：Name_Not_Found：2008/07/19(土) 08:46:29 ID:???
>>749
blogっぽいな……なんだかありそうなものが多い
文中にタグが使える場合は自動で吐き出す<br>の設定を切れ
そうすれば厳密にソースかけるだろ？

奥の手br要素にdisplay:noneを指定。有無をいわさず殺してくれます
752 ：Name_Not_Found：2008/07/19(土) 10:13:24 ID:???
>>749
全然面倒ではないだろ

function myNl2br($string) {
$array = preg_split("/\n{2,}/", $string);
foreach ($array as $val) {
        $val = preg_replace("/\n/", "<br />", $val);
        $val = "<p>$val</p>";
}
return implode("", $array);
}
753 ：Name_Not_Found：2008/07/19(土) 15:50:51 ID:???
問題は解決したってのに、どうしてもbr使わせたくないらしいな
754 ：Name_Not_Found：2008/07/19(土) 16:45:04 ID:???
アドバイスするのはいいんだけど、初心者スレなのを完全に忘れてしまってるね。
あと、プロがこんなとこで質問すんなよ。
755 ：Name_Not_Found：2008/07/19(土) 16:51:28 ID:???
>>753
CSSのバグチェックよりも精密に書いたほうが直るのが早いんだもん
一部分についてはIEにわざとあわせたほうが手早いけど
756 ：Name_Not_Found：2008/07/19(土) 17:14:43 ID:KKs83xcl
colspanの設定があるテーブルで、そのcolspanを指定してないtdのwidthをcssで
指定しても、IE6だとその通りの横幅にならないバグって解決方法ないの？
757 ：Name_Not_Found：2008/07/19(土) 19:22:21 ID:???
>>756
<col>
758 ：Name_Not_Found：2008/07/20(日) 04:48:50 ID:SO8+zsnA
荒れてる質問スレから誘導されてきました。

リスト要素でテーブルっぽい表現をしているのですが、
ddに半角が混じると、dtの背景が微妙に崩れるというトラブルが発生しています。
FireFoxとOperaはOKでした。IE6のバグだと思います。
解決方法が分かる方いらっしゃいますでしょうか？

以下に再現するHTMLを記載します。
759 ：758：2008/07/20(日) 04:49:18 ID:SO8+zsnA
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>半角が混じると表示が微妙に崩れる。</title>
</head>
<style>
dt {
width: 15em;
float:left;
padding: 6px;
border-right: 1px solid #fff;
background-color: #ddd;
}

dd {
margin: 0 0 1px 15em;
padding: 6px;
background-color: #eee;
}
</style>
<body>
<dl>
<dt class="odd">商号</dt><dd class="odd">株式会社フーバー</dd>
<dt class="even">設立年月日</dt><dd class="even">平成20年7月20日</dd>
<dt class="odd">事業内容</dt><dd class="odd">掲示板の書き込み</dd>
<dt class="even">本社所在地</dt><dd class="even">2ch</dd>
<dt class="odd">資本金</dt><dd class="odd">0万円</dd>
</dl>
</body>
</html>
760 ：Name_Not_Found：2008/07/20(日) 04:59:55 ID:???
ｄｄにだけ下にマージンあるぞ
あと内容がそれならテーブルでもいいんじゃないか？
例用に適当に作っただけならあれだが
761 ：758：2008/07/20(日) 05:28:38 ID:???
ddにだけmargin-bottomがあるのは単なる書き忘れです。
dtにmargin-bottomを加えても状況は変わりません。

正直、実装上はテーブルでも構わないのですが、
どうしても気になったので質問してみました。
762 ：Name_Not_Found：2008/07/20(日) 06:42:52 ID:???
>>761
１行目と２行目の間に「すみません」と一言あると
心象が良くなるんじゃないかなーと思った今日この頃。
ごめん、どうでもいいね。
763 ：Name_Not_Found：2008/07/20(日) 06:45:15 ID:???
いやいや大事だと思うぜ
金払って聞いてるわけじゃないからな
764 ：Name_Not_Found：2008/07/20(日) 07:11:48 ID:???
結局、回答を持ち合わせていない奴が無駄にスレを汚していく。
Web関係の板は全部こんなんだ。期待するだけ無駄。
公式に近いML入った方が良いよ。
765 ：Name_Not_Found：2008/07/20(日) 07:57:58 ID:???
＞公式に近いML
766 ：Name_Not_Found：2008/07/20(日) 08:06:06 ID:???
MLってなんですか？
767 ：Name_Not_Found：2008/07/20(日) 08:10:12 ID:???
>>766
イチローや松坂が活躍中
768 ：Name_Not_Found：2008/07/20(日) 08:15:36 ID:???
マイナーリーグですね
769 ：Name_Not_Found：2008/07/20(日) 08:20:42 ID:???
>>759
何がずれているのかと思ったらdtの横幅か
IEは幅の計算がおかしいので横幅と横マージンと横パディングを指定してはならない
同じように縦幅と縦マージンと縦パディングの同時指定もだめです
つかプロなら常識レベルの問題かと思ったわ
問題なのはパディングの左右とマージンの左右だから
770 ：Name_Not_Found：2008/07/20(日) 11:24:05 ID:???
>>759
半角だけ別のフォントで表示されてないか？

line-height指定してないから、フォント自体のline-heightが使用されてそうなる。
IEはUTF-8でフォント無指定だと、ラテン近辺と、かな漢字近辺で使用フォントが勝手に変わるから。

コレも一因かも。
771 ：Name_Not_Found：2008/07/20(日) 11:50:04 ID:???
* {
margin:0;
padding:0;
font:normal normal normal 100%/1.7 "Century Gothic",Verdana,Sans-serif;
}

とか加えておけばいい感じ。* {line-height：1.5;}は時に面倒なことになるけど
※フォーム周りはline-height指定しないほうがいい。特にラジオボタンとか狂う

何で化けたのかと思ったらXML宣言していないからか。IEってほんとイヤ
772 ：Name_Not_Found：2008/07/20(日) 14:45:04 ID:???
またお前か。
773 ：Name_Not_Found：2008/07/20(日) 14:47:29 ID:???
ラジオボタン狂うのはむしろ
* {
margin:0;
padding:0;
｝

こっちだぜ
774 ：Name_Not_Found：2008/07/20(日) 14:49:33 ID:???
まぁラジオボタンぐらい気にするな
775 ：Name_Not_Found：2008/07/20(日) 15:02:35 ID:???
暑いからだれかポスケテ
776 ：Name_Not_Found：2008/07/20(日) 23:29:37 ID:Mx6TkFjV
http://www.tagindex.com/stylesheet/basic/format4.html

リンク色を指定の場合
a.ex:link{～}
指定法<a class=ex

こんな感じになっていますが
pで囲まれた中のリンクを赤にするという使いだと
p.a:link{～

こんな感じになっていますよね

こうではなく

<p class='redlink'>
<div class='redlink'>
このようにredlinkクラスにした部分の中のリンクの色を変更という様には出来ないのでしょうか？

乱文ですがよろしくお願いします。
777 ：Name_Not_Found：2008/07/21(月) 00:30:50 ID:???
>>776
質問にだけ答える。
.redlink a{color:red;}
778 ：Name_Not_Found：2008/07/21(月) 00:38:17 ID:???
>>777
ありがとうございます。
質問にだけということは注意事項などあるんでしょうか？
補足などありましたr大変恐縮ですがよろしくお願いします
779 ：Name_Not_Found：2008/07/21(月) 00:40:20 ID:???
追加で質問なんですが、cssが膨大になりすぎるとなにか問題などありますでしょうか？
htmlタグを使わずにCSSでほとんどデザインしており、だんだん量が膨大になってきました。
780 ：Name_Not_Found：2008/07/21(月) 00:54:34 ID:???
ブラウザのバグでうまくレイアウトできないときに原因を探るのが大変とか。
分割管理がいいという話もある。
http://2xup.org/log/2006/10/17-2115.html.jp
781 ：777：2008/07/21(月) 01:28:27 ID:???
>>778
>p.a:link{～
深夜だからかもしれないが、この意味がわからなかった。

>pで囲まれた中のリンクを赤にするという使い
ならp a:link{～じゃね？

そういう指定方法があるんなら無知すまん。
782 ：Name_Not_Found：2008/07/21(月) 03:50:25 ID:???
アホにそんな気を遣う必要はない
783 ：Name_Not_Found：2008/07/21(月) 03:55:11 ID:???
ここ初心者スレッドじゃないのか？
答えもしない馬鹿はどこかに行ってくれ
784 ：Name_Not_Found：2008/07/21(月) 04:00:35 ID:???
>>782
かまって君は氏んでくれ。
785 ：Name_Not_Found：2008/07/21(月) 05:04:33 ID:???
答えもしない馬鹿とは>>782,>>783,>>784,>>785 です。
786 ：Name_Not_Found：2008/07/21(月) 05:45:38 ID:???
>>781
最初から言えよ
書き間違いだっつの
787 ：Name_Not_Found：2008/07/21(月) 06:07:39 ID:???
ほら怒らせちゃった
慇懃無礼って知らんのか
788 ：Name_Not_Found：2008/07/21(月) 09:00:04 ID:8DScN+Oo
font-sizeの指定がいまいちわからないので質問します
サイズを％で指定するときは、親要素に対して何％かになるんですよね？
すると、一番上位のbodyのサイズはどう指定したらいいんですか？
12pxというようなピクセル指定でいいんでしょうか？
なるべくピクセル指定しないほうがいいという記事はよく読みますが
bodyはpxというか絶対値？で指定しないとその後の％の基準になるものがないような…

どう考えたらいいんですか？
789 ：Name_Not_Found：2008/07/21(月) 09:04:37 ID:???
* {
font-size:100%;
}

これで万事解決
790 ：Name_Not_Found：2008/07/21(月) 09:39:02 ID:8DScN+Oo
>>789
それ、試してみたんですが、Fx3で文字が全体的にものすごく大きくなって、
IE6ではあまり変化ありません（少し大きくなっただけ）
こういうものなんですか？　cssでは　120%などの形で指定してるので同じ比率に
なると思ってたんですが…

どうやって大きさそろえるんですか？　ハックつかうの？
791 ：Name_Not_Found：2008/07/21(月) 10:06:59 ID:???
ゴメンなさい　僕の勘違いでした　なんでもないです
>>789
ありがとう
792 ：Name_Not_Found：2008/07/21(月) 13:10:05 ID:???
* { font-size:100% }
html { font-size:12pt }

いちばん上だけポイント指定、残りは皆上に同じという指定。
793 ：Name_Not_Found：2008/07/21(月) 16:17:58 ID:???
>>792
それだとIEの文字サイズの変更機能が効かなくなりますよね?
ユニバーサルで100％指定だと各ブラウザ固有のサイズになっちゃうのかな・・・
多少の違いなんだろうけど、ブラウザごとの微妙な指定して、どのブラウザで同じような
サイズでかつ、文字サイズ変更もできるホスピタリティーに富んだ作成をするべきかな?
794 ：Name_Not_Found：2008/07/21(月) 16:23:53 ID:???
好きにすればいいけど、余計なお世話って言葉も思い出してね。
795 ：Name_Not_Found：2008/07/21(月) 18:33:39 ID:???
別に、全てのブラウザで全く同じ表示にしないといけないわけじゃないしな。
見やすくて内容が伝わればいい。
796 ：Name_Not_Found：2008/07/21(月) 20:38:59 ID:???
>>788
ルート要素(html)でfont-sizeを指定しなかったら初期値のmediumが割り当て
られるんじゃないかな。mediumにしておけばユーザーが設定したフォントサイズ
で表示されるので都合がいいだろう、と言われている。
797 ：Name_Not_Found：2008/07/21(月) 21:26:04 ID:???
>>794
わからんなら書くなよｗ解答できないお前こそ余計なお世話
798 ：Name_Not_Found：2008/07/21(月) 21:30:38 ID:???
回答になってない無駄レスが発生しました！
しかも解答だそうです！！
799 ：Name_Not_Found：2008/07/21(月) 23:59:58 ID:???
解答　→　問題を解いて答を出すこと。また、その答。「質問に―する」「模範―」
回答　→　質問・要求などに対する返事。答。「質問に―を出す」

いずれも広辞苑が出典ね。正直どうでも良いｗ
そんなことより>>798の全角のがどうかと
800 ：Name_Not_Found：2008/07/22(火) 00:11:12 ID:???
解いて答えるような高度な質問は来ないよ。君も全角だし…。
801 ：Name_Not_Found：2008/07/22(火) 08:15:07 ID:bjzOZyLU
初心者スレッドなんだから当たり前でしょ。何を今更・・・。
802 ：Name_Not_Found：2008/07/22(火) 12:17:06 ID:???
>>788です
* { font-size:100% }にしたところ（この時点ではデフォルトのmedium？）、
希望よりも大きすぎたので、その後、
body { font-size:90% } を追記して期待の大きさにしました
こんな感じの指定でいいんですかねー？
最初から* { font-size:90% }で良かったってことになるのかな
803 ：Name_Not_Found：2008/07/22(火) 12:35:58 ID:???
>>802
互換モードだと100%はsmallで標準モードだとmediumとして取り扱われるはず
804 ：Name_Not_Found：2008/07/22(火) 12:38:37 ID:???
途中で落としちまった
html { font-size:medium;} /*一度標準と互換の差をなくすよ！*/
body { font-size:90%;} /*どのブラウザもmediumの90%の大きさになるよ！*/

でOKなはず
805 ：Name_Not_Found：2008/07/22(火) 12:53:11 ID:???
>>804
横やりだが、とても参考になった。ありがとう。
ちなみにmediumの指定をすると、IEで文字の大きさって変えれる?
806 ：Name_Not_Found：2008/07/22(火) 13:33:16 ID:bjzOZyLU
>>802
*{font-size:90%}はダメです。
ダメじゃないけど。
<p>text</p>と
<p><span>text</span></p>
ではサイズが変わってしまいます。
二行目のテキストはpとspan分の90%が適用されてしまって81%になってしまいます。
これは入れ子が増えれば増える程小さくなってしまうということです。
807 ：Name_Not_Found：2008/07/22(火) 14:02:01 ID:???
>>806
なるほど！　ありがとうございました
808 ：Name_Not_Found：2008/07/22(火) 14:25:58 ID:???
>>805
mediumは相対指定だから変えられる
互換だと100%はsmall扱いになる。平時だとmediumは他のブラウザでもmedium
809 ：Name_Not_Found：2008/07/22(火) 14:26:44 ID:???
暑さでやられてるな
平時だと100%はmedium
IEって変なブラウザ
810 ：Name_Not_Found：2008/07/22(火) 16:52:54 ID:???
文字の大きさをチョコチョコ変えてるサイトって見づらい。
811 ：Name_Not_Found：2008/07/22(火) 17:06:11 ID:???
というか、仕事でやってるわけじゃないからいいんじゃね？
普通なら文字サイズなんてサイト作る前に決めることだし。
812 ：Name_Not_Found：2008/07/22(火) 17:12:20 ID:???
今までのやり取りと

＞仕事でやってるわけじゃないからいいんじゃね？
普通なら文字サイズなんてサイト作る前に決めることだし。

…という意見に何の関係もないような気がするのは俺だけだろうか
813 ：Name_Not_Found：2008/07/22(火) 17:18:26 ID:???
文字サイズなんてブラウザで設定してる
13pxで固定しないと小さすぎたり大きすぎたりするし
814 ：Name_Not_Found：2008/07/22(火) 17:24:57 ID:???
>>812
たぶん･･･>>810の文字の大きさをチョコチョコ変えてるっていう文章を
エスパー的に解釈したんだよ。

>>813
813なだけに13pxですか＞＜わかりません！

でも文字サイズ決めるのむずいよな。
815 ：Name_Not_Found：2008/07/22(火) 17:28:32 ID:???
>>814
迷ったら*{font-size:medium;}にして「大きかったら小さくしてみてね＞＜」って書けばいい
あるいは「大きいのと小さいのあるよ！」って感じでスクリプト仕込んだり
816 ：Name_Not_Found：2008/07/22(火) 17:57:05 ID:???
視力が人それぞれ違うんだから制作側で勝手に小さくするのはどうかと。
ブラウザでサイズ固定とか知らない人も居るだろうし。
817 ：Name_Not_Found：2008/07/22(火) 18:09:56 ID:???
色は本っ当に迷う。
818 ：Name_Not_Found：2008/07/22(火) 21:24:19 ID:???
初めから自分で好きなように変えてくれで作るのは良くない
基本的にはデフォルトでほとんどの人間は全て問題なく見れるものを作るべき
それプラスでカスタマイズ可能なように作る
819 ：Name_Not_Found：2008/07/22(火) 22:28:24 ID:???
a:link { color: red; }
a:visited { color: #8080ff; }
a:hover { color: #ffff00; }
a:active { color: red; }

こう書いた場合、全てのリンク要素に影響されてしまいます。
<ul
<li>この部分だけ</li>
</ul>
「この部分だけ」を装飾したい場合はどういう風に書けばいいのでしょうか？
820 ：Name_Not_Found：2008/07/22(火) 22:31:30 ID:???
>>819
質問の内容を脳内保管した部分があるけど、こういうことでいいのかな？

li a:link { color: red; }
li a:visited { color: #8080ff; }
li a:hover { color: #ffff00; }
li a:active { color: red; }

<ul>
<li><a href="#">この部分だけ</a></li>
</ul>
821 ：Name_Not_Found：2008/07/22(火) 22:36:08 ID:???
>>820
つたない文章で申し訳ありませんでした。まさにその通りです。
アドバイスありがとうございました。
822 ：Name_Not_Found：2008/07/23(水) 18:26:24 ID:???
質問します。
Vistaで制作してますが、IE6での体裁を見たくVirtualPCをインストールしました。
でもこの場合、一旦サーバーにアップしてからじゃないと、体裁の確認てできませんか?

ローカルでIE7とIE6両方で確認できる方法などありましたらお教えください。
また、先輩方は普段どのようにして、これらのUAの違いを確認していますでしょうか。
良きアドバイスなどありましたらお願いします。
823 ：Name_Not_Found：2008/07/23(水) 18:41:58 ID:???
体裁てｗｗｗ

全然上級者じゃないけど、
サイト作成ソフトでブラウザプレビュ→アドレスコピってIE６に貼り付ける
じゃダメなのか。サーバにアップしなくてもいっつも確認できてる。
つかMultipleIEとかIETester（重い）とかあるじゃないか
824 ：Name_Not_Found：2008/07/23(水) 18:49:35 ID:???
>>822
IE6そのものではなく、擬似IE6でいいならIETesterを使うという手がある。
製作中のスタイルチェック程度なら十分だと思う。
Iバグがある可能性があるので、最後の仕上げはVirtualPCで確認推奨だけどな。
825 ：Name_Not_Found：2008/07/23(水) 18:51:53 ID:???
>>822
MultipleIE
http://tredosoft.com/Multiple_IE
826 ：Name_Not_Found：2008/07/23(水) 19:08:40 ID:???
質問です。

.wrapper という親ボックスにclearfixを適用させたく、色々と「clearfix」で
ググッてみるとclearfixの指定方法にバラつきがあります。

一番多いのは「.wrapper」が id で、

<body>
<div id="wrapper" class="clearfix">
<div class="left">
本文 ～ 本文
</div>
<div class="right">
本文 ～ 本文
</div>
</div>
</body>

なのですが、「clearfix」をclass指定すること自体あまりきれいでないという
ことで親ボックスの直接指定の方がいいというのを見つけました。

今は「clearfix」のクラス名を「.wrapper:after」や「 * html .wrapper」などとし、
HTMLの方は<body> ～ </body>　の中を　<div class="wrapper"> ～ </div>
でくくっています。

長文で大変失礼しましたが、どちらの方がいいのでしょうか？
827 ：Name_Not_Found：2008/07/23(水) 19:19:18 ID:???
>>826
好みの問題じゃね？
というか前者の方が汎用性があると思うが
後者の方は、clearfix を適用させたい要素が増えるたびに

#foo:after, #bar:after { ... }
* html #foo, * html #bar { ... }
*:first-child+html #for, *:first-child+html #bar { ... }

というように記述する量が増えてくる
828 ：Name_Not_Found：2008/07/23(水) 19:22:20 ID:???
>>826
ついでにいうと class="wrapper clearfix" という風に複数指定できるのを
知らなかったということはないよな？
829 ：Name_Not_Found：2008/07/23(水) 19:40:54 ID:???
clearfixって何っすか？
830 ：826：2008/07/23(水) 20:08:45 ID:???
>>827, 028
さっそくのレス、ありがとうございました。
また仕事が忙しく遅くなりすみませんでした。
基本的に全ページ同じレイアウトで同じ親ボックスで構成していますので
このまま後者の方で行かせて頂きます。
ひょっとして間違っている（前者の方が正しい？）とかなり不安でしたので
安心しました。
>>828
一応検討していたのですが、「.wrapper」、「.wrapper:after」、「 * html .wrapper」
としてHTMLのクラス指定で「class="wrapper"」だけの方がすっきりしてて
いいのかな、と思っていましたので。
831 ：Name_Not_Found：2008/07/23(水) 20:43:52 ID:???
普通にwrapperに書けばいいんじゃないの？
832 ：Name_Not_Found：2008/07/23(水) 20:44:31 ID:???
>>829
むかし流行ったテクニック。死語。
833 ：822：2008/07/23(水) 21:46:25 ID:???
>>823-825
ありがとうございます。
>>822のURL行ってみたんですが英語でさっぱりでした。すいません。
翻訳したりしてダウンロードできるかなと思ったのですが、入り口が見つけられませんでした。
日本語解説ページでもないかとググってみたんですが勘が悪く見つけられません。

マルチプルIEってVistaで使えてるのでしょうか?翻訳したのを何となく読んだ限りでは
vistaの人は駄目ですみたいな感じでしたけど、私の見方が悪いのかも。
もう少し先輩方の手ほどきとアドバイスをくださいませ。
834 ：Name_Not_Found：2008/07/23(水) 21:50:37 ID:???
>>833
MultipleIE は vista には対応してないね
IETester なら導入も楽だからそっちを使えば？
835 ：822：2008/07/23(水) 22:06:33 ID:???
>>834
ありがとうございます。>>823さんのレスで重いと書いてあったのでついつい>>825さんの
マルチプルIEを開いて、それ一択になってました。すいません。

IEテスター使ってみます。
836 ：Name_Not_Found：2008/07/23(水) 22:11:57 ID:???
もはやcss関係ないだろ
837 ：Name_Not_Found：2008/07/23(水) 22:12:17 ID:???
*.class1 {}
*.class2 {}
*.class1.class2 {}
とかもできるわけだが
838 ：Name_Not_Found：2008/07/24(木) 09:34:49 ID:L7nc0J2I
テーブル構造について質問します
http://nullpo.vip2ch.com/ga20431.gif　のような構造のページを作っています
＊テーブルが左右に二つ並んでて、それがタテに（複数行）いくつも続いていて、
　各テーブルは左のtdに画像、右のtdにテキストが入っています。

そこで質問です
・現在、各テーブルというか表？は<table>で作ってますが、最近はやりのdt,ddを使った
　cssデザインの擬似テーブルにしたほうがいいのでしょうか？
・そもそも、あの擬似テーブルはどういうメリットがあるの？
・あの構造にしなければいけないときってどんなときですか？

また、現在は左のテーブルを float:left 右を float:rightとして、
そのニコイチをくくるdivにclearfixを設定してます
<div class="clearfix"><table class="floatLeft"></table><table class="floatRight"></table></div>
<div class="clearfix"><table class="floatLeft"></table><table class="floatRight"></table></div>
<div class="clearfix"><table class="floatLeft"></table><table class="floatRight"></table></div>
という形です　もっと賢いやり方はないでしょうか？
839 ：Name_Not_Found：2008/07/24(木) 10:42:17 ID:JnW2UN4M
質問です。

boxの定義で、widthだけ書かれていて、heightが書かれていないものが
あるのですが、この場合、boxのheightは、どういう値になるのでしょうか。

よろしくお願いします。
840 ：Name_Not_Found：2008/07/24(木) 10:44:44 ID:???
文字の大きさや画像の大きさや余白幅から勝手に調整される
841 ：839：2008/07/24(木) 11:45:22 ID:JnW2UN4M
>>840
レスありがとうございます。

その後に記述されたbox等が、全て、heightを記述していないboxの中に
入るということでしょうか?

よろしくお願いします。
842 ：Name_Not_Found：2008/07/24(木) 12:21:50 ID:V6shDYmY
>>839
boxのpadding
テキストのfont-sizeやline-height
画像のheight
等で決まります。
843 ：Name_Not_Found：2008/07/24(木) 12:25:57 ID:V6shDYmY
>>841
やり様です。
844 ：Name_Not_Found：2008/07/24(木) 12:25:58 ID:???
デザイン的なものじゃなければheightなんていらんべ。
845 ：Name_Not_Found：2008/07/24(木) 12:29:28 ID:???
>>841

<div id="a">
<p>aaaaa</p>
<p>bbbbb</p>
</div>
<div id="b"><img></div>

意味が分からないから解説する。ものすごく適当だからソースには突っ込まないでね。
aもbも高さは指定されていないとする。
aの高さは各p要素の文字サイズと行間の大きさで定まる
bの高さはimg要素の高さで定まる
当たり前だけれどaに高さを記述していないからといってbのimgの高さを含めるとかそんなわけではない
あくまでaは中にある要素の高さで定まるというわけだ
aの場合は縦paddingとmarginとfont-sizeとline-heigh
paddingとmarginはaというdivと二つのp要素それぞれを足したものね
846 ：Name_Not_Found：2008/07/24(木) 14:28:49 ID:???
質問させてください。

IE6以下の話です。
右フロートを使ってレイアウトしていて、メインとなる領域を縦に二つ配置しています。
右フロートですから右側の配置はきれいに収まってます。ですが左側に配置したい領域が
収まらず、右にフロートしてる領域最下段に配置されてしまいます。
他のブラウザではきれいに配置されます。

エスパー先生、お願いします。
847 ：841：2008/07/24(木) 14:31:45 ID:JnW2UN4M
レスありがとうございます。わかりました。
848 ：Name_Not_Found：2008/07/24(木) 15:47:06 ID:???
>>846
左側の領域が下に回りこむってことか。

IE6だけなら、その左領域にこれ入れると直るかもしれん。
margin-left:0px!important;
margin-left:-5px

下の-5pxは適当。IE6で見て収まるようになる適当な数値を見つけ出して。
849 ：Name_Not_Found：2008/07/24(木) 15:47:38 ID:???
フロート部分を覆うブロックの横幅を決める
ちゃんとclearする
ＩＥを標準モードにする
850 ：Name_Not_Found：2008/07/24(木) 19:11:57 ID:???
>>846
フロートの横幅が包含ブロックぴったりだと(30%+70%など)カラム落ち
することがあるらしい。他にもいろいろ考えられるので↓を読んでみては。
http://www.geocities.jp/multi_column/float/07.html
851 ：846：2008/07/24(木) 19:45:44 ID:???
>>848
そうです。いわゆるカラム落ちってやつです。
やってみましたところ、-10でようやく表示されました。
ただ、少し左にずれ込んでしまうのは致し方ないのでしょうか。
とにかく落ちずに表示させていただき、ありがとうございます。

>>849
＞フロート部分を覆うブロックの横幅を決める
　　決めてありました
＞ちゃんとclearする
　　クリアーしちゃったらフロートできません
＞ＩＥを標準モードにする
　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">を宣言しています。

>>850
確かにフローしてる横幅はピクセル単位でちょうどの数字を入れてます。
教えてもらったサイトで勉強してします。ありがとうございます。
852 ：Name_Not_Found：2008/07/24(木) 19:50:29 ID:???
まぁCSSは教えてもらうより自分で体験しないと分からないしな。
いろいろ試していけばいいさよ。
853 ：Name_Not_Found：2008/07/24(木) 19:54:33 ID:???
>>849は好い面の皮だなｗ
854 ：Name_Not_Found：2008/07/24(木) 19:59:10 ID:???
質問です。
leftとrightを指定すればwidthはいらないと思うのですが
ieでうまく表示されません。

そういうもんですか？
855 ：Name_Not_Found：2008/07/24(木) 20:00:08 ID:???
ハァ？
856 ：Name_Not_Found：2008/07/24(木) 20:08:56 ID:???
>>854
> leftとright
margin？　padding？　position？　float？　border？
floatだとしたら幅指定は文法規則
目安にもなるから四の五の言わず指定しろ
857 ：８５４：2008/07/24(木) 20:10:51 ID:WALn9ACK
positionです。
858 ：Name_Not_Found：2008/07/24(木) 20:35:00 ID:???
そういうもんです
859 ：Name_Not_Found：2008/07/24(木) 20:39:02 ID:???
positionは自動で中身にフィットする設定
860 ：８５４：2008/07/24(木) 20:45:33 ID:???
そういうもんですか。ありがとうございます。

外枠にあわせて、自動で伸び縮みしてくれると楽なのですが何とかなりませんか？
861 ：Name_Not_Found：2008/07/24(木) 20:49:48 ID:???
>>846
clearの使い方分かってない
862 ：846：2008/07/24(木) 21:49:22 ID:???
>>861
レスありがとうございます。
IE7や他のバージョンではきれいに表示されますが、
clearの使い方間違っているのでしょうか?
先輩さま、具体的に教えてくださると助かります。
863 ：Name_Not_Found：2008/07/24(木) 21:51:19 ID:???
具体的に質問してくださると助かります
864 ：Name_Not_Found：2008/07/24(木) 21:52:31 ID:???
>>862
＞clearの使い方間違っているのでしょうか?
使ってるわけ？
脊髄反射で聞き返さず、ググる事も大事だよ。
まあこんな事言うと火病起こす外野がいるけど。
865 ：Name_Not_Found：2008/07/24(木) 22:03:02 ID:???
具体的なソースを出してくれればすぐ解決するのにな
866 ：Name_Not_Found：2008/07/24(木) 22:11:17 ID:???
夏なんだよん
867 ：Name_Not_Found：2008/07/24(木) 22:22:45 ID:???
>>854
zoom:1;で直るような気がする。
868 ：Name_Not_Found：2008/07/24(木) 22:56:13 ID:???
初心者スレッドなのにいちいち反応するやつは何なんだ？
866はいらないからどこかに行ってくれ
869 ：866：2008/07/25(金) 00:55:29 ID:???
どうもすいませんでした。
870 ：Name_Not_Found：2008/07/25(金) 01:25:31 ID:???
あれ ?　俺がいる・・・
871 ：Name_Not_Found：2008/07/25(金) 07:46:11 ID:???
馬鹿な息子のために謝ってくれたんじゃねぇか
872 ：Name_Not_Found：2008/07/25(金) 09:43:06 ID:b4Dd26P5
<input type="text" /><input type="image" src="button.jpg" />

こういうinputが横に並んでいる場合、
均等の高さで揃えるには、どういうソースを書けばよいのでしょうか？
873 ：Name_Not_Found：2008/07/25(金) 09:54:44 ID:???
俺……いつの間に書き込んだんだ？
874 ：Name_Not_Found：2008/07/25(金) 11:18:33 ID:g+Elh5Ro
>>872
type="text"の方のheightをbutton.jpgの高さに合わせればいいんじゃね？
input{
height:ここに高さ;
}
875 ：Name_Not_Found：2008/07/26(土) 23:29:14 ID:???
質問させてください。
http://design.shop-pro.jp/
こういう感じのサイト作ろうと思ってるんですけど
訳あって全称セレクタ使えないんです。

ヘッダー部分、サイドメニュー部分は
例えば#header *でマージン０、パッディング０で
ヘッダー内は指定できますけど、
これじゃbodyのデフォのマージン、パッディングが残ってしまって
ページ上部のデザインがピタっと上にくっつかないんです。

全称セレクタを使わないで上にくっつける事ってできますか？？
横はmargin:0 auto;でなんとかなるのですが上下が…
position指定になるんですか？

876 ：Name_Not_Found：2008/07/27(日) 00:08:42 ID:???
>>875
body { margin: 0 padding: 0; }
877 ：Name_Not_Found：2008/07/27(日) 00:24:42 ID:???
>>876
レスありがとうございます。
その指定をするとbody内すべてに適用されると思ってしなかったんですけど
それでよかったんですねｗ

ありがとうございました。
878 ：Name_Not_Found：2008/07/27(日) 00:33:47 ID:???
>>876
もう見てないかもしれないけど>>876は
body { margin: 0; padding: 0; }

の間違い
879 ：Name_Not_Found：2008/07/27(日) 13:57:20 ID:???
> 訳あって全称セレクタ使えないんです。
と言いながら
> ヘッダー部分、サイドメニュー部分は
> 例えば#header *でマージン０、パッディング０で
> ヘッダー内は指定できますけど、
全称セレクタ使っているのがちょっと気になった。どうでもいいが。
880 ：Name_Not_Found：2008/07/30(水) 16:33:48 ID:nVHPgEeL
お願いします。
CSSで2カラムのサイトを作っています。
良くあるサイドメニューとメインコンテンツみたいなヤツです。
サイドメニュー部分はlistで作っています。
文字サイズも可変なように％で指定しています。

で、ここからなのですが、
メインコンテンツの部分の文字サイズを大きくすると、
メインコンテンツ部分て縦に長くなるじゃないですか？
その時にサイドメニュー部分も同じように長くなるようにしたいんですけど、
それってlistにどんな指定かけてもならないですよね？

その場合divでサイドとメイン部分を囲むしかないんでしょうか？
881 ：Name_Not_Found：2008/07/30(水) 16:38:08 ID:???
文字を大きくしたいってのが、
ブラウザで閲覧中に自由に大小したいってこと？
882 ：880：2008/07/30(水) 16:53:35 ID:nVHPgEeL
>>881
そうです。
閲覧者が自由に大きさを変えられるように％で指定しているのですが、
それをするとメイン部分が縦に伸びてしまうので・・・。

できるだけ、DIVで囲まないようにコーディングしたいと思っているのですが、
やはり大外枠と、ヘッダー、サイドメニュー、メインコンテンツ、フッターくらいは
大きく囲まないと無理なのでしょうか。
883 ：Name_Not_Found：2008/07/30(水) 17:56:27 ID:???
文字サイズを大きくすればリストも縦に長くなると思うんだけど、
divで囲めばうまくゆくのなら素直にそうすればいいんじゃない？
divでグループ化しておくとCSSの子孫セレクタが使いやすくなる
などのメリットもあるし。

最近のブラウザにはズーム機能が搭載されているから、文字サイズの
変更はあまり気にしなくてもいい気がする。
884 ：880：2008/07/30(水) 18:13:10 ID:nVHPgEeL
>>883
ありがとうございます。
リストの文字も確かに大きくなり、その分縦に伸びるのですが、
元々、メニュー部分より、メインの方が縦に長いので
メニュー部分には縦の長さ指定をかけていたんです。
メイン部分を文字数最大にしても釣り合いが取れるような長さを。
そうしたら、fireｆfoxとかではさらに大きく出来るってことがわかって。

で、困っていたんです。

最近のブラウザにはズーム機能がついてるなんてことも知りませんでした。
ありがとうございます。
もうDIVで囲っておきます。
885 ：880：2008/07/30(水) 18:13:59 ID:nVHPgEeL
文字数じゃなかった、文字の大きさ、でした、すいません
886 ：Name_Not_Found：2008/07/30(水) 22:08:28 ID:???
divで囲んだだけじゃ出来ないと思うけど
887 ：Name_Not_Found：2008/07/31(木) 11:10:14 ID:???
divで囲うのとulで既に囲ってあるのと、どう違うのか小一時間問い詰めたい
888 ：Name_Not_Found：2008/07/31(木) 13:13:15 ID:zI2suBwq
【　A　】
【B】【C】
【　D　】
こういう配置なのですが、Cが内容によって高さが可変します。
その際にBの高さを自動でCと同じにさせる事は可能でしょうか？
IEだとheight:autoで大丈夫そうでしたがfirefoxではだめでした。
889 ：Name_Not_Found：2008/07/31(木) 13:31:36 ID:???
>>888

ttp://blog.webcreativepark.net/2007/07/26-010338.html
あきらめてこれ使い出した
CSSじゃないけど
890 ：Name_Not_Found：2008/07/31(木) 13:55:01 ID:zI2suBwq
>>889
なるほど、私もテーブル構成の考え方を変えて色々試してみます。
891 ：Name_Not_Found：2008/07/31(木) 15:14:16 ID:???
>>880
亀レスかつやりたい事がよく解らんが、
文字サイズ変更時にサイドメニュー域の縦サイズも同比率で変えたいて事なのかな？
だったらサイドメニュー域の縦サイズ指定をemにしてみたら？とか思ってみた。
892 ：Name_Not_Found：2008/07/31(木) 20:39:55 ID:???
サイト下部に配置するページ内リンクの位置指定がうまくいきません

現在、外部cssファイルに
#btt { text-align: right; }
ｈｔｍｌ文章内に
<p id="btt"><a href="#top">▲ ＴＯＰへ戻る</a></p>

としていますが、どこが問題なのでしょうか？
やり方は下記ページを参考にしました
http://www.tagindex.com/stylesheet/text_font/text_align.html
893 ：Name_Not_Found：2008/07/31(木) 21:54:44 ID:???
ここ見れ
http://www.tagindex.com/stylesheet/box/float.html
894 ：Name_Not_Found：2008/07/31(木) 22:38:42 ID:???
>>888
http://coliss.com/articles/build-websites/operation/css/558.html
でできそう。
895 ：Name_Not_Found：2008/07/31(木) 22:55:10 ID:???
>>894
それアンカーが効かなくなるという致命的な欠点があるけどな
896 ：Name_Not_Found：2008/07/31(木) 23:15:19 ID:cYRBFUbk
>>888
【　A　】
【B　　C】
【　D　】
でやるよ。
897 ：Name_Not_Found：2008/08/01(金) 00:08:29 ID:???
ブログのエントリーなどでURLが長すぎるとボックスが落ちてしまうのですが、CSSを変更することでなんとかなりませんでしょうか？
どなたか教えていただけませんか？
898 ：Name_Not_Found：2008/08/01(金) 00:11:10 ID:Yt35d1e2
質問なんだけど、divタグの中に直にテキスト書いちゃまずい？
<div><p>text</p></div>みたいにいったんpタグの中に書いたほうがいいんでしょうか？
899 ：Name_Not_Found：2008/08/01(金) 01:08:06 ID:???
  　　　∧,,,∧
　　 （´・ω・)　＜ 知 ら ん が なぁ ～
　　 （U　　　)
　　　｀ｕ-ｕ´
900 ：Name_Not_Found：2008/08/01(金) 01:09:48 ID:???
img って、marginを0にしても、数ピクセルのマージンが
空いてしまうのでしょうか？

901 ：Name_Not_Found：2008/08/01(金) 01:19:01 ID:???
なして?
902 ：Name_Not_Found：2008/08/01(金) 01:28:14 ID:???
>>901
空いてしまうんです。上下は未確認ですが、左右のマージンが。
ひとつのhtmlファイルに imgタグだけ、何個も書いてテストしても、空いてしまいました。
903 ：Name_Not_Found：2008/08/01(金) 01:48:43 ID:???
>>900
かいぎょうではんかくスペースぶんあく
904 ：Name_Not_Found：2008/08/01(金) 02:20:35 ID:???
>>903
有難うございます！助かりました。
905 ：Name_Not_Found：2008/08/01(金) 20:10:15 ID:???
きゃりっじりたーんですね、わかります
906 ：Name_Not_Found：2008/08/01(金) 20:12:56 ID:???
とんでもないバグですね！
907 ：Name_Not_Found：2008/08/01(金) 21:23:47 ID:???
>>897
IEはword-break:break-all;でいいらしいよ。
908 ：Name_Not_Found：2008/08/02(土) 10:40:01 ID:8chpK6m6
質問です。

tableレイアウトで、
１行１列にコンテンツＡ、１行２列にコンテンツＢ、
２行１列にコンテンツＣ
と配置するのを、
CSSのボックスでレイアウトする場合、どう指定するのでしょうか？

次の配置の時との指定方法の違いが分かりません。
・１行１列にＡ、１行２列にＢ、１行３列にＣ
・１行１列にＡ、２行１列にＢ、３行１列にＣ

よろしくお願いします。
909 ：Name_Not_Found：2008/08/02(土) 12:21:13 ID:???
どっちが行でどっちが列か忘れたがｗ
ようは縦並びと横並びってことだよね
こういうのは段組って言うんだけど段組はfloat使ってやる
細かいことは「段組　ＣＳＳ」でググってくれ
910 ：Name_Not_Found：2008/08/02(土) 15:01:01 ID:???
すみません、質問です。

<body> </body> 内に親ボックスを置き、幅をpxで指定して
margin-right: auto;
margin-left: auto;
としています（後は背景画像等を設定しています）。

そしてメインコンテンツとサイドナビの子ボックスをそれぞれfloatで配置（もちろん幅も指定）
しています。

この子ボックスの中にそれぞれ角丸ボックスを背景画像で表示させています（top、middle、
bottomと分けて）。

問題は何故か IE (6も7も)のみ「middle部分」の背景が表示されなかったり、入力している
文字の上にかぶさったりしていることで、IE 6ではどちらかというと表示されないことが多く、
とりあえず文字だけは読めるので情報を閲覧者に読んでもらえるのですが、IE 7の方は文字の
上にかぶさっていることも多く、白色なのですがまったく読めない個所があります（そして
何故かクリックすると背景が消えて文字が現れることがあります）。

背景画像は元々はpngでしたが（IE 6用に用意していた）gifに変えても結果は同じで、いずれの
場合でも「横幅×1px」の画像です（これを背景に指定して縦方向にリピートしています）。

Windows ; Firefox 2, Safari 3　と、Mac ; Firefox 1.5 & 2, Opera 9.24　では問題なく表示
されているのですが、どうしても IE での表示不具合を直したく、弱り切っています。
どなたか光をお願いします。
911 ：Name_Not_Found：2008/08/02(土) 15:15:52 ID:???
＞この子ボックスの中にそれぞれ角丸ボックスを背景画像で表示させています（top、middle、
bottomと分けて）。
子boxの中に更に3個の角丸孫boxがあるのか、角丸の為に3個に分けてんのか？

＞「横幅×1px」の画像です（これを背景に指定して縦方向にリピートしています）
それじゃただのborderでわ。
912 ：Name_Not_Found：2008/08/02(土) 15:20:56 ID:???
>>910
z-index？
913 ：Name_Not_Found：2008/08/02(土) 15:21:13 ID:???
角丸のために3個に分けてんだろ。
その場合は、middleに画像使う必要はなく、背景色でいいだろ。
文字がかぶるって意味がわからんけど。
914 ：910：2008/08/02(土) 15:23:29 ID:???
>>911
レス、ありがとうございます。

＞子boxの中に更に3個の角丸孫boxがあるのか、角丸の為に3個に分けてんのか？
はい、「上部の角丸でタイトルなどを入れる部分」と「真ん中」、そして「下部の
角丸部分」です。
表示の不具合は「真ん中」部分で起こっています。

＞それじゃただのborderでわ。
ごめんなさい、よく分かりませんでした。
ただ先に書かせて頂いた通り「横幅×1px」の画像を背景に指定し、縦方向にリピート
しています。
この状態で IE 以外は思い通りに表示されています。
915 ：910：2008/08/02(土) 15:27:55 ID:???
>>912,913
皆様、多謝です。

>>912
いえ、z-index は使っていません。
ただ、そのような状態で表示されている個所もあります。

>>913
＞背景色でいいだろ。
とも思いますが、角丸ボックス（のように見せたいのですが）
にはドロップシャドウで影をつけていて、背景色にすると
上部と下部との（影の部分の）繋がりができないのです。
916 ：910：2008/08/02(土) 15:30:57 ID:???
連投すみません。

>>913
＞文字がかぶるって意味がわからんけど。

説明下手ですみません。
背景に指定している画像が、何故か文字の上に表示されているのです。

白色の単色のため、角丸ボックスがちゃんと表示されていて文字だけが
表示されていないのかと思いきや、うっすらと下に隠れている文字が
見えている状態です。

本当に困っています。
917 ：Name_Not_Found：2008/08/02(土) 18:18:44 ID:???
>>916
＞うっすらと下に隠れている文字が見えている状態です。
はあ？半透明かよ？
918 ：Name_Not_Found：2008/08/02(土) 18:26:11 ID:???
ソースも出さず、見ずに回答

　夏　だ　な　あ
919 ：Name_Not_Found：2008/08/02(土) 19:51:50 ID:???
なんでソースがいるんだよ。
ソース出せとか言う奴は盗作したいだけだろ
920 ：Name_Not_Found：2008/08/02(土) 19:57:17 ID:???
>>919

　盛　夏　だ　な　あ
921 ：Name_Not_Found：2008/08/02(土) 20:08:59 ID:???
>>919
アホ ! 　後出し条件がいくつも出てきてるだろ ?
ソースをだせば余計な説明は不要になるんだよ。
それだけ解決策が早くでるんだ。


あっごめん。ソース読めない人だった ? >919
922 ：Name_Not_Found：2008/08/02(土) 20:24:59 ID:???
ソースを整理することで自己解決することもよくある
923 ：Name_Not_Found：2008/08/02(土) 20:36:09 ID:???
自分でまともに作れないような奴の盗作してどうすんだよ・・・
924 ：Name_Not_Found：2008/08/02(土) 20:54:04 ID:???
回答してる人間は、ソースはいらんと判断して答えてるわけだ。
ソースが必要だと思うなら、そう質問者に言えばいいだけなのに、
なぜ一々回答側に絡むんだ？
クソ性格悪い奴が常駐してるよな。
925 ：Name_Not_Found：2008/08/02(土) 20:56:09 ID:???
まあこのスレだけじゃないから。もはや2ch全部そんな感じ。
926 ：Name_Not_Found：2008/08/02(土) 20:57:42 ID:???
貧民が増えたから
927 ：Name_Not_Found：2008/08/02(土) 21:00:02 ID:???
ええー
928 ：Name_Not_Found：2008/08/02(土) 23:33:59 ID:???

　な　ん　な　ん　だ　こ　の　低　ラ　ベ　ル　は！！！
929 ：Name_Not_Found：2008/08/02(土) 23:39:30 ID:???
>>928

　夏　な　ん　だ　よ　！！
930 ：Name_Not_Found：2008/08/02(土) 23:50:05 ID:???
>>924
>回答してる人間は、ソースはいらんと判断して答えてるわけだ。

もう少し勉強してから回答してくれ。
931 ：Name_Not_Found：2008/08/03(日) 01:57:36 ID:???
貧民登場
932 ：910：2008/08/03(日) 09:56:25 ID:???
すみません、昨日５時までこのスレをチェックしてたのですが、その後いきなり
系列店に応援に行かされ、いまやっと読めました。
私の不用意でスレを荒れさせて申し訳ありませんでした。

最初にソースを出さなかったのは長くなるのでその方が皆さんの顰蹙を買うかな、
と思い、昨日のようにしました。

>>917
＞半透明かよ？
はい、先の説明でも書かせて頂いた通り、透過PNGとGIF、両方あります。
ただしGIFにしても状況は変りません。

もしまだソースを出して見て頂ける方がおられたら出させて頂きますが、奇特な
方はおられますでしょうか？
933 ：Name_Not_Found：2008/08/03(日) 10:00:43 ID:???
IE6透過使えないよ
934 ：Name_Not_Found：2008/08/03(日) 10:54:35 ID:???
>>933
使えるよ。
935 ：910：2008/08/03(日) 10:57:00 ID:???
>>933
すみません、今日も仕事でレス遅くなりました。
IE6 にはGIFを使うつもりで両方（透過PNGとGIF）用意していました。
ただしいずれにせよ「縦方向にリピートで背景に指定している場合」、
表示されないか文字の上にかぶってしまっています。
936 ：910：2008/08/03(日) 11:12:14 ID:???
@import やメニュー部分など、あれこれと端折っていますが、
それでも長いですがCSSを貼らせて頂きます。

しつこいとかご非難頂くようであればやめますので半時間ほどしてから
書込みさせて頂きます。
937 ：908：2008/08/03(日) 11:50:58 ID:NaYUoZMR
>>909
レスありがとうございます
938 ：910：2008/08/03(日) 11:59:22 ID:???
スレ汚しスマソですが、以下ソースの抜粋です。

/*全称セレクタ*/
* {
font-size: 100%;
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
background: transparent;
text-decoration: none; }

#wrapper {
background-image: url(hoge.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 0 bottom;
width: 820px;
margin-right: auto;
margin-left: auto; }
939 ：910：2008/08/03(日) 12:00:21 ID:???
/* for modern browser */
.clearfix { display:�inline-block; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac ¥*/
* html .clearfix {
height: 1%;
}

.clearfix { display: block; }
/* End hide from IE-mac */
940 ：910：2008/08/03(日) 12:01:15 ID:???
/*メインコンテンツ*/
.contents {
width: 550px;
float: left;
padding-top: 20px;
padding-bottom: 50px; }

/*角丸ボックスの真ん中部分*/
.ctsection {
background-image: url(middle.png);
background-repeat: repeat-y;
margin-left: 25px;
padding-top: 10px; }

/*角丸ボックスの上部分*/
.ctsectiontop {
background-image: url(top.png);
background-repeat: no-repeat;
height: 25px;
margin-top: 20px;
margin-left: 25px; }

/*角丸ボックスの下部分*/
.ctsectionbottom {
background-image: url(bottom.png);
background-repeat: no-repeat;
height: 15px;
margin-left: 25px; }
941 ：910：2008/08/03(日) 12:01:48 ID:???
/*サイドバー（こっちにも角丸ボックスありますが省略）*/
.navi {
width: 270px;
float: right;
padding-top: 20px;
padding-bottom: 50px; }

.footer {
width: 820px;
clear: both;
border-top: 1px solid #fff; }
942 ：910：2008/08/03(日) 12:03:12 ID:???
以上、エラーがでたので分けて送信させて頂きました。

clearfix はいらないのかな、とも思うのですが、他にご指摘頂けましたら
幸いです。
よろしくお願い致します。
943 ：Name_Not_Found：2008/08/03(日) 14:59:34 ID:???
ほれほれ、ソース出せ言ってた奴、答えろよ。

>>910
あんたもね、ソースそのまま貼る必要ないんだ。
最小ソース、この場合角丸部分だけ出せばいいんだ。
それにより、自分でも問題の切り分けが出来るって事なんだよ。

で、オレは問題は画像にあると思うが、半透明ではなく、
普通のベタ塗りgifで確認したのかよ？
半透明gifをどうやって作った？
944 ：910：2008/08/03(日) 15:07:40 ID:???
・・・みなさん、大変申し訳ありません。
自己解決しました・・・。

前からfloat指定で背景画像が消える（IEだけの）バグは知ってたのですが
widthを指定するのを親要素だけと勘違いしていました。

実際は角丸ボックスに指定したら見事に解決できました！

それと>>943、最小ソースでよかったんですね。
スレ汚し＆スレ浪費、申し訳ありませんでした。

でも２週間以上悩んでいたので本当によかったです。
まだこれから IE6 対策が残っていますが、ほんとよかった・・・。
945 ：Name_Not_Found：2008/08/03(日) 15:10:16 ID:???
＞＞半透明かよ？
＞はい、先の説明でも書かせて頂いた通り、透過PNGとGIF、両方あります。
pngとgifがある、白色単色、としか説明されてないし、
半透明かどうかなど、ソース見てわかる話でもない。
グダグダ関係ない話ばかり書いて肝心な事は書かないパターンだ。
946 ：Name_Not_Found：2008/08/03(日) 18:14:56 ID:DVdNUECP
この板を見ているとdiv厨とか、divを使ったら負けとかの書き込みを良く見るのですが、
CSSの参考書を読んでると殆どdivを使うのが当たり前ぐらいに多用されています。

divを使う事はいけないことなのでしょうか？
947 ：Name_Not_Found：2008/08/03(日) 18:24:33 ID:???
>>946
好きなだけ使えばいいけどかっこわるいわな。
俺は笑われてもかまわんので多用する。考えてる時間がもったいない。
BODY の中がほとんど DIV と A だけのこともある。
948 ：Name_Not_Found：2008/08/03(日) 20:47:57 ID:DVdNUECP
>>947
＞かっこわるい

divを使わずに組むほうが難易度が高いという理由ですか。
同様の理由だと思いますが、spanもかなりの嫌われようですね。

初めはとくにこだわりを持たずに勉強してみます、ありがとうございました。
949 ：Name_Not_Found：2008/08/03(日) 21:05:32 ID:???
>>948

違うよ。
DIV だらけだと、まるで意味付けされてない HTML になってしまうから
かっこわるい。
950 ：Name_Not_Found：2008/08/03(日) 22:01:33 ID:???
まず見出し、段落、リストなどのタグを使ってきちんとした文書を作る。
その文書を装飾するためにCSSを使うのだが、
使用したタグだけではデザインしきれないときにdivやspanを使えばいい。
951 ：Name_Not_Found：2008/08/03(日) 22:40:15 ID:DVdNUECP
>>949-950
深いお言葉ありがとうございます、レスを参考に精進してみます。
952 ：Name_Not_Found：2008/08/04(月) 04:56:01 ID:???
つまらんヲタの価値観なんか気にすんな
953 ：Name_Not_Found：2008/08/04(月) 15:28:57 ID:5AE5e/aF
ttp://blog.ninja.co.jp/Preview/MASTER/4360/
現在使用しているブログはユーザー自作のスタイルがテンプレとして
配布されているのですが、それを多少調整したいのです。
具体的に言うと、現在はブログのエントリーが左、各ボタン(プラグイン)が右
という構成になってますが、これを逆にしたいのです。
対象はお手数ですが上のリンク先のソースを閲覧してください。

#EntryBlock{
background : url(http://bfile.shinobi.jp/4360/08_wp.gif) repeat-y right top #F2F2E1;
float : left;

■ プラグインのデザイン

**************************************************************************************/
#PluginBlock{
float : left;
width : 250px;
margin : 0 0 0 -250px;
background-color: #1C1811;
color : #C3BE9F;}

このあたりのright leftをいじっても無理でした・・・
954 ：Name_Not_Found：2008/08/04(月) 16:49:23 ID:???
>>953
ざっと見た感じ、修正する必要がある部分はこんだけかな

#EntryBlock {
background: #f2f2e1;
float: right;
}
.EntryInnerBlock {
margin:10px 0 30px 250px;
}
#PluginBlock　{
float : left;
0 -250px 0 0
}
955 ：954：2008/08/04(月) 16:51:18 ID:???
>>954
記入ミス
#PluginBlock　{
float : left;
margin: 0 -250px 0 0;
}
956 ：Name_Not_Found：2008/08/04(月) 17:25:08 ID:???
ありがとうございました。
しかし、こんな風にずれてしまったようです。
ttp://imepita.jp/20080804/626120

一つお聞きしたいのですが、

#EntryBlock {
background: #f2f2e1;

は

background : url(http://bfile.shinobi.jp/4360/08_wp.gif) repeat-y right top #F2F2E1;

の全てと置き換えるのでしょうか？
957 ：Name_Not_Found：2008/08/04(月) 17:29:54 ID:70VUF2at
なんで書籍にdivばっかり使ってあるかというと異なるブラウザに対応するため
ボックス単位でこまかな調整しなきゃならないんでdivで統一しておいたほうが
わかりやすくていいんだよ
FirefoxとIEの地獄の調整やったことのある人ならdivの有り難さがわかるはず
958 ：Name_Not_Found：2008/08/04(月) 17:52:15 ID:???
>>956
>の全てと置き換えるのでしょうか？
そういうこと

他にも修正箇所があったんでまとめてうｐしといた
ttp://www.vipper.net/vip583793.zip.html
959 ：Name_Not_Found：2008/08/04(月) 19:51:57 ID:???
本当に丁寧にありがとうございました。
とても助かりました。
960 ：Name_Not_Found：2008/08/04(月) 20:14:35 ID:???
ちなみに、矢継ぎ早に注文して申し訳ないのですが、
この状態で、エントリーの長さを調整するにはどうすればいいのでしょうか？

エントリーの「width : 100%;」を500～1000の間でいじりたいのですが、
ここを触ると、崩れてしまうみたいです。
961 ：Name_Not_Found：2008/08/04(月) 21:09:19 ID:???
おんぶにだっこかい！！
962 ：Name_Not_Found：2008/08/05(火) 00:25:58 ID:???
なんで>>958がzipにしてまで全部してやったのかというと、
面倒くさいからだよ。>>960お前が。
ここはお前のためだけのスレじゃない。お前の下らない自己満足の
デザインに付き合って、レスを消費させるほど暇……なんだけど実際。

cssわかってないなら用意されたデザインを使え。
カスタマイズしたいならcssを少しでも理解すべき。

とりあえずcssの初心者講座行くなりして勉強して来い。
勉強して、検索して、それでもわからなかったらここに来い。
963 ：Name_Not_Found：2008/08/05(火) 00:57:49 ID:???
>>961
>>962
了解しました。長期的にはその方がいいと思いますので
勉強してきます。ありがとうございました。
964 ：Name_Not_Found：2008/08/05(火) 22:13:23 ID:???
質問です。
IE や Firefox で html 上の半角二重引用符が
全角二重引用符に自動的に置換されてしまいます。
この設定を css 上でリセットすることができましたら、その方法を教えてください。
半角二重引用符はコードの解説などで使用しています。
コードを textarea 内に入れれば済むのですが、
今までに半角二重引用符をたくさん使ってしまったのでできれば避けたいです。

この現象について色々なキーワードでググったのですが検索単語が悪いのか全然見つかりませんでした。
よろしくお願いします。
965 ：Name_Not_Found：2008/08/05(火) 22:27:35 ID:???
１．ブラウザ上では全角に見えるフォントで表示されてんじゃないの？
問題のテキストをコピーして、メモ帳とかに貼り付けると全角になってるの？
引用符のコードはU+0022？

２．もしくは、エディタで編集した時に全角の引用符を使っていた。
エディタの表示フォントのせいで半角に見えただけで実は全角だった。
いわゆる「全角」引用符のコードに「半角」幅のグリフを持ってる欧文フォントは結構あるよ。

どちらにしてもコードが変更されることはありえない。
フォント設定の問題。
966 ：Name_Not_Found：2008/08/05(火) 22:28:10 ID:???
>>964
↑こういうのかな？
実態参照に置き換えればいいのでは？
967 ：Name_Not_Found：2008/08/05(火) 22:44:55 ID:???
必要最低限な情報が欠けているからエスパー判断だが
blogとかじゃねーの？
自動変換される場合がある。
968 ：Name_Not_Found：2008/08/05(火) 22:49:38 ID:???
>>965
おっしゃる通り、欧文フォントのせいでした。
css のフォント指定を日本語フォントにしたところ表示がなおりました。
問題のテキストをコピペすると全角になっていたのでてっきりブラウザのせいだと思ってました。
ご丁寧に開始引用符と終了引用符になっていたんですよね。
何にせよ、ありがとうございました！
969 ：Name_Not_Found：2008/08/05(火) 22:53:24 ID:???
あ、いや、半角かと思ったらコピペしたらやはり全角のままでした。
おそらく >>967 さんのおっしゃる通りです。wordpress のせいです、きっと。
ここまで分かれば後は何とかなりそうです。みなさんありがとうございました！
970 ：Name_Not_Found：2008/08/05(火) 23:38:29 ID:???
(´-`).。ｏＯ（どこまで後出しすれば気が済むのだろう・・・）
971 ：Name_Not_Found：2008/08/06(水) 10:43:14 ID:???
(´-`).。ｏＯ（解決するまでだよ、きっと・・・）
972 ：Name_Not_Found：2008/08/07(木) 00:09:31 ID:Iz0YkrOl
background-color: #ff0000;
として、特定の箇所の背景に色を付けています。

これを色を付けないようにする、
つまりスタイルを無効にする方法ってないでしょうか？
973 ：Name_Not_Found：2008/08/07(木) 00:15:25 ID:???
class を使う
974 ：Name_Not_Found：2008/08/07(木) 00:22:56 ID:???
自己レスです。
background-color:transparent;
で背景を無効（透明）に出来ました。
975 ：Name_Not_Found：2008/08/07(木) 05:48:54 ID:???
背景無効じゃない。そりゃ引継ぎって意味だ
976 ：Name_Not_Found：2008/08/07(木) 06:52:40 ID:BctddRnY
質問です。

<style type=text/css>
<!--
a:link {color:#00ccff;text-decoration:none;border-bottom:2px dotted hotpink;}
a:visited {color:#0000ff;text-decoration:none;border-bottom:2px dotted hotpink;}
a:active {color:#ff0000;text-decoration:none;}
a:hover{color:#ff0000;text-decoration:overline underline;}
-->
</STYLE>

こうしてページ全てのリンクに下線がつくようにしているのですが、
画像にリンクをつけた場合にも下線が出てしまうのを
なくす方法はないでしょうか？
よろしくお願いします。
977 ：Name_Not_Found：2008/08/07(木) 10:28:08 ID:???
img{border:none;}
978 ：Name_Not_Found：2008/08/07(木) 10:34:05 ID:???
初心者というかなんというか
979 ：Name_Not_Found：2008/08/07(木) 13:01:24 ID:BctddRnY
>>977
レスありがとうございます。

<style type=text/css>
<!--
a:link {color:#00ccff;text-decoration:none;border-bottom:2px dotted hotpink;}
a:visited {color:#0000ff;text-decoration:none;border-bottom:2px dotted hotpink;}
a:active {color:#ff0000;text-decoration:none;}
a:hover{color:#ff0000;text-decoration:overline underline;}
img{border:none;}
-->
</STYLE>

上記のようにしてみたのですが、やはり画像にも下線が出てしまいましたorz
解釈のしかたが違うのでしょうか？
980 ：Name_Not_Found：2008/08/07(木) 13:52:03 ID:???
a img {border:none;}
981 ：Name_Not_Found：2008/08/07(木) 14:07:03 ID:???
すみません、説明し難い問題ですが質問させて下さい。

図のように１（上）２（下）に分かれたフレームを利用したサイトを製作しており、
それに、CSSでbackground-imageで外枠のような画像を１，２に入れております。
______________
|1 |
|--------.|
|2 |
|____________.|

２の部分が下に長くなった場合、２のみスクロールが表示され、１にはスクロールが表示されないので
２の方がスクロールバー分だけ左にずれてしまいます。
なにか良い解決法を教えていただけないでしょうか、よろしくお願いします。
982 ：Name_Not_Found：2008/08/07(木) 17:21:46 ID:???
スクロールバーを出す
983 ：Name_Not_Found：2008/08/07(木) 17:46:16 ID:???
リンクをその周りと同じ色にしたいと思い、
a{　color: inherit !important; }
としました。ＩＥではうまくいかなかったのですが
Ｏｐｒｅａではうまくいったので出力の違いだと思い、

ＩＥにも対応させる方法として、
（その親の選択子名が hoge だとして）
hoge *{ color: (色名); }
を使おうと思っているのですが、これ以上に簡単な書き方はあるでしょうか。
教えてください。お願いします
984 ：Name_Not_Found：2008/08/07(木) 18:05:49 ID:???
>>983
IEには対応してない
わざわざ書き分けるという面倒なことをしなくても、a { color: #fcc !important; } という風に
直接指定すればいいんじゃないの？
985 ：Name_Not_Found：2008/08/07(木) 18:17:48 ID:fv5MkkX5
画像をセンタリングするのに２時間かかってもできないのです・・・
初心者な質問すぎて申し訳ないです！
（テンプレも読んだのですが上手く行かず）

<div style="text-align: center;"><img ほにゃ/></div>

ならうまくいくのですが、CSSを別ファイルにして

test.css:

.centering{text-align: center;}

test.html:

<div class="centering"><img ほにゃ/></div>

とすると左寄せになってしまいます。centering クラスの中に
margin: 0px auto;
display: block;
やら何やらいろいろ足してみてもだめです・・・何が間違っているのでしょうか？
986 ：Name_Not_Found：2008/08/07(木) 19:08:22 ID:???
>984

ありがとうございます。そうします
987 ：Name_Not_Found：2008/08/07(木) 21:40:52 ID:???
>>985

.centering {text-align: center;}
の後に

div {text-align; center;}
などスタイルが上書きされていないかい？
988 ：Name_Not_Found：2008/08/07(木) 22:01:10 ID:fv5MkkX5
>>987
お返事ありがとうです！

スタイルのあとがきは無いです・・・
あーもーCSS辛いです・・・すいません愚痴って。
半日使って画像を真ん中に持って来れないなんて
もうアホすぎてイヤになりますよー（涙）
989 ：Name_Not_Found：2008/08/07(木) 23:09:53 ID:???
>>988
CSSの部分だけでもうｐしてくれたら見てやる
990 ：Name_Not_Found：2008/08/07(木) 23:21:31 ID:???
ずいぶん偉そうやね ?
991 ：Name_Not_Found：2008/08/08(金) 00:06:26 ID:???
大橋巨泉ですから
992 ：Name_Not_Found：2008/08/08(金) 10:12:41 ID:vi4AXgy0
table をつくってそのセルを覆う様にDIVの箱を表示させようと考えています。
その際、ｔａｂｌｅの罫線を表示されないように（ＤＩＶの箱の線だけ表示される）ようにするにはどのようにＣＳＳを設定すればいいのでしょうか？
普通にやると、tableとＤｉｖ両方の線が表示されてしまいます。
993 ：Name_Not_Found：2008/08/08(金) 12:45:37 ID:tb3aGjRy
divをテーブルに囲うのか？テーブルにマージンを左右上下置けば解決しねぇか？後はdivにボーダーひく事だきゃ。
994 ：Name_Not_Found：2008/08/08(金) 12:50:18 ID:???
>>993

自己解決ですが、z-index使ったらうまくいきました。
995 ：Name_Not_Found：2008/08/08(金) 12:57:06 ID:tb3aGjRy
まあいいんじゃね。質問自体がタグとスタイルみないと具体的にわからんよ。
996 ：Name_Not_Found：2008/08/08(金) 13:05:06 ID:???
float left rightみたいなtop bottomってないかな。

htmlでは
div A
div B
と記入するけど表示では
div B
div A
とやりたい。
997 ：Name_Not_Found：2008/08/08(金) 14:07:50 ID:RWLcqhpU
初心者ですが
CSSで位置指定してみたら同じTOPから100pxでも表示位置がIEとFFで違うんですけど、これって仕様ですか？
998 ：Name_Not_Found：2008/08/08(金) 14:11:40 ID:???
>>997
各ブラウザの仕様
W3C勧告に沿ってるのはFFの方
999 ：Name_Not_Found：2008/08/08(金) 14:18:29 ID:RWLcqhpU
>>998

ありがとです
IE6だと長めに表示されるみたいなのでFFに合わせてかなり長めに位置指定しなきゃいけないですね
1000 ：Name_Not_Found：2008/08/08(金) 14:41:19 ID:???
>>999
デフォルトで各要素のmarginとかpaddingの幅も違ったりするから
* {
　margin: 0;
　padding: 0;
}
みたいな事やってからだと、手間は増えるけど比較的あわせ易いよ
1001 ：１００１：
このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。