カスケードスタイルシートを使用してアプリをスタイル設定する

2025-03-22

.NET マルチプラットフォームアプリ UI (.NET MAUI) アプリは、カスケードスタイルシート (CSS) を使用してスタイルを設定できます。スタイルシートはルールのリストで構成され、各ルールは 1 つ以上のセレクターと宣言ブロックで構成されます。宣言ブロックは、各宣言がプロパティ、コロン、および値で構成される、中かっこ内の宣言の一覧で構成されます。ブロック内に複数の宣言がある場合は、セミコロンが区切り記号として挿入されます。

次の例は、.NET MAUI に準拠している CSS を示しています。

navigationpage {
    -maui-bar-background-color: lightgray;
}

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
    -maui-spacing: 6;
}

grid {
    row-gap: 6;
    column-gap: 6;
}
.mainPageTitle {
    font-style: bold;
    font-size: 14;
}

.mainPageSubtitle {
    margin-top: 15;
}

.detailPageTitle {
    font-style: bold;
    font-size: 14;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

listview image {
    height: 60;
    width: 60;
}

stacklayout>image {
    height: 200;
    width: 200;
}

.NET MAUI では、CSS スタイルシートはコンパイル時ではなく実行時に解析および評価され、スタイルシートは使用中に再解析されます。

大事な

CSS を使用して .NET MAUI アプリのスタイルを完全に設定することはできません。ただし、XAML スタイルを使用して CSS を補完できます。 XAML スタイルの詳細については、「XAML を使用したスタイルアプリ」を参照してください。

スタイルシートを読み込む

.NET MAUI アプリにスタイルシートを追加するプロセスは次のとおりです。

空の CSS ファイルを .NET MAUI アプリプロジェクトに追加します。 CSS ファイルは任意のフォルダーに配置でき、推奨される場所は Resources フォルダーです。
CSS ファイルのビルドアクションを MauiCsに設定します。

スタイルシートの読み込み

スタイルシートの読み込みに使用できる方法は多数あります。

手記

実行時にスタイルシートを変更して、新しいスタイルシートを適用することはできません。

XAML でスタイルシートを読み込む

スタイルシートは、ResourceDictionaryに追加する前に、StyleSheet クラスで読み込んで解析できます。

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

StyleSheet.Source プロパティは、スタイルシートを囲む XAML ファイルの場所を基準とした URI として指定します。URI が /で始まる場合はプロジェクトルートを基準にして指定します。

警告

ビルドアクションが mauiCss に設定されていない場合、CSS ファイルの読み込みに失敗します。

または、スタイルシートを読み込み、StyleSheet クラスで解析してから、ResourceDictionaryに追加することもできます。そのためには、CDATA セクションにインライン展開します。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightgray;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    ...
</ContentPage>

リソースディクショナリの詳細については、「リソースディクショナリを参照してください。

C でスタイルシートを読み込む#

C# では、スタイルシートを StringReader から読み込み、ResourceDictionaryに追加できます。

using Microsoft.Maui.Controls.StyleSheets;

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();

        using (var reader = new StringReader("^contentpage { background-color: lightgray; }"))
        {
            this.Resources.Add(StyleSheet.FromReader(reader));
        }
    }
}

StyleSheet.FromReader メソッドの引数は、スタイルシートを読み取った TextReader です。

要素を選択してプロパティを適用する

CSS はセレクターを使用して、ターゲットとする要素を決定します。セレクターが一致するスタイルは、定義順に連続して適用されます。特定の項目に定義されているスタイルは、常に最後に適用されます。サポートされているセレクターの詳細については、「Selector リファレンス」を参照してください。

CSS では、プロパティを使用して選択した要素のスタイルを設定します。各プロパティには一連の値があり、一部のプロパティは任意の種類の要素に影響を与え、他のプロパティは要素のグループに適用されます。サポートされるプロパティの詳細については、「プロパティリファレンス」を参照してください。

子スタイルシートは、同じプロパティを設定する場合、常に親スタイルシートをオーバーライドします。そのため、同じプロパティを設定するスタイルを適用する場合は、次の優先順位規則に従います。

アプリリソースで定義されているスタイルは、同じプロパティを設定した場合、ページリソースで定義されているスタイルによって上書きされます。
ページリソースで定義されているスタイルは、同じプロパティを設定した場合、コントロールリソースで定義されているスタイルによって上書きされます。
アプリリソースで定義されているスタイルは、同じプロパティを設定した場合、コントロールリソースで定義されているスタイルによって上書きされます。

