0817開発ログ

8903 ワード
大邱AI学校 テキストリンク

学習内容


YouTubeチャンネルページ、ナビゲーションページ
githubソースコード

YouTubeチャンネルページ



チャンネルタイトル


使用
  • background-size: coverbackground-position: center横断幕領域全体を背景画像として塗りつぶす.
    • #youtube-channel-content #channel-banner {
    position: relative;
    width: 100%;
    height: 250px;
    background: url(../img/bg-1.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
  • 実際のページのように横断幕の右下にボタンが追加されています.
    • #youtube-channel-content #channel-banner a {
    position: absolute;
    background-color: rgba(0,0,0,.5);
    padding: 10px 15px;

    font-size: 12px;
    font-weight: 700;

    bottom: 20px;
    right: 20px;
}

    チャンネルタイトル

  • 実ページで検索アイコンを押すとinputが出てきますが、出ている部分や消えている部分を除き、inputが出ている状態を基準に作成します.
    • #channel-nav .search-wrap .icon-search {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../../naver-ex/img/search-white.png) no-repeat;
    background-size: 18px;
    background-position: center;
    margin-right: 5px;
}
#channel-nav .search-wrap input {
    background-color: transparent;
    padding: 5px 0;
    color: #ffffff;
    font-size: 15px;
}
#channel-nav .search-wrap input:focus {
    border-bottom: solid 1px #ffffff;
}

    プレイリスト

  • 授業中にない「字幕」マークを追加.
  • 講義にない字幕表示は、内部内容の高さ値が変化し、flexによりy軸中央揃えが発生する.align-items: flex-start属性値を追加し、内容を上から開始します.
    • .channel-playlists-section .playlists-body li .channel-txt-wrap .txt-bottom .sub {
    display: inline-block;
    padding: 3px 4px;
    border-radius: 2px;

    background-color: #181818;
    color: #aaa;
}
.channel-playlists-section .playlists-body ul {
    align-items: flex-start;
}
  • 単語間のポイント要素を作成し、その後使用し続ける.
    • .channel-playlists-section .playlists-body li .channel-txt-wrap .txt-bottom .count::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #aaa;
    border-radius: 50%;
    vertical-align: -1px;
    margin: 0 0 4px 5px;
}

    YouTubeナビゲーションページ



    難点

  • youtubeナビゲーションページ作成時、内部内容が長すぎたため、youtube-main領域を離れる問題が発生した.bottom:0エリアを拡張している部分は、不思議なことに一番上をスクロールしているときのブラウザの下部標準にしか拡張していないようです.

    • 解決策

  • bottom:0属性にコメント処理を行った後、内部要素の大きさに拡張する.

    • 感想


    3つのyoutubeページができました.他のページに比べてデザイン要素が重複しているため、すばやく作成できます.講座を聞いていると、javascriptで実現してスキップしている部分が多く、javascriptを早く勉強したいと思っています.
    パイプ:pipe
    node.jsのbufferwriteメソッドの使用説明