CSS란?

HTML을 장식해 준다. (문자의 색을 바꾸거나, 크기를 바꾸는 등)
HTML과는 다른 파일에 기술한다.
요소 이름에 어떤 장식을 할 것인가를 지정해 간다
HTML에서는 요소 이름이지만 CSS에서는 선택기라고합니다.

쓰기 방법 설명

セレクタ {
  プロパティ: 値;
}

쓰기.css

h1 {
  color: red;
}

셀렉터・・・h1
속성 ... color
값 ... red

셀렉터에는 HTML 장식하고 싶은 요소를 입력.
→ h1을 장식하십시오! 선언
속성은 선택기에 어떤 장식을 주문하고 싶습니까?
→ color를 지정하므로 h1 문자의 색상을 변경하십시오!
값은 속성 주문에 대해 어떻게하고 싶은지 대답합니다.
→ 문자의 색은 red로 부탁드립니다!

NG 기입 방법.css

h1 {color: red;}

위와 같은 쓰기는 NG입니다

만약 h1 에 장식하고 싶은 주문이 문자의 색과 문자의 크기와・・・라고 복수의 주문이 되어 버리면 중복되어 버려 코드가 보기 어려워집니다.
그래서 셀렉터 뒤의 { 로 반드시 개행하는 것.

그리고는・・・
재산의 앞은 들여쓰기한다.
속성 끝에 : 를 입력합니다.
값의 끝에 ; 를 입력합니다.

color

문자 색상 변경
16진수의 컬러 코드로 색 지정(#ff0000,#008000등)
주요 색이면 직접 색명을 지정해도 표시된다 (red,green 등)

덧붙여서 컬러 코드는 원색대사전를 추천

예.html

<h1>16進数で指定した赤色の文字だよ</h1>
<p>直接redと色を指定した赤色の文字だよ</p>

예.css

h1 {
  color: #ff0000;
}

p {
  color: red;
}

웹
↓


둘 다 빨간색 문자가 지정되었습니다

font-size

문자 크기 변경
단위는 픽셀(px)이나 %지정(브라우저의 문자 기준의 몇%)등이 있다

예.html

<h1>文字の大きさを10pxにしてみました</h1>
<p>文字の大きさを20pxにしてみました</p>

CSS를 지정하지 않으면 일반적으로 이런 방식으로 웹에 표시됩니다.
↓


CSS로 문자의 크기를 지정하면 ...

예.css

h1 {
  font-size: 10px;
}

p {
  font-size: 20px;
}

웹
↓


문자의 크기가 바뀌었습니다!

font-family

문자 유형을 지정할 수 있습니다.
font-family: 글꼴 이름;
글꼴 이름에 공백이 있으면 ""로 묶습니다.

예.css

h1 {
  font-family: serif;
}

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

웹
↓

background-color

배경색 지정

예.css

h1 {
  background-color: #ff0000;
}

p {
  background-color: #ffff00;
}

웹
↓

width,height

width는 가로 너비를 지정합니다.
height는 높이를 지정합니다.
단위는 픽셀(px)이나 %지정(브라우저의 문자 기준의 몇%)등이 있다

예.css

img {
  width: 500px;
  height: 100px;
}

웹
↓


엉망이 된 병아리가되었습니다
그건 그렇고, 원래 크기는 여기
↓

클래스

예.html

<ul>
  <li>りんご</li>
  <li>いちご</li>
  <li>メロン</li>
</ul>

예.css

li {
  color: red;
}

위와 같이 설정하면 웹에서
↓


라고 표시된다.
하지만 알기 쉽도록 멜론만 녹색으로 표시하고 싶다.
이 일부 요소에만 CSS로 장식하고 싶을 때는 class 를 사용한다.

우선 HTML을 ...

예.html

<ul>
  <li>りんご</li>
  <li>いちご</li>
  <li class="green-fruits">メロン</li>
</ul>

이렇게 기입.
속성명을 class 로, 속성치를 green-fruits 로 한다 (속성치에 ""를 붙여 잊지 않는 것!)
class 를 사용하면 속성치가 클래스명이 됩니다.
클래스명은 좋아하게 결정할 수 있습니다만, 알기 쉬운 이름을 붙이는 편이 좋습니다.

예.css

li {
  color: red;
}

.green-fruits {
  color: green;
}

웹을 확인하면 ...
↓


멜론만 녹색이 되었습니다!

CSS를 작성하는 방법은

.クラス名 {
　プロパティ: 値;
}

됩니다.
서두에 . 를 붙여 계속해 클래스명을 기입하면 후의 쓰는 방법은 셀렉터의 때와 같습니다.