マークダウンで改行する方法

マークダウンで改行する方法

公開: 更新:
CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

マークダウンで文章やドキュメントを作成する場面は、ブログの執筆や社内共有資料の作成など、様々な状況で頻繁に発生します。意図した通りに改行を行う目的でよく使われるのが「半角スペースや空行による改行」で、Enterキーのみでは改行されない問題を簡単に解決可能です。

この記事では、マークダウンの基本的な改行の記述方法を解説していきます。主要なプラットフォームごとの解釈の違いなども交えて、サンプルコード付きで詳しく紹介しますので、ぜひ参考にしてください。



マークダウンで改行する方法

マークダウンの文章内で改行を行うには、半角スペース2つや空行などの専用の記法を利用します。Enterキーのみでは多くの環境で意図した改行が反映されない点に注意が必要です。

Markdownには「ソフトブレーク」と「ハードブレーク」の2種類の改行があります。ソフトブレークとはEnterキーのみで入力した単一の改行で、CommonMark仕様ではsoftbreakとして扱われ、環境によって、改行または空白相当として描画される場合があります。

GitHubの.mdファイルなどCommonMark準拠の環境では、ソフトブレークは前後のテキストが連続して表示される動作が標準的です。ハードブレークは半角スペース2つやバックスラッシュを行末に置く記法で、実際の改行として出力されます。

半角スペースを2つ入力する

マークダウンで改行する代表的な方法の1つが、行末に半角スペースを2つ入力する形です。Enterキーのみで入力した改行はハードブレークとして扱われないため、プレビュー時に文章が繋がって表示される環境が多いです。

行末に半角スペースを2つ入力する使い方について、以下のコードで確認します。

1行目のテキスト
2行目のテキスト

上記のコードでは、1行目の末尾に半角スペースを2つ配置しています(コード例の1行目末尾に半角スペース2つが入っています)。CommonMark仕様では、この行末スペース2つが「ハードラインブレーク」として定義されており、多くのMarkdownレンダラーで採用されている標準的な記法です。

ただし、VSCodeなど多くのコードエディタはデフォルトで保存時に末尾の半角スペースを自動除去する設定(files.trimTrailingWhitespace)になっています。改行が消えてしまう場合は、バックスラッシュや<br>タグの利用を検討してください。

なお、プラットフォームによっては、独自の解釈が入り、半角スペースなしでも改行される場合があります。CommonMark系のレンダラーを対象とする場合、本記法が標準的な手段です。

空行を挟んで段落を分ける

マークダウンでは、空行を挟んで段落を分ける記述もよく利用されます。テキストとテキストの間に1行分の空白行を入れることによって、別の段落として扱われる仕組みです。

空行を挟んで段落を分ける使い方は、以下の通りです。

1つ目の段落です。

2つ目の段落です。

上記のコードでは、段落の間に空行を1行挿入しました。半角スペース2つの改行が段落内での改行であるのに対し、こちらは段落そのものを分ける役割を持ちます。

文章のまとまりを視覚的に区切りたい場合は、この手法が適した選択です。長い文章を書く際に、可読性を高める効果を期待できます。


Python研修一覧はこちら

目的に合うPython研修を一覧形式から探したい方は、ぜひご利用ください。

Python研修を比較する

Java研修一覧はこちら

目的に合うJava研修を一覧形式から探したい方は、ぜひご利用ください。

Java研修を比較する

PHP研修一覧はこちら

目的に合うPHP研修を一覧形式から探したい方は、ぜひご利用ください。

PHP研修を比較する

新入社員研修

目的に合う新入社員研修を一覧形式から探したい方は、ぜひご利用ください。

新入社員研修を比較する

全ての研修からも探したい方はこちら

バックスラッシュを入力する

行末にバックスラッシュを入力して改行を表現する記法は、CommonMark仕様の「Hard line breaks」セクションで正式に定義された「ハードラインブレーク」の標準記法です。GitHubやVSCodeなどCommonMark準拠環境では一般的にサポートされており、半角スペース2つの代わりとして機能します。

なお、ObsidianではStrict line breaks設定がONの環境でバックスラッシュ記法が有効です。設定の状態によって、挙動が変わるため、事前に確認しておくと安心です。

バックスラッシュを入力する使い方について、以下のコードで確認します。

1行目のテキスト\
2行目のテキスト

上記のコードでは、1行目の末尾にバックスラッシュを配置して強制的な改行を指示しました。エディタ上でも改行の意図を視覚的に把握しやすく、末尾スペースが自動除去される環境でも意図通りに機能するのが利点です。

ただし、一部の古いMarkdown処理系やレガシーツールでは機能しない場合があります。うまく改行されない時は、半角スペース2つや空行を利用した方法への切り替えが必要です。

マークダウンの表の中で改行する方法

Markdownの表構文はパイプ(|)で区切られた1行に収める仕様のため、通常の改行記法がセル内で期待通りに機能しない場合が多いです。セル内で改行が必要な場合は、HTMLタグを用いた記述で対応します。

brタグを使用する

マークダウンの表の中で改行するには、brタグを使用するのが一般的です。通常の改行記法では、セル内での改行が期待通りに反映されない場合が多いからです。

以下のコードは、表のセル内でbrタグを用いて改行する例を示しています。

| 項目 | 説明 |
| --- | --- |
| マークダウン | プレーンテキストで記述します。<br>HTMLに変換可能です。 |

上記のコードでは、説明列のテキストの間にbrタグを挿入しました。これによって、プレビュー時に意図した通りの改行が反映される仕組みです。

表のレイアウトを保ちながら、複数の情報を整理したい場面で役立ちます。ただし、ソースコード自体の可読性が下がる点には注意が必要です。

