PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

JS/jQuery

【jQuery】 Scrollableを使う

Scrollableを利用して、スライドできるサムネイルを作ります。 準備 Scrollableのサンプルページのソースから、以下のデータをダウンロードしてきます。Scrollableは新しいjQueryのバージョンで jquery.tools.min.js scrollable-horizontal.css scrollable-b…

【jQuery】タブパネルを使う。

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>

【jQuery】 Colorboxを使う

Lightboxの派生プラグインであるColorBoxを使います。 Colorboxは画像だけでなく、WEBページやインラインHTMLも表示することが出来ます。 準備 Colorboxをダウンロードしてきます。 Colorbox - a jQuery lightbox 解凍して、任意のフォルダに移動。 「colorb…

【jQuery】 Lightboxを使う

jQueryのプラグインであるLightBoxを使います。 準備 LightBoxからプラグインをダウンロードしてくる。 Lightbox 解凍して、任意のフォルダに移動。 lightbox内の「index.html」をエディターで開き、必要ない部分を削除して、テンプレートを自分用に変更する…

【jQuery】 HTML/CSS操作の演習

HTML/CSS操作の演習を行いました。今回はそのソースです。 特定のID/クラスのスタイルを変更する 使うメソッド「css();」 <html> <head> <meta charset="utf-8"> <title>演習1</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> $(fun…</body></html>

【jQuery】 アニメーション

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{ w</meta></head></html>…

【jQuery】 イベントで属性を操作する

イベントを使い属性の内容を変えます。 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を操作するメソッド2(HTMLの移動)

【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録 【jQuery】 htmlを操作するメソッド - PCゲーマーのWebデザイン備忘録 HTMLの移動を行うメソッドについて学んでいきます。 要素内の前か後ろに移動 prependTo(前)とappendTo(後)を使…

【jQuery】アコーディングメニューの作り方と考え方

以下のコラムを利用して、アコーディングメニューを作ります。40分で覚える!jQuery速習講座 ASCII.jp:40分で覚える!jQuery速習講座 (6/6) 制作例(ソース) <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオン</title> <style> *{ margin:0; padding:0; } dl{ width:400px; margin:50px auto; } dl dt{ </meta></head></html>…

【jQuery】 htmlを操作するメソッド

htmlを操作するメソッドを利用して、JavaScriptよりもスマートに操作する事ができます。 htmlメソッド $('').html();HTML要素内文字列を取得または書き換え。HTMLタグが記述されている場合は反映される。 $('').text();HTML要素内文字列を取得または書き換え…

【jQuery】 CSSの制御

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】 セレクターを使い、要素のスタイルを指定する

jQueryで処理するには、以下のように記述します。 <script> $(document).ready(function(){ }); </script> セレクタの書き方はCSSと同じです。 $('要素名') $('#id名') $('.class名') セレクタを指定し、特定の要素にスタイルを上書きする。 実際に要素に当てられているスタイ…

【jQuery】 jQueryを使っていく

jQueryはJavaScriptのライブラリーの一つです。要素に対してアニメーションで表示したり、ポップアップを表示することができます。プログラム的には、フォームのエラーチェックもできます。 jQueryの書き方 jQueryは以下のように読み込ませます。jQueryのバ…

【JavaScript】 演習1

JavaScriptの演習をしました。 入力された数字から、条件で結果を表示する。 問題:8以上が合格 var num = prompt('半角数字で入力してください',''); num = parseInt(num); if(num >= 8){ document.write(num + 'は合です'); } else{ document.write(num +…

【JavaScript】 クロスフェード(jQueryのプラグイン)

jQueryのプラグインクロスフェードを使うことで、フェードして置換する事ができます。 jQueryの適応方法 jQueryをヘッドで読み込ませます。 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> クロスフェードプラグインを使う。 Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spank…

【JavaScript】ランダム関数

ランダム関数は、予測できない不規則な数値を表示させる関数です。 ランダム関数で乱数を表示する。 ランダム関数で乱数を表示します。乱数を表示させるためには「random()」を使います。 実行例 var num =Math.random(); document.write(num); 結果 結果は0…

【JavaScript】DOM

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】組み込みオブジェクト

組み込みオブジェクトはJavaScriptにもともと含まれているオブジェクトです。それを指定することで、様々な値を取得することができます。 時間を取得する 時間取得する組み込みオブジェクトを使って、現在時刻を表示します。 実行例(ソース) var d = new D…

【JavaScript】サムネイルを押すと、その画像に切り替える画像一覧

サムネイルにマウスポンタをのせるとと、下の大きな画像を切り替える画像一覧をつくります。 name属性を使い下の画像だけを変える 画像の置換の方法は前回の記事の方法を使います。大きな画像の中にname属性を入れることで、imgタグに指定してある画像を切り…

【JavaScript】 イベントハイドラを使い、CSSを使わないで、画像置換を行う

イベントハンドラを使うことで、CSSの擬似要素を使わずに画像置換を行います。 イベントハンドラの書き方 <img src="#.png" alt="" on...="'JavaScript'"> 「on...」はhtmlの要素で、onmouseoverやonclickなどがあり、その要素にJavaScriptを設定して書き込むことができます。 インハンドラで画像置換を行…

【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】 九九掛算表をつくる

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>

【Javascript】 関数

関数は一連の処理をひとまとめにして、名前をつけたものです。 書き方 関数のつけ方 function 関数名(引数を入れる変数){処理;} 関数の呼び出し方 関数名(引数を入れる変数); 引数を書く場合は括弧の中に。また書かなくても使えます。 関数の呼び出しは基本…

【JavaScript】 break文で繰り返しを制御

繰り返し処理中に条件に合致したあと、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]); } …

【JavaScript】While文とFor文を使った繰り返し処理

繰り返し処理について学びます。 While文 While文では、継続条件式がtrue(条件に合致すること)のとき、処理をし続けます。 書き方 while(継続条件式) { 繰り返す処理 } 実行例(ソース) var a = 1; while(a <= 100){ a *= 2; console.log(a) } console.…

【JavaScript】 出力時に変数をカンマとプラスで繋げるときの違い

出力時にプラスだけで変数を繋げる場合、全て文字列として処理されます。 カンマで変数をつなげる場合、変数同士を演算させることが可能です。 実行例 var a = '西暦'; var b = 1988; var c = prompt('平成を西暦に直します',''); var c = parseInt(c); docu…

【JavaScript】連想配列

連想配列は、数値の変わりに意味のある言葉を使って配列を組むことができます。 書き方 連想配列の場合は、インデックスの事をキーと呼びます。 var 連想配列名 = { キー1:値1, キー2:値2, キー3:値3, … }; クォーテーションで囲めば連想配列名に全…

【JavaScript】配列

配列は変数の集まりのことです。エクセルの行のように、一つの行にたくさんの値をインプットさせることができます。 書き方 変数のそれぞれの値を要素といい、それぞれ0から数えるインデックスがつけられています。。 各要素の書き換えもや、要素の追加可能…

【JavaScript】 switch文

switch文はifよりも詳細に条件分岐を書き出したものです。switch文は一度条件に合うと、それ以降の条件が合っていなくてもすべてを実行してしまうので、breakを入れることでそれを強制的に回避できます。 書き方 switch(変数){ case 変数に対する条件: conso…

【JavaScript】ifとelse

ifを使うことによって、ブラウザに表示する結果を条件付で変えることができます。 elseはifを使った後に、条件に合わなかったものを表示します。 実行例(ソース) <script> var judge = confirm('あなたは大人ですか?'); //document.write(judge); if(judge===true</script>…