[B! em] hayasi-nのブックマーク

CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem

フォントサイズの指定によく使用される単位は、相対値で指定できる単位が人気です。中でも、親要素に相対的なemより、常にルートに相対的なremの方が使い勝手がよいでしょう。emを使用すると複利計算になるため、深い階層の子要素はサイズ指定が複雑になってしまいます。ルートに指定したサイズをベースに、px単位でremの指定値を一覧表示してくれる便利なChromeの機能拡張を紹介します。毎回計算していた人には、かなり嬉しいツールだと思います。

hayasi-n 2018/07/09

リンク

[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要

レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。はじめに pxとemとremの検証方法検証1. html要素でfont-sizeを指定検証2. ブラウザでズームが可能検証3. ブラウザでフォント設定が変更可能検証の結果はじめにあなたはMedia Queriesで使う単位にpx, em, remのどれが一番

hayasi-n 2016/03/29

リンク

Web制作者にオススメの定規・ルーラーの無料ツール、半透明のパネルで単位にpx, emが使える優れもの！ -Linear

シンプルなデザインで使いやすいOS X用の定規・ルーラーの無料アプリを紹介します。 Web制作に役立つよう設計されており、単位はpxだけでなくemでも利用できます。イメージとしては、ノギスのように測る感じです。 Linear App Linear -GitHub Linear Appの特徴 Linear Appの使い方 Linear Appのダウンロードとインストール方法 Linear Appの特徴 Linear Appは、Web制作者のための定規アプリで、完全無料のオープンソースで開発されています。ブラウザの機能拡張ではなく、OS X用のアプリです。 Chromeのデベロッパーツールや他のアプリ上でもオーバーレイで動作します。複数の定規を作成できます。作成した定規をそのまま複製することができます。カラーはダークとライトの2種類。定規の単位は、pxとemに対応。ショートカット