HTML/CSSの学習方法としてサイト模写がありますが、どのサイトを模写していいかわからない方がいるのではないでしょうか？
私もある程度実力がついて本格的な模写をしようと思ったとき、どれから始めていいかわかりませんでした。
私が実際にやって確かめた確実に力になる模写サイト3選を紹介します。
模写にあたってはこちらのGoogleChrome拡張機能を紹介していますので合わせてご覧ください。
iSara
1つめはiSaraです。
このサイトの特徴は10,000pxを軽く超える長めのLP(ランディングページ)で、腕試しにふさわしい静的なページとしてよく模写されています。
上下とても長いのでクラス名の枯渇であったり微妙に使い回しし辛いブロックだったりで最後まで書ききることは初めのうちは難しいですが、各セクション毎に区切ってゆっくりやってみましょう。
クラス名が悩む場合はこちらを参照してみてください。
Qiita記事：CSSのクラス名を決めるときに使うリストをつくりました
画像の幅や余白までぴったり合わせる必要はなく、まずは全体を書ききって完成を目指してください。
余裕があればレスポンシブ(スマホ対応)もやってみましょう。
慶應義塾大学病院
2つめは慶應義塾大学大学院です。
このサイトにはデザインはシンプルながらもいろんなサイトで使われている基本がたくさん含まれていますので実力がつきやすいサイトです。
✓このサイトに実装されている機能
- メガメニュー
- カルーセルスライダー
- タブメニュー
どれも難しそうに見えますが、調べれば必ずできますので1つずつこなしてみましょう。
ちなみにCSSでも書けますが、JavaScript(jQuery)を使うことをおすすめします。
JavaScriptと聞いて毛嫌いする方もいるかもしれませんが、ここで身に付けておいて損はありません。
Norton
3つめはNortonです。
ここでの鬼門は表の中にいくつも区切られた文字、数値、アイコンを並べることです
この表ですがいくつかやり方はあります。
FlexBox、float、table、gridレイアウトなど。
他にもグラデーション、レスポンシブもありますので最後まで気を抜かずに。
以上、今回は3つを取り上げました。
他にもおすすめサイトはありますが、その中でも今回紹介したこの3つはやっておいて損はありません。
模写する前にどの機能が、どんな動きをするかを確認することはコーディング前の段階では大事なことなのでまずは全体を把握することを忘れずに。
