HTMLのdialog要素をスタイリングするときに気をつけること - Qiita
この記事の概要 dialog要素、ご存じですか？ その名の通りダイアログ的な振る舞いや役割をする要素です。 モーダルウィンドウと言えばより広く伝わるでしょうか。 簡単なダイアログならライブラリを使わなくても事足りるのですが、スタイルを当てる際に気をつけた方が良さそうなことがあったので記事にしてみました。 注意 Chrome（とEdge）はよっぽど大丈夫ですが、FirefoxとSafariはまだ本番投入してもブラウザが対応していません。 もう少しすれば使えるようになると思うので、今のうちに素振りをしておくのが良いかもと思います。 ポリフィルもあります。 デフォルトのスタイル 2022 年 3 月 4 日現在、ChromeとFirefoxではこのような感じです。 <dialog> <p> 秋も更けて、暁闇がすぐに黄昏となり、暮れてゆく年に憂愁をなげかけるころの、おだやかな、むしろ物さびしいある
CSS の transparent が透明じゃない世界
【追記】2022年3月にリリースされた Safari 15.4 で以下の問題は起きなくなりました。 CSS で色指定をするときに transparent というキーワードが使えますね。 その名のとおり「透明」の指定なんだけど、特定の環境では期待した結果になりません。 これがどう見えるか この四角い領域の表示は閲覧環境によって変わります。 ↓これの左右どっちか。 Mac の Safari では右半分のように黒く濁ったグラデーションになります。黒というか灰色というか。 また iOS, iPadOS だとすべてのブラウザーが右。 Safari だろうが Google Chrome だろうが Firefox だろうが Opera だろうが Microsoft Edge だろうが DuckDuck Go だろうが。 それ以外の環境だと左半分のようにクリアなグラデーションになっているはず。 要するに
CSSの新機能カスケードレイヤーが主要ブラウザにサポートされます、最初に理解しておきたい基礎知識を解説
CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザすべてにサポートされます。カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順番をカスケード内で明示的にレイヤー化（階層化）でき、これまでのCSSの実装方法が大きく変わるものです。 Chromeのデベロッパーによるカスケードレイヤーの基礎知識を紹介します。 Cascade layers are coming to your browser by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに準じて翻訳しています。 はじめに CSSの詳細度とカスケード @layerの動作 レイヤーの優先順位の管理 インポートファイルの整理 レイヤーとカスケード カスケードレイヤーの注意点 カスケードレイヤーの参考リソース はじめに カスケードレイヤー（@layerC
background-imageの表示ラグ問題を（ほぼ）CSSのみで実装するCSS遅延読み込みで解決
ベストプラクティスとも限らないですが、プレーンなHTML・CSSサイトでも手軽に実装できる方法を紹介します。 background-imageの一瞬表示されない問題 CSSのbackground-imageはその画像が表示されるまで読み込まれません。例えばユーザーのアクションに応じてbackground-imageを変える場合、変更後の画像はユーザーアクションが行われてから初めて読み込まれます。（この読み込みは初回のみ行われるので、2回目以降は発生しません） 遅延表示のサンプル より具体的な現象としては、独自デザインのラジオボタンやチェックボックスをクリックした時、初回のみ一瞬遅れて表示される、というのがあります。他にもdisplay: noneで非表示にしている要素を表示させた場合でも同様の表示ラグが発生します。 ▼初回のみ表示が遅くなっている様子（分かりやすくするためにネットワーク速度
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
今から使える、いつか使える日本語ウェブ文字組みの機能
今から使える、いつか使える 日本語ウェブ文字組みの機能 CSS Nite 『CodeGridから読み解くイマドキのCSS 第二弾』 2021-11-19（金） 自己紹介 名前 國仲（くになか）義則（よしのり） / Online: matori 所属 PixelGrid Inc. フロントエンド・エンジニア Twitter @ub_pnr ウェブサイト Unformed Building 日本語のウェブサイト 日本語でもウェブサイトは問題なく作れるし見られる 書籍などで使われる文字組みの機能はかなり制限されていた 少しずつではあるが、できることは増えてきている それらの機能をいくつか紹介 今すぐ使える機能 ルビ 基本的なHTML 必要な要素は3つ ruby, rt, rp 春（はる） 以前までのHTML 春（はる） rb要素は削除され、非標準となった ルビの3要素 ruby ルビ全体を囲む要
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。 たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。 CSS コンテナクエリの基礎知識と便利な
2022年から使ってゆくCSS 〜疑似クラス :is() 〜
こんにちは、森田です。 2022年初記事です。明けましておめでとうございます。 本年も Gaji-Labo よろしくお願いいたします。 さて、年も変わったことですし今年から新しいことを始めたいと思います。 今年はまず疑似クラス :is() を使っていきたいと思います。 疑似クラス :is() とは /* 今まで */ section h1, article h1, aside h1, nav h1 { font-size: 25px; } /* 疑似クラス :is() を使うと */ :is(section, article, aside, nav) h1 { font-size: 25px; } :is() は、複数のセレクタを1つにまとめて指定できる疑似クラスです。 上記のように、今までカンマで子孫セレクタまで何度も書かなければいけなかったものを1つにスッキリした記述にすることができま
2022年のCSS | gihyo.jp
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
GitHubのポップアップメニューはdetailsタグと:beforeが使われててクレバーだった - Qiita
概要 普段使ってるGitHubのUIパーツの実装を見てみたら真似したいエッセンスがあったので紹介します。 GitHub上でちょいちょい使われてるポップアップメニュー 図 マイページのコンテキスト切り替えメニュー 図 プルリクエストページのプロジェクト選択メニュー なにが優れてる？ Javascript使ってない メニュー外をクリックしたらメニューが閉じる サンプルコード <div class="wrap"> <details> <summary>button</summary> <div>menu</div> </details> </div> *, *:before, *:after { box-sizing: border-box; } .wrap { width: 500px; height: 500px; margin: 0 auto; padding: 50px 50px; }
Defensive CSS
👋 This article has been expanded into a new project called Defensive CSS. Due to the fact that the content here will not be updated, I recommend you to read defensivecss.dev instead. Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or
CSSだけで要素を垂直中央に配置しつつ、あふれたらスクロールできるようにする - yuhei blog
JSを使わずにCSSだけで要素をページの真ん中に配置するという方法はいろいろある。 けど、その要素の中身の高さが、親の高さを超えてしまうと、その上部分が見切れてしまうというパターンが多い。 そういう場合はJSを使って位置を調整することが多いけど、CSSだけで解決できそうな気がしたのでやってみた。 .center { position: fixed; right: 50%; bottom: 50%; width: calc(100% - 20px); max-width: 600px; max-height: calc(100% - 20px); overflow-y: auto; transform: translate(50%,50%); } Element in the vertical center where you can scroll これで、.centerの中身が少ないときは
table内のborder（罫線）の太さがバラバラになるバグ｜Chrome
Chromeブラウザでtable要素内のborderの太さがバラバラに表示されてしまう問題に遭遇しました。 trタグやtdタグに指定したborderプロパティの太さが一部太くなってしまう現象が発生しています。 Mac版のChromeでは2021年の6月頃からこの状況が続いています。 この問題の原因はブラウザのバグとページの拡大率にあります。 ブラウザ側のスケール（ページのズーム）を標準のサイズに変更すれば、罫線が正常な太さで表示されるようになります。 次の設定をご確認ください。 設定 → デザイン → ページのズーム → 100% ショートカットキーの場合 ・Mac: Command + 0 ・Windows: Ctrl + 0 あくまでブラウザ側の問題であるため、ソース側を修正する必要はありません。 近年のChromeはtable側の仕様を大きく変更したため、この問題はその影響によるもの
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現 - ICS MEDIA
ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法
CSS Gridで2カラムのレイアウト（メインとサイドバー）を実装し、サイドバーにposition: sticky;を定義したけど、機能しなかったことはありませんか？ CSS Gridでスティッキーが効かないときの原因とその対応方法を紹介します。 Using Position Sticky With CSS Grid by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに gridコンテナの子でposition: sticky;が機能しない align-itemsのデフォルトの動作 別の例 終わりに はじめに position: sticky;がgridコンテナの子で期待通りに機能しなかったことはありませんか？ 数日前、私は友人がまさにその問題を解決するのを手伝っていたので、それについて解説し
PostCSS で先取りする、未来の CSS 7選
はじめに この記事は 個人的なアドベントカレンダー2021 の1日目です。 次回： postcss-preset-env PostCSS のプラグイン postcss-preset-env は、未来の機能候補として実際に議論されている記法や機能を Polyfill するプラグインをまとめたものです。 postcss-preset-env では、 custom property (var(--some-value)) や nesting rules (ネストしたセレクタ) といった Sass などのプリプロセッサでお馴染みの機能から、ニッチだが便利な機能まで、さまざまな策定中の機能を取り入れることができます。 また、いずれも策定中の機能であるため、将来、CSSの機能として組み込まれる可能性がある機能も含まれており、より標準に近い形で新機能を使えます。 （策定中のため、書き方が変わったり、機能
Speed Up Google Fonts – CSS Wizardry
19 May, 2020 Speed Up Google Fonts Written by Harry Roberts on CSS Wizardry. Table of Contents Testing Default/Legacy font-display: swap; Async CSS preload preconnect Bonus: font-display: optional; Comparisons and Visualisations Findings Google Fonts Async Snippet Ten-Second Version: If you really can’t be bothered going to all of the effort outlined in this post, there is a super rough-and-ready,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind CSS Cheat Sheet - Flowbite
