HTML/CSS:立体的なカード状のデザイン

#【概要】

1.結論

2.どのようにコーディングするか

3.開発環境

補足

#1.結論
CSSで、box-shadow、 border、margin、border-radiusを使用する！

#2.どのようにコーディングするか

<div class="card">
<div>

  border: 1px solid #333333; /* ---❶*/
  margin: 5px 20px; /* ---❷*/
  border-radius: .10rem;　/* ---❸*/
  box-shadow: 20px -10px 25px 0 #d9d9d9;　/* ---❹*/
}

❶：border : [線幅] [線の種類] [色] ;と設定できます。線の種類はdashedは波線、doubleは二重線等々の指定ができます。色は#333333でもrgba(0,0,0,0(➡︎透明度設定可能)でも可能です。

❷：これはいわずもがなで、外側の余白指定です。複数のカードを用意するときはこれで間隔を空けます。

❸：border-radiusはカードの四隅を丸くしてくれます。marginのように1つの数値だと四隅に同じ数値を適用しますし、border-radius:10px 20px 30px 40px/20px 30px 40px 50px;と書くと/を境目に前者は水平方向の半径、後者は垂直方向の半径を左上・右上・左下・右下という順で設定できます。.10は0.10を示しており、remはhtml要素に対して大きさを変化させています。

❹：box-shadowは 要素に影をつけます。box-shadow： 水平方向 垂直方向 [ぼかし] [影の広がり具合] [色] [inset];となっています。最後のinsetは内側に影をつける仕様です。

自分が作ったものは下記のようになります！

#3.開発環境
HTML5
CSS3

#補足
レスポンシブ対応で、横幅が縮まった際にカードを2列から1列にした場合はメディアクエリとflex-wrap: wrapを使用することで単一行または複数行に押し込むことができます。

@media screen and (max-width: ***px) {
   flex-wrap: wrap;
}

また、`rem`と`em`の違いはこちらになります。 参考URL： CSS3のremとemの違いについて