【HTML/CSS】縦のヘッダーを制作する

# 1. はじめに
HTML/CSSを勉強して1ヶ月も経っていない人間による備忘録です。
間違い、冗長なコードがあります。
最適方法やアドバイスなどコメントいただけると幸いです。

## 1-1. この記事のやりたいこと
* ヘッダーの作成
* ナビゲーションを作成する
* `<ul><li>`を用いる
* リストの「・」をなくす
* 疑似クラス`:last-child`を使う
* ヘッダーを固定する
![ヘッダー_完成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/bb500092-3cb2-f391-9610-51a2bacc4e65.png)

## 1-2. 得た知識
* [ブロック要素の上下左右の中央寄せ](#2-1-3-ポイント)
* [border-radiusで正円を作る](#2-1-3-ポイント)
* [リストの「・」を消す方法](#2-2-3-ポイント)
* [最後の要素だけにスタイルを適用](#2-3-3-ポイント)
* [ヘッダーを固定する方法](#2-4-3-ポイント)
* [絶対配置する際の親要素は「position:fixed;」でも可能](#2-4-3-ポイント)

## 1-3. 記事作成までにやったこと
Progate：HTML/CSS、一周
Udemy：ちゃんと学ぶ、HTML/CSS + JavaScript、セクション3まで
HTML&CSSとWebデザインが1冊できちんと身につく本：流し読み
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 ：流し読み

## 1-4. 開発環境
ブラウザ　：GoogleChrome（100.0.4896.88）

スクリーン解像度：1920×1080

## 1-5. この記事の注意事項
・わかりやすいよう
　background-colorやborderなどを指定していますが、
　目的以外のコードは割愛しています。

・前回からコードの変更がないことろも割愛しています。

ってことで、それでは作っていくっ！！

# 2. 実装
<!-- -------------------2-1------------------- -->
## 2-1. ロゴを作成する
### 2-1-1. やりたいこと
* 高さ：70px
* 幅　：70px
![ヘッダー_ロゴ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/cac85c6a-243b-2395-5d55-a44cfe6af86b.png)



### 2-1-2. コード
<details><summary>HTML</summary>

```markdown:HTML
  <header class="header-wrapper">
    <h1 class="header-logo">
      <a class="header-logo-link" href="#">
        <img class="header-logo-img" src="./imgs/no_image_square.jpg">
      </a>
    </h1> 
  </header>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .header-wrapper {
  height: 100vh;
  width: 120px;

  margin: 0 auto;
}

.header-logo {
  height: 120px;
  width: 120px;

  display: flex;
　align-items: center;
  justify-content: center;
}

.header-logo-link {
  height: 70px;
  width: 70px;
}

.header-logo-img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
```
</details>

### 2-1-3. ポイント

:::note
**ブロック要素の上下左右の中央寄せ**
display: flex;
align-items: center;
justify-content: center;
:::

:::note
**border-radiusで正円を作る**
border-radius: 50%;
:::


### 2-1-4. 参考文献
[ブロック要素の上下左右の中央寄せ](https://www.trevo-web.com/tech/css%E3%81%A7%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E8%A6%81%E7%B4%A0%E3%82%84%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E8%A6%81%E7%B4%A0%E3%82%92%E4%B8%AD%E5%A4%AE%E5%AF%84%E3%81%9B%E3%81%99)
[CSSのborder-radiusを極める！円・角丸自在に実装](https://zero-plus.io/media/border-radius/)

<!-- -------------------2-2------------------- -->
## 2-2. ナビゲーションを作成する
### 2-2-1. やりたいこと
![ヘッダー_リスト.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/1dbfbe09-2cbc-116c-a59e-632a24f049cc.png)


### 2-2-2. コード
<details><summary>HTML</summary>

```markdown:HTML
    <nav>
      <ul class="header-nav-list">
        <a class="header-nav-link" href="#">
          <li class="header-nav-item">テキスト</li>
        </a>
　　</nav>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .header-nav-list {
  list-style: none;
}

.header-nav-link {
  color: black;
  text-decoration: none;
}

.header-nav-item {
  height: auto;
  width: 100%;

  padding: 20px 0 20px 30px;
}
```
</details>

### 2-2-3. ポイント

:::note
**リストの「・」を消す方法**
list-style: none;
:::

### 2-2-4. 参考文献
[【html/CSS】ul liの「・」点を消す方法](https://csshtml.work/list-style-none/)

<!-- -------------------2-3------------------- -->
## 2-3. リストの最後だけ一番下に配置する
### 2-3-1. やりたいこと
![ヘッダー_リスト最後下.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/1910ae5f-ace1-73ac-3cda-110a291da696.png)


### 2-3-2. コード
<details><summary>CSS</summary>

```markdown:CSS
.header-wrapper {
  position: relative;
}

.header-nav-link:last-child {
  width: 100%;

  position: absolute;
  bottom: 0px;
} 
```
</details>

### 2-3-3. ポイント

:::note
**最後の要素だけにスタイルを適用**
:last-child
:::

:::note alert
**なぜ幅を指定する必要があるのか？後日調査**
width: 100%;
:::


### 2-3-4. 参考文献
[【CSS】最初の要素、最後の要素だけにスタイルを適用したい！](https://site-manage.net/archives/2912#last-child)

<!-- -------------------2-4------------------- -->
## 2-4. ヘッダーを固定する
### 2-4-1. やりたいこと
![ヘッダー_固定.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/ede95cd8-efd9-6e70-4eaf-1f17c3fa2f94.png)


### 2-4-2. コード
<details><summary>CSS</summary>

```diff_markdown:CSS
 .header-wrapper {
- position: relative;
+ position:fixed;
}
```
</details>

### 2-4-3. ポイント

:::note
**ヘッダーを固定する方法**
position:fixed;
:::

:::note
絶対配置する際の親要素は「position:fixed;」でも可能
:::


### 2-4-4. 参考文献
[【初心者でもわかる】HTMLとCSSだけで上部固定ヘッダーを作る方法（position: fixed;）](https://qiita.com/7note/items/6bcadabe1667919bc26c)
[CSSのpositionを総まとめ！absoluteやfixedの使い方は？](https://saruwakakun.com/html-css/basic/relative-absolute-fixed)


# 3. まとめ
以下の項目を取り組んだ。
* ヘッダーの作成
* ナビゲーションを作成する
* `<ul><li>`を用いる
* リストの「・」をなくす
* 疑似クラス`:last-child`を使う
* ヘッダーを固定する

## 3-1. 得た知識
* [ブロック要素の上下左右の中央寄せ](#2-1-3-ポイント)
* [border-radiusで正円を作る](#2-1-3-ポイント)
* [リストの「・」を消す方法](#2-2-3-ポイント)
* [最後の要素だけにスタイルを適用](#2-3-3-ポイント)
* [ヘッダーを固定する方法](#2-4-3-ポイント)
* [絶対配置する際の親要素は「position:fixed;」でも可能](#2-4-3-ポイント)