📌 学習の内容

YouTubeチャンネルページの練習

完全なコード:💾

上部領域&左側領域

ユーチューブのホームページと同じコード

を使用

バナー領域

チャネルタイトル領域

の実際のYouTubeサイトでは、対応するエリアを入力するとボタンをクリックしたときに表示されますが、これはJavaScript機能が必要な部分で、borderが現れる形式に変更されます.

#channel-nav .search-wrap input:focus {
	border-bottom: solid 2px #ffffff;
	color: #ffffff;
}

最近のビデオ領域

課と画面の違いが大きいので、実際のサイトと似ていて、個人制作です.右側のテキスト領域全体から見ると、上方を基準としてalign-items: flex-start;が適用される.

YouTubeナビゲーションページ練習

上部領域&左側領域

ユーチューブのホームページと同じコード

を使用

メイントップナビゲーション領域

の画面割合は講師のノートパソコンとは異なるため、<main>のwidthの異なる値を使用した.そのため、トップナビゲーションエリアを実際のYoutubeページと同じ(JavaScript機能を除く)にするには、1行だけです.

プレイリスト1

課の内容ではありませんが、チャンネルページのプレイリスト形式と同じなので、コードを再利用しました.ただし、チャンネルページのプレイリストにはborder-topを用いて区切り線が付けられているため、変数名の一部を変更することで全く同じcssを記述することはできない.

プレイリスト2

📌 学習内容の難点

📌 解決策

📌 学習の心得.

YOUTUBE KAPICATEは本日で終了いたしました頻繁に使用されないtransition属性を加える以外に,特に困難な点はない.また、授業にない内容も自分で作って、有意義な勤務期間です.間違いがあっても慌てず、楽しんで見つける段階になったようです.(もちろんJSはまだ!)完成度の高いページを作成できるのでアップグレードしたような気がします.😝