HTMLの構造について
セマンティック要素（header, main, section, nav, footer）で構造化。セクションID（#concept, #featureなど）を付与し、ナビゲーションのアンカーリンクに対応。問い合わせフォームはaria-labelを付与してアクセシビリティを確保。
CSS設計の方針
- 命名: BEM風にモディファイアで表現（例: .header__nav–item, .contact__data-radio–item）
- モバイルファースト: 基本をSP、768px以上でPCを@media (min-width: 768px)で追加
- 変数管理: アクセントカラー（#3EA1D1）は予め定義し再利用
- リセット: プロジェクト用にリセットCSSを用意
レスポンシブ対応で工夫した点
- 768pxブレークポイントで横並び→縦並びに切り替え
- display: flexでflex-directionをcolumn/row切替
- ハンバーガーはモバイルのみ表示（.u-sp, .u-pcで表示切替）
- pictureで適切な画像を読み込み
- calc(100vh – 60px)やposition: fixedで固定高さに配慮
JavaScriptで実装した機能
- ドロワー: jQueryでtoggleClass(“is-active”)、ハンバーガーアイコンとドロワーの連動
- スムーズスクロール: 固定ヘッダー分を考慮し、offset().top – ヘッダー高さ – 余白（20px）で補正
- メニュー閉じる: ドロワー内アンカーリンクでremoveClassを実行
フォーム要素の実装で工夫した点
- カスタムラジオボタン:
- inputはopacity: 0で非表示、position: absolute
- :checked + labelでバックグラウンド変更
- PCでは三角形の矢印を::afterで表現
- カスタムチェックボックス: checked.pngを使いopacityで表示/非表示を切り替え
- レスポンシブ対応: .contact__dataはモバイル100%、PC320px幅
パフォーマンスやブラウザ対応
- ベンダープレフィックス: -webkit-等で対応
- picture: 適切な画像を読み込み
- フォント: preconnectでGoogleフォントを先行読み込み
- aria-label等でアクセシビリティを確保
このコーディングで最も工夫した点
スムーズスクロールの補正。固定ヘッダー分を差し引き、スクロール後の見え方を調整した実装により、全セクションで表示が安定した。