**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で行間を調整するには？概要から表示の違いをサンプルで解説

## 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

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

▪著者：狩野 祐東
▪ページ数：336ページ
▪出版社：技術評論社
▪発売日：2021/07/17

【参考】：[教科書では教えてくれないHTML&CSS](https://gihyo.jp/book/2021/978-4-297-12193-8)

### これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本

**学校のテキストとして使用されるなど、参考書としての信頼度の高い1冊です。**フルカラーかつイラストも豊富なので直感的に理解しやすく、1つ1つの解説も丁寧なのが特徴です。読破することで、HTML・CSSの基礎知識を一通り網羅できます。

▪著者：Capybara Design 竹内 直人/竹内 瑠美
▪ページ数：288ページ
▪出版社：翔泳社
▪発売日：2021/10/14

【参考】：[これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本](https://www.shoeisha.co.jp/book/detail/9784798170114)

## HTML・CSS以外に身につけたいスキル

最後に、HTML・CSS以外に身につけたいスキルを解説します。WebエンジニアやWebデザイナーとして活躍したいなら、HTML・CSS以外にもいくつか必要なスキルがありますので以下で詳しく紹介します。

JavaScriptはプログラミング言語の1つであり、Webページ上の動きをつけるために使われるものです。例えば、フォームに書き込んだ際にアラートを表示したり、ページにアニメーションやスライドショーをつけたり、といったことができます。

**HTML・CSSだけでなくJavaScriptも扱えることで、作成できるWebサイトの幅が広がり獲得できる案件の種類も増えるでしょう。**

JavaScriptはHTML・CSSに比べると難しいですが、習得すれば市場価値の高いエンジニアを目指すことができます。ある程度HTML・CSSを理解できたら、JavaScriptにも挑戦しましょう。

JavaScriptとは？特徴・メリット・何ができるのかを解説

Webデザイナーを目指すならデザインスキルも身につけたいところです。*まずは、PhotoshopやIllustratorなどのデザインソフトの使い方をマスターしましょう。*これらのソフトの使い方は動画サイトなどで分かりやすく解説された教材もあるため、それらを参考に実際に使いながらマスターするのが良いです。

加えて、他のサイトをよく観察し、美しいデザインにするにはどうすれば良いかを学習しましょう。ボタンやリンクの位置を使いやすくしたり、写真を目立たせるレイアウトにしたりするテクニックを学び、実際にWebサイトを作成します。

制作物をいくつか作ったらポートフォリオとしてまとめ、転職的に企業に提出してアピール材料とすることが可能です。未経験からWebデザイナーを目指す場合、制作物を見せてスキルレベルを証明することは重要になります。

独学でWebデザインを学ぶ方法とその注意点について徹底解説！

Webサイトやアプリ開発において、HTML・CSSの存在は欠かせません。難易度は高くありませんが、覚えることが多いため、しっかりとした学習時間の確保が必要です。今回は、初心者の方が独学でHTML・CSSを習得し実務レベルになるまでの勉強方法やポイントについて解説します。

HTML・CSSはWebサイトの文書作成やレイアウト調整に使われる

学習サイトや参考書で基礎・応用を学び、その後実際にWebサイトを作っていくのが良い

必要に応じてJavaScriptやWebデザイン、PHPなども併せて学習していくと良い

HTML・CSSは独学で実務レベルになれる？初心者におすすめの学習方法

*CSSフレームワークは、Webサイトのデザインを効率的に構築するためのテンプレートやコンポーネントを提供するツールです。*通常、レスポンシブデザインをサポートしており、さまざまなブラウザやデバイスでの表示を最適化できます。

フレームワークを活用すれば、ゼロからCSSを手書きする手間を省き、標準化されたデザインを迅速に適用することが可能です。本記事では、CSSフレームワークのメリット・デメリットを踏まえつつ、プロジェクトに最適なフレームワークの選び方と、特におすすめのフレームワーク10選を紹介します。

CSSフレームワークを利用してみたい方、最適なフレームワークを探している方はぜひ参考にしてください。

CSSフレームワークとは、WebサイトやWebアプリケーションを作成する際に、あらかじめデザインされた部品やレイアウトがセットになったものです。**これらを利用することで、1からCSSを記述する手間を省き、効率的に開発を進めることができます。**

フレームワークとは？プログラミング言語ごとに代表的なものを解説

CSS（Cascading Style Sheets）とは、Webページのデザインやレイアウトを装飾するためのプログラミング言語です。HTMLで構造を作ったWebページに、CSSを使って色をつけたり、フォントを変えたり、配置を調整したりすることで、見た目を美しく、そして機能的にすることができます。

**HTMLとCSSの関係で例えるなら、HTMLが家の骨組みだとすると、CSSは壁の色や壁紙、家具を選ぶようなものです。**HTMLがコンテンツの構造を定義するのに対し、CSSはコンテンツの見た目やレイアウトを定義します。

【参考】：[CSS の基本 - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

## CSSフレームワークのメリットとデメリット

CSSフレームワークは、Web開発を効率化し、高品質なWebサイトを構築するための強力なツールです。では、CSSフレームワークを利用することで、どのようなメリット、デメリットがあるのでしょうか。それぞれ確認しておきましょう。

CSSフレームワークを利用すると、**開発効率の向上やデザインの一貫性キープ、異なるブラウザへの対応が不要といったメリットが得られます。**それぞれ詳しく見ていきましょう。

*■ 開発効率向上*
あらかじめデザインされたコンポーネントが豊富に用意されているため、1からCSSを記述する手間を省き、開発時間を大幅に短縮できます。またフレームワークのアップデートにより、セキュリティ対策や機能拡張が自動的に行われる場合があり、メンテナンスコストを削減できます。

*■ デザインの一貫性*
フレームワークが提供するデザインガイドラインに沿って開発することで、サイト全体のデザインを統一し、プロフェッショナルな見た目を実現できます。

*■ クロスブラウザ対応*
異なるWebブラウザ（Chrome、Firefox、Safariなど）上では、HTMLやCSSの解釈が微妙に異なるため、同じコードでも表示が異なることがありますが、CSSを使うことでHTMLの構造を保ちながら、各要素のスタイルを統一的に定義できます。これにより、ブラウザ間の表示の差を最小限に抑えられます。

CSSフレームワークには前述のように多くのメリットがありますが、デメリットもあります。このデメリットを理由にフレームワークを使わないという人もいます。**以下に挙げるデメリットを認識し、それらを最小化、回避する方策を講じながら導入すると良いでしょう。**

*■ 学習コストが必要*
新しいフレームワークの利用では、フレームワーク独自の書き方やルールを学ぶ必要があり、習得するには時間がかかる場合があります。また既存のプロジェクトやワークフローへの適合に苦労する場合もあります。

*■ 自由度の低下*
フレームワークは事前定義されたスタイルを提供するため、独自のデザインを完全に再現するにはカスタマイズが必要なため、自由なデザインを行うことが難しくなる場合があります。

CSSフレームワークを選ぶ際には、プロジェクトの規模や開発チームのスキル、デザインの自由度など、様々な要素を考慮する必要があります。以下に、選ぶ際に気をつけるべき点をまとめました。

ただし、CSSフレームワークは次々と新しいものが登場しており、トレンドに左右されやすいため、常にウォッチングすることが必要です。

### プロジェクトの規模と複雑さ

*プロジェクトの規模や複雑さを考慮して選択します。*大規模なプロジェクトでは、コンポーネントや機能が豊富なフレームワークが役立ちます。一方、小規模なサイトでは、軽量でシンプルなフレームワークが適しています。例えばPure.cssなどがパフォーマンス面で有利です。

デザインに対して高いカスタマイズ性を求める場合は、シンプルで柔軟性のあるフレームワークを選ぶと良いでしょう。*ユーティリティファーストのフレームワークは自由度が高いですが、使いこなすには慣れが必要です。*

Webデザイン用語を徹底解説！Webデザイナーを目指す方は必見

軽量なフレームワークは、ロード時間が短く、SEOやユーザ体験に好影響を与えます。特に、大規模なWebサイトや、多くのユーザがアクセスするサイトでは、パフォーマンスがユーザエクスペリエンスに大きく影響しますので、*特にモバイルファーストで設計されているものを選ぶと良いでしょう。*

人気のあるフレームワークは、コミュニティが活発で、サポートやドキュメントが充実しているため、トラブルシューティングや拡張も容易です。*充実したコミュニティを上手に利用することで、問題解決を早く行え、プロジェクトの成功に繋げられます。*

習得のしやすさも選定基準です。シンプルなものは短期間で使いこなせますが、複雑な機能を持つフレームワークは、各フレームワーク独自の構文やルールを学ぶ必要があり、*相応の学習コスト、学習時間がかかります。*

HTML・CSSは独学で習得できる？初心者におすすめな最短の勉強方法

## おすすめのCSSフレームワーク10選

CSSフレームワークを選ぶ際には、プロジェクトの規模、デザインの自由度、チームのスキルなど、様々な要素を考慮する必要があります。以下に、人気の高いおすすめのCSSフレームワーク10選を紹介します。

世界で最も人気のあるCSSフレームワーク。豊富なコンポーネントやレスポンシブデザインに対応しており、広範囲のプロジェクトに利用可能です。**用途としては、企業のウェブサイトやeコマースなど、一般的なWebプロジェクトに適しています。**

また、Webサイト上でUIを生成でき、Reactで利用できるのもBootstrapの人気の理由です。

【参考】：[世界で最も利用されているHTML、CSS、JSのライブラリ｜Bootstrap ](https://getbootstrap.jp/)

Bootstrapとは？概要やできること・パッケージの種類を解説

ユーティリティファーストのアプローチで、クラスを組み合わせて自由なデザインが可能です。カスタマイズ性が高く、パフォーマンスも優れており、**独自のデザインが求められるプロジェクトや、細かなスタイリングが必要なサイトの開発に適しています。**

【参考】：[Tailwind CSS ｜Rapidly build modern websites without ever leaving your HTML](https://tailwindcss.com/)

GoogleのMaterial Designをベースにしたデザインを提供しています。モダンでクリーンなフラットデザインが魅力です。**おしゃれでモダンなWebアプリや、デザイン性を重視するプロジェクトに適しています。**

【参考】：[Documentation ｜Materialize](https://materializecss.com/)

高い柔軟性を持ち、カスタマイズ性が高く、またレスポンシブ対応が充実しています。グリッドシステム、フォーム、ボタンなど、幅広いコンポーネントが用意されており、大規模なプロジェクトにも対応できます。**特に、複雑なUIを持つ大規模なWebサイトの開発に向いています。**

【参考】：[The most advanced responsive front-end framework in the world. | Foundation](https://get.foundation/)

モバイルファーストの設計で、軽量でシンプルな特徴があり、迅速なプロトタイプ作成が可能です。**中小規模のプロジェクトやシンプルなWebサイトの開発に向いています。**またFlexboxを基盤としているため、現代的なレイアウトを簡単に作成できます。

【参考】：[Bulma： Free, open source, and modern CSS framework based on Flexbox](https://bulma.io/)

非常に軽量なフレームワークで、基本的なスタイルだけを提供します。モバイルファースト設計で、静的なページや、レスポンシブデザインに優れており、**パフォーマンスが最優先されるプロジェクトに向いています。**

【参考】：[Pure.css](https://pure-css.github.io/)

自然言語のようなクラス名が特徴で、直感的にコードを書くことができます。人間工学に基づいたデザインで、ユーザエクスペリエンスを重視するWebアプリケーション開発に適しています。**特にデザインにこだわりたい、またはチームで開発する際にデザインの統一性を保ちたい場合に向いています。**

【参考】：[Semantic UI](https://semantic-ui.com/)

Appleが提供するアプリ構築のためのフレームワークで、高度なカスタマイズUIが可能です。ネイティブアプリ風のデザインを持つWebアプリで、**Appleのデザインガイドラインに沿ったデザインを作成できます。**

【参考】：[UIkit](https://getuikit.com/)

できる限り少ないCSSでWebサイトを作成するためのフレームワークです。レスポンシブ対応で軽量で高速ながら、豊富なコンポーネントを備えています。また、**クラス名とCSSプロパティがほぼ1対1で対応しているため、自由度の高いカスタマイズが可能です。**

【参考】：[TACHYONS - Css Toolkit](https://tachyons.io/)

SASSベースで非常にカスタマイズしやすいという特徴を持ち、**高度なカスタマイズが必要なプロジェクトや、クリエイティブなWebサイトや、クリエイティブなWebサイトに適しています。**またモバイルファースト設計で、様々なデバイスに対応できます。

【参考】：[Spectre.css CSS Framework](https://picturepan2.github.io/spectre/)

## 自分やプロジェクトに合ったフレームワークを活用しよう

ここまで、CSSフレームワークのメリット・デメリット、プロジェクトに最適なフレームワークの選び方と、おすすめのフレームワーク10選を紹介しました。CSSフレームワークは、Web開発を効率化し、デザインの一貫性を保ちながらレスポンシブなレイアウトを簡単に構築できるツールです。

フレームワークを利用することで開発時間を短縮し、ブラウザ間の互換性も確保できますが、一方で自由度が制限されることや学習コストがかかるといったデメリットもあります。

*選定時にはプロジェクトの複雑さやデザインの自由度、パフォーマンス面、コミュニティの活発さなどを考慮し、自分に合ったフレームワークを見つけることが重要です。*

CSSフレームワークを使うことでWebサイトのデザインを効率化し、開発時間を短縮できます。本記事ではフレームワークの利点と欠点、さらにプロジェクトに適した選び方や、Bootstrap、Tailwind CSSなど人気のフレームワーク10選を紹介します。

CSSの記事（1ページ目）