～マンガの為のHTML入門～

Step7-Q:コピーしたHTMLの意味を理解して使いこなそう！

前Stepでコピーして貼り付けたタグはいわゆる雛型です。
これを、実際に貴方のHPの1ページとして使うには
下の赤文字の部分を貴方のHP使用に替える事で
その役割をはたすことができる様になる訳です。

その為、最低限
赤文字部分がどういう意味を持っているのかだけは
知っておかなければ成らない訳です。

<html>
<head>
<title> ABC</title></head>
<body topmargin="0" leftmargin="0" bgcolor="#cccccc">
<center>
<TABLE width="990" HEIGHT="560"><TR>
<TD WIDTH="200" valign="top" bgcolor="#ffffff">


ABC



/001 


 

<a href="index.htm">

TOPに戻る

</a>
 
<a href= "ABC-000.htm">


前のページに戻る

</a>
 
<a href= "ABC-002.htm">


次ページ

</a>
 


<a href= "ABC-001.htm">１ページ目に行く</a> 
<a href= "ABC-010.htm">10ページ目に行く</a> 
<a href= "ABC-020.htm">20ページ目に行く</a> 
<a href= "ABC-030.htm">30ページ目に行く</a> 
<a href= "ABC-040.htm">40ページ目に行く</a> 
<a href= "ABC-050.htm">50ページ目に行く</a> 
<a href= "ABC-060.htm">60ページ目に行く</a> 
<a href= "ABC-070.htm">70ページ目に行く</a> 
<a href= "ABC-080.htm">80ページ目に行く</a> 
<a href= "ABC-090.htm">90ページ目に行く</a> 
<a href= "ABC-100.htm"> 100ページ目に行く</a> 

</TD><TD WIDTH="" align="CENTER" bgcolor="#ffffff">

<img src= "ABC-001.jpg">

</TD></TR></TABLE>
</center>
</body>
</head>
</html>

ご存知の方も多いでしょうが、HTMLというのは
“タグ”と呼ばれる『<』と『>』というカッコの間に書き込んだ、
決められた命令をPCが実行すると言う仕組みのブラウザのプログラムです。

例えば、“ABC”と言うタイトルのマンガのHPを作るとしましょう。
そこで貴方は“ABC”の文字をタイトルらしく目立たせたいと考えたとします。
ここで言う｢タイトル｣は文字通りの題名です。ブラウザ上部のタイトルバー内の文字ではありません。

<html>
<head>
<title>？？？？<title>
<body>

</body>
</html> 文字のサイズや色を替えるのには
幾つかの方法がありますが
もっとも一般的なのが、“font”
(“ﾌｫﾝﾄ”と読む。文字とか書式という意味)
というタグを使う方法です。

そこで、まず白紙のHTMLのファイルのソース
(左記の状態)を開きます。

<html>
<head>
<title>？？？？<title>
<body>



</body>
</html> そして“font”と言う文字を半角英数字で２つ打ち込み、
前(上)に書いた“font”は『<』と『>』で囲み、
後(下)に書いた“font”は『』で囲みます

前(上)に書いたのが
『ここから“font”の指定が始ります！』というタグ。
後(下)に書いたのが
『さっきの“font”の指定はここで終わり！』というタグです。

そして、その２つの“font”の間に
色やサイズを替えたい文字を書き込こみます。
いまは仮に作品のタイトルを“ABC”としておきましょう。

<html>
<head>
<title>？？？？<title>
<body>

ABC

</body>
</html> 最初(上)の“font”の後ろ(カッコの中)に、
半角スペースを入れてから
色の場合は『color="～～"』
(～～には色を指定する英数字、もしくは規定の文字が入る)
サイズの場合は『size="…"』
(…には１～７までの数字が入ります。１が最小。７が最大。)
と指定する訳です。

例えば文字色は地球にやさしい(？)“緑”！
サイズは最大の“７”！
とすると…

<html>
<head>
<title>？？？？<title>
<body>

ABC

</body>
</html> (左参)…で、これをブラウザ上で見ると
ABC
…となる訳です。
『なんか、今ひとつ味気ないなぁ～』
そう見えたら文字を斜体(斜めに少し傾いた字体)に
するのも良いでしょう。
使うタグはと。
使い方は“font”と同じ。
斜体にしたい文字をとで
挟み込む形に打ち込めばOK。
つまり…

<html>
<head>
<title>？？？？<title>
<body>

 ABC 

</body>
</html>
(左参)…という様にね。

…でもって、これがブラウザ上では、

ABC
…となる訳です。

どうかな？すこぉ～しは、HTMLの仕組みが理解できたかな？
ここで注意するべきなのが
『<』と『>』(つまりタグ記号)の間にある文字や記号は
一箇所でも違うと表示が上手くいかないということです。
「スペルを間違える」というの以外にも
「半角スペースが足りない」とか「間違って全角で入力してる」とかが
結構あるミスなんで注意してくださいね。

