メルカリのクローンサイトを作りながら、React・Tailwind CSSが学べる本です。

*2021 6/11追記　『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC

ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得

v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ

今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは

Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t

こんにちは、システム開発課の田畑です。 今回は社内システムへTailwind CSSを導入した話を書きたいと思います。 シナプスでは顧客情報などを社内システムで管理しています。 この度社内システムを新しい環境へ移行することになりました。 それに合わせて、現状のデザインはそのままで、CSSフレームワークを導入を検討しようということになりました。 いくつかCSSフレームワークを検討した中からTailwind CSSを導入することになりました。 Tailwind CSSとは Tailwind CSSの記述方法 利点 デメリット Bootstrapとの違い メニュー部分を実際に調整してみる @applyを使わない方法 使ってみて感じたこと Tailwind CSSとは Tailwind CSSの公式サイトは以下です。 tailwindcss.com Tailwind CSSはユーティリティファース

どうもこんにちは塚本です！ 本日はクラスレスなCSSフレームワーク， new.cssを見つけたので紹介したいと思います． new.css new.cssとは，下記の標語の通り… A classless CSS framework to write modern websites using only HTML. モダンなWebサイトをHTMLだけで作ろう〜☆というフレームワークになっています． クラスフル <div class="row"> <div class="col-md-6"> <p class="text-center mt-3"> クラスである程度デザインしていける！ </p> </div> </div> 例えば，BootstrapやTailWind CSS 等のフレームワークではこのように クラスを指定してある程度デザインを作っていくと思います． クラスレス Bootstra

ここ数年の CSS の進化は目覚ましく、それにより新たな問題が起きるようになりました。Sass には与えられた引数のうち最小値を返す min() 関数と与えられた引数のうち最大値を返す max() 関数があります。 しかし、CSS にも標準で min() 関数と max() 関数が実装されたことにより、関数名の衝突が起きてしまいます。 色々なエラーとはいっても、普通に使う分には問題ありません。 .selector { width: min(1px, 2px); }これを Sass でコンパイルすると、 .selector { width: 1px; }となります。しかし、Sass では解釈できないような vw や vh 単位を使うとエラーが起きます。 .selector { width: min(1px, 1vw); }コンパイルすると、Incompatible units: 'vw' a

HTMLcss ブログをご覧の皆様こんにちは、デザイン戦略部のJKです。 googleがモバイルフレンドリーを提唱してからもはやレスポンシブ対応は必須になりましたが、レスポンシブ対応って悩ましいですよね。 各デバイスの代表的な端末の解像度に合わせて作ればよいのですが、ウィンドウ幅を縮めてテストを繰り返していると微妙な幅の時にレイアウトが崩れているのが気になってしょうがない、なんてことザラにあります。 width、height、font-size、padding、margin…上げていくとキリがありません。 今回はそんな中でも頭を悩ませがちなfont-sizeに焦点をあてて、clampというCSSの関数をご紹介します。 clampとは 最小値、基準値、最大値を設定して可変にすることができる関数です。 widthでいうmax-widthやmin-widthがイメージに近いです。 使い方としては

box-sizingを使用するとレスポンシブ対応が必要なサイト制作において、コーディングがスムーズになります。しかしbox-sizingは、一見どんな働きをしているのか分かりづらいプロパティです。 そこで本記事ではbox-sizingの働きや使い方を解説します。最後までお読みいただきますと、box-sizingの働きを理解して使いこなせるようになるため、ぜひ参考にしてみてくださいね。

フォーム項目の注釈説明をわかりやすくするツールチップ(tooltip)/ヘルプのCSSサンプルをまとめました。趣向を凝らしたデザインが素敵なウェブサイト・ブログが増えています。ただし、サイトは利用者が快適に操作するためのものであり、ユーザビリティが悪いサイトや項目説明が不足しているサイトは使いにくいです。 サイトの使い方を補足説明する方法として「ツールチップ(tooltip)」が挙げられるでしょう。 本記事ではフォームの中でも「ツールチップ(tooltip)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルにバルーンがポップアップするタイプのツールチップ(tooltip)CSSデザイン例。基本形のシンプルなバルーンツールチップ。Pure CSSで実装できる。See the Pen CSS Tooltip Magic by Envato Tuts+ (@tutsplu

CSSのFlexBox（フレックスボックス）で画像を横並びにしてレスポンシブに伸縮させる方法を紹介しています。 画像をレスポンシブに並べるSee the Pen CSS list tag design (display flex & flex wrap) by yochans (@yochans) on CodePen. 以下はFlexBoxで画像を横並びにさせるHTMLとCSSのサンプルコードになります。 HTMLはサンプル用に同じ画像を6毎連続して配置しています。 <div id="container"> <img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" /> <img src="https://1-notes.com/wp-content/uploads/2020/06/

こんにちは、弥生 Misoca チームでマークアップをする方のデザイナー @kanizmb です。 今回、約1年をかけて古の Bootstrap の撤去および CSS 設計手法の導入（FLOCSS 化）をやり遂げたので、これらの変更をどのように進めていったかについてお話しします。 どういった状況だったか Misoca ローンチは 2011年、当時最新であった Bootstrap 2.3.2 を用いて構築が始まりました。(*1) 当初は請求書の郵送に特化した非常にシンプルなサービスだったため、少しの上書きでスムーズに開発が進められ、Bootstrap のメリットを存分に生かせていたのだと思います。 しかし時は流れ、取引先管理、品目管理、外部サービスとの連携など、機能が増え続けるとどんどん綻びが出始めます。 設計方針もないままに野放図に差し込まれた CSS たちは、いつしか激しい詳細度バトルを