インデントは字下げのことです。段落のはじめに入れる一字分のスペースです。

インデントとは 🔗

日本語で文章を書くとき、インデント（字下げ）という作法があります。段落の冒頭を一字分だけ空けることで文章が読みやすくなります。たとえば400字の作文用紙に感想文を書くときにもインデントしますよね。

HTMLにおけるインデントの価値 🔗

HTMLで文章を書くとき、インデントせずに書かれることがあります。そもそもHTMLは英語圏が発祥の技術です。日本語特有の作法に最適化されていないのも仕方ないでしょう。ですがネット上の文書はすべてHTMLで書かれており、その影響力はとても大きいです。もしHTMLでも読みやすい日本語の文書が増えたら嬉しいですよね。そのためにインデントが非常に有効です。簡単に使えるわりに効果が高いのです。

人が読む文書には２種類あります。

  • 実用文（ハウツー系など）
  • 創作文（小説など）

いずれも目的は違いますが、どちらもインデントを使うことで読みやすくなります。HTMLは文種を問わず、どちらも表現できます。つまりインデントを身につければ実用文や創作文といった異なるジャンルの文章でも等しくクオリティを高められるのです。それをHTMLで表現すれば世界中に発表できます。

HTML上でインデントする方法はいくつかありますが、私は全角スペースによるインデントを推奨します。その理由は、それが最も簡単かつ自由度が高いからです。方法についての詳細は後述するとして、まずはインデントの価値から順に考えてみましょう。

速読しやすくなる 🔗

インデントにより段落のはじめが視覚的に目立つようになります。すると速読できるようになって読む効率があがります。

たとえばハウツー系のような実用文のときはパラグラフ・ライティングし、段落の最初で要約文を書きます。パラグラフ・ライティングは、段落のはじめにある一文だけを読めば後続の文を読まずとも概要をつかめる構造にする書き方です。

ここで速読をするとき、インデントが役立つでしょう。冒頭にスペースがあるためパッと見て目立ちます。迷わず瞬時に冒頭がわかるため速やかに要約文に目を通せるというわけです。

折り返しとの区別がつく 🔗

インデントは折り返されたかどうかを判別するのにも役立ちます。

折り返しは、段落の文が長くなって画面の端まできたら、その続きを次の行に表示する機能です。折り返されたとき、次の行の冒頭にインデントはありません。そんなとき、もし段落内に<br>で改行される部分があったら、折り返されたものなのか、それとも<br>で改行されたものなのか一見して区別がつきません。これは速読するときに厄介です。そこで<br>の直後にも全角スペースを入れてインデントしておけば、折り返された部分と区別ができるようになって読みやすくなります。

形式段落 🔗

日本語には形式段落というものがあります。英語圏にはありません。HTMLは英語圏のものですから段落であるパラグラフをあらわす<p>要素さえあれば十分です。ですが日本の形式段落をあらわすHTML要素はありません。形式段落は<p>の中で<br>をして、その直後に全角スペースを入れることで表現します。

段落（パラグラフ）

<p>　これは段落です。ひとつの段落ではひとつの話題について語ります。段落内ではテキストは改行されることなく続きます。インデントもしません。英語圏の文章はそういうふうに書きます。</p>

形式段落

<p>　これは段落です。<br>　ですが日本語には形式段落というものがあります。同じ段落内で改行とインデントがなされます。</p>

上記のHTMLをブラウザで表示したとき、テキストが画面の端まできたら折り返されます。実際にどこで折り返されるかは画面サイズなどによって代わります。それは次の行となる部分を統一することが不可能であることを示しています。不意に折り返されたとき、冒頭にインデントがなければ、折り返されたのか、形式段落として改行されたのか見分けがつきません。これは速読するときの弊害となるでしょう。

そこで、段落や形式段落の冒頭で必ずインデントするようにします。すると速読できるようになるでしょう。

形式段落でも速読する 🔗

