12月18日(水)2コマ目

今日、やったこと

HTMLファイルからデザイン設定を分離する

今日のホワイトボード

HTMLファイルからデザイン設定を分離する

複数のHTMLファイルで同じデザインにするには<style></style>の中身を一緒にする必要がある。

が、1ファイルだけ編集を忘れたり、そもそも重複しているので無駄。

そこで、１つのファイル(style.css)にデザイン定義を行い、HTMLファイルはそのデザイン定義ファイル(style.css)を読み込む方法がよく使われる。

図　デザイン設定を別ファイルへ

サンプル

[変更前]HTMLファイル内でデザイン定義

今までと同じ。

[変更後]デザイン定義ファイル(style.css)

<style></style>内のデザイン定義をこのファイルに引っ越し。

[変更後]HTMLファイル

<style></style>を削除。

かわりにデザイン定義ファイルstyle.cssを読み込むために<link>タグを追加。

次回は

練習問題「ふぐ」のつづき。