学習内容

YouTube全体を分割

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1320px;
}

上部nav領域の指定

#youtube-top-nav {
    position: fixed;
    width: 100%;
    height: 56px;
    background-color: #212121;

    padding: 0 16px;
}

左側nav領域の指定

#youtube-left-nav {
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;

    width: 240px;
    background-color: #212121;

    top: 56px;
    left: 0;
    bottom: 0;
}
#youtube-left-content {
    position: absolute;
    width: 225px;
    height: 100%;
    background-color: cadetblue;
}

メインコンテンツ領域の指定

#youtube-main {
    position: absolute;
    background-color: #181818;
    
    top: 56px;
    left: 240px;
    right: 0;
    bottom: 0;
}

上部navの作成

YouTubeロゴを追加

<h1><a class="flex-start" href="#">
  <img src="img/youtube-logo-no-letter.png" alt="">
  <span>Youtube</span>
</a></h1>

#youtube-top-nav .nav-left h1 img {
    width: 20px;
    height: 15px;
    margin: auto 0;
}
#youtube-top-nav .nav-left h1 span {
    display: inline-block;
    margin-left: 5px;
    letter-spacing: -.5px;
    padding-bottom: 2px;
}

nav-center

#youtube-top-nav .nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#youtube-top-nav .nav-center .search-wrap input {
    width: calc(100% - 65px);
    height: 30px;
    border: solid 1px  hsl(0deg 0% 21%);
    background-color: #212121;
    padding: 2px 6px;

    font-size: 14px;
    color: #ffffff;
}
#youtube-top-nav .nav-center .search-wrap .btn-search {
    width: 65px;
    height: 30px;
    border: solid 1px  hsl(0deg 0% 21%);
    background-color: hsl(0deg 0% 21%);
}

難点

解決策

感想