□YouTube 1/3

★コード作成

Git LinkYouTubeコピー猫

1.YouTubeの全域を配置する

●YouTube左側メニューエリアスペースの作成

YouTubeの左側のメニュー領域に、スクロールバーがコンテンツ領域

に侵入することを防止するための領域を追加する.

左側のメニュー全領域のwidth値(240 px)スクロールバー作成サイズ以外の値をコンテンツ領域のwidth値(225 px)

に設定.
例)

[html]
<nav id="youtube-left-nav">
     <div id="youtube-left-content">
              
     </div>
</nav>

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

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

    top: 56px;
    left: 0;
    bottom: 0;
}

#youtube-left-content {
    position: absolute;
    width: 225px;
    height: 100%;
    background-color: grey;
}

2.YouTubeトップエリア

●結果スクリーンショット

□難点

特に難しい内容はありません

□解決方法

レッスンを終了し、コードを作成するときにエラーが発生した場合は、検索して修正します.

□勉強心得

YouTubeサイトの構造を知りましたが、現実生活で最もよく見られるサイトの一つです.