b-essence

気になること★いろいろなジャンルで更新していきます。

css・html

htmlで行間を変える方法

2015-01-28

行間(行の高さ)を指定するプロパティです。

line-height:

小さい文字で、行間もくっついて読みにくいサイト様に出くわすことがあります。私はそれだけで、直帰!
行間は、ある程度の余裕を持たせた方が読みやすいですね。
それでは、行間を変える方法です。行間を変えるということは改行幅が変わるという事です!!

????????

ページ全体の行間を指定

htmlに直接記述する場合は、<head>と</head>の間に下記のタグを入れます。ページ全体に適用されます。

例 ↓↓ ページ全体を150%の行間にする場合

<style type="text/css">
<!--
body {line-height: 150%;}
-->
< /style>

line-height: 数値

line-heightの後には数値が入りますが、指定できる主な数値には
px、%、em などがあります。

px ピクセル 絶対的単位 1px = 画面上の1ピクセル
% パーセント 相対的単位 親要素の文字サイズに対する割合
em エム 相対的単位 1em = 1文字分の長さ
ブラウザの文字基準を1emとした値
親要素の文字サイズで変化する

 

相対的単位は親要素のフォントサイズを基準に対する比率です。
親要素に何も指定しなかった場合、1emは16px 100%は16pxになります。

外部スタイルシートで行間の指定

cssに記述することによって、段落・指定した範囲など部分的に行間を変えることもできます。さらにhtmlがスッキリするのでメリットが大きいですネ。

cssのbodyに記述することで、ページ(サイト全体)全体の行間を指定します。
css

body {
line-height: 150%;
}

<p>段落要素の行間を変える。
css

p {
line-height: 150%;
}

指定した範囲の行間を変える。<div> <p> にクラス名を割り当てる
css

.sample {
line-height: 150%;
}

html

<div class="sample">ここへ文章</div>

html

<p class="sample">ここへ文章</p>

改行幅のウェブ上での見え方をご確認ください。

57

????????


 

-css・html

関連記事

画像を表示させるタグ

基本-画像を表示させるタグ <img src=”画像のアドレス”> 上記は画像を表示させる基本的なタグです。何も設定していない状態では、画像は左寄せに表示されます。 …

htmlで色を設定する方法

htmlで文字色や背景色を指定する場合、以前はhtmlに直接<font>タグを使って記述することもありましたが、<font>タグは「非推奨要素」となっています。またHTML5で …

画像を横に並べる方法

画像を横に並べて表示する方法 画像を横に並べる方法は何種類かあります。 一番簡単な方法ですが、改行を入れずにタグを下記のように記述します。 この場合、画像と画像の間に半角スペースができます。 < …

htmlで文字を太字にする

<strong> <b> タグの違いについて 文字を太字にするタグには <strong>タグ と <b>タグ があります。 このふたつのタグ <s …

フォントをカスタマイズ

ブログやホームページのフォントを変更してイメージを変える タグで囲って個別にフォント変更はできますが、全体に適用させたい場合はcssスタイルシートのbodyに使用したいフォントを指定します。ユーザーの …

スポンサーリンク

スポンサーリンク