ホームページ作成/テキストの配置・装飾 (HTML,CSS)

CSSで見出しの頭に画像を加える(後編)(2ページ目)

見出しのデザインとして、見出しの先頭に画像を加えてみたいと思ったことはありませんか? スタイルシートなら、すべての見出しの先頭に、手軽に同じ画像を加えられます! 後編では、現実的な実現方法をご紹介!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

全見出しの先頭にマーカー(画像)を加える 現実案

それでは、具体的な方法をご紹介致しましょう。

HTMLは、前回と全く同じものをそのまま使用します。
ですから、前回作成したページがあれば、そのまま使えます。

<h1>All About Japan</h1>
  <h2>パソコン・家電</h2>
    <h3>デスクトップパソコン</h3>
    <h3>ノートパソコン</h3>
    <h3>PDA</h3>
  <h2>ビジネス・キャリア</h2>
    <h3>IT関連の資格</h3>
    <h3>ビジネスへのネット活用</h3>
    <h3>フリーランス</h3>

そして、次のスタイルシートを加えます。 ここが本題です。
※スタイルシートは、HTMLファイルのhead要素(<head>~</head>内)に記述します。 詳しくは、記事「スタイルシートを記述する3つの方法」をご参照下さい。

h1 {
    background-image: url( redstar.gif );
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 32px;
}
h2 {
    background-image: url( colorball.gif );
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 23px;
    margin-left: 1em;
}
h3 {
    background-image: url( redball.gif );
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 19px;
    margin-left: 2.5em;
}

上記のスタイルシートで、すべての見出し(ここでは h1~h3 要素)の先頭に、画像が表示されます。

前回の方法では、各要素につき2行(マージンの記述を除けば1行)で記述できていましたが、 今回の方法では、5行(マージンの記述を除けば4行)必要です。

どうやって疑似要素を使わずに実現しているのか……については、次のページでご紹介いたします。

それでは、次のページへ! →

  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます