HTMLの最近のブログ記事

こんにちは。砂坂です。
すっかり秋も深まってまいりましたが皆様いかがお過ごしでしょうか。

本日はHTML5でマークアップされたサイトを集めたサイトを発見しましたのでご紹介
します。
http://html5gallery.com/

ソースを見てみると、
ヘッダーを表す

タグ
ナビゲーションの

こんにちは。事業戦略室の竹内です。
今日はIEでHTML5で追加された新要素を使用する方法をご紹介します。

HTML5では色々と新しい要素が追加されています。
ご存知の通りIEでは新しく追加された要素が実装されていません。

これらにclassをつけてもそもそも要素として認識されないため、
classにスタイルを設定しても無視されてしまいます。

そこで、Remy Sharp氏という方が作成した
新要素を有効化できる魔法のDOMスクリプトをご紹介。

http://html5shiv.googlecode.com/svn/trunk/html5.js

これを読み込んであげれば、
問題児のIEちゃんも新要素を認識できるようになります。

ありがとうRemyさん！
これで気兼ねなくHTML5を使えますね。

はじめまして

システム部インターン生の高木です。


競合するActionScriptとHTML5。

Flashに代わるウェブアプリケーションプラットフォームとして登場したHTML5ですが、実際のところは実装状況はまちまちです。

よりスマートさを追求したHTML5ですが、表現力の面ではやはりFlashには勝てません。

しかしHTML5にも優れた面があるのは事実です。

重要なのは、作る側の人間はどちらかを選ぶのではなく、どちらもうまく利用していかなくてはいけないということですね。

さて、

プログラムの開発には以下の工程が必要です。

１．開発環境の導入
２．ツールの使い方を習得
３．コードの書き込み
４．コンパイル
５．プログラムの実行

開発環境の導入で手間取ってしまったり、ツールの使い方がわからなかったり、開発にはいろんな壁があります。

今回は、１．２．４．の工程を省いて、コードの書き込み、プログラムの実行に集中して勉強できる環境を紹介します。


Wonderfl ―build Flash online―
http://wonderfl.net/
jsdo.it ―share JavaScript,HTML5 and CSS―
http://jsdo.it/


WonderflではFlash(ActionScript)、jsdo.itではHTML5実装ページを開発できます。

開発環境というよりコミュニティサイトという分類に入るのですが、ただのコミュニティサイトではありません。

この２つのサイトの概要ですが...

・開発環境の導入なし、突然WEB上のソースエディタでソースの開発ができる。OpenIDなので登録は簡単。
・ネット環境があれば、どこからでも自身のページでソースの開発ができる。
・ユーザが書いたソースは、ほかのユーザがFORK(コピー)することで自由に書き換えることができる。
・ソースのわからないところはquestionタグをつけることで、ほかのユーザが教えてくれる。
・ユーザ同士のコラボでユニークなソースが生まれる。
・ソースの実行処理は勝手にしてくれる。書いたソースがすぐ実行される。
・いろんなユーザーのソースを見ることで自身のクリエイティビティーも向上。

楽しみながら勉強できるというのはとてもすばらしいことです。

私も登録しているのですが、
誰かが、Forkしてくれたり作品が一人歩きしだした日にはうれしくてたまりません。

また、誰かのQuestionに答えることで自身の勉強にもつながります。

是非登録してみてください。

だいぶシステム寄りの話になってしまいましたが、Webクリエイター志望には必見ですね。


高木

こんにちは。事業戦略室の竹内です。

以前はPC以外からの動画再生はFlashが対応していないため
視聴できない、という問題がありました。

しかし、HTML5の登場によってプラグイン無しで再生する
ことができる環境になってきましたね。

そんな中、HTML5 に対応したYouTube動画の新しい埋め込み方法を
見つけたのでご紹介します。

これはユーザーの環境に合わせて
Flashプラグインが対応していれば従来の方式で、
そうでなければHTML5方式で、自動的に埋め込み
内容を切り替えてくれるようになっています。

埋め込みコードは以下のような感じです。

<iframe class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">
</iframe>

スッキリしていて使いやすい。
これは便利かも...。

モバイルからの利用者が急増する昨今。
需要がありそうですね。

HTML5+CSS3の技術を使った「CSS Nite LP9連動 第2回コーディングコンテスト」。

