/* CSS・スタイルシート質問スレッド【52nd】

くだらん質問でもうしわけないのだが...

縦横100pxボックス 中身を縦位置を真ん中にしたいのです。

CSSに vertical-align:middle; を追加しても
中身の「あいうえお」は上のまま...orz
中身は増えたり減ったりするんでpaddingは×
win-IE forefox mac-safari forefox でみれればいいのですが…

CSSとHTMLは以下のよう

#mybox{
width:100px;
height:100px;
background-color:#FF0000;
}

<div id="mybox">
あいうえお
</div>

table使わないと無理

>>538
FAQ見てないだろ

すみません；

http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
このへんですね

簡単にはいかないことは理解できました…
しょぼーん；

これ見ても標準モードじゃ解決してないみたいだし？

アホがいるな。

>>538
強引にline-height: 100px;でいけんじゃね？

padding: auto auto;じゃダメなんだっけ？

ずみﾞまﾞぜんﾞ

divのボックス作って、そのボックス内の縦横の中心に、文字が来るようにするにはどうすればいいのですか？

くんなよｗ

すみません。初歩的な質問ですみません。
h1とh2を横一列に並べて表示させたいのですが、
ブラウザのサイズを変更していると
ブラウザのサイズに合わせて文字が改行されていってしまいます

white-space: nowrap;
をh1とh2それぞれに指定すると
それぞれのHは改行されないのですが、
どんどんブラウザの横幅を小さくすると
カクンとh1の下にh2が着てしまいます。

横幅を狭めてもカクンとならないようにするには
どのようにしたらよいのでしょうか？
よろしくお願い致します

<div class="header">
<h1>あああああああああああ</h1>
<h2>ああああああああああああああああああああああああああああ</h2>
</div>

h1とh2はdivで囲っています

>>548
初歩的というより
そ　ん　な　こ　と　や　ら　な　い　で　く　だ　さ　い

ありがとうございます、解決いたしました

>>546
文字を画像化して
div {
background-image:url(画像化した文字のURL);
background-repeat:no-repeat;
background-position:center center;
}

恐れ入ります、困っています。初心者ですが教えていただけませんか。
ホームページビルダーV8で外部スタイルシートを使いました。
自分のパソコン上ではきれいに表示されるのに、
サーバーにアップロードしたら
外部スタイルシートを読み込んでくれません。
どうしてでしょうか？

>>553
パスが違うのでは？

>>554さん、ありがとうございます。
合っていると思うのですが...。
htmlファイルと同じ階層に置いても問題ないですよね。

>>555
CSSのURLを直接叩いてみ。

http://www.jfast1.net/~seiko/index.html
このサイトの左右にコンテッツと配色との間に
ぼやけた縦線がありますがどうやってるのでしょうか？
ソースを見ましたがどうやってるのかわかりませんでした。

>>557
背景画像

>>557
これ
http://www.jfast1.net/~seiko/back_left.gif

A:hoverを使って、ポイントすると画像の下に下線を表示させるようにしたいのです。
Win+IE6.0では思っていたとおりにできたのですが、
Firefoxで動作確認すると大きくデザインが崩れてしまうのです。
具体的にはIEでは画像の直ぐ下に線が引かれるのですがFirefoxでは数ピクセル下に表示されます。
以下スタイルシートの一文です。（対象aタグのidはnavi）
A:HOVER#navi{
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : black;
}

どこを正せばいいですか？

a {
display:block;
width: 200px;
height: 40px;
background-image: url('bg.png');
}

a:link{
position: relative;
top: 10px;
left: 10px;
float: left;
vertical-align: 50px;
}

>>560
IEを標準モードにする。

>560

a img { vertical-align: bottom;}

こうかな！？

スタイルシートでページつくったのですが
どうも重いみたいでCPUの温度が上がる気がします
重すぎてスタンバイにも落ちないような気もします
ブラウザはIE６です

そうだすか。

新しい強力なファンと高速なCPUを購入しましょう。

>>556さん、ありがとうございました！
直接たたいたところでわかりました。
スタイルシートのファイル名が日本語になっていたからでした。
英語になおしたら、ちゃんと表示されました！
（ビルダー、警告してくれたらいいのに...）
あ〜、嬉しいっ！！皆様本当にありがとうございました。

・・・・・？

ここのテンプレートを使用したいと思ってるのですが、
http://sozai.wdcro.com/template/temp16_20.html
横幅を固定させたいのですが、どうすればよいでしょうか？

CSSで横幅を固定してください

widthを指定したりすればいいんじゃね？

widthでピクセル指定してるんですが、なんか全体に反映しないんですよ。
bodyじゃダメなんですか？

もー、幅はばハバhavaうるせー！！！！！！！！
少しは検索しろ！クズ！

CSSにJavaScript書いて
<div>で囲んで(画像なんかを)使えると
とっても便利！だと思うのは俺だけ？

言ってる意味がさっぱりわからんが、たぶんおまいだけ

>>575
まずおまえの日本語を便利にしてくれないか

>>573
havaじゃなくてhave aの方がいいぞ。

>>573
HAVA固定がダメなんです＾＾

色々とご意見ありがとうございました。
最終的には>>561さんのを参考にしました。

>>425 >>426
激しく遅レスなんだが、サンクス。
ちょっくらCSS入れてくる。

初心者で申し訳ないのですが
例えばdiv class="main"でHTMLに指定したら
その設定ってCSSにはdiv.mainで指定するんですか？
classとidがよく分かんないんです･･･
divでいろいろ固定したいのですが･･･よろしくお願いします。

divでいろいろ固定すんな。
idとclassの話しはさんざん既出。

>>582
そうです、が、初心者という自覚があるなら、
せめてテンプレの解説サイトくらいは目を通した方がいいと思います。
基礎が判らないと結局つまずきまくりとなります。
近道はありません。

ありがとうございます。
あまりいい解説サイトを知らなかったのですが
擬似フレームこれから見ます
ありがとうございました

できたー！！！
しつこいですが、本当にありがとうございました

外部ＣＳＳで
a { color: #1e78be; line-height: 120%; }
a:visited { color: #a87ca8; line-height: 120%; }
a:active { color: #323232; line-height: 120%; background-color: #cd7d7d; }
a:hover { color: #323232; line-height: 120%; background-color: #cd7d7d; }
div.mail { color: #000000; }

というように色を指定しているのですが、下記のソース内のリンクの文字色だけを黒色にするにはどう修正すればいいのでしょうか。

<div class="mail">
  お問い合わせは<a href="mailto:[email protected]">[email protected]</a>まで。
</div>

>>587
メールアドレスへのリンクにIDでも付けて、そのIDに設定を付ける。

>>588
わざわざ時間を割いてくださって、ありがとうございます。
早速試してみることにします。

background-imageなどのurl()で指定できる画像の種類は
どういうものが使えるのでしょうか。
MIMEtypeが「image/〜」のものだけでしょうか。
それともブラウザ等によっても違ってくるのでしょうか？
>>2のCSS2の仕様書の邦訳を見てもそれらしいものが見当たらなくて。

>>590
一般Web画像と同じ。
jpg/gif/png（mngはとりあえず除く）

body {
font-size: 94%;
line-height: 150%;
background-image: url(01.gif);
scrollbar-arrow-color:#8f6743;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#d2b596;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color:#8f6743;
scrollbar-darkshadow-color:#ffffff; }
で、スクロールの変更が反映されないのですが、どこがいけないのでしょうか？

>>591
どうもです。
mngは通常のimg要素で対応してないブラウザでは当然cssでも対応してないもんですよね。
よく考えればわかることですよね、すみません。
というかflashをbackground-imageにできないかと妄想していました。すみません。

>>592

> スクロールバーの色指定は、
> IE5.5では<BODY>タグへの指定で有効となりますが、
> IE6では<!DOCTYPE>宣言の内容により、
> <BODY>タグのみへの指定では無効となる場合があります。
> IE5.5とIE6の両方でスクロールバーの色指定を有効にするには、
> <HTML>と <BODY>の両方にスタイルシートを指定してください。
>
> 尚、Netscape Navigator等の
> スクロールバーの色指定に対応していないブラウザでは
> 無視されるので注意してください。

上記いずれかに当てはまる予感。

>スクロールバーの色指定に対応していないブラウザ
対応しないのが正しい仕様なのに・・・

したいと言う人にはさせてあげたい！

>>596
あードキュメントの宣言だと思います。
ありがとうございます！
スクロールバーの色を変えるのはうざいと分かりつつも変えてしまいます。

>>597
うざい故意犯だな。

評価されるのはサイト運営者だから別にいいじゃん。
IEユーザでかつスクロールバーの色が変わっていることに抵抗のない閲覧者は残るし、
IEユーザでかつスクロールバーの色が変わっていることがうざい閲覧者は離れていくし。
ここで回答したからといて最後まで責任を持たないといけないわけじゃない。

>>599
だから「評価」してるんじゃないのか？ｗｗｗ

聞き分けのない子には
ここであーだこーだ言うよりも直接訪問者数に影響して考えを改める結果になったほうが

というかIEなんか使ってないから関係ない罠

したいと言う人にはさせてあげたい！

じゃあしたいんでcontentsに対応してくださいMS。
じゃあしたいんでapplication/xhtml+xmlに対応してくださいMS。

たぶんなのだが>>575の言いたいことは
CSSでIDかclassに直接JavaScriptを書いておいて、
そのIDかclassで指定するとCSSに書いてあるJavaScriptが
作動する・・・と言うものなのではないのか？と推測してみるのだが？

これが出来ると俺も便利だと思う。

どうせサークルのサイトなんで内輪しか使わないし
観覧者数なんてどうでもいいんですよ。
スクロール変更機能が廃止になるってなら使いませんが。

>>606
スクロールバーだけじゃなくあんたもうざいから消えてくれないか。

>>605
なんで、cssファイルに書かなきゃならんのだ？
jsファイルに書けば良いだけだろ。

>>605
つ【behavior】

>>605
つ【expression】
どうしようもないIEにのみ使うもので
どれにでもできてもただ煩雑になるだけ。

>>607
どーでもいいのにあーだこーだ言うからだろ

#link A{
color : #0000ff;
text-decoration : underline;
}
#link A:HOVER{
color : #ff80c0;
background-color : #d7ffff;
text-decoration : none;
}
---------------------------------------
<html>
<body>
<div id="link">
<a href="index.html">こんな感じで？</a>
</div>
</body>
</html>
<body>


こんな感じで？JavaScriptを動かしたいと？

あ！ごめん
最後の<body>がよけいだった・・・・。

>>611
どうでもよくないので両方消えてください

protorype.jsの新しいやつだとちょっとCSS風の指定ができるらしいよ

prototype.jsじゃなく
protorype.jsかあー

きゃー間違えた///

>>612
こんな感じも糞も、id class をターゲットに簡単にJavaScript動作させられるのに、何を言いたいわけ？
つか、css スレなんすけど。

cssで擬似フレームして、メニューバーのリンク先を
このフレームの中に入れる！みたいにするのはどうやってやるの？

>>619
根本的に勘違いしてそうだが、
擬似フレームではナビ部分とメイン部分が同一ファイルだ。
つまりリンクで移動した先に、同じナビ部分とメイン部分があれば
メイン部分だけ書き換わったように見えるだけ。
これは擬似フレームを使わない場合と全く同じ。

>>620
ということはやはり、外部ＵＲＬをある擬似フレーム内にリンクさせることは
不可能ってことですか？

>>621
だから、ただのページからページへのリンクだっつーの。
できないはずない。
いいか、擬似フレームというのは、別のページが二つくっついてるわけじゃないんだ。

>>621
擬似フレームのページをCSSを切って見てみれば理解できるかも。

初歩的かもわからないんですが困っています。

<div ID="contents">
<div ID="left">左に配置</div>
<div ID="right">右に配置</div>
</div>
--------------------------------
#contents {width:700px;}
#left {float:left; width:200px;}
#right {float:left; width:500px;}

こんな感じで作ってるんですが、

WinIE6では
#contentsの中に#leftと#rightが収まるんですが
Firefoxだと
#contentsを突き破って#leftと#rightが下にはみ出します。
というか#contents自体が表示されません。
IEと同じように表示させるにはどうすればいいでしょうか？
根本的に何か間違ってるんでしょうか

>>622の言ってることは分かってるんだけど
外部ＵＲＬってのは他のサイトですよ？それも可能ってこと？

<CENTER>
<TABLE border="0" width="770">
<TBODY>
<TR>
<TD colspan="2" class=td_left_back>Title</TD>
</TR>
<TR>
<TD colspan="2" class=td_left_back>Menu</TD>
</TR>
<TR>
<TD width="250" class=td_left_back>SideMenu</TD>
<TD>Main</TD>
</TR>
<TR>
<TD colspan="2" class=td_left_back>test</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

.td_left_back {
background-color: #FFFFFF;
background-image: url(back_left.gif);
background-repeat: repeat-y;
}
.td_right_back {
background-color: #FFFFFF;
background-image: url(back_right.gif);
background-repeat: repeat-y;
}
http://www.jfast1.net/~seiko/
このサイトのやり方ぱくりたいのだがやり方いまいちわからんorz

>>624
まず、IEを標準モードにしてみてごらん。

>>625
わかってないわかってないｗｗ
擬似フレームとページ組み込みは全く別の問題だということを早く理解汁。

>>627
早速ありがとうございます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
↑いま、これになってるんですが、これでいいんでしょうか？

>>624
・#rightのfloat:leftを外す
・:afterを入れる

>>627
いや、わかるって
１つのページでそれぞれフレームに見えてるだけだってことは。
その「フレームに見えてるテーブルのような部分」に
例えば外でレンタルしてる掲示板を入れることっていうのはできるのかできないのか
できるなら何を使ってやるのかヒントをいただきたい

>>628
>>>5

すまん、「入れる」というか「入っているように見える」
つまりその部分もフレームのようにする秘策みたいなのはあるのかってこと

>>630
擬似フレームはなしにして考えろ。
CSSも一切入れてないHTMLに、別のページを埋め込むにはどうしたらいいと思う？

>>633
分からん･･･a hrefとかじゃなく？
なんていうかデザインをそのまま崩すことなくレンタル掲示板やらレンタルフォームやらを
使えるようにしたい

>>629
初心者ですみません
>afterを入れる
ってのはどういうことでしょうか？

>>634
ヒント：スレ違い
HTMLの仕様書を読んできたほうがいいとオモ。
HTML4.01なら二つ方法があるよ。
XHTMLなら一個かな。

>>635
after擬似要素を使う方法のことかと。
擬似要素がわからないなら、別の方法にしたほうがいい。
要するに、floatさせると通常のフローから取り残されるから
親コンテナは「中身がない」と見なしちゃうのが正しい動作。
つまり「中身がある」と親に思わせればいいわけ。
片方をfloatじゃなくさせるの方法は、そういう理由。

background-imageを二つ指定したいのですがどうすればいいのでしょうか？

background-image: url(aaa.gif);
background-image: url(bbb.gif);

background-image: url(aaa.gif,bbb.gif);

って感じに試したのですが・・・

>>637
それはCSS3（草案）にしかない。
対応してるブラウザはSafariのみ。

>>636
なるほど！
つまり、もしフッダーがあるならそこまでを#contentsの中に入れてしまえば
解決ってことですか？

それでおＫ

>>637
入れ子にしたボックスにそれぞれの背景画像を（ｒｙ

>>636
XHTMLかーそこまで学ぶのはちょっと余裕ないから無理っすわ
ありがとうございました

・・・HTMLを学ばずにCSSを学ぶとはこれ如何に

>>643
何度もすいません最後に１つだけ教えてください
フラグメント識別子でできますか？

と思いやってみたけどできるわけねー･･･

>>644
関係ないですよ・・・
iframe/objectあたりを調べてみ。

・・・645は何がやりたかったんだかわからなくなった。

インラインフレームかー
できそうな気がしてきた！スレ違いなのにみなさんどうもありがとう！

しかしiframeを使うんだったら、初めからフレームでもいいような希ガス・・・

よく考えたらフレーム使いたくない派なんだった･･･
なんか自分でもよくわかんなくなってきた

>>650
objectで。
iframeはすでにXHTMLでは廃止されてる。
ただそうするとIEがヤバめだが。
表示がうまくいかない可能性はあるが、
SSIで埋め込むという手もなくはない・・・・が、HTMLの二重入れ子になる。

質問のスレを移動するのでそっちで見かけたら教えてください･･･

質問のスレを移動するのでそっちで見かけたら教えてください･･･

>>652
初心者質問スレになると思うが、
あっちだと確実に「フレーム使え」でFAになると思うぞ。
Strictスレで聞くとしたら絶対的にiframeは悪、objectでFAになる。
まずおまいさんのやりたいことをしっかりと定めてからにしたほうがいい。
とりあえず
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html

以前のIEだと、padding,border,width,marginあたりの実装が、異常だったと思うのですが、
現行のブラウザに合わせて、これらを作成した場合に、古いIEで完全に崩れるという状況になるのは
やはり諦めるしかないのでしょうか？

>>654
ありがとうございます
埋め込み文書ってやつですよね
読めば読むほどわけわかめ

>>654
widthとpaddingとborderを同時に指定しなきゃいいんじゃね

これだけ丁寧に教えてもらって理解できないんだから諦めろ。
自分でも調べようとしてないしな。

>>658
調べてはいるよ
ずっと現在進行形です
>>654のところも２時間前ぐらいから読んでるし

>>655
バージョン毎に振り分けるという手はある。
が、俺は個人サイトなら多少崩れてもいいんじゃないかと思う。
可読性が無くなるほどの崩れだったら考えるけど。

>>660
レスありがとうございます。
バージョン毎に振り分けるってのは、ページ自体を分けるってことでしょうか？
それとも、javascript等を使って実装するということでしょうか？

>>661
分けるべき部分のCSSだけが各々別ファイルで、
振り分ける方法はJSや呼び出し元のハックで。

http://ex14.2ch.net/test/read.cgi/news4vip/1141058833/
誰かｺｲﾂを助けてやってくれ。
ﾌﾞﾛｸﾞのCSSをあり得ないほど破壊し尽くして手に負えなくなってるｗ

>>663
一旦全部テンプレのままに戻せ、
そして修正一つごとに確認する方法に変えるんだ、
とアドバイスしろ。

>>662
やはり、CSS記述自体ではどうしようもない問題、ということですね。
ありがとうございました。

>>665
CSS　ハック　でググってみ。
望むものが見つかる筈。
あとは、div id="test1"の中にdiv id="test2"を入れて、
1にwidthを設定し2にmarginとかpaddingとかを設定するって方法もあった筈。

あー色々試したけどもうむりぽ・・・気がついたら朝かよorz
<TABLE border=0 width=772>
<TBODY>
<TR>
<TD nowrap width=1 class=td_left_back></TD>
<TD nowrap width=770 colspan=2>Title</TD>
<TD nowrap width=1 class=td_right_back></TD>
</TR>
<TR>
<TD nowrap width=1 class=td_left_back></TD>
<TD nowrap width=770 colspan=2>Menu</TD>
<TD nowrap width=1 class=td_right_back></TD>
</TR>
<TR>
<TD nowrap width=1 class=td_left_back></TD>
<TD nowrap width=250>SideMenu</TD>
<TD nowrap width=520>Main</TD>
<TD nowrap width=1 class=td_right_back></TD>
</TR>
<TR>
<TD nowrap width=1 class=td_left_back></TD>
<TD nowrap width=770 colspan=2>CCCCCCCCCCCCC</TD>
<TD nowrap width=1 class=td_right_back></TD>
</TR>
</TBODY>
</TABLE>

.td_left_back {
background-color: #FFFFFF;
background-image: url(back_left.gif);
background-repeat: repeat-y;
}
.td_right_back {
background-color: #FFFFFF;
background-image: url(back_right.gif);
background-repeat: repeat-y;
}

残念ながら、何がしたいのか意味不明。

>>669
http://www.jfast1.net/~seiko/
の左右にあるぼんやりをぱくりたい

単に端に画像を配置すればいいだけだぞ？

>>671
画像関係のスタイルやったことないから全然わからないorz

全然わかりません＞＜

<TD nowrap width=8 class=td_left_back></TD>

<TD nowrap width=8 class=td_right_back></TD>

こんな感じにしたらいけた。

わからないときは極限までシンプルにすればいい。
これで理解できたら、次はtable使わずやってみ。

<style>
*{margin:0;padding:0;}
.td_left {
background-image: url(back_left.gif);
background-repeat: repeat-y;
width: 8px;
}
.td_right {
background-image: url(back_right.gif);
background-repeat: repeat-y;
width: 8px;
}
</style>
<table>
<tr>
<td class="td_left"></td>
<td>中身</td>
<td class="td_right"></td>
</tr>
</table>

>>665
よく読んでくれ。
呼び出し元のハック、というのは
CSSでCSSを呼び出すときの問題だ。

仕様書にid属性使用時の注意があるようですがよくわかりません
1.5の「HTMLの構造要素の利点」ってなんですか？

何の何バージョンの仕様書だよ
あと何がどう分からないのかも書けよ

初心者ですが、

<P>タグだと、改行に一行空白が入ってしまいます。
その空白を無くす方法と、
文章の行間は変えずに
その空白の高さを指定する方法を教えてください。
<BR>を使わなくてはいけないのでしょうか。。

>>679
CSSデザインの基本は
* { margin : 0; padding : 0; }
ここらへん参考にがんばってみ。
ttp://deztec.jp/lecture/rn/index.html

>>679
そんな時こそスタイルシート使えばいいんじゃない？

ttp://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs1-09.htm
ttp://www.tg.rim.or.jp/~hexane/ach/lbcs/lbcs3-07.htm

有難う御座います。頑張ってみます。

* { margin : 0; padding : 0; }
の理念が理解出来そうになかったらまた来ます。(^^;

>>683
えーっと、pの上下にスペースが空くのは、CSSで余白で取られてるせいなのね。
で、*（全要素）の余白をゼロにして殺してやってるわけ。
もっと基礎のほうがいいかな。
ttp://www.k2.dion.ne.jp/~spag/
ttp://pasokon-yugi.cool.ne.jp/website_kouza/

>>684
有難う御座います。丁度今その部分を理解したところです。

デフォルトの余白の取り方がブラウザによっても違ってしまうから、
最初に全ての要素のmarginとpaddingを殺して、
自分で設定しなおすのが一番わかりやすいんだよな。

body {
line-height:1.2;
margin:0;
padding:0 0.5em 0em 0.5em;
font-size:100%;
color:#000; background-color:#fff;
}
p {margin:0.2em 0;}
ってとこかね、基本は。

line-heightは1.0、pのマージンは無しがゼロに近くね？
背景色は指定無し。

emは便利な単位だと思うが、
bodyのpaddingに使うってのは凄い違和感がある。
勿論間違いではないけど・・・・ねえ

全然違和感はない。

>>687
丁度いい感じに無難って感じだな。
悪くないと思う。

ただ俺はpaddingとmarginはいつも0指定でいくな。

とりあえず、ブラウザのデフォのスタイルをリセットするＣＳＳ
をコピペしる。
age

何様

殿様

どこのスレにも変なのが湧いてるなぁ。

無駄な独り言レスをしつつ自分は変ではないと思うその認識。最大限守ってあげたい。

守って守って

ieではcssのみでポップアップメニュー（でいいのかな？）て出来ないのでしょうか？
ttp://css.maxdesign.com.au/listamatic2/vertical11.htm
を参考に作ってみたのですが、ieのみ動作しません（例はスライドするタイプですが）。

ieでも使えるcssのみのポップアップメニューってどうすれば作れるのか教えてもらえませんか？
それともjavascriptが必須なのでしょうか？

ポップアップメニューって窓開けるでしょう？

cssだけでは無りっしょ

　それと、用語は正しく使わないと正しい答えは出てこないよ。

嘘ｲｸﾅｲ

target="_blank"

こっちにまできたのか139。

>>698
ttp://www.stylish-style.com/csstec/ultimate/css-roll-4.html
これをCSSのみと言うかは別の話だが。

初心者なのですが、

スタイルシートを使って場所を指定した場合、IEの窓の大きさを変えるときに画像が一緒にスクロールしてくれません。
一緒にスクロールさせることは可能でしょうか？
ソースは、

<img src="material/menu.gif" width="303" height="600" style="position:absolute; bottom:0px;>

です。
ウィンドウの下部に固定したいのですが………
わかる方どうぞ教えてください。

>>703
absoluteの挙動を誤解してるんで、まずそれを確認して恋。
ttp://hp.vector.co.jp/authors/VA022006/css/visualren.html#position
それをやりたいなら「IE Fixed」でググる。

>>702
リンク先見ました。
99%ってのがいまいち分かりませんが、こんな感じです。
有り難うございました。
ポップアップメニューではなくプルダウンメニューっていうんですね。

>>705
JSを切ると動かないから＞99%

>>705
どちらも通称だから適当で構わない。

通称だからこそ、よく通じてる名前を出さないと
困るのは自分なんだけどなー

IE7でbeforeとか使えないんですが、
正式版になったら対応してくれるんですか？

M$に聞いてください

>>704
どうにか実現出来ました。
どうもありがとうございました。

tp://www.netmania.jp/styles-site.css
このファイルの中身、ちゃんと改行されてないのだがなんとかならない？？

(´･ω･｀)知らんがな

>>712
うちではされてるよ。Macレガシーの改行コード(CR)で保存してるんでしょう。
UNIXの改行コードはLF、Windowsだと改行コードはCRLFだからね。でも
どれでもブラウザは問題なく読むはずだからおk。

>>712
改行されてるよ。
DOS/Windows形式じゃないだけで。

HTMLに
<div id="l">あいうえお</div>
<div id="r">かきくけこ</div>
とあった時にブラウザ上で
┏━━━━━━━━━━━━━┓
┃あいうえお　　　　　　 かきくけこ┃
┃　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
┃　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
┃　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
┃　 　 　 　 　 　 　 　 　 　 　 　 　 ┃
┗━━━━━━━━━━━━━┛
のように最初のdivを左寄せに、後のdivを右寄せに
それぞれ同じ高さに表示させる方法を教えてください。


今思いついている方法は
#r{text-align:right;margin-top:-1em;}
後のdivを文字を右寄せにして上マージンをマイナスにするやり方
#r{float:right;margin-top:-1em;}
後のdivの回り込みを右にして上マージンをマイナスにするやり方
#r{text-align:right;position:relative;top:-1em;}
後のdivを文字を右寄せにして配置方法を相対にして上にずらすやり方
#r{position:absolute;right:0;top:1em;}
後のdivを文字を右寄せにして配置方法を絶対にしてrightを指定するやり方
などが思いつきますが他の方法もありますか？

両方floatじゃダメなの？

<div id="r">かきくけこ</div> を先に持ってきて、
#r に幅と float: right; って指定すればいいと思う。

自分が試してみたら両方floatだとうまくいかなかった。
書いたソースが悪かったのかも知れないけど。

>>716
フロート50%で左右にもってきて、かきくけこのほうはtext-align:right。

<style type="text/css">
body {margin:0; padding:0;}
div {border: 1px #000 solid;}
div.contents {width: 600px;}
div.left {float: left; width: 200px;}
div.right {float: right; width: 200px; text-align: right;}
div.center {clear: both;}
</style>
</head>
<body>
<div class="contents">
<div class="left">hidarihidari</div>
<div class="right">migimigimigi</div>
<div class="center">mannnaka mannnaka mannnaka mannnaka</div>
</div>
</body>

で、だめすか。

div divしやがってこのー

FONT-FAMILY:Verdana,Arial,"ＭＳ Ｐゴシック",Osaka;
こんな感じにフォント指定したら左の方が優先？

>>721
まあ3番目はpでもいいんだけどさ、黒枠つけてレイアウトを
可視化するのに行数少なくて便利だったから、今回はdiv厨。
ようは

・両方に配置したいブロック要素に明示的に幅を指定する（%でもemでもpxでも）
・それぞれをfloat: left、float: rightする
・右側はtext-align: rightする
・次の要素でclear: bothする

ということだよね。

>>722
そう。

CSSのコメントは、/* ふんにゃか */　が基本なんですか？
色んなサイトに行っても、
// ふんにゃか
の形式でコメントしてるのは見たことありません。

オレも見た事ありません。
終わり。

稀に馬鹿が間違って<!-- -->にしてるのなら見たことあります。

#これはコメントです
#これはコメントです
#これはコメントです

<!--コメントを書きます--!>
ワラタ

どうもありがとう
#r{float:right;margin-top:-1em;}にする

>>730
負のマージン入れるんだったら、floatはいらないぞ？

ボックスを中央揃えした時にfirrefoｘなどで見た場合、
横にスクロールバーが出ているときと出ていないときでは
スクロールバー分くらいセンター揃えがずれてしまうのですがどうしたらいいでしょうか。

横スクロールを出さない設計で、100%内にwidth（+padding）を収める。

>>733
レスありがとうございます
横スクロールでは無く、縦スクロールなのです・・・
書き方悪くてすいません

>>734
無理。

スタイルシートを使うときって改行を <br /> にしたほうがいいの？
スタイルシートを上手に使ってるサイトは <br /> になってるみたいだけど
<BR>との違いがわからない・・・orz

┏━┯━┯━━━┓
┃　 │　 │　 　 　 ┃
┃　 │　 │　 　 　 ┃
┃　 │　 │　 　 　 ┃
┃　 │　 │　 　 　 ┃
┃　 │　 │　 　 　 ┃
┗━┷━┷━━━┛
って感じに背景色を三種類に分けて境目には
Border色をつけたいのですがどうすればいいのでしょうか？
結構探してみたのですがどこのサイトも一色だけでした。

