タイトルまんまです。いたって簡単、素晴らしいサンプルがありますから。
https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples/generic-tile-format
![](https://i2.wp.com/muc365.com/wp-content/uploads/2019/04/01.png?resize=439%2C189&ssl=1)
こんな感じのリストが下のようになります。(画像はいらすとやさんから)
![](https://i1.wp.com/muc365.com/wp-content/uploads/2019/04/02.png?resize=280%2C170&ssl=1)
一応ソースも貼っておきますが、ここまでは訳ないです。
{
"hideSelection": "true",
"hideColumnHeader": "true",
"rowFormatter": {
"elmType": "div",
"style": {
"float": "left"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"font-size": "1.5em"
}
},
{
"elmType": "div",
"children": [
{
"elmType": "img",
"attributes": {
"src": "=if([$weather] == 'sunny', '/SiteAssets/img/sunny.png', if([$weather] == 'cloud', '/SiteAssets/img/cloud.png', '/SiteAssets/img/rain.png'))"
},
"style": {
"width": "100px"
}
}
]
}
]
}
]
}
]
}
}
問題はここから。
これをサイトページに貼ってみます。
![](https://i2.wp.com/muc365.com/wp-content/uploads/2019/04/03.png?fit=1024%2C576&ssl=1)
横一直線にならず斜めになるんです…
原因はわかりました。下の画像をご覧ください。
![](https://i1.wp.com/muc365.com/wp-content/uploads/2019/04/04.png?fit=1024%2C315&ssl=1)
リスト画面の方ではこれが無効になってます。
![](https://i2.wp.com/muc365.com/wp-content/uploads/2019/04/05.png?fit=1024%2C278&ssl=1)
試しに無理やりmin-height: 0を割り当ててみましょう。
![](https://i1.wp.com/muc365.com/wp-content/uploads/2019/04/06.png?resize=662%2C75&ssl=1)
![](https://i0.wp.com/muc365.com/wp-content/uploads/2019/04/07.png?fit=1024%2C446&ssl=1)
ほらうまくいった。
でもこれ…詰んでません?ビューの書式設定で定義できるよりも上位の要素に割り当てられているスタイルが原因ってあんた、手が出せませんよ。
なんとかなりませんかねー