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

CSSに関する質問はこちらへどうぞ。 ※　議論はよそで　※
■■■■■　質問のしかた　■■■■■
●基礎は解説サイト（→【解説など】>>3-4）で勉強してください。
●質問の前に【FAQ】（>>5-9）を参照して、既出の再掲を避けて下さい。
●【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
　WinIEの場合は、[Ctrl+F]で検索できます。
●ブラウザによって対応していないプロパティーやバグがありますので、
　解説サイト（→【関連リンク】）の対応表や「CSSバグリスト」に目を通しておきませう。
●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。validator（>>2）でチェックできます。

初心者の疑問は大抵ここまでで解決します。

●OSやブラウザの種類とヴァージョンについては必ず明記してください。
　特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは？」と求められたら応じませう。
　その方が回答が早く得られます。質問は具体的に。

【前スレッド】http://pc11.2ch.net/test/read.cgi/hp/1179075345/
関聯リンクは>>2-10
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9

【関聯スレッド】
CSS/DHTMLバグ辞典スレッド【第５版】
　http://pc8.2ch.net/test/read.cgi/hp/1144494359/
代替スタイルシートに萌え〜
　http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
　http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるデザインサイト 39
　http://pc11.2ch.net/test/read.cgi/hp/1175152900/

【仕様書】
CSS1の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/css1/toc.htm
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

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

【解説など】
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・K@tsukun's PAGE! > 付録：CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/index.html
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/index.html

【解説など】
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
　http://www.nextindex.net/web/CSS/index.html
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
　http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方
　http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
　http://ike.s33.xrea.com/
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを："作れ";} 発表所
　http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php

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

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

【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　ttp://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
　ttp://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でも崩れない段組みの実例）
　ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
　http://css.maxdesign.com.au/index.htm

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

>>2の関聯スレッドの"CSSでイケてるデザインサイト 39"は次スレに移行してた
CSSでイケてるデザインサイト 40
http://pc11.2ch.net/test/read.cgi/hp/1182759619/
すまん

>>1
乙

>>1乙

>>前スレ997
HTMLの場合はbodyに。
XHTMLだとHTMLでもいいっちゃいいけどbodyの方が好ましい。

質問宜しいでしょうか？

はい

毎日スレ降臨自演擁護で激痛
こんなヤツが本出してます買ってね☆

わにちゃんといっしょ
http://pc11.2ch.net/test/read.cgi/hp/1184405011/l50

ブログ（JUGEM）の編集をしています。
全体(layout)を100%にして、
sideを220px、mainを残り全部というようにしたいのですが、
どうすればいいか分かりません。
ぐぐるにも、検索ワードが分からなくて・・
mainのwidthの部分をどのように指定したら良いでしょうか？
お願いします。

#layout {
width: 100%
}

#main {
float: right;
width: ;
}

#side {
float: left;
width: 220px;
}

ネガティブマージン。
簡単に言えばmainのマージンにサイドバー分の幅をマイナスで指定。

>>17
夜中にありがとう。
でも出来るのに朝になっちゃったよ・・・

ネガティブマージンでぐぐったらいいサイトが見つかりました。
でもなかなかうまくいかず・・結局こんなんになりました。
採点ヨロ

#layout {
width: 100%;
}

#main {
position:relative;
float: right;
width: 100%;
margin-left: -240px;
left : 240px;
}

#side {
float: left;
width: 220px;
}

ちなみにHTMLソースは本文が上に来ているので
ぐぐった先のソースでは良く分からなかったorz

連投スマソ
ちなみに18=16です。

今良く見てみたら右端の方切れてた・・・orz
もうどうすればいいのか分からないYO

>>18

#layout {
width: 100%;
position: relative;
}

#main {
margin-left: 240px;
}

#side {
width: 220px;
position: absolute;
left: 0px;
top: 0px;
}

完全独学で趣味でやってる程度の自分が言うのもなんだけど、
こういうのってものすごく基本的な事じゃないのか・・・？

CSSレイアウトでググると一番上に出てくるんだが。
とはいえ、自分にも勉強になりました。

>>16,>>18
まずテンプレを読め。

div 要素内のテキストを水平中央および垂直中央に配置するには、どうしたらよいでしょうか？
環境は IE6 および FireFox2 です。

テンプレ嫁

Blogとかで文中に画像を入れるときに右寄せとか左寄せをするときに

<div="right">
<a href="link.html"><img img="gazou.jpg" /></a>
</div>
とdivで囲ってdivのクラスにCSSでフロートrightをするのか

<a href="link.html"><img class="right" img="gazou.jpg" /></a>
としてimgのクラスにCSSでフロートrightを指定するのか

どちらの方法がいいでしょうか？

フロートしたいがために文書構造を変えるのはおかしい。
フロートなしに普段だったらどういうマークアップをするかを考えろ。
ちなみに俺だったらul-li-imgだ。
ついでにrightというクラス名はヤメロ。

strict論はstrictスレでやれカス
まあ内容は否定しないが

divってデザインのためのものでそ？

No

multipleIEのような、過去のNNで表示確認できるソフト・ブラウザエミュレーターのような物ってあるのでしょうか？

過去のNNを入れればいいんじゃ。

>>29
IE以外は重複インストールができないってことはないから>>30

ロールオーバーするナビゲーションを作ろうと以下のようにしたら、IEでズレました。
これは多分IEの解釈の問題だと思うのですが、昨日から解決方法を考えているのですが、
まったくわかりません。誰か教えてくださいお願いします。

#menu ul{
margin : 0 ;
padding : 5px 5px 10px 5px ;
background : url("./images/nav-backOff.png") left top repeat-x transparent ;
}
#menu ul li{
margin : 0 10px ;
display : inline ;
font-size : 90% ;
}
#menu li a{
padding : 8px 15px 8px 15px ;
background : transparent ;
color : #ffffff ;
text-decoration : none ;
font : bold 90% sans-serif ;
}
#menu li a:hover{
background : url("./images/nav-backOn.png") left top repeat-x transparent ;
color : #ffffff ;
}

>>32
HTMLの部分とか
何がどうずれるのかとか

遅レスすみません。
HTMLは普通な感じです。
<div id="menu">
<h2>Menu</h2>
<ul>
<li><a href="">hogehoge1</a></li>
<li><a href="" >hogehoge2</a></li>
</ul>
</div>

paddingをFxでピッタリになるようにすると、
IEではa要素がFxで見た時よりも上寄りになります。

>>34
エスパー能力を発揮すると、
hoverした時の画像が、ulに指定した画像と高さがピッタリ重ならない、という事？

>>34 そういうことです。

…が、すみません、。自己解決しました。
原因は、

Fxでのデフォsans-serif : Meiryo
IEでのデフォsans-serif : MS PGothic

と、違うフォントだったためにフォントの高さが違うぶんズレたと。

:y=-( ﾟдﾟ)・∵;; ﾀｰﾝ

なるほど。
「自分だけ見えればいい。」というわけだな。

　　　あとで泣くなよ。

>>36
フォントなんて何がインストールされてるかわからないんだし
ずれてもいい作りにしとけよ、ガンガレ。

ごめんよ〜

border-collapseプロパティを使って、テーブルの枠線を一本の線で表示させるようにたところ、
プレビュー画面では正常に表示されているのに、印刷してみると、外枠だけが印刷されませんでした。
こういう場合に考えられる限定には、どのようなものが考えられるでしょうか？
Dreamweaver 8で作成し、Firefoxで印刷しました。
よろしくお願いします。

プリンタの設定もあるからうんともすんとも

<ul id="listbox">
<li>2006/01/17 </li>
<li>2005/12/20</li>
</ul>
* { margin: 0px;
padding: 0px; }
#listbox { font-size: 76%;
width: 504px;
list-style-type: none; }
#listbox li { border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #CCCCCC; }

作っているページの一部ソースですが、このソースで表示すると
IE6、firefoxなどではリストの左端に隙間が無く表示されますが
IE5.01、5.5（multipleIEs)で見ると左端に文字一つ分程度の空きが出来てしまいます
これをキチンと左端にくっつくように表示するにはどうすればよいのでしょうか・・・

>>42
バグ報告してきてくれ、たぶん�_

すみません質問させてください……。
<html>
<meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'>
<head>
<title>お試し</title>

