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

<p>以外のcssが適用されません。何故なんでしょうか？

-----cssファイル------
body{font-size:small;color:#454545;background-color:transparent;
background-image:url("http://********.gif") no-repeat bottom right;
background-attachment:fixed;
}

a:link{color:#FA8072;text-decoration:none;}
a:visited{color:#B0C4DE;text-decoration:none;}
a:hover{color:#CD5C5C;}
a:active{color:#BDB76B;}

#center{text-align:center}
div.center{text-align:center}
#sub{color:#336699;font-size:x-small;}

.owaku{width:80%;margin-left:auto;margin-right:auto;margin-top:50;}
.tw{width:98%;border:1px dotted #808080;}
.t{color:#345a76;font-weight:bold;float: left;}
.h{margin:5 0 0 10;line-height:150%;}/*hoverカラー*/
div.hi { color:#a9a9a9;font-size:xx-small;float: right; }
--------------

次にhtmlを書きます。

719 ：教えて下さい。：04/10/19 07:33:02 ID:???

----htmlファイル-----

<html>
<head>
<title>雑記</title>
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen.print">
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
</head>
<body>
<div id="center">
∞雑記∞<br>
<span id="sub">取り留めもない事をつらつらと。</span><br>

</div>

<div class="owaku"><span class="tw"><span class="t">
■潜在意識？
</span><div class="hi">
20041009
</div></span><div class="h">
本文<BR>
</div></div>

<div id="center">
<p><a href="zakkiindexmenu.html">雑記目次へ</a></p>
</div>

</body>
</html>
---------

よろしくお願いします。

720 ：教えて下さい。：04/10/19 07:39:18 ID:???

書き込み切れなかったので、環境等を書きます。

私が見ているのは、macOS9、IE5.5で、これだと正常に表示されます。
が、ネットカフェで見た時には、<p>以外のCSSが、全く適用されていませんでした。
タグは手打ちで作成しています。

721 ：Name_Not_Found：04/10/19 08:07:38 ID:???

そもそも見る限りPにCSSが指定されて無いのだが

722 ：教えて下さい。：04/10/19 08:23:05 ID:???

あっ、ごめんなさい。ここ以外のファイルで、P指定があるのです。
その<p>指定のあるCSSは、このhtmlじゃないので書きませんでした…

723 ：Name_Not_Found：04/10/19 08:43:54 ID:???

なんか絵に描いたようなdiv厨span厨だなあ。
突っ込みどころはいろいろあるが、とりあえず、

<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen.print">
　　↓
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen,print">

かと。
>>722の言ってる内容がよくわからん。結局>>718以外のスタイルシートを>>719に
適用しているんだかしてないんだか。情報の小出しは困りますが？

724 ：教えて下さい。：04/10/19 09:05:57 ID:???

すいません、情報の小出しではないのです。
>>721に指摘され、気付いたのです。

公表した『zakkimenu.html』に適用される『zakki.css1』にはp{}がなく、
公表していない『a.html』に適用される『a.css1』には、p{}が記述されていた。
両方うpしてあるのですが、ネットカフェから見た所、そのp{}だけしか
適用されてなかったので、よく考えずに、『zakki』の方を公表してしまった
のでした。

とりあえずコンマ直してきます

725 ：Name_Not_Found：04/10/19 09:50:49 ID:???

何言ってるかわかんねぇよ

726 ：Name_Not_Found：04/10/19 12:27:31 ID:???

>>720
>私が見ているのは、macOS9、IE5.5で、
そもそもMacIEのヴァージョンは5.2位までで、5.5まで行ってないはずだけど？

727 ：Name_Not_Found：04/10/19 12:29:13 ID:2btUWTuC

通常のリンクでは hover させて、画像のリンクの場合は hover させたくない
場合の CSS はどのように記述すればよいのでしょうか？

728 ：Name_Not_Found：04/10/19 12:36:23 ID:???

>>727
「hover させて」とは「hover すると変化させて」の意味ですか？
基礎なので>>4を読めばわかるはずですが、読んでないのかな。
画像（img要素）を括るa要素にclassを附し、
a.class名:hover　{...} と、
a:hoverへのスタイル指定を打ち消すスタイルを適宜指定する。

729 ：Name_Not_Found：04/10/19 15:40:40 ID:bUrDR4z3

>>724
問題となるページを出して質問しろよ
お前だって何でもないソースを出して困ってますって言われても答えるのに困るだろ？

730 ：教えて下さい。：04/10/19 15:48:35 ID:???

たびたびすみません(´･ω･`)
自分でも訳わからんので、改めて整理して聞き直します。

作成環境はメモに手書きです。
mac OS9　IE5.1で見ると、ちゃんとcssが適用されているのですが、
ネットカフェ等に行き、windowsのIEで見ると、<p>以外のcssが、全く適用されていないのです。
以下にhtmlファイルと、読み込むcssを記述します。

731 ：教えて下さい。--htmlファイルです：04/10/19 15:49:23 ID:???

<html>
<head>
<title>雑記</title>
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen,print">
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">

</head>
<body>
<div id="center">
∞雑記∞<br>
<span id="sub">取り留めもない事をつらつらと。</span><br>

</div>

<div class="owaku"><span class="tw"><span class="t">
■タイトル
</span><div class="hi">
20041009
</div></span><div class="h">
本文本文<BR>
本文本文<BR>
</div></div>

<div id="center">
<p><a href="kakoindexmenu.html">過去目次へ</a></p>
</div>
</body>
</html>

732 ：教えて下さい。--cssファイルです：04/10/19 15:51:54 ID:???

body{font-size:small;color:#454545;background-color:transparent;
background-image:url("http://********.gif") no-repeat bottom right;
background-attachment:fixed;}

a:link{color:#FA8072;text-decoration:none;}
a:visited{color:#B0C4DE;text-decoration:none;}
a:hover{color:#CD5C5C;}
a:active{color:#BDB76B;}

#center{text-align:center}
div.center{text-align:center}
#sub{color:#336699;font-size:x-small;}

.owaku{width:80%;margin-left:auto;margin-right:auto;margin-top:50;}
.tw{width:98%;border:1px dotted #808080;}
.t{color:#345a76;font-weight:bold;float: left;}
.h{margin:5 0 0 10;line-height:150%;}/*hoverカラー*/
div.hi { color:#a9a9a9;font-size:xx-small;float: right; }
p{text-align:center;color:#000000;}

-----------

以上です。どうか御指導よろしくお願いいたします。

733 ：Name_Not_Found：04/10/19 16:07:57 ID:???

適用されていますが何か?

734 ：Name_Not_Found：04/10/19 16:36:46 ID:???

つーかネットカフェで使っているIEのバージョンはなんなんだよ？
ほんと小出しちゃんだな

735 ：教えて下さい。：04/10/19 16:52:51 ID:???

>>733
うそっ
ちゃんとタイトルに枠とかついてますか!?

>>734
知らんのです。なので書きませんでした。

736 ：Name_Not_Found：04/10/19 17:33:30 ID:???

Win版IEのバージョンの確認方法も知らないのに他人を嘘つき呼ばわりか

737 ：Name_Not_Found：04/10/19 17:39:17 ID:RQSvQubf

CSSでレイアウトする場合 position と float　どちらを
利用した方が良いでしょうか？
その理由も教えてくれたら嬉しいです

738 ：Name_Not_Found：04/10/19 18:01:02 ID:???

CSSの段組みレイアウトで質問です。

#navと#contentを左右に並べたレイアウトを作ってるんですが、
どちらかの天地に併せてもう一方も同じだけの天地にさせるには
どの様に組めば良いのでしょうか。

バックグラウンドの色を左右で変えているのですが、
#nav側の内容量に対して#content側の内容が多い場合、下図の様に
なってしまいます。
┌┬───┐
││　　　│
└┤　　　│
　│　　　│
　└───┘
これを左右均等に
┌┬───┐
││　　　│
││　　　│
││　　　│
└┴───┘
としたいのですが…。

739 ：Name_Not_Found：04/10/19 18:01:07 ID:???

>737
Position Float
それぞれどんな動きをするか理解しての発言か？

740 ：Name_Not_Found：04/10/19 18:57:14 ID:???

>>737
適材適所

741 ：Name_Not_Found：04/10/19 18:59:53 ID:???

>>739
お前も理解してるのか問い詰めたい

742 ：Name_Not_Found：04/10/19 19:03:21 ID:???

>>738
背景を画像化するのが簡単、と教えられた。

ttp://www.stopdesign.com/
あとここ。

743 ：Name_Not_Found：04/10/19 20:55:33 ID:???

>>738
ソース出してね。
画像なんか使用せんでも、#navと#contentの親要素（bodyとか）の背景色を
うまく透かして見た目#navが#contentと同じ高さになる風に仕組めばいい。
body {background-color:yellow;}
#nav {background-color:transparent; float:left;width:10em;}
#content {backgtound-color:red; margin-left:10em;}

744 ：Name_Not_Found：04/10/19 20:57:35 ID:???

>>731
なんでid="center"が二つもあるんだよっ。classとidの差がわかってないだろ。
基礎からやり直しなさい。

745 ：Name_Not_Found：04/10/19 21:02:34 ID:???

>>732
>margin-top:50
単位を省略してはいけない。
>.t{color:#345a76;font-weight:bold;float: left;}
floatさせる要素にはwidth指定が必須。

WinIEの表示確認はここで出来る。
　http://www.danvine.com/iecapture/

746 ：長文スマソ：04/10/20 00:31:23 ID:???

<html>
<head>
<style type="text/css">
body{background-color:#cccccc;}
#parent {width:600px;background-color:#cc0000;border:1px solid #666666;}
#c1 {background-color:#00cc00;width:400px;float:left;}
#c2 {background-color:#0000cc;width:200px;float:right;}
</style>
</head>
<body bgcolor="#ff0000">
<div id="parent">
<div id="c1">bbb<br>bbb<br>bbb<br>bbb</div>
<div id="c2">ccc<br>ccc</div>
</div>
</body>
</html>

これをIE6で見るとc1とc2はparentの中に入るんですが、firefox1.0だとc1とc2がparentの外に出てしまいます。
firefoxでfloatを用いてIE6のように見せるためにはどうしたらよいのでしょうか？

747 ：Name_Not_Found：04/10/20 00:58:27 ID:???

>>746
そのCSSを見る限り、FireFoxが正しくて、IEが間違った表示をしているように
思える。つまるところ、何がしたいわけ？

幅600ピクセルの枠内に2ペインで400ピクセルと200ピクセルの枠を並べたいの？

748 ：Name_Not_Found：04/10/20 01:01:38 ID:???

>>746　ＦＡＱを見てないね？　たぶんＡ４（>>6）に解決法があるよ。

749 ：746：04/10/20 01:04:16 ID:???

>>747 >>748
ありがとうございます。firefoxの解釈が正しいんですね
すみません>>6逝ってきます

750 ：Name_Not_Found：04/10/20 03:44:10 ID:???

質問したいのですが
■あいうえお■
■→青
あいうえお→赤

CSS　
.c1 {color:#0000ff}
.c2 {color:#ff0000}

html
<p class="c1">■</p><p class="c2">あいうえお</p><p class="c1">■</p>

だと改行されてずれてしまいます。
このような場合はどのようにすればよいのでしょうか？
よろしくお願いします。

751 ：Name_Not_Found：04/10/20 03:47:06 ID:???

<p class="c1">■<span class="c2">あいうえお</span>■</p>

752 ：750：04/10/20 04:02:20 ID:???

>751
できました。
ありがとうございました。

753 ：Name_Not_Found：04/10/20 04:04:37 ID:???

うむ

754 ：Name_Not_Found：04/10/20 07:13:13 ID:???

素直に<FONT>～</FONT>使った方がいいよ。
地の文自体がCSSを使うようなHTMLになってない。（■とか）

755 ：754：04/10/20 07:18:46 ID:???

×HTMLに
○体裁に

756 ：Name_Not_Found：04/10/20 07:46:25 ID:???

>754は、例えというものを知らないらしい。

757 ：Name_Not_Found：04/10/20 07:50:53 ID:???

くだらん例えを教えんな。

758 ：Name_Not_Found：04/10/20 07:54:22 ID:???

「CSSを使うような地の文」

　　　説明してもらおうか？

759 ：Name_Not_Found：04/10/20 08:00:13 ID:???

どんな例えをしたのか説明してもらおうか？

760 ：Name_Not_Found：04/10/20 08:01:42 ID:???

おまえ面白い香具師だな。

761 ：Name_Not_Found：04/10/20 08:06:49 ID:???

くだらん言葉遊びでスレ埋めるな。
次の質問ﾄﾞｿﾞｰ↓

762 ：Name_Not_Found：04/10/20 08:10:23 ID:???

　ふんにゃか　ふんにゃか

763 ：Name_Not_Found：04/10/20 09:15:04 ID:???

ソースと環境と質問内容を書いてくれないと答えられません

764 ：Name_Not_Found：04/10/20 09:53:29 ID:T9V7lHsv

うんちっちいいいい

765 ：教えて下さい。：04/10/20 09:57:06 ID:???

>>744,745
基礎…わかってるつもりだったのですが、とんだ勘違いのようですね。
やっぱり本だけじゃダメか＿|￣|○
それから、確認できるURLありがとうございました。
負荷大杉？で確認できなかったので、今度また試してみます。

勉強しに逝ってきます。ちゃんと答えてもらえるようにがんばります(`･ω･´)

766 ：Name_Not_Found：04/10/20 11:12:47 ID:???

CSSは何を使ってレイアウトするんだ…
一応HPとか過去スレを呼んだけどposition,floatしか分からんかった.
やっぱページのレイアウトはposition,floatしかないの？

767 ：Name_Not_Found：04/10/20 11:19:42 ID:???

>766
何が言いたいんだ？
レイアウトの意味が分からんのか？

768 ：Name_Not_Found：04/10/20 11:26:10 ID:???

HTMLはCSSを使ってレイアウトするんです

769 ：Name_Not_Found：04/10/20 12:07:24 ID:???

簡単に言うと　CCSでページをレイアウトする場合
どのタグを使うか聞いてるんだろ？

まあ俺はテーブルレイアウト派だがな

770 ：Name_Not_Found：04/10/20 12:15:50 ID:???

absoluteとかrelativeを使うレイアウトは？
と聞いているのでは？

771 ：Name_Not_Found：04/10/20 12:21:53 ID:???

>>766 は初心者スレあたりで、
「CSSはどのタグをつかってレイアウトするんだ…」と書いて
邪険に扱われてここにきた模様。優しくしてあげてください。

で、>>766
css を使う場合、おそらく >>766 が今まで覚えてきたhtmlの使い方
があまり役に立たなくなるから、今一度カンザキあたりで、
htmlについて学んでみることをオススメしたい。

772 ：Name_Not_Found：04/10/20 14:04:04 ID:???

カンザキとか初めて聞いた

773 ：Name_Not_Found：04/10/20 14:53:08 ID:???

>>772
>>4の一番上のサイト。
神崎と内田を知らずにして質問するなかれ。

774 ：Name_Not_Found：04/10/20 18:10:54 ID:???

>>742,743
ありがとうございます。返事が遅くなってすみません。

>>743さんの方法でなんとか形になりました。
あとソースを出さなくてごめんなさい。
基本的な事はWEBや書籍で勉強しているのですが、
実践でどの様にして行けば良いのか勉強の為、
DWMX2004の雛形にある「右ナビゲーション２列横…」をベースに
色々変更しながらやってます。

>>742さんから紹介していただいたリンク先も大変参考になりました。

775 ：Name_Not_Found：04/10/20 19:03:58 ID:???

擬似フレームなんだけど、画面を二分割しようと思ったら
最低限どんなけソースに書けばいいの？

776 ：Name_Not_Found：04/10/20 19:11:28 ID:???

.menu { position : absolute ; top : 0px ; left : 0px ; width : 20% ; }
.main { position: absolute ; top 0px ; left : 20% ; width : 80% ; }
不完全だけど、二列に沸けられる。……かな？

777 ：Name_Not_Found：04/10/20 19:12:19 ID:???

>>775
>>7

778 ：774：04/10/20 22:17:47 ID:???

#navbarにbodyの背景色が透ける様にして上手く行ったのですが、
#siteInfo以降にbodyの背景色が出てしまうので、#contentと#navbarの親要素
として#mainを作りました。bodyの背景色の指定を無し、#mainにグリーンを
指定して、#navBarにグリーンが透ける事を狙ったのですが上手く行きません。
どの様にしたら良いのでしょうか…。どなたかアドバイスください。

┌─────────┐ #masthead
├───────┬─┤ ------------------------
│　　　　　　　│　│ #main
│　　　　　　　│　│ #content , #navBar
├───────┴─┤ ------------------------
└─────────┘ #siteInfo

body{color: #333333; line-height: 1.166; margin: 0px;
padding: 0px; overflow: auto;}

#masthead{padding: 5px 0px; border-bottom: 1px solid #cccccc;
width: 100%;background-color: #FFFFCC; clear: both;}

#main {background-color: #669900;}

#content{float:left;margin: 0;padding: 1%;background-color: #FFFFFF;
border-right: thin solid #999999;text-align: center;width: 70%;}

#navBar{float: right; overflow: visible; background-color: transparent;
padding: 5px; width: 26%;}

#siteInfo{border: 1px solid #cccccc;font-size: small;color: #333333;
text-align: center;background-color: #FFFFCC; width: 100%;}

779 ：774：04/10/20 22:22:00 ID:???

HTMLのソースは以下の構成しています。

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

<div id="main">

<div id="content">
</div>

<div id="navBar">
</div>

</div>

<div id="siteInfo">
</div>

</body>

780 ：Name_Not_Found：04/10/21 00:50:57 ID:???

>>774
またＦＡＱをよく読んでないね？　>>6だ。
>これに当て嵌まらなかったら「浮動要素の高さも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

781 ：Name_Not_Found：04/10/21 09:12:13 ID:83JorcEz

strictHTML+CSSレイアウトのための？質問。

http://www.kanefuku.co.jp/shopmall/mentaitsu/list_item.php?cateid=4

このページにあるような
商品画像
商品名
価格

のレイアウトって通販とかでは結構良くあるものだけど、strictHTMLからすると
<table summary="商品一覧表">
<tr>
<th>商品画像
<th>商品名
<th>価格
</tr>
<tr>...

のようにするのが理想だと思われる。しかし上記マークアップでは現実的には
当初のレイアウトをCSSで実現することは不可能。(シェア8割のIEではorz)

で、現実的にstrictHTMLでありつつ、できれば見やすいソースでありつつ、CSSで
目的のレイアウトを達成する方法を考えているんだけど、煮詰まったので助けを求めにきた。

782 ：Name_Not_Found：04/10/21 10:08:18 ID:???

>>781
<td>
<dl>
<dt>商品画像</dt>
<dd>商品名</dd>
<dd>価格</dd>
</dl>
</td>

ではどう？

783 ：Name_Not_Found：04/10/21 10:13:03 ID:???

<ul>
<li>
<dl>
<dt>商品画像</dt>
<dd>商品名</dd>
<dd>価格</dd>
</dl>
</li>
</ul>
これは？

784 ：Name_Not_Found：04/10/21 10:47:02 ID:???

でも普通は
<dl>
<dt>商品名</dt>
<dd>商品画像</dd>
<dd>価格</dd>
</dl>

じゃないか？画像非表示でも意味が通るし

785 ：Name_Not_Found：04/10/21 11:30:58 ID:???

成り行きでサイトを引き継ぐことになり、四苦八苦してるんで、
質問させてもらいます。

欧文フォントと邦文フォントをそれぞれ指定するって方法ありますか？

「This is a pen (これはペンです)」

みたいな文の場合、「This～」の部分は、Times New Romanで、
「これは～」の部分はMS　明朝でみたいな指定方法です。

ページ全体に指定したいんで、

<span class="font-family: 'Times New Roman'">
This is a pen
</span>
<span class="font-family: 'MS 明朝'">
(これはペンです)
</span>

みたいなことを延々していくのは、ちょっと汚すぎるなぁと思ったもので。

言葉足らずかつ無知ですいませんが、なにか解決策とかありましたら、
お願いします。

786 ：Name_Not_Found：04/10/21 12:01:50 ID:???

閉鎖すりゃええやん

787 ：Name_Not_Found：04/10/21 12:06:57 ID:???

>>785
まづはインライン・スタイルシートでなく、class分けして外部シートにしませう。
次に下記を讀んでおきませう。
http://cssbug.at.infoseek.co.jp/detail/winie/b033.html

788 ：Name_Not_Found：04/10/21 12:56:13 ID:???

lang属性使うのはどうなん？

789 ：Name_Not_Found：04/10/21 13:10:21 ID:???

>788
今のところ、対応してるブラウザって何？

790 ：Name_Not_Found：04/10/21 14:08:50 ID:???

>>788-789　>>4の対応表を見よ。
属性セレクタ
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#attribute-selectors

791 ：Name_Not_Found：04/10/21 14:36:23 ID:???

法律書なんかで、ページの左側に本文、右余白に注意書きというページを
作りたいんだけど、簡単にやるには表組みにするしかないのかな？

dl.s {
}
dl.s dt {
clear: both;
font-weight: bold;
}
dl.s dd.h {
float: left;
width: 420px;
margin: 0 0 1em 5px;
padding: 0 10px 0 0;
border-right: 1px solid #8fbc8f;
}
dl.s dd.m {
float: right;
width: 250px;
margin: 0 0 1em 0;
padding: 0;
}

こういうのを作ってみたんだけど、項目数が数千あるから、
いちいちddにクラスつけなきゃいけないのはダルいんだよね。
見出し（dt)、説明(dd)、注意書き(dd)だからいけない。

おいらは疲れた。ナイスアイデアちょうだいな。

792 ：Name_Not_Found：04/10/21 14:38:13 ID:???

追記。dd.hはひとつだけど、dd.mは複数（２～５つ）あるんだな。
そのひとつひとつに class="h" class="m" と振ってると発狂しそうよ。

793 ：Name_Not_Found：04/10/21 14:50:41 ID:???

発狂してください。

794 ：Name_Not_Found：04/10/21 14:58:19 ID:???

隣接セレクタ使えば楽っぽいんだけどね。
IEで効かないのはやっぱりダメですかね？

dl { }
dl dt { clear: both; font-weight: bold; }

/*ddは基本的にdd.mのスタイルで*/
dl dd { float: right; width: 250px; margin: 0 0 1em 0; padding: 0; }

/*dt直後のddにのみdd.hがマッチ*/
dt + dd {width: 420px; margin: 0 0 1em 5px; padding: 0 10px 0 0; border-right: 1px solid #8fbc8f; }

795 ：発狂しました：04/10/21 14:59:17 ID:???

　　 ∩＿＿＿∩
　　 | ノ　　　　　ヽ/⌒)　　あばばば
　 /⌒) (ﾟ)　　　(ﾟ)　|　.|
　/　/　　( _●_)　ミ/　　　∩―－、
.（　　ヽ　　|∪|　　／　　　／　(ﾟ)　､_ ｀ヽ
　＼　　　ヽノ　/ 　　　　/　　(　●　 (ﾟ) |つ
　 /　　　　　　/　　　　　|　　(入__,,ノ　　ミ　　　あばばばば
　|　　　　　　 / 　　　　　､　(＿／　　　ノ
　|　　／＼　＼　　　　　＼＿＿＿　ノﾞ ─――､
　|　/　　　 )　 )　　　　　　　／＼　　　　　　＿　　ヽ
　∪　　　（　＼　　　　（⌒0　／＼　　　　　ヽ（＿ﾉ
　　　　　　＼,,＿）　　　｀ヽノ　　　/　　､　　　）O

796 ：Name_Not_Found：04/10/21 15:53:47 ID:???

イマイチだな。

797 ：Name_Not_Found：04/10/21 15:55:24 ID:???

ふんにゃか　ふんにゃか

798 ：781：04/10/21 16:19:45 ID:83JorcEz

>>782
td内にdlとかってあきらかにおかしいと思う・・・
だってthが増えればいいわけで。現実的にはしょうがないっていう意味かな？
>>783
そもそもdlでリストなのでわざわざul内にないほうさせる必要性が？かも。
>>784
これ例えば「一言PR」とか、グラム・価格が絡んでくるとしんどいんだよね。
画像
商品名
コメント
グラム　　価格
グラム２　価格２
こうなってくると普通に表が使いたくてしょうがない。ソースの綺麗さから言っても。
まあ>>783の変形で
<ul><li><dl>
<dt>画像<dd>img
<dt>商品名<dd>肉
<dt>一言PR<td>買ってね＾＾
<dt>グラム1<dt>1kg
<dt>価格1<dd>100000円
<dt>グラム2<dd>10kg
<dt>価格2<dd>1000000円
</dl></li>
<li><dl>.......

のような感じならCSSでどうにでもできるけど、汚い・・・・・
テーブルレイアウト並にソースが汚くていやだorz

799 ：Name_Not_Found：04/10/21 16:44:58 ID:???

定義リストはリストとして情報をまとめるときに使う要素。
なので、同値の情報でも表としてまとめるのであれば素直に表にして
┏━━━┳━━━━━┳━━━━━┳━━━━━┓
┃写真　┃　　図　　┃　　図　　┃　　図　　┃
┣━━━╋━━━━━╋━━━━━╋━━━━━┫
┃商品名┃ふんにゃか┃ふんにゃか┃ふんにゃか┃
┣━━━╋━━━━━╋━━━━━╋━━━━━┫
┃価格　┃　　\1,000┃　　\1,000┃　　\1,000┃
┗━━━┻━━━━━┻━━━━━┻━━━━━┛
邪魔ならばth要素だけcssで消せば良いだろうかと。
現状のhtmlの仕様を遵守して表示をクラに任せるか、
クラの実装を鑑みて仕様に背く書き方をするかは、著者の自由だし。

800 ：781：04/10/21 17:37:21 ID:???

>>799
それデータが増えていくと横スクロール地獄だよ。
結局tableでやりたいことだけど、IEのCSSが弱いから現実的にはHTML自体をゆがめるしかない。
一番マシな代替案ってなんだろ。

<ul><li><dl>
<dt>画像<dd>img
<dt>商品名<dd>肉
<dt>一言PR<td>買ってね＾＾
<dt>グラム1<dt>1kg
<dt>価格1<dd>100000円
<dt>グラム2<dd>10kg
<dt>価格2<dd>1000000円
</dl></li>
<li><dl>.......
やっぱこれでCSS整形しかないか・・・・ソースが汚すぎるんだよなorzもういや！

801 ：Name_Not_Found：04/10/21 17:43:39 ID:???

そんなにtable使いたくないの?

802 ：Name_Not_Found：04/10/21 17:53:37 ID:???

>それデータが増えていくと横スクロール地獄だよ。
　デザインも能力のうち。　ただのコーダーかい？

803 ：Name_Not_Found：04/10/21 17:55:35 ID:???

(´-`).｡oO(なんで素直にテーブル使わないんだろう･･･？)

804 ：Name_Not_Found：04/10/21 17:58:18 ID:???

表になってるものはテーブルを使うのが正当なHTMLだろ。

805 ：Name_Not_Found：04/10/21 17:59:05 ID:???

ていうかテーブルのカラムじゃなくてレコードを伸ばす書き方があるだろう……。
素直に縦方向にデータが増える表で書いた方がいい

806 ：Name_Not_Found：04/10/21 18:07:07 ID:???

>>781よ、さんざんだな。

807 ：Name_Not_Found：04/10/21 18:09:28 ID:9tj30CqU

CSSで表示の幅を固定できますか？

808 ：Name_Not_Found：04/10/21 18:11:27 ID:???

出来る。　以上、終わり！

809 ：Name_Not_Found：04/10/21 18:15:01 ID:9lY75yLJ

等幅フォントで文章を表示するにはどう指定すればいいのでしょうか?

810 ：Name_Not_Found：04/10/21 18:16:47 ID:???

monospace を指定する。　あとは自分でググってね。

811 ：781：04/10/21 18:27:55 ID:83JorcEz

>>801-806
レイアウトが↓のような

http://www.kanefuku.co.jp/shopmall/mentaitsu/list_item.php?cateid=4

商品画像
商品名
コメント
グラム　価格
グラム　価格

なのよね。だからtableでやりたいけど、tableでやるとCSSでの整形がIEでは不可能だから
代替案を考えてて、ここに知恵を借りにきたの。

>　デザインも能力のうち。　ただのコーダーかい？
コーディング段階でレイアウトを変更するのはさすがにありえないかな。
レイアウト変えてもいいけど、そうなるとstrictHTML+CSSレイアウトの限界を
認めるわけで、それってなんか気分悪いしね。

812 ：Name_Not_Found：04/10/21 18:31:30 ID:???

>strictHTML+CSSレイアウトの限界
ではなくて、己の能力の限界が先に来るわけだろ？

813 ：Name_Not_Found：04/10/21 18:33:58 ID:???

tableでやるとCSSでの整形がIEでは　？？？

814 ：276：04/10/21 18:38:22 ID:???

>>812-813
まだ理解してもらえてないぽ

ちょと例を画像化してうｐするから待ってて。

815 ：Name_Not_Found：04/10/21 18:40:39 ID:???

漏れも思ってたんだが「tableでやるとCSSでの整形がIEでは不可能」って何なの？

816 ：Name_Not_Found：04/10/21 18:40:43 ID:???

>>811
そこ、きったねーソースだなー

817 ：Name_Not_Found：04/10/21 18:45:45 ID:???

276 ：昔の人：04/10/05 22:59:23 ID:???

　　　　？　？　？

818 ：781：04/10/21 18:55:56 ID:???

http://www.aki7.com/cgi/up/c-board.cgi
ここに「通販のよくあるレイアウト例」ていうのであげておいた。
でね。そのデザイン案をstrict+CSSでやるなら
<h1>商品一覧</h1>
<table summary="商品一覧表">
<tr>
<th>商品画像
<th>商品名
<th>コメント
<th>グラム1
<th>価格1
<th>グラム2
<th>価格2
</tr>
<tr>
<td><img>
<td>松坂牛
<td>マジでうまいんだけどｗ
<td>1kg
<td>1000円
<td>2kg
<td>2000円
</tr>
<tr>
<td><img>......

のようにマークアップして、これをCSSで画像にあるようなレイアウトにするのが
一番strictだと思うのね。でもIEでは実現不可能なのよね。っていうこと。

819 ：Name_Not_Found：04/10/21 18:56:01 ID:???

>>814
別にオマイを理解する気もなくて、tableを勧めているわけだが・・・

820 ：Name_Not_Found：04/10/21 18:57:26 ID:???

>>818
>>812

821 ：Name_Not_Found：04/10/21 19:01:35 ID:???

>>818
午前９時過ぎから今までごにょごにょやってる間に素直にtableでやれば、
もう完成して、おねーちゃんのところにいられるわけだが・・・

822 ：781：04/10/21 19:07:17 ID:???

>>819
つまりstrictをあきらめてってこと？
>>820
おまいならどうやってコーディングするの？

823 ：Name_Not_Found：04/10/21 19:08:25 ID:???

table

824 ：781：04/10/21 19:12:17 ID:???

>>821
実際にそういうコーディングをしてるんじゃなくて、なんかサイトを見回りながら
コーディング方法を浮かべてたらこれだけできないなぁって思ったのさ。

>>823
テーブルレイアウトってこと？
だから結局strict+CSSの限界ってことになるんでしょ？

825 ：Name_Not_Found：04/10/21 19:14:00 ID:???

　議論はよそで。

826 ：Name_Not_Found：04/10/21 19:16:36 ID:???

>実際にそういうコーディングをしてるんじゃなくて

　　俺の時間を返してくれ。

827 ：Name_Not_Found：04/10/21 19:25:34 ID:???

「表」にテーブルレイアウトも何も、無いだろ。

828 ：Name_Not_Found：04/10/21 19:28:04 ID:???

>>824
なんでストリクトにこだわってるの？
あんなの現状じゃ使いものならないのなんてのは誰でも知ってることだろ？
もしかしてお前アフォ？

黙ってテーブルレイアウトしろボケ。

829 ：781：04/10/21 19:29:56 ID:???

結局誰もコーディング例を出してくれないのか・・・orz
スレ違いなのかな。でもCSSの問題だしな・・・

830 ：Name_Not_Found：04/10/21 19:31:07 ID:???

>>827
同意
表とﾃｰﾌﾞﾙﾚｲｱｳﾄを混同していると思う。

831 ：Name_Not_Found：04/10/21 19:31:37 ID:???

ストリクトにはこだわるな。クリトリスにこだわれ。

　　と書く馬鹿が出ると思ったので、先に書いておいた。

832 ：781：04/10/21 19:36:18 ID:???

>>827 >>830
だからどうやって画像にあるようなレイアウトをtable要素+CSSで実現するのよ？
IEではセルごとにposition:absoluteとかできないよ。

お願いだから実際のコーディング例を出してみてよ。

833 ：Name_Not_Found：04/10/21 19:46:06 ID:???

こりゃ完全なアホだ。

834 ：Name_Not_Found：04/10/21 19:52:08 ID:???

要素内容に対してどのようにコーディングし、レイアウトを意図したモノにする。
という時点で違うと思う。
<table>は複数要素で構成された一つの書式なんだから
書式に対して要素内容を充てていくモンだと思う。

835 ：Name_Not_Found：04/10/21 19:53:47 ID:???

もう相手にするな。
他の質問者に迷惑だよ。

836 ：781：04/10/21 19:58:26 ID:???

>>834
言いたいことがイマイチ理解できないけど、つまりどうやってあのレイアウトを
strictHTML+CSSレイアウトで実現するの？

837 ：Name_Not_Found：04/10/21 20:03:20 ID:???

「はじめにレイアウトありき」でHTMLのほうをそれにフィットさせようとしてる時点で
Strictもくそもないような。

838 ：781：04/10/21 20:05:51 ID:???

>>837
デザイン案が先にできるのは普通だと思うけど？
もちろんHTMLをレイアウト毎に変えていてはstrictではないけど。

とりあえずあのレイアウトをどうやってstrictHTML+CSSで実現するの？

839 ：Name_Not_Found：04/10/21 20:12:04 ID:???

　　邪魔だ！　脳内野郎は消えろ！！

840 ：Name_Not_Found：04/10/21 20:13:57 ID:???

通報しとこうか？

841 ：Name_Not_Found：04/10/21 20:28:28 ID:???

とりあえず以後スルー

842 ：Name_Not_Found：04/10/21 20:30:38 ID:???

strictならレイアウトより構造優先

843 ：Name_Not_Found：04/10/21 20:31:01 ID:???

もまえら落ち着いてください。多分 >>781 はstrictを誤解しているだけだよ。
>>818 で彼が例に挙げたのからもわかるように、表で書くにしても、
dlを使うみたいに書いて、cssで整形しなければならない、と思っているみたい。

で、実際にはそうじゃなくて、表であるならば >>799 のように書いて、
例えばカラムは三つまでって決めているのならば、そうなるようにtrとtdを
書いていけばいいだけ。

一見、いわゆる“テーブルレイアウト”のように感じてしまうのは
>>781 だけではないとおもうけど、それがtable要素の本来の使い方なので
問題ないですよ。

844 ：Name_Not_Found：04/10/21 20:37:48 ID:???

とりあえず以後スルーで

845 ：Name_Not_Found：04/10/21 20:38:54 ID:???

実用するわけでもないものに答えた人らは災難だったねｗ
表作りはスレ違いだしねぇ・・・

846 ：781：04/10/21 21:01:52 ID:83JorcEz

>>840-841
？
>>842
ハ？コーディング段階でレイアウト変わるわけないだろ。
>>843
>多分 >>781 はstrictを誤解しているだけだよ。
してないんだけど。

とにかくお前ら誰か実際にあのデザイン案を渡されてstrictHTML+CSSで仕上げろと
いう仕事は来た時にどういうコーディングするのよ？やってみ？無理だから。
IE4以上NN6以上であのレイアウトを実現。

847 ：781：04/10/21 21:02:49 ID:83JorcEz

>>845
>表作りはスレ違いだしねぇ・・・
どこに表作りってあるんだ？もしかしてお前アフォ？

848 ：Name_Not_Found：04/10/21 21:09:00 ID:???

>>846-847
普通にテーブルで表として作ればいいじゃない。

出来る出来ないやってみ？無理だ。で「質問」スレを埋めないでくれ。

849 ：Name_Not_Found：04/10/21 21:09:17 ID:???

>>846
しつこいストリクトなんてスレ違いだボケ
せめて
http://pc5.2ch.net/test/read.cgi/hp/1096723178/l50
こっちでやれ

850 ：781：04/10/21 21:13:17 ID:???

>>848
そういうことが言いたかったのね。
でも見た目的には表ではなくしたいのよ。
構造としては思いっきり>>818のようなのが理想なんだけどね。

>>849
そうなん？まあ煽りばかりでうんざりしてるからスレ移動してもいいけどさ。
それじゃさようなら。

851 ：Name_Not_Found：04/10/21 21:15:58 ID:???

ageたりsageたり忙しくうざい奴だったね

次ﾄﾞｿﾞｰ

852 ：Name_Not_Found：04/10/21 21:17:13 ID:???

真性は楽しいな。

853 ：Name_Not_Found：04/10/21 21:29:53 ID:???

ところで実際はどうやるの？
あれが表なら、なんでも表になっちゃうじゃないのか？

と、最近テーブルレイアウトからの脱却を図る素人が口を出してみるテスト

854 ：Name_Not_Found：04/10/21 21:31:58 ID:???

>>853
表≠テーブルレイアウト
今回の厨の質問だと表でよかろう。

855 ：Name_Not_Found：04/10/21 21:48:49 ID:???

>>854
あれって本当に表なの？
まあ作者しだいの肝するがな。

856 ：Name_Not_Found：04/10/21 22:04:39 ID:???

表だろ？　商品を一覧にする＝表　でいいと思うけど？

857 ：Name_Not_Found：04/10/21 22:08:53 ID:???

まぁまぁ　よく釣れたじゃないか。

858 ：Name_Not_Found：04/10/21 22:11:13 ID:???

ソースも見られないやつがstrictとはね。あきれたぜ

859 ：Name_Not_Found：04/10/21 22:12:40 ID:???

このお話、ストリクトスレの方に移動した模様なので、この辺で。

次、ﾄﾞｿﾞｰ

860 ：Name_Not_Found：04/10/21 22:14:43 ID:???

ふんにゃか。ふんにゃか。

861 ：Name_Not_Found：04/10/21 22:15:42 ID:???

display:none　と、　visibiliｔｙ: hidden　って、どう使い分ければいいんですか？
同じような気もするけど、同じじゃないですよね？

862 ：Name_Not_Found：04/10/21 22:16:29 ID:???

なんかCSSスレ住人の回答が思いっきり馬鹿にされてるんだけど・・・

863 ：Name_Not_Found：04/10/21 22:18:50 ID:???

こっちは、strict気取りじゃないからね。気楽にいこうや。

864 ：Name_Not_Found：04/10/21 22:22:19 ID:???

>>861
大雑把に言うと、

display:none; は存在そのものが消える、
visibility:hidden; は見えなくなるだけで存在は残る、

という感じ。

<p>ふんにゃか</p>
<p id="a">ふんにゃか</p>
<p>ふんにゃか</p>

として、

p#a { visibility: hidden; } と
p#a { display: none; } を

比べてみるといいかも。

865 ：Name_Not_Found：04/10/21 22:22:52 ID:???

<table border=0 bgcolor="#999999" cellspacing=0 cellpadding=0>
<tr>
<td>
<table border=0 cellspacing=1 cellpadding=2>
<tr bgcolor="#ffffff"><td>001</td><td>002</td></tr>
</table>
</td>
</tr>
</table>

このような裏技を、IE/NN4で完全に再現できる
正規スタイルシート表現はありますか、教えてください。

866 ：Name_Not_Found：04/10/21 22:26:39 ID:???

>>864
やってみた……ら、ほんとだっ！！！確かに動作が違う。
ありがとう。勉強になった。なるほどなるほど

867 ：Name_Not_Found：04/10/21 22:29:32 ID:???

>>865
ボーダーとコラプスをごにょごにょできないから、無理でしょう。
5以降でもMacIEはコラプスが効かないのでだめぽ。

868 ：Name_Not_Found：04/10/21 23:15:27 ID:???

ふんにゃか。ふんにゃか。

869 ：Name_Not_Found：04/10/21 23:22:03 ID:???

ここではそれは要らん。

870 ：865：04/10/22 00:27:27 ID:???

>>867
ありがとうございます。
mac以外ならコプラスOKでできるんでしょうか？
いろいろ探したんですが、具体的にテーブルの裏技
を再現してるサイトがみつからなくて、質問
させてもらいます。

871 ：Name_Not_Found：04/10/22 06:58:45 ID:???

CSS
ul{
display: block;
padding-left: 0;
margin-left: 0;
}

li{
display: inline;
color: #000;
padding: 2px;
margin-right: 1px;
background-color: #fff;
list-style-type: none;
}

HTML
<ul><li>001</li><li>002</li></ul>

NN/NC4は多分無理。Mac IEは多分大丈夫。

872 ：871：04/10/22 07:00:27 ID:???

list-style-type: none;
はいらなかった。

873 ：871：04/10/22 07:05:36 ID:???

ごめん、完全に勘違い……

874 ：Name_Not_Found：04/10/22 09:23:50 ID:RLZy7WLc

リストマークとしてバックグランドで青丸の画像を使ってます。
でもOPERAとGeckoだと表示されません。
アドバイスお願いします。

新幹線価格表
http://xxxx.s56.xrea.com/auction_nozomi/order_form.shtml

875 ：Name_Not_Found：04/10/22 10:37:19 ID:???

>>874は、>>3を見れば済むのでは。
W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/

876 ：Name_Not_Found：04/10/22 11:21:37 ID:???

>>874
ここが問題だ。
ul.setsumei li {
margin-bottom: 0.5em;
padding-left: 1.5em;
background: url('http://xxxx.s56.xrea.com/img/bottun.gif') no-repeat 0.1em left;
}

各キーワード（「left」，「center」など）を，長さやパーセント値と組み合わせてはなりません。
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background-position

877 ：867：04/10/22 11:40:06 ID:???

>>870
どの辺が裏技（謎）なのかわかんないけど、
table要素の属性の、border、cellpadding、cellspacing、
またtdにもあるbackgroundやbgcolorは
スタイルシートでできます。

あと、コプラスではなくコラプス。

878 ：Name_Not_Found：04/10/22 13:49:29 ID:???

>876
ttp://pc5.2ch.net/test/read.cgi/hp/1093998766/906-909

879 ：Name_Not_Found：04/10/22 15:33:46 ID:P6WXt9Sj

質問させてください。
IEなどは問題ないのですが、safariで

<div style="width:100px; height:100px; float:left; margin:10px;">
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０
</div>
<div style="width:100px; height:100px; float:left; margin:10px;">
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０
</div>

とやると、文章が改行されず、困っています。（数値でなければ改行されます）

半角英数字をスペース無しでおいても同じ現象が起こるのですが、これを200pxの位置で
強制的に改行させる方法があれば、教えてください。m(_ _)mペコリ

880 ：Name_Not_Found：04/10/22 16:01:24 ID:HkmR+596

width:300;
padding:30;
margin:0;
と
width:240;
padding0:;
margin:30;
の違いは何ですか？
IEの表示は同じなのですが
どちらかは誤った文法なのでしょうか？

要は300の幅の中心に
240幅ぐらいで文字を並べたいのですが。

881 ：Name_Not_Found：04/10/22 16:02:50 ID:HkmR+596

上の訂正

width:300;
padding:0 0 30 30;
margin:0;
と
width:240;
padding0:;
margin:0 0 30 30;

882 ：Name_Not_Found：04/10/22 16:17:28 ID:???

>>881
えっと、どちらも間違っちゃいません。
基本中の基本なので、marginとpaddingの違いをぐぐってでも調べてください。

たとえばdiv要素で囲まれた正方形を作ったとき、
paddingはその□の内側を指定しますが、、marginは□の外側を指定します。

わかりましたか？

883 ：Name_Not_Found：04/10/22 16:25:34 ID:HkmR+596

>>882
たすかりました。

Goliveで制作しているのですが
paddingで表現すると
レイアウトモードで狂って見えるので
困っていました。

ありがとうございました。

884 ：Name_Not_Found：04/10/22 16:41:04 ID:???

>>882
どちらも質問の意図とは違う点が間違ってる(unitless number)

885 ：Name_Not_Found：04/10/22 17:11:48 ID:HkmR+596

ｶﾞ━━∑(ﾟ□ﾟ*川━━━━ﾝ!
そ・・・そりは・・・？

886 ：Name_Not_Found：04/10/22 17:23:04 ID:???

>>882
とりあえず、相対的に記述できるプロパティ以外は、
単位つけんといかんよ。
あと、ブロックのマージンとパディングがわかりづらいなら、
とりあえず1pxのボーダーを表示してみるか、薄目の色で背景色
を塗ってみるとわかりやすいかもしれん。

いずれにせよ、DWやGLなどの便利なツールも、WYSWYG画面では
正確（謎）にスタイルシートを解釈できないようなので、
ブラウザでリロードしながらやることをオススメします。

887 ：874：04/10/22 18:13:38 ID:QTos4rEw

>>875
>>876
回答ありがとうございます。
多謝です。

888 ：Name_Not_Found：04/10/22 18:37:11 ID:???

W3C CSS 検証サービスで、下記の警告がでたのですが、何が間違っているのかがわかりません。

Line : 0 font-family: 一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します

ちなみに、font-familyは
font-family: "ＭＳＰゴシック",Osaka;　

にしています。

889 ：Name_Not_Found：04/10/22 18:41:05 ID:???

一般フォントファミリー名を追加すればよし。

890 ：Name_Not_Found：04/10/22 18:46:00 ID:???

>>878　倉庫入りで読めません。

891 ：Name_Not_Found：04/10/22 18:48:14 ID:???

>>890
いろんな意味で2chブラウザ導入した方がいいかも。
●も高いものじゃないし。

892 ：Name_Not_Found：04/10/22 18:51:37 ID:???

>>882
とりあえずpaddingの左右は使わないこと。これCSS知ってる人間の常識ね。
標準準拠モードと後方互換での差がでちゃうからね。
面倒でも
左右はマージン
上下はパディング
ってやっておくと何かといいよ。上下マージンはフロート絡みでIEが変な挙動しるときがあるからね。

893 ：891：04/10/22 18:51:39 ID:???

とりあえず今回はひろってきたげたよ。
--
906 ：Name_Not_Found ：sage ：04/09/26 20:16:41 ID:???
>>893
そのとおり。
background-position は、
[[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]] | inherit
の形をとるから、
キーワードと数値の組み合わせは不可。
それは、
left bottom か、bottom left か、 0% 100% と書く必要がある。
880は、…だが。
907 ：Name_Not_Found ：sage ：04/09/26 22:56:54 ID:???
最近のUAは2.1仕様で実装してるので
0% bottomも正当な値として解釈する。
mozillaなんか昔は厳格に2.0仕様だったのに、わざわざ2.1(=IE仕様)に
合わせて修正するハメに・・・
908 ：Name_Not_Found ：sage ：04/09/26 23:47:42 ID:???
(p)http://www.w3.org/TR/CSS21/changes.html#q16
これか。
微妙な変更は調べてもすぐ忘れちゃうよ。
909 ：Name_Not_Found ：sage ：04/09/27 00:27:20 ID:???
>> 907
>> 908
サンクス。

894 ：Name_Not_Found：04/10/22 18:53:50 ID:???

最近は仕様と勧告の差も知らんアフォが増えたな

895 ：Name_Not_Found：04/10/22 19:02:58 ID:???

>>892
言いたいことはすごくよくわかるけど、
せめてwidthがauto以外の時は、と付け加えるべきでは。

よくわからず何となくそうするべきだ、と刷り込みする（される）のは
初心者には必ずしも良いことではないかと。

896 ：Name_Not_Found：04/10/22 19:46:26 ID:???

ただの知ったかだろ。

897 ：892：04/10/22 20:43:51 ID:???

>>895
>せめてwidthがauto以外の時は、と付け加えるべきでは。
何で？widthが何であれ>>892の方法で問題はないでしょ？
もちろんwidthがautoなら別に左右についてはマージンでもパディングでもいいけどさ。

それとも何か問題あったっけ？

898 ：Name_Not_Found：04/10/22 20:46:02 ID:???

オマイのｶｵに問題がある

899 ：Name_Not_Found：04/10/22 21:03:13 ID:???

ふんにゃか。ふんにゃか。

900 ：892：04/10/22 22:12:20 ID:???

結局問題もないのにケチ付けてただけなのか？
よくわからんな。898=895なのか？

901 ：Name_Not_Found：04/10/22 22:13:10 ID:???

>>899
お前うざい
２ちゃんばっかやってねぇで働けよ

902 ：Name_Not_Found：04/10/22 22:49:05 ID:???

>>901
黙れ！お前に何の関係があるんだこのクソボケが！

903 ：Name_Not_Found：04/10/22 23:03:59 ID:???

ふんにゃか。ふんにゃか。ふんにゃか。ふんにゃか。ふんにゃか。ふんにゃか。

904 ：Name_Not_Found：04/10/22 23:05:07 ID:???

h1{ border-bottom:1ps solid #000000; }
とかやると、殆どのブラウザでwidthが100%になってしまいますが、
h1{ width:50%; }
とかいちいち設定しなくても文字列の幅と同じくはできないのでしょうか。

905 ：Name_Not_Found：04/10/22 23:13:23 ID:???

width:を入れるのがメンドクサイというのかい？

906 ：Name_Not_Found：04/10/22 23:15:35 ID:???

>>905
その通りです。
１００個も２００個も設定してられませぬ。
一応今は50exとしてますが……はみ出したり丁度良かったりで微妙です。

907 ：Name_Not_Found：04/10/22 23:17:01 ID:???

display:inline; とか(ひー

<h1><span>ふんにゃか。ふんにゃか。</span></h1>
とかして h1 span { ... } で見た目をコントロールするとか…。

908 ：Name_Not_Found：04/10/22 23:19:10 ID:???

>>906
この↓1行だけで、全h1タグが幅50％になるんじゃなかったっけ？
違ってたらｽﾏｿ。

h1{ width:50%; }

909 ：908：04/10/22 23:20:17 ID:???

あっ失礼、文字列に合わせるってことか

910 ：Name_Not_Found：04/10/22 23:21:34 ID:???

>>906
なら、HTML を書くこともメンドクサイだろ？

　作るの止めたら？

911 ：Name_Not_Found：04/10/22 23:31:29 ID:???

>>906は一括置換を知らないらしい。

912 ：Name_Not_Found：04/10/22 23:33:12 ID:???

border無しに汁。

913 ：Name_Not_Found：04/10/22 23:34:12 ID:???

入れ食いですね

914 ：904,906：04/10/22 23:35:45 ID:???

一応補足しておくと、外部ファイルで一括設定したいってことです。

915 ：Name_Not_Found：04/10/22 23:40:39 ID:???

>とかいちいち設定しなくても文字列の幅と同じくはできないのでしょうか。
>一応補足しておくと、外部ファイルで一括設定したいってことです。

　　　同じ意味とは思えんが・・・

916 ：Name_Not_Found：04/10/22 23:45:40 ID:???

border-bottomの幅を、ファイル毎にいちいち設定しなくても、文字列と同じ幅にできませんか。

917 ：Name_Not_Found：04/10/22 23:58:29 ID:???

THML.CSSでは出来ません。

918 ：Name_Not_Found：04/10/23 00:03:12 ID:???

落ち着け。

919 ：Name_Not_Found：04/10/23 00:04:35 ID:???

>>916
JavaScript の出番だな。ちと面倒くさそうだ

920 ：Name_Not_Found：04/10/23 00:07:51 ID:???

>ちと面倒くさそうだ
　めんどっちーのはやなんだってば！

921 ：Name_Not_Found：04/10/23 00:09:06 ID:???

う～～ん　日本語とは思えん。

922 ：Name_Not_Found：04/10/23 00:13:43 ID:???

ふんにゃか。ふんにゃか。

923 ：Name_Not_Found：04/10/23 00:22:13 ID:???

↑これって何か意味あるの？

924 ：Name_Not_Found：04/10/23 00:22:13 ID:???

それはいらんよ。

925 ：778：04/10/23 00:22:58 ID:???

>>780
遅くなりましたが、ありがとうございました。
なんとか思い通りの状態に近づける事が出来ました。

FAQの意味を理解するのに時間かかっちゃった。
でもおかげで勉強になりました。

926 ：Name_Not_Found：04/10/23 00:26:57 ID:???

うむ　よくがんがった。

927 ：Name_Not_Found：04/10/23 00:38:45 ID:???

>>925 778
これからも勉強続けて、一緒にがんがろうな。

928 ：778：04/10/23 01:22:52 ID:???

>>927
そっちのケはないので勘弁してくださいorz

929 ：Name_Not_Found：04/10/23 02:07:50 ID:???

ふんにゃか。ふんにゃか。

930 ：Name_Not_Found：04/10/23 02:20:31 ID:???

質問させてください。
CSSで
div.boxbox h1,h2,h3 {
color: #FF0000 ;
}

HTMLで
<div class="DekaBox">
<div class="boxbox">
<h2>たいとーる</h2>
</div>
<div class="boxbox2">
<h3>２ちゃんねるについて</h3>
<p>あひゃひゃひゃひゃひゃひゃ<br />あひゃひゃひゃ</p>
</div>
</div>

と記述すると、"boxbox2"の部分のh3も赤くなってしまいます。

div.boxbox h1 {
color: #FF0000 ;
}
div.boxbox h2 {
color: #FF0000 ;
}
div.boxbox h3 {
color: #FF0000 ;
}
と記述すると正常（"boxbox"内のh1～3だけ赤）になります。

これはSafari 1.2で発生していて、Netscape、Firefoxなどでは発生しませんでした。
これはSafariのバグでしょうか？

931 ：Name_Not_Found：04/10/23 02:41:09 ID:???

div.boxbox h1,h2,h3 {
color: #FF0000 ;
}

は

div.boxbox h1 { color:#FF0000; }
h2 { color:#FF0000; }
h3 { color:#FF0000; }

と等価。
だが Netscape、Firefoxなどでは発生しないというのは……。
他のところで何か指定してあるのが効いてるというのでなければ
嘘くさいな。

932 ：Name_Not_Found：04/10/23 03:09:04 ID:???

>>930
MozillaでもNetscapeでもFireFoxでも発生したよ。

933 ：930：04/10/23 03:34:35 ID:???

え、マック版だとならないんですが、、、。

>>931
なるほど、
(div.boxbox h1）、(h2）、（h3）と解釈されてしまうわけですね。

div.appleboxtop h1,div.appleboxtop h2,div.appleboxtop h3 {ごにょごにょ;}
と記述したら治りました。

ありがとうございました。

934 ：Name_Not_Found：04/10/23 03:47:45 ID:???

>>933
>え、マック版だとならないんですが、、、。
そんなはずはないんですが……。
大事なことだから、最小限のソースで実験して、報告してくれませんか。
http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50

935 ：Name_Not_Found：04/10/23 10:50:55 ID:???

>>916
見出しに使うならdisplay:inlineにすればいいんじゃね?
複数行にならなければblockと同じに見える。

936 ：Name_Not_Found：04/10/23 13:24:39 ID:K3Wlf5eM

>>904
<h1></h1>内に下線を入れたいと言うことならば、
h1{text-decoration:underline;}
でいいんでない？
borderでなければというのならば、
h1{display:inline;border-bottom:1px solid #000}
だけれど。

937 ：930=933：04/10/23 13:59:23 ID:???

>>934
何度やっても同じ結果だったのですが、再起動したら
すべてのブラウザで同じ動作をしました。どうやら
何度もリロードしたにもかかわらずキャッシュが残っていたようです。
お騒がせしました。

938 ：Name_Not_Found：04/10/23 14:13:26 ID:???

ふんにゃか。ふんにゃか。

939 ：Name_Not_Found：04/10/23 15:23:30 ID:???

>>936
無事できました。有り難う。

940 ：Name_Not_Found：04/10/23 16:03:10 ID:???

ふんにゃか。ふんにゃか。

941 ：Name_Not_Found：04/10/23 16:34:10 ID:???

ぬるぽぬるぽ。

942 ：Name_Not_Found：04/10/23 18:05:13 ID:???

ふんにゃか。ふんにゃか。

943 ：Name_Not_Found：04/10/23 19:23:56 ID:???

ここではそれは要らんよ

944 ：Name_Not_Found：04/10/23 20:23:09 ID:???

左側は画像、右側はテキストの様にボックス２つ並べてるんですが、
ウインドウサイズの幅を縮めると、右側のボックスが左のボックスの下に
潜っちゃいます。

潜らない様に、固定させるにはどーすりゃいいんですか？

945 ：Name_Not_Found：04/10/23 20:26:00 ID:???

ソース出しなさいよ。

946 ：Name_Not_Found：04/10/23 21:40:02 ID:???

URL出せ

947 ：Name_Not_Found：04/10/23 23:15:12 ID:???

>>944
スタイルシートではないけれど
<IMG SRC="1.jpg" ALIGN="left" HEIGHT="50%" WIDTH="50%" HSPACE="10">

948 ：Name_Not_Found：04/10/23 23:21:16 ID:???

HSPACEって何？

949 ：Name_Not_Found：04/10/23 23:30:22 ID:???

知らんのか。とほほでも見てきな。

950 ：Name_Not_Found：04/10/23 23:33:11 ID:???

普通にimg border:0px;でやってるし。

951 ：Name_Not_Found：04/10/24 00:17:14 ID:???

日本語変だぞ。

952 ：Name_Not_Found：04/10/24 00:27:17 ID:???

>>944
画像にfloat:leftで右にテキストを流し込むようにする。
画像はwidthで幅固定。テキストは画像の幅の分だけ左マージンを空ける。
てか>>6

953 ：Name_Not_Found：04/10/24 09:00:38 ID:???

えーっと、結局ボックスを使っちゃ俺の思ってる通りにはならんよ、
って事なんでしょうか。

DWのサンプルの場合、左ボックスに75%の幅を設定、
右のボックスには幅を指定せず、左マージンに79%のマージン設定して
二つが並ぶ様にしてあるんだけど、あれは一体どういう意味の工夫なんでしょうか？

アフォな俺の頭では、左75％なら右も25%のボックスをフロートで並べて終わり
なんだけど…。

954 ：944：04/10/24 09:01:06 ID:???

あ、953はあっしの書き込みでやんす。

955 ：Name_Not_Found：04/10/24 09:05:33 ID:???

>>953
左右ボックスを含む親ボックスの幅を指定する。

956 ：944：04/10/24 09:17:03 ID:???

>>955
親ボックスに幅100%、
オーバーフローは非表示にしてるんですけど…。
それとも幅は%指定じゃ駄目なんでしょうか。

右側のボックスが、スルリと左のボックスの下に逃げ込んじゃうの。
なんとかしてー。

ところでソース出せって、どこまで出したら良いんでしょ？

957 ：Name_Not_Found：04/10/24 09:38:02 ID:???

>>956
幅100%だとビミョウにはみ出すよ。
マージンとかパディングとかボーダーとか、スクロールバーの幅とかあるから。
幅95%あたりにしてみたら？

>スルリと左のボックスの下に逃げ込んじゃうの。
改行って言え。

958 ：Name_Not_Found：04/10/24 09:41:22 ID:???

>>953
> アフォな俺の頭では、左75％なら右も25%のボックスをフロートで並べて終わり
> なんだけど…。

それが、まさしく「右側のボックスが、スルリと左のボックスの下に逃げ込んじゃう」
ようにするやり方。自らその方法を積極的に取り入れておいて何がご不満か？
floatでフワフワ浮いてる状態なんだから、ウィンドウサイズが変わると移動するに
決まっておるだろ。

DWのサンプルは、>>952の説明と同じ。

てか>>6

952も6もちゃんと読んだ上での再質問か？

959 ：944：04/10/24 10:43:14 ID:???

わかりました。わかりました。これですね。
正直FAQ読んでもアフォだからピンと来ませんでした。すんません。
---------------------------------------------------------------------------------------------
ブロック自体を横並びにするには、後続要素にも“float:left;”なり
“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。
WinIEの間違った実装で誤解が多いので注意。
---------------------------------------------------------------------------------------------
親ボックスに幅95%
左コンテンツは550ピクセル幅指定、flolat;left
右ボックスはmargin-left:560ピクセル
safari では"改行" しない様になりましたが、
右ボックス内の内容が表示されません。

右ボックスはmargin-left:を指定しないと割と思った通りなんだけど、
おかしいですよね？？

960 ：Name_Not_Found：04/10/24 11:13:47 ID:???

自分のサイトデザイン変え様かと思うけど(・∀・)ｲｲ!!デザイン思い浮かばない・・・
カッコ(・∀・)ｲｲ!!サイトｵｼｴﾚ。

961 ：Name_Not_Found：04/10/24 11:38:41 ID:???

>>959　情報小出し、よくない。HTMLとCSSのソースを出せ。でないと修正してやれないぞ。

962 ：Name_Not_Found：04/10/24 12:18:16 ID:???

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

963 ：Name_Not_Found：04/10/24 12:50:18 ID:???

ん、>>962は>>960か？

964 ：944：04/10/24 13:49:30 ID:???

>>961
度々すんません。HTMLは以下の様な感じです。
先日教えてもらった情報を参考にほぼいい感じなんですが…。
<body>
<div id="container">
<div id="topnav">
</div>
<div id="content">
<p><img src="img/***1.jpg" width="120" height="200"><img src="img***2.jpg" width="400" height="360"></p>
</div>
<div id="links">
<div class="newLinks">
<h3>トピックス</h3>
<ul>
<li><a href="http://*******" title="内容" target="_self">内容の説明分</a></li>
</ul>
</div>
</div>
<br style="clear:both;">
<div id="footer">
<img src="img/*******.gif" width="125" height="20"> ©2001-2004 ******** co.ltd.</div>
</div>
</body>
</html>

965 ：944：04/10/24 13:53:11 ID:???

CSSは抜粋しました。

body{font-family: Arial,sans-serif;
color: #333333;line-height: 1.166;margin: 0px;
padding: 0px;overflow: auto;
}

#container {background-color: #669900;white-space: nowrap;
width: 95%;overflow: hidden;
border: medium solid #000000;margin: 10px 2%;
}

#topnav{border-bottom: medium solid #000000;
background-color: #FFFFCC;
white-space: nowrap;padding-bottom: 5px;
}

966 ：944：04/10/24 13:55:30 ID:???

#content{background-color: #FFFFFF;
border-right: medium solid #333333;
width: 550px;overflow: hidden;white-space: nowrap;
height: auto;padding: 20px 10px;text-align: center; float: left;
}

#links{background-color: transparent;
padding-top: 5px;padding-bottom: 5px;white-space: nowrap;
overflow: hidden;height: auto;width: auto;
padding-left: 10px;margin-left: 560px;
}

#footer{font-size: small;
color: #333333;text-align: center;background-color: #FFFFCC;
font-family: "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
padding-top: 5px;padding-bottom: 5px;
vertical-align: bottom;white-space: nowrap;
border-top: medium solid #333333;
}

967 ：Name_Not_Found：04/10/24 15:11:45 ID:???

すみません、教えてください。
下記のようなページを作成したのですが、ネスケ6でみると青(#0000FF)の部分が表示されません。
ネスケ7やIE6、Opera6では正常に表示されました。
ネスケ6でも青(#0000FF)の部分を表示させるにはどうすればよろしいでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">

</style>
</head>
<body>
<div id="1">
<div id="2"> id "2" の内容がここに入ります</div>
<div id="3"> id "3" の内容がここに入ります<br><br><br><br><br></div>
</div>
</body>
</html>

968 ：Name_Not_Found：04/10/24 15:38:19 ID:???

>>967
1.内容が全てフロートしたら高さ0になるので、表示されないのが正常。
　:afterでdisplay:block;clear:bothすれ。
2.idは数字から始めることはできない。

969 ：Name_Not_Found：04/10/24 16:20:32 ID:???

このスレでカッコ(・∀・)ｲｲ!!っていうデザインｵｼｴﾚ。

970 ：Name_Not_Found：04/10/24 17:52:43 ID:???

>>967
ネスケ6のことは忘れろ。

971 ：Name_Not_Found：04/10/24 21:04:33 ID:???

文章が左上に寄りすぎてるので、右下にずらしたいのだが
どうすればいいんだ？

972 ：Name_Not_Found：04/10/24 21:31:36 ID:???

marginかpadding使え。

　って　もっと詳しく書けぃ

973 ：Name_Not_Found：04/10/24 21:38:53 ID:???

てぃてぃ(・∀・)ﾉてぃ～

974 ：Name_Not_Found：04/10/24 22:00:29 ID:???

padding って上左下右の位置指定できるが右と下って指定しても意味ないよな？？

975 ：944：04/10/24 22:03:25 ID:???

今日一日、あーたらこーたらやってましたが
結局思う様にならず…つД`)･ﾟ･｡･ﾟﾟ･*:.｡

976 ：Name_Not_Found：04/10/24 22:33:47 ID:???

>>974
borderで囲ったときなんかは、右も下も隙間開けないと読みにくくなるよ。

977 ：Name_Not_Found：04/10/24 22:38:11 ID:???

>>974
表とかの時は、右と下は指定しないと読みにくい。

それと、指定した位置で改行するにはどうすればいいんだっけ？
デザイン変えてたら横にスクロールするようになって、デザインｶﾞﾀｶﾞﾀだよ（泣

978 ：Name_Not_Found：04/10/25 00:41:44 ID:???

>>965-966
なんか、要らん指定が多い感じ。もっとスッキリしようや。
#linksへのoverflow: hidden; ってなんのために指定してるのさ？
それを削ればSafariでも正常に表示される。