めざせ、ＨＴＭＬの鉄人！

「ＨＴＭＬ教室」(中級篇)　その二　

《おことわり》ここでは私のホームページで実際に使っているテクニックを紹介します。JavaScript や Style Sheet を使っていますが、これらは、もともと Netscape Navigator 用に作られたもので、Internet Explorer では表示結果が異なる場合があります。このページは Mozilla for Linux 1.0 で確認をとってあります。

スタイルシートを使う

「中級篇」(その一)では JavaScript を使った実例を紹介しました。JavaScript を使うと、簡単に HTML をインターアクティブなものにすることができました。ここでは、スタイルシートを使った例を紹介します。スタイルシートは、HTML の書式を細かく設定するもので、これを上手に使うと「スタイリッシュ」なページを作ることができます。以下は、このセクションの「お品書き」です。


1 スタイルシートの定義

このページのスタイルシートは、独立したスタイルシートファイル authoring.css に次のように書いてあります。

h2.chapter {
    margin: 4px 10px;
    padding: 4px;
    background-image: url('greenback.gif');
    background-repeat: repeat-y;
    }
h3.section {
    border-bottom: 2px solid blue;
    padding-bottom: 2px;
    }
li {
    list-style-image: url("greenball.png");
    }
font.amikake {
    background-color: lightgray;
    }
font.bangou {
    color: white; background-color: blue;
    padding: 4px;
    }
font.kakomi {
    border: thin solid black;
    }
font.shironuki {
    color: white;
    background-color: black;
    font-weight: bolod;
    }

pre では行間を指定してプログラムリストを読みやすくし、h2.chapter ではタイトルをグリーンのバーの上に浮き立たせるようにしました。

スタイルシートの定義ファイルを読みこむには <head>---</head> の間に次のように定義します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-JP">
   <TITLE>めざせ、ＨＴＭＬの鉄人！</TITLE>
<link href="authoring.css" rel="StyleSheet" type="text/css">
</HEAD>

スタイルシートの定義は、次のように <head>---</head> に書き込むこともできます。そのページでだけしかスタイルシートを使わない場合には、これでもいいのですが、他のページも同じスタイルで統一したい場合は外部ファイルを使ったほうが便利です。

<style type="text/css">
<!--
h2.chapter {
    margin: 4px 10px;
    padding: 4px;
    background-image: url('greenback.gif');
    background-repeat: repeat-y;
    }
h3.section {
    border-bottom: 2px solid blue;
    padding-bottom: 2px;
    }


-->
</style>

スタイルシートは　定義するスタイル ｛プロバティ： 価；｝　のように書けば良く、すでに定義されているものにそのまま手を加えることも、すでに定義されているものをもとに h2.section などのように、新しい「クラス」をつくることもできます。プロパティとプロパティの区切りは ； を使い、価と価の区切りはスペースです。


2 かこみ、白抜き、網かけ文字

kakomi は、文字を囲むもので、　その二　という部分で使っています。スタイルの定義は次のとおりです。

font.kakomi {
    border: thin solid black;
    }
border は指定した部分を囲む機能で、四方とも同じもので囲む場合、上のように境界線の太さ(thin medium thick から選ぶ)、種類(none dotted dashed solid double groove ridge inset outset から選ぶ。ある種類では border の幅が太くないと表示されないものがあるので注意)、色(キーワードもしくはRGB表示)の順で指定します。これを上手に使えば　注　や　Ａ　Ｂ　などの記号を作ることができます。

shironuki は 反転文字 を作ります。次の color は文字の色、background-color は背景の色ですから、これを逆につくればいいわけです。反転文字 のばあい、文字が細いとわかりにくいので、文字の太さを font-weight で太くしています。

font.shironuki{
    color: white;
    background-color: black;
    font-weight: bold;
    }

網かけは　定義するスタイル ｛プロバティ： 属性；｝　の部分で使っています。これは background-color を lightgray に変えただけで、簡単につくれますね。background-color を yellow や green にすれば ハイライト の効果を与えることができます。font.amikake などの「クラス」を使うには、HTML で 

<font class="amikake">　定義するスタイル ｛プロバティ： 属性；｝　</font>
などと書きます。


3 ボーダスタイルの応用

このページのソースコードは pre を次のように定義しなおして表示しています。color は文字の色を、background-image はその領域の背景画像を、background-repeat はその画像のくりかえしを、padding は画像の端から本文までの距離を示します。padding の価は、上、右、下、左の順で指定します。この画像では左にトラクターの穴がありますので、それに文字が重ならないように右の padding を多くとってあります。また、この画像のストライプの幅が 20px なので、一行の文字幅を line-height: 20px; と指定して、画像に行がきちんとおさまるようにしました。ソースリストの制作の時注意すべき点は、< > & などの記号を &lt; &gt; &amp; などに変換しておくことです。そうでないと HTML 全体の表示がおかしくなります。

