HTMLを記述する場合に、改行する方法がいくつかあります。
主な方法として\<br>タグを使用して改行する方法がありますが、br以外にも\<p>タグなどのブロック要素タグを使う方法や、\<pre>タグで改行する方法などがあります。

これらの改行の方法は、HTML文書内での改行の意味合いによって使い分けることが重要です。

この記事では、HTMLの改行の方法や使い分け方を知りたい方のために、HTMLの改行の役割・様々な改行の方法・CSSによる改行の調整などについて解説します。

HTMLとは？できることや初心者向けのタグの例、CSSについても紹介

HTMLのコードを記述する時にキーボードで入力した改行は、HTML文書を表示させた際には通常無視されます。

*そのため、改行タグを使用するなどして文章の中で改行を行うことを明示する必要があります。*

改行を明示的に表すのが\<br>タグや\<p>タグなどを使う方法です。文章の見た目を整えるために、改行をCSS（Cascading Style Sheets）で制御することもできます。

HTMLでよく使われるのは\<br>タグを使う改行です。段落を区切らずに改行を挿入したい場合に利用され、文章の中で次の行に移ることができます。

もう1つの改行の種類として、\<p>タグを始めとしたブロック要素の区切りを表す改行です。ひとまとまりの文章全体を段落で区切るために使用されます。これによって、文章が段落ごとに区切られ、読みやすくなります。

*主な違いは、\<br>タグが文章内での単純な改行を意味するのに対し、\<p>タグなどのブロック要素は段落を作成して段落の論理的な構造を示すために使われるということです。*

HTMLタグとは？HTMLタグ一覧など初心者向けに解説！ 

HTMLのdivタグとは？読み方・目的・使い方などを解説！ 

### 適切な改行を意識する必要性とは

\<br>タグで改行ができるのであれば、すべて\<br>タグを使えばいいと思うかもしれません。しかし、それではHTMLの構造を明確にすることができず、分かりにくい文書になるでしょう。

**HTMLで適切な方法による改行を行うことで、HTML文書が構造化され、可読性が向上します。**これによりWebページや文書の読者がより内容を理解しやすくなるのです。

また、誤った改行方法を用いると、検索エンジンのクローラビリティを低下させてSEOに影響を及ぼすともいわれています。そのため、HTMLでは適切な改行を意識する必要があるのです。

ここでは、最も簡単に文章の中で改行を入れることができる\<br>タグについて解説します。使用方法や、\<br>タグで改行する意味、\<br>タグを使う場合の注意事項について説明します。

*HTML内でテキストを改行したい箇所に\<br>タグを記入することで改行されます。*\<br>タグを使用すると、改行したい場所でテキストを分割し、次の行の先頭からテキストが再開されます。

```やあ。
こんにちは。<br>
今日はいい天気ですね。
```

```やあ。こんにちは。
今日はいい天気ですね。
```

HTMLのコードを記述する際、単純にEnterキーを押しただけでは、HTMLの表示のときに改行されません。そのため、上記の例で「やあ。」と「こんにちは。」は同一の行に表示されます。

\<br>タグを記述することで、「こんにちは。」のあとに改行が挿入され、続く文章は次の行の先頭から始まります。

「改行」を英語で「line break」と表現することから、\<br>はこの「break」を略したものです。

### ＜br＞タグで改行する意味とは

文章を書いていると、1行が長くなって文章が読みづらくなることがあります。*その時に、\<br>タグによる改行を使用して行を変えることで、文章を区切って読みやすくします。*

改行をどの程度の頻度で入れるかは、その文書自体の求められ役割や文体、書く人の書き方にもよるため、明確な基準はありません。しかし、適切な改行を入れることで文章のリズムが整い、より明瞭に文章の意味を伝えることができます。

### ＜br＞タグで改行する場合の注意点

\<br>タグを使用すれば簡単に改行を挿入できますが、\<br>タグを使う際にはいくつかの注意点があります。

\<br>タグを連続で使用すると、何も文字がない空の行を入れることができます。*しかし、文章のまとまりを意味する段落の間を開けるために\<br>を連続して使うことは避けましょう。*段落を区切るときは、後述する\<p>タグなどのブロック要素で文章を囲むことが推奨されています。

