お話歳時記 お話を見て書いて創るサイト お話歳時記
お話歳時記創作情報デジタルコンテンツメルマガwww.pleasuremind.jp TOP
◆ 渚物語の作り方。 ◆
 ←BACK     ◆ HTML絵本を作ってみよう、その一。 ◆


  HTMLを使ってコンテンツを作ってみましょう。

  HTMLでのコンテンツは、
  四コマの作品をコンテンツにするなら、四枚の画像を、ひとつにまとめて表示するか、
  一ページに一枚の画像を表示させ、次々にリンクをたどっていく形にします。
  前回作ったGIFアニメをポイントに置いても良い訳ですよね。

     イメージはこんな感じ。


  最初にベースになるHTMLを書いてみましょう。

  HTMLはテキストファイルで、ある一定のルール(構造を定義するタグ等)に従って書き、拡張子txtをhtmまたはhtmlにすると、WEBページとしてブラウザ等で表示されるようになります。

  下記のファイルをコピーしたTEXTファイルの拡張子をtxtからhtmlに変えて、ブラウザで表示させてみましょう。
---------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>
渚物語
</TITLE>
</HEAD>
<BODY>
ここに文章とCGが入ります。
</BODY>
</HTML>
---------------------------------------------------------------------

  WINDOWSの方は、「メモ帳」か「ワードパット」で、「スタート」→「プログラム」→「アクセサリ」→「メモ帳」or「ワードパット」、MACの方は、「TextEdit(テキストエディット)」を使うと、HTMIファイルと認識してしまいますから、下の◆テキストエディタを使おう! に書いてある「mi」をダウンロードして使ってください。

  テキストエディタがわからない、または使いやすいものが欲しいと言う方は、下記のページを参照してください。
  ◆テキストエディタを使おう!
   http://www.pleasuremind.jp/HOWTO/HOWTO011.html 

  WINDOWSの方は、拡張子を変更出来るよう最初に表示方法を変更してください。
  表示方法の変更は、下記のページを参照してください。
  ◆拡張子を表示させよう。
   http://www.pleasuremind.jp/HOWTO/HOWTO012.html 


  準備は出来ましたか?
  準備が終わったら、まず上の枠に書いてある文書をコピーして、保存してください。
  保存ファイル名は何でもかまいません。 TEST.htmlでいいでしょう。


  次に、保存したファイルの拡張子をtxtからhtmlに変更します。

  拡張子が変更出来たら、そのファイルを、ダブルクリックするか、ブラウザにドラッグ&ドロップしてください。

  下記のように表示されたらOKです。 表示されましたか?

 
TXTファイル
HTML表示イメージ
T
E
S
T
<HTML>
<HEAD>
<TITLE>
渚物語
</TITLE>
</HEAD>
<BODY>
ここに文章とCGが入ります。
</BODY>
</HTML>

◆ HTML絵本をつくってみよう、その二。 ◆
 

  次は五ページのコンテンツを作ってみましょう。

  下記のファイルをダウンロードしてください。
  ファイルは自動又はダブルクリックで解凍されます。

  ◆ 素材。

  ◆ダウンロードしたファイルをダブルクリックすると解凍されます。
  このフォルダを複製してもう一つ作り、一つをガイド、一つを製作用にします。
  製作用のフォルダは、右ののように00.txtとCGフォルダだけ残して、他のファイルは削除してください。
  失敗したら、もう一度ダウンロード。

 
  00.txtのファイルを複製して01〜05の五つのファイルを作ります。



  五つのファイルにそれぞれ画像ファイルをリンクさせます。
 
TXTファイル
HTML表示イメージ
01
<HTML>
<HEAD>
<TITLE>
渚物語
</TITLE>
</HEAD>
<BODY>

<div align="center">渚物語<br>
ヤドカリさん<br>
<br>
<img src="CG/01.gif">
<br>
<br>
TOP  <a href="02.html" target="_parent">NEXT</a><br>
<br>
</div>
</BODY>
</HTML>
 
TXTファイル
HTML表示イメージ
02
<HTML>
<HEAD>
<TITLE>
渚物語
</TITLE>
</HEAD>
<BODY>

<div align="center">渚物語<br>
ヤドカリさん<br>
<br>
<img src="CG/02.gif" width="400" height="300">
<br>
<br>
<a href="01.html" target="_parent">BACK</a>  <a href="03.html" target="_parent">NEXT</a><br>
<br>
</div>
</BODY>
</HTML>
 
  複製したファイルはすべて
------------------------------------------------------
<HTML>
<HEAD>
<TITLE>
渚物語
</TITLE>
</HEAD>
<BODY>

<div align="center">渚物語<br>
ヤドカリさん<br>
<br>
<img src="CG/01.gif">
<br>
<br>
TOP  NEXT<br>
<br>
</div>
</BODY>
</HTML>
------------------------------------------------------
  となっています。
  その赤い文字で書かれてある数字を1、2、3、4、5と変えていきます。
  これで画像ファイルは変更されています。
  
  しかし02ファイルの見本には、width="400" height="300"と書かれてありますね?
  これは画像を表示する幅が400ピクセルですよ、高さは300ピクセルですよ、と書いてあります。
  (元の画像サイズと同じ。)

  この数字をそれぞれ200 150と変えると50%のサイズで表示されます。
  これは無くても画像は表示されるのですが、あった方がいいかも。

  もう一つ、<img src="CG/01.gif">は、
  CGというフォルダの01.gifというイメージを表示させなさい、と書いてあります。

  数字を書き換えるだけでファイルは変えられます。
  出来ましたか?
   

  次に五つのページをリンクさせます。
◆ HTML絵本をつくってみよう、その三。 ◆
 


  リンクを指定しているのは、
------------------------------------------------------
<br>
TOP  NEXT<br>
------------------------------------------------------
  の部分です。

  01.txtファイルは、
------------------------------------------------------
<br>
TOP  <a href="02.html" target="_parent">NEXT</a><br>
------------------------------------------------------
  と変更します。
  これは、NEXTという文字をクリックすると、02.htmlというファイルを表示させなさい、と書かれています。

  02.txtファイルは、
------------------------------------------------------
<br>
TOP  NEXT<br>
------------------------------------------------------
  のTOPをBACKに変え、
    ↓
------------------------------------------------------
<br>
<a href="01.html" target="_parent">BACK</a>  <a href="03.html" target="_parent">NEXT</a><br>
------------------------------------------------------
  と変更します。(改行は入れません。)
  BACKをクリックすると、01.htmlを、
  NEXTをクリックすると、03htmlを、表示させなさい、と書き換えています。

  同じように03.txtファイルは、
------------------------------------------------------
<a href="02.html" target="_parent">BACK</a>  <a href="04.html" target="_parent">NEXT</a>
-----------------------------------------------------

  04.txtファイルは、
------------------------------------------------------
<a href="03.html" target="_parent">BACK</a>  <a href="05.html" target="_parent">NEXT</a>
------------------------------------------------------


  05.txtファイルは、
------------------------------------------------------
<br>
TOP  NEXT<br>
------------------------------------------------------
  のTOPをBACKに変え、NEXTをENDに書き換えます。
------------------------------------------------------
    ↓
------------------------------------------------------
<br>
BACK  END<br>
------------------------------------------------------
  それから、BACKにリンクを貼ります。
    ↓
------------------------------------------------------
<a href="04.html" target="_parent">BACK</a>  END<br>
------------------------------------------------------

  五つのファイルにリンクを貼り終えたら、最後に五つのページを拡張子を.txtから.htmlに変えます。

  最初の「01.html」をブラウザにドラッグ&ドロップしてみてください。

  どうですか?うまく表示できましたか?
  リンクはちゃんとなっていますか?

  失敗するとしたら、ファイル名の書き間違えくらいですから、
  良く見て書いてください。
  これでホームページの紙芝居や、写真集が自分で作れるようになります。
  次回はこれに音楽をつけてみましょう。

 ◆参考用のファイルはここです。