写真や画像などの取り込みとコンソールの表示にについて学んで行きます。
- 素材の準備
- コンソールの表示
素材の準備
・前回まででVS CodeとChromeの準備とindex.htmlファイルの作成をしてきました。
https://teatree-blog.com/javascript/1956/
・今回はそのファイルの中で画像を読み込んだり実際にブラウザに表示をしファイルの中身を見ていきます。
・まずは素材の準備をしていきます。
・写真や画像、動画などの素材は予め用意しておくと便利です。
・今回は無料で利用ができて一応商業利用おｋの画像を用意しました。画像の扱いに関しては著作権等の法律があるので気をつけましょう。
・画像をネットで調べたり自分で写真をとってダウンロードしておきます。
・画像が準備できたら、先日作った『IntersectionObserver』のファイルを探しましょう。
・パソコンのフォルダの中にあると思います。ちなみにVS Codeで作成したファイルは自動保存されるので保存等の作業は必要ありません。
・ファイルが見つかったらその中にindex.htmlのファイルが有るかどうかを確認しておきましょう。
・ありましたらそのindex.htmlと同じディレクトリにimgフォルダを作っていきます。
・空いているスペースで右クリックをして『新規フォルダ』を押すことで新しいフォルダを作ることができます。作ったフォルダの名前を『img』としていくといいでしょう。
・次に先程作った『img』の中に最初ダウンロード、もしくは取った写真を入れて行きます。コピー＆ペーストでいいでしょう。
・このとき写真の名前を分かりやすい名前に変えておくと便利です。写真を開かずに確認できますし数字を使うことで使うときに入力する文字数を減らせます。
・最後にVS Codeを開いてimgフォルダと画像がちゃんと読み込めるかどうかを確認しましょう。
コンソールの表示
・では素材の準備ができたのでHTML5を書いていきます。
・HTML5はhtml要素を配置し、その中にhead要素とbody要素を書きます。
・この辺はなれてくるとショートコードで書くことができるので割愛します。!(shift+ 1)とEnterで定型文を作ることができるので細かいところは自身で修正してみましょう。今回タイトルIntersectionObserverにしておきました。
・ここまでできたらブラウザーで確認していきます。
・VSCodeのindex.htmlファイルのタブバーをchromeのタブバーにドラック＆ドロップすることで表示させることができます。
・最後にコンソールの表示方法について学んで行きます。
・コンソールはそのページの状態を見ることができるchromeの機能で人が作ったホームページのクラス名を見たりクリックした回数をJavaScriptでカウントしている場合表示したりする機能があります。
・つまりホームページの目に見えない情報を見ることができる開発者向けの機能です。
・見方は簡単で見たいページの右上の3つの点をクリックし、『その他のツール』→『デベロッパーツール』と押せば出てきます。
・またショートカットキーも用意されていてoption＋command＋Iでもデベロッパーツールは出てきます。
・今回使うのはコンソールパネルなのでconsoleをクリックしておきましょう。
以上