[ フッタ詳細 ] [ 材料補足 ] [ 変換材料 ] [ 目次 ]

変換材料

ヘッダ詳細

デフォルトで使用されるヘッダについて。「sample」フォルダ内の「hdcss.txt」と同一のものになります。
読みやすくするため、実際の記述に改行を追加してあります。

便宜上ナンバリングして、ツールを動かすために必要な部分は強調しておきます。

01020304050607080910
No.ファイルの内容詳細説明
01 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
ドキュメント宣言、HTML文書の開始、ヘッダ部分の開始。
『lang="ja"』は日本語で記述しますよ、という意味。
02 <meta http-equiv="Content-Type"
content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type"
content="text/css">

文字コードはシフトJISを使っていますよ、スタイルシートはCSS(カスケーディングスタイルシート)を使っているんですよ、という意味。

文字コードの指定は正しく行えば文字化けを防ぐことができます(間違うと化けます)。文字コードの変換機能はありませんので、基本的にはこのままにしておいてください。
スタイルシートを使用しない場合、指定は削除してください(むしろ『hdnocss.txt』をベースにした方が良いでしょう…)。

03 <title>
<!--{ここはタイトル}-->
</title>

ブラウザのタイトルバーに表示される部分。『<!--』と『-->』で囲まれる部分はコメント扱いで、表示されませんが。

『タイトル置換』を使用する場合、『<!--{ここはタイトル}-->』という行を探してテキストファイルの1行目に置き換えます。そのため、この部分は書き換えないようにしてください(属性の追加は可)。
特に真ん中の1行は、スペースひとつ増えただけで認識されません。

04 <style type="text/css" media="screen , tv">
<!--

スタイルシートの記述を始めます。未対応ブラウザのために、『<!--』をつけてコメントアウトします。

『media="screen , tv"』を書き添えると(=media属性がscreen以外のとき)、 NN4.xがスタイルシートを読み込めなくなるようです。 NN4.xはスタイルシートの表示に問題点がいろいろあるので、あえて読み込まれないようにしておきます(バージョンアップ等で、この記述に意味がなくなる可能性はありますが)。

05
body {margin:40px 10%;
background-color:#FFFFFF;
color:#333333; font-size:100%;
font-family:
"MS Pゴシック" , "Osaka" ,
sans-serif;}
a:link {color:#0000FF;}
a:visited {color:#660099;}
a:hover {color:#FF0000;
background-color:#FFCC99;}
a:active {color:#FF0000;}
.title {font-size:120%; font-weight:bold;}
.doc {font-size:90%; line-height:150%;
margin:5em 0px;}
emark {font-size:100%; text-align:right;
margin-bottom:7em;}
.ps {font-size:75%; line-height:140%;
margin-right:20%; color:#666666;}
.navi {font-size:85%; text-align:center;
margin-top:6em;}

スタイルシートの記述です。

{}の左側を『セレクタ』と呼びます。{}の中身は『;』で区切られています。そのうち『:』の左側を『属性(またはプロパティ)』と呼び、右側を『属性値(またはプロパティ値)』と呼びます。
セレクタで『どの要素に対する指定か』を、属性と属性値で『何を』『どうするか』を指定します。

上から、ブラウザに表示される部分全体、未訪問リンク、訪問済リンク、カーソルが上にある時のリンク、選択中リンク。
それより下はタグ内に『class="doc"』等で書き込んだクラスに対する指定です。
titleは最初の見出し1、 docは小説本文(元のテキストファイルに改行タグをつけたもの)、 emarkは結びの言葉(『End』や『終』、『続』等をイメージ)、 psが追記部分で、 naviはナビゲーションリンク。
クラスセレクタの書き換えはお好みで。ただし、class属性の書き換えを忘れないようにしてください。

 
06 -->
</style>
</head>
コメントの終了、スタイルシートの終了、ヘッダの終了。
07 <body> 本文開始。ブラウザで表示される部分全体のことです。
08 <h1 class="title">
<!--{ここは見出し1}-->
</h1>

本文の大見出しとして認識される部分。クラス『title』を指定。『<!--』と『-->』で囲まれる部分はコメント扱いで、表示されませんが。

『タイトル置換』を使用する場合、『<!--{ここは見出し1}-->』という行を探してテキストファイルの2行目に置き換えます。そのため、この部分は書き換えないようにしてください。
特に真ん中の1行は、スペースひとつ増えただけで認識されません。
h1タグに対して、属性の追加・クラス名の変更は勿論可能ですが、クラス名を書き換えた場合は、『05』の『.title』も忘れず書き換えてください。

09 <!--↑見出し1、↓本文--> コメント。エディタで開いたときにわかりやすいように書いてあるだけですので、不要でしたら削除してください。
10 <div class="doc">

小説本文(元のテキストファイルに改行タグをつけたもの)開始。クラス『doc』指定。
この後ろにテキストファイルの中身が書き込まれます。

『div』は意味を持たない箱のようなタグです。『<div>』と『</div>』に囲まれた範囲をブロック分けし、前後に改行をつくりますが、『p』と違って余白はできません。また、内部にブロック属性(=前後に改行をつくるもの)を含むことができますので、クラス属性を書き込んでスタイルシートを適用させるのに便利です。
クラス名の変更は勿論可能ですが、その場合は『05』の『.doc』も忘れず書き換えてください。