HTML5の標準を狙うGoogleの動画フォーマット「WebM」のこれまでまとめ
高画質かつ高圧縮の「H.264」がビデオフォーマットの主役の座についていますが、次世代のウェブフォーマットであるHTML5においては、H.264とともに主役として期待されているのがGoogleの開発する「WebM」です。WebMのこれまでの流れと今後の動画標準規格を巡る争いについてまとめてみました。 Google builds WebM patent pool of its own to fight back against MPEG-LA | Ars Technica http://arstechnica.com/business/2011/04/google-builds-webm-patent-pool-of-its-own-to-fight-back-against-mpeg-la/ Google and MPEG LA Announce Agreement Covering VP
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。 １．はじめに 「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。 同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。 ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。 利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more
To get started, simply install jquery.dynatable.js (along with jQuery), and add the following in the document.ready or after the table: Read / Normalize The HTML table is scanned and normalized into an array of JSON objects (or collection) where each JSON object (or record) corresponds to a row in the table. Operate The JSON collection can be sorted, searched/filtered, and paginated/sliced. Write
[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
HTML5 で追加された属性の中からマイナーっぽいのを紹介してみる
HTML5 から追加された属性の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。 この記事は、HTML5 Advent Calendar 2013、11日目の記事です。 去年の HTML5 Advent Calendar 2012 では、Microdata 関連の記事を書いたんですが、今年も登録してみたものの、見事にネタが無いのでどうしようかなと...... ということで、HTML5 から追加された属性 （要素じゃなく属性の方） の中から、まだあまり広く使われてなさそうな属性さんたちに日の目を見て頂くための紹介記事を書いてみようかと思います。 ちなみに、「あまり広く使われていなさそうな」 は完全に私の独断と偏見ですのでよろしくお願いします。 placeholder 属性 最初なのであまりマイナーっぽくないやつから。その名の通り
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
無料でHTML5を使った広告やアニメーションが直感的に作れる「Google Web Designer」ベータ版でアニメーションを作ってみました
iOSはFlashに対応していないため、これまでウェブデザインには限界がありましたが、そんなウェブデザインの幅を広げるであろう、動くHTML5広告を制作できるツール「Google Web Designer」ベータ版がGoogleから公開されました。非常に直感的に使えるツールとなっており、アニメーションやイメージギャラリーも簡単に作れるということなので、実際にアニメーションなどを作ってみました。 Google Web Designer http://www.google.com/webdesigner/ 実際に作成したアニメーションは以下のような感じです（動いていない場合はブラウザを更新して再読み込みすれば再度動きます）。 まずは「Download Web Designer Beta」をクリック。 利用規約が表示されるので、「Agree and Download」をクリックしてダウンロードを
Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に
Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのことで、HTML5Rocks でデモページが公開されています。その紹介と、dialog 要素についての簡単な解説。 HTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。 現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス （モーダルウィンドウ） の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に
HTML5文書のアウトラインを簡単に確認できる「HTML5 Outliner」
HTML5文書のアウトラインを簡単に確認できる「HTML5 Outliner」の紹介です。 １．HTML5 Outliner 「HTML5 Outliner」は、HTML5文書のアウトラインを簡単に確認するためのツールです。 HTML5 Outliner このツールにURLやHTMLマークアップを設定して「Outline this!」をクリックすれば、文書のアウトラインが確認できます。 たとえば、「HTML 5.1 Nightly - 1 Introduction」のページのURLを実行すると次のような結果が表示されます。 ２．Chrome拡張の「HTML5 Outliner」 Chrome拡張の「HTML5 Outliner」も用意されているので、こちらの方が扱いやすいでしょう。 HTML5 Outliner ここではChrome拡張のインストールと利用方法を紹介します。 Chromeで
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
HTML5 × CSS3 × jQueryを真面目に勉強 – #17 Bootstrap をカスタマイズしてオリジナルテーマを作ってみた | DevelopersIO
トレンディ且つナウい Web ページを構築するための CSS フレームワーク（※枠組み）です。フレームワークというとなんだか大袈裟な響きですが、実態は単なる CSS と JavaScript という２つのテキストファイルだけで特別な使い方等もありません。利用者はこれらを HTML ファイルに読み込ませたのち、Bootstrap 側で既に定義済みのクラスを各 HTML 要素に指定するだけで、自分は一行も CSS を書くことなく高品質な Web ページが作れてしまったりします。 Twitter Bootstrap うろ覚えですが、2011年の夏頃に最初のメジャーバージョンがリリースされました *1。当時 Twitter のエンジニアで現在は Github にお勤め中の Mark Otto 氏によって開発され、2013年4月時点ではバージョン2.3.1が最新版となっています。またバージョン3.0
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
WordPressのテーマファイルをHTML5にするチュートリアル
このサイトはまだHTML5にしてないので、WordPressのテーマファイルをXHTMLからHTML5にするステップごとに解説されたチュートリアルを紹介します。 Convert Your WordPress Theme to HTML5 下記は各ポイントを意訳したものです。 チュートリアルのゴール HTML5のベーシックなレイアウト Step 1: header.phpをHTML5化 Step 2: index.phpをHTML5化 Step 3: sidebar.phpをHTML5化 Step 4: footer.phpをHTML5化 Step 5: single.phpをHTML5化 Step 6: style.cssをHTML5化 チュートリアルのゴール このチュートリアルは、XHTMLでつくられたWordPressのテーマファイルをHTML5にするものです。テーマファイルはそれぞれ
Microdata を使ってみよう。サンプルソースで学ぶ Microdata
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
快適にさくさく作れる、ワイヤーフレーム・モックアップがブラウザ上で作成できるHTML5アプリ -Moqups
Moqupsの特徴 Moqupsの使い方 Moqupsの特徴 ドラッグ&ドロップでエレメントを簡単に配置できます。 約60種類のUIエレメントを用意。 PDF, PNGへの書き出し。 HTTPS対応。 自動保存。 スマートガイド。 カスタマイズ可能なグリッド。 オブジェクトはグリッドにスナップ。 オブジェクトのロックとグループ化。 右クリックで、Undo/Redo/Cut/Copy/Pasteなど。 上記の操作はキーボードでも可。 タグ付けと検索機能 画像のアップロード メールによる共有。 Moqupsの使い方 Moqupsを使うにはとりあえず登録は必要ありませんが、機能が制限されます。 機能の制限はたとえば、書き出しがSVGのみになります。
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho
Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定するスライドごとの動きはimpress.js同様、カスタムデータ属性で操作します。 <div class="mosho-slide" id="3d-transform" data-x=1120
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のさまざまなform要素があなたのブラウザでどのように見えるかのまとめ -Native form elements
IDEA * IDEA
セマンティックなマークアップHTML5編（概要） | Digi-Cyber.net