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

このエントリーをはてなブックマークに追加
1 ：Name_Not_Found：
CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

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

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

《前スレ》
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/
2 ：Name_Not_Found：2009/08/29(土) 15:31:36 ID:???
【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
3 ：Name_Not_Found：2009/08/29(土) 15:32:42 ID:???
【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
4 ：Name_Not_Found：2009/08/29(土) 15:33:43 ID:7QWVTNNj
【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を待ちませう。
5 ：Name_Not_Found：2009/08/29(土) 15:34:56 ID:???
【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
6 ：Name_Not_Found：2009/08/29(土) 15:36:00 ID:???
【参考】
　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
7 ：Name_Not_Found：2009/08/29(土) 15:58:28 ID:???
【初心者向けの解説】
正しい知識を得たい人の爲の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
8 ：Name_Not_Found：2009/08/29(土) 16:00:21 ID:???
こんなもんだっけ?
FQAちょいと昔のだから修正有ったらよろしく
9 ：Name_Not_Found：2009/08/30(日) 22:57:26 ID:???
>>7
正しい知識を得たい人の爲のCSS2リファレンス
　http://hp.vector.co.jp/authors/VA022006/css/

これプロパティ抜けまくりじゃん
w3cのプロパティ一覧見てきたけど印刷関係のプロパティとかあちこち抜けがありすぎて初心者の解説にはならないと思う

10 ：Name_Not_Found：2009/09/04(金) 15:42:17 ID:0FoR9oB5
a;hoverで背景色を指定した場合、
一部の箇所だけ背景色を無効にすることって出来ないでしょうか？

例えば
<div id="sidebar">
<a href="menu.html">MENU</a>
</div>

上記のsidebar内のaタグには背景色がつかないようにするとか
11 ：Name_Not_Found：2009/09/04(金) 16:23:29 ID:???
>>10
■解決策
hoverを適応させる箇所を限定して記述
<div id="back_color"><a href="menu.html">MENU</a></div><!-- 適用させる -->
<div id="back_none"><a href="menu.html">MENU</a></div><!-- 適用させない -->

#back_color a:hover {#ff0000;}
#back_none {}
12 ：Name_Not_Found：2009/09/04(金) 16:24:15 ID:???
CSS間違えた

#back_color a:hover {background:#ff0000;}
13 ：Name_Not_Found：2009/09/04(金) 20:52:25 ID:???
>>9
初心者は印刷用プロパティなんか使わんから安心しろ

>>10
IDとかCLASSとか調べれ
14 ：Name_Not_Found：2009/09/04(金) 20:54:31 ID:???
初心者が使わないとしても、ここに書いてある事がすべて正しいと思って鵜呑みにする奴らはどうすんの？
15 ：Name_Not_Found：2009/09/04(金) 21:40:52 ID:???
間違ってることが書いてあるなら作者に指摘してこい
抜けはそこの場合わざとだからほっとけ
16 ：Name_Not_Found：2009/09/04(金) 21:55:04 ID:???
さすがに間違いもあるのに「正しい知識を・・・」とか笑っちまうよ
17 ：Name_Not_Found：2009/09/04(金) 22:16:55 ID:???
ここで指摘してないでメールしろ、うぜえ
スレチも理解できない奴が居座る方が笑えるわ
18 ：Name_Not_Found：2009/09/04(金) 22:22:51 ID:???
テンプレで載ってるんだからスレチでもない件
19 ：Name_Not_Found：2009/09/04(金) 22:40:15 ID:???
もうスレチ野郎に構うなよ、これいつもの奴だろ
20 ：Name_Not_Found：2009/09/04(金) 23:26:30 ID:???
騒ぎを収めたい人は作者ですかね
21 ：Name_Not_Found：2009/09/06(日) 02:05:40 ID:5xbHHxvS
すみません。助けてください＞＜

1)　画面が小さくなった時に横スクロールさせたい。
div#topmenu{
position:fixed;
bottom:0;
vertical-align:bottom;
margin:0 auto;
overflow:hidden;
width:1105px;
height:332px;
display:block;
}
div#topmenu ul{
margin:0 auto;
overflow:hidden;
position:relative;
top:-120px;
}
div#topmenu ul li{
float:left;
position:relative;
}

としたメニューが入っているのですが、（この後更にli内でa要素指定でロールオーバーしていますが、多分関係ないので割愛します）
このメニュー部分全体を
窓が小さくなったときに横スクロールさせることって可能でしょうか？
現状画面を小さくすると、左端がぶつかったらそのまま消えてしまいます。
(おそらくoverflow:hidden;をかけているからだと思いますが、かけないと通常時から縦スクロールバーが出てしまいます。）

すみません、改行エラーひっかかったので続きます。
22 ：21：2009/09/06(日) 02:06:23 ID:5xbHHxvS
2)下記のCSSテクニック
http://scuderia-web.com/tips/xhtml_css/equal_box_heights.php
の、「ソース（高さ画面いっぱい）」を設定したとき、
IE7で見るとものすごい長さのスクロールバーが出てしまいます。
これは回避できないでしょうか？
出来ない場合、似たような表示にさせるにはどうすればいいでしょうか？


書き込み初めてなので、いろいろ至らない点があったらすみません。
改行エラーで書き込めなかったため、ソースも読みにくくてすみません。
もう少し詳しくCSS・XHTML出した方が良ければ持ってきます。
どうぞよろしくお願いいたします＞＜
23 ：Name_Not_Found：2009/09/06(日) 02:25:11 ID:???
詳しくはいらんから出る最小単位のHTMLとCSS出せ
24 ：Name_Not_Found：2009/09/06(日) 03:12:52 ID:???
出る＝出せる　ってことでOKでしょうか？

1)HTML
<div id="topmenu">
<ul>
<li id="topmenu01"><a href="">link01</a></li>
<li id="topmenu02"><a href="">link02</a></li>
<li id="topmenu03"><a href="">link03</a></li>
<li id="topmenu04"><a href="">link04</a></li>
<li id="topmenu05"><a href="">link05</a></li>
</ul>
</div>

CSS
>>21に載せたもの（改行の関係で割愛させてください）

続きます
25 ：Name_Not_Found：2009/09/06(日) 03:13:42 ID:???
2)HTML
<div id="catwrapper" class="cl">
<div id="catsidemenu" class="cl">
<div id="catSidePhotoBg">
<div id="catSidePhoto">
<span>サイドバー写真</span>
</div>
</div>
<ul>
<li><a href="menu01">menu01</a></li>
<li><a href="menu02">menu02</a></li>
<li><a href="menu03">menu03</a></li>
<li><a href="menu04">menu04</a></li>
<li><a href="menu05">menu05</a></li>
</ul>
</div>
<div id="catbody">
略
</div>
</div>

続きます
26 ：Name_Not_Found：2009/09/06(日) 03:14:23 ID:???
2)CSS-1
div#catwrapper{
background:#e6e6e4;
overflow: hidden !important;
overflow: visible;
min-height: 100%;
height: auto !important;
height: 100%;
width:1004px;
z-index:-100;
}
div#catwrapper div#catSidePhotoBg ,
div#catwrapper div#catsidemenu{
float:left;
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
padding-bottom: 0;
margin-bottom: 0;
overflow:hidden;
height: 100%;
}
div#catsidemenu{
height: 100%;
width: 400px;
}
div#catsidemenu div#catSidePhoto{
display:block;
width:217px;
height:800px;
overflow:hidden;
}
続きます
27 ：Name_Not_Found：2009/09/06(日) 03:15:23 ID:???
div#catsidemenu ul ,
div#catsidemenu ul li{
略
}
div#catSidePhotoBg{
background:url(images/sidebarbg.png) repeat-y;
width:257px;
height:100%;
display:block;
position:relative;
z-index:150;
overflow:hidden;
float:left;
text-align:left;
}
div#catbody{
width:auto;
padding:90px 0 0;
margin:0 0 0 420px;
height:100%;
text-align:left;
}
.cl {
display: inline-block;
}
.cl:after {
content: "";
display: block;
clear: both;
}

以上です。ちょっとデザインの図解描いてきます。
28 ：21：2009/09/06(日) 03:33:36 ID:???
>>24-27=21　です。すみません

デザイン図解
http://firestorage.jp/download/5c328a13fd96e1d2918993d50b329e9921aca7d5

このcatsidemenuとcatbodyを画面の高さいっぱいにしたいんです。
FFもあまりに大きな画面で見るとうまくいってないようです・・・(catsidePhotoの高さ800pxに依存？)
29 ：Name_Not_Found：2009/09/06(日) 12:27:38 ID:???
最小単位・・・
30 ：21：2009/09/06(日) 15:25:10 ID:???
うっかり影響する場所がないとも限らないので
該当部分抜き出しで書きました。
オメヨゴシすいません＞＜
31 ：Name_Not_Found：2009/09/06(日) 20:22:26 ID:???
影響しないところまで自分で切り分けてから出すんだよ
まさか切り分けまで他人にしろって言ってるのか？
32 ：21：2009/09/06(日) 20:39:37 ID:???
ほぼ影響する範囲内の記述を抜き出したつもりですが・・・
もしいらないものが混じっていたらすみません。
33 ：Name_Not_Found：2009/09/07(月) 15:04:33 ID:???
あまりに初歩的で申し訳ないんですが、教えてください。
CSSファイルを外部から読み込んだhtmlファイルで、ある数文字だけ赤字にしたい
時はどうするんですか。
もしかして、外部のCSSにたとえば「redletters」とかを定義してhtmlファイルに

ふつうの黒字で
<div class="redletters">
ここは赤字
</div>
です。

なんて風に書くんですか。
ここだけインラインで色を指定なんて古典的な非推奨な？ことやりませんよね。

よろしくご教示ください。おねがいします。
34 ：Name_Not_Found：2009/09/07(月) 16:34:49 ID:???
>>33
私は<span class="point"></span>などとして囲んでいますよ。
もちろん色指定は外部CSSです。

色などで指定するより、何故色を変えるか・その変えた意味に合わせたクラス名にしておくと、
後々「やっぱりオレンジにしよう」とかなったときに便利です。
35 ：Name_Not_Found：2009/09/07(月) 17:28:20 ID:???
>>33
それ、CSSじゃなくてHTMLの質問ですね。

今回は「文字を赤くしたい」ということだけど、
「なぜ赤くしたいのか」をよく考えてみて下さい。

周りの単語等の中で「強調したい」なら、

　ふつうの黒字で<em style="color: #f00;">ここは赤字</em>です。

とします。「リンクを貼るから赤くしたい」なら、

　ふつうの黒字で<a href="url" style="color: #f00;">ここは赤字</a>です。

です。>>34は例にspan要素を使っていますが、
spanは他に該当する要素がないときに泣く泣く使う要素です。
まず、構造化するときに適切な要素があるかどうかを考えましょう。

クラス名については>>34に激しく同意。
36 ：33：2009/09/07(月) 18:12:41 ID:???
>>34-35
大変詳しく教えていただきありがとうございます。
クラス名は意味でつけるといいんですね。
取り急ぎお礼申し上げます。
37 ：33：2009/09/07(月) 21:25:43 ID:???
>>33です。
>>34-35で回答をいただいて考えてみたのですが、
（１）　外部CSSをリンクしておけば50ページのサイトでもCSSを修正するだけで全てに反映して変更が容易である。
（２）　しかし、例外としてn箇所だけ見た目を変えたい場合は…？

（1）は分かるんですが、（２）の場合でも（１）を実現するために、htmlファイルから徹底的に固有の色などを
括りだすべきなのか（下記ソース）、html中にインライン記法？で変更してしまうのがよいかが分かりません。
臨機応変というのが答えかもしれませんが、基本的な考えというのがよく分かりません。
お考えを教えていただければ助かります。

例外変更数ｎが大きくなるようなら構成練り直しということとは思いますが、
よろしくお願いします。長文すみません。

-----------------------
.remark_words{
color:#f00;
}
.remark_paragraph{
color:#00f;
}
-----------------------
…黒字の文章
＜p＞
段落(他の段落と共通の見た目)
＜/p＞
＜div class="remark_paragraph"＞＜p＞
段落(ここだけ青色を変えたい)
＜/p＞＜/div＞
黒字の文章
＜span class="remark_words"＞ここだけ赤字＜/span＞
黒字の文章…
38 ：Name_Not_Found：2009/09/08(火) 00:19:40 ID:???
<p>タグ間の行間を詰めるにはどうすれば良いのでしょうか？
具体的には，

<div><p>aaaaaaa aaaaa aa</p><p>bbbbbbbbbbbbbb b bb</p><p>cccc cccc ccccc</p></div>

とあった場合に，aaa..とbb..とccc.の間の行間を 0 にしたいです．下記のように指定したのですが行間が空いてしまいます．
(border は確認用)

p {
margine: 0px;
padding: 0px;
line-height: 0%;
border: solid 1px #C2C2C2;
}

どこか見落としがあると思うのですが，教えていただけないでしょうか？
39 ：Name_Not_Found：2009/09/08(火) 09:40:44 ID:???
>>37
複数の外部CSSに分けることだってできる
結局は全体を見て決めるしかない

>>38
> <p>タグ間の行間を詰めるにはどうすれば良いのでしょうか？
タグとタグの間？行間を調整できるテキストエディタをどうぞ

> margine: 0px;
スペルミス
40 ：Name_Not_Found：2009/09/08(火) 15:25:26 ID:???
>>38
>line-height: 0%;
いらないのでは？
41 ：33＝37：2009/09/08(火) 21:41:06 ID:???
> >>37
> 複数の外部CSSに分けることだってできる
> 結局は全体を見て決めるしかない
>
経験者の方の言葉を聞けてよかったです。
これから経験を積んで行きたいと思います。

ありがとうございました。
42 ：Name_Not_Found：2009/09/09(水) 10:48:17 ID:???
ＣＳＳはレンタルホムペ使う場合は作成してあるのでしょうか？

mono spaceを使っています。
43 ：Name_Not_Found：2009/09/09(水) 13:08:06 ID:???
>>42
普通は自分で作るものだから置かないが、
「テンプレート」をサイト制作用に用意してあるサーバーなら、
そのテンプレートをダウンロードする形で取り込めるかもしれない

そのレン鯖は知らないので、サポート等を読んでくだしあ
44 ：Name_Not_Found：2009/09/09(水) 18:17:20 ID:???


このブログテンプレートで、日付（01/10 Tue 2006）と記事の本文のスペースを空けるには
CSSのどこをいじればいいのでしょうか？
ttp://karma7.blog.shinobi.jp/Entry/29/

これがファイルです。
ttp://www.dotup.org/uploda/www.dotup.org122359.zip.html
45 ：Name_Not_Found：2009/09/09(水) 22:01:57 ID:???
>>43
ありがとうございます
46 ：Name_Not_Found：2009/09/10(木) 00:47:13 ID:???
>>44
ひでえ、そこFxだとそのサイト自体CSSが表示されねえｗｗｗ
悪いこと言わないからそんなとこの使うな
47 ：Name_Not_Found：2009/09/10(木) 09:18:48 ID:???
>>46
普通に表示されてます
48 ：Name_Not_Found：2009/09/10(木) 13:46:17 ID:???
こっちでも普通に表示されないな
FireBugでも「この要素にはスタイルのルールがありません。」になってるわ
49 ：Name_Not_Found：2009/09/10(木) 18:18:22 ID:???
>>46=>>48乙
50 ：Name_Not_Found：2009/09/10(木) 21:30:53 ID:???
むしろ作者が来てるんじゃないか、この流れｗ
51 ：Name_Not_Found：2009/09/10(木) 22:56:35 ID:???
普通に見えるな
見えない人はブラウザ再インストールするとかウイルスチェックといった初歩的なことをしたらいい
52 ：Name_Not_Found：2009/09/10(木) 23:14:28 ID:???
そのサイトのCSSだけ表示させないウィルスがあるとしたら凄いなｗ
53 ：Name_Not_Found：2009/09/10(木) 23:19:29 ID:???
ていうかhref="http://karma7.blog.shinobi.jp/css/"のせいじゃね？
昔CSSファイルを装ってアタックする手口であったから
そこんとこのセキュリティ関係をFxとOperaは強くして
明確にCSSと確認できない場合は無視してたような気がする
DirectoryIndexの設定と噛み合ってないんじゃないか
54 ：Name_Not_Found：2009/09/10(木) 23:39:30 ID:???
見えないって言ってる奴自演きめえよ
55 ：Name_Not_Found：2009/09/11(金) 00:14:49 ID:???
うわー
56 ：Name_Not_Found：2009/09/11(金) 04:55:34 ID:???
>>54には、このスレ頭で某サイトを叩いてた奴と同じスメルを感じる。
57 ：Name_Not_Found：2009/09/11(金) 11:05:14 ID:???
>>54
一応言っておくと俺は見えないと言ったわけではなくて
見えないんだとしたらこれこれこういう理由じゃないか、と言ってるだけだからな
58 ：Name_Not_Found：2009/09/14(月) 18:40:56 ID:GHCfWm8d
p.class1 というクラスを定義しました。
この定義とそっくり同じだけど、背景色の定義だけを変えた p.class1_sel というクラスを定義したいです。
この場合、p.class1 と背景色以外同じ記述を p.class1_sel でもしないといけないでしょうか。
できれば p.class1_sel では p.class1 からの差分だけを記述したいです。

やりたいことは JavaScript で、マウスポインタの下にある p のスタイルを class1_sel にして色を変えたいのです。

ちなみに、他にも p.class2 とか p.class3 なんかもあって、それらでも同じことをやりたくて、それぞれ _sel 付きのクラスを定義したいです。
59 ：Name_Not_Found：2009/09/14(月) 19:56:02 ID:???
クラスを2つ指定すりゃいいじゃないか

どうでもいいけどその程度のことにJS使わなくても・・・
60 ：58：2009/09/14(月) 21:24:42 ID:???
>>59
クラスを2つ指定って？？
<p class="class1 class1_sel"> みたいな？
で、class1_sel には差分だけを定義する感じですか？
class1 にも背景色は定義してあるんですが、別の背景色を定義した class1_sel と一緒にクラスを指定したら、どっちの背景色になるんでしょうか？
後ろに書いた方ですか？

って、おれのやりたいことってJS 使わなくてもできるんですか？？？
61 ：Name_Not_Found：2009/09/15(火) 02:53:09 ID:???
「p.class1_sel では p.class1 からの差分だけを記述」って書いてあるのに
差分じゃなくて被ってる部分あるのかよｗｗｗ
前半は全部yes、まあ先に書いた方の優先度が高くなってれば先に書いた方になる可能性もあるが

後半のは:hoverでできるだろ
62 ：Name_Not_Found：2009/09/15(火) 11:45:18 ID:???
>>60
>class1_sel には差分だけを定義する感じですか？
それでもOK
複数のclass指定の仕方も合ってる

>どっちの背景色になるんでしょうか？後ろに書いた方ですか？
詳細度が同じなら後ろに書いたほう
「CSS 詳細度」でググってくだしあ

