先週、ホームページ作成の際に用いるHTMLの話をしました。CSS(Cascading Style Sheets）という言葉聞いたことありますか？ 最近HTMLを勉強し始めてよく登場してくる単語なので、このCSSについて勉強したいと思います。
資料をご覧ください → CSSその１
p.1 Webページは、HTMLとCSSを用いて作成されます。 以前は、HTMLの中にCSS的な要素も含まれていましたが、最近は各々役割を分担するようになってきています。HTMLは、見出し・文章・画像の情報、CSSはそれらのレイアウトに関する情報を示しています。
p.2、３ 構文は、「セレクタ｛ プロパティ ： 値 ； ｝」の形式で、「p｛ color ： red ； ｝」は、「ｐの要素の色を赤にする」という意味になります。スタイルの指示方法は３つに分類されます。①HTMLの中に直接style属性を入れる場合、②head要素内にstyle 要素を置き、文書単位でスタイルを適用する場合、③link要素で外部スタイルシート（cssファイル）を読み込んで適用場合があります。多くのWeb制作現場では③の方法が利用されているようです。
p.4 「id=“blue”」のように目印をつけたものだけ青字にしたい場合は、「#blue」を用います。 クラスセレクトでは、「.（ピリオド）クラス名」で指定した箇所について処理します。ハイライト処理をするクラス名が「hightlight」です。
p.5 左は２種類のクラスの複合の事例です。 右は子孫セレクタで、「section p」以下全てのｐ要素に適用する事例です。文章３は<section＞と同じ層にある兄弟なので適用しません。<section＞の下の「子」の層、さらに下の「孫」の層に適用します。
p.6 子セレクタは、「section > p 」と書き、sectionの直下の層にだけ適用します。複数セレクタの書き方は、並べて記載します。
本日は、ここまで。