【プログラミング学習】はじめての模写のやり方とお役立ち便利ツールと参考にした動画【独学】
模写したいのにやり方がわからないという問題。
( ・∇・;)
模写がいいと聞くけどどうやったらいいの？
ネットで検索したけどやり方らしいやり方がわからない！
( ・∇・;)
そうなんです。
やり方がわからない問題に結構苦しみました。
そして昨日どうにかこうにかひとつのサイト模写を終えました。
元ソースはみないということを徹底して、ゼロからコードをかきました。
もちろんコピペもなしです。
( ・∇・) !!
👩🏻💻力づくです。
— Nao | Coding Beginner (@ahochauyo) 2019年7月15日
初サイト模写完了🙌
右: 私
左: 本物
画像伸縮変とか細かいところ変とか課題多め💦ですが今回はこれで😌
模写のやり方本当に不明でググったりもしましたがそれでも不明でした。しかし無理くりながらも元ソース見ずに出来た😆大体ですが😀
実践に近いほど学びは多いですね🌱 pic.twitter.com/8ixKDvt0Y6
私の場合あまりにも初心者すぎて、段取りがわからないままにはじめました。
効率悪すぎです。
( ・∇・;)
ということでサイト模写のやり方と使ってよかったツールをまとめておきたいと思います。
- 準備するもの
- やり方
- 便利ツール
- 参考サイトと動画
の順番で書いていきますね。
👩🏻💻模写からの学びは大きい
— Nao | Coding Beginner (@ahochauyo) 2019年7月15日
1週間前の自分は模写のやり方は完全不明。しかし力づくでもとりあえずやってみたことで「型」ができたかも📋
✅模写するサイトの枠とその中の要素を書き出す
✅枠と要素にクラス名を振りながらHTMLかく
✅枠ごとにCSS。完成してから次の枠に。
✅CSSは内側要素から#模写 pic.twitter.com/xU8Tq6FEjc
準備するもの
ではさっそく準備するものから。
- ブラウザ
- テキストエディタ
- 紙と鉛筆
わたしの場合はGoogle Chromeと Visual Studio Codeとホワイトボードでやりました。
他のエディタだろうが裏紙とペンとか、なんでもいいと思います。
( ・∇・) ♪
サイト模写のやり方（超初心者）
- 模写するサイトを選ぶ
- サイトを上から下まで一回全部みる
- 見た目でサイト全体を枠で分割。メモなどに大きな四角を書く。
- 各枠内に、細かい要素をたしていく
- テキストエディタに新規HTMLファイル作成
- 先ほど書き出した枠と要素を盛り込みつつHTMLを書く
- まずHTMLを完成させる
- テキストエディタで新規CSSファイルを作成
- 枠ごとにCSSを完成させていく。枠内の小さい要素から順番に書く。
- ひと枠書くごとに元サイトと動きを確認してから次の枠にうつる
- 9と10を繰り返し最後までいく
ひとつひとつみていきます。
1.模写するサイトを選ぶ
自分の場合はこちらのサイトを選びました。
理由はマナブさんという方のブログで発見したからです。
ちなみに、模写をするまでに必要な基礎学習などものせてくださっているので参考にされたらいいのかなと思います。
超膨大な情報を提供してくださっています。
私は時間がかかりすぎて、模写にたどり着く前に挫折するな、、、と思ったのでいきなり模写からはじめました。
その辺りは個人の性格かなと思います。
( ・∇・)
2.サイトを上から下まで一回全部みる
特にコツなどはないです。上から下まで全部をみて、ふむふむと思ってください。
( ・∇・)
3. 見た目でサイト全体を枠で分割。メモなどに大きな四角を書く。
4.各枠内に、細かい要素をたしていく
ツイートにも掲載しましたがこんなかんじです。
さきほどのAirbnbのページとみくらべてみます。
すみません、枠という表現が、かなり自己流なので、わかりにくいかもしれないのですが、サイト全体を分割するいちばん大きな要素、というのが伝わると幸いです。
( ・∇・;)
大枠がかけたら、他の要素もたしていってください。
これをつくると、サイトの構成が頭にはいります。
雑なものでいいので、つくるのがおすすめです。
5. テキストエディタに新規HTMLファイル作成
6. 先ほど書き出した枠と要素を盛り込みつつHTMLを書く
さきほど書き出した枠をみつつ、HTMLをかいていきます。
枠のとなりにメモしてあるのはクラス名です。
コードを書くときに、元サイトでソースをみたり、ディベロッパーツールをひらいて構造を確認してはいけません。
( ・∇・)
7. まずHTMLを完成させる
書いているうちに、CSSのことが頭に浮かんだり、なにかアイディアがでるかもしれませんが、どこかにメモするにとどめ、まずはHTMLだけを完成させてください。
おめでとうございます！半分完成です。
( ・∇・) ☆
8. テキストエディタで新規CSSファイルを作成
9. 枠ごとにCSSを完成させていく。枠内の小さい要素から順番に書く。
つづいてCSSにうつります。
枠や要素をメモに書き出していたかと思うので、
それをみつつCSSをつけていきましょう。
コツは内側の要素から順にひとつひとつ完成させてくことです。
一言でいえば、そうなのですが一応一つ例をあげて、細かめに書きますね。
( ・∇・)⤵︎⤵︎
サイトの真ん中あたりにこういう枠があります。
私のメモでいうと右側にfeaturesとメモされているところです。
ここでのいちばん小さな要素は、
アイコン、
キャッチコピー（簡単に使える、有効期限なし、忘れられない旅）
その下の説明文です。
大きいタイトル「いつも完璧な贈りもの」は、気になるのですが無視してください。
あとでやります。
この枠内での配置などもまず無視してください。
いちばん小さい要素からやっていきますので、
アイコンの色や大きさ、キャッチコピーの色や大きさ、説明文の色や大きさなどを最初にいじります。
このとき並び方が破滅していても大丈夫です。
自分がいじったところが反映されているかだけ気にしてください。
( ・∇・)
それぞれのCSSが概ねサイトと等しくなったら、次はアイコン、キャッチコピー、説明文が縦に並ぶところまでやります。
縦にならんだら、次はその「アイコン・キャッチコピー・説明文」のセットが横並びになるようにしてください。
それが終わったら、ひとつ外側に移動しますて、
「いつも完璧な贈りもの」の大きさ、色などを整えます。
先ほどつくったその3セットの塊と、「いつも完璧な贈りもの」が
縦に並ぶようにしてください。
いちばん最後に全体が真ん中に来るようにします。
伝わりますかね・・
重要なのは内側から内側から調整していうということです。
10. ひと枠書くごとに元サイトと動きを確認してから次の枠にうつる
11. 9と10を繰り返し最後までいく
ここはもう文字通りですね。
時間はかかりますが、無心で繰り返していると完成します。
( ・∇・) ♪
お役立ち便利ツール
Font Awesome
アイコンはFont Awsomeというところのものをつかいました。
フォントとして認識されるので、大きさを変えたり色を変えるときは文字と同じようにfont-sizeやcolorのプロパティが使えて便利です。
サイトにあるアイコン全てつかいたい場合は有料会員になる必要がありますが、無料で十分です。
クローム拡張機能
Page Ruler Redux
選択範囲の幅、高さがわかります。
Image Downloader
サイトで使われている画像を一括でダウンロードできます。
Width and Height Display
ブラウザの幅と高さの実寸がわかります。
ColorPick Eyedropper
選択箇所の色がわかります。簡単にコピーできるので貼り付けるだけ。
おまけ
Website Blocker (Beta)
ついついTwitterやFacebookをみてしまう、、なんてことはありませんか？
指定のページに設定した時間帯はアクセスできなくなります。
参考にしたサイトや動画
Wes Bos
このウェスボスさん、すごすぎ。メールアドレスで登録するだけ。全部無料です。
しかも公式サイトのほうはCMなし。Youtubeの方はCMあります。
( ・∇・) !!!
たくさんコースあるのですが、おすすめはWhat The Flexbox!? です。
動画1本あたりがそこまで長くないのがいいです。
Youtubeは広告ありですが字幕もできました。ただ自動字幕なのでちょっと変かもしれないですが。でもそこまで差し支えなさそうかなと思います。
全部で20ある動画ですが15までやればサイト模写はできます。
コツは一回チュートリアルをみてやったあと、ゼロから自分でやることです。
コードはGithubにはいっています。
私は、html とanswerとかかれているファイルをローカルにおとして、自分のブラウザで表示させつつ、コード自体はみずに表示だけをみてゼロから模写しました。
サイト模写ほど難しくないので、ひとつひとつの作業の理解が捗りおすすめです。
Flexbox Froggy
ゲームです。flexboxの練習ができます。
CSS- the clearfix hack
シンプルにまとまっているサイト。
詳細がかかれているわけではないのですが、概要を掴むにはいいかなとおもいます。
英語ですが、グーグル翻訳とかでいけると思います。
