CSSによる装飾

CSSで-webkit-tap-highlight-color: transparentを設定するとタップしたときの灰色が消える...

CSS デザインで参考になるサイト一覧。この記事は毎年更新されます。 3,000 以上のサイト・メディアをチェックし、最もすばら...

Sass の calc で変数を使うときは、その変数をシャープのフォーマットに入れる。 ``` $width: 200px $h...

ほとんどのブラウザは not などの擬似クラスを認識するが、多くのメールアプリは擬似クラスを無視する（2020 年 6 月時点）...

背景が白く、輪郭が青のボタン。著作権フリー。 button { background: 3075e5; border-...

HTML のタグに class を複数入れたときは次のようにします。 ```html <p class="post test">...

スマホアプリやカルーセル UI でよく見かける「ピタッと止まるスクロール」は、CSS の scroll-snap プロパティだけ...

ボタンやリンクをクリックしたとき、青いアウトラインが表示されて気になったことはないでしょうか。見た目を整えるために outlin...

スクロールに連動して要素がフェードインしたり、プログレスバーが伸びたりする演出は、これまで JavaScript の Inter...

カード UI やニュース一覧で、長いテキストを 2〜3 行だけ表示して末尾を「…」で省略する処理はよく使われます。1 行の省略な...

フォントには、文字同士の間隔を自動調整するカーニングや、複数の文字を 1 つにまとめる合字（リガチャ）といった高度な組版機能が埋...

CSS アニメーションのパフォーマンスを改善する手段として will-change がよく紹介されます。ブラウザに「この要素はこ...

モーダルを開いた状態で背景がスクロールしてしまう、ページの端まで来たのにゴムのように引っ張られる――こうした挙動に悩まされた経験...

モーダルを開いた状態で背景がスクロールしてしまう、ページの端まで来たのにゴムのように引っ張られる――こうした挙動に悩まされた経験...

見出しやカードのタイトルなど、短めのテキストブロックで最終行だけ極端に短くなってしまうことがあります。たとえば 3 行の見出しで...

Web アプリでページを切り替えるとき、画面がパッと切り替わるだけだと唐突な印象を受けます。ネイティブアプリでは画面遷移にスライ...

フォームの `<input>` や `<textarea>` は、デフォルトではブラウザが決めた固定サイズで表示されます。ユーザ...

`display: none` から `display: block` に切り替えたとき、要素がパッと表示されるだけでアニメーシ...