imdb clone Part2　4 ヘッダー作成 2/2 タイトルイメージを作成　レイアウトを整理

# 概要

目次

https://qiita.com/RYA234/private/045f3d2c03684572d3f9

今回はヘッダーのロゴを追加します。
ロゴを右側、その他を左側に配置します。
下図は実装後の様子です。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/13606fe1-ff8a-eba1-4244-a3423538289f.png)


# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント
1.ヘッダー左側にHome　About　右側にロゴを追加する。cssのflex justify-betweenを使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/bb655f3d-7f82-d83d-3dc2-ae8b09cbbaec.png)




2.ディスプレイサイズ640px以下の場合cloneの文字は非表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/5903795e-6c9d-0ae7-cbbd-0f5f99cc8333.png)


3.ディスプレイサイズが640以上の場合はcloneは表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/8e2c87be-c65e-6d21-e92d-5beb2a5ddc17.png)


# コード部分

## Header
```diff_jsx:Header.jsx
import MenuItem from "./MenuItem";
import {AiFillHome} from "react-icons/ai"
import {BsFillInfoCircleFill} from "react-icons/bs"
import Link from "next/link";

export default function Header(){
    return(
+        <div className="flex justify-between mx-2 max-w-6xl sm:mx-auto items-center py-6"> 
            <div className="flex">
                <MenuItem title="HOME" address="/" Icon={AiFillHome} />
                <MenuItem title="ABOUT" address="/about" Icon={BsFillInfoCircleFill} />
            </div>

+            <div className="">
+                <Link href="/">
+                <h2 className="text-2xl">
+                    <span className="font-bold bg-amber-500 py-1 px-2 rounded-lg mr-1">IMDb</span>             
+                <span className="text-xl hidden sm :inline">Clone</span>
+                </h2>
+                </Link>                
+           </div>
        </div>
    );
}

```


# 参考

## css

### justify-between

https://tailwindcss.com/docs/justify-content

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/cf0870cb-47fa-55dd-1ad0-f4ba7cc90340.png)


https://developer.mozilla.org/ja/docs/Web/CSS/justify-content


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/064d110a-d3eb-ca49-dcd4-6f5d4c3f2600.png)


### max-w-6xl

https://tailwindcss.com/docs/max-width

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e5696fa6-491c-fe3d-d273-8b99e0357164.png)


### py-6

https://tailwindcss.com/docs/padding


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/4bc8d10f-1b85-0585-aabe-8575a1857826.png)



### sm:mx-auto

https://tailwindcss.com/docs/container


### rounded-lg

https://tailwindcss.com/docs/border-radius

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/06061648-7726-cfab-cd03-d87515974739.png)


### mr-1

https://tailwindcss.com/docs/margin



## その他

Udemy

https://www.udemy.com/course/react-js-tutorial/learn/lecture/36119270#overview

githubコミット分


https://github.com/RYA234/imcbclone/commit/fd78f14239477f918f358cf1bc1a9e9bb11ed98b