JavaScript: DOMを活用しよう

このチャプターでつくるコンテンツ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このチャプターの作例をご紹介します。要素を動的に配置して、マウスやウィンドウ操作に応じて要素の大きさや位置を変えます。
講師:
02:43

字幕

このレッスンではチャプタを通して作る作例がどの様なものかをご紹介したいと思います。ページはこの「 ARTISTS 」というページなんですけれども、どのような動きをすると9つのサムネール画像があります。クリックすると大きい画像が表示されます。背景には半透明のグレーの背景があります。そしてクリックすると消える。またクリックすると出てくる。サイズはそれぞれ違うんですけど、丁度ウィンドウに収まるサイズになっています。ではデベロッパーツールでちょっと確認をしてみましょう。画像を少しウィンドウスクロールをしてこの左上のアイコンで9つのサムネール、これは div 要素の中に入っています。そしてその中に ul 要素があり、 li 要素が画像を持っているぐらいですね。li 要素の子供としてimg の要素があります。このパスはサムネール、小さい画像のパスがです。そしてクリックすると動的に img 要素を作ってその中に大きい画像を読み込んでいます。この値を注目して下さい。これは動的に作られた div の要素です。クリックすると消えます。このボディの上ですね。またクリックすると出てきます。この div 要素の中に大きい画像を入れたimg 要素があり、パスがあります。 このパスは小さい画像サムネールのパスを使って操作をして作っています。さらにこのウィンドウを縮めましてクリックしてもちゃんと画像の大きさは整えます。それから広げていくと画像の位置、それから背景のオーバーレイと呼んでいるんですけど、半透明のグレーの位置がちゃんとサイズが変わります。あるいはウィンドウをスクロールしてもが設定背景のオーバーレイは動かないような仕組みになっています。水平でも同じです。この様なインタラクションあるいは動的な要素の操作というものをこのチャプターを通じて学習していきます。このレッスンではチャプターを通して作る作例がどの様なものかということをご紹介しました。

JavaScript: DOMを活用しよう

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

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

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

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

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