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
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の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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
@property: Next-gen CSS variables now with universal browser support Jul 12, 2024 The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements. Introducing the CSS anchor positioning API May 10, 2024 The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements. Popover API lands in Baseline
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
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
こんにちは、Maromaroのfutaです。 入社してからデザイン業務が主でしたが、最近デザインとコーディング両方させてもらう案件がありました。前職でもデザイナーメインでコーディングはそこまで頻繁ではなかったので、勉強不足な点は多々あり、産育休はさんでいるので2年ぐらい日々発展するHTML全般に触れていなかったという事になり…（デザインは日常生活でも触れられますが）。頑張って勉強したいと思います。 今回自分がデザインしたものの、コーディング時に調べてもすぐに解決できなかった問題の一つが、透過グラデーションでした。 備忘録として書き留めておきたいと思います。 本文テキストにグラデーションをつけたい やりたいこと…本文の冒頭をグラデーションで一部だけにして、ボタンをクリックすると全文が表示されるデザインを作る（背景は青色、テキストはデバイスフォントで白色）。 スマホで長文の時に高さを節約したい
Webサイトにウィンドウ下固定のメニューボタンを設置する場合、モバイル向けSafariが邪魔をしてくる。回避するためには。 要約iOS Safariは、アクションバーが隠れた時、バーの高さ+セーフエリア分のタップイベントをブロックしてしまう。それゆえ、ウィンドウ下固定のボタン要素は、1回でタップできない場合がある。CSSで解決する場合、44px + env(safe-area-inset-bottom)分のマージンを取る。憎き44ピクセルスポーツブル (スポブル) | 完全無料のスポーツアプリ 最近見たウェブサイトで、下固定のメニューボタンを採用していたページ。いいなーと思って触っていたら、あることに気づいた。iOSのSafariだとアクションバーが隠れている時、最初のタップでメニュー要素が押せない。1回押すとアクションバーがニュッと飛び出てきて、要素が再配置された後にもう1度押す。計2回
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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! 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
先月からエンドユーザーに段階的に適用され始めた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ページを開く
