メインコンテンツまでスキップ

コーディング制作の進行イメージ

コーディングの生産性と品質を保つため、制作のポイントや注意する点を記載しています。

注記

フロントエンド実装を除いた、HTMLコーディングの範囲となります。

備考
  • 記載内容は一例となります。プロジェクトの要件やスケジュールに基づいて参考にしてください。
  • 前提： 以下の場合を想定しています。実施すると、プロジェクト全体の進行がスムーズになります。
    • プロジェクト：
      • 大規模なプロジェクトの場合
      • 長期的な運用や改修を見据えたプロジェクトの場合
    • 体制： 複数の会社や担当者が関わり、分担して作業する場合

はじめに​

CMS上で再利用可能なコンポーネント設計思想でコーディングをすることが重要です。

コンポーネント化の一例​

Image from Gyazo

  • ヘッダ
  • フッタ
  • 見出し
  • ボタン
  • 記事の一覧
  • 一覧に表示するカードUI
  • ページネーション など

資料の確認​

事前に以下を確認してください。

  • ページリスト（サイトマップ）
  • 画面設計書、ワイヤーフレーム
確認ポイント

ページリストから「CMSテンプレート化する動的ページ」か、「静的なページ」なのかを確認します。

ページ単位の確認​
  • 「CMSで出力する項目」と「そうでないもの」を確認します。
  • なかでも、「CMSのエディタ入力（HTMLで出力する項目）」は運用に関する考慮が必要なものとなりますので後述します。
  • CMSで出力する項目においては、「パターン違い」や「要素の有無」での表示がどうなるか等も確認します。

1. 基本的なポイント​

CSSの設計影響範囲や用途が分かるように、CSSの設計や命名規則をルール化します。リポジトリのREADMEまたはコンポーネント一覧に記載しましょう。例として、弊社では主に以下を採用しています。
  • CSS設計：FLOCSS
  • 命名規則：BEM
変数の使用全体のスタイル統一のため、サイト共通で使用するスタイルはCSS変数またはSassの変数で定義します。
  • 使用カラー一覧
  • フォント情報：フォントサイズ、フォントファミリー
  • 余白：sm / md / lg / xlなどを用意しておくと便利です。
  • border-radius
  • transition： 各値を用意しておくと便利です。
ユーティリティclassCSSフレームワークを利用しない場合は、余白やフォントサイズ、displayの調整用スタイルを用意しておきます。
レスポンシブ対応
  • デバイスごとにCSSファイルは分けず、共通のファイルとします。メディアクエリを利用して切り替えます。
  • ユーザー層の主なデバイスを確認し、メディアクエリをモバイルファーストにするかどうかに反映します。
  • PC/SPでデザインが異なる場合でも、可能な限り1つのソースで対応します。
コンポーネント化
  • UI単位：コンポーネント一覧を用意します。
  • ブロック単位：サイト内で使用する共通のパーツ・ブロックはコンポーネント化して呼び出します。
リンク設定
  • <a href="#">一覧を見る</a>のような記述はせず、画面設計書やデザインを確認し、リンク先を設定してページ遷移できるようにしてください。
  • 別タブで開く外部リンクにはrel="noopener"を必ずつけてください。
その他
  • ミックスインを利用してコードの重複を避けましょう。
  • テンプレート化するページでパターンによる表示が異なる場合は、1枚に全パターン入れるようにします。

2. 再利用可能なコーディングのポイント​

スタイルは特定のページだけで使えるものではなく、他のページでもソースが再利用可能なコーディングをします。

全体​

セレクターにスタイルをあてない、セレクターの先頭に要素を付けない
NG  h4.heading
OK  .heading

NG  .link a
OK  .link-title
特定のページ配下でしかスタイルが当たらないセレクターの指定はしない
NG  #column-page .heading
OK  .column-heading

フロントエンド実装時に<div>などのwrapper要素を追加することがあります。 wrapper要素を追加しても破綻しないように設計します。

特定の階層に置かないとスタイルが当たらないセレクターの指定はしない
NG  #column-page > #column-pickup > .column-list
OK  .column-list

フォーム​

Kuroco側でname属性を設定するため、jsやcssのセレクターはidやclass、data属性などを使用してください。

