2021.02.23  

CSSで商品一覧をつくる(コピペ用テンプレ有り)

HTML/CSS    

CSSでオーディオブックの商品一覧を作りたいと思い、気軽な気持ちでコードを書き始めたものの、意外に苦労したのでテンプレを公開することにしました。

今回作成した商品一覧はこちらです。
以下の例では3件分を表示していますが、テンプレを使えば件数を無限に増やすことができます。



商品説明欄についてはこのテンプレで作成していませんが、商品枠の下に説明分を記述するとそれらしくなります。
そのように作成したものが以下リンク先の記事です。

ランニングが楽しくなるオーディオブックのすすめ

コピペ用ソースコード

こちらにソースを記載しました。コピペするだけで使用できるようにしています。(※)
ご自由にお使いください。
設定値については適宜修正してください。

(※)コピペ先のhtml、CSSソースに影響が無いよう、全てのタグにclass名を振ってありますが、それでもclass名がコピペ先と被ると、思わぬ動きをするので注意してください。

下記コメント「1.記事全体を表示する領域。~」の部分は商品一覧を含む他の記事を記入する領域を想定し、ひとまず横700pxを確保していますが、不要でしたら削除してください。

<!-- 商品紹介 HTML -->

<!-- 1.記事全体を表示する領域。サイトにより書き換え,もしくは削除する -->
<div class="book-site-frame">

<!-- 2.枠線部分(グレー) -->
<div  class="border-gray">
<!-- 3.枠線内をクリックすると販売元に飛ぶ-->
    <a class="book-list" href="商品リンク">
        <!-- 4. 商品画像の表示-->
        <div class="book-img-block">
            <img  src="商品リンク">
        </div>
        <!-- 5. 商品名、著者名、ナレーターの表示-->
        <div class="book-text-block">
            <!-- h6部分は記事構成により番号の書き換え可能-->
            <h6>商品名</h6>
            <p>著者名、ナレーター名</p>
        </div>
    </a>
</div>

</div>
/* 商品紹介 CSS*/

/* 1.記事全体を表示する領域。サイトにより書き換え,もしくは削除する*/
.book-site-frame {
    width: 700px;
}

/* 2.枠線部分(グレー) */
.border-gray {
   display:block;
   border: solid 1px #CCC;
   width: auto;
   margin: 5px;
}

/* 3. 枠線内をクリックすると販売元に飛ぶ */
a.book-list {
   display: flex;
   color: #666666;
   padding: 10px;
}

/* 3. 枠線内をクリックすると販売元に飛ぶ */
a.book-list :hover{
   text-decoration:none;
   color: #B19956;
}

/*  4.1. 商品画像の表示 */
.book-img-block {
   display:inline-block;
   margin-right: 10px;
}

/*  4.2. 商品画像の表示 */
.book-img-block img {
  width: 80px;  /* 適宜画像サイズを調整する */
}

/* 5. 商品名、著者名、ナレーターの表示 */
.book-text-block {
   display:inline-block;
}

/* 5. 商品名の表示 */
.book-text-block h1, h2, h3, h4, h5, h6 {
   font-size: 17px;
   font-weight: bold;
   margin: 10px 0;
}

/* 5. 著者名、ナレーターの表示 */
.book-text-block p {
   margin: 0px;
   line-height: 1.1em;
   word-break: normal;
}




参考資料
・pタグのテキストを折り返す方法
https://creive.me/archives/17653/#CSSword-breakoverflow-wrap

・【CSS】displayの使い方を総まとめ!inlineやblockの違いは
https://saruwakakun.com/html-css/basic/display

コメント
現在コメントはありません。
コメントする
コメント入力

名前 (※ 必須)

メールアドレス (※ 必須 画面には表示されません)

送信