08/05/31 12:57:36 vOJ5MKRX
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
URLﾘﾝｸ(hp.vector.co.jp)
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
URLﾘﾝｸ(www.microsoft.com)
参考「IEとNNのBOXの計測方法の違いについて」
URLﾘﾝｸ(www.fromdfj.net)
Q2: tableなどブロック要素をセンタリングするには？ text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に5.）をご覧ください。
1.'text-align'に関する考察
URLﾘﾝｸ(anslasax.net)
2.IE5.5とNetscape6のCSS - 中央寄せ
URLﾘﾝｸ(tancro.stp-1.com)
3.Internet Explorer 6におけるCSSの拡張
URLﾘﾝｸ(www.microsoft.com)
4.Tableのセンタリング
URLﾘﾝｸ(members.jcom.home.ne.jp)
5.ブロックレベル要素をセンタリングする方法
URLﾘﾝｸ(www.mozilla.gr.jp)
3:Name_Not_Found
08/05/31 12:58:18 vOJ5MKRX
【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
URLﾘﾝｸ(www.fromdfj.net)
CSS段組レイアウトデザ委員会
URLﾘﾝｸ(web.archive.org)
スタイルシートでマルチカラムデザインの実現
URLﾘﾝｸ(web.archive.org)
スタイルシートでマルチカラム・デザインを実現する方法
URLﾘﾝｸ(www.motchie.com)
tableを使はない段組:CSSによるマルチカラムデザインについての考察
URLﾘﾝｸ(members.jcom.home.ne.jp)
試驗場 - 段組(position版)
URLﾘﾝｸ(members.jcom.home.ne.jp)
段組れいあうとてすと (floatによる段組の例)
URLﾘﾝｸ(www.remus.dti.ne.jp)
なかよしぱれっと（Netscape4でも崩れない段組みの実例）
URLﾘﾝｸ(web.archive.org)
リストを用いたレイアウト
URLﾘﾝｸ(css.maxdesign.com.au)
4:Name_Not_Found
08/05/31 12:58:56 vOJ5MKRX
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: まずclear忘れがないかを確認してください。
floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
URLﾘﾝｸ(www.remus.dti.ne.jp)
またfloat:left;で回り込むのはテキスト（imgを含む）だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
URLﾘﾝｸ(www.mozilla.gr.jp)
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
URLﾘﾝｸ(web.archive.org)
URLﾘﾝｸ(web.archive.org)
overflowを用いた擬似フレーム
URLﾘﾝｸ(www.fromdfj.net)
レイアウトサンプル 擬似フレーム
URLﾘﾝｸ(www.rju666.com)
Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
「スタイルシート 縦中央(垂直中央)」参照のこと。
URLﾘﾝｸ(chaichan.hp.infoseek.co.jp)
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。
Q7:背景画像を二つ指定するにはどうするか。
A7:CSS2.1ではbackground-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
もしくはCSS3を待ちませう。
5:Name_Not_Found
08/05/31 12:59:38 vOJ5MKRX
【FAQ】
Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
URLﾘﾝｸ(www.remus.dti.ne.jp)
Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？
a:link img, a:visited img, a:hover img {border:none;}
NN4は URLﾘﾝｸ(cssbug.at.infoseek.co.jp) 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
Q10: リンクを新しいウィンドウで開かせるにはどうしたら？
A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。
Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
URLﾘﾝｸ(www.mozilla.gr.jp)
Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ（A3）を見なさい。
「いままでの HTML との対照」
URLﾘﾝｸ(www.tg.rim.or.jp)
URLﾘﾝｸ(www.tg.rim.or.jp)
URLﾘﾝｸ(www.tg.rim.or.jp)
HTML でのレイアウト指定の、 CSS での指定との対応表
URLﾘﾝｸ(deztec.sakura.ne.jp)
6:Name_Not_Found
08/05/31 13:00:19 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
URLﾘﾝｸ(www.stunicholls.myby.co.uk)
7:Name_Not_Found
08/05/31 13:41:06
【初心者向けの解説】
正しい知識を得たい人の爲のCSS2リファレンス
URLﾘﾝｸ(hp.vector.co.jp)
【構文チェック】
W3C Markup Validation Service
URLﾘﾝｸ(validator.w3.org)
W3C CSS Validation Service
URLﾘﾝｸ(jigsaw.w3.org)
【ブラウザのバグリスト】
CSSバグリスト＠CSSバグ辞典スレッド
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
【仕様書】
CSS 2.1 Specification
URLﾘﾝｸ(www.w3.org)
8:Name_Not_Found
08/05/31 13:56:58
しかし今時IE6をデフォルトで使用してる層なんてのは、
自動アップデートをONにしてるような連中だから、
大半はXPsp3にもアップデートしつつあるんじゃないか？
となるとIE6組はIE7に移行しつつある流れと読んでいいか？
9:Name_Not_Found
08/05/31 15:44:25
>>8
しかし、SPとかIEの自動更新って、インストール確認があるんじゃないか？
10:Name_Not_Found
08/05/31 16:02:42
IE7は許す。たから6は早く死んでくれ！
11:Name_Not_Found
08/05/31 16:11:39 TR9K27KZ
cssを使った表組みをしたいのですが
下記のような1ピクセルの線で横2、縦5程度の
表はどのようなソースになりますでしょうか？
参考ページ
URLﾘﾝｸ(www.photocreate.co.jp)
12:Name_Not_Found
08/05/31 17:21:22
>>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
08/05/31 17:27:03
>>11
border-collapse: collapseがポイント
14:Name_Not_Found
08/05/31 17:37:50
マジレス。
<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
08/05/31 17:50:38
>>8
Win2k組も多いよん
16:11
08/05/31 17:57:12 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
08/05/31 18:23:40
>>16
クラスセレクタ使えばよいのでは。
<table class="hoge">
table.hoge {}
table.hoge th {}
table.hoge td {}
18:11
08/05/31 18:42:30 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
08/05/31 19:13:29
>>18
<table class="hoge">をstyle要素の中に書くんではなくて、スタイルを
変えたいtable要素のタグに class="hoge" と書く。
20:Name_Not_Found
08/05/31 19:15:30
それから URLﾘﾝｸ(www.kanzaki.com) を読むといいよ。
21:11
08/05/31 19:27:43 TR9K27KZ
すんません
タグを書いていただけるとフムフムとわかりやすいのですが・・・
>>それから URLﾘﾝｸ(www.kanzaki.com) を読むといいよ。
よんでみます
22:Name_Not_Found
08/05/31 19:50:00
スタイルシートは、これで
<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
08/05/31 20:22:36
>>17
できるよ。
以上。
はい、次。
24:935
08/06/01 00:07:33
*{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
08/06/01 00:09:29
<!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
08/06/01 00:22:11
>>25
なんのheightよ？どこにも指定してないだろ。
何度も言われてる事だが、floatやpositionした要素には高さが無いんだよ。
それを踏まえて、質問を具体的に書け。
27:Name_Not_Found
08/06/01 00:43:14
>>25
> CSSではなく、htmlがおかしいのでしょうか？
その通り
28:Name_Not_Found
08/06/01 02:03:39
エスパーレスするとFirefoxとIEでの表示の違いをまず書いてくれ。
隙間が出来るっていうのも解釈が違うからだし。
29:11
08/06/01 09:59:16
>>22
39
できました
30:30
08/06/01 15:52:48
#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
08/06/01 15:53:08
/*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
08/06/01 15:55:57
基本高さは指定するな
33:Name_Not_Found
08/06/01 15:57:43
高さ指定したら文字サイズ変えた時みれたもんじゃなくなるぞ
34:30
08/06/01 16:05:25
すいません。
テストとして作ったものなので、高さとか指定してあります。
本番用は高さは指定していなくボックス内の各要素のmarginやpaddingの値をemで指定して、
要素の大きさによってそれぞれのボックスが拡大縮小するようになっています。
それでも質問させていただいてる現象が発生してしまいます。
あと本番用はMovableTypeとYahoo YUI のリセット用のCSSを参考にして適用しています。
35:Name_Not_Found
08/06/01 16:09:29
>>30
＞margin-topを指定したときFireFoxだと#headerのボックスごと下にずれてしまいます。
そんな事ないが。
36:30
08/06/01 16:25:19
>>35
上記質問にて提示させていただいた、全く同じソースでずれないということでしょうか？
あと申し訳ありませんが、ちょっとで外出しなくてはならなくなってしまいましたので、
１８時以降にまた期待と思います。
37:Name_Not_Found
08/06/01 16:31:28
疑り深い上に王様www
38:Name_Not_Found
08/06/01 16:46:41
>>36
まさに慇懃無礼。
その糞ソースで確認したのかよってお前に聞きたいわ。
お前の糞ソースで、どうやってブロックがずれたってわかるんだ？
つまりお前は確認なんかしてない。
39:Name_Not_Found
08/06/01 19:17:00
言葉を慎みたまえ
君はr
40:Name_Not_Found
08/06/01 19:57:59
YUIのリセットよさげかと思って見てみたが無駄なの多すぎてイラネ
41:Name_Not_Found
08/06/07 20:09:38 ZlGJaVPN
ｽﾚﾘﾝｸ(hp板:261-262番)
誘導されてきました。
なぜなのでしょうか？まだCSS暦は短いですが
思ったとおりにできないとなんかすっきりしません。
何方か教えてください。
42:Name_Not_Found
08/06/07 20:16:10
標準モードになってないからググレ
43:Name_Not_Found
08/06/07 20:21:04
>>41
DOCTYPEとかの確認が必要。
特にxml宣言、すなわちDOCTYPEより前に特定の文字があると互換モードなるIE６のバグとかがあるから注意。
URLﾘﾝｸ(rmt.sub.jp)
↑少し前に書いたドキュメントだが、参考にしてみてくれ。
44:Name_Not_Found
08/06/07 20:25:27
宣伝乙
45:Name_Not_Found
08/06/07 22:18:42
>>43
宣伝でも良いさ
少しは知識が増えた ありがと
46:Name_Not_Found
08/06/07 22:28:23
自演乙
47:Name_Not_Found
08/06/07 22:45:04
>>46
悲しいな
48:Name_Not_Found
08/06/07 22:52:26
忙しいな
49:Name_Not_Found
08/06/07 23:05:54
ボックスサイズの解釈のバグはIE6で直ってるんじゃなかったっけ、
と思ってテンプレのサイトを見たらやっぱそうだった。
50:Name_Not_Found
08/06/08 12:03:22
floatを解除するために<div class="clear"></div>を入れているのですが、空要素というのが気持ち悪くて…
いい方法があれば教えて下さい。（left,rightの行数は固定ではありません）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "URLﾘﾝｸ(www.w3.org)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Test</title>
<style type="text/css">
<!--
* { 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
08/06/08 12:06:36
bottomにつければ？
52:Name_Not_Found
08/06/08 13:30:31
うむ、bottomでclearだな常考
53:50
08/06/08 13:46:27
>>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
08/06/08 14:11:23
clearfix
55:Name_Not_Found
08/06/08 14:31:20
おれがよく使うのは<br style="clear;both;"/>
56:Name_Not_Found
08/06/08 14:37:52 bIGDOlXW
>>53
まああまり考えなくても大丈夫だと思うよ
ソースなんて極一部の人しか見ないから
57:50
08/06/08 16:23:24
>>54-56
ありがとうございます。
clearfix でぐぐって
div#main:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
としたらうまくいきました！
58:Name_Not_Found
08/06/08 16:38:03
わざわざclearfix・・
59:Name_Not_Found
08/06/08 18:47:37
#main { width:100%; overflow:hidden }
じゃ駄目なんかい。
60:Name_Not_Found
08/06/08 18:48:39
div#main { overflow: auto }でよくね？
61:Name_Not_Found
08/06/08 19:14:58
>>59-60おまいら・・・
62:Name_Not_Found
08/06/09 06:57:11
>>61
何さ
63:Name_Not_Found
08/06/09 07:18:42
overflowじゃ無理だよ
64:Name_Not_Found
08/06/09 07:32:56
無理じゃねーよ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "URLﾘﾝｸ(www.w3.org)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Test</title>
<style type="text/css">
* { 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
08/06/09 08:20:01
あー、ごめん試した時幅指定してなかったわ
66:50
08/06/09 11:43:33
>>58-65
レスありがとうございます。
どうして overflow でできるんだろうと思ったら
overflow:hiddenでfloatをclear - とその理由
URLﾘﾝｸ(gyauza.egoism.jp)
overflow を visible（初期値）以外に指定すると float した要素の高さが無視されなくなるのですね。
勉強になりました！
67:Name_Not_Found
08/06/09 23:56:55
IEと狐で表示するとほとんどが位置がずれてるので
ちまちまとアンダースコアハックで調整してますが、こんなものでしょうか？
発狂しそうです。
68:Name_Not_Found
08/06/10 00:11:25
ずれない書き方を覚えればハックはあまり使わない。
AlphaImageLoader 使うときにスターハックするくらいか。
69:Name_Not_Found
08/06/10 00:26:36
そうですか・・ やはり一般的じゃないんですね しんどすぎるし
ずれない書き方というのがわからないのでまだまだひよっこですな
本を読みあさります
ありがとうございました。
70:Name_Not_Found
08/06/10 00:30:57
とりあえず標準モードになっとるのかね？
標準モードなら1pxのずれも許さないとかじゃなければ
そんなに問題ないと思うけど
71:Name_Not_Found
08/06/10 01:17:13
げー、互換モードでした
基本的なスペル間違いで反映されない・・と悩みまくる馬鹿をお許しを。
72:Name_Not_Found
08/06/10 01:18:07
俺もはじめはアンダースコアハック使いまくりだった。
そのうち分かってくるようになるよ。
CSSは頭の中でイメージするからどうしても慣れないと。
73:Name_Not_Found
08/06/10 01:32:55
>>72
なりますか！
がんばります
74:Name_Not_Found
08/06/10 02:36:27
IE6 がこれ以上悪くなることはないので、地雷の場所だけ覚えれば
すいすい歩けるようになるよ。
75:Name_Not_Found
08/06/10 05:15:36 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が表示されず、
背景色がでてくれません。
どうすればいいのでしょうか。。。
URLﾘﾝｸ(coliss.com)
これを試したことがあるのですが、DW上での表示がおかしくなるので、
できれば使いたくありません。
これ以外で高さの異なるカラムをそろえる方法はありますでしょうか。
76:Name_Not_Found
08/06/10 06:21:39
おー、そのＵＲＬのすごいじゃん
覚えとこう
ってことでない
だからそのハックが存在する
77:Name_Not_Found
08/06/10 08:35:47
display:tableを使えばできるけど、IE6,7が対応していない。
URLﾘﾝｸ(blog.ibnet.ne.jp)
table要素を使えば楽勝なのだが…
78:Name_Not_Found
08/06/10 09:37:23
少なくとも後５，６年は使えんな
79:Name_Not_Found
08/06/10 09:51:49
>>75
いろいろ方法がある
・#mainを#naviと同背景色にする
・#naviの背景を画像にしてrepeat-y
etc.
80:Name_Not_Found
08/06/10 12:03:35
背景画像を bottomから貼り付けるようにしたらダメかな
81:Name_Not_Found
08/06/10 13:07:18
手書きでcssを書いてるのがそろそろしんどくなりました
Dreamweaverとか使うと少しはラクになりますか？
アプリケーションなどを使ってcssの設定など出来ることって
どの程度なんでしょうか・・・
tableタグを使わなくてレイアウトできたり
javascript無しでマウスオーバーできたりだと便利なのですが
おすすめなソフトありますか？
82:Name_Not_Found
08/06/10 13:19:27 6gBqT8An
>>81
Dreamweaverしか分かりませんが便利といえば便利ですよ。
僕は特定の機能だけ使ってあとはテキストエディタですけど
>>81さんは手書きでもできるようですから後から書き換えたりもできるでしょうし。
各デモ版なんから試してみては？
Dreamweaverは最低限の機能ならHTML+CSSを知っていれば
マニュアルは参照程度で使えるでしょう。
83:Name_Not_Found
08/06/10 13:20:32
TopStyle
84:Name_Not_Found
08/06/11 03:36:27 /9YP68KZ
table { width: 100% }
と指定してあるのを、<table class="foo"> のときだけ width: の指定を
なしにしたいんですが、どうしたらいいですか。
.foo { width: none }
としたけどだめでした。
85:Name_Not_Found
08/06/11 04:08:24
ほかのにclassつけにゃしょうがないだろ
86:Name_Not_Found
08/06/11 11:04:05
>>84
.foo { width:auto; }
87:Name_Not_Found
08/06/13 06:12:25
下記ソースで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
08/06/13 06:13:18
#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
08/06/13 06:55:57
それそれれボーダーを付けて表示して見ればすぐ判るぞ。
90:Name_Not_Found
08/06/13 07:09:12
#headにborder{ 1px solid #000}としてボーダーを付けると上にくっ付きました
borderを0pxにするとまた離れました
理屈が分からないのですが、どういう事なのでしょうか
また、ボーダーを付けたくないのですが、どうすれば良いのでしょうか
91:Name_Not_Found
08/06/13 07:29:01
border:none
ま、試してみれ
92:Name_Not_Found
08/06/13 07:33:05
試してみたのですが、くっ付いてはくれませんでした
やはり、borderを設定するしかないのでしょうか
93:Name_Not_Found
08/06/13 09:38:50
どこかで margin か line-height が変なふうに働いてると思われるから
しらみ潰しに調べて修正するか
あるいは float を使う。
くっつけたいブロックに float を付けて、全体を別の要素で囲む。
94:Name_Not_Found
08/06/13 10:55:51
#logoのmarginを消すとくっ付く様になりました
しかし、これだと位置調整が出来ないですね…
出来ればあまり使いたくはないのですが、大人しくfloatを使おうと思います
95:Name_Not_Found
08/06/13 11:02:09
>>94
#headにoverflow: hidden; でいけるんじゃない？
96:Name_Not_Found
08/06/13 11:07:37
>>95
凄いです、いけました
理論的な部分で理屈を説明して頂けると嬉しいのですが、自分でも調べてみて理解を深めようと思います
>>95氏とお答え頂いた皆様、本当にありがとうございました
97:Name_Not_Found
08/06/13 11:20:09
すみません…
いけたのはいいのですが、#head内で#logoの後にpタグで文章などを入れると、文章が見えなくなりました
やはりfloatにします
98:Name_Not_Found
08/06/13 12:06:36
>>94
padding使えばいいじゃん
99:Name_Not_Found
08/06/13 12:19:12
clearfix
100:Name_Not_Found
08/06/13 13:20:56
height いらんだろ
101:Name_Not_Found
08/06/13 16:04:41
>>96
理論的じゃないソース書いといて、理論的な理由求められてもね。
102:Name_Not_Found
08/06/13 17:19:02
>>98
paddingを#logoに使うと表示がおかしくなってしまうのです
他の箇所でしたらごめんなさい
>>99
clearfixを#logoや#headに適用してみたのですが、#logoの表示は綺麗に出来るのですが
その後に続く要素の表示が思う様にいきません
>>100
h1にheightを指定しないと、文字サイズを変更した時にはみ出してしまうので出来ないのです
>>101
要はDKIRを使えれば良いのですが、理解が足りない為に目的と手段が入れ替わってしまっていますね…
確かにおかしなソースになっていると思います
一度最初から見直して考えてみます
皆様ありがとうございました
103:Name_Not_Found
08/06/13 17:43:33 hXfj5S8G
HTMLは大体分かるのですが、CSSを勉強し始めたばかりなので
教えてください。
テキストリンクに下線をつけるように外部CSSで指定しているのですが
画像のリンクにも画像の下に点線が付いてしまいます。
画像には下線をつけないようにしたいのですが、どのように
指定したらよいのでしょうか？
外部CSSファイルの元は無料で提供されていたものを流用しています。
a link:などの記述はなく、
div#main a{
border-bottom:1px dotted #333;
}
と書かれています。すみませんが、ご教授下さい・・・。
104:Name_Not_Found
08/06/13 18:54:11 wjGrrnlW
img {
border:none;
}
105:Name_Not_Found
08/06/13 19:53:36
無料で提供…？
106:Name_Not_Found
08/06/13 20:08:04
あれだろ
CSSの解説サイトとかで、説明してる記述をそのままコピーして使うんだろ
107:Name_Not_Found
08/06/13 20:37:34
CGIかなんかのスキンいじってるとか
108:Name_Not_Found
08/06/13 22:53:09
IEだと高さが目いっぱい伸びてるんですが
FireFoxだとcontainで指定した#fffが途中で切れて背景色になってしまいます。
IEと同じように再現するにはどうすればいいんでしょうか？
body{
background:#000;
}
#contain{
height:100%;
background:#fff;
}
109:103
08/06/14 00:35:07 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
08/06/14 01:16:57
>>109
a.img_link {
border: 0;
}
とかしておいて、<a class="img_link"><img src... /></a>とすればいいかな。
本来リンクの下線はtext-decorationで指定するもので、
borderでやるのはどーかと思うけど。
111:Name_Not_Found
08/06/14 01:34:58
質問です。
URLﾘﾝｸ(www.free-css-templates.com)
知識が無いので、このテンプレートを改造して使用したいと思っているのですが、
ダウンロードしたものを開いてみると、左側の背景色が右側と同じになっている等の不具合があります。
「ページを保存」からダウンロードしたものでも、同様な症状がみられます。
どなたか解決策を教えてください。
ヨロシクお願いします。
112:Name_Not_Found
08/06/14 01:36:05
img {
border:none;
}
を
div#main a{
border-bottom:1px dotted #333;
}
div#sub a{
border-bottom:1px dotted #333;
}
の後に書く
113:Name_Not_Found
08/06/14 01:37:43
>>112
それじゃ駄目でしょ。imgの親要素に下線付いちゃってるんだから。
114:Name_Not_Found
08/06/14 01:41:26
>>111
左側の背景画像が表示されていないのが原因じゃないの？
というか、知識もないのにテンプレート丸ごと使うのは如何なものかと
115:Name_Not_Found
08/06/14 01:43:49
background-image: url(images/background.gif);
background-repeat: repeat-y;
background-color: #292929;
実はこれ、背景色指定じゃなくて、画像指定なのよね
きちんと画像を読まなければ右も左も一緒に表示されてしまう
不具合ではないんだけど、画像を表示しない環境の対策のために
htmlとかdiv要素に黒色指定した方が親切っちゃあ親切なんだよね
ソース直すやる気なんてないけど
116:Name_Not_Found
08/06/14 02:07:53
aタグにborder使いまくりだぜ
117:Name_Not_Found
08/06/14 11:27:25 9kVTALgt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"URLﾘﾝｸ(www.w3.org)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<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
08/06/14 11:28:31 9kVTALgt
>>117 について質問です。
IE7とFirefoxでは期待通りに表示されるのですが、IE6でみると「詳細1」が「text2」の枠の下に表示されてしまいました。
URLﾘﾝｸ(coliss.com)
を見て、.box に height:1% を追加したところIE6でもIE7,Firefox 同様に表示されました。
上記サイトでは「IEのhasLayoutが原因」とあるのですが、なぜIE7では最初から正しく表示されたのでしょうか？
また、対策として「height:1%」を使ったのですが弊害はないのでしょうか？
*{zoom:1;} がおすすめのようですが、テンプレ >>7 の W3C CSS Validation Service で引っかかるのであまり使いたくないのですが・・・
119:Name_Not_Found
08/06/14 11:32:20 0I5yDPib
positionで段組するの止めたほうがいいよ
120:Name_Not_Found
08/06/14 12:00:22
>>118
＞上記サイトでは「IEのhasLayoutが原因」とあるのですが、なぜIE7では最初から正しく表示されたのでしょうか？
MSはバグだらけのIE6を放置し、バージョンアップという姑息な手段でバグはなかったと言い張る会社だから。
＞また、対策として「height:1%」を使ったのですが弊害はないのでしょうか？
他のブラウザで自分で確認してみろ。
＞*{zoom:1;} がおすすめのようですが、テンプレ >>7 の W3C CSS Validation Service で引っかかるのであまり使いたくないのですが・・・
そんなに100点取りたいなら、IE6は見捨てろ。
121:Name_Not_Found
08/06/14 12:10:12
position:absoluteで位置を決めたタグを回り込ませる方法を教えてください。
URLﾘﾝｸ(07055944295.com)
↑ここの右上の人物はposition:absoluteを使っているようなのですが
どうやって文字のまわりこみをさせているのか理解できません。
ヒントだけでも教えていただけましたらうれしいです・・・
122:121
08/06/14 12:18:34
すいません。なんとなくわかってきました。
123:Name_Not_Found
08/06/14 12:21:13
>>118
.boxにwidth: 600px;でくずれないと思う
それから.box1のmargin-right: 80px;はいらないんじゃない
.box1と.box2の間は.boxのwidthの値で決まってくるよ。
124:111
08/06/14 12:46:43
>>112-115
返信レスありがとうございます。
いままで4回ほどテンプレートを改造してサイトを作った経験があったので、
またどうにかなると思ったのですが、、、
とりあえず、.left系の背景色を#212121（濃いグレー）、.rightを#292929（薄いグレー）にしてみたところ
おしい感じになりました。
あと、左側が下まで濃いグレーになって、リンクのホバーが働いてくれると良いのですが・・・
ちなみに、この方法ってあまり良くない方法なのでしょうか？
125:111
08/06/14 12:52:27
すいません。リンクのホバーは自己解決しました。
126:103,109
08/06/14 14:03:43 M9+lFfsl
レスありがとうございます。
>>110
class指定してみたのですが、変わらず、です。
記述の場所が悪いのでしょうか？どこに記述すると決まっていますか？
>>112、113
img {
border:none;
}
をそれぞれの下に書いてみましたが、やはり変わりません。
どこか他にチェックすべきタグはありますでしょうか？何度もすみません。。。
127:Name_Not_Found
08/06/14 14:13:17 ZDSWUO0+
スポーツカーDQN男の家族消えろ スポーツカーDQN男の親消えろ スポーツカーDQN男の子供消えろ スポーツカーDQN男の親戚消えろ
スポーツカーDQN男の家族消えろ スポーツカーDQN男の親消えろ スポーツカーDQN男の子供消えろ スポーツカーDQN男の親戚消えろ
スポーツカーDQN男の家族消えろ スポーツカーDQN男の親消えろ スポーツカーDQN男の子供消えろ スポーツカーDQN男の親戚消えろ
スポーツカーDQN男の家族消えろ スポーツカーDQN男の親消えろ スポーツカーDQN男の子供消えろ スポーツカーDQN男の親戚消えろ
ニヤニヤ(・∀・) ニヤニヤ(・∀・) ニヤニヤ(・∀・) ニヤニヤ(・∀・)
死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね
死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね
死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね
死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね死ね
苦しんで死ね 苦しんで死ね 苦しんで死ね 苦しんで死ね 苦しんで死ね 苦しんで死ね 苦しんで死ね
死ぬとき このレスの事思い出してから地獄へ行けよ
ニヤ(・∀・)ニヤ(・∀・)
128:Name_Not_Found
08/06/14 15:05:16
>>126
UAによって仕様が違うんだからしかたないだろ。
imgにlinkを指定しないか、dottedはあきらめるかしろ。
129:Name_Not_Found
08/06/14 16:06:02 6aDEyTFB
>>126
div#main img {
border:none;
}
これでは？
130:Name_Not_Found
08/06/14 16:19:34
ボタンのフォントに関する質問です。
URLﾘﾝｸ(www.google.co.jp) などのボタンのように、
button要素と、buttonタイプのinput要素を、
ブラウザの標準フォントで表示させるには
どうすればよいでしょうか。
body, td, a, p, .h {font-family:arial,sans-serif;}
が継承されているようなのですが、
font-family:arial,sans-serif;
を自分のページに適用させても、
他の要素はメイリオになっているにもかかわらず、
ボタン要素だけはゴシックで表示されてしまうのです。
よろしくお願いします。
131:117
08/06/14 16:34:41
>>119 >>120 >>123
レスありがとうございました。
132:Name_Not_Found
08/06/14 16:56:05 6aDEyTFB
input, textarea {
font-family: "メイリオ", meiryo, arial, sans-serif;
}
これでどう？
133:110
08/06/14 17:27:53
>>126
クラス指定はどこに書いてもいいよ。
これでダメだとCSSファイルにミスがありそう。
どこかでセミコロンを入れ忘れてるとか、
編集してるCSSファイルが実は読み込まれてないとか。
>>129
img要素のborderを消しても意味ない。
ボーダーはa要素に付いてるから。
134:Name_Not_Found
08/06/14 17:39:23 6aDEyTFB
>>133
あーそっか・・・
じゃぁborderやめて通常のアンダーラインにするしかなさそうだね
135:Name_Not_Found
08/06/14 17:51:27
imgのaにborder:none;つけりゃいいじゃん。
136:130
08/06/14 18:01:27
>>132さんありがとうございます。
button要素を使っていたので、
button {
font-family: "メイリオ", meiryo, arial, sans-serif;
}
にしたのですが、だめでした。
HTMLの方をinputにして
input, textarea {
font-family: "メイリオ", meiryo, arial, sans-serif;
}
を試してみましたがやっぱりゴシックのままです。
僕のPCがおかしいのかな。
137:Name_Not_Found
08/06/14 18:05:49
>>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
08/06/14 18:06:54 6aDEyTFB
>>135
それだとブログだった場合は結構大変だったりしないかい？
通常のWebページなら毎回その作業しなくて良いから問題なさそうだけどね
139:130
08/06/14 18:09:39
名前欄忘れましたが、
>>130=136=137 です。一応。
140:Name_Not_Found
08/06/14 18:11:40
>>136
Firefoxでも確認してみた？
141:130
08/06/14 18:14:49
>>140
Firefoxだと URLﾘﾝｸ(www.google.co.jp) でもゴシックなんですけど、
もしかして他の方はブラウザの標準フォントだったりするんですか？
142:110
08/06/14 18:16:02
>>137
おっとそうだね。訂正サンクス。
143:Name_Not_Found
08/06/14 18:30:45
>>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
08/06/14 21:41:58
文法の質問です
CSSはブロックコメント(「/**/」のような)しかないようなのですが
CSSの策定過程で1行コメント(「//」のような)の導入が検討されたことはないのでしょうか？
145:Name_Not_Found
08/06/14 21:57:03 zz1MmsQJ
リンクについて良く分からない部分が出てきたので質問させて下さい。
文字リンクは元々のラインを消して、線種を変えてラインを表示しています。
画像リンクはリストで一つずつ線を作って囲んでいるのですが、
その際に、文字リンクで指定してあるリンクのラインが消えてくれるのですけど
これは環境によって不都合が出てしまいますか？
画像リンクはwidthとheightを指定してborder:1px solid #;で囲っています。
146:Name_Not_Found
08/06/14 22:05:58
>>103
vicunaのテンプレサイトに説明が書いてあったような気がした
147:Name_Not_Found
08/06/14 23:05:05
>>145
＞これは環境によって不都合が出てしまいますか？
複数ブラウザでの確認くらい自分でしろ
148:Name_Not_Found
08/06/14 23:20:26 zz1MmsQJ
>>１47
火狐さんとoperaさんとIE0.6では確認しました。
ですが、これらもWinの話で、こちらからでは問題無かった表示が
閲覧者の方には崩れてたりするみたいです。
とりあえず、リンクで指定したラインが無視されて
liで指定したボーダーが優先される事に問題が無いのならそれで良いのですが…。
149:Name_Not_Found
08/06/14 23:21:05 TyrFMHyr
IE0.6って・・・
150:Name_Not_Found
08/06/14 23:28:56
sageも出来ないIEの表記もまともに出来ない初心者に答えるもんはねぇよ
そんなに気になるならその閲覧者(笑)とやらに確認でも頼んだら良いだろ
つかまだ他の質問者の回答も出て無いのに空気読めないの？
2ch五年ＲＯＭってろ低能
151:Name_Not_Found
08/06/14 23:32:06
質問スレでは質問者がageるのが慣例だと思うが。
つーかageとかsageは本当はどうでもいいんだよ。
152:Name_Not_Found
08/06/14 23:34:02
0.6……IEのクソさを表現するにはいい言葉だ
153:Name_Not_Found
08/06/14 23:37:32
すいません、IE0.6というのは間違った表記だったのですか、
以前見かけてそれが通例なのだと勘違いしていました
154:Name_Not_Found
08/06/14 23:40:29
>>153
現状考慮すべきブラウザはIE6.0とIE7.0かな。Fxにあわせれば、必然的にOperaもいけるはず
で、text-decorationについて
* {
text-decoration:none;
}
とするほうがスマート。で、必要な箇所のみに後で付与するほうが賢いね
155:Name_Not_Found
08/06/14 23:50:31 dayJETtL
上げ足鶏とかちょっとした勘違いで叩くようなことするなよ
上級者スレみたいになるだろがボケが
156:Name_Not_Found
08/06/14 23:52:14 9zyTiuCo
>>150
今の時代にサゲろとか言うやつも珍しいよ
それは5～10年ぐらい前の2ｃｈだｗ
157:Name_Not_Found
08/06/14 23:52:51
まあ揚げ足というより今回は完全に間違ってるようだが…
158:Name_Not_Found
08/06/14 23:54:33
>>155
揚げ足で無くて間違いを指摘しただけだが？
159:Name_Not_Found
08/06/14 23:56:00
IE6.0ですよって優しく教えてあげればいい
160:Name_Not_Found
08/06/14 23:58:47
おまえが教えりゃ済む話
161:Name_Not_Found
08/06/14 23:59:32
質問者の皆さんは>>150みたいなのはスルーすればいいともうよ
162:Name_Not_Found
08/06/15 00:00:36
なんか香ばしいのが来てるな・・・
>>150とか>>160とか・・・
163:Name_Not_Found
08/06/15 00:03:19
俺のゲームサイトではいまだにIE6が一番多いな。
IE6、7、Fxに最適化すれば取りあえずオッケー。
つい癖でIE表示みながらデザインしちゃうけどね。
164:Name_Not_Found
08/06/15 00:05:20 wsivoz5w
>>154
あばばばばｂ、IE6.0！お恥ずかしい。
>必要な箇所のみに後で付与するほうが賢いね
リンクだけを改めて書き直す事にします。
リストタグと組み合わせて使う事は諦める事にしました。
まだ良く分からない部分があるので、もう少し精進してから使うようにします。
回答ありがとうございました！
165:Name_Not_Found
08/06/15 00:06:41 ll214GxM
俺のサイトは
IE6＝5割
IE7＝2割
Firefox＝2割
その他＝1割
こんな感じ
166:Name_Not_Found
08/06/15 00:10:10 wsivoz5w
>>165
まだIE6が多いんだな･･･
俺も確認とは別にIE6使ってるけど
167:Name_Not_Found
08/06/15 00:12:04
>>166
ID見えてますよ初心者さん^^;
168:Name_Not_Found
08/06/15 00:15:47 ll214GxM
自演するわけでもないのにID見えて困る事はないだろ
169:Name_Not_Found
08/06/15 00:17:57
＞火狐さんとoperaさん
どの面下げて言ってんだか・・・
170:Name_Not_Found
08/06/15 00:21:49
俺、ID出したいからageてたら、sageろだったし、
sageて、NG用に酉つけたら、酉外せといわれたな
171:Name_Not_Found
08/06/15 00:24:03
>>169
敬称つけた方が良いと思っただけだ
172:144
08/06/15 00:26:05
どなたか>>144ご存知の方いらっしゃいませんか…？
173:Name_Not_Found
08/06/15 00:26:55
>>172
何言ってるのかわかりません
174:144
08/06/15 00:31:21
>>173
何言ってるのかわからない、というのは>>144の質問内容のことでしょうか？
175:Name_Not_Found
08/06/15 01:07:53
>>174
文法どうこう言ってる位だから、当然1.0～2.1仕様書は読んだんだろ？
策定過程なんてW3Cに聞いて来い。
176:Name_Not_Found
08/06/15 01:31:44
よくわからんけど、コメントを簡単にしたいってことか？
177:144
08/06/15 01:52:42
>>175
ご存知の方がいらっしゃるかと思って質問したのですが…
>>176
ブロックコメントだけだと
/*
/* h1 { color: red } *//*
h2 { color: blue }
*/
のように入れ子にしようとしたとき面倒だな、と思っていまして
Cのようなブロックコメントは導入して
1行コメントを導入しなかったのは何故だろうと疑問に思ったので質問しました
今の文法規則のままでも規則集合などが不正になるようにすればそれは無視されるのでいいのでしょうが
それを1行コメントと言い張るのもどうかと思いますし
178:Name_Not_Found
08/06/15 02:11:36
>>177
やっぱり読んじゃいねえ。言い張る前に読めよ、これ以上アホを晒すな。
179:144
08/06/15 02:19:07
>>178
正直全ては読めていません。すみません
該当箇所をご存知でしたら教えていただけないでしょうか？
180:Name_Not_Found
08/06/15 02:40:02
>>179
全て読めと誰が言った。commentsで探す知恵も無いとは呆れたわ・・・
181:144
08/06/15 03:00:55
>>180
2.1でいうと4.1.9ですか？
182:Name_Not_Found
08/06/15 03:25:38
正直、>>144は場違いだと思う。
というわけでふさわしいと思うスレに誘導。
ｽﾚﾘﾝｸ(hp板)
183:Name_Not_Found
08/06/15 05:50:06
ここは解答者も初心者なので>>144の質問の意味が理解できる者はいないのです
184:Name_Not_Found
08/06/15 06:04:55
いつまでたっても低ラベルなんだよねぇ・・・
185:Name_Not_Found
08/06/15 12:17:55
ここは一つ、>>111の話題に変えてみませんか？
186:Name_Not_Found
08/06/15 12:20:00
お断りだ
187:Name_Not_Found
08/06/15 15:21:09
>>144
一応こんなのがあるよ。
URLﾘﾝｸ(www.w3.org)
1行コメントはほしいけれど新しいsyntaxの導入は互換性の問題が生じるから
導入されることはないだろうね。
188:Name_Not_Found
08/06/15 15:30:55
ぬるぽ
189:144
08/06/15 15:48:04
>>187
こういう文書があるのは初めて知りました。本当にありがとうございます。
> 1行コメントはほしいけれど新しいsyntaxの導入は互換性の問題が生じるから
> 導入されることはないだろうね。
そうですね…。今更もう入れられないということは理解できました
ともあれ検討されたようだということがわかってよかったです
皆さんありがとうございました
190:Name_Not_Found
08/06/15 16:40:23
ブラウザの左右横幅を大きくしても小さくしても
横に並べた背景画像をウィンドウ幅いっぱいに表示させる方法を教えてください。
div.d1 {
margin: 0;
width : 100%;
background-image: url("img.jpg");
background-repeat: repeat-x;
}
例えば上記の方法で小さいウィンドウ幅でページを表示させてから
左右の幅を大きくするとブラウザに映っていない部分の背景が白色で表示されてしまいます。
今まで、そんなことは出来ないものと諦めていたのですが、
Windows Live のサインイン画面ではそれが出来ていました。
ソースを見て解析を試みてみましたが
外部CSSを５つも使っていて複雑すぎて苦戦しています。
191:Name_Not_Found
08/06/15 17:20:51
>>190
width:100% しなければそうなるんじゃ・・・
192:Name_Not_Found
08/06/15 17:42:52
>>191
ブラウザを最大画面にして背景画像を横並びに画面いっぱいに表示させつつ
テキストは画面の一番右端に表示させる。
その状態でウィンドウ幅を小さくしてもテキストがついてこないようにしたい。
193:Name_Not_Found
08/06/15 18:05:21
最大画面 画面一杯横は何を想定しているの ?
194:Name_Not_Found
08/06/15 18:09:49
>>192
100%の意味理解してるか ?
195:Name_Not_Found
08/06/15 23:32:52
100%初心者
196:Name_Not_Found
08/06/15 23:44:18
100％片想い
197:Name_Not_Found
08/06/15 23:59:45
いちご100%
198:Name_Not_Found
08/06/16 19:37:50 w0BnIgcv
URLﾘﾝｸ(www.flashdaweb.com)
こちらのページにあるテンプレート「DreamLine」を改造しているのですが、
・フッターが画面両端に寄ってしまう。
・/*design box Third*/使用時（width100.html）に広告欄がずれてしまう。
という2つの問題が発生し、いるいろ試しても解決できず行き詰ってしまいました。
どなたか、解決策をご教授いただけませんか？
ソースでレスが潰れてしまいそうなので、製作途中のものをうｐしました↓
（改造内容はmemo.txtにかいてあります）
URLﾘﾝｸ(toku.xdisc.net)
199:Name_Not_Found
08/06/16 19:45:01 2NLZWHsZ
>>198
フォーラムへどうぞ
200:Name_Not_Found
08/06/16 20:15:11
能力も無いのになぜ改造しようなどと思うのだろう
能力が無いからテンプレートを使うのだし、
他人が書いたソースを理解する行為は、自分で書くより面倒な場合もある
201:Name_Not_Found
08/06/16 21:19:27 4UwLal6Z
>>200
気持ちはわかるがスレタイを読め
202:Name_Not_Found
08/06/17 12:22:17 JZTgN6Df
<div id='top'></div>
<div id='main'></div>
というソースで、
#topのheightをブラウザの上から200px固定、
#mainのheightを#topの下からブラウザの下までいっぱいに表示させるにはスタイルシートどう書けば良いですか？
203:Name_Not_Found
08/06/17 12:30:54
>>202
CSSは高さの面で弱い
どうしてもやりたいならテーブル使えば簡単
204:Name_Not_Found
08/06/17 13:58:05
質問です。
ページ全体のリンク色をa:link等で指定しています。
ページ内のdivで囲ったところのリンク色を別の色に変えたく
div a:link {color: #色２;}
のようにしているのですが
火狐だと表示されるのですがIEではページ全体のリンク色の方が反映してしまい
どうにもうまくいきません。
どうしたらよいものでしょうか
205:Name_Not_Found
08/06/17 14:23:02 eH1K4Qys
>>204
そのdivにセレクタは付いていないのかい？
206:Name_Not_Found
08/06/17 14:48:26
IDをつけています
207:Name_Not_Found
08/06/17 21:51:22
>>204
div a:link {color: #色２;}を一番下にもってけばおｋ
208:Name_Not_Found
08/06/17 22:27:32 WVh/qF1N
>>204
#id a:link {color: #色２;} にすればいいんじゃね？
209:Name_Not_Found
08/06/18 00:25:48 Ma9fqpLk
>>202
main の高さを100％
マージントップを-200pxでどうやろか？
bodyに高さ100％とかいるかも
210:Name_Not_Found
08/06/18 01:23:54 dD3iCkat
>>209
そうゆうことをするとブラウザの幅を変えたときに背景が表示されないとかの問題が出てくる悪寒
211:Name_Not_Found
08/06/18 04:36:36 Ma9fqpLk
>>210
幅100％でいいんでは？
多分可能。
テーブルみたいにフッターを常に画面の一番下に表示する方法もある。
詳細はググってちょ。
212:103,109,126
08/06/18 11:06:52 UhjRfOlm
>>133
>>137
回答ありがとうございました！
div#main a.img_link,div#sub a.img_link{
border: none;
}
上記で指定したところうまくいきました！
画像に点線が付かないようになりました。
ほんとうにありがとうございました！！
助かりました。
213:204
08/06/18 12:58:17
>>207>>208
回答ありがとうございます！
やっぱりダメでした。なんか普通のa:linkとかも反映しなくなったりで
原因が訳分からなくなってきたのでごちゃごちゃしてるCSSをもう一回
整理してみたりします
ありがとうございました
214:Name_Not_Found
08/06/18 13:20:34
bloggerのｎａｖｂａｒ非表示させるのがうまくいきません。
#navbar #Navbar1 iframe{
height:0px;
display:none;
visibility:hidden;
}
を<head> と</head>の間に入れるということなのですが
自分の使っているﾃﾝﾌﾟﾚｰﾄでは<head>の箇所が見つからなくて。
使っているテンプレート→URLﾘﾝｸ(tabo.aurealsys.com)
ちなみに</head>は見つかります。そもそもどこに入力したらいいか
安易に尋ねるのではなく基本的な知識をもっと身につければすぐに分かる問題なのかもしれませんが
ちょっと急いでて・・
もし分かる方、bloggerつかってらっしゃる方いましたら教えてください。
215:Name_Not_Found
08/06/18 13:53:26
>>214
普通にheadあるみたいだが??
<style type="text/css" media="screen">
#page { background: url("URLﾘﾝｸ(tabo.aurealsys.com)") repeat-y top; border: none; }
</style>
とこに入れればいいんじゃないの？
216:Name_Not_Found
08/06/18 13:54:16
スマン、そのままコピペしてしまった
217:Name_Not_Found
08/06/18 14:07:07 LRnRMLs6
display:none;なんて使うと検索エンジンから嫌われるよ
218:Name_Not_Found
08/06/18 14:16:15
ブログの質問はブログ板池
219:Name_Not_Found
08/06/18 20:13:59
>>217
SEOスパム業者みたいなやり方してれば嫌われるかもしれないけど
普通に使って嫌われるならその検索エンジンは
よっぽど精度悪いものなんだろうね
220:Name_Not_Found
08/06/18 20:17:30 vaoCLo75
float: left;を使って
□□□（□の大きさはまちまち）
みたいに横に並べたいんですが、ウインドウを小さくしていくと
□□
□
のように下に勝手に回り込んでしまいます。
強制的に右方向に並べる方法はございませんでしょうか？
221:Name_Not_Found
08/06/18 20:21:33
>>220
幅固定しれ
222:Name_Not_Found
08/06/18 20:23:34
>>221
申し訳ないのですが、言い忘れてました。
入力によって幅は動的に変化するのです・・・
223:Name_Not_Found
08/06/18 20:24:51
>>222
っJavaScript
CSSとHTMLのソース晒したら書いてもいいよ
224:Name_Not_Found
08/06/18 20:25:56
>>222
意味不明
225:Name_Not_Found
08/06/18 20:28:09
>>223
CSSでやれるのかなぁって疑問に思いまして質問いたしました。
JSってことは、topとleftを動的にかっちり指定するやり方ですね。
やはりCSSだけだと無理ですよね、ありがとうございました。
226:Name_Not_Found
08/06/19 07:58:02
>>220
俺がいつもやってるテクを言わせてもらうとですね
その□□□を<div>で囲んでその<div>を横幅を固定するようにしてます
227:Name_Not_Found
08/06/19 20:09:40
text-align:justfy;
がFireFoxでしか効いてないくさいんですが
ＩＥやOpera、Safariでも効かせるにはどうしたらいいんでしょう
228:Name_Not_Found
08/06/19 21:08:43 Ay0UYx+R
スタイルシートで<p>を使わないフォント指定方法は？
229:Name_Not_Found
08/06/19 21:29:52
意味を含めないならspanだな
230:Name_Not_Found
08/06/19 22:00:41
>>227
justfyじゃ無理だろ
231:Name_Not_Found
08/06/19 23:17:54 XCoh9Yaz
>>229
回答ありがとうございました！
232:Name_Not_Found
08/06/20 00:12:28 XURdgRmW
a { text-decoration: none; }でリンクの下線が取れない。
233:Name_Not_Found
08/06/20 00:34:04 GGAuFzle
a:link
234:Name_Not_Found
08/06/20 01:17:54 9Z3Okjhl
floatとposition
段組を作る場合どっちでレイアウトをすればいいのでしょうか？
明確な使い分けの差ががいまいち理解できません。
235:Name_Not_Found
08/06/20 02:13:44
ｃｓｓの仕様書ってどこで読めますか？
236:Name_Not_Found
08/06/20 06:08:41
>>235
>>7
237:Name_Not_Found
08/06/20 07:45:28 IortDLAo
>>234
floatは融通が利いて微調整が楽
positionは融通が利かなくて微調整が手間
238:Name_Not_Found
08/06/20 12:35:44 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
08/06/20 12:56:20
#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
08/06/20 13:18:09
リンクの左の画像は全部違うんだよね。
同じならliにclass与えるのが楽だけども。
241:Name_Not_Found
08/06/20 13:29:04 U64Udsvk
>>230
ありがとうございます。
上記の方法でうまくいきました。
242:Name_Not_Found
08/06/20 16:10:14 tA6DaX6U
採点、アドバイスお願いします。
URLﾘﾝｸ(minkara.carview.co.jp)
243:Name_Not_Found
08/06/20 16:18:47
素晴らしく重い
244:Name_Not_Found
08/06/20 16:26:50 tA6DaX6U
重いときはどうしたらかるくなりますか？
245:Name_Not_Found
08/06/20 16:35:53
ダイエット
246:Name_Not_Found
08/06/20 16:36:43
重いとか以前にド素人のソースだから
blog借りてよくあそこまで滅茶苦茶に出来るもんだ
おとなしくテンプレート使え
247:Name_Not_Found
08/06/20 16:59:22
調べてみたけど、テンプレートそのものが腐ってた件
248:Name_Not_Found
08/06/20 17:01:35
>>242
釣り？
249:Name_Not_Found
08/06/20 17:08:45
>>242
IEなのかな？
Fxでは見れたものじゃ・・・
250:Name_Not_Found
08/06/20 17:16:40 tA6DaX6U
色々アドバイスありがとうございました。
個人的には力作なんですがｗｗｗ
251:Name_Not_Found
08/06/20 17:42:42
インターネット最近始めましたな人かな
252:Name_Not_Found
08/06/20 17:45:31
言うだけじゃアレだから、こういうとこ見るといいよ。
デザインとの両立ができる。俗に言うDiv使いまくるけどね。
W3C Sites
URLﾘﾝｸ(www.w3csites.com)
CSS web template
URLﾘﾝｸ(www.ex-designz.net)
個人的に好きなのがコレ。簡単に作れる。
URLﾘﾝｸ(www.free-css-templates.com)
こういうのは見てるだけでイメージが沸いてくる
253:Name_Not_Found
08/06/20 18:06:40 tA6DaX6U
>>252
ネット歴は古いんですがＣＳＳ歴は浅いです。
サイトのリンク有り難うございます、勉強させてもらいます。
色々アイデアが浮かんできそうですね。
直したたほうがいい箇所とかあれば教えてください。
254:Name_Not_Found
08/06/20 18:14:50
>>253
悪いけど全部
釣りとしか思えないほどひどい
255:Name_Not_Found
08/06/20 18:21:43 tA6DaX6U
釣り？
それはどういうことですか？
256:Name_Not_Found
08/06/20 18:37:26
2ch初めてか？力抜けよｗ
257:Name_Not_Found
08/06/20 18:39:28 KV0SAZSS
>>242
これは酷い・・・採点の仕様がない
258:Name_Not_Found
08/06/20 18:57:18 tA6DaX6U
凹みますが正直な感想ありがとうございます。
一度手直ししてみます。
ちなみにブログ内容にはツッコミ無しでお願いします。
個人的趣味が強いものでｗｗｗ
259:Name_Not_Found
08/06/20 19:00:12
>>258
>>249も言ってるけど、ＩＥでしかチェックしてないのかな？
Fxで見たらひどいよ。他のブラウザでもチェックすべき。
あと、サイトの評価はそれ専用のスレがあるからそこでやったほうがいい
CSSどうのの問題以前だと思うよ
260:Name_Not_Found
08/06/20 19:07:39
>>258
個人攻撃でなく、対象リンク批評なので凹まないように。
CSSを突き詰めたいならSEOだとかAccessibilityも念頭に入れましょう。
各個ググってみてください。
261:Name_Not_Found
08/06/20 19:11:49 tA6DaX6U
>>259
>>260
ありがとうございます。
できるかどうかどうか不安ですが。
262:Name_Not_Found
08/06/20 19:30:28
はい次の方
263:Name_Not_Found
08/06/20 20:44:20
何かの方法を聞こうと思っていたはずなんですが、忘れてしまいました。
思い出したらまた来ます。
264:Name_Not_Found
08/06/20 20:47:27
スタイルシートを直接ダウンロードさせない方法を教えてください。
えっとつまりホームページの中から呼ばれたときだけ見えるというやりかたです。
265:Name_Not_Found
08/06/20 20:48:21
無理です。はい次の方。
266:Name_Not_Found
08/06/20 20:48:42
そんなもんキニスンナ
お前のなんか使い道ない
267:Name_Not_Found
08/06/20 20:50:15
無理じゃないです。
268:Name_Not_Found
08/06/20 20:51:48
リファラーで判断すれば出来なくもないが少なくともお前には無理だから安心汁
269:Name_Not_Found
08/06/20 21:56:01
>>264
.htaccess質問コーナー Part7
ｽﾚﾘﾝｸ(hp板)
270:Name_Not_Found
08/06/21 11:03:38
>>258
ここに先週ダウンロードが開始されたばかりの最新ブラウザFirefox3があります。
URLﾘﾝｸ(mozilla.jp)
つべこべ言わずにこれをダウンロードしてインストールしたら自分のブログを見てみよう
271:Name_Not_Found
08/06/21 11:06:13
>>264
なぜ隠す？コソコソしやがって
そういうとこがキモイんだよ
272:Name_Not_Found
08/06/21 12:30:29
日本人には多いよな、そういうの。
俺はオープンにやってるけど逆にそういうのは叩かれやすい。
273:Name_Not_Found
08/06/21 12:35:56
プログラムのソースコードとかもそうだよね
274:Name_Not_Found
08/06/21 12:55:49
i-mode で文字スクロールさせると、30文字で切れてるみたい。これって解決策あるの？
やってることは↓。
div タグに style でスクロールするように指定。
style="display:-wap-marquee;"
30文字丁度で切れてるから、文字数に上限があるのかなと思って。パソコンから見たら問題なく全部（50文字ぐらい）表示してる。
275:Name_Not_Found
08/06/21 13:00:56
>>274
ごめ。自己解決。
ドコモは 64kb までしか表示できないっぽいね。全角だと32文字か。
276:Name_Not_Found
08/06/21 13:02:36
同じCSSを使ったページをいくつか作りましたが、そのうちの一つがページを開いてもすぐに適用されず、一瞬間を置いて適用されます。
原因は何ですかね？
知識が限りなく０に等しいので言葉がおかしいと思いますが、何方か助けて頂けたら嬉しいです。
277:Name_Not_Found
08/06/21 13:42:52
知識が0ではどんな不具合が起ころうと不思議ではない
地道に勉強しろというとヒステリーを起こす奴がいるが、とても大事な事なのだ
278:Name_Not_Found
08/06/21 13:45:16
>>276
そりゃ、重いからだろう
279:Name_Not_Found
08/06/21 14:01:15
>>278
正解
280:Name_Not_Found
08/06/21 15:33:51
プログラムのソースを隠すのは当たり前
ＣＳＳはあんなもん隠す意味が無いから隠さないだけ
281:Name_Not_Found
08/06/21 15:34:53
>>280
いろいろな意味で哀れです
282:Name_Not_Found
08/06/21 15:37:18
>>281
唯一つの意味で可愛そうです
283:Name_Not_Found
08/06/21 16:02:58
あなたたちを見ていると興奮してきましたよ
284:Name_Not_Found
08/06/21 16:28:39
わたしは萎えてきましたよ
285:Name_Not_Found
08/06/21 20:11:09
質問です。
classとidの使い分けって、どのようにしていますか？
286:Name_Not_Found
08/06/21 20:45:17
一つだけのものはid
使いまわしするようなものはclass
287:Name_Not_Found
08/06/22 00:30:25 VjrQIKSK
この形式<IMG SRC="">で絶対配置にするには？
288:Name_Not_Found
08/06/22 00:38:04
>>287
class id 物理style
289:Name_Not_Found
08/06/22 01:01:41 VjrQIKSK
>>288
テンプレ求る
290:Name_Not_Found
08/06/22 01:21:39
>>289
ヒント
ダーク・アブソリュート！お前は死ぬ
291:Name_Not_Found
08/06/22 02:32:52
>>285
a href="#" として使うならid
使わないならclass
292:Name_Not_Found
08/06/22 13:22:22
>>291
だから>>286なんだよ
複数指定してるとこに飛ばせないだろ
293:Name_Not_Found
08/06/22 15:02:01
idとclassの使い方わかってないな。
<div id="idone" class="clone">あいうえお</div>
こんな風にHTMLを書くんだよ
294:Name_Not_Found
08/06/22 15:08:09
次の質問どうぞ
295:Name_Not_Found
08/06/22 15:21:47
しっかしまぁなんというか・・・ ラベルが・・・
296:Name_Not_Found
08/06/22 15:42:22
Firefoxでフォントがカクカクになるんですけど改善できませんか？
297:Name_Not_Found
08/06/22 15:43:38
>>285 >>291
直感的だから説明しにくいな
例えば、上部パンくずと下部パンにそれぞれパンくずリストがあったとしよう
同じ物と見なしたらclassで違うものと見なしたらidになる
俺は違うものと見なすからidを使う
で、共通の指定もするのならclassもするから>>293もある
298:Name_Not_Found
08/06/22 16:16:48
>>296
それだけの情報でどう答えろと言うんだ？
299:Name_Not_Found
08/06/22 16:18:45
>>293
Another HTMLによるとidは大文字で書かないといけないらすぃ
URLﾘﾝｸ(htmllint.itc.keio.ac.jp)
300:Name_Not_Found
08/06/22 18:09:02
どうでもいい
301:Name_Not_Found
08/06/22 19:47:49
>>297
id="PANKUZU1"
id="PANKUZU2"
ってこと？
302:Name_Not_Found
08/06/22 19:49:49
装飾がclassで住所がid
303:Name_Not_Found
08/06/22 19:51:27
>>301
id="HEAD_NAVI" class="NAVI"
id="FOOT_NAVI" class="NAVI"
になるね。さすがに数字はちょっと。意味ないじゃん
304:Name_Not_Found
08/06/22 19:52:11
idは名前じゃないの？
classは種類
305:Name_Not_Found
08/06/22 20:11:15
まぁ好きに使っても特に問題ないよ
306:Name_Not_Found
08/06/22 21:19:48
idは特定の一つを区別できるようにするための識別子でしょ。
同じidが複数あっちゃダメ。
>>297
俺には余計わからん。
307:Name_Not_Found
08/06/22 22:00:50
divぐらいにしかidつかわねーｗ
body,head,wrap,menu,foot
308:Name_Not_Found
08/06/22 22:10:40
まあ、区別できるように明示するのもidの使い方だしね
むしろ、spanとdivはidもclassも存在しなければ、意義のないような要素だし
309:Name_Not_Found
08/06/22 22:16:09
>spanとdivはidもclassも存在しなければ、意義のないような要素だし
全然そんなことないだろｗ
310:Name_Not_Found
08/06/22 22:16:56
>>299
それ、準拠してる処理系があったら教えて欲しいくらいだ
311:Name_Not_Found
08/06/22 22:24:24
>>309
ああ、titleがあったか。すまん
でもさ、俺、こんなの用意しちゃったんだ
<div>
<div><span>あいうえお</span></div>
</div>
これに意味があるかって聞かれたら「ねーよｗｗｗ」っていいたかったんだ
align？style？そんなのなしで
312:Name_Not_Found
08/06/22 23:26:10
そんなヘンなソースで言われても
313:Name_Not_Found
08/06/24 08:18:01
Osaka－等幅って、IE6だと使えない？
Osaka－等幅を使うと、何故かフォントサイズとか色とか、
フォント関連の設定が全部無視される。
Osaka-monoにすると問題ないんだけどね。
314:Name_Not_Found
08/06/24 23:19:40
>>313
sans-serif
serif
monospace
fantasy
cursive
これらもセットで指定しろ
315:Name_Not_Found
08/06/25 10:35:14
>>314
ダメでしたね。
「font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka－等幅', monospace;」
と指定してたんですが、やはり、フォントは全て無視されて表示されます。
「font-family: 'ＭＳ ゴシック', 'MS Gothic', Osaka-mono, monospace;」
だと問題ありませんでした。
これで、うまくいってるんで、これで使うしかないか。
316:Name_Not_Found
08/06/25 11:22:43
[ CSS ] ｢ Osaka?等幅 ｣ フォントの指定方法 | Bowz::Notebook
URLﾘﾝｸ(bowz.info)
そういうものなのかも
317:Name_Not_Found
08/06/25 11:49:13
>>316
おおおぉぉぉ、まさしく探していた情報です。
ありがとうございます。
ここ1週間ほどググったりして格闘していた答えが書いてあります。
これですっきりと仕事が進みそうです。
318:Name_Not_Found
08/06/25 19:39:26
background: url(../images/kage.gif) repeat-y;
と指定してるんですが Firefoxでみると表示されません
IEはOKでした ご教授願います
319:Name_Not_Found
08/06/25 19:49:14
そんな事はありえません。あなたが間違ってるのです。
320:Name_Not_Found
08/06/25 20:25:03
>>318
ブラウザの設定じゃね？
321:Name_Not_Found
08/06/25 20:35:09
どうせ高さ消えてたりしてるんだろ
322:Name_Not_Found
08/06/25 21:34:10
お返事ありがとうございます
やはり無理でした
詳細に書くとこんな感じです。
#wrapper {
width : 850px;
margin : 0 auto;
background: url(../images/kage.gif) repeat-y;
}
323:Name_Not_Found
08/06/25 22:20:55
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
08/06/26 10:17:46
>>322
border:1px solid red;
足してみな
赤い一直線が出てくるはずだ
まあつまり、>>321の状況だってのを理解してくれ
URLﾘﾝｸ(www.geocities.jp)
の例3を参考にすると解決するはず
325:Name_Not_Found
08/06/26 15:01:28
>>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
08/06/26 15:27:44
>>325
Fx3でプリントスクリーン撮って確認してみたら、大きさは129x61だった
IE6は7と同じで128x60になった
327:Name_Not_Found
08/06/26 15:39:08
table関係はFxだとtranditionalとstrictでも変わったはず
328:325
08/06/27 10:45:53
>>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
08/06/27 16:09:04
その1pxの違いが何だっての？
330:Name_Not_Found
08/06/27 16:41:29
>>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
08/06/27 18:13:15
IE7にて不可解な挙動を示しましたので質問をさせていただきたく思います。
以下のようなHTML、CSSにて<cite>内に background がIE7では2回表示されます。
Firefox3, Operaでは問題ありません。また、<img>を非表示すると問題ありません。
<cite>の変わりに他のインライン要素(<span>など)でも起こります。
バグのように見えるのですが、これはどのような現象でしょうか？
以下にコードを示します。（最小限に再現する状態にしましたので無用な突っ込みはご容赦を）
--------test.html------------
<html xmlns="URLﾘﾝｸ(www.w3.org)" 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
08/06/27 18:16:09 ywLy1HsV
スクリーンショットを用意しましたので、拝見ください。
URLﾘﾝｸ(sylphys.ddo.jp)
333:331
08/06/27 19:15:25 ywLy1HsV
>>331の現象を回避する方法は、<img>のcssのmarginを 0にすることでした。
div.bubble cite img {
margin: 0px; /* for IE bug */
}
今回はこれで切り抜けられましたが、
もしかすると既知の現象ではないか？と思ったしだいです。
334:Name_Not_Found
08/06/27 19:26:37
margin・padding皆殺しが基本なの
335:Name_Not_Found
08/06/27 23:55:47
>>334
通報しますた
336:Name_Not_Found
08/06/28 00:06:55
>>335
どうぞ
337:Name_Not_Found
08/06/28 00:12:07 tXF1E9vk
タグクラウドについて教えてください。
<li class="tagRank10"><a href="①" title="">ブラウザに表示される文字</a></li>
この①に入るリンク先はどこを入れれば良いのでしょうか？自分のサイト内？
338:Name_Not_Found
08/06/28 00:15:07
集え！全てのパーディングとマージン達を皆殺しだ！！！
* {
margin:0;
padding:0;
}
339:Name_Not_Found
08/06/28 00:16:07
>>337
聞かせてください。なんのタグクラウドなんですか？
340:Name_Not_Found
08/06/28 00:19:31
パーディングって何すか先生
341:Name_Not_Found
08/06/28 00:20:44
パーデンネンのはとこです
342:Name_Not_Found
08/06/28 00:21:50
>>337
cssに全く関係ありませんね。スレタイくらい読んでください。
343:Name_Not_Found
08/06/28 00:28:00
<p style="display:none">スレタイなんぞ読んでたまるか。</p>
344:Name_Not_Found
08/06/28 00:28:43
そこはコメントアウトだろ
345:Name_Not_Found
08/06/28 00:34:28
>>343
見えませんよ
346:Name_Not_Found
08/06/28 00:46:58
>>345
全て消えろ!
/* そこは無反応だろｊｋ */
dl.thread dt,dl.thread dd {
text-indent:-9999px;
}
347:Name_Not_Found
08/06/28 00:52:26 tXF1E9vk
>>339
URLﾘﾝｸ(css-happylife.com)
スレ違いでしたらすいません
348:Name_Not_Found
08/06/28 01:00:57
<h1><strong>スレタイなんぞ</strong>読んでたまるか。</h1>
349:Name_Not_Found
08/06/28 01:02:52
<h1><em><strong>スレタイなんぞ<strong>読んでたまるか</em></h1>
350:Name_Not_Found
08/06/28 01:03:13
あ、スラッシュ忘れた
351:Name_Not_Found
08/06/28 01:04:12
>>350
-600点
352:Name_Not_Found
08/06/28 01:05:03
＜/html>
353:Name_Not_Found
08/06/28 01:08:18
352個のエラーがありました。
このスレッドは-1,200点です。
354:Name_Not_Found
08/06/28 01:55:39
訂正
エラーは353個でした
355:Name_Not_Found
08/06/28 03:48:43
font-weightも殺すぜ。
bodyにwidth height100%も基本。
356:Name_Not_Found
08/06/28 04:59:27
近所の電器店でアレに使う大容量HDDなどを物色しておりましたら、
「萌えー！萌えー！」と叫びながらフロアをうろつくおっさんを発見いたしました。
ああ、春だな。
ああいうおっさんの存在を根本から抹消したらさぞかし楽しいだろうなとバッファローの
２００GBHDDを凝視しながらレジへと並びました。
ふとおっさんに目をやると、いつのまにやらおっさんが幼女に寄り添っているではありませんか。
これはいけませんと、買い物かごにあった唯一武器になりそうなUSBケーブルを握り締めていると、
おっさんと幼女の会話が聞こえてまいりました。
「もえ。お父さんから離れたらダメじゃないか」
「ごめんなさい」
ああ、アレだ。親子だ。もえって名前のお子さんですか。利口そうなお嬢さんですね。
抹消されるべきは私ですね。
357:Name_Not_Found
08/06/28 05:06:49
教えてください。
<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
08/06/28 05:13:14
fontweightなんて殺しても意味無いだろ
heightも意味ない
359:Name_Not_Found
08/06/28 05:17:04
>>357
visibility
360:Name_Not_Found
08/06/28 05:42:41
>>357
ありがとうございます。
ですが、
visibility:hidden;
としても内枠は消えず、
visibility:none;
とすれば、HR自体が消えてしまいます……。
361:Name_Not_Found
08/06/28 05:43:32
すみません。
× >>357
○ >>359
362:Name_Not_Found
08/06/28 05:53:42
んじゃpositionかtext-indentで飛ばしちゃえばおｋ
363:Name_Not_Found
08/06/28 15:30:24
border:none !important ;
364:Name_Not_Found
08/06/28 16:16:41
hrを装飾しようって考えが間違い。
365:Name_Not_Found
08/06/28 16:18:28
>>364
<hr>なんてなくなればいい。
366:Name_Not_Found
08/06/28 16:26:24
流石IEだ、悉く邪魔をしてくれるな
367:Name_Not_Found
08/06/28 16:34:30
hrなんてCHTML以来使ったことねーな
368:Name_Not_Found
08/06/28 16:48:54
>>365
旦那！ CSSだけだと引っぺがした時に、どこで区切るのか分からないページがあるんだぜ！
頼むから、たまには使ってやってください。hr
369:357
08/06/28 16:51:57
みなさん回答ありがとうございます。
やっぱりＨＲは変ですかねー。
小説を書いているんですが、セクションとセクションの区切りにちょうどいいんですが。
文章文章文章
文章文章文章
文章文章文章
＊ ＊ ＊ ←ここに、なにか区切りマークを入れたいが、Hrの初期設定のsolidじゃ変。
文章文章文章
文章文章文章
文章文章文章
<div>
<p>文章</p>
<p>文章</p>
</div>
<hr>←ここ
<div>
<p>文章</p>
<p>文章</p>
</div>
370:Name_Not_Found
08/06/28 16:53:49
よくわかんないけどbrにクラス設定すればいいんじゃない？
<br class='区切り' />
みたいな感じで。
371:Name_Not_Found
08/06/28 16:54:04
>>369
divでもpでもいいが、背景画像指定
hrも同じだったはず。ただし、hrで画像表示は面倒くさい
372:357
08/06/28 16:58:56
>>371
自分としては、HRに背景画像指定が一番いいんだけど、
>>357に書いたみたいに、IE6で変な枠線（borderじゃなくて、HR自身の枠線？）が出ちゃうんだよね。
やっぱり<DIV>か<p>か……
<div>に背景画像指定しするとしたら、
<div class="">ここに何か入れないと気持ち悪い</div>
やっぱり
<p class="">テキストで『※ ※ ※』あたりを入れる</p>
方がきれいかな。
枠線を消す方法は分からなかったけど、
皆さんの意見参考になりました。
373:Name_Not_Found
08/06/28 17:03:33
>>372
オヌヌメはhrとpかdivのセット
hrは非表示にし、pとdivに背景画像の表示を行う
すると、CSSが適用されないブラウザでも可読性は上昇する
ただ、記事本文の中にhrを指定するやり方って前を歩いてきた人たちはあんまりやらない
じゃあ、何のために用いるのかというと、「一番下のaddressとそれ以外の部分は違うんだよ」という明示のために行う
あるいは、ブログみたいに、いくつもの記事をタグ付けしたときに、「一つ一つの記事は異なるんですよ」とかね
あんまり使用するとうるさくなるから、使う人は滅多に見ないけど
374:Name_Not_Found
08/06/28 17:10:30
>>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
08/06/28 17:33:52
>>374
どこをどう解釈したんだｗｗｗｗｗｗｗｗｗ
<div id="hogehoge1">
</div>
<hr />
<div id="hogehoge2">
</div>
ないし
<p id="hogehoge1">
</p>
<hr />
<p id="hogehoge2">
</p>
みたくしろと書いたんだが