CSS Anchor Positioning 仕様の紹介
CSS Anchor Positioning は、要素の配置を制御する新しい仕様で、指定した要素（アンカー要素）の位置を基準に、要素を配置できます。 ポップオーバーやツールチップ、トーストなどをはじめとした、さまざまな UI コンポーネントの実装に利用できます。 特に CSS Anchor Positioning による要素の配置には、「配置する要素が表示領域に収まらない場合の挙動を制御できる」「Popover API などによって Top Layer に配置される要素であっても、アンカー要素を基準にその位置を制御できる」といった特徴があります。 これまでは、JavaScript を用いて要素の座標やサイズを計算し、それを元に要素を配置する方法が一般的でした。CSS Anchor Positioning を用いることで、そのような処理を CSS で行うことが可能になります。 CSS Anc
The WHATWG Blog — The state of fieldset interoperability
As part of my work at Bocoup, I recently started working with browser implementers to improve the state of fieldset, the 21 year old feature in HTML, that provides form accessibility benefits to assistive technologies like screen readers. It suffers from a number of interoperability bugs that make it difficult for web developers to use. Here is an example form grouped with a <legend> caption in a
Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not
Because Scroll-Driven Animations are only active when there is scrollable overflow, it is possible to use them as a mechanism to detect if an element can scroll or not. Mix in a Space Toggle or a Style Query, and you’ve got all you need to selectively style an element based on it being scrollable or not. ~ The Code If you’re here for just the code, here it is: @keyframes detect-scroll { from, to {
An Auto-Filling CSS Grid With Max Columns of a Minimum Size | CSS-Tricks
Within Drupal 10 core, we’re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world. The requirements are: The user specifies a maximum number of columns. This is the auto-filling grid’s “natural” state.If a grid cell goes under a user-specified width, the auto-filling grid will readjust itself and decrease the number of columns.The grid cells should
キュウリの「ヘタ」と「実」の切り口をこすりあわせることにより渋味を低減できる | 農研機構
※アーカイブの成果情報は、発表されてから年数が経っており、情報が古くなっております。 同一分野の研究については、なるべく新しい情報を検索ください。 要約 キュウリ果実を切断すると、維管束から渋い液が滲出する。渋味成分(アク)の主体はギ酸である。果実のツル側の先端部分(ヘタ)を切断し、残った部分(実)と切り口同士をこすりあわせると、果実中の維管束液の量が減少し、果実の渋味を低減できる。 キーワード: キュウリ、ギ酸、渋味、維管束、アク抜き、食味改善 担当:野菜茶研・野菜・茶の食味食感・安全性研究チーム 代表連絡先:電話050-3533-3863 区分:野菜茶業・野菜品質・機能性、食品 分類:研究・参考 背景・ねらい キュウリ果実のヘタ(果実のツル側の先端部分)を切断し、実(残った果実部分)と切り口同士をこすりあわせるとアクがとれるという伝承があるが、真偽は定かではなかった。そこで、アクの原因
「社内のアレ分からん、教えてAI」実現 Microsoftの“自社版ChatGPT作成サービス”にデータ取り込み機能
「社内のアレ分からん、教えてAI」実現 Microsoftの“自社版ChatGPT作成サービス”にデータ取り込み機能 米Microsoftは6月19日（現地時間）、大規模言語モデル「GPT-3.5」などのAPIをクラウドサービス「Microsoft Azure」上で使える「Azure OpenAI Service」に、新機能「On Your Data」を追加した。ローカルやAzure上のストレージに保管するテキストファイルやPDF、PowerPointファイルを、GUIの操作でチャットAIに参照させられるという。まずはパブリックプレビュー版を提供する。 これにより、社内で分からないことがあったときに何でも質問できるAIチャットbotなどを作成しやすくなるという。 Microsoftが提案する活用例では、ユーザーの「サポートチケットはどうやって作る？」（How do I create a s
アクセシビリティ改善中！ LIFULL HOME'S スマートフォンサイト - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。株式会社 LIFULL でプロダクトのアクセシビリティ向上をミッションとして活動しています。 本日は、不動産・住宅情報の総合サービスである LIFULL HOME'S のスマートフォンサイトにおいて、過去半年間で実施したアクセシビリティ向上施策をご紹介します。ご紹介する施策のうちいくつかは、内容を掘り下げて実装コードを交えて解説をしていきます。 それでは、早速アクセシビリティ向上のために実施した施策を見ていきましょう。 ボタンを正しくボタンにする 追加コンテンツを読み込む機能のフォーカス管理 チェックボックスに適切な名前を付ける カルーセルをアクセシブルにする スクリーンリーダーによる検索結果の件数の読み上げ そのほかの改善点 おわりに ボタンを正しくボタンにする ウェブサイトにおいて、ユーザーがアクションを実行するためにボタンが用いられます。ボタンは通
学術文献の視覚障害者等用テキストデータ製作における代替テキスト製作仕様書ver.2021.1
1 / 44 学術文献の視覚障害者等用テキストデータ製作における 代替テキスト製作仕様書 ver.2021.1 令和 3 年 5 月 国立国会図書館 2 / 44 主な改訂履歴 版 改定内容 ver.2021.1 (令和3 年5 月) 名称を「学術文献を原本とする視覚障害者等用テキストデータ製作における代替テキスト製作に 関する仕様書」から「学術文献の視覚障害者等用テキストデータ製作における代替テキスト製作 仕様書」に変更 例を追加（2-3-3. 関係図の例 ＜例6＞、2-3-4. 流れ図の例 ＜例3＞、2-5-5. その他のグラフ の例 ＜例1＞＜例2＞） ver.2020.2 (令和2 年10 月) 「2-3. 図・地図」を「2-3.図」と「2-4. 地図」に分割 その他、見出し等の全体の体裁を修正。 ver.2020.1 (令和2 年9 月) 分散していた代替テキ
学術文献のテキストデータの製作｜国立国会図書館―National Diet Library
OCR（光学文字認識）をかけただけのもので、OCRの誤認識により誤字やレイアウトの崩れが含まれるテキストデータ。文字校正をしていないため、間違いが多数ある可能性があります。 ファイル形式は以下のとおり（希望するいずれか又は両方）で、製作期間は概ね1か月以内です。 校正済テキストデータもご希望の場合は、未校正データと同時にあるいは未校正データの提供後にご依頼いただけます。 プレーンテキスト(TXT) 太字、斜体、アンダーライン、フォントサイズの大小等の「装飾」やレイアウト上の工夫は基本的に省かれ、txt ファイルで表現できる情報のみに簡素化されています。 [参考]当館製作 未校正 プレーンテキスト（TXT）一覧（みなサーチ） 透明テキスト付PDF PDFファイルの一種で、紙資料をスキャンしたデジタル化画像と、テキストデータを1つのファイルとしてまとめたファイル形式です。テキストは透明であるた
FrontPage - 視覚障害者向け アクセシブルゲーム 情報 まとめWiki
本Wikiについて † 本Wikiは、視覚障害の有無に関わりなくプレイ可能なコンピューターゲームの情報を共有、集積するまとめWikiです。 コンシューマーゲーム、アーケードゲーム、パソコンゲーム、スマートフォンゲーム、オンラインゲーム、コンピューターゲームでないもの（トレーディングカードゲーム/テーブルゲーム）等、機種やプレイ形態を問いません。 本Wikiの情報はどなたでも追加・編集・閲覧いただけます。情報共有や入手の場としてお使いください。 ↑ 視覚障害とコンピューターゲーム † 視覚障害を持つユーザーは、全盲／弱視といった視覚情報の状態にかかわらず、一般にゲーム画面からの情報を利用し「画面を観て遊ぶ」要素を多く含むテレビゲームのプレイは困難と思われがちです。 しかし、視覚の代用となる情報と工夫次第で一般に流通するコンシューマーゲームタイトルを問題なく楽しめる場合があります。 視覚情報を
Web の仕様を眺めるシリーズ CSS Anchored Positioning｜Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。最近書いた JavaScript は Google Apps Script です。UI 書きたいけどマネージャーという名の雑用忙しいウオオ。 最上層に浮かせて表示したい UI の配置を制御する仕様 なんとなく Chrome Platform Status から Proposed なステータスのフィーチャーを取り上げて、そのプロポーザルな仕様を眺めてみるシリーズです。本当にシリーズにするかは謎です。 今回は CSS Anchored Positioning を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 Microsoft Edge チームからの提案 MicrosoftEdge/MSEdgeExplainers にあることから Microsoft 社の Edge ない
Pop-ups: They're making a resurgence! | Blog | Chrome for Developers
The goal of the Open UI initiative is to make it easier for developers to make great user experiences. To do this, we are trying to tackle the more problematic patterns that developers face. We can do this by providing better platform built-in APIs and components. One such problem area is pop-ups, described in Open UI as "Popovers". Popovers have had a rather polarizing reputation for a long time.
【ここだけ10年前】新生『FFXIV』が『ファイナルファンタジーXIV： 新生エオルゼア』として始動！
2012年（平成24年）7月27日（金）の主な記事は？ 2002年（平成24年）7月27日（金）は、『ファイナルファンタジーXIV：新生エオルゼア』が始動するというニュースが流れ、盛り上がりました。 また、ランキングでは『星のカービィ』20周年記念ソフト『星のカービィ 20周年スペシャルコレクション』が1位をとりました。人気シリーズのメモリアル作品だけに、こちらも話題になりました。 ●新生『FF XIV』が『ファイナルファンタジーXIV：新生エオルゼア』としてついに始動！ プロモーションサイトが本日公開 PC向けにサービスしていた『ファイナルファンタジーXIV』について、タイトルとロゴを一新し、『ファイナルファンタジーXIV：新生エオルゼア』としてスタートすることが発表されました。 大幅に進化したゲーム内容に、正式サービスに向けて大いに期待が集まりました。本作はその後もバージョンアップを重
CSS Selector Specificity Calculator | Polypane
What is CSS selector specificity?If an element is targeted by multiple selectors, browser use the specificity of the selector to determine which styling to apply. Each selector has a specificity that is determined by what you use in that selector: elements, ID's, classes etc. This specificity is split up in different levels. A single value in a higher level is more important than all levels below
Mechanical Watch – Bartosz Ciechanowski
In the world of modern portable devices, it may be hard to believe that merely a few decades ago the most convenient way to keep track of time was a mechanical watch. Unlike their quartz and smart siblings, mechanical watches can run without using any batteries or other electronic components. Over the course of this article I’ll explain the workings of the mechanism seen in the demonstration below
CSS Line Breaking
White-space — Phase II Collapsible spaces at the start of a line are removed Preserved tabs shift content to the next tab stop Preserved line feeds push content to the next line Wrap the line at a wrap opportunity if more won't fit White-space — End of Line Collapsible spaces at the end of a line are removed white-space:pre spaces stay, overflowing if too long white-space:pre-wrap spaces stay, may
Flex-grow 9999 Hack
The Germans broke my CSS a while ago. Well, not literally, but their long words did. A few days before the issue occurred, I saw a talk by Zoe Mickley Gillenwater at Frontend United entitled "Using Flexbox Today". That talk inspired me to solve the problem with flexbox. Before I explain the flex-grow 9999 hack in detail, let me briefly describe what it does. The flex-grow 9999 hack makes a flex it
中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskd
公開日2021-09-06タグHTMLレイアウトや装飾目的で、中身のない div 要素や span 要素、いわゆる「空 div」「空 span」を作ることはままある。しかしそれは仕様として妥当なのだろうか？ 目次 レイアウト目的の空 div の例 装飾目的の空 span の例 HTML にレイアウト目的や装飾目的のための要素はない div と span の仕様から探る フローコンテンツ フレージングコンテンツ コンテンツモデルにおける text "nothing" コンテンツモデル ol, ul, menu 要素 パルパブルコンテンツ カスタムエレメント トランスペアレント ここまでのあらすじ 僕の結論 レイアウト目的の空 div の例 下記は使う場所に応じて幅や高さを任意に設定できる例だ。.Spacer が空 div になっている。 <div class="Hero">...</div>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
selectmenu | Open UI
保育園からおむつの持ち帰りをなくす会