【webデザイナー勉強記録】サイト模写をやってみた感想と気づきのまとめ

このサイトの方は4～5時間で模写し終えたと記載ありますが、私は6～7時間くらいかけてトレースしましたw

ひとまず、全体図を見なきゃ～と思ったので、ページ全体を印刷してコードも一通り眺めてどういう風にボックス化してるのか見なきゃ～と思ってこんな感じに最初に全体をチェックしてみました。

なんかシミみたいなのついてるのは気にしないでください

完成版はこちらです。

真ん中のセクションのh2に値するとこが右寄りになってますが、まぁおいといて。
では学んだ点を解説！

ほぼ画像でできているLP

打ち込んだ文字はほんとにごくわずかです。

この二か所のみ。
フッターの著作権とかもだった。
あとはすべて画像でした。
逆に自分で類似サイト作ることでまた学びを深めれそうだな～と感じています。
次のサイトやる前にそれやろうかな…と考え中。

positionシリーズがめちゃでてくる！

画像の重ねワザなのでposition:absoluteとposition:relativeがめちゃ出てきます！
頭ではわかっていても実装しないとわかなんなかったりしますので理解するのに使えるな～と思いました。

まぁそんなもん簡単にHTML&CSS組んでやりゃいいだろって言われそうですけど、いいんですよ。
元々アイドルオタク（K-POP）なのでオタク的に見ていったり解析したりするのが好きだから！
（MVとかスケジュールとかKアイドルオタクはついつい色々見て考えがち）

囲みの点線はrepeatタグで出来ていた

この部分のかわいい黄色と緑の点々…パーツが

これの上下と

再度はこれを繰り返して配置することで囲みができていました。

上下は「center top（bottom） no-repeat」
この画像、真ん中の上（下）で繰り返しませんよ～みたいな内容ですね（ざっくり）。
topを入れる時って「padding-top」とかでしか使ったことなかったから出てきたときどういう意味？？ってなったんですけど、これ書いてる今も上ってことしか理解できてません（爆）

とほほのサイトみたけど私の経験値ではまだちょっとよくわからなかった（）。

サイドの線は
「center top repeat-y」でy軸だけ繰り返してね～みたいな感じですね。

セクションをくぎるモジョモジョ

この見出しだけだと何のこっちゃ？って感じですよね。
これのことです。

最初これやる！ってなった時、この部分どうしてんだろ？
が率直な疑問でした。

これはセクションをdivで区切って、cssにafterとかbeforeを入れてつなぎ目にこれだけの画像を差し込んでいます。
なので「div名:after {～」みたいな流れてcssが書いてありました。

afterとbeforeの使い方もここで理解。
トレースでも意味ありますよ、マジで。
（自分に甘い）
これにもposition:absoluteを使用して思うがままに配置されていました。

CSSのposition:absolute;とは？要素を思いのままに配置する方法 | 侍エンジニアブログ

この記事では「 CSSのposition:absolute;とは？要素を思いのままに配置する方法 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お悩みの方はぜひご一読ください。

www.sejuku.net

元々の画像が大きいのでbottom、leftともに0で設置です。

まとめ

このサイトはpositionシリーズを理解するのにもってこいのサイトかも？と思いました。
他にもbefore・afterの使い方が学べます。

そして初めてこんな風に自分のやったことに対してまとめ記事を書きましたが、楽しかったのでまた書きたいと思います。

次模写するときはこれも参考にしたいな

模写コーディングでスキルアップしよう！

勉強方法の1つとして模写コーディングをしたので、その手順などを紹介したいと思います。

www.archetyp.jp

まずはこれの類似デザインでサイト作って理解を深めようと思います。

終わり！