Works

RaiseTech公式サイト模写のアイキャッチ

RaiseTech公式サイト模写

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

制作期間:25日

ソースコード: 非公開

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

エンジニアリングスクールRaiseTechの公式サイト(https://raise-tech.net/)の模写コーディングを行いました。
(模写コーディング当時のサイトのレイアウトに則っているため現在のサイトとは仕様が異なります。)
初めてのコーディング実践であったため検証ツールを参考にHTMLタグや構造、CSSプロパティを適宜調べながら実装しました。

STEP1

静的コーディング

検証ツールを参考に、分からないCSSプロパティや値を適宜調べながらピクセルパーフェクトを目指してコーディングを行いました。

STEP2

アコーディングメニュー実装(PC版)

ヘッダーメニューをホバーするとサブメニューが下がってくるアコーディングメニューを実装しました。

STEP3

レスポンシブ対応

タブレット・スマホ以外に3つのブレイクポイントを置きレスポンシブ対応を行いました。

STEP4

ハンバーガメニュー・アコーディオンメニュー実装(スマホ版)

jQueryのtoggleClassメソッドを用いてハンバーガーメニューの開閉を実装しました。アコーディングメニューの「+」と「ー」は疑似要素を用いて表示させて切り替えを行うよう実装しています。

STEP5

ローカル環境構築・開発

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

STEP6

本番環境へ移行

All in One Migrationプラグインを用いて本番ドメインへの移行を行いました。

完成

  • ハンバーガーメニュー+アコーディオンメニュー

    初めてのハンバーガーメニューの実装ということで数日間うまく実装できず苦戦しました。そこで1つのサイトのコーディング方法を真似るのではなく複数サイトのうまくいった部分を抽出して自己流のハンバーガーメニューを作成しました。またアコーディオンメニューはスマホレスポンシブ時の「+」「ー」に切り替わる実装に苦戦しましたが疑似クラスのdisplayプロパティで調整することでうまくいきました。

Others

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