JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

jQuery

長いページに欠かせない「ページの先頭に戻るボタン」を作る方法

// = 600){ $("#p-top-x").fadeIn("slow"); } else if(sc ↑ ページの先頭に戻るボタンを作る 今回は jQuery を使用して長いページをスクロールした時に右下に表示されるページの先頭に戻るためのボタンを作ります。 ※こちらがボタンのイメージです。 ↑ < お…

【jQuery】jQuery と CSS でスマホの「ハンバーガーメニュー」を作る方法

jQuery と CSS でハンバーガーメニューを作る 今回は jQury と CSS でスマートフォンサイトに欠かせないハンバーガーメニューを作ります。 ~ 主な仕様 ~ ・テキストで作ったメニューアイコンを配置する。・メニューアイコンをタップすると、画面の左に隠れ…

 jQuery 版「要素をマウスで移動できるようにする方法」② ドラッグ移動版

要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスドラッグできるようにするサンプルを作ってみましたので、ぜひ参考にしてください。 では、下のサンプルを試してみて下さい。 ※この記事では、画面上にある任意の…

 jQuery 版「要素をマウスで移動できるようにする方法」① クリック移動版

要素をマウスで移動できるようにする 今回は、jQuery を使って画面上にある任意の要素をマウスで移動できるようにするサンプルスクリプトを作ってみましたので、マウスで要素を移動する方法が今ひとつわからない場合は今回のサンプルを参考にしてください。 …

jQuery で任意の要素にダブルクリックイベントを設定する方法

jQueryで要素にダブルクリックイベントを設定する jQueryを使って要素にダブルクリックイベントを設定するには、セレクトした要素に「dblclick()」を接続し、( )内に実行したいスクリプトを記述します。 セレクトした要素.dblclick(); 例)$("#btn").dblclic…

jQuery で要素にクリックイベントを設定する方法

jQuery で要素にクリックイベントを設定する jQuery を使って要素にクリックイベントを設定するには、セレクトした要素に「click()」を接続し、( )内に実行したいスクリプトを記述します。 セレクトした要素.click(); 例)$("#btn").click(); // id="btn"の…

jQuery で要素をフェードインさせる方法

jQueryで要素をフェードインさせる jQuery で要素をフェードインさせるには「fadeIn()」に時間、または、既定値(slow=ゆっくり、normal=ふつう、fast=速い)を設定して使用します。 要素.fadeIn(時間); 時間:ミリ秒,"slow","normal","fast" 例)$("#tes…

jQuery で要素のCSSを変更する方法

jQueryで要素のCSSを変更するには「css」にプロパティ名と値を設定します。 要素.css(プロパティ名,値); 例)$("p").css("background","red"); jQuery + JavaScript ソース 「test-botan3」というIDが付いた要素をクリックすると「sample27」というIDが付い…

JavaScript + jQuery でストップウォッチを作る方法

// JavaScript + jQuery でストップウォッチを作る 今回は JavaScript と jQuery を使ってストップウォッチ(1/10秒タイプ)を作ります。このサンプルのポイントは、表示部分をテーブルではなく「span」タグと「CSS」で作っているところです。 動作サンプル …

【JavaScript + jQuery】ドキュメント(ページ)上にあるマウスポインターの座標位置を取得する方法

// マウスポインタの座標を取得する マウスポインターの移動を検出するのは jQuery の「mousemove」を、座標を取得するのは JavaScript の「clientX」「clientY」を利用します。

jQuery と CSS でHTML要素を回転させる方法

// HTML要素をグルグル回転させる 今回は jQuery と CSS を使ってHTML要素をグルグル・・・と回転させます。 要素を時計回りで45度回転させる場合:transform:rotate(45deg); 動作サンプル ページが読み込まれると、ピンク色のボックスとその中の文字「要素…

クリックでテーブルセルの背景色を変更する方法(jQuery版)

// クリックでセルの背景色が変わる 今回は、jQuery を利用してテーブルセルをクリックすると、そのテーブルセルの背景の色が変わるスクリプトを作成します。 動作サンプル 無色のセルをクリックすると背景色が赤色になり、赤色のセルをクリックすると無色に…