HTMLのtableタグを使用する

brタグ以外で表の中を複数行にしたい場合は、HTMLのtableタグを直接記述する手法もあります。マークダウンはHTMLタグをそのまま解釈できる仕様だからです。

HTMLのtableタグを使用して、セル内で改行を含む表を作成するコードは以下の通りです。

<table>
  <tr>
    <th>項目</th>
    <th>説明</th>
  </tr>
  <tr>
    <td>マークダウン</td>
    <td>プレーンテキストで記述します。<br>HTMLに変換可能です。</td>
  </tr>
</table>

上記のコードでは、tdタグの中に直接テキストとbrタグを記述しています。マークダウン特有の記法に縛られず、自由なレイアウトを構築できるのが特徴です。

セルの結合など、より高度で複雑な表を作成したい場合に有効な手段と言えるでしょう。用途に合わせて、単純な表とHTMLの表を使い分けるのがおすすめです。


Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

VSCodeのマークダウンで改行設定を変更する手順

マークダウンで文章を作成する際、VSCodeの標準Markdownプレビューでは初期設定でEnterキーを押してもプレビュー画面でハードブレークとして扱われません。なお、この設定変更はVSCodeのプレビュー表示専用であり、Markdownファイル自体の記法や他の環境(GitHub等)での表示には影響しない点に注意してください。

具体的な手順は、以下の通りです。

  1. settings.jsonを開く
  2. Enterキーのみで改行できるようにする

これらの手順を踏むことによって、エディタ上での入力とプレビューの表示を一致させる設定が完了する仕組みです。

settings.jsonを開く

VSCodeの設定を変更するには、まずsettings.jsonファイルを開く必要があります。以下の手法で設定ファイルにアクセスします。

// コマンドパレットを開き、以下を入力して実行する
Preferences: Open Settings (JSON)

上記のようにコマンドパレットを利用すると、直接ファイルにアクセス可能です。Windowsの場合はCtrl + Shift + P、Macの場合はCmd + Shift + Pを入力してコマンドパレットを起動する仕組みです。

設定画面のUIから右上のアイコンをクリックして、直接JSON形式の設定を開く手法も存在します。この方法でも同様に設定を反映できる仕組みです。

Enterキーのみで改行できるようにする

設定ファイルを開いたら、マークダウンのプレビューに関する項目を追加して動作を変更します。以下のコードは、改行の解釈を変更する設定例です。

{
  "markdown.preview.breaks": true
}

上記のコードでは、markdown.preview.breaksの値をtrueに設定しています。この設定を有効にすると、エディタ上でEnterキーを1回押すだけで、VSCodeのプレビューにも改行がそのまま反映される状態に変化します。

設定の保存後、プレビューの挙動が変わる点がポイントです。ただし、この設定はVSCodeのプレビュー表示のみに影響するものであり、Markdownファイル自体の記法が変わったわけではありません。

GitHub等の他の環境では引き続き半角スペース2つ等の記法が必要です。対象の環境に応じて記法を使い分けることを念頭に置くとよいでしょう。

マークダウンの改行に関するよくある質問

プラットフォームによって改行の解釈は異なりますか?

はい、GitHubやZennなどのプラットフォームによって、マークダウンの改行の解釈は異なります。各環境の仕様を事前に確認しておくと安心です。

ソフトブレーク(単一改行)は、CommonMark準拠のレンダラーでは前後のテキストが連続して(改行なしで)表示されます。同一プラットフォーム内でも、コンテキストによって、表示が変わる場合があるため、事前に対象環境の仕様を確認しておくことが一助です。

Slackでメッセージを改行するにはどうすればよいですか?

SlackはMarkdown記法ではなく独自の「mrkdwn」形式を採用しているため、半角スペース2つ等の改行記法は機能しません。Slack ヘルプセンターは次のように案内しています。

改行するには、 Shift Enter を押します。(必要なら、 環境設定を変更 し、 Enter キーだけで改行するよう設定することもできます。)

出典:Slack ヘルプセンター Slackのメッセージ内での改行

Shift+Enterで改行するか、設定を変更してEnterのみで改行できるよう切り替えることもできます。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


    ITやプログラミングに関するニュース

      ブログに戻る

      コメントを残す

      コメントは公開前に承認される必要があることにご注意ください。

      企業・法人向けのIT・プログラミング・生成AI研修を探す、比較する - IT・プログラミングを知って学べるコネクトメディア CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座 - IT・プログラミングを知って学べるコネクトメディア コードキャンプが提供する無料で学べるプログラミングスクール講座 - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア 3.5日の研修で、年間1,600時間の削減効果が見込まれる。東京きらぼしフィナンシャルグループのDX人材育成事例 - IT・プログラミングを知って学べるコネクトメディア 配属3ヶ月で30%の生産性向上を実現するいよぎんコンピュータサービスの新人研修に迫る - IT・プログラミングを知って学べるコネクトメディア 金融業界の業務効率化を加速するニッセイアセットマネジメントの生成AI×GAS活用研修事例 - IT・プログラミングを知って学べるコネクトメディア 【製造業のDX人材育成事例】デジタル人材の即戦力化を実現する、日本ガイシ株式会社の異動者向オンボーディング研修 - ITやプログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果|サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

      新着記事

      対象者別で探す

      子供(小学生・中学生・高校生)向け
      プログラミング教室検索する

      子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

      子供(小学生・中学生・高校生)
      プログラミング教室検索する

      ITやプログラムなどの
      最新情報を検索する

      日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

      ITやプログラムなどの
      最新情報を検索する