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

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

文字の間隔を調整する

文字の間隔を調整する方法

文字間(文字と文字の間の間隔)を調整するには、プロパティにletter-spacingを指定します。

.mojikan {
letter-spacing:指定する値;
}

letter-spacingを使うことにより、文字と文字の間の間隔を調整することができます。

例えばこちらの文書。

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

上の文章は、文字と文字の間に隙間がなく、とても窮屈です。これではとても読みづらいですね。
そこで、letter-spacingを使って文字間を調整します。

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

文字と文字の間の間隔が広がり、窮屈さが解消されました!
※上記文書はわかりやすいように、やや広めの文字間に設定しています。

文字間を調整した図

このように、文字間を調整することにより、読みやすい文書を作ることができます。

文字間の調整方法と記述例

[CSSの記述例]
.mojikan {
letter-spacing:5px;
}

指定する単位は、px以外の単位を使用してもOKです。(ptやem、exなど)
※私はpxもしくはemで指定することが多いです。

なお、マイナスの値をつけることも可能です。

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

</body>
</html>

[表示サンプル]

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

前ページの「行間を調整する」や、後述の単語間の調整と一緒に指定することにより、ゆったり広々とした文書を作ることも可能です。
※もちろんその逆も可能です。

ホームページの雰囲気や読みやすさに気をつけて、読みやすい文書に仕上げましょう。

覚えておきたいポイント

できるだけCSSで指定する

文字間を調整する際は、ついつい「文 字 間」のようにスペースを入れて調整しまいがちですが、できるだけ文字間はCSSで調整するようにしましょう。空白が入っていると音声読み上げ機能やソフトが対応できないなどのトラブルが発生する場合があります。

単語間の調整

word-spacingを使えば文字間だけではなく、単語間の調整もすることができます。

.tangokan {
word-spacing:指定する値;
}

なお、word-spacingは単語と単語の間の幅を調整するので、日本語の文書ではうまく機能しない場合があります。
word-spacingを使う場合は、日本語以外の文書に適用するようにしましょう。

日本語は指定不可

単語間の調整方法

I love the ThinkPad from IBM.

上の文章の単語間の間隔を調整してみましょう。
「単語間の間隔」なので文字間は広がりません。「単語と単語の間の間隔」が広がります。

[CSSの記述例]
.tangokan {
word-spacing:10px;
}
[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="tangokan">I love the ThinkPad from IBM.</p>

</body>
</html>

[表示サンプル]
I love the ThinkPad from IBM.

「単語」と「単語」の間に、10pxの間隔が設けられました。

単語間を調整した図

日本語文章ではうまく機能しない場合があるので使う機会は少ないかもしれませんが、覚えていると便利なプロパティです。

覚えておきたいポイント

文書は見やすく、読みやすく

日本語文書ではword-spacingプロパティはうまく機能できません。もともと英語を前提に作られたものなので、日本語のような複雑な言語はどこからどこまでが「単語」なのかを判別できないからです。
word-spacingを使う場合には、できるだけ日本語以外の文書に適用するようにしましょう。

インデントの幅を調整する
« 前のページへ 行間を調整する

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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