>おれのやりたいことってJS 使わなくてもできるんですか？？？
>>61の言うとおりJavaScriptではなく :hover でいいが、
IE6が使えない（a要素を除く）ので、IE6向けに両方やるのも有り
63 ：Name_Not_Found：2009/09/15(火) 16:43:51 ID:GZqjI6jH
a { ～ }
a:hover { ～ }
のように書いて、マウスが乗ったときに色かえたりできますけど、これを
<a style="～">のように<head></head>に書かないでやることはできますか？
64 ：Name_Not_Found：2009/09/16(水) 08:18:26 ID:???
>>63
マルチ乙
65 ：Name_Not_Found：2009/09/16(水) 12:07:59 ID:???
>>63
マルチ視ね
66 ：Name_Not_Found：2009/09/16(水) 16:07:05 ID:???
>>63
外部ファイルってことかな。できるよ。
初歩の初歩だから検索すればごまんと出てくるよ
67 ：Name_Not_Found：2009/09/17(木) 17:38:14 ID:???
・英単語でも日本語でも折り返ししない (white-space:nowrap;)
・テーブルの幅を固定する (width指定）
・幅からあふれても伸ばさない。はみ出た分は消えてよし(overflow:hidden;?)
これって並立可能？
どうやっても幅が広がってしまう
要はどうやっても大きさ固定なテーブルを作りたいだけなんだが。
68 ：Name_Not_Found：2009/09/17(木) 17:40:28 ID:???
並列もなにもどこか被ってる箇所があるのかね僕ちゃん
69 ：Name_Not_Found：2009/09/17(木) 18:41:14 ID:???
>>68
やってみた？
俺やってみたけど素直に書いたら広がりやがる
70 ：Name_Not_Found：2009/09/17(木) 19:06:59 ID:???
>>69
日本語でおｋ
並立可能かどうかの質問してただろお前
誰も固定できるかどうかアドバイスしてねえよ
71 ：69：2009/09/17(木) 20:07:42 ID:???
>>70
文亡乙ｗｗ
俺質問者じゃねーしｗ
全文読んでやれよｗｗｗｗ

>>67
他のプロパティ設定してもうまくいかんから、文字切り捨てる位しかできないんじゃね？
72 ：Name_Not_Found：2009/09/17(木) 20:12:42 ID:???
>>67=>>69=>>71自演乙
IEのみ固定ならできるけどね
Firefoxの場合はスクリプトで対応しないといけないけどな
まあ自演する人のために教えたくはありませんので





さて次の質問どうぞ
73 ：Name_Not_Found：2009/09/17(木) 21:18:16 ID:???
>>69とは別人だよ！
もしよろしければ教えていただけないでしょうか？


>>69
氏ねよキチガイカス
74 ：Name_Not_Found：2009/09/17(木) 22:28:51 ID:6RuUd6eC
質問させてください

font-familyプロパティで、MS Pゴシックなどのフォント名の前に@を付けると
縦書きになるのですが、これが縦書きになるのは
@MS Pゴシックという縦書き用のフォントがあるからなのでしょうか
もしくはIEやOSサイドで縦書き化しているのでしょうか

宜しくお願いいたします
75 ：Name_Not_Found：2009/09/17(木) 22:42:29 ID:???
いやそれはPC板のフォントスレ行きなよ
76 ：Name_Not_Found：2009/09/24(木) 19:50:14 ID:Ij3I45VG
FireFoxの質問です。
背景画像があり、且つそれを見せたいので、左右のマージン・パッティングはdivでやり、
文字が見えなくならないようspanのバックグラウンドカラーで以下のようにCSSを組んだところ、
手持ちのIE,Operaは正常だったのですが、FireFoxの文字背景色が出たり出なかったりします。
div/spanに別属性(フォントサイズ)入れてみたりして、片方が干渉されてないわけではないみたいなのですが…。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type=text/css>
div.log{margin:0em 1.5em 0.5em 2em;
padding:0.3em 0;}
span.log{background-color:#00ffff;}
</style>
</head><body>
<h3>大見出しテキスト</h3>
<div class="log"><span class="log">
<h4>小見出し<br>
</h4>ここの背景色が表示されない（問題）<br>
<h4>小見出し見出し<br>
</h4>こっちは問題なし<br>
</span></div></body></html>

宜しくお願いします。
77 ：Name_Not_Found：2009/09/24(木) 20:41:18 ID:???
>>74
そもそもhtmlが間違ってるんでどんな動作しても文句は言えない
インライン要素の中にブロック要素は入れるな
78 ：Name_Not_Found：2009/09/24(木) 20:42:20 ID:???
>>77は>>76宛
79 ：Name_Not_Found：2009/09/24(木) 21:02:58 ID:???
>>77
あー、やっぱり面倒くさがらずhをspanから出さなきゃだめですか…。
出力ソフトの関係でこういうのになってしまったんですが
手打ちしか解決方法が無さそうですね。
諦めます。
80 ：Name_Not_Found：2009/09/25(金) 02:23:19 ID:???
出力ソフトのせいにすんな
81 ：Name_Not_Found：2009/09/25(金) 08:43:33 ID:???
FireFoxじゃなくてFirefox
省略するときはFFじゃなくてFx

ソフトのせいにするのはどうかと思うが、
何使ったらそんな破綻したソースになるのか
82 ：Name_Not_Found：2009/09/25(金) 12:23:49 ID:???
多くて申し訳無いんだけど教えて欲しいっす。

1、margin: 0pxみたいに値が0の場合ってpxは省略して0で大丈夫？どっちが正しいのかわからなくて。

2、marginを指定したらその後にpaddingも一応0で指定したほうがいい？

3、a:linkとvisited,hover,activeってまとめて指定する方法はある？
83 ：Name_Not_Found：2009/09/25(金) 12:39:51 ID:???
１．0なんだからpxなんてしなくてもいいだろ
２．marginとpaddingの違いから勉強して濃いよかす
３．a:link,a:visited,a:hover,a:active{color:#ff0000;}
84 ：Name_Not_Found：2009/09/25(金) 12:42:59 ID:???
>>83
ありがとー。
1さ、色々なサイトを見るとわざわざ0pxって書いてるとこ多いよ？
だから正しい記述の仕方がそっちなのかなって思ったんだけど

2はpaddingを指定しないなら書かないでいいのか、それとも一応0で指定しとくかって質問
marginなんかは0と指定無しじゃ結果違う事もあるじゃん
85 ：Name_Not_Found：2009/09/25(金) 13:13:48 ID:???
>>82
1.pxはなくてもいいけど、他の数値で忘れないように付ける癖を付けておく
2.そんなのはやりたいことによる、marginだけいらなくてpaddingが必要な事例だって山ほどある
3.aだけで全部を包括してる
86 ：Name_Not_Found：2009/09/25(金) 15:19:49 ID:???
>>85
ありがとう。
1は0以外は必須ってことね。
2はその都度判断してみるよ。
3はa:linkのみ指定すればその他3個は書かなくても同じ値が適用されるって事？
87 ：Name_Not_Found：2009/09/25(金) 18:50:27 ID:SVy5ql2f
質問させてください。

■■■　　■■■　　■■■
■■■　　■■■　　■■■
説明文　　説明文　　説明文

■■■　　■■■　　■■■
■■■　　■■■　　■■■
説明文　　説明文　　説明文

こんなレイアウトにしたいんですが
tableを使わずに作るにはどうすれば良いのでしょうか？
（■６個で一枚の画像、説明文は画像の解説です）
88 ：Name_Not_Found：2009/09/25(金) 19:11:13 ID:???
教えてクンの貴様に素敵な検索キーワードを教えてしんぜよう

その１　「css　3カラム」

その２　「css float left」
89 ：Name_Not_Found：2009/09/25(金) 19:24:40 ID:???
ありがとうございました。
なるほど、【縦に2つ】×3って考えればいいんですね。
90 ：Name_Not_Found：2009/09/25(金) 19:40:50 ID:???
<div id="setumei1">説明文</div>
<div id="setumei2">説明文</div>
<div id="setumei3">説明文</div>
<div id="setumei4">説明文</div>
<div id="setumei5">説明文</div>
<div id="setumei6">説明文</div>
91 ：Name_Not_Found：2009/09/25(金) 23:48:33 ID:???
>>86
aだけって書いてあるのに、なんで:linkをつけたがる？
92 ：Name_Not_Found：2009/09/26(土) 05:35:27 ID:???
CSSで以下のように設定して
a:link {
color: #333333;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
}

htmlで
<a href="#hoge">
詳細はこちらl<br />
<img src="xxx.jpg" /></a>

とすると、画像にも上記CSSの border-bottom が出てしまいます。

画像にだけ border-bottom を出させない方法はありますでしょうか？
お願いします。
93 ：Name_Not_Found：2009/09/26(土) 08:15:30 ID:???
xxx.css
xxxのところって何て名前が普通ですか？
94 ：Name_Not_Found：2009/09/26(土) 10:13:21 ID:???
>>92
a img {ボーバーボドムの設定}
95 ：Name_Not_Found：2009/09/26(土) 10:26:22 ID:???
>>92はマルチ
96 ：Name_Not_Found：2009/09/26(土) 10:54:47 ID:???
>>93
css内容によって変わる
97 ：Name_Not_Found：2009/09/26(土) 11:52:47 ID:???
>>93
style.css
main.css
html.css
color.css
border.css
table.css
98 ：Name_Not_Found：2009/09/26(土) 12:56:28 ID:???
それは平均取ったらそれ以上に分けすぎｗ
99 ：Name_Not_Found：2009/09/26(土) 13:00:36 ID:???
bokuno_daijina_css.css
100 ：Name_Not_Found：2009/09/26(土) 13:01:18 ID:???
俺はハック使うときはメインのCSSの後に最後に読ませてる

style.css
hack.css
101 ：Name_Not_Found：2009/09/26(土) 14:02:22 ID:???
先輩が作成したサイトの更新してたら
mein.cssだた
102 ：Name_Not_Found：2009/09/26(土) 14:52:13 ID:???
a要素てインラインですよね？
インラインにはボーダーなんかないと思っていたんですがあるんですか？
103 ：Name_Not_Found：2009/09/26(土) 15:29:13 ID:???
>>102
なんでないと思っていたの？
104 ：Name_Not_Found：2009/09/26(土) 15:47:52 ID:???
あるだろカス
105 ：Name_Not_Found：2009/09/26(土) 16:19:47 ID:???
すみません、どうぞ教えてください。

テーブル内にインラインフレームを設置し、
各メニューをクリックするとそのインラインフレーム内に新しいページが表示されるようにしています。
テーブル背景に背景画像を設定して、インラインフレーム自体の枠線はナシです。

Macのfirefox・safariと、Winのfirefoxではデザインが意図通りに出るのですが、
WinのIE（チェックは７のみ）で見ると、
テーブルの背景画像は表示されないし、
インラインフレームに枠線（影？）が出てしまいます。

IEでも他と同じ表示にする方法を教えてください！
お願いします。
106 ：Name_Not_Found：2009/09/26(土) 19:27:36 ID:???
>>103
ボックスモデルって言葉をたまに聞くので、てっきり……
調べてみたら、padding・marginもインラインでもあるんですね……ずっと勘違いしていたので驚きました
107 ：Name_Not_Found：2009/09/26(土) 22:11:50 ID:???
>>100
普通はそうだろ・・・

>>105
全部作ってやる馬鹿はいないと思います
108 ：Name_Not_Found：2009/09/26(土) 22:16:14 ID:???
>>107
ハックを最後に読ませるのが普通なの？
109 ：Name_Not_Found：2009/09/26(土) 23:39:47 ID:???
ハックだけでなく、局所的なものは優先度を考えて後ろに回すと思うよ
110 ：Name_Not_Found：2009/09/27(日) 00:16:34 ID:???
>>105
いくら悪名高いIEといっても
背景が表示されないとか意図しない枠線がでるとか
htmlとcssが汚すぎるんじゃないかね
111 ：105：2009/09/27(日) 01:49:53 ID:???
>>107
全部作れって意味じゃないですw
例えば noshade って入れたらいいよ～、とか、そんな簡単な解決があるのかもと
想像してました。

>>110
うーん、htmlもcssもものすごくシンプルだし、
変な空白は開けないようにしてるんですが...。
ソース載せていいですか？
112 ：105：2009/09/27(日) 01:55:17 ID:???
載せちゃいます＞＜

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>--</title>
</head>

<body>
<div align="center">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="sub.html" target="contents"><img src="images/title.jpg" width="800" height="85" border="0"></a></td></tr>
<tr background="images/sub_back.jpg">
<td align="center"><br><br>
<iframe src="sub.html" name="contents" width="550" height="450" style="border:none"></iframe>
<br><br><br></td></tr>
<tr>
<td><img src="images/copyright.jpg" width="800" height="31"></td></tr>
</table>
</div>
</body>
</html>
113 ：Name_Not_Found：2009/09/27(日) 04:08:21 ID:???
>>112
テーブル背景の方はCSSじゃないから無視するとして
インラインフレームも予期せぬボーダーが出ているわけではない
というか回答もCSSじゃないんだがどーしろと
frameborderでググれ
114 ：Name_Not_Found：2009/09/27(日) 06:57:54 ID:???
>回答もCSSじゃないんだがどーしろと
ｗｗｗ
115 ：Name_Not_Found：2009/09/27(日) 10:22:47 ID:TrPy3+BC
質問させていただきます。

background-colorやborderを設定したdivのなかに、
float: left;を設定したブロック要素(divとかulとか)を入れると、
親のdivの背景や境界線が消えてしまうのですが、どうすれば避けられますか？
116 ：Name_Not_Found：2009/09/27(日) 12:41:28 ID:???
それは仕様
ややこしいことがわからないなら、フロートしてないブロック要素も尻に一つ入れておけ
117 ：Name_Not_Found：2009/09/27(日) 15:05:36 ID:???
>>112
ieはtrのbackgroundに対応していないようだよ
118 ：Name_Not_Found：2009/09/27(日) 15:16:49 ID:???
>>115
http://www.w3.org/TR/CSS2/visuren.html#floats
流れからはみ出たら、ない物として続く要素で詰める、みたいな事が書いてある
119 ：Name_Not_Found：2009/09/27(日) 15:23:17 ID:TrPy3+BC
>>116
ありがとうございます。
ただ、諸事情でちょっと今回は不格好になってはいけないのです。

>>118
フロートの特性なのですね。
外出しなければならないので、帰ってきたらちゃんと読みます。ありがとうございます。
120 ：Name_Not_Found：2009/09/27(日) 16:11:16 ID:???
不格好って・・・どんだけ馬鹿だ
121 ：Name_Not_Found：2009/09/27(日) 17:04:43 ID:S0RSLLpp
ブログのフリーのパーツの欄に、チームの勝敗を表示しよう思ったのですがclassの指定が上手くいきません。

<style type="text/css">

Td {
padding: 1px 5px;
}

Td.1 {
padding: 1px 1px;
}

</style>

<table>
<Tr>
<Td align="left">10/4</Td>
<Td class="1" align="right">vs</Td>
<Td>相手チーム名</Td>
<Td><a href="試合結果サイト" target="_blank">3-1</a></Td>
<Td>勝</Td>
</Tr>
<Tr>
<Td align="left">10/7</Td>
<Td class="1" align="right">@</Td>
<Td>相手チーム名</Td>
<Td><a href="試合結果サイト" target="_blank">0-1</a></Td>
<Td>負</Td>
</Tr>

見た目的に、ホームかアウェイか分かる「vs」や「@」と「相手チーム名」の間だけ狭くしたいのですが・・・
ご教授お願いします。
122 ：Name_Not_Found：2009/09/27(日) 17:49:59 ID:???
>>121
クラス名の先頭文字はa-zで
123 ：Name_Not_Found：2009/09/27(日) 19:23:20 ID:S0RSLLpp
>>122
回答ありがとうございます！
数字を直したのですが・・・　等間隔のままです・・・

どこがいけないのでしょうか
124 ：Name_Not_Found：2009/09/27(日) 19:32:53 ID:S0RSLLpp
すいません、試行錯誤いろいろしているうちに無事出来ました！

125 ：Name_Not_Found：2009/09/27(日) 19:43:40 ID:K+Maxh9o
>>124
どうやって修正したか書いてかないのか？
126 ：105：2009/09/27(日) 19:49:02 ID:???
>>113
インラインフレームってCSSじゃなかったんですね！
すみません失礼いたしました(;´Д`)

>>117
なんてこった！
テーブル組み直してリデザインします・・・。
127 ：Name_Not_Found：2009/09/27(日) 20:17:19 ID:???
えっと、いや、borderでも線出そうと思えば出せるんだが・・・
まあいいか・・・
128 ：105：2009/09/27(日) 20:55:36 ID:???
>>127
出したいデザインでは、真ん中のtrの枠線の縦方向にだけ線を出したいんです。
一部だけ出すのが出来なかったので、背景画像でやっちゃったって感じです。
仕方ないのでセル増やしてボーダー部分を作ります＞＜
129 ：Name_Not_Found：2009/09/27(日) 21:05:39 ID:???
>>128
iframeが入ってるtdに背景はればいいじゃん
130 ：Name_Not_Found：2009/09/27(日) 21:34:59 ID:???
>>128
(ﾟдﾟ)
とりあえず幾つか参考サイトを…

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

初心者かすれから引っ張ってきただけだが
131 ：Name_Not_Found：2009/09/27(日) 21:35:45 ID:???
>背景画像でやっちゃったって感じです
背景画像は提示されてないんだから俺らにわかるはずないってのｗｗｗ
132 ：Name_Not_Found：2009/09/27(日) 22:07:16 ID:S0RSLLpp
>>125
<style type="text/css">
Td {
padding: 0.5px 0.5px;
}

Td.a {
padding: 0.5px 10px 0.5px 0.5px;
}

Td.b {
padding: 0.5px 10px;
}
</style>

<table>
<Tr>
<Td class="a" align="left">日付</Td>
<Td align="right">vs</Td>
<Td>相手チーム名</Td>
<Td class="b"><a href="試合結果サイト" target="_blank">得点</a></Td>
<Td>勝</Td>
</Tr>
<Tr>
<Td class="a" align="left">日付</Td>
<Td align="right">@</Td>
<Td>相手チーム名</Td>
<Td class="b"><a href="試合結果サイト" target="_blank">得点</a></Td>
<Td>負</Td>
</Tr>

これで上手くいきました！
133 ：Name_Not_Found：2009/09/27(日) 22:14:14 ID:???
すいません、cssのところはこれです

<style type="text/css">

Td {
padding: 0.5px 0.5px;
}

Td.a {
padding: 0.5px 8px 0.5px 0.5px;
}

Td.b {
padding: 0.5px 4px 0.5px 10px;
}

</style>
134 ：105：2009/09/27(日) 23:52:01 ID:???
できました！！！
>>113
ありがとうございます、frameborderで線が消えました！！

>>129
ほんとありがとうございます、背景画像が出ました！！

CSSじゃない上に初心者もいいところですみません、
でもできましたやったーヽ(･∀･)ﾉ ﾜｰｲ
ありがとうございますーヽ(･∀･)ﾉ ﾜｰｲ
135 ：Name_Not_Found：2009/09/28(月) 18:13:14 ID:???
トップ、レフト、ライト、ボトムのカラムがあって
さらにこのレフトに、トップ、レフト、ライト、ボトムのカラムが挿入されてる場合に、
idやclassのネーミングはどうしたらいいのか悩みます。
仮にオブジェクト指向なら気にすることなくそれぞれtop,leftと命名できると思いますが、
cssの場合、一番上のレフト内がhogeというコンテンツだとしたら、
同じトップでもスタイルを区別したいとき
hogeTopやらhoge_topやらにしないといけないですよね。
hogeはまだ短いし、topも位置名なので短くてすむのですが
これが機能を指名してまじめにそのまま記述となると長いもので・・半角五文字×5+ｱﾝﾀﾞｰﾊﾞｰ
くらいの長さになってしまいます・・

大手サイトのcssを見てみたのですが長くなりそうなものは、
頭文字をとって命名してるのもありました。
編集時には長い名前のままで、更新時に一括変換しているのかな、
とも思いました。

実際のところ、長い名前はなんとなく悪いんだろうなとは思うのですが
15文字くらいのものが多いという状況です。
もちろん訪問人数にもよると思うのですが、
長いといっても許容範囲はどれくらいなんでしょうか？
もしくはみなさんは、長くなりそうな名前をどのように管理しているのでしょうか
よい方法ありましたらアドバイスおねがいします。
136 ：Name_Not_Found：2009/09/28(月) 19:16:58 ID:???
ちょっとまって、よく分からなくなった。
今、上にあるからtopって名前や、左にあるからleftって名前をつけるのはオブジェクト指向なの？
137 ：Name_Not_Found：2009/09/28(月) 20:43:24 ID:???
>>136
すいませんわかりにくかったですね
オブジェクト指向の下りもこちらも説明できるほど良く理解してないのに
使ってしまったので、もう一回質問しなおしてみます。

画像で申し訳ないのですがこんな感じです。
http://terls.com/mono/src/terls%5B12695%5D.png
これだと、Topのclass名もtopのclass名も短くてすむのですが、

http://terls.com/mono/src/terls%5B12694%5D.png
の場合だと、jsなどで作ったコンテンツを、Leftに
独自に命名したhoge_hoge_hogeコンテンツとして追加した場合に、
常に下位の要素のclassにhoge_hoge_hoge_をつけなければ？
と悩んでしまったのです。

class="abc"だけでもいいと考えたのですが
やはり被ってしまうことを考えると、
hoge_hoge_hogeも抜かせないし、この長い命名のままでも
いいのかな、と。その尺がどの程度なのかを知りたいです。
hhh_abcというのが理想的なのですがこの数が増えると
瞬時にコードを見て判断するにはどう管理していいのかとも思いました。

で、現状は、.cssのコメントアウトにhoge_hoge_hoge、以下実際のコードはhhh_○○○
で対処しています。ただ、これだと.js側からclassを追加して見た場合と、
.cssから見た場合とでは.js側に予備知識がいるのではと悩んでいます。
138 ：Name_Not_Found：2009/09/28(月) 20:51:10 ID:???
>>137
スタイルを変えることもあるんだからleftやrightではなく
内容でその内容に沿った命名をしろ
普通のプログラムだってUIで右にあるからrightにするなんて馬鹿なことはないだろ
139 ：Name_Not_Found：2009/09/28(月) 21:11:02 ID:???
>>138
137の1枚目の画像は、場所がわかりやすいようにtopやleftを表記しました。
例えば、
2枚目の画像でいうghi機能に
hoge_hoge_hogeコンテンツの背景色を変える機能
があった場合、
hoge_hoge_hoge_change_color_background
dfe機能の場所に
hoge_hoge_hogeコンテンツの特定の場所aの色を変える機能
があった場合、
hoge_hoge_hoge_change_color_a

これは一例なのですが、仮にhoge_hoge_hogeと似たような
背景、aの場所の色を変えるボタン機能を持つ
hoge_hoge_hoge2コンテンツが追加された場合には
_background、_aという部分が被ってしまうので、
hoge_hoge_hoge2_background・・
、という問題にあたったのです。
140 ：Name_Not_Found：2009/09/28(月) 21:13:11 ID:???
訂正
＞hoge_hoge_hoge2_background・・
hoge_hoge_hoge2_change_color_background
141 ：136：2009/09/28(月) 21:13:23 ID:???
>>137
>>138が言ってる通り

「リモコン」に、「リビングの小さいテーブルの上のリモコン」て名前を付ける必要は無いよ。
「ダイニングの大きいテーブルの上」に移動した時どうするの？って理由で。

「リビング」の「小さいテーブル」の「上」の「リモコン」て指定するのがcssのcかと。
142 ：Name_Not_Found：2009/09/28(月) 21:15:49 ID:???
>>139
つーかclassは被るためというか同じ属性のものを纏めるために存在するんだよ
被っちゃいけない一意の名前はidにしろ
143 ：Name_Not_Found：2009/09/28(月) 21:27:45 ID:???
>>141
はい、まさにその通りです。
当初は、二枚目の画像でいう、jsで追加した「hoge_hoge_hogeコンテンツ」（リビング）の
「def」（リモコン）とclass='def'として指定していたのですが、
>>139でいう似たような機能を持ったコンテンツ
hoge～2が（例えばRightに）追加された場合
「def」としてしまうとjsのコンテンツなので
leftにも影響を与えてしまったのです。
そこで、def1やdef2とするのか、
そもそも推奨されていない、hoge～_defやhoge～2_defとしてするのか
ということです。
これならhoge_hoge_hogeコンテンツ（リビング）の上のdef(リモコン)
と、2位なのでまだ現実的かな、と。
144 ：Name_Not_Found：2009/09/28(月) 21:31:39 ID:???
>>142
idはjs側（のみ）で使うようにしているので、
例えば設定としてidをjs側で追加すれば、
エレメントをオブジェクトとして扱う場合に
融通が利くのです。
145 ：Name_Not_Found：2009/09/28(月) 22:10:27 ID:???
なんだろう、jsの使い方を変えないとどうにもならない気がする
146 ：135：2009/09/28(月) 22:27:51 ID:???
今環境が整っておらず、試せないのですが
例えば、これ用に要素を不変の要素を追加して
<div id="hoge1">
　<div class="def" />
</div>

<div id="hoge2">
　<div class="def" />
</div>

としてcssで
#hoge1 .def{}
#hoge2 .def{}
としても、js側やクロスブラウザで不具合がなければ
（根本的に○○○○リモコンみたいな長い名前が必修のものは仕方ないにしても）
ベース名的なものには、もしかしたら対処できるかもしれません。
ありがとうございました。
147 ：Name_Not_Found：2009/09/28(月) 23:37:37 ID:???
質問いいでしょうか
本文
<span>あい</span>うえお
CSS
body{background-color:#ffffff;}
span{color: #ffffff;}
これをfirefoxやIEで見るとあいの部分が白で見えなくなるのですが
Opera10で見ると白くならずあいうえお全て表示されてしまいます

基本的なことなのかもしれませんがなかなかできず困っています
アドバイスいただけないでしょうか。よろしくお願いします
148 ：Name_Not_Found：2009/09/28(月) 23:40:57 ID:???
>>147
いや？ならないけど
149 ：Name_Not_Found：2009/09/28(月) 23:56:50 ID:???
>>148
Operaの設定いじってしまったのかもしれません
自分の所だけならいいんです
ありがとうございました
150 ：Name_Not_Found：2009/09/29(火) 02:11:04 ID:???
他のCSSと競合してるんじゃないの
ホントにそれだけのソースでなるのか？
151 ：Name_Not_Found：2009/09/29(火) 03:26:11 ID:???
他のブラウザでならないから競合は考えづらくないかね
152 ：Name_Not_Found：2009/09/29(火) 03:35:09 ID:/I6xACvn
IE6の line-heightについて質問です。(IE7/8, Firefoxは期待どおり表示されます)
12枚の写真を display: block と float: leftで 上6枚、下6枚並べて表示させてます。
マウスが来るとhoverで明度の上げた写真に切り替わるよう設定しています。
画像ファイルは12枚分横に並べて連結、さらにhover用に下段に明度を上げたものを連結
上段に12枚、下段に明度を上げた12枚の写真を一つの画像ファイルにまとめています。
一枚一枚の写真の下部を余白にしてコメントを入れたいのですが、
IE7/8, Firefoxでは line-height: 300px;程度で期待通りの位置に表示されるのですが、
IE6ですと 文字は期待通りの位置に来るのですが、枠ごと広がってしまい
hover中でもないのに明度を上げた写真までもが表示されてしまいます。
IE6でも期待通りに表示させる回避策はありますでしょうか?
153 ：152：2009/09/29(火) 03:42:51 ID:/I6xACvn
CSSのソース抜粋です。宜しくお願いいたします。
.ph {
width: 675px;
padding: 5px;
float: left;
}
.ph li {
float: left;
width: 100px;
height: 153px;
list-style-type: none;
}
.ph a {
display: block;
width: 100px;
height: 153px;
background: #FFFFFF url(img/photo.jpg) no-repeat top left;
text-align: center;
line-height: 287px;      <--- IE6だとNG、IE7/8, Firefoxは問題なし
text-decoration: none;
color: #000000;
}
.pNavi01 a       { background-position:       0      0;}
.pNavi01 a:hover { background-position:       0 -153px;}
.pNavi02 a       { background-position:  -100px      0;}
.pNavi02 a:hover { background-position:  -100px -153px;}
～snip～
.pNavi12 a       { background-position: -1100px      0;}
.pNavi12 a:hover { background-position: -1100px -153px;}
154 ：Name_Not_Found：2009/09/29(火) 03:57:31 ID:???
>>153
ハックしろ
155 ：Name_Not_Found：2009/09/29(火) 12:03:00 ID:B+dgqX5O
CSSの質問です

#test {
color:#ff0000;
}

このときcolorの部分ははプロパティって呼び方で合ってますでしょうか？
では#testの部分と#ff0000の部分は何と呼ぶのでしょうか？
156 ：Name_Not_Found：2009/09/29(火) 12:50:21 ID:???
>>155
ttp://az-store.nrym.org/archive/mynotes/lecture/html-css/css1-1
157 ：Name_Not_Found：2009/09/29(火) 13:05:39 ID:B+dgqX5O
>>156
セレクタ、プロパティ、値って呼ぶのですね
ありがとうございました
158 ：Name_Not_Found：2009/09/29(火) 18:26:51 ID:???
IEだと
background-image: url();
background: url() ;
のどっちでもURLいれればリピートする背景画像表示されるんですが、GoogleChromeだとリピートしません
どう表記すればちゃんと縦、横にリピートする画像表示できるんでしょうか？
159 ：Name_Not_Found：2009/09/29(火) 18:58:12 ID:???
なんでrepeat設定しないの？
160 ：Name_Not_Found：2009/09/29(火) 19:12:20 ID:???
repeatが初期設定だからだろ
161 ：Name_Not_Found：2009/09/29(火) 19:29:21 ID:???
>>160
なにいってんのお前そんなことをいってねえよバカ
chromeではbackground-repeat設定しないとダメっつってんだろ
頭悪い初心者回答者は黙ってろ
162 ：158：2009/09/29(火) 19:45:57 ID:???
>>159、160、161
ご回答ありがとうございました。
不思議と自己解決しました。
なんでか解らないんだけど、特定のDivタグの中の背景画像が繰り返さなかったみたいです。
別のDivタグにbackground: url() ; でURL指定したら普通にリピートしました。
不思議でしょうがない・・・
163 ：Name_Not_Found：2009/09/29(火) 19:46:26 ID:???
>chromeではbackground-repeat設定しないとダメっつってんだろ

本気か？
164 ：Name_Not_Found：2009/09/29(火) 19:59:27 ID:???
自身があるのなら恐れず最後まで言ってあげましょう。
自身がないのなら黙っておきましょう。
165 ：Name_Not_Found：2009/09/29(火) 20:11:04 ID:???
>>163
初心者乙
166 ：Name_Not_Found：2009/09/29(火) 20:12:44 ID:???
>>162
不思議ではありません
あなたのコーディングがおかしいんです
再現できるコードを出さないのは解決する気がないのですよね
167 ：Name_Not_Found：2009/09/29(火) 20:27:45 ID:???
>>165
あたまだいじょうぶか？
168 ：Name_Not_Found：2009/09/29(火) 21:42:37 ID:???
>>161
うわー
169 ：Name_Not_Found：2009/09/30(水) 14:12:06 ID:???
CSS だけで rel="nofollow" と同じことができるのですか？
170 ：Name_Not_Found：2009/09/30(水) 14:13:27 ID:???
できるわけねえだろｋｓ
171 ：Name_Not_Found：2009/09/30(水) 14:49:11 ID:???
>>169
cssだけだったらそうなるんじゃない
172 ：Name_Not_Found：2009/10/01(木) 19:39:39 ID:???
<div style="width:50px;height:50px;" />

のwidthが0～25pxの範囲はbackground-colorが青、
widthが26～50pxの範囲はbackground-colorを赤
にしたいのですがどう記述すればよろしいでしょうか。
173 ：Name_Not_Found：2009/10/01(木) 20:39:17 ID:???
>>172
小さい部分に画像を使って背景色を別に設定
174 ：Name_Not_Found：2009/10/01(木) 20:55:24 ID:???
>>173
やはりイメージが必要になってきますかね・・
このdivを4つ、8つと分けたいときにその区間でそれぞれ背景色をかえれたらなぁと。
ありがとうございました
175 ：Name_Not_Found：2009/10/01(木) 22:10:08 ID:DxiOXj0X
CSS2とCSS2.1はプロパティは同じですか？
2.1は何が拡張されたのでしょうか？
176 ：Name_Not_Found：2009/10/01(木) 22:18:06 ID:???
拡張というか削られたというか
どうぞ自分で見比べてみんさい
2）
http://hp.vector.co.jp/authors/VA022006/css/propindex.html
2.1）
http://hp.vector.co.jp/authors/VA022006/css/css21_propindex.html
177 ：Name_Not_Found：2009/10/01(木) 22:34:33 ID:DxiOXj0X
>>176
w3cのほう見てます
海外サイト見るとcss2にはmarksとsizeとpageが含まれているのですが
w3cでcss2からこの3は消されてました
http://www.w3.org/TR/CSS2/propidx.html

これはw3cがcss2を更新したって事でしょうか？
178 ：Name_Not_Found：2009/10/01(木) 22:36:00 ID:???
訂正
＞w3cでcss2からこの3は消されてました

↓

w3cでcss2からこれら3つのプロパティは消されてました
179 ：Name_Not_Found：2009/10/01(木) 23:43:04 ID:???
>>176
そんなんサイト見てたらあきまへんよ～
180 ：Name_Not_Found：2009/10/02(金) 10:59:57 ID:???
>>177
http://www.w3.org/TR/CSS21/changes.html
181 ：Name_Not_Found：2009/10/02(金) 12:09:48 ID:???
つーか更新日時見るとＣＳＳ２（２．１じゃないよ）自体も更新されてないか？
182 ：Name_Not_Found：2009/10/02(金) 16:44:51 ID:???
どこの更新日時のこと？
2009.9.8のは2.1のerrata修正みたいだけど
183 ：Name_Not_Found：2009/10/02(金) 19:15:49 ID:XfsBi1Yb
http://celeb373.blog88.fc2.com/blog-entry-15.html
において、タイトルが２行になった時に、２行目が赤い枠に入りきらないので
赤い枠の縦幅を広げたいです。

いろいろやりましたが、タイトル文字が下に移動したりはするけど、
赤い枠の高さは広がりません。
どうすればいいでしょうか、

どうぞよろしくお願いします。
184 ：Name_Not_Found：2009/10/02(金) 21:05:42 ID:???
.entry_title_bgのno-repeatはずせば？
185 ：Name_Not_Found：2009/10/02(金) 23:16:58 ID:???
>>182
eratta修正ってなに？
186 ：Name_Not_Found：2009/10/03(土) 19:11:22 ID:gAVqahmI
spanである部分だけ文字色変える設定して、
IE8で表示すると最初のうちはちゃんと適用されてたのに
何故か急にspanじゃなくてデフォルト指定色にしかならなくなりました
ちなみにchromeではちゃんとspanの指定色になるので入力間違いとかではないです
何故途中からこうなってしまったのでしょうか？
187 ：Name_Not_Found：2009/10/03(土) 20:00:48 ID:???
so-netブログをホームページビルダー13で記事投稿しているんですが
CSSでレイアウト変更するみたいでline-heightで指定した高さが
画像有りと無しの場合で指定される高さがそれぞれ違って
文字が被ってしまいます。

解決策などはありましたら教えていただけないでしょうか？
188 ：Name_Not_Found：2009/10/03(土) 21:03:48 ID:???
>>186
ソースプリーズ
189 ：Name_Not_Found：2009/10/03(土) 21:23:29 ID:???
ソースプリーズ(笑)
190 ：Name_Not_Found：2009/10/03(土) 21:35:51 ID:???
お願いします

<html><head><style type="text/css">

<!-- メニューの箱です -->
.menu li{margin: 8px 0px 0px 0px; width: 80px; float: left; list-style-type: none;}

<!-- 全体の色指定 -->
a:link{color: black; text-decoration: none;}
a:visited{color: black; text-decoration: none;}

<!-- メニューの色指定 -->
.menu a:hover{color: grey; text-decoration: none;}

<!-- 現在いるページの色指定 -->
.onmenu a:link{color: red; text-decoration: none;}
.onmenu a:hover{color: red; text-decoration: none;}

</style></head>

<body>
<div class="menu"><ul>
<li><span class="onmenu"><a href="1.html">いち</a></span></li>
<li><a href="2.html">にい</a></li>
<li><a href="3.html" >さん</a></li>
<li><a href="4.html">よん</a></li>
</body></html>
191 ：Name_Not_Found：2009/10/03(土) 21:38:39 ID:???
ちなみに自分で検証したら↑はちゃんと表示されました。
でも元のファイルはやっぱり表示されません
結局、IE8だと不安定だってことなんでしょうか
もっと他にいいソースの描き方ってありますか？
ジャバスクリプトは使いたくありません
192 ：Name_Not_Found：2009/10/03(土) 22:27:55 ID:???
>>191
そのソースは、元のうまく色が付かないhtmlのをコピペしたやつなの？
193 ：Name_Not_Found：2009/10/03(土) 23:05:01 ID:???
他にもいっぱいあるのでこの部分だけコピペしました。
また開いてみたら今度はhoverだけ適用されてました
あと他のボックスの中に作ったリンクで別に色指定したやつはやっぱり適用されてません
（これもchromeではちゃんと適用されてる）
IEの問題としても、IE使ってる人がほとんどだしなぁ
194 ：Name_Not_Found：2009/10/04(日) 10:59:37 ID:???
css3の原文読んでるけど早くいじりたいぜ
195 ：Name_Not_Found：2009/10/05(月) 02:14:09 ID:???
>>193
そのソースを使ってるなら、閉じタグなかったりしてるのが影響してんじゃないの？
196 ：Name_Not_Found：2009/10/05(月) 09:24:40 ID:???
<!-- HTMLのコメント -->

/* CSSのコメント */
197 ：Name_Not_Found：2009/10/06(火) 06:47:29 ID:j8h8TpQj
ボタンの背景だけ用意して、その上に任意のテキストを載せてボタンを作りたいのですが
テキストがうまい具合に縦横センタリング出来ません
どうすればいいですか？
198 ：Name_Not_Found：2009/10/06(火) 06:55:02 ID:???
まず自分がやったところまで書けよ
199 ：Name_Not_Found：2009/10/06(火) 08:26:27 ID:???
こうしました！

.button {
text-align: centre;
}
200 ：Name_Not_Found：2009/10/06(火) 10:18:45 ID:WOMADlDj
セントレ！
201 ：Name_Not_Found：2009/10/06(火) 10:24:41 ID:???
どうでもいいがclass名に　button　は感心しない
202 ：197：2009/10/06(火) 12:11:35 ID:j8h8TpQj
.btn {
display: block;
text-align: center;
background-image:url(btn_back.gif);
height: 27px;
width: 156px;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
}

<span class=btn>hoge</span>

こうしました。横にはセンタリングできるのですが・・
203 ：Name_Not_Found：2009/10/06(火) 12:37:51 ID:???
cssのコーディング規約って決めてますか？
204 ：Name_Not_Found：2009/10/06(火) 14:04:33 ID:???
>>203
なにそれ？
例えばどうゆうこと？
205 ：Name_Not_Found：2009/10/06(火) 14:22:13 ID:???
たとえばですけどmozilla公式サイトののcssファイルを見てください
206 ：Name_Not_Found：2009/10/06(火) 14:34:23 ID:???
みてくださいって面倒くせーな
なんでアドレス貼らないの？
207 ：Name_Not_Found：2009/10/06(火) 15:33:20 ID:???
誰も答えてやんないという
208 ：Name_Not_Found：2009/10/06(火) 16:04:25 ID:???
MozillaのCSSのアドレスも知らない奴がここ見てるのが違和感ありまくり
209 ：Name_Not_Found：2009/10/06(火) 17:40:00 ID:???
>>208
そういう事では無いと思うお
210 ：Name_Not_Found：2009/10/06(火) 18:23:12 ID:???
どういういみなの
211 ：Name_Not_Found：2009/10/06(火) 19:32:52 ID:???
気のいい人戻ってきてくれないかな・・・
212 ：Name_Not_Found：2009/10/06(火) 19:58:18 ID:???
>>206
CSSの勉強してればMozillaのCSSは有名だよ
ブログとかでもよく取り上げられてるんだから
そんなのも知らないのかお前
213 ：Name_Not_Found：2009/10/06(火) 20:06:26 ID:???
>>212
勉強終わってるから知らない

なんでみなさん知ってるようなのに答えてあげんの？
214 ：Name_Not_Found：2009/10/06(火) 20:10:11 ID:???
みてきたけど、これがどうしたの？
215 ：Name_Not_Found：2009/10/06(火) 21:06:46 ID:???
あのcss見て何も意味が分からないのは素人レベル
216 ：Name_Not_Found：2009/10/06(火) 21:12:36 ID:???
ホームページをCSSを入れて再構成してみました
http://aradsenki001.web.fc2.com/
他のパソコンで見ると上のように画像が2重になり、ずれてしまいます
携帯でもずれてしまいます


http://dl3.getuploader.com/g/9%7Ckawaisosu/5/kari.jpg
自分でみると普通に映ってしまうんです。
何がおかしいのでしょうか？
217 ：Name_Not_Found：2009/10/06(火) 21:13:42 ID:???
あのcssって、ここ（http://mozilla.jp/）のcssだろ？
何がすごいのかわからん
218 ：Name_Not_Found：2009/10/06(火) 21:15:51 ID:???
>>216
htmlにいろいろエラーがあるんで
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
ここでチェックしてから修正、cssはそれから。
219 ：Name_Not_Found：2009/10/06(火) 21:33:03 ID:???
>>217
すごいかどうかじゃないだろ？
220 ：Name_Not_Found：2009/10/06(火) 21:49:21 ID:???
>>219
とにかくさ、訳知り顔のレスはたくさんもらったけど
誰も何も説明しようとしないのはどうゆうことよ

>>203のcssのコーディング規約って決めてますか？
に、規約ってなんぞ？と質問してんのにmozilla公式のcssみろって言うし
mozillaの公式サイトだって何個もあるだろ
質問しててその資料となるもんを提示しないとかおかしいでしょ

俺はパスするので、俺にレスしてたやつ、誰か>>203に答えてやってくれ
221 ：Name_Not_Found：2009/10/06(火) 21:51:55 ID:???
w3cの勧告でやれよ
mozillaなんぞサードパーティ
222 ：Name_Not_Found：2009/10/06(火) 21:52:19 ID:???
>>202
まだ解決してないなら
heightと同じ値のline-heightを追加してみてはどうだろうか
223 ：Name_Not_Found：2009/10/06(火) 22:39:52 ID:???
>>218
ありがとうございます
直りました！
こんな方法で直るとは思いませんでした
224 ：Name_Not_Found：2009/10/06(火) 23:09:34 ID:???
>>220=質問者乙
225 ：Name_Not_Found：2009/10/06(火) 23:20:39 ID:???
>>220
mozilla.jpは支部だしｗｗｗ
本家行くだろ普通
226 ：Name_Not_Found：2009/10/06(火) 23:23:22 ID:???
ttp://www.mozilla.org/css/base/content.css
227 ：219：2009/10/07(水) 00:15:08 ID:???
>>220
規約の一例として参考になるんじゃないかという事に
たいして Mozilla の公式サイトでも見れば？っていう
書き込みに「何がすごいの」はピントずれてんじゃね？
っていうレスだったわけだが？
228 ：Name_Not_Found：2009/10/07(水) 00:17:09 ID:???
みんな知ってるってすごいね
229 ：Name_Not_Found：2009/10/07(水) 00:20:46 ID:???
何だただの嵐野郎か。まじめに答えて損した
ケッ
230 ：Name_Not_Found：2009/10/07(水) 02:19:21 ID:???
質問です
safariにヒラギノ明朝 Pro W6を効かせるfont-familyの指定方法を教えてください
"ヒラギノ明朝 Pro W6"だとスルーで"Hiragino Mincho Pro"だと細くなります
231 ：Name_Not_Found：2009/10/07(水) 05:09:42 ID:???
>>230
「もうパンツはかない」でググれ
冗談ではなく
232 ：Name_Not_Found：2009/10/07(水) 05:30:59 ID:???
>>231
ありがと、無理なのか＞＜

<blockquote>
Safari では漢字が入ったフォントファミリー名は認識しませんし、
ウェイトの指定をのぞいてフォントファミリー名だけを指定する必要があります。
逆に、PostScript名を解釈するのはSafariだけのようです。
</blockquote>
233 ：Name_Not_Found：2009/10/07(水) 06:22:30 ID:???
いやだから「HiraKakuPro-W6」でいいってことでは
234 ：232：2009/10/07(水) 06:31:00 ID:???
>>233
やってみるとわかるけど
"HiraMinPro-W6"も"HiraMinProN-W6"も効かないんだよ
W6部分はウエイトの指定だからかな？
235 ：Name_Not_Found：2009/10/07(水) 08:17:14 ID:???
>>234
そこのサイトは下のCSSで実際にそのブラウザでキャプチャ撮ってるんだぞ
そいつができてるのにお前ができないのは単にお前の間違いだろ
236 ：Name_Not_Found：2009/10/07(水) 17:50:59 ID:???
.top{
position:absolute;
width: 1020px;
height: 135px;
top: 15px;
left: 80px;
background-image: url(../img/top10.jpg);
}
.menu{
position:relative;
width: 200px;
height: 480px;
top: 152px;
left: 80px;
background-image: url(../img/menu.png);
}
.main{
position: fixed;
width: 818px;
height: 480px;
left: 282px;
top: 153px;
background-image: url(../img/seria02.jpg);
}

cssなんですが
http://aradsenki001.web.fc2.com/
mainがものすごくずれてしまいます。間違ってますでしょうか？
237 ：Name_Not_Found：2009/10/07(水) 19:38:19 ID:???

何度もごめんなさい
http://aradsenki001.web.fc2.com/
このページが


http://dl8.getuploader.com/g/9%7Ckawaisosu/7/PIC87.tmp.jpg
↑のように表示されますか？


自分では
このように映ってしまうんです
http://dl1.getuploader.com/g/9%7Ckawaisosu/6/mudai.gif
238 ：Name_Not_Found：2009/10/07(水) 21:01:48 ID:???
ie testerを使えば、異なるIEの表示をチェックできるようになるぞ
239 ：Name_Not_Found：2009/10/07(水) 21:14:23 ID:???
>>237
position:fixed使ってんだから当然
そもそも本文にfixedなんか使うな、見切れるわ
240 ：Name_Not_Found：2009/10/07(水) 22:48:29 ID:???
>>239
absolute,relativeを使うと
top,bottomの効果が表れず上にいかないんです。
fixedならなぜかtop,botomでちゃんと移動するので、良い位置に動かせるんです
241 ：Name_Not_Found：2009/10/07(水) 22:54:16 ID:???
>>237
ブラウザのサイズが、みんな自分と同じだと思わないほうがいいよ。
高さ変更してみなよ
242 ：Name_Not_Found：2009/10/07(水) 22:55:09 ID:???
>>240
background:url(aaaa) no-repeat right bottom;
243 ：Name_Not_Found：2009/10/08(木) 02:27:08 ID:???
>>240
それは何か間違えてるだけ
lintとかValidation Service使え

>>242
お前はずれてる
244 ：Name_Not_Found：2009/10/08(木) 03:00:25 ID:???
中途半端にレイアウトでtable使うなら
全部tableでレイアウトしてもよいのではないかね
245 ：Name_Not_Found：2009/10/08(木) 06:41:34 ID:???
>>243
チェッカーで検索したんですが
http://jigsaw.w3.org/css-validator/validator
エラーはありませんって出ます

>>244
テーブルってずれたりしないですか？
自身がないので手を出しませんでした
246 ：Name_Not_Found：2009/10/08(木) 07:01:18 ID:???
>>245
ごめん、結局どうゆうレイアウトにしたいのかがわからないからアドバイスも出来ないんだよね。
表示がこうなりますか？だけじゃん。
247 ：Name_Not_Found：2009/10/08(木) 09:22:31 ID:???
>>245
いやお前今はabsoluteに変えてるじゃん
248 ：Name_Not_Found：2009/10/08(木) 14:30:21 ID:???
理由はわからないんですが
>>247
.main{
position: absolute;
width: 818px;
height: 480px;
left: 282px;
top: 153px;
background-image: url(../img/seria02.jpg);
}

>>236
.topの↑の位置にスクリプトを移動したら反映されるようになったんです
なぜ位置を移動しただけで効果が表れるようになったのか説明できる人いませんか？
249 ：Name_Not_Found：2009/10/08(木) 14:35:15 ID:u4COq3tH
解説を見ると::beforeみたいに : が二つついてるのを見かけますが
実際に書くときは :beforeという風に :　は一つだけ書くので合ってますか？
250 ：Name_Not_Found：2009/10/08(木) 16:28:59 ID:???
box内だけリンクタグで
変更する事は可能ですか？
251 ：Name_Not_Found：2009/10/08(木) 17:40:05 ID:???
>>249
CSS2と3勧告のselectorの項を

>>250
日本語でおｋ
252 ：251：2009/10/08(木) 17:59:59 ID:???
>>249
ごめん、真面目に読んだらCSS3だけで十分だった

Selectors Level 3
http://www.w3.org/TR/2009/WD-css3-selectors-20090310/#pseudo-elements

邦訳どっかに出てるから邦訳欲しかったらググってくだしあ
253 ：Name_Not_Found：2009/10/08(木) 18:06:56 ID:???
リンクタグを押すと
boxの中身だけリンクページで変更させたいのです。

説明不足ですまんが、誰か伝わる人はおらんだろうか
254 ：Name_Not_Found：2009/10/08(木) 18:16:58 ID:???
>>253
説明不足？
いやいや違います
何から何まで言葉がオーダーメイド過ぎで伝わらないんだと思うよ
255 ：Name_Not_Found：2009/10/08(木) 19:21:23 ID:???
すみません
css ページ内リンク　box

で1時間近くググっても出てこないのでお願いします＞＜
昔自分で作ってた時できた経験があるので

ここから
http://dl7.getuploader.com/g/9%7Ckawaisosu/8/image01.jpg
このように一部だけ変える
http://dl1.getuploader.com/g/9%7Ckawaisosu/9/image02.jpg
簡単に言うと一部だけ変えれば、読み込む要領も手間もかからないと思ったので
クリックしたら一部だけ白い部分を他のページで読み込みたいです

ごめんなさいすごく分かり難いかもです
256 ：Name_Not_Found：2009/10/08(木) 19:46:03 ID:???
何度もごめんなさい

http://css-eblog.com/eblog_sample/0803/paging/#no11
↑のサイトの様に、クリックしたらパカパカ変わるやつです。
これってひょっとしたらjavascriptですか？
たぶん昔やってたのはiframeだったかもしれません
257 ：Name_Not_Found：2009/10/08(木) 20:27:30 ID:???
ショッピングカートのようにみえますが
全部htmlで作ってあるんですか？
258 ：Name_Not_Found：2009/10/08(木) 20:36:21 ID:???
php、データーベースで作ります
学校の授業で作るので

それよりもｃｓｓのリンク内ページをはやああく
259 ：Name_Not_Found：2009/10/08(木) 20:51:17 ID:???
そのページのタイトルが「Javascriptサンプル」ってなってるのに何言ってるんだコイツ
260 ：Name_Not_Found：2009/10/08(木) 20:58:44 ID:???
>>258
じゃあphpでカテゴリーだけ書き出しなよ…
261 ：Name_Not_Found：2009/10/08(木) 21:42:01 ID:???
>>260
どゆいみ？
262 ：Name_Not_Found：2009/10/08(木) 22:45:43 ID:???
宿題は人に聞いてちゃ駄目なんだよ坊や
263 ：Name_Not_Found：2009/10/08(木) 22:49:13 ID:???
>>261
どうゆう意味って…
データベースからphpを使ってデータを取り出して、それを表示してんだよね？
264 ：Name_Not_Found：2009/10/08(木) 22:55:51 ID:???
そんな高度なことしてると思うのか？
もしやってたとしても、それ全部やり方教えてくださいってなるぞ、放置しろよ
265 ：263：2009/10/08(木) 23:07:20 ID:???
はい、ごめんなさい
266 ：Name_Not_Found：2009/10/09(金) 00:12:02 ID:???
so-netブログを使っていてCSSでいろいろいじれるんですが
記事内に画像を含む時にline-heightを適用させたいのですが
どうすればよろしいでしょうか？
例）　文章
　　　画像
　　　文章　
　
といった形で文章に画像が混ざっているというよりページ内に画像が混ざっている感じです。
記事内に画像が入ると指定している行間より行間が高くなってしまいます。
267 ：Name_Not_Found：2009/10/09(金) 00:35:10 ID:???
下の行が正しい動作なんだが
何をどうしたいのかがさっぱりわからん
268 ：Name_Not_Found：2009/10/09(金) 00:43:51 ID:???
>>267　すみません。
記事内に画像が入っているときに行間を丁度いいぐらいに狭く指定すると
文章だけで記事を書いたときに文字が被ってしまう
というのを解決したいんですが・・・
269 ：Name_Not_Found：2009/10/09(金) 00:45:16 ID:???
line-heightをpxで指定してるんなら、実数値や%に変更する
270 ：Name_Not_Found：2009/10/09(金) 01:08:49 ID:???
>>269　実数値や％で指定しているんですがやっぱり広さが変わってしまいます
271 ：Name_Not_Found：2009/10/09(金) 01:12:08 ID:???
いや変わらなきゃ被るんだろ？
272 ：Name_Not_Found：2009/10/09(金) 01:28:01 ID:???
>>271　
画像有りのページをみて80％で指定すると
画像なしのページでは被ってしまう。　
といった具合で
画像ありの記事と画像なしのページでの行間を統一したいんです。
273 ：Name_Not_Found：2009/10/09(金) 01:34:36 ID:???
あたりまえだろ、100%以上にしなきゃ被る
274 ：Name_Not_Found：2009/10/09(金) 01:40:04 ID:???
>>273　なるほど　ありがとうございました。
　　　わざわざどうもすみませんです
275 ：Name_Not_Found：2009/10/10(土) 08:10:51 ID:???
containが上下にぴったりくるようにしたいです。
下のでは上下に隙間ができてしまいます。
どうすればよいのでしょうか？

body {
background: #000;
}
#contain {
width: 600px;
height: 100%;
background: #fff;
}

<body>
<div id="contain">test</div>
</body>
276 ：Name_Not_Found：2009/10/10(土) 08:20:19 ID:???
すいません
margin:0;を入れたらできました。
お騒がせしました。
277 ：Name_Not_Found：2009/10/10(土) 11:17:06 ID:???
>>276
DOCTYPE宣言はちゃんと書いておいたほうがいいと思うぞ
278 ：Name_Not_Found：2009/10/10(土) 12:01:56 ID:Dtr419Pz
テーブルのボーダーをCSSで自由に指定するにはどうやればいいですか？
たとえば、縦線を二重線、横線を実線と点線を交互に、とかやりたいのですが
279 ：Name_Not_Found：2009/10/10(土) 12:38:55 ID:???
>>278
tdやthやtableにborderを自由に指定してください
280 ：Name_Not_Found：2009/10/10(土) 13:03:02 ID:Dtr419Pz
そういわれましても・・
思うにこのわかりにくさは、線は要素と要素の間にあるものだから
どこに所属するのかが分からないという哲学的な問題に起因するんです。
国境はどこの国のものかを問うようなものです
あるtdの左ボーダーにドットを指定し、その右側のtdの右ボーダーにダブルを指定したとしたら
設定が矛盾しあって何が起こるのです？
281 ：Name_Not_Found：2009/10/10(土) 13:24:01 ID:???
>>280
そういわれましても・・っていわれても・・・
あなたがあなたの好きなところに好きに線を引くしかないでしょう？

国境とか哲学とか意味わかんないこといってないでw3cみてみなよ
http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#box-dimensions
282 ：Name_Not_Found：2009/10/10(土) 13:42:17 ID:???
>>280
border-collapse:collapse;
283 ：Name_Not_Found：2009/10/11(日) 10:35:07 ID:???
>>280
何で自分で試さないの？金かかるわけでもないのに
284 ：Name_Not_Found：2009/10/11(日) 15:59:00 ID:???
W3c原理主義者ほど
うざいものはない
285 ：Name_Not_Found：2009/10/11(日) 16:27:26 ID:???
>>284
いきなり脈略もないことを言い出すヤツってうざいヨネー
286 ：Name_Not_Found：2009/10/11(日) 16:50:58 ID:???
こういう素人がスレを汚すことが激しくウザイ件

284 名前：Name_Not_Found[sage] 投稿日：2009/10/11(日) 15:59:00 ID:???
W3c原理主義者ほど
うざいものはない

285 名前：Name_Not_Found[sage] 投稿日：2009/10/11(日) 16:27:26 ID:???
>>284
いきなり脈略もないことを言い出すヤツってうざいヨネー
287 ：Name_Not_Found：2009/10/12(月) 01:11:15 ID:???
最近初心者板でやたら「素人」と使いたがるやつがいるな
288 ：Name_Not_Found：2009/10/12(月) 08:08:15 ID:???
それスレの主だぜ。手を出すな、穢れるぞ。
289 ：Name_Not_Found：2009/10/14(水) 00:49:50 ID:???
W3Cの資料くらい全部読んだよなあおまえ
標準Webくらいきっちりできるようになれよなあ



だっせえｗｗ
ﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟﾌﾟｗｗ
290 ：Name_Not_Found：2009/10/14(水) 09:59:09 ID:???
floatってあんまし使わないほうがいいってのまじ？
291 ：Name_Not_Found：2009/10/14(水) 11:30:35 ID:???
マジレスすると場合による
292 ：Name_Not_Found：2009/10/14(水) 13:01:36 ID:???
289が華麗にスルーした２人
293 ：Name_Not_Found：2009/10/15(木) 13:17:54 ID:AGZKIcZz
h_age
294 ：Name_Not_Found：2009/10/15(木) 14:37:06 ID:???
>>289をアンチW３Cクンと命名しよう
295 ：Name_Not_Found：2009/10/15(木) 16:58:19 ID:???
>>294
いやいやいやいやスルーしろってばさ
296 ：Name_Not_Fou：2009/10/15(木) 17:35:04 ID:???
質問があります。優しいおじさまお願いします。

ブログのサイトの画像部分をフラッシュに変えようと思い
background: #ffdddd url(http:○○.jpg)
のからHTTP以降を
http://blog-imgs-26.fc2.com○○.swf
に変えてみたのですが、、真っ白です。

HTTP以降を削除して新しいフラッシュ分を貼り付けだだけですが
画像見えないです。

どうすればいいのでしょうか？

ご指導お願いします。

BY　18歳ぴちぴち女
297 ：Name_Not_Fou：2009/10/15(木) 17:41:45 ID:DrxEWQvn
お願いします。あげ。
298 ：Name_Not_Found：2009/10/15(木) 18:37:49 ID:???
>>296
どこ住み？
彼氏いる？
299 ：Name_Not_Found：2009/10/16(金) 07:04:05 ID:???
>>269
flashは無理
300 ：Name_Not_Found：2009/10/16(金) 07:58:04 ID:???
2...269？
301 ：Name_Not_Found：2009/10/16(金) 09:50:37 ID:beR6ckhk
一つだけ質問があります。
XHTMLじゃなくてHTMLなんですけど
オンマウスすると写真の画像がパッと光るというか明るくなるというのをやってみたいのですが
cssを使ってできるもんなんでしょうか？
詳しい方で暇な方がいたら教えてください。
302 ：Name_Not_Found：2009/10/16(金) 09:54:01 ID:???
ロールオーバーの話なら可能
CSS ロールオーバーでググれ
303 ：Name_Not_Found：2009/10/16(金) 21:50:13 ID:???
質問です。
ググりまくったのですが解決に至らなくて困っております。

position:absolute
にした時、<div>などに指定したbackgroundが反映されず、
消えてしまう現象に悩まされております。

中にネストした<div>や他のタグ（<table>なども）に
position:absoluteを指定すると、それを包括しているタグに
指定したbackgroundも消えてしまいます。

CSS超初心者なのでとても初歩的な質問だったら大変申し訳ありませんが
親切な方、いらっしゃったら教えてくださると嬉しいです。
よろしくお願いいたします。
304 ：Name_Not_Found：2009/10/16(金) 23:16:33 ID:???
ググり方が良くないんだな
css background　表示しない
でググってみて該当なかったら、もう一回ソース貼って質問して
305 ：Name_Not_Found：2009/10/16(金) 23:44:18 ID:???
>>304
ググりなおしてみます。
ありがとうございます。
306 ：Name_Not_Found：2009/10/19(月) 20:41:15 ID:???
<dt class="a">
　　<div class="b">
　　</div>
</dt>
とhtmlに書いているんですが
この場合divタグのクラスからdtタグのクラスを指定するにはどのようなセレクタを使えばいいのでしょうか？

307 ：Name_Not_Found：2009/10/19(月) 20:57:53 ID:???
継承するプロパティはするし、しないプロパティはしない
無理矢理継承しないのもさせたいんならinherit
308 ：Name_Not_Found：2009/10/19(月) 21:24:19 ID:???
ブハっｗ
309 ：Name_Not_Found：2009/10/19(月) 23:29:46 ID:???
>>306
.a dt {}
310 ：Name_Not_Found：2009/10/19(月) 23:53:48 ID:???
>>309
えーとつまり言いたいことは
div.b * dt.a{}のように
セレクタを利用してどうにか解決したいんですが・・・
子要素から親要素への指定は無理なんでしょうか・・・？
311 ：309：2009/10/20(火) 00:00:08 ID:???
javascript使えるならdomでできます
312 ：Name_Not_Found：2009/10/20(火) 00:24:36 ID:???
設計がおかしい
313 ：Name_Not_Found：2009/10/20(火) 10:13:14 ID:???
採点してもらってから鯉
314 ：Name_Not_Found：2009/10/20(火) 10:43:50 ID:???
> 子要素から親要素への指定
無理
315 ：Name_Not_Found：2009/10/20(火) 10:46:18 ID:???
ちょ、子→親かよ
>>307は忘れてくれ、そしてずっと眠ってくれ
316 ：Name_Not_Found：2009/10/20(火) 21:08:18 ID:???
>>307
カスケードしないプロパティってなにがある？
317 ：Name_Not_Found：2009/10/20(火) 21:19:50 ID:???
そういう書き方すればいいだけ
318 ：Name_Not_Found：2009/10/20(火) 22:15:55 ID:???
>>316
山ほどあるんだが
background-colorとかpositionとか
319 ：Name_Not_Fou：2009/10/20(火) 22:22:30 ID:dkyYwmGX
質問です。無料FC2ブログを自分のホムペにビルトイン(埋め込み)したいのですが

httpをどのように加工したらいいのでしょうか？
320 ：Name_Not_Found：2009/10/20(火) 22:39:25 ID:???
スレチです
321 ：Name_Not_Fou：2009/10/20(火) 22:49:11 ID:dkyYwmGX
>>319　移動してきます。マルチじゃないです。
322 ：Name_Not_Found：2009/10/22(木) 01:46:29 ID:mwUK+EbG
テーブルのtdの奇数列と偶数列を色違いにしたいのですが、
一つ一つclassを指定するとソースが煩雑になります
いい方法があれば教えて下さい
323 ：Name_Not_Found：2009/10/22(木) 01:50:41 ID:???
テーブル　列　色違い　css　でググれ
324 ：Name_Not_Found：2009/10/23(金) 08:46:39 ID:???
nth-childはまだか・・・
325 ：Name_Not_Found：2009/10/27(火) 19:33:17 ID:???
cssで特定の文字を消すことはできますか？
たとえば

あいうえお
　　　うえお

のような感じで
326 ：Name_Not_Found：2009/10/28(水) 15:20:19 ID:???
>>325
display:none
327 ：Name_Not_Found：2009/10/28(水) 15:21:24 ID:???
<p><span class="kesimasu>あい</span>うえお</p>

#kesimasu {display:none}
328 ：Name_Not_Found：2009/10/28(水) 16:33:21 ID:???
>>326-327
説明不足でした
htmlを一切弄らない方向で
329 ：Name_Not_Found：2009/10/28(水) 16:37:58 ID:???
出ました必殺の説明不足視ね
330 ：Name_Not_Found：2009/10/28(水) 16:38:51 ID:???
>>325
javascriptスレ池視ねｋｓ
答えなければよかった
331 ：Name_Not_Found：2009/10/28(水) 20:56:30 ID:???
CSSに↓こうかいて
a:hover.other {color: #FF0000;text-decoration:none;}

HTMLに↓こう書いてもオンマウス時に赤色に変わらないです…
<p><a href="link1.html" class="other">リンク1</a></p>
<p><a href="link2.html" class="other">リンク2</a></p>


何か記述ミスしてますでしょうか？
IDは２回つかっちゃだめってことでclassにしたのですが…
332 ：331：2009/10/28(水) 21:18:26 ID:???
すみません!CSSが少し多い記述になっちゃいましたが解決しました!
スレ汚しスミマセンでした
333 ：Name_Not_Found：2009/10/31(土) 16:32:53 ID:???
兄弟隣接セレクタって
弟要素から兄要素への指定はできないの？
334 ：Name_Not_Found：2009/11/01(日) 20:25:37 ID:9rX2Qn4V
「CSS初心者スレッド」という文章があって、「CSS初心者」の部分にだけ背景画像を設定したい場合、
どうすればいいでしょうか？
インラインのままだと背景が表示できないですし、ブロックにすると改行されてしまいますし。
なお「CSS初心者」の部分はページ中に複数あってそれぞれ文字数が変わってくるという前提です。

「CSS初心者」にAタグをつけて、Aタグに背景画像を設定するとできるのですが、
それを＜span＞等でやりたいです。
Aタグのデフォルトの状態がわかればできそうなのですが、自分にはわかりませんでした。
よろしくお願いします。
335 ：Name_Not_Found：2009/11/02(月) 05:07:15 ID:???
意味がよくわからんけどdivでやれ
336 ：Name_Not_Found：2009/11/02(月) 06:13:53 ID:???
spanとかdivとかtableとか、縦横幅を決めたときデフォルトで背景が透明というか何も無いっぽい感じだと思うのですが
そうじゃない有名どころのブラウザってありますでしょうか？
例えば、
<div id="d1" style="width:100px;height:100px;background-color:#ababab;">
<div id="d2" style="width:50px;height:50px;" />
</div>
とあったときに、d1の背景（#ababab）が全部見えてくれる場合が多いと思いますが、
それが一般的なのか、というところに疑問をもちました。
337 ：Name_Not_Found：2009/11/02(月) 06:20:43 ID:???
>>336
一般的というかwidth+height+background-color指定したらその通り表示されるよ？
どういうふうにしたいの？
デフォルトの背景したい場合はbodyなりhtmlなりの背景の色を指定すればいいよ。
338 ：Name_Not_Found：2009/11/02(月) 06:25:02 ID:???
>>334
>「CSS初心者スレッド」という文章があって、「CSS初心者」の部分にだけ背景画像を設定したい場合、
>どうすればいいでしょうか？

あとこれだったら多分「CSS初心者」っていうとこだけ文章込みの画像にするとか？背景じゃなくて。
339 ：Name_Not_Found：2009/11/02(月) 08:15:36 ID:???
>>337
例えば、
<div id="d1" style="width:100px;height:100px;background-color:#ababab;">
<div id="d2" style="width:50px;height:50px;" />
</div>
のとき、d2にbackground-color:#000000;
を指定すると、d1の100px×100pxの背景が
d2の50px×50pxの背景（#000000）によって、その部分だけ見えなく（黒色に）なってしまいます。

そこで>>336でかいたように、d2を何も指定しなかった場合（ここではbackground-colorを指定しなかった場合）、
d1の背景（#ababab）が全て、見えるのか、何かしらの理由で、見えなくなってしまうのか
というところです。
ようは、
背景指定してあるbodyに背景指定のないdiv要素を一つ重ね合わせるときと、
（上の例では、）背景指定のあるdivに背景指定のないdiv要素を一つ重ねあわせるとき、
これらが背景の面で同じ様に作用してくれるか、
一般的にこの面でクロスブラウザを考える必要はあるか、
ということです。
340 ：Name_Not_Found：2009/11/02(月) 08:30:38 ID:???
えーとブラウザごとの挙動は詳しくしらんので他の人に補完してもらうとして
そういう時はz-indexでどの順番で重ねるか指定すればいいんじゃない？
341 ：Name_Not_Found：2009/11/02(月) 09:36:31 ID:???
background-colorの初期値はtransparent
342 ：Name_Not_Found：2009/11/02(月) 09:44:43 ID:???
>>334
>インラインのままだと背景が表示できない
勘違い
343 ：Name_Not_Found：2009/11/07(土) 04:41:05 ID:6Puk5E3r
写真や絵の上に文字を置くときに
text-shadowが便利で使ってるんですけど、ieでは使えませんよね？

・ieで似たことができるcssの方法はありますか？（ie6以上対応きぼん）
または
・多少違う見え方でもいいので、cssを使ってieで写真等の上に文字を置くのに便利な方法はありませんか？

＃文字列は、映画のポスターみたいに真ん中に割と大きく置く予定です
344 ：Name_Not_Found：2009/11/07(土) 07:06:55 ID:???
↑＃の部分ちょっと補足です

background-color:#000とかで下敷きを作ってもいいのですが、
上で書いたとおり真ん中に、割と大きく文字を置いているレイアウトなので
そうすると塗りつぶされた部分は下の絵が完全に見えなくなってしまうので避けたいです。
下敷きの黒い帯が横たわるのもいまいち格好悪いですし・・・
というわけでよろしくです。
345 ：Name_Not_Found：2009/11/07(土) 08:55:22 ID:???
position やらで位置を指定して、その下に数pxずらした色違いの文字を予め置くとかあるけど、醜い方法。
346 ：343：2009/11/08(日) 01:45:06 ID:???
>>345
㌧
やってみましたが、やはりあんまり見栄えが良くないですね・・・・
メッシュ状の透明gifとか下敷きにもしてみたんですがなんか今一でした
他の方法考えてみますorz
347 ：光：2009/11/08(日) 16:35:37 ID:mpQFrkZu
<select>の<option>に個別に設定したスタイルシート(色変え等は)はブラウザ依存なのでしょうか？
SH903iのiﾓｰﾄﾞﾌﾙﾌﾞﾗｳｻﾞでは正常に動作したものの
SH-06Aのiﾓｰﾄﾞﾌﾙﾌﾞﾗｳｻﾞでは効きません

ブラウザ依存なら対象方法としてはJavaScript/onChangeで<select>ごとスタイルシートを変えるくらいしかないでしょうか？
348 ：Name_Not_Found：2009/11/09(月) 13:39:23 ID:???
>>346
ちなみに、写真や絵の上に、置くのは、デバイス文字か？
それとも書き出した画像かな？
画像なのであれば、iepngfixでググれ。そしたら自分がやりたかったことにたどり着く。
349 ：Name_Not_Found：2009/11/10(火) 00:38:42 ID:???
文字車道はまだ使えないよね実際のところ
ロゴならpngだろうね
350 ：343：2009/11/10(火) 04:13:09 ID:???
>>348-349
わざわざ㌧
可変文字列（インフォメーションとして使ってるんで内容・色・大きさが結構変わる）なんで、
文字を画像にするのはきついんですよね・・・
どうもでした～
351 ：Name_Not_Found：2009/11/10(火) 07:05:19 ID:???
IEのときだけ、dlが右側にはみ出るのはなぜ？
長文になると改行しても横スクロールバーが出ます・・・

<div>
<dl>
<dt>あああ</dt>
<dd>あああ</dd>
</dl>
</div>
352 ：Name_Not_Found：2009/11/10(火) 09:08:54 ID:???
ここでいいか分かんないけど、教えてください＞＜

ttp://www.dotup.org/uploda/www.dotup.org348118.jpg.html
上記画像を見てもらうとわかるとおり、IEでテーブルを組んだとき
テキストボックスにsizeを指定すると、なぜかレイアウトが崩れます。

CSSが原因ではないかもしれないですが、ご教授いただけたら幸いです。
353 ：Name_Not_Found：2009/11/10(火) 09:09:42 ID:???
margin-left
354 ：352：2009/11/10(火) 09:51:27 ID:???
>>353
ご教授ありがとうございます。
・・・・・が、よくわかりませんorz
margin-leftをどの部分に適応すればいいのでしょうか・・・。
355 ：Name_Not_Found：2009/11/10(火) 12:20:48 ID:???
>>353は>>351宛てだと思うぞ
356 ：352：2009/11/10(火) 14:09:20 ID:???
>>355
ご教授ありがとうございます。 (^^;
357 ：Name_Not_Found：2009/11/11(水) 00:51:56 ID:???
<div>てすとてすと<br />てすとてすと<br /></div>
とあるあるときにdivのwidt、heightそれぞれ指定しなくても
テキストのある範囲に幅に合わせてくれますが
これは仕様なのでしょうか、それともブラウザに依存しているのでしょうか
358 ：Name_Not_Found：2009/11/12(木) 15:56:01 ID:/pfdOLPA
<div style="margin:5px;">a</div>
<div style="margin:5px;">b</div>

このように書くと、

┌─┐
│ a│
└─┘
┌─┐
│ b│
└─┘
のようにdiv要素が並びますが、aとbの間の隙間が5pxになります。
marginはどちらも5pxにしているので、aの底辺の5pxとbの上辺の5pxが合計されて
10pxの隙間が出来る気がするのですが、なぜ5pxなのでしょうか。
359 ：Name_Not_Found：2009/11/12(木) 19:11:10 ID:???
上下の隣接するmarginは相殺が発生するのがCSSの仕様
解説サイトを探して調べてみてください
360 ：Name_Not_Found：2009/11/12(木) 21:26:46 ID:/pfdOLPA
相殺するんですか
初めて知りました
ありがとうございます
361 ：Name_Not_Found：2009/11/13(金) 13:23:23 ID:nN++1svv
liタグを使って
・あああああああ
ああああ
といった表示をしたいのですが
・あああああああ
ああああ
となってしまいます

何かやり方ありませんか？
362 ：Name_Not_Found：2009/11/13(金) 14:33:07 ID:oox5/boO
何がだめなのか。
363 ：Name_Not_Found：2009/11/13(金) 16:07:20 ID:???
>>361
前者と後者の違いがまったくわからないんだが、

list-style-position－スタイルシートリファレンス
ttp://www.htmq.com/style/list-style-position.shtml

こういうことなのではないかとエスパー回答してみる
364 ：Name_Not_Found：2009/11/13(金) 17:43:38 ID:6Eu/tgl7
画像検索apiを使って
ttp://sokkuri.net/alike/%E9%97%98%E7%89%99/%E9%9A%86%E3%81%AE%E9%B6%B4
上記のサイトのように画像一覧を表示させる方法を教えてください。
初めての質問なので板違いだったらすみません。
よろしくお願いします。
365 ：Name_Not_Found：2009/11/13(金) 18:36:31 ID:???
>>363
おお、エスパー回答の通りです
ありがとうございました
366 ：Name_Not_Found：2009/11/13(金) 21:18:47 ID:5nWc7khW
ゾンビから逃げて最終的にはヘリで逃走するミッション鯖を探してるのですがわかりません。
どなたかIPを教えて頂けたらうれしいです。
367 ：Name_Not_Found：2009/11/14(土) 01:57:09 ID:???
>>366
192.168.0.1だよ。
368 ：Name_Not_Found：2009/11/14(土) 03:16:03 ID:98Z1MpYI
>>367 本当にありがとうございます
369 ：Name_Not_Found：2009/11/14(土) 18:09:51 ID:AGVd2sio
なんかＯｐｅｒａでやると変になる
370 ：Name_Not_Found：2009/11/14(土) 19:11:08 ID:???
<div>
　<div style="float:left;">ああ</div>
</div>
<div>いい</div>

だと "ああ" と "いい" の間で改行されないの？
371 ：Name_Not_Found：2009/11/14(土) 19:21:00 ID:UVdwJxnN
質問です。

<h1 id="x"><a href ～>あいう</a></h1>の文字カラーの指定を
「a」の指定よりも「h1」の指定を優先させるためには、
どうすれば良いのでしょうか
372 ：Name_Not_Found：2009/11/14(土) 20:03:51 ID:98Z1MpYI
>>367 鯖がありません…
373 ：Name_Not_Found：2009/11/14(土) 21:17:12 ID:???
>>372
じゃあ 127.0.0.1 で。
374 ：Name_Not_Found：2009/11/14(土) 21:20:18 ID:???
くだらね死ねよ
375 ：Name_Not_Found：2009/11/14(土) 22:35:28 ID:???
いまだにディブ房なんているのかｗ
376 ：Name_Not_Found：2009/11/14(土) 22:37:23 ID:???
div=「」
何の意味もない
CSSのCはカズケーディング
少しは本買って勉強しろ
いじってればどうにかなるなんてレベルはもう卒業してね
377 ：Name_Not_Found：2009/11/14(土) 22:59:29 ID:JMG8jQQR
<span class="entry"></span>で囲った文字列が大量にあるのですが、
これらにmarginをつけることは出来ないでしょうか。
inline要素はmarginなど指定できなかったと思いますが、
何かいい方法はないでしょうか。
外部ファイルからCSSを読んでいるので、
.entry {
****
}
の部分を1箇所直せば全てに適用できます。
ご回答お待ちしております。
378 ：Name_Not_Found：2009/11/14(土) 23:31:59 ID:???
カズケーディングｗｗｗｗｗ
少しは本買って勉強したら？
379 ：Name_Not_Found：2009/11/15(日) 01:08:00 ID:???
これは恥ずかしい。
380 ：Name_Not_Found：2009/11/15(日) 01:38:34 ID:???
>>377
左右の margin ならそのままで。
上下の margin なら

display: inline-block;

でいけんじゃ？
381 ：Name_Not_Found：2009/11/15(日) 02:46:00 ID:+d3O3rv1
ゾンビできました。
しかし試合してる最中いきなり切断されます。
何故でしょうか
382 ：Name_Not_Found：2009/11/15(日) 12:53:01 ID:???
>>370
エスパー回答
clearしたら

>>371
#x a { color: ... }

で十分

>>377
> inline要素はmarginなど指定できなかったと思いますが、

本当にそうか？試してみた？

>>381
いい加減板違いは帰れ
383 ：Name_Not_Found：2009/11/15(日) 14:18:50 ID:???
CSSとhtmlは分ryアウトラインを先に作ry
愛正解みたいなのにしたいならご自由に
384 ：Name_Not_Found：2009/11/15(日) 14:34:05 ID:YS4RzEXO
>>382
横は出来ましたが立てのmarginはだめでした
385 ：Name_Not_Found：2009/11/15(日) 14:44:59 ID:???
>>384
line-heightじゃ駄目なの
386 ：光：2009/11/15(日) 19:47:30 ID:h37y1MK9
すみません
どうか>>347にお答えいただけませんか？
387 ：Name_Not_Found：2009/11/15(日) 23:59:05 ID:YS4RzEXO
>>385
ああ、その手がありましたか!!
複数行になっている部分の行間がちょっと気になりますが、とりあえず出来ました。
ありがとうございます。
388 ：Name_Not_Found：2009/11/16(月) 01:28:56 ID:???
ケータイCSSはものすごい制限あるよ
389 ：光：2009/11/16(月) 07:31:01 ID:???
PCでもブラウザ依存なのでしょうか？
対象法はJavaScriptくらいですか？
390 ：Name_Not_Found：2009/11/16(月) 22:36:05 ID:yyQ+6g7M
…
<div>○</div>
…

○の部分に、無料レンタルサービスの「RSSフィード取得ツール」を埋め込んでいます。
時々このサービスのサーバーが重くなって表示されなくなります（ずっとロードの状態になる）。
すると、この<div>○</div>以降に書いてあるものもすべて表示がされなくなってしまいます。
そこで、<div>○</div>の部分は最後にロードするようにしたいのですが、このようなことは可能でしょうか。
391 ：Name_Not_Found：2009/11/16(月) 23:25:02 ID:???
HTML 内で一番下に書けばいいんじゃね。
392 ：Name_Not_Found：2009/11/17(火) 17:40:58 ID:ROGjbCwz
>>391
そうすると表示位置も下になってしまいます
393 ：Name_Not_Found：2009/11/17(火) 18:00:20 ID:???
そもそも何でCSSの質問スレで聞くの
394 ：Name_Not_Found：2009/11/18(水) 18:33:45 ID:???
画像をテーブルの下敷きにしようとして以下のようにしました。
chromeでは見えないのですが、ie6、狐3.5.5で見るとhoge1とhoge2の間に
テーブルの枠らしき線が水平方向に入ってしまいます。
線を消す方法を教えてくらさい！

<table styel="background-image: url(hoge.jpg);border-color:transparent;border-collapse:collapse;">
<tr><td>hoge1</td></tr>
<tr><td>hoge2</td></tr>
</table>
395 ：Name_Not_Found：2009/11/21(土) 10:33:48 ID:???
>>392
ヒント position
396 ：Name_Not_Found：2009/11/21(土) 10:37:46 ID:tbYtZSx+
w3cのcss3に関する記述のトップページってどこにありますか？
以前見てたのですが久しぶりにアクセスしたらデザインが変わっててわからなくなりました
397 ：Name_Not_Found：2009/11/21(土) 11:02:10 ID:tbYtZSx+
すいません見つかりました
398 ：Name_Not_Found：2009/11/21(土) 11:23:12 ID:90JTidUS
CSS3の大部分はワーキングドラフトなのに早漏のようにCSS3講座を開講してるサイトってなんなんですか？
399 ：Name_Not_Found：2009/11/21(土) 15:09:39 ID:???
サイトでうだうだ言われるということは、
先行実装しているブラウザはどうなるわけ
400 ：Name_Not_Found：2009/11/22(日) 21:32:58 ID:???
li img:before{
content:attr(alt);
disply:block;
color:red;
}
としても firefox で表示されないのは　何で？
401 ：Name_Not_Found：2009/11/23(月) 13:27:28 ID:???
印刷時に文章をLaTeXのように2カラムにする方法を探しています。
印刷環境によって、改ページする位置は変わるので、
コンテンツ側に、改ページタグを付けたくはありません。
402 ：Name_Not_Found：2009/11/23(月) 16:12:17 ID:???
-moz-column-count:2; column-count:2;
403 ：Name_Not_Found：2009/11/23(月) 18:35:33 ID:???
ttp://fukia.6.ql.bz/
このサイトを作っているのですが、IE6で確認すると、ナビゲーションボタンの周りに隙間が出来てしまいます。
どうしたら修正できるかどなたか教えていただけませんか？
404 ：Name_Not_Found：2009/11/23(月) 23:14:12 ID:???
エレガント（笑）じゃないが良ければ。
上書きしないで、追加で入れてくれ。

* html body #navi li{
float: left;
width: 160px;
height: 55px;
margin: 0px 0px 0px 0px;
padding:0px;
line-height:0;
position:relative;
top:-3px;
}

* html body #shadow{
background:url(images/img_shadow.jpg) no-repeat;
width:800px;
clear:both;
height:12px;
position:relative;
top:-3px;
}

* html body #middle{
width:800px;
background-image:url(images/img_middle.jpg);
background-repeat:repeat-y;
float:left;
height:auto;
position:relative;
top:-9px;
}
405 ：Name_Not_Found：2009/11/24(火) 13:48:19 ID:???
>>403
http://pc11.2ch.net/test/read.cgi/hp/1257361206/200
406 ：403：2009/11/24(火) 19:05:40 ID:vECGgEQG
>>405
ありがとうございます。全部見て試したんですが、知識不足なためか思った通りになりませんでした；

>>404
わざわざ書いてくださりありがとうございます。ばっちり決まりました！
407 ：Name_Not_Found：2009/11/27(金) 13:04:27 ID:???
font-familyに関して質問です
値に日本語のフォントを指定するときは"や'で囲むのを見ますが
英語のフォントも"や'で囲んで指定しても大丈夫ですか？

p.sample3 {font-family: "Impact,Charcoal"; }
408 ：Name_Not_Found：2009/11/27(金) 13:30:56 ID:???
予想の斜め上を行くなお前は
409 ：401：2009/11/27(金) 23:54:35 ID:???
>>402
css3はチェックしてなかった。
ありがとう。
410 ：Name_Not_Found：2009/11/28(土) 21:16:53 ID:???
質問があります。

親要素のボックスからはみ出すボックスがフロートの下に置かれる - CSSバグリスト
http://css-bug.jp/win/ie/ver6/0418/


<div style="width:200px; border:2px dashed red;">
<div style="float:left; width:100px; border:2px solid blue;">float</div>
<div style="margin-left:110px; width:100px; border:2px solid green;">後続</div>
</div>

これの回避策はないものでしょうか？

上記例では下のdivにwidth:100px; 指定を80pxなどにしても、”後続”の文字がaaaaaaaだったり、
折り返しの効かないもの(折り返すと不都合がでるもの)などの場合、どうしてもIE8だと
下側に回りこんでしまいます。

うまく2カラムレイアウトする方法はありませんか？

IE8でも再現しました。Firefoxだと右側にはみ出るので、これはこれでレイアウトは崩れずOKです。
IEをなんとかしたい・・・
411 ：Name_Not_Found：2009/11/28(土) 21:23:34 ID:???
>>410
３つめのdivにfloat入れてないからじゃないの
412 ：410：2009/11/28(土) 22:25:15 ID:???
>>411
ありがとうございます。

float:left;
border:2px solid green;
width: 80px;

のように3つ目に入れてみたのですが、長い文字があるとやはり駄目でした。

その場合、
white-space: pre-wrap;
word-wrap: break-word;

を付加して改行させてやることで対応できました。

しかし、この方法の場合、最初のdivがFirefoxでは何故かペッちゃんこになってしまいます。
その中のdivはちゃんと表示されるのですが・・・。
これはどうしたものでしょう？
413 ：410：2009/11/28(土) 22:35:16 ID:???
>>410
の3つ目のままでやる場合は、

margin-left:110px;
border:2px solid green;

width: auto;
_width:100%;
overflow: auto;

white-space: pre-wrap;
word-wrap: break-word;

を指定すると、うまくいったような感じになりました。

ただ、こちらの方法だと、中に複雑なブロックがあった場合に(tableの中にpre等)
同様にpreなどに、

white-space: pre-wrap;
word-wrap: break-word;

を仕込むのですが、折り返されず、スクロールバーがでてしまいます。
その対処として、スクロールバーがでないように以下のようにしたのですが、

overflow: hidden;

すると今度は、折り返されもせず画面はじで途切れてしまいます。

このレスの不都合に関しては、最低限のコードが再現できたら、また質問させてください。
414 ：410：2009/11/29(日) 08:44:10 ID:???
連投すいません。

>>414の方法の場合で解決する場合(floatを使わず、margin-leftを使う)ですが、
問題があるのは、<table>の中身が横に長い場合で、
どのブラウザでも<table>はoverflow: auto;やoverflow: scroll;が使えないようでしたので、

<div class="scroll-block" style="overflow: auto;">
　：
</div>

で囲んでやることで<table>そのものをはみ出る場合はスクロールさせることができるようになりました。
一応 >>410の件は大体解決した、ということでお願いいたします。

お手数お掛けいたしました。ありがとうございました！
415 ：Name_Not_Found：2009/11/29(日) 21:04:34 ID:???
全てのサイトの背景色だけを常に書き換えるようなユーザースタイルシートって無いですか？
416 ：Name_Not_Found：2009/11/30(月) 14:32:17 ID:???
・具体的にどう置き換えるのか
・前景色と同じ又は近い色だと困らないのか

body { background-color: #000 !important; }
417 ：Name_Not_Found：2009/11/30(月) 15:06:25 ID:???
CSSのセレクタである要素のテキストを指定することは
でいないでしょうか？

<div class="test">
aaa
</div>

.test text{
color: white;
}

よろしくお願いします。
418 ：Name_Not_Found：2009/11/30(月) 18:23:01 ID:???
>416
自分的に目に優しい色に変えて使ってます。
マジありがとう！
419 ：Name_Not_Found：2009/11/30(月) 18:38:33 ID:???
>>417
「テキストを指定」の意味がわからない

.test { color: white; }

これでテキストの文字色変わるよね
何が不十分なのか
420 ：Name_Not_Found：2009/11/30(月) 20:45:11 ID:???
>>417
JSでいうtextContentみたいなものを指定したいってことかな？
だったら残念だけど、CSSではそのようなものは用意されていないよ
421 ：Name_Not_Found：2009/12/01(火) 17:56:32 ID:mGdGVGu8
背景画像指定の方法について教えてください。

ヘッダー部分とフッター部分にそれぞれ背景画像を配置したいと思っています。
フッター部分は画面サイズに合わせて自動的に最下部に表示されるようにしたいです。
背景を2枚配置する方法を調べてみたのですが、うまくできません。

http://www.7key.jp/hp/_body/16.html

htmlとbodyにそれぞれ配置とあったのでやってみました。
html{
background-color: #fef9db;
background-image : url(images/all_bg_top.jpg);
background-position : top;
background-repeat: repeat-x;
}

BODY {
background-image : url(images/all_bg_bot.jpg);
background-repeat: repeat-x;
background-position : bottom;

margin : 0;
padding : 0;
}
すると、BODY側の背景画像だけが表示され、html側の背景画像が表示されません。
でも、BODY側の背景指定3行を削除すると、html側の背景画像が表示されます。(画像位置等は合っている)
どうにかして上下に背景を表示させたいのですが…
422 ：Name_Not_Found：2009/12/01(火) 18:10:41 ID:dE5V0m36
<span class="test">TEST</span>
.test { display:none; }

htmlと外部cssを別けていますspanの内容を見えなくしたいのですがCSSが反映されません
外部cssへのパスは問題ありません（他のセレクタとプロパティは効いてます)


以下のように書くと見えなくなるのを確認しています
<span class="test" style="display:none">TEST</span>


spanに外部スタイルシートからdisplay:noneを適用させるにはどうしたらよろしいでしょうか？
どなたかご教示お願い致します
423 ：Name_Not_Found：2009/12/01(火) 18:25:48 ID:dE5V0m36
自己解決しました
gechoエンジンをいじってたのが原因でした
424 ：Name_Not_Found：2009/12/04(金) 12:21:02 ID:???
span.18px-center{
font-size: 18px;
font:bold;
text-align:center;
}

これを、やったんですが、IE7で表示したら
センタリングされなくて、ダメでした。
そういうもんなんでしょうかね？
425 ：Name_Not_Found：2009/12/04(金) 12:55:17 ID:???
当然だろ。
426 ：424：2009/12/04(金) 13:06:11 ID:???
じゃあ、やっぱりXHTMLの方で
<div align="center">とかですか？
427 ：Name_Not_Found：2009/12/04(金) 14:32:16 ID:???
それでいいならいいんじゃない？
428 ：424：2009/12/04(金) 17:16:34 ID:???
CSSの方で、これも制御出来たらいいのにって思ったもので('ε`)
でも、別にそんなこだわるもんでもないですね。
先に進みます、ありがとうございます（＾＿＾ ）
429 ：Name_Not_Found：2009/12/04(金) 17:20:14 ID:???
そしてまた糞サイトが一つ増えるのであった
430 ：Name_Not_Found：2009/12/04(金) 17:25:43 ID:???
>>429
あ？オイ！！なんだとこら！！！タコこら！！！　タコこら！！！だったら教えろや！！！
　　　　＿＿＿ ∨
　 　 ／　　　　＼　　　　　　 ＿＿＿
　 ／ﾉし 　 u;　　＼　　　;／(＞)＾　ヽ＼;
　 |　⌒ 　　　　　　 )　;／ 　(＿　 （＜） ＼; 　　　／くっ、糞さ・・・い・・と・・・がぁ・・・・
　 | 　　、 　　　　　 );/　　 /rｪヾ__）⌒:::　 ヾ;　＜　　ふえ・・・・・・る・・・・の・・・・
　 |　　＾　 　　　　　| i　　 ｀⌒´-'´　　u;　　ﾉ;;　　＼ だ・・・った・・・・ぐるじい！！！
　 |　　　　　　 　 　|　＼ヽ　、　 ,　　 　　／; 　　　　　
　 |　　;j 　 　 　　　|／ ＼-^^ｎ ∠　　 ヾ、 　　　　　
　 ＼　　　　　　 ／ ! 、　/￣~ﾉ　＿＿/　i; 　　　　　
　 ／　　　　 　⌒ヽ ヽ二)　 /（⌒　　　 ノ 　　　　　　
431 ：Name_Not_Found：2009/12/04(金) 17:36:31 ID:078XY/C3
/*** comments name ***/

.ajaxcom li .ajaxcom_name {
margin: 0 0.3em 0 0;
font-weight: bold;
}

/*** comments comment ***/

.ajaxcom li .ajaxcom_content {
color: #002f00;
margin: 0 0.8em 0 5;
font-size: 15;
}
.ajaxcom li .ajaxcom_content a {
color: #000000;
text-decoration: none;
}
.ajaxcom li .ajaxcom_content a:hover {
color: #000000;
text-decoration: underline;
}

この/*** comments name ***/ 改行 /*** comments comment ***/といったように表示したいのですが、
どうすれば良いでしょうか？宜しくお願いしますm(_ _)m
432 ：Name_Not_Found：2009/12/04(金) 18:52:16 ID:???
意味がわからない。
433 ：Name_Not_Found：2009/12/04(金) 22:11:39 ID:???
>>428
marginでやれ
あとはググって

>>431
意味がわからない
434 ：Name_Not_Found：2009/12/05(土) 01:35:29 ID:???
>>433
ピコーンってキタ！　　 ￥
ありがとうございますｖ(^_^ ）
435 ：Name_Not_Found：2009/12/05(土) 16:17:17 ID:???
>431
/*** comments name ***/ <br> /*** comments comment ***/
436 ：Name_Not_Found：2009/12/05(土) 16:36:36 ID:???
.side{

line-height:18px;
padding-left:13px;
margin-bottom:5px;
text-align:left;
}
このsideだけを編集して、
<div class="side"><a href="xxx">testes</a></div>
として、リンクをリスト表示したいのですができますか？

仕様上、side内にliやulを使えないので困ってます。
437 ：Name_Not_Found：2009/12/05(土) 16:52:46 ID:???
.list{
display: list-item;
}

<div class="side">
<span class="list"><a href="xxx">testes1</a></span>
<span class="list"><a href="xxx">testes2</a></span>
<span class="list"><a href="xxx">testes3</a></span>
</div>

これでダメか？
438 ：Name_Not_Found：2009/12/06(日) 10:15:29 ID:???
>>437
そうするなら、わざわざ span など書かずに
.side a{
display: list-item;
}
じゃ、いかんのか？
439 ：Name_Not_Found：2009/12/09(水) 00:27:53 ID:TaJGIhNn
すまん
ttp://www.pentatoys.com/vote2/posts/view/7/?guid=ON

の
「Q.」の2文字まで:first-letter
が効いているのか誰かおしえてくれ。
眠れん。
440 ：Name_Not_Found：2009/12/09(水) 07:55:17 ID:???
first-letterはその名の通り最初の文字だけ
441 ：Name_Not_Found：2009/12/09(水) 08:08:03 ID:n+l7yKuM
Mozilla Firefox 3.5.5、Internet Explorer 8.0だと2文字まで:first-letterが効いてるようにみえるな
442 ：Name_Not_Found：2009/12/09(水) 11:26:50 ID:???
>>439
:first-letterって何に使うの？
443 ：Name_Not_Found：2009/12/09(水) 19:55:29 ID:???
ドロップキャップ

>>439
CSSの擬似要素のところ読んできたら眠れるんじゃない
444 ：439：2009/12/10(木) 00:15:40 ID:???
>>441
フガーッ。そういうことか。
ブラウザの仕様なら仕方あるまい。

>>443
見たけど。。。

「:first-letter 疑似要素の場合、一文字目に引用符などの区切り文字が来た場合は、二文字目も含むものと規定されています。」

これ違うよね。
445 ：Name_Not_Found：2009/12/10(木) 09:36:06 ID:???
>>444
-----
Some languages may have specific rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of a word, both letters should be considered within the :first-letter pseudo-element.
-----

これに該当する可能性もあるのでは
446 ：439：2009/12/13(日) 00:32:42 ID:???
>>445
なるほど。業務では使わない方がいいね。
あとブラウザ依存もあるし。

thanks
447 ：Name_Not_Found：2009/12/14(月) 13:56:37 ID:wA109Kob
marginセレクタってマイナスの数字を記述しても大丈夫なんだっけ？
一応マイナス方向に反映されてるみたいだけど・・・。

たとえば、自分なんか、はてなダイアリーでスタイルシートちょいちょいいじるんだけど、

div.hatena-body {
margin : 0 -20px 0 -20px;
}


みたいな感じ。
どっかのサイトでﾏｲﾅｽはできないことはないけど、オヌヌメしないみたいなことを、
見たような見てないような気がしたので。
448 ：Name_Not_Found：2009/12/14(月) 14:24:35 ID:???
>>447
おすすめされてなくても、ブラウザできちんと解釈されればいいのでは。
自分は仕事で普通に使ってます。
floatでうまく配置ができない時とか、marginでのマイナス設定が便利
449 ：Name_Not_Found：2009/12/15(火) 00:10:18 ID:???
仕様に悩んだら仕様を読むべし

-----
Negative values for margin properties are allowed, but there may be implementation-specific limits.
-----

http://www.w3.org/TR/CSS2/box.html#margin-properties

なお、paddingの場合はダメと書いてあるのでpaddingも見てくだしあ
450 ：Name_Not_Found：2009/12/16(水) 11:08:04 ID:???
>>447
可能だし別に悪い使い方ではない
ただ実装としてはIE系でマイナスマージン＋他プロパティと組み合わせてると
酷い崩れ方をすることが多いから気を付けろ
451 ：Name_Not_Found：2009/12/25(金) 00:54:21 ID:hrnsQvlU
FireFoxってScrollBarの設定も出来ないんだよな
クソだ
452 ：Name_Not_Found：2009/12/25(金) 02:28:32 ID:???
君もWEB製作に関わる人間の端くれならIEは捨て給え

みっともない
453 ：Name_Not_Found：2009/12/25(金) 05:37:31 ID:???
> FireFox
454 ：Name_Not_Found：2009/12/25(金) 08:43:19 ID:???
> ScrollBarの設定

をCSSでするのがクソだよ
455 ：Name_Not_Found：2009/12/25(金) 09:31:24 ID:SCljO+tR
はじめまして。お尋ねします。
下のような構造（JimdoというCMS？が吐き出すメニューです）の場合に
ドロップダウンメニューにする方法がありましたらお教えください。

<ul id="mainNav1">
<li><a href="/">Page 1</a></li>
<li><a href="/page-2/">Page 2</a></li>
<li>
<ul id="mainNav2">
<li><a href="/page-2/subpage-1/">Subpage 1</a></li>
<li><a href="/page-2/subpage-2/">Subpage 2</a></li>
</ul>
</li>
<li><a href="/page-3/">Page 3</a></li>
</ul>

https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/
によると、<ul#1><li><ul#2><li>のような構造の場合はできるのですが、
<ul#1><li></li><ul#2><li>...といったん区切られてしまった場合は
どうしていいものか分からないもので、ご教示いただければありがたいです。
456 ：Name_Not_Found：2009/12/25(金) 11:08:38 ID:???
> <ul#1><li></li><ul#2><li>

それだと（X）HTMLとして不正だしょ

> <ul#1><li><ul#2><li>のような構造の場合はできる

ならそのソースでもできる
終了タグが省略されてたって文書構造は同じ
457 ：Name_Not_Found：2009/12/25(金) 11:41:13 ID:???
>>455

ttp://onehackoranother.com/projects/jquery/droppy/
458 ：Name_Not_Found：2009/12/26(土) 06:27:24 ID:???
.htaccessの
SetEnvIf REFERER "" Lilith
Order Deny,Allow
Deny from all
Allow from env=Lilith
で自分のHP以外の画像直リンクを禁止しています
しかしcssの
background-image:url("****.gif");

とかcssで表記している画像は自分のHPからでも画像が表示できなくなってしまうのですが
これは何かcssの方で設定をいじる必要があるんでしょうか？

.htaccessの質問よりだと思いますが、.htaccess関連のスレが無かったのでこちらで質問してみました
459 ：Name_Not_Found：2009/12/26(土) 20:53:24 ID:???
スレチもいいところ
460 ：Name_Not_Found：2009/12/27(日) 06:57:27 ID:???
背景黒にしたら既存の文字が黒なので見にくい
レンタルwikiの黒背景にした部分だけ白文字とオレンジにしたいのですがどうしたらいいですか?

ここより質問にふさわしいスレがあったら誘導お願いします
461 ：Name_Not_Found：2009/12/28(月) 09:00:31 ID:???
>>458
スレ一覧から検索くらいしてくれ

.htaccess質問コーナー Part8
http://pc11.2ch.net/test/read.cgi/hp/1234182826/

>>460
黒背景にはどうやってしてるの
そこに前景色を変える処理も入れればいいのでは
462 ：Name_Not_Found：2010/01/01(金) 19:52:03 ID:???
CSSでサイト構築する上で
htmlの頭から終わりまで全部「container」等で
ヘッダー、本文、フッター
をくるんでしまうとフッター部分のHTMLを読み込むまで、
ブラウザによるレンダリングが遅くなる？のですが、この場合、遅くならないようにするには
どのように対処すればいいのでしょうか？
もしかしてスレチ？
463 ：Name_Not_Found：2010/01/03(日) 23:59:58 ID:???
「container」等で
ヘッダー、本文、フッター
をくるまない
464 ：Name_Not_Found：2010/01/04(月) 00:48:02 ID:???
ABCの3つのブロックがそれぞれ縦に並んでいる状況で
真ん中のBだけdisplayをblockとnoneで切り替えようとしていて
blockに指定した時、Cのブロックもつられて下に動いてしまいますが
Cのブロックの重なるようにBを表示させたい場合はどうすればいいでしょうか？
position:absolute+javascriptで座標取得は今回できれば使いたくないです。
465 ：Name_Not_Found：2010/01/04(月) 00:57:10 ID:???
そうですか。
じゃあ、使わないでやればいいんじゃないですか？
466 ：Name_Not_Found：2010/01/04(月) 03:22:47 ID:???
>>465
雑魚がしゃしゃりでんなよｗ
467 ：Name_Not_Found：2010/01/04(月) 18:19:35 ID:eamPBX99
http://hypernews.2chblog.jp/
上記のサイトのようにリンクの設定を，マウスを乗せると背景色が変わるようにしたいのですが･･･
どうすればいいのでしょうか？超初歩的な質問ですみません。
よろしければ↓のCSSを使って説明してください。

a:link { color: #000000; text-decoration:none;} /* 通常 */
a:active { color: #660066; text-decoration:blink;} /*実行中*/
a:visited { color: #660066; text-decoration:none;} /*訪問済*/
a:hover { color: #000000; text-decoration:blink;} /*マウス*/
468 ：Name_Not_Found：2010/01/04(月) 18:47:09 ID:???
>>467
background
469 ：Name_Not_Found：2010/01/04(月) 19:04:58 ID:???
>>467
firebugあたりでCSSのソース見てみたら？
470 ：Name_Not_Found：2010/01/04(月) 19:13:08 ID:???
>>468->>469アドバイスありがとうございます。
firebagなんて便利なアドオンがあったのですね。
CSS開いてみます。
471 ：Name_Not_Found：2010/01/10(日) 10:08:08 ID:???
いきなりですみません
今、HPの文字サイズを指定するのは、emとかが流行なんですかね？
emを単位にして文字サイズを指定した方がいいもんですかね？
472 ：Name_Not_Found：2010/01/10(日) 11:50:52 ID:???
あれはいいものだ
473 ：Name_Not_Found：2010/01/10(日) 12:38:20 ID:???
>>471
今は指定しないのが流行
解像度の違いが半端なく大きくなってるから
色んな環境に耐えられるようにするためには何も指定しないほうがいい
474 ：Name_Not_Found：2010/01/10(日) 13:05:08 ID:???
>>473
>今は指定しないのが流行
嘘教えんなよ
475 ：Name_Not_Found：2010/01/10(日) 20:47:12 ID:???
そうだな流行じゃないな
昔からの常識だな
476 ：Name_Not_Found：2010/01/10(日) 20:57:19 ID:???
それは推奨であって流行ではないと思うけど
サイズ指定していない大手サイトを見てみたいもんだ
477 ：Name_Not_Found：2010/01/11(月) 00:10:39 ID:???
君が良く見てる障害者用のページはそうなってるかもね
478 ：Name_Not_Found：2010/01/11(月) 06:56:25 ID:???
大手サイトという言い方がもうなんというか
479 ：Name_Not_Found：2010/01/11(月) 08:07:19 ID:???
大手というとテキストサイトのフォントいじりを思い出す
あれほどスレ違いなサイトもないな
480 ：Name_Not_Found：2010/01/11(月) 12:51:09 ID:???
俺も大手サイトっていうけどなー。
他に言い方あったっけ？
481 ：Name_Not_Found：2010/01/11(月) 14:22:20 ID:???
メジャーサイト？
482 ：Name_Not_Found：2010/01/11(月) 14:43:44 ID:???
大手と言ってもいろいろあるからなぁ
483 ：Name_Not_Found：2010/01/11(月) 15:53:09 ID:???
管理人の手が大きいだけとか
484 ：Name_Not_Found：2010/01/11(月) 16:32:02 ID:???
これまでテーブルレイアウト一辺倒でやってきて、CSSレイアウトはさっぱり分かりません。
すでに出来上がったレイアウトを修正する(しかもなんか無理やり)事はできますが、
一から自分でCSSレイアウトでページを作成する勉強をしたいと思っています。
参考にするのにオススメの書籍などありますでしょうか。レイアウトの概念や
記述の仕方などさっぱりなので、そこから丁寧に説明してくれる本を探しているのですが
近所の本屋ではホームページ作成関係の書籍自体があまりなく、アマゾンなどで
注文しようと思っているのですが…。
485 ：Name_Not_Found：2010/01/11(月) 19:07:46 ID:GtptSuwe
<br style="clear:both;" />

↑これを使ってフロートを解除したんですが、IE6＆8（7は未確認）だと1行分の改行スペースが
発生するのにfirefox3・opera9では改行スペースはできません。

これを統一方法はないでしょうか？
できればIEの改行スペースを小さくする方法があれば大変ありがたいです。
486 ：Name_Not_Found：2010/01/11(月) 21:10:22 ID:???
clearfix使えばいいじゃん
487 ：Name_Not_Found：2010/01/12(火) 00:40:41 ID:???
>>484
本はぶっちゃけやめたほうがいいよ
初心者向けだったら
ttp://az-store.nrym.org/archive/mynotes/lecture/
ここらへんが優しい
正しく詳しくなら
ttp://hp.vector.co.jp/authors/VA022006/css/
HTML→CSSへの移行なら
ttp://deztec.jp/lecture/rn/index.html
ここらへん

>>485
そもそもブロック要素でないものにclearはナシなんで違反物がどうなろうと知ったこっちゃない
ブロック要素を使ってclearしろ
488 ：Name_Not_Found：2010/01/12(火) 01:20:55 ID:Bp9FGRI4
firefoxとchromeでcssの挙動が違ったときってありますか？
489 ：Name_Not_Found：2010/01/12(火) 07:53:29 ID:???
>>488
そらもー、いっぱいあるよ
490 ：Name_Not_Found：2010/01/12(火) 08:46:43 ID:???
cssを編集しても、結果が反映されないことがあります。
たとえばbackground-colorを変えて、その後、何度もセーブを繰り返してたら
突然反映されたり。どうしてでしょう？
491 ：Name_Not_Found：2010/01/12(火) 08:52:48 ID:JxgA5Zy/
私のVISTAパソコンだとフォント（メイリオ？）が、XPより一回り大きいんですが、これはで仕様でしょうか？

皆さんはXP用とVISTA用でCSSのフォントサイズを変えていますか？
皆さんの対応策を教えて下さい。
492 ：Name_Not_Found：2010/01/12(火) 08:56:27 ID:???
>>490
キャッシュ

>>491
仕様。特に対策してないしする必要もない
493 ：Name_Not_Found：2010/01/12(火) 12:34:50 ID:???
>>491
フォントサイズ指定すんなでおｋ
494 ：484：2010/01/12(火) 21:39:00 ID:???
>>487
ありがとうございます！
お教えいただいたサイトを参考にしながら勉強していきたいと思います！
495 ：Name_Not_Found：2010/01/16(土) 03:59:24 ID:???
cssのフォント指定がIEだけに反映されることってありますか。

別にcssファイルを作りリンクで繋げていますが、フォント指定80％だけが火狐とoperaで反映されません。
ez-HTMLのレビューとIEだと文字サイズも反映されています。
スクロールバーの指定はIE以外でも反映されているのでファイル自体が認識されていないわけではないようです。

body,td{ font-size:80%;}
を含むファイルを
<link REL="stylesheet" type="text/css" HREF="filename.css">
で繋げています。
496 ：Name_Not_Found：2010/01/16(土) 19:58:00 ID:???
IEは適当なhtmlでもそれなりに反映してくれるからな
ieしか適用されないっていうと大体そんな場合だろ
497 ：Name_Not_Found：2010/01/16(土) 23:07:59 ID:???
ありますよ
498 ：Name_Not_Found：2010/01/17(日) 01:20:49 ID:???
>>495
IEでもフォントの大きさを無視する設定にすれば無視します
つーか全部指定すんな豆字厨
499 ：Name_Not_Found：2010/01/17(日) 08:35:53 ID:???
>>495です。
このフォント設定をはずすことも考えながらcssを書き直してみます。
みなさまどうもありがとうございました
500 ：Name_Not_Found：2010/01/18(月) 14:07:32 ID:???
cssを指定するのに
class="hoge"という属性をつけますが
class=""というのは規約とかに違反してますか？
501 ：Name_Not_Found：2010/01/18(月) 15:16:29 ID:???
はい
502 ：Name_Not_Found：2010/01/18(月) 15:21:39 ID:???
>>501
マジですかorz
503 ：Name_Not_Found：2010/01/18(月) 20:25:02 ID:???
classを空にしたい状況って何？
504 ：Name_Not_Found：2010/01/18(月) 20:30:32 ID:???
phpとかで
<div class="<?php hoge ?>"
とかしたいなーと
505 ：Name_Not_Found：2010/01/18(月) 21:12:46 ID:???
classつけなきゃいいだけじゃないの
506 ：Name_Not_Found：2010/01/18(月) 21:22:39 ID:???
まあ
<div <?php hoge ?>>
みたくしちゃえばいいんですけどね
507 ：Name_Not_Found：2010/01/18(月) 22:25:59 ID:???

<div class="<?php echo ($a) ? 'hoge' : 'hoge2' ?>">
508 ：Name_Not_Found：2010/01/18(月) 22:44:52 ID:???
解釈の順番っておもしろいよね
509 ：Name_Not_Found：2010/01/23(土) 02:16:24 ID:???
http://imepita.jp/20100123/077010
リストを横並びにしたとき、ネスケの6で画像周囲に1ピクセルずつ余白があいてしまいます。
ネスケ9・FireFoxでは下にのみ2ピクセル余白が…。どうしてこのようになってしまうのでしょうか。
どのように直すべきか、どなたかご教授願います。

CSSは下記のように書いています。
div#mainMenu {
　width: 800px;
　height: 40px ;
　background-color: #FFCCFF ;
　margin:0 ;
}

div#mainMenu ul li {
width:200px;
display: table-cell;
*display: inline;
*zoom: 1;
}

HTMLは
<div id="mainMenu">
<ul>
<li><img src="image/bnr_creature02-a02.gif" width="200" height="40" border="0" alt="ぶう" /></li>
<li><img src="image/bnr_creature02-a01.gif" width="200" height="40" border="0" alt="わん" /></li>
<li><img src="image/bnr_creature02-a04.gif" width="200" height="40" border="0" alt="ぱた" /></li>
<li><img src="image/bnr_creature02-a03.gif" width="200" height="40" border="0" alt="にゃあ" /></li></ul>
</div>
510 ：Name_Not_Found：2010/01/23(土) 10:17:52 ID:???
HTMLの改行を取り敢えずなくしてみ
511 ：Name_Not_Found：2010/01/23(土) 10:49:47 ID:???
>>510
すみません、駄目でした…。
512 ：Name_Not_Found：2010/01/23(土) 12:55:22 ID:???
ネスケのほうは知らないが、divのマージンを他の場所で殺してあると仮定したら
別にそのソースコピっても下に余白なんてできなかった
何か別の場所で間違えてるんだろう
513 ：Name_Not_Found：2010/01/23(土) 13:56:18 ID:???
>>512
下の余白はheight指定をしたら消えました。
結局ネスケ6での空白が埋まらなかったので、
float:left;とwidthを指定することで解消しました。
ありがとうございました。
514 ：Name_Not_Found：2010/01/23(土) 18:00:15 ID:???
ネスケ6なんか無視しろ
515 ：Name_Not_Found：2010/01/23(土) 18:32:27 ID:???
ネスケ6はCSS2.0だから充分現役
単にまだ間違えてるだけだろ
516 ：Name_Not_Found：2010/01/24(日) 18:15:03 ID:???
サポートもされないし、不具合も解消されないブラウザが現役とな
517 ：Name_Not_Found：2010/01/24(日) 20:51:16 ID:???
誰もブラウザか現役と言ってない件
518 ：Name_Not_Found：2010/01/25(月) 03:52:33 ID:???
>>515が言ってるとおもうけどｗ

主語がネスケ6で述語が現役だし
もしかしてネスケ知らないわけ・・・？
519 ：Name_Not_Found：2010/01/25(月) 09:34:00 ID:???
ちょっとまて
>>517をよーく見て欲しい
＞ブラウザ"か"現役
つまりORである
520 ：Name_Not_Found：2010/01/25(月) 11:50:50 ID:???
ネスケ6もどうでもいいし現役云々もどうでもいい
521 ：Name_Not_Found：2010/01/25(月) 12:25:24 ID:???
>>518
読解力ないな
522 ：Name_Not_Found：2010/01/25(月) 13:54:54 ID:???
515日本語よくわから無い
許して
523 ：Name_Not_Found：2010/01/25(月) 20:45:40 ID:???
自己紹介乙
524 ：Name_Not_Found：2010/01/25(月) 22:35:32 ID:???
IE7・8でdiv要素のmax-widthがきちんと表示されません
ググったらDOCTYPE宣言を入れないと駄目と書いてあったのですが、すでに↓を記述済みでした

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

またmetaタグでのレンダリングモード指定は行っていません
（試しにやってみましたが駄目でした）
max-widthの数値がem指定なのがよくないのかと、pxで試してみましたがこちらも駄目でした
火狐・opera・safari・chromeでは全てきちんと表示されているのですが
どうしたらIEでもmax-widthが意図通りに表示されるか教えてください
525 ：Name_Not_Found：2010/01/25(月) 22:52:02 ID:???
むしろどうしたらできくなるのかと
526 ：Name_Not_Found：2010/01/25(月) 22:55:44 ID:???
display:table-cellだとしたら仕様
527 ：524：2010/01/25(月) 23:05:24 ID:???
>525
#contents {text-align:center;}
#text {
max-width:45em;
width:80%;
line-height:150%;
margin:20px auto;
text-align:left;
}

とスタイルシートを記述して

<body>
<div id="contents">
<div id="text">
本文
</div>
</div>
</body>

という状況なのですが、なぜできていないのか自分でも分かりません
528 ：524：2010/01/25(月) 23:21:44 ID:???
すみません、自己解決しました
ローカルファイルは互換モードで表示されるんですねorz
529 ：Name_Not_Found：2010/01/26(火) 12:45:19 ID:???
>ローカルファイルは互換モードで表示されるんですね
・・・・・・・・・・・・・え？
530 ：Name_Not_Found：2010/01/27(水) 01:16:14 ID:???
>>528
え？どういうこと？
531 ：Name_Not_Found：2010/01/27(水) 22:37:50 ID:???
WinXPのFIrefox全般で以下のような不具合に悩まされています。

<select name="hoge" size="1" >
<option label="hoge" value="1">hoge</option>
<option label="hoge2" value="2">hoge2</option>
</select>

上記のようなHTMLでセレクトを選ぶ際に、下のほうの線(プルダウンした際の枠です)が途中で切れてしまいます。
MacのFFやその他のブラウザでは再現できません。

さらになぜかH1に対してmarginを与えると治ります。
絶対配置などは使っていないため、上下関係がおかしいという可能性はないと思います。

何か似たようなバグの報告は聞いたことありますか？
532 ：Name_Not_Found：2010/01/27(水) 22:43:42 ID:???
>>531
size="1"　は何のため？
533 ：531：2010/01/27(水) 22:49:48 ID:???
>>532
念のためでしたｗ 消しても解決しません...。
ちなみにバンダイのフォームですが、
ttps://soudan.bandai.co.jp/soudan/inq_fs_input.php

ここの最後の「続柄」のプルダウンも同じように下が切れていました。
他のサイトもちょこちょこあるようです。
534 ：Name_Not_Found：2010/01/27(水) 23:13:13 ID:???
ctrl + 0 押して見
535 ：Name_Not_Found：2010/01/29(金) 15:25:45 ID:???
>>531
ならん。お前の環境がおかしいだけだろうからスレチ
536 ：Name_Not_Found：2010/01/29(金) 20:33:58 ID:???
>>533
確かに、Ｗｉｎ版のFirefoxだけ下の線が消えるな。
WinのIE、Safari、Opera、MacのFirefox、Safari、Operaだと消えてない。
しかも、プルダウンボックスを上に展開した場合は上の線が消えてないし。
こりゃあ、Firefox側の問題じゃないかなぁ。
537 ：Name_Not_Found：2010/01/29(金) 23:02:42 ID:???
最新Win版Fxでならない
フォントの大きさでどうにかなるタイプのじゃないか
538 ：Name_Not_Found：2010/01/30(土) 18:24:20 ID:???
ブラウザで文字拡大したら線出たから多分そうだと思う
ちなみにWin/Fx3.5だけど消えてる
539 ：Name_Not_Found：2010/01/31(日) 05:16:52 ID:???
だからctrl + 0押せよ
540 ：Name_Not_Found：2010/01/31(日) 12:27:46 ID:???
つかスレチ
541 ：Name_Not_Found：2010/02/02(火) 04:26:24 ID:???
>>535
政治思想と物乞いの区別が付かないのが、チョウセンヒトモドキ
542 ：Name_Not_Found：2010/02/04(木) 00:42:59 ID:rA7HyTsK
質問です
横並びのリストを３つごとに折り返す様にするにはどうすればいいでしょうか？

1.○○○○○　2.○○○○○　3.○○○○○
4.○○○○○　5.○○○○○　6.○○○○○
543 ：Name_Not_Found：2010/02/04(木) 01:18:57 ID:???
3つづつ区切ればいいのです。
544 ：Name_Not_Found：2010/02/04(木) 01:23:29 ID:rA7HyTsK
初心者スレッドというのは初心者が回答するスレッドと言うことですか、分かりました。
545 ：Name_Not_Found：2010/02/04(木) 02:55:16 ID:???
まず服を脱ぎます
546 ：Name_Not_Found：2010/02/04(木) 03:01:25 ID:rA7HyTsK
>>545
パンツもですか？
547 ：Name_Not_Found：2010/02/04(木) 08:16:59 ID:synZfc34
>>542
JavaScriptとかじゃだめなの？
CSSでやるなら配列がソース上どうリストになってるかによると思う
それだけじゃエスパー回答しかできない
俺も初心者だけどなｗ
548 ：Name_Not_Found：2010/02/04(木) 13:20:53 ID:???
tableを使えばいいのです。
549 ：Name_Not_Found：2010/02/04(木) 14:38:42 ID:???
ol要素の幅を決めてli要素はfloatなりで浮動化でいいんでない
IE6は知らん
550 ：Name_Not_Found：2010/02/04(木) 19:34:50 ID:???
CSSって、結構たのしい ^_^
551 ：Name_Not_Found：2010/02/04(木) 21:55:48 ID:rA7HyTsK
>>549
出来ましたありがとうございました
552 ：Name_Not_Found：2010/02/05(金) 17:33:51 ID:???
div#left {width:50%;
float:left;
border:1px solid black;}

div#right {width:30%;
border:1px solid red;}

がfloatされません。なぜでしょうか？
553 ：552：2010/02/05(金) 17:38:13 ID:???
<html>
<head>
<title>a</title>

<style type="text/css">
<!--

div#left {width:50%;
float:left;
border:1px solid black;}

