コーディング実績4：建設会社HP【photoshopデザインデータからコーディング】

Yuki Arihara
OVERVIEW

制作日数「3日」。架空コーポレートサイト（トップページのみ）です。Photoshopデザインデータ（デザインは他の方が作成）をもとにコーディングしました。実装した機能やコーディングのアピールポイントに関しては下記をご覧ください。

目次

1. サイトURLと認証パスワード

2. 使用しているアニメーション機能の紹介（Javascript / jQuery）

3. コーディングのアピールポイント（HTML / CSS）

1. サイトURLと認証パスワード

下記URLからご確認いただけます。Basic認証をかけていますので、ユーザーIDとパスワードをご入力くださいませ。

https://arihara-yuki.com/portfolio-4-builder.arihara-yuki.com
ユーザーID：arihara-test-review
パスワード：arihara-test-review-pass

2. 使用しているアニメーション機能の紹介（Javascript / jQuery）

  • ハンバーガーメニューのクリック時、要素が右からスライドイン（アイコンも変化）
  • スクロールで要素がふわりとスライドアップ
  • フッターセクションの電話番号のリンクをスマートフォン端末以外では無効にする（jQuery使用）

3. コーディングのアピールポイント（HTML / CSS）

■トップページ

  • 複雑なレイアウトを実装。背景色を一部変更し、その上にカードが重なるように表示。さらに、記事タイトルの左端から画像を横切るようにラインを挿入。

  • Perfect Pixelを用いて、デザインカンプとの差異を限りなくゼロに
  • ヘッダーロゴ、フッターロゴやメインビジュアルのタイトル部分にはAltを設定。ページ読み上げ機能やSEOに配慮。
  • Newsセクションの日付にはtimeタグを使用し、datetime属性を指定。検索エンジンが正確な日付を認識できるように記述（↓）。