JavaScript でスタイルシートを構築する CSSStyleSheet
JavaScript でスタイルシートを構築する CSSStyleSheet 2024.10.26 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。 スタイルが適用された CSSStyleSheet オブジェクトは、document.adoptedStyleSheets プロパティに代入することで、ページ
フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更
CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。
CSSだけで作る！クールなノイズアニメーション - コハム
Make some hacky noise with CSS gradients 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 偶然見つけたエフェクトで、かなりクールだと思いました。繰り返しの放射状グラデーションのリングのサイズを@propertyを使って非常にゆっくりと0pxにアニメーションさせていたところ、0に近づくと狂い始めることに気づきました。 そこで、私は考え始めました。 セットアップ トリック アニメーション化 最後に セットアップ 最初に作業していたマスクは、適度な5pxと5pxの間隔の放射状の繰り返しマスクです： .noise { --lines: 4px; mask: repeating-radial-gradient( circle at center, #000, var(--lines), #000, 0, /*
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
CSS アニメーションでネオンサインの点灯の雰囲気を出してみる - Qiita
SVGのロゴをネオンサインが点灯するようなイメージのアニメーションにできないかと試行錯誤した結果を記事に残しておく。 最終完成バージョン まずは出来上がりを、Codepen で確認してほしい。Start ボタンを押すと、ロゴが点灯する。 ネオンサインが点灯する雰囲気にみえるとうれしい。 （と言っても、今となってはネオン管っぽいLEDチューブが主流なので、本物のネオン管を見たことがない世代が多いかもしれないが...） See the Pen Neon Sign by hiroatsu (@scqspcfg-the-solid) on CodePen. なお、このアニメーションは、地図共有サイト Toboggar のスプラッシュ画面で使用しているものである。 どうやったらネオンサインの点灯のように見えるか 今回の方法がベストだとは思えないし、ベターですらないような気がするが、とりあえず私はこれ
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
インパクト抜群！CSSで演出するグリッチ効果26選 - コハム
25+ CSS Glitch Effects 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブやモバイルアプリケーションにテクニカルなひずみのある外観を追加するためのグリッチ効果のコレクションをお探しでしょうか。 今回の記事では、GitHub、CodePenなどの一流サイトから収集した無料のHTML、CSSグリッチ効果のコードサンプルをご紹介します。 ぜひチェックしてみてください！ グリッチ効果はウェブページ上でちらつきや歪んだ外観を表現するのに役立ちます。 テクノロジーのトラブルを模倣するエフェクトで、単純で退屈なサイトにインパクトを与えます。 創造性と目を引くようなアニメーションを持つ、素晴らしいCSSグリッチ効果をご紹介していきましょう。 01. Glitch Effect 02. SVG Glitch 03. glitch
文章の折り返し指定のCSS最新版 - ICS MEDIA
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
リンクの入れ子は subgrid が最適解かもしれない
はじめに リンクの入れ子とは何かというと、以下のようなデザインです。 カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。 しかし、以下のようにマークアップすることはできません。 <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML のルール的に <a> の入れ子はダメだからです。 Subgrid を使った方法 Subgrid がまだない時代からいろ
CSS だけで、かつ不要な div を使わずに、擬似 Progressive blur - Qiita
この記事の概要 あるときこちらの記事を見ました。 CSS でのストレートな実装はできないようで、なかなかパワー系の実装が紹介されていました。 この表現のためだけに 350 もの div を作成するのはなあ……と思い、もう少し現実的なやり方を考えてみました。 この記事ではコードの一部を載せていますが、全体はこちらのリポジトリに置いてあります。 Progressive blur の実現の方向性 usagimaru さんの記事にある通りですが、現状実現されている方向性は以下のどちらかです。 フィルターを小刻みに並べる アルファマスクによる擬似 Progressive blur 1 の フィルターを小刻みに並べる は冒頭の codepen のようなやり方です。 2 の アルファマスクによる擬似 Progressive blur は、大きめのボケがかかった要素にマスクをかけるようなやりかたです。 こ
CSS 変数のフォールバックトリックを使った CSS Hooks というスタイリング用ライブラリの仕組み - Qiita
CSS 変数のフォールバックトリック ドキュメントにあるように、CSS 変数のフォールバックトリックを使って実現されています。 と言っても、これを読んだだけではイマイチ分からなかったので、もう少し詳細に書きます。 上記ドキュメントでも例で使われているコードをベースに説明します。 <a href="#" style="color: var(--hover-on, #f00) var(--hover-off, #0f0);"> Hover me </a> <style> * { --hover-off: initial; --hover-on: ; } :hover { --hover-off: ; --hover-on: initial; } </style>
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]Flexboxを入れ子にすると変な隙間ができてしまう
この現象に言及している記事が少ないため、解決法と隙間ができる理由を取りまとめておこうかと思います。 Flexboxを入れ子にするとできる変な隙間 下記のような、親Flexコンテナ＞親Flexアイテム＞子Flexコンテナ＞子Flexアイテム、と二重に入れ子になったFlexboxがあります。 <div class="parent-container"> <div class="parent-item"> <div class="child-container"> <div class="child-item"> あいうえお </div> </div> </div> </div> .parent-containerはflex-directionをcolumn方向に .parent-containerはflex-wrapをwrapに .child-itemはflex-basisで表示幅を100%よ
![[CSS]Flexboxを入れ子にすると変な隙間ができてしまう](https://cdn-ak-scissors.b.st-hatena.com/image/square/841ee95e22f397c47d1b97c2be778d87f0192b9e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--IzHHf6GA--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCSS%25255DFlexbox%2525E3%252582%252592%2525E5%252585%2525A5%2525E3%252582%25258C%2525E5%2525AD%252590%2525E3%252581%2525AB%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%2525A8%2525E5%2525A4%252589%2525E3%252581%2525AA%2525E9%25259A%252599%2525E9%252596%252593%2525E3%252581%25258C%2525E3%252581%2525A7%2525E3%252581%25258D%2525E3%252581%2525A6%2525E3%252581%252597%2525E3%252581%2525BE%2525E3%252581%252586%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Audyest%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc4NDI2NGEyYmQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
Randomness in CSS using trigonometry
In the past, I have covered the topic of pseudo-randomness in CSS using modulo operation and I used prime numbers to create an automatic counter that can be used to generate different values for each object. Thanks to that, we could compute pseudo-random values for each element independently. As robust as this solution is, it has few downsides: The modulo function is not continuous It is overly co
Firefoxだけに実装された関数で本文を縮小して現在見ている部分を分かりやすく表示する「ミニマップ機能」を実現したフロントエンドエンジニアが登場
FirefoxではCSS関数の一つとして、他の要素の内容をそのまま表示する「element()」が実装済みです。その関数を利用して、フロントエンドエンジニアのステファン・ジュディスさんが通常のブログにミニマップ機能を実装しています。 A Firefox-only minimap | Stefan Judis Web Development https://www.stefanjudis.com/a-firefox-only-minimap/ ミニマップはプログラミング用のエディタなどによく実装されており、例えばVisual Studio Codeでは下図のようにミニマップが表示されます。コードの全体像が見えるため、自分が今どのあたりを閲覧・編集しているのかを確認しやすく、またコードの特定の場所までスクロールする時も目的の場所が見つかりやすくなっています。 ジュディスさんは、上記と同等の機能
CSS Box Shadows Generator
{ this[offset] = event.detail[['x', 'y'][index]] + 'px'; if (this.$refs && this.$refs[offset]) { this.$refs[offset].value = this[offset]; this.$refs[offset].dispatchEvent(new Event('input')); } }); }, }">
HTML 全体の CSS を取得して Shadow DOM に適用する
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Raectでsrc以下のsvgをインポートした時に、cssで色を変える方法 - Qiita
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes
