エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CSSだけでリストや横並びの区切り線を実現するパターン4つ | Cappee Design
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
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.