さて、ここまでの基本を踏まえた上で
いよいよコピーしたマンガ用のHTMLファイル〔雛型〕を
貴方のHP用に書き換える作業です！

～HTMLとブラウザ画面の相関関係図～

～HTML解説図～

変更が必要な部分の大まかな解説図です。
上の相関図とあわせて見ると
HTMLファイルに書かれた物が
おおよそ何処をどう処理して
HPのああいう画面になっているかを
だいたいのイメージ(印象)としてつかんで下さい。

それが頭の中にあると、その下の“詳細説明”が
少しは理解しやすくなると思いますので…。

～詳細説明～

<html>
<head>
<title> ABC</title></head>
<body topmargin="0" leftmargin="0" bgcolor="#cccccc">
<center>
<TABLE width="990" HEIGHT="560"><TR>
<TD WIDTH="200" valign="top" bgcolor="#ffffff">


ABC



/001 


 

<a href="index.htm">

TOPに戻る

</a>
 
<a href= "ABC-000.htm">


前のページに戻る

</a>
 
<a href= "ABC-002.htm">


次ページ

</a>
 


<a href= "ABC-001.htm">１ページ目に行く</a> 
<a href= "ABC-010.htm">10ページ目に行く</a> 
<a href= "ABC-020.htm">20ページ目に行く</a> 
<a href= "ABC-030.htm">30ページ目に行く</a> 
<a href= "ABC-040.htm">40ページ目に行く</a> 
<a href= "ABC-050.htm">50ページ目に行く</a> 
<a href= "ABC-060.htm">60ページ目に行く</a> 
<a href= "ABC-070.htm">70ページ目に行く</a> 
<a href= "ABC-080.htm">80ページ目に行く</a> 
<a href= "ABC-090.htm">90ページ目に行く</a> 
<a href= "ABC-100.htm"> 100ページ目に行く</a> 

</TD><TD WIDTH="" align="CENTER" bgcolor="#ffffff">

<img src= "ABC-001.jpg">

</TD></TR></TABLE>
</center>
</body>
</head>
</html>

ここではコピーしたHTMLタグについて
漫画のHP制作に最低限の説明だけをします。

左のタグの中の赤い文字になってる部分が、
ページによって書き換えなければならない部分です。
言い換えると、そこ以外は触る必要はありません。
勿論、自分でオリジナルのページを改造する場合は別ですが…。
…で、まずは
上から3行目の

<title> ･･････ </title>

これは前のStepでも説明した通り、
ブラウザ上部のタイトルバー内に表示される文字を
書き込む場所です。
ここでは取りあえず“ABC”とだけしか
書き込んでありませんが、
長編作品の場合は“ABC/001”とページ数を書くとか
“ABC/#01”と話数を書くとかしても良いでしょう。

次に


ABC

/001 ……

と言う部分。
これは画面上、左上の
タイトル&ページ数になります。
ここではタイトルは赤い色で
表示するようにしてあります。
気に入らない方は
の
"red" の文字を、HTMLで色指定できる
別の色の文字でに変えてください。
その下の赤文字２つ
<a href= "ABC-･･･.htm">
と
<a href= "ABC-･･･.htm">
は前のページと次のページへのリンク。
(クリックしてページ移動する時のボタン部分)
このページの前後のページのファイル名を
ここに拡張子の“.htm”まで含めて
書き込んで下さい。
当たり前ですが上が『前ページに戻る』用
下が『次ページに進む』用ですから
お間違えのないように…。
前後のページリンクの下のズラリと並ぶ赤文字群。
これは10ページ単位のリンクの一覧です。
このスタイルのHPは、普通のマンガのページを
分割して掲載している分、当然ページ数が増えます。
このリンクは読み手がページをジャンプして
読みたい場合のサービスリンクです。
ここでは10ページ単位で100ページまでの
リンクを用意してみました。
またページ単位ではなく
話数単位でリンクを作っても良いでしょう。
最後に一番下の赤文字である

<img src= "･･･.jpg">

これがこのページのイメージファイル
(つまり“絵”“原稿”のデータファイル)
を指定する場所です。
ブラウザ画面で言うと左側の絵の部分がここです。
ここでは .jpg(“ジェイペグ”と読む)形式の拡張子
(ファイル名の最後の『.(ドット)』以下の
末尾の部分を拡張子と呼ぶ。
これによってPCが、そのファイルの種類を
確認・識別する重要な記号文字)
を使っていますが
.gif(“ジフ”と読む)の形式の
ファイルを使う人は.jpgを.gifと
書き換えておくと良いでしょう。

イメージファイルを使った背景指定