>>736
<br>と<br />はHTMLかXHTMLかの違い。
本当にStrictHTML+CSSでやってる人間はbrを使わずにpだけのところが多い。
brってのは「改行したい」という見栄え用だからfontと変わらないという意見が多い。
Strictスレの過去ログでも読んでおいで。

>>737
高さを揃えてborderで行うのはJSでも使わないと無理。

スタイルシートで背景色を一括で指定する方法どうやるんだっけ？
スタイルシート忘れまくりｗ

つ【テンプレ】

>>737
z-index をマイナスにして位置を絶対指定した img を並べて置くとか (リピートが
必要なら div を使う)。

>>741
そんなバカなことするんだったら
初めから全コンテナの背景画像として縦方向の繰り返しにして
フタと底をくっつけたほうがマシじゃ…

久しぶりに来てみたら なんだこのラベルは！

じゃあラベルを上げてくださいよ神

>>742
ゴメン、質問を見間違えてた。
｢背景画像を3種類｣じゃなくて単に「3色」だったのね。
img も background-image も全然関係なかったわ。

>>735
そうですか。。。
ありがとうございます。

>741が消えれば少しラベルが上がりそう・・・

741が一人でこのスレのラベルをコントロールしているのか。ある意味すご

７４３　７４４　７４７　７４８が自演くさい
７３７　７４１も同一人物？

