webサイト制作の勉強|2018年9月クラス用ブログ

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

jQuery

iPhoneの仕様に対応したresize設定

iPhoneとandroidではresizeイベントの定義が若干違く、iPhoneでのresizeは横だろうが縦だろうがスクロールするとrisize判定がされてしまうので、iPhone用に横幅のみresize判定が取れる様にします。 横幅のみに対応したresizeイベントの記述 $(function(){ va…

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

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

高機能なフィルタリングjQueryプラグイン 「Shuffle.js」

vestride.github.io http://felica29.starfree.jp/shuffle/ $(function() { $('#btn li').on('click', function() { var $this = $(this), $grid = $('#animationList'); $('#btn .active').removeClass('active'); $this.addClass('active'); $grid.shuffle…

$.ajax(jQuery)とfetch APIを使ってsvgを外部ファイルとして読み込む

svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>

jQueryでのcookieの指定

Cookie(クッキー)とは? Cookie(クッキー)とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…

アコーディオンパネルの作成

<div class="toggle seminar"> <h2>セミナー</h2> <dl class="list show"> <dt>2018年11月21日</dt><dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dt>2018年11月19日</dt><dd>テキストテキストテキストテキストテキスト</dd> <dt>2018年10月21日</dt><dd>テキストテキストテキスト</dd></dl></div>…

YouTube動画を背景に埋め込むプラグイン「YouTube Video Website Background」

今回はYoutubeのデータをサイトに埋め込む、jQueryプラグイン「videobackground」を使ってみます。 YouTubeの動画を使うので、自前のサーバーのレスポンスを気にする必要がありません。さらにフリーのレンタルサーバーの多くは動画のような大きなデータのア…

jQueryを使ったajax

Ajaxとは「Asynchronous(エイシンクロナス) JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを…

ページ内リンクへのスムーススクロール

通常であれば以下の記述で良いのですが、以下の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。 #がついている全てにスムーススクロールさせる場合 $(function(){ // #で始まるアンカーをクリックした場合…

背景画像をスライド(フェード)させるjQuery 「VEGAS 2 BACKGROUND SLIDESHOW」

img要素をスライドさせるプラグインは沢山ありますが、今回は背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。http://vegas.jaysalvat.com/ <script> $(function(){ $('header').vegas({ transition: 'fade', slides: [ { src:'img/01.png' </script>…

jqueryでのパララックス

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

ドロワーメニュー

スマホサイトでは3本線のハンバーガーメニューを押したら、横からメニューが出て来る。という動きをよく見かけます。 そういうメニューを「ドロワーメニュー」と言ったりします。jonsuh.com もちろん便利なプラグインはありますが、このようなシンプルな動き…

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

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

jQueryを記述する上で気をつけるポイント

jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。 jQueryを適切に記述する事である程度の改善は出来るの…

クリックする度にdivごと表示を切り替える

今回の会社概要は日本語と英語を併記。スマホでは横並びでは見辛く、かといって縦に並べると冗長化してしまうので、適した見せ方を考えましょう。 <div class="info"> <h2>会社概要</h2> <dl> <dt>会社名</dt><dd>株式会社フェリカ企画</dd> <dt>所在地</dt><dd>東京都豊島区南池袋2-12-9 KKビル4F</dd> <dt>設立日</dt><dd>2000年1月1日</dd> <dt>代</dt></dl></div>…

スクロールしたらナビゲーションが固定

<html> <head> <meta charset="utf-8"> <title>スクロールイベント</title> <style> html,body,h1 { margin:0; padding:0; } body { height:2000px; } header { width:100%; background:#399; } .header-inner { height:20vh; } h1 { text-align:center; line-height:20vh; } .fix h1{ text-align:left; line-height…</meta></head></html>

jQueryでクリックする度にテキストを切り替える

<html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryでのテキスト変更</title> <style> html,body { margin:0; padding:0; } img { vertical-align:bottom; } .txt { width:200px; height:50px; border:1px solid #444; border-radius:6px; text-align:center; line-height:50px; margin:50px auto 20px…</meta></head></html>

スムーススクロール

scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。 { scrollTop: 0 }であればtopから0ピクセ…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

jQueryとは

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