プログラミング学習始めて4ヶ月半経ちました。
現在の進捗状況。
現在の進捗状況はこんな感じです。
- HTML CSS jQueryは基礎学習終了(主にプロゲート)
- 東急リバブルの模写コーディング8割方完成。←今ここ
1ヶ月くらいずっと東急リバブルの模写コーディングやってました。
子育てしたりブログ書いたりで、なんせ進みが悪い💦
単純な見た目部分はほぼ終了し、後はフォームの動きの部分だけです(jQuely)。
模写コーディングの感想。
模写コーディングをやってみて思ったことを書いていきます。
(あくまで初心者としての意見です)
模写コーディングは数日で終わるものではない。
模写コーディング始める前は「頑張れば２，３日で終わるだろう」と思っていましたが、とんでもない。
初めてだと勉強しながらだから数週間、私みたいに子育てしながらだと1ヶ月位かかります。
完璧にやるのは無理。
最初はピクセルもピッタリ合わせ完璧に作っていましたが、だんだん「あ、これ無理だ」と思いました。
初心者は最初から完璧な見た目を作ろうとすると挫折するので、なんとなく同じように作ればいいと思います。
その中で色々学んでいけばいいと思います。
デベロッパーツールを使えるようになることがミソ。
模写コーディングは、デベロッパーツールをいかに使えるようになるかがミソだと思いました。
使いこなす、とまではいかなくても、HTML CSSの基本的な見方はできるようになった方がいいです。
私はドットインストールでちょっと勉強しました。
まぁでも、模写しながら学べばいいと思います。
東急リバブルの模写コーディングの解説。
初心者におすすめとされている東急リバブルさんのサイトの模写コーディング。
でもちょっとクセがあるんですよね。
その辺を初心者目線で解説していきたいと思います。
ヘッダーが背景画像のみ。
まず、ヘッダーが背景画像（background-image）のみなんです。
つまり中身の画像（img要素）や文字がない。
そしてさらに、その背景画像にリンク（a要素）を貼るんです。
そんなんある？
プロゲートだとheaderタグの中にはimg要素や、なにかしら文字（ul要素やa要素）があり分かりやすかったのですが、今回は中身がスッカラカン。そこにリンクを貼るというのです。
わけわかりません。
ググってみると、こちらの記事が参考になりました↓
KUMAOのPC備考録 » Blog Archive » ヘッダーのロゴをbackground-imageで指定した時にもロゴにリンクを貼る
さらに、東急リバブルさんのサイトをデベロッパーツールで見ると、背景画像のリンク先が「a href=”∠”」となっています。
「∠」って何！？
これは「カク」って読むらしいのですが、「href=”∠”」をググっても全然でてきません。
結局「∠」は無視して、普通にリンク先を「a href=”http…”」としました。
わたしはこのようにコーディングしました↓
【HTML】
<header>
<div id=”header-inner”>
<a href=”https://www…“></a>
</div>
</header>
【CSS】
#header-inner a{
background-image:url(https://www…);
background-size:cover;
display:block;
width:190px;
height:22px;
}
headerの中にheader-innerを作って、margin:0 auto;で真ん中寄せにして、
a要素をdisplay:block;にして高さと幅を作り、そこにbackground-imageを指定する感じですね。
これで正解なのかはわかりませんが、一応同じ見た目にできました。
marginがマイナス。
なんか画像が前の要素のボーダーラインに食い込んでるんですよね。
これどうやるのかな？とデベロッパーツールで見てみると、
なんとmarginがマイナス○○pxとかじゃないですか。
なにそれ？marginってマイナスあるの？
つまりmargin-topにマイナス30pxを指定すると、上に30px動く(食い込む)んですね。
知らなかったー。
CSSファイルが複数ある。
東急リバブルのサイトはデベロッパーツールで見てもわかりづらいんですよね。
なぜなら、なんかCSSファイルが複数あるっぽいです。
(main-cssとbaikyaku-cssとかだったかな？)
とにかく見づらくて、どのプロパティが指定されてるのかわかりません。
苦労しました。
その他苦労したこと。
あと何気に苦労したのが、id名とclass名。
まだ下手クソなので、idとclassがやたら増えていきます。
すると、どう名前をつけていいのかわからなくなります。
最後の方は適当に名前をつけてました。
あと、idにしようかclassにしようか迷いました。
同じような、floatを使った横並びのレイアウトだから同じclass名にしたら、余白が微妙に違っていて、それぞれidにして作り直したり。
とまぁこんな感じで、初心者は初めから完璧にやろうとせず、なんとなく似せながら勉強していけばいいと思います。
横並びはfloatかflexboxか。
模写する上で、要素を横並びにするのにfloatにするかflexboxにするか迷いました。
昔からのやり方はfloat、でもたぶんこれからの時代flexbox。
迷った末、やはりまずは基本のfloatでやることにしました。
floatが出来ずしてflexboxが出来ても意味がない！
模写コーディングにおすすめの本。
模写コーディングをしながら「自分はWebデザインのことを何もわかってない」と思い、本を買いました。
それがこの本↓
「HTML & CSS標準デザイン講座」
(ブックオフで買った中古です。第2版も出ています。)
これ、結構よかったです。
この本では以下のようなことを教えてくれます。
- floatの仕組みを分かりやすく。
- レイアウトの種類。
- floatとpositionどっちを使った方がいいのか。
- <section> <article> <aside>タグとはどんなものか、ブログを例に。
このように、レイアウトの「キホンのキ」を教えてくれます。
私が今まで勉強した中で教わらなかったような事が書いてあり、かなり参考になりました。
ただ、若干情報が古い部分もあったので、新品を買うなら第2版をおすすめします。
文字がやや小さくて全部読むのは大変かもしれませんが、気になるところだけつまみ読みすればいいと思います。
テックアカデミーが初心者向け副業コースを始めました↓
