webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

javascript

jQuery plugin "fancy Box" 2

Various types HTML JavaScript Ajax Iframe Inline SWF Youtube (iframe) Google maps (iframe) Non-existing url Alternatively, you can set content type as an option: $(".open_ajax").fancybox({type: 'ajax'});. Note, ajax requests are subject to…

"bx slider" を使ってスライドショーを作る

使い勝手云々よりも、少しだけいじってみたくなったので… div id="container"を作って画面中央に配置。"container"の幅は<img>の幅と同じで大丈夫そう。 pagerの大きさ、マージン、ホバーの色をいじってみました。 スライドさせる写真のファイル名は「0」からでは…

jQuery plugin "bx slider"

step1 ファイルの準備 htmlファイルがあるフォルダに、js ,css ,img フォルダを用意する。この辺りの準備は自分の段取りとして習慣にしておく。 jsフォルダには、jQueryのファイルを1系統、2系統、migrateの3つと、bxSliderのjsファイル、jquery.bxslider…

jQuery plugin vol.2

Bx slider Max Image2

jQuery plugin vol.1

crossfade.js homepagehttp://mikefowler.me/crossfade.js/ download sitehttps://github.com/mikefowler/crossfade.js.git jQuery Easing Plugin http://gsgd.co.uk/sandbox/jquery/easing/ cross fader v1.1

.animate(); 4

