更新日:2020/06/28列が2つだけのシンプルなテーブルを書くときは、tableタグではなくdlタグ(定義リスト)を使うという方法がありますですが、dlタグでテーブルっぽい見た目にしようとfloatやらpadding-leftやらでがんばって整形してもdt(見出し)の高さとdd(内容)の高さが合わないdtの内容を、ddの高さに合わせて中央揃えしたいといった問題で毎回悩んでしまいますそこで、これらの問題を解決しつつ、かつコードがわかりやすい、かつレスポンシブ表示も大丈夫。仕組み、解説、補足などflexboxを使うと、簡単に要素を横並びにすることができ、なおかつ、並んだ要素の高さは揃いますし、中央揃えもばっちり決まりますモバイル表示モバイル表示時には見出しと内容を縦並びにしてレスポンシブ対応します変更履歴2020/6/28モバイル表示用のCSSを微修正、キャプチャー画像を追加しました2020/3/92020/3/9:導入文にありました下記一文を削除しました(筆者の理解不足による誤った説明となっていたため)シンプルな2列のテーブルを書くとき、dlタグを使った定義リストにするのがセマンティックな書き方になりますご質問など受け付けています記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。お問い合わせクリップボードにコピーしました当サイトについて。