Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります

訳注 (2013-01-28): 現在 :visited の対策は他のブラウザでも行われており、Firefox に限ったことではありません。対応状況については MDN の :visited の項をご覧ください。 原文: privacy-related changes coming to CSS :visited (Christopher Blizzard 著) 本件の詳細については David Baron の投稿、該当するバグ、Mozilla Security Blogの投稿 をお読みください。 訳注: Mozilla Security Blogの投稿は「CSS によるブラウザ履歴の漏えいを防ぐ取り組み」に日本語訳が公開されています。 長年にわたり、CSS の :visited セレクタ はユーザの履歴を取得する経路となっていました。このセレクタ自体は特に危険ではありませんが、JavaSc

• Layout • Paint • Composite align-content Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together. align-items Changi

こんばんは。 CSS Property Advent Calendar 2013 8日目のエントリーです。 非常に地味な display のお話です。 なお、flexboxの話をし出すと、それだけで1エントリーくらいの分量になってしまうので、css2.1までの話をします。 flexbox関係は昨日担当の富田さんがまとめてくれてるので、そちらを参考にしましょう。 flexboxの旧仕様、改定仕様、現行仕様の一覧 « LINE Engineers’ Blog では、まずブロックとインラインを理解するためにボックスモデルから復習していきます。 ボックスの種類 w3cの仕様書では先に「ブロックレベル要素とブロックボックス」次に「インラインレベル要素とインラインボックス」といった感じで説明されていますが、ちょっと趣向を変えて、ブロックとインラインを対比しながら見てみます。 ブロックレベル要素とインラ

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 作者: 吉田真麻出版社/メーカー: 翔泳社発売日: 2015/11/03メディア: 大型本この商品を含むブログを見る どんな本なの？ HTMLとCSSの初心者〜中級者向けの本です。HTML・CSSの基本的な文法と一般的なタグ・プロパティ（a要素とかmarginプロパティとか）を多少知っている方であれば読めます。 イメージ的には、超初心者本の次に読むような感じ。既にHTML/CSSの最低限の知識はあって既存コードの修正やコピペはできる、けどまだいちから何か作るようなコーディングは難しい・・・というようなレベル感の方が、いちからサイトを作る経験をしながらもっと知識や理解を深めていく、というような内容

一昨日こんな記事を書きました。 yoshiko.hatenablog.jp そして今日「WWW WATCH」さんからこんなアンサーエントリを頂きました。 hyper-text.org ありがとうございます！！！感謝です🙏 エントリの中で、テーブルの視覚整形モデルについての仕様にリンクがはられていました。 その中に答えと思われる仕様の記述を見つけて「なるほど！！」って思ったので書いてみます！ Tables in the visual formatting model 日本語訳: 視覚整形モデルにおけるテーブルの扱い この参照すべき仕様の場所が見つけられなかったので教えていただけてとてもありがたいです＞＜ WWW WATCHさんでは、 「table の 'width' と 'height' にパーセンテージ値が指定された場合は、"table wrapper box" 自身ではなく、"tabl

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f