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