たぶん749 750 751も同一人物だよ

わーい俺お前ー

あれ、俺はどれと同一人物なんだ

というか>>749の全角数字は何とかならんものか。

俺がお前でお前が俺で

float:right;　したやつを左側の底の部分に合わせたいんですけど
（左の方がサイズ大きい）
そんなことできましたっけ。

>>755
できません。
親コンテナの背景画像でそれっぽくごまかすのが常套手段。

そうですか。やっぱり背景にしないと駄目なんですね。
ありがとうございました。

どこかのWEBサイトで拾ったCSSデザインなのだが・・・
ソース見てスタイルシート見てたらいまいちわからない部分があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<STYLE TYPE="text/css">
<!--
BODY{
color : lightslategray;
font-family : Verdana;
background : url(bb2.gif) repeat-y 20% 0px ghostwhite;
font-size : x-small;
}
A{
color : lightslategray;
text-decoration : none;
}
a:hover{
color : lightblue;
text-decoration : underline;
}

.note{
padding : 19px 0px 19px 30%;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class="note">
<P><B>SAMPLE PAGE</B></P>
メニューは<BR>
<BR>
<FONT color="#000000"><P class="<B>menu</B>"></FONT><FONT color="#cc0000"><A href="page1.htm"></FONT>
about this site<FONT color="#cc0000"></A></FONT><FONT color="#000000"></P></FONT><BR><BR>
のようにクラス名menuのP(段落)で囲んでます。すると左側に●が出てきます。<BR>
</DIV>
</BODY>
</HTML>



の
background : url(bb2.gif) repeat-y 20% 0px ghostwhite;
0pxってありますが何の大きさなのでしょうか？

20％がleftからの距離で0がtopからの距離です

本題より、素敵すぎるマークアップのほうが気になる

物理マークアップ等を無視しても
入れ子状態とかP要素のクラス名とか感動的。

久しぶりに物凄いマークアップを見た。

マークアップって何？

<abbr title="HyperText Markup Language">HTML</abbr>

marginの指定に関する質問なのですが、たとえば
margin: 10% 5% 5% 10%;
のように、パーセント指定をしても良いものでしょうか？

％指定をしてもきちんと反映はされるのですが、ぐぐってみたところ
CSSの解説サイトでも、pxで指定してるところばかり見るので
正しくない記述なのかもしれないと不安になったので。
よろしくお願いします。

>>766
ttp://hp.vector.co.jp/authors/VA022006/css/box.html#margin-properties

#test {
background-color:yellow;
font-size:10px;
width:185px;
hight:100%;
}

<div id="test">
testtesttest
</div>

上記のようにすると下の画像のようになりますが
http://jisaku.u-satellite.net/uploader/files/1141304519.jpg
185pxの幅で上から下まで背景色を伸ばしたいのですがどうすればいいのでしょうか？

>>768
ttp://www.mozilla.gr.jp/standards/webtips/webtips0032.html

>>767
大丈夫みたいですね。ありがとうございました。

段組に関する質問です、よろしくお願いします

AAAAA　BBBBBBB
AAAAA　BBBBBBB
AAAAA　BBBBBBB
AAAAA　BBBBBBB
AAAAA
AAAAAAAAAAAAA
AAAAAAAAAAAAA
AAAAAAAAAAAAA
AAAAAAAAAAAAA

とやる方法があれば教えてください。A,Bは文章で、Bは幅固定です。
左右逆の形は実現できたのですが、
上の形だとfloatするためにはAの幅を指定しなければいけないような、
でもそうするとBの下にまで広がってくれないような…

解決策はあるのでしょうか。

b {
displar:inline;
float:right;
}

<div><b>B</b>A</div>

すみません、ひとつ抜けていました

携帯などCSSオフの環境ではAを先に、Bを後にしたいので、
Bを先に書いてBにfloat:right;を適応するという手が使えない、という状況です

よろしくお願いします。

既に回答が…本当にすみません

>>773
無理。
文字サイズ固定ならBを絶対配置して
Aを二つに分けて無理矢理それっぽく魅せることはできるけど。

