作成開始日 2004/12/29
最終更新日 2015/03/05
This is a cat.は「This is a cat.」となり、「This is acat.」とはならない。ただし、これは英文に限ったことで、和文（全角文字）ではスペースの挿入は起きない。ところが、全角文字でも記号は例外らしく、記号の後に改行があると、スペースが挿入されてしまう。つまり；
<font color=firebrick>■</font> あいうえお…とすると、「■あいうえお…」ではなく、「■ あいうえお…」となってしまうわけだ。もちろん、
<font color=firebrick>■</font>あいうえお…とすれば何の問題もないのだが、読みにくいソースになる。本文はなるべく左端から始めたい。こういう場合、たいていの言語では行末に継続記号（\等）を置いて行継続をするのだが、HTMLではダメみたい。そこで、少々荒業を使うと；
<font color=firebrick>■</font><!-- -->あいうえお…つまり、改行（CR/LF）をコメント化してしまうわけだ。 でも、本文が「-->」からはじまるのもいかがなものかと… そこで、ちょいとイリーガル仕様にすると、
<font color=firebrick>■</font><!- >あいうえお…これならば、辛うじて本文が左端から始まっているとみなせないこともない。 でも、このコメント指定方法は環境依存の可能性が高く推奨できない。
⇒いやいや、単純に；
<font color=firebrick>■</font >あいうえお…で良いようだ。
⇒行頭の飾りに関しては、スタイルシートを使用すれば行継続を考える必要はなくなる。要領は上記のビュレットの項を参照。
<p style="margin-top:100px">
HTMLの標準タグだけで実現するなら、些か泥臭い方法だが、
<hr size=100 color=white>という方法もある。ちなみに、<hr size=100 width=0>はダメだった。
あるいは、もっとダサい方法だが、改段と全角スペースで、
<p> <p> <p> <p>というやり方もある。この場合、半角スペースだとダメ。
H4.LINE{border-left:16px darkcyan solid; border-bottom:2px darkcyan solid;
padding-left:4px; margin-top:60px; margin-bottom:16px;}
この「border」というのが見出しの周りの罫線のことで、「border-left」は見出しの前の四角い部分を意味している（つまり、太い縦線）。また、「border-bottom」は見出しの下の罫線の指定をしている。「margin」は見出しの前後（上下）の空きのこと。デフォルトでは前の空きがやや少なく感じられるので、大きめにしておいた。
で、このスタイルを使用するときは、次のようにclassを指定すればよい。
<h4 class="LINE">なんたらかんたら</h4>で、この定義の意味だが、要する、h4が親クラスで、LINEがそれを継承した子クラス、という解釈でいい…のかな？ このあたり、記述のスタイルとその意味するところが今一つしっくりこないのだが、要は、H4を継承した見出しであり、H4.LINE{…}で明示的に定義されていない部分に関しては、H4の定義がそのまま流用されるということ。逆に言うと、親クラスなしで独自に定義をしても、それは見出しとは見做されない。たとえば、H4LINE{…}というまったく新しいスタイルを定義しても、ただの文字スタイルとしてしか機能しない。上下に空きは作られず、見出しにならないのである。margin指定は無視される。
なお、改行だけなら「:after{content:"\A"; white-space:pre;}」という方法もあるが。
H4.NOTE{border-left:48px maroon solid; border-bottom:1px maroon solid;
padding-left:4px; margin-top:32px; margin-bottom:8px; text-indent:-48px;}
H4.NOTE:before{content:"参考 "; font-weight:bold; color:white;}
ポイントは「text-indent」で文字を左にはみ出させることと、「:before」で文字（参考）を出力すること。「:」に続くのはメソッドというわけか。使い方はLINEのときと同じ。H4に「class="NOTE"」を指定すればよい。
<h4 style="margin-top:50px">これは見出しだよ</h4>▼ヘッダ部で定義する方法（１文書でしか使わない場合）
<style type="text/css">
<!--
h4{margin-top:50px;}
-->
</style>
▼外部ファイルで定義する方法（複数文書で共通に使用する場合）
例えば、親ディレクトリの中にあるmystyle.cssの中で
h4{margin-top:50px;}
として、HTML文書のヘッダ部で次のようにして読み込む。
<link rel="stylesheet" href="../mystyle.css" type="text/css">
H3{font-family:"GOTHIC Proportional",sans-serif; font-weight:normal;}
はじめからsans-serifだけでもいいのでは？と思いがちだが、OS/2ではどうしてもラスターフォントを使いたいからね。OS/2のラスターフォントにはいろいろ制約があって、状況に応じて細かい設定が必要（特に20ドットフォントの使用がネックになる）。sans-serifをラスターフォントにして、sans-serif指定をすれば済むというものではない。
スタイルシートには、印刷用改ページ指定がある(*^_^*) たとえば、用紙1枚を2pのレイアウトにして（袋とじ）出力するなら、こんなカンジで埋めこめばよろしい（勿論、プリンタドライバ側で2pレイアウトを指定する必要がある）。
<html>
<head>
<style type=text/css>
div{page-break-after:always} ⇒{page-break-before:always}の方が判りやすい
</style>
</head>
<body>
<div><img src=002.jpg></div>
<div><img src=001.jpg></div>
<div><img src=004.jpg></div>
<div><img src=003.jpg></div>
……
</body>
</html>
ポイントは、右綴じの袋とじの場合、奇数ページと偶数ページを逆順にすること。これはREXXで割と簡単に処理できる。ただし、この方法でもページ数が多くなると、HTMLページがメチャクチャ膨らむ。8pでもちょっと苦しい。むしろ、2p単位でファイルを作る？それも悪くはないような気がするが…、実はWindows版のFireFoxでは、1ジョブごとにプリンタの設定が初期化されてしまうようで、けっこう面倒臭い。
| " | " |
| & | & |
| < | < |
| > | > |
ソース）HTMLのソースなどを表示するときは<pre>タグを使います。
表 示）HTMLのソースなどを表示するときは<pre>タグを使います。
<HEAD>
<TITLE>へろへろページ</TITLE>
<STYLE TYPE="text/css">
<!--
BODY,TABLE { font-size: large; }
-->
</STYLE>
</HEAD>