*

テキストの縦位置を設定する。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-メールアドレス入力確認付メールフォーム

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

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

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

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

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

animationでboxを動かしてみた。

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