Popover API - JavaScript不要、HTMLのみでポップオーバーUI
HTML Standardにpopover属性をはじめとしたPopover APIが正式にマージされました。Open UIによって提案されていた[1]APIで、名前がPopoverなのかPopupなのか紆余曲折の末、やっとHTML Standardとなります。 現段階で実装されているブラウザは少ないですが、簡易サンプルを作ったので体験しながら読んでいただくといいかもしれません。
HTML Standardにpopover属性をはじめとしたPopover APIが正式にマージされました。Open UIによって提案されていた[1]APIで、名前がPopoverなのかPopupなのか紆余曲折の末、やっとHTML Standardとなります。 現段階で実装されているブラウザは少ないですが、簡易サンプルを作ったので体験しながら読んでいただくといいかもしれません。
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
[【大阪】Kansai WordPress Meetup@大阪『ブロックエディターについてもっと知ろう！』](https://www.meetup.com/ja-JP/kansai-wordpress-meetup/events/295907589/) 登壇資料です。
最近のCSSを改めてちゃんと学んでみた
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
ページをブックマークしてHTML・スクショ画像・PDFなどで自動保存して検索・ハイライトなどの注釈・複数人での共有・スマホアプリからの利用・RSSの自動保存・AIによる自動タグ付けができる「Linkwarden」、無料でセルフホストも可能
気になる記事やブログ、技術解説サイトなどブックマークに保存したサイトを後で見ようとした際に、ページが削除されているケースがあります。「Linkwarden」を使うと、ブックマークと同時にページをPDF化し、スクリーンショットを保存した上、複数人との共有や複数デバイスでの利用が可能となり、多機能なブックマーク管理サービスが利用できます。以前から3年近くが経過してまったく違う次元までレベルアップしたので改めて使ってみました。 Linkwarden - Bookmarks, Evolved https://linkwarden.app/ linkwarden/linkwarden: Self-hosted collaborative bookmark manager to collect, read, annotate, and fully preserve what matters, all
Builder.ioは、強力なビジュアルエディタにより、開発者ではない人が超高速なサイトを開発・編集できるようにしています。 私たちのビジュアルエディタが優れている点の1つは、AngularからWeb Components、 そしてその間にあるすべてのフレームワークに至るまで、 さまざまなツールで同じサイトを生成できることです。 出力されるコードは速度が最適化されています。 私たちのツールで作成されたサイトは、手作業で作成されたサイトの大部分よりも高速です。 私たちはこれを心から誇りに思っています。 私たちの製品は、スピードがとても重要であるeコマースに焦点を当てています。 優れたTime to Interactiveの実現は困難 どんなにコードが最適化されていても、静的HTMLのみを提供していない限り、 eコマースサイトがPageSpeed Insightsで100点中100点のスコアを
<select> 要素の中をグループ化する方法としては、従来から <optgroup> 要素が存在しますが、これは label 属性による可視ラベルの設定が必須なため、ラベルなしの単なる区切りを示すことはできません。 <!-- `optgroup` 要素によるプルダウンのグループ化マークアップ例 --> <label for="prefectures">都道府県</label> <select name="prefectures" id="prefectures"> <option>北海道</option> <optgroup label="東北地方"> <option>青森県</option> <option>岩手県</option> <option>...</option> </optgroup> <optgroup label="関東地方"> <option>茨城県</option>
2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。 ▼HTML・CSSだけで実装したカルーセル カルーセルUIといえば、いちから自前で用意するのではなくSwiper.jsなどのJSライブラリを採用してきたコーダーも多いのではないでしょうか？ ICS MEDIAでもカルーセルUIを作成できるJSライブラリをまとめた記事があります。 『カルーセルUIを実現するJSライブラリまとめ - 導入手間や機能の比較紹介』 本記事では、新しいCSSでどのようなカルーセルが実現可能になるのか紹介します。 ご注意：本記事のデモは、Chrome 135・Edge 135以上で閲覧ください。
バーチャルスクロールの限界を突破する
はじめに 私は今、CSVエディタ SmoothCSV 3 を開発しています。フレームワークとして Tauri を採用しており、レンダラーにはWebの技術（React + TypeScript）を使っています。 CSVエディタは大量の行・セルを表示する必要がありますが、Webの技術ではこのようなシーンではバーチャルスクロールを使うのが定石です。 SmoothCSVでもバーチャルスクロールを使っていましたが、どうやらこのバーチャルスクロールにも限界があるらしく、数百万行のような極端に大量のデータを表示する場合に最後まで表示しきれない問題に遭いました。 ここではバーチャルスクロールの基本と、その限界をどう乗り越えたかを紹介します。 About Me 株式会社ヘンリーでソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on
ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。 HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートしています。 Neat CSS Neat CSS -GitHub Neat CSSの特徴 Neat CSSの仕様 Neat CSSの使い方 Neat CSSの特徴 Neat CSSは、ミニマルなWebサイトを素早く構築するシンプルなCSSのフレームワークです。CSSは約2Kbの超軽量サイズ（未圧縮）、カスタマイズも簡単です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 Neat CSS Neat CSSの主な用途 ブログ ジャーナル テクニカルサイト ドキュメン
Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示
Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示 Visual Studio Code 1.100もしくはそれ以後のバージョンでは、標準でコード内のHTMLやCSSがWeb標準のBaselineに対応しているかどうかをチェックする機能が搭載されていることが、web.devブログで紹介されています。 これにより、HTMLやCSSが主要なWebブラウザで問題なく表示されるかどうかが、Visual Studio Codeで簡単にチェックできるようになりました。 Baselineは安心して使えるWeb標準 Baselineとは最新のWeb標準のサブセットです。Baselineに含まれているHTMLやCSSの機能であれば主要なWebブラウザで実装済みであるため、Webアプリケーション開発者が安心して使える機
CSSの新機能「@scopeアットルール」。このルールを使えば、CSSセレクターに適用されるスタイルのスコープ（範囲）をHTMLの特定の一部分に限定できます。さらに、その開始点（ルート）や終了点（リミット）も柔軟に設定できます。 この記事では、CSSのスコープを制御できる@scopeの基本的な使い方や注意点を解説します。 @scopeを使用すると、以下のようなメリットがあります。 クラス名を複雑にしなくてすむ スタイルの衝突を防ぎやすくなる 保守性が高まる .titleや.buttonなどのよく使うクラス名も、スコープごとにスタイルを分けられます。その結果、複雑なクラス名を増やさずにすみ、意図しないスタイルの上書きも防ぎやすくなります。また、スコープを設定することで影響範囲が明確になり、あとからスタイルを修正したり追加したりしやすくなります。 @scopeの使い方は大きく2通りに分けられま
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
PWAの今とこれから、iOSでの対応状況 / PWA now and in the future, status of support on iOS
ネイティブアプリと同様の機能をウェブアプリに追加できる技術、それがProgressive Web Apps (PWA)です。iOSでも近年、徐々にPWAの機能が追加されています。これらの流れは、ユーザービリティに重きを置く昨今の潮流に即しているように感じます。 この発表では、PWAの現状とその可能…
リスト項目のホバー演出は、その要素がクリック可能であることを伝えるだけでなく、操作の気持ちよさや、コンテンツの世界観を表現することにも役立ちます。今回の記事では、HTMLとCSSだけで実装可能なリスト項目のホバー演出のアイデアを紹介します。 ▼ 今回紹介する実装例一覧 サンプルを別ウインドウで開く 1. 横にアイコンが表示される サンプルを別ウインドウで開く コードを確認する ホバー時に、アイコンに指定しているCSSのscaleプロパティの値を0から1に変化させることで、拡大しながら現れるようにしています。初期状態でscale: 0に指定しておくことで、アイコンを非表示のように隠しておけます。 2. カーソルが変化する サンプルを別ウインドウで開く コードを確認する ホバー時に表示されるカーソルをオリジナル画像に変更しています。CSSを以下のように指定すると、カーソル位置やクリック範囲を細
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる（SPA向け） JSフレームワークでの対応も進んでいる JavaScriptなしでも利用可能である（MPA向
ax — the AI-era curl
The AI-era curl ax — fetch, discover, extract. One command.Local HTTP and HTML I/O for coding agents. One command instead of curl + throwaway Python — structured, token-cheap, capped by default, never silent.
マウスに猫が集まるだけのChrome拡張機能『ネッコサーフィン』に「阿部寛のホームページだけで猫が消える」という問い合わせが10件近く来ている
もにゃ.txt @Monya_sub 「阿部寛のホームページでだけネコが消える」という問い合わせが既に10件近く来ているのでこちらで回答させてください。 すみません、どうしてもあそこだけはホームページの実装が特殊すぎて技術的にネコが寄りつかないんです。修正予定もないです。 twitter.com/monyaizumi/sta… 2024-01-08 19:07:39 もにゃ @Monyaizumi 【作業を邪魔されたい方へ】 マウスの移動量に応じてネコが集まってくるだけのChrome拡張『ネッコサーフィン』をリリースしました。 monyaizumi.com/cat-surfing/ こんな感じで、窓の外からやってきたネコたちがじゃれついてきます。 便利な機能はなにもありません。 #ネッコサーフィン pic.twitter.com/MW0GwNydPq 2023-12-29 17:08:03
<form>の外側に送信ボタンを配置する
Web アプリなどの UI でよくあるのですが、フォームの外側に送信ボタンがあるようなデザインのときに HTML だけで解決する方法があるので紹介します。 form 属性で紐付け <input> 要素の form 属性に <form> 要素の id 属性値を指定することで、フォームと送信ボタンを関連づけられます。 <form id="signin"> <label> メールアドレス <input type="email"> </label> <label> パスワード <input type="password"> </label> </form> <input type="submit" form="signin" value="サインイン">
PDFをHTMLに変換 | 株式会社インターワーク
ご利用上の制限ウォーターマーク: 無料ツールで変換されたファイルにはウォーターマークが挿入されます1日5ファイルまで（1ファイル最大50MB）変換ファイルはサーバーに最大1時間保存された後、自動削除されますフィッシング防止のため、ハイパーリンクは無効化されますウォーターマークなし・無制限で変換するには BuildVu 製品版 をご検討ください。 使い方PDFファイルをドラッグ＆ドロップ、またはクリックして選択「変換する」ボタンをクリック変換完了後、HTML5ファイルをダウンロード PDFからHTML5への変換 BuildVuエンジンを使用して、PDFファイルを高品質なHTML5に変換します。元のPDFのレイアウト、フォント、画像をそのまま忠実に再現し、あらゆるデバイスでレスポンシブに表示できるHTML5を生成します。 特長 レイアウトの忠実な再現 — 元のPDFのページレイアウト、段組み、
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
htmxは、HTMLの属性を追加するだけで、インクリメンタル検索やインライン編集をはじめとするさまざまな動的なUI（User Interface）を実現できるJavaScriptライブラリです。SPA（Single Page Application）フレームワークのような大がかりなビルド環境を用意することなく、すでにあるサーバーサイドアプリケーションに段階的に導入できる点も大きな魅力です。 本記事では、htmxの基本的なしくみや使用方法を紹介したのち、架空のタスク管理アプリケーションを題材に、htmxで実現できるさまざまなインタラクションを紹介します。 htmxの概要 HTMLを拡張するアプローチ htmxの基本的なアイデアは、HTMLの属性を使ってサーバーとの通信およびDOM更新を宣言的に記述するというものです。 たとえば、ボタンがクリックされたらサーバーからデータを取得し、画面の一部を
こんにちは、 Legalscape (採用情報) で法情報をいい感じに収集・運用しているあざらし🦭です。 一次情報・二次情報に関わらず、形式や公開方法が多岐にわたる法情報を正確に分析あるいは表示するためには構造化という処理が必要になります。弊社ではこの構造化処理フローと構造化モデルについて日々議論を重ね、改良を続けています。 この記事では、そんな構造化データの表現形式の一つであるHTMLの様々な側面について詳しく考えてみたいと思います。 pの中にdivを入れてみる このHTMLを見てください。 <p> これはpです。 <div>これはdivです。</div> </p> このとき意図しているのは次のような構造です。 P ├── "これはpです。" └── DIV └── "これはdivです。" しかし、標準的なHTMLパーサーはこのDOMを作りません。 できあがったDOMをHTMLに直すと
GitHub - webui-dev/webui: Use any web browser or WebView as GUI, with your preferred language in the backend and modern web technologies in the frontend, all in a lightweight portable library.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【注意喚起】電ホビのサイトで「日本語表記がおかしい」「中国語から日本語への翻訳を確認される」などのケースについて | 電撃ホビーウェブ
いつも電撃ホビーウェブをご愛読いただき、誠にありがとうございます。 2024年10月8日の当サイトの配信再開以来、トップページや各記事等にアクセスした際、下記のような事象が発生することを確認しております。 【不具合の例】 ブラウザの拡張機能（Google翻訳等）で「中国語から日本語へ翻訳」するか確認を求められる。 日本語表記がおかしい。 文章や漢字・文字などが変。 文字化けをおこしている。 これらは、当サイトが中国語などの他言語のサイトと誤認識され、自動翻訳されているためだと考えられます。 ご利用中のブラウザの拡張機能（Google翻訳等）の設定をご確認・ご変更いただくことで、記事を正しく表示し、ストレスなくお読みいただくことが可能となりますので、お手数ですが、ユーザーの皆様にはぜひご対応いただければ幸いです。 以下にAndroidの「Chrome」ブラウザアプリでの設定確認・変更手順をご
role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。 そこでこの記事では、なるべ
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
兄弟要素を積み重ねる時、垂直マージンをどのように実装していますか？ 要素を積み重ねる時のマージンは、フクロウセレクタ（* + *）を使うと簡単です。さらに、>を追加することで、マージンが再帰的に与えられるのを防ぎます。たった3行のCSSで積み重ねる時のマージンを管理できる、フクロウセレクタの効果的な使い方を紹介します。 このテクニックは、テキストとテキスト、見出し直後のテキスト、流動的なフォントサイズにも非常に効果的です。 My favourite 3 lines of CSS by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのカスタムプロパティでのフォールバック値の仕組み The Stackではなく.flowを使うのなぜですか？ gapではなく、marginを使うのなぜですか？ 終わり
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
UI Component Library for Tailwind CSSFlyonUI is an open-source Tailwind CSS UI components library with semantic classes and powerful JS plugins. Includes blocks, templates, a Figma design system, and more…
SENDUNEは簡単にHTMLメールをデザインできるオープンソースのツールとのことなので、実際に使い勝手を確かめてみました。 Open source, drag and drop HTML email designer. | SENDUNE https://designer.sendune.com/ サイトにアクセスするとこんな感じ。あらかじめプリセットが用意されています。 「Your Logo」と書かれた部分をクリックすると左側でロゴの設定を編集できるようになりました。「Upload Image」をクリック。 標準でいくつかの画像が用意されていますが、今回は「Click To Upload JPEG or PNG or GIF」をクリックし、手持ちのGIGAZINEロゴ画像を選択して「開く」をクリックしました。 アップロードされた画像を確認し、「Select」をクリック。 ロゴの下の枠に
テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox
東大によると、教授は所属する専攻のWebサイトに、2020年から21年ごろのいずれかの時点で書き込んだ。教授が率いる研究室のWebサイトにも、23年11月までのいずれかの時期に書き込んでいたという。 東大はこれらの行為を、教職員就業規則第38条第1項第5号が定める「大学法人の名誉又は信用を著しく傷つけた場合」に当たると判断。同規則第39条第3号に基づき、出勤停止の懲戒処分とした。
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
HTMLにsearch要素が追加されたぞ！
先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にsearch要素が追加されました。 Add the <search> elementhttps://t.co/AlmyHd0qxI — HTML Standard (@htmlstandard) March 24, 2023 追加されたsearch要素は、下記で確認できます。 カテゴリは、フローコンテンツです。 4.4.15 The search element -HTML Standard search要素は、検索またはフィル
例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いですよね。 このように デスクトップPC →1024×682の画像を表示する ノートパソコンPC →640×426の画像を表示する スマホ →400×266の画像を表示する という風に、大きさの異なる画像を出し分けたいときに使うのがsrcset属性です。 srcset属性のデモページ（ソース） ※後述していますが、ChromeやSafariの場合はスーパーリロードしないと画像が切り替わりません 例えば、以下のように書くと <img srcset="small.png 400w, medium.png 640w, large.png 1024w" src="large.png" /> imgタグは、
Still X.S.S. - なぜいまだにXSSは生まれてしまうのか？ - GMO Flatt Security Blog
XSSこわい 若頭: おいお前ら、なにかおもしろい遊びをしねえか。こんなにみんなで集まる機会もそうねえだろう エンジニア佐藤: そうですねえ、こんなのはどうでしょうか。人間誰しも怖いものが1つはありますから、それをみんなで教えあってみましょうよ 若頭: そりゃあおもしれえな。そうだなあ、おれはヘビが怖いね。ありゃ気味が悪くてしょうがねえ エンジニア山田: 自分はカエルを見ると縮み上がってしまいます、テカテカしていてどうにも苦手で。佐藤さんは何が怖いんですか エンジニア佐藤: 私は、XSSがこわいです エンジニア八島: あはは！何言ってんですか佐藤さん。XSSなんてこわいことないですよ エンジニア佐藤: ひいい、名前を聞くのも怖いです エンジニア山田: XSSなんて、フレームワークさえ使っていればきょうび起こらないですからねえ。佐藤さんは臆病だなあ その晩、エンジニア佐藤を目の敵にしている町
はじめに Zennのようなブログ記事やAstroなどの静的サイトジェネレーターが、どのようにMarkdownを受け取り、ドキュメントを生成しているのか。 その仕組みに強い関心を抱いた私はAstroの Content Collections のソースコードを読み始めました。とりわけ印象的だったのは、フロントマターを抽出する gray-matter でメタデータを取り出しつつ、本文をunifiedパイプラインへ流し込む一連の設計です。 この記事では、そうした実装を眺めた好奇心から始まり、多重パース時代の課題、ASTリレーがもたらした転換点やMDX 3・WASM・Edgeが広げる近未来までを、コードと図を交えながら俯瞰します。 第一世代：多重パース時代 Markdown変換ライブラリの草創期を支えた markdown-it や marked は、Markdown → HTML文字列 を1回だけ高
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
名作Flashゲー『マテリアルスナイパー』復活！『艦砲射撃！』に続きHTML5版公開 | Game*Spark - 国内・海外ゲーム情報サイト
Qwikの紹介 – HTMLファーストのフレームワーク | POSTD
HTML で `<select>` 要素を `<hr>` でセパレートできるようになった
JavaScript不要! HTMLとCSSでつくるカルーセルUI - ICS MEDIA
プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
標準のHTML+CSSでスコープ化が可能に！ @scope入門 - ICS MEDIA
HTML 全体の CSS を取得して Shadow DOM に適用する
HTML・CSSだけで作れる！ リストのホバー演出アイデア集 - ICS MEDIA
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
HTMLを拡張し、JSなしで動的UIを作る「htmx」 | gihyo.jp
pの中にdivを入れられないのはなぜか - Legalscapeテックブログ
CSSの知っておくと便利なフクロウセレクタの使い方！ 要素を積み重ねる時のマージンにかなり便利です
FlyonUI - Free Tailwind CSS UI Components Library
見た目そのまま編集可能なオープンソースのHTMLメールデザインツール「SENDUNE」を使ってみた
HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA
Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装
東大、60代教授を懲戒処分 サイトのHTMLソースに“不適切な言葉” 「六四天安門」問題が理由と毎日報道
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
pictureタグとsrcset属性の違い。超わかりやすく
Markdown→HTMLはこう進化したーパイプライン最前線
abtem.hateblo.jp
www.sankei.com
www.sankei.com
old-fashioned.jp
www.sankei.com
www.sankei.com