[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS
Post on:2016年6月10日
sponsors
レスポンシブ対応のWebページを制作する時に「Media Queries」を使用する人は多いでしょう。Media Queriesはメディア、いわゆるデバイスの幅や高さや解像度や種類に基づいて、スタイルを定義できます。
ここで紹介する「EQCSS」はElement Queries、要素に基づいてスタイルを定義できる単体のスクリプトです。要素の幅や高さ、子要素の数、文字数や行数など、コンテンツの異なる状態によってレスポンシブな条件を定義することができます。
EQCSSのデモ
デモでは、要素の幅や高さ、子要素の数、文字数や行数など、コンテンツの異なる状態によってレスポンシブな条件を定義しています。
デモページ: minwidth(px and %)
要素の最小幅・最大幅に対して、スタイルを定義できます。
幅が小さい時はアイコンにするとかもOKです。
デモページ: minheight(px and %)
要素の最小の高さ・最大の高さに対して、スタイルを定義できます。
高さにも設定できるのは、コンテンツ量によるいろいろなことができるので重宝しますね。
デモページ: minchildren(max)
子要素の最小数・最大数に対して、スタイルを定義できます。
サムネイルが3つだったら、5つだったらで、スタイルを変更できます。
どんな表示サイズでもアスペクト比を維持させます。
vhに対してヘッダが固定表示されるように設定されています。
コンテンツのサイズや数やレイアウトなどが、スクリーンサイズに最適に表示されます。
スクロールの最小量と最大量に、パネル表示のトリガーが設定されています。
EQCSSの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
JSファイルはCDNでも用意されています。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src=EQCSS.js></script> </body> |
IE8をサポートする必要がある場合は、下記も加えます。
|
1 |
<!--[if lt IE 9]><script src="EQCSS-polyfills.js"></script><![endif]--> |
Step 2: EQCSS
EQSCCをHTMLページに使えるようにするには、2つの方法があります。もっとも簡単なのはstyleやlink要素のCSSの中に書くことで、もう一つはscript要素でEQCSSを定義することもできます。
|
1 |
<script type="text/eqcss" src=styles.eqcss></script> |
これを使うことで、下記のようにCSSから分けて記述することができます。
|
1 2 3 4 5 |
<script type="text/eqcss"> /* EQCSS goes here */ </script> |
Step 3: 要素に指定
HTMLはセレクタを与えるだけで、あとはEQCSSで指定します。
|
1 2 3 |
<div class="minwidthpixels"> ... </div> |
要素をセレクタで指定し、クエリを定義し、適用したいスタイルを記述します。
|
1 2 3 4 5 |
@element ".minwidthpixels" and (min-width: 500px) { .minwidthpixels { background: gold; } } |
sponsors
