連載インデックス
「HTML5“とか”アプリ開発入門」

JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基本を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします。

Webの3つの問題を解決する「HTML5」とは何なのか HTML5“とか”アプリ開発入門（1）　最近よく目にする「HTML5」という言葉。JavaScirptのAPIやCSS3、SVGなどを含め、全体的な概要と、その意義をお伝えします デザインハック ＜ HTML5＋UX 2010/8/30

HTML5でWebページをマークアップする基礎知識 HTML5“とか”アプリ開発入門（2）　5から変わったHTMLの文法。宣言の仕方や、押さえておきたい3つのポイント、文法チェックツール、SVGの記述について説明します デザインハック ＜ HTML5＋UX 2010/10/4

HTML5の登場で、XHTMLは結局どうなったの？ HTML5“とか”アプリ開発入門（3）　これまでのXHTMLの成り立ちや、HTML5時代のXHTML「XHTML5」の仕様について説明し、バリデータで文法検証を行ってみます デザインハック ＜ HTML5＋UX 2010/11/12

HTML5のセクションで“文書構造”を理解する HTML5“とか”アプリ開発入門（4）　文書構造を表すための新たな要素「セクション」。マークアップの量は増えるが、文書のツリー構造がずっと把握しやすくなる デザインハック ＜ HTML5＋UX 2011/1/18

HTML5 Outlinerで文書の“アウトライン”を確認する HTML5“とか”アプリ開発入門（5）　文書の「アウトライン」「暗黙的なセクション」「セクションルート」などについて、Google Chromeの拡張機能を使って視覚的に理解しよう デザインハック ＜ HTML5＋UX 2011/2/1

HTML5で既存のinputタイプに加わった6つの変更点 HTML5“とか”アプリ開発入門（6）　JavaScriptを使わずにリッチな入力フォームを活用可能になったHTML5。最新Webブラウザで、その見た目と変化を確認してみましょう デザインハック ＜ HTML5＋UX 2011/2/17

HTML5でinput要素に追加された新しいタイプ13連発 HTML5“とか”アプリ開発入門（7）　HTML5の新しい入力タイプを、日時関連や数値、検索、電話番号、URL、メールアドレス、色など用途別にサンプルコードとともに紹介 デザインハック ＜ HTML5＋UX 2011/3/7

サイトのフォームを多機能にするHTML5の新要素5選 HTML5“とか”アプリ開発入門（8）　HTML5の新しいform関連要素を、出力値やデータのリスト、進捗率の視覚化、公開鍵暗号など用途別にサンプルコードとともに紹介 デザインハック ＜ HTML5＋UX 2011/4/5

HTML5で仕様になった入力値チェック＋便利な3Tips HTML5“とか”アプリ開発入門（9）　CSSの疑似クラスやJavaScriptを使った方法に加え、新しい6つの属性を使ったバリデーションや、フォーム関連の便利なテクを紹介します デザインハック ＜ HTML5＋UX 2011/4/25

HTML5で動画や音声を利用しよう！ HTML5“とか”アプリ開発入門（10）　HTML5では<video>や<audio>といったタグを用いてマークアップを行うだけで、簡単に動画や音声の再生ができるようになる デザインハック ＜ HTML5＋UX 2011/5/27

HTML5のvideo/audio＋JavaScript APIテクニック HTML5“とか”アプリ開発入門（11）　HTML5の<video>や<audio>タグとJavaScript APIで、自由に動画や音声を楽しもう。カスタムのビデオプレイヤーだって作れる デザインハック ＜ HTML5＋UX 2011/7/28

■ ＠IT関連記事

Canvas APIの基礎 Webグラフィックをハックする（4）　知もともと、Appleが主にウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう デザインハック ＜ HTML5 + UX 2012/8/1

SVGで図形やアニメを描画してみよう Webグラフィックをハックする（3）　知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう デザインハック ＜ リッチクライアント 2012/7/2

10分でわかるSVG 基礎編 Webグラフィックをハックする（2）　知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう デザインハック ＜ リッチクライアント 2012/6/1

5分でわかるCSSグラフィック Webグラフィックをハックする（1）　知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう デザインハック ＜ リッチクライアント 2012/4/18

位置情報をブラウザで活用！ Geolocationを使おう 連載：人気順に説明する初めてのHTML5開発（1）　スマホWeb開発での人気順に各HTML5機能の使い方を解説する連載がスタート。今回は断トツ人気のGeolocation API 「Insider.NET」フォーラム 2011/7/14

ブラウザでストレージ？ Web Storageを使いこなそう 連載：人気順に説明する初めてのHTML5開発（2）　容量制限やセキュリティの課題があった、従来のクッキーはもう古い。今すぐ実用できる「Web Storage」を活用しよう 「Insider.NET」フォーラム 2011/08/12

アドイン不要！ ドラッグ＆ドロップを使いこなそう 連載：人気順に説明する初めてのHTML5開発（3）　ブラウザ標準の機能のみでドラッグ＆ドロップを実装できる、HTML5の「Drag and Drop API」の使い方を説明 「Insider.NET」フォーラム 2011/09/13

DOM操作の主流になるか！？ セレクタAPIを使おう 連載：人気順に説明する初めてのHTML5開発（4）　DOMで要素を取得するのに、煩雑で長い記述はもう不要。シンプルなCSSセレクタの構文を使って簡単に取得できる 「Insider.NET」フォーラム 2011/10/07

