872 Style
  1. TOP
  2. MEMO
  3. CSS
  4. StyleSeet について[HTMLへの記述]

スタイルシートについて[HTMLへの記述]

HTMLファイルの中でスタイルシートを利用するための記述方法は、３通りあります。

  1. HTMLファイルの特定のタグにインライン（直接）で記述する方法。
  2. HTMLファイルに<style>で記述する方法
  3. スタイルを記述した専用ファイルを外部ファイルとして作成し、そのファイルを読み込む方法

同じHTMLファイル内で複数の記述法を併用することが可能です。

スタイルの優先順位

複数の方法でスタイルを設定している場合は、上記で紹介した記述方法の順番にスタイルが優先されます。ただし、最優先させたいスタイルには !important というキーワードを記入します。

セレクタ {属性 : 値 !important}

p {
	color : red !important
}

インラインでの記述

インラインで直接HTMLタグにスタイルを設定する方法です。
この記述方法は最も優先順位が高いので、HTMLに<style>を記述した場合や、外部ファイルとして読み込んだ場合の特定箇所のスタイルを設定したい場合に使用します。

<p style="color: #008080; font-size: 150%; font-weight: bold;">
アジの開き</p>
<p style="color: #fff; font-weight: bold; background-color: #800000;">
カツオのたたき</p>
<p>イワシの
<span style="color: #8b4513; font-size: 175%; font-weight: bold;">
さんが焼</span></p>

アジの開き

カツオのたたき

イワシのさんが焼

HTMLファイルに<style>で記述

HTMLファイルに<style>でスタイルを設定する方法です。この記述方法は、スタイルの設定を<style>～</style>内に記述します。<style>は<head>～</head>ないに記述します。
<style>の属性には必ずスタイルシートのMINEタイプの type="text/css" を指定します。

<style type="text/css">
<!--
.azi_hiraki {color: #008080; font-size: 150%; font-weight: bold;}
.katsuo_tataki {color: #fff; font-weight: bold; background-color: #800000;}
.iwashi_sangayaki {color: #8b4513; font-size: 175%; font-weight: bold;}
--!>
</style> 

<p class="azi_hiraki">アジの開き</p>
<p class="katsuo_tataki">カツオのたたき</p>
<p>イワシの<span class="iwashi_sangayaki">さんが焼</span></p>

アジの開き

カツオのたたき

イワシのさんが焼

外部ファイルでの読み込み

スタイルを記述したスタイルシートファイルを外部ファイルとして作成し、そのファイルを読み込む方式です。スタイルシートファイルを作成する場合は、設定したいスタイルを書式に従って記述し、拡張子を「css」にします。外部ファイルの保存先を読み込みたい場合は、読み込みたい外部ファイルの数だけ記述します。この方法は全体のデザインを統一したい場合に使用します。

body {
	color: #333;
	font-size: 14px;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;
	margin: 0;
	padding: 0;
}
div, p {
	margin: 0;
	padding: 0;
}
.clear {
	clear: both;
}
h1 {
	color: #fff;
	background-color: #333;
	text-align: center;
	margin: 0 0 20px;
	padding: 3px;
}
#primary {
	width: 600px;
	margin-right: auto;
	margin-left: auto;
}
#primary .secondary {
	width: 190px;
	float: left;
	padding-right: 5px;
	padding-left: 5px;
}
.secondary p {
	color: #fff;
	font-weight: bold;
	background-color: #000080;
	text-align: center;
	padding: 5px;
}
.secondary ul {
	margin: 10px 0 0;
	padding: 0;
	list-style-type: none;
}
.secondary li {
	background-color: #ffffe0;
	margin-bottom: 1px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;
	border-bottom: 1px solid #c0c0c0;
	border-left: 10px solid #4169e1;
}
.secondary li:hover {
	color: #dc143c;
	background-color: #fff0f5;
	border-left-color: #dc143c;
}
.under_box {
	text-align: center;
	padding-top: 50px;
	padding-bottom: 20px;
}
.under_box a {
	color: #333;
	font-size: 12px;
	font-family: tahoma, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold;
	background-color: #dcdcdc;
	text-decoration: none;
	padding: 5px 15px;
	border: outset 1px #a9a9a9;
}
.under_box a:hover {
	color: #ff4500;
	background-color: #ffffe0;
	border-color: #ffc0cb;
}

	<link href="02_css_test.css" rel="stylesheet" type="text/css" media="all" />

SAMPLE