最近、アクセシビリティを考慮して、ブラウザの機能上だけでなく、
javascriptを使用した、文字を拡大・縮小するボタンがついているHPを良く拝見します。そこで、作成してみたのですが、どうもうまく機能してくれません。
下記のようにテキストのみの簡単なソースなら
OKなのですが、表の中の文字なども同じように拡大・縮小
させたりするにはどうしたらよいでしょうか?
お詳しい方がいらっしゃいましたらどうぞ宜しくご指導お願いします。
<style type="text/css">
<!--
.btn {
width:100px;
}
-->
</style>
<script type="text/javascript"><!--
fsize = 100;
function sizech(val) {
fsize = fsize + eval(val);
if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; }
if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; }
if(val == "0") fsize = 100;
document.body.style.fontSize = fsize + "%";
}
//-->
</script><LINK rel="stylesheet" href="table.css" type="text/css" id="_HPB_TABLE_CSS_ID_">
</HEAD>
<body id="bd">
<div><form>
<input type="button" class="btn" value="縮小" onclick="sizech('-20')">
<input type="button" class="btn" value="default" onclick="sizech('0')">
<input type="button" class="btn" value="拡大" onclick="sizech('+20')">
</form></div>
<P align="center">aaaa<BR>
</P>
No.3ベストアンサー
- 回答日時:
・ 元のソースコードとyambejpさまのご指摘をまとめてみました。
・ sizech(val)の引数valは、数値を渡すように変更しました。
------------------------------------------------------------
<html>
<head>
<title>sizech.html</title>
<style type="text/css">
<!--
.btn {
width: 100px;
}
-->
</style>
<script type="text/javascript"><!--
fsize = 100;
function sizech(val) {
fsize = fsize + val;
if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; }
if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; }
if(val == "0") fsize = 100;
document.body.style.fontSize = fsize + "%";
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.fontSize = fsize + "%";
}
}
//-->
</script>
</head>
<body id="bd">
<div>
<form action="">
<input type="button" class="btn" value="縮小" onclick="sizech(-20)">
<input type="button" class="btn" value="default" onclick="sizech(0)">
<input type="button" class="btn" value="拡大" onclick="sizech(+20)">
</form>
</div>
<div style="top: 50px; left: 50px; position: absolute; z-index: 1;" id="Layer1">
AAAAAAAAAAA
<div>
<table border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160">
<tbody>
<tr>
<td class="hpb-cnt-tb-cell3">AAAAA</td>
<td class="hpb-cnt-tb-cell4"></td>
<td class="hpb-cnt-tb-cell4"></td>
<td class="hpb-cnt-tb-cell4"></td>
</tr>
<tr>
<td class="hpb-cnt-tb-cell3">BBBBB</td>
<td class="hpb-cnt-tb-cell4"></td>
<td class="hpb-cnt-tb-cell4"></td>
<td class="hpb-cnt-tb-cell4"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
ご丁寧にありがとうございました。
おはずかしながら、ボタンの大きさや文字、
はたまたボタン文字の中央表示ができません・・・(涙)
ボタンはこれ以上の大きさにはならないのでしょうか?
No.6
- 回答日時:
>>> ボタン自体の最初の大きさや、ボタンに表示される文字を
>>> 今よりも大きくしたいのですが・・・
これには、window.onload または style="font-size:20pt" を使います。
function setButton() {
var bsize = 200; // 微調整
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
inputs[i].style.fontSize = bsize + "%";
}
}
window.onload = setButton;
または
<input type="button" style="font-size:20pt" class="btn" value="縮小" onclick="sizech(-20)">
以下のコードを参考にしてみてください。
------------------------------------------------------------
<html>
<head>
<title>sizech.html</title>
<style type="text/css">
<!--
.btn {
width: 100px;
}
-->
</style>
<script type="text/javascript"><!--
fsize = 100;
function sizech(val) {
fsize = fsize + val;
if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; }
if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; }
if(val == "0") fsize = 100;
document.body.style.fontSize = fsize + "%";
}
function setButton() {
var bsize = 200; // 微調整
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
inputs[i].style.fontSize = bsize + "%";
}
}
// window.onload = setButton;
//-->
</script>
</head>
<body id="bd">
<div>
<form action="">
<input type="button" style="font-size:20pt" class="btn" value="縮小" onclick="sizech(-20)">
<input type="button" style="font-size:20pt" class="btn" value="default" onclick="sizech(0)">
<input type="button" style="font-size:20pt" class="btn" value="拡大" onclick="sizech(+20)">
</form>
</div>
<div id="Layer1">
AAAAAAAAAAA
<div>
<table border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160">
<tbody>
<tr>
<td class="hpb-cnt-tb-cell3">AAAAA</td>
<td class="hpb-cnt-tb-cell4"></td>
<td class="hpb-cnt-tb-cell4"></td>
<td class="hpb-cnt-tb-cell4"></td>
</tr>
<tr>
<td class="hpb-cnt-tb-cell3">BBBBB</td>
<td class="hpb-cnt-tb-cell4"></td>
<td class="hpb-cnt-tb-cell4"></td>
<td class="hpb-cnt-tb-cell4"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
何度も丁寧にご回答いただき本当にありがとうございました。
おかげさまで、思ったとおりのページに仕上げることができました。
図々しくも何度も質問させていただきましたが、皆様にご丁寧に
教えていただき大変感謝しております。本当にありがとうございました。
No.5
- 回答日時:
・ フォントサイズだけ変えればよいようです。
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
//inputs[i].style.width = inputs[i].offsetWidth * fsize / old_fsize + "px";
inputs[i].style.fontSize = fsize + "%";
}
度々ご回答ありがとうございます。
ボタンを押したときにサイズが変わるのではなく、
ボタン自体の最初の大きさや、ボタンに表示される文字を
今よりも大きくしたいのですが・・・
わがままばかり言ってしまって大変申し訳ないのですが、
もしお時間がありましたら宜しくお願いします。
No.4
- 回答日時:
>ご丁寧にありがとうございました。
>おはずかしながら、ボタンの大きさや文字、
>はたまたボタン文字の中央表示ができません・・・(涙)
>ボタンはこれ以上の大きさにはならないのでしょうか?
ボタンサイズも拡大縮小して欲しいってことですか?
もしそうなら、>ANo.3さんのを改良して、
function sizech(val) {
var old_fsize = fsize;
fsize = fsize + val;
if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; }
if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; }
if(val == "0") fsize = 100;
document.body.style.fontSize = fsize + "%";
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.fontSize = fsize + "%";
}
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
inputs[i].style.width = inputs[i].offsetWidth * fsize / old_fsize + "px";
inputs[i].style.fontSize = fsize + "%";
}
}
みたいな感じです。
ちなみに、こういった拡大縮小を使用する場合、positionを使うとデザインが崩れる原因になりますので、気をつけたほうがいいですよ。
ご指導ありがとうございます。早速やってみましたが、
確かにデザインが崩れてしまうのでちょっと考えてからにします。
ありがとうございました。
No.2
- 回答日時:
あら申し訳ない
document.body.style.fontSize = fsize + "%";
とご自身がかいている後ろの行に
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.fontSize = fsize + "%";
}
を追記してください
この回答への補足
なんだかぼけた質問ばかりで何度も申し訳ありません。
試してみましたが、ちょっとうまくいきませんでした。
ちなみに、
<BODY>
<DIV style="top : 50px;left : 50px;
position : absolute;
z-index : 1;
" id="Layer1">
<DIV>
<TABLE border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160">
<TBODY>
<TR>
<TD class="hpb-cnt-tb-cell3">AAAAA</TD>
<TD class="hpb-cnt-tb-cell4"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
</TR>
<TR>
<TD class="hpb-cnt-tb-cell3">BBBBB</TD>
<TD class="hpb-cnt-tb-cell4"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
</TR>
<TR>
<TD class="hpb-cnt-tb-cell3"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
</TR>
<TR>
<TD class="hpb-cnt-tb-cell3"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
<TD class="hpb-cnt-tb-cell4"></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>
</BODY>
具体的にご相談すると、このような表があったとき、
その中の文字を拡大縮小をボタンでできるようにするにはどうしたらよいですか?
図々しく質問攻めにしてしまって本当に恐縮ですが、お時間ございましたら宜しくご教授ください(^-^;)
No.1
- 回答日時:
テーブルは独自のルールでスタイルが設定されるようですね。
tdを拾ってfontSizeを変更してやればよいでしょう。
document.body.style.fontSize = fsize + "%";
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.fontSize = fsize + "%";
}
この回答への補足
早速のご回答ありがとうございます。
それなのに大変申し訳ないのですが、
javaにあまり詳しくないもので・・・
上記のソースをどの部分に挿入したら良いでしょうか?
詳しく教えていただけると大変助かります!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルのセルのクリック時、...
-
selectのonChangeが動作しません
-
jquery にて、アラートダイアロ...
-
javascriptのカルーセル
-
Table内TDの子要素を移動させた...
-
<JavaScript>tableタグを入力不...
-
指定した箇所へスクロールさせたい
-
return trueとreturn falseの用...
-
特定<table>内の<td>の色を変える
-
value内に変数を入れたい
-
確認ダイアログの出し方(JavaS...
-
至急!GetElementById でtdの...
-
HTML中のTABLEのデータを抽出す...
-
ひ孫に当たるiframe から親ウイ...
-
XMLHttpRequestを利用してPHPへ...
-
innerHTML内では改行は禁止?
-
プルダウンで選択すると、DBの...
-
slickのレスポンシブ > center...
-
onchangeイベントを強制的に発...
-
全てのselect要素をデフォルト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
<iframe>内にHTMLをランダム表...
-
javascriptで画像をテーブルに...
-
WEB制作に関する質問です。コン...
-
javascript でテーブル操作
-
カレンダーに印を付けたい
-
日にち指定によるテーブル/行の...
-
テーブルのtdの中に、重複避け...
-
innerHTMLでのテーブル作成
-
プルダウンメニューを表の中に...
-
簡単なJavaスロットマシーンに...
-
javascriptで表に画像を貼る
-
javascriptで画像の移動
おすすめ情報