文字サイズを調整する
<HTML>
<HEAD>
<TITLE>文字サイズを調整する</TITLE>
<STYLE TYPE="text/css">
<!--
a {
text-decoration:none;
}
body,tr,td {
font-size:12px;
color:#000000;
}
.text {
font-size:14px;
color:#000000;
line-height:140%;
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var fsize = new Array(10,12,14,16,18); // フォントサイズ
var fnum = 2; // 初期表示のフォントサイズの配列番号
var areaNum = 1; // フォントサイズを変更できるエリアの数
function fsizeChg(num){
fnum += num;
if (fnum>4) fnum=4;
if (fnum<0) fnum=0;
if (document.all){ // for IE
for (i=1;i<=areaNum;i++){
if (document.all["area"+i]){
document.all["area"+i].style.fontSize = fsize[fnum]+"px";
document.all["area"+i].style.lineHeight = "140%";
}
}
} else { // for NN6
for (i=1;i<=areaNum;i++){
if (document.getElementById("area"+i)){
document.getElementById("area"+i).style.fontSize = fsize[fnum]+"px";
document.getElementById("area"+i).style.lineHeight = "140%";
}
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" bgcolor="#ffcc00">
<!-- 本文開始-->
<TABLE width="570" border="0" cellspacing="4" cellpadding="4">
<TR>
<TD colspan="2"><FONT COLOR="#d95700"><B>Web Master's Heaven</B> / <B>アンディ・ヤン先生のウェブマスター講座</B> /</FONT></TD>
</TR>
<TR>
<TD bgcolor="#FF6600" width="450" height="18"><b><font color="#FFFFFF">ベーシックコース</font></b></TD>
<TD bgcolor="#FF6600" align="right" width="108" nowrap><!------ 文字サイズ ＋− ------>
<font color="#FFFFFF">文字サイズ</font> <A HREF="javascript:void(0);" ONCLICK="fsizeChg(+1)"><B style="background-color:#eeeeee">＋</B></A> <A HREF="javascript:void(0);" ONCLICK="fsizeChg(-1)"><B style="background-color:#eeeeee">−</B></A></TD>
</TR>
<TR>
<TD><SPAN style="font-size:18px; line-height:100%; font-weight:bold; color:#003399">第1回 ウェブマスターって何？</SPAN>
</TD>
<TD align="right"><SPAN style="font-style:italic">09 Aug. 2000</SPAN></TD>
</TR>
<TR><TD colspan="2">
<!-- 講座本文開始 -->
<TABLE align="center" border="0" cellspacing="2" cellpadding="2" WIDTH="570">
<TR>
<TD colspan="2" nowrap><DIV style="font-size:16px; line-height:120%; margin-left:8px;font-weight:bold; color:#003399">１.ウェブマスターとは</DIV><BR></TD>
</TR>
<TR>
<TD width="24"> </TD>
<TD width="530"><SPAN class="text"><!------ 文字サイズ変更可能なテキスト ------>
<SPAN id="area1">
このページを開いている皆さんは、それぞれの状況によって、様々なスタンスでウェブマスターという言葉を捉えていらっしゃることと思います。例えば会社のホームページを作成するという理由でウェブマスターに任命された方、既にあるウェブサイトの管理を新たに任された方、ホームページを自分で作成した経験を活かして、ウェブマスターという肩書きの仕事をしたいという方。<BR><BR>それぞれ立場が異なれば、自分のマスターしなくてはならない仕事も異なってきます。さて、ここでまず考えてみて頂きたいのが、ウェブマスターというのはいかなる仕事か、ということです。字義通りにとるならば、<BR><BR>
<B>ウェブマスター＝ウェブ（ことにウェブサイト）に精通している人間</B><BR><BR>
という図式が成り立ちます。ここでもう一つ考えて頂きたいことがあります。ウェブマスターがウェブに精通している人だとして、ウェブの何に精通していなければならないのでしょうか？ここで最初の質問、ウェブマスターというのはいかなる仕事か、という質問が活きてくるのです。ウェブマスターのやるべき仕事は大まかに分けて次の４つ（段階）に分けられます。<BR><BR>
<B>１.ウェブサイト構築のプランニングをする<BR>
２.ウェブサイトのデザインを行う<BR>
３.ウェブサイトのコーディング（HTML、JavaScript、CGIによるページ作成やプログラミング）を行う<BR>
４.ウェブサイトを管理・運営する</B><BR><BR>
あくまでここに挙げた４つは大まかな区別ですが、例えばYahoo!クラスの非常に大規模なウェブサイトでも、個人で運営する小さなサイトでも、程度の差こそあれ、すべて以上の４つの段階を経ることになるのです。<BR></SPAN>
<!------ 文字サイズ変更可能なテキスト 終了 ------>
</SPAN></TD>
</TR>
</TABLE>
<BR>
<!-- 講座本文終了 -->
</TD>
</TR>
</TABLE>
<!-- 本文終了-->
<BR>
</BODY>
</HTML>
※「＋」「−」をクリックすると、本文の文字のサイズを調整できます。
ブラウザのメニューからも文字のサイズを調整できますが、すべての文字の
サイズが大きくなってしまいます。ここでは、本文などページ内の一部のみ
文字のサイズを調整できるようにしています。
文字の最小サイズ〜最大サイズを配列に設定します。
var fsize = new Array(10,12,14,16,18); // フォントサイズ
上記の例では、最小 10px 〜 最大 18px で5段階に設定しています。
初期表示時の文字サイズが上記配列での何番目かを設定します。
配列番号は0から始まります。
var fnum = 2; // 初期表示のフォントサイズの配列番号
上記の例では、初期表示時の文字サイズは 14px なので、2をセットしています。
（文字サイズが調整可能な本文には、<SPAN class="text"> でスタイルが設定されています。
文字サイズ調整前の初期表示時には、このスタイルが適用されますので、14px となります。）
文字サイズを調整できる部分の数を設定します。
var areaNum = 1; // フォントサイズを変更できるエリアの数
文字サイズを調整できる部分は、
<SPAN id="area1"> 〜 </SPAN> でくくります。
複数ある場合は、area1、area2、と連番にしてください。
このタグの間に、フォントサイズを指定したスタイルを設定すると、
文字サイズの調整が効きませんのでご注意ください。
・文字サイズを調整できるスタイルの設定
<SPAN class="text"><SPAN id="area1">
・・・・・
</SPAN></SPAN>
・文字サイズを調整できないスタイルの設定
<SPAN id="area1"><SPAN class="text">
・・・・・
</SPAN></SPAN>
ホームページ作成ガイド
ホームページ作成ガイド