行間の余白を調整するために\<br>タグを連続で使用するのも避けるべきです。\<br>タグでレイアウトを調整しようとしても、ユーザの閲覧環境によって行間の広さが変わったり、文字サイズによって改行位置がおかしくなったりしてテキストが読みづらくなる場合があります。

## ＜p＞タグなどのブロック要素で改行する

次は、\<p>タグなどのブロック要素を使用して改行する方法です。まずブロック要素について説明し、改行する方法や意味合い、注意点について解説します。

*HTMLのブロック要素はページの構造を形成する要素です。*開始タグと終了タグがセットで使用され、ページ全体の構造やセクション、大きなコンテンツの区切りなどを表します。ブロック要素の種類には、以下のようなものがあります。

*■\<p>タグ*
\<p>タグは、文書内で段落を区切るために使います。\<p>は「paragraph」（パラグラフ）の頭文字です。

\<p>タグで分ける段落は、長い文章を意味のまとまりである程度の文章で分けたものです。文章の言いたいことがひと区切り付いたら段落を分けるのが一般的です。

*■\<div>タグ*
\<div>タグは、特に意味を持たない文章の1区切りを表します。\<p>タグでは文章的に意味のある段落に分けますが、\<div>タグではHTML作成者が意図する区切りで自由に文章を一括りにすることができます。

例えば、一定の範囲を\<div>タグで括ってCSSを適用するなどの使い方が考えられます。ただし、\<div>タグを多用してしまうことで文書の意味が分かりづらくならないように気を付ける必要があります。

*■\<h1>タグ～\<h6>タグ*
hタグは、HTML文書の中で見出しを意味するタグです。\<h1>から\<h6>まであり（h1・h2・h3・h4・h5・h6）、数字が大きいほど大きな見出しを表します。

*■\<table>タグ*
\<table>タグは、行と列の組み合わせで表を作成するためのタグです。行を表す\<tr>タグ、ヘッダー行を表す\<th>タグ、セルを意味する\<td>タグと一緒に使われます。

### ブロック要素で改行する方法

ブロック要素は、HTML内で縦に並ぶ性質を持っています。

そのため、開始タグでブロック要素を開始し終了タグを記述すると、それ以降の内容は次の行から始まります。つまり、改行された状態になります。

例えば\<p>タグを使用すると、内容を\<p>の開始タグと終了タグで囲めば改行することができます。

```<p>こんにちは。</p>
<p>今日はいい天気ですね。</p>
```

```こんにちは。
今日はいい天気ですね。
```

### ブロック要素で改行する意味とは

ブロック要素は、HTMLの構造を形作るために使用されます。*それぞれのブロック要素が持つ意味を理解して使い分けることで、セクションや内容をグループ化することができます。*

また、ブロック要素を組み合わせてHTML文書全体を構造化することで、CSSを使った統一感のあるスタイルの適用が可能です。

そのため、ブロック要素を用いた改行をすることは、意味のまとまりのあるブロックが終わり、次のブロックが始まることを意味するといえるでしょう。

### ブロック要素で改行する場合の注意点

*ブロック要素を使う場合は、そのブロックが持つ意味をよく考えて使うようにしましょう。*特に\<p>タグや\<div>タグはコードの記述者にとって自由に使いやすいブロックですが、文章の構成を意識して使わないとまとまりがない文書になってしまいます。

また、ブロック要素内での改行は\<br>タグで行いますが、ブロック要素自体の最後に改行が挿入されるため、\<br>タグと重複して意図しない余分なスペースが入らないように気を付けましょう。

他にHTMLで改行する方法として、\<pre>タグで改行する方法があります。\<br>タグや、\<p>タグなどのブロック要素とは意味合いが異なりますので、詳しく解説していきましょう。

\<pre>タグとは、整形済みテキストを表します。*つまり、通常HTMLコードの中では改行しても表示されないか半角スペースに置き換えられますが、\<pre>タグ内で改行すると、その箇所に改行が挿入されます。*

改行だけでなく、半角スペースやタブなどもそのまま表示されます。\<pre>タグで囲った文章は、コーディングした形のまま表示されるのです。

```<pre>
こんにちは。
今日はいい天気ですね。
</pre>
```

### ＜pre＞タグで改行する意味とは

