少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
【849円】ノートPCを「劇的に楽に充電する」激安アイテムを検証&実戦投入！これちゃんと使えるの…？｜ずんだもんと学ぶ「激安商品」の実態 No.68
今回は「マジで欲しくて買ったもの回」として、激安の「PDトリガー」を検証していきます。〇音声読み上げ：VOICEVOX https://voicevox.hiroshiba.jp/〇登場キャラクター・VOICEVOX：ずんだもん・VOICEVOX：四国めたん〇動画内で使用させていただいているBGM・fun fun Ukelele：shimtone 様 https://dova-s.jp/bgm/play16650.html・Metal Jingle：shimtone 様 https://dova-s.jp/bgm/play16229.html〇その他素材・pixabay さま https://pixabay.com/ja/ ・効果音ラボ さま https://soundeffect-lab.info/〇投稿者のTwitter https://twitter.com/Saityo_Zunda
Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように
Chrome 125で追加された、CSSの新しい機能4つを紹介します。 今回のアップデートでは、今まではJavaScriptを使用しないと実装できなかったアンカーのポジションをCSSだけで設定できるようになりました。また、新しい関数やスクロールバーのカラースキームなど、Web制作者は要チェックです！ New in Chrome 125 Chrome 125 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるアンカーのポジション CSSのステップ値関数 round(), mod(), rem() 明度がほぼ100%または0のOklabおよびOklchカラーの不連続性を除去 スクロールバーのカラースキーム はじめに 5/15にリリースされたChrome 125で4
「CSS Library / Framework」をテーマに「BARフロントえんどう #2」を開催しました！ - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。 フロントエンドエキスパートチームの Saji です 2024 年 4 月 19 日(金)にサイボウズのフロントエンドエンジニア主催で第 2 回 BARフロントえんどうを開催しました。 本記事では、当日の様子やセッションについて紹介します。 BARフロントえんどうとは BARフロントえんどうは Web フロントエンドのトピックからテーマを選び、登壇者や参加者の間で情報を共有することで知見を深めてもらおうというコンセプトの勉強会です。 第 2 回を迎える今回は「CSS Library / Framework」をテーマとして開催しました。 フロントエンドリアーキテクトをテーマとした第 1 回の開催報告も併せて こちら でご覧になれます。 セッション内容 今回はメインセッションとして poteboy さん、株式会社はてなの mizdra さん、ピクシブ株式会社の f_subal さん
State of HTML 2023
While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you've learned about <div>s and <h>s 1 through 6, what else is there to know? Quite a lot, as it turns out! Once again we drafted Lea Verou to put her in-depth knowledge of the web platf
コピペで簡単に実装できる！ Tailwind CSSで実装されたボタンの最新コレクション -Tailwind CSS button collection
Webサイトの外観を向上させるためにデザインされた、Tailwind CSSで実装されたボタンのコレクションを紹介します。 ボタンの実装はJavaScriptは無し、Tailwind CSSで実装されたさまざまなエフェク...記事の続きを読む
State of HTML 2023
While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you've learned about <div>s and <h>s 1 through 6, what else is there to know? Quite a lot, as it turns out! Once again we drafted Lea Verou to put her in-depth knowledge of the web platf
上達のコツはやはり反復練習！ということで、第4回では、InDesignで作られた書籍のPDF（なければプリントアウト）をもとに、紙面デザインをそっくりに再現する方法について解説します。何度か作成していくうちに、Vivliostyleの可能性やクセがつかめてくるはずです。 CSS組版を覚える早道は……？ 筆者は2023年に『Web技術で「本」が作れるCSS組版 Vivliostyle入門』を執筆しましたが、これを読んだだけで自在に本を組めるようになるかといえば、残念ながらそう簡単なものではないというのが正直なところです。 では、どうやってCSS組版を勉強すればいいのでしょうか？ ひるがえって、自分がたどった道のりを思い出してみると、CSS組版とVivliostyleを使い始めたのは、書籍の原稿整理の一環として、書籍デザイン通りの字数・行数をCSS組版で再現したのが始まりでした。何度もそれを繰
WebKit Features in Safari 17.5
Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today. CSS There are several exciting new CSS features in Safari 17.5, including text-wrap: balance, the light-dark() color function, and @star
The Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine
Custom properties and CSS variables are often used interchangeably when describing placeholder values in CSS despite the fact that they are different but related concepts. Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined a
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
Introducing the CSS anchor positioning API | Blog | Chrome for Developers
The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements relative to other elements, known as anchors. This API simplifies complex layout requirements for many interface features like menus and submenus, tooltips, selects, labels, cards, settings dialogs, and many more. With anchor positioning built into the browser, you'll be able to build
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
プログラミング言語で書かれた謎の広告→「分かる人」が見ると……？ 粋なアイデアが「おしゃれ」と話題 東急に制作背景を聞いた
東急グループのデジタル技術による街づくりプロジェクト、「URBAN HACKS」の電車内広告が「面白い！」「おしゃれな広告」と話題です。CSSの記述に見える文字列をよく見てみると……？ 「分かる人には分かる」広告が話題 話題になっているのは、Webページの装飾を設定するためのプログラミング言語「CSS」風の文字列が黒い背景に並んでいる電車内広告。「エンジニア デザイナー募集」の記載もあるため求人広告とは分かりますが、コード部分の意味は一見しただけでは分かりません。 CSS部分をよく見ると…… しかしよくよくコードを読んでみると、「skill: 100%;」「org-style: flat;」「work-space: unset;」など、実は職場環境を紹介する文になっているのです！ 「フラットな社風で働く場所は自由、スキルを100%生かせる仕事です」といった感じかな……？ 別バージョンでは「
プログラミング言語で書かれた謎の広告→「分かる人」が見ると……？ 粋なアイデアが「おしゃれ」と話題 東急に制作背景を聞いた（ねとらぼ） - Yahoo!ニュース
東急グループのデジタル技術による街づくりプロジェクト、「URBAN HACKS」の電車内広告が「面白い！」「おしゃれな広告」と話題です。CSSの記述に見える文字列をよく見てみると……？ 【画像】謎の広告を翻訳した結果 「分かる人には分かる」広告が話題 話題になっているのは、Webページの装飾を設定するためのプログラミング言語「CSS」風の文字列が黒い背景に並んでいる電車内広告。「エンジニア デザイナー募集」の記載もあるため求人広告とは分かりますが、コード部分の意味は一見しただけでは分かりません。 しかしよくよくコードを読んでみると、「skill: 100%;」「org-style: flat;」「work-space: unset;」など、実は職場環境を紹介する文になっているのです！ 「フラットな社風で働く場所は自由、スキルを100%生かせる仕事です」といった感じかな……？ また、オフィス
Webサイトやデザイン制作で、やたらと時間がかかってしまうとお困りのクリエイターの方へ。 この記事では、SNSなどでいま話題の最新ツールやフリー素材を50個まとめており、制作時間を短縮したいというひとに選ばれています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 AI関連ツール RenderNet – Create AI images with Unmatched Control 一貫性のある同一人物によるキャラクター画像を生成できるAIツールで、人種やスタイル、性別などはもちろん、顔はそのままでポーズの変更や、背景の再生成などが可能。 Textify — Fix text in images — Storia AI 元の背景を維持したまま、シームレスに文字テキストのみを変更できるAIツール。既存のフォントスタイルに合わせることも、新しいものを
主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考：過去に話題になったポスト ポストを別枠で表示する 見出し要素（h1〜h6）の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。
The HTML Working Group has published a Working Draft of HTML Ruby Markup Extensions. Ruby, a form of interlinear annotation, are short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation. This specification revises and extends the markup model established by HTML to express ruby.
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
HubSpotやCSS設計に明るい半田のウェブサイトです。 ウェブサイトの本質は情報を伝えることですので、それを言い訳にデザインは全体的に工事中です。 みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク（以後JSフレームワーク）を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。 そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。 なお本記事では、区別のためCSS設計が「再利用可能なパーツ」とみなす単位を（あるいは慣習的に）「モジュール」、JSフレームワークにより提供される単位を「コンポーネント」と呼びます。 CSS設計が行っていたこと 「CSS設計」と聞くと Block__Element–Modifier という形式の長ったらしいクラス名を付けることだ
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。
最近次のようなポストをしましたが、主に不透明度を伴う色の指定に現在でもrgba()関数を使用している方が多い印象です。 ポストを別枠で表示する 今年に投稿されているCSSの技術記事でもrgba()関数を使用したサンプルコードが散見されますが、現在rgba()関数はレガシーな指定とされています。 rgba()関数使っている人、全員時代に取り残されています過去のCSSでは色を指定する方法の一つとしてrgba()関数が使用されてきました。この関数はRGB値とアルファ値（不透明度）を組み合わせて色を表現するために用いられます。
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気をつけていること、自身の趣味について話しました。全2回。 「とほほのWWW入門」管理人 杜甫々氏 杜甫々氏（以下、杜甫々）：どうも杜甫々です。「とほほのWWW入門」というやつを作っています。こういうところに出ることはあまりなくて、2022年の岡山のオープンセミナーも録画でやっていたので、こんなにたくさんの人の前でしゃべるのは初めてだったりします。 まずちょっと、おじさんの紹介をやっていきます。「とほほのWWW入門」の管理人です。1996年から始めたので、もう27年目に突入ですね。ハンドルネームは杜甫々です。途中で漢字を当てはめてみました。本名は違いますけどね。 広島生まれの広島在住です。もちろんカープファンです。2023年の観戦成績は6勝1敗で、けっこう良かったんじゃないかなと思っています。 次にイ
Using the Popover API for HTML Tooltips – Frontend Masters Boost
Using the Popover API for HTML Tooltips May 6, 2024 We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while making a classic t
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティをやるのか」の理解を得る・得てもらうまでの障壁 イノベーター層・アーリーアダプター層な開発者（エンジニアやデザイナー）が取り組みを始める上での障壁 マジョリティ層が取り組みを始める上での障壁 今回はこの3つめの「マジョリティ層が取り組みを始める上での障壁」の話です。 残りの2つについては、私が執筆に参加したWebアプリケーションアクセシビリティが網羅的なガイドになってくれるはずです。しかしコイツは内容的にも物理的にもゴツすぎる問題があると思っていて、導入編としては見えにくい、読みにくい
Me, at CSS Day 2022, talking about Specificity (and the Cascade) Whenever a post about Specificity in CSS – and by extension the Cascade itself – gets published I get very excited as it’s a core concept of the language that everyone should know. The more articles on this, the better! However, I also sometimes raise one of my eyebrows as sometimes I, unfortunately, encounter something that’s just o
Time-based CSS Animations
In my earlier post Time Uniform For CSS Animation, I took a note about a way to do CSS animations with time ticks instead of keyframes. It was limited applicable because CSS lacked the ability of doing complex Math calculations. After years of wait, CSS now has enough Math functions supported, particularly mod(), round(), and trigonometric functions. It's time to revisit the time-based way of anim
初めての個人開発 ②実装編 - Qiita
はじめに 私は2023年10月より、内定直結型エンジニア学習プログラム「アプレンティス」に2期生として参加しています。 アプレンティスの課題としてオリジナルプロダクトを開発したので、その内容をまとめようと思います。 前回の「初めての個人開発 ①要件定義・設計編」の続きとなる「実装編」です。 目次 1.出来上がった Web アプリケーションのご紹介 2.何から手を付けるか 3.フロントエンドとバックエンドはどちらが先か 4.データベースはどこまで正規化すべきか 5.CSS 実装方法の選択 6.React Hook Form と画像の即時表示 7.Laravel Sanctum と Laravel Socialite を利用した OAuth 認証 8.ログイン情報をどのように保持するか 9.Googleマップの多重レンダリング問題 10.EC2 インスタンスのファイルシステムの拡張 11.プレ
Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine
While the CSS :has() pseudo-class is widely celebrated for its ability to select a parent element up the chain conditionally based on its contents, there is more conditional logic it is capable of handling when we move it up the chain, so to speak. Amit Sheen demonstrates using :has() to apply styles conditionally when a certain <option> in a <select> element is chosen by the user and how we gain
はじめに結論 CSS の aspect-ratio プロパティを使っている場合、Chrome 124 で崩れる場合があります。 aspect-ratio を設定している要素に min-width: 0; を設定しておくと安全かも。 以下詳細です。 現象 以前は問題なく表示できていたはずのページで、コンテンツがページ外にはみ出してしまう現象が発生していました。 原因を確認すると、以下のような条件で発生していました。 親で display: grid; を設定して横並びにしている おそらく flex でも同様 その中に aspect-ratio プロパティを設定している要素がある 同様の状況を再現したのが、冒頭に掲載した CodePen のサンプルです。 原因 Chrome 123.0.6262.0 で表示を確認したところ、問題なく表示されていました。 Chrome 124.0.6367.92
An alternative proposal for CSS masonry | Blog | Chrome for Developers
The Chrome team is keen to see an implementation of masonry type layouts on the web. However, we feel that implementing it as part of the CSS Grid specification as proposed in the recent WebKit post would be a mistake. We also feel that the WebKit post argued against a version of masonry that no one was proposing. Therefore, this post aims to explain why we at Chrome have concerns about implementi
Printing music with CSS grid
Printing music with CSS Grid Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web! Stephen Band 24 Apr 2024 Music notation should be as accessible and as fluid as text is, on the web; that it is not, yet, is something of an afront to my sensibil
GigaViewer for AppsにVivliostyle.jsが採用されました 小形 克宏 (理事、業務執行役員) 株式会社はてなは今年3月29日、自社のマンガビューワ「GigaViewer for Apps」が、「少年ジャンプ＋」（株式会社集英社）のアプリ版に採用されたことを発表しました。 はてなのアプリ専用マンガビューワを集英社が採用。2,700万ダウンロードを超える「少年ジャンプ＋」に提供開始（2024-03-29） これにともない「GigaViewer for Apps」に組み込まれた小説用ビューワのレイアウトエンジンとして、Vivliostyle.jsが採用されたことをお知らせします。 もしかしたら、「なぜマンガアプリにVivliostyleが？」と不思議に思われる方もいるかもしれません。じつは集英社はマンガ作品のノベライズにも力を入れており、「少年ジャンプ＋」もたくさんの
OBSのブラウザソースで動くものを作るあなたへ
MacOSのみ一部バージョンが異なるのは26.1.1リリースのタイミングでブラウザソースがクラッシュする問題が発生し、hotfixとして26.1.2リリースのタイミングでMac版のみアップデートがなされたためです。 このようにバージョンアップのタイミングはまちまちで、XSplitに関しては最近までChrome 68系、OBSについても最新版の30.xでもChrome 103系と執筆現在(2024/04/22)での最新バージョンであるChrome 124から21バージョン遅れをとっている状況です。 これらのアップデートが進まないことの背景には、OBSがCEF経由でページの表示をテクスチャとして使用するためにテクスチャ共有を利用しながら、ゲームなどの他のソフトウェアやキャプチャを使用するためにもテクスチャ共有を利用していることと、CEFがOffscreen Rendering(OSR)時にハー
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
ウェブの最新情報 | Blog | web.dev
Web制作者は要チェック！ Chrome 125で新しく追加された4つのCSSの機能
Vivliostyleで市販書籍とそっくりに組んでみよう | gihyo.jp
令和のHTML / CSS / JavaScriptの書き方50選
CSSは日々進化している！知ったら使いたくなる「モダンCSS」機能紹介
できるクリエイターへの近道、話題の最新Webツール・デザイン素材50選
主題と副題のマークアップにはhgroupを使用する – TAKLOG
HTML Ruby Markup Extensions Working Draft Published
CSS設計とは何だったのか？と、コンポーネント環境との関わり
えっ！？まだ色の指定でrgba()関数を使っているの！？ – TAKLOG
PC-8801mkIISRで「漢字BASIC」を制作、大学の研究室ではApple IIを使用… 杜甫々氏が「とほほのWWW入門」を開設するまで
Misconceptions about CSS Specificity
【CSS・Chrome 124】aspect-ratioを使っているページが何もしていないのに壊れた
GigaViewer for AppsにVivliostyle.jsが採用されました
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
紙っぽいかわいいWebサイト作りたい - Qiita
アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか？