1月12日(金)3コマ目
今日、やったこと
- おさらい
- デザインを別ファイルで設定
今日のホワイトボード
おさらい
後期スタート後11月くらいまでHTMLをやりましたが、忘れていると思いますので、おさらいをしました。
おもに見た目の変更(フォントの色や背景色の変更など）をやりました。
今回使った設定項目名は下表のとおり。
| 項目名 | 役割 |
|---|---|
| color | フォント色 |
| background background-color | 背景色 |
<style>タグでデザイン設定
<style>タグ内で対象が
- タグ
- ID
- クラス
のデザイン設定ができる。
対象の指定は下図のセレクタで行う。タグならタグ名、IDなら#ID名、クラスなら.クラス名。
|
| 図 <style>タグの中 |
IDとクラス
タグにはID(id="id名")やクラス(class="クラス名")が設定できる。
IDとクラスの違いは重複して設定できるか否か。
IDは重複NG。クラスは重複OK。
練習問題
正解例をあげておきます。
練習１
<h2>タグ、<h4>タグ、<p>タグのデザインを指定すればOK。
練習２
同じ<h2>タグでもデザインが異なる。<h2>タグを対象にデザイン設定をしてもダメ。
よって、<h2>タグにidを設定し、各idのデザイン設定を行う。
<h4>タグは４つあるが、前半2個と後半2個が同じデザイン。よって前半2個には同じクラスを設定。後半2個にも同じクラスを設定。
デザインを別ファイルへ
もともとは以下のように<style>タグ内でデザイン定義。
デザイン定義だけ別ファイル(style.css)にした。
HTMLは<link>でデザイン定義ファイルを読み込む。
複数ページで同じデザインにしたい場合、<style>タグのなかは同じになる。
|
| 図 同じデザイン=<style>タグのなかは同じ |
このままだとデザインを変更するさい、全HTMLを編集する必要があり、効率が悪い。
そこで、デザイン定義だけのファイルを用意して各HTMLから読み込むようにしている。
|
| 図 デザイン設定ファイル(style.css)を各HTMLから読み込む |
次回は
しばらくは見た目。
