あなたの CSS を劇的に汚くするたった 3 つの方法

## 1. 宣言ブロックに書く CSS は 1 つまで

CSS は宣言型の言語であるため、構文がわかりやすくなっています。

CSS では、プロパティとその値が結びついたものを **CSS 宣言**と呼び、CSS 宣言の集まったものを **CSS 宣言ブロック**、CSS 宣言ブロック内の CSS 宣言をまとめて**宣言リスト**といいます。

CSS 宣言がリスト形式になっていることで、特定の要素にどのような装飾がされているのかを**簡単に俯瞰**することができます。しかし、今回は CSS を汚くしたいので、CSS 宣言ブロックに記述する CSS 宣言を 1 つまでに制限し、**挨拶代わりに読み手の視認性を阻害**します。ついでに CSS 宣言ブロックの順番をごちゃまぜにすると**ダメージがアップ**します。

それでは、これを実際の CSS に適用してみましょう。今回は以下のような CSS を用意しました。*どのくらい汚くなるかがよりわかりやすいように長いコードを用意しましたが、長さの関係でコードは圧縮しています。*

これが...

```CSS
*{box-sizing:border-box}html{background-color:#f99;font-size:16px;min-width:300px}body{color:#4a4a4a;font-size:1em;font-weight:400;line-height:1.5}.container{flex-grow:1;margin:0 auto;position:relative;max-width:960px}.section{padding:3rem 1.5rem}.subtitle,.title{word-break:break-word}.title{color:#363636;font-size:2rem;font-weight:600;line-height:1.125}.title:not(:last-child){margin-bottom:1.5rem}.subtitle{color:#4a4a4a;font-size:1.25rem;font-weight:400;line-height:1.25}.title+.subtitle{margin-top:-1.25rem}
```

こうなります。プリティーでかわいいですね！(？)
しかし、読もうと思えば読めなくもなさそうです。

```CSS
html{font-size:16px}.section{box-sizing:border-box}body{color:#4a4a4a}.container{box-sizing:border-box}.title{font-weight:600}.title{box-sizing:border-box}.subtitle{line-height:1.25}.title{color:#363636}body{font-weight:400}body{line-height:1.5}.container{max-width:960px}.section{padding-top:3rem}.container{margin-bottom:0}.container{margin-right:auto}.section{padding-right:1.5rem}.subtitle{box-sizing:border-box}.title:not(:last-child){margin-bottom:1.5rem}html{box-sizing:border-box}body{box-sizing:border-box}.container{flex-grow:1}.title:not(:last-child){box-sizing:border-box}.subtitle{word-break:break-word}.subtitle{color:#4a4a4a}html{min-width:300px}.subtitle{font-weight:400}.section{padding-bottom:3rem}.title{line-height:1.125}html{background-color:#f99}.container{position:relative}body{font-size:1em}.subtitle{font-size:1.25rem}.container{margin-top:0}.container{margin-left:auto}.title{font-size:2rem}.title{word-break:break-word}.title+.subtitle{margin-top:-1.25rem}.section{padding-left:1.5rem}
```

## 2. 値は CSS カスタムプロパティと `calc` 関数で隠蔽する

複雑なウェブサイトになると、膨大な CSS のなかで同じ値が使われることが多くなります。そのような値を変更するとき、それらをひとつひとつ書き換えていく手間はとても大きくなります。そのような場面で CSS カスタムプロパティが役立ちます。

CSS カスタムプロパティを使うことで、**ひとつの場所で値を管理**し、それを**複数の場所から参照**できます。また、CSS カスタムプロパティには CSS を書く人が任意の名前を設定できるため、**その値がどのような意味を持つかも明確に**でき、CSS の視認性が向上します。

しかし、昔の人は月に叢雲花に風、寸善尺魔といいました。タダより高いものはありません。CSS カスタムプロパティには多くの利点がありますが、これほどの利点があれば、それは一転して大きな脅威にもなりえます。

