*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)

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

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

【初心者必見】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デザイン用語を徹底解説！Webデザイナーを目指す方は必見

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

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

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

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

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

## おすすめの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フレームワークはデザインされた部品が用意されているため、開発時間を大幅に短縮できる

CSSフレームワークにより、サイト全体のデザインを統一し、上質の見た目を実現できる

CSSフレームワークは異なるブラウザでの表示の差異を最小限に抑え、ユーザ体験を向上させる

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

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

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

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

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

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

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

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

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

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

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

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

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

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;}のように「,」で区切ります。

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

**HTMLは、html要素・head要素・body要素の3要素が軸となっています。**「html」は、この文書がHTMLの文書であることを示すタグです。htmlタグを記述することで、ブラウザが「これはHTMLなんだ」と認識することができます。

「head」は、文書のメタデータを示すタグです。たとえば、headタグの中にWebサイトのタイトルを記述することが可能です。「body」は、文書の本文を示すタグです。bodyタグの中にWebページに表示する文章を記述します。

雛形を記述したら、HTMLファイルを保存します。ファイル名は「test.html」などとしましょう。*ファイルの拡張子を「html」にすることで、htmlファイルとして識別されます。*

### ③Webページの内容を記述する

続いて、Webページに表示する内容を記述します。先程解説したように、**Webページに表示する本文はbodyタグの中に記述します。**bodyタグの中に、以下のように「Hello World」と記述してみましょう。

```
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
```

上記のように記述することで、Webページに「Hello World」という文字列を表示させることができます。

### ④記述内容が正しく表示されるか確認する

**作成したHTMLファイルをブラウザで開き、先ほど記述した「Hello World」が正しく表示されるかどうかを確認します。**作成した「test.html」のファイルをダブルクリックするとブラウザが起動し、「test.html」の記述内容がブラウザで表示されます。

正しく記述できている場合、ブラウザ上に「Hello World」と表示されます。以上で、ここで解説する手順でのHTMLファイルの作成・確認は完了です。

### ⑤HTMLでCSS読み込みの設定を行う

次にCSSファイルを作成していきますが、ここではHTMLにCSSを適用させる方法として外部のCSSファイルを読み込む方法を紹介します。

CSSファイルを作成する前に、HTMLにCSSを読み込ませる設定をします。**CSSを読み込ませるには、HTMLのheadタグにCSSのファイル名を指定します。**ここでは、CSSのファイル名を「test.css」として、次のように記述します。

```
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
Hello World
</body>
</html>
```

本記事では、HTML・CSSとは何かについて解説します。HTML・CSSはWebサイト制作において、必ず使われるものです。今回は、HTML・CSSの使い方や勉強方法についてまとめました。HTML・CSSに興味がある方はぜひ参考にしてください。

HTMLとはWebページを作成するための言語

CSSとは主にWebページのデザインを変更するための言語

Web系エンジニアやWebデザイナーを目指すなら、HTML・CSSを習得するべき

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

**CSSはコメントアウトに対応しており、HTMLと合わせて使用します。**コメント機能の構文は、言語ごとに定義されており、CSSはHTMLと異なる構文が定義されています。

ここでは、CSSのコメントアウトを学び、実際にHTMLと組み合わせる際のコメントアウトの使い方を学んでいきます。

