【初心者向け】CSSとは？読み方は？CSSの記述方法・記述場所・ルールも分かりやすく解説

CSSとは?

CSSはCascading Style Sheetsの略でウェブページのスタイルを指定するための言語です。

読み方は「カスケーディング・スタイル・シート」です。

ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。

HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合はスタイルシート言語の1つであるCSSが一般的に利用されています。

CSSは、HTMLと組み合わせて使用する言語です。

HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイル、プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

HTML&CSS事典を欲しい方必見（kindle unlimitedだと無料で読めます）

HTML&CSSを学びたい方必見

CSSの記述方法・ルール

CSSはHTMLのタグの「何を」「どうするのか」を記述しています。

h1 {
 color: orange;
 font-size: 36px;
}

まずはどの要素に対してデザインを適用させるのかを最初に示しています。

この部分をセレクタと言います。

次に要素に対する具体的なデザイン設定は {　} 内に記述していきます。

{　} 内には何をどのようにデザイン設定をするのかを指定します。

{　} 内はプロパティ名とプロパティ値をコロン( : )で区切って記述します。

そして最後はセミコロン（ ; ）をつけて終わりです。

プロパティ名とプロパティ値は「{ }」で囲んであげることにだけ注意してください。

そこだけ気を付ければ、CSSの書き方は難しくはないでしょう。

CSSの記述場所

インラインスタイル

HTMLのタグに直接スタイルを記述し、そのタグにのみ反映させることができます。

スタイルをテスト的に表示したい際によく用いられます。

ドキュメントスタイルシート

HTML文書のheadタグ内に、スタイルをまとめて記述することができます。

複数ページあるうちの特定のページにだけ優先的に反映させたいスタイルがある場合に使用することがあります。

外部スタイルシート

HTML文書以外にスタイル定義のみのファイル（スタイルファイル）を記述し、HTML文書内から参照してスタイルを指定する方法です。

外部スタイルシートは更新がしやすいという理由で、現在最も使用されています。

まとめ

インラインスタイルの場合はその要素のみ、ドキュメントスタイルシートはそのページ内の要素のみにしかスタイルを適用しません。

もしWebページが何百、何千ページとなった場合、1ページずつスタイルを変更していくのは非常に骨が折れる作業になってしまいます。

しかし外部スタイルシートはHTML内でlinkタグを使用してスタイルシートと結びつけるだけで、そのスタイルシートに定義されているスタイルが反映されます。

1つのスタイルシートのファイル内にあるスタイルを変更するだけで、linkタグでつながっているすべてのHTMLファイルの要素のスタイルを変更することができます。

このように現在は更新のしやすさを考えて外部のファイルにまとめてスタイルを管理することが一般的です。もちろん上述の2つの方法と組み合わせることもできます。

CSSのルール

半角スペース・改行を入れたソースコード

h1 { 　
 color: orange;
 font-size: 36px;
}

半角スペース・改行を入れないソースコード

h1{color: orange;font-size: 36px;}

どちらのソースコードのほうが見やすいでしょうか?

もちろん、「半角スペース・改行を入れたソースコード」のほうが見やすいかと思います。

どのような書き方をしても大丈夫ですが、書き方を統一しておくことで見やすくもなりますし、予想外の編集ミスを防ぐことができます。

また、CSSのセレクタはカンマ( , )で区切って複数指定することもできます。

例えば、h1要素とp要素を同じ表示指定にする場合は以下のように記述します。

h1, p { 　 
 color: orange; 
 font-size: 36px; 
}

コメントの記述方法

CSSではソースコードにコメントを記述することができます。

「/*」と「*/」で囲った部分がコメントとなります。

コメントを書くことであとで見返した時、どのような表示設定がされているのか一目で分かりやすいです。

また、コメントを利用して一時的に表示設定を無効にすることも可能となっています。

/* 見出し */
h1 { 　 
 color: orange; 
 font-size: 36px; 
}

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

まとめ