制作者の活動(PR)。

アイドル女優・堀北真希ちゃんをうさぎ化した制作者のオリジナルキャラクタ
主な作品

堀北真希うさぎ：平成元年〜平成 3年頃のボシュロム『オプティマ』CMを真似てソフトコンタクトレンズを装着している場面を含んだ仮想CM動画

大きな画像の中に小さな見出し文字を入れるには。

CSSの小技として、最近ウェブログなどで見られる、大きな画像の中にある見出し文字を実現する方法を解説します。

大きな画像の中に小さな見出し文字を入れるには・目次。

はじめに。

最近はウェブログに依るコンテンツの公開が寧ろ主流になりつつあります。

多くのウェブログのコンテンツでは、<h1>要素のテキストを大きな画像の中に表示させております。

これを実現する方法を解説します。

注意しておきたい事。

実際のサンプル。

ここでは、話しを具体的にするために、以下のサンプルを用意しました。

HTML文書のサンプル。

HTML文書としては、以下のようなものとします。

<title>大きな画像の中にある見出し文字。</title>
<h1>しらぎくさいと。</h1>
<p>タネも仕掛けもありません。</p>
<p>強いて言えば、paddingプロパティの使い方でしょう。</p>

画像のサンプル。

このとき、<h1>要素は以下の画像「h1Image.GIF」の中に表示させるものとします。

言うまでもありませんが、画像に関してはウェブブラウザで表示出来る画像であれば何形式でも構いません。

実際のスタイル定義。

実際に書かれるべきスタイルシートは以下のようになるでしょう。

body {
    text-align: center;
    }

h1 {
    background: #fff url('h1Image.GIF') no-repeat;
    width: 600px;
    margin: 1em auto 0;
    line-height: 10px;
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 0;
    padding-right: 0;
    font-size: 100%;
    color: #090;
    text-align: center;
    }

p {
    width: 600px;
    margin: 1em auto 0;
    text-align: left;
    }

このスタイルを適用すると、以下のようになります。

このスタイルに於けるポイント。

このスタイル定義にはどのようになっているのでしょうか。

以下に解説しておきましょう。

<h1>要素のスタイル。

<h1>要素に於けるスタイルには以下のスタイル定義がしてあります。

  1. 先ず、backgroundプロパティで適用する背景画像(background-imageプロパティ)と画像が表示出来ない場合に備えての背景色(background-colorプロパティ)を指定しております。

    また、万が一はみ出すような事があっても背景画像が繰返し並んだりしないようにするため、no-repeat値(background-repeatプロパティ)も指定しておきます。

  2. 続いて、widthプロパティで要素の横幅を指定しております。

    尚、

    の値はいずれも零にします。

    そうしないと、インターネットエクスプローラ 6.0以前(マッキントッシュ版は4.5以前)以外ではwidthプロパティとは別にpadding-leftプロパティ及びpadding-rightプロパティが適用されるため、崩れが生じてしまいます。

  3. 要素の高さはheightプロパティを用いておりません。

    高さは画像が150ピクセルズとなるため、「上のパディング」, 「要素本体の高さ」及び「下のパディング」の合計が150ピクセルズとなるように

    の値を定めます。

    line-heightプロパティは適当に10ピクセルズとしております。

    随分いい加減なと思われるかも知れませんが、上と下のパディングが充分あれば、余程巨大なフォントにしない限り画像をはみ出したりする事は無いでしょう。

    こうする事で、上パディングと下パディングの間に見出しの文字が表示されるようになります。

その他の要素のスタイル。

さて、今までの説明で充分見出し文字を画像の仲に表示させる事が出来ますが、それだけではきれいな表示になりません。

<h1>要素の配置をどうするか？

<h1>要素は左に寄せるのか、右に寄せるのか、それとも中央に配置するのかと言う問題があります。

ここでは中央に配置するものとします。

幅が定まっているブロックレヴェル要素を中央に配置するには、margin-leftプロパティ及びmargin-rightプロパティにauto値を適用するのが正しいのですが、これはインターネットエクスプローラ 6.x以前では正しく処理されません。

そこで、インターネットエクスプローラでセンタリングするために<h1>要素の上位要素である<body>要素にtext-align: centerプロパティを当てる事にします。

そうすると、今度は<body>要素の下にある全ての要素内のテキストがセンタリングされてしまいますので、ここで出てくる<h1>要素以外のブロックレヴェル要素である<p>要素にはtext-align: leftプロパティを当てる事で副作用を打ち消します。

<h1>要素以外のスタイルは？

<h1>要素は幅600ピクセルズとしているため、その他の要素の幅も合わせないと不恰好になるでしょう。

ここでは<h1>要素以外のブロックレヴェル要素は<p>要素だけですのでこれにwidthプロパティで横幅を設定します。

勿論、配置については<h1>要素同様センタリングとします。

サブタイトルも画像に入れるには。

ウェブログなどでは、サブタイトルは<h2>要素としてマークアップされ、<h1>要素の背景画像内に表示させております。

この方法については、続編・大きな画像の中に見出し文字とサブタイトルを入れるにはにて解説しておりますので、そちらをご覧下さい。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com