守ろう自由なインターネット ホームページの作り方教室 発展編
JavaScript
and
StyleSheet

JavaScript

JavaScriptを使うとマウスがリンクに重なると絵を変える等の動的な変化をすることができます。

  • ダイアログボックス

    • クリックした時に確認のメッセージを出力するダイアログボックスを表示できます。
    ※Netscape 3.0以降やInternet Explorer等のJavaScriptのみ使えます。

    ソースプログラム
    <form>
    <input type=button value="リンクについて"
    　onClick="alert('リンクは自由です')">
    </form>
    画面表示

  • 文字のスクロール

    • Internet Explorerを使えば marquee で文字をスクロールできます。
    JAVA でプログラムしても出来ますが，JavaScriptとformの連動でも出来ます。
    bodyのタグのonLoadでロード完了時に指定した関数 scrollbox() を実行します。

    ソースプログラム
    <head>
    <script language="JavaScript">
    <!-- Begin code
    msg = "このページはリンクフリーです。";
    msg = msg + "質問は受け付けません(^^;; ";
    function scrollbox() {
    　document.disp.box.value=msg;
    　msg = msg.substring(2, msg.length) + msg.substring(0,2);
    　setTimeout("scrollbox()",250);
    }
    // -- End code -->
    </script>
    </head>
    <body onLoad="scrollbox()">
    <centter><form name="disp">
    <input name="box" type="text" size=52>
    </form></center>
    画面表示

  • 画面のスクロール

    • Internet Exploer 3.0 , Netscape 3.0 以降では，下の画面が見えるように自動的にスクロールさせる事が出来ます。
    スクロールさせるドット数を scrollup(ドット数) で指定します。
    自動的に起動させるには <body onLoad="scrollup(200);"> 等とします。

    ソースプログラム
    <head>
    <script language="JavaScript">
    <!-- Begin code
    var next=0;
    var start=0;
    function scrollup(count) {
    　next = count -1;
    　if( next > 0 && navigator.appVersion > "2") {
    　　scroll(0,start++);
    　　setTimeout("scrollup(next)",10);
    　}
    }
    // -- End code -->
    </script>
    </head>
    ソースプログラム
    <center><form>
    <input type=button value="スクロール"
    　onClick="scrollup(600)">
    </form></center>
    画面表示

  • 戻る

    • 複数のページからリンクされているページで簡単に元に戻るリンクを設定できます。

    ソースプログラム画面表示
    <a href="javascript:history.back()">
    一つ戻る。</a>     		一つ戻る。

  • メニュー選択

    • formのselectを使ってメニューを選択し，Go!ボタンでそのページへジャンプできます。
    フレームで画面を分割表示し，選択結果を分割画面(name=prog)へ表示するには location.href を parent.prog.location.href とします。

    ソースプログラム
    <form>
    　<select name="list">
    　　<option value="cg.htm">ＣＧギャラリー
    　　<option value="dome0.htm">スライド
    　　<option value="links.htm">リンク集
    　</select>
    　<input type=button value="Go!"
    　　onClick="location.href=
    　　form.list.options[form.list.selectedIndex].value">
    </form>
    画面表示

    onChange を利用すれば，メニューの変更と同時にジャンプ出来ます。

    ソースプログラム
    <form>
    　<select onChange="location.href=this.options[this.selectedIndex].value">
    　　<option value="html.htm">選んで下さい
    　　<option value="cg.htm">ＣＧギャラリー
    　　<option value="dome0.htm">スライド
    　　<option value="links.htm">リンク集
    　</select>
    </form>
    画面表示

  • リモコン

    • Netscape 3.0, Internet Explorer 4.0以降は，小さな子ウィンドウを表示し，それをリモコンとすることが出来ます。

    ソースプログラム　本体
    <script language="JavaScript">
    <!-- Begin code
    　self.name="Main";
    　if( navigator.userAgent.indexOf("Mozilla") == 0 &&
    　　　navigator.userAgent.charAt(8) >= "3" ) {
    　 window.open("menu.htm","sub","width=140,height=140");
    　}
    //-- End code -->
    </script>
    ソースプログラム　menu.htm
    <html>
    <head><title>Menu</title></head>
    <body>
    <base target="Main">
    <a href="html.htm">HTML</a><br>
    <a href="links.htm">Links</a><br>
    <a href="cg.htm">CG</a>
    </body>
    </html>

  • 高機能メニュー

    • ラジオボタンを使って，メニューの中身を変更させる高機能なメニューも出来ます。
    リモコンとして使うときは呼び出す関数 jump() を remote() に変更して下さい。
    ※Netscape 3.0 , Internet Explorer 4.0 以降でのみ使える技です。

    ソースプログラム
    <script language="JavaScript">
    <!--
    function remote(url) {
    　if( navigator.userAgent.indexOf("Mozilla") == 0 &&
    　　　navigator.userAgent.charAt(8) >= "3" ) {
    　　win=window.open("","main");
    　　win.location.href=url;
    　} else {
    　　location.href=url;
    　}
    }
    function jump(url) {
    　location.href=url;
    }
    function menu1(form) {
    　form.menu.options[0].text="基 礎 編";
    　form.menu.options[0].value="html_1.htm";
    　form.menu.options[1].text="応 用 編";
    　form.menu.options[1].value="html_2.htm";
    　form.menu.options[2].text="拡 張 編";
    　form.menu.options[2].value="html_3.htm";
    }
    function menu2(form) {
    　form.menu.options[0].text="リンク集";
    　form.menu.options[0].value="links.htm";
    　form.menu.options[1].text="Computer";
    　form.menu.options[1].value="link_1.htm";
    　form.menu.options[2].text="社　　会";
    　form.menu.options[2].value="link_2.htm";
    }
    function menu3(form) {
    　form.menu.options[0].text="ギャラリー";
    　form.menu.options[0].value="cg.htm";
    　form.menu.options[1].text="スライド";
    　form.menu.options[1].value="dome0.htm";
    　form.menu.options[2].text="感　　想";
    　form.menu.options[2].value="cg_res.htm";
    }
    //-->
    </script>
    <form>
    　<input type="radio" onClick="menu1(this.form)" 　name=list checked>HTML
    　<input type="radio" onClick="menu2(this.form)" 　name=list>Links
    　<input type="radio" onClick="menu3(this.form)" 　name=list>CG<br>
    　<select name="menu">
    　<option value="html_1.htm">基 礎 編
    　<option value="html_2.htm">応 用 編
    　<option value="html_3.htm">拡 張 編
    　</select>
    　<input type="button" Value="Go!!"
    　onClick="jump(form.menu.options[form.menu.selectedIndex].value)">
    </form>
    画面表示
    HTML Links CG

  • パスワード

    • パスワードを知っている会員だけアクセス出来るように，隠しページへのリンクを設定できます。
    パスワードをファイル中にそのまま書くので一工夫が必要です。
    下記の例では member.htm にジャンプするように指定しています。

    ソースプログラム
    <html>
    <head>
    <title>パスワード</title>
    　<meta name="ROBOTS" content="NONE">
    　<meta http-equiv="Expires" content="0">
    <script language="JavaScript">
    <!-- Begin code
    var key = "abc";
    var msg = "パスワードを入力してください。";

    keyin = prompt( msg, "" );
    if( keyin == key ) {
    　location.href = "member"+".htm";
    } else {
    　alert("パスワードが違います。");
    　history.back();
    　close();

    }
    // End code -->
    </script>
    </head>
    <body></body>
    </html>

  • ファイルの更新日

    • WEBページの更新の日時を自動的にWEBページに埋め込むこともできます。

    ソースプログラム
    <script language="JavaScript">
    <!--
    　var update = new Date(document.lastModified);
    　Month = update.getMonth() + 1;
    　Date = update.getDate();
    　Year = update.getYear()%100;
    　if( Month <10 ) Month="0" + Month;
    　if( Date <10 ) Date="0" + Date;
    　if( Year < 69 )
    　　document.writeln("<i>Last updated: '" +
    　　Year + "/" + Month + "/" + Date + "</i><br>");
    // -->
    </script>

  • 時計

    • form 中に現在の時間を表示することができます。

    ソースプログラム
    <head>
    <script language="JavaScript">
    <!-- Begin code
    function clock() {
    　var now = new Date();
    　var hour = now.getHours();
    　var min = now.getMinutes();
    　var sec = now.getSeconds();
    　if(hour < 10) hour="0"+hour;
    　if(min < 10) min="0"+min;
    　if(sec < 10) sec="0"+sec;
    　document.clock.box.value = hour+":"+min+":"+sec;
    　setTimeout('clock()', 1000);
    }
    // -- End code -->
    </script>
    </head>
    <body onLoad="clock()">
    <center><form name="clock">
    <input type="text" size="8" name="box" style="font-size:7mm">
    </form></center>
    画面表示

  • 株価計算機

    • フォームにデータを入力させて，複雑な計算を行わせる事もできます。
    株式の利益計算プログラムを作りました。 (野村証券, ウツミ屋証券, ライブドア証券)

    自分のために作ったもので，計算結果は保証しません、(^^;;;

    ソースプログラム
    <script language="JavaScript">
    <!--
    var kabu=0;
    function calc(form) {
    　buy　= form.buy.value　* form.count.value ;
    　sell = form.sell.value * form.count.value ;
    　form.char1.value = charge( buy );
    　form.char2.value = charge( sell );
    　form.tax.value = Math.round((sell - buy
    　　- form.char1.value - form.char1.value)*0.01);
    　if(form.tax.value<0) form.tax.value=0;
    　form.gold.value　= sell - buy
    　　- form.char1.value- form.char2.value - form.tax.value;
    }

    function charge(money) {
    　if(money == 0)
    　　cost = 0;
    　else if(kabu == 2)
    　　cost = livedoor(money);
    　else if(kabu == 1)
    　　cost = utsumiya(money);
    　else
    　　cost = nomura(money);
    　return Math.floor(cost);
    }

    function livedoor(money) {
    　if(money < 100000)
    　　cost=525;
    　else if( money <= 1000000 )
    　　cost=1050;
    　else if( money <= 2000000 )
    　　cost=2100;
    　else if( money <= 3000000 )
    　　cost=2625;
    　else
    　　cost = 3150;
    　return cost;
    }

    function utsumiya(money) {
    　if(money <= 2000000)
    　　cost = 1029;
    　else if( money <= 500000 )
    　　cost= 1344;
    　else
    　　cost = money * 0.00021;
    　return cost;
    }

    function nomura(money) {
    　if(money < 250000)
    　　cost=2625;
    　else if( money <= 500000 )
    　　cost=money * 0.0105;
    　else if( money <= 700000 )
    　　cost=money * 0.00945 + 525;
    　else if( money <= 1000000 )
    　　cost=money * 0.0084 + 1260;
    　else if( money <= 3000000 )
    　　cost=money * 0.00714 + 2520;
    　else if( money <= 5000000 )
    　　cost=money * 0.006825 + 3465;
    　else if( money <= 10000000 )
    　　cost=money * 0.00525 + 11340;
    　else if( money <= 30000000 )
    　　cost=money * 0.004725 + 16590;
    　else if( money <= 50000000 )
    　　cost=money * 0.0021 + 95340;
    　else
    　　cost=money * 0.00105 + 147840;
    　return cost;
    }
    // -->
    </script>
    <form>
    購　入<input type=text value=0 size=7 name=buy>
    売　却<input type=text value=0 size=7 name=sell>
    株　数<input type=text value=0 size=8 name=count><br>
    手数料<input type=text value=0 size=7 name=char1>
    手数料<input type=text value=0 size=7 name=char2>
    譲渡税<input type=text value=0 size=8 name=tax>
    利　益<input type=text value=0 size=10 name=gold><br>
    証券会社　
    <input type=radio name=radio onClick="kabu=0" checked>野　村
    <input type=radio name=radio onClick="kabu=1">ウツミ屋
    <input type=radio name=radio onClick="kabu=2">ライブドア<br>
    <input type=button value="計算!!" onClick="calc(this.form)">
    <input type=reset value="Reset!" onClick="kabu=0">
    </form>

    画面表示
    購　入 売　却 株　数
    手数料 手数料 譲渡税 利　益
    証券会社　 野　村 ウツミ屋 ライブドア

  • 並べ替え

    • フォームに数値を入力させて，並べ替える事もできます。
    新教科「情報」現職教員等講習会の作品として作りました。

    ソースプログラム
    <script language="JavaScript">
    <!--
    x=new Array(5);
    function getdata(form){
    　x[0]=form.i0.value*1; x[1]=form.i1.value*1;
    　x[2]=form.i2.value*1; x[3]=form.i3.value*1;
    　x[4]=form.i4.value*1; x[5]=form.i5.value*1;
    }

    function putdata(form){
    　form.o0.value=x[0]; form.o1.value=x[1];
    　form.o2.value=x[2]; form.o3.value=x[3];
    　form.o4.value=x[4]; form.o5.value=x[5];
    }

    function sort(form){
    　getdata(form);
    　　for(i=5;i>0;i--){
    　　　for(j=0;j<=i-1;j++){
    　　　　if(x[j]>x[j+1]){
    　　　　　dumy=x[j+1];
    　　　　　x[j+1]=x[j];
    　　　　　x[j]=dumy;
    　　　　}
    　　}
    　}
    　putdata(form);
    }
    // -->
    </script>
    <form>
    入力
    <input type=text value=0 size=2 name=i0>
    <input type=text value=1 size=2 name=i1>
    <input type=text value=2 size=2 name=i2>
    <input type=text value=3 size=2 name=i3>
    <input type=text value=4 size=2 name=i4><br>
    出力
    <input type=text size=2 name=o0>
    <input type=text size=2 name=o1>
    <input type=text size=2 name=o2>
    <input type=text size=2 name=o3>
    <input type=text size=2 name=o4>
    <input type=button value="Sort!!" onClick="sort(this.form)">
    </form>
    画面表示
    入力
    出力

  • アイコンの変更

    • リンク部分にマウスが重なるとアイコンが変わるという事をしているページを見かけます。
    これはJavaScriptでマウスの位置により絵のソースを変更しています。
    ※Netscape 3.0 , Internet Explorer 4.0 以降でのみ使える技です。

    ソースプログラム
    <script language="JavaScript">
    <!-- Begin code
    function In(n) {
    　if(check())
    　　document.images["m"+n].src = "maru.gif";
    }
    function Out(n) {
    　if(check())
    　　document.images["m"+n].src = "m1.gif";
    }
    function check() {
    　if ( navigator.userAgent.indexOf ("Mozilla") == 0 &&
    　　navigator.userAgent.charAt(8) >= "3" ) {
    　　　return true;
    　　} else {
    　　　return false;
    　　}
    }
    // -- End code -->
    </script>
    <a href="cg.htm"
    　　onMouseOver="In(1)" onMouseOut="Out(1)">
    <img src="m1.gif" name=m1 border=0 width=12 height=12>
    CGギャラリー</a>
    <a href="links.htm"
    　　onMouseOver="In(2)" onMouseOut="Out(2)">
    <img src="m1.gif" name=m2 border=0 width=12 height=12>
    リンク集</a>
    <a href="html.htm"
    　　onMouseOver="In(3)" onMouseOut="Out(3)">
    <img src="m1.gif" name=m border=0 width=12 height=12>
    HTML講座</a>
    画面表示
    CGギャラリー　 リンク集　 HTML講座　

  • 背景画像の変更

    • このページを印刷するときには，背景の色とイメージを印刷します。しかし，左端の背景画像が邪魔になります。
    背景を変えることが出来れば，製本したときの見栄えがよくなります。

    ソースプログラム
    <table cellspacing=0 cellpadding=0>
    <tr align=center valign=middle style="font-size:11pt">
    <th background="img/wood.gif" width=100 height=32>
    <b onMouseOver="document.body.background='dot.gif'">
    印刷用背景</b>
    </th><th background="img/wood.gif" width=100 height=32>
    <b onMouseOver="document.body.background='bkg10.gif'">
    標準の背景</b>
    </th> </th><th background="img/wood.gif" width=100 height=32>
    <b onMouseOver="document.body.background='kibochan.gif'">
    動画の背景</b>
    </th> </tr>
    </table>
    画面表示
    印刷用背景 標準の背景 動画の背景

  • クッキー

    • クッキーを利用してホームページを訪れた回数などをブラウザに記憶させることもできます。
    cookie.jsは別のファイルにしてライブラリーとして使用します。

    ソースプログラム(cookie.js)
    function getCookie(key) {
    　Line=doccument.cookie+";";
    　Begin=Line.indexOf(key);
    　if(Begin!=-1) {
    　　Line=Line.substring(Begin,Line.length);
    　　Begin=Line.indexOf('=', 0)+1;
    　　End=Line.indexOf(';', Begin);
    　　return(unescape(Line.substring(Begin, End)));
    　}
    　return("");
    }

    function setCookie(key,value) {
    　Expire = new Date;
    　Expire.setTime(Expire.getTime() + 365 * 24 * 60 * 60 * 1000);
    　document.cookie = key + '=' + escape(value)
    　　　　　　　　　　　 + '; expires=' + Expire.toGMTString();
    }

    function resetCookie(key) {
    　if (document.cookie != "") {
    　　Expire = new Date;
    　　Expire.setTime(Expire.getTime() - 1 * 24 * 60 * 60 * 1000);
    　　document.cookie = key + '= ; expires=' + Expire.toGMTString();
    　}
    }
    ソースプログラム
    <script language="JavaScript" src="cookie.js"></script>
    <script language="JavaScript">
    <!--
    　count =getCookie('count');
    　if (count == "") count = 1;
    　document.write(count, '回目のアクセス，ありがとうございます。');
    　setCookie('count', ++count);
    //-->
    </script>
    画面表示

  • 印刷ボタン

    • ホームページ上に印刷のスイッチを作ることができます。

    ソースプログラム
    <center><form>
    <input type="button" value="印刷" onClick="window.print()">
    </form></center>
    画面表示


    StyleSheet

    Internet Explorer 3.0 , Netscape 4.0 以降のブラウザではスタイルシートが使えます。
    画面上のフォントやレイアウトをこれまで以上に自由に設定できます。
    スタイルシートが使えない人の事を考えると，使わない方がよいと思います。

    1. 宣言方法

      2. スタイルシートの宣言方法は，以下の３通りあります。
      下の例は，<h1> <h2> <h3> の色を blue にします。

      Linking Style Sheet

      　スタイルシートの設定を別のファイルに書き，全体で共通して使う方法です。
      　サーバーのMIMEの設定に text/css を設定する必要があります。

      ソースプログラム
      <html>
      <head>
      <title>Linking Style Sheet</title>
      <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      スタイルファイル(style.css)
      h1 { color: blue }
      h2 { color: blue }
      h3 { color: blue }

      Embedding Style Sheet

      　<head> 内の <style> と </style> の間にスタイルの設定を書き込みます。
      　スタイルシート未対応のブラウザのために <!-- と --> で挟みます。

      ソースプログラム
      <html>
      <head>
      <title>Embedding Style Sheet</title>
      <style type="text/css">
      <!--
      　h1,h2,h3 { color: blue }
      -->
      </style>
      </head>

      Inline Style

      　タグ内に stlye="設定内容" で指定します。
      　設定内容はプロパティと値のみ指定します。
      　そのタグで挟まれた部分だけに指定されます。

      ソースプログラム
      <h1 style="color: blue">Style Sheet</h1>
      <h2 style="color: blue">宣言方法</h2>
      <h3 style="color: blue">Inline Style</h3>
      画面表示

      Style Sheet

      宣言方法

      Inline Style


    2. 記述方法

      3. 
セレクター　{プロパティ: 値 }
セレクター, セレクター　{プロパティ: 値}
セレクター　{プロパティ: 値; プロパティ:値}
セレクター　{プロパティ: 値;
　　　　　　 プロパティ: 値}
      セレクターとは，タグやクラス，ＩＤ等の指定する対象部分です。
      複数のタグに同一の設定をする場合はセレクターをコンマ(",")で区切ります。
      プロパティとは色やフォント,レイアウト等の属性です
      コロン(":")の後にそのプロパティの値を指定します。
      複数のプロパティを指定するにはセミコロン(；)で区切って指定します。

      クラス

      　クラスとはあらかじめ定義した値をタグに指定する場合に使います。
      　セレクターを ．クラス名 とします。　指定するタグに class="クラス名" を加えます。
      　特定のタグのみに設定したいは，セレクターを タグ．クラス名 とします。

      ＩＤ

      　ＩＤとは特定の１個のタグに指定を行うときに使います。
      　セレクターを #ID名 とします。指定するタグに ID="ID名" を加えます。
      　同じID名は２個のタグで使うことは禁止されています。

      コメント

      　コメント(注釈)は /* と */ の間に書きます。
      　<style>タグ中と style=の指定中に書きます。

      ソースプログラム
      <html>
      <head>
      <title>Class</title>
      <style type="text/css">
      <!--
      　.blue { color: blue }
      　.red　{ color: red }
      　h4.yellow { background: yellow }
      　#a001 { background: cyan }
      -->
      </style>
      <body>
      <h4 class="red">赤のヘッダー</h4>
      <h4 class="blue">青のヘッダー</h4>
      <h4 class="yellow">黄のヘッダー</h4>
      <h4 class="red" id="a001">ID指定(a001)</h4>
      </body>
      </html>
      画面表示

      赤のヘッダー

      青のヘッダー

      黄のヘッダー

      ID指定(a001)


    3. 範囲指定

      4. WEBページ全体で使うフォントや背景等の指定は body への指定で行います。
      段落への指定は p や div への指定で行います。
      文字列への指定は，span へ指定し，範囲を <span> と </span> で挟みます。

      ソースプログラム
      <html>
      <head>
      <title>Style sheet</title>
      <style type="text/css">
      <!--
      　body { color: black }
      -->
      </style>
      <body>
      テキストの色は黒です。
      <div style="color: blue">
      テキストの色を青にしました。<br>
      文章に<span style="background: yellow">
      マーカー</span>も付きます。
      </div> 元の色に戻りました。
      </body>
      </html>
      画面表示
      テキストの色は黒です。
      テキストの色を青にしました。
      文章に マーカーも付きます。
      元の色に戻りました。

    4. 色

      5. 色の指定はhtmlでの色名でも指定できます。
      #FF0000, #F00, rgb(100%, 0%, 0%), rgb(255, 0, 255) は全て赤(red)です。
      #00FF00, #0F0, rgb(0%, 100%, 0%), rgb(0, 255, 0) は全て緑(green)です。
      #0000FF, #00F, rgb(0%, 0%, 100%), rgb(0, 0, 255) は全て青(blue)です。

    5. 単位

      6. スタイルシートで扱う単位には，絶対的な大きさを表す単位と相対的な大きさを表す単位があります。
      数値と単位の間には空白を入れないで下さい。
      絶対的な大きさで指定しても画面上では正確には表示されません。

      絶対的な単位相対的な単位
      　mmミリメートル　emフォントの高さ
      　cmセンチメートル　ex文字"x"の高さ
      　inchインチ(約25.4mm)　pxディスプレイの１ピクセル
      　ptポイント(1/72inch)　%パーセント
      　pcパイカ(12pt)

    6. 行間の指定

      7. line-height を指定することにより，行間を指定できます。
      値に normal を指定すると通常に戻ります。


      ソースプログラム
      <span style="line-height:150%">
      line-hightに150%を指定しました。<br>
      字の大きさの1.5倍の間隔になります。
      </span>
      画面表示
      line-hightに150%を指定しました。
      字の大きさの1.5倍の間隔になります。

    7. フォント

      8. font-weight　フォントの太さを指定します。
      100 200 300 400 500 600 700 800 900 と数値でも指定できます。
      現在 normal(400,500) と bold(600,700) の２種類しか表現出来ません。
      　font-weight:lighter1段階細くする。
      　font-weight:bolder1段階太くする。
      　font-weight:bold太くする。
      　font-weight:normal通常にする。

      font-size　フォントの大きさを指定します。
      pt(ポイント)や mm(ミリ)， px(ピクセル)などでも指定出来ます。
      ※実際の大きさとは違うことを考えてください。
      　font-size:xx-small最小にします。
      　font-size:x-small更に小さくします。
      　font-size:small小さくします。
      　font-size:medium通常の大きさにします。
      　font-size:large大きくします。
      　font-size:x-large更に大きくします。
      　font-size:xx-large最大にします。

      font-style　フォントの形状を指定します。
      　font-style:normal通常のフォントにします。
      　font-style:italicイタリック体を指定します。
      　font-style:oblique斜体を指定します。

      text-decoration　フォントを装飾します。
      　text-decoration:none何も付加しない。
      　text-decoration:line-through取消線を加える。
      　text-decoration:underline下線を加える。
      　text-decoration:overline上線を加える。
      　text-decoration:blink点滅させる。

      ソースプログラム
      font-weight:
      <span style="font-weight:normal">normal</span>
      <span style="font-weight:bold">bold</span><br>
      font-style:
      <span style="font-style:normal">normal</span>
      <span style="font-style:italic">italic</span>
      <span style="font-style:oblique">oblique</span><br>
      text-decoration:
      <span style="text-decoration:line-through">line-through</span>
      <span style="text-decoration:underline">underline</span>
      <span style="text-decoration:overline">overline</span>
      <span style="text-decoration:blink">blink(Only NN4)</span><br>
      font-size:
      <span style="font-size:16mm">16mm</span>
      <span style="font-size:10mm">10mm</span>
      <span style="font-size:8mm">8mm</span>
      <span style="font-size:16pt">16pt</span>
      <span style="font-size:10pt">10pt</span>
      <span style="font-size:8pt">8pt</span>
      <span style="font-size:16px">16px</span>
      画面表示
      font-weight: normal bold
      font-style: normal italic oblique
      text-decoration: line-through underline overline blink(Only NN4)
      font-size: 16mm 10mm 8mm 16pt 10pt 8pt 16px

    8. 間隔

      9. 文章や絵等の間隔を設定できます。
      文章全体を <div> と </div> で挟み，スタイルを指定してください。
      これを利用して影文字を作るには,2番目の文字列を2pt左上になるように設定します。
      ※同じ設定でInternet Explorerでは影が右上になります。
      margin-top:間隔上部の間隔(空白部分)を設定します。
      margin-bottom:間隔下部の間隔(空白部分)を設定します。
      margin-left:間隔左部の間隔(空白部分)を設定します。
      margin-right:間隔右部の間隔(空白部分)を設定します。

      ソースプログラム
      <div style="margin-top:10pt; margin-bottom:10pt; margin-left:20pt;">
      テキストの上部・下部に10pt,左に20pt空白が付きます。</div>
      <hr>
      <div style="font-size:40pt; color:silver; margin-top:0pt; margin-left:12pt">
      Style Sheet!!</div>
      <div style="font-size:40pt; color:blue; margin-top:-42pt; margin-left:10pt">
      Style Sheet!!</div>
      画面表示
      テキストの上部・下部に10pt,左に20pt空白が付きます。
      Style Sheet!!
      Style Sheet!!

    9. 表示位置

      10. 表の大きさが指定されている場合，テキストの表示位置をしていすることもできます。

      ソースプログラム画面表示
      <table style="width: 150px; height:150px;"
      　border=5>
      <tr style="vertical-align:top">
      <td style="text-align: left;">★</td>
      <td style="text-align: center;">★</td>
      <td style="text-align: right;">★</td>
      </tr>
      <tr style="vertical-align:middle">
      <td style="text-align: left;">★</td>
      <td style="text-align: center;">★</td>
      <td style="text-align: right;">★</td>
      </tr>
      <tr style="vertical-align:bottom">
      <td style="text-align: left;">☆</td>
      <td style="text-align: center;">☆</td>
      <td style="text-align: right;">☆</td>
      </tr>
      </table>
      ☆ ☆ ☆
      ★ ★ ★
      ☆ ☆ ☆

    10. 背景

      11. 背景色や背景画像を指定できます。背景画像のの並び方や位置も指定できます。
      ※背景画像をno-repeat以外で表示するときは，背景色も指定してください。

      background-color:背景色
      　色名やコードで背景の色を指定します。
      background-image:url(ファイル名)
      　背景画像を指定します。
      background-repeat:配置
      　背景画像の配置を指定します。
      　no-repeat背景画像を１回だけ表示します。
      　repeat背景画像をタイル状に配置します。(標準)
      　repeat-x背景画像を横方向に配置します。
      　repeat-y背景画像を縦方向に配置します。
      background-attachment:位置関係
      　背景画像とテキストの位置関係を指定します。
      　scroll背景画像をスクロールします。(標準)
      　fix背景画像を固定します。
      background-position:横位置 縦位置
      　背景画像の位置を指定します。
      　縦位置を指定しない場合は center となります。
      　※Netscape 4.5未対応
      　数値ブロックの左上からの位置を指定します。(単位も必要)
      　パーセントブロックの左上からの位置を指定します。(%も必要)
      　left左端(0%)に表示します。
      　center中央(50%)に表示します。
      　right右端(100%)に表示します。
      　top上端(100%)に表示します。
      　middle中央(50%)に表示します。
      　bottom下端(100%)に表示します。
      background:背景色 url(ファイル名) 配置 位置関係 横位置 縦位置
      　背景に関する設定を一括して行います。必要のない設定は省略できます。

      ソースプログラム
      <style type="text/css">
      <!--
      　body { background:white url(back.gif) no-repeat fix center }
      　/* 背景色を白　中心にback.gif　繰り返さず　固定する */
      -->
      </style>

    11. 動的変更

      12. マウスがリンクに重なるとテキストのサイズや色・フォントまで変えることが出来ます。

      ソースプログラム
      <style type="text/css">
      <!--
      .efftct1 {font-size:20pt}
      .effect1:hover {font-weight:bold;font-size:20pt;
      　　　　　　　　font-family: Chicago, Verdana, Helvetica, Osaka;}
      .effect2 {font-size:20pt;text-decoration:none}
      .effect2:hover {text-transform:uppercase; color:red;
      　　　　　　　　background-color:yellow}
      -->
      </style>
      <a href="miyakou/cg.htm" class="effect1">CG Gallery</a><br>
      <a href="data.htm" class="effect2">Math Print Archive</a>
      画面表示
      CG Gallery
      Math Print Archive

    12. リストアイテム

      13. リストアイテムの先頭の●,■の代わりに画像を表示することもできます。

      ソースプログラム
      <ul style="list-style-image: url('m0.gif');">
      <li>数学Ⅰ
      <li>数学Ａ
      </ul>
      画面表示
      • 数学Ⅰ
      • 数学Ａ

    13. マウスカーソルの形

      14. フォームやテキストなどの上でのマウスカーソルの形を指定することもできます。

      ソースプログラム画面表示
      <ul>
      <li style="cursor:e-resize">東方向
      <li style="cursor:n-resize">北方向
      <li style="cursor:ne-resize">北東方向
      <li style="cursor:se-resize">北西向
      <li style="cursor:crosshair">十文字
      <li style="cursor:help">ヘルプ
      <li style="cursor:wait">処理中
      <li style="cursor:pointer">リンク
      <li style="cursor:move">移動
      </ul>
      • 東方向
      • 北方向
      • 北東方向
      • 北西向
      • 十文字
      • ヘルプ
      • 処理中
      • リンク
      • 移動

    14. 枠線

      15. 枠線の形を指定することもできます。
      値を１つ指定した場合は，上下左右が同じ値になります。
      値を２つ指定した場合は，上下，左右の順で指定します。
      値を３つ指定した場合は，上，左右，下の順で指定します。
      値を４つ指定した場合は，上，右，左，下の順で指定します。

      ソースプログラム画面表示
      <p style="border-style:none">
      none　(線なし)</p>
      <p style="border-style:solid">
      solid　(実線)</p>
      <p style="border-style:double">
      double　(二重線)</p>
      <p style="border-style:dashed">
      dashed　(鎖線)</p>
      <p style="border-style:dotted">
      dotted　(点線)</p>
      <p style="border-style:groove">
      groove　(谷線)</p>
      <p style="border-style:ridge">
      ridge　(山線)</p>
      <p style="border-style:inset">
      inset　(内線)</p>
      <p style="border-style:outset">
      outset　(外線)</p>

      none　(線なし)

      solid　(実線)

      double　(二重線)

      dashed　(鎖線)

      dotted　(点線)

      groove　(谷線)

      ridge　(山線)

      inset　(内線)

      outset　(外線)


    ホームページの作り方教室 目次へ リンク集へ リンク集
    Author: kibochan