<div class="ribbon-container">
<div class="ribbon-icon">
<img src="icon.png" alt="アイコン">
</div>
<h2 class="ribbon-title">タイトルテキスト</h2>
</div>
.ribbon-container {
position: relative;
text-align: center;
margin: 20px auto;
max-width: 600px;
}
.ribbon-title {
background: url('ribbon-bg.png') no-repeat center/contain;
color: #fff;
padding: 40px 20px 20px;
font-size: 1.5rem;
position: relative;
z-index: 1;
}
.ribbon-icon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 60px;
height: 60px;
}
.ribbon-icon img {
width: 100%;
height: auto;
}
/* レスポンシブ対応 */
@media (max-width: 600px) {
.ribbon-title {
font-size: 1.2rem;
padding: 30px 10px 15px;
}
.ribbon-icon {
width: 40px;
height: 40px;
}
}
目次
✅ 説明
.ribbon-container
: リボン全体を囲むラッパー(position: relative
で子要素の絶対配置を可能に).ribbon-title
: リボン背景画像を設定(background: url()
).ribbon-icon
: タイトルの上に絶対位置で重ねて配置- レスポンシブ:
@media
クエリで小さな画面に合わせてサイズを縮小
コメント