求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

jQuery

ノードを追加・削除する

ノードを追加する 要素 / テキストノードを作成 createElement / createTextNode ノード動詞を組み立て、ドキュメントに追加 appendChild createElementメソッド 要素を作成する document.createElement( name ) name: 要素名 ノードを作成するためだけのメ…

フィルタリングを実装して課題サイトに応用

フィルタリングを実装 モバイルファーストで記述 レイアウトは、Flexboxを使用 記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp Demo - Basic</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

フィルタリング MixItUp

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します 商用でなければ無料で使えます MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="content"> <h1>MixItUp</h1> </div></body></html>

可変グリッド Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Masonry</title> <style> html,body,p { margin: 0; padding: 0; line-height: 1.0; } body { background: #8d8d8d; } .grid { display: flex;…</meta></meta></head></html>

モーダルウィンドウ

モーダルウィンドウ コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの Lig…

タブパネル - 実践

タブパネル <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>タブパネル</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&amp;subset=japanese" rel="stylesheet"> <link rel="stylesheet" href="tab2.css"> </link></link></meta></meta></head></html>

タブパネル

基本のタブパネルの作り方 タブ(見出し)とパネル(表示する内容)をそれぞれ別のリストで記述します タブのul要素には「tab」、パネルのul要素には「panel」というclass名をつけます パネル部とタブ部が連動するよう「id名」をつけ、href属性に#(ハッシュ…

jQuery - カルーセルスライダーの実装

カルーセルスライダー カルーセル(carouse) 遊園地の回転木馬や回転式コンベアなどの意味を持ちます 最後の画像から最初の画像へ連続して表示する仕組みを指します slick jQueryプラグイン kenwheeler.github.io ダウンロード slick-1.8.1.zip セッティン…

スライダー - bxslider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></link>

アコーディオンパネル

アコーディオンパネル 最初からすべての情報を表示するのではなく、次の段階に選択しやすいように見せないようにしておく はじめはコンテンツが見えない(クリックすると内容が見えることを明示するために、一つ目は開けておく) ユーザー自身が積極的に探し…

実践的なメソッド

ボタンで切り替えるslideToggle()メソッド 表示・非表示をボタンで切り替える <html lang="ja"> <head> <meta charset="UTF-8"> <title>slideToggle()メソッド</title> <style> .box {float: left; width: 300px; height: 300px; display: none;} #slidetoggle1 {background-color: #FDF9A1;} #slidetoggle2 {background-color:</meta></head></html>…

thisキーワード と readyイベント

thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…

イベント

イベントとは ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます イベントには、「ユーザーイベント」と「ブラウザイベント」の2種類があります ユーザーイベントは、キーボードやマウスを操作することで実行されます ブラウザイベン…

HTML/CSSを操作する

HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する(セレクター) 操作する内容(命令) jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り除く 要素の置き換え 要素の削除 属性値…

jQueryとは

jQueryとは よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラウザ依存を気にしなく…

スライダー&モーダルウィンドウ実装

スライダー&モーダルウィンドウ実装 モバイルファーストで記述 Flexboxでレイアウト <html lang="ja"> <head> <meta charset="UTF-8"> <title>テスト演習</title> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&amp;subset=japanese" rel="stylesheet">…</link></meta></meta></head></html>

JavaScriptを外部参照化する

JavaScriptを外部参照化する 「script.js」ファイルにまとめる 「今日の日付」と「今日の運勢」は、タブをクリックするたびに更新されるはおかしいので、読み込まれたときに1回だけ変わることとします <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンパネル</title> <meta name="viewport" content="width=device-width"> </meta></meta></head></html>

ハンバーガーメニューの作成

ハンバーガーメニューの作成 テキスト P.157