読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

Google画像検索風のjQuery

Google画像検索っぽいスライドにするjQuery(レスポンシブ対応) Googleで画像検索した際に表示される、サムネイルをクリックすると詳細エリアが広がり画像の情報が出てくるやつです。一応、レスポンシブ対応にもなっていますが、しっかり対応させるには画像処…

SEOに適した無限スクロールの制作

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

フィルター機能とソート機能がついた「MixItUp」

ある程度の数のサムネイルを見せる時にはフィルタリング機能やソート機能を使い、グループ分けしてあげる事がサイトの見易さにつながります。 mixitup.kunkalabs.com <html lang="ja"> <head> <meta charset="utf-8"> <title>MixItUp</title> <link href="style.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </link></meta></head></html>

clickイベントとtransform

以前やったtransform(変形)ではhover時にtransformを使用し、移動、回転、拡大などを行いました。 ただ、hoverでのtransformはマウスを離すと元に戻ってしまうという問題があります。 yachin29.hatenablog.com 今回はhoverでは無く、jQueryのclickイベントを…

無限スクロールの導入

FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見…

画像を遅延読み込みさせるjQueryプラグイン「Lazy Load」

Lazy Loadとは画像のレイジーローディング(遅延読み込み)を実装する為のjQueryプラグインです。前回やった無限スクロールと同様に画像を遅延読み込みさせる事で転送量の節約、ページの表示速度の向上に繋がります。 一見メリットだらけに思えますが、こうい…

youtubeの動画を背景にするjQueryプラグイン「videobackground」

HTML5が普及し、videoタグで動画をHTMLに入れる事が容易になり、最近は動画を使ったwebサイトも珍しくありません。feel.kiyomizudera.or.jp sliceof.heartland.jp storq.com 今回はYoutubeのデータをサイトに埋め込む、jQueryプラグイン「videobackground」…

モーダルウィンドウ

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

モーダルウィンドウ

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

フィルター機能とソート機能がついた「MixItUp」

ある程度の数のサムネイルを見せる時にはフィルタリング機能やソート機能を使い、グループ分けしてあげる事がサイトの見易さにつながります。 mixitup.kunkalabs.com <html lang="ja"> <head> <meta charset="utf-8"> <title>MixItUp</title> <link href="style.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </link></meta></head></html>

高機能なLightBox系プラグイン「FancyBox」

jQueryプラグイン「fancyBox」は画像だけで無く、YouTubeやGoogleMapなどにも対応しているLightBox系のプラグインです。 最新のfancyBoxv 2.x からライセンスが変わり、商用(営利目的)の場合は有料となっているためライセンスの取り扱いに注意が必要です。…

高機能なLightBox系プラグイン「FancyBox」

jQueryプラグイン「fancyBox」は画像だけで無く、YouTubeやGoogleMapなどにも対応しているLightBox系のプラグインです。 最新のfancyBoxv 2.x からライセンスが変わり、商用(営利目的)の場合は有料となっているためライセンスの取り扱いに注意が必要です。…

既存のデータにjQueryプラグインを導入する

bxslider.com lokeshdhakar.com index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> </link></link></link></meta></head></html>

既存のデータにjQueryプラグインを導入する

bxslider.com lokeshdhakar.com index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.bxslider.css"> <link rel="stylesheet" href="css/lightbox.css"> </link></link></link></meta></head></html>

jQueryプラグイン

jQueryプラグインとは、jQueryと一緒に利用するJavaScriptライブラリーのことです。jQuery自体、JavaScriptに比べると簡単な記述で利用できますが、jQueryプラグインは必要なjQueryがすべて既にパッケージングされている為、より手軽にWebサイトにさまざまな…

無限スクロール「Infinite Scroll」のカスタマイズ

github.com オプション機能の追加 <script> $(function(){ $('#contents').infinitescroll({ navSelector: ".navigation", nextSelector: ".navigation a", itemSelector: ".article", dataType: "html", animate: true, extraScrollPx: 200, //次のコンテンツを読み…

ポートフォリオなどに使えるframework.js

今回の「framework.js」は画像などをカテゴライズして表示してくれるjQueryです。ポートフォリオなどに非常に向いています。 Creating a “Filterable” Portfolio with jQuery - Envato Tuts+ Code Tutorial 作りは簡単で、まずはメニュー部分のulにIDでfillt…

ポートフォリオなどに使えるframework.js

今回の「framework.js」は画像などをカテゴライズして表示してくれるjQueryです。ポートフォリオなどに非常に向いています。 Creating a “Filterable” Portfolio with jQuery - Envato Tuts+ Code Tutorial 作りは簡単で、まずはメニュー部分のulにIDでfillt…

要素をグリッド状に配置してくれる「jQuery Masonry」

グリッドに沿って各要素をレンガ状にレイアウト出来る「Masonry」、ウィンドウサイズが変わった際のアニメーションなども含まれていて、初心者の方でも比較的簡単に導入でき、カスタマイズも容易に出来るのでぜひ使ってみましょう。 http://masonry.desandro…

CSS3アニメーション・transitionのよるホバーアクション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

CSS3アニメーション・transitionのよるホバーアクション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

シングルページでナビゲーションをカレント表示するjQuery

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>カレントjQuery</title> <link href="style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <div id="container"> <…</div></body></html>

背景画像を固定+もろもろ

index.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> <script type="text/javascript"> $(function(){ var topBtn = $('#to-top'…</link></meta></head></html>

マウスホバーした進入方向からオーバーレイ要素がスライドしてくるjQuery

http://yachin29.html.xdomain.jp/sample2.html 参考サイト wiseyeti.co.ukwiseyeti.co.uk index.html <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>無題ドキュメント</title> </meta></meta></head></html>

スクロールするとボタンが出てくる「Scroll to Top」

index.html <script> $(document).ready(function(){ $("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { //この数値で何pxスクロールしたらアイコンが現れるかを設定 $('#back-top').fadeIn(); } else { $('…

bodyの横幅一杯に表示するスライダーjQuery

以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryのプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。 今回のスライドショーの主なポイント ブラウ…

画像やテキストを本のようにめくれるjQuery「bookblock.js」

今回のjQueryは画像やテキストを本のようにめくれるjQuery「BOOKBLOCK」です。 動きもなめらかでページをめくる際の影の付き方なんかも非常に綺麗です。 「BOOKBLOCK」には3種類の見せ方があるので、用途によって上手く使い分けましょう。 「BOOKBLOCK」は画…

fraemwork.jsのカスタマイズ

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>framework.jsを使ったデモページ</title> <link href="css/screen.css" rel="stylesheet"> <link href="css/caption.css" rel="stylesheet"> <link href="source/jquery.fancybox.css" rel="stylesheet"> </link></link></link></meta></head></html>