もし行頭にスペースがあれば、そこが段落のはじめだと視認できます。段落のはじめには要約文が書かれているため、そこだけ読んで概要を把握し、次のインデント箇所に目を移すことで次々と要約文だけを読んでいけます。もし行頭にスペースがなければ段落のはじめではありません。折り返された部分であり、文章の途中であり、要約文ではありません。速読するときは読み飛ばしていい所だと判断できます。

段落の冒頭にインデントを入れることを徹底すれば、行頭のスペースをみた瞬間にすぐ、そこが段落の冒頭であり要約文であるとわかります。インデントすると速読しやすくなるのです。

スマホでも読みやすくなる 🔗

折り返しは頻発します。とくに昨今はスマホのように小型ディスプレイが増えているため、折り返す機会は増していると言えるでしょう。HTMLでレスポンシブ対応するのは大変ですが、そんな大仕事をしなくてもいいのです。インデントするだけでも読みやすくなります。インデントする価値は大いにあるでしょう。

テキストの内容に集中できる 🔗

インデントすれば読むときも書くときも楽になります。余計なことに思考リソースを割かれずコンテンツに集中できます。

テキストには書き方や表現方法が無限にあります。たとえば2chのようにAA（アスキーアート）を描くこともできるでしょう。単なるテキストであっても、その表現方法は無限大です。これは一見すばらしいことのように思えますが、じつは文章が読みづらくなる要因にもなるのです。

たとえばスペースや改行の使い方だけでも、以下のように書くことができてしまいます。

吾輩は
　　　猫である

名前はま
　　だ
ない

もちろんこんなふうに文章を書くことはないでしょう。けれどそういう入力もできてしまいます。システム的に不可能ではないけれど、人にとっては読みにくい表記もできるのです。

これを避けるため、先人たちは読みやすい文章を書くためのルール、作法を考え出しました。そのひとつが字下げ（インデント）です。他にもたくさんルールがあります。そのルールや、それを自動的に処理すること、またはそのツールを禁則処理といいます。ここではインデントだけを取り上げます。

禁則処理と聞くと、きっと古いオタクの人は涼宮ハルヒの憂鬱に出てくる未来人、朝比奈みくるの決めゼリフ「禁則事項です」を思い出すでしょう。けれどそれは禁則事項であって禁則処理ではありません。お間違えのないように。

禁則処理はたとえば小説用に「行頭は全角スペースか鉤括弧「か――――のいずれかであること」のようなルールを課します。

禁則処理のおかげで、パッと見たときの少ない視覚情報だけで文章全体の構造をつかめるようになります。文章を読むとき、文章の意味を咀嚼することに注力できるのです。形式に惑わされずに済みます。この形式は一体何を意味するのか。なにか特別な意味があるのではないか。といった無用な疑問をもつ余地がなくなり、ただ文章に示された言葉の解釈だけに集中できるのです。

たとえば以下のように書かれたら、まるで死にかけているから一言一言話すのに時間がかかっているかのように読み取れなくもありません。少なくとも、この書き方のほうが目立ってしまい、文章が頭に入ってきませんよね。

吾輩は
　　　猫である

名前はま
　　だ
ない

特別な意図がないかぎり、文章は読みやすい形式で書くべきです。次のように。

　吾輩は猫である。名前はまだない。

これで素直に文章に集中できます。すると「いや、なんで猫がしゃべってんだよ」と、思うでしょう。本来、作者が読者に注目してほしい内容がすんなり伝わってきます。そしてすぐに「ははーん、これは猫が主人公の話なんだな？」と意図が読み取れます。この冒頭で興味をひくことができたら、続けて読み進めてくれるでしょう。なので冒頭を視覚的に目立たせるインデントは非常に有効なのです。

ルールは文を読みやすくする 🔗

人はテキストから意味を読みとるまでに３ステップ必要です。

  1. 形式をよむ
  2. 文章をよむ
  3. 意図をよむ

読みとる必要があるものを減らす。すると読みやすくなる。そのためにルールを決める。ルールは特定の形式に、特定の意味をもたせる。これにて形式だけをみれば意味がわかるようになる。文章を読まずとも形式だけをみて意味がわかるようになる。そういうカラクリです。

