【第3弾】少しのコードで実装可能な15のCSS小技集

2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応

[taky1973]

IE、Edge だけでなく、Safari も結構非対応。ガックシ

[Mattsun39]

JavaScriptからCSSへの置き換えは、いろんな場面で役立ちそうですね！

[babandoned]

“※ IE非対応”

[primedesignworks]

IE 非対応の多さ。MS はブラウザを作るセンスがない。

[aceraceae]

実用性がある小技。

[rryu]

この辺のプロパティ普通に使えるようになってきたのかと思ったら、IE、Edge非対応の多さよ…

[tsuki-rs]

めちゃめちゃいい！けど、IEで使えないものもあって、早くIEなくなってほしい。

[north_korea]

iOSで一切動かない

[nzxx]

思ったんだけどさ、IE死んでくれないかな

[kikuchi1201]

こういうの助かる

[fukurow57]

互助会風ブコメが妙に多い。気のせいかな？

[ginori446699]

わたしもやってみよう

[trashtoy]

ごく最新のものから CSS2 時代の仕様でできるテクニックまで

[makoto-itimonji]

参考になりました👍

[pri_light]

CSSでいつの間にかこんなことが出来るようになっとったんじゃのう。進化したもんじゃ。

[deokisikun]

ウッヒョー！勉強になりますわー

[ksaito54]

これはめちゃくちゃ良いのでは？　と思えた。ということで保存。

[trini]

これ！スクロールすると要素を固定は使ってみたいな

[rrttaa]

“table-layout: fixed;”, display=swap, grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

[kns_1234]

“object-fit: cover;” はよく使いますね。

[c-miya]

スムーズスクロール知らなかった。

[tikusieg]

必死のJS調整からの開放“scroll-behavior: smooth;”

[style_blue]

ほほーこれは使えそう。スクロールスナップするコンテンツ作ってみたい。しましまのライン今度試してみよ。円形回り込みも何かでやってみたいかも。

[kathew]

ブラウザの対応状況は見ておかないとだけど、（IEでも）使えるものは使っていこう

[tkmkg8m]

calc() が便利すぎて乱用されてるんじゃが

[mayumayu_nimolove]

素敵。ってかIE非対応が多くてさらに素敵。

[fz6]

メモ

[h1t0cH1]

ありがたい

[mami-hate]

しましまのライン

[sima-box]

CSSの小技