いまこの文字の背景はカラフルな縦じま模様になってると思います。上に書いた『色指定』では、この文字の背景の様に一面単色にしかなりません。この縞模様は右の様な小さな絵をイメージファイルにしておいて、それを背景としてタグ指定する事で表現されています。　　　　

つまりこれがイメージファイルを使った背景ということです。
これを利用すると･･･

こういうことや…

こういうことも出来る様になる訳です！

やり方は下記の緑色の文字 “bgcolor”を “background” に変更し、
その後ろの「～＝ "………"」の ………部分に貼り付けたい背景の
イメージファイル名を打ち込めばOK。

ただし、このスタイルには背景色の指定個所が３つあります。
一番最初のはページ全体の背景色を指定する場所。
2つ目のは画面左側の“前ページ”“次ページ”への
リンクなどがある枠の背景を指定する場所。
そして下の方に離れてある3つ目のが画面の右側
イメージファイルの入る枠の背景を指定する場所です。

<html>
<head>
<title> ABC</title></head>
<body topmargin="0" leftmargin="0" bgcolor= "#cccccc">
<center>
<TABLE width="990" HEIGHT="560"><TR>
<TD WIDTH="200" valign="top" bgcolor= "#ffffff">


ABC



/001 


 

<a href="index.htm">

TOPに戻る

</a>
 
<a href= "ABC-000.htm">


前のページに戻る

</a>
 
<a href= "ABC-002.htm">


次ページ

</a>
 


<a href= "ABC-001.htm">１ページ目に行く</a> 
<a href= "ABC-010.htm">10ページ目に行く</a> 
<a href= "ABC-020.htm">20ページ目に行く</a> 
<a href= "ABC-030.htm">30ページ目に行く</a> 
<a href= "ABC-040.htm">40ページ目に行く</a> 
<a href= "ABC-050.htm">50ページ目に行く</a> 
<a href= "ABC-060.htm">60ページ目に行く</a> 
<a href= "ABC-070.htm">70ページ目に行く</a> 
<a href= "ABC-080.htm">80ページ目に行く</a> 
<a href= "ABC-090.htm">90ページ目に行く</a> 
<a href= "ABC-100.htm"> 100ページ目に行く</a> 

</TD><TD WIDTH="" align="CENTER" bgcolor= "#ffffff">

<img src= "ABC-001.jpg">

</TD></TR></TABLE>
</center>
</body>
</head>
</html>

(ただし当たり前ですけど
当然、同じフォルダー内に必要なイメージファイルを
入れておかないと駄目ですよ。詳しくはstep8以降で…)

ただ、マンガのHPにおいては下図の様に
あまり背景が目立ってしまうのも考え物ですのです。
注意してくださいね！

Step8.0へ

なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。

*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日～十数日以上かかる場合があります。

Step0.1(INDEX)に戻る

<html> <head> <title>？？？？<title> <body> </body> </html>	文字のサイズや色を替えるのには幾つかの方法がありますがもっとも一般的なのが、“font” (“ﾌｫﾝﾄ”と読む。文字とか書式という意味) というタグを使う方法です。そこで、まず白紙のHTMLのファイルのソース (左記の状態)を開きます。
<html> <head> <title>？？？？<title> <body> <font> </font> </body> </html>	そして“font”と言う文字を半角英数字で２つ打ち込み、前(上)に書いた“font”は『<』と『>』で囲み、後(下)に書いた“font”は『』で囲みます前(上)に書いたのが『ここから“font”の指定が始ります！』というタグ。後(下)に書いたのが『さっきの“font”の指定はここで終わり！』というタグです。そして、その２つの“font”の間に色やサイズを替えたい文字を書き込こみます。いまは仮に作品のタイトルを“ABC”としておきましょう。
<html> <head> <title>？？？？<title> <body> <font> ABC </font> </body> </html>	最初(上)の“font”の後ろ(カッコの中)に、半角スペースを入れてから色の場合は『color="～～"』 (～～には色を指定する英数字、もしくは規定の文字が入る) サイズの場合は『size="…"』 (…には１～７までの数字が入ります。１が最小。７が最大。) と指定する訳です。例えば文字色は地球にやさしい(？)“緑”！サイズは最大の“７”！とすると…
<html> <head> <title>？？？？<title> <body> <font color="green" size="7" > ABC </font> </body> </html>	(左参)…で、これをブラウザ上で見ると ABC …となる訳です。『なんか、今ひとつ味気ないなぁ～』そう見えたら文字を斜体(斜めに少し傾いた字体)にするのも良いでしょう。使うタグは<i>と</i>。使い方は“font”と同じ。斜体にしたい文字を<i>と</i>で挟み込む形に打ち込めばOK。つまり…
<html> <head> <title>？？？？<title> <body> <font color="green" size="7" > <i> ABC </i> </font> </body> </html>	(左参)…という様にね。 …でもって、これがブラウザ上では、 ABC …となる訳です。