Coding Lab
カーソルを
画像の上に
画像の上に
- 制作ポイント Site Point
-
装飾の多さとスライダー２種類、問い合わせフォームの設置など設計時点でのコンテンツ量の豊富さが特徴の架空のキャンペーンサイト。
オンラインスクールの課題として取り組みました。
モバイルフレンドリーな実装を意識し、画像もSP用とPC用で切り替えるなど細かな工夫を凝らしています。
- コーディング方針 Coding Approach
-
変数（$font-size-base, $main-color など）やミックスイン（@mixin mq）を定義し、スタイルの一元管理と効率化を図っています。
BEM記法の命名規則を採用し、クラス名の衝突を防ぎつつ要素の関係性を明確にしています。
またブレイクポイントを細かく設定することで多用している装飾が表示崩れなどを起こさないよう配慮しています。
- 保守性を高める設計 Maintainability
-
.button や .heading などの共通パーツを独立したクラスとして定義し、再利用性を高めています。
これにより、新しいページやセクションを追加する際も既存のパーツを組み合わせて効率的に構築できます。
プロパティの並び順などにも規則性を持たせ、整然と整理することで第三者の修正に負担がないよう考慮しています。 - 使用技術 Skills
-
・HTML, CSS (SCSS/BEM)
・JavaScript (jQuery)
・Swiper.js - 制作期間 Duration
- 180時間
- 詳細 Details