CID2014WEB: スタイルシート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ファイルを呼び出した方が良いだろう。

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

サンプル(回答例)
http://www.geocities.jp/cid2013/styletest.html
http://www.geocities.jp/cid2013/styletest.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>

2 件のコメント:

Nona Slot2022年2月20日 20:55
Nice information and Thank You
if you don't mind please visit my Website MPOMM
it talks about Slot Online and other fun things.
Thank You
返信削除
返信
TowerKlub2022年3月9日 23:08
mpo4d is a good engine from mpo. This entertainment business provide by TOWERKLUB, you can do mpo4d login in here
返信削除
返信