クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS HTML

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

投稿日:

今回は画像の上に文字やタイトルを重ねて表示してみましょう!
少しオシャレで良い感じですよね。

 

こんな仕組みのものを作ります

画像をきっちりと囲む領域を作り「position:relative」を指定します。
これで「position:absolute」したものを上に重ねることができるようになります。
後はちょこっと装飾すればOKです。

イメージ的には下記のような感じです。

サンプルも作ってます。

HTML(画像の上に文字を重ねて表示させる)

まずはHTMLです。

ポイントとして、まずは画像を囲む領域を作成します。
その中に画像と文字を入れ込めばOKです。

CSS(画像の上に文字を重ねて表示させる)

次にCSSです。

さて本題ですね。
「wrapper」クラスは画像を囲むためのものです。
「position:relative」と「display:inline-block」を指定しておきましょう。
「display:inline-block」は画像をぴったりと囲みたいために指定しています。
これが無いと画像の右側の不要な領域まで囲っちゃいますからね。

次に「label」クラスですね。
親要素である「wrapper」に重ねて表示するために「position:absolute」を指定します。
他は装飾のためのパラメーターですね。

最後に「label-left-top」クラスです。
親要素のどの位置に表示するかを指定します。
「left:0px」「top:0px」と指定しているので、親要素である画像の左上に重なることになります。

少しだけ難しいかもしれませんが、理解できるとオシャレなものが作れるようになるので是非慣れていきましょう!

文字の表示位置を色々と変更したサンプルも作りました。
良ければ見てくださいね。

-CSS, HTML

執筆者:

関連記事

HTML テキストボックスの入力候補リスト(datalist)

JavaScriptやjQueryを利用しなくてもHTML5だけで動的なことも出来るようになってきました。 例としてHTML5のdatalistタグを利用すれば、関連付けされているテキストボックスに「 …

HTML 文字の上に丸印を付けるサンプル

文字の上に強調を表す丸印を付ける機会がありました。 次のような仕上がりですね。 最初は画像にしようと考えていたのですが、文字にして欲しいとの要望だったので文字にする方法を考えました。 色々と考えた中で …

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。 ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因に …

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「10 …

CSS 正規表現でクラスを複数指定する

CSSで作成するクラスはなるべく少ない方が良いですよね。 でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。 その同じようなクラスにも1つずつ同じ属性を設定していくなんて事も多々あり …


  1. ての より:

    ありがとうございます。
    サンプルを作成する為、テンプレ-トと組み合せが、
    色々試して上手くいかず、諦めておりました。
    こちらで教えて戴いたとおりにすると一回でちゃんと表示されました。
    本当にたすかりました。
    もっともっと勉強せねばと反省しております。
    これからも色々拝見させていただき、勉強させてください。

    • sasaki より:

      コメントありがとうございます!
      お役に立てたならとても嬉しいです。
      私もまだまだ勉強中なので、お互い頑張っていきましょう!

comment

メールアドレスが公開されることはありません。