Flexboxを使ったECサイト向けパーツ

HTML&CSS

ECサイトなどで見かける商品別のブロックをFlexboxを使って作成するサンプルです。
参考にしたのはこちらのページです。Some Inspiration for Pricing Tables
折角Flexboxを使っているので、少し応用してみました。

サンプル１
3カラムになったブロックの中央がお勧め商品になっています。目立ち効果を上げるためにシェフのお勧めのスタンプを付けています。HTMLのコーディングではお勧め商品を最上段に持ってきてコーディングしていますが、CSSで見た目を変えています。このような場合もFlexboxを使用して、orderプロパティを使うことで簡単に表示位置を変えることができます。

また、ブロックの中の画像も「見だし」→「画像」→「価格」→「説明文」の順番に表示されていますが、HTMLのコーディングでは「見だし」→「価格」→「説明文」→「画像」の順番になっています。これもorderプロパティを使うことで実現しています。

仕掛けとしてマウスが重なったブロックはボーダーの色を変えるようになっています。

HTMLコード

<h1> Pricing Tables サンプル</h1>
<section class="pricing-section">
            <h2 class="pricing-section__title">贈答用饅頭</h2>
            <div class="pricing__wrapper pricing--simple">
                <div class="pricing__item first">
                    <h3 class="pricing__title">特選饅頭【まんじゅう】</h3>
                    <div class="pricing__price"><span class="pricing__currency">価格</span> 2800<span class="pricing__currency">円(税込) 送料別</span></div>
                    <p class="pricing__sentence">和菓子の巨匠の自信作</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">内容量：20個</li>
                        <li class="pricing__feature">通常は4営業日以内に発送いたします。</li>
                        <li class="pricing__feature">賞味期限は製造後20日です。</li>
                        <li>【3,000円で送料無料！】</li>
                    </ul>
                    <img class="pricing__image" src="http://lorempixel.com/300/300/food/" alt="">
                    <button class="button pricing__action">買い物かごに入れる</button>
                </div>
                <div class="pricing__item second">
                    <h3 class="pricing__title">いつもの饅頭【まんじゅう】</h3>
                    <div class="pricing__price"><span class="pricing__currency">価格</span> 1800<span class="pricing__currency">円(税込) 送料別</span></div>
                    <p class="pricing__sentence">毎日食べたくなる甘さ控えめ</p>
                   <ul class="pricing__feature-list">
                        <li class="pricing__feature">内容量：20個</li>
                        <li class="pricing__feature">通常は4営業日以内に発送いたします。</li>
                        <li class="pricing__feature">賞味期限は製造後20日です。</li>
                        <li>【3,000円で送料無料！】</li>
                    </ul>
                    <img class="pricing__image" src="http://lorempixel.com/300/300/food/" alt="">
                    <button class="button pricing__action">買い物かごに入れる</button>
                </div>
                <div class="pricing__item third">
                    <h3 class="pricing__title">季節の饅頭【まんじゅう】</h3>
                    <div class="pricing__price"><span class="pricing__currency">価格</span> 2500<span class="pricing__currency">円(税込) 送料別</span></div>
                    <p class="pricing__sentence">季節の味をお届けします</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">内容量：20個</li>
                        <li class="pricing__feature">通常は4営業日以内に発送いたします。
                        <li class="pricing__feature">賞味期限は製造後20日です。</li>
                        <li>【3,000円で送料無料！】</li>
                    </ul>
                     <img class="pricing__image" src="http://lorempixel.com/300/300/food/" alt="">
                    <button class="button pricing__action">買い物かごに入れる</button>
                </div>
            </div>
        </section>

CSSコード

@charset "utf-8";

html {
    font-size: 62.5%;
}

body {
    background: #fff;
    color: #333;
    text-align: center;
    font-size: 1.4rem;
    font-family: "Helvetica Neue", Helvetica, Arial,  "Hiragino Kaku Gothic ProN", Meiryo,sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.pricing-section {
    padding: 40px 0;
}

.pricing__wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin: 60px auto;
}

.pricing__item {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  text-align: center;
  -webkit-flex: 0 1 330px;
  flex: 0 1 330px;
}

.pricing__feature-list {
  text-align: left;
}

.pricing__item{
    border: 1px solid #333;
    margin-right: 10px;
}

.pricing__image {
    display: block;
    width: 100%;
    order:-1;
}

.pricing-section__title {
  font-size: 2.4rem;
  font-weight: bold;
  margin: 3rem 0 5rem;
  flex: none;
}

.pricing-section a {
  color: #333;
}

.pricing-section a:hover, 
.pricing-section a:focus {
  color: #000;
}

.pricing--simple .pricing__item {
  margin: 1em;
  padding: 2em 2.5em;
  text-align: left;
  color: #262b38;
  background: #EEF0F3;
  border-top: 3px solid #EEF0F3;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
}

.pricing--simple .pricing__item:hover {
  border-color: #E29401;
}

.pricing__title {
  font-size: 1.6rem;
  margin: 0 0 1em;
  order:-2;
}

.pricing__price {
  font-size: 2.5rem;
  text-align: right;
  padding: 10px;
  border-top: 3px solid rgba(139, 144, 157, 0.18);
}

