11月27日(月)3コマ目

今日、やったこと

枠線、余白の練習

今日のホワイトボード

枠線

枠線の設定項目名はborder。borderは線種、線幅、線色の3つの項目をスペース区切りで指定。

図　枠線の設定
また、上下左右の枠線だけを設定する項目もあります。
設定したい枠線 項目名
上の枠線だけ border-top
下の枠線だけ border-bottom
左の枠線だけ border-left
右の枠線だけ border-right


余白

余白は
  • 枠線の内側（項目名はpadding)
  • 枠線の外側（項目名はmargin)
の2種類があります。
また、上下左右の余白の指定方法が4種類あります。
図　余白

上の余白だけ、下の余白だけを指定する下表の項目もあります。
設定したい余白 枠線内側の余白 枠線外側の余白
上の余白だけ padding-top margin-top
下の余白だけ padding-bottom margin-bottom
左の余白だけ padding-left margin-left
右の余白だけ padding-right margin-right

[練習問題]マンボウ図鑑

練習問題をやってもらいました。正解例をあげておきます。

style.css


次回は

練習問題のペンギンのつづきです。 

このブログの人気の投稿

10月4日（水）2コマ目

イメージ
今日、やったこと ホームページはなにでできている？ HTML タグ 簡単なHTMLファイル作成 画像を表示する 今日のホワイトボード ホームページはなにでできている？ ホームページはWebブラウザ(Google Chrome、Microsoft Edge、Apple Safari等)を使って表示する。このWebブラウザはHTMLファイルの中身をHTMLのルールに従って表示する。 ということで、 　 ホームページを作る = HTMLファイルを作る です。 HTML Hyper Text Markup Languageの略。 HTMLはデータに意味を持たせるためのタグを決めている。 データにこのタグを使って意味づけをしたファイルがHTMLファイル。 結局、この授業はHTMLのタグを理解して使いこなすことが目的。 なお、HTMLファイルのファイル名は～.html。.htmlをつけることでこのファイルはHTMLファイルだと認識される。 図　WebブラウザとHTMLファイル タグの基本 <h1>がタグ。HTMLではいろいろなタグが定義されている。 タグには役割が決められている。 <h1>タグは見出し。 <p>タグは段落。 多くのタグは開始タグ(<h1>や<p>)と終了タグ(</h1>や</p>)がペアになっている。 <h1>と</h1>で挟まれたデータが見出しになる。見出しなので、Webブラウザは大きな字で表示する。 図　HTMLのタグ HTMLファイルの構造 HTMLファイルは<html>タグで始まり、</html>タグで終了する。 <html>と</html>の中に ヘッダー部になる<head>タグと</head>タグ 本文部になる<body>タグと</body>タグ がある。 Webブラウザに表示されるのは<body>～</body>。 図　HTMLファイルの構造 画像を表示する 画像ファイルを表示するには<img>タグを使う。 <img>タグにはsrc属性があり、このsrc属性で表示したい画像ファイル名を指定する。 wi...
続きを読む

11月29日(水)2コマ目

 今日、やったこと [練習問題]ペンギン [練習問題]ふぐ [練習問題]クジラ 今日の練習問題 正解例を挙げておきます。 [練習問題]ペンギン 練習１ HTML 変更なし。 style.css 練習2 HTML ３つの<p>タグにIDを設定。 style.css 練習3 HTML ３つの<p>タグのうち上と下の<p>タグには同じクラスを設定。 style.css 練習4 HTML 変更なし。 style.css 練習5 HTML 変更なし。 style.css 練習6 HTML 変更なし。 style.css 練習7 HTML 変更なし。 style.css 練習8 HTML 変更なし。 style.css [練習問題]ふぐ 演習１ style.css 演習2 style.css 演習3 style.css 演習4 style.css 演習5 style.css 演習6 style.css 演習7 style.css [練習問題]クジラ style.css 次回は 評価用課題を作ってもらいます。 身近な出来事や自分の趣味や好きなことなど自分でテーマを決めてホームページを作ってもらいます。
続きを読む

1月17日(水)2コマ目

イメージ
今日、やったこと リンク 今日のホワイトボード リンク リンクとはクリックすると別ページを表示したり、同じページの別の場所を表示する仕組み。 <a>タグで作ります。<a>タグのhref属性で移動先を指定します。 別ページに移動する場合 <a>タグのhref属性に移動先ファイルを指定します。 図　<a>タグで別ページへ移動 同じページ内で移動する場合 まず、移動先にIDを指定します。 <a>タグのhref属性には移動先のIDを指定します。IDの指定は　 #ID名 　です。 図　<a>タグで同じページ内を移動 target属性 リンクをクリックして移動する際、移動先ページを同じタブに表示するか、新規タブに表示するかコントロールできる。 target属性値 表示 _blank 新規タブに表示 _self デフォルト。同じタブに表示 練習問題 リンクの課題ですが、テーブルも使っています。 図　練習問題　ヒント 正解例をあげておきます。 1ページ目(index.html) 写真は表形式(2行x3列)で表示。 リンクの表示内容を写真にすることで、写真をクリックすると各犬の説明ページへ移動。 秋田犬のページ(akita.html) index.htmlにて秋田犬の写真をクリックすると表示される秋田犬のページ。 説明は横方向に2セルを結合したセル。colspan属性で結合を指定。 甲斐犬のページ(kai.html) index.htmlにて甲斐犬の写真をクリック...
続きを読む