ボタンの最低幅を設定しつつ、かつコンテナが縮小してもはみ出さないようにするCSS
ボタンのラベルが短い場合でも、ボタン自体には最低限ある程度の幅を持たせたいという場合がある。そんなときには、ボタン自体にmin-widthを指定して最低幅を設定する。 button { min-width: 10em; } しかし、そのボタンを配置するコンテナの幅が、ボタン自体のmin-widthの値よりも狭くなってしまうこともある。すると、ボタンがコンテナをはみ出してしまう。 ボタンの幅をコンテナに収めるためにはmax-width: 100%が使えそうにも思えるが、min-widthの方が優先されてしまうので機能しない。そこで、min-widthの値としてmin()を使うようにする。 button { min-width: min(10em, 100%); } このようにすると、min-widthの値が100%を超えることを防げる。 See the Pen Untitled by Yuh
実践 popover 属性 〜HTMLのみのモーダルで実案件に使えるのか確認〜
こんにちは森田です。 前回、HTMLのみでモーダルが作れる popover 属性の概要についての記事を書きました。 2024年はHTMLのみでモーダルが作れそう。popover属性を試してみる。 前回の記事内では軽い動作しかしていなかったので、今回は実際に案件でどこまで使うことができるか確認したいと思います。 popover 属性を試してみる ではさっそく popover 属性を色々試してみましょう。 まずは動作確認として超シンプルなモーダルを作ってみます。 動作確認用超シンプルなモーダル まずは前回の記事のおさらいで、動作確認用の超シンプルなモーダルです。 モーダルになる要素に popover 属性と任意の id を。表示するボタンにpopovertarget属性を指定し、モーダル要素の id を指定します。 <button type="button" popovertarget="po
2画面折りたたみデバイスに対応したCSSメディアクエリ - Qiita
@media (horizontal-viewport-segments: <count>) { } @media (vertical-viewport-segments: <count>) { } <count>は水平(横長)、または垂直(縦長)の画面デバイス数を設定します。 例えば Surface Duo の2画面デバイス表示では以下の値になります。 水平の場合 horizontal-viewport-segments: 2 垂直の場合 vertical-viewport-segments: 2 CSS環境変数 各ビューポートのプロパティは、次の環境変数定義で取得できます。 env(viewport-segment-width <x> <y>); env(viewport-segment-height <x> <y>); env(viewport-segment-top <x> <y>
How To Center a Div
IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han
z-indexの値は「無限」と「2147483647」どちらが強いの？
先日、前面に必ず出したい要素のz-indexにはcalc(infinity)をつけるとよい旨の情報を見ました。 確かに「無限」を指定すれば単純なz-indexの値の勝負では勝てそうな気がします。一方でz-indexマニアの間ではz-indexの上限値は2147483647[1]というのが常識になっています。ではこの「無限」と「2147483647」のどちらが強いのか検証しました。 結果 結論から言うとどちらも同じ値の扱いでした。calc(infinity)を指定しても上限値の2147483647でカンストするようです。 右の図のようにHTMLの順において後に書けば、「2147483647」が「無限」の上に来ました。 検証方法の説明 ここからは検証方法について軽く説明します。z-indexの強さは同一スタッキングコンテキスト上にある必要があります。そしてその中でz-indexが同じ値の場合は
Tailwind CSS の hover: を、非活性な要素やタッチ操作に適用させない ～ addVariant の活用
背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いていますが、要約すると問題は大きく以下の 2 点です。 スマホなどのタッチデバイスでもホバースタイルが適用されてしまう disabled 状態の button など、クリックしても反応しない要素にもホバースタイルが適用されてしまう これらの問題が次のようなメディアクエリと疑似クラスを組み合わせたスタイル記述によって解決できることを紹介しました。 @media (hover: hover) { .class:where(:any-link, :enabled, summary):hover { /* ホバースタイル */ } } 今回はこれを Tailwind CSS で実現するには？ という記事です。 確認した環境 Tailwind CSS v3.4.1 Tailwind CSS におけ
iOSのSafariでテーブル表示のフォントサイズが変わってしまう - アルパカログ
Webページで table タグを使用した際にPCのブラウザでは問題ないのに、iPhoneやiPadなどのiOS端末のSafariで見るとテーブル内のフォントサイズが変わってしまうことがあります（下記スクリーンショット）。 この記事では、iOSのSafariでテーブル内のフォントサイズが変わってしまう問題の解決方法を説明します。 問題の概要 この問題は、 table タグを用いたテーブル内の文字が表示領域に対して十分に多いときに発生します。 ただし、Chromeの開発者ツールでモバイルデバイスに切り替えても再現することはできません。 再現するには、iOSの実機デバイスかiOSシミュレータのSafariでWebページを閲覧する必要があります。 解決方法 この問題を解決するには、下記どちらかのCSSを設定します。 方法1 white-space: nowrap を削除する テーブル関連の要素か
iOS Safari でキーボード表示時にフッターを固定するもう1つの方法 - *iroi*
zenn.dev エディタを作っていると iOS Safari でキーボードを開いたときの挙動は本当に大変ですよね。 この記事では、キーボードを開いたままスクロールしてもフッターを固定できるようなワークアラウンドを最近見つけたので紹介します。 Safari 16 以降が必要。キーボード開閉時に追従が遅れる挙動は改善しません。 デモは https://mechairoi.github.io/ios-safari-virtual-keyboard/。iPhone か iOS Simulator でお試しください。 GitHub - mechairoi/ios-safari-virtual-keyboard Virtual Keyboard の挙動 Virtual Keyboard を開いたときには以下のようなことが起こっていると推測しています。 Visual_Viewport_API で取得で
<button>とかのスタイルを消して書き直すときに考えることの備忘録
all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考 各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。 スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち
任意の要素に対してブラウザデフォルトのフォーカスリングを適用する方法
任意の要素に対して、ブラウザデフォルトのフォーカスリングが描画されるように明示的に設定したいことがある。たとえばスタイリングの都合により、一度取り除いたフォーカスリングをふたたび適用したいとき。 フォーカスリングのスタイルは、ブラウザの種別や状況によってまちまちであるため、CSSでそれらしいものをエミュレートするのが難しい。そのため、同じものを呼び出せるような特別なやり方を採用できると望ましい。 一つの方法として、outline: revertを適用すればデフォルトの挙動を復元できる。 * { outline: 0; } button { outline: revert; } しかし場合によっては、通常はフォーカスリングが描画されない要素に対して、ブラウザのデフォルトと同じフォーカスリングが描画されるようにしたい、ということもあるだろう。この場合、outline: revertではフォーカ
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS Text モジュール レベル 4 の 4 つの国際化 CSS 機能が Chrome に導入されます。この投稿では、すでに発送済みのサービスと今後の予定について説明します。 Chrome 119 以降: 日本語のフレーズが word-break: auto-phrase で改行されるようになりました。 Chrome 120 以降のフラグの背後: text-autospace プロパティによるスクリプト間のスペース 開発中: text-spacing-trim プロパティによる中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズが統一されます。 日本語のフレーズ改行: word-break: auto-phrase 日本語のテキストが読みやすくなるこの機能は Chrome 119 から利用可能 中国語や日本語などの東アジア言語では、単語の区切りにスペースを使
2020年から2023年までのCSSの変遷を振り返る - yamaScrapbox
この資料は Meguro.css#9 のLT資料です。 メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります 自己紹介 yamanoku.icon @ yamanoku 大山奥人, おおやまみちのく a.k.a やまのく X（旧Twitter） GitHub 株式会社クラウドワークスにてフロントエンドにまつわる仕事をやっています 得意領域 マークアップ・フロントエンド・UIデザイン・アクセシビリティ 既婚で1児の父と猫🐈🐈🐈と犬🐶の飼い主 Meguro.css復活！！！！！ 株式会社オロ様、Nakayaさんありがとうございます（感謝） Meguro.css#4がエンジニアとしての初登壇イベントでした 今回のテーマ「2020年から2023年までに登場したCSSの変遷を振り返る」 前回のMeguro.cssが2020年1月開
CSSパフォーマンスに関する計測結果
CSSパフォーマンスに関して計測した結果を発表しました。 パフォーマンス改善系の話は具体的な改善手法みたいなのがウケてしまいがちだけど普遍的に適用できる手法は案外多くなくて、「理論的に最適な⼿法が実際に（あなたの環境でも）最適かどうかは計測するまで分からない」って事が言いたかったです。だから、ベンチマークの提示もない改善手法に飛び付かず、計測⇄ボトルネック特定⇄改善のサイクルを回すことが大切です。 この発表の10日前にJSConf JPで発表があり、JSConfが終わって10日間の間にゆっくり資料をつくるつもりだったものの体調を崩して1週間ほど何もできない日々が続き、大急ぎで資料を作りました。 無事に発表を終えることができてよかったです。
react-transition-group - Qiita
react-transition-groupドキュメント react-transition-groupはReactでCSSアニメーションを扱う為のライブラリです。 見栄えのするモーション自体を提供してくれるわけではなく、CSSを適用するタイミングを提供してくれるので、自分でアニメーションのCSSを書いてアニメーションさせます。 下記の4つのコンポーネントが提供されます。 Transition CSSTransition SwitchTransition TransitionGroup 今回はcreate-react-appを使い、CSS(SCSS)はCSSModulesを使っていきます。 ※レンダリング回数削減などパフォーマンス面については扱いません。 インストール # create-react-appのインストール npx create-react-app プロジェクト名 # プロジェク
Now and Next Generation of CSS Cascading Model | ドクセル
Now and Next Generation of CSS Cascading Model araya @arayaryoma FRONTEND CONFERENCE OKINAWA 2023 araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023 自己紹介 araya / Ryoma Abe x.com/arayaryoma github.com/arayaryoma bsky.app/profile/araya.dev Web standardsやBrowser APIが好き 今日はCSSの新しめの仕様について 話します araya @arayaryoma - FRONTEND CONFERENCE OKINAWA 2023 2020年4月 日経入社 日経電子版のWeb開発
: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と
7 Quick Tips about Vue Styles You (Might) Didn’t Know
Single file components consist of three distinct entities: template, script and styles. All of them are important but the latter is often being neglected even though it can become complex and often cause frustration and bugs. A better understanding can improve code reviews and decrease debugging time. Here are 7 tips to help you with that: Styling Scoped And Slotted ContentScoped Selector Performa
【CSS】Safari 16.0でフルサポートされたoverflow: clipが便利
overflow: clipの概要 overflow: clipはChrome・Edgeでは90から[1]、Safariでは16.0から[2]フルサポートされた比較的新しい値です。 "overflow: clip" | Can I use overflow: clipの特徴には ① コンテンツを要素のパディングボックスに合わせて切り取る ② プログラム的なスクロールも含め、全てのスクロールを禁止する ③ overflow-xまたはoverflow-yを使用して1つの軸にクリッピングを適用することができる があります。[3][4] ①はoverflow: hiddenと同じですが、②、③の特徴はhiddenとは異なり、このことによってhiddenではできなかったことを簡単にできるようになりました。 本記事では、clipによってでできるようになったこと2つを紹介します。 1. position
ゲームなどでよく見る「長押しのボタン」のUIをWEBで表現してみた - Qiita
はじめに スマホゲームやSwitchなどのゲームのUIでよく見る、「長押しボタン」をWEB画面で実装します。 使う技術としては、HTML、CSS、JavaScriptだけで、JavaScriptのライブラリや画像やSVGは使いません。 長押しボタンと言ってもイメージが付かないと思いますので、完成系のGifを用意しました。（なぜか、WEBではあまり見かけないUIですよね...） 実装 1. メータ部分の作成 まずは、メータ部分を作成するのですが、divタグを使って円を作成します。 background-imageにconic-gradientを指定して、円グラフのような見た目ができるスタイルを使っています。
【効かない原因を完全解明】aspect-ratioの正体を暴く
みなさんこんにちは。 HTML/CSSにおいて、4：3や16：9など比率を維持した要素を作ることは長年の課題でした。かつてはpadding-topを使ってハック的に比率を維持する方法（記事の最後に軽く紹介します）が使われていましたが、少し前にaspect-ratioというまさに要素の縦横比を指定するためのプロパティが生まれました。 しかし、実はaspect-ratioを指定すれば絶対にその比率になる、というわけではないのです。皆さんも一度はaspect-ratioが効かなくて困った経験があるのではないでしょうか。 要素を思った通りのサイズにするためにも、aspect-ratioを改めて細かく理解していきましょう。かなり複雑なので、先に使い方を紹介した後になぜそうなるのかを詳しく解説していきます。 この記事を読めば、「aspect-ratioが効かない！」と悩むことはもうありません。 ※かな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
