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

Post on:2026年4月2日

sponsorsr

CSSのさまざまな古い書き方をモダンCSSやTailwinds CSSでどう書くのか教えてくれるサイトを紹介します。

要素を中央配置するCSSをはじめ、スクロールバーの出現によるレイアウトシフトを防ぐCSS、HEX値やrgb()値より鮮やかなoklch()による色設定、JavaScriptを使わずにアニメーションで高さを変更するCSSなど、よく使用するCSSのテクニックが満載です。

モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css

Modern CSS Code

サイトのトップに「2015年のようなCSSを書くのはやめましょう」とあるように、modern.cssはCSSの古い書き方をクリーンでネイティブなモダンCSS、そしてTailwinds CSSでどのように記述するのかを解説しているサイトです。

modern.css

サイトにはたくさんのCSSスニペットが収録されており、その中からいくつか紹介します。

先日の記事で、CSSで要素を中央に絶対配置する新しい記述方法を紹介したので、gridを使った中央配置の記述方法から。

CSSで要素を中央に配置する方法

まずは、古いCSSから。
要素を中央に配置するCSSはいろいろありますが、古い代表といえばtransformを使ったやり方です。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

要素を中央に配置するのは、モダンCSSだと簡単です。子要素のCSSは必要ありません。

.parent {
  display: grid;
  place-items: center;
}

.parent {

display: grid;

place-items: center;

}

逆に親要素にはCSSを記述できず、子要素だけで中央に配置したいときもあると思います。そんな時はFluffy Centerで実装できます。

モダンCSSで記述するだけでなく、Tailwinds CSSでどのように記述するかも分かります。

Tailwinds CSSだと中央配置は、下記の通りです。

<div class="grid place-items-center">
  <div>Content</div>
</div>

<div>Content</div>

</div>

コードの下には、サポートブラウザとデモも掲載されています。
Chrome 57+, Edge 16+, Safari 10+, Firefox 52+なので、ほぼ問題ないでしょう。

CSSで要素を中央に配置する方法のサポートブラウザとデモ

他にもたくさんの事例が掲載されています。
コンテンツがスクロールできる高さになると、垂直スクロールバーが表示され、スクロールバーの幅分レイアウト領域が狭くなります。

スクロールバーの出現によるレイアウトシフトを防ぐ

まずは、古いCSSから。
CSSのみで解決することはほぼ不可能で、完全に解決するためにはJavaScriptでスクロール幅を取得する方法がベストでした。

/* オプション 1: 常にスクロールバーを表示する */
body { overflow-y: scroll; }
/* オプション2: スクロールバーの幅をハードコードする */
body { padding-right: 17px; }
/* ただしスクロールバーの幅はOSやブラウザによって異なります */

/* オプション 1: 常にスクロールバーを表示する */

body { overflow-y: scroll; }

/* オプション2: スクロールバーの幅をハードコードする */

body { padding-right: 17px; }

/* ただしスクロールバーの幅はOSやブラウザによって異なります */

これはモダンCSSだと簡単に解決します。