模写コーディングやってますよ．
既存のWebサイトを見て，全く同じデザインになるように写経するってやつね．
HikoProさんが初心者が模写するべきWebサイトを紹介してくれているので，仰せの通りにそれらのページを模写している．
【レベル別】模写コーディングにおすすめのサイトまとめ9選 | HikoPro Blog
今まではこんなWebサイトを模写してきた．
今までに模写したWebサイト3ページ分については，すべて初心者用であった．
今回は，初めての中級者用のレッスンとなる．さっそくAirbnbの公式サイトを模写してみた．
むずかしくない？
Airbnbの模写を開始してすぐに，「簡単ではないな」と気づいた．
難所① 入力フォーム
ヘッダーの中に，行き先などを指定する入力する簡易的なフォームがあるのだが，こいつが難しい．
シンプルに<input>って入力欄を作るだけじゃないんだよな．
入力欄の中身が2列で構成されていて，1列目には「行き先は？」みたいな質問が用意されていて，2列目にその質問に対する入力をする仕様になっている．
それどうやんの？
しかも入力フォームの中に検索ボタンがあるんだけど，どうやって内蔵すんの？
難所② 画像の切り抜き
画像の切り抜き箇所を指定するのも分からなかった．
あらかじめ用意している画像の，さらにこのエリアだけを表示したいっていうときの指定方法が分からなかった．
参考書を読みながらpositionをいろいろ変化させてみたけど，思ったように動かない．
表示される画像の見え方が違うと，元のサイトと比べても違いが目立つのだ．
そのせいで，全然うまく模写できていない気がするんだよね．
難所③ ヘッダーの追従
あとは，ヘッダーの追従もなぜかできなかった．
いろいろ試してもずっとトップの位置に固定されたままである．
position:fixed;にしてz-index:10;にすればいいんじゃないの？
難所④ スクロール時のデザイン変更
ヘッダー関係だと，スクロールしたときに追従するヘッダーのデザインが変わる仕様も実装できなかった．
調べてみるとPHPの知識が必要だということであったが，偶然ProgateでPHPの基礎は学んでいる．
難易度も低そうだったので挑戦してみた．
だが，どれだけやってもうんともすんとも言わない．
心折れるわ．
まとめ：サイトデザインが変わって難しくなった？
今までのWebサイト模写で自信をつけていたところだったのに，Airbnbで自信なくしたわ．
できないところが多すぎる．
前回模写したDental Clinicと比べても難易度が飛躍的に上がっている気がするんだよねー．
デザイン替わってる？
でも，気のせいではなく本当に難しくなっているのかもしれない．
模写サイトおすすめ集で紹介されているAirbnbのページと現在のAirbnbの公式サイトのページのデザインが，結構違うのだ．
おすすめ集に載っている方はページの一部を画像にして貼ってあるだけなのでページの全容は分からないが，その一部だけを比較しても現在の公式ページとはデザインが大きく異なっている．
ひょっとすると，おすすめ集で紹介された当時から現在までの間にデザインが修正されたときに，一気に模写が難しいデザインになったのかもしれない．
なくはない話だし，それなら急に難しくなったと感じるのも納得である．
もしくは，単純に私の「HTML&CSS」力が低いかだろう．
その可能性も割と高い．
スキルが十分あれば，多少難しいデザインに替わったところで対応できるはずだしな．
どっちにしろ，現在のAirbnbの模写は難しい気がする．
同じように感じている人，安心してくれ．
本当に難しくなっている可能性も高い．
そして，同じように困っていることを教えてほしい．
私も自分のスキル不足だと認めたくないからな！