JavaScript: DOMを活用しよう

ウィンドウのサイズ変更に応じて大きさと位置を調整する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素の大きさと位置を、ウィンドウのサイズ変更に応じて調整します。
講師:
06:45

字幕

このレッスンでは要素の大きさと位置をウィンドウのサイズを変えたときこのサイズをに応じて調整してみたいと思います。作業する HTML ドキュメントは「 ARTIST 」です。この中のサムネールをクリックすると画像が中央に開きます。もう一クリックすると消えます。それからクリックして表示した後ウィンドウをスクロールしても画像の位置は動きません。けれども、ウィンドウを小さくしておいてですね、少しスクロールしますけれども。その上で画像を出してウィンドウを広げても位置は動きませんし、大きさは変わりません。これを変わるようにしようということです。Dreamweaver で HTML ドキュメントを開きました。最初に画像をクリックしたとき大きい画像が現れてちゃんと位置や大きさが整っているというのは最初にその処理をしているからです。まず、位置を合わせるのはこれで要素の左上隅を合わせています。setPosition という関数。それから大きさをウィンドウに合わせて整えるのがこの処理です。これはまたウィンドウのサイズを変えたときに実行すればいいということなので関数にしてしまいましょう。この処理はいったんコピーしておいてそしてコメントアウトします。 関数にしますから関数名は setPosition と合わせて「 setSize 」としましょう。引数はなしです。ではこの setSize という関数を定めます。setPosition という関数がありますのでその下にfunction として setSize引数はなしということですね。そして先コピーした処理をペーストします。ちょっとインデントくりましたかね、インデントを整えます。では保存しましょう。Chrome をリロードして、取り敢えず動作が変わらなければ結構です。ちゃんと中央に表示されてスクロールしても動きません。けれども、サイズを変えて、呼び出してリサイズするとダメということですね。Dreamweaver でリサイズしたときのEventListener を加えます。これもやはり window に対してaddEventListener をします。コピーを持ってきまして、そしてイベントは「 resize 」になります。そして関数なんですが名前を付けて定めることにします。名前はまんま「 resize 」としましょう。そして function resize を定めます。やることはほぼできています。 まずは position を定めるとsetPosition ですね。そしてサイズを定める setSize 。関数をただ呼び出せばいいということですね。setPosition を呼び出します。それから setSize 。ちょっと足りないですが、この段階で確認しておきましょう。ファイルを保存します。Chrome をリロードして、そしてサイズを小さくしています。そして画像をどれか1つをクリックして広げましょう。背景のオーバーレイですね。このサイズはきちんと変わります。ですので半分成功しているんですが画像の位置が変わりませんね。画像の位置を中央に揃えるという関数は実はもうすでに作ってあるのでそれを呼び出せばいいです。この Listener の resize の関数。2つの関数を呼び出しましたが後もう1つ必要です。それがこの centerImage というものです。これで画像をセンターにimg 要素をセンターにしているわけでcenterImage を呼び出しましょう。但しこれは引数が必要です。センターにする画像ですね。img 要素をこの中にいなければなりません。img 要素の変数は上の方にありますね。 これです、「 largeImage 」。なのでこれを centerImage の引数に渡します。後ウィンドウに対して addEventListener 指定リサイズイベントの Listener を加えました。これはオーバーレイを消すときにやはり削除する必要があります。ここですね。スクロールについては削除しているので同じ要領で resize の方もremove としましょう。インデントと整えて removeEventListener 。ということで保存をします。Chrome をリロードしましょう。そしてまずはウィンドウサイズを小さくしておいて画像をクリックします。そして広げてみますと今度はオーバーレイのサイズが変わるだけじゃなく、画像の位置も変わっていますね。このレッスンでは要素の大きさと位置をウィンドウをスクロールしたときにそのサイズに合わせて調整するというやり方についてご説明しました。イベントはウィンドウに対してaddEventListener で resize です。そして始めにちゃんとウィンドウの大きさに合わせて位置合わせをするという処理を行っていたのでそれらを関数にして呼び出せばいいということですね。 それからウィンドウに対してaddEventListener をしたときはremoveEventListener を忘れないようにしてください。

JavaScript: DOMを活用しよう

DOM(Document Object Model)はHTMLの中の要素とそのツリー構造を扱うための仕組みです。このコースではJavaScriptの基礎を学んだ方を対象に、DOMの基本的な操作方法について解説します。具体的にはDOMの要素やノードの調べ方、要素の属性の変更、ノードの追加方法などについて説明し、実際にインタラクティブに対応するページを作ります。

3時間24分 (33 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年03月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。