Mamba UI
Kickstart your next website in minutes Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS. Make the web your playground Easy to use UI elements based on Tailwind CSS Mamba UI is a toolkit for developers and designers to make creating interfaces easier. We have some of the most popularly used components to help you get started. Everything is modular and
prettier-plugin-tailwindcssを適用したらスタイルが壊れた話
皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではスタイリングにTailwind CSSを使用しています。 恥ずかしながら、これまでTailwind CSSを十分に活用するための環境が整っていませんでした。具体的には、Tailwind CSSのクラス名を書くところにリンターが適用されていなかったり、クラスの並び順がとても自由で開発に支障をきたしたりしていました。 そこで、今回prettier-plugin-tailwindcssをコードベースに導入しました。これは、言わずと知れたコードフォーマッターPrettier向けのプラグインで、Tailwind CSSのクラス名をいい感じに並び替えることでコードに少し秩序をもたらしてくれるものです。 コードフォーマッターの原則は、コードの挙動を変えないことです。そのため、理想的
これは覚えておきたい！ 左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方
モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。 ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 ※display: flex;が古いということではなく、モダンCSSだとラッパーは不要という意味です。 IEのサポート終了（6/15）も近づき、これからはIEを気にすることなく、モダンCSSを使用できます。マイクロソフト社でも6/15を待たずにIEを廃止してください、と通達しています。 参考: Don’t wait for June 15th! Set your own IE retirement date. たとえば、左揃えのリスト要素を中央配置にしたいとします。 HTMLは、下記の通りです。 <ol> <li>Foreword</l
Muuri - Infinite layouts with batteries included
what & why? Muuri creates responsive, sortable, filterable and draggable layouts. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable. You can build pretty amazing layouts without a single line of JavaScript these days. However, sometimes (rarely though) CSS just isn't enough, and that's where Muuri comes along. At it's very core Muuri is a layout engine
position: sticky;の仕組みや実際の使い方をやさしく解説
position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS Position Sticky - How It Really Works! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに position: sticky;はじめの一歩 position: sticky;の仕様 position: sticky;の便利な使い方 ブラウザのサポート 終わりに -参考記事 はじめに CSSのposition: sticky
実はテキストではない…はてブ数を示す「XX users」の正体
Warning: Trying to access array offset on value of type bool in /home/naeserv/naenote.net/public_html/bloglab/wp-content/plugins/pixabay-images/pixabay-images.php on line 34 Warning: Trying to access array offset on value of type bool in /home/naeserv/naenote.net/public_html/bloglab/wp-content/plugins/pixabay-images/pixabay-images.php on line 34 Warning: Undefined variable $naeGesc_version in /hom
✨安い！！お得！！激安CSS！！✨ - Qiita
<span class='price'> <span class='price1'>19</span><span class='price2'>,800</span> <span class='yen'>円</span> </span> @import url(https://fonts.googleapis.com/css?family=Poppins:700); .price { color: #c70506; text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 5px 4px 3px rgba(0,0,0,0.5); font-weight: bold; font-family: Poppins; letter-spacing: -3px; } .price1 { font-size: 78px
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
MADOGATARI展［SHAFT 40th ANNIVERSARY］
「魔法少女まどか☆マギカ」© Magica Quartet／Aniplex・Madoka Partners・MBS 「〈物語〉シリーズ」© 西尾維新／講談社・アニプレックス・シャフト 「ぱにぽにだっしゅ！」© 氷川へきる／スクウェアエニックス・ぱにぽに製作委員会 「キノの旅 -the Beautiful World-」© 時雨沢恵一／アスキー・メディアワークス／「キノの旅」製作委員会 「十二戦支 爆烈エトレンジャー」© I＆S 「メカクシティアクターズ」© じん／1st PLACE・メカクシ団アニメ製作部 「ニセコイ」© 古味直志／集英社・アニプレックス・シャフト・MBS 「電波女と青春男」© 入間人間／アスキー・メディアワークス／『電波女と青春男』製作委員会 「ef-a tale of memories.」© minori/「ef」製作委員会 「まりあ†ほりっく」© 2009 遠藤海成・
Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル 以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sailboat UI - Modern UI component library for Tailwind CSS
Explore 3000+ Free UI Elements: CSS & Tailwind
100 CSS Buttons
TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ
GitHub - garris/BackstopJS: Catch CSS curve balls.
Propeller Propeller - Front-end Framework based on Material Design With Bootstrap
GitHub - mintchaos/flippant.js: A mini dependancy-less UI lib for flipping over DOM nodes.
Lightning Design System
