ひなこの楽天web制作研究所

< 新しい記事

新着記事一覧(全19件)

過去の記事 >

March 22, 2004

楽天html講座(9)：行間をあけてみましょ～

テーマ：ＨＴＭＬを使って楽天で何ができるのか．(160)

カテゴリ：カテゴリ未分類

今まで、<p>タグを中心に、スタイルシートを使ったレイアウトについていろいろと書いてきましたが、今日は、行間の設定を行ってみましょう。

普通にこう文章を書くと、行と行の間が、このくらいなんですが、スタイルシートでこの行間を設定できます。

line-height:160%;

です。ラインハイト～行の高さ。という指定です。単位はパーセントで指定します。文字の高さに対する割合として、一行の高さを指定します。160％が一行だとすると、文字が書いてある部分が100％で行間が60％になります。

他の単位での指定もありますが、とりあえず一つ覚えればよいでしょう。

具体的にどう書くかというと

<p style="font-size: 10pt; line-height:160%;border:solid 1px #FF9999; padding: 10px;">ここに段落の内容を書く。<p>

ここでは、行間の指定以外にも、今まで講義に登場した他の指定も入れてみます。

borderで枠線の指定。　枠の種類、太さ、色

font-sizeで文字（フォント）の大きさ

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

どうでしょうか。

文字の大きさや、行間で読みやすさが変わると思います。いろいろと試してみてね。

では、今日はこの辺で～。

お気に入りの記事を「いいね！」で応援しよう