知っておくと便利なCSSの単位: ビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 前回はフォントに基づく相対単位でしたが、今回はビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を紹介します。 Relative length units based on the viewport -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: vwとは CSSの単位: vhとは CSSの単位: vbとviとは、ブロックとインライン CSSの単位: lvh, svh, dvhとは ビューポート単位の解説動画
知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる
CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直
CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」
今年になってもCSSの進化が止まりません、むしろ加速しています！ IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ そしてCSSの新機能として、単位を変数として使用できる「Variable Units（変数単位）」が登場しようとしています。 たとえば、--baseを8pxにし、4倍にしたい時はcalc(4 * (var(--base)))と記述していましたが、4--baseで32pxになります。 The Future of CSS: Variable Units by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Var
VanillaMasker
VanillaMasker A pure javascript input masker View on GitHub Download .zip Download .tar.gz What's this It's a pure JavaScript mask input. Now you can use a simple and pure javascript lib to mask your input elements, without need to load jQuery or Zepto to do it. Let's live a lightweight client-side world using micro libraries as VanillaMasker is! Don't worry about where this will work, because thi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
計算が苦手な文系のための コーディング単位計算ツール