CSS カスタムプロパティを尺魔たらしめるためには、`calc` 関数を使う必要があります。`calc` 関数を使うと、**式の計算を行うことができ**、その結果を値として用いることができます。また、`calc` 関数は入れ子にすることも可能です。


この 2 つによって複雑な計算式を作れば、その値は CSS を書いた人間ですら推測することが難しくなります。これによる**ダメージはバルス 50 回分に相当**します。2 階から目薬ならぬ、横から鉄球ですね！(？)


ではさっそく、前回の手順を終えた以下の CSS にこれを適用しましょう。

これが...

```CSS
html{font-size:16px}.section{box-sizing:border-box}body{color:#4a4a4a}.container{box-sizing:border-box}.title{font-weight:600}.title{box-sizing:border-box}.subtitle{line-height:1.25}.title{color:#363636}body{font-weight:400}body{line-height:1.5}.container{max-width:960px}.section{padding-top:3rem}.container{margin-bottom:0}.container{margin-right:auto}.section{padding-right:1.5rem}.subtitle{box-sizing:border-box}.title:not(:last-child){margin-bottom:1.5rem}html{box-sizing:border-box}body{box-sizing:border-box}.container{flex-grow:1}.title:not(:last-child){box-sizing:border-box}.subtitle{word-break:break-word}.subtitle{color:#4a4a4a}html{min-width:300px}.subtitle{font-weight:400}.section{padding-bottom:3rem}.title{line-height:1.125}html{background-color:#f99}.container{position:relative}body{font-size:1em}.subtitle{font-size:1.25rem}.container{margin-top:0}.container{margin-left:auto}.title{font-size:2rem}.title{word-break:break-word}.title+.subtitle{margin-top:-1.25rem}.section{padding-left:1.5rem}
```

こうなります。~~うわー！目が、目がぁ〜！！~~

今回は手間の都合上、簡単な計算式ですが、場合によってはより難しい計算式を使うことも可能です。数学の勉強をするついでに作れば一石二鳥ですね！

