CSS初心者スレッド＝1st＝

CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

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

《関連スレ》
Webサイト制作初心者用質問スレ Part 189
http://pc11.2ch.net/test/read.cgi/hp/1192516526/
/* CSS・スタイルシート質問スレッド【68th】
http://pc11.2ch.net/test/read.cgi/hp/1190261475/

2

初めての３ｹﾞｯﾂ！

4ゲットー

5ゲット！

一桁！ 6get

こんな↓感じの、ヘッダとフッタがあって、中央が左右ふたつ（左はメニューですが）
に別れているページの作成法について質問です。
HTMLは上から要素がABCDの順に記述されており、それをスタイルシートで段組にします。

[ A ]
[B][ C ]
[ D ]

問題は、↑の、Cの縦の長さが不定（１ページの半分くらい-２ページ分くらい）なため、
Bの方が長い場合とCの方が長い場合があり、例えばBをposition:absoluteで固定すると
Cの方が短い場合にBとDが重なってしまいます。

やりたいことは、「BとCの縦の長さが長い方に合わせてフッタDを配置する」なのですが、
これはスタイルシートではどのような位置指定をすれば出来るのでしょうか。

>>7
position使うなら、他のブロックもpositionでレイアウトしないと。
floatにしてフッタDでclearした方が、希望に近いと思う。

優しいスレだな、おい。

>>8-9
ありがとうございます。調べてみます。

IE6でレイアウトが崩れてしまって悩んでいます。

こちらのサイトで使われているものと同じテンプレートを買ったんですが、IE6でレイアウトが崩れることがあります。
ttp://www.med-designs.com/themes/lightspro.html
ttp://www.med-designs.com/themes/bubblegum.html
ttp://www.med-designs.com/themes/retrofilm.html

上記URLの全てで、メニュー部分がコンテンツの一番下まで下がっていると思うのですが、私も同様の症状が出ています。
私の場合は、ブログでアーカイブされたページを表示する時にメニューが下まで下がってしまいました。
記事の数が少ない場合は問題ないのですが、数が多くなると（縦に長くなる）とレイアウトが崩れます。

IE6用にCSSが用意されていますが、それを修正すればよいのでしょうか？
解決策があればお願いします。

>>11
ttp://www.geocities.jp/multi_column/float/07.html
ttp://redline.hippy.jp/lab/beginner/css_vol02.php

>>12
ありがとうございました。
原因は、ブログエントリの１つで、貼っていた画像が少し大きかったからでした。
紹介してもらったリンクの内容を１つずつ確認していって、やっと気付く事が出来ました。
長い間悩んでいましたが解決して良かったです。リンク先のサイトの他の記事も凄く参考になりました。

MacOSX10.4.11にアップグレードしたら、Safariが3.0.4になり、
一部のWebのフォントが明朝で表示され読みにくくなってしまいました。
句読点が文頭に来るなど、見た目も崩れています。
環境設定の「表示」では、標準フォント等幅フォントともに
ヒラギノ角ゴになっています。

Safariのスレで初めてCSSというものの存在を知りましたが、
全くのド素人で何をどうしていいやらわかりません。
「/* CSS・スタイルシート質問スレッド【69th】」のテンプレを
いくらか開いてみましたが、実際の作業のやりかたがわかりません。

Safariを全部ヒラギノ角ゴ表示にしたいだけなのですが、
「CSSを自分で作る」ことをしなければならないでしょうか？
既に作成してあるCSSはないでしょうか？
全くの初心者が自分で作る為の説明サイトがあったら
誘導して下さい。お願いします。

>>14
Safari38
ttp://pc11.2ch.net/test/read.cgi/mac/1195269377/

>>14
正直板違いなんだが>>15読んでも理解出来ないだろ。これからは勉強してねってことで。
1.Text Edit メニュー＞フォーマット＞シンプルテキストにしてから下記をコピー
* {font-family:"Hiragino Kaku Gothic Pro",sans-serif !important;}
2.ファイル名を○○.cssとしてわかる場所に保存（.txtにしないように注意）
3.Sahari 環境設定＞詳細＞スタイルシート　で上記ファイルを指定

すみません。やってみます。

>>16
ありがとうございました！出来ました！！
本当に助かりました！！　感謝感激です！！！　

質問です。
Firefoxの一部のスキンで検索バーやアドレスバーが
クリック(アクティブ状態)して画像が変わるのですが
これをweb上の検索窓で実現させることは可能でしょうか？

>>19
Firefoxテーマは山程あるので、どのテーマまたはアドオンなのか具体的に。
また、web上の検索窓とは自サイトの検索窓の事なのかを明確に。

>>19
cssに動的なアレを求めるのはお門違い。
「テキストエリア　背景画像　JavaScript」でググれ。

html
<div class=box1>AAAAAAAAAAAAAAAA</div>

css
.box1 {width:200;height:200;}

で下詰めにできませんか？
vertical-align:bottom;
をやってみましたがだめでした・・・

>>22
・文章ならp要素。
・vertical-alignはインライン要素に使う。
・数値にはほとんどの場合、単位が必要。

>>22
divを二重にすればできなくもないが…

.box1 { position: relative; width: 200px; height: 200px }
.box2 { position: absolute; bottom: 0 }

<div class="box1">
<div class="box2">AAAAAAAAAAAAAAAA</div>
</div>

行ボックスを下に揃えるってやっぱ無理なのかな？

wikiの日本語表記の部分を英語表記にしたいんですが
どうすればいいんでしょうか？

http://www29.atwiki.jp/sakuga-e/
ここのトップページという表記を英語とかにしたいんです。

>>24
おお、できた！！ﾄﾝｸｽ。単位漏れﾊｽﾞｶｼｽorz

>>25
ブログ板にwikiスレがある。
質問もcssに関係ないhtmlの話。

>>27
ありがとごじゃます。＞誘導
そっちの知識はさっぱりでして・・・（＾＾；

age

http://blog.goo.ne.jp/0x0_cherry_0x0/
の一番上の右端に画像を貼り付けたいんですが
どうしたらいいですか？
ホント初心者なんでスレ読んでもわかんなくて・・＞＜
しょうもないこと聞いてすみません↓
レスお願いします!

マルチは氏ね

マルチするのは上級者の役目なんだが

人間初心者だろ。

おまいは剥けてから言うように !

二匹目の人間初心者

>>30

body {
background-image: url(画像アド);
background-repeat: no-repeat;
background-position: right top;
}

>>36
マルチの上、解決済みです。

ライトップなんて2重命令できんのか？

こちらのスレではマルチ歓迎です

>>38
なぜできないと思うんだ？
そもそも二重って言い方もおかしいが。

>>40
それは俺の固定概念があったからだよ

>>40はエスパーだな。

>>36　さん　
ありがとうございました☆゜

>>43
まず謝れ馬鹿。

というか移動しろと言われてきてるのにマルチとは何事か

＞ありがとうございますッ
＞初心者スレ行かなくてすいません＞＜

何時間経ってると思ってんだ馬鹿。

キモい顔文字使う奴なんてそんなもんだよ・・

>>46
時間関係あるのか？

>>43
ちょｗその前に本文の文字色なんとかしろｗ

どうせ人来ない

こっちにも初心者叩きが湧くのかよ…

左にナビゲーション、右にコンテンツ内容の文章という、よくある形。
印刷用として、Javascriptを使ってCSSを切り替えて、
代替スタイルシートで左ナビの表示をdisplay:none で消して表示させて
いるのですが、実際に印刷すると、見えないナビが印刷されてしまいます。
問題はXPのIE6でおきており、どうやら既知のバグのようなのですが、
これを回避する方法はあるでしょうか。
できれば、印刷用のページを別に作るのではなく、同じページを
CSS切り替えで使い回せたらと思ったのですが…。

media="print"

>>53
52です。不要なナビを非表示にする設定をしたcssを、media="print"に
するということ？
そうすると、印刷用のページに切り替えた時に、印刷されないナビが
表示されたままになってしまいませんか？
同じ内容のcssを別名で用意して、そっちをprintにして一緒に読み込ませれば
いいということかな…。
こんがらがってワケわからなくなってきた…orz
とりあえず、試してみます。どうもありがとう。

52です。なんとなく解決したようです。どうもお邪魔しました。

済みません〜。リンクと既読済みのリンクに色を付けたいのですが、
<SPAN STYLE="color:#ff6666">
みたいなやり方でやる場合は、どのような記入でするのでしょうか？
お願いしますー。

；最後にこれがいる

>>56
そんなやり方ならcss使うまでもありません。htmlで十分です。

>>58
某RSS使ってるんですけど、スタイルシートじゃないと反映しないみたいなんで、
お願いしますだ〜。

おまえらみんなウンコオオオおおおおおおおおおおおおおおおお






ヘッダの中に入れてできたからいいもん〜だ

もう来ないよ

ぺっえええええええええええ

>>56
ヘッダー内に
a:link{
color:#f666;
}
a:visited{
color:ff6666;
}

なんだウンコまでしか読んでなかった('A`ﾒ)ﾁッ

ｳﾝｺまで読んで回答するお前に惚れた

>>56
<style type="text/css">
a:link { color: #00ff00; }
a:visited { color: #0000ff; }
</style>
みたいなのを<head>...</head>の中に

アホばかり

>>65　だから初心者向け

なんにでも始めてはある
先駆者がえらいって分野でもあるまい

ココは初心者ｽﾚです
煽り叩きは一切禁止

回答者も初心者でいい、というスレではない。

>>69
http://pc11.2ch.net/test/read.cgi/hp/1199354032/
ここから出てくるなっていったろ

流れも読まずに、答えたがり共がソース書きまくるって馬鹿だろ。

あはは

>>71
知られたらWEB制作会社儲からないもんな

>>73
会社に頼んでるんだ。どんだけー

質問よいですか？
最近流行りのブログの形をしたページを作ろうと思ってます。
ヘッダ、左にメニュー一覧、メニューの右側に文章などを書けるスペース、フッダ
ってやつです。

<div>でそれぞれ、ヘッダ、メニュー、文章、フッダというように4つに分けているんですが。
この<div>で作ったボックスをブログのようにセンタリングするにはどうすればよいでしょうか？

>>75
2カラムでググる。
ttp://www.geocities.jp/multi_column/

>>75
body { text-align: center; }
#container { text-align: left; margin-left: auto; margin-right: auto; }

<body>
<div id="container">
ここにメニューや文章などのdiv要素
</div>
</body>

詳しくは
http://www.mozilla.gr.jp/standards/webtips0004.html
を読んでください。

>>77
よくまあ堂々とそんなソース出せるもんだ。初心者は厚顔無恥ってこったな。

できました！！
ありがとうございます。

>>78
中野さんに「よくそんな恥ずかしいソース晒せますね」ってメールするといいと思うよ。

>>78
上級スレにお帰りくださいませｗ

>>80
そんな古い記事を手本にしてるおまえが馬鹿。

>>81
初心者が初心者にいい加減なこと教えて何かいい事があるの？

>>82
お手本となるソースを教えてください＞＜

>>82
自分も知りたいです。後方互換のIE対応でブロックレベル要素をセンタリング
する方法がほかにあるんですよね。上級者様、お願いします。

>>82
せっかく上級付けて隔離したのにわざわざでてくるなよｗ

聞いても無駄。適当に理由つけて逃げるだけ。

>>83
ソースをお手本？何を勘違いしてるんだか。

本当だｗ

>>84
>>86に答えが出てるだろ。

ほう
さすが上級者

面倒くさいから、cssを使う時の基本を教えてやるよ。
HTML4.0な。XHTMLなんか初心者には無駄だからな。

□標準モードにする
・Transitionalなら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
・strictなら
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

□ブラウザ初期値をリセットする
・最低これをcssに入れる
* {margin:0; padding:0;}

>>91
正しいHTML・CSS教えますスレでもたててそこでやれよ

なるほど、上級者様の間では
ユニバーサルセレクタでmarginとpaddingを0にするのが
ナウいやりかたなんですね！

>>91
答えになってないワロタw

□段組＝カラム
・解説サイトはググればいくらでもある。タダなんだからどんどん読め。

□ブロックレベルとインラインレベル
・要素は大きく分けてこの2種類。それぞれ使えるプロバティが違うから、以下同上。

□センタリング
・よくある間違いとして、ブロックレベルをtext-align:center;でセンタリングさせている。
これは特定ブラウザの誤った仕様なので、忘れる事。
text-align:center;でセンタリング出来るのはインラインレベル。

・ブロックレベルのセンタリングの例として、
div {margin:0 auto; width:xx%;}
div {margin-left:xx%; margin-right:xx%;}
など。

>>92-94
おまえらは人を馬鹿にする事しか出来ないのか？
グダグダ言ってる間に、1個でも初心者にコツを伝授してやれ。

>>96
スレッド立ててやったから、こっちに移動しな。
【W3C準拠】正しいHTML・CSS教えます【ウェブ標準】
http://pc11.2ch.net/test/read.cgi/hp/1199982134/

>>96
スレ立ててもらえてよかったですね
さようならｗ

>>97-98
おまえらには呆れるな。本当に脳味噌腐ってるわ。
その糞スレの削除依頼責任持って出せよ。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ここで質問してもいい加減な答えしか返って来ない。
馬鹿が常駐しているので全くの無意味。
どうでもいいから答えが欲しい人はどーぞ。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

ほれ、初心者にコツを伝授したいんだろ。>>97を活用しろよ。

つーか、>>78で初心者を馬鹿にしといて
何言ってんだって話だよな。ただのキチガイじゃん。
もう>>97のスレから出てくんなよ。

あるHP作成ソフトで作ったブログページをWin6で表示すると、自動的に少し下にスクロールして表示されてしまいます。
テクノラティなんかに記録されているサムネイルを見て気がつきました。
これは一般的に症例のある症状なんでしょうか？
（ページやソースを晒さないとどうにも答えようがないでしょうか？）

リンクが途中のIDに張られてるとかじゃなくて？

>>102
アドレスに＃とかついてない？

すまん
padding : 10px 70px 20px 30px;
とやったとき

┌───────────┐
│　　　　　　↑　　　　　　　　 │
│　　　　　10px　　　　　　　　│
│　　　　　　↓　　　　　　　　 │
│←30px→ぬるぽ←70px→│
│　　　　　　↑　　　　　　　　 │
│　　　　　20px　　　　　　　　│
│　　　　　　↓　　　　　　　　 │
└───────────┘

これであってたよな？
なんか
┌───────────┐
│　　　　　　↑　　　　　　　　 │
│　　　　　10px　　　　　　　　│
│　　　　　　↓　　　　　　　　 │
│←70px→ぬるぽ←30px→│
│　　　　　　↑　　　　　　　　 │
│　　　　　20px　　　　　　　　│
│　　　　　　↓　　　　　　　　 │
└───────────┘
こうなったんだが・・・
30と70が左右逆な気がするんだが・・・

os:meブラウザ:IE6

俺間違って覚えてえる？

逆なら逆で数字くらい入れかえるだろ

>>105
WinXP+IE6で表示させてみたけど、上の図のようになったよ。

ソース：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>test</title>
</head>
<body>
<div style="border: 1px solid gray;
padding : 10px 70px 20px 30px;">
テキスト テキスト …</div>
</body>
</html>

>>105
上であってるよ

>>103,104
誤爆質問でした…。答えて頂いてありがとうございます。
アドレスに#などは付けていませんでしたが、<body>のすぐ下にページトップに戻る用のIDをいれています。
（ちなみにブログページはサイトのトップページにしています。）
その上には何も記述していないのですがそれが原因なんでしょうか。その辺を調べてみようと思います。
スレ違い失礼しました。

>>109
たまにページの作り方間違えてるとなることがある。
html-lintで確認してみな。

誘導されて来ました
http://pc11.2ch.net/test/read.cgi/hp/1199982134/6

スクロールバーの色指定はIE限定ですか？

text-decoration:underline;

としている場合、サイトによってフォントとアンダーラインの間が空いている場合があるのですが、これはどういう要因でなるのでしょうか？

例えば
楽天　http://www.rakuten.co.jp/
だとフォントとアンダーラインに間隔がありませんが
Amazon　http://www.amazon.co.jp/
だと少しだけ間隔がありますよね。
後者の方がデザイン的に見やすいのかな〜と思っています。
ご指南よろしくお願いします。

すいません。IEとFireFoxで見え方が違うようですね。IEだとどちらも間隔がありませんでした。

>>111　そだよ
独自拡張みたいなもんだったはず　記述は忘れたけど
Fxじゃ使えないとかいう以前に、UI無視でやるしかないから、
クライックテーマ使っている人でもないと、なんかうざいっていう問題もある

一応Operaもだった気が

>>112
Windowsのブラウザでいろいろ表示してみたけれど、違いがよくわからなかった。
underlineの位置を調節するのは、CSSではできないはず。

IEとOperaだな＜スクロールバーの色
自分が落としたOperaの場合、初期設定では反映されなかったので
プロパティで有効にした。

ﾎﾟｶｰﾝ（AA略

>>114>>115>>117
ありがとう

CSSでリストを下記のように配置するとき、

A　B
C　D

A-B幅が一定なのでULで幅を指定し、float:leftとするとCで折り返すので、
狙ったとおりのレイアウトになるのですが、
AとBの高さが異なると、C-Dががたがたになってしまいます。
AまたはB要素に合わせてその逆のBまたはA要素が可変してくれると
レイアウトを合わせられるのですが、うまいやり方ないでしょうか？
現状やり方が思いつかなくて、ABでULを一旦終了させて回り込みをクリアさせて、
またULでCDとしているのですが、スマートじゃない気がします。

よろしくお願いします。

テーブルでもない限り高さの可変は無理じゃね？
ABの高さが一定になるようにテキストで工夫せよ

Cをclear:leftでどうよ

macとWinで表示が異なるのでjavascriptで
CSSを分けて表示させようと思います
解説サイトを参考に以下のように書いて読み込ませると、
win,macともにFireFOXがcssのリンクを読んでくれません

var os = (navigator.appVersion.indexOf ("Win", 0) != -1) ? "win" : "mac";
var bw = (navigator.appName.indexOf ("Mic", 0) != -1) ? "ie" : "ns";
document.write ('<link rel="stylesheet" type="text/css" href="./' + os + '-' + bw + '.css">');

原因と対策のヒントを頂けませんか？

スレタイ百回読んで下さい

>>124
スレタイ百壱回読んで下さい

ﾂﾏﾝﾈ

Macで見てる人は居ないと思って作成してま

そりゃ悪かったです
私自身がcssは初心者なので、ここで良いかと思ったんですよ

Yahooのトップのページなどは、Win、Macのどのブラウザで見ても
ほぼ同じように表示されます、コンテンツのページは違うけどね
やっぱりそれなりに凄いなぁと感心しますね

どうもFirefoxはJavaScriptに記載されたstyleとかリンクを読めないようです
この手法は諦めました
結果、WinのFirefoxだけを捨てるのが私の力の限界点です
結果報告でした

>>128
おまえがCSS初心者であることこと、
おまえがここでJavaScriptの質問をすることは、
何の関連性もない。

>>128
大胆な決断だなあ。あまりいい方法ではないが.htaccess + mod_rewriteで
User-Agentを見てCSS振り分けって手もあるよ。

WindowsのFirefoxとMacのFirefoxとの表示の差異が、CSSを振り分けないとい
けないほどのものなのか、ちょっと気になった。

>>107,108
レス遅れてすいません。>>105です。
検証ありがとうございます。

何で俺のだけ逆になってるんだろう・・・？

▼DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

▼機種
Docomo SH904i


上記で、<div style="display:-wap-marquee;">Text</div>
で、マーキーのように文字をスクロールさせたいのですが、動いてくれません。
どのようにすれば動いてくれるのでしょうか？

階層式メニューを作りたいのです。bodyのidで切り替えできるようにしたいです。
Dreamweaverのデザインビューではちゃんとサブメニューが見えるのに、
ブラウザでプレビューすると見えません。どう指定すればよいでしょうか。
displayだけじゃ足りませんか？
MacOSXの10.4.11で、Safari3.0.4、FireFox2.0.0.11で確認しました。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body id="show">
<ul>
<li id="hoge"><a href="#">メニュー1</a>
　<ul><li><a href="#">メニュー1-1</a></li>
　<li><a href="#">メニュー1-2</a></li></ul></li>
<li id="hoge2"><a href="#">メニュー2</a>
　<ul><li><a href="#">メニュー2-1</a></li>
　<li><a href="#">メニュー2-2</a></li></ul></li>
</ul>


ul li ul{
display: none;
}

#show ul li#hoge ul {
display: block;
}

>>133
CSSだけじゃ現状無理。
JSのやつは探せばいっぱいあるよ。

>>133
WindowsのOpera 9.5、Firefox 2.0.0.11ではメニュー1-1と1-2がちゃんと表示されたよ。
ググればサンプルがたくさん見つかるので、参考にしてください。
http://www.google.com/search?q=%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3+%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC+CSS

>>134,135
ありがとうございました
自分でググって見ても、js使うものしか出てこなかったんで、
やっぱCSSオンリーでは無理なのかなと思ってました
Macでは簡単にいかないと言うことでしょうか
検索の糸口も見つかったし、いろいろ試してみようと思います

再び来ました。>>133,136です。
マウスオーバーでメニューがフロートで出てくるものではなくて、
HTMLには予めすべてのメニューを書いておいて、
コンテンツごとにサブメニューの表示非表示を切り替えたいのです。
よくある左タテメニューです。

>>133のソースで言うと、メニュー1-1と1-2が表示されたことによって
メニュー2が移動すればいいのかと思い、マージンで位置移動しましたが、
空いた空間にやっぱりメニュー1-1と1-2は表示されていませんでした。
windowsなら見えるのなら、macではもう仕方ないのでしょうか。

身の丈に合ったもの作りなよ。

>>137
何か記述ミスしている可能性が高いんじゃないかな。
Windowsではうまく表示できたファイル↓
http://www.hsjp.net/upload/src/up9684.zip
検証してみて。

>>139
ファイルありがとうございました！
よく見直して、原因がわかりました。

bodyのidのひとつに、数字から始まるものがありました。
気を付けていたのですが、コンテンツ名がそれだったのでウッカリ。
そのページ以外にも反応しなかった理由はわかりませんが、
↓こんな感じでまとめて指定したのが影響したようです。

#show ul li#hoge ul ,
#2show ul li#hoge2 ul,
#show3 ul li#hoge3 ul {
display: block;
}

二つのリストを横に並べるにはどうすればいいでしょうか？

リストは以下のように作成しました。[ListA], [ListB]

<ul>
<li>Test1</li>
<li>Test2</li>
</ul>

上記のようなリストを二つ用意し、これらを横に並べたいと思います。
また、これらを一つのブロックとして管理したいです。

<div align="center">
[ListA] [ListB]
</div>

よろしくお願いします。

ヒント　　インライン

あとはググッてちょ

いやfloatだろw

[ListA]ってのがulならfloat。
liならdisplay:inline。
ついでに仮にもCSS使うならalign属性はやめとけ。

別にliもfloatでいいけどな。

>>145
昔、lifloatでulをセンタリングだとおかしくなるのがあった気がするから。

ｃｓｓで擬似テーブルみたいなのを作って行を切り替えたら勝手にboxが出てくるように設定してるんだけど
それの1部分だけ背景の色を変えたいんだけどCSSの修正なしで追加だけで設定できる方法ないですか？

日本語でおＫ

>>142-146
お早い、アドバイスありがとうございます。
ご指摘どおり、floatプロパティを追加してみたところ正常に表示が
行われました。

>>147
ソースがないとわからない。

ほぼ同じスタイルで一部（例えばwidth）だけが違う複数のdivのスタイル指定を

[css]
.box {color:white; border:1px solid blue; background-color:red;}
#box1 {width:300px;}
#box2 {width:200px;}
.box_s {width:100px;}

[html]
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box box_s">box_s 1</div>
<div class="box box_s">box_s 2</div>

としたら、思い通りにできたんだけど、これが普通のやり方？

>>151
普通だよ。.boxの内容を#box1,#box2,.box_sに書いても同じになるけど、
ボーダーの線種だけを個別に変えたりするようなことがないのなら、
>>151でいいと思う。

>>151

[css]
.box {color:white; border:1px solid blue; background-color:red; width:100px;}
#box1 {width:300px;}
#box2 {width:200px;}

[html]
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box">box_s 1</div>
<div class="box">box_s 2</div>

おれならこうする

div idで指定されている画像に
トップページのリンクを貼るにはどうすればいいでしょうか？
div idをa hrefで括ってしまっても良いものなんでしょうか？

>>154
駄目。
それ以前に完全にスレ違い。

>>154
完全にはすれ違いではないかも。
とりあえず、divいっぱいにaを広げたらいいんでない？
blockとか使って。

#HEADER
height:〜px;
background:url(img) no-repeat 0% 0%;

#HEADER a
display: block;
width: 〜px;
height:〜px;

widthはページのサイズにあわせて
heightはheaerのサイズにあわせています

<a href="〜html" div id="HEADER"></a>

こうするとリンクはおろかヘッダー画像が表示されずサイトの本文が
本来フッターがある場所より下に表示されます
スレ違いでしたら申し訳ありませんが
どこのスレへ行けば良いのかさっぱり分からないので誘導をお願いします

>>154
背景画像に無理やりリンク貼るぐらいなら<img　/>使えば？

>>156
おまえが初心者だから
悪いことは言わない、勉強しておいで。

>>157
中身が空だとまともに機能しなくて当然です・・・
>>158にしてください。

どこであんなのを覚えてくるんだろうねぇ・・・
お母さんは悲しいよ。

背景を、ブラウザの大きさに合わせて、拡大、縮小したいんですが、
そういうことはスタイルシートでできますか？

そんなこといわれたのはじめてだ

できるよ
pngにしておいて、パーセント指定

のはずなんだけど･･･
したことないからわかんない

>>163
パーセント指定、とはどこでどうやるんでしょうか…？

そこからかよｗ

>>165
いや、場所のパーセント指定はやったことあるんですが…。
大きさのパーセント指定？？
そんなパラメータありました？

100px→50%

.marie a:link,a:visited { color: #fff; border-left: #fff 5px solid; }
.marie a:hover { color: #000; border-left: #000 5px solid; }

｜　ヘッダ　｜
｜1｜２｜３｜
｜　フッタ 　｜

おい、カラム２の中にあるテキストリンクにカーソルを合わせたら、
IE6だけ、｜１２３｜と｜フッター｜の間に余白ができたりするんだが、どういうことだ？
ａ要素で指定してるborderを削ったらできたりしないんだが、hoverってお前らどう読む？

>>161
背景画像はできないよ。

h3でタイトルを付けてリンクをリストしたいのですが
リストの途中でh3タイトルを付けると
以下全てのリストがIEで見たときに左に寄ってしまいます
こんなふうにulでh3を囲んでしまうとなぜか寄らなくなります

</li>
</ul>
<ul>
<h3>タイトル</h3>
</ul>
<ul>
<li>

#side h3
margin:5px 10px 10px;

#side ul
list-style:none outside;
margin:0.5em 1.8em 0.2em 1.4em;

どうすればIEでずれずに表示されるんでしょうか？

<li>とか<ul>には<hx>タグはつけんとちゃうん？

>>170
スレ違い。
html-lintにでも行ってください。

彼の真の狙いはブラウザ間による余白の違いでしょう。
IEで寄っていると述べているので、Firefoxに合わせたいと考えているに違いありません。

#side ul
list-style:none outside;
margin:0.5em 1.8em 0.2em 1.4em;
padding: 0 0 0 40px;

これで問題ないはずです。
<h>は<textarea>で囲んでその中にタイトルを書き込めばいいと思いますよ。

>>173
初心者をからかうな

>>170
IE7、Firefox2、Opera9で表示させてみたが、変わったところはなかったよ。
↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head><title>test</title></head>
<body>
<ul><li>list1</li></ul>
<h3>h3 element</h3>
<ul><li>list2</li></ul>
</body>
</html>

全然別物になってる件

>>171
ユニバーサルクリアした？

↑めんご
>>170宛

>168
メ欄が気に入らない
情報の小出しが気に入らない
態度が気に入らない

>>152-153
ありがとう。

>>169
ありがとうございました。
やっぱり背景画像ではできないんですね、どうしようかな…。

質問させてください。
今、姉に頼まれてサイトを作っています。
トップページのレイアウトができて仮ＵＰしたのですが、私のＰＣ（ＩＥ６）ではちゃんと表示されているのに、姉のＰＣ（ＩＥ５）ではズレて表示されているようです。
このような場合、どのように対処したら良いのでしょうか・・・
詳しい方宜しくお願いします＞＜

>>182
それだけでアドバイスできると思ってんのか？
とりあえず姉のほめぱげうｐ

>>182
CSSはIE6.0と5.0で違いがあるみたいだね
よく知らんけど

>>183
あほ　スリーサイズが先だろ ?

姉は上付きなんだよ

>>183
2ちゃんに晒すほどの勇気は持ち合わせていません。
ありがとうございました。
自力でなんとかします＾＾

IE5なんて使うな

>187
じゃぁ最初から質問なんかしないほうがいいと思ったのは俺ちゃんだけ？

姉のスペックうｐはまだぁ？

姉は38歳とかだよ

どんと来い　熟女カモン

IEで見ると、行の最後に半角スペースが入ってしまうのですが
これを防ぐことはCSSで出来ますか？
もし、出来るのであればやり方を教えていただきたいです

残念ながらIEではできません。

テキストノードに対応するセレクタはどう書けばいいですか？

<p>
foo<em>bar</em>foo
</p>

の場合foo両方に対応したいです

>>194
CSS3 の否定擬似クラスで

p:not(p > em)

そんなのに対応しとるブラウザーが(ry
って、IE7対応してるみたいじゃん

>>195
答えになってねー
(p直下の子であるem)以外のp

pはemでないので、このセレクタは何にもマッチしない。

>>194
CSSセレクタでは無理。

>>197
そもそも:not()の中に単純セレクタ以外を書けないからセレクタ自体が無効に
なるんじゃない？p:not(em)なら全てのp要素にマッチする。

もっとスマートな書き方あったら教えてください
h1.h:before {
content: counter(head1) ". ";
}
h1.h {
counter-increment: head1;
}
h2.h {
counter-increment: head2;
}
h2.h:before {
content: counter(head1) "." counter(head2) ". ";
}
h3.h {
counter-increment: head3;
}
h3.h:before {
content: counter(head1) "." counter(head2) "." counter(head3) ". ";
}

あと、リストにも同様に counter() 使ってるんですが、通常の list-style-type が表示されてしまうんで、
以下の様にしているんですが、問題無いでしょうか？
ol { counter-reset: item; }
li {
list-style-type: none; /* ← 質問：これでいいの？ */
}
li:before { content: counters(item, ".") ". "; counter-increment: item; }

