JS/jQuery
こんにちわ！Noob Web Designer（@NoobWebDesigner）です！ 今回は軽量かつカスタマイズも簡単なjQueryタブの作り方をご紹介します。 このjQueryタブはvisibility:hiddenを使用するため、タブ内に読み込みの遅いものがある場合や、外部ファイル読み込みにも…
Scrollableを利用して、スライドできるサムネイルを作ります。準備Scrollableのサンプルページのソースから、以下のデータをダウンロードしてきます。Scrollableは新しいjQueryのバージョンで jquery.tools.min.js scrollable-horizontal.css scrollable-but…
jQueryの基本である要素を重ねることを使い、タブパネルを作ります。タブパネル実行例HTML: <html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.11.1.min.js"></script> </head> <body> <div id="container"> <ul class="tab"> <li></li></ul></div></body></html>
Lightboxの派生プラグインであるColorBoxを使います。 Colorboxは画像だけでなく、WEBページやインラインHTMLも表示することが出来ます。準備 Colorboxをダウンロードしてきます。 Colorbox - a jQuery lightbox 解凍して、任意のフォルダに移動。 「colorbo…
jQueryのプラグインであるLightBoxを使います。準備 LightBoxからプラグインをダウンロードしてくる。 解凍して、任意のフォルダに移動。 lightbox内の「index.html」をエディターで開き、必要ない部分を削除して、テンプレートを自分用に変更する。 例： <html lang="ja"> <head> <meta charset="utf-8"></meta></head></html>…
HTML/CSS操作の演習を行いました。今回はそのソースです。特定のID/クラスのスタイルを変更する使うメソッド「css();」 <html> <head> <meta charset="utf-8"> <title>演習１</title> <script src="../../js/jquery-1.11.1.min.js"></script> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li id="third">jQuery</li> <li>PHP</li> </ul> <script> $(funct…</body></html>
jQueryの関数を利用して、簡単なアニメーションを表示します。 表示・非表示 $( セレクタ ).show( スピード );//表示 $( セレクタ ).hide( スピード );//非表示 アニメーションはslow、fastまたは数値（1秒=1000）で指定します。実行例 <html> <head> <meta charset="utf-8"> <title>アニメ</title> <script src="../../js/jquery-1.11.1.min.js"></script> <style> div{ wi</meta></head></html>…
イベントを使い属性の内容を変えます。 click()メソッドで、イベントを実行します。実行例ボタンで画像切り替えボタンが押されたときを切欠に画像切り替えを行います。 <html lang="ja"> <head> <meta charset="utf-8"> <title>click()イベント</title> <script src="../../js/jquery-1.11.1.min.js"></script> <style> button{ cursor: pointer; } </style> </head> <body> <p><button>画像を…</button></p></body></html>
【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録 HTMLの移動を行うメソッドについて学んでいきます。 要素内の前か後ろに移動prependTo（前）とappendTo（後）を使うことによって、別な要素内にHTMLを移動させることができます。 <p id="first">テキス</p>…
以下のコラムを利用して、アコーディングメニューを作ります。40分で覚える！jQuery速習講座制作例（ソース） <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン</title> <style> *{ margin:0; padding:0; } dl{ width:400px; margin:50px auto; } dl dt{ background:#7CADB6; border-bottom:1px solid #F</meta></head></html>…
htmlを操作するメソッドを利用して、JavaScriptよりもスマートに操作する事ができます。htmlメソッド $('').html();HTML要素内文字列を取得または書き換え。HTMLタグが記述されている場合は反映される。 $('').text();HTML要素内文字列を取得または書き換え…
jQueryでのCSS制御する方法には2種類あります。 一つは以下のような書き方。 $('div').css('background','#f00'); もう一つは以下のような、CSSの書き形近い書き方になります。 $('div').css({ 'color' : '#f00', }); 実行例（ソース） <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの制御</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></meta></head></html>
jQueryで処理するには、以下のように記述します。 <script> $(document).ready(function(){ }); </script> セレクタの書き方はCSSと同じです。 $('要素名') $('#id名') $('.class名') セレクタを指定し、特定の要素にスタイルを上書きする。実際に要素に当てられているスタイ…
jQueryはJavaScriptのライブラリーの一つです。要素に対してアニメーションで表示したり、ポップアップを表示することができます。プログラム的には、フォームのエラーチェックもできます。jQueryの書き方jQueryは以下のように読み込ませます。jQueryのバー…
Javascriptの演習をしました。 入力された数字から、条件で結果を表示する。問題：８以上が合格 var num = prompt('半角数字で入力してください',''); num = parseInt(num); if(num >= 8){ document.write(num + 'は合です'); } else{ document.write(num + …
jQueryのプラグインクロスフェードを使うことで、フェードして置換する事ができます。 jQueryの適応方法jQueryをヘッドで読み込ませます。 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> クロスフェードプラグインを使う。CSS Crossfader 上記のリンクからcrossfaderをダウンロードする。htmlにプラグイ…
ランダム関数は、予測できない不規則な数値を表示させる関数です。 ランダム関数で乱数を表示する。ランダム関数で乱数を表示します。乱数を表示させるためには「random()」を使います。実行例 var num =Math.random(); document.write(num); 結果結果は0~0.…
DOMはHTML文章をオブジェクトとして情報の取得する仕組みです。 DOMの操作を行うことで、HTMLの中身を変更することもできます。前提として、以下のHTMLを使います。 <html lang="ja"> <head> <meta charset="utf-8"> <title>プログラム実行テスト</title> </head> <body> <h1>プログラム実行テスト</h1> <p>第1段落</p> <p>第2段落</p> <p>第3段落</p> <script></script> </body> </html> 要素の内容…
組み込みオブジェクトはJavaScriptにもともと含まれているオブジェクトです。それを指定することで、様々な値を取得することができます。時間を取得する時間取得する組み込みオブジェクトを使って、現在時刻を表示します。 実行例（ソース） var d = new Dat…
サムネイルにマウスポンタをのせるとと、下の大きな画像を切り替える画像一覧をつくります。 name属性を使い下の画像だけを変える画像の置換の方法は前回の記事の方法を使います。大きな画像の中にname属性を入れることで、imgタグに指定してある画像を切り…
イベントハンドラを使うことで、CSSの擬似要素を使わずに画像置換を行います。 イベントハンドラの書き方 <img src="#.png" alt="" on...="'JavaScript'"> 「on...」はhtmlの要素で、onmouseoverやonclickなどがあり、その要素にJavaScriptを設定して書き込むことができます。 インハンドラで画像置換を行…
サイコロの奇数だけを表示するには、for文、if文、剰余を利用します。ソース for ( var i = 1 ; i <=6 ; i++){ if(i%2 === 1){ document.write('<img src="img/d' + i + '.jpg">'); } } 「i」の値が奇数だけをif文の中で処理できるように書いています。
JavaScriptを用いて九九掛算表をつくります 実行例（ソース） <html lang="ja"> <head> <meta charset="UTF-8"> <title>九九</title> <style> table{ border-collapse:collapse; } th,td{ border: solid 1px #666; width: 50px; } td{ text-align: center; } th{ background: #CCC; } </style> </head> <body> <table> <tr> <th></th></tr></table></body></html>
関数は一連の処理をひとまとめにして、名前をつけたものです。 書き方関数のつけ方 function 関数名(引数を入れる変数){処理;} 関数の呼び出し方 関数名(引数を入れる変数); 引数を書く場合は括弧の中に。また書かなくても使えます。 関数の呼び出しは基本的…
繰り返し処理中に条件に合致したあと、break文で繰り返し処理をとめることができます。実行例（ソース） var tickets = [ 10, 20, 30, 40, 50 ]; for (var i = 0; i < tickets.length; i++) { if (tickets[i] > 30) { break; } console.log(tickets[i]); } c…
繰り返し処理について学びます。 While文While文では、継続条件式がtrue（条件に合致すること）のとき、処理をし続けます。 書き方 while（継続条件式） { 繰り返す処理 } 実行例（ソース） var a = 1; while(a <= 100){ a *= 2; console.log(a) } console.l…
出力時にプラスだけで変数を繋げる場合、全て文字列として処理されます。 カンマで変数をつなげる場合、変数同士を演算させることが可能です。実行例 var a = '西暦'; var b = 1988; var c = prompt('平成を西暦に直します',''); var c = parseInt(c); docum…
連想配列は、数値の変わりに意味のある言葉を使って配列を組むことができます。 書き方連想配列の場合は、インデックスの事をキーと呼びます。 var 連想配列名 = { キー１：値１, キー２：値２, キー３：値３, … }; クォーテーションで囲めば連想配列名に全…
配列は変数の集まりのことです。エクセルの行のように、一つの行にたくさんの値をインプットさせることができます。 書き方変数のそれぞれの値を要素といい、それぞれ0から数えるインデックスがつけられています。。 各要素の書き換えもや、要素の追加可能も…
switch文はifよりも詳細に条件分岐を書き出したものです。switch文は一度条件に合うと、それ以降の条件が合っていなくてもすべてを実行してしまうので、breakを入れることでそれを強制的に回避できます。 書き方 switch(変数){ case 変数に対する条件: conso…
