# CSS リセット
Vuetifyプロジェクトのためのオピニオンベースのスタイル。
# Bootstrapping
ress は、スタイルシートのための強固な基盤を適用するモダンな CSS reset です。 normalize.css の上に構築されており、<code>
要素に font-family: monospace
を指定したり、ホバー時の要素からすべてのoutlines
を削除したり、その他多くの新機能が追加されています。 追加情報は ress GitHub リポジトリ にあります。
Vuetifyスタイルのリセットはグローバルに適用され、button
やinput
などのデフォルトの要素に影響します。 これには、 v-app コンポーネントの外部にあるものも含まれます。
これらのスタイルは 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
をすべての要素に適用します。- すべての要素の
padding
とmargin
をリセットします。 - すべての要素と擬似要素に
background-repeat: no-repeat
を指定します。 text-decoration
とvertical-align
を::before
と::after
に継承します。- すべてのブラウザでホバリングしたときの
outline
を削除します。 - コード要素に
font-family: monospace
を指定します。 - 入力要素の
border-radius
をリセットします。 - フォーム要素のフォント継承を指定します。
- すべてのブラウザでデフォルトのボタンのスタイリングを削除します。
- textareaのサイズ変更を垂直方向に指定します。
- ボタン要素に
cursor: pointer
を適用します。 tab-size: 4
をhtml
に適用します。select
をスタンダードなinputスタイルにします。- カーソル
cursor
のスタイルを aria 属性で指定します。 - 画面ではコンテンツを非表示にしますが、スクリーンリーダーには適用しません。
適用されたすべてのスタイルの完全なリストについては、 ress css stylesheet を参照してください。
準備はできましたか?
Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:11/12/2024, 6:59:50 AM