**CSSで行間を調整するには、行の高さを設定するCSSプロパティを用います。**このプロパティにはいくつかの指定方法があり、指定によってフォントサイズに合わせて行間の設定が可能です。ここでは、行間設定の考え方を学び、設定の種類による表示の違いを学んでいきます。

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

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

### CSSで行の高さを設定するには

CSSで行の高さを設定するには、line-heightプロパティを用います。*このプロパティは、フォントサイズを指定するfont-sizeとも密接に関係しており、フォントサイズとの比率を設定したり、ピクセル値を直接指定したりして行間を設定します。*

具体的には、次のように表示テキストをfont-sizeで指定し（①）、文字間をline-heightで指定します（②）。

~~　【図】：表示テキストと行間・文字間の関係~~

これによって、行間をあけるだけではなく狭くすることも可能なため、表示コンテンツに応じて微調整することもできます。CSSプロパティのmarginやpaddingを使って行間の上だけ、あるいは下だけの調整も可能です。

【参考】：[MDN Docs: line-height](https://developer.mozilla.org/ja/docs/Web/CSS/line-height)
【参考】：[MDN Docs: font-size](https://developer.mozilla.org/ja/docs/Web/CSS/font-size)

### line-heightプロパティの指定方法

*行間設定のline-heightプロパティには、いくつかの指定方法があります。*それぞれの概要は、以下の通りです。

*・normalを指定する（デフォルト値）*
ブラウザなどのユーザーエージェントに依存します。Edge・ChromeやFirefoxでは、font-familyやfont-sizeのおよそ1.2に設定されます。他のブラウザでもおよそ1.2〜1.5の範囲で設定されています。ブラウザのデフォルト値であり、バランスが取れた表示が確認されています。

*・単位なし（推奨）*
font-sizeで指定するフォントサイズに、この値が掛け合わされます。もっとも表示上の問題が少ない指定方法であり、変更する際に推奨される指定方法です。デフォルト値のnormalの場合も、この単位なしに倍率が設定されています。指定方法は、フォントサイズと同じ行間を設定する場合は、 ”line-height: 2.0;” などと指定します。

*・length値を指定する（emで指定）*
emはlengthを指定する単位です。行ボックスの高さに比例して設定されます。ブロック表示などでは、比率の調整が難しいので推奨されていません。

*・パーセントで指定する（%で指定）*
%を付けると比率のパーセンテージとして処理されます。ブロック表示などでは、比率の調整が難しいので推奨されていません。

*・ピクセル値で指定する（pxで指定）*
pxを付けるとピクセル値が高さに反映されます。指定したフォントサイズを確認しながら微調整する必要があります。

CSSのemとは？フォントサイズ指定方法の違いを比較解説！

ここでは、実際にCSSを使用してブラウザの表示を確認していきます。*最初にHTMLの全体構成とCSSの概要を学び、コンテンツを確認していきます。*その後、実際の表示の違いについてブラウザの表示例とともに解説します。

ここでは、HTMLの全体構成とCSSについて学んでいきます。HTMLの全体構成は次の通りです。*HTMLの\<head>部分にCSSのスタイルシートを\<style>～\</style>で記述します。*

```
<!DOCTYPE html>
<html>
<head>
<style>
  ここにCSSを記述する
</style>
</head>
<body>
  ここに表示するコンテンツを記述する
</body>
</html>
```

今回使用したサンプルコードでは、次のようにスタイルシートを記述しています。

```
<style>
.case1 {
    line-height: 1.5;
    font-size: medium;
    color: green;
}
.case2 {
    line-height: 1.5em;
    font-size: medium;
    color: gray;
}
.case3 {
    line-height: 120%;
    font-size: medium;
    color: orange;
}
.case4 {
    line-height: 30px;
    font-size: medium;
    color: blue;
}
.fold {
  width: 12em;
  display: inline-block;
}
</style>
```

case1は、line-heightを単位なしで指定しています。同様にcase2はem値で、case3は%で、case4はpx値で指定しています。表示領域は、inline-blockで表示しています。

### HTMLのコンテンツを記述する

*HTMLのコンテンツは、\<body>〜\</body> に実際の表示コンテンツを記述します。*ここでは、表示領域を\<div>で区切り、line-heightの指定方法を「単位なし」「emで指定」「%で指定」「pxで指定」の4通りで違いを確認します。

ここでは、次のようにcase1〜case4に記述して違いを確認していきます。

```
<body>
  <div class="case1 fold">
    <h1>正しく表示できるか、仕上がりを確認しましょう</h1>
    <p>
    フォントサイズをいくつか設定します。 <br>
    line-heightを単位なしで設定しています。<br
    ここでは、small / medium / largeの中で mediumを設定します。
    </p>
  </div>
  <div class="case2 fold">
    <h1>正しく表示できるか、仕上がりを確認しましょう</h1>
    フォントサイズをいくつか設定します。<br>
    line-heightをemで設定しています。<br>
    ここでは、small / medium / largeの中で mediumを設定します。
  </div>
    <div class="case3 fold">
    <h1>正しく表示できるか、仕上がりを確認しましょう</h1>
    フォントサイズをいくつか設定します。<br>
    line-heightを%で設定しています。<br>
    ここでは、small / medium / largeの中で mediumを設定します。
  </div>
    <div class="case4 fold">
    <h1>正しく表示できるか、仕上がりを確認しましょう</h1>
    フォントサイズをいくつか設定します。<br>
    line-heightをpxで設定しています。<br>
    ここでは、small / medium / largeの中で mediumを設定します。
  </div>
</body>
```

使用するフォントサイズとCSS行間設定内容は表示テキストに記載し、ブラウザの表示から確認できるようにしておきました。

### line-heightのデフォルト値を確認する

最初に、*ブラウザのデフォルト値であるline-heightのnormalを確認していきます。*先の紹介したサンプルコードを用い、 ”line-height: normal;” を指定し、以下のようにブラウザで表示を確認しました。

~~　【図】：line-heightのデフォルト値を確認する~~

フォントサイズは左から、large（①）、medium（②）、small（③）の順です。見出しのテキストもバランスが取れていることが分かります。Edge、Chrome、Firefoxは同じ表示を確認できました。他のブラウザも比率の違いがあるかもれませんが、表示精度は確保されているはずです。

### line-heightの指定の違いを確認する

続いて、*デフォルト設定以外の設定方法を確認していきます。*残る指定方法は、「単位なし」「emで指定」「%で指定」「pxで指定」の4通りです。画面表示の都合でフォントサイズを、large、medium、smallに分けて表示します。

フォントサイズをlargeに設定した場合は、次のように表示されます。

~~　【図】：フォントサイズをlargeに設定した場合の表示~~

左から単位なし（①）、emで指定（②）、%で指定（③）、pxで指定（④）の順です。単位なしはもっともバランスが良く、emや%で指定する場合は問題があることが分かります。pxの場合も追加調整が必要です。

次にフォントサイズをmediumに設定した場合は、次のように表示されます。

~~　【図】：フォントサイズをmediumに設定した場合の表示~~

こちらも、左から単位なし（①）、emで指定（②）、%で指定（③）、pxで指定（④）の順です。単位なしやpx値はバランスが良く、emや%で指定する場合は問題があることが分かります。

最後にフォントサイズをsmallに設定した場合は、次のように表示されます。

~~　【図】：フォントサイズをsmallに設定した場合の表示~~

表示順はlargeやmediumと同様です。単位なし（①）はもっともバランスが良く、em（②）や%（③）で指定する場合は問題があることが分かります。px（④）の場合は間延びしており、追加調整が必要です。

以上のことから、もっとも調整しやすく表示のバランスが良いのは、単位指定なしの指定方法だということが分かります。

**先の表示確認から、line-heightは単位指定なしの指定方法がもっとも手間がかからず表示しやすいことが分かりました。**この方法は推奨される設定方法でもあります。ここでは、単位指定なしの場合に値をどのように調整すべきか考えていきます。

line-heightは、デフォルト normalの状態で1.2、あるいは1.2〜1.5となっており、追加設定が必要な場合は、それ以上の値を設定するのがおすすめです。

特に、アクセシビリティの観点でもline-heightの値が1.5 以上になるように求められており、あまり小さい値では効果を得られないと考えられます。

実際にline-heightを0.2ずつ増やし、次のように1.1〜1.9の5段階で表示しました。

~~　【図】：line-height の値を調整する~~

左から値を、1.1（①）、1.3（②）、1.5（③）、1.7（④）、1.9（⑤）とした場合の表示例です。いずれもバランスが取れた表示がされています。値が小さいほど行間が狭くなるので、1.5〜1.9程度でコンテンツに合わせて検討するのが良いでしょう。

CSSの行間は、line-heightによって設定することができます。デフォルト設定同様に、単位指定なしでは表示バランスも整っています。**変更する場合は、アクセシビリティを考慮してline-heightを1.5以上とするなど、コンテンツに合わせて設定するのがおすすめです。**

その他に関連する内容は、下記の記事でも紹介しています。ぜひ参考にしてください。

CSSのコメントアウトの書き方！HTMLとの違いについても解説

CSSフレームワークとは？効果的な選び方やおすすめ10選を紹介

CSSで行間を調整するには、行の高さを設定するline-heightプロパティを用います。指定した値によって、フォントサイズに合わせて行間を設定することができます。ここでは、行間設定の考え方を学び、設定の種類による表示の違いをサンプルを見ながら学んでいきます。

CSSで行間を調整するには、行の高さを設定するline-heightプロパティを用います

デフォルト設定のnormalのほか、単位なし、emで指定、%で指定、pxで指定、の指定方法があります

設定するには推奨される単位なしを用いて、コンテンツに合わせて値を決めるのがおすすめです

CSSで行間を調整するには？概要から表示の違いをサンプルで解説

2021年10月にWindows11が登場してから数年経ち、Windows11はすっかり定着しました。一方Windows10は2025年10月にサポートが終了予定であり、それに伴いWindows11へのアップグレードや買い替えを進める必要があります。その際、*Windows11 Homeにすべきか、Proを選ぶべきか悩む方も多いでしょう。*

Windows11にはHomeとPro以外にもさまざまなエディションがありますが、個人でエディションを選択される方の大半はHome・Proのいずれかを選択しています。ちなみに、Windows10まで存在した32Bit版はWindows11では廃止され、HomeとProのいずれを選択してもOSは64Bit版のみです。

この記事では、Windows11のエディションの種類・概要・HomeエディションとProエディションの違い・それぞれのエディションの特徴・お得なアップデートの方法などを解説していきます。

Windows11のエディション選択で悩む方は、ぜひ当記事を参考にしてください。

【参考】：[Windows 11 Home を購入 - Microsoft Store ja-JP](https://www.microsoft.com/ja-jp/d/windows-11-home/dg7gmgf0krt0?rtc=1)
【参考】：[Windows 11 Pro を購入 - Microsoft Store ja-JP](https://www.microsoft.com/ja-jp/d/windows-11-pro/dg7gmgf0d8h4?rtc=1)

### Windows10とWindows11はどう違う？

Windows10とWindows11にはどういった違いがあるのでしょうか？大きく変更があった項目には以下のようなものがあります。

- スタートメニュー：画面下中央に配置

- タスクバー：検索ボタンに変更、タスクマネージャーの起動方法も変更

- ウィジェット：Windows10に搭載されていた「ニュースと関心事項」が進化した新規機能

- エクスプローラー：アイコンデザインや表示メニューの変更

- スナップレイアウト：画面サイズと位置調整のために、ポップアップメニューが表示されレイアウトの変更が可能

- Androidアプリ：Microsoft StoreからのAndroidアプリがインストール・実行可能

Windows10ユーザにはWindows11におけるこれらの変化が使いにくいと感じる場合がありますが、スタートメニューやタスクバーなどは位置や設定を自由にカスタマイズすることができます。

また、そのほかにもWindows10風のリボン表示にしたり、使用頻度の高いアプリをスタートメニューに登録したりすることも可能です。

Windows11と10の違いは？どっちがいい? 主な変更点や実際の声を紹介

Windows10はいつサポート終了する？2025年以降はどうなるのか

Windows11に違和感？評判や気になる点のカスタマイズ方法を解説！

### Windows11にアップグレードできない？

Windows11 Home、Proを使用するにあたって、まだWindows11を導入していない場合はまずはWindows11へのアップグレードが必要です。その際、「アップグレードできない」といった問題が発生した場合、以下の原因が考えられます。

- システム要件を満たしていない

- セキュアブートが無効になっている

- Windows10を最新（バージョン22H2）に更新していない

【参考】：[​​Windows 11 の仕様とシステム要件 | Microsoft](https://www.microsoft.com/ja-jp/windows/windows-11-specifications)
【参考】：[Windows 11 とセキュア ブート - Microsoft サポート](https://support.microsoft.com/ja-jp/windows/windows-11-%E3%81%A8%E3%82%BB%E3%82%AD%E3%83%A5%E3%82%A2-%E3%83%96%E3%83%BC%E3%83%88-a8ff1202-c0d9-42f5-940f-843abef64fad#:~:text=%E3%82%BB%E3%82%AD%E3%83%A5%E3%82%A2%20%E3%83%96%E3%83%BC%E3%83%88%E3%81%A8%E3%81%AF%E3%80%81PC,%E3%81%AB%E8%A6%8B%E3%81%9B%E3%82%8B%E8%A8%AD%E5%AE%9A%E3%82%82%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)
【参考】：[PC で TPM 2.0 を有効にする - Microsoft サポート](https://support.microsoft.com/ja-jp/windows/pc-%E3%81%A7-tpm-2-0-%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B-1fd5a332-360d-4f46-a1e7-ae6b0c90645c)
【参考】：[Windows 10 - release information | Microsoft Learn](https://learn.microsoft.com/ja-jp/windows/release-health/release-information)

Windows11にアップグレードする際の注意点とは？条件や期間を解説

Windows11にアップデートできない？5つの原因と対処法を解説！

Windows11対象外PCのアップグレードは諦めるべき？理由と対処法を解説！

## Windows11の各エディションの特徴

WIndows11のHomeとProの違いを見る前に、Windows11にはどのようなエディションが提供されているのかについて見ておきましょう。ここでは、*Windows11の主要なエディションについて紹介します。*

教育機関・学生向けの「Windows11 Education」と「Windows11 SE」、IoT機器向けの「Windows11 IoT Enterprise」については紹介を割愛します。

ちなみに、現在使っているパソコンのWindowsのエディションを確認するには、コマンドプロンプトで「winver」と入力するとOSのバージョン・エディション情報の確認ができます。

【参考】：[Windowsの比較表｜Microsoft ](https://www.microsoft.com/ja-jp/windows/compare-windows-11-home-vs-pro-versions?r=1)
【参考】：[法人向け Windows 11 のエディションを比較する | Microsoft ](https://www.microsoft.com/ja-jp/windows/business/compare-windows-11)

Windows11のコマンドプロンプトはどこにある？ない時の出し方

Windows11 Homeとは、個人向けのパソコンとしては、最もポピュラーなエディションです。日常使いには全く不便や機能不足を感じることはありません。

Windows11の新機能である、「ウィジェット機能」「スナップレイアウト機能」「クリーンアップ機能」「チャット機能」「音声入力機能」「クリップボードの履歴機能」などは普通に使えます。

ただし、ビジネス向けに用意されたBitLocker（ドライブの暗号化）・リモートデスクトップ接続（RDC）・グループポリシー エディター・ドメイン参加などの機能を使いたい場合は、Proエディションが必要です。

**Homeエディションは、主に個人ユースで利用する方向けに設計されています。**Web閲覧・メール・チャット・SMSの利用・年賀状ソフトの利用・テレワークでの利用・モバイル利用など、これらが主な用途である人に適しています。

エンジニアの方は、プログラミング程度であればHomeエディションで特に不自由を感じる場面はないでしょう。

Windows 11のウィジェットを活用する上でおすすめの操作と設定方法

Windows 11でクリーンアップを実践！実際の操作方法を解説

Windows11のクリップボード履歴とは？コピペ作業の改善方法を解説

Windows11 Proは一見、Windows Homeとの違いが分かりにくいのですが、*次のような機能を搭載している点で異なっています。*

ドライブ全体を暗号化する機能です。これを有効にすることで、パソコンが万一盗難に遭ってもドライブ自体がロックされているため、データ漏洩の心配が要りません。

ただし、暗号化されたドライブの復号化には「48桁の回復キー」が必要なため、回復キーを忘れると複合化が困難となります。安全な場所にデータや回復キーを保管しておく必要があります。

【BitLocker暗号化】Windows11で有効・無効にする設定方法を解説

これを用いることで、他のパソコンやスマホから遠隔で操作ができます。たとえば、会社で利用しているパソコンがProの場合、自宅のパソコンから会社のパソコンを遠隔操作ができます。テレワークなどで、会社のパソコンにあるデータを利用したいといったケースでは大変便利です。

Windows11でリモートデスクトップを使うには？起動方法を解説！

Hyper-Vは、Microsoft社製の仮想化ソフトです。Hyper-Vを用いて1台のパソコン上に複数の仮想マシンを作成し、それぞれが独立してOSの起動ができます。たとえば、Windows11のパソコンにWindowsServerやWindows7などの旧版のWindowsOS、あるいはLinuxOSなどを立ち上げることも可能です。

これによって、1台のパソコンであらゆるOS、異なるバージョンのテストも行えます。

【図解入り】Windows11のHyper-V有効化と仮想マシン作成方法

### WIP（Windows Information Protection）機能

企業ファイルと個人ファイルを明確に分離できる機能により、企業ファイルのアクセス権設定・コピー・送信禁止などの制御ができます。個人PCを業務利用するケースでは、企業側データの保全などで効果が期待できます。

その他、ビジネス利用では、AD「Active Directory」への参加・グループポリシー適用など、ビジネスPCとして必要な機能を備えています。

スペック面では、ProはHomeと比べて、搭載できるCPUのコア数、最大メモリの容量が異なります。CPUコア数は、Homeの64コアに対してProは128コアまで対応が可能です。また、最大メモリー容量は、Homeが128GBであるのに対し、Proは2TBまで搭載可能です。

グループポリシーとは、ユーザまたはコンピュータの設定を管理する機能のことです。会社で使用するコンピュータやユーザを同一設定にすることで、セキュリティ面を強化し、扱える機能の制限が可能です。データの盗難リスクを軽減したり、サポートコストを削減したりするメリットがあります。

Windowsの更新において、更新の種類やデバイスへの適用タイミングなどを制限することができます。Windows 10とWindows 11において、Proを含む3つのエディションで利用できる無料サービスです。

### Microsoft Entra ID（旧：Azure Active Directory）

ユーザや顧客など、それぞれのアプリ・デバイス・データに接続するクラウドIDやアクセス管理によって、安全性を高めます。Enterprise State Roamingを活用することで、複数のWindowsデバイスの使用環境が統一され、新しいデバイスを構成するための時間短縮が可能です。 

## ワークステーション向け Windows 11 Pro

ワークステーションとは、画像やデータの処理に特化した処理性能の高いコンピュータのことです。

機能はProとほぼ同じですが、ReFS※（Resilient File System）という最新の障害に強いファイルシステムを採用しており、ミラーリングされたドライブでデータの破損が生じても、データの修正や保護を行える点が異なり、**研究者や専門家などプロユーザ向けに設計されています。**

【参考】：※[Resilient File System (ReFS) の概要｜Microsoft](https://docs.microsoft.com/ja-jp/windows-server/storage/refs/refs-overview)

Windows11 Enterpriseは主に企業など組織向けの製品で「Windows11 Pro版以上」の機能を有しています。**Windows11 Proエディションの機能に加えて「Windows To Go Creator」※1、「BranchCache」※2などの機能を利用できます。**Windows 11 Enterpriseを個人で購入することはできません。

【参考】：※[Windows To Go: 機能の概要  | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows-server/storage/refs/refs-overview)
【参考】：※[BranchCache | Microsoft Docs](https://docs.microsoft.com/ja-jp/windows-server/networking/branchcache/branchcache)

## HomeとProのどちらを選べば良いのか

ここまで、Windows11の各エディションの概要、機能の違いについて解説しました。ではHomeとProのどちらを選択すればいいのでしょう。ここでは、*Homeエディションが適している人、Proエディションをおすすめしたい人について解説します。*

### Homeエディションが向いている人

家庭などでの使用がメインの方は、Proエディションは必要ないと考えてください。**これまでWindowsのHomeエディションを利用して、特に不自由を感じたことがない方は、引き続きHomeエディションのままで問題ないでしょう。**

ただし、BYOD（Bring Your Own Device）を認めている企業では、セキュリティ面が強化されているProエディションに限定しているケースがありますので、BYODを行う予定の方は、Proエディションを選択しておいた方が無難です。仕事で使用する場合は、勤務先の規則を確認してみましょう。

### Proエディションが向いている人

エンジニアの方で、Windows11を仕事でも使う予定の方・社用PCとして導入を検討されている方・テレワークでリモートアクセスを検討している方には、リモートアクセス機能・セキュリティ機能で優れているProエディションをおすすめします。

また、システム開発用PCとして検討している場合は、Hyper-Vを利用して1台のマシンで異なるOS環境の稼働テストができるProエディションが適しています。以上、**BYOD・法人・システム開発での利用には、Proエディションをおすすめします。**

## お得にHomeからProエディションに移行する方法

Windows11にはHomeやProを含め多くのエディションがあり、どのような違いがあるのか、何を選べばいいのか分からない方が少なくありません。この記事では、Windows11のHomeとProの違いや料金差、どっちが軽いかやできないことも紹介します。

Windows11 HomeとProの大きな違いは、セキュリティ面やビジネスシーンでの便利な機能の有無にある

Windows11 HomeとProは新規購入で10,000円近い価格差があり、普段使いであればHomeで不足はない

Windows11 HomeからProへのアップグレードは方法次第では無料も含めてお得に行える

Windows11 HomeとProの違いは？料金差やどっちが軽いか・できないことも解説

## HTMLとCSSは独学で習得できる？

Webサイトやアプリ開発において、HTMLとCSSのスキルや知識は欠かせません。これらの言語は制作物の見栄えに大きく影響するため、ITエンジニアはもちろん、Webデザイナーなどのクリエイターなども習得しておきたいプログラミング言語です。

*これからHTMLとCSSを勉強したい場合、スクールなどには通わずに独学で習得できるのでしょうか。*この記事では、HTMLとCSSの学習において独学が可能なのか、学習方法やおすすめの参考書について紹介します。また、後半ではHTML・CSS以外に身につけたいスキルについても解説しますので、ぜひ参考にしてください。

### 学習のポイントを絞ることが大事

HTMLとCSSを独学で習得する場合、大事なのは「学習のポイントを絞ること」です。詳しくは後述しますが、例えば習得において最初から完璧な理解を求めないようにしたり、エディタを活用してコーディングを楽にしたりするなど、どれも共通点は頑張りすぎないことです。

プログラミングの学習は挫折しやすい側面があるため、習得の難易度に関わらず、どこかで力を抜く箇所を設定することでモチベーションが維持しやすくなるでしょう。また、便利なツールなどを頼り、効率的な学習を意識するのも重要です。

<center>[エンジニア転職を成功させるため<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とは「Hyper Text Markup Language」の略で、Webサイトの文書作成やレイアウト調整に使われる言語です。**

例えば、文章に見出しをつける・画像を挿入する・ボタンやリンクなどの位置を変更するといったことが可能です。HTMLはWebサイト制作に欠かせないものであり、WebエンジニアやWebデザイナーを目指すなら優先的に習得したい言語です。

HTMLではタグというものを使ってレイアウトの調整を行います。例えば、```<B>```というタグを使うことで指定した文章を太字にすることが可能です。HTMLを扱う場合、タグの使い方を一通りマスターする必要があります。

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

CSSとは「Cascading Style Sheets」の略で、Webサイトのレイアウト調整に使われる言語です。HTML単体でもレイアウト調整は可能ですが、ソースコードが煩雑になってしまうことがあるため、レイアウト調整はCSSの方で行うことが多いです。

また、**CSSの方がWebサイトの色や形を変更したり場所を入れ替えたりといった調整が簡単に行えます。**CSSもWebサイト制作に携わるなら習得するべきスキルでしょう。

CSSでは、セレクタ・プロパティ・値の3つを指定することでレイアウト調整を行います。例えば、「p {color: red; }」と記述することで、pタグの色（color）を赤（red）に変更することが可能です。HTMLと違いpタグ箇所をまとめて変更できるため、効率的にレイアウト調整ができます。

HTML・CSSを習得する上での難易度は、そこまで高くはありません。ITスキルのある方（ITの基礎知識がある・プログラミング言語を1つ程度習得している）であれば、1日2〜3時間の学習で、2週間程度でブログサイトが作れるレベルには達することができます。*IT知識のない初心者の方でも1ヶ月程で習得できるでしょう。*

HTML・CSSを習得するには、とにかくひたすら実践的にコードを書く方法がおすすめです。参考書や学習サイトの活字を読むだけでは習得しにくく、手を動かして知識を後から補足する体系的な学習方法が身につきやすくなります。

まずはどのようなWebサイトやアプリを作成したいのかを明確にし、それができる方法を紹介している参考書や学習サイトを活用しましょう。

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

### フロントエンドエンジニアの年収

HTMLとCSSを頻繁に扱うITエンジニアとして、フロントエンドエンジニアを例に挙げて平均年収を算出してみました。

「マイナビエージェント職業別年収ランキング」によるフロントエンドエンジニアの平均年収は385万円（※2023年4月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のコンテンツクリエイタ/デザイナーを参考にすると、平均年収411万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収と比較すると、やや低めであることが分かります。

フロントエンドエンジニアは、スキル・資格・実績によって年収の幅が大きい職種であるため、年収アップにはこれらを充実させることが重要です。**おすすめの資格としては、Webクリエイター能力認定試験があります。**HTML・CSSを扱うエンジニアであれば、取得して損はないでしょう。

【参考】：[マイナビエージェント職業別年収ランキング](https://mynavi-agent.jp/it/jobindex/05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv12_2)
※【平均年収 調査対象者】2020年1月～2020年12月末までの間にマイナビエージェントサービスにご登録頂いた方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf)
【参考】：[Webクリエイター能力認定試験](https://www.sikaku.gr.jp/web/wc/)

## HTML・CSSを最短で学ぶおすすめの方法

続いて、HTML・CSSのおすすめ勉強方法を解説します。HTML・CSSを実務レベルまで上げていく効率的な方法をまとめましたので、これから勉強をはじめる方はぜひ参考にしてください。

まずは、学習サイトで基礎を学ぶのがおすすめです。オンラインで学習できるサービスには様々な種類があり、HTML・CSS未経験者向けに基礎に絞って分かりやすくまとめられています。いきなり参考書に手を出すと難しくて挫折する可能性があるので、まずは学習サイトで基礎を習得しましょう。

また、*学習サイトはスマホでも閲覧できるため、移動中や休憩中に手軽に学習できるのもメリットです。*費用については、無料だったり月額1,000円程度で利用できたりするサービスが多いので、まずは1度試してみましょう。

学習サイトで基礎を習得したら、参考書で応用を学びましょう。HTML・CSSの細かいタグの知識を参考書で補強します。**HTML・CSSの参考書には様々なものがありますが、できるだけ出版日が新しいものを選んでください。**

なぜなら、HTML・CSSはバージョンによって書き方が少しずつ異なるため、古い本だと今は使われていない書き方を学んでしまうからです。参考書は辞書としても活用できますので、1冊は手元に置いておきましょう。

HTML/CSSを費用をかけずに学べるおすすめの入門書15選！

HTML・CSSの文法をある程度覚えたら、サイトを模写してみましょう。*好きなWebサイトのソースを確認し、コードを実際に書いて自分の環境で実行します。*

サイトを模写することで実践的なHTML・CSSのテクニックを知ることができたり、見やすいサイトデザインにするにはどうすれば良いか分かったりするメリットがあります。模写を繰り返し、自分だったらどうするかを考えながらデザインを変更し、デザインスキルを高めていきましょう。

**模写が終われば、実際に1からサイトを作りましょう。**まず、作りたいWebサイトの種類を決めます。練習では自分のプロフィール紹介など簡単なものがおすすめです。次に、サイトデザインをどうするかPowerPointなどにまとめます。

後は、それを参考にコーディングを行います。分からない箇所は随時参考書で確認し、知識の穴埋めを行いましょう。1からサイトを作ることでWebサイト制作の知識がまんべんなく身につき、実務レベルまで到達することが可能です。

<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・CSSを完璧に理解する必要はありません。ベテランのエンジニアであっても、HTMLの細かいタグなどを全て覚えている人は少ないからです。

**ある程度基礎をマスターしたら、制作物の作成に取り掛かってください。**その方がHTML・CSSを学ぶ楽しさも実感できますし、実務レベルに到達する速度も早くなります。

### 参考書を見ながら書いて良い

HTMLのタグなどは主要なもの以外は暗記する必要はなく、Webサイト制作時は参考書を見ながら行っても問題ありません。HTML・CSSに限らずプログラミングの勉強は暗記することよりも、理解することが大切です。*参考書を見ながらでも良いのでひとまず制作物を完成させましょう。*

### 一緒に学習する仲間を見つける

HTML・CSSを独学する場合、一緒に学習する仲間を見つけるのもおすすめです。1人で黙々と学習していると、どうしても途中で飽きてしまい挫折しやすくなります。*SNSやコミニュティなどで仲間を見つけて切磋琢磨することで、途中で飽きず学習を続けることが可能です。*

### おすすめのエディタでコーディングを楽に

ここでは、効率的なコーディングを行うためのHTMLエディタをいくつか紹介します。**エディタを使用することで、コードミスのチェック・タグの種類ごとの色分け・作業のサポートなどを行ってくれます。**初心者の方におすすめしたいHTMLエディタは以下の3つです。

*1.Atom*
定番ともいうべきHTMLエディタです。ベースは英語ですが、日本語化プラグインもあり、初心者から熟練者まで幅広く使えます。
【参考】：[Atom](https://atom.io/)

*2.サクラエディタ*
日本人が開発したエディタです。日本語の解説サイトもあり、使い方に困った際には大きな力になります。
【参考】：[サクラエディタ](https://sakura-editor.github.io/)

*3.Visual Studio Code*
マイクロソフト社提供の無料のエディタです。様々なプログラム開発で重宝します。
【参考】：[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

テキストエディターとは？エンジニア初心者におすすめのエディタも紹介！

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

ここでは、HTML・CSSの独学におすすめの本を紹介します。学習サイトやネットの情報などと合わせて、本で勉強すると効果的に知識をつけることができます。難しい内容だと挫折しやすいため、簡単でわかりやすい本を中心に紹介します。

### HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉

HTML・CSSの知識がない初心者向けの本です。**基本をしっかり学べるのはもちろん、コードやデザインの詳細といった応用部分も学べます。**フルカラーイラストなので、字体だけでは理解しにくい概念や考え方についても分かりやすく学べます。また、最新のHTML Living Standardにも対応しているため、今時に必要な知識を習得できます。

▪著者：株式会社アンク
▪ページ数：200ページ
▪出版社：翔泳社
▪発売日：2023/03/22

【参考】：[HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉 ](https://www.shoeisha.co.jp/book/detail/9784798181059)

### できるポケット Web制作必携 HTML&CSS全事典 改訂3版

本書は、HTMLの要素（タグ）とCSSのプロパティを解説したリファレンスの書籍です。**Webサイトのコードが読めるようになったり、理解できるようになったりすることを目的としています。**タグやプロパティの解説のみならず、HTMLやCSSの仕様・記述方法・文字参照・URLなど、基礎知識についてしっかり解説しています。

サンプルコードをダウンロードできる読者特典も付いています。

▪著者：加藤 善規、できるシリーズ編集部　
▪ページ数：592ページ
▪出版社：インプレス
▪発売日：2022/08/22

【参考】：[できるポケット Web制作必携 HTML&CSS全事典 改訂3版](https://book.impress.co.jp/books/1121101140)

### 教科書では教えてくれないHTML&CSS

参考書や講座の学習だけでは現場で活躍できるレベルに達せないことが多い傾向がありますが、本書はこれまでに培った知識を現場で使えるレベルに引き上げることを目的としている本です。**初心者からプロになるためのレベルアップを目指します。**ある程度他の参考書などで知識を身につけた方におすすめです。

言語・開発の記事（4ページ目）