HTMLはウェブページに欠かせないものですが、学んでいくとHTMLとCSSなどの用語が出てきます。古いドキュメントではHTMLしか登場しなかったので、不思議に思う方もいるでしょう。

この違いを見ていくと、以前はHTMLに見栄えや装飾に関する機能も含まれていたのですが、*HTML5以降は役割が分離しており、リッチなウェブコンテンツにはHTMLとCSSの組み合わせで対応します。*整理すると、以下のような役割分担となります。

```ウェブコンテンツ＝基本構造となる文章の構成（HTML）＋見栄えや装飾の体裁（CSS）```

利用方法ですが、CSSは単独で利用するのではなく、HTMLと組み合わせて使用します。HTMLとCSSの組み合わせで見栄えが左右されることから、CSSの重要性が高まっています。

違いを着こなしに例えてみると、HTMLは着物にするか、洋装のカジュアルにするかフォーマルにするかなどの全体構成を決めるようなものです。*CSSは決まった服装にあう小物やアクセサリー、あるいはお化粧方法を決め、スタイル全般を整えるようなものと考えるとわかりやすいでしょう。*

*HTMLとは、ハイパーテキスト記述言語（HyperText Markup Language）の略で、ウェブコンテンツの記述言語を指します。*

ハイパーテキストとは、複数の文書を相互参照するためのリンク（ハイパーリンク）機能を表し、ウェブ系システムやコンテンツ作成で標準利用されています。ウェブコンテンツはHTMLで記述されており、ウェブページとして表示されます。

ウェブページは、ウェブサーバーから情報をHTTP通信プロトコルを用いて転送し表示させたり、直接PCに格納されたHTML文書をブラウザで表示させたりすることができます。

HTMLとは？今さら人に聞けないその概略や役割を解説！

*CSSとは、カスケーディングスタイルシート（Cascading Style Sheets）の略で、ウェブページを作成する際に使用するHTML言語を装飾するための言語です。*

スタイルシートとはコンテンツの見栄えを良くするために記述するもので、スタイルシートを用いることで色やフォント、レイアウトが希望通りに柔軟に指定できます。このようにCSSを利用することでコンテンツの体裁全体を最適化し、視覚効果を高めることができます。

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

ウェブコンテンツは、ますます高精細で使い勝手が良くなっています。これまでは、見栄え含めてすべてHTMLで記述することでブラウザ処理が増加し、総じてウェブ表示の負荷が高くなっていました。CSS登場により、ウェブブラウザエンジンのCSS最適化が進んだことで、ストレスなく表示させることができます。

このほか、*HTMLとCSSのみで以下のことが可能になります。*

### ウェブサイトを美しく装飾できる

これが一番のメリットになります。利用の多様化に合わせてコンテンツもリッチになっています。*HTMLとCSSで文字や背景の色や配置等、多岐に渡り調整が可能ですので、小さい画面から大画面高精細のモニターまでデザインの再現性を高められます。*

*HTMLの体裁処理が、HTMLとCSSに分離したことで構造がシンプルになります。*テキスト自体はHTMLが担当し、見栄えはCSSが担当します。そのためドキュメント作成と装飾の作業担当を分けることも可能で、編集作業と改訂作業の効率や保守性が向上します。

HTMLとは別にCSSを設定可能ですので、別のCSSファイル（スタイルシートファイル）に保存することもできます。そのためウェブサイト全般のスタイル調整も可能です。*ファイルが複数にわたる場合も同じ見栄えが実現できるので、変更時も一括で対応することができます。*

一歩進んだ使い方として、JavaScriptを利用することも増えています。JavaScriptは、オブジェクト指向のプログラミング言語です。動的コンテンツが簡単に作成できるため、近年ではウェブ系フロントエンドからバックエンドアプリまで対応可能になっています。JavaScriptはスクリプト要素を用いて直接記述することもできますし、"src="を指定して別ファイルから読み込むこともできます。

*HTML／CSSとJavaScriptの違いですが、役割が違うだけで補完関係にあります。*具体的には、HTMLやCSSとJavaScriptを組み合わせて使うと、HTML／CSSのみに比べて以下の効果が得られます。

JavaScriptとJavaの違いは？質問されたときの説明方法

JavaScriptの用途やできることを初心者向けに紹介！

### 動的コンテンツが作成できる

条件に応じて、タグの要素を差し替えることができます。例えば時間に応じてあいさつ文を変更したり、天候に応じておすすめコンテンツを更新したりできます。*CSSのみならずHTMLについても動的に変更することができます。*

### アニメーションに対応できる

*任意のタイミングで画像を描画・移動させることができ、移動速度を加減したりバウンドさせることが簡単にできます。*画像表示をローディングやクリックなどの動作と連動させることもできます。

