*

テキストの縦位置を設定する。line-height:を使用する。

公開日: : css3, html5

今回は、テキストの間隔について書きたいと思います。

テキストを書くときテキストの縦位置が気になったことはないでしょうか?

通常だとこちら。
デモ01

通常だと間隔が狭く感じます。
短いテキストなどの時は、もう少し間隔をあけた方が見やすくなります。

では、どのようにすればいいのでしょうか?
わざわざ1行ごとに間隔をあけてboxを作成するのでは、少し手間ではあります。

調べてみたら、簡単な方法がありました。
デモ02

この方法だと、簡単にきれいに整理されます。
この方法は、cssでline-height:というものを使用するだけでできます。

以下にソースを記載いたします。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テキスト縦位置の設定</title>
<meta charset="UTF-8" />

<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="wrap">
     <div id="box01">テキストの縦位置が50px間隔になっています。<br>テキストの縦位置が50px間隔になっています。<br>テキストの縦位置が50px間隔になっています。</div><!--box01-->
</div><!--wrap-->

</body>
</html>

cssファイル

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #000000;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#FFF;
}

#wrap{
	width:100%;
	margin:0 auto;
	position:relative;
	background-color: #ff00ff;
}

#box01{
	width:500px;
	height:100%;
	margin:0 auto;
	position:relative;
	background-color: #008800;
	text-align: center;
	line-height: 50px;/*ここでテキストの間隔が設定できます。*/
}

29行目のline-height:を記述するだけで、簡単に設定ができます。

是非試してみてください。
ダウンロード


関連記事

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