パーツ番号 01-15-05 ・ CSSのみ
画像固定+テキスト流し込みの雑誌風2カラム
左の写真パネルを固定し、右側の記事テキストだけを縦にスクロールさせる雑誌のような構成です。WordPressの特集記事やインタビューページの導入部に向きます。
プレビュー
ソースコード
HTML
<div class="d01-15-05-frame">
<div class="d01-15-05-scroll">
<div class="d01-15-05-side"></div>
<div class="d01-15-05-main">
<div class="d01-15-05-cap">FEATURE STORY</div>
<h4>特集記事の見出し</h4>
<div class="d01-15-05-drop">
<span class="d01-15-05-letter">T</span>
<div class="d01-15-05-lines">
<div class="d01-15-05-line w95"></div>
<div class="d01-15-05-line w88"></div>
<div class="d01-15-05-line w92"></div>
</div>
</div>
<div class="d01-15-05-line w90"></div>
<div class="d01-15-05-line w80"></div>
<div class="d01-15-05-line w85"></div>
<div class="d01-15-05-line w70"></div>
<div class="d01-15-05-line w90"></div>
<div class="d01-15-05-line w75"></div>
<div class="d01-15-05-line w82"></div>
<div class="d01-15-05-line w88"></div>
<div class="d01-15-05-line w78"></div>
</div>
</div>
</div>CSS
.prev.d01-15-05{padding:0;display:block}
.d01-15-05-frame{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fffdf9}
.d01-15-05-scroll{position:absolute;inset:0;overflow-y:auto;display:flex;align-items:flex-start}
.d01-15-05-side{flex:0 0 40%;position:sticky;top:0;align-self:flex-start;min-height:260px;background:linear-gradient(160deg,#f4a261,#e76f51 55%,#9c3b2e)}
.d01-15-05-main{flex:1;padding:18px 16px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.d01-15-05-cap{font-size:9.5px;letter-spacing:.25em;color:#b5794f;font-weight:700}
.d01-15-05-main h4{margin:0 0 4px;font-size:14px;color:#2b2b2b;font-weight:800}
.d01-15-05-drop{display:flex;gap:8px;align-items:flex-start}
.d01-15-05-letter{font-size:30px;line-height:.85;font-weight:800;color:#e76f51}
.d01-15-05-lines{flex:1;display:flex;flex-direction:column;gap:6px;padding-top:4px}
.d01-15-05-line{height:7px;border-radius:4px;background:#ece5da}
.d01-15-05-line.w95{width:95%}
.d01-15-05-line.w92{width:92%}
.d01-15-05-line.w90{width:90%}
.d01-15-05-line.w88{width:88%}
.d01-15-05-line.w85{width:85%}
.d01-15-05-line.w82{width:82%}
.d01-15-05-line.w80{width:80%}
.d01-15-05-line.w78{width:78%}
.d01-15-05-line.w75{width:75%}
.d01-15-05-line.w70{width:70%}クラス名 .d01-15-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。