Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法
今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙♂️ CSS trick: transition from height 0 to auto! by Fra
SCSSからCSSネスティングに切り替えたい人に贈る3つの罠 - Qiita
今年も残すところあと1月を切り、CSSもこの1年でさらに進化を遂げましたね。 CSSは普段、SCSSを使ってコーディングしている方も多いますが、 CSSの進化により、SCSS不要論も今年チラチラ見られるようになりました。 本当にSCSSがなくても問題ないのか、新しいCSSネストについて調べてみました。 CSSネストの基本 まずはCSSネストがなんなのかというおさらいをしておきましょう。 2つのクラスparentとchildがあり、parentより子の階層にchildクラスが含まれているときだけスタイルづけしたい時、普通のCSSだとこのように書きます。 .parent { min-height: 100dvh; width: 100%; } .parent .child { background: white; }
CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。 CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。 clamp() Calculator clamp() Calculatorの特徴 clamp() Calculatorの使い方 clamp(
Refactor your CSS NOW!!
1 . Global Reset When working with CSS, the user-agent stylesheet is automatically applied to HTML elements. It's crucial to reset this stylesheet before creating your own styles for the project. One common practice is to reset the margin and padding values to 0. Why? To avoid repetitive line of codes 2. CSS Variables Maintaining consistency in your code is crucial, especially when it comes to CSS
My favourite 3 lines of CSS
Let’s break the selector down: every direct sibling child element of .stack has margin-block-start added to it. This is achieved by the Lobotomised Owl selector, but the > combinator is added to prevent margin being added recursively. In writing modes that are left-to-right or right-to-left—such as English or Arabic—the margin is added to the top of the element. I’ve been obsessed with this partic
My CSS Wishlist
I like it when people share what they wish for CSS. In the last few weeks, I read two awesome wishlists by Dave Rupert and Eric Meyer. In 2022, we got many new CSS features, my favorite of them are container queries, CSS :has, and subgrid. I thought about brain-dumping all the things that I want CSS to have one day. Flex wrapping detection When I use flex-wrap: wrap, sometimes I wish there is a wa
A Better Way to Use CSS in Web Applications
In this article, I want to discuss the kinds of properties that make working with CSS hard and the kinds of properties developers want out of the system. We will then analyze common solutions and how they stack against these goals. Finally, I will propose a solution that checks off all the boxes. Like so many other things on the web, CSS was designed for documents, not applications. As such, the d
Do we need CSS flex-wrap detection?
When I write CSS, I wish there is a way to have flex-wrap detection in CSS. In some cases, I design a simple component that is responsive with flex-wrap, but the point is that I want to have even more control and be able to detect when an item is wrapped. This post goes into more detail about one of the wishes I have for CSS in 2023. In this post, I will try to explain why we need it and what the
The Truth About CSS Selector Performance | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Geez, leave it to Patrick Brosset to talk CSS performance in the most approachable and practical way possible. Not that CSS is always what’s gunking up the speed, or even the lowest hanging fruit when it comes to improving performance. But if you’re looking for gains on the CSS side of thing
CSS Tips for Better Web Development
CSS has been around for 25+ years, gaining tons of features and selectors to create great websites and apps. In this article, we'll explore popular and unique tricks to make your website stand out, plus older tricks that still work. Some may look trivial, but they offer a lot of flexibility. We'll also examine different layout implementations, scroll snapping, image shapes, and animation tricks. L
How To Build A Magazine Layout With CSS Grid Areas — Smashing Magazine
Web development, especially what you can do with CSS, has become increasingly complex. With the added capabilities of CSS Grid, it is now possible to achieve layouts that look like they were laid out by hand. Let’s tackle a practical example of how to do something like that. In this article, I want to talk about the amazing possibilities of a CSS grid and how it allows for complex layouts that are
sass-migratorを使ってLibSassからDartSassに移行する手順
少し前に重い腰をあげてようやくLibSass(node-sass)から移行したので、その時のメモを残します。 Sass の@import 廃止は2022年10月と発表されていましたが、DartSassの使用率が80％になるまで延期する旨が2022年7月に公式のGitHub にて記載されてました。そのため当初の予定よりも猶予はありますが、近い将来廃止が確定しているため、どこかのタイミングで切り替える必要があります。 ※余談ですが私が移行したのは廃止日の問題ではなく、M1 Macbookの仕様の問題だったりします。M1 はLibSass が通らないので新規pjだとLibSass は使用できない / 既存pjであったとしてもnode_module をすべて消去して再度npm install をしてしまうとアウトなので注意。 結論からいうとMigrator のおかげで思っていたよりもスムーズに移行
HTMLとCSSを真剣に学びたい人におすすめ！ 実務レベルの知識やテクニック、考え方がよく分かる解説書 -HTML/CSSブロックコーディング
HTMLとCSSの実務に役立つ知識やテクニック、考え方を学びたい人にお勧めの解説書を紹介します。 デザイナーから渡されたモックアップを元に、情報の構造やデザイナーの意図を読み解き、コンテンツをブロックに分解し、コーディングの方針を検討し、HTMLのマークアップでどのように構造を設計し、CSSでスタイルする際に気をつけることなど、各ステップごとに詳しくていねいに解説されています。 HTMLの要素や属性、CSSのプロパティや値はそれなりに理解していて、UIコンポーネントなら気軽に実装できるけど、Webページや複数ページを実装すると、「納得のいく実装ができない」「もう少しクリーンな設計はできなかったのか」と、コーディングのスキルを磨きたい人にお勧めの解説書です。 知識やテクニックだけでなく、考え方についても触れられているので、本書から得られるものは大きいと思います。
Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ
Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。 Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。 Flowrift Flowrift -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Flowriftは、Tailwind CSSで実装されたUIコンポーネントのライブラリです。通常のHTMLに、Tailwind CSSのデフォルト構成で機能します。コンポーネントを組み合わせて、ページレイアウトを作成することもできます。 Flowrift ライセンスが明記されてい
任意のCSSアイコンから別のCSSアイコンへの遷移アニメーションのコードを提供する・「CSS ICON animate」
CSS ICON animateは任意のアイコンから別のアイコンへの遷移アニメーションを、アイコンも含めて全てCSSで作れるサービスです。 以前ご紹介した、CSSのみで出来たアイコン集のCSS ICONが、各CSSアイコンからCSSアイコンへのアニメーションコードを提供するようになったみたいです。 任意のCSSアイコンを2つ選択するだけで、選んだ順にアニメーションしながら遷移するコードを発行してくれます。 example ↑ アイコンをクリックすると別のアイコンに変化します。両アイコンともCSSで作られています。 楽で良いんですが、デフォルトで用意されているのがクリックイベントで遷移するJSコードがjQueryだったりCSS ICONのCDNを@importしてたりなのでこの辺は必要に応じて便宜変更してください。 中には微妙なアニメーションもあるので違和感あるならおとなしくSVGで書いた方
new.css
Write modern websites using only HTML. This site is made from vanilla HTML and the default new.css theme. View Source new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb. It's perfect for- A dead-simple blog Collecting your most used links Making a simple "about me" site Rendering markdown-generated HTML The web was made for semantic HTML—let's start using it
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Use CSS Variables Like a Pro
Intent to Ship: Style Container Queries for CSS Custom Properties
HTML5/CSS3のニュースやTIPSなどのまとめ (2021年10月6日)