実用的なデザインをもとにHTML5+CSS3を実装していくこのコンテストは
作成する上でのヒントがたくさん詰まっていると思いました。

少しずつ勉強はしているものの、
なかなか現場で実践するまでに至らないHTML5+CSS3。

改めて確認すると
覚える事がいっぱいだなぁ...（笑

また、審査委員長の言葉が印象的で
時代の流れというものを実感しました。

実際に課題に取り組まれた方は多かれ少なかれ感じたかもしれませんが、従来の「絵として完成したPSDを渡されてそれを再現するためにコーディング」というフローは見直しを迫られるでしょう。

少なくともHTML5やCSS3などの新しい技術の利点の一つである「迅速な開発が可能」という恩恵を享受するためには業務の分担範囲を再考する必要がありそうです。

竹内

みなさんこんにちは！
Webデザイナーの岩附です。

普段何気なく仕事でHTMLを使っていますが
最近、HTMLの歴史についてきになって調べてみました。

HTMLが誕生したのは今から11 年前。

そこからHTML1.0⇒2.0⇒3.0・・・

となると思いきや！3.0は廃案になったので存在してないらしいです。

HTML2.0の後は、HTML2.X(国際化対応)　+　HTML3.2(独自拡張の取り組み)！！

その後、
HTML本来の役割に即した代わりに即した形に整理され、HTML4.0 が1997年に出来
ました。

そして・・
HTML4.01⇒XHTML1.0⇒XHTML Basic

ときて、2009年にXHTML2.0の案がでますが廃案になり、
2010年は次世代HTML!!　HTML5ですね！！

HTML5については4/5の記事で砂坂さんが書いてましたので、そちらでどうぞ！！

なんか自分がいまやってる仕事の歴史とか知ると、
ちょっと親近感わきます☆

それではまた来週！！！

岩附

はじめまして。
事業戦略室の竹内です。

米Appleが「iPhone OS 4.0」を発表しましたね。

・マルチタスク機能
・フォルダでアプリを管理できる機能
・iPhone向けiBooks
・モバイル機能プラットフォーム「iAd」

などなど様々な新機能が追加されているようです。

なかでも自分が気になったのは「iAd」。
アプリ内からフルスクリーンのインタラクティブ広告を表示できるとの事。
これには色々な意味で可能性を感じました。

しかし、気になる事が一つ。
iPhoneもiPadもFlashをサポートしていません！

まだまだ先だと思っていたHTML5ですが
これを機に一気に広まりそうですね。

...勉強しなくては。

竹内

皆様、はじめまして！
J-Payment WEBデザイナーの砂坂です。


この度、J-Paymentデザイナーブログを開設させて頂くことになりました。

このブログでは、J-Paymentデザイン室の日々の業務や、
最新の技術動向、知ってて得する便利機能などを制作の現場からダイレクトにお伝えしたいと思います。

では、さっそく。

初回は昨年秋に入社し、まだまだ勤務半年の
私、砂坂が投稿させて頂きます。



初回なので新しい話題を！ということで話題沸騰の「HTML5」について少し・・。


現在、もっとも主流で使われているHTMLのVerは「XHTML1.0」です。
少し前まで主流だったものが「HTML4.01」。

「HTML4.01」は比較的ルールが簡単な仕様、「XHTML1.0」はルールを少し厳しくし、
XMLに近付けた仕様でした。


そして「HTML5」では、より正確な文書構造を書くことが出来る様になっている様です。


■新要素

・本文内の前置きを表す<header>タグ
・メインの文章を表す<article>タグ
・ナビゲーションを表す<nav>タグ
・フッターを表す<footer>タグ

セクション分けをする要素や、記事をあらわす要素、
ヘッダー、フッター、ナビゲーションを表す要素などが追加されています。


■廃止される要素、属性

・big
・center
・font
・u
・align属性
・background属性
・bgcolor属性

上記はCSSで制御するべきとして廃止。

・frame
・frameset
・noframes

は「ユーザービリティ、アクセシビリティ」の観点から廃止。


などなど、多々変化があるようです。


噂では、2012年にW3Cから勧告され、2022年までには完全普及するんじゃないかと言われている様です。
今のうちに明確な文書構造を意識して、マークアップする事に慣れておかないと・・と思っております！


初回なので張り切って長くなってしまいましたね。
今日はこの辺で失礼致します！
また見て下さいね！！