段落のインデント【text-indent】:CSS入門

ブログが作りたい!CSS入門 > 段落のインデント【text-indent】:CSS入門

段落のインデント【text-indent】:CSS入門

段落のインデント【text-indent】:CSS入門

CSS入門(18)

今回は、段落にインデントを設定します。ちなみに、インデントと言うのは、文章(段落)の1文字目を字下げすることです。

読みやすい文章を目指して、お話は、次の順番で進みます。

▲ページの先頭に戻る

段落にインデントを設定する方法

1:前回までのお話

(01)

前回は、idセレクタとclassセレクタについてお話しました。

ブラウザ表示

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

▲ページの先頭に戻る

2:段落にインデント(text-indent)を設定する

(02)

お話の都合上、ちょっと文章を長くすることにします。

HTMLファイルを開いて、文章の箇所を、インデントが分かりやすくなるくらいの長さにしてください。適当に、お好きなように。

(03)

ブラウザで表示してみましょう。次のように、文章が 2行になってもインデントしていないことを確認しておきます。

ブラウザ表示

(04)

インデント(text-indent)は、次のように指定します。単位にemを使うのは、ちょうど1文字分くらいになるからです。

p { text-indent: 1em; }

CSSファイルを開いて、実際に<p>タグにインデント(text-indent)をかけてみましょう。

記事「文字サイズの変更【font-size】(2):CSS入門」で、font-sizeではバグがあるので使わない旨を書きましたが、こんなときは、使うと便利なんだなぁ。

(05)

ブラウザで表示してみましょう。インデントされているはずです。

ブラウザ表示

▲ページの先頭に戻る

3:問題が起こります

(06)

インデントはされたけれど、ちょっと問題が起きます。

<table>タグ内をご覧いただくと分かると思うのですが、表内の文字までインデントされています。がびーん・・・さて、どうすれば解決できるでしょうか?

ブラウザ表示

(07)

どうしてこんなことが起きてしまったかと言えば、適用先が<p>タグすべてに対してインデントをかけているからです。

つまり、紹介文の方だけ、インデントできれば良いわけですから、次のようにしてみてはいかがでしょうか。

「#blog-pre」は、前回の記事「idセレクタ、classセレクタとは?:CSS入門」で紹介しているので覚えていると思いますが、半角スペースを空ける書き方は覚えているかしら?

これは、記事「継承と子孫セレクタとは?:CSS入門」でお話した子孫セレクタという書き方です。

こうすることで、「blog-preというグループ内の<p>タグだけに、インデントをかけてくださいね」という指定になります。

▲ページの先頭に戻る

4:おまけ

(08)

文章が、どうにも横の罫線に近過ぎて、息苦しい印象を感じさせていないかしら?少し左右に余裕を持たせることにしましょう。

どうしたものか、アイディアはありますか?

ブラウザ表示

(09)

左右に、marginを入れてみてはいかがでしょうか。例えば、次のようにします。

なかなか、良い感じになりました。

ブラウザ表示

▲ページの先頭に戻る

次回予告

次回は、行の間隔(line-height)について書く予定です。読みやすい文章にしていきましょうシリーズです。

▲ページの先頭に戻る

関連記事

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

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

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

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

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

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

12:レイアウト

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

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/04/29 更新日:2008/04/29

« 「idセレクタ、classセレクタとは?」|「行の間隔【line-height】」 »

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

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

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

ダメモト のつもりで。

<p>タグにインデントが全然表示されなかったので
font-size150% にしてみたら
でっかく表示されてインデントがかかりました。
なぜでしょうか。
「表」の中は正常です。
ブラウザがかしこいのでしょうか。

インデントがうまくいかないだなんて!(がびーん)

sachiさん、こんばんは。
コメントありがとうございます。

インデントがうまくいかなかったのですか~・・・むむぅ。
私も改めて、試してみましたが、私の環境では、
インデントが出来てしまいます。困った。

OSは、WindowsXPです。
Firefox2.0と、InternetExplorer6では、チェックしてあります。

私の想定外のところで、何か問題があるみたいです。

sachiさんの環境を教えていただいても、
こちらでは検証できないので、何とも方法がないかなぁ。

font-sizeを大きくしたら、インデントが有効になったというのも、
よく分からないですね~。

さらに「表(table)」の中は、
インデントがかからなかったわけですよね。

ちょっと、現象があり得ない感じです。

もし良かったら、HTMLとCSSのコードを、
メールなどで送付していただけると、
何か分かるかもしれません。

パソコンの環境についても、差支えがなければ、
教えていただけると、何か分かるかもしれません。

No title

いつも丁寧な回答を頂きまして
ありがとうございます。

OSはVista、IEは7 ということでしょうか。
次のline-heightとletter-spacingを
それぞれ140%と0.3emにしてみたら
Firefoxでは変化無し、ヴィスタ画面は
「行」と「文字間隔」が広くなりました。

インデントは相変わらずだめです。
但し 行や間隔が広くなったために
最初の1文字はインデントされました。

OSの違い???

sachiさん、こんばんは。
コメントありがとうございます。

他のブラウザでもチェックしてみましたが、
私の環境では、問題が起こりません。

 Internet Explorer 7
 Opera 9.27
 Safari 3.1.1

OSの違いによって、問題が起こるほどのコードでは、
ないはずなんですが、状況からみると、その違いしかないですね。

line-heightとletter-spacingもですかー。
Vista環境がないので、どうにも分からないっすねぇ。

行や間隔が広くなって、インデントされたということであれば、
とても文章を長くして試してみてはいかがでしょうか。

あるいは、
ブラウザの横幅を縮めてみないと、分かり難いはずです。

とりあえず、コーディング時には、混乱するといけないので、
Internet Explorerなど他のブラウザを使わないのも、
ポイントでしょうか。

集中して、Firefoxで、どう表示されるか?だけテストした方が、
良いかもしれません。

あとは、可能性は低いですけれど、
ブラウザのキャッシュを読み込んでいる場合もあります。

あやしい感じがした場合は、リロードを何度かクリックするか、
shiftキーを押しながら、リロードをクリックしてみると、
良いかもしれません。

あとは何かしら。
コードがまったく同じでないのだとしたら、
半角全角、スペース、区切り文字などに誤りがないか、
再度チェックしてみるなどもしてみると、良いかもしれません。

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/284-5253b1b1
 | トップページ | 

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
ありのごとくあつまりて