掲示板/スタイルシート質問板/過去ログ/一覧/ ビルダーの構文チェックで未定義になります。

0 名前： minmi ： 2005/07/12 12:10 ［URL］: HTML　CSS共にこちらのページと辞書を参考にしながらビルダーでソースを
いじって作成しています。
ビルダーの構文チェックで未定義の箇所がたくさんありどうしていいかわかりません。
最終的なレイアウトは
１、お客様へお知らせとスクロールバーのあるボックスをつなげたい。
＿＿＿＿＿＿＿＿＿
｜＿＿＿＿＿＿＿＿｜
｜　　　　　　　　｜
｜　　　　　　　　｜
｜　　　　　　　　｜
｜＿＿＿＿＿＿＿＿｜こんな感じでしょうか。

２、ロゴマークとメニューボタンが表示サイズを小さくすると折り返しになるので
折り返し禁止にしたい。NOWRAPかと思っていじりましたが出来ませんでした。

初めてのことなのでソースがめちゃくちゃだとは思いますが、正しいソースを教えてください。
宜しくお願いします。

1 名前： minmi ： 2005/07/12 12:10 ［URL］: URLが表示されていませんでした。申し訳ありません。
http://www.geocities.jp/sakurahasu/　です。

2 名前： t ： 2005/07/12 12:10: <p id="2" top: 300PX; left:370PX;>の部分もそうですが。
例えば、
<DIV id="1" width:"400"px; height: "255px"; overflow: scroll; scrollbar-base-color: #FF8C00; scrollbar-arrow-color: white;><FONT size="+1">梅雨なのにまとまった雨が降ら
の　
width:"400"px; height: "255px"; overflow: scroll; scrollbar-base-color: #FF8C00; scrollbar-arrow-color: white;
は　
style="width:400px; height: 255px; overflow: scroll; scrollbar-base-color: #FF8C00; scrollbar-arrow-color: white;"
と言う風にしなければいけません。

3 名前： minmi ： 2005/07/12 12:10 ［URL］: ありがとうございます。エラーがなくなりました。
idの後にstyle="***************"ですね
この二つ「お客様へのお知らせ」とスクロールのあるボックスを
つなげたように表示するにはどうしたらいいでしょうか？
ご教授お願いします。

4 名前： t ： 2005/07/12 12:10: <FONT size="+0">今月のお客様</FONT>は、+0ならフォントタグ要らないですよね。
さて、元の質問の１と２をまとめて修正してみました。

head部
<STYLE TYPE="text/css">

</STYLE>

body部

<div id=base>
<p id="2" >
<IMG src="a_blt008.gif" width="16" height="16" border="0"> お客様へお知らせ・・・　 <IMG src="a_blt008.gif" width="16" height="16" border="0">
</p>
<DIV id="1" >梅雨なのにまとまった雨が降らず、家の中の湿度が高くなるばかりで・・・<BR>
せっかくの衣替えできれいになった衣類、袋に入れっぱなしにしていませんか？<BR>
袋の中の湿気は衣類のカビや黄変シミの原因になります。<BR>
クリーニング後のポリ袋は、あくまでも仕上がった大切な衣類をご自宅に着くまで汚さないためのサービスです。<BR>
ご自宅に持ち帰ったらすぐにポリ袋から出して、風通しのよい場所で陰干ししてから収納しましょう。<BR>
<BR>
<BR>
</DIV>
</div>

5 名前： カヅサツ ： 2005/07/12 12:10 ［URL］: > <DIV id="1" >

文法上、id属性値は数字から始めることはできませんので、避けた方が無難です。

他、手直ししてみた。

<!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>

6 名前： カヅサツ ： 2005/07/12 12:10 ［URL］: <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;
}
address{
clear: both;
color : #1c2cff;
background-color : #0080c0;
background-image : url(title1.gif);
font-style: normal;
text-align: center;
}
ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
li{
margin: 0px;
padding: 0px;
display: inline;
}
dl{
text-align: right;
background-image: url(title1.gif);
}
dt,
dd{
display: inline;
margin: 0px;
}

