HTML入門 2023年度後期(1年)

今日、やったこと 枠線、余白 今日のホワイトボード 枠線・余白 HTMLのほとんどのタグは上から下へ縦に配置される。 さらにそれぞれ 枠線（ border ) 枠線内の余白（ padding ） 枠線外の余白（ margin ） が設定できる。 図　枠線、余白の設定 上だけ、下だけ、右だけ、左だけの枠線・余白 枠線、余白は 上だけ（ xxx-top ） 下だけ（ xxx-bottom ） 左だけ（ xxx-left ） 右だけ（ xxx-right ） の設定もできる。 図　上、下、右、左だけの枠線・余白の設定 見出しを目立たせるために左だけや下だけに太めの枠線をつけることがある。 練習１ 正解例をあげておきます。 style.css 練習2 正解例をあげておきます。 演習1 style1.css style1.css 演習2 HTML style2.css 演習3 HTML style3.css 演習4 style4.css 演習5 style5.css 演習6 style6.css 演習7 style7.css 演習8 style8.css 次回は 横並びをやります。 そのうちテストもします。  

今日、やったこと スタイルシートファイル 今日のホワイトボード スタイルシートファイル 前回からデザインはHTMLとは別のファイルに設定しています。このデザイン設定ファイルのことをスタイルシートまたはスタイルシートファイルと呼びます。 ファイルの中はHTMLの<style>タグ内でのデザイン設定と同じです。 練習5 スタイルシートを使ったデザイン設定の練習問題。 あらたに枠線の指定、文字の高さの指定が出てきました。 図　枠線、文字の高さの設定 正解例をあげておきます。 HTMLファイル style.cssファイル 練習６ スタイルシートを使ったデザイン設定の練習問題。こちらはセレクタをタグ、クラス、IDと使い分ける必要があります。 あらたに余白の指定が出てきました。余白はマージン、パディングの2種類があります。詳しくは次回以降で。 図　余白の設定 正解例をあげておきます。 HTMLファイル style.cssファイル HTML、cssファイルのデバッグ ブラウザの開発者ツール(Edge)、ディベロッパーツール(Chrome)が使えます。 要素またはelementsタブをクリックすると各要素(タグ)のデザイン指定が確認できます。 図　開発者ツール(ディベロッパーツール) 次回は マージン、パディングをやります。 

今日、やったこと おさらい デザインを別ファイルで設定 今日のホワイトボード おさらい 後期スタート後11月くらいまでHTMLをやりましたが、忘れていると思いますので、おさらいをしました。 おもに見た目の変更(フォントの色や背景色の変更など）をやりました。 今回使った設定項目名は下表のとおり。 項目名 役割 color フォント色 background background-color 背景色 <style>タグでデザイン設定 <style>タグ内で対象が タグ ID クラス のデザイン設定ができる。 対象の指定は下図のセレクタで行う。タグならタグ名、IDなら#ID名、クラスなら.クラス名。 図　<style>タグの中 IDとクラス タグにはID(id="id名")やクラス(class="クラス名")が設定できる。 IDとクラスの違いは重複して設定できるか否か。 IDは重複NG。クラスは重複OK。 練習問題 正解例をあげておきます。 練習１ <h2>タグ、<h4>タグ、<p>タグのデザインを指定すればOK。 練習２ 同じ<h2>タグでもデザインが異なる。<h2>タグを対象にデザイン設定をしてもダメ。 よって、<h2>タグにidを設定し、各idのデザイン設定を行う。 <h4>タグは４つあるが、前半2個と後半2個が同じデザイン。よって前半2個には同じクラスを設定。後半2個にも同じクラスを設定。 デザインを別ファイルへ もともとは以下のように<style>タグ内でデザイン定義。 デザイン定義だけ別ファイル(style.css)にした。 HTMLは<link>でデザイン定義ファイルを読み込む。 複数ページで同じデザイ...