HTML / CSS / jQuery コーディング

【CSS】画像の上にテキストを乗せるデザインをレスポンシブで作る


画像の上に、白いカードを乗せたようなデザインで作りました。

数字の部分は「Google Fonts」を利用しています。

スマホで見るときは、テキストと画像が縦並びになります。

 

◆まずはデモページをご覧ください。

デモページを見る

 

ソースもろもろは全てここに書くと長くなってしまうので、ご利用を希望の方はファイルをダウンロードしてください。

【CSS】画像の上にテキストを乗せるデザインをレスポンシブで作る

【 css_29.zip（342KB） 】

ファイルをダウンロードする717 ダウンロード

関連する記事

  1. 【CSS】飲食店などで使える料金表をレスポンシブで作る
  2. 【CSS】境界線・区切り線を曲線の矢印にして吹き出しのように作る
  3. 【CSS】境界線を三角矢印や斜め線にするスタイル
  4. 【CSS】レスポンシブ対応のタブ切り替え表示
  5. 【CSS】オンマウスで矢印の周りがクルッとなるエフェクト

-HTML / CSS / jQuery コーディング
-,

© 2026 Web担当屋 ブログ