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

今日、やったこと 箇条書きの演習問題 今日の演習問題 練習１ とくにややこしいことはないと思います。 正解例をあげておきます。 練習２ 「1.シベリアンハスキー」、「2.アラスカンマラミュート」も箇条書きです。 HTMLは下図のような構成になります。 図　練習２のヒント 正解例をあげておきます。  

今日、やったこと 表の練習問題 箇条書き 今日のホワイトボード 表の練習問題 正解例をあげておきます。 練習１ 練習２ 練習３ 練習４ 練習５ 練習６ 練習７ 練習８ おまけ　練習９ 図　表の練習　おまけ　練習９ 箇条書き <li>タグ は箇条書きの各項目。 <ul>タグ で<li>タグを挟む。 図　箇条書き マーカーは list-style-type で設定可能。 練習 下図をつくりました。 図　箇条書きの練習  

今日、やったこと 表をつくる 今日のホワイトボード 表の行と列 行、列は下図のとおりです。 図　表の行と列 表のタグ 以下のタグを使って表をつくります。 <table>タグ 表の始まり、終わりを表します。 border属性で枠線の幅を指定します。 <tr>タグ 行の始まり、終わりを表します。 <table></table>内で1行目から順に行を作成します。 <td>タグ セルの始まり、終わりを表します。 <tr></tr>内で左から順にセルを作成します。 図　<table>タグ、<tr>タグ、<td>タグ <td>タグ内にタグも可 セル内に画像を表示したい場合、下図のように<td></td>内に<img>タグで画像を表示します。 図　<td>タグ内に<img>タグ <th>タグ <td>タグと同じセルのタグですが、見出し用のセルです。 タグ 文字種 横位置 <td> 普通 左寄せ <th> 太字 中央寄せ セルを連結する ...

課題「ペンギン」のヒント 演習３ 演習２で各<p>タグの背景色が別々だったので、<p>タグにidを設定し、背景色を指定しました。 演習３では、上と下が同じ色なので、 背景色を#4682b4にするクラスを作成。(style.css) 上と下の<p>タグに背景色を#4682b4にするクラスを指定する。 真ん中の<p>タグは背景色を変更するだけ。 演習４ 幅の設定項目名は　 width 　です。 回り込みは　 float : left; 　を指定します。 演習５ 左側にマージン指定するには設定項目名　 margin-left 　です。 演習６ 右側のマージン指定は設定項目名　 margin-right 　です。 演習７ 枠線の設定項目名　 border 　です。 枠線の内側の余白の設定項目名　 padding 　です。 演習８ 枠線の外側の設定項目名は　 margin 　です。 課題「ペンギン」解答例 解答例をあげておきます。  演習１ index.html 変更なし。 style.css 演習２ index.html 3つの<p>タグにidを設定。 style.css 演習３ index.html 3つの<p>タグのうち、上と下のpタグにはクラスを設定。 style.css 演習４ index.html 変更なし。 style.css 演習５ index.html 変更なし。 style.css 演習６ index.html 変更なし。 style.css 演習７ index.html 変更なし。 style.css 演習８ index.html 変更なし。 style.css 課題「フグ」解答例 解答例をあげておきます。  演習１ style.css 演習２ style.css 演習３ style.css 演習４ style.css 演習５ style.css 演習６ style.css ...

今日、やったこと 幅、高さの設定 枠線 余白 ペンギンの演習課題 今日のホワイトボード 各タグが表示されるとき ほとんどのタグはHTMLファイルに書かれた順に、上から下へ並んで表示されます。 そして、各タグは幅や高さ、余白や枠線の設定ができます。 図　タグは縦に順番に並ぶ 幅、高さの設定 幅の設定項目名はwidth。 高さの設定項目名はheight。 枠線 枠線の種類（線種）、幅、色をスペース区切りで指定します。 また、上だけ下だけのように上下左右それぞれ1か所だけ枠線を指定することもできます。 図　枠線の指定 余白 枠線の内側（paddinig)と外側（margin）の2種類の余白があります。 図　余白の指定 演習課題 ペンギンの演習課題のうち、演習１，演習２をやりました。 演習１ <p>タグの余白、背景色の設定です。 style.cssだけ編集します。 演習２ ３つの<p>タグそれぞれ別々の背景色を指定します。 図　演習２のヒント 別々に指定するために、<p>タグのidを指定します。 　<p id=" ID名 " > つぎに、各IDの背景色を指定します。 　 # ID名 { 　　background : 背景色;   } 次回は ペンギンの課題のつづきをやります。 

今日、やったこと デザインをHTMLファイルとは別のファイルで定義する 今日のホワイトボード いままでは フォントの色やサイズなどのデザイン定義は HTMLファイルの<STYLE></STYLE>内で行ってました 。 図　デザイン定義（いままでとこれから） サンプル　アカウミガメ.html HTMLファイルとは別のファイルでデザイン定義する ①style.cssでデザイン定義 HTMLファイル内の<STYLE></STYLE>内の デザイン定義をstyle.cssファイルで指定します 。 デザイン定義ファイル　style.css ②HTMLファイルはstyle.cssを読み込む <link>タグを使って、デザイン定義ファイルstyle.cssを読み込みます 。 <link>タグの href="" で読み込むデザイン定義ファイルを指定します。 HTMLファイルからstyle.cssを読み込む 複数のHTMLファイルから同じスタイル定義ファイルを読み込むことで、デザインの共通化をすることができます。 また、読み込むデザイン定義ファイルを変更することで、デザインを一気に変更することができます。 図　HTMLファイルとデザイン定義ファイル 練習７ 4ページ名以降から 対象が「 xxxブロック内の〇〇タグ 」のように指定されています。 xxxブロックは<div>タグで作られたブロックで、idがxxxに設定されています。 　 <div id="xxx"> 　 </div> この<div></div>内の〇〇タグが対象です。 　<div id="xxx">    ...