webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

jQuery

レスポンシブサイトでのcssスプライト

前回の授業で作った企業サイトにナビゲーションを追加します。 レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。 また、今回のナビゲーションボタンの画像はCSSスプライトで作ります。 さらに参考サ…

slideToggleに合わせてテキストを変更させる

今回は以前作った既存サイト(キリン)の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。slideToggleの動きに合わせたスイッチの作成 以前はtoggle…

jQueryでのtouchイベント

スマートフォンでももちろんjQueryの click イベントは基本的に有効です。 しかし、スマートフォンやタブレットで click イベントを動かそうとすると、1テンポ遅れたもっさりとした動きになります。 そこで出てくるのが「touch」イベントです。 PCでは判り…

MixItUp

www.kunkalabs.com <html> <head> <meta charset="utf-8"> <title>mixItUp3の練習</title> <style> html,body,h1,p { margin:0; padding:0; } img { vertical-align:bottom; } body { overflow-y: scroll; } .container { width:900px; margin:50px auto; overflow:hidden; } .container > div { width:300px;…</meta></head></html>

bodyの幅によってimg画像を切り替える

まずは切り替えたい画像に指定の名前を付ける。 sp用の画像には「_sp」 pc用の画像には「_pc」 切り替えたい画像のimgタグに指定のクラス名を指定する。 <ul class="bxslider"> <li><img src="img/img_keyvisual_01_sp.jpg" class="switch"></li> <li><img src="img/img_keyvisual_02_sp.jpg" class="switch"></li> <li><img src="img/img_keyvisual_03_sp.jpg" class="switch"></li> </ul> …

モバイルファーストで制作しているサイトにjQueryを導入

今回のコーポレートサイトには複数のjqueryを導入します。 タブパネル アコーディオンパネル ハンバーガーメニュー キービジュアルのスライダー widthによる画像置換 以上のように今回は多くのjQueryを導入する事になりますが、1つ1つしっかりと動きを理解…

ページローディング中にアニメーション画面を表示させる

liginc.co.jp photoshopvip.net uxmilk.jp 最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また…

jQuery演習問題

【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したらブラウザーに表示するよう記述しなさい。1つは「「スローで表示」もう1つは「1秒かけて表示」と表示の仕方をわけて記述しなさい。。 【問02】【問01】で記述…

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では if($(window).innerWidth() <= 767){ }; のようにwindowの横幅を基準に条件分岐させるパターンをやりました。 今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。 ユーザーエージェント ユーザーエージェント(UserAge…

ドロワーメニュー

スマホサイトでは3本線のハンバーガーメニューを押したら、横からメニューが出て来る。という動きをよく見かけます。 そういうメニューを「ドロワーメニュー」と言ったりします。もちろん便利なプラグインはありますが、このようなシンプルな動きはプラグイ…

jQueryをスマホの時だけ動かす

今回作成したハンバーガーメニューをウィンドウをリサイズしても、ちゃんと動くようにしてみましょう。 .resize( ) ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理…

背景画像をスライド(フェード)させるjQuery 「VEGAS 2 BACKGROUND SLIDESHOW」

img要素をスライドさせるプラグインは沢山ありますが、今回は背景画像をスライドさせる「VEGAS 2 BACKGROUND SLIDESHOW」を使用します。http://vegas.jaysalvat.com/ <script> $(function(){ $('header').vegas({ transition: 'fade', slides: [ { src:'img/01.png' </script>…

シングルページの作成

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。 今回の制作のポイント トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え ナビゲーションはある程度スクロールしたら固定 SNSの埋め込み google…

スクロールしたら、ナビゲーションを固定する

シングルページなどの縦長ページの場合、上下にスクロールする量がどうしても増えてしまいます。なのでユーザーがいつでも移動出来るように、常にナビゲーションを画面上部などに固定する必要があります。ただ固定するだけならposition:fixedで良いのですが…

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

ハンバーガーメニュー

<html lang="ja"> <head> <meta charset="utf-8"> <title>スムーススクロール</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="scroll.css"> <script src="jquery.min.js"></script> <script> $(function() { $('#menu').hide(); $('#hum').on('click',function(){ $('#…</link></meta></meta></head></html>

スムーススクロール

サイトのトップに戻すだけであれば、以下のようにシンプルな記述で大丈夫です。 $(function() { $("#to_top").on('click', function () { $('html,body').animate({ scrollTop: 0 }, 'swing'); return false; }); }); 複数の場所にスムーススクロールで移動…

アコーディオンパネルの作成

<body> <dl> <dt>Step.1</dt> <dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque urna, molestie id cursus non, bibendum nec magna. Mauris consequat faucibus ante sollicitudin ullamcorper. Proin et felis orci. Nulla vitae diam sit amet felis se</p></dd></dl></body>…

jQueryでのスライド式イメージギャラリー

<html lang="ja"> <head> <meta charset="utf-8"> <title>スライド式イメージギャラリー</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.min.js"></script> <script> $(function(){ $('#thumbnail a').on('click',function(){ $('#big_photo img').before('</link></meta></head></html>

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…