※や・などの付いた文章全体をインデント(字下げ)する方法

  • このエントリーをはてなブックマークに追加

字下げして、整った文章を成形する

段落が何文字分か下げることを「インデント」といいます。
文章の先頭に「・」や「①」など、記号があるとき、その段落は全て先頭を1文字分インデントして先頭をそろえたいですよね。

この様に文章の読みやすさが各段に変わる事が見てわかります。
なので先頭に記号を置いた時、文章全体を一文字分インデントして文章を作成しましょう・・・とは言ってもHTML上では難しいですよね。
改行する度に次の行の先頭へ地道に全角でスペースを付ける!・・・という方法もありますが、検索ロボットをメインに考えた時、文章の間に意味のない空白が入ることになるので不自然です。
またレスポンシブWEBデザインで作成したページの場合、画面幅によって文章の折り返し位置が変わるので、スペースを入れてインデントするのは現実的ではありません・・・

CSSを使ってインデントする

改行位置が決まっている場合は地道にスペースを入れればなんとか再現できますが、改行位置が決まっていない場合、インデントする方法がわからなくなってしまいます。
そんな時はCSSを使って解決しましょう!!

・アテンドがお手伝いをするのは、まずホームページ制作です。しかし、そこで終わりにしない。それがアテンドと一般の制作業者との違いです。
そこから5ヵ年計画でホームページを育て、目的を達成する事がお客様と私たちの目的。アテンドが目指すのはWeb制作だけではないのです。

・企業経営に様々なスパンの計画があるように、ホームページの公開・運営・更新にも短期・中期・長期の計画と戦略を持つことを、私たちは強くお勧めします。短期計画では、御社のインターネットにおける強固な基盤を築くためのホームページ制作と公開を目指します。一方、長期計画は御社が将来目指すところにホームページがいかにフィットするか、会社とホームページの理想像を合致させます。それでは、中期計画では何を(どこを)目指すのでしょうか?

どうでしょう?全体的に一文字分、インデントされて先頭が揃っています。
試しに見ている画面幅を変えてみてください。画面幅が変わっても、しっかりインデントが付いています。

CSSの解説

CSSではどのように書かれているのか気になりますよね?それでは実際にCSSを見てみましょう。

.indent{
  text-indent:-1em;
  padding-left:1em;
}

・・・・・たった2行で出来るんです!どうです?お手軽でしょう!
改行後の文頭が揃わないと困っていた事がウソのように解決できますよ!!

それでは続いて、具体的には何をしているのかを見ていきましょう。

CSSに書いた「text-indent」は、先頭の一行を字下げする時に使います。それをマイナス(-)にすることによって左へ動かし、次に「padding-left」で全体を右へ移動させています。
そして使われている記号「em」は一文字分という単位です。
これで記号の付いている先頭の一行だけを左へ一文字分動かし、全体を右へ動かすことで文章全体が一文字分インデントされて見えるデザインが作成できます!!
たった2行で出来るので、とてもお手軽です!!ぜひ使ってみてください。

ちなみに記号が全角文字ではなく半角文字の場合、「1em」という単位の部分が「0.5em」や「0.7em」といったように小数点の付いた数字に変化します。
「半角だから0.5emでいいだろう」と考えてはいけません。半角文字を使っていても、0.5emでは先頭が揃わないこともよくあります。実際に自分の目で見て、揃っていると思う数値を入力してください。

複数の段落を書く場合、都度「p要素」で段落付けを行う

先ほど説明した方法で使っている「text-indent」は、先頭の一行だけしか制御できません。
ひとつのp要素に改行で複数の段落を書きたいと思っても、先頭の1行しか左へ動かないので、思ったようなレイアウトにはならないので注意してください。
段落事にp要素を使ってマークアップするように心がけましょう。

ひとつのp要素にすべての段落を含めてしまったよくない例

・アテンドがお手伝いをするのは、まずホームページ制作です。しかし、そこで終わりにしない。それがアテンドと一般の制作業者との違いです。
そこから5ヵ年計画でホームページを育て、目的を達成する事がお客様と私たちの目的。アテンドが目指すのはWeb制作だけではないのです。
・企業経営に様々なスパンの計画があるように、ホームページの公開・運営・更新にも短期・中期・長期の計画と戦略を持つことを、私たちは強くお勧めします。短期計画では、御社のインターネットにおける強固な基盤を築くためのホームページ制作と公開を目指します。一方、長期計画は御社が将来目指すところにホームページがいかにフィットするか、会社とホームページの理想像を合致させます。それでは、中期計画では何を(どこを)目指すのでしょうか?

まとめ

・何文字分か字下げをすることを「インデント」という
・先頭に何か記号を置いた場合、文章全体にインデントを付ける事で1つの塊に見えるので、読みやすくなる
・文章全体へインデントを付けるにはCSSを使う
・「text-indent」にマイナス値を入れて一行目を左へ移動させる
・「padding-left」で左へ動かした分、全体を右へ移動させる
・段落ごとにp要素を使ってマークアップする

  • このエントリーをはてなブックマークに追加