```CSS
.title:not(:last-child){box-sizing:border-box}.container{box-sizing:border-box}.subtitle{line-height:var(--e9Edw)}.subtitle{--e9Edw:calc(var(--yiKth) + var(--fzRJX) + 2 * var(--ZKjAc))}body{--yi5th:100}.title+.subtitle{margin-top:calc(calc(var(--RJAta) + var(--PCZKQ) - var(--Jo3fe)) * -1)}.subtitle{font-weight:var(--wirwd)}html{--znAzY:calc(var(--SuxiH) * var(--UwAEn))}.title{font-weight:var(--JLjU6)}.title{font-size:var(--Romev)}.section{--pbaKm:450px}.subtitle{box-sizing:border-box}.container{flex-grow:var(--ujuLg)}.subtitle{--fPJbp:2}.title{color:#363636}.subtitle{--Jo3fe:calc(var(--krbDH) / var(--fPJbp))}html{background-color:#f99}.subtitle{color:#4a4a4a}.section{box-sizing:border-box}.section{--ZkBGU:2}.section{padding-bottom:var(--ZKjAc)}.container{position:relative}.title{line-height:calc(var(--yjwnr) + var(--yiKth))}body{font-size:var(--RJAta)}html{--sFiuw:2px}body{--EYNab:calc(var(--ZKj5c) * var(--PaC8M))}.section{--VDrYz:calc(var(--RJAta) + var(--PCZKQ))}html{--Eoesg:calc(var(--UwAEn) + var(--UwAEn))}.section{--QTNrP:calc(var(--sVjpe) + var(--pbaKm))}body{--ZYgGk:calc(var(--ZKjAc) + var(--PYC8M))}html{--Towen:calc(var(--znAzY) * var(--NeZGs) / var(--Eoesg))}body{--PCZKQ:0.5rem}body{--wirwd:calc((var(--yi5th) + var(--Gak2h)) * var(--EYNab) / var(--e9Edw))}.container{max-width:var(--QTNrP)}html{--SuxiH:calc(var(--kjerwe) * var(--sFiuw))}body{box-sizing:border-box}.section{--RJAta:1rem}.section{padding-left:calc(var(--RJAta) + var(--PCZKQ))}html{--Romre:var(--Gak2h)}body{color:#4a4a4a}.container{margin-right:auto}html{--NeZGs:100}body{font-weight:var(--wirwd)}html{--Gak2h:0}html{box-sizing:border-box}.title{box-sizing:border-box}html{--ujuLg:1}html{--JNUTR:calc(var(--BxGcU) * var(--sFiuw) * var(--esR9X))}.subtitle{word-break:break-word}.title{word-break:break-word}html{--yEkfa:calc(var(--JNUTR) - var(--sFiuw))}.title{--yjwnr:calc(var(--Hrjho) * var(--Roenr))}.section{padding-right:calc(var(--RJAta) + var(--PCZKQ))}body{--yiKth:1.1}.title{--kkWcc:60}.title{--JLjU6:calc(var(--fnmLw)*var(--kkWcc) * var(--KZ4wd))}body{line-height:var(--QQhHT)}html{--UwAEn:5}body{--PYC8M:0.11}.subtitle{font-size:calc(var(--RJAta) + var(--PCZKQ) - var(--Jo3fe))}.section{padding-top:var(--ZKjAc)}.container{margin-top:var(--Romre)}.subtitle{--krbDH:0.5rem}.subtitle{--fzRJX:calc(var(--ZKjAc) + var(--PYC8M))}html{min-width:var(--Towen)}.title{--KZ4wd:calc(var(--fnmLw) * var(--fnmLw) + var(--ujuLg))}.title{--Hrjho:0.5}html{--RJAta:1rem}.title{--Roenr:0.05}body{--e9Edw:10}html{--Ai4rk:1px}.title{--fnmLw:2}html{--kjerwe:3}body{--QQhHT:calc((var(--ZYgGk) + 0.03) * 10)}.subtitle{--ZKjAc:0.01}.section{--ZKjAc:calc(var(--ZkBGU) * var(--VDrYz))}html{--BxGcU:calc(var(--sFiuw) + var(--Ai4rk))}html{--esR9X:calc(var(--BxGcU) + var(--Gak2h))}body{--ZKjAc:0.01}.subtitle{--PYC8M:0.11}body{--PaC8M:2}.subtitle{--yiKth:1.11}.container{margin-bottom:var(--Romre)}.section{--bhfSC:60px}.section{--Romev:calc(var(--PCZKQ) + var(--PCZKQ) + var(--RJAta))}.title:not(:last-child){margin-bottom:calc(var(--RJAta) + var(--PCZKQ))}html{font-size:calc(var(--yEkfa))}.container{margin-left:auto}body{--ZKj5c:calc(var(--e9Edw) * var(--PaC8M))}.section{--sVjpe:calc(var(--bhfSC) + var(--pbaKm))}
```

## 3. Unicode 符号位置でエスケープする

上の 2 つを終えて、CSS は当初と比べ物にならないレベルで汚くなりました。しかし、まだこれを読もうとする猛者もいるかもしれません。最後の仕上げとして、読む気どころか生きる気力すら失せてくるほどの細工を仕掛けましょう。

それは **識別子を Unicode 符号位置でエスケープ**することです。この言葉自体には馴染みがないかもしれませんが、`content` プロパティに記号を指定するときに使うことがあります。これを行なうことで、**文字列や識別子に Unicode 符号位置を直接指定**することができます。エスケープの方法はいくつかありますが、よく知られているのはバックスラッシュの後に最大 6 桁の 16 進数を入力して符号位置を表す方法です。

