読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

FlexSliderで横スライダー

FlexSlider <html> <head> <meta content="charset=utf-8"> <title>FlexSliderで横スライダー</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="css/flexslider.css"> <style> body { background-color: #42A2…</link></meta></meta></head></html>

bxSlider

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

Slider

SLIDERJS SlidesJS 3.0 <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body {…</link></link></meta></meta></head></html>

フィルタリング

フィルタリング 特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロード フィルタリング機能を実装 追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></link></meta></head></html>

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( )メソッドを使ったアニメーション

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

アニメーション効果

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

アコーディオンメニュー

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

実践的なメソッド

hide()メソッド 表示されている要素を非表示にする HTMLの表示状態 display:block を、display:none に変更します 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が1秒 $( セレ…

セレクタ・メソッド・イベント - まとめ

jQuery高速化 Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 1.…

thisキーワード

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

readyイベント

readyイベントとは イベントの中で最も大事なイベントが、readyイベントになります このイベントは、DOMの読み込み完了時に実行されます そのため、jQueryを使用する場合は必ずreadyイベントを設定することになります jQueryの実行パターン $( document ).re…

HTML・CSSの操作

HTMLの操作 要素内のテキストの設定・変更やHTML要素の設定・変更など テキストの設定 要素内のテキストを設定する場合は、text( )メソッドを使用します $(function(){ $( '#txt' ).text( 'テキストが変更されました' ); }); 《テキスト内容を取得する場合》…

関数とメソッド

jQueryの関数 jQueryは、関数オブジェクトです JavaScriptは、プリミティブ型とオブジェクト型で構成される プリミティブ型は、変数として使う型 それ以外はオブジェクト型です <script> $(function() { alert( typeof( jQuery ) ); }); </script> typeof 演算子を使って、引…

セレクタの使い方

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

セレクタ

セレクタとは 名前、属性、状態などによりドキュメント内の要素を選択する役割 セレクタの書き方 先頭に「$」を記述 「$」は、jQueryオブジェクトのインスタンス $( '要素' ) セレクタを使用するときの注意点 セレクタを使用する場合は、jQueryへのアクセス…

jQueryの基本

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