☆HTMLで作ろう！☆
〜SS作家のための簡単HTML〜
●第二回●
■タグ打ちで作ろう！■
はい、Arcadia管理人、舞で御座います。
HTMLを作ろう！の第二回目です。
今回は、タグの使い方を覚えましょう。
WYSIWYG方式のエディタでは作れないようなHPも、タグ打ちと組み合わせることで、作れるようになります。
もっとも、ここで解説するのは、簡単なタグと、タグの使い方だけですので、すべてのタグの種類を網羅しているわけではありません。
タグのリファレンスが欲しい場合は、
ここを参考にするといいでしょう。
リファレンス以外にも、実践的なテクニックもある程度載っています。
■タグの基本■
さて、それでは、早速始めましょう。
タグの基本です。まずは、例を。
Arcadia
上のArcadiaの文字。これを例とします。
まず、これをソースに直すとどうなっているのか、見てみましょう。
<b><i><font size="+2" color="#0000FF">Arcadia</font></i></b>
上の様になっています。
では、まずは、タグの基本形。
よく見てもらえれば分かると思うのですが、必ず<b></b>の様に、対になってArcadiaの文字が挟まれています。
<font size="+2" color="#0000FF">を<font>として考えてみてください。
そうすれば、<b><i><font></font></i></b>となっているのが分かるでしょう。
これが、一つ目のポイントです。
特殊なタグをのぞいて、タグは必ず閉じる。
<b>に対しては、</b>、<i>に対しては</i>、<font>に対しては</font>というように、使ったタグに、スラッシュをつけた物で閉じます。
そして、二つ目のポイント。
タグは、大文字で書いても小文字で書いてもよい。
これは、そのまま。
大文字で書いても小文字で書いてもいいです。
ただ、大文字と小文字混在で書くのはやめておいた方がいいでしょう。
後で、ソースを見たときに、見づらくなります。
次に、タグによる、スタイル等の指定。
<font size="+2" color="#0000FF">と有りますね？
size="+2"
これは、基本となるフォントから、二周り大きくするという指定です。
color="#0000FF"
これは、フォントの色を#0000FFにするという指定です。
ちなみに、#0000FFは青。
この二つについては、後で説明しているので、これ以上は無し。
この様にして、半角スペースで区切って、指定したいスタイルを書いて指定します。
また、一つポイント。
タグに指定するスタイルは、半角スペースで区切って、いくつでも指定できる。
ですから、一つの<font>タグで、色とフォントとフォントサイズを指定する……といったことも可能です。
■HTMLの基本■
はい、次にHTMLの基本。
HTMLはまず<html>というタグから始まります。
次に、<head><title></title></head>。
<title>と</title>の間に、そのページのタイトルを書きます。
ここで書いたタイトルは、ウィンドウの左上に出るタイトルです。
<title></title>以外にも、<head></head>の間に入れられるタグは有りますが、今はまだ知らなくてもいいでしょう。
そして、次に、<body>。
そして、その次から、ページの内容を書き始めます。
内容を書き終わったら、</body>でタグを閉じて、
</html>でタグを閉じます。
これが、まずは基本。
上の物は、どのページにも、必ず書きます。
一応、下に例を。
<html>
<head><title>Arcadia</title></head>
<body>
（ここに、ページの内容）
</body>
</html>
この例が、HTMLを書く上での基本。
■SSを書く上で使うタグ■
それでは、前ページでページマスターを使ってやったことを、タグでやってみましょう。
・行揃え
・フォント
・フォント色
・フォントサイズ
・フォントスタイル
・改行
・段落
この７つでしたね。
それでは、一つずつ、見ていきましょう
・行揃え
左寄せ――<div align="left"></div>
閉じタグ（</div>）との間に入っている部分が、左寄せされます。
中央寄せ――<div align="center"></div>
閉じタグとの間に入っている部分が、センタリングされます。
右寄せ――<div align="right"></div>
閉じタグとの間に入っている部分が右寄せされます。
☆<div align="???">ではなく、<p align="???">の様に、段落を指定して、段落ごとに指定することもできます。
☆センタリングに関しては、<center></center>と指定することもできます。
と、ここで、ちょっと、大きいですが、一つ例を。あなたの一番になりたい、第３話冒頭部分。
ついでに言っておくと、本来は画面をいっぱいに使うことを想定しているので、少々見栄えがよくないですが。
ブラウザ表示
「ブリッヂ。ブラックサレナ帰還する。格納庫をあけてくれ」
「はい、アキトさん。いつでもどうぞ」
アキトの声にルリが返す。
ユリカ、艦長の面目なし。 ルリのことをジト目で睨んでいる。
ルリは、気付いているのかいないのか、涼しい顔で戦闘の事後処理を片付ける。
ブリッヂの中は、二人の女性によって冷え渡り、当事者以外、特にプロスとゴート、ムネタケなどの男性陣は身震いをした。
ちなみに、フクベが表情一つ変えずお茶を啜っていたのはさすがというべきか。
何はともあれ、ナデシコは宇宙へ向けて飛び立ったのであった。
あなたの一番になりたい
第３話
Presented by 舞
「アキトさん、お疲れさまです」
サレナを格納庫に固定し、ピットから降りたアキトを待っていたのはルリだった。
前回のこの時期では見られなかった、柔らかい微笑みを浮かべながら自分を労ってくれる。
そんな普通が、嬉しくて、悲しくて・・・アキトは無意識に昔と変わらぬ笑みを見せた。
「ブリッヂ。ブラックサレナ帰還する。格納庫をあけてくれ」<br>
「はい、アキトさん。いつでもどうぞ」<br>
アキトの声にルリが返す。<br>
ユリカ、艦長の面目なし。 ルリのことをジト目で睨んでいる。<br>
ルリは、気付いているのかいないのか、涼しい顔で戦闘の事後処理を片付ける。<br>
ブリッヂの中は、二人の女性によって冷え渡り、当事者以外、特にプロスとゴート、ムネタケなどの男性陣は身震いをした。<br>
ちなみに、フクベが表情一つ変えずお茶を啜っていたのはさすがというべきか。<br>
何はともあれ、ナデシコは宇宙へ向けて飛び立ったのであった。<br>
<br>
<br>
<br>
<br>
<br>
<div align="right">
あなたの一番になりたい<br>
第３話<br>
<br>
Presented by 舞<br>
</div><br>
<br>
<br>
<br>
<br>
<br>
「アキトさん、お疲れさまです」<br>
サレナを格納庫に固定し、ピットから降りたアキトを待っていたのはルリだった。<br>
前回のこの時期では見られなかった、柔らかい微笑みを浮かべながら自分を労ってくれる。<br?
そんな普通が、嬉しくて、悲しくて・・・アキトは無意識に昔と変わらぬ笑みを見せた。<br>
<br>ということで、行揃えは終了。
・フォント
フォントを指定する――<font face="???"></font>
???の部分に指定したいフォントを書き込みます。
指定できるフォントについては、冒頭で紹介したとほほのWWW入門等で調べてください。
では、例を。
ブラウザ表示
ＭＳ Ｐゴシック, Osaka
ＭＳ Ｐ明朝, 細明朝体
ＭＳ ゴシック, Osaka−等幅
ソース
<font face="ＭＳ Ｐゴシック, Osaka">ＭＳ Ｐゴシック, Osaka</font><br>
<br>
<font face="ＭＳ Ｐ明朝, 細明朝体">ＭＳ Ｐ明朝, 細明朝体</font><br>
<br>
<font face="ＭＳ ゴシック, Osaka−等幅">ＭＳ ゴシック, Osaka−等幅</font><br>
・フォント色
フォント色を指定する――<font color="???"></font>
???の部分に指定したいフォント色を１６進数で入力します。
指定できるフォント色については、これも、他ページで調べてください。
ただ、少しだけ説明しておくと、#の後の６桁の数字、
これを、２桁ずつに分けて、
左から２桁が、赤の量、
次の２桁が、緑の量
次の２桁が、青の量と、RGBで表されています。
そして、00が0でFFが255です。
そして、例。
ブラウザ表示
赤
緑
青
ソース
<font color="#FF0000">赤</font><br>
<br>
<font color="#00FF00">緑</font><br>
<br>
<font color="#0000FF">青</font><br>これにて、フォント色は終わり。
・フォントサイズ
フォントサイズを指定する――<font size="???"></font>
???の部分に指定したいフォントサイズを入力します。
これについては、説明を入れておきます。
フォントサイズの指定には、絶対サイズと相対サイズの指定があり、
通常は、相対サイズで指定してください。
絶対サイズで指定すると、解像度が高くても低くても同じ大きさ（少し分かりづらいですが……）なので、
要は、解像度の低い人が見ると、文字サイズが大きすぎる……という事態になりかねません。
ということで、ここで解説するのは、相対サイズだけ。
???の部分に+1,+2,+3,+4,+5,+6,+7のどれかを入れてください。
+1は一つ。+2は二つ……+7は七つと考えればいいと思います。
まあ、実際に例を挙げてみましょう。
+0――Arcadia
+1――Arcadia
+2――Arcadia
+3――Arcadia
+4――Arcadia
+5――Arcadia
+6――Arcadia
+7――Arcadia一応、指定は+7までできることになっていますが、実際は、+4以降は同じ大きさです。
舞もなぜかは知りませんが……+4以降などまず使わないので気にしたことがありませんでしたし。・フォントスタイル
はい、今度はフォントスタイルです。
これは、ボールド・イタリック・下線の使い方ですね。
簡単にいきましょう。ボールド――<b></b>
これで囲むだけ。囲んだ範囲が太字になります。
イタリック――<i></i>
これも囲むだけ。囲んだ範囲が斜体になります。
下線――<u></u>
これまた囲むだけ。囲んだ範囲にアンダーラインが引かれます。
分かると思うけど、一応、例。
ブラウザ表示
ボールド
イタリック
アンダーライン
ソース
<b>ボールド</b>
<i>イタリック</i>
<u>アンダーライン</u>これにて、スタイルも終了
・改行
改行の仕方――<br>
これは、特殊なタグの一つで、閉じる必要がありません。
例えば……
ブラウザ表示
私の名前は舞です。
しがない物書きであります。
みなさんよろしくお願いします。
ソース
私の名前は舞です。<br>
しがない物書きであります。<br>
みなさんよろしくお願いします。<br>この様になっています。
要は、普段ワープロやエディタで改行を入れているところに、<br>を付け加えるだけですね。・段落
段落の指定の仕方――<p></p>
これは、段落の指定の仕方です。
<p></p>の間が一つの段落となります。
段落が終わったところで、</p>で閉じ、新しい段落を始めるときは、<p>で始めます。
またまた例を一つ。
ブラウザ表示
私の名前は舞です。
しがない物書きであります。
みなさんよろしくお願いします。私の書いた作品として、
「ただ愛してると言いたくて」
「あなたの一番になりたい」
などがあります。
ソース
<p>
私の名前は舞です。<br>
しがない物書きであります。<br>
みなさんよろしくお願いします。<br>
</p>
<p>
私の書いた作品として、<br>
「ただ愛してると言いたくて」<br>
「あなたの一番になりたい」<br>
などがあります。<br>
</p>こんな感じになっています。
段落を指定することのメリットは、舞がタグを使う限りでは、段落の中で指定したタグは、
次の段落に持ち越されない……ということが大きいと思います。
もっとも、HTMLというのは、規格に忠実に書かなくても動いてしまいますので、
そこまで気にして書く必要もないとは思いますが。
そうは言っても、規格に忠実に書かなくてもいいというわけではなく、
できるだけ忠実に書いた方がいいに決まっているのですが……
■終了■
はい、とりあえず、簡単なタグの説明は終わり。
これだけのタグが使えれば、他の人のページのソースを見ながら、とほほのWWW入門を参照するだけでタグは使えるようになるでしょう。
次回は、スタイルシートの使い方を少々……
やはり、前回、今回と同じく、SSを書く程度の物ですが、Arcadiaのような自宅サーバではないところに投稿するのならば、
少しでもサイズが小さくなることは、管理者様に喜ばれるでしょうし、執筆する側も、一々面倒な基本スタイルの指定をしなくてもよくなりますし。
今回のタグの使い方については、殆ど前回の内容をなぞるだけの内容でしたが、
これは、基本を押さえるためで、基本さえ押さえておけば、上で書いたとおり、HTMLを使いこなすのは容易だと思います。
★注意★
・間違えても、タグの閉じ忘れがないようにしましょう。
・タグを閉じ忘れると、その先の文章すべてにスタイルが適用されたりします。
・そうなると、スタイルを指定したところから先の全てが、色が変わっていたり、大きくなっていたりして、読みづらいことこの上ないです。
・タグの使える掲示板等でタグを閉じ忘れるのは御法度です。
・せっかくだから、この際、エディタもメモ帳から卒業しましょう。
■お勧めの書籍■
株式会社秀和システム 最新カラー版 詳解HTML&JavaScript辞典 （本体 ２５００円＋税）
■お勧めのエディタ■
秀丸エディタ シェアウェア４０００円
Xemacs for Windows フリーウェア
ただし、秀丸エディタは初心者でも扱えると思いますが、
Xemacsはかなりつらいかもしれません。
しかし、慣れれば、かなり良いエディタであることは確かです。
他にも良いエディタを見つけたら（特にフリーウェアで）、順次載せていきます。
初版 2002/03/20