See the Pen jKanban Example 2 by bunatree (@bunatree) on CodePen.
<header> と <main> で構成されています。<header> に表示されるテキスト（つまりはカラムのタイトル）の色を白に、背景を任意の色で染めることにします。dataContent として定義された JSON データの中から次の箇所を見付けてください。3 つのカラムには class 属性があり、それぞれ red, blue, green という値が設定されています。
{
"id" : "column-id-1",
"title" : "赤",
"class": "red",
// 省略
},
{
"id" : "column-id-2",
"title" : "青",
"class": "blue",
// 省略
},
{
"id" : "column-id-3",
"title" : "緑",
"class": "green",
// 省略
}
<header> にクラス名として追加されるので注意が必要です。<head>...</head> に次の CSS を加え、「.
.kanban-board header {
color: white;
background-color: gray;
}
.kanban-board header.red {
background-color: crimson;
}
.kanban-board header.blue {
background-color: royalblue;
}
.kanban-board header.green {
background-color: green;
}
dataContent からこの「カード 1」を定義している部分を見つけると、title 属性の値に HTML で <span class='text-red text-bold'>...</span> が書かれていることがわかります。
{
"id" : "item-id-1",
"title" : "<span class='text-red text-bold'>カード 1</span>",
"username": "hoge"
},
title 属性の値にはテキストだけでなく HTML を含めることができます。
.kanban-item .text-red {
color: crimson;
}
.kanban-item .text-bold {
font-weight: bold;
}
<img> タグを使ってカードに画像を挿入してみます。
{
"id": "item-id-3",
"title": "<div class='item-title'>カード 3</div><div class='item-body'><img src='https://i.imgur.com/b1dGytP.jpeg' /></div>"
}
<div class='item-title'>...</div> と <div class='item-body'>...</div> という２つの <div> 要素を入れ、後者に <img> 要素を入れ、src= 属性で適当な画像を指定しています。
.kanban-item .item-body img {
width: 100%;
}
.kanban-item .item-body {
max-height: 240px;
overflow: hidden;
}
{
"id": "item-id-2",
"title": "カード 2",
"class": "orange",
"username": "piyo"
}
<div class="kanban-item"> のクラス名には追加されず、data-color= 属性として追加されます。class= 属性に「orange」という値が追加されるのではなく、
<div class="kanban-item orange">...</div>
data-class="orange" という属性として追加されます。
<div class="kanban-item" data-class="orange">...</div>
.kanban-item.orange {
/* カードには「orange」クラスが無いため、この設定は効きません。 */
color: white;
background-color: darkorange;
}
data-class= 属性が設定されていたら、その値を class= 属性に追加する」という JavaScript を書きます。注意: Internet Explorer は NodeList を forEach() メソッドで処理できないため、このコードを実行するとエラーになります。
// カードに data-class= 属性が設定されていたら、
// その値を取得してクラス名に追加する。
document.querySelectorAll('.kanban-item').forEach(item => {
if (item.dataset.class) {
item.classList.add(item.dataset.class);
}
});
class= に追加され、上記の CSS 設定（テキストを白、背景色をオレンジ色）がカードに適用されます。colored_3_columns.png
kanban_item_orange_1.png
kanban_item_orange_2.png
kanban_item_image_1.png
kanban_item_image_2.png
jkanban_eyecatch.png
