tableタグを使わずにテキストを等間隔に配置する方法【CSS】 - チョッピーデイズ - EC事業支援・ECサイト立ち上げ・Webマーケティング・SEO・ホームページ制作・Web開発・アプリ開発・コーチングチョッピーデイズ

テキストを等間隔に配置

例えばコロンで要素を区切り、コロンまでの長さを揃えたい場合のCSSです。

tableタグを使えばすぐにできますが、tableタグを使わずにリスト形式の

見出し：値

という表現をする場合の、コロンまでの長さを均等に配置するCSSです。

tableタグを使わずにテキストを等間隔に配置するCSS

CSS

.list p{
    background: #f9f6f3;
    padding: 10px;
}
.list .col {
    display: inline-block;
    width: 120px;
    line-height: 19px;
}

HTML

     <div class="list">
        <p>
          <span class="col">熱量</span>：347kcal<br>
          <span class="col">たんぱく質</span>：10.8g<br>
          <span class="col">脂質</span>：5.9g<br>
          <span class="col">炭水化物</span>：27.6g<br>
          <span class="col">食塩相当量</span>：11.2g
        </p>
      </div>

コロンまでの長さを .col でスタイルを定義し、コロンの前の要素を .colで定義します。