CSSfacebookTweethatenaline2019.06.10レシピレイアウト画像の上にテキストを表示する画像の上にキャプションやキャッチコピーなどのテキストを表示する方法について解説します。画像の上に被せるような形でテキストを表示する方法を解説します。src="./images/pic.jpg"><figcaption>スイスのとあるカフェでの風景</figcaption></figure>figure要素を親要素として、画像のimg要素とキャプションのfigcaption要素を配置しています。#333;}figure要素をpositionプロパティの基点(relative)とし、子孫要素のfigcaption要素を左下に表示されるよう設定しています。positionプロパティを使ってfigcaption要素の位置を指定することで、写真についてのキャプションなどのテキストを好きな位置に表示することができます。続いて、記事一覧ページにあるようなサムネイル画像の上に投稿日や記事タイトルが記載されたレイアウトの作成方法を解説します。今回は画像の表示にはimg要素を使わず、CSSでheader要素の背景画像として表示します。class="text_excerpt">2018年8月12日〜19日までの1週間、スイスを1人で1周してきました。<br>今回は初日から2日間滞在したチューリッヒについての旅レポをお届けします。1.6em;}今回はheader要素をpositionプロパティの基点として設定し、投稿日や記事タイトルをdiv要素で囲って、div要素に対して位置を指定しています。div要素を使わず、投稿日のp要素とタイトルのh2要素にそれぞれ位置指定することも可能です。その場合、タイトルが2行、3行と増えて高さが変わると投稿日の位置も修正しなければならなくなり、CSSやJavaScriptのコードがやや複雑になってしまいます。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。