今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. ページのトップへゆっくりとスクロール(戻る)「Scroll to Top Control」
  3. 同じ内容の入力フォームを追加・削除「Repeater」
  4. シングル・マルチセレクトに対応した選択要素「SumoSelect」
  5. jsファイルを非同期に遅延読み込み「Lazy Script」

指定した要素の画像やテーブルをレスポンシブに「respontent」

スポンサーリンク

指定した要素以下の画像やテーブルをレスポンシブにしてくれるプラグイン「respontent」を紹介します。

jQueryプラグイン「respontent」

このプラグインを使えば、画像やテーブルを簡単にレスポンシブにしてくれます。

また、画像・テーブルの他に「YouTubeの埋め込み動画」「Googleマップ」もレスポンシブにしてくれます。

スポンサーリンク

それではデモページへアクセスし、ブラウザーの横幅を縮めてみてください。

「respontent」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="respontent のデモでーす。">
<title>respontent - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.respontent.min.js"></script>
<script>
$(function() {
  $('#demo').respontent();
});
</script>
<link type="text/css" rel="stylesheet" href="jquery.respontent.css" />
</head>
<body>
<h1>respontent のデモでーす。</h1>
<p>ブラウザの横幅を縮めてみてください。</p>
<div id="demo">
  <img src="image.png" />
  <table>
  <thead>
    <tr><th>項目1</th><th>項目2</th><th>項目3</th><th>項目4</th><th>項目5</th><th>項目6</th><th>項目7</th><th>項目8</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td></tr>
    <tr><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td><td>アイテム</td></tr>
  </tbody>
  </table>
</div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)