CSS初心者スレッド＝8th＝

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

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

《関連スレ》
Webサイト制作初心者用質問スレ Part 212
http://pc11.2ch.net/test/read.cgi/hp/1249471196/

《前スレ》
CSS初心者スレッド＝7th＝
http://pc11.2ch.net/test/read.cgi/hp/1251527427/

《過去スレ》
CSS初心者スレッド＝6th＝
http://pc11.2ch.net/test/read.cgi/hp/1234355194/
CSS初心者スレッド＝5th＝
http://pc11.2ch.net/test/read.cgi/hp/1228900036/
CSS初心者スレッド＝４ｔｈ＝
http://pc11.2ch.net/test/read.cgi/hp/1218200382/
CSS初心者スレッド＝3rd＝
http://pc11.2ch.net/test/read.cgi/hp/1212198165/
CSS初心者スレッド＝2nd＝
http://pc11.2ch.net/test/read.cgi/hp/1207202319/
CSS初心者スレッド＝1st＝
http://pc11.2ch.net/test/read.cgi/hp/1193327030/

【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
　http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
　http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
　http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには？　text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に5.）をご覧ください。
1.'text-align'に関する考察
　http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
　http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
　http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
　http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
　http://www.mozilla.gr.jp/standards/webtips0004.html

【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
　http://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと（Netscape4でも崩れない段組みの実例）
　http://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
　http://css.maxdesign.com.au/index.htm

【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: まずclear忘れがないかを確認してください。
floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト（imgを含む）だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
　http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
　http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
　http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
　http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
　http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
　http://www.rju666.com/web/layout/imitate_frames.html

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート 縦中央(垂直中央)」参照のこと。
　http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうするか。
A7:CSS2.1ではbackground-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
　もしくはCSS3を待ちませう。

【FAQ】
Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

Q10: リンクを新しいウィンドウで開かせるにはどうしたら？
A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
　http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ（A3）を見なさい。
「いままでの HTML との対照」
　http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
　http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html

【参考】
　IEの position:absolute; のバグを利用した擬似フレーム

----------------------------------------------------------------

＊IEの position:absolute; のバグを利用した擬似フレーム

１．標準モードにする
２．body {height:100%; overflow:auto;}
３．fixしたいブロックを position: absolute; で指定

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}

/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html

【初心者向けの解説】
正しい知識を得たい人の爲のCSS2リファレンス
　http://hp.vector.co.jp/authors/VA022006/css/

【構文チェック】
W3C Markup Validation Service
　http://validator.w3.org/
W3C CSS Validation Service
　http://jigsaw.w3.org/css-validator/

【ブラウザのバグリスト】
CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/

【仕様書】
CSS 2.1 Specification
　http://www.w3.org/TR/CSS21

>>1乙

いちょつ！

お薦め良書はないの？

無い

下記のコードは、現在表示中のサブメニューとその他のサブメニュー表示の文字と背景の色を変えるものです。
これで、うまく表示できているのですが、
現在表示中のサブメニュー（例ではトップページ）の<li>の中で<div id="curr_menu">を指定する方法が、
ダサイ感じがしています。もっとスマートな方法があれば教えて下さい。

【html】
<div id="menu"><ul>
<li><div id="curr_menu"><a href="/index.html">トップページ</a></div></li>
<li><a href="/service.html">サービス</a></li><li><a href="/price.html">料金</a></li>
<li><a href="/aboutus.html">会社概要</a></li><li><a href="/contact.html">お問い合わせ</a></li>
</ul></div>

【styleシート】
#menu a{ text-decoration:none;background-color:#99ccff;color:black;display:block;width:180px;}
#menu a:hover { text-decoration:none;background-color:#0090ad;color:white;display:block;width:180px;}
#menu li {list-style-type:none;text-align:center;margin:1px;line-height:2;}
#curr_menu a{ text-decoration:none;background-color:#0090ad;color:white;display:block;width:180px;}
#curr_menu a:hover { text-decoration:none;background-color:#0090ad;color:white;display:block;width:180px;}

よろしくお願いします。

【html】
<ul id="menu">
<li><a href="/index.html">トップページ</a></li>
<li><a href="/service.html">サービス</a></li><li><a href="/price.html">料金</a></li>
<li><a href="/aboutus.html">会社概要</a></li><li><a href="/contact.html">お問い合わせ</a></li>
</ul>

【styleシート】
#menu a{ text-decoration:none;background-color:#99ccff;color:black;display:block;width:180px;}
#menu a:hover { background-color:#0090ad;color:white;}
#menu li {list-style-type:none;text-align:center;margin:1px;line-height:2;}
#menu li:first-child a{ background-color:#0090ad;color:white;}

うえ

これじゃ変わらないじゃん。

>>12

がやりたいのは、ページ事に curr_menu　で分けたいんだと思うぞ。

おいらも同じような事考えたんだけど、難しいのでjavaにした。

>java

>おいら

泣くなよ

PHPのことかえ？

javascriptだよ

liにclass="on"
とかつけるんじゃないか普通

id="" じゃ駄目？

#menu li:first-child+li a{ background-color:#0090ad;color:white;}

background-color
background-image
ではbackground-imageのほうが優先されるのでしょうか？

レイヤー2：background-image
レイヤー1：background-color
↑
こういう風に上に乗ってるだけ
だから画像の表示できない環境の時背景色が見える
もしくは画像を全面にしてないとき画像の切れ目から背景色が見える
あるいは半透明の画像なら背景色が画像の下に見て取れるってこと
優先がどうとかの問題じゃなくて別物が上下に並んでるだけ

>>24
ありがとうござんす。

CSSが何の略なのか調べるといいよ

>>26
この流れでそのレスが出てくるお前が調べた方がいいと思うが・・・

じゃあみんなで調べるか

滝がどうの

* { margin: 0; padding: 0; list-style-type: none; }

#Box ol { width: 200px; background: url(back.gif); }
#Box li a { display: block; }
#Box li a span { display: block; background: url(frame.gif); text-align:center; padding:5px; margin: 0 auto; }

#Box li a { position: relative; z-index: 1; }
#Box li a span { position: relative; z-index: 3; }
#Box li a img { position: relative; z-index: 2; }




<div id="Box">
<ol>
<li>
<a href="#">
<span>
<img src="tds_idou.jpg" width="120" height="90" border="0" alt="">
</span>
</a>
</li>
</ol>
</div>

上記のソースで、
olに下地の背景画像を設定、
spanに画像のフレーム(額のような透明部分のある画像)を背景画像を設定し、
spanを入れ子のimgの上に持ってくる事は可能でしょうか？
※z-indexはマイナスではなく

額縁用のspan要素を、img要素と同じ階層に作らないと駄目

やはり無理ですか。空要素入れたくないな…。
spanの下にstrongでタイトル付けてそれ伸ばして引っ張るかな。
ありがとうございます。

ページ幅はどれくらいにするのがいいでしょうか？
できるだけ広い方がいいのですが、ユーザー視点だとどれくらいなのでしょうか

>>33
そこまで酷いHTMLで空要素だけは嫌がる理由がわかんね

>>34
ユーザからして一番広い幅は、指定なしにしてやればその人の環境で一番広い幅になる

皆さん、レスありがとうございます。

回り込み解除で.clear{　clear : both;　}を使う場合どちらがよいのでしょうか？

・　<br class="clear" />

・　<div class="clear"></div>

>>34
アクセス解析で訪問者の解像度を見てみ。XGA以下は2〜3割になってきた。
リキッドでないなら、最近はほとんど900〜980pxくらいかねぇ。

>>37
どっちもダメ

>>37
上：clearはフロック要素にしか使えない
下：空要素は駄目

>>39
ただしい方法は？

次の要素に指定

状況説明が足りなかったようです、すいません。
<div></div>の中に<div></div>、その中に横並びのリストを入れると<div></div>をはみ出してしまいます。
それを回避するために使います。

#mmm{
width : 100%;
background-color : #ffff00;
}
#ttt{
margin:0px auto;
width : 700px;
}
#ttt ul{
padding : 0;
margin : 0;
}
#ttt li{
float : left;
padding-right : 20px;
margin : 0px 10px 0px 0px;
}

<div id="mmm">
文字
<div id="ttt">
<ul>
<li>リンク１</li>
<li>リンク２</li>
<li>リンク３</li>
</ul>
</div>
</div>

>>43
足りる足りないではなくみんなわかった上で
どっちも間違い
と言っているだけ
はみ出て普通の動作

>>37
＞・　<br class="clear" />
<br clear="all" />が正解かと。


＞・　<div class="clear"></div>
CSSで以下を指定してるならあり
.clear {
clear:both;
}

>>34
迷ったときはYahooに合わせろってのが定説だけど
俺は最近だと1000pxまでは許容範囲って感覚を持ってる

>>37
ごめん、一行目を読み飛ばしてた・・・

>>44
それでは、はみ出さないようにするには？

>>46
YAHOOって実は可変なんだぜ

>>48
リストの下にブロック要素を入れてクリア
どうしてもそれが嫌ならclearfixでググれ

>>37>>41>>43>>48

ttp://blog.d-spica.com/entry/070307clearfix.html

無料のテンプレートで勉強をしておるのですが
bodyタグで text-align: center;して次の子要素であるページ全体を包むdivタグでまたtext-align: left;してるのが大半です。
何故これをしてるのかがわかりません。
最初からbodyタグでtext-align: left;だけでいいのではないのかと悩んでます。
どなたかご教授お願い致します。

>>51
コンテンツのセンター寄せで正しいcssではmargin:0 auto;を使うのだが
IE6とか対応してないブラウザ用にそういう操作が必要

>>51
IE6＋互換モードの場合、margin:autoでのブロック要素の中央寄せができないため
まずブロックを中央寄せにするためbodyでtext-align:centerして
そのブロック内のテキストを左寄せするためにそのブロックでtext-align:leftする
ぶっちゃけ素直に標準モードにすればそんなことしなくていい

>>52-53
あーざっす。
なぞが解けました。

>>52-53
質問してないけど、勉強になりました
やっぱそういうのを知るきっかけって、学校とか会社なんですかね？
私も独学中ですが、ここを覗いてなかったら知らなかったまま・・

>>55
学校でも会社でもやってませんｗ
ただの趣味ですつーかサイト作ってると自然と憶える

ブラウザによってまったく言うことを聞いてくれないときは、悲嘆にくれることもあるもんなあ。

IEではよくあること

HTML
<div id="menu">
<ul class="menu_f02">
<li><a href="#">HOME</a></li>
　　<li><a href="#">MENU</a></li>
</ul>
</div>

CSS
　#menu {
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
ul.menu_f02{
height: 30px;
margin: 0px;
border-bottom: 5px solid #333333;
background-color: #0B7A8E;
}
ul.menu_f02 li{
float: left;
border-right: 1px solid #9AA7B6;
display: inline;
}
ul.menu_f02 li a{
height: 20px;
width: 130px;
padding: 10px 0px 0px;
border-bottom: 5px solid #333333;

上のようなメニューアイコンを作るコードがあったとします。
そこでお聞きしたいのはCSS上の[#menu ] [ul.menu_f02] [ul.menu_f02 li] [ul.menu_f02 li a]
これらはそれぞれどういう意図を持ってコーディングすればいいのかをお聞きしたいのです。
もっと具体的にいいますと、[#menu]と[ul.menu_f02]は同じように見えるんですが・・・ならばばらばらに書かずに#menuにすべてコードを統一しないのは何故なのか・・・。
[ul.menu_f02]と[ul.menu_f02 li]の違いはなんなのか・・・。
こんなことで二日も悩んでおります。
どなたかお教えください。

一応つっこんどくと「メニューアイコンを作るコード」は存在しないからなｗ
アイコンを表示させるコードならともかく
あとCSSじゃソースはともかくコードともそもそも言わないかな
ついでにそのソースにはアイコンは存在してない件

>[#menu]と[ul.menu_f02]
[#menu]はリストを囲むブロック。そこの左右にボーダー
ul.menu_f02はリストそのもの。背景色と下線を設定
正直このソースだけだと別ける必要は感じないが、ものによってはdivの中に他のリストがあるかもしれないだろ

>[ul.menu_f02]と[ul.menu_f02 li]
ul.menu_f02はさっき言ったとおり、ul.menu_f02 liはリスト全体の中の項目
ul.menu_f02は通常フローのブロックなので横幅いっぱい背景色と下線が付く
ul.menu_f02 li（とul.menu_f02 li a）は不動要素なので内容物の幅分だけ
右側に横線と下線が（ul.menu_f02の下線の上に）付く

ていうかホントに基礎の基礎から勉強してきた方がいいぞ
ttp://az-store.nrym.org/archive/mynotes/lecture/

>>61
ul.menu_f02は通常フローのブロックなので横幅いっぱい背景色と下線が付く
ul.menu_f02 li（とul.menu_f02 li a）は不動要素なので内容物の幅分だけ

これははっと気がつかされました。
丁寧にご指導ありがとうございました。
そのURLで勉強しなおしてきます。

#MENU li+li+li+li+li

この+ってなんですか？

すみません、質問です。

独学でCSSを勉強して何とかサイトを構築しているのですが、例えば
<body></body>の中で、

<h1>お店の宣伝</h1>
<h2>見出し</h2>
<p>説明</p>

とすると、普通はCSSで設定した通りの位置や文字の大きさ、色などで
上記の順通りに上から下にブラウザ上で表示されますよね。

それで例えば、<h1></h1>をサイトの一番上部の左端に配置する設置で、
お店のマークや問い合せのリンクボタン、RSSのマークなどをその同じ位置
の右端に置きたい場合、どのようにすればいいのでしょうか？

質問です。

下記のＨＴＭＬ１とスタイルシートの組み合わせだと、
h1の文字サイズがスタイルシートの指定通りの11pxになるのですが、

DOCTYPEを付けたＨＴＭＬ２とスタイルシートの組み合わせだと
h1の指定が無視されて、h1の既定サイズになります。

どうしてでしょうか？

【HTML1】
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テスト</title>
<link href="css.css" rel="stylesheet" type="text/css" >
</head>

【スタイルシート(css.css)】
h1 {font-size=11px;
text-align:center;
}

【ＨＴＭＬ２】
<!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">
<title>テスト</title>
<link href="css.css" rel="stylesheet" type="text/css" >
</head>

>>64
positionでもいけるけどfloatでの方法はこんな感じ

html
<div id="wrap">
<h1>お店の宣伝</h1>
<ul class="menu">
<li><img src="お店のマーク" width="*" height="*" /></li>
<li><img src="問い合わせボタン" width="*" height="*" /></li>
<li><img src="RSSのマーク" width="*" height="*" /></li>
</ul>
<h2>見出し</h2>
</div>

css
#wrap { width: 800px; }
h1 { float: left; }
ul.menu { float: right; }
ul.menu li { display: inline; }
h2 { clear: both; }

>>65
× h1 {font-size=11px;
○ h1 {font-size:11px;

>>63
隣接セレクタ

>>63
css3で調べるといいよ
その他にもたくさん面白そうなものがあるから

>>66
早速のレス、ありがとうございました。
相当頂けると思っていなかったの感激です。

質問をシンプルにするため、実際の（こちらの）CSSと異なりますが
色々と試してみます。
ありがとうございました。

隣接セレクタはCSS2.1に含まれてるだろ

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

>>1
上のようなlinkのwidthを任意の横幅確保したいのですがどうすればいいでしょうか？
下のようにやっても無理でした
link {
width : 100px;
}

何をやりたいのかわからないけど、link要素にwidthは指定出来ないよ

>>73
>linkのwidthを任意の横幅確保したい
意味がよくわかんないなー
ちなみに書き間違えただけかもしれないけど、
link { width: 100px; } じゃなくて a { width: 100px; } にすべき

ああ間違えた
正しくは以下
a {
display: inline-block;
width: 100px;
}

>>74,75
レスありがとうございます

<a href="hoge">a</a>
上のようなリンクだと押しづらいのでwidth:200pxみたいにしたいなと思いました。

>>77
押しづらいっていう理由で広げたいなら、
a { padding: 0 2px; }
とかでいんじゃない？
画像とかならwidth指定(px)してもいいけど、
文字とか可変のものにwidth指定(px)するのはあんまよろしくないかな

paddingだと前後に別の文字がある場合、

>>78
それだと全く解決にならないのです

もっとわかりやすく言うと
<ul>
<li><a href="hoge1">a</a></li>
<li><a href="hoge2">ab</a></li>

<li><a href="hoge3">abc</a></li>
</ul>

上のようなソースでリンクの幅だけでも合わせたいのです。
・a__
・ab_
・abc

>>80
テーブルみたいなことやりたいなら、こんな感じかな。
aタグにtdタグの役割を、liタグにtrタグ役割をそれぞれ与える感じ。
ただし、IE7以下はtable系は使えない。

ul li a {
display: table-cell;;
background: #aaaaaa;
}
ul li {
display: table-row;
}

>>80
別のやり方
ulをフロートして内容幅に合わせる方法。フロートでなくてもインラインブロックでもいい。

ul li a {
display: block;
background: #aaaaaa;
}
ul {
float: left;
}

>>80
リストをdisplay:inline;
リストの中のaをdisplay:block; width:●em;
●を最大文字数にする。

>>81-83
みなさまありがとうございます。

教えていただいたものを試してみたのですが、できませんでした
自分で調べてみます

それはどっか別の所がおかしいんじゃないか？

質問です。
下記のコーディングは２カラムレイアウトのサイドメニューの一部ですが、
「メニューの表示」と、「住所ｘｘｘと個人情報保護方針の文字」が重なって
表示されます。どうすれば、メニュー表示の下に住所等が表示されるように
なるのでしょうか？
よろしくお願いします。

【css】
#sub { width:200px; float:left;}
#menu {margin:0px;width:200px; height:40px;}
#menu a{ text-decoration:none;background-color:#99ccff;display:block;width:200px; height:40px;}
#menu a:hover { text-decoration:none;background-color:#0090ad;display:block; width:200px; height:40px;}
#menu li {list-style-type:none;text-align:center;margin:0px;height:40px;}
#note {margin:280px,0px,20px,0px;padding:280px,0px,20px,0px;}
#address { margin:20px,2px,0px,4px;}
#policy {margin:10px,,2px,0px,4px;}

【html】
<div id="sub">
<div id="menu"><ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="/service.html">サービス内容</a></li>
<li><a href="/price.html">料金案内</a></li>
<li><a href="/aboutus.html">プロフィール</a></li>
<li><a href="/contact.html">お問い合わせ</a></li>
</ul></div>

<div id="note">
<div id="address"><p>〒xxx-xxxx<BR>住所ｘｘｘｘ<BR>x-xx-xx</p></div>
<div id="policy"><p><a href="/policy.html">個人情報保護方針</a></p></div>
</div>
</div>

>>86
まとめて書く時、,ではなく半角スペースで区切るんだよ
#address { margin:20px,2px,0px,4px;}
　　↓
#address { margin:20px 2px 0px 4px;}

軽くdiv病だな

<div id="address">
せめてこのくらい普通にaddress要素でやってほしい

住所＝address要素　ではないとおもうけどどうなんだろ…

内容からしてaddress要素だろ

皆さん、レスありがとうございます。

id="menu"もulさんに付けてあげて

真のdiv厨はbr使わんがな

むしろdiv厨の方がbr厨兼ねてることが多い

header
---------
sub | main
---------
footer　　　　　　のsubとmainの間に、ボーダーラインを引きたいのですが、

subの右側に引くと、subよりmainの高さが高いと、途中でラインが切れます。
mainの左側に引くと、mainよりsubの高さが高いと、途中でラインが切れます。
どちらの場合でも、ラインがfooterの所まで引かれるようにするには、
どうすれば良いのでしょうか？

背景画像を使う

おれ、テーブル厨だからそんな心配したことない。

subとmainの両方に引けば？


#sub {
border-right:solid 1px #f00;
float:left;
}

#main {
position:relative;
left:-1px;
border-left:solid 1px #f00;
float:left;
}

質問です。

ある要素に次のようにフォントを指定しているのですが、FIREBUGで確認
してみると指定フォントが化けてしまっています。

.test{font-family : Arial,'ＭＳ Ｐゴシック',sans-serif;}

firebug:
font-family: '繝｡繧､繝ｪ繧ｪ'

アドバイスお願いします。

>>97,98,99
レスありがとうございます。

>>96
ttp://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

あとは全体をもう一つdivでくくり背景画像で線を引いてやるとか。

>>100
CSSにちゃんとフォント指定してるか？

下記のようにpositionを使った時、リンク位置が実際とずれてしまうのですが原因はわかるでしょうか？

具体的には、「パスワードを忘れた場合はこちら」の文字の、”場合はこちら”あたりにポインタを
持って行くと、新規登録へジャンプしてしまうのです。。


<a class="forgot_pass" href="../users/reset">パスワードを忘れた場合はこちら</a>
<a class="register" href="../users/add">新規登録</a>

#login_screen .forgot_pass {
display: block;
float: left;
position: relative;
left: 145px;
margin-top: 40px;
}

#login_screen .register {
display: block;
position: relative;
left: 200px;
margin-top: 40px;
}

何をしたいのかさっぱりわからん。
position: relative; で left: 200px; って何？さらにマージン指定？？？

position: absolute; か？絶対指定はdisplay: block; 指定しなくても有効になるし。
ムダな指定消して最初からやってみな。

>>100
HTMLとCSSファイルの文字コードが違ってんだよ多分。
ファイルの最初に　@charset "文字コード"; って書いて保存しな。

UTF-8なら　@charset "utf-8";

>>106の　@charset "文字コード"; 書くのはCSSファイルな。

>>105

了解です！

>>105

blockを消したら上手くいきました！
ありがとうございます！

>>109
(ヽ´ω`) 横レスしますが、どういたしまして…

　　　／|∧_∧|
　　　||. ('ω'` |　今日のパンツはどんなかな
　　　||oと.　 Ｕ|
　　　||　|（__）Ｊ|
　　　||／彡￣ ｶﾞﾁｬ

　　　　 ＿＿_
　　　／|∧_∧|
　　　||. (　　　 | すいません　スレ間違えました
　　　||oと.　 　|
　　　||　|（__）Ｊ|
　　　||／彡￣ ｶﾞﾁｬ

フォームでラジオボタンを配置しているのですが、
IE7/8で表示した際にデフォルトの緑色のラジオボタンではなく
黒色のシンプルなラジオボタンになってしまっています。
デフォルトの表示にしたいのですが、これはCSSで何を変えてやれば
良いのでしょうか？

むしろ何も変えなければデフォルトになる
何かいじっちゃってるんだろ、見直せ

height: 0 !important;
height /**/: 50px;

とセットでよく見るんですが、それぞれ何を意味してるんでしょうか？

>>114
上は基礎的すぎるので最重要規則を調べてくれ
下のはIE6のみ除外するためのハック

>>113
それ自体のCSSは外してもやっぱり変わらなくて、
継承でこういうことになっちゃうことってありますか？

擬似フレームって要するに該当カラムにoverflowつけてやるだけで成立しますよね？

いいえ

CSSフレームの件について質問です

左をコンテンツ、右をメニューというレイアウトです
一応レイアウト自体はうまくいったのですが
スクロールバーが一番右（右のメニューの隣）に表示されてしまいます
見た目的にできれば左のコンテンツにスクロールバーを表示させたいのですが
どうすれば可能になるでしょうか？

補足です
左コンテンツの幅は可変
右のメニューの幅は固定です

スクロールバーを表示させたい左側のブロック要素に overflow:scroll; を指定

返答ありがとうございます
ご指摘の通り左側のブロック要素にoverflow:scroll;をつけてみました
スクロールバーは確かについたのですが、右のメニューのスクロールバーはつきっぱなしでした・・・
右のメニューのスクロールバーを消して、左側のコンテンツのみにスクロールバーをつける事は無理でしょうか？
* {
margin:0;
padding:0;
font-style:normal;
font-weight:normal;
font-size:13px;
}
#page{
width:auto;
height:100%;
background-color: #deeeda;
}
#left{
padding:0px 0px 50px 0px;
text-align:left;
background-color:#abcde0;
float: left;
overflow:scroll;
}
#right{
position:absolute;
width:200px;
height:100%;
background-color:#098765;
}

こんな感じで書いてあります
どうかお助けください

html か body に overflow: hidden;

いえ、それをやると右のメニューのスクロールバーは非表示になり
左にスクロールバーは表示されるんですが
表示されるだけで自分では動かせないんです・・・
表示はされるけど実際は自分で動かせないお飾りみたいな感じでして・・・

やはり無理なのでしょうか？

.>116
当然

>>124
body幅狭めれ

>>125
ラジオボタンに影響するものって何でしょうか？

>>125
すみません幅はこれ以上狭められないです・・・
大人しく左にメニューを置いた方がいいんでしょうか？
個人的にはどうしても右にメニューを置きたいのです

元々のCSSの書き方に問題があったりしたらお教えください
こういう書き方ならばお前の希望通りにはなるよみたいな形で、どうか

>>119
どっかにサンプル桶
あんたがどう書いてるかわからんと面倒だ

>>119
#rightに position: fixed;
これじゃだめなの？
IE6でfixedバグあるから、そのへんは自分で探すとしてさ。

>>126
根本的に勉強しろ

>>127
全部やらせようとすんな

>>129
ありゃバグじゃなくて単純に未対応なだけ

すなわちバグ

バグでぐぐった方が情報量多いんだからどっちでもいいだろ

>>132-133
間違いを指摘されたからって恥ずかしい奴だな

>>134
ほっといてやれ

>>124
適当に作ったから勝手に改造しれ

html,body { height:100%; margin:0; }
#left { height:100%; margin-right:200px; overflow:auto; }
#right { height:100%; position:absolute; right:0; top:0; width:200px; overflow:none; }

<div id="left"><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p>
<p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p>
<p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p><p>あ</p></div>
<div id="right"><p>メニュー</p></div>

すいません遅れました

>>128
そうでしたね、まどろっこしすぎましたね・・・
これがテストレイアウトです
ダウンロードパスは「テスト」です
AntiVirでウィルスチェック済みです
始めて1ヶ月少々なものですので、記述の稚拙さはご容赦を
ttp://uproda.2ch-library.com/lib250424.zip.shtml

>>130
申し訳ないです

>>135
ちょっと改造させてもらいます

>>136
ならなくて当然だろ、>>135のhtml,bodyを見ろ

>>137
お答えいただいたということは拙いサンプルを見ていただけた事だろうと思いますので
それを前提としての話なのですがそれを行ってしまうと
左にスクロールバーはつきますが、右にもついてしまうのです
さらには#EX内部のリンクが映らなくもなってしまうのです・・・

まさにあっちが立てばこっちが立たず状態でほとほと困っています

>>119
DOCTYPEは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" />
にしてるか？
dtdあるとうまくいかんかった希ガス。

>>138
右についてない
というかそれ以前の問題で全体が縦に伸びている
ブラウザはFx基準にしろ、IE6は取り敢えず後回しにしろ

>>139
XHTML 1.0 Transitional//ENで行っております

>>140
確かに全体が縦に伸びてしまうのが問題です
左のコンテンツ部分のみ伸ばしたいのですが
どうにもそれが上手くいきません

IE6、Fxなど特にブラウザにはこだわっていないのですが
現状の記述ですと問題ありますでしょうか？

>>141
html {width:100%;height:100%;}
#page{position:relative;height:100%;overflow:hidden;background-color: #deeeda;}
#left{height:100%;padding:text-align:left;background-color:#abcde0;float:left;overflow-y:scroll;}
#right{position:absolute;right:0;top:0;}

>>142
これを参考にしたらうまくいきました
ありがとうございます

何故この記述だとこうなるのか自分なりに解読してみます

・・・すいません、左のコンテンツ部分を可変にする場合はどうすればいいんでしょうか？
右のメニューの幅は固定、その余りを全て左のコンテンツに回す〜と言うような形なのですが

>>144
>>>135
自分の頭で考えられないなら何も作ろうとするな

>>144
float:left;をはずせ
で右のメニュー幅分右マージンとれ

マージン指定で行うんですね・・・ありがとうございます
これらを参考に作っていこうと思います
今日は本当にありがとうございました

参考？

>>148
まぁまぁ・・

それにしてもみんな優しいんだなあ
おれなんかフレーム使ったことがないから、ただ傍観していた。
>>119は幸せ者よ。うらやましいよ。ほんとに。

CSS2.0で背景画像を自由に複雑に並べることはできますでしょうか？
例えば

・横に２種類
ＡＡＢＢ
ＡＡＢＢ
・縦に２種類
ＡＡ
ＡＡ
ＢＢ
ＢＢ
・複雑
ＡＡ　　ＣＣ
ＡＡＢＢＣＣ
　　ＢＢ
ＤＤ
ＤＤ　ＥＥＥ
ＤＤ　ＥＥＥ

あくまで背景画像として並べたいのでtable等は使えません
よろしくお願いします

>>150
position:absolute;

コテには教えてやんねー

ヘッダーの作り方の違いが分からず困っています。
要素にheightを指定した場合、指定しなかった場合の違いを教えて下さい。

�@ヘッダー自体にheightを指定してヘッダーインナー内でpaddingを使いロゴ等の位置を調整する方法

�Aヘッダーにはheightを指定せずにロゴ等のpaddingで位置を調整する方法

この２つの違いは何ですか？どういう場合にどちらの方法を採用すればいいんでしょうか？

名無しには教えてやんねー

急に冷たくなったなあｗｗ

>>153
ヘッダーインナー内って何？
<div id="header">
<div class="in">
<h1>ロゴ</h1>
</div>
</div>
ってこと？

>>156
そうです。説明不足でした。

#head{
width:***px;
height:***px;
}

#header .in{
padding:**px;
}

という感じです。

>>156
#header .inって必要なの？
#headerにpaddingかh1にmarginだかpaddingを持たせるのはだめなの？

レス番間違えた
× >>156
○ >>157

>>158
#headerにそのままpaddingを使うと#headerの大きさが高さが変ってしまい、
#header自体の高さを再指定する必要があるので面倒です。
#header_inにpaddingを指定すれば#headerの高さを変える事なく位置調整ができる、
というのを本を読んで学びました。

h1自体にmarginやpaddingを持たせる事も可能だと思います。

web標準ではできるだけheightの指定をしないようにするという事なので、
>>153で�Aが正しい記述の仕方なのか確認したかったので質問しました。

http://www.mozilla.gr.jp/standards/webtips0020.html

>>160
絶対正しいってわけでもないし別に間違ってもいないよ
1より2の方があらゆる環境下（OS、ブラウザの違い）において優しいってだけ

> #headerにそのままpaddingを使うと#headerの大きさが高さが変ってしまい、
> #header自体の高さを再指定する必要があるので面倒です。
headerの高さを指定しなければいいんじゃないの？

> #header_inにpaddingを指定すれば#headerの高さを変える事なく位置調整ができる
例えば#headerに200pxのheightを指定して、#header .inにpadding20pxを指定したとして、
#header .inの中身が160pxを超えた場合、1~2行目と同じく高さ指定しなければならないと思うんだけど

うまく理解出来てないから変なこと言ってたらごめんね

>151
大変ありがとうございます
最悪それでもいいのですが、
できるだけbodyやdiv等への一括指定のみで実現したいのです
(タグ別に何かを指定するのではなく)
CSS2.0以降や独自のものでもよいのでどうか教えてください

コテには教えてやんねー

>>162
jQueryの要素追加と背景のposition使え。

position: absolute;を指定した要素の後に続く要素の配置について質問させてください。
<div id="header"><hi>logo</h1></div>
<div id="content"><img src="http://xxxxx/xxxxx.jpg" width="100%" /></div>
<div id="footer">footer</div>

#header {
position: relative;
z-index: 2;
width: 100%;
}
#content {
position: absolute;
z-index: 1;
width: 100%;
}
#footer {
width: 100%;
}

headerとcontent内の画像が重なって表示されるようにしたいと考え、上のソースのように指定しました。
headerと画像は重なって表示されましたが、position: absolute;を指定した要素は存在しない扱いになるので、
footerはheaderのすぐ下に配置されてしまいます。
footerがcontentの下に続くように配置するにはどの様にすればよいですか？
なるべくhtml側はそのままでcssで実現させたいのですが、
リキッドレイアウトなのでfooterの位置を絶対指定することも難しく行き詰まっております。
良い方法をご存知の方ご教示願います。
宜しくお願いします。

すいません。
<div id="header"><h1>logo</h1></div>
でした。

>>165
#content内に置くのはその画像だけ？

>>165
#contentじゃなく#headerをabsoluteにする

>167,168
ありがとうございます。
#content内にはテキストもありましたが、168の方法でうまくいきました。
#contentの位置を変更したいので#contentにabsoluteを指定しましたが、
#headerに指定すれば上手くいったんですね。
勉強になりました。
ありがとうございました。

２カラムレイアウトでサイトを作ったのですが、
OperaとFirefoxは大丈夫だったのにIEだけ
フッターの背景画像が下まで表示されません
どうしたらいいかわからないです
お願いします

ほんとすみません
自己解決しました
原因はアクセス解析の画像でした…

Opera、firefox、IEで動作確認したところ、
Operaとfirefoxは同じ表示で、IE（IE7）だけスペースが広いみたいで
背景画像と文字の位置がずれてしまいます
行間なのかmarginまたはpaddingが悪いのかよくわかりません
よろしくお願いします。

IE7使ってる奴なんてIE6より少ないから気にしなくていいよ

>>172
それだけでわかる奴がいるはずないだろー
CSSを一行ずつ削っていって
どこが悪さしてるか調べてみるといいよ

エスパーしてみるとfloatとmarginがバッティングしてる

floatのmarginが2倍になるバグはIE6までで
7では解消されてるからそこじゃないと思うんだが

CSS Tab Designerでタブメニューをつくり、そのタブを右寄せにしようと思っています
floatやtext-alignを使って色々やってみたのですがどうも上手くいきません
タブメニューの作り方等のサイト様を色々見てみたのですが
左寄せばかりで右寄せのソースが無く、煮詰まってしまいました
どこにどう書いたらいいのかご教示いただけないでしょうか

改行多すぎと言われたので発行されたコードは次レスに書きます

/* CSS Tab */
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #E0FFFF;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover {
color: #000;
background: #99CCFF;
border-color: #227;
}
#navlist li a#current {
background: white;
border-bottom: 1px solid white;
}

>>178
#navlist liにfloat: right;

>>179
ありがとうございます、おかげで上手く出来ました！
#navlistの方ばっかり見て自分で#navlist ul{とか追加ばかりしてました
本当に助かりました

>>2からのM$のサイト
リンク切れしてるよ

そこに限らずリンク切れはしてるが
別にアーカイブスで探せるしURLを乗せておいて悪くはない

IE8でtest1の方だけが透過が適用されません。
FireFoxdato両方透過が適用されます。
IE8でidに対して適用させる方法はあるのでしょうか？

div#test1 {
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
background-color: #000;
}
.test2 {
width:100%;
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
background-color: #000;
}

<div id="test1">test</div>
<div class="test2">test</div>

書き込んでから気がつきました。
widthがあるかないかで変わるみたいでした。

>>183
独自拡張、先行実装はスレチ

外出しのスタイルシート (hoge.css) ファイルの書き方についての質問です。

# foo {
　width: "100%";
}

というように、width の値に "" (ダブルコーテーション) でくくっている箇所があるのですが、
これは書式的に間違いですか?

# foo {
　width: 100%;
}

このように、"" で囲まないのが正しいでしょうか?

また、囲っている場合、ブラウザはそれでも 100% を適用しているのか、それとも無視しているのでしょうか?

今の仕事で引き継いだ CSS で、こうなっているところが多いので直すべきかどうか悩んでいます。
IE6 です。

#の後のスペースも"100%"も間違い
IE6ですら機能せんぞ

IE6とか聞くだけでイヤになる

floatに関して質問させて下さい。
<div id="rightBox">でボックスを作って右に配置し、左に<p>でテキストを配置し<p>には最小幅・最大幅をcssで指定しました。
また<div id="rightBox">と<p>は<div id="outer">で囲ってあります。

これをFirefox3.5.9や10.5.3やChrome5.0で見ると<p>のテキストのうち後半部分は
<div id="rightBox">を囲むように回り込んで見えます。
ですが、IE7だと<p>のテキストのうち後半部分は
<div id="rightBox">を囲むように回り込んで見えません。

IE7でもFirefox3.5.9や10.5.3やChrome5.0のように見えるようにするためにはどうすれば良いのでしょうか？

ソースです</head>まで
--------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#rightBox>p {
widows:500px;
height:200px;
float:right;
background-color:#CCC;
margin:0;
}
p {
font-size:5em;
min-width:400px;
max-width:1000px;
background-color:#CC6;
}
</style>
<title>Floatのテスト/title>
</head>

<body>
<h1>Floatのテスト</h1>
<div id="outer">
<div id="rightBox"><p>右のボックス</p></div>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</body>
</html>

--------
宜しくお願いします。

190の<title>Floatのテスト/title> のところミスコピしてしまいました、すいません。
正しくは<title>Floatのテスト</title>です。

何度もすいません....orz
#rightBox>pのスタイルのとこwidowsじゃなくてwidthでした。

<style type="text/css">
#rightBox>p {
width:500px;
height:200px;
float:right;
background-color:#CCC;
margin:0;
}

さらにやり直せ
いらないプロパティまで入れるな、最小単位まで切り分けしてから情報は出せ
一行ずつ削って悪い部分を調べるくらいはしろ

>>193
失礼しました。再度、掲載させていただきます。こんな感じでいいでしょうか？

やりたいことは、最小・最大の幅で伸び縮むテキストがあって
例えば、そのテキストが比較的長いテキストで、
右にfloatで配置したボックスの縦幅を超えるときなどに
IE7でも右にfloatで配置したボックスに対して回り込むようにしたいのです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

#rightBox>p {float:right;}

p {min-width:300px;
max-width:500px;}

</style>
<title>Floatのテスト</title>
</head>

<body>
<h1>Floatのテスト</h1>

<div id="rightBox"><p>右のボックス</p></div>
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

</body>
</html>

#rightBox>p {float:right;} じゃなくて#rightBox {float:right;}でも変わりありません。あと削るとしたらどういうところなんでしょう.

すんません、質問の質問、横レスさせてください。
>>194　さんのCSSで
#rightBox>p {float:right;}
ってある　#rightBox>p　の　> の意味ってなんですか？
こういう記述方法があるのですか？初めてみました。
ただのスペースからタグの記述ならわかるんですが、IDの後に＞で、その後に
タグが来るのは別の意味があるのでしょうか？

>>196
「css 子供セクレタ」で検索してみてください。
私は質問させてもらってる身分なので詳しいことは再度、他の方に質問してみてください、すいません。

>>196
ie6以前ではきかないってだけ
スペースと同じで、"〜内の"という意味
と、俺は解釈してる

>>194
これでどう？全ブラウザで確認したわけじゃないけど

<style type="text/css">
#right{
float:right;
width:600px;
background:blue;
}
#left{
display: inline;
min-width:300px;
max-width:500px;
}
#left p{background:red;}
</style>
</head>
<body>
<h1>Floatのテスト</h1>
<div id="right"><p>右</p></div>
<div id="left"><p>あああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
ああああああ</p></div>
</body>
</html>

>>199
アドバイスありがとうございます！
すごい、IE7でもやりたかったように表示されます。
回り込むテキストを囲む<div>のプロパティにdisplay: inline; を指定するのですね。
まったく気が付かなかったです。

なんか、上手くいえないんですがIE7のblockって頑丈なんですかね。
Chromeやfirefoxのblockって割と柔らかい、そんな感じです。

こんな時間にありがとうございました。
とても勉強になりました。

って、今更ながら気が付いた
>>196
「css 子供セレクタ」です、駄目だ、俺...orz

>>199書いといてなんだけど、
IE7ってシェア率低いからそんな気にしなくてもいいと思うよ

a:link
a:visited
a:hover
a:active

↑で全体で色指定をして、特定の箇所で違う色を指定して表示させることはできますか？

>>202
IE7ってIE6よりも低いよな。
IE7使うくらいならIE6を使い続けるかIE8に移った人が多いのだろう。

>>203
調べてもないだろ。基礎の基礎だよそれ
親要素 aで指定するかaにクラス指定で出来る

>>198
>>201
ありがとうございますm(_ _)m

>>198
かなり違うぞ？

selectタグをsize=nにしたとき、縦幅をIEとFireFoxでCSSで統一したいのですが
heightを設定してもズレがあり、line-heightも無効でした。

IEとFireFoxでselectタグ(size=n)の縦幅の差異を無くすにはどのように実現できますか？

>>208
ハック使えば？
ブラウザ毎の細かい差異は正直あきらめろとしか

>>208
Firefox3.5あたりからselectやinputのフォントサイズが小さくなったけど、フォントサイズはそろえている？
完全にそろえるのは難しいかもしれないけど、margin、padding、border、font-familyあたりもブラウザ
任せにせずに指定すれば、ある程度揃えることはできるんじゃないかな。

>>209-210
フォントサイズその他指定しましたが、どうにも変わりませんでした。

select内部のline-heightがIEとFireFoxで異なるのに変更できず、
IEでは行ごとに合わせて縦幅が確定してしまうのでズレてしまうみたいです。
フォーム部品もある程度統一してほしいなー

どうにもならなさそうなのでハックで対応してみます。
ありがとうございました。

すみません、クラスを複数持つタグの指定についておしえてください。
DIV class="class1 class2"
というようなHTMLタグを指定したい場合、CSSで
div.class1.class2 { }
と書くのは正しいのでしょうか?
FireFox3では普通に表示されるんですが、なんだか自信がないので…

おｋ
ただIEだかにバグがあったはずなんでそこだけ注意

div.class1 div.class2 {
}

オフィシャルで公式な書き方はこうだろ

>>214
お前は基礎から勉強してこい

>>214
読み取る能力どっかで取得してこい

＞オフィシャルで公式

力こそパワー！

>>213
ありがとうございます、たすかりました!

危険が危ない

それは違う気がする

ウィンドウ全体を枠で囲みたいと思い

.waku {
border: red solid 5px;
width: 100%;
height: 100%;
overflow: scroll;
}

てな感じでクラス使ってやってみたんですが
なぜかDOCTYPE宣言を入れると、横幅がウィンドウ幅を超えてしまい
縦幅はその内容の分までになってしまいます。
（宣言入れてないと全体を囲める）
これはなぜですか？思うように全体を囲むには、どうすればいいんでしょうか
IE8での確認

>>221
IE8ではdoctype有だとborderが要素の外に表示され、
無だと要素の内に表示されるんじゃないかな。
IE以外のブラウザでは基本的にborderは要素の外に表示される。

通常   　 　 　 　 　 　 要素全体の大きさ = width/height + margin + padding + border
古いIE（互換モード）　要素全体の大きさ = width/height

これ見てよ↓
http://livedoor.2.blogimg.jp/agomesu/imgs/5/8/58ff257e.jpg
ばらまこうぜ！

>>222-223
ありがとうございます。

ネット徘徊してたら↓のようなページもありました。
http://www.programming-magic.com/20071226033545/

border等を別口で計算するのって感覚的に変な気がするけど。それがHTML的に正しいんですね
するとウィンドウサイズから、常に絶対数値で一定のborder等を取るっていうのは
ちょっと無理みたいですね。100%-5pxとか式で表せたらいいのに
互換モードか、表示領域を絶対数値で固定するしかないのかな

自己レスなんですが、ボックスを2重にして
外のボックスでwidthだけ指定、中のボックスでmargin等だけ指定
さらに親要素に幅100%指定という方法で
横幅についてはうまくいったっぽいです。↓を参考にさせていただきました。
http://adp.daa.jp/archives/000265.html

さて今度は縦方向なんですが
まず外のボックスからその親要素まで、すべてheight: 100%とすると
ウィンドウのスクロールバーが出てしまうんですが、これはなぜですか？
99%だとバーは消えます

あと枠の下側については、ウィンドウ一杯まで拡がらず
内容の終わったところまでになってしまいます。下端まで拡げる方法はないでしょうか

>>226
ごめんソース出して

>>226
横幅については、わざわざ100%のボックスで囲まなくても
widthを指定せずにborderだけ指定すればうまくいくんじゃないかな

縦幅100%でスクロールバーが出るのは、上で説明されてる通り、ボックス全体の縦幅 = height + border だから
ネガティブパディングとか使えば上手くいくのかもしれんけど

widthを％指定したレイアウトがIE8のQuirksで崩れます。
IE6用に作成したページなのですが、widthの解釈など変わっているのでしょうか。

>>229
IE6の絡んだcssの初歩中の初歩だからそれくらいぐぐって調べましょう

IE6もIE8も後方互換モードでした。同じQuirksでも違うのでしょうか。

>>231
「IE6 IE8 後方互換モード 違い」とでもぐぐれば出てくるよ
IE6だけ特殊

IE6なんか使ってるやつはハブっておｋってこと？

>>233
アクセス解析ではまだまだ現役。悩ましい。

IE最新版にアップグレードするよう促せばおｋ

IE6を使っている人はファイヤーフォックスかクロームあたり
それかIE8とかにアップグレード促すのがいい
そういうキャンペーンを実施していく方向が大切なの

そもそもIEのバージョンなんか分からない人、気にしない人たちだからなあ。

・とりあえずOSにIE6ついてるから
・IE7やIE8にすると動作が不安定になる
・IE8は使いづらい　ほかのブラウザなんて以ての外
・IE6以外だとWebサービスやASP（EC系/ゲーム/業務用Webアプリ）が使えない
・会社のPCが未だw2k
・会社・学校の管理部がブラウザをアップデートしてくれない

など理由は様々らしい
Webアプリに関してはIE6でしか開発・検証してない制作者にも問題あるが

Google,Youtube、大手のweb企業がIE6サポートを外したんだから、
IE6云々は気にしなくてもいいと思うけどな。
寧ろ日本人はそういう古い層に対して気を遣いすぎな気がする。

IE9が出ればIE7,8も直に切られるだろ。
IE9からは標準に近くなるらしいし。

XPというものがあってな

XPのデフォブラウザがIE6だからって言いたいの？

めっ！！！

普通はmicrosoftの更新があるからブラウザ更新されるはず
更新も切っちゃうようなアホを視野に入れる必要はない

IE9がXPには対応しないってこと

>>232
回答ありがとう御座います。
1日調べてみましたが解決には至りませんでした。
具体的には
width %指定したとき、実際に確保される幅はIE6でApx、IE8ではA-1pxしか確保されない
というものです。
親のwidthはpx指定で幅を決めています。

0.5pxを切り上げるか切り捨てるかの話か?

いろいろ試していてfont-sizeが13pxの時のみ挙動が違ったので
フォントのバージョン？も気になるのですが、切捨ても変わっているのでしょうか。

文章だけじゃなくてどんなソースなのかも示さないと、ロクに答えてくれる人いないよ
ていうかIE6用に作成したページならIE8気にする必要ないんじゃ？

>>248
失礼しました。以下のように書いたとき、IE6とIE8(ともに後方互換)で表示が異なります。

<table cellspacing="0" border="1" width="1052px"
<tr align="center" style='font-family:"ＭＳ ゴシック";font-size:13px;'>
<td width="3%">あい</td>
<td width="97%">うえお</td>
</tr>
</table>
IE6だと「あい」が1行、IE8だと2行

IE6用でしたがIE8でも必要になりました。

>>249
こっちの環境ではIE6でも「あい」が1行で表示されるよ
IE6はIETesterで表示確認

ゆとりを持たせることはできないのかい？

ちなみに
*{margin:0;padding:0;}がないとIE6でもIE8でも2行表示
あると両方1行表示

連投すまん
>>252 1行表示と2行表示逆だった・・・orz

いや>>252で文章あってたわ、もうだめだ寝る

もやすみ

P要素の最終行だけ下マージンを0にするって
直接クラス指定する以外に良い方法ありませんか？

？

css2か3でp:lastchildみたいなのなかったっけ

ボックスの横幅を指定せずに、内容に応じたぶんになるようにしつつ
左右を中央に配置したいんですが
どのようにしたらできますか。

margin:autoほか駆使 / table
ぐぐれよ
というか>>2Q2

>>260
ああ、CSSスレでtableをレイアウトのためだけに使用するのが
当たり前のような回答を頂くとは、盲点でした。
ありがとうございます。諦めます

>>260
table厨はこのスレから出てってくれませんか？＞＜

でも>>260の言う通り少しはググるべきだな
ブロック要素 中央でググればいくらでも出るだろ

たしかにいくらでも出てくるな

幅を指定したり、非推奨使ったりする方法なら

>>259
このクラス（ID）を横幅指定せずに中央にしたい、って具体的にソース出してほしいかも。
どういうふうにしたいのか正直よく分かんない。
外ボックスにtext-align: center;、
中央配置したいものにdisplay: inline-block;とかどう？

自演って分かるよね

一応言っておくが、
1,margin:autoほか駆使
2,table
な。1推奨だけど、わからないんだったらtable使うのが楽っていうつもりで書いた。
さすがにjsつかうのはスレチ過ぎると思ったので書かなかった。
どうやら>>259は1ができないようなのでこのままでいいんじゃね。

個人的には非推奨でも主要ブラウザでちゃんと表示できるならいいと思うけどな。

>>267
＞1,margin:autoほか駆使
ほか駆使ってｗ
具体案出せないなら回答すんなよ・・・

margin:autoを使う方法は
幅の指定がいるorIE6とかで認識に問題があるらしいがな

幅指定なしって書いてるのにmargin:auto薦めちゃう人って…
答える側になる前にもうちょい勉強した方がいいぞｗ

横だけど対案も出せず、批判する奴ってｶｺﾜﾙｲよね

っ 鏡

スレタイ以外の話は他でやれ

>>265でいいじゃん。

htmlの中の<p class="001">ってクラス付けたのを装飾したくて、
スタイルシートに　p.001 { color: #03C; }　って記入したんだけど反映されない。
.(ピリオド)の前に付けるpタグを外せば反映されるんだけど原因がわかりません。
だれかアドバイスプリーズ。

＞識別名は数字もしくはハイフンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない

見落としてたorz
>>276
助かりました。サンクス

FC2ブログを使っています。
最新記事等で

記事名A
記事名B

の間に区切り線を入れたいんですがどうすればいいでしょうか？
自分で作成する記事本文の間に区切り線は入れれますが自動でどんどん追加されていく物に毎回手動で入れるのは…
自分で考えた限りでは

記事名
＝＝＝

というように更新されるように最新記事等のHTMLを変更すればいいと思うのですがいまいちわかりません。
抽象的な質問ですいませんでした。

イメージとしてはこのような感じです。
http://news020.blog13.fc2.com/

>>278-279
CSS以前にhtml勉強してこい

>>278
記事の外枠に
border:solid 1px #000;
border-top-width:3px;
margin-bottom:20px;
padding:20px 10px;
を追加汁

@import url("style.css");と
<link href="./style.css" rel="stylesheet" type="text/css">
の違いって無いですよね？

>>282
ttp://screw-axis.com/2009/06/07/css-import%e3%82%92%e4%bd%bf%e3%81%86%e3%81%b9%e3%81%8d%e3%81%a7%e3%81%aa%e3%81%84%e7%90%86%e7%94%b1/
読み込み方が違うみたい

>>282
使う場所が全然違うだろうがｗ

>>284
多分だけど、1つのCSSから複数を読み込ませるか、
headに<link href〜を複数書くかで迷ってたんじゃない？
違ったらごめんよ

>>284
こういうつまらないことを平気でやってのける
シビれないしあこがれない害虫は、さっさと駆除されるべき

safari3.0.4とSafari4.0.5の外部CSSの見え方の差について教えて下さい。( XHTML 1.0 ）

safari3.0.4ではきちんと表示されるのですが、Safari4.0.5ではそもそもCSSを読み込んでいないような表示になってしまいます。
SafariのVerがあがることで何か変更された部分があるのでしょうか。（ブラウザは諸事情でこの２つの環境のみ使用しないといけない状態です。）
以下はCSSの記述になります。よろしくお願いいたします。

@charset "Shift_JIS";

/* ========BASIC======== */
* {margin:0px;padding:0px;font-size:12px;font-family:Verdana, Helvetica, sans-serif;
font-weight:normal;;color:#333;line-height:20px;letter-spacing:1px;}
body {background:#fff;text-align:center;}
br {letter-spacing:normal;}
img {border:0;}
a {color:#68903C;text-decoration:none;}
a:hover {color:#92C45B;}


長文がかきこめないので一部になってしまうのですが・・・。

>>287
そういうのは全部見ないと分からないかな・・・
よくあるのは、CSSのcharsetが実際とは異なってる時
見れないブラウザからソース表示でhtmlとcss両方見れる？

>>288　さん
今見てみたらソースは見ることができました。
テンプレートを再加工している形なのですが、今確かめてみたら元のテンプレートのほうも、表示がSafari4.0.5では駄目でした。

ttp://www.coolwebwindow.com/template/css001.php
こちらのサイトさんのTypeB_001 というものになります。

>>289
確認しようと思ったけど、俺この前Safari5インストールしたんだった
Safari4.0.5は不具合が多いらしいけど、cssが読み込めないっていうのは聞いたことないな
とりあえず俺は力にはなれなさそうだ、ごめんよ

Windows版の5.0では問題なく見られてるな

>>289
cssの27行目、セミコロンが1個多いから消しておくといいよ
div#menu li aのcolorの前

>>287
明らかにテンプレのレベル低すぎだろ。
「font-weight:normal;;」みたいなクソミスもあるし。
一応、これ↑の;一つ削ったら表示されないか？

Win用のSafari4.0.5では見れたし、文字コードは問題ないみたい。
ダメなら他のテンプレ探した方が早そうだな。

>>290-293さん
みなさんご確認ありがとうございました。
上記の対処を試したのですが、残念ながらうちの環境では正しく見ることができませんでした；

自分の勉強がてらもうちょっとがんばって試してみようと思います。
ありがとうございました。

borderとoutlineって
どう区別するものですか？

>>295
outlineはborderより外
borderには上下左右と各々で指定出来るけど、outlineはそれが出来ない

outlineは要素の幅とかに干渉しないし
四角形じゃない要素に指定したら複数描画されたりする

overflow: auto; を指定した親要素の
中の子要素を、親要素よりハミ出して表示させたいんですが
やっぱり不可能ですか？
z-indexでは無理でした

position

>>298
overflow: auto;付けちゃうと無理じゃないかなぁ
overflowを取れば可能だけれども

ですよね
ハミ出しつつも、親要素と一緒にスクロールさせる
なんて都合のいいことはできませんよね

そういうふうに見せかけたいだけなら出来ると思うよ

TABLEで、あるセルだけ枠線を二重線にしたいんだけど
どうしたらいいだろ
わけあって、TDタグのなかにSPANとか書けません

>>303
二重線にしたいセルにクラスを付けて、
cssでそのクラスを二重線になるよう指定するだけ

ここで聞いていいのかわからないんですが、ご教示願います。
最近webfontなるものを見つけて、ブログのタイトルやらを
CSSをいじりwebfontで表示させようとしているのですが、さっぱりわかりません。

そこで、webfontを使用している方のCSSの記述例なんかを教えていただけませんか？

以下環境です
ブログ：blogger
webfont：Fonts.com http://webfonts.fonts.com/　（アカウント作成済み）

俺はこんな感じの記述でやってるよ、みたいな感じの例でも構いません。
よろしくお願いします。

また、webfontならここを使ったほうがいいんじゃね？みたいなのがあれば是非そちらの方も教えてください。

>>304
それやって出来なくて、あれーと思ってたんだけど、できました。

TABLE.unko TD で色とか枠の太さを設定していると
TD.chinko よりも優先されんだな。知らんかったわ。

>>305
@font-faceをjs用いてどのブラウザでも表示させたいんだけど
方法が分からないから教えてってこと？
それともそのwebfont：Fonts.comの使い方を教えてってこと？

>>307
すいません、前者のことです。

>>308
cufonっていうのどう？
ttp://www.netch.jp/articles/2009/06/25/cufon/
こういうフォント関係は日本語（2バイト文字）だと環境によってはめちゃくちゃ重いから、
出来れば英字フォントだけがいいと思うよ
タイトルのみって書いてるからそこんとこ考慮してるとは思うけど一応ね

下記のSUBMITボタンを左寄せしたいのですが
うまくいきません。

<form
省略・・・
<div class="submit"><input type="submit" value="Submit" />
</div>
</form>

下記のように書いたのですが、左いっぱいまで詰まりません。
幅は反映されるものの高さも文字の大きさも変わらずです。

<style type="text/css">

.submit{
display:block;
width:80px;
height:15px;
text-align:left;
font-size:11px;

</style>

cssじゃなくてhtml勉強してきた方がいいよ

>>310
divにあれこれしたって意味ないよ
.submit input{ }
でボタンそのものを指定しる

他にもツッコミ所は満載だけど、とりあえず後は自分でやってみ

ありがとうございました。
下記でできました。

.submit input{
display:block;
width:80px;
height:25px;
text-align:center;
font-size:11px;

position: absolute;
left:0px;
}

>>313
display:block;　→　イラネ
position:absolute; + left:0;　→　float:left;

>>309
遅くなってしまいすいません
目的はタイトルやサブタイトルをwebfontにしようと考えていて
そのタイトル等は英語なので英字フォントのみ適応させようと思っています。

cufon参照しました。これはこちらでフォントファイルを用意する必要があるようですね。
この場合著作権に触れないフォントであることが前提になる気がするので、
できれば前述したFonts.comから引っ張ってくる方法をとりたいです。

>>315
これで分からないなら諦めた方がいい
ttp://blog.petitboys.com/archives/fontscom-web-fonts.html
あと著作権フリーの英字フォントなんてググればいくらでも見つかるぞ

CSSのソフトってネット繋いでなくても、オフゲ出来ますか？

申し訳ないです。板違いでした

preタグをchromeやsafariで表示すると文字サイズが小さく表示されます。
他の文字サイズと統一させたいのですが、どうするべきでしょうか？

100%指定したら

<input src="http://example.com/gazou.png" class="borderbottom">

.borderbottom:hover {
border-bottom:2px solid black;
}

inputで貼りつけた画像にマウスオーバーした時2ピクセルのボーダーライン（下部にだけ）を表示させたいのですが
実際にマウスオーバーすると下のほうが全て２ピクセル下にズレて表示されてしまいます。（マウス外すと元に戻る）
何か解決法ないでしょうか？

>>321
inputのtypeは書き忘れ？

.borderbottom { border-bottom: 2px solid white; }
.borderbottom:hover { border-color: black; }
or
.borderbottom { margin-bottom: 2px; }
.borderbottom:hover { margin-bottom: 0; border-bottom: 2px solid black; }

元から線をつけておくか、hover時にmargin-bottomを外すかのどっちかでいいと思うよ

>>322
なるほど。頭良いですね。
type等は関係なさそうだったので省略しました。ありがとうございました。

下線(underline)そのものだけ色を別にするってことは、できないんでしょうか？
border-bottomで代用するしかありませんか

>>324
できない

無駄な要素を増やさないと無理やね

>>316
そのページでwebfontを知って各登録であったりはできていたんですが、
手順どおりやってもブログのフォントが反映されなかったためここで質問しました。
フリーのフォントを変換してもｂｌｏｇｇｅｒだとアップロード先が無いので
別でサーバ借用となるのも変な気がしたので
できればwebfontっていうのが希望です。
このサイトはフォントの大御所も参加してるってとこも是非とも使いたい理由です。

ヘッダとフッタ以外を全てCSSで擬似インラインフレームにしたいのですが、ヘッダとフッタ部分をピクセル数や行数で指定できないので、margineを使ったやり方が使えません。
他にどのようなやり方がありますか？

もっと人にモノを伝えようという努力をしよう

IE以外のFireFoxやSafariの場合には、正常に表示されるのですが、
<form>タグと<div>タグが連続している場合に、
特別　margin-top　といった余白の指定している訳では無いのですが、

<form>
　〜 略　〜
</form>
　　↑
　この form　と div の上下間隔がIE8では大きくなるのはなぜでしょうか？
　また、この不具合を解消するにはどうすれば良いのでしょうか？
　　↓
<div>

</div>

>>330
> 　この form　と div の上下間隔がIE8では大きくなるのはなぜでしょうか？
こっちの環境では大きくならないから何らかのcssが影響してると思う
解消したいなら具体的なソース出してください

クラス名に大文字を使う（大文字と小文字を混在させる）って
定石的に言って問題ありませんか？

IDは大文字で書くのが慣わしでしたっけ？

クラス名にアンダースコア'_'を使うと古いブラウザで認識できないと見ましたが
古いブラウザというのは、具体的になんでしょうか？

HTMLならIDはある意味習わしってよりリンク先のための必須事項だがXHTMLなら関係ない
アンダースコアはIE4で駄目だったと思うがNN4以上IE6以上なら関係ない
クラス名に大文字小文字混在は問題ないが大小間違えるとapplication/xhtml+xmlでは間違い

>>332
> クラス名に大文字を使う（大文字と小文字を混在させる）って
> 定石的に言って問題ありませんか？
はい
> IDは大文字で書くのが慣わしでしたっけ？
いいえ
> クラス名にアンダースコア'_'を使うと古いブラウザで認識できないと見ましたが
> 古いブラウザというのは、具体的になんでしょうか？
IE6以下だから気にする必要は全くない

どっかのサイトでIDは大文字で書いとけって見たような気がする

HTMLならIDは大文字
ていうか>>333が言ってるじゃないか

いい加減ブラウザ、ＣＳＳの仕様を統一してくれんかね。
メンドクサイ。

携帯会社の docomo　もひどい。

CSSで、リンクでページ内の特定の領域だけを書き換えるって
できませんよね？

ちょっと何言ってるかわかんないっすね

>>337
CSSの仕様とブラウザの実装をごっちゃに語るな

>>338
わからんがa要素にcontnetで文字挿入とかの話か？

スパイウェアを仕込んでるJane Styleは危険です。

Google Adsense違反報告スレ Part10
http://pc12.2ch.net/test/read.cgi/affiliate/1267346244/

JaneStyleがスパイウェアみたいな動作するらしい件
http://namidame.2ch.net/test/read.cgi/poverty/1278496905/

【スパイウェア？】JaneStyleで書き込みしようとしたら、○○に情報が送信されていた件
http://tsushima.2ch.net/test/read.cgi/news/1278681871/


■Google Adsense 違反通報URL
https://www.google.com/adsense/support/bin/request.py?contact=violation_report


※個人情報漏洩による被害者をこれ以上出さない為に、
　このコピペを見つけた方は一人５箇所以上にコピペをお願いします。

CSSでテキストボックスの入力を全角カナにするには
どう指定すればよいのでしょうか？

CSSでやることじゃない

displayプロパティって
何に使うものですか？

>>344
そんくらいググれ
css display

<div style="positon:relative">
<img src="main.jpg">
<img src="sub.png" syle="position:absolute; top:-3px;left:-3px;">
</div>
メインの画像に対してサブの画像を上と左に-3pxずつずらし絶対位置を指定して表示しています。

この場合に、親のdivタグの透明度を動的に変えると、
親タグの外に表示される部分(sub.pngの上と左側に3px分)がIEだと表示されなくなります。
英語ページで同様の問題は見つけることはできるのですが解決策がわかりません。
解決策等ありましたら教えてください、宜しくお願いします。

静的に変えて問題がないのなら
その動的に変えるスクリプトの問題だろ
スレチ

>>346
物理的に親の外に出てようが親子関係は変わらねーだろ
親にマスクされたような状態になって透明度も継承されてんじゃね？
subだけに再度透明度を設定し直してみれば？

line-heightで行の高さを大きくすると、文字の上下に均等に余白が付く感じなのですが
余白を文字の下側のみにしたいのですが、どうにかならないでしょうか？
一緒にvertical-align: top; を指定しても、変化ありません

一行ごとにmargin-bottomを付けたボックスとしていては面倒だし
折り返しになったときに問題が出ます

上下についてもいいじゃん。
その段落の上の余白を無いように見せれば。

ですよねー

firefox3.6.6を使っています。
すみませんが教えて下さい。
全てのサイトで、全ての文字のサイズを同じに、且つ、文字が上下左右に重ならないcssを。

なお、デスクトップ右クリ→プロパティ→設定→詳細→フォントサイズを192パーセントにしています。
firefoxのオプション→コンテンツ→フォントと配色の詳細設定→最小フォントサイズは24です。

どうぞよろしくお願いします。

firefoxスレで聞け。スレチ

スレチではないと思います。
わかる方、どうぞご回答お願いします。

>>354
スレチではない理由を教えてよ

cssに関する質問だからです。
この質問がスレチというなら、全ての質問が「そのcssを使うhtmlビューワのスレで聞け」となってしまいます。

>>352
> 全てのサイトで、全ての文字のサイズを同じに、且つ、文字が上下左右に重ならないcssを。
無理だね
優先度：サイト側css＞ユーザーcss

ありがとうございます。
ie6だと、以下のcssで、私の知る限りの全てのページで同じ文字サイズで表示できましたが、firefoxだと同じ文字サイズにならないページがあります。

a:link, a:visited, a:hover, a:active, body, dd, div, dl, font, h1, h2, h3, h4, h5, h6, hr, img, input, li, ol, p, select, span, table, td, textarea, th, tr, ul {
line-height : 2 !important;
}

完璧でなくてもかまいませんので、上記のcssより確実に、同じ文字サイズにできるcssがありましたどうぞ教えてください。

>>358
> firefoxだと同じ文字サイズにならないページがあります。
サイト側cssでfont関連に!importantされてたら無理
> line-height : 2 !important;
文字サイズではなくこれは行間

!importantしているサイトを除けば、単純に
* {
font-size: 13px !important;
line-height: 1.4 !important;
}
とでも書けばいんじゃね？

>>358
IEでも無理です。残念でした

>>357
最後の行ェ・・・

下のような、画像に対してテーブルが回りこむようなレイアウトは可能でしょうか？
・画像にfloat: leftを指定してもテーブルは回り込みまない（その後ろの文字が回りこむ）。
・tableにfloat: rightを指定すると画像とテーブルの間隔が大きくあいてしまう。

画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜
画像画像画像画像　｜―――――――｜

>>362
＞・画像にfloat: leftを指定
で普通にできてるけど？

>>362
両方floatをleftでテーブルの左にだけマージン入れたらどうよ？
table { margin-left:20px; }
とか。

>>362
それか、両方を囲むdivで囲って、横幅持たせて
画像はレフト。テーブルはライトでどうよ？
親の幅で隙間の広さが調整出来るんじゃね？

position:absolute;やposition:fixed;を指定した要素ないの文字が画面の端で折り返してしまいます
どうすればよいでしょうか

こうしたい↓
┏━━━━━━━━━┓
┃　　　　　　　　　┃
┃　　　今日はいい天┃
┃　　　　　　　　　┃
┃　　　　　　　　　┃

こうなる↓
┏━━━━━━━━━┓
┃　　　　　　　　　┃
┃　　　今日はいい天┃
┃　　　　　　気です┃
┃　　　　　　　　　┃

>>366
その要素にwidthもたせて、
overflow:hidden;
かな。

http://www.dotup.org/uploda/www.dotup.org1045511.png

みなさん↑こういうデザインつくるときどうコーディングしてる？

<div>
　<img />
　<div>
　　<h2>見出し</h2>
　　<p>あいうえおあいうえおあいうえお…</p>
</div>

今まで、こうやって、
imgと内部のdivにfloat:left;もたせていたんだけど、
もっと簡単な方法ないかなぁと思いまして。

>367
だめでした…

質問です。

サイト全体で、リンクの文字の背景色を指定していて、
ある部分だけ背景色"無し"にしたい場合はどうしたらいいんでしょうか？

すいません、解決しました。
transparentでした。

>>369
white-space: nowrap;

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

a:hover
{
color:darkblue;
background-color:white;
text-decoration:none;
}

こういうのを設定したんですが、
whiteが反映されません。
なぜでしょうか？

snowやredはちゃんと反映されるんだけど、whiteはダメです。

＞snowやredはちゃんと反映されるんだけど、

whiteのところをsnowやredに変えたらってことです。

Firefoxだとちゃんと白になるなあ。

IE8のバグだったのか。

>>376
IE8でも普通に変わった
他のところ間違えてるだけだろ

>>377
マジ？

他のCSSを削除して
>>374だけにしても白にならなかった
orz

制作者のCSSを反映させない設定にでもしてるんじゃね

うーん、どうやってもダメだわ。
snowで行っとくか。

link
visited
hover
active
と順に書いてる？

sage1_22148.zip
で、うぷしてみた。

？

１、UPロダをさがすのが大変。
２、パスが明確でない。候補をいくつか試したが全部NG
答えてもらいたくないらしい。

パスは「33568」です。
ｽﾏｿ

削除キーだと思ってたｗ

でも、hoverを設定しただけの簡単なHTMLです。

だめだこいつはやくなんとかしないと・・・

IEのバグじゃね。
white → #FFF　でも同じ結果。
aにdisplay:block付けると色変化。
しょうがないからbackground-color:#FFE;でいいじゃん。

>>374
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
↓
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ていうかなんで今更html4.01使ってるの？xhtml1.0以降にしなよ

>>387
やっぱりバグですか。安心しました。

>>374
いや、それはホームページビルダーが勝手に入れるので・・・

「タグ直打ち」→「ホームページビルダーでタグ整形」
でやってます。

えっ・・・　　それはまた・・・

機械任せもいいけど、それがどういう意味を示しているのか、
どう解釈が違ってくるのか、なんとなくでいいいから覚えた方がいいよ

うぷろだ見つからないからそいつのソースは知らんけどさ
普通にしてればwhiteだろうが#fffだろうが普通にIE8でも変化するんだから
そいつのソースが間違ってるとしか思えないんだが

ttp://sageuploader.vs.land.to/1upload/upload.html?1280021790
です。

だから>>388のようにDOCTYPE変更すれば背景白くなるってば

>>394
白になりました。
THANKS！！

でも、結局はIEのバグなんだよね？

はぁ？お前の設定ミスだろ。
IEの動きがあやしいのは事実だが、自分のミスなのをバグバグ言う奴はｲﾗｯとくるわ。

>397
そこは堪えて!!

>>396
DOCTYPEスイッチ でググるといいよ
元々書いてあったDOCTYPEでは後方互換モードになって、
>>388で書いたDOCTYPEでは標準準拠モードになる
>>397も言ってるけど、自分が納得いかない＝バグっていうのはやめようぜ

>399
その言い方だとめっちゃ傷つくかもしれないだろ
本人がどういう意図や意味でバグと言ったのか分からないし
もうちょっとできるだけ当たり障りのないようにレスして欲しいな
そうすれば神スレになるしそのうち神板になる

2chを変えて行こうよ

>>400
ググっても出てこないんだけどこれコピペじゃないの？

fc2で配布されているテンプレートの内、
ttp://www1.axfc.net/uploader/Sc/so/137469.txt（パス：PASS）を、
使っているのですが…

記事を投稿する時、
文字の大きさを変えようとしても、
何故か反映されません。

どこが原因なのか、まるでわからないので、
どなたか、ご教授願います。。。

ごめんなさい、パスは小文字です…。

html側は見てないけど、そのカスタマイズ部分の下に.entry_body　font-sizeがたくさんあったから、上書きされてるのかもって思った。
font-size: 11px !important;に変えてみてもダメ？

あと、パスをURLに入れれるよ。
http://www1.axfc.net/uploader/Sc/so/137469.txt&key=pass

>>399
後方互換でも普通は変わる
やっぱりそいつのソースが何かおかしいんだろう
もう見る気も失せたが

>>402
それだけじゃわからない
HTML/CSSの最小単位出して

>>405
＞もう見る気も失せたが

1分で見れるのに何を恐がってるんだかｗ

/* 基本
------------------------------------------------- */
body {
background: #fff;
color: #1b1310;
font-family: 'ヒラギノ角ゴ Pro W3',**** sans-serif;
font-size: 12px;
line-height: 1;
text-align: center;
}

12pxだな。

怖が・・・る・・・？

>>406は違法DLで痛い目に遭ったことがあるんだろｗ
そっとしておいてやれ

>>405
＞後方互換でも普通は変わる

今回の場合はどうやっても無理みたいｗ

＞やっぱりそいつのソースが何かおかしいんだろう

ソースには問題ない。

自分で*今回の場合は*と言ってるんだかソースの問題だべ

いや、ソースには問題ないと思うよ。
374じゃないけど。
他のブラウザでは問題なく動くし、明らかにおかしいと思う点もない。
「a:hover使うときに:activeとか他のも必ず明記しなければならない」とか
「<META http-equiv="Content-Style-Type" content="text/css">とは別に<meta>が必要」とか
「html部分を大文字でcss部分は小文字で書くのはNG」とかだったら俺の知識不足だ。

他のIEシリーズで同様に動かないなら「仕様」
旧シリーズの方では正しく動くなら「バグ」

　な　ん　な　ん　だ　　こ　の　低　ラ　ベ　ル　は !

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　/)
　　　　　　　　　　　　　　　　　　　　　　　　( i )))　　　　　　　　
　　　　　　　　　　　　　　　　　／￣＼ 　/　/
　　 　　　　　　　　　　　　　　| 　＾o＾　| ﾉ　/ ＜　いみがわかりませんなぁ
　　　　　　　　　　　　　　　　　＼　　 /　 ,/
　　　　　　　　　　　　　　　　 ／ ＿　　 /´.
　　　　　　　　　　　　　　　　(＿＿＿）/
　　　　　　　　　　　　　　 ／ l`､　　ノ　 ﾉ
　　　　　　　　　　 ,...-‐''" 　_.l::::｀ー,=-'（
　　　　　　　　　／　　　　 ´ ,.!_;;;:r''..　　 ` ､
　　　　　　,...-‐'　　　_,....-‐'"　 ｀'-､::　　　　` ､
　　　　 ／.. 　,....―'"　　　　　　　　`ｰ､＿_　　｀l
　　　 ／_;::::-'"　　　　　　　　　　　　／::::::::::::::::ノ
　,...／._r'"　　　　　　　　　　　　　　　ヽ`''「￣￣
（＿＿ノ'　　　　　　　　　　　　　　　　　＼_＼

>>412
hoverオンリーの後方互換でも普通に動くが
どんな酷いソースだったんだよｗｗｗ

もう解決してる案件なんだから無駄にスレ消費するなよおまえら
特にAA

2ちゃんねるまとめサイトみたいにRSSをヘッドラインに設置するのはどうやってやるんですか＾＾

スレチ

>>416
そのHTMLのタグを晒してみてくれ

精神異常者A「>>393のファイルは見ない。けど、ソースがおかしいんだろ。」
↓
健常者「ソ−スを見たけど、変なところは無かったよ。」
↓
精神異常者A「おかしくないわけがないだろ！！」＆逆ギレ

何これ・・・・

自己紹介しなくていいよ

お前だろｗ

うわー

>>420-424
>>417

いや、解決してない

↑
精神異常者

↑
精神異常者B

↑
精神異常者Ｃ

↑
精神異常者D

いいかげんにしろ・・・

お前がなｗ

>>413
IE6ではたしか普通に動いてたからバグだな。

もういい

取り敢えず暴れてる奴、せめて文体くらい変えろよ恥ずかしい

？？？

>>435は、

432と433の語尾が「な」だから同一人物って言ってんの？
痛すぎる・・・

お前は何を言っているんだ

>>437
駄目だこいつ

ここまで俺の自演

>>440
おれはお前か？それともお前がおれか？

>>441
俺がお前だけど>>440もお前だ

>>427-430
！？
精神異常者たちが・・・

なんだこのうぜー流れ

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　/)
　　　　　　　　　　　　　　　　　　　　　　　　( i )))　　　　　　　　
　　　　　　　　　　　　　　　　　／￣＼ 　/　/
　　 　　　　　　　　　　　　　　| 　＾o＾　| ﾉ　/ ＜　いみがわかりませんなぁ
　　　　　　　　　　　　　　　　　＼　　 /　 ,/
　　　　　　　　　　　　　　　　 ／ ＿　　 /´.
　　　　　　　　　　　　　　　　(＿＿＿）/
　　　　　　　　　　　　　　 ／ l`､　　ノ　 ﾉ
　　　　　　　　　　 ,...-‐''" 　_.l::::｀ー,=-'（
　　　　　　　　　／　　　　 ´ ,.!_;;;:r''..　　 ` ､
　　　　　　,...-‐'　　　_,....-‐'"　 ｀'-､::　　　　` ､
　　　　 ／.. 　,....―'"　　　　　　　　`ｰ､＿_　　｀l
　　　 ／_;::::-'"　　　　　　　　　　　　／::::::::::::::::ノ
　,...／._r'"　　　　　　　　　　　　　　　ヽ`''「￣￣
（＿＿ノ'　　　　　　　　　　　　　　　　　＼_＼

--------------スレ終了--------------

　　　　　　　　　　　　　　　　　　　　　　　　　　 __,,:::========:::,,__
　　　　　　　　　　　　　　　　　　　　　　　 ...‐''ﾞ .　　｀　´　´､ ゝ 　 ''‐...
　　　　　　　　　　　　　　　　　　　　　 ..‐´　　　　　　ﾞ 　　　　　　　　 ｀‐..
　　　　　　　　　　　　　　　　　　　　／　　　　　　　　　　　　　　　　　　　＼
　　　　　　　　.................;;;;;;;;;;;;;;;;;;;;;;::´　　　　　　　　　　　　　　　　　　　　　　ヽ.:;;;;;;;;;;;;;;;;;;;;;;.................
　　　.......;;;;;;;;;;ﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞ　　　 　 .'　　　　　　　　　　　　　　　　　 　 　 　 　 　 ヽ　　　　　 ﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞ;;;;;;;;;;......
　 ;;;;;;ﾞﾞﾞﾞﾞ　　　　　　　　　　　　/　　　　　　　　　　　　　　　　　　　　　　　　　　　ﾞ:　　　　 　 　 　 　 　 ﾞﾞﾞﾞﾞ;;;;;;
　　ﾞﾞﾞﾞﾞ;;;;;;;;............　 　　　　　 ;ﾞ　　　　　　　　　　　　　　　　　　　　　　 　　　 　　ﾞ;　　　　　　　.............;;;;;;;;ﾞﾞﾞﾞﾞ
　　　　　　ﾞﾞﾞﾞﾞﾞﾞﾞﾞ;;;;;;;;;;;;;;;;;.......;.............................　　　　　　　　　　　　　 ................................;.......;;;;;;;;;;;;;;;;;ﾞﾞﾞﾞﾞﾞﾞﾞﾞ
　　　　　　　　 　 　 　 　ﾞﾞﾞﾞi;ﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞ;lﾞﾞﾞﾞﾞ
　　　　　　　　　　　　　　ﾉi|lli;　i　. .;,　､ 　　 .,,　　　　　　　　　　　　` ;　､　　.;　´ ;,il||iγ
　　　　　　 　 　 　 　 　 /ﾞ||lii|li||,;,.il|i;,　; . ., ,li　　　'　;　　 .`　.;　　　　il,.;;.:||i　.i| :;il|l||;(ﾞ
　　　　　 　　　　　　　 　　｀;;i|l|li||lｌｌ|||il;i:ii,..,.i||l´i,,.;,..　.il　｀,　　,i|;.,l;;:`ii||iil||il||il||l||i|liiﾞゝ
　　　　　　　　　　　 　　　　 ﾞﾞ´`´ﾞ-;il||||il|||li||i||iiii;ilii;lili;||i;;;,,|i;,:,i|liil||ill|||ilill|||ii||lliﾞ/｀ﾞ
　　　　　　　　　　　　　　　 　　　　´ﾞ｀ﾞ⌒ゞ;iill|||lli|llii:;ﾞi|||||l||ilil||i|llii;|;_ﾞι´ﾟﾞ´

はてなダイアリーで http://d.hatena.ne.jp/hatenadiary/ と同じテーマを使っているんですが、
IEで表示した時だけカラムの幅が広がってしまいます。（上のブログでもそうなっていると思います）
CSSで最大幅を指定してIEでも他のブラウザと同じように表示させるにはどうすればいいでしょうか？

また、Safariでブログ名などの一部フォントが異なって表示されるのですが、
そちらも指定する方法があれば教えてください。

>>448
> IEで表示した時だけカラムの幅が広がってしまいます。（上のブログでもそうなっていると思います）
俺の環境だとなってない
> また、Safariでブログ名などの一部フォントが異なって表示されるのですが、
フォントサイズ変えればいいだけの話じゃ？

IE8でみたが普通に広がってるね。
フォントの方はMacに存在するフォントもしていすればよくね。

IEはmax-width 910pxが機能してないっぽい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">がいけない。
別のに（オミトロンで見る側から）変えたらIEも910だったよ。ページ作成者側で変えられるかは知らん。

max-widthとかはブラウザ独自拡張

>>452
ちげーよ
知ったかは10年ROMってろ

max-width−スタイルシートリファレンス
http://www.htmq.com/style/max-width.shtml

IEは非対応

>>454
IE6以下は非対応

ここは初心者が回答するスレだっけ？

初心者が知ったかぶりで回答するスレ

>>455-456
<div style="float: left;">ボックス1</div>
<div style="float: left;">ボックス2</div>
<div style="float: left;">ボックス3</div>
・・・
という感じで、ボックスを横並びに次々と配置したいのですが
ウィンドウ幅を超えた時点で、ボックスごと下に折り返してしまいます。
折り返さないようにしてください。

>>455＝自称玄人

>>457
それらを覆うボックスに好きなだけ横幅を取る

>>459
あー申し訳ないけど、それはできないです。
ボックス1、2、・・・は、内容に応じて幅が可変する
（ブラウザ側の文字サイズ変更にも対応）ようにしておき
またスクロール量も、あくまで内容に応じたぶんまでに留めたいので
それはしませんでした。

幅をmax-widthの%指定すりゃいいんじゃね

>>460
だったらテーブル
まあそんなサイト行かんが

テーブル……

いやだけどね

出たっ、ティボゥ！

line-heightに100%を指定すると
IE8、標準フォントで余白がない場合
「ウ」の上端1ドットなどがウィンドウからはみ出してしまいますが
どういうことですか？

そういうことです

インターネットマガジンで連載してた、HTML＆スタイルシートクイックリファレンス
みたいなHPない？

ここはCSSの質問スレッドです

スタイルシートで数値のテキスト（divとかで囲って任意のidやらclassやらが振ってあるとして）の
整数部分のフォントスタイルを変えることってできますか？

やればできる

整数部分って何だ
半角英数だけのフォントを先に指定して、優先順位下げて日本語フォント指定とかの話か？

スタイルシートの解説サイトって、
デザインがイマイチなものばかりで見る気が失せるな。

フォントのbaselineの上と下の幅は、何対何ですか

フォントの種類とbaselineの設定とブラウザによって違う

HTML 4.01 Strictで
<table>
<caption></caption>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
のような表を作ってCSSを
table { height: 200px; }
tr { height: 33%; }
のようにしてtableとtrにのみ高さを指定してIE8に表示させた場合、
trの高さがtableの高さに満たない状態でもcaption部分の高さで
残りの高さのつじつまを合わせるような描画はされないですよね？

captionの扱いについては規定がない

CSS3っていつになったら普及するんですか？

普及以前に規格が完成していません

>>477
ありがとうございます。
widthとかheightとかの方を重視するならcaptionではなくcolspanを指定したtdを1つ入れた
trを使った方が良いという感じになるのかな？

>>476
何をやりたいんだか全然わからん
trが200px÷3＝66px以下しか内容物がない場合
空白でtrの高さが取られるだけでその高さにcaptionは関係ない
お前がそういう指定をしているだけだ

>>477
IE8はtableに指定したheightの中にcaptionのheightは含まれないっぽいです。
Gecko 1.9.1.11はtableに指定したheightの中にcaptionのheightも含まれるっぽいです。

だから規定がないって言ってるんだろ？
で？

>>476
なにをやりたいのかよく分からないから、まず>>481に答えてあげてよ。

trが2段で「残りの高さのつじつまを合わせ」（ここがよく分からんのだが）
ってことは
　captionの高さが 68px（200pxの34%）
　trの高さが 66px（200pxの33%）が2段
っていうのを望んでいるの？
>>480で「widthとかheightとかの方を重視」って言っているのは
高さとかが溢れる可能性があるの？溢れた場合はどのような動作を
望んでいるわけ？

>>477が散々既定がないって言っているのは、ブラウザ毎に動作が違うって
いうこと。
統一動作させたいならcaptionは使わずdivなりhタグなり使う。

>統一動作させたいならcaptionは使わずdivなりhタグなり使う
外見のために意味を変えるのはここでは薦めんなよ

cssって見た目用でしょ。
作った人がブラウザで見た目が違ってもよくてcaptionがいいってならそれでいいじゃん。

>>486
お前全然流れ読めてないだろ・・・

1px＝1ドット
ではないんですか？

なにが？

>>488
まぁそれでいいよ
でもスレチ

CSSでも単位はあるだろ
何でスレチになるんだよカス

スレチ

ie6でのoverflow:hiddenのエラーについて教えてください。

<body>
<div style="width:100px;height:0px;padding-top:30px;overflow:hidden;background:url(/img/logo.gif) no-repeat;">
この文章は表示されません
</div>
</body>

よくあるテクニックだと思うんですが
縦30px × 横100　の画像を同サイズのブロック要素の背景として表示し、
ブロック外に押し出された文章を非表示にしたいと思っています。
上記のコードで　ie6で「この文章は表示されません」が表示されます（firefoxなら問題ない）。
なぜでしょうか？　以前同様にして問題なかったのに、今回エラーになり困っています。
ieエラー集で見てもエラーを呼ぶ条件には引っかかっていないと思ったんですが…
※他のcssファイルは一切読み込んでいません。

firefoxは3.5.11　ieは6.0　OSはwinXP-sp3です。
アドバイスよろしくお願いします。

なんでってdivの中身なんだから表示されるのは当たり前なんじゃ？

あれか、互換モードか標準モードかの話か
IE6がアレだから

>>493
それはIE6の有名なバグ
高さがフォントサイズ分取られてしまう
だからfont-size:0pxを追加で大丈夫だと思うが手元にないから確かめられんのですまん

>>495
もう神様って感じですわ。ホント助かりました！

他の人もありがとう

>>448
うちのブログもIEで広がってるわ

縦方向のmarginやpaddingは
インライン要素（というかspan）では効かないんでしょうか？

>>499
paddingはきいたと思うけどmarginはどうだったか忘れた
そのインライン要素にdisplay: inline-block;すればきくよ

FC2ブログの作成を試みている超初心者です。

カスタマイズされたスタイルシートを引っ張ってきました。
グーグルで
はじめてのFC2ブログカスタマイズ
ttp://blog.fc2.com/custom_manual/
というサイトをみつけ、CSSをカスタマイズしようと試みました。


が、自分は素人なのであまり分かりませんでした。
特に
共有テンプレートおよびカスタマイズをした公式テンプレートはサポート対象外になります。
共有テンプレートの場合は作者の方に直接お問い合わせ下さい。
と、ありましたので。

そこで、CSSのバックアップをしっかりとっておき
適当に数値を変えたりして
ざっくばらんに全体の文字の大きさや文字の色を変えていくという方法も
初心者の僕にはありでしょうか？
いかがなものでしょうか？

みんな最初はそんなもんだよ
自分のCSSなんだからお好きにどうぞ

>>502
はい！がんばります！！

<title>の色や背景色を変えるにはいったいどうしたらいいのでしょうか？

>>504
ちょっと何を言っているのかわかりません
htmlを理解してからcssに手を出すことをおすすめします

>505
ブラウザに表示されるタイトルの背景色や色を変えたいのです
htmlは理解してます
JavaScriptやJAVA等を切った状態でタイトル部分の色が変わるサイトを見た覚えがあるのでCSSしかないと思い質問しました
ブラウザはNetFront(Gecko)です

そのサイトのソースみれば？

>>506
相手側のブラウザのタイトルバーはこちら側のcssでは変更出来ないと思います

>507
友達の端末で見たので分かりません
>508
おそらく普通(IEとか?)のタイトルの表示しかたと違う表示場所、タイプだったので独自であるのかなと思いました

該当のブラウザスレに行きなさい

質問です。
２カラム表示がうまくいきません。
下記のＣＳＳで、subのコンテンツは左側に表示されるのですが、
mainのコンテンツがsubの右側でなく、subの下に表示されます。
どういう原因が考えられるのでしょうか？

#wrapper {
width: 800px;
overflow-y: auto;
margin: 15px 0px 0px 0px;
padding: 0px;
background-color: #ffffff;
}

#main {
width: 599px;
float: right;
}
#sub {
width: 200px;
float: left;
}

>>511
CSSを定義しただけで満足して
実際のタグ階層構造がちゃんとしてないから

>>511
そのcss＋以下のhtmlで試してみたところ、カラム落ちはしませんでした
<div id="wrapper">
<div id="main">main</div>
<div id="sub">sub</div>
</div>
他に原因があると思います

mainのフロート外してマージンで調節したら？

>>512,513,514

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

<dt>(1行の文字列)、<dd>(複数行の文字列)の１行目を
同じ行（左側と右側）に表示して、
両方のborder-bottomの線を同じ水平線上に引くには、
どうすれば良いのでしょうか？

>>516
dl {
border: 1px solid #000;
border-top: none;
}
dt {
float: left;
clear: left;
width: 100px;
border-top: 1px solid #000;
}
dd {
margin-left: 100px;
border-top: 1px solid #000;
}

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

例のＣＳＳでやると<dt><dl>の下線だけでなく、
上、右、左にも線が表示されるのですが、どうすれば良いのでしょうか？

例のＣＳＳって何だ

>>518
dt {
float: left;
clear: left;
width: 100px;
}
dd {
margin-left: 0;
padding-left: 100px;
border-bottom: 1px solid #000;
}

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

3つのボックスa,b,cを横に並べる場合、次のようにすると出来るのですが、
もっとスマートなやり方はないのでしょうか

<div id="a"> ※float:left
</div>
<div id="ab"> ※float:right
<div id="b"> ※float:left
</div>
<div id="c">※float:right
</div>
</div>

>>522
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
全float:left

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

今日みたいな日に昼間から表で野球やってる奴らって何なの？狂ってるの？

家のPC(デスク2台とノート1台)で、IE6〜8・Firefox・googlechromeで確認し、
まったく崩れていなかったCSSレイアウトが、会社のPCで確認したら
どのブラウザで確認しても崩れていました。

家のPCはwindowsXPが2台とwindows2000のノートで、会社のはvistaです。
OSの違いでレイアウトが崩れるというのは無いと思うのですが、何かこういった
経験のある方はいらっしゃらないでしょうか？

OSごとの違いなんて聞いたこともない
単純に解像度耐性が低いレイアウトなんじゃね
ブラウザの幅変えてみ

ヒント：メイリオ

どっちにしてもガチガチに作りすぎってこったな

早速のアドバイスありがとうございます。
未経験で採用していただき、やっているのですが、上にWebデザインが分かる人がおらず相談できない状態なため、とても嬉しいです。
幅を変えることに関しては、変わりありませんでした。メイリオに関しては、調べてみます。
作り方自体に修正が必要ですかね..

関係ない話だが
自宅のPCがXPと2Kで
会社のPCがVistaってのに
激しく違和感を覚えるオレは古い人間かな

どこで質問していいやら分からなかったのでここで。

IE6以前のブラウザは切り捨てる、というのが前提で、
フォントサイズを相対指定にするメリットを教えて下さい。

最近のブラウザは全てズーム機能が備わっているのに、
GoogleやYahooのフォントサイズは大体が相対指定。
自分で色々考えてみたものの、相対指定にするメリットが浮かばなかったので教えて下さい。

ZOOM→画像とかも拡大されてしまう・横幅指定されていた場合横スクロールバーが出る
目がいい人にはどっちでも変わらないと思うのかな。

ズーム機能は下手するとブラウザハングアップだろ
使う人のほうが少ないと思うぞ
それだったらOSの拡大鏡機能を使ったほうがマシ

>>532
自分で答え言ってないか？「最近のブラウザは」

私たちが日々排泄している便が、どんな薬にも勝る万能薬であることをご存じでしょうか？
便は食べ物の残りかす、汚い、臭い、薬なんてありえない…そう思うかもしれません。
しかし便は、整腸のために排泄されるだけで本来は貴重な物質なのです。

>>532
ズーム機能が存在することすら知らない人も多いんだぜ？
あと、全体引き延ばすと色々見づらいだろ実際。
自分でやってみて見やすいと思うなら仕方ないが。

ズームのが普通に見やすいだろ

それはない

下記のコーディングで、「メニュー１」、「メニュー２」(#solution a)の
margin-topが0で表示されます。margin-leftの11pxの余白は空きます。
「メニュー１」、「メニュー２」を<a>でなく<p class=x>にして、
class=xのmarginを、下記の#solution aと同じにしていすると
margin-top(129px)に余白が空きます。

<a>でmargin-top(129px)に余白を空けるにはどうすれば良いのでしょうか？


≪HTML≫
<div id="solution"><img src="./images/title01.jpg" />
<div id="sec01"><a href="/service1.html">メニュー１</a><p class="bizdsc">説明１<br>説明１のつづき</p></div>
<div id="sec02"><a href="/service2.html">メニュー２</a><p class="bizdsc">説明２<br>説明２のつづき</p></div>

≪CSS≫
#solution img { margin:0px 10px 7px 0px;}
#sec01 {width:182px;height:320px;
float:left;clear:left;
background-image:url(./images/servicebuck1.jpg);
background-repeat:norepeat;}
#sec02 {width:182px;height:320px;
float:right;
background-image:url(./images/servicebuck2.jpg);
background-repeat:norepeat;}
#solution a{margin: 129px 15px 9px 11px;
width:146px;padding-left:10px;
border-left-style:solid;border-color:#065da3;
border-width:3px;color:#064696;
font-size:120%; font-weight:bold;}

aをpで包めばいいじゃないか。

>>540
#sec01,#sec02にpadding-top: 129px;じゃだめなの？
だめなら、aにdisplay: inline-block;

<div id="navigation">
<ul>
<li>Home</li>
<li>Sitemap</li>
<li>Download</li>
<li>Contact</li>
</ul>
</div>

ul li で作ったナビゲーションメニューをfloat:left;で横並びにしたあと
これをセンタリングする方法というのを知りたいのですがどうやればいいでしょうか

ulをセンタリング

>>544
その方法ではできませんでした。

その外側のdivがwidthが指定されているなら
margin-left & rightをauto

>>546
親であるdivをwidthで%指定してあげて>>546さんの奴を試したら出来ました！
ありがとうございます！

でも幅の調整面倒なのが・・orz

>>545
できるよ
お前が何か勘違いしてるか失敗してるかだろ

だったらそれを具体的にタグなりCSSなりで示せばいいだろ
センタリングする方法は？と訊かれて「ulをセンタリング」って、何の答えにもなってねーだろ
よくいるけどさ、結局最後まで明示しない奴
答える気がないんだったら、ここに居なくていい

>>547
そうだね
ブラウザ側での文字サイズ変更とかもあるし、幅を確定するのが難しければ
あとはあんまり勧めたくないけど、tableかな
tableにmargin: autoか、または
tableにwidth: 100%を指定してtdのalign属性でcenterにするか
いま思いつくのはこれくらいしかない

