『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です! Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした(私だけ?)。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう!というところまで行きませんでした。
HTML5の<video>や<audio>タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる video/audio要素のAPIやイベントを利用する video/audio要素は、JavaScriptを用いた細かい制御を行えるのも特徴の1つです。 カスタムのビデオプレイヤーを作ることも容易ですし、動画からフレームを切り出してCanvasに投影し、グラフィックとして取り扱う、なんてテクニックもあります。 今回は、そうしたJavaScript APIの利用方法について見ていきましょう。なお、この記事は2011年5月25日版の仕様に基づいています。 video/audioに共通のメソッド、プロパティ video要素とaudio要素は、メソッドやプロパティの多くが共通です。そうしたメソッドやプロパティを表すのが以下の一覧です。 MediaErr
HTML5には、Canvasをはじめ、Drag&DroppやAudio&VideoやGeoloacationなど数多くのAPIが用意されています。 これらのAPIは策定中のものも多く、仕様が確定していませんが、現在利用できるAPIの機能を逆引きでまとめた実用的な解説書を紹介します。 [ad#ad-2] ウェブサイトやウェブアプリケーションにHTML5 APIをすぐに利用したい、また近い将来利用したい、そんな人に役立つ一冊となっています。 また、逆引きの形式で使用頻度の高いサンプルが数多く掲載されているので、何ができるんだろう?? という人にもビジュアル的に把握できるものとなっています。 HTML5逆引きリファレンスでとりあげているAPI 書籍の中で取り上げているAPIです。 それぞれのAPIごとに、実用的なサンプルコードが逆引きの形式で掲載されており、コードは専用サイトからダウンロードして
Powered by WordPress ユーザー名またはメールアドレス パスワード ログイン状態を保存する ← デジタルマガジン へ移動 プライバシーポリシー 言語
h5ai larsjung.de Apacheのディレクトリインデックスをありえない位かっこ良くできる「h5ai」 HTML5の機能を使って、通常の味気ないディレクトリインデックスをかなりかっこ良くしちゃうというものです。 ディレクトリ一覧。アイコンなんかもついてかなりリッチ mod_headersとmod_autoindexというApacheモジュールを応用して作られているようですが、こんなことが出来るとは知りませんでした。 表示方法もアイコンベースに変更することも可能です。これはイカしていますね。 サイドの丸みを帯びた物体にカーソルをあわせるとニュイーンと伸びてツリービューが表示。これまた便利です。 動作デモはこちら デザインは基本的にHTML+CSSなので、あなた好みにカスタマイズすることも可能。 Apacheの味気ないデザインページは嫌だ!というデザイナーさんは覚えておくとよさそう
iPadやiPhoneではHTML5の採用によって<video>タグで動画が設置出来るようになりました。 FLASHや各種プラグインが表示出来ないため、その代替の一つに当たる機能です。 今回はその中の一つ、<video>タグについて書きたいと思います。 【注意!】 この記事を書いている現時点(iOS4.2.1)の記事のため バージョンが上がった場合は、この限りではありません。 — 現時点で再生可能なiPadの形式はmp4、H.264形式となっています。 なのでHTMLで表示するためには <video src="ビデオのパス" controls></video> と記述をすれば、表示可能になります。 controls属性を付ける事でプレイヤーとして動作させる事が可能になります。 映像:NHKクリエイティブ・ライブラリー iPad上で単純に表示させる場合は、上記で十分問題ないのですが 見ている
You can directly edit the above text, by clicking on it. To add a new case, you have to press Alt+Enter. For removing a case just press Alt+Backspace or Alt+Delete. You can save or send the pattern by just copying the link. Have fun! Privacy policy / Datenschutzerklärung Allgemeiner Hinweis und Pflichtinformationen Benennung der verantwortlichen Stelle Die verantwortliche Stelle für die Datenverar
The integrated growth and transformation partner to the world’s leading organizations, nurturing and developing innovations that drive outcomes. We push the boundaries of business transformation and sustainable growth for brands, people and society. Dentsu increases the potential for innovation to happen, creating experiences that can enrich every business. See what our global team of innovators a
ロジャーグラートは1882年の創業以来、最高峰のカバ(スペインが世界に誇る高品質スパークリングワイン)を造り続けている、名門ブランドです。
Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmはMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ
先日m-schoolさんでやっている「ここがすごい!CSS3入門講座」を受講してきました。 講師は関西つながりでもある森 和恵(もり かずえ)さん。 講座名で受講を決めたので、講師が誰かを知ったのは当日の午前中だったという(笑) 内容は実際に手を動かす内容もあり、カリキュラム的にも入門講座として疑問に思っていたところが網羅されていて、講師の森さんも教え上手で、とてもいい内容でした。 で、こういった技術系のセミナーをガッツリ受けるのは、実は結構久しぶり。 色々な理由はあって、 自分自身が以前より実装の現場から離れてしまっている。 昔より技術の知識習得に対して腰が重くなってきている。 何が出来るかよく分からず、動けなくなっていた。 っていうのが結構大きなところ。 どの比率が高いわけでもなく、それぞれがぼんやり絡まって、なかなかそういったセミナーに行くことをしなくなっていた感じです。 使えるH
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か? マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
heatmap.js | HTML5 Canvas Heatmap Library ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」。 ユーザのマウス位置をヒートマップという形で表示してサイトの利用方法を解析する方法がありますが、そのヒートマップを描画できるライブラリが公開されています。 取得されたデータを元にヒートマップを描画できるのは当然ながら、マウスを動かしてリアルタイムにブラウザに描画されるデモも一見の価値があります サイト上の以下のボタンを押しましょう。 リアルタイムでヒートマップが描画されます。Chromeだととってもなめらか アクセス解析的な利用はモチロンのこと、何か他のものにも使ってみると面白い効果が得られたりするのかも。 関連エントリ クリック位置のヒートマップを作成できるオープンソースやサービス色々
IE 9が登場! ユーザーの閲覧環境がますます多様化! 4月26日、ついに日本でもInternet Explorer(以下、IE) 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome(以下、Chrome)など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何? Webブラウザや端末などの閲覧環境が多様化してきていま
[読了時間:1分] ウェブコンテンツに魅力的な動きを付与できるFLASH。しかし、Adobe社の公式オーサリングツールは高額で、デザイナーじゃないと手が届きにくかった。その対抗馬として注目を浴びている次期ウェブ標準仕様のHTML5をベースに、手軽にアニメやスライドを作成できるツール「Hype」が米時間の5月20日にお目見えした。 Mac OS X用ソフトとして既にApp Storeで販売中。価格はUSストアでは29ドルで、日本だと3500円と割高だが日本語ローカライズ版が入手できる。 ツールは、FLASHオーサリングツールなどを使用したことがある人なら、数分もあれば使い始められるだろう。始めてこの手の作品を手がける人は少し手まどうかもしれないが、チュートリアル動画があるので、これを一通り見れば見よう見まねでスタートできるだろう。また、今回のバージョンでどのようなことができるのかは、ギャラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く