<style type="text/css">
<!--
body { background: #000000 url(image/gi.jpg) no-repeat fixed left bottom; margin: 0 0 0 0; }
#container { background: url(image/gi.jpg) no-repeat fixed right top; width: 100%; margin: 0 0 0 0; padding: 80px 0 0 0; }
p { font-size: 200px; color: #FFFFFF; text-align: center; }
-->
</style>
</head>

<body>
<div id="container">
<p>
<strong>これは実験です</strong>
</p>
</div>
</body>…………
と教えてもらったんですが。背景画像を左下　右上に固定指定したいのですが
2枚目の固定指定が文字「これは実験です」と一緒にスクロールしてしまいます。
どうすればいいか教えていただけませんか？

>>44
MacIE, Firefox, Safari, Operaではしっかり文字だけがスクロールする。
IE6, IE7限定の話なら今はテスト出来ない。

IE7はできるだろう。
IE6は無理、非対応。

速報!!!!
http://hiro.pya.jp/soku.php
http://hiro.pya.jp/soku2.php
http://hiro.pya.jp/soku3.php

>>45
すみません、教えていただきありがとうございます。
どうすれば非対応のエクスプローラーに二つの画像を背景に固定できるようになりますか？
いろいろなサイトを見たのですがわからなくて…すみません

>>48
ブラウザを作れ
つーかだから新しいバージョンのブラウザが出たんだよ・・・

赤い洞窟の聖ティシリオ教会のそばの激しい渦巻きの近くの白いハシバミの森の泉のほとりにある聖マリア教会

初心者質問スレと悩みましたがこちらで。

下記のようにHTMLとCSSを記述しています。目的はhoverを使い、マウスオーバーで
画像が変わるメニューを作ることです。
メニューの背景画像にリンク先の内容が描かれています（BBS、リンクなど）
実際のメニューは下記のように１つのみではなく、５つ６つ並べていて、現在問題なく動いてます

質問は、リンクに名前が伴ってない点、画像にALTで解説が付かない
などの点でSEO的に不利だと感じます。これらの解決策があったら教えてください


・HTML部分
<div ID="navi01"><a HREF="./bbs.html"></a></div>

・CSS部分
#navi01 a {
text-decoration: none;
background-image: url(http://画像１.jpg);
}
#navi01 a:hover {
text-decoration: none;
background-image: url(http://画像２/jpg);
}

SEOスレ池

<div ID="navi01"><a HREF="./bbs.html"><span>掲示板</span></a></div>

#navi01 a span{
display : none;
}
とか

>>51
通常時の画像はアンカータグの中に入れてaltをつけておく。
ロールオーバー時の画像は背景に指定しておく。
hoverで通常時の画像のvisibilityをhiddenに変更。

質問です

<div>
<p>WEB<em id="red">site</em></p>
<p>12345<em>67890</em></p>
</div>

この場合のsiteの文字を赤くしたい場合

em#red {color: #FF0000;}
#red {color: #FF0000;}

このどちらでも赤くなりますが、この二つ方法で結果的な違いって何かあるのでしょうか？
（指定したプロパティによっては値が適応される・されない場合がある、とか）
「em#red と指定した方が#redをどのタグに指定したのか分かり易い」程度の違いという解釈でいいのでしょうか
持ってる参考書等では、セレクタ部分の書き方で「タグ名とid名をくっつける」という方法は解説されてないもので
気になっているのですが

>>55
最も望ましい方法は
<p>WEB<em>site</em></p>
em { color : #ff0000; }
もしスタイルを変えたくなったときに#red { color:blue; }とでもするつもりか。
物理要素のような指定はやめろ。
em#redと#redの違いは優先度がem#red>#red。
取り敢えず
ttp://hp.vector.co.jp/authors/VA022006/css/
ここを参考にしときなさい。

あ、すまん酔ってた。優先度は違う。

なんでそんな偉そうなの

他人に厳しく自分に甘いクズなんだろ

自分に酔ってたって書いてあるじゃん

定義リストを横に並べる方法はありますでしょうか？

<dl>
　<dt>A</dt>
　　<dd><あああああ</dd>
　<dt>B</dt>
　　<dd>いいいいい</dd>
</dl>

とした時に、

A　あああああ B　いいいいい

というようにしたいのですが…

>>61
display:inline;

<dl>
　<dt>A</dt>
　　<dd><あああああ</dd>
</dl>

<dl>
　<dt>B</dt>
　　<dd>いいいいい</dd>
</dl>

こうしちゃえば？

>>62-63
解決しました！ありがとうございます

>>63
意味が変わるじゃん

てか>>61に対する回答にもなってないし

img { border: 2px solid; }
a:link { color: #f00; }
a:active { color: #f00; }
a:visited { color: #f00; }
a:hover { color:#f00; background-color: #000; }

このCSSで

<body>
<a href="***"><img src="xxx"></a>
</body>

とすると、Firefox等では画像の枠がちゃんと#f00になるのですが
IE6だけデフォのリンク色(青)になってしまいます

IE6で同様の事をしようとすると、HTMLで
<body link="#f00" alink="#f00" vlink="#f00">
と指定してやらないと枠が#f00になってくれません

これはCSSに問題があるのでしょうか？
それともIEのバグなんでしょうか？

http://www.pachiweb.com/futaba.htm
現在画像bbsをスタイルシートで作り直してるんですが
どうも1記事間のマージンがoperaのみうまくつきません。
レスがある方には1記事間にマージンがつき
ない方には付きません。

たぶん説明ではわかりにくいのでoperaで見ていただいた方が
早いと思うのですが・・・・・・・

>>67
＞img { border: 2px solid; }
まず自分を疑え。

すいません、自己解決しました。

>>68
意味不明な上、わざわざソース見ろって言ってんの？
現象が起きる最小ソースを貼れ。

>>70
あそ。

Windows IE5〜IE5.5からCSSを読み込ませないhackってありますか？

>>69
>>67はIEのバグでしょ。colorプロパティの値はborder-colorプロパティの初
期値になるんだから、色が変わらないほうがおかしい。

border-colorプロパティの初期値＝blueだろう

回答ありがとうございます
やはりIEのバグという線が濃厚ってことでしょうか
もう少し自分でもいじってみたのですが
bodyにlink,alink,vlinkを指定する以外に回避出来ないようです
（互換モード、標準モード共に症状が出ました）

回避法が見つかるまで諦めてそうしておこうと思います
HTML4.01strictを宣言出来ない弊害がありますが･･･
IE7では直っているのかな？

>>67
img { border: 2px solid #f00; }
と指定すればIEでも枠が赤になりますけど
それはa:linkのcolorが適用されている訳じゃないので
根本的な解決になってないと思いまして

>>76
何勘違いしてるわけ？基本知らんの？
普通imgのborderは消すんだよ。

>>76
a:link img { border: 2px solid red }じゃだめなの？

>>75
> Initial: the value of the 'color' property
http://www.w3.org/TR/CSS21/box.html#border-color-properties

>>78
; が無いからダメです。

>>77
それは初耳でした
imgのborderを付ける方が邪道なんですね
画像は枠があったほうがアンカーが付いてるって
分かりやすいと思ったのですが

スタイルシートを何も書かずに

<body>
<a href="***"><img src="xxx"></a>
</body>

とやるとOperaが枠なし、FirefoxとIEが枠ありになりますし
ブラウザによってばらばらなんですよね
W3C勧告ではデフォ値までは決められてないのかな
調べてみます

>>77
論点はそこじゃないでしょ。
borderの有無をどうするかじゃなくて
boeder有りならどうすればいいかってこと。

3行目ミスった
×boeder
○border

>>82
linkにborderが欲しいんだろ？違うの？

a img { border: 2px solid red; }
とか指定すればいいじゃん
何が論点なんだ？

「なぜ低レベルか」を論点にしたいものだなぁ・・・

すみません、もう少し経緯を書いておきます

a:link { color: #f00; }
a:active { color: #f00; }
a:visited { color: #f00; }
a:hover { color:#f00; background-color: #000; }

<body>
<a href="***"><img src="xxx"></a>
</body>

最初CSSを書いたのはこれだけだったのですが
何故かIE6だけ枠の色が#f00にならないのに加えて
>>81のようにOperaだけ枠無しになってしまうので
img { border: 2px solid; } を書き足しました
つまり↑この部分はOpera対応の為だけの一文です
（IE6・Firefoxではこれが初期値なので書かなくても枠有りになります）

これでFirefoxとOperaは意図どおりになったのですが
IE6だけ枠の色が反映されてないのはバグなのか？
という事を質問したと言うわけです

疑似クラスの順番おかしいぞ。
この場合どうでもいいけどさ。

>>85
文章が下手で伝わりにくいようですみません
簡潔に言えば
「IE6だけ<a><img></a>とした時にimgのborder-colorに
a:linkで指定したcolorが反映されないのはバグ？仕様？」ということです

もっと砕いて言えば
「なんでお前だけ違うんじゃ、この糞IEがああ！」って感じ

>>88
すみません、書き込む時に間違えました
元のはちゃんと直してあります

で、>>78はどうなん？

>>89
何でborderの色指定がcolorなんだよ。
もうグダグダ書いても意味無い。基礎を勉強し直せ。
IEは糞だが、お前はもっと糞だと自覚しろ。

というか、四つとも color: #f00 なら
a {color:#f00}
だけでいいから、どうしても「意味ね〜」って思っちゃうんだよな。

>>90
その書き込み見落としていました
やってみましたがどうやらそれでOKのようです

>>91
当然自覚してます
でもなら何故FirefoxとOperaでは
枠にa:link等の色指定が反映されるのかが理解できません

IEが正しくてFirefox等が間違っているって事でしょうか？
よろしければ解説をお願いします

>>93
何で糞にいちいち解説しなきゃならんのだ？
Firefox他の仕様を自分で調べろ。

>>89
IE6のデフォルトスタイルシートがそうなっているのかもしれないので、バグ
とは断定できない。

>>91
border-colorプロパティの初期値はcolorプロパティの値だってことを知らな
いの？偉そうに講釈たれるお前が糞。

>>91
ちょっと上のレスも読めないのか？

>>95
＞border-colorプロパティの初期値はcolorプロパティの値だってことを知らないの？
仕様書厨乙。IEはバグじゃないと言ってる側から何だかね。エラそうなのはどっちだ。

>>89
そう言われてみて、なるほどなと思いました
>>78のように明確にIE6のCSSを上書きするつもりで
書くように心がければいいと理解しました


長々とスレを占有してしまうのも申し訳ないので
後は自力で調べることにします
回答してくれた皆さんありがとうございました

あ、すみません
>>98の前半は>>95さん宛です

>>97
仕様書も読まないで「基礎を勉強し直せ。」ってねえ。無知を振り撒くのはや
まてほしい。

結局IEとFx、どっちの解釈が正しいんだ？

よく考えたらIEのデフォルトスタイルシート関係ないな。>>67のソースでは
img要素に border: 2px solid; が適用されるので、border-colorプロパティ
の値は初期値に設定される。colorプロパティは継承を行うので、a:link {
color: #f00; }より、img要素のcolorプロパティの値が#f00になって、
border-colorプロパティの初期値として利用される。よってimg要素の周りに
2pxの赤い実線が描かれるのが正しい、はず。

>>100
頭でっかちにはわからんだろが、仕様書は飾り。実装が全て。

一人でもヘボイ回答者が居ると
それだけで糞スレに見えてくるから困る

1つのタグに複数のクラスを適応した場合の仕様確認をさせてください。

【CSS】
.hoge {
　color: #ff0000;
}

.fuga {
　color: #00ff00;
}

【HTML】
<span class="fuga hoge">緑色</span>

同じ重み付けの定義が重複した場合、下に書かれているfugaが上に書かれているhogeを上書きする。
class属性は、タグにどのクラスを適用するかを指定するのみであって、そのカスケード順には関与しない。

以上で間違っていませんでしょうか。

<ul>
＿<li>・・</li>
＿<li>
＿＿<ul>
＿＿＿<li>
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li>・・・・・・</li>
＿＿＿＿＿＿<li>・・・・・・</li>
＿＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li>・・・・</li>
＿＿＿<li>・・・・</li>
＿＿</ul>
＿</li>
＿<li>・・</li>
＿<li>・・</li>
</ul>

わかりやすくするためにアンダーバー＿を使っていますが
このようにulやolでリストを作る時にCSSの記述方法はどのようにしたらいいでしょうか？

106が何を言いたいのか誰か教えてくれ。

わかりやすくアンダーバーを使う前に、
わかりやすく何がしたいのかを説明しろ。

CSSを使ってリストの何を実現したいんだ。

はいはい釣り釣り

>>105
>同じ重み付けの定義が重複した場合、下に書かれているfugaが上に書かれているhogeを上書きする。
YES
>class属性は、タグにどのクラスを適用するかを指定するのみであって、そのカスケード順には関与しない。
関与した結果がそれ。

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

>>class属性は、タグにどのクラスを適用するかを指定するのみであって、そのカスケード順には関与しない。
>関与した結果がそれ。

この部分について、私の言葉が足りませんでした。
<span class="hoge fuga"> と <span class="fuga hoge">が同じ結果になる、
すなわち、クラス属性に指定したCSSクラスの順番がカスケード順になるのではない、
ということの確認という意味でした。

お手数をかけて申し訳ありませんが、確認をお願いいたします。

>クラス属性に指定したCSSクラスの順番がカスケード順になるのではない、
>ということの確認という意味でした。
それであってるよ。

>>80
｢;｣ は宣言の区切り子です｡
宣言が1つなら区切り子を書く必要はありません｡

>>67
IE6の内部スタイルシートに

a:link img {
color: blue;
}

あるいは

a:link img {
border-color: blue;
}

の様な規則があるからだと推測されます｡
(IE6の内部スタイルシートはファイルとして存在するわけではありませんから､ あくまでも推測です｡)

>>113
単に継承が失敗してるだけ

>109 >111
遅い時間にも関わらずのご返答に感謝します。
ありがとうございました。

>>112
工工エエエエ（´Д｀）エエエエ工工

>>106-107
ul {list-style-type:circle;}
ul li ul {list-style-type:square;}
ul li ul li ul {list-style-type:disc;}
とか？

ブロック要素Aとブロック要素Bについて、下記のような回り込みは可能ですか？

AAAAAAAAAAAA
AAAAAAABBBBB
AAAAAAAAAAAA

Bをfloat:right;position:relative;top:10px としてみましたが

AAAAAAA
AAAAAAABBBBB
AAAAAAAAAAAA

になってしまいます。ブロックAを上下で分割すれば簡単なのは分かるんですが
テンプレートなので、Ａの内容は分割できません。

>>117
まさにそれです。
要素名をどのように書いたらいいのかが知りたかったです。
ulとli（とくにolも合わせると）をCSSで指定する時に方法がたくさんあってどの方法が効率的でよいのか・・・

ul {list-style-type:circle;}
ul li ul {list-style-type:square;}
ul li ul li ul {list-style-type:disc;}
と例を示してくれましたが
ul {list-style-type:circle;}
ul ul {list-style-type:square;}
ul ul ul {list-style-type:disc;}
でもいいのでしょうか？
一応、これらの方法でCSSに記述しても反映できていますが効率的かどうかとなると・・・

class使えよ・・・

誤爆する事が無いようにって前提だけど、
いちいち指定するのが面倒な時はそれでやっちゃうが、
class使えば問題ないよな。

>>120ｰ121
CSSでブラウザリセット*{margin:0; padding:0;}と
CMSでやっている場合にulやol、liを指定しないといけないので
classでの指定じゃ駄目なんです。

すこし勉強したほうがよくね ?

>>119
それでもいいけど本当は子供セレクタを使って
ul>li {list-style-type:circle;}
のようにしないと
ul {list-style-type:circle;}
の指定が
<ul>
<li>
<ol>
<li></li>
</ol>
</li>
</ul>
のol要素に継承されて数字のマーカーになるべきところが○になってしまうの
で注意。

IE6が対応してないからまあ子孫セレクタでやるのが現実的だと思うよ。
classとか言ってるのは馬鹿。

html > body ul > li {list-style-type:circle;}
って書けばIE6はリストのマーカーをリセットしなくて済むからいいかもしれ
ないと思った。

ごめん、>>126は意味不明だわ。

>>114
なぜそう言い切りますか｡

>>124
ul {
list-style-type: circle;
}
ol {
list-style-type: decimal;
}

この様にol要素のスタイルも定義すれば問題ありません｡

>>128は自分の行っている意味がわかってるんだろうか
何この支離滅裂

>>129
自分の言っている意味は分かりますが､ あなたの言っている意味が分かりません｡

>>128
そうだけど、入れ子になったリストのマーカーを変更したい場合はIE6が子供
セレクタに対応していないためにul ul > li {}のような指定ができない。
(IE6を無視すれば済むことだが。)

>>131
入れ子になったリストのマーカーを変更したい場合は
ul ul {}のような子孫セレクタで十分ではないのですか｡

>>132
それだと
<ul><li><ul><li><ol><li></li></ol></li></ul></li></ul>
のol要素までマーカーが変わっちゃうでしょ。

>>133
変わりませんが｡

検証用ソース:

<style type="text/css">
ul {
list-style-type: disc;
}
ul ul {
list-style-type: circle;
}
ol {
list-style-type: decimal;
}
</style>

<ul><li>
<ul><li>
<ol>
<li>テスト</li>
</ol>
</li></ul>
</li></ul>

<ul> (｢ul｣ にマッチ｡ list-style-type特性はdisc｡) <li> (list-style-type特性は継承によりdisc｡)
<ul> (｢ul ul｣ にマッチ｡ list-style-type特性はcircle｡) <li> (list-style-type特性は継承によりcircle｡)
<ol> (｢ol｣ にマッチ｡ list-style-type特性はdecimal｡)
<li> (list-style-type特性は継承によりdecimal｡) テスト</li>
</ol>
</li></ul>
</li></ul>

というわけですね｡

ああ、そっかul liと書かなきゃいいんだ。説明thx。

はい！ こんにちは！！！！！
今日は、偶然ブラクラ発見しちゃったから、それをお伝えしますね！

これだよ！

<style>*{position:relative}</style><table><input></table>

【IE厨涙目】　たった一行でIEをクラッシュさせられるコードが発見
http://news23.2ch.net/test/read.cgi/news/1186458230/

画像を左に置きたい時にスタイルシートを使ったら何故か広告や文が絵の上にきてしまいます。
どうしたら広告を下に下げられるでしょうか・・。
ちなみに使ったスタイルシートはこれです↓
<img style="LEFT: px; POSITION: absolute; TOP: px" src="" border="0" />

>>138
テンプレで基礎の基礎から勉強してきてください・・・

>>138
広告に対して
{ position: relative; top: 20px; }
などを適用する。

すんません、>>118ですけど無理？

自分には無理。もしかしたら方法があるかもしれないが思いつかない。

>>142
ありがとうございます、自分もそんな感じで・・・
（方法があるかもしれないけど思いつかない）

しばくら様子見てだめそうなら、あきらめます。

Sleipnirを使用してスタイルシートで見てるページを自分の好きな表示に変えてるんですが
とりあえずこれを適用して
* { color:black; background-color:white; background-image:none; border-color:black; }
枠線は残しておきたいのに綺麗さっぱり消えてしまう
何を記述したらいいですか？

例えばこのブログ
http://blog.excite.co.jp/tabbrowser/
記事ごとに枠線がないと逆に見難くなって本末転倒という

>>144ですが
border-style:solid;
を追加したらえらいことになってこれはページ毎に作らないと無理っぽいな
と悟ったので質問は取り消ししたいと思います
とろい質問してすみませんでした

質問させて頂きます。

/*html*/
<div class="box">
<img class="qr-code" src="img/qrcode.png" />
<p class="mobile">モバイルはこちらから！<br />
バーコードリーダーで読み取れば携帯でも見る事が出来ます。</p>
</div>

/*css*/
.box { width: 300px; height: auto; }
.qr-code { float: right; }
.mobile { font-size: 80%; }

という風にしています。paddingなど質問に必要がないと思われる細かい指定は省きました。

macSafariで見るとちゃんと画像が右に寄ってその左に文字が表示されるのですが、winIEで見ると画像の下に文字が表示されてしまいます。しかも何故かmobileで指定したフォントサイズも小さくなりません。
これは私の作り方がダメなせいだと思うのですが、どうやっても直りません。
どうかご回答頂ける方がいましたら宜しくお願い致します。

インラインとブロック　っつーのを勉強するといいよ。

普通に画像右テキスト左で表示されるけど？

>>147
調べてみましたが、divやpはブロックでimgはインラインのようですね。ですが、それがこの問題とどう関係しているのかが分かりません。
ご回答ありがとうございました。

>>148
すみません、質問の仕方が悪かったようです。
確かにこのソースだと上手くいくのですが、実際に私のサイトの組み込んだ状態だと上手くいかないのです。このboxはdivで囲まれていてさらにそのdivはより大きなdivで囲まれていたりするせいでしょうか。
ご回答ありがとうございました。

引き続きご教授お願い致します。

ソース出さなきゃ無理だろアホか

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style type="text/css">
* {margin: 0; padding: 0; font-size: 100%;}
div.mobile {width: 300px; border: solid 1px red;}
div.mobile:after {display: block; content: ""; clear: both;}
div h1 {color: white; background: red; text-align: center;}
div.mobile p {margin: 1em; font-size: 80%;}
div.mobile ul.qrcodes {float: right;}
div.mobile ul.qrcodes li {display: block;}
</style>

<title>テスト</title>

<div class="mobile">

<h1>モバイルはこちらから！</h1>

<ul class="qrcodes">
<li><img src="http://www.commeca.co.jp/blog/qrcode.png" alt="http://www.commeca.co.jp/blog/qrcode.png" /></li>
</ul>

<p>このQRコードをバーコードリーダーで読み取れば携帯でも見る事が出来ます。</p>

</div>

>>150
ソースは文字数の制限でここに全て書く事は出来ないのです。

>>151
ありがとうございます。
大変参考になりました。
しかし、私のサイトに組み込むと正常に動作しませんでした。
何かが根本的におかしいのだと思います。
ご回答ありがとうございました。

アホソースだよ・・

>>152
> ソースは文字数の制限でここに全て書く事は出来ないのです。

リソースのURIを提示すれば済むことです｡

根本的におかしいのなら、そっちを直さないと
やるだけ無駄ですよ

>>154
ここにURLを書いたらまずいのかなと思いまして。

>>155
そうですね。頑張ります！

>>156
> ここにURLを書いたらまずいのかなと思いまして。

回答者にとっては全然 ｢まずく｣ はありません｡

質問者にとって ｢まずい｣ というのであれば､ アップローダーなどの一時的なスペースを利用するという手もあります｡

背景だけ半透明にしたいのですがアルファ付きpngだとIE6が対応していないので
下記のようにopacityで試したのですがテキストも半透明のままでした。

#block{filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; background:#999999;}
p.text{filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;}
<div id="block">
<p class="text">あかさたな</p>
</div>

ほかに何か良い方法は無いでしょうか。

背景画像を使う気がないなら無理
ていうか透けてるように見える透けてない画像じゃ駄目なのかよ

>>159
サイズ可変でフォントサイズの固定とかもしてないので、
透けてるような画像を背景には使えないです。
無理であれば他の見せ方を考えます。

styleswitcher.js　でホームページのフォントの大きさ等をボタンで
入れ替えたりできるようにしていたのですが、もともとそのサイトは
xhtmlのtraditionalで作っていたのを、strictに変更した途端に
firefoxでのスタイルの入れ替えができなくなってしまいました。

IE7ではまともに動いてくれます。
IE6では何故かフォントのサイズがワンサイズ大きくなるという不具合です。

でもFirefoxでまったく動作しないのはどうしてかよくわかりません。。。

どうしてなんでしょうか？

>>161
ソース晒すべし｡

>162

失礼しました、焦って忘れてました。

head部分が

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
中略
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="font.css" rel="stylesheet" type="text/css" />
<link rel="alternate stylesheet" href="font_s.css" title="small" type="text/css" />
<link rel="alternate stylesheet" href="font.css" title="medium" type="text/css" />
<link rel="alternate stylesheet" href="font_l.css" title="big" type="text/css" />
<script type="text/javascript" src="java.js"></script>
<script type="text/javascript" src="styleswitcher.js"></script>
</head>

で、ボタンのところの記述が

<ul class="mojisize">
<li><a href="javascript:;" onclick="setActiveStyleSheet('big'); return false;"><img src="font_large.gif" /></a></li>
<li><a href="javascript:;" onclick="setActiveStyleSheet('medium'); return false;"><img src="font_medi.gif" /></a></li>
<li><a href="javascript:;" onclick="setActiveStyleSheet('small'); return false;"><img src="font_small.gif" /></a></li>
</ul>

です。

traditionalに戻すと問題なくどのブラウザ（IE6、IE7、Firefox）でも
ちゃんと動作します。

だったらstrictをやめとけって話でしょうけどｗ

>>161
フォントの大きさについてはこれじゃないの？
ttp://www.redout.net/data/dtdmode.html
IE6にはDTD宣言の仕方によってXHTML1.0 Strictが互換モードで表示されてしまう
互換モードだと標準モードより大きめで表示されるし

Firefoxの件は使ってないので他の人の回答を待ってくれ

>>165
ありがとうございます。

IE6の場合は宣言かな？と思ってましたので、やはりそのようですね。

あとFirefoxだけじゃなくOperaも動かないみたい・・・・

>158
ググれ

>>158
背景画ならPSとかFWで透明度をいじればいい
柄なんかも上記ソフトで透明度いじってリピートさせればいい。

>>163
<?xml version="1.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" xml:lang="ja" lang="ja">
<head>
<title>テスト</title>
<link rel="alternate stylesheet" href="http://deztec.jp/x/etc/img/CSSthink.css" title="think" type="text/css" />
<link rel="alternate stylesheet" href="http://deztec.jp/x/etc/img/CSSplant.css" title="plant" type="text/css" />
<link rel="alternate stylesheet" href="http://deztec.jp/x/etc/img/CSSfolio.css" title="folio" type="text/css" />
<script type="text/javascript" src="http://alistapart.com/d/alternate/styleswitcher.js"></script>
</head>
<body>
<ul>
<li><a href="javascript:setActiveStyleSheet('think');">think</a></li>
<li><a href="javascript:setActiveStyleSheet('plant');">plant</a></li>
<li><a href="javascript:setActiveStyleSheet('folio');">folio</a></li>
</ul>
<h1>テスト</h1>
<p>テストです｡</p>
</body>

こんな感じに書き換えてローカル (Windows XP) で試してみたけど､
IE6､ Firefox 2.0.0.6､ Opera 9.20のすべてで正常にスタイルシートを切り替えられたよ｡

<?xml version="1.0" encoding="utf-8"?>

は宣言するとIE6が交互モードになるから記述しないほうがええ
文法チェックすると怒られるけどなw

>>170
そんなことを薦めるくらいなら､ HTML 4.01で書くことを薦めた方がいいと思います｡

というか交互モードって何？

>>172
過去のIEとの互換性を重視した互換モード (別名Quirksモード､ 奇癖モード) のことだと思います｡

交互モード　　　斬新だなぁ・・・・

CSSの勉強をしていくとIEのせいで
ただでさえ理解が難しいCSSの概念がよけいに難しくなると思うのは俺だけ？

もうIE6以前のIEのサポートは絶対しない。
使ってる香具師は新しいブラウザ使えや(ﾟДﾟ)ｺﾞﾙｧ!!

>>9について質問させて下さい。

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

/* IE6 のみ読み込む */
* html #menu {position:absolute;}

これだけではダメなんでしょうか？

>>176
良さそうな気がする

>>176
別けるの面倒だからアンダースコア使ったほうが楽な希ガス
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;_position:absolute;}

>>163
ありがとうございます。

いろいろ検証してみたところ、>>163のソース部分の記述の中で私が「中略」と
書いていた部分に
<link rev="made" href="mailto:[email protected]" />
の記述があり、これを消したり、あるいは下に持っていくと正常に動作しました。

つまり、
中略
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="font.css" rel="stylesheet" type="text/css" />
<link rel="alternate stylesheet" href="font_s.css" title="small" type="text/css" />
<link rel="alternate stylesheet" href="font.css" title="medium" type="text/css" />
<link rel="alternate stylesheet" href="font_l.css" title="big" type="text/css" />
<link rev="made" href="mailto:[email protected]" />
<script type="text/javascript" src="java.js"></script>
<script type="text/javascript" src="styleswitcher.js"></script>
</head>
のようにすると正常にFirefoxでも動作いたしました。

関係ないものだと思って中略していたのですが、これが原因だったようです。

いろいろありがとうございました<(_ _)>

styleswicher.jsを使う場合の注意点 (http://bunlog.d-s-b.jp/archives/22)
> styleswitcher.jsでは、「link要素には、rel属性が定義されている」という前提でスクリプト組まれている。
> そのため、head要素内に<link rev=”" …>などが存在する場合、JavaScriptのエラーとなってしまう。

ということらしい｡

つまり、読まずに質問したということか ?

　　　　ペチン　　　☆
　( o・-・)っ―[] ／ 　
［￣￣￣］ (´・ω・`)>>161

>>180　>>181

失礼しました〜<(_ _)>
もっとちゃんと読んでから質問します<(_ _)>

散々既出なのかもしれないけど、どうしてもわかんないから質問。

bodyの上の余白をなくそうと思って
margin-top:0px;
padding-top:0px;
をやったんだけど、IE以外の主要ブラウザ（狐とかOpera）ではなくならないんだよね。
多分、IEがCSSを読み間違ってるんだろうけど、どうやったらちゃんとCSSで余白をなくせるの？

>>183
* {margin:0; padding:0;}
基本中の基本

>>184
そ、そうなの？(´･ω･`)
ありがとう

今時
* {margin:0; padding:0;}
使うシトって

それは使うけどシトは使わないな。

* {margin:0; padding:0;}
だと何か都合が悪いのですか｡

>>188
「海外の最近の流行」って言葉に流されてる人なんだろうね

html ,body {margin:0;padding:0;}
が正解

>>190
>>183が消したかったマージンは､ body要素の最初の子要素の上マージンではないでしょうか｡

お願いします
リストで行間を空けるにはどうしたらよいでしょうか？
margin,padding 指定しても間は空かず。
IE6でもきちんと表示できるものにしたいです。
ul タグはブロック要素だから？div でcss指定してもダメみたいで、、
勉強不足ですみませんがどなたかお願いします

ソースを

>>192
li要素の上下マージンを広げるべし｡

ありがとうございます
試してみます

やってないんかい ! !

リストの間隔ならマージンだけど、行間ならline-heightじゃなくて？

line-heightとか継承があるからめんどいんだよな
まあ単位無くせばいいだけだけど

すごい初心者な質問で申し訳ないのですがpxの文字サイズ指定と、CSSに対応していないブラウザは
自動的に指定したHTMLのフォントサイズにするって出来るでしょうか？
もし出来たら記述の仕方を教えて下さい。ちなみにCSSファイルに書く方法を教えて欲しいです。

age忘れました

質問があります。
background:url(images/mainimage_background.jpg);
cssでこの部分の画像をswfにしてフラッシュを表示させたいのですが
images/○○.swf　としても何も表示されないのです。
cssでフラッシュの表示を指定するときは、どのように記述すればよろしいのでしょうか？
お手数ですが教えていただけると助かります。

>>199
まず質問を日本語で書いてくれ・・・

>>201
マルチ乙

>>201
無理。他スレでも言われたろボケ。

swfとはどういうものかと考えれば自ずと答えも解るはず

>>203,204
初心者スレの質問なら私が書いたのでここの201とは別だと思いますよ。

>>201
どうも無理なんだそうですよ。
でも背景にフラッシュ入れる事が出来たらいいですよね。

>>206
テメエ礼も言わずに消えやがっただろ池沼

>>206
二度と来んな

背景に画像入れられるでしょ、そういうサイトみたことあるし
ただCSSじゃない

>>209
>>209
>>209

相手すんなアホ。

おまえが相手にしてるんじゃんアホ

　　夏だなぁ

あつはなついですね、と言ってみるテスト

脳味噌湧いてるんじゃない？

沸く
じゃないか？

ホントに低レベルなんだからまつたく・・・

>>186-191
こんなのがある
http://developer.yahoo.com/yui/reset/

無理なんですね、ありがとうございます。
ただ他スレでは書いてません（笑）
書き込みした直前に疑問になったことですので。
同一人物だったら各１万円詫び料を払います、調べてみてくださいな。
そして同一人物でないことがわかったら、「あぁ、もっと言葉使いに気をつけよう」と考えてください。
２ｃｈとは言え結構ショックなんですよ。

>>219
おまえは取り敢えず同一人物は置いといて半年ROMれ。

>>219
IP、MACアドレスが一致しているので同一人物の可能性が高いです
というわけで至急1万円送付してください

まあ、そうなるわな

>>219
おまえが言葉遣いに気を付けろよ。
「結構ショックなんですよ」なんて言葉を使うな。

まあ今は夏だし、で納得してしまおう

どうせ偽物。質問もコピペ。偽物だらけなのさ〜。

p{aaa:bbb;}
ol,ul{ccc:ddd;}
.hoge{eee:fff;}
#huga{ggg:hhh;}
...

こんな感じで指定されている物を、例えば全て

.xxx p{aaa:bbb;}
.xxx ol,ul{ccc:ddd;}
.xxx .hoge{eee:fff;}
.xxx #huga{ggg:hhh;}
.xxx ...

にするには、やっぱり個別に前に「.xxx 」を追加しないといけませんか？

.xxx{
　p{aaa:bbb;}
　ol,ul{ccc:ddd;}
　.hoge{eee:fff;}
　#huga{ggg:hhh;}
　...
}

これは無理ですが、これみたいな感じの方法などはありませんか？

C:\aaa\style.cssの場所にスタイルシートを保存している場合、
C:\aaa\bbbにあるhtmlファイルからそのスタイルシートにリンクするにはどうすればいいんでしょうか？

>>227
../style.css

>>228
.が2個いるんですか。
./でできなかったので諦めていました。
ありがとうございました。

cssに全く関係ないわ・・

質問も回答も間違いまくってるがいいのかコレ・・・

>>226
.xxxが普通のクラスだとしたら、ない。

>>231
もうおいらは諦めてる。

回答者も検証しないで書いてるし、
間違った回答もらった奴も違っていると書かないし、
違っていることすら気がつかないし、いいんじゃねーの。

質問者と回答者のレベルが同じだとこういうことになるっていう見本だよ。

>>233
そんな長文書いてるくらいならおまえが回答しろよ・・・

間違いってどれ？
>>227-229はあってるでしょ･･･？

遂にスレ違いまでわからない香具師が現れた

今は暑い季節だからみんな脳味噌がふやけてるんだよ、きっと

>>218
なぜ全称セレクタを使わないのでしょうね｡

>>238
全称がもはや古いよって話題で出てきたやつだからだろ、流れを嫁よ。
もっとも全称が古いなんて思わないが。

>>239
私は ｢なぜ全称セレクタを使わないのか｣ を聞いたのであって､
｢なぜ全称セレクタを使わない例を持ち出したのか｣ を聞いたのではありません｡

消えろ

消す必要のないマージンやパディングまで消さないようにという配慮らしいよ。

｢消す必要のないマージン｣ が何なのかが分からない｡

お前には無理ということだ。

*{}でリセットする方が、ソース短くて好き。
レンダリングが遅くなるとか言うけど、自サイトではそうでもないです。

ダサいだの古いだの言いたい年頃なんだから放っとけ。

http://www.mozilla.gr.jp/standards/webtips/

バグだらけのIEなんて消えてなくなれ！
http://cssbug.at.infoseek.co.jp/detail/winie.html

>>245
なるほど｡
レンダリングが遅くなるのですか｡
しかし､ いったいどれほど遅くなるのでしょうね｡

http://www.webken.jp/

>>250 宣伝orアンチ 乙

>>249
誤差。
そんなのに気をつけるぐらいならふぁおるサイズを�Tk減らす方がよっぽど効果的。

おらもふぁおるサイズ見直すんべ

ふぁおるサイズ�Tkも誤差

こんなに突っ込みたい気持ちは初めてだけど、
突っ込んだら負けな気がして我慢したｗ

3カラムデザインを左250px 真中500px 右250px（アウトラインが1000px）でつくってもらえませんか。何度やっても崩れるんですが。。

>>256
web上にいくらでもころがってます。気が済むまで探して下さい。

外部CSSのファイルを分ける時、どういう風に・幾つ位に分けてますか？
自分の場合、今は
main.css：カラム分けやbodyなどの共通の設定。
font.css：フォントのサイズとカラーの設定。
image.css：背景画像のURL設定。（アイコンとかタイトルとか背景）
contents.css：その他のコンテンツ部分の設定。場合によって更に切り分け。
こんな感じでやってますが。
なにぶん本やらサイトやらでかじった程度の初心者なので
参考までに他の方の分け方などを教えていただきたいです。

>>258
人によって大分違うと思うから個人的に、ね。
前提：幾つか代替CSSがある
・base：全代替共通設定項目
・commom：全論理要素設定
・class：class/id設定用
・navi：ナビゲーション用
・top：トップページ用
・ie：IE用ハックだけｗ

commom＞common

>>258
初心者の個人サイトなのに、そんなに分けてるわけ？

>>258
メディアタイプごとに分ける｡
screen.css: コンピュータ画面で表現する際のスタイルシート
handheld.css: ポータブル機器の画面で表現する際のスタイルシート
projection.css: 映写機の投影で表現する際のスタイルシート
print.css: 印刷物で表現する際のスタイルシート

そんなにファイルをわけたら重複する部分が多くなって
全体のふぁおるサイズが大きくなって遅くなる
というレスが付くはず

そんなにファイルをわけたら重複する部分が多くなって
全体のふぁおるサイズが大きくなって遅くなる

>>262
そういやprintもあったわ。普段弄らないから忘れてた。

>>263
不覚にもワロたｗ

>>227と同じような質問なんですが

C:\aaa\style.cssの場所にスタイルシートを保存している場合、C:\aaa\bbb\ccc\dddにあるhtmlファイルからstyle.cssを指定するにはどうすればいいんでしょうか？
URLで指定するしかないですか？

>>267
CSSに関係ない。
相対パスについて調べれ。

>>268
ググってはじめて知りました。
../../../style.cssって使い方もできるんですね。ありがとうございました。

>>269
そんな事も知らなかったのか＞＜
基本中の基本なのに

>>269
⊂ミ⊃＾ω＾)ｱｳｱｳ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style><!--
table { float: left; clear: left; }
/* clear: both; を指定しても上記指定の表示と変わらず */
/* width を指定しても上記指定の表示と変わらず */
--></style>
<title>ほげ</title>
</head>
<body>
<table>
<caption>table1</caption>
<tr><td>ほげ</td><td>ほげ</td><td>ほげ</td></tr>
<tr><td>ほげ</td><td>ほげ</td><td>ほげ</td></tr>
<tr><td>ほげ</td><td>ほげ</td><td>ほげ</td></tr>
<tr><td>ほげ</td><td>ほげ</td><td>ほげ</td></tr>
</table>
<p>table1の次のパラグラフ</p>
<p>table1の次の次のパラグラフ</p>
<table>
<caption>table2</caption>
<tr><td>ほげ</td><td>ほげ</td><td>ほげ</td></tr>
<tr><td>ほげ</td><td>ほげ</td><td>ほげ</td></tr>
<tr><td>ほげ</td><td>ほげ</td><td>ほげ</td></tr>
<tr><td>ほげ</td><td>ほげ</td><td>ほげ</td></tr>
</table>
<p>table2の次のパラグラフ</p>
<p>table2の次の次のパラグラフ</p>
</body>
</html>

Internet Explorer 6 のスクリーンショット
ttp://kjm.kir.jp/pc/?p=39611.png

Firefox 2 のスクリーンショット
ttp://kjm.kir.jp/pc/?p=39612.png

Opera 9 のスクリーンショット
ttp://kjm.kir.jp/pc/?p=39613.png

たぶん Firefox や Opera の表示が正しいんだと思いますが、
上記例における p 要素の内容が table 要素の高さを超えないような場合でも
style 要素内に手を加えるだけで
Firefox や Opera でも Internet Explorer のスクリーンショットのように
table2 のあとにくるパラグラフが table1 の横ではなく table2 の横に表示させるには
どうすればいいでしょうか

>>273
tableはfloatだけして、table2の前でclearすればいいでしょ。

>>274
> style 要素内に手を加えるだけで
だから難しくね？style属性もclass属性も追加できないんじゃ

style要素って何？

>>276

そんな事も知らなかったのか＞＜
基本中の基本なのに

⊂ミ⊃＾ω＾)ｱｳｱｳ

>>277
あ、わかった。そんな名前があるなんてステキ。

けどおかしな質問だよ。
各ブラウザ対応を考えてるって事は、自分のサイトなんだよね。
だったらstyleだけ弄るって制約は必要無いよね。
数が多くて〜って話なら、一括置き換えすりゃいいだけだし。

>>279
視野
狭っ

>>273
無理

>>274-280
レスどうもありがとうございます。

style 要素ではなく link 要素で外部スタイルシートを読み込むのでも構いません。
説明のために一ファイルになるように style 要素を使いました。
とにかく body 要素内には手を加えたくなくて。
レイアウトのために class 属性を追加したり
style="float:clear;" とかするのは避けたいんです。

って無理なんですか・・・？

>>281
つclearfix

>>272
table { float: left; clear: both; }
p { float: left;}

>>283
複数続いているp同士は回り込む必要がないっぽいからそれは無理じゃね

結論：無理

>>284
pにwidth設定すればよかろうもん

ダメだよ

文章中に様々に出現するテーブル要素やパラグラフ要素全てに対応したいのなら
無理

clearfixて同じ要素が複数あるんならclassかid必須じゃん

288を訂正
×文章中に様々に出現する
○文章中に出現する様々な

IEの描画のほうがしっくりくるな

しっくり来ると思う奴は根本的にfloatの浮動という意味を理解していない

HTMLを汚染しまくらないとfloatは制御しきれないのか。勉強になるなあ

まぁIEの解釈のほうが便利な場面は多い

いろいろ試してみたけど
いろんなパターンのPやTABLEの組み合わせでもうまく表示させるのは無理っぽいね

>>281
> style="float:clear;"
って。typoだろうけど

table { float: left; clear: left; width: 50%; margin-left: 0; margin-right: 0}
p { float: left; width: 50%; margin-left: 0; margin-right: 0}
Opera, Fxはこれでできるはず。テーブルの幅が可変にならないが。

一応padding-left: 0; padding-right: 0もあったほうがいいな。

CSS2は､ ある要素の ｢後｣ に隣接する要素を選択するセレクタは書けるが
ある要素の ｢前｣ に隣接する要素を選択するセレクタは書けないという点で片手落ちであります｡
それが書ければ>>272-273の問題は解決するのです｡

table {
float:left;
}
p+p:after{
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: left;
}

clearfixできたけどだめなんですか？

pが3つあるとだめかｗ
すまそ

>>300
私もその線で行って同じ問題に突き当たってあきらめました｡

> height: 0;
> visibility: hidden;
> content: ".";

これは

content: "";

の一行でOKだと思います｡

ああ､ clearfixっていう呼称があるのですね｡
でもこのclearfix､ ググってみるとみんなピリオドなどの文字列を生成して
visibility特性をhiddenにしていますけど､ そうしないと何かマズいのでしょうか｡
空のボックスだと何か不都合が生じるのでしょうか｡

>>303
http://3ping.org/2007/05/26/1142によると、
contentで何かを記述しないとボックスが生成されずに
正常にクリアできないブラウザーがあるそうです。

自分の趣味サイトでは>>302と同じで「content: ""; 」だけなんです
けどね。

>>304
なるほど､ そういうわけなのですね｡
ありがとう｡

以下のソースで、win IE6でのみjpgの下にスペース（ボーダーラインの内側）が出来ています
どうしたら解決するでしょう？　よろしくお願いします

<div id="topswf"><img src="img_top/phpto.jpg" alt="flash" width="784" height="270" /></div>
<div id="main"></div>

css---
div#topswf{
margin-top:12px; width:808px; height:270px; border:solid #6666ff 1px;
}
div#main{
width:736px; height:800px; background-color:#ff6666; padding:0px 12px
}

全くすみません、解決しました
失礼しました

文字サイズを大きくしても見れるようにしたいのですが
テーブル表の横が、大きくなった中の文字が押し出す感じで領域をはみだしてしまいます
tableのwidthをpx指定でも%指定でもどうしても無理のようだし
これを回避するにはどうすればよいのでしょうか

>>308
無理。表ってのは何があっても表の形を保とうとする。

>>309
ありがとうございます、これはどうしようもないんですね

>>310
javascriptつかったらいけるね

emで指定してみたら

froatなのかfloatなのかいつも判断に迷います。どうすれば覚えられるでしょう？

>>313
覚える必要はない。毎回仕様を確かめろ。

俺は一度ローマ字入力をして確かめてる

>>315
kwsk

聞きたいんですが
<div style="text-indent:-9999px;">キーワード羅列</div>ってのをやって、
SEO効果を高めるってのはまずいのかな？
froatで左右に並べたブロックの下にclearするdivを入れると、こいつに
margin-topがまともに利かないことがあるんで、このマージンをやめる代わりに
必要量のheightを指定した上記のキーワードdiv（見た目的にはスペーサーのブロック）を
入れようかと思ってるんだけど…
同じようなことしてる人いますか？
キーワードを入れてないけど、スペーサーは使ってるって人もいたら教えてください。

（すいません　追記です）
それとも、　style="text-indent:-9999px;"　っての自体やらないほうが安全なんでしょうか？
結構アチコチで見かけるテクニックだとは思いますが…

floatでマルチカラムレイアウトする時に
float用のdivと内容側のdiv使いまくるのって問題ないよな？

marginやらwidthやら計算がめんどいしw

>>313
色が変わるエディタを使えばいい。

>>317-318
SEOの質問はSEOのスレで


でも一応、SEOをするならそんなみみっちいことより
コンテンツの内容で勝負しないとだめ
最近はサイトの滞在時間が検索結果に影響し始めてるおw

>>317
それはmetaでやるべきことだ。

>>319
cssに関係ない、strictスレ。

>>322
スペーサーとして、heightを指定したカラdivを使うのはまずいんでしょうか？
css使う意味がなくなるのかなー、と。。

よくある角丸のテーブルをcssでやろうと思っています
以下のコードを書いたのですが、上下の画像の上と下にスペースが出来てしまいます
どうやったら解決するでしょう？　どなたかご回答お願いします。
<div id="froat_clear" style="clear:both; height:8px;"></div>
<div style="border:solid blue;">
<img src="img_common/search_fv_bg_top.gif" hspace="0" vspace="0" />
</div>
<div>
中身
</div>
<div style="border:solid blue;"><img src="img_common/search_fv_bg_btm.gif" hspace="0" vspace="0" /></div>

まずい、まずくないってのはstrictとしての問題だろ？
cssの問題じゃない。ちなみにまずい。

>>324
vertical-align

実験君では？？

<div style="background:url(img.gif); height=10px;"></div>
<div style=""><table></table></div>

これで、img.gifの高さも10pxなのに上のdivとしたのdivの間にスペースが出来ます
（win IE6でのみ）
なにが原因に考えられるでしょう？　お願いします

>>328
勉強があまりにも足りないから。

floatの仕様って頭悪いんだな。。

セレクタが不十分なだけでfloatは悪くない濡れ衣

>>328
下のdivとtableの間

>>330
floatの仕様を理解しないで
仕様外の使い方をしようとするおまえが頭悪いんだよ

一応だがfloatレイアウトなんて相当CSSの知識がないとできないぞ
覚えてしまえば簡単だがな・・・

ここにいる連中は初心者を馬鹿にして優越感を感じている根暗ばかりw

お前がそうだからって皆同じと思うなよ、と釣られてみる

> floatレイアウト
たぶん段組みの話ではないっぽい

>>334
馬鹿だな。初心者スレはここじゃない。

「仕様」とか「想定外」とか必死な人は
できないという事実に相当ショックを受けたようだ

>>328
* { margin: 0; padding: 0 }
あとタイポだと思うが「height:10px」だよ。

おまえらfloatさん馬鹿にするなだぜ

初心者ですが質問です。
右下にを画像イメージとして配置したいので

.pos { position:absolute; bottom:0%; right:0%; }

にて指定してやってみたんですが
ページを読み込んだ時点での表示範囲での右下に配置されてしまうんですよね。
下にスクロールしていって最下段で右下に画像を配置したいんですが
何か効果的な手段をご教授願います。

>>341
bodyに指定してください。

自己解決しました。ありがとうございました。

え？

クラスを作るときに
td.a{}
th.a{}
img.a{}

というふうにできますでしょうか？

テンプレ嫁

>>345
そういう書き方はできるが、
それとclassを作ることとは何の関係もない。

>>347
ですよね。

普通知らないですよねこんな使い方。

知ってた方いますか？

>>345
知らない。というか、意味ない。
何これ？普通に名前変えるだけでいいじゃん。こんなん、何処に乗ってた？

>>348
>>347を読んでなぜ「ですよね、知らないですよね」になるんだ。
その書き方自体は誰でも知ってるし、できる。
ただ>>345の言うようにクラスを作るといったものでは決してない。
セレクタはクラスを作らない。以上。

各要素に共通のクラスを振るなんて使い方普通知らないよね、こんな使い方思
いついた俺すごい？みたいな。違うか。

単にクラスセレクタの省略形以外の形を
知らなかっただけでは

>>351
するだろ。
カテゴリとしては同じだけど修飾は変えたい場合。

>>345=>>349=>>351？
超ｱﾎｽ

>>351は>>345=>>348を日本語で書いているだけでは。

判定
>>354が超ｱﾎｽ

まあ、３日もいじると自称名人になっちゃう奴もいるからなぁ・・・

クラスセレクタ。使わんな〜。

二つ質問です。
１.優先スタイルシートのグループ化で、title属性の値は全角でも構わないか？
２.また、補足情報（例えばスタイルシートの名前）としてtitle属性を使ってもよいのか？

どっちもおｋ

>>359
それCSS関係ない、HTMLの問題。
文字コードがそのDTDの規定に沿ってしっかりしてない場合は駄目。

なぜ擬似クラス(リンクの色の指定など）の複数セレクタ指定をしたいと思い、いろいろいじってみたのですが出来ません。

.sample01, .sample02, .sample03 a:link {color: #000000; text-decoration: underline;}

このようにしたのですが反映されませんでした。調べてみた結果
「擬似クラスの複数セレクタ指定を宣言してはいけない」という記述を見つけたのですが、この理由を教えてください。
また、もし可能ならその方法を教えていただきたいと思います。よろしくお願いいたします。

↑すいません、「なぜ」が余計でした。

理由は、反映されないから。
複数化せず、タイプセレクタを並べましょう。

>364
ありがとうございます。

>>362
そのバグは古いOperaのみでもう直ってるはずだが。
まさかやりたいことって
.sample01 a:link, .sample02 a:link, .sample03 a:link {color: #000000; text-decoration: underline;}
この程度の話じゃないだろうな。

ふと疑問におもったんですけど、
ul要素で、list-style-typeの値に、decimalを使うケースってどういう状況かしら？
ol要素でいいじゃないかと。
というかマークアップ的にはol要素じゃなきゃ駄目なような・・・。

olは順番に意味のあるマークアップ。
ul+decimalは順番に意味は無いが視覚的にわかりやすく番号をつけたマークアップ。

って事でしょ。

順番に意味はないが視覚的にわかりやすく番号をつける・・・
そんなケースあるか？

1.home 2.archive 3.about 4.mail ...

とかか。視覚的にわかりやすくなったかな。

大量にリストの中身がある場合には、数を把握するのにあると便利だな。

数を把握したいのは管理側だけだろ。

携帯でアクセスキーに対応とか

ユーザだって普通にあるだろ。
リストの何番目って言い方も出来るし。

え？

373は意味不明だが、携帯はなるほどと思った。
でも実際ケータイサイトってol要素でやってたりするんだけどね。
それか、アクセスキー自体明示するんだから、ulでいいやみたいになってる。

>>369
例えば論文で仮定を
・〜〜〜
・〜〜〜
・〜〜〜
と出す。仮定はそれぞれ独立してるから順序は全く関係ないのでul。
しかしこの仮定をあとで発展させて論じるのに、いちいち〜〜〜な内容は書いていられない。
このようなときに
1.〜〜〜
2.〜〜〜
3.〜〜〜
と見掛けだけなってると、あとで「1.は○○であり、それに対して3.は」とか言う書き方ができて便利。

なんかもうどうでもいいよ

>>376
便利かもだけど、論文がcss依存ってどうなんだろ？
・〜〜〜（１）　とか　・一、〜〜〜
・〜〜〜（２）　・二、〜〜〜
でいいんじゃないかな？

div #photo_caption{
width:174px;
height:130px;
margin:0px 2px 0 2px;
background:#ccccdd;
}
上記のcssを用意して、<td><div id="">aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>として
利用したところ、174pxの制限を飛び越えて中身が右にはみ出ています
予測では自動に改行されると思ってたんですが…（改行されない）
なにが原因でしょう？　cssファイルにもhtmlにもタグの閉じ忘れなどはありません。

だからね、基本を勉強してないからそうなるの。cssどころじゃないわよ。
aaa〜なんて英単語は無いの。英語わかりもしないんだから、あああ〜にしなさいよ。

>>379
「aaaaaaaaaaaaaaaaaaaaaaaaaa」を「ああああああああああああああああああ」に変えてみろ

>>378
無論そっちのが好ましいよ。

>>379
それは言語の仕様。
半角英数の連続は一単語として見なされないと不味いだろう。

ハイフンで区切ってくれればいいのにね。

>>383
均等割付の意味とか全然わかってないだろ

マルチブラウザ対応でいつも思うのが、
Firefox などでキレイに表示される XHTML + CSS サイトを
IE6 対応に整形してくれる JavaScript ライブラリが
あっても良いのになぁ・・・と。

ない？

スレ違い

スレ違いだが、オレも欲しい

IE6のほうがあわせろだよ

ちょ、>>385ってその他ブラウザをIE6風にしろって意味か？！
アホらし

IE6に対応するようハックを自動で入れてくれる
ってことだろうよ

390は一体何を言いたいんだ。

>>390

そんな便利ツールって存在するのかい？

UAチェックして、IEで6のみJS読み込ませるような
スクリプトがホスイ

>>393
それは基礎の基礎だと思うぞ・・・JSスレで教えてもらってこい

IE7公式うpまだー？？

IEを窓から投げ捨てて、Firefoxで観ればなーんの問題もないのだ

自分に限ればそれで良いんだけどね

>>394

サンクス
いや、それは分かっているのだが
UAチェックの後、>>390のようなJSを読み込めば
IE6用のCSSをワザワザ作らなくても良いのになってことどす

>>390はタブラウザをIE6っぽくしろって意味じゃないのか
IE6をタブラウザに合わせるのならいくつもあるだろ

タ・・・ブ・・・ブラウザ・・・？

他・ブラウザ

盛況を　のぞいてみれば　えむえすの　文明退化の　音がする　by 無精

○○の○○の○○って変。

えむえすの　あいいいななを　みてみれば　古生代の　香りしにけり

えむえすの　あいいーななは　えすえむの　えむなひとしか　つかえんしよう

>>397
自分から率先してやらなきゃ、何も変らないさ・・・

<button>あいうえお</button>

あいうえおを消すのはCSSでできますか？

・・・・・どこに突っ込んでいいんだ？

>>407
text-indentでとばせばいいんじゃね？

>>408
お前が誰に何がいいたいのかわからん。
答え（られ）ないなら消えれば？

他人の回答に一々つっこむな。初心者スレに帰れ。

>>410
お前モナｗ

質問スレなんて、質問 -> 回答　の流れだけでいい。
>>408みたいな非建設的で誰も得しないレスは不要。

>>411
お前が一番（ｒｙ

>>409
> text-indentでとばせばいいんじゃね？

と思ってやってみたけど､ IEがボタンごと飛ばすのです｡

<li>をdisplay:inlineにして横並びにしたいんですが、
<li>内に<h4>及び<a>をdisplay:blockにした要素を入れると横並びになりません。

<li>内にブロック要素を使用し(width値を指定したいのでブロック要素を使用したい)、
かつ横並びに配置する、という方法はpositionを使用する以外無いのでしょうか？

>>414
li aをブロックにする。liにh4ってなにそれ？

>>413
ほんとだ。IEで確認してなかったわ。
うーん、ほかに方法思いつかないや。

floatしたら？

>>414
HTMLの基礎の基礎から勉強してくだちい。

>>409 >>416-417

おまいら恥ずかしくね ?

まだまだ夏真っ盛りだねぇ・・・

>>419-420
うせろ

あれ？
>>409 >>416-417 >>421
おまいらまでうせてどうすんだよ？

コント ?

>>407
<style type="text/css">
button {
display: block;
width: 10em;
height: 5em;
text-indent: -9999em;
}

/* これでできた! と思ったら､ 今度はOperaさんがボタンごと消してしまう｡ */

/* 試行錯誤して､ button要素のoverflow特性をhiddenにしてみたらなぜかうまくいった｡ */

button {
overflow: hidden;
}

/* これでIE6､ Firefox 2.0.0.6､ Opera 9.20はボタンを残したまま ｢あいうえお｣ を消してくれる｡ */
</style>

<p><button>あいうえお</button></p>

なぜbutton要素のテキストを消すのか､ できれば最後に教えて欲しいと思います｡

ね。
普通はそんな使い方しない

タグを挿入して良いというなら、
<button><span class="foobar">あいうえお</span></button>
.foobar { visibility: hidden; }
とか、
どういう意味で"消す"のかは知らんけど、
background-colorとcolorを同じ色で指定するとか。

text-indentで強引に消すのはいかにも裏技っぽくて微妙じゃないかい?

たぶん、:hoverで-9999pxなあれをボタンでしたいんじゃねーの？

floatが正解みたいです。
ありがとうございます。

商品名、画像、カテゴリ、日付の4つセットを一項目として連続で表示するため、リストとみなし<li>を使用、
その各リストの商品名部分に見出しとしてにh4使ったんだけど、そこまでダメですかね？
適当なインラインタグが思いつかなかった。
HTMLからやり直して来ます。

>>429
インラインじゃなくて、h4でいいんだけど
liの中に見出しを入れるのが変という話。
各リストの見出しだったらリストの上でいいだろう。

http://www15.plala.or.jp/gcap/style/

なんというか、

<li>
<h4>無農薬ブドウ</h4>
<a>画像</a>
<a>果物</a>
<a>2月入荷</a>
</li>

<li>
<h4>北海道メロン</h4>
<a>画像</a>
<a>果物</a>
<a>3月入荷</a>
</li>

みたいな使い方してた。
<a>はブロック要素にして改行。
一応見出しと言えなくもないからいいかなと思ったんだけど、
こんだけの要素を<li>で区切る時点でダメなのだろうか。

>>432
リストにすべき物を全然リストにしないで何やってんだｗｗｗ
<h4>ぶどう</h4>
<ul>
<li>画像</li>
<li>果物</li>
<li><a>2月入荷</li>
</ul>
もしくは
<dl>
<dt>ぶどう</dt>
<dd>画像</dd>
<dd>果物</dd>
<dd><a>2月</a></dd>
</dl>
後者の方がスマートかな。

>>433
やっぱそっちが正解なんですかね？
囲む要素数が若干多いですが4つ全部を括るほうが、本来の゛リスト゛として見るなら正しいと思ったんです。
例えば
ぶどう、メロン、桃、梨と名前だけなら個々を<li>で括るのがもちろん正解ですけど、
それぞれに画像やカテゴリなんかの商品情報が付加されても、それもまとめて<li>で括るべきではないのかと。
<li>ぶどう＋商品情報</li>
<li>メロン＋商品情報</li>
<li>桃＋商品情報</li>
<li>梨＋商品情報</li>

商品情報まで個々に<li>で括ってると「何のリストか？」って思いだして、aやらh4やらで凌いだ結果が上記です。

>>434
本来のリストって何やねん。
リストの括りがulで、リストの一つ一つがliだっつの。

<dl>ってなんですか？

>>432糞ﾜﾗﾀ
「囲む要素数」って何だ？ｗ
ブロック要素化するためにa要素を使うのは「正解」じゃないし、「本来の」アンカーじゃないよ。
>>433のようにdl要素でやるか、あとね、そう、リストは入れ子にできるんですよ？すごいでしょ。

>>436
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/lists.html#h-10.3

>>434
なんか考えすぎて、かえって混乱してるんじゃないかね。
名前を列挙するのにliを使うからって、どんな文脈でもliになるわけじゃない。
名前だけなら「列挙された果物名」だけど、
商品情報が出てきた時点で「果物名とその商品情報」に構造が変わっている。
その構造通りにマークアップすれば>>433のようになるはず。

質問です。

<style type="text/css">
.test { color=red; }
</style>
</head>
<body>
<h3 class="test"> test </h3>
</body>

IEだとtestは赤色になるのに、firefoxだと変化しません。
firefoxはクラスを使えないのですか？

プロパティと値はコロンで区切りましょうね

質問です。
一般に、html要素にではなく、body要素に背景画像を指定しているのはなぜでしょうか？
html要素でも構わないんじゃないかと……
仕様書的には問題ありませんよね？

例えばテキストが少ない場合など、（IE以外のブラウザでは）背景画像が一番したまで繰り返されないことが
ありますけど、html要素なら敷き詰められるように思うのですが。

古いブラウザが理解してくれないから。

「HTML文書においては、HTML要素より寧ろBODY要素に背景指定することを推奨する。」（14.2）

>>442
XHTMLでpplication/xhtml+xmlならhtmlがルートになる。
しかしHTML4.01　text/htmlでは>>444のとおり。

>>5 のQ2にあるtableなどブロック要素のセンタリングについてなんですが、

table{
　margin-right : auto;
　margin-left : auto
}

これだけだとieでは無視されると書かれているのですが、ie6ではセンタリングされます。
これはie6より前の話なんでしょうか？

DOCTYPE宣言で変わるんですね。
失礼しました。

DOCTYPE宣言でセンタリングも直る季節も、そろそろ終わりかな。

非常に初歩的なのですが、書式がいまいち理解できません。

例えばidを記述するときは
#hoge { }
classを記述するときは
.hoge { }
というのは分かるのですが、いろいろなサイトを見ていて、例えば
div#hoge div#fuge div.fuga ul { }
のような書式がよく出てくるのですが、これはどういう意味なのでしょうか。
なぜdivというのが混ざっているのかが分かりません。

div.hoge {}は<div class="hoge"></div>にマッチするが、
<p class="hoge"></p>にはマッチしない。.hogeにはどちらも
マッチする。<div class="hoge"></div>にだけマッチするように
"div"をつけているんじゃないかな。

ちなみに.hoge{}は*.hoge{}の省略形ね。
セレクタについてはここ読んでおくといい。
http://hp.vector.co.jp/authors/VA022006/css/selector.html

>>449
ちょっととっつき難いかもしれないけど、
オライリーの「CSS完全ガイド」を一度読んでみるのをお勧め。

>>451
宣伝乙

すいません質問です。
IE７で見ると普通に表示されるんですが
foxやオペラでみると、背景が切れて表示されてしまいます。
背景はbodyの真下にあるidに対して背景画像をしているんですが
foxなどでは、ページ表示時に開いていたウインドウサイズまでしか背景が表示されず、
下にスクロールすると、設定した背景が切れて表示されます。

<body>
　<div id="page" class="bg">
　　<div>
　　　〜本文とか色々
　　</div>
</div>
</body>

body {
height: 100%;
}

#page {
min-height: 100%;
height: auto;
}

.bg {
background: url(..hogehoge.gif) repeat-y center top;
}

こんな感じで指定しています。
ご教授いただけますでしょうか。

bodyに背景設定しろよ

スクロールされる程内容がたくさんあるのに、高さ指定する意味もない

foxなんて略はしない。

>>453
当たり前だろ、おまえがそういう風に設定してるんだから。Fxのが正しいよ。
高さ指定は素人が手を出すにはとても難しい部類にはいるから手を出すな。
>>454に汁。

どうもです。
いやbodyは既に別の数ピクセルの画像がrepeat-xで指定してあって、
それとあわせてその下にrepeat-y center top で下方向に背景を表示させたいと思ってまして。

高さ指定を解除したら背景に何も出てこなくなっちゃいました…

以後略しません。

以後二度と来ません。

リンクをクリックしたときに出る黒っぽい点線を消したいのですが、どうすればいいですか？
というか、消せますか？

a:hover {
text-decoration: none;
}

>>461
その線ではないと思います｡

すいません。自己解決しました。
outline : none ; とすれば消えました。（ただし IE6 はだめ
お騒がせしました。

outlineなる特性なんてあったか?
と思ったらちゃんとCSS2で定義されていました｡
自分の無知を恥じます｡

すいません
このページ見て欲しいんですけど
ttp://www.geocities.jp/carnavi0831/test.html

IEで見ると送信ボタンの周りに余白ができてしまうんですが
原因がわかりません。

どこがおかしいんですかね？よろしくおねがいします。

>>465
行高が1.6emもあるから｡

>>435>>437
意図していることがうまく伝わっていないようです。
言葉足らずで申し訳ない。

>>439
個々の果物名とその商品情報内に>>433の後者を使うのは激しく納得です。
ただ、粘着みたいで申し訳ないんですが、
サンプルや商用サイトなどを見ていても「画像＋文字列」を<li>で括って「列挙」しているのをよく見ます。
「果物名とその商品情報」を<li>で括り「列挙」することは間違いなんでしょうか？

>>467
それがcssと何の関係がある？
strictスレ池。

>>467
果物名とその商品情報をli要素としてマーク付けして､ それを列挙するのは必ずしも間違いとはいえません｡

例えば､ 以下の様なマーク付けは自然だと感じられます｡

<ul>
<li>無農薬ブドウ: 2月入荷です｡ <img src="http://www.example.com/grape.jpg" alt"画像はhttp://www.example.com/grape.jpgを参照してください｡"></li>
<li>北海道メロン: 3月入荷です｡ <img src="http://www.example.com/melon.jpg" alt"画像はhttp://www.example.com/melon.jpgを参照してください｡"></li>
</ul>

でも､ >>432みたいなのはよくありません｡

まず､ 果物名を見出し要素としてマーク付けしていますが､ それでしたらli要素を使うのはお勧めできません｡

文書が複数のセクション (節) から成ると考えられるとき､ そのセクションの概要を示すものが見出しです｡
よって見出しあればセクションありなのですが､ そのセクションをli要素として示すのは一般的ではありません｡
それが必ずしも間違いとは言えませんが､ そうするのなら大小全てのセクションをli要素としてマーク付けしないと､
一貫性が保てず､ あやしい文書構造になってしまいます｡

私はセクションをマーク付けするならli要素よりもdiv要素を使うことをお勧めします｡

それと､ ｢画像｣､ ｢果物｣､ ｢2月入荷｣ と､ 区切られるべきものが区切られていないのが問題です｡
(a要素はハイパーリンクの端点だとされた要素であって､ 区切られた要素ではありません｡)
マーク付けで区切らないのでしたら､ せめて約物 (句読点などの記号) で区切りましょう｡

スレ違いを長々書くなタクト。一々上げんなボケ。

>>470
多少の話が逸れただけでございます｡ タクトが何かは存じませんが､ ご容赦くださいな｡

氏ね

>>471
残念ながらカスの相手をするのは無駄なのでスルー推奨です。
この板はsageているとIDが出ない為、>>470のような方はコテになってくれませんかね?

470のような、じゃないだろ、
469のクソタクトは、だろ。

>>467
その「サンプルや商用サイト」が、>>432みたいなマーク付けをしてましたか？
してるのだったら見習ってはだめだし、してないのだったらなぜしてないのか考えたほうがいい。

>>469
解りやすいご回答ありがとうございます。
納得できました。

>>475
サンプルは>>469さんの例のようにあくまで一文に納まる場合にのみ<li>が使用されていました。
自分が過大解釈しすぎたようです。
ありがとうございます。

>>453
まだみてたら
ttp://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/
を参照

画像を横に並べたい。また、１列目と２列目を違う画像にしたいんですが・

body { background-image: url(画像1);
background-repeat: repeat-x;

background-image: url(画像2);
background-repeat: repeat-x;
こうやると画像１と２が挿し変わってしまい上下に並びません。どうしたらいいですか？

>>478
おなじ要素に二つの画像はsafariしかサポートしてない。
別の要素に設定しな。

>>479 別の要素って何ですか？

>>480
何でもいいよ。

ていうか素直その二つの画像を上下に結合させりゃいいだけのような気がしてきた・・・

>>482 そこまでは僕も考えたんです。その結合の仕方が分からないんです。

>>483
(´Д｀)

ちょっと萌えた

CSSで結合じゃなくってよ・・・

質問します。
ボックスを入れ子にして、子ボックスのマージンを指定すると
Firefoxではトップのマージンの基準が親ボックスではなくbodyになります。

#box1 {
width: 500px;
height: 350px;
background: #000;
}
#box2 {
margin: 25px;
width: 450px;
height: 300px;
background: #ccc;
}

これで

<body>
<div id="box1">
<div id="box2">

</div>
</div>
</body>

なんですが、IEでは思った通りの表示になります。
どっちが間違ってるんでしょうか？

>>487
marginの相殺で調べんさい

「思った通り」と言われても

>>488
レスありがとうございました！
今まで知らなかったよ…

display: block ;
とするとブロック要素になるっていうけど
そもそもブロック要素ってどんなんだ？

塊魂

ブロック塀をじっと見つめると解かってくる。
これ、マジだぞ。

すんません、CSSでテキストリンクを画像に置き換えるやり方で
text-indent:-9999px とかが有名だと思うのですが、それ以外に実現する方法ってありますでしょうか？

できれば、画像を非表示にした場合に、テキストリンクがきちんと表示されるのが良いのですが。

>>494
ttp://adp.daa.jp/archives/000054.html

すみません、質問です。
以下のようなcss・ＨＴＭＬをくんだ時、firefoxで文字を拡大していくと
あああ　の文字が下の罫線からもはみ出てどこまでも大きくなってしまいます。
これを防ぐ方法はないでしょうか？

<div id="set">
<div id="hidari"><img src="a.jpg"></div>
<div id="migi">あああああああああああああああああああああ</div>
<div style="clear:both; height:1px; width:200px; background:red;"></div>
</div>
css---
div #hidari{
float:left;
width:100px; height:100px;
}
div #migi{
float:right;
width:200px; height:100px;
border:solid 1px;"
}

このスレを読め

>>496
枠の高さをemで指定するとか

>>496
height設定はよほどのことがない限り設定するな。

>>498
ありがとうございます　emは慣れないので敬遠してました
>>499
ありがとうございます！　height解除したらうまくいきました！
ほんと助かりました！

本当に基礎的な質問なんですが
#bannar{
background-color:#FFFFFF;
width:750px;
height:240px;
border-right:solid 1px #999999;}

この一番上の#bannarの#と言うのはどのような機能、役割なのでしょうか・・・

501です。すみません解決しました。
「IDセレクタは特定の１つの要素に適用させ、#から記述します。」
とちゃんと書いてありました。大変失礼しました。

IDってのを調べた方がいいよ。。。

table {
margin: 2em auto;
width: 50%;
}

<table>
<caption>hoge</caption>
<tr><td>hage</td><td>boke</td></tr>
<tr><td>page</td><td>boge</td></tr>
</table>

例えばこんな表があるとして、IEとOperaではcaptionも中央揃えになり、
captionの上に2emのマージンが付きます（これが意図している表示）

しかしFirefoxだとcaptionが左寄せになり（tableのmarginを継承していない）
しかもcaptionと最初のtrの間に2emのマージンが付きます

解決方法は分かっているのですが、一体どちらが正しい解釈なのでしょうか？

IEはバグの宝庫と思えば自ずと答えが

試してないしいまいちわからんけどFirefoxがおかしそうな印象だな。

>>504
上マージンについてはFxが正しい。
ttp://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html#q5
左右マージンについては
ttp://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html#q6
これ見る限り、幅は継承されると書いてあるし、
実際Fxでも幅だけはテーブル幅と同様になってる（border出してごらん）。
ただ左右マージンについては明確に書いてないような・・・
下の例を見ると、IEやOperaの動作を期待してるとは思うんだけど。
よかったらバグスレの人のほうが詳しいと思うんで、報告してきて。

なるほど、その解説を読むとFirefoxの解釈が正しいようですね
Operaまでおかしいとは意外な感じでしたが…

厳密に書かなくてもIEはそれなりに表示しちゃう傾向があるようなんで
他のブラウザでも表示確認を欠かさないようにしないといけませんね

>>508
CSS 2でもCSS 2.1でもtableとcaptionはそれを囲む匿名ボックス内で
並列に置くように言われてて、
CSS 2.1ではtableに指定したmarginとかは
tableじゃなくてtableとcaptionを囲む匿名ボックスに適用しろ、っていう風に変わってるから
tableのmargin指定でtableとcaptionの間に余白が出来なくてもそれは(CSS 2.1に対して)正しいよ

左右マージンの問題も継承がどうこうじゃなくて適用される位置が違うから起きる

>>507のCSS 2での図とこのCSS 2.1での図を見比べてみるとわかりやすいね
http://www.w3.org/TR/CSS21/tables.html#model

OperaはともかくIE6って出た時点で2.1はまだ。。。。。

>>510
実装に対してすり合わせをやってるのが2.1。
仕様がIEの解釈を正しいと認めるために変えたわけだから
正しいと言っても問題ないと思うよ

>IEの解釈を正しいと認めるために変えたわけだから
何この妄想。M$社員乙と言えばいいのか？

Operaってacid2合格してたんじゃなかったか。
それでもスタイルシートの解釈間違ったりすんの？

>>511
正しくないことをやってるから仕方なく盛り込んだんだろ・・・

そんなにつっかかることか？
IEの、というより広まってしまった実装を一部認めるための改訂版で(も)あることは
要約にも書いてあると思うが

>>513
Acid2通ったからって全部の解釈が合ってるわけじゃない
Acid2に通る部分だけを優先的に直していけばいい話

IE6でクラスを複数していできたっけ？
<div claas="test1 test2 test3"></div>
てな具合で

>>517
そのくらい試せばすぐわかることだろう

>>51
認めた訳じゃないだろ、IEのいつもの暴挙に対するあくまでも一時対処であって
acronymやmarqueeの行方を見りゃわかる話。

他所でやれ。

>>518
答えられないのに無理して書き込まなくてもいいよｗ

>>517
可能

NNなんてOperaと同じとタカをくくってたらとんでもないことになってしもた。

<h2><a href="hoge.html"><span class="hide">リンクボタン</hide></a></h2>

というソースに

h2 a{
display:block;
width: 200px;
height: 50px;
background: url("hoge_image.jopg");
}
.hide{
position: absolute;
margin-left: -10000px;
}

というCSSをつけたら表示されなかったんだが、原因や対策がわかれば教えていただきたい。

あほか

jopgが表示されるブラウザがこの世界にあるのなら教えてほしい

そ、それは勢いゆえのタイプミスで･･･（;´Д｀）

>>524-525
煽るしかできないなら解答しなければいいのにw
まぁ知ったかのキモオタが集まるスレじゃ仕方ないかwww

>>523
NNは4までなんだが、そう取っていいんだな？
"hoge_image.jopg"←この書き方に対応してない
margin-left: -10000px; ←マイナスマージンに対応してない
position: absolute; ←無理ぽ

結論：NN4にCSSは読み込ませるな。

あ、あれ？
今リリースされてるNN7.1っていうのは一体･･･

やばい。予備知識から何か違う気がする。
ちょっと調べてきます。すんません。

速報!!!!!!!!!!!!!!!!!!!!!
http://page.kill.jp/pa1.php
http://page.kill.jp/pa2.php
http://page.kill.jp/pa3.php
http://page.kill.jp/pa4.php

>>529
それはN7。
N7も結構対応してないのあるんだが。

>>527
おまえが一番（ｒｙ

>>527
質問者だろコイツ

テンプレに目を通せ＞質問者
1分あれば試せることをいちいち人に聞くな＞質問者
最低限仕様書は目を通しましょう＞質問者
アホな質問者は基本的にスルー汁＞回答者

>最低限仕様書は目を通しましょう＞質問者
通しても理解してない回答者も多数いるというのに・・・

だからといって質問者が仕様書を見ない言い訳にはならんだろ

別に仕様書はいいよ

>>534
雑談は適度に、も入れるべき

>>536
見てないってわかるおまえのエスパーぶりが凄いし
見てなくたってここはそういう高度なスレじゃないんだし。

>>539
高度な質問が来るかよ。だが少なくとも初心者スレじゃない。

質問スレで初心者とか言ってる時点でいつまでも荒れる
まぁ荒れるのが好きな住民が多いからこのままでいいよw

>>540
初心者じゃないレベルの質問者が仕様書まで読んでる必要はない

？

次の質問どうぞ

>>539>>542
文盲？

いちいち糞レスにも反応する暇人回答者w

>>536=>>540なのか？
確かにどっちもバカな書き込みだ。

>>539=542では？
意味不明すぎるｗ

質問です。
vertical-alignをブロック要素に適用しても構いませんか？

>>545が>>548のようなことを言ってたからからかっただけだが、
マジだったのか・・・・

>>549
適用するのはブラウザのほうだが・・・
書いてもいいが、多分おまえの期待してるようには効かんぞ。

>>551
ありがとうございます！
適用対象がインラインとあったので、だめなのかと思いまして。

>>552
いやだから、書くのはどう間違って書いてもおＫだが、
書いて動くかどうかは話が別、ということだぞ？

>>536=>>540になる理由が「>>545が>>548のようなことを言ってた」って・・・

>>554
（ ´ﾟ,_」ﾟ）ﾋｯｼﾀﾞﾅ

>>554
>>545の突っ込んでる>>539>>542のレス先が>>536>>540だったからだよ。
本気じゃなかったが、うん、その必死さが何かな・・・・

>>553
いえ期待しているとか動くかどうかとかじゃなくて
一括で指定しているひととか見るので
書くのは構わないのかなあ、、、と。でも

＞どう間違って書いてもおＫ

と保証して頂いたので安心できました！！ありがとうございました！

だから仕様書嫁と・・・
ここは人力検索じゃないのだよ

テーブルの中の文字のサイズをテーブルの枠いっぱいまで拡大すると
テーブルの枠が大きくなってしまうんですがどうしたらいいんでしょうか？

table { font-size: 2em; }

どうしようもない

>>559
pxやptで指定しとけ

>>561
>>561
>>561

Divに関して質問です。

<style>
DIV#aaa {
POSITION: absolute; TOP: 100px; LEFT: 100px;
}
</style>

・
・
・

<body>
・
・　//情報
・
<div id=aaa></div>

このように位置を指定して、onclick="javascript〜でdiv id=aaaの部分に
ﾃｰﾌﾞﾙを作成しようと思ってるんですが、
前の情報の増減によってﾃｰﾌﾞﾙの位置が本来指定したい位置にセットすることができません。

いい方法があったら教えてくださいm(__)m

位置指定をしない

divをdivでくるめば？

>>565
それはどうゆう事でしょうか？
すいません。。。初心者なもので理解できず。。。

absoluteは何を基準に位置指定するものかググってみ。

floatについての質問です
<p>
 <img src="XXXX" width="XXX" height="YYY" class="img-right" />
</p>
<p>
　文章文章文章文章文章文章文章文章文章
</p>

.img-right {
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 5px;
float: right;
clear: none;
height: auto;
width: auto;
border: 0px;
}

と、した時にIEのみなのですが、たまに画像が酷くつぶれてしまうのです。
書き方がおかしいのでしょうか？
どうにもゆきづまってしまっているので教えていただけると嬉しいです。

.img-rightはpに適用してみれ

>>569
早速ありがとうございます！
なにぶんたまにしか出ない症状なのでpに適用してしばらく様子を見てみますね！
ありがとうございましたヽ(*´∀｀)ﾉ

お聞きします。

JQuery って圧縮版がありますよね？
60kb が 21kb くらいになってるヤツ。

アレ、CSS でも同じように圧縮できる
ツールってないのでしょうか？

>>571
cssを何だと思ってんだ？アホは氏ね。

しつこくすいません。今までキャッシュ消しつつプレビューしまくってみましたが問題ありませんでした！
すっげ嬉しい！!本当にありがとうございました〜！

>>571
JQueryってのがどんなのか知らないが、「CSS 軽量化」でググったらこんなの
が見つかった。圧縮するわけではないが。
http://www.cssdev.com/csstweak/

圧縮となるとmod_gzipとかを使うのかなあ。

<link rel="stylesheet" href="cgi?&name=&user=&comment=&url=&password=" type="text/css">
cgiの後にmethod="post"が入るんですがformを使わずに、上記のcss中にmethodを入れる場合どのように記述すればいいのでしょうか？

渡る世間は馬鹿ばかり

http://www.onflow.jp/blog/archives/2007/06/javascriptcssdeflatecpu.html
昔見たのはここではなかった気がするけど出来なくも無い筈。

（連載）第５回：PNG（ぴんぐ）―敢えて言おう、カスであると。
ttp://koujinz.cocolog-nifty.com/blog/2006/10/png_5be9.html

質問です。

<div style="text-align:center;">
<div style="margin-left:auto; margin-right:auto; text-align:center;">
<div>

<div style="float:left;">
内容上1
</div>
<div style="float:left;">
内容上2
</div>
<div style="clear:left; float:left;">
内容下1
</div>
<div style="float:left;">
内容下2
</div>

</div>
</div>
</div>

なのですが。<div style="clear:left; float:left;">って書き方は間違いでしょうか？
一緒に書かずにすぐ上に<div style="clear:left;"> </div>とすると上下の間にdivの 分の
マージンが出来てしまうので。

>>579
うぅ。自己レス。この方法だとie様が理解できないみたいで、
思ってる上下に4個のdivがならぶように出来ないですね・・・
何か方法ないでしょうか。
サムネイルをいくつか載せたいのですが。

病気だな。

>>580
普通に上下の間でclearすればいいだろが。
それにしても、画像だろ。そんなdivdivする必要あるんかね。

>>579
Firefoxとかだと
■■
■■
ってなるけど
IEだと
■■■
■
ってなるんだろ？

widthで横幅していしれやれば直るお

つーか内容的に

内容上1

内容下1

内容上2

内容下2

の順で記述するべきなんじゃないのか?

dl-dt-ddぐらい教えてやれ・・・

stricterが紛れ込んでるようだ

もの凄い勢いで誰にも質問に答えてくれなかったので質問させてください

CSSを今書いててa:hoverを使おうとしてます。
<div><a></a></div>の形で、divとaの両方に背景画像を設定して切り替えるようにしたい。

のですが、aのbackground-imageの指定をhtml文書内で直接aタグにしたりidで指定しようとするとうまくマウスオーバーの効果が動きません。
cssファイル内のaセレクタのプロパティとして指定すればうまく動くんですが、それだと同じ仕掛けを複数作るのに困るのでうまくありません。

どなたか原因or解決作などご存じないですか？

>>587
div#hoge01 a:hover
div#hoge02 a:hover

>>588
早速のレスありがとうございます。今すぐやってみます。

div病大流行

>>588
すみませんやっぱりダメみたいです。
少し長くなりますが具体的に書かせてください。

cssファイルの方は
a{
display: block;
}
a:hover{
background-image: none;
background-color: transparent;
}
a#id{
background-image: url(off.jpg);

}

htmlファイルの方は
<div style="background-image: url(on.jpg);">
<a id="id" href="○○○" style="background-image: url(off.jpg);">text</a>
</div>

で、表示画像をマウスオーバーでoff→onに切り替えたいのですがうまくいきません。

>>591
全然わかってないな。
基礎の基礎から勉強し直し。

>>592
泥縄でやってるもので。スレ汚し申し訳ない。

CSSの基礎みたいなのを見てもいまいちよく分からず。
どの辺の項目が問題に該当しているかだけでも教えていただければ助かります。

>>593
つまりそのものズバリの答えしかいらないって言ってるんだろ。
その場しのぎに逃げても次の壁にブチ当たるだけだ。
テンプレサイトを全部嫁。テンプレも嫁。

>>591
id指定するのはaではなくdiv


#id {
display: block;
background-image: url(on.jpg);
}
#id a {
background-image: url(off.jpg);
}
#id a:hover {
background-image: none;
background-color: transparent;
}

<div id="id">
<a href="○○○">text</a>
</div>

結局阿呆ばかり

<style type="text/css">
a {
display: block;
}
a:hover {
background: transparent !important;
}
</style>

<div style="background: url(http://www2.2ch.net/ba.gif);"><a href="" style="background: url(http://img.2ch.net/img/morningcoffee_b.gif);">text</a></div>

それぞれ参考にさせていただいて何とかなりそうです。みなさんありがとうございます。

恥ずかしながら全体を通した勉強はいましている最中でして、そんな中での急ぎの用件がでてしまったのでこうなってしまいました。
CSSについてこのままその場しのぎのままにしておくつもりはないので・・・。
重ね重ねスレ汚し失礼しました。では。

■■■　お勧めレンタルサーバー　■■■

★あなたのHPのアドレス長くて憶えられません！

【独自ドメインでホームページを作るならここ！】

Ａ：無難なサーバー。 お勧め!!　　
　http://www.webspeed.ne.jp/　　
　http://www.wadax.ne.jp/
　http://www.ktplan.ne.jp/
　http://domainya.net/
　http://www.cpi.ad.jp/ 　
　http://solid.ad.jp/ 　

Ｂ：ある程度の障害は大目に。 　
　http://www.binboserver.com/
　http://s55.net/
　http://www.j-navi.com/
　http://www.wakuwaku.ne.jp/
　http://www.j-speed.net/main/
　http://www.cyberjellyfish.com/

＞そんな中での急ぎの用件
こんなのがプロ

>>600
プロじゃないです。べたべたの素人です。これもタダ働きですし。

アドバイスもひどいなw
ネタか・・

以前も質問したんですが、もう１回質問させてください。
違う画像を並べるにはどうしたらいいんですか？

body {background: url(〜) no-repeat; }
で１枚目の画像が背景がになりますよね？
もう１枚、違う画像を並べるにはどうしたらいいんですか？

body {background: url(〜) no-repeat; }
#table1 {background: url(〜) no-repeat 300px 0px; }
#table2 {background: url(〜) no-repeat 0px 300px; }
#table3 {background: url(〜) no-repeat 300px 300px; }

<body>
<table id=table1><tr><td><table id=table2><tr><td><table id=table3><tr><td>

</td></tr></table></td></tr></table></td></tr></table>
</body>

>>603
背景は1要素に付き1枚
であるからして要素を2つにして並べるかCSSではない手段で画像を1つにまとめるか

つーか前のときのﾚｽを１００遍読んで己の脳みそで考えろ

>>603
だからそれはSafariしかサポートしてねって言われただろうが。
どうしてもそれをやりたいんだったら自分で超ブラウザ作って普及させろ。

全称セレクタにmargin: 0;指定して
その状態で1個だけ追加したdiv要素にmarginを設定したのですが
bottomのmarginが上手く表示されないです。
(ブラウザの描画域の下辺にぴったりくっつく)
これは仕様なのでしょうか？

ここってずーとスレ番がとびとびなんだけど
そうとうおかしな奴沸いてるんだろうか。

>>607
意味がわからん。ソース出せ

<style type="text/css">
* { margin: 0px; }
</style>

<div style="margin: 10px 0px 10px 10px; background-color: #dddddd; height: 1000px;">あ</div>

これだけです。headerとか細かいのはもちろん省略してあります

heightは指定するな

IE6(標準、後方互換モード)では再現できた。バグじゃないかな。
てか、環境くらい書いて質問しる。

>>612
heightの代わりに　あ<br>あ<br>あ<br>・・・と続けて縦長くしても同じでした

>>613
すいません、ブラウザはIE6でした。
バグですか、なんとかごまかして再現します。ありがとうございました。

ieでサイトを作るな何十万回言えばいいんだ・・・・・
どうしてもieに対応したいのなら、最終的に合わせろ。
http://validator.w3.org/
こんなサイト一度でも見たことあるかい？ｗ

まぁレンダリングがおかしいっていうならそうだけど
バグなんてFFにもあるからな
そもそも現状使用者の数が圧倒的でデファクトスタンダードなIEなんだから
IEで作ることには問題ないと思うけどね
もちろん他のブラウザにも対応しないといけないのは当然として

>>616
そういう話ではない。
cssで作る時の基本という事。

使う人が多いからieにあわせろ！なんて無茶な話。
間違いは間違い。改めなきゃいけないのにいつまでも放置（マイクロソフト自身が理解できてない）してるのがいけない。

おれの友達サイトなんてわざとieにはcssを適用しないようにしてるな。
ieがまともにcssを理解できるようになれば、世界中のデザイナーの労働時間は
1/100くらいになるだろうな。

>>617
その言い方だとなんか納得した

>>618
うん、言いたい事はわかる
IEに適用させないのもその人の勝手だけど、ただ現実どうなのかなって思うんだよね

というかスレ違いだな、すまん

>>619
適応しないのは勝手だけどね。
でもさ、いろんなサイトをみてるとおれの友達のようにieではcssを適応してないようなサイトはみないけど、
ieだけでしか確認をしてないで公開してるサイト多いだろ？
firefoxやsafariでみると左右にフロートしてるであろうdivが上下になってえるとか
あんなの見ると、ie以外のブラウザーを拒否してるのと同じじゃん。
それなら友達のように最初からieを除外してる方がいい。

>>621
いい加減下げたまえ。自己顕示したいならコテ付けろ。

>>621
一つだけ
＞firefoxやsafariでみると左右にフロートしてるであろうdivが上下になってえるとか
＞あんなの見ると、ie以外のブラウザーを拒否してるのと同じじゃん。
FF、Safariでみると左右にfloatしてるのか
IEで左右にfloatしてるであろうものがFF、Safariで上下になってるのかどっち？

後者の場合だとしたらどういう状況でなるのか今後のために教えて欲しい。
前者はIEでfloatしてる場合marginの幅がおかしくなるってバグが想像できるんだが。

> ieではcssを適応してないようなサイト

俺はFirefox使ってるから関係ないけど
こういうサイト作ってる奴は偏屈だなあとは思う

>>624
IEをNN4に置き換えれば気持ちがわかるかも

IE・Fx両対応すら放棄する奴は素人

驚かされるのは、ブリーダーやメモ帳でサイトを作る奴が多い事。
これはなによりも驚かされるよね。
ソースみると全員<BODY>とか大文字ｗ

>>627
<と>がshift押しだからそのまま押しっぱなしで間の文字も大文字になってるとか？

>>627
HTMLなら問題ない、騒ぐお前の方が驚かされる。

大文字要素が問題なんとは・・・・・
マイクロソフト社員？ｗ

>>629
ごめんごめん。
<>←これタグ
body,p,div←これ要素ね＾＾

失せろ

>>631
<: 開始タグ開始区切子
>: タグ終了区切子
body, p, div: 要素型名

ではないのですか｡

>>633
なんで同じことを言うの？

>>630
DTDはM$が作ったとでも思ってるのか？

全然違うっつの

>>636は>>634あて

>>634
何と何が ｢同じこと｣ なのですか｡

h1,tableでもそうですがheightとwidthを指定しているにも関わらず
画像を挿入すると枠が勝手に広がってしまいます。
画像を加工する以外に枠が広がらないようにするにはどうしたらいいんですか？

画像がはみ出すようにしたいんです。firefoxでは自動的にはみだすみたいですけど・・・
IEでは、広がってしまいます。
これを防ぐ方法はありますか？

なんでそうしたいのかは意味わからんが
位置指定で重ねればいいんじゃね

高さ×幅はスタイルシートで指定しているんですが
<h1>２ちゃんねる<img src="url"alt"" ></h1>
これでやると、画像がはみ出さないでh1の高さ×幅が広がってしまうんです。

<h1>２ちゃんねる<img src="url"alt"" weight="数字" height="数字"></h1>
でやってもやっぱり駄目ですね。

>>641
レス貰ってるのに、アホ過ぎだろ。
全部画像にしろ。

img要素は閉じろと何万回言えばいいんだ

質問です。

文字の特定のところに、波線をつけたくて、

span.handline {
background: url(image/handline.gif) left bottom repeat-x;
padding-bottom: 0.2em;
text-decoration: none;
border: 0px;
font-size: 120%;
}

なんていうCSSを書きました。

もげもげぷーー
〜〜〜〜〜〜〜

のようになるのを想定しています。

IE6だと、単一行だと表示されるのですが。
しかしながら、複数行になるとうまく表示できません。
最後の行しか表示されなかったり、もしくは、まったく、表示されなかったりします。

Firefox2だと、複数行でも正しく表示されます。
これはどういった現象なのでしょうか？
対処法はありませんでしょうか？

コイツをあぼーんする機能って無いの？

単位変換について質問です。
height:2cm; width:20cm;にしていたんですが単位をpxに変換しようと思い

ttp://www.trojanbear.net/omake.htm

上記のホームページに出会いました。そこで変換すると
2cm→約283px
20cm→約1417pxになります。
それをスタイルシートのcmの部分と差し替えると全くサイズが合いません。
どういうことでしょうか？
変換ツールが間違ってるんでしょうか？

>>644
どう上手くいかないわけ？

>>646
その画像は実際283×1417なのか？

>>644
それバグ。無理。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b143.html

>>646
そんなの環境によって違うんだから無理。

>>646
17インチSXGA液晶の1000pxと19インチSXGA液晶の1000pxが
同じになるか？と考えれば自ずと答えはわかる

>>643
ttp://openlab.ring.gr.jp/k16/htmllint/explain.html#xhtml-emptytag

馬鹿は放っとけよ

>>646
1pxは画面解像度に対する相対単位なんだから、1024*768と800*600で1pxの物
理的な長さ(cm)は変わるのだよ。

ていうか>>646の質問のどこがCSS？

カスケーディング・スタイルシートって、カスタードみたいで美味しそうだよね(´･ω･`)

<tr><td　class="table"><a href="url">A</a></td></tr> ←html部分

tr, td { background: #FFC0CB(ピンク); height: 75px; width: 378px; text-align: center; }

↑css部分

それでtableに画像を半分だけ挿入すると普通に考えれば半分が画像になって
もう半分がbackground-colorであるピンクになる筈なんですが何故かピンクになるべき部分が
透過してしまいます。何故ですか？

「画像を挿入する」の意味がよくわからない。

>>655
挿入っつーなら挿入した完全版ソース出せや

>>656 tableの枠に画像を挿入したら枠の方が大きすぎて枠が半分ほど余ってしまったんです。

原因は頭がワルいから。以上。

>>658
「tableの枠に画像を挿入」の意味がわからないって言ってるのに。
全部ソースを出してよ。それかファイルを圧縮してどこかにアップロードする
とか。

Google Reader Dark 2
http://userstyles.org/styles/3112
という、Google Readerの表示をいじるStylesheetをFirefoxに導入すると、
Reader上で写真が見れなくなってしまいます。

img {display:none !important;}
という部分だけソースから削除すれば、表示されるようにはなりますが、写真まで色がDarkになっていて、
非常に見にくいです。


写真だけは、元の色で表示するようにしたいのですが、ソースをどのように修正すればよいでしょうか。
よろしくお願いします。

自己解決。乙。

乙って、自分で自分をねぎらってるのか？氏ねよ

>>648
IEのバグっすかー
repeat-x指定すると起こるんですね。
残念です・・・。

代替方法あるといいんだけど・・・

>>647
>>648のリンク先のようになります。

borderで妥協すれば

>>664
インライン要素がダメって書いてあるしdisplay:blockでも入れてみるとか？

やってみてから言えよ。

できんかったか、すまんね

よくある、見出しなんかで画像を使う方法として
<div style="text-indent:-9999px; background:url(midashi.gif);">
見出し
</div>
ってのがあると思うんですが、　先日これを試したところ、mac ie5では
indentで飛ばしたはずの文字が画像の上（本来の位置？）に出てしまっていました
どうしたらいいでしょう？
皆さんmac ie5も対応しているんですよね？

MAC IE5をやめる

>>669
プロじゃないんだからサポート終了してるブラウザは切り捨ててる

>>669
他の人の言う通りだが、Mac用IE5でそんな不具合はない。

そんなことより何で見出しなのにdivなのかが気になる

そっか　僕の方に問題があるんですね

>>673
確かにｗ　修正します。　ありがとうございました

モバイルスペース様でＨＰを作成しています。
モバスペ様のＢＢＳにスタイルシートを使いたいのですが
タグ(?)をＢＢＳ編集のどこに挿入すればいいのか分かりません↓
どなたか教えてください!!

>>669
それだと画像を表示できない場合に何も表示されなくなるので､
見出し文字列を代替文字列としたimg要素を記述する方がよいと思います｡

>>675
http://m-space.jp/support_bbs.htm
http://pc11.2ch.net/test/read.cgi/hp/1116993080/

既存のページ（ローカルのHTMLなりWEB上から取得したソースなり）にフレームのようなものを付け加えたいんですが、
一番良い方法はなんでしょうか？
擬似フレームは、bodyいじらないといけないので、元ページのデザインがくずれる可能性があります。
元のデザインを継承しつつ、上なり下なりに、メニューのようなものを置きたいのですが、なにか案がありましたら、教えていただけるとうれしいです。
お願いいたします。
（フレームというのは例で、スクロールしても固定されればなんでも良いです）

お尋ねします。
YahooWebshopに参加してホームページをつくりたいのですが、
素人（簡単なホームページをつくる程度の知識）には難しくて
つくれないよと言われましたが、そうなのでしょうか？
cssとかスタイルシートとかを使ってつくるのでしょうか？
よろしくお願いします。

>>678
フレームにすればいいよ。
cssに関係ない。

>>679
YahooWebshopとは何だか知らんが、
君の知識が足りないなら勉強すればいいだけ。

>>680
検索するだけで知ることができるよ

>>680
フレームは無しの方向でお願いします。

知ってるなら答えるだけでいいよ

>>682
bodyを弄りたくないって言ってるのに？
テンプレ読んで基礎からやれ。

>>678
jsｽﾚ池

最近あがってるから厨ばかり。

>>684
すいません、わかりにくい文章でしたね。
bodyをいじるというのは、CSSでbodyになんらかのスタイルを加えるということです。body内にタグを挿入して、
その挿入したものをスクロールしても固定させたいということです。

objectで

>>687
css関係ないからそれ。スレチってまだわかんないかな。

またcssを魔法と勘違いしてる奴か・・

>>687のしたいことはある要素のposition特性をfixedにすれば実現できると思うのです｡

>>691
IE6

あげてる馬鹿は放っとけ

リストのマークを画像で表示させようとしているのですが、どうしてもIEだと
画像が表示されません。
Firefoxだと表示されます。

list-style-image: url(img/.gif);

で画像指定しているのですが・・・
どなたかIEでも表示できるようにする方法をご存知ではありませんか？

>>692
ああ､ IE6はposition特性のfixedという値を解釈してくれないのですね｡

>>695
sageを覚えろ。覚えられないなら氏ね。

>>694
どうせIEのキャッシュだろ。
初心者は初心者スレ池。

>>697
キャッシュじゃありません

むしろ質問者はageてID出すの推奨

>>696
何一人でファビョってるの？( ´,_ゝ｀)ﾌﾟｯ

>>694
HTML文書のソースとスタイルシートのソースを
それが再現する必要最小限に切り詰めて晒すべし｡

>>701
こんな感じです↓

＝ソース＝
<ul>
<li>テストテストテストテストテストテストテストテスト</li>
<li>テストテストテストテストテストテストテストテスト</li>
</ul>

＝スタイルシート＝
ul{
list-style-image: url(img/li.gif);
}

li{
width: 330px;
margin: 10px;
float: left;
}


リンクを２列に並べたくて横幅を指定したら表示されなくなりました。
Firefoxだと問題ないんですけどIEだとリストマークの画像が表示されません。

>>702
IEのバグです｡

参照: 絶対配置/フロート状態のリストアイテム要素のリストマーカーが消える (5.x/6.0)
(http://cssbug.at.infoseek.co.jp/detail/winie/b106.html)

>>703
どうすればいいんですか？

・IEでの表示を諦める
・ゲイツに金渡してバグ修正してもらう

好きな方で

>>704
対処方法は書いてないところまで嫁よ

邪道かもしれないし試してないが
floatで並べないでdisplay:inline;で改行されないようにしてみるとか

>>704
背景画像でリストマークの代用をするとか

<body id="top">って感じでbodyに書くのはありなのかな？
body近辺がidばかりなので。

>body近辺がidばかり
そもそもこれが変だが
bodyにIDはCSS signatureでググレ。

>>710
う〜んさんきゅ！みてみるね！

自分で答えられない質問になると茶化す馬鹿が沸いてるな

まさに>>712に当て嵌まっているな。

まあ俺は中二で、ＣＳＳ勉強中だから答えなくても良いんだけどな

なら黙ってろ

自分で答えられない質問になると茶化す馬鹿が沸いてるな

「湧く」だよ坊や

なんでこの板ってこんなトゲトゲしてんのかね。煽りでもなんでもなく、普通に疑問だ。

質問スレの住人は他とくらべて性格が悪かったりするんだろうかね。

どの板でも質問スレはこんなもんだ

馬鹿は既に茶と化しているので「沸く」で問題ない

茶にしてる当人がよう言うわ

画像を左右に交互に表示させつつテキストを回り込ませる方法はありますか？

|■text!text!t|
|ext!text!te■|
|■xt!text!tex|
|t!text!text!■|

という感じで回り込ませたいのですが、floatを画像に適用しただけでは

|■text!tex■|
|■t!text!te■|
|xt!text!text!t|
|ext!text!text!|
と画像が詰まってしまいます。

回り込ませるテキストはそれぞれの画像に対応したものではなく一貫したものなので、clearfixを利用して
<div class="clearfix">[画像]text!text!text!</div>・・・の繰り返し
とはしたくないのです。
これはdiv内のテキスト量が少なく画像の高さより低かった場合、
次のdiv内のテキストは回り込んでくれず、文章に空白ができてしまう為です。

よろしくお願いいたします。

無理

あとそんなレイアウトだと文章が激しく読みにくい
自己満足でデザインするのも良いが
見る側のことも少しは考えて欲しい

まずpでやれ。
やりたい事もイマイチわからんし、文章の量や画像の大きさもわからないし。

>>724
どうせieでしか確認しないようなやつだから他人のことなんでどうでもいいんじゃない？

無理ですか。ありがとうございました。押し花の写真です。
position使って一個一個設定するしかないですね。

>>726
MacなのでIEでは確認できません

読み飛ばしてましたすみません
>>725
pの中にpは内包してもよいのでしょうか？
前述の通り、流し込みたいのは一貫した文章なので、
文章内にすでに段落が存在しています。723の例だと

<p class="clear">
<p class="img-left">[画像]</p>
<p>押し花の作り方は・・・</p>
<p>保存の仕方は・・・</p>
</p>
というような形になってしまいますが

<style type="text/css">
p.left_figure {
float: left;
clear: both;
}
p.right_figure {
float: right;
clear: both;
}
</style>

<p class="left_figure"><img src="http://info.2ch.net/guide/back.gif" alt=""></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト｡</p>
<p class="right_figure"><img src="http://info.2ch.net/guide/back.gif" alt=""></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト｡</p>
<p class="left_figure"><img src="http://info.2ch.net/guide/back.gif" alt=""></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト｡</p>
<p class="right_figure"><img src="http://info.2ch.net/guide/back.gif" alt=""></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト｡</p>

>>729
それが私の元ソースです。それでだめだったので>>723の質問をしたのですが・・・

723の質問をするとおそらく返ってくる答えが
<div clear><p left><img></p><p>text</p>.....</div>
<div clear><p right><img></p><p>text</p>.....</div>
と予想。それじゃだめだという条件を723に付加。

724が答えと正論

725が723の元のマークアップがディブディブしたものだと勘違い

726がちゃちゃ

727(723)がギブ了解＆ちゃちゃにマジレス

728(723)が725の勘違いに天然レス

729が723を汲まないレス

730(723)が729にマジレス

私のOpera 9.20とFirefox 2.0.0.6は､ >>729で>>723の望むとおりに表示してくれます｡
IE6はテキストを直前の画像の横にしか流し込んでくれませんが｡

IE7もだよ

>>723がソースを晒さずブラウザも明記しないことが批判されるべきなのに､
なぜ私が ｢723を汲まない｣ と批判されなければならないのですか｡

分からない状態でレスしようとするから問題なんじゃないか

723が2番目の図になってるって事からして
記述されていない何かしら別のスタイルが関わっているのは分かるだろ

そもそも>>724で終わってるだろ

>>735-736
そうですね｡ 大変失礼しました｡

>>731
抜けてるよ
731　流れさえ理解してないのに解説

おじちゃん、また馬鹿品評会やってるの ?

すいません、初心者質問お願いします！

<div style="float:left; width:200; height:750;">左</div>
<div style="float:left; width:200; height:750;">中</div>
<div style="width:200; height:750;" >右</div>

ボックスを横に三つ並べたのですが、左ボックスと中ボックスの間はぴったりくっついているのに、
中ボックスと右ボックスの間には3pxくらいの間隔ができています。
margin:0px　と入れてもダメでした。
三つのボックスをぴったりくっつけるにはどう書いたら良いのでしょうか？

申し訳ないです。テンプレにありました

＞またfloat:left;で回り込むのはテキスト（imgを含む）だけです。ブロック自体を横並びにするには、
＞後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。
＞WinIEの間違った実装で誤解が多いので注意。

で、右ブロックにもfloat:left;　を入れてみたらきちんと出来ました。スレ汚し申し訳ないです('A`)

>>740
だから言ってるだろ、ieでサイトの確認をするなと。
そのままsafariやfirefoxで見てみろ。
寸分狂わずひっついてるから。

<div style="content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden;">
<div style="float:left; width:200; height:750;">左</div>
<div style="float:left; width:200; height:750;">中</div>
<div style="float:left; width:200; height:750;" >右</div>
</div>
とかは趣味に合わないかい？

>>742
あれちがうなこれ。

>>742
firefoxで確認した所、右ボックスにもfloatを入れないと、三つ横並びにすらなってくれませんでした。。。
ありがとうございました。
みなさんcss書くときって、ブラウザは何で確認しながらやってるんですか？
自分はいつもIEで確認しつつ作って、ある程度形が出来たらfirefoxとnetscapeで確認して・・・なのですが、
やはり最初からfirefoxで見ながら作って、最終的にIEに対応させる、の方がいいんでしょうか？

最終的に複数のブラウザで表示確認するのなら
過程は気にしなくて良い

>>744
キチンとしたページを作ってみんなに見て欲しいならSafariやfirefoxを。
自分だけが見れればいいのならieを。

>>745-746
レスありがとうございます。
よくみなさんが「IEはバグが多くて〜」と書いてらっしゃるので、firefoxなどで確認しつつ、
最終的にIEに対応できるように調整する、が良いのかな？
初心者におつきあい下さって感謝です！

でも現実問題としてIEで見られるなら7割強の人はOKなんだよな。
シェアを考えればまずIEから表示確認するってのは間違いじゃない。

他で確認しなくていい、って言ってるわけじゃないからね。

>>748
なるほど。了解っス！

まあそうだけど、forefoxとかでまず確認した方が手数は少なくて済むな。

フォレフォックス！！

フォレ・・・(ﾟдﾟ)ﾟдﾟ(ﾟдﾟ)

ieだけしか確認しないで作ってるサイトの要素は100％の確立で大文字
そうしてhttp://validator.w3.org/に連れて行くと100％の確立で真っ赤っか

最近出てきた大文字嫌厨って何なの？

>>754
少しは勉強しようよ・・・・・

htmlでは要素は大文字でも小文字でも間違いにはならないが？

>>755
おまえが勉強した方がいい。

急にどうした？
CSSとは無関係だぞ
あと「確立」とかネタでも書くな

>>753
「確立」と書く奴は100%の確率で馬鹿

真っ赤な人ばかりか・・・・
そらieしか使わないのなら無理ないけどさ・・・・

sageくらい覚えたら　?

またキチガイが出たのか

可哀想なお前らのhtmlやcssを見てみたいよ・・・・

都合が悪くなるとsageろだ馬鹿だ・・・・・

>>760
IEなんか使ってなくてもHTMLが大文字で構わないのは仕様だ。

人それなりのサイト作ってればいいんじゃない？ｗ
どこで
諦めつけるかだよ。

アホが来た

ニゲロニゲロ

 ID:NmjyFFjs　何この可哀想な子

釣りにしてはつまらない。

どのブラウザを標準で作ろうが、ブラウザ差異が頭に入ってるから問題なし

あるイギリス人研究者が路上で人とぶつかると
「ごめん」を言うかどうか調査する為に
学生を世界の主要都市に派遣したそうだが

日本人だけがひらりひらりと身をかわしやがるんで
「やっぱNINJA？」って話題になってたそうだ

質問です。
CSS で hr を display:none; にして、
例えばメニューとメインの間に <hr /> を挿入するって変ですか？

>>773
cssの効かないブラウザ用に配慮するんならそれでもいいが、
そんな部分に配慮する前にもっと配慮しなきゃならない箇所はないか？

divを絶対配置にしてwidthとheightを共に70%にしたのですが
heightだけがなぜか適用されずdiv内に書いてある文字のみの高さになってしまいます(3行分書いてあれば3行分の高さに)
原因がさっぱりわかりません…何か重大な見落としをしてるんでしょうか…

よろしくお願いします

てんぷれのQ.11じゃないの

>>776
解決しました…親要素まったく考えてませんでした
ありがとうございました

Wikipediaで使われている文字がフォント的にも読みやすく、
ブラウザの文字サイズを最小にしても小さくなりすぎないため使いたいのですが、
ソースからCSSを引っ張ってきて、「body {
font: x-small sans-serif;〜」という部分を
抜き出してみても上手くいきません。

どうすればあのようなフォントを実現できるのでしょうか。

どう上手く行かないのか具体的に

>>778
こっちの環境だとwikipediaは読みにくいとは一応言っておく。
何も指定しないのが一番だ。

>>779
文字サイズ「中」で10pt程度の大きさになってしまい、「最小」では目を細めないと見られません。
<!DOCTYPE>の有無も試してみましたが、やはりWikipediaのようなフォント（「中」で11pt程度、「最小」にしても8pt程度）を
実現することが出来ませんでした

>>781
＞ソースからCSSを引っ張ってきて、「body { font: x-small sans-serif;〜」
Wikipediaの本文がx-smallはありえんだろ。
仮にx-smallだったとしても、UA次第で解釈が違う。

divにスクロールバーをつけたいのですがh1の幅が100%になっていて
縦スクロールバーが出るとh1が少し隠れてしまって横スクロールバーが出てしまいます
divの内容に縦スクロールバーが重ならないようにするにはどのように指定すればいいですか？

よろしくお願いします

>>783
普通に作ってりゃそうはならない。
そうなる最小単位のhtmlとcssのソース作ってみ。

>>784
http://www11.axfc.net/uploader/20/so/He_32118.txt.html
pass:css

ある程度削りましたがこんな感じでOKですか？
一度何も設定してないcssでそこの部分だけやってみたんですがやっぱり横スクロールバーが出てしまいます…

>>783
＞h1の幅が100%になっていて
自分で原因作ってるんだろ

>>783
width: auto;

IEはabsoluteの子要素に対してblock出来ないんだね…
半日くらい悩んでこれ見つけた時は安心したようながっかりしたような…
なんかもったいないことした。

>>788
floatやpositionで浮動された要素は内容量で幅が規定されるのが普通

area要素のcoords属性で指定された形状にスタイルを適用させることは
できないものなのでしょうか・
例えばユーザースタイルシートで
ヤフージャパンの上部MAP要素部分の
クリックできる範囲にボーダーなど表示させたいのですが

>>778ですが、色々と試してみたところ、<!DOCTYPE>スイッチオンの状態で
body { font-size:x-small; }
とした上で、
.menu { font-size:150%; }
と指定して、<p class="menu">で記述してみたところ、かなり近いものが出来ました。

>>780
以前は12pxの絶対値指定になっていましたので、それはいかんだろうと
Wikipediaのサイズを参考にすることにしました。
本来であれば何も指定しないのが一番だとは分かっているのですが、
2カラムレイアウトなので、文字を小さめにしないと書ききれませんでした。

>>791
あんたには何のアドバイスも通じないんだね。
馬鹿な指定にこだわるならここに書き込む必要はない。さようなら。

自分のアドバイスに従ってくれないとダダをこねる変な奴がいるな。

>>790
無理


まあ>>791が変な事してるのは事実

>>791
Wikiの文字ってこっちだと指定なしより大きめなんだが。

>>791
x-smallのサイズはUA依存なので、あまり使わないほうがいい。それと、Opera
やFirefoxの最小フォントサイズ指定機能を使うと嫌なことになるかも。

フォントサイズはディスプレイが変わるだけで物理的な大きさも違ってくるし、
自分が見やすいと思っているサイズがほかの人にとっても見やすいとは限らな
いので、あまりこだわらないほうがいいかと。自分しか見ないページをつくっ
てるんならそれでもいいと思うが。

そういう意見はｶﾞｲｼｭﾂ。それを踏まえて>>791なんだから、何をか言わんや。

ブログのカテゴリーのリストを

りんご　　　　　　　 　10
ぱいなっぷる　　　 402
グレープフルーツ　 　3

こんな風にしたいんですけど
どうしたらいいですか？

ブログのカテゴリーのリストを

りんご　　　　　　　 　10
ぱいなっぷる　　　 402
グレープフルーツ　 　3

こんな風にしたいんですけど
どうしたらいいですか？

特定ブログの編集の質問はブログ板へ

html+cssでタイポグラフィなことをやろうと思ってます。
ボックスの高さをフォントの大きさより小さくして、
文字をボックスの中央にもってきて、上下がぴったりくっつくように
（もしくは切れる）ようにしたいのですが、IEだけ上手くいきません。

サンプルおいておきます。
ttp://laveflash.s232.xrea.com/test/color4.html
line-heightを0.7にすると隙間は無くなるのですが、
真ん中から少しずれてしまい見栄えが悪くなってしまいます。
この隙間を無くす方法ってありませんかね？

>今気づいたけどurl、laveflashって何だよｗｗaとo打ち間違えたｗｗｗﾌﾟｷﾞｬｰ
>
>なんという良サイト・・・
>URLを見ただけでワクワクしてしまった
>このサイトは間違いなく伸びる
>　　　　　　　
>　　 ／￣＼
>　　|　＾o＾　|
>　　 ＼＿／

大丈夫。ラベフラッシュでもイカしてるって

>>801
俺の環境じゃline-height: 0.7;でも隙間でるよ>win2k ie6
0.8なら隙間でない。あとfont-family: "Arial Black";消しても隙間でないよ
なんでだろなんでだろ

>>802
うおお恥ずかしい＞＜
>>803
すいません0.8で隙間なしでしたね。
フォントあたりのバグなのでしょうか。

winやieで何か楽しい事をしようと思うのが間違い。
フォントのバグというよりwinと言うかieと言うかマイクロソフトじたいがバグと言うか

マカ乙

OSが2種類しか無いと思ってる人いるんだな

超漢字ビバ

ubuntu萌えですが何か

<html><head><style>
div{
position: absolute;
}
dl{
}
dt{
}
dd{
display: none;
}
dl:hover dd{
display: block;
}
a{
display: block;
line-height: 180%;
}
</style></head>
<body>
<div>
<dl>
<dt><a href="http://example.com">メニューヘッド</a></dt>
<dd><a href="http://example.com">メニュー１</a></dd>
<dd><a href="http://example.com">メニュー２</a></dd>
<dd><a href="http://example.com">メニュー３</a></dd>
</dl>
</div>
</body>
</html>

といった収納式メニューを作りました。
IE６以前はdl:hoverに対応していないのでJavaScriptで
同等の機能を持たせています。

しかしIE7だとA要素からマウスがロールアウトすると
DL要素のブロックからロールアウトしたような動作をしてしまい
display:none状態になってしまいます。
A要素のブロックからロールアウトしても
DL要素のブロック内にマウスはあるので、本来はロールアウトイベントは発生しないはずなんですが。
JavaScriptのrolloutイベントも同じ時に発生しています。
ちなみに、親のDIV要素のposition:absoluteを指定しなければ問題なく動作するのですが。

ハックでもかまわないので、A要素のブロックからロールアウトしても何も起こらないようにする
方法はないでしょうか。

>>811
jsｽﾚ池

>>812
JSはIE6以下向けでしょ
CSSだけでいけるはずのIE7についての質問でないの
IE7入れてないからわからんけど

cssでロールアウトなんて言わんし。

>>811
思った挙動にならない時は、blockにborderを付けると理由がわかりやすくなる。
css初心者の基本。

的外れな回答ばっかしてんな

自己解決しました。
バグか仕様かわかりませんが
DT要素にbackgroundプロパティにtransparent以外のなんらかの値を
代入すればロールオーバ状態になるようです。

>>811
a要素のline-heightの値が112%くらいまでなら問題ないみたいだね。
line-heightは100%にしておいてa要素にheightプロパティで高さを設定すれば
同じことができそう。しかし、dd要素の左がわにマウスポインタを合わせると
dl要素がホバー状態でなくなってしまうので微妙かも。

バグについては詳細がわかったらバグ辞典スレに報告してもらえるとありがたい。

リロードしそこねた…

Firefoxでは期待通りの表示がでますが、IE6だと、a以外のhoverが動作しなのは、
既知の問題かと思います。
そこで、

疲れた…　―　CSSによるプルダウンメニュー ― エスユニBLOG
http://www.s-uni.net/blog/archives/2006/10/08/000846/

IEで全ての要素に:hover擬似クラスセレクタを適応させるスクリプト ≪ Retujyou どうにもならない劣情の種子を植え付けられたばかりに
http://retujyou.com/2007/03/20/csshoverhtc/

こちらを参考に、 csshover.htc を導入したのですが、うまくいきません orz

ローカルで、csshover.htc index.htmlを同じフォルダにおいて、
以下のように、

<!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" lang="ja">
　<head>
　　<meta content="text/html; charset=utf-8" http-equiv="content-type" />
　　<title>IEでhoverテスト</title>
<style type="text/css">
body { behavior:url("csshover.htc"); }

a:hover {
　　background-color: green;
}

p:hover {
　　background-color: red;
}

li:hover {
　　background-color: blue;
}
</style>
　</head>
　<body>
　　<p>テストほげもげぷーーー<br/>
　　もげもげぷーーー<br/><a href="#">リンク</a></p>
　　<ul>
　　　<li>foo</li>
　　　<li>barfoobar</li>
　　　<li>amgebarfoo</li>
　　</ul>
　</body>
</html>

上記のように、HTMLを書いたのですが、
IE6で、hoverが認識してくれません orz

どなたか、うまく動かせた方いらっしゃいませんか？

IE6で[a]要素以外にも[:hover擬似クラス]を適用 (ウェブのあれこれ格納庫)
http://web.hirot.jp/archives/000192.php

> csshover.htc はローカル上では動作しないみたい。

or---------------z

どうりで・・・

ローカルで、サーバー建てて、動かしたら、無事に動きました。
お手を煩わせしました。
ありがとうございました。

追加で質問してよろしいでしょうか？

IE6にて、CSSだけで、:hover のような挙動の代替手段はあるのでしょうか？

Sleipnir の User Style Sheet で、ローカルで、hoverちっくなのを動かしたいのですが、
IE7にするしかないのかな・・・

>>824
無いからそんなスクリプトがあるんだろ

div内に両端寄せで２つの文字列を配置するにはどのように記述すれば良いでしょうか？
<div><span align=left>aaa</span><span align=right>bbb</span></div>
のようにspanを２つ置いて左寄せ右寄せでは上手く行きませんでした。

>>826
web初心者スレ池

>>827
わかりました。移動します。

cssスレでalignとはこれいかに

<div id="area">
<h1>テスト</h1>
<h1 class="title">あああ</h1>
</div>

div#area h1{ color: #FF0000; }.

こういうタグ・CSSがあったとして、h1にtitleのクラスが付いている場合は
上記のdiv#area h1が無効になる（色が付かない）方法ってありませんでしょうか？

>>830
h1を2つ書くな

>>831
あくまでも例えです。strongでもいいです。

tag {color:#abc}
tag.titile {color#bcd}

>>830
ひとまず日本語でオケ

>>832
div#area h1{
color: #FF0000;
}
#area .title {
color: #0000ff;
}

>830

div#area h1:not(.title) {
  color: #ff0000;
}

CSS3 否定疑似クラス (negation pseudo-class)
実装している UA が あるかどうかは 知らない

>>825
�d
そうだよなー。
わかた

ありがとさん

どんなDOCTYPEでも綺麗に表示される擬似フレームの実装方法を教えてくだちゃい。

 　　　 ∧__∧
　　　 (　･ω･) 　　いやどす
　　　　ﾊ∨/^ヽ
　　　ﾉ::[三ﾉ　:.'､
　　 i)､_;|*く;　　ﾉ
　　　　 |!: ::.".T~
　　　　 ﾊ､___|
"""~""""""~"""~"""~"

>>839
たのむよ。

　　　　∧__∧ 　　　　　
　　　 (｀･ω･´)　そこを何とか
　　　.ノ^　yヽ、　　　　　
　　　ヽ,,ﾉ==l ﾉ 　 　 　
　　　　/ 　l | 　 　 　　
"""~""""""~"""~""

>>840,841
もうちょっとで面白くなったなｗ

>>840はんは野暮天や

 　　ヾ)　 ∧＿∧
　　　ヽ （´・ω・）　そこをなんとか
　　　　丶_●‐●
　　　　　 〉　 ,　ｌ〉
　　　　　（~~▼~|）
　　　　　 ＞ ） ﾉ
　　　　　(_／ヽ_)

野暮天の読み方を再変換で調べちゃう俺は正にゆとり

　　　　　○　そこを
　　　　　ノ|）　
＿|￣|○ 「Ｌ


　○､
　　　＼､　　○　なんとか
　　　　 ヾ　＼）ヽ
　　＿|￣|　 <

    　ヾ)　 ∧＿∧
    　　　ヽ （´・ω・）　
    　　　　丶_●‐●
    　　　　　 〉　 ,　ｌ〉そこをなんとか
    　　　　　（~~ l ~|）
    　　　　　 ＞ ） ﾉ
    　　　　　(_／ヽ_)

>>847
ちょっと後ろ向いてみろよ

ヾ)　 　∧＿∧
　　　ヽ （´・ω・）　そこをなんとか
　　　　丶_・　　・
　　　　　 〉　 ,　ｌ〉
　　　　　（~~ l ~|）
　　　　　 ＞ ） ﾉ
　　　　　(_／ヽ_)

基本的な質問です、アドバイスお願いします
　ヘッダー
　右　中　左
　フッター
という配置をしたくて

※cssには
div.head {
width: 100%;
height: 120px;
padding: 0px;
}
div.menu {
float: left;
height: 460px;
width: 15%;
}
div.main {
float: left;
height: 460px;
width: 70%;
margin: 0px;
padding: 0px;
}
div.right {
height: 460px;
width: 15%;
float: right;
}

※htmlには
<div class="head"> </div>
<div class="menu"> </div>
<div class="main"> </div>
<div class="right"> </div>
<div class="foot"> </div>

Firefoxだと希望通りの配置をしてくれますが、
IE6だと左側が下側に表示されてしまいます。
アドバイスお願いします。

>>850-852
すいません自己解決しました

だれも>>838わからないのー？？救世主まってるよー

  　　　 ∧__∧
　　　 (　･ω･) 　　いやどす
　　　　ﾊ∨/^ヽ
　　　ﾉ::[三ﾉ　:.'､
　　 i)､_;|*く;　　ﾉ
　　　　 |!: ::.".T~
　　　　 ﾊ､___|
"""~""""""~"""~"""~"

>>854
まずお前がどうやってドウ駄目なのか出せ
クレクレ厨はうせろ

>>856
おまえも失せろ

>>856
http://desperadoes.biz/style/p_frame.php
ここ参考にしたんだけど、Transitional限定なんです。
どんなDOCTYPEでもOKな方法を調べてるんですが、なかなかスマートでナイスでピースな方法がないんですよねえ。

「どんなDOCTYPEでも」という条件なら無理

>>858
DOCTYPE別にテンプレでも作ればいい話で
汎用性など必要ないだろ

<div style="clear:both;margin:0px auto;padding:15px 0px;"
<div style="float:left;">ボックス</div>
<div style="float:right;">ボックス</div>
</div>

こんな感じにしたんですが、Firebugで見てみると、
囲っているclear:both;のボックスのheightが0になっていました。
clear関係のバグでしょうか。
どう対処すればいいですか？
よろしくお願いします。

>>861
floatはボックスを通常のフローから取り除いて浮動させるものなので
すべての子要素が浮動化されているボックスの高さが0になるのはバグではありません

高さが0になっているのが気に入らなければ
外側のdiv要素の中にfloatなどを指定していない要素かテキストを挿入するか
明示的に高さを指定する必要があります

また、外側の要素でclearを指定しても
その内側の要素の浮動化による後続のテキストの流し込みは解除されません
浮動化されている要素の流し込みの解除は
常にその後続の要素で指定する必要があります

すみません、質問です。

htmlファイルにcssファイルを要素のstyle属性として自動的に挿入してくれるような
ツールってありませんか？

スタイルシートで体裁を整えてある手書きのwebページをimode用に手直しするのに
ちょっと楽したいんで…

質問です
マウスオーバーでテーブルの行内の文字の色を変えるのに下のように書いてるんですが
これだとリンクの色だけ変わりません
どうにかならないでしょうか？

<html>
<head>

<script type="text/javascript">

function over(obj){
obj.style.color="red";
}
function out(obj){
obj.style.color="black";
}
</script>

</head>
<body>

<table>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td>AIUEO</td>
<td><a href="http://fefevesfvefcef.com/">あいうえお</a></td>
<td>かきくけこ</td>
</tr>
</table>

</body>
</html>

JSスレへ

わかりました、すいませんです

ところで俺の質問を見てくれ

<a style="display: block;">
<span style="display: block;"></span>
</a>

こいつをどう思う？

とてもくそみそです