XMLとは「Extensible Markup Language」の略称です。日本語では「拡張することができるマークアップ言語」と訳すことができます。ここでは、XMLの詳細や特徴、HTMLとの違いについて詳しく紹介しましょう。

**XMLとは、文章の見た目の部分や構造を記述するためのマークアップ言語の1つです。**なお、マークアップ言語とは、視覚表現や文章構造などを記述するための形式言語のことを指します。テキストファイルである場合が多いですが、バイナリデータのこともあります。 Webサイトを作成する際などによく登場するHTML・CSS・SVG・XHTML・XSLT・RFTなどもマークアップ言語といえるでしょう。

XMLを利用する大きな目的はデータのやりとりを簡単にすることです。また、記述の形式がわかりやすいという特徴があります。**XMLは特定の企業などが提供している技術ではなく、標準化推進団体である「W3C」によるオープンな規格です。**W3Cとは「World Wide Web Consortium」の略称で、Web技術の標準化を行っている非営利団体を指します。

これまでにも説明しましたが、XML以外にもマークアップ言語には、HTMLやCSSなど多数あります。ここでは、XMLの特徴について3点紹介しましょう。

 *1.データの意味がわかりやすい*
XMLはデータのやりとりを容易にするために、幅広く用いられています。XMLの特徴の1つとしてデータの意味がわかりやすいことが挙げられます。データの意味に合わせて要素の名前を自由に定義することができるため、**データの意味をわかりやすく目立たせることが可能です。**XMLでは「タグ」と呼ばれる文字列を用います。なおタグとは、コンピュータ上に存在するテキストやファイルなどに目印をつけて整理するために用いられます。タグを用いて囲んで修飾を行う文字列である「<〇>文字列</〇>」の「〇」にあたる部分を要素名といいます。つまり、要素名が異なると、修飾を行う文字列の意味も異なることとなります。XMLでは、タグに用いる要素名を自由に定義できるという特徴もあります。したがって、データをわかりやく設定することができるのです。

*2.拡張性が高い*
XMLは拡張性が高いことも特徴です。XMLは、アプリケーション間におけるデータの交換手段としても用いられる場合があります。**要素名などのデータ構造を自由に定義を行えるため、データの整理にも向いているといえます。**例えば、商品番号・商品の名前・価格などの要素名をXMLの文書のなかで定義し、データの文字列を要素名のタグで囲みます。データの構造をXMLを用いて記述を行うと、テキストベースで作成できるため、簡単にデータの交換ができ、データの格納が可能です。

*3.さまざまなシステムへ適応している*
XMLの特徴の3つ目として、汎用性が高いことや情報共有がしやすいことも挙げられます。**記述方法が世界標準で統一されていることから、データをXML化することでさまざまなシステムに適用することができるのです。そのため、情報共有や公開も簡単にすることができるでしょう。**また、統一した形式でデータを格納を行えば、他の人がインターネットなどを通じて再利用することも可能です。

HTMLとは、「Hyper Text Markup Language」の略称で、基本的にWebサイトの構造などを作成するために使われるマークアップ言語のことです。一方XMLとは、SGMLを単純化した拡張性に優れたデータを記述するための用途で用いられることが多いマークアップ言語です。なお、SGMLとは「Standard Generalized Markup Language」の略称で、国際標準化機構であるISOによって定義されたマークアップ言語のことです。

電子出版物や大量の文書を効率的に活用するために、SGMLは1980年代に生まれました。しかし、仕様書の問題など実用的ではないため、幅広く普及するまでには至りませんでした。そのため、Web上の情報発信をより容易にするために、HTMLが生まれました。また、拡張性を向上させるために生まれたのがXMLです。

**HTMLを用いる場合、比較的ルールが限られているため、初心者などでも容易に記述することができます。一方XMLでは、制限が多いため、記述の自由度があるというメリットはありますが、記述の際に時間を要する場合が多いでしょう。**

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

これまでにXMLの詳細や特徴、HTMLとの違いについて解説しました。ここからは、XMLのメリットとデメリットについて詳しく紹介しましょう。

ここでは、XMLのメリットについて3つ紹介しましょう。

*1.汎用性と拡張性が高い*
これまでにも説明しましたが、XMLのメリットの1つは汎用性と拡張性の高さです。データの内容によって、文字を修飾するタグを自由に定義することができます。さらにデータ構造も自由に変更できます。したがって、コンピュータやプログラムを用いて別のデータに変化することも容易に可能です。

