# CSS Q&A
## 画像svgの色を変えたい場合

画像またはアイコンの大きさに見合ったdivなりを用意する
又は二次要素beforeに空コンテンツを用意（位置だけ合わせてくださいね）
↓
そのdivまたはcontentのcssで以下のコードを入力する

background-color:｛画像に指定したい色｝;
mask-image:url({画像});
mask-size:contain;
mask-repeat:no-repeat;

更に、background-imageで背景画像を指定すれば、
そのsvgのところだけ透過されるという技巧もある。

### 推奨！！

**アイコン単体の場合**はdivで囲い、

**何か文章の前後に画像を同じ大きさで入れたい場合**は疑似要素

## 画像を画面いっぱいに表示させたい場合

背景画像を設定したdivに、

min-height: 100vh;

と設定する

画像のサイズを画面に合わせたい場合は、

background-size: cover;

と設定。

### 単位のvhについて
hはheightのh、vはビューポート。
vhとは、一画面の高さに対する割合。
つまり、100vhは、一画面の高さの100%であることを表している。
同様に、100vwは、一画面の幅(w = width)を表す。
%より確実なので、積極的に使おう。

## 縦横中央に表示させたい場合

<div class='outer'>
    <div class='inner'>
        <p>I wanna place at center.</p>
    </div>
</div>

以上のタグで考える。

- ### 1