Zero-Runtime CSSのLinariaを触ってみた
こんにちは、spacemarketのフロントエンドエンジニアの8zkです。 みなさん、Linariaを知っていますか？ LinariaはZero-Runtime CSSの一種です。 今回は個人的に気になったCSSライブラリ、Linariaを触ってみたのでその感想などを書いていきたいと思います。 GitHubはこちら。 現時点でstar数は1万を超えていますね。 Linariaの特徴 こちらがLinariaの特徴です。 * Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build * Familiar CSS syntax with Sass like nesting * Use dynamic prop based styles with the React bindings, us
vanilla-extractを使ってみた感想
個人的にvanilla-extractを試していたのでその感想などを紹介できたらと思います。 要点 CSS modulesっぽくかけて型があるのがとても良い 採用したらメリットが大きそうなケース オブジェクト形式でも違和感なくかける人 CSSに型が欲しい人 CSSでNestを制限したいなど秩序をもたらしたい人 CSS modulesっぽくかけるのがとても良い 個人的に従来のピュアなCSSやCSS modulesのように別ファイルでCSSを管理するのが好みなのでこの書き方ができるのはメリットでした。 特にCSS modulesのようにファイルを管理できるのが良いです。 import { style } from '@vanilla-extract/css'; export const headerStyle = { wrapper: style({ padding: '16px', disp
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning 2024.04.13 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。 CSS Anchor Positioning は 2024 年 4 月現在 Chrome Canary でのみ利用可能です。 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floati
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ
CSS から React コンポーネントを生成する MistCSS
CSS から React コンポーネントを生成する MistCSS 2024.03.23 MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。 昨今のフロントエンド開発では、CSS の手法が多様化しています。特に React での開発では以下のような手法があげられます。 グローバル CSS（エントリーポイントで 1 つの CSS ファイルを読み込む） CSS Modules CSS in JS Tailwind CSS CSS の手法に新たな選択肢が加わりました。それが MistCSS です。MistCSS は CSS in JS になぞらえた JS from CSS というコ
【CSS】三角アイコンと矢印アイコンをつくる | 125naroom / デザインするところ（会社）です。
.arrow_s { position: relative; display: inline-block; padding-left: 12px; color: #333; text-decoration: none; } .arrow_s:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #333; position: absolute; top: 50%; left: 0; margin-top: -6px; }
Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
Tailwind CSSを半年使い込んで分かった便利な点 + 最新動向 - Qiita
概要 Tailwind CSSを半年使い込んで分かった便利な点/注意点を説明する 最新v3.0のアップデート内容を紹介する はじめに 本記事では非常に便利なCSSフレームワークであるTailwind CSSについて説明します。 筆者はフロントエンドエンジニアとして仕事/趣味でこの半年いくつかのサービスやツールを実装しましたが、そのいずれでもTailwind CSSを利用しました。その中では素のCSSを書くことはほとんどありませんでした。例えば最近リリースされたDockpit liteというツールでもTailwind CSSをフル活用しています。 以下ではこうした経験の中で見えてきたTailwind CSSの特徴、便利なポイント、注意点をご紹介していきます。 また最後に最新のv3.0のアップデート内容を紹介します。 Tailwind CSSとは Tailwind CSSの概要 Tailwin
【第5弾】少しのコードで実装可能な10のCSS小技集
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
ネガティブマージンの使いどころ
はじめに こんにちわ、フロントエンジニアの川上です。今回は自分も初めて見た時に使い方に戸惑ったCSSのネガティブマージンについて記事を書かせていただきます。 ネガティブマージンとは、CSSのmarginにマイナス値を設定することを指します。大抵は正の数をしてしますが、負の数を設定するとどうなるのでしょうか。 特にCSSでは、この書き方でなければ問題が解決できないということは、ほとんどありません。CSSをコーディングする人によって書き方は無数に存在しますし、どの書き方でも見た目は一緒になります。しかし、CSSのプロパティの数やエレメントの数が少ないほど、見やすく理解しやいすいコードになり、それは良いコーディングのひとつであると考えます。 ネガティブマージンも良いコーディングのための書き方と捉えていただけると良いと思います。 ネガティブマージンの使いどころ ネガティブマージンの使いどころとして
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
CSSだけで画像にモザイク処理を施すデザインのサンプル | 1 NOTES
CSSだけで画像にモザイク処理を施すデザイン方法の紹介です。 CSSでモザイクというと、単純なぼかし処理というイメージですが、今回はブロック型のモザイクというのか方眼型のモザイクというのか、はたまたピクセルモザイクなのか、タイル調モザイクかマス目モザイクなのか、全くわかりませんでしたので検索してみました。 そのタイプのぼかし処理は英語では「pixelization」、日本語では「ピクセル化」。 または、そのまま「モザイク」という言葉がそれを指すようです。 それをCSSだけでの実装を紹介してくれているサイトさんが見つからなかったので、CSSだけでは できそうでできないのか、以前気になっていたのですが、これは以外に簡単にできました。 ※画像ファイルはそのままですので、セキュリティ面やプライバシー保護を目的の利用には全く使えませんのでご注意下さい 画像にモザイク処理を施す（ピクセル化）CSSだけ
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
TailwindCSSを使いたい理由
はじめに TailwindCSSはJITモードが搭載されてからずっと使っています。 私自身、Tailwindを使うことで大幅に実装効率があがっているので、私なりのTailwindを使いたい理由を書いてみたいとおもいます。 と、そのまえに、、、 TailwindCSSを使うには学習が必要です 例えばシンプルな角丸のボタンです。 <button class="rounded border border-sky-400 text-white font-bold px-2 py-1 bg-sky-300 disabled:border-gray-300 disabled:bg-gray-300 disabled:text-gray-100">ボタン</button> <button class="○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□×○△□
覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal
覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい
CSS-in-JSのパラダイムシフト
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
CSSでこんな実装ができるとは！ 美しい光がきらり✨とボーダーに沿って回転するボタン -Button Shimmer Tricks
