11月26日(水)2コマ目

今日、やったこと

[練習問題]<style>タグ

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

今日のホワイトボード 

[練習問題]<style>タグ

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

練習1

練習2

練習3

練習4

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

デザインをいろいろと設定すると、<style></style>内が増えて見づらくなる。

また、複数のページでデザインを同じにするには、<style></style>内を各ページにコピーする必要がある。

今までと同様に、各HTMLファイルの<style></style>でデザイン設定をするより、デザイン設定ファイルを１つ作り、各HTMLファイルから参照すれば効率がいい。

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

改造前

〇アオウミガメ.html

HTMLファイルの<style></style>内でデザイン設定。

改造後

〇style.css

改造前のアオウミガメ.htmlの<style></style>内のデザイン設定をコピーして作成。

〇アオウミガメ.html

デザイン設定の<style></style>を削除。

代わりに<link>タグで上記のstyle.cssを読み込む。

練習問題

枠線のデザイン設定は項目名border。

図　枠線のデザイン設定

次回は

デザイン設定を別ファイルへの練習問題。