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
皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではスタイリングにTailwind CSSを使用しています。 恥ずかしながら、これまでTailwind CSSを十分に活用するための環境が整っていませんでした。具体的には、Tailwind CSSのクラス名を書くところにリンターが適用されていなかったり、クラスの並び順がとても自由で開発に支障をきたしたりしていました。 そこで、今回prettier-plugin-tailwindcssをコードベースに導入しました。これは、言わずと知れたコードフォーマッターPrettier向けのプラグインで、Tailwind 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
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;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS Position Sticky - How It Really Works! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに position: sticky;はじめの一歩 position: sticky;の仕様 position: sticky;の便利な使い方 ブラウザのサポート 終わりに -参考記事 はじめに CSSのposition: sticky
はてブ数はテキストではない どこからどうみても文字でしょ！なこのパーツ。 実は小さなgif画像でできています。 たとえばはてブ数が1の場合、 画像・・・ URL・・・http://cdn.b.st-hatena.com/images/users/gif/normal/00001.gif という感じで、はてブ数に応じたgif画像が1つ1つ準備されています。 なぜテキストを使わないのか？その理由 テキストと画像を比べると一般的にはテキストのほうが軽いと思いますよね。 でも、ここはもう一歩深く踏み込んでみましょう。 画像とテキスト、各々の場合について軽さ（表示の早さ）を比較する思考実験をしてみたいと思います。 比較項目 比較項目は、ダウンロードの開始からデータが表示されるまでの流れに沿って以下の通り。 データをダウンロードするまで 1.ダウンロードが必要なデータサイズ 2.キャッシュの利用可否
@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; margin-right: -5px; font-style: italic; } .price2 { font-size: 59px; margin-right: 10px; font-style: italic; } .yen {
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
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
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年の現状にあわせて、修正しました。 【アップ
「魔法少女まどか☆マギカ」© Magica Quartet／Aniplex・Madoka Partners・MBS 「〈物語〉シリーズ」© 西尾維新／講談社・アニプレックス・シャフト 「ぱにぽにだっしゅ！」© 氷川へきる／スクウェアエニックス・ぱにぽに製作委員会 「キノの旅 -the Beautiful World-」© 時雨沢恵一／アスキー・メディアワークス／「キノの旅」製作委員会 「十二戦支 爆烈エトレンジャー」© I＆S 「メカクシティアクターズ」© じん／1st PLACE・メカクシ団アニメ製作部 「ニセコイ」© 古味直志／集英社・アニプレックス・シャフト・MBS 「電波女と青春男」© 入間人間／アスキー・メディアワークス／『電波女と青春男』製作委員会 「ef-a tale of memories.」© minori/「ef」製作委員会 「まりあ†ほりっく」© 2009 遠藤海成・
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける人気の高いレイアウトやコンポーネントを簡単に実装できるBootstrap用のテンプレートを紹介します。 Bootstrap 実装方法のほとんどは、Bootstrapの最小限の構成に数行のHTMLと外部スタイルシートを記述するだけです。 Bootstrapの基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrapのグリッドシステムの基本な使い方 BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル 以下のテンプレートはApache 2.0ライセンスで、個人でも商用でも無料で利用できます。 Scrolling
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く