HP作成について困ってます；；
<div id="sub">
<div class="frame">
<h3><img height="46" alt="" src="sub_midashi_moji.gif" width="252" border="0"></h3>
<ul id="fsize">
<li id="la"><a title="文字サイズ「大」" onclick="setActiveStyleSheet('la'); return false;" href="#">文字サイズを「大」にする</a> </li>
<li id="me"><a title="文字サイズ「中」" onclick="setActiveStyleSheet('me'); return false;" href="#">文字サイズを「中」にする</a> </li>
<li id="sm"><a title="文字サイズ「小」" onclick="setActiveStyleSheet('sm'); return false;" href="#">文字サイズを「小」にする</a> </li></ul></div>
このタグを入れてもブラウザに表示されないのはなぜですか？スタイルシートもいれてあるんですが；
投稿日時 - 2008-09-07 22:04:43
0人が「このQ&Aが役に立った」と投票しています
回答（4件中 1～4件目)
こんにちは。
styleswitcher.jsとは、どこかで配布されていたものでしょうか？
とすれば、Javascriptに問題は無く、HTMLの方に問題があるようですね。
まず、「文字サイズを変える部分だけ」のHTMLファイルを０から作ってみてはどうでしょう。
僕も自分で試して見ましたが、単純な構造の方がチェックも楽ですし・・・。
・試した内容（ＣＳＳ部分は省略・・・）
<script type="text/javascript">
function ChangeTextSize(n){
change.style.fontSize = n;
}
</script>
<ul id="sizemenu">
<li><a href="#" onclick="ChangeTextSize('18px')">文字サイズ大</a></li>
<li><a href="#" onclick="ChangeTextSize('16px')">文字サイズ中</a></li>
<li><a href="#" onclick="ChangeTextSize('12px')">文字サイズ小</a></li>
</ul>
<div id="change">
文字サイズが変わるよ
</div>
投稿日時 - 2008-09-08 11:55:00
お礼
こんばんわ。A List Apertってサイトです htmlも張りますね。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta name="copyright" content="Nikukyu-Punch" />
<title>リフォームのＤｒホームズ</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js" src="styleswitcher.js"></script>
</head>
<body
onload="MM_preloadImages('images/menu_over_01.gif','images/menu_over_02.gif','images/menu_over_03.gif','images/menu_over_04.gif','images/menu_over_05.gif')">
<div id="container">
<div id="header">
これが頭のほうです。 文字変更のhtmlも貼り付けたほうがいいでしょうか？
投稿日時 - 2008-09-08 22:33:32
> しかし・・・文字の変更がききません；
取り敢えず、JavaScriptにエラーが出ているのでその部分を書いてくれ
ないと誰にも回答できません。
ただ、できるなら自分でデバッグした方がいいと思うのですが...。
他にJSに詳しい人とかいないのでしょうか。
> ライン： ５４
54行目にエラーがあるといっています。
ただし、実際にエラーが出ているのはこの下の行(55行目の場合があり
ます)
また、この表示は単にエラーが発生している行であり、エラーの
直接の原因はこの行にない可能性もあります。
> 文字： １
上と合わせて54行目の1文字目にエラーがあるといっていますが、
この表示は結構いい加減なようなので宛になりません。
> エラー： オブジェクトを指定してください。
存在しないオブジェクトやnullまたはundefinedになっている
オブジェクトを参照しようとしたときに発生するエラーです。
オブジェクトを取得している部分を見直してください。
> コード： ０
これは何を指すのかぼくはよく分かっていません(エラーコードかな)。
> ＵＲＬ： dhtmled1
dhtmled1というファイルでエラーになっているという事です。
ところで、この名前になっているというのは何らかのオーサリング
ツールで作成していますか。
その場合はちゃんとJavaScriptのファイルが指定した場所にあるか
確認してください。
オーサリングツールで1回も保存していない場合。カレントディレクトリが
どこになっているのかあ不明になりますのでJSファイルが正常に
読み込めていない可能性が高いです。
(setActiveStyleSheetという関数が見つからないという事かも知れません)
投稿日時 - 2008-09-08 02:26:14
お礼
@charset "shift_jis";
body {
color: #333333;
margin: 0px;
padding: 0px;
text-align: center;
background: #FFFFFF url(images/bg.gif) repeat-x top;
font: 80%/2 "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
h1,h2,h3,p,ul,li{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
}
img {
border: none;
vertical-align: top;
}
iframe {
margin-bottom: 20px;
}
/*文字サイズ変更ボタン（ここは変更しないように）
------------------------------------------------------------------*/
#fsize {
height: 44px;
width: 173px;
margin-right: auto;
margin-left: auto;
padding-bottom: 10px;
}
#fsize li {
float: right;
}
#fsize a{
overflow:hidden; /*firefox用*/
display: block;
text-indent: -9999px;
}
#sm a {
background-image: url(images/fsize_btn_01.gif);
height: 44px;
width: 58px;
}
#sm a:hover {
background-image: url(images/fsizen_btn_01.gif);
}
#me a {
background-image: url(images/fsizen_btn_02.gif);
height: 44px;
width: 55px;
}
#me a:hover {
background-image: url(images/fsizen_btn_02.gif);
}
#la a {
background-image: url(images/fsize_btn_03.gif);
height: 44px;
width: 60px;
}
#la a:hover {
background-image: url(images/fsizen_btn_03.gif);
}
これがスタイルシートです。js部分と文字部分だけ入れました。htmlもはりますね 全くわからなくなりました；；
投稿日時 - 2008-09-08 22:29:37
>>ANo.1さん
> あと、アンカーにtitle属性ってないような・・・？
ありますよ。
http://www.tohoho-web.com/html/a.htm
Wikipediaでも各リンクに対して使用されています。
因みに、リンク先が違うのにそのリンクに使用している文字列が
同じものがあった場合に、区別ができないのでどちらかというと
title属性をつけることはむしろ推奨されています。
http://openlab.ring.gr.jp/k16/htmllint/explain.html#same-link-text
投稿日時 - 2008-09-08 02:10:27
お礼
返事が遅くなりました； リンクまでつけていただきありがとうございます。
投稿日時 - 2008-09-08 22:24:56
まず</div>がひとつ足りません。
個人の書き方によるんですが、
<div>
<div>
<ul>
<li><a onclick="setActiveStyleSheet('sm'); return false;" href="#">文字サイズを「小」にする</a> </li></ul></div>
このように書くとタグの対応が見ずらくタグ忘れなどが発生します。
<div>
<div>
<ul>
<li><a href="#">文字サイズを「小」にする</a></li>
</ul>
</div>
</div>
このようにした方が後々メンテするときも見やすいです。
（開始タグを改行したら、終了タグも改行し、改行しないなら一行で書ききるべきだと思います。）
あと、アンカーにtitle属性ってないような・・・？
表示されないって言うのがどの状態でなのかがよくわかりませんが、このソースにとりあえず<html><head><body>を付けてHTMLを作成し、ローカルで表示しました。
投稿日時 - 2008-09-07 22:27:06
補足
<script type="text/javascript" src="script.js" src="styleswitcher.js"></script>
HTMLがこのようになってますがダメですか？
投稿日時 - 2008-09-07 23:26:16
お礼
わかりやすい回答ありがとうございます＾＾ 一応治して見たら表示しました！
しかし・・・文字の変更がききません；
ライン： ５４
文字： １
エラー： オブジェクトを指定してください。
コード： ０
ＵＲＬ： dhtmled1
とでました・・・ ＪＳとstyleswitcherなるものがフォルダに入ってますが、同じフォルダに２個ｊｓをいれてるからですか？
投稿日時 - 2008-09-07 22:57:17
