コーディング実績1：クリニックHP【XDデザインデータからコーディング】
OVERVIEW
制作日数「3日」。架空コーポレートサイトです。エンジニアの方が販売されているデザインをもとにコーディングしました。実装した機能やコーディングで工夫したポイントは下記をご覧ください。
目次
1. サイトURLと認証パスワード
2. 使用しているアニメーション機能の紹介（Javascript / jQuery）
3. コーディングで工夫したポイント（HTML / CSS）
1. サイトURLと認証パスワード
下記URLからご確認いただけます。Basic認証をかけていますので、ユーザーIDとパスワードをご入力くださいませ。
https://arihara-yuki.com/portfolio-1-clinic.arihara-yuki.com
ユーザーID：arihara-test-review
パスワード：arihara-test-review-pass
2. 使用しているアニメーション機能の紹介（Javascript / jQuery）
- ヘッダー・フッターセクションの電話番号のリンクをスマートフォン端末以外では無効にする（jQuery使用）
- スクロールで要素がふわりとスライドアップ
3. コーディングで工夫したポイント（HTML / CSS）
■トップページ
- Perfect Pixelを使い、カンプとの差異を限りなくゼロに
- 「お知らせ」ではテキストを全て１行に統一しているが、複数行でもデザインは崩れないように設計。※本作品は静的サイトですが、WordPress化してテキストに文字数制限をかけることも可能です。超えた場合は「...」などと表示させることができます。
- 全てのレスポンシブサイズにおいて、トップ画面のタイトルがイメージ画像の女性の顔に被らないように設定。また、文字サイズも画面幅に合わせて調節した。
■サイト全体の設定
- サイトタイトルやサイトディスクリプションを設定し、SEO対策