字下げする!CSSでインデントする方法【初心者向け】

初心者向けにCSSでインデントする方法について解説しています。サイト内の文章を字下げしたい時に役立つので、覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今回はCSSでインデントする方法を紹介します。

Webサイトの文章を字下げしたいという時に使えるので、覚えておきましょう。1文字目をインデントする方法、2行目以降の最初の文字をインデントする方法について解説しています。

そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

田島メンター!!文字列の最初にインデントを入れたいのですが、どのようにスタイルを指定すればいいんでしょうか~?

田島悠介

そういうときはtext-indentを使うといいよ。

大石ゆかり

インデントの長さも指定したいんですが……

田島悠介

text-indentプロパティでは値でインデントの長さを決めるので、好きな長さにすることができるんだ。さっそくやってみよう。

 

目次

 

インデントとは

インデントとは、「1文字下げるもの」のことを言います。

国語の教科書や作文などで、行頭1文字下げることをインデントと言います。

今回は、HTMLを書く際に使え、サイトのコンテンツで行頭1文字下げたいと思ったときに使うことができるでしょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

インデントを指定する書き方

CSSでインデントを指定する書き方を確認しましょう。

CSSサンプルコード

p{
  text-indent: 1em;
}

「text-indent」は最初の1文字にしか適用されません。CSS内にある「1em」というのは1文字分を示すので、1文字分のインデントがされます。

1文字分のインデントは最初の1文字にのみ適用されているために、最初の行がインデントされているように見えます。

 

田島悠介

text-indentの基本の書き方だよ。

大石ゆかり

この場合は段落pに、1em分のインデントが付くことになるんですね。

田島悠介

次は実際にインデントを設定して、画面で確認してみよう。

 

実際に書いてみよう

実際にコードを書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS インデント</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
  </head>
  <body>

    <h1>Sample</h1>
    <p>
    インデントされます。<br />
    インデントされません。
    </p>

  </body>
</html>

CSS

p{
  text-indent: 1em;
}

表示を確認してみると
スクリーンショット 2016-08-30 17.28.50

2行目以降を1文字下げる方法

2行目以降だけを下げたい場合の書き方を説明していきます。

実はこの「text-indent」、マイナスを表すこともできます。

違いが分かるように、「1em」と「-1em」を同じHTML内に入れます。

 

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS インデント</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
  </head>
  <body>

    <h1>Sample</h1>
    <p class="indentfront">
    1文字目がインデントされます。<br />
    ここはインデントされません。<br />
    ここはインデントされません。<br />
    ここはインデントされません。
    </p>
    <p class="indentback">
    ここはインデントされません。<br />
    2文字目以降がインデントされます。<br />
    2文字目以降がインデントされます。<br />
    2文字目以降がインデントされます。
  </body>
</html>

 

CSS

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

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

Webブラウザで確認してみましょう。

スクリーンショット 2016-08-30 17.29.43

今回は同一ページの<p>に異なるCSSを適用させたかったので「class」を使いました。

「-1em」とすることで、実際にインデントしているのは最初の文字だけですが、2行目以降がインデントすることができます。

 

以上、CSSでインデントする方法について解説しました。

 

田島悠介

値をマイナスにした場合の例も見てみたよ。

大石ゆかり

最初はインデントされず、逆に2行目以降がインデントされる形になるわけですね。

田島悠介

どれぐらいインデントするかというのはemなどの単位以外に、%で指定することもできるんだ。場合によって使い分けてみよう。

大石ゆかり

なるほど、活用してみます。ありがとうございました!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。