Sun, June 26, 2016

HTML5コーディングに役立つ優れたツール10選
10 Excellent HTML5 coding Tools Many Users Don’t Know About

■Initializr

HTML5の雛形、jQuery等のスクリプト、CSSのリセット、サーバ設定などを自分用にカスタマイズしてパッケージ化し、ダウンロード出来るツールです。
使い方もとても簡単です。ウィザード形式で進んで行き「Download」で完了。

Initializr

■HTML5Demos and Examples

HTML5のデモとブラウザのサポート状況がリスト化されています。
特定のブラウザで使用できるプロパティを調べたいときや、そのプロパティのデモを確認したいときなどに役立ちます。
フィルタリング機能もよいですね。

HTML5Demos and Examples

■HTML5 Tracker

HTML5に追加された要素の最新のリビジョンを確認することが出来ます。

HTML5 Tracker

■HTML5 visual cheat sheet

名前が示すように、高速で簡単に属性を検索できるチートシートです。
HTML5で新しくなった要素はピンク、サポート廃止になった要素はグレーになっています。

HTML5 visual cheat sheet

■Switch To HTML5

HTML5ベースのウェブサイトの雛形を作成してくれる非常にシンプルで効率的なテンプレートジェネレータです。
スタイルシートの名前やjQueryの有無、文書タイトルなどをオプションで指定可能です。

Switch To HTML5

■Cross browser HTML5 forms

フォームは、ウェブサイトに非常に重要な部分です。
HTML5は、カレンダー、色見本、スライドウィジェット、クライアント側の検証など、様々な優れたツールを提供していますが、各ブラウザごとのサポートが統一されておらず、クロスブラウザで対応するのは容易ではありません。「Cross browser HTML5 forms」はその問題を解決へと導いてくれます。

Cross browser HTML5 forms

■HTML5 Test

現在お使いのブラウザはHTML5をサポートしていますか?「HTML5 Test」でそれを知ることができます。
ブラウザがどこまでHTML5に対応しているかを点数化し、ビデオ、オーディオ、キャンバスなどの機能の完全なレポートを提供してくれます。

HTML5 Test

■HTML5 Canvas cheat sheet

HTML5の新要素「Canvas要素」Cheat Sheetです。

HTML5 Canvas cheat sheet

■Lime JS

「Lime JS」はHTML5のゲームのフレームワークです。
すべてのタッチスクリーンとデスクトップブラウザ用の、高速でネイティブな感覚のゲームを作成することが出来ます。

Lime JS

■HTML5 Reset

HTML5+CSS3での制作時に汎用的に利用できる、HTML、CSS、スクリプトなどのファイルを一式にまとめたテンプレートファイルセット。

HTML5 Reset

 

情報元:10 Excellent HTML5 coding Tools Many Users Don’t Know About

YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法

YoutubeやHTML5video等の埋め込み動画のサイズをcssを使って動的にリサイズ/可変にするトリックをご紹介します。 解像度の違うスマートフォン(iPhone / Android)、IEにも適用されるようです。...

Read Full Story »
More in Tips フォントサイズの指定はCSS3の「rem」が便利そう CSS3を使ったクリエイティブなテキストエフェクトチュートリアル集「8 Examples Of Stunning CSS3 Text Effects」 text-shadowのカラー指定はRGBaでの指定が良いらしい

HTML5コーディングに役立つ優れたツール10選
10 Excellent HTML5 coding Tools Many Users Don’t Know About

■Initializr HTML5の雛形、jQuery等のスクリプト、CSSのリセット、サーバ設定などを自分用にカスタマイズしてパッケージ化し、ダウンロード出来るツールです。 使い方もとても簡単です。ウィザード形式で進ん...

Read Full Story »
More in お役立ち HTML5のアウトライン(階層構造)解析ツール「HTML 5 Outliner」 HTML5で使用可能な正規表現でのフォームのバリデーションを簡単にテストできる「HTML5 Pattern」 IE6、7、8でもCSS3のセレクタを利用可能にする「Selectivizr」

HTML5で作られている「OK GO」というバンドの新曲「All Is Not Lost」のPVがすごすぎる

すごいです。 Chromeでどうぞ。 HTML5のポテンシャルもさることながら、発想に脱帽です。 2ndアルバムからシングルカットした「HERE IT GOES AGAIN」という曲のPVは、YouTubeでも話題だった…

HTML5のアウトライン(階層構造)解析ツール「HTML 5 Outliner」

HTML5ではアウトライン(階層構造)を意識してコーディングすることが重要ですが、 アウトラインの確認、チェックに役立つツールをご紹介します。 ■HTML 5 Outliner section、article、aside…

面白法人カヤックが「HTML5実力テスト」をオンラインで実施

面白法人カヤックがWeb上でHTML5のスキルを試すことができる「HTML5実力テスト」なるものを公開しております。 「JavaScriptコース」と「HTML/CSSコース」に分かれており、それぞれテスト時間は15分。…

HTML5で作られている日本のサイトいろいろ

HTML5で制作されている日本のサイトをご紹介します。 コーディング、デザインのご参考に。 ■マチのほっとステーション LAWSON|ローソン ■株式会社コンテンツ ■ソフトバンクグループ2012新卒採用 ■無印良品 ■…

HTML5で使用可能な正規表現でのフォームのバリデーションを簡単にテストできる「HTML5 Pattern」

HTML5を使えば、正規表現でフォームの入力エラーチェック(バリデーション)が出来ます。 しかし、正規表現でバリデーションパターンを作って検証するのって結構面倒ですよね。 そんなときに役立ちそうなサイトがこちらです。 ■…

GoogleのWeb絵本でクラウドコンピューティングやHTML5など、最新のウェブ技術の基本を勉強しよう

最近よく聞く「クラウド」や「HTML5」など、知っておきたいウェブの基礎知識がコンパクトかつわかりやすく説明されてます。 HTML5で作られているので、閲覧は対応ブラウザで。 ちなみにこの絵本の制作ソースコードも公開され…

IE6、7、8でもCSS3のセレクタを利用可能にする「Selectivizr」

IEでもCSS3セレクタを利用可能にするJavaScript「Selectivizr.js」をご紹介します。 設置方法はとても簡単。jQueryのようなJSライブラリとselectivizr.jsを読み込むだけです。 ■…

HTML5の構文チェックツール「HTML5 Validator Bookmarklet」

最近スマートフォン対応等でHTML5を書くことが増えてきました。 HTML5のバリデータを探してた方は是非試してみてください。 使い方はとても簡単です。 url入力 or ファイルアップロード or ソース貼り付けを選択…

日本のスマートフォン(iPhone / Android)サイトデザイン集いろいろ

スマホ用に最適化された日本サイトを集めているまとめサイトいろいろです。 デザイン、提案の参考に。 ■スマートフォンサイト集めました。 ■iShowcase ■絶対見ておきたい有名企業のスマホサイトまとめ ■iPhone対…

YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法

YoutubeやHTML5video等の埋め込み動画のサイズをcssを使って動的にリサイズ/可変にするトリックをご紹介します。 解像度の違うスマートフォン(iPhone / Android)、IEにも適用されるようです。…

コピペで使える12のtext-shadowエフェクトサンプル集

ベーシックなものから3Dのような複雑なエフェクトまでいろいろありますよ。 コピペで使えるので重宝するかと思います。 ■The Basic Shadow ■Quick and Dirty Letterpress ■Hard…