HTMLで２行目以降を字下げする、または１行目だけ字上げする

　つまりは、このブログの落穂拾いの体裁ですね。これをどうやったか、という話。サンプルは右のスクリーン･ショットをご覧ください。

　<br/>で改行した所も、行の文字数が多くて１行に入りきらなかった所も、改行した時は同じように１字下がります。試しにブラウザの画面の幅を狭くして、ご確認下さい。

　「んなモン HTML のソース見りゃ一発じゃん」と言われたらそれまでだし、実際にソースを見ればスグわかります。ちなみに Firefox または Internet Explorer をお使いなら、 CTRL＋U でソースが見えます。

　仕掛けは簡単で、以下のタグで囲ってるだけです。

<div style="margin-left: 1em; text-indent: -1em;">
　…
</div>

　具体的には、こんな感じの HTML になります。

<div style="margin-left: 1em; text-indent: -1em;">
<p>●(狩猟採集民の)ヤノマミの間では、<br />
成人の15％が部族間または部族内の暴力で死んでいる。</p>
<p>○暴力の多くは男性によって起きる。<br />
現代ばかりでなく、狩猟採集民や13～14世紀のイギリスの犯罪統計は、根本的に同じパターンを示す。<br />
同性間の殺人が男性によって行なわれた確率は、92％～100％になる。</p>
<p>●考古学や現代の文化人類学によると、自然状態での成人は、約15％が暴力で死ぬ。<br />
男性に限ると、約25％となる。<br />
なお、第二次世界大戦で失った人口は、ソ連が全人口の15％、ドイツが５％だ。</p>
</div>

　結果、次のような体裁になります。

●(狩猟採集民の)ヤノマミの間では、
成人の15％が部族間または部族内の暴力で死んでいる。

○暴力の多くは男性によって起きる。
現代ばかりでなく、狩猟採集民や13～14世紀のイギリスの犯罪統計は、根本的に同じパターンを示す。
同性間の殺人が男性によって行なわれた確率は、92％～100％になる。

●考古学や現代の文化人類学によると、自然状態での成人は、約15％が暴力で死ぬ。
男性に限ると、約25％となる。
なお、第二次世界大戦で失った人口は、ソ連が全人口の15％、ドイツが５％だ。

<div>～</div> は、その間の段落に対し、一定の体裁を指定する際に使います。指定する体裁は、<div>の中の style= で指定します。ミソは、ここで "margin-left: 1em; text-indent: -1em;" と指定している点です。

　"margin-left: 1em;" は、「１字分、字下げする」という指定です。ちなみに "margin-left: 2em;" とすると、２字分、字下げします。単純に "margin-left: 1em;" だけだと、こんな体裁になります。

●(狩猟採集民の)ヤノマミの間では、
成人の15％が部族間または部族内の暴力で死んでいる。

　１行目も、１文字分、下がっちゃうんですね。これを直すために、"text-indent: -1em;" を指定します。マイナスの値を指定するのがミソです。text-indent は、１行目の字下げ量を指定するものです。これにマイナスの値を与えると、字下げではなく字上げ量を指定した事になりいます。

　つまり、予め全体を１字分だけ字下げしておいて、１行目だけ１字分を上げる、そういう手口を使っています。姑息ですね。

　なお、ココログの記事作成画面の「HTMLの編集」で HTML をいじる際は、画面を切り替えたり保存したりする前に、テキスト･エディタに全テキストをコピー＆ペーストしておく事を薦めます。HTML のタグの対応が取れていなかったりすると、編集したテキストの一部または全部が消える場合がありますので。