見栄えのために一行空けるには何を使えば良いか？

[新着] Webテンプレートを仮オープンしました

0   名前： にら藤真 ： 2006/04/06 15:21
　はじめまして、ここのサイトにはいつもお世話になっています。
　質問です。文章の中で一文を強調したいとき、自分はよく前後に一行空けます。

　こんな感じで。

　今まではbrを使ってきました。が、見た目を整える目的なのでどうかなと思い始めてきました。
　スタイルシートのボックスなどで調整しようともしましたが、よく考えるとdivは入れた時点で改行入ります。
当然、divにしたって見た目のために使うのはどうかという話になります……。
　spanで試してみると左右にしかマージン取れませんでしたし。
　ちなみに、文を見てお分かりでしょうがスタイルシートを使い始めたのはごく最近です。そもそもHTML全般に関して
初心者です。なのでいろいろ間違っていると思いましたが、とりあえず思いつくことを書いてみました。
自分の考えに「それは違う」とかご指摘があればどうかお願いします。
　一行空け、何か良い方法があれば教えて下さい。それともbrで良いのでしょうか。
1   名前： 匿名希望 ： 2006/04/06 15:21
span{
line-height: 2em;
}

で

〜〜〜〜〜〜〜〜〜〜〜〜<br>
〜〜〜〜〜〜〜〜〜〜〜〜<br>
<span>目立たせたい</span><br>
〜〜〜〜〜〜〜〜〜〜〜〜<br>
〜〜〜〜〜〜〜〜〜〜〜〜<br>
〜〜〜〜〜〜〜〜〜〜〜〜<br>

他にもやりようは色々あると思いますが
ひとつの提案として受け取ってください。
2emのところの数値は好きにどうぞ。

*普通に<p>〜</p>でもいいと思いますが
行間のサイズをいじれるので
こうしてみました。
2   名前： カヅサツ ： 2006/04/06 15:21  ［URL］
まずテキストを書き、それを HTML でマークアップし、最後に CSS で見栄えを整えるのと、良い HTML文書になります。

-----
満員電車の中で堂々と『快楽天』を読んでいる人を見かけました。
この国はもう駄目かもわからんね。
-----

まず、この 2行はそれぞれ段落であると見なせますので、p要素にします。
次に、『快楽天』を強調したい場合、強調は em要素となります。

<p>満員電車の中で堂々と <em>『快楽天』</em> を読んでいる人を見かけました。</p>
<p>この国はもう駄目かもわからんね。</p>

最後にに見栄えです。

多くのブラウザでは、p要素の前後に 1文字ほどの余白を入れてしまいますので、それを無くしてみましょう。

p{
margin: 0px;
}

次に強調の見栄えですが、

・強調の前後に改行を入れたい→ display: block;
・強調の前後に 1文字分の余白を入れたい→ margin: 1em 0px;
・多くのブラウザでは、em要素を斜体にするので、普通の文字にしたい→ font-style: normal;

CSS：
em{
display: block;
margin: 1em 0px;
font-style: normal
}
3   名前： にら藤真 ： 2006/04/06 15:21
　ご回答感謝です。どちらも試してみて、うまく使うことが出来ました。
　ついでにもう一つやろうと思っていたことも応用で成功しました。
　line-heightとは盲点でした。displayというプロパティも初めて知りましたが、
便利ですね。
　どうもありがとうございました！

　快楽天って何だろうと思ってググってみましたが、余計だったかも(^^;
一覧へ戻る