質問

pdivってどこで使うの?

よく質問掲示板に行くと、「そこはpを使うところだろう」とか「pは改行するタグじゃない!」と言われます。でも、正直使い方がよく分からないんです。。
もう少し詳しく教えてくれませんか?

p はどう使えばいいの?

pは、英単語の Paragraphの頭文字から採っています。日本語訳は「段落」。こんな単語を聞くと、学校の作文を思い出しませんか? 頭を一文字字下げして、文書のまとまりごとに段落にする。

それは、作文の場合は、まとまりが見やすくするための工夫でした。ウェブ上では、だいたいサラッと斜め読みしたいですから、余白を多めに採る方法を採ります。つまり、一行空けるのです。*1

divは、いくつかの段落をまとめて、更に大きなまとまりにする場合に使います。*2

行間はbrの数で調整するんじゃなくて

もし、一行の文字数が多すぎて読みづらいと思ったら、br で強制改行するのではなく、スタイルシートで段落の「一行あたりの文字数」を調節します。

<style type="text/css">
 p { width: 40em; } /* 段落は一行あたり 40 文字にする */
</style>

行間を広げたい場合は、brを重ねるのではなく、スタイルシートで行間を調整します。

<style type="text/css">
 p { line-height: 1.5; } /* 行間を 0.5 行分の余白を設ける */
</style>

段落の間を広げたければ、スタイルシートで段落間の余白を多めにとります。

<style type="text/css">
 p { margin: 1em 0; } /* 段落の上下に 1 行分の余白を設ける */
</style>

言われたとおりにしたら、ページ全体のスタイルが変更されてやりにくいんですが・・・

スタイルシートには、クラスという便利なものがあります。これを、先に登場したdivと併用すると、ページの一部だけスタイルを変更することができます。

スタイルを適用したい部分を、例えば以下のようにします。

<div class="hoge">
 :(スタイルを変更したい箇所)
</div>

そして、例えばスタイルシートを以下のように変更します。

<style type="text/css">
 ''div.hoge'' p { margin: 1em 0; }
</style>

小説のサイトなので、表現上、どうしても強制改行(br)が頻出してしまいますが

構いません。それは表現上、どうしても改行したい箇所なのですから。

現実問題として、それに代わる手段は CSS3 を待たなければなりません。それが実際に使えるレベルになるのは、更に先のことになるでしょう。

そうそう、段落との違いに気を遣えば、より良い方向に進むかも知れません。

小説の書き方について、以下のようなサイトがあります。ご参考に。

編集者

原案 naka@sukiero 2005/10/11
作成 ばあど 2006/04/23

協力

みあか, さくや, eruk, ゆえ
(敬称略)


*1 そういうわけで、pは一行開けるためのものではありません。
*2 そういうわけで、divは改行するためのものではありません。

リロード   新規 編集 凍結 差分 添付 複製 改名   トップ 一覧 検索 最終更新 バックアップ   ヘルプ   最終更新のRSS
Last-modified: 2008-07-30 (水) 17:41:25 (3948d)