1月14日(火)3コマ目

今日、やったこと

デザイン設定を別ファイル(style.css)へ

今日のホワイトボード

データとデザイン設定の分離

今まではHTMLファイルの<style></style>にてデザインを設定した。

が、これだとHTMLファイルが長くなってしまう。

そこで、HTMLファイルは表示データ。新たに用意するstyle.cssにデザイン設定と分離する。

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


同じようなデザインを適用したいHTMLファイルは、同じデザイン設定ファイル(cssファイル)を読み込むことで同じようなデザインになる。

図　複数のHTMLファイルを同じデザインにする


練習問題

正解例のcssファイルだけあげておきます。

練習5


練習6

枠線の設定は下図のようにborder-xxxで行う。

図　枠線の設定


練習7


Webブラウザの便利機能

ChromeやEdgeの開発者ツール(ディベロッパーツール)がデバッグに便利。

①Webブラウザ右上の・・・ボタンクリック

②”その他のツール”->"開発者ツール"

③”要素”タブをクリック

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


HTMLのタグをクリックすると、そのタグのデザイン設定が表示される。


次回は

今回使った枠線と余白について。

 

このブログの人気の投稿

11月29日(金)4コマ目

イメージ
今日、やったこと タグ HTMLファイルの構造 表(テーブル)をつくる 表のセルを結合する 今日のホワイトボード タグ HTMLにはいろいろなタグが定義されている。 タグにはそれぞれ役割が決められており、利用目的に合ったタグを利用する。 データにタグを付加することで、データに意味を持たせることができる。 下図の「きょうの料理」は単なる文字列だが、<h1>タグを付加することで、「きょうの料理」は見出しとして扱われる。 図　タグ 多くのタグは開始タグ、終了タグのペアになっている。 図　開始タグ、終了タグ HTMLファイルの構造 HTMLファイルは以下の構造になっている。 <html>で始まり、</html>でおわる <html></html>内には<head></head>と<body></body>が含まれる <head></head>内はヘッダー部で設定はこちらに <body></body>内はボディー部で表示データはこちらに 図　HTMLファイルの構造 表(テーブル)をつくる 行と列は以下のとおり。結構まちがいやすいので。 図　表の行と列 表は <table>タグ 、 <tr>タグ 、 <td>タグ でつくる。 <tr>タグで列を、<td>タグで列内の各セルをつくる。 ...
続きを読む

12月24日(火)3コマ目

イメージ
今日、やったこと 文字の色、サイズ等を変える 今日のホワイトボード 文字の色、サイズ等を変える タグのstyle属性で見た目の指定ができる。 図　style属性の使い方 変更範囲がタグで挟まれていない場合は、<span></span>を使って範囲を指定する。 <span>タグは範囲を作るためのタグで見た目には影響がない。 練習問題 正解例をあげておきます。 タグのネスト <span></span>のなかにさらに<span></span>とネスト構造にすることも可。 この場合は、一番内側の<span></span>同士がペアになり、その外側がペアになり、・・とペアリングされる。 図　タグのネスト 次回は 見た目のつづき。 
続きを読む

1月7日(火)3コマ目

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