ヘッダーを整える

ヘッダー部分を整える

今のヘッダーは正直バランスが良くないのでcssを書き換えようと思う。

改修前のヘッダー

ヘッダーロゴはきれいに中に埋め込むことができた。

ヘッダーロゴ

        <header>
            <div class="header-logo">
            </div>

.header-logo {
    background-size: 180px;
    margin-left: 32px;
    background: url(images/product-logo.png) no-repeat 20px center;
    flex-grow: 2;
}

backgroundののところにurlを埋め込むことできれいに置くことができるのか。

ヘッダーはある程度完成させることができた。

ヘッダー改修後

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import './style.css';

import LockOpenIcon from '@material-ui/icons/LockOpen';

const HeadMain = () => {

    return(
        <header>
            <div class="header-logo">
            </div>
            <a href="#" onclick="console.log('The link was clicked.'); return false" class='clickme-pink'> 
                <div>click</div>
                <div>me</div>
            </a>
            <a href="#" onclick="console.log('The link was clicked.'); return false" class='click-login'> 
                <LockOpenIcon fontSize="medium"/>
                <div>login</div>
            </a>
        </header>
    );
}

export default HeadMain

header {
  width: 100%;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  background: #fff;
  height: 80px;
}

.header-logo {
    background-size: 180px;
    margin-left: 32px;
    background: url(images/product-logo.png) no-repeat 20px center;
    flex-grow: 2;
}


.clickme-pink {
    opacity: 1;
    background: linear-gradient(100.59deg, #FF77A8 0%, #D468A7 103.13%);
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    line-height: 1; 
}

.click-login {
    background: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: 10px;
    width: 80px;
    text-decoration: none;
    cursor: pointer;
    padding: 0; 
}

.login-logo {
    display: block;
    margin: 0 auto;
    width: 16px;
    padding-bottom: 2px;
}

とりあえずヘッダーの改修はできたので今日はこれまで。
次は次は第1ページの改修かな。