ブラウザの小数点以下のピクセル(サブピクセル)レンダリングまとめ / masuP.net
意図せずに出てしまった小数点以下のピクセル(以下サブピクセル)で表示ミスしてしまったので、2014/06/05時点での私が用意できる最新ブラウザ※におけるレンダリングされ方についてまとめてみました。 ※Chrome(35.0.1916.114), Firefox(29.0.1), Opera(22.0.1471.50),Safari(7.0.4(9537.76.4)),IE(11.0.9600.17031), mobile safari(7.0),Android Chrome(34.0.1847.114), Androidブラウザ(4.2.2-FJLjpkdi.20131219.1833),Chrome,Firefox,OperaはOSX上のもの、IEは仮想環境(modernIE)上のものです。 ※2014-06-06 15:20 FirefoxにおけるRetinaディスプレイ時のレンダリ
珍しいCSSプロパティたち - Qiita
あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
![[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1756c6abf56af6fcc3bd951dc8836bd403779c8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060501.png)
IEでもキレイ！ブラウザ上でアウトライン（縁取り）を表現する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は縁取りされたテキストをどのブラウザでも、とくにIEでもキレイに表示させる方法をご紹介いたします。 HTML <p class="outline">LIFE IS GOOD</p> HTMLはこちらを使っていきたいと思います( ˘ω˘)☝ CSS 以下、CSSを使った方法を３つ紹介いたします( ˘ω˘)☝ 1. テキストストロークを使う方法 -webkit-text-stroke-color: #000; -webkit-text-stroke-width: 1px; 比較画像 テキストストロークでの方法はキレイに表示されるものの、webkitしか対応していないため他のブラウザでは白い文字になってしまいます( ˘ω˘)☝ 2. テキストシャドウ使う方法 text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px
CSS3のtransformを使ったフォントの変形
CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文に使うのは無理があるが、見出しなどには良さそう。特に@font-faceで気軽に変更できない(してもあまり効果的ではない)日本語の見出しには面白い試みなんじゃないかと思ったが、一番綺麗にしたいIE8で残念なので微妙。 Verdana Narrow? Demo: Verdana Narrow 単純に細くしたいブロックでtransform: scaleX(num);を使えば良い。 .narrow { -webkit-transform: scaleX(0.8); -moz-transform: sca
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