>>775
わかりました、どうもありがとうございます

一括で左寄せをしたいのですが
body {
text-align: left;
}
でできないみたいで・・・

何も書かなければ左寄せになるじゃろが！

>>778
スタイルシートで作った擬似テーブルを中央に寄せたくて
<center>
<div class=擬似テーブル（メニュー）>
hogehogeメニュー
</div>
<div class=擬似テーブル（本文）>
hogehoge本文
</div>
</center>
実際にclassは日本語使ってません

ってしたのですが、そうするとhogehoge本文とメニューの文字が中央になってしまいました。
divで囲んでるその他のも中央になってしまったのです。
擬似テーブルだけブラウザの真ん中に持っていく方法はないのでしょうか？

>>779
FAQの2では?

｡･ﾟ･（ﾉД｀）･ﾟ･｡ ｳﾜｰﾝ
まじでｽﾏﾝかった。CSSファイルを上書きしてなかった。orz
こんな単純ミスをするなんて・・・

テキストの質問よろしくおねがいします

BODY {
font-size : 100%;
background-color : #ffffff;
color: #000000;
text-align : center;
margin-top :30px;}
#main{
text-align : left;
}
#main p{
margin: 10px 10% 20px 70px;
text-align : left;
}

こんな感じで指定してテキスト書いてるんですけど、これとは違う大きさの文字や位置、幅で
テキストを書きたいので、main p　の他にもう1つ指定をしたいんです
そういう場合、＜p＞の代わりになる文字って何でもいいんですか？
一応調べたんですけど、見つけられませんでした
p2とかって指定はできないですよね？
#main moji{〜〜〜
って指定とかでもいいんでしょうか

p要素にclass属性をつけるのはダメなのかい？

ありがとうございます、調べてやってみました

#main p,test{
〜〜〜〜（指定）
}

で、HTMLの方は
<div id="main">
<p class="test">

って書くので大丈夫ですかね？
われながら恐ろしいほど低次元な質問ですいません

>>782
ttp://www.k2.dion.ne.jp/~spag/
ttp://pasokon-yugi.cool.ne.jp/website_kouza/
基礎を勉強しておいで

ちっとあれだけどな・・・

>>785
読んできました。ありがとうです
ていうか激しく難しいですね。なんでみんなできるんですかね・・・・

ちょっとアレって、一応は動くけど、わかる人がみたらﾌﾟｹﾞﾗって感じですかね？
難しいっすね・・・

ていうかこの速さで読み切れる天才なら簡単だと思う、マジで。
そこにもちょっとした間違いはあるけど、って意味のアレ>>786だと思うけど、
そこらのタグ講座なんかよりはずっと正しい記述だから、
後々まで参考にしても問題はないと思うよ。

>>788
あ、読んだっていっても自分の必要そうなページのみなんですけどね・・・
ぎっちり読み込んでみます。
ありがとうございました。

>>789

>>264

それを引用する意味がわからない。

なんで？

時計の見方を今まさに勉強しようとしているのに
>（・・・時計の見方を勉強すればいいのに・・・）
はおかしいだろ

次々質問しているわけでもなく、そして>>793だからね

aにblock要素をつけて背景画像を配置し、a:hoverで別の画像を配置しました。
ロールオーバーをCSSでやっているのですが、なぜかIE6.0でみると
ロールオーバーはされるものの、リンクのテキストが別のテキストと被って
表示されます。

これはIE6.0のエラーなのでしょうか？それともCSSの組み方の問題でしょうか？

それだけではなんとも・・・

>aにblock要素をつけて
・・・たぶんaセレクタにdisplayプロパティでblockを設定、という意味だよね？
書き方が悪いだけだと思う、ソースがないとこれ以上のことはわからないけど。

↓こんな感じです。ロールオーバーした時に、思い切り上下のテキストが被ります。

#sidebar a{
height: 22px;
width: 190px;
padding-top: 8px;
padding-left: 10px;
color: #000099;
text-decoration: none;
display: block;
background-image: url(side_back.jpg);
}
#sidebar a:hover{
background-image: url(side_hover.jpg);
}

質問です。
テーブルのcellpadding="5"にあたるものをCSSでやろうとすると、どうすればいいでしょうか？

>>799
FAQ12

>>798
上下のテキストが被るってどういう意味？

>>798
a:link{height…

>>799
td{padding:5px;}

>>802
別に:linkにする必要はないはずだが。

>>798
IE6でまともにできたんだが。これ↓でもなるんだったらあんたの環境がおかしいんじゃ。

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

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<!-- あ -->
<title></title>
<style type="text/css">
<!--
#sidebar a{ height: 22px; width: 190px; padding-top: 8px; padding-left: 10px; color: #000099; text-decoration: none; display: block; background-image: url(side_back.jpg); }
#sidebar a:hover{ background-image: url(side_hover.jpg); }
-->
</style>
</head>
<body>
<p>テスト</p>
<ul>
<li id="sidebar"><a href="#">テスト</a></li>
</ul>
<p>テスト</p>
</body>
</html>

すまん一部XHTMLの記述になってるとこ直して。

>>804
大丈夫でした。以下のように新たに作成したのですが、特に適すとが
被って表示されるとかありませんでした。なにか他が影響しているのかもしれません・・。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#test a{height: 22px;width: 170px;padding-top: 8px;padding-left: 10px;color: #000099;text-decoration: none;display: block;background-image: url(side_back.jpg);
}
#test a:hover{display: block;background-image: url(side_over.jpg);}
</style>
</head>

<body>
<div id="test">
<ul>
<li><a href="#">ああああ</a></li>
<li><a href="#">いいいい</a></li>
<li><a href="#">ううううう</a></li>
</ul>
</div>
</body>
</html>

いやだから被るの意味がわからん。
まあ他のところのせいだとわかったんならがんばり。

>>806
あと余計なお世話だけどxml:lang="ja"とlang="ja"をhtmlにつけといて。

皮被りがトラウマになってんのとちゃうん？

さっきの問題ですが、私のPCのブラウザの問題でした・・・

ノートパソコンで見ると、変な現象は起きませんでした。
お騒がせ致しました・・。

ちょｗｗｗ再インストールしたほうがいいよ

floatを使用して、ごくごく普通の2段組なレイアウトを作成しています。

#head
-------------
#menu | #main
-------------
#foot

な感じの。ですが、IEで #menu の要素の下端まで
#main の内容が3ピクセルほど右にずれてしまう現象に悩まされています。
解決方法、原因等を教えていただければと思います。

【スクリーンショット】
ttp://www.occn.zaq.ne.jp/cuffm500/cmz82jtr/sample.gif

【ソース】
ttp://www.occn.zaq.ne.jp/cuffm500/cmz82jtr/index.html
ttp://www.occn.zaq.ne.jp/cuffm500/cmz82jtr/style.css.html

#main {
float: left;
background-color: #ccc;
}

CSSレイアウト楽しすぎ＼(^o^)／
さらばテーブル。

>>813
それだと左がpx固定の場合リキッドデザインにならないんじゃなかったっけ？

そういえば、俺は左と右の間に境界線入れたくて
四苦八苦して背景色のborderを入れたんだよな。
逆に境目できてしまう場合もあるのね。

>>812 既出。
http://cssbug.at.infoseek.co.jp/detail/winie/b151.html

>>813
それも考えたのですが、#main の幅をウィンドウいっぱいまで
取りたかったので断念しました…。

>>815
フォローありがとうございます。
左の #menu の幅を固定して、右の #main の幅を可変にする
リキッドデザインが前提である事を明記しておくべきでした。

>>817
ありがとうございます。しかし、「具体的な値を明示」とありますが、
#main の幅は可変にしたいので、width に具体的な値を明示する事はできません。
というわけで、

height: 100%;

としてみました。
確かにずれは直りましたが、今度は #menu と #main の間に妙な隙間が開いてしまいました。
こちらはどのように回避すれば良いのでしょうか？

【スクリーンショット】
ttp://www.occn.zaq.ne.jp/cuffm500/cmz82jtr/sample2.gif

っていうかもうIE使うのマジやめて…。

#menu {
width: 200px;
float: left;
background-color: #f60;
margin-right: -200px;
}
#main {
float: left;
background-color: #ccc;
width: 100%;
}

>>819
>margin-right: -200px;

ﾜﾗﾀwww

Lucky bag::blog: IE で min-width を指定する方法
ttp://www.lucky-bag.com/archives/2005/05/ie_minwidth.html

すいません。

(･∀･)ﾊﾟｯﾃﾞｨﾝ♪ (-∀-)ﾏｰｼﾞﾝ♪ (*ﾟ∀ﾟ)=3ﾎﾞ〜 ﾀﾞ〜♪
↑この顔文字が生まれたスレってどこでしたっけ？

>>822
ここの過去スレ。番号は忘れた。

