【HTML/CSS】確実に力になる模写サイト3選【Web制作】

HTML/CSSの学習方法としてサイト模写がありますが、どのサイトを模写していいかわからない方がいるのではないでしょうか？

私もある程度実力がついて本格的な模写をしようと思ったとき、どれから始めていいかわかりませんでした。

私が実際にやって確かめた確実に力になる模写サイト3選を紹介します。

模写にあたってはこちらのGoogleChrome拡張機能を紹介していますので合わせてご覧ください。

iSara

1つめはiSaraです。

iSara[イサラ]｜バンコクのノマドエンジニア育成講座

iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるまで永久サポート付きです。

isara.life

このサイトの特徴は10,000pxを軽く超える長めのLP(ランディングページ)で、腕試しにふさわしい静的なページとしてよく模写されています。

上下とても長いのでクラス名の枯渇であったり微妙に使い回しし辛いブロックだったりで最後まで書ききることは初めのうちは難しいですが、各セクション毎に区切ってゆっくりやってみましょう。

クラス名が悩む場合はこちらを参照してみてください。

画像の幅や余白までぴったり合わせる必要はなく、まずは全体を書ききって完成を目指してください。

余裕があればレスポンシブ(スマホ対応)もやってみましょう。

慶應義塾大学病院

2つめは慶應義塾大学大学院です。

慶應義塾大学病院

慶應義塾大学病院の公式Webサイトです。我々は福澤諭吉の精神にもとづき、患者さんに優しく信頼され、先進的医療の開発、人間性と深い医療人の育成を実行してまいります。

www.hosp.keio.ac.jp

このサイトにはデザインはシンプルながらもいろんなサイトで使われている基本がたくさん含まれていますので実力がつきやすいサイトです。

✓このサイトに実装されている機能

• メガメニュー
• カルーセルスライダー
• タブメニュー

どれも難しそうに見えますが、調べれば必ずできますので1つずつこなしてみましょう。

ちなみにCSSでも書けますが、JavaScript(jQuery)を使うことをおすすめします。

JavaScriptと聞いて毛嫌いする方もいるかもしれませんが、ここで身に付けておいて損はありません。

Norton

3つめはNortonです。

ウイルス対策のノートンセキュリティソフト｜ノートンストア

ノートンストアはスパイウェア・ウイルス対...

www.nortonstore.jp

ここでの鬼門は表の中にいくつも区切られた文字、数値、アイコンを並べることです

この表ですがいくつかやり方はあります。

FlexBox、float、table、gridレイアウトなど。

他にもグラデーション、レスポンシブもありますので最後まで気を抜かずに。

以上、今回は3つを取り上げました。

他にもおすすめサイトはありますが、その中でも今回紹介したこの3つはやっておいて損はありません。

模写する前にどの機能が、どんな動きをするかを確認することはコーディング前の段階では大事なことなのでまずは全体を把握することを忘れずに。