掲示板/スタイルシート質問板/過去ログ/一覧/ どこをどうすればいいのかわかりません

0 名前： minmi ： 2005/07/14 11:26 ［URL］: 「ビルダーの構文チェックで未定義になります」のスレッドでお世話になりました。
カヅサツさんにお世話になりある程度ページは完成したのですが、トップページのレイアウトが
どこをどういじったらいいのか、一人で少しでも頑張ろうと思いながらずっと悩んでいます。
どこをどうしたいのかというと、

１０時預かり５時仕上がりの"10-2.gif"の横に「お客様へお知らせの枠」
そして、10-2.gifの下にhonten.jpgを配置したいです。
floatを使ったりいろいろいじっていたらさらに変な配置になりました。
ご教授よろしくお願いします。

1 名前： カヅサツ ： 2005/07/14 11:26: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>こだわり仕上げエイトドライ</title>
<base href="http://www.8dry.com/">
<style type="text/css">
h1{
font-weight: normal;
background-image: url(title2.gif);
color : white;
margin: 0px;
}
h1 small{
font-size: large;
}
h2{
font-weight: normal;
background-color: #5daed7;
text-align: center;
margin: 0px;
}
h3{
text-align: center;
color: #2bac00;
font-weight: normal;
}
address{
font-style: normal;
text-align: center;
}
ul{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align:center;
}
li{
margin: 0px;
padding: 0px;
display: inline;
}
dl{
text-align: right;
background-image: url(title1.gif);
}
dt,
dd{
display: inline;
margin: 0px;
}
em{
font-style: normal;
color: red;
}
a:link{
color: #2bac00;
}
a:visited{
color: #2bac00;
}
a:link img,
a:visited img{
border-width: 0px;
}

2 名前： カヅサツ ： 2005/07/14 11:26: /* 10時預かり17時仕上がり */
#jikan {
margin: 0em 0em 0em 0em;
float: left;
}
/* 店舗写真 */
#mainphoto{
margin: 1em 2em 0em 0em;
clear: both;
}
/* お客様へお知らせ */
#notice{
margin: 0em 0em 0em 0em;
width: 350px;
float:left;
}
/* お客様へお知らせ内メッセージ */
#notice div{
font-size: medium;
height: 200px;
overflow: auto;
scrollbar-base-color: #99CCFF;
scrollbar-arrow-color: white;
background-color: #CCFFFF;
border: 1px #5daed7 solid;
}
#notice_message p{
margin: 0px;
}
/* 相互リンクサイト様＆お客様リンク集 */
p.link{
text-align:center;
font-size: larger;
}
#copyright{
clear: both;
color : #1c2cff;
background-color : #0080c0;
background-image : url(title1.gif);
}
/* バナー */
#banner{
margin: 1em 0px 0px 0px;
}
#banner img{
border: 1px #5daed7 solid;
width: 200px;
height: 40px;
}
</style>
<script type="text/javascript">
function imgSwap(obj,url){
if(document.getElementById){
obj.src = url;
}
}
</script>
</head>

3 名前： カヅサツ ： 2005/07/14 11:26: <body>
<h1><small>こだわり仕上げ</small> エイトドライ</h1>
<ul>
<li><a href="http://8dry.com"><img src="go-home.gif" width="100" height="100" alt="HOME"></a></li>
<li><a href="tenpoitiran.html"><img
src="n_image8.gif" width="84" height="41" alt="店舗一覧"
onmouseover="imgSwap(this,'./m_image8.gif')" onmouseout="imgSwap(this,'./n_image8.gif')"></a></li>
<li><a href="Service.html"><img
src="n_image10.gif" width="84" height="41" alt="サービス"
onmouseover="imgSwap(this,'./m_image10.gif')" onmouseout="imgSwap(this,'./n_image10.gif')"></a></li>
<li><a href="takumiwaza.html"><img
src="n_image11.gif" width="84" height="41" alt="匠の技"
onmouseover="imgSwap(this,'./m_image11.gif')" onmouseout="imgSwap(this,'./n_image11.gif')"></a></li>
<li><a href="items.html"><img
src="n_image9.gif" width="84" height="41" alt="取扱い品目"
onmouseover="imgSwap(this,'./m_image9.gif')" onmouseout="imgSwap(this,'./n_image9.gif')"></a></li>
<li><a href="http://choimail.com/form/?id=rG2859" target="_blank"><img
src="n_image12.gif" width="84" height="41" alt="集配フォーム"
onmouseover="imgSwap(this,'./m_image12.gif')" onmouseout="imgSwap(this,'./n_image12.gif')"></a></li>

4 名前： カヅサツ ： 2005/07/14 11:26: <li><a href="http://coconut.candybox.to/8dry/mkakikomitai/mkakikomitai.cgi"><img
src="n_image7.gif" width="84" height="41" alt="掲示板"
onmouseover="imgSwap(this,'./m_image7.gif')" onmouseout="imgSwap(this,'./n_image7.gif')"></a></li>
</ul>
<dl>
<dt>本日のお客様</dt>
<dd><a href="http://candybox.to" target="_blank"><img src="http://coconut.candybox.to/8dry/dayx/dayx.cgi?today" alt=""></a></dd>
<dt>昨日のお客様</dt>
<dd><a href="http://candybox.to" target="_blank"><img src="http://coconut.candybox.to/8dry/dayx/dayx.cgi?yes" alt=""></a></dd>
<dt>今月のお客様</dt>
<dd><a href="http://candybox.to" target="_blank"><img src="http://coconut.candybox.to/8dry/dayx/dayx.cgi?gif" alt=""></a></dd>
</dl>
<p><img src="10-2.gif" width="320" height="120" alt="朝10時預かり。当日17時お渡しできます。" id="jikan"></p>

5 名前： カヅサツ ： 2005/07/14 11:26: <div id="notice">
<h2><img src="bullet095.gif" width="16" height="16" alt=""> お客様へお知らせ… <img src="bullet095.gif" width="16" height="16" alt=""></h2>
<div>
<h3>水主町店1周年セール行います。</h3>
<p>おかげさまで、水主町店今月20日で1年を迎えます。</p>
<p>1周年オープンセールとして、<em>毛布シングルサイズ370円</em>お支払い金額に応じてサービス券進呈致します。</p>
<p>袋の中の湿気は衣類のカビや黄変シミの原因になります。</p>
<p>クリーニング後のポリ袋は、あくまでも仕上がった大切な衣類をご自宅に着くまで汚さないためのサービスです。</p>
<p>ご自宅に持ち帰ったらすぐにポリ袋から出して、風通しのよい場所で陰干ししてから収納しましょう。</p>
</div>
</div>
<p><img src="honten.jpg" width="320" height="240" alt="" title="本店工場" id="mainphoto"></p>
<p class="link"><a href="link.html">相互リンクサイト様＆お客様リンク集</a></p>
<address id="copyright">Copyright 8dry All rights reserved.</address>
<address id="banner"><img src="bana.gif" alt=""></address>
<address>長崎県大村市今津町690－4</address>
<address>TEL:0957-53-2116</address>
<address>FAX:0957-53-2168</address>
</body>
</html>

6 名前： minmi ： 2005/07/14 11:26 ［URL］: カヅサツさん毎回本当にありがとうございます。
どこが違ったのかゆっくり調べます。

7 名前： minmi ： 2005/07/14 11:26 ［URL］: セレクタを上手に組み込むことが出来ない、こういう場合はこのタグを使うというのがわかっていないのが
うまくいかない原因のようです。
あと、テーブルとボックスの使い分け方もいまいち？？？
marginは左右上下設定できますが、どこの位置からの左右上下なのでしょうか？
毎回本当にありがとうございます。

8 名前： カヅサツ ： 2005/07/14 11:26 ［URL］: > marginは左右上下設定できますが、どこの位置からの左右上下なのでしょうか？

たぶん、ここが分かりやすいです。
http://www.cybergarden.net/diccss/example/margin.html

9 名前： カヅサツ ： 2005/07/14 11:26 ［URL］: > こういう場合はこのタグを使うというのがわかっていない

http://www.kanzaki.com/docs/htminfo.html
http://www.asahi-net.or.jp/~sd5a-ucd/www/
http://members.jcom.home.ne.jp/pctips/www/Element/

10 名前： minmi ： 2005/07/14 11:26 ［URL］: カヅサツさんありがとうございます。
サイト構築の説明がよくわかりました。
トップページのレイアウトや内容などただ何でも書きたいものを貼り付けるのではなく
それが何を意味するのか、見出しやリストなどを考えてレイアウトしていくといいのだなと
なんとなくそう感じました。
自己満足ではなく良いHTMLがかけるようになりたいです。
確かにカヅサツさんのHTMLソースはheadとBODYがきちんとなっててわかりやすいです。
marginは、一つ前のタグからのmarginと考えていいでしょうか？
例えば”１０時預かり５時渡し”の場合のカウンターの行を基準になる。
”お客様へお知らせ”は”１０時預かり５時渡し”からが左の値になる。
こんな考え方でしょうか？
ぺーじのレイアウトを紙の上である程度考えてからソースを作っていった方がいいですね。
誰が見ても表示が中央になるように本文をTABLEで囲んでそのTABLEをCENTERで囲むのは
良いHTMLなのでしょうか？

