[大邱AI学校]1.08.26開発日記

2152 ワード
大邱AI学校 Youtubeコピー猫 VS Code CSS html テキストリンク

□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サイトの構造を知りましたが、現実生活で最もよく見られるサイトの一つです.
    TIL(Web)-2020.12.17(ajax)
    ニュースビューアUIの作成