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




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>…

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