文字の間隔【letter-spacing】:CSS入門

ブログが作りたい!CSS入門 > 文字の間隔【letter-spacing】:CSS入門

文字の間隔【letter-spacing】:CSS入門

文字の間隔【letter-spacing】:CSS入門

CSS入門(20)

今回は、letter-spacingを使って、文字の間隔を調整します。

お話は、次の順番で進みます。

▲ページの先頭に戻る

文字の間隔(letter-spacing)を設定する

1:前回までのお話

(01)

前回は、line-heightを使って、行の間隔を調整しました。

ブラウザ表示

以下、前回までのCSSコードです。

▲ページの先頭に戻る

2:文字の間隔(letter-spacing)を設定する

(02)

文字の間隔は、文字と文字の間になります。

文字の間隔は、文字と文字の間のこと

(03)

letter-spacingは、例えば次のように書きます。

p { letter-spacing: 0.1em; }

0.1emというのは、「文字の高さを 1とすると、その10分の1を文字の間隔にしますよ」と言うことです。例えば、1emにすれば、1文字分くらいの間隔があくことになります。

それでは、letter-spacingを追加しておきましょう。

(04)

さらにブラウザで表示してみましょう。

変更が分かり難い場合は、0.2、0.3など数値を大きくして、ちょうど良い数値を探してみてください。

ブラウザ表示

キュウキュウとしていると読みにくい印象を与えます。少し余裕をもたせると、多少文字サイズが小さくても読みやすく感じられます。

▲ページの先頭に戻る

次回予告

次回は、文字の左右・中央揃え【text-align】について書く予定です。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/05/03 更新日:2008/05/03

« 「行の間隔【line-height】」|「文字の左右・中央揃え【text-align】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/286-7e1c969e
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて