とろろこんぶろぐ

かけだしR&Dフロントエンジニアの小言

2020-03-01から1ヶ月間の記事一覧

画像をタイル上に並べる方法

概要 サイズの異なる画像をタイル上に並べる際に、 column-gap と column-count が使えるということを知ったのでメモ。 タイル上と言っているのはこんな感じ↓の画像の配置のこと。 本記事の内容は下記のページの焼き直し。 css-tricks.com HTML + JS 下記は …

HTML+CSSで右上に三角のラベルをつける方法

概要 あるコンポーネントの右上にラベルやバッジをつけるHTML/CSSの書き方を学んだので備忘。 もっと良い方法がある場合は教えて欲しい。 サンプルは以下のようなもの。 HTML HTMLでは親のDOM(class: badge)に、 - 三角形を描くDOM(class: triangle)と、…