【Microsoft Lists】リストフォームに波を表示してカッコよくしてみた🌊

f:id:tecchan365:20210907115914p:plain

リストフォームの見た目をカッコよくするために、上図のようにリストフォームのヘッダーとフッターに波を表示してみました。

以下に書式設定の JSON を掲載しておきますので、興味があれば設定してみてください。
設定方法は、こちらの Microsoft Docs を参考ください。

ヘッダーの書式設定

f:id:tecchan365:20210907120020p:plain

{
    "elmType": "div",
    "style": {
        "width": "100%"
    },
    "children": [
        {
            "elmType": "svg",
            "style": {
                "fill": "currentColor"
            },
            "attributes": {
                "viewBox": "0 0 10 2",
                "class": "ms-fontColor-themePrimary"
            },
            "children": [
                {
                    "elmType": "path",
                    "attributes": {
                        "d": "M0,1 C4,3 6,-1 10,1 L10,0 L0,0 Z"
                    }
                }
            ]
        }
    ]
}

フッターの書式設定

f:id:tecchan365:20210907120114p:plain

{
    "elmType": "div",
    "style": {
        "width": "100%"
    },
    "children": [
        {
            "elmType": "svg",
            "style": {
                "fill": "currentColor"
            },
            "attributes": {
                "viewBox": "0 0 10 2",
                "class": "ms-fontColor-themePrimary"
            },
            "children": [
                {
                    "elmType": "path",
                    "attributes": {
                        "d": "M0,1 C4,3 7,-1 10,1 L10,3 L0,3 Z"
                    }
                }
            ]
        }
    ]
}