サイト内で擬似的なウインドウを作る方法です。1つの要素をドラッグで可変にするのですが、凝ったことしなくてもcssにrisizeというプロパティが用意されているので簡単にできます！
では早速つくり方を見ていきましょう！
はにわまんサイト内でのウインドウは個人的に好きで、当ブログ内にも随所に作成しています笑
可変する要素の作り方
DEMOでは、ドラッグによって要素の横幅、縦幅が可変できるようになっていたかと思います。
作り方はとても簡単で、可変させたい要素に対して、cssのrisizeとoverflowを指定するだけです。
デモのソースをそのまま紹介すると、
<div id="my-window">右下に三角をドラッグすると要素が可変します。</div>#my-window {
resize: both;
overflow: auto;
width: 100%;
border-top: 1.4em solid #eee;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba(0,0,0,.1);
background: #fff;
padding: 1.2em .8em;
margin-bottom: 1.5em;
}cssで定義している、resize: both;とoverflow: auto;によって可変の処理が加えられているわけですね。
ちなみに、resizeには4つの指定方法がありますが、疑似ウインドウとして使うには縦も横も動かせたほうが好ましいので、resize: both;がいいのかなと思います。
resize: none;・・・可変禁止（初期値）resize: both;・・・縦、横ともに可変可能resize: horizontal;・・・横だけ可変可能resize: vertical;・・・縦だけ可変可能
疑似ウインドウの変化を検知したい
cssのresizeの紹介でほぼ終わりなのですが、$(windows).on('risize', function() {});といったような、ウインドウの動きで処理していたイベント系の確認ができません（実際のウインドウサイズが変わるわけではないので。）
risizeで変化した値を検知するには自分でコードをゴリゴリ書いてもいいのですが、jQueryプラグインの「exResize」がとても便利です。
ライセンスは、作成者のブログのコメント欄にありましたが、「MIT and GPL」とのことです。
トーリス・ガリートーリス・ガリー 2011/08/15 15:06
いいですね、これ。そのまま仕事で使わせて頂きたいのですが、
ライセンス的にはどんなもんでしょう？cyokodogcyokodog 2011/08/19 01:22
jQuery 同様、MIT and GPL ということでお願いします
「exResize」のダウンロード
Githubでソースを公開してくれています。
→ https://github.com/cyokodog/jquery.ex-resize
右上の「Download zip」からダウンロードしてください。読み込むjsファイルは「jquery.exresize-latest.js」です。
読み込む際はjQueryを先に読み込んであげてください。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src=".jquery.exresize-latest.js"></script>準備はこれでOK。
「exResize」の書き方
「exResize」イベントを使ってウインドウの縦横の大きさを取得してみます。ちなみにinnerWidthはコンテンツとpaddingまでを含めた幅（borderは含まない）のことです。
$('#my-window').exResize( function() {
console.log('width:' + $(this).innerWidth());
console.log('height:' + $(this).innerHeight());
});console.logに出力していますので、デベロッパーツールのconsoleを開いてドラッグしてみてください！
可変中に擬似ウインドウの縦横の値を表示させる
<div id="my-window2">
右下に三角をドラッグすると要素が可変します。
<span class="vh"></span>
</div>#my-window2 {
resize: both;
overflow: auto;
width: 100%;
border-top: 1.4em solid #eee;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba(0,0,0,.1);
background: #fff;
padding: 1.2em .8em;
margin-bottom: 1.5em;
position: relative;
}
#my-window2 > .vh {
position: absolute;
bottom: .2em;
right: .2em;
font-size: .8em;
}jQuery('#my-window2').exResize( function() {
var vh = $(this).innerWidth() + ' × ' + jQuery(this).innerHeight();
jQuery('.vh').text(vh);
});右下に縦横の値が表示されるようになりました！
おわり
サイト内に擬似ウインドウを作る方法でした。個人で気にはレスポンシブ系のデモを設置する際はこいった表示にしてあげるとユーザー体験も向上するのかなと思ったりします。
