＜ＨＴＭＬ形式の基礎と多少ばかりの応用術＞

　最近は、色々なホームページ作成ソフトが発売されています。

　おかげで、誰でも簡単にホームページを作成可能にはなっているのですが、その反面ＨＴＭＬ形式で表示するとどうなっているのかを理解している人が減っている事も事実です。

　そこで、今回は私の良く使用している形式の一部を紹介する事にしたいと思うのですが……

　理解している人には退屈かもしれませんね(苦笑)

　それと。本文中では判断しやすい様に、タグ表記の場所はブルーっぽい色で着色してあります。

　あ、そうそう。『ＨＴＭＬタグってなんぞや？』と言う方は、下記の参考文献を参照してください。ある程度パソコンの操作に慣れている方には非常に理解しやすい様に書かれていますからね。

★参考文献★
『ＨＴＭＬタグ辞典　第５版』　著者：(株)アンク　発行：株式会社翔泳社
『ＨＴＭＬ＆ＪａｖａＳｃｒｉｐｔ上級テクニック集』　著者：株式会社Ｃ＆Ｒ研究所　発行：株式会社ナツメ社

いんでっくす。
＜超基本編　文章の打ち方、修飾の仕方＞
＜基本編　表組み・水平線の挿入＞
＜基本編　色の指定＞
＜あったら便利　ルビの振り方＞
＜あったら便利？　電光掲示板＞
＜あるとアクセサリ(爆)　時刻表示＞
＜おまけ　メモ書きとして…＞

＜超基本編　文章の打ち方、修飾の仕方＞
　まず最初は、ここから始めたいと思います。
　文章を打つことにおいて、段落を区切りたい時の方法としては２種類在ります。
　原稿用紙で言うところの『改行』と『１行開ける』ですね。　

１．『改行』
　これは、作成した文章の後ろに<BR>を付けます。
　これで改行の意味になるわけですね。例を上げてみると…

２．『１行開ける』
　これには、それぞれの文章の前後を<P></P>タグで囲みます。
　こうする事によってそれぞれの段落を分ける事が出来るんですね。こんなかんじで。

　通常は、これを組み合わせて使用していきます。

３．簡単な文字修飾
　これに付いては、ＷＯＲＤなどのワープロソフトとかぶる所も在りますので、結構知っている人が多いかもしれませんね。
　太文字、下線、中央線、斜体。
　それぞれ、こんなタグで挟んでいます。

⇒back to いんでっくす。

＜基本編　表組み・水平線の挿入＞
１．『表組み』の挿入
　先ほどから私が使っている表ですね。これを形成するには、幾つかの基本を押さえる必要があります。
�T：<TABLE></TABLE>…表の開始と終わりを示します
�U：<TBODY></TBODY>…表の中身をどのようにするかを指定します
�V：border…<TABLE>タグ内に入れ、枠の太さを定義します。これを付けないと、枠表示がされない形式になります
�W：<TR></TR>…横の行を定義します
�X：<TD></TD>…行の中での、列を指定します。
　以上を踏まえて、上下２段の表を作ると…こうなります。

★入力する情報
<TABLE border="1">
　<TBODY>
　　<TR>
　　　<TD>Ａ</TD>
　　　<TD>Ｂ</TD>
　　</TR>
　　<TR>
　　　<TD>Ｃ</TD>
　　　<TD>Ｄ</TD>
　　</TR>
　</TBODY>
</TABLE>

★実際の表記

２．『水平線』の挿入
　これも先ほどから使用していますが、水平線（コレ↓）です。

　結構良く使うので、覚えておいて損はないでしょう。
　水平線を表示させるには、以下の形式で定義しています。
�T：<HR>…水平線を表します。通常はコレだけでＯＫです。
�U：width…<HR>タグの中に入れて、水平線の長さを定義します。％表記が使いやすいですね。
�V：size…<HR>タグの中に入れて、水平線の太さを定義します。あまり太過ぎるのも…。

★入力する方法
<HR width="50%" size="9">
<HR>

★実際の表記

⇒back to いんでっくす。

＜基本編　色の指定＞
　色の指定方法には、大きく分けて２種類在ります。
１．『十六進法を用いて、赤・緑・青の割合を示す方法』
２．『実際の色の名前を指定する方法』
　です。
　一般的で色を細かく指定できるのは前者ですが、最近は後者の色指定でも結構な色を表わすことが出来ますからね。　