<div id="main">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
■<br />■<br />■<br />■<br />...
</td>
</tr>
</table>
</div>

---------

#main table {
position: relative;
left: -3px;
}

回避成功！！！
…自分でも馬鹿だと思ったorz

>>823
どうにかして知る方法はありませんかねぇ。
せめて過去ログ読むツールがあればいいのですが（●もモリタポも無くて..）

にくちゃんねるにないの？

質問です。

http://trashtoy.dw.land.to/html/test1-short.html
http://trashtoy.dw.land.to/html/test1-long.html
http://trashtoy.dw.land.to/html/test2-short.html
http://trashtoy.dw.land.to/html/test2-long.html

このようなデザインのページを作ろうと思っています。
WinIE, Gecho, Opera で確認したところ
test1〜は、Gecho と Opera では問題がなく、
WinIE では高さが短すぎるページ(test1-short)で白い背景が途中で切れてしまいます。
test2〜では、WinIE では問題がなく、
Gecho と Opera では高さが長すぎるページ(test2-long)で白い背景が途中で切れてしまいます。
どのブラウザでも背景が途中で切れずに表示される方法がありましたら教えてください。

ちなみに、MacIE や Safari や Konquerer などではきちんと表示されますでしょうか？
(特にセンタリングされているかどうかが気になります)

ハック使え

>>827
標準モードにしてみて

>>829
あれ？　HTML 4.01 Strict で作ってあるはずだから、もともと標準モードのはず
・・・と思ったら、文書型宣言を間違えていましたorz

今度は validator で全ページチェックして HTML 4.01 Strict であることを確認したので
ちゃんと標準モードになっているはずです。でも結果は >>827 と全く同じでした・・・

>>830
WinIEはmin-heightに対応してないよ。IE用にはbodyにheight。
だからそれ以外のためにちょっと調整が必要。
ttp://www.stylish-style.com/csstec/ultimate/height100.html
参考。
ところでGechoじゃなくてGeckoな。
ついでに今ので文書型直したの？システム識別子ないとMacIEで互換モードになるよ。

>>827
bodyの背景に真ん中が白い画像をrepeat-yで解決

ul, li を使ってメニュー項目を横に並べたいと思うのですが
display:inline; を使うのと float:left; を使うのとどちらがお勧めですか？

どちらもリストマーカーが消えそう。
消えない方法を考えてみて。

>>833
floatはバグがあるので display:inline にしてる＜俺

初心者です。すみません、WinIEだとちゃんと表示されるのですが
モジラだとフッタが表示されません。なぜだか教えてください。。

#wrapper { width: 590px;}
#header { height:125px;}
#flame { position: relative; width: 590px;}
#sidebar { float: left; width: 133px;}
#maincontent { width: 375px;}
#footer { clear: both; height:123px;}

/*HTML構成*/
<div id="wrapper">
<div id="header"></div>
<div id="flame">
<div id="sidebar"></div>
<div id="maincontent"></div>
<div id="footer"></div>
</div> <!-- flame 終了 -->
</div> <!-- wrapper 終了 -->

ｳﾜｯ

>>833
俺は

背景画像を使って横表示のボタンメニューにする時はfloat
テキストだけのメニューならdisplay: inline

>>835
inlineだって使い方によっちゃバグあるし、ケースバイケースでしょ。

>>836
それだけのHTMLだとちゃんと表示された。
本物はどっか間違えてるか別のところで打ち消してるか。

>>839
ありがとうございます。本物はこれにmarginとpaddingとbackgroundを
追加しただけなのですが・・なんでだろう。むー。

>>840
下ので試してみ。よかったらその他の装飾足してってみ。
因みにこっちのMozillaのバージョンは1.7.12。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title></title>
<style type="text/css">
<!--
#wrapper { width: 590px;}
#header { height:125px;}
#flame { position: relative; width: 590px;}
#sidebar { float: left; width: 133px;}
#maincontent { width: 375px;}
#footer { clear: both; height:123px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="flame">
<div id="sidebar">sidebar</div>
<div id="maincontent">maincontent</div>
<div id="footer">footer</div>
</div> <!-- flame 終了 -->
</div> <!-- wrapper 終了 -->
</body>
</html>

>>841
解決しました。
CSSファイルの#footerの上に｝が余分に入っていたのが原因でした；；；
少し慣れてくるとこんな初歩的なミスに気付かない＠
大変ご迷惑をお掛け致しました！

ttp://love.meganebu.com/~yupontkd/cgi-bin/bbsv_50/comment.cgi
↑の掲示板（自作）の一番上のスレだけがなぜかボーダーがうまく表示されません。
CGIのループ使ってるので、他のスレとソースは同じです。
IEで、スクロールすると、一番最初に表示されていた部分以外は消えてしまいます。
NNとFxでは発生しませんでした。
私のソースが悪いのでしょうか、それともIEのバグでしょうか。

tableのthのテキストを縦書きにしたいんですが、何か方法はありませんか？

<th>ここですよ</th>


ここですよ

↓

こ
こ
で
す
よ

IE専用のwriting-mode以外で良い方法がありましたらお願いします。

あと、Strictなので1文字ずつ<br />を追加すること以外でお願いします。
また、ユーザビリティも考慮しているので文字サイズ固定やwidth指定以外でお願いします。

>>843
原因はよくわからんが、とりあえず

１コメント単位の
pass<input type=password size=8 name=pass>
<input type=submit value="削除">
<blockquote>
<font face="ＭＳ Ｐゴシック">12222</font>
</blockquote>
</blockquote>　＜大杉
<span class=fm></form></span>　＜前後の　span　/span　大杉

HTMLがおかしいと表示も崩れるからその辺からコツコツ直してみ

>>844,845
th{width:1em;}

blockquoteって引用の？

>>847
text-align:center; も足しておくと吉

>>847,849
ありがとうございます。
IEではうまくいきましたが、FireFox等では小さい「ッ」だけ横列2文字になってしまいます。

ぶら下げ処理までいじれってか？ｗ

>>850
後出しでアウト。二度と来んな。

ッの前に半角スペース入れるとか

writing-mode:tb-rl
IEでしかつかえないけど。

自分は１７歳（高２）の女、兄は２０歳（大学生）。
一緒には入らないからどうでもいいけれど、兄が風呂から出てきたとき、
下をタオルで隠しているつもりらしいんだけど、おもいっきり見えている。
つっこみたいけど、とても言えない。
自分も年頃ですから、何とかしてください。（見慣れてないから？）
自分のような意見の人も、少なくないはず。

>>854
>>844に
> IE専用のwriting-mode以外で良い方法がありましたらお願いします。
って書いてますな・・・

>>855
visibility: hidden

じゃあjavascriptでどうだ。
ttp://hp.vector.co.jp/authors/VA022533/tate/note.html

<タオル>
<ちんこ />
</タオル>

タオル {
height: ; /* ここにタオルの長さを指定 */
overflow: hidden;
}

nrhd

>>845
> あと、Strictなので1文字ずつ<br />を追加すること以外でお願いします。

そもそも論として、これ、おかしくね？

strictはbr使っちゃいけないのかと

聖書を曲解する勘違い原理主義者はアボーションを禁止する。
仕様書を曲解する勘違いストリクターはbrの使用を禁止する。

多用はしちゃいけないはずだな。

質問お願いします。長い文章サイトにのっけてます。下のような感じ。

abcabcabcabcabcabcabcabcabc
abcabcabcabcabcabcabcabcabc
abcabcabcabcabcabcabcabcabc

　　　　　　------

defdefdefdefdefdefdefdefdefdef
defdefdefdefdefdefdefde〜〜〜

abcの上には180pxくらいの余白を意図していて、最初はそれを<p>タグの中に指定してたんですけど
話の転換部に「------」って記号入れちゃってるので
そこで<div style="text-align=center;">------</div>とやると
続いて<p>def〜〜の文が始まるとき、その180pxの余白も当たり前ですが引っ張ってくるので
ものすごくdefの上が空いちゃうことに。

結局今は、<P>タグでは上部マージンの設定をせず、別途上部マージンを指定して
文章の最初にそのタグをまず入れるという方法を取ってます。
でもなんかこの指定方法って、無意味なタグを1つふやしてる気がして落ち着かないんですが…
CSSで上部マージンを指定するより、<br>で空けちゃう方がいいってことはありますか？

<div style="text-align=center;">------</div>
これがそもそもの間違い・・・・。

>>865
class id を調べましょ。テンプレのサイトに載ってるでしょ。

このスレで、糞コテがウェブページを作ろうと頑張っているみたいです。
「CSS CSS」ってさっきから五月蝿い。

稲だが、俺のＨＰが着々と作られてるわけで(`⊇`)
http://etc4.2ch.net/test/read.cgi/male/1136345233/l50

>>851
おまえかわいいな。

>>852
おまえきもいし意味不明。死んで詫びろ。

>>853
レスありがとうございます。

