GUIDELINE&TIPS

コーディングガイドライン

Written by EVOWORX

INDEX

推奨環境

OS

  • Windows：11、10（2025/10/14まで）
  • macOS： 最新3バージョン
  • iOS：最新2バージョン
  • Android：最新4バージョン

※macOS/Androidに関しては、サポート終了期間が明記されていませんが、セキュリティアップデートが配信されなくなったものを除外すると上記のようになります。

ブラウザ

  • Edge最新版
  • Chrome最新版
  • Firefox最新版
  • Safari最新版（macOS/iOSのバージョンに準ずる）
  • Android Chrome最新版

.browserlists記入例

> 0.5% in JP
last 2 versions
FF ESR
not ie >=11
not dead

参考

ブレークポイント

案件ごとにターゲットとする端末を定め設定してください。

以下に例を挙げます。

iPadを基準とした場合

  • スマートフォン：(max-width: 767px)
  • タブレット：(min-width: 768px) and (max-width: 1279px)
  • PC：(min-width: 1280px) and (max-width: 1439px)
  • ワイドスクリーン：(min-width: 1440px)

Tailwind.cssを基準とした場合

  • sm：(min-width: 640px)
  • md：(min-width: 768px)
  • lg：(min-width: 1024px)
  • xl：(min-width: 1280px)
  • 2xl：(min-width: 1536px)

参考

iPhone 16 Pro Max：440 x 956

iPhone 16 Plus / 15 Plus / 15 Pro Max / 14 Pro Max： 430 x 932

iPhone 14 Plus / 13 Pro Max：428 x 926

iPhone 16 Pro：402 x 874

iPhone 16 / 15 / 15 Pro / 14 Pro：393 x 852

iPhone 14 / 13 / 13 Pro： 390 x 844

iPhone 13 mini： 375 x 812

iPhone SE (3rd)： 375 x 667

iPad Pro 12.9" ： 1024 x 1366

iPad Pro 11" ： 834 x 1194

iPad Air 10.9"： 820 x 1180

iPad Air 10.5"：834x1112

iPad 10.2"：810 x 1080

iPad Pro 9.7"/ iPad Air 9.7" / iPad mini 7.9"： 768 x 1024

iPad mini 8.3"（6th〜） ：744 x 1133

Size class

Breakpoint

Device representation

Compact width

width < 600dp

99.96% of phones in portrait

Medium width

600dp ≤ width < 840dp

93.73% of tablets in portrait,

most large unfolded inner displays in portrait

Expanded width

width ≥ 840dp

97.22% of tablets in landscape,

most large unfolded inner displays in landscape

日本における画面解像度のシェア（2023/12-2024/12）

デスクトップ

  1. 1920×1080：27.25%
  2. 1536×864 ：11.04%
  3. 1366×768 ：7.51%

タブレット

  1. 768×1024：26.46%（iPad 9.7", iPad mini 7.9" 他）
  2. 810×1080：12.87% （iPad 10.2")
  3. 834×1194：7.04% （iPad Pro 11"）

モバイル

  1. 390×844：17.19% （iPhone 12〜14）
  2. 375×667：8.78%（iPhone SE 3rd）
  3. 375×812：7.48%（iPhone 13 mini / 12mini）

Editorconfig

各プロジェクトでEditorconfigを設定する。

設定例

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
indent_style = space
indent_size = 4
trim_trailing_whitespace = false

※PrettierでもEditorCofngは利用可能です。

HTML

指定がない限り WHATWG Living Standard (日本語訳) に準拠する。

参考

タグ・属性

  • 用途にあったタグを使用する。
  • 全て小文字で記載する。 id、class名も全て小文字、単語間はハイフンでつなぐ。
  • 終了タグの省略はしない。
  • imgタグ、picture内のsourceタグにはwidth/heightを指定する。loading / decording は使用箇所に応じて適宜選択する。

参考

アクセシビリティ

  • アウトラインを明確化する。
  • button main nav のような、タグ自体に意味があるものは role 属性は付加しない。
  • 最低限のキーボードアクセス、スクリーンリーダーでの読み上げに配慮する。
  • 指定がない場合、WCAG2.0（JIS X 8341-3:2016）のレベルA基準を満たすことを目標とする。

参考

見出し

基本的にh1は1ファイルに1つとし、titleタグの内容と一致するようにする。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<p>Site Name</p>
</header>
<main>
  <h1>Page Title</h1>
  <section>
    <h2>Heading</h2>
    <section>
      <h3>Sub Heading</h3>
    </section>
    <section>
      <h3>Sub Heading</h3>
    </section>
  </section>
</main>
<footer></footer>
</body>
</html>

文字参照・特殊文字

基本的には Google HTML StyleGuide と同様にHTMLで使用される < > " & や 空白文字以外には使わない方針とする。

The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces).

※ href のパラメータとしての&も&ampとする。

※空白文字はノーブレークスペース&nbsp;や単語結合子&#8288;、ソフトハイフン&shy;などに相当。

参考

パンくず

デザイン上のマークアップとは別に、ld+jsonで記載

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/books",
      "name": "Books"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/books/authors",
      "name": "Authors"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://example.com/books/authors/annleckie",
      "name": "Ann Leckie"
    }
  },{
    "@type": "ListItem",
    "position": 4,
    "item": {
      "@id": "https://example.com/books/authors/ancillaryjustice",
      "name": "Ancillary Justice"
    }
  }]
}
</script>


<ol>
  <li><a href="http://www.example.com/books">Books</a></li>
  <li><a href="http://www.example.com/sciencefiction">Science Fiction</a></li>
  <li><a href="http://www.example.com/books/sciencefiction/awardwinners">Award Winners</a></li>
<ol>

Favicon

下記5ファイルを設定。

  • favicon.ico 32x32
  • favicon.svg48x48の倍数(144x144, 192x192など）
  • apple-touch-icon.png 180x180
  • icon-192.png 192x192
  • manifest.json
<!-- <head> -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

/* manifest.json */
{"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }
]}

※PWAの場合は512pxのスプラッシュ画像も含める

参考

CSS

JavaScript

Javascript Standard Style(日本語訳) に準拠する。

※セミコロン必須の JavaScript Semi-Standard Style も有。

Core Web Vitalsについて

Core Web Vitalsの指標 に基づき、LCP2.5秒以内、INP200ミリ秒未満、CLSスコア0.1未満を可能な範囲で目指す。

Git

運用方法

  • 本番と同じ状態のものを mainとし、このブランチでは作業しない。
  • ステージング環境やテスト環境で状態が異なる場合は stage test などのブランチを作成し各環境に合わせる。
  • 作業時は update {作業内容} {作業者名} 等、別のブランチに分岐させて作業し、作業完了後は責任者にプル（マージ）リクエストを作成する。

コミットコメント

1行目に簡単な説明

2行目は空行

3行目以降に詳しい説明（任意）

例）

[10/25更新] ABOUT文言修正 

「エヴォワークスとは」→「EVOWORXとは」に修正

その他

Wordpress、MovableType のようなCMS、Astro、11ty などのSSG、Next.js、Nuxt.js、Svelte 等のライブラリの使用や制作環境は案件に応じて適したものを適宜選択すること。

最終更新：2024/12/24

PICK UP