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

CSSで見出しの頭に画像を加える(前編)

見出しのデザインとして、見出しの先頭に画像を加えてみたいと思ったことはありませんか? スタイルシートを使えば、たった1つスタイルを定義するだけで、すべての見出しの先頭に同じ画像を加えることができます!

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

マーカーはリストだけではない

見出しの例 見出しのデザインとして、見出しの文字の先頭に画像を加えてみたいと思ったことはありませんか?

すべての見出しに画像を表示するタグを追記するのは記述量が多くなってしまって無駄ですし、ul要素とli要素を使った「リスト」にすると「見出し」であることが表現できません。

そこで、スタイルシートの出番です。スタイルシートを使えば、たった1つスタイルを記述しておくだけで、 すべての見出しの先頭に同じ画像を加えることができます。

以下の画面イメージを見て下さい。 いくつかの見出しが表示されています。これらは、見出しを表現する要素 h1 ~ h3 を使って構成しています。 それぞれの頭に、画像が付いています。しかしHTMLソースには、画像を表示するソースは一切ありません。スタイルシートで表示させているからです。

サンプルページのイメージ

このようにスタイルシートでは、たった1つスタイルを記述するだけで、すべての見出しの先頭にマーカー(記号)を加えるようなことも 楽々に実現できます。
※ここでは「見出し」を例にしましたが、適用できるのは「見出し」だけではありません。(後述)

デザイン自由度を大幅に高める「疑似要素」

上記のテクニックには、「 before 疑似要素 」を利用しています。

この before疑似要素を使うと、任意の要素の頭(直前)に、任意のオブジェクト(文字や画像など)を加えることができます。

詳しい解説は、次のページへ! →

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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