CSSとは？簡単に解説！初心者でもわかる書き方と基本を紹介

Webサイトを作る際に必要となるCSS。
CSSという単語は聞いたことはあるけど、詳しい内容やどのように記述するのか知らないという方も多いのではないでしょうか。

綺麗で見やすいWebサイトを作るためには、CSSがかかせません。HTMLとセットで、ぜひプログラミング初心者に学習してほしい言語です。

この記事では、CSSとは何でどんなものが作れるのか、そしてその書き方までCSSに関する基本を紹介します。プログラミング初心者の方でも分かるように簡単に解説しているため、ぜひ参考にしてみてください。

CSSとは何か

CSSとは何か、CSSの概要や書き方、HTMLとの関係性について簡単に解説します。

まずはじめにCSSとは

CSSとは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略称です。後半の文字を取ってスタイルシートとも呼ばれます。

世の中には数多くのコンピュータ言語がありますが、CSSはその中でも「スタイルシート言語」に分類されます。JavaやPHPのような「プログラミング言語」とは区別されるため、注意が必要です。

CSSの主な役割は、Webページの文字の色や配置などを整えてWebページにスタイルを付けることです。スタイル付けすることで、華やかで見やすいWebページが作れます。実際に世界中の多くのWebサイトは、CSSによってスタイル付けられています。

CSSの書き方

CSSを描くときに意識する項目は「セレクタ」と「プロパティ」、「プロパティの値」の3つです。なお、それぞれの項目の詳細については後の章で詳しく解説します。

3つの項目の、具体的な配置は以下の通りです。

セレクタ
{

プロパティ：プロパティの値；

}

まずは、どの要素にCSSを適応するかセレクタに指定します。次に何の項目を変更したいのかプロパティに指定し、最後にプロパティの値を設定して終わりです。

ここで注意することは、プロパティとプロパティの値を「{}」で囲むことです。囲むことで設定したプロパティが、セレクタの範囲に適用されます。

このようにCSSは、複雑なロジックを考えずとも簡単に記述できます。学習難易度も低く、プログラミング初心者にぜひトライしてほしい言語です。

CSSとHTMLの関係性

Webサイトを作るうえで、CSSとセットで学習されることが多いのが「HTML」です。セット学習されることが多い理由は、CSSはHTMLを装飾するための言語だからです。

HTMLとはWebページを構成するベースとなる言語で、見出しやタイトル、文章といったWebページの枠組みを形成します。HTMLだけでもWebページを作ることは可能ですが、ただ単に文字や画像が並んでいるとても簡素なものになってしまいます。それに対してCSSでスタイル付けすることで、文字の色などが変わり見た目が良くなるのです。

このようにHTMLはWebページの骨格を作るためのもの、CSSはWebページを飾るためのものと明確に役割が異なります。そのため、CSSとHTMLのファイルを分けることが一般的です。

CSSでできること

CSSでできることを、4つ紹介します。

Webページの装飾

CSSでできること1つ目は、Webページの装飾です。

HTMLだけで作成したWebページは、ただ単にテキストや画像が並んだ素っ気ないものとなってしまいます。それでは大変読みづらく、ユーザビリティの低いWebページとなってしまうのです。しかしCSSで装飾をすることで、メリハリのある読みやすいWebページと変えられます。

CSSにある、代表的な装飾機能は以下の通りです。

上記で挙げた装飾は、プロパティを設定することで可能です。

アニメーションの作成

CSSでできること2つ目は、アニメーションの作成です。複雑なアニメーションはJavaScriptやPHPといったプログラミング言語で作成する必要がありますが、簡単なものだったらCSSでも対応できます。

CSSでアニメーションを作成する場合、使用するプロパティは2つです。

上記の2つのプロパティを駆使することで、文字が遅れて表示されたりマウスオーバーすると画像が動いたりといった、アニメーションを適用できます。

外部ファイルの活用

CSSでできること3つ目は、外部ファイルの活用です。HTMLとCSSはどちらもWebページを構成するものですが、一般的に別ファイルで記述します。ファイルを分け、CSSを外部ファイルとしてHTMLから呼び出すことで、Webページ読み込み時の負担を軽減することができるのです。

同じWebページの表示であっても、パソコンやスマホなど表示端末は多岐に渡ります。そのためHTML内に全ての表示端末に対するCSSを記述すると、読み込みに時間がかかってしまうのです。こういった事態を避けるためにも「パソコン表示用のCSS」や「スマホ表示用のCSS」とファイルを分け、HTMLからそれぞれの表示端末に合わせてCSSの外部ファイルを読み込みます。

共通パーツの制作

CSSでできること4つ目は、共通パーツの制作です。CSSでファイルを作成することで、Webサイト全体に適応する共通パーツが制作できます。

Webサイトの統一感を出すため、全てのWebページに同じスタイルを適用する必要があります。1ページずつスタイルを適用すると大変ですが、CSSで共通パーツを作り、それぞれのHTMLから呼び出すことで簡単に同じスタイルを適用できます。

また、共通パーツのCSSを制作しておくことでメンテナンスも楽になります。共通パーツのCSSを変えるだけで、そのCSSを適応している全てのWebページに対して変更を加えられるためです。

CSS構文のルールと基本文法

CSSは以下のように記述します。

セレクタ
{

プロパティ：プロパティの値；

}

セレクタとプロパティ、プロパティの値の3つの構成要素について解説します。

セレクタ

セレクタにはHTMLのどの部分に設定したプロパティと値を適用するか指定します。

セレクタには、HTMLのタグやdivタグで設定したclass名/id名の記述が可能です。例えばWebページの大見出しにプロパティと値を適用したい場合、セレクタに「h2」と記述します。

プロパティ

プロパティには、何の項目を変更するのか指定します。

よく使われるプロパティは、以下の通りです。

プロパティの値

プロパティをどのように変更するか、具体的な値を設定します。例えば文字の色やどんなフォントにするか、などです。

プロパティによって、設定する値は異なります。そのため、プロパティとセットで学習することがおすすめです。

CSSを理解して綺麗なWebサイトを作ろう

CSSとは、HTMLで作成したWebページにスタイルを付けるための言語です。CSSでスタイルを付けることで、ユーザーにとって見やすい綺麗なWebサイトを作成できます。

CSSでできることは、Webページの装飾・アニメーションの作成・外部ファイルの活用・共通パーツの制作の4つです。

CSSを構成する要素はセレクタ・プロパティ・プロパティの値の3つです。CSSは複雑なロジックも必要なく、簡単に記述できます。学習難易度も低いため、ぜひ習得してみてください。