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

webかたつむり

ウェブデザインを勉強中

jquery

DOM, node について

DOM document object model documentのツリー構造そのものなのか? node DOMツリーにぶら下がっているオーナメント。 それぞれのHTML要素。 nodeとは瘤のこと。

jQuery append prepend

before リファレンスするのは「.vacation」。 このクラスの要素に対して前に配置する、これがbefore。 「.vacation」との繋がりはない。(関係性がない) after beforeの反対。これも関係性はない。 prepend 「first child」として追加する。 「.vacation」…

jQuery selector まとめ

基本形 $(" "); これさえ知っていればあとはCSSと同じ。 $("li"); $("p"); $(#id); $(".class"); $("#id li"); $(".class li"); pseudo selector pseudo 擬似 :first :last :odd :even liのindexは、先頭が「0」(配列と同じ) ゆえにeven(偶数)、は先頭…

scrollTop jQuery

<script> $(function(){ $('.pageTop a').on ('click', function(){ $('body, html').animate({scrollTop: 0}, 'easeIn'); return false; }); });

課題 mobileFirst / 画像置換

ウィンドウサイズによって画像を変える。 imgに文字要素が含まれている場合、画像が小さくなると当然文字も小さくなる。 PCの横長、SPの縦長を一つの画像で賄うことにはそもそも無理がある。 変換するファイルにはクラス名をつける。今回の場合「convert」と…

課題 mobileFirst / jQuery selector

.parent() .siblings 複数形ですね 親でなく、子でなく、兄弟姉妹の関係。 クリックする部分が、「tab」 「tab」は<ul>と<li>で作る。<ul class="tab">。 クリックするのはいつも<li>でなく<a>。リンクは<a>で作る。 $(.tab a).on('click', function(){};) 現在表示されているpanelに「current</a></a></li></ul></li></ul>…

jQuery を読み込む順番

制作実習課題にjQueryなど、殆ど使わない予定だったのに、気が付くとどんどん増えていきます。 ファイルによっては(たとえばgooglemapsとか…)読み込む順番によってうまく動作しない、といったことも起こり始めます。 どのように整理するか基本的な考えかた…

googlemaps を埋め込む

地図の中心に表示する座標を取得する まず、必要な位置情報を取得する。 Geocoding - 住所から緯度経度を検索 住所を入力すると、緯度経度を座標で教えてくれます。(googlemapsに値を代入しても誤差が生じる場合がある。googlemapsから値を取得するほうが思…

header を position:fixed; そして smooth scroll にしたい。

上手くいかなかったときの記述。なにがどのように悪さしていたのかは不明。 ページトップに移動するボタンに<a>がついていなかった。 <div id="content">が閉じていなかった。これは問題外! htmlを修正 <div class="arrow "><a href="#"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></a></div> 結局これは元に戻します。後ほど説明。 cssを修正 headerはposition: fixed</div></a>…

smooth scroll "スクロールすると表示されるトップへ戻るボタン"

.scroll();は「スクロールした時」、イベントが発生した時点で(function)が起こる。 .scrollTop()、は数値。「スクロール可能な範囲」(windowではない!)の1番上から数えたピクセル数。 $('body', 'html').animate({'scrollTop':'0'},'slow'); どうして…

課題:06-10

問10 button を作る。<p><button class="redbtn"><a href="#"> red </a></button></p> button の見映えを変更する。border-radius imgをfloatでレイアウトする。margin の値をうまくとって余白が均等になるようにする。 jQueryでは、どのようにセレクターを使うかで悩んだ。取っ掛かりでは、属性セレクタを使うことに…

mega drop-down menu その3

http://ohtafelica.webcrow.jp/megaDropdown/ script accordion menuに近いスクリプトですが、動いてくれます。 まずは一つだけですが、今日はこれまで。 <script>$(function(){ $('#mddWrap').hide(); $('#mddNav>ul>li').on('mouseover',function(){ var wrap=$(th…

mega drop-down menu その2

cssにとりかかる。 まずはシンプルなナビゲーションだと思ってはじめます。 見映えはボディー幅で、ボタンが5つ、幅800pxに収めてレイアウトします。 header{ width: 100%; height: 100px; background: #777; text-align: center; box-sizing: border-box; …

mega drop-down menu その1

まず準備、図面を頭に入れる 絶対に入れ子構造を最初から作ろうとしない。 まずナビゲーションを作る、と考える。 ボタンはボタンだけでなく、ボタンの外側に見えない部分が隠れている。 その見えていない部分が、#mddWrap(構造部分、ブロック) #mddInner(内…

課題:06-09

問09 cssがポイント。 全体を包む、#wrap containerのようなもの。 #wrapには、position: relative; 。ボタンをposition:absolute;で表示するため。 #wrapの中には、ボタンが2つと、#carouselが入っている。 表示領域、いちばんメインの、#carouselには、ov…

課題:06-08

問08 ul,liのリセットを忘れて時間をかける。 途中から構造を変えるときは要注意。 サムネイルは、メイン画像へのリンクだと考える。 リンク→href属性、と連想する。 サムネイルにはhref属性を付けなければならない。 サムネイルは、なににリンクするのか?…

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

<ul class="nav">の<li>、そのなかにもう一つの<ul class="menu">を作る。 それだけだと、最初に表示されている「カテゴリー」の見栄えだけを変えられないから<div>を作る。 そうすれば、「カテゴリー」のbackground,height,borderを「プルダウン」の部分と変えられるし、なにかと便利。 クリックしてsl</div></ul></li></ul>…

jQuery "modal window" その4

指示されたscriptと、違う記述するのは気持ちが悪いので先生に相談してみると、解決方法がわかりました。 とりあえずscriptはfancyBoxのHPに記載されているとおりに戻す。 $(document).ready(function() { $(".fancybox").fancybox(); }); 問題はhtmlのグル…

jQuery "modal window" その3

jQuery "modal window" その2

Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox. <a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a> <a class="fancybox" rel="group" href="big_image_2.jpg"></a>

jQuery "modal window" その1

赤丸部分の画像ファイル 矢印などの画像 jquery.fancybox.css jquery.fancybox.pack.js jquery.fancybox.js jquery.fancybox-media.js youtubeとの連携に必要。 jquery.mousewheel-3.0.6.pack.js マウスホイールをまわすとスクロールするプラグイン。 htmlを…

jQuery plugin "fancy Box" 1

What's new Version 2 is completely rewritten with new features and updated graphics. Notable changes Extendable using helpers Responsive (try resizing window while fancyBox is open) Integrated slideshow New gallery transitions Uses CSS3 (s…

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>