こうへい

HTML Javascript

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

2022/5/20  

ページ内HTMLで見出し、段落、画像を配置し、main.jsを作成していきます。 要素の配置 main.jsの作成   要素の配置 前回で画像の準備とコンソールの使い方について見てきました。 ...

IntersectionObserver(インタレセクションオブザーバー)を扱うための素材の準備とコンソールの表示

Javascript

IntersectionObserver(インタレセクションオブザーバー)を扱うための素材の準備とコンソールの表示

2022/5/6  

写真や画像などの取り込みとコンソールの表示にについて学んで行きます。 素材の準備 コンソールの表示 素材の準備 ・前回まででVS CodeとChromeの準備とindex.htmlファイルの作成をして ...

JavaScriptでIntersectionObserverAPIを使ってみよう

Javascript

intersectionObserverAPI(インタレセクションオブザーバー)を使うために VS CodeとChromeの準備をする

2022/4/29  

VS CodeとChromeを使ってindex.htmlファイルを作る。 VS Code Chrome index.html VS Code ・前回IntersectionObserverAPI(イン ...

IntersectionObserver(インタレセクションオブザーバー)

Javascript

IntersectionObserverAPI(インタレセクションオブザーバー・エーピーアイ)の使い方

2022/4/16  

JavaScriptを使ってIntersectionObserverAPI(インタレセクションオブザーバー・エーピーアイ)という要素の監視するシステムを使いこなしてみましょう   Inter ...

JavaScript

CSS HTML Javascript

カルーセルの完成

2022/3/18  

ウィンドウの大きさを変えたときに画像がずれる不具合を修正していきます。 リサイズイベント リサイズイベント ・前回までで進む、戻るや下のボタンをクリックすると指定の位置に移動し、今どこの画像が表示され ...

JavaScript

CSS HTML Javascript

カレントクラスの移動

2022/3/11  

進む、戻るボタンを押したときにもカレントクラスが移動するように修正していきます。 関数を作る 関数を配置する 関数を作る ・前回まででボタンにクリックイベントをつけてボタンを押すと指定の画像を表示する ...

こうへい

CSS HTML Javascript

クリックイベントの設定

2022/3/5  

ボタンにクリックイベントを設定し、画像が指定した位置に移動するようにしていきます。 クリックイベントの追加 カレントクラスの移動 クリックイベントの追加 ・前回まででボタンをJavaScript生成出 ...

プログラミング

CSS HTML Javascript

JavaScriptでボタンを作る

2022/2/18  

JavaScriptでボタンを動的に生成する方法について見ていきます。 関数を作ろう 余白の設定 関数を作ろう ・前回まででHTMLとCSSで丸いボタンを作ってい行きコメントで消しておきました。 ボタ ...

CSS

CSS HTML Javascript

ボタンのスタイリング

2022/2/11  

ボタンのスタイルを整え、ボタンを動的に生成するための準備をしていきます。 ボタンのスタイリング ボタンのコメント化 ボタンのスタイリング ・前回でHTMLを使ってボタンの配置をしてきました。 ・今回は ...

カルーセル

CSS HTML Javascript

下の丸い点を配置する

2022/2/4  

画像の下にボタンを配置しカルーセル全体をセクションでまとめておきます。 ボタンの配置 セクションの配置 ボタンの配置 ・前回までで戻る、進むボタンが出来て、重複していた関数も一つにまとめられスッキリし ...