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

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

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

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

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

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

ブログの文字が小さすぎなのでフォントサイズを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はメディアクエリとグリッドのみ。 新しくなった... 続きを読む

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サイズを図ったり、フォントサイズを図ったりなんていうツールは大量にありますが、ブラウザで見えてるもの全てを測るなんてものは今までに無いでしょうね。 いや、ないですよね？え？ある？ とりあえずご紹介。 見えているものを測るとはどうい... 続きを読む

[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス

2015/07/22 394 users ビューポート vmin vmax コリス レスポンシブ

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは... 続きを読む

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説 | コリス

2015/06/05 386 users コリス レスポンシブ 相違 CSS 単位

CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの... 続きを読む

ASCII.jp：CSSの修正が捗る「リアルタイムコーディング」とは｜Web制作が3倍速くなるChromeデベロッパーツールの使い方

2015/05/11 68 users Chromeデベロッパーツール CSS Sources 修正

Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第2回は、Webページの修正をリアルタイムで反映する「Elements」パネル、「Sources」パネルの使い方を説明します。 ※本記事は執筆時点で最新のChrome 40を使用しています。 細かい修正の手戻りにもさくさく対応したい！ コーディングが完了したあとで、「やっぱりフォントサイズを大きくして」「下の余白を... 続きを読む

Amazon、手持ちの紙書籍をスキャンしてデジタル化するアプリ、Kindle Convertをリリース - TechCrunch

2015/02/03 265 users Kindle TechCrunch フォーマット 愛書家 展望

Amazon、手持ちの紙書籍をスキャンしてデジタル化するアプリ、Kindle Convertをリリース 愛書家にとって、大量の紙の書籍をいずれKindle版に買い替えなければならないという展望は憂鬱なものだ。そこでAmazonは新しい選択肢を用意した。Windows向けのKindle Convertというソフトは紙の書籍をKindleのフォーマットでデジタル化できる。フォントサイズの調整、手持ちの... 続きを読む

本文と見出しのフォントサイズを数学的にバランスの良い比率でデザインする -Type Scale | コリス

2014/12/03 124 users コリス 小見出し 見出し 比率 本文

本文と見出し、中見出し、小見出しのフォントサイズはどのように決めてますか？ 一つの方法として、一定の比率でそのサイズを決めるのも有りです。というか、そうやってよく決めてました。 さまざまな比率をベースにして、本文や見出しの各フォントサイズを検討できるオンラインサービスを紹介します。 Type Scale 左の各項目は、下記のようになっています。 Base Size ベースにするフォントサイズを入力... 続きを読む

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

2014/11/27 105 users rem GitHub コリス Framework 単位

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

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

2014/10/06 69 users rem macky RWD バシャログ まえ

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