色、ムズ〜〜〜〜 - マルシテイア
本記事は、先日開催されたKyoto.js 19のために用意したLT資料に加筆したものです。 kyotojs.connpass.com こんにちは、天城です。 最近はWebGLで動画編集アプリを開発しており、Webでの色の扱いについて日々苦しんでおります。 この記事では、僕が最近知った色関連の小ネタを共有します。 目次 話題1: mix-blend-modeにaddがない そもそもBlendingって何？ Webでは基本的にsource-over compositingしか使われない Canvasではsource-over以外のCompositingが使える PDF Reference 一方その頃WebGLは…… 話題2: Display P3 CSS Color 4でDisplay P3が使えるようになった Display P3 CSS Color 4 CSS Color 4 で導入された
CSSの新機能、メディアクエリの新しいクエリ「update」がChrome 113で使用できるようになりました
2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。 新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。 CSS update Media Query 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 はじめに 「update」クエリの基礎知識 新しいメディアクエリ「update」を使用したデモ リソース はじめに CSSのメディアクエリは、Webサイトやアプリを表示されているデバイスに基づいて外観をコントロールできる強力なツールです。メディアクエリを使用すると、さまざまなスクリーンサイズや向きなどに対してレイアウトを最適化できます。 updateクエリは、デバイスのリフレッシュレートに適応することが
HTML で `<select>` 要素を `<hr>` でセパレートできるようになった
HTML Living Standard の5月2日付けの更新で <select> 要素の子要素として <hr> を含めることができるようになりました。 Proposal: Allow adding separator rows to <select> boxes using <hr> · Issue #3410 · whatwg/html Allow <hr> to be used inside <select> as a separator by annevk · Pull Request #9124 · whatwg/html 4.4.2 The hr element 4.10.7 The select element <select> 要素の中をグループ化する方法としては、従来から <optgroup> 要素が存在しますが、これは label 属性による可視ラベルの設定が必須なため
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
アクセシビリティを追求するデザイナー向けのFigmaプラグインを開発しました。｜梅本 周作 / ajike
「フォントの色だけじゃなくて大きさや太さを含めてアクセシビリティをチェックする方法を知らないですか？」 社内のデザイナーから、こんな質問が飛び出て新しいFigmaプラグインを開発しました。 Figmaプラグイン「Text Color Contrast Checker」 その名もText Color Contrast Checkerです。 フォントのサイズでWCAGのガイドラインをチェックする 今回は、このFigmaプラグイン Text Color Contrast Checkerができるまでのお話をしたいと思います。 プラグインのインストールはこちら そもそもアクセシビリティとは 私たちが担当するプロジェクトでは、高齢者や障害者もアクセスしやすい状況を目指す、つまり、アクセシビリティのガイドラインであるWCAGに対応できるようなサイトのデザインを担当することがあります。 そして、アクセシブ
The WebAIM Million (100万のホームページに対するアクセシビリティ自動検証) : 2023年の調査 | Accessible & Usable
テキストのコントラスト 上のテーブルが示すとおり、83.6%のホームページで、WCAG 達成基準 (AA) を満たさない低コントラストのテキストが見られます。 なお、各ページあたりで見ると、低コントラストのテキストのインスタンスは、平均して30.4箇所という結果になっています (2022年の調査では平均で31.7箇所)。 画像および代替テキスト 上のテーブルが示すとおり、58.2%のホームページで、画像の代替テキスト不備が見られます。 なお今回の調査対象では合わせて4,300万以上の画像 (1ホームページあたり平均43.4枚の画像) が検出され、このうち22.1%、つまり1ホームページあたり平均9.6枚の画像で、alt 属性の不備があるという結果になっています (alt があって属性値が空のものは除く)。その半数以上はリンク画像であり、スクリーンリーダーのユーザーにとっては、リンクラベルの
ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA
ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？ BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見
2023年モダンCSSの最新トレンド
Demo https://codepen.io/tonkotsuboy/pen/JjmYWmw レスポンシブ対応で、 画像の縦横比を変えたい aspect-ratio いろんなアスペクト比で画像を表示したい アスペクト比とは 従来: padding ハック .box::before { content: ""; display: block; padding-top: calc(100% * 9 / 16); /* 56.25% */ } @media (width <= 500px) { .box::before { padding-top: calc(100% * 3 / 4); } } 現在: aspect-ratio プロパティ .item { aspect-ratio: 16 / 9; } @media (width <= 500px) { .item { aspect-rati
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると
1000ページ超の大規模サイトのサイトマップを1分で作成する方法 - DESIGN JOURNAL - 株式会社モンスターラボ
こんにちは、情報アーキテクトの曽です。主に情報設計の部分を担当しています。 A.C.O.ではWebサイトのリニューアル案件を多く取り扱っているため、現状調査の一環として既存サイトのサイトマップ（サイト構造図）を作成するタスクが定期的に発生します。案件によってはサイトの規模が数百〜数千ページにのぼることも多く、手動で一つ一つのリンクを辿りながら作成する方法ではとても間に合いません。そのため、必然的に複数のアプリやツールを使って効率よくサイトマップを作ることになります。 情報設計業務の経験を重ねていく中で、もともと社内で確立されていたサイトマップ作成方法をさらに一歩進化させることに成功したので、今回はその方法をご紹介します。この方法のおかげで、数千ページ級のサイトであっても実作業時間1分足らずでサイトマップを作成できるようになりました。サイトマップ作成に手間取っている方がいたら、ぜひ参考にして
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
「使える人にだけ使わせる」 ~ マネーフォワード IDのログインUXから見るパスキー普及のポイント - r-weblife
ritouです。 いよいよドコモさんもパスキー対応が始まりましたね！いや、これを書いている時点ではまだです。 k-tai.watch.impress.co.jp それよりも、今回はマネーフォワード IDのパスキー対応に注目します。 corp.moneyforward.com (4/5追記) マネーフォワード側からも解説記事が出ていました。この記事で言いたいことが全部書いてあります。 moneyforward-dev.jp ブラウザのパスワードマネージャー機能を利用したパスワード認証のUX パスキー対応に触れる前に、マネーフォワードIDのパスワード認証のUXから見ていきましょう。 マネーフォワードの「メールアドレスでログイン」のフローを何も考えずに使うと、最初にメールアドレスを入れてからパスワード入力を求めるUXになっています。 このようなUXでブラウザのパスワードマネージャーの機能を使う場
『なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用』という記事について
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用 https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element この記事では、『なぜインライン要素・ブロック要素概念は依然として有用なのか』という記事（以下「元記事」といいます）の説明について見ていきます。 この記事の対象者 この記事は、ウェブ制作を学んでいる人や、「インライン要素」「ブロック要素」という用語の扱いに困っている人を想定しています。 はじめに： 結論 この記事の結論は次の2つです。 今日のHTMLから「インライン要素」「ブロックレベル要素」という表記はなくなった。 ある要素にどのような要素を入れるのかは、「インライン要素」「ブロック要素」という考え方を使わなくてもできる。 詳しく説明したいと思います。
2023年のCSSは0ランタイムにしたい - console.lealog();
したいよね？ 事の経緯としては、 とある新規プロジェクトで、技術選定をすることに 開発の土台はViteで、フレームワークはJSXが使えるやつに決まった さてCSSはどうやって書こうかとなる あれこれ考えて、とある方法に決めた というのをまとめた、まあポエムの域を出ないメモです。 CSS ModulesやらTailwindやらCSS-in-JSやら手法はいろいろあれど、どれが今の推しかっていう。 求めるもの 個人的に、CSSつまりはブラウザで表示されるUIをスタイリングするためのツールセットに求めるもの。 0ランタイムである 最終的に`.css`ファイルとしてブラウザで読み込まれる なんでもJSにしない CSSの書き味を損なわない だいたいのCSSセレクタが問題・制約なく動作する マークアップ部と1ファイルにコロケーションできる HTMLとCSSは同居させたい 非同期にロードできる JSと同
GPTが自社の情報を正しく学習するためにはWebサイトをセマンティックなHTMLでマークアップした方がよい説 | DevelopersIO
はじめに ChatGPTについて、日々さまざまな応用が提案されています。 そのChatGPTを試用している中で、質問に対する回答が誤っていることがあります。自社の情報をWebサイトで提供している企業として、どのようにすれば、GPTがより正確な自社の情報を学習するようになるのでしょうか。 ChatGPTに質問しつつ考えてみました。 事前調査 まず、Generative Pre-trained Transformer 3 (GPT-3)について調べてみました。 WikipediaのGPT-3に関する項目では、GPT-3 の事前学習データについて、次のように書かれています。 GPT-3の重み付き事前学習データセットの60%は、Common Crawlのフィルタ処理された版から取得されたもので、4,100億バイト対符号化トークンで構成される[1]:9。その他の情報源としては、WebText2からの
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Screen Sizes
https://twitter.com/h_okumura/status/1642442876381696001?s=12&t=x7236FCRuoR7kqtIQqZ_Og
https://twitter.com/ixkaito/status/1633742925485215745
Webアクセシビリティ学習リソースまとめ （2023年3月版）
