pattern属性 ≪ input要素 ≪ フォーム ≪ 要素 ≪ HTML5入門
input要素のpattern属性は、正規表現を使った入力規制を指定する属性。HTML5にて新たに導入された属性である。 構文 <input pattern="正規表現を使った入力規制"> 入力規制に従った入力値でないと、送信できない。 title属性 pattern属性と共に使うtitle属性は、特別な意味を持つ。 <input pattern="正規表現を使った入力規制" title="エラー表記"> 入力規制に反し送信できないと、ツールチップなどにメッセージが現れる。そのメッセージに追加する内容を、title属性に指定できる。例えば、半角英数字で入力しなければならない場合、「半角英数字で入力して下さい。」というメッセージを、title属性に指定すると良いだろう。 pattern属性に対応しているinput要素のタイプ（type属性値） サンプルコード 半角英数字 <input pat
Web Components で 社内 UI ライブラリを作っている 話
WebComponents.kyoto Meetup #2 での発表資料です。 https://wc-kyoto.connpass.com/event/78690/
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
Shadow DOM v1: self-contained web components | Web Fundamentals - Google Developers
Shadow DOM v1 - 自己完結型のウェブ コンポーネント コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 まとめ Shadow DOM は、ウェブアプリ構築の脆弱さを解消します。脆弱な原因は、HTML、CSS、JS がグローバルであるという性質にあります。Google は長年にわたり、この問題を回避するために膨大な数のtoolsを考案してきました。たとえば、新しい HTML の ID またはクラスを使用すると、ページで使用されている既存の名前と競合するかどうかわかりません。微妙なバグが発生して、CSS の特異性が大きな問題になり（すべて !important）、スタイル セレクタが制御不能になり、パフォーマンスが低下する可能性があります。他にもたくさんあります。 Shadow DOM は、CSS と DOM を修正します。ウェブ プラットフォーム
Web Components を本番投入する（2018年春）
2018.02.16Web Components を本番投入する（2018年春）とあるプロジェクトの技術監修をして、大まかに Web Components + Payment Request API な構成で進めてみたのでその話を思い出しながら書く。ちなみに FRESH! ではないです。 決済基盤をサービスで使うための SDKPayment Request API でお察しの通り、新たな決済基盤のプロジェクトで、それを使うための SDK を読み込んでボタンを配置すれば決済できる…みたいなものを作った。Payment Request API は、対応している環境ではそれで、対応していない環境では旧来の通り決済代行業者が用意しているフォーム付きページへ遷移させるという形でビジネスサイドへ提案した。 技術面に関しても、FRESH! で導入済みだったこともあり、いざとなればサポートできるという意味
HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ
HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。 HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。 すべての変更点はHTML 5.2: Changesで確認することができます。 Web制作に最も影響を与えると思われるいくつかの変更点について説明します。 What's New in HTML 5.2? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能 HTML 5.2
暗黙的な ARIAセマンティックがある要素では role 属性を外すことが今後推奨されるようだけど、まだ外すのは時期尚早 – mzmjp.net::blog
暗黙的な ARIAセマンティックがある要素では role 属性を外すことが今後推奨されるようだけど、まだ外すのは時期尚早 概要 ARIA in HTML で main のように暗黙的な ARIAセマンティックがある要素では、同じ意味を持つ role 属性が非推奨になったので、ゆくゆくは外していく流れ。だけど、今現在は古いブラウザの対応などがあるので、まだまだ role 属性は外せなさそう。 <main role=”main”> という記述が非推奨に ミツエーリンクスさんのアクセシビリティBlog で、ARIA in HTML（日本語訳）というものの草案が4月14日に発表されたことを知りました。HTML5.1 において、WAI-ARIA をどのように使っていけばいいかが書かれている文書のようです。で、記事を読み進めていく中で気になった点が一つあったのでメモ。 しかし、ARIA in HTML
Resource Hintsとlinkタグによる事前読み込みでWebサイトを高速化！
今までサイトの読み込み速度を速くする手法の一つに、遅延ロードや非同期読み込みが一般的でした。LazyLoadなどの遅延ロードを行ったり、Ajaxで非同期にscriptを読みこんだり。これらはjsをゴリゴリ書いたりすることで実現することができましたが、Resource Hintsに記載されているlinkタグのrel属性を使うことで、事前にコンテンツを読みこませることができます。今回はResource Hintsの仕様とlinkタグでの使い方をご紹介していきます。 Resource HintsとはResource Hintsに記載されている内容としては、主にリソースの事前読み込みについて書かれています。この仕様を使ってリソースの取得をタイミングを制御し、ユーザへ素早くコンテンツを配信させることができます。 This specification defines the dns-prefetch,
Vector Halftone Maker - Interactive PNG/SVG halftone pattern generator
Illustration by © Sevnzel. Attention: Diversion of source images are prohibited. About Created by Xoihazard (微博/Weibo) Build: Wed Jun 01 2022 04:04:23 GMT+0000 (Coordinated Universal Time) This program performs image processing on the browser. No image files are uploaded to the remote server. Enjoy! 这个程序在浏览器上进行图像处理。不会将任何图像文件上传到远程服务器。请享用！ このプログラムはブラウザ上で画像処理を行います。画像ファイルをリモートサーバーにアップロードすることはありません。お楽し
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
HTMLチェッカーはchecker.html5.orgを推してみたい - 水底の血
次の3つのチェッカーについて、 Validator.nu Living Validator https://validator.nu/ Nu Html Checker https://validator.w3.org/nu/ Nu Html Checker https://checker.html5.org/ 次のHTMLコードを投入して比較してみたよという話。 <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <!-- dlの中のdivは現時点のHTML 5.2に規定されない --> <dl> <div> <dt> Last modified time </dt> <dd> 2004-12-23T23:33Z </dd> </div> <div> <dt> Recommended update interva
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
History API — Warpspire Experiments
Infinite Scroll + HTML5 History API Note: This is broken right now, as I need to update it to use the new Twitter APIs. Yay security! This example shows the power of the History API when combined with infinite scroll. Fluid user experience and hard linking all in one. Scroll down, click a link & press the back button, refresh the page — it all just works (well, mostly — still needs some polish).
DOCTYPE宣言、IE対応、デザインカンプの解像度などのアンケート結果
Web制作で以前から気になっていたことについて、Twitter のアンケート機能でアンケートを取ってみました。 アンケートの実施期間は2016年1月〜2月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100件以上で、普通に考えれば私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 フォロワーの方の興味関心としては、モバイル、テクノロジー、Webデザイン、コンピュータープログラミングなどとなっています。 性別（推定）は 73% が男性、27% が女性となっています。 DOCTYPE宣言
em・strong・mark・b要素の違いを本気出して調べてみた
使いどころが難しい「em要素」「strong要素」「mark要素」「b要素」。 どれも強調したいときに使う、程度にしか感じていない人も多いかと思います。 HTML5でのそれぞれの要素の違いは、どのような仕様なのでしょうか。 そのぞれの要素の違いのまとめ 長くなるので結論から述べます。簡単にまとめると以下です。 strong要素 重要性、深刻性、緊急性など、まっさきに見てほしいテキスト em要素 強調させることによって文章の意味を変えたいとき mark要素 引用文や別の文脈の文章などから目立たせたい箇所 b要素 上記以外で目立たせたいとき HTML 4.01 の場合のおさらい まずは、おさらいです。 em要素 Indicates emphasis. HTML 4.01 では「強調（重点）を示す」でした。 strong要素 Indicates stronger emphasis. HTML 4
10 Best jQuery and HTML5 WYSIWYG Plugins — SitePoint
HTML5 WYSIWYG (What You See Is What You Get) editors are always high in demand. But there are now so many of them around that it’s hard to find the best ones. In this post, I’m going to present some of the best jQuery and HTML5 WYSIWYG plugins, saving you time finding the plugin that fits your needs. Froala Froala WYSIWYG HTML Editor is easy to integrate and to use. It requires minimal coding know
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
asamuzaK.jp : 使えば爽快！ SVG Sprite
改訂版を出しましたので、そちらをご参照ください。 Safari8でSVG Fragment Identifiers（以下、svg#fragment）に対応してきた。 Firefox、Chrome、IEはすでに対応済みなので、これで主要ブラウザの足並みが揃った。 注：ところが、Safariの実装にはバグがあった…orz。 WebKit Bugzilla上では既に修正済みとなっているが、Safari9.xまでは依然としてバグが残っている。 これまで、PNGなどの画像を利用したCSSスプライトやアイコンフォントを使う気になれなかったが、svg#fragmentを使ったSVGスプライトならいけるな、と思い、折を見てテストを繰り返し、ようやくその方法が固まった。 そもそもCSSスプライトやアイコンフォントに対する個人的な不満は CSSスプライト 切り出す画像の領域を逐一CSSで指定しなければならない
Best HTML5 Websites | Web Design Inspiration
Best selection of HTML5 Website examples for your inspiration... Read more HTML5 is a language for structuring and presenting content for the World Wide Web, a framework designed to support innovation and foster the full potential the web has to offer. The HTML5 identity system provides the visual vocabulary to clearly classify and communicate our collective efforts. HTML5 adds many new syntactic
wordpressで、rel="category tag"が、html5でvalidじゃないと怒られる件とその対処 | xxxx7
wordpressで、rel="category tag"が、html5でvalidじゃないと怒られる件とその対処 怒られちゃいました W3C が提供している、構文チェックサービス「Markup Validation Service」を使ってこのサイトをhtml5でチェックしてみたら、次のようなエラーがたくさん出てきました。 Bad value category tag for attribute rel on element a: The string category is not a registered keyword or absolute URL. Whitespace in path component. Use %20 in place of spaces. rel属性がとれるキーワードに、「category」なんてものはないですよ、と怒ってるみたい。 怒られた原因をもう少
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
