CSSで要素を中央に絶対配置、特にモーダル、メッセージ、スタック、ポップオーバーなどを中央配置するときに適したCSSの新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、直感的ではないCS […]
CSSでは、さまざまなカラーモデルで色を設定できます。16進数によるHEX値、rgb()によるRGB値、hsl()によるHSL値、lab()によるLAB値、oklch()Oklch値、oklab()によるOklab値など、現在ではすべてのブラウザにサポートされています。 中でも最近では、トーンを合わせたカラーを簡単に作ることができるOKLCHカラーの人気が高まっています。このOKLCHカラーについて紹介します。 oklch.fyi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 OKLCHカラーとは カラーモデルとは 色域とは OKLCHの構造 OKLCHだと明るさの一貫性が簡単 OKLCHだとシェードも簡単 OKLCHだとグラデーションも美しい カラースペースのサポート 最大彩度 ブラウザのサポートとフォールバック OKLCH
今回はページ内リンクを使用した際、リンク先の位置を思い通りに設定する方法について解説します。 この方法を知ることで、追従するタイプのヘッダーを設定している場合にページ内リンクのリンク先がヘッダーの裏に隠れてしまうことを防ぎ、閲覧しやすいサイトを作成することができます。 一緒に理解を深めていきましょう。 ページ内リンクとは ページ内リンクとは、同じページ内でジャンプ先を指定し、クリックをするとジャンプ先に移動するリンクのことを言います。 例えば、ブログの目次。 多くの場合は最初に目次があり、見出しごとにページ内リンクが設置されています。ユーザーは目次の文章を読んで興味のある箇所をクリック（タッチ）すればスクロールすることなく内容が記述されている部分まで遷移することができます。 ページ内リンクを設置することで、サイト閲覧者が知りたい情報に辿り着くまでの動作や時間を短縮し、サイトのユーザビリティ
幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents;
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
ポップオバーAPI 最新版Chrome 114に搭載された新機能で、コンテンツの一番上に重ねて表示するUI「ポップオバー」。補足の情報やユーザーにアクションを促すことができます。 Introducing the popover APIでは、具体的な使い方や実装例が紹介されています。 範囲スライダーをCSSでカスタマイズ How to Create a Custom Range Slider Using CSSでは、モダンなCSSテクニックを使って、ネイティブHTMLの<input>要素だけで人目を引く、カスタム範囲スライダーを作成する方法が紹介されています。 See the Pen CSS only custom range sliders by Temani Afif (@t_afif) on CodePen.
はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と
はじめに ReactやAngular、Vue.jsなどの主要なフレームワークを使えばワンステップ＋αで簡単に実装できるようになっていることからSSLさえ導入していればおまけ的に導入できるイメージのPWA。 実装を進めていくと「web表示だけ【ホーム画面に追加】の誘導モーダルを出したい」「PWAの環境下でのみストレージにデータを保持させておきたい」といったときにPWA環境か通常のブラウザかを判定する場面が多かれ少なかれ出てきます。 しかし、あまりここに触れている記事を見かけなかったので備忘録も兼ねて掲載します。 本題 メディアクエリのパース結果を利用してJavaScript上で判定します。 以下はmanifest.jsonでディスプレイモード「standalone」を指定した場合を想定しています。
CSS の疑似要素 :before や :after の content プロパティの値にコードを入れて、特殊文字を表示することができる。 ただ、特殊文字のコードをそのまま記述するのではなく、コードは16進数に書き換えてからcontentプロパティの値に記述する必要がある。 また、改行や空白は少し注意が必要。 content で改行や空白を表示する方法についてはこちら » content用の書式 特殊文字のコードを、content プロパティの値にするには、下記のように書き換える。 「&#△△△;」→「¥0▲▲▲」 (△△△は十進数の数値、▲▲▲は十六進数の数値) 記号「»」の場合…「»」→「¥0bb」 書き換える内容は下記。 ・「&」→「¥」 ・「#」→「0」（←数字のゼロ） ・数字は「10進数」→「16進数」 ・最後のセミコロン「;」は省略。 サンプル（例） :before
皆さんこんにちは、末ちゃんです。 先日また我々を喜ばせるニュースが舞い込んできました。 Google 検索が公式にInternet Explorerのサポートを10月1日に終了したというニュースです。 https://twitter.com/cramforce/status/1443962459723755533 上記はGoogleのエンジニアさんによるTweetです。 なお、まったく使用できなくなるわけではなくて、基本的な検索機能は引きつづき利用できるとのことです。 なお、Internet Explorer 11 自体も既に提供元のMicrosoftより、2022年6月15日にサポートが終了することを発表しています。 未だに Internet Explorer 11 をお使いの方は、いち早く移行されることをおすすめします。 ヘッダー固定されたページのアンカーリンク問題 さて、ようやく本題
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
