タグ

2019年10月17日のブックマーク (3件)

  • Webブラウザにおける文字のアンチエイリアスの現状の最適解|dwango creators' blog(ドワンゴクリエイターズブログ)

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

    Webブラウザにおける文字のアンチエイリアスの現状の最適解|dwango creators' blog(ドワンゴクリエイターズブログ)
  • font-smoothingで文字の野暮ったさとサヨナラして、font-smoothingの謎とコンニチハした - Qiita

    font-smoothingで文字の野暮ったさとサヨナラして、font-smoothingの謎とコンニチハしたCSSDesign 元はと言えば CSSでアニメーションを付けたページを作成している際に、SafariとChromeでアニメーション作動時に何故か文字が一瞬「ピョッ」っと太さが変わってチラつく、ということがありました。 解決策を探っているうちに Safari,Chromeで文字が太くなる現象の解消 font-smoothingでOSXでのフォントのレンダリング方法を調整する こちらの記事に辿り着き、実際に適用してみると見事に問題が解決しました(当にありがとうございますm(_ _)m)。 ということで一件落着ー。めでたしめでたしー。 嬉しい副作用 しかし、それはもとより何となくページ全体に漂っていた野暮ったさが無くなったのです。同じフォントを表示しているはずなのにワンウェイト落とし

    font-smoothingで文字の野暮ったさとサヨナラして、font-smoothingの謎とコンニチハした - Qiita
    massava
    massava 2019/10/17
  • CSSで見出し固定+レスポンシブ対応の表を作成

    2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト! 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車

    CSSで見出し固定+レスポンシブ対応の表を作成