PCゲーマーのWebデザイン備忘録スマートフォン用の表示で見るPCゲーマーのWebデザイン備忘録PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。今回は軽量かつカスタマイズも簡単なjQueryタブの作り方をご紹介します。Scrollableを使うJS/jQueryScrollableを利用して、スライドできるサムネイルを作ります。準備Scrollableのサンプルページのソースから、以下のデータをダウンロードしてきます。Scrollableを使う2014-10-20【jQuery】タブパネルを使う。JS/jQueryjQueryの基本である要素を重ねることを使い、タブパネルを作ります。<li></li></ul></div></body></html>【jQuery】タブパネルを使う。Colorboxを使うJS/jQueryLightboxの派生プラグインであるColorBoxを使います。Colorboxは画像だけでなく、WEBページやインラインHTMLも表示することが出来ます。Colorboxをダウンロードしてきます。解凍して、任意のフォルダに移動。Lightboxを使うJS/jQueryjQueryのプラグインであるLightBoxを使います。LightBoxからプラグインをダウンロードしてくる。解凍して、任意のフォルダに移動。lightbox内の「index.html」をエディターで開き、必要ない部分を削除して、テンプレートを自分用に変更する。HTML/CSS操作の演習JS/jQueryHTML/CSS操作の演習を行いました。今回はそのソースです。アニメーションJS/jQueryjQueryの関数を利用して、簡単なアニメーションを表示します。アニメーションはslow、fastまたは数値(1秒=1000)で指定します。イベントで属性を操作するJS/jQueryイベントを使い属性の内容を変えます。click()メソッドで、イベントを実行します。実行例ボタンで画像切り替えボタンが押されたときを切欠に画像切り替えを行います。HTMLの移動を行うメソッドについて学んでいきます。要素内の前か後ろに移動prependTo(前)とappendTo(後)を使うことによって、別な要素内にHTMLを移動させることができます。htmlを操作するメソッド2(HTMLの移動)2014-10-07【jQuery】アコーディングメニューの作り方と考え方JS/jQuery以下のコラムを利用して、アコーディングメニューを作ります。htmlを操作するメソッドJS/jQueryhtmlを操作するメソッドを利用して、JavaScriptよりもスマートに操作する事ができます。$('').html();HTML要素内文字列を取得または書き換え。HTMLタグが記述されている場合は反映される。CSSの制御JS/jQueryjQueryでのCSS制御する方法には2種類あります。一つは以下のような書き方。一つは以下のような、CSSの書き形近い書き方になります。セレクターを使い、要素のスタイルを指定するJS/jQueryjQueryで処理するには、以下のように記述します。セレクタの書き方はCSSと同じです。セレクタを指定し、特定の要素にスタイルを上書きする。jQueryを使っていくJS/jQueryjQueryはJavaScriptのライブラリーの一つです。要素に対してアニメーションで表示したり、ポップアップを表示することができます。プログラム的には、フォームのエラーチェックもできます。jQueryの書き方jQueryは以下のように読み込ませます。演習1JS/jQueryJavascriptの演習をしました。入力された数字から、条件で結果を表示する。クロスフェード(jQueryのプラグイン)JS/jQueryjQueryのプラグインクロスフェードを使うことで、フェードして置換する事ができます。jQueryの適応方法jQueryをヘッドで読み込ませます。クロスフェードプラグインを使う。上記のリンクからcrossfaderをダウンロードする。クロスフェード(jQueryのプラグイン)2014-09-30【JavaScript】ランダム関数JS/jQueryランダム関数は、予測できない不規則な数値を表示させる関数です。ランダム関数で乱数を表示する。ランダム関数で乱数を表示します。乱数を表示させるためには「random()」を使います。結果結果は0~0....【JavaScript】ランダム関数2014-09-30【JavaScript】DOMJS/jQueryDOMはHTML文章をオブジェクトとして情報の取得する仕組みです。DOMの操作を行うことで、HTMLの中身を変更することもできます。前提として、以下のHTMLを使います。要素の内容...【JavaScript】DOM2014-09-29【JavaScript】組み込みオブジェクトJS/jQuery組み込みオブジェクトはJavaScriptにもともと含まれているオブジェクトです。それを指定することで、様々な値を取得することができます。時間を取得する時間取得する組み込みオブジェクトを使って、現在時刻を表示します。Dat...【JavaScript】組み込みオブジェクト2014-09-28【JavaScript】サムネイルを押すと、その画像に切り替える画像一覧JS/jQueryサムネイルにマウスポンタをのせるとと、下の大きな画像を切り替える画像一覧をつくります。name属性を使い下の画像だけを変える画像の置換の方法は前回の記事の方法を使います。イベントハイドラを使い、CSSを使わないで、画像置換を行うJS/jQueryイベントハンドラを使うことで、CSSの擬似要素を使わずに画像置換を行います。「on...」はhtmlの要素で、onmouseoverやonclickなどがあり、その要素にJavaScriptを設定して書き込むことができます。サイコロの奇数だけ表示するJS/jQueryサイコロの奇数だけを表示するには、for文、if文、剰余を利用します。「i」の値が奇数だけをif文の中で処理できるように書いています。関数JS/jQuery関数は一連の処理をひとまとめにして、名前をつけたものです。引数を書く場合は括弧の中に。書かなくても使えます。break文で繰り返しを制御JS/jQuery繰り返し処理中に条件に合致したあと、break文で繰り返し処理をとめることができます。break文で繰り返しを制御2014-09-20【JavaScript】While文とFor文を使った繰り返し処理JS/jQuery繰り返し処理について学びます。While文While文では、継続条件式がtrue(条件に合致すること)のとき、処理をし続けます。出力時に変数をカンマとプラスで繋げるときの違いJS/jQuery出力時にプラスだけで変数を繋げる場合、全て文字列として処理されます。カンマで変数をつなげる場合、変数同士を演算させることが可能です。出力時に変数をカンマとプラスで繋げるときの違い2014-09-19【JavaScript】連想配列JS/jQuery連想配列は、数値の変わりに意味のある言葉を使って配列を組むことができます。書き方連想配列の場合は、インデックスの事をキーと呼びます。クォーテーションで囲めば連想配列名に全...【JavaScript】連想配列2014-09-19【JavaScript】配列JS/jQuery配列は変数の集まりのことです。エクセルの行のように、一つの行にたくさんの値をインプットさせることができます。書き方変数のそれぞれの値を要素といい、それぞれ0から数えるインデックスがつけられています。switch文JS/jQueryswitch文はifよりも詳細に条件分岐を書き出したものです。switch文は一度条件に合うと、それ以降の条件が合っていなくてもすべてを実行してしまうので、breakを入れることでそれを強制的に回避できます。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。