- [HTMLを独学で勉強するには? エンジニアが学ぶべき理由や習得に必要な時間](https://and-engineer.com/articles/YXpquhUAACsAivlG)

- [HTMLでできることは少ない？できないことやタグも一覧でまとめた](https://and-engineer.com/articles/YV1ZtxAAACn9LtD9)

- [HTMLのdivタグとは？読み方・目的・使い方などを解説！](https://and-engineer.com/articles/YUmP1hAAACUA1NVs)

「プログラミング言語の他にHTMLやCSSを学ぶ意味があるのか？」という悩みを持つ初級エンジニアの方がいます。フロントエンドエンジニアなら、HTML/CSSは必須言語といえますが、バックエンドエンジニアやサーバーエンジニアにはあまり関係が無さそうに思えます。

しかし、プロジェクトリーダーやプロジェクトマネージャーを任された時に、*HTML/CSSの知識やスキルがあると、その分メンバーからの尊敬や信頼を得られる*でしょう。この記事では、**入門ガイドとしてHTML初心者の方を対象に、HTML/CSSを学ぶ意味や効果的な学び方について解説**します。

HTMLを知らないエンジニアはいないと思いますが、HTMLは「Hyper Text Markup Language」の略です。**HTMLはプログラミング言語ではありませんが、Webページを作るときに必須となるマークアップ言語の1つ**です。

 HTMLと一言で呼んでも、実際には「HTML4」「XHTML」「HTML5」の3種類があります。すべて覚える必要はありません。ここでは「HTML5」を対象に解説します。

CSSは「Cascading Style Sheets」の略で、*文字サイズや文字の色、余白、装飾などのレイアウトでの見栄えを決めるスタイルシート言語*です。HTMLだけでもWebページは作成できますが、殺風景で味気ないページになるでしょう。

そこで、*見栄えの良いページを作成するには、HTMLとCSSをセットで学ぶ必要があります。*

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

HTML/CSSはやさしい言語です。*少し学べばすぐに結果が確認できるため、挫折しにくい*のが特徴です。しかも、学習人口が圧倒的に多いため、壁にぶつかってもすぐに解決できます。また、あらかじめ特に準備するものがないため、すぐに始められます。

**HTML/CSSはITエンジニアの初めの一歩、エンジニアの一般常識**と考えて、できれば多くの人に学んでほしい言語です。

### HTML/CSSの学習は電子ブックよりも紙の本がおすすめ

最近はスマホやタブレットにダウンロードして読むタイプの電子書籍（電子ブック）が増えてきましたが、**勉強目的なら紙の本の方が良い**でしょう。

電子ブックの場合は、図が見にくい・一度に表示できる量に限りがあり複数のページにまたがって読む必要がある・コード表記のレイアウトが崩れていることがあるといった使い勝手にデメリットがあります。また、勉強の達成感も得にくいでしょう。

一方、*紙の本は1ページ内にまとまった情報が記載されている*ため、複数ページにまたがって確認する必要がありません。また図や表なども見やすく、実際にコードを入力しながら学習する場合も使いやすいです。

また、電子ブックは数ページ程度しか試し読みできないことが多く、購入したあとに「自分には合っていなかった」と感じることもあります。しかし、紙の本は購入する前にある程度試し読みできるため、購入後に後悔することも少ないでしょう。

HTML/CSSの学習を始めて苦手な部分や難しいポイントに差し掛かっても、**最低でも1ヵ月は学習を続けましょう。**比較的簡単だと言われるHTML/CSSですが、人によっては学習の途中で挫折することもあります。

しかし、わからないところはとばしたり、簡単なところからやり直したりしながら1ヵ月は学習を継続してください。本での独学は時間がかかるのが一般的です。学習スケジュールを立て、計画的に学習を進めることが大切です。

未経験者がHTML・CSSを最短で習得できる独学方法を解説！

**本を読みながら実際にコードを書くと、より知識が定着しやすいのでおすすめ**です。HTML/CSSの学習本の中にはサンプルコードや演習問題がついているものがあり、本を読みながらコードを書くとより効率的に学習できます。

また、コードを書くことでインプットだけではなくアウトプットも同時にできるため、学習の成果や進み具合が目に見えてやる気にもつながるでしょう。

ある程度HTML/CSSが理解できたら、**自分の好きなWebサイトを模写するのもおすすめ**です。Webサイトを模写することで、本で学んだ知識がどの程度身についているのかがわかります。また、わからないところや苦手なところを再認識できるため、足りない知識を補うこともできます。

## HTML/CSSの入門本を選ぶポイント

*HTML/CSSの学習本を購入するにあたり、注意すべきポイント*を以下で説明します。スクールに通うより遥かに安い出費で済むとはいえ、**せっかく購入するからには自分に合った本を選びましょう。**

### 自分のレベルに合っていること

*学習本の購入では、自分のレベルに合っているというのが最低限の条件*です。どんなに外装が素晴らしく、どんなに人気があっても自分に合わなければ意味がありません。間違って上級者用の参考書を選んでしまうと、いきなり挫折します。

また初級や入門の表記がある本でも、実際にはレベルが高すぎて理解ができないといったことがあります。書店で手に取って試し読みするのがベストです。電子書籍の場合もネットで一部試し読みができるものもあるため、**まずは中身を見て自分のレベルに合っているかを確認**しましょう。

### HTMLとCSSを同時に学べること

Webページ作成の基本はHTMLですが、CSSが使われているケースが大半です。**HTMLとCSSはセットで学びたい言語ですので、両方を解説している本をおすすめ**します。

HTMLとCSSの両方に対応している本であれば、効果的に2つの言語をマスターできるような構成になっており、*別々に本を買って勉強するよりは遥かに効率的*です。

### 最新のバージョンに対応していること

よく中古の書籍を購入する人がいます。小説など、時代の変化に直接関係ないものであれば問題はありませんが、**学習本の場合、時代の変化の影響を受けやすいIT系では、本は最新バージョンであることがポイント**です。

2022年現在*HTMLの最新バージョンは「HTML Living Standard」、CSSは「CSS3」*です。これらに対応している学習本や参考書を選ぶようにしましょう。

*（注意：HTML5は2021年1月28日に廃止され、HTML Living Standardが標準規格になりました。内容は大きく変わりませんが、できるだけHTML Living Standardを対象としている本がおすすめです。）*

これは必須ポイントではありませんが、**用語の解説が詳しく書かれている本や、インデックスがしっかりしている本は辞典代わり**にもなります。学習が終わったあとも辞書として使えるため、長く使えることがメリットです。

## 【2022年最新】HTML/CSS入門書おすすめ15選

HTML/CSS関係の解説本、参考書は非常に豊富です。ここでは、**おすすめのHTML/CSS入門書15選を紹介**します。以降で紹介する入門書のおすすめポイントとしては、入門者向けであること、HTMLとCSSを同時に学べること、最新バージョンに対応していることなどです。また、書評や口コミも参考にしています。

ちなみに出版日が比較的古いものでも、最新のバージョンに対応し、改訂している本は紹介しています。

### 1.スラスラわかるHTML&CSSのきほん 第2版

特徴：**小規模なサンプルサイトの作成を通じて、HTML/CSSの基本が学べる入門書**

2013年に初版が発刊された*ロングセラーの人気本*です。2018年に今回おすすめの第2版が発売されました。HTML/CSSの基本について、可能な限りわかりやすく解説されてます。

図解が多く、誰もがミスしやすい箇所のサポートも親切です。ある程度、 HTML/CSS の知識がある方には物足りない内容かもしれませんが、*入門者にはぜひおすすめしたい1冊*です。

【参考】：[スラスラわかるHTML＆CSSのきほん 第2版](https://www.sbcr.jp/product/4797393156/)

### 2.デザインの学校 これからはじめる HTML & CSSの本

特徴：**Webデザインの基本を学ぶ初心者向けのHTML/CSS入門書**

*比較的ページ数が少なく、初心者に優しい丁寧な説明で、すらすら読み進められます。*わかりやすいことを最優先としており、取っ掛かりの入門書としておすすめです。しかし、簡単な内容のため初心者でもこれ1冊で十分とは言えません。

超入門という点ではおすすめの本です。分厚い本は苦手、飽きやすいという方はこの本でスタートを切るのも良いでしょう。

▪著者：千貫 りこ、ロクナナワークショップ（監修）

【参考】：[デザインの学校 これからはじめる HTML & CSSの本](https://gihyo.jp/book/2017/978-4-7741-8968-0)

### 3. これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

特徴：**HTML/ CSS、JavaScript などの入門書として網羅性に富み、これ1冊で基本を学べる**

初心者にわかりやすく書かれている本で、HTML・CSS・JavaScriptについて幅広く学べます。しかし、より詳しく学びたい人にはやや物足りなさを感じるかもしれません。*Web開発の基本について広く浅く学びたい人におすすめ*です。

【参考】：[これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん](https://book.mynavi.jp/ec/products/detail/id=65861)

### 4.世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

特徴：**Webサイト作成に必要な知識を凝縮した教科書**

全15章から構成されています。レッスン1の基礎知識から始まり、 HTML/CSSの使い方を中心としたレッスンが続き、後半のレッスン14と15ではWebサイトの公開方法が記載されています。タイトル通り教科書のイメージが強いですが、*しっかり基礎を学びたい初心者の方におすすめ*の本です。

▪著者：赤間 公太郎、狩野 咲、鈴木 清敬

【参考】：[世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書](https://gihyo.jp/book/2019/978-4-297-10302-6)

### 5.いちばんやさしい HTML＆CSS 入門教室

特徴：**スマホ対応のサイト作りを題材とした新しいタイプのHTML/CSS入門書**

「いちばんやさしい」のタイトル通り、HTML/CSSに特化した入門書です。特徴は*スマホ向けサイトを題材としている*点で、他の教本とは一線を画しています。

題材はスマホサイト作成ですが、モバイル対応サイトを作りながら、パソコン表示の対応方法なども解説されています。また、*閲覧するユーザーのデバイスに合わせて自動的に表示が最適化される「レスポンシブデザイン」の制作を学べます。*入門でありながら、実践力を高めたい初心者におすすめの1冊です。

▪出版社：株式会社ソーテック社

【参考】：[いちばんやさしい HTML＆CSS 入門教室](http://www.sotechsha.co.jp/pc/html/1213.htm)

### 6.HTML＆CSSとWebデザインが1冊できちんと身につく本

特徴：**読むだけで各言語の知識とWebデザインの基礎が身につく**

HTMLやCSSのコーディング方法に加え、多くのWebサイトで使用されている4つのレイアウト手法についても学べます。*基礎知識の勉強にもなる上、実践的なテクニックも学ぶことができます。*そのため、実際にHTMLやCSSを使った仕事がしたい人にもおすすめです。

またサンプルサイトの見栄えも良いので、Webサイトを作りながら楽しく勉強できるのもポイントです。

HTMLとCSSに関する学習本を探す際、書籍が多すぎて選ぶのに困る方が少なくありません。この記事では、ITエンジニアを目指す方にHTML＆CSSに関する入門本の選び方と、おすすめの入門書を紹介します。Webページを自分で作りたい方もぜひ参考にしてください。

HTMLとCSSは言語としての機能や目的は異なるが、Web作成において必須の言語でセットで習得すべき

HTML/CSSの入門書を探すには、3つのポイントを押さえる必要がある

おすすめのHTML/CSSの入門書15選と、それぞれの特徴について理解する

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

*CSS*とは、ウェブページを作成する際に使用する*HTML言語で用いるスタイルシート*を指します。スタイルシートとは、見栄えを良くするために記述する言語です。スタイルシートを用いることで*色やフォント、レイアウト*が希望通りに**柔軟に指定**できます。

*HTML*はウェブページを作成するための*マークアップ言語*です。従来はHTML自体に見栄えに関する属性指定を入れていましたが、HTML4やHTML5では*文書構造（コンテンツ）*をHTMLが担当します。したがってHTMLとCSSは次の関係が成り立ちます。

*ウェブコンテンツ*＝記載する*文章構成（HTML）*＋*見栄え（CSS）*

*CSS*は単独で利用するわけではなく、設定対象となる**HTML文書がセットで必要**です。

CSSを利用することで**多くのメリット**があります。代表的なメリットは以下の通りです。

・*構造がシンプル*
　HTMLとCSSに分離したことにより、構造がシンプルになりました。そのためドキュメントの編集作業の効率が高まり保守性が向上します。

・*カスタマイズしやすい*
　HTMLファイルとは別にCSSファイル（スタイルシートファイル）に保存することができます。そのためファイルが複数にわたる場合も同じ見栄えが実現でき、変更時も一括対応できます。

・*表示速度が速い*
　見栄え含めてすべてHTMLで記述するとブラウザ処理が増加するため、総じてウェブ表示の負荷が高くなります。近年のウェブブラウザはCSSの最適化がされているため、CSSを用いることで表示速度が高速になります。

通常用いる**HTMLとCSSの表示の違い**を簡単に見てみましょう。

・*HTMLの場合*
*記述例：*
\<p\>今日も暑い一日でした。明日も晴れるかな？\</p\>
*表示例：*
<p>今日も暑い一日でした。明日も晴れるかな？</p>

・*CSSの場合*
*記述例：*
\<p>今日も\<span style="color: red"\>暑い一日\</span\>でした。明日も晴れるかな？\</p\>
*表示例：*
<p>今日も<span style="color: red">暑い一日</span>でした。明日も晴れるかな？</p>

上記例では同じ文章をタグ内に記述しています。ちょっとした色の指定ですが、CSSの場合はその*開始タグ*で**見栄えを変更する**ことができます。HTMLの単純な文章にCSSで色付けすることで*文章が読みやすくなります*。以降でCSSの使い方をもう少し詳しく見ていきましょう。

ここからCSSの使い方を説明していきます。*CSSの作成*に必要なものは、*編集用PCのみ*です。CSSはHTML同様に**テキストファイル**ですので、*テキスト編集のメモ帳アプリやエディタ*を用いて編集します。可能であれば先にウェブページの文書構成ファイルとなる*HTMLファイルを事前準備しておく*のが良いでしょう。

**CSSは簡単**なため、以下の構成要素が理解できるとすぐに活用可能です。

・*文法*
　セレクタ { プロパティ: 値 ; }
　セレクタの後に宣言ブロックという波カッコ”{ }” 内で見栄えを指定します。波カッコ内にはプロパティと値をセミコロン”;”で区切り、複数指定することができます。この文法ルールにしたがい利用していきます。
・*セレクタ*
　スタイルを適用するHTMLのタグ要素を指定します。
・*プロパティ*
　具体的な変更対象となる要素で用いる属性を指定します。
・*値*
　指定するプロパティに設定する値です。

構成要素となるセレクタ・プロパティ・値については、以降でさらにくわしく説明していきます。

### CSSで記述する主なセレクタは？

*セレクタ*とは**HTMLで用いているタグ要素**を表します。具体的には以下の要素で利用します。

・*h要素*
　h1～h6　見出しの指定で、h1が最上位の大見出しとなります。
・*body要素*
　文書本体全体を指します。
・*p要素*
　文書段落を指します。
・*li・ol・ul要素*
　リスト表示のタグを指します。
・*table・tr・th・td要素*
　表（テーブル）表示のタグを指します。

### CSSで記述する主なプロパティは？

*プロパティ*は**CSSで変更対象とする属性**です。代表的なプロパティは以下の通りです。

・*color*
　前面の色を指定する属性です。
・*background*
　背景色を指定する属性です。
・*border*
　枠線を指定する属性です。
・*margin*
　縁の余白を指定する属性です。
・*padding*
　内側の調整余白を指定する属性です。
・*width*
　幅を指定する属性です。
・*height*
　高さを指定する属性です。
・*font*
　フォントを指定する属性です。
・*font-size*
　フォントサイズを指定する属性です。
・*font-style*
　標準・イタリック体・斜体を指定する属性です。

*CSSで指定する値*は**文字列やキーワード、数および単位識別子**が指定できます。

・*色の指定*
　設定済みカラーネーム、red・blue・breen・black・white・yellow等基本色16色、拡張カラー147色から指定します。
　または16進数RGB、例としてwhiteは#FFFFFF、blackは#000000を指定します。
　もしくは10進数RGB、例としてwhiteはrgb(255,255,255)、blackはrgb(0,0,0)を指定します。パーセント値表記での指定も可能です。
・*幅や高さ・ポジション*
　プロパティに応じてピクセル値やパーセント値を指定します。
・*フォント*
　フォントサイズを文字列・ピクセル値・パーセント値で指定します。
　フォント名を文字列で指定します。
　さらにフォントスタイルを指定可能です。

*CSSの作り方*は代表的な以下の**3通り**の方法があります。

・*HTMLの要素にstyle属性を用いる作成方法*
　お持ちのHTMLファイルに簡単に追加できます。
・*CSSをstyle要素として指定するセレクタを属性設定する作成方法*
　HTMLのhead要素に簡単に追加できます。
・*CSSファイルを作成する方法*
　CSSファイルをlink要素として読み込む方法でCSSを別ファイルに保存できます。
　HTMLファイルとは別のCSSファイルに保存しますのでメンテナンスしやすくおすすめの方法です。

詳細は以降で説明していきます。

### HTMLでstyle属性を用いるCSSの作り方は？

この記述方法は、*HTMLの各要素*に対して*style属性を用いる方法*です。必要とされる文字の大きさ・種類・色等が指定可能です。*style属性*は**HTMLの開始タグに記載**し、指定した属性は**終了タグまで有効**です。

*構文：*
　style=”プロパティ: プロパティの値[;プロパティ: プロパティの値]”
　プロパティ　　宣言する属性
*使用例：*
\<p style="color: green”\>今日も\<span style="color: red"\>暑い一日\</span\>でした。明日も晴れるかな？\</p\>

### HTMLでstyle要素を用いるCSSの作り方は？

CSSでは、style要素を用いて必要とされる文字の大きさ・種類・色等が指定可能です。
*style要素*では\<style>\</style>の間に宣言を記載します。style要素は**head要素で記述します**。これによって、セレクタで指定した*該当HTML要素*に宣言した属性が**一括適用**されます。

*構文：*
　\<style type="text/css"\>
　　　セレクタ{プロパティ: プロパティの値[;プロパティ: プロパティの値]}
　\</style\>
　セレクタ　スタイルを適用する要素
　プロパティ　宣言する属性
*使用例：*
\<!DOCTYPE html\>
\<html\>
　\<head\>
　　\<style type="text/css"\>
            \<!--
            h2 { color: blue; background: yellow }
            p { color: green }
            span { color: red }
            --\>
        \</style\>
　　\<title\>私の思い出\</title\>
　\</head\>
　\<body\>
　　　\<h1\>ある夏休みの1日\</h1\>
　　　\<h2\>8月xx日\</h2\>
　　　\<p\>今日も\<span\>暑い1日\</span\>でした。明日も晴れるかな？\</p\>
　\</body\>
\</html\>

使用例ではstyle要素の記述を\内に記載しました。これにより古いバージョンのCSS未対応ブラウザではコメント行として処理されますので、不要な表示がされません。

CSSでは、*link要素*を用いて*CSSファイル*を読み込みことが可能です。これは*複数のHTML文書を管理する際*に、**同一のスタイルを適用する**ために行います。

*構文：*
　\<link rel=”stylesheet” type=”text/css” href=”CSSスタイルシートのファイル名”\>
　link要素　CSSファイルの読み込み、終了タグなし
　CSSファイル　セレクタ{
　　　　　　　　プロパティ: プロパティの値;
　　　　　　　　[プロパティ: プロパティの値;]
　　　　　　　　}
　セレクタ　スタイルを適用する要素
　プロパティ　宣言する属性
*使用例：*
\<!DOCTYPE html\>
\<html\>
　\<head\>
　\<link rel="stylesheet" type="text/css" href="sample\_css.css"\>
　　\<title\>私の思い出\</title\>
　\</head\>
　\<body\>
　　　\<h1\>ある夏休みの1日\</h1\>
　　　\<h2\>8月xx日\</h2\>
　　　\<p\>今日も\<span\>暑い1日\</span\>でした。明日も晴れるかな？\</p\>
　\</body\>
\</html\>
*sample\_css.cssの内容：*
h2 {
 color: blue;
 background: yellow;
}
p {
 color: green;
}
span {
 color: red;
 font: bold large serif;
}
*表示例：*

この例では「暑い1日」をフォントを指定し強調してみました。もしHTMLファイルが複数存在する場合でも、同じCSSファイルを指定することで簡単に**同じ見栄えに統一することが可能**です。

## CSSの最初の一歩が理解できたら色々なコンテンツに使ってみましょう

ここではCSSの初心者向け情報をお伝えしました。CSSは見栄えを調整するため、*色・サイズやレイアウト調整*まで**幅広い対応範囲で活用できます**。基礎知識を理解した次は*実際にCSSを作成*し、コンテンツの見栄えがどのようになるのか実践し、*理解を深めましょう*。

スタイルシートはHTMLに代表される構造化文書の見た目を記述する言語です。CSSはスタイルシートの代表的な記述言語となります。ここでは初心者の方が最初に理解する情報を整理してお伝えします。加えてCSSの使用例を含めて解説していきます。

CSSはスタイルシートの代表的な記述言語で、HTMLコンテンツとセットで用います

CSSの役割はHTML文章の見栄えを調整するものです

使い方はHTMLに直接埋め込む方法2種類とCSSファイルから読み込む方法の計3種類があります

CSSとは？初心者が覚えたい基礎知識から使用例まで解説！

*CSS*は、HTML言語で用いる*スタイルシート*を表します。*スタイルシート*は*文書の色やフォント・サイズおよびレイアウトを設定*し、**見栄えを良くするための記述言語**です。

CSSは起源をさかのぼると、1994年欧州原子核研究機構（CERN）に勤務する技術者が提唱したもので、レイアウト設定を行う際の考え方は欧文の組版技術からヒントを得ています。そのため、*em（エム）*とは*組版で用いる長さの単位*を表します。*em*は**大文字のMを基準としたサイズ表記**が由来となっており、Mの高さを基準とする意味で用います。

またemは何かの略と思ってしまいますが、そうではなく単純に*Mの読み方そのもの*を指します。なお、HTMLの\<EM\>タグはEmphasisの略で、テキストを強調する際に使用しますがCSSのemとは異なるものです。

CSSにおけるemは、*フォントサイズを指定する際に一般的に用いる方法*です。具体的な違いについては、以降で説明します。

## CSSで用いるフォントサイズの単位は？

CSSで*フォントサイズを指定*するには、以下の**3通りの指定方法**があります。

・*相対値で指定する方法*
　相対値で指定する場合は親要素と比較してサイズが決定します。
　指定はem、exが該当します。
・*パーセント値で指定する方法*
　パーセント値で指定する場合はある基準に対する比率を指定します。
・*絶対値で指定する方法*
　絶対値で指定する場合は相対関係は影響せず固定設定となります。
　指定はpx、pt、pc、in、cm、mmが該当します。

以降でさらに詳しくフォントサイズ方法を見ていきましょう。

### フォントサイズを相対値で指定する方法は？

フォントサイズを*相対値で指定する方法*は、**em、ex**があります。

・*emによる指定*
　現行のフォントサイズを1とした場合のサイズを指定します。
　利用者がブラウザでサイズを拡大・縮小した場合でもサイズが追従するメリットがあります。
　*指定方法：*
　　p {
　　　font-size: 0.8em;
　　}
・*exによる指定*
　使用するフォントの小文字の “x”の高さを基準とした指定方法です。
　日本語では和文を多用するため、通常は欧文指定のexは用いません。
　*指定方法：*
　　p {
　　　font-size: 1.2ex;
　　}

この他にも、このあと絶対値の項目で説明するpxについても画面解像度に対して相対的な指定となります。そのためpxを相対値の分類に含めることもあります。

### フォントサイズをパーセント値で指定する方法は？

フォントサイズを*パーセント値*で指定する場合も**相対値指定可能**です。
*指定方法：*
　p {
　　font-size: 120%;
　}

なお、**1em＝フォントサイズ100%**が成り立ちますのでパーセント値で指定するほか、em値を指定することもできます。

### フォントサイズを絶対値で指定する方法、pxの変換方法は？

フォントサイズを*相対値で指定する方法*は、**px、pt、pc、in、cm、mm**があります。この場合は*固定サイズ*となるため、事前に決められているサイズを設定する際に用います。

pxによる指定は以下の通りです。
・*pxによる指定*
　このして方法もCSSで頻繁に用いられている指定方法で、ピクセル値で指定します。
　ピクセル値で指定しますので最も精密に表示指定できます。
　1px＝1/96インチです。
　*指定方法：*
　　p {
　　　font-size: 16px;
　　}

pxによる指定はディスプレイ解像度が低い場合は表示が収まらないこともあるため、対象となる端末で確認が必要です。なお、最近のブラウザではフォントサイズ変更に対応できるものもあります。
ここで、emとpxの関係について補足しておきます。*emの単位*は**使用するフォントサイズを基準**としています。通常フォントは16px・12ptなため、フォントサイズを指定していない場合は1emは16pxです。

次に*pt、pc、in、cm、mm*の指定は以下の通りです。指定方法は数値に単位を追記するものでpxと同等の記載方法にしたがいます。**pxの変換方法**として理解しておきましょう。
・*ptによる指定*
　ポイント数を指定します。
　1pt＝1/72インチです。
・*pcによる指定*
　Picas（パイカ）数を指定します。
　1pc＝1/6インチ、12ptです。
・*inによる指定*
　インチ数を指定します。
　1in＝2.54センチメートル、96pxです。
・*cmによる指定*
　センチメートル数を指定します。
　1cm＝1/2.54インチ、96/2.54pxです。
・*mmによる指定*
　ミリメートル数を指定します。

なお、組版印刷では絶対値指定は非常に重要ですが、ウェブブラウザ表示を基本とするCSSではほとんど用いることがありません。理由としては、*修正等のメンテナンスに工数がかかる*ためです。

*em*と同等の指定方法で、*rem*があります。一方の*em*は**親要素を基準**としたフォントサイズ指定となります。つまり、フォントを指定することでそのサイズが1emの基準単位となります。

他方の*rem*は**ルート要素**のフォントサイズを基準とします。そのため未指定（デフォルト状態）の時は、*1em＝16px*が成り立ちますし、階層が深いフォント指定の基準として利用することができます。

なお、*rem*はIE8以前のブラウザではサポートされていないため、*バージョン差異による表示の違い*については事前に確認しておくことをおすすめします。

emの使い方が理解できたところで、使用例を見ていきましょう。

*使用例：*
\<!DOCTYPE html\>
\<html\>
　\<head\>
　\<link rel="stylesheet" type="text/css" href="sample\_css.css"\>
　　\<title\>日記帳\</title\>
　\</head\>
　\<body\>
　　　\<h1\>私の備忘録\</h1\>
　　　\<h2\>買い物\</h2\>
　　　\<p\>昨日野菜を買いに行きました。うっかり\<span\>エコバック\</span\>を忘れてしまいました。\</p\>
　\</body\>
\</html\>
*sample\_css.cssの内容：*
h2 {
 color: blue;
 font-size: 1.2em;
}
p {
 color: green;
 font-size: 0.8em;
}
span {
 color: red;
 font-size: 1.5em;
}
*表示例：*

この例では、*h2要素*に1.2emを設定しています。同様に*p要素*に0.8em、*span要素*に1.5emを設定しています。*em*は**親要素のフォントサイズを相対指定**しいるため、*親子関係がシンプルな場合はこのまま利用できます*。

次に、remの使用例を見ていきましょう。

*使用例：*
\<!DOCTYPE html\>
\<html\>
　\<head\>
　\<link rel="stylesheet" type="text/css" href="sample\_css.css"\>
　　\<title\>日記帳\</title\>
　\</head\>
　\<body\>
　　　\<h1\>私の備忘録\</h1\>
　　　\<h2\>買い物\</h2\>
　　　\<p\>昨日野菜を買いに行きました。うっかり\<span\>エコバック\</span\>を忘れてしまいました。\</p\>
　\</body\>
\</html\>
*sample\_css.cssの内容：*
html {
 font-size: 1em;
}
body {
 font-size: 2em;
}
h2 {
 color: blue;
 font-size: 1.2em;
}
p {
 color: green;
 font-size: 1.1em;
}
span {
 color: red;
 font-size: 2.5rem;
}
*表示例：*

この例では、HTML文書は変更せずにCSSファイルのみ修正しました。*span要素*のみ*rem値*を指定し、それ以外は*em値*を指定しました。理解を深めるために意図的にサイズを大きく指定しています。ここで例示した各要素のフォントサイズを確認してみましょう。

・*html要素*
　1emですので16px相当のサイズです。
　この値がルート要素の設定サイズとなります。
・*body要素*
　親要素の2倍のem値を指定しました。
・*h2要素*
　親要素がbody要素となりますので、親要素2em値x指定した1.2em値＝2.4em値となります。
・*p要素*
　親要素がbody要素となりますので、親要素2em値x指定した1.1em値＝2.2em値となります。
・*span要素*
　ルート要素基準となりますので、ルート要素1emx指定した2.5rem値＝2.5em値となります。

上記の通り、*em値*では*親要素の設定値*により**影響を受けてしまいます**。*rem値*は*ルート要素を基準*としていますので**影響がありません**。そのため*親子関係が複雑な文書*では*ルート要素を基準としたremで指定するのも効率的*です。

フォントサイズ指定方法となる*pxは絶対値で指定*し、*em値は相対値で指定*します。

*pxはドキュメントを忠実に再現*するため、**百科事典や美実品紹介・DTP**等に適しています。*em*は拡大・縮小に追従するため、**モバイル端末やスマートフォンで表示**する際に便利です。したがって、どちらか一方を利用するよりも*適材適所で使い分け*たり、*併用*したりすることをおすすめします。

## CSSのフォントサイズ指定で統一デザインのウェブコンテンツ作成をすすめましょう

近年*スマートフォンやモバイル端末の利用*は加速しているため、*小さい画面での見栄えが重要*になってきています。

このように、*CSSのem指定*は*モバイル端末での指定に最適*です。CSSのフォントサイズ指定が理解できたら、実際にCSSスタイルシートを作成し見栄えの調整を進めましょう。*複数のウェブコンテンツにCSSを適用する*ことで**統一感のあるデザインが実装**できるため、とてもおすすめです。

CSSは、ウェブコンテンツの見栄えを良くするためにHTMLとセットで用いられています。CSSのフォントサイズ指定にはいくつかの方法があります。ここでは、代表的な指定方法であるem値を中心に、フォントサイズ指定方法の違いを比較し解説していきます。

CSSのem（エム）とは、欧文の組版技術のサイズ表記が由来となるフォントサイズ指定方法です

CSSのフォントサイズ指定には、絶対値指定と相対値指定の方法が提供されています

emはCSSの相対値指定方法として最も用いられている方法です

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

CSSの記事（2ページ目）