CSSとはWebサイトのデザインを構築する際に、装飾の設定を行うために使用する言語です。Webサイト制作において押さえておくべきスキルの1つでもあります。
「CSSについて詳しく知りたい」
「CSSの基本的な書き方を学びたい」
このような思いをもつ方に向けて、本記事ではCSSの概要から基本的な書き方、CSSでできることまで、CSSに関してわかりやすく解説します。
CSSとは
CSSとは、「Cascading Style Sheets（カスケーディングスタイルシート）」の略で、一般的には「シーエスエス」と呼ばれています。Webサイトを構築するうえで必須の言語であり、HTMLとあわせて2つの言語でページをデザインすることが一般的です。
CSSの役割
CSSは、Webページの装飾に関する設定をするための言語として役割を果たします。具体的には、文字のサイズや色、画像の挿入、ページ全体の背景などもCSSで設定が可能です。スタイルシートと呼ばれるファイルにコードを書くことで、Webサイトのデザインを構築していきます。
CSSとHTMLの違い
Webサイトを構築する言語として、HTMLとCSSがあります。2つの言語の違いは、Webサイトを構築するうえでの役割です。HTMLとは、「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、コンピュータに文字の定義を認識させるために使用します。
たとえば、この文章は見出し、ここにリンクを挿入する、ここで改行するといったように、Web上の文字に役割を指示するために使用する言語です。
具体的には以下のように示します。
<p>ここに文字が入ります</p>
「p」には段落を示す役割があり、上記のように<p>タグで記述することで「ここに文字が入ります」という文章がWebサイト上に表現されるという仕組みです。
HTMLが文字に役割を与える言語なのに対し、CSSはWebページの装飾に関する設定をするための言語です。HTMLで構築された要素に、サイズや色など見た目を表現するための意味付けをコンピュータに指示します。
CSSとHTMLの関係
実際にHTMLで構成されたファイルにCSSで装飾を設定すると、下記のようにWebサイトの見た目が変わります。
このように、HTMLで構築したWebサイトをCSSによって見やすく整理することができます。HTMLでも装飾の要素を設定することはできますが、簡単なデザインしか指定できなかったり記述ミスが広範囲に影響したりするデメリットがあります。そのため、HTMLとCSSの2つの言語でページをデザインするのが一般的です。
HTMLとCSSで構築するWebデザインについて興味がある方は、下記の記事も参考にしてみてください。
CSSでできること
Webサイト制作で必要不可欠なCSS。具体的にCSSを使用してできることは下記の3つです。
- 情報を見やすく装飾できる
- 要素に動きがつけられる
- HTMLをシンプルにできる
Webページの装飾に関する設定のなかでも、特に意識しておきたいCSSでできることを3つのポイントに絞って詳しく解説します。
情報を見やすく装飾できる
CSSでできることの1つ目は、情報を見やすく装飾できることです。CSSは、HTMLで構築された情報を装飾という観点から視覚的に見やすく整理する役割があります。
たとえば、強調したい文字のサイズを大きくしたり、画像のサイズを見やすい大きさに設定したりと、Webサイトの機能をデザインという側面から整えることができます。デザインにメリハリをつけて重要な情報を際立たせることで、Webサイトにアクセスした人に情報を伝える手段としてCSSは活用できます。
要素に動きがつけられる
CSSでできることの2つ目として、要素に動きがつけられることが挙げられます。HTMLで構築されたWebサイトは、文字や画像などが並べられた状態の静的なものです。そこにCSSによって強調したい要素に動きをつけることで、より印象的なWebサイトが構築できます。
たとえば、画像がふわっと下部から浮き上がるような動きを設定したり、クリックするボタンにカーソルを合わせると沈むような動きをつけたりするなど、Webサイトに動的な変化をつけることが可能です。CSSを使って要素に動きをつけることで、Webサイトに訪問したユーザーに印象を持ってもらいやすく工夫できます。
HTMLをシンプルにできる
CSSでできることの3つ目として挙げられるのは、HTMLをシンプルにできることです。CSSで装飾を設定するほかに、HTMLでも装飾の要素を設定することはできます。しかし、HTMLの構造が複雑になるなどデメリットがあります。
CSSで装飾を設定することで、HTMLは要素を正しくタグ付して整理するという役割に専念できるようになります。結果的にHTMLをシンプルに構築でき、あとから編集したり要素を追加したりする場合に、コードを書く作業者が変わっても読み取りやすいというメリットが生まれるのです。
CSSの基本書式
CSSの基本的な書式は「セレクタ{プロパティ:値;}」です。基本書式を構成する「セレクタ」「プロパティ」「値」のそれぞれが何を指すのか、以下で解説します。
セレクタ
セレクタは基本書式の最初に位置します。セレクタの役割は、CSSで装飾を設定する対象を指定することです。HTMLで構築された「どこの」要素や属性を装飾するかを明示します。セレクタは、英語で「select（選択する）」を意味しており、対象を選択するというイメージで覚えておきましょう。
具体的には「p（段落）」「a（リンク）」などのタグ要素の指定や、「 class=”属性名”」「id=”属性名”」などで対象にした属性の指定を行います。上記の画像では「p（段落）」を指定しており、対象のpタグを装飾することがわかります。
セレクタのあとには、セレクタの内容を「{ } 」で囲むことで、なにをどうするのかわかるように設定します。
プロパティ
プロパティには装飾の種類を示す役割があります。たとえば、文字色を変えたい場合はセレクタの「{ } 」で囲まれた要素の左側に「color」と入力することで、文字色を変える設定が可能です。
セレクタで指定した箇所に装飾の種類として「なにを」変更するのかを指定するためにプロパティがあります。
値
値には具体的にどんな装飾をするのか調整をする役割があります。たとえば、文字色をピンク色に変えたい場合、値に「pink」を入れることでセレクタで指定された箇所がピンク色の装飾になります。
プロパティで指定した装飾の種類を具体的に「どうする」のかを示すのに値は使用されます。上記の画像のように基本書式にならってCSSを構成することで、該当箇所の装飾を指定がない状態からピンク色に変えられるのです。
CSSの書き方
CSSの書き方として、以下の3つの種類があります。
- インライン
- 内部スタイルシート
- 外部スタイルシート
それぞれの違いは「どこに書くのか」です。実際にWebサイトのデザインを行う場合、3つのCSSの書き方を使い分けたり組み合わせたりすることが多いです。3つの書き方を違いも含めて理解しておく必要があります。
そのため、下記では3つの方法についてそれぞれの特徴・書き方について詳しく解説します。
インライン
インラインとは、HTMLのタグ内に直接CSSを書き込む方法です。インライン形式で書かれたCSSの内容は効果が最優先され、外部で書かれたCSSの内容に影響を受けないという特徴があります。
インラインでCSSを書く具体的な方法は、HTMLの該当タグに連なるようにstyle属性を追記する形でCSSを書きます。装飾したい箇所に直接CSSをかける点がメリットです。一方で、複数ページに同じ装飾が適応されている場合には、それぞれのページで修正を加える手間が発生する点がデメリットになります。
また、HTMLに直接CSSを書き込むことで、HTMLが複雑な構造になってしまいます。基本的にはインラインでCSSを書くことは少ないと覚えておきましょう。
内部スタイルシート
内部スタイルシートとは、HTMLの内部にスタイルタグを設置してCSSを書き込む方法です。インラインとの違いは、HTMLの該当タグとは別のスタイルタグを使用するところにあります。内部スタイルシートでCSSを記述することで、HTMLが文字に役割を与える部分と装飾の設定がなされている部分とを分けて記述できる点がメリットになります。
内部スタイルシートにCSSを書く場合、HTMLの上部に配置されるheadタグ内にstyleタグを追加して記述します。すると、該当のWebサイトの1ページ全体に指定した装飾が反映されます。内部スタイルシートにCSSを書く場合、複数ページあるWebサイトではページごとにCSSの編集が発生する点でデメリットになることがあります。
内部スタイルシートにCSSを書く具体的な方法は以下の通りです。
上記のように、headタグにstyleタグを追加してその中にCSSを書き込めば、該当ページの装飾等が反映されます。
外部スタイルシート
外部スタイルシートとは、HTMLを記述するファイルとは別のファイルにCSSを書き込む方法です。インラインや内部スタイルシートとの違いは、外部のファイルを使用するところにあります。外部のファイルを使用することにより、複数のWebページのデザインを一括管理できる点が最大のメリットです。
たとえば、Webページの背景デザインを一括して変更したい場合、外部スタイルシートを使用していれば、該当箇所の修正を1ヶ所行うことで、対応しているWebページの背景を一括して変更できます。一方で、HTML内部にCSSを書き込んでいる場合、それぞれのHTMLファイルを開いて編集するという手間が発生するのです。
外部スタイルシートに書いたCSSファイルをHTMLとリンクさせる場合、HTML内に以下のコードを記述する必要があります。
<link rel=”stylesheet” href=”style.css”>
実際にコードを記述する順序や実装内容をみていきましょう。
HTMLのheadタグ内にリンクさせたいCSSのファイル名を記述することで、外部スタイルシートの内容が反映されます。外部スタイルシートに書き込んだCSSとHTMLは、下記のような関係にあります。
外部スタイルシートを活用すれば、HTMLファイルとCSSファイルが別々で構成されており、それぞれのファイルでデザインを管理することができます。
CSSを学習する際のポイント
CSSを学習する方法は、書籍の利用やスクールの活用などさまざまです。なぜ学びたいか、どれくらいの期間で身につけたいかなど、目的に合わせた学習方法を選ぶことが重要です。ここでは、CSSを学習する際のポイントとして、3つの方法を説明します。
書籍でCSSを学ぶ
CSSを独学で学びたい場合、書籍から知識を得る方法が挙げられます。Webの発展にともない、Webデザインの需要が高まるなかで、CSSが学べる書籍は増えています。たくさんある書籍の中で自分にあった1冊を選ぶのは、初心者にとって難しいと感じることもあるでしょう。
下記の記事では、CSSを含むWebデザインの勉強におすすめの書籍を紹介しています。書籍でCSSを学びたい場合は下記の記事を参考にしてみてくださいね。
Webサービスを活用してCSSを学ぶ
CSSを学ぶポイントの1つに、Webサービスを活用することが挙げられます。CSSは構造などの本質的な理解から、基本書式を用いて記述する実践的なスキルまで、幅広く学ぶ必要があります。
初めてCSSを学ぶ場合、1人で習得するのに限界を感じることも少なくないでしょう。その場合には、Webサービスを利用するのも手です。たとえば、学習サイトの「progate」では、初級編・中級編・上級編と段階的にHTMLとCSSが学べる仕組みになっています。
スライドを用いた知識の習得と実際にCSSを入力して実践形式で学ぶ方法を組み合わせた学習スタイルで学べるのでおすすめです。
スクールを活用してCSSを学ぶ
CSSを効率よく実践的に学びたい場合は、スクールで学習するといいでしょう。最近ではオンライン学習できるスクールが増えており、ライフスタイルにあった学習が可能になっています。
書籍やWebサービスで学ぶ場合、実装したものが正しいかどうか自分で判断できず、正しい方法で学習できているかわからないと感じることがあるでしょう。しかしスクールなら学ぶべきカリキュラムが決まっているほか、デザイナー経験のある講師に質問できるサービスがあるなど、サポートが充実している場合が多いです。
「なにからはじめたらいいかわからない」「継続して学べるか不安」など、学習への不安がある方はスクールでCSSを学ぶことをおすすめします。下記の記事ではCSSを含むWebデザインについて学ぶ方法を詳しく解説しています。Webデザインのやり方について全体像をつかみたい場合に参考にしてみてくださいね。
初心者からCSSを学ぶならスクールを活用しよう！
本記事では「CSSとは？」といった概念から、CSSの書き方などの実践的な内容まで詳しく解説しました。CSSはWebサイトのデザインを構築するうえで土台となる知識のため、Webサイトのデザインに興味がある方は習得をおすすめします。
初心者でCSSを学ぶのに不安を感じる場合は、スクールを活用して効率よく学びましょう。女性向けキャリアスクールSHElikes（シーライクス）では、Webデザインの基礎から学べるほか、CSSについて学べるコーディング入門コースがあります。
オンライン完結型のスクールで、動画での学習に加えて疑問点を講師に質問できるサービスがあります。HTML/CSSについて基礎から実践レベルのスキルを身につけたい方におすすめです。
無料体験レッスンは随時開催しているため、一度体験レッスンに参加してみてはいかがでしょうか？
女性向けキャリアスクールSHElikes無料体験レッスンはこちら
