CSSとは？CSSの基本を初心者にもわかりやすく解説
WEBページの文字の色や大きさ、背景、配置など見た目を構築するCSS
CSS（シーエスエス）とは、「CascadingStyleSheets（カスケーディングスタイルシート）」の略で、WEBページの文字の色や大きさ、背景、配置という見た目を構築するスタイルシート言語です。
WEBプログラミングを学習し始めた人が、最初に習得するプログラミング言語がHTML（※）だとしたら、その次に習得するのがCSSで、基本的にはHTMLとセットで使用します。このコラムでは、CSSについて、初心者にもわかりやすく解説します。
※HTMLについては「今さら聞けない！HTMLとは？基本や簡単なHTMLタグをわかりやすく解説」のコラムをお読みください。
HTMLで文章構造、CSSでデザイン指定が一般的
HTMLがWEBページに表示される通常のテキストや画像を記述するのに対して、CSSはテキストや画像の見栄えを良くする役割を担っています。
例えば、文字の大きさや色を変えたり、文字や画像を表示する位置の調整、文字と文字の間隔の調整など、レイアウトに関することやアニメーションの記述もCSSで行います。
HTMLにもレイアウトに値するタグが存在するので、HTMLだけでもレイアウトを組むことは可能です。しかし、すべてのレイアウト情報をHTMLに記述してしまうことはデメリットが多く、推奨されていません。
HTMLにデザイン指定をする際のデメリット
デメリット
- ソースコードが複雑になってしまう
- デザインの変更が面倒
- コンピューターが理解しにくい
適切な文章構造でないと認識され、検索エンジンに理解されないと、せっかく作成したWEBページをうまく活用できなくなってしまってはもったいないです。そのためHTMLとCSSはファイルを分けるのが一般的です。
ファイルを分けると、上記のデメリットが改善されるだけでなく、スマホやタブレットなどPC以外のデバイスに合わせた表示もしやすくなることも良い点です。
HTMLでWEBページの文章構造、CSSでデザインを指定することが一般的です。
CSSの基本書式
CSSを表示するためには、HTMLの文章にCSSを適用させる必要があります。
CSSの基本書式は下記の通りです。
セレクタ｛
プロパティ：値；
｝
CSSは「セレクタ」「プロパティ」「値」の３つで構成されています。
この基本書式を用いて、HTMLの中の「セレクタ（どの部分の）」、「プロパティ（何を）」、「値（どのように変更する）」のかを指定します。
セレクタは、どの部分にCSSを適用させるか選択させる役割があります。例えば、h1、h2、pなどの要素です。
プロパティは、適用するCSSスタイルの種類のことで、例えば文字色を変更したい場合の「color」や文字サイズを変更したい場合の「font-size」です。
値は、セレクタに適用するプロパティをどのように変更するか具体的な数値を入れます。
例えば、プロパティに「color」が指定されている場合、「＃FFF」などのカラーコードを入力します。
HTMLソースを作成し、HTMLに対してCSSを適用させていきます。
適用方法はいくつかあるのですが、CSSファイルを別途用意し、HTMLファイルに記述し読み込ませる方法が、他のファイルへも応用がきくのでおすすめです。
サイトを自分好みにカスタマイズできるように
CSSを扱えるようになれば、WEBページを好きなようにデザインすることが可能です。
近年は、CSSの知識がなくてもサイトやブログを立ち上げることはできますが、CSSは一から見た目を作成していくので、自分の好みにカスタマイズしたり、唯一無二のサイトを作成することができるようになります。
また、プログラミングの知識がなくてもサイトやブログを作れるシステム（CMS）にWordPressがありますが、CSSを理解していれば、WordPressのサイトも好きなようにカスタマイズすることができます。
WEBサイト(ホームページ)制作に関するご相談はこちら
