作業することは？
BをAに埋め込む
完成したらindex.htmlをサイトのトップページにアップロードする。
スタイルシート3種類の適用方法の練習
以下のコードをコピーして、styletest.htmlという新規htmlファイルをBをAに埋め込む
完成したらindex.htmlをサイトのトップページにアップロードする。
作成し、ペーストして完成してみましょう。
サンプル
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">
<p><br />
<br />
<br />
<font size="18px">この文字を外部スタイルシートで#ff0000の色にせよ。</font></p>
<p> </p>
<p> </p>
</div>
<div align="center">
<p><br />
<br />
<br />
<font size="18px">この文字をhead要素のスタイルシートで#00ff00の色にせよ。</font></p>
<p> </p>
<p> </p>
</div><div align="center">
<p><br />
<br />
<br />
<font size="18px">この文字をインラインスタイルシートで#0000ffの色にせよ。</font></p>
<p> </p>
<p> </p>
</div>
</body>
</html>
1.外部スタイルシート
HTMLからCSSファイルを呼び出す方法
CSSファイルをHTMLファイル内で呼び出す方法を紹介する。CSSファイルの呼び出しは<head></head>内に記述する。
CSSファイルの呼び出し – HTMLファイル
CSSファイルへのパスは相対パス、絶対パスのどちらでも良い。
<title>タイトル</title>
<linkrel=”stylesheet” href=”CSSファイルへのパス” type=”text/css” />
</head>
2.head要素のスタイルシート
headタグ内への記述
headタグ内への記述は以下の通り。今回h1タグに対して、margin:0（余白ゼロ）とfont-size:3em（文字の大きさを3emにする）のスタイル指定をする。
head内でのCSSの記述例 – HTMLファイル
この記述方法のデメリットとして、まず、SEOの効果が下がる事が挙げられる。これは、CSSファイルを呼び出す方法と比べてbodyタグの位置が下に来るからである。詳しくは関連記事を参考にしていただきたい。
<head>
<title>タイトル</title>
<styletype=”text/css”>
h1 {
margin: 0;
font-size: 3em;
}
</style>
</head>
他にも、「1つのファイルが長くなるため単純に見づらいコードになる」、「それぞれのHTMLファイルにいちいち記述しなければならない」などのデメリットが挙げられる。
3.インラインスタイルシート
それぞれの要素に対するスタイル指定
今回は特定のpタグに対してcolor: red（文字色を赤）とfont-size: 20px（文字の大きさを20pxにする）のスタイル指定をする。
特定のpタグに対するCSSの記述例 – HTMLファイル
この記述方法のデメリットとして、「全てのpタグに手動で書かなければならず、変更の際に面倒」「コードが見づらくなる」などが挙げられる。できる限りHTMLからCSSファイルを呼び出した方が良いだろう。
<pstyle=”color: red; font-size: 20px;”>
このpタグに対してスタイルを指定する。
</p>
0 コメント :
コメントを投稿