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

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

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

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

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

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

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

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

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

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

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

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

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

前回のブログに引き続き、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(){$…

次は簡単シンプルな基礎のjQueryの命令についてです。 HTML要素に含まれるテキストをjQueryで変更または取得するには、text()という命令を使う。 $('p#first').text('変更後'); ●テキストの取得 text()のカッコ内に何も記述しない場合、セレクタで指定した要…

ずっと自分でjQueryを書けたら…と思っていました。 でもなんだかんだでないがしろにしてしまっていたり、コピペで済ませていたり…。 早速勉強を始めます‼頑張るぞー！＼(^ o ^)／ このブログでは、私のためのメモとして使わせて頂きます。 （後で見返したら…

cssの「background-size」はIE8に対応していません！IE8でどのように表示されるのか、いつも見る前は不安でたまらないですが…。今日はそれを解消できる技を教えてもらいました‼︎Modernizrhttp://modernizr.com上のサイトのmodernizr.jsを読み込ませます。開…

今日はレスポンシブサイトのコーディング作業だったのですが、初めて使った素晴らしいものがありました！「hightLine.js」です‼︎ググって最初に出てきたのがこれhttp://blog.webcreativepark.net/2007/07/26-010338.htmlレスポンシブで2カラム以上のボックス…

今日のコーディングで学んだことを書いていきます。まず、imgタグのaltには、しっかり代替テキストを記述すること。結構中途半端に書いてしまっていることが多いです。。改善します！また、ページ全体を見て、どこがh1、h2、h3、pタグになるのかを決めること…

まず、今日のコーディングで習ったことを一つずつメモしていこうと思います。まずはクラスの付け方について！私が今まで結構やってきちゃっていたのは、外側のdivなどにクラス名やid名をつけて、その中の要素に対してcssをあてるというものでした。でも、こ…

今日はまず、「header」内に設定するmeta情報について書いていこうと思います。「og:image」「og:url」などです。実はまだ知らなかったりします。(^ ^;; og:image 徹底解説、意味も設定画像スペックもこれでばっちり！ - Six Apart ブログ フェイスブック、…

PSDデータからmargin、paddingなどなど、間隔を測るときに楽チンな方法を今日は教わりました。(デザイナーさん、ありがとうございます‼︎)私は今まで「シェイプツール」で長方形を作ってました。あまりいいやり方じゃないんだろな…とは思ってました(^^;;教え…

自分がコーディングしたものをキャプチャして、PSDデータと合わしてみる‼︎自分でPSDを見て測っているつもり…になっていて、実は大雑把に作っていたと実感しました。(もしかしたら「今までやってなかったの⁉︎」と驚かれるかもですが。。(^^;; )Chromの追加機…

昨日に引き続き、『Web制作者のためのsublime textの教科書』を参考に、 パッケージ「Emmet」の使い方を学びます。 ● HTML5を挿入 「html:5」 の記述後に「ctrl + E」で展開してくれます。 展開するのに使うのが ・「ctrl + E」もしくは「tab」 入力後の一番…

サブライムテキストを初めて使用します。Dreamweaverに慣れていた私にとってドキドキです…(^ ^;; 今日はインストールした際の設定を、復習感覚のメモ書きにしていきます。 また、今回サブライムテキストの設定をする際に使用したのが、『Web制作者のためのSu…