div#right {width:30%;
border:1px solid red;}

-->
</style>
</head>

<body>
<div id="left">
left
</div>

<div id="right">
right
</div>
</body>
</html>

これでなぜならないのでしょうか？
554 ：Name_Not_Found：2010/02/05(金) 18:03:16 ID:???
貴方の言う「floatされる」っていうのはどういう状態なの？
どうなれば貴方は満足で、現状どうなってて困ってるのさ？

というのは、俺の言葉や知識の範囲で言えば、
貴方のソースでfloatは「されている」ので。
555 ：Name_Not_Found：2010/02/05(金) 18:19:44 ID:???
<div id="right">
right
</div>
を右側に持ってきたいんです。
556 ：Name_Not_Found：2010/02/05(金) 18:45:28 ID:???
じゃあ<div id="right">にfloat:rightすればいいじゃん
557 ：Name_Not_Found：2010/02/05(金) 20:23:28 ID:???
ボックス幅よりウィンドウ幅が大きいときは真ん中寄せして
ボックス幅よりウィンドウ幅が小さいときはウィンドウの左に揃えるには
どうしたらいい？

ボックス幅＜ウィンドウ幅のとき
<-------ウィンドウ------->
|　　|<----ボックス---->|　　|

ボックス幅＞ウィンドウ幅のとき
<--ウィンドウ-->
|---ボックス---|
↑ではなくて
↓こうしたい
<--ウィンドウ-->
||<----ボックス-|
558 ：Name_Not_Found：2010/02/05(金) 21:44:48 ID:???
>>557
マージンで調節できひんの？
559 ：Name_Not_Found：2010/02/05(金) 23:05:46 ID:???
>>557
margin:auto;
560 ：Name_Not_Found：2010/02/05(金) 23:07:22 ID:???
>>557
センター配置する時のmargin auto値 | NICO News

http://nicoglass.jugem.jp/?eid=291461
561 ：Name_Not_Found：2010/02/06(土) 21:02:09 ID:???
>552
知らんけど、幅が4px分足りないからじゃね？
562 ：Name_Not_Found：2010/02/07(日) 21:18:56 ID:???
<div style="position:absolute; bottom:0;">として最下部に配置しようとすると、
div自身の幅が子孫の幅になってしまうようです、似たような事を解説している
サイトではwidth:100%としていますが、一部のブラウザで100%にするとスクロール
バーに領域を取られて、水平スクロールが出て見苦しい。
かといって、95%とか経験則で調整するのはダサいからイヤです。

position:absoluteで最下部に配置し、巾はposition:absoluteを指定しない時のように
ウィンドウ幅いっぱいにする方法は有りますか?
563 ：Name_Not_Found：2010/02/07(日) 21:35:17 ID:???
互換モードにでもなってるんじゃないの
564 ：562：2010/02/07(日) 22:03:20 ID:???
実際にやりたいのは↓こんなのです。
div#footerにwidth(100%とか)を設定すればウインドウ巾になります。
先ほど、一部のブラウザと書きましたが、100%ではIE8,Firefox,Operaともに
水平スクロールバーがでます。
div#footer {position:absolute; bottom:0;}を指定しなければもちろん出ません。
(が所望のウインドウ最下部への配置ができません)


