ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

インデントの幅を調整する

文字の位置(インデント幅)を調整する方法

文字の1行目の位置(インデント幅)を調整するには、プロパティにtext-indentを指定します。

.indent {
text-indent:指定する値;
}

text-indentを使うことにより、1行目の文字位置を調整することができます。

例えば、下の文書のインデント幅を調整すると…。

[インデント調整前]

むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。

[インデント調整後]

むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。

このような感じになります。

1行目の位置が変わりましたね!
例えば、ホームページに小説や論文などを掲載する場合に使用すると、読みやすい文書にすることができます。
ちなみに上のサンプルは、25pxで指定しています。

HTMLとCSSの記述方法

インデント幅を調整するには、text-indentに値を指定します。

[CSSの記述例]
.indent {
text-indent:25px;
}

指定する単位は、px以外の単位を使用してもOKです。(em、exなど)
なお、マイナスの値をつけることも可能です。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>インデント幅の調整</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<p class="indent">むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。</p>

</body>
</html>

[表示サンプル]

むかしむかしあるところに、おじいさんとおばあさんが住んでいました。おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが洗濯をしていると、川の向こうからドンブラコ、ドンブラコと大きな桃が流れてきました。

長い文書など書く場合、適切にインデントを調整すると読みやすくなります。必要に応じて使ってみましょう。

覚えておきたいポイント

インデントはCSSで

つい全角スペースを入力してインデントを表現したくなってしまいますが、CSSのほうがより細かに調整することができます。

ページの背景色を変える
« 前のページへ 文字の間隔を調整する

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。