【CSSコピペ】2列の表を作る方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、CSSで2列の表を作る方法をご紹介します。

コーポレートサイトのコーディングをする際に必ずと言っていいほど登場する「会社概要ページ」or「特定商取引法に関する法律に基づく表記ページ」で活躍するコピペでOKなリストデザインのサンプルコードともに紹介していきます(^o^)

「毎回毎回リストのコーディングするのめんどくさい、、、！！！」

という方のお役に立てれば幸いです。

それでは参りましょう！

CSSで２列のリストデザインを作ろう！
まとめ

CSSで２列のリストデザインを作ろう！

完成イメージ

実装のポイント

今回の実装のポイントは、

flexを指定して２カラムを表現する
左側のp要素は横幅30%、右側は横幅70%で指定する
１番目のli要素（first-child）以外にborder-topで横線をつける

となります。

コードを見ながら確認していきましょう。

リストのHTML

index.html

<div class="List">
  <div class="List-Item">
    <p class="List-Item-Title">社名</p>
    <p class="List-Item-Text">株式会社〇〇</p>
  </div>
  <div class="List-Item">
    <p class="List-Item-Title">所在地</p>
    <p class="List-Item-Text">〒000-0000 東京都港区〇〇</p>
  </div>
  <div class="List-Item">
    <p class="List-Item-Title">代表取締役</p>
    <p class="List-Item-Text">〇〇〇〇</p>
  </div>
  <div class="List-Item">
    <p class="List-Item-Title">設立</p>
    <p class="List-Item-Text">2020年1月1日</p>
  </div>
  <div class="List-Item">
    <p class="List-Item-Title">資本金</p>
    <p class="List-Item-Text">1,000,000円</p>
  </div>
  <div class="List-Item">
    <p class="List-Item-Title">事業内容</p>
    <ul class="List-Item-Ul">
      <li class="List-Item-Ul-Item">〇〇〇〇</li>
      <li class="List-Item-Ul-Item">〇〇〇〇</li>
      <li class="List-Item-Ul-Item">〇〇〇〇</li>
    </ul>
  </div>
</div>

リストのCSS

index.css

.List {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}
@media screen and (max-width: 540px) {
  .List {
    margin-top: 24px;
  }
}
.List-Item {
  border-top: 1px solid #5bc8ac;
  display: flex;
}
.List-Item:first-child {
  border-top: none;
}
.List-Item-Title {
  width: 30%;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.8;
  font-weight: bold;
  font-size: 15px;
}
@media screen and (max-width: 540px) {
  .List-Item-Title {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}
.List-Item-Text {
  width: 70%;
  padding: 10px;
  line-height: 1.8;
  font-size: 15px;
}
.List-Item-Ul {
  width: 70%;
  padding: 10px;
  line-height: 1.8;
  list-style: none;
  font-size: 15px;
}
@media screen and (max-width: 540px) {
  .List-Item-Text {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .List-Item-Ul {
    font-size: 14px;
  }
}

CSSリストデザインのサンプルコード

コピペで実装できます！

↓↓↓

See the Pen
mdyGvae by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、CSSで2列の表を作る方法をご紹介しました。

今回紹介したスニペットを使って面倒くさいリストデザインコーディングを効率化していきましょう(^o^)

最後までご高覧いただきありがとうございました！