Magic UIUI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
IEサポートやめます！で使えるようになったもの
去年IEのサポートがきれ、やっとIEを気にせず制作ができるようになりましたね。 でも結局、IE対応が板につきすぎて、便利なプロパティを使い損ねたままコーディングしていませんか・・・？ ということで、「IE対応しなくていいなら、これも使えるよ！」をまとめていきたいと思います！ 自分用のメモも兼ねているので、網羅はせず、よく使いそうなものに絞っています。 (逆に「IEだめだったんだ、気にせず切り捨ててた・・・」みたいな要素やプロパティも省いてます。) IEなしなら使えるcss 改めて知ったので使っていきたいな〜 accent-color, caret-color accent-colorでフォーム要素(inputなど)の色がまとめて指定できます！ (caret-colorはキャレットのの色) フォームって、別のシステムが入る場合、デザインのトンマナを完全に合わせらないと思うのですが、 アクセン
任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」
CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。 大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality
便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer
1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 - Qiita
#はじめに スムーススクロールは、同じページ内を滑らかに移動させる機能のことです。 何か項目をクリックすると、画面がぬるっと動くWebサイトをよく見かけると思いますが、あの動きを実現するためのものです。 サイトに動きをつける際、個人的にこれまでは主にJavaScriptを使っていたのですが、スムーススクロールはHTML/CSSだけで実装できると知ったので、実際に試してみました。 #ソースコード・動作 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Scroll</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box top" id="top"> <span class="text">Top</sp
CSS カスタムプロパティによる流動的フォントサイズ
はじめに 画面幅に対して流動的にフォントサイズを変化させたい場合、vw などの単位を用いると実現できます。たとえば font-size: 5vw; を指定すると、幅 960px ではフォントサイズは 48px、幅 320px では 16px になります。しかし、320px で 16px は小さすぎるので 32px にしたいとなると、計算が必要になってきます。 この計算方法や流動的フォントサイズのさらなる詳細については、以前登壇したときの資料をご覧いただきたい 👇 資料にもございますが、計算して CSS を出力してくれるアプリも作っています 👇 Sass の mixin もあります 👇 今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と
CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。 Custom Scrollbars In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールバーの構成要素 スクロールバーのデザインをカスタマイズする カスタムスクロールバーのスコープを指定する スクロールバーのデザインをカスタ
W3Schools Online Web Tutorials
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
Vueでちゃんと作っていくにはElementUIよりBulmaの方が良くないか - Qiita
Vueのアドベントカレンダーをウォッチしていてて、Nuxt.jsであるアプリを作っている途中です。 色々な記事でElementUIが取り上げられているので、私も使ってみましたが正直微妙になってきたので止めることにしました。 単体でレスポンシブのサイトは簡単に作れない。 ElementUIはUIパーツのライブラリです。 レイアウトも部品として影響していますが、提供している部品の数はさほど多くありません。 そして、モバイル向けに配慮した機能は全く提供されません。 そのため、レスポンシブ対応するためには、一からやるか他のCSSフレームワークを組み合わせる必要が出てくると思います。 タイポグラフィ、レイアウトなどが簡単にできるわけではない ElementUIはあくまでもUIライブラリです。 私はコレを最初に見た時、Bootstrapみたいだから簡単にきれいなレイアウトが整うんだろうなと思っていまし
便利なWeb開発向けツールまとめ｜かずたか
※こちらの記事が「先月もっとも多く読まれたノート」の一つに入りました。ありがとうございます！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 ✔︎この記事の内容 実務、学習のため問わず、Web制作をするに当たって便利なツールと使いかたをご紹介します3年ほど独学でWebサービスを作り運用したり、フリーランスとしてお客さまのサイトを作る中で、様々なツールを見つけました。 初心者の方ほどこうした作業効率が上がるツールを知っていた方がいいと思うのですが、周りにエンジニアがいないため情報が流れてこなかっ
Mobile Animation Tuning
自分がMobile Animation�をチューニングしていた時に気を付けていたことです
Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit
ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください（大泣きしながら）。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
商用でも完全に無料！ プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual
CSS Selectors Cheatsheet - FrontEnd30
CSS セレクタの使い方がまとめられたチートシート -CSS selectors cheatsheet
styled-component + CSS Grid - Speaker Deck
