プログラミング学習始めて５ヶ月半です。
前回、東急リバブルの模写が8割方終わったところでしたが、
現在はこんな感じです↓
- 一応東急リバブルの模写は終わり。
- 東急リバブルのレスポンシブデザインに挑戦→挫折。
- ISARAの模写を始める。
東急リバブルの模写が終わり(一応)。
東急リバブルの模写が終わりました。
ただ完璧には程遠く、なんとなく見た目を同じにした程度です。
フォーム部分は苦労しました。
トップのフォーム部分は、横並びにするのにfloatかpositionか迷いましたが、見本サイトをデベロッパーツールで見るとpositionで作ってるっぽいのでpositionにしました。
あとフォーム部分の
「セレクトボックスを選ぶとOKボタンが青くなる」
という実装は、jQueryで作ってみました。
if文とvalメソッドを使って、
「もし”選択して下さい”になっていたらOKボタンは灰色、それ以外は青」
という風に作ったんですが、OKボタンは全て同じclassなので、全てのOKボタンが青になってしまいます。
(私の作ったフォーム部分↓全てのOKボタンが青くなってしまう。)
個別に青くするようにするにはかなり手間がかかりそう。
あまりそこでつまずいてると先に進めないので、諦めました。
レスポンシブデザインに挑戦。
次に、東急リバブルのスマホ版のレスポンシブデザインに挑戦しました。
レスポンシブデザインはプロゲートHTML CSS上級編に出てくるのですが、
プロゲートやって久しいので、忘れている…。
ということで、プロゲート上級編を復習してから始めました。
東急リバブルのサイトは、デベロッパーツールでスマホの幅(例えばiphoneX)で見てもなんか見切れててうまく表示されてないんですよね。
私のスマホから見るとちゃんとスマホ版がきれいに表示されているのに。
う～ん、謎です。
なので、私のスマホを見ながらなんとなく模写することにしました。
ヘッダー下のトップ部分のフォームは、positionで横並びに配置したのですが、スマホ版では横並びではないのでpositionを解除する必要があります。
解除するにはstaticを使います。
が、なんか表示がうまくいかず思ったより難しい。
そもそもコードがぐちゃぐちゃなので、
このままでは出来る気がせず、東急リバブルのレスポンシブデザインはやめました。
レスポンシブデザインは、次の「ISARA」のサイトでやることにします。
ISARAの模写を始める。
次に取り掛かったのが、模写で有名なISARAのサイト。
ヘッダーとトップ部分を作ったのですが、
今のところ順調で、いい感じにできています↓
ここまで模写をやってみた感想。
模写のやり方のとして、最初に全体を
「ここはこの要素にして、ここはdivで囲ってこうレイアウトして…」
と、設計図を作ってから始めるのが正しいんでしょうけど、
ぶっちゃけ初心者、というか今の私の実力ではそれは難しい。
そんなにきれいには出来ません。
やってみたんですが、頭がこんがらがってワケわかんなくなりました。
なので初心者は、
「まずヘッダー作って、トップ作って…」
という風に、上から順に、１つ１つに集中して作っていった方がいいんじゃないかなと思います。
まだまだ受注するには程遠いですが、一歩一歩確実に進んでいこうと思います。
チリも積もれば山となる。
テックアカデミーが初心者向け副業コースを始めました↓
コメント