タグ

2013年9月6日のブックマーク (4件)

  • CSSスプライトについてあれこれ。

    CSS Sprites(CSSスプライト)」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね(2012.8現在)。 具体的には「サイト内で使用するたくさんの画像(パーツ)をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

    CSSスプライトについてあれこれ。
  • CSS3/jQueryでオリジナルのHTML5 videoプレーヤを作成してみよう

    コントローラUIの設計 <video>要素を使用した場合、表示されるコントローラはWebブラウザによって異なる。 Webブラウザ別のネイティブなビデオコントローラ - Figure 1: Native browser video controls across different browsersより引用 再生、一時停止、シークなどあらゆる機能/ボタンはMedia elements APIをとおして、JavaScriptでアクセス/操作することが可能だ。これらのコントローラUIは、HTML/CSS/SVGなどで自由に組みたてられる。 コントローラのマークアップ まず最初にこれらコントローラをマークアップする必要がある。さきほどのWebブラウザ別ネイティブビデオコントローラを見て分かるとおり、プレーヤには次の機能が求められる。 再生/一時停止ボタン シークバー タイマー ボリューム調節ボタン

    CSS3/jQueryでオリジナルのHTML5 videoプレーヤを作成してみよう
  • HTML5で動く10の動画プレイヤー - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ

    SEOにもHTML5が重要などといわれる時代になってきましたが、HTML5といえばプラグインなしでデバイスとらわれず動画やアニメーションが再生できるのが大きな魅力ですよね。HTML5の動画プレイヤーは既に多数リリースされていますが、今回はその中から実際に使えるものを10厳選して紹介した記事をspyrestudiosから。 — SEO Japan 動画プレイヤーにはあまりに多くの選択肢があるため、どのアプリケーションが自分に最も相応しいのか選択するのは難しい。私なら、物事を複雑化しないことと、動画プレイヤーの更新、新機能、バグ修正という将来の頭痛の種を避けることをお勧めする。その全てに対処し、あなたの仕事を簡単にするオンラインベースの動画プレイヤーにこだわるのだ。物事を行うことや物事を複雑化しないことのより簡単な方法に関心があるなら、www.wix.comもチェックするといいかもしれない。

    HTML5で動く10の動画プレイヤー - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
  • HTML5を楽しもう

    作成2012年9月26日 改訂2012年10月9日 改訂2012年10月14日 改訂2012年10月22日 HTML5で映像コンテンツを楽しむ 1.HTML4とHTML5との違い これまでのHTML4でも映像を楽しむことができる。HTML4では、OBJECT要素に、MediaPlayer、QuickTime、RealPlayerなどのプレイヤーを埋め込んで、映像コンテンツを閲覧することができた。HTML4での問題点は、使っているPCに該当するプレイヤーがないとき、プレイヤーをダウンロードし組み込むことが必要であった。その結果、プレイヤーのメーカーは、ブラウザーと同じように、そのPCで使う標準のプレイヤーとすべき、争いがあったように思う(利用者はあまり気にせず、使いたいものを使っていた)。 HTML5では、オーディオ(video/audio)要素(再生するためのプレイヤーも)が標準で搭載して