画像スライドショーでjQueryプラグインの基本を学ぶ
画像スライドショーでjQueryプラグインの基本を学ぶ：jQuery×HTML5×CSS3を真面目に勉強（2）（1/4 ページ） はじめに この連載で取り扱っているjQueryはJavaScriptのライブラリエンジンです。 世の中には実にさまざまなプログラミング言語があります。昨今主流となっているものの大半は、オブジェクト指向プログラミング言語と呼ばれているものです。 代表的な例を挙げると、Java、C#、Ruby、Python、Objective-Cといったところでしょう。これらの言語はクラスベースというカテゴリに属しています。クラスベースはアプリケーションにおけるさまざまな機能をクラスと呼ばれる単位でキッチリと分割することで、プログラム全体をキレイに整理整頓できるという特徴を持っています。大規模な開発になるほど、この特徴が威力を発揮するため、先に挙げたプログラミング言語が積極的に採用
intel XDK - HTML5 Development Environment
Write Your App If you can write it for the web using HTML/HTML5, CSS3 and Javascript*, you can use the Intel® XDK to build it as an HTML5 web app or as a native app for all of the major App Stores. Emulate & Test The Intel XDK makes it easy for developers to check look and feel of their apps with on-screen emulation on a wide variety of devices. The App Tester allows you to test on a physical devi
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
キーボードで物体を動かしてみよう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
第13回キーボードで物体を動かしてみよう。 前回、ドラッグアンドドロップを実装しましたが、移動系処理つながりということで、キーボードの矢印キーによる移動を実装してみましょう。 サンプルを見る サンプルは、キーボードの矢印キーを押すと、その方向に箱が移動するという単純なものです。 キーボードイベントについて JavaScriptで、キーボードのイベントを取得する場合、ブラウザ毎に結構記述が異なりますので、jQueryの「bindメソッド」を使うのが一般的です。 主に使うイベントは「keydown」「keyup」になります。 他にも、「keypress」というイベントがありますが、ブラウザ毎に動作に差異があるので私は使いません。 記述方法は下記のような形で記述します。 $(document).bind("keydown" , keyDownFunc); $(document).bind(
HTML＋JavaScriptだけでブラウザに図形描画（3） - Canvas API -
第2回、第3回と続いてきたCanvas API編も、今回が最後。本稿では、キャンバスの設定を保存する方法やキャンバスの内容をデータ化する方法、ユーザーのマウス操作に応じて図形を描画する方法などなどについて紹介します。 TIPS 028：画像が重なった場合の処理方法を指定する TIPS 029：キャンバスの設定を保存＆復元する TIPS 030：画像を拡大／回転／変形して表示する TIPS 031：キャンバス上の図形の一部を切り出す／貼り付ける TIPS 032：マウスポインタの座標に応じて図形を描画する TIPS 033：キャンバス上の図形をData URL形式で保存する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 028：画像が重なった場合の処理方法を指定する globalCompositeOperationプロパティを利用することで、画
CSS3のアニメーション効果 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
第5回 CSS3のアニメーション効果CSS3のtransitionプロパティを使ってみよう。 「HTML5」という単語は、みなさんよく耳にすると思います。 しかし、HTMLと同時進行で策定さている「CSS3」に関しては、あまりなじみが無い方もいるのではないでしょうか？ そこで、今回から、CSS3の「transitionプロパティ」を使って、FlashやAjaxで実装するようなインタラクティブなUIの実装について解説していきたいと思います。 まずは、簡単なプルダウンから作ってみよう。 サンプルを見る サンプルは、簡単なプルダウンを作成しました。 このサンプルは、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。 残念ながら現時点ではIEは「transitionプロパティ」には対応していません。 さて、今までの感
transitionプロパティの、カスタムイージングの使い方 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
CSS3のアニメーション効果 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
第7回 CSS3のアニメーション効果アニメーションの終了を取得して、ちょっと凝ったUIを作る。 「transitionプロパティ」で設定したアニメーションでは、アニメーションの終了をJavaScriptのイベントとして取得することができます。 アニメーションイベントを利用することで、ちょっと複雑なアニメーションを作成することができます。 transition終了を検知 サンプルを見る このサンプルでは、2カラム構成のボックスを2段階のtransitionで表示します。 Flashコンテンツなどで、こういった展開をするサイトをよく見かけますね。 transitionプロパティと終了イベントをうまく利用することで、簡単にこういった処理を行えます。 ※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。 残
CSS3のアニメーション効果 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
第6回 CSS3のアニメーション効果煩わしいベンダープリフィックスからの解放。 前回、 W3Cで未だ確定していないプロパティを、各ブラウザベンダーが独自に実装したプロパティに対して「ベンダープリフィックス」を記述する必要があると解説しました。 しかし、いちいち同じ記述をブラウザ毎に記述するのも面倒ですし、コードの可読性も悪くなります。 そこで、ベンダープリフィックスを記述しなくて済むようになる便利なライブラリ、「prefixfree.js」を紹介します。 「prefixfree.js」を使うと、アニメーションのプロパティだけでなく、シャドウやグラデーションなど、ベンダープリフィックスが必要なプロパティ全てで有効になります。 「prefixfree.js」の導入 サンプルを見る 今回は、オブジェクトの位置を移動するというアニメーションを付けてみました。 このサンプルは、CSS3の「t
HTML5の新要素、videoタグについて知ろう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
第4回 HTML5の新要素、videoタグについて知ろう。動画ファイルの作成について。 前回・前々回と、HTML5のVideoタグを使った作例を紹介しましたが、では肝心のHTML5で利用する、「H.264」「Web M」形式の動画は、どうやって用意すればいいのか？ 今回はそのあたりを解説しましょう。 Adobe Media Encoderを利用する。 AdobeのCS製品のうち、Web制作向け・動画制作向けのスイート製品を交友すると、 「Adobe Media Encoder」というアプリケーションが同梱されます。 Web制作を生業にされている方は、大体はAdobe製品を使っていると思いますので、Adobe Media Encoderを使うのが一番手っ取り早いでしょう。 なお、Adobe Media Encoderでは、Web M形式の動画は書き出せないので、Web M形式の動画に関して
HTML5の新要素、videoタグについて知ろう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
HTML5の新要素、videoタグについて知ろう。videoタグを使った、プレイリストの作成 前回は、videoタグを使った、簡単なサンプルを紹介しました。 今回は、それを応用して、複数の動画を切り替えて再生できるプレイリストを作ってみましょう。 プレイリストの作成 3本の動画を用意し、それぞれのリストをクリックすると動画が切り替わります。 サンプルを見る 今回は、サンプルファイルとして、 「sample1.mp4」「sample1.webm」 「sample2.mp4」「sample2.webm」 「sample3.mp4」「sample3.webm」 を用意しました。 それでは早速実装を見ていきましょう。 下記がHTMLのソースです。 <body> <div id="playList"> <p style="cursor:pointer" onClick="click
videoタグを使って、Flash無しでビデオ再生 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
HTML5の新要素、videoタグについて知ろう。videoタグを使って、Flash無しでビデオ再生 HTML5で新たに追加された<video>タグを使うと、Flash無しでブラウザで動画を再生できます。 Flashに依存しないということで、Flashに対応していない端末、特にiPhone・iPad・iPod touchなどに対し、ビデオ配信を行う際は<video>タグだけが唯一の方法となります。 その一方で、HTML5の<video>タグの仕様では、動画の形式までは決められておらず、どの動画形式を採用するかはブラウザの実装側に委ねられ、混乱を招く原因となっています。 そこで、そういった諸々をおさらいし、正しく<video>タグを使えるようにしましょう。 <video>タグの記述方法を理解する。 動画を再生させるだけの簡単なサンプルを用意しました。 対応ブラウザは、最新のForef
jQueryを使ってフォトライブラリを作ろう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座
いまさら聞けない、jQuery。jQueryを使ってフォトライブラリを作ろう これから主流になっていくであろうHTML5は、JavaScript無しでは語れません。 当講座でも、これからHTML5+CSS3の作例を紹介するにあたっては、jQueryを使うシーンが多くなるでしょう。 そこで、第一回目となる今回は、jQueryプラグインに頼らず、jQueryだけを使ってフォトライブラリを作って、改めてjQueryの仕組みをおさらいしましょう。 セレクタを理解する。 jQueryを使うと、ブラウザに依存することなく、CSSライクなセレクタで、とても簡単にDOM要素を検索することができます。 具体的には、$("CSS文字列")と入力すると、CSSで指定した要素を検索してjQueryオブジェクトを返してくれます。 いくつかサンプルを見ながら、セレクタの使い方をおさらいしてみましょう。 ※DO
Liveweave HTMLエディター
Initializing... Liveweave expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward build Tools expand_more restart_alt Load base template post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format JavaScript library_add Library expand_more AAlgolia JS Animate CSS Apex Charts JS BBulma C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグできる画像ビューワー | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
ドラッグアンドドロップを実装しよう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
スライドショーを作ろう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座
CSS3のアニメーション効果 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
html5-memo.com
Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表