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

CSSとは？

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

HTMLとCSSの関係は？

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

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

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

CSSのメリットは？

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

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

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

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

具体的な使用例は？

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

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

今日も暑い一日でした。明日も晴れるかな？

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

今日も暑い一日でした。明日も晴れるかな？

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

CSSを使ってみよう

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

CSSの構成要素は？

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で記述する主な値は？

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の作り方は？

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">  </style> 　　<title>私の思い出</title> 　</head> 　<body> 　　　<h1>ある夏休みの1日</h1> 　　　<h2>8月xx日</h2> 　　　<p>今日も<span>暑い1日</span>でした。明日も晴れるかな？</p> 　</body> </html>

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

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ファイルを指定することで簡単に同じ見栄えに統一することが可能です。