webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

jQuery

jQueryでのcookieの指定

jQueryでのcookieのコントロールにはプラグインを使用するのが便利です。 github.com <script> $(function(){ if($.cookie("access")){ $('.box').css({display:'none'}); } else { $('.box').delay(2000).fadeOut(2000); }; $(window).load(function(){ $.cookie("a</script>…

視差効果(パララックス)

パララックスとは、視差効果のことです。 Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト…

GoogleMapのカスタマイズ

今回はGoogleMapをカスタマイズする方法です。 GoogleMapのピンを会社やお店のロゴ画像に変え、さらに通常のGoogleMapでは色が多く少しうるさいので、カラーをグレースケールにしてみましょう。 通常のgooglemap カスタマイズしたGoogleMap http://straight-…

jQueryのCDNに接続できない場合の代替策

ファイルデータの大きいjQuery本体をCDNにする事で実際には色々なメリットがあります。メリット 高速化 他サイトでのキャッシュが期待できる(※) 自サーバーにJQueryを置く必要がない などですが、 一方、万が一CDNがダウンしてしまった場合などには使えな…

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント(UserAge…

bxslider.jsを使用したサムネイル・スライドギャラリー

HTMLソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>bxslider.jsを使用したサムネイル・スライドギャラリーの作例</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> </link></link></meta></meta></head></html>

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…

jQueryでリサイズ時に処理するイベント

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントを指定する必要があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲーションボタンはもちろん表…

jQuery演習問題

【問01】 「変更」ボタンを押したら、既存のp要素内の先頭にテキストが挿入されるよう記述しなさい。変更前 よろしくお願いします。 変更後 はじめまして、よろしくお願いします。問02】 変更」ボタンを押したら、h1要素の後にp要素が挿入されるよう記述しな…

MixItUp v2.1.11のデータ

HTML <body> <div class="controls"> <label>カテゴリー:</label> <button class="filter" data-filter="all">全部</button> <button class="filter" data-filter=".category-1">赤いもの</button> <button class="filter" data-filter=".category-2">緑のもの</button> <button class="filter" data-filter=".category-3">黄色のもの</button> …</div></body>

モーダルウィンドウ

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、…

ページローディング中にアニメーション画面を表示させる

liginc.co.jp photoshopvip.net uxmilk.jp 最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また…

スムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…