初心者の為のCSS: 画像の上に文字や画像を重ねる方法 – 後編

前回（初心者の為のCSS: 画像の上に文字や画像を重ねる方法 – 前編）はpositionプロパティは使用することで画像や文字を重ねることが出来るということをご説明しました。 absoluteとrelativeは非常に使い勝手は良いですが、慣れるまでは癖が強いために難しく感じてしまうかもしれません。 そこで、後編では予告通りabsoluteとrelativeを利用したレイアウトと、そのまま使えるコードを付けてご紹介します。 ブログのサムネイル付き記事一覧、ECサイトの商品一覧などで使用できるような汎用性の高いレイアウトをご用意したので幅広いシーンで利用が可能です。 是非色々なコードを試して、オリジナルレイアウト作成にチャレンジしてみてください。 「NEW」アイコンをつける 新着記事や、新商品などに着けるとアイキャッチとして有効です。 “new_icon”のクラスで分岐させることができるため

[riscoro69]

“:after{ position: absolute; content: “NEW”; top:-10px; left: -5px; background:#C00000; color: #fff; padding: 2px 15px; }”