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

今日、やったこと 横並びメニュー レイアウト 今日のホワイトボード 横並びメニュー 前々回から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で高さを指定 ...

今日、やったこと 横に並べる 今日のホワイトボード 普通は縦にならぶ とくになにも指定がなければ、各タグはHTMLファイルの上から順に縦に並びます。  図　ふつうは縦に並ぶ float1.html style1.css 3つの<div>タグは縦に並んで表示されます。 図　ふつうは縦に並ぶ 左右横並びに表示 左右横並びに表示するには、横並びの要素に float:left を指定します。 図　float:left;で横並び 先ほどのfloat1.htmlに対して、以下のstyle2.cssを適用します。 style2.css 2つ目の<div>タグにfloat:left;が設定されるため、 2つ目の<div>タグ(緑色)は赤色や青色の<div>タグより1段上に浮き上がる 3つ目の<div>タグ(青色)は浮き上がった2つ目の<div>タグ(緑色)の下に潜り込む のように表示されます。 図　2つ目の<div>タグのfloat:left;設定 さらに以下のstyle3.cssを適用します。 style3.css 2つ目、3つ目の<div>タグにfloat:left;が指定されているため、この２つの<div>タグが横並びで表示されます。 ...

今日、やったこと リンク 今日のホワイトボード リンク リンクとはクリックすると別ページを表示したり、同じページの別の場所を表示する仕組み。 <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にて甲斐犬の写真をクリック...

今日、やったこと 箇条書き（おさらい＋練習問題） 今日のホワイトボード 箇条書きのおさらい＋練習問題 昨年末の「箇条書き」のおさらいを兼ねて練習問題をやりました。 練習１ ポイントは<h1>タグ、<ul>タグのデザイン設定。 <style>タグのなかで<h1>タグと<ul>タグのデザイン設定をしています。 正解例はこちら。 練習2 ポイントは箇条書きの中にさらに箇条書きがあるところ。 また、3つある<ul>タグのマーカー設定を別々にする(数字、白丸)ために、以下をしています。  <ul>タグにそれぞれクラス(ul_decimal、ul_circle)を設定 <style>タグで各クラス(ul_decimal、ul_circle)のlist-style-typeを設定 図　練習2　ヒント 正解例はこちら。 次回は 「リンク」をします。

今日、やったこと [練習問題]表 箇条書き 今日のホワイトボード [練習問題]表 正解例をあげておきます。 練習　その1 練習　その2 練習　その3 練習　その4 練習　その5 練習　その6 練習　その7 練習　その8 練習　その9 図　表の練習　その9 箇条書き 箇条書きは下表の<ul>タグと<li>タグを使います。 タグ 役割、意味 <ul>タグ 箇条書きの始まり、終わり <li>タグ 箇条書きの各項目 図　箇条書きの<ul>タグ、<li>タグ 箇条書きのマーカー <ul>タグに項目名”list-style-type”でマーカーの種類を指定できます。 デフォルトは●。 図　箇条書きのマーカーを変更 以下は箇条書きのマーカーは○に変更。 以下は２つの箇条書きのマーカーをそれぞれ変更。 次回は 年明けです。 箇条書きのおさらい＋練習問題からスタート予定。