値の補間計算を簡潔に記述できる CSS の `progress` 関数
CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。 CSS の progress 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。フォントサイズをレスポンシブに調整する流体タイポグラフィ（Fluid typography）や、画面サイズに応じたレイアウトの調整、スクロール量に応じたプログレスバーの表示など、さまざまな場面で利用できます。progress 関数自体で新しい機能を提供できるわけではありませんが、既存の記述方法と比較してよ
iOS16.7.xのSafariでネストされたgridレイアウトを使うと無限に再レンダリングが発生する問題に遭遇した - Qiita
はじめに iOS16.7.xのSafariでネストされたgridレイアウトを使うと無限に再レンダリングが発生する問題に遭遇したので他に困っている人がいた時のために残しておきます。 注意 この記事ではSvelteで検証しているコードが出てきますが、自分の環境がたまたまSvelteを使用していただけで本事象はSvelteは関係ありません。 iOS16.7.xで事象を確認しましたが、どの範囲のバージョンまでがこの問題を抱えているのかわかっていません。 問題のスクリーンショット 以下の画像の左側を見て分かるようにiOS16.7.x Safariでアクセスした場合、通常1秒程度で読み込めるページが読み込み時間、15秒を超えています。 iOS18.5でアクセスした場合は両方とも問題ありません。 再現が取れるコード HTML, CSS, JSでも再現が取れるのでSvelteが要因ではない。 HTML,
アイヌ語の分かち書きで語の分割禁止 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? アイヌ語のカタカナ表記は分かち書き（わかち書き、分かち組）で、区切られた語は分割禁止と聞きました。そのような分割禁止を実現しようとして試してみたが、分からないことが多かった…というメモです。 語を分割禁止する機能を持つワープロなどは、わりと見つかりませんでした。ここでは主にCSSについてメモします。印刷物にするならVivliostyle12を使うのがよいと思います（推し）。それと、InDesignと秀丸について少し触れます。 CSS CSSのword-breakプロパティの値keep-allはCJK（中国語、日本語、朝鮮語）の文字の間で
JavaScript不要! HTMLとCSSでつくるカルーセルUI - ICS MEDIA
2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。 ▼HTML・CSSだけで実装したカルーセル カルーセルUIといえば、いちから自前で用意するのではなくSwiper.jsなどのJSライブラリを採用してきたコーダーも多いのではないでしょうか？ ICS MEDIAでもカルーセルUIを作成できるJSライブラリをまとめた記事があります。 『カルーセルUIを実現するJSライブラリまとめ - 導入手間や機能の比較紹介』 本記事では、新しいCSSでどのようなカルーセルが実現可能になるのか紹介します。 ご注意：本記事のデモは、Chrome 135・Edge 135以上で閲覧ください。
Customizable select elements - Learn web development | MDN
Previous Next This article explains how to create fully-customized <select> elements using experimental browser features. This includes having full control over styling the select button, drop-down picker, arrow icon, current selection checkmark, and each individual <option> element. Warning: The CSS and HTML features demonstrated in this article currently have limited browser support; check the b
FlexboxよりGridを使う理由 | ダーシノ(@bc_rikko)
FlexboxよりGridを使う理由 先日、Grid First, Flex Thirdという記事を読んだ。要約すると「レイアウトを行う際は grid > block > flex の順で使うべき」という主張がなされている。 並びのレイアウトはFlexbox、格子状に区切ってどこに何を配置するかはGridを使う派だったのだが、Gridの有用性を再認識した。 Flexboxの使いづらいところ Flexboxで要素を並べると子要素の幅を指定しても圧縮されてしまう。 <section class="layout"> <div class="item"></div> <div class="item"></div> ... </section> .layout { display: flex; overflow-x: auto; } .item { width: 200px; } 子要素の幅を維持
【CSS】CSSだけで作るカルーセル - Qiita
はじめに みなさんはカルーセルを作りたいと思ったことはありますか？ 今までは、ライブラリーを使ったりしても、アクセシビリティの担保ができてなかったり、 少し複雑なJSを書かなくちゃいけなかったりと、カルーセルを自作するのは大変でした。 しかし、Chrome 135 以降では、CSS Overflow Module Level 5 が適応され、CSSだけで、カルーセルが作れるようになりました。 そのため、この記事では、CSSだけでカルーセルを作る方法を紹介しようと思います。 CSSだけで作るカルーセル カルーセルのコンテナを作る まずは、このようにカルーセルのコンテナをつくります。 <ul class="carousel"> <li class="carousel-item">1</li> <li class="carousel-item">2</li> <li class="carouse
novel-writerでA4横 40文字40行のPDFを作るカスタムCSS - Qiita
novel-writerはVivliostyleを用いてCSSから文字組版を行います。 公募などで提出に使われるA4横、40文字40行の組版を行うカスタムCSSを書きました。プロジェクトルートにcssフォルダを作り、その中に以下のprint.cssを配置してPDFプレビュー、出力を行なってください。 @charset "UTF-8"; :root { --paper-width: 297mm; --paper-height: 210mm; --side-margin: 15mm; --font-size: calc((297mm - var(--side-margin) * 2) / 40 / 1.75); --paragraph-length: calc(var(--font-size) * 40); --project-title: '提出作品'; } html { orphans:
CSS における if と function の提案 | blog.jxck.io
Intro CSS に if() および @function が提案されている。 仕様がこれで確定したとは言い切れないため、背景および現状にフォーカスして解説する。 なお先に言っておくが、関数の再帰は初期仕様から外されているため、「CSS がプログラミング言語になった」という話ではない。 if() まず Dark/Light 2 つのモードをもつコンポーネントを考える。Old School な書き方だとこうなるだろう。 <style> .dark { color: #fff; background-color: #000; } .light { color: #000; background-color: #fff; } </style> <my-div class="dark">dark</my-div> <my-div class="light">light</my-div> この場合
「Yu Gothic UI」フォントの鍵括弧、繋げるとブラウザ表示で重なる問題を調べてみた - 俵のメモ帳
Yu Gothic UIに text-spacing-trim を適用するとバグる を読んでいて、気になってしまったので、実際にYu Gothic UIのファイルの中身を開いて調べてみました。 発生している問題 回避策 原因 Yu Gothic UI 特有の問題？ まとめ 発生している問題 Yu Gothic UIは、Windows 10からプリインストールされているUI表示用フォントです。 手元の環境で確認したところ、Windows 11 23H2 (ビルド 22631.4317) 時点では、「Yu Gothic UI Version 1.93」がインストールされていました。 このフォントをChrome系ブラウザで利用すると、鍵括弧表示が崩れる場合があります。具体的には、 「abc」「abc」 のように、閉じ括弧・開き括弧が隣接するケースです。 」「 の部分ですね。この際に、閉じ括弧と開
なぜ「」「」や（「」）で文字が重なってしまうのか。 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、テキスト入力フォームで約物（日本語の文章における、カッコや点などの記号のこと）が重なってしまう現象について、その理由を記載しただけの記事です。 解消することを目的としません。 ただ、理由が分からないとモヤモヤしますよね。 すこし前の私と同じようにモヤモヤしている人は、続きを読んでいただき、「だから重なっていたのかー！」とスッキリしていただければと思います。 事象 - 文章の「美しさ」を損ねる まずは、事象について再現してみます。 特に発生しやすいケースは以下の 3 つでしょうか： ①「」「」とカッコが続く場合 ②箇条書き（・）
【Chrome135】訪問済のリンクが訪問済になったりならなかったりする - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Partitioning :visited links historyという提案があります。 2025年4月にリリースされるChrome135で有効になる機能です。 これ実はユーザにわりと影響のある変更なのですが、全く知られておらず話題にも上がっていないんですよね。 なにせ日本語記事が一切見当たらない。 ということで、ここで紹介しておきます。 具体的にどうなるの？ まずGoogleとYahooJapanで同じ語句を検索します。 ここでは例としてPHP8.4がリリースされたので新機能全部やるを使います(宣伝)。 この記事を見たことがない場
はしれ！ももちどり - Qiita
あそびで「百千鳥」Webフォントで鳥さんが走るアニメーションを作りました ※PCで見た方が速く走っているように見えます 作ったいきさつ 先月、Adobeから「百千鳥」というバリアブルフォントが発表されました。 このフォントに鳥さんの絵文字が入っているということで、この鳥さんはイラレで召喚でき、文字幅やウェイトを変えることによって鳥さんが動くというものでした。 この鳥さんでアニメーションできないかな？ と思い立って、「百千鳥 VF」のWebフォントを見たところ、「🐦️」の絵文字で鳥さんを召喚(表示)することができた！！！ので、CSSで遊びました！ ソースコードの詳細 バリアブルフォントのCSSの扱いとCSSアニメーション 以下記事を参考にして、アニメーションのさせ方もこの記事を参考にしました。 鳥さんはfont-variation-settingsというCSSプロパティで、wght（fon
HTMLとCSSでつくる! 1文字ずつ変化するテキストのアニメーション - ICS MEDIA
前回、以下の記事でリンクテキストをホバーした際のアニメーション実装例をご紹介しました。 『HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選』 さて、今回は少しだけ複雑になりますが、HTMLとCSSのみでより凝った表現をする方法を紹介します。 リンクテキストといえば、ヘッダーなどのメニューとして小さめのフォントサイズでデザインされていることも多いでしょう。 そんな小さいサイズのテキストでもホバー時に目を引くような、1文字ずつ区切ったテキストアニメーションのアイデアを紹介します。よりサイトの雰囲気に合う演出をしたい、またアイデアの引き出しを増やしたいデザイナーやエンジニアの参考になれば嬉しいです。 ▼ 今回紹介する実装例一覧はこちらです。 記事前半では、実装方法について基本となるアニメーションの仕組みと実装時に気をつけたいことを解説し、後半はバリエーションの実装例を掲載
Dialog と Popover #1 | blog.jxck.io
Intro HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初にあ
CSSを書く人の為のHTML5 inline or block 早見表 - Qiita
ドーモ こんにちは 皆さんはCSSは書いておられますか？ 毎日書いてるよって人も、たまに書くだけだよって人もおられるかとは思いますが、ごくまれに書いてるはずのCSSが上手くHTMLに当たらないって経験は必ずされると思います。そのような時は、CSSで"display:ほにゃらら"と当ててやるとたちまちご機嫌なCSSに立ち返ります。MDN"display"正確な解説はMDNをご覧ください この原因はHTMLの初期値のスタイル block or inlineという要素がCSSの邪魔をしているのです。 block要素には、block要素のCSSルール(具体例:inline要素とは異なり高さと幅を指定できる。) inline要素にはinline要素のCSSルール(具体例:inline要素の marginは、 左右のみ指定可能。上下は指定不可。)がそれぞれ独自にあります。 わかりやすく言うとサッカー部
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS liの高さがline-heightで設定した値より大きくなる
cssでインジケータ - Qiita
Webのテキスト表現 - Qiita
Weird statement about display:none and visibility:hidden and the accessibility tree · Issue #37894 · mdn/content