<!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>
<style type="text/css">
div#footer {position:absolute; bottom:0;}
#footer { border-top: 1px solid;}
#footer p.left { float: left; }
#footer p.right { float: right;}
</style>
</head>
<body>
<div id="footer" >
<p class="left">
left
</p>
<p class="right">
right
</p>
</div>
</body>

</html>
565 ：Name_Not_Found：2010/02/07(日) 22:43:53 ID:???
>>564
Opera使いですが全体のmarginとpaddingを0にすればスクロール出ませんでした
566 ：562：2010/02/07(日) 23:19:07 ID:???
ありがとうございます。
html, body { margin:0; padding:0;}
div#footer {position:absolute; bottom:0; width:100%;}
で、opera, Firefox, IE8行けました。
567 ：Name_Not_Found：2010/02/09(火) 18:20:46 ID:???
ホームページビルダー14を使っている超初心者なのですが
基本的な事としてフォントなどの変更はhtmlタグを使うのではなくスタイルシートで変更すれば良いという事ですか？
568 ：Name_Not_Found：2010/02/09(火) 20:38:47 ID:???
そうしてください
569 ：Name_Not_Found：2010/02/09(火) 22:52:19 ID:LQIGulbE
どなたかお願いします。
ＣＳＳでの２段組、右メニューで左枠（コンテンツ）が右枠より高さが長くなるとフッダーを突き抜けてしまいます。
その分　右枠の高さを調整すれば回避できますが、普通に右枠、左枠のどちらが長くなってもフッダーを突き抜けなくなる様にするにはどうすればいいでしょうか？

css
#container{width:900px;text-align:center;margin:0px auto;}
#header{width:900px;padding:10px 0px 15px 0px;text-align:left;}
#hidari{float:left;width:200px;text-align:left;padding-top:10px;}
#migi{float:right;width:690px;margin-left:10px;text-align:left;padding-top:10px;}
#footer{clear:left;width:900px;padding:15px 0px;text-align:left;}

ｈｔｍｌ
<div id="container">
<div id="header">ヘッダー</div>
<div id="migi">右枠</div>
<div id="hidari">左枠</div>
<div id="footer">フッター</div>
</div>
570 ：Name_Not_Found：2010/02/09(火) 23:01:34 ID:???
footerに
clear:both;　（leftじゃなくて）
571 ：Name_Not_Found：2010/02/10(水) 23:06:40 ID:H9XIqozq
>>570
ありがとうございました。

更に>>569の右枠に>>542を入れると右枠の下を突き抜けてしまいます。
解決策は有るでしょうか？
572 ：Name_Not_Found：2010/02/11(木) 01:37:58 ID:???
幅指定
573 ：Name_Not_Found：2010/02/11(木) 13:27:40 ID:1V+LpeUy
>>572
やはりそれしか方法はありませんか

テーブルの中にリストを入れることで突き抜けてしまう事は回避できたのですが、それだと今度は指定したリストマークが表示されなくなってしまいます。
立て幅を指定する以外にはありませんか．．．．
574 ：Name_Not_Found：2010/02/11(木) 14:09:17 ID:???
リスト項目をdivで囲んでみた？
575 ：Name_Not_Found：2010/02/12(金) 01:28:13 ID:???
>>574
divで囲むことは既にやっています。

テーブルの中にリストを入れてリストマークはバックグラウンドで対応してみました。
どうやら「float: left」で横並びにしたものを三つ目で折り返すようにすること、2行目以降が突き出てしまうのは防げないようですね。

ありがとうございました。
576 ：Name_Not_Found：2010/02/12(金) 01:44:30 ID:???
>>575
liに幅指定してないのかな？
同じ現象を起こせないんだけどね・・・
577 ：Name_Not_Found：2010/02/12(金) 02:22:41 ID:???
＞どうやら「float: left」で横並びにしたものを三つ目で折り返すようにすること、2行目以降が突き出てしまうのは防げないようですね。
防げるけど提示されたソース以外に問題がある
578 ：Name_Not_Found：2010/02/13(土) 21:05:03 ID:???
バカには防げないでおｋ
579 ：Name_Not_Found：2010/02/23(火) 13:26:20 ID:???
リストマークと文の間を狭めるのにはどうすればいいでしょう

●　文章
●　文章
↑
リ
ス
ト
マ
│
ク
580 ：Name_Not_Found：2010/02/23(火) 13:38:39 ID:???
　
581 ：Name_Not_Found：2010/02/23(火) 16:13:34 ID:???
>>579
liのmargin-left
582 ：Name_Not_Found：2010/02/23(火) 19:31:06 ID:pugU+tbG
下記のように画像の右に文字列があった場合、
画像の下に文字列が回り込まないようにするには
どのようにstyleを指定すべきでしょうか？
文字列は左揃えにしようと考えています。

画像　文字列1
　　　　文字列2
　　　　文字列3
583 ：582：2010/02/23(火) 19:54:52 ID:pugU+tbG
書き忘れましたが、文字列1，2，3は箇条書きではなく、
1つの文章の続きです。
584 ：Name_Not_Found：2010/02/23(火) 20:04:24 ID:???
img #hoge{
float:left;
}

p #fuga{
display:block;
}

こんな感じかな
585 ：582：2010/02/23(火) 20:33:58 ID:???
>>584
ありがとうございます。色々試してみます。
586 ：Name_Not_Found：2010/02/23(火) 23:08:33 ID:???
divで囲った物をページの中央に表示させるにはどうすればいいでしょうか。

イメージ的にはこんな感じです。
<body>
<table border="0" width="100%" height="100%">
<tbody>
<tr>
<td valign="middle" align="center">
<table border="0" width="400" height="400" bgcolor="#75ff75">
<tbody>
<tr>
<td valign="top" align="left">コンテンツ</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
587 ：586：2010/02/23(火) 23:18:17 ID:n0aoVrL4
すいません、イメージがちょっと違ってしまいました
divで囲った物が縦横中央に表示させる様にしたいのですが、よろしくお願いします。
588 ：Name_Not_Found：2010/02/23(火) 23:32:12 ID:Ku671qeE
<img>
<div>
みたいな並びで<img><div>の間にスペースが空いて表示される場合
どうすればスペースが消えますか？
<img><br><div>とか<img>と<div>の間を空けずにコーディングする以外で
589 ：Name_Not_Found：2010/02/24(水) 00:10:21 ID:???
>>586
div {
position: relative;
top: 100px; /* 数値を調整 */
left: 100px; /* 数値を調整 */
}


>>588
img, div {
margin:0;
padding:0;
border:0;
}
590 ：Name_Not_Found：2010/02/24(水) 03:51:17 ID:???
>>588
imgをブロック要素で囲う
591 ：Name_Not_Found：2010/02/24(水) 20:30:40 ID:???
>>589
拡大で真ん中じゃなくならない？
>>586
divのサイズが決まっていれば簡単。
positionで50% 50%
marginで　それぞれを半分にしてマイナスつける。ググれば詳しく出てくるよ。
592 ：Name_Not_Found：2010/02/24(水) 21:08:04 ID:7PzZfjGu
http://tempnate.com/sozai_basic_imenu/basic_imenu_darkblue_log/
このテンプレートのような、メニューバーと背景を合わせるのはどうすればよいのでしょうか？
593 ：Name_Not_Found：2010/02/24(水) 21:37:28 ID:???
>>592
マウス乗せたときに背景色が変わるのをやりたいのかな？

li a {
display:block;
}

li a:hover {
background:#ffffff;
}
594 ：Name_Not_Found：2010/02/24(水) 21:45:42 ID:7PzZfjGu
>>593
そのテンプレートみたいにメニューバーと、壁紙（背景）を一直線上に表示させたいんです。
分かりにくくすみません。
595 ：Name_Not_Found：2010/02/24(水) 21:55:23 ID:???
>>594
背景は真っ白だと思うんだが、
壁紙ってどれのことを言ってるの？
596 ：Name_Not_Found：2010/02/25(木) 06:49:57 ID:???
>>595
ボタンの事じゃね？

div#menu ul{
text-align: center;
}

div#main li a{
background: #666666;
}

div#main li a:hover{
background: #FFFFFF;
}

とかどうよ？
597 ：Name_Not_Found：2010/02/25(木) 06:52:06 ID:RRVWdTan
>>595
横メニュバーを両端までのばしたいんです
（背景とメニュバーの位置を合わしたい）
598 ：Name_Not_Found：2010/02/25(木) 08:49:06 ID:???
>>597
一言言おう。説明がわかりづらい。
が、合ってるな。両端（ページの中央の情報が有る部分、以外の部分）に突き出ている青いバーは背景。
メニューバーの位置に合うように背景を作ってる。2200*1799のサイズで。
599 ：Name_Not_Found：2010/02/25(木) 12:01:37 ID:/UGTahjh
属性セレクタで表内のcolspanしているセルの表示を変えようと
td[colspan]{
　vertical-align=top;
}
としたのですが、すべてのセルに適用されてしまいます。
属性セレクタにrowspanやcolspanは使えないのですか？
600 ：Name_Not_Found：2010/02/25(木) 13:29:15 ID:???
超初心者な質問でもうしわけありませんが…

一般的な横並びナビゲーションバーを作ろうと思っています。
CSSを使ったナビゲーションバー作りの参考書やサイトを見てみますと、
背景画像の上にメニューの文字を表示させる、
メニューはリストで指定する、というものが一般的なようです。

メニューの文字も含んだ画像を並べた、リストを利用しない
ナビゲーションバーはやめたほうが良いのでしょうか？
601 ：Name_Not_Found：2010/02/25(木) 13:34:39 ID:???
width:480px;height:320pxとした背景色付きのdivタグがあり、そのdivタグ外にwidth='600px'position:absoluteとした画像があります
その画像をleft/topでdivの位置までもっていっているのですがもちろん右が120pxほどはみ出て表示されてしまいます
ちなみにJavaScriptとの兼ね合いでdivのや画像のサイズは変えれず、画像はdivの外からもってくるしかありません
これをはみ出さなくする、もしくははみ出した部分を消す方法を教えていただけないでしょうか？
602 ：Name_Not_Found：2010/02/25(木) 14:45:19 ID:???
>>600
htmlタグリファレンスを見れば分かると思うけれど、
ナビゲーションを表示するのにリストタグ以外に適切なタグが
現状（html5未満で）無いからリストタグを使っているんだよ。
やめた方がいいっていうか、リストタグを使わない方がおかしい。
603 ：Name_Not_Found：2010/02/25(木) 14:50:51 ID:???
>>601
.waku { position: relative; }

<div class="waku">
背景付きdiv（width: 480px; height:320px;）
横に付けたい画像（position: absolute; top: 0; left: 0;）
</div>
604 ：Name_Not_Found：2010/02/25(木) 16:52:54 ID:???
>>602
レスありがとうございます。
その「おかしい」というのは、「現状、リストタグを使わなければならない」のと
同義語ですか？

画像を並べてリンクをはってナビゲーションバーにする、というのは
間違っている、してはいけない、ということでしょうか？
605 ：Name_Not_Found：2010/02/25(木) 17:23:41 ID:???
>>604
何らかの原因で画像が読み込まれなかった場合や
画像を表示しない設定の環境で
ナビゲーションが見えなくなってもいいのかい？
606 ：Name_Not_Found：2010/02/25(木) 18:32:08 ID:???
>>605
ナビゲーション自体が見えなくなっても問題ない
サイトの作りである場合、別にリストを使ってナビゲーションバーを
つけなくてもいいということでしょうか？
607 ：Name_Not_Found：2010/02/25(木) 19:09:07 ID:qpRB5MYO
またナビバーの質問で恐縮ですが、
幅800pxに固定したページで、ナビバーをつけたいと思っています。
項目は6つで、一つの項目につき130pxの幅が必要です。
計算上は、780pxになるので幅は足りるはずですが、何故か二段に
なってしまいます。これを解決するにはどうしたらいいでしょうか？

本来は
■■■■■■　こう表示したいのに、

■■■■■□　こうなってしまう感じです。
■

リンクはリストで作成、float:leftで横に並べています。

また、私の参考書では、一つ一つの項目の幅がすべて同じである
場合にどうしたらいいかしかのっていないのですが、項目の文字数にあわせて
幅を変化させるにはどうしたらよいかも教えていただけると幸いです。
608 ：Name_Not_Found：2010/02/25(木) 19:23:21 ID:???
ボタンをテキスト表示するのは人間の為より検索エンジンの為じゃねえか？
609 ：Name_Not_Found：2010/02/25(木) 19:56:44 ID:???
>>606
> ナビゲーション自体が見えなくなっても問題ない
> サイトの作りである場合

なら最初からナビゲーションを置かなくていいじゃん。
貴方は我々回答者に何て言ってほしいの？

>>607
ソースと環境を提示。

エスパー回答するならmarginとかpaddingとかborderの影響。
または描画モード。

> 項目の文字数にあわせて
> 幅を変化させるにはどうしたらよいかも教えていただけると幸いです。

しかも1列じゃなきゃ駄目なの？
リスト系の要素でやってるならli要素の幅を1つ1つ指定するとか。
610 ：Name_Not_Found：2010/02/25(木) 20:09:55 ID:???
>>609
ありがとうございます。該当部分のソースはこんな感じです。
#navbar {
background-color:#660033;
width: 100%;
height: 30px;
}
#navbar ul {
margin:0;
padding:0;
list-style-type:none;
font-family: arial, halveltica, sans-serif;
font-size: 14px;
line-height:30px;
letter-spacing:1px;
}
#navbar li {
background-image:url(nav_bk1.gif);
float:left;
width:130px;
text-align:center;
margin:0;
padding:0;
border-right: solid 1px #ffffff
}
611 ：607：2010/02/25(木) 20:14:54 ID:qpRB5MYO
すみません、610＝607です。
環境は、私が動作を確認している環境ということでよろしいでしょうか？
Google Chromeです。
IE7ではきちんと表示されるようです…
612 ：607：2010/02/25(木) 20:28:46 ID:qpRB5MYO
あ、610のほうは、場所を指定していなかったのですが
#navbar の中にposition:absolute;　top:100px;　をいれて
場所をしていして表示させてみたら、IE7でも表示が崩れました。
一列に全部リストの中身ははいっているのですが、なぜか
二列目ができてしまい、中身のないブロックが並んでしまいます。

■■■■■■
□□□□□　　　こんな感じです（白い四角はリストしたリンクのない、空ブロック）

しかも、二列目の途中までです。どこを直したらいいのかよろしくお願いします…
613 ：Name_Not_Found：2010/02/26(金) 12:54:04 ID:???
下の図のようにテーブルにスクロールバーをつけました。
しかし、これだとtbodyに1行しかないときに1行が100pxに広がってしまいます。
1行のheightは文字数によって変わるので固定にしたくありません。
テーブルにスクロールバーをつけるときの見た目が良い方法はありませんか？
┌────────┬────────┐
｜ テーブルヘッダ１　｜ テーブルヘッダ２　｜
├────────┼───────┬┤
｜□□□□□□□　 ｜■■■■■■■｜｜
｜ 　 　 　 　　 　 　 　 ｜ 　 　 　 　　 　 　 ｜｜←テーブルヘッダは固定で
｜ 　 　 　 　　 　 　 　 ｜ 　 　 　 　　 　 　 ｜｜　　tbody内のみ縦スクロール
｜ 　 　 　 　　 　 　 　 ｜ 　 　 　 　　 　 　 ｜｜
├────────┴───────┴┤
└─────────────────┘
　↑テーブル幅がウィンドウに収まらないときに横スクロール
<div style="width:200px;overflow-x:scroll;">
　<table>
　　<thead>
　　　<tr>
　　　　<th>テーブルヘッダ１</th>
　　　　<th>テーブルヘッダ２</th>
　　　</tr>
　　</thead>
　　<tbody style="height:100px;overflow-x:hidden;overflow-y:scroll;">
　　　<tr>
　　　　<td>□□□□□□□</td>
　　　　<td>■■■■■■■</td>
　　　</tr>
　　　・・・・・・
　　</tbody>
　</table>
</div>
614 ：Name_Not_Found：2010/02/26(金) 13:57:12 ID:???
max-heightってtableじゃダメだっけ？
overflowって大きさを指定して初めて有効に使えるんじゃないのって思った。
というかtable使わない方がいい気がするけどなぁ
615 ：Name_Not_Found：2010/02/26(金) 15:28:41 ID:???
ケータイなんでやりたいこと見えないんで応えられないが
テーブルセルにoverflowは色んなブラウザでバグが多いからやめとけ
とは言っとく
616 ：Name_Not_Found：2010/02/27(土) 05:33:11 ID:???
p {
text-align:center;
font-size:90%;
margin:30px;
padding:0;
background:#f5f5f5;
border:1px solid #ccc;
}

こういうふうに、複数の指示を書くときに
正しい書き順ってありますか？

今は、先の要素を打ち消したりする間違いなどがない限り
ほとんど考えなしに付け足していく書き方をしているので
クラスごとに指示の順番がバラバラになることが多く
そろそろ綺麗に書けるようにしたいと思っています。
617 ：Name_Not_Found：2010/02/27(土) 08:35:04 ID:???
>>616
正しい書き順が無いから自分で決めている人が多い。
css　書き順でぐぐって、他の人の書き順を参考にするのもいいかもね。
618 ：Name_Not_Found：2010/02/27(土) 14:49:55 ID:???
自分の場合、全体レイアウトに密接に絡む指定である

