CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
和欧混植 font-sizeの微調整 - Qiita
この記事の概要 Webサイトにおいて、文字の画面占有率は大きい割に、タイポグラフィの甘さったらないですよね。 組版のための仕組みが整っていないなど、仕方ない部分が大きいとは言えもう少し改善したくなります。 というわけで、和欧混植時に少しでも見た目が良くなる方法を考えてみました。 @font-faceでフォントを定義してsize-adjustで調整 Webフォント、ローカルフォント、どちらでも使えるテクニックです。 ローカルフォントを再定義する方法の方が面白い使い方な気がするので、例はそちらをお見せします。 仮に、ヒラギノ角ゴシックとAvenirを混植するとします。 通常の指定方法だとコードはこのようになります。
より良いタイポグラフィのための知られざるCSS
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)
React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話は無視して完全一致させる。そういう星のもとで開発している コンポーネントの分類 ロジックコンポーネント レイアウトコンポーネント ブロックコンポーネント インラインコンポーネント 定義 ロジックコンポーネント Provider や hooks などのデータ処理だけを扱い、子に渡すコンポーネント 一切の CSS や DOM 実体を持たない レイアウトコンポーネント レイアウトコンポーネントは複数の子ブロックコンポーネント(または slot)を持ち、子ブ
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
CSS :has Parent Selector
Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific element and many other things. In this article, I will explain the probl
Brad Woods Digital Garden
3D in CSSPlanted: Jan 2023 Tended: Jul 2024 Status: sprout Tended: Jul 2024 Hits: 1108 Intended Audience: Front-end developers The perspective property enables a 3D-space for child elements. Its value determines the strength of a child's z-transform effect. Large perspective values cause small transformations, small values cause large transformations.
Bolt.css
Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes. Use it for simple static sites or as a starting point and add your own classes. This is not a complete solution with layout grids, components, utility classes, and the like. Features No layout support No CSS classes Tiny Dark and Light modes How and why I made this I used the fantastic HTML Elements Refere
State of CSS 2022 | Blog | web.dev
Browser compatibility A primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022. Before studying the Interop efforts, it's important to look at Compat 2021’s efforts. Compat 2021 The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
Shadow DOM の CSS 管理方法 link rel / @import / adoptedStyleSheets | Basicinc Enjoy Hacking!
ベーシック アドベントカレンダー 2日目です。 Shadow DOM でコンポーネントに閉じ込めた CSS を定義することができますが、CSS の定義がやりやすいということはないです。<style> タグを JS 内でベタで書く、もしくは JS で style API を直接修正する…。ちょっとしたコンポーネントであれば良いですが現実的ではありません。 通常の HTML / CSS と同様に外部ファイルで管理したくなります。現時点では3つの方法が提供されています。 今回のデモとソースコードはこちら <link rel="stylesheets"> 普通に <link rel="stylesheets"> で外部 CSS ファイルを読み込むことができます。以前はできなかったようですが現在は標準化されるようです。 class NormalLinkCss extends HTMLElement
CSSのCascadingに追加されようとしているLayerという概念 - araya's reservoir
2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ
CSS { In Real Life } | Aspect Ratio is Great
Maybe it’s just me, but I feel like a lot of the time learning new CSS features doesn’t involve just learning a what a single property does, more like getting to grips with a collection of properties and how they work together — even learning a whole specification. That’s certainly not a complaint from me: it makes sense to consider properties as part of an ecosystem. But I have to confess, I love
[Sass] Vertical Rhythm と Modular Scale を使ってタイポグラフィを考え直した
概要これまで目測で文字サイズや余白を決めていたが、Vertical Rhythm と Modular Scale を使って、それなりにいい感じでタイポグラフィを調整する。 色々と試してみた結果だが、完璧なもの・それに近いものを今の環境で作るのは無理だと思う。フォントの問題もあるが、特に日本語のデザインだとデザインの調和が難しい。今回は、それなりのタイポグラフィを目指す。 Vertical Rhythm とはなぜタイポグラフィにおいて Vertical Rhythm（バーティカルリズム）は重要な手法なのか？ | デザイン | POSTDに記載があった。（以下、引用） Vertical Rhythm は印刷のタイポグラフィに起源を持つ概念です（多分）。Vertical Rhythm とは、ページの要素間の縦のスペースを揃えるようにすることを言います。 ベースラインは本文のプロパティ line-
![[Sass] Vertical Rhythm と Modular Scale を使ってタイポグラフィを考え直した](https://cdn-ak-scissors.b.st-hatena.com/image/square/f62b4b5f0ae163ab9f1286e25aac54215c570cc6/height=288;version=1;width=512/https%3A%2F%2Fb.0218.jp%2Fimages%2Fogp%2F20170326001009.png%3Fts%3Ddeeb110931cb1d8981dfd33050e25310334bde5f)
Mastering CSS: Vertical Rhythm
Vertical rhythm is an important concept in web design and development. It makes the page and typography feel consistent and visually pleasant. Maintaining the rhythm across the site, especially on larger collaborative projects, can be quite a challenge. With SASS, LESS and now the CSS variables, configuring and maintaining the vertical rhythm has never been easier. In this article, we are going to
Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法 - わたしと納豆ごはん
わたしは納豆が好きなのですが、HTMLやCSSなどをちょいちょ書くのが好きです。 といっても本業はそれとは畑違いの仕事。プログラマーやエンジニアとは無縁です。ですので、とうぜん素人に毛が生えた程度、下手の横好き、趣味の延長です。プロの方々には到底かないません。 でも、HTMLやCSSを書くのは楽しいので、このブログも自分でちょいちょいカスタマイズしています。ペースはゆっくりですが。 で、今回は「游ゴシック体」のことです。 以前からWindowsとMacの両方で使える游ゴシック体を使いたかったのですが、Windows版が細すぎて個人的には非常に見づらく躊躇していたのです。 ですが、いろんなサイトに載っているMac版の游ゴシック体の画像は太さも程よく見やすいものです。そこで、どうにかしてその太さにできないかと、いろいろ奮闘した話なのです。 知ってる人にはあたりまえの話ですが、何かの参考になるか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Opinionated Decision on CSS Resets
Headless UI
Radix UI
Aligning type to baseline grid with CSS variables