Tailwind CSS のテンプレート & UI キット集【まとめ】 - Qiita
Tailwind CSS のテンプレートサイトを使えば Web サイトを効率よく作成できます。簡単ではありますが個人的に素敵だと思った Tailwind CSS のテンプレートサイトをまとめてみました。 Tailwind CSS テンプレート＆ UI キットサイト Tailwind UI（有料） https://tailwindui.com/ すべてのテンプレートを使用するにはライセンス購入が必要 シンプルなデザインはとても汎用的 React や Vue を使用したテンプレートも有 Headless UI https://headlessui.com/ ドロップダウンやダイアログ等の「機能」をメインとした UI コンポーネント集 サンプルコードは React か Vue.js の2種類から選択できる。 MIT ライセンス Preline UI https://preline.co/ 無料で
Modern CSS in Real Life
Hey! Chris Coyier here. This is a blog-itized version of a presentation I created. It started life as a Keynote file which I presented in person at RenderATL in June of 2023. I put a lot of work into it! I’m so grateful to everyone who came and saw it. But you can’t beat the reach of websites! I decided I should get some more mileage out of it by sharing it here in an adapted form. I suppose you s
CSSだけでlist-styleのマーカーの色を変更する方法 | Web技術指南書
<ul>タグ内のリストのマーカーをdiscにしていたのですが、テキストの色と同じだと強すぎて少し薄くしたいという要望がありました。そこで、HTMLマークアップは変更することなく、CSSだけでlist-styleのマーカーの色を変更する方法を紹介します。 標準のリストマーカー 何も手を加えていない状態での<ul>、<li>は下のようになります。 See the Pen Normal list-style by JaSTIN (@JaSTIN) on CodePen.24295 黒く大きなマーカーは主張が強い印象があります。CSSだけでリストマーカーを変更 方法としては、まず<ul>タグのlist-styleを無効にして、<li>タグの:before疑似要素に対して、マーカーを設定しています。See the Pen Change list-style by JaSTIN (@JaSTIN) o
フォントサイズ「px→％」表記一覧・早見表 - 人生は暇つぶし
2016 - 01 - 11 フォントサイズ「px→％」表記一覧・早見表 まとめ スポンサーリンク Tweet Webサイト制作において、フォントサイズは非常に重要ですよね。僕の会社では、フォントサイズを指定するとき、 PCサイトでは「％」 、 SPサイトでは「px」 で指定しています。 その際、％表示を計算するのが面倒くさいので、この機会にフォントサイズ「px→％」表記一覧・早見表を作成します。 目次 目次 フォントサイズのパーセント表記一覧・早見表の計算式 主要ブラウザのデフォルトフォントサイズは16px フォントサイズのパーセント表記一覧・早見表 フォントサイズ１６％ まとめ フォントサイズのパーセント表記一覧・早見表の計算式 表示したいサイズ / 基本サイズ * 100 小数点以下は切り上げて計算します。表示したいサイズは10~30pxとします。 主要ブラウザのデフォルトフォント
Polymer1.0におけるStylingとCSS Variables - Qiita
laco0416です。Polymer 1.0におけるShadow DOMとStyling、CSS Variablesの話をします。 Shadow DOM PolymerはWebComponentsの三本柱の1つ、Shadow DOMを用いることで、Custom Elements内外のDOMを隔離します。隔離されたCustom Elements内のDOMを Local DOM と呼びます。 Local DOMを生成するのにPolymerは2つの実装を使い分けることができます。基本的にはPolymerに含まれる Shady DOM というShadow DOM実装を使用しますが、ユーザーが明示的に指定することでブラウザにビルトインのShadow DOM実装を使ってLocal DOMを生成することができます。(将来的にはデフォルトがビルトイン実装の使用になる予定です) ビルトイン実装を使おうとして
flex layout によるレスポンシブ入力フォームの勘どころ | tehc - 氾濫原
重要な点 常に単に縦に並べるだけなら flex layout はいらない。 適用箇所 たくさんの項目をできるだけ詰め込む場合 flex layout はあらゆるスクリーンサイズへの対応で大きな活躍をする min-width 及び適切な範囲でのグループ化を行なったら、あとは flex によるレイアウトに身をまかせる。 flex になったボックス内で width: 100%; や height: 100% が効かない flex プロパティが指定されている要素を親に持つ要素に width: 100% や height: 100% を指定しても効かない (computed が 0 になる) ことがある。 flex box の仕様のなかでどこに書いてあるのかよく読めてないが、flex 指定された要素 (flex item) の見掛け上の大きさと、子要素に対する計算上の大きさが違うようで、どうしよもな
A Complete Guide to Flexbox | CSS-Tricks
display This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. .container { display: flex; /* or inline-flex */ } Note that CSS columns have no effect on a flex container. flex-direction This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional
reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
El Capitan登場で、CSS font-familyはこう変更しよう | ほりべあぶろぐ
Mac OS X 10.11 El Capitanの登場で新たなフォントが使えるようになったので、CSS font-familyの変更例を紹介します。 El Capitanの新フォント OS X El Capitanでは、新たに4つのフォント「クレー」「筑紫A丸ゴシック」「筑紫B丸ゴシック」「游明朝体+36ポかな」が追加されました。さらに、おなじみ「ヒラギノ角ゴ」に新たなウェイトが追加され、W0〜W9までの全10ウェイトをすべて利用できるようになりました。 OS X El Capitanには4種の新しい日本語フォントが追加！ 新フォントに関しては、普通のウェブサイトで使うことはあまりないかもしれません（使っても面白そうだと思います）が、ヒラギノ角ゴの利用に関してはフォント名の変更という注意点があります。 Hiragino Kaku Gothic ProN → Hiragino Sans ヒ
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
とてもHackable！Styling Atom(Editor)─Frontrend Conference
とてもHackable！Styling Atom(Editor)─Frontrend Conference 仲 裕介（HTML5 Experts.jp副編集長） 本記事は、2015/2/21に行われた「Frontrend Conference」のファイナルセッション「Styling Atom(Editor)」の内容を紹介します。 オーバービュー スピーカーはスイス生まれで、現在札幌で受託開発を行っている、Simon（ニックネーム：Simurai）さん、逐次通訳をHTML5 Experts.jpのエキスパートである斉藤祐也さんが努めました。 昨今、様々な企業サイトでのCSSの利用方法が公開されるようになってきました。CSS-Tricks（http://css-tricks.com/css/）に代表的なサイトの一覧が紹介されています。このセッションについても、CSS-Tricksに習って、At
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Lightbox
DemoDemos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project. <a href="large_1.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text."> <img src="thumbnail_1.jpg" alt=""> </a> <a href="large_2.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text."> <img src="thumbnail_2.jpg"
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
ソーシャルボタンを並べた時に Facebook の Like Button （いいねボタン）だけが下にずれてしまう現象の修正方法
ソーシャルボタンを並べた時に Facebook の Like Button （いいねボタン）だけが下にずれてしまう現象の修正方法 昨日の日本の昼時に起きた Facebook の いいねボタンがずれる問題、問題自体は解決したのですが、ボタンが下にずれてしまう現象が発生していました。 Facebook の Like button（いいねボタン）がずれる現象が起きている – HAM MEDIA MEMO こちらは自分の問題？と確認したところ、とあるプロパティが追加されたための問題のようだったので、現象の修正方法を書いておきます。 いいねボタンだけが下にずれてしまう時の修正方法修正？ではなく対応方法的なのですが、このズレの問題はボタン内で利用されている vertical-align が bottom で設定されていることで起きているので、それの対応をします。 vertical-align を ba
Color themes for Google Code Prettify
<script type="text/javascript"> // Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) { for (var i = 42; --i >= 0;) { alert('Hello ' + String(world)); } } </script> <style> p { color: pink } b { color: blue } u { color: "umber" } </style>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Components · Issue #408 · necolas/normalize.css
How to change Polymer(1.0) paper-toolbar background colour?
Jon Brown Designs : Cocoa Control: Horizontal Graph View
Workflower Apps