情報処理ⅡA：井川
Web ページ作成（応用編）!!
1 年生のときに学習したかもしれないスタイルシートとⅡA で学習する内容の予告編
☆スタイルシートとは？☆
Web ページを作成すると，だんだんページ数が増えてきます．そうなると更新作業（そ
のページの内容や構成，管理者名などの変更）が複雑になります．そのさいにデザイン的
な情報を一元管理しておくと更新するのは内容のみですみ，便利です．このような場合ス
タイルシート（正確には，カスケーディング・スタイルシート：Cascading Style Sheets,
CSS：といい HTML4.0 から導入されています）を利用して効率的に管理する方法があり
ます．その方法には
１ HTML 文書に直接書き込む
２ ヘッダ部分に記述する
３ 別に記述したファイルを作っておき，それをヘッダ部分で読み込む
の 3 つがあります．Web ページ作成支援ソフトで作った文書のソースを見ると，１，２の
記述を多く見かけます．Web ページの構造（内容）と見た目（デザイン）を分離して管理
するには３番がもっとも妥当であると考えられます．
３番の方法で実際には，“∼.css”という名前（拡張子に css を書く）のファイルにさま
ざまな書式，スタイル設定を記述しておき,各 Web ページ（ファイル∼.html）のヘッドの
部分に指定して，それらを読み込み反映させます．スタイルシートとは背景の色，背景の
画像，文字の大きさ，色・・・・などの書式設定を一括して管理できる技術です．
（注意！）Web ページ（∼.html）に設定する前に先立ってスタイルシート（∼.css）を
リンクする場所に正しく作成する必要があります．失敗すると Web ページが存在するのに
ブラウザで見ることができなってしまいます．
スタイルシートの書式・文法
【書式】
エレメント{属性：設定値；}
(1) エレメントに対し，書式などの属性（背景色，文字の色などの書式）を設定します．
(2) 文末には必ず；（セミコロン）をつけます．
(3) ；（セミコロン）で区切られた場合，１つのエレメントに複数の属性を設定できます．
（例１）背景色を設定する
background-color 属性
BODY{background-color:#ffffcc;}
６−4
情報処理ⅡA：井川
Web ページ作成（応用編）!!
＜BODY＞エレメント自体に背景色（background-color）を薄い黄色（#ffffcc）に
設定する．となります．方法 3 の場合，この設定をたとえば style.css ファイルにあら
かじめ記述します．そして HTML ファイルに LINK エレメント（後述）でこの style.css
を指定すると，＜BODY＞エレメントで，BGCOLOR 属性を指定しなくても，背景は
すべて style.css で指定した色になります．
（例２）背景画像を設定する
background-image 属性
BODY{background-image:url(sozai/back1.gif);}
＜BODY＞エレメントに sozai ディレクトリの中にある back.gif という名前の画像
ファイルを背景画像（background-image）として設定する．となります．url( この
なかに )で画像ファイル名を指定します．この設定をたとえば style.css ファイルに
あらかじめ記述します．
また例１，例２をあわせて同じエレメントに複数属性値を設定することもできます．
つまり各属性値を；（セミコロン）で区切って記述します．
BODY{background-image:url(sozai/back1.gif); background-color:#FFFFFF;}
以後，HTML ファイルに LINK エレメントで style.css を指定すると，＜BODY＞エ
レメントで，BACKGROUND 属性等を指定しなくても，背景はすべてその色になり
ます．
（例３）ハイパーリンクなどの色を変える．
教科書にあるように，これは“擬似クラス”で，必ずしも有効にならない場合があ
ります．ハイパーリンクの色を変えるには，＜A＞エレメントにスタイルを指定しま
す．＜A＞エレメントに対する設定書式，すなわち擬似クラスの書式は前の例と少し
異なります．
A:link{color:#FF00CC;}
A:visited{color:#FF00FF;}
A:active{color:#FF00FF;}
A:hover{color:#00FF00;}
ここで，マウスを重ねたときの色の設定（hover）は我々の環境でなく，IE を用いる
と有効です．<A>エレメントでは，通常の色（link），訪問済みの色（visited），フレ
ーム（後述）などを使いアクティブになっているときの色（active），などの設定が可
能です．前述と同様に，複数設定が可能です．たとえばマウスを重ねたときアンダー
ラインを表示するには，以下のように書きます（ただし，ブラウザによっては確かめ
６−5
情報処理ⅡA：井川
Web ページ作成（応用編）!!
られないものもある）．
A:hover{text-decoration:underline;}
☆（方法２）☆
html 文書のヘッダ部分に記入します．<HEAD>∼</HEAD>のなかに，<STYLE>エレ
メントを用いて指定します．
<HEAD>
<style type=”text/css”>
<!?
BODY { background-color:#FFFFFF;}
h1 {color: red;}
A:link{color:#FF00CC;}
A:visited{color:#FF00FF;}
A:active{color:#FF00FF;}
A:hover{color:#00FF00;}
-->
</style>
</HEAD>
<BODY>
------------</BODY>
◆スタイルシートに対応していない Web ブラウザが<style>∼</style>を
表示しないようにするために，コメント＜！― ―・・・― ―＞で囲みます．
☆（方法３）☆
HTML 文書でスタイルシートを指定する方法
エディタで html ファイルを開きます．＜HEAD＞ではじまり＜／HEAD＞で終わる部分
の＜／TITLE＞エレメントの次に，＜LINK＞エレメントを入力して指定します．
スタイルシートのファイル名が style.css の場合，以下のように記述します．
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="style.css">
＜LINK＞ そのページ全体の情報をあらわします．
REL="STYLESHEET" そのページから見たリンク先ファイルとの関係をあらわします．
リンク先のファイルはスタイルシートである，という意味になり
ます．
TYPE="TEXT/CSS" スタイルシートのファイルがテキストファイルであることを意味し
ます．
HREF="style.css" リンクするスタイルシートのアドレス（ファイル名）を指定します．
６−6
情報処理ⅡA：井川
Web ページ作成（応用編）!!
この場合は相対パスになっています．
この＜LINK＞が＜HEAD＞ではじまり＜／HEAD＞で終わる部分内にあると，そのスタ
イルシートを読み込み,そのスタイルシートを Web ページに反映させます．もしそのファ
イルがないと，Web ページは表示されません！
次の内容は sample.css 記述例である．
ここから＞＞
BODY { background-color: yellow; }
P { line-height: 180% }
H1 { font-size:3.0em; text-align: center }
H2 {
margin-top: 2em;
padding: 0.5em;
border-width: 0.4em 0em 0em 1.8em;
border-style: double none none solid;
border-color: green;
}
H1,H2,H3,H4,H5,H6 { color: green }
H1 EM { color: red }
PRE.sample { background: #DDD }
#samp { color: green }
＜＜ここまで
このスタイルシートを Web ページで使用する場合は，html 文書の<HEAD>∼</HEAD>のな
かで，リンクエレメントを用いて以下のように指定する。ただし，スタイルファイルと
Web 文書が同じディレクトリにある場合の指定である。
すなわち，HTML 文書側の HEAD 内で，LINK エレメントを以下のように指定する．
<head>
<title>小課題５</title>
<link rel="stylesheet"
</head>
href="./sample.css"
６−7
type="text/css" >
© Copyright 2024 Paperzz
