はじめに 初めまして、2025年度新入社員の岡嵜健太です。 現在私は、HTMLやCSS、（極まれにJS）を用いてflexboxの便利さに感動しながらモック作成やエンハンス業務などを行っています。 さて、早速ですが皆さんは以下のようなレイアウトを組むときはどのように実装しますか？ Flexbox？CSS Grid？Marginで調整？ 私はFlexbox大好き人間でしたのでなんとなくFlexboxを使いがちでした。←よくない そんな私が、業務で１からCSS Gridを学び、Flexbox・CSS Grid大好き人間になったので、今回はFlexboxとCSS Gridを上手に使いこなすためにそれぞれの特徴や考え方についてまとめました。 はじめに 1. Flexboxって？CSS Gridって？ Flexboxとは CSS Gridとは 2.考え方について Flexboxの考え方 3.得意と苦手

HTMLの属性値をCSSから参照できるattr()関数は、これまで::beforeや::afterといった疑似要素のcontentプロパティで使える機能として知られていました。 attr()関数の拡張構文は、CSSの値や単位の扱いを定義する仕様書「CSS Values and Units Module Level 5」で定義されています。さらに、Chrome・Edge 133（2025年2月）以降では、この拡張構文をcontentプロパティ以外でも利用できるようになりました。 拡張されたattr()関数には、次のようなメリットがあります。この記事では、デモを交えながら紹介します。 個別のstyle属性やクラスを減らせる HTMLの属性値をCSSの値として直接利用できる ※注意：本記事のデモは、Chrome・Edge 133以上でご覧ください。 1. HTML属性で色・サイズを指定するデモ

CSSで要素を中央に絶対配置、特にモーダル、メッセージ、スタック、ポップオーバーなどを中央配置するときに適したCSSの新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、直感的ではないCS […]

社内勉強会用 またしても破綻しがちな z-index の設計を考える。 --- 【質問への解答】 Q. Sassのmapでの管理はどうですか？ 使用しなくて良いと思います。 理由としては、z-index を map で定義したとしても @each するわけでもなく旨味が無…

本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。 その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。 CSS Variablesとは CSS Variables（CSS変数）は、カスタムプロパティとも呼ばれ、CSSで変数を使用できる機能です。 CSS変数を使うと、ウェブサイト内で共通して使われるテーマカラーなどの値を使いまわしたり、動的にプロパティの値を変更することが可能です。さらに、CSSで用意されている色関数と組み合わせると、同じく動的に相対的な色の定義が行え、表現の幅を大きく広げることが可能です。 MisskeyのWebクライアントに

ちょっと良いUIおれおれAdvent Calendar 2024 – 05日目 フォーム送信を HTML ではなく JavaScript から管理するとき、応答待ちの間はくるくるを出すのと合わせて各種入力を非活性化しておいてほしいなと思います。何か条件を満たすまで利用できないようにしておくとかも。 でも入力欄が 100 個あると全部に disabled 付けるのダルいですよね。<fieldset> を使うとひとつで済みます。あきらめないで！ デモ https://codepen.io/ginpei/pen/ByBjLYR <fieldset> <fieldset>: フィールドセット要素 – HTML: ハイパーテキストマークアップ言語 | MDN <fieldset> はフォームのグループ化を行う要素です。普通は（本来は？） <legend> と組み合わせて使います。 disabled

2016.05.30 【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入できます。 要素名::before{ content: 値; } 要素名::after{ content: 値; } このcontentプロパティの値を動的に変更したい時、jQueryを使用するのであれば、セレクタで、疑似要素::beforeまたは::afterを指定してアクセスすればいいのでは…？と思ってしまいますが、疑似要素はセレクタで直接指定することができません。そもそも擬似要素は非DOMであるため、JavaScriptから操作すること

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

気がつけばCSSの@layerが全てのモダンブラウザに実装完了している今日この頃、みなさまはいかがお過ごしでしょうか。 CSSでは、@layerに次ぐ新機能として @scope が検討されています。最近これについて勉強したのですが、これを取り扱う日本語記事が見当たらなかったので今回ご紹介します。 この記事では、CSS Cascading and Inheritance Level 6のFirst Public Working Draftの内容を紹介します[1]。これは去年12月のバージョンで、より新しいEditor's Draftとして今年4月のものがありますが、特に大きな変更はありませんでしたので、この記事の内容が執筆時点の最新情報だと思って差し支えありません。

Several years ago, I made a plea to save scoped CSS. One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from the community, it died. Well, great news — it’s back. And it’s so much better than the previous version. Even better, the W3C spec is mostly stable, and there’s a working prototype in Chrome now. We just need a little interest from the commun

In the spirit of “everything old is new again,” browsers are once again supporting the ability to style the scrollbar. Much like custom CSS mouse cursors, I feel this is also a mistake. When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this: The scope of concern for the browser is this: The browser’s UI is infor

鹿野さんに聞く！2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/ で発表した資料です。 各リンクはこちらから参照 https://tonkotsuboy.github.io/20230413_findy_css/

全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。 デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都…

以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド

今年になってもCSSの進化が止まりません、むしろ加速しています！ IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ そしてCSSの新機能として、単位を変数として使用できる「Variable Units（変数単位）」が登場しようとしています。 たとえば、--baseを8pxにし、4倍にしたい時はcalc(4 * (var(--base)))と記述していましたが、4--baseで32pxになります。 The Future of CSS: Variable Units by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Var

後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB

HTML 側の内容とセレクタがマッチすればスタイルが適用されます。このように CSS はとても単純な仕組みですが、その単純さゆえに大規模な実装では管理が難しく簡単に破綻してしまう問題点を抱えています。 CSS が破綻してしまう主な理由は以下の通りです。 セレクタには詳細度 (優先順位) が存在するスタイルには子要素にまで継承する同じセレクタを多重定義できるHTML 側の各要素はスタイルが複合的に適用される 開発現場では CSS が単純であるがために軽視されてしまう嫌いがあります。多くのプロジェクトでは Java や SQL などのコーディング規約やアンチパターンなどは用意されていますが、CSS は用意されていないケースは珍しくありません。その結果、統一されたルールがない状態でプロジェクトが進み、開発が佳境にさしかかったタイミングで CSS の逆襲が始まります。CSS が悪いわけではありませ

CSS 条件付き規則 （CSS Conditional Rules） Level 5 仕様 （草案） に追加された @when と @else 規則について つい先日、最初の草案が公開されたばかりですが、CSS 条件付き規則 （CSS Conditional Rules） の Level 5 仕様に、新たに加わった @when、および @else 条件付き規則について面白そうだったので簡単に紹介。 つい先日、最初の草案が公開されたばかりですが、CSS 条件付き規則 （CSS Conditional Rules） の Level 5 仕様に、新たに @when、および @else 条件付き規則が加わりました。 CSS Conditional Rules Module Level 5 - W3C First Public Working Draft, 21 December 2021 CSS