情報学部 菅沼ホーム HTML 目次 索引

スタイルシート

  1. 記述方法

    2. 　　表示方法を細かく設定するにはいくつかの方法が存在します．その一つは，各要素の STYLE 属性を使用する方法です．例えば，文字の一部の背景色をピンクにするには，
    文字の背景を<SPAN STYLE="background-color: pink;">ピンク</SPAN>にする
    のように記述すれば，「ピンク」の部分が，以下に示すようにピンクになります．
    文字の背景をピンクにする
    　　しかし，この方法ですと必要な箇所すべてに対して同じ記述してやる必要があります．二番目は，STYLE 要素を使用する方法です．STYLE 要素に
    <STYLE TYPE="text/css">
	SPAN.col { color: pink }
</STYLE>
    という記述をしておき，
    文字の背景を<SPAN CLASS="col">ピンク</SPAN>にする
    のようにして，その記述を参照すれば上と同じ結果が得られます．

    　　しかし，この方法でも，複数のファイルに亘る性質を記述できません．三番目は，適当なファイル（スタイルシート，例えば，master.css とする）に STYLE 属性内の内容を記述しておき，各 HTML ファイルから LINK 要素によって，そのファイルを以下に示すようにして参照する方法です．
    <LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
    　　例えば，スタイルシート（ CSS： Cascading Style Sheets ）は， 
    @charset "utf-8";   /* 文字コード */
/*************/
/* body 要素 */
/*************/
body.div {
	margin: 0;
	padding: 0;
	font-size: 100%;   /* 文字のサイズ */
	text-align: center;   /* 文字の配置（中央）*/
	background-image: url(../image/ajisai.gif);   /* 背景画像 */
}
/**********/
/* a 要素 */
/**********/
a:link {   /* 未訪問リンク */
	color: #663333;
}
a:visited {   /* 既訪問リンク */
	color: #663300;
}
a:hover {   /* ポインティングデバイスで指されている */
	color: #663333;
	text-decoration: none;   /* 通常（他に，下線，上線，取消線） */
}
/***********/
/* wrapper */
/***********/
#wrapper {
	width: 600px;   /* 表示領域の幅 */
	overflow: hidden;   /* 表示できなかった場合の処理 */
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	background-color: white;   /* 背景色 */
	border-style: solid;   /* 境界線の形状 */
	border-width: 2px;   /* 境界線の幅 */
	border-color: red;   /* 境界線の色 */
}

/**********/
/* header */
/**********/
#header {
	width: 500px;   /* 表示領域の幅 */
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	border-style: solid;   /* 境界線の形状 */
	border-width: 2px;   /* 境界線の幅 */
	border-color: blue;   /* 境界線の色 */
}
    のような内容のファイルになりますが，以下に示す例においては，文字の色を赤にし，かつ，フォントサイズを 30 ポイントにしたい場合について説明していきます．また，使用例においては，本来スタイルシートに記述すべきですが，見やすさのため，HEAD 要素内に STYLE 要素を使用して記述しています．なお，スタイルシート内において，「 /* 」と「 */ 」で囲まれた部分は，コメント（注釈）とみなされます．

    1. * { color: red; font-size: 30pt }　　すべての要素に対して適用される（使用例） 
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		* { color: red; font-size: 30pt }
	</STYLE>
</HEAD>
<BODY>
	文字の色を<SPAN>赤</SPAN>にする<BR>
	<BR>
	<DIV>
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
	</DIV>
</BODY>
</HTML>
    2. 要素名 { color: red; font-size: 30pt }　　指定された要素に対して適用される（使用例：DIV 要素を対象） 
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		DIV { color: red; font-size: 30pt }
	</STYLE>
</HEAD>
<BODY>
	文字の色を<SPAN>赤</SPAN>にする<BR>
	<BR>
	<DIV>
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
	</DIV>
</BODY>
</HTML>
    3. .aka { color: red; font-size: 30pt }　　CLASS 属性が aka であるすべての要素に対して適用される（使用例） 
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		.aka { color: red; font-size: 30pt }
	</STYLE>
</HEAD>
<BODY>
	文字の色を<SPAN CLASS="aka">赤</SPAN>にする<BR>
	<BR>
	<DIV CLASS="aka">
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
	</DIV>
</BODY>
</HTML>
    4. #aka { color: red; font-size: 30pt }　　ID 属性が aka であるすべての要素に対して適用される（使用例）．スタイルシートのレベルでは，上の例と同じ結果が得られますが，本来，ID 属性は指定された箇所を一意に識別するための一意識別子です．従って，この例のように，同じファイル内の複数の箇所に同じ名前の ID 属性を使用するべきではありません． 
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		#aka { color: red; font-size: 30pt }
	</STYLE>
</HEAD>
<BODY>
	文字の色を<SPAN ID="aka">赤</SPAN>にする<BR>
	<BR>
	<DIV ID="aka">
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
	</DIV>
</BODY>
</HTML>
    5. 要素名.aka { color: red; font-size: 30pt }　　CLASS 属性が aka である指定された要素に対して適用される（使用例：SPAN 要素） 
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		SPAN.aka { color: red; font-size: 30pt }
	</STYLE>