あーごめん、思いついた
ulにtext-align: centerでどうかな
役立たずの>>548を待たないで済んだかな

って、liにfloat: leftしてるからダメだったんだっけ
スマン

武士は黙ってテーブルだ！　と俺は最初っから決めているぞ。

んにゃ !

男は黙ってちゃぶ台だー (ノ#｀□´)ノｵﾘｬｰ!!!⌒┻━┻

>>549-551
こいつが知識不足の馬鹿だということはわかった

出た！！
「お前が知っているということを証明するために書いてみせろ」と言われているのに
それを理解できず勘違いしているのか
はたまた分かってはいるんだけど、元々なんの知識も持っていなかったからか
それとも最初は本気で分かっているつもりだったが、途中で間違いだと気付いたか
どれだか知らんが、ともかく自分の言動が原因で後に引けなくなって
肝心の部分については、決して答えようとせずに
ひたすらしょーもない暴言に終止するしかなくなってしまった
可哀想な奴が、このスレにも！！

>>556
人を馬鹿にするのもいい加減にしたらどうだ。
ささいな文章のミスをいつまでもいつまでも、気がつけばもう半年近くもかけて
延々と馬鹿にしつづけているだけ。
そのくせ自分の都合の悪いことを指摘されると他人に成り代わって白を通す。
結局悪口を大勢で言い合って寂しい気分を慰めているだけだ。
何ひとつ自分の考えを自分の言葉で表明できないのに人を馬鹿にしていいはずがない。
そうやって素直に感動をできる心をもった投稿者たちを見下し、ひどい言葉で罵り、
嘘や中傷や作り上げた根拠も無い嘘でその評判を傷つけ、子供たちに指針さえ示せない
大人ばかりがここにはいる！
繰り返すが全員が罪人ではないし、たぶん何人か私の文章を監視しているチームのような
存在が連絡をとりあって（携帯やメールで連絡などすぐ取れる。同じＩＤ番号の者を他の
スッレドでも見た）私が投稿する度に攻撃を開始していることが分ったけれど、
こうした若者が増えていること自体、本当に日本の未来が心配な気がする。
いい加減疲れたので今度こそ本当に投稿は止めるが、自分の人生が正しいのかどうかを、
荒待てて振り返る必要があなたたちにはありますよ、ということだけは断言しておきたい。

>>550
まず何を質問されてるのか理解してから回答したほうがいいよ

一人の馬鹿のせいで一番可哀相なのは質問者だな
まあ質問者も若干アレだったから答える気になれないが
ググれば幾つもやり方が出てくるよとは言っておく

>>541,542
レスありがとうございます。

>>558-559
>>556

>>561
text-align:center; がどうのって、もしかしてIE5以前のバグの話？

>543
今更の話になるけど
こんな感じのも一つの手なのかな。

http://hail2u.net/blog/webdesign/centering-floated-list.html

そういや俺も最近よそで見たな
最後まで答えを言わず、ひたすらバカを連呼してたやつ
同一人物だったりしてｗ

なんでそんなに必死なの

必死で打ち込めるものがある人って、ある意味うらやましいよ

他スレでまで馬鹿にされた憂さ晴らししてたよそいつ

おーい、そろそろスレタイと>>1読めよおまいら。

ドラッグしてサイズを変えられるボックスって作れますか？

javascriptでやれ

行ボックスの中に３行のテキストがある場合、
１行目の上のリーディングと３行目の下のリーディングを0にする方法が
あれば教えて下さい。
ただし、１行目と２行目、２行目と３行目の間のリーディングは0では
ありません。
（border-leftの線の上端と下端を、
　１行目のテキストの上辺と３行目のテキストの下辺の位置に
　合わせたいのですが）

リーディングという言葉が何か自分と違うもののような気がするが
要するにborderを0にしてline-heightを開けりゃいいだけだろ

行ボックスの中に３行のテキストがある？

textarea rows="3"ってことだろ

それは違うと思うの

俺もそれ以外にないと思うけど
お前はどう思ってるんだ？

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

質問の補足をさせて頂きます。

ボックスの幅以上の文字数があると、複数行になります。
ここでは３行になった場合で質問しています。
文字のフォントサイズをaとして、line-heightをbとすると
(b-a)/2の隙間が、１行の文字の上と下ができると思っています。
１行目の上と３行目の下の隙間の(b-a)/2を0にできないかという質問です。
(1行目と２行目、２行目と３行目の隙間（行間）は、0でない条件で)

よろしくお願いします。

無理

行ボックスってのはテキストエリアを指す言葉じゃない

それはそうだが言いたいことがわかりゃそれでいいんじゃね

つーかどっちにしろ無理

無駄無駄無駄無駄ァ

ていうか何をやりたいんだかがわからん
いやわかるんだけどそれやって何をしたいんだという

ぐぐったら回答あったよ
てかテキストボックスの上下左右をきちきちに詰めるのって結構つかわね？

くっついてたら使いにくいよ
ていうか結局テキストエリアだったん？

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

・・・駄目だこの質問者

>>587
はぁ？
俺さまは黎明期の88からポケコンまで使ってるよ。
インターネットすらないパソコン通信の時代からなw
全てを見てきてるからクダラン事に口出ししないし遊んでも
深入りしないで距離保ってるんだよ。
お子ちゃまや40代でようやくPCデビューしたオクレちゃんには
理解できないだろうがね。
もちっと推敲こらしてからカキコしろや。バーカ。神様

駄目だこの質問者

なんだこの流れは

textareaじゃなく普通のブロック内の話ならば
よのように見せることは可能だが
もう興味なさそうだから、この話はおしまいでいいだろ

>>591
>>584

黎明期からいじってて初心者スレッドって。

質問です。

<dt>１項目ａ</dt>の「１」の部分だけを
背景色を黒、字の色を白にして、”背景部分の幅を広げたい"と思っています。

<dt><span>１</span>項目ａ</dt>にして、<span>の色等を指定すると
色は変わりますが、幅(左右のpadding)は広がりません。

どうすれば、「１」の背景部分の幅を変えられるのでしょうか？

ソースは？

質問があります

h1:before {
content: url(ima/ほげほげ.gif);
}

この場合、Firefox Operaは問題ないのですが
IE8の場合、
VistaのIE8では表示されますが
XPでのIE8では表示されません

アドバイスお願いします

あぼーん

>>596
別にそんなことはない

>>596
XPでファイルの場所かファイル名、拡張子とか何かが間違っている

positionを多用した携帯用のページを作っていたのですが
友のPC(Win7)で見るとIEではぐちゃぐちゃで、FFもだいぶおかしい感じでした
それから標準モードにさせたりいろいろするとFFの方はほぼ大丈夫になったのですがIEでは変な(positionが一部効かない?)みたいです
もうお手上げなのですがどうしたらいいでしょうか？

また、PCより携帯の方が書いた通りに仕様に忠実に表示してくれり気がするのですがどうしてでしょうか？

http://indexroom-id.hp.infoseek.co.jp/test/JSpiku.html

そこを開いてソース見て答えろと・・・？

JavaScriptを使って指定している部分もあるのでちょっと書きようがないです…

これまでの御経験からのカンでも構いません
アドバイスをください

期待通りの表示になるように1から書き直したほうが早いよ。仕様ってcHTMLの？

>603
家にPCがないためちょっと難しいです
仕様というのはCSSのことです
一応バージョン2.0、2.1を意識して携帯ｉモードブラウザ2.0、SoftBankブラウザで正常に表示されるようにいつも作っていますが
IEだけは１発で思った通りに表示できたことがありません
半分は標準、互換の問題で解決しますが残りの半分は謎です

>>604
positionの位置が指定されていない。
もしかして今widthとかheightになってるのがそれ？
だとしたら俺の知ってる方法とずいぶん違うような気がする。

昨日初めてfc2でサイト作ってみたんだがcssってindex以外にも適用されるの？
させたく無い場合はどうしたらいいんだ？
恥ずかしい質問ですまん。

>605
JavaScriptで指定してます

>>606
させたくないhtmlに記述しなきゃいいだけ・・・

>>604
CSS以前にHTMLが滅茶苦茶だぞ。いくらCSSを文法ミスなく記述したとしてもこれじゃ

>609
どのへんがだめでしょうか？
今まで誰にも言われたことないのでわかりません…

どの辺も何も全体的にどうしようもないな
html-lintにかけてみれば書き直したほうが早いって実感できるんじゃね

>611
難しいです………PCが無いので………
本当に全部がダメなんでしょうか？
スレチかもしれませんがお願いします

PC買って来い !

>>600のサイトはなんなん？サパーリわからん。

クロームとサファリで見たら一瞬ブラクラかと思ったぞ

おれLinux Fx3.5.8
600のサイト全く見れない

>614
ピ■ミンのようなアクションゲームです(なぜかPCでは満足に操作できません)

>615
すみません
可能な限りたくさん処理をさせてリッチに見せるようにしているので

>>598-599
トン　ｽﾏｿ
互換表示にしてましたorz

>>608
そうゆうもんなのか。
まだcssとhtmlを理解してないからスゲー不思議。
勉強します。

>>595

レスありがとうございます。
ソースは次の通りです。
よろしくお願いします。

<div id="xyz">
<dl><dt><span>１</span>項目ａ</dt><dd>説明ａ</dd></dl>
</div>

#xyz dt span {
padding;0px 10px;
background-color:#000000;
color:#ffffff;
}

paddingのあとがセミコロンだから

ttp://indexroom-id.hp.infoseek.co.jp/test/JSpiku.html
このサイトをW3Cのバリデータに入れたら164個エラーがでた
サイト自体は閲覧するのが怖いので見てない

>>620
つーかそんなhtmlにしないでfirst-letter疑似要素を調べてこい

>622
scriptを除くと要素数はかなり少ないのに何故そんなに出るのでしょうか？
そんなに特殊でおかしいことをしてるつもりは無いですしわかりません…
おそらくそのうち100以上は自動挿入されるの広告なのだとは思いますが

スレチ

>>624
お前のところに広告が多いとかどうしてわかるんだよｗｗｗ
ID出してないからなりすましだと思うけどさ

・・・ん？
もしかしてエラーが多すぎて広告すら表示されてないというオチ？

>627
scriptがゲームのために最表示するので広告は表示されません
W3Cのバリデータという所でチェックしてみたのですが

ほとんど誤チェックのようで、centerを使うなみたいなエラー以外は見当たらず、
styleタグに属性を指定した方がいいみたいと出ましたが
positionが効かないのはstyleタグではなくstyle要素に指定しているところなので
結局よくわかりませんでした

HTMLって難しいですね…

皆さんはどのように
例えばstyleがブラウザによって効かない等の
バグのないものを書いていられるのでしょうか？

自分は作ったら何かしらそういう不具合が起きるのは普通で、
いろんなブラウザで確認しながらバグを潰していくしかないと思うのですが
そもそもやはり私がちゃんと書けていないから起きることなのでしょうか？

また、やっぱり規則通りに書いても思い通りにならないときは、例え無茶苦茶に規則を破っても、とりあえず動くのを作るのは大事だと思いますか？

最後にデフォルトで一番規則通りに動き(規則の上の拡張は可)、期待通りに動くブラウザは何なのでしょうか？
Google Chromeとかでしょうか？
それともIEが実質本当の規則なのでしょうか？

ケータイは対応している機能を使ってる限りまずおかしなことになることはないのですが、PCはそうではないので不思議で仕方がありません

バグじゃなくてお前の書き方が間違ってるだけだろ
バグも当然あるだろうが、それを疑うのは最後の段階だ
まず自分が正しいソースを書かなきゃ話になんねーよ

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

あぼーん

>>631
>>623

>630
ありがとうございます

いろいろ調べてみましたが、やはり正しく書けています
他の人のIEで試してもらったところ、正常に表示されるIEもあるようなので
微妙にズレたりするのはそのIEの問題だということで解決しました

おそらくブラウザをカスタマイズしてる(何か入れてる?)IEは再表示の際にそれらが表示される影響でposition:fixed;の値がズレるのだと思われます

お騒がせしました

駄目だこの質問者

ここの回答者のIEが全部悪いとなｗｗｗ
駄目だこの質問者

なんだこの流れは

どうなったら「普通」なのかわからんが
俺のは一応それっぽく表示できてるからそうなんじゃない

IEは個体差が大きいのだろうか

ieは1〜9あるもんな

もう許してやれよ

　　　　　　　　 ,.
　　　　　 　　 /ﾉ
　 　 (＼;''~⌒ヾ,
　　　 ~'ﾐ　 ・　ｪ)　ヤギだよ
　　　　 .,ゝ　 i" 　　自動でみんなを癒してくれるすごいやつだよ　　
　ヘ'""~　　　ﾐ
　　,)　ﾉ,,_,　,;'ヽ)
　　し'し'　l,ﾉ

http://journal.mycom.co.jp/news/2010/08/24/040/index.html

未だにIE6常用してる人なんておるの？
XP/IE7ならまだわかるけど。

ところでIE7.js使ってる人いる？

つい最近見た個人サイトアンケート@2chだと
まだ多いところだとIE6率60%以上
少ないところだと5%切ってたからばらつきがある

企業、役所は大半がIE6だよ。
アクセスログでもそう出ている。

>>646
なぜIE6に拘るのか。OSのバージョンが古いだけであげれないのか
それとも好きでIE6を常用してるのか。・・・わからん。

IE6ハックとか使ってIE6に考慮させるのってこれからもずっとやり続け無ければいけないんだろうか。

企業のサイト作るときコレが一番めんどくさい。

CSSだけ振り分ければいいじゃないか

2000のサポート終わったし、IE6はさすがに切るべきじゃないか
いつまでも減らん

10年ぶりにサイトを作ろうと思ったら…CSS！？
当時HTML手打ち（独学なので知識は超浅い）

