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

プログラミング

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

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

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

iSara

1つめはiSaraです。

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

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

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

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

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

慶應義塾大学病院

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

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

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

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

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

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

cssでもできますが、JavaScript(jQuery)を使うことをおすすめします。

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

Norton

3つめはNortonです。

ウイルス対策のノートンセキュリティソフト|ノートンストア
ノートンストアはスパイウェア・ウイルス対...

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

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

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

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

 

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

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

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

模写したサイトを公開するときはベーシック認証を必ずかけるように!
タイトルとURLをコピーしました