ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
jQuery 簡単かつ高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。
$(function(){ $('#slider1').bxSlider({ auto:true, speed:1000, pause:500 }); }); <div id="slider1"> <div><img src="images/new1.jpg"></div> <div><img src="images/new2.jpg"></div> <div><img src="images/new3.jpg"></div> </div> $(function(){ $('#slider2').bxSlider({ auto:true, speed:1000, mode: 'fade', captions: true }); }); <div id="slider2"> <div><img src="images/new1.jpg" title="captions"></div> <di
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
[61] イメージマップ（リンク領域）を作ろう map要素・area要素
イメージマップを作ってみよう W3C の仕様書のサンプル画像をそのまま使って説明します。 4つの図形にロールオーバーするとカーソルが変化し、リンク領域であることがわかります。 （リンク先はどれも、このページを指定しています） これは画像を<img>要素で表示しています。 HTMLはこちら。img要素でのイメージマップです。 <p> <img src="shapes.gif" width="525" height="150" usemap="#shapes" alt=""> <map name="shapes"> <area shape=rect coords="50,50,100,100"> <!-- (赤い四角の真ん中の穴) --> <area shape=rect coords="25,25,125,125" href="#" alt="Red"> <area shape=circle
![[61] イメージマップ（リンク領域）を作ろう map要素・area要素](https://cdn-ak-scissors.b.st-hatena.com/image/square/b622d885bd701ca57846603f65eb9aaeaa05262d/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-61.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Fshapes.gif)
jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法｜BLACKFLAG
レスポンシブサイトでメニュー等のナビゲーションを扱う際、 PC向けレイアウト時にはボタンをページ上に並べ、 スマートフォン向けレイアウト時にはボタン一式を折りたたんで ハンバーガーボタンでメニューを開閉させるUIにすることで スマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。 そんなレスポンシブ対応のナビゲーションメニューUIを jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。 「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばPC向けナビゲーション、 768px以下だったらスマートフォン向けのナビゲーションに切り替わります。 PC向けナビゲーションではボタン類は画面内に横並びですべて表示されます。 スマートフォン向けナビゲ
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
パララックスサイトの基本的な作り方 1/2！
こんにちは。 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。 準備をしよう！htmlを用意します。 jQueryはjQueryのサイトから直接読み込みます。 [html] [/html] スクロールした値を取得してみよう！スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。 html[html] スクロールの値を取得スクロールの値 | 0
jQueryでシンプルなスライドショーを自作しようの巻 | グリニッジ株式会社
「普段プラグインを使っているけど、自分でスライドショーを組んでみたい！」という人へ！jQueryの勉強になりました〜。 1、jQueryを読み込む <script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 2、htmlを記述。画像を読み込みます。 <div id="stage"> <img src="img1.jpg" id="img1"> <img src="img2.jpg" id="img2"> <img src="img3.jpg" id="img3"> </div> 3、cssを記述。 absoluteを指定して画像を重ね、一枚目のみ表示します。 <!-- css --> <style type="text/css"> /*
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
jQuery 簡単！チェックボックスやラジオボタンを装飾する方法（プラグイン不要） | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【簡単！チェックボックスやラジオボタンを装飾する方法】です。プラグインを使用しても良いのですが、ここでは設定の手間や容量が気になるので使用しません。実装方法はとても簡単ですのでぜひお試しください。 発展編 20. チェックボックスのデザイン 画像の準備 まずはチェックボックスに使用する画像を準備します。チェック時を上、非チェック時を下と垂直に並べます。基本は画像ボタンの作り方と同様です。 基本設定 – 背景画像へ設置 画像を準備したらチェックボックスを囲っているラベルに背景画像として設置します。その際基点を左上に設定し、リピートを無しにします。 HTML <label class="cbxbd"><input type="checkbox"/>Check 1</label> CSS .cbxbd{ background:url(im
jQueryを使ったスライダーの作り方とその仕組み
Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することもできるようになります。 自分で作ることができるようになると仕様をプラグインに縛られることがなくなるため、わがままな要求にも応えられるようになります。なにより自分で作って動いてるものを見ると楽しいこと間違いなしです。 そういったものでバグが見つかったときの焦り具合も尋常じゃありませんが。 ということで、スライダーの作り方と仕組みを初心者向けに解説していきたいと思います。 （ここでいう初心者とはHTML・CSS・jQueryの基本がわかる程度です） ※I
.on()と.off()を使いこなす 1 | CodeGrid
実践、jQuery 第1回 .on()と.off()を使いこなす 1 jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。 はじめに この『実践、jQuery』シリーズは、jQueryを使った実装がある程度できるようになったエンジニアが、さらにjQueryへの理解を深めていくためのシリーズです。 今回は、jQuery 1.7*から実装された.on()と.off()という2つのメソッドを取り上げます。これらのメソッドが担う、jQueryオブジェクトに対してイベントの定義を行うための機能をきちんと理解することで、イベントを自在にコントロールできるようになることを目的としています。 *注：jQuery 1.7 jQuery 1.7は201
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
第2回 jQueryの基本（お題編） | gihyo.jp
はじめに 第2回の今回からは本格的にjsdo.it -Share JavaScript,HTML5 and CSS-（以下、jsdo.it）を使ってJavaScriptを勉強していきたいと思います。毎回お題編と回答編に分けてやる予定で、お題編では基礎知識を解説してそれに関連した課題を出し、それをjsdo.itでつくってもらい、回答編で解説するというかたちで連載を進めていきます。 今回はjQueryの基本のお題編ということで、jQueryの基礎を解説したあと最後にお題がありますのでそちらを次回までにやっておくとより理解が深まるはずです。 jQueryってなに？ そもそもjQueryとはなんでしょう。まったく知らないという人もいれば名前くらいは聞いたことがある、いつもJavaScriptを書くときは使っている、さまざまだと思います。今回は初回なので念のためjQueryとな何なのかというところ
メニューにアニメーションで下線が付いてくる
Result jQuery$('a','nav').mouseover(function(){ $('span','nav').animate({ 'width': $(this).width(), 'left': $(this).position().left} ,'fast'); });cssnav a{ text-decoration:none; color:#333; } nav li{ display:inline-block; margin-left:2px; padding:3px; background:#eee; } nav span{ background:#666; height:2px; display:block; position:relative; width:50px; left:0; }html<nav><ul> <li><a href="#">menu0
ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
jQueryでモーダルウィンドウを作成する HTMLとCSSでモーダルウィンドウを表現する方法が分かったら、jQueryを使って、サムネイル画像がクリックされたらモーダルウィンドウを生成し、拡大画像を表示するスクリプトを作りましょう。 HTMLは先ほどのサンプル01からglayLayerとoverLayerを取り除いたものです。サムネイル画像を包むa要素のhref属性にはモーダルウィンドウで表示したい拡大画像のパスを記述し、class属性に「modal」を設定します。 ▼サンプル02（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="images/photo1.jpg" class="modal"><img src="images/photo1_thum.jpg" alt="シャンデリア" /></a></li> <li>
jQuery 簡単にモーダルウィンドウを実装する方法 (プラグイン不要) | Stronghold Archive
どうもこんばんは。今回は【簡単にモーダルウィンドウを実装する方法 (プラグイン不要)】というネタです。モーダルウィンドウ？という方もいるかと思いますので別の言い方をするとポップアップで小窓が出てくる表現の事を指します。実装方法はとても簡単ですので機会がありましたらお試しください。 コード（2013/4/11更新しました） 基本的には下図の用な仕様になっております。表示するコンテンツを増やす場合にはコピー&ペーストでwd2,wd3…と任意の数にしてください。 $(function(){ $(‘.btns’).click(function(){ wn = ‘.’ + $(this).data(‘tgt’); var mW = $(wn).find(‘.modalBody’).innerWidth() / 2; var mH = $(wn).find(‘.modalBody’).innerHei
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
coolwebwindow.com