このセクションのチェックは以下の手順でCSSを開いて行ってください。
カスタムCSSを開く
チェック箇所を表示する
ネストの構造を確認する
独自クラスをそれぞれ確認する
このセクションのチェックは引き続きカスタムCSSを開いて行ってください。
スタイルがどこに記述されているかを確認する
sectionやrow(行)、col(カラム)、componentといったエリアやパーツに自動で生成されるクラスに対して、スタイルが直書きされていないかをチェックします。
命名規則に合った独自クラスを付与し、それに対してスタイルが記述されているかを確認します。
エリアのクラス名も確認する
太字の箇所を確認する
CSSで太字設定を行うと、お客様が編集画面から太字を設定したり、解除したりできなくなるので注意が必要です。
「カラム内要素の縦位置」を設定している箇所を探す
その上で行(row)に対してflexが適用されている箇所を確認する
ボックスシャドウが適用されている箇所を確認する
(値が調整されている場合)自動出力クラスに対しての記述か確認する
お客様が必要に応じて影をワンクリックでつけたり外したりできるようにするため、調整用のスタイルが自動出力クラスに対して記述されているかを確認します。
ボックスリンクが適用されている箇所を確認する
(hover時の挙動が調整されている場合)自動出力クラスに対しての記述か確認する
CSSで挙動を調整している場合、調整用のスタイルが自動出力クラスに対して記述されているかを確認します。
チェックを行うページの編集画面を開く
全てのチェック対象ページの編集画面を確認する
エラーの箇所がないか確認する
詳細は編集画面の崩れについてのページをご確認ください。
公開ページを開き、デベロッパーツールを起動する
エリアやパーツを増減させる
エラー表示になっていないか確認する
公開ページを開き、デベロッパーツールを開く
記事リストパーツのクラスを変更する
それぞれのスタイル型を確認する
フォームのページの公開ページを開く
デベロッパーツールを開き、フォームに付与されているクラスを探す
デザイン再現の観点から更新性が保てない場合、また操作に影響を及ぼす場合は、
ディレクターと認識を合わせた上で引き継ぎを記載する必要があります。
引き継ぎの内容をエリアごとに分類し、Step 7【ディレクター引き継ぎ】に記載のうえご共有ください。
© Basic Inc. All Rights Reserved.