今回のポイント
画像を使った見出しの作り方
ページを立体的に装飾する方法
ブラウザ要素の親子関係を使った“裏技”
|
今回は装飾としての画像の使い方を見ていくことにします。画像を積極的に使うことで，本職のデザイナには届かないなりにもページの印象をアップさせられるものです。
画像などの外部ファイルを使わずHTMLとCSSだけで構成されたページというのは，どうしても平板な印象になります。背景画像を工夫することである程度立体的な印象を作ることができます。
まずはベースになるページです（図1）。h1とpだけで構成された単純な構造になっています。CSSは全く適用していない生HTMLです（リスト1）。
 |
| 図1●ベースになるページ。CSSはまったく使っていない |
リスト1●図1のコード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>背景の練習</title>
</head>
<body>
<h1>第1章 大見出し</h1>
<p> 前回勉強した背景画像の使い方は，もともとHTMLで存在した<body
background="ファイル名">の置き換えです。CSSによってリピート方向や
開始位置の指定はできるようになりましたが，古くからHTMLの勉強をしてい
る人ほど「背景=ページ背景」という認識が強くなります。この考え方から抜
け出してみることにしましょう。</p>
<h2>1-1 小見出し</h2>
<p> CSSを使えばbodyだけでなく，HTML中，bodyに含まれるほとんどの要素
に対して背景画像を設定できます。”ほとんど”であって全部ではありません。
たとえば<br />のように画面上に表示されないものは，画面上で表示される
領域を持っていないため背景画像は設定できません。同様に<title>のような
headに含まれるタグ領域も画面表示がないため対象外です。ブラウザ画面上
でわずかでも面積を専有しているものは背景画像が設定できるので，たとえば
改行の<br />はだめですが，水平線の<hr />には背景が設定できます。
</p>
</body>
</html>
|
CSSのみで装飾を施す
このHTMLにCSSの紹介ページなどでよく見かける装飾を施してみます（図2，リスト2）。
 |
| 図2●CSSのボーダーで見出しを装飾した例。CSS解説サイトなどでよく見かける |
リスト2●図2のコード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>背景の練習</title>
<style type="text/css">
h1{
/*枠線の設定*/
border-style:solid;
/*左だけ四角っぽく，下線も付ける*/
border-width:0px 0px 3px 50px;
border-color:#ff8800;
/*枠線から若干離す*/
padding-left:0.5em;
}
h2{
/*h1より若干字下げ*/
margin-left:1em;
/*枠線の設定*/
border-style:solid;
/*左だけ四角っぽく，下線も付ける*/
border-width:0 0 3px 40px;
border-color:#0088ff;
/*枠線から若干離す*/
padding-left:0.5em;
}
p{
/*テキストがブラウザ両端にくっつかないように
左右に余白を設定*/
margin-left:5em;
margin-right:3em;
}
</style>
</head>
<body>
<h1>第1章 大見出し</h1>
<p> 前回勉強した背景画像の使い方は，もともとHTMLで存在した<body
background="ファイル名">の置き換えです。CSSによってリピート方向や
開始位置の指定はできるようになりましたが，古くからHTMLの勉強をしてい
る人ほど「背景=ページ背景」という認識が強くなります。この考え方から抜
け出してみることにしましょう。</p>
<h2>1-1 小見出し</h2>
<p> CSSを使えばbodyだけでなく，HTML中，bodyに含まれるほとんどの要素
に対して背景画像を設定できます。”ほとんど”であって全部ではありません。
たとえば<br />のように画面上に表示されないものは，画面上で表示される
領域を持っていないため背景画像は設定できません。同様に<title>のような
headに含まれるタグ領域も画面表示がないため対象外です。ブラウザ画面上
でわずかでも面積を専有しているものは背景画像が設定できるので，たとえば
改行の<br />はだめですが，水平線の<hr />には背景が設定できます。
</p>
</body>
</html>
|
段落本分部には左右に余白を付け，見出しを装飾しています。見出しに対する装飾は複雑なことをしているわけではありません。枠線（border）を使って，左と下だけ描画します。左側を太めにすることで，線と言うよりも四角の見出しマークのような使い方をしています。
繰り返しになりますが，このデザインがいけないとか，私がこのデザインをバカにしているということではありません。本文も読みやすいですし，一瞥すれば見出しも見つけやすいです。もしこのページを印刷して会議資料に使うということであれば，このシンプルなデザインはワープロ・ソフトで作った資料と同等のメリハリや読みやすさを持っているといえます。ただ，サイトのデザインとしては「弱い」ということなんですね。
