カスタム要素の使用 - Web API | MDN
ウェブコンポーネント標準の主な特徴の 1 つは、 HTML ページに機能をカプセル化するカスタム要素を作成できることで、カスタムページの機能を提供する要素の長いネストしたバッチを作成する必要がありません。この記事では、カスタム要素 API の使い方を紹介します。 ウェブ文書上でカスタム要素を制御するのは CustomElementRegistry オブジェクトです。このオブジェクトで、ページへカスタム要素を登録したり、どのようなカスタム要素が登録されているのかを返したりすることができます。 ページにカスタム要素を登録するには、 CustomElementRegistry.define() メソッドを使います。引数に次のものを取ります。 要素に与える名前を表す文字列。カスタム要素の名前は、ダッシュが使われている名前 (kebab-case) である必要があります。単一の単語にすることはできま
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
話題の Portals を使った画面遷移 UX の未来 | ウェブボウズ
ご無沙汰しております。ウェブボウズを立ち上げて 1 年が経ちました。皆さま如何お過ごしでしょうか。私は、この 1 年間ひとつもブログポストできていません。さらには私の坊主頭（スキンヘッド）にちなんでウェブボウズという名前をつけた個人ブログでありましたが、5 年間共にしたこの Hair-less style から心機一転して 2019 年は髪を育んでいく方針を固めましたので、もはやボウズでもなくなってます。変わり続けることだけが普遍であると胸に刻んで今年も強く生きていきたいと考えております。 さて、最近 Signed HTTP Exchanges やら Performance Budget やらさまざまな面白いことに関わらせていただいて忙殺と幸せを噛み締めている中でも、Chrome Dev Summit 2019 でも大きくフィーチャーされました Portals という新しい HTML 要素
Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
HTML 要素リファレンス - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
Marked.js で Markdown をクライアント側でパースして表示する - Qiita
で、HTML に整形された文字列が返されるというシンプルなもの。(整形オプションがいろいろあるようだが割愛) Typescript クイックガイドでは、HTML 内に Markdown テキストがベタ書きされていたが、せっかくなので管理がしやすいように外部 Markdown ファイルを読みこむようにしてみた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Markdown renderer</title> <meta name="description" content="Markdown renderer"> <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="styles
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
onclick と addeventlistener の実行順 : (*x).b=z->a+y/c
◆ プロパティつけたタイミングで addEventListener 設定したのと同じ ◆ Chrome はプロパティ変更時に remove して add したように再設定される ◆ Firefox/IE は順番はそのままで null を設定したときに remove になる 優先度をつけたりあとから並び替えたりはできません 全部 remove してソートして add すれば可能です addEventListener 以外にも onclick のような onXXX 系プロパティに値をセットすることでもリスナを設定できます onXXX と addEventListener が組み合わさるとどんな順番になるの？っと疑問に思ったので試してみました ↓は Chrome で実行してます const elem = document.body const log = x => _ =>console.log
template要素についてのお勉強 - Qiita
はじめに HTML5の新たな要素としてtemplate要素 <template> がありますが、これを使うと何が便利になり何が嬉しいのか。 自分が後で見返すためのメモとして書き記しておきます。 template要素って何さ template要素はブラウザ上では表示されず、主にJavaScriptによる操作がメインになる要素です。 名前からもわかるようにテンプレートとして使うコンテンツを中に書いてJavaScriptであれこれできるやつです。 <template id="template"> <p>これはテンプレートだよ</p> <p><img src="./this_is_template.jpg" alt="これはテンプレートだよ"></p> <div id="templateContent"></div> </template> template要素内のコンテンツは、JavaScrip
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
制約検証 - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
HTML 5.2: 4.13. Common idioms without dedicated elements
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タグリファレンス - HTML5.JP
W3C HTML5 仕様の2014 年 10 月 28 日版の勧告 の「3.2.4 コンテントモデル (Content models)」を和訳したものです。 正確性を求める場合は、原文を参照してください。また、もし本サイトのリファレンスが、最新の仕様と異なる部分がありましたら、ご指摘頂けると幸いです。 3.2.4 コンテントモデル 本仕様で定義されている要素はそれぞれ、コンテントモデルを持ちます。それは、要素の期待されるコンテンツを説明するものです。HTML 要素は、その要素のコンテントモデルで説明されている要件に一致するコンテンツを持たなければいけません。要素のコンテンツとは、DOM における子のことです。ただし、template 要素は除きます。この要素の子は、テンプレートコンテンツの中の子となります（この要素が生成されたときに割り当てられた独立 DocumentFragment）。
dev.toにおけるServiceWorker活用術 - Qiita
重い腰を上げてServiceWorkerに触れました（Service Worker の紹介）。 こんなにも簡単にブラウザキャッシュできるのか！と感動し、「速い速いと言われるdev.toでも使っているんでしょう？」と見てみたら更なる感動があったので内容を書き残します。 何をやっていた？ 結論から dev.toにアクセスした時点で、記事ページのhtmlがキャッシュされる（上から6枚くらい） オフライン用のhtmlがキャッシュされていて、リクエストが失敗する（= キャッシュされていない）画面ではこれが返される スクロールする毎に記事ページのhtmlを取りに行き、次々にキャッシュする なので、dev.toにアクセスした後にオフラインになったとしても ファーストビューに出ている記事くらいは見ることが可能で それ以降の記事を踏まれたとしても「ネット回線切れているよー」というhtmlが表示されるため、殺
Object Oriented CSS · stubbornella/oocss Wiki
Object Oriented CSS Slides: https://www.slideshare.net/stubbornella/object-oriented-css How do you scale CSS for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites. Nicole Sullivan first presented it at We
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Float on
CSS・HTMLで作るweb用ボタンデザイン110選
#noscript
Home
