07/05/14 01:57:18
【関聯スレッド】
CSS/DHTMLバグ辞典スレッド【第５版】
ｽﾚﾘﾝｸ(hp板)
代替スタイルシートに萌え～
ｽﾚﾘﾝｸ(hp板)l50
独自拡張、草案段階のCSSについて語れ
ｽﾚﾘﾝｸ(hp板)l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
ｽﾚﾘﾝｸ(hp板)l50
CSSでイケてるデザインサイト 39
ｽﾚﾘﾝｸ(hp板)
【仕様書】
CSS1の仕様書の原文(英語)
URLﾘﾝｸ(www.w3.org)
CSS2の仕様書の原文(英語)
URLﾘﾝｸ(www.w3.org)
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
URLﾘﾝｸ(www.y-adagio.com)
URLﾘﾝｸ(www.swlab.it.okayama-u.ac.jp)
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
URLﾘﾝｸ(www.y-adagio.com)
URLﾘﾝｸ(www.swlab.it.okayama-u.ac.jp)
【CSS検証】
W3C CSS 検証サービス
URLﾘﾝｸ(jigsaw.w3.org)
3:Name_Not_Found
07/05/14 01:57:59
【解説など】
・ごく簡単なHTMLの説明
URLﾘﾝｸ(www.kanzaki.com)
・ZSPC - Style Sheets Reference
URLﾘﾝｸ(www.zspc.com)
・ZSPC - CSS2対応状況ガイド
URLﾘﾝｸ(www.zspc.com)
・CSS1テストスイート
URLﾘﾝｸ(www.doraneko.org)
・ばけらの CSS リファレンス
URLﾘﾝｸ(www.ne.jp)
・K@tsukun's PAGE! > CSS Reference
URLﾘﾝｸ(hp.vector.co.jp)
・K@tsukun's PAGE! > 付録：CSS対応状況表
URLﾘﾝｸ(hp.vector.co.jp)
・CSS Laboratory対応表・一覧
URLﾘﾝｸ(is.vis.ne.jp)
・ブラウザのHTML4/CSS対応度テスト
URLﾘﾝｸ(homepage1.nifty.com)
・CSSバグリスト＠CSSバグ辞典スレッド
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
4:Name_Not_Found
07/05/14 02:00:28
【解説など】
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
URLﾘﾝｸ(www.mozilla.gr.jp)
・ブラウザによる振り分け（JavaScriptを使用しない方法）
URLﾘﾝｸ(east.portland.ne.jp)
・Web Site 作成支援 - What is CSS?
URLﾘﾝｸ(www.nextindex.net)
・Academic HTML::CSS2
URLﾘﾝｸ(www.tg.rim.or.jp)
・『スタイルシートWebデザイン』ボランティアHTML化版。
URLﾘﾝｸ(www.asahi-net.or.jp)
・スタイルシート用語集
URLﾘﾝｸ(www.mitsue.co.jp)
・IE で min-width を指定する方
URLﾘﾝｸ(www.lucky-bag.com)
・CSSでイケてるデザインサイトリンク集
URLﾘﾝｸ(ike.s33.xrea.com)
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
URLﾘﾝｸ(www.geocities.jp)
・* CSS { イケてるスタイルを："作れ";} 発表所
URLﾘﾝｸ(web.archive.org)
5:Name_Not_Found
07/05/14 02:01:57
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
URLﾘﾝｸ(hp.vector.co.jp)
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
URLﾘﾝｸ(www.microsoft.com)
参考「IEとNNのBOXの計測方法の違いについて」
URLﾘﾝｸ(www.fromdfj.net)
Q2: tableなどブロック要素をセンタリングするには？ text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に5.）をご覧ください。
1.'text-align'に関する考察
URLﾘﾝｸ(anslasax.net)
2.IE5.5とNetscape6のCSS - 中央寄せ
URLﾘﾝｸ(tancro.stp-1.com)
3.Internet Explorer 6におけるCSSの拡張
URLﾘﾝｸ(www.microsoft.com)
4.Tableのセンタリング
URLﾘﾝｸ(members.jcom.home.ne.jp)
5.ブロックレベル要素をセンタリングする方法
URLﾘﾝｸ(www.mozilla.gr.jp)
6:Name_Not_Found
07/05/14 02:04:32
【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
URLﾘﾝｸ(www.fromdfj.net)
CSS段組レイアウトデザ委員会
URLﾘﾝｸ(web.archive.org)
スタイルシートでマルチカラムデザインの実現
URLﾘﾝｸ(web.archive.org)
スタイルシートでマルチカラム・デザインを実現する方法
URLﾘﾝｸ(www.motchie.com)
tableを使はない段組:CSSによるマルチカラムデザインについての考察
URLﾘﾝｸ(members.jcom.home.ne.jp)
試驗場 - 段組(position版)
URLﾘﾝｸ(members.jcom.home.ne.jp)
段組れいあうとてすと (floatによる段組の例)
URLﾘﾝｸ(www.remus.dti.ne.jp)
なかよしぱれっと（Netscape4でも崩れない段組みの実例）
URLﾘﾝｸ(web.archive.org)
リストを用いたレイアウト
URLﾘﾝｸ(css.maxdesign.com.au)
7:Name_Not_Found
07/05/14 02:06:45
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: まずclear忘れがないかを確認してください。
floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
URLﾘﾝｸ(www.remus.dti.ne.jp)
またfloat:left;で回り込むのはテキスト（imgを含む）だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
URLﾘﾝｸ(www.mozilla.gr.jp)
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
URLﾘﾝｸ(web.archive.org)
URLﾘﾝｸ(web.archive.org)
overflowを用いた擬似フレーム
URLﾘﾝｸ(www.fromdfj.net)
レイアウトサンプル 擬似フレーム
URLﾘﾝｸ(www.rju666.com)
Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
「スタイルシート 縦中央(垂直中央)」参照のこと。
URLﾘﾝｸ(chaichan.hp.infoseek.co.jp)
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。
Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
8:Name_Not_Found
07/05/14 02:07:31
【FAQ】
Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
URLﾘﾝｸ(www.remus.dti.ne.jp)
Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？
a:link img, a:visited img, a:hover img {border:none;}
NN4は URLﾘﾝｸ(cssbug.at.infoseek.co.jp) 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
Q10: リンクを新しいウィンドウで開かせるにはどうしたら？
A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。
Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
URLﾘﾝｸ(www.mozilla.gr.jp)
Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ（A3）を見なさい。
「いままでの HTML との対照」
URLﾘﾝｸ(www.tg.rim.or.jp)
URLﾘﾝｸ(www.tg.rim.or.jp)
URLﾘﾝｸ(www.tg.rim.or.jp)
HTML でのレイアウト指定の、 CSS での指定との対応表
URLﾘﾝｸ(deztec.sakura.ne.jp)
9:Name_Not_Found
07/05/14 02:08:31
【参考】
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
URLﾘﾝｸ(www.stunicholls.myby.co.uk)
10:Name_Not_Found
07/05/14 03:49:03
乙です
11:Name_Not_Found
07/05/14 07:25:52
>1
乙
12:Name_Not_Found
07/05/14 09:54:06
>1
乙です
13:Name_Not_Found
07/05/14 11:43:26
徹底したsage進行をしないと大半のスレが見えなくなるな。
14:Name_Not_Found
07/05/14 17:42:04
>>5-7
fromdfj閉鎖してる
15:Name_Not_Found
07/05/14 18:36:33
とりあえずサルベージしておいた。次スレ立てる人は修正して。
>>5
Q1
参考「IEとNNのBOXの計測方法の違いについて」
URLﾘﾝｸ(web.archive.org)
>>6
Q3
CSSを用いた段組の作成のコツ
URLﾘﾝｸ(web.archive.org)
>>7
overflowを用いた擬似フレーム
URLﾘﾝｸ(web.archive.org)
16:Name_Not_Found
07/05/14 19:21:07
>>15
無駄だ。次スレ立てる人はスレを読まない。
17:Name_Not_Found
07/05/14 20:30:23
>>126
おまえが立てろよボケ
18:Name_Not_Found
07/05/14 23:42:29 ywsoEfaQ
IEでテーブルの空セルのボーダーを表示するやり方ってありませんでしょうか？
19:Name_Not_Found
07/05/14 23:46:54
>>15
ところでfromdfjって閉鎖したの？
20:Name_Not_Found
07/05/15 00:09:54
>>18
border-collapseをcollapseにする。
separateでできた例は聞いたことがない。
21:Name_Not_Found
07/05/15 00:51:33 pjU2mvY9
>>20
separateでやりたいんですよね。
やっぱり空白を入れて擬似的な空セルにするしか無いのかな・・・
ありがとうございました。
22:Name_Not_Found
07/05/16 10:32:35
URLﾘﾝｸ(www.jtb.co.jp)
↑をIEで見ると地域選択の下の部分がおかしくなってるの、なんでだろう?
23:Name_Not_Found
07/05/16 16:30:17
質問です。
<〇〇 id="" class="">
このようにした方がいい場合を教えて下さい。
私は
<〇〇 id="">
<〇〇 class="">
しか使ったことしかありません。
なので上記で指定する場合とはどんな場合なのかな？と思いました。
変な質問でごめんなさい。
24:Name_Not_Found
07/05/16 17:31:47
>>23
idとclassの使い分けをお勉強しましょう
そうすればおのずと答えは見つかります
25:Name_Not_Found
07/05/16 17:43:12
スタイルはクラスで指定したいけど
スクリプトとかでgetElementByIdしたい時とか
26:23
07/05/16 18:43:28
>>24 >>25
ありがとうございます。
こういうことでしょうか？
一つのHTML内で同じidは使えないので、
<div id="header">
<div id="wrapper">
などで使う。
classは同じスタイルにしたい複数のタグにたいして使う。
例)
テーブルで偶数段だけ色を変えたいとき。
<td class="line_a">
さらに、偶数段の内一段だけ特殊な効果にしたいときは、
<td id="" class="">
とする。
でよろしいでしょうか？
27:Name_Not_Found
07/05/16 19:07:30
>>26
> テーブルで偶数段だけ色を変えたいとき
<td>じゃなく<tr>にclassだろ。
> 一段だけ特殊な効果にしたいとき
そういう場合って大概は一番上か一番下だろうから<thead>や<tfoot>でマークアップする。
あとここ URLﾘﾝｸ(deztec.jp)
28:Name_Not_Found
07/05/16 19:36:38
>>27が>>26の答になってない件ww
質問をちゃんと読んでみれ
29:Name_Not_Found
07/05/16 20:11:29
ちょっと無理やりな感じもするけど...
<table id="question" class="layout">
<tr class="name"><th>名前</th><td>○○</td></tr>
<tr class="date"><th>質問日付</th><td>yyyy/mm/dd</td></tr>
<tr class="value"><th>質問内容</th><td>yyyyy</td></tr>
</table>
<table id="answer" class="layout">
<tr class="name"><th>名前</th><td>○○</td></tr>
<tr class="date"><th>回答日付</th><td>yyyy/mm/dd</td></tr>
<tr class="value"><th>回答内容</th><td>yyyyy</td></tr>
</table>
で、質問と回答でほっとんど同じレイアウトなんだけど
色だけかえたいんだよねーって時にclassで幅とかマージンとか決めといて
#question.nameとか#answer.nameとかで色変えるとか...
30:Name_Not_Found
07/05/16 20:18:45
>>29
それ<table>でやる内容じゃない
<dl><dt><dd>使え
31:27
07/05/16 20:31:09
>>29
それ典型的なテーブルレイアウトだろ。表としての用法じゃない。
<div class="lv2">
<h2>質問: どうしてなんだぜ？</h2>
<dl><dt class="from">お名前</dt><dd>名無し</dd><dt class="date">日付</dt><dd>yyyy年mm月dd日</dd></dl>
<p>本文</p>
<div class="lv3">
<h3>回答</h3>
<dl><dt class="from">お名前</dt><dd>名無し</dd><dt class="date">日付</dt><dd>yyyy年mm月dd日</dd></dl>
<p>本文</p>
</div>
</div>
32:23
07/05/16 20:32:18
すみません>>23です。
説明がヘタでご迷惑おかけします。
あたしが言いたいのは、
<div class="a">が複数あったとして、そのうち一つに特別な効果を与えたいときに、
<div id ="b" class="a">
にすればいいのですか？ってことなんです。
分かりにくくてごめんなさい。
33:Name_Not_Found
07/05/16 20:34:40
わしはそれでええと思っちょる。
34:Name_Not_Found
07/05/16 21:29:08
>>32
元々スタイル中心にidとclassを考えるからわけわからなくなるんよ。
35:Name_Not_Found
07/05/16 23:27:01
>>32
考え方が間違ってる。何もかも忘れて一から勉強汁。
36:23
07/05/17 00:13:51
>>35
もしかして変なふうに覚えちゃってますか？？
37:Name_Not_Found
07/05/17 00:37:08
>>32
IDは「太郎」「花子」といった固有のものの「名前」。
CLASSは「男」「学生」といったそのものが持つ「性質」。
だからidは一つしか使えないしスタイルも異ならせられるが、
classは同じ性質だから結果的にスタイルも同じになるというだけ。
スタイルありきじゃなくて逆なんだよ。
38:Name_Not_Found
07/05/17 01:53:40
スタイル先に決めてdiv+class+id…DTP脳だな。これが普通かもしれんが。
39:Name_Not_Found
07/05/17 02:17:05
普通じゃねーよ。
40:Name_Not_Found
07/05/17 04:02:43
いや、見た目が先なのは普通だよ。素人にWiki使わせてみると分かるよ。
文字を大きくするために見出しを使うなんて当たり前、整形済みテキストは
当然枠をつけるために使う etc.
そういう人が中途半端にHTMLとCSSをかじったら、divにclassやidを振って
見た目を整えようとするのは自然だと思うな。確実に間違った方法だが。
41:Name_Not_Found
07/05/17 04:49:12
>>40
最初に意味づけを教えないせいだろ。
見た目を変える方を先に教えたらそうなるし、
意味をつける方を先に教えたら逆になるんだよ。
おまえの狭い常識を敷衍させるな。
42:Name_Not_Found
07/05/17 07:17:20
>>41
「素人」って書いてる人に「教えないせい」ってお前バカだろ。
よく読んでレスしろよ。
>>40は明らかに「素人＝独学者」の事を話してんだろうに。
それとな、「敷衍」の使い方間違ってるよ。
CSSじゃないが、間違った使い方なのに
正しいと思いこんで使ってしまう事例を自ら示してるじゃないか。
お前が間違って使ってるのは誰も「教えないせい」だろうが、
間違ってるってことを誰も「教えないせい」でもあるだろう。
>>40が言ってる「間違った方法」もそれと変わらん。
43:23
07/05/17 08:34:03
あたしは独学です。
まずhtml=テキスト、css=デザインということで覚えました。
なのでデザイン部分をid,classで指定していました。
どうやら間違えだったようです…
では、正しいｃｓｓの使い方を教えていただきたいのですが…
ｃｓｓに詳しい方教えてください。
44:Name_Not_Found
07/05/17 08:52:25
勉強しろよ。ここは初心者向けスレじゃない。
テメエで努力出来ないヤツは去れ。
45:Name_Not_Found
07/05/17 09:03:38
css
body {
background-color:gray;
margin:auto;
width:100px;
}
#menu {
float:left;
background-color:yellow;
width:50px;
}
#main {
float:right;
background-color:red;
height:150px;
width:50px;
}
html
<body>
<div id="menu">abc</div>
<div id="main">abc</div>
</body>
この場合、#menuの黄色の背景色が途中で終わってしまい、とても不細工に見えてしまうのですが、この背景色を#mainと同じ長さまで引っ張ってくることって可能ですか？
46:Name_Not_Found
07/05/17 09:18:04
>>42
独学者だって最初に学んだと言えば同じだろうが。
だいたい敷衍も合ってる、おまえが使い方知らないだけだろ。
47:Name_Not_Found
07/05/17 09:18:52
>>45
「float 背景」でググれ。
48:Name_Not_Found
07/05/17 09:43:09
>>47
ﾃﾞｷﾀｰ(ﾟ∀ﾟ)！！
ありがとうございました。
49:Name_Not_Found
07/05/17 10:00:28
>>44
ここが質問スレという件について
50:Name_Not_Found
07/05/17 11:57:44
>>46
スレ違いだからこれで止めるけど、
「独学者だって最初に学んだと言えば同じ」なんて詭弁だね。
「教えない」なんて言葉は独学者に対する言葉として不自然なのは明らか。
あと、本気で「敷衍」の使い方が合ってると思ってるならマジでヤバイよ。
「常識を敷衍させる」なんて使い方はしない。
嘘だと思うならググってみ。正しい使い方なら必ずヒットするから。
51:Name_Not_Found
07/05/17 12:26:35
>>50
言い逃げで恥さらし乙
52:Name_Not_Found
07/05/17 12:33:16
ﾂﾏﾝﾈ。
53:Name_Not_Found
07/05/17 12:40:40
なんで皆こんなに馬鹿なん ?
54:Name_Not_Found
07/05/17 12:56:47
おまえがバカだから感染したんだ。
55:Name_Not_Found
07/05/17 13:12:25
>>53てnullだよな？
56:Name_Not_Found
07/05/17 17:42:05 Yn55DBoU
w3cのバリデータの使い方が分かりません。
検証したい文書(CSSと組み合わせたHTML文書の中に、
<link rel="stylesheet" href="test.css" charset="shift_jis">
の様に書いていますが、
それを
URLﾘﾝｸ(jigsaw.w3.org)＜検証したい文書(CSSと組み合わせたHTML文書＞
のように検証してもらおうとすると、
「スタイルシートが見つかりませんでした。」
と帰ってきます。
直接cssファイルを検証すると「おめでとうございます！ この文書は正当なCSSとして検証できました！」となるのですが、
http://・・・・html
57:Name_Not_Found
07/05/17 17:51:33
バカってすごいよな
58:Name_Not_Found
07/05/17 18:06:35
>>56
今日はゆっくりと休んで、明日もう一回考えてみ？
59:Name_Not_Found
07/05/17 18:20:16
お薬出しておきますね、三日分。
60:Name_Not_Found
07/05/17 22:36:07
全部飲んでいい ?
61:Name_Not_Found
07/05/18 03:16:50
>>56
普通にいけるんだが。
URLﾘﾝｸ(jigsaw.w3.org)
62:Name_Not_Found
07/05/18 07:00:28 hJsx4Da0
XHTML 1.0 Transitionalでサイトを作っているのですが、
項目の前後に■を付けようと考え
span.class名:before { content: "■" }
span.class名:after { content: "■" }
とスタイルを指定すると、
FireFoxだとキチンと表示されるのですがIE6だと前後共に表示されません。
最初から項目の文章に■を含める以外に方法はありませんでしょうか？
63:Name_Not_Found
07/05/18 07:15:09
>>62
IEはcontent未対応だからJSで。
64:Name_Not_Found
07/05/18 07:53:33 hJsx4Da0
なるほど、java scriptを使えば出来るんですね。
しかしまだ勉強して無くてサッパリなんでとりあえずは最初から■をくっつけてごまかすことにします。
ありがとうございました。
65:Name_Not_Found
07/05/18 08:00:24
>>64
だったら背景画像とか
66:Name_Not_Found
07/05/18 08:19:01
>>65
どういう事かよく分からないのですが、■を画像として表示するという事でしょうか？
そうすると見る人が文字の表示サイズを変えた場合に■の大きさが変わらない事になりませんでしょうか？
全然違うことを指してるのでしたらすみません。
67:Name_Not_Found
07/05/18 08:23:02
>>66
そのとおり
でも他人はそこまでおまけの文字の大きさが違うことなんか気にしてない
68:Name_Not_Found
07/05/18 08:37:36
floatの回り込みについての質問です。
<div style="width:300px;float=left;">内容1</div>
<div style="width:300px;float=left;">内容2</div> という書式だと
IE6.0では回り込みで表示されるのですが、
Firefox(2.0.0.3)では回り込みで表示されません(縦に表示される)。
どこが問題なのでしょうか？
69:Name_Not_Found
07/05/18 08:40:30
>>68
float=left
70:Name_Not_Found
07/05/18 09:15:12
>>67
確かにそうかもしれませんね。
■以外の要素にも応用出来るようにって意味もあるし、いずれはjava scriptで出来るようにしたいと思います。
71:Name_Not_Found
07/05/18 09:20:41
java script切ってる奴はどうなるのかね ?
72:Name_Not_Found
07/05/18 09:24:05
となると、目一杯互換性を持たせる為には文章内に■を文字として入れておくのがベターという事に落ち着くんでしょうか
webデザイナーさんの苦労が偲ばれる・・・
73:Name_Not_Found
07/05/18 09:29:46
>>69
IE6だとそれで回り込むのか…。
74:Name_Not_Found
07/05/18 09:37:22
>>72
意味のない文章を入れるなんて不条理ところに落ち着くんじゃない。
表示されなければされないでいいと割り切るか画像にしろ。
75:Name_Not_Found
07/05/18 09:42:32
確かにレイアウトのために意味のない文章を入れるなというのは痛いところですね…
結局一番最初の:before :after + contentを入れることにします。
76:Name_Not_Found
07/05/18 16:16:04
ボーダー使う頭も無いのか ?
77:Name_Not_Found
07/05/18 17:07:04
>>75
四角でいいなら。
span.hoge {
border-right: 1em solid #000000;
border-left: 1em solid #000000;
}
ってツンデレな>>76が言ってる。
78:Name_Not_Found
07/05/18 17:29:10
>>77
文字に対して四角もうちょっと小さめにしたい場合は？
79:Name_Not_Found
07/05/18 17:40:01
>>78
1emを0.8emにでも0.05emにでもしたらいい。
というか元のレスにはfont-size指定がないからそんな意図はないととらえたんだが。
80:Name_Not_Found
07/05/18 17:45:47
>>79
それだと縦長になっちゃうね。正方形のままで死体
81:Name_Not_Found
07/05/18 18:29:07 pnilnKRY
見苦しい初心者的質問ですみません。基本的な所からおかしいのかもしれません。
.hoge{
padding-top: 10px;
padding-bottom: 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
text-align: left;
text-indent: 3em;
font-size: 14px;
line-height: 120%;
}
というスタイルシートでボーダーの中のテキストを数行表示させたくて
<div align="center">
<p class="hoge">
あいうえお、かきくけこ、さしすせそ。<br>
たちつてと、なにぬねの、はひふへほ。
</p>
</div>
こういう風にしたのですが、たちつてとからは
text-indentとかが適用されなくて左端にいってしまいます。
今は、たちつてとの前に空白スペースを入れていますが、みっともないので
何か良い方法はないでしょうか？
たちつてとの前に3em分の空白を入れたいです。spanを使ってもダメでした…。
<div>でボーダーを囲ってるのは、ボーダー自体を中心にもっていきたいためです。
82:Name_Not_Found
07/05/18 18:59:51
>>81
text-indentの意味わかってる?
text-indentをpadding-leftに変更
それと
<div align=center>
ってorz
cssを1から勉強しなおしたほうが良いよ
83:Name_Not_Found
07/05/18 19:02:59
>>81
<div align="center">
<p class="hoge">あいうえお、かきくけこ、さしすせそ。</p>
<p class="hoge">たちつてと、なにぬねの、はひふへほ。</p>
</div>
で.hogeのpaddingの代わりにdivのpaddingを使うようにして.hogeはpadding: 0;でよくね？
divの開始直後と終了直前に余白がほしいんならこれでもいいはず。
というかどうせならセンタリングもCSSで……なんて言うまでもないよな？
84:Name_Not_Found
07/05/18 19:06:50
>>81
pxやめろ。特にfont-size。
line-heightは単位なしで。
改段落以外で改行を行うべきかもう一度よく考えること。
.hoge{
padding: 0.7em 3em;
border: solid 1px #000;
line-height: 1.2;
}
>>83
そうすると文字とborderがピッタリくっ付いちゃう感じ。
81をそのまま見てみると枠線と文字の間には空間があるので、そのようなデザインを意図していると考えられる。
そうじゃなくて<div>にborder？
85:Name_Not_Found
07/05/18 19:10:36
>>81
複数行で余白つくりたいなら>>82、text-indentが一行目にしか効かないの知っててあ～の行とた～の行にインデントを加えたい(つまり、実際は二つの行が十分長い)なら>>83だな。
どちらにせよHTMLかCSSの基礎を理解してない恐れが……。
ま、ガンガレ。
86:Name_Not_Found
07/05/18 20:07:31
>>76-77
まさにその発想は無かったって感じです。
ありがとうございました。
87:81
07/05/18 21:05:22
仰るとおり基礎がわかってないです…。
このスレデビューは早すぎました。
色々基礎を勉強してみます、そしてまた質問があれば次からは初心者質問スレいってみます。
こんな親切にアドバイスとご指摘ありがとうございますた！！
88:Name_Not_Found
07/05/18 22:05:46
>>80
<strong class="hoge"><span>foo bar</span></strong>
strong.hoge {
font-size: 0.8em
border-right: 1em solid #000000;
border-left: 1em solid #000000;
}
strong.hoge span {font-size: 1.25em}
うまくいくと思うけど試してないし、成功してもバッドノウハウ的な雰囲気がする……。
少なくとも俺ならこんなわけの分からんコードを保守したくはない。
ちなみに何となく強調だけどli.hoge aだろうがa.hoge spanだろうが基本的にはOKのはず。
89:88
07/05/18 22:24:43
>>88
ミスった。li.hoge aだったらそのままだとliがdisplay: blockだから正方形にならないかも。なげやり過ぎてすまん。
90:Name_Not_Found
07/05/18 22:49:13
つ【チラシの裏】
91:Name_Not_Found
07/05/18 23:15:33
というか、そこらへんはサーバーサイドで文字コード挿入が一番まともな発想だとおもうが
92:Name_Not_Found
07/05/18 23:42:22
>>91
あくまでborderでやるなら、って話。
それに■は見栄えかな、と思ったり。
それに普通の文字より小さくするなら、
<a href="#" class="hoge"><span>■</span>foo bar<span>■</span></a>
.hoge span {font-size: 0.8em}
とかしないといけなくなりそうだし。
なによりここは C S S ス レ だから。
93:Name_Not_Found
07/05/18 23:45:36
つ【チラシの裏】
しつこいよおまえ。
94:Name_Not_Found
07/05/18 23:49:22
チラシの裏へ誘導されるような内容なんでしょうか？
スレの内容からも出てる質問からも外れてないと思うんですけど
95:Name_Not_Found
07/05/19 00:05:47
span厨って確認種？
新種？
96:Name_Not_Found
07/05/19 00:05:57
>>94
半 年 R O M れ
97:Name_Not_Found
07/05/19 11:12:19
<select></select>の中に<option>要素が大量にある場合、
プルダウンが異常に長くなり、画面内に収まりきらなくなった場合は、
プルダウンの中にスクロールバーが発生しますが、
画面内に収まりきらなくなる前にスクロールバーを発生させて、
プルダウンの長さを一定に抑える事って出来るのでしょうか？
動作環境は WindowsXP SP2 の IE6 SP2 です。
よろしくお願い致します。
98:Name_Not_Found
07/05/19 11:25:46
>>97は前に初心者スレで答えもらってたんで放置で。
99:97
07/05/19 11:31:22
>>98
初心者スレ見たら同じ質問があった、ちゃんと調べて無くて申し訳ない。
100:Name_Not_Found
07/05/19 15:41:09
（連載）第５回：PNG（ぴんぐ）——敢えて言おう、カスであると。
URLﾘﾝｸ(koujinz.cocolog-nifty.com)
101:Name_Not_Found
07/05/19 16:15:25
ブロック要素として、左右に小さい画像を配置して、その間に文章を置くレイアウトを考えてます。
全体の幅は固定、高さは不定で
中央のテキストの幅も固定、高さは文章量と文字サイズにより可変に
左右の画像はその変わる高さに合わせて常に垂直位置を真ん中に持って行きたいんですけど、
左右の画像をそれぞれdivで括ってフロートで左右に配置、高さを100%にしてimg要素の垂直位置をmiddleに、
中央のテキストもdivで括って幅を左右の画像の間に収まるように設定して左右のマージン自動で中央揃えにする事で
左から画像、テキスト、画像と等間隔に並ばせる事は出来たのですが、画像の垂直位置が上揃えから動いてくれません。
レイアウトの問題で表として意味があるわけではないのでテーブル要素を使うのは避けたいと思ってるんですけど
最初に書いたようなレイアウトにするにはどうしたらいいでしょうか、ヒントだけでもいいんでよろしくお願いします。
102:Name_Not_Found
07/05/19 16:17:37 haoHFRa3
っと、sage解除忘れてました。
103:Name_Not_Found
07/05/19 16:26:00
縦中央になんか持ってくのだけは避けてくれ。以上。
104:Name_Not_Found
07/05/19 16:55:40
>>101
>7
105:Name_Not_Found
07/05/19 17:05:02 es66pAYq
>>101
左右の画像は一枚に結合。
文章のブロックに背景画像で配置。
その際にbackground-positionをcenter centerに。
文章のブロックにpaddingで画像が見えるようにする。
試してないがどうだろうか？
106:Name_Not_Found
07/05/19 18:01:44 haoHFRa3
なんか色々勉強不足みたいなんでもう少し試行錯誤して出直してきます・・・
>>105
後出し情報で申し訳ないんですけど、その画像はアンカー貼るつもりなんです。
背景にする事自体考えつかなかったので書き忘れてました、すみません。
107:Name_Not_Found
07/05/19 18:03:59 5izQOdsI
ググったら前スレにあったらしいのですが、dat落ちして読めません（ToT）(前スレ>>799)
<object>でhtmlを埋め込みした時、IE7だけ影付きのボーダーが出てしまいます。
border: 0; にしてあります。カッコ悪いので消したいです。どうか教えてください。
108:Name_Not_Found
07/05/19 18:11:39
>>107
読み込まれる側のhtmlのborder消してないというオチと見た。
109:Name_Not_Found
07/05/19 18:51:04
>>108さま ありがとうございます。こんな風にしてあるのですがダメなのです(ToT)
●読み込まれる側（osirase.html）
html{ border: 0; }
body{ border: 0; }
.box{ border: 0; }
●読み込む側（index.html）
object {
border: 0;
scrolling: auto;
padding: 0px;
}
★htmlは
<object data="osirase.html" type="text/html" width="90%" height="95%"></object>
110:Name_Not_Found
07/05/19 19:01:57
>>109
それで普通は消える。
それ以外のところを間違ってるんじゃないのか。
111:Name_Not_Found
07/05/19 19:03:36
あ、ちなみにそれだとIE以外で悲惨だからな、高さ。
IEはバグってる。
112:Name_Not_Found
07/05/19 20:32:10
この前から同じ事ばっか聞いてるアホだろ。放置汁。
113:Name_Not_Found
07/05/19 20:33:07
>>110 >>111 ありがとうございます。
他のところのチェックをしてみます。
114:Name_Not_Found
07/05/19 20:34:08
>>112 え？ 今回初めてです。
でも前スレにあったようで、失礼しました。
115:Name_Not_Found
07/05/19 22:12:53
やっぱりFAQがいる。
116:Name_Not_Found
07/05/19 23:00:49
スレ内検索でわかるでしょ。調べりゃわかる事だしね。
117:Name_Not_Found
07/05/20 01:48:58 2FuA/eDj
bodyにborderを指定するとスクロールバーの外にborderされるんですが
スクロールバーの内側にborderさせる方法はないでしょうか？
118:Name_Not_Found
07/05/20 01:53:26 2FuA/eDj
書き忘れましたが、WinIE6です。
119:Name_Not_Found
07/05/20 02:15:55
>>118
標準モード。超基本。
最低テンプレ読んで勉強して来い。
120:Name_Not_Found
07/05/20 04:40:12
>>100
痛々しい
121:改行多いと怒られたので1
07/05/20 11:44:50
センタリングについて質問です。
テンプレのサイトを読んだんですがわからない部分があり、例えばここの例で
URLﾘﾝｸ(www.koikikukan.com)
<div id="wrap">
<div id="test">[ブロックレベル要素]</div>
</div>
とあるのを、
<div id="wrap">
<div id="test"><p class="test2">[Example]</p></div>
</div>
としたく、
#wrap {
text-align: center;
}
#test {
text-align: center;
border: solid 1px red;
width:80%;
}
.test2 {
margin-left: auto;
margin-right: auto;
width:50%;
text-align: left;
border: solid 1px blue;
}
122:改行多いと怒られたので2
07/05/20 11:46:45
こうしました。というのもtest2だけではなくtestもセンタリングしたいんです。しかし
>誤って
>#test {
> text-align: center;
>}
>というマークアップをしていると、Firefox 等ではセンタリングされませんのでご注意ください。
とあるので、text-align: center;を2つ重ねても大丈夫なのか不安になってしまいました。
自分のサイトはFireFox使用者も多く他のブラウザの表示も気になるので。
これはやはり間違ってるでしょうか。
123:Name_Not_Found
07/05/20 12:28:59
>>122
text-alignの仕様くらい理解してろ。
URLﾘﾝｸ(www.mozilla.gr.jp)
124:56
07/05/20 19:42:37
酢まんこの問題は
mimeタイプ指定が原因だった。
サーバーの設定が変わって、cssのmimeタイプをサーバーが示してくれなくなっていた。
<link rel="stylesheet"・・・に、
type="text/css"を加えることで、今まで通り検証してもらえるようになった。
125:Name_Not_Found
07/05/20 21:47:26
質問です。スタイルシートでマルチカラムをつくり、
枠線で全体を囲みたいのですが意図通りに表示されません。
・スタイルシート
#container { width: 800px; border: 1px solid #000000; }
#header { width: 800px; }
#box { width: 800px; }
#contents { float: left; width: 600px; }
#sidebar { float: right; width: 200px; }
・BODY
<body>
<div id="container">
<div id="header">header</div>
<div id="box">
<div id="contents">contents</div>
<div id="sidebar">sidebar</div>
</div></div>
</body>
上記をブラウザで表示すると、IE6だとbox以下も含む全体を枠線で囲ってくれるのですが、
Firefox2.0だと header 部しか囲ってくれません。原因は何でしょうか？
段組はここのテンプレート通りに作成しました。
URLﾘﾝｸ(css.rakugan.com)
126:Name_Not_Found
07/05/20 21:56:26
>>125
全 然 テ ン プ レ ー ト の 通 り じ ゃ な い 。
そのせい。
127:Name_Not_Found
07/05/20 22:02:03
全然でもないだろ。
128:125
07/05/20 22:10:01
>>126
追加したのはwidthとborderだけなんですが… widthとborder外しても駄目でした
129:Name_Not_Found
07/05/20 22:10:46
>>128
コピペしろよ。
追加じゃなくて足りない。
130:Name_Not_Found
07/05/20 22:13:27
>>129
おお、ありがとうございます。フッター部も必要なんですね。失礼しました
131:Name_Not_Found
07/05/21 02:05:41
そこむずすぎるｗｗｗ
132:Name_Not_Found
07/05/21 02:08:41
まちがえた
133:Name_Not_Found
07/05/21 02:51:43
MacのIE5で変な横スクロールバーが出来てしまいます！
これってどうしたら良いですか？
134:Name_Not_Found
07/05/21 07:23:18
MacIE5は切り捨て。
135:Name_Not_Found
07/05/21 08:01:27
>>133
まともに作れば出ない。
おまえがまともに作ってないだけだろう。
136:Name_Not_Found
07/05/21 11:10:59 Ka2tQoP4
<body style="width: 400px">
<h1 style="background-color: #ecca8f; color: #000000">奈良公園の鹿</h1>
<p><img src="gazou-1.JPG" style="float: left">…</p>
</body>
幅が40opxにならないのはなぜ?
137:Name_Not_Found
07/05/21 11:18:05
ﾎﾟｶｰﾝ（ＡＡ略
138:Name_Not_Found
07/05/21 11:44:13
これ↓やってもファイル選択(<input type="file">)だけ
適応されないんだけど、どうすれば出来できる？
input {
border:1px solid #6A6A6A;
width:250px;
}
139:Name_Not_Found
07/05/21 11:52:27
>>136
無知を知れ
140:Name_Not_Found
07/05/21 13:09:25
>>138
fileは物凄く機能に依存してる部分だから
効かない指定が多い。
141:Name_Not_Found
07/05/21 16:41:43
>>136
ﾜﾛﾀ
142:Name_Not_Found
07/05/22 10:42:57
136ｶｺ(・∀・)ｲｲ!
143:Name_Not_Found
07/05/22 11:13:52
奈良公園の鹿といえば、吉永小百合の名曲のフレーズ
144:Name_Not_Found
07/05/22 22:28:58
floatに関しての質問。
<float1><float2>
<clear>
<float3><float4> (タグとは違います)
という配置にしていますが、
<float3>内のリンクをクリックすると、<float3><float4>が中身ごと少しだけ上に移動するんですが、
これって解決方法ありますか？
説明べたですいません。
145:Name_Not_Found
07/05/22 22:45:50
>>144
単に作り方が悪いだけじゃ。
普通はならない。
146:Name_Not_Found
07/05/22 23:12:12
>>145
つまんねえミスしてるだけ。
147:Name_Not_Found
07/05/22 23:29:00
レス番間違えるぞ。
148:144
07/05/23 00:21:38
>>145-146
すいません。どこが間違っているのでしょうか？
149:Name_Not_Found
07/05/23 00:27:01
ソース貼ってもらわないと何とも。
バグ辞典とか調べてみたらどうだ
150:Name_Not_Found
07/05/23 00:58:45
>>148
エスパーじゃないのにそれだけでわかるかよ。
CSS全部消した状態で一行ずつ増やして、
その都度確認してけばどこが悪さしてるのかわかるだろ。
自分でそこまでは切り分けろ。
151:Name_Not_Found
07/05/23 04:52:14
>>148
float3のheight
152:Name_Not_Found
07/05/23 12:45:21
lineheightが%とピクセル混合の時もずれたりしないっけ
153:Name_Not_Found
07/05/23 14:32:31
フロートをクリアする場合どのようにすれば良いでしょうか？
<br class="clear" />
<div class="clear"></div>
など試したのですが、IE6だと反映のされ方が変わります。
<div id="header">・・・下10pxの余白
<div id="title"></div>・・・左寄せ
<h1></h1>・・・右寄せ
<フロートをクリアする>
</div>
<br>の場合は下10pxの余白がなくなり
<div>の場合は下10pxの余白＋1行スペースが空きます。
FireFoxの場合は問題ありません。
154:Name_Not_Found
07/05/23 16:24:23
>>153
まずmargin、paddingリセットしてからおいで
155:153
07/05/23 16:35:15
自己解決しました。
headerの横幅を指定した所うまくいきました
>>154
お騒がせしました
156:Name_Not_Found
07/05/23 17:34:07
class="clear"とかよ、id="title"とかよぉ。やりきれねぇんだよ俺ぁ。
だれか一杯おごってくれ。
157:Name_Not_Found
07/05/23 18:43:01
ほれ 旦
飲みすぎるなよ。
158:Name_Not_Found
07/05/23 21:27:53
URLﾘﾝｸ(www.cssplay.co.uk)
このページのギャラリーがジャバスクリプトを使わずにCSSのみで制作されていると
紹介されていたのですが、本当でしょうか？
159:Name_Not_Found
07/05/23 21:46:05
>>158
疑う前にJS切って表示してみろ。
160:Name_Not_Found
07/05/23 22:32:05
質問させてください。
IE6にて透過PNGを使用するのに
filter（AlphaImageLoader）で表示させたいのですが、
この設定を同一html内、もしくは同階層の外部CSSファイルに設定・実行した場合には
うまく表示されるのですが、
同一階層に作ったフォルダ内に外部CSSファイルを入れてしまうと、
表示されなくなってしまいます。
（このとき当然ですが、PNGへのパスは変更しています。）
これは仕様なのでしょうか。
どなたかご存知の方、ご返答ください。
宜しくお願い致します。
161:Name_Not_Found
07/05/23 22:40:27
>>160
htmlからのパスが必要。
でもそんなもの使ってると マ ジ で I E 落 ち る ぞ 。
162:160
07/05/23 23:10:21
>>161
とても早いご回答ありがとうございます。
> htmlからのパスが必要。
という事は、どの階層に外部CSSを置いても
PNGへのパスは変わらないという事なのですか？
> でもそんなもの使ってると マ ジ で I E 落 ち る ぞ 。
そ、そうなんですか？？
でもIE6で透過させようと思ったら
それしか方法がないですよね・・・？
163:Name_Not_Found
07/05/23 23:16:36
>>162
違う。
呼びされる側のhtmlファイルからのパスが必要になる。
だからそれを使うcssファイルは外部にして共通にしても何の意味もない。
それしかってこともないけど、どれにしてもIEでやろうとすると
酷い手段で経由するしかないからリソース食いまくり。
でもたいていの場合透過っぽく見せた透過じゃない画像を用意すれば事足りる。
本当に冗談でなくリソース食うから、プラスhoverなんかやると弱いマシンだと一発で死亡。
一度構成自体を考え直した方がいいよ。
ちなみに1色の透過pngならそのまま表示できるよ。
164:Name_Not_Found
07/05/23 23:36:24
>>159
なるほど。
ありがとうございました。
165:160
07/05/24 00:12:06
>>163
そうですか・・・。残念です。
特定の画像の上に、複数ページでそれぞれ違った透過画像を乗せたかったので、
ジャギーが出なく楽に作れるこれはうってつけかと思ったのですが。
透過っぽく作ろうと思ったら、その背景を含めた作り方をしないといけないですよね。。。
（要するにその手間を省きたかったワケですが・・・）
ちなみに、このfilterを含むものを（IE6では_background:none;としておいて）
他のブラウザで表示させた場合でもやはりリソース食うんでしょうか。
一旦読み込むので同じなのでしょうかね。
166:Name_Not_Found
07/05/24 00:16:44
>>165
透過なのか半透明なのかはっきり汁。
167:Name_Not_Found
07/05/24 00:20:53
filterの対応状況くらい自分で調べろ。
168:160
07/05/24 00:57:23
>>166
えっ、透過と半透明って違うんですか？
すみません、特定の色だけを抜いたものではなく、
アルファチャンネルを持ったPNG（半透明）についてです。
>>166
ですから、IE6での対応についてです。
169:Name_Not_Found
07/05/24 00:57:35
>>165
IE6以外は半透明PNGは単に画像として表示されるから問題茄子。
170:Name_Not_Found
07/05/24 00:58:46
>>168
透過と半透明は違うと>>163も書いてるじゃろ。
256色の8bitPNGで1色透過ならIE6でも対応してるが
PNG24/32の半透明PNGは非対応。
171:Name_Not_Found
07/05/24 01:00:27
あ、ちなみにIE以外だったらAlphaImageLoaderも何も使わず
他の画像と同じように扱えるぞ。
172:Name_Not_Found
07/05/24 01:09:38
>>168
＞ですから、IE6での対応についてです。
『ですから』、調べればわかる事だろ。ヤル気ないんだな。
大体filterなんてCSSじゃなかったんだ。
CSS3で一部導入されるそうだが何を今更だし、更にUA次第になっただけ。
173:160
07/05/24 01:55:17
>>169
>>170, 171
同じ方でしょうか？
そうですね、IE以外では半透明を使えるけど、
IE6の為だけに、
background:url(aaa.png);
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='aaa.png', sizingMethod=scale);
としてカバーしたかったんです。
（シェア的にはIE6無視出来ないなって。。。）
一色透過だとなんだかガビガビになっちゃうし。
>>172
いや・・・、やる気はあるんですけど。。。
元々、このAlphaImageLoaderを設定した外部CSSを
他階層に置くと表示されなくなるのは仕様でしょうか、
というのが一番最初の質問だったワケですが、
「透過」か「半透明」かという解釈違いのあたりから論点が変わってしまいました。
（階層の問題についてはいくらか調べたつもりだったのですが、
答えに行き当たりませんでした）
しかし、いずれにしても皆さんあまり推奨されておられないようですね。
色々とご助言いただき、ありがとうございました。
174:Name_Not_Found
07/05/24 02:11:33
>>173
手間を省きたいだけなんだったら
AlphaImageLoaderを使って閲覧できないIE者のシェアは無視しない方がいい、
結局透過っぽい画像を別に用意したほうがシェア的には当然いい。
175:160
07/05/24 02:18:52
>>174
そうですねぇ。
手間を省きたいのと、その方がキレイだろうと思っての事でしたが、
安全策を取ります。
どうもありがとう。
176:Name_Not_Found
07/05/26 18:01:02
h1 { color: #000; text-decoration: underline; }
h1 span { color: #888; text-decoration: none; }
<h1>タイトル<span>備考</span></h1>
spanにも#000の下線が付いてしまうんですがこれを表示させない方法ってありませんか？
また、それが無理でしたらspanの下線の色だけでも変えたいんですが可能でしょうか？
ブラウザはIE6.0で表示させます
177:Name_Not_Found
07/05/26 18:08:40
>>176
<h1><span class="hoge01">タイトル</span><span class="hoge02">備考</span></h1>
178:Name_Not_Found
07/05/26 18:19:26
WinIE
親要素のtext-decorationの効果を子要素で解除できる(5.x/6.0)
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
179:176
07/05/26 18:33:08
>>177
うわぁー親要素じゃなくてそれぞれにtext-decorationを指定すればよかったんですね。
恥ずかしながら思い付きませんでした。ありがとうございます。
>>178
これはa要素の下線を解除できるという事でしょうか？
下線はspanよりemの方が良さそうですね！emで装飾させることにします。
教えていただきありがとうございました。
180:Name_Not_Found
07/05/26 18:39:16
意味ない方法だけどspanのアンダーラインを白にするｗ
181:Name_Not_Found
07/05/26 19:58:10
つか、備考はh1じゃねーだろ。
182:Name_Not_Found
07/05/27 11:14:50
といっても、適切なブロック要素がみあたらないと思うよ。
div使わないとした場合、pじゃないし。
備考を「サブタイトル」と考えればheadingのなかにspan/emあたりでいいし、
タイトルに対するコメントだからタイトルに含まれないと考えた場合
<h1 class='my-nobreak-heading'>foo</h1>< (block element) class='annex-comment'>bar</(block element)>
として、h1のbreakを外すってぐらいか
183:Name_Not_Found
07/05/27 12:28:03
>>182
馬鹿だろｗ
184:Name_Not_Found
07/05/27 12:38:36
>>182
こだわり過ぎてとらわれ過ぎてわけわかんなくなった典型。
今まで覚えたことを一回全部忘れたほうがいいよ。
185:Name_Not_Found
07/05/27 12:43:33 lRsNMo8e
まだCSS囓りたての者です。
ページのグラデーション背景の両端に影をつけたいのですが
（例）URLﾘﾝｸ(advanced-gear.net)
↑こんな感じで。
が、下のページなどを参考にしてはみたのですが
グラデーション場合の末端からの背景のy軸へのリピートの仕方がわかりません。
CSSでは一つのボックスで2つの背景は選択できないのですよね。
さんざん外出かと思いますがご教授願えますでしょうか。
■背景の影のつけ方について
URLﾘﾝｸ(www.kazu-style.net)
186:Name_Not_Found
07/05/27 12:55:06
みてないけど適当に答える。
グラデの時は画像をabsoluteで強制的において表示させてる
187:Name_Not_Found
07/05/27 13:04:27
ん？備考がh1じゃないというのに返答しただけだが？
なにがおかしいんだ？
188:Name_Not_Found
07/05/27 13:28:21
>>185
半透明PNGを使ってるだけ。
>>187
おかしくないよ。
そいつ（ら）は相手にしないほうがいい。
189:Name_Not_Found
07/05/27 14:38:40
>>186
>>188
ありがとうございます。
半透明のPNGでいけそうです。
それと「absolute」とはどんな手法なのですか
すいません。。勉強不足なもので。
190:Name_Not_Found
07/05/27 14:57:01
>>189
キーワードくれたんだからググれよ。
でも>>185で使ってるのは
background-attachment: fixed;
だけどな。
あのなぁ、こんなのって具体例があるならそのサイトの通りやればいいじゃんか。
何でわざわざ聞くんだよ。
191:Name_Not_Found
07/05/27 15:12:55
>>189
普通にその背景がグラデーションと一緒に動かないようにするだけ。
で、半透明PNGの是非についてはちゃんと上を読めよ。
はっきり言ってそんなデザインするほうがアホらしい。
192:189
07/05/27 19:58:12
皆さま、ご教授ありがとうございました。
へたれながら頑張っていきますです。
感謝感謝...
193:Name_Not_Found
07/05/27 20:26:51
IE6の標準モードで画像を背景左下に固定させたいのですが
何故かスクロールしてしまいます
body {
background-image: url('hoge.jpg');
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
background-color: #FFFFFF;
}
と記述してます
Firefox1.5.09、ネスケ7.01、opera8.53では意図した通りに表示されます
何が原因か解る方いたらご教示ください
194:Name_Not_Found
07/05/27 20:44:03
>>193
他にもoverflowとか余計な指定してんじゃないの。
関係ないけど、urlのカッコ内にクォーテーションは不要。
195:193
07/05/27 20:49:30
overflowはどこにも指定してないです
もう何が何やら
196:Name_Not_Found
07/05/27 20:56:22
>>195
自分で>>193に書いたソースで確認するのが当然だろ。
何が何やらはこっちのセリフだ。
197:Name_Not_Found
07/05/27 21:47:45
>>193
そのソースコピってfixedになることは確認できたから、
問題はそこじゃない部分。htmlにでも何か指定してね？
あとurl('hoge.jpg')は対応してないブラウザもあるようだから
クォーテーションは外してurl(hoge.jpg)のほうがいいかもしんない。
198:193
07/05/27 22:09:31
htmlに個別指定はしてないですが
* {
font-family: "ヒラギノ角ゴ Pro W3", HiraKakuPro-W3, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000000;
line-height: 1em;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
}
と書いてます
自分でも更の状態で193のbodyタグだけ指定したら固定されました
問題のhtmlは' " 何もなしも試してみましたが、どれも駄目でした
何かの指定が間違ってるとは思うのですが、どれが悪いのか見当がつきません
199:Name_Not_Found
07/05/27 22:20:58
>>198
だからどこかで何か間違ってんだ。
部分的にソース出されてもわかるわけないし、全ソース出されても迷惑。
1つ1つ指定消して、自分でやるしかないんだよ。
＞問題のhtmlは' " 何もなしも試してみましたが
関係ないって言ってるだろ。間違いを訂正してやっただけ。試すじゃなくて直せ。
200:Name_Not_Found
07/05/27 22:24:35
>>198
クォーテーションは>>199の言うとおりIEには関係ない。別のブラウザ用。
とりあえず全部外して>>193だけのCSSにしてから、一つずつ追加して
その都度調べれば切り分けができるだろ。
201:Name_Not_Found
07/05/27 22:36:58
CSS勉強始めて4日目でどう直していっていいのかも
わからなかったので、助言助かりました。
ありがとうございました。やってみます。
202:Name_Not_Found
07/05/27 23:25:49
すいません、質問させてください。
今、フレームサイトのnoframes内のコンテンツに関して作成しているのですが、
ブラウザ上で、noforamesの内容を確認するには、どうすれば良いのでしょうか。
「フレーム オフ設定」とか色々調べても、noframesの解説ばかりで、
フレームをオフにする設定がブラウザにあるのか、フレーム未対応のブラウザも
見つからず、とても困っています。
noframesのﾀｸﾞ内に、コンテンツを作成することは、どこまで可能なのでしょうか？
簡易的な文章で、リンクを使用していたり、フレームサイトの説明だったりが多いのですが、
[hx]を利用したり、フォームを設置したり、CSSを使用したりするのは、
問題ないものなのでしょうか？
すいません、htmlの質問がメインとなってしまいますが、
書き込み場所が、わからずに、こちらに書き込ましてもらいました。
どなたかわかりませんでしょうか？
203:Name_Not_Found
07/05/27 23:37:36
>>202
私も<noframes>を表示するしないの設定があるブラウザを知らない。
故にフレーム不可のブラウザでの確認だけで十分かと(Lynx等)。
知ってるとは思うが今日フレームを扱うのは難しい。
204:Name_Not_Found
07/05/27 23:42:15
>>202
frameの使用できないブラウザでは現行CSSにも対応してない。
hxが何だかわからないがhnの見出しのことなら可能。
というかnoframe内のbodyには
呼び出し先ファイルのhtml（メニュー）をそのまんまコピるのが普通。
で、スレを間違えてないか。
205:202
07/05/27 23:44:06
>>203
さっそくのご返事ありがとうございます。
Lynxですね、ありがとうございます！！
はい、フレームは、私のサイトなら使ってないです^^;
既存サイトの改善みたいな感じの内容でして。
本当、ありがとうございました。
助かりました！！
206:Name_Not_Found
07/05/27 23:45:30
>>203
あ、忘れてた。
OperaでShift+F11を押せ。
207:202
07/05/27 23:46:23
>>204
ご返事ありがとうございます。
なるほど、CSSは不可だけど、htmlのソースを使用するぶんには良いのですね。
スレ違いとわかっていながら、ご返事ありがとうございます。
スレ違いの書き込みに回答をくださった方、
本当たすかりました。ありがとうございました。
208:Name_Not_Found
07/05/27 23:47:02
203じゃねえ、202宛・・・
209:Name_Not_Found
07/05/27 23:52:11
>>204
>frameの使用できないブラウザでは現行CSSにも対応してない。
携帯は、どうなんだろうか。
>>206
スモールスクリーンはフレーム内を繋げて表示するだけで
noframesを表示はしないかと。
210:Name_Not_Found
07/05/27 23:53:50
>>209
横フレームを縦に表示する。
211:Name_Not_Found
07/05/28 00:04:46
FirefoxとOperaはabout:config(opera:config)で
フレーム無効にできる
212:Name_Not_Found
07/05/28 00:09:25
おまえらスレ間違えてね？
213:202
07/05/28 00:25:38
みなさん、ありがとう。
about：configの機能、はじめて知りました。
すごい設定項目で、Frame無効の場所探すの大変そうｗ
でも、ありがとう。すごい勉強になりました。
>>212
すいません、もともと私の質問からです。
ほんと、スレ違いな内容の質問で申し訳ありませんでした。
回答を下さった、優しい方の気持ちをくんで、ここは、私の責任ということで
お願いします。
ありがとうございました。
214:Name_Not_Found
07/05/28 00:35:42
ｷﾓ
215:Name_Not_Found
07/05/28 01:27:04
大した知識もないくせいにいちいちケチつける方がどうかと思う。
216:Name_Not_Found
07/05/28 01:37:02
最近でケチつけてる風のレスは>>215くらいしか見当たらない件。
217:Name_Not_Found
07/05/28 07:57:01
ケチケチすんあよ
218:Name_Not_Found
07/05/28 09:20:57
打った文章で噛むなよ。
219:Name_Not_Found
07/05/28 20:01:49
そんなケイケチすんあお
220:Name_Not_Found
07/05/29 18:03:38
質問です。
<DIV style="position:absolute;left:00px;top:00px"><IMG src="xxx.gif" /></DIV>
<DIV style="position:absolute;left:10px;top:10px"><IMG src="xxx.gif" /></DIV>
のように２つの画像間を結ぶ線を表示したいのですが、
スタイルシートで２点の座標を指定して直線を描画することは可能でしょうか？
もしくは他に実現方法はありますでしょうか？
221:Name_Not_Found
07/05/29 18:17:16
2つの画像も線も、一つの画像にまとめてしまえ
222:Name_Not_Found
07/05/29 18:21:36
>>220
画像間ったって、画像のどの点を線で結びたいのかわからん。
その変なソースでは画像間が縦横10px離れてるだけだし、画像自体がかなり小さいとしか思えず、
だったらまとめて1個の画像にすれば済む話。
223:Name_Not_Found
07/05/29 18:22:29
かぶったスマソ。。
224:Name_Not_Found
07/05/29 18:31:50
>>221,222
結ぶ２点の座標がデータによって変わります。
そのため線と画像をまとめた画像にすると可変データへの対応ができません。
画像と線をまとめた画像にする案も考えましたが、
前提として直線表示が可能か不可能をお聞きしたかったのです。
自由直線（垂直／平行線以外）の表示は不可能と考えた方がいいのでしょうか？
225:224
07/05/29 19:11:10
すいません
解決しました。
スタイルシートでは垂直・平行線のみと考えていいようです。
他手法での見当がついたのでそちらで実装しようとおもいます。
失礼しました。
226:Name_Not_Found
07/05/29 19:13:46
今度はデータだって。アホだな。
227:Name_Not_Found
07/05/29 20:46:41
<div class="**">
～～～
<h1>title</h1>
<span class="**">*****</span>
～～～
</div>
この様な感じでベースレイアウトを記述したclass内に全文章を入れているのですが、印刷時、複数ページになる場合に1ページ目しか印刷されません
大外枠のclassを外せば前ページ印刷可能なのですが、他cssを全て治さなくてはいけないのでできれば他の方法で解決できないでしょうか
228:Name_Not_Found
07/05/29 20:49:31
>>227
全く以て日本語がおかしくて理解不能だが、
要するにprintメディア用CSSを別に書けよということでFA。
229:Name_Not_Found
07/05/29 23:20:05 NfQsrM1H
MacのIEでCSSのオーバーフロー（Dreamweaverから適用したもの）
が表示されないのですが何か対処方などありますか？
なるべくインラインフレームは使いたくないのですが。
ご教授願えませんでしょうか。
230:Name_Not_Found
07/05/29 23:23:25
>>229
URLﾘﾝｸ(www.remus.dti.ne.jp)
231:Name_Not_Found
07/05/30 00:37:16
ここの奴ら使えないの多いな
232:Name_Not_Found
07/05/30 01:07:22
ﾌﾟｯ
233:Name_Not_Found
07/05/30 02:15:45
>>230
感謝でございます。
>>231,232
無知ですんません。
234:Name_Not_Found
07/06/04 12:05:37
一つのCSSファイルの中に書かれた複数の定義を個別に反映させるのってどうやるの？
例えば一つのCSSファイルの中の記述範囲でA、B、Cとあるとすると
範囲Aの記述はa.htmlに反映、範囲Bの記述はb.htmlに指定みたいなイメージなんだが
235:Name_Not_Found
07/06/04 12:31:52
>>234
a.htmlにはaというid、b.htmlにはbというidをルートに付ければよかろう。
ただしそれを共通外部CSSに持って行く意味は何もないが。
複数ページで性質として使うんだったら別ページでも意味的にclassでな。
236:Name_Not_Found
07/06/04 13:14:13
>>235
thxたすかりました
237:質問させて下さい。
07/06/04 14:31:28 reCUGdiH
onmouseoverでテーブル内の背景色のチェンジをしてonClickでテーブル内の背景色を固定にしたいのですが、
試行錯誤したんですができませんでした。
下記のソースでは、onClickした時に、背景色は白に一瞬変わりますが固定にならずに黒に戻ります。
これをonClickした時に白で固定するのはどうすればいいでしょうか？
ブラウザは、IE6.0で動作確認をしております。
アドバイスお願いします。
<table width="100" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tr>
<td width="100" height="100" align="center" onmouseover="this.style.backgroundColor='#666666'" onmouseout="this.style.backgroundColor='#000000'" onClick="this.style.background='ffffff'">
<a href="#">hogehoge</a>
</td>
</tr>
</table>
238:Name_Not_Found
07/06/04 14:36:00
>>237
>onmouseout="this.style.backgroundColor='#000000'"
って自分で指定してるだろうがw
239:237
07/06/04 14:58:58
>>238さんレスありがとうございます。
onmouseout="this.style.backgroundColor='#000000'"を削って動作確認した所
クリックしたあとの固定は白ではなくて
onmouseover="this.style.backgroundColor='#666666'"
#666666になります；；
何かわかりましたアドバイスお願いします。
240:Name_Not_Found
07/06/04 16:11:34
ゆっくり考えてみ。#666666になるのは、どんな時？
その時に白なら色を変えないようにすれば良い。
っていうかスレ違いだよ。
241:Name_Not_Found
07/06/04 16:20:59
ありがとう！ございました！
242:Name_Not_Found
07/06/04 16:33:56
どういた！しまして！
243:Name_Not_Found
07/06/04 22:38:10
今更だけど
IEの独自解釈をなくすことができないのかな？
244:Name_Not_Found
07/06/04 22:53:24
独自解釈のないIEを作ってくれ、是非とも。
245:Name_Not_Found
07/06/05 14:09:13
せめてこっち晒せ
URLﾘﾝｸ(alevirita.com)
URLﾘﾝｸ(spky.org)
URLﾘﾝｸ(awa.opal.ne.jp)
なんかパクリかってくらい似てるけど
WPでこういうテンプレあるの？
246:Name_Not_Found
07/06/05 14:11:11
誤爆
247:Name_Not_Found
07/06/05 18:45:37
h2やh3等のブロック要素のテキストを右寄せにしたとします。
この時テキストの直前に背景画像としてアイコンを置きたいのですが、
位置調整が上手く行きません。
内部をspan要素で囲んでspanに背景画像を置くしかないのでしょうか？
248:Name_Not_Found
07/06/05 19:02:57
float : right;してpadding-leftに画像がくるようにすればいけるんじゃないかな。
249:247
07/06/05 19:13:28
>>248
なるほど。そう言う手がありましたか。
おかげさまで上手く行きました。
ありがとうございます。
250:Name_Not_Found
07/06/05 19:16:35
h2 {
text-align:right;
display: list-item;
list-style: none url();
}
251:Name_Not_Found
07/06/06 00:03:40
>>250
これこれ…。
252:Name_Not_Found
07/06/08 11:01:08 k62R+h7I
高さが短い枠線などを作る時に
<div class="frameBottom"></div>
っとすることがあるのですが、HTMLチェックツールなどを見ると、
<div></div>の間が空欄だと指摘されます。
などの空白を入れるのも考えましたが、妙に間が空きます。
こういう場合、どうするのが正しい書き方なのでしょうか？
253:Name_Not_Found
07/06/08 11:33:06
高さは短いと言うのか・・・ ふ～～ん
254:Name_Not_Found
07/06/08 11:54:49 DXfqdT3t
>>252
div要素として明示されるべきは､ 本文中にあって一連と見なせる一群の思想であります｡
あなたの例は明かにそれに反するので不正であります｡
枠線を描きたいのであれば､ その枠線の前と後では､ 思想が異なるのでありましょうから､
それぞれをdivで明示して､ 前のdivの下辺､ あるいは後のdivの上辺に枠線を付けましょう｡
あるいは､ 区切りをhr要素として明示し､ それに枠線を引いてもよいと思います｡
255:252
07/06/08 17:35:55
>>254
ありがとうございます。つまり、
<div class="frameBottom"><hr /></div>
こうするということですかね？それとも
<hr class="frameBottom" />
とするのが正しいのでしょうか？
256:Name_Not_Found
07/06/08 17:50:06
こいつ、間違いなくDIV病だな。
257:Name_Not_Found
07/06/08 17:57:58
>>256
・・・・・・・・・・・・・・・・・・・・・・・・・・・・。
その線の前後にはブロックが存在するだろう？
そのブロックの、線を引きたい位置のどっちでもいいから
上か下かだけにボーダーを引きなさい。
258:Name_Not_Found
07/06/08 17:58:46
ごめん、256じゃなくて255宛。
259:Name_Not_Found
07/06/08 18:03:16
馬鹿ほどxhtmlを使いたがるってのもわかった。
260:Name_Not_Found
07/06/08 18:15:27
区切り線の変わりに枠線のみの中抜き長方形を作りたいという意味じゃないの？
<hr style="color:#FFFFFF; height:5px; width:300px; border:#000000 solid 1px;" />
261:Name_Not_Found
07/06/08 18:31:21
>>260
死ねよつるっぱげ
262:Name_Not_Found
07/06/08 19:13:52
違うよ２３２３だよ。
263:Name_Not_Found
07/06/08 20:08:35
html {
background: #68a;
border-width: 3px;
border-style: dotted;
border-color: #fcfcfc;
}
body {
background: #fcfcfc;
color: #333;
border-width: 3px;
border-style: dotted;
border-color: #68a;
}
こんな感じのを書いてみたんですけど、IE7で見ると点線になってくれません。
firefoxでは点線になります。
これは、『CSSバグ辞典スレッド』の要約サイトに書かれてある
「幅や高さを指定した要素でdoubleボーダー領域に背景が描画されない(5.x/6.0)」
というバグと同一のものでしょうか？
264:Name_Not_Found
07/06/08 20:18:23
>>263
＞というバグと同一のものでしょうか？
どう読んだら同一になるんだか。
265:Name_Not_Found
07/06/08 20:24:58
>>263
htmlはないわけ？
266:Name_Not_Found
07/06/08 20:57:27
>>263
それとは別。
html→body
body→コンテナブロック
に置き換えな。
267:Name_Not_Found
07/06/08 21:07:57
IEでみると
dottedもdashedモ同じに見えるけどそのこととは違うの？
268:Name_Not_Found
07/06/08 21:59:14
>>264
破線の間、点線の間、二重線の間、ってことで同じなのかな、と思っただけです。
>>265
表示されないなあおかしいなあ、と思ってhtmlとbodyで試したんです。
>>266
置き換えてみたけどやはり表示されずでした。
>>267
IEだと丸点で、他のブラウザは角点ですよね。それが線の背景が反映されないのでおかしいな、と。
上記の三種類の線の下地色は、そのborderをしている要素の背景色になる…んですよね？
なんか単純な記述ミスかも知れないんで、もう少しいじってみます。
すみませんでした。
269:Name_Not_Found
07/06/08 22:01:17
border-styleってそもそもいいかげんだよ
270:Name_Not_Found
07/06/08 22:28:23
>>268
htmlといわれたら素直にソース出せよ。
cssだけ出されたって反映するhtmlに問題があったら意味がない。
特に君みたいに思い込みが激しいタイプはね。
271:Name_Not_Found
07/06/08 22:36:23
まて、268は素で勘違いしてるだけだろ ｈｔｍｌの意味を
なぜ270は噛みついてるんだ？？
思いこみ激しいっていったって自分で「記述ミスか？」と振り返ってるじゃないか
みんな落ち着け
272:Name_Not_Found
07/06/08 22:44:59
どう見てもアホだろ。放っときゃいい。
273:Name_Not_Found
07/06/08 23:52:41
確認はこのままのCSSでやったわけ？
background-colorもborder-colorも同じ色(#68a)にしたら見えないじゃない。
274:Name_Not_Found
07/06/09 00:06:20
bodyのbackground-colorは#fcfcfcだからいいんじゃないの。
IE6は確認する環境がないんだけど、
bodyに要素があっても表示されないのかな。
275:Name_Not_Found
07/06/09 00:42:05
>>268
置き換えて確認してみたよ、何か間違えてるんだろ。
276:Name_Not_Found
07/06/09 11:08:33 hmk+k36U
質問です。
ネスケ７．１で
position: relative;
のボックスの中でposition: absolute;をつかえば
position: relative;内からの絶対値ではじまるはずが
ネスケの場合relativeとfloatを一緒に使っていると
そのrelativeはむしられその外側のrelativeからの絶対値になってしまうのですが
対処法を知ってる方がいましたらお願いします。
277:Name_Not_Found
07/06/09 11:27:36
positionとfloatを一緒に指定すんな
278:Name_Not_Found
07/06/09 11:40:53
position:relativeとfloatは同時に指定可能だよ。absoluteは駄目だけど。
ただN7は・・・
279:Name_Not_Found
07/06/09 14:04:42
>>276
ソース出せ、外側とかむしられとかよくわからん
280:Name_Not_Found
07/06/09 15:02:49 hmk+k36U
css
*{
margin: 0;
padding: 0;
}
div#box1 {
padding: 50px;
width: 500px;
height: 500px;
position: relative;
}
div#box2 {
width: 300px;
height: 300px;
position: relative;
float: left;
}
p {
position: absolute;
top: 0;
left: 0;
}
html
<div id="box1">
<div id="box2">
<p>テスト</p>
</div>
</div>
こんな感じになっている場合普通はbox2からの絶対位置になるはずがbox1からの絶対位置にになってしまうということです。
281:Name_Not_Found
07/06/09 15:11:36
あちゃ～・・・
282:Name_Not_Found
07/06/09 15:47:03
画面に表示されるカーソルをずっと十字のままにしたいんだけど、
リンクに重ねると指に戻っちゃうときはどこいじればいいの？
283:Name_Not_Found
07/06/09 15:55:35
>>282
ググレカス
284:Name_Not_Found
07/06/09 15:57:03 O2a4EuVY
>>282
全てをいじればいいのです｡
ヒント: 全称セレクタ
285:Name_Not_Found
07/06/09 16:18:28
>>280
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
286:Name_Not_Found
07/06/09 16:20:54
>>280
relativeをbox1にも指定する意味はわからないが、relativeを外しても同じであり、
それでもbox2のrelativeにabsoluteするハズなのに、と言いたいのだろう。
ネスケ以外はそうなるからな。
しかしながら、box2には同時にfloat:left;が指定してある。floatを外せば問題ない。
floatした要素は通常フローから除外される、という意味ではネスケの解釈が正しいのかもな。
実際にはbox2の位置はfloatしてないので、他ブラウザでは最初から無視と。
287:Name_Not_Found
07/06/09 16:29:17 hmk+k36U
解決法はなしっすか。
288:Name_Not_Found
07/06/09 16:29:37
>実際にはbox2の位置はfloatしてないので、他ブラウザでは最初から無視と。
floatしてるよ。
relativeで動かされる前の位置でちゃんとfloatの動作を見せる。
原因は>>285。
289:Name_Not_Found
07/06/09 16:30:42
>>287
今のところそのままだと見付かっていないと思われ。
別の方法でも似たようなことできると思うけど。
290:Name_Not_Found
07/06/09 16:43:50
>>288
え？floatしてないんじゃない。
float消しても変化しないし、floatしてるなら高さが無視されるだろ。
291:Name_Not_Found
07/06/09 16:49:14
だからfloat消せば解決するんでわ。
292:Name_Not_Found
07/06/09 16:58:17
>>290
floatを外すとF7（2.0）にしろFx（2.1）にしろ動作変わってるけど。
またfloatした要素にheight指定もできる。
293:Name_Not_Found
07/06/09 17:07:21
>>292
俺のFX2.0、NN7.1では変化しない。
294:Name_Not_Found
07/06/09 17:10:50
>>292
＞またfloatした要素にheight指定もできる。
珍説です。本当にありがとうございました。
295:Name_Not_Found
07/06/09 17:13:16
>>293
後続テキスト入れてごらん。
296:Name_Not_Found
07/06/09 17:20:26 hmk+k36U
floatけせばいうけど、floatしたい場合とrelativeもつか痛い場合はどうすりゃいいのか。
まーｈｔｍｌソース足せば解決するけど、そのためだけにタグ追加したくないし。
297:Name_Not_Found
07/06/09 17:21:59
>>296
relateveは大概margin代用で解決すると思うけど。
298:Name_Not_Found
07/06/09 17:24:35 hmk+k36U
回避ほうあればとおもったんですが。
マイナスマージンで解決するしかないですかね。
299:Name_Not_Found
07/06/09 17:32:44
こういう風に議論が盛り上がる時って、回答者がアホな時なんだよな。
300:Name_Not_Found
07/06/09 17:34:28
>>295
後続テキストがあるってどこにかいてあんのー？
エスパー？
301:Name_Not_Found
07/06/09 17:37:17
>>300
書いてないよ。
floatがわかりやすいように入れて確認してごらん、という意味。
でもただの煽りだったようだね。
302:Name_Not_Found
07/06/09 18:14:18
＞確認してごらん
エラそうでちゅねー
303:Name_Not_Found
07/06/09 18:21:49 hmk+k36U
よし、あきらめよう。
これからは、このこと頭に入れながらつくるようにしよ。
304:Name_Not_Found
07/06/09 18:47:24
最近の質問者って礼も無しかよ
305:Name_Not_Found
07/06/09 19:08:11
ソースから馬鹿が滲み出てるような奴だぜ？
306:Name_Not_Found
07/06/09 23:34:18 qlp4CwRH
table内のリンクだけcssでnofollowさせる事は出来ますか？
307:Name_Not_Found
07/06/09 23:39:06
>>306
死ね
308:Name_Not_Found
07/06/09 23:46:53
スタイルシートと検索エンジンは全くの無関係
309:Name_Not_Found
07/06/10 03:55:46
>>306
できない。CSSができることは見た目を決定することだけ。
310:Name_Not_Found
07/06/10 12:38:11
idとclassまたは別のclassとclassをひとつの要素に指定することって間違ってる？
一応正常に表示される
311:Name_Not_Found
07/06/10 12:38:36
>>306-309
ありがとう御座います。
312:311
07/06/10 12:40:39
306は要りませんでしたｗ
313:Name_Not_Found
07/06/10 13:27:01
>>306
できるか分からないけどtableをインラインフレームにしてnofollowさせたら？
314:Name_Not_Found
07/06/10 13:46:43 HJtEO2SZ
画像の下に説明文をつけるときに、説明文が短い場合はセンタリング、
長い場合は画像幅で折り返して左寄せしたいのですが、下のように
tableを使う方法でやっています。
table使わない方法はありますでしょうか？
<html><body>
<div style="text-align:center;float:left;width:200px">
<img src="画像Ａ.jpg" width=200 height=200><br>
<table style="margin-left:auto;margin-right:auto;"><tr><td>
○○画像Ａの説明文○○
</td></tr></table>
</div>
</body></html>
315:Name_Not_Found
07/06/10 14:28:15
>>310
たとえば<p id="hoge1" class="foo">と<p id="hoge2" class="foo">みたいに？
なら無問題。つうかそうした方が適切に意味付けできるなら推奨。
>>314
table要素をまんまp要素にかえてtrとtdをとっぱらってみ？
316:310
07/06/10 14:56:34
>>315
ありがとう。もっと早く質問すればよかったよ
今から組み直してくる
317:Name_Not_Found
07/06/10 15:13:10
>>316
×もっと早く質問
○もっとちゃんと勉強
318:314
07/06/10 15:24:32 HJtEO2SZ
>>315
table要素をp要素に変えると画像の説明文が長い場合に
画像の説
明文
のように２行目がセンタリングされてしまい醜くなります。
table要素使うと説明文が短い場合にはセンタリング、長い場合には
画像の説
明文
のように左寄せになるのですが。
319:Name_Not_Found
07/06/10 15:43:54
そんなことして喜ぶのはアンタだけだから
320:Name_Not_Found
07/06/10 15:48:54
興味アリ
321:Name_Not_Found
07/06/10 15:51:58
>>318
tableの事は完全に忘れろ。話はそれからだ。
322:Name_Not_Found
07/06/10 16:05:24
>>318
無理じゃないかな。
っていうか、>>314も本当は出来てないんだけど。
分かってて後方互換モードで書いてるなら何も言わないけど、
何だか分からず書いてるなら、まずHTMLをちゃんと勉強した方がいいんじゃない？
323:Name_Not_Found
07/06/10 16:07:42 9yHeYtgM
<style type="text/css">
* {
margin: 0;
padding: 0;
}
dl.images {
width: 200px;
float: left;
border: solid thin red;
}
dl.images dd {
display: table;
margin-right: auto;
margin-left: auto;
border: solid thin blue;
}
</style>
<dl class="images">
<dt><img src="画像A.jpg" alt="画像A.jpg" width="200" height="200"></dt>
<dd>画像Aの説明文</dd>
</dl>
324:Name_Not_Found
07/06/10 16:26:40
厳密にやりたいならPHPかなんかで文字数カウントするしかなくね？
325:Name_Not_Found
07/06/10 17:39:47
カウントしたって無理だよ。
326:Name_Not_Found
07/06/10 18:03:21
だからテーブルレイアウトはダメなんだよ。
327:314
07/06/10 18:57:42 HJtEO2SZ
>>323
ありがとうございます。display:table; がミソということですね。
だけどIEは非対応orz
ブラウザ側で文字を大きくされたときに、センタリングされている文字が
２行になると醜くなるので、なんかいい方法ないかと思ったんだけど。。。
328:Name_Not_Found
07/06/10 19:01:51
>>327
そんなにテーブルレイアウトが好きなら、無理してCSSなんか使う必要ない。
329:Name_Not_Found
07/06/10 19:03:02
>>327
class付けりゃいいだけじゃん。
330:314
07/06/10 22:03:10 HJtEO2SZ
>>327
テーブルをやめたいんですがどうしたらよろしいでしょうかとお尋ねしている
のであって、「テーブル最高！CSSでやれるもんならやってみな」と言っている
わけではありません。誤解を与えるような質問であったのであればごめんなさい。
質問のきっかけは、>>327にも書きましたが、ブラウザ側での文字サイズ変更です。
具体的には、例えば
URLﾘﾝｸ(allabout.co.jp)
のサイトですが、ブラウザで文字のサイズを大きくすると真ん中付近の海の絵の
「キャプションですよ」が２段で表示され、センタリングされてるので不自然に
なります。（IEだと「よ」だけ、Firefoxだと「すよ」が次の行に行きます）
２行以上の場合は左寄せのほうが見やすいと思い、いろいろ試したのですがテー
ブル使うのしか思いつきませんでした。
>>329
もう少し詳しく教えてください。おねがいします。
331:330
07/06/10 22:05:19 HJtEO2SZ
まちがえました。
× >>327
○ >>328
332:Name_Not_Found
07/06/10 22:19:15
>>330
tableやめてcssにしたいって言ってるくせに、全然勉強してないじゃん。
classなんてcssの基礎の基礎だろ。
キーワード貰ってからも全く調べてないんじゃどうしようもない。
333:Name_Not_Found
07/06/10 22:27:35 xqknB4MA
classを知ってても>>329のヒントじゃわけわかめ｡
334:Name_Not_Found
07/06/10 22:28:51
自分も>>329が何を言いたいのか分からない。
335:Name_Not_Found
07/06/10 22:34:59
私も>>329のがワカメ
336:Name_Not_Found
07/06/10 22:49:47
バカばっか。
337:Name_Not_Found
07/06/11 00:07:14
>>330
たぶんあんたのやりたいことはどの技術使っても㍉
338:Name_Not_Found
07/06/11 00:15:40
「折り返す」ってことは、その行は端々まで達してるってことだから、text-alignが如何なる値であってもほとんど変わらない。
それに対し、端に着いてない（折り返さない）行はtext-alignで影響を受ける。
だから一行目だけをcenterにしてそれ以外はleftなら出来るかな？
って考えて実験してみたんだけど出来なかったね。
dd{text-align:left}
dd:first-line{text-align:center}
339:Name_Not_Found
07/06/11 00:27:32 lCEOwbmE
URLﾘﾝｸ(www.y-adagio.com)
> :first-line擬似要素は行内レベル要素に類似しているが， 一定の制限がある。
> :first-line 擬似要素:に適用されるのは フォント特性, 色特性, 背景特性,
> 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform',
> 'line-height', 'text-shadow', 及び 'clear'に限られる。
ですって｡ 残念｡
340:Name_Not_Found
07/06/11 00:35:20
条件によって指定変えるなんてcssの範疇超えてる。
341:Name_Not_Found
07/06/11 02:00:10
DTP上がりの馬鹿でこういうやついるよな
342:Name_Not_Found
07/06/11 09:20:49
text-indent
343:Name_Not_Found
07/06/12 02:39:02 DdiTCSsl
すみません。お力をお貸しください。
WinIE6・標準準拠モードの環境で外部スタイルシートを使用し、
tableの中の文字サイズを変更したいと考えていますが、
どうもうまくいきません。
tableの指定は以下で。
<table border="1" id="ccstable"><tr><th class="ccs1">aaaaaa</th><th class="ccs2">bbbbbbb</th></tr>
<tr><td class="ccs1"><p class="ccs3">aaaaa11111</p><p>aaaaaa2222</p></td><td class="cccs2"><p>cccccc</p></td></tr>
<tr><td class="ccs1"><p style="font-size:3em;">11111aaaaa11111</p></td><td class="cccs2"><p>cccccc</p></td></tr>
</table>
外部スタイルシートは以下のように記載しています。
.ccs1{ width:100px; }
.ccs1{ width:90px; }
th.ccs1{ background-color:#000000;
color:#ffffff; }
th.ccs2{ background-color:#000000;
color:#ccfffff; }
.ccs2{ font-size:3em; }
.ccs3{ font-size:3em;
color:#cc0000; }
色の指定は反映されるため、
リンクが間違っているという事はないようです。
直接指定すれば反映されますが…。
何か指定方法で間違えがあれば指摘を頂ければと思います。
344:343
07/06/12 02:41:26 DdiTCSsl
すみません。
>343に記載ミスがあります。
.ccs1{ width:100px; }
は
#ccstable{ width:100px; }
です。
345:Name_Not_Found
07/06/12 02:42:43
寝ぼけながら
th .ccs1
スペースが開いてない、とか
346:343
07/06/12 02:50:34 DdiTCSsl
>345
タグとクラス名の間にスペースを空けると
今度は色指定も無効になってしまいます。
また、記載間違えがありました。
<td class="cccs2">
ではなく
<td class="ccs2">
です。たびたびすみません orz
347:Name_Not_Found
07/06/12 03:03:19
じゃあ逆
.ccs1 th
スペースはあけてね
348:343
07/06/12 03:36:08
後出しになって申し訳ないんですが、順番は質問前に色々試したのでそこでは無いのではと思います。
あと、ccs1ではなく、例にある ccs2のようなTD属性の中のものの文字サイズを変えたいのですが、
ccs1の指定が原因ですか？
答えてくださってるのにすみません。
349:Name_Not_Found
07/06/12 03:48:00
眠いのでテキトーに答えてゴメン
単純ミスかと思ったのでccs1を例に出しただけで
そこは関係無いです
ちょっと真面目に見ようと>>343をコピペしてみたんですが
cccs2となってるところは間違いですか？
後どの部分の文字を変えたいのに反映されてないんでしょうか
当方で試してみた所一応サイズ変わってるみたいなので
350:Name_Not_Found
07/06/12 03:48:12
th.ccs2のcolorが一桁多いね。
そこを直せば概ね、指定通りに表示されてる気がするんだけど、
どこがどううまく行かないのかな。
351:Name_Not_Found
07/06/12 03:52:54
p自体にフォントサイズ指定してないおね？
352:Name_Not_Found
07/06/12 03:57:33
><td class="cccs2">
cが多くね？
353:Name_Not_Found
07/06/12 04:26:11
>>346
354:Name_Not_Found
07/06/12 04:46:11
おー寝惚け過ぎ
だが何が反映されないのか本当に謎だなー
355:343
07/06/12 08:00:38
自分で試したとき、ccs2のTD自体に指定する場合と
ccs3のようなTDの中のPに指定する場合、どちらもが反映されなかったです。
色指定だけ反映されました。これが謎で。
Pに文字サイズ指定してはいけないと言う事はないですよね？
ここの例では記載してませんが別の指定が絡んでるのかと
TABLEにID名つけ親となる文字サイズ指定し、#ID名 .CLASSとし新たに文字サイズ指定した場合も駄目でした。
今タグが触れる環境にいないので夜にまた再チャレンジしてみます。
356:Name_Not_Found
07/06/12 09:47:52
こういうことか？
.ccs1{ width:90px; }
.ccs2,.ccs3{ font-size:3em; }
.ccs3{color:#cc0000;}
#ccstable th{background:#000;}
#ccstable th.ccs1{color:#fff;}
#ccstable th.ccs2{color:#cff;}
<table border="1" id="ccstable"><tr><th class="ccs1">aaaaaa</th><th class="ccs2">bbbbbbb</th></tr>
<tr><td class="ccs1"><p class="ccs3">aaaaa11111</p><p>aaaaaa2222</p></td><td class="ccs2"><p>cccccc</p></td></tr>
<tr><td class="ccs1"><p style="font-size:3em;">11111aaaaa11111</p></td><td class="ccs2"><p>cccccc</p></td></tr>
</table>
357:Name_Not_Found
07/06/12 18:24:11
ボックスつくって、べた色塗ってその中に、テキストや画像を配置。
ボックスのＣＳＳで
filter : Alpha(opacity=60);
を使用。
テキスト、画像は透けさせたくないのだがボックス内容全てが透ける。
どしたらいいの？