【HTML/CSS/JS コーディング練習】中級編：クリニックサイト
Web制作を勉強されている方の中で、基本的な文法事項やデザインツールの勉強方法を学んだが、実際にホームページやランディングページを作ったことがないという方は多いのではないでしょうか？
そのような方のために、Web制作会社が運営するプログラミングスクール「WithCode」から、模写コーディングに活用できるデザインカンプ・ソースコードを大公開します！
今回は、模写サイトの「第三弾」になります！クリニックのサイトとなっており、複数ページがある点、グーグルマップが埋め込まれている点、ホバー時のポップアップが実装されている点が今回の特徴です！
実際の案件だった場合の想定単価・納期・仕様も公開しますので、Web制作・Webデザインを学習中の方は、ぜひ積極的にご活用ください！
目次
練習方法
模写コーディングの練習方法は2種類あります。ご自身のスキルレベルに応じて、選んでください。
模写コーディングが難しいという方は、ソースコードを丸写しする写経からお試しください！
- 模写コーディング
公開している「デモサイト」を見ながらソースコードを写していく方法です。実際のサイトの動きを見ながら作成します。 - デザインカンプコーディング
次章以降に公開している想定仕様とデザインカンプを見ながら、実際のサイトを見ずにコーディングする方法です。こちらの方が難易度は高いと言えます。
事前確認事項
前提として、模写コーディングをするにあたり、可能な限りソースコードは見ないようにしましょう。また、細かいフォント等にもこだわらず、同じようなデザインを自分の技術力で再現できるか確認しましょう！
まずは、デザインを確認して全体のレイアウト構成を考えてから、各パーツのレイアウト構成決めてコーディングを始めましょう。
デモサイトを見ながらコーディングする際は、フェードインやホバーアクションなどのアニメーションを確認するようにしましょう。
完成イメージ
今回はレスポンシブ実装は不要です。
複数ページのサイトとなるのでトップページのみ添付します。
PC表示
PC表示
↓ その他 デザインカンプ(.png)
依頼内容
概要
都内の某眼科クリニックのランディングページ制作。
今回は、ページ数や機能が多いため、レスポンシブの実装は不要です！PC表示のみ作成してください。
想定単価
コーディングページ(8p)：10万円
素材
デザインデータ
↓ Figma デザインカンプ(.fig)
ダウンロードファイルを開くには、ツールのアカウントまたはインストールが必要です。
コーディング仕様
- コンテンツの幅
横幅が1500px、 内部コンテンツが1200pxです。 - index.html
背景色とコンテンツの重ねて表示させます。 - new.html
ページネーションは未実装で構いません。 - about.html
画像ホバー時にポップアップを表示させます。 - medical.html
ブロックを並列で表示させます。 - surgery.html
ブロックを並列で表示させます。 - disease/symptom.html
同様のレイアウトになります。 - access.html
ブロックを並列で表示させます。 - レスポンシブ対応
非対応。 - 必要な機能
ボタンホバー/ポップアップ/Google Map実装
確認作業
コーディングが完了したら、以下の「デモサイト」と「ソースコード」を参考に、レイアウトとコードをチェックしてみましょう！
デモサイト
デモサイトとコーディングしたサイトを比較して、デザインや動きなどを確認してみましょう。
ソースコード
コーディング例です。コーディングの方法に正解はないので、あくまでも参考としてご自身のコードと比較しながら確認してみましょう。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
↓
