タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG
タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN 従来のhidden属性とは違い、until-found"属性値を指定した場合はブラウザのページ内検索やページ内リンクでそのコンテンツが検出された場合、自動でhidden属性が取り除かれて表示することができます。 従来のdisplay:noneを使用した非表示ではコンテンツ内にページ内検索でマッチすべきワードがあったとしても検出できませんでしたが、hidden="until-found"を使
hoverを指定するならany-hoverメディア特性を使いなさい！俺流hover実装例も紹介します ｜ TAKLOG
タップデバイスでもhoverが動いているWebサイトが多すぎる！ hoverを指定するならany-hoverメディア特性を使いなさい前提として、タップデバイスでのhoverアクションは次のようなデメリットから無効化すべきです。 タップデバイスでhoverアクションを用いると、タップ後にhover状態が継続し、UIの予期しない振る舞いやユーザー体験の混乱を招く可能性があるデバイスによってはhoverが指定されている要素はダブルタップしないと反応しない可能性があるタップ操作orポインター操作の区別を行うための方法はいくつかありますが、現在ではhoverメディア特性が全モダンブラウザでサポートされているためこちらを利用しましょう。 /* 🙆♂ Recommended */ @media (any-hover: hover) { .button:hover { background-color
CSSで何番目や何個分を前から、後ろから自由自在に指定するための疑似要素まとめ - YCOMのホームページの制作・運営に役立つブログ
わかりやすくまとめたつもりなので、ある程度わかってる人はこの表があれば備忘用には充分だと思います。 ここから下は、初心者のために補足的に説明入れておきます。 -child と -of-typeの違いの話 この特定の要素に対する指定の方法は大きく2つの指定方法があって、要素名つまりはタグの種類にかかわらず対象とする方法と、特定の要素に対してだけ（<P>だけとか）対象とする方法があります。 -childは要素の種類にかかわらず全てを対象として、-of-typeは特定の要素に対してだけ対象になります。 こんな感じですね。 図を見てもらったらわかるように、黄色いのが対象になる要素です。 複数の要素が混在しても、-childではすべての要素が対象になります。 -of-typeでは、その中の特定の要素（タグ）が対象です。 説明だけではわかりにくいので、以下の説明でのコードの例を簡単に見てみます。 最初
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
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
HTML First
HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable by... Leveraging the default capabilities of modern web browsers. Leveraging the extreme simplicity of HTML's attribute syntax. Leveraging the web's ViewSource affordance. Goals The main goal of HTML First is to substantially widen the pool of people who can work on web s
【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 - Qiita
CSSの大きな問題点のひとつとして、スタイルが影響する範囲を指定することができませんでした。 そのため一か所だけ書き替えたと思ったら全然関係ないところが崩れたりして、その欠陥をどうにかすべくBEMやらScoped CSSやらStyled Componentsやら解決策が乱立してどうにもならなくなりました。 とりあえずStyled Componentsとかの乱数スタイルシートはユーザスタイルシート適用が困難なのでさっさと滅びろ。 さて先日リリースされたGoogle Chrome 118でCSSが@scopeに対応しました。 なんと、素のCSSで適用範囲を制限できるようになります。 <div class="out"> <span>ここはfooの外</span> <div class="foo"> <span>ここはfooの中、barの外</span> <div class="bar"> <sp
:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!
What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。 今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。 ユーザーの操作後に検証が行えるようになった :user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。 検証の状態とは、例えば<input type="email" required />な要素では入力されていない場合やemailとして許容されない文字列が入力がされている場合はinvalidな状態になり、emailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと
横並びになったボタンを同じ幅で配置するCSS
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
HTMLにおける自己終了タグの使用、歴史的背景、使用に対する賛否両論
HTMLやCSSのデモページでコードを見ると、HTMLに自己終了タグ（/>）が使用されているのを見かけたことはありませんか？ HTMLにおける自己終了タグの使用、自己終了タグの歴史的背景、自己終了タグの使用に対する賛否両論について紹介します。 The case against self-closing tags in HTML by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに />の歴史的背景 />に対する賛否両論 Prettierには一貫性がない それとも、HTMLは閉じタグをどこでも使用できるのでしょうか？ はじめに />について話をしましょう。
全ブラウザ対応したcontainer queryは何がスゴイのか？
全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。 デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都めぐり（cqw） https://codepen.io/tonkotsuboy/pen/jOvOqOG Zenn記事 https://zenn.dev/moneyforward/articles/css-container-query Twitter https://twitter.com/tonkotsuboy_com 3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。 https://techfeed.io/events/techfeed-experts-night
CSS設計における、すべてがコンポーネントであるという誤謬
後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB
JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI
アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで、商用プロジェクトでも無料で利用できます。 ピュアCSSで実装されたコンポーネント: JavaScriptを読み込む必要がないため、コンポーネントの待機時間はありません。 カスタマイズが簡単: スタイルの追加は簡単です。デフォルトのCSS変数をオーバーライドするか、クラスを使用してコンポーネントをカスタマイズできます。 スタンダードなHTML: 各コンポーネントは、モダンなHTML要素で構築されています。 ビギナーでもプロでも簡単: 簡単なプロトタイプから実稼働のW
CSS カスタムプロパティによる流動的フォントサイズ
はじめに 画面幅に対して流動的にフォントサイズを変化させたい場合、vw などの単位を用いると実現できます。たとえば font-size: 5vw; を指定すると、幅 960px ではフォントサイズは 48px、幅 320px では 16px になります。しかし、320px で 16px は小さすぎるので 32px にしたいとなると、計算が必要になってきます。 この計算方法や流動的フォントサイズのさらなる詳細については、以前登壇したときの資料をご覧いただきたい 👇 資料にもございますが、計算して CSS を出力してくれるアプリも作っています 👇 Sass の mixin もあります 👇 今回は、calc() clamp() min() max() と CSS カスタムプロパティを駆使して、自分で計算する必要がなく、Sass なども不要で CSS のみでの実装を紹介いたします。 使い方と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
CSS Gradient Generator
