![「日本語音声自動文字起こし」が実用的 Pixel 6とGroup Transcribeを比較](https://cdn-ak-scissors.b.st-hatena.com/image/square/c36df22c9a709e1eae85c592ff9f97a0583ead93/height=288;version=1;width=512/https%3A%2F%2Fwww.watch.impress.co.jp%2Fimg%2Fipw%2Flist%2F1368%2F424%2Fp01.jpg)
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか? 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです(モードレスダイアログとしても利用できます)。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer Technique by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテンツが十分な量でなくてもフッタを一番下に配置する方法 はじめに 「スティッキーフッタ」というと、ページをスクロールした時にぴたっと固定表示されるposition: sticky;を思い浮かべる人が多いと思います。 しかし、それはここで話すこととはすこし異なります。 「ス
Web解析ツールのスタンダード「Google アナリティクス」の最新バージョン、2020年10月にメジャーバージョンアップを遂げたGoogle Analytics 4(以下GA4)の連載がスタートします。従来版から移行して、今後アクセス解析ツールのスタンダードになるであろうGA4について、初心者ユーザーでも理解が深まる内容を毎回解説。今回はGA4と従来版との違いを押さえながら、GA4の設定方法について紹介します。 ※ Google アナリティクスは随時、機能追加やレポート画面のレイアウト変更などが行われます。本内容は、2021年7月時点に基づきます。 GA4で何がどう変わったのか、変わっていないのか? 最初にGA4と従来までのバージョンを比べるところから始めましょう。まず従来までのGoogle アナリティクスのホーム画面が以下の通りです。 次にGA4のホーム画面です。 両者を比べると、表示
こんにちは、 freeeでデザインシステムを作っていたりアクセシビリティーのいろいろをやっていたりする id:ymrl です。 freeeではfreeeアクセシビリティー・ガイドラインを策定して、誰でも使えるアクセシブルな製品開発ができるよう取り組んでいます。これまでも、開発者(エンジニア、プロダクトマネージャー、デザイナー)向けには実習を含むアクセシビリティー研修を行ってきました。 そしてこのたび10月から 対象を全新入社員向けに拡大 してアクセシビリティー研修を行うようになり、あわせて開発者向けの研修も内容を整理したので、今回はその紹介をします。 なぜ全員に研修をするのか これまでのアクセシビリティーの取り組みは、プロダクト開発を中心に進めてきました。「だれもが自由に経営できる統合型経営プラットフォーム」をビジョンに掲げている以上、まずは提供しているSaaSが誰でも使えるものになってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く