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.
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design
@cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
