HTML5なら外部ライブラリを利用しないでリアルタイム入力チェック出来る - Qiita
リアルタイム入力チェックは今のWEBページでは割りと標準化されつつあるけど、 ライブラリを選定したり、画面の表示を考えたりと何かと面倒。 HTML5の機能で追加されたバリデーション機能を利用すればそういった煩わしさから開放されるのでは？ と思いたち、外部ライブラリを一切使わずにリアルタイム入力チェックを実装してみた。 コード <section> <form id="sampleForm"> <label> 半角英数字以外を入力してみよう <input type="text" id="input" placeholder="半角英数字で入力" pattern="^[0-9A-Za-z]+$" required> </label> <button type="submit" id="submit">送信</button> </form> </section> <script> "use str
HTMLInputElement.checkValidity() - input要素の入力内容の検証を実行する
仕様書https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement 説明checkValidity()は、input要素の入力内容の検証を実行します。検証エラーがある場合にだけ、invalidイベントが発生します。 HTML <form action="./form.php"> <input id="hoge" name="fuga" required> <button>内容を送信</button> </form> JavaScript // 要素の取得 var element = document.getElementById( "hoge" ) ; // イベントの設定 element.addEventListener( "invalid", function ( event ) { console.log( "検
HTML［tabindex属性］Tabキーによるフォーカスの移動順序を制御する - TAG index
tabindex属性は、Tabキーによるフォーカスの移動順序、および要素がフォーカス可能かどうかを指定します。 <a href="index.html" tabindex="1">リンクテキスト</a>
hgroup 要素が HTML5 勧告候補から削除される
今さら感がハンパないのと、ちょっと前の話になってしまいますが、hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです。 WG Decision on request to drop hgroup from HTML5 ： W3C Mailing lists plan on removing hgroup from spec ： W3C Mailing lists as per the chairs decision I plan to remove hgroup from the HTML5 spec. It will be made non conforming, but the implemented parsing rules and user agent CSS rules will remain (as is u
SEO対策に役立つかもしれない、普段あまり注目されていないタグたちまとめ(HTML 5.1版) - Qiita
SEOの内部対策をするにはキチンとしたHTMLタグを使うことから！！！ ということでSEOには役立ちそうだけど、普段のHTMLコーディングではあまり意識しないHTMLのタグをまとめてみました。 正直それぞれのタグでどのくらいの効果があるのかはわからないですが、この手のコーディングは最初にやらないと、後から直すっていうことはないので、できれば最初にちゃんとやっておきたいですね。 主に以下のサイトを参考にしてます。 HTMLクイックリファレンス HTML 5.1 W3C Proposed Recommendation, 15 September 2016 base 相対パスリンクを指定したときのルートとなるパスをデフォルトで指定することができます。 headタグ内にいれます。 <html> <head> <base href="http://qiita.com" target="_blank"
IE11におけるmain要素の扱い - Qiita
html5jのMLで「IE11でmain要素にwidth,heightが効かないです」という話題で盛り上がっていたので、纏めてみた。 IE11でmain要素を使うとどうなる？ まずはコードを書いて試してみましょう サンプル ※IE11で開いてください 表示を確認してみましょう IE11だと、Resultに何も表示されません。 どうして何も表示されないのか？ IE11がmain要素に対応していないから。 IE11でmain要素を含んだHTMLをレンダリングすると、main要素でマークアップされた部分はブロックレベル要素として扱われず、widthとheightの指定が無視される。 対応策は？ 対応策としては以下の方法が考えられる。 main要素に「display: block」を付与する。 外部ライブラリを使う。 1. display:blockを付与する サンプル 上のサンプルコードにCSS
2015年 コーディングはHTML5で。IE8以下の対策も忘れずに
前回、「次回はHTMLの要素についてお話しさせていただきます」と申し上げましたが、急遽予定を変更してお送りします。 「2015年の今、HTMLはどのバージョンで書くべきか」という問題です。 去年（2014年）の10月29日にW3C（ウェブで利用される技術の標準化をすすめる国際的な非営利団体)から正式にHTML5が勧告されたので、もう答えは出てるようなものですが、これからHTMLを書こうという方の中には、 「結局どうすればいいの？」 と思われている方がいるかもしれませんので改めて取り上げようと思いました。 （HTMLを勉強中で基本をご存知ない方は、結論だけ読んで他は飛ばしてくださって結構です） いきなり結論：やっぱりHTML5 僕の意見はこうです。 これから作るサイトに関してはHTML5で記述すべきだと思います。 その理由は3つです。 1. HTML5以外でコーディングされた既存サイトは将来
HTML5 の DOCTYPE 宣言って IE6 でも標準モードになるんですね - IT戦記
HTML5 の DOCTYPE 宣言 <!DOCTYPE html> ですが、今までなんとなく「どーせ IE6 では互換モードなんでしょー」って感じで生きてきたんです。 ごめんなさいごめんなさい＞＜ サンプルコード 確認してみてください <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 の DOCTYPE 宣言とレンダリングモードのテスト</title> </head> <body> <h1>HTML5 の DOCTYPE 宣言とレンダリングモードのテスト</h1> <dl> <dt>CSS1Compat</dt> <dd>標準モード</dd> <dt>BackCompat</dt> <dd>互換モード</dd> <dl> <script type="text/javascript">alert(docume
HTML 5 / A vocabulary and associated APIs for HTML and XHTML / W3C Working Draft 22 January 2008
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
HTML5
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
CSS の white-space: nowrap; + HTML の wbr 要素 + 日本語コンテンツの組み合わせで起きる問題を回避する
CSS の white-space: nowrap; + HTML の wbr 要素 + 日本語コンテンツの組み合わせで起きる問題を回避する 2013年09月03日 16:48HTML / CSS CSS の white-space: nowrap; と HTML の <wbr> 要素の組み合わせによる挙動が Firefox と Google Chrome で違ってて、 特に日本語コンテンツの表示を統一しようとすると何かとややこしいので その回避方法を書いてみます。 その前にちょっと前提のお話を。 white-space: nowrap; のおさらい CSS を書く人には説明の必要もないと思うんだけど、 white-space というのは HTML の要素内で ホワイトスペース（スペース文字や改行コードなど）がどのように扱われるかを指示するための CSS のプロパティですね。 W3C によ
HTML5 の Web Audio API で音楽してみる | CYOKODOG
HTML5 の Web Audio API の存在をご存知でしょうか？ 購読してる専門誌でも紹介されてるのを見かけた記憶がなかったのでよく知らなかったのですが、検索してみると興味深い記事が結構目につきます。 CANVAS や WebGL など見た目系機能が注目されがちな HTML5 ですが、音声方面も面白いかなという事で、今回調べたことをまとめがてら紹介してみたいと思います。 モジュラールーティング Web Audio API を扱う上で「モジュラールーティング」という思想の理解が大事になります。 簡単に言うと「音の発生源」「音の加工」「音の出力」をモジュール単位で管理し、それらをお好みのパターンで接続しあい音を出力させることができます。 楽器で例えると、エレキギター → エフェクター → アンプの接続のような関係です。例えばエフェクターを使いたくなければ直接アンプに繋いでも良いですし、エ
『time要素』 / HTML5新要素一覧 | HTML5でサイトをつくろう
time要素の削除 ※【重要】 time要素はHTML5の要素から削除されました。記事はこのまま残す予定ですが、実際のコーディング時に使用しないように注意してください。 ※【重要】 time要素はHTML5の要素から１度削除されましたが、再定義され要素が復帰しました。そこで、近日中にtime要素を新たな仕様に対応した形で書き直しさせていただきます。（2011年11月現在） グレゴリオ暦における日付や24時間表記の時刻を正確に表す為に使用します。 time要素の特徴 time要素は、正確な日時をブラウザーやロボットなどが読み取れるようにすることを想定して用意されています。また、time要素は属性値の末尾にタイムゾーン・オフセット(世界時からの時差)を追加することも可能です。 尚、time要素を使用する場合に注意点がいくつか存在します。 タイムゾーン・オフセットは日付と時刻両方の指定がされた場
もうこれで迷わないHTML5新要素の使い方 (1/3)
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5では、セクションに関連する要素以外にも、新しい要素が追加されたり、意味が変更されたりしています。今回から数回にわたって、HTML5で新たに登場する要素や、変更された要素について解説します。第6回は、一般的なWeb制作で使用頻度の高い要素と、ルビ関連の要素を取り上げます。 各要素の解説では、冒頭に「カテゴリー」
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
PHPでpjaxる - 私の昆布
前置きがすごい長い記事です。時間無い人は、読まないか後ろから読んでください。 昨日も書いたんですけど、ふることきっ！でpjaxというのを利用しています。 で、その際「PHPでpjaxるにはどうしたらいいかなー」と思いググったら、出なかった。…いや、もしかすると「簡単すぎてまとめるまでもねぇよ！」ってことかも知れないけど、まとめておく。後で学校でも使う予定なので。 pjax? まず、ajaxがあります。知らなかったらググってください。同一ドメインなら非同期に通信してくれるアレです。 そして、「pushState」というものがあります。 HTML5で、「5.4 Session history and navigation」というAPIが追加され、その中に「The History interface - pushState」というものがあるんですが、それです。 この「pushState」は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The W3C Markup Validation Service
html5shiv - Project Hosting on Google Code
Loading...