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

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

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

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

過去スレや関聯リンクは>>2-10
【過去ログ】>>2
【関連スレ】【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-9

【まとめサイト】http://web2ch.s31.xrea.com:8080/?CSS
【FAQ】 http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com:8080/?CSSRelated
2Name_Not_Found:04/07/16 20:05 ID:???
【過去ログ】
1 http://mentai.2ch.net/hp/kako/974/974934062.html
2 http://natto.2ch.net/hp/kako/984/984113434.html
3 http://natto.2ch.net/hp/kako/992/992992981.html
4 http://pc.2ch.net/hp/kako/996/996828258.html
5 http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
6 http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
7 http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
8 http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
9 http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
10 http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
11 http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
12 http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
13 http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
14 http://pc5.2ch.net/hp/kako/1041/10416/1041641395.html
15 http://pc5.2ch.net/hp/kako/1045/10451/1045124732.html
16 http://pc5.2ch.net/hp/kako/1047/10471/1047154499.html
17 http://pc5.2ch.net/hp/kako/1048/10487/1048775997.html
18 http://pc5.2ch.net/hp/kako/1050/10500/1050086156.html
19 http://pc5.2ch.net/hp/kako/1053/10536/1053619342.html
20 http://pc5.2ch.net/hp/kako/1055/10555/1055536413.html
21 http://pc5.2ch.net/hp/kako/1057/10578/1057860130.html
22 http://pc5.2ch.net/hp/kako/1060/10608/1060869440.html
23 http://pc5.2ch.net/hp/kako/1064/10645/1064502391.html
24 http://pc5.2ch.net/hp/kako/1066/10663/1066310242.html
25 http://pc5.2ch.net/hp/kako/1069/10692/1069216458.html
26 http://pc5.2ch.net/test/read.cgi/hp/1072018825/
27 http://pc5.2ch.net/test/read.cgi/hp/1074845459/
28 http://pc5.2ch.net/test/read.cgi/hp/1076968824/
29 http://pc5.2ch.net/test/read.cgi/hp/1079598884/
30 http://pc5.2ch.net/test/read.cgi/hp/1082785026/
31 http://pc5.2ch.net/test/read.cgi/hp/1085400294/
3Name_Not_Found:04/07/16 20:06 ID:???
【前スレッド】
31 http://pc5.2ch.net/test/read.cgi/hp/1087263288/
【関連スレッド】
・CSS/DHTMLバグ辞典スレッド 第4版
  http://pc5.2ch.net/test/read.cgi/hp/1078463560/
・代替スタイルシートに萌え〜
  http://pc5.2ch.net/test/read.cgi/hp/991400015/
・独自拡張、草案段階のCSSについて語れ
  http://pc5.2ch.net/test/read.cgi/hp/1019912046/
・* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
  http://pc5.2ch.net/test/read.cgi/hp/1038678267/
・CSSでイケてるデザインサイト 21
  http://pc5.2ch.net/test/read.cgi/hp/1078361001/
・CSSでイケてるデザインサイト 23
  http://pc5.2ch.net/test/read.cgi/hp/1087905861/
・ローカルルール等リンク先更新総合スレッド 10
  http://qb3.2ch.net/test/read.cgi/operate/1079706809/
【仕様書】
・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.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・CSS2の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html
 http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html
【CSS検証】
・W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
4Name_Not_Found:04/07/16 20:06 ID:???
【解説など】
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
 http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
 http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS対応状況表
 http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
 http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
 http://is.vis.ne.jp/charts/index.xhtml
・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
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.co.jp/SiliconValley-SantaClara/1308/
5Name_Not_Found:04/07/16 20:07 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには? text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に5.)をご覧ください。
1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html
6Name_Not_Found:04/07/16 20:07 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
 http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと (ネスケ4でも崩れない段組みの実例)
 http://village.infoweb.ne.jp/~fores/

Q4: なんかフロートの表示が崩れるみたいなんですけど? †
A4: 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
7Name_Not_Found:04/07/16 20:07 ID:???
【FAQ】
Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://kobit.info/tips/overflow.html
 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は一要素に一つだけ。要素を重ねるなど工夫しませう。

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
8Name_Not_Found:04/07/16 20:09 ID:???
【FAQ】
Q10.リンクを新しいウィンドウで開かせるにはどうしたら?
A10.CSSではできません。target属性かJavaScriptでやって下さい。
別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

Q11.いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A11.下記に書いてあります。テーブル・レイアウトは段組のFAQ(A3・>>6)をご覧あれ。
「いままでの 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.jp/site/tips/page/p0037.html
9Name_Not_Found:04/07/16 23:00 ID:???

>>1
【過去ログ】>>2 → 【過去ログ】>>2-3

>>3
【過去ログ】
31 http://pc5.2ch.net/test/read.cgi/hp/1087263288/
【前スレッド】
32 http://pc5.2ch.net/test/read.cgi/hp/1087263288/l50

>>6 リンク切れですヨ。↓
スタイルシートでマルチカラムデザインの実現
 http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
10Name_Not_Found:04/07/17 01:37 ID:???
11Name_Not_Found:04/07/17 09:19 ID:???
質問です。
スタイルシートを用いて、テーブルセル内で画像と文字を重ねて表示をしたいのですが
画像自体にフィルタを掛けたいので、background-image は使えません。
テーブル枠内で画像を表示したいので絶対位置指定を使うわけにもいきません。

実現の仕方がわかる方はいませんでしょうか?

━━━━╋━━━━━━━━━━━╋ 太線━   :テーブル
.      ┃   ┌───────┐┃ 細線枠内 :画像
.      ┃   │  [ 文字列 ]   │┃ ←こうしたい。
.      ┃   └───────┘┃
━━━━╋━━━━━━━━━━━╋
.      ┃   ┌───────┐┃
.      ┃   │           .│┃ ←こうなってしまう。
.      ┃   └───────┘┃
.      ┃       [ 文字列 ]    ┃
━━━━╋━━━━━━━━━━━╋
12Name_Not_Found:04/07/17 09:59 ID:???
background-imageにフィルタかからないの?知らんけど

つーかフィルタ使う時点でうんぬんあーだこーだ
13Name_Not_Found:04/07/17 11:21 ID:???
>>11
相対位置指定かmarginでマイナス値を使ったら?

いやそれよりテーブル・レイアウトにしてる時点で、云々
14Name_Not_Found:04/07/17 11:34 ID:???
親要素にposition:relative; left:0; top:0;として
絶対位置指定の座標原点をセル内にしてやればよいだけでは。
15Name_Not_Found:04/07/17 12:02 ID:???
>>1
16Name_Not_Found:04/07/17 12:54 ID:???
>>12 無理だと思います。
ちなみにローカルで閲覧するためだけに使うので、まぁその辺は気にしないでください。

>>14
試行錯誤した結果、以下のような感じでほぼ理想とする形になったみたいです。
ありがとうございました。

<TD nowrap align=right STYLE="position:relative; right:0; top:0;">
<img src="イメージ" STYLE=" z-index: 1; position:relative ; right:0px ; filter:ごにょごにょ ;">
<DIV STYLE=" z-index: 2; font-size:16px; position:absolute ; top:13px ; right:0px ; float:right ;"></DIV>
</TD>
17Name_Not_Found:04/07/17 13:28 ID:???
>>12
かかります。
ただしその上の文字にもフィルターがかかるのでオススメはしない。
文字は濃いままで、としたい場合は画像そのものを加工してから背景に使うか、
>>14の言うように画像と文字を重ねるか、透過iframeを使うか。
18Name_Not_Found:04/07/17 13:48 ID:???
おお、新スレか。>>1
19Name_Not_Found:04/07/17 14:25 ID:???
すいません、質問します。
tableのcellspacing="○○" bgcolor="#○○" Width="○○"

をCSSで指定することはできますか?
20Name_Not_Found:04/07/17 14:41 ID:???
>>19
できます
21Name_Not_Found:04/07/17 14:48 ID:???
>>20
どうやって?
22Name_Not_Found:04/07/17 15:08 ID:???
>>21
ttp://hp.vector.co.jp/authors/VA022006/css/index.html
こちらで勉強してきてから出直して下さい。
23Name_Not_Found:04/07/17 16:15 ID:???
前スレの1000はCSSスレ的にダメダメだな
24Name_Not_Found:04/07/17 18:22 ID:KQhNdyTb
<h1>test</h1>
<ul>
  <li>item1</li>
  <li class="nazo"><ul>
    <li>item1-1<span class="date">07/16</span></li>
    <li>item1-2<span class="date">07/17</span></li>
  </ul></li>
</ul>
-----
ul{margin:0;padding:0;list-style-typ:none;}
li{margin:0;padding:0;}
-----
というソースなんですが、何故かIEだけ、li.nazoの下のulの部分に
marginが現れるのです。上下に余白が出来ます。しかも
ul.nazoにborderを付けるとその謎の余白が消えるのです。mozillaなどでは起こりませんが
何故こうなるのでしょうか?win2kでIEのバージョンは6です。
2524:04/07/17 18:23 ID:???
>ul.nazoにborderを付けると
li.nazoにborderを付けると、でした。
26Name_Not_Found:04/07/17 18:31 ID:m16CfSls
floatさせたボックス内でdisplay:inline;とやっても出来ないんですが、何故でしょう?
27Name_Not_Found:04/07/17 19:05 ID:???
28Name_Not_Found:04/07/17 19:20 ID:???
>>27
リンク先に書いてあった通りwidthを指定してみたら直りました。
本当に助かりました、ありがとうございました!
29Name_Not_Found:04/07/17 19:54 ID:???
あるホームページを参照していたんですが、cssファイルの中の

span.note
{
color:#999;
}

の”note”はどういう意味を持つ物でしょうか。
後ろの”color”から色を指定しているということは分かるんですが、
htmlファイルには<span id=note.....>は見つかりませんでした。
また、上の一文を消して、消してない方と見比べてみても色が変わった
ような所は見当たりませんでした。
どうかよろしくお願いします。
30Name_Not_Found:04/07/17 20:00 ID:???
参照しているモノがないだけじゃないかな
31Name_Not_Found:04/07/17 20:11 ID:???
span.note なら span class="note" でしょ。
外部cssファイルなんて複数のページから参照されるのが
普通なんだから他のページにあるんじゃないの?
3229:04/07/17 20:24 ID:???
>>30
と、いうことは作者の都合で削られたものが、
cssファイルには残っていた、ということでしょうか。
>>31
それが1ページだけなんです。上に有るリンクから
アンカーでどんどん下に引っ張っていくタイプです。
33Name_Not_Found:04/07/17 23:12 ID:???
>>32
>上に有るリンクからアンカーでどんどん下に引っ張っていくタイプ

すまんがハゲにも分かるように説明してくれ・・。
34Name_Not_Found:04/07/17 23:51 ID:???
>>32
「意味が分からない」
35Name_Not_Found:04/07/17 23:52 ID:???
<STYLE TYPE="text/css">
<!--
BODY{
margin: 0px;
text-align: center;}
DIV{
background-color: #色;
width: 100%;
height: 100px;
border: none;}
-->
</STYLE>
<div>文字</div>

マージンで余白を0にして上にビシっとくっついたんですが、