*\<pre>タグは、主にプログラミングのソースコードなどを表示する際に使用します。*記載したテキストがソースコードであることを意味する\<code>タグと一緒に使われることもよくあります。

### ＜pre＞タグで改行する場合の注意点

\<pre>タグで使用できる改行は、\<br>タグや\<p>タグなどを使った文章や段落の区切りで使用する改行とは異なります。*意味としては、整形済みコードが含んでいる改行が表示されているだけといえるでしょう。*

そのため、HTML文書の中で単純な改行を挿入するために\<pre>タグを使うことはないと考えていいでしょう。その場合は\<br>タグや\<p>タグなどを使って改行しましょう。

HTMLのレイアウトを整えるために、CSSが使用されます。CSSではWebページ内の文字の色や大きさ、背景などの要素を設定することができ、改行の調整を行うこともできます。

CSSとは？概要や基本書式、具体的な記述方法について解説！

whitespaceはCSSのプロパティの1つで、改行・半角スペース・タブをどのように表示させるかを設定することができます。normal・nowrap・pre・pre-line・pre-wrapの5つの値があります。

*■normal*
HTMLの一般的な表示です。\<br>タグを使用した時や、文章が画面の横幅に到達したときに改行されます。

*■nowrap*
\<br>タグを使用した時は改行されますが、文章が画面の横幅に到達しても改行されません。

*■pre*
HTMLコード内で行われた改行が反映されます。文章が画面の横幅に到達しても改行されません。

*■pre-line*
HTMLコード内で行われた改行が反映され、半角スペースは反映されません。文章が画面の横幅に到達すると改行されます。

*■pre-wrap*
HTMLコード内で行われた改行が反映され、半角スペースも反映されます。文章が画面の横幅に到達すると改行されます。

### line-breakで改行の禁則処理を行う

HTMLでの改行方法には、<br>タグを使う方法や、<p>タグなどのブロック要素を使う方法があり、文章や区切りの意味に合わせて適切に使い分ける必要があります。この記事ではHTMLコーディングを行う方のために、HTMLの様々な改行方法や意味などを解説します。

HTMLでは通常のキーボード入力の改行は無視されるため、改行を明示する必要がある

HTMLの改行の方法には、\<br>タグ・\<p>タグなどのブロック要素・\<pre>タグなどを使う方法がある

HTMLでは適切な改行を使うことで文書が構造化され可読性が向上する

HTMLで改行する方法は？<br>タグや<p>タグの使い方を解説

**HTMLのリストは、Webページの中で箇条書きをする時などに使われる要素です。**リストを使うとユーザがコンテンツを理解しやすくなるため、コーディングでは適切にタグを設定する必要があります。

また、HTMLのリストタグには、いくつか種類があります。本記事ではリストタグの基本的な知識を紹介した後に、実際にリストの作り方や、カスタマイズの方法を詳しく解説します。プログラミングの初心者でも分かりやすいように解説しますので、ぜひ参考にしてください。