手記

CSS 変数はサポートされていません。

型で要素を選択する

ビジュアルツリー内の要素は、大文字と小文字を区別しない element セレクターを使用して、型によって選択できます。

stacklayout {
    margin: 20;
}

このセレクターは、スタイルシートを使用するページ上の StackLayout 要素を識別し、余白を 20 の均一な太さに設定します。

手記

element セレクターは、指定した型のサブクラスを識別しません。

基底クラスによる要素の選択

ビジュアルツリー内の要素は、大文字と小文字を区別しない ^base セレクターを使用して基底クラスによって選択できます。

^contentpage {
    background-color: lightgray;
}

このセレクターは、スタイルシートを使用する ContentPage 要素を識別し、その背景色を lightgrayに設定します。

手記

^base セレクターは .NET MAUI に固有であり、CSS 仕様の一部ではありません。

名前による要素の選択

ビジュアルツリー内の個々の要素は、大文字と小文字を区別する #id セレクターで選択できます。

#listView {
    background-color: lightgray;
}

このセレクターは、StyleId プロパティが listViewに設定されている要素を識別します。ただし、StyleId プロパティが設定されていない場合、セレクターは要素の x:Name の使用にフォールバックします。したがって、次の例では、#listView セレクターは、x:Name 属性が listViewに設定されている ListView を識別し、背景色を lightgrayに設定します。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="listView">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

特定のクラス属性を持つ要素を選択する

特定のクラス属性を持つ要素は、大文字と小文字を区別する .class セレクターで選択できます。

