イントロダクション
ブログ上では、レイアウトが決まっているため、大きなサイズのコンテンツは扱いづらいです。特に、横幅はたいてい固定されているうえに、サイドバーなどがあるため、大きなコンテンツは縮小して配置するか、狭い領域に配置する工夫が必要になります。
コンテンツのなかでも、特に表のような幅が広いコンテンツは、配置するのが面倒です。
Webページでも、本文とその他の部分でコンテンツのサイズが固定されている場合には、大きなサイズのコンテンツは扱いづらいです。
そんな時は、ブログの本文中では、収まらなかった部分をスクロールで見せるようにしておき、新しいウィンドウでそのコンテンツ全体を見せる方法があります。
本文中のコンテンツを新しいウィンドウで表示する JavaScript コード
JavaScript コード
<div id="new_window_src" style="overflow-x:scroll;">
<!-- コンテンツ ここから -->
<table>
<tr>
<td>
<b>これはテストの表です。！ </b><br />
</td>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
<!-- コンテンツ ここまで -->
</div>
<input type="button" value="新しいウィンドウで開く" onclick="openNewWindow(document.getElementById('new_window_src').innerHTML, 'new window')"/><br />
<script type="text/javascript">
<!--
/*
新しいウィンドウを開き、指定された HTML を出力する
html : 出力する HTML データ
title : タイトル
*/
function openNewWindow(html, title) {
// 新しいウィンドウを開く
var win = window.open();
// 書き込み開始
win.document.open();
win.document.write("<html><head><title>" + title + "</title></head><body>" +
html +
"</body></html>");
// 書き込み終了
win.document.close();
}
//-->
</script>
実行結果
| これはテストの表です。！ | aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |