태그의 기술 방법으로 헤매면, 레퍼런스를 읽는다↓
CSS 빠른 참조

기본 구조

sample.css

body {
  font-family: "Avenir Next";
}

li {
  list-style: none;
}

.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}

.header-logo {
  float: left;
  font-size: 36px;
  padding: 20px 40px;
}

.header-list li {
  float: left;
  padding: 33px 20px;
}

.main {
  padding: 100px 80px;
}

.copy-container h1 {
  font-size: 140px;
}

.copy-container h2 {
  font-size: 60px;
}

.copy-container span {
  color: #ff4a4a;
}

.contents {
  height: 500px;
  margin-top: 100px;
}

.section-title {
  border-bottom: 2px solid #dee7ec;
  font-size: 28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
}

.contents-item {
  float: left;
  margin-right: 40px;
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}

.contact-form {
  padding-top: 100px;
}

/* inputとtextareaのCSSを指定してください */
input, textarea{
  width: 400px;
  margin-top: 10px;
  margin-bottom: 30px;
  padding:20px;
  font-size: 18px;
  border: 1px solid #dee7ec;
}

/* contact-submitのCSSを指定してください */
.contact-submit{
  background-color: #dee7ec;
  color: #889eab;
}

.footer {
  background-color: #2f5167;
  color: #fff;
  height: 120px;
  padding: 40px;
}

.footer-logo {
  float: left;
  font-size: 32px;
}

.footer-list {
  float: right;
}

.footer-list li {
  padding-bottom: 20px;
}

기본 문법

태그를 지정할 때는 점을 붙이지 않는다body {
font-family: "Avenir Next";
}
클래스를 지정할 때는 점을 붙인다.footer-list {
float: right;
}

문자, 배경

font-size : 문자 크기
color: 문자 색상
background-color: 배경색
font-family : 글꼴 유형

사이즈

height : 높이
width: 수평 길이

padding · margin

인용; htps //w w.ぇbp 로후 ゜시오 l. jp / 세 t-c s-r r s-pap g-koo l- t-t cks /

padding: 테두리 안쪽
border: padding과 margin 사이
margin: 테두리 외부
padding: 10px（上） 10px（右） 10px（下） 10px（左）;margin: 10px（上下） 10px（左右）;padding-top(１箇所指定): 10px ;border: 1px(太さ) solid（線の種類） #dee7ec（色）;

float

세로로 늘어서 있는 것을 일렬로 옆으로 늘어놓을 때에 사용

float: right;
float: left;

지정 방법

클래스 "footer-list"직후의 목록.footer-list li {
}