jQuery

Masonry

Masonry jQuery プラグイン 可変グリッドレイアウト もっともシンプルな記述 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Masonry</title> <style> html, body, p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { background: #C4D0DD; } .bo</meta></head></html>…

アニメーション効果

animate()メソッド 独自のアニメーションを設定できる 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令 animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります 動きには「l…

animate( )メソッドを使ったアニメーション

animate( )メソッド $( セレクタ )に対してアニメーションを設定します $( セレクタ ) .animate( { プロパティ: 値, プロパティ: 値 }, ディレイ, イージング, コールバック ); property CSSプロパティ名(値を数値で指定できるものに限る) value アニメー…

ページトップへ移動するアニメーション

ページトップへ移動するアニメーション 《script.js》 $(function() { var topBtn = $( '#page-top' ); //ボタンを非表示 topBtn.hide(); //スクロールが100に達したらボタン表示 $( window ).scroll( function () { if ( $(this).scrollTop() > 100 ) { top…

THAI-NAMA

THAI-NAMA THAI-NAMA CONCEPT MENU ACCESS CONTACT 生春巻き THAI-NAMAは タイ風の家庭的な料理をご提供しているお店です。 季節感を大切に、旬のものを使いつつ、楽しんで貰えるメニューを揃えています。 NEWS 2018/05/25 夏のメニューを追加しました CONCE…

タブパネル - 実践

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

タブパネル

タブパネルとは タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる 要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う パネルの順番とコンテンツの順番が比例している場合は、indexメソッ…

縦の動き slideDown / slideUp / slideToggle

slideDown / slideUp displayがblockに、noneに変化する途中のアニメーション効果 <html lang="ja"> <head> <meta charset="utf-8"> <title>アコーディオンパネル</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

jQuery基礎 - まとめ

jQueryとは Javascriptのライブラリ ライブラリとは、汎用性の高いプログラムを再利用可能な形でまとめたもの jQuery DOMの操作(HTML要素の操作)をよりシンプルに記述可能 ブラウザごとの細かな挙動の違いを吸収 アニメーションに便利な関数を利用可能 Aja…

実践的なメソッド

hide()メソッド 表示されている要素を非表示にする 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が1秒 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hide()メソッド</title> <style> .box {width: 300px; height: 300px;} #hide1 {ba</meta></head></html>…

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

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

イベント

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

HTML/CSSを操作する

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

セレクタの使い方

最低限、使うものだけ覚える すべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前でも、script内で…

はじめてのjQuery

はじめてのjQuery Web制作の現場で使えるjQuery UIデザイン入門 ascii.jp Progate prog-8.com ドットインストール Google jQuery CDN developers.google.com jQuery CDN 3.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 2.x snippet:

jQueryとは

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

求職者支援訓練 フェリカテクニカルアカデミー