たまたま、たまたまですよ!
卑猥系ゴシップまとめブログをプラプラしていたら、面白そうな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で作成する時代に突入します。
というか突入しています!
そんな手段の一つとして役に立てればいいなぁ~なんて思います。