goppy510 / takanashi-design Goto Github PK

• サムネイルを押すとヘッダ画像部分にその画像の詳細が表示される
• デフォルト状態(ページを開いた状態ではヘッダ部分は閉じている)
• サムネイルを押すことでサムネイルエリアを押し下げてヘッダ枠取る
• ボタン押しても画像押しても画像が切り替わるようにする
  • 画像押す場合は右左押すことでその方向の画像を表示するようにした方が良いかも
• 画像は時間で切り替えしない
• クローズボタンをつける
  • 押した場合、スクロール箇所はそのサムネを押した箇所。
  • ページトップにスクロールさせない

完成イメージ

• ヘッダ部分はサムネイル2つぶん(スペース含む)
• 名前は画像で用意する(表示サイズについては今後相談)

• CSSなどの関係でimageで持つよりもいいと思う

フォント整理

• サイト全体的に BumbumType - Albra を使っている
• サンクスページのTHANKSは Typetype っぽい
• URLは TradeGothicLTStd-Cn18 っぽい

フォント変換方法

• 旧デザインのときはフォント拡張子がwoffだった
• css側でフォントを定義した

@font-face {
    font-family: AGaramondPro-Italic;
    src: url('./fonts/AGaramondPro-Italic.woff') format('woff');
}

• 今回はotfである

そもそもotfとwoffの違いとは

otf

• 一般的にPCにインストールして使用するフォントファイル

woff

• TrueType（ttf）やOpenType（otf）の圧縮版。ファイルサイズが「otf/ttf」より軽い。＝　読み込み時間が早い

結局使えるのか？

• こんな感じでいけるっぽい
• formatの引数が opentype とするところがポイント

@font-face {
font-family: 'use-SourceHanSansJP';
  src: url('font/SourceHanSansJP-Normal.otf') format('opentype');
}

• グローバルメニューを左サイドに入れる

動き

• マウスオンでメニュー少し移動するが、その後はそのまま位置を固定する
  • マウスオンしたメニュー名が左に動く
• 不要なギミックいらない
  • メニュークリック後にまた移動するようなエフェクト等
• 現在位置がわかるようにする
  • 現在開いているページのみライン上に残しておく

参考サイト

https://www.ndc.co.jp/hara/works/

完成イメージ

• 問い合わせページ
• 送信後に画像挟む

フォーム

thanksページ(送信後遷移先)