The Largest Library of Open-Source UICommunity-built library of UI elements. Copy as HTML/CSS, Tailwind, React and Figma.
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preline UI -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Preline UIの特徴 Preline UIのUIコンポーネントとページレイアウト Preline UIの使い方 Preline UIの特徴 Preline UIは、ユーティリティファーストのTai
この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください! 2024/05/07 追記 最新の登壇スライドバージョンはこちらです。 登壇時の様子がYouTubeに上がっているのでよろしければあわせてご覧ください。 はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかな
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く