情報処理実習Ⅱ 2023年度後期(2年)

今日、やったこと [ページレイアウト]ヘッダ部を作る [ページレイアウト]サイドナビ部のメニューを作る 今日のホワイトボード [ページレイアウト]ヘッダ部を作る 下図のようなヘッダを作りました。 図　ヘッダー ポイントは メニューは横並び  タイトルとメニューは横並び  です。いずれもdisplay:flex;を使います。 HTML CSS CSSのセレクタですが、下図のようにxxxの中のxxxのように親子関係を使って特定の箇所を指定することができます。 図　CSSのセレクタ [ページレイアウト]サイドナビ部のメニューを作る 下図のようなメニューを作りました。 図　サイドナビ部のメニュー ひたすらやってきた横並びはありません。 また一見表のように見えますがtableタグは使っていません。 もともとは箇条書きですが、マーカーや余白、枠線等を指定して作っています。 HTML CSS 次回は 最後の評価用ホームページを作っていただきます。

今日、やったこと 横並びメニュー レイアウト 今日のホワイトボード 横並びメニュー 前々回からfloat:left;を使って横並びレイアウトを作りました。 が、最近はfloat:left;は使わずに、display:flex;で横並びにするケースが多いです。 display:flex;を指定した要素の子要素が横並びになります。 図　ulタグにdisplay:flex;を指定すると子要素のliタグが横並びになる 以下の箇条書き(ulタグ、liタグ)を横並びリストにします。 HTML ポイントはulタグにdisplay:flex;を設定すること。子要素のliタグが横並びになります。 また、箇条書きのマーカーやマーカー用の左側の余白も削除します。 CSS 余白や背景色を設定すればボタンのような見た目にすることもできます。 図　余白、背景色でボタンのような見た目に レイアウト 3カラム(3列）のページレイアウトを作成しました。 サイドナビ部(class=sidenavのdivタグ)、コンテンツ部(class=contentのdivタグ)は横並びです。親要素(class=mainのdivタグ)にdisplay:flex;を指定すれば横並びになります。 図　3カラムレイアウト HTML CSS 次回は Webページのパーツを作ります。そのあとは評価用課題を作ってもらいます。  

今日、やったこと 親子関係の<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で高さを指定 ...