/* CSS・スタイルシート質問スレッド【47px】 */
【参考】
IEの position:absolute; のバグを利用した擬似フレーム
----------------------------------------------------------------
*IEの position:absolute; のバグを利用した擬似フレーム
1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定
以下に示すようなハックを用いることにより、全ブラウザへの対応も可。
/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}
/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}
《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html
【質問のしかた : 追記】 質問者はなるべくID表示してね(´・ω・`)
17 :
Name_Not_Found :2005/09/16(金) 00:06:19 ID:N3BwtFeF
誘導されてきました。 javascriptを使って折りたたみメニューを作っているんですが質問です。 折りたたみメニューはできたのですがhtmlでブラウザに表示させると文字の位置が微妙な所に 表示されるんです。左端に全部そろえたいんですが。 <Div Align="left"></div>とmarginを指定してやっても無理でした。 なにか解決策はないでしょうか
>>17 ●OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは?」と求められたら応じませう。
その方が回答が早く得られます。質問は具体的に。
>>17 > <Div Align="left"></div>
出直してきましょう」
【先代の格言】 おまいらまだCSSとかやってんの はっきり言って時代おくれ
【先代の格言】追加
>>21 最新って何?おせーて!
このスレはテンプレがやけに長いな。 お兄さん、ここまでスクロールするのに疲れちゃったよ。
そうでもしないと、既出質問だらけになるからだろうなぁ
既出質問だ出たらまた答えればいいだけのような気がするんだけどね てんぷるれが長すぎて探しだせなくなるという本末転倒ぶり
質問です。 CSS検証サービスで、スタイルシートをチェックしたところ、 指定された全面色(color)に対応する背景色(background-color)が指定されていません というのが頻繁にでてしまいました。 font colorはあまりよくないときいたので、色をスタイルシートに書き出したのですが、 そういう使用用途でもbackground-colorを指定しなくてはいけないんでしょうか? 背景があるので、なるべくなら背景色を指定したくはないのですが。 background-colorを透明と指定することは不可能でしょうか? またその逆の 指定された背景色(background-color)に対応する前面色(color)が指定されていません とも、出たところがあったので、colorを透明に指定する方法なんかがあれば教えください。
inheritで親要素をたどって同じ色を指定 transparentで透明 em{ color: #f00; background-color: inherit;} の用にすると警告は出なくなると思います
30 :
28 :2005/09/16(金) 05:18:32 ID:???
>>29 お早いレスどうもありがとうございます。
>inheritで親要素をたどって同じ色を指定
なるほど。確かに親要素にあわせれば問題ないですね。
>transparentで透明
そんなものが・・・
どうもありがとうございます。早速試してみます。
hr size=1ということをやりたいのですが、 スタイルシートの何を使えば同じようなことが実現できるでしょうか?
>>31 hr { height: 1px;}
高さを設定する。
昔、各要素の中でhrだけは どのように描画するかがUAに委ねられている特殊な要素 ってのをどっかで見た記憶があるんだが、ホント?
あの、画像のベースラインやディセンダの問題で、 画像表示の際に下端に合わせるため、 vertical-alignプロパティを指定する事があると思うのですが、 その場合、bottomとtext-bottomはどのような違いがあるのでしょうか? この件に関して、bottomの指定をされていることが多いのですが、 text-bottomの方が適しているような気もします。 詳細教えていただけませんでしょうか。お願い致します。
>>34 HTML は具体的にどのようにレンダリングするかを定めた規格じゃない。
一般的な表示方法として、横線を表示するとしているだけ。
その意味では <hr> だけが特殊というのは正しくない。
>>35 bottom は行ボックスの下端を揃えるのに対して、text-bottom は文字の
下端 (ディセンダライン) を揃える。
行ボックスの高さは、その行にある要素の line-height (置換インライン
要素は height) で決まるので、bottom の方が line-height と font-size の
差分の半分分だけ下になる。
Firefoxでは正常に表示されるので恐らくあっているのですが、 IE6ではレイアウトが崩れてしまいます。 そこで、IE6だけ読み込ませないスタイルの書き方・指定の仕方というのは あるのでしょうか?あれば教えていただければと思います。
IE6用にハック 後はググれ。
質問です。 下記のように、テキストの先頭に◆を付けて、borderで囲みました。 ◆だけ色を変えたいので、<span>で指定したのですが、 mac IEで見ると、Contentsのテキストまで<span>で指定した色になってしまいます。 Opera、FireFox、Safariでは思い通りに出来たのですが。 上手い方法がありましたら、教えて下さい。 CSS ul#menu1{margin: 0; padding: 0; width:10em; } #menu1 li {list-style-type:none; border:1px solid #ccc; text-align:left;} #menu1 li a{color: #ccc; text-decoration:none; display:block; } span{color:#000;} HTML <ul id="menu1"> <li><a href="#"><span>◆</span>Contents1</a></li> <li><a href="#"><span>◆</span>Contents2</a></li> <li><a href="#"><span>◆</span>Contents3</a></li> </ul>
寝ろよもう な?
CSS #menu1 li {list-style-type:none;} #menu1 li:before {content:"◆"; color:#000;} HTML <ul id="menu1"> <li><a href="#">Contents1</a></li> <li><a href="#">Contents2</a></li> <li><a href="#">Contents3</a></li> </ul> じゃ、だめなん?
42 :
39 :2005/09/17(土) 07:33:24 ID:???
>>41 朝っぱらからありがとうございます。
やってみまたのですが、上手く出来ませんでした。macのせいかも知れません・・
すいませんでした。
謝らなくてもいいじゃん!!
パッディン(・∀・) って何なのですか? paddingの事ですか?
>>44 朝から何言ってるんだ、おめーはよー
乳バッドのことだろが
47 :
39 :2005/09/17(土) 12:13:11 ID:???
>>44 ほかにも
(-∀-) マージン
(*゚∀゚)=3 ボ-ダ-
というのがあります
そのまんまじゃん
>>48 ドメイン取ろうと思って、考えたけど…
paddin.infoにします。サンクス
51 :
Name_Not_Found :2005/09/17(土) 15:45:30 ID:CF2atXrF
ボックスの高さをウィンドウの高さを取得して使いたいんですけどどうすればいいですか?
52 :
51 :2005/09/17(土) 15:59:51 ID:???
div.a { height:ウィンドウの高さ} ここにウィンドウの高さを入れたいんです。
ルート要素、親要素、要素にheight:100%指定。 面倒なら過去互換で作れ。
パッディン(・∀・) (-∀-) マージン (*゚∀゚)=3 ボ-ダ- のサイズをまとめて0%にする方法って無いんですかね
>>54 * {
padding:0;
margin:0;
border:0;
}
<TABLE align=center><TR> <TD valign=middle>■</TD> <TD valign=middle align=center>さぶたいとる伝説<BR>たいとるの野望</TD> <TD valign=middle>■</TD> </TR></TABLE> これを<H1>とCSSでスマートに代替する方法ありませんか?
出直してこい
>>56 自分で書いたソースを出せ。
IDも出せ。
59 :
Name_Not_Found :2005/09/17(土) 23:19:09 ID:/3hi800J
>>56 h1 { text-align: center; }
<h1>■さぶたいとる伝説■<br>たいとるの野望</h1>
ぶっちゃけこれでいいんじゃない?
■の位置に問題があるならそこだけline-height:200%;とか指定すればいいだけだし
こいつぁPOLAもビックリだな
このスレで通じるかいな
パッディン
マージン
(*゚3゚)=3 ボ-DA-
65 :
Name_Not_Found :2005/09/18(日) 02:19:09 ID:puMZbDJd
star 7 hack ってOpera8では効かないのでしょうか?
67 :
Name_Not_Found :2005/09/18(日) 06:21:26 ID:XOL7l7Sx
.foo{background : #b0c4de ;} と指定したら You have no color with your background-color : .foo という警告が出たのですが、どう直せばいいのかわかりません。 色はきちんと指定してあると思うのですが、どうすればいいのでしょうか?
>>67 そのまんま
.foo{background-color : #b0c4de ;}
が正しい。
backgroundは背景プロパティの一括指定用。
まぁ数が任意だから色だけでも問題はないんだが。
CSSでサイトを作ったのですが、CSSの読み込みが遅いです。 一瞬CSSが適用されていない画面が表示され、その後CSSが適用されます。 CSSファイルが重すぎでしょうか?幾つかに分けてるのですが。
>>69 環境とソースを書いてみろ。話はそれからだ。
確認環境はwin2000/IE6。 ソースは長すぎで書けないです。
>67-68 backgroundの色が指定してあるのにcolorが指定されてませんよ という警告だと思うな
いつのまにかCSS Validatorが厳しくなっている希ガス。
>>71 マシンの環境も。CSSのソース張らないんならせめてサイズと枚数。
あとHTML側のソースも同様。
久しぶりにValidetorにかけてみたら、 「指定された全面色(color)に対応する背景色(background-color)が指定されていません」 なんて警告が大量に出てきた。 ちゃんと一つ一つにcolorとbackgroundを指定しる! ということか?よくわからない。
うわホントだ・・・昨日更新された? 前は問題なかったのに凄い勢いでエラーでてる
>>60-61 ちょww ここに出張して来てるのが、俺の他に二人も居るのか・・。
こっちが巣だ。
把握した
CSS validatorの最新版をw3cのサイトからダウンロードしようと思ったのですが、 リンクが多すぎてどこを落とせばいいのか分かりません。 どなたか教えていただけませんか?
The validator is here ! ってかいてあるじゃん
警告レベルが1だと減点されないんじゃね?
それよりなんで落とそうと思ったの
{HTMLファイル} <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>ホームページ</title> <link rel="stylesheet" type="text/css" href="chaichan.css" media="screen"> </head> <body> <p>テスト</p> </body> </html> {CSSファイル} <div style="border-style:inset;border-width:medium;margin-top:0pt;margin-left:20%;margin-right:20%;margin-bottom:0pt;"></div> このように記述しているのですが全く適用されません。 何が原因と考えられますか?
何がどう適用されないのか位かけよ
>>89 まず基礎の基礎から学んでこようね。
適用以前の問題。
>>89 CSSファイルに書いてある<div></div>はhtmlに書こう。
もしそれをCSSファイルに書くとしたら、以下のようになる。
body {
boder-style: inset;
border-width: medium;
margin-top:0pt;
margin-left: 20%;
margin-right: 20%;
margin-bottom:0pt;
}
bodyに適用させたいんだ…ろ?エスパー脳フル活用。
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> こんなソフトはアンインストール汁!!
95 :
89 :2005/09/19(月) 01:27:05 ID:???
結構釣れたってことかな?
釣りだろうとなんだろうと出された質問は逃さず答える これが回答人の極意。
97 :
89 :2005/09/19(月) 01:39:31 ID:???
>>95 =とりあえず無視で。
>>92 <html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
body {
boder-style: inset;
border-width: medium;
margin-top:0pt;
margin-left: 20%;
margin-right: 20%;
margin-bottom:0pt;
}
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>GameClub - ゲームクラブ</title>
</head>
<body>
<p>テスト</p>
</body>
</html>
こんな感じ・・・ですか?
>>97 それだとhtmlに直接CSSを書き込むわけだね。
その場合は
<style TYPE="text/css">
<!--
ここにCSSを。
-->
</style>
って書けばいいんじゃないかな。
>>98 どもです。
さっきから色んなサイト見て回ってるけど眠くて全然理解できない。
こういうときは寝たほうがいいんですよね。
>>99 そうだね。そんで分からなかったらまたおいで。
101 :
Name_Not_Found :2005/09/19(月) 04:04:18 ID:HVntUNst
IE6です。 文字に影つけをやろうと思い、リファレンスサイトを見に行ったのですが、 全く影がついていません。このように書かれているのですが、IEでは非対応ですか? <div style="font-family:Verdana,Arial,Helvetica; width:100%;height:100px; font-size:28pt;color:blak; filter:Dropshadow(color=green)"> Filter:DropShadow </div> リファレンスサイト以外のサイトで、文字に影がついているのを 見たことがあるので、できるはず!だと思うのですが・・・ #IE5の時代だったのかなぁ。最近そういえば見ないよーな・・
フィルタのXY軸の方向が無いと出なかったような・・・ filter:Dropshadow(offx=10,offy=10,color=#00ff00,positive=true)
103 :
102 :2005/09/19(月) 04:54:29 ID:???
普段使わない物を適当に答えるもんじゃないね
>>101 試したらそれでうちでは影が出たんだが
あとIEでしか出ないから使うのを控えといたほうがいい
>>101 ,102
それはCSSではなくて、IEの独自機能です。
text-shadow: #666 0.2em 0.1em 1px; 対応しているUAは知らん
106 :
Name_Not_Found :2005/09/19(月) 11:47:42 ID:awjBPCKq
>>105 Safariは無駄に対応してるよ。
まぁ影なんてどうでもいい気がするけど。
スタイルシートで改行の制御って出来ないんでしょうか? ぬるぽぬるぽ がっがっ ぬるぽぬるぽ みたいにしたいんですけど・・・。 センターリングは出来るんですけど、いちいち<p>してます。。。
>>107 CSSで改行は出来ないはず。
逆に<p></p>で囲ったものを改行させないっていうのならできる。
エスパー必須だな
<l> </l>
俺の弟が半年前に
>>89 と同じやり方をして俺に泣きついてきた(Frontpageは使ってないが)。
弟じゃなくて、お前だろ。
(・∀・)ニヤニヤ
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <title>GameClub - ??????</title> <style TYPE="text/css"> <!-- boder-style: inset; border-width: medium; margin-top:0pt; margin-left: 20%; margin-right: 20%; margin-bottom:0pt; --> </style> </head> <body> <p>テスト</p> </body> </html> 設定した事が全く反映されないのですが何かおかしな点はありますか?
>>117 そのスタイルをどの要素に反映させたいんだ?
p?body?
どの要素に対して、という指定がされてないせいだよ。
width: 100% - 250px; みたいな演算は出来ないんですね・・・。 コンテンツの領域の幅を設定するときに、ウィンドウの幅から左のナビゲータの幅だけを引けば出来ると思ったんですが。 これが出来ればウィンドウサイズが変わっても幅が動的に変わってくれると思ったんですけどね(´Д⊂
width 指定しないで。margin-righ とか指定してやれば ウィンドウかえると、幅変わってくれますよ
また豪快な設定のさせ方の文法を編み出したものだな
>>118 なるほど。
ということは指定してやれば言いという事ですね。
ありがとうございました。
>>120 あ、でもそれだとコンテンツの中身によっては幅が足らなくなることがあるんです・・・。
どういうこと?
>>125 コンテンツを囲んでるDIVに対して
float: right;
position: absolute;
left: 250px;
margin-right: 10px;
を適用してるんですが、
そうすると、コンテンツの内容が空だ(または小さい・少ない)と幅がウィンドウの端まで満たなくなってしまいます。
つまり、コンテンツの右側に隙間が開いてしまいます。
128 :
101 :2005/09/19(月) 19:59:55 ID:???
>>103 あれー?出ますか。
なんでだろう、私のIE6では数字を何にしようと色を何にしようと
出ません。
ほかの方法を考えます。
>>ALL
ありがとうでした。
>>127 divにwidth指定してfloatは外す。
130 :
129 :2005/09/19(月) 20:09:54 ID:???
>>127 悪い、119だったんだな。だったら129は忘れてくれ。
左のナビゲータをピクセルじゃなくて%で指定。
右の本文のwidthにナビゲータ分引いた%を指定。
で、floatでもabsoluteでもいい。
131 :
119 :2005/09/19(月) 22:43:54 ID:???
>>130 試したことがあるんですが、それだとウィンドウサイズが変わるとナビゲータのサイズも変わってしまいますよね。
ナビゲータの幅は固定じゃないとメニューが崩れてしまいます。
出来ればコンテンツ部だけのサイズが変わる方法があれば・・・
もう少しいい策を考えてきます。
>>131 ナビゲーターをポジションで固定して
コンテンツボックスの左マージンをナビゲータの幅の分空けて
(それ以外のマージンは0)・・みたいな方法じゃいかんかしら
133 :
119 :2005/09/19(月) 23:26:20 ID:???
>>132 あ〜!!それで出来ました。
IEとMozillaで表示がずれてますが、何とかなりそうです。
どうも!!!
134 :
Name_Not_Found :2005/09/20(火) 09:57:01 ID:MOzdyUiN
こんにちは 質問です。 フロート左右を使って作った2段組レイアウトで、内容量が多い方のカラムに高さを揃えることはできないでしょうか?
>>134 フッタを使ってそっちの方を調整すればいいかも
正攻法では無理
136 :
134 :2005/09/20(火) 11:41:05 ID:MOzdyUiN
>>135 フッターですか・・
背景色を指定して色付きカラムにした奴を揃えたいんですよ・・・
なんか良いアイデアないですかね…
左右をまたdivで囲ってそれに内容量少ない方の色付ければ
前スレで3カラムでそうしたいってのあったな。 参考になるかも。でもかなり複雑らしい。
誤爆ゴメ
<a href ="***.html"><div class="*****">※※※※※</div></a> アンカーの中にブロッグを入れずに、上と同じようなデザインに出来ないでしょうか? a:hoverを使ってボタン背景色をオンマウスで変えたいのです。 IEは大丈夫なんですけど、Gecko系は全くずれてしまって。。。 お願いします。
あげ
>>141 お前の文章を他人が読んで理解できるかどうか、
一度推敲してから出直してこい
144 :
129 :2005/09/20(火) 20:44:53 ID:???
>>141 書き方間違ってるだけだと思う。普通にできなきゃおかしい。
名前は気にしないでください・・orz
>>141 CSSの前にHTML勉強してこよう。な?
147 :
141 :2005/09/20(火) 20:53:26 ID:???
すみません。通常アンカーの中にブロック要素を入れるのは宜しくないと聞いたもので・・・ 書き方ですが、 <div class="menu"> <a href ="***.html"><div class="menus">※※※※※</div></a> <a href ="***.html"><div class="menus">※※※※※</div></a> </div>です。CSSは .menu { width: 200px; border: 2px dotted #92C9FE; float: left; padding-bottom: 5px; } .menu a { width: 170px; padding-top: 5px; padding-bottom: 5px; border: 1px ridge #92C9FE; background-color: #C8E3FF; margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; text-decoration: none; } .menu a:hover{background-color: #AED7FF;} です。 何回も書き直しているんですが、うまくいきません。。。
148 :
141 :2005/09/20(火) 20:55:00 ID:???
あ、自己解決です。。本当に恥ずかしい ありがとうございました。
(・3・) アルェー <a href ="***.html" style="display:block;">※※※※※</a>
150 :
141 :2005/09/20(火) 20:57:15 ID:???
お願いします。忘れてください。 本当にありがとうございました、
>>147 余計なものは取っ払ってみよう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html401/strict.dtd ">
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<head>
<title></title>
<style type="text/css">
<!--
a{background-color: #C8E3FF;}
a:hover{background-color: #AED7FF;}
-->
</style>
</head>
<body>
<div class="menu">
<a href ="***.html">※※※※※</a>
<a href ="***.html">※※※※※</a>
</div>
</body>
</html>
152 :
151 :2005/09/20(火) 20:59:10 ID:???
よ〜く考えよう〜♪ リロードは大事だよ〜♪
153 :
Name_Not_Found :2005/09/20(火) 21:08:07 ID:9B2jaoFS
2つのhtmlファイルで同じcssを使用、それぞれの背景色を別な物にする というのは無理でしょうか? 1つのcssファイルの中にbodyを2つ書く→無理ぽ bodyタグにclassをぶちこんで適用させる→無理でした 画面の背景として縦横100%のTDを置いて、back-colorで別色にする→仕様的にNG cssで指定せず、bodyタグに直に背景色を指定→仕様的にNG こんな感じなんですが…よろしくお願いします
154 :
153 :2005/09/20(火) 21:10:19 ID:9B2jaoFS
× back-color ○ background-color すみません。よろしくお願いします
なんでクラス替えしても無理だったんですか! そこんとこお願いしますよ、おにいさん!
【file 1】 <body class="unko1">... 【file 2】 <body class="unko2">... body.unko1 { background-color: red; } body.unko2 { background-color: blue; } 普通に考えてこれでいけると重うんですがそのへんどうなんですか!
>>153 (・3・) アルェー
> bodyタグにclassをぶちこんで適用させる→無理でした
できるはずだけどNE〜
ソースきぼんNU
158 :
153 :2005/09/20(火) 21:36:33 ID:???
できるんですか……今そのソース手元にないんで、明日試してみます 確か <body うんたらかんたら指定 class="color1"> ってやってたんですが うんこソースだったんですかね…
159 :
151 :2005/09/20(火) 21:43:49 ID:???
>>158 ちょwww待wwwwww
なんでクラス設定してんのにbodyに他の指定くっつけてんだよwwww
bodyのうんたらかんたら指定ってのを全部取り除いてみ。
よ〜く考えよう〜♪ 名前欄の確認も大事だよ〜♪ orz
164 :
Name_Not_Found :2005/09/21(水) 01:54:21 ID:h35nb+eX
HTML <div id="left_layer"> <div id="left_content"> <div id="left_top"></div> <div id="left_under"></div> </div> </div> CSS #left_layer{width: 200px; margin: 0px; padding: 0px; text-align: left; float: left; line-height: 110%;} #left_content{width: 180px; margin: 0px 10px 0px 10px; padding: 0px;} #left_top{ width: 180px; border: solid #9acd32; border-width: 1px 0px 0px 5px; background: #f3f3f3; padding: 3px;} #left_under{width: 180px; marign: 10px 0px 10px 0px; border: solid #9acd32; border-width: 1px 0px 0px 5px; background: #f3f3f3; padding: 3px;} left_topとleft_underの間に設定してるmarginが効かなくて二つの箱がくっついちゃうんですけど、なんででしょうか…。
marginのスペルみす。 #left_under{width: 180px; marign: 10px 0px 10px 0px; marignになってる・・・
166 :
164 :2005/09/21(水) 03:04:14 ID:???
>>165 うは…お恥ずかしい。
ありがとうございました!
ねえ、馬鹿でしょう?
?
169 :
Name_Not_Found :2005/09/21(水) 21:19:17 ID:oyABGG3S
169が普通に意味不明
エディタを使うと色分けしてくれたりするんだ。 するとスペルミスも発見しやすい。 どうだ、凄いだろう。
>>171 CSSエディタと言えよ。普通のエディタはしないと思うぞ。
ねぇ
>>169 、タイプミスしているということはテキストエディタを使って書いていると思うの。
この場合のエディタの意味くらい、汲んでやれよ・・・ こんなに叩くことかい?
どっちにしろスペルミスは関係ないと思うがな…
おいらはドラマー♪
178 :
Name_Not_Found :2005/09/21(水) 22:43:47 ID:Ctil6O3w
<ul> <li>ふんにゃか</li> <li>ふんにゃか</li> </ul> ul li{ list-style:none; background:#fff url(./dot.gif) top left no-repeat; } こうやると、画像の読み込みを拒否してるユーザはリストだと分からない気がするのですが… どうしたら良いでしょうか?
めろっさめろっさ。
>>178 CSSイケスレで論争になったやつだが、
text-indentをマイナス値にする。
画像切ってる香具師は大抵CSSもOFFにしてるから。
180 :
179 :2005/09/21(水) 22:49:11 ID:???
スマソ寝惚けて変なこと言ってる。 CSS切ってるなら…って、あれ? えーと、178の言ってることが分からなくなってきたので寝る。
>>178 顔を洗ってきた。
もしかして、ドットがなくなるからリストだと分からない、と言っているか?
リストとはドットがあるからリストなんじゃなくて、内容がリストだからリストなだけ。
だから気にしなくてもいいと思う。
ついでにリストのドットを画像に変える方法はそれじゃなくlist-style-imageで行う。
もしトンチンカンなこと言ってたら忘れてくれ。
スレ汚し イクナイ 掃除汁
183 :
178 :2005/09/21(水) 23:56:21 ID:Ctil6O3w
>>181 確かに、コンピュータには理解できると思いますが、普通のブラウザ(?)
で見るとワケわからん…状態になると思いました。
>list-style-image
これだと、IEでズレるのですが…
>>183 ワケわからんくなってるのは、リストだけじゃないと思うから。気にしない。
このスレなんとなく過疎った・・・? 気のせいか勢いが無いきがするよん
まあそれだけみんな成長したって事でいいじゃない
ソウデスネ
あ、すいません、僕、おとといからcss勉強しはじめました。
つまり、今なら質問に答えてくれる確率が高い。
191 :
Name_Not_Found :2005/09/22(木) 10:14:26 ID:yxMbFwLq
質問させてください。 インライン要素のタグにディスプレイプロパティーでブロックを指定するとブロック要素として表示されるのでしょうか?
>>191 表示の上ではそうなる
自分で実験すれば質問するまでもなく分かると思うが
193 :
191 :2005/09/22(木) 10:38:35 ID:yxMbFwLq
>>192 失礼しました。下記のコードでインライン要素であるキャプションにブロックを指定してもマージンが取れなかったので、ブロック要素にはならないのかと思ったんです。
caption{
padding:10px;
border:3px;
border-style:solid;
border-color:#999999;
margin:10px;
display:block;
}
194 :
191 :2005/09/22(木) 11:15:16 ID:yxMbFwLq
なんかテーブルにCSSを設定するのってもんだいあるみたいですね・・・ テーブルタグにボーダー設定するとIE5だとキャプションが外に出ちゃうんですがモジラだと中に含まれてます。これじゃあ使えませんね…
初めてXHTMLとCSSでページを作ったのですが、ページが表示される 際にCSSが読み込まれるまでに、一瞬ですがタイムラグが生じます。 backgroundとかに設定してる画像が重いとか、そうゆうことでしょうか? 通信環境は光なので遅いことはないと思うのですが。
>>195 ソースと環境晒してくれないと分からないが、
重すぎる画像や非常識なまでに無茶苦茶複雑な構造にしたりすると時々そうなることもある
>>194 確かIEがcaptionにCSS適用が少なくてバグリストに載ってたと思うが、
テーブルらしく見せるだけなら、tdにだけborderを設定すれば問題ないだろ
ユーザーCSSについての質問です。 使用ブラウザ:Sylera2.1.37(Mozilla 1.7.11) Webサイト側のCSSで以下のようにフォントを指定されてしまっている場合に、 ユーザーCSS側で別のフォントに置き換える、もしくは指定を無効にするには どのような記述が必要でしょうか。 body { font-family: "MS Pゴシック",sans-serif; }
>>198 ユーザCSSで
body{
font-family:"好きなフォント名" !important;
}
とかすればよくない?
200 :
Name_Not_Found :2005/09/22(木) 15:53:11 ID:W1wHDy0l
border: solid 1px #808080; width: 240px; height: 120px; overflow: auto; left:530px; top:120px; 「あいうえお」という字をこのCSSで細かく切ったtableの上に表示させようと してるのですが IE6では表示されますがNN7やFF1だと表示できません・・ 助けてえらい人々。
>>198 Mozilla系ブラウザの場合、環境設定からフォント指定を無効にできなかったっけ?
202 :
194 :2005/09/22(木) 15:58:41 ID:yxMbFwLq
>>197 えーっと、テーブルらしく見せるだけだったらテーブルタグをマークアップしないで<div>タグでやっつけちゃいますよw
テーブルタグでマークアップした物をCSSでどれだけスタイル変更できるかなってことでして、先にも言いましたキャプションの件もあるんで使えないかなって思ったんですw
>>202 テーブル系要素はもともとの締め付けが厳しいんで
CSSでがんがん変更しようとすると巧くいかないUAが多い
物理的なマークアップをしてたりすると特に
>>200 > CSSで細かく切ったtableの上
これがよくわかんない。ので、妄想します。
<table><tr><td>…</td></tr></table>
<p>あいうえお</p>
があって、pをtableに重なるように表示しようとして、そのpの位置が(530,120)になるように
配置したい、というのであれば、
スタイルにposition:absoluteが足りない。
206 :
198 :2005/09/22(木) 16:06:35 ID:???
>>199 ありがとうございます。適用できました。
!importantでCSSの優先順位を変えられるってことでしょうか。
…何かよくよく見ると超基本っぽいですね。スレ汚し質問失礼しました。
>>201 環境設定というのはabout:configでしょうか。
どうもそれらしい項目名を見つけられなかったもので。
>>201 それでもいいと思うけど
環境設定>全般>フォントと色>常に自分で決めた〜>フォント欄にチェック
あたりじゃだめ?
>>206 あ、ごめん見つかった
browser.display.use_document_fonts を "0" に設定してみな?
>>206 精細度、とか、セレクタの固有性、とかで調べると幸せになれるかもね。
>>202 だから何を言ってるんだ
キャプションが含まれようが含まれまいが
キャプションには設定しないでtr/tdにだけCSSを設定すればいいだろ
じゃなかったらCSSハック
>>202 言いたいことは僕にはわかるが、普通の人には伝わらないみたいなんで
もうちょっと言葉の表現を勉強して、きめ細やかに説明したほうがいいと思います
>>211 言いたいことがわかるんなら、おまえが説明してやればモーマンタイ。
213 :
Name_Not_Found :2005/09/22(木) 20:14:46 ID:H9fZ/jID
「ブロックレベルの要素が上下に連続している場合、 隣接するマージンは相殺されて大きい方のマージンだけになる」わけですが、 いくつかのブラウザでの実際の挙動を確認した結果、 「下下の連続」、例えば2つのボックス要素が内包関係にある場合の、 それぞれのmargin-bottomも同様に相殺されて大きい方のマージンだけになるようです。 おそらくこれはこういう仕様で、「上下の連続」というのはbottomとtopの連続のことではなく、 縦方向の連続のことを意味しているのだろうと思います。 このことを確認したいのですが、解説されているようなページなどあるでしょうか?
>>212 あいにく僕は語彙力が貧弱です、なので僕も説明してやれないのが悔しいくらいです
歯がゆいんですよ、人にものを伝えることが下手なんで
>>216 別におまえの言うことはイミフメイじゃないが。
218 :
Name_Not_Found :2005/09/23(金) 07:59:20 ID:Wx3/IUa4
div厨という言葉をよく聞きますがそう呼ばれない範囲とはどこまででしょうか? カラム分けまでなのか、レイアウト用ならいくらでも使って良いのか 空のものまでもいいのか・・・ 今まで必要最低限でレイアウトが崩れるぎりぎりくらいにしか使ってなかったのですが 有名サイト等をたくさん見るとよく分からなくなってしまい質問しました。
divを使うから厨と呼ばれるわけではない。 適切な要素があるにもかかわらずdivを使うのでそう呼ばれるわけだ。
>>218 DIV厨ってのは…
【正しい】
<ul>
<li>あああ</li>
<li>いいい</li>
</ul>
【DIV厨】
<div id="list">
<div class="menu">あああ</div>
<div class="menu">いいい</div>
</div>
>>218 基本的には「レイアウト用にはdivを使わない」から、
レイアウトのためだけの無意味なdivを入れたら、それだけでもう多少は言われるかも。
でも「いくらでも」と「空の」は酷すぎるんジャマイカ。
ていうかそんなに無意味divが必要になるレイアウトをそもそも考えなきゃ良いだけだし。
223 :
218 :2005/09/23(金) 08:07:54 ID:Wx3/IUa4
>>219 つまり<div>でテキスト等を囲ってcssで独自要素の様に使うのが
好まれないということですか。
divについては賛否両論あると思うので他の方の意見も聞きたいです、
よろしくお願いします。
224 :
218 :2005/09/23(金) 08:11:21 ID:Wx3/IUa4
>>220-222 リロードを忘れていました、すみません
やはり独自要素の様な使い方という意見が多いようですね
>>221 さんの誘導してくださった先もよく読んでみます。
皆さんありがとうございました。
>>218 CSSでは、class属性が非常に大きな力を持っています。
したがって文書作成者は、体裁にほとんどなんら関係のない要素、
たとえば、HTMLにおいては、div要素やspan要素などをベースとして、
それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計することができるものと考えられます。
しかし、文書の構造要素は世間一般に広く受け入れられている一般的な意味を持ちます。
文書作成者は独自の構造化言語の使用は避けなければなりません。
文書作成者が定めたクラス名では、さまざまな場面で全く意味を理解してもらえない可能性があります。
見た目を作るためのDIVだとしても、 その見た目に文書の構造が感じられる使い方なら いいんじゃないかな、と思う。 作者の意図する構造があって、それを見た目で表現するから。 カラム分けには、それが感じられる。 でもたとえば、角丸の枠を作るためだけにdivを4重している場合は できた見た目から4重の構造を感じられないので これはまずいなぁと思う。 もちろん、好ましいDIVの使い方かどうかを判断する材料は 見た目だけではないけれども。
<div id="hoge">●</a> <div id="foo">●</a> むかし、こんなマークアップしたものを大きくした後、 重ねて少しずらす事で月を表現してたサイトがあった 明らかなdiv厨だな 素直に画像つかえと小一時間(ry
228 :
○ :2005/09/23(金) 12:36:03 ID:???
229 :
○ :2005/09/23(金) 12:36:55 ID:???
ごめん、レスアンカーミス。
>>227 ですた。
●●●●●●_
結局、その「正しい」構造化によって 喜んでくれる人が一人でもいるのかどうかを考えればいいと思うよ。 いるなら努力すればいいし。 構造化なんて最大公約数を目指しただけのもので 全てがその構造に当てはまるなんて限らないわけだし。
231 :
● :2005/09/23(金) 13:43:57 ID:???
232 :
○ :2005/09/23(金) 13:58:23 ID:???
>>231 ●買ってる人の気持がわからん。
あれ詐欺だろ(プ
233 :
○もち :2005/09/23(金) 14:04:33 ID:???
>>232 orz
いいじゃん。月300円くらい…
234 :
○ :2005/09/23(金) 14:05:52 ID:???
●
●の効果ってスレタテの優先権と過去ログを早く見れるってだけだっけ? 過去ログはにくちゃんねるってのもあったけど
236 :
○もち :2005/09/23(金) 14:10:42 ID:???
だいぶ前に、突然 公開プロキシからは書き込めません。。。 みたいになっちゃったので、致し方なく●買った。
237 :
Name_Not_Found :2005/09/23(金) 14:12:49 ID:KVKJ5KY4
<div id="center_container"> <div id="center_left_layer"></div> <div id="#center_right_layer"></div> </div> こんなんで #center_left_layer {width: 529px; height: 563px margin: 10px 0px 0px 5px; } #center_right_layer {width: 334px; height: 559px; background-image: url(./img/right_img.jpg); background-repeat: no-repeat; background-position: left top; text-align: left; float: left; margin: 0px 0px 0px 0px; padding: 0px; border: 0px; } center_left_layerの右側に#center_right_layerを置きたいんですが、どうしてもleftの下側に入ってしまいます。 どうすれば右側に入ってくれますか。
#center_left_layer { width: 529px; height: 563px; margin: 10px 0px 0px 5px; float: left; } #center_right_layer { width: 3334px; height: 559px; background-image: url(./img/right_img.jpg); background-repeat: no-repeat; background-position: left top; text-align: left; margin: 0px 0px 0px 534px; padding: 0px; border: 0px; } ><div id="#center_right_layer"></div> X ><div id="center_right_layer"></div> ○
239 :
●さん :2005/09/23(金) 14:34:45 ID:???
●ないと書き込めないんだからしょうがないじゃん。orz
240 :
238 :2005/09/23(金) 14:37:59 ID:???
スマソ > width: 3334px; width: 334px;
>>238 ><div id="#center_right_layer"></div> X
><div id="center_right_layer"></div> ○
コピペミスですたorz
>>240 うまくいきました〜
margin-left:0じゃダメだったんですね…精進しますorz
ありがとうございました〜
昔さぁ・・・友達がキンタマの事、ちびまるこって言ったんだよなぁ・・・ そりゃさぁオレが厨んときだったし、みんなにおおうけしたんだよなぁ。 あの頃は良かったよ。 みんなはどう思う?
誤爆?
まぁつまりさ、月300万円ぽっちの●でガタガタ騒ぐなってことだよ。
>>236 公開プロキシは時間が経てば解放されるでしょ(IP変わればね)
まさにこれが後悔プロキ(ry
はいはいわろすわろす
247 :
Name_Not_Found :2005/09/23(金) 22:26:10 ID:yAZVLAuv
某まちBBSからきました。 最近、よくわからない記号のみの投稿(○∀○)←こんな感じ があってから、フォントでいうと10ptくらいの行間があくようになってしまいました。 みんな困ってるというほどでもないけれど、気持ちが悪いです。 多分CSSじゃないかと思うんですが、専門サイトを見たりしても 掲示板上の場合どうすればいいのかよくわかりません。 私自身はCSSは実践はしたことないんですが、ある程度の知識はあるつもりなので、 教えていただければ自力で頑張れると思います。 どなたかお暇な方、元に戻す方法を教えてください。。
>>247 ま ず は ど ん な 環 境 で ア ク セ ス し て る の か 書 け !
249 :
Name_Not_Found :2005/09/23(金) 22:40:58 ID:yAZVLAuv
私はWinIE6.0ですが・・
>>247 掲示板で<div style="line-fight:150%;">のように
タグを閉じないで書き込みがあった、ということなら
そのタグを閉じるやつを書き込んでやればヨロシ
ソース見ないと分からんけどNa
ていうか「暇な」香具師助けてってのもヒデー言い方だ…
CSSっていうかシリア語ブラクラ系だろ。
>>247 &#179
&#18
&#x0740
↑の&を半角にしてソース検索してみ?あったらそれが原因。
いえ、アルファベットすら書かれていません。 本当に(○∀○)こんなんにアクサンとかカンマみたいなのが大量にくっついてる感じです。 ソースって右クリックで見るやつですよね? その投稿の部分は&と#と;と4ケタの数字のかたまりが10個くらい表示されてました。 コピペしてお見せしても意味があるのかどうか・・ はぁ、すいません。時間のある方、ですね。
255 :
Name_Not_Found :2005/09/23(金) 23:06:56 ID:yAZVLAuv
あ、すいません、間違えてsageちゃいました。
>>253 あ、そうです、それです。どうすればいいでしょう?
スレ消費するか削除依頼した方が早いでしょうか?
݀
258 :
Name_Not_Found :2005/09/24(土) 00:06:00 ID:jN5kDnBR
実は削除依頼がえらい混んでるので気が引けるんですが、 それしかないなら、いっそのんびりスレ消費することにします。 ありがとうございました。
259 :
Name_Not_Found :2005/09/24(土) 01:03:26 ID:xhgGJKbn
質問です。
サイトのヘッダーに、以下のようなCSSでフォント指定をしているのですが、
MacIEだけ意図したフォント(ヒラギノ丸ゴ Pro W4)になりません。
何か思い当たる原因がありましたら教えてください。お願いします。
------------------------------------
@charset "EUC-JP";
/* 中略 */
h1, h2{
font-weight : normal;
font-family : 'Hiragino Maru Gothic Pro', 'ヒラギノ丸ゴ Pro W4', 'HG創英角ポップ体', 'MS Pゴシック', sans-serif;
line-height : 150%;
}
/* 後略 */
------------------------------------
該当のサイトは
http://pyawk.acbomb.com/ で、
該当のCSSは
http://pyawk.acbomb.com/common.css です。
>>261 頼む、もうちょっと日本語を喋ってくれ・・・
何を望んでるのか全くわからん。
CSSをテーブルのようにしたいってこと?? 例えば普通にDIV並べても <table><tr><td></td></tr><tr><td></td></tr></table> みたいになるのを <table><tr><td></td><td></td></tr></table> 見たいにしたいって感じ?ごめ、俺も説明下手だったかも。
みなさん、はじめまして。 IE6でサイトを閲覧するとき文字のサイズを閲覧者側が変更できますが その変更度合いをCSSで設定できますのでしょうか? 現在サイトを作っているのですがIE6.0で文字の大きさを 最大にするとデザインが崩れてしまいます。 (崩れないデザインにするのが正解と叱られそうですが。。。) で、参考にしているサイトは文字を標準から最大にしてもそんなに大きくならず デザインも崩れないのです。 最小から最大までの文字の大きさをCSSで設定できればデザインの幅も余裕が 出来るのではと思い質問させていただきました。 識者の方々宜しくお願いいたします。
「変更度合い」は設定出来ない。 文字サイズを変更出来るブラウザが、IE6.0だけだと思ってる時点で間違い。
>>266 レスありがとう御座います。
そうですよね、IE以外でも文字サイズの変更できるのは承知なんですが、
やはり文字サイズの変更で拡大縮小されても崩れないデザインをするのが正解。
ですかね?もしくは文字サイズの固定が正解でしょうか?
いやはや、やっと完成にこぎつけたサイトが文字の拡大してびっくり、
ぐちゃぐちゃに崩れてしまい先週の3連休はかなりへこんでますた。orz
>>265 「参考にしたサイト」を教えてもらわんとなんとも。
もしかしてem指定していない? emだとIEで異様に拡大・縮小されるから。
>>268 私は
>>266 ではないですが、ちょうど同じ事で不思議に思っていました。
例えばヤフーと私のサイトでは文字の大きくなる割合が大幅に違います。
>>269 em指定はしていません。
271 :
270 :2005/09/24(土) 14:12:10 ID:???
ソースを出せ、話はそれからだ。
273 :
Name_Not_Found :2005/09/24(土) 15:20:34 ID:2J1nq254
padding と paddin って何が違うのでしょうか? ぐぐったら「もしかして?padding」ってグーグル先生からヒントが出ました。 これでは、何の事かサパーリ不明です。知っている方いますか? いたらお願いします。
>>3 あたりに参考になるサイトが載ってるので、見てみてね。
>>269 >>272 レスありがとうございます。
ソースは例えば
p{ font-size:0.5em; }
こんな感じです。私はemしていしてました。
この場合、どうゆう指定が適切でしょうか?
>>275 おぢちゃん、それじゃぁデフォで小さすぎだよw
でもそのままemつかってりゃ桶。
.9emでも相当小さいよ。
277 :
アップル :2005/09/24(土) 16:10:11 ID:???
うぜー、この板。Web製作管理なんてヲタクだよね? HPなんて誰だって作れるしね。死ね。 <html> <head><title>死ね</title> </head> <body> <blockquote>氏ね</blockquote> </body> </html> おまえら、彼女居ないんだろ?ばーかばーか、ここが電車男がいた 掲示板ですか?きんもーっ☆
>>276 そうかな〜 ^^;) おれってもう、おぢちゃんかな〜
う〜ん、全体的な見直しが必要なようですねぇ。。。うぅ
p {margin: 0px; padding: 0px;} のようにしても、 IEで<p>ああああ</p>の部分の上下の余白が消えません。 なんとかして消したいのですがどのような方法がありますか?
281 :
Name_Not_Found :2005/09/24(土) 16:17:59 ID:ENcBY5l2
>>279 htmlのソースをさらしてくれると助かります
>>280 かまうなよ。そいつは、荒しなんだから。
「アラジンちゃんねるを作ろう」ってスレで馬鹿にされて怒ってるんだよ?
283 :
279 :2005/09/24(土) 16:24:49 ID:???
>>271 <div id="main">
<h3>最新の記事</h3>
<p>あああああ</p>
</div>
cssは
body { margin: 0px 0px 0px 0px; background:#ffffff; }
li,p,td { line-height: 120%; }
#main { font-family: Verdana, Arial, sans-serif;
width: 400px;
border: 3px solid #000000;
border-collapse: collapse;
float: left;
margin: 0px 0px 5px 3px;
padding: 0px 0px 0px 0px;
}
です。関係ありそうなところだけ抜き出しました。
IE6.0です。よろしくお願いいたします。
284 :
279 :2005/09/24(土) 16:27:24 ID:???
失礼しました。
>>283 は
>>281 への回答です。
補足ですが、h3にも同様にmargin、paddingを設定しています。
>>281 一部なのですがこれで分かりますでしょうか?
<div id="left">
<div CLASS="box">
<h2 CLASS="h2">おすすめゲーム</h2>
<p>このゲームは面白い</p>
</div>
<div CLASS="box">
<h2 CLASS="h2">おすすめゲーム</h2>
<p>このゲームは面白い</p>
</div>
<div CLASS="box">
<h2 CLASS="h2">おすすめゲーム</h2>
<p>このゲームは面白い</p>
</div>
</div>
診察どうぞよろしくお願いいたします。
pで{margin:0px}としていても h3が{margin:5px}ではpとh3の間に余白が空いちゃうという罠
287 :
279 :2005/09/24(土) 16:45:35 ID:???
例えばp{margin:0px;}としてる時、
<div id="main">
<p>あああ</p>
</din>
のp部分は反映されないのでしょうか?
>>279 の質問が、#main p{margin:0px;}を加えたら解決したので・・・
>>287 固定性の高い指定が優先されるからidに対する指定が優先されてるんだよ。
解決はそれでOK。
>>279 の突っ込みどころは、li,p,td { line-height: 120%; } だと思うが・・
あと、bodyにmargin,paddingがブラウザのスタイルで指定してあったりするんで、 そこを消すようにしたらいいかも。
widthとpaddingの指定ですが、DOCTYPEをいじらずに IEの表示を標準にできないんですか?
>>291 あくまでIEだけでいいのならxml宣言のあるxhtml使え
xhtml分からないから教えろなんて寝言はいうなよ?
>>292 異なるOSやブラウザと同じく表示したいということです
それで何でDOCTYPEをいじりたくないのだ
295 :
Name_Not_Found :2005/09/24(土) 21:55:15 ID:2J1nq254
やっぱり、paddin プロパティがわかりません。 paddingならわかるのですが… paddinって何ですか?マジレスきぼんぬ
>>295 マジレスすると、こっちもpaddinって何ですか?ということになる。
つまりそんなプロパティは存在しない。
297 :
279 :2005/09/24(土) 23:03:11 ID:???
>>289 すいません、できたら詳細をよろしくお願いします。
298 :
Name_Not_Found :2005/09/25(日) 00:23:38 ID:1HsP77Z4
>>296 ドメイン取るのに迷ってました…
でもpaddin.comでいいかな。。
(・∀・)パッディン♪
>>298 妙な迷い方に惚れたw
個人的にはpaddin.orgのがイイカンジ
301 :
Name_Not_Found :2005/09/25(日) 00:30:31 ID:1HsP77Z4
おお、よかった。
paddin.com
paddin.info
両方空いてる!今すぐどっちか取得します。
サイト名は、
>>299 のように…
(・∀・)パッディン♪
にします。ありがとうございました。
302 :
Name_Not_Found :2005/09/25(日) 00:31:56 ID:1HsP77Z4
>>300 orgって、私のサイトにマッチしないので…
.comが無難ですかね…
いやおまいさんの好きに汁w
304 :
Name_Not_Found :2005/09/25(日) 00:33:36 ID:1HsP77Z4
もう一つ聞くと、(・∀・)パッディン♪ ってのは2ちゃんねるの 顔文字ですか?
/* CSS・スタイルシート質問スレッド【45th】 */
http://pc8.2ch.net/test/read.cgi/hp/1121926305/ 552 Name_Not_Found sage 2005/08/15(月) 15:57:48 ID:???
厨よ 正しいhtmlを書こうや
<h1>タイトル</h1>
<p>ここに本文</p>
>画像のように線を飛び出させたいのですが、
>どの様な指定をすれば飛び出てくれますか?
paddinを上手く使うんだよ。
553 Name_Not_Found sage 2005/08/15(月) 15:58:35 ID:???
paddingだた
555 Name_Not_Found sage 2005/08/15(月) 16:53:46 ID:???
パッディン!!!
556 Name_Not_Found sage 2005/08/15(月) 18:21:09 ID:???
The paddin
557 Name_Not_Found sage 2005/08/15(月) 18:23:51 ID:???
(・∀・)パッディン♪
パッディン(・∀・) (-∀-) マージン (*゚∀゚)=3 ボーダー まー2ちゃんだ罠。
マージン ↓ ボーダー ↓ パッティン ↓ ___←ここが分かりません
パッティンじゃなくてパッディンだよ!!
>>301 いつか
paddin.com
paddin.info
訪問してみよう
パッディン(・∀・)・(-∀-) マージンって書かれてた時に、俺はどうやって落とそうかかなり考えたんだよ。 んで、(*゚∀゚)=3 ボーダーにしたんだけど、(*゚∀゚) ボーダーにするべきだったかなと今でも思ってる。 反省はしていない。
paddin.orz
そうか。よかった。
んだんだ
じたじた
(*゚∀゚)=3 ボーダー ↑これなんてエロすぎて直視出来ない。 なんて卑猥なんだ。エロ過ぎる。
もはやこのすれはざつだんすれになつた
321 :
Name_Not_Found :2005/09/25(日) 14:51:42 ID:1HsP77Z4
みなさん、どうもありがとうございました。
322 :
Name_Not_Found :2005/09/25(日) 16:55:43 ID:fJuYLhHW
教えてください。IE6.0で <H2>セ・リーグ</H2> <ul><li>阪神タイガース</li> <li>読売ジャイアンツ</li></ul> CSSは * { margin: 0; padding: 0; } H2{ font-size:80%;} このような場合セ・リーグと阪神タイガースの間には勝手に行が入ってしまいますが それを回避(任意の幅に)するにはどのようにすればいいのでしょうか?
h2に魔神
324 :
322 :2005/09/25(日) 17:14:57 ID:fJuYLhHW
連投すみません また、<BR>などの幅を任意の幅にするのはどうしたらよいのでしょうか? よろしくお願いいたします。
325 :
Name_Not_Found :2005/09/25(日) 17:16:04 ID:QItWrwY3 BE:553449097-
h2にJ2 ulをolにし 1個目のliに「コンサドーレ」 2個目のliに「ヴォルティス」
326 :
322 :2005/09/25(日) 17:31:39 ID:???
327 :
Name_Not_Found :2005/09/25(日) 17:38:27 ID:QItWrwY3 BE:553449097-
うはwwwwwwこれで優勝決定wwwwっうぇwwwwwww
>>322 まあ、強引にするなら
* { margin: 0;
padding: 0;
display:inline;}
329 :
322 :2005/09/25(日) 18:31:55 ID:???
>>328 お返事ありがとうございます
やってみましたがリストが横方向に並んでしまいました。
デザイン上無理なので今回は見送ることといたします。
ご親切に感謝いたします、ありがとうございました。
CSSでfloatでもpositionでもどんな方法でも良いのですが、
左右に並べたブロック要素(?)の高さを揃えるにはどうしたら良いのでしょうか?
他スレに
---------------------------------------------------
592 名前:590[sage] 投稿日:2005/09/06(火) 23:13:37 ID:???
CSSでマルチカラムをやろうとして、
div { float: xx; background: #xxx; }
とやっても、本文と同じ長さ(下の方まで)背景が塗りつぶされませんよね
tableなら何のことはないんですが、CSSならどうすればいいのかわからなくて……
593 名前:Name_Not_Found[sage] 投稿日:2005/09/06(火) 23:30:22 ID:???
>>592 いや、table(というかtdだよね?)でやる場合と同じように、
隣のブロック(セル)に引っ張ってもらえばできるよ。
がんがれ。
---------------------------------------------------
ってのがあったんですが、>593のいうように、
隣のブロックに引っ張ってほしいのですが、どのようにするのか分かりません。
お願いします。
ヘタレな質問だと思いますが教えて下さい。 テーブルタグで作った四角の中に更にテーブルで大きさの違う四角を レイアウトしたいんですが何度やってもうまくいきません。 具体的には ----------------------------------- | -------------------------------- | | | | | | -------------------------------- | | ------------------- | | |----------- | | | | | | | | | | | | | | | | | | | | | | |----------- |------------------- | ----------------------------------- こういった感じで上がタイトル、左下に写真、右に説明文みたいな風にやりたいんです。 captionやth使ってみたりしたんですがどうにも意図したとおりにならず…。 tdに対するCSSをどう指定すればいいのかがわかりません。 よろしくお願いします。
崩れすぎだ…_| ̄|○ 大きい四角の中の上の横長にタイトル、左下に若干小さめの四角 その右に説明文の四角を入れたいんです。 この形の物を一つのページ上にいくつか表示して それぞれ(説明、写真、タイトル)の部分をCSSで一括して指定したいんです。 連投申し訳ないです。
>>331 擬似的なので良ければ
二つのブロックを一つブロックで囲ってやって、その囲ったブロックを
短いほうのブロックに合わせる(色とか)
>>332 テーブルの入れ子をするようなHTMLを書くんなら、
素直にCSSじゃなくてtableのwidthやheight属性使っといたほうがいいよ。
>>333 CSSの必要性がわからないよママン。
<table>
<tr>
<td>タイトル</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>写真</td>
<td>説明</td>
</tr>
</table>
</td>
</tr>
</table>
じゃ駄目なのかい。
>>335 のタイトルや写真のtdにclassを指定しておいて一括指定
337 :
331 :2005/09/26(月) 00:25:15 ID:???
>>334 レスありがとうございます。
とりあえずやってみます。
>>335-336 ありがとうございます。
早速やってみたのですが上の四角だけがはみ出してしまいます。
下の2つは同じ四角の中に納まっているんですが。
ちなみに
td{width:230px;
height:100px;
vertical-align:bottom;
font-size:12px;
padding:0px;
border:solid 3px #444444}
って感じでCSSを使ってた中で試してみました。
てっきりcolspanを使うものだと思い込んでたんですが使わなくてもいけるんでしょうか?
あと
>>336 さんの仰るようにtdにclassを一括して指定しても
それぞれの箱の大きさを変えることはできるんですか?
タイトル、写真、説明と3つのclassが必要かと思ってたんですが…。
一つ一つのテーブルは極力シンプルに その代わり入れ子は多め これがテーブルレイアウトの肝だ。
>>338 もしかして、四角ってのは他テーブルである必要はなくて、線であればいいのか?
だとしたら、テーブル一切使わない方法を、このスレ的にはお奨めするが。
342 :
341 :2005/09/26(月) 00:51:35 ID:???
「他」が多いorz
>>332 <table> の border は <caption> の部分にはかからない。
<caption> を使わずに <th> で代用すればいい。
<table>
<colgroup><col><col></colgroup>
<tbody>
<tr><th colspan="2">タイトル</th></tr>
<tr><td><img alt="" src=""></td><td>説明文</td></tr>
</tbody>
</table>
table {
margin: 0 auto;
border: 1px solid;
border-collapse: separate;
border-spacing: 0.5em;
font-size: 100%;
}
th, td {
border: 1px solid;
padding: 0.5em;
vertical-align: top;
}
img {
border: 1px solid;
vertical-align: baseline;
}
>>341 テンプレのFAQも一応覗いたんですがイマイチ自分の思ってた事に合わなかったのと
tableの方がやりやすそうだったので。…というか他の方法をわかってないだけだと思いますが。
>>343 なるほど。やってみたらほぼ思った通りになりました。
あとは3つのテーブル同士の間空けたりとか色とかなので自分でもできそうです。
ただ考えていたのは
大外と中の3つのテーブルの大きさは固定
色は適宜変えたい。その際どうページであれば同じ項目のテーブルは同色で一括指定。
写真の欄はそのテーブル内いっぱいに表示するようにし、元画像はテーブルに合うようにする
って感じです。小出しで言ってしまって申し訳ないので最後に一つだけ聞かせて下さい。
thとtdを同時に指定されてますが、それを個別にして大外の3つを囲む基本テーブル内に
%指定で上の3つの条件を設定することは可能ですか?
うまく文章書けなくてすいません…。
345 :
341 :2005/09/26(月) 01:34:53 ID:???
>>344 こういうのでイメージ通りにはなんない?
table {
margin: 0 auto;
border: 1px solid;
border-collapse: separate;
border-spacing: 0.5em;
font-size: 100%;
width:500px;
}
th, td {
border: 1px solid;
padding: 0.5em;
vertical-align: top;
}
.img{width:200px;}
img {
border: 1px solid;
vertical-align: baseline;
}
<table>
<colgroup><col class="img"><col></colgroup>
<tbody>
<tr><th colspan="2">タイトル</th></tr>
<tr><td><img src="test1.png" width=200></td><td>説明文</td></tr>
</tbody>
</table>
よ〜く考えよう〜♪ 名前欄の確認は大事だよ〜♪ ・・・・・・・・何度目だよorz
あ、勿論thとtdを別にすることは可能だよ。
ジサクジエーン
table {width:400px; height:300px; margin:auto; border: 4px solid; border-collapse: separate; border-spacing:2px; font-size: 11px;} th {width:390px; height:30px; border: 2px solid; padding: 2px; vertical-align: top;} td {border: 4px solid; padding: 4px; vertical-align: top;} .a {width:150px; height:100px;} .b {width:230px; height:100px;} img {width:150px; height:100px; border: 1px solid; vertical-align: baseline;} 先ほどのやつでは個別にtdをいじれなかったのでaを写真、bを説明のclassという風に いじってみたんですが、これは無駄なことをしてるでしょうか? う〜ん…難しい。もっと基本からやったほうがいいでしょうか…。
ああ!書いてるうちにΣ(´Д`; )リロードすべきでした。
thとtdわけてもいいんですね。
見る人がみたらかなり不細工な書き方なんでしょうが一応
>>349 の方向でやってみようと思います。
こんな時間に親切なアドバイスどうもありがとうございました。
351 :
Name_Not_Found :2005/09/26(月) 01:51:24 ID:E77L2VFL
CSSを使ったスタイルの初期化でinputタグ以外の境界線を なしにするにはどのようにしたら良いでしょうか? 「*」が非常に手軽で利用していたんですが、inputでボタンまで スタイルが適用されてしまい、見栄えが変になってしまいました。 * { border-width:0px; } input { この後にどう書けば良いでしょうか?
>>351 input{border-width:2px;}
じゃなくて?
>>350 <td>, <th> への width, height 指定は UA によって解釈の違いが
あったり、計算に時間がかかる可能性があるので止めた方がいい。
width は <col> に、height は <tr> に指定することをすすめる。
参考までに、 <col> に width を指定した上で、<table> に
table-layout: fixed を指定しておくと、セルごとに幅を計算する
必要がなくなるので、高速に表示できる場合がある。
>>351 CSS2 のセレクタに対応している UA なら input[type="text"] で
選択できる。それ以外の UA にも対応させるなら class を振るか
親子関係で選択するしかない。
とにかく余計なものまで選択しないようにセレクタを書くべし。
それと border-width: 0 だと、実装によっては非常に細い線が
描かれてしまう可能性があるので border-style: none を指定した
方がいい。border-style: none なら border-width は無視される。
パッディン(・∀・)
パッディン(・∀・)
356 :
Name_Not_Found :2005/09/26(月) 11:39:48 ID:UNVcIaZ3
リンク色の指定で行き詰まってます。 外部cssにて A:link {COLOR: #9999cc; TEXT-DECORATION: none} A:visited {COLOR: #9999cc; TEXT-DECORATION: none} A:active {TEXT-DECORATION: none} A:hover {COLOR: #ffffff; TEXT-DECORATION: none] をテーブル内にだけ適応させたいのですが、どのように記述すれば宜しいでしょうか? (body全体には適応させたくない) ご指南宜しくお願い致します。
>>356 例えば
#link A:link,#link Avisited {COLOR: #9999cc; TEXT-DECORATION: none}
#link A:active {TEXT-DECORATION: none}
#link A:hover {COLOR: #ffffff; TEXT-DECORATION: none]
<table id="link"><tr>
<td><a href="〜">〜</a></td>
</tr></table>
A:linkとA:visitedみたく、スタイル一緒ならまとめような。
358 :
356 :2005/09/26(月) 12:52:03 ID:???
>>357 有難う御座いました。
バッチリできました♪
359 :
Name_Not_Found :2005/09/26(月) 21:52:55 ID:NLb+DcFu
fieldsetのlegendを文字の代わりに画像を使おうと下のようなHTMLを書きました。 MSIEでは想定通りに表示されるのですが、Firefoxや、Mozillaだとlegendの部分が まったく表示されません。どこに問題があるのでしょうか? <html> <head> <title></title> <style type="text/css"> <!-- legend { height:30px; width:200px; background-image: url(image.gif); background-repeat: no-repeat; background-position: center; display: block; } legend span {display:none;} --> </style> </head> <body><form> <fieldset><legend><span>ラベル</span></legend><input type="text"></fieldset> </form></body> </html>
>>359 そもそもlegendにはwidthが指定できない。
確かIEのほうがバグ。
362 :
Name_Not_Found :2005/09/26(月) 23:57:28 ID:NLb+DcFu
>>361 ええ〜っ!
ってことは、文字の代わりに画像をってのは無理なんだ...
じゃぁ、<legend><h1><span>文字</span></h1></legend>
というのは文法的にOK?
>>362 backgroundで処理しようとするのが間違いかと。
あと、それは文法的にありえん。
<img>つかえ
365 :
Name_Not_Found :2005/09/27(火) 00:24:22 ID:JoK1c5DB
>>363 やっぱりそうですよね。
legend内はテキストだけにして、画像で表示させる方法ってないものでしょうか?
>>364 もし代替策がなければ、最終的には<img>使うことになるのかなぁ...
でも、それだと画像と意味合いがかぶるから、legendが不要になってしまうので
って考えるとなんか嫌かも。
legend って 伝説?
>>365 364の言ってるのはこういうことだと思うぞ。
<fieldset><legend><img src="***.png"></legend><input type="text"></fieldset>
あ、もちろん画像切っててもOKなようにaltは入れてな。
みなさんんはどのブラウザまでに対応しているものを作っているんでしょうか? 自分はIE6.0だけで限界ですが。
>>369 WinIE6はあまりに解釈が酷いので半分捨てて簡素にしてます。
今はFFを基準に作ってるかな。
あとNN7とOpera8。
>>369 とりあえずfirefoxの最新版でチェックぐらいしようよ。
>>361 > 指定できない
ページ作成者が指定するのは自由、文法違反が無ければ何でも書いてよい。
CSS とはそういう簡単なもの、うぇぶでざいなぁに細かい知識を求めていない。
ただし、知識があっても損は無いのかもしれない。
UA 開発者は、CSS 仕様の中で UA 向けに書かれた部分を十分に理解して、
ページ作成者が恣意的に並べた宣言を適切に取捨選択して
適用 (apply)
するような UA を作らなければならない。
CSS 仕様を理解するための一つのコツは、
主語が (UA, Author, User) のどれ(複数あり) なのか、はっきりさせること。
>>374 や、そういう意味の「できない」じゃないが、まぁじゃあ
書いても無視されるべきlegendに対するwidth、と言えば良かったかな。
>>370 X→FF
○→Fx
えばって書くんじゃねぇよ糞が
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
現スレFF検索結果:2←除376 現スレFx検索結果:1←含376 前スレFF検索結果:10 前スレFx検索結果:0 そういえばホムペはさらに進化して自サになったらしい・・・もはや何が何だか。
以下の記述をしました。 ---CSS--- ul { list-style-type: square; } li { float: left; margin-left: 2em; width: 8em; } ---HTML--- <ul> <li>めにゅー1</li> <li>めにゅー2</li> <li>めにゅー3</li> </ul> Firefoxとsafariではリストのマークが表示されるんですが、 IE5.xとMac Opera8.5では表示されませんでした。 floatさせないと勿論マークが出ますが、floatさせるとダメみたいです。 どの様にすれば横並びでリストマークが表示されますか? 宜しくお願い致します。
どうでもいいが
>>377 をみて「すべてがFになる」を思い出した。
>>379 それ確かバグだった気がする・・・ちょっと待って。
そっちも思い付く単語でぐぐってみてくれ。
383 :
379 :2005/09/27(火) 13:06:09 ID:???
>>381-382 やはりバグでしたか。。。
list-style-type: none; にして、<li>■めにゅー1</li>なんて邪道をやるしかないのかなぁ。
とにかく、御回答ありがとうございました。
ちょっと質問いいでしょうか。 今まではテーブルレイアウト(HTML)+CSSで作っていたのですが XHTML+CSSへの移行準備をしてます。 それでCSSコーディングをするさいにテーブルをCSSで組んでいるのですが 外部CSSに body { margin: 0px; padding: 0px; } を組み込んでおり トップテーブル部分に .head { margin: 0px; padding: 0px; width:650px; height:300px; text-align:center; background-color:#3366FF; border-style:solid; border-width:1px; border-color: #ff0000; } としているのですがHTML+CSSの時はheader部分のmargin0pxは動いていましたが XHTML+CSSでは上記内容だとheaderに空間が開いてしまうのですが どうしたら宜しいでしょうか。
>>384 トップテーブル、てなに?
tableにpaddingとかheightとか書いてもあんまりいいことなさそうな希ガス。
386 :
384 :2005/09/27(火) 13:52:00 ID:???
×トップテーブル 〇最上部テーブル と言ったほうがいいでしょうか。 header部分のロゴや画像部分のテーブルになります。
>>384 その.headクラスを適用しているタグが気になる。
<div>とかなら平気だと思うんだが。
個人的に.headでクラス指定より#headでID指定のが美しく感じる。
テーブルレイアウトしてる限り、XHTMLに移行するメリットも CSSを使うメリットもないと思うけど… 自分やってみた限りでは、別に隙間空いてないようだが。
389 :
384 :2005/09/27(火) 14:11:37 ID:???
<body> <div class="head"> 〇〇〇 </div> </body> になります。 body { にてmargin: 0px; で指定しているので上部との行間は開かないはずなのですが なぜか1行分あいてしまいます。
390 :
384 :2005/09/27(火) 14:13:17 ID:???
勿論XHTMLではテーブルは一切使用しません。 全て外部CSSの内容になります。
spaceとか入ってない? とりあえずまっさらなXHTMLを一つ作って、そこに既存のものを入れ込んで確認
392 :
384 :2005/09/27(火) 14:25:38 ID:???
とりあえず簡単な物を作って見ました。
[ XHTML ]
<?xml version="1.0" encoding="Shift_JIS"?>
<!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 " xml:lang="ja" lang="ja">
<head>
<title>サンプル</title>
<link rel="stylesheet" media="screen" href="css/sample.css" type="text/css" />
</head>
<body>
<div class="head">〇〇〇</div>
</body>
</html>
改行多すぎて書き込めない為CSSは次に
393 :
384 :2005/09/27(火) 14:27:17 ID:???
[ CSS css/sample.css ] @charset "Shift_JIS"; /*--- 全体タグ設定 ---*/ body { font-family : "Arial", "Helvetica","MS Pゴシック", "Osaka"; font-size : 11px; text-align: center; background-color:#FFFFFF margin: 0px; padding: 0px; } /*--- ヘッダーテーブル ---*/ .head { width:700px; height:50px; text-align:center; background-color:#FFFFFF; border-style:solid; border-width:1px; border-color: #999999; } このように設定してみましたが やはり1行スペースが開いてしまいます;
自分の環境ではスペース開かない。 どんな風に「1行スペース」なのかSS撮ってみ?
395 :
384 :2005/09/27(火) 14:49:08 ID:???
>>395 ところで、なんでヘッダー"テーブル”っていうの?
tableつかってないじゃん。
Sleipnirだからじゃね?
>>384 そのhtmlをアプロダにでもageてみろ。
400 :
384 :2005/09/27(火) 15:03:18 ID:???
>>396 失礼しました。
テーブル「レイアウト」のように見える用に作っている為
自分でも分かりやすいように説明を付けています。
>>397 通常IEでも表示は同じでした。
>>398 まったく同じ物です。
何度コピペして作っても1行空いてしまいます。
CSSでのbodyは
body {
font-family : "Arial", "Helvetica","MS Pゴシック", "Osaka";
font-size : 11px;
text-align: center;
background-color:#FFFFFF
margin: 0px;
padding: 0px;
}
しか使用していないのですが;
402 :
384 :2005/09/27(火) 15:06:13 ID:???
CSSのbodyのbackground-color:#FFFFFFのケツに;を。 更に.head前の半角スペース削除。
バックグラウンドの後にセミコロンないよ
405 :
384 :2005/09/27(火) 15:15:26 ID:???
>>403 >>404 有難う御座います。
2点修正した所、無事スペース無しで表示できました。
ちょっとしたことで動かないものですね。
以後気をつけます。
皆様、有難う御座いました。
ちょっとした事でもないとおもうけど・・・PGはそんなもんだし。
自分でトラブルシュートできないとまずいレベルの問題だし…
IE6で<li>をインラインで並べた時 <li>画像<li> <li>画像<li> <li>画像<li> とすると、ブラウザで表示した時、画像の間に隙間が空きます。 <li>画像<li><li>画像<li><li>画像<li> こういう風に並べたら大丈夫ですが、右にソースが伸びて不格好です。 どうすれば良いのでしょうか?
>>408 <ul
><li>画像</li
><li>画像</li
><li>画像</li
></ul>
>>409 ulを入れても崩れます。
もしかして、409のように>に改行を入れて書くのですか?
いや〜閉じタグがない若しくは何か間違っているような やっぱりmarginとpaddingをみて欲しいような
412 :
408 :2005/09/27(火) 16:35:38 ID:???
>>411 marginとpaddinがulとliともに0にしてます。
基本的に何も判っていないような 409で答えが出てるのに何を悩んでいるのか判らないような
414 :
408 :2005/09/27(火) 16:44:16 ID:???
>>413 この答えが正しいのか否かです。
書き方的には、自分の常識ではなかったので・・。
415 :
409 :2005/09/27(火) 16:54:34 ID:???
>>414 頭固いなあ。
仕様書とか説明サイトとかに書いてあると思うけど、おおざっぱに言うと、
タグの<と>の間には、まあ何書いてもいいんだよ。
だから、普通に書くと隙間として表示されてしまうliとliの間の改行コードをタグの中に
入れてしまえば解決するじゃん。
>>409 で書いたのなんかは、ナローバンドな頃に、
大きい画像を切り刻んで並べていた時代があって、その頃に考えだされたハックだよ。
まぁ、おとなしく横に並べて書いたほうがスマートだわな
>>414 正しいか否かは試せば済むんじゃないか?
コピペで済む話だろう。
俺もタグ内改行は昔っからよくやる。
>>408 li img { vertical-align: bottom; }
419 :
T :2005/09/27(火) 17:33:51 ID:QPm8yiuR
420 :
T :2005/09/27(火) 17:35:04 ID:QPm8yiuR
訂正です。 >表示ができなかった スタイルが適用されなかった。
421 :
409 :2005/09/27(火) 17:45:04 ID:???
>>418 それは、liを縦に並べたときのベースラインのアレでは?
423 :
T :2005/09/27(火) 19:26:55 ID:QPm8yiuR
>>422 まさに、そのとおりでした!!解決です。有難う御座います。m(_ _)m
スレ違いとの事なので移動させて頂きます。
424 :
Name_Not_Found :2005/09/27(火) 19:41:54 ID:bQ8pWttA
横に二つ並べたboxをセンタリングしたいんですが、 margin:autoで指定しても、float:leftの方が優先されて、左詰めになってしまいます。 方法があれば教えていただきたいです、よろしくお願いします。
>>414 今更だが、コメント内で改行するのもあり。
<ul><!--
--><li>画像</li><!--
--><li>画像</li><!--
--><li>画像</li><!--
--></ul>
コメント内には<!-->ここら辺の記号以外何書いても問題ないので重宝するかも。
>>424 普通は
<container>
<left></left>
<right></right>
</container>
って感じで、containerに幅とセンタリング、leftに幅とfloat、rightに幅とfloatかな。
ポジション使ってもいいけど面倒くなる。
427 :
424 :2005/09/27(火) 19:54:10 ID:bQ8pWttA
>>426 container・・・持ってる本に載ってない;
英語の意味的に挟まれてるボックスをブロック化(?)するって感じかな?
ググってみます。。
ありがとうございましたー!
>>427 そじゃなくて、単に<div id="container></div>
とか書くところを省略しただけかと。
429 :
424 :2005/09/27(火) 20:23:18 ID:bQ8pWttA0
ああ、例えばのid名ですね。。 試しに、 <CSS> #container{margin:auto; width:700px} .box2{background-color:#FFFFFF; margin:auto; border:1px solid; width:148px; height:100%; float:left; padding:10px 20px;} .box3{background-color:#FFFFFF; margin:auto; border:1px solid; width:548px; height:100%; float:left; padding:20px 40px;} <html> <div id="container"> <div class="box2"> </div> <div class="box3"> </div> </div> とやってみたのですが、右側のbox3が改行されてしまいます。。 CSSファイルでおかしい部分はありますか?
width:とpaddingの合計をすれば解りそうなものだが・・・
431 :
424 :2005/09/27(火) 20:32:19 ID:bQ8pWttA0
できました! widthって内容の幅だったんですね・・・。 ホントありがとうございました。。
ココで質問している香具師へ もう少し基本と初歩的な応用くらい勉強して下さい。 英語の学習で言えば、まずは単語を覚える、そして、文法を覚えるようにね
435 :
Name_Not_Found :2005/09/28(水) 00:07:05 ID:qr614JrS
質問させてください。 html{background:url(bg.png) 50px bottom no-repeat fixed;} body{background:transparent;} このように、bg.pngの位置をleft/rightなどというキーワードではなく位置で指定すると N7で画像が表示されなくなるんですが、これはバグでしょうか? CSSバグリストにも載ってないようなのですが。
背景画像て数値指定できたっけ?
437 :
Name_Not_Found :2005/09/28(水) 00:49:51 ID:qr614JrS
>>437 そこをもうちょっとよく見ればわかると思うけど、キーワード指定と数値・パーセント指定を同時に記述することはできないのよ。
CSS 2.1では可能になってたと思うけど。
>>437 書いてる内容はよく分からないが、とりあえずそのサイトを参考にするのはやめたほうがいいと思った。
ああ、なるほど、50px 100pxなどとすればいいのですね。 勘違いどうも申し訳ありませんでした。 どうもありがとうございます。
441 :
440 :2005/09/28(水) 01:27:05 ID:qr614JrS
すみません、ID表示忘れました。 どうもありがとうございました。
定義型リストDL DT DDについてなのですが、 DD要素にボーダーを指定しても表示されないという 問題を抱えています。 list-style-tyoeはDLには効かないということなので、 代わりに左ボーダーを表示させたいのですが・・ DD要素にボーダーは使えないということはあるのでしょうか。 DD { line-height:170%; /* list-style-type: disc; */ margin-top: 14px; padding-left: 0.5em; padding-top: 0.2em; padding-bottom: 0.2em; border-left-sytle:solid; border-left-width: 1em; border-color: #ff3f00; }
443 :
442 :2005/09/28(水) 01:52:20 ID:???
ただ、DT要素ではボーダーを表示させることができました。 それも最初は表示されず、追加でpaddingを指定したときのみ ボーダーが表示されました。 DT { width: 70%; margin-top:22px; padding-left: 0.5em; padding-top: 0.2em; padding-bottom: 0.2em; border-bottom-style: dotted; border-bottom-width: 0.05em; border-bottom-color: #ff7d00; } 以上のような状況です。ぜひぜひアドバイスをお願いします。
444 :
Name_Not_Found :2005/09/28(水) 08:11:13 ID:pOenpi+f
CSSでIEならデザインは抜きで、 ちゃんと色つきである程度の構成したページを見ることができたのですが、 ファイヤーフォックスで見ると、真っ白なページで、縦方向に表示されます。 何が原因かわからないので、教えてください。
>>442 書き方間違ってる。
セレクタの書き方をもう一度見直して勉強。
border-left:solid 1em #ff3f00;
これで出る。
>>444 ソースもなしにわかるかいな。
HTMLを書き間違えたんやろ。
セレクタの書き方じゃねーよ俺、プロパティの書き方orz
セレクタも小文字にするべきだけどな
448 :
Name_Not_Found :2005/09/28(水) 08:53:15 ID:pOenpi+f
>>448 小姑根性で言っておくが、それは礼の言葉ではない
みなさんは文字の単位はなんにしてますか? また、横幅などの単位はなんにしてますか?
どうもでした の検索結果 約 204,000 件中 1 - 100 件目
その検索の意味はなんだろう・・・?
455 :
442 :2005/09/28(水) 13:40:07 ID:???
オハヨウございます。なにか寝てる間に事態が進展してますが、
>>448 は私ではありません…。
というわけで失礼があったみたいですが、改めてありがとう
ございました。
>>445 いまそっくりそのまま試したところ見事、
太い左ボーダーが出現しました。
あらためて自分のソースを眺めてみて、
border-left-sytle:solid;
border-left-width: 1em;
border-color: #ff3f00; → border-left-color: #ff3f00;と
訂正してみたのですが、やはりボーダーはでませんでした。
あちこちからのコピペと自己流でやってたので、大文字小文字も
混在してたりします。 やはり一度勉強しなおしてみます。
>>453 スタイルシートも認識するのですね。CSSはそのままだと
読めないみたいなので、HTMLにして試してみます。
志村〜sytle sytle!
天国の声 だめだこりゃ
>>454 相対的な単位を使ったほうがいいでしょうか。
絶対的な単位は嫌っている人がおおい?
文字も横幅も%って人います?
>>458 つか場合によるだろ。考えて使えば問題なし。
MacのIEで見た時に、 スクロールバーを動かさないと見れない部分が真っ白なのは 何が悪さしてるんでしょう? CSSを切ると全部見えるので、CSSが原因だと思うのですが…。
>>460 MacIEのバグ。
overflowとjavascriptをうまく使ってなんとかできないこともないんだけど、
ユーザ数を考えるとアレなので、僕はそのままにしています。
>>461 バグなんですか…
CSS使用していて下のほうまで見れるサイトもありますよね?
て事は、悪さしてるやつを使わないようにすればできるって事でしょうか?
overflowは使ってないので、何か別の物が…誰だ…
MacIEで、縦長のサイトを見た時に、 初めの見た目はちゃんと表示されてるんだけど、 スクロールバーを動かして、下のほうを見ると、 もう真っ白で何もない状態になってしまうと言う事。 真っ白のページは、データの分だけ続く…
> CSSを切ると全部見えるので、CSSが原因だと思うのですが…。 どんな指定してるんだ?単純な装飾だけなのか?
<div id=all> <div id=left> 色々 </div> <div id=right> 色々 </div> </div> て感じです。 #left、#rightは、float:left;を指定。 でも、こんなレイアウトって、よくありますよね?
>>459 場合ですか。
どちらがいいか考えて見ます。
>>466 なんで半端に書くの?もっときちんと書こうよ。
471 :
Name_Not_Found :2005/09/28(水) 22:11:09 ID:g2bbtfpW
ところで、よくボーダーの太さを thin medium thick といったもので書いているサイトがあるのですが、 普通にpxで指定しては何かまずい点があるのですか?
472 :
461 :2005/09/28(水) 22:14:38 ID:???
>>464 ん?コンテンツが突然プッツリと途切れる、ってこと?
だったらゴメン。
>>461 で書いたのは、コンテンツが終わった後に、
下方向にドバーンと空白ができる現象のことです。
あと、長年マクもつかってますが、そんなんなったことないっす…
>>471 なかろう。
thin とか medium とか書いたら、その要素の大きさに合わせて線の太さが
変動したりしてくれるUAとかあったら面白そうだけど。
474 :
442 :2005/09/28(水) 22:40:31 ID:???
>>467 うへ、早とちりしてました。お恥ずかしい…。
> sytleという綴り間違いと、
これまたお恥ずかしい! 吊ってきます。五分ほど。
>>466 <div id=left>のところって<div id="left">でなくてもいいのか?
divて使ってはいけないんですか? なんでDiv厨というのか理由があるのでしょうか? W3C非推奨とか
>>477 意味段落を示すような、意味のあるdivなら使っていい。むしろ使うべき。
しかしdiv厨と呼ばれる輩は、デザインのためだけに無意味なdivを多用する。
これが「文書構造を明確化するためのマークアップ」という理念から外れるため、
div厨は疎まれる。
480 :
466 :2005/09/29(木) 00:38:01 ID:???
>>470 全部書いたら長くなるかと思って…。
>>472 そう、途中でぷっつり。でも、本来なら見えてる分だけ余白有り。
他のマックでも見てもらったんだけど同じ現象になったorz
>>475 本当はちゃんと""で囲ってるよん。
CSSの詳細は、
--------------------
body{
margin: 0; padding: 0;}
#all{
margin: 0; padding: 0;
width: 770px; height: 100%;}
#left{
margin: 0; padding: 0;
width: 200px; height: 100%;
float: left;}
#right{
margin: 0 0 0 210px; padding: 0;
width: 540px; height: 100%;
float: left;}
--------------------
のような感じです。(一部省略&改行減らす為に見辛いですが)
#allのheight:100%;あたりが問題?
ttp://cssbug.at.infoseek.co.jp/detail/macie/b019.html ちなみに、各heightを100%にしているのは、
背景を下まで表示させたい為です。
なるほど、往年のtableレイアウト隆盛と同じような感じなんですね 全く使っていけないわけではないようなので、少し安心しました
>>480 おそらく、height の指定が原因してるんだと思うよ。
しかしながら、あなたの CSS では親要素 body の height に
有効な長さが指定されていないので、子の長さは有効でない。
従って height があろうとなかろうと同じ結果になるべき。
html も body もタグは省略可能だけど要素は存在する。
div から始めてもルート要素は常に html になる。
ちなみに overflow が visible (既定値) で height に有効な長さが
指定されていれば、ブロックの高さは指定した長さに限定され、
はみ出した部分は後続するブロックに重なって表示される。
正しい実装なら、はみ出した部分にまで背景は伸びない。
ボックス事態がはみ出ていないのに ネットスケープとファイヤーフォックスでは横スクロールバーが出てしまいます。 コレはなぜでしょうか?ボックスがはみ出ていないのでwidth と height の計算方法の実装の違い ではナイト思います。
>>483 書くスレ間違えました。
他言ってきます。スルーで
>>484 スレ違いじゃねーけど、どこで質問するにしろソース出せ、な?
ボックス要素の中で、 画像のクラスをmargin-leftとmargin-rightをautoにしても 真ん中に行かないのは、何で?
>>488 >IEの有名バグ
キミのオツムのバグだと思われ
a:hoverでリンクに背景色を付けているのですが、 これをするとFirefoxで見ると、オーバー時に画像に_ のような感じで色が付きます。 すべてサイトを構築したので、作り直しできません。どうすればいいでしょうか?
>すべてサイトを構築したので、作り直しできません。どうすればいいでしょうか? 泣 け !!
>>491 画像だけ排除するようなタグを書けばいいじゃない
>>493 書き方が分かりません・・。
img a:hover{
background-color:none;
}
では無理でした・・。
imgのリンク用に別にすればいい。 例えば a:hover.img { background-color: white } みたいな。 んでimgのaは <a href="shibakuzo.bmp" class="img"><img src="shibakuzo.gif" /></a>
>>491 > すべてサイトを構築したので、作り直しできません。
そんな大げさな。何ページくらいあるの?
多少多くたって、正規置換すれば、<img>を含む<a>にクラスつけるのなんて、すぐじゃん。
5ページです。
氏ね!!! マジで氏ね!!!!!!
同じくw それはさておき、興味が出たから試しにやってみたが そもそもFirefoxで見ても特に妙な表示はされなかったよ。
>>487 > 画像のクラスをmargin-leftとmargin-rightをautoにしても
> 真ん中に行かないのは、何で?
このプロパティって、ブロック要素しか適用しないんじゃないんだっけ?
img要素みたいなインライン要素は…text-alignプロパティでやってるけど…orz
この場合は、" text-align:center "でおっけ?
>>495 これをやっても駄目でした・・。とりあえず諦めます。。
Windows対象のページを作ってたんですが Mac(Tigerのみ)に対応しなければならなくなりました。 実際ページを表示してみると MacOS10(Tiger)のSafari2.0、Netscape7.1でテキストボックスが 大きすぎるためページが横スクロールしちゃってます。 Netscapeのテキストボックスなんて異常に大きくないですか? なんとかスタイルシートでテキストボックスの大きさをWindowsとあわせられないでしょうか? というか<input type="text">でサイズを指定して同じ画面サイズを使用してるのに なんでこんなことになるんでしょう?
>>503 フォントの違いでしょ。
デフォルトスタイルシートで medium になってるみたいね。
見比べながら適当に設定すればよろし。
>>503 プロポーショナルフォントを指定した場合
テキストエリアの幅の算出方法がブラウザによって違ってたはず
>>503 つーか、ふつうに
textarea{
width: なんぼ;
height: なんぼ;
}
でいいじゃん。
>>506 ここに来てるってことは、それでem指定してたってことじゃないの?
まさかhtmlのほうで指定してこのスレ来たの?
508 :
506 :2005/09/29(木) 23:36:28 ID:???
>>507 推して知るべし。
>>503 > というか<input type="text">でサイズを指定して同じ画面サイズを使用してるのに
> なんでこんなことになるんでしょう?
509 :
506 :2005/09/29(木) 23:36:58 ID:???
ああ、textareaじゃなくて、inputじゃん…orz
>>506 それって全部のテキストボックスにwidthとheightを指定していくってことですか?
今はテキストボックスのsizeでしかしてません。 一応cssファイルは作ってjavascriptでOS判別してcssを切り替えたりもしてます。 他の用途で作ったので・・・。 ですのでこのMAC用のcssにサイトのテキストボックスのサイズを Windowsと同じように表示するように記述できたらいいのになぁと。 結構テキストボックス数あるので一括で指定できたらなぁと思ってました。 まあ無理なら教えていただいた方法で全部に書いていきます。
>>512 ちょっと待て。
>全部に書いていきます
おまえはまずCSSの書き方の基本の基本から学んでこい。
>>513 おっしゃるとおりなんか全然わかってないみたいなので勉強しなおしてきます。
お手数かけてすいませんでした。
>>514 とりあえず、テンプレ読んで入門系のサイトに目を通す事を強くお勧めする。
それでも分からない事があったら、またおいで (その時相手にされる保障は無いけど)
516 :
Name_Not_Found :2005/09/30(金) 03:07:19 ID:3SgsjBnB
<link rel="stylesheet" href="1.css" type="text/css" /> <link rel="stylesheet" href="1.css" type="text/css" />
すみません、おしてしまいました。 <link rel="stylesheet" href="1.css" type="text/css" /> <link rel="stylesheet" href="2.css" type="text/css" /> <link rel="stylesheet" href="3.css" type="text/css" /> 上から順番に読み込んだとき、どれがそのページに適応されるのでしょうか?
>>517 全部。
重複する内容があるときは下のやつが適用される
>>518 全部というのは、IDやクラス別に読み込まれるということでしょうか?
CSSで分けられないということでしょうか?
>>519 意味が分からない。
たとえば1.cssでp{line-height:150%;}と指定していたとして、
2.cssでp{line-height:180%;}と指定したとしたら、こちらが最終的に適用される。
522 :
486 :2005/09/30(金) 05:46:39 ID:???
>>488 Mac IE って EUC-JP で書かれたCSSを読み込んでくれないの!?
>>522 読める。
cjkvのせいで不具合が出ることがあるかもね。
Mac IEなんてプーなUA使ってるやついるの?
そりゃ、いるだろ。
やや話はずれるけど、 Web Creator 11 月号に @charset="Shift-JIS" を指定した外部 CSS ファイルを Opera 7 が読み込まないというのが紹介されていた。 クマー
Opera は全部無料になったから 8.5 にするので問題無いっしょ
>>486 > やっぱり Mac IE で見出しに 'ヒラギノ丸ゴ Pro W4' が適用されません・・・。
とりあえず、MacIEでヒラギノ丸ゴ Pro W4で表示されればいいなら、
これでどうでしょうか?
font-family:"ヒラギノ丸ゴ Pro W4",'HGP創英角ポップ体', 'Hiragino Maru Gothic Pro', sans-serif;
529 :
Name_Not_Found :2005/09/30(金) 18:24:07 ID:QPdwlj90
.class { background-image:url("../images/kabe01.gif"); } もしくは、 <td backgrond="〜〜〜">で背景を指定したページを印刷するときに 背景の画像は印刷されませんが これを相手にブラウザの設定を変えさせるwww以外に印刷できるようにする方法はないでしょうか?
将来のお話。 正規表現でマッチした文字列にだけに適用出来るようになりますか?
HTMLには正規表現はありません。 これからもないでしょう。 つーかオマイ判って訊いてるだろ?
NN4と共にIEを捨てよう。 俺はすでに捨てた。
仕事上そうはイカチンなのよ・・・
仕事だったらテーブルレイアウトだな・・
んだ!
仕事でもCSSだなや
んにゃ
IE7はいつ出るんだ(#゚Д゚)ゴルァ!!!
(#゚Д゚)ゴルァ!!! って俺に怒るなよ・・・
そこここのUAではとっくに出てるIE7 7どころじゃなくでてる
>>542 ユーザエージェント≒ブラウザ
かと思ってたけど、違うの?
544 :
486 :2005/10/01(土) 00:22:56 ID:???
>>528 「ヒラギノ丸ゴ Pro W4」を先頭に持ってくれば良いんじゃない? という意味だと思うのですが、
実は MacIEの「勝手にエスケープ」バグを利用して、ちゃんと先頭になるような仕組みにしてるんですよ
以下ソース--------------------------
/* font-family (MacIE) */
h1, h2{
font-family : "ヒラギノ丸ゴ Pro W4", sans-serif;
}
/* font-family (others) \*/
h1, h2{
font-family : 'Hiragino Maru Gothic Pro', 'ヒラギノ丸ゴ Pro W4', 'HG創英角ポップ体', sans-serif;
}
/* font-family END */
------------------------------------
>>544 >>488 で答えをもらっているようだが、CSSのエンコードを
Shift_JISとかUTF-8にすれば解決。
>>543 HTTPリクエストのUser-Agentフィールドのことだろ。
というかそもそもジョークだってことも気づいてあげよう。
>>547 へー、それでIE7以上が出てるんだ…って偽装かyp
ページ全体の中央配置と幅の自動設定のために 一番最初にテーブルを置いてその中に内容を記述しているのですが、 テーブルをCSSでデザインすると、 ページを囲っているテーブルにも適用されてしまいます。 ページを囲っているレイアウト用のテーブルのみ適用させずに、 後のテーブルにCSSを自動適用(クラスの個別選択ではなく)させる 方法はないでしょうか。
>>549 後のテーブルは最初のテーブルの中にあるの?
だったら子孫セレクタで td table とすれば body 直下のテーブルは
選択されず、入れ子になってるテーブルだけが選択されるけど。
Mozilla なら子セレクタ、後続セレクタ、兄弟セレクタなどいろんな
選択方法が使えるけど MSIE は対応してないので複雑な選択を
するにはクラスを割り当てるしかないと思う。
>>550 たかりました、ありがとうございます。
td table っていうのがあるんですね。
IEってaタグにしか:hoverが効かないのかい なんでこんなにクソなんだ
>>554 l..:.::::::::::::::::::::::::::::イ = =
|.:::::::::::::::::::::::::::::: | ニ= IE そ -=
|:r¬‐--─勹:::::| ニ= 7 れ =ニ
|:} __ 、._ `}f'〉n_ =- な. で -=
、、 l | /, , ,ヘ}´`'`` `´` |ノ:::|.| ヽ ニ .ら. も ニ
.ヽ ´´, ,ゝ|、 、, l|ヽ:ヽヽ } ´r : ヽ`
.ヽ し き IE ニ. /|{/ :ヽ -=- ./| |.|:::::| | | ´/小ヽ`
= て っ 7 =ニ /:.:.::ヽ、 \二/ :| |.|:::::| | /
ニ く. と な -= ヽ、:.:::::::ヽ、._、 _,ノ/.:::::| | /|
= れ.何 ら -= ヽ、:::::::::\、__/::.z先.:| |' :|
ニ る と =ニ | |:::::::::::::::::::::::::::::::::::.|'夂.:Y′ト、
/, : か ヽ、 | |::::::::::::::::::::::::::::::::::::_土_::| '゙, .\
/ ヽ、
といいね
foverなんてクソ邪魔な装飾にしか過ぎないから、 IEで対応しなくても全くかまわない。
fover・・・寝ようorz
Win2kだからIE7が出たらもうIEの表示確認なんかしないぞ
:hoverっAタグ以外って 他に何か使うようなものってあるんですkあ?
pでも何でも使えるぉ。
そうなのか!!!!
フォー(゚∀゚)ヴァーー!!
Aタグってあんた。。。
>>370 X→FF
○→Fx
えばって書くんじゃねぇよ糞が
(゚∀゚)???
通じればいいんじゃないかなと思ったり
ファイアーとファイヤーの違いくらいかなと思ったり
なんかアフォがいる!(゚∀゚)
っていうかfirefoxは独自のエンジンってわけじゃないから geckoでいいやん
geckoステート。
ゲッコって読んでる香具師とガッコって読んでる香具師がいたんだけど。
ゲクコじゃねぇの??!!
でも同じGeckoでもFF(wとN7ではだいぶ違う罠。 もじらも違う?
geckoのバージョンで仕様がちょっと違うと言いたいのでは?
ゲッコーじゃねえの?
カエルゲコゲコ ミゲコゲコ アワセテゲコゲコ ムゲコゲコ
>>584 うんうん、分かったからホムペを覚えようね
びっくりするほどあからさまな自演を見た・・・・・・
どれが自演か分からない俺がイル
ほんとだw
.。oO( NNって呼び方古いじゃん…
ここから激しい自演が始まります ↓ ↓
592 :
Name_Not_Found :2005/10/02(日) 17:30:17 ID:H4ZrcgkA
質問です。 <h3>あああああ</h3> と、すると上下に余白が出ます。 これってどうやれば消せますか?
593 :
Name_Not_Found :2005/10/02(日) 17:31:34 ID:H4ZrcgkA
>>592 h3{
padding:0;
border:0;
}
で、何とかできる。
それぐらい考えろ!!!!!!!!!
気合
595 :
Name_Not_Found :2005/10/02(日) 17:32:13 ID:H4ZrcgkA
今物凄い
598 :
Name_Not_Found :2005/10/02(日) 19:40:10 ID:uOTmoYRE
どこかで、タグに直接「style=""」とするのはよくない、と聞いたので すが達人的にもそうなのですか? 一箇所しか使わない場合でも class=""を設定した方がいいのでしょう か?
599 :
Name_Not_Found :2005/10/02(日) 19:44:14 ID:Hs/5A3RR
BOXをmarginなどを使わず常に中央に持ってくることは可能でしょうか?
601 :
Name_Not_Found :2005/10/02(日) 20:08:13 ID:Hs/5A3RR
DTDは?
>>599 <CENTER>ほんにゃか</CENTER>
604 :
Name_Not_Found :2005/10/02(日) 22:02:36 ID:Hs/5A3RR
>>603 中央に持ってくることができました。
ありがとうございました。
うけた
>606 100回も言わなくても、CSSだし。。
えっ?お前それマジで言ってんの?
609 :
607 :2005/10/02(日) 22:47:31 ID:???
>>608 あ、ごめん誤解させてしまったorz
> CSSだし。
これは、このスレがCSSの質問スレッドだから、 <CENTER>が出てくるのは
おかしいと…
そうだったのなら別に。
>>603 面倒なのはわかるが、ここはCSSスレなので…
612 :
Name_Not_Found :2005/10/02(日) 22:58:54 ID:sTkHC9Gd
画像の下に少し余白ができます。 ブラウザ(IE)の文字サイズを変えたら、その余白の幅がほんの少し広がってしまうし…。 どうすればいいのでしょうか?
>>612 img{
margin:0
}
img + p{
margin-top:0
}
こういうのってアリかしら?
ここのレベルどうかしとるね… vertical-align: bottom;としてみよう
ほんとまったくだぜ 素人はひっこんで芯でろ!
あーおれも良くやるわ。 シャーペンがなかなかでなくてさ、 芯出ろ!! って念じる
シャーペンを出したいんだか 芯を出したいんだか
ワロタって言ってくれ
もうワロタなんて言わないよ絶対
ひどっくね?
真剣に聞くけど img + p {〜〜} ・・・これってマジであるのか?なんか新ブラウザに搭載された スペサルCSS?!
>>622 勉強になった。thx
でも子孫セレクタはMacIE5のみ対応なんだね‥‥
625 :
624 :2005/10/03(月) 02:17:32 ID:???
子孫じゃねーや、隣接 + だ NNで出来ると言っても使っている奴いるのか
626 :
621 :2005/10/03(月) 02:18:47 ID:???
セレクタなんて全然知らなかった。 いや、知っていたかもしれないけどセレクタという名前を 意識した事がなかったが正しいのか? 教えてくれてサンクスコ。俺は馬鹿だった。 でもW3cでもlintでも一応正しい構文がかけるんだよな しかしセレクタを極めたらもっとシンプルなソースがかけそうだ。 めちゃくちゃ見落としていたセレクタ。 超読んでおくわ。
>>624 > でも子孫セレクタはMacIE5のみ対応なんだね‥‥
そんなことどこに書いてあるんだ?
Win IE, Forefox, Opera どれも対応してる。
使えないのはWinIEだな。>小孫以外
例えば,次の2つの規則集合は等価です。 *.warning, *#footer, *[lang|="fr"], *:lang(fr) {} .warning, #footer, [lang|="fr"], :lang(fr) {} 上記の意味がわからないので噛み砕いて説明してもらえませんか(´・ω・`)
>>629 *.warning, *#footer, *[lang|="fr"], *:lang(fr) {}
と
.warning, #footer, [lang|="fr"], :lang(fr) {}
は同じ意味ですよー。
普段使っているのは後者ですよね。 「この場合はアスタリスクを書かなくていいから 単純にみんな書いていないだけ」 という認識で良いでしょうか。
>>632 どちらを使うのかは好みの問題だと思うよ。
私は一意セレクタだけは * を書かずに、それ以外は書くようにしてるけど。
そもそも * ではなく要素名まで指定することが多いかな。
確か NN4 は一意セレクタに対応してるけど *#footer は駄目で、#footer
でないと受け付けなかった思う。
635 :
Name_Not_Found :2005/10/03(月) 11:32:01 ID:bx5t1s7M
印刷スタイルで背景画像だけ(background-imageの部分だけ) 非表示にすることは可能?可能であればその方法を教えて
637 :
Name_Not_Found :2005/10/03(月) 15:20:53 ID:bx5t1s7M
>>636 ありがとうございます。早速やってみます
ちょっと聞いてみる。 Firefox1.0.7でbodyとh1、divのmargin・paddingを0に指定して (略) <body> <h1 style="display:none;">うんたら</h1> <div>かんたら</div> </body> (略) とやると、divの上に微妙にスキマがあく。 divのpaddingを1以上にするとそこがつまってくれる。 IEでは0でもきちんとつまってくれるんだけど、何なんだろう?
>>638 同じバージョンのFFでこっちじゃならない。
何か間違えてないか。
>>638 ちょっと前に同じような質問が出たときは、
ソースの間違えだったよ
W3Cでチェックしてみ
bodyのまえに全角スペースでもあるんでないの?
レイアウトする時に、floatを使うか、absoluteを使うか悩みます。 それぞれメリットデメリットがあるみたいですけど、どっちもどっちのような気もします。 floatを使ってる人の方が多いように思うけど、なぜでしょう? 使い分けのポイント教えてください。 absoluteでレイアウトしてたけど、floatの方が多い(=良い?)のかなぁと思って修正しようかと思案中。
>>642 あぶそりゅーとだと「絶対」していだろ?
俺は絶対って言葉が大嫌いなんだ
>>642 何故かfloatうまく使えないのであぶってる。
ガチガチのソース
>>643-644 ありがとうです。
floatをうまく使えれば、floatの方がいいのかな?
その根拠がわからない・・・orz
どっちがいいとかの問題じゃないよ
あぶそりゅーとはブラウザの解釈によっては崩れるって話もあったけど、 流石にそれは過去の話なのかな?
過去に崩れたなら、そのブラウザは崩れ続けるだろう・・・
すると、おいらの顔と同じだな。
全然関係ないけど、floatをビルダーで使うと 通常の画面でガチャガチャに崩れる
おまいの顔と同じだな。
ここは顔面floatの人が集まるスレでつね
馬鹿言え、私は美しいわよ
のどチンコしかありませんがよろしいかしら
猛々しい男根以外は認めません。
水平は駄目?
若いうちは確かに腹に付くほどカティンコティンになる、誰でも。 しかし、信じられないかもしれないが、だがしかし、 水平かそれ以下になる日は確実に来る。 確実に来るんだ…
なぁ…ここは何のスレになったんだ?
Chinko Short Story
662 :
645 :2005/10/05(水) 13:21:25 ID:???
>>647 リキッドデザインで作ってるんですけど、リキッドデザインだったらfloat?
固定と可変の段組のときはabsolute使ってる。
>>663 俺漏れもー。
>>662 何を使うか、じゃなくて、何を作るか、だよ。
やりたいようにやったらいいと思う。
666 :
Name_Not_Found :2005/10/06(木) 16:30:08 ID:EicfHoEj
全体テーブルで作ったページ全体を囲うようにborderで線を引いたのですが 右側の線と内側のコンテンツの間に1px程の隙間ができてしまいます。 余白マージンを0にしても変わりません。 これはどうすればピッタリボーダーがくっついてくれるのでしょうか? それと未だにdisplayのブロック要素、インライン要素というのがハッキリとは理解できません。 どこか解かりやすい解説などあるところが有れば教えて頂きたいです…。 宜しくお願いします。
>>666 普通に書いたら隙間はできない。
見比べてみそ。わかんなかったらソース出して。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html401/strict.dtd ">
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<head>
<title></title>
<style type="text/css">
<!--
* *{margin:0px;padding:0px;}
table{border:solid 3px #000;width:100%;height:100%;}
-->
</style>
</head>
<body>
<table>
<tr><td>空テーブル</td></tr>
</table>
</body>
</html>
>>666 あとdisplayな。ボックス要素とインライン要素はわかってるんだよな?
実際はインラインの要素を「見かけ上」ボックス要素に見せたり、
実際はボックスの要素を「見かけ上」インライン要素に見せたりするだけだ。
単なる見栄えの問題なので、見かけだけ変化させて
実態のマークアップはその内容に即した正しいマークアップのままでいられるという利点がある。
ごめん667のheight:100%;は忘れて。
恥
672 :
666 :2005/10/06(木) 17:06:44 ID:EicfHoEj
ブロックインラインの誘導ありがとうございます、後で読んでみます
と667さんのソースを試しに改悪;してみたのですが
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html401/strict.dtd ">
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<head>
<title></title>
<style type="text/css">
<!--
* *{margin:0px;padding:0px;}
table{border:1px solid #000;width:480px;}
-->
</style>
</head>
<body>
<table>
<tr><td><img src="sky01.jpg" width="480" height="304"></td>
</tr>
</table>
</body>
</html>
DW2004を使用してまして、コードモードにコピペして↑のように横幅480の画像をテーブルに挿入して
ブラウザプレビューしたら、今作ってるページと同じ隙間が画像とボーダーの間上下左右にできました。
この隙間を消したいのですが・・・因みにブラウザはIE6.0です。
>672 それだったら素直にimgにborderのがいいような気もするが、一応。 * *{margin:0px;padding:0px;} img{vertical-align:bottom;} table{border:1px solid #000;width:480px;border-spacing:0px;border-collapse:collapse;} CSSをこっちに差し替えて。
674 :
666 :2005/10/06(木) 18:24:32 ID:???
実際の所、ページ内の右側に配置してある一部の背景が白で、そのページのbodyへのcssでも背景を白にしていたので その部分が背景と色が同化してしまうので線で境目として囲いたかったのです。 しょうがないので今はbody背景を薄灰色にしてみましたが、やっぱり全体の右端には線を引いたときと同じ 白のままになってる部分が…厳しいですね…
>>674 上のソースで、テーブルの外に白い隙間ができているという意味?
とれは他のところで何か間違えていると思う。
<table width="***" border="1" cellspacing="0" cellpadding="0"> こりでどうだべか?
何で確認すると
>>666 ,
>>674 みたいになるんだ?
ブラウザの問題じゃないか?
でなければ詳細なソースか画を晒してみ。
ダミアン 逃亡
680 :
666 :2005/10/06(木) 23:07:48 ID:???
667+673を試してみましたが、画像とボーダーの間には隙間はありませんでした。 やっぱりテーブルの組み方が何かおかしいんでしょうね…調べてみます。 試しに使ってるcss晒してみます、コレには特に変な設定はしてないとは思いますが… #footer {background-image: url(image/footer.gif); padding-top: 4px; padding-left: 8px;} #footer a {color: #FFFFFF;} p {font-family: "?シュ?シウ ?シー繧エ繧キ繝?繧ッ", Osaka, "繝偵Λ繧ョ繝手ァ偵ざ Pro W3";font-size: small;} #stage {padding: 0px; margin: 0px;} #mentebox {background-image: url(image/toppage_background_bottom.gif); padding: 10px 14px; text-decoration: underline; color: #006699; line-height: 140%; border: 1px dotted #000000;} #koushinbox {font-family: "?シュ?シウ ?シー繧エ繧キ繝?繧ッ", Osaka, "繝偵Λ繧ョ繝手ァ偵ざ Pro W3"; color: #005985; text-decoration: underline; padding-top: 10px; padding-right: 14px; padding-bottom: 10px; padding-left: 14px; border: 1px dotted #000000; line-height: 140%;} body {background-color: #CCCCCC;}
繝偵Λ繧ョ繝手ァ偵ざ なんすか、これ
暗号
最近、ぐぐる と いめーじぐぐるを切り替えるとよくそれ系の文字化けになるw といってもうちの環境が問題なのかもしれないが。 MacでMS Pゴシックが入っていると、上記の順の場合 慣れないフォントで表示されて少し落ち着かない。 なので自分は、Osaka ヒラギノ角ゴ MS Pゴシック の順で書いているけど winでもそういう難点はある? Osakaもヒラギノ角ゴもwinでは殆どの場合入って無さそうだから 支障はあまりないかと思っているけど、実際どうだろう。 そもそもフォント指定するなという話もあるかもしれないけどそれはそれとして。
何言ってんだろこの人
俺にもワカンネ
つまりこういう意味じゃね? ええと、、、頼んだぞ ↓
687 :
683 :2005/10/07(金) 00:14:56 ID:???
680の、 font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; を受けて便乗質問したかっただけなんだが、どうにも要点がまとまってないな 自分でも後から読むとわけがわからんかも。
ぐぐるでイメージがぐるぐるしてダメージだよな? 難点は大阪で実際はそれとして。
あっ
690 :
683 :2005/10/07(金) 00:18:49 ID:???
・・・スマン、邪魔したw >688
691 :
666 :2005/10/07(金) 00:58:36 ID:???
なんとか問題は解決?しました… 作ってるHPのテーブル周囲でマウスを動かしたら、右隅で変な所が光ったので テーブルを横に伸ばしてみるとレイアウトが歪んで右端に横幅1、高さそれぞれの領域がボコっと出てきました <td><img src="spacer.gif" width="1" height="21" border="0" alt=""></td> ↑みたいな領域が数十個縦にビッチリと…。 プロパティインスペクタでテーブルの列を一つ消して、プレビューしてみたらその隙間が消えました 全体レイアウトはぐちゃぐちゃですがorz FW書き出し元のファイルにその領域がある訳でも無いので、結局どうしてこうなったのか原因がわかりませんが、 FWDWもまだマスターしている訳じゃないのでまた勉強しつつ調べてみます。 お騒がせしました…。
>>691 あー、うんうん。あるある。
っておい。スレ違いだろがw
>>691 それってFireworksでスライス書出ししたtableじゃね?
CSS以前にhtmlの構造をちゃんと把握するべき。
うるさいよ信者
信者とかの問題じゃないだろw
>>1 からのテンプレを見ても解決しないので質問します。
ヘッダー+2カラム+フッターでheightが100%のXHTMLレイアウトを作成しています。
しかし、Firefoxではmain(右側)の箇所が下まで伸びず、意図した形になりません。
どのように書き換えたらよいか、アドバイスいただければと思います。
ソースは下記になります。
http://read.kir.jp/file/read21893.htm
697 :
Name_Not_Found :2005/10/07(金) 07:44:00 ID:5BWtyIBY
一枚の画像に、クリッカブルマップのように複数のリンクを貼るのは どうしたらいいでしょうか 急いでます。お願いします
別に俺は急いでないけどな 急いでるといえば急ぎで返事がくる有料相談所じゃないからな absoluteで
クリッカブルマップで!!!
>>700 いや、CSSで貼りたいって話なんじゃないのかと思って
absoluteでと一応レスしてみたんだが…違うのか
プロパティインスペクタなんて初めて聞く言葉だからググってしまったよ HP作成ソフトの機能かなんかのことだね 知らなくても生きていける うん
>>701 >一枚の画像に
この時点で分割画像ではなかろ・・・と思ったのだが。
単に煽りジャネーノ?
>>703 いや、初心者を免罪符にした馬鹿だろうw
>701 >703-704 お前達、CSSでリンク貼れると思っているのか? コドモは帰りな
画像の上に来るようにAに対してabsoluteで適当に指定してやれば出来るだろ
ばかちんだなおまえ
>>705
ここは鬼畜なインターネットでつね
で、ずれまくりと 王様かい?
別に相対でも出来るけどね。 しっかり正しく組んでおけば好きなように出来ると思うんだが。
クリッカブルマップで出来る物をわざわざCSSでやる必要があるのか?
わざわざ見に行ってまで答える暇は無い。
だってXHTMLわからんもん
>>710 しらんがな。やりたい奴もいるんだから仕方がない。
>>715 XHTML関係ないだろ。
>>696 >>9 のQ11見れ。
親要素に高さが指定してないと駄目。
つまり#wrapperにheight:100%;を追加してやらないと駄目。
レス番ズレてるし…まあいいか。
>>714 #wrapperにheight:100%指定したら、内容(container)が増えていった時に
枠からはみ出さないか?
>>716 そりゃ勿論。
てか根本的な考え方の間違いが知りたかっただけだと思ったから。
>>717 内容はみ出るのが嫌だから、#wrapperに100%指定しなかったんじゃないかな。
指定しないとどうしようもないだろ。 あとはwrapparに背景画像をおいてごまかすしかない。
TDに背景画像はやった事あるけど TABLEに対してでもできるの?試してみたけどならなかった TABLEに中のTDに画像配置されてたりするから無理なのかな
どこから突然tableが・・・
>>719 ごまかす、っつーか、常套手段になってきているよね、親要素の背景画像をうまく使うの。
どーにも、現状のCSSは縦方向のコントロールが弱い希ガス…
>>720 やったことなかったが、試したらできたぞ。
>>723 ブラウザによるよ。ネスケは以前対応してなかった
>>724 そんなのはテーブル背景に限ったことじゃない。
>>725 そりゃそうだろうけど、それがどうしたの?w
table背景は元々認められてない独自拡張だったわけで。
今はtable背景だけの話をしてるのだからそんな無意味な突っ込みするな。
>>726 おまえ、何を言っている?
他の連中はCSSでのテーブル背景の話をしてるわけだが。
俺テーブルには画像がtdまたいだ大きさだったら二つに切ってそれぞれのtdで背景指定してる・・・ ってやっぱ変か?マンドクセーし td区切られてる状態のテーブル内でも全面背景ってできるの?
>>727 CSS1がいつ実装されたかをよく考えろよ
>>728 <table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" id="haikei">
#haikei {background-image: url(../xxx/image/xxx.gif);}
みたいな感じでやったけど何も出なかった、これじゃ駄目なの?
>>732 おまいのそれをコピってやってみたがちゃんと出るぞ。
画像のパス間違えたりしてないだろうな。
>>733 ちょっと勘違いしてて試してみたら表示された・・・でも
画像の下部分は表示できるんだけど、表示したい所は画像上半分の場所に更新状況入れるtdがあって
そこが表示されなくて・・・そこはtdにcssでボーダーでtdを囲っている程度
頼む、もうちょっとやりたいことを完結に・・・日本語が理解できない。 じゃなかったらソース出して。
H1 { color: #59982B; font-size: 37px; } にフィルターをかけたいのですが H1 { color: #59982B; font-size: 37px; width: 100%; filter: alpha(style=1, opacity=100, finishopacity=50); } にすると標準サイズの文字1行分だけ表示されて上下が切れてしまいます。 どうすればいいか教えてください。。。
フィルターはCSSじゃない…
>>736 >標準サイズの文字1行分だけ表示されて上下が切れてしまいます
意味がわからんが、
おまいのコピペで何一つ切れることなくフェードアウトで表示されたぞ。
フィルターもCSSだが
740 :
Name_Not_Found :2005/10/07(金) 22:20:33 ID:19z4FtZd
spanタグの属性にtext-alignは使えない?
741 :
736 :2005/10/07(金) 22:22:18 ID:???
例えば意って字をH1にしたら真ん中の日だけが表示されて立と心が切れるんです 上手く説明できない(゚Д゚;) 色々いじってみますthxですた
743 :
736 :2005/10/07(金) 22:45:19 ID:???
画像使いなよ どっかで *{line-height: 100%;} とか指定されてない?
745 :
736 :2005/10/07(金) 23:16:59 ID:???
m9(・∀・)ソレダ!! Body,Td {line-height:15pt;} これ広げたら表示されました! でもこれが無いと間隔が詰まって見難く・・・ SEO対策でh1使っとけって聞いてたのでorz 画像も勉強してみます。
フィルターはIEだけの独自拡張じゃなかったっけ?
-moz-opacity
フィルターかけなかったら普通にh1表示されるので取り合えずフィルター諦めます
>>747 (゚∀゚)ゞ
サイドバー等の狭めの欄に長めの文字を表示させるとき、 次の行に行かせずに...とかにさせる方法ってどうやるんですかね? 質問する場所が間違ってたらごめんなさい。
文字を小さくする
>>750 JavaScriptでも使って作ったら?
HTMLには、省略無しで長い文字を書けるし
754 :
750 :2005/10/08(土) 00:43:07 ID:???
このスレ ブログ厨でウヨウヨして腐ったな
>>756 どのスレもそんな感じじゃね?
(個人的には、携帯連中の質の低さの方が気になるけど)
おまいらは大好きなお世話ができるんだからそれでいいじゃん
>>758 飽きると言うか、何と言うか
>>754 「 text-overflow: ellipsis 」はMSIEの独自拡張だったような?IE6で追加された気が・・
760 :
Name_Not_Found :2005/10/08(土) 09:09:55 ID:JrAvYdl3
質問ですが。印刷用cssで背景画像をbackground:none;で 指定しても背景が消えません。(←印刷プレビューで確認すると) どこに問題があるのでしょうか?
762 :
Name_Not_Found :2005/10/08(土) 09:50:37 ID:FxwP2DZC
ところでそのMSIEの独自拡張の一覧&解説サイトってありますか?
763 :
760 :2005/10/08(土) 10:52:29 ID:JrAvYdl3
印刷プレビューでは背景画像が表示されているのですが、 非表示にするにはどうしたらいいでしょうか?
ソース晒さないとわかる訳ないと761は言ってるんだお(=゚ω゚)
>>763
..::::::::::::::::::: ..::::::::::::::: . .......:::::::::: Λ_Λ ..::::: /彡ミ゙ヽ)ー、 ... / /:ヽ、ヽ、:|..:: / /:: ヽ ヽ| .:.  ̄(_ノ ̄ ̄ ̄ヽ_ノ あぁ・・・今日は土曜日だ・・・ 激鬱だ!
766 :
760 :2005/10/08(土) 12:32:40 ID:JrAvYdl3
body { width:700px; background:none; background-repeat:no-repeat; margin:0; padding:0; } これではダメですか?
body{ B: 98; W: 54; H: 93; } ではダメですか?
背景画像を印刷するのチェックボックスが
☑ฺ だったという落ちは無しでお願いしますよ・・・
>>760
>>767 うーん
発想はいいんですけど、笑えはしませんね
771 :
760 :2005/10/08(土) 14:21:47 ID:JrAvYdl3
理想形は、 body { b: 85 w: 58 h: 87 } かな。
body{ b:99; w:55; h:88; } くぁwせdrftgyふじこlp;@
774 :
電車男 :2005/10/08(土) 14:59:21 ID:???
ここがアラジンチャンネルですよね? うわーーーーー、皆さん!!!!お久しぶりです!!!
775 :
電車男 :2005/10/08(土) 15:00:24 ID:???
あれ?皆さんお話ししましょうよ!! 今日、エルメスタンと一緒にってうわなにいわすんだふじこ
body { b: 82 w: 53 h: 91 } 俺はこうだな。。。
777 :
エロメス :2005/10/08(土) 15:03:55 ID:???
>>775 電車さんですか?まさかこんなところで会えるなんて・・・・・!! やっぱりここはAチャンネルでしたか!
778 :
エロメス :2005/10/08(土) 15:05:13 ID:???
>>776 ?????? 何ですかそれは?? ボディースタイル(?_?)
童貞は夢見すぎ
780 :
電車男 :2005/10/08(土) 15:16:23 ID:???
俺はこうかな…。 body { b: 76 w: 58 h: 83 }
☑ฺ
>>783 sugeeeeeeeeeeeeeeeeeeeeeeee!!!!!!!!!!!!!!!!!!!
☑
&#9745&#3642
↑これだとちゃんと
>>783 になるのに
&#9745
↑これだけだと
>>786 になっちゃうのわなんでだろ〜〜
なんでだなんでだろ〜
両方同じに見えますけど
>>789 その現象が起こった状態のやつをUPしてくれる?
>>789 ソースさらしてくれなきゃ分からないよ。
あれ、この指定でHTML書くのって間違ってる? id名にcontentsを指定、pタグにスタイルを定義。 で、以下のHTML。pタグが連呼されているんだが、CSSが・・・idだし・・・一回だけのはず・・・ #contents p{ border:1px #000000 solid;} <div id="contents"> <p>段落段落</p> <p>段落段落</p> <p>段落段落</p> </div>
793 :
789 :2005/10/08(土) 22:20:10 ID:???
>>790-791 まさに
>>789 でアップしているものです。
右のエリアの下にグレーの色がついてませんか?
IE6でもFirefoxでも付きますが・・。
794 :
いあっsっhdcxn :2005/10/08(土) 22:20:47 ID:SyM/4I+Q
43ewusijhryf5t64re7dusxjizhudscyef764tr5efdy
795 :
789 :2005/10/08(土) 22:21:38 ID:???
今気づいたら、アップローダーが悪いのか、拡張子が消えて Firefoxでは表示されませんね・・。 すみませんが、IE6で見ていただければと思います。
796 :
いあっsっhdcxn :2005/10/08(土) 22:21:45 ID:SyM/4I+Q
あほ
>>792 どこにIDが2度3度と・・・
もっかい勉強やり直したほうがよくね?
<br class="clear" />が原因。外す。 #footer{ width: 760px; background-color: #0099ff; clear: left; }
このスレには最近論理的な意味を理解していないDQN香具師が大杉
800 :
789 :2005/10/08(土) 22:30:31 ID:???
>>798 すみません、、外してそのソースを書き写しましたが
表示が変わりません。。
>>797 あ、すまん。
5時間程休み無しでずーっとCSS書いてたから何も分からなくなってきてたんだ。
ぐぐってCSSコードサンプル拾う→自サイト用に微調整・プレビュー
→ある程度CSSが溜まったら一括してCSSを簡略化→プレビュー
を繰り返してた。
#contents p{ border:1px #000000 solid;}
ってのは id名contents内のpタグ全てに対して って意味なんだよね。
だからHTMLにおいては、pタグはcontents内に何度でてきて良いんだっけ。
>>789 #containerの色が見えてるだけと
自分は#contents p{border-width:1px;border-style:solid;border-color:black;}とか がっちり書いてんるんだけど、書きすぎ?
805 :
789 :2005/10/08(土) 23:34:27 ID:???
>>804 ありがとうございます!正直、どこがどう悪かったのか
未だにつかめませんが、804さんの修正してくれた内容を
元に勉強します。ありがとうございました。
>>803 別にいいんじゃない。
CSSコードを徹底的なまでに簡略化してナロー回線ユーザにも優しく。が基本の人は別として。
たまにネスケやFirefoxでボーダーの表示が消えることもあるけど、その辺は動作確認と併せてやると良いかもね
&#9745&#3642
だから練習は他所でやれっつってんだろうが(゚Д゚ )ゴルァ!!
☑ฺ
XHTMLの場合、1行目で<?xml version="1.0" encoding="Shift_JIS"?>を 宣言すると、Paddingの解釈がIE6.0では異なることありませんか? 例えば area{ width:740px; padding10px; } とした時、Firefoxでは760px分が表示されますが、 IE6.0では縮んで740pxで表示されてしまいます。 1行目でxml宣言しなければ正しく表示されるのですが、 この場合はどうしたらいいのでしょうか?
もう一個BLOCKで囲め
>>810 それ、書くと互換モードになるIEの有名なバグ。
♩ฺ♫ฺ♩ฺ♫ฺ♩ฺ♬ฺ♬ฺ♫ฺ♫ฺ ♩ฺ♫ฺ♩ฺ♫ฺ♩ฺ♬ฺ♬ฺ♫ฺ♫ฺ ♪ฺ♬ฺ♪ฺ♬ฺ♪ฺ♬ฺ♪ฺ♬ฺ ♫ฺ♫ฺ♩ฺ
素敵な曲ですね^^
>>810 1行目と2行目を入れ替えれば
とりあえずどのブラウザでも標準モードで表示されるはずだけど
激しくカコワルイのでIE用のスタイルシートだけ別に作ってある
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
☑ฺ
自分はさっぱりとXML宣言削ってるけどね。 HTML-LINTで100点取りたい人は無理かも知れんけど。
819 :
697 :2005/10/09(日) 20:34:54 ID:???
遅レスですみません。答えて下さった方ありがとうございます。 蒸し返すようで申し訳ないのですが、>706の言っている意味がわかりません。 煽りでもなんでもないです…。 absoluteで位置指定をして、それをリンクの個数分だけ複数繰り返すんですよね。 そこまではわかりますが、それをどうやってリンクと結び付けるんでしょうか。 <img src="hoge.gif"> <a class="abs01" href="hogehoge.html"></a> <a class="abs02" href="hogehoge2.html"></a> こんな感じですか?
820 :
Name_Not_Found :2005/10/09(日) 20:47:13 ID:FQhk+LZE
しつもんです。
いま、マク使って見ているんですが、
>>814 は音符の羅列、
>>817 はチェックボックスにチェックが入っているように
見えるのですが、ウィンドーズだとどのように見えるものなんですか?
>>762 google
聞いた事ないなと思ったら検索。
>>823 ソースをコピペしてブラウザに貼り付けてみろといいたいんだろうけど
マカーだからみられないという君に対しての配慮は無しという意見だな、うん。
多分そうだ。
>>819 クリッカブルでいいじゃん
imgとA両方絶対指定でもいいしAだけでも良いし。
背景画像とうまく絡めても良いし
>825 クリッカブルマップだと不都合があるので。やれるならクリッカブルが一番いいとは思います…。 > imgとA両方絶対指定でもいいしAだけでも良いし ごめんなさい。よくわかりません。 Aタグをポンと置いておいて、>819のようにclass指定するだけで absoluteで指定した位置にリンクが貼れると解釈していいのでしょうか。 背景画像を絡めるとなると深度でいじるのでしょうか…?
#a1{left:0px;top:0px;position:absolute;width:10px;height10px;display: block} #a2{left:90px;top:90px;position:absolute;width:10px;height10px;display: block} これを100*100の画像に似せるような感じで <img src="" height=100 width=100> <a href="hitotu_me" id="a1"></a> <a href="futatu_me" id="a1"></a> 出来ると思うけど ちょっと適当
>>825 ん?
>>823 はマカーなんだろ?
んで、
>>814 や
>>817 の数値文字参照はマックではこう見えているけど
ウィンドウズではどうなん?って聞いたんだろ?
そこに、マクのブラウザで試せ、ってかえってきたら???になるんじゃまいか?
>>829 ああ、勘違いしたわ。
Windowsではどうやって見えるのか聞いたのに
マックのブラウザで試せって言われても無理だろうと思ったんだわ。
>828 ありがとうございます。 自分でも試している最中なので、使わせてもらいますね。
832 :
Name_Not_Found :2005/10/10(月) 00:21:11 ID:CWCAoVOX
メニュー項目をリストにして全体IDで括るという方法をやっていますが リスト指定して浮いた文字の左側にデカいスペースができてしまいます。 そしてそのメニューのボックスの下にあるボックスとの間にもスペースが… この二つを消すにはどうすればいいのでしょうか?お願いします。
>>833 レスどうもです
margin、padding0はidとliに設定しましたがまったく変化ないんです…
ブラウザはIE?Firefoxで試してちゃんと表示されるなら liの中のaをdisplay:blockしてwidth:100%にしてみるとかどう?
LI{width :XXpx;height : XXpx;display: block;list-style-type : none;} LI A {display: block;width : XXpx;height : XXpx;} これでだめかな
macにIE6ってインストールできんの?
できん。
841 :
Name_Not_Found :2005/10/10(月) 02:15:04 ID:j1K7xyWm
スージンなんて使うなよ あんな糞サイト
言えてる
========== #menu{ margin-left:1%; width:25%; float:left; border:1px solid #000000; } #main{ margin-top:2%; margin-left:27%; width:72%; border:1px solid #000000; } ========== <div id="menu"> <p>めにゅう</p> </div> <div id="main"> <p>メイン</p> </div> ========== とすると、「メイン」の上だけでなく「めにゅう」の上にもマージントップが入ってしまうのですが、何故でしょうか。
845 :
844 :2005/10/10(月) 11:40:19 ID:???
と、思ったら何かが違う。勘違いだった。失礼。はっきり分かったら戻ってくる
leftとtopは確かに違うな
>>844 <p>のマージン指定してないからじゃね?
========== #menu{ margin-left:1%; width:25%; float:left; border:1px solid #000000; } #main{ margin-top:2%; margin-left:27%; width:72%; border:1px solid #000000; } body{ padding:0; margin:0; } ========== <body> <div id="menu"> <p>めにゅう</p> </div> <div id="main"> <p>メイン</p> </div> </body> ========== ちゃんと動作も確かめてきました。これだとおかしくなるみたいです。 ちなみに、IE6だと正常。Netscape7.1とOpera8.5でおかしくなるのを確認。 具体的な症状は「メイン」だけに適用してるはずのマージントップが「めにゅう」の上まで進出してしまうというものです。 bodyの中のmarginを取り除くとOperaで症状は出なくなります。Netscapeでは無くても出る。 何故でしょうか。こうなる理由がわかりません。
849 :
848 :2005/10/10(月) 11:59:24 ID:???
わからねえ・・なんでだろ とりあえずメインにfloat: right;を指定したら回避できたけど これじゃ解決できない場合もあるしな・・・
CSSに限らず、 何故いまだに各ブラウザで再現に差があるんですか? こう指定したらこう、って何故決まらないんですか?
>>844-852 ブロックレベル要素内を初っ端からフロートで始まているのが原因です。
文法上は問題ないですが、これによりブラウザの解釈の差異から表示結果に問題が生じます。
解消方法はいくつかありますが、適当に挙げておきます。
っても、これだけでは最低1pxの余白が取られるので、-1pxとかで調整してください。
●親要素(body)のpadding-topに0より大きな値を指定する。(1pxとか。
●親要素(body)にborder-topを存在させる。(1px solid whiteとか。
●抜本的に改善する。いきなりフロートしない。
序に、ブラウザの解釈の差異ですが、<p>の上下marginにも注意した方がいいです。
規定値で考えてるとブラウザによって解釈異なるので。
Mozilla系は前後に何も無くてもマージン取るし、IEなんかは無いと取らないし。
>>851 まだ確立してないから。それに数年悩まされてるんだが。
853 :
848 :2005/10/10(月) 15:11:30 ID:???
>>852 よく分かった、ありがとう。
もともとその前にも回り込みしない要素を入れる予定だったので、多分それで大丈夫かと。
あと、<p>はいつも調節してるので大丈夫です。
854 :
Name_Not_Found :2005/10/10(月) 15:19:54 ID:/T54tXRJ
Winだとちゃんと表示されるのに、Macのsafari、IE だとボックスが重なって配置されてる〜 floatで指定しているのですが、記述ミスですか? #category1{clear:both;background:#ff3300;background:ur("seira.jpg");width:775px;height:100px;margin:0px;padding:0px; } #main{width:775px;margin:0px;padding:0px;border:0px; } #wrap{float:left;width:570px;margin:0px;padding:0px;border:0px; } #bread ul{margin:5px;padding:5px;} #contents{float:left;width:550px;} #banner1{float:right;width:198px;backgroundcolor:#FFFFFF;margin:2px;margin:0px;}
852だが、
>>852 の1行目何かミスった。「始まて」ってorz
こういう問題の検証は、ブロック要素にborder:1px solid redとかやってみるのが基本。
複雑になってくると対応しきれないが。
width,heightで固定値が指定されてるとこでは逆に不具合が生じることもあるし。
もういいかもしれんが、
>>848 下から2行目
margin外してもoperaで変わらなかったが。
で、今回はいいが質問するならDTDが何か晒した方がいい。
>>854 その質問の仕方で回答が得られるかよく考えろ。
857 :
854 :2005/10/10(月) 16:09:03 ID:/T54tXRJ
すみません。焦りすぎました。全体で5段。3段目(#category1)と4段目(#main)が重なり合っている状態。 <div id="category1"><h2>バナーのタイトル</h2></div> <div id="bread"> <ul><li><a href="index.html">パン屑リスト</a>></li><li>パン屑リスト</li></ul> </div> <div id="main"> <div id="contents"> <h3>本文</h3> <p>●●●●●</p> </div> <div id="banner1"> <h2>右メニュー</h2> <ul> <li><a href="aisatsu.html">リンク</a></li> <li><a href="gaiyou.html">リンク</a></li> <li><a href="enkaku.html">リンク</a></li> </ul> <h2>××××××</h2> <a href="yuruson.html"><img src="img/yulogo.jpg" alt="●●●" width="150" height:="76" /></a> <a href="samit.html"><img src="img/summit.jpg" alt="縺怐怐?" width="150" height="46" /></a> </div> </div> ※#wrapはここでは存在しません。ごめんなさいm(__)m
>>857 実際のページを見えてもらえると検証が楽になる。
859 :
854 :2005/10/10(月) 16:34:28 ID:/T54tXRJ
860 :
Name_Not_Found :2005/10/10(月) 17:50:10 ID:3u5Y5szy
( ・ω・)∩ちょっと教えて下さい。、 下のファイルでやったらOpera8だけはちゃんと表示されるんですが IE6 & Firefox1.0.7 だと、何もならない・・・orz なんで? (ちなみにCSSは今日初めて( ̄ー ̄)ニヤリッ) -----------------Top.html---------------------------------------- <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div>ココが大きく黄色になる</div> </body> </html> -----------------sample.css-------------------------------------- @charset 'Shift_JIS'; div{ color:#ffa500; font-size:50pt; } ----------------------------------------------------------------
>>859 あまりに<div>が多すぎてワケ分かんない。
とりあえずざっと会社概要のページを見てみた。
多分cssのposition:absolute;を消すといいんじゃないかな?
<div id="a"><h1><img></h1></div>
こういうのは<h1 id="a">じゃ駄目なの?
>>859 以外の方にも質問なんだけど
wrapperやcontainerで囲む理由って何?
>>861 DIV厨のDIV厨たる所以。
常人には理解しがたい使い方をする。
CSS初心者がやりがちな方法。
>>861 禿胴。div が大杉っていうか、意味の無い<div>がいくつもあるね
866 :
860 :2005/10/10(月) 18:20:04 ID:???
>>863 できました〜。・゚・(ノД`)・゚・。ありがと。
こんなので1時間近く、いろいろやってたよ・・・。
てゆーかコレ初心者サイトのHPのコピペなのにハメられた!!
>>864 d
>コレ初心者サイトのHPのコピペなのにハメられた!! アホくさ
>>866 コピペでも、動かなかったら文法チェックぐらいはやろうな。
870 :
Name_Not_Found :2005/10/10(月) 22:38:15 ID:Rzbw1vn0
DWスレから誘導されました。 MX2004を使っています。 サイトの更新履歴をのせるボックスを作ろうと思い、レイヤーを作ったのですが、 その中の文字列の縦間隔がスカスカにあいています。 ちょうと2chみたいに縦間隔をキツキツにしたいのですがどうすればいいのでしょうか?
line-heightをいじる
次の次のスレ立てといていいですか?
次の次のスレ?
半月後くらいに様子を見に来てください。
875 :
859 :2005/10/11(火) 00:04:59 ID:vKboCDN0
859です。div使い過ぎで崩れてしまっている状況ですか?
876 :
Name_Not_Found :2005/10/11(火) 00:14:57 ID:ImgfpqRc
CSSで作ったサイト、テストのために色んな環境で見てみました。 友達の家にあるPC(98・IE6.0)と、学校にあるPC(XP・IE6.0)で、どちらのブラウザも文字サイズ「中」・同じフォントで、CSSにfont-sze: midium;とある部分の文字を表示したんですが、かなりサイズの違いが出てしまいました。 同じ文字サイズ「中」でもOSによる差ってあるんでしょうか? また、こんな事態を回避するにはどうしたらいいんでしょうか…? 教えてください。
>>875 崩れてはいないと思うけど、
<div>を使うのは会社概要のページで言うと、横並びになる
<div id="contents"><div id="banner1">だけでいいと思うよ。
それらを<div id="main">で囲む必要もない。
他の部分は<div>で囲まなくても<h1>なり<ul>なりに指定してやることで
対処できる。
あと、idだけでなくclassも使うともっとcssファイルを簡素化できると思うよ。
そうすれば、自分でおかしな表示になる原因を探ることも楽。
cssから最低限消すのは下の一行ね。それ消してもまだ崩れるようなら
また来てみて。俺がいなくても誰かみてくれると思うから。
#category1 h2 {
font-size:2.0em;
color:#FFFFFF;
position:absolute; ←これ。
top:115px;
left:57px;
}
>>876 モニタの解像度が関係する。
800×600で見る人もいるだろうし、1284×1024で見る人もいる。
絶対指定を使わなければそれなりに出来るだろうけど、…見難いんじゃないかなぁ
879 :
Name_Not_Found :2005/10/11(火) 04:06:49 ID:qBqBcC8R
フラッシュをdreamweaver で入れ込むと IEでは問題なく見えるが、 ネスケでは余白が異様に出来てしまい、 画像が回り込んでしまいます。。。
そうですか
>>879 じゃあ、手で書けばいいじゃない。
つか、DWがどんなコード吐いてんのか教えてクダサイ。
あと、「余白ができる」っつーのがどっち方向なのかわかんないからなんとも言えないけど、
縦方向ならば十中八九、デフォルトで縦方向のマージンが0以上のブロック要素があるから、なので
オブジェクト要素周辺のスタイルを疑ってみるのも、最初にすべきことだよ。
882 :
Name_Not_Found :2005/10/11(火) 04:19:26 ID:qBqBcC8R
>>881 有難うございます。
解決できました。
オブジェクト要素の指定を行いました。
感謝です。
listのマーカーを”>>”にするにはどうすればいいですか?
884 :
Name_Not_Found :2005/10/11(火) 04:27:09 ID:qBqBcC8R
あぁ・・各ブラウザで確認すると発狂しそう
今のところブラウザチェックで発狂した人の話は 聞かないから安心してチェックしろ。
○○県△△市に住む無職884が突然発狂し、 近くに住む会社員(36歳)に対し、 殴る蹴るの暴力を加え、 全治3週間の怪我を負わせていた事がわかった。 加害者の884は取り調べに対し、 「cssの確認を各ブラウザで検証している内にムシャクシャしてやった。今は反省している。」 と供述している。
まぁ気持ちは分からないでもない。 でもその内楽しくなってくるから安心しろ。 そしていつの間にかブラウザマニアになってるんだ。 あぁ、俺のパソにも確認用のブラウザがいくつも…。
しかもswfの配置だからな
[ 1 ] 左図のような構成を作ろうとしているのですが [2][ 3] IEだと[2]と[3]の間に3pxの隙間が出来てfirefoxだと隙間がなくなります。 [ 4 ] [2]にfloatを使い[3]のmarginをきっちり[2]の幅だけ取っています。 枠だけ作ってその他のmargin、paddingは0にしています。 IEとfirefoxの見た目を等しくする方法はありませんか?
CSSの内容がわからないから、アドバイス不能
>>889
891 :
889 :2005/10/11(火) 07:53:47 ID:???
失礼しました。[2]をleft[3]をrightで指定しています。 div.left { width:100px; float:left; height:100%; } div.right { margin-left:100px; width:200px; height:100%; clear:both; } この2つを並べるとIEでは2つの間に3pxの隙間が出来て合計幅303px firefoxでは300pxにきっちり収まります。この違いをなくす方法はあるのでしょうか?
検証したら隙間が出来なかったよ IE5.5
そして段組にちゃんとならなかった
すいません、clear:both;はありませんでした。 IE6とfox1.0.7なのでIE5.5で確認してきます
895 :
889 :2005/10/11(火) 08:34:38 ID:???
<html>
<head>
<style type="text/css">
div.left {width:100px; float:left; height:100px; background: #FF0000;}
div.right { margin-left:100px; width:200px; height:100px; background:#0000FF;}
</style>
</head>
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
</html>
ごく単純に段組だけ作ってみましたがやっぱり表示が違います。
なんとかする方法がありましたらお願いします。どうしようもないのなら諦めます。
ttp://dailympeg.netfirms.com/dat/0036.gif
>>895 absoluteでよければ、それぞれに指定してあげれば簡単に解決するけど
absolute嫌いな人も居るし、まぁお好みで。
>>895 ごめん.漏れの環境では再現しないわ.
<html>
<head>
<style type="text/css">
<!--
DIV.left {width:100px; height:100px; background:#FF0000; margin:0px; float:left;}
DIV.right {width:200px; height:100px; background:#0000FF; margin:0px; clear:none;}
-->
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
898 :
889 :2005/10/11(火) 08:54:58 ID:???
ありがとうございました。
とりあえずabsoluteでやってみて、問題出てきたらまた考えて見ます。
あと
>>897 は再現できないというのは段組が出来てないのでしょうか?
それともすきまが無いのでしょうか?
もしよろしかったら環境と一緒に教えてください。
rightの方にもfloat:leftつけてあげれば即解決しませんかね
>>899 ( ´,_ゝ`)答え教えちゃったよコイツ.つまんね!
( ´,_ゝ`)さっさと礼だけ言われて,俺たち用済みでバイバイなんだろうな.つまんね!
(; ´,_ゝ`)お前はどうしたいのかと、小一時間(ry
あぁ、こんな単純なことだったとは。ほんとくだらない質問ですいません。 やり直してきます。まだ全然理解できてないみたいなんで、 またがんばってもう一度テンプレ読んでおきます。お礼の他に何すればいいかわからないので こんなところで許してください。\
その棒がお礼・・・? さて、これで何しようかみんな 棒倒しでもするか
じゃあ俺がこれも追加しておく。/
いじわるすんなよ
>>889 もうひとつの答え
div.left{
float:left;
margin-right: 0 !important;
margin-right: -3px;
width: 100px;
}
div.right{
margin-left: 100px !important;
margin-left: 97px;
width: 100px;
}
OPERAなんて使ってるから笑われるんだと思うな(=´ω`)
>OPERAなんて使ってるから笑われるんだと思うな(=´ω`) 突然なにを。。。
でも便乗してみる。 Opera、8になってだいぶ解釈マシになったと思うんだが、 CSS対応表で8まで載せてるサイトってあるかね。
OperaとFirefoxで表示が限りなく似てきているのはいいことだと思うんですよ
オペラもFFもサハリも、最近のCSSを正しく解釈しようとするブラウザだし、
マメにアップデートしてくれるからね。
IEもアレだけのシェア握ったんだし、ウィンドーズアップデートみたいな便利な
機能のあるOSなんだから、ちょこちょこバグフィクスしてくれれば、
>>884 もタイーホされずにすむのになあ。
MSって無責任だなあ、って思うよ。
ブラウザの振り分けについて質問させてください。
@import "ほにゃらら.css";
大体どこのサイトでも上記がIE3〜4・NC4をはじく、と書いてあるのですが、
(例えばこことか→
ttp://east.portland.ne.jp/~sigekazu/css/boxm.htm )
実際これで振り分けを行うと、IE5.xまではじかれてしまいます。(winとmacどちらも)
しかたがないので、現状は上記で5までいったんはじいて、
@media tty {
i { content:"\";/*" "*/}} @import 'ほにゃらら.css'; /*";}
}/* */
で、もう一度IE5.xにcssを当てています。
これで問題なくIE5.x以上にcssが適用されるので、問題ないといえばないのですが、
どのサイトどの書物を見ても(といっても全て網羅はできてませんが。。)
@import "ほにゃらら.css";ではじくブラウザにIE5.xが
含まれてないため、非常に疑問が残ってしまっています。
皆さんの環境では、ちゃんとIE3〜4・NC4のみはじけるのでしょうか?
問題点が分かる方いらっしゃったら、ご指摘いただけるとうれしいです。
915 :
Name_Not_Found :2005/10/11(火) 18:12:58 ID:MDoHbQ1W
#right_layer { float: right; margin-left: 530px; width: 230px; text-align: left; } #left_layer { margin-right: 230px; text-align: left; } こういうソースで、 right_layerがleft_layerの右にくるようにしたいのですが、 FireFoxだとleft_layerがちゃんと左に回りこんでくれるのに、 IEでみると、left_layerが一列下の左側に置かれてしまうのです。 コンテンツ幅は760pxです。 どうすればIEでもFFと同じように表示できるでしょうか?
足し算 100%だ〜めあるよ。
>>915 #right_layer{
width: 230px;
float: right;}
#left_layer{
width: 530px;
text-align: left;}
>>916 どういうことでしょうか?
コンテンツ幅と、中の箱の合計widthが同じだとだめぽってことですか?
>>917 申し訳ありませんがそれでもだめでした。
何か他の要素が邪魔しているのかもしれないのでもうちょっとがんばってみます。
>>918 右{
width: 適宜;
float: right;
}
左{
width: (親要素の幅 - 右の幅);
float: right;
}
IEは、かたっぽだけfloat書いたら、隙間ができると何度言えば…
あと、floatでrightかleftを指定している場合は、marginが2倍で
計算されるからそれも勘定に入れよう。
921 :
Name_Not_Found :2005/10/11(火) 19:09:47 ID:+PPuE1OM
<style type="text/css"> ul { list-style-type: none; height: 16px; margin: 0px; padding: 0px; } li { float: left; width: 72px; height: 23px; } p { margin: 0px; clear: both; height: 23px; } </style> </head> <body> <ul> <li><img src="hoge.gif" width="72" height="23"></li><li><img src="hoge.gif" width="72" height="23"></li><li><img src="hoge.gif" width="72" height="23"></li> </ul> <p><img src="hoge.gif" width="72" height="23"></p> このようなソースをWinのIE6で見たときに、<ul>内の画像と<p>内の画像との間に隙間ができてしまいます。 ネスケ7では意図通りにピッタリくっついて表示されます。 IE6で隙間を無くすにはどうしたら良いでしょうか?よろしくお願いします。
>>921 img{vertical-align:bottom;}
>>921 リスト要素タグ間に空白類文字を挟むな。
今回は</ul>と直前の</li>の間に直接空白類文字が入らなければいい。
</li></ul>
</li
></ul>
</li><!--
--></ul>
とか勝手に調整汁。
>>921 原因は画像がベースライン揃えで解釈されるからか。
文字が入るとディセンダ揃えになって余白が生じる。
解消方法は
>>922-923 の通りだな。
926 :
921 :2005/10/11(火) 20:42:38 ID:???
>>922-925 みなさま、ありがとうございました。
空白が原因だったのですね・・・
ソースを見やすくするために、
>>922 さんの方法で対処したいと思います。
ありがとうございました!
>>927 できますかも糞も、それってCSSレイアウトじゃん・・・。
ソース見てそれもわからないレベルなら君には無理だと思うよ。
>>927 あはは。
どっちかっつーと、CSSでやりやすいレイアウト+装飾だよ。
ソース見てがんがれ。
>>927-
>>930 ぶは。すみませんorz
ソース見るという基本的な事すら忘れてたみたいです。
頑張ります。
怒りソース(#゚Д゚)
田舎もんには解らんぜよ
>>914 @import"ほにゃらら.css"; みたいに @import の後にスペースがないとそうなるみたいだけど。確認して。
日本語と英数字を別のフォントで指定することはできるでしょうか。 ブラウザのユーザCSSを作っているのですが、 日本語(ひらがな・カタカナ・漢字・全角英数字)はOsakaで、 半角英数字はOsaka−等幅で表示させたいです。 よろしくお願いします。
Macフォントのことはわからんが、 英字専用フォントを先に書いておけば英数字だけがそれになる。 ただOsakaとかOsaka等幅って両方とも日本語+英数だっけ?
初期指定フォントにて足りない部分を次に指定したフォントで補完するといった形になりますワナ
938 :
935 :2005/10/12(水) 10:44:33 ID:???
ありがとうございます。 書いてなくてすみません。 Windowsで、Osakaを使ってます。 OsakaもOsaka−等幅もどちらも日本語+英数なのです…。 Osaka−等幅の英数のみを抜き出したフォントを作るしか ないんでしょうかね。
(;´Д`) < ・・・・? OsakaとOsaka-等幅の必要な部分だけを併せ持ったフォントは 新たに製作するしか方法がありませんが。 貴方の環境だけでフォントを指定するならそれで良いのですが。 皆様の環境でも同じようにフォントを表示させようとすれば まず、フォントの配布から考えなくてはなりませんね。 というか、なんか欝になってきた・・・。
きっとローカルマシンでだけ見るサイトなんだよ。
恐れ入りますが... wrapperに背景画像入れても表示されません。 wrapper container left right っていう二段組みで、leftとrightの下段をそろえるために、 containerでくるんで、background-colorを指定。 containerにはbackground-colorを表示させるため、float:leftを指定。 (たしかこうしないと、Win IE6以外はbackground-colorが 表示されないんですよね?) さらに、containerを左右が少し大きいwrapperでくるんで、 そのwrapperに背景画像を指定、 wrapperは左右のmarginをautoにして、 ブラウザの真ん中に来るようにしています。 とこうなっているんですが、 wrapperの背景画像が表示されません。 この画像は、wrapperの左右にドロップシャドウが つくように見せるためのものです。 いや、厳密に言うと、wrapperにもfloatを指定すると 表示されるんですが、左右どっちかに寄ってしまい、 真ん中に来ないので..... なにかいい回避方法はないでしょうか?
>939-940 >935にユーザCSSって書いてあるよ
>>935 >ユーザーCSS
正直スマンカッタm(__)m
>>943 941ですけど、こういうのってダメですか?
ソースが無けりゃ解るわけねーだろっ たくーーー
947 :
Name_Not_Found :2005/10/12(水) 13:26:12 ID:llEQLKWw
IE5.x表示対策やりたいのですが マイクロソフトではIE5.xサービス停止とか出てて・・・今手に入れる方法ってありますか? やりたいのは旧ブラウザの対策なので、そういった見え方を調べられるソフトがあればそれでもいいのですが よろしくお願いします!
古いOSを買う
>>946 スマソですた。ここの達人のみなさまだったらわかると思ったのですが。
というわけでsourceです。変ですけど素人なので。
#wrapperをセンターに配置しつつ、背景画像を
表示させたいのですが。
先ほども書いたのですが、
#wrapperにfloatを設定しないと背景画像が表示されません。
でも、floatを設定するとセンターに配置されません。
これが問題なのです。
body { margin: 0px 0px 0px 0px; background-color: #CCCCCC; text-align: center; }
#wrapper{ width: 800px; line-height: 100%; margin-right: auto; margin-left: auto; padding: 0px; text-align: left; background-image: url(shadow.jpg); background-repeat: repeat; position: relative; }
#container { width: 750px; line-height: 100%; margin-right: auto; margin-left: auto; padding: 0px; text-align: left; background-color: #ffffff; float: left; border-left: 0px solid #999999; border-right: 0px solid #999999; }
#left { width: 200px; margin-right: 0px; margin-left: 0px; padding-top: 10px; background-color: #FFFFFF; float: left; text-align:center; }
#right{ width: 550px; padding: 15px 10px 15px 0px; margin-right:0px; margin-left: 0px; padding-top: 10px; background-color: #FFFFFF; float: right; }
<body>
<div id="wrapper">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
950 :
Name_Not_Found :2005/10/12(水) 13:39:29 ID:llEQLKWw
>>941 >>949 余分な指定がいっぱいあるが、目をつぶる。
margin-right: auto; margin-left: auto;は標準モードでしか効かないよ。
各widthも合計が 200px+550px=750px にしては並ばない。
これをコピペしてやってみて
まず、標準モードにする。 ページのtopに
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd ">
#wrapper{width: 800px;line-height: 100%;
margin-right: auto;margin-left: auto;
padding: 0px;text-align: left;
background-image:url('shadow.jpg');
background-repeat: repeat;}
#container {width: 750px;line-height:100%;margin-right: auto;margin-left: auto;
padding: 0px;text-align: left;background-color: #ffffff;}
#left {
width: 200px;padding-top: 10px;background-color: #FFFFFF;
text-align:center;float:left;
}
#right{width:540px;padding: 15px 10px 15px 0px;
background-color: #FFFFFF;float:right;}
少しずつ勉強してがんばれ。
改行が多いと・・・ つーのは不便だにゃぁ・・・
>>952 どうもありがとうございました。
今ちょっといじれないので
やってみてまた報告します。
直リンしちゃった・・・スマソ
IE3・・・ナツカスィ。 当時はNN4の圧勝だったんだがなぁ。 いや今も機能的にはN7のがずっと上か。
958 :
918 :2005/10/12(水) 17:11:51 ID:/3MUS260
>>919 遅れましたが、ありがとうございました。
さらに質問したいのですが、
IE5.Xとかでコンテナに指定した値にpaddingとかborderに指定した値を含んでしまう問題で、
width: IE用のborderとpaddingに指定した値を含んだコンテナ幅;
voice-family: "\"}\"";
voice-family: inherit;
width: 他の正しく理解するブラウザ用コンテナ幅;
とすることで回避できる、と本(WEB標準デザインテクニック即戦ワークブック)に書いてありました。
今いじってるCSSで、border-leftに5pxを指定しているコンテナについて、
FireFoxとSleipnir(IE)で差があったので、この方法を用いたのですが、結果に差がみられませんでした。
この方法は現在有効ではないのでしょうか?
また、有効でないとしたら、これ以外にこの問題を回避する方法はあるでしょうか。
よろしくおねがいします。
CSSハックを学んで来い。
>>959 そうですね。
ちょっと読んだだけで使うのはやっぱあれですか…。
出直してきます。
ていうか今時IE5に対応せなあかんの?orz
>>961 俺のサイトでの結果を参考までに・・・
解析対象ヒット回数2220118(期間は1年)
# Microsoft Internet Explorer 6 2098603 (94.53%)
# Microsoft Internet Explorer 5 68749 (3.10%)
# Mozilla 26477 (1.19%)
# Opera 13867 (0.62%)
# Netscape 7 4128 (0.19%)
# Netscape 4 2687 (0.12%)
# Sleipnir 2029 (0.09%)
# Netscape 3 1306 (0.06%)
# Safari 764 (0.03%)
# Microsoft Internet Explorer 4 446 (0.02%)
個人なら充分切り捨てていい数値だと思うけどな。>IE5 ウチはIE6の次がDoCoMoだったよ…どう見えてるんだか。
>>961 IE6でもxml宣言してると5と同じ仕様でやっちゃうらしいです。
IE6では文書型宣言に基づいてレンダリングモードを切り替える機能が実装されたのですが、
その場合に、標準準拠モードだと正しい解釈をするんですが、
XHTMLにおいてxml宣言をした場合、後方互換モードでレンダリングされる、ということらしいです。
xml宣言しなきゃいいのか…。
それ、常識
<span style="width : 200px;background-color : LightSteelBlue;">文字列</span> とやってもIEでは200pxに固定されますがFireFox等では無視されるのは仕様でしょうか? もし解決策があれば教えていただけませんでしょうか。宜しくお願いします。
うん、仕様
>>967 display:block;を追加すればなるぞ。
無論ブロック要素みたくなるが。
質問です。 下記のソースでcss_leftの要素とcss_rightの要素の高さをそろえるには どうすればよいのでしょうか?何回試行錯誤してもcss_rightが下に下がってしまいます。 どうかよろしくお願いします。 <div class="css_left"> css_left </div> <div class="css_right"> css_right </div> </div> .css_left { top: 0px; left: 0px; background-color: #00ffff; width: 20%; margin: 0; } .css_right { position: relative; top: 0px; left: 20%; width: 80%; background-color: #66cdaa; margin: 0; }
>>970 css_rightはposition: relativeじゃなくposition: absolute;
972 :
970 :2005/10/12(水) 21:06:12 ID:???
>>971 おお〜ありがとうございます〜無事できましたヽ( ´ー`)ノ
>>972 FireFox opera で見るとどうなっているかな?
次スレマダー?
おら、いやんって言われた。 誰か・・・
>976 いいんでない
>>952 遅くなりましたが、やってみました。
う〜ん、やっぱ
(1)wrapperにfloat指定しないと、
背景画像が表示されないし、
(2)containerにfloat指定しないと、
背景色が表示されない。
(2)は、Win IE以外はそうだと、どこかで読んだことがあるんですが、
(でもうろ覚えでスイマセン)、(1)はなんでなんだろ...
文章全部削除して、divと数文字だけ入れて(骨格だけで)表示させても
そうなんですよね......
もちょっと、根本的なところからがんがってみます。
979 :
970 :2005/10/13(木) 00:20:38 ID:???
>>973 余白が確認できたので
BODY {margin: 0px;}で隠すということにしました..(解決になってないかもです
あともう一つ質問させてください。
http://12321.client.jp/のページについてなのですが 、
css_topに記述した赤オレンジの画像の下に余白ができてしまうのですが
この余白を無くすにはどうすればよいのでしょうか?(css_topを無くしてdiv1の下に直に
おいても余白がでてしまいます。)
CSSでページを組んでみたのですが、div3の部分がdiv2の下に表示するには
どうすればよいのでしょうか?
今回はdiv2に対してdiv3をrelativeで配置したので
「 right_menu2」の下に背景色が黄色のdiv3要素がくると思ったのですが
思うようにいきませんでした。
組み方はこのようになっております。
<div class="all">
div1
top
div2
left
right
div3
</div>
(いつも使ってる鯖は広告は出ないのでサンプルページの
下部の広告は気に方向でお願いします。)
自分の今の力ではむりでしたので、どうかみなさん力を貸してください。
上記リンク先にソースを載せておきましたので是非お願い致します。
どうかよろしくお願いします。m(_ _)m
>>949 img{vertical-align:bottom;}を追加。
このスレで何回目かの内容なんで詳しく知りたきゃログ読んで。
>979 う〜〜む 徐々に「ビルダーどこでも配置」に近づいておるな
>>979 div3が下に来ないのは、css_rightがposition:absoluteになってるんだから当然。
984 :
981 :2005/10/13(木) 00:34:06 ID:???
スマソ949宛じゃなくて
>>979 宛。
赤オレンジの画像のほうの話ね。
985 :
979 :2005/10/13(木) 01:10:42 ID:???
>>983 absoluteに指定するとrelativeが働かないということですね。
明日からここらへんについてもっと勉強しようと思います。
>>981 できました〜 画像はインライン要素だからmarginではなく
vertical-alignを使うのですね。理解しました。
みなさまレスありがとうございます。
あともう一つ疑問ができてしまったので質問させて頂きます。
http://12321.client.jp/に新しいソースで書いたサンプルページを上げてみました 。
IEだとdiv1の下にdiv2要素が隙間無く入るのですが、
firefoxで確認したところdiv1とdiv2の間に隙間ができてしまいます。
このようなことは指定してないので起きないと思うのですが
これはfirefoxがなにかのタグに対応していないために起こるのでしょうか?
再度の質問となりますが、
どうかよろしくお願いします。
>>985 マージン関連の設定がいい加減だからじゃね?
折角ソース貼るなら、 文章のところにdivのclass名書いた方がCSSと見比べるだけで一目で分かるから分かりやすい。
>>985 >画像はインライン要素だからmarginではなくvertical-alignを使うのですね
違う違う。マージンとは別物。
>>925 のvertical-alignプロパティとbaselineを参照。
>>1000 おさはハゲじゃないって!!ハゲ隠ししてるだけだって!!
未来レスとか くだらねぇ(プゥ
>>987 ごもっともなご意見です。今直させて頂いてます。
で直してる最中に解決致しました。。
<div class="css_right_menu_1">
<p>
あ<br>
<a href="sorce.txt">このページのソース</a><br>
<a href="css.txt">CSSのソース</a><br>
</p>
</div>
を
<div class="css_right_menu_1">
あ<br>
<a href="sorce.txt">このページのソース</a><br>
<a href="css.txt">CSSのソース</a><br>
</div>
<p></p>を省いたら余白がなくなりました。
css_right_menu_1はrightの入れ子なのになんでそれに影響するんだろう・・?
ちょっと勉強してきます。
>>988 誘導どもです。こちらも勉強してきます。
何故IEは:beforeや:afterに対応してくれないんですか?
突撃だから
>>991 いや、そこはpを抜くんじゃなくて、pのマージンを調節した方が良い。試しにゼロとか。
もういいや
996 :
979 :2005/10/13(木) 01:49:06 ID:???
>>994 なるほど、できました〜。
なんだか自分つくづくピエロなこと言ってますね。
でも指摘して頂けると勉強になります。
レスありがとうございます。
取り敢えず一区切りついたようなので埋め。
うめ
どく
1000px
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。