javascriptで文字を拡大・縮小させるには？

解決済

質問者：may555may
質問日時：2008/05/20 11:38
回答数：6件

最近、アクセシビリティを考慮して、ブラウザの機能上だけでなく、
javascriptを使用した、文字を拡大・縮小するボタンがついているHPを良く拝見します。そこで、作成してみたのですが、どうもうまく機能してくれません。
下記のようにテキストのみの簡単なソースなら
ＯＫなのですが、表の中の文字なども同じように拡大・縮小
させたりするにはどうしたらよいでしょうか？
お詳しい方がいらっしゃいましたらどうぞ宜しくご指導お願いします。

<style type="text/css">

</style>
<script type="text/javascript">
</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： auty
回答日時：2008/05/20 13:42

・　元のソースコードとyambejpさまのご指摘をまとめてみました。

・　sizech(val)の引数valは、数値を渡すように変更しました。

------------------------------------------------------------

<html>
<head>
<title>sizech.html</title>
<style type="text/css">

</style>
<script type="text/javascript">
</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>

- 0
- 件

通報する

この回答へのお礼

ご丁寧にありがとうございました。
おはずかしながら、ボタンの大きさや文字、
はたまたボタン文字の中央表示ができません・・・（涙）
ボタンはこれ以上の大きさにはならないのでしょうか？

通報する

お礼日時：2008/05/20 14:04

No.6

回答者： auty
回答日時：2008/05/20 19:14

＞＞＞　ボタン自体の最初の大きさや、ボタンに表示される文字を

＞＞＞　今よりも大きくしたいのですが・・・

これには、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">

</style>
<script type="text/javascript">
</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>

- 0
- 件

通報する

この回答へのお礼

何度も丁寧にご回答いただき本当にありがとうございました。
おかげさまで、思ったとおりのページに仕上げることができました。
図々しくも何度も質問させていただきましたが、皆様にご丁寧に
教えていただき大変感謝しております。本当にありがとうございました。

通報する

お礼日時：2008/05/21 09:54

No.5

回答者： auty
回答日時：2008/05/20 14:55

・　フォントサイズだけ変えればよいようです。

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 + "%";
}

- 0
- 件

通報する

この回答へのお礼

度々ご回答ありがとうございます。
ボタンを押したときにサイズが変わるのではなく、
ボタン自体の最初の大きさや、ボタンに表示される文字を
今よりも大きくしたいのですが・・・
わがままばかり言ってしまって大変申し訳ないのですが、
もしお時間がありましたら宜しくお願いします。

通報する

お礼日時：2008/05/20 16:28

No.4

回答者： HIRSYU
回答日時：2008/05/20 14:45

>ご丁寧にありがとうございました。

>おはずかしながら、ボタンの大きさや文字、
>はたまたボタン文字の中央表示ができません・・・（涙）
>ボタンはこれ以上の大きさにはならないのでしょうか？

ボタンサイズも拡大縮小して欲しいってことですか？
もしそうなら、>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を使うとデザインが崩れる原因になりますので、気をつけたほうがいいですよ。

- 0
- 件

通報する

この回答へのお礼

ご指導ありがとうございます。早速やってみましたが、
確かにデザインが崩れてしまうのでちょっと考えてからにします。
ありがとうございました。

通報する

お礼日時：2008/05/20 15:40

No.2

回答者： yambejp
回答日時：2008/05/20 12:51

あら申し訳ない

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>
具体的にご相談すると、このような表があったとき、
その中の文字を拡大縮小をボタンでできるようにするにはどうしたらよいですか？
図々しく質問攻めにしてしまって本当に恐縮ですが、お時間ございましたら宜しくご教授ください（＾－＾；）

補足日時：2008/05/20 13:10

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございました！できました！
}がひとつ抜けていました！！！
本当にありがとうございました！

通報する

お礼日時：2008/05/20 13:17

No.1

回答者： yambejp
回答日時：2008/05/20 12:08

テーブルは独自のルールでスタイルが設定されるようですね。

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 + "%";
}