【超初心者向け】CSS（スタイルシート）とは？
まず覚えたい基本の「き」ポイントや書き方を解説！
CSSとは
CSS（スタイルシート）の基本情報
CSS（Cascading Style Sheets）とは、ホームページのデザインやレイアウトを定義するためのスタイルシート言語の1つであり、HTML文書に装飾を加えるための仕組みです。
ホームページのデザインを整える上で重要な役割を担っているCSSは、ホームページやWebアプリケーションを美しく見せたり、スマホやタブレットなどの様々なデバイスに対応したレスポンシブデザインを実現するための必須の技術です。
CSS（スタイルシート）の定義
CSSは、HTML文書の外部に記述されることが一般的です。CSSは、HTMLと同様にテキストで書かれており、Webブラウザによって解釈されます。
CSSは、セレクタとプロパティから構成されています。セレクタは、スタイルを適用したいHTML要素を指定するための指定子であり、プロパティは、スタイルを適用したいHTML要素の属性を指定するための指定子です。
例えば、以下のようなCSSコードをHTMLファイル内に記述することで、HTMLファイル内のすべてのpタグ（段落）の文字の色を青に変更することができます。
p {
color: blue;
}このように、CSSを使用することで、HTML要素のデザインやレイアウトを細かくカスタマイズすることができます。
CSSとHTMLの違い
CSSとHTMLは、ホームページをデザインするために使用される2つの異なる技術です。
HTML（HyperText Markup Language）は、ホームページの構造を定義するために使用される言語であり、CSSは、ホームページのデザインとスタイルを定義するために使用される言語です。
HTMLは、ホームページの構造を定義するために使用されるマークアップ言語です。HTMLを使用すると、テキスト、画像、リンク、フォームなどの要素を組み合わせてホームページを作成することができます。
一方、CSSは、ホームページのスタイル、レイアウト、色、フォントなどの外観を定義するために使用されます。CSSを使用することで、ホームページを美しく、読みやすく、使いやすい動きにすることができます。
| CSS | HTML | |
|---|---|---|
| 定義 | スタイルシート言語 | マークアップ言語 |
| 役割 | ホームページのスタイルやレイアウトを定義 | ホームページの構造を定義 |
| 記述される場所 | HTML文書の外部に記述される | HTML文書内に記述される |
| 要素の指定 | セレクタとプロパティを使用 | タグ名や属性を使用 |
| 役割の重要度 | 外観やスタイルを定義するために必須 | ホームページの構造を定義するために必須 |
CSSでできること
CSSを使用すると、以下のようなことが可能です。
ホームページのデザインを整える上で重要な役割を担っているCSSは、ホームページやWebアプリケーションを美しく見せたり、スマホやタブレットなどの様々なデバイスに対応したレスポンシブデザインを実現するための必須の技術です。
-
1. ホームページの外観を変更する
CSSを使用することで、ホームページのフォント、色、レイアウト、スタイルをカスタマイズすることができます。例えば、文字の色や背景色、ボーダーのスタイルや太さ、画像のサイズや位置、フォントの種類やサイズ、間隔などを変更することができます。
-
2. ホームページをレスポンシブにする
CSSを使用することで、ホームページをレスポンシブデザインにすることができます。つまり、様々なデバイスの動きに対応するホームページを作成することができます。例えば、画面サイズに応じてフォントのサイズを変更したり、レイアウトを調整したりすることができます。
-
3. ホームページにアニメーションを追加する
CSSを使用することで、ホームページにアニメーションを追加することができます。例えば、スライドショー、ホバーエフェクト、フェードインアウトなどの動きを実現することができます。
-
4. ユーザビリティを向上する
CSSを使用することで、ホームページのユーザビリティを向上することができます。例えば、クリック可能なリンクを強調するために下線を追加することができます。
以上のように、CSSを使用することで、ホームページの動きや外観や機能性を向上させることができます。
CSSはどこに書くの？
CSSは、HTML文書のhead要素内にstyle要素を使用して記述するか、外部のCSSファイルに記述して読み込むことができます。
style要素を使用した場合、CSSの記述は以下のようになります。
<head>
<style>
セレクタ {
プロパティ: 値;
}
</style>
</head>CSSの基本書式３つ
セレクタは、スタイルを適用するHTML要素を指定するために使用されます。プロパティは、変更したいスタイルの種類を指定し、値はプロパティに適用する具体的な値を指定します。複数のプロパティを指定する場合は、セミコロンで区切って記述します。
外部のCSSファイルを使用する場合、HTML文書内に以下のようなlink要素を記述してCSSファイルを読み込みます。
①セレクタ：スタイルを適用するHTML要素を指定するための記述用
②プロパティ：変更したいスタイルの種類を指定するための記述
③値：プロパティに適用する具体的な値を指定するための記述
例えば、h1要素の文字色を赤色に変更する場合は、以下のように記述します。
h1 {
color: red;
}セレクタにはh1要素を指定し、colorプロパティには赤色を表す値"red"を指定しています。
CSS適用の優先順位はとても大切！
CSSにおいて、スタイルの適用の優先順位は非常に重要です。異なるセレクタやプロパティを使用した場合、どのスタイルが適用されるかが決定されます。
CSSにおいて、優先順位の高い順から優先度が決定されます。以下は、優先順位の高い順からの一般的な優先度のリストです。
-
1. !importantを使用したスタイル
直接指定されたスタイル（style属性）
-
2. IDセレクタで指定されたスタイル
-
3. クラスセレクタで指定されたスタイル
-
4. タグセレクタで指定されたスタイル
-
4. 一般的なセレクタで指定されたスタイル（*、>、+など）
また、同じ優先度のスタイルが複数ある場合は、後に記述されたスタイルが優先されます。
CSSの適用の優先順位については、正しく理解することが非常に重要です。適用されるスタイルが意図しないものになってしまうことがあるため、適用するスタイルを明確にすることが大切です。
CSSのプロパティの書き方
CSSでは、プロパティを使用してスタイルを指定することができます。プロパティの書き方は、以下のような形式で記述します。
セレクタ {
プロパティ: 値;
}この形式では、セレクタでHTMLの要素を指定し、中括弧{}内にプロパティと値のペアを記述します。プロパティと値はコロン:で区切られ、複数のプロパティを指定する場合はセミコロン;で区切ります。
例えば、文字の色を赤にする場合は、以下のように記述します。
h1 {
color: red;
}h1はセレクタで、colorはプロパティで、redは値です。このようにCSSを使ってスタイルを指定することで、ホームページの見た目をカスタマイズすることができます。
CSSのプロパティは非常に多くあり、それぞれ異なる効果を持っています。例えば、background-colorプロパティを使用すると、要素の背景色を指定することができます。font-sizeプロパティを使用すると、テキストのフォントサイズを指定することができます。
CSSのセレクタの書き方
CSSでは、HTML要素を指定するために「セレクタ」と呼ばれる記述方法を使用します。セレクタは、HTMLの要素を選択して、それに対してスタイルを適用するために使われます。
セレクタには、いくつかの種類があります。初心者の方には難しく感じるかもしれません。代表的なセレクタには、タグ名セレクタ、クラスセレクタ、IDセレクタ、属性セレクタなどがあります。それぞれのセレクタの書き方を紹介します。
-
1. タグ名セレクタ
HTML要素のタグ名を指定して、スタイルを適用するセレクタです。例えば、以下のようなCSSを記述することで、全てのh1要素にスタイルを適用できます。
h1 { color: red; } -
2. クラスセレクタ
HTML要素にクラス属性を設定して、そのクラスを指定してスタイルを適用するセレクタです。例えば、以下のようなCSSを記述することで、クラス名が「sample」の要素にスタイルを適用できます。
.sample { color: blue; } -
3. IDセレクタ
HTML要素にID属性を設定して、そのIDを指定してスタイルを適用するセレクタです。例えば、以下のようなCSSを記述することで、IDが「header」の要素にスタイルを適用できます。
#header { background-color: yellow; } -
4. 属性セレクタ
HTML要素の属性を指定して、スタイルを適用するセレクタです。例えば、以下のようなCSSを記述することで、type属性が「submit」のinput要素にスタイルを適用できます。
input[type="submit"] { background-color: green; }
このように、セレクタをうまく使って、ホームページの見た目を自由自在にカスタマイズすることができます。ただし、セレクタを使いすぎると、スタイルの適用が複雑になってしまうため、適切なセレクタの選択が重要です。
実際にCSSを作成してみよう
CSSを作成する手順を紹介します。初心者の方でも真似して作成してみてください。
-
1. HTMLファイルを作成する
-
2. CSSファイルを作成する
-
3. HTMLファイルのheadタグ内に、CSSファイルを読み込むためのリンクタグを記述する
-
4. CSSファイルの中で、セレクタを指定し、プロパティと値を指定する
-
4. HTMLファイルをブラウザで開いて、CSSが正しく適用されていることを確認する
以下は、具体的な手順です。
-
1. 以下のようなHTMLファイルを作成します。
<!DOCTYPE html> <html> <head> <title>CSSの例</title> </head> <body> <h1>Hello, World!</h1> <p>これはCSSの例です。</p> </body> </html> -
2. 以下のようなCSSファイルを作成します。
h1 { color: red; } p { font-size: 20px; } -
3. HTMLファイルのheadタグ内に、CSSファイルを読み込むためのリンクタグを記述します。
<!DOCTYPE html> <html> <head> <title>CSSの例</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello, World!</h1> <p>これはCSSの例です。</p> </body> </html> -
4. CSSファイルの中で、セレクタを指定し、プロパティと値を指定します。今回の例では、h1要素にはcolor: red;が、p要素にはfont-size: 20px;が指定されています。
-
4. HTMLファイルをブラウザで開いて、CSSが正しく適用されていることを確認します。h1要素の文字色が赤くなり、p要素のフォントサイズが20pxに変更されていることが確認できるはずです。
覚えておこう！指定方法とルール
【よく使用する単位】
ピクセル（px）：固定のサイズを指定するための単位。
パーセント（%）：要素の相対的なサイズを指定するための単位。
em：フォントサイズを基準にした相対的なサイズを指定するための単位。
rem：ルート要素（html要素）のフォントサイズを基準にした相対的なサイズを指定するための単位。
【色指定】
カラーコード（#000000～#ffffff）：16進数で表されるRGBの値で、指定した色を表す。
色名（red、blue、greenなど）：指定した色の名前で、予め定義された色が使用できる。
RGBA：RGBにアルファ値を加えたもので、透明度を指定できる。
HSL/HSLA：色相・彩度・明度の3つの要素で色を指定する。
【＠ルール】
@import：外部スタイルシートを読み込むためのルール。
@media：メディアクエリを指定するためのルール。
@font-face：Webフォントを指定するためのルール。
【コメントアウト】
スタイルシート内で、コメントを記述することができる。スラッシュとアスタリスクを組み合わせ、囲んで記述します。
/* これはコメントアウトの例です。ブラウザはこの行を無視します。*/ このように、/*と*/で囲まれた部分は、ブラウザが解釈しないコメントとなります。コメントの中には説明文や備考を書くことができます。
まとめ
お疲れさまでした！初心者にとっては少し難しく感じるかもしれません。CSSの基本には明確なルールがあるので、しっかり押さえることで後々の効率も上がりますよ。オシャレなサイトをつくる為、慣れるまでがんばりましょう！
シンギではフロントエンドエンジニアを募集しています。外部パートナーの方も大歓迎。詳しくはシンギのリクルートページをご覧ください。
https://sng.co.jp/recruit/ご相談・お見積り・ご質問等ございましたら、お気軽にお問い合わせください。
