JavaScript: DOMを活用しよう

画像をウィンドウの中央に配置する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
動的につくった要素に読み込んだ画像を、ウィンドウの中央に配置します。
講師:
05:00

字幕

このレッスンでは動的に作った画像の要素img の要素ですね、それを丁度画面の中央になるように画像配置を調整したいと思います。練習するページは「 ARTISTS 」というページなかですけれども、サムネールがありまして、クリックすると大きな画像が読み込まれる所まで出来ています。けど位置が左上によってしまっています。これを丁度中央になるようにしたいと思います。Dreamweaver で HTML ドキュメントを開きました。現在で出来ている所というのは動的にimg の要素を作りそしてパスやスタイルなどを整えたうえで画像の読み込みを待ってload イベントですね。幅とか高さ、サイズも調整をして HTMLドキュメントの要素に加えています。ここに位置調整の関数を加えたいと思います。これから定義するんですけど、関数名は「 centerImage 」としましょう。そしてウィンドウの中央に配置したい画像のimg 要素ですね。これがその変数なんですが、それを渡すことにします。コピーを持ってきます。そして定義はこの外側に「 function 」ですね。そして名前はもう決まっています。ここまでコピーで持ってきて引数のは「 myImage 」としてきましょう。 イメージ要素を引数に渡されます。さて幅と高さの調整なんですけれどもウィンドウの幅に対して実際のイメージがどうかということですね。幅からいきましょう。この幅に応じて X 座標を変えるので「 offsetX 」という変数名にします。そしてウィンドウの内部の幅ですね。「 innerWidth 」よりもイメージの方が小さいんですけど、その場合にまず水平座標を調整しようということですね。イメージの width 。この場合はこの2つの差の半分をずらせば丁度真ん中にくるといことになりますので割ると2と。これが X 座標をずらす文です。同様にコピーしちゃいましょうか。コピーしてペーストして今度は垂直方向にずらすのは「 offsetY 」とします。「 innerWidth 」は innerHeight ですね。イメージの width は height とします。これを引数に渡されたイメージに設定してあげればいいわけですけどCSS の設定にします。つまり style として left ですね。X 座標方向は left ですのでこれを offsetXコピーを持ってきます。CSS の設定ですから単位が必要です。 pixel と。またコピーしましょう。そしてペーストしてleft に対して垂直方向は top ですね。「 offsetY 」と。単位は同じ pixel です。保存しましょう。Google Chrome をリロードして試してみます。縦長の画像はちゃんと真ん中にきていますね。横長どうでしょうかと。横長縦も長かったですから本当にちゃんと縦方向が真ん中になっているのか分かりにくいですね。ではここはとくに使わないですがデベロッパーツールでウィンドウを狭めてしまいましょう。そしてスクロールして大丈夫ですね。上の下に余白があります。こちらも横長画像です。ちゃんと中央に配置されたようです。このレッスンでは動的に作った img 要素に読み込んだ画像に従ってウィンドウの中に丁度真ん中に位置するように関数を定めました。関数には img 要素を渡してあげます。そしてウィンドウの幅や高さですね。それと実際に読み込んだイメージの幅・高さの差を取って、それを半分にしてstyle のプロパティで CSS と同じ様に位置を設定することによってウィンドウの中央に画像を表示することが出来ます。

JavaScript: DOMを活用しよう

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

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

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

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

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