知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説

2024/03/21 27 users CAP CSS フォント 相対単位 単位

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 下記は... 続きを読む

【大炎上】イラストAIサイト「NovelAI」明確に絵描きの敵だった（danbooru という無断転載サイトを学習データに利用）

2022/10/04 219 users Danbooru novelAI 絵描き 大炎上 学習データ

NovelAI @novelaiofficial @NilaierMusic Since we are training on Danbooru, it also learns character names and their visuals. You can prompt for "masterpiece portrait of smiling rem, re zero, caustics, textile shading, high resolution illustration" and get this: pic.twitter.com/2wqDmAxCJa 2022-09-2... 続きを読む

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

2022/06/07 387 users height font-size width マージン CSS

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility ... 続きを読む

Chrome 95のデベロッパーツールの新機能が便利！vh, vw, rem, emなど、CSSの単位を簡単にオーサリング

2021/10/25 15 users デバッグツール デベロッパーツール オーサリング CSS 単位

先週リリースされたChrome 95のデベロッパーツールに搭載された新機能が便利なので、紹介します。 最近の新機能だと、Flexboxのデバッグツール（紹介記事）やCSS Gridのデバッグツール（紹介記事）などがありますが、Chrome 95ではCSSの単位（vh, vw, rem, emなど）を簡単にオーサリングできるようになりました。 New CS... 続きを読む

CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方

2021/10/07 328 users CSS コンテナ単位 相対単位 コンテナクエリ コンテナベース

CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新し... 続きを読む

Template Literal Types で「単位を持つ数値」の文字列型をきれいに扱いたい

2021/03/10 10 users Template Literal Types 単位 数値

(この記事には一部うまくいってない部分が残ってるので、解決し次第追記します) ブラウザの二次元上の座標を計算するコードを書いていると、 px, rem, flex などの数値が入り乱れて、それらを文字列で管理してると扱いが難しくなります。また、ブラウザの DOM API は、コンテキスト次第で string | number みたいなノリ... 続きを読む

CSSの単位remの正しい使い方 - Qiita

2019/12/26 9 users Qiita CSS root ユーザビリティ 正しい使い方

CSS Advent Calendar 201918日目に空きがあったので埋めます。 QiitaやGoogleでremと検索すると、間違った使い方をしている記事がたくさん出てきます。 remはroot emの略！ って分かってるならRootを潰すな！ rootはユーザー設定により変動するかもしれないものです。 ユーザビリティを考えるなら、きちんとユーザーの設... 続きを読む

【CSS】font-sizeの使い方！pxやrem、％などの使い分けも解説 | creive【クリーブ】

2018/12/07 18 users クリープ creive font-size CSS 解説

「文字の単位が複数あって、結局どれを使えばいいのかわからない。」 「文字単位のそれぞれの特徴がよくわかっていない。」 文字サイズの単位にこのような感想を感じた人は、htmlの学習を始めたばかりの人には多いのではないでしょうか？事実、一つのサイトに複数の単位が使われている時などは、「なぜこの単位なの？」... 続きを読む

margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス

2018/11/27 234 users padding margin Calc コリス レスポンシブ

Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記... 続きを読む

[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート | コリス

2018/07/20 29 users コリス font-size return CSS ＩＳ

// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is ... 続きを読む

CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem | コリス

2018/07/09 131 users コリス フォントサイズ CSS 複利計算 深い階層

フォントサイズの指定によく使用される単位は、相対値で指定できる単位が人気です。中でも、親要素に相対的なemより、常にルートに相対的なremの方が使い勝手がよいでしょう。emを使用すると複利計算になるため、深い階層の子要素...記事の続きを読む 続きを読む

px, %, em, rem, vw, vhなど、CSSの異なる単位が互いにどのように変換されているかが分かる便利ツール | コリス

2018/03/07 86 users ビューポート コリス CSS 相対単位 単位

絶対単位のpxをはじめ、%, em, remなどの相対単位、vw, vhなどのビューポートの幅と高さに基づいた単位などが、お互いにどのように変換されているかが分かる便利ツールを紹介します。 CSS unit conver ...記事の続きを読む 続きを読む

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ | コリス

2018/01/30 162 users コリス コンポーネント ナビゲーション Sass float

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった... 続きを読む

日産、Mobileyeの自動運転プラットフォームに正式参加――クラウドソースのリアルタイム地図搭載へ | TechCrunch Japan

2017/04/25 16 users Mobileye 日産自動車 日産 ＢＭＷ 路上

今日（米国時間4/25）、MobileyeのREM（ Road Experience Management）プラットフォームが再び大きな成功を収めた。日産自動車がREMの開発と採用を助けることで合意した有力自動車メーカーとして3社目となった。このプラットフォームは路上のユーザーの自動車から匿名で収集された情報をベースにリアルタイムで更新される精密な地図を作成する。 日産は BMW 、 Volksw... 続きを読む

[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス

2017/02/09 322 users Calc メジャーブラウザ コリス センタリング グリッド

pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関... 続きを読む

CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ | コリス

2016/09/23 409 users コリス UIコンポーネント CSS 単位 アイコン

CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units ... 続きを読む

Bootstrap 4 alphaの主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用 | コリス

2015/08/20 55 users alpha Sass コリス less Bootstrap

2015年8月19日（Bootstrap誕生4周年）にリリースされた、Bootstrap 4 alphaの主な特徴を紹介します。 IE8のサポート終了、Sassに移行、CSSの単位はremとem採用など、かなり変更されています。 Bootstrap 4 alpha 上記の公式ブログに主な特徴が掲載されていたので、ざっと意訳しました。 LessからSassに移行 コンパイラにはlibSassを使用。... 続きを読む

Elixir のリスト内包表記でクイックソート - Qiita

2015/07/18 42 users クイックソート Elixir Qiita マッピング http

Elixir にはリスト内包表記という記法があり、これを使うとリストに対して 任意の条件でフィルタリング 別の値へのマッピング というよくある操作を簡潔に記述できる。 http://elixir-ja.sena-net.works/getting_started/18.html 例 iex> for n <- 1..10, rem(n, 2) == 0, do: n * n [4, 16, 36,... 続きを読む

[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline | コリス

2015/06/03 70 users コリス グリッド CSS 見出し タイポグラ

見出しや文章など、テキストの読みやすさを重視して設計されたレスポンシブ対応のグリッドを実装するスタイルシートを紹介します。 Sassline Sassline -GitHub Sasslineはテキストが読みやすく、美しいタイポグラフィを実現するために開発されたもので、ブログでも企業サイトでも開発中のプロトタイプでも利用できます。単位には「rem」を使っており、ベースラインのグリッドからタイポグラ... 続きを読む

px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス

2014/11/27 105 users GitHub コリス フォントサイズ Framework 単位

Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。 最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。 Schema UI Framework Schema UI Framework -GitHub 「rem」の詳しい説明は、以前の記事をご覧ください。 フ... 続きを読む

フォントサイズをremで指定する。（emとの比較） | バシャログ。

2014/10/06 69 users macky RWD フォントサイズ バシャログ まえ

こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継... 続きを読む

CSS3からの新しい単位「rem」をIE8でも利用できるようにするスクリプト -REM unit polyfill | コリス

2014/04/10 89 users コリス font-size スクリプト フォント 単位

当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。 それは「rem」はIE8をサポートしていないこと。 ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部フ... 続きを読む

無難にやっていきたいのであれば，ゲームクリエイターは辞めるべき――Mighty No.9で勢い付く稲船敬二氏に聞く“ゲームを作る”ということ - 4Gamer.net

2013/11/14 54 users 稲船敬二氏 Mighty No.9 4Gamer.net

無難にやっていきたいのであれば，ゲームクリエイターは辞めるべき――Mighty No.9で勢い付く稲船敬二氏に聞く“ゲームを作る”ということ 編集長：Kazuhisa カメラマン：増田雄介 1234→ 4Gamerが，最後に稲船敬二氏にオフィシャルな話を聞いたのは，2012年9月7日のこと。遡ることおよそ1年前，氏が小説「REM」を発表したときだ。その後も，comceptからのリリースや，たまにお... 続きを読む

Mr.ChildrenがYouTube公式チャンネル　新曲はiTunes、Amazon MP3でも配信 - ITmedia ニュース

2013/05/29 18 users Mr.Children YouTube iTunes 新曲

Mr.ChildrenがYouTube公式チャンネル　新曲はiTunes、Amazon MP3でも配信 Mr.ChildrenがYouTubeに公式チャンネル。新曲「REM」のほか、「しるし」「くるみ」「Tomorrow never knows」など20曲のプロモーションビデオを公開している。 Mr.Childrenが5月29日、YouTube公式チャンネルを設置した。配信限定でリリースした新曲「... 続きを読む

ナタリー - Mr.ChildrenがYouTube公式Ch開設、PV一挙20曲フル公開

2013/05/28 98 users Mr.Children ナタリー ロックチューン 桜井和寿

Mr.ChildrenがYouTube公式チャンネルを本日5月29日に開設。同チャンネルにて新曲「REM」のビデオクリップが公開された。 「REM」はデジタルシングルとして本日から配信がスタートした、桜井和寿（Vo, G）の強烈なボーカルが印象に残るロックチューン。PVは先日ショートバージョンが公開され、そのダークで不思議な世界観が話題を集めていたが、今回はフルサイズで視聴することができる。 さら... 続きを読む