ルールを決め、それに従って統一する。例外を排除することで可能性がひとつに絞れる。これにて意味が定まり理解できるようになる。

パターン分岐がなくなるため、それを分析するために思考リソースを割かれることがなくなる。だから理解しやすくなる。読みやすくなる。

もし短いテキストを見ただけでルールを確定できたら、それだけ素早く意味を理解できます。インデントはその代表格といえるでしょう。

ルールを定めたら、もうルールを考える必要もありません。ただそれに従えば最適解となります。書くときも読むときも楽ですね。

人は楽であるほど、それをしやすくなります。なので禁則処理のルールに従えば、書くのも読むのも楽になります。その代表格であるインデントは費用対効果の高い、非常に利用価値があるルールと言えるでしょう。

インデントがすごいワケ 🔗

インデントについておさらいしましょう。

  • 段落の冒頭は要約文である
  • 段落の冒頭に全角スペースを入れる

この２つを同時に満たしたとき、強力なコンボになります。意味を理解するスピードが格段にあがります。その理由はもうおわかりですね。本なりディスプレイなりをパッと目でみたとき、インデントがある箇所は位置がずれているため一目瞭然です。そこに自然と目がいきます。インデントが目印になるのです。その最初の文が要約文であれば、インデント箇所から最初の句点。までの一文を読むだけで、おおよの言いたいことが把握できます。あとはそれをすべての段落で繰り返していけば、そのページ、その章、その本全体の概要がつかめるというわけです。

形式と文章の両面において、すばやく理解できるように工夫されているのです。これがインデントの力です。パラグラフ・ラインティングの威力です。彼らコンボ技の強さです。インデント、使いたくなったでしょう？

インデントしたい時としたくない時がある 🔗

常にインデントしたいかというと、そうではありません。インデントしたくないときもあります。

たとえば小説です。小説には会話文と地の文の二種類あります。地の文はインデントを入れますが、会話文はインデントを入れず「ではじまり」で締めます。また、――――そのとき、神風が吹いたのように――――ではじめるときもインデントを入れません。これは地の文の一種です。おなじ地の文でもインデントするときと、しないときがあるのです。

　これは地の文である。主人公の心の声や、ナレーションによる状況説明などを書く。

「会話文だよ。声に出した言葉を書くのさ」

――――これも地の文

では、インデントしたいときと、したくないときの二つを満たすためには、どう実装するのがベストでしょうか。マークダウンからHTMLへ出力する想定で考えてみます。

どう実装するか 🔗

インデントはマークダウンに書かれた全角スペースをそのまま出力するのがベストだと考えます。

CSSでインデントするのは面倒くさい 🔗

CSSにはインデントを指定するtext-indentプロパティがあります。また、contentプロパティでもいいでしょう。

text-indent: 1em;

content: '　';

問題はCSSセレクタです。どのHTML要素に対してそれらのインデントを適用するのか。これを選ぶのが面倒です。

すべての段落にインデントをするだけなら簡単です。次のいずれかで書けます。

p::before { text-indent: 1em; }

p::before { content: '　'; }

ですが要件には、インデントしたくないときもあるのです。インデントしたいときと、したくないときを切り分ける必要があります。このせいで面倒なのです。

HTML要素だけでインデントの有無を判別するのはむずしい 🔗

HTML要素 用途
<p> 段落。地の文。
<i> 会話文など。 
p::before { content: '　'; }
i::before { content: '「'; }
i::after { content: '」'; }

<p>これは地の文である。</p>
<i>会話文だよ</i>
<p>――――これも地の文</p>

上記のようにすると――――これも地の文までインデントされてしまいます。これはインデントしたくないのに！

だからといってインデントしたいところにだけCSSを指定しようとすると、一気に面倒くさくなります。

.indent { content: '　'; }

<p class="indent">これは地の文である。</p>
<i>会話文だよ</i>
<p>――――これも地の文</p>

