ウェブアクセシビリティ対応、どうすれば？ 法改正のポイントと5つのステップを解説｜Goodpatch Blog グッドパッチブログ
アクセシビリティ？ ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。 とはいえ、「法改正で何が変わったのかよく分からない」「ウェブアクセシビリティってどうすれば対応できるの？」といった疑問を持つ方も少なくないはず。そこで、この記事ではいわゆる「法的義務化」の潮流を解説しつつ、アクセシビリティの基本を押さえていきます。 アクセシビリティの考え方は、ウェブに限るものではありません。他のプラットフォームでのソフトウェアデザインや物理的なモノや空間のデザインにおいても、普遍的に重要な視点です。ぜひ、この機会に一緒に学んでいきましょう！ なぜ「ウェブアクセシビリティ」に注目が集まっているのか？ まず前提として触れておきたい
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ CSSフレームワークのTailwind CSSが注目を集めています。その特徴は、flex、pt-4、text-centerといったユーティリティクラスの組み合わせだけで、ほとんどすべてのスタイリングをしてしまおうという大胆なアプローチです。これまでのベストプラクティスと真っ向から対立するようなやり方ですが、だからこそ享受できるいくつもの強みがあります。本特集では、そうしたTailwind CSSの考え方や、具体的な使い方について紹介します。 お知らせ：本特集のサンプルコードは、GitHubの筆者リポジトリからダウンロードできます。https://github.com/yuheiy/wdpress133_
フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
チーム開発でVSCodeの拡張機能やフォーマット設定などを統一したい時に便利な設定ファイルについて | DevelopersIO
ただし、settings.jsonとかkeybindings.jsonをいじり始めると平気で1日溶けます。私はよく現実逃避で始めたキーボード設定で時間を溶かします。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 みなさんはエディターは何を利用していますか？（火種） 私はnvimやVSCodeを使い分けています。チームで開発する時やペアプロをする時はVSCodeに便利な仕組みが揃っているからです。 今日はチーム開発の際にさっと導入できるわりに、不要な手間を省いてくれる.vscode/settings.jsonと.vscode/extensions.jsonについてお話しします。 何がうれしいのか .vscode/settings.jsonでは以下のようにファイル保存時のフォーマッタ適用や適用するフォーマッタの指定が可能です。 .vscode
HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
Shibuya.apk #43 https://shibuya-apk.connpass.com/event/288211/
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
こんにちは。日頃は blockchain の記事ばかり書いていますが、たまには生成 AI についても書きたいと思います。テーマは生成 AI で出来るだけ思い通りにサイトの生成を行います。 前提 今回は以下条件のサイトを生成します。 Next.js Tailwind LP向け レスポンシブ向け また、検証で利用した GPT は ChatGPT 3.5 です。 Bing Copilot を使用する場合、可能であれば Web 検索との連動を OFF にすることをオススメします。また、自社独自の専門用語をプロンプトへ加える場合は適宜補足説明を手動、または RAG 等でプロンプトへ加えてください。 背景 この記事を書くに当たって感じていた課題と解決したことを記載します。 課題 普段は、GPT系を駆使して素早くコードを作成することを心がけています。バックエンドの生成にはそれほど問題はないのですが、フロ
モダンWEBサイトにおける画像最適化について
はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最
【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ
Cookie Set-CookieはHTTPのレスポンスヘッダーで、サーバーからユーザーエージェントへクッキーを送信するために使われる。 また、ユーザーエージェントはサーバーに送り返すことができる。 そのため、HTTP サーバーが HTTP ユーザーエージェントに状態を保存するために使用することができる。 Cookieの利用目的 セッション管理 ログイン状態や買い物時のカートの状態など パーソナライズ トラッキング Set-CookieとCookieヘッダ HTTP の Set-Cookie レスポンスヘッダーは、サーバーがユーザーエージェントへ Cookie を送信するために使用します。 HTTP/2.0 200 OK Content-Type: text/html Set-Cookie: yummy_cookie=choco Set-Cookie: tasty_cookie=straw
2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会計ソフト！ Tailwind CSSとは Tailwind CSSは、あらかじめ多くのクラスが用意されているCSSフレームワークです。Webサイトを制作する時に、HTMLの要素に直接、定義済みのクラスを付与して使用します。基本的に1つのクラスに1つのスタイルが当てられていて、例えば「m-0」というクラスをつけると margin: 0px; が、「w-full」というクラスをつけると width: 100%; が加えられます。 実際にどんなものか見たほうが早そうで
タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN 従来のhidden属性とは違い、until-found"属性値を指定した場合はブラウザのページ内検索やページ内リンクでそのコンテンツが検出された場合、自動でhidden属性が取り除かれて表示することができます。 従来のdisplay:noneを使用した非表示ではコンテンツ内にページ内検索でマッチすべきワードがあったとしても検出できませんでしたが、hidden="until-found"を使
【HTML】dl, dt, ddで組みたくなる表、tableにするのがいいかもね（スクリーンリーダーと検索エンジンのために）
dl や ul で組むべきでないという主張ではありませんので誤解のなきよう！ dl で書くんだ！と思える人はそれがいいと思います😉👍 私自身は dl と table が HTML の使い方としてはどちらも正解で差がないように感じられて、どちらを使うべきか判断がつかず悩んだ末、具体的なメリットの部分を見て table にしたという話です。 同じように迷った人の参考になれば幸いです。 詳しくは以降で説明します。 想定する表の内容 この記事の議論では、名前と値の組が複数並んでいる、メタデータの表を想定します。 プログラミング言語でいうところの、連想配列 (Map, Dictionary, JS では Object) の構造に相当します。 具体的には以下のようなものです。 会社概要（「会社名：〇〇、所在地：〇〇、資本金：〇〇、…」） 商品の仕様表（「商品名：〇〇、価格：〇〇、サイズ：〇〇、…」
nekoweb
Nekoweb is a free static website hosting service, created in 2022 2023 2024 by a group of coders, programmers and artists, passionate for the old web and personal websites. Social media is too limiting. We believe that everyone should be able to freely express themselves in their own little corner of the web, without having to worry about things like algorithms, tracking, or advertisements. Nekowe
By all accounts, Figma has been an amazing tool for designers. We've used it extensively at 37signals, and I'm sure most every other software shop has too. Adobe didn't pay $20 billion for nothing. But we don't do the bulk of our design work with or in Figma when developing Basecamp or HEY for the web. That's all done directly in HTML and CSS, as it should be. Because no matter how good Figma is,
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回のテーマは「GPT4oを活用したウェブサイトづくり」です。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回は先日OpenAIが発表した新たなAIモデル「GPT-4o」を使ってウェブサイト（LP）を作成してみました。GPT-4oのパフォーマンスを知ること、そしてデザイナーが生成AIとどう関わっていくべきかを探るきっかけにすることが、今回の目的です。 前提として「GPT-4o」がゼロベースでウェブページを作成することに向いているツールではないと思いますが、チュートリアルの要素と今後の可能性を知るためにあえて取り組んでみました。 GPT-4o
「とりあえずNoto Sans JP」、考え直してみませんか？｜SOMPO Digital Lab デザインチーム
SOMPO Digital Labデザイナーの松葉（ https://twitter.com/tiyou01 ）です。 ウェブサイトやアプリのUIで使う書体、「とりあえずNoto Sans JPで…」と決めてしまった経験はないでしょうか？この記事はそんな「とりあえず」に心当たりのある皆さんに向けて書かれています。 Noto Sans JPという書体Noto Sans JPはAdobeとGoogleの共同開発による書体で、Adobeからは源ノ角ゴシック／Source Han Sans、GoogleからはNoto Sans JPという名称でリリースされました。この記事ではNoto Sans JPの表記で記載します。 2014年にリリースされて以来、Noto Sans JPはUIで利用する日本語書体としてすっかり定着しました。現在はウェブサイトやアプリで見ない日はないと言ってもいいくらいです。
XDからFigmaへ移行したい人のためにFigmaの機能を紹介
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコ
はじめに この記事はAuth.jsがどのようなものか，どのように実装すればいいかなどをドキュメントを要約しながら紹介するものです． 2024/02/19 追記 Auth.jsはv5で破壊的変更がありました．新たにAuth.jsを学ぶ場合には，特に理由がない限りv5を使うことをお勧めします． Auth.jsはドキュメント整備中です．現在のドキュメントとは内容が異なる場合があります．この記事では旧ドキュメントの内容も交えて解説しています． 今回はNext.js App Router実装編です．前回の記事はこちら 環境構築 JWTを用いたOAuth認証を行うためのNext.js環境を構築します．面倒であれば以下にテンプレートを用意しましたのでご自由にお使いください． まず，Next.jsを作成します．以下のコマンドを実行し，質問に答えながら構築します． √ What is your projec
2023年度リクルート エンジニアコース新人研修の講義資料です
CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes
HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。
はじめまして。フロントエンドエンジニアの田島と申します。 ちょうど今から約１年ほど前に鹿児島にあるアプリファクトリーはるni株式会社というゲーム開発会社様にお声がけいただき、お仕事として企業サイトを制作致しました。 以下のツイートにて、サイト内での操作イメージを短くまとめた動画を添付しています。 サイトの制作方針として、はるni様が制作を得意とする3Dボクセルを中心に据える方針で企画が固まり、技術的にチャレンジングな仕事となりました。その際、私自身多くの方々の技術記事等を参考にさせていただいたため、自分も微力ながら制作の過程で得られた知見を共有できればと思い、記事に残すことにしました。 （ただし、WebGLやThree.jsの扱いに関して未熟な点も多分にあるため、各章でより良いアイデアをお持ちの方はコメント等で温かくご提案いただけますと幸いです。） 技術検証 陰影を事前にベイクするか、リア
私がエッジを使う理由
Workers Teck Tolks in Osaka #1
フロントエンドの技術選定 ~2023を振り返る~ Lunch LT での発表資料です https://findy.connpass.com/event/306714/
WebサイトやスマホアプリのUIに使用されているボタンをデザインするときに気をつけるポイント、より使いやすくするためのポイントを紹介します。 UIのボタンは色だけに頼らない明確な視覚的階層が必要で、同じスタイルの場合は区別できるようにデザインすることが重要です。 Button design tips to avoid common mistakes by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに UIのボタンで見かけるよくある間違い ボタンをデザインするときに重要なこと より良いボタンにする方法 より実践的なUIデザインのガイドライン はじめに 私はデザイナーになって20年が過ぎ、多くのプロジェクトでボタンを使用してきましたが、ボタンのデザインについて深く考察する時間を取っていなかっ
世の中にはさまざまなアーティストがいるため、好みのアーティストを探そうにも数が多すぎてなかなかピンとくるものに出会えません。似たようなアーティストの探索に使えるのが、世界中のユーザーの好みを元にアーティストのマッピングを行うサービスの「Music-Map」です。 Music-Map - Find Similar Music https://www.music-map.com/ Music-Mapでは、ウェブサイトの訪問者に「何が好きで何が嫌いか」を尋ねることによって関係性を学習するシステム「Gnod」に基づいてアーティストのマッピングを行っています。「Aというアーティストが好き」と答えた人の多くが「Bというアーティストも好き」と答えた場合、AとBは近しい関係として設定されます。 「Music-Map」にアクセスすると検索ボックスが出現するので、好きなアーティスト名を入力して検索アイコンをク
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説しています。 今回はMisskeyのWebクライアント（Misskey Web）におけるUIデザインの工夫や各種コンポーネントについて紹介します。 なお、「デザイン」という語は設計という意味と、見た目・意匠という意味がありますが、この記事ではどちらも含みます。 Misskey Webの設計思想 Misskey Webの設計思想として、「デスクトップでもモバイルデバイスでも同じように使えるようにする」というのがあります。 “同じように使える”とは、機能や使い勝手といった面でもそうなのですが、コンポーネント（UIを構成する個々のパーツ）レベルの話も含んでいます。 現在はこのような設計思想で開発していますが、Misskey初期の頃は、デスクトップ版Webクライアントとモバイルデバイス
2023年11月24日紙版発売 株式会社ICS 池田泰延，西原翼，松本ゆき 著 A5判／344ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-13871-4 Gihyo Direct Amazon 楽天ブックス honto ヨドバシ.com 電子版 Amazon Kindle この本の概要 フロントエンド開発の範囲は広く，習得すべき技術は多種多様です。 HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの，Webサイトを制作するのか，Webアプリケーションを開発するのか，その違いによって採用すべき技術は全く異なります。それは，Webの多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにと
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
AutoDev｜AI エンジニア「Devin」に驚いていたら、もう Microsoft が「AI駆動開発」ツールを用意し始めてたって話 - Qiita
AutoDev｜AI エンジニア「Devin」に驚いていたら、もう Microsoft が「AI駆動開発」ツールを用意し始めてたって話ポエムAI 概要 まず、本記事の背景ですが、本記事を書く数日前に、「Devin AI｜話題の世界初 "完全自律型" AIエンジニア「Devin」の公開内容の全訳」 という記事を書きました。 ありがたいことに、フォロワーも少ないのに記事公開後のたった３日間程で 1万超の閲覧（View） をいただけました（YouTube の解説動画も公開3日目で１万回再生を突破しました）。 「AI の進化もすごいし、みんなのアンテナもすごいなぁ」という思いに浸りながら、ふと海外の AI 界隈の記事を漁ってたら、なんと 「Microsoft が自律型 AI ソフトウェア開発ツールを作ってるらしい」 という記事を発見しました。「ツール」と呼ぶよりは、「ソリューション」の方が近いので
ウェブアクセシビリティハンドブック｜ましじめ株式会社
本ハンドブックは、WCAG 2.0（JIS X 8341-3:2016）の達成基準をもとに すべての利用者がウェブサイト利用できるようにするためのアクセシビリティ向上の具体的な指針と実践的なアドバイスを提供します。 はじめに ウェブアクセシビリティとは 運用時のウェブアクセシビリティの取り組み 開発時のウェブアクセシビリティの取り組み ウェブアクセシビリティ試験 ウェブアクセシビリティ試験の流れ ウェブアクセシビリティ方針（サンプル） ウェブアクセシビリティ検証結果（サンプル） ウェブアクセシビリティ検証試験実施ページリスト（サンプル） 参考 実装の参考 ツールの参考 達成基準（適合レベルA,AAを解説） 1. 知覚可能の原則 代替テキストのガイドライン 【A】非テキストコンテンツの達成基準 時間依存メディアのガイドライン 【A】音声だけまたは映像だけ（収録済み）の達成基準 【A】キャプシ
NotionでPWAアプリの開発を実現するノーコードツール「NotionApps」の使い方！ - paiza times
今回はNotionのデータベースを活用して、PWAにも対応したWebアプリ開発ができるノーコードツールをご紹介します！ このサービスはNotionデータベースの情報を取得したり、更新・追加などがアプリ側から簡単にできるのがポイントです。ノーコードでさまざまなロジックも構築でき、自分がイメージしたアプリを素早くカタチにできます。 面倒なサーバーの準備も不要なため、誰でも簡単にアプリを開発して公開できます。ご興味ある方はぜひ参考にしてください。 【 NotionApps 】 「NotionApps」の使い方！ まずはサイトの上部にある【Create your app】ボタンをクリックして、無料のユーザー登録を済ませておきましょう。 メールアドレスとパスワードを入力したら【Sign up】ボタンをクリックします。 以下のようなダッシュボード画面が表示されたら準備完了です！ 「NotionApps
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp
コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
HTML, CSS, JavaScriptの標準の仕様書はどこにあるのか
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは - ICS MEDIA
文字拡大されても怖くない レイアウト作りのコツ
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
Postmanでつくる決済システムの非同期処理テスト
生成AI で思い通りのサイトを出力しよう - Qiita
おもちゃ箱のようなアプリBaaaaのUI/UXが凄すぎた件｜Yusui Hoshino
CookieとWeb Storageの仕様を比較する
Tailwind CSSを使う時の疑問と解決方法
タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG
Webやアプリの日本語を読みやすく折り返す「BudouX」。GoogleがGitHubで公開
Design for the web without Figma
UIUXデザイナーが「GPT4o」を活用してウェブサイトをつくってみた
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita
ブラウザ/ Browser
3DボクセルをWebGLで企業サイトに組み込んだ際の考察過程
RemixでWeb標準を学んだ1年間 / First year with Remix
最近のUIデザインのテクニックを解説！ より使いやすいボタンをデザインするときのポイント
「このアーティストが好きな人はこっちも好きかも」をマップで示してくれる「Music-Map」
MisskeyのUI設計 | gihyo.jp
フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本
2023年版！エンジニア必見のチートシート集 - Qiita