a:link img,
a:visited img{
border-width: 0px;
}
/* 店舗写真 */
#mainphoto{
margin: 1em 2em 0em 0em;
float: left;
}
/* お客様へお知らせ */
#notice{
margin: 3em 0em 3em 0em;
width: 350px;
}
/* お客様へお知らせ内メッセージ */
#notice div{
font-size: large;
height: 200px;
overflow: auto;
scrollbar-base-color: #FF8C00;
scrollbar-arrow-color: white;
background-color: #dceef6;
border: 1px #5daed7 solid;
}
#notice_message p{
margin: 0px;
}
/* バナー */
#banner{
text-align: center;
}
#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>

7 名前： カヅサツ ： 2005/07/12 12:10 ［URL］: <body>
<h1><small>こだわり仕上げ</small> エイトドライ</h1>
<ul>
<li><img src="8boy6.gif" width="100" height="100" alt=""></li>
<li><a href="http://8dry.com"><IMG
src="HOME.gif" width="84" height="41" alt="ホーム"></a>
<li><a href=""><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=""><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=""><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=""><img
src="./n_image9.gif" width="84" height="41" alt="取扱い品目"
onmouseover="ImgSwap(this,'./m_image9.gif')"
onmouseout="ImgSwap(this,'./n_image9.gif')"></a></li>

8 名前： カヅサツ ： 2005/07/12 12:10 ［URL］: <li><a href=""><img
src="./n_image12.gif" width="84" height="41" alt="集配フォーム"
onmouseover="ImgSwap(this,'./m_image12.gif')"
onmouseout="ImgSwap(this,'./n_image12.gif')"></a></li>
<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="./honten.jpg" width="320" height="240" alt="" id="mainphoto"></p>

9 名前： カヅサツ ： 2005/07/12 12:10 ［URL］: <div id="notice">
<h2><img src="./a_blt008.gif" width="16" height="16" alt="">
お客様へお知らせ…
<img src="./a_blt008.gif" width="16" height="16" alt=""></h2>
<div>
<p>梅雨なのにまとまった雨が降らず、家の中の湿度が高くなるばかりで…
せっかくの衣替えできれいになった衣類、袋に入れっぱなしにしていませんか？</p>
<p>袋の中の湿気は衣類のカビや黄変シミの原因になります。</p>
<p>クリーニング後のポリ袋は、あくまでも仕上がった大切な衣類をご自宅に着くまで汚さないためのサービスです。</p>
<p>ご自宅に持ち帰ったらすぐにポリ袋から出して、風通しのよい場所で陰干ししてから収納しましょう。
</div>
</div>
<address>Copyright 8dry All rights reserved.</address>
<p id="banner"><img src="./bana.gif" alt=""></p>
</body>
</html>

10 名前： minmi ： 2005/07/12 12:10 ［URL］: Tさんありがとうございます。
コピペしてみました。思った感じになりました。

カヅサツさんのソース全部貼り付けたら思ったとおりのページになっていました。
すごい！！ただ、このurlの意味がわかりません。
「"http://www.w3.org/TR/html4/loose.dtd">」
このURLからソースを持ってきています。と、いう意味でしょうか？
コピペしただけでは自分のためになりませんね。
じっくりソースを観察したいと思います。
丁寧に教えていただきありがとうございます。
頑張って勉強します。
また、質問があるときはお付き合いください。
宜しくお願いします。

11 名前： phpinfo() ： 2005/07/12 12:10: >>10
＞<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

これはDOCTYPE宣言と言って、この文章がHTMLであることを示すモノです。
＃絶対書かなくてはいけません
http://www.parkcity.ne.jp/~chaichan/src/htmdtd.htm

12 名前： minmi ： 2005/07/12 12:10 ［URL］: phpinfo()さんありがとうございます。
DOCTYPE宣言はわかりますが、次のＵＲＬの意味することがわかりません。
ページを作るたびにこのＵＲＬも記入しないといけないのでしょうか？
宜しくお願いします。

13 名前： カヅサツ ： 2005/07/12 12:10 ［URL］: 文書型宣言中の "http://www.w3.org/TR/html4/loose.dtd" は「システム識別子」と言い、HTMLのルールを定義しているモノ（DTD）のありかです。

「システム識別子」は、実は省略可能です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
（こう書いても良い）

ただし、一部のブラウザは、HTML 4.01 Transitional の文書型宣言で「システム識別子」を省略してしまうと、表示がおかしくなる（ルール通りに表示してくれない）ことがありますので、省略しない方が無難です。

