YouTubeページクローンコードコメント

YouTubeの1ページを「HTML/CSS」でクローニングしてみます.基本的なレイアウトの方法をたくさん練習できます.コードを書きながら、勉強や記憶したいCSSコードをgooglingで整理!
まず移動から開始し,次にページがWebに拡張されたときにレイアウトを変更する(反応型)

クローンエンコーディングページのリンク
コードソースブートリンクのクローン作成

1. position: sticky

スクロールすると、ビデオ部分は以下のposition: stickyを使用してトップアタッチ機能を実現します.top: 0;のプロパティも一緒に追加され、上に貼り付けられます.

.player {
  position: sticky;
  top: 0;
  text-align: center;
  background-color: var(--black-color);
}

2.タイトル2行のみが表示され、右側moreボタンをクリックするとすべて表示されます。(+ボタンにアニメーションを追加)

.info .metadata .titleAndBtn .title {
  font-size: var(--font-medium);
  margin-right: var(--padding-small);
  margin-top: var(--padding-small);
}

.info .metadata .titleAndBtn .title.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.info .metadata .titleAndBtn .moreBtn {
  height: 100%;
  transition: transform 150ms ease-in-out;
}

.info .metadata .titleAndBtn .moreBtn.clicked {
  transform: rotate(180deg);
}

個別に接続されたjsファイルには、次のイベント関数が実装されています.

const moreBtn = document.querySelector('.info .metadata .moreBtn');
const title = document.querySelector('.info .metadata .title');

moreBtn.addEventListener('click', () => {
  moreBtn.classList.toggle('clicked');
  title.classList.toggle('clamp');
});

3. justify-content: space-around

flexbox内のプロパティを同じ間隔で左右に分けたいとき!

.info .actions {
  display: flex;
  justify-content: space-around;
  margin: 16px 0;
}

4.flexボックスでスケールを設定する

flexboxのプロパティのサイズを100%に分割する場合

.upNext .item {
  display: flex;
  margin-top: var(--padding);
}

.upNext .item .thumnail {
  flex: 1 1 35%;
  margin-right: var(--padding);
}

.upNext .item .thumnail img {
  width: 100%;
}

.upNext .item .info {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
}

.upNext .item button {
  flex: 1 1 5%;
  height: 100%;
}

5.モバイル/Webバージョン区分

下図に示すように、ウィンドウが大きくなるとupnextチャネルリストを右側のレイアウトに変更します.

.infoAndUpNext {
  display: flex;
  flex-direction: column;
}


@media screen and (min-width: 768px) {
  .infoAndUpNext {
    flex-direction: row;
  }

  .infoAndUpNext > .info {
    flex: 1 1 70%;
  }
  .infoAndUpNext > .upNext {
    flex: 1 1 30%;
    padding: var(--padding) var(--padding) var(--padding) 0;
  }
}