Kiroku
Archive ready

そのCSSの書き方は古すぎる！ モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css | コリス

https://coliss.com/articles/build-websites/operation/css/modern-css-code.html
April 2, 2026 at 09:39 AM JSTThe archive page, viewer, and downloads use this saved version.
April 2, 2026 at 09:39 AM JST·coliss.com

The evidence pack includes HTML, screenshots, summaries, and metadata. It can be downloaded on Pro.

Saved page

そのCSSの書き方は古すぎる！ モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css | コリス

Open the archived HTML with saved-time metadata attached.

Original URLhttps://coliss.com/articles/build-websites/operation/css/modern-css-code.html
StartedApril 2, 2026 at 09:39 AM JST

This HTML has CSS and images embedded, so it can still be opened even if the original page disappears.

About this pageAI generated

This page introduces 'modern.css,' a site demonstrating how to write outdated CSS using modern CSS and Tailwinds CSS. It covers practical techniques like element centering, preventing layout shifts from scrollbars, using oklch() for vibrant colors, and height animation without JavaScript. Each example compares legacy CSS with modern approaches and Tailwinds CSS implementations. The site provides browser support information and demos, helping developers transition from outdated CSS practices to cleaner, native modern CSS standards.

Screenshot
そのCSSの書き方は古すぎる！ モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css | コリス - Saved screenshot

The full page can be captured up to 15,000px in height so you can review the complete page layout when needed.