2月15日(木)2コマ目

今日、やったこと

  • [ページレイアウト]ヘッダ部を作る
  • [ページレイアウト]サイドナビ部のメニューを作る

今日のホワイトボード

[ページレイアウト]ヘッダ部を作る

下図のようなヘッダを作りました。

図　ヘッダー

ポイントは

  • メニューは横並び 
  • タイトルとメニューは横並び 

です。いずれもdisplay:flex;を使います。

HTML


CSS


CSSのセレクタですが、下図のようにxxxの中のxxxのように親子関係を使って特定の箇所を指定することができます。

図　CSSのセレクタ


[ページレイアウト]サイドナビ部のメニューを作る

下図のようなメニューを作りました。

図　サイドナビ部のメニュー

ひたすらやってきた横並びはありません。

また一見表のように見えますがtableタグは使っていません。

もともとは箇条書きですが、マーカーや余白、枠線等を指定して作っています。

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