jQuery でシンプルなトグルメニューを作る方法

// jQuery でトグルメニューを作る メニュー項目をクリックすると一階層下にあるサブメニューが上下にスライドするトグルメニューを jQuery で作ります。 <サンプル> まずはサンプルを見てください。青色文字の項目をクリックするとその項目の下の階層にあ…

【jQuery】animate() で素早く上下に動くボックスを作ってみよう

animate() で素早く上下に動くボックスを作る 今回は animate() 関数を使ってクリックすると素早く上下に動くピンク色のボックスを作ります。 <サンプル> 下のピンク色のボックスをクリックすると素早く上下に動きます。 // <Htmlソース> <div> 要素だけのシ</div>…

jQuery の .animate() を使って横に伸びるバーを作ってみよう

jQuery の「animate」で伸びるバーを作ってみよう 今回は jQuery の「.animate()」APIを使って横に伸びるバーを作成します。 <サンプル> 横に伸びるバーは div 要素の横幅を .animate() で拡大して実現しています。下のピンク色のボックス(idは"nobi-box"…

【jQuery】ボタンをクリックすると要素が枠の右端まで移動するスクリプトを作ろう!

ボタンクリックで緑色のボックスを右端に移動する 今回は jQuery を使って、ボタンをクリックすると緑色のボックスが枠の右端まで移動するスクリプトを作ってみよう! 実行結果サンプル ボタン「BUTTON」を押すとボタンの下にある緑色のボックスが枠の右端の…

jQueryでボタンが押されるとHTMLソースコードが変更されるスクリプトを作ってみよう

HTMLソースが変更されるスクリプト 今回は、jQuery を使用してボタンが押されると HTML ソースコードが変更されるスクリプトを作ってみます。 実行結果 サンプル BUTTON フォルクスワーゲン jQuery + JavaScript jQuery を使って「botan1」という id をもっ…

【jQuery】jQuery でボタンが押されると文字が変更されるスクリプトを作ってみよう

ボタンが押されると文字列が変更されるスクリプト 今回は jQuery を使って、ボタンをクリックすると文字列が変更されるスクリプトを作ってみます。 サンプル結果 サンプル結果にあるボタンをクリックすると「アメリカの大統領は誰?」という文字列が変更され…

 【jQueryの技】jQueryでマウスポインタの座標をリアルタイムで表示する

今回は jQuery を使ってマウスポインタの座標を表示する仕組みを作ります。 ~ サンプル ~ マウスポインターを動かすとマウスポインターの現在座標をピクセル単位でリアルタイムに表示します。 結果 jQuery コード jQuery の「mousemove」関数で、ブラウザ…

【jQueryの基本】jQuery と CSS で要素を移動させてみよう

jQuery と CSS で要素を移動させる 今回は jQuery を利用して <span> 要素を移動させる方法を説明します。 今回のサンプル ピンク色のボックスの下にあるグレーのボタン領域をクリックすると、ピンク色のボックスが5秒かけてゆっくりと右方向に80ピクセル動きます</span>…

【jQuery】本家の jQuery ファイルに直接リンクする方法

本家の jQuery ファイルにリンクする 以前の記事で、jQuery ファイルを一旦ローカルにダウンロードしてからリンクして使用する方法を説明しましたが、他にも、jQuery ファイルをダウロードすることなく、jQuery 本家サイトが公開している jQuery ファイルに…

jQuery 公式ダウンロードサイトとおすすめ日本語リファレンス

jQuery の公式ダウンロードサイトと日本語リファレンス jQuery とは JavaScript のライブラリのひとつで、Ajax通信やHtml要素の操作など、さまざまな機能をサポートしています。 また、jQuery を利用すると JavaScript のコードを簡略化できるので、コーディ…

【基本】jQueryの使い方 1.導入編

jQuery ってなんだろう? jQuery とは JavaScript の関数を簡略化して利用しやすくしたものです。jQuery の中身(ソースコード)をのぞいてみるとわかりますが jQyery は JavaScript で書かれた関数の塊だと言えるでしょう。 1.jQueryをダウンロードする …