[B! WEB][font] cyber_snufkinのブックマーク

【第3弾】少しのコードで実装可能な15のCSS小技集

2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！目次スムーズスクロールスクロールスナップスクロールすると要素を固定画像をトリミング CSSで計算式を書くテキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避するテキストに波線を引くテキストの上に記号を表示表のセルの幅を統一する入れ子になったリストもカウントするフォームのプレースホルダーの文字色を変更しましまのラインメディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応

cyber_snufkin 2019/05/17

リンク

Google Fonts + 日本語を使用して、Webサイトやブログがどのように表示されるか試すことができるツール -Fonty | コリス

2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。登録

cyber_snufkin 2018/11/05

リンク

WebFont の WOFF2 対応によるサイズ最適化 | blog.jxck.io

Intro Safari 10.0 から WOFF2 がサポートされており、これをもって IE 以外のメジャーブラウザではサポートが揃いつつある。本サイトは WOFF 形式での Web Font を提供しているが、 WOFF2 形式では WOFF よりも 12% 程度圧縮率が高いため、本サイトでも WOFF2 に移行することとした。フォーマット変更による効果について解説する。 WOFF File Format 2.0 本サイトでは、 Noto Sans CJK から必要なフォントのみを抽出したサブセットを、 WOFF 形式で読み込む構成を取っている。 Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io その後、必要な文字が増えフォントファイルを更新することにしたが、当時対応していなかった Safari が WOFF2 対応を始めているこ

cyber_snufkin 2018/02/14

リンク

CSSで知っておきたい、フォントサイズ指定の単位のすべて

フォントサイズを*「14px」*のようにピクセル指定するのは、ホームページの文化が広まっていった1997年頃からずっと続いてきた伝統のようなものです。しかし、20年前とは違って、Webデザインを行う環境も変わってきたので、HTMLやCSSの中でやみくもに「px」を指定するのは考え直したほうがいいのかもしれません。実際のところ、フォントサイズやボックスサイズを指定するときに、ピクセル以外の単位で指定することのほうが多くなってきました。それではなぜ、「px」でフォントサイズを指定するのに問題が発生してしまうのでしょうか。今回は、CSSで知っておきたいフォントサイズ指定の単位について、「px」を使うことで生じる問題についても触れながら解説します。20年前のWebスタンダードを脱し、今日のWebの基準に合わせていくために、正しい知識を確認していきましょう。 CSSでフォントサイズ（font-s