ayapis 公式サイト模写
公式サイトを紙で印刷
公式サイトを紙で印刷したものにタグなどを書き込みました。
まずは、pタグやimgタグなど細かいタグをつけていき、それらをまとめるsectionタグやarticleタグをつけました。
モバイルファーストでコーディング
ヘッダー部分のスマホ版の次に、ヘッダー部分のPC版を行い、メインビジュアル部分のスマホ版の次に、メインビジュアルのPC版というようにコンテンツごとにスマホ版→PC版の流れでコーディングしました。
※後から調整すると思わぬレイアウト崩れの危険があります。
スライダーやアコーディオンメニューの実装
ヘッダー部分のナビゲーションメニューのアコーディオンメニューを、jQueryを使用して実装し、バナーのスライダーをslickを使用して実装しました。
慣れてくるまでは、手書きでタグのメモを入れていました。
このコーディングで初めてFLOCSS設計を取り入れたところ、どこかで不具合が出たときの修正がとても楽になりました。
Font Awesomeも今では普通に使っていますが、このときに初めて知りました。
許可をいただき、コーディングしたサイトをアップしています。
BASIC認証有り ID：raise PW：tech
クリックするとスマホサイトが閲覧できます