```CSS:Unicode符号位置の記述例
/* 下記の 2 つの content プロパティのテキストは同じ内容です。 */

.plain::before {
  content: "こんにちは！";
}

.escape::before {
  content: "\3053\3093\306b\3061\306f\ff01";
}
```

さっそくエスケープを行なうと、これが...

```CSS
.title:not(:last-child){box-sizing:border-box}.container{box-sizing:border-box}.subtitle{line-height:var(--e9Edw)}.subtitle{--e9Edw:calc(var(--yiKth) + var(--fzRJX) + 2 * var(--ZKjAc))}body{--yi5th:100}.title+.subtitle{margin-top:calc(calc(var(--RJAta) + var(--PCZKQ) - var(--Jo3fe)) * -1)}.subtitle{font-weight:var(--wirwd)}html{--znAzY:calc(var(--SuxiH) * var(--UwAEn))}.title{font-weight:var(--JLjU6)}.title{font-size:var(--Romev)}.section{--pbaKm:450px}.subtitle{box-sizing:border-box}.container{flex-grow:var(--ujuLg)}.subtitle{--fPJbp:2}.title{color:#363636}.subtitle{--Jo3fe:calc(var(--krbDH) / var(--fPJbp))}html{background-color:#f99}.subtitle{color:#4a4a4a}.section{box-sizing:border-box}.section{--ZkBGU:2}.section{padding-bottom:var(--ZKjAc)}.container{position:relative}.title{line-height:calc(var(--yjwnr) + var(--yiKth))}body{font-size:var(--RJAta)}html{--sFiuw:2px}body{--EYNab:calc(var(--ZKj5c) * var(--PaC8M))}.section{--VDrYz:calc(var(--RJAta) + var(--PCZKQ))}html{--Eoesg:calc(var(--UwAEn) + var(--UwAEn))}.section{--QTNrP:calc(var(--sVjpe) + var(--pbaKm))}body{--ZYgGk:calc(var(--ZKjAc) + var(--PYC8M))}html{--Towen:calc(var(--znAzY) * var(--NeZGs) / var(--Eoesg))}body{--PCZKQ:0.5rem}body{--wirwd:calc((var(--yi5th) + var(--Gak2h)) * var(--EYNab) / var(--e9Edw))}.container{max-width:var(--QTNrP)}html{--SuxiH:calc(var(--kjerwe) * var(--sFiuw))}body{box-sizing:border-box}.section{--RJAta:1rem}.section{padding-left:calc(var(--RJAta) + var(--PCZKQ))}html{--Romre:var(--Gak2h)}body{color:#4a4a4a}.container{margin-right:auto}html{--NeZGs:100}body{font-weight:var(--wirwd)}html{--Gak2h:0}html{box-sizing:border-box}.title{box-sizing:border-box}html{--ujuLg:1}html{--JNUTR:calc(var(--BxGcU) * var(--sFiuw) * var(--esR9X))}.subtitle{word-break:break-word}.title{word-break:break-word}html{--yEkfa:calc(var(--JNUTR) - var(--sFiuw))}.title{--yjwnr:calc(var(--Hrjho) * var(--Roenr))}.section{padding-right:calc(var(--RJAta) + var(--PCZKQ))}body{--yiKth:1.1}.title{--kkWcc:60}.title{--JLjU6:calc(var(--fnmLw)*var(--kkWcc) * var(--KZ4wd))}body{line-height:var(--QQhHT)}html{--UwAEn:5}body{--PYC8M:0.11}.subtitle{font-size:calc(var(--RJAta) + var(--PCZKQ) - var(--Jo3fe))}.section{padding-top:var(--ZKjAc)}.container{margin-top:var(--Romre)}.subtitle{--krbDH:0.5rem}.subtitle{--fzRJX:calc(var(--ZKjAc) + var(--PYC8M))}html{min-width:var(--Towen)}.title{--KZ4wd:calc(var(--fnmLw) * var(--fnmLw) + var(--ujuLg))}.title{--Hrjho:0.5}html{--RJAta:1rem}.title{--Roenr:0.05}body{--e9Edw:10}html{--Ai4rk:1px}.title{--fnmLw:2}html{--kjerwe:3}body{--QQhHT:calc((var(--ZYgGk) + 0.03) * 10)}.subtitle{--ZKjAc:0.01}.section{--ZKjAc:calc(var(--ZkBGU) * var(--VDrYz))}html{--BxGcU:calc(var(--sFiuw) + var(--Ai4rk))}html{--esR9X:calc(var(--BxGcU) + var(--Gak2h))}body{--ZKjAc:0.01}.subtitle{--PYC8M:0.11}body{--PaC8M:2}.subtitle{--yiKth:1.11}.container{margin-bottom:var(--Romre)}.section{--bhfSC:60px}.section{--Romev:calc(var(--PCZKQ) + var(--PCZKQ) + var(--RJAta))}.title:not(:last-child){margin-bottom:calc(var(--RJAta) + var(--PCZKQ))}html{font-size:calc(var(--yEkfa))}.container{margin-left:auto}body{--ZKj5c:calc(var(--e9Edw) * var(--PaC8M))}.section{--sVjpe:calc(var(--bhfSC) + var(--pbaKm))}
```


