CSSのHTMLへの組み込み

>>ホームページの作り方TOP　>>CSSのHTMLへの組み込み

■CSSのHTMLへの組み込み（XHTML共通）

CSS（スタイルシート）とはHTMLに組み込むことでHTML言語で書かれた文字や画像の大きさ、色など視覚デザインを変えることができるものです。

先ほどまでで作ってあるHTMLファイルにCSSを適用してみます。 CSSの適用方法は2通りあります。1つめはHTML内に組み込んで実行させる方法。

2つ目は外部シート(.cssファイル)から読み取って実行する方法です。

前者の場合はheadの間に次のように記述します。「!--」や「//」はコメントアウトを表します。ここでコメントアウトしているのは古いブラウザでstyleの間に記述した内容が表示されてしまうためです。

後者の場合はheadの間に次のように記述します。これは、外部シートであるnamae.cssを読み込むことを意味します。

mediaではページが出力されるメディアを指定します。いろいろありますがallにしとけばすべてデバイスに適用されるので問題ないでしょう。

前者で言う、適用スタイルにあたる部分をnamae.cssに記述することになります。

XHTML1.0を使う人は空要素なので最後に" /"を入れるのを忘れないでくださいね。

なお、この講座では外部シートを組み込む後者の方法で説明します。

まず、index.htmlとは別にメモ帳を起動してください。起動したら下のように記述し、拡張子.htmlではなく、stylee.cssで同じフォルダ内に保存してください。

@charset "UTF-8";

@import url("sample.css");

* {
　　　　font-size:1.25em;
　　　　}

@が頭に付いた@規則はスタイルシートの文章の中で一番初めに記述します。

charsetはエンコードの指定、importは他のスタイルシートを読み込む場合に指定します。

*はユニバーサルセクレタといって、全ての要素に対してスタイルを指定するときに使います。

早速サンプルに対して適用するスタイルを記述していきますので、上の記述は@charsetだけ残した上で、下の記述を付け足してください。

この講座では、見易いようにセクレタ（上でいうとfont-sizeなど）の前に空白を置いておりますが、通常はTabでスペースをとってください。

IEはまったく問題ありませんが、Firefoxは空白の連続の場合font-sizeをきちんと読み込んでくれません。

コピーで使う人はそのつどTabに直しておくこと。

h1 {
　　　　font-size:1.25em;
　　　　font-size:1.25em;
　　　　}
h2 {
　　　　font-size:1em;
　　　　}
p {
　　　　font-size:0.875em;
　　　　}
address {
　　　　font-size:1em;
　　　　}

文字の大きさを表すのにはfont-sizeで指定します

。単位はpxとemが主として使われます。ブラウザ標準の文字サイズは16pxであり、その大きさを1としたときの相対値がemとなります。

概要は以下の通り

14px＝0.875em 16px＝1em 20px＝1em 32px＝2em

また、フォントサイズ（font-size）や幅（width）はピクセル（px）指定だけでなく、パーセント（％）指定することもできます。

例えば、font-sizeを75％と指定した場合、デフォルトのフォントサイズが16pxのブラウザなら、12pxで表示されることを期待しています。

パーセント表示することのメリットは、IEユーザーが「表示」メニューからフォントサイズを変更することができるということのみであるので、ピクセル指定だけでも差ほど問題ないように思えます。

Windowsのデフォルトフォントサイズは16pxですが、MacのFirefox、Safari、Netscapeに関しては、14px相当のフォントサイズをデフォルトにしているため、注意が必要です。

余談ですが、主にcssを書くときなどに左端との間を空けるのにはスペースを使わず(講座内ではスペースを使ってます）、Tabを使うのがよいかと思います。これはHTMLだけでなく他のプログラム言語においても同じです。

そして、上のhead内のlink relスクリプトをSTEP2-1で作ってあるindex.htmlファイル内に組み込んで実行してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
<title>Wakabagari(若葉狩り)</title>
<link rel="stylesheet"type="text/css" href="stylee.css" media="all">
</head>
<body>
<img src="sho1.gif" alt="wakabagari" width="280" height="50">
｜<a href="">HOME</a>｜<a href="">PROGRAMING</a>｜<a href="">TRAVEL</a>｜<a href="">DISEASE</a>｜<a href="">BBS</a>｜
<h1>Wakabagari</h1>
<img src="fuukei1.jpg" alt="風景写真" width="500" height="180">
<h2>意味</h2>
<p>
若葉狩りというのは紅葉狩りの若葉バージョンです。つまり、若葉を見に行くみたいなのりです。ただ、本来の意味は別のところにあります。それは何かというと、みなさんは自動車につける若葉マークをご存知でしょうか？あれって初心者がつけますよね？ここまでくればわかるでしょう。すべてにおいて初心者なので、HPにくること＝若葉狩りにくることみたいになるでしょう？それがこのサイト名の意味です。
</p>
<h2>目的</h2>
<p>
目的はというと、特にはないです。が、あえていえば、紅葉マークをつけることでしょうかね。自動車だってはじめは若葉マークだけど 1年後にマークははずれ、高齢者になると紅葉マークになるでしょう？それと一緒ですね。
</p>
<address>Copyright(C)2007 Wakabagari all rights reserved.</address>
</body>
</html>

ここまでのサンプル

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■CSSのHTMLへの組み込み（XHTML共通）