float または clear
width
height
margin
padding
border

は、常時この順で書くことにしてます。他に影響が
及びにくい装飾系のスタイルはその下に、って感じ。


こういうフォーマット統一に加えて、積極的に
importとコメント使って可読性を上げてゆかないと、
そのCSSコーディング業務を人に引き継ぐときに
自分か相手かWebデザインのどれかが死ぬ。
619 ：Name_Not_Found：2010/02/28(日) 20:36:02 ID:???
cssファイルって改行・タブ・半角スペース・全角スペースのうちどれが正式に無視（＝どれだけつづいていても大丈夫）されるんでしょうか？
前半3つは入れても大丈夫だったんですが、ブラウザが解釈してくれてるのか仕様で大丈夫なのか分からないのです。
cssファイル　スペースでぐぐっても見当違いノものしかヒットしなくて。
620 ：m：2010/02/28(日) 21:06:06 ID:???
全角スペース以外は全部大丈夫です。W3CがCSSの基本文法を
定めた仕様書で、トークン化（字句解析）規則に関する項目：

http://www.w3.org/TR/CSS2/syndata.html#tokenization

を見ると、CSS文法における区切り子として使える文字集合が
「Token S」として定義されています。

The token S in the grammar above stands for white space.
Only the characters "space" (U+0020), "tab" (U+0009),
"line feed" (U+000A), "carriage return" (U+000D), and
"form feed" (U+000C) can occur in white space.
Other space-like characters, such as "em-space" (U+2003)
and "ideographic space" (U+3000), are never part of white space.

この「Token S」=white spaceに相当するのは、半角空白文字・
タブ・改行（LF, CR, FF）であり、他の「空白風の」文字
（日本語の全角空白文字もこれに含まれるでしょう）は
white spaceには妥当しない、と明記されています。
伝統的なプログラミング言語における「white space」の範囲と
同じですね。

なんにせよ、不安があればW3CのCSS Validatorでチェックして
みればよいとおもいます。あれをエラーなく通ってるのに
表示が崩れるようなら、それはブラウザ側に問題があるという
ことになります。
621 ：Name_Not_Found：2010/02/28(日) 21:21:58 ID:???
mさんありがとうございます。
安心してスペースが使えます。
622 ：Name_Not_Found：2010/03/01(月) 12:25:05 ID:???
>>616
リンクの疑似クラスだけ
記述順がある。
先
a:link
a:visited
a:hover
a:active
後

「未読＞既読＞乗せる＞クリック」の順。
リンクは最初は未読が基本、
リンクに対するマウス動作は乗せてからクリック。
623 ：Name_Not_Found：2010/03/05(金) 02:20:29 ID:???
>>622
勉強なりましたm(_ _)m
624 ：Name_Not_Found：2010/03/06(土) 20:14:03 ID:???
Ulの●をLiの範囲内に入れる方法ってありますか？

625 ：Name_Not_Found：2010/03/06(土) 20:36:33 ID:???
>>624
入れ子にすれば
626 ：Name_Not_Found：2010/03/06(土) 20:50:20 ID:???
>>624
何言ってるかわかんない
627 ：m：2010/03/06(土) 21:03:01 ID:???
>>624
> Ulの●をLiの範囲内に入れる方法ってありますか？

list-style-position: inside; という指定があるにはあります。
お好みの表示になってるかどうかわかりませんが。
628 ：Name_Not_Found：2010/03/07(日) 01:30:11 ID:???
margin
629 ：Name_Not_Found：2010/03/07(日) 19:58:03 ID:???
font-family:normal;
ってサイトを時々見るけど
どういう意味？
630 ：m：2010/03/07(日) 20:58:54 ID:???
正規のジェネリック属性にはnormalは入っていないのですが、
実装によってserifと同値として認識するようですね。
少なくともFireFoxとSafariではそれっぽい感じです。
631 ：Name_Not_Found：2010/03/07(日) 23:04:23 ID:???
>>630
ありがとう
Opera もそんな感じで、どうなってるんだろうと思った

serif より強めの感じがする
ua 側の css を当てる時も normal の方が効果があるようで
632 ：Name_Not_Found：2010/03/12(金) 14:57:35 ID:kFF6fKt6
氏名を羅列する場合に氏名の途中ではなく「、」で改行できるようにしたい
ので氏名+「、」を囲って white-space:nowrap; としていたのですが、

たまに外国人などめちゃくちゃ長い名前の方がいてボックスをはみ出してし
まう場合があります。

最初にまず「、」が改行されるようにして、しょうがない場合は文字列の途中
でも改行していいといったCSSの書き方で良い方法はないでしょうか？
(IE8, Firefox, Chrome)

宜しくお願い致します。
633 ：Name_Not_Found：2010/03/12(金) 15:08:02 ID:???
wbr
634 ：Name_Not_Found：2010/03/12(金) 23:07:37 ID:???
×>>633
○&shy;

>>632
何も指定しなけりゃいいんじゃね？
635 ：634：2010/03/12(金) 23:12:42 ID:???
勘違いごめんこ
636 ：Name_Not_Found：2010/03/12(金) 23:22:43 ID:???
>>632
white-space:nowrap;
↓
display:inline-block;

とかどう？
637 ：Name_Not_Found：2010/03/14(日) 01:07:29 ID:???
>>632

まず名前を以下のリストにぶち込む
<ul>
<li><span>なまえほげ１</span></li>
<li><span>なまえほげ２</span></li>
<li><span>なまえほげ３</span></li>
…
</ul>

で、liにdisplay:inline;
spanにwhite-space:nowrap;
638 ：Name_Not_Found：2010/03/16(火) 01:09:32 ID:xx+PnQ2Z
* {
margin: 0px;
padding: 0px;
}
body {
font-size: small;
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
line-height: 1.6em;
background-color: #000000;
text-align:center;
}

#container {
margin:10px auto;
width:800px;
text-align:left;
color: #000000;
background-color: #ffffff;
}

という感じで（ほかの細かいCSSは省略）ウェブショップのCSSを制作中なのですが、
firefoxやgooglechromeだとばっちりなんですが、なぜかIE系だと#containerのmargin:10pxが反映されません。
コンテナボックスの上下にちょっと空白がほしいので、どなたかわかる方がおりましたら回答お願い致します。
639 ：Name_Not_Found：2010/03/16(火) 01:22:24 ID:???
すぐにためせるそーす
640 ：Name_Not_Found：2010/03/16(火) 05:41:47 ID:???
bodyの直下ならbodyにpaddingすればよい、とにかく親要素に
containerのmarginもbodyのpaddingも意味は同じだ
641 ：Name_Not_Found：2010/03/16(火) 07:53:32 ID:???
>>640
無事出来ました！本当にありがとうございました！！！！！！！
marginとpaddingは奥が深いですね・・・。
まだまだよくわかっておりません。
642 ：Name_Not_Found：2010/03/18(木) 19:36:07 ID:dqpDX3Eo
http://air-life.info/weblog/wp-content/uploads/2009/11/fixedTable.html
↑のtableのヘッダとフッタの固定で、ヘッダ部を
①から②のように変更すると、表示がおかしくなってしまいます。

①変更前<元のソース>
<thead>
<tr>
<td width="18%">ＩＤ</td>
<td width="38%">名称</td>

<td width="28%">値段</td>
<td width="16%">在庫</td>
</tr>
</thead>

↓

②変更後
<thead>
<tr>
<td width="18%" rowspan="2">ＩＤ</td>
<td width="38%" rowspan="2">名称</td>
<td width="28%">値段</td>
<td width="16%">在庫</td>
</tr>
<tr>
<td>値段２</td>
<td>在庫２</td>
</tr>
</thead>

原因と解決策をどなたか教えてくださいm(__)m
643 ：Name_Not_Found：2010/03/18(木) 19:40:30 ID:???
css関係ないよねそれ
644 ：Name_Not_Found：2010/03/19(金) 09:33:03 ID:n/0BCUXD
スレタイ読めない香具師は氏ね
645 ：Name_Not_Found：2010/03/21(日) 01:41:28 ID:YHjMR1Zm
スタイルシートで擬似フレームを再現するというのがありますが
あれって動的にhtmlを出力するような場合に有効なんでしょうか？

静的なhtmlを表示させるのには向きません？
646 ：Name_Not_Found：2010/03/21(日) 06:08:35 ID:???
なんでそう思ったの？
647 ：Name_Not_Found：2010/03/21(日) 06:21:25 ID:YHjMR1Zm
>>646
なんとなく・・・

今勉強中でcssで擬似フレームを再現してるサンプルを見ると
動的にhtmlを作る際にcssと関連が付くようにするのは簡単だけど
静的だと雛形作ってそれをコピーするしかないのかなあ・・・と思って
648 ：Name_Not_Found：2010/03/21(日) 13:09:43 ID:???
お前がそう思うならそうなんだろう
649 ：m：2010/03/21(日) 13:41:54 ID:???
>>645
framesetでナビゲーションとコンテンツを分けるときには
1つのナビ用htmlと複数のコンテンツhtmlは自然に分離するけど
cssマルチカラムではナビ用のコードとコンテンツ用のコードが
1つのhtmlの中に繰り込まれて、ナビ部分を修正するときに
全部触らなきゃいけない…ということですよね。

対処法としては、一般的には：

1・ナビはserver side includeで読み込む（shtml>ssi による分離）
2・ナビはphpなどで読み込む（php>incによる分離）

のどちらかになるのではないでしょうか。何をstaticと呼ぶか
にもよりますが、1はただパーツを読むだけなので、「静的」の
範疇に入ると思います。

いま新規にページ作るとしたら、framesetにはいろいろと
問題があるので、上記2つのどちらかの手段でframesetを
回避したほうがいいと思います。たとえば検索エンジン経由で
末端コンテンツに到達したときにフレームが外れて
ナビゲーションが表示されないとか、SEO的にかなり不利とか、
印刷やモバイル環境などの多彩なメディアタイプに対する
応用性が低いとかですね。
650 ：Name_Not_Found：2010/03/21(日) 13:53:09 ID:???
普通にブラウジングしてても、フレームは邪魔だけどな

別にメニューの内容ころころ変えないなら、>>649の設定が使えないサーバーでもいいと思う
あとプロジェクト管理ソフト使ってみるとか
651 ：Name_Not_Found：2010/03/21(日) 15:12:30 ID:???
① ３００ｋｂの画像をCSSに置いといて５ページで使い回す
②各８０kbの画像を５ページでそれぞれ１枚ずつ表示させる
見る側にとってどっちのほうが望ましいでしょうか
652 ：Name_Not_Found：2010/03/21(日) 15:16:08 ID:???
＞CSSに置いといて
どういう表現だよｗ
googleは1の方式だな。
ほとんどの人が5ページすべて見るなら1でもいいんじゃね。保存する側としては厄介極まりないがｗ
653 ：Name_Not_Found：2010/03/21(日) 15:40:42 ID:???
>>652
ありがとう、背景画像なので保存の問題はないと思う
654 ：Name_Not_Found：2010/03/21(日) 21:34:57 ID:???
背景画像だろうと、保存したい奴は保存するだろうが！
655 ：Name_Not_Found：2010/03/21(日) 22:30:32 ID:???
当サイトは右クリック禁止です＾＾
656 ：Name_Not_Found：2010/03/21(日) 22:32:50 ID:YHjMR1Zm
完全に保存できなくするのは無理だよな
657 ：Name_Not_Found：2010/03/21(日) 23:08:24 ID:???
俺の右クリックは誰にも邪魔はさせない
658 ：Name_Not_Found：2010/03/21(日) 23:38:09 ID:IAWrqMxw
>>657
tmpフォルダ内に保存されるだろ
659 ：Name_Not_Found：2010/03/22(月) 07:12:03 ID:???
質問です。

<div style="border-top: solid 1px #cccccc; border-bottom: solid 1px #cccccc; padding: 7px;">
　<div style="float: left; text-align: left;">文字</div>
　<div style="float: right; text-align: right;">文字</div>
</div>

こうすると線が文字と被ってしまうのです
float: 使うとその部分が無視されている感じになってしまいます。
どのようにしたらいいでしょうか?
660 ：m：2010/03/22(月) 11:19:24 ID:???
>>659
floatされた要素の親ボックスは、高さを計算する時に
そのfloat要素を除外します。言い換えると、中身に
「floatされたボックス要素」しかないボックス要素は
高さがゼロになります。これはCSSデザインの最初の壁かも
しれませんので、いろいろなサイトを見て廻って
じっくり勉強してください。たとえばこれとか。

基礎編5 フロートの性質
http://www.geocities.jp/multi_column/float/05.html

とはいえ、マルチカラムデザインをCSSでやろうとすると
「中身全部がfloatされているボックス」というのは頻出します。
そういうときに発生する問題（たとえばborderやbackgroundを
中身を包含するように表示させたいのに、期待通りの表示に
ならない、とか）をお手軽に解決したい場合は、いわゆる
clearfixという手法を使うとよいかと思います。

clearfixでfloatを解除 | d-spica
http://blog.d-spica.com/entry/070307clearfix.html
661 ：Name_Not_Found：2010/03/22(月) 11:30:45 ID:???
無視しないでとお願いする
662 ：Name_Not_Found：2010/03/22(月) 11:34:52 ID:???
右クリック禁止を禁止している
663 ：Name_Not_Found：2010/03/22(月) 14:10:01 ID:???
IEが滅びれば万事解決するってことでおk？
664 ：659：2010/03/22(月) 21:47:32 ID:???
>>660
詳しくありがとうございます
大変参考になりました。

>>663
一応firefox3.6 で>>659みたいになります。
665 ：Name_Not_Found：2010/03/23(火) 15:38:12 ID:???
IEってなんでこんな邪魔なブラウザになってしまったんだろうね
666 ：Name_Not_Found：2010/03/23(火) 16:15:07 ID:???
IEって邪魔だよな、と思う人々によってまともなブラウザが作られるようになったから
667 ：Name_Not_Found：2010/03/23(火) 16:16:24 ID:???
うむぅ
必要悪ということか
しかし、それにしても邪魔だ
668 ：Name_Not_Found：2010/03/24(水) 10:12:51 ID:rRBiztpl
いや、必要悪はちょっと意味がずれてる希ガス
669 ：Name_Not_Found：2010/03/24(水) 12:17:21 ID:???
負の遺産
670 ：Name_Not_Found：2010/03/24(水) 13:01:42 ID:qlkj5SZG
見出しと文章、画像が複数組み合わさったページを作りたいのですが

<h1>見出し</h1>
<p><img src="01.jpg">文章01</p>
<p><img src="02.jpg">文章02</p>

として、外部cssファイルには
p{
font-size: 16px;
margin-bottom:16px;
}

としているのですが、
上記の様に画像も<p>要素で囲んだ場合、
1個めの<p>要素と2個目の<p>要素の間に空白ができません。
画像のサイズは縦200pxほどで、
文章は画像の縦px数に満たない長さの文章です。

画像をい入れずに
<h1>見出し</h1>
<p>文章01</p>
<p>文章02</p>

とした場合にはきちんと16px分の空白ができます。

どのようにしたら画像を入れた状態でもp要素同士の間に空白があくでしょうか？
<p>要素をそれぞれ<div>要素でmargin-bottomを指定して囲んであげなければいけないのでしょうか？
671 ：670：2010/03/24(水) 13:07:45 ID:???
補足です。
以下のようなレイアウトにしたいのですが
（■全てで=01.jpg、□全てで=02.jpg）


見出し
■■■文章01
■■■
■■■

□□□文章02
□□□
□□□


以下の様になってしまいます。

見出し
■■■文章01
■■■
■■■
□□□文章02
□□□
□□□
672 ：Name_Not_Found：2010/03/24(水) 13:36:15 ID:???
再現できるソースを貼っておくれ
673 ：670：2010/03/24(水) 15:18:38 ID:???
htmlの記述


<h1>見出し</h1>
<p><img src="01.jpg" width="150" height="200" class="left" />文章01</p>
<p><img src="02.jpg" width="150" height="200" class="left" />文章02</p>


以下外部CSS

p{
font-size: 16px;
margin-bottom:16px;
clear:both;
}

img.left{
float:left;
}

該当しそうなソースは以上です。
どうやらfloatの入れ子となり、CSS2.0の仕様として
<p>要素のマージンが画像には効かないのですね。
調べるとclearfix等を使えと書いてありましたが、やはりみなさん
そのような特別な事をしてらっしゃるのでしょうか？
674 ：Name_Not_Found：2010/03/24(水) 15:29:27 ID:???
答え出てるじゃん。
675 ：m：2010/03/24(水) 17:29:25 ID:???
>>673
画像の縦サイズが本文流し込みの縦幅より長くなる可能性が
あるなら，レンダリングの安定のためにclearfixする人が
多いと思います。imgのmargin-bottomをつけてしまうと
今度は画像が包含ボックス（この場合はp）に納まる場合に
回り込んだ文字と画像の間に大きなマージンができてしまいますから。

異論はあるかもしれませんが，CSSのfloat属性は
clearfixと組み合わせることで，はじめて
視覚レイアウト要素として安定的に活用できる気がします。
676 ：670：2010/03/25(木) 12:38:18 ID:???
>>674
>>675
なるほど、了解しました。
clearfixで対処することにします。
どうもありがとうございあｍした。
677 ：Name_Not_Found：2010/03/25(木) 18:15:44 ID:???
ページの横幅はどれくらいにするのがいいのでしょうか？
678 ：Name_Not_Found：2010/03/25(木) 18:55:41 ID:???
単位にem使って可変
679 ：Name_Not_Found：2010/03/25(木) 19:45:30 ID:???
>>679
横レスするが
どういたしまあｍして ＾＾
680 ：Name_Not_Found：2010/03/25(木) 20:51:25 ID:???
何が起きているんだ…！
681 ：Name_Not_Found：2010/03/26(金) 00:19:39 ID:???
>>678
ダサ
682 ：Name_Not_Found：2010/03/26(金) 01:36:58 ID:???
JScriptでウィンドウサイズやら何もかも完璧に固定してしまうのがCOOL！
683 ：Name_Not_Found：2010/03/26(金) 20:32:41 ID:???
なんだかんだいって幅固定がほとんどだよな。
幅可変でもコンテンツ部分がびよーんと伸びるだけだったり。
リキッドレイアウトのきれいなサイトってある？
684 ：Name_Not_Found：2010/03/26(金) 20:49:40 ID:???
画像満載のサイトなら難しいかもしれんね
685 ：Name_Not_Found：2010/03/26(金) 21:02:18 ID:???
どっかで「まともなリキッドレイアウトはamazonだけだ！（ｷﾘｯ」
という主張を読んだような気はする
686 ：Name_Not_Found：2010/03/26(金) 21:08:22 ID:???
いちおう俺のサイトも（キリツ
687 ：Name_Not_Found：2010/03/27(土) 01:06:12 ID:???
確かにamazonぐえらいだな
688 ：Name_Not_Found：2010/03/27(土) 01:40:35 ID:???
amazonも>>683が言うところのコンテンツ部分がびよーんタイプか
リキッドレイアウトっていうのは全カラムが可変幅なのかな？
だとしたら例え存在したとしてもすげー見づらいと思うんだけど
689 ：Name_Not_Found：2010/03/27(土) 01:44:04 ID:???
ネットショップとかwikiぐらいじゃね可変なんて。
それ以外はあまり向かないだろ
690 ：Name_Not_Found：2010/03/27(土) 04:32:14 ID:???
ｗ3ｃ.おるぐ だな
691 ：Name_Not_Found：2010/03/27(土) 08:56:55 ID:???
>>690
灯台下暗しとはこのことか…！
692 ：Name_Not_Found：2010/03/27(土) 10:09:54 ID:???
全体がびょんびょんするのってこんなんか
http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
でも実際のサイトではあまり見ないな。
693 ：Name_Not_Found：2010/03/27(土) 10:13:54 ID:???
同じページで見つけた。
http://matthewjamestaylor.com/blog/floating-boxes-css-layout.htm
こういうのが真のwリキッドかな。
でも実際のサイトでは(ry
694 ：Name_Not_Found：2010/03/27(土) 11:05:33 ID:???
ピクセル指定の部分だけ固定して他を拡大縮小しても崩れないってこと？
695 ：Name_Not_Found：2010/03/27(土) 12:21:37 ID:???
アマゾンとかのネットショップなら商品項目を増やせるから横幅を広げてるのはわかるけど。
それ以外のサイトでリキッドにする利点てあるか？
696 ：Name_Not_Found：2010/03/27(土) 12:24:50 ID:???
下手に横幅大きくとると情報が分散するからな
697 ：Name_Not_Found：2010/03/28(日) 17:39:06 ID:???
http://www.webdesignerdepot.com/
このサイトのように上に大きい画像を背景として出す場合
一度にその大きさを指定しているのでしょうか？
698 ：Name_Not_Found：2010/03/28(日) 17:44:00 ID:???
>>697
ソースみてみればいいんじゃね？
webの良さというか駄目さってcssとjsが丸見えなんだよね
ヘッダーのところにどこから取ってくるかかいてあるだろうし
699 ：Name_Not_Found：2010/03/29(月) 16:12:03 ID:???
横幅が最大80pxの画像があります。横幅は70や55、80pxとバラバラなので
画像の方は拡大せずに、80px未満のものには余白をつけて80にして綺麗に表示したいのですが、どうしたらよいでしょうか？
700 ：m：2010/03/29(月) 16:14:49 ID:???
jsを絡めないでやるとすると，
画像に全部でdivくくって
そっちをサイズ固定にするとか…？
701 ：699：2010/03/29(月) 17:08:02 ID:???
>>700
ありがとうございます。
.thumb {
width:80px;
}

で
<div class="thumb"><img src="http://..." alt="..." /></div>

これでよいのでしょうか？
702 ：Name_Not_Found：2010/03/29(月) 17:19:52 ID:???
試せばすぐわかるのになぜ試さない。
やり方違ってても結果が望みどおりならそれでいいじゃないか。バグとかなら別だが今回は違うし。
703 ：699：2010/03/29(月) 17:47:50 ID:???
すいません。。
width:80pxでやると、画像が80pxに拡大されてしまいます。
ボックスを80pxにしたいのですが、どうすればよいでしょうか？
704 ：Name_Not_Found：2010/03/29(月) 19:58:47 ID:???
。が二個あるから教えたくないな（･∀･ ）ﾆﾔﾆﾔ
705 ：699：2010/03/29(月) 20:12:34 ID:???
>>704
自己解決しました！
（･∀･ ）ﾆﾔﾆﾔ
706 ：Name_Not_Found：2010/03/29(月) 20:16:10 ID:???
。ごときギャーギャー騒ぐのはゆとり
707 ：Name_Not_Found：2010/03/29(月) 20:38:53 ID:???
>>705
おれに教えてくれ（･∀･；）ﾆﾔﾆﾔ
708 ：Name_Not_Found：2010/03/29(月) 21:00:56 ID:???
インラインフレームについて質問よいでしょうか

現在外に大枠を作って、その中で左と右にfloatで領域を作っている状況なのですが
左ではサイト内でのリンクを置いて
右ではインラインフレームで各種左のメニューから選んだページを表示する、ということがやりたいです

しかし、右の区域の指定はこんなのなのですが

<div class="right">　（.rightではfloatとwidthを指定しているだけです
　　<iframe src="top.html" height="100%" width="100%" frameborder="1"></iframe>
</div>

height100%にしていれば、top.html内の文書が全て親のページにインラインで表示されるかと思っていたのですが
(外枠がtop.htmlの文章量に応じて上下に伸縮するイメージを持ってました)
勝手にスクロールバーが出てきてしまって、一度にtop.html内の情報を表示しきれません

説明がへたくそで分かりづらいとは思いますが
解決法を知っている方いらっしゃいましたら教えていただきたいです
709 ：Name_Not_Found：2010/03/29(月) 21:07:54 ID:???
cssでどうにかなる問題じゃないと思うんだが。
height:100%は表示中の親窓の縦幅に合わせるだけだよ。
同じドメインならjsで自動であわせてくれるライブラリみたいなのがあった気がする。
710 ：Name_Not_Found：2010/03/29(月) 21:16:53 ID:???
親窓には特に縦幅は指定していないのです
だから、勝手に伸縮するかと思っておりました

しかし今インラインフレームについて調べていましたが、なにか分かってきた気がします
iframeを使われているページを見るとどのページも同一の縦幅で
呼ばれる対象のページが表示されており
そもそもiframe側に縦幅の表示の制約があるような気がしました
iframeのことをもうちょい調べてみようと思います

よく調べもせず安直に質問しようとして申し訳ございません
ご迷惑おかけしました
711 ：sage：2010/03/30(火) 00:49:41 ID:???
お尋ねします

３カラムをつくり、左のボックスの中に複数個ボックスを作りたいのですが
ビルダーだけを使って、ＣＳＳツールの設定手順を教えていただきたいです。

もしくは、ビルダーでその解説が載っているサイトがあれば教えてくらはい
712 ：Name_Not_Found：2010/03/30(火) 01:25:50 ID:???
>>711
なんでブラしてんの？
713 ：sage：2010/03/30(火) 01:53:36 ID:+4OT3g6R
ブラ？
714 ：Name_Not_Found：2010/03/30(火) 05:54:25 ID:???
ノーブラ以外質問禁止と聞いて
715 ：Name_Not_Found：2010/03/30(火) 06:49:20 ID:???
ぶら。じゃないよ！
716 ：Name_Not_Found：2010/03/30(火) 17:31:03 ID:Ttt0iJus
cssで背景画像をこんな感じ↓でいくつも指定してるんですが、
.aaa
{
background-image:url(・・・・/aaa.gif);
}

.bbb
{
background-image:url(・・・・/aaa..gif);
}

たまに、background-image:url(・・・.gif);部分だけが、
ごっそり消えてしまいます。
なので、ページでもその背景画像が表示されなくなります。
自分でもこの部分を消した覚えはないんですが、原因は何か考えられますか？
717 ：Name_Not_Found：2010/03/30(火) 17:53:52 ID:???
Cドライブ晒せ
718 ：Name_Not_Found：2010/03/30(火) 18:45:53 ID:???
http://toaru.s4.xrea.com/
ブラウザとかOSで全然違う見え方になるが、これどうやって制御してんの？
719 ：Name_Not_Found：2010/03/30(火) 20:02:13 ID:???
>>718
サーバー側で判断する方法もあるし、jsなんかでやれるだろうし
アクセスした段階で環境情報は駄々漏れだからねえ
720 ：m：2010/03/31(水) 01:40:57 ID:???
>>718
> http://toaru.s4.xrea.com/
> ブラウザとかOSで全然違う見え方になるが、これどうやって制御してんの？

iPhoneだけはCSSのmedia type指定ですが、ほかは
http://toaru.s4.xrea.com/js/get_agt.js
でブラウザを判定して、それぞれ用のcssを
document.writeしているようです。
そのものずばりの部分はこんな感じでした。

<link href="./css/'+getOSType()+'_'+getBrowserName()+getBrowserVersion()+'.css" rel="stylesheet" type="text/css">

721 ：Name_Not_Found：2010/03/31(水) 09:55:57 ID:???
>>716
たぶんIEだと思うが、要素に横幅指定してあげれ。（width:100%;とか）
ネガティブマージンやfloatしてる奴ならzoom:1;をつけてあげる。

詳しい解説は「CSS IE 背景が消える」でググればいろいろ出てくるからそっち見を参照。
722 ：Name_Not_Found：2010/04/01(木) 23:57:51 ID:???
HTMLで
<h2>テスト</h2>
と書いて外部cssに
h2 {background-image:url("http://xxx-xxxx.com/image/xxx.jpg");}
と書いたのですが何度試してもh2要素の背景に画像を出すことができません
何かいい方法があれば教えていただけませんか？

723 ：Name_Not_Found：2010/04/02(金) 00:05:17 ID:???
>>719
>>720
じゃあいちいちそのOS+ブラウザ用のCSSファイルを用意してるってことか。
大変すぎ。
724 ：Name_Not_Found：2010/04/02(金) 04:08:48 ID:???
ブラウザ依存の記述をしなけりゃいいと思う
どうしてもってときはCSSハックでも使えば
725 ：Name_Not_Found：2010/04/02(金) 14:23:25 ID:???
UAで判別とか前時代的
特別な理由がない限りは使いたくないね
726 ：Name_Not_Found：2010/04/02(金) 16:46:58 ID:vBi252ng
ボックスを３つよこに並べたいです。
<div id="box-left">左のボックス</div>
<div id="box-center">中央のボックス</div>
<div id="box-right">右のボックス</div>

#box-left {
float:left;
}
#box-center {
float:right;
}
こうやると２つ並べることはできますが、３つの場合はどうしたらいいでしょうか？
たとえばleftとcenterを1つのボックスで囲って、それとrightを並べるとも考えましたが、綺麗な書き方はどのようなものでしょうか？
727 ：Name_Not_Found：2010/04/02(金) 16:56:39 ID:???
全部leftにする
728 ：Name_Not_Found：2010/04/02(金) 16:57:34 ID:???
あ全部 left にする場合はwidth 指定したほうがいい
729 ：Name_Not_Found：2010/04/03(土) 11:09:41 ID:???
>>722
それ、そもそも外部CSSが読めてるのか？
730 ：Name_Not_Found：2010/04/04(日) 14:54:58 ID:EmreoEvt
jqueryでul要素を使っているからか、jqueryのcss適用範囲でlistの入れ子が機能しません。
どうするべきでしょうか？
731 ：Name_Not_Found：2010/04/04(日) 15:28:49 ID:???
日本語でおｋ
732 ：Name_Not_Found：2010/04/04(日) 16:32:17 ID:???
リストの巣はul要素のcssであって、jqueryな作成楽しみの適用範囲でjqueryで機能しません。使用します。
私は何をするべきですか?
733 ：Name_Not_Found：2010/04/04(日) 16:36:59 ID:???
どこの機械翻訳ですか？
734 ：Name_Not_Found：2010/04/04(日) 19:09:36 ID:???
>私は何をするべきですか?
まず、服を脱ぎます
735 ：Name_Not_Found：2010/04/04(日) 19:12:27 ID:???
次に窓を開けます。
736 ：Name_Not_Found：2010/04/04(日) 20:28:24 ID:???
次に窓を窓から投げ捨てます
737 ：Name_Not_Found：2010/04/07(水) 13:41:52 ID:tJuGx9cl
font-sizeはemや%指定が望ましいそうですが、
borderやpaddingもemで指定したほうがいいですか？
firefoxで確認して作っていて、ieで見たらborderの太さが違っていて、
px単位で指定するとfirefoxと同じに見えるのですが
738 ：Name_Not_Found：2010/04/07(水) 15:04:05 ID:???
場合に依ると思う
739 ：Name_Not_Found：2010/04/07(水) 20:35:40 ID:???
>>737
フォントサイズは指定しない方が好ましい
borderやpaddingは自分がしたいことによりけり
どんな作り方をしたって同じOS同じブラウザでだって環境によって異なるので
異なることを全体に組むことが好ましい
740 ：Name_Not_Found：2010/04/07(水) 22:28:04 ID:0JQvsezv
なるほど、ありがとうございました
741 ：Name_Not_Found：2010/04/07(水) 23:08:02 ID:???
＞フォントサイズは指定しない方が好ましい

