「テンプレート:メインページスタイル/styles.css」の版間の差分
TemplateStyles 導入: メインページ用スタイル |
スマホ幅の定番カードを1列に変更（かわちゃん指示 2026-11-12） — Muse (KP) |
||
| 12行目: | 12行目: | ||
.mp-hero { flex-direction:column; align-items:stretch; } | .mp-hero { flex-direction:column; align-items:stretch; } | ||
.mp-hero-photo { width:100%; height:160px; } | .mp-hero-photo { width:100%; height:160px; } | ||
.mp-cards { grid-template-columns: | .mp-cards { grid-template-columns:1fr; } | ||
} | } | ||
2026年11月12日 (木) 12:20時点における最新版
.mp-hero { display:flex; gap:18px; align-items:center; }
.mp-hero-text { flex:1 1 auto; min-width:0; }
.mp-hero-photo { flex:none; width:220px; height:150px; overflow:hidden; }
.mp-hero-photo a { display:block; width:100%; height:100%; }
.mp-hero-photo img { width:100%; height:100%; object-fit:cover; }
.mp-cards { display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; gap:12px; margin:10px 0; }
.mp-card { border:1px solid #c8ccd1; border-radius:5px; overflow:hidden; background:#fff; }
.mp-card-photo { height:170px; overflow:hidden; background:#f8f9fa; }
.mp-card-photo a { display:block; width:100%; height:100%; }
.mp-card-photo img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 720px) {
.mp-hero { flex-direction:column; align-items:stretch; }
.mp-hero-photo { width:100%; height:160px; }
.mp-cards { grid-template-columns:1fr; }
}