見た目、色の変え方


見た目を変えるには

今まではXHTMLを書いてきました。 ですが、今までのXHTMLでは文字の色を変えたり背景の色を変えたりということについて一切説明してきませんでした。
XHTMLでは、見た目は「CSS」というものを使って変えます。 CSSでは、文字の色、背景の色、リンクの色、リストのマーク、このページの文章の様に周囲に線を引くなどといったことを変えることが出来ます。
このページでは主要なことに的を絞って説明していきます。


CSSの基本

CSSの書き方には大きく分けて3種類あります。

  1. 外部cssファイルを記述し、XHTMLで読み込む。
  2. headタグ内にstyleタグを記述し、その中でcssを記述する。
  3. 各要素に直接cssを記述する。

ここでは 1. の「外部ファイル」を使ったcss記述を説明していきます。 他のはこのページの最後にcssについて説明しているサイトへのリンクを張っておきますので、そこを参考にしてみてくださいな。

XHTMLでcssを読み込むには？
以下の背景が灰色の部分をエディタにコピー＆ペーストして、作業用フォルダにcsstest.htmlという名前で保存してください。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>サイトのタイトルを書く部分です。</title>
</head>
<body>
<h1>見出しを書いてみたりするところ</h1>
<p>この文字のspanタグで囲ったところのみ<span class="greenText">緑色</span>になりますよ。</p>
<div id="copyright">copyright © 2005 サイト名や管理人名等 all right reserved.</div>
</body>
</html>

そして、以下の背景が緑色の部分をエディタにコピー＆ペーストして、作業用フォルダにstyle.cssという名前でcsstest.htmlと同じフォルダに保存してください。

h1 {font-size:1.1em;}
.greenText {color:green;}
#copyright {text-align:center; background-color:black; color:white;}

では上のソースについて説明を。
まずcsstest.htmlについてですが、今回以下のような行がはじめて出てきています。
<link rel="stylesheet" href="style.css" type="text/css"/>
これは、hrefで指定されたcssファイルを読み込むということです。 つまり、style.cssに書いた内容をcsstext.htmlに適用させるということになるわけです。 (この書き方は、リンクのところでやった絶対パス・相対パスの内容を思い出すと分かりやすいですよ)

続いてstyle.cssの内容ですが、3種類の書き方があるのにお気づきでしょうか？

タグ {〜}
上の例ではh1{〜}となっています。 これは、ページ内に使われているh1というタグは全部〜で指定した見た目になりますという指定方法です。

実際に良く使われるのは、h1という見出しをサイト内の全ページで統一したいときとか、全ページの文字の大きさを統一したいからbodyタグ内のフォントサイズを指定したりするときですね。 つまりは、あらかじめXHTMLに用意してあるタグの見た目を一括で変えたいときに使う方法だと思っておいて下さい。
.任意の名前 {〜}
最初にドット(.)を書いて、そのあとに自分で適当な名前をつける場合です。

この場合は、XHTMLでタグの中にclass="任意の名前"という属性を追加したところのみ、その指定内容が適用されます。 つまりこの場合はclass="greenText"属性を書いたspanタグの中の文字の色が緑色になるというわけです。
#任意の名前 {〜}
最初にシャープ(#)を書いて、そのあとに自分で適当な名前をつける場合です。

この場合は、XHTMLでタグの中にid="任意の名前"という属性を追加したところのみ、その指定内容が適用されます。 つまりこの場合はid="copyright"属性を書いたdivタグの中の背景が黒、文字色白、文字を中心に配置して表示ということになるというわけです。

classとどこが違うのかというと、idは1ページで1回しか使えません。 つまり、ページ内で1回しか出てこないような決まり文句の見た目を指定しておくのに使うといいですよ。

cssというのはちょっと独特でいきなり全部分かるというのは難しいかもしれませんが、色々試しているうちに分かってくるものです。 ただ、ここでcssの詳細を説明していると長くなってしまうので、ここでは詳しい説明はしません。

初心者向けに詳細を説明した別ページを用意しましたので、CSSリファレンス(初心者向け)をご覧下さい。


実際に自分のサイトを作ろう

ページを書くためのXHTML、見た目を決める為のCSSについての説明はとりあえず終了です。 ホントはもっともっと説明したいことがあるんですが、このままではきりが無いので。

ということで、最初の方で書いたメモとレイアウト、そして今までのサンプルソースを元にサイトを作ってみましょう。
ということで、次のページでは具体的なサイトの作り方を説明します。