「本当によくわかるHTML＆CSSの教科書」のサンプルサイトを模写コーディングした記録
こんにちは！ゆーるるです。
プログラミング勉強をJavaScript中心に進めていたのですが、ドットインストールでHTML/CSSの基礎をやり直したことで、一度も最後までやりきったことがないサイト模写をやりたいなという気持ちになり。
ちょうど「本当によくわかるHTML＆CSSの教科書」をしっかり読んでない状態で、参考にしやすそうなサンプルサイトが載っていたので、これを見た目だけでコーディングしてみよう！と思い立ち模写をしてみました。
結果、完成したサイトがこちら！ https://u-rr.github.io/marine_coffee/index.html
githubによくpushはしてますが、github.ioに上げたのも気になってて初めてできたので嬉しい〜(´ω`)
苦労した点や、教科書と見比べて大きく違っていた点、今後やりたいことなどをまとめてみました！
参考元のサイト
参考にしたサイトは、「本当によくわかるHTML＆CSSの教科書」に載っていたコーヒーショップのサンプルサイトです。
参考にしたサンプルファイルはこちら https://www.sbcr.jp/support/14778/
上記からファイルをダウンロードできたので、同じディレクトリ上にsampleフォルダを作って入れて、実際にブラウザ上で動きなどを確認しながら、見た目だけを参考にコーディングしてみました。
※画像サイズ・フォントサイズ・フォントカラー・レスポンシブのブレイクポイントの確認でchromeのデベロッパーツールは使いました。
制作時間
作り始めをカウントし忘れてしまったのですが、制作時間は約10時間ほどでした。
苦労したポイント
トップ画像の文字の置き方
メインビジュアルの中にテキストが入ってますが、「position: fixed;」とかで「画像の真ん中に置く」指示ができたっけ？としばらくググってみたんですがいまいち上手くいかず。。 結果的には、padding-topでいい感じに設置できました。
後述する見本と照らし合わせてもpadding-topで指定してたので正解だったようです。
メニューページの画像がウィンドウサイズを変えると大きくなる
最初設定したとき、ウィンドウサイズを大きくしても見本のようにサイズが変わらず困惑したのですが、画像読み込み時にwidthとheightをpx指定してたのが原因でした。 width="100%"に変更することで解決。
CSSグリッドに苦戦
ウィンドウサイズを変えると2カラム、3カラムと変わっていくのにCSSグリッドが適切だと思って使用したのですが、どうもメニューカード全体が右側に寄ってしまい調整に苦戦。
メニュー画像の設定をwidth="100%"にしたときに、htmlでの呼び出し元と、CSSの両方で指定していたのが影響していたようで、CSSのほうを削除したら綺麗に中央寄せになってくれました。
ある程度の大きさになるとwidthが固定になる
地図ページを作っているときに気づいたのですが、PCサイズにしたときにある時点からコンテナーの横幅が固定になっていました。
メディアクエリで、固定に変わるwindowサイズのときにコンテナーのwidthを指定することで実現しました。
メールフォームの送信ボタンをbuttonタグで作るとグレーがかった背景色がついてしまう
本来だとボタンはbuttunタグで作るのがスマートな気もするのですが、背景色を指定してもグレーがかってしまうのがわからず。
<input type="text">
で見本と同じ見た目にしました。
答え合わせしてみました。
完成まで全く教科書を見なかったので、せっかくなので答え合わせしてみました。
概ね問題なさそうだったのですが、大きく気になったところピックアップします。
見本ではheaderタグ使ってない
ヘッダー部分をheaderタグで作りましたが、見本だと
<div class="header">
で作ってました。
スマホ表示でヘッダーをdivで左右に分けなかった
見本では最初の時点でヘッダーを左右にfloatで分けてますが、自分はモバイルファーストで、スマホの見た目からコーディングしたので、スマホ表示ではロゴをdisplay: none;してるので左右に分ける必要がなく。 レスポンシブでロゴが出始めるところでfloat指定入れました。
メニューにulを使ってる
見本ではアンカーリンクだけで作ってました。 なんかメニューはulとliで作るって先入観あるけど必ずしもそうじゃないのかな？
http://www.htmq.com/html5/header.shtml でもここのリファレンスだとulとli使ってるので継続していこうかなと思います。
ヘッダーの背景色入れてない
デフォルトで白く見えるから入れなかったんですけど、必須なのかな？入れといたほうが確かに無難って感じしますね。
メニューホバーの範囲を広くする指定の仕方が違う
見本ではaタグにpadding指定しててそういう方法あったんだなーと。 私はliタグに対して高さはline-heightで、横の余白だけpaddingで作りました。 （paddingだけでできたんだろうか？と試してみたけど、微妙に下ずれして上手くいかなかった。。）
containerにmax-width入れてない
上述したように、メディアクエリの方で入れました。 max-widthのほうがスマートだったかも。
containerにauto入れてない
中央指定にするために見本ではauto入れてますが、必要性がなかったようで自分は入れてません。 margin: 0 30px で中央寄せが叶ってると思ってるけどあってるかな。。
floatのあとにclear指定入れてない
今回、float使ったのはヘッダーとフッターだけで、そのあとに続くコンテンツがなくて影響なかったこともあってclearタグ入れるの忘れてました。 htmlのほうで
<div class="clear">
で用意してたの参考にしようと思います。
共通部分が多いスタイルを一番上にしてなかった！
上から読み込まれるってプログラミングの大原則なのについ忘れてしまう！
共通CSSを切り出したんですが、本で推奨されてるように、共通部分が多いスタイルシートを最優先で読み込ませてなかったです。 どおりで効き方おかしい感じするときありました。。反省。
メニューのwidth:100%の指定場所が違う
私はhtmlのほうで指定しましたが、見本ではCSSのほうで指定。どっちがいいんだろう。CSS指定で統一したほうが管理はしやすいのかも。と思いました。
見本ではメニューの並びはフレックスボックス使用
使い勝手的にわたしはCSSグリッドで作ったので見本のほうはあんまり参考にならず。CSSグリッドのほうがスマートだって信じてるw
画像にaltタグ入れてない
模写だけが目的だったからっていうのもあって省略した部分だったりはするのですが、見本だと綺麗にaltタグ入れてたので。 癖つけるためにも今後はちゃんと指定しよーっと思いました。
サイト模写してみてよかったこと
模写自体は、Progateの道場コースを完走したあたりから、いつかやりたい、やらなきゃなーと思いつつなかなかできておらず、今回初めて0からのコーディングを完走しました。（メールフォームは使えない状態だけど。。）
夫と遊びで途中まで模写したことはあったりしたのですが、最後までやりきれてなかったのがもやもやしてて。
今回最初から最後まで1人でやりきったので、「自分にもできた！」と自信が少しつきました。
また、極力元コードを見ないで見た目だけで再現しようとしたので苦戦するポイントが多く、たくさんググりながらコーディングしたので、写経するよりも身になったと感じます。
ドットインストールで実用的な基礎編もやってたおかげで、ある程度正解のあたりをつけながらぐぐることもできるようになってました。
今後やりたいこと
シングルページサイトにする
今回参考にした本に、今回作ったサイトをシングルページサイトにしてみるチャレンジも載ってます。
最近よく見るシングルページサイトは一度は作ってみたかったので、まずはこれをやってみてまた答え合わせしようかなと。
JavaScriptを使ってみる
今回完成したサイトは、JavaScriptをまったく使っていないサイトです。
本当はJavaScriptマスターになりたいなと思ってるこの頃なのでw ハンバーガーメニュー作ったり、動きつけられるところつけたりしたいなと思ってます。 （生JSをたくさん書きたいけど、動き系はjQueryが主流っぽくて悩み中。。）
メールフォームを使えるようにする
メールフォームも送信機能はつけていないので、node.jsを学んで使えるメールフォームにしたいと思ってます。（JSを極めるためにnode.jsを学びたい！）
Vue.jsでSPA化やPWA化をする
最近Vue.jsの勉強もしている（そもそも、こっちが本命）ので、見た目はそのままでSPA化やPWA化してみるのも勉強になりそうだなーと思ってます。
まとめ
以上、はじめてのサイト模写の記録をまとめてみました。
初心者向けの見本サイトなので、実際に運用されている模写はきっともっと大変で勉強になるだろうと思います。 なのでもっといろんなサイトの模写してみたい！
けど、まずはこのサイトだけてもいろいろできることがありそうなので、アレンジしながら付随する勉強範囲を広げていこうかなーという計画です。
