Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: HTML5

[HTML5] The Ultimate Collection of HTML5 Tutorials and Techniques – HTML5に関するチュートリアルやテクニックのアルティメットコレクション

  • Pocket
  • このエントリーをはてなブックマークに追加

いやいやいや、アルティメットコレクションってのはちょっとアレっていうか大げさでしょ。とは思ったものの、なかなかの量の作例&Tipsまとめ記事です。HTML5やCSS3を使ったデモや考察、コーディングにおけるTipsなんかがたくさんまとめられてます。「こんな事できるならちょっとやっちゃおうかな」って思えるような実験的な試みが多く、コーディングに関わる人なら楽しめるかと。

[HTML5, CSS3] 15 Free HTML5 and CSS Templates – HTML5のWebテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5とCSS3でコーディングされたWebテンプレートを15例まとめた記事。スマートフォンやモダンブラウザなど、レガシーな環境をざっくり切り捨てる事ができる制作業務に向いてますね。いくつかのテンプレートではJSも併用してます。トップページにスライダーがあったりするのとか、いかにも最近のウェブページだなという印象。そのまま使ってもイイんですが、HTML5サイトの素体としてもアリかも、と思いました。かっけーデザイン多いっす。

[HTML5, CSS3] 31 Fresh HTML5/CSS3 Tips and Techniques for designer & Developers – HTML5とCSS3に関するテクニック

  • Pocket
  • このエントリーをはてなブックマークに追加

デザイナーやデベロッパのための、HTML5とCSS3に関するテクニックやTipsをまとめた記事。CSS3を使ったアイコンの作り方、ハウスホバーでのハイライト、色と透明度について、オブジェクトのロテイト、グラデーション、ボタン制作のフレームワーク、トランジション、フォーム装飾、文字組み、Media Queries、CSS3だけで作るスライダー、リフレクションエフェクト、テーブル装飾、アニメーションなどについて紹介されてます。どちらかというとCSS3寄りの内容。色々やれる事が増えますYO、といったところでしょうか。Webの仕事やってると覚える事が次から次へと出てきてほんまにキリがないっすな。まぁ好きでやってる分には苦痛でも何でもありませんが。

[Generator] 10 CSS3 & HTML5 TOOLS – CSS3やHTML5に関するジェネレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

CSS3やHTML5のソースコードを吐き出す事のできるジェネレーターまとめ。ブラウザ上でCSS3の各種指定をした上で、そのソースコードを吐き出す事ができます。HTML5関連のものはごく一部で、主にCSS3関連の内容。ボックス要素の装飾を定義したり、グラデーションを作ったり、ボタンメーカーだったり、シャドウの細かな調整をしたり、コードを圧縮できたりします。あとチートシートなんかもありますね。CSS3ではできる事が増えるのに比例して面倒な事も増えてるので(グラデとか)、こうしたオンラインツールに頼るのもひとつの手かと。

[HTML5] 31 Must See HTML5 Experiments – HTML5を使った実験的なデモサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5を使った実験的なデモページを集めた記事。役に立つ立たないは別として、「へーこんな事もできるんだー」的なアレです。なのでデザイナーとかコーダーさん向けです。こういう可能性について見せられるとワクワクしますな。ゲームやCanvasを使ったものなど、HTML5の新機能盛りだくさんといったところ。ただしSafari環境だとWebGLガラみのデモは表示できなかったりします。このへんはまぁ色々アレな感じですな。動画関係もそうだけど統一規格みたいなものになってほしいところ。

[Web Design] 10K Apart – 10K byte以内でどれだけクールなサイトを作れるか、というコンテスト

  • Pocket
  • このエントリーをはてなブックマークに追加

HTMLだけでなく、イメージやスクリプト類なども含めて、10K bytes以内でどれだけクールなウェブサイトを作れるか、というコンテスト。タイミングがタイミングなだけに、HTML5やJSを使ったモダンな作品が多いです。JSやCSSで使用するライブラリにはいくつか決められたリストがあり、またクロスブラウザ対応なども求められます。興味深いのはレスポンシブレイアウトに対応する事も必須となっている点。「Inspire the web with just 10K」というキャッチの通り、10Kでどこまでやれるかを競うというものです。賞金もあるようですYO。

[HTML5] VideoJS – HTML5ベースの動画プレーヤー

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5ベースの動画プレーヤー。Youtubeなど特定のウェブサービスを利用せず、サイト内に動画ファイルを格納したい時に使えそうです。モダンブラウザは全てサポート対象となっており、IE6〜8についても限定的ながらサポートされているようです。デバイスについてはiOSとAndroidが対象となっており、PCとスマートフォン双方の環境でだいたい見れるって感じです。サポートされているビデオフォーマットもh.264、Ogg、web-mと代表的なものは抑えられています。またWordpressプラグインやjQueryプラグインの形でも配布されている点がなかなかナイスです。その上オープンソースなので、今後お世話になりそうな感じ。

[Generator] Patternizer – CanvasとJSで描画するイメージレスパターン

  • Pocket
  • このエントリーをはてなブックマークに追加

画像を使わずに、CanvasとJsを使って描画するパターン。サイト上で細かく指定して好みのパターンを作れます。ちなみに導入はこちら。またデモパターンがここに色々置いてあります。画像を使わないという点がとってもナイス。固有のJSを導入しなきゃならないというのはちょっと手間かもしれませんが、1度導入さえしてしまえばコード変更だけでパターンを変えれるってのはなかなかイイですね。