ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Orbitの使い方 Orbitの特徴 Orbitは、サークル・放射状のラジアルUIを実装するために設計された初の汎用CSSフレームワークです。CSSの機能（cos(), sin()など）を使用してサークル・放射状のレイアウトを簡単に実装できます。 ランディングページをはじめ、ナビゲーションに使用したり、ダッシュボードや円形データなどで、ユニークで視覚的に魅力的で直感的なレイアウトを作成できます。 .orbit CSS class CSSの三角関数（sin()

乗りこなせ！ モダンフロントエンド 新しい擬似クラス:has()⁠⁠、:is()⁠⁠、:where()を使いこなそう ［CSS Modern Features no.1］ 本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームの麦島です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズ フロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載していきます。モダンな仕様の紹介・普段使っているライブラリのコア部分で何が行われているのかの解説・ハンズオンなど、さまざまな内容でお届けする予定です。 CSSの進化 本連載での最初のコンテンツは「CSS Modern Features」です。 CSSの表現力は年々新しい仕様の策定や実装とともに進化しています。従来であれば複雑なCSS定義が必要であったものが簡潔に表現できたり、Ja

株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ

Webサイトのエクスペリエンスを改善するCSSの便利なテクニックを紹介します。 基本的には一行のCSSですが、より良くするためにCSSを追加して複数行のものもあります。 CSS One-Liners to Improve (Almost) Every Project by Álvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ビューポート内のコンテンツの幅を制限する 2. テキストのサイズを大きくする 3. 行間のスペースを広げる 4. 画像のサイズを制限する 5. コンテンツ内のテキストの幅を制限する 6. 見出しをよりバランスよくする 7. ページスタイルに合わせたフォームのカラー 8. テーブルの表を分かりやすくする 9. テーブルのセルとヘッダのスペース 10. アニメーションと動

CSS LABORATORYはCSSだけで作ったアイコンを提供する無料マテリアルサイトです。矢印のCSSアイコンやローディングアニメーションなど、実務でよく使うものをメインに掲載しています。コピペOK！無料で簡単に使用できます。

Glassmorphism（グラスモーフィズム）は、2021年に入ってから注目されている新しいデザインのトレンドです。 Mac OSのBig Surにも採用されており、半透明で背景がぼやけて見える磨りガラスのようなエフェクトが特徴的ですね。 PinterestやDribbbleなどのサイトでも、グラスモーフィズムを採用したUIデザインが多くみられるようになってきました。 Glassmorphism – Pinterest 今回の記事では、グラスモーフィズムのエフェクトをCSSで実装する方法を紹介していきます！

23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。 実際の動作は、デモページでご覧ください。 See the Pen Gradient Overlay with border-image by coliss (@coliss) on CodePen. HTMLはシンプルです。 テキストのh1要素と背景を設定したdiv要素があるだけです。

粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 今回はWebコーディング時に迷いがちな単位の使い分けについて自分なりにまとめました。 よく議論が起こるテーマですが、先にお伝えしておくとコーディング時の単位に正解は無いです。 案件によってルールが引かれてる場合もありますし、基本的に適材適所使うことが前提です。 あくまで様々な方の意見や情報を見たうえで、一つの考え方としてまとめた形になっているということをご了承ください！ 当記事の結論 フォントサイズ：rem要素の大きさ、marginやpadding：rem親要素にあたる包含的な

CSSブレイクポイント、メディアクエリの最小値は？ Webサイトのブレイクポイントの決め方はどうするべきか。 ブレイクポイントの意味との決め方。320pxも現存している。 Webデザイナーやコーダーを悩ます、ブレイクポイントの決め方。 Googleアナリティクスを調べていると、320pxからのアクセスは意外と多く、ユーザビリティ的に無視できない。 320px以下へのレスポンシブデザイン。 スマホの元祖である、初代iPhoneの横幅は320pxだった。それが基準となっているのか、想像以上に320pxからのアクセスがある。 つまり、ユーザーへ配慮したレスポンシブ対応のためには、320pxでのデザインが求められる 400px以上へのレスポンシブデザイン。 また、375pxがブレイクポイントの最小の目安となった時期もあったが、その後に412pxや414pxのデバイスが登場した。 なのでいまでは、ブ

メディアクエリの一般常識あらためて、メディアクエリ、ブレイクポイントの現在地をまとめておきたい デバイスの振り分けとして～sp tb dtAppleのiPhoneをはじめ、GoogleのAndroidなど、スマートフォンの普及が画期となっている Web作成側ではスマートフォン sp、タブレット tb、パソコン（デスクトップ dt）で はっきりくっきりすっきり あるいは 無難に、Webのサイトやページが表示されることが要求されている デバイス画面の細分化～spY/X tbY/X dtデバイス別の振り分け、大中小画面（ディスプレイ）ごとのWeb表示を細分化すると スマートフォンの縦画面 spY、横画面 spX、タブレットの縦画面 tbY、横画面 tbX、デスクトップの画面 dt このように仕分けできる

CSS でマウスホバーした時に、ホバーした要素ではない別の要素にアクション・変更を加える方法を紹介します。 例えば、似たボタンが並んでいる中で、ホバーしたボタン以外を半透明にしたい時などに便利な方法です。 擬似クラスの hover を使った方法 擬似クラス :hover を使った方法 否定疑似クラス :not を使った方法 自動開閉のアコーディオン風メニューの実装方法 擬似要素 :hover の組み合わせで実装する方法 この手のアクションは jquery などで実装しがちですが、CSSだけで実装が可能です。 この投稿では　hover を使った方法や :not を使った方法を紹介します。 擬似クラス :hover を使った方法 まずは ：hover の組み合わせで実装する方法を紹介します。 ベースの HTML は次の通りです。 <ul> <li>あああああ</li> <li>いいいいい</l

NNCの中里です。ご無沙汰しております。スタッフばかりに記事を書かせてしまい、自分自身で記事を書くのは実に2年ぶりになります。 この2年間キャンプへ行ったりキャンプへ行ったりと色々とありました・・・がその辺りは割愛して、今回はコンテナクエリについてお話をしたいと思います。 https://caniuse.com/css-container-queries コンテナクエリが主要ブラウザに対応してから2ヶ月ほど経った（2023年4月現在）ので、「弊社でもそろそろ導入しますか」と緩い感じで調べ始めました。 まず最初に感じたのは「メディアクエリとの違い」や「使い分け方」が分かりづらかったので、その辺りから説明したいと思います。 説明はいいから文法が知りたい！という方はこちらからご覧ください メディアクエリとコンテナクエリ まず「コンテナクエリって何？メディアクエリと何が違うの？」という方に説明する

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下

lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法

見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、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.

モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。

HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。