プロのwebサイトを真似してみようかと思います、
わたしは、さいきんはYouTuberで活躍してるにじさんじのVtuber達が大好きなので
大好きなにじさんじの公式サイトをHTMLとCSSだけで模写してみようと思います
まずは本物はこれです。
公式サイトのなかでもMENBER紹介がされているページに挑戦してみようと思います。
わたしが模写したものはこれです。
どうでしょう？
各Vtuber窓は、hoverのときに1.3倍大きくなるみたいです。
細かい幅を気にしなければ、雰囲気はほぼほぼ同じ様にできたと思います。
Vtuberの顔写真はすべて公式サイトから拾ってきました。
もちろんwebには公開しません。
どうしても真似できなかったのは、検索窓です。
プルダウンの三角を表現したかったのですが、本物は結構作り混んであって
わたしではコードを読み解けませんでした。
あとは個人的には、タブの切り替えがとても悩みました。
にじさんじタブの右隣にある、VirtualRealタブをはじめとした他4つのタブの切り替えがとても難しかったです。
結果的にCSSだけで表現することができましたが、途中ほぼ諦めてました。
全体的な出来は私的には満足でしたが、ほんとうに細かい細部の表現やミリ単位で
ずれてしまうレイアウトの誤差には、プロと素人の格差がモロ出ました。
正直真似しようと思ってもどうしてもできません、いまは。
センスというか経験がものを言うかんじで、やっぱりプロがつくったもの
は素人が見ても解読できなかったです。
明後日は待ちに待ったHTML5の試験ですが、果たして上手くいくでしょうか
名誉をかけた戦いといいますか、称号を手に入れると言いますか
わたしなりの技術の証として合格できたらうれしいなぐらいで思って望もうと思います。
あれは、記憶力勝負だと思うのでね。
きょうも忘れずに勉強してから寝ないと。
