画像スライドショーで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コンテンツを少ない手間で作れ
キーボードで物体を動かしてみよう | 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
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!
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTMLの用意とリセットCSSの作成 (1/4)
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 連載第2回では、レスポンシブWebデザインの設計と素材の準備をしました。今回は、ページの基本となるHTMLとCSSの初期設定を記述します。 ベースHTMLの記述 最初に、「枝豆隊」の基本となるHTMLを用意しましょう。このサイトでは、XHTMLではなくHTML5を採用しています。HTML5はオフライン機能や現在地特定機能などのモバイルデバイ
CSS3だけで実現するアニメーションとは？
はじめに - CSS3のアニメーション機能 CSS3の新機能の中でも注目したいのが、今回解説するアニメーション機能です。これまでWebページ上でアニメーションを実現する際には、JavaScriptやFlashなどを使う必要がありましたが、CSS3により、ある程度のアニメーション機能をCSSのみで実現できるようになりました。 CSS3のアニメーション機能の基本は「CSSの様々なプロパティの値を連続して変更させていく」というものです。例えば、CSS3からの新機能で、要素の透過率を指定するopacityプロパティを連続的に変化させることで、フェードイン、フェードアウトといったアニメーション処理を実現することができます。 最初にCSS3の新機能の一つで、アニメーション機能との相性も抜群の変形（transform）機能について解説し、その後、2種類のアニメーション機能（TransitionsとAni
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグできる画像ビューワー | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
ドラッグアンドドロップを実装しよう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
スライドショーを作ろう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座
CSS3のアニメーション効果 | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表