HTML5 旋風、吹き荒れてますね!(^0^)/
さて、ものすごく突然で恐縮ですが、この度﹁HTMLファイ部﹂、設立しました!
株式会社カヤック︵本社‥神奈川県鎌倉市、 代表取締役CEO‥柳澤大輔、http://www.kayac.com以下﹁カヤック﹂︶は、HTML+CSSコーディング、JavaScript プログラムを担当する職種が所属する﹁HTMLファイ部﹂を発足いたします。
これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課︵MEはMarkup Engineerの略︶に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は﹁HTMLファイ部﹂にて活動をスタートします。
そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から学ぶ方のために、参考サイト・資料、ギャラリー、勉強法などなどまとめてみました!
それでは、続きからどうぞ!
申し遅れました。
初めまして橋本雄也と申します。今年の2月から意匠部ME課で楽しく!働かせていただいてます。
入社したときカヤックには既に橋本が三人在籍していたため、A、B、C、D の構成になってます。
橋本レンジャイッ!
どうぞよろしくお願いいたします!
献立
Ⅰ.HTML5 基本的知識のまとめ
Ⅱ.HMTL5 凄いギャラリーサイトのまとめ
Ⅲ.HTML5 実践的勉強法のすすめ
いまさら HTML5 のこと聞けない><‥ という方にもご安心の3本立てでお送りしたいと思います!Ⅰ.HTML5 基礎的なことのまとめ
HTML5!・HTML5! って周りは騒いでるけど、実際何があたらしいのか把握してない><‥ という方に、とても分かりやすい資料・サイトを5つまとめてみました!![HTML5, きちんと。.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/HTML5%2C%20%E3%81%8D%E3%81%A1%E3%82%93%E3%81%A8%E3%80%82-thumb-320x224-925.jpg)
HTML5, きちんと。
HTMLの歴史やこれまでの流れ、記述のサンプルや今後の動向まで分かりやすく一通り書いてあります。 ぜひ一度は目を通されることをオススメします!![今からハジメるHTML5マークアップ.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/%E4%BB%8A%E3%81%8B%E3%82%89%E3%83%8F%E3%82%B8%E3%83%A1%E3%82%8BHTML5%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97-thumb-320x224-927.jpg)
今からハジメるHTML5マークアップ
HTML5におけるマークアップのやり方について事細かにわかりやすく解説してあります!![HTML5.JP.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/HTML5.JP-thumb-320x224-929.jpg)
HTML5.JP
日本で HTML5 熱が高まる前から存在する HTML5 に特化した情報サイト!![HTML5リファレンス.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/HTML5%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9-thumb-320x224-931.jpg)
HTML5リファレンス
HTML5で追加・変更されたタグを調べるならコチラ!![CSS3リファレンス.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/CSS3%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9-thumb-320x224-933.jpg)
CSS3リファレンス
CSS3で定義されたスタイルのことを調べるならコチラ!Ⅱ.HTML5 ギャラリーサイトのまとめ
HTML5 で何ができるのー!?というのを知るときに、
ギャラリーサイトを見るのが一番手っ取り早いですね!
ということで﹁え!HTML5 ってこんなことできるの!?すげー!﹂な、ギャラリーサイトを5つ、まとめてみました。
いかがでしたでしょうか。ぜひぜひこの機会に HTML5 の理解を深めていきましょう〜!
もちろんカヤッ ク企画開発!︶
※いま点数が悪くても、勉強後に再チャレンジして高得点を目指すこともできますからご 安心を
さて、唐突に冒頭でもお伝えさせていただいた通り、カヤックではこれからの HTML5 時代を戦っていくべく
HTMLファイ部 が設立されました。その名のとおり HTML/CSS マークアップ、JS開発 をバリバリやっていきます!
HTMLファイ部では戦隊ものごとく、新しい隊員も大大募集中!
![html5_gallery.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/html5_gallery-thumb-320x224-935.jpg)
HTML5 Gallery
HTML5 で作られた世界中の面白いサイトが集まっています!![Chrome Experiments.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/Chrome%20Experiments-thumb-320x224-937.jpg)
Chrome Experiments
Google による HTML5 で作られた凄いサイトのギャラリー。![Internet Explorer 10 Test Drive.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/Internet%20Explorer%2010%20Test%20Drive-thumb-320x224-939.jpg)
Internet Explorer 10 Test Drive
Microsoft による HTML5 で作られた凄いサイトのギャラリー。![Apple - HTML5.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/Apple%20-%20HTML5-thumb-320x224-941.jpg)
Apple - HTML5
Apple による HTML5 で作られたリッチなウェブコンテンツのギャラリー。![Demo Studio | Mozilla Developer Network.jpgのサムネール画像](http://design.kayac.com/assets_c/2011/09/Demo%20Studio_Mozilla%20Developer%20Network-thumb-320x224-943.jpg)
Demo Studio | Mozilla Developer Network
Mozilla による HTML5 で作られた凄いサイトのギャラリー。Ⅲ.HTML5 実践的勉強法のすすめ
HTML5 が全盛になってきて覚えることが増えてきましたね><‥ ところがどっこい世の中便利になったもので、その1つにジェネレーターがあります。 ジェネレーターを使うメリットは、﹁このコードを使うとこうなるんだ!﹂と、 逆算的にかつ視覚的にコードを覚えられるということが挙げられると思います。 そんな便利なジェネレーターをご紹介します!![LAYERSTYLES.jpg](http://design.kayac.com/assets_c/2011/09/LAYERSTYLES-thumb-320x224-945.jpg)
Layer Styles
Photoshop のようなUI、操作感で直感的にドロップシャドウや角丸のコードを出力してくれるジェネレーターです。 細かい調整が効く分それなりにコードも複雑になりますが、勉強になります!![Ultimate CSS Gradient Generator.jpg](http://design.kayac.com/assets_c/2011/09/Ultimate%20CSS%20Gradient%20Generator-thumb-320x224-949.jpg)
Ultimate CSS Gradient Generator
こちらも Photoshop のような操作感でグラデーションに特化したジェネレーターです。 グラデーションに対応していないブラウザ向けにも対応したコードが出力されるのでとても勉強になります。![border-image-gen.jpg](http://design.kayac.com/assets_c/2011/09/border-image-gen-thumb-320x224-947.jpg)
border-image-generator
CSS3 の border-image のコードを出力してくれるジェネレーターです。 border-image プロパティは少し分かりづらい指定方法をしなければなりませんが、 このジェネレーターで直感的に操作することで自然とプロパティの指定を覚えられる!かもしれません。![CSS3 Generator.jpg](http://design.kayac.com/assets_c/2011/09/CSS3%20Generator-thumb-320x224-951.jpg)
CSS3 Generator
CSS3 の多くのプロパティを網羅した素晴らしきジェネレーターです。 使っているうちに時短にも勉強にもなります。ありがとうございます。︵番外編︶
![html5 - jsdo.it.jpg](http://design.kayac.com/assets_c/2011/09/html5%20-%20jsdo.it-thumb-320x226-953.jpg)
html5 - jsdo.it
番外編で、ジェネレーターではありませんが、jsdo.it! "HTML5" タグに集まった数多くのサンプルの中から、 実際のコードを見つつ手を動かすのも、とてもいい勉強になります! お手本にしたいコードを﹁Fork﹂するだけで、簡単に自分だけの作品が作れます。一石二鳥ですね!そして、最後に宣伝!
HTML5 の勉強はじめようかな、HTML の理解どれぐらいかな…という方は ぜひ HTML5 実力テストをお試しください!︵![HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS.jpg](http://design.kayac.com/img/201109/HTML5%20Coding%20assessment%20test%20-%20jsdo.it%20-%20Share%20JavaScript%2C%20HTML5%20and%20CSS.jpg)