### マルチメディアに対応できる

JavaScriptでは動画や音声を単純再生するだけではなく、*マルチメディアプレイヤーを呼び出しコントロールすることもできます。*マルチメディアプレイヤーをコントロールすることで、再生や停止、一時停止・再生コンテンツの変更などを簡単に行うことができます。

## HTMLとCSSの学習本と学習サイト

HTMLとCSSの学習方法ですが、*学習本により自習したり学習サイトを活用したりすることでスキルアップが可能です。*最初のステップは、机上でベースの知識を得ることから始め、その後実際にコンテンツ作成に挑戦するのが良いでしょう。以降では、おすすめ本や学習サイトを紹介していきます。

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

*初心者向けで、HTML／CSSとWebデザインの基本を学びます。*「SNSリンク集」「ブログサイト」「Web招待状サイト」「レストランサイト」といった、作成ストーリーにしたがってスキルアップを目指します。

▪著者：竹内 瑠美
▪ページ数：288ページ
▪出版社：翔泳社
▪発売日：2021/10/14
【参考】：[これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本](https://www.shoeisha.co.jp/book/detail/9784798170114)

### 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

HTML&CSSとWebデザインについて、Webデザイナーである著者が解説していきます。*初心者向けとして、コンテンツデザインに加えてサイト制作の工程についても解説を加えています。*

▪著者：Mana
▪ページ数：280ページ
▪出版社：SB クリエイティブ
▪発売日：2019/03/16
【参考】：[1冊ですべて身につくHTML & CSSとWebデザイン入門講座](https://www.sbcr.jp/product/4797398892/)

### HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]

コーディングの基本学習から始められ、HTML／CSSについて架空のカフェのショップ紹介やネットショップサイトを紹介しながら理解を深めていきます。*初心者向けながら、チュートリアル情報が多数掲載されています。*

▪著者：服部 雄樹
▪ページ数：384ページ
▪出版社：技術評論社
▪発売日：2022/01/07
【参考】：[HTML&CSSとWebデザインが1冊できちんと身につく本\[増補改訂版\]](https://gihyo.jp/book/2022/978-4-297-12510-3)

### ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

Webデザイナーである著者が、ひと手間加えることで装飾やグラフ・アニメーションを活用したWebデザインを解説する実践講座です。さらに一歩進んだWebサイト制作の知識が得られる、*基本学習を終えた中級者向けのの参考本です。*

▪著者：Mana
▪ページ数：352ページ
▪出版社：SB クリエイティブ
▪発売日：2021/02/20
【参考】：[ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座](https://www.sbcr.jp/product/4815606145/)

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

HTMLとCSSの学習サイトですが、多くのサイトがあります。まずは*基本的な考え方をリファレンス情報としてい掲載している、MDN（モジラ・デベロッパー・ネットワーク）を確認してみましょう。*

MDNは、2005年からHTMLやCSS・JavaScriptなどのWeb技術のドキュメントを公開しています。その情報は精度が高く網羅されているため、Mozillaの技術文書としてGoogleやマイクロソフトもサイト情報を引用しています。
【参考】：[MDN Mozilla Developer Network](https://developer.mozilla.org/ja/)

実際に手を動かしてみたい方は、全てのブックが無料の「CODEPREP」を活用するのが良いでしょう。そのほか、無料・有料コースがある「スキルハブ」「ドットインストール」「Progate」など用途に合わせて検討することをおすすめします。

【参考】：[CODEPREP](https://codeprep.jp/)
【参考】：[スキルハブ](https://skillhub.jp/)
【参考】：[ドットインストール](https://dotinstall.com/)
【参考】：[Progate](https://prog-8.com/)

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

## HTMLとCSSの違いを学んだらコンテンツ作成に挑戦しましょう

HTMLはコンテンツの基本構造となる文章の構成で、CSSはその見栄えや装飾を担当することが分かりました。そこから先は、より高度な装飾技術を学んでいくだけです。そのためには実際にコンテンツを作成し、個々の機能を身に着けるのが近道です。**机上学習後は、実際にコンテンツ作成に挑戦することをおすすめします。**

ウェブページを学んでいくと、HTMLとCSSの用語が出てきます。初心者には区別がつきにくいですが、ウェブページデザインでは欠かせないものですので、用語の意味を押さえておきたいところです。ここでは、用語の意味と違いについて基本から学習方法まで解説していきます。

HTMLは基本構造となる文章の構成を担当し、CSSは見栄えや装飾の体裁を担当します

ウェブコンテンツのデザインでは、HTMLにCSSを組み込んで使用し、見栄えを高めます

さらにJavaScriptを併用することで、動的コンテンツを作成することもできます

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

- [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選と、それぞれの特徴について理解する

*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;
}
*表示例：*

CSSの記事（2ページ目）