まだデータがありません。
指定した要素の画像やテーブルをレスポンシブに「respontent」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素以下の画像やテーブルをレスポンシブにしてくれるプラグイン「respontent」を紹介します。
jQueryプラグイン「respontent」
このプラグインを使えば、画像やテーブルを簡単にレスポンシブにしてくれます。
また、画像・テーブルの他に「YouTubeの埋め込み動画」「Googleマップ」もレスポンシブにしてくれます。
スポンサーリンク
それではデモページへアクセスし、ブラウザーの横幅を縮めてみてください。
ソース（ 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>
スポンサーリンク