双方向通信を実現！ WebSocketを使いこなそう 連載：人気順に説明する初めてのHTML5開発（5）　リアルタイムな表示更新を行うWebアプリの開発で使われてきたAjaxとComet。その問題点を克服したWebSocketとは 「Insider.NET」フォーラム 2011/11/11

JavaScriptでファイル操作？ File APIを使いこなそう 連載：人気順に説明する初めてのHTML5開発（6）　HTML5では、ローカルのファイルをブラウザ上で直接、取り扱えるようになった。ファイルの読み取りと書き込みを試そう 「Insider.NET」フォーラム 2011/12/16

並列処理を実現！Web Workersを使いこなそう 連載：人気順に説明する初めてのHTML5開発（7）　JavaScriptコードの重い処理を、バックグラウンドで動作させてレスポンスを改善したい。それなら、Web Workersを使おう 「Insider.NET」フォーラム 2012/1/13

Webアプリもオフライン実行？ IndexedDBを使おう 連載：人気順に説明する初めてのHTML5開発（8）　オフラインでもWebアプリ？ それならブラウザ側でデータを管理できるKey-Value型簡易DB「Indexed Database」を使おう 「Insider.NET」フォーラム 2012/2/14

audioタグで音声翻訳アプリを作ろう！ HTML5アプリ作ろうぜ！（6）　audioタグと翻訳APIを組み合わせ、テキスト翻訳だけではない、「リスニング」もできるアプリを作成しよう 　デザインハック ＜ リッチクライアント 2013/9/11

FileSaver.js＋File APIで作る画像ファイル装飾アプリ HTML5アプリ作ろうぜ！（7）　HTML5のファイル操作に関するAPIとブラウザー上でデータを作成・生成しダウンロードができるJavaScriptライブラリの使い方を解説します 　デザインハック ＜ リッチクライアント 2014/1/9

業務系開発現場が知っておきたいHTML5の4つの意義 Windows XP移行待ったなし　エンタープライズ向けシステムのクライアント開発現場が抱えていた問題はWeb標準という一つ上のレイヤーからアプローチし解決できるのかを探る 「HTML5 + UX」フ ォーラム 2014/3/28

重要！ まずは「オリジン」を理解しよう HTML5時代の「新しいセキュリティ・エチケット」（1）　Web開発者必見！ HTML5やJavaScriptに関連したセキュリティの話題を、はせがわようすけ氏が紹介する新連載 「Security&Trust」フ ォーラム 2013/11/25

単純ではない、最新「クロスサイトスクリプティング」事情 HTML5時代の「新しいセキュリティ・エチケット」（2）　HTML5では、いままでとは異なるクロスサイトスクリプティングが登場しています。もう一度、XSSをおさらいしましょう 「Security&Trust」フ ォーラム 2013/12/17

知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法 HTML5時代の「新しいセキュリティ・エチケット」（3）　“新しいXSS”は知識こそが対策の第一歩。基本の対策を行うことが重要です  「Security&Trust」フ ォーラム 2013/11/25

標準化と実装が進む次世代Web規格「HTML5」とは？ 用語解説（12）　ChromeやOperaなどのWebブラウザへの実装が始まっているHTML5。何が新しくなるのか？ HTMLの歴史を振り返りながら、その目的や特徴を解説する 「Windows Server Insider」フォーラム 2010/8/19

D89Web標準HTMLタグリファレンス Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします 「デザインハック」コーナー

いまさら聞けないCSS／スタイルシート入門 Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？ 「デザインハック」コーナー

D89 CSS/スタイルシート リファレンス辞典 無数にあるCSS/スタイルシートのプロパティを大まかに分類し、1つずつ正しい使い方を紹介しながら、リファレンス辞典を完成させていく連載です。コードサンプルやDOMの指定方法まで丁寧に説明します 「デザインハック」コーナー

Webブラウザ別CSSハック＆フィルタTips Webブラウザの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのさまざまなCSSハック＆フィルタTipsをお届けします 「デザインハック」コーナー

まずはHTML。ハイパーなタグ付き言語 デザイナーのためのWeb学習帳（1）　Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」について。ハイパーなタグ付きテキストを攻略しよう デザインハック ＜ HTML5 + UX 2008/8/26

HTMLの表現力が辿った道のりを知っておこう デザイナーのためのWeb学習帳（2）　Webでコンテンツを表現する決まりである共通言語のHTML。世界共通語であるHTMLがここまで辿ってきた道のりを知っておこう デザインハック ＜ HTML5 + UX 2008/9/18

いまさら聞けない“Web標準”、そしてXHTML＋CSS いまさら聞けないリッチクライアント技術（4）　今回はXHTMLとCSSを使ったWeb標準規格を紹介。その歴史や役割、さらにはHTMLとXHTMLの違いやCSSについても解説 「HTML5 + UX」フ ォーラム 2007/9/19

DOMの基本を学ぼう DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある 自分戦略研究所 > スキル創造研究室

WebデザイナのためのHTMLチューニング入門 Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう 「デザインハック」コーナー

教科書に載らないWebアプリケーションセキュリティ Webアプリケーションとセキュリティは切り離せない。セキュアなコードを書くために知っておくべき小ネタを取り上げる 「Coding Edge」フォーラム

 

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）