gihyo.jpサイトのロゴ

独学で極める “Webデザイン”の技と心

第7回(X)HTML＋CSS入門

2008-02-01

間があいてしまいましたが、前回は見出しについてお話をしました。Webに限らずあらゆる文書において、見出し＋本文という組み合わせは一番シンプルかつ必ず文書中に必要な要素です。

今回は(X)HTML[1]＋CSS入門の実践を兼ねて、サンプルを作ってみます。

見栄えを整えるその前に　～簡単な(X)HTMLの構造を観察してみる～

これから出てくるサンプルでは、シンプルなXHTMLに対してCSSを適用する事で見た目のデザインを変更していきます。Webデザインをこれからはじめる際のすべての基本となる部分でもあるので、しっかりと身につけていくとあとでいろいろな知識が吸収しやすくなります。

(X)HTMLは意味づけを行う言語

それではまず、以下のサンプルファイルをブラウザでご覧ください。特に何もスタイルを適用していない、見出し＋本文だけのシンプルな内容です。

では次に、このファイルをテキストエディタ（Notepadなど）で開いてご覧ください。

<body>と</body>で囲まれた内容に注目してみましょう。

<h1>美しい見出しと読み手が心地よい本文</h1>
<p>美しい見出しと読み手が心地よい本文について（本文以下略）</p>
<h2>美しい見出しとは</h2>
<p>美しい見出しと読み手が心地よい本文について（本文以下略）</p>
<h2>美しい本文とは</h2>
<p>美しい見出しと読み手が心地よい本文について（本文以下略）</p>

見出しにあたる部分は<h1>～</h1> <h2>～</h2> ... 、本文にあたる部分は<p>～</p>という具合に、通常のプレーンなテキストに対して「意味付け」を行っているのです。

このような(X)HTMLを生成することのできるホームページ作成ソフトやWebオーサリングソフトと呼ばれるソフトがありどんどん高機能になってきましたが、文書の意味や文脈、重要度が分かっているのは私たち人間だからこそなので、完全にソフトウェアだけにまかせることは本質的には難しいと考えています。

さて、このままでは何のスタイルもあたっていない（デザインされていない）文書のままとなってしまうので、そこでCSS（Cascading Style Sheets）（⁠※2）の出番です。(X)HTMLのような文書に対して、主に「見た目」の視覚デザインをどのようにみせるかを定義してあげるのがCSSの役割です。

CSSで見た目を整える

それではこの何もスタイルのあたっていないXHTML文書に、装飾をしてみましょう。

CSSの読み込み方

CSSの読み込み方には何通りもありますが、ここではhead要素の中にlink要素を書いて読み込みしたサンプルを作成しました。

<head>
（中略）
    <link rel="stylesheet" href="sample.css" type="text/css" media="screen,tv" />
</head>

このようにlink要素のhref属性でCSSのファイル名を指定することで読み込まれます。

ではまたこのファイルをブラウザで開いてください。先ほどのsample1.htmlと少し見た目が変わったのが確認できます。

CSSの中身

ここで、読み込まれているサンプル用のCSSで何が書かれているのかを見ていきましょう。

詳しくはサンプルCSSファイルをテキストエディタで開き、 /* ～ */で囲まれているコメントを参照しながら、sample2.htmlをブラウザで開き、一つ一つのコードがどんな動きをしているか見ていきましょう。

CSSで「見た目」の視覚デザインをどのようにみせるかを定義すると先に書いたとおり、具体的にh1、h2...などの要素に対して、大きさ、色、幅や高さなどを定義していきます。

書き方のルールもとてもシンプルで、どちらかというとCSSは、人間が普通に読んで理解しやすい言語とも言えます。

書き方のルール
セレクタ { プロパティ: 値 }

一つのセレクタに複数のプロパティを与える場合はセミコロンで区切ります。

セレクタ {
    プロパティ: 値;
    プロパティ: 値;
}

具体例だと、次のようになります。

body {
    padding: 20px;
    font-size: 100%;
}

人間の言葉に置き換えると、次のようになります。

body の
    詰めは 20px で、
    font-size は 100％
です

このように、
セレクタの部分で、どの要素に対してスタイルをあてたいのかを指定し、
プロパティの部分で、どんなスタイルのグループなのかを指定し、
値の部分で、スタイルの具体的な値や挙動を指定します。

これらを、(X)HTML文書に出現するあらゆる要素に対して指定することで、指定したとおりに見えるようになります。

これは実際にCSSを書き換えてみるのが一番実感できるので、早速テキストエディタなどを開いて値を書き換えてみてください。サンプルではbodyにwidth（幅）を70%と指定していますが、ここの値を100%に変更してsample2.htmlをもう一度ブラウザで開き、リロードしてみるとbodyの表示幅が変更されていることがひと目でわかります。

もっと読みやすい文章にする

line-heightの値を調節

sample2.htmlそのままでは、行間が詰まっていてとても読みにくい状態です。これはbodyに対してline-height: 1; の指定をしてしまっているためです。すなわち行の高さが文字1つの大きさ分となってしまうので、行間が詰まっている状態です。

本文を読みやすくするため、p要素に対して適切なline-heightの値を設定しましょう。

サンプルファイルではすでにコメントで書いてありますが、仮にp { line-height: 1.6; }と設定して保存し、もう一度sample2.htmlをブラウザで開いてリロードしてみてください。

line-heightに関する参考

見出しをより見出しらしくデザイン

このXHTMLにはh1、h2という2種類の見出しが出現していますが、そのままのスタイルだと文字の大きさにもメリハリがなくて見出しがあまり見出しのように目立ちません。

そこで2種類の見出しを以下のように指定してみます。

/* 見出しレベル1 */
h1 {
    margin-bottom: 0.9em;  /* 下に続く要素（ここでは段落p要素）との距離を指定 */
    padding: 0.2em;  /* 青色の背景に対して詰めがないと、文字と四角い枠がくっついてみづらくなるため、ここで詰めを指定 */
    color: #fff;  /* 文字色を白く */
    background-color: #0261a6;  /* 背景色を青系統に */
    font-size: 140%;  /* 本文と区別をつけるために大きく指定 */
}

/* 見出しレベル2 */
h2 {
    margin-bottom: 0.6em;  /* 下に続く要素（ここでは段落p要素）との距離を指定 */
    padding: 0.3em;  /* ここで詰めを設定していないと、次に指定する下線と文字がくっついてみづらいので適度な値を指定 */
    border-bottom: 1px solid #0261a6;  /* 下線を青系統に */
    font-size: 120%;  /* h1ほど大きすぎず、pよりは大きく */
}

このように指定してCSSを保存し、もう一度sample2.htmlをブラウザで開き、リロードしてください。見た目の変化をすぐに確認できます。

値には正解はありませんが、読みやすい間隔や色などは試行錯誤していく中で自然と身についていきます。今回のサンプルは出現要素がbody、h1、h2、p、aと少ないですが、どんなに高度なWebページであっても多少要素の種類が増えるだけで基本は変わりません。まずは基本の(X)HTML要素を学びながら、CSSを使ってよりよく仕上げる楽しさを実感すると、きっと今後の学習も楽しくなると思います。

仕様書関連リンク

おすすめ記事

記事・ニュース一覧