2021-08-01から1ヶ月間の記事一覧
MixItUp - フィルター フィルターをかけることができるjQueryプラグイン www.kunkalabs.com ポラロイド風写真の作り方 HTML文書構造を記述 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>MixItUp - フィルター</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>
タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…
slick kenwheeler.github.io [prev][next]ボタンの大きさ・位置は微調整必要 <html lang="ja"> <head> <meta charset="UTF-8"> <title>カルーセルスライダー：slick</title> <link rel="stylesheet" href="css/slick-theme.css"> <link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/style.css"> </head> …</html>
モーダルウィンドウ コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの Lig…
bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></link>
アコーディオンパネル 縦・横の限られたスペースに複数のコンテンツを繰り返し表示させたいときに利用する HTMLの構造 すべての要素を表示 GoogleMapのiframeは、最後に挿入 class名、id名は適宜追加します <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQueryを使ったコーディング演習</title> </meta></meta></head></html>
thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…
イベントが発生した要素を取得 サムネイルをホバーしたとき メイン画像の「src」と「attr」の値を取得して 指定された値に置き換える（スワップイメージ） <html lang="ja"> <head> <meta charset="UTF-8"> <title>マウスによる画像置換</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <p><img src="img/00.jpg" alt="" id="mainImg"></p>…</div></body></html>
イベントとは ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます イベントには、「ユーザーイベント」と「ブラウザイベント」の２種類があります ユーザーイベントは、キーボードやマウスを操作することで実行されます ブラウザイベン…
hide()メソッド 表示されている要素を非表示にする 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が１秒 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hide()メソッド</title> <style> .box {width: 300px; height: 300px;} #hide1 {ba</meta></head></html>…
HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する（セレクター） 操作する内容（命令） jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り除く 要素の置き換え 要素の削除 属性値…
jQueryとは よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート（ブラウザ依存を気にしなく…
