2017-01-01から1年間の記事一覧

モーダルウィンドウ - fancyBoxとColorBox

画像の準備 Photoshopのレイヤーを適切な名前に変更しておく fancyBox ダウンロード 《index.html》 <html lang="ja"> <head> <meta charset="utf-8"> <title>fancyBox</title> <link rel="stylesheet" href="css/jquery.fancybox.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

Lightbox

Lightbox JavaScriptライブラリ Ajax(JavaScript)を利用して動作する機能をまとめてあるもの Ajaxは「Asynchronous JavaScript + XML」の省略語 JavaScriptを利用して非同期通信を行いXMLデータでサーバーとのやりとりを行うもの (1)「DOWNLOAD」ボタン…

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>…

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

スクロールすると表示されるトップへ戻るボタン テキスト著者の解説 ページトップへ移動するアニメーション 《script.js》 $(function() { var topBtn = $( '#page-top' ); //ボタンを非表示 topBtn.hide(); //スクロールが100に達したらボタン表示 $( windo…

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>

タブパネル - 実践

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

タブパネル

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

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 演算子を使って、引…

セレクタの使い方

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

セレクタ

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

jQueryの基本

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

どんな背景でも読みやすい文字にする

どんな背景でも読みやすい文字にする

テキストシャドウで魅力的な文字を作る(2)

テキストシャドウで魅力的な文字を作る(2)

テキストシャドウで魅力的な文字を作る(1)

テキストシャドウで魅力的な文字を作る(1)

文字にマーカーをつけて目立たせる

文字にマーカーをつけて目立たせる

楕円形だけでロゴを描く

i-modeのロゴを描く (1)楕円ツールで、楕円をひとつ描きます (2)移動パレットで数値を指定しながら、移動コピーをしていきます (3)楕円の左ポイントを押したまま移動コピーをします ※上下の円が重なっているところにくると、マウスポインターが 白い矢…

ダイアログビューを作る

ダイアログビューを作る

ダイアログビューを作る [複数ブラウザ対応版]

ダイアログビューを作る [複数ブラウザ対応版]

ラジオボタン・チェックボックを拡張する

ラジオボタン・チェックボックを拡張する

入力フィールドを拡張する

入力フィールドを拡張する

デフォルトボタンを拡張する

デフォルトボタンを拡張する