HTML、CSSをサボってきた駆け出しのバックエンドエンジニアは読め‼︎CSSの基本

# CSSをサボってきたバックエンドエンジニアへ
自分はバックエンドエンジニアを目指してきて、HTMLやCSSをサボってきました。
さすがにこの知識レベルはエンジニアとしてまずいと思ったので、
その時のことを記事に書いています。

# CSSのセレクタとプロパティ
CSSの書き方の基本は以下の書き方です。

```css
どこに対して{
  どの項目を:何をする；
}
```
用語に変換すると

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

具体的にはこんな感じです。
```css
div{
 font-size:30px;
}
```
みたいな感じです。divに対して、フォントのサイズを30pxにするという意味です。

# CSSの指定方法
### 複数のセレクターを指定
以下のやり方でできます。***カンマを区切って指定***します。
```css
.test1,.test2{
    font-size:50px;
}
```

### 階層構造のあるセレクタへ指定

```html
 <div class ="test1">
    <div class = "text1">テスト‼︎</div> 
 </div>

 <div class ="test2">
    <div class = "message2">テスト2‼︎</div> 
 </div>
```
この場合は***スペースを空けて指定***します。
```css
.test1 .message {
    font-size:50px;
}
```

違う例だと以下の感じです。
```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/main.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="dog1">犬</div>
    <div class="lion1">ライオン</div>
  </body>
</html>
```

```main.css
div {
  font-size: 50px;
}

.dog1,.lion1 {
  color: red;
}
```
文字が大きい犬、ライオンの文字が赤色で出てきます。

```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/main.css" />
    <title>Document</title>
  </head>
  <body>
   <div class="cat1">
      <div class="message">猫</div>
    </div>
    <div class="bird1">
      <div class="message">鳥</div>
    </div>
  </body>
</html>
```

```main.css
div {
  font-size: 50px;
}

.cat1 .message {
  color: red;
}
```
これだと上の猫のみが赤色になります。


# Sassとは
CSSの拡張言語で、CSSを直接書くよりも書きやすくなります。

- セレクタを階層(ネスト)構造で指定
- 変数を使用
- コードを流用

CSSとSassで比べてみましょう。
まずは***CSS***からです。
```main.css
.line1 {
  font-size: 32px;
}

.line1 .message1 {
  color: yellow;
}
```
次に***Sass***です。

```sass
.line1
  font-size: 32px

  .message1
    color: yellow
```
⚫︎補足
***main.cssをmain.scssに変えればSassになります。***

### Sassを実際に使ってみた
使い方はこちらを参考にしてください。

https://webst8.com/blog/sass-scss/


```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/main.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="line1">
      <div class="message1">ポチ</div>
    </div>
    <div class="line2">
      <div class="message2">ピーコ</div>
    </div>
  </body>
</html>
```

```main.scss
.line1 {
  font-size: 32px;
  .message {
    color: yellow;
  }
}
```
```main.css
.line1 {
  font-size: 32px;
}

.line1 .message1 {
  color: yellow;
}
/*# sourceMappingURL=main.css.map */

.line2 {
  color: aqua
}
```
```main.css.map
{
    "version": 3,
    "mappings": "AAAA,AAAA,MAAM,CAAC;EACL,SAAS,EAAE,IAAI;CAChB;;AACD,AAAA,MAAM,CAAC,QAAQ,CAAC;EACd,KAAK,EAAE,MAAM;CACd",
    "sources": [
        "main.scss"
    ],
    "names": [],
    "file": "main.css"
}
```

# 必要なプロパティ
よく使うプロパティを以下に記述します。colorとfont-sizeは今回は省略します。

### background
backgroundでよく使いそうなものです。

・```background-color```：***背景色***
・```background-image```：… ***画像など***
・```background-size```：…***背景のサイズ***

backgroundの使い方を見ていきます。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <p class="text">独学で<span>プログラミング学習</span></p>
  </body>
</html>
```

```main.css
.text{
  background:red;
}

.text span{
  background:blue;

}
```
![スクリーンショット 2024-04-11 12.17.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/7c5617d0-70b0-0c46-4c73-cfbbd3905459.png)


### height、width
要素の大きさ(高さと横幅)を変えるプロパティです。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
```

```main.css
.box {
  background:purple;
  width:300px;
  height:300px;
}
```

![スクリーンショット 2024-04-11 12.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/013c81eb-325f-1b9b-a452-ddbe5a90cb78.png)

### borderとborder-radius
- ***borderプロパティ***
線のスタイル、線の太さ、線の色をまとめて指定するCSSのプロパティです。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <span class="text">Web制作</span>
    <span class="btn">ボタン</span>
  </body>
