「font-sizeの指定はpxとremどちらを使うべきか？」問題に対する回答
こんにちは。TAK(@tak_dcxi)です。 今回は SNS で頻繁に話題になる「font-size の指定はpxとremどちらを使うべきか？」問題について。 自分が観測している限りだと、 font-size の指定は px と rem どちらを使うべきか？ Web デザイナーはコーディングの知識があったほうがいいか？ jQuery はオワコンなのか？ 実装者はピクセルパーフェクトに拘らないとダメか？ h1 タグはどこに使うべきか？ あたりは四半期に一度は話題になっている感覚がありますね。 おそらくこの記事を読んでいる方や、もしくはタイムラインにこの記事の Twitter カードなんかが流れてきてウンザリしている方も多いことでしょう。僕も正直「またこの話題か…」という感想ですが、頻繁に話題になるということはそれだけ意見が割れているということなので、自分なりの見解をまとめるためにもこの記事
CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相
CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSでpxとemとemの各単位がどのように機能するか アクセシビリティに関する考慮事項 どの単位をどこで使用すればよいのか どの単位がベストなのかが明らかでない場合 簡単にできる小技とメンタルモデル ボーナス: remを使用すると便利なテクニック はじめに C
失敗例で学ぶアクセシビリティ（WCAG 2.1）
はじめに 突然アクセシビリティ筋を鍛えたくなったのが先月の話です． WCAG 2.1の日本語訳を全部読めばムキムキになれるのではと思い，先頭から読み進めて1ヶ月かかり読了しました． 中でも面白かったのは「失敗例」という項目です．ここには良くないWebページの実装例がたくさん書かれており，「あ〜初心者ならやりがちだよね〜」という例から「え…？職場のコードでやらかしてるんだが……？」みたいな例まであり，マジで死にたくなりました． 私の学習メモとして，またはアクセシビリティの入門資料として，あるいは過去の過ちへの禊みそぎとして，やらかしそうな失敗例を， WCAG 2.1のすべての達成基準に対して 思いつく限りまとめようと思います． レベル（A，AA，AAA）の低い順に記載しますので，下に行くほど発展的な内容になります． 失敗に気づいたら 「WCAG2.1 達成基準の番号 十分な達成方法」でググり
220720_ウェブアプリのダークモード対応
ウェブアプリのダークモード対応 「見やすさ」「わかりやすさ」の観点で考える PWA Night vol.41 ～Design〜 2022-07-20
自分のデザインをチェック！色覚シミュレーションの方法いろいろ - Design Color
もくじ 【色覚シミュレーションの前に】色覚とは Webサイトでシミュレート ブックマークレットでシミュレート フリーソフトでシミュレート スマホアプリでシミュレート Photoshopでシミュレート 【見やすいデザインを作るために】まずはモノクロで視認性チェック 今見ているページをモノクロにできるChrome拡張機能「(un)clrd」 Photoshopでモノクロにして確認する 【色覚シミュレーションの前に】色覚とは 色覚シミュレーションの方法をお伝えする前に、ざっくりと「色覚」についてご説明します。色覚には「P型」「D型」「T型」「A型」「C型」の5つのタイプがあり、それぞれ以下のような特徴があります。 P型：赤い光を主に感じる錐体が無い、あるいは分光感度がずれている D型：緑の光を主に感じる錐体が無い、あるいは分光感度がずれている T型：青い光を主に感じる錐体が無いため、青色付近の識
Stark: The suite of integrated accessibility tools for your product design and development team
Designers, developers, product managers, and accessibility experts at 30,000+ companies use Stark’s suite of integrated accessibility tools in their daily product development cycle. Join them today! Continuous Accessibility for your entire teamGet real-time reports that help manage accessibility at scale without slowing down the velocity of your team. Stark gives your up-to-date insights into the
Chromatic Vision Simulator
About "Chromatic Vision Simulator - Web Edition" This software is a color vision experience tool for color normal individuals that can simulate three most common deficient types of congenital color vision, i.e. Protanopia, Deuteranopia and Tritanopia. Although this is a web-application coded with HTML5 + Javascript and is based on the "Chromatic Vision Simulator" smart-phone edition, it works with
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
