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

【関連記事】[*HTMLのtableで表を作成するには？基本用法からCSSまで図解*](https://and-engineer.com/articles/ZyMQ5BEAAB8ATD6M)

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

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

HTMLとは？特徴やできることなど基礎知識を初心者向けに紹介

HTML・CSSとは何か？使い方やできること、独学方法を解説！

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

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

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

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

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

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

Windows標準の「メモ帳」、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とCSSの違いは？基本知識と学習方法も解説！

HTMLでJavaScriptを動かすには？Javaについても解説

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

**「サクラエディタ」は、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
▪料金：無料で使用できますが、継続的に使用するには有料ライセンス購入が必要です。

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

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

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

▪タイプ：オンライン
▪料金：無料で使用できます。

 【参考】：[Liveweave](https://liveweave.com/)

**「Online HTML Editor」は、オンライン上でコーディングができるテキストエディタです。**他のエディタとは異なり、ドキュメント編集結果から、テキスト入力や画像の挿入、装飾などのHTMLソースを得ることができます。

そのため、ワープロ感覚で扱いやすく、初心者の方にもおすすめです。記述したHTMLをプレビュー画面でリアルタイムに確認することもできます。また、オンラインで利用できるため、インストール不要です。

【参考】：[Online HTML Editor](https://onlinehtmleditor.dev/)

HTML/CSSを学ぶと、多くの方は使い勝手の良いHTMLエディタが必要だと感じるようになります。ここでは、HTML/CSS初心者の方に向け、おすすめのHTMLエディタを9つ紹介していきます。自分に合うHTMLエディタを見つけてHTMLの達人を目指しましょう。

HTML/CSSを効率的・効果的に作成するためには、HTMLエディタを利用することが早道になる。

HTMLエディタにはオンライン・インストールタイプがあるが、状況に応じて使い分けるとよい。

HTMLエディタはさまざまなプログラム言語のコーディングに適したものがあり、エンジニアの武器として活用したい。

【2024年版】初心者向けのHTML編集ソフト（エディタ）おすすめ9選

HTMLでWebページの文章を表現する際に、テキストを読みやすく整理するためには適切なタグの使用が欠かせません。特に、*pタグとbrタグは、基本的なテキストの整形に役立つ重要な要素です。*

pタグ\<p>は段落を表し、長い文章を適切に区切るのに適しています。一方、brタグ\<br>は、行内の強制的な改行に使われます。

この記事では、pタグとbrタグの違い、それぞれの役割や使い分け、具体的な使用方法について詳しく解説します。

【参考】：[MDN Web Docs](https://developer.mozilla.org/ja/)

HTMLタグはWebページの構造や内容を記述するための要素です。構造や内容の整理に役立ちます。例えば、「見出し」や「段落」、「画像」といった要素をHTMLタグで囲むことで、*ブラウザにどのように表示するかを指示します。*

【参考】：[Search: "HTMLタグ"｜MDN Web Docs](https://developer.mozilla.org/ja/search?q=HTML%E3%82%BF%E3%82%B0)

HTMLタグは、**Webブラウザに「ここには見出しがあります」「ここは段落です」といった情報を伝えることで文章を構造化し、Webページの表示形式を決定します。**

またSEO※対策では非常に重要な役割を担っています。（※SEOは「検索エンジン最適化」のことであり、Googleなどで検索した時にサイトを上位に表示させるための方策を意味します。 ）

**タグは、「<」と「>」で囲まれた単語で表されます。**例えば、\<p>は段落を表すタグです。多くのタグには開始タグと終了タグのペアがあり、開始タグで要素の始まりを、終了タグで終わりを示します。

・開始タグ: \<tagname>
・終了タグ: \</tagname>

*【タグの実例】*
次のコードでは、pタグ\<p>で囲まれた部分が段落として表示されます。

```
html
<p>これは段落です。</p>
```

HTMLタグは、Webページに表示させる情報を指定する文字列です。タグを使用することで、文章に意味づけ（マークアップ）を行うことができ、Webページのテキストや画像、リンクなどを正しく表示できます。**HTMLタグには次に挙げるように、様々な種類のタグがあります。**

・構造を表すタグ：\<html>、\<head>、\<body>など、ページ全体の構造を定義するタグ
・見出しを表すタグ：\<h1>、\<h2>、\<h3>など、見出しレベルを指定するタグ
・文章を表すタグ：\<p>（段落）、\<a>（リンク）、\<img>（画像）など、文章や画像を表示するタグ
・リストを表すタグ：\<ul>（箇条書きリスト）、\<ol>（番号付きリスト）、\<li>（リスト項目）など、リストを作成するタグ
・表を表すタグ：\<table>、\<tr>、\<td>など、表を作成するタグ

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

タグの中には、さらに詳細な情報を指定するための属性を持つものがあります。**属性は、開始タグの中に「=」と「値」を指定して設定します。**

下記の例では、\<a>タグのhref属性にリンク先のURLを指定しています。

```
html
<a href="https://example.com">リンク</a>
```

pタグ\<p>は「paragraph（段落）」を意味し、HTMLで段落を作成するためのタグです。ブラウザがこのタグを認識すると、*自動的に前後に空白（インデントやマージン）を挿入して、テキストが整った形で表示されます。*

【参考】：[Search: "pタグ"｜MDN Web Docs](https://developer.mozilla.org/ja/search?q=%EF%BD%90%E3%82%BF%E3%82%B0)

**HTMLでテキストを段落ごとに分ける際は、基本的にpタグを使います。**例えば、ブログ記事や説明文など、複数の段落で構成される文章の場合、各段落をpタグで囲むことで、視覚的に見やすい構成になります。

pタグ\<p>の使い方はシンプルです。以下に基本的な使い方を示します。

```
html
<!-- HTMLコード例 →
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
```

このように、pタグを使うと各段落が個別に分かれて表示され、読みやすい文章を作成できます。

pタグには、以下のようなalign属性、CSSを使用した中央揃え、class属性、id属性などの属性を使用できます。

*【align属性】*
align属性はテキストの整列（左揃え、右揃え、中央揃えなど）を設定するための属性ですが、align属性は非推奨であり、CSSを使用したスタイリングが一般的です。

```
html
<!-- 推奨されない方法 →
<p align="center">中央揃えの段落</p>

<!-- 推奨される方法（CSSを使用） →
<p style="text-align: center;">中央揃えの段落</p>
```

*【CSSを使用した中央揃え】*
外部のCSSファイルや\<style>タグを使用する場合は次のように書きます。

```
/* CSS */
p {
  text-align: center;
}
```

*【class属性、id属性】*
classやid属性はCSSと組み合わせてスタイリングやJavaScriptによる制御に使われます。

```
html
<p class="important">重要な情報を含む段落</p>
```

### pタグを使っても改行しない

HTMLでpタグを用いても、意図したように改行しないケースがあります。以下に、**pタグを用いても改行しない場合の想定原因と対策について記します。**

*◼︎CSSのスタイルの影響*
・CSSで「line-height: 0;」などの設定がされていると、行間がつぶれてしまい、改行が視覚的に確認できなくなることがある
・width属性で要素の幅を固定した場合、内容が幅を超えると自動的に折り返されるが、意図した位置で改行されないことがある
・「display: inline」などの設定により、要素がインライン要素として扱われると、ブロックレベル要素であるpタグの特性が失われ、改行されなくなることがある

以上の対応としては、該当する要素のCSSスタイルを確認し、不要なスタイルを削除するか、修正します。

*◼︎HTML構造の誤り*
・pタグの閉じタグ\</p>が抜けていると、次のpタグまでが1つの段落として扱われてしまう可能性がある
・pタグの中に別のpタグを入れ子にすると、論理的に矛盾が生じたり、階層構造が崩れたりする

pタグの開きと閉じ、入れ子の有無などを確認して、正しい構造になっているかを確認しましょう。

*◼︎ブラウザの表示設定*
・フォントサイズが小さすぎると、1行が長くなり、改行すべきところで改行がされなくなる場合がある
・ブラウザには、HTML、CSS、JavaScriptなどのコードを読み込み、それを画面に表示するためのレンダリングエンジンがあるが、ブラウザによってエンジンが異なり、表示結果が異なる場合がある

この現象では、異なるブラウザで表示して、再現性があるかを確認しましょう。

### pタグを使わないで改行する方法

HTMLではpタグを使わないで改行する方法はあるのでしょうか？段落を区切るために一般的にpタグが使われますが、必ずしも必須ではありません。*状況に応じて、以下のような方法で改行を表現することができます。*

*◼︎brタグを使う*
特定の場所で強制的に改行したい場合には、 brタグ\<br>を使用します。

```
html
<p>これは1つの段落です。<br>
ここで改行します。<br>
新しい行になります。</p>
```

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

*◼︎CSSで改行を制御する*
デザインに合わせて柔軟に改行を調整したい場合には、次のようにCSSを用いて改行を制御できます。

・white-space: pre：空白や改行をそのまま表示する
・word-wrap: break-word：長すぎる単語を途中で折り返す
・overflow: hidden; text-overflow: ellipsis;：テキストが要素の幅を超えた場合に省略する

```
css
/* CSSで改行を保持しつつ必要に応じて折り返す */
p {
  white-space: pre-wrap; /* 改行を保持しつつ、必要であれば折り返す */
}
```

*◼︎divタグを使う*
ブロック要素として扱いたい場合には、divタグ\<div>内にコンテンツを配置し、CSSでスタイルを調整します。

```
html
<div>
  これは<br>
  複数の<br>
  行に<br>
  渡る<br>
  テキストです。
</div>
```

pタグ以外にも、brタグやCSSを使って改行を表現できます。それぞれの方法の特徴を理解し、状況に合わせて使い分けることが重要です。

brタグ\<br>は「break（改行）」を意味し、強制的に改行を行うためのタグです。段落単位で改行を行うpタグとは異なり、同じ段落内で特定の箇所に改行が必要な場合に使われます。

例えば、詩のように行ごとに改行が必要な場合や、住所の表示などで改行が求められる場合に適しています。

```
html
<p>静かな湖<br>澄みわたる空<br>心安らぐひととき</p>
```

brタグ\<br>は単体で使用するタグであり、\</br>と閉じる必要はありません。また、過度に使用するとレイアウトが乱れる可能性があるため、適度に使うように注意が必要です。


HTMLで文章を記述する際、改行を表現するためにpタグとbrタグを使いますが、この2つのタグは、それぞれ異なる役割を持っています。ここでは、*pタグとbrタグを適切に使い分けるためのポイントを解説します。*

### それぞれのタグの役割を理解する

**pタグとbrタグのそれぞれの役割は次の通りです。**

pタグ\<p>：段落を区切るために使用します。文章の構成を明確にする役割があり、読みやすいテキストを実現します。
brタグ\<br>：行内での強制改行が必要な場合に使用します。

### 段落の区切りにはpタグを、行内の改行にはbrタグを使う

一般的な文章では、*段落ごとにpタグを使い、詩や住所などで行内改行が必要な場合にbrタグを使用します。*ただし、brタグの多用は避けるべきであり、適切な場所でのみ使用するべきです。特に、pタグを使うとブラウザが段落間にスペースを追加してしまうため、注意が必要です。

ここでは、**pタグやbrタグの正しい使い方、間違った使い方の具体例を見てみましょう。**

*【正しい使い方】*
最初に正しい使い方の具体例を紹介します。

HTMLでWebページの文章を表現する際に、適切なタグの使用が重要です。特に、pタグ<p>とbrタグ<br>は、基本的なテキストの整形に役立つ大切な要素です。当記事では、pタグとbrタグの役割と使い方を解説します。HTML入門者の方は参考にしてください。

pタグとbrタグの役割は、pタグ\<p>は段落の区切りに、brタグ\<br>は行内改行に使用

タグの使い分けは適切なタグ選択により、読みやすく整理されたページが作成できる

brタグを段落区切りに使うとレイアウトが乱れやすく、適切な使い分けが重要

HTMLのpタグの適切な使い方とは？brタグとの使い分けも解説

HTML/CSSはWeb制作において欠かせないものです。Webデザインに携わったことがなかったり、業務で目にするものの実際に記述はしたことがなかったりする場合、定義が曖昧になっている方も多いでしょう。

*そこで、まずはHTML・CSSの基礎知識について解説します。*HTMLとCSSの違いやそれぞれの役割・関係、使い方についてまとめていきます。

HTMLとは、Webページを作成するための言語のことで、タグを使ってWebページの構造を定義します。たとえば、見出しや本文などテキストのレベル分け、表・画像・リンクなどの配置など、Webページに必要な要素を任意に組み立てることが可能です。

HTMLはWebページの骨組みとなる言語で、**HTMLで書かれたソースコードをブラウザに読み込ませることで、ブラウザがHTMLをWebページに変換して表示します。**

HTML入門！初心者向けに基礎コード・文法一覧・勉強方法を解説！

CSSとは、主にWebページのデザインを変更するための言語です。CSSを使うことで、Webページの文章の色を変更する・フォントサイズを変更するなどの調整ができます。

なお、HTMLのみでデザインを調整することもできます。CSSがなかった頃は、文章の構造設定・デザイン設定をHTMLだけで行っており、現在も技術的には可能です。

しかし、HTMLでデザイン設定を行うと、ソースコードが長くなり読みにくくなります。ソースコードが読みにくくなると、Webページを修正する際に該当箇所を探すのが困難になってしまいます。

そこで、デザイン調整はHTMLではなくCSSで行うようになりました。**デザイン関連の記述をCSSですることで、HTMLのソースコードが見やすくなります。**現在ではWeb制作で必ずと言って良いほどCSSが使われています。

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

「HTML・CSSは難しいのでは？」と気になる方もいるでしょう。**ITエンジニアの方からすれば、HTMLやCSSはそこまで難しくはないと思われます。**基本的な構造がシンプルなので、少なくともPHPやJavaScriptと比べると習得は簡単です。

しかし、タグの種類やプロパティの書き方など覚えることが多いので、HTML・CSSを理解するためにはある程度の学習時間を確保する必要があります。

Web関連の仕事に就きたいと考えている方は、就職・転職活動を行う前に習得して、使いこなせるようになっておくと有利です。未経験からITエンジニアを目指すなら、自分のスキルに合った企業を探してくれる転職エージェントの活用をおすすめします。

<center>[あなたに合った企業選びをサポート致します。<br/>エンジニア転職のご相談はぜひ<br/>*『マイナビIT エージェント』*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)</center>

では、HTMLとCSSの基本文法を見ていきましょう。HTMLもCSSも基本文法は初心者でも覚えやすいです。実際によく使われる構成要素の例と合わせて解説していきます。

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

### HTMLの代表的なタグと書き方

HTMLは、タグを用いて記述していく言語です。**開きタグと閉じタグ<>を用いてタグの内容を囲み、それらを複数組み合わせることでWebページを構成していきます。**以下のようなものがHTMLタグの代表例です。

~~【図】基本構造を定義するタグ~~

*▪テキストを定義するタグ*（bodyタグ内で使う）

~~【図】テキストを定義するタグ~~

*▪リストを作成するタグ*（bodyタグ内で使う）

~~【図】リストを作成するタグ~~

*▪テーブル（表）を作成するタグ*（bodyタグ内で使う）

~~【図】テーブル（表）を作成するタグ~~

*▪メディアを表示するタグ*（bodyタグ内で使う）

~~【図】メディアを表示するタグ~~

CSSは、**「セレクタ」「プロパティ」「値」の3要素で記述するのが基本です。**基本形は、以下のようになります。

3つの要素はそれぞれ以下の内容を定義する役割を持っています。

▪セレクタ：どの箇所を調整するのか（HTMLタグの種類）
▪プロパティ：どのようなスタイル・デザインを適用させるか
▪値：どのスタイル・デザインにするか、どのくらい調整するか

一部ではありますが、プロパティや値には以下のようなものが使われます。よく使われる代表的な種類です。

*プロパティの種類*
▪font-family：文字の種類
▪font-size：文字サイズ
▪font-weight：文字の太さ
▪color：色
▪height：高さ
▪width：横幅
▪background-color：背景色

*値の種類*
▪blue：青
▪px：ピクセル
▪cm：センチメートル
▪pt：ポイント
▪s：秒

値には、blueなどスタイルの名前や数値が入ります。

例えば、見出し1（h1）の文字色を青にしたい場合、h1{color:blue;}、その段落の文字サイズを20ピクセルにしたい場合、p{font-size: 20px;}となります。複数のプロパティを使う場合は、p{font-size: 20px, color: blue;}のように「,」で区切ります。

CSSでできること一覧！HTMLやJavaScriptとの違い、メリットも解説

HTMLとCSSを組み合わせて使うには、骨子となるHTMLのソースコードにCSSを適用させる必要があります。HTMLにCSSを適用させる方法は次の3つです。

▪*HTMLタグに直接書き込む*（インラインスタイルシート）
▪*headタグに書き込む*（内部スタイルシート）
▪*CSSファイルを読み込む*（外部スタイルシート）

HTMLタグに直接書き込む方法では、CSSを適用させたい箇所に「style="〇〇"」（〇〇はCSSのプロパティと値）を追加してCSSとHTMLをつなげることができます。

```
<h1 style="color: blue;">〇〇</h1>
```

headタグ２を使う方法では、そのページに適用したいCSSのコードをheadタグ内にまとめて記述します。

```
<head>
<style>
h1{color: blue;}
</style>
</head>
```

ただし、CSSはソースコードの可読性を上げるために別ファイルに記述することが多いです。外部のCSSファイルを読み込むやり方については後ほど解説します。

続いて、初心者向けにHTML・CSSの基本的な使い方を紹介します。*HTMLとCSSを使ってWebサイトをどのようにデザインするのか、初歩的な手順をまとめました。*HTMLとCSSのファイルの作り方やブラウザに表示する方法などが分からない方は、こちらを参考にしてください。

### ①テキストエディタとWebブラウザを用意する

まずは、HTML・CSSでWebサイトを作る際に必要なものを準備します。**HTML・CSSのソースコードを記述するには、テキストエディタが必要です。**テキストエディタは普段使っているもので問題ありません。

テキストエディタをインストールしていない方は、メモ帳でもソースコードを記述することができます。

続いて、*HTML・CSSの表示結果を確認するために、Webブラウザが必要です。*Webブラウザの種類はさまざまありますが、特に指定はありません。パソコンにあらかじめインストールされているもので問題ありません。

この2つがあれば、Webサイトを作成することができます。ただし、作成したWebサイトをネット上に公開するためには、Webサーバが必要です。Webサーバは自分で構築したり、レンタルしたりして準備します。今回は作成したWebサイトをパソコンで確認する手順のみ説明しますので、Webサイトの公開方法は割愛します。

### ②HTMLの雛形を作り、ファイル保存する

次に、HTMLの雛形を作ります。HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザがHTMLのソースコードを正しく読み込むことができません。

*HTMLには多くのタグがありますが、どのタグを利用する場合も基本的には以下の要素が必要になります。*テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。

```
<html>
<head>
</head>
<body>
</body>
</html>
```

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