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

今日、やったこと 横並びリスト Webページのヘッダ部をつくる 今日のホワイトボード 横並びリスト 箇条書き＋リンクを前回使った display:flex; で横並びにする。 〇第1段階 箇条書きの項目(<li>タグ)を横並びにする。 図　箇条書きを横並びに index.html style.css <li>タグの親要素の<ul>タグにdisplay:flex;を指定して、横並びにする。 〇第2段階 <li>タグに余白を設定して、クリックしやすいように。 図　<li>タグに余白設定 index.html 変更なし。 style.css <li>タグに 枠線内余白（左右） 枠線外余白（上下左右） マーカーなし を設定。 〇第3段階 <li>タグを中央寄せ。 図　<li>タグを中央寄せ index.html 変更なし。 style.css 中央寄せは、親要素（<ul>タグ）に justify: center; を指定。 Webページのヘッダ部をつくる PC版ページにありがちなヘッダ部を作成。 背景画像と横並びメニューをつくる。 今日は、 ヘッダ部に写真を追加 写真をヘッダ部の横幅一杯で表示 ヘッダ部にタイトル追加 ヘッダ部に箇条書きのリストを追加 までをおこなった。 図　作成中のヘッダ部 index.html ...

今日、やったこと [練習問題(余白・枠線)]マンボウ  [練習問題(余白・枠線)]フグ 横並び 今日のホワイトボード [練習問題(余白・枠線)]マンボウ  正解例をあげておきます。 編集したのはstyle.cssのみ。 [練習問題(余白・枠線)]フグ 正解例をあげておきます。 編集したのはstyle.cssのみ。 演習１ 演習２ 演習３ 演習４ 演習５ 演習６ 演習７ 横並び HTMLは記述順に縦に並ぶ。 図　横並び設定前 横に並べるには、 横に並べる要素の親要素に　 display: flex 　を指定する 。 index.html itemクラスの要素を横並びにするには、itemクラスの親要素(id=container)に　 display:flex 　を指定する。 図　横並びにするには style.css 図　横並び設定後 [練習問題]横並び 正解例をあげておきます。 図　ヒント 編集するのはstyle.cssのみ。 次回は 横並びのつづき。

今日、やったこと 幅、高さの指定 枠線 余白 今日のホワイトボード  幅、高さの指定 ほとんどのタグは幅、高さの指定ができる。 幅はwidth、高さはheight。 表示すると以下のとおり。 図　高さ、幅を指定 枠線 枠線は 　 border: 線種　線幅　線色; で指定。 下だけ、上だけ、左だけ、右だけの枠線指定もできる。 枠線設定箇所 項目名 設定例 上だけ border -top border-top : solid 2px #f00000; 下だけ border -bottom border-bottom : solid 2px #f00000; 左だけ border -left border-left : solid 2px #f00000; 右だけ border -right border-right : solid 2px #f00000; 表示すると以下のとおり。 図　枠線を指定 余白 余白は 枠線内の余白（項目名はpadding） 枠線外の余白（項目名はmargin） の2種類がある。 図　余白（padding、margin) また、padding、marginともに4種類の設定方法がある。 〇上下左右おなじ余白 枠線内？外？ 設定 設定例 枠線内 padding: 上下左右の余白サイズ; padding: 5px; 枠線外 margin:上下左右の余白サイズ; margin...

今日、やったこと 表(テーブル) 今日のホワイトボード 表の行と列 表を構成する行と列は 行は横方向 列は縦方向 です。  図　表の行と列 表を作る 以下をタグを使う。 タグ 説明 <table>タグ 表の始まり、終わりを表す。 <table>タグで表が始まり、</table>タグで表が終わる。 border属性は表の罫線の幅 <tr>タグ 行の始まり、終わりを表す。 <tr>タグで行が始まり、</tr>タグで行が終わる。 <td>タグ セルの始まり、終わりを表す。 <td>タグでセルが始まり、</td>タグでセルが終わる。 図　表を作る 下図の表を作った。 図　表のサンプル1 表1.html 表のサンプル2 下図の表を作った。 図　表のサンプル2 この表の1行目はタイトル行。 タイトル行のセルには、<td>タグではなく、<th>タグを使う。 セル 説明 ...