HTML5についてのおさらい｜Web制作 W3G
Updated 2010.07.29 / Published 2010.07.29 これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。 hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。 HTML5の記述方法 まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。 <!DOCTYPE html> 続いて、html要素にドキュメントの言語を宣言します。 <html lang="ja"> そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。 <meta charset="UTF
WebSocketサーバライブラリ rev-websocket リリース - Blog by Sadayuki Furuhashi
いま WebSocket がにわかに注目を集めているようです。 ブラウザとサーバの間でリアルタイムな双方向通信を実現する機能で、HTML5に追加された（される予定の）新しい仕様です。 このWebSocketを使うには、ブラウザ側のJavaScriptの記述だけでなく、サーバ側の実装も必要になります。 そこで、Rubyで使えるWebSocketのサーバライブラリ rev-websocket をリリースしました。 gemでインストールできます：gem install rev-websocket 早速、デモアプリケーションを作ってみました：シャウッたー *1 WebSocket を使ったチャットシステムに、ちょっとした演出を加えたシンプルなアプリケーションです。速くタイプするほど大きく表示されるという趣向です^^; WebSocket に対応しているブラウザは今のところ Safari と Chr
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26
Data Tables and Cascading Style Sheets Gallery
Current style: TagBox by TagBox Table design based on the fresh TagBox style.
iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた - かちびと.net
Moongiftさんの記事を見て興味が 沸いたので即DLしてみました。 iPhone等のモバイル向けのWeb アプリを構築するHTML5中心の フレームワーク・Sencha Touch。 個人的にはかなり良いオープン ソースでした。 という訳で、Sencha Touchを触ってみましたよ。これ使えば、低スキルの僕にでもアプリ作れそうです。 で、Sencha Touchってどういうもんなの？という方もいらっしゃるかと思いますので、ファイルに含まれているサンプルをご紹介します。 SENCHA かなり素敵なフレームワークでしたよ。HTML5っていうのがいいですね。含まれているサンプルを以下に簡単にご紹介します。サンプルの説明は動作の説明になります。 尚、含まれているファイルは画像ファイルとHTMLファイルとjsファイルのみですのでローカルサーバー等が無くてもサンプルを見る事が出来ますよ。 キャプ
「HTML5 Rocks」だけじゃない、ブラウザ各社のHTML5チュートリアルを集めました
Webブラウザを提供する主なベンダ、グーグル、マイクロソフト、モジラ、オペラ、アップルらは、HTML5への対応を急ぐと同時に、相次いでHTML5の魅力や内容をデベロッパー向けに紹介するサイトを開設しています。この記事では、それらをまとめて紹介することにしましょう。 グーグルの「HTML5 Rocks」 グーグルは6月22日に開発者向けにHTML5を紹介し、学習するためのWebサイト「HTML5 Rocks」をオープンしました。 HTML5 Rocksは現在3つのコーナーに分かれています。 1つ目は「Interactive Presentation」。これはHTML5の新たなAPI、DOM APIやLocal Storage、WebWorkerなどさまざまな機能を紹介するプレゼンテーション。機能と共にJavaScriptでのコーディング例や実際に動作するデモなどが用意されており、HTML5の
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
FlashからHTML5/JavaScriptへ·Smokescreen MOONGIFT
SmokescreenはHTML5/JavaScript製のオープンソース・ソフトウェア（予定。ライセンスは未定）。AppleのFlash拒否の動きは止まることなく、他のスマートフォンとの対立が深まっている。Flashは既に世界中で利用されており、無数のコンテンツが存在するのが理由だ。 広告デモ。上がHTML5+JavaScript、下がFlash だからといって、今後永遠にコンテンツが増え続けるとは限らない。HTML5の登場によって、Flashによらないアニメーションや多彩な表現力がHTML5で実現する。旧来のFlashと今後のHTML5をつなぐのがSmokescreenだ。 Smokescreenは以前紹介したGordonと同様にFlash（SWF）ファイルを解析し、HTML5/JavaScriptによって実行するライブラリだ。広告のバナーやアニメーションのデモがあるが、SWFと変わら
Apple - Safari - Introducing Safari 4 - See the web in a whole new way
Safari is the best way to experience the internet on all your Apple devices. It brings robust customization options, features powerful privacy protections, and optimizes battery life — so you can browse how you like, when you like. And when it comes to speed, it’s the world’s fastest browser.1 Learn how to make Safari your default browser Safari comes with industry-leading privacy protection techn
「HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏
「HTML5は優先順位を間違った。もういちどセキュリティの設計からやり直すべきだ」と語るJavaScript大家のDouglas Crockford氏 「HTML5の最大の問題は、優先順位を間違ったことだ。機能について議論する前に、セキュリティの扱いについて検討すべきだった」こう語るのは、JSONの発明者として知られ、Yahoo!のシニアJavaScriptアーキテクトでもあるDouglas Crockford氏。5月4日に行われたオライリーのWeb2.0 Expo 2010でのインタビューでのことです。 「もうそれを議論するには遅すぎるという人もいるが、そうは思わない。正しいことをするのに遅すぎることはないのだから」（Crockford氏） Crockford氏はHTML5は機能が重複しすぎていることも指摘しています。「Local StorageとLocal Databaseの両方が本当
HTML5 Rocks!
The term "HTML5" covers so many different topics that developers have a hard time getting up to speed on all of them. Some APIs and features are part of accepted standards, while some are still a work in progress. Additionally, there are a number of great resources out there, but most are still very hard to find. As announced on the chromium.org blog, Google is releasing a new developer resource d
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.net
ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 html5.jp ～HTML 5で導入されるcanvas要素の使い方～ 同じく教科書的なサイト。ありがたい。まだ、ざっと読んだだけですが、すごく分かりやすかったです。 ～HTML 5
| ＾＾ |秒刊SUNDAY｜HTML５のポテンシャルを存分に感じるFLASH越えのサンプル集48個
Appleをはじめ、最近脱FLASHの動きを見せており、FLASHクリエータとしても、今後どこに向かえばよいのかと、頭を悩ませる今日この頃ですが、そんな中、FLASHの代替方法として注目されているのがHTML５という技術なのです。もちろん、まだ普及するには時間がかかりますが、FLASHを超えるべくポテンシャルは存分に秘めており、WEB業界ではいつかFLASHがHTML５に抜かれてもおかしくは無いという空気になってきております。 ＜注意＞ これらサンプルはHTML5で作られております。HTML５が表示できないブラウザでは 閲覧ができませんので、ご注意ください。 HTML5についてはこちらを参考ください。 http://www.html5.jp/ ということで早速サンプルの紹介をします。 音が出るものもありますのでご注意ください。 Audioburst Animation音と、ドットが同調して
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
フリーで使える15のHTML5＋CSS3なテンプレートファイル:phpspot開発日誌
15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com フリーで使える15のHTML5＋CSS3なテンプレートファイルが公開されています。 それぞれ地味なようでいて、HTML5やCSS3のテクニックをふんだんに使っています。 素材として使ってもよいですし、１つの学習用リソースとして活用してみるのも有益ですね。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 CSSテンプレート配布サイト色々まとめ フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」 フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 使えるCSSレイアウトテンプレート集「mycelly.com」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Security Cheatsheet
HTML5 Canvas Cheat Sheet