WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

jQuery

CSS3の色指定 HSL

色をランダムで配置 http://efu.sakura.ne.jp/web/hsl/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>HSL</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <style> body { background: #333; } </style> </link></meta></head></html>

丸メニュー

デモ http://efu.sakura.ne.jp/web/menu4/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>丸メニュー</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>

文字を左からフェードで表示

デモ http://efu.sakura.ne.jp/web/fade/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>フェードアニメーション</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet"> </link></link></meta></head></html>

現在いるページのナビゲーションにクラスを追加

デモ http://efu.sakura.ne.jp/web/menu3/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーションのカレント</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="style.css"> </link></link></meta></head></html>

viewportの変更

デモ http://efu.sakura.ne.jp/web/viewport/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>iPadで見た場合viewportを変更</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></meta></head></html>

カルーセルスライダー

http://efu.sakura.ne.jp/web/carousel/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>カルーセルスライダー</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

YouTubeAPI サムネイルをクリックで動画を切り替える

デモ http://efu.sakura.ne.jp/web/youtubeapi/index2.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>YouTube API サムネイルクリックで動画切替え</title> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </link></meta></head></html>

jQueryでパラパラアニメーション

デモ http://efu.sakura.ne.jp/web/flip/画像1枚ずつ横に動かしてアニメーションさせる <html lang="ja"> <head> <meta charset="UTF-8"> <title>パラパラアニメーション</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> <link rel="stylesheet" href="css/style.css"> </link></link></meta></head></html>

jQuery UI Datepicker

jqueryui.comjqueryui.comgithub.comデモ http://efu.sakura.ne.jp/web/datepicker/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Datepicker</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

jQuery UI Slider

公式サイト jqueryui.comデモ http://efu.sakura.ne.jp/web/slider/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Slider</title> <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css"> </link></meta></head></html>

グラーデーションをアニメーション

http://efu.sakura.ne.jp/web/grd/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>グラデーション</title> <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"><…</link></link></meta></head></html>

ドロワーメニュー

デモ http://efu.sakura.ne.jp/web/drawermenu/ <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.1.min.js"></script> <script src="script.js"></script> </head> <body> </body></html>

スポットライト

http://efu.sakura.ne.jp/web/mask/以前書いた記事 mmmmofu.hatenablog.combackground-clip: textにした文字「●」をpaddingで動かしてスポットライト風にする。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>スポットライト</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

ページャー付きタブ切り替え

デモはこちら http://efu.sakura.ne.jp/web/paging/1ページ目2ページ目3ページ目 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページャー付きタブ切り替え</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> </meta></head></html>

画像を保存させないようにする対策

右クリック禁止(PC) 全体(HTML) <body oncontextmenu="return false;"> 画像にのみ(jQuery) $(function(){ $("img").on("contextmenu",function(){ return false; }); }); 長押しアクションを禁止(スマホ) img{ -webkit-touch-callout:none; -webkit-user-select:none; -moz-touch-callout:none; </body>…

スクロール中はページトップが非表示になる

http://efu.sakura.ne.jp/web/pagetop/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール中はページトップが非表示になる</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> </body></html>

遅れて付いてくるメニュー

http://efu.sakura.ne.jp/web/menu2/ <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.1.min.js"></script> <script src="script.js"></script> </head> <body> </body></html>

Windowオブジェクト

windowオブジェクトはJavaScriptにあらかじめ用意されているオブジェクト。 全てのオブジェクトの親(グローバルオブジェクト)で windowの情報を取得したり操作や設定することができる。 windowの表記は省略することが可能http://efu.sakura.ne.jp/web/wind…

window.locationでURL情報を取得

デモ http://efu.sakura.ne.jp/web/location/?1481711331426#hash <html lang="ja"> <head> <meta charset="UTF-8"> <title>location</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> .text01 { font-size: 36px; text-align: center; } </style> <script> $(function…</meta></head></html>

ユーザーエージェントでスマホ用にviewportを切り替える

$(function(){ var contentWidth = 750; var iphone = navigator.userAgent.search(/iPhone/); var android = navigator.userAgent.search(/Android/); var ipad = navigator.userAgent.search(/iPad/); var ipod = navigator.userAgent.search(/iPod/); if(…

CSS3でメニューアイコンのアニメーション

デモ http://efu.sakura.ne.jp/web/menu/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>menu</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/script.js"></script> </head> <body> </body></html>

コンテンツを縦横斜めにスライドさせるjQuery faux-3D Viewport

デモはこちら http://efu.sakura.ne.jp/web/3d/jQueryとjQuery easingを読み込んでおく HTML <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery faux-3D Viewport</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </link></meta></head></html>

要素が下から上に表示されるアニメーション

下から上が上手くいかなかったのでメモ デモはこちら http://efu.sakura.ne.jp/web/btmtop/ <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.1.min.js"></script> </link></meta></head></html>

2列に並んだリストを押すと押したエリアの下がアコーディオンで開く

デモはこちら http://efu.sakura.ne.jp/web/accordion2/ HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <…</link></meta></head></html>

要素が順番にフェードインしながらスライドダウン

デモはこちら http://efu.sakura.ne.jp/web/fisd/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>SlideDown</title> <style> body { background: #FCFAF2; border-top: 10px solid #0C0C0C; margin: 0; } ul { width: 900px; height: 400px; margin: 50px auto 0; letter-spacing: -0.4em; font-size: …</meta></head></html>

cssText

「!important」を使用したい時など $(".rubiks_cube").css({'cssText': 'marginp:0 !important;padding:0 !important;' }); HTMLのstyle属性を上書きするので、 HTMLのstyle属性で指定したstyle、もしくはJSで変更したstyleが無効になる。 参考サイト www.we…

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>