<details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語 | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020. Learn moreSee full compatibilityReport feedback <details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。 折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <summary> 要素の内容が折りたたみウィジェットのラベルとして使用されます。 <d
Writing Logic in CSS
CSS is a highly specialized programming language focusing on style systems. Because of this unique use case and its declarative nature, it's sometimes hard to understand. Some folks even deny it's a programming language altogether. Let's prove them wrong by programming a smart, flexible style system. Control StructuresMore traditional, general-purpose languages (like JavaScript) give us tools like
CSSだけでモーフィングを実装できる！文字列を違う文字列に滑らかに変化させるCSSのテクニック
文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。 モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。 仕組みは、CSSのblurとcontrastで文字をぼかして変化の間をつなげています。 実際の動作は、下記でお楽しみください。 「Run Pen」をクリックすると動作します。「0.5x」にするとちょうどいいかも。 See the Pen CSS morphing by Amit Sheen (@amit_sheen) on CodePen. 実装コードは、下記の通りです。 デモでは7つのワードをモーフィングしています。ワードの数は増減もOKで、その際はCSSを少し変更します。 <div class="morphing"> <div class="word">Pure CS
Creating Patterns With SVG Filters | CSS-Tricks
For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, but external images are an additional dependency and they introduce a new complexity. I know now that a good portion of these problems could be solved with a few lines of SVG. Tl
俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
Una Kravets Online
CSS Wrapped: 2023! Dec 8, 2023 2023 was a huge year for CSS! Learn about all the Web UI highlights that landed in browsers this year. Four new CSS features for smooth entry and exit animations Aug 16, 2023 These four new features include: animating display and content-visibility on a keyframe timeline, the transition-behavior property, the @starting-style rule, and the overlay property. Building a
CSS min(), max(), and clamp() | Articles | web.dev
CSS min(), max(), and clamp() Stay organized with collections Save and categorize content based on your preferences. Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions. As responsive design becomes more nuanced, CSS is constantly evolving to give authors increased control. The min(), max(), and clamp() functions, no
Animatable CSS properties - 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グラデーションSafariでうまく表示されない時の解決法 | Maromaro Blog
こんにちは、Maromaroのfutaです。 入社してからデザイン業務が主でしたが、最近デザインとコーディング両方させてもらう案件がありました。前職でもデザイナーメインでコーディングはそこまで頻繁ではなかったので、勉強不足な点は多々あり、産育休はさんでいるので2年ぐらい日々発展するHTML全般に触れていなかったという事になり…（デザインは日常生活でも触れられますが）。頑張って勉強したいと思います。 今回自分がデザインしたものの、コーディング時に調べてもすぐに解決できなかった問題の一つが、透過グラデーションでした。 備忘録として書き留めておきたいと思います。 本文テキストにグラデーションをつけたいやりたいこと…本文の冒頭をグラデーションで一部だけにして、ボタンをクリックすると全文が表示されるデザインを作る（背景は青色、テキストはデバイスフォントで白色）。 スマホで長文の時に高さを節約したい時
iOS Safariのアクションバー表示エリアはタップイベントをブロックする | Orime
Webサイトにウィンドウ下固定のメニューボタンを設置する場合、モバイル向けSafariが邪魔をしてくる。回避するためには。 要約iOS Safariは、アクションバーが隠れた時、バーの高さ+セーフエリア分のタップイベントをブロックしてしまう。それゆえ、ウィンドウ下固定のボタン要素は、1回でタップできない場合がある。CSSで解決する場合、44px + env(safe-area-inset-bottom)分のマージンを取る。憎き44ピクセルスポーツブル (スポブル) | 完全無料のスポーツアプリ 最近見たウェブサイトで、下固定のメニューボタンを採用していたページ。いいなーと思って触っていたら、あることに気づいた。iOSのSafariだとアクションバーが隠れている時、最初のタップでメニュー要素が押せない。1回押すとアクションバーがニュッと飛び出てきて、要素が再配置された後にもう1度押す。計2回
Modern CSS Techniques To Improve Legibility — Smashing Magazine
In this article, we cover how we can improve websites legibility using some modern CSS techniques, great new technologies like variable fonts and putting into practise what we learned from doing scientific researches. We can read in many ways, and there are many different types of readers, each with their own needs, skills, language, and, above all, habits. Reading a novel at home is different fro
CSS fix for 100vh in mobile WebKit | CSS-Tricks
A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units. One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t have a vertical scrollbar. If it does have a vertical scrollbar, then 100vw is t
Facebookの新しいUIデザインで見つけたCSSのテクニックのまとめ
先月からエンドユーザーに段階的に適用され始めたFacebookの新しいUIデザイン、そこで見つけたCSSのテクニックを解説した記事を紹介します。 CSSの実践的なテクニックが数多く使用されており、パフォーマンスや何らかの制約による実装時などの参考になると思います。 CSS Findings From The New Facebook Design by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アバターにSVGを使用する マージンの代わりにスペーサーdivを使用する CSSフィルターの使用 シャドウに画像を使用する CSS変数の多用 テキストの省略表示（複数行テキストの切り捨て） ホバーエフェクトにdivを使用する insetプロパティの使用 dir=autoとCSSの論理プロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Is it possible to use CSS vars in CSS3 selectors?
CSS Tip: What is Scroll Chaining?
@storybook/cli - Storybook
5 different ways to create a ticket layout
Aaron Iker on Twitter: "🔗 Hover (CSS) @CodePen https://t.co/o5UzNKdNMq https://t.co/Vy86KMO28M"
「Webページ高速化の為に、○○は不要」が本質なのか？を考える
Adam Argyle on Twitter: "#CSS media queries conditionally *apply* styles, BUT did you know they can conditionally *load* styles too? This t… https://t.co/TAnsBjzfRT"