Memorandum

Something about Information Technology

Python

Github Pages

HTML/CSS基本

HTML/CSSパーツサンプル

ヘッダー(ハンバーガーメニュー)

  • カバー写真がブラウザ画面100%表示
  • メニューをスライドイン
  • メニューは .hamburger-menu クラスのスタイル適用
  • .hamburger-menuは画面一杯(width: 100vw; height: calc(100vh - 5rem); //5remはヘッダー高さ)
  • それをブラウザ画面の右に100%移動させて隠す(transform: translateX(100%);)
  • アニメーションの時間は0.6秒(transition: all 0.6s;)、これはhoverかjavascriptで動かすときに有効な値
  • javascriptで .hamburger-menu-active をON/OFFしている(transform: translateX(0); /* 元の位置に戻す */)

ヘッダー(ハンバーガーメニュー2)

  • ヘッダー上部固定(スクロールしても常に表示, position: sticky;)
  • メニューをフェードイン

カルーセル