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

今日、やったこと レイアウト作成 今日のホワイトボード 全体のレイアウト作成 下図のような3カラムのレイアウトをつくりました。 図　3カラムレイアウト ポイントはサイドナビとコンテンツを横並びにする点です。 index.html style.css ヘッダー部を作る(途中まで） ヘッダー部に 写真 タイトル メニュー を作成しました。 図　ヘッダー部 index.html style.css style.cssのセレクタ xxxクラス内のxxxタグのような指定もできます。 図　headerクラス内の<ul>タグの場合 次回は ヘッダ部の改造(タイトルとメニューを1行に) サイドナビ部作成 評価用課題について 次回以降から評価用の課題を作成してもらいます。 ネタはなんでもOKです。写真や文章を考えてください。  

今日、やったこと 横並びリスト ページレイアウト 今日のホワイトボード 横並びリスト HTMLはなにも指定しなければ縦に並ぶ。 横並びにしたい要素の親要素に　display:flex;　を指定すると、子要素は横並びになる。 図　display : flex; で横並び <ul>タグと<li>タグの場合、<li>タグを囲む<ul>タグが<li>タグの親要素。 index.html style.css 横並びになったリンクからマーカーをなくし、余白と背景色を指定するとボタンのようになる。 余白は以下のとおり。 図　余白と背景色 レイアウト よくあるWebページの3カラム(3列)のレイアウト。 サイドナビ部(左)、コンテンツ部、サイドナビ部(右)を横並びにするため、これらの親要素の<div>タグ(mainクラス)に　display:flex;　を指定。 図　3カラムレイアウト index.html style.css 次回は ヘッダ部をつくります。

今日、やったこと リンク(<a>タグ) 今日のホワイトボード リンク リンクはクリックすると別ページが表示されたり、同じページの別の場所が表示される仕組み。 <a>タグのhref属性に移動先を指定する。 別ページを表示するリンク 下図のような２つのページ間を行き来できるリンクを作成。 図　2ページ間を行き来する page1.html "2ページ目へ"に<a>タグを追加。クリックするとpage2.htmlを表示するため、href属性にpage2.htmlを指定。 page2.html "もどる"に<a>タグを追加。クリックするとpage1.htmlを表示するため、href属性にpage1.htmlを指定。 同じページ内にジャンプ 最近のWebページはスマホで見ることを前提としているので、タテに長い。 見たい内容にすぐ移動できるようにページトップに各項目へのリンクが用意されているケースが多い。 page3.html 移動先にidをつける。 <a>タグのhref属性は移動先のIDを指定。IDなので、#ID名になる。 図　同じページ内の別の場所へジャンプ 練習問題 ヒントです。 図　ヒント トップページ(index.htmlと秋田犬のページ(akita.html)だけ正解例をあげておきます。 index.html akita.html ...

今日、やったこと 表をつくる 今日のホワイトボード 表の行と列 行は横方向、列は縦方向。 図　表の行と列 表を作る <table>タグで表が始まり、</table>で表が終わる。 <tr>タグで行が始まり、</tr>で行が終わる。=> <tr>タグで行を作る <td>タグでセルが始まり、</td>でセルが終わる。=> <td>タグでセルを作る 図　<table>タグ、<tr>タグ、<td>タグ セルを結合する colspan=”セル数" で（セル数-1)個の右隣のセルを結合する。  rowspan=”セル数" で（セル数-1)個の下のセルを結合する。  〇結合前 図　結合前 〇colspanで右隣のセルを結合 結合すると、表からはみ出すセルがあるので注意！！ ※結合すると言うより、セルを追加して結合するイメージが正解。 図　colspanで右隣のセルを結合 〇rowspanで下側のセルを結合 colspanと同じように、結合すると表からはみ出すセルがあるので注意！！ 図　rowspanで下側のセルを結合 練習問題 正解例をあげておきます。 練習1 練習2 練習3 練習4 練習5 練習6 練習7 練習8 練習...

今日、やったこと 箇条書き 今日のホワイトボード 箇条書きその１ 箇条書きは以下の <ul>タグ と <li>タグ でできる。 <ul>タグで箇条書きの範囲を指定 <li>タグで箇条書きの各項目を指定   図　<ul>タグ、<li>タグで箇条書き マーカーを変更する 箇条書きのマーカーは <ul>タグ のstyle属性で項目名 list-style-type で変更できる。 サンプルソースは以下のとおり。 style属性ではなく、<style>タグでも同じように設定できる。 下図のように<ul>にクラスを指定して、<style>タグにて各クラスのlist-style-typeで設定できる。 図　<style>タグにて設定 練習問題１ 下図がヒント。 図　箇条書き　練習問題１ 正解例は以下のとおり。 練習問題2 犬種の箇条書き(1.シベリアンハスキー、2.アラスカンマラミュート)の中に、各犬の特徴の箇条書きがある。 図　箇条書き　練習問題２ 正解例は以下のとおり。 次回は 表をつくります。

今日、やったこと [練習問題]ふぐ 今日のホワイトボード [練習問題]ふぐ 演習２のヒント 演習1では<h2>タグの背景色を設定。=><h2>タグの背景色はみんな同じ色になる。 演習2では<h2>タグの背景色を食用フグと毒フグで変えたい。=>クラスを使う。 演習5のヒント 幅の指定は項目名widthを使う。 図　演習2、演習5のヒント 正解例をあげておきます。 演習1 style.css 演習2 style.css 演習3 style.css 演習4 style.css 演習5 style.css 演習6 style.css 演習7 style.css 次回は 新ネタにいきます。