新たに頑張りたいのでよろしくお願いします。

俺も同じくしてHTMLの知識しかなかった輩だが、7月の上旬からCSSを学び始めて
↓のサイトくらいは作れるようになった。まだ途中だけども。
http://sacft.netgamers.jp/

HTMLしか知識なかった頃はTableタグすらもコピペでやってたなぁ。今じゃ全て手打ちでできる。
だから>>650も一緒に頑張ろうぜ！

>>649
まだウチの方じゃ20%以上居るから切るに切れん。
それでもある程度の不具合は無視するようになってきてるが。

>>647
・「古いブラウザならセキュリティ上安心！」という都市伝説を信じてる
・「そんなトコに予算回さなくても前の使えばいいじゃん」という大人の都合
・「IEってどれ？ブラウザって何？アップデート？」という無知による放置
だいたいはこの三つが主な原因

>>650
・ごく簡単なHTMLの説明
　　http://www.kanzaki.com/docs/htminfo
・PC Tips
　　http://members.jcom.home.ne.jp/pctips/
・脱初心者をめざす人のためのホームページ作成講座
　　http://az-store.nrym.org/archive/mynotes/lecture/

Web制作初心者スレから

>>651
宣伝すんな

>>649
うちのサイトでもまだ1割ちょいIE6だけど、その9割ほどはXPだな。

IE8が優先度の高い更新に入ってるから
2000 + 「サポート期限って何？」って人ばっかだと思ってたが、XP + IE6そんなに多いのか

企業のPCは簡単に更新できないらしいぞ
いろんな理由で
うちの会社も長いこと2kで、最近やっとXPになった

会社から趣味サイトにアクセスして来るん？

ここに来てる人が作っているサイトが趣味のサイトばかりとは限るまい
それに趣味のサイトがプログラミング関係だったりすると
仕事中でも普通にアクセスが多い

ブラウザを最新の状態にしないで穴を突かれて被害に遭っても、被害者気取りできるの？

XP SP3やIE6みたいにサポートされてるなら出来るんじゃね

古いブラウザ利用でそういう事態に陥ることはあまりない
そして少なくともMSがサポートを続ける限りは被害者気取りできる

あるサイトを作っているのですが、これにはstyle部分とbody部分とがあります。
例えばこの質問内容の一番下に書いたような感じです（単純化すれば）。

今までは普通のフレームを使っていたのですが、擬似フレームを利用しようと考えています。
そうする場合、例えば以下のようなものが既存のウェブサイトだとすると、
どのように擬似フレームのスタイルシートを組み込めばいいのでしょうか。

例えば
http://daikin.ddo.jp/sonota/non_frame/frame5.htm
このような擬似フレームです。
もっといえば、【既存のウェブ】をメインにおき、左右に擬似フレーム、
ヘッダー部分に擬似フレーム、というふうにしたいのですが。
とりあえず、どのようにくみこめばいいのか教えてください。

テーブルとセルのボーダーの色の指定方法を教えて下さい。
下記ののような４行２列のテーブルとセルのボーダー(1px)に
２色（「*」と「#」）の色をつけたいのですが。

*******************
*<セル11>#<セル12>*
*#################*
*<セル21>#<セル22>*
*******************
*<セル31>#<セル32>*
*******************
*<セル41>#<セル42>*
*******************

