色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利
テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guidelines（WCAG） に準拠した色のコントラストになっているかすぐにチェックができます。キーボード・ショートカットを設定できるので手軽に色のコントラスト比の確認ができてかなり便利です。 こんなツールです ツールバーのアイコンをクリックするとアプリが出てきます。 文字の色と背景の色を選択するとWCAGの評価基準であるAA、AA+、AAA、Failのいずれかの判定を表示してくれます。評価と合わせてコントラストの数値も表示してくれます。各スコアの意味はアプ
メディアクエリで「em」を使うと基準になるのは何のサイズ？
メディアクエリを書くときの単位って、何を使ってますか？ 僕はいまのところpxしか使ってないんですが、先日、「PX, EM or REM Media Queries? 」という記事を読んで、メディアクエリで使うemやrem単位について、逆に混乱してしまったので、自分でも仕様やブラウザの挙動を確かめてみました。 結論から言うと、emもremもSafariで挙動の違いがあるので、pxがクロスブラウザで一番安定した挙動をします。 いったいどういうことになっているのか？ 僕自身、めちゃくちゃ混乱してしまったので整理してまとめておきます。皆さんをさらなる混乱に陥れないことを願いつつ。。。 メディアクエリでemを使う際のブラウザの挙動 メディアクエリでem単位を使うと、そのサイズはブラウザのフォントサイズ設定に相対的になると仕様に書いてあります。なので、ブラウザでフォントサイズの初期値が16pxの場合、
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