すいません。なんか初心者スレなのにまったく話が見えないので尻込みしてましたが
あまりにも低級な質問お許しください、まず、CSSを購入し、インストールしたのですが
起動→ロード画面数秒→真っ暗、と、メニューすら開けないまま行動不能になってしまいます。
HL２の方は体験版、製品版共にストレスのない程度の動きはしてくれます。ｆｐｓは４０〜５０
なぜ起動できないのか？また、対応策を教えて戴きたいと思いこのスレを探し当てました
また。CSSスクール、CSS２ちゃんテンプレ、教えてgooなどのサイトを回りましたがこの症状を訴える人はいますが
解決策はみつからなかったです。こんな低級な質問ですが起動すらできない状況が二週間以上続いています。
またメモリクリーン、再セットアップなど試しましたが駄目でした。

>>200
このスレで話されているCSSは
購入するものでもインストールするものでもないので
答えられません、ごめんなさい。

>>200を再インストールすればおk

おいゲーマーが紛れ込んでないか？

すいませんスレ違いもいいとこでした（泣）
ほんとに謝っても謝りきれません
そうですね僕が再インストールされればいいんです。
叩かずに冷静に対応してくれた２０１さん
また、笑い飛ばしてくれた２０２さん
ありがとうございます。
しかもキリ番
すいません僕が間違えたのはカウンターストライクソース略してCSSだったんです
本当にすいませんでした。

>>204
略し方はCS:Sだと思うけど

>>199
それ以上どうしようもないかと。
CSS3でカウンタ定義文とか議論されてた気がするけど、消えたっぽい（？）

リストもそうなるかと。::beforeはリストマーカーではないので。
CSS2.0では ::before=マーカー だったけど、
CSS2.1以降は ::marker(CSS3)=マーカー かつ マーカーとは独立して::beforeも存在する
ので問題なし。

W3Cの CSS Validatorに「エラー 96 Parse error - Unrecognized }」と言われます
フォント名が日本語のものを消してチェックしています
このエラーはどういう問題がある場合に出るのでしょうか？
どうすればエラーを出さずにチェックしてもらえるのでしょうか？

パース出来ないようと言われてるから、
正しく書けばエラーも出なくなるかもしれない。

207です
規制中なので携帯から失礼します
>>208
ありがとうございました
}の数が多かったのが原因でした

>>206
レス来ないと思ってたけど…レスありがとう。

リストマーカーの list-style-type: none; をやると、ieじゃ counter 自体サポートしてないから、
何も表示しないので結局 display: block; にした。

リンクについて質問です。
現在作っているHPでメニューの部分を↓のような感じに、

|―――――――――|
|　　　　　　　　　|
|　TOPへ戻る 　　　|
|　　　　　　　　　|
|―――――――――|

文字の周りをCSSで適用したbackgroundの色で囲っているようにしています。
そこでリンクは上の図でいう「TOPへ戻る」という部分にだけ適用したいのですが、
この枠全体にリンクがかかるようになってしまいます。(余白にまでリンクが適用されている状態)
文字だけにリンクを適用するにはどうしたらいいのでしょうか？
色々調べたのですが、見つからなかったため質問させていただきました。

めちゃくちゃずれてますね。見づらくてすみません。
長方形をイメージしてください…。

>>211
a要素はインラインだから何かのブロック要素で囲ってるだろう。
そっちに背景色を着けろ。

【　　上　　】
【左】　【右】
【　　下　　】

こんな感じに枠を四つ作り、
それらを更に大きな枠で囲んでいます。

その大きな枠にbackgroung-imageを反映させたいのですが、
どうも大枠が縦に伸びないようでうまくいきません。

ページのよって四つの枠の縦の長さが変わる為、
heightで長さ指定するのはNGです。

どうやれば解決できるでしょうか…。
よろしくお願いします。

>>213
わかりました。どうもありがとうございました。

【右】の後に（もしくは【下】）の後に全角スペース挿入することで、
なんとかうまくいきました。

ただ、今後の為に、スペース入れないで解決できる方法あれば
教えていただきたいです。

単に【下】をclearしてないだけじゃね？

>>217
！！！！！！！！！！！

できました…。
どうもありがとう。

div#container {
width: 740px;
height: auto;
margin: 0 auto;
padding: 0;
background-color: transparent;
text-align: left;
}

と書きましたがセンタリングされません。
どうすればよろし？

>>219
IE5.5や後方互換モードのIE6、7ではバグがあってセンタリングされない。
FirefoxやOperaなど他のブラウザではちゃんとセンタリングされます。
詳細は http://www.mozilla.gr.jp/standards/webtips0004.html を読んでください。

>>220
ありがとう！
助かりましたm(_ _)m

h要素の自動連番について質問なんですが、カウンターの初期値を指定していする方法でもっと良い方法はありませんか？
ol要素については li子要素が必須なので、ol要素で初期値を設定できるので問題ないのですが、
h要素についてはリスト要素のような親、子関係がないので以下の様にしていますが…

div.init { counter-reset: head1 2; } /* 自動連番は h1要素を対象に 3 から */
h1.h { counter-increment: head1; }
h1.h:before { content: counter(head1) ". "; }
h2.h { counter-increment: head2; }
h2.h:before { content: counter(head1) "." counter(head2) ". "; }
h3.h { counter-increment: head3; }
h3.h:before { content: counter(head1) "." counter(head2) "." counter(head3) ". "; }

<div class="init"><h1 class="h">あ</h1></div>
<h1 class="h">い</h1>
<h2 class="h">か</h2>
<h2 class="h">き</h2>
<h2 class="h">く</h2>
<h2 class="h">け</h2>
<h3 class="h">さ</h3>
<h3 class="h">し</h3>
<h3 class="h">す</h3>
<h3 class="h">せ</h3>
<h3 class="h">そ</h3>
<h2 class="h">こ</h2>
<h1 class="h">う</h1>
<h1 class="h">え</h1>
<h1 class="h">お</h1>

なんか、こう…私が知らない、セレクタ、他の書き方があったら教えてください。

　　ｱﾁｬｰ・・・

ｱ

>>222
よっぽど変な見出し関係にしてなきゃbodyの初期化でおＫなんだが・・・
よっぽど変な見出しの付け方してるみたいね・・・
多分CSSに手を着けるより、strictスレに出入りしたほうが早いと思われる。

どこが変なんだろう？
俺には解らん。誰か解説頼む。

変

一つのタグの中に2つ以上のクラスって付けられますか？

例えば
<h2 class="animal" class="moe">ネコ</h2>
みたいな感じにです

「複数のclass」でググればすぐ出てくるが、一応回答。

<h2 class="animal moe">ネコ</h2>

>>229
そんな書き方が！何度も出来ないと途方に暮れてました
ありがとうございました！！！！

ググれカス

って言われないようにしようね。

ググれの前に、自分でやってみろよと・・・。

style属性の中にlist-style-type: disc;と入れても黒丸が出ないんですが、
これはなぜなんでしょうか

liかul要素に適用してる？

>233
list-style-position: inside; してみ

というかソースくらい添えろこのちんぼこ野郎

むしろ>>235の頭が大丈夫かと

>236
ほどんと溶けてマス

ほどんって可愛いな。

display: list-item

質問する側も答える側も酷いなｗ
情報小出し質問者に、レベル低い解答者ｗ

最凶だなｗ

初心者スレだからこれでいいんだよ。せっかく棲み分けできてるんだし。

質問です。
IE6で
<sselect>
<option>ああああああ</option>
<option>いいいいいいいいいいいいいいいいい</option>
<option>うううう</option>
</select>

とした場合
いいいいい…が長過ぎる為、途中で見えなくなってしまいます。
FF、safariのように選択した際に全てのテキストを表示するか
長過ぎるテキストを改行させることは可能でしょうか？

調べてみたのですが、<option>内での改行は無理とのことでした。
詳しい方よろしくお願いします。

>>240
過疎ってる上級スレにお帰りくださいｗｗｗ

overflow: scroll;

これじゃ、駄目かもｗ

