*

テキストの縦位置を設定する。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会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

Message

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

PAGE TOP ↑