body {
    font-family: 'Noto Sans JP', 'BIZ UDGothic', 'メイリオ', 'Meiryo', 'Meiryo UI', sans-serif;
    color: #333333;
    line-height: 1.5;
}

:root {
    interpolate-size: allow-keywords;
}

img {
    object-fit: contain;
}

button, input, textarea {
    font-family: inherit;
    color: inherit;
    font-size: inherit;
}

button, details summary {
    cursor: pointer;
}

:fullscreen {
    background-color: white;
}

フォントを設定する。

基本的には一番最初に記述したNoto Sans JPが使用されるが、デバイスにフォントがインストールされていない場合は、記述された順に別のフォントを使用する。最後のsans-serifはサンセリフ体（ゴシック体）を意味し、記述されたフォントが全てインストールされていなかった場合、サンセリフ体を使用することを意味する。

文字色を設定する。

文字色は真っ黒ではなく、少し薄い色を用いることが推奨されている。ファイルでは#333333を指定している。

行間を設定する。

狭すぎると読みづらくなる。デフォルトよりはやや広めかもしれない。

これをallow-keywordsに設定すると、transitionなどで内在サイズ（Intrinsic size）やパーセント値を用いたアニメーションができる。（内在サイズはautoなど。）

2025年2月現在、主要なブラウザーでも対応していないところがあるので、使用する際には注意。

ページに画像を挿入し、cssで高さや幅を設定した際、画像のアスペクト比を変更せず、画像全体が表示されるように設定している。

buttonタグ、inputタグ、textareaタグでは、最初の設定のままではフォント設定が継承されない（bodyタグに対して設定したフォント通りにならない）ので、継承するように設定している。

カーソルをbuttonタグ上やsummaryタグ上にのせたとき、カーソルの形状が変化するようにしている。設定を戻す場合は、autoを設定しなおすとよい。

要素をフルスクリーンで表示したとき、デフォルトでは背景が黒色になるので、白色に設定している。

ファイル構造に戻る