newcal

京急沿線の魅力を掲載するサービスサイト、ニューカルのコーディングを担当しました。

制作概要

WordPress化など最終的な実装は別業者とのことで、HTML・CSS・JSで見た目の部分を作ることが主な役割でした。
とはいえ、動的になった場合も見越して組んでいく必要があったため、WordPressの実装経験が大いに役立ちました。

デザインはFigmaで、ページやパターン差分などが順次更新されていく中、フィックスしている部分を勧めていくという形でした。
はじめに全体を把握することができなかったため、どの部分が共通要素なのかがわからなかったりと進めづらい部分もありましたが、担当者とキャッチボールを重ねながら無事走り切ることができました。

命名規則

クラス名など命名規則の指定は特になかったものの、一つのスタイルシートで納品ということで、大まかではありますがBEM※のルールに則って構築しました。
理由としては、クラス名がユニークになることで他のCSSとの競合を避けられる点や、クラス名から構造がわかりやすく、どのスタイルがどの要素に適用されているのかなどを把握しやすいためです。

BEMとは

Block、Element、Modifierの略語で、HTMLおよびCSSのクラスにおける命名規則です。
例：.button, .button__icon, .button–primary
このようにクラス名で「役割・構造・状態」を明確に表現します。

注力した点

モバイル特化型サイトの特徴として、PCでは画面のどこでマウスホイールしてもコンテンツ部分だけがスクロールしていかなければいけません。
むやみにoverflow: hiddenで隠してしまうとスクロール自体ができなくなってしまうなどと調整には時間がかかりましたが、試行錯誤の上CSSのみでレイアウトを実現しました。