職案人

jQuery入門--変化するスティツキーヘッダー

変化するスティツキーヘッダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.js及び、modernizr.min.js【スティツキーヘッダーの概要】・デザインスティツキーヘッダーは上部に達すると【仕組み】今回は、スティツキーヘッダーが上部に達すると、初期状態のヘッダーの内容をコピーして、スティツキーヘッダーを新たに作る。1.初期状態のヘッダーは動かさず、常に元の位置に配置する2.ヘッダーのクローンを作成し、初期状態では画面上部の外側に配置しておく3.ウインドウのスクロールによって初期状態のヘッダーが非表示になった時点で、クローンを見える位置に移動する【フォルダーの構成】imgフォルダー【HTMLコード】【head部】1.Google...jQuery入門--変化するスティツキーヘッダー

2025/03/23 20:48

jQuery入門--スティツキーヘッダー

スティッキーヘッドヘッダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.js及び、modernizr.min.js【head部】での注意・GoogleFontsの「RopaSans」フォントを取得している。＜linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Ropa+Sans"＞【スティッキーヘッドのデザイン】スクロールする。ヘッドが固定される【概要】スティッキーヘッドはスクロールに合わせて移動するヘッダーですが、画面上部に来ると、ヘッダーだけが固定し、本体はスクロールに合わせて移動する。【処理の流れ】スティッキーヘッドを実装するには、ウインドウのス...jQuery入門--スティツキーヘッダー

2025/03/13 15:39

jQuery入門--多機能なスライドショー

多機能なスライドショー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【Modernizr2.8.3のCDN】＜scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"＞＜/script＞modernizr.jsとは、JavaScriptやCSSを書いていると「新しい機能が使えるブラウザではそれを使い、そうでない場合は別の手段で代替する」というように、処理を分岐させたい場合がある。Modernizr（モダナイザー）とは、そういった「機能検出」のためのJavaScri...jQuery入門--多機能なスライドショー

2025/03/06 16:16