こうなります！もはや読むものなのかすらわからなくなりました！一種の芸術作品ですね！！
読み手に与えるダメージは**ネクロノミコンに匹敵する**といっても過言ではないでしょう！(？)

```CSS
.\0074\0069\0074\006c\0065:\006e\006f\0074(:\006c\0061\0073\0074\002d\0063\0068\0069\006c\0064){\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0073\0075\0062\0074\0069\0074\006c\0065{\006c\0069\006e\0065\002d\0068\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\0065\0039\0045\0064\0077)}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0065\0039\0045\0064\0077:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0079\0069\004b\0074\0068) + \0076\0061\0072(\002d\002d\0066\007a\0052\004a\0058) + 2*\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063))}\0062\006f\0064\0079{\002d\002d\0079\0069\0035\0074\0068:100}.\0074\0069\0074\006c\0065+.\0073\0075\0062\0074\0069\0074\006c\0065{\006d\0061\0072\0067\0069\006e\002d\0074\006f\0070:\0063\0061\006c\0063(\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051) - \0076\0061\0072(\002d\002d\004a\006f\0033\0066\0065))*-1)}.\0073\0075\0062\0074\0069\0074\006c\0065{\0066\006f\006e\0074\002d\0077\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\0077\0069\0072\0077\0064)}\0068\0074\006d\006c{\002d\002d\007a\006e\0041\007a\0059:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0053\0075\0078\0069\0048)*\0076\0061\0072(\002d\002d\0055\0077\0041\0045\006e))}.\0074\0069\0074\006c\0065{\0066\006f\006e\0074\002d\0077\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\004a\004c\006a\0055\0036)}.\0074\0069\0074\006c\0065{\0066\006f\006e\0074\002d\0073\0069\007a\0065:\0076\0061\0072(\002d\002d\0052\006f\006d\0065\0076)}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0070\0062\0061\004b\006d:450px}.\0073\0075\0062\0074\0069\0074\006c\0065{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\0066\006c\0065\0078\002d\0067\0072\006f\0077:\0076\0061\0072(\002d\002d\0075\006a\0075\004c\0067)}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0066\0050\004a\0062\0070:2}.\0074\0069\0074\006c\0065{\0063\006f\006c\006f\0072:#\0033\0036\0033\0036\0033\0036}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\004a\006f\0033\0066\0065:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\006b\0072\0062\0044\0048)/\0076\0061\0072(\002d\002d\0066\0050\004a\0062\0070))}\0068\0074\006d\006c{\0062\0061\0063\006b\0067\0072\006f\0075\006e\0064\002d\0063\006f\006c\006f\0072:#\0066\0039\0039}.\0073\0075\0062\0074\0069\0074\006c\0065{\0063\006f\006c\006f\0072:#\0034\0061\0034\0061\0034\0061}.\0073\0065\0063\0074\0069\006f\006e{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\005a\006b\0042\0047\0055:2}.\0073\0065\0063\0074\0069\006f\006e{\0070\0061\0064\0064\0069\006e\0067\002d\0062\006f\0074\0074\006f\006d:\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063)}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\0070\006f\0073\0069\0074\0069\006f\006e:\0072\0065\006c\0061\0074\0069\0076\0065}.\0074\0069\0074\006c\0065{\006c\0069\006e\0065\002d\0068\0065\0069\0067\0068\0074:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0079\006a\0077\006e\0072) + \0076\0061\0072(\002d\002d\0079\0069\004b\0074\0068))}\0062\006f\0064\0079{\0066\006f\006e\0074\002d\0073\0069\007a\0065:\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061)}\0068\0074\006d\006c{\002d\002d\0073\0046\0069\0075\0077:2px}\0062\006f\0064\0079{\002d\002d\0045\0059\004e\0061\0062:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\005a\004b\006a\0035\0063)*\0076\0061\0072(\002d\002d\0050\0061\0043\0038\004d))}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0056\0044\0072\0059\007a:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051))}\0068\0074\006d\006c{\002d\002d\0045\006f\0065\0073\0067:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0055\0077\0041\0045\006e) + \0076\0061\0072(\002d\002d\0055\0077\0041\0045\006e))}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0051\0054\004e\0072\0050:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0073\0056\006a\0070\0065) + \0076\0061\0072(\002d\002d\0070\0062\0061\004b\006d))}\0062\006f\0064\0079{\002d\002d\005a\0059\0067\0047\006b:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063) + \0076\0061\0072(\002d\002d\0050\0059\0043\0038\004d))}\0068\0074\006d\006c{\002d\002d\0054\006f\0077\0065\006e:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\007a\006e\0041\007a\0059)*\0076\0061\0072(\002d\002d\004e\0065\005a\0047\0073)/\0076\0061\0072(\002d\002d\0045\006f\0065\0073\0067))}\0062\006f\0064\0079{\002d\002d\0050\0043\005a\004b\0051:.5rem}\0062\006f\0064\0079{\002d\002d\0077\0069\0072\0077\0064:\0063\0061\006c\0063((\0076\0061\0072(\002d\002d\0079\0069\0035\0074\0068) + \0076\0061\0072(\002d\002d\0047\0061\006b\0032\0068))*\0076\0061\0072(\002d\002d\0045\0059\004e\0061\0062)/\0076\0061\0072(\002d\002d\0065\0039\0045\0064\0077))}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0078\002d\0077\0069\0064\0074\0068:\0076\0061\0072(\002d\002d\0051\0054\004e\0072\0050)}\0068\0074\006d\006c{\002d\002d\0053\0075\0078\0069\0048:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\006b\006a\0065\0072\0077\0065)*\0076\0061\0072(\002d\002d\0073\0046\0069\0075\0077))}\0062\006f\0064\0079{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0052\004a\0041\0074\0061:1rem}.\0073\0065\0063\0074\0069\006f\006e{\0070\0061\0064\0064\0069\006e\0067\002d\006c\0065\0066\0074:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051))}\0068\0074\006d\006c{\002d\002d\0052\006f\006d\0072\0065:\0076\0061\0072(\002d\002d\0047\0061\006b\0032\0068)}\0062\006f\0064\0079{\0063\006f\006c\006f\0072:#\0034\0061\0034\0061\0034\0061}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0072\0067\0069\006e\002d\0072\0069\0067\0068\0074:\0061\0075\0074\006f}\0068\0074\006d\006c{\002d\002d\004e\0065\005a\0047\0073:100}\0062\006f\0064\0079{\0066\006f\006e\0074\002d\0077\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\0077\0069\0072\0077\0064)}\0068\0074\006d\006c{\002d\002d\0047\0061\006b\0032\0068:0}\0068\0074\006d\006c{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}.\0074\0069\0074\006c\0065{\0062\006f\0078\002d\0073\0069\007a\0069\006e\0067:\0062\006f\0072\0064\0065\0072\002d\0062\006f\0078}\0068\0074\006d\006c{\002d\002d\0075\006a\0075\004c\0067:1}\0068\0074\006d\006c{\002d\002d\004a\004e\0055\0054\0052:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0042\0078\0047\0063\0055)*\0076\0061\0072(\002d\002d\0073\0046\0069\0075\0077)*\0076\0061\0072(\002d\002d\0065\0073\0052\0039\0058))}.\0073\0075\0062\0074\0069\0074\006c\0065{\0077\006f\0072\0064\002d\0062\0072\0065\0061\006b:\0062\0072\0065\0061\006b\002d\0077\006f\0072\0064}.\0074\0069\0074\006c\0065{\0077\006f\0072\0064\002d\0062\0072\0065\0061\006b:\0062\0072\0065\0061\006b\002d\0077\006f\0072\0064}\0068\0074\006d\006c{\002d\002d\0079\0045\006b\0066\0061:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\004a\004e\0055\0054\0052) - \0076\0061\0072(\002d\002d\0073\0046\0069\0075\0077))}.\0074\0069\0074\006c\0065{\002d\002d\0079\006a\0077\006e\0072:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0048\0072\006a\0068\006f)*\0076\0061\0072(\002d\002d\0052\006f\0065\006e\0072))}.\0073\0065\0063\0074\0069\006f\006e{\0070\0061\0064\0064\0069\006e\0067\002d\0072\0069\0067\0068\0074:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051))}\0062\006f\0064\0079{\002d\002d\0079\0069\004b\0074\0068:1.1}.\0074\0069\0074\006c\0065{\002d\002d\006b\006b\0057\0063\0063:60}.\0074\0069\0074\006c\0065{\002d\002d\004a\004c\006a\0055\0036:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0066\006e\006d\004c\0077)*\0076\0061\0072(\002d\002d\006b\006b\0057\0063\0063)*\0076\0061\0072(\002d\002d\004b\005a\0034\0077\0064))}\0062\006f\0064\0079{\006c\0069\006e\0065\002d\0068\0065\0069\0067\0068\0074:\0076\0061\0072(\002d\002d\0051\0051\0068\0048\0054)}\0068\0074\006d\006c{\002d\002d\0055\0077\0041\0045\006e:5}\0062\006f\0064\0079{\002d\002d\0050\0059\0043\0038\004d:.11}.\0073\0075\0062\0074\0069\0074\006c\0065{\0066\006f\006e\0074\002d\0073\0069\007a\0065:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051) - \0076\0061\0072(\002d\002d\004a\006f\0033\0066\0065))}.\0073\0065\0063\0074\0069\006f\006e{\0070\0061\0064\0064\0069\006e\0067\002d\0074\006f\0070:\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063)}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0072\0067\0069\006e\002d\0074\006f\0070:\0076\0061\0072(\002d\002d\0052\006f\006d\0072\0065)}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\006b\0072\0062\0044\0048:.5rem}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0066\007a\0052\004a\0058:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\005a\004b\006a\0041\0063) + \0076\0061\0072(\002d\002d\0050\0059\0043\0038\004d))}\0068\0074\006d\006c{\006d\0069\006e\002d\0077\0069\0064\0074\0068:\0076\0061\0072(\002d\002d\0054\006f\0077\0065\006e)}.\0074\0069\0074\006c\0065{\002d\002d\004b\005a\0034\0077\0064:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0066\006e\006d\004c\0077)*\0076\0061\0072(\002d\002d\0066\006e\006d\004c\0077) + \0076\0061\0072(\002d\002d\0075\006a\0075\004c\0067))}.\0074\0069\0074\006c\0065{\002d\002d\0048\0072\006a\0068\006f:.5}\0068\0074\006d\006c{\002d\002d\0052\004a\0041\0074\0061:1rem}.\0074\0069\0074\006c\0065{\002d\002d\0052\006f\0065\006e\0072:.05}\0062\006f\0064\0079{\002d\002d\0065\0039\0045\0064\0077:10}\0068\0074\006d\006c{\002d\002d\0041\0069\0034\0072\006b:1px}.\0074\0069\0074\006c\0065{\002d\002d\0066\006e\006d\004c\0077:2}\0068\0074\006d\006c{\002d\002d\006b\006a\0065\0072\0077\0065:3}\0062\006f\0064\0079{\002d\002d\0051\0051\0068\0048\0054:\0063\0061\006c\0063((\0076\0061\0072(\002d\002d\005a\0059\0067\0047\006b) + .03)*10)}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\005a\004b\006a\0041\0063:.01}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\005a\004b\006a\0041\0063:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\005a\006b\0042\0047\0055)*\0076\0061\0072(\002d\002d\0056\0044\0072\0059\007a))}\0068\0074\006d\006c{\002d\002d\0042\0078\0047\0063\0055:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0073\0046\0069\0075\0077) + \0076\0061\0072(\002d\002d\0041\0069\0034\0072\006b))}\0068\0074\006d\006c{\002d\002d\0065\0073\0052\0039\0058:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0042\0078\0047\0063\0055) + \0076\0061\0072(\002d\002d\0047\0061\006b\0032\0068))}\0062\006f\0064\0079{\002d\002d\005a\004b\006a\0041\0063:.01}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0050\0059\0043\0038\004d:.11}\0062\006f\0064\0079{\002d\002d\0050\0061\0043\0038\004d:2}.\0073\0075\0062\0074\0069\0074\006c\0065{\002d\002d\0079\0069\004b\0074\0068:1.11}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0072\0067\0069\006e\002d\0062\006f\0074\0074\006f\006d:\0076\0061\0072(\002d\002d\0052\006f\006d\0072\0065)}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0062\0068\0066\0053\0043:60px}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0052\006f\006d\0065\0076:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051) + \0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061))}.\0074\0069\0074\006c\0065:\006e\006f\0074(:\006c\0061\0073\0074\002d\0063\0068\0069\006c\0064){\006d\0061\0072\0067\0069\006e\002d\0062\006f\0074\0074\006f\006d:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0052\004a\0041\0074\0061) + \0076\0061\0072(\002d\002d\0050\0043\005a\004b\0051))}\0068\0074\006d\006c{\0066\006f\006e\0074\002d\0073\0069\007a\0065:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0079\0045\006b\0066\0061))}.\0063\006f\006e\0074\0061\0069\006e\0065\0072{\006d\0061\0072\0067\0069\006e\002d\006c\0065\0066\0074:\0061\0075\0074\006f}\0062\006f\0064\0079{\002d\002d\005a\004b\006a\0035\0063:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0065\0039\0045\0064\0077)*\0076\0061\0072(\002d\002d\0050\0061\0043\0038\004d))}.\0073\0065\0063\0074\0069\006f\006e{\002d\002d\0073\0056\006a\0070\0065:\0063\0061\006c\0063(\0076\0061\0072(\002d\002d\0062\0068\0066\0053\0043) + \0076\0061\0072(\002d\002d\0070\0062\0061\004b\006d))}
```

## まとめ

いかがでしたか！？(これが言いたかった)

「世の中にはこんなコードがあるかも」と思うと、怖くて夜もグッスリ眠れませんね！
皆さんはこのようなコードを見たことがありますか？見たことがあるという方は、コメント欄で教えてください！

「なるほどー」「面白かった！」と思った方はぜひ、高評価やチャンネル登録をお願いします。

それでは本日もご視聴、ありがとうございました！