23d24401467301d431b9の編集履歴
@@ -1 +1 @@
-HTML/CSSで大石泉すきを「描」いてみる
+23d24401467301d431b9
@@ -1,298 +1 @@
-## まえがき
-
-若干遅刻してしまい誠に申し訳ありませんでした。皆さんもインフルエンザには気をつけましょう……。
-
-## HTML/CSSで大石泉すきを*書*いてみる
-
-まずは基本。
-
-```html
-<!DOCTYPE html>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-大石泉すき
-```
-
-（いや CSS 使ってないやんというのは置いておいて、）HTML ではこれだけで「大石泉すき」と*書*けてしまいます。なんなら `viewport` 項を抜いても構いません。
-
-でも、なんの捻りもなく面白みに欠けますよね……？
-
-## HTML/CSSで大石泉すきを*描*いてみる
-
-じゃあ*描*いてみよう。
-
-まず下準備をしましょう。
-
-```html
-<!DOCTYPE html>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<style>
-:root{--size:14vw}
-body{align-items:center;display:flex;justify-content:space-evenly;margin:0}
-body,html{height:100%}
-body>div{display:grid;height:var(--size);width:var(--size)}
-body>div>div{background:#000;transform-origin:right top}
-</style>
-<div></div>
-<div></div>
-<div></div>
-<div></div>
-<div></div>
-```
-
-この CSS では `body` 配下に [CSS Flexible Box Layout](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout) を用い（`display:flex`）、上下（`align-items:center`）左右（`justify-content:space-evenly`）共に中央で、子を余白付きで横並びに等分する配置（`justify-content:space-evenly`）を指定しています。
-そして、`body` 配下には子となる `div` 要素を 5 つ配置しています。察しの良い方はこの時点で完成像が予想できるのではないでしょうか。なんなら既に不穏なスタイルが定義されていますね。
-
-
-
-### 大
-
-では「大」から*描*いていきましょう。
-
-まず最初に HTML 末尾にある `div` 要素群の一番上に `div` を 4 つ入れます。こんな感じです。
-
-```html
-<div><div></div><div></div><div></div><div></div></div>
-<div></div>
-<div></div>
-<div></div>
-<div></div>
-```
-
-また次の CSS を `style` の中に追加で投入します。
-
-```css
-body>div:nth-child(1){grid:2fr 1fr 6fr/4fr 1fr 4fr}
-body>div:nth-child(1)>div{grid-column:2;grid-row:3}
-body>div:nth-child(1)>div:nth-child(1){grid-column:2;grid-row:1}
-body>div:nth-child(1)>div:nth-child(2){grid-column:1/4;grid-row:2}
-```
-
-先ほど下ごしらえした CSS の効果で、`body` 直下の `div` は [CSS Grid Layout](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Grids) を用いて配置（`display:grid`）されることが指定されており、追加で投入した CSS のうち一番最初の行で、内部を行列それぞれ 2:1:6 4:1:4 の割合で分割（`grid:2fr 1fr 6fr/4fr 1fr 4fr`）するように指定しています。
-
-後の 3 行で先ほど追加した `div` 4 つをうまいこと配置します。要は `grid-column` と `grid-row` プロパティで列番号と行番号を指定しているだけです。スラッシュ（`/`）区切りで番号が 2 つ指定されている場合、それぞれ始端と終端を表します。
-
-
-
-おっと、下を斜め向きにするのを忘れていましたね。
-
-```css
-body>div:nth-child(1)>div:nth-child(3){transform:skewX(-.5rad)}
-body>div:nth-child(1)>div:nth-child(4){transform:skewX(.5rad)}
-```
-
-これで「大」の完成です。
-
-
-
-### 石
-
-先ほどの手順と要領はあまり変わりません。
-
-
-`div` を 6 つ入れて……
-
-```html
-<div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div></div>
-<div></div>
-<div></div>
-```
-
-次の CSS を投入します。
-
-```css
-body>div:nth-child(2){grid:1fr 3fr 1fr 1fr 2fr 1fr/repeat(4,1fr)4fr 1fr}
-body>div:nth-child(2)>div{grid-column:4/6}
-body>div:nth-child(2)>div:nth-child(3n){grid-row:3/7}
-body>div:nth-child(2)>div:nth-child(1){grid-column:1/7;grid-row:1}
-body>div:nth-child(2)>div:nth-child(2){grid-column:4;grid-row:2/5;transform:skewX(-.5rad)}
-body>div:nth-child(2)>div:nth-child(3){grid-column:3}
-body>div:nth-child(2)>div:nth-child(4){grid-row:3}
-body>div:nth-child(2)>div:nth-child(5){grid-row:6}
-body>div:nth-child(2)>div:nth-child(6){grid-column:6}
-```
-
-おっと、ここで `repeat` なるものが現れましたね。これは `repeat([繰り返す回数],[繰り返す内容])` を表しており、`repeat(4,1fr)` は `1fr 1fr 1fr 1fr` と*ほぼ*同義です。
-あとさらっと `:nth-child(3n)` なるセレクタも使っていますが、これは見た目通り $3n$ 番目にあたる要素にマッチするので、すなわちここでは 3 番目と 6 番目が対象となります。
-
-さて、こんな感じの「石」が生まれたら成功です。
-
-
-
-### 泉
-
-うーん、最大の関門……。
-先ほどまでと同じ要領で `div` を 12 個入れます。
-
-```html
-<div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div></div>
-<div></div>
-```
-
-追加するスタイルはこんな感じです。
-
-```css
-body>div:nth-child(3){grid:repeat(4,1fr 2fr)4fr 2fr/repeat(9,1fr)}
-body>div:nth-child(3)>div{grid-row:8}
-body>div:nth-child(3)>div:nth-child(-n+6){grid-row:2/7}
-body>div:nth-child(3)>div:nth-child(-n+4){grid-column:2/9}
-body>div:nth-child(3)>div:nth-child(6n+1){grid-column:5}
-body>div:nth-child(3)>div:nth-child(1){grid-row:1}
-body>div:nth-child(3)>div:nth-child(2){grid-row:2}
-body>div:nth-child(3)>div:nth-child(3){grid-row:4}
-body>div:nth-child(3)>div:nth-child(4){grid-row:6}
-body>div:nth-child(3)>div:nth-child(6){grid-column:9}
-body>div:nth-child(3)>div:nth-child(7){grid-row:7/11}
-body>div:nth-child(3)>div:nth-child(8){grid-column:4;grid-row:10}
-body>div:nth-child(3)>div:nth-child(9){grid-column:3;grid-row:9/11;transform:skewX(-.5rad)}
-body>div:nth-child(3)>div:nth-child(10){grid-column:7;grid-row:8/11;transform:skewX(.5rad)}
-body>div:nth-child(3)>div:nth-child(11){grid-column:1/4}
-body>div:nth-child(3)>div:nth-child(12){grid-column:8/10;transform:skewY(-.25rad)}
-```
-
-まず最初の `repeat` 部分ですが、このように複数の数値を入れても動いてくれます。すなわち `repeat(4,1fr 2fr)` は `1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr` のように展開されます。
-
-あと `:nth-child(-n+6)` のような記法は「最初の 6 要素」が対象になります。初見だとややこしいですね。
-
-さて、「泉」はこんな感じになりました。
-
-
-
-### す
-
-ひらがなになると若干ごちゃごちゃ感は解消するんですが、バランスよく配置するのが結構難しいです。`div` を 5 つ生やして……
-
-```html
-<div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div></div>
-```
-
-CSS をドン！
-
-```css
-body>div:nth-child(4){grid:2fr repeat(5,1fr)2fr/3fr repeat(3,1fr)3fr}
-body>div:nth-child(4)>div{grid-column:3}
-body>div:nth-child(4)>div:nth-child(1){grid-column:1/6;grid-row:2}
-body>div:nth-child(4)>div:nth-child(2){grid-column:4;grid-row:1/8}
-body>div:nth-child(4)>div:nth-child(3){grid-column:2;grid-row:4/7}
-body>div:nth-child(4)>div:nth-child(4){grid-row:4}
-body>div:nth-child(4)>div:nth-child(5){grid-row:6}
-```
-
-もはや重点的に解説することはありませんね。「す」完成です。
-
-
-
-### き
-
-先ほどと同じく `div` を 5 つぶち込んで……
-
-```html
-<div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div></div>
-```
-
-CSS もこんな感じに。
-
-```css
-body>div:nth-child(5){grid:repeat(3,4fr 3fr)3fr 3fr/1fr 1fr 3fr 1fr 2fr 1fr}
-body>div:nth-child(5)>div{grid-column:1/8}
-body>div:nth-child(5)>div:nth-child(1){grid-row:2}
-body>div:nth-child(5)>div:nth-child(2){grid-row:4}
-body>div:nth-child(5)>div:nth-child(3){grid-column:4;grid-row:1/7}
-body>div:nth-child(5)>div:nth-child(4){grid-column:2;grid-row:6/8}
-body>div:nth-child(5)>div:nth-child(5){grid-column:2/6;grid-row:8}
-```
-
-「き」は若干なんとも言えない感じがありますが、まあよしとしましょう。
-
-
-
-### 大石泉すき
-
-最終的にこんな感じになります。
-
-```html
-<!DOCTYPE html>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<style>
-:root{--size:14vw}
-body{align-items:center;display:flex;justify-content:space-evenly;margin:0}
-body,html{height:100%}
-body>div{display:grid;height:var(--size);width:var(--size)}
-body>div>div{background:#000;transform-origin:right top}
-body>div:nth-child(1){grid:2fr 1fr 6fr/4fr 1fr 4fr}
-body>div:nth-child(1)>div{grid-column:2;grid-row:3}
-body>div:nth-child(1)>div:nth-child(1){grid-column:2;grid-row:1}
-body>div:nth-child(1)>div:nth-child(2){grid-column:1/4;grid-row:2}
-body>div:nth-child(1)>div:nth-child(3){transform:skewX(-.5rad)}
-body>div:nth-child(1)>div:nth-child(4){transform:skewX(.5rad)}
-body>div:nth-child(2){grid:1fr 3fr 1fr 1fr 2fr 1fr/repeat(4,1fr)4fr 1fr}
-body>div:nth-child(2)>div{grid-column:4/6}
-body>div:nth-child(2)>div:nth-child(3n){grid-row:3/7}
-body>div:nth-child(2)>div:nth-child(1){grid-column:1/7;grid-row:1}
-body>div:nth-child(2)>div:nth-child(2){grid-column:4;grid-row:2/5;transform:skewX(-.5rad)}
-body>div:nth-child(2)>div:nth-child(3){grid-column:3}
-body>div:nth-child(2)>div:nth-child(4){grid-row:3}
-body>div:nth-child(2)>div:nth-child(5){grid-row:6}
-body>div:nth-child(2)>div:nth-child(6){grid-column:6}
-body>div:nth-child(3){grid:repeat(4,1fr 2fr)4fr 2fr/repeat(9,1fr)}
-body>div:nth-child(3)>div{grid-row:8}
-body>div:nth-child(3)>div:nth-child(-n+6){grid-row:2/7}
-body>div:nth-child(3)>div:nth-child(-n+4){grid-column:2/9}
-body>div:nth-child(3)>div:nth-child(6n+1){grid-column:5}
-body>div:nth-child(3)>div:nth-child(1){grid-row:1}
-body>div:nth-child(3)>div:nth-child(2){grid-row:2}
-body>div:nth-child(3)>div:nth-child(3){grid-row:4}
-body>div:nth-child(3)>div:nth-child(4){grid-row:6}
-body>div:nth-child(3)>div:nth-child(6){grid-column:9}
-body>div:nth-child(3)>div:nth-child(7){grid-row:7/11}
-body>div:nth-child(3)>div:nth-child(8){grid-column:4;grid-row:10}
-body>div:nth-child(3)>div:nth-child(9){grid-column:3;grid-row:9/11;transform:skewX(-.5rad)}
-body>div:nth-child(3)>div:nth-child(10){grid-column:7;grid-row:8/11;transform:skewX(.375rad)}
-body>div:nth-child(3)>div:nth-child(11){grid-column:1/4}
-body>div:nth-child(3)>div:nth-child(12){grid-column:8/10;transform:skewY(-.25rad)}
-body>div:nth-child(4){grid:2fr repeat(5,1fr)2fr/3fr repeat(3,1fr)3fr}
-body>div:nth-child(4)>div{grid-column:3}
-body>div:nth-child(4)>div:nth-child(1){grid-column:1/6;grid-row:2}
-body>div:nth-child(4)>div:nth-child(2){grid-column:4;grid-row:1/8}
-body>div:nth-child(4)>div:nth-child(3){grid-column:2;grid-row:4/7}
-body>div:nth-child(4)>div:nth-child(4){grid-row:4}
-body>div:nth-child(4)>div:nth-child(5){grid-row:6}
-body>div:nth-child(5){grid:repeat(3,4fr 3fr)3fr 3fr/1fr 1fr 3fr 1fr 2fr 1fr}
-body>div:nth-child(5)>div{grid-column:1/8}
-body>div:nth-child(5)>div:nth-child(1){grid-row:2}
-body>div:nth-child(5)>div:nth-child(2){grid-row:4}
-body>div:nth-child(5)>div:nth-child(3){grid-column:4;grid-row:1/7}
-body>div:nth-child(5)>div:nth-child(4){grid-column:2;grid-row:6/8}
-body>div:nth-child(5)>div:nth-child(5){grid-column:2/6;grid-row:8}
-</style>
-<div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div></div>
-<div><div></div><div></div><div></div><div></div><div></div></div>
-```
-
-大石泉すきと*書*かずに大石泉すきと*描*くことに成功しました。
-
-
-
-<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="acid-chicken" data-slug-hash="gObRGVR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="大石泉すき on HTML/CSS"><span>See the Pen <a href="https://codepen.io/acid-chicken/pen/gObRGVR">大石泉すき on HTML/CSS</a> by Acid Chicken (硫酸鶏) (<a href="https://codepen.io/acid-chicken">@acid-chicken</a>) on <a href="https://codepen.io">CodePen</a>.</span></p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
-
-## あとがき
-
-想定された使い方とは明らかに異なったスタイルで大石泉すきを描いてみました。やはり CSS で一次元配置をするなら Flexible Box、二次元配置をするなら Grid に限りますね。
+`@see <https://qiita.com/1ed873c7e9a8edd9c695d2fa438cc1ed/items/23d24401467301d431b9/revisions/4>`