Works

架空サイトのアイキャッチ

架空企業サイト

言語とツール: HTML/CSS/ Sass/ jQuery

制作期間:3日

ソースコード: 非公開

  • 概要
  • 制作フロー
  • 見どころ

クリ★スタさん(https://crestadesign.org/)が提供しているXDデザインカンプデータをもとにコーディングを行いました。

CSS設計のFLOCSSを導入したコーディングやjQueryのBGswitcherプラグインを使ったスライダーの実装を行っています。

STEP1

XDカンプをもとに静的コーディング

CSS設計のFLOCSSを導入しコーディングを行いました。

STEP2

レスポンシブ対応

スマホ画面に必要なハンバーガーメニューの実装や余白、コンテンツのレイアウトの調整を行いました。

STEP3

スライダーの実装

jQueryのBGswitcherプラグインを用いてファーストビューのスライダー機能を実装しました。

STEP4

ローカル環境構築・開発

本番環境への移行に向けてローカル環境で必須テンプレートタグの挿入やCSS、jQueryの読み込みなど必要最低限のWordPress化を行いました。

STEP5

本番環境へ移行

All in One Migrationプラグインを利用し本番環境へ移行しました。

完成

  • スライダー実装

    普段はslickプラグインを使っていましたが初めてBGswitcherプラグインでのスライダー実装を行いました。

  • ファーストビューを過ぎたらヘッダーを切り替える

    一定の高さスクロールをしたらヘッダーにクラスを付与するような記述をjQueryに書きヘッダーを切り替える実装を行いました。

Others

"> モンのポートフォリオ
"> 家計簿システム
架空サイトのアイキャッチ"> 架空企業サイト