>>856
そうなんです。ありがとうございます。

>>861-863
おまえらはStrictの意味をよく勉強してくれ。
その後レス職人になることを推奨する。

>>864
よくわかってらっしゃる。
レスありがとうございます。

>>866
あれ、<div>でやるのが正しいって聞いたんですけどね。

本物の844なんだとしたらキモすぎる・・・
好意的に見られるレスなんか返さなきゃよかったorz

とりあえずID表示させてみて>>844

>>870
意味段落をdivで囲うのは合っている。
しかし意味段落の句切れを------なんて意味のない「言葉」で書くのは間違い。
divだけや見出しや、せいぜいがhrだ。
ttp://members.jcom.home.ne.jp/pctips/www/MarkUp.html

>>872
は？俺WnyZa9Fgじゃないからｗ勘違いすんなｗ

>873
＞小説等では「小見出し未滿」の場面轉換が良くあります。
＞書籍では、さう云ふちよつとした文章の區切れを、屡々★とか※とか云つたマークで示します。
＞★や※をセパレータに使ふ事も考へられますが、hr要素を用ゐるのも手です。

そのサイトでも★や※は「考えられる」と書いてあるし、
場面転換に記号を使うこと自体はマズいことではないのでは？

>>874
メール欄空白でヨロ
やらないかもしくは別IDなら、別人としてスルー

>>875
小説では激しく邪道な気がする。
コラムとかにしても、行間を開くか小見出しをつければそれで良い。
CSSとは離れるから議論するつもりはないが。

邪道っていうか普通にあると思うが。
見出しと言うか、注釈みたいなののマークアップとしての使い方だけど。

見出しとしてはいいんじゃない？
ただ、それこそ真ん中あたりに★や※を並べて小説の場面転換とするのは
なんつーか、幼稚な感じがするね

>>875
あのな、考えられるけれども、
それはあくまで「本文じゃない」んだから、それをやるとしたら
直書きではなくてCSSのcontentプロパティで追加、という「装飾」になるの。

ＩＥブラウザの対応状況が一番ウザイ今日この頃
だからって一般的に一番使われてるのＩＥだし無視できないし・・

無視したい欲求＜IEの客を逃がしたくない欲求
なんだから諦めれ。
欲求の大きさの向きが変われば、諦めるものも変わってくる。

実際ＩＥ完全無視でＣＳＳ組んでる人間っているんですか？

CSSでいけてるサイトすれだかで、そんなのあったな。
IEではボロボロで崩れまくり。
Firefox推奨で、Operaだと普通に見れた。

>>883
XHTMLでapplication/xhtml+xmlだとCSS以前の問題でIEバイバイ。
某方面にはけっこう<del>いる</del><ins>いた</ins>。

まぁサイトによってはFirefox80%超えとか言ってるし、あっち方面は。

application/xhtml+xmlでもIEで読めるよ
ダウンロードしてからだけどな！

>>883
組み始めるときはいつもIE無視
最後に調整するけど多少意図通りでなくてもキニシナイ

h2要素に
　padding : 1em 0 0 0.3em ;
　border-style : none none none solid ;
　border-left-width : 0.5em ;
と指定します。ちょうど、見出しの左側に大きめの四角が描かれるような感じです。

ところが、HTMLで

<p>
<img src=〜 style="float:left;">本文…
</p>
<h2 style="clear:both;">見出し</h4>

とすると、なぜかh4に設定したpadding-topだけが2倍になってしまうのです。
この例では、本来1emなのが2em相当になってしまいます。

どこか指定が間違っているのでしょうか??

×なぜかh4に
○なぜかh2に

ちなみに表示イメージとしては…

+----+　本文あいうえお
|　画　|　かきくけこさしす
|　　　 |　せそ。
|　像　|　
+----+

■
■ h2見出し

てな感じです。

俺はFireFoxもまだまだバグだらけで好きじゃないなぁ。

あと、文法が間違っていて仕様から外れているHTMLを
頑張って表示しようとするIEの努力は認めてあげたい。
そのせいで、おかしなHTMLが氾濫しているのは確かだがｗ

>>865
その区切りを含んだWebページを音声ブラウザで読んだら、
「ハイフンハイフンハイフンハイフンハイフン・・・」
ってなるわけですよ。うざいでしょ？
そんなわけで、そういうことをやりたいのならせいぜい hr あたりが妥当だと思うのだが。

>>889
とりあえず
> <h2 style="clear:both;">見出し</h4>
これはh2なの？h4なの？

間をとってh3かな

>>893
ほんとだ
ﾜﾛｽ

>>891
プログラミング言語のように仕様から外れたら一切表示しないような作りばっかりだったら
ここまで間違ったHTMLがはびこることもなかったと思われ。

tableのcolgroup要素はth要素やtd要素を縦方向にグループ化するけど、
実際のマークアップでは入れ子にはならず
th要素やtd要素はcolgroup要素の直接の子要素じゃないですよね？
それで、colgroup要素にスタイルを指定した場合、
そのcolgroup要素によってグループ化されているth要素やtd要素にも
スタイルが反映されるのが正しい動作なのでしょうか？
それとも反映されないのが正しい動作なのでしょうか？

反映されるのが仕様だが、実装はブラウザ次第

>>898
レスどうもありがとうございます。
確実に反映させたい場合は各th要素・td要素にclass属性を振ったほうが安心ですね。。。

>>897
反映されるプロパティにはかなり規則があったとオモ

>>896
でもブラウザがここまで広い心を持っていらっしゃるお陰で、
htmlは一般的に普及したんじゃ？

むしろ普及しない方が良かったとも言える。
HTML的というだけじゃなく、情報的にもゴミが増えた。

ゴミ情報あふれるここでゴミレスしている君が言えたことか。

にちゃんは全部便所の裏の落書き

便所の裏ってどこだろう。

俺の家か。

便所の裏にあるのか

ゴキブリか

便所とゴキブリは結びつかなくね？

連続した空白類文字を一切無視する（レンダリングしない？）方法ってありますか？
white-space:normal;みたいな感じで、
一つだけ空白が入るのすら無しにしたいんです。

>>910
word-spacingでマイナスの値。
但しemは文字の高さの設定だから、
どのサイズでもぴったり間隔無しってのはフォントによっては難しい。
monospaceとかなら-0.5emだと思うが。

>>911
説明不足ですみません、えっと、後出し小出しになりますが、
リストを入れ子にした場合、

（マークアップ例）

<ul>
　<li><a>ほげ１</a>
　　<ul>
　　　<li><a>ほげ２</a></li>
　　</ul>
　</li>
</ul>

（レンダリング例）

・ほげ１
　・ほげ２

a要素をdisplay:block;すると
ieは「ほげ１」と「ほげ２」の間に空白文字が入って変な空白の行が入るんです。
以下のような感じです。

（レンダリング例）

・ほげ１

　・ほげ２

続きです。

たぶんdisplay:block;にしたためにwidthが100%になって
改行やタブインデントが押し出され空白として見えてしまったんだと思い、
その空白を消すために>>910のような質問をしました。
上記リストのマークアップを改行やタブインデントをなくして一行で書くか
<ul><!--
　--><li><a>ほげ１</a><!--
　　--><ul><!--
　　　--><li><a>ほげ２</a></li><!--
　　--></ul><!--
　--></li><!--
--></ul>
などと改行やタブインデントをコメント内に入れると解消されるのですが
見た目がちょっと気になって。

