*

テキストの縦位置を設定する。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

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