ホームページ作成応援サイト

入門!ホームページNAVI

cssの組み込み

CSS(スタイルシート)とはHTMLに組み込むことでHTML言語で書かれた文字や画像の大きさ、色など視覚デザインを変えることができます。
先ほどまでで作ってあるHTMLファイルにCSSを適用してみましょう。
CSSの適用方法は2つあります。1つめはHTML内に組み込んで実行させる方法です。2つ目は外部シート(.cssファイル)から読み取って実行する方法になります。前者の場合はheadの間にに記述します。「!--」や「//」はコメントアウトを表示します。
ここでコメントアウトしているのは古いブラウザでstyleの間に記述した内容が表示してしまうためです。

<head>
<style type="text/css">
<!--
適用スタイル
//-->
</style>
</head>

後者の場合はheadの間に記述します。これは、外部シートであるnamae.cssを読み込むことを意味しています。
mediaではページが出力されるメディアを指定します。いろいろありますがallにしとけばすべてデバイスに適用されるので問題ないでしょう。前者で言う、適用スタイルの部分をnamae.cssに記述することになります。
XHTML1.0を使う人は空要素なので最後に" /"を入れるのを忘れないでください。

<head>
<link rel="stylesheet"type="text/css"
href="namae.css" media="all">
</head>

なお、この講座では外部シートを組み込む後者の方法で説明しています。まず、index.htmlとは別にメモ帳を起動します。起動したら下のように記述し、拡張子.htmlではなく、style.cssで同じフォルダ内に保存します。

@charset "UTF-8";

@import url("sample.css");

* {
    font-size:1.25em;
    }

@が頭に付いた@規則はスタイルシートの文章の中で一番最初に記述します。charsetはエンコードの指定、importは他のスタイルシートを読み込む場合に指定をします。
*はユニバーサルセクレタといって、全ての要素に対してスタイルを指定するときに使用します。早速サンプルに対して適用するスタイルを記述していきますので、上の記述@charsetだけ残した上で、下の記述を付け足すようにしてください。
この講座では、見易いようにセクレタ(上でいうとfont-sizeなど)の前に空白を置いておりますが、通常はTabでスペースをとっています。
IEは問題ありませんが、Firefoxは空白の連続の場合font-sizeをきちんと読み込んでくれません。

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>
</p>
<address>Copyright(C)2008 Wakabagari all rights reserved.</address>
</body>
</html>

Last update:2016/9/8

コピーライト