>>912
普通に入らない。

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

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title></title>
<style type="text/css">
<!--
a{display:block;border:solid 1px #f00;}
-->
</style>
</head>
<body>
<ul>
<li><a>ほげ１</a>
<ul>
<li><a>ほげ２</a></li>
</ul>
</li>
</ul>
</body>
</html>

>>914
試してみました。本当だ、ならないです。他に原因があるようです。
調べてみます。ありがとうございました。

>>914
すみません、
<li><a>ほげ２</a></li>
の数を増やして試してみていただけませんか？

>>916
http://cssbug.at.infoseek.co.jp/detail/winie/b071.html

>>917
どうもありがとうございますそしてすみませんm(_ _)m

>>902辺りから>>909まで雑談が続いても、
>>910で質問が来るとしっかり答えるお前ら偉いな。

ちょっと質問


<div><img></div>←上の領域
<div></div>←下の領域

って感じで同じ高さの画像とDIVの高さをそろえたとき
上の領域の下に微妙にスペースできませんか？

ネットスケープでは正しく表示できるのですが・・・あれ？

PSPのブラウザでも正しく表示できました・・・
IEは何か特殊なのですか？

ご質問　申し上げます。

<div class="hogehoge">
<h1>hogehogehoge</h1>
<p>kurukurukuru</p>
</div>
のようなときに、<h1>と<p>を　改行せずに横並びに
つまり
「ｈ１の内容」
「ｐの内容」
ではなく、　「h1の内容」「Pの内容」のように表示させる場合
CSSでどのように指定すればよいのでしょうか？

ご教示いただければ幸いです。

最初にまとめて
*{margin:0; padding:0;}
を指定しておくといいよ。

>>923
display:inline;

もうしわけありません。　>923は言葉足らずでした。
たとえば、それぞれのブロック要素をdivでくくって、cssにてfloatとしてやっても
横並び表示できるとはおもうのですが、　そうではく、xhtml部分をこれ以上いじることなく
横並び表示させたいと思っております。

何か方法があればご教示願いたく、追加質問申し上げます。

覚えておくと何気に便利だぞっと。
がんばれ。

>>926
>>925氏の方法でうまくいくはず。

あ。お答えいただいていたのに、追加質問、申し訳ありませんでした。
リロードのタイミングがずれてしまいました。　すいません。

>925氏。
お答えありがとうございます。
いま、FireFoxでためしてみたのですが、依然横並びではなく
たてにならんでいます。

実際のxhtmlコードは
<div class="titlebits">
<h1><a href="http://www.hogehoge.com">例<strong>示</strong>用<em>::blog</em></a></h1>
<p>例示用ブログのタイトル部分です。</p>
<ul>
<li>|home</li><li>|blog</li><li>|wiki|</li>
</ul>
</div>
となっていて、 li部分にて、
.titlebits li {
     margin: 0;
     padding: 0;
     display: inline;
     list-style-type: none;
}
としているため、　.titlebits　{display: inlaine;}が、div全体として効かないのでしょうか？

h1とpのそれぞれがblock要素で、div.titlebitsにdisplay:inlineを指定しても
下位要素には継承されないからダメ。h1とpの両方にdisplay:inlineしないと。

>>929
.test {display: inline;}
<h1 class="test"><p class="test">
ってCSSで設定してみ。

>>930
指定してるのはdivじゃなくてliだぞっとw

>>932
「じゃなくて」じゃなくて、div.titlebitsとdiv.titlebits liの両方にしてるんでしょ。

この書き方はclass名titlebitsを持つdivの中のli限定指定じゃない？

各位ありがとうございます。
>931氏のご教示どおりで、実現しました。ありがとうございました。

ちなみに、私の書き方がおかしかったようですが、>934氏のおっしゃるとおりの
指定の仕方をしておりました。

確かに便利な書き方だけど、あまり使われない書き方だし、
ぱっと見でちょっと把握しづらいんだよね。
俺ならdivではなくulに指定するか、classでちまちま振るかも。

質問でつ
IEよりネットスケープの方がまともな動作するんじゃまいですか？

そうです。

すみません、どなたかご教授ください＞＜
外部CSSを使用してリストに色々指定を加えています。
↓こういう感じに表示したいんですけど
●あああああああああああ
￣￣￣￣￣￣￣￣￣￣￣￣￣
↓こうなってしまいます
●あああああああああああ
　￣￣￣￣￣￣￣￣￣￣￣￣
どう指定すれば上記のように表示されるようになるのでしょうか？

.menulist {
width:100%;
list-style:none;
border-bottom:1px solid #cccccc;
list-style-image: url(image/folder1.gif);
}

list-style-position:inside;
か
リストのスタイルをまとめて
list-style:url(image/folder1.gif) inside;
とかどう？
微調整はmarginとかpaddingとか

>>940
insideで解決しました。
ありがとうございました＞＜

次スレッド立てる人は、>>11-12をよく見てからね。

ページの内容がいかに少なくてもスクロールバーを表示させるにはどうしたらいいのでしょう。
ただし表示させたいのは縦だけです。

ボックス要素を入れこにして、内側のサイズを外側より大きくとる。
んで、外側にoverflowを設定。

でも、ウザイだけだと思う。

ああなるほど入れ子ですか。
どうもありがとうございます

>>944
ウザイと思うのなら無視してくれればいいのに・・

>>946
やり方は一応答えた。
でもスクロールバーがあったら、まだ情報があるのかと探すでしょ？
でも何もなかったら、ウザイと思う。それだけ。

>>947
だからやり方を教えず黙っててほしかったって言ってんの・・

放置した挙句どうせどこかの解説サイトとかで見つけて実践されるよりはここではっきりウザいと伝えてしまったほうが結果的には吉、なのかもしれない

実践できるかどうかも分からない質問者よりも、946,948のほうがよっぽどウザイ。
>>949
同意

>>945は自分の気持ちを最後に書いただけじゃん。
「あぁ、ウザいと思う人もいるかもね〜。でも俺はそんなの関係ないよ」
と、>>946が無視をすればいいだけ。

次スレッド立てる人は、>>11-12をよく見てからね。

>>951
いや>>946自身も横スクロールが嫌いだから言ったんじゃね？
とりあえず技術的には可能だが嫌われやすいってことは質問者にも伝わったからもういいべ

>>949
だから「ウザイからやめろ」だけで、方法も書かないまま放置しといたほうがよかっただろうが

質問です。
ttp://kjm.kir.jp/pc/?p=19016.jpg
↑のように、枠線を少しはみ出させたいのですが、どうすればいいですか？

>>955
見られない

使われるのがうざいんじゃなくて、
答えられなくて悔しがっているようにしか見えません。
本当にありがとうございました。

>>955
背景画像

以上

>>958
CSSで実現することは不可能ですか？
borderのmargin辺りをいじって、試行錯誤してみたのですが、
どうも上手くいきませんでした。

□┃□┃□
━╋━╋━
□┃□┃□
━╋━╋━
□┃□┃□
四角がdiv、ボーダーで適当に汁
でもDIV厨でウｚ（ｒｙ

>>959
ここのソース覗いて真似したまへ。
http://www.akatsukinishisu.net/

<div id="top_menu">
<img src="サイトのバナー">
<ul id="menu">
aaaaa
</ul>
</div>

#top_menu {
width: 800px;
}
ul#menu{
position: absolute;
text-align: right;
}

上記のようにすれば以下のようになります（┃はブラウザの端）
┃画像　aaaaa　　　　　　　　　┃


┃画像　　　　　　　　　aaaaa　┃
このようにしたいのですがどうすればいいのでしょうか？
paddingやmarginでpxで指定するとWEBブラウザのサイズが違うとデザインがずれます。
色々、5時間ぐらい粘ったのですが解決策が見つかりませんでした。
※aaaaaとブラウザの間は少し空けます。

position: absolute;
text-align: right;

？？？？？？？？？？？？？？？？

<ul id="menu">
aaaaa
</ul>

なんじゃこりゃ

それだと、IEでは画像の隣にaaaがあるけど、
他のブラウザだと画像の下にaaaが行ってしまってる。
IE以外にfirefoxとかoperaでも確認した方がいいよ。
で解決策。

<div id="top_menu">
<img src="1.jpg">
<ul id="menu">
<li>aaaaa</li>
</ul>
</div>

ul#menu{
list-style-type : none;
float:right;
}
img{display:block;}

これで設定してみ。この後の要素でclear:right;の指定を忘れないようにね。
imgにfloat:left;を設定してもいいかも。その場合はclear: both;で。
あと、display:block;を設定しないと、IEでは画像の下辺部にaaaが揃うのに対して、
他のブラウザでは画像の上辺に合わせてaaaが揃ってしまうので注意。

>>963-964
折角だし、突っ込みより教えてあげようぜ。

>>962
> 色々、5時間ぐらい粘ったのですが解決策が見つかりませんでした。
この5時間の間に仕様書を見るとか”まともな”解説サイトを見るとかしてるの？
それとも自分の勘・思い込みだけで5時間費やしたの？

だれか次スレよろしく。
うちは無理だった。

http://pc8.2ch.net/test/read.cgi/hp/1141783690/

次スレ

テンプレ貼ったり何気に結構面倒なんだよな。
お疲れさん。

テンプレ不備があれば　修正よろ

>>965
┃画像　　　　　　　　　　　　 　┃
┃　　　　　　　　　　　　aaaaa　┃
こんな感じになりませんか？

画像に合わせてmargin設定しる

次スレも立ってますし、このスレ埋めませんか？

無理に埋めなくてもじき埋まるでしょ。
落ちるまでログ拾いやすいし、焦る必要も内規がする。

ちょっと上の文も読めない香具師が多いようなのでこっちをage

質問スレってどうしても
聞くほうが必死にへこへこしたあげく
答えるほうに偉そうにいわれて終わるのが多いね

そうでもないよ。

>>969
あれほど「次スレッド立てる人は、>>11-12をよく見てからね。」と言ったのに。

11 ：Name_Not_Found：2006/02/14(火) 13:25:48 ID:???
>>1
>【CSS検証】>>2
……って、落ちてるけど？

【CSS検証】
W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/

とりあえず、このスレのタイトルの「 /* 」が閉じられていないので
>>1000が閉じて「 */ 」くれよん。

頼んだぞ >>1000

>>980
前スレで閉じられていた