それは無い
742 ：Name_Not_Found：2010/04/08(木) 02:02:36 ID:???
>フォントサイズは指定しない方が好ましい
それどこ情報よー
743 ：Name_Not_Found：2010/04/08(木) 03:40:19 ID:???
>>741-742
さすがに恥ずかしいから
744 ：Name_Not_Found：2010/04/08(木) 12:31:00 ID:???
>>743
フォントサイズ指定してない代表的なサイト挙げてから言えよｗ
２ちゃん以外でな。
745 ：Name_Not_Found：2010/04/08(木) 12:49:04 ID:???
カレイケスレ池
746 ：Name_Not_Found：2010/04/08(木) 14:10:15 ID:???
>>745
そのスレはもうないぞ
というか古い頭の奴らと話しても無駄
747 ：Name_Not_Found：2010/04/08(木) 14:59:26 ID:???
>>745
おまえスベってるやん…
748 ：Name_Not_Found：2010/04/08(木) 16:07:06 ID:???
フォントサイズ指定って普通するんじゃないの？
気になるんでしない派の人論理的に教えてちょ。
749 ：Name_Not_Found：2010/04/08(木) 16:13:35 ID:???
font-sizeとfont-family区別できない子供が書いてるんじゃね？
750 ：Name_Not_Found：2010/04/08(木) 17:03:25 ID:???
「普通する」というのをまず論理的に説明してもらおうか
751 ：Name_Not_Found：2010/04/08(木) 17:17:42 ID:???
ユーザー側で文字サイズを変更し難いように font-size:16px; を常に指定するとかじゃない？
752 ：Name_Not_Found：2010/04/08(木) 17:18:04 ID:???
俺もサイズ指定「普通する」と思ってるぞw
本文やh1~h6のサイズはブラウザまかせでおkとしても（俺的にはこれも嫌だが）
本文より小さい/大きい文字が必要なことって多くないか？

「しない方が好ましい」と思うのがなぜかは是非知りたい。
753 ：Name_Not_Found：2010/04/08(木) 17:23:40 ID:???
しない方が好ましい　と　普通する　って正反対なのか？

それはともかく、デザインに凝ってない限り必須ってわけでもないと思うが
マークアップに従って、ブラウザがスタイルを設定していくわけだし
754 ：Name_Not_Found：2010/04/08(木) 17:40:43 ID:???
h1や定義リストをブラウザお任せのサイトってどんなんだよｗ

初心者に対して「フォントサイズは指定しない方が好ましい」って教えるのはどうかと思うぞ。
せめてIE6なんぞでも変更しやすいようにpxなんぞでなく%でうんたらって書け。
755 ：Name_Not_Found：2010/04/08(木) 17:49:15 ID:???
フォントサイズなんて上質の描画が出来るブラウザじゃないとあまり意味が無いわけだし
環境によって差異が生じたり
同じマークアップでもサイトによって意味の違いが生じてしまうのは問題、ということだろう

「出来ればしない方がいい」というレベルまではいかなくても「しない方が望ましい」になるわけで
フォントサイズって重要度の大小に使ってしまうことが多いと思うし
デザイン以外で使うことが駄目って意味じゃなかろうか
756 ：Name_Not_Found：2010/04/08(木) 18:09:46 ID:???
>同じマークアップでもサイトによって意味の違いが生じてしまう
CSSのfont-size指定による文字の大小って検索エンジンの解釈に影響があったっけ。
俺の勉強不足ならすまん
757 ：Name_Not_Found：2010/04/08(木) 18:37:25 ID:???
むしろhnは本文より大きめだったら好きに設定していいと思うが
本文で重要な部分はユーザのデフォルトにしてやったほうがいいだろう
758 ：Name_Not_Found：2010/04/09(金) 00:52:24 ID:???
>フォントサイズは指定しない方が好ましい

つまりスキルが低くてクロスブラウザ対応できませんってことか？
759 ：Name_Not_Found：2010/04/09(金) 01:37:03 ID:???
お前は何を言っているんだ
760 ：Name_Not_Found：2010/04/09(金) 02:17:08 ID:???
>>755
>フォントサイズなんて上質の描画が出来るブラウザじゃないとあまり意味が無いわけだし

どんな酷いブラウザを使っているのかぜひ知りたいｗ
761 ：Name_Not_Found：2010/04/09(金) 02:29:14 ID:???
Yahoo!やGoogle、MSN、Appleにadobeは、みんなフォントサイズ指定してる
糞サイトということですかそうですか。
762 ：Name_Not_Found：2010/04/09(金) 03:53:32 ID:???
視覚障害者のお方ですか？
指定しないなら、実質16pxで読めと？
763 ：Name_Not_Found：2010/04/09(金) 05:17:13 ID:???
フォントサイズは指定しない方が好ましいとか言ってる方は
バカでかいh1とか本文16px相当がいいらしいですな。何が好ましいんだか・・・ｗ
764 ：Name_Not_Found：2010/04/09(金) 09:39:05 ID:???
探せじゃなくて具体的にフォントサイズ指定していないサイトを見せてみなさい

個人でやっているようなオナニーサイトではなく、制作会社が企業やコンシューマーに向けて発信しているサイトで

海外でもいいぞ
765 ：Name_Not_Found：2010/04/09(金) 09:40:20 ID:???
指定と固定を勘違いしてるんだろ
766 ：Name_Not_Found：2010/04/09(金) 11:19:13 ID:???
>>762-763
ブラウザで自分の好みの大きさに変える方法を知らないのか？
767 ：Name_Not_Found：2010/04/09(金) 14:32:07 ID:???
>>579
に対して
>>581だと
　　●　文章
　　●　文章
が
●　文章
●　文章
となり
●⇔文章
の間隔は変わらないんだけど
●と文章の間を狭めるにはどうすればよかたい？
768 ：Name_Not_Found：2010/04/09(金) 14:39:43 ID:???
>>767
無理
背景画像でやりなされ
あと関係ないが>>581はmarginで話してるがpaddingで取ってるブラウザもあったはず
769 ：Name_Not_Found：2010/04/09(金) 14:49:39 ID:cILtOFSW
float:leftってのは自分を左に寄せるって意味じゃないんだよん。
それが判らないと混乱するかもね。

770 ：Name_Not_Found：2010/04/09(金) 15:23:35 ID:???
float:left・・・？
771 ：Name_Not_Found：2010/04/09(金) 17:13:00 ID:???
>>766
「フォントサイズは指定しない方が好ましい」派ですか？
話にならんな・・・
772 ：Name_Not_Found：2010/04/09(金) 17:20:22 ID:???
文字の重要度に使うべきじゃないって話がなんで、一切使ってない企業サイトを探せという話になるのかと
つか企業サイトで文法ミスしてないサイト自体まれだろう
773 ：Name_Not_Found：2010/04/09(金) 17:55:22 ID:???
質問がきてまで続けてる奴らは出てけ
774 ：Name_Not_Found：2010/04/09(金) 18:04:03 ID:???
>>768
のいうとおり背景が最も安全かと

>あと関係ないが>>581はmarginで話してるがpaddingで取ってるブラウザもあったはず
UAによってバラバラみたいなので　見た目重視なら背景画像ですな
印刷とか、画像無効時までも考慮すると最適な方法ではないのかもしれないが…
775 ：Name_Not_Found：2010/04/09(金) 18:59:21 ID:???
>>774
後半は・・・全然違う話をしてるんだが・・・
776 ：Name_Not_Found：2010/04/10(土) 01:31:12 ID:???
リストとかが横並びの時、それぞれの高さを統一したい
TABLEだとTDで要素が伸びるので、合わせられたけど

うまく合わせる方法ってありますか？（JSなど使わず）
777 ：Name_Not_Found：2010/04/10(土) 02:58:19 ID:???
+-------------------+
|　　　　　上　　　　　　　　|
+---+----------+----+
|　　　|　　　　　　　 |　　 |
|　左 | 　　中　　　 |　右 |　　　
|　　　|　　　　　　　 |　 　 |
|+---+---------+----+　
|　　　　　下　　　　　　　　|
+-------------------+
上記のような構成のサイトを作ろうと思います。現在は、次のような構成になっております。
HTML部
<div id="inbox">
　　<div id="header">上</div>
　　<div id="wrap"><div id="main">中</div><div id="left">左</div></div><!-- /wrap -->
　　<div="right">右</div>
　　<div="footer">下</div>
</div><!-- /inbox -->

CSS部
#inbox { width: 1000px}
#header { float:left width:1000; height:50px;}
#wrap { float:left; width:800px;}
#main { float:right;width:600px;}
#left { float:left;width:200px;}
#right { float:right;width:200px;}
#footer { float:right;width:1000px; height:50px;}
ただ、インクルードファイルの構成上、下記のように左→中の順に記述したいのですが
　　<div id="left">左</div><div id="main">中</div>
位置を変えた途端にずれてしまいます。
どうしたら、うまくいきますか？参考になるサイトなどがありましたら、教えてください。
778 ：Name_Not_Found：2010/04/10(土) 13:40:30 ID:???
>>777
どう崩れる?
ブラウザは?
左、中、右の順で記述するんなら#wrap必要なくね
全部float:left;で良いじゃん
あと関係ないけどheaderとfooterはfloatする必要ないでしょ
779 ：Name_Not_Found：2010/04/10(土) 15:29:35 ID:???
>>777
オレも初心者なんだけど、フロートをクリアしてやんないとダメなんじゃなかったっけか？
780 ：Name_Not_Found：2010/04/10(土) 16:20:41 ID:/O5ygqQL
＞{ width: 1000px}

くっそうぜー
781 ：Name_Not_Found：2010/04/10(土) 17:07:21 ID:???
ぢｓｐぁｙ：いんぃね？
782 ：Name_Not_Found：2010/04/10(土) 17:10:59 ID:???
なんでmarker-offset死んでしまったん？
783 ：Name_Not_Found：2010/04/10(土) 18:29:45 ID:???
>>776
ttp://coliss.com/articles/build-websites/operation/css/558.html
784 ：Name_Not_Found：2010/04/11(日) 18:14:37 ID:DYsGLz5z
>>777

>>769

785 ：Name_Not_Found：2010/04/12(月) 10:34:33 ID:???
>>777
<div id="inbox">
<div id="header">上</div>
<div id="wrap">
<div id="left">左</div>
<div id="main">中</div>
<div id="right">右</div>
</div><!-- /wrap -->
<div id="footer">下</div>
</div><!-- /inbox -->

#inbox { width:1000px; background:#ffc; }
#header { height:50px; background:#fcf; }
#wrap { }
#left { float:left; width:200px; background:#cfc;}
#main { float:left; width:600px; background:#fcc; }
#right { float:left; width:200px; background:#ccf;}
#footer { clear:both; height:50px; background:#cff;}
786 ：Name_Not_Found：2010/04/12(月) 10:53:08 ID:???
inboxてメール受信箱かよｗ
787 ：Name_Not_Found：2010/04/12(月) 12:02:05 ID:OGuHePD1
ページのリンクで　1 2 3 4 5 などが四角く囲ってあるのをよく見ますが、あれのサンプルを載せてるとこご存じですか？
788 ：Name_Not_Found：2010/04/12(月) 12:19:21 ID:???
サンプルなんざ必要ないほど基礎の基礎だぞ
ていうかそういうところ見つけたらソース見ればいいんでないかい
そのくらいパクっても誰もパクりとは言わないくらい基礎だから
789 ：m：2010/04/12(月) 13:23:11 ID:???
>>787
いわゆるページネーション型のリンクのことですよね？
ふつうはhtmlはこう書いて，
<ul>
<li><a href="#">前へ</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">次へ</a></li>
</ul>
CSSはこんな感じかと…
li {
float: left;
width:auto;
margin-left: 10px;
list-style-type: none;}