<html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Q5</title><style>.box{ display: none; width: 300px; height: 300px; line-height: 300px; text-align: center; color: white; border: 4px solid white; box-sizing: border…</meta></meta></head></html>

.animate(); 3

<html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Q3</title><style>.box{ display: none; width: 300px; height: 300px; line-height: 300px; text-align: center; color: white; border: 4px solid white; box-sizing: borde…</meta></meta></head></html>

.animate(); 2

width; 300px height; 300px の色の異なる正方形を3つ非表示から各々、即座に表示、スローで表示、5秒かけて表示させる。 html <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.box{ display: none; width: 300px; height: 300px; line-height: 300px; te…</meta></meta></head></html>

.animate(); 1

ボタンをクリックしたら、表示してある width: 100px、height: 100pxの正方形が1,000px 移動して止まるように記述する。duration=600ms html <html lang="ja"><head><meta charset="utf-8"><title>Q2</title><style>.box{ width: 100px; height: 100px; background: #777; line-height: 100px; text-align: center; color: white</style></meta></head></html>…

tab panel 手順2

<script>$(function(){ $('#panel li').hide(); $($('#tab>li a.selected').attr('href')).show(); });</script> $('#panel li').hide(); パネルの li をすべて隠す $($('#tab>li a.selected').attr('href')).show(); ul(#tab) 子供の li の.selectedの<a>のhref属性=つまり「#t</a>…

tab panel 手順1

タブパネルを作る 手順1 ulを2組、id をそれぞれ'tab'と'panel'にする。そして2つのul をcontainerで囲う。 ul #tabの li に<a href="#tab1">を書き足す。 ul#panelの li に id=tab1 をくわえる。 ここが仕掛けの肝です。 <body><div id="container"><ul id="tab"><li><a href="#tab1">html</a></li><li><a href="#tab2">css</a></li><li><a href="#tab3">javascript</a></li><li></li></ul></div></body></a>

insertBefore before insertAfter after

$('A').insertAfter('B'); AをBの後ろに挿入。B,Aの順番。 $('A').After('B'); Aの後ろにBをおく。A,Bの順番。 beforeとinsertBeforeも同じ関係 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title><style>html, body, p, ul, li, button{ margin…</meta></meta></head></html>

after before

$('A').after('B'); AのafterにB わかりづらい…が、基準(A)の後にBを持ってくると覚えるしかない。

append prepend appendTo prependTo

<html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title><style>html, body, p, button, ul, li{ margin: 0; padding: 0; line-height: 2.0;}#container{ width: 480px; margin: 50px auto;}button{ cursor: pointer;}u…</meta></meta></head></html>

appendTo prependTo

$('A').appendTo('B'); AをBの後ろに持っていく。 いますでに存在しているところの、AをBの後ろに移動する。 B Aの並びになる。 $('A').prependTo('B'); AをBの前に持っていく。 ちなみに、$('A').append('B');は、AにBをappend する。 Aの最後にBを持ってい…

append prepend

$('A').append(B); Aにくっつける。 Aに添える。なにを?Bを。 A(主体)にBを添える。 AのあとにBがくっつく。 $('A')prepend(B); Aの前に足す。なにを?Bですよ。 Aの前にBを持ってくる。 どちらも「新たに作ったもの」を挿入する、意味。

jQuery で console.log();

functionの中に、以下のように記述すれば良い。

toggle 画像置換

.toggle() 新しいバージョンではサポートされないメソッド。 jquery-migrate-1.3.0.min.jsをリンクすれば、過去のメソッドも使えるようになる。 <script src="js/jquery-2.2.3.min.js"></script><script src="js/jquery-migrate-1.3.0.min.js"></script> toggleさせたい関数を、.toggle(function(){ここの中に}); 列挙する。 <script> $(function(){$('img').toggle(functio…

.mouseover .mouseout 画像置換

2枚の画像を置換する html <body><div id="imgArea"><img src="img/ph01.jpg" alt="ph01" id="ph01"></div></body> jQuery のリンクがないまま、30分がんばってしまいました。 <div>にはsrcがないから、これではダメ。 <script>$(function(){ $('#imgArea').mouseover(function(){$('#imgArea').attr('src','img/ph02.jpg')}) .mouseout(function(){$('#img</div>…

アコーディオン 再び

手順の整理 1番先頭、以外のddは閉じる(hide) dtがクリックされたら クリックされた隣のddが閉じているならば すべてのddを閉じて クリックされた隣のddを開く 以上の5段階。 さらに、開いているddの上にあるdtの色を変える。 addClass, removeClassでcs…

ul でアコーディオン

html ここでのマークアップがすべてです。 クラス名の付け方にもセンスが必要です。 <div class="accordion"><ul class="nav"> <div class="category">家具・インテリア</div><ul class="menu"><li><a href="#">ソファ</a></li><li><a href="#">ベッド</a></li><li><a href="#">テーブル</a></li><li><a href="#">チェア</a></li></ul> <div class="category">ステーショナリー</div></ul></div>

jQuery 復習 定義型リスト で アコーディオンメニュー

定義型リスト をセンタリングする。 dl にはwidth を指定する dt には cursor: pointer; でクリックできるように見せる。 リストをbody のセンターに配置しようと思うならば、↓ではダメですね。 dt, dd の親は dl だから、親に対するセンターになってしまい…

jQuery 復習 箱で遊ぶ

一週間の復習。箱を作って、クリックすると閉じて見えなくなるようにする。 高さがなくなるから、再びslideDownしようがない… また、jQuery のファイルとのリンクを間違えてロスタイム。 「../」では1階層外に出てしまう。 index.htmlとjQuery の入っている…

jQuery アコーディオン

http://ohtafelica.webcrow.jp/20160519/index02.html Definition Listをつくる。 CSSを使って、形を整える。 dtのfont-weightを太くする。 ddには、適当な高さを設定しておく。 <dl><dt id="menuA">menu A</dt><dd>ここにメニューAの内容が入ります。</dd><dt id="menuB">menu B</dt><dd>ここにメニューBの内容が入り</dd></dl>…

traversing

Traversing | jQuery API Documentation

$('+dd',this) セレクタの第2引数について

セレクタで選んだ要素を、jQueryオブジェクトに変換する。 取得した要素に、メソッドで処理をする。 $('セレクタ','コンテキスト').メソッド(''); contexの意味がわかりませんが… $("A","B")というのは、どうやらBの中のAということ、らしい。 対象(オブジ…

jQuery クリックすると箱の状態が変わる

http://ohtafelica.webcrow.jp/20160519/index01.html 箱を3つ作ります(初期状態) 冒頭からつまずく。原因は、#div1{margin-left: none;} という記述。 noneは使えません。 <body><div id="container"><div id="div1" class="box">div1</div><div id="div2" class="box">div2</div><div id="div3" class="box">div3</div></div> jQueryを使って、箱を操作する。(最終形) まず、$(fun…</body>

jQuery セレクターのまとめ 3

擬似クラス これまでは、放置していた言葉の定義をこの辺りできちんと理解しておきたいところですが… いったい、要素に対する「擬似クラス」とは、なにか? 要素の、状況に応じたクラス分け。定まっていない、状況に対するクラス分け。 正式なクラスは「.(…

jQuery セレクターのまとめ 2

<div id="container"><dl><dt class="top">111</dt><dd class="top">222</dd><dt class="middle">333</dt><dd class="middle">444</dd><dt class="last">555</dt><dd class="last">666</dd></dl></div><script>$(function(){$("dl>dd").css("color", "red");});</script> 子セレクター $("dl>dd").css("color", "red");と記述すると… dl…

jQuery セレクターのまとめ 1

HTMLの要素をダイレクトに指定する方法 <h1><p>などを指定する。$("h1") , $("p") ID名がついた場合。例えば、<div id="wrapper">、を指定するには、$("#wrapper") Class名がついた場合。<p class="first">を指定するには、$(".first") とにかく、$("要素名、要素に対するID,またはクラス名") このあた</p></div></p></h1>…