今日、やったこと

スタイルシートファイル

今日のホワイトボード

前回からデザインはHTMLとは別のファイルに設定しています。このデザイン設定ファイルのことをスタイルシートまたはスタイルシートファイルと呼びます。

ファイルの中はHTMLの<style>タグ内でのデザイン設定と同じです。

スタイルシートを使ったデザイン設定の練習問題。

あらたに枠線の指定、文字の高さの指定が出てきました。

図　枠線、文字の高さの設定

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

スタイルシートを使ったデザイン設定の練習問題。こちらはセレクタをタグ、クラス、IDと使い分ける必要があります。

あらたに余白の指定が出てきました。余白はマージン、パディングの2種類があります。詳しくは次回以降で。

図　余白の設定

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

ブラウザの開発者ツール(Edge)、ディベロッパーツール(Chrome)が使えます。

要素またはelementsタブをクリックすると各要素(タグ)のデザイン指定が確認できます。

図　開発者ツール(ディベロッパーツール)

マージン、パディングをやります。