WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

jQuery

aタグをクリック時に一旦リンクを無効にしてアニメーションした後にページ遷移

<p><a href="./top/" target="_self">リンクボタン</a></p> $('a[target="_self"]').click(function(){ var url = $(this).attr('href'); $('.contents').delay(300).animate({'opacity':0},800,"easeInOutBack", function(){ location.href = url; }); return false; }); 一旦「return false」でaタグを…

jQuery Easing Plugin

jQueryのアニメーションのイージングは最初の状態だと「linear」と「swing」しか使えないが、 jQueryプラグインの「jQuery Easing Plugin」を使用すると、 様々なイージングを使用することができる。 デフォルトは「swing」サイトからファイルをダウンロード…

cookie.js

github.comcookie.jsはcookieを簡単に操作できるjQueryプラグインGitHubからダウンロードして読み込む cookieを保存する方法 $.cookie("KEY", "VALUE", { expires: 1 }); KEYにcookieの名前、VALUEに値を入力する。 {}の中には様々なオプションを設定するこ…

PJAX

ページ遷移時に、非同期通信で指定した箇所のみ通信し、 スムーズな画面遷移が可能。Redirecting… $(function() { $.pjax({ area: '#main', link: 'a.target', wait: 800 }); area 切り替える範囲 link PJAXさせるリンクを指定 wait リンクをクリックしてか…

演算子

代入演算子 右の値を左に代入 演算子 名称 意味 = 代入 x=y += 加算代入 x=x+y -= 減算代入 x=x-y *= 乗算代入 x=x*y /= 除算代入 x=x/y 比較演算子 左の値と右の値を比較する 演算子 意味 == 右と左の値が正しかったらture 文字列の数字と数値でも比較して…

jqueryでローディング画面を作る

参考サイト gimmicklog.main.jp

比率の計算方法

参考サイト jQueryで比率計算をする方法 | それからデザイン スタッフブログ

アコーディオンパネル

HTML <dl> <dt>タイトル</dt> <dd class="news news__detail">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> </dl> <dl> <dt>タイトル</dt> <dd class="news news__detail">テキストテキストテキストテキ</dd></dl>…

スクロールアニメーション

ボタンを押したらアニメーションでページトップに戻る $('.totop').on('click',function(){ $('body,html').animate({ scrollTop: 0 },1000,'easeOutCubic'); }); クラスtotopを押したら body,htmlがanimeteで scrollTop: 0に移動 1000ミリ秒の間に動作する …

要素が途中からFixedになる

.offset(); 要素の表示位置。 複数ある場合は最初にある要素の位置になる。 topとleftのオブジェクトを返す。 左上からの位置 .scrollTop(); 合致する全ての要素のスクロール上位置を取得・指定できる。 スクロールバーのスクロール位置 現在のスクロール位…

gifアニメーションがリロードすると再生されない

gifアニメーションを含んだwebページをリロードすると、 gifアニメーションが再生されず、最後のコマで止まっている現象が起こることがある。 この原因はキャッシュが残っているために起こる。gifの名前の後ろに「?現在時刻」(クエリー)を入れることで 毎度…

jQueryのscrollTop()のブラウザ毎の差異

合致する全ての要素のスクロール上位置を指定するscrollTop $("body").scrollTop(); chrome, Safariで有効 $("html").scrollTop(); firefox, IEで有効 $("html,body").scrollTop(); 両方指定するのが良い。

HTML/CSS/jQuery・jQueryプラグイン/レスポンシブ

訓練校最終テスト実際のサイトはこちら <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="favicon.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> </link></link></link></meta></meta></head></html>

display:table-cellを使ったタブパネル

デモはこちら http://efu.sakura.ne.jp/web/tab_2/ HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>タブ切り替え</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/script.js"></link></meta></head></html>

jQueryの復習

hide() 表示状態のものを非表示にする http://efu.sakura.ne.jp/web/jquery/ <html lang="ja"> <head> <meta charset="utf-8"> <title>hide()メソッド</title> <style> .box {width: 300px; height: 300px;} #hide1 {background-color: #FDF9A1;} #hide2 {background-color: #E1C9F9;} #hide3 {background-color: #9BE074;} <…</meta></head></html>

本のようにめくれるjQueryプラグインbookblock

tympanus.net HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>bookblock.js</title> <link rel="stylesheet" href="css/demo.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/custom.css"> </link></link></link></meta></head></html>

SVGでアニメーション

SVGとは…Scalable Vector Graphics(スケラブル ベクター グラフィックス) ベクターデータ。引き延ばしても縮めても荒れない。 Illustratorで文字を打つ 打った文字を選択してアウトラインを作成し、グループを解除する。 別名で保存する 形式をSVGにして保…

カテゴリ分けやソートができるjQueryプラグインMixItUp

mixitup.kunkalabs.com Get startedから記述が入手できる。 MixItUpのjQueryはCDNがある。 デモはこちら http://efu.sakura.ne.jp/web/mixitup/ <html lang="ja"> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></link></meta></head></html>

カテゴリ分けをアニメーションで見せるjQueryプラグインfreamework.js

デモはこちら http://efu.sakura.ne.jp/web/freamework.js/ サイトからファイルをダウンロードできる。 code.tutsplus.com HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>framework.js</title> <link rel="stylesheet" href="style.css"> <script src="js/jquery.js"></script> <script src="js/framework.js"></link></meta></head></html>

背景画像を固定/スムーススクロールでTOPに戻る

HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>背景画像を固定</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <script type="text/javascript"> $(function(){ var topBtn = $('#to-to…</html>

モーダルウインドウjQueryプラグインFancyBox

FancyBoxはモーダルウィンドウのjQueryプラグイン googlemapや動画等の外部コンテンツも読み込めるFancybox - Fancy jQuery lightbox alternative デモはこちら http://efu.sakura.ne.jp/web/fancybox/ <html lang="ja"> <head> <meta charset="utf-8"> <title>FancyBox</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>

スライドショーが作れるjQueryプラグインbxSlider

デモはこちら http://efu.sakura.ne.jp/web/bxslider/ サイトからファイルをダウンロードする。bxslider.comjquery.bxslider.min.jsと jquery.bxslider.cssを任意のフォルダに入れ、 新規ファイルに指定を書くCSSを自分で記入する場合はCSSファイルが無くて…

タブパネル

その1 http://efu.sakura.ne.jp/web/tab/ <html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <script src="js/jquery-1.11.3.min.js"></script> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div id="container"> <ul class="tab"> <li></li></ul></div></body></html>

アコーディオンパネル

http://efu.sakura.ne.jp/web/accordion/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンパネル</title> <style> /* reset */ html,body,div,dl,dd,dt,p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } a { text-decoration:…</meta></head></html>

復習

自分なりに調べて答えを出してみました。問題はこちら &amp;amp;amp;amp;amp;lt;a href="http://d.hatena.ne.jp/webmaster-web/20150806/p1" data-mce-href="http://d.hatena.ne.jp/webmaster-web/20150806/p1"&amp;amp;amp;amp;amp;gt;復習 - 演習課題 - We…

jQuery基礎

$(document).ready(function(){ jQueryの処理を記述 }); //省略形 $(function(){ jQueryの処理を記述 }); 要素セレクター <html lang="ja"> <head> <meta charset="utf-8"> <title>Jquery要素セレクター</title> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキ…</li></ul></body></html>

Lightbox

画像をモーダルウィンドウで表示させるプラグインlokeshdhakar.com デモはこちら http://efu.sakura.ne.jp/web/lightbox/ (オプションはデフォルトのまま) HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>LightBox</title> <link rel="stylesheet" href="css/lightbox.css"> </link></meta></head></html>

jQuery基礎2

文字列を取得する <html lang="ja"> <head> <meta charset="utf-8"> <title>メソッド:文字列を取得する</title> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <ul> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></meta></head></html></ul></body></html>

jQuery基礎3

各要素を指定した要素で包む <html lang="ja"> <head> <meta charset="utf-8"> <title>メソッド:各要素を指定した要素で包む</title> <script src="js/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('strong').wrap('<h2></h2>'); }); </script> </meta></head></html>

jQuery基礎4

click()イベント <html lang="ja"> <head> <meta charset="utf-8"> <title>click()イベント</title> <script src="js/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </meta></head></html>