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

課題「ペンギン」のヒント 演習３ 演習２で各<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">    ...