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の場合） 次回は 箇条書き
