Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック
SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UI Components With SVG and CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. SVGで切り抜きを実装 2. SVGでセクションの見出しを実装 3. SVGでリンクの下線を実装 4. SVGでテープを実装 終わりに はじめに SVGはアイコンやイラストだけでなく、わたし達デベロッパーが忘れがちなパワーをたくさん持っています。CSSと比較して、SVGを使用することが理にかなっているユースケー
これは便利！ Tailwind CSSのチートシート、v3対応、すべてのクラスとプロパティ・値を参照および検索もできる優れもの
Tailwind CSS v3がリリースされ、ますます注目されているTailwind CSSのチートシートを紹介します。 Tailwind CSSに使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利なチートシートです。 Tailwind CSS Cheat Sheet Tailwind CSSとは Tailwind CSSのチートシート Tailwind CSSとは Tailwind CSS（Tailwind CSS -GitHub）はユーティリティファーストのCSSのフレームワークで、汎用的なクラスを組み合わせてWebサイトやスマホアプリのレイアウト・コンポーネントを実装します。 たとえば、メールの入力欄だと下記のように記述します。 <input class="block appearance-none bg-white placeholder-gray-
Tailwind CSSが初めての人でも簡単！ UIコンポーネントを実装するチュートリアル -FlowBiteがかなり便利
先日紹介した「FlowBite」（紹介記事）を使用して、Tailwind CSSでUIコンポーネントを実装する方法を紹介します。 Tailwind CSSのユーティリティクラスで実装された基本コンポーネントがFlowBiteに用意されているので、初めての人でもコピペで簡単に実装できます。 Tailwind CSS Components Tutorial – How to get started with FlowBite by Zoltán Szőgyényi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに FlowBiteの準備 FlowBiteとTailwind CSSをCDN経由でインクルードする方法 FlowBiteでコンポーネントを探す FlowBiteのコンポーネントを実装する方法 Tailwind CSS
Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ
Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。 Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。 Flowrift Flowrift -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Flowriftは、Tailwind CSSで実装されたUIコンポーネントのライブラリです。通常のHTMLに、Tailwind CSSのデフォルト構成で機能します。コンポーネントを組み合わせて、ページレイアウトを作成することもできます。 Flowrift ライセンスが明記されてい
テスト優先度をあげたくなる実話 - フロントエンド版 -
Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS
CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方
CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりできます。 ビューポート単位では、同一ページだとビューポートの基準値は同じなので、こういうことはできません。 C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
