HTMLとCSSでチェックリストを作る

ウェブサイトで、チェクリスト風のリストを見る機会が多いと思います。
これを画像で作ることが、多いと思います。
今回は、HTMLとCSSで、レスポンシブデザイン対応で作りました。
このリストは、Shopifyのオンラインストアのテーマカスタマイズで作ったものです。
このコードを汎用的に使えるように、コンテンツを伏せ文字にして、公開します。

<style>
  .it_txt {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-basis: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .it_chk_midashi {
    text-align: center;
    margin-left: aito;
    margin-right: auto;
  }

  .it_chk_midashi p {
    padding: 0px;
    margin: 0px;
  }

  .it_chk_midashi h2 {
    padding-top: 0px;
    margin-top: 0px;
  }

  @media screen and (max-width: 768px) {
    .it_container_chk {
      width: 100%;
    }

    .it_txt {
      width: 75%;
      font-size: 10px;
    }

    .it_txt_p {
      width: 80%;
      margin-top: 10px;
      margin-bottom: 10px;

      flex-grow: 0;
      /* word-wrap: break-word; */
    }

    .it_chk_img {
      width: 40px;
      flex-grow: 0;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .it_chk_img img {
      width: 40px;
      vertical-align: middle;
      /* vertical-align:bottom; */
    }

    .it_chk_midashi h2 {
      font-size: 1.5em;
    }

    .it_chk_midashi h2 {
      font-size: 2em;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .it_container_chk {
      padding-left: 10px;
      padding-right: 10px;
      margin-left: auto;
      margin-right: auto;
    }
    /* ここに画面幅が768pxから1100pxのときのスタイルを記述 */
    .it_txt {
      width: 70%;
      font-size: 22px;
    }

    .it_txt_p {
      width: 90%;
      margin-top: 10px;
      margin-bottom: 10px;

      flex-grow: 0;
      /* word-wrap: break-word; */
    }

    .it_chk_img {
      width: 55px;
      flex-grow: 0;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .it_chk_img img {
      width: 55px;
      vertical-align: middle;
      /* vertical-align:bottom; */
    }

    .it_chk_midashi p {
      font-size: 2.5em;
    }

    .it_chk_midashi h2 {
      font-size: 4em;
    }
  }

  @media screen and (min-width: 1200px) {
    .it_container_chk {
      width: 1100px;
      padding-left: 50px;
      padding-right: 50px;
      margin-left: auto;
      margin-right: auto;
    }

    .it_txt {
      font-size: 2em;
    }

    .it_txt_p {
      width: 920px;
      margin-top: 10px;
      margin-bottom: 10px;

      flex-grow: 0;
      /* word-wrap: break-word; */
    }

    .it_chk_img {
      width: 80px;
      flex-grow: 0;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .it_chk_img img {
      width: 80px;
      vertical-align: middle;
      /* vertical-align:bottom; */
    }

    .it_chk_midashi p {
      font-size: 3em;
    }

    .it_chk_midashi h2 {
      font-size: 4em;
    }
  }

  .it_br {
    display: inline-block;
  }
</style>

<div class="it_chk_midashi">
  <p>説明</p>
  <h2 class="it_font_t8">強調文字</h2>
</div>
<div class="it_containr_chk">
  <div class="it_txt">

    <div class="it_chk_img">
      <img src="チェックボックスの画像のURL" alt="チェックボックス" /></div>
    <div class="it_txt_p">掲載したい文字</div>

  
  </div>
</div>

リストを繰り返す

下記のコードを、リストして掲載したい項目の数だけコピーして使ってください。

    <div class="it_chk_img">
      <img src="チェックボックスの画像のURL" alt="チェックボックス" /></div>
    <div class="it_txt_p">掲載したい文字</div>

文字を折り返し表示できます。

チェックボックスの画像の後ろに、項目を表示できます。
項目の文字が長い場合は、チェックボックスの画像の右側で折り返して表示できます。

カスタムHTMLやカスタムliquidで設置を想定

CSSの部分とHTMLを一緒に掲載するしたので、styleタグでCSSを囲んでいます。
CSSは、使いやすいように、配置してください。

CSSの接頭語は、変えてください。

it_という形で書いているのは、接頭語です。
書いた人を分かるようにしたり、他のプラグインやテーマなどのコードを競合しないように、接頭語を工夫しています。
この接頭語は、適宜書き換えて使ってください。

このコードを使って損害が生じても責任は、取れません。

このコードは、自己責任で使ってください。
私は、このコードを使ってことで損害が生じても責任を負うことはできません。