Sailboat UI - Modern UI component library for Tailwind CSSBuild your website quickly with Sailboat UISailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open-source Tailwind CSS components, and make it easy to build your products.
【配色 - デザイン ★★★★★】 - 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
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
Grid 日本語版
なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています。 <nav> <menu> <li><a href="#">☀</a></li> <li><a href="#">✈</a></li> <li><a href="#">❄</a></li> <li><a href="#">☎</a></li> </menu> </nav> <nav class="menu2"> <menu> <li><a href="#">home</a></li> <li><
エントリーページがまたうんこ化したのでusercssを書いた - いさぢちんメモ
はてブのusercssは他にがっつり書いてる人がいて乗り遅れた感がありますが、毎回書いているので。 コメントを一覧表示するページをリニューアルしました - はてなブックマーク日記 - 機能変更、お知らせなど 配色はともかく、シングルカラム可変幅にして、コメントを1行にするだけでずいぶん印象が変わるのに、どうしてそれが出来ないのか。前回のエントリーページデザイン変更のときから疑問に思っている。 スタイルシート /*20130321はてブエントリページ対策*/ ul.ad-head-text, div#sidebar-inner {display:none!important;} div#container, div.box3_2, div.entry-contents, div.box-wrap {width:auto!important;} div.box-wrap.box2.mix {b
Flatstrap by Littlesparkvt.com
Sometimes a new project doesn't need rounded corners or gradients. So we decided to get rid of them. We <3 Bootstrap. Download Flatstrap Bootstrap Templates GitHub project Examples Flatstrap Version 0.3 // Bootstrap Version 2.3.1 Back to top Bootstrap is designed and built with all the love in the world by @mdo and @fat. Flatstrap, on the other hand, is built by Little Spark Code licensed under Ap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Explore 3000+ Free UI Elements: CSS & Tailwind
100 CSS Buttons
TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ
Propeller Propeller - Front-end Framework based on Material Design With Bootstrap
Lightning Design System
Loaders.css
primer/primer: The design system that powers GitHub
Webサイトの横幅まとめ - ULTRAZONE
GitHub - Pixelkit/PixelKit-Bootstrap-UI-Kits: Free UI Kits built on Bootstrap for any developer that wants to build a cool looking and functional website. Enjoy!
