初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery

HTML CSS Javascript スマフォサイトナビをクリックすると表示・非表示にする

<html lang="ja"> <head> <meta charset="UTF-8"> <title>モバイルサイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> <link rel="apple-touch-icon" href="touch-icon.png"> </link></meta></meta></meta></head></html>

jQuery Google画像検索風に表示する

Google風に画像を表示できるjQueryを記述します。Googleで画像を検索するとサムネイルが出てきます。 画像をクリックするとスペースが空いて大きな画像を 表示します。 <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/google.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/google.js"></script> <title>…</link></meta></head></html>

jQuery ホバーした方向によってスクロールの方向も変わる

職業訓練の先生に教えてもらったサイトのjQueryの動きが カッコ良かったのでアナライズして余計な記述を削ぎ落として 分かりやすくシンプルに変更してみました。画像をホバーするとホバーした方向から画像にカバーがかかる エフェクトです。 デモはこちらに…

jQuery Frameworksでソート機能をつける

jQueryでソート機能をつけてみます。 とてもシンプルな記述でソートがつけられます。以前のデータの流用なのでFancyboxも適応しているものになります。 <html> <head> <meta charset="UTF-8"> <title>Fnacy Box</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.fancybox.css"> </link></link></meta></head></html>

jQuery プラグイン Fancybox

jQueryのプラグイン・Fancyboxを使ってみました。 画像をクリックするとふんわり大きく表示されたり Youtubeを表示したら色々なことが出来ます。 <html> <head> <meta charset="UTF-8"> <title>Fnacy Box</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.fancybox.css"> </link></link></meta></head></html>

jQuery セレクター・メソッド・イベント一覧表

数日間記述したセレクター・メソッド・イベントについて一覧にまとめました。 jQueryを使うときに役に立つかと思います。 jQuery セレクター 一覧 jQuery メソッド 一覧 jQuery イベント 一覧 jQuery セレクター 一覧 ※表中の「要素」はセレクターで指定され…

jQuery イベント 2

昨日に引き続きイベントについて記述していきます。イベントが発生した要素を取得する昨日ブログに書きましたclick()イベントも盛り込んでます。 新たにeq()セレクターを使います。eqセレクターは特定の要素のうち、指定した順番の要素を取得するセレクター…

jQuery イベント 1

さて前回までセレクターとメソッドについて書きました。再度おさらいですが jQueryを使うための流れは下記です。 どの箇所に対して:セレクタ 何をさせる:メソッド どのタイミングで:イベント 今回は【どのタイミングで】のイベントについて書いていきたい…

jQuery メソッド

前回はjQueryの【どこに対して】に当たる部分のセレクタについて記述しました。 今回は【何をさせる】のメソッドについて触れていきます。 まだ説明が基本ばかりでjQueryっぽくなりませんがこの基礎を身につけると 後々ソースを修正する際や記述するときに楽…

jQuery セレクタ

前回も書きましたがjQueryの文法は大きく分けて三つに分かれます。 どの箇所に対して:セレクタ 何をさせる:メソッド どのタイミングで:イベント どこの{なにを:どうする} では三つの項目について順に触れていきたいと思います。 セレクタ 【どこの箇所…

jQuery 記述方法

前回はjQueryの導入方法について記述しました。 今回は具体的にjQueryで何が出来るのか?記述していきたいと思います。 最初のうちはこんなのCSSで出来るじゃないかと思うかもしれませんが 後々複雑な記述にも対応できる為、シンプルなものから取り組んでい…

初めてのjQuery

jQueryの概要と導入方法 先日までJavascriptについて記述してきましたがjQueryの授業が始まりましたので jQueryについて少しずつ更新していきます。 jQueryとはJavascriptの中のライブラリのひとつです。 jQueryを使うことによってDOM(Document Object Model…

topへ戻る