【コーディング】はじめてのランディングページ（LP）模写
LP模写チャレンジ！
HTML/CSSの勉強を始めてもうかれこれ2か月弱経ちました。
（JSとかWordPressもちょいちょいかじってました。）
市販のテキストの指示通りにサンプルサイトを実装していくという
サイクルを3冊くらいこなしたので、現時点での自分のコーディング能力を知る、次のステップに進むって意味でWEBページ模写にチャレンジしてみたいと思います！！
どのサイトをコーディングしようかな～、と色々と調べると出てきました。
こちらのランディングページ（LP）が初心者にはおすすめみたいです。
LPってスタンダードレイアウトみたいに
- ヘッダー
- メイン（トピック、ニュース、記事）
- サイドバー
- フッター
構造が複雑じゃなくシンプルなので、初心者でも挑戦しやすいらしい。
「模写って言うても１から考えてコーディングなんて無理...( ﾟДﾟ)
（ガクブル...( ﾟДﾟ)）」
ってめちゃめちゃひよってたんですけど、このLPならなんとか作れそうだな、
とひとまず安心しました～～(*'▽')
完成！！
できたーーーーーー！！！！！( ;∀;)
総制作時間約10時間！2日がかりでようやく完成！
こんな感じ！
初めてにしてはまずまずの出来栄え！
正規サイトとの見栄え上の違いそこまで大きくない感じがする！(*´▽｀*)
ただ、レスポンシブ対応とかは一切してないので幅縮めたらやばいことになるんですけどね(笑)
難しかったところ
DLリンクの取得はデベロッパー用サイトからちゃちゃっとできたんだけど、
この２つを並列に同じ高さで並べるのが難しかった...
この初期配置から30分くらい抜けられなくて泣きそうに(笑)( ;∀;)
Appleの方は、<a>タグにbackgroundプロパティで背景画像が指定してあるんだけど、Googleの方は、<a><img></a>とaタグの中にimgで挿入されてる。
その違いかなと。。。
⇒ Apple側にvertical-align: 固定値( px )指定で強制的にGoogle側に合わせました！
● Font-familyが反映されない....
これは原因が全く分からなかった...
<head>タグにCDN用のリンクタグも読み込ませているし...
⇒ font-familyプロパティで当てたいフォントの左側（手前）に以前使った
別のフォントが入り込んでたみたい。
左側から優先的にフォントを当てていくからね( ;∀;)
● {float: left; width:33%} で3要素均等に並べると、1%分余白が出る。
このLPでは要素の横並びは全てflexレイアウトで実装していたんだけど、
直前に取り組んだ参考書がfloat:leftで実装していた。
flexだと便利だけど、割かし簡単に実装出来てしまって、練習にならなそうなので、
セクション１の3要素均等横並びは float: left で実装してみた！！
親要素の幅（100％）って3で割り切れないから、33%ずつ指定しても最後の子要素の右側に1％分の余白が出現.....
⇒ 気持ち悪かったので、flexレイアウトでちゃちゃっと並べなおしました！！
（解決してない(笑)） flex便利すぎる.....
その他理解しきれなかったところ
● 詳細度（スタイルの上書き）
最初にバンバン詳細度高いセレクターの付け方しちゃって、後から変更するのが
大変でした。
● ブロックの中でのDIV要素の垂直中央寄せ
左右中央寄せはmarginで一発なんだけど...
調べたら、これも親要素に flex プロパティを充てるのが早いみたいです*1
flex無敵すぎる...( ﾟДﾟ)
これで一発です！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
.box（親） {
display: flex;
align-items: center;
justify-content: center;
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
● margin/paddingの使用感覚。充て感。（ 固定値? ％? vw/vh?）
各セクションの親要素とか特になんだど、
余白は margin/padding のどっちで取って、値はどういう指定の仕方するか。
とか大分迷いました *2
● フォントサイズを意識できていない。
セクションによって使いサイズがまちまちで一貫性のないジャンプ率になってしまった感..... (((+_+))
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
大：26rem 中：22rem 小(p)：14rem
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
みたいに最初に、見出しごとのフォントサイズははっきりさせた方がよいな！！( ﾟДﾟ)
● レスポンシブ対応
● position: absoluteでのtop: マイナスpx指定
● animationプロパティ
などなど。
ポコポコと疑問 / 問題点が出てきました ( ﾟДﾟ)
そりゃ初めての模写だからね (笑)
感想
はい、今回は初のLP模写に挑戦してみました！
始める前は大分ちきってましたが、いざ終えてみるとそれなりに形になるもんだな～と
実感。ほんの2か月前は「HTML?」「CSS？」状態だったので、そこからすると大分進歩したな～～と。
参考書なしでも、LPならそれっぽく作ることができるんだと
自信になりました ((*´▽｀*)
今の時代は、スマホとかモバイルからのアクセスがメインになってきているので、
始めたばかりの早いうちからレスポンシブの意識ももっておくようにします。
（今回はデスクトップ版を模写するのに手一杯で何もできなかったけど(笑)）
やらなきゃいけないことはまだまだ沢山あるけれど、
一つ一つ着実にこなしていこうと思います～～～。
こうやって人に見せることで、モチベーション維持できるのも
WEBページ制作のいいところですよね。
ではまた～ (*´▽｀*)
