[JS]jQueryも外部CSSも不要!レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js

デスクトップ・タブレット・スマフォ向けのレスポンシブ対応サイトを作成する超軽量(19KB)のスタンドアローンのスクリプトを紹介します。

jQueryなどの他のスクリプトは必要なく、外部スタイルシートも必要ありません。
※ページの各エレメントの装飾にはCSSを用意してください。

デモのキャプチャ

skel.js

skel.jsの特徴

skel.jsはjQueryなどの他のライブラリや外部スタイルシートを用意しないで、レスポンシブ用のページが簡単に作成できます。

サイトのキャプチャ
  • スタンドアローンで動作する19KBの超軽量スクリプト。
  • さまざまなレイアウトに対応できるグリッド。
  • 表示サイズごとのブレイクポイントの設定も簡単。
  • resetやbox-modelなどの有用なCSSのショートカットを用意。
  • プラグイン機能も備えているので、拡張にも対応。

skel.jsのデモ

デモはシンプルな構成のページが表示が用意されています。
まずはデスクトップサイズとして、幅1200pxで表示してみます。

デモのキャプチャ

デモページ:幅1200pxで表示

デモのブレイクポイントは、1200px-, 481-1199px, -480pxの3つが設定されています。スマフォ用の480pxで表示すると、各エレメントが最適化されて表示されます。

デモのキャプチャ

デモページ:幅480pxで表示

skel.jsの使い方

jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="skel.js"></script>

jQueryもスタイルシートも他のファイルは必要ありません。

Step 2: スクリプトのセットアップ

スクリプトのセットアップします。
まずは、基本の書式から。

<script src="skel.js">
{
  preset:name_of_preset
}
</script>

presetで、レスポンシブのブレイクポイントやグリッドなどの指定をします。

<script src="skel.js">
{
  prefix: "style",
  resetCSS: true,
Resets default browser styles.
  boxModel: "border",
  grid: { gutters: 1 },
  breakpoints: {
    wide: { range: "1300-", containers: 1280, grid: { gutters: 2 } },
    narrow: { range: "-1299", containers: "fluid", grid: { gutters: 2 } },
    narrow960: { range: "-960" },
    narrow740: { range: "-740" },
    narrow460: { range: "-460", grid: { collapse: true } }
  }
}
</script>

top of page

©2017 coliss