第4章　ＣＳＳとは
ウェブページのスタイルを指定するための言語

ＣＳＳは、Cascading Style Sheet の略

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

文書構造はＨＴＭＬで、文章の見映えはＣＳＳで

HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、 文書の情報構造がでたらめになってしまうからです。 コンピュータや検索エンジンに理解されないでたらめな文書構造になってしまえば、せっかくの情報もうまく活用されません。
文書構造とスタイル指定を分離することが重要です。この文は、<span style="font-weight: bold;">と「太字」スタイルとしています。上の「文書の構造は****見映えはＣＳＳで」は「h4の見出し」です。見映えは同じですが、スタイルの「太字」と「見出し」とでは文章構造の意味が全く違います。

単純なスタイルの例

スタイルを指定せずに、「ＥＣ千葉のホームページ」と書くとdefaultで黒く16px表示されます。これを、<span style="font-size: 22px;color :red;">「ＥＣ千葉のホームページ」</span>とすると、「ＥＣ千葉のホームページ」 となります。これが局所的にスタイルを適用するインラインスタイルです。

何故Cascadingなのか

Cascadingとは、「階段状の滝のような」「連鎖的に伝わる」という意味ですが、 様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用されます。 このようにスタイル指定が段階的に引き継がれて文書に適用されるのがCSSの大きな特徴です。

ＨＴＭＬ文書にスタイルシート（ＣＳＳ）を適用する３つの方法

1）<link>要素で外部スタイルシート（ＣＳＳ）を呼び出して適用する

ＨＴＭＬ文書は外部ファイルに作成してあるＣＳＳを呼び出し表示する。呼び出すには<link>要素で関連づけます。ＣＳＳを変更すると、<link>要素で関連付けされた全ページの表示が変わります。

2）それぞれのＨＴＭＬ文書単位に適用する

ＨＴＭＬ文書上部の<head>***</head>に記載すると、そのページだけに適用される。

3) ＨＴＭＬ文書の要素にstyle属性を追加して局所的に適用する

ひとつの例を挙げると、あるページの特定の場所の文字は「赤く大きく表示したい」場合などです。

ＥＣ千葉のホームページで使用しているスタイルシート

ＣＳＳを昔勉強した英語単語帳のように、アルファベット順に覚えるのは止めましょう。まず挫折します。ＨＴＭＬよりは種類が多く、実際にどのように表示されるかは、やって見なければ理解しにくいものです。しかし、ＨＰ作成で実務で使用するスタイルは限られたものです。これも言葉の大元は英語です。①使いながら覚える。②元の意味を理解する。③言葉は慣れが一番です。

アルファベット順に並べたHTMLタグリストは、こちら（PDF）。

第4章　ＣＳＳとは
ウェブページのスタイルを指定するための言語

ＣＳＳは、Cascading Style Sheet の略

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。

文書構造はＨＴＭＬで、文章の見映えはＣＳＳで

HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、 文書の情報構造がでたらめになってしまうからです。 コンピュータや検索エンジンに理解されないでたらめな文書構造になってしまえば、せっかくの情報もうまく活用されません。
文書構造とスタイル指定を分離することが重要です。この文は、<span style="font-weight: bold;">と「太字」スタイルとしています。上の「文書の構造は****見映えはＣＳＳで」は「h4の見出し」です。見映えは同じですが、スタイルの「太字」と「見出し」とでは文章構造の意味が全く違います。

単純なスタイルの例

スタイルを指定せずに、「ＥＣ千葉のホームページ」と書くとdefaultで黒く16px表示されます。これを、<span style="font-size: 22px;color :red;">「ＥＣ千葉のホームページ」</span>とすると、「ＥＣ千葉のホームページ」 となります。これが局所的にスタイルを適用するインラインスタイルです。

何故Cascadingなのか

Cascadingとは、「階段状の滝のような」「連鎖的に伝わる」という意味ですが、 様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用されます。 このようにスタイル指定が段階的に引き継がれて文書に適用されるのがCSSの大きな特徴です。

ＣＳＳを勉強するのに便利なウェブサイト

ＣＳＳは、ＨＴＭＬを勉強するのには、教科書よりウエブサイトでパソコンから入力してみてどのように表示されるかを実際に経験するのが一番早いと考えます。
ウエブには、色々な勉強サイトがありますが、以下の２つのサイトを推奨します。この二つは、ＨＴＭＬで取り上げたのと同じウエブサイトです。

1；https://www.w3schools.com/

  • 英文です。独学用サイトであるのと世界中の人が編集に協力をしている様子です。
  • このサイトの特色は、実際にパソコンで入力をしてどのように表示が変化するかを確かめることができることです。これが推奨する一番の理由です。
  • w3schools.com：https://www.w3schools.com/にアクセスし右上のをクリックすると日本語に機械翻訳されます。

2；：http://www.htmq.com/

  • 表題「クイックリファレンス」の示すとおりに早見表ですが、ＨＴＭＬとＣＳＳ等のウエブページ作成の基本を網羅しています。
  • なにより、説明の日本語が的確で、理解しやすいのが一番です。
  • 上のw3schoolsの機械翻訳の日本語が意味不明の時は、このサイトで確かめることができます。
  • （ここでは、HTML4とHTML5の違いも言及していますが、その点は無視してHTML5だけを考えれば良いでしょう。）