« ジョン・スコルジー「戦いの虚空 老人と宇宙5」ハヤカワ文庫SF 内田昌之訳 | トップページ | トマス・ホーヴィング「にせもの美術史 鑑定家はいかにして贋作を見破ったか」朝日新聞社 雨宮泰訳 »

2014年8月22日 (金)

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

B

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

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

 「んなモン 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%、ドイツが5%だ。</p>
</div>

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

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

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

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

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

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

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

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

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

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

|

« ジョン・スコルジー「戦いの虚空 老人と宇宙5」ハヤカワ文庫SF 内田昌之訳 | トップページ | トマス・ホーヴィング「にせもの美術史 鑑定家はいかにして贋作を見破ったか」朝日新聞社 雨宮泰訳 »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/201750/60192518

この記事へのトラックバック一覧です: HTMLで2行目以降を字下げする、または1行目だけ字上げする:

« ジョン・スコルジー「戦いの虚空 老人と宇宙5」ハヤカワ文庫SF 内田昌之訳 | トップページ | トマス・ホーヴィング「にせもの美術史 鑑定家はいかにして贋作を見破ったか」朝日新聞社 雨宮泰訳 »