CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる

2023/10/24 84 users Calc atan2 CSS フォント 三角関数

CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算... 続きを読む

第3回　APCAを活用して文字の視認性を確保したデザインを実践する | gihyo.jp

2023/10/13 5 users gihyo.jp シミュレータ 視認性 ウエイト 精度

しかし、実際のデザインではこの表にないフォントサイズやウェイトを使いたい場合もあるでしょう。その場合には、シミュレータやルックアップテーブルを参照することで、より精度の高い確認が可能になります。 ルックアップテーブルでフォントサイズとウェイトから必要なコントラストを確認する シミュレーションの説明... 続きを読む

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator

2023/07/24 21 users CLAMP font-size CSS 関数 レスポンシブ対応

レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツール... 続きを読む

UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

2023/06/13 154 users マージン コンポーネント パディング 白銀比 バリエーション

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということがで... 続きを読む

最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator

2023/02/07 97 users CLAMP calculator ビューポート CSS 関数

フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠か... 続きを読む

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

2023/01/19 165 users CSS Flexbox SVG Web制作 可変

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニ... 続きを読む

CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか

2022/11/24 25 users デベロッパー CSS フロントエンド CLAMP レスポンシブ

UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的... 続きを読む

CSS コンテナクエリの準備はできてる？ 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました

2022/10/06 42 users ポリフィル アップデ ブラウザ 安定版 準備

コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントをはじめ、レスポンシブ対応のフォントサイズにも大活躍する新機能です。 そんなコンテナクエリが安定版のブラウザにサポートされ、ポリフィルも大幅にアップデ... 続きを読む

CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor

2022/01/31 225 users CSS CLAMP レスポンシブ対応 便利ツール 登場

Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォント... 続きを読む

CSS カスタムプロパティによる流動的フォントサイズ

2022/01/21 14 users FON CLAMP Calc unit Sass