ジオシティーズで外部スタイルシート読み込みの
<link rel="stylesheet" type="text/css" href="ファイルの名前.css">
と書いても読み込めません…
ジオシティーズ使ってる方はできますか？

>>242
無理。

>>245
ジオ覗いてきたが、普通にみんなつかってるぞ。
単にパス間違えてるとかじゃねーの？

>>246
色々書き直したらできました
パスは間違ってないと思ってましたが…
とにかくありがとうございました

質問させて下さい。
背景を指定する時は以下の記述で何か違いがあるのですか？
色々なテンプレを借りてみたら、三つのパターンがあって気になってます。

background : url('ime/sample.gif')
background : url("ime/sample.gif")
background : url(./ime/sample.gif)

>>248
仕様としてはどれでもいいが、古いブラウザだと認バグで識されなかったりする。
一番下が一番普及してるかな。

画像にclassを設定して、その画像を中央に表示したい時はどうすれば良いのでしょうか？
float：center;
だと、文字が回り込んでしまうので、周りこませずに中央に固定させたいのですが。
どなたかお教えください。

>>249
ありがとうございました

>>250
「画像にclassを設定して」という条件では無理じゃないかな。
その条件抜きなら

<p>text</p>
<div class="figure"><img ...></div>
<p>text</p>

.figure { text-align: center; }

みたいに、ブロックレベル要素の中に画像を入れてtext-alignでセンタリング
すればいいよ。ちなみにfloatプロパティに指定できる値は'left', 'right',
'none', 'inherit'だけで、'center'はありません。

>>250
　/* CSS・スタイルシート質問スレ 上級者用【70th】
http://pc11.2ch.net/test/read.cgi/hp/1199354032/
ここのテンプレに書いてある。

>>252-253
画像へのclass設定では無理のようですね。
<div>で設定するのも面倒なので、
素直に<p align="center">を使っていきたいと思います。
お答えいただき、ありがとうございました。

img.className {
display: block;
width: 画像の幅px;
margin-right: auto;
margin-left: auto;
}
とは違うの？

body {
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
p {
text-align: left;
}

初の書き込み失礼します。
今サイトを作っているのですが、文字が自動で改行してくれなくてレイアウトが崩れて困っています。
ソースはこんな感じです。

#wrapper{
width:800px;height:500px;border:solid 1px #c9c9c9;}

#left1{float:left;width:200px;height:500px;}

#main{float:left;width:600px;height:500px;}

#right{float:right;width:200px;height:500px;}

<div id="wrapper">
<div id="left">
</div>
<div id="main">
　<p>テキストテキストテキストテキスト</p>
</div>
<div id="right">
</div>
</div>

こんな感じなのですが、<p></p>間のテキストが自動改行してくれなくてレイアウトが崩れてしまうんです･･･
何か良い方法を知っている方はいらっしゃいませんか？

まずwrapperが800pxなので200px+600px+200pxは入らない。
IE6の互換モードではwrapperの内寸が798pxしかないのでleftとmainも入らない。
left1というIDが存在しない。

最も使われているブラウザだけど、最もレンダリングがオカシイブラウザは基準にしない方がいいよ。

ありがとうございます。
今晩帰宅したらpxの調整してみます！

>>255
margin-right: auto;
margin-left: auto;
は上級スレで見てきて試したのですが、ダメでした。
指摘された「display: block;」を入れても残念ながら中央に寄りません。

>>256
奇麗にタグを書いてこなかったこともあり、pタグが閉じられていなかったりなど問題があり
教えていただいた方法を使うのは難しい状態です。

もともと画像にリンクをすること前提だったため、
リンクの方にクラス設定をしてそこにblock入れるとなんとか中央に寄ることができました。
display: block; について知らなかったため、みなさんの教えが大変役に立ちました。
ありがとうございます。

ユーザーによって大きさを変えられるように
文字サイズを相対指定したいんですが、、、

％とemの違いが分かりません。

何が違うんでしょうか？
どちらが推奨だとかはありますか？

どっちかというと font-size だったら % 推奨
firefox, opera は .1 刻みで単位を em 指定しても、ちゃんと大きさ変わるけど ie6 だと全然駄目。
ie の事考慮する必要なければ em でもいいんじゃね？

IE6もあと少しの命だしな

>>262
仕様としては、font-sizeプロパティに対するemも%も親要素の
font-sizeプロパティの値を参照するので、特別な違いはありません。
もちろん他のプロパティでは、参照するものが違う(例えばwidth)
とか、片方しか指定できない(例えばborder-width)とか、違いがあります。

>>261
<p>text
<img style="display:block;margin:auto" src="hoge" alt="hoge">
text</p>
標準モードのIE6,7,Firefox2,Opera9ではこれでうまくいったよ。
後方互換モードのIE6はだめみたい。

P要素の中にブロック要素を入れてはいけない

>>267

夜の一本釣り乙ｗ

>>267
一応マジレスしておくと、display:blockが適用されたimg要素はCSSの上では
ブロックレベル要素になるが、HTMLでは以前としてインライン要素なので、
何も問題ない。CSSのdisplayプロパティでHTMLの要素の種類や意味合いが
変わることはないよ。

どこで質問すればいいか迷ったんですが
適切な場所があれば誘導お願いします

フォントを指定した場合、欧文書体,MSゴシックと指定したのですが
これだと三点リーダが...←こうなってしまいます（火狐使用）
…←こう表示されるようにするには、欧文書体を指定しないようにするか、
…←を使用する場合にはこの部分に日本語書体を別に割り当てるしか道はないんでしょうか

>>271
中点を3つに置換する

>>271
そう。だけど閲覧者はそんなもの気にしちゃいない。

>>272-271
ありがとう、やっぱそうか……
まわりはさんてんりーだに煩い人ばかりなので、
本文はゴシックのみとかで対処しますです。

ニコニコ動画のcss覗いてみたらこんな記述があったのですが

font-family:osaka,MS Pゴシック,arial,helvetica,sans-serif;

ＭＳ Ｐゴシックの表記はこれでいいんですか？
"MS Pゴシック"と半角で指定しても大丈夫なんでしょうか。
まあ、WindowsでOsaka入れてない限り関係ないかもしれませんが…

それ以前にスペースを含んでいるのに引用符でか括ってないのがよくない。
これで認識してくれるブラウザは親切 or 余計なお世話。

MSPゴシックのフォント名は、日本語名"ＭＳ Ｐゴシック"
SとPの間のスペースだけ半角であとは全角。
英語名なら全部半角。

<li>abcdefg<br />xyz</li>

と、あって xyz の部分にだけ適用したいように書くにはどうしたらいい？
li::first-line 擬似要素で abcdefg にプロパティは適用できるけど、
xyz の部分にだけプロパティを適用させる書き方が解らない…

要は li 要素の中の1行目以外に適用させたいんだが…

spanで括るんじゃダメなの？

abcdefg の所に <span>が要素が入っている場合もあるんだ…
でさ、できれば html は弄らないで css で何とかならないかなーって…

ていうかそのhtmlはむしろ弄った方がいい。
なんだそれ。spanも変だけど。

>>267
なるほど、ありがとうございます。
大手サイトでも結構適当だったりするんですね。

すいません>>281は>>276様へのレスです…間違えました

>>277
li全体にxyzに適用させたいcss書いて
li::first-lineでabcdefgの部分を元に戻すのはどうよ

280みたいなのたまに沸いてくるけど、こういう奴に限って何も根拠示さない（示せない）な

むしろそのHTMLでいいという根拠がない

CSSの表示例のためのHTMLを添削してもらっても…
そういうハイレベルなのは上級スレでやってくれ

教えてつかーさぁい

<div>
<p style="folat: left;">あいうえおかきくけこ</p>
<p stylle="margin: 0px 0px 0px 200px;">さしすせそたちつてと<br />
なにぬねのはひふへほ</p>
</div>

とかやった時にIE6だと右側に表示される<p>タグ内の一行目の頭が
若干だけ右ズレるのですが理由と解決策を教えてください。
FFだと二行目と同じ様にきちんと揃って表示されます。

stylle って何？
俺の知らない新しい属性か？

styleの間違い

>>285 どうせ、言えないと思うけど、理由は？

>>287
IE6のバグ。たぶんフロートすると3pxがどうのこうのっていうやつ。
(http://www.positioniseverything.net/explorer/threepxtest.html)

↓で直ると思う。
<p style="margin: 0px 0px 0px 200px; zoom:100%">

>>291
ありがとうございますー！！
早速やってみます。

不明なプロパティ 'zoom' が使用されています。このスタイル宣言は無視されました。

zoom:100%はIE以外のブラウザではCSSのエラー処理規定に従って無視される
から問題ないんだよ。知っているとは思うが、一応。

IEで表示がおかしいときのおまじない＞zoom:1;

すみません　
<p>だとborder内の余白をpaddingで狭められるのですが
<h1>だと狭めれません
どうしたらいいのでしょうか　

cssで
a:visited{color:#3366FF;}
として
<a href="xxx.html#top" target="xxx">
というふうにフレーム指定と#で位置指定させた時、
訪問済みリンクが一度は指定したとおりに既リンク色に変化するものの、
IEをもう一度起動させると未リンクの色に戻ってしまいます。

いろいろためした結果#での指定とtarget指定を同時にやるとなるみたいです。
このようにターゲット指定と#での位置指定を使ってvisitedをきちんと動作させる方法はありますか？

よろしくお願いします。

>>296
* {margin:0;padding:0;}

＞298
できました。　ありがとうございます。
それなしだと　border-leftと-right だと狭められるのに
-topとbottomだと広がってしまうのですね〜　不思議。

>>299
borderとmarginとpaddingの違いを理解してくださいね♥

>>297
IEはパラグラフの解釈がおかしい。諦めろ

あるボックスの中に画像を複数入れて、その画像がすべて同じサイズでborderも0にしたい場合、
外部CSSに共通の属性と値を記述してHTML内の<img〜をすっきりさせるのって正しいのでしょうか？

#box1 { width: 150px; height: 300px; }
#box1 img { width: 100px; height: 100px; border: 0; }

<div id="box1">
<img src="gazou1.jpg" alt="画像1">　←ｽｯｷﾘ
<img src="gazou2.jpg" alt="画像2">　←ｽｯｷﾘ
</div>

>>302
CSSがどうだろうとHTMLの文法は変わらない。

>>303
borderはともかくwidthやheightは装飾じゃないってことなのね。
わかりました。どうもありがとうございました

てかwidthもheightも必須じゃないからなー
書きたくなければ書かなくていいんじゃない？

>>302
別にいいと思うよ。ただ、表示させる画像の大きさが元のサイズと違うなら、
HTMLにwidth,height属性を書いておいたほうが、CSSオフでも同じ大きさで
表示されるので、安心かもしれない。あと、Safariにはimg要素にwidth,
height属性が指定されていないと、画像が表示できないときにalt属性の
文字列が表示されないというバグがあるらしいので、それに対応する意味も
あるね。

質問させてください。
働き始めた会社がテーブルレイアウトばかりしてるのですが

テーブル使わなくてもいいトコロはCSS使おうという事になったんです。
しかし、諸事情でstyleタグだけを使ってCSS指定しようという事なんですが
SEO的にはテーブルレイアウトと大して変わらないですか？

外部ファイルもヘッダーに記述もできなくて
タグにのみ直接CSSを指定するんです。
テーブルレイアウト同様、ソースが長くなるのでかなり抵抗があるのですが…
どうなのでしょうか？

Googleに聞け

>>307
あまりスタイルシートの意味なくない？

>>307
個人的な感覚ではテーブルレイアウトでもCSSレイアウトでもそんなに
大差ないかな。どっかのページにあった(URL失念)専門家によるSEO要素の
ランキングでも、title要素内のキーワードなどに比べて、CSSレイアウト
によるSEO効果はかなり低く評価されていたよ。

それより、メンテナンスのしやすさなどでCSSの導入を考えたほうがいいんで
ないかな。SEOのために部分的にテーブルレイアウトをやめるのって、あまり
意味がないような。

教えて下さい。
サイト全体を画面の中心にしたいのですが
margin:5px auto;
と書いても中央表示できません。
分かる人はいるでしょうか？
宜しくお願いします。

>>311
標準準拠モードにしないと効かない

標準準拠モードとはなんでしょうか？

ヒント出してくれたんだから
それを手掛かりに調べるくらいしようぜ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ではだめですか？

インターネット上で中央表示されているサイトのソースをコピーして
パソコンに保存して開いても中央表示になりません。
何故？？？

その他が間違えてるんじゃねーの

htmlで<div>で全体を囲んだとこをcssでmarginでauto使えばいいだけじゃないの？？？

text-align:center;でできました。
･･･が、全てが中央に寄ってしまいます。
cssファイル
*{
padding:0px;
margin:0px;
text-align:center;
}
#site{
width:750px;
text-align:left;
margin:5px auto;
}
ではもどりません。
どうすればいいでしょうか？質問ばかりですが宜しくお願いします。

text-alignでできるということは、標準準拠モードになってない。
まずそこから見直せ。

できました。ありがとう。

>>319
text-align:center でブロックボックスがセンタリングされるのはIEのバグです。
http://www.mozilla.gr.jp/standards/webtips0004.html を読んでみてください。

* { text-align: center }があると、#siteの中にあるブロックレベル要素に
text-align:centerが適用されてしまうので、#siteからの継承が行なわれず、
テキストが中央に寄るはず。IE 5.5対策にtext-align:centerを指定するなら、
#siteの親要素に指定したほうがいい。↓

body { text-align:center; }
#site{ width:750px; text-align:left; margin:5px auto; }
<body>
<div id="site">
<p>テキスト テキスト...</p>
</div>
</body>

遅いし

>>322
ありがとうございます。一応できたのだけど
HTML内にcssを書く場合はbodyに書けばいいと思うのですが
外部にcssファイルを置く場合には＊じゃないと無理かと思うのですが
どうなんでしょうか？

>>324
別に、HTMLでstyle要素を使っても、外部CSSファイルに書いても、問題ないよ。
外部CSSではbody { text-align:center }が使えないなんていう特例はない。

というか標準モードにできたのに
どうして互換モードでtext-alignでやらせようとするんだｙｐ

px 厨 ktkr ！！１１

>>305 >>306

返事おそくなりました。ありがとうございます。
とくにsafariの件は参考になりました。念のためwidth,heightはちゃんと書くようにします。

<h1>title</h1>
<ul>
　　<li>menu</li>
</ul>

* { margin:0; padding:0; }
h1 { background:#eee; }
li { display:inline; background:#eee; }　

こんな状態のときに、firefox2.0.0.1で見ると、h1とliの間に1pxぐらいスペースが開くんだけど、これは仕様？
久しぶりにcss書いてあれ？と思った。以前のバージョンではこんなスペース開かなかった気がするんだけどなぁ。

あと、liにpadding:10px;とかやると、h1と重なってしまうんだけど、以前はliがいくら大きくなっても対応して
他の要素と重なることなんてなかったはずなのに、、、。

>>329
Firefox 2.0.0.11では再現しなかったので、マイナーなバグと思われ。

こちらで質問して良いのかわかりませんが、
ＣＳＳを弄ったら思った通りの動きをしたので
こちらで質問させていただきます。
ｽﾚﾁなら誘導お願いします。

http://www.free-movabletype.jp/10templete/

こちらで配布してるテンプレートを試しに入れてみたところ、
スクロールがもっさりしました。
なんでかわからず、とにかくサイトに連絡してみたんですが
何が原因かわからない様で、自分でググったりして
fixedが原因かもと思いコメントアウトしたらスクロールは
スムーズになりました。

ですが、この配布してるサイト自体もfixedを使っているんですが
スクロールがもっさりしたことはありませんでした。
何がどう違って、何が影響してるのかググったりもしてるのですが
ヒントになるサイトを見つけられませんでした。

何故fixedを有効にしてても大丈夫なのか、テンプレートの方は何故ダメなのか
知りたいと思い質問させていただきました。

サイトの方にはfixedをコメントアウトしたらもっさりしなくなったと
伝えたのですが、明確な改善案はまだされないので
おそらくサイト側も何が原因かわからない状態なんだと思います。

わかる方いらっしゃいましたらよろしくお願いいたします。

　断る！
他人のテンプレート訂正に手を貸すつもりは無い。

>>331
　　　　　　　　　　　 し
　　　　　　り　　　　　　　　　　ま
　　 断　　　　　　　　　　　　　　　　　す
お　　　　　　　　　ま 　　す 　　　　　　　お
　　　　　　　し 　　　　　　　　！
　　　　　　　　　　　　,ﾊ,,ﾊ　　　　　　　　断
　　　　　 り　　　　　（ ﾟωﾟ )
　　　　　　　　　((⊂ﾉ 　　ヽつ ))　　　　り
　　　　　　断　　　　（＿⌒ヽ
　　　　　　　ε≡Ξﾉノ ｀J　　　　し
　　　　　　　　　お　　　　　　ま
　　　　　　　　　　　　　す

>>331
'fixed'というのはbackground-positionプロパティに対して？
それともpositionプロパティ？重くなるテンプレを使ったページを
見ないことにはわからないが、'fixed'だけでなく使用している画像の
数やサイズなども関係しているんじゃないかな。

>>330
さきほど2.0.0.12にアップグレードして試したけど、やはり1px空く。
そしてpadding:10pxをliに指定すると、h1と重なってしまう。

>>334
スタイルシートを見ると

background: url("monster-img/gra.png") top center no-repeat fixed;

となっています。
以前自分でブログデザインをしたときももっさりしたので
（確かその時もfixedを使っていました）、fixedが原因だったのか
と思ったんですが、あれこれ見てるとそればっかりでも
無いようなので何故かなと疑問に思った次第です。

ちなみにテンプレは配布元にfixedをコメントアウトして使用する旨
を伝えており、許可も出てるのでこれはこのまま行くつもりです。

ともかく
スクロールがもっさり
とかよく判らない表現はやめてほしい。

>>336
閲覧者がもっさりで苦労しようとデザイン優先ってか。最低だな。

>>338
>>336はfixedをコメントアウトしてもっさりを解消したんでしょ？
背景画像を固定するとスクロールが重くなるって他でも聞いたことある気がする

何でこういうマルチカラムのデザインってUAの幅狭くしたら水平スクロールバー出るの？
相対的にUAの領域に合わせたデザインできないの？

>340
そこまで気を遣えるのはこのスレに来ないだろ

でも3カラムで幅可変でUA幅狭くしたらメインの幅が狭くなるのは嫌じゃね？
サイドバーだけ幅変わんなくてメインが凄く見難い。
結構こういうカラムの組み方してるとこ見るんだけど…

>>335
Firefox2のバグ（仕様？）っぽい。
1pxだけだったからborderの分かと思った（border:1px solidで指定すると丁度隙間がなくなる）けど
font-size変えると幅が変わったりするから特にはそういうわけでも無いらしい。
margin:0,padding:0,border:0いずれも効果無しで特にこれと言った対処方はすぐには思いつかんね。
ちなみにIE6,Opera9では隙間は空かず、win版Safariだと下にだけ隙間が出来た。

インライン要素の上下のpaddingが行の高さの計算に影響しないのはCSSの仕様っぽい。
以前は〜って言うのはたぶんブロック要素のまま表示してたときじゃないかね。

どちらもまとめて解決できそうなのは下みたいなのか。
ul { list-style-type: none; }
li { float:left; background:#eee; padding:10px;}
リストの次の要素でclear:leftを忘れずに。

1ページ目-----------------------
<div id="contents" class="page01">内容1が入る</div>

2ページ目-----------------------
<div id="contents" class="page02">内容2が入る</div>

と書いて、class別でページごとに背景を変えようと思い

div#contents.page1 {background:（1ページ目の背景画像を指定）;}
div#contents.page2 {background:（2ページ目の背景画像を指定）;}
〜以下ページごとに指定が続く〜

と指定しても、
→IE6では二つ目に指定した画像まではちゃんと表示
　それ以降は一つ目に指定した画像が表示される
→IE7　全ページちゃんと表示される
→Firefox　画像そのものが表示されない
となっていて、実に困る。

多分私のCSSの理解が間違えているのだと思うのだけど
誰か指摘して下さいませんか。id="contents_page1"とか
ビーンボールは投げたくありません。よろしくお願いしますm(_ _)m

div#contents.page1 {background:（1ページ目の背景画像を指定）;}
div#contents.page2 {background:（2ページ目の背景画像を指定）;}
↓
div#contents.page01
div#contents.page02　です

書き間違えました、ごめんなさい

>>344-345
それで問題ないと思うんだけど
元のほうでどっかタイプミスとかしてるんじゃねーの

自己解決しました…
レスで書いた箇所は関係ありませんでした
floatを含んだボックス云々で高さがちゃんと算出されず
表示されてなかっただけみたいです。

height:100%　とか入れて浮かれてました。
overflow: visible; とか書いて調子に乗ってました。

参考：http://www.geocities.jp/multi_column/float/05.html
関連　overflow:auto

>>346
レスありがとうございました。
セレクタの書き方とか、間違えてなったのがわかったので
それだけでも助かりました。

スレ汚し失礼しましたm(_ _)m

id にピリオド（.）使ってるし…(;´Д｀)

夜釣り乙

>>338
339さんの仰るとおりうちではコメントアウトして
背景固定は解除してます。
まだテスト段階ですので公開はしてませんが。

知りたかったのはfixedを使ってもスクロールが
スムーズになる場合とならない場合があるので
その理由です。
何か相性の良くない組み合わせでもしてるんでしょうか？

relativeとかopacityとか
要するに処理が面倒臭いのは全部重くなる

サイドメニューのコメント欄を5件表示（現在は10件表示）に変更し、
6件目以降は『＞＞続きを読む』という表示に変更したいのですが
cssをどの様に弄れば宜しいでしょうか？ご教授よろしくお願いします。

スレ違いと言うか、板違いだな。

>>352
それは多分ブログの設定で変えられる。ブログ板の該当スレで聞くといいよ。
CSSではどうにもできない。

>>353-354　�dです
ブログ板で聞いてみます。　

質問ですが、
ThickBoxのライブラリは商業サイトで使って問題ないですかね？

な　ぜ　こ　こ　で　聞　く
作者に家

英語だらけでよう分らんとです(´・ω・`)

>>358
英語を勉強しろ。
そしてJavaScriptを勉強しろ。

>>356
「MIT License/GNU License」とあるのでOKなはず。

>>360
内容見ないとダメだが

>>360
どうもです。
とりあえず大丈夫かもしれないけど一応英語出来る人に確認させて
と言って先方に出しときます

仕　事　か　よ

<A>タグのスタイルを指定してしまうと、
classで一部の<A>タグだけ別の属性にすることできないんですか？
出来なくてこまってます

できる。何か間違えてるだけだろ。

どのスレで聞こうか迷ったのですが、教えてください
px単位で指定したwidthの値をJavaScrptで取得しようと、以下のようなコードを書き

document.defaultView.getComputedStyle(element, null).getPropertyValue('width');

標準モードでFirefox, Opera, Safariで確認したのですが、
Opera (v9.25) のみ、paddingとborderを含んだ値が返って来ます
まるで互換モードのような感じなのですが、これはOperaの癖なのでしょうか？

>>365
はい。間違えてました。
解決しました。ありがとうございました。

>>366
スレ違い

>>368
失礼しました
JavaScriptスレに逝ってきます

単位を pxで指定、しかも javascript使用…
さすが初心者スレｗｗｗｗｗｗｗ

そのための初心者スレだろ。
間違っていると思うなら正してやれよ。
出来ないなら消えろ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
#div1 {
margin: 0;
padding: 0;
background-color: #afa;
}
#div2 {
width: 100px;
margin: 10px;
background-color: #f00;
}
-->
</style>
</head>
<body>
<div id="div1"><div id="div2"><span>テスト</span></div></div>
</body>
</html>
これで id="div2"の上のマージンが、親要素 id="div1"を突き抜けるのは何でですか？

┌──┐
│■□│
└──┘

大枠の中にふたつのボックスがあり、
■の中には、毎回縦の高さの値が変わる画像が入ります。

┌──┐
│■□│
│■ 　│
│■ 　│
└──┘

┌──┐
│■□│
│■ 　│
└──┘

□の高さを、■の画像の高さと合わせるにはどうしたらよいでしょうか？
ちなみに、大枠の高さも、■の高さによって可変にしたいのです。
どなたかお教えいただけるとありがたいです･･･

>>373
js使えば幸せになれる

詳しくはwebで

>>372
そういう仕様だから。

>>374,375
即レスありがとうございました。
テーブルでの作成も視野に入れて、まずはjsでのやり方をググってきます。

単にそれっぽくしたいなら、背景をy方向に繰り返しかな

>>372
マージンの相殺というルールがあって、隣接しているマージンは一つにまとめ
られて、値が最も大きいマージンが適用されるようになっています。
#div1にパディングとボーダーがないので、#div1と#div2の上マージンが隣接
しており、マージンの相殺が発生しているわけです。

参考→http://www.techdego.com/2007/05/margin_collapsing_css.php

>>375
仕様なのですね
あれから調べてみて、height: 1px を指定してみたら
IEだけは自分が想像したように動いてくれたのですが、
これはいわゆるIE独自の解釈なんですね

>>378
相殺というルールを知りませんでした
勉強してみます

どうもありがとうございました

？
372と373が別人だったのなら
376はなぜ375に礼を言ってるんだろう
勘違いしてる悪寒

いま気がついた･･･
恥ずかしすぎて、勃起がとまりません。

>>381
(*･ω･)ﾍﾝﾀｲ!

すみません、聞きたいのですが

webページを印刷するときって、ページや表などの背景の色ってブラウザの設定を変えないと印刷されないと思うんですが
どうしても背景を黒で印刷したい表があって、なんとかブラウザの設定を変えずに背景を印刷する方法を考えています。

よく、スタイルシートを使って背景を印刷しないようにする方法は見かけるんですが、
逆に背景は印刷しないという設定になってるブラウザでも、スタイルシートなどを使ってきちんと表の背景を印刷させる方法ってないでしょうか？

１．見てる奴全員のブラウザの設定を変えてまわる。
２．WindowsでIEなら、そういうActiveXをインストールさせる。インストール拒否した奴、Windows、IE以外は締め出す。
３．諦める。
４．IEの設定を変えるウイルスをばらまいて犯罪者になる。

以上いずれか。

　　　　　メニュー
→○○○　→○○○
→○○○　→○○○
→○○○　→○○○
→○○○　→○○○

　　　　　メニュー２
→○○○　→○○○
→○○○　→○○○
→○○○　→○○○
→○○○　→○○○

→はイメージ
こんなかんじに横に並べるにはどうしたらいいですか？
float をいじればいいのでしょうか？

インラインレベル要素に potision: absolute を指定すると、
width, height が適用できるようになりますが、
暗黙的にブロックレベル要素になっていると考えてよいのでしょうか

インラインレベルとかブロックレベルとか、その「レベル」って何？

ﾜﾛﾀｗ

>>どうしても背景を黒で印刷したい表があって、なんとかブラウザの設定を変えずに背景を印刷する方法を考えています

この発想が既にダメ

>>383
そんな表、インクがもったいなくて印刷したくないよ

ブログでのCSSの質問はこちらでよろしいでしょうか？

内容にもよるんじゃね？
「〜なCMSツールでのページで〜したい」てんなら該当CMSスレに誘導されるとか。

>>386
簡単に言えばそう。詳しく知りたいなら
ttp://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo とか
ttp://d.hatena.ne.jp/elm200/20080201/1201874740 を
読むといいと思う

391です。とりあえず質問内容を書くのでスレチならスルーして下さい。

ココログを使って、ブログをやっているのですが
ココログだと真ん中の記事が表示される場所に
「最近の記事」というカテゴリーをうｐすることができないません。（ちなみに
これは本来サイドバーに表示されるものです）
CSSを使えば記事を表示するのと同じ場所に表示できますか？

>>394
HTMLのソースがどうなっているかによる。

>>395
そう言ったのはまったく分からないのですが・・・
まだこのスレにくるには早過ぎましたかね？

板違いだな

スタイルシートのみでの「ロールオーバーで背景色が変わる」もしくはボーダーがつくやり方について質問です。
リンクを設定したテキストの背景だけではなく、他のテキストを含んだtestの領域の背景をロールオーバー時に変化させたいのですが、これは可能でしょうか？

<div class="test">
</p>テキストはここにもあります。</p>
<a href="#" class="test">リンクを設定しているテキスト</a>
<div class="aaa">ここのテキストはdivで囲われたりしています</div>
</div>

スタイルシート
.test{ width:200px; height:150px; }
a.test{ width:200px; height:150px; }
a.test:hover{ width:200px; height:150px; background-color:#333; border:1px; }

書き直しです
<div class="test">
<p>テキストはここにもあります。</p>
<a href="#" class="test">リンクを設定しているテキスト</a>
<div class="aaa">ここのテキストはdivで囲われたりしています</div>
</div>
スタイルシート
.test{ width:200px; height:150px; }
a.test{ width:200px; height:150px; }
a.test:hover{ width:200px; height:150px; background-color:#333; border:1px; }

>>399
IE以外のモダンブラウザではa要素以外への:hover指定も可能（IE7が対応してるかどうかは不明）
そのCSSではa要素の:hover指定しかしてないから
.test:hover {
border: 〜〜;
background: 〜〜;
}
で対応ブラウザでは class="test"の領域がホバー時に変化すると思う

>>393
提示していただいたURL、とても参考になりました
どうもありがとうございました

http://3d.skr.jp/3d/
このタイプの掲示板をなるべくCSSに置き換えれる部分は置き換えようと思っているのですが
レスを付けると画像を迂回するようにレスが設置されていく表現はCSSでは難しいでしょうか？
画像部分、投稿時のコメント部分、レス部分とすべて<div>で囲んでいるのですが。

そうか。

簡単にブログが作れると宣伝→とりあえずライト層が集まってくる
　→俺様の思い通りにしたいからなんとか汁→初心者スレ

って流れなのか。html知らずにブログできる時代なんだなぁ。

┌──┐文字文字
├画像┤文字文字
└──┘文字文字文字
モジモジモジモジモジモジ
モジモジ

ってしたいってこと？
だったら、画像にフローとを指定すればいいんじゃね？

>>404は>>402へ

>403
小野田さんかよ

>>404
あ、そうか、今画像と画像サイズ情報などをdivで囲ってたから
float指定してもそのようにならなかったのかな。
試してみます。

すいません教えてください。

<table>の<tr>に :hover 指定して横一列をマウスオーバーで色変更したのですが、
なぜかIE6だけで色が変わりませんでした。

ググってみたらいろいろなやり方があるので試したところ、
jsを使ったりすればIE6でもできるようになりましたが
今度はブラウザで警告メッセージが出るようになっちゃいました。

この警告メッセージが出ないようにIE6で効果がでるようにするにはどうしたらいいですか？
よろしくお願いします。

1カラムのレイアウトで、縦が100%のを作りたいです。
スクロールできないほど少ししか内容がないときに、下が空いててかっこ悪くなるからです

.main {
padding:1px 0px; margin:-1px auto;
width:500px;
height:100%;←
background-color:#ffffcc; }

Firefoxではちゃんと下まで出るんですが、IEでは下が空いたままです
説明下手ですみません、どうしたらいいですか？

最近ＣＳＳはじめたばかりの初心者です。
お世話になってる「CSS 2chテンプレ」さんのサイトに武器の名前を正式名称に戻す方法が載ってるんですが、
説明通りにやっても武器名が変わりません。
２度やったんですが、変化なしでした＞＜情報が古いんでしょうか？
他のサイトでも調べたんですが、ＣＳ１などの古い情報しか見つかりませんでした。
ご調教よろしくお願いします。

>>408
IE6はa以外のhoverに対応していない。

>>409
親要素の高さの明示が必要。

>>410
板違い。

ゲーム内で見た他人のスプレーのキャッシュはどのフォルダに残るのでしょうか？
見方も良かったら教えてください

>>411
ありがとう
でもできない。
ごめん、もうちょっと詳しく教えてくれるとありがたいです。

<div id="main">
文
</div>

でスタイルシートはさっきのとおりなんだけど、

<div id="my_body">
<div id="main">
文
</div>
</div>

でmy_bodyのとこのスタイルシートにheight:100%;ってやりました
どこが間違ってますか？すみません

>>408
ローカルなら
インターネットオプション→詳細設定→マイ コンピュータのファイルでの
アクティブ コンテンツの実行を許可する
をチェックする。

>>409
* { margin: 0; padding: 0 }
html { height: 100% }
body { min-height: 100% }
* html body { height: 100% } /* IE6のバグを利用 */

