Base

下地となるリセット CSS と HTML タグの設定。Demo でスタイルを確認できます。

Table of Contents

• Concept
  • reset
  • html
• Import

Concept

主な設計は以下のようになっています。

reset

• すべての要素と ::before ::after の余白をリセット
• すべての要素と ::before ::after に box-sizing: border-box; を設定
• すべての要素と ::before ::after に文字周りの設定を引き継ぐ
• 日本語・英語の折り返し位置を最適化
• スマホの横持ちやタブレットの文字サイズ変化を抑制
• スマホのデフォルトタップハイライトを削除
• スタイルを印刷時にも適応
• アンカーリンクのスタイルをリセット
• リストのスタイルをリセット
• フォーム要素に文字色などのスタイルを引き継ぐ
• 画像や iframe を親要素からはみ出さないように調整
• SVG に fill の設定がない場合は currentColor を引き継ぐ

html

• すべての要素と ::before ::after のボーダーカラーに変数を設定
• 背景と文字に変数を設定
• placeholder に変数を設定

Import

PostCSS で読み込む場合のパスは以下となります。

@import "musubii/src/bases/base/reset.css";
@import "musubii/src/bases/base/html.css";