Works
エンジニアリングスクール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
">
">
">