０．１６進法の基礎
　ここで使用する１６進法とは、簡単に言えば赤・緑・青をその濃さ・明るさに合わせて１６段階に別け、その組み合わせによって色を定義する形式です。
　その色の濃さは、０を一番暗く、そこから0123456789abcdefと、１６の文字で表されます。
　また、その表記には【#abcdef】といった形式をとるのですが、その内容はこんな感じになります。
#…色を数字で指定することを示唆します
aの位置…赤の明るさを提示します
bの位置…赤の濃さを提示します
cの位置…緑の明るさを提示します
dの位置…緑の濃さを提示します
eの位置…青の明るさを提示します
fの位置…青の濃さを提示します
　基本は、全てを混ぜ合わせると白くなり、全てを使用しないと黒くなる、です。
　例えば、こんな指定が出来ます。
　白…#ffffff　黒…#000000
　赤…#ff0000　緑…#00ff00　青…#0000ff　金…#ffd700　銀…#c0c0c0
　黄…#ffff00　紫…#ff00ff　水色…#00ffff　私が良く使う紫(笑)…#990099
　また、こんな色も作る事が出来ます。…#abcdef
　…失礼。背景によって、この様に見え難くなる色もあります。見えにくい場合は反転して文字を確かめて下さい。
　あまり、このような隠れる色だけで統一したホームページは作るべきではないですね(汗

１．色を付ける命令
　これは、以下のタグを用います。
�T：<FONT color="#******"></FONT>
　この米印に、１６進法で作ったそれぞれの色を入れていくのですね。

★入力する方法
<FONT color="#0000ff">青い文字を作ります</FONT>

★実際の表記
青い文字を作ります

２．色の名前で指定する
　これは、ＷＯＲＤなどで色を付けるときに使用されている形式ですね。
　０．の様に１６進法を使用せずに色を規定できる代わりに、その色指定には『色の名前を知っていないといけない』ことは覚えておいて下さい。
　まあ、英語を知っていれば大抵の色は表現できるんですけどね。
　白…white　黒…black　赤…red　緑…lime　青…blue　金…gold　銀…silver
　黄…yellow　紫…fuhchsia　水色…aqua
　ふむ、この色指定では、私が良く使う紫が指定できないようですね…。

★入力する方法
<FONT color="green">少し深い緑をあらわします。</FONT>

★実際の表記
少し深い緑をあらわします。

　因みに。今の背景色は#a9a9a9　darkgray　です。

⇒back to いんでっくす。

＜あったら便利　ルビの振り方＞
　これは、いわゆる説明文字を入れる方法…とでも言いましょうか。
　散華猛襲脚(さんがもうしゅうきゃく)。これですね。
　これを指定するには、このタグを用います。
�T：<RUBY></RUBY>…その部分にルビを振る事を指示します
�U：<RT></RT>…これで囲んだ部分がルビとして上につきます
�V：<RP></RP>…ルビ振りに対応していないブラウザに対して、ルビをカッコで囲んだ状態で表示させるものです
　�Vは、ネットスケープナビゲーター(ＮＮ)の形式などが当たりますね。この命令はなくても良いといえばいいのですが、そうするとＮＮから見られている人には不便に感じてしまいますからね。
　やはり、在った方が良いでしょう。

★入力する方法
<RUBY>緋鳳絶炎衝<RP>(</RP><RT>ひほうぜつえんしょう</RT><RP>)</RP></RUBY>

★実際の表記
緋鳳絶炎衝(ひほうぜつえんしょう)

⇒back to いんでっくす。

＜あったら便利？　電光掲示板＞
　まあ、ぶっちゃけ流れ看板ですね。
　なくても構いませんが、まあちょっとしたアクセントに…
�T：<MARQEE></MARQEE>…この範囲が、電光掲示板になります
�U：<FONT></FONT>…上でも出てきたタグですね。これで文字の色などを指定します。

　ここで使用する命令に付いてまとめた物がありますので、それを表記させてもらおうと思います。

　ここは色々と作れますから、幾つか例示しますね。

例�T：管理人のサイトにて

　ここは文章書き趣味人『飼い猫』のお送りする、 トラスタジア(オリジナル)・悠久幻想曲・メルヴェイユ・サモンナイト(・ちょっとシスプリｗ) を中心とした文章主体のホームページです。　　

★入力する方法
<P align="center"><B><MARQUEE bgcolor="black" scrollamount="10" width="50%">
<FONT color="gold">　ここは文章書き趣味人『飼い猫』のお送りする、</FONT>
<FONT color="silver">トラスタジア(オリジナル)・悠久幻想曲・メルヴェイユ・サモンナイト(・ちょっとシスプリｗ)</FONT>
<FONT color="gold">を中心とした文章主体のホームページです。　　</FONT></MARQUEE></B>
</P>

例�U：短いのももちろん可能

がちょーん

★入力する方法
<P align="center"><B><MARQUEE direction="right" behavior="alternate" scrollamount="10" width="80%">
<FONT color="black">がちょーん</FONT></MARQUEE></B>
</P>

例�V：こんなのも可能？

　　縦移動〜

★入力する方法
<P align="center"><B><MARQUEE direction="up" behavior="alternate" scrollamount="5" width="120" height="50">
<FONT color="black">　　縦移動〜</FONT></MARQUEE></B>
</P>

⇒back to いんでっくす。

＜あるとアクセサリ(爆)　時刻表示＞
　表紙に置いておくと、ちょっとしたアクセサリになるかもしれない表示ですね。
　この命令を実行するには、ＪａｖａＳｃｒｉｐｔが必要になります。インターネットエクスプローラ(ＩＥ)でもＮＮでも表示できるので、大抵の人に閲覧できるでしょうけどね。
　この機能は、各自閲覧してくれている人のパソコンから時刻設定を受け取り、表示させる形式です。
　これは、色々と書く前に出して見たほうが早いでしょうね。こんなのです。

★入力する方法
<SCRIPT LANGUAGE="JavaScript">
<!--
now = new Date();
mon = now.getMonth() + 1;
date = now.getDate();
hour = now.getHours();
min = now.getMinutes();
sec = now.getSeconds();
document.write("ただいまの時刻は、",mon, "月", date, "日",hour, "時", min, "分", sec, "秒"," です。");
// -->
</SCRIPT>

�T：now…パソコンから、新たに情報を入手する指令です
�U：mon〜sec…月〜秒までの値を取り出す指令です

　これをちょっといじると、こんな感じのも作れます。

★入力する方法
<P align="center"><B><SCRIPT LANGUAGE="JavaScript">
<!--
now = new Date();
hour = now.getHours();
min = now.getMinutes();
document.write("Ｎｏｗ，ｔｈｅ　ｔｉｍｅ　ｉｓ ",hour, "：", min, ""," ｏ’ｃｌｏｃｋ．");
// -->
</SCRIPT></B></P>

⇒back to いんでっくす。

　とまあ、そんなこんなで。
　このサイトでは、殆どこれくらいしか使用していなかったりします。
　まあ、のこり幾つかありますが、それも表紙の所で多少使ったりする程度ですからね。
　あとは…文字の大きさくらいでしょうか？これは、また機会があれば紹介して………
　そう言えば、リンク関係は１つも触れていませんね(苦笑)
　ご要望があれば、第２段と行くかもしれませんです。

　他の事でも構いませんので、もし何かありましたら管理人までご連絡下さいませ。

　それでは〜。

＜おまけ　メモ書きとして…＞
　ＨＴＭＬ形式の中に、上にも使用した<!--〜-->タグを使うと、通常そのタグ内はサイトには表示されません。
　これを利用して、ＨＴＭＬ文章に個人的メモ書き等を付随する事が出来ます。

★↑このままでは見えませんが…
<!--ここのＨＴＭＬ表示はご自由に使われても構いませんが、もし宜しければ参照した書物を手にとって、ご自分の目で見てください。-->
　と、ここに書かれていたりします(苦笑)

★参考文献★
『ＨＴＭＬタグ辞典　第５版』　著者：(株)アンク　発行：株式会社翔泳社
『ＨＴＭＬ＆ＪａｖａＳｃｒｉｐｔ上級テクニック集』　著者：株式会社Ｃ＆Ｒ研究所　発行：株式会社ナツメ社

⇒back to いんでっくす。