毎日弁当の中身に困っているエンジニアへ | お弁当をランダムで決められるサイトを作ってみた
![](https://images.microcms-assets.io/assets/a825b67e3494487eb265986360c81314/9a7a202604a44ab3824f7adb845c447b/lunch_for_engineer.png)
※macOS/Androidに関しては、サポート終了期間が明記されていませんが、セキュリティアップデートが配信されなくなったものを除外すると上記のようになります。
> 0.5% in JP
last 2 versions
FF ESR
not ie >=11
not dead
案件ごとにターゲットとする端末を定め設定してください。
以下に例を挙げます。
(max-width: 767px)
(min-width: 768px) and (max-width: 1279px)
(min-width: 1280px) and (max-width: 1439px)
(min-width: 1440px)
(max-width: 479px)
(min-width: 480px) and (max-width: 799px)
(min-width: 800px) and (max-width: 1119px)
(min-width: 1120px) and (max-width: 1439px)
(min-width: 1440px)
iPhone 15 Plus / 15 Pro Max / 14 Pro Max:430 x 932
iPhone 14 Plus / 13 Pro Max:428 x 926
iPhone 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"(6th) :1024 x 1366
iPad Pro 11" (4th) :834 x 1194
iPad (10th) / iPad Air (5th):820 x 1180
iPad mini (6th) :744 x 1133
320dp: 通常のスマートフォンの画面(240x320 ldpi、320x480 mdpi、480x800 hdpi など)。
480dp: 5 インチ未満の大画面スマートフォン(480x800 mdpi)。
600dp: 7 インチ タブレット(600x1024 mdpi)。
720dp: 10 インチ タブレット(720x1280 mdpi、800x1280 mdpi など)。
1920×1080
:26.87%1536×864
:11.58%1366×768
:10.32%768×1024
:38.41%(iPad 〜7th、iPad mini 〜5th 他)810×1080
:9.98% (iPad 7th〜9th)834×1194
:5.28% (iPad Pro 11")390×844
:18.49% (iPhone 12〜14)375×667
:14.05%(iPhone SE 3rd)375×812
:11.59%(iPhone 13 mini / 12mini)各プロジェクトで 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は利用可能です。
指定がない限り WHATWG Living Standard (日本語訳) に準拠する。
img
タグ、picture
内のsource
タグにはwidth
/height
を指定する。loading
/ decording
は使用箇所に応じて適宜選択する。button
main
nav
のような、タグ自体に意味があるものは role
属性は付加しない。基本的に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>
下記5ファイルを設定。
32x32
180x180
※サイズ目安180x180
192x192
<!-- <head> -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.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のスプラッシュ画像も含める
font-feature-settings
には palt または pkna を指定する。Javascript Standard Style(日本語訳) に準拠する。
※セミコロン必須の JavaScript Semi-Standard Style も有。
Core Web Vitalsの指標 に基づき、LCP2.5秒以内、FID100mミリ秒未満、CLSスコア0.1未満を可能な範囲で目指す。
main
とし、このブランチでは作業しない。stage
test
などのブランチを作成し各環境に合わせる。update
{作業内容}
{作業者名}
等、別のブランチに分岐させて作業し、作業完了後は責任者にプル(マージ)リクエストを作成する。1行目に簡単な説明
2行目は空行
3行目以降に詳しい説明(任意)
[10/25更新] ABOUT文言修正
「エヴォワークスとは」→「EVOWORXとは」に修正
Wordpress、MovableType のようなCMS、Astro、11ty などのSSG、Next.js、Nuxt.js、Svelte 等のライブラリの使用や制作環境は案件に応じて適したものを適宜選択すること。
最終更新:2023/10/24