[{"data":1,"prerenderedAt":8789},["ShallowReactive",2],{"tag-css-1":3},{"count":4,"content":5},6,[6,4479,6133,6689,7118,8110],{"id":7,"title":8,"body":9,"category":4466,"createdAt":4468,"description":8,"extension":4469,"index":4470,"meta":4471,"navigation":322,"path":4472,"publish":322,"seo":4473,"series":4470,"seriesTitle":4470,"stem":4474,"tag":4475,"thumbnail":4477,"updatedAt":4470,"__hash__":4478},"articles\u002Farticles\u002Fpinterest-like-style.md","ピンタレストみたいなカードスタイルで動的に要素を追加する方法",{"type":10,"value":11,"toc":4447},"minimark",[12,16,21,24,27,38,42,45,237,254,257,801,805,810,813,824,829,847,851,858,861,864,867,870,873,1180,1187,1190,1193,1197,1200,1478,1483,1486,1493,3037,3040,3059,3062,3066,3350,3356,3359,3840,3853,3856,3903,3906,3909,4296,4309,4312,4431,4434,4437,4444],[13,14,15],"p",{},"こんにちはjunです。突然ですがPinterest（ピンタレスト）ってご存知ですが、以下のような感じのスタイルで画像や動画が一覧で検索できるサービスです。",[17,18],"image-render",{":src":19,":width":20},"'pinterest-like-style\u002Fpinterest.png'","'100%'",[13,22,23],{},"よくある一覧系のレイアウトは基本的に列と高さを揃えた規則的な物が多い中、ピンタレストは高さが変則であり縦方向に詰めるレイアウトになっています。",[13,25,26],{},"ごちゃごちゃとした感じですが、コンテンツがいっぱいあって無駄がないスタイルが好きです。私が関わったあるプロジェクトでこのデザインをやろうとしましたがそこそこ難しかったです。バックから情報を取ってくる仕様だったため、動的に要素を追加してくことを前提として実装の解説をしていきます。コード自体の説明は「実装方法」から行います。",[13,28,29,30,37],{},"また完成したデモは",[31,32,36],"a",{"href":33,"rel":34},"https:\u002F\u002Fapps.jun-app.com\u002Fpinterestlike\u002F",[35],"nofollow","こちら","にあります。",[39,40,41],"h2",{"id":41},"構造",[13,43,44],{},"構造は以下の通りとします。",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"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","",[53,54,55,99,120,154,164,183,211,220,227],"code",{"__ignoreMap":51},[56,57,60,64,68,72,75,78,82,84,87,89,91,94,96],"span",{"class":58,"line":59},"line",1,[56,61,63],{"class":62},"sAklC","\u003C",[56,65,67],{"class":66},"s-wAU","div",[56,69,71],{"class":70},"sJ14y"," class",[56,73,74],{"class":62},"=",[56,76,77],{"class":62},"\"",[56,79,81],{"class":80},"sfyAc","p-cards-render",[56,83,77],{"class":62},[56,85,86],{"class":70}," id",[56,88,74],{"class":62},[56,90,77],{"class":62},[56,92,93],{"class":80},"card-container",[56,95,77],{"class":62},[56,97,98],{"class":62},">\n",[56,100,102,105,107,109,111,113,116,118],{"class":58,"line":101},2,[56,103,104],{"class":62},"    \u003C",[56,106,67],{"class":66},[56,108,71],{"class":70},[56,110,74],{"class":62},[56,112,77],{"class":62},[56,114,115],{"class":80},"c-card-container u-animate",[56,117,77],{"class":62},[56,119,98],{"class":62},[56,121,123,126,129,132,134,136,139,141,143,145,147,150,152],{"class":58,"line":122},3,[56,124,125],{"class":62},"        \u003C",[56,127,128],{"class":66},"img",[56,130,131],{"class":70}," src",[56,133,74],{"class":62},[56,135,77],{"class":62},[56,137,138],{"class":80},".\u002Fred.png",[56,140,77],{"class":62},[56,142,71],{"class":70},[56,144,74],{"class":62},[56,146,77],{"class":62},[56,148,149],{"class":80},"c-card-img",[56,151,77],{"class":62},[56,153,98],{"class":62},[56,155,157,160,162],{"class":58,"line":156},4,[56,158,159],{"class":62},"    \u003C\u002F",[56,161,67],{"class":66},[56,163,98],{"class":62},[56,165,167,169,171,173,175,177,179,181],{"class":58,"line":166},5,[56,168,104],{"class":62},[56,170,67],{"class":66},[56,172,71],{"class":70},[56,174,74],{"class":62},[56,176,77],{"class":62},[56,178,115],{"class":80},[56,180,77],{"class":62},[56,182,98],{"class":62},[56,184,185,187,189,191,193,195,197,199,201,203,205,207,209],{"class":58,"line":4},[56,186,125],{"class":62},[56,188,128],{"class":66},[56,190,131],{"class":70},[56,192,74],{"class":62},[56,194,77],{"class":62},[56,196,138],{"class":80},[56,198,77],{"class":62},[56,200,71],{"class":70},[56,202,74],{"class":62},[56,204,77],{"class":62},[56,206,149],{"class":80},[56,208,77],{"class":62},[56,210,98],{"class":62},[56,212,214,216,218],{"class":58,"line":213},7,[56,215,159],{"class":62},[56,217,67],{"class":66},[56,219,98],{"class":62},[56,221,223],{"class":58,"line":222},8,[56,224,226],{"class":225},"sC9rS","    \u003C!-- c-card-containerが基本コンポーネント -->\n",[56,228,230,233,235],{"class":58,"line":229},9,[56,231,232],{"class":62},"\u003C\u002F",[56,234,67],{"class":66},[56,236,98],{"class":62},[13,238,239,241,242,245,246,249,250,253],{},[53,240,93],{},"はカード全体の列を定義するコンテナです。",[53,243,244],{},"c-card-container","は１カードのコンテナーで他のカードとの隙間やレイアウトの定義をしています。そしてカードのコンテナには",[53,247,248],{},"\u003Cimg>","がラップされ、",[53,251,252],{},"width:100%; height:100%;","がかかっています。今回表示する画像は一面一色に塗り潰された画像です。（background-colorでもよかったのですが）",[13,255,256],{},"最終的なcssは以下の通りです。",[46,258,262],{"className":259,"code":260,"language":261,"meta":51,"style":51},"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",[53,263,264,273,289,300,313,318,324,334,346,358,371,376,381,392,405,419,434,447,452,457,466,480,493,506,518,523,528,542,554,565,578,590,609,614,619,624,637,649,673,685,698,709,721,737,742,760,771,783,796],{"__ignoreMap":51},[56,265,266,270],{"class":58,"line":59},[56,267,269],{"class":268},"s5Dmg","*",[56,271,272],{"class":62},"{\n",[56,274,275,279,282,286],{"class":58,"line":101},[56,276,278],{"class":277},"s6YsC","    margin",[56,280,281],{"class":62},":",[56,283,285],{"class":284},"sx098"," 0",[56,287,288],{"class":62},";\n",[56,290,291,294,296,298],{"class":58,"line":122},[56,292,293],{"class":277},"    padding",[56,295,281],{"class":62},[56,297,285],{"class":284},[56,299,288],{"class":62},[56,301,302,305,307,311],{"class":58,"line":156},[56,303,304],{"class":277},"    box-sizing",[56,306,281],{"class":62},[56,308,310],{"class":309},"s0W1g"," border-box",[56,312,288],{"class":62},[56,314,315],{"class":58,"line":166},[56,316,317],{"class":62},"}\n",[56,319,320],{"class":58,"line":4},[56,321,323],{"emptyLinePlaceholder":322},true,"\n",[56,325,326,329,332],{"class":58,"line":213},[56,327,328],{"class":62},"#",[56,330,331],{"class":284},"card-add",[56,333,272],{"class":62},[56,335,336,339,341,344],{"class":58,"line":222},[56,337,338],{"class":277},"    position",[56,340,281],{"class":62},[56,342,343],{"class":309}," fixed",[56,345,288],{"class":62},[56,347,348,351,353,356],{"class":58,"line":229},[56,349,350],{"class":277},"    left",[56,352,281],{"class":62},[56,354,355],{"class":284}," 20px",[56,357,288],{"class":62},[56,359,361,364,366,369],{"class":58,"line":360},10,[56,362,363],{"class":277},"    top",[56,365,281],{"class":62},[56,367,368],{"class":284}," 50%",[56,370,288],{"class":62},[56,372,374],{"class":58,"line":373},11,[56,375,317],{"class":62},[56,377,379],{"class":58,"line":378},12,[56,380,323],{"emptyLinePlaceholder":322},[56,382,384,387,390],{"class":58,"line":383},13,[56,385,386],{"class":62},".",[56,388,389],{"class":268},"p-main-container",[56,391,272],{"class":62},[56,393,395,398,400,403],{"class":58,"line":394},14,[56,396,397],{"class":277},"    max-width",[56,399,281],{"class":62},[56,401,402],{"class":284}," 660px",[56,404,288],{"class":62},[56,406,408,410,412,414,417],{"class":58,"line":407},15,[56,409,278],{"class":277},[56,411,281],{"class":62},[56,413,285],{"class":284},[56,415,416],{"class":309}," auto",[56,418,288],{"class":62},[56,420,422,424,426,429,432],{"class":58,"line":421},16,[56,423,293],{"class":277},[56,425,281],{"class":62},[56,427,428],{"class":284}," 30px",[56,430,431],{"class":284}," 0px",[56,433,288],{"class":62},[56,435,437,440,442,445],{"class":58,"line":436},17,[56,438,439],{"class":277},"    min-height",[56,441,281],{"class":62},[56,443,444],{"class":284}," 100vh",[56,446,288],{"class":62},[56,448,450],{"class":58,"line":449},18,[56,451,317],{"class":62},[56,453,455],{"class":58,"line":454},19,[56,456,323],{"emptyLinePlaceholder":322},[56,458,460,462,464],{"class":58,"line":459},20,[56,461,386],{"class":62},[56,463,81],{"class":268},[56,465,272],{"class":62},[56,467,469,471,473,475,478],{"class":58,"line":468},21,[56,470,278],{"class":277},[56,472,281],{"class":62},[56,474,285],{"class":284},[56,476,477],{"class":284}," -5px",[56,479,288],{"class":62},[56,481,483,486,488,491],{"class":58,"line":482},22,[56,484,485],{"class":277},"    display",[56,487,281],{"class":62},[56,489,490],{"class":309}," flex",[56,492,288],{"class":62},[56,494,496,499,501,504],{"class":58,"line":495},23,[56,497,498],{"class":277},"    flex-wrap",[56,500,281],{"class":62},[56,502,503],{"class":309}," wrap",[56,505,288],{"class":62},[56,507,509,511,513,516],{"class":58,"line":508},24,[56,510,338],{"class":277},[56,512,281],{"class":62},[56,514,515],{"class":309}," relative",[56,517,288],{"class":62},[56,519,521],{"class":58,"line":520},25,[56,522,317],{"class":62},[56,524,526],{"class":58,"line":525},26,[56,527,323],{"emptyLinePlaceholder":322},[56,529,531,533,535,538,540],{"class":58,"line":530},27,[56,532,386],{"class":62},[56,534,81],{"class":268},[56,536,537],{"class":62}," .",[56,539,244],{"class":268},[56,541,272],{"class":62},[56,543,545,547,549,552],{"class":58,"line":544},28,[56,546,338],{"class":277},[56,548,281],{"class":62},[56,550,551],{"class":309}," absolute",[56,553,288],{"class":62},[56,555,557,559,561,563],{"class":58,"line":556},29,[56,558,363],{"class":277},[56,560,281],{"class":62},[56,562,431],{"class":284},[56,564,288],{"class":62},[56,566,568,571,573,576],{"class":58,"line":567},30,[56,569,570],{"class":277},"    width",[56,572,281],{"class":62},[56,574,575],{"class":284}," 33.3%",[56,577,288],{"class":62},[56,579,581,583,585,588],{"class":58,"line":580},31,[56,582,485],{"class":277},[56,584,281],{"class":62},[56,586,587],{"class":309}," block",[56,589,288],{"class":62},[56,591,593,595,597,599,602,605,607],{"class":58,"line":592},32,[56,594,293],{"class":277},[56,596,281],{"class":62},[56,598,285],{"class":284},[56,600,601],{"class":284}," 5px",[56,603,604],{"class":284}," 10px",[56,606,601],{"class":284},[56,608,288],{"class":62},[56,610,612],{"class":58,"line":611},33,[56,613,317],{"class":62},[56,615,617],{"class":58,"line":616},34,[56,618,323],{"emptyLinePlaceholder":322},[56,620,622],{"class":58,"line":621},35,[56,623,323],{"emptyLinePlaceholder":322},[56,625,627,629,631,633,635],{"class":58,"line":626},36,[56,628,386],{"class":62},[56,630,244],{"class":268},[56,632,537],{"class":62},[56,634,149],{"class":268},[56,636,272],{"class":62},[56,638,640,642,644,647],{"class":58,"line":639},37,[56,641,570],{"class":277},[56,643,281],{"class":62},[56,645,646],{"class":284}," 100%",[56,648,288],{"class":62},[56,650,652,655,657,659,662,665,668,671],{"class":58,"line":651},38,[56,653,654],{"class":277},"    box-shadow",[56,656,281],{"class":62},[56,658,431],{"class":284},[56,660,661],{"class":284}," 2px",[56,663,664],{"class":284}," 4px",[56,666,667],{"class":62}," #",[56,669,670],{"class":309},"ccc",[56,672,288],{"class":62},[56,674,676,679,681,683],{"class":58,"line":675},39,[56,677,678],{"class":277},"    border-radius",[56,680,281],{"class":62},[56,682,428],{"class":284},[56,684,288],{"class":62},[56,686,688,691,693,696],{"class":58,"line":687},40,[56,689,690],{"class":277},"    height",[56,692,281],{"class":62},[56,694,695],{"class":284}," 0%",[56,697,288],{"class":62},[56,699,701,703,705,707],{"class":58,"line":700},41,[56,702,485],{"class":277},[56,704,281],{"class":62},[56,706,587],{"class":309},[56,708,288],{"class":62},[56,710,712,715,717,719],{"class":58,"line":711},42,[56,713,714],{"class":277},"    opacity",[56,716,281],{"class":62},[56,718,285],{"class":284},[56,720,288],{"class":62},[56,722,724,727,729,732,735],{"class":58,"line":723},43,[56,725,726],{"class":277},"    transition",[56,728,281],{"class":62},[56,730,731],{"class":309}," all ",[56,733,734],{"class":284},"0.4s",[56,736,288],{"class":62},[56,738,740],{"class":58,"line":739},44,[56,741,317],{"class":62},[56,743,745,747,749,751,754,756,758],{"class":58,"line":744},45,[56,746,386],{"class":62},[56,748,244],{"class":268},[56,750,386],{"class":62},[56,752,753],{"class":268},"u-animate",[56,755,537],{"class":62},[56,757,149],{"class":268},[56,759,272],{"class":62},[56,761,763,765,767,769],{"class":58,"line":762},46,[56,764,690],{"class":277},[56,766,281],{"class":62},[56,768,646],{"class":284},[56,770,288],{"class":62},[56,772,774,776,778,781],{"class":58,"line":773},47,[56,775,714],{"class":277},[56,777,281],{"class":62},[56,779,780],{"class":284}," 1",[56,782,288],{"class":62},[56,784,786,788,790,792,794],{"class":58,"line":785},48,[56,787,726],{"class":277},[56,789,281],{"class":62},[56,791,731],{"class":309},[56,793,734],{"class":284},[56,795,288],{"class":62},[56,797,799],{"class":58,"line":798},49,[56,800,317],{"class":62},[39,802,804],{"id":803},"表示数が不明な場合cssだけでは不可能だった","表示数が不明な場合CSSだけでは不可能だった",[806,807,809],"h3",{"id":808},"flexでいけんじゃね","flexでいけんじゃね...？!",[13,811,812],{},"最初はそれぞれの要素にを縦方向に詰められればいいだけだろと思いました。",[13,814,815,816,819,820,823],{},"そのためカードコンテナーを ",[53,817,818],{},"display:inline-block;"," にして ",[53,821,822],{},"vertical-align:top;","を指定しましたが下図の様になっていしまいます。",[17,825],{":src":826,":width":827,":center":828},"'pinterest-like-style\u002Fdisplay-inline.png'","'300px'","true",[13,830,831,832,834,835,838,839,842,843,846],{},"カードコンテナーを ",[53,833,818],{},"と",[53,836,837],{},"algin-self:flex-start;","を指定しても同様の結果となります。",[53,840,841],{},"flex","や",[53,844,845],{},"inline-block","の仕様上仕方ないです。",[806,848,850],{"id":849},"display-gridならいけるが","display gridならいけるが...",[13,852,853,854,857],{},"flexは縦方向の制御が難しく、ピンタレストの様なスタイルをcssで実現するためには",[53,855,856],{},"display:grid;","というグリットレイアウトを指定する必要があります。",[13,859,860],{},"今回はGridの説明は省きます。グリットレイアウトは各要素の縦方向の位置を定義できるので、柔軟なレイアウトを実現できます。",[13,862,863],{},"しかし、グリットレイアウトは列数、行数、各要素の占有列・行を指定する必要があります。そのため動的に要素を追加する場合はJavascriptで各要素の位置スタイルを調整する必要があります。",[39,865,866],{"id":866},"実装方法",[806,868,869],{"id":869},"概要",[13,871,872],{},"それでは実装の概要について解説します。CSS（インラインスタイル）をカード要素に指定します。いろいろ方法はありますが、ピンタレスト公式でも以下の様なスタイルが要素に当てられています。",[46,874,876],{"className":48,"code":875,"language":50,"meta":51,"style":51},"\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",[53,877,878,906,952,996,1040,1084,1128,1172],{"__ignoreMap":51},[56,879,880,882,884,886,888,890,892,894,896,898,900,902,904],{"class":58,"line":59},[56,881,63],{"class":62},[56,883,67],{"class":66},[56,885,71],{"class":70},[56,887,74],{"class":62},[56,889,77],{"class":62},[56,891,81],{"class":80},[56,893,77],{"class":62},[56,895,86],{"class":70},[56,897,74],{"class":62},[56,899,77],{"class":62},[56,901,93],{"class":80},[56,903,77],{"class":62},[56,905,98],{"class":62},[56,907,908,910,912,914,916,918,920,922,924,926,928,931,933,936,938,940,943,945,948,950],{"class":58,"line":101},[56,909,104],{"class":62},[56,911,67],{"class":66},[56,913,71],{"class":70},[56,915,74],{"class":62},[56,917,77],{"class":62},[56,919,115],{"class":80},[56,921,77],{"class":62},[56,923,86],{"class":70},[56,925,74],{"class":62},[56,927,77],{"class":62},[56,929,930],{"class":80},"06p17111s5",[56,932,77],{"class":62},[56,934,935],{"class":70}," style",[56,937,74],{"class":62},[56,939,77],{"class":62},[56,941,942],{"class":80},"height:309px; transform:translate(0%,0px);",[56,944,77],{"class":62},[56,946,947],{"class":62},">\u003C\u002F",[56,949,67],{"class":66},[56,951,98],{"class":62},[56,953,954,956,958,960,962,964,966,968,970,972,974,977,979,981,983,985,988,990,992,994],{"class":58,"line":122},[56,955,104],{"class":62},[56,957,67],{"class":66},[56,959,71],{"class":70},[56,961,74],{"class":62},[56,963,77],{"class":62},[56,965,115],{"class":80},[56,967,77],{"class":62},[56,969,86],{"class":70},[56,971,74],{"class":62},[56,973,77],{"class":62},[56,975,976],{"class":80},"l1dq533ms9g",[56,978,77],{"class":62},[56,980,935],{"class":70},[56,982,74],{"class":62},[56,984,77],{"class":62},[56,986,987],{"class":80},"height:246px; transform:translate(100%,0px);",[56,989,77],{"class":62},[56,991,947],{"class":62},[56,993,67],{"class":66},[56,995,98],{"class":62},[56,997,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1021,1023,1025,1027,1029,1032,1034,1036,1038],{"class":58,"line":156},[56,999,104],{"class":62},[56,1001,67],{"class":66},[56,1003,71],{"class":70},[56,1005,74],{"class":62},[56,1007,77],{"class":62},[56,1009,115],{"class":80},[56,1011,77],{"class":62},[56,1013,86],{"class":70},[56,1015,74],{"class":62},[56,1017,77],{"class":62},[56,1019,1020],{"class":80},"k6n2ebd918g",[56,1022,77],{"class":62},[56,1024,935],{"class":70},[56,1026,74],{"class":62},[56,1028,77],{"class":62},[56,1030,1031],{"class":80},"height:306px; transform:translate(200%,0px);",[56,1033,77],{"class":62},[56,1035,947],{"class":62},[56,1037,67],{"class":66},[56,1039,98],{"class":62},[56,1041,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1065,1067,1069,1071,1073,1076,1078,1080,1082],{"class":58,"line":166},[56,1043,104],{"class":62},[56,1045,67],{"class":66},[56,1047,71],{"class":70},[56,1049,74],{"class":62},[56,1051,77],{"class":62},[56,1053,115],{"class":80},[56,1055,77],{"class":62},[56,1057,86],{"class":70},[56,1059,74],{"class":62},[56,1061,77],{"class":62},[56,1063,1064],{"class":80},"2j3vvgc373g",[56,1066,77],{"class":62},[56,1068,935],{"class":70},[56,1070,74],{"class":62},[56,1072,77],{"class":62},[56,1074,1075],{"class":80},"height:161px; transform:translate(0%,309px);",[56,1077,77],{"class":62},[56,1079,947],{"class":62},[56,1081,67],{"class":66},[56,1083,98],{"class":62},[56,1085,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106,1109,1111,1113,1115,1117,1120,1122,1124,1126],{"class":58,"line":4},[56,1087,104],{"class":62},[56,1089,67],{"class":66},[56,1091,71],{"class":70},[56,1093,74],{"class":62},[56,1095,77],{"class":62},[56,1097,115],{"class":80},[56,1099,77],{"class":62},[56,1101,86],{"class":70},[56,1103,74],{"class":62},[56,1105,77],{"class":62},[56,1107,1108],{"class":80},"tagrso5m40o",[56,1110,77],{"class":62},[56,1112,935],{"class":70},[56,1114,74],{"class":62},[56,1116,77],{"class":62},[56,1118,1119],{"class":80},"height:255px; transform:translate(100%,246px);",[56,1121,77],{"class":62},[56,1123,947],{"class":62},[56,1125,67],{"class":66},[56,1127,98],{"class":62},[56,1129,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1153,1155,1157,1159,1161,1164,1166,1168,1170],{"class":58,"line":213},[56,1131,104],{"class":62},[56,1133,67],{"class":66},[56,1135,71],{"class":70},[56,1137,74],{"class":62},[56,1139,77],{"class":62},[56,1141,115],{"class":80},[56,1143,77],{"class":62},[56,1145,86],{"class":70},[56,1147,74],{"class":62},[56,1149,77],{"class":62},[56,1151,1152],{"class":80},"89opa7i1eng",[56,1154,77],{"class":62},[56,1156,935],{"class":70},[56,1158,74],{"class":62},[56,1160,77],{"class":62},[56,1162,1163],{"class":80},"height:288px; transform:translate(200%,306px);",[56,1165,77],{"class":62},[56,1167,947],{"class":62},[56,1169,67],{"class":66},[56,1171,98],{"class":62},[56,1173,1174,1176,1178],{"class":58,"line":222},[56,1175,232],{"class":62},[56,1177,67],{"class":66},[56,1179,98],{"class":62},[13,1181,1182,1183,1186],{},"それぞのコンテナーに対して",[53,1184,1185],{},"height:246px; transform:translate(200%,306px);","というものあります。まず固有の高さを指定し、そしてtransformを使用して位置を変更しています。",[13,1188,1189],{},"要素が追加される度に始点（left:0;,top:0;）から移動させ、位置を指定してあげます。2021年7月時点のCSSではこの様にしないと、数不明・ここの高さが不明な要素に対してピンタレストのようなスタイルを適用することができません。",[13,1191,1192],{},"では次はそれを実装するjavascriptを書いていきます。",[806,1194,1196],{"id":1195},"htmlの前準備","HTMLの前準備",[13,1198,1199],{},"HTMLは以下の様にしておきます。",[46,1201,1203],{"className":48,"code":1202,"language":50,"meta":51,"style":51},"\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",[53,1204,1205,1218,1226,1235,1260,1278,1311,1319,1328,1346,1375,1379,1388,1417,1426,1434,1470],{"__ignoreMap":51},[56,1206,1207,1210,1213,1216],{"class":58,"line":59},[56,1208,1209],{"class":62},"\u003C!",[56,1211,1212],{"class":66},"DOCTYPE",[56,1214,1215],{"class":70}," html",[56,1217,98],{"class":62},[56,1219,1220,1222,1224],{"class":58,"line":101},[56,1221,63],{"class":62},[56,1223,50],{"class":66},[56,1225,98],{"class":62},[56,1227,1228,1230,1233],{"class":58,"line":122},[56,1229,104],{"class":62},[56,1231,1232],{"class":66},"head",[56,1234,98],{"class":62},[56,1236,1237,1239,1242,1245,1247,1249,1252,1254,1257],{"class":58,"line":156},[56,1238,125],{"class":62},[56,1240,1241],{"class":66},"meta",[56,1243,1244],{"class":70}," charset",[56,1246,74],{"class":62},[56,1248,77],{"class":62},[56,1250,1251],{"class":80},"utf-8",[56,1253,77],{"class":62},[56,1255,1256],{"class":62},">",[56,1258,1259],{"class":309}," \n",[56,1261,1262,1264,1267,1269,1272,1274,1276],{"class":58,"line":166},[56,1263,125],{"class":62},[56,1265,1266],{"class":66},"title",[56,1268,1256],{"class":62},[56,1270,1271],{"class":309},"Pinterest like Style",[56,1273,232],{"class":62},[56,1275,1266],{"class":66},[56,1277,98],{"class":62},[56,1279,1280,1282,1285,1288,1290,1292,1295,1297,1300,1302,1304,1307,1309],{"class":58,"line":4},[56,1281,125],{"class":62},[56,1283,1284],{"class":66},"link",[56,1286,1287],{"class":70}," rel",[56,1289,74],{"class":62},[56,1291,77],{"class":62},[56,1293,1294],{"class":80},"stylesheet",[56,1296,77],{"class":62},[56,1298,1299],{"class":70}," href",[56,1301,74],{"class":62},[56,1303,77],{"class":62},[56,1305,1306],{"class":80},".\u002Fstyle.css",[56,1308,77],{"class":62},[56,1310,98],{"class":62},[56,1312,1313,1315,1317],{"class":58,"line":213},[56,1314,159],{"class":62},[56,1316,1232],{"class":66},[56,1318,98],{"class":62},[56,1320,1321,1323,1326],{"class":58,"line":222},[56,1322,104],{"class":62},[56,1324,1325],{"class":66},"body",[56,1327,98],{"class":62},[56,1329,1330,1332,1334,1336,1338,1340,1342,1344],{"class":58,"line":229},[56,1331,125],{"class":62},[56,1333,67],{"class":66},[56,1335,71],{"class":70},[56,1337,74],{"class":62},[56,1339,77],{"class":62},[56,1341,389],{"class":80},[56,1343,77],{"class":62},[56,1345,98],{"class":62},[56,1347,1348,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373],{"class":58,"line":360},[56,1349,1350],{"class":62},"            \u003C",[56,1352,67],{"class":66},[56,1354,71],{"class":70},[56,1356,74],{"class":62},[56,1358,77],{"class":62},[56,1360,81],{"class":80},[56,1362,77],{"class":62},[56,1364,86],{"class":70},[56,1366,74],{"class":62},[56,1368,77],{"class":62},[56,1370,93],{"class":80},[56,1372,77],{"class":62},[56,1374,98],{"class":62},[56,1376,1377],{"class":58,"line":373},[56,1378,323],{"emptyLinePlaceholder":322},[56,1380,1381,1384,1386],{"class":58,"line":378},[56,1382,1383],{"class":62},"            \u003C\u002F",[56,1385,67],{"class":66},[56,1387,98],{"class":62},[56,1389,1390,1392,1395,1397,1399,1402,1404,1406,1408,1411,1413,1415],{"class":58,"line":383},[56,1391,1350],{"class":62},[56,1393,1394],{"class":66},"button",[56,1396,86],{"class":70},[56,1398,74],{"class":62},[56,1400,1401],{"class":62},"'",[56,1403,331],{"class":80},[56,1405,1401],{"class":62},[56,1407,1256],{"class":62},[56,1409,1410],{"class":309},"ADD!",[56,1412,232],{"class":62},[56,1414,1394],{"class":66},[56,1416,98],{"class":62},[56,1418,1419,1422,1424],{"class":58,"line":394},[56,1420,1421],{"class":62},"        \u003C\u002F",[56,1423,67],{"class":66},[56,1425,98],{"class":62},[56,1427,1428,1430,1432],{"class":58,"line":407},[56,1429,159],{"class":62},[56,1431,1325],{"class":66},[56,1433,98],{"class":62},[56,1435,1436,1438,1441,1443,1445,1447,1450,1452,1455,1457,1459,1462,1464,1466,1468],{"class":58,"line":421},[56,1437,104],{"class":62},[56,1439,1440],{"class":66},"script",[56,1442,131],{"class":70},[56,1444,74],{"class":62},[56,1446,77],{"class":62},[56,1448,1449],{"class":80},".\u002Fcard.js",[56,1451,77],{"class":62},[56,1453,1454],{"class":70}," type",[56,1456,74],{"class":62},[56,1458,77],{"class":62},[56,1460,1461],{"class":80},"text\u002Fjavascript",[56,1463,77],{"class":62},[56,1465,947],{"class":62},[56,1467,1440],{"class":66},[56,1469,98],{"class":62},[56,1471,1472,1474,1476],{"class":58,"line":436},[56,1473,232],{"class":62},[56,1475,50],{"class":66},[56,1477,98],{"class":62},[13,1479,1480,1482],{},[53,1481,93],{},"にカードが挿入されていきます。ADD！というボタンを押すことで今回はカードが追加されていくことにします。",[806,1484,1485],{"id":1485},"javascriptはこの通り",[13,1487,1488,1489,1492],{},"同じディレクトリに",[53,1490,1491],{},"card.js","をおいておきます。いきなりですが、全て見せます。完成形は以下の通りです。",[46,1494,1498],{"className":1495,"code":1496,"language":1497,"meta":51,"style":51},"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",[53,1499,1500,1505,1520,1524,1529,1541,1549,1556,1569,1579,1584,1588,1593,1607,1611,1616,1649,1653,1658,1685,1689,1694,1708,1722,1726,1731,1801,1815,1819,1824,1851,1865,1873,1877,1882,1898,1916,1935,1953,1957,1961,1966,1981,1998,2002,2007,2036,2067,2071,2076,2122,2148,2164,2169,2175,2181,2209,2258,2274,2279,2285,2331,2360,2365,2371,2426,2432,2438,2456,2461,2467,2487,2512,2517,2522,2528,2551,2569,2574,2579,2585,2591,2612,2618,2667,2686,2691,2697,2725,2730,2736,2753,2811,2854,2898,2903,2909,2968,2973,2979,2993,3019,3032],{"__ignoreMap":51},[56,1501,1502],{"class":58,"line":59},[56,1503,1504],{"class":225},"\u002F\u002F カード情報を格納\n",[56,1506,1507,1510,1513,1515,1518],{"class":58,"line":101},[56,1508,1509],{"class":70},"let",[56,1511,1512],{"class":309}," elements ",[56,1514,74],{"class":62},[56,1516,1517],{"class":309}," []",[56,1519,288],{"class":62},[56,1521,1522],{"class":58,"line":122},[56,1523,323],{"emptyLinePlaceholder":322},[56,1525,1526],{"class":58,"line":156},[56,1527,1528],{"class":225},"\u002F\u002F カードの初期値\n",[56,1530,1531,1533,1536,1538],{"class":58,"line":166},[56,1532,1509],{"class":70},[56,1534,1535],{"class":309}," elementInit ",[56,1537,74],{"class":62},[56,1539,1540],{"class":62}," {\n",[56,1542,1543,1546],{"class":58,"line":4},[56,1544,1545],{"class":66},"    id",[56,1547,1548],{"class":62},":undefined,\n",[56,1550,1551,1554],{"class":58,"line":213},[56,1552,1553],{"class":66},"    color",[56,1555,1548],{"class":62},[56,1557,1558,1561,1563,1566],{"class":58,"line":222},[56,1559,1560],{"class":66},"    selfHeight",[56,1562,281],{"class":62},[56,1564,1565],{"class":284},"0",[56,1567,1568],{"class":62},",\n",[56,1570,1571,1574,1576],{"class":58,"line":229},[56,1572,1573],{"class":66},"    y",[56,1575,281],{"class":62},[56,1577,1578],{"class":284},"0\n",[56,1580,1581],{"class":58,"line":360},[56,1582,1583],{"class":62},"};\n",[56,1585,1586],{"class":58,"line":373},[56,1587,323],{"emptyLinePlaceholder":322},[56,1589,1590],{"class":58,"line":378},[56,1591,1592],{"class":225},"\u002F\u002F 列数\n",[56,1594,1595,1597,1600,1602,1605],{"class":58,"line":383},[56,1596,1509],{"class":70},[56,1598,1599],{"class":309}," row ",[56,1601,74],{"class":62},[56,1603,1604],{"class":284}," 3",[56,1606,288],{"class":62},[56,1608,1609],{"class":58,"line":394},[56,1610,323],{"emptyLinePlaceholder":322},[56,1612,1613],{"class":58,"line":407},[56,1614,1615],{"class":225},"\u002F\u002F 挿入先コンテナ\n",[56,1617,1618,1621,1624,1626,1629,1631,1635,1638,1640,1642,1644,1647],{"class":58,"line":421},[56,1619,1620],{"class":70},"const",[56,1622,1623],{"class":309}," cardsContainer ",[56,1625,74],{"class":62},[56,1627,1628],{"class":309}," document",[56,1630,386],{"class":62},[56,1632,1634],{"class":1633},"sdLwU","getElementById",[56,1636,1637],{"class":309},"(",[56,1639,1401],{"class":62},[56,1641,93],{"class":80},[56,1643,1401],{"class":62},[56,1645,1646],{"class":309},")",[56,1648,288],{"class":62},[56,1650,1651],{"class":58,"line":436},[56,1652,323],{"emptyLinePlaceholder":322},[56,1654,1655],{"class":58,"line":449},[56,1656,1657],{"class":225},"\u002F\u002F 追加ボタン\n",[56,1659,1660,1662,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683],{"class":58,"line":454},[56,1661,1620],{"class":70},[56,1663,1664],{"class":309}," cardsAddBtn ",[56,1666,74],{"class":62},[56,1668,1628],{"class":309},[56,1670,386],{"class":62},[56,1672,1634],{"class":1633},[56,1674,1637],{"class":309},[56,1676,1401],{"class":62},[56,1678,331],{"class":80},[56,1680,1401],{"class":62},[56,1682,1646],{"class":309},[56,1684,288],{"class":62},[56,1686,1687],{"class":58,"line":459},[56,1688,323],{"emptyLinePlaceholder":322},[56,1690,1691],{"class":58,"line":468},[56,1692,1693],{"class":225},"\u002F\u002F　カード高さの最大値と最小値\n",[56,1695,1696,1698,1701,1703,1706],{"class":58,"line":482},[56,1697,1620],{"class":70},[56,1699,1700],{"class":309}," heightMax ",[56,1702,74],{"class":62},[56,1704,1705],{"class":284}," 400",[56,1707,288],{"class":62},[56,1709,1710,1712,1715,1717,1720],{"class":58,"line":495},[56,1711,1620],{"class":70},[56,1713,1714],{"class":309}," heightMin ",[56,1716,74],{"class":62},[56,1718,1719],{"class":284}," 100",[56,1721,288],{"class":62},[56,1723,1724],{"class":58,"line":508},[56,1725,323],{"emptyLinePlaceholder":322},[56,1727,1728],{"class":58,"line":520},[56,1729,1730],{"class":225},"\u002F\u002F 色のパターンとカード間の隙間（px）\n",[56,1732,1733,1735,1738,1740,1743,1745,1748,1750,1753,1755,1758,1760,1762,1764,1767,1769,1771,1773,1776,1778,1780,1782,1785,1787,1789,1791,1794,1796,1799],{"class":58,"line":525},[56,1734,1620],{"class":70},[56,1736,1737],{"class":309}," colors ",[56,1739,74],{"class":62},[56,1741,1742],{"class":309}," [",[56,1744,1401],{"class":62},[56,1746,1747],{"class":80},"red",[56,1749,1401],{"class":62},[56,1751,1752],{"class":62},",",[56,1754,1401],{"class":62},[56,1756,1757],{"class":80},"yellow",[56,1759,1401],{"class":62},[56,1761,1752],{"class":62},[56,1763,1401],{"class":62},[56,1765,1766],{"class":80},"green",[56,1768,1401],{"class":62},[56,1770,1752],{"class":62},[56,1772,1401],{"class":62},[56,1774,1775],{"class":80},"orange",[56,1777,1401],{"class":62},[56,1779,1752],{"class":62},[56,1781,1401],{"class":62},[56,1783,1784],{"class":80},"blue",[56,1786,1401],{"class":62},[56,1788,1752],{"class":62},[56,1790,1401],{"class":62},[56,1792,1793],{"class":80},"purple",[56,1795,1401],{"class":62},[56,1797,1798],{"class":309},"]",[56,1800,288],{"class":62},[56,1802,1803,1805,1808,1810,1813],{"class":58,"line":530},[56,1804,1620],{"class":70},[56,1806,1807],{"class":309}," cardGap ",[56,1809,74],{"class":62},[56,1811,1812],{"class":284}," 10",[56,1814,288],{"class":62},[56,1816,1817],{"class":58,"line":544},[56,1818,323],{"emptyLinePlaceholder":322},[56,1820,1821],{"class":58,"line":556},[56,1822,1823],{"class":225},"\u002F\u002F 追加ボタンにイベントリスナーを付与\n",[56,1825,1826,1829,1831,1834,1836,1838,1841,1843,1846,1849],{"class":58,"line":567},[56,1827,1828],{"class":309},"cardsAddBtn",[56,1830,386],{"class":62},[56,1832,1833],{"class":1633},"addEventListener",[56,1835,1637],{"class":309},[56,1837,1401],{"class":62},[56,1839,1840],{"class":80},"click",[56,1842,1401],{"class":62},[56,1844,1845],{"class":62},",()",[56,1847,1848],{"class":70},"=>",[56,1850,272],{"class":62},[56,1852,1853,1857,1860,1863],{"class":58,"line":580},[56,1854,1856],{"class":1855},"s6cf3","    return",[56,1858,1859],{"class":1633}," onClickAdd",[56,1861,1862],{"class":66},"()",[56,1864,288],{"class":62},[56,1866,1867,1870],{"class":58,"line":592},[56,1868,1869],{"class":62},"}",[56,1871,1872],{"class":309},")\n",[56,1874,1875],{"class":58,"line":611},[56,1876,323],{"emptyLinePlaceholder":322},[56,1878,1879],{"class":58,"line":616},[56,1880,1881],{"class":225},"\u002F\u002F イベントリスナーの内容\n",[56,1883,1884,1886,1889,1891,1894,1896],{"class":58,"line":621},[56,1885,1509],{"class":70},[56,1887,1888],{"class":309}," onClickAdd ",[56,1890,74],{"class":62},[56,1892,1893],{"class":62}," ()",[56,1895,1848],{"class":70},[56,1897,272],{"class":62},[56,1899,1900,1903,1906,1909,1912,1914],{"class":58,"line":626},[56,1901,1902],{"class":70},"    let",[56,1904,1905],{"class":309}," card",[56,1907,1908],{"class":62}," =",[56,1910,1911],{"class":1633}," createCard",[56,1913,1862],{"class":66},[56,1915,288],{"class":62},[56,1917,1918,1921,1923,1926,1928,1931,1933],{"class":58,"line":639},[56,1919,1920],{"class":1633},"    insertCard",[56,1922,1637],{"class":66},[56,1924,1925],{"class":309},"card",[56,1927,386],{"class":62},[56,1929,1930],{"class":309},"dom",[56,1932,1646],{"class":66},[56,1934,288],{"class":62},[56,1936,1937,1940,1942,1944,1946,1949,1951],{"class":58,"line":651},[56,1938,1939],{"class":1633},"    scanAdd",[56,1941,1637],{"class":66},[56,1943,1925],{"class":309},[56,1945,386],{"class":62},[56,1947,1948],{"class":309},"id",[56,1950,1646],{"class":66},[56,1952,288],{"class":62},[56,1954,1955],{"class":58,"line":675},[56,1956,317],{"class":62},[56,1958,1959],{"class":58,"line":687},[56,1960,323],{"emptyLinePlaceholder":322},[56,1962,1963],{"class":58,"line":700},[56,1964,1965],{"class":225},"\u002F\u002F カードのDOMを新規作成\n",[56,1967,1968,1970,1973,1975,1977,1979],{"class":58,"line":711},[56,1969,1509],{"class":70},[56,1971,1972],{"class":309}," createCard ",[56,1974,74],{"class":62},[56,1976,1893],{"class":62},[56,1978,1848],{"class":70},[56,1980,272],{"class":62},[56,1982,1983,1985,1988,1990,1993,1996],{"class":58,"line":723},[56,1984,1902],{"class":70},[56,1986,1987],{"class":309}," info",[56,1989,1908],{"class":62},[56,1991,1992],{"class":62}," {...",[56,1994,1995],{"class":309},"elementInit",[56,1997,1583],{"class":62},[56,1999,2000],{"class":58,"line":739},[56,2001,323],{"emptyLinePlaceholder":322},[56,2003,2004],{"class":58,"line":744},[56,2005,2006],{"class":225},"    \u002F\u002F カードの要素をdivで作成\n",[56,2008,2009,2011,2014,2016,2018,2020,2023,2025,2027,2030,2032,2034],{"class":58,"line":762},[56,2010,1902],{"class":70},[56,2012,2013],{"class":309}," contain",[56,2015,1908],{"class":62},[56,2017,1628],{"class":309},[56,2019,386],{"class":62},[56,2021,2022],{"class":1633},"createElement",[56,2024,1637],{"class":66},[56,2026,77],{"class":62},[56,2028,2029],{"class":80},"DIV",[56,2031,77],{"class":62},[56,2033,1646],{"class":66},[56,2035,288],{"class":62},[56,2037,2038,2041,2043,2046,2048,2050,2053,2055,2057,2059,2061,2063,2065],{"class":58,"line":773},[56,2039,2040],{"class":309},"    contain",[56,2042,386],{"class":62},[56,2044,2045],{"class":1633},"setAttribute",[56,2047,1637],{"class":66},[56,2049,1401],{"class":62},[56,2051,2052],{"class":80},"class",[56,2054,1401],{"class":62},[56,2056,1752],{"class":62},[56,2058,1401],{"class":62},[56,2060,244],{"class":80},[56,2062,1401],{"class":62},[56,2064,1646],{"class":66},[56,2066,288],{"class":62},[56,2068,2069],{"class":58,"line":785},[56,2070,323],{"emptyLinePlaceholder":322},[56,2072,2073],{"class":58,"line":798},[56,2074,2075],{"class":225},"    \u002F\u002F IDをランダムに作成、記録\n",[56,2077,2079,2081,2084,2086,2089,2091,2094,2096,2098,2101,2103,2106,2108,2110,2113,2115,2118,2120],{"class":58,"line":2078},50,[56,2080,1902],{"class":70},[56,2082,2083],{"class":309}," idname",[56,2085,1908],{"class":62},[56,2087,2088],{"class":309}," Math",[56,2090,386],{"class":62},[56,2092,2093],{"class":1633},"random",[56,2095,1862],{"class":66},[56,2097,386],{"class":62},[56,2099,2100],{"class":1633},"toString",[56,2102,1637],{"class":66},[56,2104,2105],{"class":284},"32",[56,2107,1646],{"class":66},[56,2109,386],{"class":62},[56,2111,2112],{"class":1633},"substring",[56,2114,1637],{"class":66},[56,2116,2117],{"class":284},"2",[56,2119,1646],{"class":66},[56,2121,288],{"class":62},[56,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2144,2146],{"class":58,"line":2124},51,[56,2126,2040],{"class":309},[56,2128,386],{"class":62},[56,2130,2045],{"class":1633},[56,2132,1637],{"class":66},[56,2134,1401],{"class":62},[56,2136,1948],{"class":80},[56,2138,1401],{"class":62},[56,2140,1752],{"class":62},[56,2142,2143],{"class":309},"idname",[56,2145,1646],{"class":66},[56,2147,288],{"class":62},[56,2149,2151,2154,2156,2158,2160,2162],{"class":58,"line":2150},52,[56,2152,2153],{"class":309},"    info",[56,2155,386],{"class":62},[56,2157,1948],{"class":309},[56,2159,1908],{"class":62},[56,2161,2083],{"class":309},[56,2163,288],{"class":62},[56,2165,2167],{"class":58,"line":2166},53,[56,2168,323],{"emptyLinePlaceholder":322},[56,2170,2172],{"class":58,"line":2171},54,[56,2173,2174],{"class":225},"    \u002F\u002F カードに表示される画像（一色塗り潰し）を設定、記録\n",[56,2176,2178],{"class":58,"line":2177},55,[56,2179,2180],{"class":225},"    \u002F\u002F colorsの値と画像名が同じ。\n",[56,2182,2184,2186,2188,2190,2192,2194,2196,2198,2200,2203,2205,2207],{"class":58,"line":2183},56,[56,2185,1902],{"class":70},[56,2187,1905],{"class":309},[56,2189,1908],{"class":62},[56,2191,1628],{"class":309},[56,2193,386],{"class":62},[56,2195,2022],{"class":1633},[56,2197,1637],{"class":66},[56,2199,77],{"class":62},[56,2201,2202],{"class":80},"IMG",[56,2204,77],{"class":62},[56,2206,1646],{"class":66},[56,2208,288],{"class":62},[56,2210,2212,2214,2217,2219,2222,2225,2228,2230,2233,2235,2237,2239,2241,2244,2246,2248,2250,2253,2256],{"class":58,"line":2211},57,[56,2213,1902],{"class":70},[56,2215,2216],{"class":309}," color",[56,2218,1908],{"class":62},[56,2220,2221],{"class":309}," colors",[56,2223,2224],{"class":66},"[",[56,2226,2227],{"class":309},"Math",[56,2229,386],{"class":62},[56,2231,2232],{"class":1633},"floor",[56,2234,1637],{"class":66},[56,2236,2227],{"class":309},[56,2238,386],{"class":62},[56,2240,2093],{"class":1633},[56,2242,2243],{"class":66},"() ",[56,2245,269],{"class":62},[56,2247,2221],{"class":309},[56,2249,386],{"class":62},[56,2251,2252],{"class":309},"length",[56,2254,2255],{"class":66},")]",[56,2257,288],{"class":62},[56,2259,2261,2263,2265,2268,2270,2272],{"class":58,"line":2260},58,[56,2262,2153],{"class":309},[56,2264,386],{"class":62},[56,2266,2267],{"class":309},"color",[56,2269,1908],{"class":62},[56,2271,2216],{"class":309},[56,2273,288],{"class":62},[56,2275,2277],{"class":58,"line":2276},59,[56,2278,323],{"emptyLinePlaceholder":322},[56,2280,2282],{"class":58,"line":2281},60,[56,2283,2284],{"class":225},"    \u002F\u002F IMG要素にカラーの画像とクラス名を付与\n",[56,2286,2288,2291,2293,2295,2297,2299,2302,2304,2306,2308,2311,2313,2316,2318,2320,2322,2325,2327,2329],{"class":58,"line":2287},61,[56,2289,2290],{"class":309},"    card",[56,2292,386],{"class":62},[56,2294,2045],{"class":1633},[56,2296,1637],{"class":66},[56,2298,1401],{"class":62},[56,2300,2301],{"class":80},"src",[56,2303,1401],{"class":62},[56,2305,1752],{"class":62},[56,2307,1401],{"class":62},[56,2309,2310],{"class":80},".\u002F",[56,2312,1401],{"class":62},[56,2314,2315],{"class":62},"+",[56,2317,2267],{"class":309},[56,2319,2315],{"class":62},[56,2321,1401],{"class":62},[56,2323,2324],{"class":80},".png",[56,2326,1401],{"class":62},[56,2328,1646],{"class":66},[56,2330,288],{"class":62},[56,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356,2358],{"class":58,"line":2333},62,[56,2335,2290],{"class":309},[56,2337,386],{"class":62},[56,2339,2045],{"class":1633},[56,2341,1637],{"class":66},[56,2343,1401],{"class":62},[56,2345,2052],{"class":80},[56,2347,1401],{"class":62},[56,2349,1752],{"class":62},[56,2351,1401],{"class":62},[56,2353,149],{"class":80},[56,2355,1401],{"class":62},[56,2357,1646],{"class":66},[56,2359,288],{"class":62},[56,2361,2363],{"class":58,"line":2362},63,[56,2364,323],{"emptyLinePlaceholder":322},[56,2366,2368],{"class":58,"line":2367},64,[56,2369,2370],{"class":225},"    \u002F\u002F カードに対して不明な高さを与える\n",[56,2372,2374,2376,2378,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401,2403,2406,2408,2411,2414,2417,2420,2422,2424],{"class":58,"line":2373},65,[56,2375,2153],{"class":309},[56,2377,386],{"class":62},[56,2379,2380],{"class":309},"selfHeight",[56,2382,1908],{"class":62},[56,2384,2088],{"class":309},[56,2386,386],{"class":62},[56,2388,2232],{"class":1633},[56,2390,1637],{"class":66},[56,2392,2227],{"class":309},[56,2394,386],{"class":62},[56,2396,2093],{"class":1633},[56,2398,1862],{"class":66},[56,2400,269],{"class":62},[56,2402,1637],{"class":66},[56,2404,2405],{"class":309},"heightMax",[56,2407,2315],{"class":62},[56,2409,2410],{"class":284},"1",[56,2412,2413],{"class":62},"-",[56,2415,2416],{"class":309},"heightMin",[56,2418,2419],{"class":66},"))",[56,2421,2315],{"class":62},[56,2423,2416],{"class":309},[56,2425,288],{"class":62},[56,2427,2429],{"class":58,"line":2428},66,[56,2430,2431],{"class":66},"    \n",[56,2433,2435],{"class":58,"line":2434},67,[56,2436,2437],{"class":225},"    \u002F\u002F カードDIVにIMGを追加\n",[56,2439,2441,2443,2445,2448,2450,2452,2454],{"class":58,"line":2440},68,[56,2442,2040],{"class":309},[56,2444,386],{"class":62},[56,2446,2447],{"class":1633},"appendChild",[56,2449,1637],{"class":66},[56,2451,1925],{"class":309},[56,2453,1646],{"class":66},[56,2455,288],{"class":62},[56,2457,2459],{"class":58,"line":2458},69,[56,2460,323],{"emptyLinePlaceholder":322},[56,2462,2464],{"class":58,"line":2463},70,[56,2465,2466],{"class":225},"    \u002F\u002F elementsに記録。DOMとIDを返す\n",[56,2468,2470,2473,2475,2478,2480,2483,2485],{"class":58,"line":2469},71,[56,2471,2472],{"class":309},"    elements",[56,2474,386],{"class":62},[56,2476,2477],{"class":1633},"push",[56,2479,1637],{"class":66},[56,2481,2482],{"class":309},"info",[56,2484,1646],{"class":66},[56,2486,288],{"class":62},[56,2488,2490,2492,2495,2497,2499,2502,2504,2506,2508,2510],{"class":58,"line":2489},72,[56,2491,1856],{"class":1855},[56,2493,2494],{"class":62}," {",[56,2496,1930],{"class":66},[56,2498,281],{"class":62},[56,2500,2501],{"class":309},"contain",[56,2503,1752],{"class":62},[56,2505,1948],{"class":66},[56,2507,281],{"class":62},[56,2509,2143],{"class":309},[56,2511,1583],{"class":62},[56,2513,2515],{"class":58,"line":2514},73,[56,2516,317],{"class":62},[56,2518,2520],{"class":58,"line":2519},74,[56,2521,323],{"emptyLinePlaceholder":322},[56,2523,2525],{"class":58,"line":2524},75,[56,2526,2527],{"class":225},"\u002F\u002F カードコンテナーにカードを追加する\n",[56,2529,2531,2533,2536,2538,2541,2545,2547,2549],{"class":58,"line":2530},76,[56,2532,1509],{"class":70},[56,2534,2535],{"class":309}," insertCard ",[56,2537,74],{"class":62},[56,2539,2540],{"class":62}," (",[56,2542,2544],{"class":2543},"s7ZW3","cardDom",[56,2546,1646],{"class":62},[56,2548,1848],{"class":70},[56,2550,272],{"class":62},[56,2552,2554,2557,2559,2561,2563,2565,2567],{"class":58,"line":2553},77,[56,2555,2556],{"class":309},"    cardsContainer",[56,2558,386],{"class":62},[56,2560,2447],{"class":1633},[56,2562,1637],{"class":66},[56,2564,2544],{"class":309},[56,2566,1646],{"class":66},[56,2568,288],{"class":62},[56,2570,2572],{"class":58,"line":2571},78,[56,2573,317],{"class":62},[56,2575,2577],{"class":58,"line":2576},79,[56,2578,323],{"emptyLinePlaceholder":322},[56,2580,2582],{"class":58,"line":2581},80,[56,2583,2584],{"class":225},"\u002F\u002F これが大切\n",[56,2586,2588],{"class":58,"line":2587},81,[56,2589,2590],{"class":225},"\u002F\u002F IDで紐づいたDOMに対して高さと位置を決定させる。\n",[56,2592,2594,2596,2599,2601,2603,2605,2607,2610],{"class":58,"line":2593},82,[56,2595,1509],{"class":70},[56,2597,2598],{"class":309}," scanAdd ",[56,2600,74],{"class":62},[56,2602,2540],{"class":62},[56,2604,1948],{"class":2543},[56,2606,1646],{"class":62},[56,2608,2609],{"class":70}," =>",[56,2611,272],{"class":62},[56,2613,2615],{"class":58,"line":2614},83,[56,2616,2617],{"class":225},"    \u002F\u002F elementsから対象カードのIDの番号、情報を取得\n",[56,2619,2621,2623,2626,2628,2631,2633,2636,2638,2641,2643,2646,2649,2652,2654,2656,2659,2661,2663,2665],{"class":58,"line":2620},84,[56,2622,1902],{"class":70},[56,2624,2625],{"class":309}," index",[56,2627,1908],{"class":62},[56,2629,2630],{"class":309}," elements",[56,2632,386],{"class":62},[56,2634,2635],{"class":1633},"findIndex",[56,2637,1637],{"class":66},[56,2639,2640],{"class":2543},"ele",[56,2642,1848],{"class":70},[56,2644,2645],{"class":62},"{",[56,2647,2648],{"class":1855},"return",[56,2650,2651],{"class":309}," ele",[56,2653,386],{"class":62},[56,2655,1948],{"class":309},[56,2657,2658],{"class":62},"===",[56,2660,1948],{"class":309},[56,2662,1869],{"class":62},[56,2664,1646],{"class":66},[56,2666,288],{"class":62},[56,2668,2670,2672,2674,2676,2678,2680,2683],{"class":58,"line":2669},85,[56,2671,1902],{"class":70},[56,2673,2651],{"class":309},[56,2675,1908],{"class":62},[56,2677,2630],{"class":309},[56,2679,2224],{"class":66},[56,2681,2682],{"class":309},"index",[56,2684,2685],{"class":66},"]\n",[56,2687,2689],{"class":58,"line":2688},86,[56,2690,323],{"emptyLinePlaceholder":322},[56,2692,2694],{"class":58,"line":2693},87,[56,2695,2696],{"class":225},"    \u002F\u002F DOMを取得\n",[56,2698,2700,2702,2705,2707,2709,2711,2713,2715,2717,2719,2721,2723],{"class":58,"line":2699},88,[56,2701,1902],{"class":70},[56,2703,2704],{"class":309}," dom",[56,2706,1908],{"class":62},[56,2708,1628],{"class":309},[56,2710,386],{"class":62},[56,2712,1634],{"class":1633},[56,2714,1637],{"class":66},[56,2716,2640],{"class":309},[56,2718,386],{"class":62},[56,2720,1948],{"class":309},[56,2722,1646],{"class":66},[56,2724,288],{"class":62},[56,2726,2728],{"class":58,"line":2727},89,[56,2729,323],{"emptyLinePlaceholder":322},[56,2731,2733],{"class":58,"line":2732},90,[56,2734,2735],{"class":225},"    \u002F\u002F index、つまりカードが何晩目かと列数でx,yの位置を決定する。\n",[56,2737,2739,2741,2744,2746,2748,2750],{"class":58,"line":2738},91,[56,2740,1902],{"class":70},[56,2742,2743],{"class":309}," height",[56,2745,1908],{"class":62},[56,2747,2651],{"class":309},[56,2749,386],{"class":62},[56,2751,2752],{"class":309},"selfHeight\n",[56,2754,2756,2759,2761,2764,2766,2768,2770,2773,2776,2778,2781,2784,2786,2789,2791,2793,2796,2798,2800,2802,2804,2807,2809],{"class":58,"line":2755},92,[56,2757,2758],{"class":309},"    ele",[56,2760,386],{"class":62},[56,2762,2763],{"class":309},"y",[56,2765,1908],{"class":62},[56,2767,2540],{"class":66},[56,2769,2682],{"class":309},[56,2771,2772],{"class":62}," \u003C",[56,2774,2775],{"class":309}," row",[56,2777,1646],{"class":66},[56,2779,2780],{"class":62},"?",[56,2782,2783],{"class":309},"height",[56,2785,281],{"class":62},[56,2787,2788],{"class":309},"elements",[56,2790,2224],{"class":66},[56,2792,2682],{"class":309},[56,2794,2795],{"class":62}," -",[56,2797,2775],{"class":309},[56,2799,1798],{"class":66},[56,2801,386],{"class":62},[56,2803,2763],{"class":309},[56,2805,2806],{"class":62}," +",[56,2808,2743],{"class":309},[56,2810,288],{"class":62},[56,2812,2814,2816,2819,2821,2823,2825,2828,2830,2833,2835,2837,2840,2843,2845,2848,2850,2852],{"class":58,"line":2813},93,[56,2815,1902],{"class":70},[56,2817,2818],{"class":309}," x",[56,2820,1908],{"class":62},[56,2822,2540],{"class":66},[56,2824,2682],{"class":309},[56,2826,2827],{"class":62},"%",[56,2829,1637],{"class":66},[56,2831,2832],{"class":309},"row",[56,2834,1646],{"class":66},[56,2836,269],{"class":62},[56,2838,2839],{"class":284},"100",[56,2841,2842],{"class":66},") ",[56,2844,2315],{"class":62},[56,2846,2847],{"class":62}," '",[56,2849,2827],{"class":80},[56,2851,1401],{"class":62},[56,2853,288],{"class":62},[56,2855,2857,2859,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892,2894,2896],{"class":58,"line":2856},94,[56,2858,1902],{"class":70},[56,2860,2861],{"class":309}," y",[56,2863,1908],{"class":62},[56,2865,2540],{"class":66},[56,2867,2682],{"class":309},[56,2869,2772],{"class":62},[56,2871,2775],{"class":309},[56,2873,1646],{"class":66},[56,2875,2780],{"class":62},[56,2877,1565],{"class":284},[56,2879,281],{"class":62},[56,2881,2788],{"class":309},[56,2883,2224],{"class":66},[56,2885,2682],{"class":309},[56,2887,2795],{"class":62},[56,2889,2775],{"class":309},[56,2891,1798],{"class":66},[56,2893,386],{"class":62},[56,2895,2763],{"class":309},[56,2897,288],{"class":62},[56,2899,2901],{"class":58,"line":2900},95,[56,2902,2431],{"class":66},[56,2904,2906],{"class":58,"line":2905},96,[56,2907,2908],{"class":225},"    \u002F\u002F 位置をずらすスタイルを適用\n",[56,2910,2912,2915,2917,2919,2921,2923,2926,2928,2930,2933,2936,2939,2941,2943,2946,2948,2951,2953,2955,2957,2959,2961,2964,2966],{"class":58,"line":2911},97,[56,2913,2914],{"class":309},"    dom",[56,2916,386],{"class":62},[56,2918,2045],{"class":1633},[56,2920,1637],{"class":66},[56,2922,1401],{"class":62},[56,2924,2925],{"class":80},"style",[56,2927,1401],{"class":62},[56,2929,1752],{"class":62},[56,2931,2932],{"class":62},"`",[56,2934,2935],{"class":80},"height:",[56,2937,2938],{"class":62},"${",[56,2940,2783],{"class":309},[56,2942,1869],{"class":62},[56,2944,2945],{"class":80},"px; transform:translate(",[56,2947,2938],{"class":62},[56,2949,2950],{"class":309},"x",[56,2952,1869],{"class":62},[56,2954,1752],{"class":80},[56,2956,2938],{"class":62},[56,2958,2763],{"class":309},[56,2960,1869],{"class":62},[56,2962,2963],{"class":80},"px);",[56,2965,2932],{"class":62},[56,2967,1872],{"class":66},[56,2969,2971],{"class":58,"line":2970},98,[56,2972,323],{"emptyLinePlaceholder":322},[56,2974,2976],{"class":58,"line":2975},99,[56,2977,2978],{"class":225},"    \u002F\u002F アニメーション用のスタイルを追加\n",[56,2980,2982,2985,2987,2989,2991],{"class":58,"line":2981},100,[56,2983,2984],{"class":1633},"    setTimeout",[56,2986,1637],{"class":66},[56,2988,1862],{"class":62},[56,2990,1848],{"class":70},[56,2992,272],{"class":62},[56,2994,2996,2999,3001,3004,3006,3009,3011,3013,3015,3017],{"class":58,"line":2995},101,[56,2997,2998],{"class":309},"        dom",[56,3000,386],{"class":62},[56,3002,3003],{"class":309},"classList",[56,3005,386],{"class":62},[56,3007,3008],{"class":1633},"add",[56,3010,1637],{"class":66},[56,3012,1401],{"class":62},[56,3014,753],{"class":80},[56,3016,1401],{"class":62},[56,3018,1872],{"class":66},[56,3020,3022,3025,3028,3030],{"class":58,"line":3021},102,[56,3023,3024],{"class":62},"    },",[56,3026,3027],{"class":284},"500",[56,3029,1646],{"class":66},[56,3031,288],{"class":62},[56,3033,3035],{"class":58,"line":3034},103,[56,3036,317],{"class":62},[13,3038,3039],{},"大まかな流れとしては以下の通りです。",[3041,3042,3043,3047,3050,3053,3056],"ol",{},[3044,3045,3046],"li",{},"列数、カード座標情報などの初期値と格納する配列の定義。",[3044,3048,3049],{},"ボタンに対するイベントリスナーの定義、ボタンを押したら以下を発火。",[3044,3051,3052],{},"新しいカードを作成する",[3044,3054,3055],{},"カードをコンテナに追加",[3044,3057,3058],{},"追加数、列数に応じて追加したカードの位置を決定",[13,3060,3061],{},"それでは細かく解説していきます。",[3063,3064,3065],"h4",{"id":3065},"定数などの準備",[46,3067,3069],{"className":1495,"code":3068,"language":1497,"meta":51,"style":51},"\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",[53,3070,3071,3075,3087,3091,3095,3105,3111,3117,3127,3137,3146,3150,3154,3158,3170,3174,3178,3204,3208,3212,3238,3242,3246,3258,3270,3274,3278,3338],{"__ignoreMap":51},[56,3072,3073],{"class":58,"line":59},[56,3074,1504],{"class":225},[56,3076,3077,3079,3081,3083,3085],{"class":58,"line":101},[56,3078,1509],{"class":70},[56,3080,1512],{"class":309},[56,3082,74],{"class":62},[56,3084,1517],{"class":309},[56,3086,288],{"class":62},[56,3088,3089],{"class":58,"line":122},[56,3090,323],{"emptyLinePlaceholder":322},[56,3092,3093],{"class":58,"line":156},[56,3094,1528],{"class":225},[56,3096,3097,3099,3101,3103],{"class":58,"line":166},[56,3098,1509],{"class":70},[56,3100,1535],{"class":309},[56,3102,74],{"class":62},[56,3104,1540],{"class":62},[56,3106,3107,3109],{"class":58,"line":4},[56,3108,1545],{"class":66},[56,3110,1548],{"class":62},[56,3112,3113,3115],{"class":58,"line":213},[56,3114,1553],{"class":66},[56,3116,1548],{"class":62},[56,3118,3119,3121,3123,3125],{"class":58,"line":222},[56,3120,1560],{"class":66},[56,3122,281],{"class":62},[56,3124,1565],{"class":284},[56,3126,1568],{"class":62},[56,3128,3129,3131,3133,3135],{"class":58,"line":229},[56,3130,1573],{"class":66},[56,3132,281],{"class":62},[56,3134,1565],{"class":284},[56,3136,1568],{"class":62},[56,3138,3139,3142,3144],{"class":58,"line":360},[56,3140,3141],{"class":66},"    x",[56,3143,281],{"class":62},[56,3145,1578],{"class":284},[56,3147,3148],{"class":58,"line":373},[56,3149,1583],{"class":62},[56,3151,3152],{"class":58,"line":378},[56,3153,323],{"emptyLinePlaceholder":322},[56,3155,3156],{"class":58,"line":383},[56,3157,1592],{"class":225},[56,3159,3160,3162,3164,3166,3168],{"class":58,"line":394},[56,3161,1509],{"class":70},[56,3163,1599],{"class":309},[56,3165,74],{"class":62},[56,3167,1604],{"class":284},[56,3169,288],{"class":62},[56,3171,3172],{"class":58,"line":407},[56,3173,323],{"emptyLinePlaceholder":322},[56,3175,3176],{"class":58,"line":421},[56,3177,1615],{"class":225},[56,3179,3180,3182,3184,3186,3188,3190,3192,3194,3196,3198,3200,3202],{"class":58,"line":436},[56,3181,1620],{"class":70},[56,3183,1623],{"class":309},[56,3185,74],{"class":62},[56,3187,1628],{"class":309},[56,3189,386],{"class":62},[56,3191,1634],{"class":1633},[56,3193,1637],{"class":309},[56,3195,1401],{"class":62},[56,3197,93],{"class":80},[56,3199,1401],{"class":62},[56,3201,1646],{"class":309},[56,3203,288],{"class":62},[56,3205,3206],{"class":58,"line":449},[56,3207,323],{"emptyLinePlaceholder":322},[56,3209,3210],{"class":58,"line":454},[56,3211,1657],{"class":225},[56,3213,3214,3216,3218,3220,3222,3224,3226,3228,3230,3232,3234,3236],{"class":58,"line":459},[56,3215,1620],{"class":70},[56,3217,1664],{"class":309},[56,3219,74],{"class":62},[56,3221,1628],{"class":309},[56,3223,386],{"class":62},[56,3225,1634],{"class":1633},[56,3227,1637],{"class":309},[56,3229,1401],{"class":62},[56,3231,331],{"class":80},[56,3233,1401],{"class":62},[56,3235,1646],{"class":309},[56,3237,288],{"class":62},[56,3239,3240],{"class":58,"line":468},[56,3241,323],{"emptyLinePlaceholder":322},[56,3243,3244],{"class":58,"line":482},[56,3245,1693],{"class":225},[56,3247,3248,3250,3252,3254,3256],{"class":58,"line":495},[56,3249,1620],{"class":70},[56,3251,1700],{"class":309},[56,3253,74],{"class":62},[56,3255,1705],{"class":284},[56,3257,288],{"class":62},[56,3259,3260,3262,3264,3266,3268],{"class":58,"line":508},[56,3261,1620],{"class":70},[56,3263,1714],{"class":309},[56,3265,74],{"class":62},[56,3267,1719],{"class":284},[56,3269,288],{"class":62},[56,3271,3272],{"class":58,"line":520},[56,3273,323],{"emptyLinePlaceholder":322},[56,3275,3276],{"class":58,"line":525},[56,3277,1730],{"class":225},[56,3279,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,3336],{"class":58,"line":530},[56,3281,1620],{"class":70},[56,3283,1737],{"class":309},[56,3285,74],{"class":62},[56,3287,1742],{"class":309},[56,3289,1401],{"class":62},[56,3291,1747],{"class":80},[56,3293,1401],{"class":62},[56,3295,1752],{"class":62},[56,3297,1401],{"class":62},[56,3299,1757],{"class":80},[56,3301,1401],{"class":62},[56,3303,1752],{"class":62},[56,3305,1401],{"class":62},[56,3307,1766],{"class":80},[56,3309,1401],{"class":62},[56,3311,1752],{"class":62},[56,3313,1401],{"class":62},[56,3315,1775],{"class":80},[56,3317,1401],{"class":62},[56,3319,1752],{"class":62},[56,3321,1401],{"class":62},[56,3323,1784],{"class":80},[56,3325,1401],{"class":62},[56,3327,1752],{"class":62},[56,3329,1401],{"class":62},[56,3331,1793],{"class":80},[56,3333,1401],{"class":62},[56,3335,1798],{"class":309},[56,3337,288],{"class":62},[56,3339,3340,3342,3344,3346,3348],{"class":58,"line":544},[56,3341,1620],{"class":70},[56,3343,1807],{"class":309},[56,3345,74],{"class":62},[56,3347,1812],{"class":284},[56,3349,288],{"class":62},[13,3351,3352,3353,3355],{},"ここでは追加する際に必要な定数やDOMを定義しておきます。\n",[53,3354,2788],{},"には作成したカードコンテンツを記録しておきます。列＋１番目以降（今回は４番目以降）の高さを調整するときなどに使用します。",[3063,3357,3358],{"id":3358},"カードの作成関数を設定",[46,3360,3362],{"className":1495,"code":3361,"language":1497,"meta":51,"style":51},"\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",[53,3363,3364,3368,3382,3396,3400,3404,3430,3458,3462,3466,3504,3528,3542,3546,3550,3554,3580,3620,3634,3638,3642,3682,3710,3714,3718,3766,3770,3774,3790,3794,3798,3814,3836],{"__ignoreMap":51},[56,3365,3366],{"class":58,"line":59},[56,3367,1965],{"class":225},[56,3369,3370,3372,3374,3376,3378,3380],{"class":58,"line":101},[56,3371,1509],{"class":70},[56,3373,1972],{"class":309},[56,3375,74],{"class":62},[56,3377,1893],{"class":62},[56,3379,1848],{"class":70},[56,3381,272],{"class":62},[56,3383,3384,3386,3388,3390,3392,3394],{"class":58,"line":122},[56,3385,1902],{"class":70},[56,3387,1987],{"class":309},[56,3389,1908],{"class":62},[56,3391,1992],{"class":62},[56,3393,1995],{"class":309},[56,3395,1583],{"class":62},[56,3397,3398],{"class":58,"line":156},[56,3399,323],{"emptyLinePlaceholder":322},[56,3401,3402],{"class":58,"line":166},[56,3403,2006],{"class":225},[56,3405,3406,3408,3410,3412,3414,3416,3418,3420,3422,3424,3426,3428],{"class":58,"line":4},[56,3407,1902],{"class":70},[56,3409,2013],{"class":309},[56,3411,1908],{"class":62},[56,3413,1628],{"class":309},[56,3415,386],{"class":62},[56,3417,2022],{"class":1633},[56,3419,1637],{"class":66},[56,3421,77],{"class":62},[56,3423,2029],{"class":80},[56,3425,77],{"class":62},[56,3427,1646],{"class":66},[56,3429,288],{"class":62},[56,3431,3432,3434,3436,3438,3440,3442,3444,3446,3448,3450,3452,3454,3456],{"class":58,"line":213},[56,3433,2040],{"class":309},[56,3435,386],{"class":62},[56,3437,2045],{"class":1633},[56,3439,1637],{"class":66},[56,3441,1401],{"class":62},[56,3443,2052],{"class":80},[56,3445,1401],{"class":62},[56,3447,1752],{"class":62},[56,3449,1401],{"class":62},[56,3451,244],{"class":80},[56,3453,1401],{"class":62},[56,3455,1646],{"class":66},[56,3457,288],{"class":62},[56,3459,3460],{"class":58,"line":222},[56,3461,323],{"emptyLinePlaceholder":322},[56,3463,3464],{"class":58,"line":229},[56,3465,2075],{"class":225},[56,3467,3468,3470,3472,3474,3476,3478,3480,3482,3484,3486,3488,3490,3492,3494,3496,3498,3500,3502],{"class":58,"line":360},[56,3469,1902],{"class":70},[56,3471,2083],{"class":309},[56,3473,1908],{"class":62},[56,3475,2088],{"class":309},[56,3477,386],{"class":62},[56,3479,2093],{"class":1633},[56,3481,1862],{"class":66},[56,3483,386],{"class":62},[56,3485,2100],{"class":1633},[56,3487,1637],{"class":66},[56,3489,2105],{"class":284},[56,3491,1646],{"class":66},[56,3493,386],{"class":62},[56,3495,2112],{"class":1633},[56,3497,1637],{"class":66},[56,3499,2117],{"class":284},[56,3501,1646],{"class":66},[56,3503,288],{"class":62},[56,3505,3506,3508,3510,3512,3514,3516,3518,3520,3522,3524,3526],{"class":58,"line":373},[56,3507,2040],{"class":309},[56,3509,386],{"class":62},[56,3511,2045],{"class":1633},[56,3513,1637],{"class":66},[56,3515,1401],{"class":62},[56,3517,1948],{"class":80},[56,3519,1401],{"class":62},[56,3521,1752],{"class":62},[56,3523,2143],{"class":309},[56,3525,1646],{"class":66},[56,3527,288],{"class":62},[56,3529,3530,3532,3534,3536,3538,3540],{"class":58,"line":378},[56,3531,2153],{"class":309},[56,3533,386],{"class":62},[56,3535,1948],{"class":309},[56,3537,1908],{"class":62},[56,3539,2083],{"class":309},[56,3541,288],{"class":62},[56,3543,3544],{"class":58,"line":383},[56,3545,323],{"emptyLinePlaceholder":322},[56,3547,3548],{"class":58,"line":394},[56,3549,2174],{"class":225},[56,3551,3552],{"class":58,"line":407},[56,3553,2180],{"class":225},[56,3555,3556,3558,3560,3562,3564,3566,3568,3570,3572,3574,3576,3578],{"class":58,"line":421},[56,3557,1902],{"class":70},[56,3559,1905],{"class":309},[56,3561,1908],{"class":62},[56,3563,1628],{"class":309},[56,3565,386],{"class":62},[56,3567,2022],{"class":1633},[56,3569,1637],{"class":66},[56,3571,77],{"class":62},[56,3573,2202],{"class":80},[56,3575,77],{"class":62},[56,3577,1646],{"class":66},[56,3579,288],{"class":62},[56,3581,3582,3584,3586,3588,3590,3592,3594,3596,3598,3600,3602,3604,3606,3608,3610,3612,3614,3616,3618],{"class":58,"line":436},[56,3583,1902],{"class":70},[56,3585,2216],{"class":309},[56,3587,1908],{"class":62},[56,3589,2221],{"class":309},[56,3591,2224],{"class":66},[56,3593,2227],{"class":309},[56,3595,386],{"class":62},[56,3597,2232],{"class":1633},[56,3599,1637],{"class":66},[56,3601,2227],{"class":309},[56,3603,386],{"class":62},[56,3605,2093],{"class":1633},[56,3607,2243],{"class":66},[56,3609,269],{"class":62},[56,3611,2221],{"class":309},[56,3613,386],{"class":62},[56,3615,2252],{"class":309},[56,3617,2255],{"class":66},[56,3619,288],{"class":62},[56,3621,3622,3624,3626,3628,3630,3632],{"class":58,"line":449},[56,3623,2153],{"class":309},[56,3625,386],{"class":62},[56,3627,2267],{"class":309},[56,3629,1908],{"class":62},[56,3631,2216],{"class":309},[56,3633,288],{"class":62},[56,3635,3636],{"class":58,"line":454},[56,3637,323],{"emptyLinePlaceholder":322},[56,3639,3640],{"class":58,"line":459},[56,3641,2284],{"class":225},[56,3643,3644,3646,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678,3680],{"class":58,"line":468},[56,3645,2290],{"class":309},[56,3647,386],{"class":62},[56,3649,2045],{"class":1633},[56,3651,1637],{"class":66},[56,3653,1401],{"class":62},[56,3655,2301],{"class":80},[56,3657,1401],{"class":62},[56,3659,1752],{"class":62},[56,3661,1401],{"class":62},[56,3663,2310],{"class":80},[56,3665,1401],{"class":62},[56,3667,2315],{"class":62},[56,3669,2267],{"class":309},[56,3671,2315],{"class":62},[56,3673,1401],{"class":62},[56,3675,2324],{"class":80},[56,3677,1401],{"class":62},[56,3679,1646],{"class":66},[56,3681,288],{"class":62},[56,3683,3684,3686,3688,3690,3692,3694,3696,3698,3700,3702,3704,3706,3708],{"class":58,"line":482},[56,3685,2290],{"class":309},[56,3687,386],{"class":62},[56,3689,2045],{"class":1633},[56,3691,1637],{"class":66},[56,3693,1401],{"class":62},[56,3695,2052],{"class":80},[56,3697,1401],{"class":62},[56,3699,1752],{"class":62},[56,3701,1401],{"class":62},[56,3703,149],{"class":80},[56,3705,1401],{"class":62},[56,3707,1646],{"class":66},[56,3709,288],{"class":62},[56,3711,3712],{"class":58,"line":495},[56,3713,323],{"emptyLinePlaceholder":322},[56,3715,3716],{"class":58,"line":508},[56,3717,2370],{"class":225},[56,3719,3720,3722,3724,3726,3728,3730,3732,3734,3736,3738,3740,3742,3744,3746,3748,3750,3752,3754,3756,3758,3760,3762,3764],{"class":58,"line":520},[56,3721,2153],{"class":309},[56,3723,386],{"class":62},[56,3725,2380],{"class":309},[56,3727,1908],{"class":62},[56,3729,2088],{"class":309},[56,3731,386],{"class":62},[56,3733,2232],{"class":1633},[56,3735,1637],{"class":66},[56,3737,2227],{"class":309},[56,3739,386],{"class":62},[56,3741,2093],{"class":1633},[56,3743,1862],{"class":66},[56,3745,269],{"class":62},[56,3747,1637],{"class":66},[56,3749,2405],{"class":309},[56,3751,2315],{"class":62},[56,3753,2410],{"class":284},[56,3755,2413],{"class":62},[56,3757,2416],{"class":309},[56,3759,2419],{"class":66},[56,3761,2315],{"class":62},[56,3763,2416],{"class":309},[56,3765,288],{"class":62},[56,3767,3768],{"class":58,"line":525},[56,3769,2431],{"class":66},[56,3771,3772],{"class":58,"line":530},[56,3773,2437],{"class":225},[56,3775,3776,3778,3780,3782,3784,3786,3788],{"class":58,"line":544},[56,3777,2040],{"class":309},[56,3779,386],{"class":62},[56,3781,2447],{"class":1633},[56,3783,1637],{"class":66},[56,3785,1925],{"class":309},[56,3787,1646],{"class":66},[56,3789,288],{"class":62},[56,3791,3792],{"class":58,"line":556},[56,3793,323],{"emptyLinePlaceholder":322},[56,3795,3796],{"class":58,"line":567},[56,3797,2466],{"class":225},[56,3799,3800,3802,3804,3806,3808,3810,3812],{"class":58,"line":580},[56,3801,2472],{"class":309},[56,3803,386],{"class":62},[56,3805,2477],{"class":1633},[56,3807,1637],{"class":66},[56,3809,2482],{"class":309},[56,3811,1646],{"class":66},[56,3813,288],{"class":62},[56,3815,3816,3818,3820,3822,3824,3826,3828,3830,3832,3834],{"class":58,"line":592},[56,3817,1856],{"class":1855},[56,3819,2494],{"class":62},[56,3821,1930],{"class":66},[56,3823,281],{"class":62},[56,3825,2501],{"class":309},[56,3827,1752],{"class":62},[56,3829,1948],{"class":66},[56,3831,281],{"class":62},[56,3833,2143],{"class":309},[56,3835,1583],{"class":62},[56,3837,3838],{"class":58,"line":611},[56,3839,317],{"class":62},[13,3841,3842,3843,3846,3847,3849,3850,3852],{},"カードの作成関数",[53,3844,3845],{},"createCard()","を作ります。ここはカードの要素を作成して、ランダムなIDを付与します。変数",[53,3848,2482],{},"にはカードの高さ、IDを記録して",[53,3851,2788],{},"に入れておきます。",[3063,3854,3855],{"id":3855},"要素の挿入関数を作成",[46,3857,3859],{"className":1495,"code":3858,"language":1497,"meta":51,"style":51},"\u002F\u002F カードコンテナーにカードを追加する\nlet insertCard = (cardDom)=>{\n    cardsContainer.appendChild(cardDom);\n}\n",[53,3860,3861,3865,3883,3899],{"__ignoreMap":51},[56,3862,3863],{"class":58,"line":59},[56,3864,2527],{"class":225},[56,3866,3867,3869,3871,3873,3875,3877,3879,3881],{"class":58,"line":101},[56,3868,1509],{"class":70},[56,3870,2535],{"class":309},[56,3872,74],{"class":62},[56,3874,2540],{"class":62},[56,3876,2544],{"class":2543},[56,3878,1646],{"class":62},[56,3880,1848],{"class":70},[56,3882,272],{"class":62},[56,3884,3885,3887,3889,3891,3893,3895,3897],{"class":58,"line":122},[56,3886,2556],{"class":309},[56,3888,386],{"class":62},[56,3890,2447],{"class":1633},[56,3892,1637],{"class":66},[56,3894,2544],{"class":309},[56,3896,1646],{"class":66},[56,3898,288],{"class":62},[56,3900,3901],{"class":58,"line":156},[56,3902,317],{"class":62},[13,3904,3905],{},"ここは作成したカードのDOMをカードコンテナに挿入します。",[3063,3907,3908],{"id":3908},"挿入されたカードの高さと位置を決定",[46,3910,3912],{"className":1495,"code":3911,"language":1497,"meta":51,"style":51},"\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",[53,3913,3914,3918,3922,3940,3944,3984,4000,4004,4008,4034,4038,4042,4056,4104,4140,4182,4186,4190,4240,4244,4248,4260,4282,4292],{"__ignoreMap":51},[56,3915,3916],{"class":58,"line":59},[56,3917,2584],{"class":225},[56,3919,3920],{"class":58,"line":101},[56,3921,2590],{"class":225},[56,3923,3924,3926,3928,3930,3932,3934,3936,3938],{"class":58,"line":122},[56,3925,1509],{"class":70},[56,3927,2598],{"class":309},[56,3929,74],{"class":62},[56,3931,2540],{"class":62},[56,3933,1948],{"class":2543},[56,3935,1646],{"class":62},[56,3937,2609],{"class":70},[56,3939,272],{"class":62},[56,3941,3942],{"class":58,"line":156},[56,3943,2617],{"class":225},[56,3945,3946,3948,3950,3952,3954,3956,3958,3960,3962,3964,3966,3968,3970,3972,3974,3976,3978,3980,3982],{"class":58,"line":166},[56,3947,1902],{"class":70},[56,3949,2625],{"class":309},[56,3951,1908],{"class":62},[56,3953,2630],{"class":309},[56,3955,386],{"class":62},[56,3957,2635],{"class":1633},[56,3959,1637],{"class":66},[56,3961,2640],{"class":2543},[56,3963,1848],{"class":70},[56,3965,2645],{"class":62},[56,3967,2648],{"class":1855},[56,3969,2651],{"class":309},[56,3971,386],{"class":62},[56,3973,1948],{"class":309},[56,3975,2658],{"class":62},[56,3977,1948],{"class":309},[56,3979,1869],{"class":62},[56,3981,1646],{"class":66},[56,3983,288],{"class":62},[56,3985,3986,3988,3990,3992,3994,3996,3998],{"class":58,"line":4},[56,3987,1902],{"class":70},[56,3989,2651],{"class":309},[56,3991,1908],{"class":62},[56,3993,2630],{"class":309},[56,3995,2224],{"class":66},[56,3997,2682],{"class":309},[56,3999,2685],{"class":66},[56,4001,4002],{"class":58,"line":213},[56,4003,323],{"emptyLinePlaceholder":322},[56,4005,4006],{"class":58,"line":222},[56,4007,2696],{"class":225},[56,4009,4010,4012,4014,4016,4018,4020,4022,4024,4026,4028,4030,4032],{"class":58,"line":229},[56,4011,1902],{"class":70},[56,4013,2704],{"class":309},[56,4015,1908],{"class":62},[56,4017,1628],{"class":309},[56,4019,386],{"class":62},[56,4021,1634],{"class":1633},[56,4023,1637],{"class":66},[56,4025,2640],{"class":309},[56,4027,386],{"class":62},[56,4029,1948],{"class":309},[56,4031,1646],{"class":66},[56,4033,288],{"class":62},[56,4035,4036],{"class":58,"line":360},[56,4037,323],{"emptyLinePlaceholder":322},[56,4039,4040],{"class":58,"line":373},[56,4041,2735],{"class":225},[56,4043,4044,4046,4048,4050,4052,4054],{"class":58,"line":378},[56,4045,1902],{"class":70},[56,4047,2743],{"class":309},[56,4049,1908],{"class":62},[56,4051,2651],{"class":309},[56,4053,386],{"class":62},[56,4055,2752],{"class":309},[56,4057,4058,4060,4062,4064,4066,4068,4070,4072,4074,4076,4078,4080,4082,4084,4086,4088,4090,4092,4094,4096,4098,4100,4102],{"class":58,"line":383},[56,4059,2758],{"class":309},[56,4061,386],{"class":62},[56,4063,2763],{"class":309},[56,4065,1908],{"class":62},[56,4067,2540],{"class":66},[56,4069,2682],{"class":309},[56,4071,2772],{"class":62},[56,4073,2775],{"class":309},[56,4075,1646],{"class":66},[56,4077,2780],{"class":62},[56,4079,2783],{"class":309},[56,4081,281],{"class":62},[56,4083,2788],{"class":309},[56,4085,2224],{"class":66},[56,4087,2682],{"class":309},[56,4089,2795],{"class":62},[56,4091,2775],{"class":309},[56,4093,1798],{"class":66},[56,4095,386],{"class":62},[56,4097,2763],{"class":309},[56,4099,2806],{"class":62},[56,4101,2743],{"class":309},[56,4103,288],{"class":62},[56,4105,4106,4108,4110,4112,4114,4116,4118,4120,4122,4124,4126,4128,4130,4132,4134,4136,4138],{"class":58,"line":394},[56,4107,1902],{"class":70},[56,4109,2818],{"class":309},[56,4111,1908],{"class":62},[56,4113,2540],{"class":66},[56,4115,2682],{"class":309},[56,4117,2827],{"class":62},[56,4119,1637],{"class":66},[56,4121,2832],{"class":309},[56,4123,1646],{"class":66},[56,4125,269],{"class":62},[56,4127,2839],{"class":284},[56,4129,2842],{"class":66},[56,4131,2315],{"class":62},[56,4133,2847],{"class":62},[56,4135,2827],{"class":80},[56,4137,1401],{"class":62},[56,4139,288],{"class":62},[56,4141,4142,4144,4146,4148,4150,4152,4154,4156,4158,4160,4162,4164,4166,4168,4170,4172,4174,4176,4178,4180],{"class":58,"line":407},[56,4143,1902],{"class":70},[56,4145,2861],{"class":309},[56,4147,1908],{"class":62},[56,4149,2540],{"class":66},[56,4151,2682],{"class":309},[56,4153,2772],{"class":62},[56,4155,2775],{"class":309},[56,4157,1646],{"class":66},[56,4159,2780],{"class":62},[56,4161,1565],{"class":284},[56,4163,281],{"class":62},[56,4165,2788],{"class":309},[56,4167,2224],{"class":66},[56,4169,2682],{"class":309},[56,4171,2795],{"class":62},[56,4173,2775],{"class":309},[56,4175,1798],{"class":66},[56,4177,386],{"class":62},[56,4179,2763],{"class":309},[56,4181,288],{"class":62},[56,4183,4184],{"class":58,"line":421},[56,4185,2431],{"class":66},[56,4187,4188],{"class":58,"line":436},[56,4189,2908],{"class":225},[56,4191,4192,4194,4196,4198,4200,4202,4204,4206,4208,4210,4212,4214,4216,4218,4220,4222,4224,4226,4228,4230,4232,4234,4236,4238],{"class":58,"line":449},[56,4193,2914],{"class":309},[56,4195,386],{"class":62},[56,4197,2045],{"class":1633},[56,4199,1637],{"class":66},[56,4201,1401],{"class":62},[56,4203,2925],{"class":80},[56,4205,1401],{"class":62},[56,4207,1752],{"class":62},[56,4209,2932],{"class":62},[56,4211,2935],{"class":80},[56,4213,2938],{"class":62},[56,4215,2783],{"class":309},[56,4217,1869],{"class":62},[56,4219,2945],{"class":80},[56,4221,2938],{"class":62},[56,4223,2950],{"class":309},[56,4225,1869],{"class":62},[56,4227,1752],{"class":80},[56,4229,2938],{"class":62},[56,4231,2763],{"class":309},[56,4233,1869],{"class":62},[56,4235,2963],{"class":80},[56,4237,2932],{"class":62},[56,4239,1872],{"class":66},[56,4241,4242],{"class":58,"line":454},[56,4243,323],{"emptyLinePlaceholder":322},[56,4245,4246],{"class":58,"line":459},[56,4247,2978],{"class":225},[56,4249,4250,4252,4254,4256,4258],{"class":58,"line":468},[56,4251,2984],{"class":1633},[56,4253,1637],{"class":66},[56,4255,1862],{"class":62},[56,4257,1848],{"class":70},[56,4259,272],{"class":62},[56,4261,4262,4264,4266,4268,4270,4272,4274,4276,4278,4280],{"class":58,"line":482},[56,4263,2998],{"class":309},[56,4265,386],{"class":62},[56,4267,3003],{"class":309},[56,4269,386],{"class":62},[56,4271,3008],{"class":1633},[56,4273,1637],{"class":66},[56,4275,1401],{"class":62},[56,4277,753],{"class":80},[56,4279,1401],{"class":62},[56,4281,1872],{"class":66},[56,4283,4284,4286,4288,4290],{"class":58,"line":495},[56,4285,3024],{"class":62},[56,4287,3027],{"class":284},[56,4289,1646],{"class":66},[56,4291,288],{"class":62},[56,4293,4294],{"class":58,"line":508},[56,4295,317],{"class":62},[13,4297,4298,4301,4302,4304,4305,4308],{},[53,4299,4300],{},"scanAdd()","では対象のID（DOMのID）に基づいて",[53,4303,2788],{},"から高さを設定する対象のカードと、そのカードの１行上のカードの情報を取得します。例えば５番目のカードの場合、２番目のカードの高さを用いてY座標を決定します。この関数ではその情報を元にしてカードに高さを与え、また表示する位置のx,y座標を決定して",[53,4306,4307],{},"translate","の値を決定します。",[3063,4310,4311],{"id":4311},"関数の連結とイベントリスナー",[46,4313,4315],{"className":1495,"code":4314,"language":1497,"meta":51,"style":51},"\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",[53,4316,4317,4321,4343,4353,4359,4363,4367,4381,4395,4411,4427],{"__ignoreMap":51},[56,4318,4319],{"class":58,"line":59},[56,4320,1823],{"class":225},[56,4322,4323,4325,4327,4329,4331,4333,4335,4337,4339,4341],{"class":58,"line":101},[56,4324,1828],{"class":309},[56,4326,386],{"class":62},[56,4328,1833],{"class":1633},[56,4330,1637],{"class":309},[56,4332,1401],{"class":62},[56,4334,1840],{"class":80},[56,4336,1401],{"class":62},[56,4338,1845],{"class":62},[56,4340,1848],{"class":70},[56,4342,272],{"class":62},[56,4344,4345,4347,4349,4351],{"class":58,"line":122},[56,4346,1856],{"class":1855},[56,4348,1859],{"class":1633},[56,4350,1862],{"class":66},[56,4352,288],{"class":62},[56,4354,4355,4357],{"class":58,"line":156},[56,4356,1869],{"class":62},[56,4358,1872],{"class":309},[56,4360,4361],{"class":58,"line":166},[56,4362,323],{"emptyLinePlaceholder":322},[56,4364,4365],{"class":58,"line":4},[56,4366,1881],{"class":225},[56,4368,4369,4371,4373,4375,4377,4379],{"class":58,"line":213},[56,4370,1509],{"class":70},[56,4372,1888],{"class":309},[56,4374,74],{"class":62},[56,4376,1893],{"class":62},[56,4378,1848],{"class":70},[56,4380,272],{"class":62},[56,4382,4383,4385,4387,4389,4391,4393],{"class":58,"line":222},[56,4384,1902],{"class":70},[56,4386,1905],{"class":309},[56,4388,1908],{"class":62},[56,4390,1911],{"class":1633},[56,4392,1862],{"class":66},[56,4394,288],{"class":62},[56,4396,4397,4399,4401,4403,4405,4407,4409],{"class":58,"line":229},[56,4398,1920],{"class":1633},[56,4400,1637],{"class":66},[56,4402,1925],{"class":309},[56,4404,386],{"class":62},[56,4406,1930],{"class":309},[56,4408,1646],{"class":66},[56,4410,288],{"class":62},[56,4412,4413,4415,4417,4419,4421,4423,4425],{"class":58,"line":360},[56,4414,1939],{"class":1633},[56,4416,1637],{"class":66},[56,4418,1925],{"class":309},[56,4420,386],{"class":62},[56,4422,1948],{"class":309},[56,4424,1646],{"class":66},[56,4426,288],{"class":62},[56,4428,4429],{"class":58,"line":373},[56,4430,317],{"class":62},[13,4432,4433],{},"最後に上記の関数を連結し、イベントリスナーのコールバックに設定します。イベントリスナーはカードの追加ボタンに付与されています。",[806,4435,4436],{"id":4436},"実装後の動き",[13,4438,4439,4440,4443],{},"完成したデモは",[31,4441,36],{"href":33,"rel":4442},[35],"にあります。「ADD!」というボタンをクリックするとアニメーションつきでカードが追加されていきます。",[2925,4445,4446],{},"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":51,"searchDepth":122,"depth":122,"links":4448},[4449,4450,4454],{"id":41,"depth":101,"text":41},{"id":803,"depth":101,"text":804,"children":4451},[4452,4453],{"id":808,"depth":122,"text":809},{"id":849,"depth":122,"text":850},{"id":866,"depth":101,"text":866,"children":4455},[4456,4457,4458,4465],{"id":869,"depth":122,"text":869},{"id":1195,"depth":122,"text":1196},{"id":1485,"depth":122,"text":1485,"children":4459},[4460,4461,4462,4463,4464],{"id":3065,"depth":156,"text":3065},{"id":3358,"depth":156,"text":3358},{"id":3855,"depth":156,"text":3855},{"id":3908,"depth":156,"text":3908},{"id":4311,"depth":156,"text":4311},{"id":4436,"depth":122,"text":4436},[4467],"devstack","2021-07-14","md",null,{},"\u002Farticles\u002Fpinterest-like-style",{"title":8,"description":8},"articles\u002Fpinterest-like-style",[50,261,4476],"js","pinterest-like-style\u002Fthumbnail.png","Kk6is-f7e7A8CgIICoPK0ixaA9U5aJL-fp-oIvtU9PM",{"id":4480,"title":4481,"body":4482,"category":6122,"createdAt":6124,"description":6125,"extension":4469,"index":4470,"meta":6126,"navigation":322,"path":6127,"publish":322,"seo":6128,"series":4470,"seriesTitle":4470,"stem":6129,"tag":6130,"thumbnail":6131,"updatedAt":4470,"__hash__":6132},"articles\u002Farticles\u002Fuseful-sass-mixins.md","Sassをプロジェクトで使うときに役に立つメディアクエリmixinとカラーパターン",{"type":10,"value":4483,"toc":6118},[4484,4487,4498,4501,4504,4507,4510,4589,4592,5337,5340,5447,5462,5465,5480,5627,5630,5795,5798,6106,6109,6112,6115],[13,4485,4486],{},"こんにちはjunです。最近のプロジェクトではsassばかり使っていてもうcssを書くことがなくなっているせいか、sassの記法でcssを書いてしまいエラーを起こすことも何回かありました笑。sassはフロントエンドで開発するならば絶対に使えておきたいツールです。その中でプロジェクトに関係なく、同じユーティリティーなライブラリ的なmixinを使うことがあります。",[13,4488,4489,4490,4493,4494,4497],{},"例えば引数を指定するだけでプロジェクトで定義したメディアクエリを出すmixin、bootstrapのように",[53,4491,4492],{},"component-primary","とすれば",[53,4495,4496],{},"primary","色にしてくれるクラスを出力するmixinなどです。mixin意外にもmargin,paddingのユーティリティなどもよく使います。",[13,4499,4500],{},"いつも忘れてサイトを探して時間を潰しているのでここにメモしたいと思います。",[13,4502,4503],{},"※sassの解説ですがscssの記述をします！sass=scssと思ってみてください。",[39,4505,4506],{"id":4506},"引数を使用して特定のメディアクエリを利かすmixin",[13,4508,4509],{},"sassを使用する場合、あるクラスに対するメディアクエリは以下のように付与できます。",[46,4511,4515],{"className":4512,"code":4513,"language":4514,"meta":51,"style":51},"language-scss shiki shiki-themes material-theme-ocean",".p-project{\n    font-size:20px;\n\n    @media screen and (max-width: 399px){\n        font-size:10px;\n    } \n}\n","scss",[53,4516,4517,4526,4538,4542,4566,4578,4585],{"__ignoreMap":51},[56,4518,4519,4521,4524],{"class":58,"line":59},[56,4520,386],{"class":62},[56,4522,4523],{"class":268},"p-project",[56,4525,272],{"class":62},[56,4527,4528,4531,4533,4536],{"class":58,"line":101},[56,4529,4530],{"class":277},"    font-size",[56,4532,281],{"class":62},[56,4534,4535],{"class":284},"20px",[56,4537,288],{"class":62},[56,4539,4540],{"class":58,"line":122},[56,4541,323],{"emptyLinePlaceholder":322},[56,4543,4544,4547,4550,4553,4555,4558,4560,4563],{"class":58,"line":156},[56,4545,4546],{"class":1855},"    @media",[56,4548,4549],{"class":309}," screen ",[56,4551,4552],{"class":62},"and",[56,4554,2540],{"class":62},[56,4556,4557],{"class":268},"max-width",[56,4559,281],{"class":62},[56,4561,4562],{"class":284}," 399px",[56,4564,4565],{"class":62},"){\n",[56,4567,4568,4571,4573,4576],{"class":58,"line":166},[56,4569,4570],{"class":277},"        font-size",[56,4572,281],{"class":62},[56,4574,4575],{"class":284},"10px",[56,4577,288],{"class":62},[56,4579,4580,4583],{"class":58,"line":4},[56,4581,4582],{"class":62},"    }",[56,4584,1259],{"class":309},[56,4586,4587],{"class":58,"line":213},[56,4588,317],{"class":62},[13,4590,4591],{},"cssの場合はメディアクエリでクラスを囲む必要ありますが、sassは対象のクラスでラップするだけで有効なのでかなり便利です。ただしメディアクエリの記述が長いこと、ブレークポイントの数値・変数を入れるのが面倒なので以下のようなmixinを作成します。",[46,4593,4595],{"className":4512,"code":4594,"language":4514,"meta":51,"style":51},"$sm-point:400;\n$md-point:600;\n$lg-point:1000;\n$xl-point:1300;\n\n$breakpoint-up: (\n  'sm': 'screen and (min-width: #{$sm-point}px)',\n  'md': 'screen and (min-width: #{$md-point}px)',\n  'lg': 'screen and (min-width: #{$lg-point}px)',\n  'xl': 'screen and (min-width: #{$xl-point}px)',\n) !default;\n\n$breakpoint-down: (\n  'sm': 'screen and (max-width: #{$sm-point - 1}px)',\n  'md': 'screen and (max-width: #{$md-point - 1}px)',\n  'lg': 'screen and (max-width: #{$lg-point - 1}px)',\n  'xl': 'screen and (max-width: #{$xl-point - 1}px)',\n) !default;\n\n$breakpoint-only: (\n  'sm': 'screen and (max-width: #{$sm-point - 1}px)',\n  'md-sm': 'screen and (max-width: #{$md-point - 1}px) and (min-width: #{$sm-point}px)',\n  'lg-md': 'screen and (max-width: #{$lg-point - 1}px) and (min-width: #{$md-point}px)',\n  'xl-lg': 'screen and (max-width: #{$xl-point - 1}px) and (min-width: #{$lg-point}px)',\n  'xl': 'screen and (min-width: #{$xl-point}px)',\n) !default;\n\n\u002F*\nsm  =>  スマホ\nmd  =>  タブレット\nlg  =>  PC\nxl  =>  でかいPC\n*\u002F\n\n@mixin mq-up($breakpoint: md) {\n  @media #{map-get($breakpoint-up, $breakpoint)} {\n    @content;\n  }\n}\n\n@mixin mq-down($breakpoint: md) {\n  @media #{map-get($breakpoint-down, $breakpoint)} {\n    @content;\n  }\n}\n\n@mixin mq-only($breakpoint: md-sm) {\n  @media #{map-get($breakpoint-only, $breakpoint)} {\n    @content;\n  }\n}\n",[53,4596,4597,4609,4621,4633,4645,4649,4659,4691,4717,4744,4771,4780,4784,4793,4825,4856,4887,4918,4926,4930,4939,4969,5009,5048,5087,5113,5121,5125,5130,5135,5140,5145,5150,5155,5159,5181,5206,5213,5218,5222,5226,5245,5265,5271,5275,5279,5283,5303,5323,5329,5333],{"__ignoreMap":51},[56,4598,4599,4602,4604,4607],{"class":58,"line":59},[56,4600,4601],{"class":309},"$sm-point",[56,4603,281],{"class":62},[56,4605,4606],{"class":284},"400",[56,4608,288],{"class":62},[56,4610,4611,4614,4616,4619],{"class":58,"line":101},[56,4612,4613],{"class":309},"$md-point",[56,4615,281],{"class":62},[56,4617,4618],{"class":284},"600",[56,4620,288],{"class":62},[56,4622,4623,4626,4628,4631],{"class":58,"line":122},[56,4624,4625],{"class":309},"$lg-point",[56,4627,281],{"class":62},[56,4629,4630],{"class":284},"1000",[56,4632,288],{"class":62},[56,4634,4635,4638,4640,4643],{"class":58,"line":156},[56,4636,4637],{"class":309},"$xl-point",[56,4639,281],{"class":62},[56,4641,4642],{"class":284},"1300",[56,4644,288],{"class":62},[56,4646,4647],{"class":58,"line":166},[56,4648,323],{"emptyLinePlaceholder":322},[56,4650,4651,4654,4656],{"class":58,"line":4},[56,4652,4653],{"class":309},"$breakpoint-up",[56,4655,281],{"class":62},[56,4657,4658],{"class":62}," (\n",[56,4660,4661,4664,4667,4669,4672,4674,4677,4680,4682,4684,4687,4689],{"class":58,"line":213},[56,4662,4663],{"class":62},"  '",[56,4665,4666],{"class":80},"sm",[56,4668,1401],{"class":62},[56,4670,4671],{"class":309},": ",[56,4673,1401],{"class":62},[56,4675,4676],{"class":80},"screen and (min-width: ",[56,4678,4679],{"class":62},"#{",[56,4681,4601],{"class":309},[56,4683,1869],{"class":62},[56,4685,4686],{"class":80},"px)",[56,4688,1401],{"class":62},[56,4690,1568],{"class":62},[56,4692,4693,4695,4697,4699,4701,4703,4705,4707,4709,4711,4713,4715],{"class":58,"line":222},[56,4694,4663],{"class":62},[56,4696,4469],{"class":80},[56,4698,1401],{"class":62},[56,4700,4671],{"class":309},[56,4702,1401],{"class":62},[56,4704,4676],{"class":80},[56,4706,4679],{"class":62},[56,4708,4613],{"class":309},[56,4710,1869],{"class":62},[56,4712,4686],{"class":80},[56,4714,1401],{"class":62},[56,4716,1568],{"class":62},[56,4718,4719,4721,4724,4726,4728,4730,4732,4734,4736,4738,4740,4742],{"class":58,"line":229},[56,4720,4663],{"class":62},[56,4722,4723],{"class":80},"lg",[56,4725,1401],{"class":62},[56,4727,4671],{"class":309},[56,4729,1401],{"class":62},[56,4731,4676],{"class":80},[56,4733,4679],{"class":62},[56,4735,4625],{"class":309},[56,4737,1869],{"class":62},[56,4739,4686],{"class":80},[56,4741,1401],{"class":62},[56,4743,1568],{"class":62},[56,4745,4746,4748,4751,4753,4755,4757,4759,4761,4763,4765,4767,4769],{"class":58,"line":360},[56,4747,4663],{"class":62},[56,4749,4750],{"class":80},"xl",[56,4752,1401],{"class":62},[56,4754,4671],{"class":309},[56,4756,1401],{"class":62},[56,4758,4676],{"class":80},[56,4760,4679],{"class":62},[56,4762,4637],{"class":309},[56,4764,1869],{"class":62},[56,4766,4686],{"class":80},[56,4768,1401],{"class":62},[56,4770,1568],{"class":62},[56,4772,4773,4775,4778],{"class":58,"line":373},[56,4774,1646],{"class":62},[56,4776,4777],{"class":284}," !default",[56,4779,288],{"class":62},[56,4781,4782],{"class":58,"line":378},[56,4783,323],{"emptyLinePlaceholder":322},[56,4785,4786,4789,4791],{"class":58,"line":383},[56,4787,4788],{"class":309},"$breakpoint-down",[56,4790,281],{"class":62},[56,4792,4658],{"class":62},[56,4794,4795,4797,4799,4801,4803,4805,4808,4810,4813,4815,4817,4819,4821,4823],{"class":58,"line":394},[56,4796,4663],{"class":62},[56,4798,4666],{"class":80},[56,4800,1401],{"class":62},[56,4802,4671],{"class":309},[56,4804,1401],{"class":62},[56,4806,4807],{"class":80},"screen and (max-width: ",[56,4809,4679],{"class":62},[56,4811,4812],{"class":309},"$sm-point ",[56,4814,2413],{"class":62},[56,4816,780],{"class":284},[56,4818,1869],{"class":62},[56,4820,4686],{"class":80},[56,4822,1401],{"class":62},[56,4824,1568],{"class":62},[56,4826,4827,4829,4831,4833,4835,4837,4839,4841,4844,4846,4848,4850,4852,4854],{"class":58,"line":407},[56,4828,4663],{"class":62},[56,4830,4469],{"class":80},[56,4832,1401],{"class":62},[56,4834,4671],{"class":309},[56,4836,1401],{"class":62},[56,4838,4807],{"class":80},[56,4840,4679],{"class":62},[56,4842,4843],{"class":309},"$md-point ",[56,4845,2413],{"class":62},[56,4847,780],{"class":284},[56,4849,1869],{"class":62},[56,4851,4686],{"class":80},[56,4853,1401],{"class":62},[56,4855,1568],{"class":62},[56,4857,4858,4860,4862,4864,4866,4868,4870,4872,4875,4877,4879,4881,4883,4885],{"class":58,"line":421},[56,4859,4663],{"class":62},[56,4861,4723],{"class":80},[56,4863,1401],{"class":62},[56,4865,4671],{"class":309},[56,4867,1401],{"class":62},[56,4869,4807],{"class":80},[56,4871,4679],{"class":62},[56,4873,4874],{"class":309},"$lg-point ",[56,4876,2413],{"class":62},[56,4878,780],{"class":284},[56,4880,1869],{"class":62},[56,4882,4686],{"class":80},[56,4884,1401],{"class":62},[56,4886,1568],{"class":62},[56,4888,4889,4891,4893,4895,4897,4899,4901,4903,4906,4908,4910,4912,4914,4916],{"class":58,"line":436},[56,4890,4663],{"class":62},[56,4892,4750],{"class":80},[56,4894,1401],{"class":62},[56,4896,4671],{"class":309},[56,4898,1401],{"class":62},[56,4900,4807],{"class":80},[56,4902,4679],{"class":62},[56,4904,4905],{"class":309},"$xl-point ",[56,4907,2413],{"class":62},[56,4909,780],{"class":284},[56,4911,1869],{"class":62},[56,4913,4686],{"class":80},[56,4915,1401],{"class":62},[56,4917,1568],{"class":62},[56,4919,4920,4922,4924],{"class":58,"line":449},[56,4921,1646],{"class":62},[56,4923,4777],{"class":284},[56,4925,288],{"class":62},[56,4927,4928],{"class":58,"line":454},[56,4929,323],{"emptyLinePlaceholder":322},[56,4931,4932,4935,4937],{"class":58,"line":459},[56,4933,4934],{"class":309},"$breakpoint-only",[56,4936,281],{"class":62},[56,4938,4658],{"class":62},[56,4940,4941,4943,4945,4947,4949,4951,4953,4955,4957,4959,4961,4963,4965,4967],{"class":58,"line":468},[56,4942,4663],{"class":62},[56,4944,4666],{"class":80},[56,4946,1401],{"class":62},[56,4948,4671],{"class":309},[56,4950,1401],{"class":62},[56,4952,4807],{"class":80},[56,4954,4679],{"class":62},[56,4956,4812],{"class":309},[56,4958,2413],{"class":62},[56,4960,780],{"class":284},[56,4962,1869],{"class":62},[56,4964,4686],{"class":80},[56,4966,1401],{"class":62},[56,4968,1568],{"class":62},[56,4970,4971,4973,4976,4978,4980,4982,4984,4986,4988,4990,4992,4994,4997,4999,5001,5003,5005,5007],{"class":58,"line":482},[56,4972,4663],{"class":62},[56,4974,4975],{"class":80},"md-sm",[56,4977,1401],{"class":62},[56,4979,4671],{"class":309},[56,4981,1401],{"class":62},[56,4983,4807],{"class":80},[56,4985,4679],{"class":62},[56,4987,4843],{"class":309},[56,4989,2413],{"class":62},[56,4991,780],{"class":284},[56,4993,1869],{"class":62},[56,4995,4996],{"class":80},"px) and (min-width: ",[56,4998,4679],{"class":62},[56,5000,4601],{"class":309},[56,5002,1869],{"class":62},[56,5004,4686],{"class":80},[56,5006,1401],{"class":62},[56,5008,1568],{"class":62},[56,5010,5011,5013,5016,5018,5020,5022,5024,5026,5028,5030,5032,5034,5036,5038,5040,5042,5044,5046],{"class":58,"line":495},[56,5012,4663],{"class":62},[56,5014,5015],{"class":80},"lg-md",[56,5017,1401],{"class":62},[56,5019,4671],{"class":309},[56,5021,1401],{"class":62},[56,5023,4807],{"class":80},[56,5025,4679],{"class":62},[56,5027,4874],{"class":309},[56,5029,2413],{"class":62},[56,5031,780],{"class":284},[56,5033,1869],{"class":62},[56,5035,4996],{"class":80},[56,5037,4679],{"class":62},[56,5039,4613],{"class":309},[56,5041,1869],{"class":62},[56,5043,4686],{"class":80},[56,5045,1401],{"class":62},[56,5047,1568],{"class":62},[56,5049,5050,5052,5055,5057,5059,5061,5063,5065,5067,5069,5071,5073,5075,5077,5079,5081,5083,5085],{"class":58,"line":508},[56,5051,4663],{"class":62},[56,5053,5054],{"class":80},"xl-lg",[56,5056,1401],{"class":62},[56,5058,4671],{"class":309},[56,5060,1401],{"class":62},[56,5062,4807],{"class":80},[56,5064,4679],{"class":62},[56,5066,4905],{"class":309},[56,5068,2413],{"class":62},[56,5070,780],{"class":284},[56,5072,1869],{"class":62},[56,5074,4996],{"class":80},[56,5076,4679],{"class":62},[56,5078,4625],{"class":309},[56,5080,1869],{"class":62},[56,5082,4686],{"class":80},[56,5084,1401],{"class":62},[56,5086,1568],{"class":62},[56,5088,5089,5091,5093,5095,5097,5099,5101,5103,5105,5107,5109,5111],{"class":58,"line":520},[56,5090,4663],{"class":62},[56,5092,4750],{"class":80},[56,5094,1401],{"class":62},[56,5096,4671],{"class":309},[56,5098,1401],{"class":62},[56,5100,4676],{"class":80},[56,5102,4679],{"class":62},[56,5104,4637],{"class":309},[56,5106,1869],{"class":62},[56,5108,4686],{"class":80},[56,5110,1401],{"class":62},[56,5112,1568],{"class":62},[56,5114,5115,5117,5119],{"class":58,"line":525},[56,5116,1646],{"class":62},[56,5118,4777],{"class":284},[56,5120,288],{"class":62},[56,5122,5123],{"class":58,"line":530},[56,5124,323],{"emptyLinePlaceholder":322},[56,5126,5127],{"class":58,"line":544},[56,5128,5129],{"class":225},"\u002F*\n",[56,5131,5132],{"class":58,"line":556},[56,5133,5134],{"class":225},"sm  =>  スマホ\n",[56,5136,5137],{"class":58,"line":567},[56,5138,5139],{"class":225},"md  =>  タブレット\n",[56,5141,5142],{"class":58,"line":580},[56,5143,5144],{"class":225},"lg  =>  PC\n",[56,5146,5147],{"class":58,"line":592},[56,5148,5149],{"class":225},"xl  =>  でかいPC\n",[56,5151,5152],{"class":58,"line":611},[56,5153,5154],{"class":225},"*\u002F\n",[56,5156,5157],{"class":58,"line":616},[56,5158,323],{"emptyLinePlaceholder":322},[56,5160,5161,5164,5167,5169,5172,5174,5177,5179],{"class":58,"line":621},[56,5162,5163],{"class":1855},"@mixin",[56,5165,5166],{"class":1633}," mq-up",[56,5168,1637],{"class":62},[56,5170,5171],{"class":309},"$breakpoint",[56,5173,281],{"class":62},[56,5175,5176],{"class":309}," md",[56,5178,1646],{"class":62},[56,5180,1540],{"class":62},[56,5182,5183,5186,5189,5192,5194,5196,5198,5201,5204],{"class":58,"line":626},[56,5184,5185],{"class":1855},"  @media",[56,5187,5188],{"class":62}," #{",[56,5190,5191],{"class":1633},"map-get",[56,5193,1637],{"class":62},[56,5195,4653],{"class":309},[56,5197,1752],{"class":62},[56,5199,5200],{"class":309}," $breakpoint",[56,5202,5203],{"class":62},")}",[56,5205,1540],{"class":62},[56,5207,5208,5211],{"class":58,"line":639},[56,5209,5210],{"class":1855},"    @content",[56,5212,288],{"class":62},[56,5214,5215],{"class":58,"line":651},[56,5216,5217],{"class":62},"  }\n",[56,5219,5220],{"class":58,"line":675},[56,5221,317],{"class":62},[56,5223,5224],{"class":58,"line":687},[56,5225,323],{"emptyLinePlaceholder":322},[56,5227,5228,5230,5233,5235,5237,5239,5241,5243],{"class":58,"line":700},[56,5229,5163],{"class":1855},[56,5231,5232],{"class":1633}," mq-down",[56,5234,1637],{"class":62},[56,5236,5171],{"class":309},[56,5238,281],{"class":62},[56,5240,5176],{"class":309},[56,5242,1646],{"class":62},[56,5244,1540],{"class":62},[56,5246,5247,5249,5251,5253,5255,5257,5259,5261,5263],{"class":58,"line":711},[56,5248,5185],{"class":1855},[56,5250,5188],{"class":62},[56,5252,5191],{"class":1633},[56,5254,1637],{"class":62},[56,5256,4788],{"class":309},[56,5258,1752],{"class":62},[56,5260,5200],{"class":309},[56,5262,5203],{"class":62},[56,5264,1540],{"class":62},[56,5266,5267,5269],{"class":58,"line":723},[56,5268,5210],{"class":1855},[56,5270,288],{"class":62},[56,5272,5273],{"class":58,"line":739},[56,5274,5217],{"class":62},[56,5276,5277],{"class":58,"line":744},[56,5278,317],{"class":62},[56,5280,5281],{"class":58,"line":762},[56,5282,323],{"emptyLinePlaceholder":322},[56,5284,5285,5287,5290,5292,5294,5296,5299,5301],{"class":58,"line":773},[56,5286,5163],{"class":1855},[56,5288,5289],{"class":1633}," mq-only",[56,5291,1637],{"class":62},[56,5293,5171],{"class":309},[56,5295,281],{"class":62},[56,5297,5298],{"class":309}," md-sm",[56,5300,1646],{"class":62},[56,5302,1540],{"class":62},[56,5304,5305,5307,5309,5311,5313,5315,5317,5319,5321],{"class":58,"line":785},[56,5306,5185],{"class":1855},[56,5308,5188],{"class":62},[56,5310,5191],{"class":1633},[56,5312,1637],{"class":62},[56,5314,4934],{"class":309},[56,5316,1752],{"class":62},[56,5318,5200],{"class":309},[56,5320,5203],{"class":62},[56,5322,1540],{"class":62},[56,5324,5325,5327],{"class":58,"line":798},[56,5326,5210],{"class":1855},[56,5328,288],{"class":62},[56,5330,5331],{"class":58,"line":2078},[56,5332,5217],{"class":62},[56,5334,5335],{"class":58,"line":2124},[56,5336,317],{"class":62},[13,5338,5339],{},"実際に使用する際は以下のようにします。",[46,5341,5343],{"className":4512,"code":5342,"language":4514,"meta":51,"style":51},".test{\n    @include mq-up(xl){\n        \u002F\u002F 1300px以上で有効\n        background-color:blue;\n    }\n\n    @include mq-only(md-sm){\n        \u002F\u002F 599px〜400pxで有効\n        background-color:yellow;\n    }\n\n    \u002F\u002F 1299px ~ 600px, 399px~ で有効\n    background-color:red;\n}\n",[53,5344,5345,5354,5367,5372,5383,5388,5392,5404,5409,5419,5423,5427,5432,5443],{"__ignoreMap":51},[56,5346,5347,5349,5352],{"class":58,"line":59},[56,5348,386],{"class":62},[56,5350,5351],{"class":268},"test",[56,5353,272],{"class":62},[56,5355,5356,5359,5361,5363,5365],{"class":58,"line":101},[56,5357,5358],{"class":1855},"    @include",[56,5360,5166],{"class":1633},[56,5362,1637],{"class":62},[56,5364,4750],{"class":309},[56,5366,4565],{"class":62},[56,5368,5369],{"class":58,"line":122},[56,5370,5371],{"class":225},"        \u002F\u002F 1300px以上で有効\n",[56,5373,5374,5377,5379,5381],{"class":58,"line":156},[56,5375,5376],{"class":277},"        background-color",[56,5378,281],{"class":62},[56,5380,1784],{"class":309},[56,5382,288],{"class":62},[56,5384,5385],{"class":58,"line":166},[56,5386,5387],{"class":62},"    }\n",[56,5389,5390],{"class":58,"line":4},[56,5391,323],{"emptyLinePlaceholder":322},[56,5393,5394,5396,5398,5400,5402],{"class":58,"line":213},[56,5395,5358],{"class":1855},[56,5397,5289],{"class":1633},[56,5399,1637],{"class":62},[56,5401,4975],{"class":309},[56,5403,4565],{"class":62},[56,5405,5406],{"class":58,"line":222},[56,5407,5408],{"class":225},"        \u002F\u002F 599px〜400pxで有効\n",[56,5410,5411,5413,5415,5417],{"class":58,"line":229},[56,5412,5376],{"class":277},[56,5414,281],{"class":62},[56,5416,1757],{"class":309},[56,5418,288],{"class":62},[56,5420,5421],{"class":58,"line":360},[56,5422,5387],{"class":62},[56,5424,5425],{"class":58,"line":373},[56,5426,323],{"emptyLinePlaceholder":322},[56,5428,5429],{"class":58,"line":378},[56,5430,5431],{"class":225},"    \u002F\u002F 1299px ~ 600px, 399px~ で有効\n",[56,5433,5434,5437,5439,5441],{"class":58,"line":383},[56,5435,5436],{"class":277},"    background-color",[56,5438,281],{"class":62},[56,5440,1747],{"class":309},[56,5442,288],{"class":62},[56,5444,5445],{"class":58,"line":394},[56,5446,317],{"class":62},[13,5448,5449,5450,5453,5454,5457,5458,5461],{},"このようにメディアクエリをかなり短く記述できます。引数を指定するだけなので直感的ですし、変数でサイズを定義しているので変更もしやすいです。",[53,5451,5452],{},"mq-up","、",[53,5455,5456],{},"mq-down","はあるブレークポイント以上・以下で働くメディアクエリですが、",[53,5459,5460],{},"mq-only","は指定したメディアクエリ間のみ作用します。このメディアクエリmixinはかなり役に立ち、プロジェクトセットアップ時に毎回やっています。",[39,5463,5464],{"id":5464},"カラーパターンクラス",[13,5466,5467,5468,5471,5472,5475,5476,5479],{},"Bootstrapのボタンクラスで",[53,5469,5470],{},"btn btn-danger","とすると赤い色のボタンになります。",[53,5473,5474],{},"warning","なら黄色、",[53,5477,5478],{},"danger","なら赤色といった具合に色の設定をして、その色のクラスがあればその色にするクラスを作成するmixinです。まずは色をmapで定義します。",[46,5481,5483],{"className":4512,"code":5482,"language":4514,"meta":51,"style":51},"$colors:(\n    \"red\"   :#E60012,\n    \"orange\":#F39800,\n    \"yellow\":#FFF100,\n    \"green\" :#009944,\n    \"blue\"  :#0068B7,\n    \"purple\":#920783,\n);\n$default-color:map-get($colors,\"red\");\n",[53,5484,5485,5493,5512,5529,5546,5564,5582,5599,5604],{"__ignoreMap":51},[56,5486,5487,5490],{"class":58,"line":59},[56,5488,5489],{"class":309},"$colors",[56,5491,5492],{"class":62},":(\n",[56,5494,5495,5498,5500,5502,5505,5507,5510],{"class":58,"line":101},[56,5496,5497],{"class":62},"    \"",[56,5499,1747],{"class":80},[56,5501,77],{"class":62},[56,5503,5504],{"class":309},"   :",[56,5506,328],{"class":62},[56,5508,5509],{"class":309},"E60012",[56,5511,1568],{"class":62},[56,5513,5514,5516,5518,5520,5522,5524,5527],{"class":58,"line":122},[56,5515,5497],{"class":62},[56,5517,1775],{"class":80},[56,5519,77],{"class":62},[56,5521,281],{"class":309},[56,5523,328],{"class":62},[56,5525,5526],{"class":309},"F39800",[56,5528,1568],{"class":62},[56,5530,5531,5533,5535,5537,5539,5541,5544],{"class":58,"line":156},[56,5532,5497],{"class":62},[56,5534,1757],{"class":80},[56,5536,77],{"class":62},[56,5538,281],{"class":309},[56,5540,328],{"class":62},[56,5542,5543],{"class":309},"FFF100",[56,5545,1568],{"class":62},[56,5547,5548,5550,5552,5554,5557,5559,5562],{"class":58,"line":166},[56,5549,5497],{"class":62},[56,5551,1766],{"class":80},[56,5553,77],{"class":62},[56,5555,5556],{"class":309}," :",[56,5558,328],{"class":62},[56,5560,5561],{"class":309},"009944",[56,5563,1568],{"class":62},[56,5565,5566,5568,5570,5572,5575,5577,5580],{"class":58,"line":4},[56,5567,5497],{"class":62},[56,5569,1784],{"class":80},[56,5571,77],{"class":62},[56,5573,5574],{"class":309},"  :",[56,5576,328],{"class":62},[56,5578,5579],{"class":309},"0068B7",[56,5581,1568],{"class":62},[56,5583,5584,5586,5588,5590,5592,5594,5597],{"class":58,"line":213},[56,5585,5497],{"class":62},[56,5587,1793],{"class":80},[56,5589,77],{"class":62},[56,5591,281],{"class":309},[56,5593,328],{"class":62},[56,5595,5596],{"class":309},"920783",[56,5598,1568],{"class":62},[56,5600,5601],{"class":58,"line":222},[56,5602,5603],{"class":62},");\n",[56,5605,5606,5609,5611,5613,5615,5617,5619,5621,5623,5625],{"class":58,"line":229},[56,5607,5608],{"class":309},"$default-color",[56,5610,281],{"class":62},[56,5612,5191],{"class":1633},[56,5614,1637],{"class":62},[56,5616,5489],{"class":309},[56,5618,1752],{"class":62},[56,5620,77],{"class":62},[56,5622,1747],{"class":80},[56,5624,77],{"class":62},[56,5626,5603],{"class":62},[13,5628,5629],{},"そしてボタンのクラスがあるとします。",[46,5631,5633],{"className":4512,"code":5632,"language":4514,"meta":51,"style":51},".btn{\n    background-color:$default-color;\n    border:1px solid;\n    border-color:darken($default-color,15%);\n    border-radius:5px;\n    padding:10px;\n    text-align:center;\n\n    @each $key, $color in $colors {\n        &-#{$key}{\n            background-color:$color;\n            border-color:darken($color,15%);\n        }\n    }\n}\n",[53,5634,5635,5644,5654,5669,5690,5701,5711,5723,5727,5743,5751,5763,5782,5787,5791],{"__ignoreMap":51},[56,5636,5637,5639,5642],{"class":58,"line":59},[56,5638,386],{"class":62},[56,5640,5641],{"class":268},"btn",[56,5643,272],{"class":62},[56,5645,5646,5648,5650,5652],{"class":58,"line":101},[56,5647,5436],{"class":277},[56,5649,281],{"class":62},[56,5651,5608],{"class":309},[56,5653,288],{"class":62},[56,5655,5656,5659,5661,5664,5667],{"class":58,"line":122},[56,5657,5658],{"class":277},"    border",[56,5660,281],{"class":62},[56,5662,5663],{"class":284},"1px",[56,5665,5666],{"class":309}," solid",[56,5668,288],{"class":62},[56,5670,5671,5674,5676,5679,5681,5683,5685,5688],{"class":58,"line":156},[56,5672,5673],{"class":277},"    border-color",[56,5675,281],{"class":62},[56,5677,5678],{"class":1633},"darken",[56,5680,1637],{"class":62},[56,5682,5608],{"class":309},[56,5684,1752],{"class":62},[56,5686,5687],{"class":284},"15%",[56,5689,5603],{"class":62},[56,5691,5692,5694,5696,5699],{"class":58,"line":166},[56,5693,678],{"class":277},[56,5695,281],{"class":62},[56,5697,5698],{"class":284},"5px",[56,5700,288],{"class":62},[56,5702,5703,5705,5707,5709],{"class":58,"line":4},[56,5704,293],{"class":277},[56,5706,281],{"class":62},[56,5708,4575],{"class":284},[56,5710,288],{"class":62},[56,5712,5713,5716,5718,5721],{"class":58,"line":213},[56,5714,5715],{"class":277},"    text-align",[56,5717,281],{"class":62},[56,5719,5720],{"class":309},"center",[56,5722,288],{"class":62},[56,5724,5725],{"class":58,"line":222},[56,5726,323],{"emptyLinePlaceholder":322},[56,5728,5729,5732,5735,5738,5741],{"class":58,"line":229},[56,5730,5731],{"class":1855},"    @each",[56,5733,5734],{"class":309}," $key, $color ",[56,5736,5737],{"class":1855},"in",[56,5739,5740],{"class":309}," $colors ",[56,5742,272],{"class":62},[56,5744,5745,5748],{"class":58,"line":360},[56,5746,5747],{"class":268},"        &",[56,5749,5750],{"class":62},"-#{$key}{\n",[56,5752,5753,5756,5758,5761],{"class":58,"line":373},[56,5754,5755],{"class":277},"            background-color",[56,5757,281],{"class":62},[56,5759,5760],{"class":309},"$color",[56,5762,288],{"class":62},[56,5764,5765,5768,5770,5772,5774,5776,5778,5780],{"class":58,"line":378},[56,5766,5767],{"class":277},"            border-color",[56,5769,281],{"class":62},[56,5771,5678],{"class":1633},[56,5773,1637],{"class":62},[56,5775,5760],{"class":309},[56,5777,1752],{"class":62},[56,5779,5687],{"class":284},[56,5781,5603],{"class":62},[56,5783,5784],{"class":58,"line":383},[56,5785,5786],{"class":62},"        }\n",[56,5788,5789],{"class":58,"line":394},[56,5790,5387],{"class":62},[56,5792,5793],{"class":58,"line":407},[56,5794,317],{"class":62},[13,5796,5797],{},"こうすると",[46,5799,5801],{"className":259,"code":5800,"language":261,"meta":51,"style":51},".btn {\n  background-color: #E60012;\n  border: 1px solid;\n  border-color: #9a000c;\n  border-radius: 5px;\n  padding: 10px;\n  text-align: center; }\n  .btn-red {\n    background-color: #E60012;\n    border-color: #9a000c; }\n  .btn-orange {\n    background-color: #F39800;\n    border-color: #a76800; }\n  .btn-yellow {\n    background-color: #FFF100;\n    border-color: #b3a900; }\n  .btn-green {\n    background-color: #009944;\n    border-color: #004d22; }\n  .btn-blue {\n    background-color: #0068B7;\n    border-color: #003d6b; }\n  .btn-purple {\n    background-color: #920783;\n    border-color: #490442; }\n",[53,5802,5803,5811,5824,5838,5852,5863,5874,5890,5900,5912,5926,5935,5947,5962,5971,5983,5998,6007,6019,6034,6043,6055,6070,6079,6091],{"__ignoreMap":51},[56,5804,5805,5807,5809],{"class":58,"line":59},[56,5806,386],{"class":62},[56,5808,5641],{"class":268},[56,5810,1540],{"class":62},[56,5812,5813,5816,5818,5820,5822],{"class":58,"line":101},[56,5814,5815],{"class":277},"  background-color",[56,5817,281],{"class":62},[56,5819,667],{"class":62},[56,5821,5509],{"class":309},[56,5823,288],{"class":62},[56,5825,5826,5829,5831,5834,5836],{"class":58,"line":122},[56,5827,5828],{"class":277},"  border",[56,5830,281],{"class":62},[56,5832,5833],{"class":284}," 1px",[56,5835,5666],{"class":309},[56,5837,288],{"class":62},[56,5839,5840,5843,5845,5847,5850],{"class":58,"line":156},[56,5841,5842],{"class":277},"  border-color",[56,5844,281],{"class":62},[56,5846,667],{"class":62},[56,5848,5849],{"class":309},"9a000c",[56,5851,288],{"class":62},[56,5853,5854,5857,5859,5861],{"class":58,"line":166},[56,5855,5856],{"class":277},"  border-radius",[56,5858,281],{"class":62},[56,5860,601],{"class":284},[56,5862,288],{"class":62},[56,5864,5865,5868,5870,5872],{"class":58,"line":4},[56,5866,5867],{"class":277},"  padding",[56,5869,281],{"class":62},[56,5871,604],{"class":284},[56,5873,288],{"class":62},[56,5875,5876,5879,5881,5884,5887],{"class":58,"line":213},[56,5877,5878],{"class":277},"  text-align",[56,5880,281],{"class":62},[56,5882,5883],{"class":309}," center",[56,5885,5886],{"class":62},";",[56,5888,5889],{"class":62}," }\n",[56,5891,5892,5895,5898],{"class":58,"line":222},[56,5893,5894],{"class":62},"  .",[56,5896,5897],{"class":268},"btn-red",[56,5899,1540],{"class":62},[56,5901,5902,5904,5906,5908,5910],{"class":58,"line":229},[56,5903,5436],{"class":277},[56,5905,281],{"class":62},[56,5907,667],{"class":62},[56,5909,5509],{"class":309},[56,5911,288],{"class":62},[56,5913,5914,5916,5918,5920,5922,5924],{"class":58,"line":360},[56,5915,5673],{"class":277},[56,5917,281],{"class":62},[56,5919,667],{"class":62},[56,5921,5849],{"class":309},[56,5923,5886],{"class":62},[56,5925,5889],{"class":62},[56,5927,5928,5930,5933],{"class":58,"line":373},[56,5929,5894],{"class":62},[56,5931,5932],{"class":268},"btn-orange",[56,5934,1540],{"class":62},[56,5936,5937,5939,5941,5943,5945],{"class":58,"line":378},[56,5938,5436],{"class":277},[56,5940,281],{"class":62},[56,5942,667],{"class":62},[56,5944,5526],{"class":309},[56,5946,288],{"class":62},[56,5948,5949,5951,5953,5955,5958,5960],{"class":58,"line":383},[56,5950,5673],{"class":277},[56,5952,281],{"class":62},[56,5954,667],{"class":62},[56,5956,5957],{"class":309},"a76800",[56,5959,5886],{"class":62},[56,5961,5889],{"class":62},[56,5963,5964,5966,5969],{"class":58,"line":394},[56,5965,5894],{"class":62},[56,5967,5968],{"class":268},"btn-yellow",[56,5970,1540],{"class":62},[56,5972,5973,5975,5977,5979,5981],{"class":58,"line":407},[56,5974,5436],{"class":277},[56,5976,281],{"class":62},[56,5978,667],{"class":62},[56,5980,5543],{"class":309},[56,5982,288],{"class":62},[56,5984,5985,5987,5989,5991,5994,5996],{"class":58,"line":421},[56,5986,5673],{"class":277},[56,5988,281],{"class":62},[56,5990,667],{"class":62},[56,5992,5993],{"class":309},"b3a900",[56,5995,5886],{"class":62},[56,5997,5889],{"class":62},[56,5999,6000,6002,6005],{"class":58,"line":436},[56,6001,5894],{"class":62},[56,6003,6004],{"class":268},"btn-green",[56,6006,1540],{"class":62},[56,6008,6009,6011,6013,6015,6017],{"class":58,"line":449},[56,6010,5436],{"class":277},[56,6012,281],{"class":62},[56,6014,667],{"class":62},[56,6016,5561],{"class":309},[56,6018,288],{"class":62},[56,6020,6021,6023,6025,6027,6030,6032],{"class":58,"line":454},[56,6022,5673],{"class":277},[56,6024,281],{"class":62},[56,6026,667],{"class":62},[56,6028,6029],{"class":309},"004d22",[56,6031,5886],{"class":62},[56,6033,5889],{"class":62},[56,6035,6036,6038,6041],{"class":58,"line":459},[56,6037,5894],{"class":62},[56,6039,6040],{"class":268},"btn-blue",[56,6042,1540],{"class":62},[56,6044,6045,6047,6049,6051,6053],{"class":58,"line":468},[56,6046,5436],{"class":277},[56,6048,281],{"class":62},[56,6050,667],{"class":62},[56,6052,5579],{"class":309},[56,6054,288],{"class":62},[56,6056,6057,6059,6061,6063,6066,6068],{"class":58,"line":482},[56,6058,5673],{"class":277},[56,6060,281],{"class":62},[56,6062,667],{"class":62},[56,6064,6065],{"class":309},"003d6b",[56,6067,5886],{"class":62},[56,6069,5889],{"class":62},[56,6071,6072,6074,6077],{"class":58,"line":495},[56,6073,5894],{"class":62},[56,6075,6076],{"class":268},"btn-purple",[56,6078,1540],{"class":62},[56,6080,6081,6083,6085,6087,6089],{"class":58,"line":508},[56,6082,5436],{"class":277},[56,6084,281],{"class":62},[56,6086,667],{"class":62},[56,6088,5596],{"class":309},[56,6090,288],{"class":62},[56,6092,6093,6095,6097,6099,6102,6104],{"class":58,"line":520},[56,6094,5673],{"class":277},[56,6096,281],{"class":62},[56,6098,667],{"class":62},[56,6100,6101],{"class":309},"490442",[56,6103,5886],{"class":62},[56,6105,5889],{"class":62},[13,6107,6108],{},"それぞれの色パターンのボタンクラスができました。実際に適用してみると以下の通りです。",[17,6110],{":src":6111},"'useful-sass-mixins\u002Fsch2021-06-28 22.50.04.png'",[13,6113,6114],{},"mapとeachを使うとカラーパターンのクラスを簡単に実装できます。",[2925,6116,6117],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}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 .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}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 .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}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 pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}",{"title":51,"searchDepth":122,"depth":122,"links":6119},[6120,6121],{"id":4506,"depth":101,"text":4506},{"id":5464,"depth":101,"text":5464},[6123],"ministack","2021-06-28","設定しておきたいmixinと記述週",{},"\u002Farticles\u002Fuseful-sass-mixins",{"title":4481,"description":6125},"articles\u002Fuseful-sass-mixins",[261],"useful-sass-mixins\u002Fthumbnail.png","ZczNQ4FtkqMbeh7MFTHHTJ3BRi4RWjEA8rwabquN6pI",{"id":6134,"title":6135,"body":6136,"category":6679,"createdAt":6680,"description":6681,"extension":4469,"index":4470,"meta":6682,"navigation":322,"path":6683,"publish":322,"seo":6684,"series":4470,"seriesTitle":4470,"stem":6685,"tag":6686,"thumbnail":6687,"updatedAt":4470,"__hash__":6688},"articles\u002Farticles\u002Fbag-html-break-tag.md","white-space： pre;で要素内で生じる文章の隙間、インテンドの原因。",{"type":10,"value":6137,"toc":6677},[6138,6145,6148,6151,6333,6347,6361,6369,6494,6500,6503,6506,6668,6674],[13,6139,6140,6141,6144],{},"こんにちはjunです。ある日、vue.jsを使用して",[53,6142,6143],{},"textarea","の中の文章をリアルタイムにレンダーするような機能を実装しました。その時、改行文章に謎のインテンドが入り、困りました。こんな感じです。",[17,6146],{":src":6147,":width":827,":center":828},"'_mix\u002Fsch-2021-05-04 21.53.14.png'",[13,6149,6150],{},"ソースは以下の感じ（かなり簡略化してます。）",[46,6152,6156],{"className":6153,"code":6154,"language":6155,"meta":51,"style":51},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n\u003Cdiv>\n    \u003Cdiv style=\"white-space:pre;\">\n        {{test}}\n        \u003Ctextarea v-model=\"test\"cols=\"30\" rows=\"10\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nexport default {\n    data(){\n        return{\n            test:''\n        }\n    }\n}\n\u003C\u002Fscript>\n","vue",[53,6157,6158,6167,6175,6194,6199,6246,6254,6262,6270,6278,6288,6296,6303,6313,6317,6321,6325],{"__ignoreMap":51},[56,6159,6160,6162,6165],{"class":58,"line":59},[56,6161,63],{"class":62},[56,6163,6164],{"class":66},"template",[56,6166,98],{"class":62},[56,6168,6169,6171,6173],{"class":58,"line":101},[56,6170,63],{"class":62},[56,6172,67],{"class":66},[56,6174,98],{"class":62},[56,6176,6177,6179,6181,6183,6185,6187,6190,6192],{"class":58,"line":122},[56,6178,104],{"class":62},[56,6180,67],{"class":66},[56,6182,935],{"class":70},[56,6184,74],{"class":62},[56,6186,77],{"class":62},[56,6188,6189],{"class":80},"white-space:pre;",[56,6191,77],{"class":62},[56,6193,98],{"class":62},[56,6195,6196],{"class":58,"line":156},[56,6197,6198],{"class":309},"        {{test}}\n",[56,6200,6201,6203,6205,6208,6210,6212,6214,6216,6219,6221,6223,6226,6228,6231,6233,6235,6238,6240,6242,6244],{"class":58,"line":166},[56,6202,125],{"class":62},[56,6204,6143],{"class":66},[56,6206,6207],{"class":70}," v-model",[56,6209,74],{"class":62},[56,6211,77],{"class":62},[56,6213,5351],{"class":80},[56,6215,77],{"class":62},[56,6217,6218],{"class":70},"cols",[56,6220,74],{"class":62},[56,6222,77],{"class":62},[56,6224,6225],{"class":80},"30",[56,6227,77],{"class":62},[56,6229,6230],{"class":70}," rows",[56,6232,74],{"class":62},[56,6234,77],{"class":62},[56,6236,6237],{"class":80},"10",[56,6239,77],{"class":62},[56,6241,947],{"class":62},[56,6243,6143],{"class":66},[56,6245,98],{"class":62},[56,6247,6248,6250,6252],{"class":58,"line":4},[56,6249,159],{"class":62},[56,6251,67],{"class":66},[56,6253,98],{"class":62},[56,6255,6256,6258,6260],{"class":58,"line":213},[56,6257,232],{"class":62},[56,6259,67],{"class":66},[56,6261,98],{"class":62},[56,6263,6264,6266,6268],{"class":58,"line":222},[56,6265,232],{"class":62},[56,6267,6164],{"class":66},[56,6269,98],{"class":62},[56,6271,6272,6274,6276],{"class":58,"line":229},[56,6273,63],{"class":62},[56,6275,1440],{"class":66},[56,6277,98],{"class":62},[56,6279,6280,6283,6286],{"class":58,"line":360},[56,6281,6282],{"class":1855},"export",[56,6284,6285],{"class":1855}," default",[56,6287,1540],{"class":62},[56,6289,6290,6293],{"class":58,"line":373},[56,6291,6292],{"class":66},"    data",[56,6294,6295],{"class":62},"(){\n",[56,6297,6298,6301],{"class":58,"line":378},[56,6299,6300],{"class":1855},"        return",[56,6302,272],{"class":62},[56,6304,6305,6308,6310],{"class":58,"line":383},[56,6306,6307],{"class":66},"            test",[56,6309,281],{"class":62},[56,6311,6312],{"class":62},"''\n",[56,6314,6315],{"class":58,"line":394},[56,6316,5786],{"class":62},[56,6318,6319],{"class":58,"line":407},[56,6320,5387],{"class":62},[56,6322,6323],{"class":58,"line":421},[56,6324,317],{"class":62},[56,6326,6327,6329,6331],{"class":58,"line":436},[56,6328,232],{"class":62},[56,6330,1440],{"class":66},[56,6332,98],{"class":62},[13,6334,6335,6336,6339,6340,6343,6344,6346],{},"とても簡単で",[53,6337,6338],{},"v-model","を使用してその",[53,6341,6342],{},"data()","を表示してあるだけです。そしてCSSでは",[53,6345,6189],{},"を指定して、改行コードが存在したらそこで改行するようにします。",[67,6348,6352,6353],{"className":6349},[6350,6351],"alert","alert-success","\nCSS の white-space プロパティは、要素内のホワイトスペースをどのように扱うかを設定します。\n",[6354,6355,6356],"small",{},[31,6357,6360],{"href":6358,"target":6359},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002Fwhite-space","_blank","mozilla.org",[13,6362,6363,6364,6368],{},"ただし上図のように謎のインテンドが最初の改行にあります。なぜ生じしてしまうのかを調べたところ、 ",[6365,6366,6367],"strong",{},"エディター上でのインテンド"," が原因でした。以下のようにファイルを直してみます。",[46,6370,6372],{"className":6153,"code":6371,"language":6155,"meta":51,"style":51},"\u003Ctemplate>\n\u003Cdiv>\n    \u003Cdiv style=\"white-space:pre;\">\n{{test}}\n        \u003Ctextarea v-model=\"test\"cols=\"30\" rows=\"10\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003C\u002Fscript>\n",[53,6373,6374,6382,6390,6408,6413,6455,6463,6471,6479,6483],{"__ignoreMap":51},[56,6375,6376,6378,6380],{"class":58,"line":59},[56,6377,63],{"class":62},[56,6379,6164],{"class":66},[56,6381,98],{"class":62},[56,6383,6384,6386,6388],{"class":58,"line":101},[56,6385,63],{"class":62},[56,6387,67],{"class":66},[56,6389,98],{"class":62},[56,6391,6392,6394,6396,6398,6400,6402,6404,6406],{"class":58,"line":122},[56,6393,104],{"class":62},[56,6395,67],{"class":66},[56,6397,935],{"class":70},[56,6399,74],{"class":62},[56,6401,77],{"class":62},[56,6403,6189],{"class":80},[56,6405,77],{"class":62},[56,6407,98],{"class":62},[56,6409,6410],{"class":58,"line":156},[56,6411,6412],{"class":309},"{{test}}\n",[56,6414,6415,6417,6419,6421,6423,6425,6427,6429,6431,6433,6435,6437,6439,6441,6443,6445,6447,6449,6451,6453],{"class":58,"line":166},[56,6416,125],{"class":62},[56,6418,6143],{"class":66},[56,6420,6207],{"class":70},[56,6422,74],{"class":62},[56,6424,77],{"class":62},[56,6426,5351],{"class":80},[56,6428,77],{"class":62},[56,6430,6218],{"class":70},[56,6432,74],{"class":62},[56,6434,77],{"class":62},[56,6436,6225],{"class":80},[56,6438,77],{"class":62},[56,6440,6230],{"class":70},[56,6442,74],{"class":62},[56,6444,77],{"class":62},[56,6446,6237],{"class":80},[56,6448,77],{"class":62},[56,6450,947],{"class":62},[56,6452,6143],{"class":66},[56,6454,98],{"class":62},[56,6456,6457,6459,6461],{"class":58,"line":4},[56,6458,159],{"class":62},[56,6460,67],{"class":66},[56,6462,98],{"class":62},[56,6464,6465,6467,6469],{"class":58,"line":213},[56,6466,232],{"class":62},[56,6468,67],{"class":66},[56,6470,98],{"class":62},[56,6472,6473,6475,6477],{"class":58,"line":222},[56,6474,232],{"class":62},[56,6476,6164],{"class":66},[56,6478,98],{"class":62},[56,6480,6481],{"class":58,"line":229},[56,6482,323],{"emptyLinePlaceholder":322},[56,6484,6485,6487,6490,6492],{"class":58,"line":360},[56,6486,63],{"class":62},[56,6488,6489],{"class":309},"\u002F",[56,6491,1440],{"class":66},[56,6493,98],{"class":62},[13,6495,6496,6499],{},[53,6497,6498],{},"{{text}}","の箇所を一番左につけることでなぜか、改行の際のインテンドがなくなりました。",[17,6501],{":src":6502,":width":827,":center":828},"'_mix\u002Fsch-2021-05-04 22.01.03.png'",[13,6504,6505],{},"またはこのようにタグを改行させず、一行内に書くことでも解決できます。",[46,6507,6509],{"className":6153,"code":6508,"language":6155,"meta":51,"style":51},"\u003Ctemplate>\n\u003Cdiv>\n    \u003Cdiv style=\"white-space:pre;\">{{test}}\u003C\u002Fdiv>\n    \u003Ctextarea v-model=\"test\"cols=\"30\" rows=\"10\">\u003C\u002Ftextarea>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nexport default {\n    data(){\n        return{\n            test:''\n        }\n    }\n}\n\u003C\u002Fscript>\n",[53,6510,6511,6519,6527,6554,6596,6604,6612,6620,6628,6634,6640,6648,6652,6656,6660],{"__ignoreMap":51},[56,6512,6513,6515,6517],{"class":58,"line":59},[56,6514,63],{"class":62},[56,6516,6164],{"class":66},[56,6518,98],{"class":62},[56,6520,6521,6523,6525],{"class":58,"line":101},[56,6522,63],{"class":62},[56,6524,67],{"class":66},[56,6526,98],{"class":62},[56,6528,6529,6531,6533,6535,6537,6539,6541,6543,6545,6548,6550,6552],{"class":58,"line":122},[56,6530,104],{"class":62},[56,6532,67],{"class":66},[56,6534,935],{"class":70},[56,6536,74],{"class":62},[56,6538,77],{"class":62},[56,6540,6189],{"class":80},[56,6542,77],{"class":62},[56,6544,1256],{"class":62},[56,6546,6547],{"class":309},"{{test}}",[56,6549,232],{"class":62},[56,6551,67],{"class":66},[56,6553,98],{"class":62},[56,6555,6556,6558,6560,6562,6564,6566,6568,6570,6572,6574,6576,6578,6580,6582,6584,6586,6588,6590,6592,6594],{"class":58,"line":156},[56,6557,104],{"class":62},[56,6559,6143],{"class":66},[56,6561,6207],{"class":70},[56,6563,74],{"class":62},[56,6565,77],{"class":62},[56,6567,5351],{"class":80},[56,6569,77],{"class":62},[56,6571,6218],{"class":70},[56,6573,74],{"class":62},[56,6575,77],{"class":62},[56,6577,6225],{"class":80},[56,6579,77],{"class":62},[56,6581,6230],{"class":70},[56,6583,74],{"class":62},[56,6585,77],{"class":62},[56,6587,6237],{"class":80},[56,6589,77],{"class":62},[56,6591,947],{"class":62},[56,6593,6143],{"class":66},[56,6595,98],{"class":62},[56,6597,6598,6600,6602],{"class":58,"line":166},[56,6599,232],{"class":62},[56,6601,67],{"class":66},[56,6603,98],{"class":62},[56,6605,6606,6608,6610],{"class":58,"line":4},[56,6607,232],{"class":62},[56,6609,6164],{"class":66},[56,6611,98],{"class":62},[56,6613,6614,6616,6618],{"class":58,"line":213},[56,6615,63],{"class":62},[56,6617,1440],{"class":66},[56,6619,98],{"class":62},[56,6621,6622,6624,6626],{"class":58,"line":222},[56,6623,6282],{"class":1855},[56,6625,6285],{"class":1855},[56,6627,1540],{"class":62},[56,6629,6630,6632],{"class":58,"line":229},[56,6631,6292],{"class":66},[56,6633,6295],{"class":62},[56,6635,6636,6638],{"class":58,"line":360},[56,6637,6300],{"class":1855},[56,6639,272],{"class":62},[56,6641,6642,6644,6646],{"class":58,"line":373},[56,6643,6307],{"class":66},[56,6645,281],{"class":62},[56,6647,6312],{"class":62},[56,6649,6650],{"class":58,"line":378},[56,6651,5786],{"class":62},[56,6653,6654],{"class":58,"line":383},[56,6655,5387],{"class":62},[56,6657,6658],{"class":58,"line":394},[56,6659,317],{"class":62},[56,6661,6662,6664,6666],{"class":58,"line":407},[56,6663,232],{"class":62},[56,6665,1440],{"class":66},[56,6667,98],{"class":62},[13,6669,6670,6671,6673],{},"なぜ",[53,6672,6189],{},"で謎インテンドが生じてしまうのかわかりませんが、改行コードが入る箇所をエディターで整形する際は気をつけたほうがいいかもしれません。",[2925,6675,6676],{},"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 .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--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);}",{"title":51,"searchDepth":122,"depth":122,"links":6678},[],[6123],"2021-05-24","white-space： pre;で要素内で生じる、文章の隙間、インテンドの原因。",{},"\u002Farticles\u002Fbag-html-break-tag",{"title":6135,"description":6681},"articles\u002Fbag-html-break-tag",[50,261,6155],"_mix\u002Fsch-2021-05-04 21.53.14.png","Uglb2nJDSJTaiJVJS_4tGrhobJMBKtzio_BSkBLsen0",{"id":6690,"title":6691,"body":6692,"category":7109,"createdAt":7110,"description":6691,"extension":4469,"index":4470,"meta":7111,"navigation":322,"path":7112,"publish":322,"seo":7113,"series":4470,"seriesTitle":4470,"stem":7114,"tag":7115,"thumbnail":7116,"updatedAt":4470,"__hash__":7117},"articles\u002Farticles\u002Fbootstrap-vue-asset-save.md","bootstrap-vue,iconのバンドルを減らす。開発時に気をつけたいbootstrap-vueの使い方",{"type":10,"value":6693,"toc":7099},[6694,6697,6700,6703,6706,6735,6738,6741,6750,6795,6802,6809,6915,6922,6925,6935,7027,7030,7033,7040,7069,7076,7080,7083,7086,7093,7096],[13,6695,6696],{},"こんにちはjunです。Nuxt.js or Vue.js x Bootstrap-vue の構成を使って管理画面UIを作成する機会が多く、それらの融合性や使いやすさに虜になっています。しかしやけにビルドの時間がかかるなーと思っていたら、なんとバンドルサイズが1MBを超いたという事実に気付き、慌てて対処しました。（他のライブラリもあります）",[13,6698,6699],{},"今回はそのbootstrap-vueを使ったアプリのバンドルサイズを減らす方法として、開発時から気をつけたいことについて述べます。",[39,6701,6702],{"id":6702},"そのままいれるな",[13,6704,6705],{},"ドキュメントの最初の方にある通り、bootstrap-vueとboo-strap-iconを以下のようにいれるとかなりサイズを食います。",[46,6707,6709],{"className":1495,"code":6708,"language":1497,"meta":51,"style":51},"import Vue from 'vue'\nimport { BootstrapVue, IconsPlugin } from 'bootstrap-vue';\n\nVue.use(BootstrapVue);\nVue.use(IconsPlugin);\n",[53,6710,6711,6716,6721,6725,6730],{"__ignoreMap":51},[56,6712,6713],{"class":58,"line":59},[56,6714,6715],{},"import Vue from 'vue'\n",[56,6717,6718],{"class":58,"line":101},[56,6719,6720],{},"import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';\n",[56,6722,6723],{"class":58,"line":122},[56,6724,323],{"emptyLinePlaceholder":322},[56,6726,6727],{"class":58,"line":156},[56,6728,6729],{},"Vue.use(BootstrapVue);\n",[56,6731,6732],{"class":58,"line":166},[56,6733,6734],{},"Vue.use(IconsPlugin);\n",[13,6736,6737],{},"理由はnode_modulesのBootstrap-vueの全てを入れているためです。別に全てのbootstrapモジュールを使用しているならば問題ありませんが、基本的にそんな状況はないと思います。importでモジュールを読み込む時は原則、必要なものだけインポートして置くことがベストです。それを意識するだけでも自然とバンドルサイズが小さくなります。",[39,6739,6740],{"id":6740},"必要なものだけ指定する",[13,6742,6743,6744,6749],{},"やり方は",[31,6745,6748],{"href":6746,"rel":6747},"https:\u002F\u002Fbootstrap-vue.org\u002Fdocs#vue-cli-3",[35],"公式ドキュメント","にもありますが、必要なコンポーネントだけ使用する場合は以下のようにします。",[46,6751,6754],{"className":1495,"code":6752,"filename":6753,"language":1497,"meta":51,"style":51},"import {  \n    BButton,BSpinner,BTable,BAlert\n} from 'bootstrap-vue';\n\nVue.component('b-button',BButton);\nVue.component('b-spinner',BSpinner);\nVue.component('b-table',BTable);\nVue.component('b-alert',BAlert);\n","parent.js",[53,6755,6756,6761,6766,6771,6775,6780,6785,6790],{"__ignoreMap":51},[56,6757,6758],{"class":58,"line":59},[56,6759,6760],{},"import {  \n",[56,6762,6763],{"class":58,"line":101},[56,6764,6765],{},"    BButton,BSpinner,BTable,BAlert\n",[56,6767,6768],{"class":58,"line":122},[56,6769,6770],{},"} from 'bootstrap-vue';\n",[56,6772,6773],{"class":58,"line":156},[56,6774,323],{"emptyLinePlaceholder":322},[56,6776,6777],{"class":58,"line":166},[56,6778,6779],{},"Vue.component('b-button',BButton);\n",[56,6781,6782],{"class":58,"line":4},[56,6783,6784],{},"Vue.component('b-spinner',BSpinner);\n",[56,6786,6787],{"class":58,"line":213},[56,6788,6789],{},"Vue.component('b-table',BTable);\n",[56,6791,6792],{"class":58,"line":222},[56,6793,6794],{},"Vue.component('b-alert',BAlert);\n",[13,6796,6797,6798,6801],{},"上記はapp.jsのような元締めのファイルでグローバルコンポーネントとして登録する場合です。こうすれば配下のファイルで",[53,6799,6800],{},"\u003Cb-badge>\u003C\u002Fb-badge>","という風に使用できます。",[13,6803,6804,6805,6808],{},"グローバルでなく、局所的に単体のvueファイルで使用したい場合は",[53,6806,6807],{},"Vue.component()","でなく、そのvueファイルにいて以下のようにします。",[46,6810,6813],{"className":6153,"code":6811,"filename":6812,"language":6155,"meta":51,"style":51},"\u003Ctemplate>\n  \u003CBButton variant=\"danger\">Clikc\u003C\u002FBButton>\n\u003C\u002Ftemplate>\n\nimport { BButton } from 'bootstrap-vue';\n\u003Cscript>\nexport default{\n  components:{\n    BButton\n  }\n}\n\u003C\u002Fscript>\n","child.vue",[53,6814,6815,6823,6853,6861,6865,6870,6878,6886,6894,6899,6903,6907],{"__ignoreMap":51},[56,6816,6817,6819,6821],{"class":58,"line":59},[56,6818,63],{"class":62},[56,6820,6164],{"class":66},[56,6822,98],{"class":62},[56,6824,6825,6828,6831,6834,6836,6838,6840,6842,6844,6847,6849,6851],{"class":58,"line":101},[56,6826,6827],{"class":62},"  \u003C",[56,6829,6830],{"class":66},"BButton",[56,6832,6833],{"class":70}," variant",[56,6835,74],{"class":62},[56,6837,77],{"class":62},[56,6839,5478],{"class":80},[56,6841,77],{"class":62},[56,6843,1256],{"class":62},[56,6845,6846],{"class":309},"Clikc",[56,6848,232],{"class":62},[56,6850,6830],{"class":66},[56,6852,98],{"class":62},[56,6854,6855,6857,6859],{"class":58,"line":122},[56,6856,232],{"class":62},[56,6858,6164],{"class":66},[56,6860,98],{"class":62},[56,6862,6863],{"class":58,"line":156},[56,6864,323],{"emptyLinePlaceholder":322},[56,6866,6867],{"class":58,"line":166},[56,6868,6869],{"class":309},"import { BButton } from 'bootstrap-vue';\n",[56,6871,6872,6874,6876],{"class":58,"line":4},[56,6873,63],{"class":62},[56,6875,1440],{"class":66},[56,6877,98],{"class":62},[56,6879,6880,6882,6884],{"class":58,"line":213},[56,6881,6282],{"class":70},[56,6883,6285],{"class":1855},[56,6885,272],{"class":62},[56,6887,6888,6891],{"class":58,"line":222},[56,6889,6890],{"class":268},"  components",[56,6892,6893],{"class":62},":{\n",[56,6895,6896],{"class":58,"line":229},[56,6897,6898],{"class":309},"    BButton\n",[56,6900,6901],{"class":58,"line":360},[56,6902,5217],{"class":62},[56,6904,6905],{"class":58,"line":373},[56,6906,317],{"class":62},[56,6908,6909,6911,6913],{"class":58,"line":378},[56,6910,232],{"class":62},[56,6912,1440],{"class":66},[56,6914,98],{"class":62},[13,6916,6917,6918,6921],{},"グローバルでやっていたものを",[53,6919,6920],{},"components","配下で入れてあげるだけです。",[806,6923,6924],{"id":6924},"アイコンも同様",[13,6926,6927,6928,6931,6932,6934],{},"アイコンが豊富な故にサイズも大きいです。",[53,6929,6930],{},"Vue.use(IconsPlugin);","とすると全てのアイコンがインポートされるので、これも以下のように",[53,6933,6920],{},"で使用します。",[46,6936,6938],{"className":6153,"code":6937,"language":6155,"meta":51,"style":51},"\u003Ctemplate>\n  \u003CBIconXCircleFill variant=\"danger\">\n\u003C\u002Ftemplate>\n\nimport { BIconXCircleFill } from 'bootstrap-vue';\n\u003Cscript>\nexport default{\n  components:{\n    BIconXCircleFill\n  }\n}\n\u003C\u002Fscript>\n",[53,6939,6940,6948,6967,6975,6979,6984,6992,7000,7006,7011,7015,7019],{"__ignoreMap":51},[56,6941,6942,6944,6946],{"class":58,"line":59},[56,6943,63],{"class":62},[56,6945,6164],{"class":66},[56,6947,98],{"class":62},[56,6949,6950,6952,6955,6957,6959,6961,6963,6965],{"class":58,"line":101},[56,6951,6827],{"class":62},[56,6953,6954],{"class":66},"BIconXCircleFill",[56,6956,6833],{"class":70},[56,6958,74],{"class":62},[56,6960,77],{"class":62},[56,6962,5478],{"class":80},[56,6964,77],{"class":62},[56,6966,98],{"class":62},[56,6968,6969,6971,6973],{"class":58,"line":122},[56,6970,232],{"class":62},[56,6972,6164],{"class":66},[56,6974,98],{"class":62},[56,6976,6977],{"class":58,"line":156},[56,6978,323],{"emptyLinePlaceholder":322},[56,6980,6981],{"class":58,"line":166},[56,6982,6983],{"class":309},"import { BIconXCircleFill } from 'bootstrap-vue';\n",[56,6985,6986,6988,6990],{"class":58,"line":4},[56,6987,63],{"class":62},[56,6989,1440],{"class":66},[56,6991,98],{"class":62},[56,6993,6994,6996,6998],{"class":58,"line":213},[56,6995,6282],{"class":70},[56,6997,6285],{"class":1855},[56,6999,272],{"class":62},[56,7001,7002,7004],{"class":58,"line":222},[56,7003,6890],{"class":268},[56,7005,6893],{"class":62},[56,7007,7008],{"class":58,"line":229},[56,7009,7010],{"class":309},"    BIconXCircleFill\n",[56,7012,7013],{"class":58,"line":360},[56,7014,5217],{"class":62},[56,7016,7017],{"class":58,"line":373},[56,7018,317],{"class":62},[56,7020,7021,7023,7025],{"class":58,"line":378},[56,7022,232],{"class":62},[56,7024,1440],{"class":66},[56,7026,98],{"class":62},[13,7028,7029],{},"アイコンはグローバルに登録するよりも、必要になったら都度入れとく方がいいです。",[39,7031,7032],{"id":7032},"適宜必要なモジュールを入れる",[13,7034,7035,7036,7039],{},"BadgeやButtonは上記のような",[53,7037,7038],{},"Vue.commponent","で十分ですが、ModalやCollapseは追加のプラグインなどが必要です。例えばModalは以下のモジュールをセットしておく必要があります。",[46,7041,7043],{"className":1495,"code":7042,"language":1497,"meta":51,"style":51},"import { BModal,VBModal,ModalPlugin } from 'bootstrap-vue';\n\nVue.use(ModalPlugin);\nVue.component('b-modal',BModal);\nVue.directive('b-modal', VBModal)\n",[53,7044,7045,7050,7054,7059,7064],{"__ignoreMap":51},[56,7046,7047],{"class":58,"line":59},[56,7048,7049],{},"import { BModal,VBModal,ModalPlugin } from 'bootstrap-vue';\n",[56,7051,7052],{"class":58,"line":101},[56,7053,323],{"emptyLinePlaceholder":322},[56,7055,7056],{"class":58,"line":122},[56,7057,7058],{},"Vue.use(ModalPlugin);\n",[56,7060,7061],{"class":58,"line":156},[56,7062,7063],{},"Vue.component('b-modal',BModal);\n",[56,7065,7066],{"class":58,"line":166},[56,7067,7068],{},"Vue.directive('b-modal', VBModal)\n",[13,7070,7071,7072,7075],{},"こうすることでModalのコンポーネントや",[53,7073,7074],{},"this.$bvModal.show('select-file-modal');","のようなディレクティブや動きを実装できます。",[806,7077,7079],{"id":7078},"どこにかいてある","どこにかいてある？",[13,7081,7082],{},"それぞのコンポーネントのドキュメントの最後の方にある、Component referenceにあります。さらにいうとその下のImporting individual componentsに詳しく、依存関係が書いてあるのでその通りにインポートしてあげましょう。",[39,7084,7085],{"id":7085},"開発時初期から個別インポートを考える",[13,7087,7088,7089,7092],{},"もしこれに気づかず後から単体読み込みにしようと思ったら大変なことになります。 ",[6365,7090,7091],{},"必要なコンポーネントの洗い出しとそのチェックが必要になるからです。"," ファイル検索でなんとからならくもないですが、後からの修正はかなり大変です。",[13,7094,7095],{},"であれば最初から個別のインポートで行っていくほうが、必要になった時にエラーで教えてくれるので対処がしやすいです。端末の性能や通信速度が上がっているとはいえ、まだ1Mを超えるのは気が引けます。塵も積もれば山となる精神で不要なインポートは避けましょう。",[2925,7097,7098],{},"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 .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 .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}",{"title":51,"searchDepth":122,"depth":122,"links":7100},[7101,7102,7105,7108],{"id":6702,"depth":101,"text":6702},{"id":6740,"depth":101,"text":6740,"children":7103},[7104],{"id":6924,"depth":122,"text":6924},{"id":7032,"depth":101,"text":7032,"children":7106},[7107],{"id":7078,"depth":122,"text":7079},{"id":7085,"depth":101,"text":7085},[6123],"2021-03-29",{},"\u002Farticles\u002Fbootstrap-vue-asset-save",{"title":6691,"description":6691},"articles\u002Fbootstrap-vue-asset-save",[261,6155],"_mix\u002Fsch-2021-03-29-22.48.45.png","eqyqBM0LwYz49ZyHXkO-fsX2wiHR3pqkEe-fvzvZ4Hg",{"id":7119,"title":7120,"body":7121,"category":8101,"createdAt":8102,"description":7120,"extension":4469,"index":4470,"meta":8103,"navigation":322,"path":8104,"publish":322,"seo":8105,"series":4470,"seriesTitle":4470,"stem":8106,"tag":8107,"thumbnail":8108,"updatedAt":4470,"__hash__":8109},"articles\u002Farticles\u002Frecent-card-css.md","イマドキな丸角・正方形・画像カードデザインのレイアウトをCSSで実現させる。",{"type":10,"value":7122,"toc":8098},[7123,7132,7135,7138,7162,7170,7173,7176,8095],[13,7124,7125,7126,7131],{},"こんにちは jun です。カードデザイン（参考：",[31,7127,7130],{"href":7128,"rel":7129},"http:\u002F\u002Fpinterest.jp\u002F",[35],"pinterest","）に近いコンポーネントを作った時に意外と詰まって時間かけてしまったので忘備録として残します。実際に↓に作りました。（レスポンシブでない）",[39,7133,7134],{"id":7134},"コンポーネント要件",[13,7136,7137],{},"コンポーネントの要件としては以下の通りです。",[7139,7140,7141,7144,7147,7150,7153,7156,7159],"ul",{},[3044,7142,7143],{},"正方形",[3044,7145,7146],{},"丸角",[3044,7148,7149],{},"画像が表示される。",[3044,7151,7152],{},"PCでは３列、タブレットは２列、スマホは１列を維持する",[3044,7154,7155],{},"端（コンテナー の境界）はくっつける。",[3044,7157,7158],{},"1remほど隙間は開ける",[3044,7160,7161],{},"ホバー時に背景画像がぐわっ！と迫ってくる",[13,7163,7164,7165,7169],{},"完成したものは",[31,7166,36],{"href":7167,"rel":7168},"http:\u002F\u002Fapp.jun-app.com\u002Fcard-css\u002F",[35],"のページに置いてあります。画像は以下の通りです。",[17,7171],{":src":7172,":width":20},"'_mix\u002Fsch-2021-04-25 22.19.26.png'",[13,7174,7175],{},"コードはこちら",[46,7177,7179],{"className":48,"code":7178,"language":50,"meta":51,"style":51},"\u003Cstyle>\n    *{\n        box-sizing: border-box;\n    }\n    html{\n        font-size: 10px;\n    }\n    .p-the-container{\n        width: 100%;\n    }\n\n    .p-the-wrapper{\n        display: flex;\n        flex-wrap: wrap;\n        margin: 0 -1rem;         \u002F* p-img-card の paddingと同じ *\u002F\n    }\n\n    .p-img-card{\n        width: 33.3%;\n        width: 33.3%;\n\n        padding: 1rem;          \u002F* 隙間の太さになる *\u002F\n        margin-bottom: 2rem;    \u002F* 下側の隙間の太さ *\u002F\n\n        position: relative;\n        overflow: hidden;\n        cursor: pointer;\n    }\n\n    .p-img-card::before{\n        content: '';\n        display: block;\n        padding-top: 100%;      \u002F*正方形にするおまじない*\u002F\n    }\n\n    .p-img-card-wrapper{\n        display: block;\n        width: calc(100% - 2rem);  \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n        height: calc(100% - 2rem); \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n        position: absolute;\n        top: 1rem;　　　　　　　　　　\u002F* 位置もカードのpaddingの分だけ下げる *\u002F\n        overflow: hidden;\n        border-radius: 35px;\n        box-shadow: 0px 0px 8px -3px rgba(0, 0, 0, 0.6);\n    }\n\n    .p-img-card .c-img{\n        width: 100%;\n        height: 100%;\n        background-position: center;\n        background-repeat: no-repeat;\n        background-size: cover;\n        transform: scale(1);\n        transition: transform 0.5s;\n    }\n\n    .p-img-card:hover .c-img{\n        transform: scale(1.2);\n        transition: transform 0.5s;\n        animation: min-and-big 3s;\n    }\n\n    .img-a .c-img{background-image: url(画像のパス);}\n    .img-b .c-img{background-image: url(画像のパス);}\n\n\u003C\u002Fstyle>\n\n\u003Cdiv class=\"p-the-container\">\n    \u003Cdiv class=\"p-the-wrapper\">\n        \u003Cdiv class=\"p-img-card img-a\">\n            \u003Cdiv class=\"p-img-card-wrapper\">\n                \u003Cdiv class=\"c-img\">\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"p-img-card img-b\">\n            \u003Cdiv class=\"p-img-card-wrapper\">\n                \u003Cdiv class=\"c-img\">\u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n　　　　　...\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[53,7180,7181,7189,7196,7207,7211,7218,7228,7232,7242,7253,7257,7261,7270,7281,7292,7309,7313,7317,7326,7336,7346,7350,7365,7380,7384,7395,7407,7419,7423,7427,7441,7453,7463,7477,7481,7485,7494,7504,7528,7550,7560,7574,7584,7596,7635,7639,7643,7656,7666,7676,7687,7699,7711,7727,7742,7746,7750,7767,7782,7794,7809,7813,7817,7846,7871,7875,7883,7887,7905,7923,7942,7960,7983,7991,7999,8018,8036,8058,8066,8074,8079,8087],{"__ignoreMap":51},[56,7182,7183,7185,7187],{"class":58,"line":59},[56,7184,63],{"class":62},[56,7186,2925],{"class":66},[56,7188,98],{"class":62},[56,7190,7191,7194],{"class":58,"line":101},[56,7192,7193],{"class":268},"    *",[56,7195,272],{"class":62},[56,7197,7198,7201,7203,7205],{"class":58,"line":122},[56,7199,7200],{"class":277},"        box-sizing",[56,7202,281],{"class":62},[56,7204,310],{"class":309},[56,7206,288],{"class":62},[56,7208,7209],{"class":58,"line":156},[56,7210,5387],{"class":62},[56,7212,7213,7216],{"class":58,"line":166},[56,7214,7215],{"class":268},"    html",[56,7217,272],{"class":62},[56,7219,7220,7222,7224,7226],{"class":58,"line":4},[56,7221,4570],{"class":277},[56,7223,281],{"class":62},[56,7225,604],{"class":284},[56,7227,288],{"class":62},[56,7229,7230],{"class":58,"line":213},[56,7231,5387],{"class":62},[56,7233,7234,7237,7240],{"class":58,"line":222},[56,7235,7236],{"class":62},"    .",[56,7238,7239],{"class":268},"p-the-container",[56,7241,272],{"class":62},[56,7243,7244,7247,7249,7251],{"class":58,"line":229},[56,7245,7246],{"class":277},"        width",[56,7248,281],{"class":62},[56,7250,646],{"class":284},[56,7252,288],{"class":62},[56,7254,7255],{"class":58,"line":360},[56,7256,5387],{"class":62},[56,7258,7259],{"class":58,"line":373},[56,7260,323],{"emptyLinePlaceholder":322},[56,7262,7263,7265,7268],{"class":58,"line":378},[56,7264,7236],{"class":62},[56,7266,7267],{"class":268},"p-the-wrapper",[56,7269,272],{"class":62},[56,7271,7272,7275,7277,7279],{"class":58,"line":383},[56,7273,7274],{"class":277},"        display",[56,7276,281],{"class":62},[56,7278,490],{"class":309},[56,7280,288],{"class":62},[56,7282,7283,7286,7288,7290],{"class":58,"line":394},[56,7284,7285],{"class":277},"        flex-wrap",[56,7287,281],{"class":62},[56,7289,503],{"class":309},[56,7291,288],{"class":62},[56,7293,7294,7297,7299,7301,7304,7306],{"class":58,"line":407},[56,7295,7296],{"class":277},"        margin",[56,7298,281],{"class":62},[56,7300,285],{"class":284},[56,7302,7303],{"class":284}," -1rem",[56,7305,5886],{"class":62},[56,7307,7308],{"class":225},"         \u002F* p-img-card の paddingと同じ *\u002F\n",[56,7310,7311],{"class":58,"line":421},[56,7312,5387],{"class":62},[56,7314,7315],{"class":58,"line":436},[56,7316,323],{"emptyLinePlaceholder":322},[56,7318,7319,7321,7324],{"class":58,"line":449},[56,7320,7236],{"class":62},[56,7322,7323],{"class":268},"p-img-card",[56,7325,272],{"class":62},[56,7327,7328,7330,7332,7334],{"class":58,"line":454},[56,7329,7246],{"class":277},[56,7331,281],{"class":62},[56,7333,575],{"class":284},[56,7335,288],{"class":62},[56,7337,7338,7340,7342,7344],{"class":58,"line":459},[56,7339,7246],{"class":277},[56,7341,281],{"class":62},[56,7343,575],{"class":284},[56,7345,288],{"class":62},[56,7347,7348],{"class":58,"line":468},[56,7349,323],{"emptyLinePlaceholder":322},[56,7351,7352,7355,7357,7360,7362],{"class":58,"line":482},[56,7353,7354],{"class":277},"        padding",[56,7356,281],{"class":62},[56,7358,7359],{"class":284}," 1rem",[56,7361,5886],{"class":62},[56,7363,7364],{"class":225},"          \u002F* 隙間の太さになる *\u002F\n",[56,7366,7367,7370,7372,7375,7377],{"class":58,"line":495},[56,7368,7369],{"class":277},"        margin-bottom",[56,7371,281],{"class":62},[56,7373,7374],{"class":284}," 2rem",[56,7376,5886],{"class":62},[56,7378,7379],{"class":225},"    \u002F* 下側の隙間の太さ *\u002F\n",[56,7381,7382],{"class":58,"line":508},[56,7383,323],{"emptyLinePlaceholder":322},[56,7385,7386,7389,7391,7393],{"class":58,"line":520},[56,7387,7388],{"class":277},"        position",[56,7390,281],{"class":62},[56,7392,515],{"class":309},[56,7394,288],{"class":62},[56,7396,7397,7400,7402,7405],{"class":58,"line":525},[56,7398,7399],{"class":277},"        overflow",[56,7401,281],{"class":62},[56,7403,7404],{"class":309}," hidden",[56,7406,288],{"class":62},[56,7408,7409,7412,7414,7417],{"class":58,"line":530},[56,7410,7411],{"class":277},"        cursor",[56,7413,281],{"class":62},[56,7415,7416],{"class":309}," pointer",[56,7418,288],{"class":62},[56,7420,7421],{"class":58,"line":544},[56,7422,5387],{"class":62},[56,7424,7425],{"class":58,"line":556},[56,7426,323],{"emptyLinePlaceholder":322},[56,7428,7429,7431,7433,7436,7439],{"class":58,"line":567},[56,7430,7236],{"class":62},[56,7432,7323],{"class":268},[56,7434,7435],{"class":62},"::",[56,7437,7438],{"class":70},"before",[56,7440,272],{"class":62},[56,7442,7443,7446,7448,7451],{"class":58,"line":580},[56,7444,7445],{"class":277},"        content",[56,7447,281],{"class":62},[56,7449,7450],{"class":62}," ''",[56,7452,288],{"class":62},[56,7454,7455,7457,7459,7461],{"class":58,"line":592},[56,7456,7274],{"class":277},[56,7458,281],{"class":62},[56,7460,587],{"class":309},[56,7462,288],{"class":62},[56,7464,7465,7468,7470,7472,7474],{"class":58,"line":611},[56,7466,7467],{"class":277},"        padding-top",[56,7469,281],{"class":62},[56,7471,646],{"class":284},[56,7473,5886],{"class":62},[56,7475,7476],{"class":225},"      \u002F*正方形にするおまじない*\u002F\n",[56,7478,7479],{"class":58,"line":616},[56,7480,5387],{"class":62},[56,7482,7483],{"class":58,"line":621},[56,7484,323],{"emptyLinePlaceholder":322},[56,7486,7487,7489,7492],{"class":58,"line":626},[56,7488,7236],{"class":62},[56,7490,7491],{"class":268},"p-img-card-wrapper",[56,7493,272],{"class":62},[56,7495,7496,7498,7500,7502],{"class":58,"line":639},[56,7497,7274],{"class":277},[56,7499,281],{"class":62},[56,7501,587],{"class":309},[56,7503,288],{"class":62},[56,7505,7506,7508,7510,7513,7515,7518,7520,7522,7525],{"class":58,"line":651},[56,7507,7246],{"class":277},[56,7509,281],{"class":62},[56,7511,7512],{"class":1633}," calc",[56,7514,1637],{"class":62},[56,7516,7517],{"class":284},"100%",[56,7519,2795],{"class":62},[56,7521,7374],{"class":284},[56,7523,7524],{"class":62},");",[56,7526,7527],{"class":225},"  \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n",[56,7529,7530,7533,7535,7537,7539,7541,7543,7545,7547],{"class":58,"line":675},[56,7531,7532],{"class":277},"        height",[56,7534,281],{"class":62},[56,7536,7512],{"class":1633},[56,7538,1637],{"class":62},[56,7540,7517],{"class":284},[56,7542,2795],{"class":62},[56,7544,7374],{"class":284},[56,7546,7524],{"class":62},[56,7548,7549],{"class":225}," \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n",[56,7551,7552,7554,7556,7558],{"class":58,"line":687},[56,7553,7388],{"class":277},[56,7555,281],{"class":62},[56,7557,551],{"class":309},[56,7559,288],{"class":62},[56,7561,7562,7565,7567,7569,7571],{"class":58,"line":700},[56,7563,7564],{"class":277},"        top",[56,7566,281],{"class":62},[56,7568,7359],{"class":284},[56,7570,5886],{"class":62},[56,7572,7573],{"class":225},"　　　　　　　　　　\u002F* 位置もカードのpaddingの分だけ下げる *\u002F\n",[56,7575,7576,7578,7580,7582],{"class":58,"line":711},[56,7577,7399],{"class":277},[56,7579,281],{"class":62},[56,7581,7404],{"class":309},[56,7583,288],{"class":62},[56,7585,7586,7589,7591,7594],{"class":58,"line":723},[56,7587,7588],{"class":277},"        border-radius",[56,7590,281],{"class":62},[56,7592,7593],{"class":284}," 35px",[56,7595,288],{"class":62},[56,7597,7598,7601,7603,7605,7607,7610,7613,7616,7618,7620,7622,7624,7626,7628,7630,7633],{"class":58,"line":739},[56,7599,7600],{"class":277},"        box-shadow",[56,7602,281],{"class":62},[56,7604,431],{"class":284},[56,7606,431],{"class":284},[56,7608,7609],{"class":284}," 8px",[56,7611,7612],{"class":284}," -3px",[56,7614,7615],{"class":1633}," rgba",[56,7617,1637],{"class":62},[56,7619,1565],{"class":284},[56,7621,1752],{"class":62},[56,7623,285],{"class":284},[56,7625,1752],{"class":62},[56,7627,285],{"class":284},[56,7629,1752],{"class":62},[56,7631,7632],{"class":284}," 0.6",[56,7634,5603],{"class":62},[56,7636,7637],{"class":58,"line":744},[56,7638,5387],{"class":62},[56,7640,7641],{"class":58,"line":762},[56,7642,323],{"emptyLinePlaceholder":322},[56,7644,7645,7647,7649,7651,7654],{"class":58,"line":773},[56,7646,7236],{"class":62},[56,7648,7323],{"class":268},[56,7650,537],{"class":62},[56,7652,7653],{"class":268},"c-img",[56,7655,272],{"class":62},[56,7657,7658,7660,7662,7664],{"class":58,"line":785},[56,7659,7246],{"class":277},[56,7661,281],{"class":62},[56,7663,646],{"class":284},[56,7665,288],{"class":62},[56,7667,7668,7670,7672,7674],{"class":58,"line":798},[56,7669,7532],{"class":277},[56,7671,281],{"class":62},[56,7673,646],{"class":284},[56,7675,288],{"class":62},[56,7677,7678,7681,7683,7685],{"class":58,"line":2078},[56,7679,7680],{"class":277},"        background-position",[56,7682,281],{"class":62},[56,7684,5883],{"class":309},[56,7686,288],{"class":62},[56,7688,7689,7692,7694,7697],{"class":58,"line":2124},[56,7690,7691],{"class":277},"        background-repeat",[56,7693,281],{"class":62},[56,7695,7696],{"class":309}," no-repeat",[56,7698,288],{"class":62},[56,7700,7701,7704,7706,7709],{"class":58,"line":2150},[56,7702,7703],{"class":277},"        background-size",[56,7705,281],{"class":62},[56,7707,7708],{"class":309}," cover",[56,7710,288],{"class":62},[56,7712,7713,7716,7718,7721,7723,7725],{"class":58,"line":2166},[56,7714,7715],{"class":277},"        transform",[56,7717,281],{"class":62},[56,7719,7720],{"class":1633}," scale",[56,7722,1637],{"class":62},[56,7724,2410],{"class":284},[56,7726,5603],{"class":62},[56,7728,7729,7732,7734,7737,7740],{"class":58,"line":2171},[56,7730,7731],{"class":277},"        transition",[56,7733,281],{"class":62},[56,7735,7736],{"class":309}," transform ",[56,7738,7739],{"class":284},"0.5s",[56,7741,288],{"class":62},[56,7743,7744],{"class":58,"line":2177},[56,7745,5387],{"class":62},[56,7747,7748],{"class":58,"line":2183},[56,7749,323],{"emptyLinePlaceholder":322},[56,7751,7752,7754,7756,7758,7761,7763,7765],{"class":58,"line":2211},[56,7753,7236],{"class":62},[56,7755,7323],{"class":268},[56,7757,281],{"class":62},[56,7759,7760],{"class":70},"hover",[56,7762,537],{"class":62},[56,7764,7653],{"class":268},[56,7766,272],{"class":62},[56,7768,7769,7771,7773,7775,7777,7780],{"class":58,"line":2260},[56,7770,7715],{"class":277},[56,7772,281],{"class":62},[56,7774,7720],{"class":1633},[56,7776,1637],{"class":62},[56,7778,7779],{"class":284},"1.2",[56,7781,5603],{"class":62},[56,7783,7784,7786,7788,7790,7792],{"class":58,"line":2276},[56,7785,7731],{"class":277},[56,7787,281],{"class":62},[56,7789,7736],{"class":309},[56,7791,7739],{"class":284},[56,7793,288],{"class":62},[56,7795,7796,7799,7801,7804,7807],{"class":58,"line":2281},[56,7797,7798],{"class":277},"        animation",[56,7800,281],{"class":62},[56,7802,7803],{"class":309}," min-and-big ",[56,7805,7806],{"class":284},"3s",[56,7808,288],{"class":62},[56,7810,7811],{"class":58,"line":2287},[56,7812,5387],{"class":62},[56,7814,7815],{"class":58,"line":2333},[56,7816,323],{"emptyLinePlaceholder":322},[56,7818,7819,7821,7824,7826,7828,7830,7833,7835,7838,7840,7843],{"class":58,"line":2362},[56,7820,7236],{"class":62},[56,7822,7823],{"class":268},"img-a",[56,7825,537],{"class":62},[56,7827,7653],{"class":268},[56,7829,2645],{"class":62},[56,7831,7832],{"class":277},"background-image",[56,7834,281],{"class":62},[56,7836,7837],{"class":1633}," url",[56,7839,1637],{"class":62},[56,7841,7842],{"class":2543},"画像のパス",[56,7844,7845],{"class":62},");}\n",[56,7847,7848,7850,7853,7855,7857,7859,7861,7863,7865,7867,7869],{"class":58,"line":2367},[56,7849,7236],{"class":62},[56,7851,7852],{"class":268},"img-b",[56,7854,537],{"class":62},[56,7856,7653],{"class":268},[56,7858,2645],{"class":62},[56,7860,7832],{"class":277},[56,7862,281],{"class":62},[56,7864,7837],{"class":1633},[56,7866,1637],{"class":62},[56,7868,7842],{"class":2543},[56,7870,7845],{"class":62},[56,7872,7873],{"class":58,"line":2373},[56,7874,323],{"emptyLinePlaceholder":322},[56,7876,7877,7879,7881],{"class":58,"line":2428},[56,7878,232],{"class":62},[56,7880,2925],{"class":66},[56,7882,98],{"class":62},[56,7884,7885],{"class":58,"line":2434},[56,7886,323],{"emptyLinePlaceholder":322},[56,7888,7889,7891,7893,7895,7897,7899,7901,7903],{"class":58,"line":2440},[56,7890,63],{"class":62},[56,7892,67],{"class":66},[56,7894,71],{"class":70},[56,7896,74],{"class":62},[56,7898,77],{"class":62},[56,7900,7239],{"class":80},[56,7902,77],{"class":62},[56,7904,98],{"class":62},[56,7906,7907,7909,7911,7913,7915,7917,7919,7921],{"class":58,"line":2458},[56,7908,104],{"class":62},[56,7910,67],{"class":66},[56,7912,71],{"class":70},[56,7914,74],{"class":62},[56,7916,77],{"class":62},[56,7918,7267],{"class":80},[56,7920,77],{"class":62},[56,7922,98],{"class":62},[56,7924,7925,7927,7929,7931,7933,7935,7938,7940],{"class":58,"line":2463},[56,7926,125],{"class":62},[56,7928,67],{"class":66},[56,7930,71],{"class":70},[56,7932,74],{"class":62},[56,7934,77],{"class":62},[56,7936,7937],{"class":80},"p-img-card img-a",[56,7939,77],{"class":62},[56,7941,98],{"class":62},[56,7943,7944,7946,7948,7950,7952,7954,7956,7958],{"class":58,"line":2469},[56,7945,1350],{"class":62},[56,7947,67],{"class":66},[56,7949,71],{"class":70},[56,7951,74],{"class":62},[56,7953,77],{"class":62},[56,7955,7491],{"class":80},[56,7957,77],{"class":62},[56,7959,98],{"class":62},[56,7961,7962,7965,7967,7969,7971,7973,7975,7977,7979,7981],{"class":58,"line":2489},[56,7963,7964],{"class":62},"                \u003C",[56,7966,67],{"class":66},[56,7968,71],{"class":70},[56,7970,74],{"class":62},[56,7972,77],{"class":62},[56,7974,7653],{"class":80},[56,7976,77],{"class":62},[56,7978,947],{"class":62},[56,7980,67],{"class":66},[56,7982,98],{"class":62},[56,7984,7985,7987,7989],{"class":58,"line":2514},[56,7986,1383],{"class":62},[56,7988,67],{"class":66},[56,7990,98],{"class":62},[56,7992,7993,7995,7997],{"class":58,"line":2519},[56,7994,1421],{"class":62},[56,7996,67],{"class":66},[56,7998,98],{"class":62},[56,8000,8001,8003,8005,8007,8009,8011,8014,8016],{"class":58,"line":2524},[56,8002,125],{"class":62},[56,8004,67],{"class":66},[56,8006,71],{"class":70},[56,8008,74],{"class":62},[56,8010,77],{"class":62},[56,8012,8013],{"class":80},"p-img-card img-b",[56,8015,77],{"class":62},[56,8017,98],{"class":62},[56,8019,8020,8022,8024,8026,8028,8030,8032,8034],{"class":58,"line":2530},[56,8021,1350],{"class":62},[56,8023,67],{"class":66},[56,8025,71],{"class":70},[56,8027,74],{"class":62},[56,8029,77],{"class":62},[56,8031,7491],{"class":80},[56,8033,77],{"class":62},[56,8035,98],{"class":62},[56,8037,8038,8040,8042,8044,8046,8048,8050,8052,8054,8056],{"class":58,"line":2553},[56,8039,7964],{"class":62},[56,8041,67],{"class":66},[56,8043,71],{"class":70},[56,8045,74],{"class":62},[56,8047,77],{"class":62},[56,8049,7653],{"class":80},[56,8051,77],{"class":62},[56,8053,947],{"class":62},[56,8055,67],{"class":66},[56,8057,98],{"class":62},[56,8059,8060,8062,8064],{"class":58,"line":2571},[56,8061,1383],{"class":62},[56,8063,67],{"class":66},[56,8065,98],{"class":62},[56,8067,8068,8070,8072],{"class":58,"line":2576},[56,8069,1421],{"class":62},[56,8071,67],{"class":66},[56,8073,98],{"class":62},[56,8075,8076],{"class":58,"line":2581},[56,8077,8078],{"class":309},"　　　　　...\n",[56,8080,8081,8083,8085],{"class":58,"line":2587},[56,8082,159],{"class":62},[56,8084,67],{"class":66},[56,8086,98],{"class":62},[56,8088,8089,8091,8093],{"class":58,"line":2593},[56,8090,232],{"class":62},[56,8092,67],{"class":66},[56,8094,98],{"class":62},[2925,8096,8097],{},"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 .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}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);}",{"title":51,"searchDepth":122,"depth":122,"links":8099},[8100],{"id":7134,"depth":101,"text":7134},[6123],"2020-12-17",{},"\u002Farticles\u002Frecent-card-css",{"title":7120,"description":7120},"articles\u002Frecent-card-css",[50,261],"_mix\u002Fsch-2021-04-25 22.19.26.png","a9LRbH7otDCRxRFyUY0oec3ojY88jg3a-FXDcIlgR9k",{"id":8111,"title":8112,"body":8113,"category":8780,"createdAt":8781,"description":8112,"extension":4469,"index":4470,"meta":8782,"navigation":322,"path":8783,"publish":322,"seo":8784,"series":4470,"seriesTitle":4470,"stem":8785,"tag":8786,"thumbnail":8787,"updatedAt":4470,"__hash__":8788},"articles\u002Farticles\u002Fpseudo-element-icon.md","動的な変更に強い！擬似要素でWebアイコンを表示させる。(IE対策も)",{"type":10,"value":8114,"toc":8771},[8115,8118,8121,8152,8155,8158,8161,8164,8167,8170,8174,8177,8185,8188,8194,8197,8201,8207,8210,8375,8554,8557,8560,8566,8573,8576,8579,8585,8588,8592,8598,8659,8662,8739,8742,8756,8759,8762,8765,8768],[13,8116,8117],{},"こんにちはjunです。Webアイコンっていいですよね。サイトはお洒落になるし、各ボタンの意図やUX\u002FUIの観点では重要な物です。フォントを実装するといば、FontAwsome、GoogleIconを使うのがメインだと思います。中には画像でやる人もいるけどね。",[13,8119,8120],{},"ただアイコンというのは単独ではなくて、文字と併用したり、要素の一部としてひっそりと使うことが多いです。これらのアイコンを入れるときは",[46,8122,8126],{"className":8123,"code":8124,"language":8125,"meta":51,"style":51},"language-HTML shiki shiki-themes material-theme-ocean","\u003Ci class=\"far fa-smile-wink\">\u003C\u002Fi>\n","HTML",[53,8127,8128],{"__ignoreMap":51},[56,8129,8130,8132,8135,8137,8139,8141,8144,8146,8148,8150],{"class":58,"line":59},[56,8131,63],{"class":62},[56,8133,8134],{"class":66},"i",[56,8136,71],{"class":70},[56,8138,74],{"class":62},[56,8140,77],{"class":62},[56,8142,8143],{"class":80},"far fa-smile-wink",[56,8145,77],{"class":62},[56,8147,947],{"class":62},[56,8149,8134],{"class":66},[56,8151,98],{"class":62},[13,8153,8154],{},"と言ったiタグを入れるのが簡単ですが実務で扱うようなサイトの場合、この方法では面倒になることがあります。",[39,8156,8157],{"id":8157},"タグの操作が必要",[13,8159,8160],{},"iタグと対応するアイコンのクラス名を入れることで、アイコンは表示することはできます。しかしタグでアイコンを打ち込むと、対応するアイコンごとのHTMLタグを埋め込む、必要性が出てきてしまいます。",[13,8162,8163],{},"特に動的に内容を出力したり変更したりする場合は特に大変です。例えば下図のようなリストタグの要件があるとします。",[17,8165],{":src":8166,":width":827},"'_mix\u002Fpseudo-element-icon.png'",[13,8168,8169],{},"胡散臭い内容ですが、とりあえずUX的にもこんなリストデザインが必要になったとしましょう。",[806,8171,8173],{"id":8172},"iタグでやってみると","iタグでやってみると...",[13,8175,8176],{},"今回の要件ではページの至る箇所で使われることとします。するとリストタグとして使う性質上、",[7139,8178,8179,8182],{},[3044,8180,8181],{},"リストの数が決まっているわけではない。（可変的）",[3044,8183,8184],{},"内容によって数が変わる。",[13,8186,8187],{},"という内容が可変的であるという考慮が必要です。そのためiタグというHTML自体を埋め込んで対処すると、上記のデザインが必要な箇所全てにiタグを入れる必要が出てきます。",[13,8189,8190,8191],{},"リストの数が少なければなんとか対処できますが、大量にあったり、リリース前段階に内容が変わるなんて普通に起きます。差し替えというのは間違えが起きやすいです。そのためiタグでアイコンを埋め込んで表示する方法は、",[6365,8192,8193],{},"このような動的な変更に弱いです。",[13,8195,8196],{},"もしiタグ埋め込み方式をするとなれば予め、アイコンのiタグを入れてdisplayで操作したりとか、jsで気合でタグを埋め込むとかになりますが、どちらもいい手段とは言えません。",[39,8198,8200],{"id":8199},"擬似要素でアイコンをつけるクラス名で操作可能","擬似要素でアイコンをつける＝クラス名で操作可能",[13,8202,8203,8204],{},"iタグでアイコンを変える場合、要素であるiタグ、そしてクラス名が必要です。",[6365,8205,8206],{},"ただし擬似要素を扱うことでクラス名を付け加える、書き換えるだけでアイコンの変更と、付与・削除ができるようになります。",[13,8208,8209],{},"擬似要素は特に「付与・削除できる」という点がiタグ埋め込みより優れています。上のリストタグのHTML\u002FCSSは以下のように書かれています。",[46,8211,8213],{"className":48,"code":8212,"language":50,"meta":51,"style":51},"\u003Cul class=\"p-deco_list u-list_01\">\n    \u003Cli>最近よく眠れない..\u003C\u002Fli>\n    \u003Cli>なかなか疲れが取れない..\u003C\u002Fli>\n    \u003Cli>朝起きるのが辛い..\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cul class=\"p-deco_list u-list_02\">\n    \u003Cli>使い始めてから、寝つきがよくなった！\u003C\u002Fli>\n    \u003Cli>疲れが嘘のように取れた！\u003C\u002Fli>\n    \u003Cli>朝の目覚めが変わった！\u003C\u002Fli>\n\u003C\u002Ful>\n",[53,8214,8215,8234,8251,8268,8285,8293,8297,8316,8333,8350,8367],{"__ignoreMap":51},[56,8216,8217,8219,8221,8223,8225,8227,8230,8232],{"class":58,"line":59},[56,8218,63],{"class":62},[56,8220,7139],{"class":66},[56,8222,71],{"class":70},[56,8224,74],{"class":62},[56,8226,77],{"class":62},[56,8228,8229],{"class":80},"p-deco_list u-list_01",[56,8231,77],{"class":62},[56,8233,98],{"class":62},[56,8235,8236,8238,8240,8242,8245,8247,8249],{"class":58,"line":101},[56,8237,104],{"class":62},[56,8239,3044],{"class":66},[56,8241,1256],{"class":62},[56,8243,8244],{"class":309},"最近よく眠れない..",[56,8246,232],{"class":62},[56,8248,3044],{"class":66},[56,8250,98],{"class":62},[56,8252,8253,8255,8257,8259,8262,8264,8266],{"class":58,"line":122},[56,8254,104],{"class":62},[56,8256,3044],{"class":66},[56,8258,1256],{"class":62},[56,8260,8261],{"class":309},"なかなか疲れが取れない..",[56,8263,232],{"class":62},[56,8265,3044],{"class":66},[56,8267,98],{"class":62},[56,8269,8270,8272,8274,8276,8279,8281,8283],{"class":58,"line":156},[56,8271,104],{"class":62},[56,8273,3044],{"class":66},[56,8275,1256],{"class":62},[56,8277,8278],{"class":309},"朝起きるのが辛い..",[56,8280,232],{"class":62},[56,8282,3044],{"class":66},[56,8284,98],{"class":62},[56,8286,8287,8289,8291],{"class":58,"line":166},[56,8288,232],{"class":62},[56,8290,7139],{"class":66},[56,8292,98],{"class":62},[56,8294,8295],{"class":58,"line":4},[56,8296,323],{"emptyLinePlaceholder":322},[56,8298,8299,8301,8303,8305,8307,8309,8312,8314],{"class":58,"line":213},[56,8300,63],{"class":62},[56,8302,7139],{"class":66},[56,8304,71],{"class":70},[56,8306,74],{"class":62},[56,8308,77],{"class":62},[56,8310,8311],{"class":80},"p-deco_list u-list_02",[56,8313,77],{"class":62},[56,8315,98],{"class":62},[56,8317,8318,8320,8322,8324,8327,8329,8331],{"class":58,"line":222},[56,8319,104],{"class":62},[56,8321,3044],{"class":66},[56,8323,1256],{"class":62},[56,8325,8326],{"class":309},"使い始めてから、寝つきがよくなった！",[56,8328,232],{"class":62},[56,8330,3044],{"class":66},[56,8332,98],{"class":62},[56,8334,8335,8337,8339,8341,8344,8346,8348],{"class":58,"line":229},[56,8336,104],{"class":62},[56,8338,3044],{"class":66},[56,8340,1256],{"class":62},[56,8342,8343],{"class":309},"疲れが嘘のように取れた！",[56,8345,232],{"class":62},[56,8347,3044],{"class":66},[56,8349,98],{"class":62},[56,8351,8352,8354,8356,8358,8361,8363,8365],{"class":58,"line":360},[56,8353,104],{"class":62},[56,8355,3044],{"class":66},[56,8357,1256],{"class":62},[56,8359,8360],{"class":309},"朝の目覚めが変わった！",[56,8362,232],{"class":62},[56,8364,3044],{"class":66},[56,8366,98],{"class":62},[56,8368,8369,8371,8373],{"class":58,"line":373},[56,8370,232],{"class":62},[56,8372,7139],{"class":66},[56,8374,98],{"class":62},[46,8376,8378],{"className":259,"code":8377,"language":261,"meta":51,"style":51},".p-deco_list li{\n    list-style:none;\n}\n\n \u002F*　擬似要素アイコンの共通設定*\u002F\n.p-deco_list li::before{\n    content:'';\n    font-family: 'FontAwesome';\n    padding:5px 10px; \u002F* 文字間隔調整 *\u002F\n}\n\n.u-list_01 li::before{\n    content:'\\f119';\n}\n\n.u-list_02 li::before{\n    content:'\\f4da';\n}\n",[53,8379,8380,8392,8404,8408,8412,8417,8431,8443,8459,8474,8478,8482,8497,8512,8516,8520,8535,8550],{"__ignoreMap":51},[56,8381,8382,8384,8387,8390],{"class":58,"line":59},[56,8383,386],{"class":62},[56,8385,8386],{"class":268},"p-deco_list",[56,8388,8389],{"class":268}," li",[56,8391,272],{"class":62},[56,8393,8394,8397,8399,8402],{"class":58,"line":101},[56,8395,8396],{"class":277},"    list-style",[56,8398,281],{"class":62},[56,8400,8401],{"class":309},"none",[56,8403,288],{"class":62},[56,8405,8406],{"class":58,"line":122},[56,8407,317],{"class":62},[56,8409,8410],{"class":58,"line":156},[56,8411,323],{"emptyLinePlaceholder":322},[56,8413,8414],{"class":58,"line":166},[56,8415,8416],{"class":225}," \u002F*　擬似要素アイコンの共通設定*\u002F\n",[56,8418,8419,8421,8423,8425,8427,8429],{"class":58,"line":4},[56,8420,386],{"class":62},[56,8422,8386],{"class":268},[56,8424,8389],{"class":268},[56,8426,7435],{"class":62},[56,8428,7438],{"class":70},[56,8430,272],{"class":62},[56,8432,8433,8436,8438,8441],{"class":58,"line":213},[56,8434,8435],{"class":277},"    content",[56,8437,281],{"class":62},[56,8439,8440],{"class":62},"''",[56,8442,288],{"class":62},[56,8444,8445,8448,8450,8452,8455,8457],{"class":58,"line":222},[56,8446,8447],{"class":277},"    font-family",[56,8449,281],{"class":62},[56,8451,2847],{"class":62},[56,8453,8454],{"class":80},"FontAwesome",[56,8456,1401],{"class":62},[56,8458,288],{"class":62},[56,8460,8461,8463,8465,8467,8469,8471],{"class":58,"line":229},[56,8462,293],{"class":277},[56,8464,281],{"class":62},[56,8466,5698],{"class":284},[56,8468,604],{"class":284},[56,8470,5886],{"class":62},[56,8472,8473],{"class":225}," \u002F* 文字間隔調整 *\u002F\n",[56,8475,8476],{"class":58,"line":360},[56,8477,317],{"class":62},[56,8479,8480],{"class":58,"line":373},[56,8481,323],{"emptyLinePlaceholder":322},[56,8483,8484,8486,8489,8491,8493,8495],{"class":58,"line":378},[56,8485,386],{"class":62},[56,8487,8488],{"class":268},"u-list_01",[56,8490,8389],{"class":268},[56,8492,7435],{"class":62},[56,8494,7438],{"class":70},[56,8496,272],{"class":62},[56,8498,8499,8501,8503,8505,8508,8510],{"class":58,"line":383},[56,8500,8435],{"class":277},[56,8502,281],{"class":62},[56,8504,1401],{"class":62},[56,8506,8507],{"class":309},"\\f119",[56,8509,1401],{"class":62},[56,8511,288],{"class":62},[56,8513,8514],{"class":58,"line":394},[56,8515,317],{"class":62},[56,8517,8518],{"class":58,"line":407},[56,8519,323],{"emptyLinePlaceholder":322},[56,8521,8522,8524,8527,8529,8531,8533],{"class":58,"line":421},[56,8523,386],{"class":62},[56,8525,8526],{"class":268},"u-list_02",[56,8528,8389],{"class":268},[56,8530,7435],{"class":62},[56,8532,7438],{"class":70},[56,8534,272],{"class":62},[56,8536,8537,8539,8541,8543,8546,8548],{"class":58,"line":436},[56,8538,8435],{"class":277},[56,8540,281],{"class":62},[56,8542,1401],{"class":62},[56,8544,8545],{"class":309},"\\f4da",[56,8547,1401],{"class":62},[56,8549,288],{"class":62},[56,8551,8552],{"class":58,"line":449},[56,8553,317],{"class":62},[13,8555,8556],{},"iタグを入れない代わりに、ulタグに擬似要素アイコンを付けるための設定（p-deco_list）とアイコンの種類を指定（u-list_*）しています。そしてCSSでクラス名配下のliに対して擬似要素を付けるようにしています。",[39,8558,8559],{"id":8559},"擬似要素でアイコンを表示するのは意外と簡単",[13,8561,8562,8563],{},"CSSを見ればわかりますが、意外と簡単です。fontawesome、GoogleIconは「フォントアイコン」とも呼ばれているように、",[6365,8564,8565],{},"文字のように扱うことができます。",[13,8567,8568,8569,8572],{},"fontawesomeを使うならば、",[6365,8570,8571],{},"font-familyに’FontAwesome’と入れればいいのです。"," するとCDNとかがちゃんと読み込まれていれば、fontawesomeのアイコンが使えるようになります。",[13,8574,8575],{},"そしてアイコンの種類はcontentで指定します。「\\f4da」みたいなのは文字コードです。この文字コードはfontawesomeで簡単に見つけられます。下図のfontawesomeのアイコン詳細画面を開くと、iタグの横に「f4da」とあります。",[17,8577],{":src":8578,":width":20},"'_mix\u002Ffontawesome-1024x296.png'",[13,8580,8581,8582],{},"この英数字とバックスラッシュ（\\）をCSSのcontentに入れればアイコンの指定が完了です。",[6365,8583,8584],{},"バックスラッシュを入れないと、文字コードでなく「f4da」という文字列として認識されてしまいます。",[13,8586,8587],{},"「擬似要素！？iタグより難しいじゃん..」と思う方は、iタグで表示されたアイコンを開発者ツールでみてみましょう。実はiタグもこの方法と同じように、クラス名で文字コードを指定して、擬似要素内にアイコンを表示しているだけなんですよ。その方法をiタグ使わないでやっているだけです。",[39,8589,8591],{"id":8590},"ie野郎対策","IE野郎対策",[13,8593,8594,8595],{},"私もiタグがいらなくて、クラスを指定すればいいことにウキウキしながら実装を進めていくと問題にぶち当たりました。IEです。",[6365,8596,8597],{},"実は下のコードだけではIEは表示されないという事件が発覚して、頭を悩ませていました。",[46,8599,8601],{"className":259,"code":8600,"language":261,"meta":51,"style":51},".p-deco_list li::before{\n    content:'';\n    font-family: 'FontAwesome';\n    padding:5px 10px; \u002F* 文字間隔調整 *\u002F\n}\n",[53,8602,8603,8617,8627,8641,8655],{"__ignoreMap":51},[56,8604,8605,8607,8609,8611,8613,8615],{"class":58,"line":59},[56,8606,386],{"class":62},[56,8608,8386],{"class":268},[56,8610,8389],{"class":268},[56,8612,7435],{"class":62},[56,8614,7438],{"class":70},[56,8616,272],{"class":62},[56,8618,8619,8621,8623,8625],{"class":58,"line":101},[56,8620,8435],{"class":277},[56,8622,281],{"class":62},[56,8624,8440],{"class":62},[56,8626,288],{"class":62},[56,8628,8629,8631,8633,8635,8637,8639],{"class":58,"line":122},[56,8630,8447],{"class":277},[56,8632,281],{"class":62},[56,8634,2847],{"class":62},[56,8636,8454],{"class":80},[56,8638,1401],{"class":62},[56,8640,288],{"class":62},[56,8642,8643,8645,8647,8649,8651,8653],{"class":58,"line":156},[56,8644,293],{"class":277},[56,8646,281],{"class":62},[56,8648,5698],{"class":284},[56,8650,604],{"class":284},[56,8652,5886],{"class":62},[56,8654,8473],{"class":225},[56,8656,8657],{"class":58,"line":166},[56,8658,317],{"class":62},[13,8660,8661],{},"chromeやFireFox（一応Edge）は表示されるんですが、IE11は表示されてませんでした。要件にはIE11が入っていたので実装は必須です。頭を悩ませてググっていると方法がありました。",[46,8663,8665],{"className":259,"code":8664,"language":261,"meta":51,"style":51},".p-deco_list li::before{\n    content:'';\n    font-family: 'FontAwesome';\n    font-feature-settings: 'liga';\n    padding:5px 10px; \u002F* 文字間隔調整 *\u002F\n}\n",[53,8666,8667,8681,8691,8705,8721,8735],{"__ignoreMap":51},[56,8668,8669,8671,8673,8675,8677,8679],{"class":58,"line":59},[56,8670,386],{"class":62},[56,8672,8386],{"class":268},[56,8674,8389],{"class":268},[56,8676,7435],{"class":62},[56,8678,7438],{"class":70},[56,8680,272],{"class":62},[56,8682,8683,8685,8687,8689],{"class":58,"line":101},[56,8684,8435],{"class":277},[56,8686,281],{"class":62},[56,8688,8440],{"class":62},[56,8690,288],{"class":62},[56,8692,8693,8695,8697,8699,8701,8703],{"class":58,"line":122},[56,8694,8447],{"class":277},[56,8696,281],{"class":62},[56,8698,2847],{"class":62},[56,8700,8454],{"class":80},[56,8702,1401],{"class":62},[56,8704,288],{"class":62},[56,8706,8707,8710,8712,8714,8717,8719],{"class":58,"line":156},[56,8708,8709],{"class":277},"    font-feature-settings",[56,8711,281],{"class":62},[56,8713,2847],{"class":62},[56,8715,8716],{"class":80},"liga",[56,8718,1401],{"class":62},[56,8720,288],{"class":62},[56,8722,8723,8725,8727,8729,8731,8733],{"class":58,"line":166},[56,8724,293],{"class":277},[56,8726,281],{"class":62},[56,8728,5698],{"class":284},[56,8730,604],{"class":284},[56,8732,5886],{"class":62},[56,8734,8473],{"class":225},[56,8736,8737],{"class":58,"line":4},[56,8738,317],{"class":62},[13,8740,8741],{},"「font-feature-settings: ‘liga’;」というのを設定したらなんと！表示されました。このプロパティですがmdnでは",[67,8743,8746,8747,8750,8751],{"className":8744},[6350,8745],"alert-info","\nCSS の ",[53,8748,8749],{},"font-feature-settings"," プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。\n",[8134,8752,8753],{},[31,8754,8755],{"href":8755,"target":6359},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002Ffont-feature-settings",[13,8757,8758],{},"(；´Д`A？",[13,8760,8761],{},"全然分からん。とりあえずフォントアイコン＝フォントなので、そのアイコンフォントを表示させるための設定がIEではないのか？と結論づけました。フォントについて詳しい人教えてください。",[39,8763,8764],{"id":8764},"アイコンは基本的には擬似要素がいいかも",[13,8766,8767],{},"そんな感じで、擬似要素を用いてアイコンを付ける方法は以上です。今回の例で出したような、動的な内容にアイコンが伴う場合はクラス名で指定できる、擬似要素アイコンがiタグ埋め込みより優れています。意外とやっている原理は簡単なのでぜひ使えると便利ですよ。",[2925,8769,8770],{},"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 .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 .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}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 .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":51,"searchDepth":122,"depth":122,"links":8772},[8773,8776,8777,8778,8779],{"id":8157,"depth":101,"text":8157,"children":8774},[8775],{"id":8172,"depth":122,"text":8173},{"id":8199,"depth":101,"text":8200},{"id":8559,"depth":101,"text":8559},{"id":8590,"depth":101,"text":8591},{"id":8764,"depth":101,"text":8764},[4467],"2020-04-26",{},"\u002Farticles\u002Fpseudo-element-icon",{"title":8112,"description":8112},"articles\u002Fpseudo-element-icon",[50,261],"_mix\u002Fpseudo-element-icon.png","vqsAO5STJjp70MfR8z6uFmS_BPvxDfVteLbqAiJvnO0",1780987145595]