【コーディング】LP模写しました～

昨日は通っているスクールの忘年会があり、参加してきました。
私たち14期生はまだ始まったばかりなのに忘年会。
でも、15期生の方も参加していて、彼らはまだ始まってすらないのに忘年会(笑)

おもしろい。

こういう歓迎感、好きだなぁ＾＾

準備からなんとなーくお手伝いしてたけど、初めましての先輩たちと一緒だったので、会が始まってから同期と会えた時の安心感(*^^*)

忘年会では、年齢性別職業関係なしにいろんな方とお話しできて、楽しい時間を過ごしました！本当にキャリアは十人十色で、みなさんいろんなことに悩んだりチャレンジしたりしてはるんやなぁと思いました。

チャレンジしてるってかっこいいよ、やっぱり。

私も、胸張って今やってること・これからのこと話せるようにアウトプットがんばらなきゃー。

今日は、同期と一緒にカフェで勉強～♪

サイト模写がひと段落したので記録します。

今回、選んだサイトはこちら↓

【無料掲載】代理店募集より簡単に営業代行・販路拡大できる｜サイドビズ

今回も選んだ理由は優しそうなカタチなので、です。

しかし、ところどころテキストサイズの幅間隔（つまりまばら。バラバラ。）だったり、揃いきってないところがなかなか実装できなくて、今まで感じなかった苛立ちが。(笑)

前までは「えーなんでー？？」だったのに
「は？なんで？？そもそもなんでこんなんにしたん？？」になりました。
すごく偉そう(笑)

好きなデザインのサイトを選ぶことの大切さを知りました。

でも、難しいなぁ。敢えてバラバラにしているのかもしれないけど、そこはバラバラのサイズにしなくてもいいんじゃないの？と思っちゃう。

このnote書くためにロゴクリックして商品ページ見たけど、そっちの方が楽しくコーディングできそうだった。。
次回の題材にしようかな。

今回はすべてフリー素材の画像を使いました。時短のため、形と雰囲気が似てる素材を適当に選んで使ったのでトップページからちょっとシュール(笑)そしてできあがったのはこちら↓

制作時間：2日間

できたこと：
・背景の位置を変えたり、固定したり
・CSSで画像のフォルダを指定するときは../～とはじめる
・吹き出しマークや丸をCSSで再現（ほぼコピペ）
・hoverアニメーション

できたけど理解しきれてないこと：
・:before :after
・セクションの境目にリボンの画像を置く

できなかったこと：
・レスポンシブ
・非平行な形の線をつくる　SVG??
・背景画像をぼかす
（実装しようとしたらコンテンツ消えちゃう）

ちなみにサイトレビュー

・使用カラーは商品ロゴの4色
（青：#1A50B2　桃：#EB3E9B　橙：#ff9734　緑：#72B743）
　ビビットめなカラーが若さや勢いを感じさせる
・非平行の線や斜めに傾いたロゴも勢いがある
・メディア掲載数が媒体ロゴの羅列によりすぐ分かるので信用度が高まる
・無料資料請求ボタンが上中下 適度な場所に配置されている

形をまねすることはだいぶできてきたような実感があります。
何度も何度もコーディングをしていたら、ちょっとだけコーディングスピードが速くなっている気がします。

あとは、どこでどのレイアウトを区切るタグ？つけたらいいのか、まだよく分かってないので、理解したい。そして、クラス名もスマートに付けたい、、

気を付けないといけないのはsectionタグを使うときに見出しタグを忘れないようにすること。というか、ついついどんなテキストもpでくくっちゃうことが多いので、見出しはどれなのか、見極めてタグを使い分けること。

課題はまだまだ多いです。

明日もがんばりましょー！！