そのあと<div style="width :10%; float : left">文字</div>
など段落入れるとその段落の色まで染まってしまいます('A`)。

どうしたらいいんでしょうか(´・ω・`)b
36Name_Not_Found:04/07/17 23:54 ID:???
釣り?
37Name_Not_Found:04/07/18 00:00 ID:???
>>35
質問する前に一呼吸おいて良くソース見れ。
38Name_Not_Found:04/07/18 12:20 ID:???

 夏だねぇ
39Name_Not_Found:04/07/18 12:52 ID:???
div厨は一回div無しで全部書き直してみなさい
40Name_Not_Found:04/07/18 14:26 ID:???
夏の間回答休むわ。じゃっ。ノシ
4141:04/07/18 18:22 ID:5jJNej1l
style="border-bottom :thin dashed"
をspan要素に入れると通常に細い下線が入る。
だが、これに改行して文字を入力すると下線が太くなる。
だれか対処法をおしえてくれ〜
42Name_Not_Found:04/07/18 19:10 ID:???
>>41
ブラウザは?
43Name_Not_Found:04/07/18 19:13 ID:???
>>41
改行っていうのはソースの改行?それとも<BR>?
うちではどっちにしても細い下線(破線)のままですけど。
ブラウザの問題じゃないですかね。
44Name_Not_Found:04/07/18 20:14 ID:???
「CSS質問スレ@画像アップロード」とかホスィ( ゚д゚)
45Name_Not_Found:04/07/18 20:44 ID:???
46Name_Not_Found:04/07/18 21:47 ID:???
>>39
それも一種の勘違いだけどな
47Name_Not_Found:04/07/19 00:09 ID:???
でも一理ある
意外と適当な要素がある場合が多い
48Name_Not_Found:04/07/19 00:33 ID:???
<div class="section">は許す
49Name_Not_Found:04/07/19 11:43 ID:???
現在フレームを利用したサイトを運営しているのですが、
フレームを外したいと思っています。

で、現在 日←こんな感じに分割して、下半分で案内その他をやっているのですが、
これと同じものをCSSでやりたいと思っています。
下半分を<div id="navi"></div>でくくって、.naviをposition:fixedで画面の一番下に固定したのですが、
どうしてもIEでうまく効いてくれません。Firefoxでは思ったとおりに固定されました。

IEの解釈が変なんでしょうか? それともfixedの使い方が間違ってたんでしょうか?
よろしくお願いします。
50Name_Not_Found:04/07/19 12:27 ID:???
>>49
IEが未対応。
51Name_Not_Found:04/07/19 12:42 ID:???
>>49
http://devnull.tagsoup.com/fixed/
IEでも工夫すれば可能。
52Name_Not_Found:04/07/19 13:13 ID:???
>>49
こんなのは?
<head>
<style type="text/css">
<!--
* {
margin: 0px;padding: 0px;
}
.ue {
width: 100%;overflow: auto;height: 90%;
}
.sita {
height: 10%;width: 100%;position: fixed;_position: absolute;bottom: 0px;background: #FFFF00;
}
-->
</style>
</head>
<body>
<div class="ue">
ここが上部
</div>
<div class="sita">
ここが下部
</div>
</body>
53Name_Not_Found:04/07/19 16:05 ID:???
>>50-52
ありがとうございました。うまくいきました。

overflowを用いた擬似フレームのページは見ていたんですが、
iframe的な使い方しか思いつきませんでした。感謝です。
54Name_Not_Found:04/07/19 16:25 ID:???
a { text-decoration:none; }
a:hover { text-decoration:underline; }
で、リンクにオンマウスになったら下線がつくけど、
その下線の色を変えるにはどうすればいいですか?
55dnuoF_toN_emaN:04/07/19 16:49 ID:???
>>54
無理ちゃうか?
56Name_Not_Found:04/07/19 17:01 ID:???
>>54
borderで代用とか
57Name_Not_Found:04/07/19 17:08 ID:???
>>54
a:hover { text-decoration:underline; color:#ff0000;}

とか?(藁
58Name_Not_Found:04/07/19 17:10 ID:???
>>57
それだと、元の文字も赤くなる。保守sage
59Name_Not_Found:04/07/19 17:11 ID:???
>>57
ネタだろ。(藁 の時点で既に(ry
60Name_Not_Found:04/07/19 17:25 ID:???
>>54

A { text-decoration:none;}
A:hover {border-bottom:solid 1 #000000}

1 = 線の太さ
#000000 = 色
6154:04/07/19 17:26 ID:???
>>60
ありがとうございます
62Name_Not_Found:04/07/19 20:24 ID:???
>>51
標準モードのみか
IEってやっぱり(ry
63Name_Not_Found:04/07/19 22:56 ID:???
IE6でユーザースタイルシートを使ってましたが、
bodyの背景色だけが無視されるようになりました。

body { background-color: #D2D2D2; }
こういった記述なんですが、どこか問題があるでしょうか?
64Name_Not_Found:04/07/19 23:02 ID:???
body { background-color: #D2D2D2 !important; }
でどうよ。>63
65Name_Not_Found:04/07/19 23:21 ID:i2eXO2j/
スタイルシートを使ってtableを移動させたいんですが、
marginを使っても効きません。!importantも付けてみましたが、
やっぱり効きませんでした。
table {
    font-size:100%;
    margin:1em 1em 1em 3em;
}
こんな感じなんですが、何故でしょうか?
66Name_Not_Found:04/07/19 23:44 ID:???
>64
!importantをつけて、「Webページで指定された色を使用しない」の
チェックをはずすと、背景の色は変更できました。

でも、他の記述と合わせるとうまくいかなかったりするので、
もう少し調べてみます。
ありがとうございました。
67Name_Not_Found:04/07/19 23:58 ID:???
>>66
おいw
68Name_Not_Found:04/07/20 08:35 ID:???
>>65
とりあえず>>1読んでちょうだい。
69Name_Not_Found:04/07/20 10:56 ID:???
どうしてスタイルシートのリファレンス本の使用例で使われるサンプルはデザインがださいんですか?
70Name_Not_Found:04/07/20 11:34 ID:???
シンプルな方が例として解り易いから
71Name_Not_Found:04/07/20 14:03 ID:???
>>69
スタイル効果を解説するための技術的な使用例であって、
ユーザを魅了させるようなデザインである必要がないから。
72Name_Not_Found:04/07/20 16:30 ID:???
>>69
colorプロパティだけでダサくないデザインを作ってみなさい
73Name_Not_Found:04/07/20 18:06 ID:???
なんか久しぶりに見にきたら、ほんとバカの集まりだなここは
質問者がバカというより、回答者がバカっぽい

学生が多いんだろうな
最近は引きこもりの子供が増えてるっていうからな
74Name_Not_Found:04/07/20 18:07 ID:???
>>73
おい学生、夏休みはいつまでだ?
75Name_Not_Found:04/07/20 18:22 ID:???
>>74
必死だな
76Name_Not_Found:04/07/20 18:25 ID:???
>>75
うるせえ!
7773:04/07/20 18:26 ID:???
>>74
知るかボケ
学生に聞いて来い
78Name_Not_Found:04/07/20 18:30 ID:???
楽しいか?
79Name_Not_Found:04/07/20 18:34 ID:???
嵐はスルーでいきましょう
80Name_Not_Found:04/07/20 18:40 ID:???
質問です

<html>
<head>
<title>なんとか</title>
</head>
<body>
<del><p>ほげほげ</p></del>
</body>
</html>
81Name_Not_Found:04/07/20 18:45 ID:XceWirGx
やべ。。。途中で送信してしまった

>>80のように書くと
IEやFirefoxでは「ほげほげ」に取り消し線が引かれますが、

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>なんとか</title>
</head>
<body>
<del><p>ほげほげ</p></del>
</body>
</html>

とすると(つまり標準モード)、Firefox0.9.1では取り消し線が引かれないんですよ。(IE6.0では引かれる)
これって仕様なんですかね。それともバグですか?バグ辞典見てもなかったもので
82Name_Not_Found:04/07/20 18:47 ID:???
>これって仕様なんですかね。それともバグですか?バグ辞典見てもなかったもので]

バグ辞典を見てください。
83Name_Not_Found:04/07/20 18:57 ID:???
>>81
<p><del>ほげほげ</del></p>

にしてはダメなんですか?
84Name_Not_Found:04/07/20 19:09 ID:???
Mozilla 5.0系 CSSバグリスト
子にブロックレベル要素を含むins, del要素もインライン要素になる(N7.x)
http://cssbug.at.infoseek.co.jp/detail/mozilla/b070.html
85Name_Not_Found:04/07/20 19:35 ID:MegHdYa8
<Style Type="text/css">
<!--
body{
font-size: 10pt;
line-height: 140%;
color: #000000;
background-color: #f9f9f9; }
-->
</Style>

WinXP+IEだと問題ないのですが、
NN7.1だと設定が反映されません。どこかおかしいでしょうか。
86Name_Not_Found:04/07/20 19:36 ID:???
>>83
OKですが、段落ごと削除したい場合は>>80じゃないとダメです。

>>84
それは読んでいたのですが、やはり関係ありましたか。
標準モードの時だけ表示されなかったので、
何か仕様と関係があるのかと思ってました
87Name_Not_Found:04/07/20 20:04 ID:???
>>85
どの指定が反映しないの? 全部?

あと、font-sizeをpt単位で絶対指定して固定するのは、感心しない。
88Name_Not_Found:04/07/20 20:23 ID:???
>font-sizeをpt単位で絶対指定して固定するのは、感心しない
それは大きなお世話
89Name_Not_Found:04/07/20 20:29 ID:???
親切からの忠告を聞き入れないのは、感心しない。
90Name_Not_Found:04/07/20 20:42 ID:???
荒れないうちに次の質問どうぞ。
91Name_Not_Found:04/07/20 20:43 ID:???
overflow-x:hiddenで横方向へのスクロールをロックしようとしたら
一つのあるファイルはできたのですが、もう一つのファイルでは
何故か縦方向まで一緒にロックされてしまいました。
CSSの部分のソースは全く一緒で、確認したブラウザも一緒です。

何が原因かわかりますでしょうか。
92Name_Not_Found:04/07/20 20:49 ID:???
千里眼ではないので、ソースも出さないで原因を見極めろってのはむつかしいナ。
9385:04/07/20 20:52 ID:???
>>87
すいません自己解決しました。

<Style Type="text/css">
<!--
-->
</Style>
の部分まで外部スタイルシートに書いちゃってました。

>あと、font-sizeをpt単位で絶対指定して固定するのは、感心しない。
勉強してきます。
94Name_Not_Found:04/07/20 20:54 ID:???
>>91 overflow-xはIEだけの独自拡張プロパティだってわかってるのかなぁ。
95Name_Not_Found:04/07/20 20:55 ID:???
CSSの部分はこうしてます。
<style media="screen" type="text/css">
<!--
.font_main { color: #464646; font-size: 90%; line-height: 135% }
.font_h { font-weight: bold; margin-bottom: 5px }
table { margin-top: 8px; margin-bottom: 8px }
body { margin-left: 30px;
background-repeat:no-repeat; background-position:0% 100%; background-attachment:fixed;
overflow-x:hidden; }
-->
</style>

Bodyの中身はとりあえず画面いっぱい以上のテーブルを置いてみましたが結果は一緒でした。
縦も横もスクロールロックされてしまいます。確認ブラウザはIE5です。
96Name_Not_Found:04/07/20 20:55 ID:???
>>91
それは知りませんでした。
でもIEで見てるんですよね・・・。
とりあえずこれ以外の方法で横スクロールをロックする方法が
ありましたらそれでやろうと思うんですが。
97Name_Not_Found:04/07/20 21:20 ID:???
>>95
WinIE6互換モードで試したら、そんなことはなかった。指定通り、横スクロール不可になった。
標準モードだと、bodyに指定しても効かない。htmlに指定しなくては。
98Name_Not_Found:04/07/20 23:12 ID:LzVNYQze
突然質問すいません。

外部CSSで背景画像をbodyで設定しているのですが
どうしても表示されません。

IE6.0.2800

body{
background:url(画像パス);
}

これも試しました
body {
background-image:url(画像パス)

2時間格闘してます;;
99Name_Not_Found:04/07/20 23:19 ID:???
>>98
ちゃんと外部スタイルシートを基準にした相対パスで指定してるの?
絶対パスにしても駄目ですか。

これとは関係ないか。
http://cssbug.at.infoseek.co.jp/detail/winie/b162.html
bodyにz-indexを指定すると子孫要素の背景指定が無視される(5.x/6.0)
100Name_Not_Found:04/07/20 23:19 ID:ITfxq/eZ
>>98
画像パスが違う、画像が無い、外部ファイルを参照できていない
101Name_Not_Found:04/07/21 03:41 ID:???
>>98
とりあえず外部じゃないスタイルシートからその画像は読めるのかい?

外部ファイルはHTMLと同じディレクトリにあるのかい?パスはCSSファイルのあるディレクトリからのパスだよ。
まあ、気長にいこうや
102Name_Not_Found:04/07/21 15:10 ID:???
Webサイト製作初心者質問スレから誘導されてまいりました。
よろしくお願いします。
環境はWin2K,IE6です。

<input type="text" disabled name="hoge" value="hogehoge" style="color:red">
上記のようにdisabled属性にした場合に
フォントの色がグレーで固定になってしまうのですが
この場合にフォントの色を指定する方法はありますでしょうか?

上のタグ内でdisabledを解除した場合は指定どおり赤になってくれるのですが・・・
103Name_Not_Found:04/07/21 15:16 ID:???
>>102
属性:Disabled
属性値:なし [CI]
必要性:省略可
説明:
選択項目の使用と選択を全て禁止します。 当属性が指定されているときは、ブラウザは一般的に グレー表示になるようです。属性値はありません。
104Name_Not_Found:04/07/21 15:20 ID:???
>>102
<input>で何をしたいんだい?
105102:04/07/21 15:21 ID:???
>>103
そうなんですか、残念ですが諦めます。
ありがとうございました。
106102:04/07/21 15:23 ID:???
>>104
他のページ(ポップアップさせた画面)から
そのテキストボックスの中身だけを入れ替えたいのですが
ユーザによる手入力の変更はさせたくないんです。

なんでJavaScriptで可変的に扱うラベルのような扱いで使いたいと思いまして・・・
107Name_Not_Found:04/07/21 15:30 ID:???
WinXP SP2 からポップアップが抑制できるのは知っているよな?
他の方法考えれ。
あと、せっかくネットを使っているんだから、検索しろ。
>>103も一発で出たぞ。
108Name_Not_Found:04/07/21 15:34 ID:???
>>102
<input type="text" name="hoge" value="hogehoge" style="color:red" onfocus="blur();">
109Name_Not_Found:04/07/21 15:53 ID:???
>>106
blurは覚えとけ
110102:04/07/21 16:02 ID:???
>>108の方法で出来ました。ありがとうございます。
複数の方が教えてくださったのか、わからないので一括で申し訳ありませんが
レス下さった皆様、本当にありがとうございました。

>>107
ネットではとほほ等のサイトやGoogleでいろいろ検索したつもりだったのですが
調べ方が甘かったみたいです。申し訳ありません。
111Name_Not_Found:04/07/21 16:07 ID:???
がんがれよ。
112Name_Not_Found:04/07/21 17:46 ID:???
ググルは・……
113Name_Not_Found:04/07/22 10:12 ID:???
スタイルシートの3つの数字方式のカラー指定を#******みたいな16進法方式のカラー指定に変換するにはどうすればいいですか?
114Name_Not_Found:04/07/22 10:39 ID:???
>>113
#f00 → #ff0000
#369 → #336699
のようにすれば良いだけ。
それとも自動で変換したいということ?
115113:04/07/22 11:25 ID:???
>>114
有難うございます!!それが私が知りたかった事の全てです。。

スタイルシート以前の問題だったのかもしれませんが、本当にどうも!!
116Name_Not_Found:04/07/22 12:35 ID:???
そんなことも知らなかったのかよ… orz
117Name_Not_Found:04/07/22 12:53 ID:???
>>116
そう言ってやるなよ。俺もそう思ったがな。
118Name_Not_Found:04/07/22 15:56 ID:???
□ (本文)

list-style-imageで指定した画像

この指定した画像と本文が平行に並ぶようにしたいのですが、
どうすればいいのでしょうか。というか可能でしょうか。
119Name_Not_Found:04/07/22 16:43 ID:???
borderについて質問です。

現在外部ファイルに
.1 {border-top: 1px solid #000;}
.2 {border-left: 1px solid #000;}
.3 {border-right: 1px solid #000;}
.4 {border-bottom: 1px solid #000;}
と記述した上で、目的の部分の上部にborderが欲しければclass="1"と書いて
右に欲しければ"3"、上と下に欲しければ"1 4"などとしています。
自分の環境のWIN98SE/IE6の互換モードでならこれで思った通りに表示されるのですが、
ドキュメントタイプをstrictに変更したり、NN7で見てみるとborderが表示されません。
自分なりに色々と記述を変えてみても表示されないまま、検索しても表示されない理由がわかりません。
どなたかお願いいたします。
120Name_Not_Found:04/07/22 16:51 ID:???
クラス名が数字だから
121Name_Not_Found:04/07/22 16:55 ID:???
>>118
意味がわからない。普通にやれば「平行」になるのでは。いまどんなソースになってるのか。

>>119
仕様書を見よう。
「識別子の先頭文字はハイフンや数字であってはならない。」
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/syndata.html#q4
http://hp.vector.co.jp/authors/VA022006/css/selector.html#class-selectors
122Name_Not_Found:04/07/22 17:00 ID:???
>>118 line-heightとbaselineの問題かな。
123Name_Not_Found:04/07/22 17:08 ID:???
>>121
118じゃないが、テキストよりも大きい画像で試してみたが平行にはならなかった。
リストマーカー周りにはバグが結構あるからダメかもしれない。
124Name_Not_Found:04/07/22 17:30 ID:???
>>123 ダメではないぞ。
li {vertical-align:bottom;}
cf.「vertical-alignプロパティとbaseline」
 http://www.mozilla.gr.jp/standards/webtips0018.html#c1_1
125Name_Not_Found:04/07/22 17:39 ID:???
テキストと画像が交わるの?
126119:04/07/22 17:41 ID:???
>>120-121
ありがとうございました。
クラス名だったんですね。後のborder部分のみ気にしてました。
名前を正しく変更したら、今までの悩みはなんだったのかってぐらいに
あっさりとしっかりと表示されました。質問してよかったです。
本当にありがとうございました。
127Name_Not_Found:04/07/22 17:44 ID:???
>>124
それでは画像の中心点とテキストの中心点の高さが同じにならないよ。
試してから言ってる?
128Name_Not_Found:04/07/22 17:47 ID:???
>>127
リスト画像と箇条書き本文の底辺は平行になる。
中心点なら、vertical-align:middle;か。
129Name_Not_Found:04/07/22 17:47 ID:???
>>124
li {vertical-align:middle;}じゃないのか?
130Name_Not_Found:04/07/22 17:51 ID:???
>>128-129
いや、それでもダメ。
ネスケ7.1、オペラ7.23、IE6のどれで見てもダメ。
131Name_Not_Found:04/07/22 17:52 ID:???
display:inline;でインライン要素にしたものに
padding
margin
border
width
を指定するのはvalidではありませんか?paddingくらいはokだとうれしいのですが
132Name_Not_Found:04/07/22 18:00 ID:???
>>130 画像の高さに合せてline-height値も調節しませう。
133Name_Not_Found:04/07/22 18:02 ID:???
>>131
指定してもいいが、インライン要素に適用できないものは効かないよ。
134131:04/07/22 18:05 ID:???
>>133
IE6とn7で確認してるので、間違った書き方でも適用されていて勘違いしちゃいそうだったので、
ここで聞けばインライン要素に使っていいプロパティかはっきりするなと思いました。
よかったらどれが、インラインに使うべきものではないものなのか教えてください。
135Name_Not_Found:04/07/22 18:06 ID:???
>>131
padding→わからん
margin→わからん
border→わからん
width→多分バツ

答えた意味ないかもorz
136Name_Not_Found:04/07/22 18:07 ID:???
>>134 なぜ自分で仕様書や解説(>>4)を見ないの。
137Name_Not_Found:04/07/22 18:13 ID:???
>>132
line-heightを入れたところオペラのみちゃんと中心に表示されました。
でもIE、ネスケはダメだった。
138Name_Not_Found:04/07/22 18:21 ID:???
139Name_Not_Found:04/07/22 18:34 ID:???
>>138
既に行ってました。
でもブラウザのバージョンアップ待ち以外の解決法は?
140Name_Not_Found:04/07/22 18:37 ID:???
>>134
padding→ok
margin→ok
border→ok
width→非置換インライン要素では×、置換インラインならok

俺って親切ぅ!
141Name_Not_Found:04/07/22 18:38 ID:???
CSSのクラス名の付け方で質問ですが

私の場合は、文字に赤を使う場合

.font-red 又は .font-red-body

のようにしています。しかし、上記が後から編集しやすいクラス名の
付け方かどうか疑問に感じています。もしかしたら
./font-ff0000とかにしないといけないのかもしれないし。

各ブラウザに依存せずに、他の人が見てもわかりやすく
編集しやすいクラス名の付け方を教えていただけないでしょうか?
142Name_Not_Found:04/07/22 19:01 ID:???
>>141
とりあえずは、まずここを読んでみて。
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html#class-selectors
143Name_Not_Found:04/07/22 19:03 ID:???
.font-red だろうが .font-ff0000 だろうがダメ。
だってソレ赤以外にしたいときクラス名変えなきゃだめでしょ?

言い古されてるけど、なんでその部分を赤くしたいのか。
強調の類なら em とか strong で事足りるし、それに更にクラス名振りたいなら
em.passion とか em.angry とか適当に、その em の意味合いでも付けとくといいんでない。
もし、強調だけどサイトのデザイン変更にあわせて青の太字にしたい
となってもこれなら問題ないでしょ
-----
というか、ぶっちゃけクラス名云々なんて自分が管理しやすいように出来ればいい
んであって、他の人とかましてやブラウザ依存とか関係なくね?
なんか勘違いなこといってたらすまん
144Name_Not_Found:04/07/22 19:16 ID:???
>>143
それ正解。
145141:04/07/22 19:44 ID:???
>>142
ありがとうございます。見てみます。

>>143
う〜ん、それなのですが、おっしゃっている意味が
いまいち、正解なのかどうか。。

というのも私が他者が作成したファイルのCSSは
em.*****というおっしゃる形式になっているのですが
そもそも”passion”ていうのが修正する側としてはわかりにくて。。

かといって、私のfont-redとするとおっしゃるように変更は利かないし
font01とかにしたらそのフォントが何の色か何を示すのかわからないし。。

こういうCSSのクラス名の効率化がいまいち、うまく出来ないんですよね。。
146141:04/07/22 19:51 ID:???
連投すみません。。
>>142を読み進めると、なんとなく>>143さんの言う事が
理解できたかも・・。

要はCSSで設定された見た目を重視するのではなく
”どういう目的で”そのCSSを使うのかを重視すると言うことですか。

だから、文字を赤くして目立たせようと思った場合
文字の色は関係なくて、”目立たせる”という事に視点をおけばいいと。

なるほど。なんとな〜く、わかるのですが、まだ正確に理解している
わけではないので、勉強します。ありがとうございました。
147118:04/07/22 20:02 ID:???
>>121-124
>>127-130
>>132
>>137

ありがとうございます。
148Name_Not_Found:04/07/22 20:18 ID:???
>>139
行ったなら、ブラウザ別に報告して下さいませんか。
149Name_Not_Found:04/07/22 21:05 ID:???
>>141
一番簡単なのはブロック毎にdivで括りidを振って、後はセレクタでやる。
そうすればクラス名はほとんど必要なくなる。

とりあえずお前はもっとHTML,CSSの基本を勉強してこい。テンプレサイトを全て熟読してから質問しろ。
150Name_Not_Found:04/07/22 22:59 ID:???
外部ファイルでCSSを作ったのですが
HTMLに反映されないのですが、なにか変な所があるのでしょうか。
*cssの方はちゃんとcss形式で保存してあります。
*HTMLのほうはHEADの部分に
<link rel="stylesheet" href="****(ファイル名).css" type="text/css" />
でリンクを張っています。
直接HTMLでスタイルシートを設定すると反映されるので、
何かリンクの方がおかしいのだと思います。
リンクのパスは合っているのですが、何処かおかしい所があるでしょうか?

もし分かった方がいて、ヒントなり教えていただければ嬉しいです。
初歩的な質問で、
自分で調べれば分かるようなことであればスルーしてください。
151Name_Not_Found:04/07/22 23:05 ID:???
>>150
ブラウザは何よ?

あり得る原因としては、外部シートとHTML文書の文字コードが異なるとか。
152Name_Not_Found:04/07/22 23:14 ID:???
>141
> .font-red 又は .font-red-body
class属性の属性値に-って使えたっけ?
153Name_Not_Found:04/07/22 23:15 ID:???
たいがい全角
154Name_Not_Found:04/07/22 23:25 ID:???
IEの最新版です。ネスケでも表示されませんでした。

>あり得る原因としては、外部シートとHTML文書の文字コードが異なるとか。
これは大丈夫そうです。

どうやら方法は間違ってないんですね。
自分のやり方が間違っている可能性が高そうなので
何かおかしい所がないかもう一度念入りにチェックしてみます。
どうもありがとうございました!
155Name_Not_Found:04/07/23 00:01 ID:???
>>152
使える

>>154
別のCSSファイルを指定して、反映されるか調べてみるとか。
156Name_Not_Found:04/07/23 00:16 ID:???
>>118
すっごい亀レスで申し訳ないが、
画像の上とかに空白部分を作ってすりあわせしているのは漏れだけ?
157Name_Not_Found:04/07/23 00:38 ID:???
外部スタイルシートというのを使いたいのですが
どこからダウンロードできますか?
158Name_Not_Found:04/07/23 01:25 ID:???
>>157
僕の肛門ぐらいつまらないです
159Name_Not_Found:04/07/23 01:27 ID:???
160Name_Not_Found:04/07/23 08:41 ID:???
僕の肛門はよく詰まります
161Name_Not_Found:04/07/23 08:44 ID:???
僕の肛門はよく締まります。
162Name_Not_Found:04/07/23 08:54 ID:???
ウホッ
163Name_Not_Found:04/07/23 12:33 ID:???
やらないか
164Name_Not_Found:04/07/23 13:02 ID:???
>>154
CSSファイルのなかみがなぜかHTMLだったりしない?
165Name_Not_Found:04/07/23 13:38 ID:???
>>154
どうせお前は馬鹿だから外部ファイルなのに
<style>タグとか使ってるんだろ?なあ?おい!ボケ!返事しろや!どうなんじゃ!

違うならとりあえず、外部ファイルに
body{background-color:#000;}
だけ書いて試してごらん。後環境は?ちゃんとうpしてあるのか?

俺って親切だろ?早くしろやボケ!
166Name_Not_Found:04/07/23 14:06 ID:???
>>165
オマイはいつもそうやって遅れてくるのか?
 可哀想な奴だ。
167Name_Not_Found:04/07/23 22:53 ID:???
>>166
馬鹿がきたせいでスレがとまった
168Name_Not_Found:04/07/23 23:53 ID:tPxOnGm2
質問させてください。

<table cellpadding="0" cellspacing="0" border="0" align="center">
↑のcellpadding="0" cellspacing="0" border="0" align="center"に当たるスタイルシートの記述を教えてください。

<table class="xxx">という形で↑を全てまとめたいのですが。

よろしくお願いします。
169Name_Not_Found:04/07/23 23:56 ID:???
>>168
なぜFAQを見ないのかな。>>5>>8だ。
「いままでの 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.jp/site/tips/page/p0037.html
170168:04/07/24 01:31 ID:???
>>169
ありがとうございます。
すみません…。見落としてました…。

cellspacingに相当するborder-collapse:separate;border-spacing:数値は
ネスケではきちんと対応してるみたいですが、IEでは表現できないみたいですね…。
171Name_Not_Found:04/07/24 12:56 ID:eLKJJLu+
body { width: 800px;text-align: left}
とした状態で背景画像を幅800px内の中央に表示するにはどうしたらよろしいでしょうか?

body {background-attachment: center;}としてもブラウザの中央になってしまいます。
また、背景画像がCGIにより生成されるものでサイズは不確定なため、px指定もできないんです。
172Name_Not_Found:04/07/24 13:31 ID:???
173Name_Not_Found:04/07/24 14:26 ID:Frdc0o4W
ページ全体に渡って、半角文字の場合は自動的にMS Gothicフォント。
全角文字の場合は自動的にMS P Gothicフォントにしたんですが、cssで設定できませんか?
174Name_Not_Found:04/07/24 14:49 ID:eLKJJLu+
>>172
>>4でも出来ないようなので諦めます。
175Name_Not_Found:04/07/24 14:54 ID:???
>>174
background プロパティも色々
176Name_Not_Found:04/07/24 14:55 ID:???
>>174
見てないだろ。
見ていればプロパティを勘違いしてることに気がつくはずだ。
177Name_Not_Found:04/07/24 15:02 ID:???
>>175-176
body{width:800px;text-align:left;
background-image: url("./aaaa.cgi");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;}
↑だとダメでした。

body{width:800px;text-align:left;}
#aaa{
background-image: url("./aaaa.cgi");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;}
<body><span id="aaa"></span></body>とかもやってみましたが、今度はfixedが効かないです。
178Name_Not_Found:04/07/24 15:27 ID:???
>>177
ダメって何がダメなの?別に変なところはないけど。
179173:04/07/24 17:01 ID:Frdc0o4W
放置プレイは慣れておりまする・・・
180Name_Not_Found:04/07/24 17:08 ID:???
>>179
ごめんね。
結論言うと(自動的には)出来ません

以上
181Name_Not_Found:04/07/24 17:19 ID:???
182Name_Not_Found:04/07/24 21:22 ID:???
div要素にalgin:centerを記入して(<div algin="center">)、
CSSでwidth:640px指定したら、中央に表示されなくなったんだけど。
なんで?
183Name_Not_Found:04/07/24 21:24 ID:???
>>182
align使うなよ(;´Д`)
184182:04/07/24 21:33 ID:???
>>183
駄目なの?
>>5のサイトではtransitionalで記述するならdiv要素のalign属性でcenterを指定しても、
文法的には問題無いって書いてあったけど。
185Name_Not_Found:04/07/24 21:36 ID:XU4UdUam
<div style="border:1px">
<img style="float:left;">
<h style="margin-left:210px">
<ul style="margin-left:210px">

画像が200×100px。divの下borderがulの高さで引かれるんだよね(モジラ)。
divにheightつけると文字サイズ変えられた時むごいことになるから
やむなくbrでクリア・・・すると余分なスペースが生じるから
結局は空divでクリア。

モジラの解釈が正しいということになっているが、どう考えても
上の例でdivがimgを内包しないのはおかしくないか。
divでimg挟んでいる以上、borderは画像も挟むべき。
現在のワケワカラン実装はだれも望んでいないと思う。
186Name_Not_Found:04/07/24 21:39 ID:???
>>185
俺望んでるよ!
187Name_Not_Found:04/07/24 23:12 ID:???
>>185
いつでも自分が正しいってか・・
188Name_Not_Found:04/07/25 00:49 ID:???
「俺は○○だと思うんだけど、お前はどう思う?」
「んー、よくわかんないけどお前の言ってることが正しいんじゃない?」

2/2=100%、よって誰も望んでいない、って論理だろ。
2/2じゃなく3/3とかかも知れないけど。
189Name_Not_Found:04/07/25 01:50 ID:???
>>185
それは俺も思った。strict+cssでやってるけど、初めのころはそれがうざかった。

>>186-188
あれってなんであーいう仕様になってるの?なんか必要性があってのことだよね?
便利なことがあるのか?
190Name_Not_Found:04/07/25 03:02 ID:???
floatの仕様にケチ付けてる様でその実divのborder-bottomがfloatさせたimgの下に来て欲しいんでしょ?
divにmin-heightでも使っとけ
191Name_Not_Found:04/07/25 04:21 ID:???
>>190
何の利点があってあの仕様なのかを問われてる
192Name_Not_Found:04/07/25 06:24 ID:???
ムカついて仕様に文句言ってるようにしか見えん
俺も自分の思うように行かない時にあったよ「なんでこんな糞仕様なんだよゴルァ〜」ってw

利点以前に、あの仕様がCSSのfloatってものなんだよね
193Name_Not_Found:04/07/25 06:27 ID:???
あえて利点と言って挙げるなら後続要素がフロートしてる要素の横に流し込まれるとこでしょ
いやまさにfloatの仕様そのものだけどさ
逆に>>185の望んでることの利点はなんだよ
194Name_Not_Found:04/07/25 09:08 ID:???
>後続要素がフロートしてる要素の横に流し込まれるとこ

それだったら、divを親要素にして囲う必要はないわけだが。
195Name_Not_Found:04/07/25 10:25 ID:???
下手な解説はいいから、次いってみよう。
196Name_Not_Found:04/07/25 12:30 ID:???
cellspacing="1" cellpadding="2" はCSSではどう書けば?
197Name_Not_Found:04/07/25 12:37 ID:???
198Name_Not_Found:04/07/25 13:21 ID:???
>>194
それは>>185に言えや

結局>>185が”使えてない”だけかと
199:04/07/25 13:40 ID:???
 粘着
200Name_Not_Found:04/07/25 14:38 ID:???
さぁ次の質問どうぞ
201Name_Not_Found:04/07/25 14:49 ID:???
>>192-193

>上の例でdivがimgを内包しないのはおかしくないか。
>divでimg挟んでいる以上、borderは画像も挟むべき。

何が問われてるかもわからずに、発言するのはヤメレ
202Name_Not_Found:04/07/25 15:32 ID:???
オマイ、アホだろ?
203Name_Not_Found:04/07/25 15:36 ID:???
はい、仕様です。
204Name_Not_Found:04/07/25 16:20 ID:???
※ 議論はよそで ※
205Name_Not_Found:04/07/25 16:24 ID:???
はい、このスレッドの仕様ですね。
206Name_Not_Found:04/07/25 16:26 ID:???
cellspacing,cellpadding なんて非推奨でもなんでも無いんだからそのまま使えばいいじゃん
207Name_Not_Found:04/07/25 16:32 ID:???
>>202-203
アフォ?何の利があってその仕様になってるのかを問われてるんだよ。
208Name_Not_Found:04/07/25 17:05 ID:???
209Name_Not_Found:04/07/25 17:35 ID:???
>>208
divのborder-bottomは後続要素じゃなくて親要素になる。
親要素にまでfloat利かせる利点は何なんだろうか?と思うけどみんなは思わないの?
210Name_Not_Found:04/07/25 17:51 ID:???
フロートしたボックスは他のブロックの形状に直接的には影響を与えない
と言う原則に従うとそうなると言うだけの事であって
利点のあるなしで仕様が決められている訳じゃない。

逆に、フロートしたボックスの親のブロックだけ
例外的に影響を受けると言うルールを決めれば>>185の思う通りになるが
何の留意も無く原則に例外を設けるのはそれだけでデメリットになる。

そして、その留意を与える為のプロパティはCSS3で策定中。
http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-clear-after
211Name_Not_Found:04/07/25 17:52 ID:???
>>209
>divのborder-bottomは後続要素じゃなくて親要素になる。
語弊があるので訂正。
親要素のborder。floatが親要素に影響を与える仕様なのは何故なのかってことで。
212Name_Not_Found:04/07/25 17:54 ID:???
>>210
>フロートしたボックスは他のブロックの形状に直接的には影響を与えない
>と言う原則に従うとそうなると言うだけの事であって
?なぜその原則が、子要素に指定したfloatが親要素に影響を与えるってことになるの?
213Name_Not_Found:04/07/25 18:27 ID:???
>>212

「親要素に影響を与える」と言う表現が何を差すのかが不明。
具体的なコードなり図なりを出せる?
214Name_Not_Found:04/07/25 18:45 ID:???
>>213
<div style="border:1px solid #000; width:500px ;">
<img width=300 height=300 style="float:left;">
<p style="width:200px ; float:left;">あいうえお</p>
</div>

これをレンダリングしたときに、divのborder-bottomにまでimgに指定したfloat:leftが
影響して、border-bottomの位置がimgの下ではなくて、pの下=imgの途中になるってこと。
今のとここのレンダリングが仕様通りの正しいものと言われてるみたい。

>>213
ところで何の話だと思って答えてたの?
215Name_Not_Found:04/07/25 18:48 ID:???
>>214
それ、影響を与えてないじゃん。
216Name_Not_Found:04/07/25 18:58 ID:???
>>215
floatしなければちゃんとimgの大きさに合わせてdivの大きさが変わるけど、
floatするとimg要素が大きくなってもdivの大きさが変わらない。

影響を与えてると言えるよ。
217Name_Not_Found:04/07/25 18:59 ID:???
>>216
「影響を与える」からそうなるんじゃなくて、「影響を与えない」からそうなるんだよ。
218Name_Not_Found:04/07/25 19:02 ID:???
>>214
浮動体は通常フローに属していないので、その前後に生成される位置指定されていないブロックボックスは、浮動体が存在しないかのように流し込まれる。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#floats
219Name_Not_Found:04/07/25 19:03 ID:???
>>217
<br style="clear:both">を</div>の直前に入れるとimgの大きさがちゃんと反映されるのに
影響を与えてないの?

divのborder-bottomまでimgに回り込んでると思うんだけど、それは違うってことかな?
220Name_Not_Found:04/07/25 19:07 ID:???
10. 視覚整形モデル詳細
 6.内容領域の高さと垂直方向のマージンを計算する
  3.通常フローにある非置換ブロック要素、非置換浮動要素の場合
通常フローにある子供要素のみを考える(つまり、浮動ボックスや絶対配置のボックスは無視して、
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#q17
221Name_Not_Found:04/07/25 19:11 ID:???
>>219
それはimgの高さが反映されたのではない。
divの子要素であるbrの高さが反映されたのだ。
floatされた子要素は無視され、存在しない如く親要素の高さが計算される。
222Name_Not_Found:04/07/25 19:13 ID:???
>>219
あのね、>>214のソースでdiv {padding-top:400px;}とでも指定すればわかるよ。
223Name_Not_Found:04/07/25 19:15 ID:???
ええと、返事書いているうちに他の人が説明してくれたので省くけど、

>>214

そのコード、間違っていないか?
実際にFirefoxにレンダリングさせるとimgもpもfloatさせているから
divの高さはゼロになるが。
224Name_Not_Found:04/07/25 19:29 ID:???
一応理解できた。ボックスの高さの計算方法のせいなのね。
214のソース激しく間違ってた。

今の俺にはまだわからないけど、浮動要素を高さの計算に入れないのはやっぱりそれなりの理由があるのかな?
225Name_Not_Found:04/07/25 19:39 ID:???
浮動要素は浮動するものだから。>>224
226Name_Not_Found:04/07/25 19:52 ID:???
div:after
{
display: block;
content: "";
height: 0;
clear: left;
}

brは嫌だと言う人に。
227Name_Not_Found:04/07/25 20:12 ID:???
>>226
height: 0;は必要ないな。

IE以外では空のブロックは通常高さ0。
IEは:afterなんて理解しないので関係ないし。
228Name_Not_Found:04/07/25 20:21 ID:???
質問者が引いてるのもかまわず、オナニーかい? >ALL
229Name_Not_Found:04/07/25 20:38 ID:???
>>224

floatプロパティは<p>が段落の区切りを表すタグだった頃の
Netscapeの拡張した<img align="〜">を再現するのが目的だった訳で、
CSSのボックスモデルの中でNetscapeの挙動を再現しようとしたら
必然的にそう言うルールになったんだろう。
230:04/07/25 20:42 ID:???
大アホ
231Name_Not_Found:04/07/25 21:25 ID:???

 あれぇ?
232Name_Not_Found:04/07/25 21:35 ID:???
ふふふ…
233Name_Not_Found:04/07/25 21:38 ID:???
へへへ・・・
234Name_Not_Found:04/07/25 22:00 ID:???
>通常フローにある子供要素のみを考える(つまり、浮動ボックスや絶対配置のボックスは無視して

そういうデザインはレアなケースと思うがな。
結局みんなクリアしてるわけでしょ。
マジョリティーの体感にあえて反抗して
妙な仕様に小理屈をつけて強弁するから
W3Cはヲタ集団と呼ばれる。
235Name_Not_Found:04/07/25 22:29 ID:???
ハゲワラ
236Name_Not_Found:04/07/25 22:57 ID:Y46P+zJJ
もういいよ
237Name_Not_Found:04/07/25 23:46 ID:???
IE以外のブラウザが存在する事も知らない人の集うスレはここですか(wwwww核爆)
238Name_Not_Found:04/07/26 00:28 ID:???
IE以外の糞ブラウザを使っている人が煽るスレッドは、ここですか(超新星爆発)
239Name_Not_Found:04/07/26 00:33 ID:???
中学校はもう夏休みですか?
240Name_Not_Found:04/07/26 01:21 ID:???
>>239
小学生の女の子じゃないか?
241Name_Not_Found:04/07/26 01:42 ID:???
仕 様 を 疑 う な
242Name_Not_Found:04/07/26 02:49 ID:???
質問です。
ttp://sound.jp/mono_chrome/products/num1000_basmix.html
このページのように、Flashをブラウザのど真ん中に表示させるには
CSSでどのようにすればいいのでしょうか?よろしくお願いいたします。
243Name_Not_Found:04/07/26 03:25 ID:???
>>241
かわいそうに
244Name_Not_Found:04/07/26 03:40 ID:???
>>242
テンプレのQ2,Q6を読んで下さい。
245Name_Not_Found:04/07/26 05:51 ID:???
<Div Align="center"> を外部にしたいのですが、どうすればいいですか?
246Name_Not_Found:04/07/26 06:04 ID:???
247Name_Not_Found:04/07/26 06:06 ID:???
外部で、指定したいのです。
248Name_Not_Found:04/07/26 06:35 ID:???
あ、もういいです
249Name_Not_Found:04/07/26 09:38 ID:fK/rvrZ6
marginプロパティはインライン要素にも適用できるはずだけど、
display:inline;にすると上下マージンは無効になるんですか。

h1 {
display:inline;
border: 0.5em solid #999;
border-width:0 0.3em;
margin:1em 0;
padding:0.2em;
}
<body>
<div>ヘッダ</div>
<h1>見出し</h1>
<div>IE6とNN7で確認。</div>
</body>
250Name_Not_Found:04/07/26 10:38 ID:???
ブロックレベル要素とインライン要素の比較
http://www.mozilla.gr.jp/standards/webtips0015.html#c1_4
上下のマージン(margin)  無視され、レイアウトに影響は無い

インライン要素に上下marginは適用されるけど無視されるってことらしい。
それって適用されないのと同じではないのか。
仕様書見たけど、無視すると書いてある箇所が見つけられない……。
何で無視されるのかわかるひと、ご教示下さい。
251Name_Not_Found:04/07/26 11:59 ID:???
_____
|    |
|    |
| 画像 |文字○○○○○○
|    |
|    |
 ̄ ̄ ̄ ̄ ̄
_____
|    |
|    |
| 画像 |
|    |
|    |文字○○○○○○
 ̄ ̄ ̄ ̄ ̄
↑のように、スタイルシートを使って、例えば画像にfloat:left等を使って画像の横に文字を配置する時、画像の高さの真中や画像の高さの下のラインに合わせて文字を配置したい場合は、どのようにスタイル指定すればよいのでしょうか??
252Name_Not_Found:04/07/26 12:06 ID:???
>>251
画像はインライン要素なんだから、floatしなくても文字は横に続くだろ?

img {vertical-align:middle;}
<p><img src="〜.gif" alt="画像">文字○○○○○○</p>
253Name_Not_Found:04/07/26 12:18 ID:???
>>249-250
なんで上下マージンが無視されるかはわからないけど、
そのインラインにした場合のマージンに相当する隙間は、line-heightで指定できる。
h1 {
display:inline;
line-height:3.0;
}

cf. 10.8 行の高さを計算する
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#line-height
254Name_Not_Found:04/07/26 12:23 ID:???
なぜインライン要素の上下マージンが実質無いのかと言えば行の高さに統一性がなくなるから
255Name_Not_Found:04/07/26 12:27 ID:???
>>254
まあ理窟はわかるんだけど、そのこと仕様書にもどこか書いてあったっけ?
256251:04/07/26 12:34 ID:???
>>252
<p><img style="vertical-align:middle">文字○○○○○○<br>文字○○○○○○</p>
↑とした場合、文字の途中で改行<br>を入れたいのですが、これで改行を入れてしまうと改行を入れた後の行は、画像の下にきてしまうじゃないですか?これをふせぎたいのが、その際どう指定すればいいのかわからないんです。。
257Name_Not_Found:04/07/26 12:47 ID:???
>>256
その改行が段落変更の意味なら、brでなくpを使ってね。
CSSよりマークアップの問題が大きいな。
imgにはheightがあるはずだから、画像の高さの真中に合せるなら
そのheightの半分の値を後続要素のmargin-topに指定すればよいのでは。
258251:04/07/26 12:56 ID:???
>>257
_____
|    |
|    |
| 画像 |文字○○○○○○
|    |○○○○○○
|    |
 ̄ ̄ ̄ ̄ ̄
段落変更とかじゃなく、↑のようにしたいんですよ。
極端な話、、、
<table>
<tr>
<td><img></td>
<td valign=middle>文字<br>文字</td>
</tr>
</table>
TABLEレイアウトでは簡単にできるようなことをCSSでやりたいわけで。
259Name_Not_Found:04/07/26 13:10 ID:???
>>258
その画像と文字との意味によってマークアップが変ってくるんだけど。
もしそれが画像と文字との列から成る表なら、表としてtableのままでよいわけだし。
或る幅でひとつづきの文字列を折り返したいのなら、
brで強制改行せずwidthでその一連の行の横幅を指定すべき。
別の行にするならpとか、箇条書きならliとか。
260Name_Not_Found:04/07/26 13:12 ID:???
テーブルレイアウトはしたくない、でも無意味な改行はしたい、という所で矛盾が発生している事に気付かないと堂々巡り
261Name_Not_Found:04/07/26 13:27 ID:???
やや強引だけど、これでできない?
.abc img, .abc p {vertical-align:middle;}
.abc p {display:inline;}
<div class="abc">
<img alt="画像" width="50" height="100" src="xyz">
<p>画像の説明文〜〜〜〜〜〜〜〜〜〜〜〜〜〜</p>
</div>
262Name_Not_Found:04/07/26 13:28 ID:???
>>255
うーん、あえて言うならここかなぁ
10.6 高さ及びマージンの計算
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#Computing_heights_and_margins の
> 10.6.1 行内非置換要素
> 'top','bottom','margin-top'又は'margin-bottom'が'auto'である場合,計算値は0とする。'height'特性は適用されないが,ボックスの高さは'line-height'特性によって与えられる。

「ボックスの高さ」つーのは基本として'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom'
であるようにマージンも含めてボックスの高さになるからline-heightがボックスの高さを決める以上、上下マージンを指定しても意味がないってことじゃ?

ちなみにline-heightを明示しない場合は line-htight:normal が適用され、それは
>要素のフォントサイズに基づく"適切な"値に設定する
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#propdef-line-height
263251:04/07/26 13:28 ID:???
>>259
widthでその一連の行の横幅を指定すべき…
<そうしたいんですが、その場合、文字列をブロック要素化しないとダメですよね?
するとimgもブロック化してブロック要素を横並びにして配置(float:leftなりtop:--;left:--;で位置指定して横に並べる)するとなったら、そのブロック化した中の文字列を画像の高さの真中に持ってくる指定ってありますかー??
264Name_Not_Found:04/07/26 13:31 ID:???
>>262
>'margin-top'又は'margin-bottom'が'auto'である場合
でも>>249-250の場合は、autoでなくて明示した場合に無効なんでしょ。
265Name_Not_Found:04/07/26 13:33 ID:???
>>263
画像のheightの半分の値を後続ブロック要素のpadding-topに指定すればよいのでは。
266Name_Not_Found:04/07/26 13:43 ID:???
>>264
いや、display:inlineのボックス高さはline-heightでしかないってことだと思うよ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head><title>inline要素への上下マージンの適用</title>
<style type="text/css">
p {border: 1px solid red;}
span {
border: 1px solid blue;
line-height:3em;
}
</style>
<body>
<p><span>test test test</span></p>
</body></html>
このソースを表示してみるとspanのボーダー外に*marginのようなもの*が実際取られるわけだし。
>'margin-top'又は'margin-bottom'が'auto'である場合,計算値は0とする
と書かれてるけど、marginを行の高さに使うとは書いてない。書いてない以上使わないってことだと思うが
267Name_Not_Found:04/07/26 13:51 ID:???
>>266
>marginを行の高さに使うとは書いてない。書いてない以上使わないってことだと思うが

それはちょっと苦しい説明かも。
だって
「10.6.3 通常のフローにあるブロックレベル非置換要素及び浮動非置換要素」にも
「……'margin-top'又は'margin-bottom'が'auto'である場合」とあって
marginを行の高さに使うとは書いてないから。
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q17
でもブロックレベル要素ではmarginを高さに使用するでしょ?

仕様書も、なんで明記してないのかなあ。
268251:04/07/26 13:56 ID:???
>>265
ちょっと理解出来ないのですが、、
<div>
<img src="xxx.gif" width="200" height="280">
<p>文字○○○○<br>○○○○</p>
<p style="padding-top:140px;">○○○○○○○○○○○○</p>
</div>
ってことですか??これだとぜんぜんできないのですが。。何か指定が抜けてますか??
ちなみにbrで改行する理由は、その文字列が写真のタイトルで、文字の意味合い、見栄え的に、クラが途中で改行をいれて2行にしてほしいといってくるからです。
269Name_Not_Found:04/07/26 14:01 ID:???
>>268
あれ、imgにfloat:left;を指定してるのではなかったの?
何ですぐ後続のpではなくその次のpなんかにpadding-topを指定してるの?
しかもpを二つにした割に、相変らずbr使ってるし。
そもそもインライン・スタイルシートにするのは感心しないな。
270251:04/07/26 14:13 ID:???
>>269
あ、意味不明な勘違いしてました。↓ってことですよね??
<div>
<img style="float:left;" src="xxx.gif" width="200" height="280">
<p style="padding-top:140px;">○○○<br>○○○</p>
<p style="clear:both">○○○</p>
</div>
これで一応レイアウトはできました。ありがとーございます。ちなみにbr使うのはいけないんですか??
あと、TABLEのようなレイアウトはやっぱこんな感じに記述していくのがよいのでしょうか??
TABLEはどーもレイアウトには奨励されてないようで。。
271Name_Not_Found:04/07/26 14:15 ID:???
>>267
けれども
>ボックスの高さは'line-height'特性によって与えられる。
と明記されてるからOKなんじゃ?
インライン要素の高さは絶対確定する仕様なわけだし
上下marginの取り扱いに関しては書いてないけど

下手な例だけどある人間の性別を決める時(要素の高さを決める時)に状況Aでは(要素がブロックな場合は)アソコの形で判断するけど
また別の状況Bでは(要素がインラインな場合は)外見で判断するってルールがあったとして
状況Bにおいて「アソコの形は見なくていいんですか?」って言ってるようなものなんじゃないかな
272Name_Not_Found:04/07/26 14:20 ID:???
>>270は、FAQ、特に>>6のリンク先を熟読して下さい。
また、既に>>259も述べた通り、それが表であるなら無理にtableを廃さなくてもよい。
あと、タグの中にstyle属性で書くインライン・スタイルシートではなく
<style>タグか、できれば外部スタイルシートにしようね。
273Name_Not_Found:04/07/26 14:21 ID:???
検証用は別にインラインスタイルシートでかまわんだろう。
本気で全部インラインでやろうとしたらどのみちすぐ詰まるし。
274Name_Not_Found:04/07/26 14:29 ID:???
>>271
>下手な例だけど
その例では外見による判断とアソコの形による判断とが、一致する場合と矛盾する場合とがあるね。
それに前者の判断は後者の判断を排除しない。だから特に触れなくてもよい。
しかし、いまの上下margin指定のあるインライン要素の場合では、
line-heightによる高さ算出は、marginの高さへの算入を、*必ず*排除する。
こんな場合にはやはり明記した方がよいかと。
275Name_Not_Found:04/07/26 14:32 ID:???
>TABLEはどーもレイアウトには奨励されてないようで。。

奨励とかそういう問題ではないですよ。
tableはあくまでも表をあらわす場合に使うものなので、そもそも用途が違うわけです。

カッターナイフを使うべき作業に包丁を用いるようなものです。
276Name_Not_Found:04/07/26 14:39 ID:???
>>274
ゴメン、ほんと下手な例だったね

仕様書に「インライン要素の高さの算出に上下marginは使わないんですか?」と聞いても
「インライン要素の高さはline-heightで決定します」としか返ってこない状態だね

俺もたまに仕様書の表現が気に食わないことはあるよ
277Name_Not_Found:04/07/26 14:43 ID:???
marginはあらゆる要素に適用可能と書いてあるだけに、猶更わかりにくいよね。>>276
278Name_Not_Found:04/07/26 14:49 ID:???
ん、まぁもう気にしても疲れるだけだからな
細かいとこは体で覚えるしかないな
279Name_Not_Found:04/07/26 14:56 ID:???
インライン要素への上下margin指定は無効。
このこと、意外にCSS解説サイトなんかでも書いてないんだよな。
280Name_Not_Found:04/07/26 15:26 ID:???
まぁ、書くまでも無いようなことだからなんだろうけどね
281Name_Not_Found:04/07/26 18:18 ID:???
質問です。複数のページに外部ファイルスタイルシートを読み込ませることにしました。
例えばhoge.cssをA、B、Cのページに読み込ませるとします。
hoge.cssには5つの要素への設定が記述してあり
Aページでは1、2、3
Bページでは2、3
Cページでは3、4、5
の要素への設定があります。
しかしAページでは”4、5”、Bでは”1、4、5”、Cでは”1、2”の記述がなく
それらは意味がありません。
こういう場合、何か問題はないのでしょうか?
また別々のファイルにするべきでしょうか?
教えてください。
282Name_Not_Found:04/07/26 18:24 ID:???
>>281
全く問題なし
気にせずガンガレ
283281:04/07/26 18:25 ID:???
>>282
安心しました。ありがとうございます。
がんがります(`・ω・´)
284Name_Not_Found:04/07/26 20:57 ID:???
Firefox0.8で
font-family: "MS Gothic" sans-serif;
と指定すると、認識してくれないようです。
font-family: "MS ゴシック", sans-serif;
と指定した場合は認識してくれるようなのですが、
「MS Gothic」で認識してくれるブラウザはWinIEだけなのでしょうか?
285Name_Not_Found:04/07/26 21:47 ID:???
"MS Gothic"の後にカンマが抜けているという話ではなくて?
286284:04/07/26 22:12 ID:???
>285 うっかりカンマを削ってしまったようです。すみません。
font-family: "MS Gothic", sans-serif;
と指定してもMSPゴシックで表示されたので、
おそらくsans-serifが適用されているのだろうと思います。
ブラウザの設定も見直しましたが、やはり同じ結果になります。
「MS ゴシック」と指定したときは、MSゴシックで表示されました。
287Name_Not_Found:04/07/26 22:33 ID:???
本当にフォントが入っているかどうかGeneral(全般)のFont & Colorでどれか選択して出てくるフォント一覧を見てみろ。
MS Gothicがなかったら代替フォントで表示されるのが当たり前。
大抵はMS ゴシックしか入ってない。
288Name_Not_Found:04/07/27 06:34 ID:???
background:url(img/hoge.gif) no-repeat 88% center;

これがネスケ7では効かないが何でかね? right center にすれば表示されるけど、
何故にネスケ7はパーセントをサポしなかったのなかね?どなたかご存知の方おるかね?
289Name_Not_Found:04/07/27 07:04 ID:???
>>288
%やpxなどの数値での指定と文字列での指定は混在できない
という仕様を厳密に解釈しているだけ。
background:url(img/hoge.png) no-repeat 88% 50%;
とかならOKなはず。
290Name_Not_Found:04/07/27 11:12 ID:???
口調が馬鹿っぽい>>288
291Name_Not_Found:04/07/27 11:28 ID:???
発想が馬鹿っぽい>>290
292Name_Not_Found:04/07/27 11:43 ID:???
煽りが馬鹿っぽい>>291
293Name_Not_Found:04/07/27 11:49 ID:???
imgタグをaタグで囲んだものは、ブロック要素と言えますか?
294Name_Not_Found:04/07/27 12:16 ID:???
>>293
禿げ上がるほどにインライン要素。
295Name_Not_Found:04/07/27 12:29 ID:???
>>293
ブロック要素の意味を調べてから質問しれ
296Name_Not_Found:04/07/27 12:35 ID:???
>>294
もう禿げてる。
297Name_Not_Found:04/07/27 13:21 ID:???
>>296
ジダン型?
マヌエル・パブロ型?
298Name_Not_Found:04/07/27 13:28 ID:???
そんなすごい勢いで食いつくなよ
299Name_Not_Found:04/07/27 14:20 ID:r8TA/13M
背景画像について質問があります。

background-repeat:repeat-x;
と記述すると、ページの一番上のところに
同じ画像が横に並びますが、
これをページの一番下のところで横に並ばせるには
どう記述すれば良いのでしょうか。
300Name_Not_Found:04/07/27 14:23 ID:???
background-position
301Name_Not_Found:04/07/27 14:28 ID:???
>297
川上憲伸型
302Name_Not_Found:04/07/27 14:33 ID:r8TA/13M
>>300
できました、ありがとうございます
303Name_Not_Found:04/07/27 15:24 ID:???
>>297
お茶の水博士だよ。
304Name_Not_Found:04/07/27 21:44 ID:SttUIMbG
現在、ホームページを作ってる最中なんですが、
<span style="background-color: #ffffff;"><font size="2" color="#000000"><b>管理人</b></font></span><br>
<font size="2">モナー</font><br><br>
<span style="background-color: #ffffff;"><font size="2" color="#000000"><b>メニュー</b></font></span><br>
<font size="2">2ちゃんねる<br>日記</font><br><br>
ってタグになってて、

 管理人
 モナー

 メニュー
 2ちゃんねる
 日記

って表示されてます。
ここを、

管理人
 モナー

メニュー
 2ちゃんねる
 日記

って感じで管理人と、サイト名の部分を少し前にずらすにはどうしたら良いんでしょうか…。
あと、外部スタイルシートに記述しようと思うんですが、管理人とサイト名に付属するタグをどうやったら短く記述出来るのか分かりません…。
305Name_Not_Found:04/07/27 21:51 ID:???
<dl>
<dt>管理人</dt>
<dd>モナー </dd>
<dt>メニュー </dt>
<dd>2ちゃんねる<br>日記 </dd>
</dl>
これでどう
306Name_Not_Found:04/07/27 21:57 ID:???
>304
htmlをもっと勉強しる
307Name_Not_Found:04/07/27 21:59 ID:SttUIMbG
>>305
さっそくコピペして表示させてみたんですが、
これだと管理人とメニューが前に出過ぎてました。
飛び出す長さを自分で調整したいんです。(pxとかemとか…)
あと、text-indent: -10pxとかやってみたんですが、
管理人の部分は成功しましたが、メニューやその後に続くやつが失敗しました…。
308Name_Not_Found:04/07/27 21:59 ID:???
CSS使うならfontタグなんて使うなよ
309Name_Not_Found:04/07/27 22:00 ID:???
>>307
margin-left: 1em;
310Name_Not_Found:04/07/27 22:06 ID:???
>>307
>>305のようにするのならCSSは、

dl{
  font-size:任意;
}

dt{
  font-weight:bold;
  display:inline;
  background:#fff;
}

dd{margin-left:1.0em;}
311Name_Not_Found:04/07/27 22:10 ID:SttUIMbG
>>309
<span style="background-color: #ccffcc; margin-left: 1em;">
ってやってみましたが、変化無かったです…。
この前に<DIV class=menu id=menu>ってやってるのが問題なんだろうか…。
フレームみたく左にメニュー欄、右に日記とかを表示するようにfloatで段組してます。
ちなみに外部cssのmenu部分は
#menu {
BACKGROUND: #fcfcfc;
FLOAT: left;
WIDTH: 25%;
line-height: 1.1em;
padding-left: 20px;
}
こうなってます…。
312Name_Not_Found:04/07/27 22:12 ID:???
>>311
馬鹿かお前は
313Name_Not_Found:04/07/27 22:15 ID:???
>>310さんのやり方で出来るようになりました。
ありがとうございました。
314Name_Not_Found:04/07/27 23:55 ID:VKcQPotx
<float: left;>の後に<clear: left;>を指定した要素に
<margin-top:>を指定しても余白が取れないのですが、
なぜでしょうか?
315Name_Not_Found:04/07/28 00:00 ID:???
>>314
浮動要素のheight+marginを取らないとだめ。
316314:04/07/28 00:28 ID:vMnBgGBm
>>315
どうやって取るんですか?
317Name_Not_Found:04/07/28 03:44 ID:???
質問ですm(_ _)m
現在作成中のサイトがあるのですが、
例えばメールフォーム等のように、ブラウザの上から下までビッシリ詰まるようなレイアウトでは無い場合、

<div style="position: relative; top: ○○%;">

・(この間に全体のレイアウトを収める)

</div>

のような感じで、全体を若干下げたりしています。
この場合、IE6とNN7.1では意図したように表示されますが、
Mozilla1.7.1とOperaでは反映出来ないようです。(この4つのブラウザしか試していません)
パーセントではなく、ピクセル単位などで指定すれば反映されますが、
それだと、モニターの解像度によっては下に行き過ぎたりしますし・・・。

他の方はどのようにしてます?
上手く反映させる方法ってあるでしょうか。
MozillaやOperaが%に対応してないだけなのかな・・・。
318Name_Not_Found:04/07/28 08:08 ID:???
body {margin-top:**%;}
319Name_Not_Found:04/07/28 08:23 ID:???
>>318
無理。
確認せずに適当に答えないこと
320Name_Not_Found:04/07/28 08:48 ID:???
NN7.1とMozilla1.7.1は同系。そんなに異なるはずがない。>>317
321Name_Not_Found:04/07/28 08:52 ID:???
>>319 無理ではない。body {padding-top:**%;}でも良い。
322Name_Not_Found:04/07/28 09:07 ID:???
>MozillaやOperaが%に対応してないだけなのかな・・・。
対応表、見てないの?
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/visualren.html#position
しかし、そもそも>>317はなんで相対指定なんか使ってるんだか。
323319:04/07/28 09:38 ID:???
>>321
すまん。そしてありがd

margin : **.**,**,**; と指定して反応なし=無理と決め付けた俺が池沼orz

正しいCSSを学ぶ旅に出ることにする○几
324Name_Not_Found:04/07/28 10:14 ID:wsbahfZy
質問です!
CSSで背景を設定したんですが、表示されません。
ちなみにその設定はhead内に入れました。他の設定は外部ファイルからです。
(それがいけないんでしょうか?)
それも、オフラインだと表示出来たんですが、FTPでアップした時に表示されなくなりました。
どなたか分かりませんか?
325Name_Not_Found:04/07/28 10:29 ID:Sy8MHy7O
スタイルシートをゴーライブのソフト内で最大化表示してしまったんですが元に戻りません。ソフト閉じるしかないんでしょうか?
326Name_Not_Found:04/07/28 10:33 ID:???
>324-325
●基礎は解説サイト(>>4・かなりわかりやすい)で勉強してください。
327Name_Not_Found:04/07/28 10:35 ID:???
>>324
>オフラインだと表示出来たんですが、FTPでアップした時に表示されなくなりました。

おそらく禿げ上がるほどの既出ネタ?
君が置いたサーバーが外部読み込みを禁止しているので表示されない可能性大。

「オフライン時に表示」できたということだけど、
それは単に「キャッシュ」が残ってただけなのではないでしょうか。

#外部ファイルの意味が外部のサーバーという意味ならの話だけど。


その前に力技で<BODY>に直接背景をぶち込んでみて確認してみそ。
ダメなら外部読み込み禁止。オッケーの場合はCSSの記述ミスだと思う。
328324:04/07/28 11:38 ID:wsbahfZy
ありがとうございました!
なんとかなりました
329Name_Not_Found:04/07/28 12:02 ID:odgUQe2m
様々な環境に配慮して、どんなユーザーでも使いやすい方法で提供されている情報はアクセシビリティ
(accessibility) が高いと言います。アクセシブルなコンテンツづくりとは、ウェブでのコミュニケーシ
ョンに誰もが参加できるよう設計すること。情報の利用者であると同時に提供者でもある私たちは、常
にこの点に配慮していきたいものです。
330329:04/07/28 12:03 ID:???
誤爆スマヌ
331Name_Not_Found:04/07/28 12:05 ID:???
ものすごく丁寧な誤爆に萌えた。

いったいどこのスレなのかが気になる。
332Name_Not_Found:04/07/28 12:33 ID:???
>>328
原因はなんだったのさ?
333Name_Not_Found:04/07/28 12:44 ID:???
>331
@media:all { 真のアクセシビリティ }
http://pc5.2ch.net/test/read.cgi/hp/1034270272/
と予想
334@import_Wakaran:04/07/28 12:51 ID:vjhrhLCP
@importを読み込まないブラウザがあるのでしょうか?
IE6.0(OSはWin2000SP4)
Opera 7.23
Netscape 7.1
は正常に読み込んで反映するのですが、
Safari1.2 IE6.0(知人のノート、OSはXP)などでは@importで指定したcssファイルを読み込んでくれません。
ブラウザのバグ?それとも記述ミス?

−−−以下ソース−−−これをhtmから外部リンクしています。
@charaset "iso-2022-jp";
@import url("./base.css");

UL {
width: 450px;
}

LI {
padding: 2px
}

.honbun {
width: 450px;
background-color: #FFDFEF
}

#logo {
position: relative;
left: 20px;
}
335Name_Not_Found:04/07/28 13:42 ID:???
WindowsとMac OSのメジャーなブラウザそれぞれで、どのような@importルールの記述法をサポートしているのかを○×でまとめた表です。
http://hail2u.net/documents/cairs.html
336Name_Not_Found:04/07/28 13:44 ID:???
>>334 OSが2000とXPで異なるからって、同じIE6.0で差が出るわけない。
337@import_Wakaran:04/07/28 15:59 ID:vjhrhLCP
>335
ご紹介ありがとうございます。
やっぱりSafariは対応してるんですよね・・・。
どうして読み込まないんでしょうか?? 謎すぎです。
記述法が間違ってるわけではなさそうなのですが・・・。
338Name_Not_Found:04/07/28 16:04 ID:???
base.cssに間違いがあるのだろう
339K:04/07/28 16:22 ID:d4k54oG6
板違いだったらごめんなさい!

写真をクリックすると、音がなった後にべつの写真を
表示することは可能でしょうか?
340Name_Not_Found:04/07/28 16:24 ID:???
>>339
可能。
この話は終了。





次の質問ドゾー
341Name_Not_Found:04/07/28 16:33 ID:???
 ふんにゃか ふんにゃか
342Name_Not_Found:04/07/28 17:37 ID:???
>>339
画像と音楽を付けたHTMLドキュメントを作成して、そこへリンク。
でも音鳴るのは嫌われるよ。
343K:04/07/28 17:43 ID:d4k54oG6
>342
ありがとうございました。
0.5秒位の音声も嫌がられますかね?
344Name_Not_Found:04/07/28 17:56 ID:???
>>343
鳴ることを嫌う人もいるな。
例えば、職場で仕事で調べものをしてるときに、とか。
まあ、いろいろあるわけだ。
345K:04/07/28 18:11 ID:d4k54oG6
>344
そうですか〜。もう一回検討してみます。
ありがとうございました。
346Name_Not_Found:04/07/28 18:23 ID:???
BGM鳴るページ!やめてくれ!
http://pc3.2ch.net/hp/kako/1020/10209/1020920943.html
勝手に音を鳴らすサイト
http://pc.2ch.net/hp/kako/1003/10039/1003995529.html
貴様らBGMつけるぞ、こるぁ〜☆
http://pc.2ch.net/hp/kako/1019/10199/1019928333.html
HPでのMIDI使用について
http://pc.2ch.net/hp/kako/1006/10069/1006961695.html
ホムペ開いた瞬間にMP3を流したい
http://pc.2ch.net/hp/kako/1002/10028/1002890684.html
サイトでMIDIを流してるヤツはドキュソなんですか?
http://natto.2ch.net/hp/kako/987/987821592.html
トップからmidiを鳴らすサイトを
http://mentai.2ch.net/hp/kako/987/987218275.html
どうしてMIDI系サイトは逝ってよしなの?
http://mentai.2ch.net/hp/kako/968/968851920.html
WebPageでMIDIを流すヤツ最低!!!
http://piza.2ch.net/log2/hp/kako/958/958633206.html
WebPageでMIDIを流すヤツ最低!!!
http://mentai.2ch.net/hp/kako/958/958633206.html
347317:04/07/28 19:08 ID:???
318〜322
返信ありがとうございます。無事に解決しましたm(_ _)m
対応表のほうは一度は目を通したのですが、
どうも読解力がなくて申し訳ないです;;
348Name_Not_Found:04/07/28 19:16 ID:???
>>347 解決したのはめでたいが、何が原因だったか、どう解決したのか、できれば報告しておくれ。
349Name_Not_Found:04/07/28 19:24 ID:???
すいません、スタイルシートについて質問があります。
外部ファイルでスタイルを与える場合、1つのhtmlファイルに複数の外部ファイル(.css)
を呼び出すことは出来るんでしょうか?
350Name_Not_Found:04/07/28 19:34 ID:???
>>349
無論できる。
HTML4.01仕様書に書いてある。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3
351Name_Not_Found:04/07/28 19:53 ID:???
>>349
勿論できる。
CSS仕様書の、@importの項を見よ。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cascade.html#at-import
352284:04/07/28 20:29 ID:???
>287 ttp://syobon.zive.net:85/src/syobon3644.png
Firefoxの設定画面ですが、このように設定しても変化がありません。

code { display: block;background-color: #fcffff; font-style: normal;
font-size: 90%; font-family: "MS ゴシック", sans-serif;
letter-spacing: 0.02em; border-width: 0px 0px 1px 0px;
border-style: dotted; border-color: #333366; }

code { display: block;background-color: #fcffff; font-style: normal;
font-size: 90%; font-family: "MS Gothic", sans-serif;
letter-spacing: 0.02em; border-width: 0px 0px 1px 0px;
border-style: dotted; border-color: #333366; }

上の指定では、code要素がMS Gothicで表示されるのですが、
下の指定ではsans-serif(つまりMS PGothic)で表示されました。
353Name_Not_Found:04/07/28 20:35 ID:???
>>352
それは君のパソコンに"MS ゴシック"はあるが"MS Gothic"は無いからでは。
354Name_Not_Found:04/07/28 20:54 ID:???
スタイルシートで背景(画像を二つ)あてる事は出来るんでしょうか?
355昔の人:04/07/28 20:58 ID:???
>>354
なぜFAQを見ないんでせうか? Q7(>>7
356284:04/07/28 21:00 ID:???
>353 IE5.5では、下の指定でもMS Gothicで表示されるのです。
ひとつ気になるとすれば、
Firefoxの設定でフォントを選択する欄をクリックしても
「MS Gothic」がないことでしょうか。(MS PGothicもMS UIGothicもありません)
「MS ゴシック」ならばあるのですが・・・。
なお、OSはMeです。
357Name_Not_Found:04/07/28 21:48 ID:???
質問です。
フォーカスのあるリンクの周りに、点線の囲みができますが、
これを表示させないように CSS で指定するにはどうしたらよいでしょうか?

a:visited, a:active, a:focus{ border-style:none; }

としてみましたが、うまく行かないようです。

環境は win2000, IE6 です。よろしくお願いします。
358Name_Not_Found:04/07/28 21:53 ID:???
>>357
それはスタイルじゃないと思う。
JS スレで解決した人なら、その旨告げて次の質問ドゾーと書いてください。
359357:04/07/28 22:05 ID:???
たしかに私はJSスレ Part29の 853 です。
あそこでの質問は解決していただいたのですが、それと関連したトラブルが
他にありまして、JSスレでの質問と微妙に性質が違うので、こちらで
おうかがいしたいのです。

それはさておき、フォーカスの与えられたオブジェクトの周囲の点線を
指定するセレクタはCSSには存在しない、ということでしょうか?
360Name_Not_Found:04/07/28 22:07 ID:???
>>358
いや、スタイルだよ。
:focus疑似クラスはWinIE未対応。:activeなら対応。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#pseudo-classes
361Name_Not_Found:04/07/28 22:08 ID:???
>>359
点線の囲みってことはブロックレベルだろう?
aじゃなくてそのブロック要素にborder設定しないと。
362Name_Not_Found:04/07/28 22:10 ID:???
>>361 はて。インライン要素にもborderは適用できますが。但しWinIEは5.5以降で対応。
363357:04/07/28 22:14 ID:???
それは Mozilla なら点線を消せる、と言うことでしょうか?
当方は Mozilla 1.7 Sylera でテストしておりますが、以下のコードだと
点線は消えません。

<style type='text/css'>
a:focus, a:active, a:visited {border-style:none;}
</style>

<ul>
<li><a href="#">ふんにゃか ふんにゃか</a></li>
<li><a href="#">ふんにゃか ふんにゃか</a></li>
<li><a href="#">ふんにゃか ふんにゃか</a></li>
</ul>
364Name_Not_Found:04/07/28 22:21 ID:???
あの点線はスタイルじゃないでしょ。borderとは別にあるみたいだし。
365Name_Not_Found:04/07/28 22:23 ID:???
そういやWINXPでブラウザに限らず何のファイル選択するんでもあの点線でるな。
366Name_Not_Found:04/07/28 22:27 ID:???
MacIEだと a:focus{border:〜;}で制馭できた憶えがある。
367Name_Not_Found:04/07/28 22:29 ID:???
あの線は
・winIEではcssとは関係ない(が、独自属性で消せたと思う)
・macIEではcssのoutline
・gecko系では-moz-*
・safariも確かoutline(だったと思う)
・operaは、線なんてあったっけ?
368Name_Not_Found:04/07/28 22:35 ID:???
borferでなくoutlineだったか。使用しないので忘れてた。
outlineプロパティーに対応してるのはMacIEとOpera7。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/ui.html#outline-properties
369Name_Not_Found:04/07/28 22:36 ID:???
>>368
safariも対応してる
370Name_Not_Found:04/07/28 22:37 ID:???
要するにMacのブラウザでは制御しやすいが、WinではOSが邪魔をするってこと?
371Name_Not_Found:04/07/28 22:42 ID:???
そもそもフォーカスの印なくなったら
TAB移動とか面倒じゃまいか。
372853:04/07/28 22:55 ID:???
これで Mozilla だと点線が消えるようになりました。
a:focus { -moz-outline:none; }

どたなか WinIEでのやり方をご存知での方はいらっしゃいませんか?
373Name_Not_Found:04/07/28 23:08 ID:???
>>372
だからWinIEはa:focusにもoutlineにも対応してないんだって。
それに>>371も言ってるが、識別できなくなるから、消すなよ。
ユーザー・インターフェースの類は無闇にいぢらない方がよい。
374357:04/07/28 23:16 ID:???
前レスで、他スレの番号が出てしまいました。

お聞きしたいのは、スタイルシート以外でできるという設定についてです。
>>367・winIEではcssとは関係ない(が、独自属性で消せたと思う)

あと、今作っているのはイントラネットのメニュー画面で、線を消すのは
ある事情のためです。今回に限った話で、操作に問題はないはずなのです。
375Name_Not_Found:04/07/28 23:19 ID:???
スタイルシート以外のことをここで訊かれても、をぢさん困っちゃふな。
376@import_Wakaran:04/07/28 23:19 ID:vjhrhLCP
>338
base.cssに問題はないと思われ。
W3Cが提供するチェックサービスで問題なしと出る。
377Name_Not_Found:04/07/28 23:22 ID:???
Safariはここで表示確認。
http://www.danvine.com/icapture/
378Name_Not_Found:04/07/28 23:43 ID:???
最近CSSを学び始めた者です

あるCSSの参考書の書き方なのですが

.head td{vertical-align:top;
padding-top:8px}

といった書き方がされていたので疑問に思ってしまいました。

このスレにある解説サイト等では
タグ .クラス名 という順番で記述するということのようなのですが…

どなたかご教授いただけませんでしょうか。
379Name_Not_Found:04/07/28 23:52 ID:???
>>378
それはclassがheadの要素の子孫のtd要素にマッチするセレクタです。
380Name_Not_Found:04/07/29 00:15 ID:???
>379さん

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

書式の順番という事とは違う内容だったのですね。

うーん、classによって指定した範囲内のtd要素に、
設定が反映するということでしょうか・・・?

基礎概念の勉強がもっと必要だということが解りました…。
リファレンスページを読み直してきます;
381Name_Not_Found:04/07/29 00:22 ID:???
bloggerのテーマを編集せいていて少し質問があります。

http://cgi.annie.ne.jp/~ika/uploader/files/0751.zip
なんですけど文字数が多くても左側が右側にはみ出ないようにしたいのですが
上のものをどうすればいいのでしょうか? うーん、ちょっとわからない
どなたかよろしくお願いします
382Name_Not_Found:04/07/29 00:27 ID:???
テーブルだからはみ出ないんじゃないの?
383Name_Not_Found:04/07/29 00:29 ID:???
>382
そうなる予定で書いたんですけど
実際書いてみるときれいにはみ出てしまうんですよね
(´・ω・`)ショボーン

ためしにaを100ぐらいを書くと完全にずれる。
どうすればいいのかなぁ。
何が悪いんだろう
384Name_Not_Found:04/07/29 00:51 ID:???
>>383
アルファベットの羅列は改行されずにはみでるよ。
日本語でためしてみなよ。
385Name_Not_Found:04/07/29 00:53 ID:???
>>383
連続する半角英数は一単語と見なされて、ブロックの端に到達しても
自動的には折れません。
本来、そういうときのために<br>という要素があるので、可能ならば
それで折ってください。

<br>を入れることが不可能ならば、MSIE ならば word-break という
プロパティを先行実装しているので、それで折ることが可能です。
Moz はまだ実装していません。
386Name_Not_Found:04/07/29 01:02 ID:???
>384-385
あー、そうだったのか。
また賢くなった。教えてくれてありがとう。

>385
><br>を入れることが不可能ならば、MSIE ならば word-break という(ry

(´-`).。oO(詳しく教えていただきたいなぁ。)
387Name_Not_Found:04/07/29 01:10 ID:???
388Name_Not_Found:04/07/29 01:15 ID:???
>387
フー('ε')ーン
お勉強しろということですか。
貴様ら付き合ってくださいまして本当にありがとう
ありがとう。 ばいばい
389Name_Not_Found:04/07/29 01:20 ID:???
えーと。
9月半ばくらいまで、名前欄に括弧付きで年齢入れることにしないか?
390Name_Not_Found(3):04/07/29 01:34 ID:???
>>389
これでいいでちゅか?
391Name_Not_Found(86):04/07/29 01:37 ID:???
ちょーでちゅねー。
よくできまちたー。
392Name_Not_Found(100036):04/07/29 01:37 ID:???
くだらないルールだ
393Name_Not_Found:04/07/29 01:41 ID:???
>>392
デーモン閣下ですか?
394Name_Not_Found:04/07/29 02:15 ID:???
自分にレスつけて面白いの?
395317:04/07/29 08:10 ID:???
>>348
返信遅れました。
ええと、>>318>>321の方法を両方試したのですが、
どちらの方法でも、私が用いた4つのブラウザ全てに反映する事がわかりました。
(とりあえずは、「body {margin-top:**%;}」のほうを現在使用中)

結局のところ、何が原因で
style="position: relative; top: ○○%;"
が反映されなかったのかは、私の知識ではなんとも・・・。

まだホームページ作成に関しても、覚え始めなので精進あるのみです(- -;A
396Name_Not_Found:04/07/29 08:26 ID:???
うん。がんがってね。


夏バテに負けず、毅然として次!↓
397Name_Not_Found:04/07/29 08:49 ID:???
 ふんにゃか ふんにゃか
                          チョットチガウヨウナキガシル
398Name_Not_Found:04/07/29 08:51 ID:???
>317っていい奴だな。こういう人は俺と違ってどんどん上達するな。
399Name_Not_Found:04/07/29 09:02 ID:???
それはないけど>>398


あっ>>397
ふんにゃかうざったてー
400Name_Not_Found:04/07/29 09:27 ID:???
>>395
仕様書によれば――
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#position-props
9.3.2 ボックスの位置を指定する(Box offsets: 'top', 'right', 'bottom', 'left')
<percentage>
包含ブロックの幅('left'と'right')あるいは高さ('top'と'bottom')に対する割合で指定する。 'top'と'bottom'については、包含ブロックの高さが明確でなく内容量に依存する場合、パーセント値をすべて'auto'として扱う。

つまり、topの%指定には包含ブロックのheightが明示されていなければならない。
autoでは駄目。IEは余計なお世話をしてくれるだけ。Mozilla・Operaが正しい。
401Name_Not_Found:04/07/29 11:06 ID:???
_____           _____
|    |          |    |
| 写真1|          | 写真2|
|    |コメント:○○○  |    |コメント:○○○
|    |○○○○○○    |    |○○○○○○
 ̄ ̄ ̄ ̄ ̄            ̄ ̄ ̄ ̄ ̄

_____           _____
|    |          |    |
| 写真3|          | 写真4|
|    |コメント:○○○  |    |コメント:○○○
|    |○○○○○○    |    |○○○○○○
 ̄ ̄ ̄ ̄ ̄            ̄ ̄ ̄ ̄ ̄

CSSでこのような段組レイアウトをしたいのですが、やり方が分かりません。
もちろんテンプレ読んで調べてみましたが、上のような段組の綺麗な組み方は理解するに至りませんでした。
どのように記述したらいいんでしょうか?条件として、、

・写真のコメント(何行になるかわからないものと仮定する)の最後の行は、写真の下側に合わせたい。
・写真1と写真2の上側、写真3と写真4の上側の位置をそれぞれ合わせたい。

よろしくお願いします。
402401:04/07/29 11:08 ID:???
↑絵がずれまくってしまいました。見にくくてスイマセン!!
403Name_Not_Found:04/07/29 11:16 ID:???
このスレッドで既出。
404Name_Not_Found:04/07/29 13:07 ID:???
>>401
意外と単純そうでやりずらーいな。
TABLEで組めば一瞬なんだけどな、やっぱ表じゃないしあんまりTABLEは好ましくないわな。
かといってCSSで組み込むとOS、ブラウザ毎に表示変わってくるし、
この手のレイアウトは、要素一つ一つをご丁寧にブロック化してから
各々floatなりpositionなりでレイアウト組み込まなきゃだから下手すりゃ
TABLEよりはるかに複雑な記述になる恐れもあるわな。
特にfloatはブラウザ毎でレイアウト崩れ起きやすく注意しなきゃならんし、
かといって絶対座標で位置をとっていくのも、Y座標に関しては難しいとこだよね。
だってこの場合、商品写真よりコメントの方が長くなってコメントの方が占める高さが写真以上になることもあるわけでしょ??どー組み込むのが賢いのか??
みんなどーレイアウトとってんのかね?
405Name_Not_Found:04/07/29 13:24 ID:???
<input type="file"> に、
borderやfontなどのスタイルシートを用いる方法はないでしょうか?
406Name_Not_Found(28):04/07/29 14:19 ID:???
>>405
input {
border: 適宜;
font: 適宜;
}
407Name_Not_Found:04/07/29 15:39 ID:ueZu9xl2
ulの入れ子で、以下のようなものがある場合、
第一階層の項目(下でいうと●ではじまる項目)についてだけ、
上マージンだけを10pxもうけるにはどうすればいいのでしょう?

●あああああ
●いいいいい
●ううううう
●えええええ
 ○かかかかか
  ■さささささ
 ○ききききき
 ○くくくくく
 ○けけけけけ
●おおおおお

<li class="hoge">
li.hoge{
 margin-top:10px;
}
</li>
とやってもだめでした。
408Name_Not_Found:04/07/29 15:43 ID:???
>>407
第2階層以下にもクラスを設定してそれぞれマージンを設定汁。
409Name_Not_Found:04/07/29 16:04 ID:EwBe3rxe
tableで枠と中の文字の隙間を決めるのに使うcellpaddingをスタイルシートで一括して設定するにはどうすればいいのでしょうか?
410Name_Not_Found:04/07/29 16:24 ID:???
>>407-408
ul li {margin-top:10px;}
ul li li {margin-top:0;}

>>409
padding
411Name_Not_Found:04/07/29 17:12 ID:???
>>408は、いつもそんな面倒臭いことやってたのか。子孫セレクタ使ってネ。
412407:04/07/29 17:24 ID:ueZu9xl2
なるほろなるほろ。
>>408さんと>>410さんありがとうございます。
413408:04/07/29 17:51 ID:???
>>410-411
いつもそんな面倒臭いことやってました・・・_| ̄|○
なるほど勉強になりました。感謝!
414Name_Not_Found:04/07/29 17:57 ID:???
>>401って極端なことをいうと、こんな感じになるのかな。
tableでもけっこうしんどそうだ。
position駆使するしかない予感。

                        コメント:○○○
| ̄ ̄|              | ̄ ̄|○○○○○○○
|画像|コメント:○○○     |画像|○○○○○○○
|__|○○○○○○○.   |__|○○○○○

                            コメント:○
                            ○○○○○
                            ○○○○○
| ̄ ̄|              | ̄ ̄ ̄ ̄|○○○○○
|画像|              |  画像  |○○○○○
|    |コメント:○○○.     ̄ ̄ ̄ ̄
|__|○○○○○○
415Name_Not_Found:04/07/29 17:58 ID:???
クラス選択子を知ってて子孫選択子を知らないとはこれいかに
416Name_Not_Found:04/07/29 18:01 ID:???
ハイ〜 キタカサッサー ホイサッサー
417408:04/07/29 18:03 ID:???
>>415
特に学習せず適当にやってきてしまってたので・・・_| ̄|○
これを機会に適当な性格を改めて精進していきたいと思います。
418Name_Not_Found:04/07/29 18:05 ID:???
>>414
それじゃあデザインもナニもあったもんじゃないな。
419Name_Not_Found:04/07/29 18:46 ID:???
>>414
おいおい、テーブルなら楽勝だろ〜??
それからpositionじゃあやりづらくないか??出来る気がしないな。

<table>
<tr>
<td valign=bottom>画像1</td>
<td valign=bottom>コメント1:○○○○○</td>
<td valign=bottom>画像2</td>
<td valign=bottom>コメント2:○○○○○○○○</td>
</tr>
<tr>
<td valign=bottom>画像3</td>
<td valign=bottom>コメント3:○○○</td>
<td valign=bottom>画像4</td>
<td valign=bottom>コメント4:○○○○○○○○○○○○</td>
</tr>
</table>

これならコメントが何行になろうが401のレイアウトは一応は保持できるから
この方が絶対簡単だし効率的ではあるんだよな。
ただ問題は、このレイアウトをテーブルでやるのはどーなの??ってことだよな。
420Name_Not_Found:04/07/29 19:02 ID:???
ポジションの方がテーブルよりうまくできるのは自明の理なので使い方覚えてください。

#つーかテーブルとcssが相反するものと思っている時点で池ry
421Name_Not_Found:04/07/29 19:12 ID:???
>>421
時と場合によるだろ。
422Name_Not_Found:04/07/29 19:13 ID:???
>>420 だった、あぶね、自己レスしちまった。
423Name_Not_Found:04/07/29 19:16 ID:???
>>420
じゃあpositionせっせと使って>>401の言ってるレイアウトの仕方をここに書いてみろよ。
424Name_Not_Found:04/07/29 19:27 ID:???
さあ 面白くなってまいりました!
425Name_Not_Found:04/07/29 19:33 ID:???
420はどこでもの予感
426Name_Not_Found:04/07/29 20:09 ID:???
>>401>>423

これだからスキルの無い香具師はry
427Name_Not_Found:04/07/29 20:10 ID:???
display:table-* とセレクタをちゃんと使えばリスト要素でも可能だとは思う。
しかしIEの対応が出来ていないいつもの罠
428Name_Not_Found:04/07/29 20:13 ID:???
アンカー無けりゃわからんよ。
429Name_Not_Found:04/07/29 21:38 ID:???
>>414
CSS以前に正しいマークアップを
430Name_Not_Found:04/07/29 21:42 ID:u/TGvJny
>414は何も書いてないでしょ?
431Name_Not_Found:04/07/29 22:14 ID:???
>>407
だから>>251以下既出だって。
>>261を改良して、
コメントのp要素をdivで括って
div {line-height:画像の高さ}とし、
p {display:inline;vertical-align:bottom}
で、どう?
432Name_Not_Found:04/07/29 23:54 ID:???
http://pc5.2ch.net/test/read.cgi/hp/1089286062/l50

参加者大大大募集です。よろしくお願いします!
433Name_Not_Found:04/07/30 02:29 ID:qhz4/hik
質問です!
上下(または左右)を真っ黒にして真ん中にメニューやらなんやらを置きたいんですが、
width:100%;にしても両端に余白が出来てしまいます。
border:none;なんかで対処できるかと思ったんですがうまくいかず…。
どうやったら余白を消せますか?

それと、body{background-color:black;}を外部から読み込んでも真っ白なんですけどなんででしょうか…。
とりあえず、.background{background-color:Black;}を加えて、
本体(?)の方に<body class="background">とやって強引にやってるんですが…。
一応、なぜ出来ないのかハッキリさせたいので、出来れば教えてください。
434Name_Not_Found:04/07/30 02:33 ID:???
ソース出せ。
435Name_Not_Found:04/07/30 02:34 ID:???
>>433
上:意味不明
下:body{background-color:black;} であってるよ。
他のシートやなんかが邪魔してる鴨ナー
436Name_Not_Found:04/07/30 02:39 ID:???
>>433
5W1Hって知ってる? 主語と目的語をハッキリさせて質問し直して下さい。
でないとわかりません。
HTMLとCSSはチェッカーにかけて誤記が無いか確かめましたか。
437Name_Not_Found:04/07/30 08:32 ID:???
>>433
どんなに正しい記述をしても、ブラウザによっては特定の記述を無視します(実装していないため)
「背景が真っ白になる」のは、おそらくあなたが使ったブラウザの「仕様」なので諦めてください
(たしかmacIE5.1や一部のNNではbodyの要素をいじられるのを嫌うはず)


>上下(または左右)を真っ黒にして真ん中にメニューやらなんやらを置きたいんですが
ブロック要素は普通 width100% で考えるはずな(特に指定が無ければ)
おそらくbodyのほうのmarginがデフォルトでついてると思うので

body {
margin : 0;
}

を追加してもういちど試してください。


あと勘違いかもしれないけど、こういうことがしたいのかな?
ttp://www.fromdfj.net/html/overflow.html

上下左右に分けるってんならこういう手もあるよ
438Name_Not_Found:04/07/30 10:29 ID:???
padding: 0
も追加しとけ
439Name_Not_Found:04/07/30 12:09 ID:ESeJnz1h
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

dl.a{
padding-left: 100px;
position: absolute;
bottom: 20px;}

p.b{
padding-left: 300px;
position: absolute;
bottom: 20px;}

<dl class="a">
<dt><a href="http://www.aaa.1.html">ほげ</a></dt>
<dt><a href="http://www.aaa.2.html">ほげほげ</a></dt>
<dt><a href="http://www.aaa.3.html">ふん</a></dt>
<dt><a href="http://www.aaa.4.html">にゃか</a></dt>
</dl>

<p class="b">
<a href="http://www.aaa.5.html">ふが</a><br>
<a href="http://www.aaa.6.html">しゅが</a>
</p>
440439:04/07/30 12:12 ID:ESeJnz1h
上のようなのを書いてNN7で見てみると
「ふん」と「にゃか」のリンクが機能しません。
IEでは機能しました。

ソースは勉強中のものなので突っ込まないでください。
441Name_Not_Found:04/07/30 12:43 ID:???
>>439
padding-left:とか使うから。
absoluteならleftで指定すればいいだろ。
442Name_Not_Found:04/07/30 12:43 ID:???
まずCSSの前にHTMLから勉強してみよう
443Name_Not_Found:04/07/30 12:48 ID:???
>>440
レイヤーが重なっているから。
試しにp.bにbackground:#000;などを加えるとわかりやすい。

で、例えば下記のようにすれば解決できる。
dl.a{
position: absolute;
bottom: 20px;
left:100px;}

p.b{
position: absolute;
bottom: 20px;
left:300px;}
444439:04/07/30 14:49 ID:???
即レスありがとうございます。

>>442
元のHTMLを触らずCSSで見栄えを・・
という条件だったので突っ込まないでください。。

>>441 >>443
リンクしない理由が分かったので勉強になりました。ありがとうございます。
がんがりがす。
445Name_Not_Found:04/07/30 14:58 ID:???
>>444
> 元のHTMLを触らずCSSで見栄えを・・
> という条件だったので突っ込まないでください。。
お前になんで問題出されなきゃなんないの。バカか。
446439:04/07/30 15:54 ID:???
>>445
バカはお前。
お前には聞いてないし問題も出してない。
必要とされていない人間が出てくるな。
「さて問題です」などとは一言も言ってない。
お前のような糞がいるから「夏ですね」と書き込むやつが増える。
夏休みならデートでも行ってこい。

447Name_Not_Found(28):04/07/30 15:59 ID:???
>>446
相手いないし(´・ω・`)
448Name_Not_Found:04/07/30 16:03 ID:???
>>445 >>446

(・∀・)

な……………ね
449Name_Not_Found:04/07/30 16:04 ID:???
>>446
> 「さて問題です」などとは一言も言ってない。
言い忘れるなよ。ヴォケが
450Name_Not_Found:04/07/30 16:23 ID:???

夏ですね
451Name_Not_Found:04/07/30 16:25 ID:???

  はい、皆さんご一緒に・・
452Name_Not_Found:04/07/30 16:25 ID:???
夏ですね。
453Name_Not_Found:04/07/30 16:26 ID:???

 夏ですね。    ツマンネ
454Name_Not_Found:04/07/30 16:29 ID:???
>>444
デムパを触らずまともな質問者に回答を・・
というスレだったので質問しないでください。。
455Name_Not_Found:04/07/30 16:38 ID:???
じゃぁ空気入れ替えage

俺にも夏休みをくれ
456Name_Not_Found:04/07/30 16:39 ID:???
だめ!
457Name_Not_Found:04/07/30 16:40 ID:???
じゃぁ空気戻しsage

>>446
> お前のような糞がいるから「夏ですね」と書き込むやつが増える。
自分が言われて悔しかった言葉を人に言えば効果があると思ってるんだろうね。
458Name_Not_Found:04/07/30 17:25 ID:???
>>457
>言われて〜

それはお前だろう。


もうこの辺で次ドゾー
459Name_Not_Found:04/07/30 17:36 ID:???
ソースいじれない理由をちゃんと説明しとけば荒れなかったのに
460Name_Not_Found:04/07/30 17:59 ID:???
答えてやるから3分以内に質問しろ。
461Name_Not_Found:04/07/31 00:23 ID:???
>>460
お前空しいな
462Name_Not_Found:04/07/31 01:14 ID:???
463Name_Not_Found:04/07/31 01:23 ID:???
>>462はグロいチンコ写真
464Name_Not_Found:04/07/31 02:30 ID:???
>>462
グロ画像をあげて感情表現か・・・・・
465Name_Not_Found:04/07/31 02:36 ID:???
>>460
3分以上経っちゃったけど、いいかな。
漏れ、残業で今から帰るんだけど、
晩飯、何にしたらいい?

深夜だけど、胃腸の具合もいいし、
ガッツリ食いたいです。
466Name_Not_Found:04/07/31 02:38 ID:???
味噌カツ醤油煮込み炒め焼きそば
467Name_Not_Found:04/07/31 03:11 ID:???
どんどん460が哀れになっていく・・・・
468Name_Not_Found:04/07/31 03:49 ID:???
相手してくれるお馬鹿さんがどんどん増えてて
むしろ喜んでいると思うが
469Name_Not_Found:04/07/31 06:03 ID:???

 夏ですねぇ
470Name_Not_Found:04/07/31 07:40 ID:???
background:url(img/hoge.gif) repeat-y center center fixed;
こういう一括指定と
background-image:url(img/hoge.gif);
...
のような個別指定?がありますが、これは何のためでしょうか?一括してしか効かない、または個別指定でしか効かないブラウザがあるのですか?
borderの場合は個別指定でないと、できないことがありますが、backgrounfに関しては一括指定と個別指定で
できることが同じだと思うんですが、どういうことなのかエロイ人いましたら教えてください。

どちらが推奨かもお願いします。
471460:04/07/31 08:16 ID:???
ほんとあつがなついですね
472Name_Not_Found:04/07/31 14:44 ID:???
>>470
1.手打ちでCSS書く人の簡単の為。
2.伝送量を減らしたい人の為。

background: white;

background-color: white;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;

と等価なわけなので
手打ちで書く人にとっては楽チンでしょう。
伝送量も約100バイト節約されます。

どっちが推奨かは好みの問題でしかないですね。

#一括指定は、省略値は初期値にリセットされるのが正しいという点を
間違えて覚えるとハマるので注意。
ブラウザによってはリセットしないので、一括指定を使う場合、省略しない方が吉。
473Name_Not_Found:04/07/31 15:35 ID:F0vWRZXC
質問です。
ウィンドの見える位置の一番下の方に画像を置きたいんですけど、CSSだとどうすれば出来ますか?
474Name_Not_Found:04/07/31 15:37 ID:???
position:fixed; bottom:0;
但しWinIEは未対応なので他の工夫が要る。
475Name_Not_Found:04/07/31 15:50 ID:???
またIEか
476Name_Not_Found:04/07/31 15:56 ID:???
>473
背景画像だったら
body {background:transparent url(画像のパス) no-repeat fixed bottom;}
とでもやればIEでもイケル
477Name_Not_Found:04/07/31 16:14 ID:???
しかしwinはどうにもなんねーなー
ブラウザーくらいまともにつくれんのか・・・
478Name_Not_Found:04/07/31 17:31 ID:???
Win使わなければいいじゃん。
それにWinじゃなく、IEだろ?
479Name_Not_Found:04/07/31 17:53 ID:???
WIN != Windows
480Name_Not_Found:04/07/31 17:58 ID:???
なら

しかしMSはどうにもなんねーなー
ブラウザーくらいまともにつくれんのか・・・

じゃね?
481Name_Not_Found:04/07/31 18:01 ID:???
>>480
相手は小学生だ。細かいこと言いなさんな。
482Name_Not_Found:04/07/31 18:25 ID:???
しかしIE6を無視できないのが辛いところで
483473:04/07/31 18:57 ID:???
どうもありがとうございます。無事出来ました。
画像を置くだけだったのでwinでも無事出来ました。
484Name_Not_Found:04/07/31 19:42 ID:???
質問です。
背景いっぱいに写真などの画像を指定して余白ができないようにしたいのですが
1024×768の画像を用意しても、最近はそれより大きい画面で閲覧している方も
多いのでどうしても余白が出来てしまうと思います。
どの大きさの画面でも余白ができないように指定する方法はありますか?
485470:04/07/31 19:48 ID:???
>>472
エロイですね!

>#一括指定は、省略値は初期値にリセットされるのが正しいという点を
これ重要なことですね。これが一括と個別の大きな違いですね^^

ものすごくわかりやすかったです!エロイ!
486Name_Not_Found:04/07/31 19:49 ID:???
画像を上手く加工してrepeatさせりゃいいんじゃん
487Name_Not_Found:04/07/31 19:51 ID:???
>486は
>484ね
488Name_Not_Found:04/07/31 20:18 ID:???
>>484
img{width:100%: height:100%}
489Name_Not_Found:04/07/31 21:00 ID:???
>>484
既出
490Name_Not_Found:04/07/31 21:02 ID:???
>>488
ハァ?こいつ馬鹿
491Name_Not_Found:04/07/31 21:05 ID:???
492Name_Not_Found:04/07/31 21:09 ID:???
質問です。
widthで幅を指定したdiv要素の中に、
URLを表記しているのですが、
そうしますとURLのせいで指定した幅を押し広げてしまいます。
これはバグでしょうかね?
良い回避策などありましたらご教授下さい。
493Name_Not_Found:04/07/31 21:20 ID:c8TzC9Yg
ギリシャ語やキリル語のフォントを指定するにはどうしたらいいんでしょうか?

font-family:MS Pゴシック;
↑と書くと日本語の部分は指定したフォントになるんですが、ギリシャ語とキリル語は
そのまま(デフォルト)です。

要は、AAをずれないように表示したいんですが・・・
494Name_Not_Found:04/07/31 21:23 ID:c8TzC9Yg
>>492
<span style="word-break:break-all;">http://www.qawsedrftgyhujikolp.com/くぁwせdrftgyふじこl.html</span>
↑私はこんな感じにしてます。
495Name_Not_Found:04/07/31 21:25 ID:c8TzC9Yg
あ、ごめんspanじゃないや。divとかtdとかブロック要素ね。スマン!
496Name_Not_Found:04/07/31 21:33 ID:???
>>493
ブラウザはなんですか?
IE5.5/6 ならモナ板のトップなどに対処法があるのでそっちを見てください。
閲覧者側での対処が必要ということです。
CSSだけではたぶん無理。
497492:04/07/31 21:38 ID:???
>>494-495
おお、なるほど!助かりました。
ありがとうございました。
498492:04/07/31 22:12 ID:???
あ、でもこれって今のところIE独自でしか効かないのか。
う〜む。。やっぱり適当に改行するしか方法ないのかな。
499Name_Not_Found:04/07/31 23:54 ID:c8TzC9Yg
>>496
IE6です。
結論としてCSSだけじゃ無理なんですね(´・ω・`)ショボーン

不便ですねぇ・・・
500Name_Not_Found:04/07/31 23:57 ID:rQOZg4st
classとidはどう違うのですか?
どう使い分ければいいのでしょうか?
501484:04/08/01 00:01 ID:???
>>486
空とか一色ではない画像を全面に表示させたいのです…。
>>488
background-position: 100% 100%;
だと単に右下に固定になってしまいますよね。
>>489
すみません。
さんざん探したのですが背景に関わるCSSは画像をリピートさせるもの、
左上〜右下・中央に固定するものと簡略化タグしか書いていないところがほとんどで…。
探し方が良くないのでしょうか。
502Name_Not_Found:04/08/01 00:06 ID:???
>>493
font-family : "MS Pゴシック";

…まさか囲み忘れじゃないよね。
503Name_Not_Found:04/08/01 00:18 ID:???
<div class=test1>テスト1</div>
<div class=test2>テスト2</div>
div{
background-color:#ccc;
}
div.test1{
text-align:center;
}
とした場合はdiv.test1にも背景色があるのが仕様書通りの解釈だと思いますが、
div.test1に背景色がつかない、何故かdiv.test1のセレクタが後から出た時点で
以前のdiv全体に対する指定が反映されず初期化されてしまうようなブラウザってありますか?

一応n6以上ie5以上で問題なければいいんですが。
504Name_Not_Found:04/08/01 00:40 ID:???
>>501
1枚でどんなウィンドウサイズでも画面いっぱいにしたいなら、
物凄く大きな画像を用意するしかないのでは?

もしかしてウィンドウサイズに応じて伸び縮みする画像を
望まれているのでしょうか?
それは現時点では無理かと思います。
505Name_Not_Found:04/08/01 01:17 ID:???
でかい画像用意したとこで内容はどうなるのよ?
でかい画面使ってても、画面いっぱいにウィンドウ表示するとは思えんが
506Name_Not_Found:04/08/01 01:58 ID:???
>>501
だから>>486が言っているように、繋ぎ目部分をPhotoshopなどで加工して
Repeatしても自然な繋ぎ目になるようにすればいいだろう。
具体的な手ほどきは割愛。
507Name_Not_Found:04/08/01 06:10 ID:???
<div id="news">
<p class="news">川口がものすごい活躍をして日本を救いました</p>
</div>
これに対して
p.news{
padding:100px;
color:red;
}
#news p{
padding-bootom:0px;
color:blue;
}
の順番でブラウザに読ませた場合、どちらが優先順位が高いんですか?一応ie6標準準拠モードでは
この二つのセレクタは同じ優先順位と解釈してるっぽく、後から読み込んだ方を優先順位が高いものと
してレンダリングしますが。

IDからの文脈セレクタとクラス名を使ったセレクタが同じ優先順位というのが正しいのか良くわからないですが
エロイ人いませんか?
508Name_Not_Found:04/08/01 07:14 ID:???
ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity
>507 classセレクタよりも、idセレクタの方が詳細度が高いことになっている。
常にidセレクタの方を優先するべきだろう。
ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#at-important-rule
最重要規則を用いれば、また変わってくるだろうとは思うのだが。
509507:04/08/01 07:25 ID:???
>>508
エロイですね!
いいサイトを紹介してくださってありがとうございます!

じっくり読んでみます!
510507:04/08/01 07:30 ID:???
>>508
結構わかりやすい計算方法なんですね。
classのみのセレクタはひっくり返ってもIDセレクタを含むセレクタにはかなわないってことですね。

ところで仕様は理解しましたが、実際のブラウザはこの辺を仕様とおりに実装してるのでしょうか?
セレクタの詳細度の算出方法が仕様と食い違っている有名なブラウザはありますでしょうか?
NN4とかIE4未満はCSSを適用させないようにしてるので、どんな実装でもかまわないですが。
511484:04/08/01 07:40 ID:???
>>504-506
>ウィンドウサイズに応じて伸び縮みする画像
そうです、どこかでそういう指定をCSSでできるという書き込みを見たもので、
探していたんですが…。現状では無理ですか。
どうも丁寧なレス有難うございました。
512Name_Not_Found:04/08/01 08:32 ID:???
>>510
自分が表示確認できないブラウザがあったとしてどうするつもり?

とりあえずCSS完成してみれば
クロスブラウザなんかその後の話だっつーの
513Name_Not_Found:04/08/01 08:38 ID:???
_______________
|        見出し         |         ――――――見出し――――――
|文章文章文章文章文章文章文章 |          |文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 |          |文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 |          |文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 |          |文章文章文章文章文章文章文章 |
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄           ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
分かりにくいですが、角はそれぞれ繋がっていると思ってください
左のAAのようにborder-topを上ではなく、
右のAA のように見出しの上下真ん中に持っていくことは可能でしょうか?
514Name_Not_Found:04/08/01 08:42 ID:???
やってみたのかい?  borderでは出来ないよ。
515Name_Not_Found:04/08/01 08:44 ID:???
>>513
見出しにrelativeで負の値でも付けてあげたらよいかと。
516513:04/08/01 08:46 ID:???
>borderでは出来ないよ。
となると?ヒントだけでも

やろうと思いましたが、アイディアが浮かばなかったので…
517513:04/08/01 08:47 ID:???
>>515
やってみます
518513:04/08/01 09:05 ID:???
<div>
<h3>見出し</h3>
<p>文章文章文章文章文章文章文章
文章文章文章文章文章文章文章</p>
</div>
スタイルシート
div{
  width:200px;
  border:solid 1px;
}
h3{
  position:relative;
  top:-0.5em;
  text-align:center;
}

↑みたいな感じでやってみたのですが、opera、NNは駄目でした
IEでは形は出来たのですが、borderと見出し部分が重なってしまいました
他にいいアイディアあればよろしくお願いします
519Name_Not_Found:04/08/01 09:10 ID:???
見出しのwidthを文字列ぴったりに指定。
そして背景色を指定。
520Name_Not_Found:04/08/01 09:14 ID:???
>opera、NNは駄目でした
どう駄目だったか書かないとワカンネよ。
521Name_Not_Found:04/08/01 09:28 ID:???
h1 {
font-size: 100%;
margin: 0px;
padding: 0px;
position: relative;
top: -0.5em;
left: 75px;
width: 48px;
background: white;
}
div {
border: 1px solid black;
width: 200px
}
<div class="box"><h1>見出し</h1>あああああああああああいいいいいいいいいいいううううううううううう</div>
522Name_Not_Found:04/08/01 09:44 ID:???
出た!文字サイズピクセル固定!!出た!固定!!
バカ丸出し〜w
523Name_Not_Found:04/08/01 09:55 ID:???
オマイ便秘だろ?
524Name_Not_Found:04/08/01 09:57 ID:???
>>521
class="box"の内容も書きなよ。
525507:04/08/01 10:18 ID:???
>>512
クロスブラウザってなんですか?
とりあえず詳細度の実装があまりよくなければ、問題ない単純セレクタのみで工夫しようかなと思います。
526Name_Not_Found:04/08/01 10:22 ID:???
少しは自分で調べたらどうだ?
527Name_Not_Found:04/08/01 10:22 ID:???
>>521
まぁ…それはかなり力技だが(^^;)

>>513
OpreaやNNでは単位概念が微妙に異なるので em 系ではズレる。
このズレをなんとかするには>>521のピクセル指定もやむを得ないのでは。

あと見出しにかかるline-heightとmargin/padding、
DIV(box)内にある(かもしれない)paddingの値をうまくとってみて。
528513:04/08/01 10:35 ID:???
自分なりにいろいろやってみましたが見出しのセンタリングがうまくいきません
>>521のようなピクセル指定はあまりしたくないので
センタリングにはこだわらないようにします
いろいろありがとうございました

529Name_Not_Found:04/08/01 11:23 ID:???
>528
>521の見出しをspanで括って以下でどう?
* {margin:0px;padding:0px;}
div {
margin-top:5em;
border-top:2px solid #ccc;
}
h1 {
text-align:center;
margin-top:-0.5em;
}
h1 span {
padding:0px 0.5em;
background:#fff;
}

divのmargin-topやspanのpadding等は適宜
530Name_Not_Found:04/08/01 11:52 ID:???
普通のimgは指定ボーダーを、リンクが貼られてるimgにはaのボーダーを表示されたいがうまくいかん・・・
<img><a><img></a>
こんな構造のHTMLがあるとして
img { border: 1px solid black;}
a img { border-style: none;}
とするとa img なimg要素にはボーダーが表示されなくなる
逆に img { border: 1px solid black;} だけだとアンカーのボーダーが表示されないのだが
うまい振り分け方法ありますかね?
できればa img な部分は圧倒的に少ないのでクラスで振り分けるならa img のimg要素だけにクラスを付けたいのですが
531Name_Not_Found:04/08/01 11:52 ID:???
>>529
バグなのか家の環境でそれやってみたら
表示は期待通りなんだけど
ウインドウサイズをかえるとdivのマージンが表示されなくなる。
532Name_Not_Found:04/08/01 12:02 ID:???
533Name_Not_Found:04/08/01 12:11 ID:???
このスレなら構造って言えばある程度略したって伝わると思ったんだけどね

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head><title>test</title>
<style type="text/css">
img { border: 1px solid black;}
</style>
</head><body>
<p><img src="test.jpg"></p>
<p><a href="#"><img src="test.jpg"></a></p>
</body></html>

上のHTML2つ目のimgにはボーダーを表示しないでアンカーによるボーダーが表示されるようにしたいのだが
534Name_Not_Found:04/08/01 12:23 ID:???
>>533
悪いけど言いたいことがよく分からない。
多分アンカー張られた画像にマウスが重なったらボーダーを出したいと解釈した。
違ったら説明よろ。
img { border:none }
a:link { border:none }
a:visited { border:none }
a:hover { border:1px solid black }
535kai- ◆kai/rQnSpY :04/08/01 12:30 ID:???
リンクになっている IMG とただの IMG とに、差異を設けたいってことじゃないでしょうか。

a:link img { border : 1px solid #00f ; }
(ry

仮定さえ正しければ、子孫セレクタで解決……かな。

cf.http://www.parkcity.ne.jp/~chaichan/src/style.htm#shison
536Name_Not_Found:04/08/01 12:37 ID:???
>>535
なるほど。でもそれなら何も設定しなくても
リンク画像だけにボーダー表示されるのにな。
そんなに黒線がいいのか。
537Name_Not_Found:04/08/01 12:37 ID:???
んとちょっと違うです^^;
img { border: 1px solid black;} があると、リンクを張った画像にはアンカーによるボーダーよりCSSによるボーダーが優先されるので
これをアンカー側ののボーダーが表示されるようにしたいわけです
しかしながらただのimg(リンクを貼られてない画像)にはimg { border: 1px solid black;}を適用させたいのです

>>535
その通りです
が、アンカーのボーダーのスタイルはCSSの保守性の観点から1度の定義だけで済ませたいので、できれば子孫セレクタなどで再定義はしたくないのです・・・
特に色やボーダーの太さなど視覚的な値は
例えば
a:link {border-color: red}
がすでに書かれてるのに
a:link img {border-color: red}
とは書きたくないのですが^^;

538Name_Not_Found:04/08/01 12:39 ID:???
例えば
a:link {border-color: red}
がすでに書かれてるのに

a:link {color: red}
ですね。ゴメンなさい
539Name_Not_Found:04/08/01 12:48 ID:???
んー、結構ややこしいな
ただの画像にクラス付けて
img.foo { border: 1px solid black;}
なんてやればOKじゃね?
まぁ「ただの画像」いちいちクラスってのも個人的には嫌いだが
540kai- ◆kai/rQnSpY :04/08/01 12:52 ID:???
複数セレクタとかどうでしょうか。
(でも、両者間でスタイルの指定が違ったらそれでダメだしなぁ……。)

cf.http://www.parkcity.ne.jp/~chaichan/src/style.htm#fuku
541Name_Not_Found:04/08/01 12:52 ID:???
img { border:1px solid black; }
a img { boder:none; }

a { border:1px solid red; }

じゃいかんのかいな…。

>>537 のは、border-color:red; が2箇所にわかれるのがいやというなら、
a:link, a:link img { border-color:red; } でええんとちゃいますのん。
542Name_Not_Found:04/08/01 12:53 ID:???
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
BODY {background-color:#EFEFEF;}
DIV {width:50%;border:1px solid black;}
UL LI {list-style:circle url() outside;display:inline;border-bottom:2px dashed red;border-left:2px dashed red; background-color:#EEEEEE;}
</style></head><body>
<div>
IEのみで見られるバグ?NNで
<ul>
<li>LIに下線をつけて左マージンを指定。</li>
<li>背景色を指定すると、LIが上下に重なったところ(下行に送られたところ)の上の行のLIの下線が表示されない。</li>
</ul>
</div></body></html>
543Name_Not_Found:04/08/01 12:56 ID:???
>>541
>a { border:1px solid red; }
なるほど、テキストのリンクな場合もborderで囲む気ですか(・∀・)

>>542
スレ違い
CSS/DHTMLバグ辞典スレッド 第4版
http://pc5.2ch.net/test/read.cgi/hp/1078463560/
544Name_Not_Found:04/08/01 12:59 ID:???
IEデフォルト見たいに既読ページは色分けしたいならこうとか。
img { border:1px solid black }
a img {border:none }
a:link { border:3px solid blue }
a:visited { border:3px solid purple}

545543の中の人:04/08/01 12:59 ID:???
>>544
すまん。逝って来る。
546Name_Not_Found:04/08/01 13:00 ID:???
ああ>>542のは>>531のか。
547Name_Not_Found:04/08/01 13:08 ID:???
>>543
いや、だってあーた、テキストリンクはボーダーつけないなんて言ってないじゃん。(´・ω・`)

<a href="hogehoge">テキストリンク</a>
<a href="hoehoge" class="image" title="画像リンク"><img src="mogemoge" alt="もげもげ"></a>
<img src="hanya-n" alt="リンクなし画像">

a { border:none; text-decoratin:underline; }

a.image { border:1px solid red; }

img { border:1px solid black; }
a img { border:none; }

こうでもするしかないのでは?
「これこれを子要素にもつ親要素」のようなセレクタ構文でもでっちあげない限り、
class抜きでは無理でしょう。
548Name_Not_Found:04/08/01 13:11 ID:???
めんどくせw
ここまでしてやることか。
549537:04/08/01 13:14 ID:???
みなさん色々どうもです
ただ単にリンクはリンクらしく、ただの画像にはボーダーをってやりたいだけなんですけどね^^;

いちおう*仕様上*解決はしました
a img { border-color: inherit}
で親のaのcolorを継承するのでFireFoxでは希望どおりの動作をします
ただあくまで*仕様上*
ええ、IEがinheritに対応してません_| ̄|○
550Name_Not_Found:04/08/01 13:14 ID:???
>>548
お前誰よ。
551Name_Not_Found:04/08/01 13:15 ID:???
お前ら難しく考えすぎ
>>533の例文なら、
p > img {border:1px solid black}
552Name_Not_Found:04/08/01 13:16 ID:???
>>551
自己レス。勘違いだったわ。>>548、正直スマンかった。
553Name_Not_Found:04/08/01 13:21 ID:???
>>551
それIE対応してねぇよ……。
554537:04/08/01 13:24 ID:???
今のとこ>>539しかうまい解決法は無いみたいですね・・・
ありがとうございました
555Name_Not_Found:04/08/01 13:29 ID:???
span img { border:1px solid black }

<p><span><img src="1.jpg"></span></p>
<p><a href="#"><img src="1.jpg"></a></p>
556Name_Not_Found:04/08/01 13:31 ID:???
>537の
>a:link {color: red} がすでに書かれてるのに
> a:link img {border-color: red} とは書きたくない
この考え方自体がおかしいんじゃね?
aにつけたcolorとimgのborder-colorは違うもんでない?

a {color:#f00;}
img { border:2px solid #000; }
a img {border:2px solid #0f0;}
これでテキストリンクは赤、ただの画像は黒ボーダー、
リンク画像は緑ボーダーにならないか?
557Name_Not_Found:04/08/01 13:39 ID:???
いやただの素imgにはborder設定して
aとaの入れ子imgにはborder設定なしでデフォルト設定にしておきたい。
さらに素imgは沢山あるので、できれば一つ一つclass設定記述はしたくない。
さぁどうしる、という問いかと。
558Name_Not_Found:04/08/01 13:40 ID:???
結論、>>551に対応してないIEが糞。
559537:04/08/01 13:44 ID:???
>>555
spanで囲うのはクラス付けるのと等価ではありますね

>>556
「リンクはリンクらしく」つまりページ全体でリンクの見栄えを統一したいってのがあって
できれば画像リンクもアンカーのボーダー表示で済ませたいってことです
ところが画像にボーダーが設定されてる場合、アンカーによるボーダーよりも優先されてしまうというのがネックになってたのです
>a:link {color: red} がすでに書かれてるのに
> a:link img {border-color: red} とは書きたくない
ってのは見栄えに関する red とい値が2箇所に書かれるので保守性が良くないからやだなってことです
さらに付け加えると
a:hover などが設定される場合↑の方法で見た目を統一しようと
a:hover や a img:hover というセレクタを使ってもIEが対応してないという問題も孕んでますので・・・
560537:04/08/01 13:46 ID:???
>a:hover や a img:hover というセレクタを
a:hover img や a img:hover というセレクタを
ですね、すいません

>>557
まさにそうです
561433:04/08/01 13:52 ID:???
レスありがとうございました。
body {margin : 0;}を追加したら出来ました。

それと、背景色が出なかった方の問題ですが、
cssファイルの方の一番上にあった(cssref.css)ってのを消したらできるようになりました。
ちなみに(cssref.css)ってのはどっかのサイトからのコピペだったと思います。
562556:04/08/01 13:55 ID:???
>559
ちと反則かもしれんが、リンクの色をa一括で指定したいというのなら
img {padding:2px;background:#000;}
a img {padding:0px;}
でどうかな?
563537:04/08/01 14:12 ID:???
>>562
なるほど〜
うまいですね。これでいかせてもらいます

しかしIEで内容が画像だけのアンカーでhoverが効かないってのはバグですかね・・・

とりあえず皆様どうもでした
564Name_Not_Found:04/08/01 14:29 ID:???
a:hover img はなぜかクリックした時に反映されるようになった。
下記だとIEでもうまくいったよ。
img { border:1px solid black }
a img {border:none }
a:link img { border:3px solid blue }
a:visited img { border:3px solid purple }

<p><img src="1.jpg"></p>
<p><a href="hoge.html"><img src="1.jpg" class="hoge"></a></p>
<a href="hoge.html">テキストリンク</a>
565Name_Not_Found:04/08/01 15:27 ID:0QSax1Ps
OPERAで、フォームのinputボタンの立体感とかを無くすことは出来ませんか?
IEで見えるような形にしたいですが。
566556:04/08/01 15:27 ID:???
>563
IEのバグはこのへんかな?
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b077.html
疑似クラスまわりはやっかいかもね
567Name_Not_Found:04/08/01 15:37 ID:???
>>565
input {
background:gray;
border:1px solid black;
}
<input type="submit" value="ほげらっちょ">

とか。
好きな画像貼り付けることもできるよ。
568Name_Not_Found:04/08/01 17:20 ID:0QSax1Ps
>>567
ありがとうございます。
border-bottomにだけ、ラインを入れるという指定はOPERAでは無理なのでしょうか?
569565:04/08/01 17:25 ID:0QSax1Ps
border-topを消すことは出来るのですが、
border-right、border-leftの指定で反映されません。
570Name_Not_Found:04/08/01 17:33 ID:Za4XDi95
今までtableでやっていたレイアウトをfloatに変えてやろうと思っているのですが、
どうしても上手くいきません。どなたか教えていただけないでしょうか。
3段落構成で、2段落目を{float:left}と{float:right}の2つに別けたいんです。
3段落全てのwidth指定を100%にした時は上手くレイアウトできるのですが、
70%にするとレイアウトが崩れます。
どのように記述すれば崩れないで済むでしょうか。
571Name_Not_Found:04/08/01 17:41 ID:???
教えられる人がいるのでしょうか?
572570:04/08/01 17:42 ID:Za4XDi95
>>571さん
不可能、ということなんでしょうか?
573Name_Not_Found:04/08/01 17:44 ID:rpL9WuUa
CSSで縦にのばしまくっても
横にのばしまくっても素敵なデザインって実現可能ですか?
574Name_Not_Found:04/08/01 18:09 ID:???
あげてる奴は確実に夏まっさかり
575Name_Not_Found:04/08/01 18:10 ID:???
>>570
ソース出してくれないと、指示もできない。
576Name_Not_Found:04/08/01 18:14 ID:???
>>568-569 何をどうやったらどう失敗したのか、他人にもわかる形で書いて下さい。
577Name_Not_Found:04/08/01 18:18 ID:???
>>565
input {
background:gray;
border-top:none;
border-left:none;
border-right:none;
border-bottom:1px solid red;
}
一応こんな感じでできるけど、IEと同じ感じは無理そうだね。
どうしてもIEの見た目がいいなら、IEのボタンをスクリーンショットとって画像にして
ボタンに張るのがいいかも。
578Name_Not_Found:04/08/01 18:18 ID:???
>>573 質問の意味がわかりません。通じる言葉に直してね。
579577:04/08/01 18:35 ID:???
>>565
すまん、できた。
かなり反則だけど許してくれ。
border-top:0px solid;
border-left:0px solid;
border-right:0px solid;
border-bottom:5px solid black;
これでIEでもオペラでも下線だけ出る。
borderの値をnoneにするとオペラで凸ってなるから、上の様にしてくれ。
580Name_Not_Found:04/08/01 18:42 ID:???
文字の大きさを固定するのって普通はやらないこと?
90%とかのがいいんですか?
581Name_Not_Found:04/08/01 18:47 ID:???
>>580
まぁ固定は好ましくないと言われてる。
ただ一般個人サイトの訪問者で一番多いのがIE、文字サイズ中、1024×768って環境だろうから
その環境でちゃんと見えるんであれば、自己責任でやってもいいんでないかな。
俺はやらんけども。
582Name_Not_Found:04/08/01 19:33 ID:???
すいません、テーブルやdivタグ内の背景を多少色を付けて透明にして、bodyの背景を透かせたいんですが、
どうやれば出来るんでしょうか?
583Name_Not_Found:04/08/01 19:38 ID:???
□■□■
■□■□
□■□■
■□■□
上みたいな1ピクセルごとに透過の入ったGIFファイルを背景にしる。
584Name_Not_Found:04/08/01 19:46 ID:???
>>582 CSSでやることではありません。
585Name_Not_Found:04/08/01 19:47 ID:???
いやIEの独自スタイルシートで半透明フィルタがある。
使ってる奴はいまだに見たことないが。
586582:04/08/01 20:01 ID:???
ttp://strayshape.com/nadiel/
このサイトみたいにしたいんですが。
587Name_Not_Found:04/08/01 20:09 ID:???
>>586
ソース見ろ
588Name_Not_Found:04/08/01 20:14 ID:???
>>586
これだよ。
filter: Alpha(opacity=80) background-color #000000
てかこれ使ってるやつ初めて見た……。
589586:04/08/01 20:20 ID:???
フィルターですか、以前私も使ったんですが、私が使った時は文字までボケて見難くなってしまったんですが。
また、グラデーションがかかったみたいにボケてたんですが。どこか違うんですかね?
590Name_Not_Found:04/08/01 20:24 ID:???
何つーか、お勧めできないマークアップの典型例な訳だが。
Mozillaだったら-moz-opacityで出来るな。もちろん非推奨だけど。
591Name_Not_Found:04/08/01 20:31 ID:???
スタイルシートはマークアップ言語じゃないわけだが。
592586:04/08/01 20:37 ID:???
やっぱりフィルターを使わないと無理なんですかね?
出来ればフィルターは使いたくないんですが。
593Name_Not_Found:04/08/01 20:39 ID:???
>>592
だから>>583やってみろって。
594592:04/08/01 20:45 ID:???
>>593
すいません、まだ勉強し始めて間もないので、583のやり方がわからないんですが。
595Name_Not_Found:04/08/01 20:46 ID:???
>>586
>>583が言ってるのを実際やっているサイトの例
ttp://homepage.mac.com/bluesofbondi/


>>ALL
スレ違いすマソ
596Name_Not_Found:04/08/01 21:31 ID:???
>>586
αチャンネルを指定したpng画像をテーブルやdivタグ内の背景に敷けば良いんじゃ無い。
対応できないブラウザは、ほぼ「IE」だけでしょ?(笑
597Name_Not_Found:04/08/01 21:43 ID:???
>>579
おかげさまで無事出来ました。
ありがとうございます。
598Name_Not_Found:04/08/01 21:47 ID:???
>>596
またIEか・・・
IEを使う人はどこに魅力と利点があってIEを使うのだろうか。
IEならどのページでも見れるといっても、
web制作者が泥沼の努力の玉ものってのを糞MSは知っているのだろうか。
599Name_Not_Found:04/08/01 22:02 ID:???
>598
Windows付録のブラウザがIEだからだろ
IE以外にブラウザがあることを知らない人も多い
600Name_Not_Found:04/08/01 22:10 ID:???
>>599
そうそう。そういう人をターゲットにせざるを得ない仕事って多いしね。
確かに困るけど、現状を見つめないとビジネスは回せない。
601Name_Not_Found:04/08/01 22:11 ID:???
そこが数前に問題になった部分なんだな。
MSは独自企画のIEでもIEユーザーが多いので、そのうち他のブラウザーも
IE企画に参入してくるだろうと、にらんでいるのだろうが、
現実はIE離れしていってることに気づいていない情けない会社。
そう。それがMS
602Name_Not_Found:04/08/01 22:23 ID:???
>598
制作者側が無理に対応しないで、IE批判の啓蒙することも必要なんかね
自分はMacIEで見れないページが増えたなーと感じた頃に
Netscapeに乗り換えたんだが、そういう経験がユーザー側にも必要かと

まぁIE議論は以下で
ttp://pc5.2ch.net/test/read.cgi/hp/1052099937/
603Name_Not_Found:04/08/01 22:53 ID:???
一度画面を切り替え(タブを切り替えるか、一度最小化して戻すかなど)ないと
ボックスの枠(破線)が表示されないんですが、ブラウザとかのバグですか?
それともなにかのミスですか?
.main{
position:absolute;
top:82px;
width:100%;
height:450px;
z-index:0;
clear:both;
border-top:dashed;
border-bottom:dashed;
border-width:1px;
border-color:#ffffff;
background-image:url("http://sound.jp/aroe/img/purin.gif");
background-repeat:no-repeat;
background-position:right bottom;
background-color:white;
}
こんな感じです。必要なら全部出します。
XP、Donut P(IE6.0)です。
604Name_Not_Found:04/08/01 22:55 ID:???
しまった…そのままコピペしちった…
605Name_Not_Found:04/08/01 23:22 ID:???
>>604
ウヒヒ
606Name_Not_Found:04/08/02 00:16 ID:???
自己責任。却下。に一票。

hp:Web制作管理[レス削除]
http://qb5.2ch.net/test/read.cgi/saku/1033061518/137
607Name_Not_Found:04/08/02 02:24 ID:???
うわぁ・・・痛いサイトですね
608Name_Not_Found:04/08/02 08:16 ID:???
140 名前:削除白河さやか ★ [sage] 投稿日:04/08/01 23:41 ID:???
>>137=139さん
8. URL表記・リンクのどれに該当するのでしょう?
大まかな項目だけじゃなくて、その下にある項目まで引用してくださいね。
例えば、エロ画像リンクとか宣伝とか。
どの項目にも該当しないのでしたら、削除対象外ですよー。
609Name_Not_Found:04/08/02 09:22 ID:???
http://sound.jp/aroe/ を HTML4.01 Transitional としてチェックしました。
99個のエラーがありました。このHTMLは -154点です。タグが 17種類 93組使われています。
文字コードは Shift JIS のようです。
610Name_Not_Found:04/08/02 09:42 ID:???
>>603
ボーダーが消えるのは確かIEのバグ。まあおまいの場合は本当にIEのバグで消えてるのかしらんがな。ゴミソース書くやつがわるい。
とりあえず
IE ボーダー 消える
とかでぐぐれ。確かfloat,position:relative辺りが関係して条件がそろうと消える。
611Name_Not_Found:04/08/02 11:31 ID:DdlVqNDs
IE 6.0 です.

CSS で

body{
background-color: #000000;
line-height: 160%;
margin: 1.0em 10% 1.0em 10%;
}

のように書いて適用しても効果がありません.

p, h1, h2 table の要素はちゃんと効果があります.

body だけなぜかまったくきかないんです.
IE のバグってこともなさそうだし…

何か心あたりがある人はいますか?
612Name_Not_Found:04/08/02 12:09 ID:sbLql6FY
>>611
html{
background-color: #fff;
}

こういうことかな。
613612:04/08/02 12:09 ID:???
上げちゃった...。すみません。
614Name_Not_Found:04/08/02 12:11 ID:???
>>612
htmlにはスタイル指定するべきではないと思うが。
615Name_Not_Found:04/08/02 12:15 ID:???
まぁともかく基本的にbodyの背景は窓全体に塗られるから
616Name_Not_Found:04/08/02 14:55 ID:???
924 名前: Name_Not_Found [sage] 投稿日: 04/08/01 21:14 ID:???
>>919
ieで見た限り <em class="n">高知県中村市</em>
 これはロボットでスパムと認定されるよ。

HP評価スレッドにてこのような書き込みを見つけました。
依頼者ではないのですが、この理由を教えていただきたいです。
class名はどのようにつけるのが正しいのでしょうか?
617Name_Not_Found:04/08/02 14:57 ID:???
スレ違いすまそ。書かずにいられなかったんで。スルーしてください
618Name_Not_Found:04/08/02 14:57 ID:???
自分の好きなように付けるのが正しいです
619616:04/08/02 17:00 ID:???
>>617は私ではないです。
>>618
それでいいんでしょうかねぇ…
何あちらこちらでいろいろ言われているのを目にするのですが。
620Name_Not_Found:04/08/02 17:09 ID:???
このスレに書いてあることは一部フィクションです。<em>ご利用は自己責任で。</em>

em{
color: #ff0000;
font-style: normal;
}

これでスパムなら、世の中のem要素使っているドキュメントの半分くらいはスパムだ罠。
621Name_Not_Found:04/08/02 17:41 ID:???
>>620
cssが使えればem要素使わない。
622Name_Not_Found:04/08/02 17:42 ID:???
そうですか
623Name_Not_Found:04/08/02 20:45 ID:???
>>616
書かれたサイトを見たのかい?
emで太字強調表示している部分と <em class="n">で消してる部分がある。
これは明らかにロボット対策。現行ではスパムと判断されてるんじゃない?
624Name_Not_Found:04/08/02 20:56 ID:1snsXnyt
<INPUT type=TEXT>の入力窓の大きさを指定したいんだけど
INPUT {width:130}
のように指定するとボタンからなにから全部変わってしまうので
どうしたらいいでしょうか

今はclass=textなどと付加して一時しのぎしてますが
625Name_Not_Found:04/08/02 21:11 ID:???
>624
input[type="text"]{
width:130em
}
IEとかシラネーヨ
626Name_Not_Found:04/08/02 21:27 ID:???
IE6をムシしないでくれ〜
627Name_Not_Found:04/08/02 21:31 ID:???
expressionでも使っとけ
628Name_Not_Found:04/08/02 21:32 ID:???
IEなんてのはweb制作の足枷だからな。
IEがなければweb制作者はもっと幅広いデザインが出来るのに。
IE無くなってほしい。と言うか。MSはまともにブラウザー作れないのか?
629Name_Not_Found:04/08/02 21:49 ID:???
せめてIEのシェアが3%程度だったらなあ・・
630Name_Not_Found:04/08/02 21:53 ID:???
>>621
頭の悪さを晒すのも程々に。
冗談は顔だけに。
631Name_Not_Found:04/08/02 22:03 ID:???
Web製作はMacが常識だっつーのwwww
632Name_Not_Found:04/08/02 22:15 ID:???
>>631
それは我々商業制作者だけの話だよ。
この板の多くの人たちは一般の人なので。
ね。
633Name_Not_Found:04/08/02 22:18 ID:???
Macで作ってwinで見ると、色文字画像のレンダリングの汚さにげっそり、するからね。

企業のページでテキストの部分を画像で作ってるサイトが多いが。
あれは、制作者の意図したデザインにwinでは見えないのでやむなしに画像にしてる。
winももう少し見た目にも気を使わないとな。
しかしwinは文字は汚いはウイルス満タンだは、いいところが1つもないですな。

634Name_Not_Found:04/08/02 23:07 ID:???
>>614
htmlに指定しないと、スクロールバーとかきちんと反映されないはず。
635632:04/08/02 23:16 ID:???
>>633
漏れもマクをベースに作業してはいるが、
そのようなキモイ発言は慎んだ方が良いと思う。



荒れる前に次の質問ドゾー
636Name_Not_Found:04/08/02 23:59 ID:???
>>623
スパム判定されないだろ。ロボはCSSを読まないんだから、EMの羅列には反応するが
EMにどんなクラス名があっても関係ない。
637Name_Not_Found:04/08/03 03:16 ID:???
フォントサイズ固定の文字のサイズ固定を解除するだけのCSSってできますでしょうか
638Name_Not_Found:04/08/03 03:38 ID:???
野原の松の林の陰の…
639Name_Not_Found:04/08/03 08:38 ID:???
クサムラの中で、ハァハァした。
640Name_Not_Found:04/08/03 08:40 ID:???
>>636
そのサイトまさに >EMの羅列 で、class="n"を使って見た目を制御している。
641Name_Not_Found:04/08/03 08:45 ID:???
まぁCSSは見た目を制御するものだからな
642Name_Not_Found:04/08/03 08:48 ID:???
IE糞だと言わずに、
IEで表示できるなら他でも大丈夫という認識がよいのでは?
643Name_Not_Found:04/08/03 08:56 ID:???
よーし、パパこれから"@i"で済ますぞー
644Name_Not_Found:04/08/03 09:44 ID:???

 寝る!!
645Name_Not_Found:04/08/03 09:55 ID:R8JeaIZZ
番号つきリストにCSSで横幅設定したときに、
それまで1.2.3.〜となっていたものが

1.あいうえお
1.かきくけこ
 さしすせそ
1.たちつてと
(以下略・・・)

となるのはなぜ?

また、リストの中で改行していたときに
1.かきくけこ
 さしすせそ
であったものが
 かきくけこ
1.さしすせそ
になっていることもあるのですが、
どちらかでも修正方法かヒントをいただければ嬉しいです。
646645:04/08/03 10:07 ID:R8JeaIZZ
ちなみに以下のような設定です。
OLなどに幅を設定するなどもためしてしてみましたが、
数字やリストマークが消えてしまうなど芳しい成果は得られませんでした。

LI{
width : 600px;
list-style-type : decimal;
list-style-position : inside;
}

BODYの幅設定が効かないのでLIに幅をつけようとしたのが
きっかけなのですが、いちおうDIVで囲んでやり過ごしています。
ほかに適切な方法はないものでしょうか?
647Name_Not_Found:04/08/03 10:16 ID:???
>>646
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b070.html
および
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b153.html
と思われます。
前者については、li{vertical-align: top;} でおそらく回避できます。
後者は上のページにある、div{display:list-item;} に書き直す方法を試してはどうでしょうか。

>BODYの幅設定が効かないのでLIに幅をつけようとした
ulまたはolに幅つけてはダメなのですか?
648Name_Not_Found:04/08/03 11:11 ID:???
>>642
IEでもちゃんと表示できるようにはしてまつが
IEが糞だという認識は変わりようがありませんでつ
649Name_Not_Found:04/08/03 13:13 ID:???
世界のほとんどのPCはwindowsだっつーのにMacでWeb作ってデザイナー気取りの奴がアホ
650Name_Not_Found:04/08/03 13:13 ID:???
でつまつ口調のヤツに何言われても説得力がねぇんだよな
651Name_Not_Found:04/08/03 13:16 ID:???
元々頭の悪い奴なんだよ。
652Name_Not_Found:04/08/03 13:23 ID:???
でつでつw
653Name_Not_Found:04/08/03 13:39 ID:???
>>633
基地外マカーはウイルス作者に相手にされなくて、嫉妬してるんですね。
基地外マカーはそのユーザー数が少なくて、馬鹿高い金を払って購入するのに、
ウィンドウズは安価なハードウェアがあるのを嫉妬してるんですね。
基地外マカーはアップルコンピューターに吸い取られているのに、憤慨してるんですね。
(windowsも高いけどな。けど、ハードウェアが安いから問題ない。)
基地外マカーはデザイナーに多いと聞くけど、まさしく基地外ばかりですね。
基地外マカーはデザイナーに多いと聞くけど、基地外だからマカーなんですね。
654Name_Not_Found:04/08/03 13:43 ID:???
基地外で悪いか?
655Name_Not_Found:04/08/03 14:02 ID:???
悪い
656Name_Not_Found:04/08/03 14:42 ID:???
>>653
マカーがうらやましーんですね。
自信があるならもっとゆったりしてろよ。
マック使いたくてしょうがないから無理なんだろーけど。
657Name_Not_Found:04/08/03 14:52 ID:9xSM0saA
質問です。

CSS部:
div.section { position: relative; left; 5%; width: 90%;}
div.sub_section1 { position; relative; width: 60%;}
div.sub_section2 { position; relative left; 60%; width; 40%;}

HTML部:
<body>
 <div id="section">
  <div id="sub_section1">
   〜〜〜
  </div>
  <div id="sub_section2">
   〜〜〜
  </div>
 <div>
</body>

とした場合、IE6では、
sub_section1,2の幅はsectionに対しての60%,40%になり、
sectionを6:4にきれいに分割したレイアウトになるのですが、
Mozilla1.7(Mozilla系全部?)では、
sub_section1,2の幅はbodyに対しての60%,40%になり(?)、
sub_section1,2がsection内で重なり合ってしまいます。

どのようにCSSを記述すれば、Mozilla系でもIE6の様表示できるんでしょうか?
個人的には幅をピクセル等で絶対指定をするのは避けたいのですが・・・。
658Name_Not_Found:04/08/03 14:54 ID:9xSM0saA
スミマセン訂正です。

CSS部:
#section { position: relative; left; 5%; width: 90%;}
#sub_section1 { position; relative; width: 60%;}
#sub_section2 { position; relative left; 60%; width; 40%;}

HTML部:
<body>
 <div id="section">
  <div id="sub_section1">
   〜〜〜
  </div>
  <div id="sub_section2">
   〜〜〜
  </div>
 </div>
</body>

です。
659Name_Not_Found:04/08/03 15:15 ID:ZEWKngaz
質問です

リンクテキストの下線を消したのですが、hoverの時だけ下線をあらわすように
するにはどうすればよいのでしょうか?お願いいたします。
660Name_Not_Found:04/08/03 15:18 ID:9xSM0saA
>>659
a:hover {text-decoration:underline;}
これで出来ます。
661Name_Not_Found:04/08/03 15:19 ID:???
>>660
ありがとうございました。勉強はじめたばかりです。難しいけどがんばります。
662Name_Not_Found:04/08/03 15:38 ID:???
って言うか次からは>1読んでから質問してください
663657:04/08/03 15:47 ID:???
原因がわかりました。
どうやらIE6では、ブロック要素の幅はwidth指定値がそのまま適用されるのに対し、
Mozilla系では、ブロック要素の幅はwidth指定値+padding-left値+padding-right値+(他?)となっていた事が
原因だったようです。(既出?)

まぁ原因がわかった所で対策は思いつかないんですが_no
何かいい方法はないでしょうか・・・?
664Name_Not_Found:04/08/03 15:53 ID:???
超既出。
FAQの一番初めに書いてある。
665Name_Not_Found:04/08/03 15:59 ID:???
あ〜あ 鼻高々だったのに・・・・
666657:04/08/03 15:59 ID:???
・・・ですね_no

とりあえずFAQ熟読してきます。
ご迷惑おかけしました。
667Name_Not_Found:04/08/03 16:02 ID:???
お前らは自分が井の中の蛙ってことを自覚してないよな
668Name_Not_Found:04/08/03 16:03 ID:???
うん。自覚してない。
669Name_Not_Found:04/08/03 17:36 ID:???
乞うご指導

body {
border-style:solid;
border-width:130px;
border-color:#??????
}
のborder部分に画像を表示したいのです。
何かよい方法は無いでしょうか。
さらに欲を言えば枠内側をラインで縁取りしたいのです。
おとなしくTBタグ使っとけって感じですか?
670645、646:04/08/03 17:39 ID:R8JeaIZZ
>>647
教えていただいたdisplay:list-item;とvertical-align: top;で
数字と位置の問題は両方解決しました。本当にありがとうございます。
教えていただいたサイトをじっくり読んで精進いたします。

上記タグのない状態でOLとULに幅を設定した場合ですが、
OLにした場合はリスト自体が視認できなくなり(リストマークが消滅)
ULにした場合は、数字の位置は戻るものの、幅の設定も効きませんでした。
LIの場合は前述のとおり、リストマークが1.1.1.になりその段落の最下行に移動してしまいます。

これまではDIVに幅設定をしてやり過ごしていましたが、
教えていただいたCSSのおかげでこれからは快適にレイアウトできそうです♪
671645、646、670:04/08/03 17:52 ID:R8JeaIZZ
ちなみにDIVは取っ払って、
display:list-item;もCSSのLI項目に追加しました。
672Name_Not_Found:04/08/03 17:54 ID:???
>>669
borderに画像は指定できない。
入れ子ボックスの外側ブロックにbackground-imageを指定した上で
paddingを細く取って、borderのごとく見せかけるとか。
673Name_Not_Found:04/08/03 18:33 ID:???
>>671
>display:list-item;もCSSのLI項目に追加しました。
無意味なことしなさんな。
li要素は、指定しなくてももともとlist-itemだっての。
674Name_Not_Found:04/08/03 18:39 ID:???
でつ     ←スヌーピー
675Name_Not_Found:04/08/03 20:31 ID:???
>>674
常識
676Name_Not_Found:04/08/03 20:55 ID:???
IEなどでは、手打ちな人々の利便の為に
trueをt、falseをfと略記できる仕様なのは有名な話。
@iも@mも、同様に手打ちな人々のための略記法として用意された。
つまり、これはバグなどではなく仕様。

バグだ!と得意げに大はしゃぎしてる香具師はアホ丸出し。
677Name_Not_Found:04/08/03 21:05 ID:???
>676
それはすごいねよかったよかった
678Name_Not_Found:04/08/03 21:30 ID:???
>>676
そんなの知らなかった。


しかし知ったところでIE以外の互換性を無くしてしまう罠
679Name_Not_Found:04/08/03 22:15 ID:???
ものすごい糞仕様じゃん、それって。エラーになるべき
ものはエラーにしないと。
680Name_Not_Found:04/08/03 23:34 ID:???
それはどうかな。
まあ使う際には独自仕様だという事を念頭におけばいい。
681Name_Not_Found:04/08/03 23:42 ID:???
利便性のためとかいっても、独自仕様だとかなんとか、
そういう余計なことをおぼえなければならないことを思うとぜんぜん利便性なし。
属性値のダブルクォートや、終了タグの省略についてもしかり。
682624:04/08/04 09:46 ID:TWW/N2Gy
>>625
ありがとうございます。 でも、IEでは使えませんでした。
これはIE以外のブラウザでの方言ですか?
683Name_Not_Found:04/08/04 10:04 ID:???
>>682
> これはIE以外のブラウザでの方言ですか?
逆逆。IEが標準語を知らんのだ。
684Name_Not_Found:04/08/04 10:04 ID:???
そうタイ、方言タイ!
685Name_Not_Found:04/08/04 10:18 ID:???
IE ≒ どこに行っても関西弁でしゃべりまくる関西人
ということでよろしいか?
686Name_Not_Found:04/08/04 10:23 ID:???
>>685
IE ≒ 東京で使っている言葉が標準語と勘違いしている香具師
の方が、近くね?
687Name_Not_Found:04/08/04 10:24 ID:???
>>685
それだと他のブラウザが郷土愛のない薄っぺらなものみたいに聞こえるじゃないか。
688Name_Not_Found:04/08/04 10:24 ID:???
IE準拠でサイト作ってる香具師 = 東京で使っている言葉が標準語と勘違いしている香具師
689Name_Not_Found:04/08/04 10:35 ID:???
∩( ´Α`)< 先生、質問です。
display要素って、色々ありますが、いったいどんな時に使えばいいんでしょうか。
690Name_Not_Found:04/08/04 10:35 ID:???
W3C信者 ≒ 東京で使っている言葉が標準語と勘違いしている香具師
691Name_Not_Found:04/08/04 10:36 ID:???
692689:04/08/04 10:45 ID:???
>>691
す・・・・すげぇ!!!まさかそんなに便利なものだったなんて・・・・

それを知らずに今まで来ていた自分がはずかしいです orz
693Name_Not_Found:04/08/04 10:45 ID:???
>689
display要素ってなんですか?

>690
お前だけ例えがおかしい。
694689:04/08/04 10:47 ID:???
>>693
プロパティですね。すんません。
695Name_Not_Found:04/08/04 11:00 ID:???
>>693
信者キタ━━━━━━(゚∀゚)━━━━━━!!!!
696Name_Not_Found:04/08/04 11:25 ID:???
>>695=>>690
いやいや落ち着きたまいよ
「ブラウザ」の話をしてるのに、「ブラウザ」側を書き換えた例えを出すのはどう考えてもイカレてるでしょ。
697Name_Not_Found:04/08/04 11:27 ID:???
釣られてますよ
698Name_Not_Found:04/08/04 11:28 ID:???
menuを|A|B|C|D|E| という風に<ul><li>で表示したいと思うんですけど、
ねこめしにっきのサイトがマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいニラメッコしてて吐き気してきた・・・・アーキモ。
699Name_Not_Found:04/08/04 11:33 ID:???
700Name_Not_Found:04/08/04 11:34 ID:???
>698
何故そこでありみか氏のサイトを引っ張ってきて貶すのかよくわからんが
li{
display:inline
}
とでもしとけ
701698:04/08/04 11:37 ID:???
>>700
>>7のQ8みたいな感じで、floatで出来るんじゃないんですか?
702701:04/08/04 11:39 ID:???
つーか、俺が激しく池沼だったわけだが。orz
float+display:inlineだろーがと。スレ汚しすんません。
703Name_Not_Found:04/08/04 11:46 ID:???

 なんでこう馬鹿ばっかりなんだろうなぁ・・・

    おまえもなーは聞き飽きたぞ。
704Name_Not_Found:04/08/04 11:47 ID:???
>702
displayを使った上でfloatさせる意図がワカラン
705Name_Not_Found:04/08/04 11:58 ID:???
浮動してるほうが何かかっこいいじゃん。
706Name_Not_Found:04/08/04 12:56 ID:???
山の浮動
707Name_Not_Found:04/08/04 14:13 ID:???
>>698
menuを|A|B|C|D|E| という風に<ul><li>で表示する方法はわかるんですけど、
>>698の書き込みがマジ生理的に受け付けられないんで、
どうやればいいのか教えたくないんです。
2時間以上ニラメッコしてマジで吐けばいいのに・・・・アーキモ。
708Name_Not_Found:04/08/04 14:34 ID:???
昼飯吉野家の豚丼にしようと思うんですけど、
吉野家の看板のオレンジががマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいニラメッコしてて吐き気してきた・・・・アーキモ。
709Name_Not_Found:04/08/04 14:37 ID:???
>>708に2時間ぐらいレスしようと思うんですけど、
ニラメッコがマジ生理的に受け付けられないんで、
オレンジががの「が」が一個多いので吐き気してきた・・・・アーキモ。
710Name_Not_Found:04/08/04 15:19 ID:???

うわ! アホのスクツだ。
711Name_Not_Found:04/08/04 15:26 ID:???
オナニーしようと思うんですけど、
余った皮がマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいニラメッコしてて吐き気してきた・・・・アーキモ。
712Name_Not_Found:04/08/04 15:27 ID:???
アホのスクツだ。を|アホ|のス|クツ|だ。|という風に<ul><li>で表示したいと思うんですけど、
うわ!がマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいニラメッコしてて吐き気してきた・・・・アーキモ。
713Name_Not_Found:04/08/04 15:33 ID:???
夏場に食べるアンキモはまずいね。







次の質問ドゾー
714624:04/08/04 16:17 ID:???
結局、どうしようもないということですか?
IEのシェアは95%ほどと聞いたので
IEでなんとしてもうまくやりたかったのですが
715Name_Not_Found:04/08/04 16:25 ID:???
>714
IEでやりたきゃclass指定してやるしかない
716Name_Not_Found:04/08/04 16:29 ID:???
>>624
みんながそんなことばっか言ってるから、
いつまで経っても間違った言葉でしゃべらなければイカンくなる。
あなたも、まず、うぃんどうずとIEを離れてみまそー。
少しずつでもただしーほうへ変えるために。

ただしー言葉を礼儀正しくしゃべれるなら、べつにうぃんどうずとIEでもいーんじゃけどね。

まーおいらは使わんけどね。でんでん美しくないんで。

んぢゃ。
717Name_Not_Found:04/08/04 17:36 ID:7LH4X0ph
くだらない質問で申し訳ないのですが、<p></p>と次の<p></p>の間にデフォルトで
シングルスペース(1行空行)が入るのですが、これを<br>と同じように、<p>内の
行間と同じだけの間隔に段落間を設定するには、どんなCSSの記述にすればよいの
でしょうか?
718Name_Not_Found:04/08/04 17:55 ID:???
>>717
margin:0
719Name_Not_Found:04/08/04 17:57 ID:7LH4X0ph
>>718
おぉぉぉ、うまくいきました。ありがとう。
あれだけ悩んだのに。。。。盲点でした。
720669:04/08/04 17:59 ID:???
遅くなりましたが
>>672よ、どうもありがとう
入れ子を食わず嫌いしてたけど初体験してみますよ
721Name_Not_Found:04/08/04 18:03 ID:???
>>717
ブラウザのデフォルトスタイルはできるだけ殺しておいたほうが楽だよ。

* {
margin: 0; padding: 0;
}

といった感じ。font-sizeやfont-weightなんかもやったほうがいいかも。
722Name_Not_Found:04/08/04 18:51 ID:Okgem90F
3カラムレイアウトでそれぞれのカラムの高さを
カラムの中で一番高いカラムの高さに合わせたい
のですがどのようにすれば良いのでしょうか。

3つのカラムの高さを常に同じにしておきたいのです。
723Name_Not_Found:04/08/04 18:57 ID:???
フロートで1カラムずつ回り込ませるだけで同じ高さになると思よ。
724722:04/08/04 19:42 ID:???
レスありがとうございます。

普通にやると

http://www.skipup.com/~l-_-l/web/

こんな感じでカラムごとの高さが
内容の量によって変わってしまいませんか?

ここの例でいうと右カラムの高さに
左カラムの高さを合わせたいのです
(黄色の背景を下まで伸ばしたい)。
725Name_Not_Found:04/08/04 19:45 ID:???
ああ、そういうことか。
それはカラムにheightを設定してやればいいよ。
でも個人的にブログなんかのマルチカラムってそういう凸凹が普通だと思うけどね。
726722:04/08/04 19:54 ID:???
即レス感謝します。
blogって見抜かれてしまった!

カラム全体をdivでくくって各カラムのheightを
100%などと指定しているんですけどダメでした。
px以外に指定する値ってありますか?


727Name_Not_Found:04/08/04 19:59 ID:???
>>722
カラム全体をくくっているdivに背景を設定するとか。
そうすれば各カラムの高さは追従しなくとも、
見た目上、各カラムは一番長いカラムに追従するよ。
728Name_Not_Found:04/08/04 20:01 ID:WddoE1l4
729722:04/08/04 20:10 ID:???
>>727
むむむ。その方法だと>>724のサイトみたいな
各カラムの背景色が違う場合はダメですよね。
難しい…。

blogだし凹凸は諦めます。回答ありがとうございました。

730Name_Not_Found:04/08/04 20:15 ID:???
>>722
できるよ。
ttp://www.stopdesign.com/
ここを参考にするといいよ。
731722:04/08/04 20:34 ID:???
ほ、ほんとだ。
サイトごと保存できないみたいですが
がんばって参考にしたいと思います。

ありがとうございました。
732Name_Not_Found:04/08/04 23:51 ID:s1VupOMl
ボディとテーブル内で、font-sizeはどっちも80%にしたんですが、
テーブル内の文字のほうが、明らかにボディ内の文字より小さくなります。
これって普通なんでしょうか?

<!--
body{
font-family : "MS Gothic"
font-size : 80%;
line-height : 130%;
}
table{
font-family : "MS Gothic";
font-size : 80%;
line-height : 130%;
}
-->
733Name_Not_Found:04/08/04 23:54 ID:???
>>732
テーブルはbodyの中にあるので、
80%で縮小された文字サイズがさらに80%縮小されている。
よって、テーブル内の文字の方が小さくなるのは当然。
734Name_Not_Found:04/08/05 03:03 ID:???
ptで指定すれば?
735Name_Not_Found:04/08/05 03:09 ID:???
>>732
body,td {
font-family : "MS Gothic"
font-size : 80%;
line-height : 130%;
}
とまとめたほうがよろしいのではないのでしょうか。。
736Name_Not_Found:04/08/05 06:13 ID:???
>735
なんでもまとめればいいというわけではない
ここで問題となっているfont-sizeの継承が解決しない
737Name_Not_Found:04/08/05 10:08 ID:???
回答者ALLアホ!
738Name_Not_Found:04/08/05 10:24 ID:???
font-size : 100%; なら何の問題もない。
80%の必要性を再考しる。
739Name_Not_Found:04/08/05 11:47 ID:???
俺は90%でも目がしょぼしょぼする…

740Name_Not_Found:04/08/05 12:29 ID:???
しかしアレだな・・・。
「HPのテンプレート」なんかを配布・紹介してるサイトは沢山あるけど、
ほとんどはtableガチガチのレイアウトなんだな〜。
741Name_Not_Found:04/08/05 12:44 ID:???
日記帳に書け
742兄さん一寸:04/08/05 12:51 ID:DpBsvqzp
あの、CSSを吐き出してくれるツールって何かいいのがあるんでしょうか?
 HPを作り始めたら、FONTだとかのタグは使ってはいけないとかいろいろ
書いてあって、どうも最新のHPはCSSかなとおもっていたら、XMLと
いうのがあるらしい。そこで VISUAL Studio のXMLデザイナーの
チュートリアルを色々ためしてみましたが、HP作成というよりデータ構造の
構築のような感じで、HPにするにはどうしたらいいのかわからん。
スキーマをクリックしても色選択なんて出てこんし、どうやって色つけたり
影つけたりするのか?
 データ構造のテーブルなんかどうでもいいから、普通にHPをスタイルシート
使って書きたいのだが、皆さん、まさかテキストエディターで作っておれれるの
でしょうか?
 XML+CSS的ホームページ作成ツールってあるのでしょうか?
743Name_Not_Found:04/08/05 12:53 ID:???
>>742
ネタはやめてください。
744Name_Not_Found:04/08/05 12:55 ID:???
>>742
スタイルはXLSを使う。
745Name_Not_Found:04/08/05 12:56 ID:???
どう考えてもおめえさんにぁ無理ずら。
HPBでやってつかぁさい。
746Name_Not_Found:04/08/05 13:02 ID:???
>>742
HTMLはHTML
CSSはCSS

全く別のものを一つのページとして考えるのはおかしい。
別のものなんだから抱き合わせでソース吐かせるのもヘン。


…と俺は思うんだけどどうよ?頭固いな。
747Name_Not_Found:04/08/05 13:10 ID:???
>>742
XMLじゃなくて
HTMLは4で、開発終了。
今後はXHTMLとして開発が進んでます。
XHTMLはXMLの応用規格の一つです。
748兄さん一寸:04/08/05 19:21 ID:DpBsvqzp
>ネタはやめてください。
ちゃう

>スタイルはXLSを使う。
おれの本にはCSSと書いてある。まあスタイルシートってことだ。

>どう考えてもおめえさんにぁ無理ずら。
>HPBでやってつかぁさい。
 んにゃ。
749兄さん一寸:04/08/05 19:22 ID:DpBsvqzp
>全く別のものを一つのページとして考えるのはおかしい。
>別のものなんだから抱き合わせでソース吐かせるのもヘン。

たとえば
 目次
 CCSの自動生成方法1
 CCSの自動生成方法2
 CCSの自動生成方法3
 CCSの自動生成方法4

これをだよ。
 目次をハイライトしてクリックしたら属性の選択画面がでて
  色、だとか フォントサイズだとか、■で囲むだとか
 が選択できて、チョンチョンと選択するだけでたちまちのうちに
 
 ■目次■
 1)CCSの自動生成方法1
 2)CCSの自動生成方法2
 3)CCSの自動生成方法3
 4)CCSの自動生成方法4

こういう画面にかわる。でそのときの、スタイルをスタイルシートに登録
していく。まあこういうツールがほしい。
750Name_Not_Found:04/08/05 19:24 ID:???
ネタはやめてください。
751Name_Not_Found:04/08/05 19:31 ID:???
>>749
その程度なら何だって出来るずら。
752Name_Not_Found:04/08/05 19:37 ID:???
Lunarのことか?
753兄さん一寸:04/08/05 19:40 ID:DpBsvqzp
>今後はXHTMLとして開発が進んでます。
>XHTMLはXMLの応用規格の一つです。
 それがよくわからんのですが、高橋麻奈の「やさしいXML」という本があって
 その中に、
 「
 XSLはXSLTとXSLFOからなり
  XSLTはデータを取り出す仕様で
  XSLFOは書式情報を与える仕様だが未定で現在はCSSをXLFOの代わりに使う。
 」
 と書いてあります。2001年出版の本ですが。

 ということは、XML文書とCSSがあれば、XHTMLになり、少なくとも表示だけは
厳密にできるわけですね。
754Name_Not_Found:04/08/05 19:41 ID:???
ネタはやめてください。
755兄さん一寸:04/08/05 19:42 ID:DpBsvqzp
Lunarでできるのですか? ちょいと調べてみます。
756Name_Not_Found:04/08/05 19:44 ID:???
貴男、素敵よ。
757兄さん一寸:04/08/05 19:52 ID:DpBsvqzp
>7523
 多分これです。厳密に評価するには2,3日かもっとかかりそうですので
まず前もって御礼申し上げます。
758Name_Not_Found:04/08/05 20:04 ID:???
>>749
その程度ならツールなんか使わずにいくらでもできるわけだが、
あえてツールが欲しいというのならもっと高度なことがしたいんだろうな。
次の降臨をイヤーな顔してお待ちしております。使い勝手も聞かせてね。
759Name_Not_Found:04/08/05 20:22 ID:???
XMLとか言ってた割には、かわいいツールが欲しかったのね。
760Name_Not_Found:04/08/05 20:52 ID:???
>>753
惜しい。
XML で本文構造を作って置いて、XSLT を通して、
xhtml + css を吐くために XSL が、めそ…




みんなあんまり冷たくすんなよ。
タコは大事にしろって先輩から教わったでしょ?
761Name_Not_Found:04/08/05 20:54 ID:???
食っても良いって教わった。
762Name_Not_Found:04/08/05 21:13 ID:???
ちんぽ丸出しだな
763Name_Not_Found:04/08/05 21:24 ID:???
言いかけで終わるのも…まあもう来なそうだけど。
764兄さん一寸:04/08/05 21:43 ID:DpBsvqzp
うなさんのカエルのイラストが凄いんで見とれてました。ですので
評価まだです。

>XML で本文構造を作って置いて、XSLT を通して、
>xhtml + css を吐くために XSL が、めそ…

タコたらふく食って、この続きおながいします。どうぞ。
めそ...
765兄さん一寸:04/08/05 21:58 ID:DpBsvqzp
>XMLとか言ってた割には、かわいいツールが欲しかったのね。

 いやXMLとスキーマはVS使うと簡単に作れます。Accsessや
モデラーみたいにVisualなリレーションをドラッグドロップすると
自動的に出来上がります。
出来上がったものをどう使うかはまた別問題で、そこのところがわからん。
766Name_Not_Found:04/08/06 00:09 ID:???
スレ違いの希ガス
767Name_Not_Found:04/08/06 06:52 ID:???
めそ…
768Name_Not_Found:04/08/06 07:01 ID:???
はい次どぞ〜
769Name_Not_Found:04/08/06 07:52 ID:???
このコテハン、どっかで見たなぁと思ったらレン鯖で「レンタルサーバー契約したんだからプロバイダ解約してもいいよね」
など言い出しえらい粘着したやつだったな
どこ行っても的外れなこと言って粘着してるんだな・・・
770Name_Not_Found:04/08/06 09:28 ID:???
>>769
それはどこのスレ?かなり見たいな
解約してもいいよと言って本当に解約させたかったなw
771Name_Not_Found:04/08/06 09:51 ID:OYXZASq5
background-imageを閲覧者側のブラウザのサイズに自動的に合わせるにはどうしたら良いのでしょうか?
例えば□←このくらいの画像とかを無理に引き伸ばしてブラウザサイズにする方法です。お願いします。
772Name_Not_Found:04/08/06 09:52 ID:???
っと、ageてしまいました、すみません;
773Name_Not_Found:04/08/06 09:55 ID:???
めそって何さーーー!
774Name_Not_Found:04/08/06 09:58 ID:???
はよせな
775Name_Not_Found:04/08/06 09:59 ID:???
>>771
その画像見られたもんじゃなくなるけど、それでいいの?
776Name_Not_Found:04/08/06 10:30 ID:???
>>771
厨の考えることは素晴らしいな。
777kai- ◆kai/rQnSpY :04/08/06 12:04 ID:???
>>771
少なくとも、 CSS では無理かと。
繰り返しはありますが、拡大縮小は……。
778Name_Not_Found:04/08/06 12:10 ID:???
>771
あきらめれ
だけではなんなので、代案
繰り返しても繋ぎ目が不自然でないような画像を作って、繰り返して表示
779Name_Not_Found:04/08/06 12:45 ID:???
>>775
はい、それでもOKです。ただそう言うことが出来るのであれば、やり方が知りたいだけです。
780Name_Not_Found:04/08/06 12:50 ID:???
jsとcgiをゴニョゴニョすれば出来そう。
781Name_Not_Found:04/08/06 12:56 ID:???
>>779
知ったか厨かい!
782Name_Not_Found:04/08/06 12:58 ID:???
>>779
必要でもないのに手を煩わせるなよ
783Name_Not_Found:04/08/06 13:17 ID:???
1x1の赤青チカチカのgifを引き伸ばすつもりだったりして。
784760:04/08/06 13:47 ID:???
>>761-770 くらい
誤解されやすい書き方だったかも。
タコっていうのは貶める言葉ではなくて、SE系用語で、
技術力はまだ乏しいけどそれを埋めるべく日夜努力するもの、
を指す言葉です。
タコはときに、頭の凝り固まった識者では発想できないような
何かを創り出してしまうことがあるので大事にしたほうがよい、という話。


最近はそんなこと言わないのかな… orz
785Name_Not_Found:04/08/06 13:49 ID:???
>>784
わかってるやつは流し、カン違いしたやつがレスしただけだ。気にするな。
786Name_Not_Found:04/08/06 13:53 ID:???
業界用語なんざ知りたくもねー。
787Name_Not_Found:04/08/06 14:09 ID:???
"業界用語" はとある業界で造られた業界用語だ。気を付けろ。
788Name_Not_Found:04/08/06 14:13 ID:???
a:hover {
border:solid 1 #ffffff;
}
とした時、マウスオーバーすると
リンク文などが微妙に
ぴょこっとずれますが
この動きを封じることはできますか?
789Name_Not_Found:04/08/06 14:16 ID:???
>>788
aそのものに透明のボーダーをつけておく。
最初なかったものが現れるからずれるんだ。
790Name_Not_Found:04/08/06 14:25 ID:???
>この動きを封じる

すげえ表現だな。
791Name_Not_Found:04/08/06 14:26 ID:???
>>787
なにを?
792Name_Not_Found:04/08/06 14:27 ID:???
>>791   知ったかはスルーしとけよ
793Name_Not_Found:04/08/06 14:39 ID:???
長井さんですか
794788:04/08/06 14:40 ID:???
>>789
なるほど!
それで行ってみます
どうもありがとうございました
795Name_Not_Found:04/08/06 14:43 ID:???
ねーねー、秋まで板を閉鎖しない?
見なけりゃ良いんだろうけど、過去ログ読むにも邪魔だし。
796Name_Not_Found:04/08/06 16:28 ID:???
みなさん、残念な事しましたね。
769の言うスレを見たのですが、
あのコテハンの方は、例の「LANボードをつけたいが・・・」の方ではないかと、
ふと思いました。
うまく引っ張る事ができれば、あの「LANボードをつけたいが・・・」スレ以来の
見る人、書く人、みんなが微笑む、楽しいスレにできたかも知れないのに......。
797Name_Not_Found:04/08/06 16:41 ID:???
>>771
どうしても引き伸ばしたいならCSSでも可能。
ただ background じゃなくて単純に img を下に表示するだけ。

使ってるとこ見たこと無いけど。
798Name_Not_Found:04/08/06 18:08 ID:???
>>796
不要
799Name_Not_Found:04/08/06 21:10 ID:???
>>788
出来ます。
800Name_Not_Found:04/08/06 23:57 ID:???
liはこういう要素に使う、dtはこういう要素に使う、など
体系的に学べる本かサイトないですか?Pやtable位はわかるんですけど。
英語の仕様書は解読する頃には定年迎えそうなのでjpな方向でお願いします。
801Name_Not_Found:04/08/07 00:04 ID:???
>>800
まず国語から勉強し直してください。
そしてここはcss質問スレです。
802Name_Not_Found:04/08/07 00:43 ID:???
>>800
いい歳して書店へ行って本を選ぶ事ができないあなたには、
日本語で書かれた情報でも、定年までの残り半年では、無理。
803Name_Not_Found:04/08/07 00:54 ID:???
804800:04/08/07 01:35 ID:???
書き方悪すぎたようで申し訳ない。どうか平に。
最近構造とデザインを分離するって流れで、犬も杓子もCSSじゃないですか。
で、勉強を進めるにつれてCSSって深いなぁと感激する訳ですが
色々と人様のソースを眺めていると、なんでもリストにいれたり
内容とタグが必ずしも一致してない人が多い、と感じるのです。
#divタグ地獄だったり(これは問題外ですが)

で、Pであればパラグラフを入れる、h*タグなら見出しを書くなど
わかりやすいものは良いのですが、
例えば「定義リストって普通のリストとどう違いがあるのかしら?」
「俺は本当にこのタグで囲って良いのか?」など思う今日この頃なのです。
こういうのはCSS本格的にやる上で必須の知識ですよね。
タグの持つ意味を理解した上で構造を書いてCSSでデザインを行っている
このスレなら、いい話が聞けるかなと思ったんです。
俺はこの本読んだよとか、W3C逝けバカ、とか暖かいお言葉を期待したんです。

が、、、よく考えたらHTMLスレ池だよね。(´・ω・`) ヌルーしてください。
キリ番げっとシテタワー*・*:.。.:*・(n‘∀‘)η゚・*:.。..*・*

805Name_Not_Found:04/08/07 02:28 ID:???
>>804
もう一度言います。
「まず国語から勉強し直してください。 」

多分、あなたはHTMLをちょっとだけかじっていい気分になってるだけなのだと思いますが、
それじゃあいけません。自己主張などせずにコツコツと勉強してください。
色々な意味で痛すぎる。
806Name_Not_Found:04/08/07 02:46 ID:???
>>804はスレ違いだが何を言わんとするかはわかる。
中身のない>>805のレスの方が痛い気がする。
807Name_Not_Found:04/08/07 03:49 ID:???
相変わらずこのスレは馬鹿を集めてるんだな
誘蛾灯みたいな作用があるんだろな

HTMLの仕様書和訳すら見つけられないアフォと
そこへ一発で誘導できないアフォ
808Name_Not_Found:04/08/07 04:20 ID:???
>>807
そしてアナタもここに集められたうちの一人。











ヲレモナー( ´∀`)
809Name_Not_Found:04/08/07 08:08 ID:???
>>800
書籍読むよりこの板の初心者スレやそこのリンク先見ればいいよ。

タグの使い方はちゃんと構造が正しければ自由。というのがタグ自体が少ない。
階層構造を表現することも出来ないし(それでパンクズもめてるし)、これにはこれ!
という一問一答は必ずしも期待できないはず。

マニアックな話を聞きたいならストリクトHTMLスレでも覗くといいかもしれないけど、
頭でっかちな話になるから好きにするといいかも
810Name_Not_Found:04/08/07 11:18 ID:???
>>809
>階層構造を表現することも出来ないし(それでパンクズもめてるし)、
何言ってんの?
パンクズはやり方が色々あるだけで、階層構造が表現できないからもめてるわけではない。
っていうか仕様書読めよ

811Name_Not_Found:04/08/07 11:21 ID:???
こういうレイアウトはCSSで可能ですか?
http://f-ss.org/bbs3/img-box/img20040715025043.jpg
812Name_Not_Found:04/08/07 11:25 ID:???
>>811
グロ
813Name_Not_Found:04/08/07 11:30 ID:???
>>811
1ドット単位でテーブル作れば可能
814Name_Not_Found:04/08/07 13:37 ID:???
811<<
できればJavaScriptの知識もほしいところだな


次!↓
815Name_Not_Found:04/08/07 14:50 ID:???
divやpreなどのブロック要素でボーダーをつけると
中身の行が短くてもボーダーの右端はページの右端までいってしまいますが
これをちょうど中身に合わせた大きさで収めるようにできるでしょうか?
(widthに値を設定するのでなしに)

margin-right: auto;
とか試してみても全然うまくいきません。
816Name_Not_Found:04/08/07 14:56 ID:???
変えても問題ないなら

*** {
display : inline;
border : 云々;
}

ブロック要素である以上、枠線が右端まで行くのは仕方ないかと。
って俺なんかヘンなこと言ってる?エロイ人補足キボンヌ↓
817Name_Not_Found:04/08/07 17:48 ID:M+4TxP/c
>>7に書いてある背景画像を2つ指定する方法についてですが、
1要素につき1つだけということは、1ページにつき1つということでしょうか?
要素を重ねるとありますが、この方法を具体的に教えていただけないでしょうか?
818Name_Not_Found:04/08/07 17:55 ID:???
>>817
>1要素につき1つだけということは、1ページにつき1つということでしょうか?
ちゃう。要素とはBODYとかDIVとか。
BODYとDIVそれぞれに背景指定汁。
819Name_Not_Found:04/08/07 19:48 ID:???
>804
Webサイト制作初心者用質問スレ vol.99
http://pc5.2ch.net/test/read.cgi/hp/1091428116/
820Name_Not_Found:04/08/07 20:30 ID:b/RTR9I0
■■■ お勧めレンタルサーバー ■■■

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

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

A:無難なサーバー。 お勧め!!  
 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/  

B:ある程度の障害は大目に。  
 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/
821Name_Not_Found:04/08/08 08:12 ID:???
811は811のちょっと前で質問してたアフォが暴れたのか?
822Name_Not_Found:04/08/08 11:44 ID:???
アーキモ
823Name_Not_Found:04/08/08 11:58 ID:???
トラウマなるからグロとか見ないほうがいいよ
824Name_Not_Found:04/08/08 12:31 ID:???
日々の生活でなれたので別になんとも思わない。

皆さんあと一ヶ月の辛抱ですよ
825Name_Not_Found:04/08/08 17:52 ID:???
811の画像は、精神的につらいだけでPC的には安全だよね?
最近画像から感染するウイルスが流行ってるから怖いね。一応ウイルスバスター使ってるけど。
826Name_Not_Found:04/08/08 18:47 ID:???
>825
そんなビビらんでもw
827Name_Not_Found:04/08/08 22:07 ID:???
俺は811の画像で癒されたけどなあ
828Name_Not_Found:04/08/08 22:42 ID:???
現在、テーブルタグでレイアウトしているサイトのデザインを
CSSだけできちんとデザインしなおそうと考えています。

超初心者な質問かもしれませんが、
UL、LIタグでリスト表示させた時の、字下げの幅を変更したいのですが、
この幅を任意の幅に設定するにはどうすればいいのでしょうか?

hoge
・hoge01
・hoge02
・hoge03

ここの幅

marginで±の値を指定することで、相対的に調整する事はできるのですが、
この幅を仮に20pxなら、20pxぴったりに指定する方法が、どうしてもわかりません。
どうか、よろしくお願いします。
829828:04/08/08 22:43 ID:???
なんか、矢印の位置がずれてしまった…
黒丸の前の字下げの幅を変えたいということです。
830Name_Not_Found:04/08/08 22:48 ID:???
ブラウザのデフォルトスタイルシート
http://is.vis.ne.jp/notes/browser/default_style.xhtml
/*
* Internet Explorer 6.0,
* Internet Explorer 5.5,
* Internet Explorer 5.0,
* Opera 7.2
*/
ol, ul {margin-left: 40px;}
/*
* Internet Explorer for Mac 5.2
*/
ol, ul {margin-left: 2.5em;}
/*
* Mozilla 1.6,
* Netscape 7.1,
* Netscape 6.2,
* Safari 1.2,
* OmniWeb 4.5
*/
ol, ul {padding-left: 40px;}
/*
* Opera 6.0
*/
ol, ul {margin-left: 40px;}
li {margin: 5px 0;}
831Name_Not_Found:04/08/08 22:49 ID:???
>>828
何が言いたいのかよくわからんが
・と本文の間をいじりたいのならpadding
832kai-@ビバ夏休 ◆kai/rQnSpY :04/08/08 22:55 ID:???
>>828
←20px→ ・ hoge
←20px→ ・ hage
←20px→ ・ hige

こんな感じで 20px 空けるのか、

・ ←20px→ hoge
・ ←20px→ hage
・ ←20px→ hige

この様に 20px 空けるのかがいまいち。

前者なら margin : * * * 20px ;
後者なら padding : * * * 20px ;
で良いと思います……どうも、質問に対する解釈を間違えている気はしますが。
833kai-@ビバ夏休 ◆kai/rQnSpY :04/08/08 22:56 ID:???
被ってしまった…… _| ̄|○
834828:04/08/08 23:01 ID:???
>>830
ul {
margin-left: 0px;
padding-left: 0px;
}
li {
margin-left: 20px;
padding-left: 0px;
}

と指定することで、意図した用に指定できました、有難うございます。

>>831
説明が下手ですいませんでした。
835Name_Not_Found:04/08/08 23:07 ID:???
>>832
前者のようにしたかったのでした。

説明下手ですいませんでした。
836Name_Not_Found:04/08/08 23:17 ID:???
>>834
ul {
margin-left: 0;
padding-left: 20px;
}
だけで済むはず。li要素への指定は不要。
もしくは
ul {
margin-left: 20px;
padding-left: 0;
}
でもよい。

837828 834 835:04/08/08 23:32 ID:???
>>836
なるほど、有難うございます。
838Name_Not_Found:04/08/09 15:18 ID:???
|■▲▼         |   ←こういうのを

|■         ▲▼|   ←こういう風にしたいんですが


どうしたらいけますか?
<SPAN>で右寄せしたらできると思ったんですが、
ブロック要素でしかtext-alignは使えないみたいだし
<div>つかうと前後に改行入って見てくれが悪いし・・・
839Name_Not_Found:04/08/09 15:21 ID:???
>>838
float
840Name_Not_Found:04/08/09 15:23 ID:???
あれ?floatって画像用じゃなかったでしたっけ?
841Name_Not_Found:04/08/09 15:24 ID:???
どんなボケだよ。
842Name_Not_Found:04/08/09 15:25 ID:???
スミマセン
どっかにそんな事が書いてあった記憶があったので・・・
ありがとうございました。
843Name_Not_Found:04/08/09 15:27 ID:???
>>840
つまり、

だけのブロックレベルと、
▲▼
だけのブロックレベルにわけて、
それをfloatってわけだ。   
844Name_Not_Found:04/08/09 16:01 ID:???
>>843
まわりこませるわけだから、
<div style="float:right;">▲▼</div><div>■</div>
って、書けばいいんですよね?
845Name_Not_Found:04/08/09 16:08 ID:???
>>844
それでもいいんだが、それだと「CSSを適応するためだけに無理矢理書いた文書」だよな。
そんなやり方するくらいならテーブル使うといい。

なぜ、■が左にあって(左にある理由じゃなくて、■が独立してる理由ね)、
▲▼が右にある、という形になるのか、って考えていくと、それぞれが「どういうブロックレベル要素」でマーク付けすべきか見えてくると思うが。

余談が長すぎたな。すまん。
846Name_Not_Found:04/08/09 16:08 ID:???
>>844
ああ、あとfloatにはwidthつけとけよー
847Name_Not_Found:04/08/09 16:52 ID:???
絶対配置でも使っとけ
848Name_Not_Found:04/08/09 18:45 ID:???
HPBがおすすめだい。
849Name_Not_Found:04/08/09 19:11 ID:???
初めてスタイルシートでサイト作ってみたんだが、どこもかしこもdivとspanで房になっちまった。
しかも、サイトの構成で両端背景で真ん中650pxのとこにコンテンツが表示されるようにしたくて、
一番外回りをこんな風に書いて括ったんだが、表示してみたらIEとNCで横幅が違うんだ。どうしてだかワカンネ
しかもど真ん中に表示する方法が分からず左から座標指定してるんだが、真ん中表示の方法ってあるのか?
教えてチャンで申し訳ない。どうか教えてくれ

div.in { position:relative;
width:650px;
left:50px;
margin:0;
padding:0 10px;
background-color:#ffffff;}
850Name_Not_Found:04/08/09 19:19 ID:???
alignをセンターに
851Name_Not_Found:04/08/09 19:20 ID:???
>>849
既出

>横幅
>>830

>真中によせる
>>5-8
852Name_Not_Found:04/08/09 19:21 ID:???
>>849
FAQ(>>5-8)を読んでください。
853851:04/08/09 19:23 ID:???
あらやだ。
ケコーン>>852
854849:04/08/09 19:40 ID:???
>>850-853
thx!FAQに載ってるような事聞いてスマソ
もうちょっと詳しくなるよう出直してくる
align センターってすごい初歩だよな
テーブルレイアウトんときから使ってたからすっかり頭から抜けていた
855Name_Not_Found:04/08/09 19:43 ID:???
FAQってなんて読むの?
ファッキュー?
856Name_Not_Found:04/08/09 19:55 ID:???
口に出すときは「えふえーきゅー」だが
意味は「何回も同じこと聞いてくるんじゃねえファックユー」ってこと
857Name_Not_Found:04/08/09 19:59 ID:???
Q&Aは
クエスチョン&アンサーで、
FAQ何の略だ?
858Name_Not_Found:04/08/09 20:02 ID:???
>>857
FAQ見てこい。
859Name_Not_Found:04/08/09 20:27 ID:???
ファンタスティック アメイジング クエスト

新作RPG?
860Name_Not_Found:04/08/09 20:41 ID:???
全米が泣いた。
861Name_Not_Found:04/08/09 22:19 ID:???
862Name_Not_Found:04/08/10 11:09 ID:???
>>845
横から見てたんだけど結局どうやるのん?
863Name_Not_Found:04/08/10 11:47 ID:???
むしろ>859の親が泣いた
864Name_Not_Found:04/08/10 12:09 ID:???
>>862
それぞれ適切にマークアップして、
インラインレベル要素の場合はブロックにしてから、
float 。
865昔の人:04/08/10 12:29 ID:???
いい加減なことばかり教へてはいけません。
わざわざブロック要素としてマークアップする必要は無いはず。
インライン要素でも、floatかければブロック・ボックス扱ひになると仕樣書にあるでせう?
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#floats

866Name_Not_Found:04/08/10 12:35 ID:???
・CSS2の仕様書の邦訳(個人訳)
 http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html

↑つながらないね。またサイト消滅ですか?
867Name_Not_Found:04/08/10 12:36 ID:???
864 100叩き
868Name_Not_Found:04/08/10 12:53 ID:???
http://cssbug.at.infoseek.co.jp/detail/mozilla/b047.html
絶対配置(position: absolute;)/固定配置/フロート状態にした要素はdisplayプロパティが強制的に「block」に設定される
CSS2.1では、displayプロパティがlist-item値の要素はフロート化してもlist-item値のままであると定義されています。このため、リストマーカーが消えないのが正しいことになります。
869864:04/08/10 13:02 ID:???
おおおおお。
いままで何の疑いもなく、

display: block;
width: 適宜;
float: left;

とか、コンボで叩いていた。
スマンカッタ。
870862:04/08/10 13:55 ID:???
>>864
すまんがソース書いてくれん?
871864:04/08/10 14:05 ID:???
<tag_1>▲▼</tag_1><tag_2>■</tag_2>

tag_1{
    float: left;
    width: 適宜;
}
tag_2{
    display: block;
    text-align: right;
}

でいいんじゃないの?
872862:04/08/10 14:23 ID:???
>>871
サンクスコ
873Name_Not_Found:04/08/10 16:29 ID:???
うむ。久々にちゃんとした流れだったな。
874Name_Not_Found:04/08/10 17:05 ID:???
>857

Frequently Answered Questions
Frequency Answer and Question
875Name_Not_Found:04/08/10 17:20 ID:???
876Name_Not_Found:04/08/10 17:21 ID:???
おまいら脱線しすぎ
877Name_Not_Found:04/08/10 17:27 ID:???
>>876
すまん。初心者スレとごっちゃになってた。
878Name_Not_Found:04/08/10 18:02 ID:752XY8RO
<li></li>内にblockに指定した<ins>を挿入すると
各<li>の間が開きすぎてしまう。
http://www.geocities.jp/sugi103/css-test.html

1.何故でしょう。
2.何かよい方法は無いでしょうか。
879Name_Not_Found:04/08/10 18:15 ID:???
880Name_Not_Found:04/08/10 18:18 ID:???
>>878
1.IEのバグ
2.
.brdr ol li{border:1px solid #fff;}
881Name_Not_Found:04/08/10 20:06 ID:???
>878
そのページ マクのIE5とNetscape7で文字化けするんだが
なんでだろ
882Name_Not_Found:04/08/10 20:38 ID:???
#adsense{
position:absolute;
left:620px;
width:240


代替広告にテキスト広告を使いたいと思っています。(google adsense
それでwidth:240を超えたら...か省略するようにしたいのですが、
どうやったらいいのでしょうか?

http://www5e.biglobe.ne.jp/~access_r/hp/css/css_property.html#text
http://www5e.biglobe.ne.jp/~access_r/hp/css/css_property.html#look
みても具体的にどう修正すればいいかわからなくて。
(´・ω・`)ショボーン どなたか教えてください。
883Name_Not_Found:04/08/10 20:39 ID:???
UTF-8で書いてあるのにShift_JISが指定されてるからじゃないの?
884882:04/08/10 20:43 ID:???
>883
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
って入れてるから問題ないと思うんだけど、間違ってる?
885Name_Not_Found:04/08/10 20:51 ID:???
>>884
ん〜、UTF-8で書いてあるなら、こうじゃないの?
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
886883,885:04/08/10 20:55 ID:???
って、おめーへのレスじゃねぇよ(#゜Д゜)
>>883 は、>>881に対するレス。

>>882
他人の金儲けに協力する気はねぇ( ´д`)
887882:04/08/10 20:59 ID:???
>886
すみません。

>他人の金儲けに協力する気はねぇ( ´д`)
いやぁ、bannerだと見る人がうざがるから
テキスト広告にしようと。鯖代だけでも稼ぎたくて・・・
888882:04/08/10 21:09 ID:???
http://www5e.biglobe.ne.jp/~access_r/hp/css/css_text_013.html
で解決しました。
お騒がせしました。
889Name_Not_Found:04/08/10 21:19 ID:???
続けて質問してすみません。

#adsense{
position:absolute;
left:620px;
width:240

ってなっているものなのですが、
位置指定を絶対的なものではなくて
相対的なものにするにはどうすればいいのでしょうか?

今のままならブラウザーの大きさを変えても同じところに
表示されるのですが、これをブラウザーの大きさに従って
同じ間隔で縮小拡大するようにしたいです。


よろしくお願いします
890Name_Not_Found:04/08/10 21:32 ID:???
>width:240
単位は?
891Name_Not_Found
>>889
とりあえずwidthに単位付けれ。まぁ多分コピペミスだろうけど。
ブラウザサイズにあわせるなら%指定。いっぺん相対サイズについて学んで来い