【ブログの楽しみ方】Enterでの改行とShift＋Enterでの改行の違いと行間の関係【ココログ】

この記事はcocologのwebページで作成しています。当ブログで共通する説明などを記述するもので、他のブログ記事からリンクされています。（この記事は更新する可能性があります。）

最初に結論を書きます。

• Enterキーでの“改行”やShift＋Enterキーでの“改行”はあくまでも<p>タグ（段落タグ）と<br />タグ（改行タグ）を挿入する操作である。
• <p>～</p>と<p>～</p>の間がどのくらい空くのかはスタイルシートに定義されている。（ブログのデザインが異なれば、スタイルシートも異なる。スタイルシートに<p>タグに対するマージンが0なら、行間は狭い。）

ウェブ上に公開するページは、本来HTMLタグというものを使用して記述しなくてはならないのですが、ココログに限らず、たいていのブログシステムでは、そういった知識がなくても使えるように簡易な編集画面が提供されています。

これにより、文字に色を付けたり、画像を挿入したりといった編集が容易になっていますが、ヘルプ（公式FAQ）でも、大多数のユーザに合わせて難しい説明を避けているため、混乱を招く原因にもなっています。例えば、

公式FAQ『改行したつもりが1行分のスペースができてしまう』

では、Enterキーでの“改行”もShift＋Enterキーでの改行”も、同じ“改行”と表現しています。（なお、「リッチテキスト」モードは「記事の編集」モードと同じ意味です。）

Enterキーでの“改行”というのはブラウザがInternet Explorerの場合で、FirefoxではEnterキーを2回押すのですが、ブラウザの違いによる操作方法の違いは下記に書かれています。

公式FAQ『リッチテキストモードの改行ルール』

このなかに、

リッチテキストモードでは、入力された文字を <p>タグ（段落を意味する HTML タグ）で囲います。本文入力欄で Enter キーが押された場合（改行を入れた場合）、段落が変わったと解釈して段落タグを終了させて（</p>）、新しい段落を始めます。この場合、ブログ画面では段落の間に１行分のスペースが空くこととなります。

スペースを空けずに改行を入れたい場合は、Shift キーを押しながら Enter キーを押してください。こうすると <br /> タグ（改行を意味する HTML タグ）が入り、１行空けずに改行することができます。

と書かれています。ピンク背景色はブログ主がつけたものですが、「ブログ画面」が公開した画面のことであれば、この説明は間違っています。

具体的に見てみます。（Firefoxを使用しているので、「Enterキーを2回押す」としていますが、IEなら1回だけです。）

確かに、「あああああ」と「いいいいい」の間は広く、「いいいいい」と「ううううう」の間は狭く改行されているように見えますが、これはあくまでも編集画面上そう見えている（見せている）だけなのです。

この記事を公開して、ブラウザで閲覧した場合に「あああああ」と「いいいいい」の間がどのくらい空いているのかは、ブログのデザイン（テーマ）毎に異なります。これは、デザイン毎に異なるデザインをまとめて記述したスタイルシートという情報（ファイル）によるものです。

例えば、<p>あいうえお</p><p>かきくけこ</p>と記述した場合、“<p>タグについて上下に10px（ピクセル）のマージンを空ける”と定義されているスタイルシートを使っているデザインなら、ブログを閲覧した際に、下のように表示されるというだけです。

ここでは詳しく説明しませんが、上のように表示させるスタイルシートには、例えば下記のように指定されています。

p {
    margin-top: 10px;
    margin-bottom: 10px;
}

スタイルシートについては記事『【ブログの楽しみ方】今更きけないココログ－(1) ココログのしくみ－HTML文書とスタイルシート』で詳しく説明しています。