>>414
できない…
オレ馬鹿すぎ…本当に申し訳ありません
情けないです
こんなオレにまだ付き合ってくれる方いましたら
すみませんが教えて下さい

>>413
>>411ではないんだけど補足。heightプロパティをパーセントで指定する
ときは、親要素の高さをheight:100pxのように指定する必要があります。
高さは基本的に内側から決める仕組みになっているので、例えば
<div id="my_body">
<div id="main">
あ<br>い<br>う
</div>
</div>
なら「#mainの高さは3行文→#my_bodyの高さは#mainと同じ」といった感じ。
#main { height: 100% }と指定しても、外側の#my_bodyの高さが決まって
いないと、何を基準にパーセントを計算するのか決定できないので、
height:auto(もしくは無指定)と同じように表示されてしまうというわけ。

できました
みなさん本当にありがとうございました
親切な方ばかりで本当に感謝の気持ちでいっぱいです

>>416
heightでパーセント使うときは
画面の大きさが基準だと思ってました
とても理解できました、ありがとう

>>412
それってカウンターストライクって言うFPSゲームのことか？

>>418
ゴメンなさい、スレ違いでしたorz

#Wrap {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#01 {
background-image: url(image/01.gif);
height: 200px;
width: 1000px;
}



<div id="Wrap">
<div id="01"></div>
</div>

id=01の背景画像が表示できません。
試しに背景色を設定してみたところ、これも反映されませんでした。
どうすれば、画像を表示できるようになるのか、どなたかご教授ください。

>>420
数字始まりのIDは禁止。英字で始めてください。

>>421
即レスありがとうございます。
ご指摘の部分を直しましたら、うまくいく来ました。
ほんとうにありがとうございました。

idの意味を理解してないのカナ？

IDと言ったら普通数字だと思うでしょう。
一般的感覚とずれてるエライ先生方が仕様を決めるからこうなる。

>>424
ぇ？
ID = 数字 という発想が普通なのか。
ID = 半角英数字、No = 数字だと思ってた。
…とは言えも数字から初めてはいけないなんて知らなければ知らないな。

一般的には数字でも（無論文字でも）おかしくないとは思うが、
普通は数字という発想はおかしい。

>>106
近所でとある殺人事件があった時、文房具屋の主人にインタビューしてたマスコミが、しきりに
目撃証言のあった白いバンを見なかったかと聞きまくり、「白いバンなんか、止まってなかったぞ」
とウンザリぎみに言えば「白いバンの事を話さないと、犯人をかばう文房具屋って報道しますよ」と
言われてブチ切れ、脅迫されたと警察を呼ぶ騒ぎになった。
その後捕まった犯人は、現場まで徒歩で来ていて、しかも所有している車も黒い色だった。

どこの誤爆だよｗ

企画力
↓
デザインセンス
↓
ソフトウェア操作能力
DreamWeaver
　↓　　　　　　　　　　　　　　　　　
ブラウザ毎の表示の差の知識　　　高レベルなプログラム能力
　HTML→XHTML→CSS→SEO→JavaScript→DOM→AJAX
　↓　↓
　↓　プログラム能力・データベースの知識
　↓　PHP+MYSQL
　↓　↓
　↓　更なるプログラムへの知識
　↓　PEAR→SMARTY
　↓
デザイン能力・色彩能力・ソフトウェア操作能力
フォトショップ・イラストレーター
　↓
アニメーション作成能力・プログラム能力・ソフトウェア操作能力
フラッシュ→ActionScript

他、サーバー、ドメイン管理、セキュリティーへの注意能力、最新技術への知識



WEBデザイナーすごすぎ！

全部で金取れるレベルの神も稀にいるが、普通はそこまではいけないよなぁ…

ttp://www.stylish-style.com/csstec/hi-level/print-css.html
ここのように印刷用でメニューバーを非表示にしようと、
たとえばprint.cssをlinkして、<h1>の中をnoneで非表示する。それで印刷時は表示されない。
というふうにできたんですが、
<h1>で囲んだ場所の文字が、ＰＣで見ると最大の大きさ、太字になります。

たぶん必要ない提言のことしか手を出せてないから、なにか足りない・・・とは思うんですが
ぐえー

あ、すまん自己解決
Ｈ１ってだめじゃないかおれ・・・
すまない、これはすごい恥ずかしい

まぁ．．．成長しろな

>432
一時の恥は耐えろ
おかげで一つまず忘れない事項ができたじゃないか

とある場所に<font color="red">hoge</font>
としてもテキストが赤にならないのですが
たぶん、どこかで<font>タグを無効にするような
CSSが指定されていると思うのですが
そういうことのできるCSSとはどんなものがあるでしょうか？

>>435
* { color: black }
とか
font { color: black }
とか

font[color] { color: black; }

>>436, 437
あざーした！みつかりました！

ちと教えてくれー
Win IE6にも<tr>でテーブルの横一列に:hoverを効かせるための
CSS内に埋め込むjsコードがあったと思うんだけど、
だれかそのサイトのURL知らないかなぁ？

ブックマークしてあると思ったんだが入ってなかった…

なんでJSのことをCSSスレで聞くんだ

検索したらすぐ解ったけどな…

ほれ
tr {
　onmouseover: expression(
　　this.onmouseover = function() {this.style.backgroundColor = 'blue';}
　);
　onmouseout: expression(
　　this.onmouseout = function() {this.style.backgroundColor = 'transparent';}
　);
}

何onmouseoverとか。いくらIEでもそんなプロパティ無いっての。

onmouseover に一致する日本語のページ 約 562,000 件

あ、ここcssスレか
上の書き込みは無視してくれ

テーブル(td)内でマウスを動かすと背景色が変化して、
クリックをすると背景色が固定にできるよなことはCSSではできるでしょうか？
過去にオンマウスをつかってやってたことはあるんですが。（かっこ悪くて；；）
もしよろしければ方法をアドバイスお願いします。


下記のサイトは、クリックしたときは背景色の固定はできないですが理想に近いです。
参考
ttp://www.encount.net/
cssソースファイルを複数読み込ますって流行ってるんですか？？

>>446
参考サイトはtdの中のa要素にa:hoverで背景色が変わるように指定してる。
td:hoverでも出来ないことはないけどIEが対応してないのでa:hoverを使うほうがいいかも。
CSSファイルを複数読み込むのは流行とかじゃなくそのサイトの規模やメンテナンスの効率を鑑みてやってる場合が多いと思う。
利点を感じなければ1つのCSSファイルを読み込ませればいい。

