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

今日、やったこと 枠線・余白 [練習問題]マンボウ [練習問題]ペンギン 今日のホワイトボード 枠線・余白 HTMLのほとんどのタグは枠線、余白の設定ができる。 枠線は項目名borderで設定。 余白は枠線内(padding)と枠線外(margin)の2種類がある。 図　枠線、余白 上だけ、下だけ、右だけ、左だけ 枠線、余白はともに上、下、右、左と個別に設定ができる。 位置 枠線 枠線内余白 枠線外余白 上 border-top padding-top margin-top 下 border-bottom padding-bottom margin-bottom 左 border-left padding-left margin-left 右 border-right padding-right margin-right 余白(padding、marginともに)はデフォルトで設定されている値がある。 よって、下図の上のように余白(padding)を上下を0、左右を10pxに設定するとデフォルトの余白(padding)はすべて上書きされる。  下図の下では余白のデフォルト値から左と右だけ上書きする。上下の余白はデフォルト値のまま。 図　デフォルトの余白 [練習問題]マンボウ style.cssだけあげておきます。 [練習問題]ペンギン 演習1 style.css 演習2 penguin.html ...

今日、やったこと デザイン設定を別ファイル(style.css)へ 今日のホワイトボード データとデザイン設定の分離 今まではHTMLファイルの<style></style>にてデザインを設定した。 が、これだとHTMLファイルが長くなってしまう。 そこで、HTMLファイルは表示データ。新たに用意するstyle.cssにデザイン設定と分離する。 図　HTMLファイルからデザイン設定を別ファイルへ分離 同じようなデザインを適用したいHTMLファイルは、同じデザイン設定ファイル(cssファイル)を読み込むことで同じようなデザインになる。 図　複数のHTMLファイルを同じデザインにする 練習問題 正解例のcssファイルだけあげておきます。 練習5 練習6 枠線の設定は下図のようにborder-xxxで行う。 図　枠線の設定 練習7 Webブラウザの便利機能 ChromeやEdgeの開発者ツール(ディベロッパーツール)がデバッグに便利。 ①Webブラウザ右上の・・・ボタンクリック ②”その他のツール”->"開発者ツール" ③”要素”タブをクリック 図　開発者ツール(ディベロッパーツール) HTMLのタグをクリックすると、そのタグのデザイン設定が表示される。 次回は 今回使った枠線と余白について。  

今日、やったこと <style>タグを使う 今日のホワイトボード <style>タグを使う 前回はタグにstyle属性を追加してそのタグのデザイン指定をした。 同じタグに同じデザインを指定したい場合はデザイン指定を重複して設定するため、めんどくさい。<style>タグを使えば同じタグ(IDやクラス)のデザインを一か所にまとめて設定できる。 〇特定の タグ のデザインを指定する場合 セレクタには　タグ名　を指定 すればOK。 図　<style>タグでタグのデザインを指定する 〇同じタグに別々のデザインを指定したい場合( ID を使う) タグにはid属性を使ってIDを指定することができる。 ※IDは同じHTMLファイル内で重複しないようにすること！！ <style>タグにて ID を対象にデザイン指定をする場合、 セレクタは　#ID名 　になる。 図　<style>タグでIDを対象にデザインを指定する 〇同じタグに別々のデザインを指定したい場合( クラス を使う) タグにはclass属性を使ってクラスを指定することができる。 IDは同じHTMLファイル内で重複指定できないが、クラスは重複OK。 <style>タグにて クラス を対象にデザイン指定をする場合、 セレクタは　.クラス名 　になる。 図　<style>タグでクラスを対象にデザインを指定する 練習問題 正解例をあげておきます。 練習１ 練習２ 練習３ 練習４ 次回は 見た目シリーズのつづき。