パーツ番号 01-06-07 ・ CSSのみ

左右非対称2カラム

画像側を広く、テキスト側を狭く割り当てた比率の異なる2カラム構成です。WordPressの実績紹介や商品説明で画像を主役にしたい場合に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-07-row">
          <div class="d01-06-07-img"></div>
          <div class="d01-06-07-txt">
            <h4>非対称2カラム</h4>
            <p>画像を広く、テキストを狭く配置した構成です。</p>
          </div>
        </div>

CSS

.prev.d01-06-07{padding:20px}
        .d01-06-07-row{display:flex;width:100%;max-width:260px;align-items:stretch;gap:10px}
        .d01-06-07-img{flex:7;border-radius:6px;min-height:150px;background:linear-gradient(160deg,#2a9d8f,#264653)}
        .d01-06-07-txt{flex:3;display:flex;flex-direction:column;justify-content:center}
        .d01-06-07-txt h4{margin:0 0 6px;font-size:12.5px;color:#2b2b2b;font-weight:700}
        .d01-06-07-txt p{margin:0;font-size:10.5px;line-height:1.7;color:#777}

クラス名 .d01-06-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。