「どんな役割を持っているの？
このようにプログラミング学習を始めて間もない方にとって、「スタイルシート」という単語は未知のものです。しかしプログラミング学習を進めていく上で、学習しておくことは必須。
スタイルシートについてきちんと理解しておくと、Web制作を行う際にとても役に立ちます。
この記事でスタイルシートについて「どのような役割か」「どのように記述するのか」についてご紹介しますので、ぜひ参考にしてみてくださいね。
目次
Style Sheet（スタイルシート）とは？
まずは「スタイルシート」について、どのようなものか解説をしていきます。
スタイルシートとは、カスケーディング・スタイルシート（Cascading Style Sheet）のことで、それぞれの頭文字をとって「CSS（シーエスエス）」と呼ばれます。
プログラミング学習を始めたばかりの方は「HTML」から学習する方が多いのですが、CSSはHTMLとセットで学習するプログラミング言語となっています。
正確にはCSSはプログラミング言語ではなく、”スタイルシート言語” です。ちなみに、HTMLは ”マークアップ言語” と呼ばれます。
HTMLではWebサイトの制作を行う際に、大まかな枠組み部分しか作成することができません。細かくデザインやレイアウトなどを変更できないため、CSSを使ってWebサイトの “見た目” 部分を変更するのです。
CSSでできるようになること
CSSを活用することで、以下のようなことができるようになります。
- 背景色や文字色の変更
- レイアウトの変更
- 簡単なアニメーション
背景色や文字色の変更
例えば文字色を変更したい場合該当するセレクタ（今回は「<h1>」）を指定して、変更させることができます。
今回は例として文字色を変更しましたが、背景色も同様に、変更させたいセレクタとプロパティを指定することで変更が可能です。
レイアウトの変更
レイアウトの変更とは、HTMLで枠組みをしたパーツのレイアウトを変更する役割です。
例えはHTMLで、「h1」「h2」「p」を記述した場合、下記のように「h1」のみを中央寄せすることが可能です。
簡単なアニメーション
CSSのバーションアップデートにより、アニメーションを実装させることができるようになりました。
細かいところまでこだわれば、凝ったアニメーションを作成することも可能です。
例えば、ボタンをクリックした際にちょっと動かしたり、文字にマウスをホバーさせると色を変化させたりすることが可能です。
これによりサイトの動きの幅が増え、おしゃれなサイトを作成することができるようになりますね。
CSSの書き方とは？
CSSの書き方には、大きく分けて2種類あります。
- 外部スタイルシート
- 内部スタイルシート
外部スタイルシート
先ほどの例を参考に、コードをみてみましょう。
上記のスタイルは、外部スタイルシートの記述方法で変更させています。
記述したコードについては、下記の通りとなっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>CSSの基本</h1> <p>CSSについて学習しよう</p> </body> </html> |
|
1 2 3 |
h1 { color: orange; } |
CSSを別で作成し、HTML側でlinkタグを使用して読み込みを行っています。
この方法は、CSSのコードが長くなる場合に利用されます。一般的にCSSの記述はこのように行います。
内部スタイルシート
内部スタイルシートとは、HTMLに直接CSSを書き込む方法です。
この方法では、記述するCSSコードが少ない場合などに役立ち、同じファイル内で変更点が確認できるためスムーズにコーディングを行うことができます。
記述方法としては、以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> h1 { color: orange; } </style> </head> <body> <h1>CSSの基本</h1> <p>CSSについて学習しよう</p> </body> </html> |
<head></head>の中に<style>ダグを組み込み、その中でCSSの記述を行います。
CSSの3つの要素とは？
- セレクタ：どのHTMLタグに対してか変更を加えるか
- プロパティ：どのような変更をするか
- 値 ：プロパティはどの程度か
CSSは、このように3つの要素を用います。大まかに言えば「何に、どのように、どのくらい」の変更を施すか、ということになります。
|
1 2 |
/*セレクタ{プロパティ: 値;} */ h1 { color: orange;} |
- セレクタ（何を）：h1を
- プロパティ（どのように）：[color] を
- 値（どのくらい）：[orange] に
このようになります。
セレクタの基本的な書き方について
- タグ名で指定
- class名で指定
- id名で指定
- 適用先を複数指定
- 絞り込み（子孫セレクタ）指定
セレクタの書き方は、この通り5つの方法があります。それぞれ指定先によって書き方が少し違うため、覚えておきましょう。
タグ名で指定
|
1 2 |
タグ名{ } |
まずは「タグ名」で指定する方法についてです。
タグとは、HTMLの<div>や<a>、<img>といったものです。このタグ名で指定する場合は、そのまま記述すればOKです。
先ほどご紹介した例も、<h1>というタグ名を指定して color の変更を行っています。
class名で指定
|
1 2 |
.class名{ } |
続いて「class名」で指定する方法についてです。
クラス名で指定する場合とは、HTMLの<タグ名 class=”〇〇” </タグ名>
このように、◯の中に示したクラス名を指定する方法です。
class名で指定する場合には、class名の前にドット（.）を付け加えます。
id名で指定
|
1 2 |
＃id名{ } |
続いては「id名」での指定方法です。
HTMLでは、id を指定することができます。
このid名 は、同じページ内に1回しか使用することができません。
- <タグ名 id=”〇〇” </タグ名>
- <タグ名 id=”□□” </タグ名>
なのでこのように、id名を分けなければいけません。
CSSを記述する際にid名で指定する場合には、id名の前にシャープ（#）を付け加えます。
適用先を複数指定
|
1 2 |
◯,◯,◯{ } |
もし同じCSSを複数のタグやclass、idに適用させたい場合には、半角コンマ（,）を使用することで可能になります。
並べる適用先は、いくつあっても大丈夫です。また、順番に意味はありません。
同じCSSを複数先に適用する場合には、まとめて指定した方が効率がいいですね。
絞り込み（子孫セレクタ）指定
|
1 2 |
◯ ○{ } |
希望する適用先を絞り込んで指定することが可能です。
「〇〇ダグの中の〇〇タグにだけCSSを適応させたい」
このような場面で活用することが可能です。
同じタグの中に別の複数のタグが存在する場合、どのタグを指定していいか迷ってしまうことがありますが、絞り込んで指定することでこの問題を解決できるでしょう。
絞り込み指定を行う場合は、最終的に指定するタグを最後に、半角スペースで間を開けて記述することで適応させることができます。
例えば以下のような例で、<div>タグの中の<h1>タグにだけCSSを適応させたい場合には、CSSは次のように記述します。
|
1 2 3 4 5 6 7 |
<body> <div class="wrapper"> <h1>CSSの基本</h1> <p>CSSについて学習しよう</p> </div> </body> </html> |
|
1 2 3 |
.wrapper h1 { color: orange; } |
まとめ
いかがでしたか？
この記事では、「Style Sheet（スタイルシート）とは？」ということで、CSSについての基礎知識についてご紹介致しました。
CSSを活用することで、Webサイトの見た目を大きく変更させることができます。HTMLを学習する際には、セットで学習しましょう！
