GUIDELINE&TIPS

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

Written by EVOWORX

INDEX

推奨環境

OS

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

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

ブラウザ

Baseline Widely available に準ずる

ベースライン（広範囲に利用可能）には、過去 30 か月以上前のベースライン コア ブラウザセットで完全にサポートされていたすべてのウェブ機能が含まれます
ベースライン | web.dev

参考

ブレークポイント

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

以下に400pxを基準とした例を挙げます。

  • スマートフォン：@media (width < 800px)
  • タブレット：@media (800px <= width < 1200px)
  • PC：@media (1200px <= width < 1600px)

参考

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 16e：390 x 844

iPhone SE (3rd)： 375 x 667

iPad Pro 13" (M4)： 1032 x 1376

iPad Pro 11" (M4)：834 x 1210

iPad Air 13" (M3)：1024 x 1366

iPad Air 11" (M3) ： 820 x 1180

iPad 11" (A16)：820 x 1180

iPad mini 8.3"（A17 Pro） ：744 x 1133

サイズクラス

ブレークポイント

デバイスによる表現

コンパクトな幅

幅 600 dp 未満

縦向きのスマートフォンの 99.96%

中程度の幅

幅 600 dp 以上 840 dp 未満

縦向きのタブレットの 93.73%

縦向きの大型インナー ディスプレイのほとんど

拡大幅

幅 840 dp 以上 1,200 dp 未満

97.22% of tablets in landscape,

most large unfolded inner displays in landscape

幅広

幅 1,200 dp 以上 1,600 dp 未満

大型タブレット ディスプレイ

...

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

デスクトップ

  1. 1920 x 1080：25.48%
  2. 1536 x 864 ：9.8%
  3. 1366 x 768 ：6.11%

タブレット

  1. 768 x 1024：22.18%
  2. 810 x 1080：13.18%
  3. 820 x 1180：11.2%

モバイル

  1. 390 x 844：16.44%
  2. 393 x 852：10.11%
  3. 375 x 667：7.08%

Editorconfig

各プロジェクトで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や biome とも共存可能です。

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タグの内容と一致するようにする。

index.html
<!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

下記3ファイルを設定。

  • favicon.ico 32x32
  • favicon.svg48x48の倍数(144x144, 192x192など）
  • apple-touch-icon.png 180x180
<!-- <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">

参考

CSS

JavaScript

Javascript Standard Style(日本語訳) や、eslint、Biome等を用いて検証する。

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 等のライブラリの使用や制作環境は案件に応じて適したものを適宜選択すること。

最終更新：2025/08/21

PICK UP