HTML補足資料

Webページを制作する際のHTML関連資料集です。 「Javaスクリプト」と「CSS」についてもいくつかのサンプル文を掲載しています。 (このページの内容は、予告なしに変更されます。) 問い合わせはこちらまで

●色の指定

HTMLで使用できる色は、通常制作に使用するビルダーやツールのオプションから指定するため、色名や16進数で入力することはあまりないかもしれない。色名で指定する場合は、VGAパレットに準拠した次の16色が基本となる。他の色名の指定はブラウザによっては正確に表示できない場合がある。この16色以外の色を表現しようとする場合は16進数で表現する。

色見本
色名
16進数
  Black #000000
  Navy #000080
  Silver #C0C0C0
  Blue #0000FF
  栗(茶)色 Maroon #800000
  Purple #800080
  Red #FF0000
  赤紫 Fuchsia #FF00FF
  Green #00FF00
  青緑 Teal #008080
  ライム Lime #00FF00
  水色 Aqua #00FFFF
  オリーブ Olive #808000
  灰色 Gray #808080
  黄色 Yellow #FFFF00
  White #FFFFFF

●論理タグ

論理タグは、意味を指定して文字列を装飾するタグである。実際にどう表現されるかはブラウザに依存する。例えば「強調」の論理タグ(<EM>〜</EM>)を使うと囲まれた文字列は、実際には斜体で表示される。

論理タグ
意味
実際の表示
代替タグ
EM 強調 斜体

I

STRONG より強調 太字 B
CITE 引用 斜体 I
CODE プログラムコード 固定ピッチ TT
SAMP メッセージ 固定ピッチ TT
KBD キーボード 固定ピッチ TT
DEL 消去されたテキスト 取り消し線 S
INS 挿入されたテキスト 下線 U
DFN 定義 斜体 I
VAR 変数 斜体 I
ABBREV 頭文字略語 そのまま
ACRONYM 略語
AU 作者
LANG 異なる言語
PERSON 作者
Q 短い引用文

●Javaスクリプト

JavaScript は、HTML文の中に直接ソースコードを記述する。修正もHTMLと同様の方法でできる。動きのある表現が可能であり、コンパイルする必要がなく、ブラウザの機能だけで表現できる。つまり、次のような、ブラウザ画面の動きのコントロールに使用させる。JavaScript は、古いブラウザでは機能しない場合もある。

1.時間によりテキストを変化させる
2.メッセージを表示する
3.新規ウインドウを開く
4.時計の表示
5.アニメーションの表示

○JavaScript の記述

次のように記述する。<SCRIPT LANGUAGE= >〜</SCRIPT>で囲まれた部分に記述する。最初には <!--、最後には //--> を記述する。これは、JavaScript をサポートしないブラウザがJavaScript文を無視するためのコードである。


<SCRIPT LANGUAGE="JavaScript">
<!--
ここにJavaScriptプログラムを書く
//-->
</SCRIPT>


○Javaスクリプトの設定

1.文字のスクロール

<HTML>
<HEAD>
<TITLE>テキストのスクロール</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var msg="スクロールされるテキスト"
var speed=100
function Scroll() {
document.forms[0].msgDisp.value=msg
msg=msg.substring(2,msg.length) + msg.substring(0,2)
timerID=setTimeout("Scroll()",speed)
}
</script>
</HEAD>
<BODY onload="Scroll()">
<CENTER>
<FORM>
<INPUT TYPE="text" NAME="msgDisp" SIZE=30>
</FORM>
</CENTER>
</BODY>
</HTML>

2.フレーム内リンクの禁止

<HTML>
<HEAD>
<TITLE>フレーム内にページを表示させない</TITLE>
<SCRIPT TYPE="text/JavaScript">
<!--
if (self != top){
top.location.href = self.location.href;
}
//-->
</script>
</HEAD>
</HTML>

●Javaアプレット

JavaApplet を使用すればスクリプトやスタイルシートではできないさらに高度な表現(波打つ文字、分割画像など)やブラウザのコントロールが可能である。作成手順は次のとおりである。手間がかかること、対応するブラウザが限定されること、非常に重いため表示に時間がかかる場合があること、バージョンにより機能が一部異なること、などを理解した上でお使いください。

1.Java Developers Kit(JDK) を入手してインストールする。(サンマイクロシステム社
  かなりの容量のためダウンロード時間に注意してください。

2.ソースプログラムを作成する。

よく見るタイプのものであれば、フリーのアプレット集がどんどんアップされているので、それを見つけてダウンロードすれば、1〜3は省略できる。

import java.applet.*;
import java.awt.*;
public class sample extends applet{
public void paint(graphics g){
g.drawstring("Welcome to My Homepage",30,30);
}
}


3.JDKのコンパイラ(javac)でプログラムをコンパイルする。

c:\>javac javasmp1.java (DOSプロンプトからコンパイルする場合)
  これで、javasmp1.class というJavaアプレットが完成する。

4.これをHTMLの<APPLET>タグで組み込む。

HEIGHT、 WIDTH はウインドウ上でアプレットが動く範囲をピクセルで指定する。位置指定オプション(ALIGN=)や隙間指定(VSPACEH、HSPACE)もできる。アプレットの中で変数を使用している場合は、<PARAM>タグで値を設定する。

<HTML>

<HEAD>
<TITLE>アプレットのサンプル</TITLE>
</HEAD>
<BODY>
<APPLET CODE="javasmp1.class" HEIGHT="200" WIDTH="200">
<PARAM NAME="no" VALUE="10">
<APPLET>
</BODY>
</HTML>

HTML文書とアプレットをアップすれば実行可能になる。

●スタイルシート

スタイルシートは、スタイル(フォントの種類、フォントサイズ、位置揃えなど)を名前をつけて登録しておき、そのスタイルを文字や段落に設定できる機能である。現在の規格は、CSS1(Cascading Style Sheet Level1)と呼ばれ、フォントの種類や形状、サイズ、背景カラー、マージン設定、インデントなどの設定が可能である。(スタイルシートをサポートしないブラウザもある。)
次のように、プロパティ:値 という形式で指定する。

font-family:フォント名
font-size:フォントサイズ
font-weight: フォントの太さ
font-style:フォントの形状
text-align:行揃え
line-height:行送り
text-decoration:文字飾りの種類
text-indent:インデントの距離
margin-top:上マージン
margin-right:右マージン
margin-left:左マージン
background:背景イメージ
color:色


○スタイルシートの設定

1.ページ全体にスタイルを適用する


<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<STYLE TYPE="text/css">
H1{color:blue;text-align:center}
P{font-size:16pt;font-weight:bold}
</STYLE>
</HEAD>
<BODY>
<H1>スタイルシートで定義(H1タグ)</H1>
<P>スタイルシートで定義(Pタグ)</P>
</BODY>
</HTML>


スタイル部分をファイルとして保存し、LINKタグで指定することによってスタイルを定義できる。

<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style1.css">
</HEAD>
<BODY>
<H1>スタイルシートで定義(H1タグ)</H1>
<P>スタイルシートで定義(Pタグ)</P>
</BODY>
</HTML>


style1.css の内容
 H1{color:red;text-align:center}
 P{font-size:16pt;font-weight:bold}


2.タグの範囲にスタイルを適用する

タグ間のみ、スタイルを適用する場合は、styleオプションで指定する。

<HTML>
<HEAD>
<TITLE>スタイルシート</TITLE>
</HEAD>
<BODY>
<H1>これはH1タグ</H1>
<H1 STYLE="color:blue;text-align:center">スタイルシートで定義(H1タグ)</H1>
</BODY>
</HTML>


3.任意の範囲にスタイルを適用する

<SPAN>タグを使って任意の範囲にスタイルを適用できる。

<SPAN STYLE="color:blue;font-size:20pt">このテキストは青、サイズは20ポイント</SPAN>

4.キーワードでスタイルを指定する

さまざまなタグに特定のスタイルを適用したい場合や、特定のタグに複数のスタイルを指定したい場合は、キーワードを使ってスタイルを指定できる。(タグ名.キーワード{プロパティ:値})

<HTML>
<HEAD>
<TITLE>キーワードでスタイルを設定</TITLE>
<STYLE TYPE="text/css">
H1.center{text-align:center}
H1.right{text-align:right}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=center>同じタグに複数のスタイルを設定(center)</H1>
<H1 CLASS=right>同じタグに複数のスタイルを設定(right)</H1>
</BODY>
</HTML>


どのタグにも使えるようにするには、タグ名を省略し、ピリオドに続けてキーワードを指定する。タグに続けて CLASS= キーワードを指定する。

<HTML>
<HEAD>
<TITLE>1つのキーワードを2つのタグに設定</TITLE>
<STYLE TYPE="text/css">
.xa{font-size:18pt;font-style:bold}
</STYLE>
</HEAD>
<BODY>
<H2 CLASS=XA>スタイルの設定(h2)</H2>
<P CLASS=XA>スタイルの設定(P)</P>
</BODY>
</HTML>


○フィルター

フィルターはスタイルシートの機能の一部で、文字や図形をにじませたり、半透明にしたり、影をつけるなど、さまざまな効果を設定できる。
フィルターを指定できるタグは、次のとおりである。(<SPAN>,<DIV> で使用する場合はオプション指定が必要。)

<BODY>,<SPAN>,<DIV>,<IMG>,<INPUT>,<BUTTON>,<TABLE>,<TR>,<TH>,<TD>,<TEXTAREA>, <THEAD>,<TFOOT>,<MARQUEE>

1.設定方法


効 果
設定方法
影を付ける STYLE="filter.shadow(color=影の色,direction=影の角度)"
立体的な影文字 STYLE="filter.blur(direction=影の角度)"
波かけの効果 STYLE="filter.wave(freq=波の数,strength=波の強さ)"
炎のような効果 STYLE="filter.glow()"
左右に反転 STYLE="filter.flipH()"
上下に反転 STYLE="width:100%; filter.flipV()"

2.画像と文字を並べフィルターによる効果を設定する例

<SPAN STYLE="width:100%;filter:shadow(direction=120)"><IMG SRC="img1.gif">影付き文字</SPAN><BR><BR>
<SPAN STYLE="width:100%;filter:blur(direction=120)"><IMG SRC="img1.gif">立体的な影文字</SPAN><BR><BR>
<SPAN STYLE="width:100%;filter:wave(freq=5,strength=2)"><IMG SRC="img1.gif">波かけ</SPAN><BR><BR>
<SPAN STYLE="width:100%;filter:glow()"><IMG SRC="img1.gif">炎のような効果</SPAN><BR><BR>
<SPAN STYLE="width:100%;filter:alpha(opacity=50)"><IMG SRC="img1.gif">半透明</SPAN><BR><BR>
<SPAN STYLE="width:100%;filter:fliph()"><IMG SRC="img1.gif">左右反転</SPAN><BR><BR>
<SPAN STYLE="width:100%;filter:flipv()"><IMG SRC="img1.gif">上下反転</SPAN><BR><BR>

●その他のテクニック

○フレーム

フレームはブラウザに複数のページを表示させる場合に使用する。シングルページと異なり、読み込みに時間がかかり変更も難しいので使い方に注意する。

1.左右に分割


<FRAMESET COLS="30%,70%">
<FRAME SRC="frame_l.html">
<FRAME SRC="frame_r.html">
</FRAMESET>


2.上下に分割

<FRAMESET ROWS="*,100">
<FRAME SRC="frame_u.html">
<FRAME SRC="frame_l.html">
</FRAMESET>

3.上下左右に4分割

<FRAMESET COLS="30%,7
0%" ROWS="50%,50%">
<FRAME SRC="frame_1.html">
<FRAME SRC="frame_2.html">
<FRAME SRC="frame_3.html">
<FRAME SRC="frame_4.html">
</FRAMESET>


4.縦横の比率を変えて3分割

<FRAMESET COLS="30%,70%">
 <FRAMESET ROWS="30%,*">
  <FRAME SRC="frame_1.html">
  <FRAME SRC="frame_2.html">
 </FRAMESET>
 <FRAMESET ROWS="100%">
  <FRAME SRC="frame_3.html">
 </FRAMESET>
</FRAMESET>


5.メニュー(左)と内容(右)に分割

<HTML>
<HEAD>
<TITLE>pc_user.html</TITLE>
</HEAD>
<BODY>
★Menu★
<UL>
<LI><A HREF="pc_top.html" TARGET="right">トップページ</A>
<LI><A HREF="pc_01.html" TARGET="right">パソコンの歴史</A>
<LI><A HREF="pc_02.html" TARGET="right">パソコンの仕組み</A>
<LI><A HREF="pc_03.html" TARGET="right">パソコンの性能</A>
<LI><A HREF="pc_04.html" TARGET="right">パソコンの保守</A>
</UL>
</BODY>
</HTML>


○画像(バナーなど)や文字を重ねて表示する

バナーなどは、画像処理用のソフトウェアを使用して素材の画像に文字を入力することにより作成できるが、次のような<LAYER>タグを使用して作成することもできる。ただしIEでは無視される。(オプションも数多くあるがここでは省略する。)

1.バナーに文字をのせる

<LAYER IMG="ban01.gif" WIDTH="400" HEIGHT="120">
</LAYER>
<LAYER LEFT="50" TOP="30"><FONT SIZE="6">万藩証券株式会社</FONT>
</LAYER>

2.ネスティング

<LAYER>__________________________________________________
 <LAYER LEFT=0>==============================
  <LAYER LEFT=0>この文字にレイヤで下線と削除線を引く
  </LAYER>
 </LAYER>
</LAYER>