[JS]コンテンツに応じたレスポンシブデザイン!要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS

レスポンシブ対応のWebページを制作する時に「Media Queries」を使用する人は多いでしょう。Media Queriesはメディア、いわゆるデバイスの幅や高さや解像度や種類に基づいて、スタイルを定義できます。

ここで紹介する「EQCSS」はElement Queries、要素に基づいてスタイルを定義できる単体のスクリプトです。要素の幅や高さ、子要素の数、文字数や行数など、コンテンツの異なる状態によってレスポンシブな条件を定義することができます。

サイトのキャプチャ

EQCSS
EQCSS -GitHub

EQCSSのデモ

デモでは、要素の幅や高さ、子要素の数、文字数や行数など、コンテンツの異なる状態によってレスポンシブな条件を定義しています。

サイトのキャプチャ

デモページ: minwidth(px and %)

要素の最小幅・最大幅に対して、スタイルを定義できます。
幅が小さい時はアイコンにするとかもOKです。

サイトのキャプチャ

デモページ: minheight(px and %)

要素の最小の高さ・最大の高さに対して、スタイルを定義できます。
高さにも設定できるのは、コンテンツ量によるいろいろなことができるので重宝しますね。

サイトのキャプチャ

デモページ: minchildren(max)

子要素の最小数・最大数に対して、スタイルを定義できます。
サムネイルが3つだったら、5つだったらで、スタイルを変更できます。

サイトのキャプチャ

Responsive Aspect Ratio

どんな表示サイズでもアスペクト比を維持させます。

サイトのキャプチャ

Sticky Scroll Header

vhに対してヘッダが固定表示されるように設定されています。

サイトのキャプチャ

Responsive Content Demo

コンテンツのサイズや数やレイアウトなどが、スクリーンサイズに最適に表示されます。

サイトのキャプチャ

Scroll-triggered Flyout Demo

スクロールの最小量と最大量に、パネル表示のトリガーが設定されています。

EQCSSの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。
JSファイルはCDNでも用意されています。

IE8をサポートする必要がある場合は、下記も加えます。

Step 2: EQCSS

EQSCCをHTMLページに使えるようにするには、2つの方法があります。もっとも簡単なのはstyleやlink要素のCSSの中に書くことで、もう一つはscript要素でEQCSSを定義することもできます。

これを使うことで、下記のようにCSSから分けて記述することができます。

Step 3: 要素に指定

HTMLはセレクタを与えるだけで、あとはEQCSSで指定します。

要素をセレクタで指定し、クエリを定義し、適用したいスタイルを記述します。

top of page

©2017 coliss