>>446
>クリックをすると背景色が固定
リンク先のページに同じメニューを書いて、背景色を変えたいところだけに
<a href="..." class="current">
a.current { background-color: ... }
みたいな指定を行うとか。ページ移動せずにというのは、現在のCSSでは無理。

>>447-448さん

丁寧なアドバイス有難うございます。
CSSファイルを複数扱うにはそのくらいのメリットですよね。
なんとか理想の形にできそうだと思います。
有難うございました！

質問です。
とある事情でCSSでの指定はすべて
HTMLのタグに直接styleタグを用いて指定しているのですが
HTML５ではstyleタグは廃止されていると聞きました。

これからCSSをタグに記述するのは止めたほうがいいですか？？

勿論、ヘッダーや外部リンクする方が良いのはわかってますが
それは出来ないので…；

なるべくCSS使わないようにしてますが
どうしても見た目いじりたい時があって、ちょっと悩んでるんです。

HTML4.01で書いてりゃいいじゃん

逆に聞くけど、5にする理由、必要性は？

最新最高のスキルを身に付けた
出来るやつと世間から思われたいから

とかじゃないかい？w

>>450
style要素(styleタグ)は廃止されていないよ。
http://www.w3.org/TR/html5/#the-style

style属性は廃止らしいので、インラインスタイルは使えない。HTML 5に移行
するつもりならstyle属性は使わないほうがいいけれど、そうでないのなら
自分のやりやすいようにすればいいんでは。

>>443
動くみたいだけど？
ということはあるんじゃないの。442じゃないから知らんけど。

>>454
ちょっと思ったんだけど、
style属性は廃止、font要素も廃止となると、
例えば2chのような掲示板で、投稿者が自由に文字の色を選べるようにしようとすると、どうすればいいんだろ。
#000000から#ffffffまですべての組み合わせの文字色を設定したCSSファイルとかいう、馬鹿げたものをつくるの？
あるいはそのつど、必要なだけ、style要素を生成して挿入するの？

と思ったらこんなものが
ttp://www.w3.org/TR/html5/#wysiwyg

font要素にのみstyle属性を許すのか。
そもそもfont要素は、特に何か特別な意味づけをするわけでもないと。
うーん。WYSIWYGエディタ向けの仕様と書かれているけど、
文字色を自由に設定できる掲示板とかが、作られないはずはないよね。

>>455
何を引っかけようとしてるのか知らないが、
試すまでもなく「絶対に動くわけがない」とはっきりしている。

なぜなら、ちょっとjsができればそんなプロパティは存在しないと誰でもわかるんだよ。
お前は知らないようだがな。バカが。

中央が可変で、左右が固定の3カラムリキッドにしたいです。
で、今のHTML・CSSは以下の通りです。
（長くてすみません。改行が多すぎるとの事でCSSの改行を省きました。）

DOCTYPE XHTML1.0 Strict URL有り
<body>
<div id="head"></div>
<div id="wrap"><div id="main_block"></div></div>
<div id="left_block"></div>
<div id="right_block"></div>
<div id="foot"></div>
</body>

#body { margin:0pt 2%; }
#head { margin:0pt 0pt 10px; padding:0.5em 0pt; }
#wrap { float:left; width:100%; }
#main_block { margin:0pt 250px; }
#left_block { margin-left:-100%; float:left; width:250px; }
#right_block { margin-left:-200px; float:left; width:200px; }
#foot { clear:both; }

としているのですが、Opera・IE7・FireFoxでは正しく表示され、
IE6でのみleft_blockの左端が切れて表示されています。
どこの記述が原因でしょうか。
ちなみにbodyのmarginをpaddingに変更してみたら、
IE6のみでleft_blockがブラウザの左端にくっついて表示されました。

次のサイトを参考にしました。
http://www.igoo.co.uk/
よろしくお願いします。

>>458ですが、2点だけ修正です。すみません。
#body→body
#main_block { margin:0pt 250px; } →#main_block { margin:0 200px 0 250px; }

>>458
IE6以下は、floatされた要素が親要素の左右に接している場合、
その接している方向のmarginが2倍になるバグあり（標準モードでも）
左右に接しているfloatしている要素はdisplay:inlineしとき

>>452,>>454
レスありがとうございます。

styleタグじゃなくて、style属性の間違いでした；すいません。
CSS使う場合はタグにstyle属性を用いて直接指定しています。

最高のスキル云々じゃなくて、
HTML4.01をいつまでも使い続けれるのであればそうしたいのですが
もしHTML５が出た事によって廃止とかになった場合非常に困るのです；
これから先廃止の可能性は無いのでしょうか？

>>460
floatされているボックス３つにdisplay:inline;を指定するのを
7パターンやってみましたが、どれもバグを修正されませんでした。
参考にしたサイトのボックスにもdisplay:inline;が指定されていなかったのですが、
変わりに、bodyの直下に全体を囲うように<div id="all">が指定されているのを発見し、
それをつけてみたところ、バグが修正されました。

ということで自己解決しました。
どうもです。

>>461
HTML3.2だっていまだに廃止されてない。HTML2は廃止されたけど。
そもそも、もうほとんど誰も使ってない、というような状況にならなければ廃止されない。

それに廃止されたからって、HTML2で書いたらいけない法律なんて存在しない。
廃止された後、新しく文書を書く場合にHTML2を使うことはオススメされなくなるだけ。

あと、廃止されればブラウザがHTML2のサポートをやめる理由になるが、
だがしかしHTML2をサポートをやめたブラウザなんて存在しない。
過去にHTML2で書かれて放置されている文書は未来永劫HTML2だから。
つまりサポートされなくなるなんてことは99.9%ありえない。

火狐はTEXT-ALIGN使えないのですか？
全くかかってないんですけど。

>>464
問題なく使えますが、エスパーして助言申し上げますと、
margin: 0 auto;
こちらを挿入していただければと存じます。

>>464
対応しているよ。タイプミスなどを確認すべし。
http://jigsaw.w3.org/css-validator/ でCSSの文法チェックも。

すごいエスパーだな、その発想はなかったわ・・・

こんなのがかっこつけて火狐なんて呼んでるのか

IEでセンター配置させてて
もじら系で見ると、左に寄ってる
無様なサイトって結構多いよなw

　

>>463
そうなんですか。
安心しました。ありがとうございました。

>>469
寄ってるだけならまだしも、おもいっきり重なっちゃったりしてるサイトとかあるぞｗ
IE を基準にサイト作ってるんだよな。間違った作り方のいい例が見れたと思えばｗ

全ての半角文字（半角カナも含む） を等幅フォントにしたいんだけど
最もシンプルでクールな方法はなに？

>>472
* { font-family: monospace }

<input type="button" /> や、
<input type="submit" /> に、
一括でスタイルを指定することはできないでしょうか？

input { }

それだと、ボタン以外のtypeのinputにも適用されてしまいます。

おまえは日本語の勉強が先だと思うが。
E[foo="bar"]

>>473
それだと全角まで等幅になっちゃうけど

質問者の日本語（ｒｙ

>>478
無理

おまいらってホント役に立たない子たちですねw

>>472
textboxとか適当な名前付けて
使用するフォントで等幅フォント指定する
サイズも色も重さも
　

HPBからDreamwaverに乗り換えた
HPB糞杉

>>478
JIS X 0201のみを収めたフォントを作成し、@font-face規則を使って読み込め
ばできないこともないけれど、WebKitくらいしか対応していない

>>480
おまえみたいな奴がいると荒れるから上級者スレいけよｗ

質問です。

<ol>
　<li><img src="hoge.gif">
　　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　</ul>
　</li>
……
</ol>

こんな感じのhtmlで、このような見た目にしたい。
1.[img]　・aaa
　　　　　・bbb

でもfloatを使ったら「1.」の部分が見えなくなりました。

imgをspanで囲ってブロック要素にしてfloat、が自分の限界orz
なんかもっとスマートなやり方ないでしょうか。
ヒントだけでもいいので教えてください。

質問です

<div id="footer">
</div>
こういう記述でdiv要素内の情報をページの形関係なしに常に一番下にくっつけておく命令ってありますか？
#footer {
　命令
}
みたいな感じで

自己解決しました

>>480
いちいち囲うのがめんどうなので・・・
aあiいuうeえoお とかやってられないことないですか？

[A][B]
[A][C]

分かりにくいけど、[A]は縦につながってる感じです。
このようなレイアウトをするにはどうすればいいのでしょうか？

テーブルでも使ってればぁ？

ごく大雑把に、
[A]をfloat:leftにして[B] [C]にmargin-left: Aの幅＋余白ぶんとするか、
[A]をposition:absoluteで固定して、あと同上か、
全体を包む親要素を作ってから
[A]をfloat:leftにして[B] [C]にfloat:right。

よろしくお願いします

#contents {
width:700px;
background-color:#FFFFFF;
margin:auto;
}

#main {
width: 520px;
float:right;
background-color:#FFFFFF;
font-size:10px;
text-align:center;
}

#side {
width: 180px;
float:left;
background-color:#FFFFFF;
font-size:9px;
text-align:left;
}


として、HTMLで<div id="contents">の中に<div id="main">と<div id="side">を入れてるのですが、
なぜかmainの中身を書くと、sideの中身が画面下に下がってしまうのです。
ものすごく単純なことしかしていないのですが…、なぜですか？

>>491
<div id="Contents">
<div id="main">
<div id="side"></div>
</div>
</div>

こう書いてるんじゃないか？

未だに単位に px 使ってる人いるのね…

px 以外に何があるんだ？

>>492

いえ、確かに
<div id=contents>

<div id=main>
ほにゃらら
</div>

<div id=side>
ほにゃらら
</div>

</div>

って書いてるんです…

横からすいません。a要素にborder-left-style:none;が適応してくれないんですがどうすれば良いでしょうか？
<div id="navi">
<ul id="nav">
<li><a href="" title="home">HOME</a></li>
<li><a href="" title="news">NEWS</a></li>
<li><a href="" title="profile">PROFILE</a></li>
<li><a href="" title="faq">LINKS</a></li>
</ul>
</div>
に
ul#nav {display: inline; list-style-type: none;}

ul#nav li{float: left; width: 140px;}

ul#nav li a{display: block; width: 140px; height: 30px; line-height: 30px; border: 1px solid #fff; text-align: center; text-decoration:none;}

a[home]{border-left-style:none;}
と記述しているのですが...。
横メニューのボックスでHOMEの左のborderだけ消したいのですが方法がわかりません。
よろしくお願いします。

>496
ttp://www.stylish-style.com/csstec/base/order.html

497さんありがとうございます。

a[home]{border-left-style:none;}
えーと・・・

↑言いたいことは解るぞｗ

a[title=home]{border-left-style:none;}

a[title*=home]{border-left-style:none;}

http://www.w3.org/TR/css3-selectors/#selectors

誘導されてきました
画像を背景にしたのですが小さい画像だと何枚も重なってしまいます
一枚だけ任意の場所に背景として置くにはどうしたらよいのでしょうか

norepeat

>>501
background: #fff url("画像のURL") no-repeat 20px 50px; など
キーワード'no-repeat'で繰り返しなしになります。
座標はx軸、y軸の順に指定し、パディング辺を基準に配置されます。
パーセントの指定も可能。詳しい説明は↓
http://www6.plala.or.jp/go_west/nextcss/ref/prp/fg_n_bg/bgn_pos.htm
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background-position

>>495
標準モード、後方互換モードのIE6,IE7,Opera 9.26,Firefox 2.0.0.12で
表示確認してみたが再現しなかった。
再現できるブラウザのバージョンは？

>>503
ありがとうございます！

>>504

ＩＥ６と７です〜。
かれこれずーっとあれやこれややってみてますが、治らない…。
もうダメ、寝ます…。
HTML&スタイルシート、レイアウトブックに書いてあること、そのままやっているだけなのですが…なぜ…？？

>>506
そうなるってことは左右にフロートしてるdivの幅の合計値が
700pxを超えてるんだだろうな。

それか、>>491では<div id="contents">と書いているけれど
>>495では <div id=contents> と書いてあって、
""が抜けているけど、そういうケアレスミスとかは無い？

コンテンツを完全な中央（左右だけでなく上下も）に配置するにはどうすれば良いのでしょうか？

>>506
ちょと待たれよ！

clearしてないってオチじゃないよな？

>>506
単純にpaddingとかborder入れてるとかじゃねーの？

>>490
ありがとうございます。無事できました。

>>506
背景を2つとも白にするんじゃなくて、side→#f00; main→#000 とかにしてみ。
多分はみ出してると思う。

>508

h1 {
text-align: center;
line-height: 100%;
}

で

<html>
<body>
<h1>hogehoge</h1>
</body>
</html>

やってみ

>>508
margin: auto; だけでできると思う。

あう、みなさま昨夜はありがとうございます…
はみ出してるのかな？？　と、中に入れているものを画像をやめて文字にしたり、
mainとsideの幅を少なくしたり　いろいろいろいろ やったんですが、　ダメでした〜。
（ホントになぜ・・・？）

しょうがないので、地道にpxで位置指定しようと思います。ありがとうございました〜。

>>508
http://www.stylish-style.com/csstec/hi-level/domannaka.html

左右のセンタリングはmargin-left: auto; margin-right: auto;
上下については「CSS 上下 中央」などで検索すれば、たくさん見つかるよ。

CSSの中にSSIを仕込むってやはり邪道なのだろうか？

<!--#if expr="( $HTTP_USER_AGENT != /hoge/ )" -->
/* hogeブラウザの場合 */
left: -8px;
top: -16px;
<!--#else -->
line-height: 128%;
<!--#endif -->
こんな感じに。

>>517
出来るの？
スタイルシートをCGI化するのはやったことあるけど・・・

できないと考える方が不自然だな
http://httpd.apache.org/docs/2.2/howto/ssi.html

>>517
PHP使えるなら、PHPにした方がいいよう気がする…

>>515
こっちが気になって仕方ないｗｗ
とりあえずhtmlとCSSをうｐしてくれｗ

すみません質問です。

＿期待する正常な表示＿＿＿＿＿＿_.
|..............| |　H3.　　　　　　　　 ＿＿＿＿　|
|....M......| | TEXTTEXTTEXT |　　　　 　|　|　　こんな感じに表示させたいのですが　
|.....E......| | TEXTTEXTTEXT |　 IMG..　|　|　　imgにfloat: rightを設定した瞬間
|.....N......| | TEXTTEXTTEXT |　　　　 　|　|　　IEのみ下記のような現象が起きてしまいます。
|.....U......| |　　　　　　　　　　　|　　　　 　|　|　　
|..............| | (空のclear:both;). ￣￣￣￣　.|　　何とかうまいこと上のような表示にするには
|..............| |　H3.　　　　　　　　 ＿＿＿＿　|　　どうすればいいでしょうか？
￣￣￣ .| TEXTTEXTTEXT |　　　　 　|　|
　　　　　| TEXTTEXTTEXT |　IMG.. 　|　|
　　　　　| TEXTTEXTTEXT |　　　　 　|　|
　　　　　| TEXTTEXTTEXT |　　　　 　|　|
　　　　　|　　 　　　 　　　　　 ￣￣￣￣　|
　　　　　￣￣￣￣￣￣￣￣￣￣￣￣￣

＿IE7のみ起きるおかしな表示＿＿＿＿
|..............|　　H3 　　　　　　　　 ＿＿＿＿　|
|....M......|　　TEXTTEXTTEXT |　　　　 　| .|
|.....E......|　　TEXTTEXTTEXT |　 IMG 　| .|
|.....N......|　　TEXTTEXTTEXT |　　　　 　| |
|.....U......| 　　　　　　　　　　　　|　　　　 　| .|　　
|..............|　(空のclear:both;)　 ￣￣￣￣　|
|..............|　　H3 　　　　　　　　 ＿＿＿＿　|
|￣￣￣　 TEXTTEXTTEXT |　　　　 　|　|
|　　　　 　 TEXTTEXTTEXT |　IMG.. 　|　|
|　　　　 　 TEXTTEXTTEXT |　　　　 　|　|
|　　　　 　 TEXTTEXTTEXT |　　　　 　|　|
|　　 　　　　　 　　　 　　　　　 ￣￣￣￣　|
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
↑右のボックスが左端まで出てしまっている

>>522 の続きです。
clear: both; を全部撤廃したら枠は正常に戻りましたが
今度は下記のようになってしまいます。ひとつでも
clear: both; を挿入するとまた元に戻ってしまいます。

H3　　　　　　　　　　＿＿＿＿_
TEXTTEXTTEXT　｜　　　　　｜
TEXTTEXTTEXT　｜　IMG. 　 |
TEXTTEXTTEXT　｜　　　　　 .|
H3　　　 ＿＿＿＿_.|　　　　　　.|
TEXTT.｜　　　　　 |￣￣￣￣~
EXTTE. |　 IMG. 　 |
XTTEX. |　　　　　　|
TTEXT. |　　　　　　|
EXTTE　￣￣￣￣~
XTTEX
TTEXT
TEXT

ソース見せて。

ttp://thg.danmaq.com/download/ss.xml
綺麗じゃないが勘弁。

ttp://thg.danmaq.com/download/ss.html
XSL変換したやつが出来たのでお願いします。

<pre> のように改行で折り返しになりつつ、表示領域右端いっぱいまで来ても折り返すようなスタイルはどう書けば良いですか？

floatはIEでバグ起こしやすいからね。

http://cssbug.at.infoseek.co.jp/detail/winie/b009.html
これかな。よくわからん。

>>526
試しに
.window { zoom: 1; }
って書いたら直った。

>>527
http://hyper-text.org/archives/2007/11/pre_print_css.shtml

div.right {
border: 2px #8E91F7 solid;
margin-left: 285px;
margin-right: 10px;
padding: 10px 10px 10px 10px;
}
div.contents-nohead {
font-size: 11px;
border: 2px #8E91F7 solid;
float: left;
width: 240px;
margin-left: 10px;
padding: 8px 8px 8px 8px;
}

これを指定して左側にコンテンツ、右側に本文とやってるんですが、このブロック要素の下にトップページへのテキストリンクを入れるとコンテンツのブロックの下でなく、本文のブロックの下に表示されてしまいます。
どうすればいいでしょうか？

>>529
ご教授ありがとうございます。

それにしてもどういうトリックなんだｗ
しかもこれだけで本当に治ってるし。

>>532は>>529じゃなくて>>522。失礼。

>>531
clear

>>530
でけた! ありがとう。
同じ名前で複数定義して解釈できるどれかひとつが適用されるのを期待するのって
ちょっとイレギュラーな感じがするけど良いのかな。

2ch外で質問したのですが回答が得られなかったため、そちらの質問を削除し、こっちでさせていただきます。

<html>
<head>
<title>タイトル</title>
<link rel="stylesheet" href="../base.css">
</head>
<body>
<blocKQUote>
本文
</blockquote>
</body>
</html>

ところが、この間、かなりの長文をこのテンプレートに挿入してアップードしてIEで表示確認すると、
<blockquote>〜</blockquote>の間の内容が、全く表示されないことに気がつきました。
外部のcssファイルで設定している背景画像などは、問題なく表示されています。