【参考】：[MDNドキュメント リスト項目について](https://developer.mozilla.org/ja/docs/Web/HTML/Element/li)

*リストの要素は、Webページ上で情報を整理するという重要な役割があります。*HTMLのリストを使えば、ユーザが情報を一目で理解しやすくなります。

例えば、下図のようなリストの例を見ると分かるように、箇条書きでコンテンツを紹介する場合は、リスト要素を使用した方がコンテンツを明確化しやすいです。

~~【図】：MDNドキュメントのリスト~~

*HTMLリストには、主に順序ありのリストと順序なしのリスト、定義型のリストがあります。*

順序ありのリストとは、箇条書きの先頭に番号が振られているリストです。手順や順位付けといった場面でよく利用されます。

一方で、順序なしのリストは、項目の先頭に点や記号が振られているリストです。メニュー項目やサービス一覧など、特に順序が必要ない項目に幅広く活用できます。

また、定義型のリストとは用語と説明を整理するためのリストです。

このように、HTMLリストは用途によって使うべきリストが異なります。ただし、どれも重要なリストですので、HTMLを学習中の方は、これらのタグの使い方もしっかり理解しましょう。

**HTMLリストの書き方は、順序ありリストと順序なしリストでタグが異なります。**順序なしリストは、\<ul>タグを使用して作成します。一方で、順序ありリストの場合は\<ol>タグを使用します。

また、その他にも定義型リストでは、\<dl>・\<dt>・\<dd>などのタグが使われます。ここでは、それぞれのリストの書き方を解説します。

順序なしリストでは\<ul>タグを利用すると解説しましたが、*リストの各項目は\<ul>タグで囲んだ中に記載します。*実際に、順序なしのリストのコードは以下の通りです。

```
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>
```

コードを記述してブラウザで結果を確認すると下図のようになります。

~~【図】：順序なしリストの実行結果~~

【参考】：[MDNドキュメント　リスト項目について](https://developer.mozilla.org/ja/docs/Web/HTML/Element/li)

*順序付きリストでは\<ol>タグを利用します。*基本的な書き方は順序なしリストと同様です。実際のコードは以下の通りです。

```
<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>
```

コードの実行結果は下図の通りです。

~~【図】：順序付きリストの実行結果~~

どちらのリストでも、閉じタグや記号の書き漏れがあると正しく反映されません。コーディング初心者の方は、記載漏れがないか注意しながらリストを作成しましょう。

*\<dl>タグは、用語とその説明をリスト化するためのタグです。*具体的な使い方は\<dt>タグに用語を入れ、\<dd>タグにその説明を示します。

このリストは、用語と説明を対にして表示する際に使われることが多いです。例えば、用語集や製品の仕様説明でよく使われます。こちらもサンプルコードを紹介しますので、参考にしてください。

```
<dl>
    <dt>HTML</dt>
    <dd>ハイパーテキストマークアップ言語。ウェブページやウェブアプリケーションを作成・構造化するために使われる。</dd>
    <dt>CSS</dt>
    <dd>カスケーディングスタイルシート。ウェブページのレイアウトをスタイリングするために使用される。</dd>
    <dt>JavaScript</dt>
    <dd>アニメーション、フォーム検証などのインタラクティブなウェブ機能を可能にするプログラミング言語。</dd>
</dl>
```

サンプルコードの実行結果は下図の通りです。

~~【図】：定義型リストの実行結果~~

### リストアイテムをネストする方法

*HTMLリストでは、リストの中に別のリストをネスト（入れ子）することもできます。*例えばメニュー項目を作成する際に、大項目と中項目を区分する時などに使います。

サンプルコードは以下の通りです。

```
<ul>
   <li>果物
        <ul>
            <li>リンゴ</li>
            <li>バナナ</li>
        </ul>
    </li>
    <li>野菜
        <ul>
            <li>トマト</li>
            <li>キュウリ</li>
        </ul>
    </li>
</ul>
```

コードの実行結果を見ると、入れ子構造になっていることが確認できます。

### HTMLリストボックスの作り方

*HTMLのリストボックスはリスト要素と名称は似ているものの、リストとは異なります。*リストボックスとは、ユーザが選択肢の中から項目を選べるインターフェースを指します。

リストボックスはドロップダウンリストという要素とも似ていますが、リストボックスの場合はユーザが複数の項目を選ぶこともできます。ここでは、簡単にリストボックスの概要について解説します。

*リストボックスは通常、\<select>タグを用いて作成されます。*また、その中に\<option>タグで個々の選択肢を定義します。

その他にも、size属性を設定すると、リストボックスに常に表示されるオプションの数を指定できます。リストボックスのサンプルコードは以下の通りです。

```
   <select name="fruits" id="fruits">
        <option value="apple">りんご</option>
        <option value="orange">オレンジ</option>
        <option value="banana">バナナ</option>
        <option value="grape">マスカット</option>
        <option value="mango">マンゴー</option>
    </select>
```

上記のサンプルコードをブラウザ上で見ると、下図のようになります。コーディングを学習中の方は試しに自分のエディターで同じようにコードを記述し、同じ結果になるか確認しましょう。

~~【図】：リストボックスの実行結果~~

【参考】：[MDNドキュメント　リスト項目について](https://developer.mozilla.org/ja/docs/Web/HTML/Element/select)

**ここでは、リストに関するよくある質問を紹介します。**リストのカスタマイズについても解説していますので、気になる方はぜひ参考にしてください。

Web開発を行うエンジニアの方は、リストタグの互換性が気になるのではないでしょうか。*リストタグは主要なタグ要素のため、ChromeやFirefoxをはじめとする主要なブラウザで利用できます。*

MDNのドキュメントに、各ブラウザが対応しているバージョンも掲載されていますので、こちらも参考にしてください。また、実際にコーディングを行う時には各ブラウザで実際に動作を確認し、正しく表示されているか確認しましょう。

【参考】：[MDNドキュメント　互換性について](https://developer.mozilla.org/ja/docs/Web/HTML/Element/li)

リストの先頭にある、点を消したいと考える方も多いでしょう。*CSSのプロパティを活用すれば、マーカーがないように見せることができます。*ここでは、点なしリストスタイルの1例として、以下のサンプルコードを紹介します。

```
ul {
    list-style-type: none;
}
```

このコードでは、「list-style-type」というプロパティを設定しています。このプロパティはリストのマーカーを変更するプロパティですが、ここで「none」という値を設定すれば、リストのマーカーを非表示にできます。

その他にもCSSを使用することで、リストのマーカーのスタイルやインデントなどを調整できますので、さらにカスタマイズしたい方は、リストに関連するプロパティを調べてみましょう。

### 自分の用意したアイコンや画像をマーカーに使いたい

*CSSの設定を正しく行えば、自分の用意した画像をマーカーとして使用できます。*オリジナルのマーカーを設定したい時は「list-style-image」というプロパティを使い、画像のパスを設定しましょう。

```
ul {
    list-style-image: url('path/to/image.png'); /* カスタム画像をマーカーとして使用 */
}
```

【参考】：[MDNドキュメント　list-style-imageについて](https://developer.mozilla.org/ja/docs/Web/CSS/list-style-image)

## リストを正しく使えるエンジニアになろう

Web開発のなかでも、フロントエンドの開発をする方はHTMLの知識が欠かせません。**リストタグは、HTML要素のなかでも特に基本的な要素です。**

本記事で紹介したサンプルコードや解説を参考にして、基本的な記述方法をマスターしましょう。

HTMLでできることは少ない？できないことやタグも一覧でまとめた

HTMLのリスト要素は、HTML要素のなかでも特に頻繁に使われる要素です。本記事では、リストタグの基礎知識や具体的な記述方法、カスタマイズについて詳しく解説します。フロントエンドの開発者や、コーディングでHTMLを扱う方はぜひ参考にしてください。

HTMLのリスト要素は、箇条書きやコンテンツの整理をする時に使われる要素です

HTMLのリスト要素には順序なしリスト、順序ありリスト、定義型リストがあります

HTMLのリスト要素のマーカーのカスタマイズ方法が分かります

HTMLのリスト要素とは？基本の書き方やカスタマイズ方法を解説

*[【マイナビITエージェント】あなたの転職活動を無料でサポートいたします](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=banner&utm_campaign=acv01)*

## HTML編集ソフト（エディタ）を活用する

HTML/CSSを学び始めると、HTML作成ツールとしてHTML編集ソフトが必要になってきます。ここでは、*HTML/CSSの初心者の方に向けて、使い勝手が良く、GUIに優れたHTMLエディタを紹介していきます。*皆さんに合うHTMLエディタ選定の参考にしてください。

**HTMLエディタは、HTML/CSSの作成や編集を効率的に行えるテキストエディタです。**そもそも「テキストエディタ」とは、ソースや文書ファイルなどを編集するためのプログラムのことです。HTMLエディタは、HTMLの作成ツールと考えて良いでしょう。

WindowsやMacに標準搭載されているテキストエディタは、主にテキストの編集を行うためのアプリですが、*HTMLエディタにはテキストの編集に加えてソースコードの入力補助・タグの自動補完・エラーチェック・ファイル連携などの機能が備わっています。*

これらの機能を用いて効率的なHTML記述やWebページの制作を行えますので、HTML/CSSを日常的に使うエンジニアの方にはHTMLエディタの利用がおすすめです。

### なぜHTMLエディタにこだわる必要があるのか

Windwos標準の「メモ帳」、Mac標準の「テキストエディット」でもHTML/CSSの作成や編集は可能です。しかし、これらの標準ソフトはHTML/CSSに特化したものではないので最低限の機能しか搭載しておらず、HTML/CSSの作成・編集に最適とは言えません。

ITエンジニア、プログラマーの仕事は常に時間との勝負です。しかも、スピードだけではなく高い品質も求められます。プログラムの品質とボリュームを保ちながら納期までにシステムを完成させなければなりません。

**ITエンジニアは高い生産性が求められる職種であり、それを実現するには使い勝手の良いテキストエディタに出会う必要があります。**自分に合う良いエディタを使うことは、自らの仕事の生産性を上げるために欠かせません。

では、HTMLエディタを使うことで具体的にどのようなメリットがあるのでしょうか？まずはHTMLエディタの一般的なメリットについて確認しておきましょう。

**HTMLエディタには自動補完機能が付いており、入力ミスや入力漏れを防いでくれるため、HTMLの記述をスムーズに行うことができます。**

自動補完機能とは、開始タグを打つと自動的に終了タグが記述されるなど、打ち込んだ記号や文字の関連タグを自動で入力してくれる機能です。この機能があることで、効率的にHTMLの記述作業ができます。

HTMLは記述ミスをしても思い通りの表示がされないだけで、プログラムのように重大なエラーにはなりにくいです。そのため、うっかりミスに気付かずに記述を進めてしまうことがあります。しかし、仕事でHTMLを記述する際に、そのようなミスは許されません。

HTMLは階層構造が複雑になればなるほど、記述ミスが起きやすくなります。**HTMLエディタでは、構成要素ごとに異なる色で表示してくれるなど、複雑な階層でも構成が分かりやすくなる機能がついているので記述ミスが減ります。**こうした機能は一般のテキストエディタにはありません。

### Webページをプレビューできる

一般のテキストエディタでHTMLを記述する場合は、Web形式のファイルで一旦保存し、そのファイルをWebブラウザで開き直して正しく表示されているかどうかを確認する必要があります。

一方、**HTMLエディタにはプレビュー機能があり、HTMLを記述しながら同時にプレビュー機能でWeb画面を確認できます。**微調整をする際もすぐに確認ができるので、非常に便利です。

### CSSやJavaScriptの記述に利用できる

最近のWebサイトの作成では、HTMLに加えて「CSS」が必須であり、さらに「JavaScript」も扱うケースが多くなっています。「CSS」はWebのデザインを作るための言語で、「JavaScript」はWebに動きを与えてくれる言語です。

HTMLエディタはCSSやJavaScriptにも対応していることが多いです。複数のプログラム言語を扱えるため、**HTMLエディタを扱えるようになると仕事の効率が一気に上がります。**

HTMLエディタは大別すると以下の2種類があります。それぞれメリット、デメリットがあるので環境に応じて使い分けると良いでしょう。

### インストールして利用するタイプ

**HTMLエディタのソフトをネット上からダウンロードし、インストールして使うタイプのエディタソフトです。**一旦インストールすれば、オフラインでも利用でき、しかもPC上で独立して動くため動作が軽いといったメリットがあります。

一方、インストールの手間が掛かる点と、作成したデータの管理を自分のパソコン上でしか行えないため共同作業に向かない点はデメリットです。

### オンラインで利用するタイプ

**ネットワークに接続したパソコンのWebブラウザ上で利用するHTMLエディタです。**インストールは不要でWeb上で管理でき、場所に縛られず利用できるため、リモートワークや共同作業では便利です。

その反面、ネットワークに依存するためネットワークの状況次第では使えない、動作が重くなるなどのデメリットがあります。

## HTMLエディタを選ぶ際のポイント

HTMLエディタは数多くリリースされており、それぞれ特徴が異なるため、自分に合ったエディタを見つけるのは簡単ではありません。

ここでは、数あるエディタの中から、自身に適したエディタを見つけるためのポイントについて説明をします。自分に合うエディタを見つけるための参考になれば幸いです。

### 自分の使っているOSに対応しているか

エディタを選ぶ際には、**自分が普段使っているパソコンのOSに対応したHTMLエディタか否かを確認する必要があります。**エディタの選定や検討でミスがないよう、自分のパソコンのOSや、OSのバージョンに合ったエディタかどうかをよく確認しましょう。

多くのHTMLエディタは外国製品であり、標準製品は英語での表記が一般的です。**英語に不安がある方は、日本語対応のエディタを選ぶのが無難です。**

英語版のHTMLエディタでも日本語化キットなどがあれば簡単に日本語化できますので、日本語化の可否については確認するようにしましょう。

それぞれのHTMLエディタには製品ごとに異なる標準機能、拡張機能があります。自身のスキルが上がってくると、追加機能が必要になる場合もあります。**標準機能や拡張機能の内容、ツールの有無なども確認しておいた方が良いでしょう。**

エディタは慣れるに従って使い勝手が変わっていきます。自分が求める機能が整っていると長く使えますので、よく比較検討してから選びましょう。

### 調べたい時にすぐに調べられるか

HTMLエディタは使い慣れるまでにさまざまな疑問や壁にぶつかります。そのような時、しっかりした解説サイトや情報共有の場があると早く解決できます。

調べたい時にすぐに調べられるのは、エディタ選択の際の重要な条件です。**サポートサイト、解説サイトの有無はしっかり確認しておきましょう。**

## 初心者におすすめしたいHTMLエディタ5選

ここからは、初心者から中級者まで幅広く利用されている人気のHTMLエディタを5つに絞って紹介します。基本的には無料で利用できるエディタを中心に紹介しますが、*一定期間利用すると有料になるものもありますので、予算に応じて検討しましょう。*

**「サクラエディタ」は、Windows向けの高機能でシンプルなHTMLエディタです。**日本人によって開発されたもので、日本語の会議室や情報共有の場もあります。また、GitHub上にあることから、開発に参加することもできます。

サクラエディタには、キーワードの強調・アウトライン解析・補完入力などの特徴的な機能があります。

▪タイプ：インストール
▪対応OS：Windows
▪料金：無料で使用できます。

【参考】：[サクラエディタ](https://sakura-editor.github.io/)

**「Visual Studio Code」は、マイクロソフトが2015年にリリースしたHTMLエディタです。**マイクロソフト製だけに安心感があります。

HTML以外にも、JavaScript・Python・PHP・Java・C#などの主要なプログラミング言語に対応可能で、プログラマーやエンジニアの強い味方となるでしょう。

▪タイプ：インストール
▪対応OS：Windows、Mac、Linux
▪料金：無料で使用できます。

【参考】：[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code)

**「Brackets」は、ブラウザの設計が簡単にできる軽量のテキストエディタです。**Webデザイナーやフロントエンドのデベロッパーのためにゼロから開発されたもので、「クイック編集機能」など各種便利機能が豊富に備わっています。

また、環境を問わず動作するため、どのOSでも使うことができます。2021年9月1日をもって開発元であるAdobe（アドビ）によるサポートは終了しましたが、現在はコミュニティによる開発が行われています。

【参考】：[Brackets](https://brackets.io/)

**「CotEditor」は、macOSのために作られたテキストエディタで、macOSのアプリケーションに合わせた振る舞いをします。**

また、日本で開発されたこともあり、エンコーディング判定や和英が混ざった文書、縦書き表示など、日本語特有の問題にも対応しています。

▪タイプ：インストール
▪対応OS：Mac
▪料金：無料で使用できます。

【参考】：[CotEditor](https://coteditor.com/)

**「Sublime Text」は豊富な拡張機能とカスタマイズの自由度の高さ、さらにその動作の軽さからエンジニアには人気が高いことで有名です。**主要なプログラミング言語にはほぼ対応しており、プログラマーの方は重宝するでしょう。

なお、日本語化も可能ですが、拡張機能の利用にはコマンドラインの利用が必要です。単純にHTML/CSSのみを記述しプレビューするというレベルでの使い方を求める方にはやや難しく感じるかもしれません。

▪タイプ：インストール
▪対応OS：Windows、Mac、Linux
▪料金：無料で使用できますが、登録から3年経過した後にバージョンアップを行うには、有料ライセンス購入が必要です。

【参考】：[Sublime Text](https://www.sublimetext.com/)

**「Livewave」は、リアルタイム (ライブ) プレビューを備えた HTMLエディタです。**記述したHTMLをプレビュー画面でリアルタイムに確認できるため、練習やテストなどに向いているでしょう。

また、ブラウザ上でコーディングできるため、ソフトウェアをインストールする必要がなく、気軽に利用できます。

HTMLの記事（3ページ目）