はじめての板芸 #4 ― 絵を描いてみる

「はじめての板芸 #3 ― 文字に色をつける」の続きです。前回は文字の色や大きさ、背景色を変えました。今回は、キーボードで絵を描いてみます。

1. キーボードで絵を描くしくみ

ペンで絵を描くときは「ここからここまで線を引く」「ここに丸を描く」と手を動かします。キーボードで絵を描くときも同じことを、文字で指示します。

「横50、縦50の位置に、半径20の丸を描いてください」と書くと、ブラウザがその通りに描画してくれます。この書き方を「SVG（エスブイジー）」と呼びます。

SVGは、画面に図形を配置するための書式です。文字の色をstyleで指定したのと同じように、図形の形・位置・色を文字で指定します。

2. 丸を描く

前回のindex.htmlを開いて、<h1>の行の下に次の内容を追加してください。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#4a90d9" />
</svg>

Windows（メモ帳）の場合

1. hangeiフォルダの「index.html」を右クリックする
2. 「プログラムから開く」→「メモ帳」を選ぶ
3. h1の行の下に、上の内容を書き足す
4. 「ファイル」→「上書き保存」で保存する

Mac（CotEditor）の場合

1. hangeiフォルダの「index.html」を右クリックする
2. 「このアプリケーションで開く」→「CotEditor」を選ぶ
3. h1の行の下に、上の内容を書き足す
4. 「ファイル」→「保存」で上書き保存する

ブラウザで開き直すと、文字の下に青い丸が表示されます。

それぞれの指定はこういう意味です。

3. 四角を描く

丸の代わりに四角を描くこともできます。さきほどの<svg>...</svg>を、次の内容に書き換えてみてください。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#2d8659" />
</svg>

保存してブラウザで開き直すと、緑の四角が表示されます。

4. 丸と四角を組み合わせる

図形は、1つの<svg>の中にいくつでも並べられます。丸を3つ使って、簡単な顔を描いてみます。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#ffe0b2" />
  <circle cx="35" cy="40" r="5" fill="#333" />
  <circle cx="65" cy="40" r="5" fill="#333" />
  <rect x="35" y="62" width="30" height="4" rx="2" fill="#333" />
</svg>

保存してブラウザで開き直すと、丸い顔に目と口がついた絵が表示されます。

5. 自分だけのアイコンにする

ここまでのコードを元にして、自分だけのアイコンに変えてみてください。

数字を変えて保存し、ブラウザで開き直す。この繰り返しで、少しずつ形が変わっていくのが楽しいところです。正解はありません。好きな顔になればそれが完成です。

6. まとめ

• <svg>の中に図形を書くと、ブラウザが絵を描いてくれる
• <circle>で丸、<rect>で四角を配置する
• 位置（cx, cy, x, y）、大きさ（r, width, height）、色（fill）を数字で指定する
• 図形を複数並べると、組み合わせて絵になる
• 数字や色を変えて試すことで、自分だけのアイコンを作れる