制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさ耳を着けた擬獣化キャラクタ。次ぎ
主な作品

制作者作成のイラストと動画作品(一例)

大きな画像の中に見出し文字とサブタイトルを入れるには。

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

大きな画像の中に見出し文字とサブタイトルを入れるには・目次。

注意しておきたい事。

まず、注意しておきたい事は、大きな画像の中に小さな見出し文字を入れるにはで書いておりますので、そちらをもう一度ご覧下さい。

また、これに加えて、サブタイトルのマークアップにはいろいろな方法が考えられます。

ここでは、そのうちの一つのみを解説致しますので、ご了承下さい。

実際のサンプル。

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

HTML文書のサンプル。

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

<title>大きな画像の中にある見出しとサブタイトル。</title>
<h1>
    しらぎくさいと。
    <small class="subTitle">〜 HTMLとCSSの便利な関係 〜</small>
    </h1>
<p>タネも仕掛けもありません。</p>
<p>強いて言えば、paddingプロパティの使い方でしょう。</p>

サブタイトルに関してはいろいろなマークアップ方法が考えられますが、ここでは、<h1>要素の一部としてマークアップするものとしております。

サブタイトル部分はclass="subTitle"属性を与えた<small>要素でマークアップしておりますが、物理要素である<small>要素の利用に抵抗がある方は、<span>要素など別の要素にすれば良いでしょう。

画像のサンプル。

画像は大きな画像の中に小さな見出し文字を入れるにはで使っているものをそのまま使うものとします。

念のため解説すると、<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;
    }

h1 small.subTitle {
    display: block;
    margin-top: 1em;
    line-height: 1em;
    margin-bottom: -2em;
    padding: 0;
    font-size: 75%;
    color: #000;
    background: transparent;
    text-align: center;
    }

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

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

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

このスタイル定義は、大きな画像の中に小さな見出し文字を入れるにはで書いたスタイルシートに「<h1>要素の中にあるclass="subTitle"属性を与えた<small>要素」へのスタイル定義を書き加えただけに過ぎませんので、この箇所についてのみ解説しておきます。

尚、書き加えた箇所は以下のようになっております。

h1 small.subTitle {
    display: block;
    margin-top: 1em;
    line-height: 1em;
    margin-bottom: -2em;
    padding: 0;
    font-size: 75%;
    color: #000;
    background: transparent;
    text-align: center;
    }

そして、この部分の記述は以下のようになります。

  1. まず、<h1>要素の中にあるclass="subTitle"属性を与えた<small>要素は、セレクタで言えば h1 small.subTitle となります。

  2. displayプロパティでブロックレヴェル形式の表示とします。これに依り、自動的に親要素である<h1>要素のテキスト「しらぎくさいと。」から改行されるようになります。
  3. このとき、margin-topプロパティで上のマージンを適切なものにします。
  4. 続いて、行の高さをline-heightプロパティで一文字分とします。

  5. 更に、下の余白を、上の余白と行の高さ分マイナスにした値をmargin-bottomプロパティで一文字分とします。

  6. また、パディングは上下左右とも零にします。下手にパディングを入れると崩れる恐れがあるからです。

  7. あとは、サブタイトル文字そのもののスタイルに関して、

    などと言った定義を行います。

その他のマークアップ方法の場合。

今回は制作者のマークアップ作法に依りましたが、もっと別の方法でマークアップする方もいるかも知れません。

例えば、サブタイトルを<h2>要素やclass="subTitle"属性を与えた<h1>要素でマークアップするなどです。

そういったマークアップの場合、今回解説した方法ではなく、もっと別の方法でスタイル定義を行う事になるでしょう。

ここでは具体的な記述法は割愛させていただきますが、興味のある方は挑戦してみると良いでしょう。

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

ページ外へのご案内。

marguerite.site@gmail.com