Lightbox風モーダルウィンドウ

3-8ではLightbox風モーダルウィンドウが登場！これはいつもプラグインでやっていたjQueryでした。やっと自分で出来るようになるとは！やり方が実に「なるほど！」というものです。最初にHTMLとCSSで表現を考えておきます。今回はモーダルウィンドウが開い…

2015-02-14

自分のブログ、着々と進行中…。

はてなブログさんからの卒業を目指し、ちょこちょこ作っておりました。まだ完璧でないし、indexページだけ大枠完成という感じです。とりあえずアップしているものをもう載せてしまいます！ f0u0naganoブログとりあえず1件だけ投稿を載せました。2件、3件…

2015-02-13

ドロップダウンメニューをjQueryで

ドロップダウンメニューは実装するのが簡単です！命令は「mouseover・mouseout」とは違う、「hover」というものがでてきました。記述の仕方はこんな感じです。 $ ( セレクタ ).hover(function(){ マウスオーバー時の処理 },function(){ マウスアウト時の処…

2015-02-12

むむ、難しい…。まだまだ続きます、ｊQuery!!

前回のブログでも３章は難しいと言いました。3-7まで参考書を進めましたが、書き方が複雑になってきて、難易度が高くなっています！今日の勉強で気付いたことを何点か書いていこうと思います。 ①「:not」はすごくよく使う！３章の初めからここまで、:notを…

2015-02-10

なめらかアコーディオンパネル

3-3はアコーディオンパネルです！使う命令はslideUp()、slideDown()ですね。参考書では、例えばhoverした時のbackgroundを変えたり、展開中のパネルのタイトル部分のカラーを変えたり、実務に近いjQueryの例をあげてくれています。最初に紹介していた例は…

2015-02-09

3章は難しめ。。

テーブルのハイライトと画像の切り替えを勉強しました～。やっぱり２章と違い、記述量が多めになってきました！やることは簡単なんですが、すぐには出てこなそうです。初めて出てきたのは「index()」、「length」ですかね。 index()は要素の順番を表して…

2015-02-07

ブログ移転もうそろそろ！

土日を使ってwordpressを作っちゃおうと思います！はてなブログからの卒業‼ レンタルサーバーはロリポップの予定です。レスポンシブにしたい！…と思って、Photoshopを開いたものの、デザインが出来ない‼レイヤーを…えっと写真を置いてみようかな…どうしよ…

2015-02-06

アニメーションの続き

今日は簡単なアニメーションjQueryのhide()とtoggle()の勉強をしました。参考書で少し気になったのが、セミコロン(;)の扱いです！命令の一番後ろに記述するセミコロンですが、命令が続いた時、最初の命令にはセミコロンを付けないようです。うーん、ややこし…

2015-02-05

今日から簡単なアニメーションjQuery！

２－６章では簡単な show()、hide()、fadeあたりが登場してきます。まずはshow()！参考書では<button>をクリックするとdiv要素を表示させる命令が例としてあげられていました。参考書にも書いてありましたが、jQueryはcssと合わせて記述しないと動きません。 div</button>…

2015-02-04

Ajaxを使ってみよう

参考書の２－５になると、Ajaxが登場しました。正直「Ajax」ってなんだろう。。という感じで今まで触れてこなかった分野です。ですがさすがドーナツ本、すごく解りやすく解説されていました。 html内にあるリンクをクリックすると別のhtmlを読み込みますね…

2015-02-03

フォームの続き

①フォームの内容変更を感知するchange() change()はフォームの内容が変更されることを感知する命令です。実際のフォームでは、例えばセレクトボックスの選択行を変更すると、自動的にテキストが変わるなどです。（例）申込者：<select> <option value="お名前">個人</option> <option value="会社名">法人</option></select><p><span>お名前</span><input type="text"></p><script>$(function…

2015-02-01

フォーム機能を使いこなそう　val()

これからフォームをjQueryで操作していきます。前回に引き続き、自分のメモのような感じで書いていきます。フォーム部品の値を取得・変更する命令フォームを操作する専用の命令がval()です。val()を使うと、フォームに入力または選択されている値（value…

2015-02-01

イベントでタイミングを設定する

続きまして、参考書『Web制作の現場で使うjQueryデザイン入門』の２－３にあたります。 ◎Webページ全体の読み込みが終わり、準備が出来てからscript要素内の処理を実行させるために、 $(function(){ $('button').click(function() { /* Act on the event */…

2015-02-01

HTML／CSSを操作するjQueryの命令（続き）

前回のブログに引き続き、HTML・CSSを操作する命令について書いていきます。属性値の変更と取得 ①属性値の変更 attr() ・属性値の取得 attr() （例） <a href="http://google.co.jp">リンク先</a><script>$(function(){$('a').attr('href', 'http://yahoo.co.jp/');});</script> （例） <a href="http://google.co.jp">リンク先</a><script>$(function(){$…