KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

Web制作にはまずHTMLが必要であることをご存じの方も多いと思いますが、HTMLだけ覚えてもホームページを完成させる事は出来ません。ホームページを見やすくわかりやすくするにはCSSが必要となります。
HTMLをマスターしたら次はCSSについて理解を深めましょう。

CSSとは

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）の略で、ホームページの見た目（スタイル）を設定する為の言語で、HTMLと組み合わせて使用します。

なぜCSSが必要なの？

インターネットが普及し始めた初期の頃はできる事が限られていた為、ホームページ制作もシンプルにHTMLだけで作る事ができました。次第にインターネット利用者が増え、ホームページの商用利用が増えると共にデザインの必要性が求められるようになりました。そしてHTMLに次々と見た目（スタイル）の設定が行える機能が追加されていきました。
HTMLだけで文書構造と見た目のスタイル指定ができることから、難易度も低くわかりやすく直感的なページ制作ができるメリットがありましたが、その分、HTMLの記述が長く複雑になり、またページ更新の際、複数のページ更新作業が膨大になるなどのデメリットがありました。またHTML言語の性質上、複雑なスタイル指定が行えない欠点もありました。
こうした問題を解決する為に、文書構造の指定と、見た目（スタイル）の指定をそれぞれ分離してより柔軟で高度なスタイルの指定が行える言語「CSS」が新たに用意されました。
現在のホームページ制作では、文書の意味や構造の設定はHTMLで、見た目のスタイルやデザインの指定はCSSで設定します。

どうやって記述するの？

CSSの基本書式は次の通りです。

セレクタ { プロパティ : 値 ; }

セレクタ　→　スタイルを適用する対象のこと
プロパティ　→　色やサイズなどCSSに用意されているスタイルのこと
値　→　プロパティに対応した設定値のこと

具体的にどう書くの？

例えば次のようにCSSを記述します。

これは、HTMLのh1タグ（セレクタ）に、color（プロパティ）を適用し、red（値）で表示する、という意味になります。

CSSの基本書式は、セレクタを、プロパティに指定した値で表示する、という文法になります。
つまりHTMLの「なに」を「どうする」のか、を指定していきます。

どこに書くの？

CSSはHTMLファイルとは別にCSSファイルを用意してCSSのみ記述します。これをHTMLのlink要素で読み込ませます。
link要素はHTMLのhead要素内に次の通り記述します。

どのようにスタイルが適用されるか

まず下記の通りにHTMLとCSSを書いてみましょう。

HTMLソースコード

CSSソースコード

HTMLのhead内にlink要素でCSSファイルとリンクすることで、HTML内のh1要素の文字の色を赤色で表示することができます。

CSSについての概要は以上となります。
まずはHTMLとCSSそれぞれの役割を理解して、お互いがどのように紐づいて結果が表示されるのかを確認しながら、ひとつひとつCSSによるWebデザインテクニックを身に着けていきましょう。

HTML/CSSによる文書構造の定義とスタイルの指定が理解出来たら次は動きの設定、Javascriptの習得に続きます。