CSS（スタイルー大柴シート）質問スレ51日目
■ このスレッドは過去ログ倉庫に格納されています
CSSに関する質問はこちらへどうぞ。 ※ ブログ厨大量発生月間 ※
■■■■■ 質問のしかた ■■■■■
●基礎は解説サイト（→【解説など】>>3-4）で勉強してください。
●質問の前に【FAQ】（>>5-9）を参照して、既出の再掲を避けて下さい。
●【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
WinIEの場合は、[Ctrl+F]で検索できます。
●ブラウザによって対応していないプロパティーやバグがありますので、
解説サイト（→【関連リンク】）の対応表や「CSSバグリスト」に目を通しておきませう。
●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
正当(valid)なHTMLを心がけて下さい。validator（>>2）でチェックできます。
初心者の疑問は大抵ここまでで解決します。
●OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは？」と求められたら応じませう。
その方が回答が早く得られます。質問は具体的に。
【まとめサイト】 http://web2ch.s31.xrea.com/?CSS
【FAQ】 http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】 http://pc8.2ch.net/test/read.cgi/hp/1134048018/
関聯リンクは>>2-15 あたり
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9
display:inlineか
display:inline-block
あまりオススメはしないが、
状況によっては使い道もあるかもな >>374!!!!!!!!!!!!!!!!!!３７４！！！！！三七四！！！！！！！！！！！！！！
なんでお前がしきってるんだよおおおお！！！
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお！！！ id・classの使いまわしをするとMarkup Validation Serviceでしかられます。
仕方なく、id・classの名称を変えて二度書、三度書きをしています。
Markup Validation Serviceでエラーを出すことなく、効率よく書く方法が
あるのでしょうか。
idとclassが混ざってました。レス汚しですみません。 >>379!!!!!!!!!!!!!!!!!!３７９！！！！！三七九！！！！！！！！！！！！！！
なんでお前がしきってるんだよおおおお！！！
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお！！！ 110のランキング表作っているのですけど
10のいちが各ブラウザ安定しません
各<li>タグににパディングをいてれ調節しているのですが・・
テーブルのしかできませんか？
>>383!!!!!!!!!!!!!!!!!!３８３！！！！！三八三！！！！！！！！！！！！！！
なんでお前がしきってるんだよおおおお！！！
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお！！！ 他人のｃｓｓ見て勉強中なんだけど、全体幅に780pxが多いのは何か理由があるのかね？
ちょっと気になったもんで >>386
> 他人のｃｓｓ見て勉強中なんだけど、全体幅に780pxが多いのは何か理由があるのかね？
> ちょっと気になったもんで
IE6の標準設定でギリギリA4縦に収まる幅が770〜780px 1024幅のモニタでお気に入り出したままで
サイドバーの幅はデフォなら
横スクロール出ず全部入るのが790pxくらいまで 希望している動作はCSS無しで書くと、↓こんな感じの動作を希望しています。
<table border="1" cellspacing="0" cellpadding="20"><tr><td>あ</td>
<td><table border="1" cellspacing="0" cellpadding="0"><tr><td>あ</td></tr></table></td>
</tr></table>
<table border="1" cellspacing="0" cellpadding="0"><tr><td>あ</td>
<td><table border="1" cellspacing="0" cellpadding="20"><tr><td>い</td></tr></table></td>
</tr></table>
それで↓のようにしたのですが
■CSS
.hoge { border: 1px solid black; border-spacing:0; border-collapse:collapse; }
.hoge td { border: 1px solid black; padding:20px; }
.hage { border: 1px solid black; border-spacing:0; border-collapse:collapse; }
.hage td { border: 1px solid black; padding:0px; }
■HTML
<table class="hoge"><tr><td>あ</td>
<td><table class="hage"><tr><td>あ</td></tr></table></td>
</tr></table>
<table class="hage"><tr><td>あ</td>
<td><table class="hoge"><tr><td>あ</td></tr></table></td>
</tr></table>
テーブルの中のテーブルのpaddingが上位のpaddingが優先されてしまうみたいなんですけど
どうすれば良いのでしょうか？ >>393!!!!!!!!!!!!!!!!!!３９３！！！！！三九三！！！！！！！！！！！！！！
なんでお前がしきってるんだよおおおお！！！
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお！！！ 質問スレじゃなかったんですね。
他のスレに移動します。
スレ汚して、申し訳ありませんでした。 a { 〜 }
a:hover { 〜 }
のように書いて、マウスが乗ったときに色かえたりできますけど、これを
<a style="〜">のように<head></head>に書かないでやることはできますか？ http://www.dotup.org/uploda/www.dotup.org145707.lzh.html
↑のファイルの中の「index.html」の右側のサイドメニューの横幅をかえたいんですが、
「style.css」の
/*サイド（一番右側）コンテンツ
------------------------------------------------------------------*/
#side {
float: right;
width: 176px;
margin-left: 8px;
padding: 10px;
この部分のwidth: 176px;の176pxの値を大きくすると大きくはならず、
形が崩れてしまいます。
どうすればサイズ変更できるでしょうか？ ttp://www.nttdocomo.co.jp/
の上にあるボタンみたいに、開いたページに対応した所だけを変化させるにはどうすればいいのでしょうか？ こんにちは。FireBugをカンでいじってCSS組んでいます。
http://fukia.6.ql.bz/
上記のサイトを作っているんですが、IEで見てみると、下のbottomの部分がなくなってしまいます。
どうしたらよいのでしょうか？ ここは質問スレじゃねーっての
スレも読めない奴は仕様書でも読んでろ 了解しました>>403は無視してください
失礼しました CSSを使用してリスト内の文字の上下間隔を狭めるにはどうすれば良いでしょうか？
(上下の文字と文字の間隔を5pxや10pxと指定したいと思っています。)
<ul>
<li>あ</li>
<li>い</li>
<li>う</li>
</ul> 自己解決したときはちゃんと書くように
・li内部の行間を調整するのは
li {line-height:xx } →単位無し整数指定が推奨
・li同士の間隔を調整するのは
li {margin-bottom:xx}
li {padding-bottom:xx} →px指定が安定だがemでもよい >>410
推奨も何もない
用途によって変えなきゃならないに決まってるだろ >>411
> 推奨も何もない
> 用途によって変えなきゃならないに決まってるだろ
line-heightに関しては「推奨」です
line-height の値には単位なしが良いとされる理由 - lucky bag
http://www.lucky-bag.com/archives/2006/04/unitless-line-heights.html 割と一般的に知られてる話だと思ってたが。＞line-heightには単位なし
行間(行の高さ)を調節するなら単位はナシで - ［ホームページ作成］All About
http://allabout.co.jp/internet/hpcreate/closeup/CU20070222A/index.htm
line-heightに関しては、用途によって変えなきゃならないケースが
ほとんどないからな。pxでガチガチにデザイン決めたい場所でも
font-sizeの方でpx指定してそれに無単位でline-heightしておけばいいわけで。 >>412
そこの管理人が推奨してるとWeb全体に推奨なんてことはないｗ
理屈は知ってるが、知ってればこそ用途によって変えるべき というかその人も「行ボックスの高さが意図していないものになってしまう可能性がある」
から推奨と言ってるだけで、常に推奨とは言ってないじゃん。
逆に言えば意図があれば別のものを使うという話をしてるだけだろ、
なのにその推奨を布教されてもその管理人に迷惑なだけと思うが。 tableでカレンダーを作りたいのですが、縦(日曜・土曜)の文字に色を適用する方法で悩んでます。
http://www.d-spica.com/designcatalog/table/table211.html
上のページだと縦列の背景色に<col class="xxx">、<th scope="col">などとして一括設定していますが
背景色の変わりにcolor:red;などとしても文字色が変わりません。
（td全体なら文字色変更できましたが。）
上の方法だと文字色指定は無理なのでしょうか？
また別の方法があるのでしょうか？
最悪、該当セル全てにclass指定するつもりですができればやりたくない・・・ >>423
自動で振り分けさせる。
ttp://gihyo.jp/design/serial/01/jquery-site-production/0001
それが嫌なら全部にclass書いてやるしかない。
ちなみにcolはfontまわりのスタイルはいじれない。 <select>の<option>に個別に設定したスタイルシート(色変え等は)はブラウザ依存なのでしょうか？
SH903iのiﾓｰﾄﾞﾌﾙﾌﾞﾗｳｻﾞでは正常に動作したものの
SH-06Aのiﾓｰﾄﾞﾌﾙﾌﾞﾗｳｻﾞでは効きません
ブラウザ依存なら対象方法としてはJavaScript/onChangeで<select>ごとスタイルシートを変えるくらいしかないでしょうか？
IE8, Windows7です。
下線がボックス幅を超えて描かれます。どうしてなのでしょうか？
幅240pxのサイドメニューボックスの中に下記のmenu_leftボックスを設け、
menu_leftボックスの中に、menu_titleを入れています。
下記の定義でmenu_titleの下線(border-bottom)が、menu_title幅(200px)をはみ出して（右側に20px）描かれます。
menu-tileの幅もmenu_leftのマージン幅も200pxなのに、なぜはみ出すのでしょうか？
.menu_left {
margin: 0px 20px 0px 20px;
padding: 0px 0px 20px;
}
.menu_title {
text-align:left;
color:#fff;
font-size:12px;
font-weight:bold;
background-image:url(http://hogehoge.com/sTitle.gif);
background-position:top left;
background-repeat:no-repeat;
border-bottom: 1px solid #961585; /*この下線が右にはみ出す*/
margin:25px 0 0 0;
padding: 6px 12px 2px 30px;
height: 25px;
width:200px;
}
-webkit-border-radius: 4px;
-webkit-ってなんだろー 質問です。
リンク文字にマウスを重ねた時に、背景色（ボックス形）を表示するようにしたいのですが、
背景ボックスの高さが変更できません。指定方法を教えて頂けませんでしょうか。
今のソースとスタイルシートは以下の通りです。よろしくお願いします。
（「HOGEmail」と「HOGEｕｒｌ」のところの背景色の高さです）
≪ソース≫
<ol class="ct_container">
<li><p class="ct_header"><a href="mailto:hoge1">HOGEmail</a> | <a href="http://hoge2.com">HOGEurl</a> |
<p class="ct_title"><a id="comment3" name="comment3"></a>タイトル</p>
<div class="ct_body">内容</div>
<div class="cnt_date">YYMMDD</div></li>
<li>/*次のタイトル、内容等*/</li>
</ol>
≪スタイルシート≫
.ct_header a , .ct_header a:visited {
color:#666;
text-decoration:none;
line-height:28px; /*(1)ここを変えても変わらない*/
padding:0.2em 0.5em;
border:1px dotted #fff; }
.ct_header a:hover {
color:#444;
/* (2)ここにline-heightを追加して変えても変わらない*/
border: 1px solid #ccc;
background:#f5f5f5; }
/* (3)下記を追加して変えても変わらない
li { line-height:28px; }*/
質問です。
横一列のメニューリンクテキストを右詰めで、<ul><li>タグを使って再現したい。
ブラウザではきちんと表示されるが、DreamWeaverのデザイン表示が妙なことになる。
（5つのメニューが、途中3つで改行され2段表示。
うち1つはテキスト自体も4文字が全て改行され縦4文字に並んでしまう。）
テキストボタンでなく画像ボタンならば<li>にwidthを指定することで
回避できるのですが、テキストなのでwidth指定はしたくない。
また、納品後はクライアントが更新作業を行っていく体制を取るので
DreamWeaverのデザイン表示を混乱の少ない状態に整える必要がある。
>>431の続き
これは仕方のないことなのでしょうか？
現在は<li>タグにfloat: leftを指定して横一列に表示しています。
これをやめて<li>タグにdisplay: inline;を指定すると
DreamWeaver上では改行無しで表示されるのですが、
ブラウザ上でトップマージン指定や背景画像の位置指定が効かなくなります。
何か解決策が分かりましたら教えてください。
DWの表示が完全だという前提になってますね
こういう人多いのかなあ今 まったくだ。ローカルの1制作ソフト上での見た目なんてどうでもいい。
どうせ各ブラウザで確認するんだし、WYSIWYGの見た目なんて違って当然。 というかDWもWebKit採用してくれればいいのになー
俺はhtmlもCSSもエディタでハンドコーダー派なんだけど
DWしかわからない子たちが「○○さんのデザイン崩れます」て言ってくる
IE・FF・Safari・Opera，全部検証してるっつの！ CS4からはプレビューはWebKit対応になってるらしいよ。 >>436
だね
あんまり意味ないんだけどね
IE9はまた独自仕様になりそうでこわいなあｗ
IEは6789でチェックとか、もうやめて＞＜ HTMLの中で以下のようなレイアウトを作ろうとしています。
This is a [pen].
↑black
[pen]を基準にして「↑black」の位置を決めるにはどうすればいいですか？
positionというのを使うのかな、、と試しましたがよくわかりませんでした。
よろしくお願いします。
>>440
.pen { position: relative; display: inline-block; }
.black { position: absolute; top: 1em; left: 0; }
<p>This is a <span class="pen">[pen].
<span class="black">↑black</span></span></p> >>441
ありがとうございます。
とても助かりました。^^ jsだとオライリーのサイ本がバイブルっぽいですが、CSSでそういった書籍ってありますか？
もちろん一冊で完結する訳はないんですが、皆さんどんな本で勉強されたのかなと。 CSSで、この画像のような構造のサイトを作りたいと考えています。
ttp://imagepot.net/view/126314455414.jpg
今このようなCSSを組んでいるのですが、実際には以下の画像のような表示になってしまいます。
http://imagepot.net/view/126314476261.jpg
div#content {
position: relative;
width: 900px;
margin-left : auto;
margin-right : auto;
top: 40px;
text-align: left;
bottom: 40px
min-height: 90%;
height: auto !important;
height: 90%;
}
div.nakami {
background:#fff1c3;
border:solid 10px #c96c29;
overflow:scroll; padding:30px;
position: absolute;
bottom: 71px;
left: 0px;
top: 72px;
right: 0px;
z-index: 11;
}
<続きます> <続きです>
div.copyright {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-image: url(images/copyright_2010.png);
background-repeat: no-repeat;
background-position: right bottom;
}
検索しているのですが、どうしてもわかりません。
どなたか、何が悪いか、御指南ください。お願いします。
それから、position="relative"にしておくと、margin-bottomは適用されないのでしょうか？ >>447
cssに
html,body { height: 100%; }
を書いてなさそう？ >>448
レスありがとうございます！
今急いで追加してみたんですが、変化なしでした。
どこか他におかしい所はないでしょうか？ HTMLの方はこうなっています。
<div id="content">
<div id="menucontainer">
メニュー
</div>
<div class="nakami">
テストテスト
</div>
<div class="copyright">
</div>
</div> >>450
>>446-448と>>450コピペしてやってみたけど、div.copyrightを下に固定？することは出来たよ 定期的に書いておかないと駄目か
ここは質問スレじゃないぞ Adobe Spryのアコーディオンで、
クリックするとSarariで青い枠線が出ます。
Abobeのサイトのサンプルでも出るもの、出ないものがあります。
この違いは何なのでしょうか？
また消すためには、どう指定すれば良いのでしょうか。
お教えください。
ttp://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
a:link { color: white; }
a:visited { color: white; }
a:hover { color: red; }
いくら指定してもブルーのまま。
試しに<head>内をいろい消しても変わらず・・・
ドキュメント宣言とか文字コードとかも関係アルのかな？？ 検証もしてないし根拠もないがoutlineとかは？ >>457
outlineはどこも設定してません・・
全てを消して
a:link { color: red; }
未訪問リンク
a:visited { color: red; }
訪問済みリンク
a:hover { color: blue; }
マウスカーソルを乗せたリンク
書いてみたけどマウス載せても色が変わらない・・ a:hover { color: red; }
<body link="white" vlink="white" alink="white" >
<a href=" ">リンク</a>
結局これで解決・・・なんでできないんだろう。。 >>457は>>455へのレスなんだけど、
クリックしたとき出る枠線ってのはoutline:noneで消せたはず、と思って。
>>456は>>455ではないよな？
CSSだけだされても誰もわからんと思うよ。 スタイルシート使いたいと思ったけどさっぱりわからんわ、難しいなあ。
HP作成ソフト使っても思うようにいかへん。 http://desperadoes.biz/style/css_sample_frame_2.html
このサンプルページにある上のメニューだけど
メニュー数を増やさずに横巾いっぱいに表示することって出来ないんでしょうか？ .entrytext {
font-size: 100%;
margin: 0;
padding: 50;
width: 100%;
}
.entrytext img {
margin: 0px;
padding: 0px;
border: 2px black solid;
}
写真は900pxで貼り付けてあるんですが、その下に流し込んでるテキストのみ
例えば幅600pxとかっていう指定はできないでしょうか？ divタグのdivの由来ってdivision の省略したものでしょうか？ >>467
<div>
それであってる。どっかの本にもdivisionとかいてあった
</div> ■ このスレッドは過去ログ倉庫に格納されています
