見出しの先頭に画像を表示する:CSS小技

ブログが作りたい!CSSの小技 > 見出しの先頭に画像を表示する:CSS小技

見出しの先頭に画像を表示する:CSS小技

見出しの先頭に画像を表示する:CSS小技

CSSの小技(33)

前回の記事では、見出しの先頭に画像を表示するために、背景として表示させました。

しかし、これではダメな場合もありますよね。例えば、見出しにリンクを張るような場合は、背景として表示しておくと、画像はクリックできません。

そこで今回は、見出しに画像(img)を使う CSSの小技をご紹介したいと思います。これなら、クリックすることができますよね。


見出しの先頭に画像を表示するとは?

例えば次のように、見出しの文字列の前に画像を配置するわけです。(前回と違うのは、画像と文字列にリンクが張ってあることです)

見出しの先頭に画像を表示する

もちろん、文字列にだけリンクを入れて、画像は背景にしてしまっても良いかもしれません。

ただ、ユーザさんによっては画像にもリンクが張られているものと思って、クリックしてしまう場合もあるようです。人によっては、何も起こらないので、イラッとするかもしれません。

リンク付きの見出しにする場合は、画像を背景にしない方が良いかもしれませんね。

サンプルを用意してあるので、お時間があれば、サンプルもご覧になってみてください。


見出しの先頭に画像を表示する方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

3:ポイント解説

ポイントは、vertical-alignです。vertical-alignを使えば、インライン要素である img(画像)の縦方向の位置を操作することが出来ます。

vertical-alignの値は、次の 8つの他に、パーセントなどで指定することもできます。

  • baseline
  • top
  • middle
  • bottom
  • text-top
  • text-bottom
  • sub
  • super

とりあえず、次の 3つくらいを覚えておけば、間に合うかもしれません。さらに詳しい情報が必要になったら、w3gさんのvertical-alignのページが参考になると思います。

主なvertical-alignの値

フォントや、文字の大きさ、line-heightの値によっても状況が千差万別に変わってくるようなので、完全に思った通りに配置できるかは分りかねます。

前の記事へ
次の記事へ

次回予告

次回は、役立つフリーウェア圧縮・解凍ソフト「Lhaplus」のご紹介などを考えています。


関連記事

CSSに関連する記事の一部を、ご紹介します。

1:見出しに関する CSSの小技

2:見出しに関する HTML入門

カテゴリの記事一覧

作成日:2009/06/04 更新日:2009/06/04

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

すいません、これもろにパクらさせていただきます。
これなんで気付かなかったんだろう?
imgのスタイル指定するだけじゃん!って独り言です…
いや、タメになりました!

imgにalt

fuminchuさん、こんばんは!(・∀・)/ぐいぶにん
コメントありがとうございます。

もろパクいただきました!ヾ(*´∀`*)ノわーい

あ、省略して書いていませんけれども、
imgにaltは付けた方がいいですよね、きっと。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/529-7b0ebfd7
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて