[CSS]ちょっと面白いMedia Queriesの使い方 -表示サイズで異なるメッセージを表示するテクニック

CSS3のMedia Queriesはユーザーの環境（サイズなど）に合わせて最適なレイアウトを提供するのに使用することが多いと思いますが、ちょっと変わった面白い使い方を紹介します。

How to Create Stunning Effects With 165 Media Queries or Less!

[ad#ad-2]

• デモ
• 実装

デモ

まずは、そのテクニックが使用されているサイトからご紹介。

ArleyM.com：幅1200pxで表示

ArleyM.comはCSS-Tricksの個人サイトで、Media Queriesが使用されているのでサイズを変更してみてください。

表示サイズを変更すると、下部のメッセージ「BE なんとか」が変わります。
メッセージのパターンは165種類、Media Queriesが165個セットされてますｗ

ArleyM.com：幅800pxで表示

ArleyM.com：幅480pxで表示

[ad#ad-2]

実装

「BE なんとか」のメッセージは、「BE」だけ固定で、「なんとか」はMedia Queriesと擬似要素を使用して配置しています。

HTML

h2要素をdiv要素で内包したシンプルな実装です。

<div class="row">
  <h2>Be <span></span></h2>
</div>

空のspan要素はCSSでコンテンツをレンダリングするために使用します。

CSS

Media Queriesをセットし、span要素の擬似要素を使って、単語を配置します。

@media (max-width: 980px) {
  .row h2 span:after { content: 'Unusual.' }
}

デモでは165のMedia Queriesが設定されており、サイズを実際に変えて見ると面白いです。

デモページ：1200pxで表示

デモページ：ソース表示