Back to Top Page !  DD  Link  BBS 


HP


「HP」 とは、「Home Page」を意味します。
ここでは、このHPで使われる、
HTML言語」や「Style Sheet」「Java Script」などを
紹介・解説します。

HTML言語(エイチティーエムエルげんご)

基本中の基本
ホームページは、全て、この「HTML言語」というのを使って書かれています。「HTML」は、「Hyper Text Markup Language」の略です。どういうものかというと、視覚的に理解した方がわかりやすいので、例えば、下のような文章を作るとしますと。

太字のタイトル

ここからは、本文です。
そして、ここで終わりです。

というのを、「HTML」では、下のように記述(ワープロなどで打つ)することで表現できます。
<b>太字のタイトル</b>
<p>ここからは、<font color="#ff0000">本文</font>です。<br> そして、ここで終わりです。</p>
といった風です。
上の「<>」で囲われているものを「タグ」と言い、色々な種類がありそれらを使い分けて一つのページを作ります。

細かいタグの意味や使い方は、他のページを探してみて下さい。結構たくさんあります。
Yahoo」や「InfoSeek」などのサーチエンジンで、「(大文字で)HTML」とか「タグ」とかのキーワードで探せます。
ここに、キーワードを入れると検索することができます。 Yahoo!

Style Sheet (スタイルシート)

HTMLの記述の手間を省き表現の幅を広げるもの
「HTML」のタグは、フォントや文字の大きさなどを指定する際、それらを指定したい場所ごとにいちいち同じ表記のタグを記述する必要があります。そのため、小見出しの色を変えたいときなどに、いちいち全てを書き換える必要がありました。
これでは、ページを作るのに多大な労力が必要となってしまいます。
そこで、それらの指定をひとまとめにし、かつ、より高度に細かく指定ができるようにと考え出されたのが、「Style Sheet」なのです。

Style Sheet の種類
Style Sheet には、使い方によっていくつかの種類があります。 まず一番わかりやすいのが

これ
です。次のように、目的の部分に直接、普通のタグのように記述します。
<div style="color:00a0ff; font-size:20pt; font-weight:bold;">これ</div>
次は、「id」や「class」といった属性で、ページの冒頭部に記載された内容を参照するやり方です。
例えばこの部分。オレンジ色をしていますが、これは次のように記述します。
(ページの上方)
<style type="text/css">
<!--
#c1 {color:#f08040;}
-->
</style>

(ページの目的の部分)
<span id="c1">この部分</span>
このようにしておくと、上方に書かれた部分を修正するだけで、ページ全体の同じ属性名を持ったものを変更できるのです。

そして、もう一つ。これは、フォントなど書式に関するものだけを別のファイルに保存してしまい、それを個々のHTMLファイルから参照させるやり方です。
これが、最も「Style Sheet」の特性を発揮できるやり方です。ですが、参照にするファイルが見つからない場合には、とんでもないレイアウトでページが表示されてしまうおそれもあります。
このため、このページ(Maimy Multiple Museum)では、各ページごとに書式を設定する上で言うと2番目の方法を採っています(こういう方法は『エンベディングスタイルシート』と言います)。

Java Script (ジャバスクリプト)

ブラウザの機能を拡張するプログラム言語
「Style Sheet」は、各ブラウザがそれぞれ対応するようにつくられいます。しかし、ブラウザ毎に対応のさせ方がまちまちであって、少々使いづらいものです。また、あらかじめ決められた機能以上のことはできません。
ところが、この「Java Script」は自分でプログラム言語をHTMLに直接書き込むことで、色々な機能を実現させることができるものです。もちろん、一定の制約はありますが、かなり自由に表示・音声・その他をコントロールすることができます。

例として、下にあるのがこのページに使われている「Java Script」です。

<SCRIPT language="JavaScript"> <!-- document.write('<body background="') day = new Date(); second = day.getSeconds(); if (second <= 10) { document.write('wall/wall01.gif"') } else if (second <= 20) { document.write('wall/wall02.gif"') } else if (second <= 30) { document.write('wall/wall03.gif"') } else if (second <= 40) { document.write('wall/wall04.gif"') } else if (second <= 50) { document.write('wall/wall05.gif"') } else if (second <= 60) { document.write('wall/wall06.gif"') } document.write(' bgcolor="#ffffff">') //--> </SCRIPT>
これは、このページにアクセスしたタイミングによって、背景の画像を変えて表示するものです。
試しに、ブラウザの「再読み込み・更新」ボタンを押してみて下さい。

Back to Top Page !  DD  Link  BBS