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>タグでクラスを対象にデザインを指定する


練習問題

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

練習１


練習２


練習３


練習４


次回は

見た目シリーズのつづき。

このブログの人気の投稿

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>同士がペアになり、その外側がペアになり、・・とペアリングされる。 図　タグのネスト 次回は 見た目のつづき。 
続きを読む