今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と実装解説 デモとソースコード /** * Available vars: * @var --viewport-from: <number> - Number in pixels without the unit. Required if `--fon... 続きを読む

『アウター・ワールド』のフォントサイズがまたデカくなる。大作たちを悩ます字小さすぎ問題 | AUTOMATON

2020/03/10 10 users AUTOMATON Obsidian Fallout バッチ

デベロッパーのObsidian Entertainmentは3月5日、『アウター・ワールド』の新たなパッチで「フォントサイズの変更」機能を追加すると発表した。同作は昨年11月のパッチでもテキストサイズの拡大を実施したばかりで、今回の修正は二度目の対応となる。 本作はObsidianが手掛けた『Fallout: New Vegas』の遺伝子を色濃く受... 続きを読む

ブログの文字が小さすぎなのでフォントサイズをCSSで大きくしてみた - はるなぴログ

2018/07/13 71 users CSS fonts iPhone ロク 行間

はてなブログのテーマInnocentのフォントサイズ設定が小さい 一行の文字数をどのくらいにしたら読みやすいブログになるのか PCでの横書き表示は1行35文字までが読みやすい iPhoneでは一行15文字から21文字程度が読みやすい 行間や文字間隔についても考えてみる 外部CSSファイルを使用するメリット テーマInnocentのfonts... 続きを読む

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

2018/07/09 131 users rem コリス CSS 複利計算 深い階層

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

[CSS]知っていると便利な「calc()関数」の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など | コリス

2018/03/23 84 users Calc メジャーブラウザ コリス ビューポート幅 CSS

calc()関数を使用すると、レスポンシブ対応ページのレイアウトや要素の配置、ビューポート幅に基づいた相対的なフォントサイズの定義などが期待通りに実装できます。 Webページやスマホアプリの実装に役立つcalc()関数の使い方を紹介します。 calc()関数はOpera Miniを除くすべてのメジャーブラウザ（IEを含む）にサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 C... 続きを読む

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

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

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

フレンドファンディングアプリ、polcaのLPをトレースして気づいたこと。｜Shunichi Hasegawa｜note

2017/11/28 34 users Polca タイポグラフィ Sketch 備忘録的 Note

polcaのLPをトレースして気づいた事を備忘録的にまとめました。 トレース結果 文字について トレースした目的の一つに有名サービスのLPはどのようにタイポグラフィを定義しているのかを知りたいというのがありました。 今回のケースでは、14pxをhtml全体のフォントサイズの基準として、emでその他のフォントサイズを決定しているようでした。Sketchでトレースしていてなんかテキストがうまく重ならな... 続きを読む

Webデザインで使う数値をすぐに算出！マージンやフォントサイズのバリエーションを導き出すオンラインツール | コリス

2017/09/15 87 users グリッド 見出し コリス レイアウト さい

レイアウトのベースになるグリッドのサイズ、パネルやカードやボタンなどのサイズ、要素間に与えるスペースの段階ごとのサイズ、見出しや本文などテキストの階層ごとの文字サイズなど、Webデザインを設計する際に必要となる数値をサイ ...記事の続きを読む 続きを読む

なぜWordのデフォルトフォントサイズは「10.5」なのか？ - ねとらぼ

2017/05/28 505 users フォ デフォルト word 単位 Macユーザー

Macユーザーが増えてきた現在でも、文書作成ソフトのスタンダードであるMicrosoft Word。もはや使ったことのない人がいないレベルのソフトです。 ところで、 なぜWordのデフォルトのフォントサイズって「10.5」なんでしょう？ なんでそんな半端な数字？　1つ小さい10でも、1つ大きい11でもいいじゃないですか。そもそも10.5の単位って何だったんでしたっけ……？ というわけで、今日はフォ... 続きを読む

[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる | コリス

2017/03/10 134 users コリス ビューポート幅 CSS 記述 レスポンシブ対応

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。 例えば、768px以下はすべて1rem、1920px以上は2rem、その間はvwに対して変化する、という指定が簡単にできます。 Responsive font calculator ツールの使い方は、簡単です。... 続きを読む

注意書きや案内を「読まない人」は本当に読まない。フォントサイズを変えようが下線を引こうがとにかく読まない。そして「聞いてない！」と言う。 - Togetterまとめ

2017/02/09 491 users 正気 注意書き Togetterまとめ 常識 宣伝

世の中には正気を疑う程に救いようのない馬鹿と常識がない馬鹿がいてその人達に限って声が大きく攻撃的 なものだからあらかじめそれを回避しようと センスをかなぐり捨ててやけに丁寧すぎる案内や宣伝を作成 するもそれが普通の人には情報過多でうざったく感じられてしまい 肝心の馬鹿は文字を読まない。 続きを読む

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

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

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

見やすいサイトを作るときに最低限チェックしたい６項目 | UX MILK

2017/01/31 122 users UX MILK 見やすいサイト コンテキスト 6項目 行間

いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0 で... 続きを読む

[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size | コリス

2017/01/31 126 users コリス スクリーン ルート ビューポート幅 最小値

フォントサイズをレスポンシブ対応で変化させるには通常、スクリーンのサイズごとに数種類のフォントサイズを用意していると思います。 CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポー ...記事の続きを読む 続きを読む

フォントサイズ「px→％」表記一覧・早見表 - 人生は暇つぶし

2016/01/11 58 users 早見表 スポンサーリンク 機会 人生 PCサイト

2016 - 01 - 11 フォントサイズ「px→％」表記一覧・早見表 まとめ スポンサーリンク Tweet Webサイト制作において、フォントサイズは非常に重要ですよね。僕の会社では、フォントサイズを指定するとき、 PCサイトでは「％」 、 SPサイトでは「px」 で指定しています。 その際、％表示を計算するのが面倒くさいので、この機会にフォントサイズ「px→％」表記一覧・早見表を作成します。... 続きを読む

ブラウザで見えてる物全ての寸法を測る事が出来るトンデモなChromeエクステンション*ホームページを作る人のネタ帳

2015/11/15 76 users 寸法 ネタ帳 ブラウザ ホームページ 物全て

ブラウザで見えてる物全ての寸法を測る事が出来るトンデモなChromeエクステンション 2015/11/14 ツイート スポンサーリンク 普通に画像の寸法を測ったり、Divサイズを図ったり、フォントサイズを図ったりなんていうツールは大量にありますが、ブラウザで見えてるもの全てを測るなんてものは今までに無いでしょうね。 いや、ないですよね？え？ある？ とりあえずご紹介。 見えているものを測るとはどうい... 続きを読む