[{"data":1,"prerenderedAt":4477},["ShallowReactive",2],{"article-pinterest-like-style":3},{"id":4,"title":5,"body":6,"category":4464,"createdAt":4466,"description":5,"extension":4467,"index":4468,"meta":4469,"navigation":320,"path":4470,"publish":320,"seo":4471,"series":4468,"seriesTitle":4468,"stem":4472,"tag":4473,"thumbnail":4475,"updatedAt":4468,"__hash__":4476},"articles\u002Farticles\u002Fpinterest-like-style.md","ピンタレストみたいなカードスタイルで動的に要素を追加する方法",{"type":7,"value":8,"toc":4445},"minimark",[9,13,18,21,24,35,39,42,235,252,255,799,803,808,811,822,827,845,849,856,859,862,865,868,871,1178,1185,1188,1191,1195,1198,1476,1481,1484,1491,3035,3038,3057,3060,3064,3348,3354,3357,3838,3851,3854,3901,3904,3907,4294,4307,4310,4429,4432,4435,4442],[10,11,12],"p",{},"こんにちはjunです。突然ですがPinterest（ピンタレスト）ってご存知ですが、以下のような感じのスタイルで画像や動画が一覧で検索できるサービスです。",[14,15],"image-render",{":src":16,":width":17},"'pinterest-like-style\u002Fpinterest.png'","'100%'",[10,19,20],{},"よくある一覧系のレイアウトは基本的に列と高さを揃えた規則的な物が多い中、ピンタレストは高さが変則であり縦方向に詰めるレイアウトになっています。",[10,22,23],{},"ごちゃごちゃとした感じですが、コンテンツがいっぱいあって無駄がないスタイルが好きです。私が関わったあるプロジェクトでこのデザインをやろうとしましたがそこそこ難しかったです。バックから情報を取ってくる仕様だったため、動的に要素を追加してくことを前提として実装の解説をしていきます。コード自体の説明は「実装方法」から行います。",[10,25,26,27,34],{},"また完成したデモは",[28,29,33],"a",{"href":30,"rel":31},"https:\u002F\u002Fapps.jun-app.com\u002Fpinterestlike\u002F",[32],"nofollow","こちら","にあります。",[36,37,38],"h2",{"id":38},"構造",[10,40,41],{},"構造は以下の通りとします。",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-html shiki shiki-themes material-theme-ocean","\u003Cdiv class=\"p-cards-render\" id=\"card-container\">\n    \u003Cdiv class=\"c-card-container u-animate\">\n        \u003Cimg src=\".\u002Fred.png\" class=\"c-card-img\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\">\n        \u003Cimg src=\".\u002Fred.png\" class=\"c-card-img\">\n    \u003C\u002Fdiv>\n    \u003C!-- c-card-containerが基本コンポーネント -->\n\u003C\u002Fdiv>\n","html","",[50,51,52,96,117,151,161,180,209,218,225],"code",{"__ignoreMap":48},[53,54,57,61,65,69,72,75,79,81,84,86,88,91,93],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"sAklC","\u003C",[53,62,64],{"class":63},"s-wAU","div",[53,66,68],{"class":67},"sJ14y"," class",[53,70,71],{"class":59},"=",[53,73,74],{"class":59},"\"",[53,76,78],{"class":77},"sfyAc","p-cards-render",[53,80,74],{"class":59},[53,82,83],{"class":67}," id",[53,85,71],{"class":59},[53,87,74],{"class":59},[53,89,90],{"class":77},"card-container",[53,92,74],{"class":59},[53,94,95],{"class":59},">\n",[53,97,99,102,104,106,108,110,113,115],{"class":55,"line":98},2,[53,100,101],{"class":59},"    \u003C",[53,103,64],{"class":63},[53,105,68],{"class":67},[53,107,71],{"class":59},[53,109,74],{"class":59},[53,111,112],{"class":77},"c-card-container u-animate",[53,114,74],{"class":59},[53,116,95],{"class":59},[53,118,120,123,126,129,131,133,136,138,140,142,144,147,149],{"class":55,"line":119},3,[53,121,122],{"class":59},"        \u003C",[53,124,125],{"class":63},"img",[53,127,128],{"class":67}," src",[53,130,71],{"class":59},[53,132,74],{"class":59},[53,134,135],{"class":77},".\u002Fred.png",[53,137,74],{"class":59},[53,139,68],{"class":67},[53,141,71],{"class":59},[53,143,74],{"class":59},[53,145,146],{"class":77},"c-card-img",[53,148,74],{"class":59},[53,150,95],{"class":59},[53,152,154,157,159],{"class":55,"line":153},4,[53,155,156],{"class":59},"    \u003C\u002F",[53,158,64],{"class":63},[53,160,95],{"class":59},[53,162,164,166,168,170,172,174,176,178],{"class":55,"line":163},5,[53,165,101],{"class":59},[53,167,64],{"class":63},[53,169,68],{"class":67},[53,171,71],{"class":59},[53,173,74],{"class":59},[53,175,112],{"class":77},[53,177,74],{"class":59},[53,179,95],{"class":59},[53,181,183,185,187,189,191,193,195,197,199,201,203,205,207],{"class":55,"line":182},6,[53,184,122],{"class":59},[53,186,125],{"class":63},[53,188,128],{"class":67},[53,190,71],{"class":59},[53,192,74],{"class":59},[53,194,135],{"class":77},[53,196,74],{"class":59},[53,198,68],{"class":67},[53,200,71],{"class":59},[53,202,74],{"class":59},[53,204,146],{"class":77},[53,206,74],{"class":59},[53,208,95],{"class":59},[53,210,212,214,216],{"class":55,"line":211},7,[53,213,156],{"class":59},[53,215,64],{"class":63},[53,217,95],{"class":59},[53,219,221],{"class":55,"line":220},8,[53,222,224],{"class":223},"sC9rS","    \u003C!-- c-card-containerが基本コンポーネント -->\n",[53,226,228,231,233],{"class":55,"line":227},9,[53,229,230],{"class":59},"\u003C\u002F",[53,232,64],{"class":63},[53,234,95],{"class":59},[10,236,237,239,240,243,244,247,248,251],{},[50,238,90],{},"はカード全体の列を定義するコンテナです。",[50,241,242],{},"c-card-container","は１カードのコンテナーで他のカードとの隙間やレイアウトの定義をしています。そしてカードのコンテナには",[50,245,246],{},"\u003Cimg>","がラップされ、",[50,249,250],{},"width:100%; height:100%;","がかかっています。今回表示する画像は一面一色に塗り潰された画像です。（background-colorでもよかったのですが）",[10,253,254],{},"最終的なcssは以下の通りです。",[43,256,260],{"className":257,"code":258,"language":259,"meta":48,"style":48},"language-css shiki shiki-themes material-theme-ocean","*{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n#card-add{\n    position: fixed;\n    left: 20px;\n    top: 50%;\n}\n\n.p-main-container{\n    max-width: 660px;\n    margin: 0 auto;\n    padding: 30px 0px;\n    min-height: 100vh;\n}\n\n.p-cards-render{\n    margin: 0 -5px;\n    display: flex;\n    flex-wrap: wrap;\n    position: relative;\n}\n\n.p-cards-render .c-card-container{\n    position: absolute;\n    top: 0px;\n    width: 33.3%;\n    display: block;\n    padding: 0 5px 10px 5px;\n}\n\n\n.c-card-container .c-card-img{\n    width: 100%;\n    box-shadow: 0px 2px 4px #ccc;\n    border-radius: 30px;\n    height: 0%;\n    display: block;\n    opacity: 0;\n    transition: all 0.4s;\n}\n.c-card-container.u-animate .c-card-img{\n    height: 100%;\n    opacity: 1;\n    transition: all 0.4s;\n}\n","css",[50,261,262,271,287,298,311,316,322,332,344,356,369,374,379,390,403,417,432,445,450,455,464,478,491,504,516,521,526,540,552,563,576,588,607,612,617,622,635,647,671,683,696,707,719,735,740,758,769,781,794],{"__ignoreMap":48},[53,263,264,268],{"class":55,"line":56},[53,265,267],{"class":266},"s5Dmg","*",[53,269,270],{"class":59},"{\n",[53,272,273,277,280,284],{"class":55,"line":98},[53,274,276],{"class":275},"s6YsC","    margin",[53,278,279],{"class":59},":",[53,281,283],{"class":282},"sx098"," 0",[53,285,286],{"class":59},";\n",[53,288,289,292,294,296],{"class":55,"line":119},[53,290,291],{"class":275},"    padding",[53,293,279],{"class":59},[53,295,283],{"class":282},[53,297,286],{"class":59},[53,299,300,303,305,309],{"class":55,"line":153},[53,301,302],{"class":275},"    box-sizing",[53,304,279],{"class":59},[53,306,308],{"class":307},"s0W1g"," border-box",[53,310,286],{"class":59},[53,312,313],{"class":55,"line":163},[53,314,315],{"class":59},"}\n",[53,317,318],{"class":55,"line":182},[53,319,321],{"emptyLinePlaceholder":320},true,"\n",[53,323,324,327,330],{"class":55,"line":211},[53,325,326],{"class":59},"#",[53,328,329],{"class":282},"card-add",[53,331,270],{"class":59},[53,333,334,337,339,342],{"class":55,"line":220},[53,335,336],{"class":275},"    position",[53,338,279],{"class":59},[53,340,341],{"class":307}," fixed",[53,343,286],{"class":59},[53,345,346,349,351,354],{"class":55,"line":227},[53,347,348],{"class":275},"    left",[53,350,279],{"class":59},[53,352,353],{"class":282}," 20px",[53,355,286],{"class":59},[53,357,359,362,364,367],{"class":55,"line":358},10,[53,360,361],{"class":275},"    top",[53,363,279],{"class":59},[53,365,366],{"class":282}," 50%",[53,368,286],{"class":59},[53,370,372],{"class":55,"line":371},11,[53,373,315],{"class":59},[53,375,377],{"class":55,"line":376},12,[53,378,321],{"emptyLinePlaceholder":320},[53,380,382,385,388],{"class":55,"line":381},13,[53,383,384],{"class":59},".",[53,386,387],{"class":266},"p-main-container",[53,389,270],{"class":59},[53,391,393,396,398,401],{"class":55,"line":392},14,[53,394,395],{"class":275},"    max-width",[53,397,279],{"class":59},[53,399,400],{"class":282}," 660px",[53,402,286],{"class":59},[53,404,406,408,410,412,415],{"class":55,"line":405},15,[53,407,276],{"class":275},[53,409,279],{"class":59},[53,411,283],{"class":282},[53,413,414],{"class":307}," auto",[53,416,286],{"class":59},[53,418,420,422,424,427,430],{"class":55,"line":419},16,[53,421,291],{"class":275},[53,423,279],{"class":59},[53,425,426],{"class":282}," 30px",[53,428,429],{"class":282}," 0px",[53,431,286],{"class":59},[53,433,435,438,440,443],{"class":55,"line":434},17,[53,436,437],{"class":275},"    min-height",[53,439,279],{"class":59},[53,441,442],{"class":282}," 100vh",[53,444,286],{"class":59},[53,446,448],{"class":55,"line":447},18,[53,449,315],{"class":59},[53,451,453],{"class":55,"line":452},19,[53,454,321],{"emptyLinePlaceholder":320},[53,456,458,460,462],{"class":55,"line":457},20,[53,459,384],{"class":59},[53,461,78],{"class":266},[53,463,270],{"class":59},[53,465,467,469,471,473,476],{"class":55,"line":466},21,[53,468,276],{"class":275},[53,470,279],{"class":59},[53,472,283],{"class":282},[53,474,475],{"class":282}," -5px",[53,477,286],{"class":59},[53,479,481,484,486,489],{"class":55,"line":480},22,[53,482,483],{"class":275},"    display",[53,485,279],{"class":59},[53,487,488],{"class":307}," flex",[53,490,286],{"class":59},[53,492,494,497,499,502],{"class":55,"line":493},23,[53,495,496],{"class":275},"    flex-wrap",[53,498,279],{"class":59},[53,500,501],{"class":307}," wrap",[53,503,286],{"class":59},[53,505,507,509,511,514],{"class":55,"line":506},24,[53,508,336],{"class":275},[53,510,279],{"class":59},[53,512,513],{"class":307}," relative",[53,515,286],{"class":59},[53,517,519],{"class":55,"line":518},25,[53,520,315],{"class":59},[53,522,524],{"class":55,"line":523},26,[53,525,321],{"emptyLinePlaceholder":320},[53,527,529,531,533,536,538],{"class":55,"line":528},27,[53,530,384],{"class":59},[53,532,78],{"class":266},[53,534,535],{"class":59}," .",[53,537,242],{"class":266},[53,539,270],{"class":59},[53,541,543,545,547,550],{"class":55,"line":542},28,[53,544,336],{"class":275},[53,546,279],{"class":59},[53,548,549],{"class":307}," absolute",[53,551,286],{"class":59},[53,553,555,557,559,561],{"class":55,"line":554},29,[53,556,361],{"class":275},[53,558,279],{"class":59},[53,560,429],{"class":282},[53,562,286],{"class":59},[53,564,566,569,571,574],{"class":55,"line":565},30,[53,567,568],{"class":275},"    width",[53,570,279],{"class":59},[53,572,573],{"class":282}," 33.3%",[53,575,286],{"class":59},[53,577,579,581,583,586],{"class":55,"line":578},31,[53,580,483],{"class":275},[53,582,279],{"class":59},[53,584,585],{"class":307}," block",[53,587,286],{"class":59},[53,589,591,593,595,597,600,603,605],{"class":55,"line":590},32,[53,592,291],{"class":275},[53,594,279],{"class":59},[53,596,283],{"class":282},[53,598,599],{"class":282}," 5px",[53,601,602],{"class":282}," 10px",[53,604,599],{"class":282},[53,606,286],{"class":59},[53,608,610],{"class":55,"line":609},33,[53,611,315],{"class":59},[53,613,615],{"class":55,"line":614},34,[53,616,321],{"emptyLinePlaceholder":320},[53,618,620],{"class":55,"line":619},35,[53,621,321],{"emptyLinePlaceholder":320},[53,623,625,627,629,631,633],{"class":55,"line":624},36,[53,626,384],{"class":59},[53,628,242],{"class":266},[53,630,535],{"class":59},[53,632,146],{"class":266},[53,634,270],{"class":59},[53,636,638,640,642,645],{"class":55,"line":637},37,[53,639,568],{"class":275},[53,641,279],{"class":59},[53,643,644],{"class":282}," 100%",[53,646,286],{"class":59},[53,648,650,653,655,657,660,663,666,669],{"class":55,"line":649},38,[53,651,652],{"class":275},"    box-shadow",[53,654,279],{"class":59},[53,656,429],{"class":282},[53,658,659],{"class":282}," 2px",[53,661,662],{"class":282}," 4px",[53,664,665],{"class":59}," #",[53,667,668],{"class":307},"ccc",[53,670,286],{"class":59},[53,672,674,677,679,681],{"class":55,"line":673},39,[53,675,676],{"class":275},"    border-radius",[53,678,279],{"class":59},[53,680,426],{"class":282},[53,682,286],{"class":59},[53,684,686,689,691,694],{"class":55,"line":685},40,[53,687,688],{"class":275},"    height",[53,690,279],{"class":59},[53,692,693],{"class":282}," 0%",[53,695,286],{"class":59},[53,697,699,701,703,705],{"class":55,"line":698},41,[53,700,483],{"class":275},[53,702,279],{"class":59},[53,704,585],{"class":307},[53,706,286],{"class":59},[53,708,710,713,715,717],{"class":55,"line":709},42,[53,711,712],{"class":275},"    opacity",[53,714,279],{"class":59},[53,716,283],{"class":282},[53,718,286],{"class":59},[53,720,722,725,727,730,733],{"class":55,"line":721},43,[53,723,724],{"class":275},"    transition",[53,726,279],{"class":59},[53,728,729],{"class":307}," all ",[53,731,732],{"class":282},"0.4s",[53,734,286],{"class":59},[53,736,738],{"class":55,"line":737},44,[53,739,315],{"class":59},[53,741,743,745,747,749,752,754,756],{"class":55,"line":742},45,[53,744,384],{"class":59},[53,746,242],{"class":266},[53,748,384],{"class":59},[53,750,751],{"class":266},"u-animate",[53,753,535],{"class":59},[53,755,146],{"class":266},[53,757,270],{"class":59},[53,759,761,763,765,767],{"class":55,"line":760},46,[53,762,688],{"class":275},[53,764,279],{"class":59},[53,766,644],{"class":282},[53,768,286],{"class":59},[53,770,772,774,776,779],{"class":55,"line":771},47,[53,773,712],{"class":275},[53,775,279],{"class":59},[53,777,778],{"class":282}," 1",[53,780,286],{"class":59},[53,782,784,786,788,790,792],{"class":55,"line":783},48,[53,785,724],{"class":275},[53,787,279],{"class":59},[53,789,729],{"class":307},[53,791,732],{"class":282},[53,793,286],{"class":59},[53,795,797],{"class":55,"line":796},49,[53,798,315],{"class":59},[36,800,802],{"id":801},"表示数が不明な場合cssだけでは不可能だった","表示数が不明な場合CSSだけでは不可能だった",[804,805,807],"h3",{"id":806},"flexでいけんじゃね","flexでいけんじゃね...？!",[10,809,810],{},"最初はそれぞれの要素にを縦方向に詰められればいいだけだろと思いました。",[10,812,813,814,817,818,821],{},"そのためカードコンテナーを ",[50,815,816],{},"display:inline-block;"," にして ",[50,819,820],{},"vertical-align:top;","を指定しましたが下図の様になっていしまいます。",[14,823],{":src":824,":width":825,":center":826},"'pinterest-like-style\u002Fdisplay-inline.png'","'300px'","true",[10,828,829,830,832,833,836,837,840,841,844],{},"カードコンテナーを ",[50,831,816],{},"と",[50,834,835],{},"algin-self:flex-start;","を指定しても同様の結果となります。",[50,838,839],{},"flex","や",[50,842,843],{},"inline-block","の仕様上仕方ないです。",[804,846,848],{"id":847},"display-gridならいけるが","display gridならいけるが...",[10,850,851,852,855],{},"flexは縦方向の制御が難しく、ピンタレストの様なスタイルをcssで実現するためには",[50,853,854],{},"display:grid;","というグリットレイアウトを指定する必要があります。",[10,857,858],{},"今回はGridの説明は省きます。グリットレイアウトは各要素の縦方向の位置を定義できるので、柔軟なレイアウトを実現できます。",[10,860,861],{},"しかし、グリットレイアウトは列数、行数、各要素の占有列・行を指定する必要があります。そのため動的に要素を追加する場合はJavascriptで各要素の位置スタイルを調整する必要があります。",[36,863,864],{"id":864},"実装方法",[804,866,867],{"id":867},"概要",[10,869,870],{},"それでは実装の概要について解説します。CSS（インラインスタイル）をカード要素に指定します。いろいろ方法はありますが、ピンタレスト公式でも以下の様なスタイルが要素に当てられています。",[43,872,874],{"className":45,"code":873,"language":47,"meta":48,"style":48},"\u003Cdiv class=\"p-cards-render\" id=\"card-container\">\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"06p17111s5\" style=\"height:309px; transform:translate(0%,0px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"l1dq533ms9g\" style=\"height:246px; transform:translate(100%,0px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"k6n2ebd918g\" style=\"height:306px; transform:translate(200%,0px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"2j3vvgc373g\" style=\"height:161px; transform:translate(0%,309px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"tagrso5m40o\" style=\"height:255px; transform:translate(100%,246px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"89opa7i1eng\" style=\"height:288px; transform:translate(200%,306px);\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[50,875,876,904,950,994,1038,1082,1126,1170],{"__ignoreMap":48},[53,877,878,880,882,884,886,888,890,892,894,896,898,900,902],{"class":55,"line":56},[53,879,60],{"class":59},[53,881,64],{"class":63},[53,883,68],{"class":67},[53,885,71],{"class":59},[53,887,74],{"class":59},[53,889,78],{"class":77},[53,891,74],{"class":59},[53,893,83],{"class":67},[53,895,71],{"class":59},[53,897,74],{"class":59},[53,899,90],{"class":77},[53,901,74],{"class":59},[53,903,95],{"class":59},[53,905,906,908,910,912,914,916,918,920,922,924,926,929,931,934,936,938,941,943,946,948],{"class":55,"line":98},[53,907,101],{"class":59},[53,909,64],{"class":63},[53,911,68],{"class":67},[53,913,71],{"class":59},[53,915,74],{"class":59},[53,917,112],{"class":77},[53,919,74],{"class":59},[53,921,83],{"class":67},[53,923,71],{"class":59},[53,925,74],{"class":59},[53,927,928],{"class":77},"06p17111s5",[53,930,74],{"class":59},[53,932,933],{"class":67}," style",[53,935,71],{"class":59},[53,937,74],{"class":59},[53,939,940],{"class":77},"height:309px; transform:translate(0%,0px);",[53,942,74],{"class":59},[53,944,945],{"class":59},">\u003C\u002F",[53,947,64],{"class":63},[53,949,95],{"class":59},[53,951,952,954,956,958,960,962,964,966,968,970,972,975,977,979,981,983,986,988,990,992],{"class":55,"line":119},[53,953,101],{"class":59},[53,955,64],{"class":63},[53,957,68],{"class":67},[53,959,71],{"class":59},[53,961,74],{"class":59},[53,963,112],{"class":77},[53,965,74],{"class":59},[53,967,83],{"class":67},[53,969,71],{"class":59},[53,971,74],{"class":59},[53,973,974],{"class":77},"l1dq533ms9g",[53,976,74],{"class":59},[53,978,933],{"class":67},[53,980,71],{"class":59},[53,982,74],{"class":59},[53,984,985],{"class":77},"height:246px; transform:translate(100%,0px);",[53,987,74],{"class":59},[53,989,945],{"class":59},[53,991,64],{"class":63},[53,993,95],{"class":59},[53,995,996,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1019,1021,1023,1025,1027,1030,1032,1034,1036],{"class":55,"line":153},[53,997,101],{"class":59},[53,999,64],{"class":63},[53,1001,68],{"class":67},[53,1003,71],{"class":59},[53,1005,74],{"class":59},[53,1007,112],{"class":77},[53,1009,74],{"class":59},[53,1011,83],{"class":67},[53,1013,71],{"class":59},[53,1015,74],{"class":59},[53,1017,1018],{"class":77},"k6n2ebd918g",[53,1020,74],{"class":59},[53,1022,933],{"class":67},[53,1024,71],{"class":59},[53,1026,74],{"class":59},[53,1028,1029],{"class":77},"height:306px; transform:translate(200%,0px);",[53,1031,74],{"class":59},[53,1033,945],{"class":59},[53,1035,64],{"class":63},[53,1037,95],{"class":59},[53,1039,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1063,1065,1067,1069,1071,1074,1076,1078,1080],{"class":55,"line":163},[53,1041,101],{"class":59},[53,1043,64],{"class":63},[53,1045,68],{"class":67},[53,1047,71],{"class":59},[53,1049,74],{"class":59},[53,1051,112],{"class":77},[53,1053,74],{"class":59},[53,1055,83],{"class":67},[53,1057,71],{"class":59},[53,1059,74],{"class":59},[53,1061,1062],{"class":77},"2j3vvgc373g",[53,1064,74],{"class":59},[53,1066,933],{"class":67},[53,1068,71],{"class":59},[53,1070,74],{"class":59},[53,1072,1073],{"class":77},"height:161px; transform:translate(0%,309px);",[53,1075,74],{"class":59},[53,1077,945],{"class":59},[53,1079,64],{"class":63},[53,1081,95],{"class":59},[53,1083,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1107,1109,1111,1113,1115,1118,1120,1122,1124],{"class":55,"line":182},[53,1085,101],{"class":59},[53,1087,64],{"class":63},[53,1089,68],{"class":67},[53,1091,71],{"class":59},[53,1093,74],{"class":59},[53,1095,112],{"class":77},[53,1097,74],{"class":59},[53,1099,83],{"class":67},[53,1101,71],{"class":59},[53,1103,74],{"class":59},[53,1105,1106],{"class":77},"tagrso5m40o",[53,1108,74],{"class":59},[53,1110,933],{"class":67},[53,1112,71],{"class":59},[53,1114,74],{"class":59},[53,1116,1117],{"class":77},"height:255px; transform:translate(100%,246px);",[53,1119,74],{"class":59},[53,1121,945],{"class":59},[53,1123,64],{"class":63},[53,1125,95],{"class":59},[53,1127,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1151,1153,1155,1157,1159,1162,1164,1166,1168],{"class":55,"line":211},[53,1129,101],{"class":59},[53,1131,64],{"class":63},[53,1133,68],{"class":67},[53,1135,71],{"class":59},[53,1137,74],{"class":59},[53,1139,112],{"class":77},[53,1141,74],{"class":59},[53,1143,83],{"class":67},[53,1145,71],{"class":59},[53,1147,74],{"class":59},[53,1149,1150],{"class":77},"89opa7i1eng",[53,1152,74],{"class":59},[53,1154,933],{"class":67},[53,1156,71],{"class":59},[53,1158,74],{"class":59},[53,1160,1161],{"class":77},"height:288px; transform:translate(200%,306px);",[53,1163,74],{"class":59},[53,1165,945],{"class":59},[53,1167,64],{"class":63},[53,1169,95],{"class":59},[53,1171,1172,1174,1176],{"class":55,"line":220},[53,1173,230],{"class":59},[53,1175,64],{"class":63},[53,1177,95],{"class":59},[10,1179,1180,1181,1184],{},"それぞのコンテナーに対して",[50,1182,1183],{},"height:246px; transform:translate(200%,306px);","というものあります。まず固有の高さを指定し、そしてtransformを使用して位置を変更しています。",[10,1186,1187],{},"要素が追加される度に始点（left:0;,top:0;）から移動させ、位置を指定してあげます。2021年7月時点のCSSではこの様にしないと、数不明・ここの高さが不明な要素に対してピンタレストのようなスタイルを適用することができません。",[10,1189,1190],{},"では次はそれを実装するjavascriptを書いていきます。",[804,1192,1194],{"id":1193},"htmlの前準備","HTMLの前準備",[10,1196,1197],{},"HTMLは以下の様にしておきます。",[43,1199,1201],{"className":45,"code":1200,"language":47,"meta":48,"style":48},"\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\"> \n        \u003Ctitle>Pinterest like Style\u003C\u002Ftitle>\n        \u003Clink rel=\"stylesheet\" href=\".\u002Fstyle.css\">\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cdiv class=\"p-main-container\">\n            \u003Cdiv class=\"p-cards-render\" id=\"card-container\">\n\n            \u003C\u002Fdiv>\n            \u003Cbutton id='card-add'>ADD!\u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n    \u003C\u002Fbody>\n    \u003Cscript src=\".\u002Fcard.js\" type=\"text\u002Fjavascript\">\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[50,1202,1203,1216,1224,1233,1258,1276,1309,1317,1326,1344,1373,1377,1386,1415,1424,1432,1468],{"__ignoreMap":48},[53,1204,1205,1208,1211,1214],{"class":55,"line":56},[53,1206,1207],{"class":59},"\u003C!",[53,1209,1210],{"class":63},"DOCTYPE",[53,1212,1213],{"class":67}," html",[53,1215,95],{"class":59},[53,1217,1218,1220,1222],{"class":55,"line":98},[53,1219,60],{"class":59},[53,1221,47],{"class":63},[53,1223,95],{"class":59},[53,1225,1226,1228,1231],{"class":55,"line":119},[53,1227,101],{"class":59},[53,1229,1230],{"class":63},"head",[53,1232,95],{"class":59},[53,1234,1235,1237,1240,1243,1245,1247,1250,1252,1255],{"class":55,"line":153},[53,1236,122],{"class":59},[53,1238,1239],{"class":63},"meta",[53,1241,1242],{"class":67}," charset",[53,1244,71],{"class":59},[53,1246,74],{"class":59},[53,1248,1249],{"class":77},"utf-8",[53,1251,74],{"class":59},[53,1253,1254],{"class":59},">",[53,1256,1257],{"class":307}," \n",[53,1259,1260,1262,1265,1267,1270,1272,1274],{"class":55,"line":163},[53,1261,122],{"class":59},[53,1263,1264],{"class":63},"title",[53,1266,1254],{"class":59},[53,1268,1269],{"class":307},"Pinterest like Style",[53,1271,230],{"class":59},[53,1273,1264],{"class":63},[53,1275,95],{"class":59},[53,1277,1278,1280,1283,1286,1288,1290,1293,1295,1298,1300,1302,1305,1307],{"class":55,"line":182},[53,1279,122],{"class":59},[53,1281,1282],{"class":63},"link",[53,1284,1285],{"class":67}," rel",[53,1287,71],{"class":59},[53,1289,74],{"class":59},[53,1291,1292],{"class":77},"stylesheet",[53,1294,74],{"class":59},[53,1296,1297],{"class":67}," href",[53,1299,71],{"class":59},[53,1301,74],{"class":59},[53,1303,1304],{"class":77},".\u002Fstyle.css",[53,1306,74],{"class":59},[53,1308,95],{"class":59},[53,1310,1311,1313,1315],{"class":55,"line":211},[53,1312,156],{"class":59},[53,1314,1230],{"class":63},[53,1316,95],{"class":59},[53,1318,1319,1321,1324],{"class":55,"line":220},[53,1320,101],{"class":59},[53,1322,1323],{"class":63},"body",[53,1325,95],{"class":59},[53,1327,1328,1330,1332,1334,1336,1338,1340,1342],{"class":55,"line":227},[53,1329,122],{"class":59},[53,1331,64],{"class":63},[53,1333,68],{"class":67},[53,1335,71],{"class":59},[53,1337,74],{"class":59},[53,1339,387],{"class":77},[53,1341,74],{"class":59},[53,1343,95],{"class":59},[53,1345,1346,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371],{"class":55,"line":358},[53,1347,1348],{"class":59},"            \u003C",[53,1350,64],{"class":63},[53,1352,68],{"class":67},[53,1354,71],{"class":59},[53,1356,74],{"class":59},[53,1358,78],{"class":77},[53,1360,74],{"class":59},[53,1362,83],{"class":67},[53,1364,71],{"class":59},[53,1366,74],{"class":59},[53,1368,90],{"class":77},[53,1370,74],{"class":59},[53,1372,95],{"class":59},[53,1374,1375],{"class":55,"line":371},[53,1376,321],{"emptyLinePlaceholder":320},[53,1378,1379,1382,1384],{"class":55,"line":376},[53,1380,1381],{"class":59},"            \u003C\u002F",[53,1383,64],{"class":63},[53,1385,95],{"class":59},[53,1387,1388,1390,1393,1395,1397,1400,1402,1404,1406,1409,1411,1413],{"class":55,"line":381},[53,1389,1348],{"class":59},[53,1391,1392],{"class":63},"button",[53,1394,83],{"class":67},[53,1396,71],{"class":59},[53,1398,1399],{"class":59},"'",[53,1401,329],{"class":77},[53,1403,1399],{"class":59},[53,1405,1254],{"class":59},[53,1407,1408],{"class":307},"ADD!",[53,1410,230],{"class":59},[53,1412,1392],{"class":63},[53,1414,95],{"class":59},[53,1416,1417,1420,1422],{"class":55,"line":392},[53,1418,1419],{"class":59},"        \u003C\u002F",[53,1421,64],{"class":63},[53,1423,95],{"class":59},[53,1425,1426,1428,1430],{"class":55,"line":405},[53,1427,156],{"class":59},[53,1429,1323],{"class":63},[53,1431,95],{"class":59},[53,1433,1434,1436,1439,1441,1443,1445,1448,1450,1453,1455,1457,1460,1462,1464,1466],{"class":55,"line":419},[53,1435,101],{"class":59},[53,1437,1438],{"class":63},"script",[53,1440,128],{"class":67},[53,1442,71],{"class":59},[53,1444,74],{"class":59},[53,1446,1447],{"class":77},".\u002Fcard.js",[53,1449,74],{"class":59},[53,1451,1452],{"class":67}," type",[53,1454,71],{"class":59},[53,1456,74],{"class":59},[53,1458,1459],{"class":77},"text\u002Fjavascript",[53,1461,74],{"class":59},[53,1463,945],{"class":59},[53,1465,1438],{"class":63},[53,1467,95],{"class":59},[53,1469,1470,1472,1474],{"class":55,"line":434},[53,1471,230],{"class":59},[53,1473,47],{"class":63},[53,1475,95],{"class":59},[10,1477,1478,1480],{},[50,1479,90],{},"にカードが挿入されていきます。ADD！というボタンを押すことで今回はカードが追加されていくことにします。",[804,1482,1483],{"id":1483},"javascriptはこの通り",[10,1485,1486,1487,1490],{},"同じディレクトリに",[50,1488,1489],{},"card.js","をおいておきます。いきなりですが、全て見せます。完成形は以下の通りです。",[43,1492,1496],{"className":1493,"code":1494,"language":1495,"meta":48,"style":48},"language-javascript shiki shiki-themes material-theme-ocean","\u002F\u002F カード情報を格納\nlet elements = [];\n\n\u002F\u002F カードの初期値\nlet elementInit = {\n    id:undefined,\n    color:undefined,\n    selfHeight:0,\n    y:0\n};\n\n\u002F\u002F 列数\nlet row = 3;\n\n\u002F\u002F 挿入先コンテナ\nconst cardsContainer = document.getElementById('card-container');\n\n\u002F\u002F 追加ボタン\nconst cardsAddBtn = document.getElementById('card-add');\n\n\u002F\u002F　カード高さの最大値と最小値\nconst heightMax = 400;\nconst heightMin = 100;\n\n\u002F\u002F 色のパターンとカード間の隙間（px）\nconst colors = ['red','yellow','green','orange','blue','purple'];\nconst cardGap = 10;\n\n\u002F\u002F 追加ボタンにイベントリスナーを付与\ncardsAddBtn.addEventListener('click',()=>{\n    return onClickAdd();\n})\n\n\u002F\u002F イベントリスナーの内容\nlet onClickAdd = ()=>{\n    let card = createCard();\n    insertCard(card.dom);\n    scanAdd(card.id);\n}\n\n\u002F\u002F カードのDOMを新規作成\nlet createCard = ()=>{\n    let info = {...elementInit};\n\n    \u002F\u002F カードの要素をdivで作成\n    let contain = document.createElement(\"DIV\");\n    contain.setAttribute('class','c-card-container');\n\n    \u002F\u002F IDをランダムに作成、記録\n    let idname = Math.random().toString(32).substring(2);\n    contain.setAttribute('id',idname);\n    info.id = idname;\n\n    \u002F\u002F カードに表示される画像（一色塗り潰し）を設定、記録\n    \u002F\u002F colorsの値と画像名が同じ。\n    let card = document.createElement(\"IMG\");\n    let color = colors[Math.floor(Math.random() * colors.length)];\n    info.color = color;\n\n    \u002F\u002F IMG要素にカラーの画像とクラス名を付与\n    card.setAttribute('src','.\u002F'+color+'.png');\n    card.setAttribute('class','c-card-img');\n\n    \u002F\u002F カードに対して不明な高さを与える\n    info.selfHeight = Math.floor(Math.random()*(heightMax+1-heightMin))+heightMin;\n    \n    \u002F\u002F カードDIVにIMGを追加\n    contain.appendChild(card);\n\n    \u002F\u002F elementsに記録。DOMとIDを返す\n    elements.push(info);\n    return {dom:contain,id:idname};\n}\n\n\u002F\u002F カードコンテナーにカードを追加する\nlet insertCard = (cardDom)=>{\n    cardsContainer.appendChild(cardDom);\n}\n\n\u002F\u002F これが大切\n\u002F\u002F IDで紐づいたDOMに対して高さと位置を決定させる。\nlet scanAdd = (id) =>{\n    \u002F\u002F elementsから対象カードのIDの番号、情報を取得\n    let index = elements.findIndex(ele=>{return ele.id===id});\n    let ele = elements[index]\n\n    \u002F\u002F DOMを取得\n    let dom = document.getElementById(ele.id);\n\n    \u002F\u002F index、つまりカードが何晩目かと列数でx,yの位置を決定する。\n    let height = ele.selfHeight\n    ele.y = (index \u003C row)?height:elements[index - row].y + height;\n    let x = (index%(row)*100) + '%';\n    let y = (index \u003C row)?0:elements[index - row].y;\n    \n    \u002F\u002F 位置をずらすスタイルを適用\n    dom.setAttribute('style',`height:${height}px; transform:translate(${x},${y}px);`)\n\n    \u002F\u002F アニメーション用のスタイルを追加\n    setTimeout(()=>{\n        dom.classList.add('u-animate')\n    },500);\n}\n","javascript",[50,1497,1498,1503,1518,1522,1527,1539,1547,1554,1567,1577,1582,1586,1591,1605,1609,1614,1647,1651,1656,1683,1687,1692,1706,1720,1724,1729,1799,1813,1817,1822,1849,1863,1871,1875,1880,1896,1914,1933,1951,1955,1959,1964,1979,1996,2000,2005,2034,2065,2069,2074,2120,2146,2162,2167,2173,2179,2207,2256,2272,2277,2283,2329,2358,2363,2369,2424,2430,2436,2454,2459,2465,2485,2510,2515,2520,2526,2549,2567,2572,2577,2583,2589,2610,2616,2665,2684,2689,2695,2723,2728,2734,2751,2809,2852,2896,2901,2907,2966,2971,2977,2991,3017,3030],{"__ignoreMap":48},[53,1499,1500],{"class":55,"line":56},[53,1501,1502],{"class":223},"\u002F\u002F カード情報を格納\n",[53,1504,1505,1508,1511,1513,1516],{"class":55,"line":98},[53,1506,1507],{"class":67},"let",[53,1509,1510],{"class":307}," elements ",[53,1512,71],{"class":59},[53,1514,1515],{"class":307}," []",[53,1517,286],{"class":59},[53,1519,1520],{"class":55,"line":119},[53,1521,321],{"emptyLinePlaceholder":320},[53,1523,1524],{"class":55,"line":153},[53,1525,1526],{"class":223},"\u002F\u002F カードの初期値\n",[53,1528,1529,1531,1534,1536],{"class":55,"line":163},[53,1530,1507],{"class":67},[53,1532,1533],{"class":307}," elementInit ",[53,1535,71],{"class":59},[53,1537,1538],{"class":59}," {\n",[53,1540,1541,1544],{"class":55,"line":182},[53,1542,1543],{"class":63},"    id",[53,1545,1546],{"class":59},":undefined,\n",[53,1548,1549,1552],{"class":55,"line":211},[53,1550,1551],{"class":63},"    color",[53,1553,1546],{"class":59},[53,1555,1556,1559,1561,1564],{"class":55,"line":220},[53,1557,1558],{"class":63},"    selfHeight",[53,1560,279],{"class":59},[53,1562,1563],{"class":282},"0",[53,1565,1566],{"class":59},",\n",[53,1568,1569,1572,1574],{"class":55,"line":227},[53,1570,1571],{"class":63},"    y",[53,1573,279],{"class":59},[53,1575,1576],{"class":282},"0\n",[53,1578,1579],{"class":55,"line":358},[53,1580,1581],{"class":59},"};\n",[53,1583,1584],{"class":55,"line":371},[53,1585,321],{"emptyLinePlaceholder":320},[53,1587,1588],{"class":55,"line":376},[53,1589,1590],{"class":223},"\u002F\u002F 列数\n",[53,1592,1593,1595,1598,1600,1603],{"class":55,"line":381},[53,1594,1507],{"class":67},[53,1596,1597],{"class":307}," row ",[53,1599,71],{"class":59},[53,1601,1602],{"class":282}," 3",[53,1604,286],{"class":59},[53,1606,1607],{"class":55,"line":392},[53,1608,321],{"emptyLinePlaceholder":320},[53,1610,1611],{"class":55,"line":405},[53,1612,1613],{"class":223},"\u002F\u002F 挿入先コンテナ\n",[53,1615,1616,1619,1622,1624,1627,1629,1633,1636,1638,1640,1642,1645],{"class":55,"line":419},[53,1617,1618],{"class":67},"const",[53,1620,1621],{"class":307}," cardsContainer ",[53,1623,71],{"class":59},[53,1625,1626],{"class":307}," document",[53,1628,384],{"class":59},[53,1630,1632],{"class":1631},"sdLwU","getElementById",[53,1634,1635],{"class":307},"(",[53,1637,1399],{"class":59},[53,1639,90],{"class":77},[53,1641,1399],{"class":59},[53,1643,1644],{"class":307},")",[53,1646,286],{"class":59},[53,1648,1649],{"class":55,"line":434},[53,1650,321],{"emptyLinePlaceholder":320},[53,1652,1653],{"class":55,"line":447},[53,1654,1655],{"class":223},"\u002F\u002F 追加ボタン\n",[53,1657,1658,1660,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681],{"class":55,"line":452},[53,1659,1618],{"class":67},[53,1661,1662],{"class":307}," cardsAddBtn ",[53,1664,71],{"class":59},[53,1666,1626],{"class":307},[53,1668,384],{"class":59},[53,1670,1632],{"class":1631},[53,1672,1635],{"class":307},[53,1674,1399],{"class":59},[53,1676,329],{"class":77},[53,1678,1399],{"class":59},[53,1680,1644],{"class":307},[53,1682,286],{"class":59},[53,1684,1685],{"class":55,"line":457},[53,1686,321],{"emptyLinePlaceholder":320},[53,1688,1689],{"class":55,"line":466},[53,1690,1691],{"class":223},"\u002F\u002F　カード高さの最大値と最小値\n",[53,1693,1694,1696,1699,1701,1704],{"class":55,"line":480},[53,1695,1618],{"class":67},[53,1697,1698],{"class":307}," heightMax ",[53,1700,71],{"class":59},[53,1702,1703],{"class":282}," 400",[53,1705,286],{"class":59},[53,1707,1708,1710,1713,1715,1718],{"class":55,"line":493},[53,1709,1618],{"class":67},[53,1711,1712],{"class":307}," heightMin ",[53,1714,71],{"class":59},[53,1716,1717],{"class":282}," 100",[53,1719,286],{"class":59},[53,1721,1722],{"class":55,"line":506},[53,1723,321],{"emptyLinePlaceholder":320},[53,1725,1726],{"class":55,"line":518},[53,1727,1728],{"class":223},"\u002F\u002F 色のパターンとカード間の隙間（px）\n",[53,1730,1731,1733,1736,1738,1741,1743,1746,1748,1751,1753,1756,1758,1760,1762,1765,1767,1769,1771,1774,1776,1778,1780,1783,1785,1787,1789,1792,1794,1797],{"class":55,"line":523},[53,1732,1618],{"class":67},[53,1734,1735],{"class":307}," colors ",[53,1737,71],{"class":59},[53,1739,1740],{"class":307}," [",[53,1742,1399],{"class":59},[53,1744,1745],{"class":77},"red",[53,1747,1399],{"class":59},[53,1749,1750],{"class":59},",",[53,1752,1399],{"class":59},[53,1754,1755],{"class":77},"yellow",[53,1757,1399],{"class":59},[53,1759,1750],{"class":59},[53,1761,1399],{"class":59},[53,1763,1764],{"class":77},"green",[53,1766,1399],{"class":59},[53,1768,1750],{"class":59},[53,1770,1399],{"class":59},[53,1772,1773],{"class":77},"orange",[53,1775,1399],{"class":59},[53,1777,1750],{"class":59},[53,1779,1399],{"class":59},[53,1781,1782],{"class":77},"blue",[53,1784,1399],{"class":59},[53,1786,1750],{"class":59},[53,1788,1399],{"class":59},[53,1790,1791],{"class":77},"purple",[53,1793,1399],{"class":59},[53,1795,1796],{"class":307},"]",[53,1798,286],{"class":59},[53,1800,1801,1803,1806,1808,1811],{"class":55,"line":528},[53,1802,1618],{"class":67},[53,1804,1805],{"class":307}," cardGap ",[53,1807,71],{"class":59},[53,1809,1810],{"class":282}," 10",[53,1812,286],{"class":59},[53,1814,1815],{"class":55,"line":542},[53,1816,321],{"emptyLinePlaceholder":320},[53,1818,1819],{"class":55,"line":554},[53,1820,1821],{"class":223},"\u002F\u002F 追加ボタンにイベントリスナーを付与\n",[53,1823,1824,1827,1829,1832,1834,1836,1839,1841,1844,1847],{"class":55,"line":565},[53,1825,1826],{"class":307},"cardsAddBtn",[53,1828,384],{"class":59},[53,1830,1831],{"class":1631},"addEventListener",[53,1833,1635],{"class":307},[53,1835,1399],{"class":59},[53,1837,1838],{"class":77},"click",[53,1840,1399],{"class":59},[53,1842,1843],{"class":59},",()",[53,1845,1846],{"class":67},"=>",[53,1848,270],{"class":59},[53,1850,1851,1855,1858,1861],{"class":55,"line":578},[53,1852,1854],{"class":1853},"s6cf3","    return",[53,1856,1857],{"class":1631}," onClickAdd",[53,1859,1860],{"class":63},"()",[53,1862,286],{"class":59},[53,1864,1865,1868],{"class":55,"line":590},[53,1866,1867],{"class":59},"}",[53,1869,1870],{"class":307},")\n",[53,1872,1873],{"class":55,"line":609},[53,1874,321],{"emptyLinePlaceholder":320},[53,1876,1877],{"class":55,"line":614},[53,1878,1879],{"class":223},"\u002F\u002F イベントリスナーの内容\n",[53,1881,1882,1884,1887,1889,1892,1894],{"class":55,"line":619},[53,1883,1507],{"class":67},[53,1885,1886],{"class":307}," onClickAdd ",[53,1888,71],{"class":59},[53,1890,1891],{"class":59}," ()",[53,1893,1846],{"class":67},[53,1895,270],{"class":59},[53,1897,1898,1901,1904,1907,1910,1912],{"class":55,"line":624},[53,1899,1900],{"class":67},"    let",[53,1902,1903],{"class":307}," card",[53,1905,1906],{"class":59}," =",[53,1908,1909],{"class":1631}," createCard",[53,1911,1860],{"class":63},[53,1913,286],{"class":59},[53,1915,1916,1919,1921,1924,1926,1929,1931],{"class":55,"line":637},[53,1917,1918],{"class":1631},"    insertCard",[53,1920,1635],{"class":63},[53,1922,1923],{"class":307},"card",[53,1925,384],{"class":59},[53,1927,1928],{"class":307},"dom",[53,1930,1644],{"class":63},[53,1932,286],{"class":59},[53,1934,1935,1938,1940,1942,1944,1947,1949],{"class":55,"line":649},[53,1936,1937],{"class":1631},"    scanAdd",[53,1939,1635],{"class":63},[53,1941,1923],{"class":307},[53,1943,384],{"class":59},[53,1945,1946],{"class":307},"id",[53,1948,1644],{"class":63},[53,1950,286],{"class":59},[53,1952,1953],{"class":55,"line":673},[53,1954,315],{"class":59},[53,1956,1957],{"class":55,"line":685},[53,1958,321],{"emptyLinePlaceholder":320},[53,1960,1961],{"class":55,"line":698},[53,1962,1963],{"class":223},"\u002F\u002F カードのDOMを新規作成\n",[53,1965,1966,1968,1971,1973,1975,1977],{"class":55,"line":709},[53,1967,1507],{"class":67},[53,1969,1970],{"class":307}," createCard ",[53,1972,71],{"class":59},[53,1974,1891],{"class":59},[53,1976,1846],{"class":67},[53,1978,270],{"class":59},[53,1980,1981,1983,1986,1988,1991,1994],{"class":55,"line":721},[53,1982,1900],{"class":67},[53,1984,1985],{"class":307}," info",[53,1987,1906],{"class":59},[53,1989,1990],{"class":59}," {...",[53,1992,1993],{"class":307},"elementInit",[53,1995,1581],{"class":59},[53,1997,1998],{"class":55,"line":737},[53,1999,321],{"emptyLinePlaceholder":320},[53,2001,2002],{"class":55,"line":742},[53,2003,2004],{"class":223},"    \u002F\u002F カードの要素をdivで作成\n",[53,2006,2007,2009,2012,2014,2016,2018,2021,2023,2025,2028,2030,2032],{"class":55,"line":760},[53,2008,1900],{"class":67},[53,2010,2011],{"class":307}," contain",[53,2013,1906],{"class":59},[53,2015,1626],{"class":307},[53,2017,384],{"class":59},[53,2019,2020],{"class":1631},"createElement",[53,2022,1635],{"class":63},[53,2024,74],{"class":59},[53,2026,2027],{"class":77},"DIV",[53,2029,74],{"class":59},[53,2031,1644],{"class":63},[53,2033,286],{"class":59},[53,2035,2036,2039,2041,2044,2046,2048,2051,2053,2055,2057,2059,2061,2063],{"class":55,"line":771},[53,2037,2038],{"class":307},"    contain",[53,2040,384],{"class":59},[53,2042,2043],{"class":1631},"setAttribute",[53,2045,1635],{"class":63},[53,2047,1399],{"class":59},[53,2049,2050],{"class":77},"class",[53,2052,1399],{"class":59},[53,2054,1750],{"class":59},[53,2056,1399],{"class":59},[53,2058,242],{"class":77},[53,2060,1399],{"class":59},[53,2062,1644],{"class":63},[53,2064,286],{"class":59},[53,2066,2067],{"class":55,"line":783},[53,2068,321],{"emptyLinePlaceholder":320},[53,2070,2071],{"class":55,"line":796},[53,2072,2073],{"class":223},"    \u002F\u002F IDをランダムに作成、記録\n",[53,2075,2077,2079,2082,2084,2087,2089,2092,2094,2096,2099,2101,2104,2106,2108,2111,2113,2116,2118],{"class":55,"line":2076},50,[53,2078,1900],{"class":67},[53,2080,2081],{"class":307}," idname",[53,2083,1906],{"class":59},[53,2085,2086],{"class":307}," Math",[53,2088,384],{"class":59},[53,2090,2091],{"class":1631},"random",[53,2093,1860],{"class":63},[53,2095,384],{"class":59},[53,2097,2098],{"class":1631},"toString",[53,2100,1635],{"class":63},[53,2102,2103],{"class":282},"32",[53,2105,1644],{"class":63},[53,2107,384],{"class":59},[53,2109,2110],{"class":1631},"substring",[53,2112,1635],{"class":63},[53,2114,2115],{"class":282},"2",[53,2117,1644],{"class":63},[53,2119,286],{"class":59},[53,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2142,2144],{"class":55,"line":2122},51,[53,2124,2038],{"class":307},[53,2126,384],{"class":59},[53,2128,2043],{"class":1631},[53,2130,1635],{"class":63},[53,2132,1399],{"class":59},[53,2134,1946],{"class":77},[53,2136,1399],{"class":59},[53,2138,1750],{"class":59},[53,2140,2141],{"class":307},"idname",[53,2143,1644],{"class":63},[53,2145,286],{"class":59},[53,2147,2149,2152,2154,2156,2158,2160],{"class":55,"line":2148},52,[53,2150,2151],{"class":307},"    info",[53,2153,384],{"class":59},[53,2155,1946],{"class":307},[53,2157,1906],{"class":59},[53,2159,2081],{"class":307},[53,2161,286],{"class":59},[53,2163,2165],{"class":55,"line":2164},53,[53,2166,321],{"emptyLinePlaceholder":320},[53,2168,2170],{"class":55,"line":2169},54,[53,2171,2172],{"class":223},"    \u002F\u002F カードに表示される画像（一色塗り潰し）を設定、記録\n",[53,2174,2176],{"class":55,"line":2175},55,[53,2177,2178],{"class":223},"    \u002F\u002F colorsの値と画像名が同じ。\n",[53,2180,2182,2184,2186,2188,2190,2192,2194,2196,2198,2201,2203,2205],{"class":55,"line":2181},56,[53,2183,1900],{"class":67},[53,2185,1903],{"class":307},[53,2187,1906],{"class":59},[53,2189,1626],{"class":307},[53,2191,384],{"class":59},[53,2193,2020],{"class":1631},[53,2195,1635],{"class":63},[53,2197,74],{"class":59},[53,2199,2200],{"class":77},"IMG",[53,2202,74],{"class":59},[53,2204,1644],{"class":63},[53,2206,286],{"class":59},[53,2208,2210,2212,2215,2217,2220,2223,2226,2228,2231,2233,2235,2237,2239,2242,2244,2246,2248,2251,2254],{"class":55,"line":2209},57,[53,2211,1900],{"class":67},[53,2213,2214],{"class":307}," color",[53,2216,1906],{"class":59},[53,2218,2219],{"class":307}," colors",[53,2221,2222],{"class":63},"[",[53,2224,2225],{"class":307},"Math",[53,2227,384],{"class":59},[53,2229,2230],{"class":1631},"floor",[53,2232,1635],{"class":63},[53,2234,2225],{"class":307},[53,2236,384],{"class":59},[53,2238,2091],{"class":1631},[53,2240,2241],{"class":63},"() ",[53,2243,267],{"class":59},[53,2245,2219],{"class":307},[53,2247,384],{"class":59},[53,2249,2250],{"class":307},"length",[53,2252,2253],{"class":63},")]",[53,2255,286],{"class":59},[53,2257,2259,2261,2263,2266,2268,2270],{"class":55,"line":2258},58,[53,2260,2151],{"class":307},[53,2262,384],{"class":59},[53,2264,2265],{"class":307},"color",[53,2267,1906],{"class":59},[53,2269,2214],{"class":307},[53,2271,286],{"class":59},[53,2273,2275],{"class":55,"line":2274},59,[53,2276,321],{"emptyLinePlaceholder":320},[53,2278,2280],{"class":55,"line":2279},60,[53,2281,2282],{"class":223},"    \u002F\u002F IMG要素にカラーの画像とクラス名を付与\n",[53,2284,2286,2289,2291,2293,2295,2297,2300,2302,2304,2306,2309,2311,2314,2316,2318,2320,2323,2325,2327],{"class":55,"line":2285},61,[53,2287,2288],{"class":307},"    card",[53,2290,384],{"class":59},[53,2292,2043],{"class":1631},[53,2294,1635],{"class":63},[53,2296,1399],{"class":59},[53,2298,2299],{"class":77},"src",[53,2301,1399],{"class":59},[53,2303,1750],{"class":59},[53,2305,1399],{"class":59},[53,2307,2308],{"class":77},".\u002F",[53,2310,1399],{"class":59},[53,2312,2313],{"class":59},"+",[53,2315,2265],{"class":307},[53,2317,2313],{"class":59},[53,2319,1399],{"class":59},[53,2321,2322],{"class":77},".png",[53,2324,1399],{"class":59},[53,2326,1644],{"class":63},[53,2328,286],{"class":59},[53,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356],{"class":55,"line":2331},62,[53,2333,2288],{"class":307},[53,2335,384],{"class":59},[53,2337,2043],{"class":1631},[53,2339,1635],{"class":63},[53,2341,1399],{"class":59},[53,2343,2050],{"class":77},[53,2345,1399],{"class":59},[53,2347,1750],{"class":59},[53,2349,1399],{"class":59},[53,2351,146],{"class":77},[53,2353,1399],{"class":59},[53,2355,1644],{"class":63},[53,2357,286],{"class":59},[53,2359,2361],{"class":55,"line":2360},63,[53,2362,321],{"emptyLinePlaceholder":320},[53,2364,2366],{"class":55,"line":2365},64,[53,2367,2368],{"class":223},"    \u002F\u002F カードに対して不明な高さを与える\n",[53,2370,2372,2374,2376,2379,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401,2404,2406,2409,2412,2415,2418,2420,2422],{"class":55,"line":2371},65,[53,2373,2151],{"class":307},[53,2375,384],{"class":59},[53,2377,2378],{"class":307},"selfHeight",[53,2380,1906],{"class":59},[53,2382,2086],{"class":307},[53,2384,384],{"class":59},[53,2386,2230],{"class":1631},[53,2388,1635],{"class":63},[53,2390,2225],{"class":307},[53,2392,384],{"class":59},[53,2394,2091],{"class":1631},[53,2396,1860],{"class":63},[53,2398,267],{"class":59},[53,2400,1635],{"class":63},[53,2402,2403],{"class":307},"heightMax",[53,2405,2313],{"class":59},[53,2407,2408],{"class":282},"1",[53,2410,2411],{"class":59},"-",[53,2413,2414],{"class":307},"heightMin",[53,2416,2417],{"class":63},"))",[53,2419,2313],{"class":59},[53,2421,2414],{"class":307},[53,2423,286],{"class":59},[53,2425,2427],{"class":55,"line":2426},66,[53,2428,2429],{"class":63},"    \n",[53,2431,2433],{"class":55,"line":2432},67,[53,2434,2435],{"class":223},"    \u002F\u002F カードDIVにIMGを追加\n",[53,2437,2439,2441,2443,2446,2448,2450,2452],{"class":55,"line":2438},68,[53,2440,2038],{"class":307},[53,2442,384],{"class":59},[53,2444,2445],{"class":1631},"appendChild",[53,2447,1635],{"class":63},[53,2449,1923],{"class":307},[53,2451,1644],{"class":63},[53,2453,286],{"class":59},[53,2455,2457],{"class":55,"line":2456},69,[53,2458,321],{"emptyLinePlaceholder":320},[53,2460,2462],{"class":55,"line":2461},70,[53,2463,2464],{"class":223},"    \u002F\u002F elementsに記録。DOMとIDを返す\n",[53,2466,2468,2471,2473,2476,2478,2481,2483],{"class":55,"line":2467},71,[53,2469,2470],{"class":307},"    elements",[53,2472,384],{"class":59},[53,2474,2475],{"class":1631},"push",[53,2477,1635],{"class":63},[53,2479,2480],{"class":307},"info",[53,2482,1644],{"class":63},[53,2484,286],{"class":59},[53,2486,2488,2490,2493,2495,2497,2500,2502,2504,2506,2508],{"class":55,"line":2487},72,[53,2489,1854],{"class":1853},[53,2491,2492],{"class":59}," {",[53,2494,1928],{"class":63},[53,2496,279],{"class":59},[53,2498,2499],{"class":307},"contain",[53,2501,1750],{"class":59},[53,2503,1946],{"class":63},[53,2505,279],{"class":59},[53,2507,2141],{"class":307},[53,2509,1581],{"class":59},[53,2511,2513],{"class":55,"line":2512},73,[53,2514,315],{"class":59},[53,2516,2518],{"class":55,"line":2517},74,[53,2519,321],{"emptyLinePlaceholder":320},[53,2521,2523],{"class":55,"line":2522},75,[53,2524,2525],{"class":223},"\u002F\u002F カードコンテナーにカードを追加する\n",[53,2527,2529,2531,2534,2536,2539,2543,2545,2547],{"class":55,"line":2528},76,[53,2530,1507],{"class":67},[53,2532,2533],{"class":307}," insertCard ",[53,2535,71],{"class":59},[53,2537,2538],{"class":59}," (",[53,2540,2542],{"class":2541},"s7ZW3","cardDom",[53,2544,1644],{"class":59},[53,2546,1846],{"class":67},[53,2548,270],{"class":59},[53,2550,2552,2555,2557,2559,2561,2563,2565],{"class":55,"line":2551},77,[53,2553,2554],{"class":307},"    cardsContainer",[53,2556,384],{"class":59},[53,2558,2445],{"class":1631},[53,2560,1635],{"class":63},[53,2562,2542],{"class":307},[53,2564,1644],{"class":63},[53,2566,286],{"class":59},[53,2568,2570],{"class":55,"line":2569},78,[53,2571,315],{"class":59},[53,2573,2575],{"class":55,"line":2574},79,[53,2576,321],{"emptyLinePlaceholder":320},[53,2578,2580],{"class":55,"line":2579},80,[53,2581,2582],{"class":223},"\u002F\u002F これが大切\n",[53,2584,2586],{"class":55,"line":2585},81,[53,2587,2588],{"class":223},"\u002F\u002F IDで紐づいたDOMに対して高さと位置を決定させる。\n",[53,2590,2592,2594,2597,2599,2601,2603,2605,2608],{"class":55,"line":2591},82,[53,2593,1507],{"class":67},[53,2595,2596],{"class":307}," scanAdd ",[53,2598,71],{"class":59},[53,2600,2538],{"class":59},[53,2602,1946],{"class":2541},[53,2604,1644],{"class":59},[53,2606,2607],{"class":67}," =>",[53,2609,270],{"class":59},[53,2611,2613],{"class":55,"line":2612},83,[53,2614,2615],{"class":223},"    \u002F\u002F elementsから対象カードのIDの番号、情報を取得\n",[53,2617,2619,2621,2624,2626,2629,2631,2634,2636,2639,2641,2644,2647,2650,2652,2654,2657,2659,2661,2663],{"class":55,"line":2618},84,[53,2620,1900],{"class":67},[53,2622,2623],{"class":307}," index",[53,2625,1906],{"class":59},[53,2627,2628],{"class":307}," elements",[53,2630,384],{"class":59},[53,2632,2633],{"class":1631},"findIndex",[53,2635,1635],{"class":63},[53,2637,2638],{"class":2541},"ele",[53,2640,1846],{"class":67},[53,2642,2643],{"class":59},"{",[53,2645,2646],{"class":1853},"return",[53,2648,2649],{"class":307}," ele",[53,2651,384],{"class":59},[53,2653,1946],{"class":307},[53,2655,2656],{"class":59},"===",[53,2658,1946],{"class":307},[53,2660,1867],{"class":59},[53,2662,1644],{"class":63},[53,2664,286],{"class":59},[53,2666,2668,2670,2672,2674,2676,2678,2681],{"class":55,"line":2667},85,[53,2669,1900],{"class":67},[53,2671,2649],{"class":307},[53,2673,1906],{"class":59},[53,2675,2628],{"class":307},[53,2677,2222],{"class":63},[53,2679,2680],{"class":307},"index",[53,2682,2683],{"class":63},"]\n",[53,2685,2687],{"class":55,"line":2686},86,[53,2688,321],{"emptyLinePlaceholder":320},[53,2690,2692],{"class":55,"line":2691},87,[53,2693,2694],{"class":223},"    \u002F\u002F DOMを取得\n",[53,2696,2698,2700,2703,2705,2707,2709,2711,2713,2715,2717,2719,2721],{"class":55,"line":2697},88,[53,2699,1900],{"class":67},[53,2701,2702],{"class":307}," dom",[53,2704,1906],{"class":59},[53,2706,1626],{"class":307},[53,2708,384],{"class":59},[53,2710,1632],{"class":1631},[53,2712,1635],{"class":63},[53,2714,2638],{"class":307},[53,2716,384],{"class":59},[53,2718,1946],{"class":307},[53,2720,1644],{"class":63},[53,2722,286],{"class":59},[53,2724,2726],{"class":55,"line":2725},89,[53,2727,321],{"emptyLinePlaceholder":320},[53,2729,2731],{"class":55,"line":2730},90,[53,2732,2733],{"class":223},"    \u002F\u002F index、つまりカードが何晩目かと列数でx,yの位置を決定する。\n",[53,2735,2737,2739,2742,2744,2746,2748],{"class":55,"line":2736},91,[53,2738,1900],{"class":67},[53,2740,2741],{"class":307}," height",[53,2743,1906],{"class":59},[53,2745,2649],{"class":307},[53,2747,384],{"class":59},[53,2749,2750],{"class":307},"selfHeight\n",[53,2752,2754,2757,2759,2762,2764,2766,2768,2771,2774,2776,2779,2782,2784,2787,2789,2791,2794,2796,2798,2800,2802,2805,2807],{"class":55,"line":2753},92,[53,2755,2756],{"class":307},"    ele",[53,2758,384],{"class":59},[53,2760,2761],{"class":307},"y",[53,2763,1906],{"class":59},[53,2765,2538],{"class":63},[53,2767,2680],{"class":307},[53,2769,2770],{"class":59}," \u003C",[53,2772,2773],{"class":307}," row",[53,2775,1644],{"class":63},[53,2777,2778],{"class":59},"?",[53,2780,2781],{"class":307},"height",[53,2783,279],{"class":59},[53,2785,2786],{"class":307},"elements",[53,2788,2222],{"class":63},[53,2790,2680],{"class":307},[53,2792,2793],{"class":59}," -",[53,2795,2773],{"class":307},[53,2797,1796],{"class":63},[53,2799,384],{"class":59},[53,2801,2761],{"class":307},[53,2803,2804],{"class":59}," +",[53,2806,2741],{"class":307},[53,2808,286],{"class":59},[53,2810,2812,2814,2817,2819,2821,2823,2826,2828,2831,2833,2835,2838,2841,2843,2846,2848,2850],{"class":55,"line":2811},93,[53,2813,1900],{"class":67},[53,2815,2816],{"class":307}," x",[53,2818,1906],{"class":59},[53,2820,2538],{"class":63},[53,2822,2680],{"class":307},[53,2824,2825],{"class":59},"%",[53,2827,1635],{"class":63},[53,2829,2830],{"class":307},"row",[53,2832,1644],{"class":63},[53,2834,267],{"class":59},[53,2836,2837],{"class":282},"100",[53,2839,2840],{"class":63},") ",[53,2842,2313],{"class":59},[53,2844,2845],{"class":59}," '",[53,2847,2825],{"class":77},[53,2849,1399],{"class":59},[53,2851,286],{"class":59},[53,2853,2855,2857,2860,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894],{"class":55,"line":2854},94,[53,2856,1900],{"class":67},[53,2858,2859],{"class":307}," y",[53,2861,1906],{"class":59},[53,2863,2538],{"class":63},[53,2865,2680],{"class":307},[53,2867,2770],{"class":59},[53,2869,2773],{"class":307},[53,2871,1644],{"class":63},[53,2873,2778],{"class":59},[53,2875,1563],{"class":282},[53,2877,279],{"class":59},[53,2879,2786],{"class":307},[53,2881,2222],{"class":63},[53,2883,2680],{"class":307},[53,2885,2793],{"class":59},[53,2887,2773],{"class":307},[53,2889,1796],{"class":63},[53,2891,384],{"class":59},[53,2893,2761],{"class":307},[53,2895,286],{"class":59},[53,2897,2899],{"class":55,"line":2898},95,[53,2900,2429],{"class":63},[53,2902,2904],{"class":55,"line":2903},96,[53,2905,2906],{"class":223},"    \u002F\u002F 位置をずらすスタイルを適用\n",[53,2908,2910,2913,2915,2917,2919,2921,2924,2926,2928,2931,2934,2937,2939,2941,2944,2946,2949,2951,2953,2955,2957,2959,2962,2964],{"class":55,"line":2909},97,[53,2911,2912],{"class":307},"    dom",[53,2914,384],{"class":59},[53,2916,2043],{"class":1631},[53,2918,1635],{"class":63},[53,2920,1399],{"class":59},[53,2922,2923],{"class":77},"style",[53,2925,1399],{"class":59},[53,2927,1750],{"class":59},[53,2929,2930],{"class":59},"`",[53,2932,2933],{"class":77},"height:",[53,2935,2936],{"class":59},"${",[53,2938,2781],{"class":307},[53,2940,1867],{"class":59},[53,2942,2943],{"class":77},"px; transform:translate(",[53,2945,2936],{"class":59},[53,2947,2948],{"class":307},"x",[53,2950,1867],{"class":59},[53,2952,1750],{"class":77},[53,2954,2936],{"class":59},[53,2956,2761],{"class":307},[53,2958,1867],{"class":59},[53,2960,2961],{"class":77},"px);",[53,2963,2930],{"class":59},[53,2965,1870],{"class":63},[53,2967,2969],{"class":55,"line":2968},98,[53,2970,321],{"emptyLinePlaceholder":320},[53,2972,2974],{"class":55,"line":2973},99,[53,2975,2976],{"class":223},"    \u002F\u002F アニメーション用のスタイルを追加\n",[53,2978,2980,2983,2985,2987,2989],{"class":55,"line":2979},100,[53,2981,2982],{"class":1631},"    setTimeout",[53,2984,1635],{"class":63},[53,2986,1860],{"class":59},[53,2988,1846],{"class":67},[53,2990,270],{"class":59},[53,2992,2994,2997,2999,3002,3004,3007,3009,3011,3013,3015],{"class":55,"line":2993},101,[53,2995,2996],{"class":307},"        dom",[53,2998,384],{"class":59},[53,3000,3001],{"class":307},"classList",[53,3003,384],{"class":59},[53,3005,3006],{"class":1631},"add",[53,3008,1635],{"class":63},[53,3010,1399],{"class":59},[53,3012,751],{"class":77},[53,3014,1399],{"class":59},[53,3016,1870],{"class":63},[53,3018,3020,3023,3026,3028],{"class":55,"line":3019},102,[53,3021,3022],{"class":59},"    },",[53,3024,3025],{"class":282},"500",[53,3027,1644],{"class":63},[53,3029,286],{"class":59},[53,3031,3033],{"class":55,"line":3032},103,[53,3034,315],{"class":59},[10,3036,3037],{},"大まかな流れとしては以下の通りです。",[3039,3040,3041,3045,3048,3051,3054],"ol",{},[3042,3043,3044],"li",{},"列数、カード座標情報などの初期値と格納する配列の定義。",[3042,3046,3047],{},"ボタンに対するイベントリスナーの定義、ボタンを押したら以下を発火。",[3042,3049,3050],{},"新しいカードを作成する",[3042,3052,3053],{},"カードをコンテナに追加",[3042,3055,3056],{},"追加数、列数に応じて追加したカードの位置を決定",[10,3058,3059],{},"それでは細かく解説していきます。",[3061,3062,3063],"h4",{"id":3063},"定数などの準備",[43,3065,3067],{"className":1493,"code":3066,"language":1495,"meta":48,"style":48},"\u002F\u002F カード情報を格納\nlet elements = [];\n\n\u002F\u002F カードの初期値\nlet elementInit = {\n    id:undefined,\n    color:undefined,\n    selfHeight:0,\n    y:0,\n    x:0\n};\n\n\u002F\u002F 列数\nlet row = 3;\n\n\u002F\u002F 挿入先コンテナ\nconst cardsContainer = document.getElementById('card-container');\n\n\u002F\u002F 追加ボタン\nconst cardsAddBtn = document.getElementById('card-add');\n\n\u002F\u002F　カード高さの最大値と最小値\nconst heightMax = 400;\nconst heightMin = 100;\n\n\u002F\u002F 色のパターンとカード間の隙間（px）\nconst colors = ['red','yellow','green','orange','blue','purple'];\nconst cardGap = 10;\n",[50,3068,3069,3073,3085,3089,3093,3103,3109,3115,3125,3135,3144,3148,3152,3156,3168,3172,3176,3202,3206,3210,3236,3240,3244,3256,3268,3272,3276,3336],{"__ignoreMap":48},[53,3070,3071],{"class":55,"line":56},[53,3072,1502],{"class":223},[53,3074,3075,3077,3079,3081,3083],{"class":55,"line":98},[53,3076,1507],{"class":67},[53,3078,1510],{"class":307},[53,3080,71],{"class":59},[53,3082,1515],{"class":307},[53,3084,286],{"class":59},[53,3086,3087],{"class":55,"line":119},[53,3088,321],{"emptyLinePlaceholder":320},[53,3090,3091],{"class":55,"line":153},[53,3092,1526],{"class":223},[53,3094,3095,3097,3099,3101],{"class":55,"line":163},[53,3096,1507],{"class":67},[53,3098,1533],{"class":307},[53,3100,71],{"class":59},[53,3102,1538],{"class":59},[53,3104,3105,3107],{"class":55,"line":182},[53,3106,1543],{"class":63},[53,3108,1546],{"class":59},[53,3110,3111,3113],{"class":55,"line":211},[53,3112,1551],{"class":63},[53,3114,1546],{"class":59},[53,3116,3117,3119,3121,3123],{"class":55,"line":220},[53,3118,1558],{"class":63},[53,3120,279],{"class":59},[53,3122,1563],{"class":282},[53,3124,1566],{"class":59},[53,3126,3127,3129,3131,3133],{"class":55,"line":227},[53,3128,1571],{"class":63},[53,3130,279],{"class":59},[53,3132,1563],{"class":282},[53,3134,1566],{"class":59},[53,3136,3137,3140,3142],{"class":55,"line":358},[53,3138,3139],{"class":63},"    x",[53,3141,279],{"class":59},[53,3143,1576],{"class":282},[53,3145,3146],{"class":55,"line":371},[53,3147,1581],{"class":59},[53,3149,3150],{"class":55,"line":376},[53,3151,321],{"emptyLinePlaceholder":320},[53,3153,3154],{"class":55,"line":381},[53,3155,1590],{"class":223},[53,3157,3158,3160,3162,3164,3166],{"class":55,"line":392},[53,3159,1507],{"class":67},[53,3161,1597],{"class":307},[53,3163,71],{"class":59},[53,3165,1602],{"class":282},[53,3167,286],{"class":59},[53,3169,3170],{"class":55,"line":405},[53,3171,321],{"emptyLinePlaceholder":320},[53,3173,3174],{"class":55,"line":419},[53,3175,1613],{"class":223},[53,3177,3178,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200],{"class":55,"line":434},[53,3179,1618],{"class":67},[53,3181,1621],{"class":307},[53,3183,71],{"class":59},[53,3185,1626],{"class":307},[53,3187,384],{"class":59},[53,3189,1632],{"class":1631},[53,3191,1635],{"class":307},[53,3193,1399],{"class":59},[53,3195,90],{"class":77},[53,3197,1399],{"class":59},[53,3199,1644],{"class":307},[53,3201,286],{"class":59},[53,3203,3204],{"class":55,"line":447},[53,3205,321],{"emptyLinePlaceholder":320},[53,3207,3208],{"class":55,"line":452},[53,3209,1655],{"class":223},[53,3211,3212,3214,3216,3218,3220,3222,3224,3226,3228,3230,3232,3234],{"class":55,"line":457},[53,3213,1618],{"class":67},[53,3215,1662],{"class":307},[53,3217,71],{"class":59},[53,3219,1626],{"class":307},[53,3221,384],{"class":59},[53,3223,1632],{"class":1631},[53,3225,1635],{"class":307},[53,3227,1399],{"class":59},[53,3229,329],{"class":77},[53,3231,1399],{"class":59},[53,3233,1644],{"class":307},[53,3235,286],{"class":59},[53,3237,3238],{"class":55,"line":466},[53,3239,321],{"emptyLinePlaceholder":320},[53,3241,3242],{"class":55,"line":480},[53,3243,1691],{"class":223},[53,3245,3246,3248,3250,3252,3254],{"class":55,"line":493},[53,3247,1618],{"class":67},[53,3249,1698],{"class":307},[53,3251,71],{"class":59},[53,3253,1703],{"class":282},[53,3255,286],{"class":59},[53,3257,3258,3260,3262,3264,3266],{"class":55,"line":506},[53,3259,1618],{"class":67},[53,3261,1712],{"class":307},[53,3263,71],{"class":59},[53,3265,1717],{"class":282},[53,3267,286],{"class":59},[53,3269,3270],{"class":55,"line":518},[53,3271,321],{"emptyLinePlaceholder":320},[53,3273,3274],{"class":55,"line":523},[53,3275,1728],{"class":223},[53,3277,3278,3280,3282,3284,3286,3288,3290,3292,3294,3296,3298,3300,3302,3304,3306,3308,3310,3312,3314,3316,3318,3320,3322,3324,3326,3328,3330,3332,3334],{"class":55,"line":528},[53,3279,1618],{"class":67},[53,3281,1735],{"class":307},[53,3283,71],{"class":59},[53,3285,1740],{"class":307},[53,3287,1399],{"class":59},[53,3289,1745],{"class":77},[53,3291,1399],{"class":59},[53,3293,1750],{"class":59},[53,3295,1399],{"class":59},[53,3297,1755],{"class":77},[53,3299,1399],{"class":59},[53,3301,1750],{"class":59},[53,3303,1399],{"class":59},[53,3305,1764],{"class":77},[53,3307,1399],{"class":59},[53,3309,1750],{"class":59},[53,3311,1399],{"class":59},[53,3313,1773],{"class":77},[53,3315,1399],{"class":59},[53,3317,1750],{"class":59},[53,3319,1399],{"class":59},[53,3321,1782],{"class":77},[53,3323,1399],{"class":59},[53,3325,1750],{"class":59},[53,3327,1399],{"class":59},[53,3329,1791],{"class":77},[53,3331,1399],{"class":59},[53,3333,1796],{"class":307},[53,3335,286],{"class":59},[53,3337,3338,3340,3342,3344,3346],{"class":55,"line":542},[53,3339,1618],{"class":67},[53,3341,1805],{"class":307},[53,3343,71],{"class":59},[53,3345,1810],{"class":282},[53,3347,286],{"class":59},[10,3349,3350,3351,3353],{},"ここでは追加する際に必要な定数やDOMを定義しておきます。\n",[50,3352,2786],{},"には作成したカードコンテンツを記録しておきます。列＋１番目以降（今回は４番目以降）の高さを調整するときなどに使用します。",[3061,3355,3356],{"id":3356},"カードの作成関数を設定",[43,3358,3360],{"className":1493,"code":3359,"language":1495,"meta":48,"style":48},"\u002F\u002F カードのDOMを新規作成\nlet createCard = ()=>{\n    let info = {...elementInit};\n\n    \u002F\u002F カードの要素をdivで作成\n    let contain = document.createElement(\"DIV\");\n    contain.setAttribute('class','c-card-container');\n\n    \u002F\u002F IDをランダムに作成、記録\n    let idname = Math.random().toString(32).substring(2);\n    contain.setAttribute('id',idname);\n    info.id = idname;\n\n    \u002F\u002F カードに表示される画像（一色塗り潰し）を設定、記録\n    \u002F\u002F colorsの値と画像名が同じ。\n    let card = document.createElement(\"IMG\");\n    let color = colors[Math.floor(Math.random() * colors.length)];\n    info.color = color;\n\n    \u002F\u002F IMG要素にカラーの画像とクラス名を付与\n    card.setAttribute('src','.\u002F'+color+'.png');\n    card.setAttribute('class','c-card-img');\n\n    \u002F\u002F カードに対して不明な高さを与える\n    info.selfHeight = Math.floor(Math.random()*(heightMax+1-heightMin))+heightMin;\n    \n    \u002F\u002F カードDIVにIMGを追加\n    contain.appendChild(card);\n\n    \u002F\u002F elementsに記録。DOMとIDを返す\n    elements.push(info);\n    return {dom:contain,id:idname};\n}\n",[50,3361,3362,3366,3380,3394,3398,3402,3428,3456,3460,3464,3502,3526,3540,3544,3548,3552,3578,3618,3632,3636,3640,3680,3708,3712,3716,3764,3768,3772,3788,3792,3796,3812,3834],{"__ignoreMap":48},[53,3363,3364],{"class":55,"line":56},[53,3365,1963],{"class":223},[53,3367,3368,3370,3372,3374,3376,3378],{"class":55,"line":98},[53,3369,1507],{"class":67},[53,3371,1970],{"class":307},[53,3373,71],{"class":59},[53,3375,1891],{"class":59},[53,3377,1846],{"class":67},[53,3379,270],{"class":59},[53,3381,3382,3384,3386,3388,3390,3392],{"class":55,"line":119},[53,3383,1900],{"class":67},[53,3385,1985],{"class":307},[53,3387,1906],{"class":59},[53,3389,1990],{"class":59},[53,3391,1993],{"class":307},[53,3393,1581],{"class":59},[53,3395,3396],{"class":55,"line":153},[53,3397,321],{"emptyLinePlaceholder":320},[53,3399,3400],{"class":55,"line":163},[53,3401,2004],{"class":223},[53,3403,3404,3406,3408,3410,3412,3414,3416,3418,3420,3422,3424,3426],{"class":55,"line":182},[53,3405,1900],{"class":67},[53,3407,2011],{"class":307},[53,3409,1906],{"class":59},[53,3411,1626],{"class":307},[53,3413,384],{"class":59},[53,3415,2020],{"class":1631},[53,3417,1635],{"class":63},[53,3419,74],{"class":59},[53,3421,2027],{"class":77},[53,3423,74],{"class":59},[53,3425,1644],{"class":63},[53,3427,286],{"class":59},[53,3429,3430,3432,3434,3436,3438,3440,3442,3444,3446,3448,3450,3452,3454],{"class":55,"line":211},[53,3431,2038],{"class":307},[53,3433,384],{"class":59},[53,3435,2043],{"class":1631},[53,3437,1635],{"class":63},[53,3439,1399],{"class":59},[53,3441,2050],{"class":77},[53,3443,1399],{"class":59},[53,3445,1750],{"class":59},[53,3447,1399],{"class":59},[53,3449,242],{"class":77},[53,3451,1399],{"class":59},[53,3453,1644],{"class":63},[53,3455,286],{"class":59},[53,3457,3458],{"class":55,"line":220},[53,3459,321],{"emptyLinePlaceholder":320},[53,3461,3462],{"class":55,"line":227},[53,3463,2073],{"class":223},[53,3465,3466,3468,3470,3472,3474,3476,3478,3480,3482,3484,3486,3488,3490,3492,3494,3496,3498,3500],{"class":55,"line":358},[53,3467,1900],{"class":67},[53,3469,2081],{"class":307},[53,3471,1906],{"class":59},[53,3473,2086],{"class":307},[53,3475,384],{"class":59},[53,3477,2091],{"class":1631},[53,3479,1860],{"class":63},[53,3481,384],{"class":59},[53,3483,2098],{"class":1631},[53,3485,1635],{"class":63},[53,3487,2103],{"class":282},[53,3489,1644],{"class":63},[53,3491,384],{"class":59},[53,3493,2110],{"class":1631},[53,3495,1635],{"class":63},[53,3497,2115],{"class":282},[53,3499,1644],{"class":63},[53,3501,286],{"class":59},[53,3503,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522,3524],{"class":55,"line":371},[53,3505,2038],{"class":307},[53,3507,384],{"class":59},[53,3509,2043],{"class":1631},[53,3511,1635],{"class":63},[53,3513,1399],{"class":59},[53,3515,1946],{"class":77},[53,3517,1399],{"class":59},[53,3519,1750],{"class":59},[53,3521,2141],{"class":307},[53,3523,1644],{"class":63},[53,3525,286],{"class":59},[53,3527,3528,3530,3532,3534,3536,3538],{"class":55,"line":376},[53,3529,2151],{"class":307},[53,3531,384],{"class":59},[53,3533,1946],{"class":307},[53,3535,1906],{"class":59},[53,3537,2081],{"class":307},[53,3539,286],{"class":59},[53,3541,3542],{"class":55,"line":381},[53,3543,321],{"emptyLinePlaceholder":320},[53,3545,3546],{"class":55,"line":392},[53,3547,2172],{"class":223},[53,3549,3550],{"class":55,"line":405},[53,3551,2178],{"class":223},[53,3553,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3574,3576],{"class":55,"line":419},[53,3555,1900],{"class":67},[53,3557,1903],{"class":307},[53,3559,1906],{"class":59},[53,3561,1626],{"class":307},[53,3563,384],{"class":59},[53,3565,2020],{"class":1631},[53,3567,1635],{"class":63},[53,3569,74],{"class":59},[53,3571,2200],{"class":77},[53,3573,74],{"class":59},[53,3575,1644],{"class":63},[53,3577,286],{"class":59},[53,3579,3580,3582,3584,3586,3588,3590,3592,3594,3596,3598,3600,3602,3604,3606,3608,3610,3612,3614,3616],{"class":55,"line":434},[53,3581,1900],{"class":67},[53,3583,2214],{"class":307},[53,3585,1906],{"class":59},[53,3587,2219],{"class":307},[53,3589,2222],{"class":63},[53,3591,2225],{"class":307},[53,3593,384],{"class":59},[53,3595,2230],{"class":1631},[53,3597,1635],{"class":63},[53,3599,2225],{"class":307},[53,3601,384],{"class":59},[53,3603,2091],{"class":1631},[53,3605,2241],{"class":63},[53,3607,267],{"class":59},[53,3609,2219],{"class":307},[53,3611,384],{"class":59},[53,3613,2250],{"class":307},[53,3615,2253],{"class":63},[53,3617,286],{"class":59},[53,3619,3620,3622,3624,3626,3628,3630],{"class":55,"line":447},[53,3621,2151],{"class":307},[53,3623,384],{"class":59},[53,3625,2265],{"class":307},[53,3627,1906],{"class":59},[53,3629,2214],{"class":307},[53,3631,286],{"class":59},[53,3633,3634],{"class":55,"line":452},[53,3635,321],{"emptyLinePlaceholder":320},[53,3637,3638],{"class":55,"line":457},[53,3639,2282],{"class":223},[53,3641,3642,3644,3646,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678],{"class":55,"line":466},[53,3643,2288],{"class":307},[53,3645,384],{"class":59},[53,3647,2043],{"class":1631},[53,3649,1635],{"class":63},[53,3651,1399],{"class":59},[53,3653,2299],{"class":77},[53,3655,1399],{"class":59},[53,3657,1750],{"class":59},[53,3659,1399],{"class":59},[53,3661,2308],{"class":77},[53,3663,1399],{"class":59},[53,3665,2313],{"class":59},[53,3667,2265],{"class":307},[53,3669,2313],{"class":59},[53,3671,1399],{"class":59},[53,3673,2322],{"class":77},[53,3675,1399],{"class":59},[53,3677,1644],{"class":63},[53,3679,286],{"class":59},[53,3681,3682,3684,3686,3688,3690,3692,3694,3696,3698,3700,3702,3704,3706],{"class":55,"line":480},[53,3683,2288],{"class":307},[53,3685,384],{"class":59},[53,3687,2043],{"class":1631},[53,3689,1635],{"class":63},[53,3691,1399],{"class":59},[53,3693,2050],{"class":77},[53,3695,1399],{"class":59},[53,3697,1750],{"class":59},[53,3699,1399],{"class":59},[53,3701,146],{"class":77},[53,3703,1399],{"class":59},[53,3705,1644],{"class":63},[53,3707,286],{"class":59},[53,3709,3710],{"class":55,"line":493},[53,3711,321],{"emptyLinePlaceholder":320},[53,3713,3714],{"class":55,"line":506},[53,3715,2368],{"class":223},[53,3717,3718,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3746,3748,3750,3752,3754,3756,3758,3760,3762],{"class":55,"line":518},[53,3719,2151],{"class":307},[53,3721,384],{"class":59},[53,3723,2378],{"class":307},[53,3725,1906],{"class":59},[53,3727,2086],{"class":307},[53,3729,384],{"class":59},[53,3731,2230],{"class":1631},[53,3733,1635],{"class":63},[53,3735,2225],{"class":307},[53,3737,384],{"class":59},[53,3739,2091],{"class":1631},[53,3741,1860],{"class":63},[53,3743,267],{"class":59},[53,3745,1635],{"class":63},[53,3747,2403],{"class":307},[53,3749,2313],{"class":59},[53,3751,2408],{"class":282},[53,3753,2411],{"class":59},[53,3755,2414],{"class":307},[53,3757,2417],{"class":63},[53,3759,2313],{"class":59},[53,3761,2414],{"class":307},[53,3763,286],{"class":59},[53,3765,3766],{"class":55,"line":523},[53,3767,2429],{"class":63},[53,3769,3770],{"class":55,"line":528},[53,3771,2435],{"class":223},[53,3773,3774,3776,3778,3780,3782,3784,3786],{"class":55,"line":542},[53,3775,2038],{"class":307},[53,3777,384],{"class":59},[53,3779,2445],{"class":1631},[53,3781,1635],{"class":63},[53,3783,1923],{"class":307},[53,3785,1644],{"class":63},[53,3787,286],{"class":59},[53,3789,3790],{"class":55,"line":554},[53,3791,321],{"emptyLinePlaceholder":320},[53,3793,3794],{"class":55,"line":565},[53,3795,2464],{"class":223},[53,3797,3798,3800,3802,3804,3806,3808,3810],{"class":55,"line":578},[53,3799,2470],{"class":307},[53,3801,384],{"class":59},[53,3803,2475],{"class":1631},[53,3805,1635],{"class":63},[53,3807,2480],{"class":307},[53,3809,1644],{"class":63},[53,3811,286],{"class":59},[53,3813,3814,3816,3818,3820,3822,3824,3826,3828,3830,3832],{"class":55,"line":590},[53,3815,1854],{"class":1853},[53,3817,2492],{"class":59},[53,3819,1928],{"class":63},[53,3821,279],{"class":59},[53,3823,2499],{"class":307},[53,3825,1750],{"class":59},[53,3827,1946],{"class":63},[53,3829,279],{"class":59},[53,3831,2141],{"class":307},[53,3833,1581],{"class":59},[53,3835,3836],{"class":55,"line":609},[53,3837,315],{"class":59},[10,3839,3840,3841,3844,3845,3847,3848,3850],{},"カードの作成関数",[50,3842,3843],{},"createCard()","を作ります。ここはカードの要素を作成して、ランダムなIDを付与します。変数",[50,3846,2480],{},"にはカードの高さ、IDを記録して",[50,3849,2786],{},"に入れておきます。",[3061,3852,3853],{"id":3853},"要素の挿入関数を作成",[43,3855,3857],{"className":1493,"code":3856,"language":1495,"meta":48,"style":48},"\u002F\u002F カードコンテナーにカードを追加する\nlet insertCard = (cardDom)=>{\n    cardsContainer.appendChild(cardDom);\n}\n",[50,3858,3859,3863,3881,3897],{"__ignoreMap":48},[53,3860,3861],{"class":55,"line":56},[53,3862,2525],{"class":223},[53,3864,3865,3867,3869,3871,3873,3875,3877,3879],{"class":55,"line":98},[53,3866,1507],{"class":67},[53,3868,2533],{"class":307},[53,3870,71],{"class":59},[53,3872,2538],{"class":59},[53,3874,2542],{"class":2541},[53,3876,1644],{"class":59},[53,3878,1846],{"class":67},[53,3880,270],{"class":59},[53,3882,3883,3885,3887,3889,3891,3893,3895],{"class":55,"line":119},[53,3884,2554],{"class":307},[53,3886,384],{"class":59},[53,3888,2445],{"class":1631},[53,3890,1635],{"class":63},[53,3892,2542],{"class":307},[53,3894,1644],{"class":63},[53,3896,286],{"class":59},[53,3898,3899],{"class":55,"line":153},[53,3900,315],{"class":59},[10,3902,3903],{},"ここは作成したカードのDOMをカードコンテナに挿入します。",[3061,3905,3906],{"id":3906},"挿入されたカードの高さと位置を決定",[43,3908,3910],{"className":1493,"code":3909,"language":1495,"meta":48,"style":48},"\u002F\u002F これが大切\n\u002F\u002F IDで紐づいたDOMに対して高さと位置を決定させる。\nlet scanAdd = (id) =>{\n    \u002F\u002F elementsから対象カードのIDの番号、情報を取得\n    let index = elements.findIndex(ele=>{return ele.id===id});\n    let ele = elements[index]\n\n    \u002F\u002F DOMを取得\n    let dom = document.getElementById(ele.id);\n\n    \u002F\u002F index、つまりカードが何晩目かと列数でx,yの位置を決定する。\n    let height = ele.selfHeight\n    ele.y = (index \u003C row)?height:elements[index - row].y + height;\n    let x = (index%(row)*100) + '%';\n    let y = (index \u003C row)?0:elements[index - row].y;\n    \n    \u002F\u002F 位置をずらすスタイルを適用\n    dom.setAttribute('style',`height:${height}px; transform:translate(${x},${y}px);`)\n\n    \u002F\u002F アニメーション用のスタイルを追加\n    setTimeout(()=>{\n        dom.classList.add('u-animate')\n    },500);\n}\n",[50,3911,3912,3916,3920,3938,3942,3982,3998,4002,4006,4032,4036,4040,4054,4102,4138,4180,4184,4188,4238,4242,4246,4258,4280,4290],{"__ignoreMap":48},[53,3913,3914],{"class":55,"line":56},[53,3915,2582],{"class":223},[53,3917,3918],{"class":55,"line":98},[53,3919,2588],{"class":223},[53,3921,3922,3924,3926,3928,3930,3932,3934,3936],{"class":55,"line":119},[53,3923,1507],{"class":67},[53,3925,2596],{"class":307},[53,3927,71],{"class":59},[53,3929,2538],{"class":59},[53,3931,1946],{"class":2541},[53,3933,1644],{"class":59},[53,3935,2607],{"class":67},[53,3937,270],{"class":59},[53,3939,3940],{"class":55,"line":153},[53,3941,2615],{"class":223},[53,3943,3944,3946,3948,3950,3952,3954,3956,3958,3960,3962,3964,3966,3968,3970,3972,3974,3976,3978,3980],{"class":55,"line":163},[53,3945,1900],{"class":67},[53,3947,2623],{"class":307},[53,3949,1906],{"class":59},[53,3951,2628],{"class":307},[53,3953,384],{"class":59},[53,3955,2633],{"class":1631},[53,3957,1635],{"class":63},[53,3959,2638],{"class":2541},[53,3961,1846],{"class":67},[53,3963,2643],{"class":59},[53,3965,2646],{"class":1853},[53,3967,2649],{"class":307},[53,3969,384],{"class":59},[53,3971,1946],{"class":307},[53,3973,2656],{"class":59},[53,3975,1946],{"class":307},[53,3977,1867],{"class":59},[53,3979,1644],{"class":63},[53,3981,286],{"class":59},[53,3983,3984,3986,3988,3990,3992,3994,3996],{"class":55,"line":182},[53,3985,1900],{"class":67},[53,3987,2649],{"class":307},[53,3989,1906],{"class":59},[53,3991,2628],{"class":307},[53,3993,2222],{"class":63},[53,3995,2680],{"class":307},[53,3997,2683],{"class":63},[53,3999,4000],{"class":55,"line":211},[53,4001,321],{"emptyLinePlaceholder":320},[53,4003,4004],{"class":55,"line":220},[53,4005,2694],{"class":223},[53,4007,4008,4010,4012,4014,4016,4018,4020,4022,4024,4026,4028,4030],{"class":55,"line":227},[53,4009,1900],{"class":67},[53,4011,2702],{"class":307},[53,4013,1906],{"class":59},[53,4015,1626],{"class":307},[53,4017,384],{"class":59},[53,4019,1632],{"class":1631},[53,4021,1635],{"class":63},[53,4023,2638],{"class":307},[53,4025,384],{"class":59},[53,4027,1946],{"class":307},[53,4029,1644],{"class":63},[53,4031,286],{"class":59},[53,4033,4034],{"class":55,"line":358},[53,4035,321],{"emptyLinePlaceholder":320},[53,4037,4038],{"class":55,"line":371},[53,4039,2733],{"class":223},[53,4041,4042,4044,4046,4048,4050,4052],{"class":55,"line":376},[53,4043,1900],{"class":67},[53,4045,2741],{"class":307},[53,4047,1906],{"class":59},[53,4049,2649],{"class":307},[53,4051,384],{"class":59},[53,4053,2750],{"class":307},[53,4055,4056,4058,4060,4062,4064,4066,4068,4070,4072,4074,4076,4078,4080,4082,4084,4086,4088,4090,4092,4094,4096,4098,4100],{"class":55,"line":381},[53,4057,2756],{"class":307},[53,4059,384],{"class":59},[53,4061,2761],{"class":307},[53,4063,1906],{"class":59},[53,4065,2538],{"class":63},[53,4067,2680],{"class":307},[53,4069,2770],{"class":59},[53,4071,2773],{"class":307},[53,4073,1644],{"class":63},[53,4075,2778],{"class":59},[53,4077,2781],{"class":307},[53,4079,279],{"class":59},[53,4081,2786],{"class":307},[53,4083,2222],{"class":63},[53,4085,2680],{"class":307},[53,4087,2793],{"class":59},[53,4089,2773],{"class":307},[53,4091,1796],{"class":63},[53,4093,384],{"class":59},[53,4095,2761],{"class":307},[53,4097,2804],{"class":59},[53,4099,2741],{"class":307},[53,4101,286],{"class":59},[53,4103,4104,4106,4108,4110,4112,4114,4116,4118,4120,4122,4124,4126,4128,4130,4132,4134,4136],{"class":55,"line":392},[53,4105,1900],{"class":67},[53,4107,2816],{"class":307},[53,4109,1906],{"class":59},[53,4111,2538],{"class":63},[53,4113,2680],{"class":307},[53,4115,2825],{"class":59},[53,4117,1635],{"class":63},[53,4119,2830],{"class":307},[53,4121,1644],{"class":63},[53,4123,267],{"class":59},[53,4125,2837],{"class":282},[53,4127,2840],{"class":63},[53,4129,2313],{"class":59},[53,4131,2845],{"class":59},[53,4133,2825],{"class":77},[53,4135,1399],{"class":59},[53,4137,286],{"class":59},[53,4139,4140,4142,4144,4146,4148,4150,4152,4154,4156,4158,4160,4162,4164,4166,4168,4170,4172,4174,4176,4178],{"class":55,"line":405},[53,4141,1900],{"class":67},[53,4143,2859],{"class":307},[53,4145,1906],{"class":59},[53,4147,2538],{"class":63},[53,4149,2680],{"class":307},[53,4151,2770],{"class":59},[53,4153,2773],{"class":307},[53,4155,1644],{"class":63},[53,4157,2778],{"class":59},[53,4159,1563],{"class":282},[53,4161,279],{"class":59},[53,4163,2786],{"class":307},[53,4165,2222],{"class":63},[53,4167,2680],{"class":307},[53,4169,2793],{"class":59},[53,4171,2773],{"class":307},[53,4173,1796],{"class":63},[53,4175,384],{"class":59},[53,4177,2761],{"class":307},[53,4179,286],{"class":59},[53,4181,4182],{"class":55,"line":419},[53,4183,2429],{"class":63},[53,4185,4186],{"class":55,"line":434},[53,4187,2906],{"class":223},[53,4189,4190,4192,4194,4196,4198,4200,4202,4204,4206,4208,4210,4212,4214,4216,4218,4220,4222,4224,4226,4228,4230,4232,4234,4236],{"class":55,"line":447},[53,4191,2912],{"class":307},[53,4193,384],{"class":59},[53,4195,2043],{"class":1631},[53,4197,1635],{"class":63},[53,4199,1399],{"class":59},[53,4201,2923],{"class":77},[53,4203,1399],{"class":59},[53,4205,1750],{"class":59},[53,4207,2930],{"class":59},[53,4209,2933],{"class":77},[53,4211,2936],{"class":59},[53,4213,2781],{"class":307},[53,4215,1867],{"class":59},[53,4217,2943],{"class":77},[53,4219,2936],{"class":59},[53,4221,2948],{"class":307},[53,4223,1867],{"class":59},[53,4225,1750],{"class":77},[53,4227,2936],{"class":59},[53,4229,2761],{"class":307},[53,4231,1867],{"class":59},[53,4233,2961],{"class":77},[53,4235,2930],{"class":59},[53,4237,1870],{"class":63},[53,4239,4240],{"class":55,"line":452},[53,4241,321],{"emptyLinePlaceholder":320},[53,4243,4244],{"class":55,"line":457},[53,4245,2976],{"class":223},[53,4247,4248,4250,4252,4254,4256],{"class":55,"line":466},[53,4249,2982],{"class":1631},[53,4251,1635],{"class":63},[53,4253,1860],{"class":59},[53,4255,1846],{"class":67},[53,4257,270],{"class":59},[53,4259,4260,4262,4264,4266,4268,4270,4272,4274,4276,4278],{"class":55,"line":480},[53,4261,2996],{"class":307},[53,4263,384],{"class":59},[53,4265,3001],{"class":307},[53,4267,384],{"class":59},[53,4269,3006],{"class":1631},[53,4271,1635],{"class":63},[53,4273,1399],{"class":59},[53,4275,751],{"class":77},[53,4277,1399],{"class":59},[53,4279,1870],{"class":63},[53,4281,4282,4284,4286,4288],{"class":55,"line":493},[53,4283,3022],{"class":59},[53,4285,3025],{"class":282},[53,4287,1644],{"class":63},[53,4289,286],{"class":59},[53,4291,4292],{"class":55,"line":506},[53,4293,315],{"class":59},[10,4295,4296,4299,4300,4302,4303,4306],{},[50,4297,4298],{},"scanAdd()","では対象のID（DOMのID）に基づいて",[50,4301,2786],{},"から高さを設定する対象のカードと、そのカードの１行上のカードの情報を取得します。例えば５番目のカードの場合、２番目のカードの高さを用いてY座標を決定します。この関数ではその情報を元にしてカードに高さを与え、また表示する位置のx,y座標を決定して",[50,4304,4305],{},"translate","の値を決定します。",[3061,4308,4309],{"id":4309},"関数の連結とイベントリスナー",[43,4311,4313],{"className":1493,"code":4312,"language":1495,"meta":48,"style":48},"\u002F\u002F 追加ボタンにイベントリスナーを付与\ncardsAddBtn.addEventListener('click',()=>{\n    return onClickAdd();\n})\n\n\u002F\u002F イベントリスナーの内容\nlet onClickAdd = ()=>{\n    let card = createCard();\n    insertCard(card.dom);\n    scanAdd(card.id);\n}\n",[50,4314,4315,4319,4341,4351,4357,4361,4365,4379,4393,4409,4425],{"__ignoreMap":48},[53,4316,4317],{"class":55,"line":56},[53,4318,1821],{"class":223},[53,4320,4321,4323,4325,4327,4329,4331,4333,4335,4337,4339],{"class":55,"line":98},[53,4322,1826],{"class":307},[53,4324,384],{"class":59},[53,4326,1831],{"class":1631},[53,4328,1635],{"class":307},[53,4330,1399],{"class":59},[53,4332,1838],{"class":77},[53,4334,1399],{"class":59},[53,4336,1843],{"class":59},[53,4338,1846],{"class":67},[53,4340,270],{"class":59},[53,4342,4343,4345,4347,4349],{"class":55,"line":119},[53,4344,1854],{"class":1853},[53,4346,1857],{"class":1631},[53,4348,1860],{"class":63},[53,4350,286],{"class":59},[53,4352,4353,4355],{"class":55,"line":153},[53,4354,1867],{"class":59},[53,4356,1870],{"class":307},[53,4358,4359],{"class":55,"line":163},[53,4360,321],{"emptyLinePlaceholder":320},[53,4362,4363],{"class":55,"line":182},[53,4364,1879],{"class":223},[53,4366,4367,4369,4371,4373,4375,4377],{"class":55,"line":211},[53,4368,1507],{"class":67},[53,4370,1886],{"class":307},[53,4372,71],{"class":59},[53,4374,1891],{"class":59},[53,4376,1846],{"class":67},[53,4378,270],{"class":59},[53,4380,4381,4383,4385,4387,4389,4391],{"class":55,"line":220},[53,4382,1900],{"class":67},[53,4384,1903],{"class":307},[53,4386,1906],{"class":59},[53,4388,1909],{"class":1631},[53,4390,1860],{"class":63},[53,4392,286],{"class":59},[53,4394,4395,4397,4399,4401,4403,4405,4407],{"class":55,"line":227},[53,4396,1918],{"class":1631},[53,4398,1635],{"class":63},[53,4400,1923],{"class":307},[53,4402,384],{"class":59},[53,4404,1928],{"class":307},[53,4406,1644],{"class":63},[53,4408,286],{"class":59},[53,4410,4411,4413,4415,4417,4419,4421,4423],{"class":55,"line":358},[53,4412,1937],{"class":1631},[53,4414,1635],{"class":63},[53,4416,1923],{"class":307},[53,4418,384],{"class":59},[53,4420,1946],{"class":307},[53,4422,1644],{"class":63},[53,4424,286],{"class":59},[53,4426,4427],{"class":55,"line":371},[53,4428,315],{"class":59},[10,4430,4431],{},"最後に上記の関数を連結し、イベントリスナーのコールバックに設定します。イベントリスナーはカードの追加ボタンに付与されています。",[804,4433,4434],{"id":4434},"実装後の動き",[10,4436,4437,4438,4441],{},"完成したデモは",[28,4439,33],{"href":30,"rel":4440},[32],"にあります。「ADD!」というボタンをクリックするとアニメーションつきでカードが追加されていきます。",[2923,4443,4444],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}",{"title":48,"searchDepth":119,"depth":119,"links":4446},[4447,4448,4452],{"id":38,"depth":98,"text":38},{"id":801,"depth":98,"text":802,"children":4449},[4450,4451],{"id":806,"depth":119,"text":807},{"id":847,"depth":119,"text":848},{"id":864,"depth":98,"text":864,"children":4453},[4454,4455,4456,4463],{"id":867,"depth":119,"text":867},{"id":1193,"depth":119,"text":1194},{"id":1483,"depth":119,"text":1483,"children":4457},[4458,4459,4460,4461,4462],{"id":3063,"depth":153,"text":3063},{"id":3356,"depth":153,"text":3356},{"id":3853,"depth":153,"text":3853},{"id":3906,"depth":153,"text":3906},{"id":4309,"depth":153,"text":4309},{"id":4434,"depth":119,"text":4434},[4465],"devstack","2021-07-14","md",null,{},"\u002Farticles\u002Fpinterest-like-style",{"title":5,"description":5},"articles\u002Fpinterest-like-style",[47,259,4474],"js","pinterest-like-style\u002Fthumbnail.png","Kk6is-f7e7A8CgIICoPK0ixaA9U5aJL-fp-oIvtU9PM",1782886886696]