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