【既存のウェブ↓】
<style type="text/css">
<!--
td.r1c1{ height:14.25pt; width:54pt;
font-family:"ＭＳ Ｐゴシック"; font-size:11pt; color:#000000;
background-color:#FFFF00;
vertical-align:middle; text-align:left; padding: 0px 2px 0px 2px;
border-left:2px solid #000000; border-top:2px solid #000000;
border-bottom:2px solid #000000; border-right:2px solid #000000;}
td.r2c1{ height:13.5pt; width:54pt;
font-family:"ＭＳ Ｐゴシック"; font-size:11pt; color:#000000;
background-color:#00FFFF;
vertical-align:middle; text-align:left; padding: 0px 2px 0px 2px;
border-left:1px solid #000000;
border-bottom:1px solid #000000; border-right:1px solid #000000;}
a:link { color:#0000CC;}
a:visited { color:#000080;}
a:active { color:#FF0000;}
-->
</style>

<body>
<table style="border-collapse: collapse;" cols="1" width="72">
<tr>
<td class="r1c1">テスト</td>
</tr>
<tr>
<td class="r2c1">テスト</td>
</tr>
</table>
</body>

>>662
インクルードしたいんならCSSの技術じゃない
初心者スレ行け

>>663
tr、td、tableに好きなようにborder設定しれ

>>662
そのURLのソース見て真似すればいんでない？

>>666

このURLに

自分の現在のサイトのhtmlデータ（スタイルシートあり）を組み込んだんですが、
現在のスタイルシートとこのURLのスタイルシートとがぶつかりあって駄目なんです。。。。

>>667
　　　　　
|￣￣￣￣|
|￣ |￣|￣.|
.￣￣￣￣
こんなふうにして、下部中央に>>664ってことだよね？
試しにやってみたけど普通に出来たよ
どこがどうなってるのか分からないから、その自分で組み込んだ後のソースを教えてほしい

>>662
「擬似フレーム」という言葉が、どういう仕組みを指して使ってるのかわからない
HTMLファイルの読み込みか？
画面の分割だったら、「CSS 段組」でググレ

>>667
だったら自分とこのCSSはずせよ

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

セル毎にborderを設定したら
右上隅と左下隅のセルの色が左上が*、右下が#になります。

**********/#
* <セル11> #
*/##########

これを下記のようにするには、どうすれば良いのでしょうか？

************
* <セル11> #
*###########

よろしくお願いします。

インプットのボタンが大きいのでinputのフォントを
小さく指定すると、今度はtype=textのところが小さくなりすぎちゃいます。

自動で分ける方法ないですか？

普通にクラス指定するかbutton要素使えば

>>671
何を言ってるんだか全然わからん
ソースとやりたい絵を出せ

>>672
http://hp.vector.co.jp/authors/VA022006/css/selector.html#attribute-selectors
属性セレクタで値まで指定しれ

属性セレクタCSS3と思ってたすみません

<body background=./back/sea.gif>
で、海の背景をセットしています

background-image: url("iruka.gif");
background-repeat: repeat;
background-position: right bottom;
で、右下にイルカの画像を追加しようと思っていますが
この記述をCSSにして表示しようとすると
海の背景が消えてイルカだけになります

海の背景のまま、イルカは右下に
スクロールしてもイルカはずっと一緒に付いて来るようにするのは不可能でしょうか？

p.iruka {

background: url(iruka.gif);
width: 画像の横幅;
height: 画像の縦サイズ;
position: fixed;
botom: 0;
right: 0;

}

これでいけるんじゃない？

>>677
訂正 botom: 0;　→ bottom: 0;

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

|　何について調べますか？
| ┌────────────┐
|　|　お前を消す方法　　　　　　　｜
|　| 　　　　　　　　　　　　　 　　　　｜
| └────────────┘
|　[ オプション(O) ]　　　[ 検索(S) ]
|
｀──────────┐ ┌───
　　　　　　　　　　　, '´l,　　..| ./
　　　　　　　, -─-'- 、i_　　|/
　　　 ＿_, '´　　　　　　　ヽ、
　　　',ー--　●　　　　　　　ヽ、
　　　 ｀"'ゝ、_　　　　　　　　　 ',
　　　　　　〈｀'ｰ;＝=ヽ、〈ｰ- 、 !
　　　　　　 ｀ｰ´　　　　ヽi｀ヽ iﾉ
　　　　　　　　　　　　　　　 ! /
　　　　　　　　　　　　　　r'´、ヽ
　　　　　　　　　　　　　　｀´ヽノ

>>674
今ひとつうまく動作しないです、再チャレンジ中
input　[type=submit] {
font-size: 75%;
}

>>673
buttonはどちらにしてもWinのIEで不安定なんでだめです

空白って空けていいんだっけ？
あと、=のあとは"でくくった気がする。
input[type="submit"]

css組んだ
W3C通したら
全く問題なかった　css2.1だった

お前らも当然問題ないcss組んでるよな！？w
ここでえらそうにレスしてるやつのHPは
たいてい糞みたいなcssで、デザインは特に酷く池沼レベル

おまいもえらそうだね

まずお前のHPのデザイン晒してからだな。

人のセンスにケチつける奴って一番ウザイよね。
特に>>683

>>681
IE6なら未対応
てかIEでbuttonが不安定なんてことはない

>>525
真っ白な細い腕の男は生理的に無理

>>674
レスありがとうございます。
セルの上と左を「灰色」、右と下を「白色」に指定すると
右上隅の角の部分が対角線の左上が「灰色」(*)、右下が「白色」(?)になります。
********
*******?
******??
*****???
....????
....????

これを次のようにしたいのですが。
********
********
********
....????
....????

今のソースは下記の通りです。
table { border:solid 1px #c6c6c6;
cellspacing:0px; border-collapse:collapse; }
.t1_th1 {background-color:#c7e2f6;
border-left:solid 1px #c6c6c6;　border-bottom:solid 1px #ffffff;
border-right:solid 1px #ffffff; }

*{　}でfont-sizeなどのブラウザの設定を
リセットしつつ、再設定しました。

*{
font-weight:normal;
font-size:98%;
line-height:130%;
text-decoration:normal;
border:none;
letter-spacing:normal;
}
すると、テーブルの中とかのフォントの
サイズが変わりません。
そこで 必要な箇所にtable.name で指定しています。

しかし、テーブルの外や中でフォントの変更が
無効となっていて、非常に面倒です。
何がいけないのでしょうか？

>>671
これでええんか？

<style type="text/css">
table {
border-collapse:collapse;
border-spacing:0;
}
table { border:solid 1px #f00; border-bottom:none; }
table th,
table td { border-bottom:solid 1px #0f0; }
table col.hoge { border-left:solid 1px #000; }
table thead th { border-bottom:solid 1px #f0f; }
</style>


<table>
<col>
<col class="hoge">
<thead>
<tr><th>cell11</th><th>cell12</th></tr>
</thead>
<tbody>
<tr><td>cell21</td><td>cell22</td></tr>
<tr><td>cell31</td><td>cell32</td></tr>
<tr><td>cell41</td><td>cell42</td></tr>
</tbody>
</table>

>>689
・・・・・（益々何が言いたいのかわからなくなった）

>>690
全称でフォントサイズを％指定すると
タグが出てくるたびに、その親要素に対して％が重ねがけされる
その例では、<body><table><tr><td>となるから、98%×98%×98%×98%となってしまう
全称で％指定するのは個人的に非推奨

<h1>
<h2><a>sss</a></h2>
</h1>
<h3>
<h4></h4>
</h3>

という構造で、<a>にhoverした際に<h4>の背景色を変更するにはどうしたらいいでしょうか？

>>694
JavaScriptで

>>695
cssだけでどうにかならないでしょうか。
<div>であろうがどんなタグを使っても無理でしょうか。

つーかタグの使い方おかしすぎるぞ

これはひどいｗｗ
h4よりaのが前かつ上に存在すれば出来る、
a:hover + * + h4
みたいな。

前かつ上って何が言いたいんだ
aの中にhnを入れていいと誤解されそうだが

あーうん。言い方がすごい悪かった。
<a></a>
<div></div>
<h4></h4>
（並列関係）
とか
<a></a>
<div>
　<h4></h4>
</div>
（並列の要素の子要素）
ならOK（デザイン・文法的にはいまいちかもしれないけど。）
<div>
　<a></a>
</div>
<div>
　<h4></h4>
</div>これはNG.並列っぽいけど違う。

文字があるときに比べて、<br><br>の間みたいな、
空白行の高さが1.5倍くらいになります。
どう指定して変えたらいい？

日本語でおｋ

br { line-height:5; }
今やったらできた。

サンクス、:１ でOKでした

margin使えカス

いや、使うなら段落だろ。

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

上の枠線(灰色)と右の枠線（白色）が交わる右上隅の色を
灰色にしたいということです。
記述したソースでは、「右上隅」の色は、
右上から左下への対角線の下側が白色、上側が灰色になっています。

まだやってんのか
さっぱり伝わらないから画像でも作ってうｐしなよ

>>707
borderプロパティでやろうとするのを諦めて
<div>とかの配置で枠線状に見えるようにしたらよいです

>>709
消えろ

>>707
右上角1px分を完全に灰色にすることは、右の線を2pxにするか画像使うかしないと不可能だと思う
<style type="text/css">
table {
cellspacing: 0;
border-collapse: collapse;
}
.t1_th1 {
border-top: 1px solid silver;
border-bottom: 1px solid black;
border-left: 1px solid silver;
background: url(0.gif) repeat-y right top #c7e2f6; /* 0.gif = 1*1の黒 */
}
</style>
<table class="t1_th1" summary="sample">
<tr><td>TABLE SAMPLE</td></tr>
</table>

したらば掲示板の左右の空きスペースにCSSフレーム（hight:100%　width:20px）をつくりたいんですが、

できません。どたなかサンプル下さい。

divやpで枠を作って幅を制限しているのですが、長い文字列を入れると飛び出てしまいます。
firebugで確認すると枠が広がっているのではなく、文字列が飛び出ているだけなのですが、枠内におさめるにはどうしたらいいでしょうか？

>>713
word-break:break-all

それ先行実装

被リンクサービスはこれらの業者を掛け持ちするのがベスト！
http://hibari.2ch.net/test/read.cgi/affiliate/1261126390/565

>>713
overflow:auto

「枠内におさめる」って具体的にどういう状態にしたいの

たぶんスクリプトでやること

こんなのがあって、メメタァとゴゴゴの左側の表示開始位置をあわせたいんですが
bbがmargin-left:2emとか設定してある場合に
aaをいじって、メメタァだけ右にずらす事ってできますか？

<div class='aa'>
メメタァ
<div class='bb'>ゴゴゴ</div>
メメタァ
</div>

aaをmargin-left:2em
bbをmargin-left:-2em
じゃだめかな？

hover でマウス反応を指定すると、gifとかも反応して
ファイルによっては見苦しくなってしまいます。
どうしたらいい？

>>721
試してみました。
ChromeさんとFirefoxさんはうまく行きましたが
OperaさんとIEさんからはゲロ以下のにおいがプンプンしてしまいました。

>>722
頭を使って素材をつくり直す

頭を使う答えはいりません
身体を使った答えを教えてください

とりあえず、htmlとか入れたファイルうｐしてもらわないとなんとも言えん

>>720
aaだけというなら多分無理
>>721のようにbbをいじっていいならbbのマージンを消せ

タイトルの横に検索ボックスを設置したいと思って
id=searchを作り
#title{float:left;width:50%;}
#search{float:left}
<div id=title>タイトル</div><div id="search">ボックスのコード</div>

これで一応出来たんですが
検索ボックスを右端から20pxの位置に配置、といった事は
出来るのでしょうか

>>728
formは内にブロック要素を持つから
<div id="search"><form><p><input /></p></form></div>
こんな感じにして
#search{float:left;width:50%; text-align:right;}
form{margin-right:20px;}
p{display:inline;}

おお、でけた！
inline要素にすればtext-alignがきくってことですかね
>>729ありがとうございます

photoshopのデザインをベースにコーディングしていますが、
photoshopで表示される文字のpt数をそのまま、font-sizeに指定すると
文字が大きくなります（対画像比で）。
photoshopのpt数の75%のpt数をfont-sizeに指定すると、
見た目同じ大きさになります。
これは、どうしてでしょうか？どこかの指定が間違っているのでしょうか？

ちなみに、画像はデザインをスライスしたものです。

>>731
CSS関係なく、ptだとか解像度だとかの初歩を勉強してきてください
板違いです

>>731
念のため聞くが解像度は？

cssでのレイアウトって慣れるとサクサク作れるようになるの？
新規のページと日に10ページとか20ページとか
時間ばかり掛かって、ただただ苦痛な作業なんだけど

>>734
新規のページを　だった

>>734
そういう人もいるかも知れないし
そうでない人もいないとも限らない

>>734
人によって「サクサク」と思う速度が違うから何とも言えないわな

>>734
新規のページを10も20も装飾する手間を省くのがCSSだ
外部CSSを読み込むようにすればHTMLファイルに付き装飾が全部CSS1つで済むんだぞ
何か根本的に考え違いしてないか

>>738
そんなことは知ってるよ
めんどくさいやつだな

面倒臭いのはお前の頭だ
単に馬鹿とも言う

>>739
それ知ってるなら日に10ページも20ページも
素HTMLファイルと装飾付きHTMLファイルを作る手間
どっちがかかるか簡単にわかるじゃん

Webクリエイターでもやってるんじゃね？

>>734
「新規の」ってのがまったく固有のデザインって事ならあまり時間短縮はできないかもな。
それでもテーブルレイアウトでやるよりは多少早い希ガス。
ただし表示確認と調整に時間かかってしまうが。
同一レイアウトの情報だけが変わるんなら、CSSでデザイン部分は省略できる。
更に省略したけりゃphpとかでテンプレ作って自動的にはき出すようにすればいい。

えっと質問宜しいでしょうか？●タッチでタグを使用しようとしたら使用出来ずCSSで記入したら書き方が悪いのかそのまま書いた文が表示されるのですが一部の文字サイズ、色の変え方を御暇でしたら教えて下さい。

●タッチってなんぞ

客が対策しているキーワードを公開しても良いのか？
http://okwave.jp/qa/q6167666.html

SEO対策の業者必見の論点です。

>>744
●タッチが何かしらんが明らかにスレチだろ
ソフトか何かの使い方聞きたいならそれ専用のスレ行けよ

メイリオ対応は大変だな……

メイリオ基準に作ってる
ていうかメイリオかわいいよメイリオ見やすいよメイリオ

本でdreamweaverでＣＳＳレイアウトを学んでます。

新規ＣＳＳルールを作る際

#wrapper #header ul
を
#header ul

にしなさい。っと良く出てくるのですが
（#wrapper　とはbodyタグ全体を囲むＤＩＶ領域）

#wrapper #header ul
でも同じですよね？なんで消すのか、消す意味があるのか？が分かりません。

教えていただけると助かります。よろしくお願いします。

IDは一意だから親つけてもデータ量が増えるだけだから

＞751様
レスありがとうございます！
なるほど、必要がないのに、書いてもデータ量の無駄だったからなのですね

もう一つ気になるのが
#header li
を
#header ul li
に書き換えろ　っという場面があったのですが

liに関しては、ulもないとＣＳＳが稼動しないのでしょうか？

>>752
前者でやって動かなければ後者にすればいいだけの話です。

>>752
#header ol liの場合もあるじゃないか

なんでID使おうとするんだろ
classじゃ嫌な理由でもあるのか

アンカーに使うから

>>755
IDとclassはそもそも使う場面が違う
それをCSSに利用するときはたまたまIDだったりclassだってりするだけで
CSSのためにclassにしたりIDにしたりするわけではない

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

解像度って何の解像度でしょうか？
ディスプレーでしたら1440x900です。

ただし、「見た目」というのは、表現上のあやで、
画像のピクセル数は、photoshopの画像と
html、cssで参照している画像は同じで、
その画像対比での大きさが違う理由を質問しています。

よろしくお願いします。

>>758
だから板違い
CG板に行け

>>758
http://www.geocities.jp/gakaibon/tips/others/pt2px.html
そして二度と現れるな

そこまで言うこと無かろう
住人の程度がしれるな

1度違う場所で聞けと言ったのにまた同じ質問をしてるからだろ・・・

>>733への返信だろう。

>>760
答えになってないだろう。分からなければ黙ってろ!

ptとpxとdpiの関係がわかってない>>763は黙ってろ！

みんな黙ってろ！

ザラキつかうな

2ちゃんねるまとめサイトのような記事の上にRSSを表示するには
どうすればいいでしょうか？教えてください

すれち

>>767
インクルード

>>760~765の流れ大好きwww

3カラムレイアウトで中央カラムのみ固定幅にする方法はありますか？
ご教示おねがいします。

あります
調べろ

コンテンツ部分を固定するのか？
逆じゃね？
コンテンツは自由に広がって、両サイドのカラムは固定

その場合bodyにたいし
例えばwrapperには100％としておき
両サイドのもpixで指定をする

どうしても逆が希望なら
その逆をするだけ

お返事有難うございます。
頑張ります！　　　

SEO対策無双ってすごいよな！
http://twitter.com/creditcardmiu/status/24272923242

クレジットカードの関連キーワードでサイトを量産して、
被リンク対策はすべてSEO対策無双に任せるというやり方が効率がいいのではないかと思ったよ。

こんばんは。よろしくお願いします。
selectboxの文字の表示位置について質問です。

selectboxの大きさを変更して文字を見やすくしようと、
optionで選択した文字のselectへ表示される位置を上下中央に変更しようとしています。
vertical-align: middle;　で設定できるかと思っていたのですが、
どうしても表示位置が左上になります。
optionのスタイルについても調べたのですが色変更ぐらいしか出てこなく困っております。
ブラウザはFirefoxで確認しています。
よろしくお願いします。

<select id="options" name="options" class="combo">
<option></option>
<option>表示</option>
</select>

.combo {
width: 90%;
height:40px;/*optionより大きくする*/
font-size: 10pt;
vertical-align: middle;/*中心に表示したい*/
}
.combo option{
height:20px;
font-size: 10pt;
}

そこらへんはOSの表示とも絡んでくる部分で
ブラウザによっては変更がとても難しいし規定もしっかりしてない
やりたいことがいまいちよくわからんが、どうしてもできないことがあるということは念頭に置いておけ

Konqueror で、opacity も -khtml-opacity も効かないのですがどのようにすればよいのでしょうか？

CentOS5.5。Konqueror 3.5.4

単に対応してないんじゃねーの
CSS3だし

そっか。ん〜。

ありがとうございます。

今まで画像12個を並べて、ナビゲーションバーを作っていたのですが
ロールオーバーで、ボタンが選択されている時に、そのボタンだけ他の色の画像に変えたいと思っております。


#ibtn1 a {
background-image: url(../images/i_system.jpg);
display: block;
height: 20px;
width: 57px;
text-decoration:none;
text-align:center;
background-repeat: no-repeat;
text-indent: -9999px;
}
#ibtn1 a:hover{
background:url(../images/i_system2.jpg) no-repeat;
}



<td><div id="ibtn1"><a href="../system/mobile.html" title="システム"></a></div></td>


こんな感じに作ったのですが、問題は携帯サイトだという事です。
携帯サイトではＣＳＳが読めない携帯もあり、その場合は、画像が表示されず、何も分からない状態になるのでしょうか？
ＣＳＳが使えない携帯でも内容が見れる、ロールオーバーの方法等はありませんか？

よろしくお願い致します。

携帯って携帯専用サイト？画像ボタンは素直にimg要素使えば？
ロールオーバーなんてムリッス　フルFlashにしましょう

CSSが使えない携帯でロールオーバーは無理
ていうかCSSのスレなのになんでCSS無しが前提なの・・・

>>781
そーゆーのはJavaScriptでやるのが本道だと思いますよ

>>784
恥ずかしいから消えてくれ

>>785
情報性のない無価値発言で
自分の中の何が満足するんだ？

本当の駆け出し者で、質問すみません。

以下のように文章表示をさせて
以下の部分でスタイルシートを使いたいものです。
使いたいタグ？は…１文字だけスペースをあけて
連続した文字の中、１単語にh1タグを使いたいといったものです。
----------------------------------------
生け花の魅力　〜生け花は貴女の人生を
　　　　　　　　　　　　　　　　　　変えるものですよ〜
-----------------------------------------
↑このようにほぼ連続した「生け花→ですよ〜」までの中
「生け花の魅力」にだけh1タグを効かせて
外部のスタイルシートで
大きくなってしまう「生け花の魅力」という文字を小さく変えたいといったものです。


外部スタイルシートを<link href="style.css" rel="stylesheet" type="text/css">
で読ませて、スタイルシートには
h1 {
text-align: center;
font-size: 12px;
font-weight: normal;
color: #FF0000;
}
と記述しました。HTMLソースは<h1>生け花の魅力</h1>としました。

続きですみません。ところが上述のようにやると
------------------------------------------
生け花の魅力　
〜生け花は貴女の人生を
　　　　　　　　　　　　　　　　　　変えるものですよ〜
------------------------------------------
と改行して表示されてしまうのです。

ホームページビルダーで操作しているのですが
ページ編集の方で、本来表示したい>>787の
改行しない形に編集しなおすと

今度はソースが
<h1>生け花の魅力　〜生け花は貴女の人生を
　　　　　　　　　　　　　　　　　　変えるものですよ〜</h1>
のようになってしまいます。生け花〜〜〜ですよ〜〜までh1タグで囲まれてしまうのです。

自分の目的は<h1>生け花の魅力</h1>とだけ、生け花の魅力だけを<h1>タグで囲み
従来通りの>>787のようにウェブページで表示させたいというものです。

質問がごちゃごちゃして、本当に、本当にすみません。；

h1タグで強調した文字をｃｓｓで小さく直して
今まで通りにＷＥＢで表示するといったことは難しいでしょうか？

どうしても、生け花　　から　　ですよ〜　までh1タグで必然的に囲まれてしまいますでしょうか？…；

ソースを思い通りに書けないようなソフトは
窓から投げ捨ててください

>>789
了解しました＞＜
試行錯誤重ねてチャレンジアタックします！！

有難うございました＞＜！！！；

ほぼ自己解決しました＞＜
ＣＳＳに

h1 { display:inline;
というものを記述したら改行されました！
有難うございました！！！

携帯サイトについてですが、テーブルの中にテーブルを入れると、内側のテーブルの中身が見えなくなるのでしょうか？
ソフトバンクでは見れるのですが、ＡＵのページではなぜか見れないのです・・・

tableの中にtableは入れてはいけない。その現象の通りキャリアによって要素が消えるから。あとスレ違い

>>787
h1の使い方が根本的に間違っている。
HTMLから勉強し直したほうがいい。

■ネット起業バイブル合計1868ページ！ネットビジネスで稼ぐノウハウを無料でご提供！
http://2ch.zz.tc/netkigyo
（全て無料）

#boxの中にある<table class="test">内のtd thにのみに特定のプロパティを適用したいのですがどう指定したらいいかわかりません。
#box table.test{
margin:1em 1em 1em 0;
background: #f9f9f9;
border:1px #aaaaaa solid;
border-collapse: collapse;
}
#box table.test th, table.test td{
border: 1px #aaaaaa solid;
padding: 0.2em;
}
#box table.testcomp th{
background: #f2f2f2;

としてみたのですが、その前にある
#box tableや#box tr thが適用されてしまいます。
どう書けば、クラスがtestのtable内にあるth、tdにのみ上記のプロパティを適用できるでしょうか？

htmlファイルのほうでは
<table class="test">
<tr><th>a</th><th>b</th></tr>
<tr><td>a</td><td>b</td></tr>
</table>
のような感じで書いてます。

#box table{○○}
#box table.test{××}
としたら、そりゃ#box table.testには○○も××も適用されます

下のほうがid+class+typeで優先されるんじゃないんですか？

>>798
同じプロパティの場合です。

そこかよｗ

なんか質問の内容が伝えられてるか自分の説明に不安になってきたので、ピンポイントで書いて見ます。

#box tr td {
border-top: 1px solid #e7e7e7;
padding: 6px 24px;
}

とある状態から
box内にある特定のtableにだけ
#box table.test th, table.test td{
border: 1px #aaaaaa solid;
padding: 0.2em;
}

を適用したいです。

今下の方法でやってみたらできたんですが、これをクラスでやる方法があれば教えてください。
#test table th,
#test table td{
border: 1px #aaaaaa solid;
padding: 0.2em;
}

でhtmlで<div class="test"></div>でいれる。

はじめからそう書けばよかったのに。
#box table.test th, table.test td{　ｒｙ　｝
↓　＝
#box table.test th　{　ｒｙ　｝
table.test td　{　ｒｙ　｝
そりゃあidのほうが優先されるよな。

>>802
#box table.test th　{　ｒｙ　｝
#box table.test td　{　ｒｙ　｝

何を悩んでたんだろう。。とにかくありがとうございます。

http://red-rouge.com/index.html

ここのＥＮＴＥＲ画像の上にうっすらとある、ＥＮＴＥＲ文字なのですが
これを消してはいけないのでしょうか？

こういうのは、どうにもかっこ悪いのですが、消したら消したでＳＥＯ的にダメとか、ＣＳＳが見れない携帯サイトではないと分からないとか
の理由で、皆さん残しているのでしょうか？

恐ろしくて踏めないです

滋賀県のデリヘルのサイトです。

>>804
マジレスすると
「ENTER」の１単語がそのサイトにとってそんなに重要なキーワードなのか
ちょっと考えりゃガキでも分かるって話。

>>787

何のために？

ｈ１の大きさのまま改行したくないんだったらdisplayだろうけど、h1をわざわざ小さくしたいって言うからなんか怪しんじゃうんだよね。

丸形や星形のボタンを作って配置したいのですが、
ブラウザ上で、クリックしたときに点線の選択範囲が四角にならず
ボタンと同じ形になる方法などありますか？
Flashを使わずにCSSすることは可能でしょうか？

不可能

確かイメージマップだとできると思うがスレ違い

>>809
ほぼcssで記述可能

>>812
検索でうまくヒットできないので、なにかキーワードをくださいませ・・・。

>>809
javascriptも混ぜれば可能だと思うけど、cssだけでってのは絶対無理。

>>812>>814
待て、>>809の質問はoutlineの形を☆だとか○だとかにしたいという要望だろ？

>>811で答えは出てるだろ

イメージマップでやってみます。スレ違いすみませんでした。

ttp://hyper-text.org/archives/2006/11/css_selectors_linkicon.shtml
を見て、外部リンクにのみアイコンを追加することは出来たのですが、
「a img となっている場合のみ、アイコンを表示しない」
という表現は可能でしょうか？
よろしくお願いします。

今回のgoogleの大変動で分かったことを教えます。
http://twitter.com/creditcardmiu/status/25025421209

>>818
子に何があるかは考慮されない
クラスでもつけれ

ユニバーサルセレクタ(*)でmargin: 0; padding: 0;としたのに
IE6, IE7では、リストタグの左側にスペースがあいてしまいます。
(IE8, IE9では期待したとおりスペースなしになる）
全体のレイアウトはよくある2カラムのfloatをつかったものです。

見た目を各ブラウザでなるべく揃えたいのですが、
この謎のスペースをなくす方法はありますか？
それともブラウザのバージョンによってpaddingの数値を
変えるなどして調整しなければならないんでしょうか？

>>820
ありがとうございます。そうします。

>>821
なったことがない
それ以外の場所で上書きしてるんだろ

CSS２，３日勉強している程度の初心者です。

CSSで段組ということは「ボックス」を使いこなせるようになるまでの道のりなのでしょうか？

これは・・・深いな

>>824
「山に登る理由は、そこに山があるからなんですか？」
とかいう質問と同等

>>826
いや、そういうかっこうつけたレスっていうか
2chっぽいレスとか全く要らんから質問に素直に答えてほしいんだわな。

ボックスが使いこなせるようになればCSSの段組は不要というわけでもないし
イマイチ質問の意図がわかりにくいです。

こんばんは〜
初心者ですが、ブログをいぢってみようかと色々見て回っています。
htmlはかじった程度なのですが、その昔自己学習した時はメモ帳に書いてhtmlで保存してブラウザで見て・・・
って感じでやってたのですが、
cssの練習方法って、こうやったらいい〜とかありますか？
css 初心者とかでググっても何コレ状態です。いい練習方法あったら教えてください！
今日は映画見てたら超眠くなったので、また明日きます。宜しく御願いします。

>>829
ブログでいまポピュラーなのはCMS
具体的にはwordpressかなー
これだとcssでかなり意匠も変えられる
あとphpの簡単な勉強にもなるよ

俺はhtmlのみのテーブルレイアウトのページをちょっとずつcssに変えていくってやり方で勉強した。
最初はフォントまわり、文章の段組
次にメニューなどの要素をリスト化、アイコンを背景で対応、margin・paddingでレイアウト調整
次にレイアウトテーブルをフロートブロックに置き換え、タイトル画像を背景に置き換え等
最後にブラウザ間の調整、ハック等

>>829
メジャーなブラウザは揃えておいたほうがいいと思う。
IE(6,7,8)、Firefox、Chrome,Safari、Opera
IEだけしかチェックしてなくて、他のブラウザで見ると崩れているとかあるからね。

>>829
■HTML・CSSについて
・ごく簡単なHTMLの説明
　　http://www.kanzaki.com/docs/htminfo
・PC Tips
　　http://members.jcom.home.ne.jp/pctips/
・脱初心者をめざす人のためのホームページ作成講座
　　http://az-store.nrym.org/archive/mynotes/lecture/

初心者スレからもらってきた
とりあえずここは全部理解しれ
あとできれば
http://hp.vector.co.jp/authors/VA022006/css/
ここも

>829 CSSの基本的な書き方を理解したら、ブラウザのアドオンのFirebugとかを使って、
参考にしたいサイトのCSSがどういう風に働いてるのかを見るのお勧め。
ブラウザ上でCSSを書き換えて見た目を確認できたりもするので、自作の微調整のためにもあると便利と思います

どうも、皆さんありがとうございます！
ブラウザは、後SafariとOperaを入れて見ます。
>>833氏の面白くて大分読みました。
アドオンにもいいのあるんですね、参考にしてみます！
また何かあったら来ますん！

下記のコードだと文字がboldになりません。

<h5 class="first"><span class="pre">ほげ</span>ほげ</h5>

h5 .first {font-weight:bold;}

下記だとboldになります。

<h5><span class="pre">ほげ</span>ほげ</h5>

h5 {font-weight:bold;}

上の何が間違っているのでしょうか？

空白入れちゃダメ。

>>836
要素とクラスの間に空白要らない
具体的には
h5.firstでおｋ

もっと基礎やったほうが良いよ

>>837,838
レスありがとうございます。

table[width="123"]
,table[width="456"]
{ border-color: red; }
こういうときに、
table[width="123"]
table[width="456"]
これらを一括で指定する方法はありませんか？
正規表現が使えれば一番いいんですけど・・
table[width="*"]みたいな

もしくはwidth要素を含むtableを指定する方法がありましたら教えてください

table[width]

>>841
出来ました
ありがとうございます＜（＿　＿）＞

font-sizeの指定方法についての質問です。

「%指定の場合、bodyで定義したサイズの%サイズになる」と
思っているのですが、
同じ%指定の文字の大きさが、指定場所によって変わります。
ブラウザはIE8です。

Firefox3.6では、同じ大きさで表示されます。

どうすれば良いのでしょうか。

>>843
親要素に対しての％です

そしてbodyのfont-sizeはブラウザ毎に微妙に違うはず。

俺はbodyにfont-size:62.5%;（＝大体のブラウザで10px）しておき、
必要に応じてemでサイズ指定してる。（1.3em＝13px）

firefoxのはdoctypeの辺りじゃね？

>>845
せっかくYUI Fonts CSSがあるんだからわざわざ自分でやるなよと思ったりもする。

firefoxの拡張でサイト上のcssを書き換えるstylishというものがあります
これを使い、サイトで
a:hover
{ background-color: red; }
と背景色に赤が指定されているものをなくしたいのですがどのように記述すればよいのでしょうか。
背景色を白にしたいのではなく、a:hover時に背景色が指定される動作そのものをなくしたいのです

よろしくお願いします

transparent

>>848
ありがとうございます
無効にすることが出来ました＜（＿　＿）＞

>>848
ありがとうございます
無効にすることが出来ました＜（＿　＿）＞

(´-`).｡oO( すんごく重要なことなんだろう…)

cssでページ全体を中央に寄せるとしたら
body{の所に
body{text align:center;}
とする具合でしょうか？

その際ページ全体は中央に来ますけど
テキストとかの設定も全部中央揃いになってしまいますよね？

全体を中央に寄せる→部分部分は左寄りなり変わらずにしたい。
こうなった場合は部分部分に
左寄せの指定をしてあげるのがベストな手法でしょうか？

>>862
>>2

間違えた

>>852
>>2

>>854
有難うございましたｍ（_ _）ｍ

>>853
そういえば自分がセンタリングしたいものは
テーブルなどのブロック要素だけとは限りませんでした。
なので>>2だけとは限らずもっと幅広いものになります。

なので、>>2といった形でなく
記述で説明して頂けませんでしょうか。

その方が分かりやすいですしね。