CSSだけでリストや横並びの区切り線を実現するパターン4つ | Cappee Design

あとで読みたい人は… こういったリスト表示はそれぞれの内容がわかりやすいようにたいがい区切り線を使ってデザインしますよね。 縦にリスト表示する区切り線の例 お知らせの一覧 コメントの一覧 横並びで使用する区切り線の例 メニュー一覧 評価項目などの一覧 CSSだけでリスト（一覧）表示や横並びの区切り線を実現する、よく使うデザインのパターン4つをメモしておきたいと思います。どれも特定の部分だけクラスを増やしたりはせず、CSS側の指定だけで実現するCSSです。 目次1. 縦のリスト表示1.1. 外側に上下ボーダーがある区切り線1.2. 外側にボーダーがない区切り線1.2.1. ネガティブマージンを使う1.2.2. 擬似クラス:first-childか:last-childを使う1.2.3. 隣接セレクタを使う2. 横並び2.1. 左右にボーダーがある区切り線2.1.1. border を使う2.