[CSS] アイコンフォントとCSSでFCバ○セロナ風のユニフォームを表現する（画像未使用）

## はじめに
アプリの開発段階で作成したパーツの一部を抜粋し、Qiita用に編集して紹介します。今回はメジャーなアイコンフォントである**[FontAwesome（以降、ＦＡ）](https://fontawesome.com/)**と**CSS**のみで、サッカー好きなら誰でも知ってるあの有名なチームのユニフォームを表現してみました。

モチーフは2019/20シーズンのホーム・ユニフォームです。クラブ史上初のチェック柄ということで話題となったもので、和風な表現ではあの特別な刀で鬼を退治する大ヒットアニメでもおなじみの**市松模様**というやつです。フォント扱いなので拡大縮小してもデザインは崩れませんし、シャギーが出ることもないです。

## ＦＡの読み込み
**ＣＤＮ**前提で、以下のコードを`<head></head>`に記述します。ＦＡにメールアドレスを登録すれば、読み込み用のコードが発行されますので、`{your_key}`部分は環境に合わせて変更してください。[^1]

```HTML: FontAwesomeの読み込み設定
<script src="https://kit.fontawesome.com/{your_key}.js"></script>
```

##ＣＳＳの設定
ユニフォームのベースとなるアイコンは**ＦＡ**の`Tshirts`を使用しています。フォント扱いなので単色の色変更なら、`color: 色設定;`で簡単に設定できます。結果がわかりやすいよう、便宜的に`white`で設定しています。

```HTML: Sample01.html
<div class="preview">
  <i class="fas fa-tshirt clip-others-barca-01"></i>
</div>
```

```CSS: Sample01.css
body {
  margin: 0;  
  padding: 0;
  font-size: 16px;
  color: #444;
  background-color: #fafafa;
}

.preview{
  padding: 10px 0;
  font-size: 25em;
  display: flex;
  justify-content: center;
}

.clip-others-barca-01 {
  color: white;
}
```

![01- 0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111613/8ec9813b-02ff-a03d-4c6f-2d77738e2bd3.png)
01: Sample01の結果

では、ユニフォームの柄を描くにはどうするのか。端的に説明すれば、**backgroundに複数の背景を描画しレイヤー状に重ね、ユニフォームの形でマスクする**という具合です。

### 1-linear-gradientで市松模様を描画
`background-image`の最下層に市松模様を描画します。なお、市松模様の描画方法は[7noteさんの記事](https://qiita.com/7note/items/328761825801b82ef585)を参考にしました。

```CSS: Sample02.css
.clip-others-barca-01 {
  color: white;
  background-color: #154284;
  background-image:
    linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d),
    linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d);
  background-position: 0 0,30px 30px;
  background-size: 60px 60px;
}
```

![02- 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111613/a2805d2e-be80-fa1f-3371-029ea01116b7.png)
02: Sample02の結果

### 2-background-clipで背景をマスク処理
後の作業がしやすいように、`background-clip`で背景をマスク処理します。これによりユニフォーム内のみ柄が表示されるようになります。この際、`clip-others-barca-01`の`color: white;`は削除します。

```HTML: Sample02.html
<i class="fas fa-tshirt clip-others-barca-01 text-clip"></i>
```

```CSS: Sample03.css
.text-clip {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.clip-others-barca-01 {
  background-color: #154284;
  /* 省略 */
}
```

![03- 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111613/9b46e634-05c9-d858-225e-ebeadad03afd.png)
03: Sample03の結果

### 3-市松模様のサイズと位置を調整
このままでは模様が小さすぎますし、拡大縮小に耐えられませんので、その辺りの修正をします。

```CSS: Sample04.css
.clip-others-barca-01 {
  /* 省略 */
  background-position: 0.25em 0.1em,0.1em 0.25em;
  background-size: 0.3em 0.3em;
}
```

![04- 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111613/93785d1c-049a-66c5-d241-7dbd466d3691.png)
04: Sample04の結果

### 4-ボディと袖の切替部分を描画
ボディと袖の切替部分は微妙にカーブを描いていますので、`radial-gradient`で楕円を描きます。中心を透過させ、周囲を青にして、市松模様の上に配置すればボディ部分に市松模様が残るイメージです。ユニフォームの下部を中心にしてサイズ調整します。

```CSS: Sample05.css
.clip-others-barca-01 {
  background-color: #154284;
  background-image:
    radial-gradient(ellipse at 50% 100%, transparent 50%, #154284 50%),
    linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d),
    linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d);
  background-position: 50% 67%,0.25em 0.1em,0.1em 0.25em;
  background-size: 100% 175%,0.3em 0.3em,0.3em 0.3em; /* ←背景ごとの記述に修正 */
}
```

![05- 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111613/50a038c0-6112-1be9-69ad-96effc0337d2.png)
05: Sample05の結果

### 5-ドロップシャドウの追加と微調整
上記でほぼ完成ですが、襟部分に赤が少し見えていますので、これを隠します。[^2]

次に、ドロップシャドウを当てたユニフォームを別に用意し、背景として重ねて表示させます。なお、[ＦＡ公式のスタッキング指定](https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons)では`background-clip`の効果が消えてしまいましたので、自前のものを当てています。

```HTML: Sample03.html
<div class="preview">
  <span class="stack">
    <i class="fas fa-tshirt dropshadow"></i>
    <i class="fas fa-tshirt clip-others-barca-01 stack-chld text-clip"></i>
  </span>
</div>
```

```CSS: Sample06.css
.stack {
  margin: 0 0.5rem;
  height: 1em;
  line-height: 1em;
  position: relative;
}

.stack-chld {
  position: absolute;
  top: 0;
  left: 0;
}

.dropshadow {
  text-shadow:
    rgba(6, 24, 44, 0.4) 0px 0px 0px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px;
}

.clip-others-barca-01 {
  background-color: #154284;
  background-image:
    linear-gradient(#154284 10%, transparent 10%),
    radial-gradient(ellipse at 50% 100%, transparent 50%, #154284 50%),
    linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d),
    linear-gradient(45deg, #cd122d 25%, transparent 25%, transparent 75%, #cd122d 75%, #cd122d);
  background-position: 0, 50% 67%, 0.25em 0.1em, 0.1em 0.25em;
  background-size: 100%, 100% 175%, 0.3em 0.3em, 0.3em 0.3em;
}

```

![06- 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111613/eb680fd0-85e3-4d66-ec5d-a71c930b346d.png)
06: FCバ○セロナ風ユニフォーム

以上で完成です。

## 最後に
ちなみに使用色は[日本語公式サイト](https://www.fcbarcelona.jp/)を解析しました。気が向けば他にも作成してみようかと思います。

なお、アウェー・ユニフォームを加えたものを[JSFiddle](https://jsfiddle.net/STSHISHO/jz9a5t4e/)及び[CODEPEN](https://codepen.io/STSHISHO/pen/NWbwRea)にて公開しています。

### [参考]
+ [複数の背景画像の利用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+ [背景画像の拡大縮小 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Scaling_background_images)
+ [CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+ [background-clip - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/background-clip)
+ [【初心者でもわかる】市松模様（いちまつもよう）やチェック柄をCSSで再現](https://qiita.com/7note/items/328761825801b82ef585)
+ [背景に文字の切り抜きができるbackground-clipの使い方](https://blanche-toile.com/web/css3-background-clip)

[^1]: 今回はソースを公開していますので、バージョン指定で読み込む方法を採用しています。そのため、時間経過の都合で正常表示されなくなることがあります。
[^2]: 市松模様のサイズ調整で対応しようとしましたが、非常に細かな値になるため、シンプルに青と透過のボーダーを乗せました。