CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

2024/11/21 249 users width CSS マージン かなり 左右

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能な... 続きを読む

CSSのメディアクエリでcalc()が使用できるの知ってた？

2024/06/12 9 users ビジター CSS メディアクエリ 比較 多く

CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較...記事の続きを読む 続きを読む

line-heightのハーフ・レディングを打ち消す"calc((1em - 1lh) / 2)"をCSS変数に定義しておくとよい – TAKLOG

2024/05/29 163 users フォントサイズ TAKLOG line-height 単位

lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片... 続きを読む

z-indexの値は「無限」と「2147483647」どちらが強いの？

2024/02/05 22 users z-index infinity 無限 前面 常識

先日、前面に必ず出したい要素のz-indexにはcalc(infinity)をつけるとよい旨の情報を見ました。 確かに「無限」を指定すれば単純なz-indexの値の勝負では勝てそうな気がします。一方でz-indexマニアの間ではz-indexの上限値は2147483647[1]というのが常識になっています。ではこの「無限」と「2147483647」のどちらが強... 続きを読む

CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する

2024/01/26 103 users infinity z-index CSS ライブラリ 最前面

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで　z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。 infinity は calc() の中で使用で... 続きを読む

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

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

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

【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita

2023/07/12 425 users Qiita CSS Math 単位 関数

はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるように... 続きを読む

CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説

2023/03/23 146 users cos tan Sin CSS 三角関数

CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric fun... 続きを読む

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

2022/05/26 451 users ビューポート iOS LVH svh Safari

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc... 続きを読む

CSSの知っておくと便利なテクニック！ ラッパーが異なるコンテンツのツラをcalc()関数のパディングで揃える

2022/03/24 14 users パディング ヘッダ づら ラッパー CSS

メインのヘッダは固定幅、記事のヘッダは流動幅、ラッパーが異なるコンテンツのツラを揃えるCSSのテクニックを紹介します。 下記のようにヘッダのロゴと記事のタイトルを揃えたい時はありませんか？ CSSのcalc()関数を使用した動的なパディングを使用すると、簡単に実装できます。デスクトップの大きいスクリーン、スマ... 続きを読む

CSSは確実に進化している！ 変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック

2022/03/17 265 users 変数 ロジック 論理演算 CSS ループ

一昔前のCSSと比較すると、ここ数年でCSSはかなり進化しました。calc()で数式が扱えるようになり、変数、条件分岐、ループ、論理演算なども使用できます。CSSでロジックをどう記述するのか、ブログラミング言語的な実装を紹介します。 Writing Logic in CSS by Daniel Schulz TwitterでCSSがプログラミング言語なのかと... 続きを読む

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

2022/01/21 14 users フォントサイズ FON CLAMP unit Sass

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

この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック

2021/11/30 211 users ブッダ Flexbox CSS 成り行き ラッパー

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer T... 続きを読む

CSSの数学関数min()、max()、clamp()の基本的な使い方

2021/11/04 162 users CLAMP font-size ＭＡＸ min CSS

IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な... 続きを読む

CSSの数学関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説 | コリス

2020/05/28 182 users CLAMP コリス ＭＡＸ min Firefox

CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの数学関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フ... 続きを読む

CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール | コリス

2020/05/22 19 users 可変 ワイドスクリーン コリス 最小値 font-size

レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。 font-sizeは自由に定義できるので、日本語... 続きを読む

calc()以外にもCSSの数学関数が新しく増える！今度はサイン・コサイン・タンジェント sin(), cos(), tan() が追加 | コリス

2019/03/04 48 users コサイン タンジェント cos コリス tan

CSSの数学関数と言えばcalc()関数、多くの人が便利に使用していると思います。 そんなCSSの数学関数がどうやら増える方向で動いているようです。 CSSワーキンググループのメンバーであるBenjamin氏のツイートによると、CSSに多くの数学関数を追加することで合意した、とのことです。 The CSS Working Group agreed this ... 続きを読む

CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ | コリス

2018/12/13 471 users コリス CSS テクニック 参考 ナビゲーション

2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴ら... 続きを読む

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

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

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

CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

2018/11/14 326 users コリス CSS 関数 デバイス レイアウト

レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれ... 続きを読む

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

2018/03/23 84 users メジャーブラウザ コリス フォントサイズ ビューポート幅 関数

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

CSSの素晴らしいアイデアが満載！2017年スタイルシートを使ったテクニックのまとめ | コリス

2017/12/15 382 users コリス CSS テクニック 素晴らしいアイデア 満載

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、... 続きを読む

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス

2017/06/14 917 users minmax コリス CSS 関数 width

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッド... 続きを読む

ソニーCSLら、AIを使った大規模データ解析サービス「CALC」を提供開始 - CNET Japan

2017/05/30 10 users エンターテイン ISID クウジット ソニーCSL 人工知能

電通国際情報サービス（ISID）、ソニーコンピュータサイエンス研究所（ソニーCSL）、クウジットの3社は5月30日、人工知能による大規模データ解析サービス「CALC（カルク）」の提供を開始したと発表した。 CALCは、大規模で多様な実データから高精度な因果モデルを推測し、現状を把握してビジネスの施策決定を支援する独自のAI技術。ソニーCSLが、ソニーグループのエレクトロニクス、金融、エンターテイン... 続きを読む

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

2017/02/09 322 users rem メジャーブラウザ コリス センタリング フォントサイズ

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