</html>
```

```main.css
.text {
  border-bottom:1px solid red;
}

.btn {
  border:1px solid　black;
}
```
挙動はWeb制作ボタンのWEb制作の下に赤い線が書かれます。

- ***border-radius***
border-radiusプロパティは、要素の角を丸くすることができます。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

```

```main.css
.box {
  width: 200px;
  height: 200px;
  background: green;
  border-radius:10px 100px  10px 100px;
}
```
![スクリーンショット 2024-04-11 12.49.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/6662b501-5ead-b87e-fc31-1e11c8960cb2.png)

### padding
***内側の余白部分を調整するプロパティ***です。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="box">
      エンジニア
    </div>
  </body>
</html>
```

```main.css
.box {
  width: 300px;
  border: solid 2px black;
  background: white;
  color: black;
  padding:20px 50px;
}
```

![スクリーンショット 2024-04-11 12.50.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/f165ad8f-5fc3-1d1f-4abb-892ce9c540e7.png)

### marginとmargin 0 auto
- margin
***要素の外側の余白を作る時に使うプロパティ***です。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="boxs">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>
```

```main.css
.boxs {
  display:flex;
}

.box {
  background: white;
  border: 2px solid black;
  width: 100px;
  height: 100px;
  margin-right:20px;
}
```
![スクリーンショット 2024-04-11 12.56.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/677f424d-958f-7c8e-9940-ecbabfbbeed4.png)


- ***margin 0 auto***
***ブロック要素を中央揃えにする時に使うCSS***です。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
```


```main.css
.boxs {
  width:500px;
  border:2px solid black;
}

.box {
  background:white;
  border:2px solid black;
  text-align:center;
  height:100px;
  width:100px
  margin:0 auto;
}
```

### display flexで要素横並び
上のコードでも***display flex***は使われていました。
displayプロパティとは、要素の表示形式を指定するプロパティです。

そこで、***flex box（フレックスボックス）***というものがありますが、
***CSSのレイアウト技法で、HTMLブロックを横並び***にできます。

### justify-contentとalign-items
-  justify-content
***flexアイテムの配置設定を行なうプロパティ***で、フレックスボックス（display:flex）を指定した親要素に対する子要素のことをflexアイテムといい、***display:flexが指定されていない状態でjustify-contentは使えない***です。

- ***align-items***
***flexアイテムの縦軸の配置を調整するCSSのプロパティ***で、上下のどこで揃えるのかを指定できます。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="boxs">
      <div class="box"></div>
    </div>
  </body>
</html>
```

```main.css
.boxs {
  width: 300px;
  height: 300px;
  background: blue;
  display: flex;
  justify-content:center;
  align-items:center;
}

.box {
  width: 100px;
  height: 100px;
  background: black;
}
```

![スクリーンショット 2024-04-11 13.06.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/4a6976cc-7953-b66e-8720-95b24a687213.png)

### position
***要素の配置を指定する時に使うプロパティ***です。
positionプロパティでは、```relative」、absolute、fixed```です。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>HTML、CSS学習</title>
    <meta name="description" content="HTML、CSSの学習"/>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="big_box">
      <div class="box"></div>
    </div>
  </body>
</html>
```

```main.css
.big_box {
  width: 300px;
  height: 300px;
  background: white;
  border: 1px solid black;;
  position: relative;
}

.box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: black;
  position:absolute;
  bottom:50px;
  right:50px;
}
```

![スクリーンショット 2024-04-12 1.54.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/deae42b2-d5a9-0917-48af-861aa42a1b9c.png)


# 有益Youtubeと書籍
良かったらこちらの動画で学んでみてください。

https://www.youtube.com/watch?v=GXu-7d3yA_U&t=1929s

書籍はこちらでいろんなテクニックが記載されています。

https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%81%AE%E3%80%8C%E5%BC%95%E3%81%8D%E5%87%BA%E3%81%97%E3%80%8D%E3%82%92%E5%A2%97%E3%82%84%E3%81%99-HTML-CSS%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E5%BC%B7%E5%8C%96%E6%9B%B8-%E8%8D%89%E9%87%8E-%E3%81%82%E3%81%91%E3%81%BF/dp/4295202088/ref=asc_df_4295202088/?tag=jpgo-22&linkCode=df0&hvadid=553968464768&hvpos=&hvnetw=g&hvrand=5125844347323235667&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009217&hvtargid=pla-1464440036538&psc=1&mcid=817e309c57233f9687b5edf19e513fc8&th=1&psc=1

https://books.mdn.co.jp/books/3221303016/?page=2&direct=1

# 資料

https://ninjacode.work/course/CSS