14 名前： minmi ： 2005/07/12 12:10 ［URL］: カヅサツさんありがとうございます。
＞省略しない方が無難です。
とのことなので、省略せずに記入します。
まだまだHTML CSS不思議だらけです。
でも、調べながら少しづつでも想像通りになっていくと、楽しいですね。
頑張ります！

15 名前： minmi ： 2005/07/12 12:10 ［URL］: カヅサツさんが先日作っていただいたソースを基にページを作りました。
トップページもその他増やしたりしたので、レイアウトに悩んでいます。
スクロールできる枠の表示位置のソースがわかりません。
下記ソースだとは思うのですが、左から＊＊＊上から＊＊＊などで固定しているのでしょうか？

/* お客様へお知らせ */
#notice{
margin: 3em 0em 3em 0em;
width: 350px;
}
/* お客様へお知らせ内メッセージ */
#notice div{
font-size: large;
height: 200px;
overflow: auto;
scrollbar-base-color: #FF8C00;
scrollbar-arrow-color: white;
background-color: #dceef6;
border: 1px #5daed7 solid;
}
#notice_message p{
margin: 0px;
}
それと、カヅサツさんのソースを見ながら意味を調べて少しは解読できるようになったつもりですが、
リンクメニューはどうして＜UL＞タグを使うのでしょうか？
＜P＞タグは使わないんですか？
こういうときは、このタグを使うというのがまだまだわかりません

16 名前： カヅサツ ： 2005/07/12 12:10: > スクロールできる枠の表示位置

> /* 店舗写真 */
> #mainphoto{
> margin: 1em 2em 0em 0em;
> float: left;
> }

float:leftとしているので、この画像は次に来る要素の左に回り込みます（あるいは、次に来る要素がこの画像の右に回り込むと言い替えることができます）。

ちなみに、うっかりしていましたが、

/* お客様へお知らせ */
#notice{
margin: 3em 0em 3em 0em;
width: 350px;
}

は、以下に修正して下さい。

/* お客様へお知らせ */
#notice{
margin: 1em 0em 2em 0em;
width: 350px;
float: left;
}

こうしないと、Operaやfirefoxで上手くいかないので。

> リンクメニューはどうして＜UL＞タグを使うのでしょうか？
> ＜P＞タグは使わないんですか？

p要素は段落（形式段落）です。一方、li要素は箇条書きであることを示します。
メニューというのは箇条書きでしょうから、li要素を使い、スタイルシートで横に並べました。
HTMLの要素（≠タグ）には意味があり、なるべく適切な要素を用いるべきと思います。

http://members.jcom.home.ne.jp/pctips/www/htmlcssintro.html

17 名前： minmi ： 2005/07/12 12:10 ［URL］: ＞メニューというのは箇条書きでしょうから、li要素を使い、スタイルシートで横に並べました
メニューは箇条書きなんて思っても見なかったです。
最終的な表示が思い通りにいけばタグは何でもいいのかと思っていました。
作りたいものが何を表してるかを考えるのも大事ですね。
上記タグの修正しておきます。
カヅサツさん本当に毎回ありがとうございます。

18 名前： カヅサツ ： 2005/07/12 12:10: > 最終的な表示が思い通りにいけばタグは何でもいいのかと思っていました。

肝心なのは「HTML文書において、表示は作成者の思い通りにならない」ということです。

読み手は Lynxなどの tty端末で閲覧しているかもしれません。そういう環境では往々にしてスタイルシートや物理要素に対応していなかったり、対応していたとしても限られたプロパティだけです。

また、読み上げデバイスに至っては「表示」という概念がありません。横に並べようが、回り込みだろうが、太字だろうが関係ないのです。

しかしながら、「段落は p」「箇条書きは li」「見出しは h1～h6」「引用は q か blockquote」「表は table」と、要素の意味に対応した正しいマークアップをすることで、どんな環境でも一定の読みやすい文書を提供することができます。

逆に言えば、誤ったマークアップをすると、予期せぬ環境で悲惨なことになります。段落と箇条書きくらいなら致命的ではありませんが、引用でもないのに blockquote を使ったり、表でもないのに table を使うのは「良くないHTML文書」です。