11 名前： phpinfo() ： 2005/07/14 11:26: ＞誰が見ても表示が中央になるように本文をTABLEで囲んでそのTABLEをCENTERで囲むのは
良いHTMLなのでしょうか？

テーブルレイアウトは「見栄えHTML」になるので、よくありません
＃テーブル非対応UAもありますし

12 名前： minmi ： 2005/07/14 11:26 ［URL］: phpinfo()さんありがとうございます。
やっぱりそうですか・・・そんな気がしました。

13 名前： カヅサツ ： 2005/07/14 11:26: > marginは、一つ前のタグからのmarginと考えていいでしょうか？

ちょっとだけややこしいです。

まず、marginには「相殺」という概念があります。

<p style="margin-bottom: 2em">段落</p>
<p style="margin-top: 1em">段落</p>

一見、２つの段落の間は "3文字分" になりそうですが、重なる部分が相殺され、"2文字分" になります。

以下、例外。

・相殺されるのは垂直方向（上下）の margin のみです。水平方向の margin は相殺されません。
・float: left あるいは right の指定がある「回り込まれる」ブロックと、他のあらゆるボックスとの間では、マージンは相殺されません。
・position : absolute , fixed, relative であるブロックにおいては、マージンは相殺されません。

「相殺」なんてものがあるのは margin だけです。paddingなどにはありません。

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#collapsing-margins

> 例えば”１０時預かり５時渡し”の場合のカウンターの行を基準になる。
> ”お客様へお知らせ”は”１０時預かり５時渡し”からが左の値になる。
> こんな考え方でしょうか？

だいたい合ってます。

14 名前： カヅサツ ： 2005/07/14 11:26: > 誰が見ても表示が中央になるように本文をTABLEで囲んでそのTABLEをCENTERで囲むのは
> 良いHTMLなのでしょうか？

まず、tableが本当に「表」として使われているか考えます。広い意味でも「表」ならば、それは table でマークアップします。
もし、表でないのなら、他に相応しい（pなど）でマークアップし、必要ならさらに div で括るのが良いでしょう（オレが <div id="notice"> としたように）。

さて、center要素ですが、これは「段落」などの意味を持たない、見栄えだけの要素です。
意味を持つ要素を「論理要素」と言います（例：p, h1, li, address, em, strong, blockquote, table など）
意味を持たない要素を「物理要素」と言います（例：font, center, big など）

「良いHTML」は、なるべく意味と見栄えを分離する文書です。つまり、物理要素は使わず、見栄えはすべて CSS で行うというものです。
しかしながら、CSSには対応していないけど物理要素には対応しているという古いブラウザが、若干ながら未だ使われているのも事実です。そういうブラウザのために、物理要素「も」使うこと自体は、悪いハナシではありません。ただ、メンテナンス性は低下しますので、初心者の方にはあまりオススメできません（そもそも、古いブラウザを使っている多くの人はリスクを承知であえて使っているわけで、余計なことをしないほうが良いかもしれません）。

オレのサイトでは物理要素は tt だけを使っています。目的は（行単位の）アスキーアート（(^^;)とか）で、できるなら等幅フォントで表示して欲しいけど、em（強調）とするまでもない、というような文字列をマークアップするために使用しています。

15 名前： カヅサツ ： 2005/07/14 11:26: あと、フェアではないので一応書いておきます。

「見栄えのため『だけ』に tableを使うのは良くない」のですが、本当に、どうしてもやりたいレイアウトのためには、しばしば良くないと知りつつ tableを使わざるを得ない状況があります。どういう状況下といいますと、Windows版 Internet Explorer がレイアウト系の CSS の解釈に、しばしばバグがある状況です。
Win IE でなければ知ったことかと思うんですが、何しろ現状、シェア No 1 です。これをシカトしろと初心者を煽ることは、オレには少し勇気が要ることです。

ですので、どうしてもやむを得ない時は、レイアウトのために table を使うことは、少なくとも 2005年7月現在、いたしかたない部分があります。ですが、その時でも最小限に止めるようにしてください。レイアウト目的の tableが二重になったあたりで、危険信号と思って差し支えないです。

16 名前： minmi ： 2005/07/14 11:26 ［URL］: ＞「見栄えのため『だけ』に tableを使うのは良くない」のですが、本当に、どうしてもやりたいレイアウトのためには、しばしば良くないと知りつつ tableを使わざるを得ない状況があります。
OKウェブの中にも「TABLEを使って・・・」回答がよくあります。

＞Win IE でなければ知ったことかと思うんですが、何しろ現状、シェア No 1
私もWin　IEユーザーです。（笑）
tableが二重にならないよう気をつけます。
まだまだわからないことだらけです（泣）
わかりやすい説明いつも感謝です。ありがとうございます。