私は職業訓練校のwebデザイナー養成科でwebデザインに触れました。
同じような人とかprogate終わって次何しよ～って人のためにこの記事を書いています。
私はというと、現在ECサイト運営をしている会社でパート勤務しています。
バナー作りがメインでHTML&CSSはちょこっとイジってるくらいです。
ぶっちゃけweb制作やってないのでいいのですが…1ケ月くらい何もしないとマジで忘れていたのでやばいなーと思い模写を始めました。
でも…ぶっちゃけ
模写ってムズい！！！
そこで私がやってるのは模写というよりトレース。
トレースっていうのはよくイラスト描く人とかやるやつ。
ライターでいうと写経的な感じです。
つまりただコード丸写し！です。
ただしあんまり何もせずにトレースすると意味ないので「これをこうしてる意味は？」とか考える必要があります。
①HTML&CSSを忘れない
②こんなやり方あるんだ～と他の人の表現が学びになる
③簡単＆ヤル気がそがれない
④出来上がるとやっぱ嬉しい
というのが上げられます。
では今回終わらせたサイトでの私が思った気づきをまとめてみました。
参考サイト
まず、選んだサイトはこちら
ここをどうやって選んだかというと
このサイトの方は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を使用して思うがままに配置されていました。
元々の画像が大きいのでbottom、leftともに0で設置です。
まとめ
このサイトはpositionシリーズを理解するのにもってこいのサイトかも？と思いました。
他にもbefore・afterの使い方が学べます。
そして初めてこんな風に自分のやったことに対してまとめ記事を書きましたが、楽しかったのでまた書きたいと思います。
次模写するときはこれも参考にしたいな
まずはこれの類似デザインでサイト作って理解を深めようと思います。
終わり！
コメント
[…] […]