# CSS リセット

Vuetifyプロジェクトのためのオピニオンベースのスタイル。

# Bootstrapping

ress は、スタイルシートのための強固な基盤を適用するモダンな CSS reset です。 normalize.css の上に構築されており、<code>要素に font-family: monospace を指定したり、ホバー時の要素からすべてのoutlinesを削除したり、その他多くの新機能が追加されています。 追加情報は ress GitHub リポジトリ にあります。

これらのスタイルは src/styles/generic/_reset.scss 内で自動的にインポートされ、 src/styles/generic/_index.scss 内で Generic スタイルとしてブートストラップされます。

// styles/generic/_index.scss

// 素のHTML要素(H1やAなど)のための一般的なスタイリング。
// これらはブラウザからのデフォルトのスタイリングが付属しているので、
// ここで再定義することができます。
@import './reset.scss';

@import './animations.scss';

@import './colors.scss';

@import './elevation.scss';

@import './transitions.scss';

# リセット機能

以下は、デフォルトのnormalize.css機能に対してressが提供する追加の機能のリストです。

  • box-sizing: border-box をすべての要素に適用します。
  • すべての要素の paddingmargin をリセットします。
  • すべての要素と擬似要素に background-repeat: no-repeat を指定します。
  • text-decorationvertical-align::before::after に継承します。
  • すべてのブラウザでホバリングしたときの outline を削除します。
  • コード要素に font-family: monospace を指定します。
  • 入力要素の border-radius をリセットします。
  • フォーム要素のフォント継承を指定します。
  • すべてのブラウザでデフォルトのボタンのスタイリングを削除します。
  • textareaのサイズ変更を垂直方向に指定します。
  • ボタン要素に cursor: pointer を適用します。
  • tab-size: 4html に適用します。
  • select をスタンダードなinputスタイルにします。
  • カーソルcursorのスタイルを aria 属性で指定します。
  • 画面ではコンテンツを非表示にしますが、スクリーンリーダーには適用しません。

適用されたすべてのスタイルの完全なリストについては、 ress css stylesheet を参照してください。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:11/12/2024, 6:59:50 AM