9.スタイルシートと JavaScript を 組 み 合 わせてみよう スタイルシートとは スタイルシートとは タグのみでは 実 現 不 可 能 なデザインレイアウトやページ 構 造 を 実 現 する 命 令 郡 です 主 に 次 の3つの 書 式 があります (1)インライン タグ 内 部 により 詳 細 なデザインを 組 み 込 む 書 式 です 例 : この 部 分 は<STRONG STYLE="background-color:#6699FF"> 背 景 色 </STRONG>が 表 示 されます <STRONG>タグに#6699ff という 背 景 色 を 設 定 しています (2)<STYLE> STYLE>タグ タグに 設 定 するスタイルを 一 括 して 宣 言 します 例 : <STYLE> body{background-color:black;} font{color:white;} タグと <FONT>タグにそれぞれスタイルを 設 定 しています この 宣 言 以 降 や<FONT>タグを 使 うと とくに 属 性 を 設 定 しなくともは Black に <FONT>は 白 に 表 示 されます (3) 外 部 ファイル 外 部 にスタイルを 指 定 したテキストファイルをつくり それを 読 み 込 むタイプです 外 部 ファイルを 使 うと 何 百 ページあってもデザインを 一 元 管 理 できるので デザインを 変 更 するときはその 外 部 ファイ ルを 書 き 換 えるだけですべてのページのデザインを 変 更 することが 可 能 です 例 : <LINK REL=STYLESHEET HREF="master.css"> このタグが 書 かれている HTML ファイルに master.css というテキストファイルに 記 述 されているスタイルが 反 映 されま す 同 じタグには スタイルを 使 っていると 同 じタグにいくつもの 書 式 (スタイル)を 設 定 したくなります その 際 には class というオプションを 活 用 します <STYLE>TD.a{font-size:16pt;font-family:MS 明 朝 ;} TD.b{font-size:14pt;;} <TD class=a> 神 奈 川 </TD><TD class=b> 横 浜 </TD> このような 記 述 ですと 神 奈 川 横 浜 それぞれ 違 うスタイルが 適 用 されることになります 1/12
問 題 1 背 景 色 という 文 字 列 の 背 景 をちょっと 青 っぽい 色 (#6699FF)で 表 示 するHMTLを 作 成 せよ <HTML><HEAD><TITLE>test11</TITLE> <BODY BGCOLOR="#FFFFFF"> この 部 分 は<STRONG STYLE="background-color:#6699FF"> 背 景 色 </STRONG>が 表 示 されます 問 題 2 24pt 太 字 という 文 字 列 が 24pt で 太 字 で 表 示 されるHTML 文 書 を 作 成 しなさい <HTML><HEAD><TITLE>test12</TITLE> <BODY BGCOLOR="#FFFFFF"> この 部 分 は<B STYLE="font-size:24pt">24pt 太 字 </B>で 表 示 されます 2/12
問 題 3 24pt という 文 字 列 を 24pt で 表 示 して 自 動 的 に 改 行 されるHTML 文 書 を 作 成 しなさい <HTML><HEAD><TITLE>test13</TITLE> <BODY BGCOLOR="#FFFFFF"> この 部 分 は<DIV STYLE="font-size:24pt">24pt</DIV>で 表 示 されます 問 題 4 24pt という 文 字 列 を 24pt で 表 示 して 改 行 されないHTML 文 書 を 作 成 しなさい <HTML><HEAD><TITLE>test14</TITLE> <BODY BGCOLOR="#FFFFFF"> この 部 分 は<SPAN STYLE="font-size:24pt">24pt</SPAN>で 表 示 されます 3/12
問 題 5 この 部 分 は 白 文 字 黒 背 景 で 表 示 されます という 文 字 列 の 背 景 が 黒 く 文 字 は 白 く 表 示 されるHTML 文 書 を 作 成 しなさい <HTML><HEAD><TITLE>test15</TITLE> <BODY STYLE="background-color:rgb(155,200,155)"> <CENTER> <P STYLE="background-color:#000000"> <SPAN STYLE="color:white">この 部 分 は 白 文 字 黒 背 景 で 表 示 されます</SPAN> </CENTER> 参 考 タグ 型 の 表 記 方 法 <HTML><HEAD><TITLE>sample</TITLE> <STYLE> タ グ 名 { 属 性 : 値 ; } < タ グ 名 > </ タ グ 名 > STYLE に 対 応 していないブラウザ 用 としてコメントアウトする <STYLE>タグで 定 義 したタグが 本 文 で 適 用 される 4/12
問 題 6 スタイルシートの 内 容 を<STYLE>タグで 一 括 宣 言 するようなHTMLを 作 成 せよ 表 示 内 容 は 背 景 が 黒 文 字 列 が 白 である <HTML><HEAD> <TITLE>test16</TITLE> <STYLE> body{background-color:black;} font{color:white;} <CENTER> <FONT>この 部 分 にはセレクタの 内 容 が 適 用 されます</FONT> </CENTER> 5/12
問 題 7 スタイルしシートを 一 括 宣 言 し 文 字 列 を 白 MS 明 朝 16PT で 表 示 するHTML 文 書 を 作 成 しなさい <HTML><HEAD><TITLE>test17</TITLE> <STYLE> body{background-color:black;} font{color:white;font-size:16pt; font-family:ms 明 朝 ;} <CENTER> <FONT>この 部 分 にはセレクタの 内 容 が 適 用 されます</FONT> </CENTER> 6/12
問 題 8 文 書 のマージンをそれぞれ 上 :48pt 右 :48pt 左 :8pt 下 :8pt で 表 示 するようなHTMLを 作 成 せよ <HTML><HEAD> <TITLE>test18</TITLE> <STYLE> body{ background-color:gray; margin-top:48pt; margin-right:48pt; margin-left:8pt; margin-bottom:24pt;} font{color:black;font-size:9pt;font-style:italic;font-family:ms P 明 朝 ;} <FONT>この 部 分 にはマージンの 内 容 が 適 用 されます どれくらい 適 用 されてるのかな どうなんだろうね 秀 吉 こ の 部 分 にはマージンの 内 容 が 適 用 されます どれくらい 適 用 されてるのかな どうなんだろうね 秀 吉 </FONT> 7/12
参 考 スタイルシートでは 外 部 ファイルを 読 み 込 んで 統 一 したレイアウトをサイト 単 位 で 行 うとう 効 率 的 である <HTML><HEAD><TITLE>test19</TITLE> <LINK REL=STYLESHEET HREF="master.css"> <STYLE TYPE="text/css"> // master.css はこのように 表 記 されています // body{background-color:gray;} // font{font-family:"times New Roman";} //.htaccess に TYPE="text/css"と mime タイプを 追 加 します // ここからはこのファイルだけのスタイルです H1{color:red;} <H1> 外 部 ファイルの 例 </H1> 8/12
問 題 9 IDオプションを 使 って 背 景 変 更 ボタンを 押 すと 文 字 列 の 背 景 が 赤 になり 元 に 戻 す ボタンを 押 すと 元 に 戻 る HTMLを 作 成 せよ <HTML><HEAD><TITLE>test21</TITLE> <STYLE TYPE="text/css"> #text1{font-size:16pt;font-family:ms 明 朝 ;} <SCRIPT LANGUAGE="JavaScript"> function henkou(){ text1.style.background="red"; } function modosu(){ text1.style.background="white"; } </SCRIPT> <SPAN ID='text1'>IDの 例 CLASS オプションはきかないよ (^^;</SPAN> <FORM> <INPUT TYPE="BUTTON" VALUE=" 背 景 変 更 " onclick='henkou()'> <INPUT TYPE="BUTTON" VALUE=" 元 にもどす" onclick='modosu()'> </FORM> 9/12
問 題 10 IDオプションを 使 って 消 去! ボタンを 押 すと 文 字 列 が 消 え 出 現 ボタンを 押 すと 元 に 戻 る HTMLを 作 成 せよ <HTML><HEAD><TITLE>test22</TITLE> <STYLE TYPE="text/css"> #text1{font-size:16pt;font-family:ms 明 朝 ;} <SCRIPT LANGUAGE="JavaScript"> function henkou(){ text1.style.visibility="hidden"; } function modosu(){ text1.style.visibility="visible"; } </SCRIPT> <SPAN ID='text1'> 消 えます 消 えます </SPAN> <FORM> <INPUT TYPE="BUTTON" VALUE=" 消 去!" onclick='henkou()'> <INPUT TYPE="BUTTON" VALUE=" 出 現 " onclick='modosu()'> </FORM> 10/12
問 題 11 IDオプションを 使 って 消 去! ボタンを 押 すと 文 字 列 が 消 え 出 現 ボタンを 押 すと 元 に 戻 る HTMLを 作 成 せよ ただし function は1 度 しか 使 ってはいけない <HTML><HEAD><TITLE>test23</TITLE> <STYLE TYPE="text/css"> #text1{font-size:16pt;font-family:ms 明 朝 ;} <SCRIPT LANGUAGE="JavaScript"> function henkou(c){ text1.style.visibility=c; } </SCRIPT> <P ID='text1'> 消 えます 消 えます </SPAN> <FORM> <INPUT TYPE="BUTTON" VALUE=" 消 去!" onclick='henkou("hidden")'> <INPUT TYPE="BUTTON" VALUE=" 出 現 " onclick='henkou("visible")'> </FORM> 11/12
問 題 12 小 説 コーナー という 文 字 列 をクリックすると リンクが 表 示 され それらを 押 すとジャンプする またその 表 示 さ れる 文 字 列 の 中 には 消 すときはここをクリック という 文 字 列 も 表 示 され それを 押 すとそのリンク( 文 字 列 )は 消 える そんなHTML 文 書 を 作 成 しなさい <HTML><HEAD><TITLE>test24</TITLE> <STYLE TYPE="text/css"> #text1{font-size:14pt;visibility:hidden;font-weight:bold;} <SCRIPT LANGUAGE="JavaScript"> function henkou(c){ text1.style.visibility=c; } </SCRIPT> <SPAN onclick='henkou("visible")'> 小 説 コーナー( 作 品 を 選 んでね)</SPAN> <SPAN ID='text1'> <A HREF="./rashou.html"> 羅 生 門 </A> <A HREF="./yume.html"> 夢 </A> <A HREF="./ikiru.html"> 生 きる</A><BR> <SPAN onclick='henkou("hidden")'> 消 すときはここをクリック</SPAN> </SPAN> 12/12