*

テキストの縦位置を設定する。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:を記述するだけで、簡単に設定ができます。

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


関連記事

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

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

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

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

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

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

本日からblogを書きます。

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

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

Message

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

PAGE TOP ↑