ウサギノネドコ
WEBサイト制作のコーディング練習をしています。公式素材を拝借しているため、アクセス制限をさせていただきます。
ウサギノネドコ
|
usagi (パスワード制限)
|
＜作品情報＞■サイト名：usagi
【URL】http://jewelry.jellybean.jp/wp08/limited/usagi/index.html
【担当作業】コーディング
【制作環境・ツール】Dreamweaver、SublimeText 3
【制作期間】2016年9月4日~9月9日
【制作期間】Chrome, Firefox, IE11
【詳細説明】
京都の製造会社ウサギノネドコサイトの画像コピーを使用し、HTML、CSS、JQueryで元のサイトと見た目、動作が同じようになるように制作しました。
整ったボックス配置を正確に再現しました。
一般的な明朝体システムフォントを使用しました。
レスポンシブ対応。スマートフォン表示ではナビゲーションボタンでメニューがスライドダウン表示します。見やすいサイズになるようにカラム数が変化します。トップ画像はSlickで自動スライドします。
ウィンドウ幅に応じてコンテンツ高さが変化するように制作しました。
認識している問題点と今後の課題
- スマートフォンでは明朝体表示されません。
- スマートフォンナビゲーションボタンタッチ時のアニメーション動作にやや不具合があります。
- スマートフォンでメニューがスライドダウンする時にページ全体が下にスクロールする機能をつけていません。
- メニューの詳細表示はお手本サイトでは2階層表示されていますが、練習サイトでは一階層までの表示になっています。
- スマートフォン表示時のトップナビゲーションデザインが若干違っています。
2017/01/21