RADIXで行っているCSSの正規化です。その他一般的に用いられている CSS reset を参考にまとめています。
ユーザエージェントスタイルのリセット
/* reset default style */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
all: unset;
display: revert;
}
*, *:before, *:after {
box-sizing: border-box;
}
[hidden] {
display: none !important
}埋め込みコンテンツでない要素は、display を除いて全て unset にします。その上で、box-sizing のみ border-box にすることでモダンなコーディングにしています。
html の hidden 属性をサポートするため、 display: none であることを強調します。
フォント設定
/* font setting */
html {
color: var(--textColor);
font-family: 'Noto Sans JP', Arial, "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif;
font-size: var(--fontSize);
font-weight: 400;
line-height: 1.4
}
main :where(p,pre,ul,ol,dl,table,blockquote) {line-height: 1.8}フォントは Noto Sans JP が読み込まれている場合はそれを最優先にし、そうでない場合はOSの標準的なフォントが設定されていくようにしています。デフォルトの line-height は 1.4 です。これは header や footer といったセクション内のデザイン要素では、本文の行間は広すぎて扱いにくいためです。
p 要素のみ line-height が 1.8 になるようにし、本文中の行間を調整しています。
Bodyの修正
/* fix display height */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%
}
main {
display: block;
flex-grow: 1;
margin-bottom: auto
}body 要素は標準で flex にしており、main 要素のみ flex-grow で伸びるようにしています。これは、ビューポートに対してコンテンツの高さが足りない問に、footer の下に余計な余白が生じることを防ぐためです。
また、text-size-adjust: 100% を利用し、スマートフォン端末で rem 参照高さが不自然にずれたり、一部のフォントが不自然に拡大されてしまうことを防いでいます。
フレージングコンテンツ、インタラクティブコンテンツの初期化
/* formatting initial style */
a {
color: var(--linkColor);
text-decoration: none;
cursor: pointer
}
a:hover {text-decoration: underline}
ul, ol {list-style-type: none}
ul.disc, ol.disc {
padding-left: 1.5em;
list-style-type: disc
}
ul.circle, ol.circle {
padding-left: 1.5em;
list-style-type: circle
}
ul.square, ol.square {
padding-left: 1.5em;
list-style-type: square
}
ul.decimal, ol.decimal {
padding-left: 1.5em;
list-style-type: decimal
}
ul.decimal-lz, ol.decimal-lz {
padding-left: 2.5em;
list-style-type: decimal-leading-zero
}
main ul {
padding-left: 1.5em;
list-style-type: disc
}
main ol {
padding-left: 1.5em;
list-style-type: decimal
}
blockquote, q {
quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none
}
sup {
font-size: 0.5em;
vertical-align: super
}
sub {
font-size: 0.5em;
vertical-align: sub
}
strong {font-weight: bolder}
em {font-weight: 700}
table {
width: max-content;
border-collapse: collapse;
border-spacing: 0
}
button {
cursor: pointer
}
img {
display: block;
object-fit: cover;
max-width: 100%;
flex-shrink: 0
}
img.contain {object-fit: contain}
hr {
width: 60%;
border: none;
border-top: 2px solid var(--textColor);
margin: var(--gap) 0;
}a タグはホバー時にアンダーラインが出るようなデザインにしています。
ul, ol のリスト、blockquote, q の引用はそれぞれ標準ではデザインを消しています。
img は 標準を block に修正しています。これはモダンなシングルカラムレイアウトでの実装に寄り添うためですが、inline で画像を扱いたい人は inline-block に修正が必要かもしれません。
main 内でのコンテンツの調整
before v4.1.0
main h1 {
margin-bottom: var(--gutter)
}
main h2 {
margin-bottom: calc(var(--gutter) - .3rem)
}
main h3 {
margin-bottom: calc(var(--gutter) - .5rem)
}
main h4 {
margin-bottom: calc(var(--gutter) - .7rem)
}
main h5 {
margin-bottom: calc(var(--gutter) - .7rem)
}
main h6 {
margin-bottom: calc(var(--gutter) - .7rem)
}
main ul {
padding-left: 1.5em;
margin-bottom: var(--gutter);
list-style-type: disc
}
main ol {
padding-left: 1.5em;
margin-bottom: var(--gutter);
list-style-type: decimal
}
main :where(table,dl,p,blockquote) {
margin-bottom: var(--gutter)
}main 内の見出し要素は、そのレベルに応じた margin-bottom を付与します。ul, ol は main 内のみ標準をそれぞれ disc, decimal のリストと修正します。その他 table, dl, p, blockquote といった本文内に置かれる記述的な block 要素のmargin-bottom に –gutter を設定します。
/* Content interval settings */
main :where(*)+h1 {
--theGutter: calc(var(--gutter) * 3);
margin-block-start: var(--theGutter);
}
main :where(*)+h2 {
--theGutter: calc(var(--gutter) * 2.5);
margin-block-start: var(--theGutter);
}
main :where(*)+h3 {
--theGutter: calc(var(--gutter) * 2);
margin-block-start: var(--theGutter);
}
main :where(*)+h4 {
--theGutter: calc(var(--gutter) * 1.5);
margin-block-start: var(--theGutter);
}
main :where(*)+h5 {
--theGutter: calc(var(--gutter) * 1.3);
margin-block-start: var(--theGutter);
}
main :where(*)+h6 {
--theGutter: calc(var(--gutter) * 1);
margin-block-start: var(--theGutter);
}
main :where(h1)+h2 {--theGutter: var(--gutter)}
main :where(h1,h2)+h3 {--theGutter: var(--gutter)}
main :where(h1,h2,h3)+h4 {--theGutter: var(--gutter)}
main :where(h1,h2,h3,h4)+h5 {--theGutter: var(--gutter)}
main :where(h1,h2,h3,h4,h5)+h6 {--theGutter: var(--gutter)}
main :where(*)+:where(p,pre,ul,ol,dl,table,blockquote,figure,form,hr,iframe) {
--theGutter: var(--gutter);
margin-block-start: var(--theGutter);
}
main :where(article,section)>:where(*)+:where(*),
main.fb-brackets>:where(*)+:where(:not(article,section,aside,h1,h2,h3,h4,h5,h6)) {
--theGutter: var(--gutter);
margin-block-start: var(--theGutter);
}
main :where(*)+:where(article,section) {margin-block-start: calc(var(--gap))}main 内のコンテンツは –gutter 変数に基づいて感覚が設けられます。特にヘディングコンテンツについては見出しレベルによる意味的区切りと空白による視覚的区切りを整合させるために、レベルに応じて間隔が広がるように設定しています。