[JS]jQueryも外部CSSも不要！レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js
Post on:2013年5月23日
sponsors
デスクトップ・タブレット・スマフォ向けのレスポンシブ対応サイトを作成する超軽量（19KB）のスタンドアローンのスクリプトを紹介します。
jQueryなどの他のスクリプトは必要なく、外部スタイルシートも必要ありません。
※ページの各エレメントの装飾にはCSSを用意してください。
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>
sponsors
