やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト2011.11.14 14:00 mayumine ｢One Milionth Tower｣は高層建築が社会に与えてきたストーリーをミニドキュメンタリーとして紹介するプロジェクト。 ｢One Milionth Tower ｣の注目すべきところは、世界初の、完全にHTML 5と WebGL、Javascriptだけで作られた、高度なインタラクティブなサイトになっているところです。 3Dのビルや写真（そして音も）のドキュメンタリーグラフィックスは、すべてWeb GL（2D/3Dグラフィックスをウェブブラウザだけで表現できるAPI）で表現されています。 さらに｢One Milionth Tower｣では、｢Popcorn｣と呼ばれる、WebのAPIとHTMLのビデオ属性を統合する特殊なJavascriptツール
いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！
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 について基礎から
ASSIOMA(アショーマ) » HTML5が新しいWebの世界を創る
最近テック系のブログやニュースなどでHTML5を取り上げられることが多くなり、目にされた方も多いと思います。人気ブログの「Techwave」でも以下のような記事でHTML5に言及しており、その注目の高さが伺えます。 ソーシャルの次の時代、「フリーミアム」が終わり「コンテンツがキング」になる Appleを脅かすFacebookの「プロジェクト・スパルタン」とは 日本のソーシャルゲームに追い風、日本はスマホソーシャルゲーム市場で世界を獲れる！ これらの記事の中で、HTML5をベースにしたWebアプリの可能性が非常に高く評価されており、今後のモバイルアプリの主流がネイティブアプリからWebアプリに移行すると予想されています。 そこで今回はこのHTML5およびWebアプリについて取り上げ、その可能性を探ってみたいと思います。 ■ HTML5とは 最初にHTML5とはどういうものなのか簡単に説明した
ここが変わった！HTML5マークアップ入門 (1/6)
ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
HTML5で進化したフォーム機能 ここが違う！サンプルで見るHTML5（5）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい
CSSレイアウトの肝！ 表示・配置のプロパティ、14選
詳しくはコチラ→ position ボックスのレイアウト方法を指定するpositionプロパティ topプロパティ topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ top ボックスを配置する場合に上からの距離を指定するtopプロパティ bottomプロパティ bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ leftプロパティ leftプ
画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例:phpspot開発日誌
Base64 Encoding for Images. 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例。 Googleがインスタントプレビューや画像検索で導入してその読み込み速度に驚いた方も多いかもしれません。 その手法をPHPで実現するコードが掲載されていましたのでご紹介。 PHPでやるにはそんなに難しいわけではなさそう。 <?php $img_src = "image/sample.png"; // 画像ファイルの指定 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); // バイナリデータを読み込み $img_str = base64_encode($imgbinary); // base64エンコード echo '<img src="data:image/png;base6
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
意外と知らないHTMLタグ講座 | オモコロ
HTMLタグというのはWEBの文章やグラフィックの配置や装飾を指定する便利な記号です。かけだしブロガーも、バリバリのプロフェッショナルも要チェック！意外と知らない便利なタグがあるかも！ 原宿: うーーーん………どうもホームページ作りがうまくいかないな…… リックェ: こんにちはー 原宿: おー、リックェ リックェ: 「HTMLタグ」のことでお困りだって聞いたんですけど？ 原宿: そうなんだよ、全然わかんなくてさ リックェ： 任せといてください！ 僕、一応そっち系の仕事してますんで詳しいですよ 原宿： 頼りになるー！ 悪いけどちょっと教えてよ リックェ： はい。まぁHTMLタグってのはマークアップ言語（ランゲージ）のひとつで、ドキュメント、つまり文章やグラフィックですね。これの配置を決めたり装飾をしたりする…… 原宿： あー、ちょっと待って。口で説明されてもイマイチわからないから、とりあえず
ソースコードで発見した奇妙なコメント集
2013年3月23日 ネタ コーダー・デベロッパー・プログラマーさん達はそのソースコードにわかりやすい説明書きを「コメント」として残し、後から他の人が修正・編集しやすいようにコードを書いていきます。Stackoverflowの中でなんだそりゃー！というコメントがまとめられていたのでいくつか翻訳してみます！「クライアントからのムチャぶり迷言集 」に続き久しぶりにネタ系記事です。楽しんでください！ ↑私が10年以上利用している会計ソフト！ プログラマーさん達の名誉のため、先に言っておきますが、全てのプログラマーがこういったコメントを残しているわけではありませんよ！「こんなの書く人いるんだー世の中いろんな人がいるもんだー」くらいに軽く読んでみてください！ 自信を失したプログラマー達 自虐コメント多数！ // ごめん。 /* お願い…動いてくれ… */ // このコードは最低だ。知ってるだろ？俺も
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
HTML5ことはじめ | Another Step.com
制作者側にはかなり普及してきた感もあるHTML5。 情報は溢れていますが、自身も少しづつ勉強してきたのでXHTML1.0との違いなどをメモがわりにアウトプットしてみた。 (マークアップメインの話です) HTML5はW3Cより2008年1月22日に草案が発表され、2010年8月現在も草案の段階です。 勧告はW3Cが2012年3月、WHATWGは2022年としており、どちらにしてもまだ先ですが、新しいブラウザは段階的に対応していくと予想されるし、JSを使えばIEもカバーできるので、現状利用することも可能でしょう。 メリット・デメリットについては賛否両論?あるでしょうが… ※このサイト自体もHTML5で組んでいますが、HTML5、WordPressともに未熟なため、制御できず正しく組めていない箇所があります。 また下記内容についても間違っている可能性があるので、その場合は指摘していた
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
HTML5に関わらないと日本企業は世界から遅れる (1/2) - ＠IT
HTML5が拓く新しいWeb（5. W3C編） HTML5に関わらないと 日本企業は世界から遅れる 新野淳一 Publickey 2010/4/6 HTML5について日本語で議論する「HTML5 JAIG」メンバーに、そもそもHTML5の仕様はどのように決められているのかを聞いた 日本語でHTML5についての議論を行うW3Cのグループ HTML5の仕様は現在、W3C（World Wide Web Consortium）のHTML Working Group（以下、HTML WG）を中心に策定が進められています。HTML WGのHTML5に関する議論は、メーリングリストに入ることで誰でも参加可能ですが、英語でのコミュニケーションであり、また仕様策定に関する内容が中心であることなどから、日本人で参加している人はそれほど多くありません。 そこで、日本語でHTML5についての議論を行うことを目的に
Dive Into HTML5
by Mark Pilgrim with contributions from the community Dive Into HTML5 elaborates on a hand-picked selection of features from the HTML5 specification and other fine standards. We encourage you to buy the printed work — Mark Pilgrim’s artfully titled “HTML5: Up & Running” — published on paper by O’Reilly, under the Google Press imprint. Your kind and sincere feedback is always welcome, and this work
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 canvasをjQueryから簡単に扱う「jCanvas」
5509.me