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

関連記事

フォントをカスタマイズ

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

htmlでソースを非表示にするタグ

<!– –> ・・・・・上記のタグの中に入れた文字が非表示になります。 非表示にするタグ htmlソースの中にメモを入れられたら便利ですよネ ソース中にコメント・メモを入れることができ …

htmlとは?

htmlは、HyperText Markup Language(ハイパーテキストマークアップランゲージ)の略です。 このhtmlは、ウェブページ www(ワールド・ワイド・ウェブ)を作成するための言語 …

htmlで特定ページへ自動ジャンプさせる

html 特定ページへ自動ジャンプさせる <meta>タグを使って現在のhtmlページを特定のページへ自動ジャンプさせることができます。 サイト移転の時などに使いますね。××秒後にページを …

htmlで色を設定する方法

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

スポンサーリンク

スポンサーリンク