11月5日(水)1コマ目

今日、やったこと

[練習問題]文字の色や大きさを変える(style属性を使う)

<style>タグを使う

今日のホワイトボード

[練習問題]文字の色や大きさを変える(style属性を使う)

正解例をあげておきます。

<span>タグのデザインをまとめて指定

今までは各タグにstyle属性を追加してデザインを指定。

同じタグに、同じデザインを設定したい場合は、効率が悪い。

そこで、<style>タグを使えば、１箇所でまとめて設定ができる。

⚪︎設定前

全ての<span>タグに

• フォントサイズは20pt
• 文字色は赤

が設定されている。

⚪︎変更後

<style>タグにて、<span>タグのデザインを設定。

全ての<span>タグに同じデザインが適用される。

ポイントはセレクタ。

タグが対象なら、セレクタは　タグ名　。

{ }内は今までのstyle属性設定値と同じ。

図　<style>タグにて<span>タグのデザイン設定

ID

タグにはid属性を追加して、IDを指定できる。

なお、IDは同じHTMLファイル内で重複NG。

<style>タグでIDを対象にデザイン設定

ポイントはセレクタ。

IDが対象なら、セレクタは #ID名 。

図　<style>タグにて、IDを対象にデザイン設定

同じ<div>タグだが、それぞれ”large"、"midium"、"small"とIDが設定されている。

<style>タグにて、IDごとにデザイン設定をしているため、別々の背景色になる。

次回は

<style>タグの続き。

練習問題をやってもらいます。