CSSについて、使い方や書き方を徹底解説

TOP
コラム
CSSについて、使い方や書き方を徹底

はじめに

この記事では、CSSについて解説していきます。CSSの意味とは何か、どういう役割があるのか、使うときはどういう記述をすればよいのかなどプログラミング初心者向けに説明していきます。

HTMLやCSSは厳密に言えばプログラミング言語ではなく、マークアップ言語と言います。このマークアップ言語は、他のプログラミング言語に比べて、習得も簡単です。これからWeb開発について学んでいきたいと考えている方やプログラミングを学びたいと考えている方に是非、興味を持っていただければと思います。

CSSとは

CSSとは、「Cascading Style Sheets（カスケーディング・スタイルシート）」の略です。カスケーディングのカスケードとは日本語で「階段状に連続する滝」という意味があります。そして、これをIT用語に置き換えると、カスケード処理といいます。指定が複数あるとき、あらかじめ決められたルールにしたがって優先順位をつけ、その優先順位が一番高いものが一つだけ、有効になるという仕組みです。

この説明だけでは、いまいちよくわからないかもしれませんが、ブラウザには元々、デフォルトのCSSがあります。それ以外にもHTMLタグの中やstyleタグの中、外部CSSファイル、さらには、ユーザーのスタイル設定もあります。これらがすべて設定されていると同じ要素に対して違う指示がいくつも出てしまうことになり、ブラウザはどれを採用して判断できずミッション放棄してしまいます。そうならないようにするために優先度の低いスタイルを優先度の高いスタイルが上書きするというカスケード処理があります。なので、まとめるとCSSとは、優先順位を決めるためのものということになります。

CSSの使い方

CSSは、Webページの見栄えを調整するために使われます。HTML(Hyper Text Markup Language)と組み合わせて使います。HTMLでテキストや画像を設置しそれに対して、CSSで色や文字の大きさなどを指定していきます。CSSファイルは通常、HTMLファイルから読み込んで使用します。

実は文字の大きさや色などはCSSを使わなくてもHTMLの各タグの中に設定していくこともできます。では、なぜ文字の大きさや背景の指定はCSS、テキストや画像の配置はHTMLと2つのファイルに分けられるのでしょうか。それは、デザインなど見栄えに関する部分の指示を別のCSSファイルとして独立させることでメリットがあるからです。そのメリットとは、適用したいスタイルをブロックに分けて、一括で指定できるという点です。これは、HTMLタグの中にスタイルを記述していく方法だと一括して指定するということはできず、一つ一つ記述していかなければなりません。ですが、CSSファイルにスタイルを記述していく方法だと、ページの中で似たようなレイアウトはブロックに分けてスタイルを指定することによって、何度も同じ処理を記述しなくて良くなります。その他、HTMLファイルとCSSファイルの2つのファイルに分けて記述していくメリットは、実務面でいうと分業ができるということです。

例えば、HTMLはプログラマーが担当し、CSSはデザイナーが担当するなど、それぞれの得意分野に集中できるので、作業効率も上がります。そして、近年Webサイトは、PCで閲覧されるよりもスマートフォンで閲覧されることが多くなってきました。スマートフォン用のデザインをレスポンシブデザインというのですが、そのレスポンシブデザインが適用できるのもCSSファイルとHTMLファイルを分けているからです。

CSSの書き方

ここまでCSSについて説明してきました。ここでは、CSSの書き方について解説します。 CSSファイルにスタイルを記述していく時は、「どこ」の「何」を「どうする」かを意識すると書きやすいです。それぞれを「セレクタ」、「プロパティ」、「値」の3要素で示します。

まず、「どこ」の部分にあたるセレクタは、HTMLのタグ名や「class属性」、「id属性」を指定します。次に「何」にあたる部分の「プロパティ」ですが、ここには、文字の色や背景色など変更したいプロパティを指定します。そして「どうする」の部分にあたる「値」は、プロパティで指定したものに対して、どういう変更を加えたいかを指定します。記述するときはプロパティの後にコロンを、値の後にセミコロンを記述し、プロパティと値をカッコで囲みます。

CSSの記述例

どこ｛何：どうする;｝

セレクタ｛プロパティ：値;｝

p｛color：red｝

まとめ

いかがでしたでしょうか。この記事では、CSSについて解説しました。 Web開発では、HTMLやCSSの知識は必須となるので、これからプログラミングを勉強してみたいと考えている方は、HTMLやCSSから学んでみると良いでしょう。また、前述しましたが、HTMLやCSSは比較的簡単で、習得しやすく自分の書いたコードやスタイルが画面にすぐ反映されるので、結果をすぐに見れて学習も楽しく行えます。