← 静的パーツギャラリーへ戻る

パーツ番号 01-15-05 ・ CSSのみ

画像固定+テキスト流し込みの雑誌風2カラム

左の写真パネルを固定し、右側の記事テキストだけを縦にスクロールさせる雑誌のような構成です。WordPressの特集記事やインタビューページの導入部に向きます。

staticcss

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。