〜「ﾃｷｽﾄのようなHTMLのようなHTML(?)」の作り方 〜

■はじめに
  ﾏﾆｭｱﾙや備忘禄など、ほんのちょっとしたHTML文書を作成する時、
  ﾎｰﾑﾍﾟｰｼﾞﾋﾞﾙﾀﾞｰやDreamWeaverを使うほどでもないので、僕はよくﾃｷｽﾄｴﾃﾞｨﾀを使います。
  ﾃｷｽﾄｴﾃﾞｨﾀは軽快でちょっとしたHTML文書を作成するのに、とても適していると思うのですが、
  ﾃｷｽﾄｴﾃﾞｨﾀでHTMLを作成している時、ﾀｸﾞがじゃまで結構見づらかったりします。
  HTMLはﾌﾞﾗｳｻﾞ表示用の言語ですから。。。

  今回は、僕がﾏﾆｭｱﾙ用HTML作成時によく使っている、
  「ﾃｷｽﾄのようなHTMLのようなHTML(?)」というHTML作成方法についてです。

■用意するもの
  ・ez-HTML(http://www.w-frontier.com/software/ezhtml.html)
    ﾃｷｽﾄｴﾃﾞｨﾀです。
  ・CaptureXP(http://www.vector.co.jp/soft/dl/win95/art/se039405.html)
    画面をｷｬﾌﾟﾁｬしてくれるﾂｰﾙです。
  この世界にはいってから様々なﾂｰﾙを使いましたが、どちらも逸品といえるﾂｰﾙです。
  是非ｲﾝｽﾄｰﾙしてみてください。

■CaptureXPの使い方
  まずはCaputureXPの使い方から。
  CaputureXPはﾓﾆﾀｰに表示されている映像から部分的にｷｬﾌﾟﾁｬｰして画像ﾌｧｲﾙを作成するﾂｰﾙです。
  特に解説しなくとも直感的に使えると思います。
  最低限のことのみ解説しますが、より詳しい使い方はこちらなどが、丁寧に解説
  されていてよいと思います。
  
  今回は、CaptureXPを使ってHTMLに使用する画像を作成します。
  CaputureXPを起動すると下図のようなﾂｰﾙが起動します。
  一番右の？ﾏｰｸのｱｲｺﾝより環境設定ができるので、「ｸﾘｯﾌﾟﾎﾞｰﾄﾞへ送る」のﾁｪｯｸを外しておいてください。

  capturexp.png(6596 byte)

  ※「ｸﾘｯﾌﾟﾎﾞｰﾄﾞへ送る」にﾁｪｯｸをいれた場合はﾍﾟｲﾝﾄﾌﾞﾗｼは起動されず、直接ｸﾘｯﾌﾟﾎﾞｰﾄﾞに送られますので
     ExcelやWordで使用する場合に大変便利です。

  一番左のｶｯﾀｰのｱｲｺﾝ(範囲指定で画面をｷｬﾌﾟﾁｬ)や、左から二番目のｶﾒﾗのｱｲｺﾝ(自動的に境界を認識してｷｬﾌﾟﾁｬ)
  を使用して、目的の画像をｷｬﾌﾟﾁｬしてください。
  ｷｬﾌﾟﾁｬすると、自動的にﾍﾟｲﾝﾄﾌﾞﾗｼが起動します。
  例えば、ｺﾝﾄﾛｰﾙﾊﾟﾈﾙ開いてｶﾒﾗｱｲｺﾝでｷｬﾌﾟﾁｬしたら、こんな感じでﾍﾟｲﾝﾄﾌﾞﾗｼが起動します。
  
  paintbrush01.png(124683 byte)
  
  HTMLで使用する場合は、png形式が都合がよいのでﾌｧｲﾙの種類にPNGを指定して保存してください。
  
  paintbrush02.png(33435 byte)
  
  こんな感じでCaputureXPは画面に表示されているものを大変簡単に画像ﾌｧｲﾙにすることができます。
  文章を書きながら「画像があったほうがわかりやすいな」と感じた時にすぐに画像ﾌｧｲﾙを作成すること
  ができるので、ｽﾄﾚｽなく作業ができます。
  
■preﾀｸﾞ内に文章を書いてみる
  それでは文章の作成をしてみましょう。
  ez-HTMLを起動し、左上の新規ﾌｧｲﾙ作成ﾎﾞﾀﾝを押してください。
  すると下図のように、ﾃﾝﾌﾟﾚｰﾄのみのﾌｧｲﾙが作成されます。
  適当な名前を付けて保存してください。
  
  newfile01.png(38997 byte)
  
  HTMLには様々なﾀｸﾞがあってﾌﾞﾗｳｻﾞで表示した時、とても見栄えのよい文書を作ることができます。
  ただ、ﾌﾞﾗｳｻﾞで表示する場合はよいのですが、ﾃｷｽﾄｴﾃﾞｨﾀで表示した場合あたりまえですがﾀｸﾞだらけになってしまい
  ます。
  今回のようなﾌﾞﾗｳｻﾞ表示での体裁にあまりこだわらないようなHTMLの場合は、ﾃｷｽﾄをそのまま表示することができる
  preﾀｸﾞを使用し、preﾀｸﾞ内にすべての文章を書きます。
  ※preﾀｸﾞ内は改行やｽﾍﾟｰｽもそのまま入力された通りにﾌﾞﾗｳｻﾞで表示されます。
  
  さっき作成したHTML文書にpreﾀｸﾞを挿入します。
  
  prepre01.png(40220 byte)
  
  <pre>〜<pre>の間はﾃｷｽﾄで入力した通りにﾌﾞﾗｳｻﾞで表示されます。どんどん文章を書いていきましょう。
  
  prepre02.png(43749 byte)
  
  左下に[HTML編集]と[ﾌﾟﾚﾋﾞｭｰ]ﾎﾞﾀﾝがあります。 
  ある程度文章が書けたらﾌﾟﾚﾋﾞｭｰﾎﾞﾀﾝを押してみてください。
  ﾌﾞﾗｳｻﾞで表示した場合のﾌﾟﾚﾋﾞｭｰが表示されます。
  
  prepre03.png(29593 byte)
  
  preﾀｸﾞ内のﾃｷｽﾄがそのまま表示されているのがわかると思います。
  また、ﾌﾟﾚﾋﾞｭｰを終了する場合HTML編集ﾎﾞﾀﾝを押してください。
  
■画像を挿入する
  次に画像を挿入してみましょう。
  その前にｻﾝﾌﾟﾙHTMLを保存しているﾌｫﾙﾀﾞに画像保存用ﾌｫﾙﾀﾞを作成して置いてくださいね。
  今回ﾌｫﾙﾀﾞ名称は[img]としています。
  
  image01.png(28040 byte)
  
  CaputureXPで目的のpng画像を作成して画像保存用ﾌｫﾙﾀﾞに保存してください。
  保存したファイルをドラッグして、挿入したい場所にドロップするだけで挿入できます。
  
  image02.png(72039 byte)
  
  image03.png(72915 byte)
  
  imgﾀｸﾞが挿入されました。
  再度ﾌﾟﾚﾋﾞｭｰをみてみましょう。
  
  image05.png(67673 byte)
  
  画像が挿入されているのが確認できると思います。
  
■ひたすら作成
  あとは、文章を書いて画像作成＆挿入を繰り返しをします。
  また、先ほど画像を挿入したように、preﾀｸﾞ内でﾀｸﾞを使用することは可能です。
  ﾊｲﾊﾟｰﾘﾝｸ(aﾀｸﾞ)なども普通に使用できますので気にせず使用しましょう。
  
  
  ※ﾀｸﾞが使用できるということは、裏返すと<や>を表示することができないということです。
    たとえばHTMLなどのｻﾝﾌﾟﾙｿｰｽをそのまま表示したい場合は困ってしまします。
    その場合は、<や>の代わりに対応するｴｽｹｰﾌﾟ文字(<の場合&lt; >の場合&gt;)を使用するか、 
    preﾀｸﾞ内でxmpﾀｸﾞを使用してください。
    xmpﾀｸﾞはpreﾀｸﾞをより強力にしたようなﾀｸﾞです。
    ﾀｸﾞやｴｽｹｰﾌﾟ文字も関係なくそのままの状態のﾃｷｽﾄを表示することができます。
  
    たとえばpreﾀｸﾞ内に下のように<xmp>と</xmp>で囲まれたHTMLを書くと
    <xmp>〜</xmp>内にあるHTMLがそのまま表示されます。

  ・ﾃｷｽﾄ表示
  xmp01.png(53168 byte)
  
  ・ﾌﾟﾚﾋﾞｭｰ
  xmp02.png(68801 byte)

  以上、「ﾃｷｽﾄのようなHTMLのようなHTML(?)」の作り方でした。
  
▲メニューへ



(*´▽`)ﾉ。ﾟ･*:.｡.ДЯＩＧДтＯ.｡.:*･ﾟ。
  最後まで見て頂きありがとうございます。
  このサイトはバナークリックの広告収入により運営されています。
  今回の内容が「よかった」とか「ためになった」と思われましたらで結構ですので、
  下バナーのクリックにご協力よろしくお願いします。