class属性値indentを付与するか否かで、インデントするかどうかを場合分けします。では、マークダウンで書かれた記事から、どうやってそれを判別するのですか？　頑張ってその仕組みをプログラミングするしかありません。たかがインデントごときに絶対そんなことしたくないですよね。私は嫌です。

<b>要素を――――用に使えばCSSセレクタ的には楽に実装できます。

HTML要素 HTML本来の用途 オレオレ用途
<p> 段落 地の文（インデント有り）
<i> 会話文など 会話文
<b> 注目させる 地の文（インデント無し。――――で始まる） 
p::before { content: '　'; }
i::before { content: '「'; }
i::after { content: '」'; }
b::before { content: '――――'; }

<p>これは地の文である。</p>
<i>会話文だよ</i>
<b>これも地の文</b>

ですが、ふつう<b>要素は太字で注目させるために使います。小説で――――表現するためだけの用途に限定してしまうのは問題です。モナレッジをはじめマークダウンで書かれた記事はハウツー、日記、小説などさまざまな形態を許容しているはずですからね。HTMLタグは汎用的に使えるようにするべきでしょう。

文種によってCSSを使い分けることも考えられますが、実装が大変です。

素直に全角スペースでインデントするのがベストでしょう。マークダウンで記事を書くとき、インデントしたい所に全角スペースを入れる。それをそのままHTMLタグに書き出す。これでインデント問題は解決です。

プレーンテキストでの可読性 🔗

全角スペースでインデントすると、プレーンテキストのときでも読みやすくなります。

逆に、CSSのtext-indentだと全角スペースでなくグラフィック的に余白を表現することになります。そのためテキストデータとしてのインデントが表現できません。

text-indent: 1em;

これはJavaScriptのDOM操作node.textContentやnode.innerTextでテキストを取得するときに影響します。また、ブラウザの表示画面からテキストコピーするときにも影響します。

<p>　全角スペースでインデントする</p>
<p style="text-indent:1em;">CSSのtext-indentでインデントする</p>

for (const p of document.querySelectorAll(`p`)) {
  console.log(p.textContent)
}

　全角スペースでインデントする
CSSのtext-indentでインデントする

全角スペースでインデントしているときは、プレーンテキストとしてもインデントができます。ですが、CSSのtext-indentでインデントしていると、プレーンテキストでは全角スペースがないためインデントができません。

これはcontentプロパティを使っても解決できませんでした。

content: '　';

以下のようなHTMLファイルを作り、ブラウザに表示されたテキストをコピーするとわかります。または開発者ツールのコンソール画面をみてもいいでしょう。

<style>
.content-indent::before { content: '　'; }
</style>

<script>
window.addEventListener('load', (event)=>{
  for (const p of document.querySelectorAll(`p`)) {
    console.log(p.textContent)
  }
});
</script>

<p>　全角スペースでインデントする</p>
<p style="text-indent:1em;">CSSのtext-indentでインデントする</p>
<p class="content-indent">CSSのcontentでインデントする</p>

「CSSのcontentでインデントする」のp要素がもつテキストには、表示上では全角スペースがついているように見えます。ですが、それをブラウザからコピーしたり.textContentで取得することはできませんでした。冒頭の全角スペースはコピーできない仕様らしいです。

CSSにはuser-selectというプロパティがあります。ユーザがコピーできるかどうかを設定するものです。これを使ってもダメでした。

.content-indent::before {
  content: '　';
  user-select: text;
}

仮にcontentプロパティでそれらが解決できたとしても、根本的な問題が残っています。

先述のとおり、インデントしたいときと、したくないときの選別をせねばならない問題です。なので結局はユーザがどこにインデントするかを全角スペース入力によって都度決めるのがベストでしょう。

全角スペースでインデントする 🔗

すると、皆ハッピーになる。

  • 開発者は楽
  • ユーザは自由にインデントを入れることができる。高い表現力をもて、実用文・創作文ともに対応可能
  • 読者はインデントのおかげで読みやすい
  • ブラウザからテキストコピーした後でもインデントが有効

めでたしめでたし。

インデント、最高！