TAK tak-dcxi

font-size には rem を使うべきかどうかについての見解

可能であれば Chrome の文字拡大機能をサポートするためにremを使用する。
ただし、実際に Chrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。

「font-size には rem を使いましょう」という教えが独り歩きしており、実際に Chrome の文字拡大機能を「極大」にして検証していない人が多いため。

	---

	---

	<return-button class="scoping-root">
	<a href="#top" class="button">
	<span class="visually-hidden">本文上部へ戻る</span>
	</a>
	</return-button>

	// @sample https://codepen.io/tak-dcxi/pen/dyBbBgd

	export type CarouselSelectors = {
	scrollerSelector: string \| undefined;
	dirButtonSelector: string \| undefined;
	progressSelector: string \| undefined;
	};

	const DEFAULT_MOVE = 1;
	const DEFAULT_GAP = 0;

	const resizeMasonryItem = (
	element: HTMLElement,
	itemWrapper: HTMLElement
	): void => {
	const item = itemWrapper.firstChild;
	if (!(item instanceof HTMLElement)) return;

	const rowSize = parseInt(getComputedStyle(element).gridAutoRows, 10);
	const gapSize = parseInt(getComputedStyle(element).rowGap, 10);
	const itemSize = isWritingModeVertical(element)

	// View Transitions API は TypeScript の型定義に含まれていないため自身で定義する
	declare global {
	interface ViewTransition {
	finished: Promise<void>
	ready: Promise<void>
	updateCallbackDone: Promise<void>
	}

	interface Document {
	startViewTransition(updateCallback: () => Promise<void> \| void): ViewTransition

	---
	import { load } from 'cheerio'
	import Image from 'astro/components/Image.astro'
	import { writeFileSync, readFileSync } from 'node:fs'
	import BaseIcon from '@/components/BaseIcon.astro'

	type Props = {
	href: string
	}

	:is(body, body *) {
	&,
	&::before,
	&::after {
	--font-size-clamp-min: calc(var(--font-size-min) * pow(var(--font-size-ratio-min), var(--font-size-level)));
	--font-size-clamp-max: calc(var(--font-size-max) * pow(var(--font-size-ratio-max), var(--font-size-level)));
	--font-size-clamp-preferred: calc(
	(var(--font-size-clamp-max) - var(--font-size-clamp-min)) / (var(--layout-width-max) - var(--layout-width-min))
	);
	--font-size-clamp: clamp(

	const backfaceFixed = (fixed: boolean): void => {
	const scrollBarWidth = getScrollBarSize()
	const scrollPosition = getScrollPosition(fixed)

	document.body.style.borderInlineEnd = fixed ? `${scrollBarWidth}px solid transparent` : ''
	applyStyles(scrollPosition, fixed)
	if (!fixed) restorePosition(scrollPosition)
	}

	const isWritingModeVertical = (): boolean => {

	export type AccordionOptions = {
	buttonSelector: string \| undefined
	panelSelector: string \| undefined
	duration?: number
	easing?: string
	printAll?: boolean
	}

	const defaultOptions: AccordionOptions = {
	buttonSelector: undefined,