タイポグラフィCSS
typography.md タイポグラフィ font-family フォントは Web サイトの印象に直結するため、一概にこれが良いとは言えない。 特にこれと言った指定がされていない場合は font-family: sans-serif のみで良い。 Windows 11/10 では 2025 年のアップデートにより Noto Sans JP が標準搭載された。色々と問題があった游ゴシックの呪縛から解放されたのは大きい。 Android はメーカーにより削除されている可能性はあるが、そうでない場合は原則的に Noto Sans CJK JP が適用される。 Mac/iOS はヒラギノ角ゴ ProN が適用される。 アップデートによるフォントの変更の懸念はあるものの、ディスクリシアの方々は UD デジタル教科書体などの読みやすいフォントを設定している可能性があるため、アクセシビリティの観点で
以前に 劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。 ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。 そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。 スタイルシートの種類と階層 スタイルシートといっても、いくつかあります。 多くのド
詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。 @acab/reset.css -GitHub :where()とか新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる CSSの疑似クラス「:focus-within」が素晴らしい
# フロントエンドエンジニアのステップアップのための集合知 ジュニアとミドルはソフトスキル多めなのでフロントエンドエンジニアに限らなそうです - 期待役割 ... 該当ステップ内での TO BE - できてほしい ... 該当ステップ内での WANT (🔐は次ステップへ進む上では MUST) - 次のステップへの期待 ... 次のステップへ進む上での MUST ## ジュニア (ステップ1) ### 期待役割 - 指示された小さいタスクをこなすことができる - ~3人日くらいの影響範囲の閉じたタスクを想定 - 仕様が決まっている、あるいは不明な場合は質問できる ### できてほしい #### ハードスキル - 初歩的なセキュリティバグを生まない - #### キーワード - XSS - コード内に必要に応じて意図をコメントとして残せる - #### 🔐自立的にファイルや関数を分割ができ
新しいプロパティを使ったCSSリセットが紹介されていましたが、扱いが難しそうな印象だったので解説します。 The New CSS Reset とは The New CSS Reset | the-new-css-reset は、簡潔にいうと all: unset で、全ての要素に対してブラウザのデフォルトのスタイルシート（UAスタイルシート）を亡き者にした後に、 display: revert でUAスタイルシートのdisplayの値を蘇生させたCSSリセットです。 /*** The new CSS Reset - version 1.0.0 (last updated 8.7.2021) ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */ *:
css-responsive.md CSS Responsive Rules 目的 レスポンシブ実装の判断基準を明確にし、不要なブレイクポイントとコード量を最小化する。 CSS はブラウザへの「提案」であり、厳密な命令ではない。ブラウザに委ねられる仕事は委ねる。 基本方針: エスカレーション順序 レスポンシブ対応は以下の優先順序で検討する。上位で解決できるなら下位は使わない。 すべての要素がレスポンシブである必要はない。最初に「そもそもレスポンシブにすべきか」を判断する。 0. 静的（Static） 本質的に固定サイズの要素はレスポンシブにしない。 タグ・バッジ・ラベルなど、内容量が少なく固定的な小さな要素 アイコン（1em でフォントサイズに追従するだけで十分） 装飾的なボーダーや区切り線 固定サイズのアバターやロゴマーク これらに clamp() やクエリを適用するのは過剰であり、コー
Introduction GPT-5.1, our newest flagship model, is designed to balance intelligence and speed for a variety of agentic and coding tasks, while also introducing a new none reasoning mode for low-latency interactions. Building on the strengths of GPT-5, GPT-5.1 is better calibrated to prompt difficulty, consuming far fewer tokens on easy inputs and more efficiently handling challenging ones. Along
Bootstrap 5
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contrib
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
上達のコツはやはり反復練習！ということで、第4回では、InDesignで作られた書籍のPDF（なければプリントアウト）をもとに、紙面デザインをそっくりに再現する方法について解説します。何度か作成していくうちに、Vivliostyleの可能性やクセがつかめてくるはずです。 CSS組版を覚える早道は……？ 筆者は2023年に『Web技術で「本」が作れるCSS組版 Vivliostyle入門』を執筆しましたが、これを読んだだけで自在に本を組めるようになるかといえば、残念ながらそう簡単なものではないというのが正直なところです。 では、どうやってCSS組版を勉強すればいいのでしょうか？ ひるがえって、自分がたどった道のりを思い出してみると、CSS組版とVivliostyleを使い始めたのは、書籍の原稿整理の一環として、書籍デザイン通りの字数・行数をCSS組版で再現したのが始まりでした。何度もそれを繰
How modern browsers work
Note: For those eager to dive deep into how browsers work, an excellent resource is Browser Engineering by Pavel Panchekha and Chris Harrelson (available at browser.engineering). Please do check it out. This article is an overview of how browsers work. Web developers often treat the browser as a black box that magically transforms HTML, CSS, and JavaScript into interactive web applications. In tru
Hi, I'm Sam — software engineer at Spot and the 2nd most active maintainer of Emotion, a widely-popular CSS-in-JS library for React. This post will delve into what originally attracted me to CSS-in-JS, and why I (along with the rest of the Spot team) have decided to shift away from it. We'll start with an overview of CSS-in-JS and give an overview of its pros & cons. Then, we'll do a deep dive int
乗りこなせ！ モダンフロントエンド モダンなスクロール関連機能を使いこなそう ［CSS Modern Features no.7］ スクロールに絡む機能の実装 こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。今回のテーマは「スクロール」に関するモダンな機能群です。 ブラウザ上でスクロールに絡む機能を実装しようとすると、考慮すべき点や制約は多くなります。 たとえば、スクロールに応じて何か処理をする場合、JavaScriptによるスクロールの監視が必要です。このスクロールの監視処理は、イベントがトリガーされる回数が非常に多くなりやすく、パフォーマンスへの考慮が必要となります。 他にも、スクロールに応じた計算処理も複雑になりがちです。スクロールコンテナ自体のサイズ・内包コンテンツのサイズ・現在のスクロール位置・関連する要素の座標やサイズ、といった多くの情報に基づいた計算が必
Today, we are excited to announce the launch of .NET 10, the most productive, modern, secure, intelligent, and performant release of .NET yet. It’s the result of another year of effort from thousands of developers around the world. This release includes thousands of performance, security, and functional improvements across the entire .NET stack-from languages and developer tools to workloads-enabl
[[toc]] This post will be a bit longer than usual. It's quite a big announcement to me, and there are many things I want to talk about. I'll be appreciated if you take the time to read through it. The table of contents is hidden on the left if you are on a desktop. Hope you enjoy :) 中文 Chinese Version What is Atomic CSS? Let's first give a proper definition to Atomic CSS: From this article by John
モダンブラウザが主流となった現在、リセットCSSの必要性が薄れてきました。とは言え、各ブラウザに搭載されているUAスタイルシート（ユーザーエージェントスタイルシート）だけをベースにするのはまだ時期尚早です。 スタイルをリセットしたり、ノーマライズするのではなく、既存のUAスタイルシートを改善し、ブラウザの仕様が不十分な要素にのみスタイルを適用することに重点を置いた、これまでとは異なる新時代のリセットCSSを紹介します。 UA+ UA+ -GitHub UA+の特徴 他のリセットCSSとの比較 uaplus.cssの中身 uaplus.cssの中身（コメント付き） UA+の特徴 UA+（ユーザーエージェントプラス）は、これまでのリセットCSSとは異なるタイプのスタイルシートです。各プロパティのリセットとノーマライズ（正規化）を行うのではなく、既存のUAスタイルの改善に注目し、ブラウザの仕様が
What's New In DevTools (Chrome 95) | Blog | Chrome for Developers
New CSS length authoring tools DevTools added an easier yet flexible way to update lengths in CSS! In the Styles pane, look for any CSS property with length (e.g. height, padding). Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown. Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally
If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article. Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance. A quick look behind the scenes The way you write CSS selectors does play a role i
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
CSS :has Parent Selector
Do you want to master CSS layouts? I'm building a new course. Learn more 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
We’re excited to announce the release of Biome 2.3, bringing several features that have been highly requested by the community. This release marks a significant milestone in our journey to support the broader web ecosystem. Once you have upgraded to Biome v2.3.0, migrate your Biome configuration to the new version by running the migrate command: biome migrate --write Full support for Vue, Svelte,
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
This major release features the new editor mode in the viewer (enabled by default now), new icons in the viewer, removal of deprecated functionality/APIs, removal of support for outdated browser versions, font conversion/text selection improvements and other features/bugfixes. Changes since v2.16.105 Bump versions in pdfjs.config by @timvandermeij in #15357 [api-major] Remove the enhanceTextSelect
Jetpack Compose, React, Flutter, SwiftUIを比較する - Mori Atsushi
宣言的UIの考え方はReact、Flutter、SwiftUI、Jetpack Composeと広がり、ほぼ全てのプラットフォームで利用できるようになりました。 今までのHTMLやXMLに対して命令的に処理を書くのに対し、宣言的UIはUIの構築や更新を圧倒的に簡素にしてくれます。 また、差分更新の仕組みを備えているものも多く、パフォーマンスの向上も見込めます。 今回はいくつかある宣言的UIのツール群の中から、代表的なJetpack Compose、React、Flutter、SwiftUIを個人的な見解も含めて比較していきます。 コンポーネントの記述 宣言的UIの大きなメリットの一つに、再利用可能なコンポーネントが挙げられるでしょう。 StatelessコンポーネントとStatefulコンポーネントそれぞれについて比較を行います。 SwiftUI Statelessコンポーネント まずは状
The evolution of scalable CSSA deep dive into the problems with scaling CSS on large projects. Understand the evolution of CSS best practices. IntroductionHow we write and think about CSS has changed significantly since the web’s beginning. We’ve come a long way from table-based layouts, to responsive web design, and now into a new era of adaptive layouts powered by modern CSS features. Managing a
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. It was Lea Verou’s X post that same day that caught my attention: A historical day for CSS 😀🎉 If you write any components used and/or
Update 1.82.1: The update addresses this security issue. Update 1.82.2: The update addresses these issues. Update 1.82.3: The update addresses this security issue. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the August 2023 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key hi
Responsive Design Today Today, when using the term: "responsive design", you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size. But soon, this perception of responsive design may be considered as outdated as using tables for page layout. Viewport-based media queries give you some powerful tools, but
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
Do you want to master CSS layouts? I'm building a new course. Learn more Have you often thought about whether to implement a mobile-first or a desktop-first approach? Recently, I shared a Twitter poll about how many uses mobile-first vs desktop-first, and the results were interesting. The total number of votes is 648, and here are the stats: Mobile-first: 33.3% Desktop first: 21.9% Mix of both: 24
Writing CSS In 2023: Is It Any Different Than A Few Years Ago? — Smashing Magazine
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet). Is there anything in the front-end world that’s evolv
If you work in the front-end, you've probably heard a lot about TailwindCSS, a CSS library, much like Bootstrap. Much unlike Bootstrap, however, Tailwind takes a different approach - it is all "utility classes". And I am not a fan. I got a whiff of it and quickly learned the name is appropos: it was as welcome and useful as passed gas. Before we start, let me try to explain what a utility class is
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to style elements based on the size of their parent container.
Do you want to master CSS layouts? I'm building a new course. Learn more A few weeks ago, Adobe released a web version of Photoshop that is built with the web technologies like WebAssembly, web components, P3 colors, and a lot more. Photoshop was the first professional design app that I learned when I was 14 years old. It was one of the reasons that I became a designer, and eventually a front-end
Jun 10, 2024 by Jen Simmons, Jon Davis, Karl Dubost, Anne van Kesteren, Marcos Cáceres, Ada Rose Canon, Tim Nguyen, Sanjana Aithal, Pascoe, and Garrett Davidson ContentsWebXRCSSWeb apps for MacSafari ExtensionsSpatial mediaHTMLMediaWebRTCPasskeysHTTPSJavaScriptWeb APICanvasWebGLWeb InspectorWKWebViewApple PayDeprecationsBug Fixes and moreHelp us Beta TestFeedback The last year has been a great one
表のように掲載される要素や状況に応じてCSSを使い分けることで、触れるべきCSSを瞬時に判断することができ、円滑に作業をするための仕組みを作ることができるのです。 CSSファイルの同期 CSSを読み込むためには、Markdown側にFrontmatterを記載します。 --- link: - rel: 'stylesheet' href: 'css/main.css' <!-- 読み込みたいCSS -- > <!-- 複数のCSSを読み込む場合（ここから） -- > - rel: 'stylesheet' href: 'page_settings.css' <!-- 複数のCSSを読み込む場合（ここまで） -- > lang: 'ja' --- Frontmatterはルールが厳しく、前後には半角の-が必ず3つ、:の後には必ず半角スペースが1つ、rel:とhref:の行頭を揃えるなど、守ら
Indoor VivantsAnton Sviridov. I love reinventing the wheel and I usually use Scala for that. TL;DR We are deploying an app to Cloudflare using Scala.js We are using ScalablyTyped We are using Scala 3 heavily Code on Github Deployed app Cloudflare API bindings Welcome to the "Put ma Scala on yo cloud" series I want to say that I'm kicking off a blog series, but even I don't believe that. If I did,
WebKit Features in Safari 18.4
Mar 31, 2025 by Jen Simmons, Saron Yitbarek, Jon Davis, Razvan Caliman, Karl Dubost, Brady Eidson, Elika Etemad, Youenn Fablet, Matthew Finkel, Simon Fraser, Timothy Hatcher, David Johnson, Anne van Kesteren, Daniel Liu, Keith Miller, Rupin Mittal, Tim Nguyen, Pascoe, Abrar Rahman Protyasha, Richard Robinson, Lily Spiniolas, Brandon Stewart, John Wilander and Luming Yin ContentsDeclarative Web Pus
GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)
All spinners are displayed inside a 24 x 24 dp view box. The main content rests inside the live area of 22 dp with a padding of 1dp. Few points to consider: SMIL animations (both inline and referenced via an img tag) won't start playing until the page has completely loaded whereas CSS animations will start playing while the page is loading. In webkit based browsers, both SMIL and CSS animations, w
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UAスタイルシートとリセットCSSとは - 2023 - kojika17
CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
フロントエンドエンジニアのステップアップのための集合知 - HackMD
劇薬の The New CSS Reset - kojika17
CSS Responsive Rules
GPT-5.1 Prompting Guide
Vivliostyleで市販書籍とそっくりに組んでみよう | gihyo.jp
Why We're Breaking Up with CSS-in-JS
モダンなスクロール関連機能を使いこなそう ［CSS Modern Features no.7］ | gihyo.jp
Announcing .NET 10 - .NET Blog
Reimagine Atomic CSS
アクセシビリティを重視した新時代のリセットCSS、ベースとなるより良いスタイルシートを求める人に最適 -UA+
The truth about CSS selector performance
Biome v2.3—Let's bring the ecosystem closer
Cascade Layers Guide | CSS-Tricks
Release v3.0.279 · mozilla/pdf.js
The evolution of scalable CSS
"If" CSS Gets Inline Conditionals | CSS-Tricks
August 2023 (version 1.82)
The new responsive: Web design in a component-driven world | Articles | web.dev
The State Of Mobile First and Desktop First
TailwindCSS: Adds complexity, does nothing.
Next Gen CSS: @container | CSS-Tricks
CSS Findings From Photoshop Web Version
News from WWDC24: WebKit in Safari 18 beta
DTPあるあるのCSS組版的解決法 | gihyo.jp
Cloudflare functions with Scala.js