CID2016WEB: スタイルシート3種類の適用方法の練習

３種類の方法で指定できるスタイルシート

CSSには3種類の場所から指定する方法があります。

正確に書いてあっても反映されない場合や

1ページ分だけにHTMLタグを使って特別なCSSを適用したい場合などに

この3種類を使い分ける必要が出てきます。

優先される表示順位は

1 < 2 < 3

です。

1.外部スタイルシート

HTMLからCSSファイルを呼び出す方法
CSSファイルをHTMLファイル内で呼び出す方法を紹介する。

CSSファイルの呼び出しは<head></head>内に記述する。

CSSファイルの呼び出し – HTMLファイル

<title>タイトル</title>

<link rel=”stylesheet” href=”CSSファイルへのパス” type=”text/css” />

</head>

CSSファイルへのパスは相対パス、絶対パスのどちらでも良い。

2.head要素のスタイルシート

headタグ内への記述する方法

headタグ内への記述は以下の通り。今回h1タグに対して、margin:0（余白ゼロ）

とfont-size:3em（文字の大きさを3emにする）のスタイル指定をする。

head内でのCSSの記述例 – HTMLファイル

<head>

<title>タイトル</title>

<style type=”text/css”>

h1 {

margin: 0;

font-size: 3em;

}

</style>

</head>

この記述方法のデメリットとして、まず、SEOの効果が下がる事が挙げられる。これは、CSSファイルを呼び出す方法と比べてbodyタグの位置が下に来るからである。詳しくは関連記事を参考にしていただきたい。

他にも、「1つのファイルが長くなるため単純に見づらいコードになる」、「それぞれのHTMLファイルにいちいち記述しなければならない」などのデメリットが挙げられる。

3.インラインスタイルシート

それぞれの要素に対するスタイル指定する方法

今回は特定のpタグに対してcolor: red（文字色を赤）とfont-size: 20px（文字の大きさを20pxにする）のスタイル指定をする。

特定のpタグに対するCSSの記述例 – HTMLファイル

<p style=”color: red; font-size: 20px;”>

このpタグに対してスタイルを指定する。

</p>

この記述方法のデメリットとして、

「全てのpタグに手動で書かなければならず、変更の際に面倒」

「コードが見づらくなる」などが挙げられる。

できる限りHTMLからCSSファイルを呼び出した方が良いだろう。

※教科書ではHTMLからCSSファイルを呼び出す方法が使われています。
しかし、間違ってhead要素のスタイルシートやインラインスタイルシート
になってしまっている場合があります。
意図的に使い分けをする以外はHTMLからCSSファイルを呼び出すようにしましょう。

スタイルシート3種類の適用方法の練習

以下のHTMLコードをコピーしてstyle.htmlを作成し、

style.cssというファイルとリンクして

コード内の指示に従って色を設定しましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>スタイルシート３種類の適用方法</title>
</head>

<body>
<div align="center" id="ichi">
 
 
 
 この文字を外部スタイルシートで#ff0000の色にせよ。
 
 
</div>
<div align="center">
 
 
 
 この文字をhead要素のスタイルシートで#00ff00の色にせよ。
 
 
</div><div align="center">
 
 
 
 この文字をインラインスタイルシートで#0000ffの色にせよ。
 
 
</div>
</body>
</html>

サンプル(回答例)
styletest.html
styletest.css

CID2016WEB

自分のサイトのindex作成

2016年5月30日月曜日

スタイルシート3種類の適用方法の練習

HTMLからCSSファイルを呼び出す方法

CSSファイルの呼び出し – HTMLファイル

head内でのCSSの記述例 – HTMLファイル

特定のpタグに対するCSSの記述例 – HTMLファイル

0 件のコメント:

コメントを投稿