【参考】：[MDN Docs: CSS コメント](https://developer.mozilla.org/ja/docs/Web/CSS/Comments)

*CSSのコメントアウトの書き方はシンプルで、”/＊”と”＊/”の間にコメントを入れるだけです。*言語仕様でいうと、1行のコメント機能と、複数行のコメント機能が同じ”/\* \*/”構文で定義されます。

1行のコメントは、以下のように記述します。

/\* この行はコメントです \*/
/\* この行もコメントです \*/

複数行のコメントは、次の通りで用法に違いはありません。

```
/* 
このように記述すると、
複数行にわたるコメントに
用いることができます
*/
```

CSS（Cascading Style Sheets：カスケーディングスタイルシート）は、ウェブで用いるHTMLやXMLのようなマークアップ言語の要素を修飾するための仕様です。

*わかりやすく言うと、CSSは見栄えの良いウェブページを作成するための仕様です。*この仕様は、World Wide Web Consortium（W3C）から仕様として勧告されています。

【参考】：[W3C Cascading Style Sheets](https://www.w3.org/Style/CSS/)
【参考】：[MDN Docs: CSS の第一歩](https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps)
【参考】：[MDN Docs: CSS とは何か](https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/What_is_CSS)

コメントアウトとは、プログラミング言語ソースコードにコメント機能を用いて、コード解釈から除外する指示を追記することを表します。マークアップ言語においても、この機能が実装されています。

*コメント機能で追記した内容は実行処理から除外されるため、注釈をソースコードに入れたり、あらかじめ作成したデバッグコードを無効化したりする際に行います。*

コメントアウトは、ソースコードに注釈を入れたりコードを無効化したりするために利用します。*マークアップ言語で使用する際にも、注釈を入れることで保全性が高まります。*複雑なコードや大規模なプロジェクトでは重要な機能です。

コードレビューやメンテナンスに活用され、変更の目的や履歴がすぐに分かり、コードの品質を高めることができます。

CSSのコメントアウトは、上記メリットの他、最近ではライブ配信などにCSSを用いて、かわいいデザインなどのカスタマイズにも用いられます。

*統合開発環境（IDE）やエディタでは、コメント機能を使うためにショートカットキーを設定しています。*例えば、VSCode（Visual Studio Code）は、豊富なショートカットキーを搭載しています。

Windowsの場合は、コード編集時に範囲指定を行い「Ctrl」＋「/」をキー入力すると、コメントアウトができます。 詳しくは以下リンク先のショートカット一覧を確認しましょう。

【参考】：[Visual Studio Code](https://code.visualstudio.com/)
【参考】：[Visual Studio Code: Keyboard shortcuts for Windows](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
【参考】：[Visual Studio Code: Keyboard shortcuts for macOS](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)
【参考】：[Visual Studio Code: Keyboard shortcuts for Linux](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

### CSSでコメントアウトする際の注意点

CSSのコメント機能は、”/\* \*/”で示すだけのシンプルな構文です。*最初の”/＊”がコメントの開始、最初の”＊/”でコメント終了となりますので、コメントの入れ子ができません。*次のような記述をしてしまうと、コメントアウトが効かないことで正しくコードが解釈されません。

/* 
ここでは複数行にわたるコメントに用いますが、
  /*
　このように、入れ子でコメントをいれることは、
　できません。
  */
入れ子にならないように、コードのチェックをしましょう。
*/

上の例では、最後の「入れ子にならないように、コードのチェックをしましょう。」以降は、実際の実行コードとして判断され、期待通りに解釈されずに誤った処理が行われます。

HTMLのコメント機能は、CSSと違いがあるものの使い方は簡単です。*HTMLでは、”<!\-\-”と”\-\->”で囲んだ部分がコメントと解釈されます。*具体的には、次のように使用します。

```


```

HTMLもCSS同様に、1行のコメント機能と、複数行のコメント機能に違いがありません。複数行のコメントアウトは次のように記述します。

```

```

HTMLの場合も、コメント機能の入れ子ができませんので、注意しましょう。

【参考】：[MDN Docs: HTML: ハイパーテキストマークアップ言語](https://developer.mozilla.org/ja/docs/Web/HTML)
【参考】：[MDN Docs: Comment](https://developer.mozilla.org/ja/docs/Web/API/Comment)

HTMLのコメントアウトの書き方は？使い方と注意事項を解説

**CSSとHTMLは、役割が定められています。**文章の情報構造や意味づけはHTMLが担当します。

HTMLはウェブの記述に用いる言語で、ハイパーテキスト記述言語（HyperText Markup Language）の略です。複数の文書や情報を参照するリンク（ハイパーリンク）機能を用いて、インターネット上のウェブコンテンツを表示したり自身のPCにあるHTML文書を表示したりすることができます。

CSSは、HTMLで表示されるページの文字の大きさや種類、色合いなど見栄えの指定を担当します。HTMLとCSSは組み合わせて使用し、デザイン性の高いウェブページに仕上げることができます。

## CSSのコメントアウトを実際に使ってみる

**ブラウザは、コンテンツを表示する際にCSSのスタイル情報と結合し、文書を表示させます。**ここからは、CSSのサンプルを使って実際にコメントアウトの仕方を解説します。

CSSの構文は、プロパティ: プロパティの値で記述します。プロパティは以下のようなものです。

・color（前面の色）
・background（背景色）
・border （枠線）
・margin （マージン）
・width（幅）
・height（高さ）
・font（フォント）
・font-size（フォントサイズ）
・font-style（標準・イタリック体・斜体の指定）など

ここからは、CSSを使って実際にHTMLの文字を修飾していきます。

【参考】：[MDN Docs: CSS 入門](https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/Getting_started)
【参考】：[MDN Docs: CSS の構成要素](https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks)

### CSSのコメントアウトのサンプル

**ここでは、CSSのセレクターを用いてHTMLの要素をカスタマイズする方法を、サンプルで示します。**

次の例は、"\<p>"で示す色合いを変更する場合にコメントアウトを使います。色合いに複数の候補がある場合に、絞り切れない場合などは、コメントアウトの場所を入れ替えるだけで色調を代えることができます。

/\* 次のpの色はページの表示でどちらかを選択します \*/
/*
p {
  color: white;
}
*/
p {
  color: blue;
}

色調を変更する場合は、次のように該当部分をコメントで囲み直すだけです。

/\* 次のpの色はページの表示でどちらかを選択します \*/
p {
  color: white;
}
/*
p {
  color: blue;
}
*/

【参考】：[MDN Docs: CSS セレクター](https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Selectors)

### CSSをHTMLと組み合わせてコメントアウトする

**ここでは、CSSを組み込んだHTMLの全体構成を示します。**CSSのコメントアウトは、CSSの"\<style>～</style>"、あるいはスタイルシートファイルで使用します。

次の例では、HTMLの"\<h1>"と"\<p>"をCSSセレクターで修飾していきます。コメントアウトの使い方は、先ほどの例と同じですが複数の場所をコメントするにあたって、CSSのコメント機能のほかHTMLのコメント機能も併用しています。

<!DOCTYPE html>
\<html>
\<head>
\<title>CSSをHTMLと組み合わせてコメントアウトする</title>
\<style>
body {
  background-color: lightgreen;
}

/\* 次のh1の色はページの表示でお好きなどちらかを選択します \*/
h1 {
  color: orange;
  background: white;
  text-align: center;
}
 
/*
h1 {
  color: red;
  background: yellow;
  text-align: center;
}
*/
 
/\* 次のpの色はページの表示でお好きなどちらかを選択します \*/
/*
p {
  color: black;
  font-size: 16px;
}
*/
 
p {
  color: blue;
  font-size: 16px;
}
 
\</style>
\</head>
\<body>
 
\<h1>CSSをHTMLと組み合わせてコメントアウトする</h1>
\
\<p>CSSのコメントアウトで色が変わります</p>
 
\</body>
\</html>

このように、コメントアウトは自由に使用することができます。ただし、入れ子ができないこと、そしてCSSのコメント機能とHTMLのコメント機能は異なるためにコメント文字が “/\* \*/”と”<!\-\- \-\->” で異なることに注意が必要です。

## CSSのコメントアウトはウェブデザインで効果を発揮する

CSSは、ウェブページの見栄えを高めてくれます。従来HTMLで表されたスタイル装飾などの役割を、CSSが担っています。HTMLのテキストにCSSで見栄えを調整するのは、一連の作業ととらえると良いでしょう。**この作業を効率的に行うためには、コメントアウトの活用がおすすめです。**

CSSはコメントアウトに対応しており、HTMLの構文とは異なります。ここでは、CSSのコメントアウトの構文を学びます。さらに実際に使用するCSSとHTMLについて、サンプルを用いながらコメントアウトの書き方を学んでいきます。

CSSはコメントアウトに対応しており、”/\*”と”\*/”で囲んだ部分にコメントを入れます

HTMLでは、”<!\-\-”と”\-\->”で囲んだ部分がコメントのため、CSSとの違いがあります

CSSはHTMLと組み合わせて用いることから、混同しないように使い分けします

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

**CSSとは「Cascading Style Sheets」 の略称であり、スタイルシートと呼ばれることも多いです。**Webサイトを制作するには、HTMLとCSSのプログラミング言語が必要です。ここでは、HTMLとCSSの違いとCSSでできることについてわかりやすく説明します。

HTMLとは「HyperText Markup Language」の略称です。HTMLはタグで文章を囲うことで意味付けを行い、文章を構造化します。一方CSSは、HTMLで作成した構造に対して装飾する際に用いられます。つまり、**CSSは構造とデザインの役割を区分するためのプログラミング言語**と言えるでしょう。

CSSが存在していなかった時代は、HTMLを使用して文字の色や大きさなどを指定していました。しかし、ソースコードが長くなってしまい、編集がしにくいなどのデメリットがありました。そこで、誕生したのがCSSです。*CSSファイルを作成すれば、装飾に関することを一括して指定できる*ようになります。HTMLとCSSで役割を区分することで開発効率を向上させ、多種多様なデザインが作れるようになりました。

これまでにも説明しましたが、CSSはHTMLで記載されたWebサイトの構造に対して装飾を行うためのプログラミング言語です。**例えば、文字の色・大きさ・行間・行揃え・背景の色・大きさ・ボーダー・角丸・余白調整・アニメーションの変更や追加などが可能です。**

また、*HTMLとCSSで役割が分けられているため、メンテナンスがしやすい*という特徴があります。他にもCSSファイルを別に作成するため、HTMLファイルには構造の指定だけを入力すれば良く、記述がシンプルとなり、内容がサーチエンジンにも理解されやすくなります。そのため、*SEO対策の面でもメリットがあると言えるでしょう。*

CSSの記事（1ページ目）