.detailPageTitle {
    font-style: bold;
    font-size: 14;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

要素の StyleClass プロパティを CSS クラス名に設定することで、CSS クラスを XAML 要素に割り当てることができます。したがって、次の例では、.detailPageTitle クラスによって定義されたスタイルが最初の Labelに割り当てられ、.detailPageSubtitle クラスによって定義されたスタイルが 2 番目の Labelに割り当てられます。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

子要素の選択

ビジュアルツリー内の子要素は、大文字と小文字を区別しない element element セレクターで選択できます。

listview image {
    height: 60;
    width: 60;
}

このセレクターは、ListView 要素の子である Image 要素を識別し、その高さと幅を 60 に設定します。そのため、次の XAML の例では、listview image セレクターは、ListViewの子である Image を識別し、その高さと幅を 60 に設定します。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView ...>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            ...
                            <Image ... />
                            ...
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

手記

element element セレクターでは、子要素が親の直接子である必要はありません。子要素には別の親が含まれている場合があります。先祖が指定した最初の要素である場合、選択が行われます。

直接子要素を選択する

ビジュアルツリー内の直接の子要素は、大文字と小文字を区別しない element>element セレクターで選択できます。

stacklayout>image {
    height: 200;
    width: 200;
}

このセレクターは、StackLayout 要素の直接の子である Image 要素を識別し、その高さと幅を 200 に設定します。したがって、次の例では、stacklayout>image セレクターは、StackLayoutの直接の子である Image を識別し、その高さと幅を 200 に設定します。

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            ...
            <Image ... />
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

手記

element>element セレクターでは、子要素が親の直接子である必要があります。

セレクターリファレンス

.NET MAUI では、次の CSS セレクターがサポートされています。

セレクタ	例	説明
`.class`	`.header`	'header' を含む `StyleClass` プロパティを持つすべての要素を選択します。このセレクターはケースセンシティブです。
`#id`	`#email`	`StyleId` が `email`に設定されているすべての要素を選択します。 `StyleId` が設定されていない場合は、`x:Name`にフォールバックします。 XAML を使用する場合は、`StyleId`よりも `x:Name` をお勧めします。このセレクターはケースに敏感です。
`*`	`*`	すべての要素を選択します。
`element`	`label`	サブクラスではなく、Label型のすべての要素を選択します。このセレクターでは大文字と小文字が区別されません。
`^base`	`^contentpage`	基底クラスとして ContentPage を持つすべての要素 (ContentPage 自体を含む) を選択します。このセレクターでは大文字と小文字が区別されず、CSS 仕様の一部ではありません。
`element,element`	`label,button`	すべての Button 要素とすべての Label 要素を選択します。このセレクターでは大文字と小文字が区別されません。
`element element`	`stacklayout label`	StackLayout内のすべての Label 要素を選択します。このセレクターでは大文字と小文字が区別されません。
`element>element`	`stacklayout>label`	直接の親として StackLayout を持つすべての Label 要素を選択します。このセレクターでは大文字と小文字が区別されません。
`element+element`	`label+entry`	Labelの直後にあるすべての Entry 要素を選択します。このセレクターでは大文字と小文字が区別されません。
`element~element`	`label~entry`	Labelの前にあるすべての Entry 要素を選択します。このセレクターでは大文字と小文字が区別されません。

セレクターが一致するスタイルは、定義順に連続して適用されます。特定の項目に定義されているスタイルは、常に最後に適用されます。

ヒント

セレクターは、StackLayout>ContentView>label.emailなど、制限なく組み合わせることができます。

次のセレクターはサポートされていません。

[attribute]
@media と @supports
: と ::

手記

特定性および上書きによる特定性の変更はサポートされていません。

2 つ以上の CSS ルールが同じ要素を指している場合、最も高い特異性を持つセレクターが優先され、そのスタイル宣言が要素に適用されます。の特定性アルゴリズム、CSS セレクターの重みを計算して、競合する CSS 宣言から要素に適用されるルールを決定します。

プロパティリファレンス

.NET MAUI では、次の CSS プロパティがサポートされています (値 列では、型は斜体で表示され、文字列リテラルは gray)。

財産	適用対象	価値観	例
`align-content`	FlexLayout	`stretch` \| `center` \| `start` \| `end` \| `spacebetween` \| `spacearound` \| `spaceevenly` \| `flex-start` \| `flex-end` \| `space-between` \| `space-around` \| `initial`	`align-content: space-between;`
`align-items`	FlexLayout	`stretch` \| `center` \| `start` \| `end` \| `flex-start` \| `flex-end` \| `initial`	`align-items: flex-start;`
`align-self`	VisualElement	`auto` \| `stretch` \| `center` \| `start` \| `end` \| `flex-start` \| `flex-end` \| `initial`	`align-self: flex-end;`
`background-color`	VisualElement	色の \| `initial`	`background-color: springgreen;`
`background-image`	Page	文字列 \| `initial` をする	`background-image: bg.png;`
`border-color`	Button、Frame、ImageButton	色 \| `initial`	`border-color: #9acd32;`
`border-radius`	BoxView、 Button、 Frame、 ImageButton	ダブル \| `initial`	`border-radius: 10;`
`border-width`	Button、ImageButton	ダブル \| `initial`	`border-width: .5;`
`color`	ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker	色 \| `initial`	`color: rgba(255, 0, 0, 0.3);`
`column-gap`	Grid	ダブル \| `initial`	`column-gap: 9;`
`direction`	VisualElement	`ltr` \| `rtl` \| `inherit` \| `initial`	`direction: rtl;`
`flex-direction`	FlexLayout	`column` \| `columnreverse` \| `row` \| `rowreverse` \| `row-reverse` \| `column-reverse` \| `initial`	`flex-direction: column-reverse;`
`flex-basis`	VisualElement	を float \| `auto` \| `initial`にします。また、0% ~ 100% の範囲のパーセンテージは、`%` 記号で指定できます。	`flex-basis: 25%;`
`flex-grow`	VisualElement	で \| `initial` を float する	`flex-grow: 1.5;`
`flex-shrink`	VisualElement	を float \| `initial` にする	`flex-shrink: 1;`
`flex-wrap`	VisualElement	`nowrap` \| `wrap` \| `reverse` \| `wrap-reverse` \| `initial`	`flex-wrap: wrap-reverse;`
`font-family`	Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span	文字列 \| `initial` をする	`font-family: Consolas;`
`font-size`	Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span	ダブル \| `initial`	`font-size: 12;`
`font-style`	Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span	`bold` \| `italic` \| `initial`	`font-style: bold;`
`height`	VisualElement	ダブル \| `initial`	`height: 250;`
`justify-content`	FlexLayout	`start` \| `center` \| `end` \| `spacebetween` \| `spacearound` \| `spaceevenly` \| `flex-start` \| `flex-end` \| `space-between` \| `space-around` \| `initial`	`justify-content: flex-end;`
`letter-spacing`	Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, SearchHandler, Span, TimePicker	ダブル \| `initial`	`letter-spacing: 2.5;`
`line-height`	Label、Span	ダブル \| `initial`	`line-height: 1.8;`
`margin`	View	の太さ \| `initial`	`margin: 6 12;`
`margin-left`	View	の太さ \| `initial`	`margin-left: 3;`
`margin-top`	View	の太さ \| `initial`	`margin-top: 2;`
`margin-right`	View	の太さ \| `initial`	`margin-right: 1;`
`margin-bottom`	View	の太さ \| `initial`	`margin-bottom: 6;`
`max-lines`	Label	int \| `initial`	`max-lines: 2;`
`min-height`	VisualElement	ダブル \| `initial`	`min-height: 50;`
`min-width`	VisualElement	ダブル \| `initial`	`min-width: 112;`
`opacity`	VisualElement	ダブル \| `initial`	`opacity: .3;`
`order`	VisualElement	int \| `initial` をする	`order: -1;`
`padding`	Button、 ImageButton、 Layout、 Page	の太さ \| `initial`	`padding: 6 12 12;`
`padding-left`	Button、 ImageButton、 Layout、 Page	ダブル \| `initial`	`padding-left: 3;`
`padding-top`	Button、 ImageButton、 Layout、 Page	ダブル \| `initial`	`padding-top: 4;`
`padding-right`	Button、 ImageButton、 Layout、 Page	ダブル \| `initial`	`padding-right: 2;`
`padding-bottom`	Button、 ImageButton、 Layout、 Page	ダブル \| `initial`	`padding-bottom: 6;`
`position`	FlexLayout	`relative` \| `absolute` \| `initial`	`position: absolute;`
`row-gap`	Grid	ダブル \| `initial`	`row-gap: 12;`
`text-align`	Entry、 EntryCell、 Label、 SearchBar	`left` \| `top` \| `right` \| `bottom` \| `start` \| `center` \| `middle` \| `end` \| `initial`. `left` と `right` は、右から左の環境では避ける必要があります。	`text-align: right;`
`text-decoration`	Label、Span	`none` \| `underline` \| `strikethrough` \| `line-through` \| `initial`	`text-decoration: underline, line-through;`
`text-transform`	Button,Editor, Entry, Label, SearchBar, SearchHandler	`none` \| `default` \| `uppercase` \| `lowercase` \| `initial`	`text-transform: uppercase;`
`transform`	VisualElement	`none`, `rotate`, `rotateX`, `rotateY`, `scale`, `scaleX`, `scaleY`, `translate`, `translateX`, `translateY`, `initial`	`transform: rotate(180), scaleX(2.5);`
`transform-origin`	VisualElement	二重、二重 \| `initial`	`transform-origin: 7.5, 12.5;`
`vertical-align`	Label	`left` \| `top` \| `right` \| `bottom` \| `start` \| `center` \| `middle` \| `end` \| `initial`	`vertical-align: bottom;`
`visibility`	VisualElement	`true` \| `visible` \| `false` \| `hidden` \| `collapse` \| `initial`	`visibility: hidden;`
`width`	VisualElement	ダブル \| `initial`	`width: 320;`

手記

initial は、すべてのプロパティに対して有効な値です。別のスタイルから設定された値がクリアされます (既定値にリセットされます)。

次のプロパティはサポートされていません。

all: initial.
レイアウトのプロパティ (ボックスまたはグリッド)。
font、borderなどの短縮形プロパティ。

さらに、inherit 値がないため、継承はサポートされていません。そのため、たとえば、レイアウトに font-size プロパティを設定し、レイアウト内のすべての Label インスタンスが値を継承することを想定することはできません。 1 つの例外は direction プロパティで、既定値は inheritです。

大事な

Span 要素は CSS を使用してターゲットにすることはできません。

.NET MAUI 固有のプロパティ

次の .NET MAUI 固有の CSS プロパティもサポートされています ([値] 列では、型は斜体され、文字列リテラルは gray)。

財産	適用対象	価値観	例
`-maui-bar-background-color`	NavigationPage、TabbedPage	カラー \| `initial`	`-maui-bar-background-color: teal;`
`-maui-bar-text-color`	NavigationPage、TabbedPage	色の \| `initial`	`-maui-bar-text-color: gray`
`-maui-horizontal-scroll-bar-visibility`	ScrollView	`default` \| `always` \| `never` \| `initial`	`-maui-horizontal-scroll-bar-visibility: never;`
`-maui-max-length`	Entry、Editor、SearchBar	int \| `initial` をする	`-maui-max-length: 20;`
`-maui-max-track-color`	Slider	カラー \| `initial`	`-maui-max-track-color: red;`
`-maui-min-track-color`	Slider	色の \| `initial`	`-maui-min-track-color: yellow;`
`-maui-orientation`	ScrollView、StackLayout	`horizontal` \| `vertical` \| `both` \| `initial`. `both` は、ScrollViewでのみサポートされます。	`-maui-orientation: horizontal;`
`-maui-placeholder`	Entry、Editor、SearchBar	引用されたテキスト \| `initial` をにする	`-maui-placeholder: Enter name;`
`-maui-placeholder-color`	Entry、Editor、SearchBar	色の \| `initial`	`-maui-placeholder-color: green;`
`-maui-spacing`	`StackLayout`	ダブル \| `initial`	`-maui-spacing: 8;`
`-maui-shadow`	VisualElement	有効な形式: color、offsetX、offsetY \| offsetX、offsetY、半径、色 \| offsetX、offsetY、radius、color、opacity	`-maui-shadow: #000000 4 4;`
`-maui-thumb-color`	Slider、Switch	色の \| `initial`	`-maui-thumb-color: limegreen;`
`-maui-vertical-scroll-bar-visibility`	ScrollView	`default` \| `always` \| `never` \| `initial`	`-maui-vertical-scroll-bar-visibility: always;`
`-maui-vertical-text-alignment`	Label	`start` \| `center` \| `end` \| `initial`	`-maui-vertical-text-alignment: end;`
`-maui-visual`	VisualElement	文字列 \| `initial`	`-maui-visual: material;`

.NET MAUI Shell 固有のプロパティ

次の .NET MAUI シェル固有の CSS プロパティもサポートされています ([値] 列では、型は斜体されますが、文字列リテラルは gray)。

財産	適用対象	価値観	例
`-maui-flyout-background`	Shell	色の \| `initial`	`-maui-flyout-background: red;`
`-maui-shell-background`	Element	カラー \| `initial`	`-maui-shell-background: green;`
`-maui-shell-disabled`	Element	色の \| `initial`	`-maui-shell-disabled: blue;`
`-maui-shell-foreground`	Element	色の \| `initial`	`-maui-shell-foreground: yellow;`
`-maui-shell-tabbar-background`	Element	色の \| `initial`	`-maui-shell-tabbar-background: white;`
`-maui-shell-tabbar-disabled`	Element	色の \| `initial`	`-maui-shell-tabbar-disabled: black;`
`-maui-shell-tabbar-foreground`	Element	色の \| `initial`	`-maui-shell-tabbar-foreground: gray;`
`-maui-shell-tabbar-title`	Element	色の \| `initial`	`-maui-shell-tabbar-title: lightgray;`
`-maui-shell-tabbar-unselected`	Element	色 \| `initial`	`-maui-shell-tabbar-unselected: cyan;`
`-maui-shell-title`	Element	色 \| `initial`	`-maui-shell-title: teal;`
`-maui-shell-unselected`	Element	色の \| `initial`	`-maui-shell-unselected: limegreen;`

色

次の color 値がサポートされています。

X11 色、CSS の色と .NET MAUI の色に一致します。これらの色の値では、大文字と小文字が区別されません。
16 進色: #rgb, #argb, #rrggbb, #aarrggbb
rgb 色: rgb(255,0,0), rgb(100%,0%,0%). 値の範囲は 0 から 255、または 0%から -100%です。
rgba 色: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). 不透明度の値は 0.0 から 1.0 の範囲です。
hsl カラー: hsl(120, 100%, 50%). h 値は 0 から 360 の範囲で、s と l は 0%から 100%の範囲です。
hsla 色: hsla(120, 100%, 50%, .8). 不透明度の値は 0.0 から 1.0 の範囲です。

厚さ

1 つ、2 つ、3 つ、または 4 つの thickness 値がサポートされ、それぞれ空白で区切られます。

1 つの値は、均一な厚さを示します。
2 つの値は、垂直方向と水平方向の太さを示します。
3 つの値は、top、horizontal (左と右)、下の太さを示します。
4 つの値は、上、右、下、左の太さを示します。

手記

CSS thickness 値は、XAML Thickness 値とは異なります。たとえば、XAML では、2 つの値 Thickness は水平方向と垂直方向の太さを示し、4 つの値 Thickness は左、上、右、下の太さを示します。さらに、XAML Thickness 値はコンマで区切られます。

関数

線形グラデーションと放射状グラデーションは、それぞれ linear-gradient() および radial-gradient() CSS 関数を使用して指定できます。これらの関数の結果は、コントロールの background プロパティに割り当てる必要があります。