html5のフォームバリデーションの記述例
以前はjavascriptやphpで行っていたフォーム送信内容のチェック（バリデーション）もhtml5以降は簡単にできるようになりました。 簡単と言ってもパターンチェックでは正規表現の知識が必要です。 ここでは入力項目に応じたパターンの記述例を紹介します。 性別 いずれかのラジオボタンが選択されてないとエラーとなる。 <input type="radio" name="gender" id="gender1" value="1" required /><label for="gender1">男性</label> <input type="radio" name="gender" id="gender2" value="2" /><label for="gender2">女性</label> 男性 女性 都道府県 value が空欄のものを選択するとエラーとなる。 <select name
HTML5.1、5.2での仕様変更点をメモ。
先日Twitterにこんな投稿をしたら地味に伸びたので、私も含めて案外みんな2014年に勧告された後のHTML5の仕様変更は追ってないのかなと思い、自分のための備忘録も兼ねて主な変更点をメモしておきます。 なお自分はマークアッパーなので、仕様変更点全てを網羅するのではなく、あくまでHTMLマークアップに関連する部分のみピックアップすることとします。全ての変更点を確認したい人はW3Cの仕様書をあたってください。 2016年HTML5.1勧告時の仕様変更 HTML5.1勧告時の注意すべき仕様変更点は以下の通り。 【追加】 ・picture要素とsrcset属性の追加 ・details要素とsummary要素の追加 【削除】 ・ネストされたセクション要素の見出しに全てh1を置くこと ・tfoot要素をtbody要素の前に置くこと 【変更】 ・セクション要素の中のheader/footer要素は入
role属性を実装しよう
各キーワードの意味については、割愛するので、詳細はリンク先の原文を参照してください。 何故、ランドマークロールばかり取り沙汰されるのか これは振り返りでみた通りXHTML2.0第7次案の2005年に提唱されていたころから考えられていた使い方であるということ、我々制作者にとってもナビゲーションの目印として機能することを目的にしたものは魅力的かつ実用的なので先攻して実装を試みる制作者が決して少なくないこと、そして現にこれを実装するソフトウェアも既にいくつかでてきていることから、ランドマークロールが圧倒的に取り沙汰されることになっているのだと思われます。一番は何と言っても制作者側が現実的に実装するための労力と時間をかけるには、ランドマークロール8個までが取り入れられる限界だとも考えられます。 ランドマークロールに対応している音声読み上げソフト Windows 用スクリーンリーダー NVDA 日本
2016/11/1付けで正式勧告となったHTML5.1新仕様について、知っておくべきことと知ってたら楽しいこと、そして知らなくてもいい（であろう）こと - Qiita
2016/11/1付けで正式勧告となったHTML5.1新仕様について、知っておくべきことと知ってたら楽しいこと、そして知らなくてもいい（であろう）ことHTMLHTML5マークアップフロントエンド 追記[20161109] * todogzmさんによる脱字のご指摘の反映 * narutoさんによる translatable の誤訳のご指摘の修正 追記[20161110] * iwaim@githubさんによる旧仕様へのコメントを反映 追記[20161111] * momdoさん、falsandtruさんによる誤訳のご指摘の修正 追記[20161124] * takahashimさんによる脱字のご指摘の反映 公式はこちら。 以下に解説する「知っておくべき」「知ってたら楽しい」「知らなくてもいい」の分類は私個人の見解であることをご容赦願いたい。また、解釈の誤りやその他ご意見などはコメント欄にてご
2016年秋登場！HTML5.1で追加される新機能とは？ ｜ SiTest (サイテスト) ブログ
こんにちは、SiTest事業部エンジニアの森永です。 HTML5が2014年10月に正式に勧告されてから1年半経ちますが、現在HTML5.1の仕様が検討されています。 W3Cは2016年9月に勧告する計画を先月6日にW3C Blogで発表しました。 HTML5.1は、HTML5のマイナーバージョンアップとなり既存のHTML5が大きく変化するものではありませんが、いくつかの新機能が搭載される予定となっています。 中でも、Webサイトを制作する方、およびWebアプリケーションを開発する方にとって一番大きな新機能はpicture要素の導入でしょう。 picture要素は、子要素として0個以上のsource要素と1個のimg要素を含むように構成されます。そして、通常はimg要素で指定した画像、画面サイズが指定したサイズ以上(または指定したサイズ以下)の時はsource要素で指定した画像といったよう
HTML 5.1の新要素picture入門 - Qiita
(2016/09/26 追記) picture要素について、ICS MEDIAにて更に詳しく解説しました。こちらも合わせて参照ください。 レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA HTML 5.1にて実装される新要素picture要素を使うと、CSSメディアクエリを使って画像を出し分けることが可能です。 例えば、ビューポート横幅が700px以下の時、a.pngという画像を表示するコードは下記のとおりです。個別の画像の指定はsource要素で行い、画像パスをsrcset属性、メディアクエリをmedia属性でそれぞれ指定します。また、picture要素に対応していないブラウザの為に、img要素も必ず指定します。 <picture> <source media="(max-width: 600px)" srcset="im
HTML 5.1勧告! これだけは押さえておきたい変更点 - teratail blog
日本のみなさん、こんにちは! teratailエンジニアの鈴木です! 本日(日本時間)W3Cのブログで正式に発表があり[1]、HTML 5.1が 勧告 (REC)となりました! よっ! 今回は、このHTML5初のマイナーバージョンアップデートについて、Web制作者が押さえておきたい変更点を、いくつかピックアップして紹介してみようと思います。 HTML 5.0の勧告は2014年の10月に行われ、これは1つ前のバージョンから10年以上の時を経た、大幅なアップデートでした。 今回勧告されたHTML 5.1は、前回の勧告から2年程度しか間が空いていませんが、ワーキンググループはおよそ1年に1度HTMLの安定したバージョンを勧告としてリリースできるようなワークフローに取り組んでいることが、4月に発表されています[2]。 なお現時点でHTML 5.2についても、GitHubでEditor's Draf
【HTML5.1勧告】セクション要素内見出しレベル仕様の変更について
2016年11月1日付でW3CがHTML5.1を勧告しました。 HTML5からの変更差分はこちらにまとめられていますので、詳細はこちらを見ていただくとして、 今回はその中で「removed」つまり削除された仕様の一覧の中にあった次の項目に注目したいと思います。 ・The use of nested section elements each with an h1 to create an outline. （・アウトラインを生成するためにそれぞれh1を持つネストされたセクションを使用すること） HTML5でのアウトラインと見出しのルール 2014年勧告のHTML5では、「セクショニング・コンテンツの入れ子によって正しく階層構造がマークアップされている場合、その中で使用される見出しレベルは問わない」という仕様がありました。 このことはHTML4.01からHTML5になったときの大きな仕様変更
W3Cのは『欠陥フォーク』！？ HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート
XMLこそがウェブの未来であるという見方が支配的だったために、2004年のOperaとMozillaの共同提案は却下され、W3CでHTMLを改良する道が閉ざされました。そこでブラウザーベンダーが集まってW3Cとは別の組織でHTMLやHTMLに関連する仕様の改良を行う、というのがWHATWGのはじまりです。 以来今日に至るまでずっと、WHATWGはHTMLの開発を（ある期間はW3Cと共同で、ある時期からはW3Cとは別に）し続けています。「WHATWG HTMLこそが実装者とウェブ開発者によって参照されるべき最新の仕様であり、欠陥フォーク（W3C HTMLのこと）は答えではない」というのはWHATWG HTMLのエディターであるAnne van Kesterenの言葉の通り、WHATWG HTMLを第一に参照すべきでしょう。 HTML5勧告以降のW3Cの動向 さて、W3Cに話を戻します。HTM
KSKソフトウェアテストソリューション | 品質を追求する。信頼できるソフトウェアテストパートナー
これまで主に金融業のお客様に対し、Web・モバイルアプリ開発における 品質保証やセキュリティの分野で様々なプロジェクトを支援してきました。 これまで培ったノウハウを基に、お客様のニーズに寄り添った最適な ソフトウェアテストソリューションで貴社の抱える「品質課題」を解決します。 これまで主に金融業のお客様に対し、 Web・モバイルアプリ開発における 品質保証やセキュリティの分野で 様々なプロジェクトを支援してきました。 これまで培ったノウハウを基に、 お客様のニーズに寄り添った最適な ソフトウェアテストソリューションで 貴社の抱える「品質課題」を解決します。 これまで主に金融業のお客様に 対し、Web・モバイルアプリ開発に おける品質保証やセキュリティの 分野で様々なプロジェクトを 支援してきました。 これまで培ったノウハウを基に、 お客様のニーズに寄り添った 最適なソフトウェアテスト ソリ
todya-only.net
Bing Mapsの基礎〜応用 某GのmapのAPIを利用するのにクレカ登録が必須となったので、Bing Mapsでどのくらいまでいけるのか試してみた。 主な使用技術 Bing Maps API、JavaScript、CSS、レスポンシブ 詳しく見る Youtube APIを使用したサンプル YouTube Data API (v3)を使用し、JavaScriptにてユーザーチャンネルの動画を取得するプログラムを作成。 主な使用技術 YouTube Data API、JavaScript(jQuery)、CSS、レスポンシブ 詳しく見る ポケモンGO図鑑 Githubに公開されている「Pokemon-DB」を元にページを生成 主な使用技術 JavaScript(jQuery)、CSS、レスポンシブ、Photoshop（タイプのドット絵を作成） 詳しく見る
HTML5 and CSS3 - Adobe - The Expressive Web - Beta
The Expressive Web is an Adobe-curated resource website for the advocacy, support, and advancement of HTML5 and CSS3 web development.Copyright © 2011 Adobe Systems incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of User and Online Privacy Policy. Resources About Adobe and HTML5
2015年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの黒澤剛志です。本稿では、昨年に引き続いて、2015年のWebアクセシビリティの短期的な予測を寄稿させていただきます。 HTML5がW3C勧告に 2014年10月、HTML5仕様がW3C勧告として公開されました。 W3C勧告として公開されることは、その仕様はブラウザーなどに既に実装されていることを意味しています。Webアクセシビリティの観点からは、HTMLのセマンティクスがユーザーに伝わるかどうか、という点も重要です。この点に関しては、2014年を通して多くのブラウザーが改善に取り組みました。特に、これまで対応が弱かったGoogle Chromeでの取り組みが目立ちました。HTML5 Accessibilityのスコアを見ると、Goolge Chrome（Windows版）は、2014年3月には47でしたが、2014年11月には83.
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
HTML の q タグが日本語のサイトではカギ括弧を出すようになってた
HTML に q という要素がありますね。 Quotation の Q ですか。 <q> について 文書内で引用をしたいとき、 ブロック要素を含むような場合には <blockquote> ですが 一言とか一行とかそれくらいのときには <q> を使うのがいいみたいです。 q 自体がデフォルトでインライン要素だしね。 こんなぐあい。 <q>ここは引用ですよー。</q> 多くのブラウザでは、この <q> で括った部分が ダブルクォーテーションで挟まれて表示されます。 上記の例だとこう。 “ここは引用ですよー。” カギ括弧になってた 「表示されます」って書いたんだけど、 本当は「と思ってました」でした。 こないだふと気づいたら、 日本語のページではこれがこうなってました。 「ここは引用ですよー。」 クォーテーションマークじゃなくてカギ括弧になってる。 知らんかった。いつの間に。 <q> を初めて使
hifive - HTML5企業Webシステムのための開発プラットフォーム
ダウンロード Download ダウンロード カスタムダウンロード ツール/ライブラリ ギャラリー Gallery ギャラリー ガイド Guide チュートリアル Webアプリ入門 基本編 データモデル編 データバインド編 リソースFW編 リファレンス APIドキュメント レシピ Recipe レシピ 資料室 Reference HTML5資料室 HTML5用語辞典 開発者向け Developers Developer Channel ユーザーグループ 開発リポジトリ リリースノート コードホスティング 開発者ブログ hifive開発情報 ヘルプ Help 本サイトについて FAQ 本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意す
Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ
はじまり物語はその昔、WURFL（Wireless Universal Resource File、モバイル端末を検出するためのデータベース） が幅を利かせており、またモバイル専用 Web サイトが流行りだったときから始まります。この時代、開発者は「本物」の Web サイトのシンプルで低レベルななバージョンを作り、UA 判別をしてモバイルユーザーに提供していました。 みなさんも知っているように、ビューポートの大きさを始め異なる特徴を持つデバイスの急激な増加によって、より良いモバイルユーザー（もしくは非モバイルユーザー）の判別が急務とされました。レスポンシブ Web デザイン（「Responsive Web Design」「レスポンシブデザイン」とも）は、新しいブラウザに搭載された機能と CSS のテクニックを組み合わせデバイスに応じた表示を提供し、どのような環境でも理想的な見た目にするとい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パーティクル編集ツール Particle Develop - ICS
HTML5KARUTA - 「HTML5カルタ」で覚える！HTML5の108つのタグ
HTML Standard 日本語訳