.pricing__currency {
  font-size: 0.5em;
  vertical-align: baseline;
}

.pricing__sentence {
  font-weight: bold;
  padding: 0 0 0.5em;
  color: #333;
  border-bottom: 3px solid rgba(139, 144, 157, 0.18);
}

.pricing__feature-list {
  font-size: 1.4rem;
  margin: 0;
  padding: 0.25em 0 2.5em;
  list-style: none;
  text-align: right;
  color: #333;
}

.first{
  order:2;
}

.second{
  order:1;
}
.third{
  order:3;
}

.pricing--simple .first::after {
  background: url(stamp.png) no-repeat;
  transform: rotate(30deg);
  content: '';
  position: absolute;
  top: 20px;
  right: -40px;
  width: 200px;
  height: 100px;
  pointer-events: none;
}

.pricing--simple .pricing__action {
  font-weight: bold;
  margin-top: auto;
  padding: 1em 2em;
  color: #fff;
  border-radius: 30px;
  background: #E29401;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.pricing--simple .pricing__action:hover,
.pricing--simple .pricing__action:focus {
  background-color:gold;
}

サンプル２
こちらもFlexboxを使って作成したサンプルです。基本的な考え方はサンプル１と同じですが、中央のお勧め商品についてはブロックのサイズを大きくして目立ち効果を上げているのが特徴です。

HTMLコード

<h1> Pricing Tables サンプル</h1>
<section class="pricing-section">
            <h2 class="pricing-section__title">贈答用饅頭</h2>
            <div class="pricing__wrapper pricing--pema">
                <div class="pricing__item first">
                    <h3 class="pricing__title">特選饅頭【まんじゅう】</h3>
                    <div class="pricing__price"><span class="pricing__currency">価格</span> 2800<span class="pricing__currency">円(税込) 送料別</span></div>
                    <p class="pricing__sentence">和菓子の巨匠の自信作</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">内容量：20個</li>
                        <li class="pricing__feature">通常は4営業日以内に発送いたします。</li>
                        <li class="pricing__feature">賞味期限は製造後20日です。</li>
                        <li>【3,000円で送料無料！】</li>
                    </ul>
                    <img class="pricing__image" src="http://lorempixel.com/300/300/food/" alt="">
                    <button class="button pricing__action">買い物かごに入れる</button>
                </div>
                <div class="pricing__item second">
                    <h3 class="pricing__title">いつもの饅頭【まんじゅう】</h3>
                    <div class="pricing__price"><span class="pricing__currency">価格</span> 1800<span class="pricing__currency">円(税込) 送料別</span></div>
                    <p class="pricing__sentence">毎日食べたくなる甘さ控えめ</p>
                   <ul class="pricing__feature-list">
                        <li class="pricing__feature">内容量：20個</li>
                        <li class="pricing__feature">通常は4営業日以内に発送いたします。</li>
                        <li class="pricing__feature">賞味期限は製造後20日です。</li>
                        <li>【3,000円で送料無料！】</li>
                    </ul>
                    <img class="pricing__image" src="http://lorempixel.com/300/300/food/" alt="">
                    <button class="button pricing__action">買い物かごに入れる</button>
                </div>
                <div class="pricing__item third">
                    <h3 class="pricing__title">季節の饅頭【まんじゅう】</h3>
                    <div class="pricing__price"><span class="pricing__currency">価格</span> 2500<span class="pricing__currency">円(税込) 送料別</span></div>
                    <p class="pricing__sentence">季節の味をお届けします</p>
                    <ul class="pricing__feature-list">
                        <li class="pricing__feature">内容量：20個</li>
                        <li class="pricing__feature">通常は4営業日以内に発送いたします。
                        <li class="pricing__feature">賞味期限は製造後20日です。</li>
                        <li>【3,000円で送料無料！】</li>
                    </ul>
                     <img class="pricing__image" src="http://lorempixel.com/300/300/food/" alt="">
                    <button class="button pricing__action">買い物かごに入れる</button>
                </div>
            </div>
        </section>
</body>

CSSコードはサンプル１のCSSに以下を追加します。
CSSコード

/*pema*/
.pricing--pema .pricing__item {
  padding: 2em 3em;
  margin: 1em;
  color: #262b38;
  background: #fff;
  cursor: default;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

@media screen and (min-width: 66.250em) {
  .pricing--pema .pricing__item {
    margin: 1.5em 0;
  }
  .pricing--pema .pricing__item--featured {
    z-index: 10;
    margin: 0;
    font-size: 1.15em;
  }
}

.pricing--pema .pricing__title {
  font-size: 1.8rem;
  margin: 0.5em 0 0;
  color: #1d211f;
}


.pricing--pema .first {
  font-size: 1.4rem;
  margin: 0;
  padding: 1.5em 0.5em 2.5em;
  list-style: none;
}

.pricing--pema .pricing__action {
  font-weight: bold;
  margin-top: auto;
  padding: 1em 2em;
  color: #fff;
  border-radius: 5px;
  background: #804000;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.pricing--pema .pricing__action:hover,
.pricing--pema .pricing__action:focus {
  background-color: #4F5F56;
}
スポンサーリンク
タイトルとURLをコピーしました