プレースホルダとHTML5のplaceholder属性
プレースホルダとHTML5のplaceholder属性 HTML5で導入されたplaceholder属性によって、フォームの入力欄にプレースホルダを設定できるようになりました。さて、この「プレースホルダ」とはそもそもなんなのでしょうか。また、プレースホルダにはどのようなテキストを書けばよいのでしょうか。 プレースホルダってなに? フォームの入力欄に、薄い灰色のテキストが表示されているものを見かけます。あのテキストや、テキストを提供する仕組みは、プレースホルダと呼ばれています。 Safariではアドレスバーに“Go to this address”、検索バーに“Google”というプレースホルダが設定されている。 「プレースホルダ (“placeholder”)」 とは、「実際のものに代わって現れるもの」を意味します。たとえば、Webサイトのテンプレートを作る際に、実際のページにはないテキス
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
HTML5 を利用したWeb アプリケーションのセキュリティ問題に関する調査報告書
HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている仕様であり、HTML5 およびその周辺技術の利用により、Web サイト閲覧者 (以下、ユーザ) のブラウザ内でのデータ格納、クライアントとサーバ間での双方向通信、位置情報の取得など、従来の HTML4 よりも柔軟かつ利便性の高い Web サイトの構築が可能となっています。利便性が向上する一方で、それらの新技術が攻撃者に悪用された際にユーザが受ける影響に関して、十分に検証や周知がされているとは言えず、セキュリティ対策がされないまま普及が進むことが危惧されています。 JPCERT/CCでは、HTML5 を利用した安全な Web アプリケーション開発のための技術書やガイドラインのベースとなる体系的な資料の提供を目的として、懸念されるセキュリティ問題を抽出した上で検討を加え、それらの問題
重要！ まずは「オリジン」を理解しよう
連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。今回から、HTML5やJavaScriptに関連したセキュリティの話題について連載することになりました。よろしくお願いします。 もう読みましたか？ HTML5のWebアプリセキュリティに関する報告書 皆さんすでにご存じかと思いますが、2013年10月30日にJPCERTコーディネーションセンター（以下、JPCERT/CC）から「HTML5 を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」が公開されました。 この報告書の調査の一部は、弊社が行いました。また、JavaScriptのセキュリティ上の問題について次々と鋭い指摘を行っているmalaさんにもさまざまな技術的アドバイスを頂いた上、日常的にWebアプリケーションのセキュリティ検査や構築を実際の業務として行っておられる専門家の方々にも査読をお願いして
名前空間宣言は何ですか？ - WHATWG FAQ - 日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文：http://blog.whatwg.org/faq/ （2011 年 1 月 21 日版） 翻訳日：2011/01/25 最終更新日：2011/01/25 概要 WHATWGが公開しているHTML5のFAQです。HTML5の目的や存在意義といった大枠の話から、要素の記述方法といった細かい話まで、さまざまな方面
HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除
ちょっと前に 「hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね （Editor's Draft では）。 ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。 HTML5 W3C Candidate Recommendation 17 December 2012 hgroup 要素が HTML5 勧告候補から削除される main 要素とは？ main 要素は元々、Steve Faulkner 氏 （Web アクセシビリティ関連の方） が HTML5 の拡張仕様として提案し、HTML 5.1 に正式に取り入れられた要素で、その名の通り、文書内の、「主要な部分」 をマークア
HTML5の仕様策定が完了 勧告に向け相互互換性向上進める
W3CがHTML5の仕様策定を完了。最終的な勧告に向け、ブラウザフラグメンテーション問題の解決に取り組む。 World Wide Web Consortium（W3C）は12月17日（現地時間）、HTML5とCanvas 2Dの仕様策定を完了したと発表した。最終的な標準化となるHTML5勧告の公開は2014年中に予定している。 最終的な勧告に向け、Webブラウザごとに表示や動作が異なるフラグメンテーション問題の解決に取り組む。ブラウザ間での相互互換性に加え、オーサリングツールや電子メールクライアント、サーバ、コンテンツマネージメントシステム、その他Webツールなどで確実に実現できるよう、さまざまな活動を実施するという。 既に標準化の次のラウンドを視野に入れ、HTML5.1とCanvas 2D, Level 2の第1草案も発表した。
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に
［速報］アドビがHTML5とモバイルにフォーカスした新ツール群「Adobe Edge Tools & Services」を発表。アニメーション作成、レスポンシブデザインなどが効率的に 米アドビは24日（日本時間24日深夜）、サンフランシスコでイベント「Create the Web」を開催。CSSやJavaScriptを使ったアニメーション作成、画面の大きさによって動的にレイアウトが変化するレスポンシブなWebデザイン、複数のモバイルデバイスへの対応、HTML5やCSS3に対応したコーディングなど、最新のWeb技術に対応した開発を支援する新ツール群「Adobe Edge Tools & Services」を発表しました。 発表された新ツールやサービスを日本語で解説するWebサイトもすでに公開されています。サンフランシスコで開催されたイベントの内容を、ダイジェストで紹介しましょう。 Adobe
Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
モバイルアプリ開発はHTML5が主流に
モバイルアプリ開発者のHTML5採用が加速している。ネイティブコードとWeb Viewを組み合わせたハイブリッドアプリケーションの開発を検討しているらしい jQuery Foundationも発足 本連載は、「Webプラットフォームの『今』をお伝えする」ことを目的としています。 ぼくが日々html5j.orgに投稿しているニュースの中から、ここ1、2週間で注目すべきトピックを厳選して取り上げていきつつ、ネタによっては掘り下げた解説を加えていきます。 今回は、2012年3月2～23日の注目トピックです。前回から間が空いてしまったので、かなり盛り沢山な内容になっています。 一般向けの注目トピック ■ IE 6撲滅へ：日本マイクロソフト、2012年3月中旬よりIEの自動アップグレードを実施（link） ついに、Internet Explorerの自動アップデートが日本でも開始されました。ぼくの手
HTML5で作られた無料MMORPG「BrowserQuest」をMozillaがサービス開始
FirefoxやChrome、Safari、さらにiOSやAndroidでも動作するというMMORPG「BrowserQuest」がスタートしました。これを作ったのはMozillaで、操作方法は単純明快、かなりサクサクと遊べます。 まず、さくっと概要が分かるデモムービーはこちら。 BrowserQuest - Massively Multiplayer HTML5 Game Demo - YouTube 以下が公式サイトです。 BrowserQuest http://browserquest.mozilla.org/ まずはキャラクター名をつけるところから。 なお、InternetExplorer9以前のバージョンだと「このブラウザでは遊べません」というメッセージが表示され、最新版のFirefoxかChrome、Safariを使うように言われます。なお、WebSocketをサポートしたIE
Adobeアカデミックストア
Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases. Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, A
header 要素 - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「The header element」を日本語訳したものです。この記事では、header 要素の正しい使い方が解説されています。 原文タイトル The header element 原文ページ URL http://html5doctor.com/the-header-element/ 著者 Richard Clark 氏 原文投稿日 2009-06-16 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、
iPhoneゲームアプリをHTML5に移植、充分なクオリティに驚愕 【 増田(@maskin)真樹】 | TechWave（テックウェーブ）
[読了時間:1分] 有料のiPhoneゲーム「グランダリウス ウィング ストライク」のHTML5版が公開されている。 公開したのはiPhone版を開発したユビキタスエンターテインメント。同社が提供するJavaScriptゲームエンジン「enchant.js」とHTML5の各要素を使い、映像・動き・サウンドとあらゆる面でウェブブラウザ上で動作するものとは思えないクオリティに仕上がりになっている(注：記事公開時点でサウンド再生が不安定でChromeを推奨) 若干重いものの、iPhone4では快適にプレイ 「グランダリウス/enchant.js」 HTML5版は同社とD2コミュニケーションズが運営するコンテストサイト9leap上で公開。PCのウェブブラウザでも動作する。美しいスクロールと映像効果、そして高度なサウンドがウェブゲームとは思えない完成度で機敏に動作する。 ユビキタスエンターテインメン
【第21回 HTML5とか勉強会】 ゲーム開発はHTML5+スマホベースが新潮流
ゲーム開発でHTML5やCSS3、JavaScriptの使いどころは？ 2011年9月27日、サイバーエージェント セミナールームで、「第21回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会だ。今回のテーマは「HTML5＋ゲーム」。当日の様子をお伝えしよう。 「Smartphone 向け HTML5 ゲームの作り方」 まず、ディー・エヌ・エーの城戸氏（@sou）からプレゼンがスタートした。城戸氏はDeNAで海外向けWebViewHTML5アプリ開発や、内製タイトルのスマホ対応などを手掛けている。 mobageでは、さまざまなタイトルがすでにAndroid/iOS対応済みであることを紹介した。具体的にはHTML/CSS3ベース、Canvasベース、SWFベース（ExGame）といった複数の実現方法を使い分けている
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5とCanvas 2Dの機能が完了した
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
Loading...
