Web Components とは何か 簡単に言ってしまえば、オリジナルタグを作れるHTMLの仕様です。 このあたりの記事が詳しいです。 https://html5experts.jp/shumpei-shiraishi/24239/ 良い感じに小さくまとまっている実装が無かったので自作してみました。 Hello, Worldタグを作る こんな感じになります。 https://iwtn.github.io/hello_world_tag/ 後述しますが、ブラウザのサポート状況は微妙でChromeでしか表示できないと思います。 ソースコードはこちら https://github.com/iwtn/hello_world_tag Developer Tools で見ると、オリジナルのタグで出来ていることがわかりやすいと思います。 3つの基本要素（本当は4つ）と基本的な作り方 template
Why should websites include meta tags? Like it or not, your website will be searched for, bookmarked and shared online. No matter how good your content is, what matters is the first impression. Meta tags make sure your website shines right away. Show an image preview when shared online Take control over what search engines show/display Improve your SEO rating Four steps to awesome tags Easily chec
インターネットが登場して 20 年以上が経過し、時代はデスクトップからモバイルへと移り変わりました。モバイルでは、単に小さな画面に対応しているだけでなく、よりスピード感のある体験が求められています。それは E コマースビジネスも例外ではありません。 モバイルでの決済において、66% がネイティブアプリではなくウェブ上で行われているというデータがあります。検索結果からアプリをインストールしてまで商品を購入するのは手間がかかりすぎるため、そのままウェブ上で決済しようとする人が多いことが原因と考えられます。 ただ逆にモバイルウェブサイトは、デスクトップのウェブサイトと比較として、コンバージョンレートが 66% 低いというデータも存在します。これは逆に言えば、モバイルウェブでのコンバージョンレートにはまだ伸びしろがある、ということも意味しています。 そこで今回は、フォームを改善することでモバイルウ
HTML5 Accessibility Get the current accessibility support status of HTML5 features across major browsers. Editor’s draft, August 2020 Chrome 84 on Windows 10 98.5% Edge 80 on Windows 10 100% Firefox 80 on Windows 10 94% Internet Explorer 11 on Windows 10 56% Safari 13 on Mac OS 97% This site tests which newish HTML5 features are accessibly supported by major browsers. This includes if they are key
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
zenback の読み込みコードが非同期化され、かつ 平均20%+の速度アップが図られた そうで、ユーザーとしては嬉しい限りです。 zenback に限らずソーシャルメディアの導入は、必然的に外部サービスを多用することになります。どのサービスも、スクリプトや画像、トラッキング用コードなどのリソースを、その特性に合わせて 2〜4 程度のホスト／ドメインに分散させているのが普通です。 こういった分散化は並列に読み込みめるリソース数を増やし、クッキーのあり／なしを区別できるので高速化に寄与します。が、利用するサービス数が多くなると、いわゆる「DNS ルックアップ」にかかる時間が無視できなくなり、さすがにデメリットの方が目立ってきます。 例えば本サイトの場合、最終的に25以上の異なるホスト／ドメインから 有象無象 のリソースを読み込んでいるのですが、「DNS ルックアップ」の合計だけで1秒を超える
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Overview: 発展モジュール 次のページ このモジュールは、ウェブフォームの基本をマスターするのに役立つ一連の記事を提供しています。ウェブフォームはユーザーと対話するためのとても強力なツールです。最も一般的には、ユーザーからデータを収集したり、ユーザーがユーザーインターフェイスを操作できるようにするために使用されます。しかし、歴史的・技術的な理由から、フォームを最大限に使用する方法は必ずしも明らかではありません。以下の一覧の記事では、 HTML 構造のマークアップ、フォーム操作のスタイル、フォームデータの検証、サーバーへのデータ送信など、ウェブフォームの本質的な部分をすべて取り上げます。 このモジュールを始める前に、少なくとも HTML 入門を一通り読んでおくべきです。ここでは簡単に理解できる導入ガイドがあり、ネイティブフォームコントロールガイドも利用できます。 しかしそれ以外のモジ
ITpro読者のみなさん、はじめまして。新日鉄住金ソリューションズの横山です。本特集は、次世代Web標準である「HTML5」を使って業務システムを構築するために必要な情報や役立つ情報を解説します。HTML5を採用することで、業務システムがどのように見やすく、使いやすいものになるかを紹介すると共に、開発を効率的に進めるための道具や留意点などについてもみていきます。 身のまわりで着実に普及が進むHTML5 最近、ニュースや雑誌で見聞きする機会が増えてきた「HTML5」という言葉ですが、実際に身のまわりでどれくらい利用されているのかよく分からないという人は多いのではないでしょうか。わざわざ「これはHTML5で作ったコンテンツです」と明記しているケースは少ないからです。 HTML5が使われていることが明らかに分かる例としては、スマートフォンでアクセスした際に「ユーザーが今いる場所の最寄りの店舗を紹
inputやtextareaの入力補助 <input>の入力補助には<datalist>を使ったものがある。補助候補を<datalist>と<option>を使って定義し、そのIDを適用先の<input>のlist属性に付与する。以下サンプル。 See the Pen Input suggestion using datalist by 1000ch (@1000ch) on CodePen. Chromeだと領域の右端に▼が表示されているし、候補のドロップダウンやその▼はまさにブラウザネイティブのUIといった感じだが、どうもスタイリングが出来ない。古いという意味で信頼性に欠けるがRelevant Dropdowns: Polyfill for Datalistにも不可能っぽいことが書いてある。Shadow DOMだろうからインスペクタ使ってセレクタを調べようとしたけど、フォーカスアウトす
4月14日、W3CはARIA in HTMLの最初の草案を公開しました。この仕様はHTMLでWAI-ARIAを使った場合に、制作者と適合性チェッカー（Conformance Checker）が守らなくてはならない要件をまとめています。 HTMLでWAI-ARIAを利用する際の要件は、HTML5では仕様そのものに記述されています（3.2.7、日本語訳）。しかし、2015年4月13日付とされているHTML 5.1の草案では、該当部分（3.2.7）はARIA in HTMLとHTML Accessibility API Mappingsを参照するように変更されています。HTML Accessibility API Mappingsはブラウザーなどの要件を定めた仕様ですので、制作者は今後、ARIA in HTMLを参照してゆくことになるでしょう。 現時点ではHTML5とARIA in HTMLに大
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
