1月21日(火)3コマ目

今日、やったこと

  • 枠線・余白
  • [練習問題]マンボウ
  • [練習問題]ペンギン

今日のホワイトボード

枠線・余白

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


演習3

penguin.html

style.css


演習4

style.css


演習5

style.css


演習6

style.css


演習7

style.css


演習8

style.css

次回は

箇条書き、リンク等をやります。


このブログの人気の投稿

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>タグでクラスを対象にデザインを指定する 練習問題 正解例をあげておきます。 練習１ 練習２ 練習３ 練習４ 次回は 見た目シリーズのつづき。
続きを読む