情報スキル活用 第８週 制作技術－２ 画面の分割
先週の内容 ● 表示領域をもつタグ(body,hα,p,hr)のスタイルを設定 ● アニメーションについて ① margin（マージン） ：領域周辺の間隔設定 ② border（ボーダー） ：領域境界線のデザイン ③ padding(ﾊﾟﾃﾞｨﾝｸﾞ） ：領域内側の隙間設定 ● アニメーションについて ① 考え方と制作体験 ② 画像の透過
本日の内容 Webページの画面分割の考え方を解説 制作済み文書を使って画面分割のページ制作実習
画面分割とは 分割して表示しているＷｅｂページの多くは次のような構造をしています。 ＰＣのディスプレイ 画面上部で横幅いっぱいに、 このページのタイトル 画面の左側に 画面の中央に 画面の右側に このサイト内の他のページへのリンクボタン 外部ページへのリンクボタンなど各種説明 このページのコンテンツ
トップページの例 ： YAHOOの場合 ページタイトル 右側 左側 中央
トップページの例 ： YAHOOの場合 ページタイトル 中央 右側 左側
画面分割におけるHTML文書とスタイルシート 画面分割とは、いくつかのタグをまとめてグループ化します。 前のスライドで紹介した左側、中央、右側がそれぞれグループとしてまとめられたものです。 画面を分割するのはHTML文書内 複数のタグのまとめるには<div>・・・・・</div>を使います。 分割された画面のﾃﾞｨｽﾌﾟﾚｲ上の配置はｽﾀｲﾙｼｰﾄ内 <div>と</div>でまとめられたグループの配置位置を決めます。 class名の指定 HTML文書では、<div class="名前"> cssでは、div.名前
基礎技術で制作した index.html <!DOCTYPE html> <html> <head> <title>My Top Page</title> <link rel="stylesheet" href="index.css" type="text/css" media="screen" /> </head> <body> <h1>ようこそ私のページへ</h1> <p><a href="CU.html">中部大学紹介</a></p> <p><a href=" P.html">現代教育学部紹介</a></p> <p><a href="PJ.html">児童教育学科紹介</a></p> </body> </html>
基礎技術で制作した index.css body { background-color : #dfffff }
その画面
index.html に内容を追加 ← タイトルは自分で考えなさい。 追加部分の 見出しとコンテンツは 各自が考えなさい。 <!DOCTYPE html> <html> <head> <title>My Top Page</title> <link rel="stylesheet" href="index.css" type="text/css" media="screen" /> </head> <body> <!-- トップページのタイトル --> <h1>ようこそ私のページへ</h1> <hr /> <!– 他のページへのリンク --> <h4>大学・学部・学科</h4> <a href="CU.html">中部大学紹介</a><br /> <a href=" P.html">現代教育学部紹介</a><br /> <a href="PJ.html">児童教育学科紹介</a><br /><br /> <!– コンテンツを追加 --> <h2>私のおすすめニュース</h2> <h3>アメリカ大統領</h3> <p> ドナルド・トランプ氏が米大統領選で衝撃的な勝利をはたしてから3日。安倍晋三首相がトランプ氏と電話会談し、米ニューヨークで現地時間17日に会談することが決まった。「緊急会談」の目的は明らかにされていないうえ、政権移行の準備も本格化していない中での会談がはたして良いアイデアかどうかもわからない。ただ、ひとつだけハッキリしていることがある。今回の会談を通じて安倍首相が、米国でいったい何が起きているのか、そしてこれが日米関係にどう影響するのかを知りたがっているということだ。 </p> トランプ氏の勝利は、民主党、エリート層、さらには共和党員の多くが大敗を喫したというような単純な話ではない。それよりも衝撃的なのは、同氏の当選により、冷戦以降二大政党共通の外交政策の柱となってきた、介入による国際協調主義が明確に否定されたということだ。 </p> > </html> ← タイトルは自分で考えなさい。 追加部分の 見出しとコンテンツは 各自が考えなさい。
index.css はそのまま body { background-color : #dfffff }
その画面
トップページを画面分割 トップページの画面をつぎのように分割することにします。 上部にタイトル タイトルの下の左側２５％部分に他のページへのリンク その右側残りの部分にこのページのコンテンツ
トップページを画面分割 基礎技術で制作したトップページを２分割して表示することにします。 ＰＣのディスプレイ 画面上部で横幅いっぱいに、 このページのタイトル 画面の左側に 画面の中央に見出し このサイト内の他のページへのリンクボタン このページのコンテンツ
index.html に内容を追加 ← タイトルは自分で考えなさい。 追加部分の 見出しとコンテンツは 各自が考えなさい。 <!DOCTYPE html> <html> <head> <title>My Top Page</title> <link rel="stylesheet" href="index.css" type="text/css" media="screen" /> </head> <body> <!-- トップページのタイトル --> <h1>ようこそ私のページへ</h1> <hr /> <!– 他のページへのリンク --> <h4>大学・学部・学科</h4> <a href="CU.html">中部大学紹介</a><br /> <a href=" P.html">現代教育学部紹介</a><br /> <a href="PJ.html">児童教育学科紹介</a><br /><br /> <!– コンテンツを追加 --> <h2>私のおすすめニュース</h2> <h3>アメリカ大統領</h3> <p> ドナルド・トランプ氏が米大統領選で衝撃的な勝利をはたしてから3日。安倍晋三首相がトランプ氏と電話会談し、米ニューヨークで現地時間17日に会談することが決まった。「緊急会談」の目的は明らかにされていないうえ、政権移行の準備も本格化していない中での会談がはたして良いアイデアかどうかもわからない。ただ、ひとつだけハッキリしていることがある。今回の会談を通じて安倍首相が、米国でいったい何が起きているのか、そしてこれが日米関係にどう影響するのかを知りたがっているということだ。 </p> トランプ氏の勝利は、民主党、エリート層、さらには共和党員の多くが大敗を喫したというような単純な話ではない。それよりも衝撃的なのは、同氏の当選により、冷戦以降二大政党共通の外交政策の柱となってきた、介入による国際協調主義が明確に否定されたということだ。 </body> </html> ← タイトルは自分で考えなさい。 追加部分の 見出しとコンテンツは 各自が考えなさい。
２分割のためにグループ化 index.html <!DOCTYPE html> <html> <head> <title>My Top Page</title> <link rel="stylesheet" href="index.css" type="text/css" media="screen" /> </head> <body> <h1>ようこそ私のページへ</h1> <hr /> <div class="left"> <h4>大学・学部・学科</h4> <a href="CU.html">中部大学紹介</a><br /><br /> <a href=" P.html">現代教育学部紹介</a><br /><br /> <a href="PJ.html">児童教育学科紹介</a><br /><br /> 画面左側部分 </div> <div class="right"> <h2>私のおすすめニュース</h2> <h3>アメリカ大統領</h3> <p> ドナルド・トランプ氏が米大統領選で衝撃的な勝利をはたしてから3日。安倍晋三首相がトランプ氏と電話会談し、米ニューヨークで現地時間17日に会談することが決まった。「緊急会談」の目的は明らかにされていないうえ、政権移行の準備も本格化していない中での会談がはたして良いアイデアかどうかもわからない。ただ、ひとつだけハッキリしていることがある。今回の会談を通じて安倍首相が、米国でいったい何が起きているのか、そしてこれが日米関係にどう影響するのかを知りたがっているということだ。 </p> トランプ氏の勝利は、民主党、エリート層、さらには共和党員の多くが大敗を喫したというような単純な話ではない。それよりも衝撃的なのは、同氏の当選により、冷戦以降二大政党共通の外交政策の柱となってきた、介入による国際協調主義が明確に否定されたということだ。 画面右側部分 </div> </body> </html>
画面を２分割したときのｃｓｓ body { background-color: #cfffff; } h1 { text-align: center; background-color: yellow; } div.left { position: absolute, top: 80px; left: 1%; width: 24%; background-color: cyan;} h2 { text-align: center; background-color: yellowgreen; } div.right { position: absolute; left: 26%; background-color: white; }
その画面
div.left に対するプロパティとパラメータ div.left { position: absolute; ② ① top: 80px; ③ left: 1%; ④ width: 24%; ⑤ background-color: cyan;} ⑥ ① 名前leftで指定されたタグの集まり ② position ：別紙参照 ③ top ：bodyの先頭から80ﾋﾟｸｾﾙ ④ left ：bodyの横方向1%分のｻｲｽﾞ ⑤ width ：bodyの横方向24%分のｻｲｽﾞ ⑥ Background-color ：領域の背景の色は水色
div.right に対するプロパティとパラメータ div.right { position: absolute; ② ① top: 80px; ③ left: 26%; ④ background-color: white;} ⑤ ① 名前leftで指定されたタグの集まり ② position ：別紙参照 ③ top ：bodyの先頭から80ﾋﾟｸｾﾙ ④ left ：bodyの横方向26%分のｻｲｽﾞ ⑤ background-color ：領域の背景の色は白色