style要素

このレッスンではstyle要素を使って HTLM全体に対して styleを記述する方法について学びます style要素を使うとページ全体に対して styleを書くことができます 現在、コードエディタでサンプルファイルの HTMLを開いているところです HTMLの中身を見てみましょう body要素の中にはh1とh2タグで 見出しが二つマークアップされており h2要素にはstyle属性を使って この見出しの文字色が赤 フォントの太さが通常の太さで 表示されるように インラインスタイルを使って styleが記述されています インラインスタイルでは styleを指定したい要素に 直接styleを記述するため ここではこの同じ内容をこのページの中の h2要素、全てに適応されるように style要素を使って書き変えてみましょう style要素はこのページ冒頭の headタグの中に記述します styleはこのページにおいて 直接表示されるものではなく 裏側で動作するためのものだからです title下の後に改行を入れ styleタグを入力します styleタグは通常通り 開始タグと終了タグで構成されており このstyleタグの中に CSSを書いていきます このstyleタグの中は 非常に特殊な状態です このstyleタグの中では HTMLの構文ではなく CSSの構文を使います CSSの構文では 使用するstyleを適応したいターゲットを セレクタという形で定義します セレクタはスタイルを適応したいターゲットを ブラウザやユーザーエージェントに 伝えてくれます ここで適応したいターゲットは h2要素ですので ここではh2と入力します この時ここに記述するのは CSSの構文ですので htmlのように<（山形カッコ）で 始めたりする必要はありません 指定したい要素の名前を直接指定します このようにステイルを指定したい要素を 直接セレクタに指定する方法を タイプセレクタと呼びます セレクタを記述した後は ｛（波カッコ）を入力します しばしばこのセレクタと｛（波カッコ）の間に 半角スペースを入力するケースがありますが この半角スペースは あってもなくてもかまいません 単に半角スペースがあると 見やすいという理由で 半角スペースを空けるケースがよく見られます…