Info Tech

HTML5とCSS3基本講座 6回|CSSの基本文法と継承および記述場所

プログラミング

CSSの基本文法と、CSSで指定した内容が親から子、孫へ継承されること、およびCSSの記述場所について、基本的な内容を紹介しています。

 

CSSを使うメリット

HTMLでは、テキストに文書構造を与えました。文章をタグでマークアップして、見出しや箇条書きなどの意味を機械に伝える役目をしていました。HTMLで装飾されただけの文章でも読み取りはできますが、見栄えの良いウェブページではありません。

CSSを使うことで、HTMLの文書構造のままで生き生きしたデザインやレイアウトとして表示させることができます。これが、CSSを使うメリットです。

CSSの基本文法

HTML CSSHTML CSS

CSSの基本文法は、簡単です。理解するのは、「セレクタ」と「プロパティ」、「プロパティの値」です。

  1. セレクタは、「どこの」に該当するもので、スタイルを設定する要素を示しています。
  2. プロパティは、視覚表現の機能で、「何を」に該当します。
  3. プロパティの値は、「どうする」に該当します。

具体的な記述は、「セレクタ{プロパティ:値}」のようにします。例えば、h1タイトルの文字を青文字にする場合は、「h1{color:blue;}」のように記述します。(「」は不要です)

このようにすると、見出し文字のみ青文字になります。文法は、以上のように簡単です。

CSSの仕組み

CSS は、前にも紹介した通りCascading Style Sheetsの頭文字ですが、Cascadingの意味に触れます。カスケードとは、傾斜地に流れる小さな滝を意味しています。これは、上位から下位に流れ落ちるイメージです。

CSSには、親の要素から子の要素、孫の要素へと、指定したスタイルが引き継がれていく「継承」という機能があることです。

例えば、
「<body>
<p>琵琶湖は<em>日本で一番大きな</em>湖です</p>
</body>」
の例では、

body要素は、「親」です。
p要素は、「子」
em要素は、「孫」に該当します。

CSSでは、「親」のbody要素に「文字の色を青くする」と指定すると、「子」のp要素や、「孫」のem要素の文字も青くなります。

CSSを記述する場所

CSSを記述するには、「インライン」、「エンベッド」、「リンク」という3つの方法があります。

  1. 「インライン」は、HTMLのタグに直接記述するものです。
  2. 「エンベッド」は、style要素をheadの要素内に書いて、その中にCSSを記述するものです。
  3. 「リンク」は、外部ファイルとして作成したCSSをHTMLファイルから参照して利用するものです。

どの方法が良いとは一概には言えませんが、1つのCSSを複数のHTML文書で使える「リンク」は、多くの文書を扱うプロは当然のように使っています。

ポイントのまとめ

CSSの基本文法を学んできました。基本的には、「どこの」「何を」「どうする」かを、指定するだけです。

但し、「どこの」に該当する「セレクタ」は、指定が「継承」に関わるため重要です。経験を積むことで、最も良いものを選べるようになるので、焦らないで対応していきましょう。

CSSを記述する場所は、「インライン」「エンベッド」「リンク」の3つのやり方があります。

業務で対応するプロは「リンク」で対応しますが、この講座の初心者は、少しずつ経験するのが良いでしょう。

 

ABOUT ME
iyasaretaihito
子どもの時から、昆虫や恐竜、宇宙などに興味がある理科大好きな理系人間です。 会社は半導体設計関連会社に勤務して、60歳で定年退職後は趣味に没頭する、のん気なおじさんです。