*2.再利用が可能*
W3Cが策定した世界標準規格によって統一された記述方式であるため、さまざまなシステムで利用することができます。また、他の人がインターネットなどを通じて再利用することも可能です。さらに情報の共有や管理のしやすさもメリットといえるでしょう。**近年は、社内のさまざまな情報を社内・社外問わず展開する必要性が高まっています。**

*3.アプリケーションに依存しない*
アプリケーションのデータ形式をXMLにすることで、タグ付けが行われているため、データ構造を柔軟に変更することが可能です。また、データが特定のアプリケーションなどの環境に依存しないことがメリットとして挙げられます。さらにテキスト形式であるため、人間でも文書の意味がわかりやすいこともメリットの1つです。例えば、csvやバイナリ形式を用いる場合、これらのメリットを活かすことはできません。

XMLのメリットは「汎用性や拡張性が高い」「再利用が可能」「アプリケーションに依存しない」ことが挙げられます。もちろんメリットだけではありません。ここでは、XMLのデメリットについて3つ紹介しましょう。

*1.編集がしづらい*
XMLを使ってWeb制作を行う場合、XMLを学習する必要があります。また、画面上で完成図のイメージを自身の目で確認しながら編集作業を行いたい方も多いですが、XMLではそれができないため、ハードルが高いといわれることもあります。**XMLを知らない方でも、簡単に編集することができるソフトウェアを提供することが、今後のメーカーにおける課題ともいえるでしょう。**

*2.コンピュータ処理の負荷が大きい*
XMLはタグで囲まれたデータフォーマットを用いているため、コンピュータ上で処理する場合には、タグを使っていないデータと比較すると処理対象のデータの容量は大きくなってしまいます。また、プログラム自体をタグを意識して開発しなければならないため、多くのCPUやメモリを消費する場合が多いです。一方、**ハードウェアの性能を上げることや、データ容量やCPU性能を向上させることのできるクラウドサービスを用いることによって改善する場合もあります。**

*3.XMLを扱うことのできる技術者が少ない*
XMLは、コンピュータで自動的に処理することを前提としています。よってXMLで情報を扱うことは、同時にXMLを処理するシステムやプログラムを開発することにもつながります。しかし、XMLを扱う技術者は少ないのが現状です。具体的には、XMLのデータを設計する方やプログラミングを行う技術者だけではなく、**XML化を行う上流工程に携わる人が少ないといわれています。**

これまでに、XMLの詳細や特徴、HTMLとの違い、メリット・デメリットについて詳しく解説しました。XMLとは、文章の見た目の部分や構造を記述するためのマークアップ言語のことを指します。**XMLの特徴は世界標準規格によって統一された記述方式であるため、汎用性や拡張性が高いことが挙げられます。これはメリットともいえるでしょう。一方で、「編集しづらい」「コンピュータへの負荷が大きい」「XMLを扱える技術者が少ない」といったデメリットもあります。**

現在ではXMLを利用することを前提にWebサービス開発の議論が活発に行われています。Webサービスを普及させることを前提として、セキュリティやトランザクション、信頼性のような部分を構成する技術の整備も進められています。したがって、**ビジネスの場面でXMLをどのように利用することによってメリットを引き出すことができるのかを考える段階となっています。**今後としてXMLは、電子ドキュメントを利用する企業の発展に貢献することも考えられます。今後XMLは、電子ドキュメントを利用する企業の発展に貢献するマークアップ言語になるでしょう。

マークアップエンジニアとは？仕事内容や将来性、必要なスキルを解説

XMLとは、文章の見た目の部分や構造を記述するためのマークアップ言語の1つです。XMLの特徴は世界標準規格によって統一された記述方式であるため、汎用性や拡張性が高いことが挙げられます。当記事では、XMLの詳細や特徴、メリット・デメリットについて解説します。

XMLとは文章の見た目の部分や構造を記述するためのマークアップ言語！

XMLの特徴はデータの意味がわかりやく、汎用性や拡張性が高いこと！

XMLのデメリットは「編集がしづらい」「コンピュータ処理の負荷が大きい」「XMLを扱うことのできる技術者が少ない」などが挙げられる！

XMLとは？詳細や特徴、メリット・デメリットを徹底解説！

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

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

この記事では、HTMLの改行の方法や使い分け方を知りたい方のために、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エディタには製品ごとに異なる標準機能、拡張機能があります。自身のスキルが上がってくると、追加機能が必要になる場合もあります。**標準機能や拡張機能の内容、ツールの有無なども確認しておいた方が良いでしょう。**

マークアップ言語の記事（3ページ目）