コードブロックCode block

「コードブロック（Code block）」を実装してください。

## これは何か
プログラムの記述をそのままの形で見せる枠。空白と改行を保ち、等幅の書体で表示する。

## 使いどころ
- 手順書や技術記事で、書いたとおりに写してもらいたいとき
- 設定ファイルの中身を見せるとき

## 実装の要件
- pre > code。white-space: pre と等幅書体を指定する
- コピーボタンを添える
- 長い行を折り返すかどうかを決めておく。横スクロールは気づかれにくい
- コピーボタンが無いと、選択してコピーする手間がかかる
- 色分けを増やしすぎると読みにくい。3〜4色に抑える

## アクセシビリティの要件
- pre と code を組で使う。pre だけだと「コード」と伝わらない
- 横スクロールさせるなら tabindex="0" を付けてキーボードでもスクロールできるようにする。role="region" を足すときは aria-label で何のコードかを名前にする
- コピーボタンには「コードをコピー」と名前を付ける
- 色だけで意味を分けない。色覚に依存しない読み方ができるようにする

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<pre class="x-code-block" tabindex="0"><code>.button {
  min-height: 44px;
}</code></pre>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-code-block,
.x-code-block *:not([class*="fa-"]),
.x-code-block *:not([class*="fa-"])::before,
.x-code-block *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-code-block {
  width: 216px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  overflow-x: auto;
}
.x-code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.75;
  color: #28303d;
  white-space: pre;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。