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

2014.03.07
2014.03.06
CSS , WEB

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

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

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

このページの目次

HTMLのコーディングとポイント
- コーディング
- ポイント
CSSのコーディングとポイント
- コーディング
- ポイント
デモ
あとがき

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;
}