CSSの関数って、便利なものが多いですよね。calc()が登場したときも衝撃でしたが、最近ではattr()関数がパワーアップしたり、レスポンシブ対応に必須のmin(), max(), clamp()関数、ライトテーマとダークテーマのlight-dark()関数、ほかにも:is()や:where()といった疑似クラス関数、sin(), cos(), tan()などの三角関数もCSSで使えます。 そして2025年、これまでとは全く違う新しい関数がCSSで使えるよう開発が進んでいます。新しい関数はカスタム関数で、自分オリジナルの関数をCSSで定義して使用できます。 CSS Custom Functions are coming by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのカスタム関数とは C
美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Generator – CSS & SVG Export ツールを紹介する前に、なぜグラデーションがくすんでしまうのか。 PhotoshopやFigmaなどで幅広い色相のグラデーションを作ろうとすると、グラデーションの中央にグレーのデッドゾーンができてしまうことがよくあります。 左: グレーがあるグラデーション、右: グレーを回避したグラデーション このグレーのデッドゾーンを避けるには、グラデーションに使用するカラーは大きなカーブ（直線はダメ）を描いて補間する必要があります。 そしてここで紹
HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。
![CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6fd81d279134a62bc4badc391345ceb7051e7ee5/height=288;version=1;width=512/https%3A%2F%2Fv17.ery.cc%3A443%2Fhttps%2Fmamewaza.com%2Fimg%2F1466995529664s.jpg)
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Let’s say you need a gradient border around an element. My mind goes like this: There is no simple obvious CSS API for this.I’ll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding around i
東急グループのデジタル技術による街づくりプロジェクト、「URBAN HACKS」の電車内広告が「面白い！」「おしゃれな広告」と話題です。CSSの記述に見える文字列をよく見てみると……？ 「分かる人には分かる」広告が話題 話題になっているのは、Webページの装飾を設定するためのプログラミング言語「CSS」風の文字列が黒い背景に並んでいる電車内広告。「エンジニア デザイナー募集」の記載もあるため求人広告とは分かりますが、コード部分の意味は一見しただけでは分かりません。 CSS部分をよく見ると…… しかしよくよくコードを読んでみると、「skill: 100%;」「org-style: flat;」「work-space: unset;」など、実は職場環境を紹介する文になっているのです！ 「フラットな社風で働く場所は自由、スキルを100%生かせる仕事です」といった感じかな……？ 別バージョンでは「
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
First, we need to constrain the element's width; by default, elements in Flow layout will expand horizontally to fill the available space, and we can't really center something that is full-width. I could constrain the width with a fixed value (eg. 200px), but really what I want in this case is for the element to shrinkwrap around its content. fit-content is a magical value that does exactly this.
Simple tooltips made of pure CSS. Github Project Download CSS Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS. See how easy it is: Positioning For positioning, use data-balloon-pos attribute with one of the values: up, down, left, right, up-left, up-right, down-left or down-right.
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
記事内に広告が含まれています。This article contains advertisements. AppleのSystem 6のUIをCSSで再現できる「System.css」が公開されています。詳細は以下から。 Apple(旧Apple Computer)が、Classic Macintosh向けに1984年から1991年まで開発していたSystem OSはモノクロームデザインながら、現在のmacOSの基礎となっていますが、このSystem OSのUIをCSSで再現できるライブラリ「System.css」が公開されています。 System.css is a CSS library for building interfaces that resemble Apple’s System OS which ran from 1984-1991. Design-wise, not mu
x Did you like it? Well, then please consider making a donation :) This small site is a result of a hard-working process of one person. Server and domain have been paid with my own funds. All new feature development occasionally happens in the after-work hours only and driven by its owner's desperate passion. If you do like this site or it has helped you by any means, you can support this resource
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
