[{"data":1,"prerenderedAt":376},["ShallowReactive",2],{"article-css-art":3},{"id":4,"title":5,"body":6,"date":367,"description":368,"extension":369,"meta":370,"navigation":371,"path":372,"seo":373,"stem":374,"__hash__":375},"articles\u002Farticles\u002Fcss-art.md","CSS と MDC でアートを描く",{"type":7,"value":8,"toc":359},"minimark",[9,14,30,35,38,43,54,108,118,155,159,162,166,172,295,298,302,305,313,316,322,324,328,338,352,355],[10,11,13],"h2",{"id":12},"css-アート","CSS アート",[15,16,17,18,22,23,22,26,29],"p",{},"コードだけで絵を描けます。画像ファイルは一切使わず、CSS の ",[19,20,21],"code",{},"background","・",[19,24,25],{},"border-radius",[19,27,28],{},"radial-gradient"," だけで構成しています。",[31,32,34],"h3",{"id":33},"glow-光るオーブ","Glow — 光るオーブ",[15,36,37],{},"暗いキャンバスに同心円と放射グラデーションを重ねた作品です。",[39,40],"css-art",{"caption":41,"type":42},"Glow \u002F CSS radial-gradient + concentric rings","glow",[15,44,45,46,49,50,53],{},"グリッド線は ",[19,47,48],{},"background-image"," に2方向の ",[19,51,52],{},"linear-gradient"," を重ねて描いています。",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"language-css shiki shiki-themes github-light github-dark","background-image:\n  linear-gradient(rgba(0, 220, 130, 0.06) 1px, transparent 1px),\n  linear-gradient(90deg, rgba(0, 220, 130, 0.06) 1px, transparent 1px);\nbackground-size: 36px 36px;\n","css","",[19,62,63,75,88,99],{"__ignoreMap":60},[64,65,68,71],"span",{"class":66,"line":67},"line",1,[64,69,48],{"class":70},"s9eBZ",[64,72,74],{"class":73},"sVt8B",":\n",[64,76,78,81,85],{"class":66,"line":77},2,[64,79,80],{"class":73},"  linear-gradient(rgba(0, 220, 130, 0",[64,82,84],{"class":83},"sScJk",".06",[64,86,87],{"class":73},") 1px, transparent 1px),\n",[64,89,91,94,96],{"class":66,"line":90},3,[64,92,93],{"class":73},"  linear-gradient(90deg, rgba(0, 220, 130, 0",[64,95,84],{"class":83},[64,97,98],{"class":73},") 1px, transparent 1px);\n",[64,100,102,105],{"class":66,"line":101},4,[64,103,104],{"class":70},"background-size",[64,106,107],{"class":73},": 36px 36px;\n",[15,109,110,111,113,114,117],{},"中心の光は ",[19,112,28],{}," と ",[19,115,116],{},"filter: blur"," の組み合わせです。",[55,119,121],{"className":57,"code":120,"language":59,"meta":60,"style":60},"background: radial-gradient(circle, #00DC82 0%, rgba(0, 220, 130, 0.6) 40%, transparent 70%);\nfilter: blur(4px);\n",[19,122,123,147],{"__ignoreMap":60},[64,124,125,128,131,134,138,141,144],{"class":66,"line":67},[64,126,127],{"class":73},"background: radial-gradient(",[64,129,130],{"class":70},"circle",[64,132,133],{"class":73},", ",[64,135,137],{"class":136},"s7hpK","#00DC82",[64,139,140],{"class":73}," 0%, rgba(0, 220, 130, 0",[64,142,143],{"class":83},".6",[64,145,146],{"class":73},") 40%, transparent 70%);\n",[64,148,149,152],{"class":66,"line":77},[64,150,151],{"class":70},"filter",[64,153,154],{"class":73},": blur(4px);\n",[31,156,158],{"id":157},"mondrian-モンドリアン風","Mondrian — モンドリアン風",[15,160,161],{},"ピエト・モンドリアンの抽象絵画にインスパイアされた作品です。CSS Grid で区画を分割し、白・黒・グリーンで塗り分けています。",[39,163],{"caption":164,"type":165},"Mondrian \u002F CSS Grid composition","mondrian",[15,167,168,171],{},[19,169,170],{},"grid-area"," でそれぞれのブロックの位置とサイズを指定します。",[55,173,175],{"className":57,"code":174,"language":59,"meta":60,"style":60},".green { grid-area: 1\u002F1\u002F3\u002F2; background: #00DC82; }\n.white { grid-area: 1\u002F2\u002F2\u002F4; background: #f9fafb; }\n.black { grid-area: 1\u002F4\u002F3\u002F5; background: #18181b; }\n",[19,176,177,221,258],{"__ignoreMap":60},[64,178,179,182,185,188,191,194,197,199,201,204,206,209,212,214,216,218],{"class":66,"line":67},[64,180,181],{"class":83},".green",[64,183,184],{"class":73}," { ",[64,186,170],{"class":187},"sj4cs",[64,189,190],{"class":73},": ",[64,192,193],{"class":187},"1",[64,195,196],{"class":73},"\u002F",[64,198,193],{"class":187},[64,200,196],{"class":73},[64,202,203],{"class":187},"3",[64,205,196],{"class":73},[64,207,208],{"class":187},"2",[64,210,211],{"class":73},"; ",[64,213,21],{"class":187},[64,215,190],{"class":73},[64,217,137],{"class":187},[64,219,220],{"class":73},"; }\n",[64,222,223,226,228,230,232,234,236,238,240,242,244,247,249,251,253,256],{"class":66,"line":77},[64,224,225],{"class":83},".white",[64,227,184],{"class":73},[64,229,170],{"class":187},[64,231,190],{"class":73},[64,233,193],{"class":187},[64,235,196],{"class":73},[64,237,208],{"class":187},[64,239,196],{"class":73},[64,241,208],{"class":187},[64,243,196],{"class":73},[64,245,246],{"class":187},"4",[64,248,211],{"class":73},[64,250,21],{"class":187},[64,252,190],{"class":73},[64,254,255],{"class":187},"#f9fafb",[64,257,220],{"class":73},[64,259,260,263,265,267,269,271,273,275,277,279,281,284,286,288,290,293],{"class":66,"line":90},[64,261,262],{"class":83},".black",[64,264,184],{"class":73},[64,266,170],{"class":187},[64,268,190],{"class":73},[64,270,193],{"class":187},[64,272,196],{"class":73},[64,274,246],{"class":187},[64,276,196],{"class":73},[64,278,203],{"class":187},[64,280,196],{"class":73},[64,282,283],{"class":187},"5",[64,285,211],{"class":73},[64,287,21],{"class":187},[64,289,190],{"class":73},[64,291,292],{"class":187},"#18181b",[64,294,220],{"class":73},[296,297],"hr",{},[10,299,301],{"id":300},"ascii-アート","ASCII アート",[15,303,304],{},"文字だけで絵を描く ASCII アートも、Markdown のコードブロックで表現できます。",[55,306,311],{"className":307,"code":309,"language":310},[308],"language-text","    ██████╗ ██╗      ██████╗  ██╗    ██╗\n   ██╔════╝ ██║     ██╔═══██╗ ██║    ██║\n   ██║  ███╗██║     ██║   ██║ ██║ █╗ ██║\n   ██║   ██║██║     ██║   ██║ ██║███╗██║\n   ╚██████╔╝███████╗╚██████╔╝ ╚███╔███╔╝\n    ╚═════╝ ╚══════╝ ╚═════╝   ╚══╝╚══╝\n","text",[19,312,309],{"__ignoreMap":60},[15,314,315],{},"シンプルな図形を文字で描くこともできます。",[55,317,320],{"className":318,"code":319,"language":310},[308],"        *\n       ***\n      *****\n     *******\n    *********\n       |||\n",[19,321,319],{"__ignoreMap":60},[296,323],{},[10,325,327],{"id":326},"mdc-がアートを可能にする","MDC がアートを可能にする",[15,329,330,333,334,337],{},[19,331,332],{},"::css-art{type=\"glow\"}"," のように書くだけで、Vue コンポーネントを Markdown の中に埋め込めます。\n",[19,335,336],{},"components\u002Fcontent\u002F"," に置いたコンポーネントは自動的に MDC で使えるようになります。",[339,340,342],"callout",{"type":341},"tip",[15,343,344,345,347,348,351],{},"コンポーネント名はケバブケース（",[19,346,39],{},"）で呼び出します。ファイル名 ",[19,349,350],{},"CssArt.vue"," が自動的に変換されます。",[15,353,354],{},"コードとデザインを1ファイルに閉じ込められるのが、CSS アートと MDC の組み合わせの強みです。",[356,357,358],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":60,"searchDepth":77,"depth":77,"links":360},[361,365,366],{"id":12,"depth":77,"text":13,"children":362},[363,364],{"id":33,"depth":90,"text":34},{"id":157,"depth":90,"text":158},{"id":300,"depth":77,"text":301},{"id":326,"depth":77,"text":327},"2026-05-01T10:00:00+09:00","Nuxt Content の MDC コンポーネントと CSS だけで、コードからアートを表現する試みです。","md",{},true,"\u002Farticles\u002Fcss-art",{"title":5,"description":368},"articles\u002Fcss-art","UwgqeWxMeK2RwXHWM0yQq4tbL3qYGwIKPJ4hgU2j38Q",1777568743122]