</HEAD>
<BODY>
	文字の色を<SPAN CLASS="aka">赤</SPAN>にする<BR>
	<BR>
	<DIV CLASS="aka">
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN CLASS="aka">赤</SPAN>にする<BR>
	</DIV>
</BODY>
</HTML>
    6. 要素名#aka { color: red; font-size: 30pt }　　ID 属性が aka である指定された要素に対して適用される（使用例：DIV 要素）．先に述べた理由により，この例のように，同じファイル内の複数の箇所に同じ名前の ID 属性を使用するべきではありません． 
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		DIV#aka { color: red; font-size: 30pt }
	</STYLE>
</HEAD>
<BODY>
	文字の色を<SPAN ID="aka">赤</SPAN>にする<BR>
	<BR>
	<DIV ID="aka">
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
	</DIV>
</BODY>
</HTML>
    7. .aka 要素名, ･･･ { color: red; font-size: 30pt }　　CLASS 属性が aka である要素内にある指定された要素に対して適用される．ピリオドの前に要素名を記述すると，その要素内にある指定された要素に対して適用される．（使用例：DIV 要素内の SPAN 要素） 
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		.aka SPAN { color: red; font-size: 30pt }
	</STYLE>
</head>
<BODY>
	<DIV CLASS="red">
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<EM>赤</EM>にする
	</DIV>
	<BR>
	<DIV CLASS="aka">
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<EM>赤</EM>にする
	</DIV>
</BODY>
</HTML>
    8. #aka 要素名, ･･･ { color: red; font-size: 30pt }　　ID 属性が aka である要素内にある指定された要素に対して適用される．# の前に要素名を記述すると，その要素内にある指定された要素に対して適用される．（使用例：DIV 要素内の SPAN 要素） 
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		#aka SPAN { color: red; font-size: 30pt }
	</STYLE>
</HEAD>
<BODY>
	<DIV>
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<EM>赤</EM>にする
	</DIV>
	<BR>
	<DIV ID="aka">
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<SPAN>赤</SPAN>にする<BR>
		文字の色を<EM>赤</EM>にする
	</DIV>
</BODY>
</HTML>
    9. 疑似クラスの使用　　以下の例に示すように，コロン「 : 」で始まる疑似クラスを使用して指定することも可能である（使用例）．

      • 要素名:link { color: #ff0000 } /* 未訪問リンクの文字色 */
      • 要素名:visited { color: #00ff00 } /* 既訪問リンクの文字色 */
      • 要素名:hover { color: #0000ff } /* マウスが上にきたときの文字色 */
      • 要素名:active { color: #0000ff } /* クリックされてから離されるまでの文字色 */
      • 要素名:focus { color: #0000ff } /* フォーカスされたときの文字色 */
      • 要素名:first-child { color: #0000ff } /* 要素内の最初の子要素の文字色 */
      • 要素名:first-line { color: #0000ff } /* ブロックレベル要素の最初の行の文字色 */
      • 要素名:first-letter { color: #0000ff } /* ブロックレベル要素の最初の文字の文字色 */
      • 要素名:before { content: "◎" } /* 要素の直前に◎を挿入 */
      • 要素名:after { content: "◎" } /* 要素の直後に◎を挿入 */
      <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		a:link { color: #ff0000 } /* 未訪問リンクの文字色 */
		a:visited { color: #00ff00 } /* 既訪問リンクの文字色 */
		a:hover { color: #0000ff } /* マウスが上にきたときの文字色 */
	</STYLE>
</HEAD>
<BODY>
	<A HREF="https://informatics.sist.ac.jp/suganuma/">菅沼研究室</A>
</BODY>
</HTML>

    10. @import url("base.css");　　他のスタイルシートの読み込み

    11. @charset "utf-8";　　文字コードの指定

    　　スタイルシートでは，場合によって， 

    SPAN { color: red; font-size: 30pt }
SPAN.green { color: green; font-size: 50pt }

    のように，同じ要素に対して複数の指定が行われることがあります．そのような場合，より適用範囲が狭い記述が優先されます．例えば，上の例においては，CLASS 属性を記述すれば文字の色は緑に，記述しなければ赤になります（使用例）． 
    <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>スタイルシート</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<STYLE>
		SPAN { color: red; font-size: 30pt }
		SPAN.green { color: green; font-size: 50pt }
	</STYLE>
</HEAD>
<BODY>
	文字の色を<SPAN>赤</SPAN>にする<BR>
	文字の色を<SPAN CLASS="green">緑</SPAN>にする
</BODY>
</HTML>

  2. プロパティの種類とその指定方法　　JavaScript で使用する場合，スタイルシートで指定する場合と，属性名が異なる場合がありますので注意してください．

    1. 背景

    2. フォント

    3. テキスト

    4. 幅と高さ

    5. マージン，パディング，ボーダー，縁取り

      6. 　　ほとんどの要素は，margin，padding，及び，border という 3 つの属性を持っています．ここで，margin とは，要素の領域境界とその外側の間のスペース，padding は，要素の領域内の文書と領域境界間のスペースを意味し，また，境界を囲む枠を border と呼びます（上図参照）．

    6. 表示方法と表示位置

    7. 表（テーブル）

    8. リスト

    9. 挿入と引用

    10. カーソルの形状

  3. 使用例のまとめ

情報学部 菅沼ホーム HTML 目次 索引