li a {
display: block;
padding: 5px;
border: 2px solid #AA9999;}

li a:hover {
border: 2px solid #FF9999;
background: #FFCCCC;}

アクティブなページの表示や無効なリンク（1ページ目にいるときの
「前へ」など）には，動的にclassをつけたりa要素を抜いたりして
CSSで装飾することが多いと思います。
790 ：Name_Not_Found：2010/04/12(月) 15:36:02 ID:???
>>789
こういうのってfloatを解除する必要ってないのでしょうか？
791 ：Name_Not_Found：2010/04/12(月) 15:45:45 ID:???
　－　　－　　－　　－　　－　　－　
｜１｜｜２｜｜３｜｜４｜｜５｜｜６｜
　－　　－　　－　　－　　－　　－　
792 ：m：2010/04/12(月) 17:02:33 ID:???
>>790
> こういうのってfloatを解除する必要ってないのでしょうか？

はい，最後には何らかの方法でfloat解除しないとダメですね。
「後続要素でclear:both，包摂ulにもclearfix当てる」
とすればレンダリング的に安定かも。clearfixにより，
ulが高さ0ではなく，li内包分の高さを持つボックスになるので，
後続要素のmargin-topが正しく（というか，直感的な形で）
反映されます。

本題とは関係ないけど，こういうトライには以下が便利です。
ファイルを作ってコード書いてブラウザで開いて…という手間を
多少軽減できます。
http://cardumen.com/tools/css-tester.php
当然クロスブラウザじゃないですけど，ちょっとしたテストには
十分かと。って前似たようなこと書いたっけ？
793 ：Name_Not_Found：2010/04/12(月) 18:10:08 ID:???
>>792
わかりやすい説明ありがとうございました
そのサイトは便利ですね
794 ：Name_Not_Found：2010/04/13(火) 16:10:54 ID:???
行間を少し空けたいのですが
CSSって何がなんやらワカリマセン。。。
サイトも回ってみたんですが、、、
795 ：Name_Not_Found：2010/04/13(火) 16:40:11 ID:leeQ5mW9
↑
padding,margine,line-height,br,lf,crなんでもいいぞ
796 ：Name_Not_Found：2010/04/13(火) 16:43:22 ID:???
>>794
基礎から勉強
ttp://az-store.nrym.org/archive/mynotes/lecture/
ttp://www.kanzaki.com/docs/htminfo
ttp://members.jcom.home.ne.jp/pctips/
797 ：Name_Not_Found：2010/04/13(火) 17:48:44 ID:j+mDfmdN
昨日のページネーションのものです。
７８９さんサンクスです
７８９さんのを参考にしてリストではなくdivで囲ってるのですが、
hoverのときについて質問です。

padding:0 5px;
のdivの中にaタグを書いて、hoverのときは
バックラウンドカラーとボーダーカラーを変えるようにしたのですが、hoverしたときに変わるのが
数字の最小限の背景だけで、divの四角全体が変わるわけではありません。そして、動いてしまいます。
hoverで動かないで、背景色、ボーダーカラーをかえるにはどうしたらよいでしょうか？
798 ：Name_Not_Found：2010/04/13(火) 18:33:13 ID:???
http://kuler.adobe.com/

このサイトで表示される配色は
どうやってカラーコードを取得すればいいんですか

いちいち画像キャプチャして解析ソフトにかけてるんですけど、
手軽にコピペできませんかね
799 ：Name_Not_Found：2010/04/13(火) 19:03:42 ID:???
line-height
やってみましたら
何か出来ました!!
微妙な間隔が素晴らしい!
これからずっと使おう
ありがとうございました!!!
800 ：Name_Not_Found：2010/04/13(火) 19:37:31 ID:???
>>798
ttp://soft.utopiat.net/soft/cspoit/index.html
こんなの？
801 ：Name_Not_Found：2010/04/13(火) 19:57:27 ID:???
>>797
>>>796
802 ：Name_Not_Found：2010/04/13(火) 21:53:09 ID:???
>>798
Firefoxを使ってるならColorZillaとかRainbowとか
803 ：Name_Not_Found：2010/04/13(火) 22:02:41 ID:???
<style type="text/css">
～～
</style>
のようなhead内のstyle要素では指定せずに、
a:hoverをhtml内に書く事って可能ですか？
<a style="～～;" href="">xxx</a>
のようなインラインスタイル属性で。
書き方がわかりませんorz
804 ：Name_Not_Found：2010/04/13(火) 23:22:01 ID:???
>>803
無理
805 ：m：2010/04/14(水) 00:59:23 ID:???
>>797
> hoverで動かないで、背景色、ボーダーカラーをかえるにはどうしたらよいでしょうか？

実際のソースを見ないと何とも言えないところでもあるのですが、
CSSのhover要素のみでページネーションの番号矩形全体の
スタイル（背景やボーダーなど）を変化させたい場合は、

1・矩形全体をa要素で表現し、hoverでスタイルを上書きする
2・矩形divそのものに対してhoverでスタイルを上書きする

のどちらかが必要です。

1の場合は、単にa:hoverにスタイルを当てるだけでは、ご体験された
ようにインライン要素としての装飾しかされないので、まずa要素
自体にdisplay:blockを指定して、ブロック要素にしないといけません
（>>789ではli aのところでそれをやっています）。

2の場合は、そういうことをしなくてもよくなりますが、
IE6ではa要素以外に対するhover疑似セレクタが無視されて
しまうので、csshover.htcなどでここを修正する必要があります。
またdiv内でのa要素の表示位置をpaddingで調整した場合などに
「矩形領域の内部にマウスをフォーカスして、それによって
背景も変化したが、a要素自体にはマウスが乗っていないため
クリックしても何も起こらなかった」というケースが発生し、
これはユーザビリティ的には好ましくありません。

上記を踏まえて、どちらがよいか判断してみてください。
806 ：Name_Not_Found：2010/04/14(水) 01:29:57 ID:???
>>800
ソフト使わないでページ内に表示することとかってできないんですかね？

>>802
ColorZillaは普段使いまくってるんですが、
フラッシュとかの部分は解析できないですよね。
807 ：Name_Not_Found：2010/04/14(水) 03:04:32 ID:???
>>806
>ColorZillaは普段使いまくってるんですが、
>フラッシュとかの部分は解析できないですよね。

適当なこと言ってごめん
さっき試してみたけどPixelZoomerなら色の抽出はできたよ（初期設定だとJavaになってるので入れてなければCanvasにすればおｋ）
808 ：Name_Not_Found：2010/04/14(水) 14:52:42 ID:???
次のような上下2段に分けたサイトを作りたいと思っています。
・下の段の高さは200px固定(高さの決まったフラッシュを置くため固定値)
・上の段はなるべく大きく、中にheightを100%指定のものを置いても問題の無いように
・スクロールバーが出ないように

上の段をなるべく大きくスクロールが出ないようにできなかったので教えてください。
809 ：Name_Not_Found：2010/04/14(水) 17:48:05 ID:???
body {
margin: 0;
padding: 0;
font:14px;
}

h2 {
margin: 0;
padding: 0.5em;
color: #ffffff;
background-color: #333333;
}

.sub {
padding: 0;
margin: 0;
border-left: 2px solid #333333;
list-style-type: none;
background-color: #ffffff;
}

.sub li {
margin: 0;
padding: 0 15px 0 15px;
border-right: 1px solid #333333;
float: left;
font-size: 85%;
}

ul要素の左に2pxのborderが表示されるはずなんですが全く反映されません
どこの書き方が悪いのでしょうか？
810 ：Name_Not_Found：2010/04/14(水) 18:17:24 ID:???
質問の書き方
811 ：Name_Not_Found：2010/04/14(水) 18:21:16 ID:???
>>809
間違っているわけではなく、書いたとおりになってるだけ
liが全部floatされているのでulには高さがなくなっている
812 ：Name_Not_Found：2010/04/14(水) 19:20:40 ID:???
liを横並びにする書き講座をサイトで見たんですが間違ってたんですね
こういう場合はどう指定すれば横並びにしたうえにulの横にborderを出せるのでしょうか？
813 ：Name_Not_Found：2010/04/14(水) 19:53:46 ID:???
だから間違ってないっつの、おまえの指定通り
基礎を勉強しろ
ttp://az-store.nrym.org/archive/mynotes/lecture/css21/position
814 ：Name_Not_Found：2010/04/14(水) 21:32:58 ID:???
>>808
position:fixed;
815 ：Name_Not_Found：2010/04/14(水) 21:37:02 ID:???
　　　　/＼　　　　　　　 /＼
　　　 /:::::::ヽ＿＿＿＿/::::::::ヽ、
　　 丿　::.__　　.:::::::::::::　 __　 ::::ヽ_　　　　 　 ,. ､ 　 　 　 /　　 ／
　 ／　／。 ヽ_ヽｖ /:　／。ヽ　 ::::::ヽ 　　 ,.〃´ヾ.、　　/　 ／
　/　／￣￣√_＿＿丶 ￣￣＼　 ::::|　／ |l 　 　 ',　 / ／
　|　.::::::::::　/ / ｔｰｰｰ|ヽ　　　　 ..::::: ::|r'´　 ||--‐r､ ',　　　　ttp://az-store.nrym.org/archive/mynotes/lecture/css21/position ぽーーーーーーーーーーーーーーーーーー！
　|　.:::::.　　..:　|　　　　|ヽ　　　.,..ィ'´　　　　 l',　　'.j　'.
　|　:::　　　　| |⊂ニヽ| |　　'r '´　　　 　　 　 ',.r '´　!|　　＼

816 ：m：2010/04/14(水) 21:47:36 ID:???
>>812
> liを横並びにする書き講座をサイトで見たんですが間違ってたんですね

>>811さんのご指摘通り，間違ってはいません。私も>>789で
同じ方法を説明していますし，「liを横並びにする」という目的は
この方法で達成されています。ただし，【その親要素のulに
子要素のliと同じ縦幅がついていることを前提としてデザインを
当てる】場合はもう一工夫が必要になる，ということなのです。

> こういう場合はどう指定すれば横並びにしたうえにulの横にborderを出せるのでしょうか？

>>811さんの指摘通り，子要素であるliがすべてfloatされている
時は，その親要素であるulは高さが0になります。なぜかというと，
それがCSSボックスモデルとfloatスタイルの仕様だからです。
高さが0なので，左右にborderをつけても表示されません
（topかbottomにborderをつけた場合は，liの上に表示されます）。

子要素すべてがfloatされているul要素に対して子要素と同じ高さを
与える方法は，>>792に書いたように，包摂ulに対してclearfixを
当てるのが安定です。clearfixについてはぐぐってみるとよいでしょう。
いろいろ解説がありますし，clearfixについての解説を読むことで，
floatという指定をしたときに何が起きるのかという本質の理解にも
近づけると思います。
817 ：Name_Not_Found：2010/04/14(水) 22:10:43 ID:???
clearfixを当てるのが安定です（笑）

ねーよ・・・
818 ：Name_Not_Found：2010/04/14(水) 22:51:28 ID:???
>>814
できました。ありがとうございます。
819 ：Name_Not_Found：2010/04/15(木) 12:30:09 ID:???
そもそも「当てるのが安定」って日本語としておかしいんだが
820 ：Name_Not_Found：2010/04/15(木) 15:09:37 ID:???
clearfixっぽいことしないと
次は「後続要素の上マージンがうまく反映されませんが
どうしてですか！」みたいな話が絶対出るから…
821 ：Name_Not_Found：2010/04/15(木) 15:41:46 ID:???
>>820
えーと、勉強中で答えるのにも熱心なのはいいけど
もうちょっと勉強してついでにスレの空気読むようにしてくれ
教えてちゃんと同じくらい教えたいちゃんも迷惑なんだ
822 ：m：2010/04/15(木) 16:10:35 ID:???
>>817
clearfixはだめでしょうか？

>>819
言われて気がつきました。「○○を当てるのが安定」って
ゲーマーの物言いなんですね。今後改めます。

>>820
はい，そのつもりで書きました。

>>821
>>820さんは私とは別の方です。
823 ：Name_Not_Found：2010/04/15(木) 16:15:50 ID:???
>>822
じゃあ
お　前　が　消　え　ろ
824 ：Name_Not_Found：2010/04/15(木) 16:21:50 ID:???
>>821=>>823
なんでそんなにイライラしてるの？
clearfixが嫌いなの？
825 ：Name_Not_Found：2010/04/15(木) 19:29:31 ID:???
お前が嫌いなの
826 ：Name_Not_Found：2010/04/15(木) 22:20:39 ID:???
えっ ?　身も心も捧げたのに・・・　ｳｳ・・・ｳﾜｧｧｧﾝ ヽ(`Д´)ﾉ ﾓｳｺﾈｰﾖ
827 ：Name_Not_Found：2010/04/15(木) 22:43:57 ID:WAff+FVl
<div id="main">
<div id="a">aaa</div>
<div id="b">bbb</div>
<div id="c">ccc</div>
</div>

で
aaabbbccc
これをmainの中央に配置するにはどうしたらよいでしょうか。
float leftでそろえて、mainのtext-align:centerでいけるかと思ったのですがダメでした
828 ：Name_Not_Found：2010/04/15(木) 23:03:54 ID:???
>>827
標準モードにして囲ってるブロックをmargin:auto
829 ：Name_Not_Found：2010/04/16(金) 03:21:51 ID:???
>>827
>>828さんが簡にして要

text-alignは「そのブロックレベル要素の中にある
インライン要素の位置取り」を操作するプロパティなので
divなどには無効（この仕様を逸脱してるのがIEの互換モードということ）
830 ：Name_Not_Found：2010/04/16(金) 08:43:41 ID:???
>>829
だからお前消えろタクト
831 ：Name_Not_Found：2010/04/16(金) 08:47:55 ID:???
なんか1人ヘンなのが居着いちゃったな
832 ：Name_Not_Found：2010/04/16(金) 09:20:50 ID:???
そいつは昔から居着いてる
初心者スレで追い出されてこっちに北
833 ：Name_Not_Found：2010/04/16(金) 09:30:35 ID:???
あれは名前多すぎて訳わかんねｗ
834 ：Name_Not_Found：2010/04/16(金) 11:06:35 ID:???
>>824
821だが823も825も知らんｗ
835 ：Name_Not_Found：2010/04/16(金) 11:38:44 ID:???
タクトって何？
836 ：Name_Not_Found：2010/04/16(金) 11:42:49 ID:???
Web大先生（笑）
837 ：Name_Not_Found：2010/04/16(金) 13:32:26 ID:???
いつのまに「大」が
838 ：Name_Not_Found：2010/04/16(金) 13:52:14 ID:???
中身が全部floatのときの処理
実務寄りの解決だと

・外側要素に高さをハードコードする
・clearfixを使う
・overflowを使う

のどれがいいんだろか

最後のが一番コードきれいだけど
操作や印刷絡みのトラブルが多い
839 ：Name_Not_Found：2010/04/16(金) 14:11:19 ID:???
単にinline
840 ：Name_Not_Found：2010/04/16(金) 17:27:29 ID:???
>>838
heightなしで次clear ≧ height決め打ち ≧ clearfix ＞ overflow

3つめまでは状況に応じて。4つめは使わない。
htmlと違ってCSSはバリデーション通す意味は薄いよ。
841 ：Name_Not_Found：2010/04/16(金) 17:51:39 ID:???
そもそもフロートさせてるのが間違いで>>839だと思うんだが
842 ：Name_Not_Found：2010/04/16(金) 17:58:01 ID:???
タクトってまだいたんだｗｗ
843 ：Name_Not_Found：2010/04/16(金) 20:08:03 ID:???
divを横に並べるって話だったからinlineじゃだめなんじゃないかな。
844 ：Name_Not_Found：2010/04/16(金) 21:35:51 ID:???
中にブロック要素が入って無ければいいんじゃないの？
まあ用途によるよな
845 ：Name_Not_Found：2010/04/16(金) 23:01:52 ID:???
inline-block
846 ：Name_Not_Found：2010/04/16(金) 23:06:05 ID:???
>>543
お前質問がごっちゃになってるぞ
847 ：Name_Not_Found：2010/04/17(土) 01:35:05 ID:???
同様用途でinline-block試してみたら
クロスブラウザ検証が泥沼化したことがある
あんまオススメしない
848 ：Name_Not_Found：2010/04/17(土) 01:35:39 ID:???
>>843と>>543がごっちゃになってね？
849 ：Name_Not_Found：2010/04/17(土) 01:36:48 ID:???
>>847
マジレスするとdisplayのinlineをみんな言ってるんだと思うんだぜ
>>845以外
850 ：Name_Not_Found：2010/04/17(土) 02:31:51 ID:???
IEはデフォでinline要素がinline-block要素だよね
851 ：Name_Not_Found：2010/04/17(土) 03:28:27 ID:???
今更だが・・
Divの中にサイズ未定の画像を上下左右中央に配置することができなくてワロタ
なんでこんなことが出来ないんだろうね？
なんだか酷い仕様のように思えてきた

それと、ブラウザ間の非互換が多すぎて、イライラする
その点Flashはブラウザ間の互換性がかなり高いけど
Flashもこの先どうなるかわからんからな～

非互換性ってやっぱ疲れる
852 ：Name_Not_Found：2010/04/17(土) 04:47:02 ID:???
height固定、overflow:hidden指定したdiv要素に、
jQueryのprependで要素追加したらIE7だけはみ出てしまう。
何とかなりませんか… orz
853 ：Name_Not_Found：2010/04/17(土) 12:07:43 ID:???
>>851
できなくていい
そんなことできたらお前のような無知が他のブラウザで見られないページを作るから

まあできるけど

>>852
JSスレだと思う
854 ：Name_Not_Found：2010/04/17(土) 12:13:10 ID:???
>>851
line-height
855 ：Name_Not_Found：2010/04/17(土) 12:32:13 ID:???
>>851
background-positionでいいじゃん
856 ：Name_Not_Found：2010/04/18(日) 18:40:56 ID:7o4wXKm4
<span class="ichi"><span class="ni"><span class="san">あああ</span></span></span>

他との絡みでどうしても上みたいに3重のspanになっちゃったんだけど
これってまずい？
857 ：Name_Not_Found：2010/04/18(日) 19:32:19 ID:???
まずいっつーよりそんなにしなくちゃならない状況が思いつかん
きっと何か間違ってる
そして何よりそれはHTMLの問題なのでスレ違いだ
858 ：Name_Not_Found：2010/04/18(日) 20:01:00 ID:???
<span class="ichi ni san">

>>856
少しは勉強せい !
859 ：Name_Not_Found：2010/04/18(日) 20:08:04 ID:???
classを3つ使うって問題ではなく構造としてなっちゃうってことじゃないのか
860 ：Name_Not_Found：2010/04/18(日) 20:47:41 ID:???
positionを使ったりするときは、１つのspanにclassまとめるのが無理だから、構造としてだろうな。
861 ：856：2010/04/18(日) 20:48:59 ID:???
みなさん　ありがとう

PHP部分を軽くしようとしてCSSで対処すると
span3重になってしまうんだよね

取りあえず文法的には間違ってなくて安心した

862 ：Name_Not_Found：2010/04/18(日) 22:54:18 ID:/+MUjQ25
<style type="text/css">
<!--
body{font-size:13px; line-height:100%;}

span.moji {font-size:47px;}
-->
</style></head>
<body>
<span class="moji">MY SITE</span><br>
Writing...

上のようにするとMY SITEと下の文字が重なってしまいます。
で、LINE-HEIGHTを取ると上手く行きます。これって何が悪いんですか？
やってる事は同じなはずですが・・・
863 ：Name_Not_Found：2010/04/19(月) 03:41:05 ID:???
>これって何が悪いんですか？
>やってる事は同じなはずですが・・・
同じじゃなくね？

原因はbodyで
font-size: 13px
line-height: 100%
と指定しているから

親要素でfont-size 13px＆line-height 100%にすると、line-heightの値はそれぞれを掛けた13pxになる

その値は子供にも継承されるので47pxの文字部分の行間も13pxになるため重なってしまう

line-height: 1
にしてはどうか
864 ：Name_Not_Found：2010/04/19(月) 12:30:33 ID:???
>>861
駄目だと言われてるのに人の話を聞かない奴だな
865 ：Name_Not_Found：2010/04/19(月) 17:54:40 ID:???
駄目なわけじゃないだろ。
文書構造としてスマートではないけど。

１つの要素に複数class指定でいけるならいいけど
背景を3つ使いたいとかの場合ならspan3重になったりするな。

その場合はjQueryでブラウザが読み込んだ時だけタグを追加してやる方法もある。
866 ：Name_Not_Found：2010/04/19(月) 17:58:41 ID:???
それが駄目ってことだろ

つーか自分でまずい？と聞いてまずいと言われたのに問題なしとしてるそいつが駄目
867 ：862：2010/04/19(月) 17:59:13 ID:???
>>863
回答ありがとうございます。それでやってみます。
868 ：Name_Not_Found：2010/04/19(月) 20:17:50 ID:JCsnxvPE
http://wata04.blog21.fc2.com/
このサイト結構面白いこと書いてくれる

こういうメニューバーいいなぁ
869 ：Name_Not_Found：2010/04/19(月) 20:38:46 ID:???
宣伝乙
870 ：Name_Not_Found：2010/04/19(月) 21:04:14 ID:v+velj0i
>>868
宣伝するならもっと作り込んでからすればいいのに。
遅くてウザいメニューはいらない。

871 ：Name_Not_Found：2010/04/19(月) 22:52:43 ID:???
なにこの色使いの悪いページ。
872 ：Name_Not_Found：2010/04/20(火) 13:47:43 ID:???
意気込んで宣伝しに来た>>868涙目ｗｗ
くやしいのうwww
873 ：Name_Not_Found：2010/04/20(火) 15:50:11 ID:???
作ってんの厨房じゃんｗあんま叩くなｗｗｗｗｗ
874 ：Name_Not_Found：2010/04/20(火) 19:03:04 ID:???
仕方ない。これがこのスレの流れ。
いわゆる「様式美」というやつだ。
875 ：Name_Not_Found：2010/04/20(火) 19:42:21 ID:???
>設置方法を書いてほしければコメください

確かに面白いことを書いてくれている
876 ：Name_Not_Found：2010/04/20(火) 21:12:15 ID:???
少なくとも7レスは稼げたようだな
877 ：Name_Not_Found：2010/04/20(火) 22:26:40 ID:???
>>876
お前も入れて8だな。
878 ：Name_Not_Found：2010/04/21(水) 00:19:42 ID:???
10げっと
879 ：Name_Not_Found：2010/04/21(水) 00:19:57 ID:c8aY/s0v
デカイタイトルは意味あるのか？メニューも見づらいし
氏ねばいいのに
880 ：Name_Not_Found：2010/04/21(水) 00:49:24 ID:+ga4f3ZB
<div id="content"></div>
のなかに画像を表示させたらその下の
<div id="footer"></div>
の線が画像にかぶってしまうのですが画像のサイズって認識されないものですか？
881 ：Name_Not_Found：2010/04/21(水) 13:23:31 ID:???
お前の書き方が間違ってるだけだろ
882 ：Name_Not_Found：2010/04/21(水) 15:55:40 ID:???
もうちょい詳細なソース書けばわかるかもね。
883 ：Name_Not_Found：2010/04/21(水) 20:25:49 ID:???
clearfix関連と勝手に予想
884 ：Name_Not_Found：2010/04/21(水) 22:00:17 ID:???
同じ環境から同じスタイルの文字を見て違って見えることってありますか？
885 ：Name_Not_Found：2010/04/21(水) 22:19:51 ID:???
urlあればurlはれ
ソースあるんならソースはれ
886 ：Name_Not_Found：2010/04/21(水) 22:20:08 ID:???
　　□
　　□
■■■■■■■■
　　□
　　□
　　□
　　□

ちょっとわかりづらいかもしれませんが
□にnaviで■にトップタイトル入れてるサイトを作ってます
■□両方fixedで固定するとfixedされてないコンテンツが
ブラウザのサイズを変えるとコンテンツだけが移動するんです

これは全idを固定した方がいいんでしょうか？何かうまい作り方があれば教えてもらえないでしょうか？
887 ：Name_Not_Found：2010/04/21(水) 22:24:56 ID:???
ちょっとじゃなくて何をやりたいんだか全然わからん
コンテンツは移動することを前提に組まなきゃ苦労するぞ
888 ：880：2010/04/21(水) 22:27:52 ID:ZO96wO1K
HTML側
<div id="content">

<div class="pic">
<a href="画像" class="thickbox" rel="sample1"><img src="画像" /></a>
</div>
<div class="pic">
<a href="画像" class="thickbox" rel="sample1"><img src="画像" /></a>
</div>


</div>

<div id="footer">
<address>Copyright</address>
</div>
889 ：８８０：2010/04/21(水) 22:31:26 ID:???
CSS設定
div.pic{
margin:10px;
padding:0;
float:left;
width:120px;
height:80px;
border:1px solid #cccccc;
}
div#content img{
width:120px;
height:80px;
}

div#footer{
background-image : url(線の画像);
background-repeat : repeat-x;
margin-top : 25px;
padding-top : 8px;
float : clear
;}

address{
font-size : 0.75em;
font-style: normal;
text-align : center
;}

です
890 ：Name_Not_Found：2010/04/21(水) 22:33:43 ID:???
idもclassの中も書けよこいつは
891 ：Name_Not_Found：2010/04/21(水) 23:31:27 ID:???
float : clear
↓
clear:left
892 ：Name_Not_Found：2010/04/21(水) 23:58:42 ID:???
div#contentのなかのfloatだから、その中でclearした方が安全だと思う
>>883のいうとおりclearfixとか
893 ：Name_Not_Found：2010/04/22(木) 00:21:38 ID:???
>>892
footerの線がどうとか言ってるんだからclearfixなんて必要なく>>892だろｗ
894 ：Name_Not_Found：2010/04/22(木) 17:18:13 ID:WJ5HTyLI
バカだ、、、限りなくバカだ、、、
895 ：Name_Not_Found：2010/04/22(木) 21:08:22 ID:???
自己紹介しなくていいよ
896 ：８８０：2010/04/22(木) 21:35:58 ID:UGdSMaKN
本当に何を言ってるのか良くわからないのですが

div#content{
width : 564px;
margin-left : auto;
margin-right : auto
;}

ここですか？

class="thickbox"

は

http://journal.mycom.co.jp/articles/2007/07/12/thickbox/index.html

見てやったので中身は良くわかりません
ごめんなさい
897 ：Name_Not_Found：2010/04/22(木) 21:38:35 ID:???
>>896
ttp://az-store.nrym.org/archive/mynotes/lecture/css21/position
898 ：Name_Not_Found：2010/04/22(木) 21:41:39 ID:???
ごめんなさい

解決しました

ありがとうございます。
899 ：Name_Not_Found：2010/04/23(金) 07:22:13 ID:5yKqYI2h
◆こんな新CSSを実現せよ
スクロールバーを隠してホイールで使おう

body{scrollbar:hidden;}
body{scrollbar-x:hidden;}
body{scrollbar-y:hidden;}
body{scrollbar-width:10px;}
body{scrollbar-width-x:5px;}
body{scrollbar-width-y:5px;}

table{scrollbar-width-x:0px;}
span{scrollbar-width-y:0px;}
900 ：Name_Not_Found：2010/04/23(金) 12:23:28 ID:???
スレチ
901 ：Name_Not_Found：2010/04/23(金) 12:27:00 ID:???
マルチだからスルーしておけ
(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ6
http://pc11.2ch.net/test/read.cgi/hp/1266835969/583
902 ：Name_Not_Found：2010/04/23(金) 15:20:51 ID:???
どうでもいいが「スレチ」と言った人に「スルーしろ」と言ってる方が構ってるように見える
903 ：Name_Not_Found：2010/04/23(金) 15:37:21 ID:???
俺も同じことを思ったが暖かいしどうでもよくなった
904 ：Name_Not_Found：2010/04/24(土) 00:08:56 ID:???
bodyで幅を指定しているのですがリストタグを使ったところ幅から飛び出して表示されてしまうのですが
これはどういうこと？
905 ：Name_Not_Found：2010/04/24(土) 02:45:33 ID:MN2bAt6B
wrapで幅指定
906 ：Name_Not_Found：2010/04/24(土) 04:04:13 ID:fjJFFQwR
画像に style="vertical-align: middle;"を指定すると
すぐ横のテキストリンクの下線（数字の部分のみ）がぐにゃっとなるのですが解決方法ありますか？
907 ：Name_Not_Found：2010/04/24(土) 12:46:58 ID:???
>>904>>906
最小単位のソースを出せ
908 ：Name_Not_Found：2010/04/24(土) 14:15:11 ID:???
IE9でopacity, rgbaが実装されるそうです。
<!--[if IE]>～<[endif]-->や、24bitPNG画像を使わずに
IE6～9、Firefox, Chrome, Safari, Operaで背景だけ透過させる方法を教えてください。
909 ：Name_Not_Found：2010/04/24(土) 15:30:21 ID:???
CSSって細かな事やろうと思うと
互換性の問題とか出てくる事多いな
便利な部分も確かにあるけど、所詮Webレベル

しかも、基本的にデザイナーには向かず、技術者しか使えない事も多い
910 ：Name_Not_Found：2010/04/24(土) 16:13:30 ID:???
>>908
IEは確か7から
他のはモダンブラウザと呼ばれるようになってから全部opacity入れてるわい
911 ：Name_Not_Found：2010/04/25(日) 02:24:38 ID:???
htmlを書くときのルールなのですがdivなどで囲む場合は中のタグはスペースをいれないと駄目なのですか？

<div id="test">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>

上記のようにしないと駄目？

それともこれでもいい？
<div id="test">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
912 ：Name_Not_Found：2010/04/25(日) 02:41:08 ID:???
俺の目がおかしいのかとドキドキするじゃないか
913 ：Name_Not_Found：2010/04/25(日) 02:46:26 ID:???
>>911
もしかして字下げのこと？
HTMLのそれは構造が見やすくなるというだけで必須ではないよ
914 ：Name_Not_Found：2010/04/25(日) 02:50:26 ID:???
>>912
俺もびっくりした、全角にするべきだったわ

>>913
ありがとう
915 ：Name_Not_Found：2010/04/25(日) 23:37:33 ID:???
フォームタグなのだけど送らせたいメールアドレスはどこに書けばいいのでしょうか？
入門書に付属していたhtmlとcssを丸々コピペしたのでわかりません。
フォームはできているので送信を押したらメールが送られるようにしたいです。
916 ：Name_Not_Found：2010/04/25(日) 23:40:21 ID:???
すれち。あと勘違い。
917 ：Name_Not_Found：2010/04/26(月) 00:25:05 ID:???
すまんそ、こっちはCSSのスレだね
918 ：Name_Not_Found：2010/04/26(月) 12:09:44 ID:+7Fyq4A4
例えば

■■■■ 　■■■■ 　■■■■ 　■■■■
■ A ■ 　■ B ■ 　■ C ■ 　■ D ■
■■■■ 　■■■■ 　■■■■ 　■■■■

という四つの異なった画像を並べて、それぞれの画像にそれぞれ違ったリンクを貼りたいのですが、スタイルシートを使う場合どうかいてよいかわかりません。
ご指南ください。

919 ：Name_Not_Found：2010/04/26(月) 12:11:25 ID:+7Fyq4A4
すいません・・上の画像、崩れてしまいました・・orz
A.gif B.gif C.gif D.gif　です。
920 ：Name_Not_Found：2010/04/26(月) 12:18:06 ID:???
HTMLだけで書けるでしょ
921 ：Name_Not_Found：2010/04/26(月) 12:50:03 ID:???
>>918
画像だけならインラインなんだから
そのまま並べて書けるだろ
リストでやりたいという場合ならfloat
ちなみにリンクについては単純にhtmlの問題で画像をaでくくればいい
922 ：Name_Not_Found：2010/04/26(月) 17:02:58 ID:???
>>909,910
IE9の話が出る前は、単色の背景だけを透過させるなら

-css-
div {
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#BFFFFFFF, EndColorStr=#BFFFFFFF);
background-color: rgba(255,255,255,0.75);
}

-html-
<div>こんにちは</div>

で、ほぼ全てのブラウザで出来ているのですが、IE9の事も考えるとどうしたらいいものか分かりません。
やはりIcssファイルを分けるか、png画像を用意するしかないのでしょうか・・・。
923 ：Name_Not_Found：2010/04/26(月) 17:33:17 ID:???
>>922
filterはCSSじゃないのでスレチ
924 ：Name_Not_Found：2010/04/26(月) 17:44:34 ID:???
>>923
filterの質問ではありません
925 ：Name_Not_Found：2010/04/26(月) 17:48:00 ID:???
じゃあ先行実装はスレチ
926 ：Name_Not_Found：2010/04/26(月) 17:54:19 ID:???
でてないものは試しようないな。
927 ：Name_Not_Found：2010/04/26(月) 17:55:01 ID:???
>>922
他のブラウザはopacity実装されてるって言われてるのに人の話を聞かない奴だな
928 ：Name_Not_Found：2010/04/26(月) 18:00:20 ID:???
それも先行実装
929 ：Name_Not_Found：2010/04/26(月) 18:38:09 ID:???
>>922
div {
background-image: url(http://www.uploda.tv/v/uptv0066274.png);
}
930 ：Name_Not_Found：2010/04/26(月) 19:02:33 ID:???
>>926
確かにそうですね。
まだIE9でfilterとopacityやrgbaが重なるかも定かではないですし
流石に今のうちから対応しようというのは気が早すぎでしょうか。

>>927
出来ればコードを書いていただけないでしょうか。
opacityはそれ以下の要素全てを透過させてしまうと記憶しています。

>>929
ありがとうございます。
IE用外部CSSファイルやpngファイルは使いたくない、という前提は我侭でしょうか。

ちなみに、透過pngを利用した例でIE6互換にするには、IE6以下用の* htmlハックを利用し
background-image: none;を指定した上で、filter:AlphaImageLoaderやfilter:Gradient
あるいはbackground-colorとfilter:Alpha+下位要素全てに対してposition: relative;の記述が必要になりそうです。
931 ：Name_Not_Found：2010/04/26(月) 19:14:29 ID:???
>>930
png無しだと無理
932 ：Name_Not_Found：2010/04/26(月) 19:41:06 ID:???
>>930
お前のところにはIE6でJS切って行ってやるから安心しろ
手が出ないだろうｗｗｗ
933 ：Name_Not_Found：2010/04/26(月) 19:45:16 ID:???
* html
934 ：Name_Not_Found：2010/04/26(月) 19:55:56 ID:???
CSSドロップダウンメニューでリンク先を開くと通常のHTMLが表示されるんだけど
メニューを残したままメニューの横にリンク先表示させるにはどうしたら良いんですか？
凄く基本的なことなのかもしれないが…
全然わからんのです
935 ：Name_Not_Found：2010/04/26(月) 19:58:43 ID:???
>>934
リンク先のページにもメニューをコピペ
936 ：Name_Not_Found：2010/04/26(月) 20:28:33 ID:???
>>935
即レスサンクス。
なるほどな。言われないとずっと気がつかなかったかも
フレームじゃないからターゲットで指定は出来ないから
それに変わる用語を探してた
有り難う御座います
937 ：Name_Not_Found：2010/04/26(月) 22:35:44 ID:???
<input type="text"> な部分で、valueに指定したい値が長さがバラバラで10個くらいあるんですが、widthを動的に変える事はできますか？
widthをvalueの長さに合わせたいのです。
938 ：Name_Not_Found：2010/04/26(月) 22:41:06 ID:???
emで駄目な話ならスレチ
939 ：Name_Not_Found：2010/04/27(火) 18:24:33 ID:???
>937
できるよ
940 ：Name_Not_Found：2010/05/02(日) 09:27:55 ID:???
<div style="width:100px;">
<table>
<tr>

<td>
<pre style="width:90%; overflow: scroll;">
00000000000000000000000000000000000000000000000000
</pre>
</td>

<td>
<pre style="width:90%; overflow: scroll;">
11111111111111111111111111111111111111111111111111
</pre>
</td>

</tr>
</table>
</div>

%指定だと横に要素全体が伸びてしまいます。
うまい方法はありませんでしょうか
px指定なら意図した表示になります。よろしくお願いします。
941 ：Name_Not_Found：2010/05/02(日) 09:42:23 ID:???
px指定でいいやん
942 ：Name_Not_Found：2010/05/02(日) 09:55:46 ID:???
テーブルレイアウトしてるのに
絶対指定を嫌う理由がわからない
意図した表示にこだわるならどんな方法でもいいんでしょ？
943 ：Name_Not_Found：2010/05/02(日) 10:49:15 ID:???
tableにwidth指定してtable-layout:fixed;にしろよ
944 ：Name_Not_Found：2010/05/02(日) 11:29:15 ID:???
>>941-943
ありがとうございます。
残念ながら意図する表示にはなりませんでした。

画像を表示する雛形の部分なのでサムネイル小かサムネイル中
を表示するかで大きさが動的に変わる部分なので%指定じゃないと駄目でした。

ですが%指定じゃどうやら無理っぽいので
px指定のCSSを画面毎にを吐かせるようにして無理やり解決しました。

CSS的には解決してないんですがね　何か悔しい
945 ：Name_Not_Found：2010/05/02(日) 12:23:39 ID:???
>>943で出来るだろ
てか意図する表示ってやつを先に示せ
946 ：Name_Not_Found：2010/05/02(日) 12:49:06 ID:4rbPEjaO
http://www.andye-shibuya.comをIEで見ると、ナビゲーションの一番右だけが
落ちますがなぜでしょうか？
よろしくお願いします。
947 ：Name_Not_Found：2010/05/02(日) 13:49:53 ID:???
テーブルじゃなくて定義リストを使え
>>946
カラム落ちしてるだけだがCSS見ないと何とも
948 ：Name_Not_Found：2010/05/02(日) 14:39:48 ID:???
>>945
ありがとうございます。すみませんマジで無理でした。
悩んでも、らちがあかないのでPHPで動的にCSSを可変させるようにしました。
>>947
本当はそうしたいのですが変数一つで<td></td>の横並び数を可変させる
仕様で書いてしまったのでテーブルになっています。



949 ：Name_Not_Found：2010/05/02(日) 16:56:46 ID:4rbPEjaO
>>946 こんな感じです。
よろしくお願いします。HTML↓

<div id="header">
<div id="emotion-img">
<a href="#"><img src="#" width="250" height="250" alt=""/></a>　
</div>
<ul id="GlobalNavigation">
<li><a href="#/">HOME</a></li>
<li><a href="#">SHOPS</a></li>
<li><a href="#">SHOPPING</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">RECRUIT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

950 ：Name_Not_Found：2010/05/02(日) 16:58:06 ID:4rbPEjaO
>>946 こんな感じです。
よろしくお願いします。CSS①↓

#GlobalNavigation {display: inline;}

#GlobalNavigation li {
float:left;
padding:0;
text-align:center;
margin-top: 15px;
margin-bottom: 45px;
list-style-type: none;}


951 ：Name_Not_Found：2010/05/02(日) 17:00:06 ID:4rbPEjaO
>>946 こんな感じです。
よろしくお願いします。CSS②↓

#GlobalNavigation li a {
background-image:url(http://www13.jimdo.com/usertemplates/224915/img/bg3.jpg);
text-decoration: none;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #FFF;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
display: block;
width: 145px;
padding-top: 7px;
padding-bottom: 7px;}

#GlobalNavigation li a:hover,

#GlobalNavigation li a:focus,

#GlobalNavigation li a:active {
background-position:-150px 0;}
952 ：Name_Not_Found：2010/05/02(日) 17:20:30 ID:???
最小単位の切り出しくらいしろよ
953 ：Name_Not_Found：2010/05/02(日) 17:27:08 ID:???
div id="emotion-img"
のaタグの後ろに全角ブランクが入ってるのが影響してそうな気がしないでもないかもしれない
954 ：Name_Not_Found：2010/05/02(日) 18:06:58 ID:???
>>949
それだと改行がないから再現しなくね？
表示がおかしくなってたのは

<li>
    <a href="#/">HOME</a>
</li>

になってたからじゃねーの？
955 ：Name_Not_Found：2010/05/03(月) 01:23:22 ID:???
http://imepita.jp/20100503/043510
図の上のようにしたいのですが、IE8ではきちんとできるものの
IE6では下のようになってしまい、きちんと空白を開けることが出来ません。
原因はIE6のバグでwidthがpaddingを含んで計算されているせいだとは分かるのですが
どのようにCSSを修正すればIE8と同じように表示させられるのかが分かりません。
HTMLをいじらず、CSSの修正のみでIE8と同じようにIE6でも上下に10px、左右に20pxの余白を
表示させられる方法をどなたかお教え頂けますでしょうか。

HTMLは下記のように作成しています。

<div id="calendar">
<table border="0" cellspacing="0" cellpadding="0">
<caption class="calendarhead">2010年05月</caption>
<tr><th class="calendarday">日</th>
<th class="calendarday">月</th>
<th class="calendarday">火</th>
<th class="calendarday">水</th>
<th class="calendarday">木</th>
<th class="calendarday">金</th>
<th class="calendarday">土</th></tr>
<tr><td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday"></td>
<td align="center" class="calendarday">1</td></tr>…（中略）…</table></div>
956 ：955続き：2010/05/03(月) 01:24:23 ID:???
CSSは以下のように作成しています。

#calendar table {
padding: 10px 20px 10px 20px;
width: 190px;
color: #333333;
font-size: 90%;
line-height:1.3;
border-style: none solid solid solid;
border-width: 1px;
border-color: #FFA4A4;}

caption.calendarhead {
margin: 0px;
text-align:center;
padding: 5px 0px 0px 0px;
color: #ffffff;
font-size: 95%;
background-image:url(cal_head.gif);
background-color:#FFA4A40;}

th.calendarday {
color: #333333;
font-weight: bold;
font-size: 90%;}

.calendarday {
padding: 1px 1px 1px 0px;
color: #333333;
font-size: 90%;}
957 ：Name_Not_Found：2010/05/03(月) 01:50:43 ID:???
つ 標準モード
958 ：Name_Not_Found：2010/05/03(月) 04:15:36 ID:???
FC2ホームページ解析を使いたいのですが公式で「bodyの上に入れる」とあったのでbody直下のh1との間に
入れたのですがこれをdivタグを使って表示だけをaddressより下で表示するにはどうすればよいのでしょうか？
むしろ非表示にできますか？

【html側】

<body>
<div id="contents">
<div id"access">
<!-- [FC2 Analyzer] http://analysis.fc2.com/ -->
<script language="javascript" src="http://analyzer5.fc2.com/ana/processor.php?uid=xxxxxx" type="text/javascript"></script>
<noscript><div align="right"><img src="http://analyzer5.fc2.com/ana/icon.php?uid=xxxxxx&ref=&href=&wid=0&hei=0&col=0" /></div></noscript>
<div style="width:180px;display:inline;"><ol style="text-align:left;list-style-type:none;margin:3px;font-size:10pt;display:inline;"></ol></div>
<!-- [FC2 Analyzer] -->
</div>
<h1><a href="home.html">ほーむぺーじタイトル</a></h1>
959 ：Name_Not_Found：2010/05/03(月) 09:36:52 ID:???
＞addressより下で表示するにはどうすればよいのでしょうか？
addressってのはどこの部分だ？

基本的には、表示したい部分に貼ればおｋ
bodyの直下じゃなくても大丈夫。読み込まれる順番が変わるだけだから問題はない。
非表示にするのはおそらく規約違反だからやめとけ。
960 ：Name_Not_Found：2010/05/03(月) 10:01:01 ID:???
広告って文法ミスだらけだよな～
961 ：Name_Not_Found：2010/05/03(月) 11:03:17 ID:???
>>959
解析タグが読み込まれる前別ページに飛ばれると正しい解析が出来ないので上部に貼れと書いて合ったので
addressは最下部に設置したのですがそれより下に表示したいです
962 ：Name_Not_Found：2010/05/03(月) 11:18:57 ID:???
>>961
読み込みにそんな時間かかるような糞ページを作らなければ
最下部に設置したって構わない
963 ：Name_Not_Found：2010/05/03(月) 11:24:15 ID:???
>>961
>>959はaddressが上記構文の何処に当たるのかを知りたいんだと思うんだが。
基本的にfc2のアクセス解析（アイコンタイプ）は上部に表示されるのが当たり前。
どうしてもってんなら、div内をいじってそのaddressとやらの部分から相対位置でやればいいんじゃないか。
やったこと無いから出来るかどうかはわからんけど。
どうしても何処かの下にアクセス解析用のタグをつけたいのなら≪ソーシャル解析タイプ≫を使えば問題無いけどさ。

タグ入れ部分の話をしているのなら、
自分はjavascript仕込んでるページ以外は最下部にタグ入れして正常に動いてる。
964 ：Name_Not_Found：2010/05/03(月) 11:27:18 ID:2hsPDH9Z
>>962
本にSEOに合わせるためにフッターはhtmlの最下部にすると書いて合ったので

>>963
トン、相対位置でできるかちょっと調べて見ます
965 ：Name_Not_Found：2010/05/03(月) 11:58:11 ID:2hsPDH9Z
試しにとdivで指定して絶対の下0ピクセルでできますた、これでいいのかな？
966 ：Name_Not_Found：2010/05/04(火) 01:20:25 ID:???
いいよ （･∀･ ）
967 ：Name_Not_Found：2010/05/05(水) 15:23:31 ID:???
すいません、質問なのですが
下記サイトのようなテキストフォントは
CSSで何を指定しているのでしょうか？たまに見かけるのですが。
普通のゴシックと違いますよね。

ttp://www.hakubi.net/course/
968 ：Name_Not_Found：2010/05/05(水) 16:00:29 ID:???
>>967
こっちでは普通のメイリオになってますが
ソース見ろよ
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
969 ：Name_Not_Found：2010/05/06(木) 02:56:05 ID:???
ヒラギノ入れてると醜くなるんだよな、その指定だと
970 ：Name_Not_Found：2010/05/06(木) 09:18:43 ID:???
ヒラギノはSafariのレンダリングじゃないとまともに見れない
971 ：Name_Not_Found：2010/05/06(木) 10:00:36 ID:???
Winの話ね…
972 ：Name_Not_Found：2010/05/06(木) 15:41:11 ID:jAynGY46
サイドメニューのボックス(box0)の上(top)に、各ページへのメニュー(box1)を表示して、
下(bottom)に、プライバシーポリシーなど(box2)へのリンクを表示したいと
思っています。
高さが可変の場合、box1とbox2の間に空白を開けて、常にbox2の下辺が
box0の下辺と同じ位置にくるようにいるには、どうすれば良いのでしょうか？

よろしくお願いします。
973 ：Name_Not_Found：2010/05/06(木) 18:01:47 ID:???
position:absolute;
974 ：Web就活中の元新聞記者：2010/05/06(木) 20:39:53 ID:hInWW8ft
>>709
●外観
　タイトルとサマリーの文字寸ステップアップ比や行間を要再考
●読ませ方
　たとえば政党比較なら表形式で全く同条件に
　政治的主張があってもデータと主張は区別
　恣意性のないデータの列挙で主張に持ち込めたら及第点
●ヘッドライン
　「○○の件」ではなく「○○は××」の形が必要
●著作権
　自サイトの一部として他サイトへのリンクはWebでも違反
　本文もすべて引用元の出典が必要
　
マス板の領域になるが
保守思想だからといって保守媒体で採用されない
情報を収集整理して活用する能力が問われる
意見・調査結果・引用を区別できず書くのは
ネチズンとしても記者としても致命的
この板的には
H1～H4などといったルールが
文章を書くうえでも良い先生になると思います
975 ：Name_Not_Found：2010/05/06(木) 21:34:09 ID:???
>>972
文字が大きくて画面サイズが小さい人はどうするつもりよ
設計ミス

>>974
お帰りください
976 ：Name_Not_Found：2010/05/08(土) 18:21:34 ID:???
h1タグと中にinputタグを含んだformタグを横に並べたいのですが、いい方法はありますか？
977 ：Name_Not_Found：2010/05/08(土) 19:39:38 ID:???
まずどう書いてどう駄目なのかを示しましょう
手取り足取り教えてもらおうと思わず自分でやってみること推奨
978 ：Name_Not_Found：2010/05/08(土) 19:43:11 ID:4Os/K8wS
h1タグの改行を解除するにはdisplay:inlineを使うといいと聞いたので、h1に適用させて
<h1>hogehoge</h1>
<form ....>
....
</form>

とやってみましたが、改行されてしまうようです＞＜
979 ：Name_Not_Found：2010/05/08(土) 20:06:17 ID:???
formもブロック要素なのでh1をinlineにするだけでは駄目です
inlineで横並びにするよりもfloatを使ったほうがこの場合良いと思いますよ
980 ：Name_Not_Found：2010/05/08(土) 20:18:23 ID:???
中に、と書いてあるのは気のせいなんだろうか
formは基本的に中にブロック要素を必要とするから
＜form＞＜h1＞ほげ＜input /＞＜/h1＞＜/form＞
981 ：Name_Not_Found：2010/05/08(土) 20:27:41 ID:???
「h1タグ」と「中にinputタグを含んだformタグ」を
982 ：Name_Not_Found：2010/05/08(土) 20:29:26 ID:UrvLIk6o
まあ、、、日本語が苦手でもcssには関係ないので

983 ：Name_Not_Found：2010/05/08(土) 20:32:50 ID:???
英語は出来るってことかえ
984 ：Name_Not_Found：2010/05/08(土) 21:17:34 ID:???
ごめん酔っぱらいの戯言だった
985 ：Name_Not_Found：2010/05/09(日) 00:42:29 ID:???
リストを外枠の要素に対して左寄せで表示したいと思っています。

<ul>タグを使用しリスト表示を行っているのですがどうもブラウザによって要素内の
文字列を外側のブロックに対して左寄せにする為のCSSの指定が異なっている様なのですが
どのブラウザでもこれらを実現する事の出来る共通のCSSはありますか？
現在は、スタイルシートに次の①②を同時に記述する事により実現していますが、
そもそもこの様な指定に問題があるのでは無いかと不安です。

①　padding-left:0px;　　→　FireFox　3.5.9　でＯＫ
②　margin-left:0px;　　 →　Lunascape 6.0.3　でＯＫ

<table>
<tr>
<td>
　<ul>
　　<li>
　　　　あいうえお
　　</li>
　</ul>
</td>
</tr>
</table>
986 ：Name_Not_Found：2010/05/09(日) 07:29:00 ID:???
>>985
問題なし
OK
987 ：Name_Not_Found：2010/05/09(日) 10:04:55 ID:???
>>986
サンクス
988 ：Name_Not_Found：2010/05/09(日) 10:16:00 ID:???
フッターの簡単なサイトマップみたいな部分に
liをfloat:left;で横並びにして表示してるんですが
このリスト全体を中央寄せにできません

フッダーのdivとその中のulをtext-align:center;にしてるんですが
左寄せにしたから打ち消しになってるんでしょうか？
解決法のご教示お願いします
989 ：Name_Not_Found：2010/05/09(日) 11:36:02 ID:???
>>988
IEをアップグレードしたからとか？
990 ：Name_Not_Found：2010/05/09(日) 12:25:26 ID:???
>>988
ならないのが普通、今までお前は自分の環境以外では中央寄せじゃない指定をしていただけ
ttp://hxxk.jp/2008/09/29/0118
991 ：Name_Not_Found：2010/05/09(日) 14:26:57 ID:???
次スレは無しで良いのかね？

(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ6
http://pc11.2ch.net/test/read.cgi/hp/1266835969/
992 ：Name_Not_Found：2010/05/09(日) 15:41:24 ID:???
立てたなら告知しなさい

次スレ
CSS初心者スレッド＝8th＝
http://pc11.2ch.net/test/read.cgi/hp/1273383771/
993 ：Name_Not_Found：2010/05/09(日) 15:50:13 ID:???
>>989
Firefox使ってます。

>>990
ならないから、どうすればできるのですかと質問しているんですが・・・。
正しい指定の方法を教えていただけると助かります。
994 ：Name_Not_Found：2010/05/09(日) 15:53:22 ID:???
>>992
たった今立て終わったんだよ
連騰規制に引っかかってテンプレも途中で止まってただけ

>>993
教えてもらったところに書いてあるじゃないか
リンクまで全部辿って行きなよ
995 ：Name_Not_Found：2010/05/09(日) 16:15:44 ID:???
>>994
CSSの書き方がわからないのに
DOCTYPE宣言の問題について教えてもらっても何の役にも立たないと思いました。
質問の仕方が悪かったんですかね。

結局ググったらあっさり自己解決しました。
みなさんどうもありがとうございました。
996 ：Name_Not_Found：2010/05/09(日) 16:23:53 ID:???
リンク辿ったところに普通にあったがナー
997 ：Name_Not_Found：2010/05/09(日) 16:27:18 ID:???
それならリンク先を辿ったところのURLを貼ってやればいいだろｗ
998 ：Name_Not_Found：2010/05/09(日) 16:29:16 ID:???
答えてもらってわからなかったからといって教え方が悪いと逆ギレｗ
999 ：Name_Not_Found：2010/05/09(日) 16:34:56 ID:???
最近そういう奴多いな
1000 ：Name_Not_Found：2010/05/09(日) 16:35:36 ID:???
1000ならCSS3対応ブラウザが席巻する
1001 ：１００１：
このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。