HTML Javascript

IntersectionObserver(インタレセクションオブザーバー)を使うためにHTMLを書いていこう

ページ内HTMLで見出し、段落、画像を配置し、main.jsを作成していきます。

  • 要素の配置
  • main.jsの作成

IntersectionObserver(インタレセクションオブザーバー)を使うためにHTMLを書いていこうIntersectionObserver(インタレセクションオブザーバー)を使うためにHTMLを書いていこう

 

要素の配置

前回で画像の準備とコンソールの使い方について見てきました。

今回は基礎となるHTMLの要素の配置とJavaScriptのフォルダ作成をしていきたいと思います。

まずはHTMLの中身を作っていきたいのでbodyの中身を書いていきます。

今回はIntersectionObserver(インタレセクションオブザーバー)の使い方を学んで行きたいので最初の画面には画像が表示されず、スクロールすることで画像がでてくるような設計にしていきたいと思います。

なので、まずは最初の画面を見出しと段落で埋めて行きたいと思います。

h1タグで見出しを書いてその下にpタグでテキストを書いていきましょう。テキストで画面がうまるくらいにしていきましょう。

次はimgタグで画像を入れていきます。先日用意した画像をscr属性で入れていきます。

今回は高さ、幅を200pxにしていきたいのでwidthとheightの設定もしておきましょう。

最後にテキストで下も埋めておきましょう。

main.jsの作成

次に、今回はIntersectionObserver(インタレセクションオブザーバー)を使っていくためにJavaScriptのフォルダを用意していきます。

JavaScriptはmain.jsで作ることができます。

bodyの閉じタグの直前にスクリプトタグを書いていきましょう。<script src="js/main.js"></script>と書いていけばいいですね。

VS Codeではショートコードが用意されていてcommand+ クリックで簡単に作ったフォルダを新規作成することができます。

書いたスクリプトタグにカーソルを持っていきcommand+ クリックし、フォルダを新規作成を選べばいいでしょう。

main.jsのフォルダの中に'use strict';と書いて厳密にエラーチェックをするようにして行きます。

その下に{}で囲ったボックスを作ったら、準備は完了です。

次回から{}の中にJavaScriptのコードを書いていきましょう。

以上

-HTML, Javascript