bake
その４　行間
 

    <HTML>
    <HEAD>
    <TITLE>文書タイトル</TITLE>
    <META HTTP-EQUIV="Content-Type"CONTENT="text/html;charset=x-sjis">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        if(navigator.appVersion.indexOf("Mac") == -1){
            document.write('<STYLE TYPE="text/css">')
            document.write('<!--P {line-height:135%;}/-->')
            document.write("</STYLE>")
        }
    //-->
    </SCRIPT>
    </HEAD>

    <BODY>
    <P>
      
    …………ホームページの内容……………
      
    </P>
    </BODY>
    </HTML>


　ＩＥはVer３から、ＮＮはVer４からスタイルシートが使えるようになりました。これで何が便利になったかと言うと、これまでできなかった行の間の間隔を指定できるようになったのです。
　それまでは全く行間が指定できなかったため、特にWinでは（さらにＮＮの場合は）行間が詰まった感じで表示されていました。字画の多い漢字混じりの文章は一目見て「字面が真っ黒」という印象を受け、読む意欲を失わせることしきりでした。
　小説を発表している方々にとって、これはものすごく頭の痛い問題だったと思います。皆さん一行づつ改行を入れたりとか、テーブルを使ったりとか…それぞれ知恵を絞って工夫していらっしゃったと思います。
　本当に、この行間隔指定はありがたい機能です。

■■■■■■■■■

　ところが…実はこの機能には落とし穴がありました。Winだけを使ってらっしゃる方は気が付かなかったと思いますが、Mac版のＩＥ・ＮＮ共、この行間隔を指定すると“表示がおかしくなる”という現象が出ていたのです。
　もともとMacのブラウザで表示される文章は、Winのそれに比べていくらか行間が広く取られて表示されていました。その事と関係あるのかもしれませんが、行間隔を指定した文書をMacで表示した場合“一部分だけ行間が広く表示される”とか“行の全部が重なって表示されて、文章が読めない”なんていう事が起こっていたんですね。――実は私のこのページも、そのせいでMacで読めない文書が何個かあったのです。とほほ。

■■■■■■■■■

　そこで、このような困った事態を防ぐための方法が、この章の一番上の囲みの中にあるスクリプトです。

　使い方はいつもと同じです。<SCRIPT LANGUAGE="JavaScript">から</SCRIPT>までを</HEAD>行の上にペーストすればそのまま使えるでしょう。そうして<BODY>行の下に<P>を入れ</BODY>の上の行に</P>を入れればＯＫ。
　if(navigator.appVersion.indexOf("Mac") == -1)がMacかどうかの判断をしています。Macだったら行間隔の指定をしないための判断です。で、Macじゃなかった時だけ、行間隔の指定をしています。
　'<!--P {line-height:135%;}/-->'が、行間隔の指定です。こうやって指定しておくと<P>と</P>で囲まれた部分の文章が、ここで指定された行間隔で表示されるようになります。
　この135%の所を150%にしたり200%にしたりすることで、行の間隔を大きくする事ができます。

■■■■■■■■■

　さて。「Macじゃなかったら」という条件付きで行間を指定してあるので、当然Macでは行間隔は変わっていません。
　先にも書いたように、MacはWinに比べてちょっと広めの行間で表示してくれます。通常の文章であればこのままで問題ないでしょう。でもちょっとオシャレに行間を広く取りたい場合があるかもしれません。
　とりあえずMacで行間隔を指定する場合には「必ず文字の大きさとペアで指定する」ことをお勧めします。具体的に言えばP {line-height:135%;font-size:16px}というような指定になります。
　スタイルシートの解釈には、ＩＥとＮＮでできる指定が違ったり、できるはずなのにできなかったりと、かなり問題は多いです。スタイルシートという規格自体があくまで推奨であり、守らなければいけない基準ではありません。とはいえ“真っ黒な字面”を避けて読みやすい文書を作るためには、大変有効な指定でもあります。
　「大丈夫かな」とどきどきしながらも、使ってみる事をお勧めします。

■■■■■■■■■

一歩進んだまめ知識
　私が確認した限りでは、行間隔の指定で表示がおかしくなるのはMac版のＩＥ３、ＩＥ４、ＮＮ４の３つのブラウザです(ＩＥ4.5を含む)。特にとんでもないのがＩＥ３。line-heightを単独で指定した場合、行間０が指定されたと見なされるのか、全ての行が重なって表示されてしまいました。ちょうど紙送りの壊れたワープロの印刷みたいな感じ、と言えば判ってもらえるでしょうか？ちょっと力の抜けるような表示でした。
　ＮＮ４はWin版でもスタイルシートを反映しない事が多いのですが、Mac版では「一部を反映し、一部を反映しない」という奇妙な表示を確認しました。早い話、最初10行は行間隔が広く、残りの行は狭く表示されたりします。これは他のタグとの組み合わせによる物なので断言はできませが、思わぬ表示になる可能性を否定できません。
　ＩＥ４では「指定が無視される」表示を確認しています。これも他タグとの組み合わせ、文書内リンクの有無などとも関連があるみたいですが詳細は不明です。
　最新版であるＩＥ５では、正常に行間隔を指定できるようです。