ゆーるるのゆるゆる日記ゆーるるのゆるゆる日記2018年5月に男の子ママになったアラサー会社員が、育児のこととか勉強のことを呟きます。HatenaPocketこんにちは!ゆーるるです。プログラミング勉強をJavaScript中心に進めていたのですが、ドットインストールでHTML/CSSの基礎をやり直したことで、一度も最後までやりきったことがないサイト模写をやりたいなという気持ちになり。「本当によくわかるHTML&CSSの教科書」をしっかり読んでない状態で、参考にしやすそうなサンプルサイトが載っていたので、これを見た目だけでコーディングしてみよう!と思い立ち模写をしてみました。答え合わせしてみました。まとめ参考元のサイト参考にしたサイトは、「本当によくわかるHTML&CSSの教科書」に載っていたコーヒーショップのサンプルサイトです。本書で使用するサンプルファイルをダウンロードできます。...https://www.sbcr.jp/support/14778/上記からファイルをダウンロードできたので、同じディレクトリ上にsampleフォルダを作って入れて、実際にブラウザ上で動きなどを確認しながら、見た目だけを参考にコーディングしてみました。※画像サイズ・フォントサイズ・フォントカラー・レスポンシブのブレイクポイントの確認でchromeのデベロッパーツールは使いました。作り始めをカウントし忘れてしまったのですが、制作時間は約10時間ほどでした。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タグで作るのがスマートな気もするのですが、背景色を指定してもグレーがかってしまうのがわからず。type="text">で見本と同じ見た目にしました。答え合わせしてみました。完成まで全く教科書を見なかったので、せっかくなので答え合わせしてみました。概ね問題なさそうだったのですが、大きく気になったところピックアップします。class="header">で作ってました。none;してるので左右に分ける必要がなく。レスポンシブでロゴが出始めるところでfloat指定入れました。メニューにulを使ってる見本ではアンカーリンクだけで作ってました。なんかメニューはulとliで作るって先入観あるけど必ずしもそうじゃないのかな?<header>-HTML5タグリファレンスHTML5のタグ解説http://www.htmq.com/html5/header.shtmlでもここのリファレンスだとulとli使ってるので継続していこうかなと思います。ヘッダーの背景色入れてないデフォルトで白く見えるから入れなかったんですけど、必須なのかな?入れといたほうが確かに無難って感じしますね。メニューホバーの範囲を広くする指定の仕方が違う見本ではaタグにpadding指定しててそういう方法あったんだなーと。私はliタグに対して高さはline-heightで、横の余白だけpaddingで作りました。(paddingだけでできたんだろうか?と試してみたけど、微妙に下ずれして上手くいかなかった。)containerにmax-width入れてない上述したように、メディアクエリの方で入れました。max-widthのほうがスマートだったかも。containerにauto入れてない中央指定にするために見本ではauto入れてますが、必要性がなかったようで自分は入れてません。中央寄せが叶ってると思ってるけどあってるかな。floatのあとにclear指定入れてない今回、float使ったのはヘッダーとフッターだけで、そのあとに続くコンテンツがなくて影響なかったこともあってclearタグ入れるの忘れてました。class="clear">で用意してたの参考にしようと思います。共通部分が多いスタイルを一番上にしてなかった!上から読み込まれるってプログラミングの大原則なのについ忘れてしまう!共通CSSを切り出したんですが、本で推奨されてるように、共通部分が多いスタイルシートを最優先で読み込ませてなかったです。どおりで効き方おかしい感じするときありました。メニューのwidth:100%の指定場所が違う私はhtmlのほうで指定しましたが、見本ではCSSのほうで指定。どっちがいいんだろう。CSS指定で統一したほうが管理はしやすいのかも。使い勝手的にわたしはCSSグリッドで作ったので見本のほうはあんまり参考にならず。CSSグリッドのほうがスマートだって信じてるw画像にaltタグ入れてない模写だけが目的だったからっていうのもあって省略した部分だったりはするのですが、見本だと綺麗にaltタグ入れてたので。癖つけるためにも今後はちゃんと指定しよーっと思いました。サイト模写してみてよかったこと模写自体は、Progateの道場コースを完走したあたりから、いつかやりたい、やらなきゃなーと思いつつなかなかできておらず、今回初めて0からのコーディングを完走しました。(メールフォームは使えない状態だけど。)夫と遊びで途中まで模写したことはあったりしたのですが、最後までやりきれてなかったのがもやもやしてて。今回最初から最後まで1人でやりきったので、「自分にもできた!」と自信が少しつきました。元コードを見ないで見た目だけで再現しようとしたので苦戦するポイントが多く、たくさんググりながらコーディングしたので、写経するよりも身になったと感じます。ドットインストールで実用的な基礎編もやってたおかげで、ある程度正解のあたりをつけながらぐぐることもできるようになってました。今後やりたいことシングルページサイトにする今回参考にした本に、今回作ったサイトをシングルページサイトにしてみるチャレンジも載ってます。最近よく見るシングルページサイトは一度は作ってみたかったので、まずはこれをやってみてまた答え合わせしようかなと。JavaScriptを使ってみる今回完成したサイトは、JavaScriptをまったく使っていないサイトです。ハンバーガーメニュー作ったり、動きつけられるところつけたりしたいなと思ってます。(生JSをたくさん書きたいけど、動き系はjQueryが主流っぽくて悩み中。)メールフォームを使えるようにするメールフォームも送信機能はつけていないので、node.jsを学んで使えるメールフォームにしたいと思ってます。(JSを極めるためにnode.jsを学びたい!)Vue.jsでSPA化やPWA化をする最近Vue.jsの勉強もしている(そもそも、こっちが本命)ので、見た目はそのままでSPA化やPWA化してみるのも勉強になりそうだなーと思ってます。まとめ以上、はじめてのサイト模写の記録をまとめてみました。初心者向けの見本サイトなので、実際に運用されている模写はきっともっと大変で勉強になるだろうと思います。いろんなサイトの模写してみたい!けど、まずはこのサイトだけてもいろいろできることがありそうなので、アレンジしながら付随する勉強範囲を広げていこうかなーという計画です。最新の記事ゆーるる2018年5月に男の子を出産した一児の母。2019年11月に2人目出産予定。第一子育休中にFP2級とGaiq取得しました。FP勉強したので株やりたいけど元手がないのが目下悩み。Vue.jsとお友達になりたい。このブログは、日々の自分の勉強や子育て記録の発信場所として運営中。マイペースに更新していきます。CLI3でPWAサイトを立ち上げてみたこんにちは!ゆーるるです。...育休中に40日の独学でFP3級取得!合格までの道のりこんにちは、ゆーるるです。去る、2018年9月9日、FP3級を受けてきました。...2018年に立てた目標を振り返ってみました。こんにちは!ゆーるるです。気づけば2018年も、もう年の瀬ですね。...FP2級に4ヶ月で独学合格!無料サイトも活用した育休ママの合格体験記こんにちは!ゆーるるです。...ママ友作りのマッチングサービス作成中だけど似たサービスを見つけてしまったのでまとめてみたこんにちは、ゆーるるです。約2ヶ月ぶりのブログです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。