<input> 要素の type 属性を使ったフォーム入力支援 | Accessible & Usable
公開日 : 2013年4月21日 (2020年8月30日 更新) カテゴリー : ユーザビリティ Web サイトのフォームの入力要素のうち、<input> 要素は、type 属性の記述によって、テキストボックス (type="text")、パスワード入力欄 (type="password")、チェックボックス (type="checkbox")、ラジオボタン (type="radio")、といった種類を指定することができます。 そして HTML5 では、<input> 要素で使用可能な type 属性値が新たに追加されています。ユーザーが使用するデバイスによっては、この type 属性値に応じた入力しやすいユーザーインターフェース (UI) が提供されるので、「気の利いた入力支援」が可能になります。 たとえばスマートフォンやタブレットのように、入力要素にフォーカスが当たるとタッチスクリーン
HTML5特設サイト - Catch on HTML5
HTML5の活用を考えてる人達に向けて、制作会社・開発会社の立場からHTML5の現状・できることできないこと・そして今後について・「ざっくりわかる最新情報」をまとめてみました。以上8つのテクノロジーを基礎に、HTMLのセマンティックな構造化をすすめwebアプリケーションを拡張する各技術の仕様を標準化することでブラウザやデバイスの違いに関わらず扱えるようにする。 webのアプリケーションプラットフォーム化 これがHTML5の最終目標です。 HTML5はプラットフォームでありカバーする範囲が広いため既にサイトやサービスを運営されている方々には現行サービスへの適用方法や現実的な運用イメージがつきにくい方も多いかも知れません。しかし、webのHTML5化は確実に進んできており現行のサービスへも影響を与え始めています。 [グーグルが数ヶ月以内にセマンティック検索を導入] Google Gives S
mizzz.jp
mizzz.jp 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
ol要素で利用出来るHTML5のreversed属性をjQueryでクロスブラウザ対応にする - かちびと.net
HTML5でol要素でリストに振る番号 を逆にするreversed属性が追加され ました。と言ってもまだChromeしか サポートしていません。便利っちゃ 便利なのでjQueryで他ブラウザに 対応します。 reversedはol要素でリストに降られる番号を逆にする属性です。 HTML5 <ol> reversed Attribute 現在はChromeしか対応していません。あんまり使う事は無いかもしれませんけど、需要の有無は置いといてこれを他ブラウザでも動作させます。 Sample Chrome以外でも同じ表示が出来てると思います。 コード function reverselist(list) { var totalItems = $(list).children().length; var start = $(list).attr('start'); var thisitem; for
40 Useful HTML5 Tutorials, Techniques and Examples
HTML5 right after its arrival has been in the news because of its enhanced functionality and ease of use. And now the latest version of HTML5 is out, web developers and internet marketers are shifting to HTML5 as it comes with several new and improved features that distinctly make Web development easier. In this collection, we are sharing some useful HTML5 tutorials with our designing and developm
HTML5: img 要素の alt 属性 の仕様 – attosoft.info
概要 alt 属性に指定する代替テキスト 空文字列の代替テキスト alt 属性の省略 関連リンク 訂正：HTML4/XHTML の alt 属性について 概要 HTML5 では img 要素の alt 属性の仕様が大幅に変更され、HTML4/XHTML と比較すると定義がかなり詳細化されている。 HTML5 における alt 属性 の仕様を概略すると次のようになる。 alt 属性には画像を置換可能な詳細な代替テキストを指定する HTML4/XHTML の alt 属性は短い説明 (alt テキスト) だったが HTML5 の alt 属性は長い説明 (title 属性よりは longdesc 属性に近い (※)) 画像の情報量 ≒ alt 属性に指定する代替テキストの情報量 特定の条件を満たせば alt 属性を省略することができる ※ HTML5 の仕様はワーキングドラフトでまだ勧告されて
HTML5 ドキュメントのセクションとアウトライン - HTML | MDN
警告: ウェブブラウザーや支援技術の中で、提案されているアウトラインアルゴリズムを実装したものはありません。これは最終的な W3C の仕様書に含まれていません。したがって、アウトラインアルゴリズムを、ユーザーに文書の構造を伝えるために使用するべきではありません。作者には、見出しの順位 (h1-h6) を使用して文書の構造を伝えることを推奨します。 HTML5 の仕様書では、文書の構造を整理するのに役立つ意味づけする区分化要素がいくつか導入されました。意味づけする区分化要素は、ブラウザーや読み上げアプリや音声アシスタントなど、ユーザーに代わって文書を解釈する他の技術に構造的な意味を伝えるために特別に設計されています。 意味づけする区分化要素は、文書内のより大規模な構造を明確にします。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして <div> 要素
MicroformatsとMicrodataの違いについて - kojika17
Webページの内容が、"何を意味するのか"をコンピュータが効率よく情報を収集・解釈できるようにする構想を「セマンティックWeb」「セマンティック(X)HTML」などと呼びます。 セマンティックHTMLを始めるにあたりMicroformatsとMicrodataの違いについて、"どう違うのか"分かりづらかったのでまとめてみました。 そもそもMicroformats、Microdataとは？ マークアップ言語であるHTMLは文章構造を表すことはできますが、意味までは表現できません。 例えば、人の名前や住所、電話番号といったものにHTML要素でマークアップすることはできません。 ただしMicroformatsとMicrodataを使うことにより、このような意味づけを可能にし、コンピュータも可読できるセマンティックなHTMLドキュメントを作成することができます。 Microformats、Micr
ブログ記事リストのマークアップ
サイトをリデザインした のにともない、全体的にマークアップについても見直しているのですが、ちょっと悩んだのがホームやアーカイヴ・ページなどにある「ブログ記事の概要や抜粋のリスト」です。 よく見かけるのは以下のようなマークアップで、うちもリデザイン前はだいたいこんな感じでした: <section class="articleExcerptList"> <h1>Recent articles</h1> <article> <h2><a href="...">ブログ記事リストのマークアップ</a></h2> <time datetime="...">April 10, 2012</time> <p><!-- 概要・抜粋 --></p> <a href="...">Continue reading</a> </article> <article> <h2><a href="...">リデザインしま
備忘録 - 本blogをHTML5にするためにやったこと : 404 Blog Not Found
2011年12月15日20:00 カテゴリTipsiTech 備忘録 - 本blogをHTML5にするためにやったこと 正確には、「本blogをIEから見てHTML5に見えるようにするためにしたこと」ではありますが。 レシピ 二つだけ <!DOCTYPE html>を<html>の前に追加 <head>内に以下を追加 <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <![endif]--> 本来であれば1.だけでIE9はHTML5モードになってくれるはずなのですが、2.がないと駄目でした。実のところHTML5では2.はinvalidなのですが、重要なのはvalidityではなくブラウザーの挙動なので。Chrome Frameでも利用されているテクニックですし。 internet ex
HTML5&API総まくり
6. • 現在の要素数は108 • 30種類の新要素 • 14種類の既存要素が変化 • time要素、hgroup要素、data要素 （WHATWG HTMLのみ）などが争 点。 HTML5マークアップ 7. • リッチな入力フォーム、新たなフォーム要素、宣 言的なバリデーションなど。 date datetime datetime-local month week time number range email url search tel color HTML5 Forms 8. • HTMLにマシンリーダブルなデータを埋 め込むための仕様 <div itemscope> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p> </div> HT
allWebクリエイター塾（オールウェブクリエイター塾）
日本で最も早くHTML5講座を開催し、基礎講座からflexboxでのサイト構築方法を教えています。段組レイアウトで利用されたfloatからflexでの実装にシフトされているためflexboxをいち早く学びましょう。flexboxが基礎から学べるのはallWebだけ！ HTML5講座も法人研修合わせて100回を越えるHTML5&CSS講座の開催を行っています。蓄積した教え方のノウハウがあります。講座のカリキュラムはそのノウハウを活かし生徒がつまずきやすい箇所、勘違いする点を解りやすく説明できるように構成しています。 HTMLの誕生と歴史 HTML5の目的 HTMLの要素と属性 Web標準を構成する技術 アウトラインアルゴリズム 新要素と役割 HTML5の要素 id属性とclass属性の使い分け CSSの仕組み CSSの構文 CSSの記述場所 セレクタの仕組み セレクタの個別性 セレクタの優先
HTML5の要素を条件付きコメントなしでIEで使う - 徒書
今更ながら、ここもHTML5にしてみようかなという気持ちが湧いてきています。以前は、一旦公開した文書の形式を無闇に変えるのはよくないという思いが強かったのですが、個人のページなのだし色々と実験的なことをもっと試してもいいのでは、と思うようになったので。 さて、HTML5導入にあたり一番気にしていたのが、IEでHTML5の新しい要素を使う方法のことでした。今だと html5shiv を使って以下のようなコメントを入れるのが一般的になっているようです。 <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> しかしながら、HTML文書というのは様々な環境で利用されるための文書形式だと自分は考えているので、その中に(コメントとは言え)特定のブラウザのた
Fullscreen API を簡単に試してみた
Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。 例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5マークアップ珍プレー集 - HTML5 Conference 2012
html5-memo.com
これからのWeb制作に使える、HTML5,CSS3の対応表や各種リソース
IBM Developer
IBM Developer
adakoda.com