[{"data":1,"prerenderedAt":11148},["ShallowReactive",2],{"tag-html-1":3},{"count":4,"content":5},7,[6,169,4342,8637,9191,9476,10470],{"id":7,"title":8,"body":9,"category":156,"createdAt":158,"description":8,"extension":159,"index":160,"meta":161,"navigation":162,"path":163,"publish":162,"seo":164,"series":160,"seriesTitle":160,"stem":165,"tag":166,"thumbnail":160,"updatedAt":160,"__hash__":168},"articles\u002Farticles\u002Fqueryselector-error-with-numeric.md","Document.querySelector() で先頭が数字のIDを指定するとエラーが起きる。",{"type":10,"value":11,"toc":153},"minimark",[12,33,39,90,96,105,113,119,136,149],[13,14,15,16,20,21,24,25,28,29,32],"p",{},"こんにちはjunです。最近、editor.jsだったり色々バニラJSを触る機会がありました。特定のNodeを取得する時に",[17,18,19],"code",{},"document.querySelector()","を使用することでCSS・jqueryライクに要素を取得できます。今回はIDを持つ要素を",[17,22,23],{},"getByElementId()","を使わず、",[17,26,27],{},"querySelector()","を用いて",[17,30,31],{},"querySelector(\"#~~~\")","と取得した時に遭遇したエラーについてです。",[13,34,35,36,38],{},"タイトルの通りなのですが、",[17,37,27],{},"で先頭が数字のIDを指定するとエラーが起きます。",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-js shiki shiki-themes material-theme-ocean","document.querySelector(\"#16test\");\n\u002F\u002F VM490:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#16test' is not a valid selector.\n","js","",[17,47,48,83],{"__ignoreMap":45},[49,50,53,57,61,65,68,71,75,77,80],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"s0W1g","document",[49,58,60],{"class":59},"sAklC",".",[49,62,64],{"class":63},"sdLwU","querySelector",[49,66,67],{"class":55},"(",[49,69,70],{"class":59},"\"",[49,72,74],{"class":73},"sfyAc","#16test",[49,76,70],{"class":59},[49,78,79],{"class":55},")",[49,81,82],{"class":59},";\n",[49,84,86],{"class":51,"line":85},2,[49,87,89],{"class":88},"sC9rS","\u002F\u002F VM490:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#16test' is not a valid selector.\n",[13,91,92,93,95],{},"簡単にコンソールでチェックできます。「not a valid selector」の通り、有効なセレクタじゃないよと怒っています。なぜこんなことが起きるのかを調べたところ、",[17,94,27],{},"はCSSセレクタの仕様を使っており、CSSのIDセレクタは「#の後に数字をつけてはいけない」という仕様があるからです。",[13,97,98,99],{},"Stackoverflow\n",[100,101,102],"a",{"href":102,"rel":103},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F37270787\u002Funcaught-syntaxerror-failed-to-execute-queryselector-on-document",[104],"nofollow",[13,106,107,108],{},"上記のStackoverflowの回答が役に立ちました。HTML5の仕様としてはIDの最初の文字に数字を入れることは問題ありません。しかしCSS3のIDセレクタの仕様ではなんと、#のあとに数字を使用してはいけないと確かに書かれています。",[100,109,112],{"href":110,"rel":111},"https:\u002F\u002Fwww.w3.org\u002FTR\u002FCSS2\u002Fsyndata.html#characters",[104],"詳細はW3Cのこちらのページにあります。",[114,115,116],"blockquote",{},[13,117,118],{},"they cannot start with a digit, two hyphens, or a hyphen followed by a digit.",[13,120,121,122,125,126,128,129,131,132,135],{},"第一の解決策は",[17,123,124],{},"getElementById()","を使うことです。そう思うと、本来DOMにIDを持つ要素は必ず一つなので",[17,127,124],{},"を使えばいいのに、なんで",[17,130,27],{},"を使っていたんだろうか？と思っていたら、ランダムに生成したIDをもつ要素配下のある子要素を取得する処理を実装する際、",[17,133,134],{},"querySelector(`#{id} .item`)","みたいな感じで実装してた時でした。",[13,137,138,139,142,143,145,146,148],{},"この場合ランダムに生成されるIDに数字が含まれないようにするか、",[17,140,141],{},"getElementById(id)?.querySelector(\".item\")","として一旦",[17,144,124],{},"を使ってから",[17,147,27],{},"を使うといいかなと思います。",[150,151,152],"style",{},"html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}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);}",{"title":45,"searchDepth":154,"depth":154,"links":155},3,[],[157],"ministack","2022-11-23","md",null,{},true,"\u002Farticles\u002Fqueryselector-error-with-numeric",{"title":8,"description":8},"articles\u002Fqueryselector-error-with-numeric",[167,44],"html","-tKJHB-rOhRzOw2x_oCwOadM10j-DEzx-pvkwNQqzxA",{"id":170,"title":171,"body":172,"category":4328,"createdAt":4330,"description":4331,"extension":159,"index":154,"meta":4332,"navigation":162,"path":4333,"publish":162,"seo":4334,"series":4335,"seriesTitle":4336,"stem":4337,"tag":4338,"thumbnail":4340,"updatedAt":160,"__hash__":4341},"series\u002Fseries\u002Fwell-study-webpack-3.md","ちゃんと理解するWebpack5。３：HTMLのバンドルとPUGでのページ作成",{"type":10,"value":173,"toc":4312},[174,182,185,195,198,203,219,222,226,229,237,253,257,267,273,276,283,563,566,573,1095,1102,1133,1143,1368,1377,1388,1398,1401,1410,1472,1478,1515,1524,1685,1688,1743,1756,1760,1766,1769,1772,1775,1866,1873,1979,1982,1985,1991,1997,2018,2033,2036,2039,2045,2050,2056,2314,2317,2832,2835,2899,2911,2914,2917,2927,2956,2959,2963,2969,4309],[13,175,176,177,181],{},"こんにちはjunです。前回の記事",[100,178,180],{"href":179},"\u002Fseries\u002Fwell-study-webpack\u002F2","ちゃんと理解するWebpack5。２：Babel、画像の処理と複数バンドル","の続きの記事です。前回は画像のバンドル、Bableのトランスコンパイル、そして複数バンドルを行いました。今回は残りのHTMLの取り扱い方と、テンプレートエンジンと呼ばれるPUGを用いてHTMLでページをガンガン作成していこうと思います。",[13,183,184],{},"シチュエーションとしては、",[186,187,188,192],"ul",{},[189,190,191],"li",{},"サイト制作で上がってきたデザインからHTML・CSS・JSのテンプレートファイルを作る。",[189,193,194],{},"モックとしてサービスのweb部分を作ってみる",[13,196,197],{},"といった感じです。とりあえず「デザイン通りに見た目と動きつくってちょ！」というような依頼が来たと思ってください。",[199,200,202],"h2",{"id":201},"webpakcでhtmlを扱うには","webpakcでHTMLを扱うには",[13,204,205,206,210,211,214,215,218],{},"webpackには「html-loader」というhtmlファイルを扱うloaderがあります。",[100,207,209],{"href":208},"\u002Fseries\u002Fwell-study-webpack\u002F1","ちゃんと理解するWebpack5。１","では最初ということもあり、",[17,212,213],{},"dist","に直接置いていましたが、ローダーを使用することでHTMLも",[17,216,217],{},"src","配下に置いてバンドルできます。複数対応ももちろん可能です。",[13,220,221],{},"今回はまず素のHTMLを扱う方法とテンプレートエンジンという効率的にHTMLを生成できるpugを用いた2つのバンドル方法を今回はお伝えします。",[199,223,225],{"id":224},"単純htmlファイルをバンドルする","単純HTMLファイルをバンドルする",[13,227,228],{},"前回の構成に加えて",[40,230,235],{"className":231,"code":233,"language":234},[232],"language-text",".\n├── dist\n├── package-lock.json\n├── package.json\n├── src\n│   ├── imgs\n│   ├── html \u002F\u002FNEW!!\n│   │   ├── index.html \u002F\u002FNEW!!\n│   │   └── detail.html \u002F\u002FNEW!!\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n","text",[17,236,233],{"__ignoreMap":45},[13,238,239,241,242,245,246,249,250,252],{},[17,240,167],{},"というディレクトリを作成し、バンドル対象の",[17,243,244],{},"index.html","と",[17,247,248],{},"detail.html","を作成しました。目標はこの２つのファイルが",[17,251,213],{},"配下に配置されることです。",[254,255,256],"h3",{"id":256},"html扱いに必要なloaderとpluginを入れる",[13,258,259,260,245,263,266],{},"最初にHTMLファイルを扱うために必要な",[17,261,262],{},"html-loader",[17,264,265],{},"HtmlWebpackPlugin","をインストールします。",[40,268,271],{"className":269,"code":270,"language":234},[232],"npm install -D html-loader html-webpack-plugin\n",[17,272,270],{"__ignoreMap":45},[254,274,275],{"id":275},"ruleとloaderを追加",[13,277,278,279,282],{},"そしてwebpack.config.jsにhtmlに関する。記述を追加します。まずは",[17,280,281],{},"rules","にhtmlファイルのルールを追加します。",[40,284,289],{"className":285,"code":286,"filename":287,"language":288,"meta":45,"style":45},"language-javascript shiki shiki-themes material-theme-ocean","\n\u002F\u002F rulesの配列は後で\nlet rules = [\n    \u002F\u002F ... \n    \u002F\u002F 追加↓\n    {\n        test: \u002F\\.(html)$\u002F,\n        use: {\n            loader: 'html-loader',\n        }\n    },\n    \u002F\u002F ...\n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F ...\n}\n\u002F\u002F...\n\nmodule.exports = buildDefault;\n","webpack.config.js","javascript",[17,290,291,296,301,316,322,328,334,365,376,394,400,406,412,418,423,439,456,462,479,485,495,506,511,516,528,533,539,545,550],{"__ignoreMap":45},[49,292,293],{"class":51,"line":52},[49,294,295],{"emptyLinePlaceholder":162},"\n",[49,297,298],{"class":51,"line":85},[49,299,300],{"class":88},"\u002F\u002F rulesの配列は後で\n",[49,302,303,307,310,313],{"class":51,"line":154},[49,304,306],{"class":305},"sJ14y","let",[49,308,309],{"class":55}," rules ",[49,311,312],{"class":59},"=",[49,314,315],{"class":55}," [\n",[49,317,319],{"class":51,"line":318},4,[49,320,321],{"class":88},"    \u002F\u002F ... \n",[49,323,325],{"class":51,"line":324},5,[49,326,327],{"class":88},"    \u002F\u002F 追加↓\n",[49,329,331],{"class":51,"line":330},6,[49,332,333],{"class":59},"    {\n",[49,335,336,340,343,346,349,351,353,355,359,362],{"class":51,"line":4},[49,337,339],{"class":338},"s-wAU","        test",[49,341,342],{"class":59},":",[49,344,345],{"class":59}," \u002F",[49,347,348],{"class":55},"\\.",[49,350,67],{"class":59},[49,352,167],{"class":73},[49,354,79],{"class":59},[49,356,358],{"class":357},"s6cf3","$",[49,360,361],{"class":59},"\u002F",[49,363,364],{"class":59},",\n",[49,366,368,371,373],{"class":51,"line":367},8,[49,369,370],{"class":338},"        use",[49,372,342],{"class":59},[49,374,375],{"class":59}," {\n",[49,377,379,382,384,387,389,392],{"class":51,"line":378},9,[49,380,381],{"class":338},"            loader",[49,383,342],{"class":59},[49,385,386],{"class":59}," '",[49,388,262],{"class":73},[49,390,391],{"class":59},"'",[49,393,364],{"class":59},[49,395,397],{"class":51,"line":396},10,[49,398,399],{"class":59},"        }\n",[49,401,403],{"class":51,"line":402},11,[49,404,405],{"class":59},"    },\n",[49,407,409],{"class":51,"line":408},12,[49,410,411],{"class":88},"    \u002F\u002F ...\n",[49,413,415],{"class":51,"line":414},13,[49,416,417],{"class":55},"]\n",[49,419,421],{"class":51,"line":420},14,[49,422,295],{"emptyLinePlaceholder":162},[49,424,426,429,432,434,437],{"class":51,"line":425},15,[49,427,428],{"class":305},"const",[49,430,431],{"class":55}," buildDefault ",[49,433,312],{"class":59},[49,435,436],{"class":59}," =",[49,438,375],{"class":59},[49,440,442,445,447,449,452,454],{"class":51,"line":441},16,[49,443,444],{"class":338},"    entry",[49,446,342],{"class":59},[49,448,386],{"class":59},[49,450,451],{"class":73},".\u002Fsrc\u002Fjs\u002Fmain.js",[49,453,391],{"class":59},[49,455,364],{"class":59},[49,457,459],{"class":51,"line":458},17,[49,460,461],{"class":55},"  \n",[49,463,465,468,470,472,475,477],{"class":51,"line":464},18,[49,466,467],{"class":338},"    mode",[49,469,342],{"class":59},[49,471,70],{"class":59},[49,473,474],{"class":73},"development",[49,476,70],{"class":59},[49,478,364],{"class":59},[49,480,482],{"class":51,"line":481},19,[49,483,484],{"class":55},"    \n",[49,486,488,491,493],{"class":51,"line":487},20,[49,489,490],{"class":338},"    module",[49,492,342],{"class":59},[49,494,375],{"class":59},[49,496,498,501,503],{"class":51,"line":497},21,[49,499,500],{"class":338},"        rules",[49,502,342],{"class":59},[49,504,505],{"class":55}," rules\n",[49,507,509],{"class":51,"line":508},22,[49,510,405],{"class":59},[49,512,514],{"class":51,"line":513},23,[49,515,295],{"emptyLinePlaceholder":162},[49,517,519,522,524,526],{"class":51,"line":518},24,[49,520,521],{"class":338},"    rules",[49,523,342],{"class":59},[49,525,281],{"class":55},[49,527,364],{"class":59},[49,529,531],{"class":51,"line":530},25,[49,532,411],{"class":88},[49,534,536],{"class":51,"line":535},26,[49,537,538],{"class":59},"}\n",[49,540,542],{"class":51,"line":541},27,[49,543,544],{"class":88},"\u002F\u002F...\n",[49,546,548],{"class":51,"line":547},28,[49,549,295],{"emptyLinePlaceholder":162},[49,551,553,556,558,561],{"class":51,"line":552},29,[49,554,555],{"class":59},"module.exports",[49,557,436],{"class":59},[49,559,560],{"class":55}," buildDefault",[49,562,82],{"class":59},[254,564,565],{"id":565},"html-webpack-pluginの設定",[13,567,568,569,572],{},"とりあえずこれでwebpackはhtmlファイルを扱えるようになりました。次はentryでjsファイルを指定していたように、バンドル対象のhtmlをwebpackに読み込ませるために",[17,570,571],{},"html-webpack-plugin","を使用します。",[40,574,576],{"className":285,"code":575,"filename":287,"language":288,"meta":45,"style":45},"\u002F\u002F ファイル冒頭\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\n\n\u002F\u002F この２つを追加\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nlet rules = [\n    \u002F\u002F 省略... \n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F 以下略...\n}\n\n\u002F\u002F これらを追記\nconst htmlFiles = globule.find('src\u002Fhtml\u002F*.html');\n\nhtmlFiles.forEach((htmlsrc) => {\n    const htmlname = htmlsrc.split('\u002F').slice(-1)[0];\n\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${htmlname}`,\n        inject:'body',\n        template: htmlsrc,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[17,577,578,583,608,632,636,641,665,688,692,702,707,711,715,727,741,745,759,763,771,779,783,787,797,802,806,810,815,845,849,874,928,933,952,966,1014,1031,1043,1055,1064,1070,1079,1084],{"__ignoreMap":45},[49,579,580],{"class":51,"line":52},[49,581,582],{"class":88},"\u002F\u002F ファイル冒頭\n",[49,584,585,587,590,592,595,597,599,602,604,606],{"class":51,"line":85},[49,586,428],{"class":305},[49,588,589],{"class":55}," MiniCssExtractPlugin ",[49,591,312],{"class":59},[49,593,594],{"class":63}," require",[49,596,67],{"class":55},[49,598,391],{"class":59},[49,600,601],{"class":73},"mini-css-extract-plugin",[49,603,391],{"class":59},[49,605,79],{"class":55},[49,607,82],{"class":59},[49,609,610,612,615,617,619,621,623,626,628,630],{"class":51,"line":154},[49,611,428],{"class":305},[49,613,614],{"class":55}," path ",[49,616,312],{"class":59},[49,618,594],{"class":63},[49,620,67],{"class":55},[49,622,391],{"class":59},[49,624,625],{"class":73},"path",[49,627,391],{"class":59},[49,629,79],{"class":55},[49,631,82],{"class":59},[49,633,634],{"class":51,"line":318},[49,635,295],{"emptyLinePlaceholder":162},[49,637,638],{"class":51,"line":324},[49,639,640],{"class":88},"\u002F\u002F この２つを追加\n",[49,642,643,645,648,650,652,654,656,659,661,663],{"class":51,"line":330},[49,644,428],{"class":305},[49,646,647],{"class":55}," globule ",[49,649,312],{"class":59},[49,651,594],{"class":63},[49,653,67],{"class":55},[49,655,391],{"class":59},[49,657,658],{"class":73},"globule",[49,660,391],{"class":59},[49,662,79],{"class":55},[49,664,82],{"class":59},[49,666,667,669,672,674,676,678,680,682,684,686],{"class":51,"line":4},[49,668,428],{"class":305},[49,670,671],{"class":55}," HtmlWebpackPlugin ",[49,673,312],{"class":59},[49,675,594],{"class":63},[49,677,67],{"class":55},[49,679,391],{"class":59},[49,681,571],{"class":73},[49,683,391],{"class":59},[49,685,79],{"class":55},[49,687,82],{"class":59},[49,689,690],{"class":51,"line":367},[49,691,295],{"emptyLinePlaceholder":162},[49,693,694,696,698,700],{"class":51,"line":378},[49,695,306],{"class":305},[49,697,309],{"class":55},[49,699,312],{"class":59},[49,701,315],{"class":55},[49,703,704],{"class":51,"line":396},[49,705,706],{"class":88},"    \u002F\u002F 省略... \n",[49,708,709],{"class":51,"line":402},[49,710,417],{"class":55},[49,712,713],{"class":51,"line":408},[49,714,295],{"emptyLinePlaceholder":162},[49,716,717,719,721,723,725],{"class":51,"line":414},[49,718,428],{"class":305},[49,720,431],{"class":55},[49,722,312],{"class":59},[49,724,436],{"class":59},[49,726,375],{"class":59},[49,728,729,731,733,735,737,739],{"class":51,"line":420},[49,730,444],{"class":338},[49,732,342],{"class":59},[49,734,386],{"class":59},[49,736,451],{"class":73},[49,738,391],{"class":59},[49,740,364],{"class":59},[49,742,743],{"class":51,"line":425},[49,744,461],{"class":55},[49,746,747,749,751,753,755,757],{"class":51,"line":441},[49,748,467],{"class":338},[49,750,342],{"class":59},[49,752,70],{"class":59},[49,754,474],{"class":73},[49,756,70],{"class":59},[49,758,364],{"class":59},[49,760,761],{"class":51,"line":458},[49,762,484],{"class":55},[49,764,765,767,769],{"class":51,"line":464},[49,766,490],{"class":338},[49,768,342],{"class":59},[49,770,375],{"class":59},[49,772,773,775,777],{"class":51,"line":481},[49,774,500],{"class":338},[49,776,342],{"class":59},[49,778,505],{"class":55},[49,780,781],{"class":51,"line":487},[49,782,405],{"class":59},[49,784,785],{"class":51,"line":497},[49,786,295],{"emptyLinePlaceholder":162},[49,788,789,791,793,795],{"class":51,"line":508},[49,790,521],{"class":338},[49,792,342],{"class":59},[49,794,281],{"class":55},[49,796,364],{"class":59},[49,798,799],{"class":51,"line":513},[49,800,801],{"class":88},"    \u002F\u002F 以下略...\n",[49,803,804],{"class":51,"line":518},[49,805,538],{"class":59},[49,807,808],{"class":51,"line":530},[49,809,295],{"emptyLinePlaceholder":162},[49,811,812],{"class":51,"line":535},[49,813,814],{"class":88},"\u002F\u002F これらを追記\n",[49,816,817,819,822,824,827,829,832,834,836,839,841,843],{"class":51,"line":541},[49,818,428],{"class":305},[49,820,821],{"class":55}," htmlFiles ",[49,823,312],{"class":59},[49,825,826],{"class":55}," globule",[49,828,60],{"class":59},[49,830,831],{"class":63},"find",[49,833,67],{"class":55},[49,835,391],{"class":59},[49,837,838],{"class":73},"src\u002Fhtml\u002F*.html",[49,840,391],{"class":59},[49,842,79],{"class":55},[49,844,82],{"class":59},[49,846,847],{"class":51,"line":547},[49,848,295],{"emptyLinePlaceholder":162},[49,850,851,854,856,859,861,863,867,869,872],{"class":51,"line":552},[49,852,853],{"class":55},"htmlFiles",[49,855,60],{"class":59},[49,857,858],{"class":63},"forEach",[49,860,67],{"class":55},[49,862,67],{"class":59},[49,864,866],{"class":865},"s7ZW3","htmlsrc",[49,868,79],{"class":59},[49,870,871],{"class":305}," =>",[49,873,375],{"class":59},[49,875,877,880,883,885,888,890,893,895,897,899,901,903,905,908,910,913,917,920,923,926],{"class":51,"line":876},30,[49,878,879],{"class":305},"    const",[49,881,882],{"class":55}," htmlname",[49,884,436],{"class":59},[49,886,887],{"class":55}," htmlsrc",[49,889,60],{"class":59},[49,891,892],{"class":63},"split",[49,894,67],{"class":338},[49,896,391],{"class":59},[49,898,361],{"class":73},[49,900,391],{"class":59},[49,902,79],{"class":338},[49,904,60],{"class":59},[49,906,907],{"class":63},"slice",[49,909,67],{"class":338},[49,911,912],{"class":59},"-",[49,914,916],{"class":915},"sx098","1",[49,918,919],{"class":338},")[",[49,921,922],{"class":915},"0",[49,924,925],{"class":338},"]",[49,927,82],{"class":59},[49,929,931],{"class":51,"line":930},31,[49,932,295],{"emptyLinePlaceholder":162},[49,934,936,939,941,944,946,949],{"class":51,"line":935},32,[49,937,938],{"class":55},"    buildDefault",[49,940,60],{"class":59},[49,942,943],{"class":55},"plugins",[49,945,60],{"class":59},[49,947,948],{"class":63},"push",[49,950,951],{"class":338},"(\n",[49,953,955,958,961,963],{"class":51,"line":954},33,[49,956,957],{"class":59},"      new",[49,959,960],{"class":63}," HtmlWebpackPlugin",[49,962,67],{"class":338},[49,964,965],{"class":59},"{\n",[49,967,969,972,974,977,979,981,984,987,990,992,994,996,998,1001,1003,1006,1009,1012],{"class":51,"line":968},34,[49,970,971],{"class":338},"        filename",[49,973,342],{"class":59},[49,975,976],{"class":59}," `${",[49,978,625],{"class":55},[49,980,60],{"class":59},[49,982,983],{"class":63},"resolve",[49,985,986],{"class":55},"(__dirname",[49,988,989],{"class":59},",",[49,991,386],{"class":59},[49,993,213],{"class":73},[49,995,391],{"class":59},[49,997,79],{"class":55},[49,999,1000],{"class":59},"}",[49,1002,361],{"class":73},[49,1004,1005],{"class":59},"${",[49,1007,1008],{"class":55},"htmlname",[49,1010,1011],{"class":59},"}`",[49,1013,364],{"class":59},[49,1015,1017,1020,1022,1024,1027,1029],{"class":51,"line":1016},35,[49,1018,1019],{"class":338},"        inject",[49,1021,342],{"class":59},[49,1023,391],{"class":59},[49,1025,1026],{"class":73},"body",[49,1028,391],{"class":59},[49,1030,364],{"class":59},[49,1032,1034,1037,1039,1041],{"class":51,"line":1033},36,[49,1035,1036],{"class":338},"        template",[49,1038,342],{"class":59},[49,1040,887],{"class":55},[49,1042,364],{"class":59},[49,1044,1046,1049,1051],{"class":51,"line":1045},37,[49,1047,1048],{"class":338},"        minify",[49,1050,342],{"class":59},[49,1052,1054],{"class":1053},"sbqyR"," false\n",[49,1056,1058,1061],{"class":51,"line":1057},38,[49,1059,1060],{"class":59},"      }",[49,1062,1063],{"class":338},")\n",[49,1065,1067],{"class":51,"line":1066},39,[49,1068,1069],{"class":338},"    )\n",[49,1071,1073,1075,1077],{"class":51,"line":1072},40,[49,1074,1000],{"class":59},[49,1076,79],{"class":55},[49,1078,82],{"class":59},[49,1080,1082],{"class":51,"line":1081},41,[49,1083,295],{"emptyLinePlaceholder":162},[49,1085,1087,1089,1091,1093],{"class":51,"line":1086},42,[49,1088,555],{"class":59},[49,1090,436],{"class":59},[49,1092,560],{"class":55},[49,1094,82],{"class":59},[13,1096,1097,1098,1101],{},"詳細の解説をします。まず最初に必要なプラグインとnode.jsのモジュールをインポートします。そして以下の記述は",[17,1099,1100],{},"src\u002Fhtml","配下にあるhtmlファイルを全て取得する処理です。",[40,1103,1105],{"className":285,"code":1104,"language":288,"meta":45,"style":45},"const htmlFiles = globule.find('src\u002Fhtml\u002F*.html');\n",[17,1106,1107],{"__ignoreMap":45},[49,1108,1109,1111,1113,1115,1117,1119,1121,1123,1125,1127,1129,1131],{"class":51,"line":52},[49,1110,428],{"class":305},[49,1112,821],{"class":55},[49,1114,312],{"class":59},[49,1116,826],{"class":55},[49,1118,60],{"class":59},[49,1120,831],{"class":63},[49,1122,67],{"class":55},[49,1124,391],{"class":59},[49,1126,838],{"class":73},[49,1128,391],{"class":59},[49,1130,79],{"class":55},[49,1132,82],{"class":59},[13,1134,1135,1136,1138,1139,1142],{},"配列でhtmlファイルのパスが戻ってきますので、それらを",[17,1137,265],{},"にファイル分だけ",[17,1140,1141],{},"new","します。",[40,1144,1146],{"className":285,"code":1145,"language":288,"meta":45,"style":45},"htmlFiles.forEach((htmlsrc) => {\n    \u002F\u002F ファイル名を取得 src\u002Fhtml\u002Findex.html → index.html\n    const htmlname = htmlsrc.split('\u002F').slice(-1)[0];\n\n    \u002F\u002F webpackの設定にある、pluginsに以下のプラグインインスタンスを入れる。\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        \u002F\u002F distのファイル名。今回はsrcと同じ。\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${htmlname}`,\n\n        \u002F\u002F 自動的にバンドル対象のjs\b(main.js)とcss(style.css)を入れる。お節介ならfalseにする。\n        inject:'body',\n\n        \u002F\u002F 対象のhtmlファイル\n        template: htmlsrc,\n\n        \u002F\u002F 圧縮するかどうか。defaultはtrue\n        minify: false\n      })\n    )\n});\n",[17,1147,1148,1168,1173,1215,1219,1224,1238,1248,1253,1291,1295,1300,1314,1318,1323,1333,1337,1342,1350,1356,1360],{"__ignoreMap":45},[49,1149,1150,1152,1154,1156,1158,1160,1162,1164,1166],{"class":51,"line":52},[49,1151,853],{"class":55},[49,1153,60],{"class":59},[49,1155,858],{"class":63},[49,1157,67],{"class":55},[49,1159,67],{"class":59},[49,1161,866],{"class":865},[49,1163,79],{"class":59},[49,1165,871],{"class":305},[49,1167,375],{"class":59},[49,1169,1170],{"class":51,"line":85},[49,1171,1172],{"class":88},"    \u002F\u002F ファイル名を取得 src\u002Fhtml\u002Findex.html → index.html\n",[49,1174,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211,1213],{"class":51,"line":154},[49,1176,879],{"class":305},[49,1178,882],{"class":55},[49,1180,436],{"class":59},[49,1182,887],{"class":55},[49,1184,60],{"class":59},[49,1186,892],{"class":63},[49,1188,67],{"class":338},[49,1190,391],{"class":59},[49,1192,361],{"class":73},[49,1194,391],{"class":59},[49,1196,79],{"class":338},[49,1198,60],{"class":59},[49,1200,907],{"class":63},[49,1202,67],{"class":338},[49,1204,912],{"class":59},[49,1206,916],{"class":915},[49,1208,919],{"class":338},[49,1210,922],{"class":915},[49,1212,925],{"class":338},[49,1214,82],{"class":59},[49,1216,1217],{"class":51,"line":318},[49,1218,295],{"emptyLinePlaceholder":162},[49,1220,1221],{"class":51,"line":324},[49,1222,1223],{"class":88},"    \u002F\u002F webpackの設定にある、pluginsに以下のプラグインインスタンスを入れる。\n",[49,1225,1226,1228,1230,1232,1234,1236],{"class":51,"line":330},[49,1227,938],{"class":55},[49,1229,60],{"class":59},[49,1231,943],{"class":55},[49,1233,60],{"class":59},[49,1235,948],{"class":63},[49,1237,951],{"class":338},[49,1239,1240,1242,1244,1246],{"class":51,"line":4},[49,1241,957],{"class":59},[49,1243,960],{"class":63},[49,1245,67],{"class":338},[49,1247,965],{"class":59},[49,1249,1250],{"class":51,"line":367},[49,1251,1252],{"class":88},"        \u002F\u002F distのファイル名。今回はsrcと同じ。\n",[49,1254,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289],{"class":51,"line":378},[49,1256,971],{"class":338},[49,1258,342],{"class":59},[49,1260,976],{"class":59},[49,1262,625],{"class":55},[49,1264,60],{"class":59},[49,1266,983],{"class":63},[49,1268,986],{"class":55},[49,1270,989],{"class":59},[49,1272,386],{"class":59},[49,1274,213],{"class":73},[49,1276,391],{"class":59},[49,1278,79],{"class":55},[49,1280,1000],{"class":59},[49,1282,361],{"class":73},[49,1284,1005],{"class":59},[49,1286,1008],{"class":55},[49,1288,1011],{"class":59},[49,1290,364],{"class":59},[49,1292,1293],{"class":51,"line":396},[49,1294,295],{"emptyLinePlaceholder":162},[49,1296,1297],{"class":51,"line":402},[49,1298,1299],{"class":88},"        \u002F\u002F 自動的にバンドル対象のjs\b(main.js)とcss(style.css)を入れる。お節介ならfalseにする。\n",[49,1301,1302,1304,1306,1308,1310,1312],{"class":51,"line":408},[49,1303,1019],{"class":338},[49,1305,342],{"class":59},[49,1307,391],{"class":59},[49,1309,1026],{"class":73},[49,1311,391],{"class":59},[49,1313,364],{"class":59},[49,1315,1316],{"class":51,"line":414},[49,1317,295],{"emptyLinePlaceholder":162},[49,1319,1320],{"class":51,"line":420},[49,1321,1322],{"class":88},"        \u002F\u002F 対象のhtmlファイル\n",[49,1324,1325,1327,1329,1331],{"class":51,"line":425},[49,1326,1036],{"class":338},[49,1328,342],{"class":59},[49,1330,887],{"class":55},[49,1332,364],{"class":59},[49,1334,1335],{"class":51,"line":441},[49,1336,295],{"emptyLinePlaceholder":162},[49,1338,1339],{"class":51,"line":458},[49,1340,1341],{"class":88},"        \u002F\u002F 圧縮するかどうか。defaultはtrue\n",[49,1343,1344,1346,1348],{"class":51,"line":464},[49,1345,1048],{"class":338},[49,1347,342],{"class":59},[49,1349,1054],{"class":1053},[49,1351,1352,1354],{"class":51,"line":481},[49,1353,1060],{"class":59},[49,1355,1063],{"class":338},[49,1357,1358],{"class":51,"line":487},[49,1359,1069],{"class":338},[49,1361,1362,1364,1366],{"class":51,"line":497},[49,1363,1000],{"class":59},[49,1365,79],{"class":55},[49,1367,82],{"class":59},[13,1369,1370,1373,1374,1376],{},[17,1371,1372],{},"new HtmlWebpackPlugin()","では対象のHTMLファイルをwebpackに読み込ませますが、１ファイルづつなのでhtmlが複数ある場合、",[17,1375,658],{},"などを使用して複数の対象ファイルを取得してforeachで回します。",[13,1378,1379,1380,1382,1383,245,1385,1387],{},"こうすることで",[17,1381,1100],{},"配下のhtmlがバンドルされます。適当に内容を書いてnpm run buildしてみましょう。dist配下に",[17,1384,244],{},[17,1386,248],{},"が出力されるはずです。",[1389,1390,1394,1397],"div",{"className":1391},[1392,1393],"alert","alert-info",[17,1395,1396],{},"inject:'body'","がある場合、htmlにはバンドル対象のcss\u002Fjsを読み込む為のscriptやlinkを記述する必要はありません。自動的に挿入されます。\n",[254,1399,1400],{"id":1400},"画像パスの解決",[13,1402,1403,1404,1406,1407,1409],{},"HTML編の最後に画像パスの解決を行います。",[17,1405,262],{},"は",[17,1408,217],{},"などロード可能な属性を見つけるとそのパスなどの解決を行おうとします。たとえば以下のようなタグある場合",[40,1411,1414],{"className":1412,"code":1413,"language":167,"meta":45,"style":45},"language-html shiki shiki-themes material-theme-ocean","\u003C!-- バンドル前 -->\n\u003Cimg src=\"image.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\".\u002Fimage.png\"\u002F>\n",[17,1415,1416,1421,1444,1448,1453],{"__ignoreMap":45},[49,1417,1418],{"class":51,"line":52},[49,1419,1420],{"class":88},"\u003C!-- バンドル前 -->\n",[49,1422,1423,1426,1429,1432,1434,1436,1439,1441],{"class":51,"line":85},[49,1424,1425],{"class":59},"\u003C",[49,1427,1428],{"class":338},"img",[49,1430,1431],{"class":305}," src",[49,1433,312],{"class":59},[49,1435,70],{"class":59},[49,1437,1438],{"class":73},"image.png",[49,1440,70],{"class":59},[49,1442,1443],{"class":59},"\u002F>\n",[49,1445,1446],{"class":51,"line":154},[49,1447,295],{"emptyLinePlaceholder":162},[49,1449,1450],{"class":51,"line":318},[49,1451,1452],{"class":88},"\u003C!-- バンドル後 -->\n",[49,1454,1455,1457,1459,1461,1463,1465,1468,1470],{"class":51,"line":324},[49,1456,1425],{"class":59},[49,1458,1428],{"class":338},[49,1460,1431],{"class":305},[49,1462,312],{"class":59},[49,1464,70],{"class":59},[49,1466,1467],{"class":73},".\u002Fimage.png",[49,1469,70],{"class":59},[49,1471,1443],{"class":59},[13,1473,1474,1475,1477],{},"このように自動的にパスの調整を行います。相対パスだと階層が深い時大変ですので、scssではエイリアスを用いて",[17,1476,217],{},"を指定できましたが、htmlは残念ながらできません。",[40,1479,1481],{"className":1412,"code":1480,"language":167,"meta":45,"style":45},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"~\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- Module not found -->\n",[17,1482,1483,1487,1506,1510],{"__ignoreMap":45},[49,1484,1485],{"class":51,"line":52},[49,1486,1420],{"class":88},[49,1488,1489,1491,1493,1495,1497,1499,1502,1504],{"class":51,"line":85},[49,1490,1425],{"class":59},[49,1492,1428],{"class":338},[49,1494,1431],{"class":305},[49,1496,312],{"class":59},[49,1498,70],{"class":59},[49,1500,1501],{"class":73},"~\u002Fimg\u002Fimage.png",[49,1503,70],{"class":59},[49,1505,1443],{"class":59},[49,1507,1508],{"class":51,"line":154},[49,1509,295],{"emptyLinePlaceholder":162},[49,1511,1512],{"class":51,"line":318},[49,1513,1514],{"class":88},"\u003C!-- Module not found -->\n",[13,1516,1517,1518,1520,1521,1523],{},"しかし対処法はあります。",[17,1519,287],{},"の",[17,1522,983],{},"にrootsプロパティーを記述します。",[40,1525,1527],{"className":285,"code":1526,"filename":287,"language":288,"meta":45,"style":45},"const buildDefault = {\n    resolve:{\n        extensions: ['.js', '.json', '.scss', '.css'],\n        alias: {\n            '~': path.resolve(__dirname, 'src'),\n        },\n        \u002F\u002F ↓追加！\n        roots: [path.resolve(__dirname, \"src\")],\n    },\n}\n",[17,1528,1529,1539,1547,1595,1604,1637,1642,1647,1677,1681],{"__ignoreMap":45},[49,1530,1531,1533,1535,1537],{"class":51,"line":52},[49,1532,428],{"class":305},[49,1534,431],{"class":55},[49,1536,312],{"class":59},[49,1538,375],{"class":59},[49,1540,1541,1544],{"class":51,"line":85},[49,1542,1543],{"class":338},"    resolve",[49,1545,1546],{"class":59},":{\n",[49,1548,1549,1552,1554,1557,1559,1562,1564,1566,1568,1571,1573,1575,1577,1580,1582,1584,1586,1589,1591,1593],{"class":51,"line":154},[49,1550,1551],{"class":338},"        extensions",[49,1553,342],{"class":59},[49,1555,1556],{"class":55}," [",[49,1558,391],{"class":59},[49,1560,1561],{"class":73},".js",[49,1563,391],{"class":59},[49,1565,989],{"class":59},[49,1567,386],{"class":59},[49,1569,1570],{"class":73},".json",[49,1572,391],{"class":59},[49,1574,989],{"class":59},[49,1576,386],{"class":59},[49,1578,1579],{"class":73},".scss",[49,1581,391],{"class":59},[49,1583,989],{"class":59},[49,1585,386],{"class":59},[49,1587,1588],{"class":73},".css",[49,1590,391],{"class":59},[49,1592,925],{"class":55},[49,1594,364],{"class":59},[49,1596,1597,1600,1602],{"class":51,"line":318},[49,1598,1599],{"class":338},"        alias",[49,1601,342],{"class":59},[49,1603,375],{"class":59},[49,1605,1606,1609,1612,1614,1616,1619,1621,1623,1625,1627,1629,1631,1633,1635],{"class":51,"line":324},[49,1607,1608],{"class":59},"            '",[49,1610,1611],{"class":338},"~",[49,1613,391],{"class":59},[49,1615,342],{"class":59},[49,1617,1618],{"class":55}," path",[49,1620,60],{"class":59},[49,1622,983],{"class":63},[49,1624,986],{"class":55},[49,1626,989],{"class":59},[49,1628,386],{"class":59},[49,1630,217],{"class":73},[49,1632,391],{"class":59},[49,1634,79],{"class":55},[49,1636,364],{"class":59},[49,1638,1639],{"class":51,"line":330},[49,1640,1641],{"class":59},"        },\n",[49,1643,1644],{"class":51,"line":4},[49,1645,1646],{"class":88},"        \u002F\u002F ↓追加！\n",[49,1648,1649,1652,1654,1657,1659,1661,1663,1665,1668,1670,1672,1675],{"class":51,"line":367},[49,1650,1651],{"class":338},"        roots",[49,1653,342],{"class":59},[49,1655,1656],{"class":55}," [path",[49,1658,60],{"class":59},[49,1660,983],{"class":63},[49,1662,986],{"class":55},[49,1664,989],{"class":59},[49,1666,1667],{"class":59}," \"",[49,1669,217],{"class":73},[49,1671,70],{"class":59},[49,1673,1674],{"class":55},")]",[49,1676,364],{"class":59},[49,1678,1679],{"class":51,"line":378},[49,1680,405],{"class":59},[49,1682,1683],{"class":51,"line":396},[49,1684,538],{"class":59},[13,1686,1687],{},"このrootsプロパティを追加した後、パスは以下のようにします。",[40,1689,1691],{"className":1412,"code":1690,"language":167,"meta":45,"style":45},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\"img\u002Fimage.png\"\u002F>\n",[17,1692,1693,1697,1716,1720,1724],{"__ignoreMap":45},[49,1694,1695],{"class":51,"line":52},[49,1696,1420],{"class":88},[49,1698,1699,1701,1703,1705,1707,1709,1712,1714],{"class":51,"line":85},[49,1700,1425],{"class":59},[49,1702,1428],{"class":338},[49,1704,1431],{"class":305},[49,1706,312],{"class":59},[49,1708,70],{"class":59},[49,1710,1711],{"class":73},"\u002Fimg\u002Fimage.png",[49,1713,70],{"class":59},[49,1715,1443],{"class":59},[49,1717,1718],{"class":51,"line":154},[49,1719,295],{"emptyLinePlaceholder":162},[49,1721,1722],{"class":51,"line":318},[49,1723,1452],{"class":88},[49,1725,1726,1728,1730,1732,1734,1736,1739,1741],{"class":51,"line":324},[49,1727,1425],{"class":59},[49,1729,1428],{"class":338},[49,1731,1431],{"class":305},[49,1733,312],{"class":59},[49,1735,70],{"class":59},[49,1737,1738],{"class":73},"img\u002Fimage.png",[49,1740,70],{"class":59},[49,1742,1443],{"class":59},[13,1744,1745,1748,1749,1751,1752,1755],{},[17,1746,1747],{},"roots: [path.resolve(__dirname, \"src\")],","によって",[17,1750,1711],{},"のパスを",[17,1753,1754],{},"src\u002F","を基準に探してくれるようになります。HTMLの場合はこのようにして画像を指定します。",[199,1757,1759],{"id":1758},"pugでhtmlファイルをバンドルする","pugでHTMLファイルをバンドルする",[13,1761,1762,1763,1765],{},"ひとまず以上の設定でhtmlファイルが使用できるようになりました。",[17,1764,1100],{},"配下で必要なページ分だけのHTMLを作成して、スタイルはscss、jsも一つにまとめられてスマートに見えます。しかし、繰り返しの記述をしたりテンプレートを作成してより効率的に描きたい時もあると思います。そんな時、テンプレートエンジンと呼ばれるものを使用することでより効率よくマークアップができるようになります。今回はpugを用います。（他の候補としてEJSなどがある）",[254,1767,1768],{"id":1768},"pugの使い方",[13,1770,1771],{},"今回は詳しい説明は省略しますが、概要的に伝えます。pugは以下のような記述でhtmlのマークアップが可能です。",[13,1773,1774],{},"レイアウトテンプレートファイル",[40,1776,1781],{"className":1777,"code":1778,"filename":1779,"language":1780,"meta":45,"style":45},"language-pug shiki shiki-themes material-theme-ocean","doctype html\nhtml(lang=\"ja\")\n    block head\n        include ..\u002Fcomponents\u002Fhead_conf\n    body\n        .body-wrapper\n            block header\n                include ..\u002Fcomponents\u002Fheader\n\n            main.p-main-content\n                block content\n\n            block footer\n                include ..\u002Fcomponents\u002Ffooter\n            \n            block footerNav \n                include ..\u002Fcomponents\u002FfooterNav\n","layout\u002Fdefault.pug","pug",[17,1782,1783,1788,1793,1798,1803,1808,1813,1818,1823,1827,1832,1837,1841,1846,1851,1856,1861],{"__ignoreMap":45},[49,1784,1785],{"class":51,"line":52},[49,1786,1787],{},"doctype html\n",[49,1789,1790],{"class":51,"line":85},[49,1791,1792],{},"html(lang=\"ja\")\n",[49,1794,1795],{"class":51,"line":154},[49,1796,1797],{},"    block head\n",[49,1799,1800],{"class":51,"line":318},[49,1801,1802],{},"        include ..\u002Fcomponents\u002Fhead_conf\n",[49,1804,1805],{"class":51,"line":324},[49,1806,1807],{},"    body\n",[49,1809,1810],{"class":51,"line":330},[49,1811,1812],{},"        .body-wrapper\n",[49,1814,1815],{"class":51,"line":4},[49,1816,1817],{},"            block header\n",[49,1819,1820],{"class":51,"line":367},[49,1821,1822],{},"                include ..\u002Fcomponents\u002Fheader\n",[49,1824,1825],{"class":51,"line":378},[49,1826,295],{"emptyLinePlaceholder":162},[49,1828,1829],{"class":51,"line":396},[49,1830,1831],{},"            main.p-main-content\n",[49,1833,1834],{"class":51,"line":402},[49,1835,1836],{},"                block content\n",[49,1838,1839],{"class":51,"line":408},[49,1840,295],{"emptyLinePlaceholder":162},[49,1842,1843],{"class":51,"line":414},[49,1844,1845],{},"            block footer\n",[49,1847,1848],{"class":51,"line":420},[49,1849,1850],{},"                include ..\u002Fcomponents\u002Ffooter\n",[49,1852,1853],{"class":51,"line":425},[49,1854,1855],{},"            \n",[49,1857,1858],{"class":51,"line":441},[49,1859,1860],{},"            block footerNav \n",[49,1862,1863],{"class":51,"line":458},[49,1864,1865],{},"                include ..\u002Fcomponents\u002FfooterNav\n",[13,1867,1868,1869,1872],{},"main配下のページ内容（上記のテンプレートファイルの",[17,1870,1871],{},"block content","に展開）",[40,1874,1877],{"className":1777,"code":1875,"filename":1876,"language":1780,"meta":45,"style":45},"extends ..\u002Flayouts\u002Fdefault.pug\ninclude ..\u002Fcomponents\u002Fbadge\n    include ..\u002Fcomponents\u002F_data\n        - var recommneds = variables.recommneds\n\nblock content\n    .p-first-view-content\n        .p-sliders.swiper(id=\"top-slider\")\n            .p-slider-wrapper.swiper-wrapper\n                .c-slider.swiper-slide\n                    .c-img-adjuster\n                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n                .c-slider.swiper-slide\n                    .c-img-adjuster\n                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n    \n    div.p-fullfilled\n        .p-row-container\n            .p-row-wrapper\n                each val,index in recommneds\n                    +badge(val,\"recommend-\"+index)\n","pages\u002Findex.pug",[17,1878,1879,1884,1889,1894,1899,1903,1908,1913,1918,1923,1928,1933,1938,1942,1946,1950,1954,1959,1964,1969,1974],{"__ignoreMap":45},[49,1880,1881],{"class":51,"line":52},[49,1882,1883],{},"extends ..\u002Flayouts\u002Fdefault.pug\n",[49,1885,1886],{"class":51,"line":85},[49,1887,1888],{},"include ..\u002Fcomponents\u002Fbadge\n",[49,1890,1891],{"class":51,"line":154},[49,1892,1893],{},"    include ..\u002Fcomponents\u002F_data\n",[49,1895,1896],{"class":51,"line":318},[49,1897,1898],{},"        - var recommneds = variables.recommneds\n",[49,1900,1901],{"class":51,"line":324},[49,1902,295],{"emptyLinePlaceholder":162},[49,1904,1905],{"class":51,"line":330},[49,1906,1907],{},"block content\n",[49,1909,1910],{"class":51,"line":4},[49,1911,1912],{},"    .p-first-view-content\n",[49,1914,1915],{"class":51,"line":367},[49,1916,1917],{},"        .p-sliders.swiper(id=\"top-slider\")\n",[49,1919,1920],{"class":51,"line":378},[49,1921,1922],{},"            .p-slider-wrapper.swiper-wrapper\n",[49,1924,1925],{"class":51,"line":396},[49,1926,1927],{},"                .c-slider.swiper-slide\n",[49,1929,1930],{"class":51,"line":402},[49,1931,1932],{},"                    .c-img-adjuster\n",[49,1934,1935],{"class":51,"line":408},[49,1936,1937],{},"                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n",[49,1939,1940],{"class":51,"line":414},[49,1941,1927],{},[49,1943,1944],{"class":51,"line":420},[49,1945,1932],{},[49,1947,1948],{"class":51,"line":425},[49,1949,1937],{},[49,1951,1952],{"class":51,"line":441},[49,1953,484],{},[49,1955,1956],{"class":51,"line":458},[49,1957,1958],{},"    div.p-fullfilled\n",[49,1960,1961],{"class":51,"line":464},[49,1962,1963],{},"        .p-row-container\n",[49,1965,1966],{"class":51,"line":481},[49,1967,1968],{},"            .p-row-wrapper\n",[49,1970,1971],{"class":51,"line":487},[49,1972,1973],{},"                each val,index in recommneds\n",[49,1975,1976],{"class":51,"line":497},[49,1977,1978],{},"                    +badge(val,\"recommend-\"+index)\n",[13,1980,1981],{},"for文によるループ、テンプレート、mixinやインポートなどPHPなどバック側で行っていたような、htmlの構築ができます。laravelのbladeみたいな感じです。pugを使うことでhtmlで面倒と思っていたことは大体解消できます。変更にも強いのでpugは使うことをお勧めします。",[254,1983,1984],{"id":1984},"ディレクトリを少し変更",[13,1986,1987,1988,1990],{},"htmlの時は単に",[17,1989,1100],{},"配下にファイルを配置するだけでしたが、もう少しpugで管理しやすいように以下のように変更します。",[40,1992,1995],{"className":1993,"code":1994,"language":234},[232],".\n├── dist\n├── package-lock.json\n├── package.json\n├── src\n│   ├── imgs\n│   ├── html\n│   │   ├── component\n│   │   ├── layout\n│   │   └── page\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n",[17,1996,1994],{"__ignoreMap":45},[13,1998,1999,989,2002,989,2005,2008,2009,2011,2012,2014,2015,2017],{},[17,2000,2001],{},"component",[17,2003,2004],{},"layout",[17,2006,2007],{},"page",",というものを追加しました。",[17,2010,2001],{},"は繰り返し使われるパーツ（ボタンとかカードとか）のpugを格納、",[17,2013,2004],{},"はhead,bodyの構成を含めたmainタグ以外の箇所のレイアウトを決めるpugを格納し、",[17,2016,2007],{},"にバンドル対象の各種ページのpugを配置します。",[13,2019,2020,2022,2023,245,2026,2029,2030,2032],{},[17,2021,2007],{},"に先ほどの",[17,2024,2025],{},"index.pug",[17,2027,2028],{}," detail.pug","を配置して、最終的にhtmlにして",[17,2031,213],{},"に配置します。適宜component、layoutからファイルをインポートして使用します。私は大体のプロジェクトはこれで十分なカバーできる気がします。",[254,2034,2035],{"id":2035},"webpackでpugを扱う",[13,2037,2038],{},"それではwebpackでpugを扱えるようにしましょう。以下のloaderとpluginを入れます。",[40,2040,2043],{"className":2041,"code":2042,"language":234},[232],"npm install -D pug-loader html-webpack-plugin\n",[17,2044,2042],{"__ignoreMap":45},[13,2046,2047,2049],{},[17,2048,571],{}," はHTML編でここでは入っていれば入りません。",[13,2051,2052,2053,2055],{},"まずは",[17,2054,281],{},"にpugのruleとloaderを追加します。",[40,2057,2059],{"className":285,"code":2058,"filename":287,"language":288,"meta":45,"style":45},"\n\u002F\u002F rulesの配列は後で\nlet rules = [\n    \u002F\u002F ... \n    \u002F\u002F 追加↓\n    {\n        test: \u002F\\.pug$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n          {\n            loader: 'pug-loader',\n            options: {\n              pretty: true,\n            }\n          }\n        ]\n    }\n    \u002F\u002F ...\n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F ...\n}\n\u002F\u002F...\n\nmodule.exports = buildDefault;\n",[17,2060,2061,2065,2069,2079,2083,2087,2091,2109,2125,2133,2138,2153,2162,2174,2179,2184,2189,2194,2198,2202,2206,2218,2232,2236,2250,2254,2262,2270,2274,2278,2288,2292,2296,2300,2304],{"__ignoreMap":45},[49,2062,2063],{"class":51,"line":52},[49,2064,295],{"emptyLinePlaceholder":162},[49,2066,2067],{"class":51,"line":85},[49,2068,300],{"class":88},[49,2070,2071,2073,2075,2077],{"class":51,"line":154},[49,2072,306],{"class":305},[49,2074,309],{"class":55},[49,2076,312],{"class":59},[49,2078,315],{"class":55},[49,2080,2081],{"class":51,"line":318},[49,2082,321],{"class":88},[49,2084,2085],{"class":51,"line":324},[49,2086,327],{"class":88},[49,2088,2089],{"class":51,"line":330},[49,2090,333],{"class":59},[49,2092,2093,2095,2097,2099,2101,2103,2105,2107],{"class":51,"line":4},[49,2094,339],{"class":338},[49,2096,342],{"class":59},[49,2098,345],{"class":59},[49,2100,348],{"class":55},[49,2102,1780],{"class":73},[49,2104,358],{"class":357},[49,2106,361],{"class":59},[49,2108,364],{"class":59},[49,2110,2111,2114,2116,2118,2121,2123],{"class":51,"line":367},[49,2112,2113],{"class":338},"        exclude",[49,2115,342],{"class":59},[49,2117,345],{"class":59},[49,2119,2120],{"class":73},"node_modules",[49,2122,361],{"class":59},[49,2124,364],{"class":59},[49,2126,2127,2129,2131],{"class":51,"line":378},[49,2128,370],{"class":338},[49,2130,342],{"class":59},[49,2132,315],{"class":55},[49,2134,2135],{"class":51,"line":396},[49,2136,2137],{"class":59},"          {\n",[49,2139,2140,2142,2144,2146,2149,2151],{"class":51,"line":402},[49,2141,381],{"class":338},[49,2143,342],{"class":59},[49,2145,386],{"class":59},[49,2147,2148],{"class":73},"pug-loader",[49,2150,391],{"class":59},[49,2152,364],{"class":59},[49,2154,2155,2158,2160],{"class":51,"line":408},[49,2156,2157],{"class":338},"            options",[49,2159,342],{"class":59},[49,2161,375],{"class":59},[49,2163,2164,2167,2169,2172],{"class":51,"line":414},[49,2165,2166],{"class":338},"              pretty",[49,2168,342],{"class":59},[49,2170,2171],{"class":1053}," true",[49,2173,364],{"class":59},[49,2175,2176],{"class":51,"line":420},[49,2177,2178],{"class":59},"            }\n",[49,2180,2181],{"class":51,"line":425},[49,2182,2183],{"class":59},"          }\n",[49,2185,2186],{"class":51,"line":441},[49,2187,2188],{"class":55},"        ]\n",[49,2190,2191],{"class":51,"line":458},[49,2192,2193],{"class":59},"    }\n",[49,2195,2196],{"class":51,"line":464},[49,2197,411],{"class":88},[49,2199,2200],{"class":51,"line":481},[49,2201,417],{"class":55},[49,2203,2204],{"class":51,"line":487},[49,2205,295],{"emptyLinePlaceholder":162},[49,2207,2208,2210,2212,2214,2216],{"class":51,"line":497},[49,2209,428],{"class":305},[49,2211,431],{"class":55},[49,2213,312],{"class":59},[49,2215,436],{"class":59},[49,2217,375],{"class":59},[49,2219,2220,2222,2224,2226,2228,2230],{"class":51,"line":508},[49,2221,444],{"class":338},[49,2223,342],{"class":59},[49,2225,386],{"class":59},[49,2227,451],{"class":73},[49,2229,391],{"class":59},[49,2231,364],{"class":59},[49,2233,2234],{"class":51,"line":513},[49,2235,461],{"class":55},[49,2237,2238,2240,2242,2244,2246,2248],{"class":51,"line":518},[49,2239,467],{"class":338},[49,2241,342],{"class":59},[49,2243,70],{"class":59},[49,2245,474],{"class":73},[49,2247,70],{"class":59},[49,2249,364],{"class":59},[49,2251,2252],{"class":51,"line":530},[49,2253,484],{"class":55},[49,2255,2256,2258,2260],{"class":51,"line":535},[49,2257,490],{"class":338},[49,2259,342],{"class":59},[49,2261,375],{"class":59},[49,2263,2264,2266,2268],{"class":51,"line":541},[49,2265,500],{"class":338},[49,2267,342],{"class":59},[49,2269,505],{"class":55},[49,2271,2272],{"class":51,"line":547},[49,2273,405],{"class":59},[49,2275,2276],{"class":51,"line":552},[49,2277,295],{"emptyLinePlaceholder":162},[49,2279,2280,2282,2284,2286],{"class":51,"line":876},[49,2281,521],{"class":338},[49,2283,342],{"class":59},[49,2285,281],{"class":55},[49,2287,364],{"class":59},[49,2289,2290],{"class":51,"line":930},[49,2291,411],{"class":88},[49,2293,2294],{"class":51,"line":935},[49,2295,538],{"class":59},[49,2297,2298],{"class":51,"line":954},[49,2299,544],{"class":88},[49,2301,2302],{"class":51,"line":968},[49,2303,295],{"emptyLinePlaceholder":162},[49,2305,2306,2308,2310,2312],{"class":51,"line":1016},[49,2307,555],{"class":59},[49,2309,436],{"class":59},[49,2311,560],{"class":55},[49,2313,82],{"class":59},[13,2315,2316],{},"次に",[40,2318,2320],{"className":285,"code":2319,"filename":287,"language":288,"meta":45,"style":45},"\u002F\u002F ファイル冒頭\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\n\n\u002F\u002F この２つを追加\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nlet rules = [\n    \u002F\u002F 省略... \n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F 以下略...\n}\n\n\u002F\u002F これらを追記\nconst pugFiles = globule.find('src\u002Fhtml\u002Fpage\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n\npugFiles.forEach((pug) => {\n    const html = pug.split('\u002F').slice(-1)[0].replace('.pug', '.html');\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${html}`,\n        inject:'body',\n        template: pug,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[17,2321,2322,2326,2348,2370,2374,2378,2400,2422,2426,2436,2440,2444,2448,2460,2474,2478,2492,2496,2504,2512,2516,2520,2530,2534,2538,2542,2546,2574,2603,2611,2615,2636,2705,2719,2729,2767,2781,2791,2799,2805,2809,2817,2821],{"__ignoreMap":45},[49,2323,2324],{"class":51,"line":52},[49,2325,582],{"class":88},[49,2327,2328,2330,2332,2334,2336,2338,2340,2342,2344,2346],{"class":51,"line":85},[49,2329,428],{"class":305},[49,2331,589],{"class":55},[49,2333,312],{"class":59},[49,2335,594],{"class":63},[49,2337,67],{"class":55},[49,2339,391],{"class":59},[49,2341,601],{"class":73},[49,2343,391],{"class":59},[49,2345,79],{"class":55},[49,2347,82],{"class":59},[49,2349,2350,2352,2354,2356,2358,2360,2362,2364,2366,2368],{"class":51,"line":154},[49,2351,428],{"class":305},[49,2353,614],{"class":55},[49,2355,312],{"class":59},[49,2357,594],{"class":63},[49,2359,67],{"class":55},[49,2361,391],{"class":59},[49,2363,625],{"class":73},[49,2365,391],{"class":59},[49,2367,79],{"class":55},[49,2369,82],{"class":59},[49,2371,2372],{"class":51,"line":318},[49,2373,295],{"emptyLinePlaceholder":162},[49,2375,2376],{"class":51,"line":324},[49,2377,640],{"class":88},[49,2379,2380,2382,2384,2386,2388,2390,2392,2394,2396,2398],{"class":51,"line":330},[49,2381,428],{"class":305},[49,2383,647],{"class":55},[49,2385,312],{"class":59},[49,2387,594],{"class":63},[49,2389,67],{"class":55},[49,2391,391],{"class":59},[49,2393,658],{"class":73},[49,2395,391],{"class":59},[49,2397,79],{"class":55},[49,2399,82],{"class":59},[49,2401,2402,2404,2406,2408,2410,2412,2414,2416,2418,2420],{"class":51,"line":4},[49,2403,428],{"class":305},[49,2405,671],{"class":55},[49,2407,312],{"class":59},[49,2409,594],{"class":63},[49,2411,67],{"class":55},[49,2413,391],{"class":59},[49,2415,571],{"class":73},[49,2417,391],{"class":59},[49,2419,79],{"class":55},[49,2421,82],{"class":59},[49,2423,2424],{"class":51,"line":367},[49,2425,295],{"emptyLinePlaceholder":162},[49,2427,2428,2430,2432,2434],{"class":51,"line":378},[49,2429,306],{"class":305},[49,2431,309],{"class":55},[49,2433,312],{"class":59},[49,2435,315],{"class":55},[49,2437,2438],{"class":51,"line":396},[49,2439,706],{"class":88},[49,2441,2442],{"class":51,"line":402},[49,2443,417],{"class":55},[49,2445,2446],{"class":51,"line":408},[49,2447,295],{"emptyLinePlaceholder":162},[49,2449,2450,2452,2454,2456,2458],{"class":51,"line":414},[49,2451,428],{"class":305},[49,2453,431],{"class":55},[49,2455,312],{"class":59},[49,2457,436],{"class":59},[49,2459,375],{"class":59},[49,2461,2462,2464,2466,2468,2470,2472],{"class":51,"line":420},[49,2463,444],{"class":338},[49,2465,342],{"class":59},[49,2467,386],{"class":59},[49,2469,451],{"class":73},[49,2471,391],{"class":59},[49,2473,364],{"class":59},[49,2475,2476],{"class":51,"line":425},[49,2477,461],{"class":55},[49,2479,2480,2482,2484,2486,2488,2490],{"class":51,"line":441},[49,2481,467],{"class":338},[49,2483,342],{"class":59},[49,2485,70],{"class":59},[49,2487,474],{"class":73},[49,2489,70],{"class":59},[49,2491,364],{"class":59},[49,2493,2494],{"class":51,"line":458},[49,2495,484],{"class":55},[49,2497,2498,2500,2502],{"class":51,"line":464},[49,2499,490],{"class":338},[49,2501,342],{"class":59},[49,2503,375],{"class":59},[49,2505,2506,2508,2510],{"class":51,"line":481},[49,2507,500],{"class":338},[49,2509,342],{"class":59},[49,2511,505],{"class":55},[49,2513,2514],{"class":51,"line":487},[49,2515,405],{"class":59},[49,2517,2518],{"class":51,"line":497},[49,2519,295],{"emptyLinePlaceholder":162},[49,2521,2522,2524,2526,2528],{"class":51,"line":508},[49,2523,521],{"class":338},[49,2525,342],{"class":59},[49,2527,281],{"class":55},[49,2529,364],{"class":59},[49,2531,2532],{"class":51,"line":513},[49,2533,801],{"class":88},[49,2535,2536],{"class":51,"line":518},[49,2537,538],{"class":59},[49,2539,2540],{"class":51,"line":530},[49,2541,295],{"emptyLinePlaceholder":162},[49,2543,2544],{"class":51,"line":535},[49,2545,814],{"class":88},[49,2547,2548,2550,2553,2555,2557,2559,2561,2563,2565,2568,2570,2572],{"class":51,"line":541},[49,2549,428],{"class":305},[49,2551,2552],{"class":55}," pugFiles ",[49,2554,312],{"class":59},[49,2556,826],{"class":55},[49,2558,60],{"class":59},[49,2560,831],{"class":63},[49,2562,67],{"class":55},[49,2564,391],{"class":59},[49,2566,2567],{"class":73},"src\u002Fhtml\u002Fpage\u002F*",[49,2569,391],{"class":59},[49,2571,989],{"class":59},[49,2573,375],{"class":59},[49,2575,2576,2579,2581,2584,2586,2589,2591,2593,2595,2598,2600],{"class":51,"line":547},[49,2577,2578],{"class":338},"    ignore",[49,2580,342],{"class":59},[49,2582,2583],{"class":55}," [ ",[49,2585,391],{"class":59},[49,2587,2588],{"class":73},"src\u002Fhtml\u002Fcomponents\u002F*",[49,2590,391],{"class":59},[49,2592,989],{"class":59},[49,2594,391],{"class":59},[49,2596,2597],{"class":73},"src\u002Fhtml.layouts\u002F*",[49,2599,391],{"class":59},[49,2601,2602],{"class":55}," ]\n",[49,2604,2605,2607,2609],{"class":51,"line":552},[49,2606,1000],{"class":59},[49,2608,79],{"class":55},[49,2610,82],{"class":59},[49,2612,2613],{"class":51,"line":876},[49,2614,295],{"emptyLinePlaceholder":162},[49,2616,2617,2620,2622,2624,2626,2628,2630,2632,2634],{"class":51,"line":930},[49,2618,2619],{"class":55},"pugFiles",[49,2621,60],{"class":59},[49,2623,858],{"class":63},[49,2625,67],{"class":55},[49,2627,67],{"class":59},[49,2629,1780],{"class":865},[49,2631,79],{"class":59},[49,2633,871],{"class":305},[49,2635,375],{"class":59},[49,2637,2638,2640,2643,2645,2648,2650,2652,2654,2656,2658,2660,2662,2664,2666,2668,2670,2672,2674,2676,2678,2680,2683,2685,2687,2690,2692,2694,2696,2699,2701,2703],{"class":51,"line":935},[49,2639,879],{"class":305},[49,2641,2642],{"class":55}," html",[49,2644,436],{"class":59},[49,2646,2647],{"class":55}," pug",[49,2649,60],{"class":59},[49,2651,892],{"class":63},[49,2653,67],{"class":338},[49,2655,391],{"class":59},[49,2657,361],{"class":73},[49,2659,391],{"class":59},[49,2661,79],{"class":338},[49,2663,60],{"class":59},[49,2665,907],{"class":63},[49,2667,67],{"class":338},[49,2669,912],{"class":59},[49,2671,916],{"class":915},[49,2673,919],{"class":338},[49,2675,922],{"class":915},[49,2677,925],{"class":338},[49,2679,60],{"class":59},[49,2681,2682],{"class":63},"replace",[49,2684,67],{"class":338},[49,2686,391],{"class":59},[49,2688,2689],{"class":73},".pug",[49,2691,391],{"class":59},[49,2693,989],{"class":59},[49,2695,386],{"class":59},[49,2697,2698],{"class":73},".html",[49,2700,391],{"class":59},[49,2702,79],{"class":338},[49,2704,82],{"class":59},[49,2706,2707,2709,2711,2713,2715,2717],{"class":51,"line":954},[49,2708,938],{"class":55},[49,2710,60],{"class":59},[49,2712,943],{"class":55},[49,2714,60],{"class":59},[49,2716,948],{"class":63},[49,2718,951],{"class":338},[49,2720,2721,2723,2725,2727],{"class":51,"line":968},[49,2722,957],{"class":59},[49,2724,960],{"class":63},[49,2726,67],{"class":338},[49,2728,965],{"class":59},[49,2730,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751,2753,2755,2757,2759,2761,2763,2765],{"class":51,"line":1016},[49,2732,971],{"class":338},[49,2734,342],{"class":59},[49,2736,976],{"class":59},[49,2738,625],{"class":55},[49,2740,60],{"class":59},[49,2742,983],{"class":63},[49,2744,986],{"class":55},[49,2746,989],{"class":59},[49,2748,386],{"class":59},[49,2750,213],{"class":73},[49,2752,391],{"class":59},[49,2754,79],{"class":55},[49,2756,1000],{"class":59},[49,2758,361],{"class":73},[49,2760,1005],{"class":59},[49,2762,167],{"class":55},[49,2764,1011],{"class":59},[49,2766,364],{"class":59},[49,2768,2769,2771,2773,2775,2777,2779],{"class":51,"line":1033},[49,2770,1019],{"class":338},[49,2772,342],{"class":59},[49,2774,391],{"class":59},[49,2776,1026],{"class":73},[49,2778,391],{"class":59},[49,2780,364],{"class":59},[49,2782,2783,2785,2787,2789],{"class":51,"line":1045},[49,2784,1036],{"class":338},[49,2786,342],{"class":59},[49,2788,2647],{"class":55},[49,2790,364],{"class":59},[49,2792,2793,2795,2797],{"class":51,"line":1057},[49,2794,1048],{"class":338},[49,2796,342],{"class":59},[49,2798,1054],{"class":1053},[49,2800,2801,2803],{"class":51,"line":1066},[49,2802,1060],{"class":59},[49,2804,1063],{"class":338},[49,2806,2807],{"class":51,"line":1072},[49,2808,1069],{"class":338},[49,2810,2811,2813,2815],{"class":51,"line":1081},[49,2812,1000],{"class":59},[49,2814,79],{"class":55},[49,2816,82],{"class":59},[49,2818,2819],{"class":51,"line":1086},[49,2820,295],{"emptyLinePlaceholder":162},[49,2822,2824,2826,2828,2830],{"class":51,"line":2823},43,[49,2825,555],{"class":59},[49,2827,436],{"class":59},[49,2829,560],{"class":55},[49,2831,82],{"class":59},[13,2833,2834],{},"詳細はHTML編の記述を見てください。HTML編と似ていますが、",[40,2836,2838],{"className":285,"code":2837,"language":288,"meta":45,"style":45},"const pugFiles = globule.find('src\u002Fhtml\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n",[17,2839,2840,2867,2891],{"__ignoreMap":45},[49,2841,2842,2844,2846,2848,2850,2852,2854,2856,2858,2861,2863,2865],{"class":51,"line":52},[49,2843,428],{"class":305},[49,2845,2552],{"class":55},[49,2847,312],{"class":59},[49,2849,826],{"class":55},[49,2851,60],{"class":59},[49,2853,831],{"class":63},[49,2855,67],{"class":55},[49,2857,391],{"class":59},[49,2859,2860],{"class":73},"src\u002Fhtml\u002F*",[49,2862,391],{"class":59},[49,2864,989],{"class":59},[49,2866,375],{"class":59},[49,2868,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889],{"class":51,"line":85},[49,2870,2578],{"class":338},[49,2872,342],{"class":59},[49,2874,2583],{"class":55},[49,2876,391],{"class":59},[49,2878,2588],{"class":73},[49,2880,391],{"class":59},[49,2882,989],{"class":59},[49,2884,391],{"class":59},[49,2886,2597],{"class":73},[49,2888,391],{"class":59},[49,2890,2602],{"class":55},[49,2892,2893,2895,2897],{"class":51,"line":154},[49,2894,1000],{"class":59},[49,2896,79],{"class":55},[49,2898,82],{"class":59},[13,2900,2901,2903,2904,2907,2908,2910],{},[17,2902,658],{},"では",[17,2905,2906],{},"ignore","を指定して全てのpugファイルを拾わないようにします。（今回の構成ならfindするディレクトリを ",[17,2909,2567],{}," にしてもいいかもしれません）",[13,2912,2913],{},"基本的にはこれでpugは使えるようになります。",[254,2915,2916],{"id":2916},"pugでの画像パスの解決",[13,2918,2919,2920,2922,2923,2926],{},"HTMLでは",[17,2921,983],{},"で",[17,2924,2925],{},"roots","を指定していました。pugではそれらの指定は特に必要なく、以下のように指定します。",[40,2928,2930],{"className":1777,"code":2929,"language":1780,"meta":45,"style":45},"\u002F\u002F- OK\nimg(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n\n\u002F\u002F- NG\nimg(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[17,2931,2932,2937,2942,2946,2951],{"__ignoreMap":45},[49,2933,2934],{"class":51,"line":52},[49,2935,2936],{},"\u002F\u002F- OK\n",[49,2938,2939],{"class":51,"line":85},[49,2940,2941],{},"img(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n",[49,2943,2944],{"class":51,"line":154},[49,2945,295],{"emptyLinePlaceholder":162},[49,2947,2948],{"class":51,"line":318},[49,2949,2950],{},"\u002F\u002F- NG\n",[49,2952,2953],{"class":51,"line":324},[49,2954,2955],{},"img(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[13,2957,2958],{},"pugではnode.jsやjsの記述が利用できる為、requireを用いてエイリアスと一緒にパスの解決ができます。",[199,2960,2962],{"id":2961},"以上","以上！",[13,2964,2965,2966,2968],{},"以上でwebpackを用いたjs,scss,画像,htmlのバンドルは以上となります。vueやtypecriptの導入を考えるとさらに深い理解は必要そうですが、ひとまずHTMLのマークアップ程度であれば今回の構成を用いれば十分な気がします。vue・typesciptもいずれやってみようと思います。また今回使用した",[17,2967,287],{},"は以下の通りとなります。参考にどうぞ。",[40,2970,2972],{"className":285,"code":2971,"filename":287,"language":288,"meta":45,"style":45},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n  \nlet rules = [\n    {\n        test: \u002F\\.(sa|sc|c)ss$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n            MiniCssExtractPlugin.loader,\n            {\n                loader: 'css-loader',\n                options: { url: true }\n            },\n            'sass-loader',\n        ],\n    },\n    {\n        test: \u002F\\.(png|jpg|gif|svg)$\u002Fi,\n        generator: {\n            filename: 'img\u002F[name][ext][query]'\n        },\n        type: 'asset\u002Fresource'\n    },\n    {\n        test: \u002F\\.(html)$\u002F,\n        use: {\n            loader: 'html-loader',\n        }\n     },\n    {\n        test: \u002F\\.pug$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n          {\n            loader: 'pug-loader',\n            options: {\n              pretty: true,\n            }\n          }\n        ]\n    }\n]\n\nif(process.env.es5){\n    rules.push(\n        {\n            test: \u002F\\.m?js$\u002F,\n            exclude: \u002F(node_modules|bower_components)\u002F,\n            use: {\n              loader: 'babel-loader',\n              options: {\n                presets: ['@babel\u002Fpreset-env']\n              }\n            },\n            generator: {\n              filename: '[name].js'\n            }\n        }\n    )\n}\n\nconst buildDefault = {\n    entry:['.\u002Fsrc\u002Findex.js'],\n  \n    mode:process.env.mode,\n    \n    module: {\n        rules: rules\n    },\n    resolve:{\n        extensions: ['.js', '.json', '.scss', '.css'],\n        alias: {\n          '~': path.resolve(__dirname, 'src'),\n        },\n        roots: [path.resolve(__dirname, \"src\")],\n    },\n    \u002F\u002F ファイルの出力設定\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        filename: '[name].js',\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: '[name].css'\n        }),\n    ]\n};\n\nconst pugFiles = globule.find('src\u002Fhtml\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n\npugFiles.forEach((pug) => {\n    const html = pug.split('\u002F').slice(-1)[0].replace('.pug', '.html');\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${html}`,\n        inject:'body',\n        template: pug,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[17,2973,2974,2996,3018,3040,3062,3066,3076,3080,3117,3131,3139,3151,3156,3172,3192,3197,3208,3215,3219,3223,3264,3273,3288,3292,3306,3310,3314,3336,3344,3358,3362,3367,3371,3389,3403,3411,3415,3429,3437,3447,3451,3455,3459,3463,3468,3473,3494,3505,3511,3537,3560,3570,3587,3597,3616,3622,3627,3637,3652,3657,3662,3667,3672,3677,3688,3709,3714,3735,3740,3749,3758,3763,3770,3813,3822,3854,3859,3886,3891,3897,3907,3913,3936,3951,3956,3966,3979,3993,4003,4009,4015,4020,4047,4072,4081,4086,4107,4172,4187,4198,4237,4252,4263,4272,4279,4284,4293,4298],{"__ignoreMap":45},[49,2975,2976,2978,2980,2982,2984,2986,2988,2990,2992,2994],{"class":51,"line":52},[49,2977,428],{"class":305},[49,2979,589],{"class":55},[49,2981,312],{"class":59},[49,2983,594],{"class":63},[49,2985,67],{"class":55},[49,2987,391],{"class":59},[49,2989,601],{"class":73},[49,2991,391],{"class":59},[49,2993,79],{"class":55},[49,2995,82],{"class":59},[49,2997,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016],{"class":51,"line":85},[49,2999,428],{"class":305},[49,3001,614],{"class":55},[49,3003,312],{"class":59},[49,3005,594],{"class":63},[49,3007,67],{"class":55},[49,3009,391],{"class":59},[49,3011,625],{"class":73},[49,3013,391],{"class":59},[49,3015,79],{"class":55},[49,3017,82],{"class":59},[49,3019,3020,3022,3024,3026,3028,3030,3032,3034,3036,3038],{"class":51,"line":154},[49,3021,428],{"class":305},[49,3023,647],{"class":55},[49,3025,312],{"class":59},[49,3027,594],{"class":63},[49,3029,67],{"class":55},[49,3031,391],{"class":59},[49,3033,658],{"class":73},[49,3035,391],{"class":59},[49,3037,79],{"class":55},[49,3039,82],{"class":59},[49,3041,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060],{"class":51,"line":318},[49,3043,428],{"class":305},[49,3045,671],{"class":55},[49,3047,312],{"class":59},[49,3049,594],{"class":63},[49,3051,67],{"class":55},[49,3053,391],{"class":59},[49,3055,571],{"class":73},[49,3057,391],{"class":59},[49,3059,79],{"class":55},[49,3061,82],{"class":59},[49,3063,3064],{"class":51,"line":324},[49,3065,461],{"class":55},[49,3067,3068,3070,3072,3074],{"class":51,"line":330},[49,3069,306],{"class":305},[49,3071,309],{"class":55},[49,3073,312],{"class":59},[49,3075,315],{"class":55},[49,3077,3078],{"class":51,"line":4},[49,3079,333],{"class":59},[49,3081,3082,3084,3086,3088,3090,3092,3095,3098,3101,3103,3106,3108,3111,3113,3115],{"class":51,"line":367},[49,3083,339],{"class":338},[49,3085,342],{"class":59},[49,3087,345],{"class":59},[49,3089,348],{"class":55},[49,3091,67],{"class":59},[49,3093,3094],{"class":73},"sa",[49,3096,3097],{"class":59},"|",[49,3099,3100],{"class":73},"sc",[49,3102,3097],{"class":59},[49,3104,3105],{"class":73},"c",[49,3107,79],{"class":59},[49,3109,3110],{"class":73},"ss",[49,3112,358],{"class":357},[49,3114,361],{"class":59},[49,3116,364],{"class":59},[49,3118,3119,3121,3123,3125,3127,3129],{"class":51,"line":378},[49,3120,2113],{"class":338},[49,3122,342],{"class":59},[49,3124,345],{"class":59},[49,3126,2120],{"class":73},[49,3128,361],{"class":59},[49,3130,364],{"class":59},[49,3132,3133,3135,3137],{"class":51,"line":396},[49,3134,370],{"class":338},[49,3136,342],{"class":59},[49,3138,315],{"class":55},[49,3140,3141,3144,3146,3149],{"class":51,"line":402},[49,3142,3143],{"class":55},"            MiniCssExtractPlugin",[49,3145,60],{"class":59},[49,3147,3148],{"class":55},"loader",[49,3150,364],{"class":59},[49,3152,3153],{"class":51,"line":408},[49,3154,3155],{"class":59},"            {\n",[49,3157,3158,3161,3163,3165,3168,3170],{"class":51,"line":414},[49,3159,3160],{"class":338},"                loader",[49,3162,342],{"class":59},[49,3164,386],{"class":59},[49,3166,3167],{"class":73},"css-loader",[49,3169,391],{"class":59},[49,3171,364],{"class":59},[49,3173,3174,3177,3179,3182,3185,3187,3189],{"class":51,"line":420},[49,3175,3176],{"class":338},"                options",[49,3178,342],{"class":59},[49,3180,3181],{"class":59}," {",[49,3183,3184],{"class":338}," url",[49,3186,342],{"class":59},[49,3188,2171],{"class":1053},[49,3190,3191],{"class":59}," }\n",[49,3193,3194],{"class":51,"line":425},[49,3195,3196],{"class":59},"            },\n",[49,3198,3199,3201,3204,3206],{"class":51,"line":441},[49,3200,1608],{"class":59},[49,3202,3203],{"class":73},"sass-loader",[49,3205,391],{"class":59},[49,3207,364],{"class":59},[49,3209,3210,3213],{"class":51,"line":458},[49,3211,3212],{"class":55},"        ]",[49,3214,364],{"class":59},[49,3216,3217],{"class":51,"line":464},[49,3218,405],{"class":59},[49,3220,3221],{"class":51,"line":481},[49,3222,333],{"class":59},[49,3224,3225,3227,3229,3231,3233,3235,3238,3240,3243,3245,3248,3250,3253,3255,3257,3259,3262],{"class":51,"line":487},[49,3226,339],{"class":338},[49,3228,342],{"class":59},[49,3230,345],{"class":59},[49,3232,348],{"class":55},[49,3234,67],{"class":59},[49,3236,3237],{"class":73},"png",[49,3239,3097],{"class":59},[49,3241,3242],{"class":73},"jpg",[49,3244,3097],{"class":59},[49,3246,3247],{"class":73},"gif",[49,3249,3097],{"class":59},[49,3251,3252],{"class":73},"svg",[49,3254,79],{"class":59},[49,3256,358],{"class":357},[49,3258,361],{"class":59},[49,3260,3261],{"class":915},"i",[49,3263,364],{"class":59},[49,3265,3266,3269,3271],{"class":51,"line":497},[49,3267,3268],{"class":338},"        generator",[49,3270,342],{"class":59},[49,3272,375],{"class":59},[49,3274,3275,3278,3280,3282,3285],{"class":51,"line":508},[49,3276,3277],{"class":338},"            filename",[49,3279,342],{"class":59},[49,3281,386],{"class":59},[49,3283,3284],{"class":73},"img\u002F[name][ext][query]",[49,3286,3287],{"class":59},"'\n",[49,3289,3290],{"class":51,"line":513},[49,3291,1641],{"class":59},[49,3293,3294,3297,3299,3301,3304],{"class":51,"line":518},[49,3295,3296],{"class":338},"        type",[49,3298,342],{"class":59},[49,3300,386],{"class":59},[49,3302,3303],{"class":73},"asset\u002Fresource",[49,3305,3287],{"class":59},[49,3307,3308],{"class":51,"line":530},[49,3309,405],{"class":59},[49,3311,3312],{"class":51,"line":535},[49,3313,333],{"class":59},[49,3315,3316,3318,3320,3322,3324,3326,3328,3330,3332,3334],{"class":51,"line":541},[49,3317,339],{"class":338},[49,3319,342],{"class":59},[49,3321,345],{"class":59},[49,3323,348],{"class":55},[49,3325,67],{"class":59},[49,3327,167],{"class":73},[49,3329,79],{"class":59},[49,3331,358],{"class":357},[49,3333,361],{"class":59},[49,3335,364],{"class":59},[49,3337,3338,3340,3342],{"class":51,"line":547},[49,3339,370],{"class":338},[49,3341,342],{"class":59},[49,3343,375],{"class":59},[49,3345,3346,3348,3350,3352,3354,3356],{"class":51,"line":552},[49,3347,381],{"class":338},[49,3349,342],{"class":59},[49,3351,386],{"class":59},[49,3353,262],{"class":73},[49,3355,391],{"class":59},[49,3357,364],{"class":59},[49,3359,3360],{"class":51,"line":876},[49,3361,399],{"class":59},[49,3363,3364],{"class":51,"line":930},[49,3365,3366],{"class":59},"     },\n",[49,3368,3369],{"class":51,"line":935},[49,3370,333],{"class":59},[49,3372,3373,3375,3377,3379,3381,3383,3385,3387],{"class":51,"line":954},[49,3374,339],{"class":338},[49,3376,342],{"class":59},[49,3378,345],{"class":59},[49,3380,348],{"class":55},[49,3382,1780],{"class":73},[49,3384,358],{"class":357},[49,3386,361],{"class":59},[49,3388,364],{"class":59},[49,3390,3391,3393,3395,3397,3399,3401],{"class":51,"line":968},[49,3392,2113],{"class":338},[49,3394,342],{"class":59},[49,3396,345],{"class":59},[49,3398,2120],{"class":73},[49,3400,361],{"class":59},[49,3402,364],{"class":59},[49,3404,3405,3407,3409],{"class":51,"line":1016},[49,3406,370],{"class":338},[49,3408,342],{"class":59},[49,3410,315],{"class":55},[49,3412,3413],{"class":51,"line":1033},[49,3414,2137],{"class":59},[49,3416,3417,3419,3421,3423,3425,3427],{"class":51,"line":1045},[49,3418,381],{"class":338},[49,3420,342],{"class":59},[49,3422,386],{"class":59},[49,3424,2148],{"class":73},[49,3426,391],{"class":59},[49,3428,364],{"class":59},[49,3430,3431,3433,3435],{"class":51,"line":1057},[49,3432,2157],{"class":338},[49,3434,342],{"class":59},[49,3436,375],{"class":59},[49,3438,3439,3441,3443,3445],{"class":51,"line":1066},[49,3440,2166],{"class":338},[49,3442,342],{"class":59},[49,3444,2171],{"class":1053},[49,3446,364],{"class":59},[49,3448,3449],{"class":51,"line":1072},[49,3450,2178],{"class":59},[49,3452,3453],{"class":51,"line":1081},[49,3454,2183],{"class":59},[49,3456,3457],{"class":51,"line":1086},[49,3458,2188],{"class":55},[49,3460,3461],{"class":51,"line":2823},[49,3462,2193],{"class":59},[49,3464,3466],{"class":51,"line":3465},44,[49,3467,417],{"class":55},[49,3469,3471],{"class":51,"line":3470},45,[49,3472,295],{"emptyLinePlaceholder":162},[49,3474,3476,3479,3482,3484,3487,3489,3492],{"class":51,"line":3475},46,[49,3477,3478],{"class":357},"if",[49,3480,3481],{"class":55},"(process",[49,3483,60],{"class":59},[49,3485,3486],{"class":55},"env",[49,3488,60],{"class":59},[49,3490,3491],{"class":55},"es5)",[49,3493,965],{"class":59},[49,3495,3497,3499,3501,3503],{"class":51,"line":3496},47,[49,3498,521],{"class":55},[49,3500,60],{"class":59},[49,3502,948],{"class":63},[49,3504,951],{"class":338},[49,3506,3508],{"class":51,"line":3507},48,[49,3509,3510],{"class":59},"        {\n",[49,3512,3514,3517,3519,3521,3523,3526,3529,3531,3533,3535],{"class":51,"line":3513},49,[49,3515,3516],{"class":338},"            test",[49,3518,342],{"class":59},[49,3520,345],{"class":59},[49,3522,348],{"class":55},[49,3524,3525],{"class":73},"m",[49,3527,3528],{"class":59},"?",[49,3530,44],{"class":73},[49,3532,358],{"class":357},[49,3534,361],{"class":59},[49,3536,364],{"class":59},[49,3538,3540,3543,3545,3548,3550,3552,3555,3558],{"class":51,"line":3539},50,[49,3541,3542],{"class":338},"            exclude",[49,3544,342],{"class":59},[49,3546,3547],{"class":59}," \u002F(",[49,3549,2120],{"class":73},[49,3551,3097],{"class":59},[49,3553,3554],{"class":73},"bower_components",[49,3556,3557],{"class":59},")\u002F",[49,3559,364],{"class":59},[49,3561,3563,3566,3568],{"class":51,"line":3562},51,[49,3564,3565],{"class":338},"            use",[49,3567,342],{"class":59},[49,3569,375],{"class":59},[49,3571,3573,3576,3578,3580,3583,3585],{"class":51,"line":3572},52,[49,3574,3575],{"class":338},"              loader",[49,3577,342],{"class":59},[49,3579,386],{"class":59},[49,3581,3582],{"class":73},"babel-loader",[49,3584,391],{"class":59},[49,3586,364],{"class":59},[49,3588,3590,3593,3595],{"class":51,"line":3589},53,[49,3591,3592],{"class":338},"              options",[49,3594,342],{"class":59},[49,3596,375],{"class":59},[49,3598,3600,3603,3605,3607,3609,3612,3614],{"class":51,"line":3599},54,[49,3601,3602],{"class":338},"                presets",[49,3604,342],{"class":59},[49,3606,1556],{"class":338},[49,3608,391],{"class":59},[49,3610,3611],{"class":73},"@babel\u002Fpreset-env",[49,3613,391],{"class":59},[49,3615,417],{"class":338},[49,3617,3619],{"class":51,"line":3618},55,[49,3620,3621],{"class":59},"              }\n",[49,3623,3625],{"class":51,"line":3624},56,[49,3626,3196],{"class":59},[49,3628,3630,3633,3635],{"class":51,"line":3629},57,[49,3631,3632],{"class":338},"            generator",[49,3634,342],{"class":59},[49,3636,375],{"class":59},[49,3638,3640,3643,3645,3647,3650],{"class":51,"line":3639},58,[49,3641,3642],{"class":338},"              filename",[49,3644,342],{"class":59},[49,3646,386],{"class":59},[49,3648,3649],{"class":73},"[name].js",[49,3651,3287],{"class":59},[49,3653,3655],{"class":51,"line":3654},59,[49,3656,2178],{"class":59},[49,3658,3660],{"class":51,"line":3659},60,[49,3661,399],{"class":59},[49,3663,3665],{"class":51,"line":3664},61,[49,3666,1069],{"class":338},[49,3668,3670],{"class":51,"line":3669},62,[49,3671,538],{"class":59},[49,3673,3675],{"class":51,"line":3674},63,[49,3676,295],{"emptyLinePlaceholder":162},[49,3678,3680,3682,3684,3686],{"class":51,"line":3679},64,[49,3681,428],{"class":305},[49,3683,431],{"class":55},[49,3685,312],{"class":59},[49,3687,375],{"class":59},[49,3689,3691,3693,3695,3698,3700,3703,3705,3707],{"class":51,"line":3690},65,[49,3692,444],{"class":338},[49,3694,342],{"class":59},[49,3696,3697],{"class":55},"[",[49,3699,391],{"class":59},[49,3701,3702],{"class":73},".\u002Fsrc\u002Findex.js",[49,3704,391],{"class":59},[49,3706,925],{"class":55},[49,3708,364],{"class":59},[49,3710,3712],{"class":51,"line":3711},66,[49,3713,461],{"class":55},[49,3715,3717,3719,3721,3724,3726,3728,3730,3733],{"class":51,"line":3716},67,[49,3718,467],{"class":338},[49,3720,342],{"class":59},[49,3722,3723],{"class":55},"process",[49,3725,60],{"class":59},[49,3727,3486],{"class":55},[49,3729,60],{"class":59},[49,3731,3732],{"class":55},"mode",[49,3734,364],{"class":59},[49,3736,3738],{"class":51,"line":3737},68,[49,3739,484],{"class":55},[49,3741,3743,3745,3747],{"class":51,"line":3742},69,[49,3744,490],{"class":338},[49,3746,342],{"class":59},[49,3748,375],{"class":59},[49,3750,3752,3754,3756],{"class":51,"line":3751},70,[49,3753,500],{"class":338},[49,3755,342],{"class":59},[49,3757,505],{"class":55},[49,3759,3761],{"class":51,"line":3760},71,[49,3762,405],{"class":59},[49,3764,3766,3768],{"class":51,"line":3765},72,[49,3767,1543],{"class":338},[49,3769,1546],{"class":59},[49,3771,3773,3775,3777,3779,3781,3783,3785,3787,3789,3791,3793,3795,3797,3799,3801,3803,3805,3807,3809,3811],{"class":51,"line":3772},73,[49,3774,1551],{"class":338},[49,3776,342],{"class":59},[49,3778,1556],{"class":55},[49,3780,391],{"class":59},[49,3782,1561],{"class":73},[49,3784,391],{"class":59},[49,3786,989],{"class":59},[49,3788,386],{"class":59},[49,3790,1570],{"class":73},[49,3792,391],{"class":59},[49,3794,989],{"class":59},[49,3796,386],{"class":59},[49,3798,1579],{"class":73},[49,3800,391],{"class":59},[49,3802,989],{"class":59},[49,3804,386],{"class":59},[49,3806,1588],{"class":73},[49,3808,391],{"class":59},[49,3810,925],{"class":55},[49,3812,364],{"class":59},[49,3814,3816,3818,3820],{"class":51,"line":3815},74,[49,3817,1599],{"class":338},[49,3819,342],{"class":59},[49,3821,375],{"class":59},[49,3823,3825,3828,3830,3832,3834,3836,3838,3840,3842,3844,3846,3848,3850,3852],{"class":51,"line":3824},75,[49,3826,3827],{"class":59},"          '",[49,3829,1611],{"class":338},[49,3831,391],{"class":59},[49,3833,342],{"class":59},[49,3835,1618],{"class":55},[49,3837,60],{"class":59},[49,3839,983],{"class":63},[49,3841,986],{"class":55},[49,3843,989],{"class":59},[49,3845,386],{"class":59},[49,3847,217],{"class":73},[49,3849,391],{"class":59},[49,3851,79],{"class":55},[49,3853,364],{"class":59},[49,3855,3857],{"class":51,"line":3856},76,[49,3858,1641],{"class":59},[49,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878,3880,3882,3884],{"class":51,"line":3861},77,[49,3863,1651],{"class":338},[49,3865,342],{"class":59},[49,3867,1656],{"class":55},[49,3869,60],{"class":59},[49,3871,983],{"class":63},[49,3873,986],{"class":55},[49,3875,989],{"class":59},[49,3877,1667],{"class":59},[49,3879,217],{"class":73},[49,3881,70],{"class":59},[49,3883,1674],{"class":55},[49,3885,364],{"class":59},[49,3887,3889],{"class":51,"line":3888},78,[49,3890,405],{"class":59},[49,3892,3894],{"class":51,"line":3893},79,[49,3895,3896],{"class":88},"    \u002F\u002F ファイルの出力設定\n",[49,3898,3900,3903,3905],{"class":51,"line":3899},80,[49,3901,3902],{"class":338},"    output",[49,3904,342],{"class":59},[49,3906,375],{"class":59},[49,3908,3910],{"class":51,"line":3909},81,[49,3911,3912],{"class":88},"        \u002F\u002F  出力ファイルのディレクトリ名\n",[49,3914,3916,3919,3921,3923,3926,3928,3931,3934],{"class":51,"line":3915},82,[49,3917,3918],{"class":338},"        path",[49,3920,342],{"class":59},[49,3922,976],{"class":59},[49,3924,3925],{"class":55},"__dirname",[49,3927,1000],{"class":59},[49,3929,3930],{"class":73},"\u002Fdist",[49,3932,3933],{"class":59},"`",[49,3935,364],{"class":59},[49,3937,3939,3941,3943,3945,3947,3949],{"class":51,"line":3938},83,[49,3940,971],{"class":338},[49,3942,342],{"class":59},[49,3944,386],{"class":59},[49,3946,3649],{"class":73},[49,3948,391],{"class":59},[49,3950,364],{"class":59},[49,3952,3954],{"class":51,"line":3953},84,[49,3955,405],{"class":59},[49,3957,3959,3962,3964],{"class":51,"line":3958},85,[49,3960,3961],{"class":338},"    plugins",[49,3963,342],{"class":59},[49,3965,315],{"class":55},[49,3967,3969,3972,3975,3977],{"class":51,"line":3968},86,[49,3970,3971],{"class":59},"        new",[49,3973,3974],{"class":63}," MiniCssExtractPlugin",[49,3976,67],{"class":55},[49,3978,965],{"class":59},[49,3980,3982,3984,3986,3988,3991],{"class":51,"line":3981},87,[49,3983,3277],{"class":338},[49,3985,342],{"class":59},[49,3987,386],{"class":59},[49,3989,3990],{"class":73},"[name].css",[49,3992,3287],{"class":59},[49,3994,3996,3999,4001],{"class":51,"line":3995},88,[49,3997,3998],{"class":59},"        }",[49,4000,79],{"class":55},[49,4002,364],{"class":59},[49,4004,4006],{"class":51,"line":4005},89,[49,4007,4008],{"class":55},"    ]\n",[49,4010,4012],{"class":51,"line":4011},90,[49,4013,4014],{"class":59},"};\n",[49,4016,4018],{"class":51,"line":4017},91,[49,4019,295],{"emptyLinePlaceholder":162},[49,4021,4023,4025,4027,4029,4031,4033,4035,4037,4039,4041,4043,4045],{"class":51,"line":4022},92,[49,4024,428],{"class":305},[49,4026,2552],{"class":55},[49,4028,312],{"class":59},[49,4030,826],{"class":55},[49,4032,60],{"class":59},[49,4034,831],{"class":63},[49,4036,67],{"class":55},[49,4038,391],{"class":59},[49,4040,2860],{"class":73},[49,4042,391],{"class":59},[49,4044,989],{"class":59},[49,4046,375],{"class":59},[49,4048,4050,4052,4054,4056,4058,4060,4062,4064,4066,4068,4070],{"class":51,"line":4049},93,[49,4051,2578],{"class":338},[49,4053,342],{"class":59},[49,4055,2583],{"class":55},[49,4057,391],{"class":59},[49,4059,2588],{"class":73},[49,4061,391],{"class":59},[49,4063,989],{"class":59},[49,4065,391],{"class":59},[49,4067,2597],{"class":73},[49,4069,391],{"class":59},[49,4071,2602],{"class":55},[49,4073,4075,4077,4079],{"class":51,"line":4074},94,[49,4076,1000],{"class":59},[49,4078,79],{"class":55},[49,4080,82],{"class":59},[49,4082,4084],{"class":51,"line":4083},95,[49,4085,295],{"emptyLinePlaceholder":162},[49,4087,4089,4091,4093,4095,4097,4099,4101,4103,4105],{"class":51,"line":4088},96,[49,4090,2619],{"class":55},[49,4092,60],{"class":59},[49,4094,858],{"class":63},[49,4096,67],{"class":55},[49,4098,67],{"class":59},[49,4100,1780],{"class":865},[49,4102,79],{"class":59},[49,4104,871],{"class":305},[49,4106,375],{"class":59},[49,4108,4110,4112,4114,4116,4118,4120,4122,4124,4126,4128,4130,4132,4134,4136,4138,4140,4142,4144,4146,4148,4150,4152,4154,4156,4158,4160,4162,4164,4166,4168,4170],{"class":51,"line":4109},97,[49,4111,879],{"class":305},[49,4113,2642],{"class":55},[49,4115,436],{"class":59},[49,4117,2647],{"class":55},[49,4119,60],{"class":59},[49,4121,892],{"class":63},[49,4123,67],{"class":338},[49,4125,391],{"class":59},[49,4127,361],{"class":73},[49,4129,391],{"class":59},[49,4131,79],{"class":338},[49,4133,60],{"class":59},[49,4135,907],{"class":63},[49,4137,67],{"class":338},[49,4139,912],{"class":59},[49,4141,916],{"class":915},[49,4143,919],{"class":338},[49,4145,922],{"class":915},[49,4147,925],{"class":338},[49,4149,60],{"class":59},[49,4151,2682],{"class":63},[49,4153,67],{"class":338},[49,4155,391],{"class":59},[49,4157,2689],{"class":73},[49,4159,391],{"class":59},[49,4161,989],{"class":59},[49,4163,386],{"class":59},[49,4165,2698],{"class":73},[49,4167,391],{"class":59},[49,4169,79],{"class":338},[49,4171,82],{"class":59},[49,4173,4175,4177,4179,4181,4183,4185],{"class":51,"line":4174},98,[49,4176,938],{"class":55},[49,4178,60],{"class":59},[49,4180,943],{"class":55},[49,4182,60],{"class":59},[49,4184,948],{"class":63},[49,4186,951],{"class":338},[49,4188,4190,4192,4194,4196],{"class":51,"line":4189},99,[49,4191,957],{"class":59},[49,4193,960],{"class":63},[49,4195,67],{"class":338},[49,4197,965],{"class":59},[49,4199,4201,4203,4205,4207,4209,4211,4213,4215,4217,4219,4221,4223,4225,4227,4229,4231,4233,4235],{"class":51,"line":4200},100,[49,4202,971],{"class":338},[49,4204,342],{"class":59},[49,4206,976],{"class":59},[49,4208,625],{"class":55},[49,4210,60],{"class":59},[49,4212,983],{"class":63},[49,4214,986],{"class":55},[49,4216,989],{"class":59},[49,4218,386],{"class":59},[49,4220,213],{"class":73},[49,4222,391],{"class":59},[49,4224,79],{"class":55},[49,4226,1000],{"class":59},[49,4228,361],{"class":73},[49,4230,1005],{"class":59},[49,4232,167],{"class":55},[49,4234,1011],{"class":59},[49,4236,364],{"class":59},[49,4238,4240,4242,4244,4246,4248,4250],{"class":51,"line":4239},101,[49,4241,1019],{"class":338},[49,4243,342],{"class":59},[49,4245,391],{"class":59},[49,4247,1026],{"class":73},[49,4249,391],{"class":59},[49,4251,364],{"class":59},[49,4253,4255,4257,4259,4261],{"class":51,"line":4254},102,[49,4256,1036],{"class":338},[49,4258,342],{"class":59},[49,4260,2647],{"class":55},[49,4262,364],{"class":59},[49,4264,4266,4268,4270],{"class":51,"line":4265},103,[49,4267,1048],{"class":338},[49,4269,342],{"class":59},[49,4271,1054],{"class":1053},[49,4273,4275,4277],{"class":51,"line":4274},104,[49,4276,1060],{"class":59},[49,4278,1063],{"class":338},[49,4280,4282],{"class":51,"line":4281},105,[49,4283,1069],{"class":338},[49,4285,4287,4289,4291],{"class":51,"line":4286},106,[49,4288,1000],{"class":59},[49,4290,79],{"class":55},[49,4292,82],{"class":59},[49,4294,4296],{"class":51,"line":4295},107,[49,4297,295],{"emptyLinePlaceholder":162},[49,4299,4301,4303,4305,4307],{"class":51,"line":4300},108,[49,4302,555],{"class":59},[49,4304,436],{"class":59},[49,4306,560],{"class":55},[49,4308,82],{"class":59},[150,4310,4311],{},"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 .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}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 .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}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);}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 .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}",{"title":45,"searchDepth":154,"depth":154,"links":4313},[4314,4315,4321,4327],{"id":201,"depth":85,"text":202},{"id":224,"depth":85,"text":225,"children":4316},[4317,4318,4319,4320],{"id":256,"depth":154,"text":256},{"id":275,"depth":154,"text":275},{"id":565,"depth":154,"text":565},{"id":1400,"depth":154,"text":1400},{"id":1758,"depth":85,"text":1759,"children":4322},[4323,4324,4325,4326],{"id":1768,"depth":154,"text":1768},{"id":1984,"depth":154,"text":1984},{"id":2035,"depth":154,"text":2035},{"id":2916,"depth":154,"text":2916},{"id":2961,"depth":85,"text":2962},[4329],"devstack","2021-10-30","HTMLファイルの取り扱いとPUGを使い方",{},"\u002Fseries\u002Fwell-study-webpack-3",{"title":171,"description":4331},"well-study-webpack","ちゃんと理解するWebpack5。","series\u002Fwell-study-webpack-3",[44,4339,167],"webpack","_mix\u002Flogo-on-white-bg-768x299.png","EsG5Dg5_6qbSZmEa8Ezu5AMWNTpxDesebmF7q4Bkix4",{"id":4343,"title":4344,"body":4345,"category":8628,"createdAt":8629,"description":4344,"extension":159,"index":160,"meta":8630,"navigation":162,"path":8631,"publish":162,"seo":8632,"series":160,"seriesTitle":160,"stem":8633,"tag":8634,"thumbnail":8635,"updatedAt":160,"__hash__":8636},"articles\u002Farticles\u002Fpinterest-like-style.md","ピンタレストみたいなカードスタイルで動的に要素を追加する方法",{"type":10,"value":4346,"toc":8609},[4347,4350,4355,4358,4361,4370,4373,4376,4542,4559,4562,5057,5061,5065,5068,5079,5084,5101,5105,5112,5115,5118,5121,5124,5127,5434,5441,5444,5447,5451,5454,5729,5734,5737,5744,7200,7203,7221,7224,7228,7512,7518,7521,8002,8015,8018,8065,8068,8071,8458,8471,8474,8593,8596,8599,8606],[13,4348,4349],{},"こんにちはjunです。突然ですがPinterest（ピンタレスト）ってご存知ですが、以下のような感じのスタイルで画像や動画が一覧で検索できるサービスです。",[4351,4352],"image-render",{":src":4353,":width":4354},"'pinterest-like-style\u002Fpinterest.png'","'100%'",[13,4356,4357],{},"よくある一覧系のレイアウトは基本的に列と高さを揃えた規則的な物が多い中、ピンタレストは高さが変則であり縦方向に詰めるレイアウトになっています。",[13,4359,4360],{},"ごちゃごちゃとした感じですが、コンテンツがいっぱいあって無駄がないスタイルが好きです。私が関わったあるプロジェクトでこのデザインをやろうとしましたがそこそこ難しかったです。バックから情報を取ってくる仕様だったため、動的に要素を追加してくことを前提として実装の解説をしていきます。コード自体の説明は「実装方法」から行います。",[13,4362,4363,4364,4369],{},"また完成したデモは",[100,4365,4368],{"href":4366,"rel":4367},"https:\u002F\u002Fapps.jun-app.com\u002Fpinterestlike\u002F",[104],"こちら","にあります。",[199,4371,4372],{"id":4372},"構造",[13,4374,4375],{},"構造は以下の通りとします。",[40,4377,4379],{"className":1412,"code":4378,"language":167,"meta":45,"style":45},"\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",[17,4380,4381,4414,4434,4465,4474,4492,4520,4528,4533],{"__ignoreMap":45},[49,4382,4383,4385,4387,4390,4392,4394,4397,4399,4402,4404,4406,4409,4411],{"class":51,"line":52},[49,4384,1425],{"class":59},[49,4386,1389],{"class":338},[49,4388,4389],{"class":305}," class",[49,4391,312],{"class":59},[49,4393,70],{"class":59},[49,4395,4396],{"class":73},"p-cards-render",[49,4398,70],{"class":59},[49,4400,4401],{"class":305}," id",[49,4403,312],{"class":59},[49,4405,70],{"class":59},[49,4407,4408],{"class":73},"card-container",[49,4410,70],{"class":59},[49,4412,4413],{"class":59},">\n",[49,4415,4416,4419,4421,4423,4425,4427,4430,4432],{"class":51,"line":85},[49,4417,4418],{"class":59},"    \u003C",[49,4420,1389],{"class":338},[49,4422,4389],{"class":305},[49,4424,312],{"class":59},[49,4426,70],{"class":59},[49,4428,4429],{"class":73},"c-card-container u-animate",[49,4431,70],{"class":59},[49,4433,4413],{"class":59},[49,4435,4436,4439,4441,4443,4445,4447,4450,4452,4454,4456,4458,4461,4463],{"class":51,"line":154},[49,4437,4438],{"class":59},"        \u003C",[49,4440,1428],{"class":338},[49,4442,1431],{"class":305},[49,4444,312],{"class":59},[49,4446,70],{"class":59},[49,4448,4449],{"class":73},".\u002Fred.png",[49,4451,70],{"class":59},[49,4453,4389],{"class":305},[49,4455,312],{"class":59},[49,4457,70],{"class":59},[49,4459,4460],{"class":73},"c-card-img",[49,4462,70],{"class":59},[49,4464,4413],{"class":59},[49,4466,4467,4470,4472],{"class":51,"line":318},[49,4468,4469],{"class":59},"    \u003C\u002F",[49,4471,1389],{"class":338},[49,4473,4413],{"class":59},[49,4475,4476,4478,4480,4482,4484,4486,4488,4490],{"class":51,"line":324},[49,4477,4418],{"class":59},[49,4479,1389],{"class":338},[49,4481,4389],{"class":305},[49,4483,312],{"class":59},[49,4485,70],{"class":59},[49,4487,4429],{"class":73},[49,4489,70],{"class":59},[49,4491,4413],{"class":59},[49,4493,4494,4496,4498,4500,4502,4504,4506,4508,4510,4512,4514,4516,4518],{"class":51,"line":330},[49,4495,4438],{"class":59},[49,4497,1428],{"class":338},[49,4499,1431],{"class":305},[49,4501,312],{"class":59},[49,4503,70],{"class":59},[49,4505,4449],{"class":73},[49,4507,70],{"class":59},[49,4509,4389],{"class":305},[49,4511,312],{"class":59},[49,4513,70],{"class":59},[49,4515,4460],{"class":73},[49,4517,70],{"class":59},[49,4519,4413],{"class":59},[49,4521,4522,4524,4526],{"class":51,"line":4},[49,4523,4469],{"class":59},[49,4525,1389],{"class":338},[49,4527,4413],{"class":59},[49,4529,4530],{"class":51,"line":367},[49,4531,4532],{"class":88},"    \u003C!-- c-card-containerが基本コンポーネント -->\n",[49,4534,4535,4538,4540],{"class":51,"line":378},[49,4536,4537],{"class":59},"\u003C\u002F",[49,4539,1389],{"class":338},[49,4541,4413],{"class":59},[13,4543,4544,4546,4547,4550,4551,4554,4555,4558],{},[17,4545,4408],{},"はカード全体の列を定義するコンテナです。",[17,4548,4549],{},"c-card-container","は１カードのコンテナーで他のカードとの隙間やレイアウトの定義をしています。そしてカードのコンテナには",[17,4552,4553],{},"\u003Cimg>","がラップされ、",[17,4556,4557],{},"width:100%; height:100%;","がかかっています。今回表示する画像は一面一色に塗り潰された画像です。（background-colorでもよかったのですが）",[13,4560,4561],{},"最終的なcssは以下の通りです。",[40,4563,4567],{"className":4564,"code":4565,"language":4566,"meta":45,"style":45},"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",[17,4568,4569,4577,4590,4601,4613,4617,4621,4631,4643,4655,4667,4671,4675,4684,4696,4709,4723,4735,4739,4743,4751,4764,4776,4788,4799,4803,4807,4820,4831,4841,4853,4864,4882,4886,4890,4894,4906,4917,4940,4951,4963,4973,4984,4999,5003,5020,5030,5041,5053],{"__ignoreMap":45},[49,4570,4571,4575],{"class":51,"line":52},[49,4572,4574],{"class":4573},"s5Dmg","*",[49,4576,965],{"class":59},[49,4578,4579,4583,4585,4588],{"class":51,"line":85},[49,4580,4582],{"class":4581},"s6YsC","    margin",[49,4584,342],{"class":59},[49,4586,4587],{"class":915}," 0",[49,4589,82],{"class":59},[49,4591,4592,4595,4597,4599],{"class":51,"line":154},[49,4593,4594],{"class":4581},"    padding",[49,4596,342],{"class":59},[49,4598,4587],{"class":915},[49,4600,82],{"class":59},[49,4602,4603,4606,4608,4611],{"class":51,"line":318},[49,4604,4605],{"class":4581},"    box-sizing",[49,4607,342],{"class":59},[49,4609,4610],{"class":55}," border-box",[49,4612,82],{"class":59},[49,4614,4615],{"class":51,"line":324},[49,4616,538],{"class":59},[49,4618,4619],{"class":51,"line":330},[49,4620,295],{"emptyLinePlaceholder":162},[49,4622,4623,4626,4629],{"class":51,"line":4},[49,4624,4625],{"class":59},"#",[49,4627,4628],{"class":915},"card-add",[49,4630,965],{"class":59},[49,4632,4633,4636,4638,4641],{"class":51,"line":367},[49,4634,4635],{"class":4581},"    position",[49,4637,342],{"class":59},[49,4639,4640],{"class":55}," fixed",[49,4642,82],{"class":59},[49,4644,4645,4648,4650,4653],{"class":51,"line":378},[49,4646,4647],{"class":4581},"    left",[49,4649,342],{"class":59},[49,4651,4652],{"class":915}," 20px",[49,4654,82],{"class":59},[49,4656,4657,4660,4662,4665],{"class":51,"line":396},[49,4658,4659],{"class":4581},"    top",[49,4661,342],{"class":59},[49,4663,4664],{"class":915}," 50%",[49,4666,82],{"class":59},[49,4668,4669],{"class":51,"line":402},[49,4670,538],{"class":59},[49,4672,4673],{"class":51,"line":408},[49,4674,295],{"emptyLinePlaceholder":162},[49,4676,4677,4679,4682],{"class":51,"line":414},[49,4678,60],{"class":59},[49,4680,4681],{"class":4573},"p-main-container",[49,4683,965],{"class":59},[49,4685,4686,4689,4691,4694],{"class":51,"line":420},[49,4687,4688],{"class":4581},"    max-width",[49,4690,342],{"class":59},[49,4692,4693],{"class":915}," 660px",[49,4695,82],{"class":59},[49,4697,4698,4700,4702,4704,4707],{"class":51,"line":425},[49,4699,4582],{"class":4581},[49,4701,342],{"class":59},[49,4703,4587],{"class":915},[49,4705,4706],{"class":55}," auto",[49,4708,82],{"class":59},[49,4710,4711,4713,4715,4718,4721],{"class":51,"line":441},[49,4712,4594],{"class":4581},[49,4714,342],{"class":59},[49,4716,4717],{"class":915}," 30px",[49,4719,4720],{"class":915}," 0px",[49,4722,82],{"class":59},[49,4724,4725,4728,4730,4733],{"class":51,"line":458},[49,4726,4727],{"class":4581},"    min-height",[49,4729,342],{"class":59},[49,4731,4732],{"class":915}," 100vh",[49,4734,82],{"class":59},[49,4736,4737],{"class":51,"line":464},[49,4738,538],{"class":59},[49,4740,4741],{"class":51,"line":481},[49,4742,295],{"emptyLinePlaceholder":162},[49,4744,4745,4747,4749],{"class":51,"line":487},[49,4746,60],{"class":59},[49,4748,4396],{"class":4573},[49,4750,965],{"class":59},[49,4752,4753,4755,4757,4759,4762],{"class":51,"line":497},[49,4754,4582],{"class":4581},[49,4756,342],{"class":59},[49,4758,4587],{"class":915},[49,4760,4761],{"class":915}," -5px",[49,4763,82],{"class":59},[49,4765,4766,4769,4771,4774],{"class":51,"line":508},[49,4767,4768],{"class":4581},"    display",[49,4770,342],{"class":59},[49,4772,4773],{"class":55}," flex",[49,4775,82],{"class":59},[49,4777,4778,4781,4783,4786],{"class":51,"line":513},[49,4779,4780],{"class":4581},"    flex-wrap",[49,4782,342],{"class":59},[49,4784,4785],{"class":55}," wrap",[49,4787,82],{"class":59},[49,4789,4790,4792,4794,4797],{"class":51,"line":518},[49,4791,4635],{"class":4581},[49,4793,342],{"class":59},[49,4795,4796],{"class":55}," relative",[49,4798,82],{"class":59},[49,4800,4801],{"class":51,"line":530},[49,4802,538],{"class":59},[49,4804,4805],{"class":51,"line":535},[49,4806,295],{"emptyLinePlaceholder":162},[49,4808,4809,4811,4813,4816,4818],{"class":51,"line":541},[49,4810,60],{"class":59},[49,4812,4396],{"class":4573},[49,4814,4815],{"class":59}," .",[49,4817,4549],{"class":4573},[49,4819,965],{"class":59},[49,4821,4822,4824,4826,4829],{"class":51,"line":547},[49,4823,4635],{"class":4581},[49,4825,342],{"class":59},[49,4827,4828],{"class":55}," absolute",[49,4830,82],{"class":59},[49,4832,4833,4835,4837,4839],{"class":51,"line":552},[49,4834,4659],{"class":4581},[49,4836,342],{"class":59},[49,4838,4720],{"class":915},[49,4840,82],{"class":59},[49,4842,4843,4846,4848,4851],{"class":51,"line":876},[49,4844,4845],{"class":4581},"    width",[49,4847,342],{"class":59},[49,4849,4850],{"class":915}," 33.3%",[49,4852,82],{"class":59},[49,4854,4855,4857,4859,4862],{"class":51,"line":930},[49,4856,4768],{"class":4581},[49,4858,342],{"class":59},[49,4860,4861],{"class":55}," block",[49,4863,82],{"class":59},[49,4865,4866,4868,4870,4872,4875,4878,4880],{"class":51,"line":935},[49,4867,4594],{"class":4581},[49,4869,342],{"class":59},[49,4871,4587],{"class":915},[49,4873,4874],{"class":915}," 5px",[49,4876,4877],{"class":915}," 10px",[49,4879,4874],{"class":915},[49,4881,82],{"class":59},[49,4883,4884],{"class":51,"line":954},[49,4885,538],{"class":59},[49,4887,4888],{"class":51,"line":968},[49,4889,295],{"emptyLinePlaceholder":162},[49,4891,4892],{"class":51,"line":1016},[49,4893,295],{"emptyLinePlaceholder":162},[49,4895,4896,4898,4900,4902,4904],{"class":51,"line":1033},[49,4897,60],{"class":59},[49,4899,4549],{"class":4573},[49,4901,4815],{"class":59},[49,4903,4460],{"class":4573},[49,4905,965],{"class":59},[49,4907,4908,4910,4912,4915],{"class":51,"line":1045},[49,4909,4845],{"class":4581},[49,4911,342],{"class":59},[49,4913,4914],{"class":915}," 100%",[49,4916,82],{"class":59},[49,4918,4919,4922,4924,4926,4929,4932,4935,4938],{"class":51,"line":1057},[49,4920,4921],{"class":4581},"    box-shadow",[49,4923,342],{"class":59},[49,4925,4720],{"class":915},[49,4927,4928],{"class":915}," 2px",[49,4930,4931],{"class":915}," 4px",[49,4933,4934],{"class":59}," #",[49,4936,4937],{"class":55},"ccc",[49,4939,82],{"class":59},[49,4941,4942,4945,4947,4949],{"class":51,"line":1066},[49,4943,4944],{"class":4581},"    border-radius",[49,4946,342],{"class":59},[49,4948,4717],{"class":915},[49,4950,82],{"class":59},[49,4952,4953,4956,4958,4961],{"class":51,"line":1072},[49,4954,4955],{"class":4581},"    height",[49,4957,342],{"class":59},[49,4959,4960],{"class":915}," 0%",[49,4962,82],{"class":59},[49,4964,4965,4967,4969,4971],{"class":51,"line":1081},[49,4966,4768],{"class":4581},[49,4968,342],{"class":59},[49,4970,4861],{"class":55},[49,4972,82],{"class":59},[49,4974,4975,4978,4980,4982],{"class":51,"line":1086},[49,4976,4977],{"class":4581},"    opacity",[49,4979,342],{"class":59},[49,4981,4587],{"class":915},[49,4983,82],{"class":59},[49,4985,4986,4989,4991,4994,4997],{"class":51,"line":2823},[49,4987,4988],{"class":4581},"    transition",[49,4990,342],{"class":59},[49,4992,4993],{"class":55}," all ",[49,4995,4996],{"class":915},"0.4s",[49,4998,82],{"class":59},[49,5000,5001],{"class":51,"line":3465},[49,5002,538],{"class":59},[49,5004,5005,5007,5009,5011,5014,5016,5018],{"class":51,"line":3470},[49,5006,60],{"class":59},[49,5008,4549],{"class":4573},[49,5010,60],{"class":59},[49,5012,5013],{"class":4573},"u-animate",[49,5015,4815],{"class":59},[49,5017,4460],{"class":4573},[49,5019,965],{"class":59},[49,5021,5022,5024,5026,5028],{"class":51,"line":3475},[49,5023,4955],{"class":4581},[49,5025,342],{"class":59},[49,5027,4914],{"class":915},[49,5029,82],{"class":59},[49,5031,5032,5034,5036,5039],{"class":51,"line":3496},[49,5033,4977],{"class":4581},[49,5035,342],{"class":59},[49,5037,5038],{"class":915}," 1",[49,5040,82],{"class":59},[49,5042,5043,5045,5047,5049,5051],{"class":51,"line":3507},[49,5044,4988],{"class":4581},[49,5046,342],{"class":59},[49,5048,4993],{"class":55},[49,5050,4996],{"class":915},[49,5052,82],{"class":59},[49,5054,5055],{"class":51,"line":3513},[49,5056,538],{"class":59},[199,5058,5060],{"id":5059},"表示数が不明な場合cssだけでは不可能だった","表示数が不明な場合CSSだけでは不可能だった",[254,5062,5064],{"id":5063},"flexでいけんじゃね","flexでいけんじゃね...？!",[13,5066,5067],{},"最初はそれぞれの要素にを縦方向に詰められればいいだけだろと思いました。",[13,5069,5070,5071,5074,5075,5078],{},"そのためカードコンテナーを ",[17,5072,5073],{},"display:inline-block;"," にして ",[17,5076,5077],{},"vertical-align:top;","を指定しましたが下図の様になっていしまいます。",[4351,5080],{":src":5081,":width":5082,":center":5083},"'pinterest-like-style\u002Fdisplay-inline.png'","'300px'","true",[13,5085,5086,5087,245,5089,5092,5093,5096,5097,5100],{},"カードコンテナーを ",[17,5088,5073],{},[17,5090,5091],{},"algin-self:flex-start;","を指定しても同様の結果となります。",[17,5094,5095],{},"flex","や",[17,5098,5099],{},"inline-block","の仕様上仕方ないです。",[254,5102,5104],{"id":5103},"display-gridならいけるが","display gridならいけるが...",[13,5106,5107,5108,5111],{},"flexは縦方向の制御が難しく、ピンタレストの様なスタイルをcssで実現するためには",[17,5109,5110],{},"display:grid;","というグリットレイアウトを指定する必要があります。",[13,5113,5114],{},"今回はGridの説明は省きます。グリットレイアウトは各要素の縦方向の位置を定義できるので、柔軟なレイアウトを実現できます。",[13,5116,5117],{},"しかし、グリットレイアウトは列数、行数、各要素の占有列・行を指定する必要があります。そのため動的に要素を追加する場合はJavascriptで各要素の位置スタイルを調整する必要があります。",[199,5119,5120],{"id":5120},"実装方法",[254,5122,5123],{"id":5123},"概要",[13,5125,5126],{},"それでは実装の概要について解説します。CSS（インラインスタイル）をカード要素に指定します。いろいろ方法はありますが、ピンタレスト公式でも以下の様なスタイルが要素に当てられています。",[40,5128,5130],{"className":1412,"code":5129,"language":167,"meta":45,"style":45},"\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",[17,5131,5132,5160,5206,5250,5294,5338,5382,5426],{"__ignoreMap":45},[49,5133,5134,5136,5138,5140,5142,5144,5146,5148,5150,5152,5154,5156,5158],{"class":51,"line":52},[49,5135,1425],{"class":59},[49,5137,1389],{"class":338},[49,5139,4389],{"class":305},[49,5141,312],{"class":59},[49,5143,70],{"class":59},[49,5145,4396],{"class":73},[49,5147,70],{"class":59},[49,5149,4401],{"class":305},[49,5151,312],{"class":59},[49,5153,70],{"class":59},[49,5155,4408],{"class":73},[49,5157,70],{"class":59},[49,5159,4413],{"class":59},[49,5161,5162,5164,5166,5168,5170,5172,5174,5176,5178,5180,5182,5185,5187,5190,5192,5194,5197,5199,5202,5204],{"class":51,"line":85},[49,5163,4418],{"class":59},[49,5165,1389],{"class":338},[49,5167,4389],{"class":305},[49,5169,312],{"class":59},[49,5171,70],{"class":59},[49,5173,4429],{"class":73},[49,5175,70],{"class":59},[49,5177,4401],{"class":305},[49,5179,312],{"class":59},[49,5181,70],{"class":59},[49,5183,5184],{"class":73},"06p17111s5",[49,5186,70],{"class":59},[49,5188,5189],{"class":305}," style",[49,5191,312],{"class":59},[49,5193,70],{"class":59},[49,5195,5196],{"class":73},"height:309px; transform:translate(0%,0px);",[49,5198,70],{"class":59},[49,5200,5201],{"class":59},">\u003C\u002F",[49,5203,1389],{"class":338},[49,5205,4413],{"class":59},[49,5207,5208,5210,5212,5214,5216,5218,5220,5222,5224,5226,5228,5231,5233,5235,5237,5239,5242,5244,5246,5248],{"class":51,"line":154},[49,5209,4418],{"class":59},[49,5211,1389],{"class":338},[49,5213,4389],{"class":305},[49,5215,312],{"class":59},[49,5217,70],{"class":59},[49,5219,4429],{"class":73},[49,5221,70],{"class":59},[49,5223,4401],{"class":305},[49,5225,312],{"class":59},[49,5227,70],{"class":59},[49,5229,5230],{"class":73},"l1dq533ms9g",[49,5232,70],{"class":59},[49,5234,5189],{"class":305},[49,5236,312],{"class":59},[49,5238,70],{"class":59},[49,5240,5241],{"class":73},"height:246px; transform:translate(100%,0px);",[49,5243,70],{"class":59},[49,5245,5201],{"class":59},[49,5247,1389],{"class":338},[49,5249,4413],{"class":59},[49,5251,5252,5254,5256,5258,5260,5262,5264,5266,5268,5270,5272,5275,5277,5279,5281,5283,5286,5288,5290,5292],{"class":51,"line":318},[49,5253,4418],{"class":59},[49,5255,1389],{"class":338},[49,5257,4389],{"class":305},[49,5259,312],{"class":59},[49,5261,70],{"class":59},[49,5263,4429],{"class":73},[49,5265,70],{"class":59},[49,5267,4401],{"class":305},[49,5269,312],{"class":59},[49,5271,70],{"class":59},[49,5273,5274],{"class":73},"k6n2ebd918g",[49,5276,70],{"class":59},[49,5278,5189],{"class":305},[49,5280,312],{"class":59},[49,5282,70],{"class":59},[49,5284,5285],{"class":73},"height:306px; transform:translate(200%,0px);",[49,5287,70],{"class":59},[49,5289,5201],{"class":59},[49,5291,1389],{"class":338},[49,5293,4413],{"class":59},[49,5295,5296,5298,5300,5302,5304,5306,5308,5310,5312,5314,5316,5319,5321,5323,5325,5327,5330,5332,5334,5336],{"class":51,"line":324},[49,5297,4418],{"class":59},[49,5299,1389],{"class":338},[49,5301,4389],{"class":305},[49,5303,312],{"class":59},[49,5305,70],{"class":59},[49,5307,4429],{"class":73},[49,5309,70],{"class":59},[49,5311,4401],{"class":305},[49,5313,312],{"class":59},[49,5315,70],{"class":59},[49,5317,5318],{"class":73},"2j3vvgc373g",[49,5320,70],{"class":59},[49,5322,5189],{"class":305},[49,5324,312],{"class":59},[49,5326,70],{"class":59},[49,5328,5329],{"class":73},"height:161px; transform:translate(0%,309px);",[49,5331,70],{"class":59},[49,5333,5201],{"class":59},[49,5335,1389],{"class":338},[49,5337,4413],{"class":59},[49,5339,5340,5342,5344,5346,5348,5350,5352,5354,5356,5358,5360,5363,5365,5367,5369,5371,5374,5376,5378,5380],{"class":51,"line":330},[49,5341,4418],{"class":59},[49,5343,1389],{"class":338},[49,5345,4389],{"class":305},[49,5347,312],{"class":59},[49,5349,70],{"class":59},[49,5351,4429],{"class":73},[49,5353,70],{"class":59},[49,5355,4401],{"class":305},[49,5357,312],{"class":59},[49,5359,70],{"class":59},[49,5361,5362],{"class":73},"tagrso5m40o",[49,5364,70],{"class":59},[49,5366,5189],{"class":305},[49,5368,312],{"class":59},[49,5370,70],{"class":59},[49,5372,5373],{"class":73},"height:255px; transform:translate(100%,246px);",[49,5375,70],{"class":59},[49,5377,5201],{"class":59},[49,5379,1389],{"class":338},[49,5381,4413],{"class":59},[49,5383,5384,5386,5388,5390,5392,5394,5396,5398,5400,5402,5404,5407,5409,5411,5413,5415,5418,5420,5422,5424],{"class":51,"line":4},[49,5385,4418],{"class":59},[49,5387,1389],{"class":338},[49,5389,4389],{"class":305},[49,5391,312],{"class":59},[49,5393,70],{"class":59},[49,5395,4429],{"class":73},[49,5397,70],{"class":59},[49,5399,4401],{"class":305},[49,5401,312],{"class":59},[49,5403,70],{"class":59},[49,5405,5406],{"class":73},"89opa7i1eng",[49,5408,70],{"class":59},[49,5410,5189],{"class":305},[49,5412,312],{"class":59},[49,5414,70],{"class":59},[49,5416,5417],{"class":73},"height:288px; transform:translate(200%,306px);",[49,5419,70],{"class":59},[49,5421,5201],{"class":59},[49,5423,1389],{"class":338},[49,5425,4413],{"class":59},[49,5427,5428,5430,5432],{"class":51,"line":367},[49,5429,4537],{"class":59},[49,5431,1389],{"class":338},[49,5433,4413],{"class":59},[13,5435,5436,5437,5440],{},"それぞのコンテナーに対して",[17,5438,5439],{},"height:246px; transform:translate(200%,306px);","というものあります。まず固有の高さを指定し、そしてtransformを使用して位置を変更しています。",[13,5442,5443],{},"要素が追加される度に始点（left:0;,top:0;）から移動させ、位置を指定してあげます。2021年7月時点のCSSではこの様にしないと、数不明・ここの高さが不明な要素に対してピンタレストのようなスタイルを適用することができません。",[13,5445,5446],{},"では次はそれを実装するjavascriptを書いていきます。",[254,5448,5450],{"id":5449},"htmlの前準備","HTMLの前準備",[13,5452,5453],{},"HTMLは以下の様にしておきます。",[40,5455,5457],{"className":1412,"code":5456,"language":167,"meta":45,"style":45},"\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",[17,5458,5459,5471,5479,5488,5513,5531,5564,5572,5580,5598,5627,5631,5640,5668,5677,5685,5721],{"__ignoreMap":45},[49,5460,5461,5464,5467,5469],{"class":51,"line":52},[49,5462,5463],{"class":59},"\u003C!",[49,5465,5466],{"class":338},"DOCTYPE",[49,5468,2642],{"class":305},[49,5470,4413],{"class":59},[49,5472,5473,5475,5477],{"class":51,"line":85},[49,5474,1425],{"class":59},[49,5476,167],{"class":338},[49,5478,4413],{"class":59},[49,5480,5481,5483,5486],{"class":51,"line":154},[49,5482,4418],{"class":59},[49,5484,5485],{"class":338},"head",[49,5487,4413],{"class":59},[49,5489,5490,5492,5495,5498,5500,5502,5505,5507,5510],{"class":51,"line":318},[49,5491,4438],{"class":59},[49,5493,5494],{"class":338},"meta",[49,5496,5497],{"class":305}," charset",[49,5499,312],{"class":59},[49,5501,70],{"class":59},[49,5503,5504],{"class":73},"utf-8",[49,5506,70],{"class":59},[49,5508,5509],{"class":59},">",[49,5511,5512],{"class":55}," \n",[49,5514,5515,5517,5520,5522,5525,5527,5529],{"class":51,"line":324},[49,5516,4438],{"class":59},[49,5518,5519],{"class":338},"title",[49,5521,5509],{"class":59},[49,5523,5524],{"class":55},"Pinterest like Style",[49,5526,4537],{"class":59},[49,5528,5519],{"class":338},[49,5530,4413],{"class":59},[49,5532,5533,5535,5538,5541,5543,5545,5548,5550,5553,5555,5557,5560,5562],{"class":51,"line":330},[49,5534,4438],{"class":59},[49,5536,5537],{"class":338},"link",[49,5539,5540],{"class":305}," rel",[49,5542,312],{"class":59},[49,5544,70],{"class":59},[49,5546,5547],{"class":73},"stylesheet",[49,5549,70],{"class":59},[49,5551,5552],{"class":305}," href",[49,5554,312],{"class":59},[49,5556,70],{"class":59},[49,5558,5559],{"class":73},".\u002Fstyle.css",[49,5561,70],{"class":59},[49,5563,4413],{"class":59},[49,5565,5566,5568,5570],{"class":51,"line":4},[49,5567,4469],{"class":59},[49,5569,5485],{"class":338},[49,5571,4413],{"class":59},[49,5573,5574,5576,5578],{"class":51,"line":367},[49,5575,4418],{"class":59},[49,5577,1026],{"class":338},[49,5579,4413],{"class":59},[49,5581,5582,5584,5586,5588,5590,5592,5594,5596],{"class":51,"line":378},[49,5583,4438],{"class":59},[49,5585,1389],{"class":338},[49,5587,4389],{"class":305},[49,5589,312],{"class":59},[49,5591,70],{"class":59},[49,5593,4681],{"class":73},[49,5595,70],{"class":59},[49,5597,4413],{"class":59},[49,5599,5600,5603,5605,5607,5609,5611,5613,5615,5617,5619,5621,5623,5625],{"class":51,"line":396},[49,5601,5602],{"class":59},"            \u003C",[49,5604,1389],{"class":338},[49,5606,4389],{"class":305},[49,5608,312],{"class":59},[49,5610,70],{"class":59},[49,5612,4396],{"class":73},[49,5614,70],{"class":59},[49,5616,4401],{"class":305},[49,5618,312],{"class":59},[49,5620,70],{"class":59},[49,5622,4408],{"class":73},[49,5624,70],{"class":59},[49,5626,4413],{"class":59},[49,5628,5629],{"class":51,"line":402},[49,5630,295],{"emptyLinePlaceholder":162},[49,5632,5633,5636,5638],{"class":51,"line":408},[49,5634,5635],{"class":59},"            \u003C\u002F",[49,5637,1389],{"class":338},[49,5639,4413],{"class":59},[49,5641,5642,5644,5647,5649,5651,5653,5655,5657,5659,5662,5664,5666],{"class":51,"line":414},[49,5643,5602],{"class":59},[49,5645,5646],{"class":338},"button",[49,5648,4401],{"class":305},[49,5650,312],{"class":59},[49,5652,391],{"class":59},[49,5654,4628],{"class":73},[49,5656,391],{"class":59},[49,5658,5509],{"class":59},[49,5660,5661],{"class":55},"ADD!",[49,5663,4537],{"class":59},[49,5665,5646],{"class":338},[49,5667,4413],{"class":59},[49,5669,5670,5673,5675],{"class":51,"line":420},[49,5671,5672],{"class":59},"        \u003C\u002F",[49,5674,1389],{"class":338},[49,5676,4413],{"class":59},[49,5678,5679,5681,5683],{"class":51,"line":425},[49,5680,4469],{"class":59},[49,5682,1026],{"class":338},[49,5684,4413],{"class":59},[49,5686,5687,5689,5692,5694,5696,5698,5701,5703,5706,5708,5710,5713,5715,5717,5719],{"class":51,"line":441},[49,5688,4418],{"class":59},[49,5690,5691],{"class":338},"script",[49,5693,1431],{"class":305},[49,5695,312],{"class":59},[49,5697,70],{"class":59},[49,5699,5700],{"class":73},".\u002Fcard.js",[49,5702,70],{"class":59},[49,5704,5705],{"class":305}," type",[49,5707,312],{"class":59},[49,5709,70],{"class":59},[49,5711,5712],{"class":73},"text\u002Fjavascript",[49,5714,70],{"class":59},[49,5716,5201],{"class":59},[49,5718,5691],{"class":338},[49,5720,4413],{"class":59},[49,5722,5723,5725,5727],{"class":51,"line":458},[49,5724,4537],{"class":59},[49,5726,167],{"class":338},[49,5728,4413],{"class":59},[13,5730,5731,5733],{},[17,5732,4408],{},"にカードが挿入されていきます。ADD！というボタンを押すことで今回はカードが追加されていくことにします。",[254,5735,5736],{"id":5736},"javascriptはこの通り",[13,5738,5739,5740,5743],{},"同じディレクトリに",[17,5741,5742],{},"card.js","をおいておきます。いきなりですが、全て見せます。完成形は以下の通りです。",[40,5745,5747],{"className":285,"code":5746,"language":288,"meta":45,"style":45},"\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",[17,5748,5749,5754,5768,5772,5777,5788,5796,5803,5814,5824,5828,5832,5837,5851,5855,5860,5889,5893,5898,5925,5929,5934,5948,5962,5966,5971,6038,6052,6056,6061,6088,6101,6107,6111,6116,6132,6149,6168,6186,6190,6194,6199,6214,6231,6235,6240,6269,6300,6304,6309,6354,6379,6394,6398,6403,6408,6435,6481,6496,6500,6505,6549,6577,6581,6586,6638,6642,6647,6664,6668,6673,6691,6714,6718,6722,6727,6748,6765,6769,6773,6778,6783,6802,6807,6855,6872,6876,6881,6908,6912,6917,6933,6989,7030,7073,7077,7082,7137,7141,7146,7159,7184,7196],{"__ignoreMap":45},[49,5750,5751],{"class":51,"line":52},[49,5752,5753],{"class":88},"\u002F\u002F カード情報を格納\n",[49,5755,5756,5758,5761,5763,5766],{"class":51,"line":85},[49,5757,306],{"class":305},[49,5759,5760],{"class":55}," elements ",[49,5762,312],{"class":59},[49,5764,5765],{"class":55}," []",[49,5767,82],{"class":59},[49,5769,5770],{"class":51,"line":154},[49,5771,295],{"emptyLinePlaceholder":162},[49,5773,5774],{"class":51,"line":318},[49,5775,5776],{"class":88},"\u002F\u002F カードの初期値\n",[49,5778,5779,5781,5784,5786],{"class":51,"line":324},[49,5780,306],{"class":305},[49,5782,5783],{"class":55}," elementInit ",[49,5785,312],{"class":59},[49,5787,375],{"class":59},[49,5789,5790,5793],{"class":51,"line":330},[49,5791,5792],{"class":338},"    id",[49,5794,5795],{"class":59},":undefined,\n",[49,5797,5798,5801],{"class":51,"line":4},[49,5799,5800],{"class":338},"    color",[49,5802,5795],{"class":59},[49,5804,5805,5808,5810,5812],{"class":51,"line":367},[49,5806,5807],{"class":338},"    selfHeight",[49,5809,342],{"class":59},[49,5811,922],{"class":915},[49,5813,364],{"class":59},[49,5815,5816,5819,5821],{"class":51,"line":378},[49,5817,5818],{"class":338},"    y",[49,5820,342],{"class":59},[49,5822,5823],{"class":915},"0\n",[49,5825,5826],{"class":51,"line":396},[49,5827,4014],{"class":59},[49,5829,5830],{"class":51,"line":402},[49,5831,295],{"emptyLinePlaceholder":162},[49,5833,5834],{"class":51,"line":408},[49,5835,5836],{"class":88},"\u002F\u002F 列数\n",[49,5838,5839,5841,5844,5846,5849],{"class":51,"line":414},[49,5840,306],{"class":305},[49,5842,5843],{"class":55}," row ",[49,5845,312],{"class":59},[49,5847,5848],{"class":915}," 3",[49,5850,82],{"class":59},[49,5852,5853],{"class":51,"line":420},[49,5854,295],{"emptyLinePlaceholder":162},[49,5856,5857],{"class":51,"line":425},[49,5858,5859],{"class":88},"\u002F\u002F 挿入先コンテナ\n",[49,5861,5862,5864,5867,5869,5872,5874,5877,5879,5881,5883,5885,5887],{"class":51,"line":441},[49,5863,428],{"class":305},[49,5865,5866],{"class":55}," cardsContainer ",[49,5868,312],{"class":59},[49,5870,5871],{"class":55}," document",[49,5873,60],{"class":59},[49,5875,5876],{"class":63},"getElementById",[49,5878,67],{"class":55},[49,5880,391],{"class":59},[49,5882,4408],{"class":73},[49,5884,391],{"class":59},[49,5886,79],{"class":55},[49,5888,82],{"class":59},[49,5890,5891],{"class":51,"line":458},[49,5892,295],{"emptyLinePlaceholder":162},[49,5894,5895],{"class":51,"line":464},[49,5896,5897],{"class":88},"\u002F\u002F 追加ボタン\n",[49,5899,5900,5902,5905,5907,5909,5911,5913,5915,5917,5919,5921,5923],{"class":51,"line":481},[49,5901,428],{"class":305},[49,5903,5904],{"class":55}," cardsAddBtn ",[49,5906,312],{"class":59},[49,5908,5871],{"class":55},[49,5910,60],{"class":59},[49,5912,5876],{"class":63},[49,5914,67],{"class":55},[49,5916,391],{"class":59},[49,5918,4628],{"class":73},[49,5920,391],{"class":59},[49,5922,79],{"class":55},[49,5924,82],{"class":59},[49,5926,5927],{"class":51,"line":487},[49,5928,295],{"emptyLinePlaceholder":162},[49,5930,5931],{"class":51,"line":497},[49,5932,5933],{"class":88},"\u002F\u002F　カード高さの最大値と最小値\n",[49,5935,5936,5938,5941,5943,5946],{"class":51,"line":508},[49,5937,428],{"class":305},[49,5939,5940],{"class":55}," heightMax ",[49,5942,312],{"class":59},[49,5944,5945],{"class":915}," 400",[49,5947,82],{"class":59},[49,5949,5950,5952,5955,5957,5960],{"class":51,"line":513},[49,5951,428],{"class":305},[49,5953,5954],{"class":55}," heightMin ",[49,5956,312],{"class":59},[49,5958,5959],{"class":915}," 100",[49,5961,82],{"class":59},[49,5963,5964],{"class":51,"line":518},[49,5965,295],{"emptyLinePlaceholder":162},[49,5967,5968],{"class":51,"line":530},[49,5969,5970],{"class":88},"\u002F\u002F 色のパターンとカード間の隙間（px）\n",[49,5972,5973,5975,5978,5980,5982,5984,5987,5989,5991,5993,5996,5998,6000,6002,6005,6007,6009,6011,6014,6016,6018,6020,6023,6025,6027,6029,6032,6034,6036],{"class":51,"line":535},[49,5974,428],{"class":305},[49,5976,5977],{"class":55}," colors ",[49,5979,312],{"class":59},[49,5981,1556],{"class":55},[49,5983,391],{"class":59},[49,5985,5986],{"class":73},"red",[49,5988,391],{"class":59},[49,5990,989],{"class":59},[49,5992,391],{"class":59},[49,5994,5995],{"class":73},"yellow",[49,5997,391],{"class":59},[49,5999,989],{"class":59},[49,6001,391],{"class":59},[49,6003,6004],{"class":73},"green",[49,6006,391],{"class":59},[49,6008,989],{"class":59},[49,6010,391],{"class":59},[49,6012,6013],{"class":73},"orange",[49,6015,391],{"class":59},[49,6017,989],{"class":59},[49,6019,391],{"class":59},[49,6021,6022],{"class":73},"blue",[49,6024,391],{"class":59},[49,6026,989],{"class":59},[49,6028,391],{"class":59},[49,6030,6031],{"class":73},"purple",[49,6033,391],{"class":59},[49,6035,925],{"class":55},[49,6037,82],{"class":59},[49,6039,6040,6042,6045,6047,6050],{"class":51,"line":541},[49,6041,428],{"class":305},[49,6043,6044],{"class":55}," cardGap ",[49,6046,312],{"class":59},[49,6048,6049],{"class":915}," 10",[49,6051,82],{"class":59},[49,6053,6054],{"class":51,"line":547},[49,6055,295],{"emptyLinePlaceholder":162},[49,6057,6058],{"class":51,"line":552},[49,6059,6060],{"class":88},"\u002F\u002F 追加ボタンにイベントリスナーを付与\n",[49,6062,6063,6066,6068,6071,6073,6075,6078,6080,6083,6086],{"class":51,"line":876},[49,6064,6065],{"class":55},"cardsAddBtn",[49,6067,60],{"class":59},[49,6069,6070],{"class":63},"addEventListener",[49,6072,67],{"class":55},[49,6074,391],{"class":59},[49,6076,6077],{"class":73},"click",[49,6079,391],{"class":59},[49,6081,6082],{"class":59},",()",[49,6084,6085],{"class":305},"=>",[49,6087,965],{"class":59},[49,6089,6090,6093,6096,6099],{"class":51,"line":930},[49,6091,6092],{"class":357},"    return",[49,6094,6095],{"class":63}," onClickAdd",[49,6097,6098],{"class":338},"()",[49,6100,82],{"class":59},[49,6102,6103,6105],{"class":51,"line":935},[49,6104,1000],{"class":59},[49,6106,1063],{"class":55},[49,6108,6109],{"class":51,"line":954},[49,6110,295],{"emptyLinePlaceholder":162},[49,6112,6113],{"class":51,"line":968},[49,6114,6115],{"class":88},"\u002F\u002F イベントリスナーの内容\n",[49,6117,6118,6120,6123,6125,6128,6130],{"class":51,"line":1016},[49,6119,306],{"class":305},[49,6121,6122],{"class":55}," onClickAdd ",[49,6124,312],{"class":59},[49,6126,6127],{"class":59}," ()",[49,6129,6085],{"class":305},[49,6131,965],{"class":59},[49,6133,6134,6137,6140,6142,6145,6147],{"class":51,"line":1033},[49,6135,6136],{"class":305},"    let",[49,6138,6139],{"class":55}," card",[49,6141,436],{"class":59},[49,6143,6144],{"class":63}," createCard",[49,6146,6098],{"class":338},[49,6148,82],{"class":59},[49,6150,6151,6154,6156,6159,6161,6164,6166],{"class":51,"line":1045},[49,6152,6153],{"class":63},"    insertCard",[49,6155,67],{"class":338},[49,6157,6158],{"class":55},"card",[49,6160,60],{"class":59},[49,6162,6163],{"class":55},"dom",[49,6165,79],{"class":338},[49,6167,82],{"class":59},[49,6169,6170,6173,6175,6177,6179,6182,6184],{"class":51,"line":1057},[49,6171,6172],{"class":63},"    scanAdd",[49,6174,67],{"class":338},[49,6176,6158],{"class":55},[49,6178,60],{"class":59},[49,6180,6181],{"class":55},"id",[49,6183,79],{"class":338},[49,6185,82],{"class":59},[49,6187,6188],{"class":51,"line":1066},[49,6189,538],{"class":59},[49,6191,6192],{"class":51,"line":1072},[49,6193,295],{"emptyLinePlaceholder":162},[49,6195,6196],{"class":51,"line":1081},[49,6197,6198],{"class":88},"\u002F\u002F カードのDOMを新規作成\n",[49,6200,6201,6203,6206,6208,6210,6212],{"class":51,"line":1086},[49,6202,306],{"class":305},[49,6204,6205],{"class":55}," createCard ",[49,6207,312],{"class":59},[49,6209,6127],{"class":59},[49,6211,6085],{"class":305},[49,6213,965],{"class":59},[49,6215,6216,6218,6221,6223,6226,6229],{"class":51,"line":2823},[49,6217,6136],{"class":305},[49,6219,6220],{"class":55}," info",[49,6222,436],{"class":59},[49,6224,6225],{"class":59}," {...",[49,6227,6228],{"class":55},"elementInit",[49,6230,4014],{"class":59},[49,6232,6233],{"class":51,"line":3465},[49,6234,295],{"emptyLinePlaceholder":162},[49,6236,6237],{"class":51,"line":3470},[49,6238,6239],{"class":88},"    \u002F\u002F カードの要素をdivで作成\n",[49,6241,6242,6244,6247,6249,6251,6253,6256,6258,6260,6263,6265,6267],{"class":51,"line":3475},[49,6243,6136],{"class":305},[49,6245,6246],{"class":55}," contain",[49,6248,436],{"class":59},[49,6250,5871],{"class":55},[49,6252,60],{"class":59},[49,6254,6255],{"class":63},"createElement",[49,6257,67],{"class":338},[49,6259,70],{"class":59},[49,6261,6262],{"class":73},"DIV",[49,6264,70],{"class":59},[49,6266,79],{"class":338},[49,6268,82],{"class":59},[49,6270,6271,6274,6276,6279,6281,6283,6286,6288,6290,6292,6294,6296,6298],{"class":51,"line":3496},[49,6272,6273],{"class":55},"    contain",[49,6275,60],{"class":59},[49,6277,6278],{"class":63},"setAttribute",[49,6280,67],{"class":338},[49,6282,391],{"class":59},[49,6284,6285],{"class":73},"class",[49,6287,391],{"class":59},[49,6289,989],{"class":59},[49,6291,391],{"class":59},[49,6293,4549],{"class":73},[49,6295,391],{"class":59},[49,6297,79],{"class":338},[49,6299,82],{"class":59},[49,6301,6302],{"class":51,"line":3507},[49,6303,295],{"emptyLinePlaceholder":162},[49,6305,6306],{"class":51,"line":3513},[49,6307,6308],{"class":88},"    \u002F\u002F IDをランダムに作成、記録\n",[49,6310,6311,6313,6316,6318,6321,6323,6326,6328,6330,6333,6335,6338,6340,6342,6345,6347,6350,6352],{"class":51,"line":3539},[49,6312,6136],{"class":305},[49,6314,6315],{"class":55}," idname",[49,6317,436],{"class":59},[49,6319,6320],{"class":55}," Math",[49,6322,60],{"class":59},[49,6324,6325],{"class":63},"random",[49,6327,6098],{"class":338},[49,6329,60],{"class":59},[49,6331,6332],{"class":63},"toString",[49,6334,67],{"class":338},[49,6336,6337],{"class":915},"32",[49,6339,79],{"class":338},[49,6341,60],{"class":59},[49,6343,6344],{"class":63},"substring",[49,6346,67],{"class":338},[49,6348,6349],{"class":915},"2",[49,6351,79],{"class":338},[49,6353,82],{"class":59},[49,6355,6356,6358,6360,6362,6364,6366,6368,6370,6372,6375,6377],{"class":51,"line":3562},[49,6357,6273],{"class":55},[49,6359,60],{"class":59},[49,6361,6278],{"class":63},[49,6363,67],{"class":338},[49,6365,391],{"class":59},[49,6367,6181],{"class":73},[49,6369,391],{"class":59},[49,6371,989],{"class":59},[49,6373,6374],{"class":55},"idname",[49,6376,79],{"class":338},[49,6378,82],{"class":59},[49,6380,6381,6384,6386,6388,6390,6392],{"class":51,"line":3572},[49,6382,6383],{"class":55},"    info",[49,6385,60],{"class":59},[49,6387,6181],{"class":55},[49,6389,436],{"class":59},[49,6391,6315],{"class":55},[49,6393,82],{"class":59},[49,6395,6396],{"class":51,"line":3589},[49,6397,295],{"emptyLinePlaceholder":162},[49,6399,6400],{"class":51,"line":3599},[49,6401,6402],{"class":88},"    \u002F\u002F カードに表示される画像（一色塗り潰し）を設定、記録\n",[49,6404,6405],{"class":51,"line":3618},[49,6406,6407],{"class":88},"    \u002F\u002F colorsの値と画像名が同じ。\n",[49,6409,6410,6412,6414,6416,6418,6420,6422,6424,6426,6429,6431,6433],{"class":51,"line":3624},[49,6411,6136],{"class":305},[49,6413,6139],{"class":55},[49,6415,436],{"class":59},[49,6417,5871],{"class":55},[49,6419,60],{"class":59},[49,6421,6255],{"class":63},[49,6423,67],{"class":338},[49,6425,70],{"class":59},[49,6427,6428],{"class":73},"IMG",[49,6430,70],{"class":59},[49,6432,79],{"class":338},[49,6434,82],{"class":59},[49,6436,6437,6439,6442,6444,6447,6449,6452,6454,6457,6459,6461,6463,6465,6468,6470,6472,6474,6477,6479],{"class":51,"line":3629},[49,6438,6136],{"class":305},[49,6440,6441],{"class":55}," color",[49,6443,436],{"class":59},[49,6445,6446],{"class":55}," colors",[49,6448,3697],{"class":338},[49,6450,6451],{"class":55},"Math",[49,6453,60],{"class":59},[49,6455,6456],{"class":63},"floor",[49,6458,67],{"class":338},[49,6460,6451],{"class":55},[49,6462,60],{"class":59},[49,6464,6325],{"class":63},[49,6466,6467],{"class":338},"() ",[49,6469,4574],{"class":59},[49,6471,6446],{"class":55},[49,6473,60],{"class":59},[49,6475,6476],{"class":55},"length",[49,6478,1674],{"class":338},[49,6480,82],{"class":59},[49,6482,6483,6485,6487,6490,6492,6494],{"class":51,"line":3639},[49,6484,6383],{"class":55},[49,6486,60],{"class":59},[49,6488,6489],{"class":55},"color",[49,6491,436],{"class":59},[49,6493,6441],{"class":55},[49,6495,82],{"class":59},[49,6497,6498],{"class":51,"line":3654},[49,6499,295],{"emptyLinePlaceholder":162},[49,6501,6502],{"class":51,"line":3659},[49,6503,6504],{"class":88},"    \u002F\u002F IMG要素にカラーの画像とクラス名を付与\n",[49,6506,6507,6510,6512,6514,6516,6518,6520,6522,6524,6526,6529,6531,6534,6536,6538,6540,6543,6545,6547],{"class":51,"line":3664},[49,6508,6509],{"class":55},"    card",[49,6511,60],{"class":59},[49,6513,6278],{"class":63},[49,6515,67],{"class":338},[49,6517,391],{"class":59},[49,6519,217],{"class":73},[49,6521,391],{"class":59},[49,6523,989],{"class":59},[49,6525,391],{"class":59},[49,6527,6528],{"class":73},".\u002F",[49,6530,391],{"class":59},[49,6532,6533],{"class":59},"+",[49,6535,6489],{"class":55},[49,6537,6533],{"class":59},[49,6539,391],{"class":59},[49,6541,6542],{"class":73},".png",[49,6544,391],{"class":59},[49,6546,79],{"class":338},[49,6548,82],{"class":59},[49,6550,6551,6553,6555,6557,6559,6561,6563,6565,6567,6569,6571,6573,6575],{"class":51,"line":3669},[49,6552,6509],{"class":55},[49,6554,60],{"class":59},[49,6556,6278],{"class":63},[49,6558,67],{"class":338},[49,6560,391],{"class":59},[49,6562,6285],{"class":73},[49,6564,391],{"class":59},[49,6566,989],{"class":59},[49,6568,391],{"class":59},[49,6570,4460],{"class":73},[49,6572,391],{"class":59},[49,6574,79],{"class":338},[49,6576,82],{"class":59},[49,6578,6579],{"class":51,"line":3674},[49,6580,295],{"emptyLinePlaceholder":162},[49,6582,6583],{"class":51,"line":3679},[49,6584,6585],{"class":88},"    \u002F\u002F カードに対して不明な高さを与える\n",[49,6587,6588,6590,6592,6595,6597,6599,6601,6603,6605,6607,6609,6611,6613,6615,6617,6620,6622,6624,6626,6629,6632,6634,6636],{"class":51,"line":3690},[49,6589,6383],{"class":55},[49,6591,60],{"class":59},[49,6593,6594],{"class":55},"selfHeight",[49,6596,436],{"class":59},[49,6598,6320],{"class":55},[49,6600,60],{"class":59},[49,6602,6456],{"class":63},[49,6604,67],{"class":338},[49,6606,6451],{"class":55},[49,6608,60],{"class":59},[49,6610,6325],{"class":63},[49,6612,6098],{"class":338},[49,6614,4574],{"class":59},[49,6616,67],{"class":338},[49,6618,6619],{"class":55},"heightMax",[49,6621,6533],{"class":59},[49,6623,916],{"class":915},[49,6625,912],{"class":59},[49,6627,6628],{"class":55},"heightMin",[49,6630,6631],{"class":338},"))",[49,6633,6533],{"class":59},[49,6635,6628],{"class":55},[49,6637,82],{"class":59},[49,6639,6640],{"class":51,"line":3711},[49,6641,484],{"class":338},[49,6643,6644],{"class":51,"line":3716},[49,6645,6646],{"class":88},"    \u002F\u002F カードDIVにIMGを追加\n",[49,6648,6649,6651,6653,6656,6658,6660,6662],{"class":51,"line":3737},[49,6650,6273],{"class":55},[49,6652,60],{"class":59},[49,6654,6655],{"class":63},"appendChild",[49,6657,67],{"class":338},[49,6659,6158],{"class":55},[49,6661,79],{"class":338},[49,6663,82],{"class":59},[49,6665,6666],{"class":51,"line":3742},[49,6667,295],{"emptyLinePlaceholder":162},[49,6669,6670],{"class":51,"line":3751},[49,6671,6672],{"class":88},"    \u002F\u002F elementsに記録。DOMとIDを返す\n",[49,6674,6675,6678,6680,6682,6684,6687,6689],{"class":51,"line":3760},[49,6676,6677],{"class":55},"    elements",[49,6679,60],{"class":59},[49,6681,948],{"class":63},[49,6683,67],{"class":338},[49,6685,6686],{"class":55},"info",[49,6688,79],{"class":338},[49,6690,82],{"class":59},[49,6692,6693,6695,6697,6699,6701,6704,6706,6708,6710,6712],{"class":51,"line":3765},[49,6694,6092],{"class":357},[49,6696,3181],{"class":59},[49,6698,6163],{"class":338},[49,6700,342],{"class":59},[49,6702,6703],{"class":55},"contain",[49,6705,989],{"class":59},[49,6707,6181],{"class":338},[49,6709,342],{"class":59},[49,6711,6374],{"class":55},[49,6713,4014],{"class":59},[49,6715,6716],{"class":51,"line":3772},[49,6717,538],{"class":59},[49,6719,6720],{"class":51,"line":3815},[49,6721,295],{"emptyLinePlaceholder":162},[49,6723,6724],{"class":51,"line":3824},[49,6725,6726],{"class":88},"\u002F\u002F カードコンテナーにカードを追加する\n",[49,6728,6729,6731,6734,6736,6739,6742,6744,6746],{"class":51,"line":3856},[49,6730,306],{"class":305},[49,6732,6733],{"class":55}," insertCard ",[49,6735,312],{"class":59},[49,6737,6738],{"class":59}," (",[49,6740,6741],{"class":865},"cardDom",[49,6743,79],{"class":59},[49,6745,6085],{"class":305},[49,6747,965],{"class":59},[49,6749,6750,6753,6755,6757,6759,6761,6763],{"class":51,"line":3861},[49,6751,6752],{"class":55},"    cardsContainer",[49,6754,60],{"class":59},[49,6756,6655],{"class":63},[49,6758,67],{"class":338},[49,6760,6741],{"class":55},[49,6762,79],{"class":338},[49,6764,82],{"class":59},[49,6766,6767],{"class":51,"line":3888},[49,6768,538],{"class":59},[49,6770,6771],{"class":51,"line":3893},[49,6772,295],{"emptyLinePlaceholder":162},[49,6774,6775],{"class":51,"line":3899},[49,6776,6777],{"class":88},"\u002F\u002F これが大切\n",[49,6779,6780],{"class":51,"line":3909},[49,6781,6782],{"class":88},"\u002F\u002F IDで紐づいたDOMに対して高さと位置を決定させる。\n",[49,6784,6785,6787,6790,6792,6794,6796,6798,6800],{"class":51,"line":3915},[49,6786,306],{"class":305},[49,6788,6789],{"class":55}," scanAdd ",[49,6791,312],{"class":59},[49,6793,6738],{"class":59},[49,6795,6181],{"class":865},[49,6797,79],{"class":59},[49,6799,871],{"class":305},[49,6801,965],{"class":59},[49,6803,6804],{"class":51,"line":3938},[49,6805,6806],{"class":88},"    \u002F\u002F elementsから対象カードのIDの番号、情報を取得\n",[49,6808,6809,6811,6814,6816,6819,6821,6824,6826,6829,6831,6834,6837,6840,6842,6844,6847,6849,6851,6853],{"class":51,"line":3953},[49,6810,6136],{"class":305},[49,6812,6813],{"class":55}," index",[49,6815,436],{"class":59},[49,6817,6818],{"class":55}," elements",[49,6820,60],{"class":59},[49,6822,6823],{"class":63},"findIndex",[49,6825,67],{"class":338},[49,6827,6828],{"class":865},"ele",[49,6830,6085],{"class":305},[49,6832,6833],{"class":59},"{",[49,6835,6836],{"class":357},"return",[49,6838,6839],{"class":55}," ele",[49,6841,60],{"class":59},[49,6843,6181],{"class":55},[49,6845,6846],{"class":59},"===",[49,6848,6181],{"class":55},[49,6850,1000],{"class":59},[49,6852,79],{"class":338},[49,6854,82],{"class":59},[49,6856,6857,6859,6861,6863,6865,6867,6870],{"class":51,"line":3958},[49,6858,6136],{"class":305},[49,6860,6839],{"class":55},[49,6862,436],{"class":59},[49,6864,6818],{"class":55},[49,6866,3697],{"class":338},[49,6868,6869],{"class":55},"index",[49,6871,417],{"class":338},[49,6873,6874],{"class":51,"line":3968},[49,6875,295],{"emptyLinePlaceholder":162},[49,6877,6878],{"class":51,"line":3981},[49,6879,6880],{"class":88},"    \u002F\u002F DOMを取得\n",[49,6882,6883,6885,6888,6890,6892,6894,6896,6898,6900,6902,6904,6906],{"class":51,"line":3995},[49,6884,6136],{"class":305},[49,6886,6887],{"class":55}," dom",[49,6889,436],{"class":59},[49,6891,5871],{"class":55},[49,6893,60],{"class":59},[49,6895,5876],{"class":63},[49,6897,67],{"class":338},[49,6899,6828],{"class":55},[49,6901,60],{"class":59},[49,6903,6181],{"class":55},[49,6905,79],{"class":338},[49,6907,82],{"class":59},[49,6909,6910],{"class":51,"line":4005},[49,6911,295],{"emptyLinePlaceholder":162},[49,6913,6914],{"class":51,"line":4011},[49,6915,6916],{"class":88},"    \u002F\u002F index、つまりカードが何晩目かと列数でx,yの位置を決定する。\n",[49,6918,6919,6921,6924,6926,6928,6930],{"class":51,"line":4017},[49,6920,6136],{"class":305},[49,6922,6923],{"class":55}," height",[49,6925,436],{"class":59},[49,6927,6839],{"class":55},[49,6929,60],{"class":59},[49,6931,6932],{"class":55},"selfHeight\n",[49,6934,6935,6938,6940,6943,6945,6947,6949,6952,6955,6957,6959,6962,6964,6967,6969,6971,6974,6976,6978,6980,6982,6985,6987],{"class":51,"line":4022},[49,6936,6937],{"class":55},"    ele",[49,6939,60],{"class":59},[49,6941,6942],{"class":55},"y",[49,6944,436],{"class":59},[49,6946,6738],{"class":338},[49,6948,6869],{"class":55},[49,6950,6951],{"class":59}," \u003C",[49,6953,6954],{"class":55}," row",[49,6956,79],{"class":338},[49,6958,3528],{"class":59},[49,6960,6961],{"class":55},"height",[49,6963,342],{"class":59},[49,6965,6966],{"class":55},"elements",[49,6968,3697],{"class":338},[49,6970,6869],{"class":55},[49,6972,6973],{"class":59}," -",[49,6975,6954],{"class":55},[49,6977,925],{"class":338},[49,6979,60],{"class":59},[49,6981,6942],{"class":55},[49,6983,6984],{"class":59}," +",[49,6986,6923],{"class":55},[49,6988,82],{"class":59},[49,6990,6991,6993,6996,6998,7000,7002,7005,7007,7010,7012,7014,7017,7020,7022,7024,7026,7028],{"class":51,"line":4049},[49,6992,6136],{"class":305},[49,6994,6995],{"class":55}," x",[49,6997,436],{"class":59},[49,6999,6738],{"class":338},[49,7001,6869],{"class":55},[49,7003,7004],{"class":59},"%",[49,7006,67],{"class":338},[49,7008,7009],{"class":55},"row",[49,7011,79],{"class":338},[49,7013,4574],{"class":59},[49,7015,7016],{"class":915},"100",[49,7018,7019],{"class":338},") ",[49,7021,6533],{"class":59},[49,7023,386],{"class":59},[49,7025,7004],{"class":73},[49,7027,391],{"class":59},[49,7029,82],{"class":59},[49,7031,7032,7034,7037,7039,7041,7043,7045,7047,7049,7051,7053,7055,7057,7059,7061,7063,7065,7067,7069,7071],{"class":51,"line":4074},[49,7033,6136],{"class":305},[49,7035,7036],{"class":55}," y",[49,7038,436],{"class":59},[49,7040,6738],{"class":338},[49,7042,6869],{"class":55},[49,7044,6951],{"class":59},[49,7046,6954],{"class":55},[49,7048,79],{"class":338},[49,7050,3528],{"class":59},[49,7052,922],{"class":915},[49,7054,342],{"class":59},[49,7056,6966],{"class":55},[49,7058,3697],{"class":338},[49,7060,6869],{"class":55},[49,7062,6973],{"class":59},[49,7064,6954],{"class":55},[49,7066,925],{"class":338},[49,7068,60],{"class":59},[49,7070,6942],{"class":55},[49,7072,82],{"class":59},[49,7074,7075],{"class":51,"line":4083},[49,7076,484],{"class":338},[49,7078,7079],{"class":51,"line":4088},[49,7080,7081],{"class":88},"    \u002F\u002F 位置をずらすスタイルを適用\n",[49,7083,7084,7087,7089,7091,7093,7095,7097,7099,7101,7103,7106,7108,7110,7112,7115,7117,7120,7122,7124,7126,7128,7130,7133,7135],{"class":51,"line":4109},[49,7085,7086],{"class":55},"    dom",[49,7088,60],{"class":59},[49,7090,6278],{"class":63},[49,7092,67],{"class":338},[49,7094,391],{"class":59},[49,7096,150],{"class":73},[49,7098,391],{"class":59},[49,7100,989],{"class":59},[49,7102,3933],{"class":59},[49,7104,7105],{"class":73},"height:",[49,7107,1005],{"class":59},[49,7109,6961],{"class":55},[49,7111,1000],{"class":59},[49,7113,7114],{"class":73},"px; transform:translate(",[49,7116,1005],{"class":59},[49,7118,7119],{"class":55},"x",[49,7121,1000],{"class":59},[49,7123,989],{"class":73},[49,7125,1005],{"class":59},[49,7127,6942],{"class":55},[49,7129,1000],{"class":59},[49,7131,7132],{"class":73},"px);",[49,7134,3933],{"class":59},[49,7136,1063],{"class":338},[49,7138,7139],{"class":51,"line":4174},[49,7140,295],{"emptyLinePlaceholder":162},[49,7142,7143],{"class":51,"line":4189},[49,7144,7145],{"class":88},"    \u002F\u002F アニメーション用のスタイルを追加\n",[49,7147,7148,7151,7153,7155,7157],{"class":51,"line":4200},[49,7149,7150],{"class":63},"    setTimeout",[49,7152,67],{"class":338},[49,7154,6098],{"class":59},[49,7156,6085],{"class":305},[49,7158,965],{"class":59},[49,7160,7161,7164,7166,7169,7171,7174,7176,7178,7180,7182],{"class":51,"line":4239},[49,7162,7163],{"class":55},"        dom",[49,7165,60],{"class":59},[49,7167,7168],{"class":55},"classList",[49,7170,60],{"class":59},[49,7172,7173],{"class":63},"add",[49,7175,67],{"class":338},[49,7177,391],{"class":59},[49,7179,5013],{"class":73},[49,7181,391],{"class":59},[49,7183,1063],{"class":338},[49,7185,7186,7189,7192,7194],{"class":51,"line":4254},[49,7187,7188],{"class":59},"    },",[49,7190,7191],{"class":915},"500",[49,7193,79],{"class":338},[49,7195,82],{"class":59},[49,7197,7198],{"class":51,"line":4265},[49,7199,538],{"class":59},[13,7201,7202],{},"大まかな流れとしては以下の通りです。",[7204,7205,7206,7209,7212,7215,7218],"ol",{},[189,7207,7208],{},"列数、カード座標情報などの初期値と格納する配列の定義。",[189,7210,7211],{},"ボタンに対するイベントリスナーの定義、ボタンを押したら以下を発火。",[189,7213,7214],{},"新しいカードを作成する",[189,7216,7217],{},"カードをコンテナに追加",[189,7219,7220],{},"追加数、列数に応じて追加したカードの位置を決定",[13,7222,7223],{},"それでは細かく解説していきます。",[7225,7226,7227],"h4",{"id":7227},"定数などの準備",[40,7229,7231],{"className":285,"code":7230,"language":288,"meta":45,"style":45},"\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",[17,7232,7233,7237,7249,7253,7257,7267,7273,7279,7289,7299,7308,7312,7316,7320,7332,7336,7340,7366,7370,7374,7400,7404,7408,7420,7432,7436,7440,7500],{"__ignoreMap":45},[49,7234,7235],{"class":51,"line":52},[49,7236,5753],{"class":88},[49,7238,7239,7241,7243,7245,7247],{"class":51,"line":85},[49,7240,306],{"class":305},[49,7242,5760],{"class":55},[49,7244,312],{"class":59},[49,7246,5765],{"class":55},[49,7248,82],{"class":59},[49,7250,7251],{"class":51,"line":154},[49,7252,295],{"emptyLinePlaceholder":162},[49,7254,7255],{"class":51,"line":318},[49,7256,5776],{"class":88},[49,7258,7259,7261,7263,7265],{"class":51,"line":324},[49,7260,306],{"class":305},[49,7262,5783],{"class":55},[49,7264,312],{"class":59},[49,7266,375],{"class":59},[49,7268,7269,7271],{"class":51,"line":330},[49,7270,5792],{"class":338},[49,7272,5795],{"class":59},[49,7274,7275,7277],{"class":51,"line":4},[49,7276,5800],{"class":338},[49,7278,5795],{"class":59},[49,7280,7281,7283,7285,7287],{"class":51,"line":367},[49,7282,5807],{"class":338},[49,7284,342],{"class":59},[49,7286,922],{"class":915},[49,7288,364],{"class":59},[49,7290,7291,7293,7295,7297],{"class":51,"line":378},[49,7292,5818],{"class":338},[49,7294,342],{"class":59},[49,7296,922],{"class":915},[49,7298,364],{"class":59},[49,7300,7301,7304,7306],{"class":51,"line":396},[49,7302,7303],{"class":338},"    x",[49,7305,342],{"class":59},[49,7307,5823],{"class":915},[49,7309,7310],{"class":51,"line":402},[49,7311,4014],{"class":59},[49,7313,7314],{"class":51,"line":408},[49,7315,295],{"emptyLinePlaceholder":162},[49,7317,7318],{"class":51,"line":414},[49,7319,5836],{"class":88},[49,7321,7322,7324,7326,7328,7330],{"class":51,"line":420},[49,7323,306],{"class":305},[49,7325,5843],{"class":55},[49,7327,312],{"class":59},[49,7329,5848],{"class":915},[49,7331,82],{"class":59},[49,7333,7334],{"class":51,"line":425},[49,7335,295],{"emptyLinePlaceholder":162},[49,7337,7338],{"class":51,"line":441},[49,7339,5859],{"class":88},[49,7341,7342,7344,7346,7348,7350,7352,7354,7356,7358,7360,7362,7364],{"class":51,"line":458},[49,7343,428],{"class":305},[49,7345,5866],{"class":55},[49,7347,312],{"class":59},[49,7349,5871],{"class":55},[49,7351,60],{"class":59},[49,7353,5876],{"class":63},[49,7355,67],{"class":55},[49,7357,391],{"class":59},[49,7359,4408],{"class":73},[49,7361,391],{"class":59},[49,7363,79],{"class":55},[49,7365,82],{"class":59},[49,7367,7368],{"class":51,"line":464},[49,7369,295],{"emptyLinePlaceholder":162},[49,7371,7372],{"class":51,"line":481},[49,7373,5897],{"class":88},[49,7375,7376,7378,7380,7382,7384,7386,7388,7390,7392,7394,7396,7398],{"class":51,"line":487},[49,7377,428],{"class":305},[49,7379,5904],{"class":55},[49,7381,312],{"class":59},[49,7383,5871],{"class":55},[49,7385,60],{"class":59},[49,7387,5876],{"class":63},[49,7389,67],{"class":55},[49,7391,391],{"class":59},[49,7393,4628],{"class":73},[49,7395,391],{"class":59},[49,7397,79],{"class":55},[49,7399,82],{"class":59},[49,7401,7402],{"class":51,"line":497},[49,7403,295],{"emptyLinePlaceholder":162},[49,7405,7406],{"class":51,"line":508},[49,7407,5933],{"class":88},[49,7409,7410,7412,7414,7416,7418],{"class":51,"line":513},[49,7411,428],{"class":305},[49,7413,5940],{"class":55},[49,7415,312],{"class":59},[49,7417,5945],{"class":915},[49,7419,82],{"class":59},[49,7421,7422,7424,7426,7428,7430],{"class":51,"line":518},[49,7423,428],{"class":305},[49,7425,5954],{"class":55},[49,7427,312],{"class":59},[49,7429,5959],{"class":915},[49,7431,82],{"class":59},[49,7433,7434],{"class":51,"line":530},[49,7435,295],{"emptyLinePlaceholder":162},[49,7437,7438],{"class":51,"line":535},[49,7439,5970],{"class":88},[49,7441,7442,7444,7446,7448,7450,7452,7454,7456,7458,7460,7462,7464,7466,7468,7470,7472,7474,7476,7478,7480,7482,7484,7486,7488,7490,7492,7494,7496,7498],{"class":51,"line":541},[49,7443,428],{"class":305},[49,7445,5977],{"class":55},[49,7447,312],{"class":59},[49,7449,1556],{"class":55},[49,7451,391],{"class":59},[49,7453,5986],{"class":73},[49,7455,391],{"class":59},[49,7457,989],{"class":59},[49,7459,391],{"class":59},[49,7461,5995],{"class":73},[49,7463,391],{"class":59},[49,7465,989],{"class":59},[49,7467,391],{"class":59},[49,7469,6004],{"class":73},[49,7471,391],{"class":59},[49,7473,989],{"class":59},[49,7475,391],{"class":59},[49,7477,6013],{"class":73},[49,7479,391],{"class":59},[49,7481,989],{"class":59},[49,7483,391],{"class":59},[49,7485,6022],{"class":73},[49,7487,391],{"class":59},[49,7489,989],{"class":59},[49,7491,391],{"class":59},[49,7493,6031],{"class":73},[49,7495,391],{"class":59},[49,7497,925],{"class":55},[49,7499,82],{"class":59},[49,7501,7502,7504,7506,7508,7510],{"class":51,"line":547},[49,7503,428],{"class":305},[49,7505,6044],{"class":55},[49,7507,312],{"class":59},[49,7509,6049],{"class":915},[49,7511,82],{"class":59},[13,7513,7514,7515,7517],{},"ここでは追加する際に必要な定数やDOMを定義しておきます。\n",[17,7516,6966],{},"には作成したカードコンテンツを記録しておきます。列＋１番目以降（今回は４番目以降）の高さを調整するときなどに使用します。",[7225,7519,7520],{"id":7520},"カードの作成関数を設定",[40,7522,7524],{"className":285,"code":7523,"language":288,"meta":45,"style":45},"\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",[17,7525,7526,7530,7544,7558,7562,7566,7592,7620,7624,7628,7666,7690,7704,7708,7712,7716,7742,7782,7796,7800,7804,7844,7872,7876,7880,7928,7932,7936,7952,7956,7960,7976,7998],{"__ignoreMap":45},[49,7527,7528],{"class":51,"line":52},[49,7529,6198],{"class":88},[49,7531,7532,7534,7536,7538,7540,7542],{"class":51,"line":85},[49,7533,306],{"class":305},[49,7535,6205],{"class":55},[49,7537,312],{"class":59},[49,7539,6127],{"class":59},[49,7541,6085],{"class":305},[49,7543,965],{"class":59},[49,7545,7546,7548,7550,7552,7554,7556],{"class":51,"line":154},[49,7547,6136],{"class":305},[49,7549,6220],{"class":55},[49,7551,436],{"class":59},[49,7553,6225],{"class":59},[49,7555,6228],{"class":55},[49,7557,4014],{"class":59},[49,7559,7560],{"class":51,"line":318},[49,7561,295],{"emptyLinePlaceholder":162},[49,7563,7564],{"class":51,"line":324},[49,7565,6239],{"class":88},[49,7567,7568,7570,7572,7574,7576,7578,7580,7582,7584,7586,7588,7590],{"class":51,"line":330},[49,7569,6136],{"class":305},[49,7571,6246],{"class":55},[49,7573,436],{"class":59},[49,7575,5871],{"class":55},[49,7577,60],{"class":59},[49,7579,6255],{"class":63},[49,7581,67],{"class":338},[49,7583,70],{"class":59},[49,7585,6262],{"class":73},[49,7587,70],{"class":59},[49,7589,79],{"class":338},[49,7591,82],{"class":59},[49,7593,7594,7596,7598,7600,7602,7604,7606,7608,7610,7612,7614,7616,7618],{"class":51,"line":4},[49,7595,6273],{"class":55},[49,7597,60],{"class":59},[49,7599,6278],{"class":63},[49,7601,67],{"class":338},[49,7603,391],{"class":59},[49,7605,6285],{"class":73},[49,7607,391],{"class":59},[49,7609,989],{"class":59},[49,7611,391],{"class":59},[49,7613,4549],{"class":73},[49,7615,391],{"class":59},[49,7617,79],{"class":338},[49,7619,82],{"class":59},[49,7621,7622],{"class":51,"line":367},[49,7623,295],{"emptyLinePlaceholder":162},[49,7625,7626],{"class":51,"line":378},[49,7627,6308],{"class":88},[49,7629,7630,7632,7634,7636,7638,7640,7642,7644,7646,7648,7650,7652,7654,7656,7658,7660,7662,7664],{"class":51,"line":396},[49,7631,6136],{"class":305},[49,7633,6315],{"class":55},[49,7635,436],{"class":59},[49,7637,6320],{"class":55},[49,7639,60],{"class":59},[49,7641,6325],{"class":63},[49,7643,6098],{"class":338},[49,7645,60],{"class":59},[49,7647,6332],{"class":63},[49,7649,67],{"class":338},[49,7651,6337],{"class":915},[49,7653,79],{"class":338},[49,7655,60],{"class":59},[49,7657,6344],{"class":63},[49,7659,67],{"class":338},[49,7661,6349],{"class":915},[49,7663,79],{"class":338},[49,7665,82],{"class":59},[49,7667,7668,7670,7672,7674,7676,7678,7680,7682,7684,7686,7688],{"class":51,"line":402},[49,7669,6273],{"class":55},[49,7671,60],{"class":59},[49,7673,6278],{"class":63},[49,7675,67],{"class":338},[49,7677,391],{"class":59},[49,7679,6181],{"class":73},[49,7681,391],{"class":59},[49,7683,989],{"class":59},[49,7685,6374],{"class":55},[49,7687,79],{"class":338},[49,7689,82],{"class":59},[49,7691,7692,7694,7696,7698,7700,7702],{"class":51,"line":408},[49,7693,6383],{"class":55},[49,7695,60],{"class":59},[49,7697,6181],{"class":55},[49,7699,436],{"class":59},[49,7701,6315],{"class":55},[49,7703,82],{"class":59},[49,7705,7706],{"class":51,"line":414},[49,7707,295],{"emptyLinePlaceholder":162},[49,7709,7710],{"class":51,"line":420},[49,7711,6402],{"class":88},[49,7713,7714],{"class":51,"line":425},[49,7715,6407],{"class":88},[49,7717,7718,7720,7722,7724,7726,7728,7730,7732,7734,7736,7738,7740],{"class":51,"line":441},[49,7719,6136],{"class":305},[49,7721,6139],{"class":55},[49,7723,436],{"class":59},[49,7725,5871],{"class":55},[49,7727,60],{"class":59},[49,7729,6255],{"class":63},[49,7731,67],{"class":338},[49,7733,70],{"class":59},[49,7735,6428],{"class":73},[49,7737,70],{"class":59},[49,7739,79],{"class":338},[49,7741,82],{"class":59},[49,7743,7744,7746,7748,7750,7752,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7776,7778,7780],{"class":51,"line":458},[49,7745,6136],{"class":305},[49,7747,6441],{"class":55},[49,7749,436],{"class":59},[49,7751,6446],{"class":55},[49,7753,3697],{"class":338},[49,7755,6451],{"class":55},[49,7757,60],{"class":59},[49,7759,6456],{"class":63},[49,7761,67],{"class":338},[49,7763,6451],{"class":55},[49,7765,60],{"class":59},[49,7767,6325],{"class":63},[49,7769,6467],{"class":338},[49,7771,4574],{"class":59},[49,7773,6446],{"class":55},[49,7775,60],{"class":59},[49,7777,6476],{"class":55},[49,7779,1674],{"class":338},[49,7781,82],{"class":59},[49,7783,7784,7786,7788,7790,7792,7794],{"class":51,"line":464},[49,7785,6383],{"class":55},[49,7787,60],{"class":59},[49,7789,6489],{"class":55},[49,7791,436],{"class":59},[49,7793,6441],{"class":55},[49,7795,82],{"class":59},[49,7797,7798],{"class":51,"line":481},[49,7799,295],{"emptyLinePlaceholder":162},[49,7801,7802],{"class":51,"line":487},[49,7803,6504],{"class":88},[49,7805,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828,7830,7832,7834,7836,7838,7840,7842],{"class":51,"line":497},[49,7807,6509],{"class":55},[49,7809,60],{"class":59},[49,7811,6278],{"class":63},[49,7813,67],{"class":338},[49,7815,391],{"class":59},[49,7817,217],{"class":73},[49,7819,391],{"class":59},[49,7821,989],{"class":59},[49,7823,391],{"class":59},[49,7825,6528],{"class":73},[49,7827,391],{"class":59},[49,7829,6533],{"class":59},[49,7831,6489],{"class":55},[49,7833,6533],{"class":59},[49,7835,391],{"class":59},[49,7837,6542],{"class":73},[49,7839,391],{"class":59},[49,7841,79],{"class":338},[49,7843,82],{"class":59},[49,7845,7846,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866,7868,7870],{"class":51,"line":508},[49,7847,6509],{"class":55},[49,7849,60],{"class":59},[49,7851,6278],{"class":63},[49,7853,67],{"class":338},[49,7855,391],{"class":59},[49,7857,6285],{"class":73},[49,7859,391],{"class":59},[49,7861,989],{"class":59},[49,7863,391],{"class":59},[49,7865,4460],{"class":73},[49,7867,391],{"class":59},[49,7869,79],{"class":338},[49,7871,82],{"class":59},[49,7873,7874],{"class":51,"line":513},[49,7875,295],{"emptyLinePlaceholder":162},[49,7877,7878],{"class":51,"line":518},[49,7879,6585],{"class":88},[49,7881,7882,7884,7886,7888,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910,7912,7914,7916,7918,7920,7922,7924,7926],{"class":51,"line":530},[49,7883,6383],{"class":55},[49,7885,60],{"class":59},[49,7887,6594],{"class":55},[49,7889,436],{"class":59},[49,7891,6320],{"class":55},[49,7893,60],{"class":59},[49,7895,6456],{"class":63},[49,7897,67],{"class":338},[49,7899,6451],{"class":55},[49,7901,60],{"class":59},[49,7903,6325],{"class":63},[49,7905,6098],{"class":338},[49,7907,4574],{"class":59},[49,7909,67],{"class":338},[49,7911,6619],{"class":55},[49,7913,6533],{"class":59},[49,7915,916],{"class":915},[49,7917,912],{"class":59},[49,7919,6628],{"class":55},[49,7921,6631],{"class":338},[49,7923,6533],{"class":59},[49,7925,6628],{"class":55},[49,7927,82],{"class":59},[49,7929,7930],{"class":51,"line":535},[49,7931,484],{"class":338},[49,7933,7934],{"class":51,"line":541},[49,7935,6646],{"class":88},[49,7937,7938,7940,7942,7944,7946,7948,7950],{"class":51,"line":547},[49,7939,6273],{"class":55},[49,7941,60],{"class":59},[49,7943,6655],{"class":63},[49,7945,67],{"class":338},[49,7947,6158],{"class":55},[49,7949,79],{"class":338},[49,7951,82],{"class":59},[49,7953,7954],{"class":51,"line":552},[49,7955,295],{"emptyLinePlaceholder":162},[49,7957,7958],{"class":51,"line":876},[49,7959,6672],{"class":88},[49,7961,7962,7964,7966,7968,7970,7972,7974],{"class":51,"line":930},[49,7963,6677],{"class":55},[49,7965,60],{"class":59},[49,7967,948],{"class":63},[49,7969,67],{"class":338},[49,7971,6686],{"class":55},[49,7973,79],{"class":338},[49,7975,82],{"class":59},[49,7977,7978,7980,7982,7984,7986,7988,7990,7992,7994,7996],{"class":51,"line":935},[49,7979,6092],{"class":357},[49,7981,3181],{"class":59},[49,7983,6163],{"class":338},[49,7985,342],{"class":59},[49,7987,6703],{"class":55},[49,7989,989],{"class":59},[49,7991,6181],{"class":338},[49,7993,342],{"class":59},[49,7995,6374],{"class":55},[49,7997,4014],{"class":59},[49,7999,8000],{"class":51,"line":954},[49,8001,538],{"class":59},[13,8003,8004,8005,8008,8009,8011,8012,8014],{},"カードの作成関数",[17,8006,8007],{},"createCard()","を作ります。ここはカードの要素を作成して、ランダムなIDを付与します。変数",[17,8010,6686],{},"にはカードの高さ、IDを記録して",[17,8013,6966],{},"に入れておきます。",[7225,8016,8017],{"id":8017},"要素の挿入関数を作成",[40,8019,8021],{"className":285,"code":8020,"language":288,"meta":45,"style":45},"\u002F\u002F カードコンテナーにカードを追加する\nlet insertCard = (cardDom)=>{\n    cardsContainer.appendChild(cardDom);\n}\n",[17,8022,8023,8027,8045,8061],{"__ignoreMap":45},[49,8024,8025],{"class":51,"line":52},[49,8026,6726],{"class":88},[49,8028,8029,8031,8033,8035,8037,8039,8041,8043],{"class":51,"line":85},[49,8030,306],{"class":305},[49,8032,6733],{"class":55},[49,8034,312],{"class":59},[49,8036,6738],{"class":59},[49,8038,6741],{"class":865},[49,8040,79],{"class":59},[49,8042,6085],{"class":305},[49,8044,965],{"class":59},[49,8046,8047,8049,8051,8053,8055,8057,8059],{"class":51,"line":154},[49,8048,6752],{"class":55},[49,8050,60],{"class":59},[49,8052,6655],{"class":63},[49,8054,67],{"class":338},[49,8056,6741],{"class":55},[49,8058,79],{"class":338},[49,8060,82],{"class":59},[49,8062,8063],{"class":51,"line":318},[49,8064,538],{"class":59},[13,8066,8067],{},"ここは作成したカードのDOMをカードコンテナに挿入します。",[7225,8069,8070],{"id":8070},"挿入されたカードの高さと位置を決定",[40,8072,8074],{"className":285,"code":8073,"language":288,"meta":45,"style":45},"\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",[17,8075,8076,8080,8084,8102,8106,8146,8162,8166,8170,8196,8200,8204,8218,8266,8302,8344,8348,8352,8402,8406,8410,8422,8444,8454],{"__ignoreMap":45},[49,8077,8078],{"class":51,"line":52},[49,8079,6777],{"class":88},[49,8081,8082],{"class":51,"line":85},[49,8083,6782],{"class":88},[49,8085,8086,8088,8090,8092,8094,8096,8098,8100],{"class":51,"line":154},[49,8087,306],{"class":305},[49,8089,6789],{"class":55},[49,8091,312],{"class":59},[49,8093,6738],{"class":59},[49,8095,6181],{"class":865},[49,8097,79],{"class":59},[49,8099,871],{"class":305},[49,8101,965],{"class":59},[49,8103,8104],{"class":51,"line":318},[49,8105,6806],{"class":88},[49,8107,8108,8110,8112,8114,8116,8118,8120,8122,8124,8126,8128,8130,8132,8134,8136,8138,8140,8142,8144],{"class":51,"line":324},[49,8109,6136],{"class":305},[49,8111,6813],{"class":55},[49,8113,436],{"class":59},[49,8115,6818],{"class":55},[49,8117,60],{"class":59},[49,8119,6823],{"class":63},[49,8121,67],{"class":338},[49,8123,6828],{"class":865},[49,8125,6085],{"class":305},[49,8127,6833],{"class":59},[49,8129,6836],{"class":357},[49,8131,6839],{"class":55},[49,8133,60],{"class":59},[49,8135,6181],{"class":55},[49,8137,6846],{"class":59},[49,8139,6181],{"class":55},[49,8141,1000],{"class":59},[49,8143,79],{"class":338},[49,8145,82],{"class":59},[49,8147,8148,8150,8152,8154,8156,8158,8160],{"class":51,"line":330},[49,8149,6136],{"class":305},[49,8151,6839],{"class":55},[49,8153,436],{"class":59},[49,8155,6818],{"class":55},[49,8157,3697],{"class":338},[49,8159,6869],{"class":55},[49,8161,417],{"class":338},[49,8163,8164],{"class":51,"line":4},[49,8165,295],{"emptyLinePlaceholder":162},[49,8167,8168],{"class":51,"line":367},[49,8169,6880],{"class":88},[49,8171,8172,8174,8176,8178,8180,8182,8184,8186,8188,8190,8192,8194],{"class":51,"line":378},[49,8173,6136],{"class":305},[49,8175,6887],{"class":55},[49,8177,436],{"class":59},[49,8179,5871],{"class":55},[49,8181,60],{"class":59},[49,8183,5876],{"class":63},[49,8185,67],{"class":338},[49,8187,6828],{"class":55},[49,8189,60],{"class":59},[49,8191,6181],{"class":55},[49,8193,79],{"class":338},[49,8195,82],{"class":59},[49,8197,8198],{"class":51,"line":396},[49,8199,295],{"emptyLinePlaceholder":162},[49,8201,8202],{"class":51,"line":402},[49,8203,6916],{"class":88},[49,8205,8206,8208,8210,8212,8214,8216],{"class":51,"line":408},[49,8207,6136],{"class":305},[49,8209,6923],{"class":55},[49,8211,436],{"class":59},[49,8213,6839],{"class":55},[49,8215,60],{"class":59},[49,8217,6932],{"class":55},[49,8219,8220,8222,8224,8226,8228,8230,8232,8234,8236,8238,8240,8242,8244,8246,8248,8250,8252,8254,8256,8258,8260,8262,8264],{"class":51,"line":414},[49,8221,6937],{"class":55},[49,8223,60],{"class":59},[49,8225,6942],{"class":55},[49,8227,436],{"class":59},[49,8229,6738],{"class":338},[49,8231,6869],{"class":55},[49,8233,6951],{"class":59},[49,8235,6954],{"class":55},[49,8237,79],{"class":338},[49,8239,3528],{"class":59},[49,8241,6961],{"class":55},[49,8243,342],{"class":59},[49,8245,6966],{"class":55},[49,8247,3697],{"class":338},[49,8249,6869],{"class":55},[49,8251,6973],{"class":59},[49,8253,6954],{"class":55},[49,8255,925],{"class":338},[49,8257,60],{"class":59},[49,8259,6942],{"class":55},[49,8261,6984],{"class":59},[49,8263,6923],{"class":55},[49,8265,82],{"class":59},[49,8267,8268,8270,8272,8274,8276,8278,8280,8282,8284,8286,8288,8290,8292,8294,8296,8298,8300],{"class":51,"line":420},[49,8269,6136],{"class":305},[49,8271,6995],{"class":55},[49,8273,436],{"class":59},[49,8275,6738],{"class":338},[49,8277,6869],{"class":55},[49,8279,7004],{"class":59},[49,8281,67],{"class":338},[49,8283,7009],{"class":55},[49,8285,79],{"class":338},[49,8287,4574],{"class":59},[49,8289,7016],{"class":915},[49,8291,7019],{"class":338},[49,8293,6533],{"class":59},[49,8295,386],{"class":59},[49,8297,7004],{"class":73},[49,8299,391],{"class":59},[49,8301,82],{"class":59},[49,8303,8304,8306,8308,8310,8312,8314,8316,8318,8320,8322,8324,8326,8328,8330,8332,8334,8336,8338,8340,8342],{"class":51,"line":425},[49,8305,6136],{"class":305},[49,8307,7036],{"class":55},[49,8309,436],{"class":59},[49,8311,6738],{"class":338},[49,8313,6869],{"class":55},[49,8315,6951],{"class":59},[49,8317,6954],{"class":55},[49,8319,79],{"class":338},[49,8321,3528],{"class":59},[49,8323,922],{"class":915},[49,8325,342],{"class":59},[49,8327,6966],{"class":55},[49,8329,3697],{"class":338},[49,8331,6869],{"class":55},[49,8333,6973],{"class":59},[49,8335,6954],{"class":55},[49,8337,925],{"class":338},[49,8339,60],{"class":59},[49,8341,6942],{"class":55},[49,8343,82],{"class":59},[49,8345,8346],{"class":51,"line":441},[49,8347,484],{"class":338},[49,8349,8350],{"class":51,"line":458},[49,8351,7081],{"class":88},[49,8353,8354,8356,8358,8360,8362,8364,8366,8368,8370,8372,8374,8376,8378,8380,8382,8384,8386,8388,8390,8392,8394,8396,8398,8400],{"class":51,"line":464},[49,8355,7086],{"class":55},[49,8357,60],{"class":59},[49,8359,6278],{"class":63},[49,8361,67],{"class":338},[49,8363,391],{"class":59},[49,8365,150],{"class":73},[49,8367,391],{"class":59},[49,8369,989],{"class":59},[49,8371,3933],{"class":59},[49,8373,7105],{"class":73},[49,8375,1005],{"class":59},[49,8377,6961],{"class":55},[49,8379,1000],{"class":59},[49,8381,7114],{"class":73},[49,8383,1005],{"class":59},[49,8385,7119],{"class":55},[49,8387,1000],{"class":59},[49,8389,989],{"class":73},[49,8391,1005],{"class":59},[49,8393,6942],{"class":55},[49,8395,1000],{"class":59},[49,8397,7132],{"class":73},[49,8399,3933],{"class":59},[49,8401,1063],{"class":338},[49,8403,8404],{"class":51,"line":481},[49,8405,295],{"emptyLinePlaceholder":162},[49,8407,8408],{"class":51,"line":487},[49,8409,7145],{"class":88},[49,8411,8412,8414,8416,8418,8420],{"class":51,"line":497},[49,8413,7150],{"class":63},[49,8415,67],{"class":338},[49,8417,6098],{"class":59},[49,8419,6085],{"class":305},[49,8421,965],{"class":59},[49,8423,8424,8426,8428,8430,8432,8434,8436,8438,8440,8442],{"class":51,"line":508},[49,8425,7163],{"class":55},[49,8427,60],{"class":59},[49,8429,7168],{"class":55},[49,8431,60],{"class":59},[49,8433,7173],{"class":63},[49,8435,67],{"class":338},[49,8437,391],{"class":59},[49,8439,5013],{"class":73},[49,8441,391],{"class":59},[49,8443,1063],{"class":338},[49,8445,8446,8448,8450,8452],{"class":51,"line":513},[49,8447,7188],{"class":59},[49,8449,7191],{"class":915},[49,8451,79],{"class":338},[49,8453,82],{"class":59},[49,8455,8456],{"class":51,"line":518},[49,8457,538],{"class":59},[13,8459,8460,8463,8464,8466,8467,8470],{},[17,8461,8462],{},"scanAdd()","では対象のID（DOMのID）に基づいて",[17,8465,6966],{},"から高さを設定する対象のカードと、そのカードの１行上のカードの情報を取得します。例えば５番目のカードの場合、２番目のカードの高さを用いてY座標を決定します。この関数ではその情報を元にしてカードに高さを与え、また表示する位置のx,y座標を決定して",[17,8468,8469],{},"translate","の値を決定します。",[7225,8472,8473],{"id":8473},"関数の連結とイベントリスナー",[40,8475,8477],{"className":285,"code":8476,"language":288,"meta":45,"style":45},"\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",[17,8478,8479,8483,8505,8515,8521,8525,8529,8543,8557,8573,8589],{"__ignoreMap":45},[49,8480,8481],{"class":51,"line":52},[49,8482,6060],{"class":88},[49,8484,8485,8487,8489,8491,8493,8495,8497,8499,8501,8503],{"class":51,"line":85},[49,8486,6065],{"class":55},[49,8488,60],{"class":59},[49,8490,6070],{"class":63},[49,8492,67],{"class":55},[49,8494,391],{"class":59},[49,8496,6077],{"class":73},[49,8498,391],{"class":59},[49,8500,6082],{"class":59},[49,8502,6085],{"class":305},[49,8504,965],{"class":59},[49,8506,8507,8509,8511,8513],{"class":51,"line":154},[49,8508,6092],{"class":357},[49,8510,6095],{"class":63},[49,8512,6098],{"class":338},[49,8514,82],{"class":59},[49,8516,8517,8519],{"class":51,"line":318},[49,8518,1000],{"class":59},[49,8520,1063],{"class":55},[49,8522,8523],{"class":51,"line":324},[49,8524,295],{"emptyLinePlaceholder":162},[49,8526,8527],{"class":51,"line":330},[49,8528,6115],{"class":88},[49,8530,8531,8533,8535,8537,8539,8541],{"class":51,"line":4},[49,8532,306],{"class":305},[49,8534,6122],{"class":55},[49,8536,312],{"class":59},[49,8538,6127],{"class":59},[49,8540,6085],{"class":305},[49,8542,965],{"class":59},[49,8544,8545,8547,8549,8551,8553,8555],{"class":51,"line":367},[49,8546,6136],{"class":305},[49,8548,6139],{"class":55},[49,8550,436],{"class":59},[49,8552,6144],{"class":63},[49,8554,6098],{"class":338},[49,8556,82],{"class":59},[49,8558,8559,8561,8563,8565,8567,8569,8571],{"class":51,"line":378},[49,8560,6153],{"class":63},[49,8562,67],{"class":338},[49,8564,6158],{"class":55},[49,8566,60],{"class":59},[49,8568,6163],{"class":55},[49,8570,79],{"class":338},[49,8572,82],{"class":59},[49,8574,8575,8577,8579,8581,8583,8585,8587],{"class":51,"line":396},[49,8576,6172],{"class":63},[49,8578,67],{"class":338},[49,8580,6158],{"class":55},[49,8582,60],{"class":59},[49,8584,6181],{"class":55},[49,8586,79],{"class":338},[49,8588,82],{"class":59},[49,8590,8591],{"class":51,"line":402},[49,8592,538],{"class":59},[13,8594,8595],{},"最後に上記の関数を連結し、イベントリスナーのコールバックに設定します。イベントリスナーはカードの追加ボタンに付与されています。",[254,8597,8598],{"id":8598},"実装後の動き",[13,8600,8601,8602,8605],{},"完成したデモは",[100,8603,4368],{"href":4366,"rel":8604},[104],"にあります。「ADD!」というボタンをクリックするとアニメーションつきでカードが追加されていきます。",[150,8607,8608],{},"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":45,"searchDepth":154,"depth":154,"links":8610},[8611,8612,8616],{"id":4372,"depth":85,"text":4372},{"id":5059,"depth":85,"text":5060,"children":8613},[8614,8615],{"id":5063,"depth":154,"text":5064},{"id":5103,"depth":154,"text":5104},{"id":5120,"depth":85,"text":5120,"children":8617},[8618,8619,8620,8627],{"id":5123,"depth":154,"text":5123},{"id":5449,"depth":154,"text":5450},{"id":5736,"depth":154,"text":5736,"children":8621},[8622,8623,8624,8625,8626],{"id":7227,"depth":318,"text":7227},{"id":7520,"depth":318,"text":7520},{"id":8017,"depth":318,"text":8017},{"id":8070,"depth":318,"text":8070},{"id":8473,"depth":318,"text":8473},{"id":8598,"depth":154,"text":8598},[4329],"2021-07-14",{},"\u002Farticles\u002Fpinterest-like-style",{"title":4344,"description":4344},"articles\u002Fpinterest-like-style",[167,4566,44],"pinterest-like-style\u002Fthumbnail.png","Kk6is-f7e7A8CgIICoPK0ixaA9U5aJL-fp-oIvtU9PM",{"id":8638,"title":8639,"body":8640,"category":9181,"createdAt":9182,"description":9183,"extension":159,"index":160,"meta":9184,"navigation":162,"path":9185,"publish":162,"seo":9186,"series":160,"seriesTitle":160,"stem":9187,"tag":9188,"thumbnail":9189,"updatedAt":160,"__hash__":9190},"articles\u002Farticles\u002Fbag-html-break-tag.md","white-space： pre;で要素内で生じる文章の隙間、インテンドの原因。",{"type":10,"value":8641,"toc":9179},[8642,8649,8652,8655,8837,8851,8864,8872,8996,9002,9005,9008,9170,9176],[13,8643,8644,8645,8648],{},"こんにちはjunです。ある日、vue.jsを使用して",[17,8646,8647],{},"textarea","の中の文章をリアルタイムにレンダーするような機能を実装しました。その時、改行文章に謎のインテンドが入り、困りました。こんな感じです。",[4351,8650],{":src":8651,":width":5082,":center":5083},"'_mix\u002Fsch-2021-05-04 21.53.14.png'",[13,8653,8654],{},"ソースは以下の感じ（かなり簡略化してます。）",[40,8656,8660],{"className":8657,"code":8658,"language":8659,"meta":45,"style":45},"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",[17,8661,8662,8671,8679,8698,8703,8751,8759,8767,8775,8783,8793,8801,8808,8817,8821,8825,8829],{"__ignoreMap":45},[49,8663,8664,8666,8669],{"class":51,"line":52},[49,8665,1425],{"class":59},[49,8667,8668],{"class":338},"template",[49,8670,4413],{"class":59},[49,8672,8673,8675,8677],{"class":51,"line":85},[49,8674,1425],{"class":59},[49,8676,1389],{"class":338},[49,8678,4413],{"class":59},[49,8680,8681,8683,8685,8687,8689,8691,8694,8696],{"class":51,"line":154},[49,8682,4418],{"class":59},[49,8684,1389],{"class":338},[49,8686,5189],{"class":305},[49,8688,312],{"class":59},[49,8690,70],{"class":59},[49,8692,8693],{"class":73},"white-space:pre;",[49,8695,70],{"class":59},[49,8697,4413],{"class":59},[49,8699,8700],{"class":51,"line":318},[49,8701,8702],{"class":55},"        {{test}}\n",[49,8704,8705,8707,8709,8712,8714,8716,8719,8721,8724,8726,8728,8731,8733,8736,8738,8740,8743,8745,8747,8749],{"class":51,"line":324},[49,8706,4438],{"class":59},[49,8708,8647],{"class":338},[49,8710,8711],{"class":305}," v-model",[49,8713,312],{"class":59},[49,8715,70],{"class":59},[49,8717,8718],{"class":73},"test",[49,8720,70],{"class":59},[49,8722,8723],{"class":305},"cols",[49,8725,312],{"class":59},[49,8727,70],{"class":59},[49,8729,8730],{"class":73},"30",[49,8732,70],{"class":59},[49,8734,8735],{"class":305}," rows",[49,8737,312],{"class":59},[49,8739,70],{"class":59},[49,8741,8742],{"class":73},"10",[49,8744,70],{"class":59},[49,8746,5201],{"class":59},[49,8748,8647],{"class":338},[49,8750,4413],{"class":59},[49,8752,8753,8755,8757],{"class":51,"line":330},[49,8754,4469],{"class":59},[49,8756,1389],{"class":338},[49,8758,4413],{"class":59},[49,8760,8761,8763,8765],{"class":51,"line":4},[49,8762,4537],{"class":59},[49,8764,1389],{"class":338},[49,8766,4413],{"class":59},[49,8768,8769,8771,8773],{"class":51,"line":367},[49,8770,4537],{"class":59},[49,8772,8668],{"class":338},[49,8774,4413],{"class":59},[49,8776,8777,8779,8781],{"class":51,"line":378},[49,8778,1425],{"class":59},[49,8780,5691],{"class":338},[49,8782,4413],{"class":59},[49,8784,8785,8788,8791],{"class":51,"line":396},[49,8786,8787],{"class":357},"export",[49,8789,8790],{"class":357}," default",[49,8792,375],{"class":59},[49,8794,8795,8798],{"class":51,"line":402},[49,8796,8797],{"class":338},"    data",[49,8799,8800],{"class":59},"(){\n",[49,8802,8803,8806],{"class":51,"line":408},[49,8804,8805],{"class":357},"        return",[49,8807,965],{"class":59},[49,8809,8810,8812,8814],{"class":51,"line":414},[49,8811,3516],{"class":338},[49,8813,342],{"class":59},[49,8815,8816],{"class":59},"''\n",[49,8818,8819],{"class":51,"line":420},[49,8820,399],{"class":59},[49,8822,8823],{"class":51,"line":425},[49,8824,2193],{"class":59},[49,8826,8827],{"class":51,"line":441},[49,8828,538],{"class":59},[49,8830,8831,8833,8835],{"class":51,"line":458},[49,8832,4537],{"class":59},[49,8834,5691],{"class":338},[49,8836,4413],{"class":59},[13,8838,8839,8840,8843,8844,8847,8848,8850],{},"とても簡単で",[17,8841,8842],{},"v-model","を使用してその",[17,8845,8846],{},"data()","を表示してあるだけです。そしてCSSでは",[17,8849,8693],{},"を指定して、改行コードが存在したらそこで改行するようにします。",[1389,8852,8855,8856],{"className":8853},[1392,8854],"alert-success","\nCSS の white-space プロパティは、要素内のホワイトスペースをどのように扱うかを設定します。\n",[8857,8858,8859],"small",{},[100,8860,8863],{"href":8861,"target":8862},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002Fwhite-space","_blank","mozilla.org",[13,8865,8866,8867,8871],{},"ただし上図のように謎のインテンドが最初の改行にあります。なぜ生じしてしまうのかを調べたところ、 ",[8868,8869,8870],"strong",{},"エディター上でのインテンド"," が原因でした。以下のようにファイルを直してみます。",[40,8873,8875],{"className":8657,"code":8874,"language":8659,"meta":45,"style":45},"\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",[17,8876,8877,8885,8893,8911,8916,8958,8966,8974,8982,8986],{"__ignoreMap":45},[49,8878,8879,8881,8883],{"class":51,"line":52},[49,8880,1425],{"class":59},[49,8882,8668],{"class":338},[49,8884,4413],{"class":59},[49,8886,8887,8889,8891],{"class":51,"line":85},[49,8888,1425],{"class":59},[49,8890,1389],{"class":338},[49,8892,4413],{"class":59},[49,8894,8895,8897,8899,8901,8903,8905,8907,8909],{"class":51,"line":154},[49,8896,4418],{"class":59},[49,8898,1389],{"class":338},[49,8900,5189],{"class":305},[49,8902,312],{"class":59},[49,8904,70],{"class":59},[49,8906,8693],{"class":73},[49,8908,70],{"class":59},[49,8910,4413],{"class":59},[49,8912,8913],{"class":51,"line":318},[49,8914,8915],{"class":55},"{{test}}\n",[49,8917,8918,8920,8922,8924,8926,8928,8930,8932,8934,8936,8938,8940,8942,8944,8946,8948,8950,8952,8954,8956],{"class":51,"line":324},[49,8919,4438],{"class":59},[49,8921,8647],{"class":338},[49,8923,8711],{"class":305},[49,8925,312],{"class":59},[49,8927,70],{"class":59},[49,8929,8718],{"class":73},[49,8931,70],{"class":59},[49,8933,8723],{"class":305},[49,8935,312],{"class":59},[49,8937,70],{"class":59},[49,8939,8730],{"class":73},[49,8941,70],{"class":59},[49,8943,8735],{"class":305},[49,8945,312],{"class":59},[49,8947,70],{"class":59},[49,8949,8742],{"class":73},[49,8951,70],{"class":59},[49,8953,5201],{"class":59},[49,8955,8647],{"class":338},[49,8957,4413],{"class":59},[49,8959,8960,8962,8964],{"class":51,"line":330},[49,8961,4469],{"class":59},[49,8963,1389],{"class":338},[49,8965,4413],{"class":59},[49,8967,8968,8970,8972],{"class":51,"line":4},[49,8969,4537],{"class":59},[49,8971,1389],{"class":338},[49,8973,4413],{"class":59},[49,8975,8976,8978,8980],{"class":51,"line":367},[49,8977,4537],{"class":59},[49,8979,8668],{"class":338},[49,8981,4413],{"class":59},[49,8983,8984],{"class":51,"line":378},[49,8985,295],{"emptyLinePlaceholder":162},[49,8987,8988,8990,8992,8994],{"class":51,"line":396},[49,8989,1425],{"class":59},[49,8991,361],{"class":55},[49,8993,5691],{"class":338},[49,8995,4413],{"class":59},[13,8997,8998,9001],{},[17,8999,9000],{},"{{text}}","の箇所を一番左につけることでなぜか、改行の際のインテンドがなくなりました。",[4351,9003],{":src":9004,":width":5082,":center":5083},"'_mix\u002Fsch-2021-05-04 22.01.03.png'",[13,9006,9007],{},"またはこのようにタグを改行させず、一行内に書くことでも解決できます。",[40,9009,9011],{"className":8657,"code":9010,"language":8659,"meta":45,"style":45},"\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",[17,9012,9013,9021,9029,9056,9098,9106,9114,9122,9130,9136,9142,9150,9154,9158,9162],{"__ignoreMap":45},[49,9014,9015,9017,9019],{"class":51,"line":52},[49,9016,1425],{"class":59},[49,9018,8668],{"class":338},[49,9020,4413],{"class":59},[49,9022,9023,9025,9027],{"class":51,"line":85},[49,9024,1425],{"class":59},[49,9026,1389],{"class":338},[49,9028,4413],{"class":59},[49,9030,9031,9033,9035,9037,9039,9041,9043,9045,9047,9050,9052,9054],{"class":51,"line":154},[49,9032,4418],{"class":59},[49,9034,1389],{"class":338},[49,9036,5189],{"class":305},[49,9038,312],{"class":59},[49,9040,70],{"class":59},[49,9042,8693],{"class":73},[49,9044,70],{"class":59},[49,9046,5509],{"class":59},[49,9048,9049],{"class":55},"{{test}}",[49,9051,4537],{"class":59},[49,9053,1389],{"class":338},[49,9055,4413],{"class":59},[49,9057,9058,9060,9062,9064,9066,9068,9070,9072,9074,9076,9078,9080,9082,9084,9086,9088,9090,9092,9094,9096],{"class":51,"line":318},[49,9059,4418],{"class":59},[49,9061,8647],{"class":338},[49,9063,8711],{"class":305},[49,9065,312],{"class":59},[49,9067,70],{"class":59},[49,9069,8718],{"class":73},[49,9071,70],{"class":59},[49,9073,8723],{"class":305},[49,9075,312],{"class":59},[49,9077,70],{"class":59},[49,9079,8730],{"class":73},[49,9081,70],{"class":59},[49,9083,8735],{"class":305},[49,9085,312],{"class":59},[49,9087,70],{"class":59},[49,9089,8742],{"class":73},[49,9091,70],{"class":59},[49,9093,5201],{"class":59},[49,9095,8647],{"class":338},[49,9097,4413],{"class":59},[49,9099,9100,9102,9104],{"class":51,"line":324},[49,9101,4537],{"class":59},[49,9103,1389],{"class":338},[49,9105,4413],{"class":59},[49,9107,9108,9110,9112],{"class":51,"line":330},[49,9109,4537],{"class":59},[49,9111,8668],{"class":338},[49,9113,4413],{"class":59},[49,9115,9116,9118,9120],{"class":51,"line":4},[49,9117,1425],{"class":59},[49,9119,5691],{"class":338},[49,9121,4413],{"class":59},[49,9123,9124,9126,9128],{"class":51,"line":367},[49,9125,8787],{"class":357},[49,9127,8790],{"class":357},[49,9129,375],{"class":59},[49,9131,9132,9134],{"class":51,"line":378},[49,9133,8797],{"class":338},[49,9135,8800],{"class":59},[49,9137,9138,9140],{"class":51,"line":396},[49,9139,8805],{"class":357},[49,9141,965],{"class":59},[49,9143,9144,9146,9148],{"class":51,"line":402},[49,9145,3516],{"class":338},[49,9147,342],{"class":59},[49,9149,8816],{"class":59},[49,9151,9152],{"class":51,"line":408},[49,9153,399],{"class":59},[49,9155,9156],{"class":51,"line":414},[49,9157,2193],{"class":59},[49,9159,9160],{"class":51,"line":420},[49,9161,538],{"class":59},[49,9163,9164,9166,9168],{"class":51,"line":425},[49,9165,4537],{"class":59},[49,9167,5691],{"class":338},[49,9169,4413],{"class":59},[13,9171,9172,9173,9175],{},"なぜ",[17,9174,8693],{},"で謎インテンドが生じてしまうのかわかりませんが、改行コードが入る箇所をエディターで整形する際は気をつけたほうがいいかもしれません。",[150,9177,9178],{},"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":45,"searchDepth":154,"depth":154,"links":9180},[],[157],"2021-05-24","white-space： pre;で要素内で生じる、文章の隙間、インテンドの原因。",{},"\u002Farticles\u002Fbag-html-break-tag",{"title":8639,"description":9183},"articles\u002Fbag-html-break-tag",[167,4566,8659],"_mix\u002Fsch-2021-05-04 21.53.14.png","Uglb2nJDSJTaiJVJS_4tGrhobJMBKtzio_BSkBLsen0",{"id":9192,"title":9193,"body":9194,"category":9466,"createdAt":9467,"description":9468,"extension":159,"index":160,"meta":9469,"navigation":162,"path":9470,"publish":162,"seo":9471,"series":160,"seriesTitle":160,"stem":9472,"tag":9473,"thumbnail":160,"updatedAt":160,"__hash__":9475},"articles\u002Farticles\u002Fclick-event-on-lable.md","label要素と関連付けされたinput要素にクリックイベントを付与すると2回実行される。",{"type":10,"value":9195,"toc":9460},[9196,9199,9399,9407,9414,9418,9421,9428,9432,9441,9445,9451,9454,9457],[13,9197,9198],{},"こんにちはjunです。フォームとしての要素、ボタンとしての要素を掛け合わせて以下のようなものを作成していました。",[40,9200,9202],{"className":1412,"code":9201,"language":167,"meta":45,"style":45},"\u003Clabel class=\"c-button\" for=\"form-input\">\n    \u003Cinput data-product_id=\"1\" id=\"form-input\" type=\"checkbox\" name=\"form-input\" value=\"\">\n    \u003Cspan class=\"text\">まとめて購入\u003C\u002Fspan>\n\u003C\u002Flabel>\n\n\u003Cscript>\n    $('.c-button').on('click',function(){\n        \u002F\u002F ...\n    })\n\u003C\u002Fscript>\n",[17,9203,9204,9236,9296,9323,9331,9335,9343,9379,9384,9391],{"__ignoreMap":45},[49,9205,9206,9208,9211,9213,9215,9217,9220,9222,9225,9227,9229,9232,9234],{"class":51,"line":52},[49,9207,1425],{"class":59},[49,9209,9210],{"class":338},"label",[49,9212,4389],{"class":305},[49,9214,312],{"class":59},[49,9216,70],{"class":59},[49,9218,9219],{"class":73},"c-button",[49,9221,70],{"class":59},[49,9223,9224],{"class":305}," for",[49,9226,312],{"class":59},[49,9228,70],{"class":59},[49,9230,9231],{"class":73},"form-input",[49,9233,70],{"class":59},[49,9235,4413],{"class":59},[49,9237,9238,9240,9243,9246,9248,9250,9252,9254,9256,9258,9260,9262,9264,9266,9268,9270,9273,9275,9278,9280,9282,9284,9286,9289,9291,9294],{"class":51,"line":85},[49,9239,4418],{"class":59},[49,9241,9242],{"class":338},"input",[49,9244,9245],{"class":305}," data-product_id",[49,9247,312],{"class":59},[49,9249,70],{"class":59},[49,9251,916],{"class":73},[49,9253,70],{"class":59},[49,9255,4401],{"class":305},[49,9257,312],{"class":59},[49,9259,70],{"class":59},[49,9261,9231],{"class":73},[49,9263,70],{"class":59},[49,9265,5705],{"class":305},[49,9267,312],{"class":59},[49,9269,70],{"class":59},[49,9271,9272],{"class":73},"checkbox",[49,9274,70],{"class":59},[49,9276,9277],{"class":305}," name",[49,9279,312],{"class":59},[49,9281,70],{"class":59},[49,9283,9231],{"class":73},[49,9285,70],{"class":59},[49,9287,9288],{"class":305}," value",[49,9290,312],{"class":59},[49,9292,9293],{"class":59},"\"\"",[49,9295,4413],{"class":59},[49,9297,9298,9300,9302,9304,9306,9308,9310,9312,9314,9317,9319,9321],{"class":51,"line":154},[49,9299,4418],{"class":59},[49,9301,49],{"class":338},[49,9303,4389],{"class":305},[49,9305,312],{"class":59},[49,9307,70],{"class":59},[49,9309,234],{"class":73},[49,9311,70],{"class":59},[49,9313,5509],{"class":59},[49,9315,9316],{"class":55},"まとめて購入",[49,9318,4537],{"class":59},[49,9320,49],{"class":338},[49,9322,4413],{"class":59},[49,9324,9325,9327,9329],{"class":51,"line":318},[49,9326,4537],{"class":59},[49,9328,9210],{"class":338},[49,9330,4413],{"class":59},[49,9332,9333],{"class":51,"line":324},[49,9334,295],{"emptyLinePlaceholder":162},[49,9336,9337,9339,9341],{"class":51,"line":330},[49,9338,1425],{"class":59},[49,9340,5691],{"class":338},[49,9342,4413],{"class":59},[49,9344,9345,9348,9350,9352,9355,9357,9359,9361,9364,9366,9368,9370,9372,9374,9377],{"class":51,"line":4},[49,9346,9347],{"class":63},"    $",[49,9349,67],{"class":55},[49,9351,391],{"class":59},[49,9353,9354],{"class":73},".c-button",[49,9356,391],{"class":59},[49,9358,79],{"class":55},[49,9360,60],{"class":59},[49,9362,9363],{"class":63},"on",[49,9365,67],{"class":55},[49,9367,391],{"class":59},[49,9369,6077],{"class":73},[49,9371,391],{"class":59},[49,9373,989],{"class":59},[49,9375,9376],{"class":305},"function",[49,9378,8800],{"class":59},[49,9380,9381],{"class":51,"line":367},[49,9382,9383],{"class":88},"        \u002F\u002F ...\n",[49,9385,9386,9389],{"class":51,"line":378},[49,9387,9388],{"class":59},"    }",[49,9390,1063],{"class":55},[49,9392,9393,9395,9397],{"class":51,"line":396},[49,9394,4537],{"class":59},[49,9396,5691],{"class":338},[49,9398,4413],{"class":59},[13,9400,9401,9403,9404,9406],{},[17,9402,9210],{},"をクリックするとチェックボックスにチェックが入り、さらにクリックイベントも走るという仕組みです。",[17,9405,9242],{},"だけをクリックしても同じ動作になります。",[13,9408,9409,9410,9413],{},"しかしチェックをしてみると挙動が何故か変。私の場合はON・OFF的な処理をしていたので、inputをクリックすると正常に動き、labelだと処理が行われていないという現象に見舞われました。原因はタイトル通り、上記のような構成をjqueryで実装すると、labelをクリックすると",[17,9411,9412],{},"$('.c-button')","へのクリックイベントが2回走ることが原因です。対処としては3つほどあります。",[199,9415,9417],{"id":9416},"_1changeイベントに変更する","1：changeイベントに変更する",[13,9419,9420],{},"input要素を活かしたい場合はこれがベストだと思います。changeイベントはinputなどの入力値が変更された時に発火するイベントです。for属性を用いてinputと関連付けされいるので、labelをクリックすることでinputの値（チェックされたか）を変更させることができます。一方でinputだけをクリックしても発火します。",[13,9422,9423,9424,9427],{},"なぜクリックイベントが2回起きるのかがわかりませんが、for属性あたりとかがなんか関係しているのかもしれません。 ",[8868,9425,9426],{},"change属性であれば値が変更されたか否かでの発火条件となる","ので問題なくなります。",[199,9429,9431],{"id":9430},"_2inputだけにする","2:inputだけにする",[13,9433,9434,9436,9437,9440],{},[17,9435,9412],{},"を",[17,9438,9439],{},"$('.c-button input')","にします。そうすれば一応inputだけクリックした時に発火します。ただし、labelでボタンのスタイルを表現していたりする場合はこの手は微妙です。",[199,9442,9444],{"id":9443},"_3inputでなくアイコン画像にする","3:inputでなくアイコン・画像にする",[13,9446,9447,9448,9450],{},"もし",[17,9449,9242],{},"がフォーム送信的な意味をもたず実装しているならば（見た目だけ）、画像・アイコンで実装するというてもあります。その時はクラスを付与してアイコンを変えると言ったことが必要です。",[199,9452,9453],{"id":9453},"まとめ",[13,9455,9456],{},"上記の解決法では１が一番ベストです。vanillajsで上記のような構成を作るとなぜか発生しないので、jqueryの仕様なのかもしれません。",[150,9458,9459],{},"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 .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}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);}",{"title":45,"searchDepth":154,"depth":154,"links":9461},[9462,9463,9464,9465],{"id":9416,"depth":85,"text":9417},{"id":9430,"depth":85,"text":9431},{"id":9443,"depth":85,"text":9444},{"id":9453,"depth":85,"text":9453},[157],"2021-04-30","要注意なクリックイベント。input要素にクリックイベントをつけている場合は注意。",{},"\u002Farticles\u002Fclick-event-on-lable",{"title":9193,"description":9468},"articles\u002Fclick-event-on-lable",[44,167,9474],"jquery","EaIYy3tweEkOCbIAFQ9TqAjE0pXI6pYISdYQKN-YfEw",{"id":9477,"title":9478,"body":9479,"category":10461,"createdAt":10462,"description":9478,"extension":159,"index":160,"meta":10463,"navigation":162,"path":10464,"publish":162,"seo":10465,"series":160,"seriesTitle":160,"stem":10466,"tag":10467,"thumbnail":10468,"updatedAt":160,"__hash__":10469},"articles\u002Farticles\u002Frecent-card-css.md","イマドキな丸角・正方形・画像カードデザインのレイアウトをCSSで実現させる。",{"type":10,"value":9480,"toc":10458},[9481,9490,9493,9496,9519,9527,9530,9533,10455],[13,9482,9483,9484,9489],{},"こんにちは jun です。カードデザイン（参考：",[100,9485,9488],{"href":9486,"rel":9487},"http:\u002F\u002Fpinterest.jp\u002F",[104],"pinterest","）に近いコンポーネントを作った時に意外と詰まって時間かけてしまったので忘備録として残します。実際に↓に作りました。（レスポンシブでない）",[199,9491,9492],{"id":9492},"コンポーネント要件",[13,9494,9495],{},"コンポーネントの要件としては以下の通りです。",[186,9497,9498,9501,9504,9507,9510,9513,9516],{},[189,9499,9500],{},"正方形",[189,9502,9503],{},"丸角",[189,9505,9506],{},"画像が表示される。",[189,9508,9509],{},"PCでは３列、タブレットは２列、スマホは１列を維持する",[189,9511,9512],{},"端（コンテナー の境界）はくっつける。",[189,9514,9515],{},"1remほど隙間は開ける",[189,9517,9518],{},"ホバー時に背景画像がぐわっ！と迫ってくる",[13,9520,9521,9522,9526],{},"完成したものは",[100,9523,4368],{"href":9524,"rel":9525},"http:\u002F\u002Fapp.jun-app.com\u002Fcard-css\u002F",[104],"のページに置いてあります。画像は以下の通りです。",[4351,9528],{":src":9529,":width":4354},"'_mix\u002Fsch-2021-04-25 22.19.26.png'",[13,9531,9532],{},"コードはこちら",[40,9534,9536],{"className":1412,"code":9535,"language":167,"meta":45,"style":45},"\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",[17,9537,9538,9546,9553,9564,9568,9575,9586,9590,9600,9611,9615,9619,9628,9639,9650,9668,9672,9676,9685,9695,9705,9709,9724,9739,9743,9754,9766,9778,9782,9786,9800,9812,9822,9836,9840,9844,9853,9863,9887,9909,9919,9933,9943,9955,9995,9999,10003,10016,10026,10036,10048,10060,10072,10088,10103,10107,10111,10128,10143,10155,10170,10174,10178,10206,10231,10235,10243,10247,10265,10283,10302,10320,10343,10351,10359,10378,10396,10418,10426,10434,10439,10447],{"__ignoreMap":45},[49,9539,9540,9542,9544],{"class":51,"line":52},[49,9541,1425],{"class":59},[49,9543,150],{"class":338},[49,9545,4413],{"class":59},[49,9547,9548,9551],{"class":51,"line":85},[49,9549,9550],{"class":4573},"    *",[49,9552,965],{"class":59},[49,9554,9555,9558,9560,9562],{"class":51,"line":154},[49,9556,9557],{"class":4581},"        box-sizing",[49,9559,342],{"class":59},[49,9561,4610],{"class":55},[49,9563,82],{"class":59},[49,9565,9566],{"class":51,"line":318},[49,9567,2193],{"class":59},[49,9569,9570,9573],{"class":51,"line":324},[49,9571,9572],{"class":4573},"    html",[49,9574,965],{"class":59},[49,9576,9577,9580,9582,9584],{"class":51,"line":330},[49,9578,9579],{"class":4581},"        font-size",[49,9581,342],{"class":59},[49,9583,4877],{"class":915},[49,9585,82],{"class":59},[49,9587,9588],{"class":51,"line":4},[49,9589,2193],{"class":59},[49,9591,9592,9595,9598],{"class":51,"line":367},[49,9593,9594],{"class":59},"    .",[49,9596,9597],{"class":4573},"p-the-container",[49,9599,965],{"class":59},[49,9601,9602,9605,9607,9609],{"class":51,"line":378},[49,9603,9604],{"class":4581},"        width",[49,9606,342],{"class":59},[49,9608,4914],{"class":915},[49,9610,82],{"class":59},[49,9612,9613],{"class":51,"line":396},[49,9614,2193],{"class":59},[49,9616,9617],{"class":51,"line":402},[49,9618,295],{"emptyLinePlaceholder":162},[49,9620,9621,9623,9626],{"class":51,"line":408},[49,9622,9594],{"class":59},[49,9624,9625],{"class":4573},"p-the-wrapper",[49,9627,965],{"class":59},[49,9629,9630,9633,9635,9637],{"class":51,"line":414},[49,9631,9632],{"class":4581},"        display",[49,9634,342],{"class":59},[49,9636,4773],{"class":55},[49,9638,82],{"class":59},[49,9640,9641,9644,9646,9648],{"class":51,"line":420},[49,9642,9643],{"class":4581},"        flex-wrap",[49,9645,342],{"class":59},[49,9647,4785],{"class":55},[49,9649,82],{"class":59},[49,9651,9652,9655,9657,9659,9662,9665],{"class":51,"line":425},[49,9653,9654],{"class":4581},"        margin",[49,9656,342],{"class":59},[49,9658,4587],{"class":915},[49,9660,9661],{"class":915}," -1rem",[49,9663,9664],{"class":59},";",[49,9666,9667],{"class":88},"         \u002F* p-img-card の paddingと同じ *\u002F\n",[49,9669,9670],{"class":51,"line":441},[49,9671,2193],{"class":59},[49,9673,9674],{"class":51,"line":458},[49,9675,295],{"emptyLinePlaceholder":162},[49,9677,9678,9680,9683],{"class":51,"line":464},[49,9679,9594],{"class":59},[49,9681,9682],{"class":4573},"p-img-card",[49,9684,965],{"class":59},[49,9686,9687,9689,9691,9693],{"class":51,"line":481},[49,9688,9604],{"class":4581},[49,9690,342],{"class":59},[49,9692,4850],{"class":915},[49,9694,82],{"class":59},[49,9696,9697,9699,9701,9703],{"class":51,"line":487},[49,9698,9604],{"class":4581},[49,9700,342],{"class":59},[49,9702,4850],{"class":915},[49,9704,82],{"class":59},[49,9706,9707],{"class":51,"line":497},[49,9708,295],{"emptyLinePlaceholder":162},[49,9710,9711,9714,9716,9719,9721],{"class":51,"line":508},[49,9712,9713],{"class":4581},"        padding",[49,9715,342],{"class":59},[49,9717,9718],{"class":915}," 1rem",[49,9720,9664],{"class":59},[49,9722,9723],{"class":88},"          \u002F* 隙間の太さになる *\u002F\n",[49,9725,9726,9729,9731,9734,9736],{"class":51,"line":513},[49,9727,9728],{"class":4581},"        margin-bottom",[49,9730,342],{"class":59},[49,9732,9733],{"class":915}," 2rem",[49,9735,9664],{"class":59},[49,9737,9738],{"class":88},"    \u002F* 下側の隙間の太さ *\u002F\n",[49,9740,9741],{"class":51,"line":518},[49,9742,295],{"emptyLinePlaceholder":162},[49,9744,9745,9748,9750,9752],{"class":51,"line":530},[49,9746,9747],{"class":4581},"        position",[49,9749,342],{"class":59},[49,9751,4796],{"class":55},[49,9753,82],{"class":59},[49,9755,9756,9759,9761,9764],{"class":51,"line":535},[49,9757,9758],{"class":4581},"        overflow",[49,9760,342],{"class":59},[49,9762,9763],{"class":55}," hidden",[49,9765,82],{"class":59},[49,9767,9768,9771,9773,9776],{"class":51,"line":541},[49,9769,9770],{"class":4581},"        cursor",[49,9772,342],{"class":59},[49,9774,9775],{"class":55}," pointer",[49,9777,82],{"class":59},[49,9779,9780],{"class":51,"line":547},[49,9781,2193],{"class":59},[49,9783,9784],{"class":51,"line":552},[49,9785,295],{"emptyLinePlaceholder":162},[49,9787,9788,9790,9792,9795,9798],{"class":51,"line":876},[49,9789,9594],{"class":59},[49,9791,9682],{"class":4573},[49,9793,9794],{"class":59},"::",[49,9796,9797],{"class":305},"before",[49,9799,965],{"class":59},[49,9801,9802,9805,9807,9810],{"class":51,"line":930},[49,9803,9804],{"class":4581},"        content",[49,9806,342],{"class":59},[49,9808,9809],{"class":59}," ''",[49,9811,82],{"class":59},[49,9813,9814,9816,9818,9820],{"class":51,"line":935},[49,9815,9632],{"class":4581},[49,9817,342],{"class":59},[49,9819,4861],{"class":55},[49,9821,82],{"class":59},[49,9823,9824,9827,9829,9831,9833],{"class":51,"line":954},[49,9825,9826],{"class":4581},"        padding-top",[49,9828,342],{"class":59},[49,9830,4914],{"class":915},[49,9832,9664],{"class":59},[49,9834,9835],{"class":88},"      \u002F*正方形にするおまじない*\u002F\n",[49,9837,9838],{"class":51,"line":968},[49,9839,2193],{"class":59},[49,9841,9842],{"class":51,"line":1016},[49,9843,295],{"emptyLinePlaceholder":162},[49,9845,9846,9848,9851],{"class":51,"line":1033},[49,9847,9594],{"class":59},[49,9849,9850],{"class":4573},"p-img-card-wrapper",[49,9852,965],{"class":59},[49,9854,9855,9857,9859,9861],{"class":51,"line":1045},[49,9856,9632],{"class":4581},[49,9858,342],{"class":59},[49,9860,4861],{"class":55},[49,9862,82],{"class":59},[49,9864,9865,9867,9869,9872,9874,9877,9879,9881,9884],{"class":51,"line":1057},[49,9866,9604],{"class":4581},[49,9868,342],{"class":59},[49,9870,9871],{"class":63}," calc",[49,9873,67],{"class":59},[49,9875,9876],{"class":915},"100%",[49,9878,6973],{"class":59},[49,9880,9733],{"class":915},[49,9882,9883],{"class":59},");",[49,9885,9886],{"class":88},"  \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n",[49,9888,9889,9892,9894,9896,9898,9900,9902,9904,9906],{"class":51,"line":1066},[49,9890,9891],{"class":4581},"        height",[49,9893,342],{"class":59},[49,9895,9871],{"class":63},[49,9897,67],{"class":59},[49,9899,9876],{"class":915},[49,9901,6973],{"class":59},[49,9903,9733],{"class":915},[49,9905,9883],{"class":59},[49,9907,9908],{"class":88}," \u002F* カードのラッパーは隙間paddingの分だけ小さくする *\u002F\n",[49,9910,9911,9913,9915,9917],{"class":51,"line":1072},[49,9912,9747],{"class":4581},[49,9914,342],{"class":59},[49,9916,4828],{"class":55},[49,9918,82],{"class":59},[49,9920,9921,9924,9926,9928,9930],{"class":51,"line":1081},[49,9922,9923],{"class":4581},"        top",[49,9925,342],{"class":59},[49,9927,9718],{"class":915},[49,9929,9664],{"class":59},[49,9931,9932],{"class":88},"　　　　　　　　　　\u002F* 位置もカードのpaddingの分だけ下げる *\u002F\n",[49,9934,9935,9937,9939,9941],{"class":51,"line":1086},[49,9936,9758],{"class":4581},[49,9938,342],{"class":59},[49,9940,9763],{"class":55},[49,9942,82],{"class":59},[49,9944,9945,9948,9950,9953],{"class":51,"line":2823},[49,9946,9947],{"class":4581},"        border-radius",[49,9949,342],{"class":59},[49,9951,9952],{"class":915}," 35px",[49,9954,82],{"class":59},[49,9956,9957,9960,9962,9964,9966,9969,9972,9975,9977,9979,9981,9983,9985,9987,9989,9992],{"class":51,"line":3465},[49,9958,9959],{"class":4581},"        box-shadow",[49,9961,342],{"class":59},[49,9963,4720],{"class":915},[49,9965,4720],{"class":915},[49,9967,9968],{"class":915}," 8px",[49,9970,9971],{"class":915}," -3px",[49,9973,9974],{"class":63}," rgba",[49,9976,67],{"class":59},[49,9978,922],{"class":915},[49,9980,989],{"class":59},[49,9982,4587],{"class":915},[49,9984,989],{"class":59},[49,9986,4587],{"class":915},[49,9988,989],{"class":59},[49,9990,9991],{"class":915}," 0.6",[49,9993,9994],{"class":59},");\n",[49,9996,9997],{"class":51,"line":3470},[49,9998,2193],{"class":59},[49,10000,10001],{"class":51,"line":3475},[49,10002,295],{"emptyLinePlaceholder":162},[49,10004,10005,10007,10009,10011,10014],{"class":51,"line":3496},[49,10006,9594],{"class":59},[49,10008,9682],{"class":4573},[49,10010,4815],{"class":59},[49,10012,10013],{"class":4573},"c-img",[49,10015,965],{"class":59},[49,10017,10018,10020,10022,10024],{"class":51,"line":3507},[49,10019,9604],{"class":4581},[49,10021,342],{"class":59},[49,10023,4914],{"class":915},[49,10025,82],{"class":59},[49,10027,10028,10030,10032,10034],{"class":51,"line":3513},[49,10029,9891],{"class":4581},[49,10031,342],{"class":59},[49,10033,4914],{"class":915},[49,10035,82],{"class":59},[49,10037,10038,10041,10043,10046],{"class":51,"line":3539},[49,10039,10040],{"class":4581},"        background-position",[49,10042,342],{"class":59},[49,10044,10045],{"class":55}," center",[49,10047,82],{"class":59},[49,10049,10050,10053,10055,10058],{"class":51,"line":3562},[49,10051,10052],{"class":4581},"        background-repeat",[49,10054,342],{"class":59},[49,10056,10057],{"class":55}," no-repeat",[49,10059,82],{"class":59},[49,10061,10062,10065,10067,10070],{"class":51,"line":3572},[49,10063,10064],{"class":4581},"        background-size",[49,10066,342],{"class":59},[49,10068,10069],{"class":55}," cover",[49,10071,82],{"class":59},[49,10073,10074,10077,10079,10082,10084,10086],{"class":51,"line":3589},[49,10075,10076],{"class":4581},"        transform",[49,10078,342],{"class":59},[49,10080,10081],{"class":63}," scale",[49,10083,67],{"class":59},[49,10085,916],{"class":915},[49,10087,9994],{"class":59},[49,10089,10090,10093,10095,10098,10101],{"class":51,"line":3599},[49,10091,10092],{"class":4581},"        transition",[49,10094,342],{"class":59},[49,10096,10097],{"class":55}," transform ",[49,10099,10100],{"class":915},"0.5s",[49,10102,82],{"class":59},[49,10104,10105],{"class":51,"line":3618},[49,10106,2193],{"class":59},[49,10108,10109],{"class":51,"line":3624},[49,10110,295],{"emptyLinePlaceholder":162},[49,10112,10113,10115,10117,10119,10122,10124,10126],{"class":51,"line":3629},[49,10114,9594],{"class":59},[49,10116,9682],{"class":4573},[49,10118,342],{"class":59},[49,10120,10121],{"class":305},"hover",[49,10123,4815],{"class":59},[49,10125,10013],{"class":4573},[49,10127,965],{"class":59},[49,10129,10130,10132,10134,10136,10138,10141],{"class":51,"line":3639},[49,10131,10076],{"class":4581},[49,10133,342],{"class":59},[49,10135,10081],{"class":63},[49,10137,67],{"class":59},[49,10139,10140],{"class":915},"1.2",[49,10142,9994],{"class":59},[49,10144,10145,10147,10149,10151,10153],{"class":51,"line":3654},[49,10146,10092],{"class":4581},[49,10148,342],{"class":59},[49,10150,10097],{"class":55},[49,10152,10100],{"class":915},[49,10154,82],{"class":59},[49,10156,10157,10160,10162,10165,10168],{"class":51,"line":3659},[49,10158,10159],{"class":4581},"        animation",[49,10161,342],{"class":59},[49,10163,10164],{"class":55}," min-and-big ",[49,10166,10167],{"class":915},"3s",[49,10169,82],{"class":59},[49,10171,10172],{"class":51,"line":3664},[49,10173,2193],{"class":59},[49,10175,10176],{"class":51,"line":3669},[49,10177,295],{"emptyLinePlaceholder":162},[49,10179,10180,10182,10185,10187,10189,10191,10194,10196,10198,10200,10203],{"class":51,"line":3674},[49,10181,9594],{"class":59},[49,10183,10184],{"class":4573},"img-a",[49,10186,4815],{"class":59},[49,10188,10013],{"class":4573},[49,10190,6833],{"class":59},[49,10192,10193],{"class":4581},"background-image",[49,10195,342],{"class":59},[49,10197,3184],{"class":63},[49,10199,67],{"class":59},[49,10201,10202],{"class":865},"画像のパス",[49,10204,10205],{"class":59},");}\n",[49,10207,10208,10210,10213,10215,10217,10219,10221,10223,10225,10227,10229],{"class":51,"line":3679},[49,10209,9594],{"class":59},[49,10211,10212],{"class":4573},"img-b",[49,10214,4815],{"class":59},[49,10216,10013],{"class":4573},[49,10218,6833],{"class":59},[49,10220,10193],{"class":4581},[49,10222,342],{"class":59},[49,10224,3184],{"class":63},[49,10226,67],{"class":59},[49,10228,10202],{"class":865},[49,10230,10205],{"class":59},[49,10232,10233],{"class":51,"line":3690},[49,10234,295],{"emptyLinePlaceholder":162},[49,10236,10237,10239,10241],{"class":51,"line":3711},[49,10238,4537],{"class":59},[49,10240,150],{"class":338},[49,10242,4413],{"class":59},[49,10244,10245],{"class":51,"line":3716},[49,10246,295],{"emptyLinePlaceholder":162},[49,10248,10249,10251,10253,10255,10257,10259,10261,10263],{"class":51,"line":3737},[49,10250,1425],{"class":59},[49,10252,1389],{"class":338},[49,10254,4389],{"class":305},[49,10256,312],{"class":59},[49,10258,70],{"class":59},[49,10260,9597],{"class":73},[49,10262,70],{"class":59},[49,10264,4413],{"class":59},[49,10266,10267,10269,10271,10273,10275,10277,10279,10281],{"class":51,"line":3742},[49,10268,4418],{"class":59},[49,10270,1389],{"class":338},[49,10272,4389],{"class":305},[49,10274,312],{"class":59},[49,10276,70],{"class":59},[49,10278,9625],{"class":73},[49,10280,70],{"class":59},[49,10282,4413],{"class":59},[49,10284,10285,10287,10289,10291,10293,10295,10298,10300],{"class":51,"line":3751},[49,10286,4438],{"class":59},[49,10288,1389],{"class":338},[49,10290,4389],{"class":305},[49,10292,312],{"class":59},[49,10294,70],{"class":59},[49,10296,10297],{"class":73},"p-img-card img-a",[49,10299,70],{"class":59},[49,10301,4413],{"class":59},[49,10303,10304,10306,10308,10310,10312,10314,10316,10318],{"class":51,"line":3760},[49,10305,5602],{"class":59},[49,10307,1389],{"class":338},[49,10309,4389],{"class":305},[49,10311,312],{"class":59},[49,10313,70],{"class":59},[49,10315,9850],{"class":73},[49,10317,70],{"class":59},[49,10319,4413],{"class":59},[49,10321,10322,10325,10327,10329,10331,10333,10335,10337,10339,10341],{"class":51,"line":3765},[49,10323,10324],{"class":59},"                \u003C",[49,10326,1389],{"class":338},[49,10328,4389],{"class":305},[49,10330,312],{"class":59},[49,10332,70],{"class":59},[49,10334,10013],{"class":73},[49,10336,70],{"class":59},[49,10338,5201],{"class":59},[49,10340,1389],{"class":338},[49,10342,4413],{"class":59},[49,10344,10345,10347,10349],{"class":51,"line":3772},[49,10346,5635],{"class":59},[49,10348,1389],{"class":338},[49,10350,4413],{"class":59},[49,10352,10353,10355,10357],{"class":51,"line":3815},[49,10354,5672],{"class":59},[49,10356,1389],{"class":338},[49,10358,4413],{"class":59},[49,10360,10361,10363,10365,10367,10369,10371,10374,10376],{"class":51,"line":3824},[49,10362,4438],{"class":59},[49,10364,1389],{"class":338},[49,10366,4389],{"class":305},[49,10368,312],{"class":59},[49,10370,70],{"class":59},[49,10372,10373],{"class":73},"p-img-card img-b",[49,10375,70],{"class":59},[49,10377,4413],{"class":59},[49,10379,10380,10382,10384,10386,10388,10390,10392,10394],{"class":51,"line":3856},[49,10381,5602],{"class":59},[49,10383,1389],{"class":338},[49,10385,4389],{"class":305},[49,10387,312],{"class":59},[49,10389,70],{"class":59},[49,10391,9850],{"class":73},[49,10393,70],{"class":59},[49,10395,4413],{"class":59},[49,10397,10398,10400,10402,10404,10406,10408,10410,10412,10414,10416],{"class":51,"line":3861},[49,10399,10324],{"class":59},[49,10401,1389],{"class":338},[49,10403,4389],{"class":305},[49,10405,312],{"class":59},[49,10407,70],{"class":59},[49,10409,10013],{"class":73},[49,10411,70],{"class":59},[49,10413,5201],{"class":59},[49,10415,1389],{"class":338},[49,10417,4413],{"class":59},[49,10419,10420,10422,10424],{"class":51,"line":3888},[49,10421,5635],{"class":59},[49,10423,1389],{"class":338},[49,10425,4413],{"class":59},[49,10427,10428,10430,10432],{"class":51,"line":3893},[49,10429,5672],{"class":59},[49,10431,1389],{"class":338},[49,10433,4413],{"class":59},[49,10435,10436],{"class":51,"line":3899},[49,10437,10438],{"class":55},"　　　　　...\n",[49,10440,10441,10443,10445],{"class":51,"line":3909},[49,10442,4469],{"class":59},[49,10444,1389],{"class":338},[49,10446,4413],{"class":59},[49,10448,10449,10451,10453],{"class":51,"line":3915},[49,10450,4537],{"class":59},[49,10452,1389],{"class":338},[49,10454,4413],{"class":59},[150,10456,10457],{},"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":45,"searchDepth":154,"depth":154,"links":10459},[10460],{"id":9492,"depth":85,"text":9492},[157],"2020-12-17",{},"\u002Farticles\u002Frecent-card-css",{"title":9478,"description":9478},"articles\u002Frecent-card-css",[167,4566],"_mix\u002Fsch-2021-04-25 22.19.26.png","a9LRbH7otDCRxRFyUY0oec3ojY88jg3a-FXDcIlgR9k",{"id":10471,"title":10472,"body":10473,"category":11139,"createdAt":11140,"description":10472,"extension":159,"index":160,"meta":11141,"navigation":162,"path":11142,"publish":162,"seo":11143,"series":160,"seriesTitle":160,"stem":11144,"tag":11145,"thumbnail":11146,"updatedAt":160,"__hash__":11147},"articles\u002Farticles\u002Fpseudo-element-icon.md","動的な変更に強い！擬似要素でWebアイコンを表示させる。(IE対策も)",{"type":10,"value":10474,"toc":11130},[10475,10478,10481,10511,10514,10517,10520,10523,10526,10529,10533,10536,10544,10547,10553,10556,10560,10566,10569,10734,10914,10917,10920,10926,10933,10936,10939,10945,10948,10952,10958,11019,11022,11099,11102,11115,11118,11121,11124,11127],[13,10476,10477],{},"こんにちはjunです。Webアイコンっていいですよね。サイトはお洒落になるし、各ボタンの意図やUX\u002FUIの観点では重要な物です。フォントを実装するといば、FontAwsome、GoogleIconを使うのがメインだと思います。中には画像でやる人もいるけどね。",[13,10479,10480],{},"ただアイコンというのは単独ではなくて、文字と併用したり、要素の一部としてひっそりと使うことが多いです。これらのアイコンを入れるときは",[40,10482,10486],{"className":10483,"code":10484,"language":10485,"meta":45,"style":45},"language-HTML shiki shiki-themes material-theme-ocean","\u003Ci class=\"far fa-smile-wink\">\u003C\u002Fi>\n","HTML",[17,10487,10488],{"__ignoreMap":45},[49,10489,10490,10492,10494,10496,10498,10500,10503,10505,10507,10509],{"class":51,"line":52},[49,10491,1425],{"class":59},[49,10493,3261],{"class":338},[49,10495,4389],{"class":305},[49,10497,312],{"class":59},[49,10499,70],{"class":59},[49,10501,10502],{"class":73},"far fa-smile-wink",[49,10504,70],{"class":59},[49,10506,5201],{"class":59},[49,10508,3261],{"class":338},[49,10510,4413],{"class":59},[13,10512,10513],{},"と言ったiタグを入れるのが簡単ですが実務で扱うようなサイトの場合、この方法では面倒になることがあります。",[199,10515,10516],{"id":10516},"タグの操作が必要",[13,10518,10519],{},"iタグと対応するアイコンのクラス名を入れることで、アイコンは表示することはできます。しかしタグでアイコンを打ち込むと、対応するアイコンごとのHTMLタグを埋め込む、必要性が出てきてしまいます。",[13,10521,10522],{},"特に動的に内容を出力したり変更したりする場合は特に大変です。例えば下図のようなリストタグの要件があるとします。",[4351,10524],{":src":10525,":width":5082},"'_mix\u002Fpseudo-element-icon.png'",[13,10527,10528],{},"胡散臭い内容ですが、とりあえずUX的にもこんなリストデザインが必要になったとしましょう。",[254,10530,10532],{"id":10531},"iタグでやってみると","iタグでやってみると...",[13,10534,10535],{},"今回の要件ではページの至る箇所で使われることとします。するとリストタグとして使う性質上、",[186,10537,10538,10541],{},[189,10539,10540],{},"リストの数が決まっているわけではない。（可変的）",[189,10542,10543],{},"内容によって数が変わる。",[13,10545,10546],{},"という内容が可変的であるという考慮が必要です。そのためiタグというHTML自体を埋め込んで対処すると、上記のデザインが必要な箇所全てにiタグを入れる必要が出てきます。",[13,10548,10549,10550],{},"リストの数が少なければなんとか対処できますが、大量にあったり、リリース前段階に内容が変わるなんて普通に起きます。差し替えというのは間違えが起きやすいです。そのためiタグでアイコンを埋め込んで表示する方法は、",[8868,10551,10552],{},"このような動的な変更に弱いです。",[13,10554,10555],{},"もしiタグ埋め込み方式をするとなれば予め、アイコンのiタグを入れてdisplayで操作したりとか、jsで気合でタグを埋め込むとかになりますが、どちらもいい手段とは言えません。",[199,10557,10559],{"id":10558},"擬似要素でアイコンをつけるクラス名で操作可能","擬似要素でアイコンをつける＝クラス名で操作可能",[13,10561,10562,10563],{},"iタグでアイコンを変える場合、要素であるiタグ、そしてクラス名が必要です。",[8868,10564,10565],{},"ただし擬似要素を扱うことでクラス名を付け加える、書き換えるだけでアイコンの変更と、付与・削除ができるようになります。",[13,10567,10568],{},"擬似要素は特に「付与・削除できる」という点がiタグ埋め込みより優れています。上のリストタグのHTML\u002FCSSは以下のように書かれています。",[40,10570,10572],{"className":1412,"code":10571,"language":167,"meta":45,"style":45},"\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",[17,10573,10574,10593,10610,10627,10644,10652,10656,10675,10692,10709,10726],{"__ignoreMap":45},[49,10575,10576,10578,10580,10582,10584,10586,10589,10591],{"class":51,"line":52},[49,10577,1425],{"class":59},[49,10579,186],{"class":338},[49,10581,4389],{"class":305},[49,10583,312],{"class":59},[49,10585,70],{"class":59},[49,10587,10588],{"class":73},"p-deco_list u-list_01",[49,10590,70],{"class":59},[49,10592,4413],{"class":59},[49,10594,10595,10597,10599,10601,10604,10606,10608],{"class":51,"line":85},[49,10596,4418],{"class":59},[49,10598,189],{"class":338},[49,10600,5509],{"class":59},[49,10602,10603],{"class":55},"最近よく眠れない..",[49,10605,4537],{"class":59},[49,10607,189],{"class":338},[49,10609,4413],{"class":59},[49,10611,10612,10614,10616,10618,10621,10623,10625],{"class":51,"line":154},[49,10613,4418],{"class":59},[49,10615,189],{"class":338},[49,10617,5509],{"class":59},[49,10619,10620],{"class":55},"なかなか疲れが取れない..",[49,10622,4537],{"class":59},[49,10624,189],{"class":338},[49,10626,4413],{"class":59},[49,10628,10629,10631,10633,10635,10638,10640,10642],{"class":51,"line":318},[49,10630,4418],{"class":59},[49,10632,189],{"class":338},[49,10634,5509],{"class":59},[49,10636,10637],{"class":55},"朝起きるのが辛い..",[49,10639,4537],{"class":59},[49,10641,189],{"class":338},[49,10643,4413],{"class":59},[49,10645,10646,10648,10650],{"class":51,"line":324},[49,10647,4537],{"class":59},[49,10649,186],{"class":338},[49,10651,4413],{"class":59},[49,10653,10654],{"class":51,"line":330},[49,10655,295],{"emptyLinePlaceholder":162},[49,10657,10658,10660,10662,10664,10666,10668,10671,10673],{"class":51,"line":4},[49,10659,1425],{"class":59},[49,10661,186],{"class":338},[49,10663,4389],{"class":305},[49,10665,312],{"class":59},[49,10667,70],{"class":59},[49,10669,10670],{"class":73},"p-deco_list u-list_02",[49,10672,70],{"class":59},[49,10674,4413],{"class":59},[49,10676,10677,10679,10681,10683,10686,10688,10690],{"class":51,"line":367},[49,10678,4418],{"class":59},[49,10680,189],{"class":338},[49,10682,5509],{"class":59},[49,10684,10685],{"class":55},"使い始めてから、寝つきがよくなった！",[49,10687,4537],{"class":59},[49,10689,189],{"class":338},[49,10691,4413],{"class":59},[49,10693,10694,10696,10698,10700,10703,10705,10707],{"class":51,"line":378},[49,10695,4418],{"class":59},[49,10697,189],{"class":338},[49,10699,5509],{"class":59},[49,10701,10702],{"class":55},"疲れが嘘のように取れた！",[49,10704,4537],{"class":59},[49,10706,189],{"class":338},[49,10708,4413],{"class":59},[49,10710,10711,10713,10715,10717,10720,10722,10724],{"class":51,"line":396},[49,10712,4418],{"class":59},[49,10714,189],{"class":338},[49,10716,5509],{"class":59},[49,10718,10719],{"class":55},"朝の目覚めが変わった！",[49,10721,4537],{"class":59},[49,10723,189],{"class":338},[49,10725,4413],{"class":59},[49,10727,10728,10730,10732],{"class":51,"line":402},[49,10729,4537],{"class":59},[49,10731,186],{"class":338},[49,10733,4413],{"class":59},[40,10735,10737],{"className":4564,"code":10736,"language":4566,"meta":45,"style":45},".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",[17,10738,10739,10751,10763,10767,10771,10776,10790,10802,10818,10834,10838,10842,10857,10872,10876,10880,10895,10910],{"__ignoreMap":45},[49,10740,10741,10743,10746,10749],{"class":51,"line":52},[49,10742,60],{"class":59},[49,10744,10745],{"class":4573},"p-deco_list",[49,10747,10748],{"class":4573}," li",[49,10750,965],{"class":59},[49,10752,10753,10756,10758,10761],{"class":51,"line":85},[49,10754,10755],{"class":4581},"    list-style",[49,10757,342],{"class":59},[49,10759,10760],{"class":55},"none",[49,10762,82],{"class":59},[49,10764,10765],{"class":51,"line":154},[49,10766,538],{"class":59},[49,10768,10769],{"class":51,"line":318},[49,10770,295],{"emptyLinePlaceholder":162},[49,10772,10773],{"class":51,"line":324},[49,10774,10775],{"class":88}," \u002F*　擬似要素アイコンの共通設定*\u002F\n",[49,10777,10778,10780,10782,10784,10786,10788],{"class":51,"line":330},[49,10779,60],{"class":59},[49,10781,10745],{"class":4573},[49,10783,10748],{"class":4573},[49,10785,9794],{"class":59},[49,10787,9797],{"class":305},[49,10789,965],{"class":59},[49,10791,10792,10795,10797,10800],{"class":51,"line":4},[49,10793,10794],{"class":4581},"    content",[49,10796,342],{"class":59},[49,10798,10799],{"class":59},"''",[49,10801,82],{"class":59},[49,10803,10804,10807,10809,10811,10814,10816],{"class":51,"line":367},[49,10805,10806],{"class":4581},"    font-family",[49,10808,342],{"class":59},[49,10810,386],{"class":59},[49,10812,10813],{"class":73},"FontAwesome",[49,10815,391],{"class":59},[49,10817,82],{"class":59},[49,10819,10820,10822,10824,10827,10829,10831],{"class":51,"line":378},[49,10821,4594],{"class":4581},[49,10823,342],{"class":59},[49,10825,10826],{"class":915},"5px",[49,10828,4877],{"class":915},[49,10830,9664],{"class":59},[49,10832,10833],{"class":88}," \u002F* 文字間隔調整 *\u002F\n",[49,10835,10836],{"class":51,"line":396},[49,10837,538],{"class":59},[49,10839,10840],{"class":51,"line":402},[49,10841,295],{"emptyLinePlaceholder":162},[49,10843,10844,10846,10849,10851,10853,10855],{"class":51,"line":408},[49,10845,60],{"class":59},[49,10847,10848],{"class":4573},"u-list_01",[49,10850,10748],{"class":4573},[49,10852,9794],{"class":59},[49,10854,9797],{"class":305},[49,10856,965],{"class":59},[49,10858,10859,10861,10863,10865,10868,10870],{"class":51,"line":414},[49,10860,10794],{"class":4581},[49,10862,342],{"class":59},[49,10864,391],{"class":59},[49,10866,10867],{"class":55},"\\f119",[49,10869,391],{"class":59},[49,10871,82],{"class":59},[49,10873,10874],{"class":51,"line":420},[49,10875,538],{"class":59},[49,10877,10878],{"class":51,"line":425},[49,10879,295],{"emptyLinePlaceholder":162},[49,10881,10882,10884,10887,10889,10891,10893],{"class":51,"line":441},[49,10883,60],{"class":59},[49,10885,10886],{"class":4573},"u-list_02",[49,10888,10748],{"class":4573},[49,10890,9794],{"class":59},[49,10892,9797],{"class":305},[49,10894,965],{"class":59},[49,10896,10897,10899,10901,10903,10906,10908],{"class":51,"line":458},[49,10898,10794],{"class":4581},[49,10900,342],{"class":59},[49,10902,391],{"class":59},[49,10904,10905],{"class":55},"\\f4da",[49,10907,391],{"class":59},[49,10909,82],{"class":59},[49,10911,10912],{"class":51,"line":464},[49,10913,538],{"class":59},[13,10915,10916],{},"iタグを入れない代わりに、ulタグに擬似要素アイコンを付けるための設定（p-deco_list）とアイコンの種類を指定（u-list_*）しています。そしてCSSでクラス名配下のliに対して擬似要素を付けるようにしています。",[199,10918,10919],{"id":10919},"擬似要素でアイコンを表示するのは意外と簡単",[13,10921,10922,10923],{},"CSSを見ればわかりますが、意外と簡単です。fontawesome、GoogleIconは「フォントアイコン」とも呼ばれているように、",[8868,10924,10925],{},"文字のように扱うことができます。",[13,10927,10928,10929,10932],{},"fontawesomeを使うならば、",[8868,10930,10931],{},"font-familyに’FontAwesome’と入れればいいのです。"," するとCDNとかがちゃんと読み込まれていれば、fontawesomeのアイコンが使えるようになります。",[13,10934,10935],{},"そしてアイコンの種類はcontentで指定します。「\\f4da」みたいなのは文字コードです。この文字コードはfontawesomeで簡単に見つけられます。下図のfontawesomeのアイコン詳細画面を開くと、iタグの横に「f4da」とあります。",[4351,10937],{":src":10938,":width":4354},"'_mix\u002Ffontawesome-1024x296.png'",[13,10940,10941,10942],{},"この英数字とバックスラッシュ（\\）をCSSのcontentに入れればアイコンの指定が完了です。",[8868,10943,10944],{},"バックスラッシュを入れないと、文字コードでなく「f4da」という文字列として認識されてしまいます。",[13,10946,10947],{},"「擬似要素！？iタグより難しいじゃん..」と思う方は、iタグで表示されたアイコンを開発者ツールでみてみましょう。実はiタグもこの方法と同じように、クラス名で文字コードを指定して、擬似要素内にアイコンを表示しているだけなんですよ。その方法をiタグ使わないでやっているだけです。",[199,10949,10951],{"id":10950},"ie野郎対策","IE野郎対策",[13,10953,10954,10955],{},"私もiタグがいらなくて、クラスを指定すればいいことにウキウキしながら実装を進めていくと問題にぶち当たりました。IEです。",[8868,10956,10957],{},"実は下のコードだけではIEは表示されないという事件が発覚して、頭を悩ませていました。",[40,10959,10961],{"className":4564,"code":10960,"language":4566,"meta":45,"style":45},".p-deco_list li::before{\n    content:'';\n    font-family: 'FontAwesome';\n    padding:5px 10px; \u002F* 文字間隔調整 *\u002F\n}\n",[17,10962,10963,10977,10987,11001,11015],{"__ignoreMap":45},[49,10964,10965,10967,10969,10971,10973,10975],{"class":51,"line":52},[49,10966,60],{"class":59},[49,10968,10745],{"class":4573},[49,10970,10748],{"class":4573},[49,10972,9794],{"class":59},[49,10974,9797],{"class":305},[49,10976,965],{"class":59},[49,10978,10979,10981,10983,10985],{"class":51,"line":85},[49,10980,10794],{"class":4581},[49,10982,342],{"class":59},[49,10984,10799],{"class":59},[49,10986,82],{"class":59},[49,10988,10989,10991,10993,10995,10997,10999],{"class":51,"line":154},[49,10990,10806],{"class":4581},[49,10992,342],{"class":59},[49,10994,386],{"class":59},[49,10996,10813],{"class":73},[49,10998,391],{"class":59},[49,11000,82],{"class":59},[49,11002,11003,11005,11007,11009,11011,11013],{"class":51,"line":318},[49,11004,4594],{"class":4581},[49,11006,342],{"class":59},[49,11008,10826],{"class":915},[49,11010,4877],{"class":915},[49,11012,9664],{"class":59},[49,11014,10833],{"class":88},[49,11016,11017],{"class":51,"line":324},[49,11018,538],{"class":59},[13,11020,11021],{},"chromeやFireFox（一応Edge）は表示されるんですが、IE11は表示されてませんでした。要件にはIE11が入っていたので実装は必須です。頭を悩ませてググっていると方法がありました。",[40,11023,11025],{"className":4564,"code":11024,"language":4566,"meta":45,"style":45},".p-deco_list li::before{\n    content:'';\n    font-family: 'FontAwesome';\n    font-feature-settings: 'liga';\n    padding:5px 10px; \u002F* 文字間隔調整 *\u002F\n}\n",[17,11026,11027,11041,11051,11065,11081,11095],{"__ignoreMap":45},[49,11028,11029,11031,11033,11035,11037,11039],{"class":51,"line":52},[49,11030,60],{"class":59},[49,11032,10745],{"class":4573},[49,11034,10748],{"class":4573},[49,11036,9794],{"class":59},[49,11038,9797],{"class":305},[49,11040,965],{"class":59},[49,11042,11043,11045,11047,11049],{"class":51,"line":85},[49,11044,10794],{"class":4581},[49,11046,342],{"class":59},[49,11048,10799],{"class":59},[49,11050,82],{"class":59},[49,11052,11053,11055,11057,11059,11061,11063],{"class":51,"line":154},[49,11054,10806],{"class":4581},[49,11056,342],{"class":59},[49,11058,386],{"class":59},[49,11060,10813],{"class":73},[49,11062,391],{"class":59},[49,11064,82],{"class":59},[49,11066,11067,11070,11072,11074,11077,11079],{"class":51,"line":318},[49,11068,11069],{"class":4581},"    font-feature-settings",[49,11071,342],{"class":59},[49,11073,386],{"class":59},[49,11075,11076],{"class":73},"liga",[49,11078,391],{"class":59},[49,11080,82],{"class":59},[49,11082,11083,11085,11087,11089,11091,11093],{"class":51,"line":324},[49,11084,4594],{"class":4581},[49,11086,342],{"class":59},[49,11088,10826],{"class":915},[49,11090,4877],{"class":915},[49,11092,9664],{"class":59},[49,11094,10833],{"class":88},[49,11096,11097],{"class":51,"line":330},[49,11098,538],{"class":59},[13,11100,11101],{},"「font-feature-settings: ‘liga’;」というのを設定したらなんと！表示されました。このプロパティですがmdnでは",[1389,11103,11105,11106,11109,11110],{"className":11104},[1392,1393],"\nCSS の ",[17,11107,11108],{},"font-feature-settings"," プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。\n",[3261,11111,11112],{},[100,11113,11114],{"href":11114,"target":8862},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002Ffont-feature-settings",[13,11116,11117],{},"(；´Д`A？",[13,11119,11120],{},"全然分からん。とりあえずフォントアイコン＝フォントなので、そのアイコンフォントを表示させるための設定がIEではないのか？と結論づけました。フォントについて詳しい人教えてください。",[199,11122,11123],{"id":11123},"アイコンは基本的には擬似要素がいいかも",[13,11125,11126],{},"そんな感じで、擬似要素を用いてアイコンを付ける方法は以上です。今回の例で出したような、動的な内容にアイコンが伴う場合はクラス名で指定できる、擬似要素アイコンがiタグ埋め込みより優れています。意外とやっている原理は簡単なのでぜひ使えると便利ですよ。",[150,11128,11129],{},"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":45,"searchDepth":154,"depth":154,"links":11131},[11132,11135,11136,11137,11138],{"id":10516,"depth":85,"text":10516,"children":11133},[11134],{"id":10531,"depth":154,"text":10532},{"id":10558,"depth":85,"text":10559},{"id":10919,"depth":85,"text":10919},{"id":10950,"depth":85,"text":10951},{"id":11123,"depth":85,"text":11123},[4329],"2020-04-26",{},"\u002Farticles\u002Fpseudo-element-icon",{"title":10472,"description":10472},"articles\u002Fpseudo-element-icon",[167,4566],"_mix\u002Fpseudo-element-icon.png","vqsAO5STJjp70MfR8z6uFmS_BPvxDfVteLbqAiJvnO0",1780987145362]