pre {
    color: darkgreen;
    background-image: url('greenbar.gif');
    background-repeat: repeat-y;
    padding: 0px 0px 0px 20px;
    line-height: 20px;
    }

また、冒頭の《おことわり》の部分は blockquote を次のように定義しなおして使っています。blockquote は体裁よくボックス型の書式を作ってくれるので、こういった枠組みを簡単に作ることができ、活用できそうですね。

blockquote{
    border: 2px dotted blue;
    padding: 24px;
    }

このようにスタイルシートを使って HTML にもともとあるスタイルを定義しなおして使えばかってスタイルシートをつかわないで作ったページをカラフルなものに一変させることができます。


4 ヘッドラインの変更

この「ヘッドラインの項目」は h3.section で表示しているのですが、スタイルシートの border-bottom を使って、下に青い線をつけています。これだけでは芸がないので、項目番号を先頭につけることにしました。それが次の font.bangou です。このタグを <h3 class="section"><font class="bangou">4</font> ヘッドラインの変更</h3> というふうに H3 タグの中にはさみこむと、上のようなヘッドラインができあがるというわけです。この場合、border-bottom の 2px と padding-bottom の 2px の合計が bangou の padding の合計にならないと、番号の反転文字とアンダーラインとがずれてしまいますので、注意してください。

h3.section {
    border-bottom: 2px sold blue;
    padding-bottom: 2px;
    }
font.bangou {
    color: white; background-color: bule;
    padding: 4px;
    }

h2.chapter では背景に画像を入れてみました。このページの最初の「スタイルシートを使う」というのがそうです。もともとの画像は

で、この上にタイトル文字をのせればかっこいいかなを思って作ってみたのです。margin は価を二ついれましたので、最初が上下、次が左右の価になります。padding を大きくとると、文字が窮屈な感じがせずにいいと思います。背景画像の指定の仕方はちょっと変わっていますので、下の例を見てください。background-repeat の指定をしないと画像が縦、横にリピートされてしまいますので、下の例では縦方向だけのリピートにしてあります。

h2.chapter {
    margin: 4px 10px;
    padding: 6px;
    background-image: url('blueback.gif');
    background-repeat: repeat-y;
    }

5 リストの画像指定

最初の「お品書き」の部分


は li を使っています。リスト項目の行頭記号は list-style-type で disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none の中から選ぶことができますが、上の例では記号のかわりに画像にしてみました。これは 
li {
    list-style-image: url("greenball.png");
    }
というふうに、簡単に実現することができます。

背景画像の使い方

このページは「スパイラルノート」のページに見せるために、次の画像を背景につかっています。


これが縦につながると、ノートを綴じてあるワイヤに見えるのです。普通は、これを body タグの中に background="../images/crc-back.gif" と書くのですが、ここではスタイルシートを使って 

body {
    background-image: url("../images/crc-back.gif");
    background-repeat: repeat-y; 
    background-attachment: fixed;
    }
としました。最後の background-attachment: fixed; というのがミソで、こうすると、本文をスクロールしても背景画像は動かないのです。スパイラル模様は、画面がスクロールするとそれがチラチラして見にくいのですが、これですと、そういうことになりません。同じ背景画像を使ってある他のページをスクロールして、見くらべてみてください。

次は「めざせ、ＨＴＭＬの鉄人！」の目次にある、ワンちゃんを画面の下に走らせているスタイルシートです。anidog2.gif という動画 gif があったので、それを使いました。background では、背景色、背景画像、その並び方、スクロールの指定、位置の指定を次のように、一気に書くことができます。

body {
    background: linen url('anidog2.gif') no-repeat fixed center bottom; 
    }

こうすれば、画面をスクロールしても、ワンちゃんはいつでも画面の下を走り回ります。スタイルシートで動画を背景に使うことができるわけですが、これは、せいぜい表紙や目次でしか使えません。文字の多いところでつかうと、うっとおしく感じます。スタイルシートで賑やかなページを作ることができますが、それが読みやすいかどうかは別のことです。あなたのセンスでお使いください。

スタイルシートの詳細は www.htmlhelp.com に詳しく載っています。私はここからオフラインマニュアル wgdcss.tar.gz をダウンロードして参照しています。



[INDEX]