セレクターにname属性を使用しない
NG  input[name="company-name"]
OK  .input-company-name

3. パフォーマンスへの対応​

ローカル環境やモックアップの環境では問題がなくても、実装後のサイト環境では、ファイルの読み込みでページの表示速度が遅くなったり、表示がカクついたりする場合があります。

Webフォントネットワーク環境が遅い場合でも対応できるようにしてください。
  • display: swapの対応
  • 利用範囲が一部の場合はテキストをSVGに置き換える
画像
スライダー2枚目以降LazyLoadingオプションを設定するなどを考慮します。

4. WYSIWYGエディタ用のコーディング​

WYSIWYGエディタに入力したHTMLにスタイルを当てる場合の確認点や注意点を記載します。 事前に画面設計書でエディタを使用するエリアがあるかを確認してください。

全体​

WYSIWYGエディタにスタイルを当てる場合、wrapper要素のセレクターのみを指定し、要素にスタイルを指定します。

エディタにwrapper要素をつけます
// html
<div class="editor">
  // エディタから出力されたHTMLが入ります
</div>

// scss
.editor {
  h1 { }
  p { }
  ul:not([class]) { } // class付与時とスタイルを分けたい場合の記述
}

要素の確認​

使用するツールバーのボタンを確認し、一通り標準的なデザインが当たっているかを確認します。特にreset.cssを入れていて、classを付与しないとスタイルが当たらない状態になっている場合はご注意ください。

WYSIWYGエディタのツールバーのボタンにより挿入される代表的なタグ一覧
<h1>
<h2>
<h3>
<h4>
<p>
<strong>
<i>
<u>
<a>
<figure>
<img>
<oembed>
<table>
<ul>
<ol>
<blockquote>

CKEditorの仕様による注意点​

Kurocoでは CKEditor5を利用しています。エディタ内で以下のコーディングはできませんのでご注意ください。 複雑なHTMLを入力したい場合は、入力欄の形式をWYSIWYGエディタからHTML形式に変更してください。

中身が空のタグは置けません
OK  <i>nbsp;</i>
NG  <i></i>
<a>タグ内にブロック要素は置けません
OK  <a href="#"><span>Inline text</span></a>
OK  <a href="#"><img src="path.png"></a>

NG  <a href="#"><div>Div Block</div></a>
NG  <a href="#"><p>Text Block</p></a>
<span>タグは入れ子にできません
OK  <span>SpanText</span>
NG  <span>SpanText<span>Child</span></span>
1つのブロック要素内で、<span>タグを複数付ける場合に制限があります
// class名をつける、且つ別のclass名を使う必要があります
OK  <div><span class="span1">span1</span><span class="span2">span2</span></div>

NG  <div><span>No ClassName</span><span>No ClassName</span></div>
NG  <div><span class="span1">span1</span><span class="span1">span1</span></div>

以下のような場合（インライン要素）に<p>タグが差し込まれます。

テキスト
<!-- 記述時 -->
Text <span>SpanText</span>

<!-- 変換後 -->
<p>Text<span>SpanText</span></p>

 <!-- <p>に変換されない記述方法 -->
<div>Text<span>SpanText</span></div>
画像
<!-- 記述時 -->
<img src="path.png">

<!-- 変換後 -->
<p><img src="path.png"></p>

 <!-- <p>に変換されない記述方法 -->
<div><img src="path.png"></div>
リンク
<!-- 記述時 -->
<a href="#">ButtonLink</a>

<!-- 変換後 -->
<p><a href="#">ButtonLink</a></p>

 <!-- <p>に変換されない記述方法 -->
<div><a href="#">ButtonLink</a></div>
<dl>
<!-- 記述時 -->
<dl>
  <dt>Heading</dt>
  <dd>Content</dd>
</dl>

<!-- 変換後 -->
<dl>
  <dt><p>Heading</p></dt>
  <dd><p>Content</p></dd>
</dl>

5. その他の注意点​

  • metaタグまわりを設定します
  • 画面仕様書を確認してページタイトルやURLを適切に設定します

サポート

お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。

フォームから問い合わせをする
Slackコミュニティに参加する