また、なぜかは分かりませんが、IEの窓のサイズを広げるか、文字サイズの表示を中⇒小にするかの
どちらかの対応をすれば、<blockquote>〜</blockquote>の間の内容が突然表示されます。
ただし、この現象が起こるのは、今回新しくアップロードしたこの長文小説だけで、
今までのの小説は、同じテンプレートのhtmlを使っているにも関わらず、
画面を小さくしようが、全画面にしようが、関係なく問題なく表示されます。

いろいろ調べて、問題は本文ファイル中にリンクしているスタイルシートbase.css内の、
blockquote要素の記述にあるのではないかと思いました。

■■base.css内の、blockquote要素の記述■■

blockquote{
　filter:alpha(opacity=75);
　background-color:white;
　width:100%;
　margin-right:12%;
　margin-left:12%;
　margin-top:10%;
　margin-bottom:10%;
　padding:15;
} 

思いつきで、width:100%;を削除してアップロードしてみると、なぜか小画面でも本文が表示されるように
なりました。
しかしその代わりに、今度はfilter:alpha(opacity=75);が背景に対して反応しなくなりました。

上記のことはいったいどうしてでしょうか？
また、何故、全面画面では本文表示されるのに、小画面にすると本文が表示されないのでしょうか？  

すみません。
>>536で、いきなり「ところが、」から始まっていますが、下記の文章が抜けていました。

↓↓↓
いつも上記のようなhtmlの雛形を作成し、そこに小説を流し込んでhtmlファイルをつくり、サイトをつくっています。
2年くらい全く様式を変更せずに更新していましたが、全く問題はありませんでした。
↑↑↑

ところでだな、<blockquote>〜</blockquote>は引用文を囲むタグだ。
その本文が引用じゃないなら、わざわざ<blockquote>を使わずに
ｃｓｓの内容をＤＩＶに適用するとかしてくれたほうが、閲覧者に優しい。
あとfilter:alpha(opacity=75); はＩＥ以外では見えない。

それでほとんど解決すると思うよ。

返答ありがとうございます。

<blockquote>については、すでに300ページほどの小説を書いてしまっているので、
できたら変えたいないのが本音です。
あと、フィルタがＩＥ以外に対応していないのは知っていたので、
一応バックグラウンドの色にホワイトを指定して、
壁紙と重ならないようにしたんですが……

フィルター自身は消さないとやっぱりいけませんか？

なんか聞いていながら、生意気なことを言ってますね。

blockquoteに関しては、新しく更新する分から<ＤＩＶ>を使おうと思います。
インデントに便利だったので、つい使っていました。

filter:alphaなんてページが重くなるだけで何のメリットもないよ
しかも長文と来たら君のサイトは低スペックのPCだと閲覧できないんじゃね?

ためしに、長文の量を半分にしてみたら、窓の広さや文字の大きさの表示設定に関係なく
ちゃんと表示されました。
やはり超！長文＋フィルタの設定＋IEの組み合わせが不味かったようです。
理屈は良く分からないのですが。
（普段は細かくページ分けしてるのですが、一括表示ページも欲しいといわれ、長文ページを作ったのです）

長文ページはお客様の希望のため取り下げられませんし、
フィルタは諦めます。
アドバイスありがとうございます。

filter:alpha は文が長くなって範囲が大きくなると本文が表示されなくなる。
背景はビットマップで保持して重ねているはずだから IE 内部でメモリが足りなくなっていると思われ。

>544
ありがとうございます！
ようやく謎がとけました。

>ビットマップで保持して
だから、IEの文字表示を中⇒小にしたら、いきなり表示が出来るようになったんですね。
（面積が小さくなって）

どちらにしろ、フィルターはやめます。
皆さんご親切にありがとうございました。

半角英数文字のフォントを指定したいんだけど
どうしたらいい？

>>546
font-family: Arial, "ＭＳ Ｐゴシック", sans-serif;
みたいに、最初に英文用フォントファミリを指定すると、
Arialに含まれている半角英数字はArialで、そうでない
文字はＭＳ Ｐゴシックで表示されるはず(フォントが
インストールされていれば)。
http://hp.vector.co.jp/authors/VA022006/css/fonts.html#font-family

体の本字って久しぶりに見たな
ほねへんにゆたか

さかなへんにゆたかでハモだな

htmlファイルがcssファイルを読み込んでくれない。なんでだろう

ファイルを読み込むのはブラウザの仕事だ

　　　　 .＿＿＿＿＿＿＿＿＿_
hoge　：|＿＿＿＿＿＿＿＿＿|
fuga.　：|＿＿＿＿＿＿＿＿＿|
piyo 　：|＿＿＿＿＿＿＿＿＿|
foo　　：|＿＿＿＿＿＿＿＿＿|

こんな感じにinputの入力フォームをそろえたいんですが
これはやっぱテーブル組むしかないのでしょうか？

左がわを p にして、widthとfloatを指定してどう？

>>551 自己レス。

fieldset{ padding-right: 5em; text-align: right; }
とかアホな方法で一応は自己解決しましたが、
他にもっと良いやり方あれば教えてください。

質問です。
myspaceのプロフィールをcssでいじるときに、＃←この記号が使えなくって困ってます。
id属性を表記したいんだけれど....なにかよい方法はありませんでしょうか。
だれか助けてください。

>>552
それも考えてはみたのですがいくら<label>があるとは言えちょっと
ラベルとフォームの一体感とか考えるとアレかなぁとか思ってみたり。

>>554
myspaceは使ったことがないから分からないんだが、
ユーザがプロフィール画面のCSSを変更できるが、
なぜかそのCSSで、IDセレクタを使うために#記号を使おうとしたら、
なぜか変更できないと？

うーん、属性セレクタ？

*[id="hoge"] { }

>>539
CHTMLの定義では、blockquote＝「ブロック化インデント」とあるぞ。
引用だなどと、一言も書いてない。docomo公認のインデントするためのタグなのだ。

>>551
dt/ddでできると思うが、別にそれは項目/フォームの表だと思うんだが。
ただ：はいらない。

ｃｓｓ初心者が何も知らずに発言させてもらうと、
>docomo公式
↑逆にあやしい。

>>557
quoteって単語自体が(ry

>>539
それって「hr＝ヘアラインタグ」って大真面目に書いてあった奴だろ。
そのレベルで国際標準化提案してるんだからバカ丸出し。
さすがRFC無視のメールシステムで世界に鼻で笑われるだけのことはあるよな。

というか「W3Cに提案する」という行為の存在を知っていて、
何故「HTML4の仕様書」の存在を知らないのか？
（知ってたら、blockquote=ブロック引用とか、hr=水平罫線だとわかるだろう)
怪しげな「タグ講座」レベルの知識で世界標準を作ろうなんてすごすぎる。

みかかってメールだけじゃなく、そんなあほなことまでしてたのか。

>>556
ありがとうございます。
遅くなってすいません...

>ユーザがプロフィール画面のCSSを変更できるが、
なぜかそのCSSで、IDセレクタを使うために#記号を使おうとしたら、
なぜか変更できないと？

そうなんです!!
教えていただいた方法でやってみたのですが、やっぱりできなくって...
あきらめるしか無いですかねぇ；；

>>563
ソースも出さないのにどう答えろと？
というかmyspaceのスレってないのか？

それこそmyspace内で調べればいいんじゃね？
使ったこと無いけど

>>564
myspaceのスレにcssについてはこっちで聞くようにってリンクが貼ってあったものですから...
ソースって言われても膨大すぎてどこらへんを出せばよいのかよくわからなくって；
すいません。

たとえば
<div id="navigationBarDiv">
<table>
<tr>
<td>
<table>
--省略--
</table>
</td>
</tr>
</table>
</div>

ってなっているときって、普通だと

div#navigationBarDiv{}

↑これでいじれますよね...??
でも、何回入力しても確認画面でsubmitを押すと、＃だけ勝手に消えてしまって、
指定ができないんです（汗）
もちろんこれはmyspaceの構造かなにかの問題だとは思うんですが、
なんとかしてid属性を表記する方法が他にないものかなと思いまして...

>↑これでいじれますよね...??
Yes。それで消えるとかの問題だったらCSSの問題じゃないからスレ違い。

>>567
そうですか....
お手数おかけしてすみませんでした；
ありがとうございます。

classじゃだめなの？
idとclassじゃ意味合い違うけど。

classは問題なくcssでいじることができるのですが、
ほとんどの主要なtableとかdivはid属性で指定されているんです；
自分でtableとかを追加するときはすべてclassで指定してなんとか
いじれるようにしているのですが、既存のベースとなっている構造をいじりたいので....;_;

>>570
ブログなんだろ？
ブログ側でidはいじれない仕様なんじゃないのか？
だからブログの質問はブログ板って事なんだ。

>>570
CSSの書きかたは合っているので、myspace側の不具合なのでは。
myspaceのスレで同じ現象が発生する人がいないか尋ねてみたり、
サポート↓に問い合わせるのがいいと思う。
http://www.myspace.com/index.cfm?fuseaction=misc.contact

>>572
ありがとうございます。
スレ違いみたいなのに丁寧に答えてくださって本当に助かります；U；!!

あほなmyspaceが#を取り除いたとしても、
まだ属性セレクタは使えると思うんだが。
IE6は知らんが。

>>574
上級者スレへお帰りください

「<h1><span>タイトル<span></h1>」というHTMLを書き、
CSSで
h1 { background: url('logo.gif'); height: 200px; } /* 成功 */
h1 span { margin-top: 30px; padding-top: 30px; } /* 失敗 */
を追加したのですが、h1 は成功しますが h1 span は反映されません。
なにがわるいのでしょうか。
ブラウザは Safari 3 です。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      <!--
h1 {
    height: 150px;
    border: solid 1px #FF0000;
}
h1 span {
    margin: 30px;
    padding: 30px;
    border: solid 1px #00FF00;
}
      -->
    </style>
  </head>
  <body>
    <h1><span>タイトル<span></h1>
  </body>
</html>

>>576
何の実験だか知りませんが、標準モードで複数プラウザを使って確認すべきです。
さて、どちらを反映させたいのかわかりませんが、
cssでは後に書いた指定が優先されます。

>>576
基本から勉強しなおしてください・・・

>>577
>>577
>>577

行き詰まりました、どなたか助言をお願いいたしますm(_ _)m

<center>
<table><tr><td>　</td>
<td name="img">�@</td>
</tr>
</table>
</center>

このテーブル構造の�@部分に、
<img src="sumple1.png" style="z-index:0; position:absolute; top:0; left:0;">
<img src="sumple2.png" style="z-index:1; position:absolute; top:0; left:0;">
<img src="sumple3.png" style="z-index:2; position:absolute; top:0; left:0;">
<img src="sumple4.png" style="z-index:3; position:absolute; top:0; left:0;">
このような感じで、4つの画像を重ね合わせた状態で設置したいのです。

この場合、<img>の親要素は<td name="img">だと思い、
<td name="img" style="position:relative;">
と入れたのですが、IEだと狙い通りの表示になるのですが、
Firefoxでは<td>ではなくページの左上に表示されてしまいます。
Firefoxでうまく表示させるには、どうしたら良いのでしょうか(´；ω；)

>>577
>cssでは後に書いた指定が優先されます。
この場合なら、別に重なっていないので、両方反映されるように思うのですが。

>>578
ヒントだけでもお願いします。

>>581
ソースをじっくり見直せ。ケアレスミス。

>>580
親boxはtdじゃなくtableだろ。

>>582
わ、わからない。
<span></span>が閉じてなかったので閉じましたが、margin-top: 30px や padding-top: 30px が反映されないのは変わりませんでした。

インライン要素だから空白とか変じゃね？
自分は、初心者だからいい加減言ってるけど。

>>583
レスありがとうございます。
<table>に　style="position:relative;"　を挿入しても
imgはページ左上に表示されてしまいました。
<td name="img">の中に<span style="position:relative;"></span>を入れ、
その中に<img>を置いてみてもダメでした…。

先程書き忘れてしまいましたが、IE7とFirefox2でテストしています。

>>584
あんたの元ソースコピーしたら、妙な空白がいっぱい入ってた。
削除したら、普通に表示される。
何使ってインデントしてんだよ？

display: block

>>584
<span>で囲んだインライン要素に上下のアキ(margin,padding)は反映されないよ。
させたい場合は display: blockに。

事故解決しましたm(_ _)m
<DIV style="position:relative;">
<DIVstyle="z-index:0; position:absolute; top:0; left:0;">
<IMG>
</DIV>
</DIV>
これでIE・Firefoxで同じ表示がされるようになりましたm(_ _)m
ありがとうございましたm(_ _)m

>>586
親テーブルposition:relative指定しても表示されないのが普通です。
IEが独自の実装でそう出来るだけなのです。

下のページに詳しいよ。
ttp://gyauza.egoism.jp/clip/archives/2007/11/071129-tablepositionrelative/

>>589
キャー、ありがとうございます。
display: block で解決しました。
そうかー、inlineだと上下のマージンは反映されないのか。全然知りませんでした。
589さん、あなたは救いの神です。助かりました。

>>588涙目

>590
ありがとうございます！そういうページを探していました(´；ω；)
本当にありがとうございました！

<ul>
<li>foo</li>
</ul>
としたときの、箇条書きの「・」と、内容の「foo」との間隔を調整するにはどうしたらいいですか。

>>595
li { padding-left: 値; }

>>595
marker-offsetだけど
今現在それを実現はできない(´・ω・｀)

画面の右下にこういう<div>だけがある
デザインのページが作りたいと思っています。
<div>の表示はうまくいくのですが、
鯖の広告が、通常なら下段１行に表示される筈なのに、
なぜか最上部に表示されます。
自分としては、ページ下段にぴったりとへばりつくようにしたいのですが。

ちなみに本文は、文章で4行ぐらいなので、スクロールバーは出ません。

<html>
<head>
<style type"text/css">
<!--
#Layer1 {
width:250px;
_position:absolute;
right:10px;
bottom:10%;
}
-->

</style>
</HEAD>
<body>
<div id="Layer1">
本文
</div>
</body>

＊＊＊ここに広告のジャバスクリプトが入る＊＊＊

</html>

書き忘れました。
position:fixed;
も、#Layer1で指定しているので、
firefoxでもちゃんと右下で表示されますが、
やっぱり広告は一番上で表示されます。

連投すみません。
自己解決しました。
上の摩訶不思議なタグは忘れてください。

文章を改行しないと、横にスクロールバーが出て
文が画面からはみ出してしまいます。
改行しないで、横にスクロールバーが出ないようにするにはどうしたらいいですか。

ボックスにwidthを指定する以上

>>603
できました
ありがとうございました

ボックス内にテキストを打って、
それを縦軸の真ん中に置きたいのですが、
指定する方法ってあるでしょうか？

具体的には
height: 50px;
width: 400px;
background-image: ~;
のようなボックスの中にテキストでタイトルを入れたいのですが、
それが縦軸の真ん中に来るようにしたいのです。

分かる方いたら教えてください。

テキストのボックスをdisplay: blockにしてmargin, paddingで調整とか、
親ボックスをposition: relative、テキストのボックスをposition: absoluteにして
top, leftで調整とか
どちらもフォントサイズで微妙に思ったようにいかんかも試練が

>>605
テキストが1行ならば
line-height: 50px;

>>606,607
やはり、裏技的なやり方で対処する方法しかないみたいですね。
なんでこういうのに対応したCSSないんでしょうね…。

回答ありがとうございました。

裏技……

うん。

もうちょっと、vertical-alignの使い勝手が良ければ・・・

おまえら……

次の人まだ〜

