1月31日(水)2コマ目

今日、やったこと

親子関係の<div>でfloatを使う

今日のホワイトボード

親子関係の<div>タグ

以下のHTMLはid=parentの<div>タグ内に3つの<div>タグ(id=box1、id=box2、id=box3)があります。

HTML


id=parentの<div>タグとid=box1～3の<div>タグの関係は下図のイメージです。

図　親子関係の<div>タグ

CSSで背景色、大きさの指定をします。

CSS



表示すると以下のようになります。

図　表示すると

横並びにする

このid=box1～box3の3つの<div>タグにfloat:left;を指定して、横並びにします。

CSS


３つの<div>タグは横並びになりますが、背景色が赤色のid=parentの<div>タグが表示されません。

図　表示すると

これは３つの<div>タグにfloat:left;を指定すると、id=parentの<div>タグから浮き上がります。その結果、id=parentの<div>タグの中身がなくなります。中身が無くなるとid=parentの<div>タグは縦の高さが無くなってしまいます。

図　親要素(id=parentの<div>タグ)が消えた理由


子要素をfloat:leftした親要素に高さを与える

親要素(id=parent)に高さを与えるには

  • heightで高さを指定
  • overfloat:hiddenを指定

の2種類の方法があります。


〇heightで高さを指定する

親要素(id=parent)に

　height: 高さ;

を指定して高さを指定します。

簡単ですが、高さが中途半端になる可能性もあるため、お勧めのやり方ではありません。


〇overflow:hiddenを指定する

overflowはボックス内に収まらない要素をどうするかを指定します。

hiddenを指定すると、ボックス内に収まらない要素は表示しません。

これだとoverflow:hidden;が子要素が浮き上がった親要素の高さに関係はなにもありません。

overflowには別の役割があります。overflowが指定された要素は子要素を並べる基準になります。この結果、親要素は子要素の大きさを知ることができます。

CSS


練習問題

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

HTML


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にて甲斐犬の写真をクリック...
続きを読む