実装されたスクリーン

コード#コード#

CSS起動設定!
基本的な色、フォント、サイズは共通のプロパティなので、複数の部分で再利用しやすいように、まず定義します.この部分は今回のクローン符号化で得られる重要な内容の一つだと思います.

:root {
  /* color */
  --white-color: #fff;
  --black-color: #140a00;
  --blue-color: #045fd4;
  --red-color: #ff0000;
  --grey-dark-color: #909090;
  --grey-light-color: #e0e0e0;
/* size */
  --padding: 12px;
  --avatar-size: 36px;
/* font size */
  --font-large: 18px;
  --font-medium: 14px;
  --font-small: 12px;
  --fint-micro: 10px;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* 너비 계산시 padding, marign 포함 계산됨 */
}
body {
  font-family: Roboto;
}

Header
上のルートで定義した内容を使用する場合、color:var(--white-color);活用方法.

/* Header */

header {
  display: flex;
  justify-content: space-between;
  padding: var(--padding);
  background-color: var(--black-color);
  color: var(--white-color);
}

header .logo {
  font-size: var(--font-large);
}

header .logo i {
  color: var(--red-color);
}

header .icons .fa-search {
  margin-right: var(--padding);
}