画像スライドショーでjQueryプラグインの基本を学ぶ
画像スライドショーでjQueryプラグインの基本を学ぶ：jQuery×HTML5×CSS3を真面目に勉強（2）（1/4 ページ） はじめに この連載で取り扱っているjQueryはJavaScriptのライブラリエンジンです。 世の中には実にさまざまなプログラミング言語があります。昨今主流となっているものの大半は、オブジェクト指向プログラミング言語と呼ばれているものです。 代表的な例を挙げると、Java、C#、Ruby、Python、Objective-Cといったところでしょう。これらの言語はクラスベースというカテゴリに属しています。クラスベースはアプリケーションにおけるさまざまな機能をクラスと呼ばれる単位でキッチリと分割することで、プログラム全体をキレイに整理整頓できるという特徴を持っています。大規模な開発になるほど、この特徴が威力を発揮するため、先に挙げたプログラミング言語が積極的に採用
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
自由自在！CSS3のtext-shadowを使ってをロゴ作ってみる｜Webpark
CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。 text-shadowの基本的な使い方はこのようになります。 カンマで区切ると複数の陰を同時つけることできて、うまく組み合わせると色んなロゴが作れちゃいます。 光り輝いているようになっています。複数の影を使っていて、色は同じですが外にいくほどぼかす割合が強まっています。 color:#fff; background: #000; font-size: 52px; font-weight: bold; text-shadow: 0px 0px 1px #ffffff, 0px 0px 10px #ffd700, 0px 0px 20px #ffd700, 0px 0px 30px #ffd700, 0px 0px 40px #ffd700; 影を重ねて立体的に仕上げています。 color
キーボードで物体を動かしてみよう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
第13回キーボードで物体を動かしてみよう。 前回、ドラッグアンドドロップを実装しましたが、移動系処理つながりということで、キーボードの矢印キーによる移動を実装してみましょう。 サンプルを見る サンプルは、キーボードの矢印キーを押すと、その方向に箱が移動するという単純なものです。 キーボードイベントについて JavaScriptで、キーボードのイベントを取得する場合、ブラウザ毎に結構記述が異なりますので、jQueryの「bindメソッド」を使うのが一般的です。 主に使うイベントは「keydown」「keyup」になります。 他にも、「keypress」というイベントがありますが、ブラウザ毎に動作に差異があるので私は使いません。 記述方法は下記のような形で記述します。 $(document).bind("keydown" , keyDownFunc); $(document).bind(
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
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.” — Eric Meyer Features Processes every stylesheet in <link> or <style> elements
Liveweave HTMLエディター
Check out our Python playground! Python is the most popular general-purpose programming language in the world, widely used in Artificial Intelligence, Machine Learning, and Data Science projects. Supports popular Python libraries like Numpy, Matplotlib, SciPy, Pandas, and more! Share your public code with anyone, or make it private Features advanced auto-completion technology Try it now!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグできる画像ビューワー | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
ドラッグアンドドロップを実装しよう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
スライドショーを作ろう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座
CSS3のアニメーション効果 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
Ceaser - CSS Easing Animation Tool - Matthew Lein
ご存知、ないのですか？CSSの優先順位
