サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ホームニュース一覧デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策 デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策 目次 はじめにデジタル庁デザインシステムを採用するメリット最新のアクセシビリティの国際規格であるWCAG 2.2の達成基準86項目のうちの43項目で「適合」または「適合が容易」にサンプルコードをコードスニペットで提供、すぐに活用可能よくあるアクセシビリティの課題とデジタル庁デザインシステムを活用した解決策（1）具体的なアクセシビリティの性能について：視野狭窄の当事者による閲覧に対応視野狭窄を考慮したアクセシビリティ1：「操作対象から離れた重要なコンテンツの変化に気づけない」問題と解決策視野狭窄を考慮したアクセシビリティ2：「右端にある要素に気づかないことがある」問題と解決策視野狭窄を考慮したアクセシビリティ3：「右
10年くらい前は、1年後を予測することは簡単でした。しかし、現在はAIの登場により1年後に何が起こるかさえ予測することはほぼ不可能と言えます。 この先どうなるかは誰にも分かりませんが、現在AIがWeb制作の仕事にどのような影響を与えているのか、またこれからどのような変化が起きるのかを考察した記事を紹介します。CSSの変数を使ったデザインシステムの構築、AIにテキストベースの情報を提供するアクセシビリティ、プログレッシブ・エンベデッド・メディアの出現など、すでに変化が起きているものもあります。 Six bets on web development in the era ofAI by Valeria 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1.SEOは依然として重要 2. プログレッシブ・エンベデッド・メ
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アプリケーション開発者が安心して使える機
Chrome 137で追加された、CSSの新しい機能7個を紹介します。 今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制御できる新しいプロパティもサポートされるなど、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New inChrome 137Chrome 137 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if else文の条件付きでCSSの値を設定できるif()関数 reading-flowとreading-order
はじめに こんにちは、普段Ubie で症状検索エンジンユビー(https://ubie.app/)の開発をしている江崎です。 最近、Cursor エディタやGitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの連携はまだまだ課題が残っていました。そこで社内エンジニアである sosuke とともに、Ubie Vitals というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有します。 目次デザインシステムと開発の現状課題 MCP サーバーの登場UbieUI MCP の構築 デモ テキストだけでUI 実装が可能に デザイナーの壁打ち相手としての可能性 今後の展望デザインシステムと開発の現状課題Ubie では「Ubie Vitals」というデザインシステムに則って
You can use theseSVG based loading icons (also known as spinners, throbbers, loaders) to visually indicate when content is loading or data is being fetched. Theseanimations have been curated from a variety of sources and all have MIT License. Therefore, they can be used commercially without restrictions andit requires no attribution.
Devographicsは2024年12月16日（米国時間）、JavaScriptの利用動向を調査した年次調査「State ofJavaScript 2024」の結果を発表した。 同調査は、2024年11月13日～12月10日にオンラインで実施され、JavaScriptを開発に利用する1万4015人から回答を得た。回答が多かった上位5カ国は、米国（15％）、ドイツ（8％）、フランス（7％）、イギリス（4％）、ポーランド（3％）。日本からは150人が回答した。 同調査の目的はWeb開発エコシステムにおけるトレンドを把握し、開発者の技術選択を支援することだ。レポートでは、2024年のJavaScriptエコシステムの全体像をさまざまな角度から示している。調査結果は、回答者の属性、言語機能、ライブラリ、他のツール、使用用途、リソースといったカテゴリー別に報告されている。 調査結果のハイライトは
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 人は見た目が9割 皆さん一度はこの言葉を耳にしたことがあるのでしょう。内面がどれほど素晴らしくても、外見がそれに見合わないと、なかなか本当の価値を認めてもらえないものです。 この話は人間だけでなく、アプリケーションにも当てはまります。どれだけ内容が素晴らしくても、見た目がイマイチだったり使い勝手が悪かったりすると、ユーザーに敬遠されてしまいます。(私は以前ネ⚪︎フリからア⚪︎プラに切り替えたのですが、使いにくく感じたため、すぐに元のサービスに戻しました)エンジニアの皆さん、優れた技術力を持ちながら、デザインが原因でユーザー離
& how to analyze design choices without jumping to conclusions Over the years, I have had many encounters withJapanese websites — beit researchingvisa requirements, planning trips, orsimply ordering something online. Andit took me a loooong while to get used to the walls oftext, lavish use of bright colors & 10+ different fonts that sites like this one throw in your face: Hankoya — a website
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフーTechBlog こんにちはお久しぶりです。Web標準黒帯（ヤフー内のスキル任命制度）の岡部和昌（@kzms2）と申します。 今回の記事はありがちな「たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる」だけではなく以下の考えのもと、まとめた記事です。 岡部が「使うケースがある・覚えておくべき」と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載 自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明 つまり2020年に実装されたものを中心に、有益でオススメでき
API for Web Icons Including icons is harder thanit should be.SVGBox allows you to add icons to your project by usingsimple tags. The idea behind the service is that including icons should be assimple as copy and paste.It's free and icons are delivered overCloudflare CDN, the sametechnology that powers CDNJs's 190B+ monthlyrequests . Explore Iconsets
「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 Oneline - Dark Mode usingCSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
Abstract This almost class-lessCSS library turns yourHTML document into a website that looks like a LaTeX document. Write semanticHTML, add <link rel="stylesheet" href="https://latex.vercel.app/style.css"> to the <head> of your project and you aregood togo. The source code can be found onGitHub at https://github.com/vincentdoerig/latex-css. Getting Started Add theline <link rel="stylesheet"
SVG形式のファビコンを設置しようつ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ クリエイティブなファビコンを設置しようSVG ファビコン設置方法1.SVG 形式のファビコン用画像を用意グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくても OK。正方形であればどのサイズでもきれいに表示されます。今回は Illustrator を使って 32x32px のものを用意しました。SVG 形式で保存します。 2.HTML ファイルに記述あとはこれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