　　 _,,....,,_　 ＿人人人人人人人人人人人人人人人＿
-''":::::::::::::｀''＞　　　ゆっくりしていってね！！！　　　＜
ヽ:::::::::::::::::::::￣^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^￣
　|::::::;ノ´￣＼:::::::::::＼_,. -‐ｧ　　　　　＿_　　 _____　　 ＿_____
　|::::ﾉ　　　ヽ､ヽr-r'"´　　（.__　　　　,´　_,, '-´￣￣｀-ゝ 、_ イ、
_,.!イ_　　_,.ﾍｰｧ'二ﾊ二ヽ､へ,_7　　　'r ´　　　　　　　　　　ヽ、ﾝ、
::::::rｰ''7ｺ-‐'"´　 　 ;　 ',　｀ヽ/｀7　,'＝=─-　　　 　 -─=＝',　i
r-'ｧ'"´/　 /!　ﾊ 　ハ　 !　　iヾ_ﾉ　i　ｲ　iゝ、ｲ人レ／_ルヽｲ i　|
!イ´ ,' |　/__,.!/　V　､!__ﾊ　 ,'　,ゝ　ﾚﾘｲi (ﾋ_] 　　 　ﾋ_ﾝ ).| .|、i .||
`! 　!/ﾚi'　(ﾋ_] 　　 　ﾋ_ﾝ ﾚ'i　ﾉ　　　!Y!""　 ,＿__, 　 "" 「 !ﾉ i　|
,'　 ﾉ 　 !'"　 　 ,＿__,　 "' i .ﾚ'　　　　L.',.　 　ヽ _ﾝ　　　　L」 ﾉ| .|
　（　　,ﾊ　　　　ヽ _ﾝ　 　人! 　　　　 | ||ヽ、　　　　　　 ,ｲ| ||ｲ| /
,.ﾍ,）､　　）＞,､ _____,　,.イ　 ハ　　　　レ ル｀ ー--─ ´ルﾚ　ﾚ´

　　 _,,....,,_　 ＿人人人人人人人人人人人人人人人人人＿
-''":::::::::::::｀''＞くさってやがる！ゆっくりしすぎたんだ！！＜
ヽ:::::::::::::::::::::￣^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^Ｙ^ＹＹ^Ｙ^Ｙ^Ｙ^￣
　|::::::;ノ´￣＼:::::::::::＼_,. -‐ｧ
　|::::ﾉ　　　ヽ､ヽr-r'"´　　（.__
_,.!イ_　　_,.ﾍｰｧ'二ﾊ二ヽ､へ,_7　　　　　　　　 ｒ'￣i　＿_　　 _____　　 ＿_____
::::::rｰ''7ｺ-‐'"´　 　 ;　 ',　｀ヽ/｀7　　　 , - ､　ﾞ‐- ',´　_,, '-´￣￣｀-ゝ 、_ イ、
r-'ｧ'"´/　 /!　ﾊ 　ハ　 !　　iヾ_ﾉ　　　{　　 }　　　'r ´　　　　　　　　　　ヽ、ﾝ、　 r'⌒',
!イ´ ,' |　/__,.!/　V　､!__ﾊ　 ,'　,ゝ　　　`‐-‐'　　　,'＝=─-　　　 　 -─=＝',　i　 !、_丿
`! 　!/ﾚi'　(ﾋ_] 　　 　ﾋ_ﾝ ﾚ'i　ﾉ　　　　◯　　　　 i　ｲ　iゝ、ｲ人レソ　　　　　i　|
,'　 ﾉ 　 !'"　 　 ,＿__,　 "' i .ﾚ'　　　　　　　　　　,ﾚﾘｲi (ﾋ_] 　 　 ／ _ルヽイ、i .|| ○
　（　　,ﾊ　　　　ヽ _ﾝ　 　人! 　　　　　　　　　 ,,／!Y!""　,＿__,　 ﾋ_ﾝ ) 「 !ﾉ i　 |-‐､,,
,.ﾍ,）､　　）＞,､ _____,　,.イ　 ハ　　　　,,r-─（＿）　　　　　 ヽ _ﾝ　　 "".ﾉ　!.;　ヽ　ヽ `,
　　　　　　　　　　　　　　　　　　　　（　　　　　　　　　　　　　　　　　　　　　　　　,r‐″
　　　　　　　　　　　　　　　　　　　　　￣つ　　　　　　　　　　　　　　　　　,r─‐‐''
　　　　　　　　　　　　　　　　　　　　　 (´　　　　　　　　　　　　　　,r──'
　　　　　　　　　　　　　　　　　　　　　　￣￣ﾞ'───--------‐'

YES!

高須！

クリニック

マイスペースで自分のバンドのロゴを背景として使いたいんですけど、コードがイマイチよく分かりません親切な方是非教えてくださいお願いします！！

専門スレでやれ
たんに、HTMLがそのままいけるなら　<img src="パス" alt="代替テキスト" />

>>619

＜わからない七大理由＞
1. 読まない ・・・説明書などを読まない。読む気などさらさらない。
2. 調べない ・・・過去スレ、ググるなど最低限の内容も自分で調べようとしない。
3. 試さない ・・・めんどくさいなどの理由で実行しない。する気もない。
4. 理解力が足りない ・・・理解力以前の問題で理解しようとしない。
5. 人を利用することしか頭にない ・・・甘え根性でその場を乗り切ろうとする。
6.感謝しない・・・教えてもらって当たり前。事がすんだらさようなら。
7.逆切れする・・・自分の思うようにならないと逆切れする。

8.単に馬鹿・・・説明不要

質問です。

divでボックスを作り、その中に背景を入れたいのですが、
ボックス自体は使い回ししたいので、
背景のCSSは分けてHTML内に記載したいと考えています。

<div class="box" style="background-image: url("○○");"><div>

と書いてみたんですが、うまく機能しません。
スタイルシート指定しているところに更に入れ込むのはできないのでしょうか。

また、
<div class="box">
<div style="width: ○○px; height: ○○px; background-image: url("○○");">
<div>
<div>

とやってみたのですが、これも駄目でして。
なにか対応方法ありますでしょうか。

よろしくお願いします。

＞使い回ししたいので、背景のCSSは分けてHTML内に記載したいと考えています。
＞<div class="box" style="background-image: url("○○");"><div>
これから殴るよと言いつつ蹴りを入れて来るって事ですかね。

>>623
脳みそが不自由か？

><div class="box" style="background-image: url("○○");"><div>
ブラウザはboxクラスとstyle属性のどっちを選ぶと思う？

>ボックス自体は使い回ししたいので、
>背景のCSSは分けてHTML内に記載したいと考えています。

やめれ、クラスセレクタもうひとつつくれ

.box
{ /*プロパティ*/ }

.bk
{ background-image: url("bk.png"); }

<div class="box bk">
</div>

>>625
どっち選ぶと思う？
と聞かれても、それが分からないから初心者スレで聞いてる訳でして…。

<div class="box">
<div style="width: ○○px; height: ○○px; background-image: url("○○");">
<div>
<div>

↑これに関しても脳みそ不自由ですか？
教えてください。

div.box div.hogehoge {
　width: ○○px;
　height: ○○px;
　background-image: url("○○");
}

div.box div.piyopiyo {
　width: ××px;
　height: ××px;
　background-image: url("××");
}

とでも書いておけばいいんじゃね？（ﾎｼﾞﾎｼﾞ

>>626
クラスセレクタでボックスとスタイル別々に括ればいいだけだろ

>>628
クラスセレクタの意味はいま調べて分かりましたが、
実際どうしていいやらさっぱりです…。

良かったら具体例教えてください。
面倒だったら、申し訳ないのでいいです。

>>629
>>625の方法でいいんじゃない？クラスセレクタは.box {}の".box"の部分。
HTMLでclass="box"が指定された要素にマッチする。
http://www.kanzaki.com/docs/html/htminfo17.html#S32
http://hp.vector.co.jp/authors/VA022006/css/selector.html#class-selectors

う〜ん　上級者に見せてやりたいほど良い流れだ。

ウォッチャー気取りwww

>>623
書き方は合っているので、画像のURLが間違っているんでは。

皆様親切にありがとうございます。

もう少し色々いじってみます。
できたら報告しますね。

うおおおおおおおおおおおお！
できた。

こんな便利なやり方があったのか…。

皆様ありがとうございました。

http://www.itmedia.co.jp/news/articles/0803/04/news062.html

いい感じだな

IE8登場以後はCSS tablesを使ってカラムデザインをシンプルに
http://journal.mycom.co.jp/news/2008/03/04/031/index.html

登場後の阿鼻叫喚を想像して楽しんでるんだね

<html>
<body>
<div>
<div style="width:300px;float:left;border:solid 1px;">hoge1</div>
<br clear="all">
<div style="width:100px;float:left;border:solid 1px;">hoge2</div>
<div style="width:200px;float:left;border:solid 1px;">hoge3</div>
</div>
</body>
</html>

IEだと上段と下段がずれないのですが
Operaだとずれてしまいます。
両方でずれないようにするにはどうしたらいいでしょうか？

>>639
borderのpx分ズレるんでしょ。IE以外はそれが仕様通りだし、標準モードにすればIEも同じ。
例えばこうするとかね。
<div style="width:300px;">
<div style="border:solid 1px #000;">hoge1</div>
<div style="width:100px; float:left; border:solid 1px #000;">hoge2</div>
<div style="border:solid 1px #000;">hoge3</div>
</div>

>>640
ありがとうございました！！

<div id="main">
<div id="contents">
<div id="primary"></div>
<div id="secondary"></div>
</div>
</div>
<div id="side"></div>

#main { width:100%; float:left; margin-right:-300px;}
#side { width:300px; float:right;}
#contents { width:100%;}
#primary { width:49%; float:left;}
#secondary { width:49%; float:left;}

こんな感じで3カラムで右カラム固定幅、左の2カラム可変を作ろうと思って指定してるんですけど、
どうしても左のコンテンツがブラウザに対して49%の幅になってしまい、右カラムと重なってしまいます。
#contentsに対してmargin-right:300px;をかければ意図したとおりに表示されますが、
widthの%指定って包含ブロックのwidthに対しての割合ですよね？
widthはmargin,border,paddingを含まないはずなのに、なんでブラウザに対しての割合になっちゃうんでしょう？
（ブラウザサイズ）ー（ネガティブマージン）＝width では無いのですか？

MacIE5,Safari,Fx2,IE6,IE7,Opera,NN7で確認しましたが、全部同じような解釈でした。
解る方いましたら教えていただけませんか？

>>642
上級スレのテンプレ見れば解決する

>>642
実は#mainはブラウザ幅一杯に広がっているんだよ
ただし300px分の侵食可能域ができていて、その300pxに#sideが侵入してくる
で、#contentsは忠実に#mainのwidth一杯に広がる（ブラウザ幅一杯に広がる）

>>643-644
浸食可能になってるだけで、幅はブラウザに対しての100%って事になってるんですね。
私のwidthに対しての解釈とDWのデザインビューでの結果が同じだったのでかなり悩みましたｗ
すっきりしました。ありがとうございます。

各ブラウザ共通のCSSは可能ですか？
それとも、各ブラウザ毎に設定するほうがいいのでしょうか？

YES
好きにしろ

プロの方はどうされてるのかと思いまして
それも人それぞれなんでしょうか

プロのサイトのソース見ればいいじゃない

当方が対策してるのは、
firefoxで確認しながら制作したのち、IE6,7とMacで確認。
各ブラウザ毎に崩れたレイアウトを修正。

てかIE8の複数仕様に殺意を覚えたよ。

バルマーの禿げがやりそうなことだ

>>646
全てのブラウザを対象にすればそれだけの数のcssがいるわな。

でも、それは古いブラウザがあなたのもとになければ話にならないんだよ。
効果を確かめる事ができないから。

どこまでのブラウザを対象にして、どこからを切り捨てるのか、その判断をした方がいいでしょう。

俺は二度手間になるからIEで表示確認しながら制作してる
FirefoxはまともなCSS書いていれば普通に表示されるから最終チェック時に見るぐらい

初心者が失敗する方法をわざわざ書いて自慢大会か

凄いやり方だな…普通逆だろ。

>>653は悪いお手本

>>653は肛門に爆弾を抱えている

>>653
漢だな

>>653
firefoxでずれてた時、直す時は2度手間どころか3度手間にならないか？ｗｗ
前にfirefoxがIEエミュモードになっているのに気付かずにコーディングして酷い目に遭ったんだが。

IEでのみ動作確認している会社は信用できないわ。昔の職場そうだったけど今考えるとありえない

webコンサルって名乗っててもieでしか確認しないという凄い会社もあるしな・・・

今ウチの会社に来てるコンサルです。ホントカンベンしてください。・゜・(/Д`)・゜・。

CSSのついて教えてください。

http://seirei.s302.xrea.com/

1.margin: 0px auto;でセンタリングしているつもりですが
　やや右寄りになってる気がします。どこが原因でしょうか？

2.ブラウザでテキストサイズを変えるとテキストが隠れて見えなくなってしまいます。
　yahooとかだと枠も多きくなるんですが、どうしてるのでしょうか？

>>659
Firefoxで確認しないといけないぐらいニワカなのか？

ネタ乙

>>662
ネタにしてもつまらなすぎる
どんだけ素人なんだよ。話にならん

FirefoxなんてまともなCSSを書けば
仕様通り反映されるのにどうして確認が必要なんだよｗｗｗ

おまえらレベル低すぎｗｗｗ

ニワカ
Firefoxで土台を作り後からIE等のバグ回避作業

通常
それらすべての作業をIE上で終わらせる

要するに知識レベルの差だな

つまらん

>>661
1.<div align="center">に見えるんだが。
　CSSだけでならないとしたら（IEだろ？）互換モードになってるせい。
2.floatがclearされてないせい。

その他.doctypeは必ず一行目。

超初心者でCSSを覚えたてなのですが、
アシストしてくれるような使いやすい
エディタってありますでしょうか？

>>669
プロパティをアシストしてもらっても、知識がなかったらせいぜいtypoがなくなるくらい。
そのくらいなら仕様書や説明サイト首っ丈でプロパティコピペしたほうが初心者は楽。
ttp://hp.vector.co.jp/authors/VA022006/css/

通常サイトの場合、リンクにマウスを合わせたら指マーク??に変化します。
firefoxの場合上記のようになるのですが、IEだと変化しません。
どのようにすればIEでも変化するようになるでしょうか?

>670
同意だが首っ引きな。首っ丈は恋愛感情だ

>>671
div{width:100px height:100px;}

<a><div></div></a>とかやってない？

ゴメ
div{width:100px; height:100px;}ね。

別にdivで囲わないで、a{display:block;}にすれば良いのは分かってるんだけど、これもieの解釈が間違ってるの？
教えてエロいひと

>>671
・floatとかpositionとかの要素がaに被ってる。
・単に処理が遅くて、一瞬で変化しなかった。

>>674
IE6ではブロック要素にしたらちゃんとheight、widthを解釈した。

>div{width:100px; height:100px;}
どっから出てきた。

>>673-674
おそらくなっていません。
アドセンスは問題ないのですが、自己作成したリンクだけ>>671のようになってしまいます。
参考書片手に作成したので、なにか間違って制限をかけるようことをしてしまったかも
しれません。CSSで>>671のように制限をかけることも可能なのでしょうか?
可能だとすればどう表記すれとなってしまうのでしょうか?
質問がずれてしまいすみません。

>>675
・floatとかpositionとかの要素がaに被ってる。
という一文の意味がよくわかりませんが、

a:hover {
position: relative;

上記のようなものを見つけたのですがこれでしょうか?

>>675

＞>div{width:100px; height:100px;}
＞どっから出てきた。

いやie6ってさ、高さと幅を指定したブロック要素を<a>で囲むと、カーソルが変化しなくなるじゃない？
それのことかなーと思って。

>>677
それは(ものすごくエスパーだが)マウスを乗せたときにリンク文字がピコッと
動くやつだと思う。

positionは平気で上に乗っかったりする。
今回はaにrelativeだから、自分の予想している事態(*)にはなってないと思う。

*)┌──┐
　│　Ａ　├─┐
　└┬─┘Ｂ.│
　　 └───┘
こういう風に重なってたら、Ｂにリンクがあっても、Ａと重なってる部分では
マウスが指にならない(押せない)。

>>678
そんな現象があるのか。ごめん、自分が無知だった。
ためしにしてみたらなった。ちょっと感動した。

>>679
そうですそれです!!ほんとエスパーですね。
リンク文字がピコッと動くやつの効果を消したんですが、
リンクにマウスを合わせたら指マーク??に変化しなくて困ってます。
Firefoxでは問題ないのですがIEで表示するにはどう対処すればよいのでしょうか?

>>672
orz
おまえに首っ丈ってことでよろしく。

>>680
ピコッと動くやつは、あった方が嬉しいなら消さなくていい。
どのみち関係ない。

ところで>>674->>675はどうなった？
てか、該当部分前後のhtmlとcss晒したほうが早い。

http://sakuratan.ddo.jp/imgboard/img-box/img20080310115238.jpg

画を描きました。
ブロックをfloatでleftとrightで画像１のように指定したんですが、
ブラウザのサイズを小さくすると画像２のように縦にずれてしまいます。

ブラウザのサイズを小さくしても左右のブロックがずれないようにするにはどうしたらいいですか？

>>683
<div class="cb">
<div class="float">floatA</div>
<div class="float">floatB</div>
</div>
のように、フロートを収めるボックスをつくり、
.cb { width: 700px; }
.float { float: left; width: 300px; }
と、フロートの合計幅がフロートを包含するボックスの幅を超えないように
するか、
.float { float: left; width: 40%; }
と、パーセントでフロートの幅を指定するといいと思うよ。

質問です

<h1>タイトル</h1>
<p>内容</p>

*{margin:0; padding:0;}
h1{margin-left: 200px;}
p{float:left; width:200px;}

【結果】
　　　タイトル
内容

【理想】
内容　タイトル

なぜか【結果】のように、浮かせた(floatした)のに入り込みません。
h1とpを逆にすればうまくいくけれど、この順序のままでいきたいです。
positionを使わずにしたいのですが、どうすればいいでしょうか。

h1, p { float: right }でどう？

>>682
ピコッと動くやつ関係ないんですか‥。
・floatとかpositionとかの要素がaに被ってる。
・高さと幅を指定したブロック要素を<a>で囲む。
上記の2つ以外指マークに変化しない理由がないのならわかりそうにありませんね。

ピコッにpositon使うだろ。蒸し返してどうする。。

>>684
試してみます。
ありがとうございました。

>>687
>>682じゃないけど、おまえグダグダうるせえよ
さっさとソース出せ

>>686
なるほど！両方浮かせないと入らないんですね。
いろいろ調べたら、ネガティブマージンを使うみたいです。
tp://www.geocities.jp/multi_column/practice/3column1.html#fixed-liquid
一つ賢くなりました。ありがとう！

CSSのスレが多くてどこで質問したらいいか迷いましたが、ここで質問させてください。

できるだけCSSのみでプルダウンメニューを作ろうとしていたのですが、
OperaとFirefoxではサブメニューが出たのですが、IEだけ機能しなくて弱っています。

■HTML部（整形の都合上全角スペースを使用）

<ul id="mainmenu">
　　<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー1</a></li>
　　<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー2</a></li>
　　<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー3</a></li>
　　<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー4</a>
　　　　<ul class="sub1">
　　　　　　<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
　　　　　　<a href="#">サブメニュー1</a>
　　　　　　</li>
　　　　　　<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'">
　　　　　　<a href="#">サブメニュー2</a>
　　　　　　</li>
　　　　</ul>
　　</li>
　　<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー5</a></li>
　　<li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">メニュー6</a></li>
</ul>

■CSS部

/*-------------------------------------------------------------------------------
メインメニュー
-------------------------------------------------------------------------------*/
ul#mainmenu *{margin:0px; padding:0px; list-style:none; display:block;}
ul#mainmenu{
　　position:relative; width:912px;
　　font-size:16px; line-height:100%; font-weight:bold;
　　text-align:center; margin:0px auto; z-index:100;
　　}
ul#mainmenu li{
　　width:150px; height:28px;
　　background-color:black; text-align:center;
　　float:left;
　　}
ul#mainmenu li a{
　　position:relative;
　　width:100%; height:100%; padding:6px; text-decoration:none;
　　}
ul#mainmenu li a:link{color:white;}
ul#mainmenu li a:visited{color:white;}
ul#mainmenu li a:hover, ul#mainmenu li.on{background-color:#999999;}
ul#mainmenu li.off, ul#mainmenu li.on{
　　overflow:hidden;
　　border-width:1px; border-style:none solid; border-color:#cccccc;
　　}
ul#mainmenu li.on{border-bottom:0px; background-color:#cccccc;}
ul#mainmenu li.off{position:relative;}
ul#mainmenu>li.on{overflow:visible;}

/*-------------------------------------------------------------------------------
サブメニュー1
-------------------------------------------------------------------------------*/
ul#mainmenu li ul.sub1{
　　width:150px; height:28px;
　　text-align:left;
　　}
ul#mainmenu li ul.sub1{background-color:black;}
ul#mainmenu li ul.sub1 li a{
　　width:100%; height:100%;
　　padding:6px; text-align:left; text-decoration:none;
　　}
ul#mainmenu li ul.sub1 li a:hover, ul#mainmenu li ul.sub1 li.on2{color:white; background-color:#999999;}
ul#mainmenu li ul.sub1 li a:link{color:white;}
ul#mainmenu li ul.sub1 li a:visited{color:white;}
ul#mainmenu li ul.sub1 li.off2, ul#mainmenu li ul.sub1 li.on2{
　　overflow:hidden;
　　border-width:1px; border-style:none solid; border-color:#cccccc;
　　}
ul#mainmenu li ul.sub1 li.off2{position:relative; overflow:hidden;}
ul#mainmenu li ul.sub1 li.on2{overflow:hidden;}
ul#mainmenu li ul.sub1>li.on2{overflow:visible;}

以上のような構成でメニューを作ったのですが、
先述の通りIEだけサブメニューが出てきません。あとはどこをいじったら良いのでしょうか？
どなたか分かる方がいらっしゃいましたら、助言を頂けたら幸いです。

そんな糞長いソースを他人にチェックしろってのかよボケ
現象の出る最小構成ソース貼れアホ

長すぎて見る気がしないが
IE6は子供セレクタに対応してないこと知ってるかとエスパー

おれもエスパーに同意

>>629
>>629-694のソースをコピペしてみたが、IE6で動いたよ。
もしかして、これ↓使ってる？
http://www.stylish-style.com/csstec/ultimate/css-roll-4.html

>>699
海外のでは、IE対策にtable使ってた。参考までに。

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

(ﾟдﾟ)テーブルの問題じゃないだろ・・・

>>699
大元はそこのソースです。
ただ、olタグが本来の用途に使われてないのが気になったので、
どうせならいじり直そうと思ったのが災いしたみたいです。
おとなしくデフォルトのまま使おうと思います……orz

>>700
これも良さげですね。
ただ、htmlはできる限りシンプルにしたいので、参考だけにとどめておきます。
どうもありがとうございました。

header,コンテンツエリア、footerと要素があって
ｈｔｍｌ上ソースをフッターからかきたいのですがどうやればいいですか

あげ

いみふ

>>703
フッタから書くってこういうこと？
<body>
<div id="footer">フッタ</div>
<div id="header">ヘッダ</div>
<div id="contents">コンテンツ</div>
</body>

何でそんなことをしたがるのかなぁ

(C)ヘタレ会社　All rights reserves
これをぐぐるでひっかけさせたいとかじゃないよな？w

そもそもフッターって言ってんのになんで上に書くんだよ

position

　　春だなぁ・・・

春なの〜に〜春なの〜に〜♪

cssで２カラムのフレームを作ってメニュー部分だけスクロールされないようにする事は可能ですか？

css 疑似メニュー でググるよろし

間違った。疑似フレーム ね

>>714-715
ありがとう
ググってみます

サムネイルポップアップのスクリプトを設置しようとしているのですが､
// Insert your WebSnapr developer key here - get it free on www.websnapr.com
var developerKey = 'your developer key';の一番最後にある｢your developer key｣って所に何を入れるのかか分からないのです｡

developer keyって､サーバーのパスワードとかIDなんですかね？

717です｡自己解決しました｡スルーお願いします｡

http://www.j-cnet.co.jp/index.html
ここの中の枠はボックスですよね？
ボックスの角を丸くするにはどうすればいいですか？

単に丸い画像を背景に設定しているだけです

Web制作質問スレから、
誘導されました。

800x30pxのスペース内に
横並びのメニューをリストタグで作る際、
どのブラウザでも、
メニュー項目が中心に来るような設定はありますか？

marginやpadding、line-heightで調整すると、
ブラウザによってずれが出てきてしまいます。

div#sub { width: 16em; float: left; }
div#main { margin-left: 18em; }

<p>ほめぱげ</p>
<hr>
<div id="sub">
<p>ほげほげ</p>
</div>
<div id="main">
<p>はげはげ</p>
</div>

以下のように「はげはげ」が一行下がってしまうのはどうしてでしょう？
ちなみに<hr>を消すと同じ高さになります。これもどうして？

ほめぱげ
───────────────────
ほげほげ
　　　　　　　　　　　　　　はげはげ

>>721
できます。
基本難で勉強してきてください。
全部教えろってのはノーサンキュー。

>>722
IEだったらバグ。

>>721
<center>
<li>
</li>
<center>

overflowではみ出た文字を折り返して表示する方法を教えてください。

white-space: normal

言い忘れていましたが、セレクトボックスをプルダウン表示以外での場合でおねがいします。

>>727　悪いがどういう状態のなにを折り返したいのか、検討がつかない

例えば
ttp://www.htmq.com/html/select.shtml
このHPの下にある星座の名前がボックスの幅よりも長い名前の場合に幅よりも長い部分を折り返して表示したいのですが、わかりましたでしょうか？

>>725　簡単に調べてみたけど無理っぽいかも
別のやりかたとしては
折り返しをせずに選択の際にボックスを文字列の大きさまで増やすとか
liとJavaScriptを組み合わせて擬似的にプルダウンメニューにするとか

ここら辺でどう？

>>723,724
ありがとうございます。
すいません、書き漏れがありました。
水平中心ではなく、垂直方向です。

>>731
テンプレ

っとこっちにはないのか。
http://pc11.2ch.net/test/read.cgi/hp/1199354032/
ここのテンプレ

>>731
<ul class="menu">
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>

* { margin: 0; padding: 0; }
.menu li {
float: left;
display: block;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}

こんな感じ？

角丸のボックスを作りたいのですが、画像なしと画像ありだとどっちの方がいいんですか？
画像なしだと文法がひどくなる（？）みたいですが、
画像ありと比べてなにか大変なことってあるんですか？

どっちの方がいいと聞かれても何に対して良し悪しを判断するのか？
どちらにも利点と欠点がある。

>>753
画像なしだと画像を作る手間が省けるとか、CSSを触るだけで色を変えられる
とか、それくらいじゃないかな？
画像ありでもなしでも大変なことはないと思うが。

画像で高さ幅可変にしようとするとHTMLをいじらなきゃならない。
画像なしならHTMLをいじらなくて済む。

だが画像無しだとMacIEで表示されない

は？単に背景色なりボーダーなりだから
丸まらなくても表示はされるだろ？

角丸が表示されないって意味だろ普通にｗ

対応する必要もない

>>741
そんなのMacIEだけの問題じゃないし、なんでわざわざMacIE限定でものを言う？

canvas要素を使ってJavascriptで描けばおｋ

この際、Flashにしちまえよ

つーか角丸なんてもう流行らないからやめるがいいね

なんだかいろいろ回答ありがとうございます
少し勉強になりました
角丸、はやりませんか…でもせっかく教えていただいたので
画像使ってやってみます

ま　っ　た　く　理　解　し　て　な　い

SELECTボックス内の行数をSIZEで指定しているのですが、これをウィンドウの割合でSIZEを決め表示することって可能なのでしょうか・？

横or縦のサイズだったら%とかemで指定すればできるけど、行数って…

>>749
むこうで礼も言わずに来ただろ・・・

MacIEなんて切り捨てればいい
変に対応していくと何時までも使いつづける馬鹿が増えるだけ

我々はIE全般切り捨てて作るべきだ
糞ブラウザの解釈につきあうから世界が変わらないのだ

むしろIE以外を切り捨てるのが事実上の世界標準

個人的にはIE7で大きな問題はなくなった気がする
そしてIEを切り捨てるのもIE以外を切り捨てるのも世界標準ではなく糞サイト
ついでに>>752〜755はスレ違い

IEって全体の何パーセントぐらいの人間が使ってるんだろうか？
一番多そうな気もするけど

サイトにもよるだろうけど、全体の割合としてはまだ7割〜8割はいくんじゃない？
俺のとこだと、1割超えのだけだと

A)
IE6 62%
IE7 19%
Firefox 13%

B)
IE6 33%
IE7 14%
Firefox 36%
Opera 12%

って感じになってる
ちなみに俺はOpera使ってるんだけど、なんだか寂しいんだぜ…

safariは

>>758
ごめん圏外

safariで見られないサイトの可能性もあるな

IEを切り捨てたい。

…というのがサイト運営者の本音だろうけど
そうは行かない現実なんだよな。

画像を中央寄せにしたいのですが、できません＞＜
なんででしょうか？　↓

ソース
<img class="centering" src="画像のパス">

CSS
img.centering{
text-align:center;
}

>>762
img直書きなんてしないだろ。
然るべき要素で囲んで、そっちをセンタリング。

>>762
imgがインライン要素だから、画像のサイズがそのまま横幅になるのでセンタリングできない
イメージとしては、箱のサイズぴったりのこんにゃくが入ってたら中央寄せできないだろ？
img要素に横幅指定するとひどい事になるから、<p><img></p>とでもして
p要素にtext-align:centerを指定すればおｋ

>img要素に横幅指定するとひどい事になるから

　　　嘘はいかんぞ嘘は

背景を指定した場合ブラウザでは表示されるのですが、chmファイルにした場合に背景が表示されません。
chmファイルでは無効なのでしょうか？

body {
background-color: #605c58;
color: #dddddd;
background-image: url("img/a.png");
background-repeat: repeat;
background-attachment: fixed;
}

background-imageについての質問です。

>>765
いや、img要素に画像サイズと異なる横幅指定すると、縮小/拡大されるって事ね

>>766
ヘルプファイルだよね…？
普通のブラウザじゃ画像云々以前にchmの表示自体できない気がする
背景として使いたいなら、一旦画面キャプチャするなりして画像にしてからで

>>768
誰がchmを背景にしたいと言ってるんだ？

>>766
ここに背景画像が抜けてしまう症状について書いてあったけど、これかな
ttp://www.slock.co.jp/HTMLHelp/AdvHtml/02_Adv.htm

>>769
まさにそれですね。
ありがとうございます。

なんだか可愛そうな回答者がいるねえ・・・

いいかげんテーブル並に楽に段組みできる方法作れよ。

横並びが簡単に滅亡壊滅崩壊しまくる本来の使い方ではない
間違ったCSSの段組みはもうたくさん

ご自分でお作りになられたらいかがでしょうか ?

横並びが崩壊されないで横スクロールバーを出せってか。アホめ。

アホ言うもんがアホ

2度も言った奴はどうなるんだｗ

>>776
アホアホ

いやアッホホーだろう

春だな

春だなって言う奴がお花畑

うんばらほー!

CSSでプルダウンメニューを作りたくて、
ttp://www.k5.dion.ne.jp/~i-araki/css/pulldown.html
このサイトを参考に作ったのですが、

メニューブロックのすぐ下に
FLASH画像を置いているのですが、

MacのSafari, Firefoxでは正しく表示されますが、
Win IE6, Firefox, Safariだと、
プルダウンメニューがFLASHの下に隠れて表示されてしまいます。

どうにか最前面にだす方法はないですか？

>>782
それらへんの制御は多分無理

#000000と#111111の中間の色ってなんですか？#101010？

>>784
CSSの質問じゃなくて算数の質問だと思うんだが・・・
#080808

>>785
すみません…仕組みがいまいち分からなくて。
ありがとうございましたm(_ _)m

>>786
16進数だから、一桁が0 1 2 3 4 5 6 7 8 9 A(10) B(11) C(12) D(13) E(14) F(15)の16ある
#111111は#16 16 16 16 16 16って事だから、#000000との間は#888888ってなるわけ

ごめん間違えたorz

ｗｗｗ

ちょっと質問させてください
ttp://themes.wordpress.net/columns/2-columns/408/bosa-102/
このテンプレートを使用しています
テストランしてもらえればわかるのですが
Firefoxではフッターの下に1センチほどの隙間ができてしまいます
IEではちゃんと表示できるのですが隙間を改善する方法はありませんか？
よろしくお願いします

なぜ隙間ができるのか。その辺をまず自分なりに考えてみよう！

vertical-align:bottom;
という指定が必要なのかと思っていたのですが
いろいろ試してみても改善できず困っています

>>790
#wrap:after{}
↑この中にfont-size:0px;を追加

>>793
どうもお手数をおかけしました
ちゃんと表示できます
ありがとうございました

テーブルに１行ずつ線を引きたいと思っているのですけど、
どのようにソースを書けば出来ますか？

ちょっと日本語がおかしくなってました；
行の下にまっすぐな線を引くということをやりたいのですが、
やり方を教えてもらえませんでしょうか？

>>782
flashのwmodeをopaqueもしくはtransparentにする
flashを貼るタグはobjectタグとembedタグの両方があるので、どっちにも設定すること

>>795
tr { border-bottom: 1px solid black }など

それだけじゃ出ないだろ
table {border-collapse: collapse;}もいる

-index
-style.css
-[Ａ]
-[B]-[C]
-[D]-[E]

このような階層になっている場合、
[C]ディレクトリのhtmから外部スタイルシートを.
./../style.cssで表示上は読み込めているのですが、
生ログではすべて[C]内のスタイルシートを404で返してきます
[C]内にはスタイルシートを置いていないので。

[A]や[B][D]などのフォルダから読み込む際には
全く問題がないのですが、[C][E]のディレクトリだけ
エラーが出ます

解決策はありませんでしょうか
よろしくお願いします

>>797
ありがとう！解決しました。

ページ全体を#wrapparでまとめ、その中に
#header
#maincontent
#footer
を積み上げてるんですが、各要素のボックス間に空白ができてしまいます。
どうやったらぴったりくっつけられるのでしょうか。ご教授お願いします。

>>800
鯖の設定だろ。スレ違い。

>>802
まともに作ればできない。間違えてるんだろ、としか言いようがない。

>>802
* { margin:0 }

http://www.juken-senryaku.com/
スタイルシートをいじっていたら、レイアウトが崩れてしまいました。
どこの記述をおかしくしてしまったのかよく分かっていない状況です。
どこを直せば直るでしょうか？

>>803

css以外（インクルードしているphp等）は正常に読み込めるので
cssの問題だと思ったんですけど、鯖の設定なんですか

どーもｗ

>>802
paddingも0にしといたほうがいいよ。

cssリセットとかでぐぐってみそ。

bodyにline-height:1.4;と設定しているのですが
IE以外のブラウザでは反映されません
原因としてはどんなことが考えられるでしょうか？

>>808　単位がない

line-height にはあえて単位を指定しないっていう手法があったようななかったような

回答者が初心者でどうするんだよ・・・

>>808
その前どこかで;が抜けてるとか括弧が全角になってるとか

>>808
> line-height:1.4;

これは正しい宣言です｡

>>809
実数値だと､ フォントサイズに対する倍率として扱われます｡ それは仕様書に明記されています｡

>>810
line-heightには長さではなく､ フォントサイズに対する倍率を指定するのが定石です｡
(詳しくはウェブで調べたし｡)

で､ 原因ですが､ その宣言には問題がありませんので､ ほかのところにあると思います｡

>>808
原因はいろいろ考えられるので↓でチェックするといいよ。
http://jigsaw.w3.org/css-validator/

@wikiでCSSカスタマイズするとき、全ページのフォントサイズを
大きくするにはどうすればいいんだ？

“フォントサイズ「大」でご覧ください。”

>>814
「いいんだ？」

http://www.juken-senryaku.com/style/style.css
CSSのＵＲＬです。
なにかおかしな記述を見つけられませんか？

>>817
>>813

floatをclear

line-heightのことで質問した者です
みなさん、色々とありがとうございます
>>813でチェックしてみましたがＣＳＳ自体に問題はありませんでした
完全にお手上げです・・・

>820
メシ食ってうんこして寝る
　↓
次の日温泉に入る
　↓
このことは忘れる
　↓
そのうちに思い出して見直す
　↓
なぜかマズい点が見つかる！ふしぎ！

>>821
↓
そして何故か次々にまずい点が見つかる！
↓
１から書き直した方が早いことに気付く
↓
メシ食ってうんこして寝る
↓

えんどれす

>>820
予想した間隔と違っているから気付いていないだけで
実際には反映されてるんじゃないの？
line-height:5.8;
とかで実験してみそ。

>>824
ありがとうございます
やってみたのですが、全く変化はありませんでした

そこで試しにbodyではなく、Pの中にline-heightを設定してみたところ
IE以外のブラウザ（火狐）でも反映されるようになりました
なぜ、bodyがダメでPはいいのか、よくわかりませんが・・・

>>825
単にどっかで上書きしちゃってるとしか思えないんだが

チェッカーで調べて、原因はなにかいろいろいじってるんですが
自分でデザインしたＣＳＳでないので原因がいまだ突き止められません。

http://www.juken-senryaku.com/

>>827
おまえ・・・line-heightどころの問題じゃねーよ。
最初からやり直せ。

つーか、htmlの基礎からやり直せ

※ページデザインが壊れています。１週間以内に復旧させます。（笑）

ユーザビリティ向上のためにうちのサイトにも、
他のサイトで最近よく見るフォントサイズの変更ボタンを置きたいです。

それの設置方法が説明されてるHPありますか？

◆ 5行: 要素名に大文字が使われています。(META)
◆ 5行: 属性nameの値がクォーテーションで囲まれていません。
◆ 5行: 属性contentの値がクォーテーションで囲まれていません。
◆ 6行: 要素名に大文字が使われています。(META)
◆ 6行: 要素METAはこの位置には置けません。
◆ 7行: 要素titleはこの位置には置けません。
◆ 8行: 要素linkはこの位置には置けません。
◆ 9行: /headの前に、/metaが必要です。(⇒6行目参照)
◆ 9行: /headの前に、/metaが必要です。(⇒5行目参照)
◆ 17行: /spanに対応する開始タグが見つかりません。
◆ 22行: 属性colorの値がクォーテーションで囲まれていません。
◆ 27行: /aの前に、/imgが必要です。
◆ 32、36、37、38、行: 要素名に大文字が使われています。(SCRIPT)
◆ 38行: /Aの前に、/imgが必要です。
◆ 38行: 要素名に大文字が使われています。(/NOSCRIPT)
◆ 56行: olの中に通常文字を記述することは出来ません。
◆ 73、74、75、76、79、80、81、82、86、87、88、89行: 要素liはこの位置には置けません。
◆ 149行: /bodyの前に、/divが必要です。⇒11行目参照)
【 文法チェック結果： ◆エラー 36, ◇情報 0 】

>>831
JSスレ

業者の人にトップページ作ってもらったのにこんなにダメ出しされるとは…。

>>834
何かいじくったのが原因だろ･･･

>>831
それがどんなのかわからんけど、IEのフォントサイズ変更みたいのならJavaScript
でもそれだとJavaScript切ってると使えないし、ブラウザ側での操作と併用できないから意味無い気がする

CSSで
body {font-size: 1em;}
body.small {font-size: 0.8em;}
body.large {font-size: 1.2em;}
みたいにして、ボタン押した時にSSIとかPHPで個別にクラス名を出力するとかはどうだろうか

>>834
ひどい業者だな…
でも未だにテーブルレイアウトな業者もあるし、Validかどうかって点なら大抵の業者はダメ出しされる気がする
テーブルレイアウトじゃなくても、使う必要のないdiv要素使いまくってたりね
とりあえず、元がどんなのかわからんから直し様がない
あといじるときはバックアップ取ってからやった方がいいよ

ミドルページ見ると普通にweb標準とかは意識しないで作られたサイトっぽいね。
それをよく分からないのに自分で弄っちゃってどうしようもなくなったのかｗ
なんにしても業者は悪くないだろうなこれはｗｗ

>>831
jsで動くのならコレ。
tp://hyper-text.org/archives/2007/10/css_switch.shtml

何となくソース見て>>805はこんな感じにしたいんだろうなぁと思った
http://www.vipper.org/vip776604.jpg
＞なにかおかしな記述を見つけられませんか？
とりあえず今後も業者を頼らず自力でやろうと思うのならhtmlから勉強するんだ。
そちらの言葉を借りるなら
「苦労をすれば学力が上がる」とは限りませんが、「苦労をしないで学力を上げる」ことはできないのです。
だｗ

>>843
おいおい…まじで素人がやったんじゃないのかよ...
空要素の記述も間違ってるし、ありもしないspanの終了タグもあるし...
そもそもソースの記述が汚い

間違えた、>>843じゃなくて>>834だった

皆さんありがとうございました。
ＣＳＳの知識がほとんどないので自力で勉強して直していきます。

>>839その画像の通りです。

>>805
#container #main .con {
clear: both; /*これを追加*/
}
.con_main {
background-color: #E4EEF8;
margin-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
overflow: auto; /*これを追加*/
}
これで一応いけるんじゃねぇ。
でもソースが・・・この機会に勉強してみれば！

CSSにしろHTMLにしろPerlにしろ、ミスが無いというのは難しいものだが、
後からのメンテナンスを考えると作りながら如何に綺麗に書くかがポイントだな。

殴り書きなんかしたら後から何処に原因があるのかわからんし。

>>843
半分直りました。ありがとうございます。
また、自分でいろいろいじって直していきます。

>>836
丁寧にどうも

PHP辺り勉強します

>>826
どういうことですか？

>>847
826じゃないけど

#a{color: red}
#b{color: blue}
#c{color: white}
#a,#b{color: black}

この場合、#aの文字色はどうなるか。

緑だな

どういう

red+blue=#ｆｆ00ｆｆ
white+black=#808080

#ｆｆ00ｆｆ+#808080=?

A）#c080c0

いやいや、何故blueとかwhiteが出てくるんだ？
#aだけならred+blackにしかならんだろう
ってそもそも違うのにまじめにつっこんでも意味がないんですよね

バカかお前ら
何色でも黒を混ぜると黒になるんだよ。
小学校でやっただろが。

芸人殺すにゃ刃物はいらぬ、普通にマジレスすればいい。