webfeelfree

関連記事にも使える!imgタグの画像を背景画像に設定して文字を載せる(重ねる)HTMLとCSS

  • CSS , WEB

お寿司や卵かけごはんやお茶づけ
たまたま、たまたまですよ!
卑猥系ゴシップまとめブログをプラプラしていたら、面白そうなUIデザインを発見したので、パクって、分解して、整理してみました。

関連記事などのコンテンツで、よく見られるデザインですが、想像以上に便利そうなので、コーディングやらポイントやらをメモっていきたいと思います。

See the Pen imgタグの画像を背景画像として使う by webfeelfree (@webfeelfree) on CodePen.4259

HTMLのコーディングとポイント

コーディング

<ul class="demo1">
  <li>
    <a href="#"><img src="***.jpg" width="180" height="150" /></a>
    <p><a href="#">タイトルや説明</a></p>
  </li>
  <li>
     <a href="#"><img src="***.jpg" width="180" height="150" /></a>
     <p><a href="#">タイトルや説明</a></p>
  </li>
  <li>
       <a href="#"><img src="***.jpg" width="180" height="150" /></a>
       <p><a href="#">タイトルや説明</a></p>
  </li>
</ul>

liタグの中は同じにしてあります。

ポイント

ポイントは、「タグとタグの入れ子」を作るところがポイント。
この例だと「ulタグとliタグの入れ子」に目が行きがちですが、「liタグとpタグの入れ子」が重要になってきます。

このポイントを押さえておけば、「divタグとh2タグの入れ子」なんて組み合わせも思い浮かんでくると思います。
そんなタグ入れ子が重要です!

親になるタグの中に背景画像としてimgタグで画像を設定します。
imgタグに関しては、pタグの後に記述しても大丈夫です。

ここで親の設定が出てきますが、詳しくは下のCSSを見てください。

背景画像のサイズは、CSSでも設定可能ですが、正しい記述という観点から、imgタグで設定した方がいいかと思います。
いちいちimgタグごとに記述がめんどくせーっという人は、CSSで設定してください。
ただし、先ほどの理由で、CSSでの画像サイズの設定は割愛しています。

CSSのコーディングとポイント

コーディング

ul{
  width: 580px;
}
.demo1 li {
  float: left;
  position: relative;
  list-style: none;
  line-height: 0;
  margin-right: 5px;
  border: 5px solid #ef4123;
}
  .demo1 li:last-child {
    margin-right: 0;
  }
.demo1 p {
  position: absolute;
  bottom: 0;
  margin: 0;
  line-height: 1;
  background: rgba(239, 65, 35, 0.7);
  padding: 5px;
  width: 170px;
}
.demo1 a{
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

ポイント

ざっくりな説明となりますが、6行目の

position: relative;

で親(基準)となる要素を設定します。

18行目と19行目の

position: absolute;
bottom: 0;

で、親を基準として、画像の下の方に文字を重ねますという指定になります。
これによって、画像と文字が重なります。

例えば、画像の上の方に重ねたい場合は

position: absolute;
top: 0;

と書きかえてあげましょう。

ちなみに、position属性の設定が不完全な場合、文字の位置が変わらなかったり、ブラウザウインドウの一番下に固定表示されたりします。

あと他のコードは、ほぼほぼスタイルのコーディングになりますので、割愛させていただきます。

あっそうだ、補足を忘れていました。
9行目の

line-height: 0;

という指定は、li要素の下に2pxくらい?の余白ができてしまうため、その余白をなくすためのリセット的な指定です。
見た目の仕上がり具合で、余白が気にならない場合は、指定の必要はありません。
そして、22行目の

line-height: 1;

で、元から指定されているline-hegiht属性の値に戻します。

全部説明すると、冗長的になって、わからなくなってくると思うで、あとは、デモでもイジリ倒してみてください。

デモ

See the Pen imgタグの画像を背景画像として使う by webfeelfree (@webfeelfree) on CodePen.4259

あとがき

ブログ系サイトでは、アイキャッチを含めた関連記事まわりによく見られますね。
Web全般、一般的なWebサイトでも限られている画面サイズの中で、情報をいろいろと表現したいときには、威力を発揮できるコーディングではないでしょうか?

これからは、画像の上にテキストを載せる時には画像編集ソフトを使わないで、HTMLとCSSで作成する時代に突入します。
というか突入しています!

そんな手段の一つとして役に立てればいいなぁ~なんて思います。

最新記事

読まれている記事

ツイッター

カテゴリー