10月29日(水)1コマ目
今日、やったこと
デザインをHTMLファイルから別ファイルへ
今日のホワイトボード
今までのデザイン設定
<head>タグ内の<style>タグにて、デザイン指定をしていた。
これだとHTMLファイルが長くなる。
そこで、
- HTMLファイルはデータのみ
- デザインは別ファイルにて定義
- HTMLファイルはデザイン定義ファイルを読み込む
ように改造する。
 |
| 図 データのHTMLとデザインのstyle.cssに分ける |
改造前
<head>タグ内の<style>タグにてデザイン指定。
改造後
〇style.css
<style>タグ内をこのファイルにコピー。
デザイン指定はこのファイルにておこなう。
〇HTMLファイル
<style></style>を削除。
かわりに<link>タグでstyle.cssを読み込んでデザイン設定。
デザイン設定を別ファイルにすると
複数のHTMLを同じイメージにしたい場合、共通するstyle.cssファイルを作成し、各HTMLファイルから読み込む。
 |
| 図 同じstyle.cssを読み込むことでデザインを統一 |
練習問題
枠線はborder-xxxプロパティで指定。
 |
| 図 枠線の指定 |
練習5
HTMLファイル
style.cssファイル
練習6
HTMLファイル
style.cssファイル
おまけ ブラウザの便利ツール「開発者ツール」
HTMLファイルとデザイン設定ファイルを分離した際、HTMLファイルがデザイン設定ファイルをよみこめなかったら、
①コンソールにエラー
 |
| 図 開発者ツールの「コンソール」でエラー確認 |
②ソールにファイルが表示されない
 |
| 図 開発者ツールの「ソース」でファイル読み込みを確認 |
なお、ちゃんと読み込んでいると、下図のようになる。
 |
| 図 開発者ツールの「ソース」（読み込みOKの場合） |
次回は
箇条書き
