↑パンくず
ipadでヘッダーがずれるボタンが崩れる
fontfamily shopifyにあわせる
【済】マイメニュークリック時の上下余白
【済】マイメニューのオンマウス時の余白
→ メニューの上下幅調整しました。
警告の色をアプリに合わせる
table th LightGry 横のみ ２つとも
【済】fontfamiry shopifyに合わせる
サイドナビ 情報を表示
時限
アイコンの画像登録
スマホ時のメニュースクロール
bootstrap をローカルに置く
fontアイコンダウンロードできるか
メインコンテンツの上下左右余白：1.5rem
パンくずは余白なし
デザイン参考
メモ
https://getbootstrap.jp/docs/5.0/content/typography/#headings
http://bjankord.github.io/Style-Guide-Boilerplate/demo.html#sg-markup-base-hr-html
チートシート5 https://getbootstrap.jp/docs/5.0/examples/cheatsheet/#
チートシート4 https://hackerthemes.com/bootstrap-cheatsheet/
アコーディオン https://cotodama.co/bootstrap4-accordion/
デザインレギュレーション作成
・shopifyのデザインをベース
・フォント
・見出し
・margin
・boldは基本の文字には使わない
共通ルール
- 英数は半角で記述
※メールなどの装飾できないテキストは全角
配色
文字
基本のフォントサイズ 基本のフォントサイズ 基本のフォントサイズ
システム的な指定としては
html：62.5%
body：1.5rem
文字装飾
テキストすべてを太字にするなど、下記以外を目的とする装飾は禁止
a : リンクリンクリンク
s :
打ち消し線打ち消し線打ち消し線
small : 免責・警告・著作権などの注釈や細目
strong : 強い重要性を表す
em : 強勢する（アクセントを付ける）箇所を表す
abbr : 略語や頭字語であることを表す
文字色
muted
primary
secondary
warning
danger
success
info
ヘッダーナビ
デザインは ↑参照 ナビ横幅、ヘッダーの高さを追加
| ナビ全体 | 横幅 | 239px + border 1px |
| 余白 | 上：3rem / 左右：0rem | |
| ロゴ | 高さ | 50px ※アイソレーションゾーン含むロゴを使用 |
| 高さ | ||
| アイコン | ダウンロード |
https://icons.getbootstrap.com/
|
| サイズ | 20 x 20 |
サイドナビ
デザインは←参照 ナビ横幅、ヘッダーの高さを追加
| ナビ全体 | 横幅 | 239px + border 1px |
| 余白 | 上：3rem / 左右：0rem | |
| リンクテキスト(大メニュー) | 文字サイズ | 1.6rem |
| 余白 | 上下：10pxm / 左右：15px | |
| リンクテキスト(サブメニュー) | 文字サイズ | 1.４rem |
| 余白 | 上：10px / 右：0 / 下：10px / 左：25px | |
| アイコン | ダウンロード |
https://icons.getbootstrap.com/
|
| サイズ | 20 x 20 |
見出し
見出しとしての機能のため、文字サイズの調整としては使用しないこと
| 文字サイズ | h1 | calc(1.425rem + 2.1vw) |
| h2 | calc(1.425rem + 2.1vw) | |
| h3 | calc(1.325rem + .9vw) | |
| h4 | calc(1.275rem + .3vw) | |
| h5 | 1.25rem | |
| h6 | 1rem | |
| 余白 | 上下：0.5em / 左右：0 | |
見出し 左揃え
H1_見出し1 サンプルほげほげ
見出しの上下の余白は0.5em(文字サイズの50%)です。見出しの上下の余白は0.5em(文字サイズの50%)です。
本文サンプルです。本文サンプルです。
H2_見出し2 サンプルほげほげ
見出しの上下の余白は0.5em(文字サイズの50%)です。見出しの上下の余白は0.5em(文字サイズの50%)です。
本文サンプルです。本文サンプルです。
H3_見出し3 サンプルほげほげ
見出しの上下の余白は0.5em(文字サイズの50%)です。見出しの上下の余白は0.5em(文字サイズの50%)です。
本文サンプルです。本文サンプルです。
H4_見出し4 サンプルほげほげ
見出しの上下の余白は0.5em(文字サイズの50%)です。見出しの上下の余白は0.5em(文字サイズの50%)です。
本文サンプルです。本文サンプルです。
h5_見出し5 サンプルほげほげ
見出しの上下の余白は0.5em(文字サイズの50%)です。見出しの上下の余白は0.5em(文字サイズの50%)です。
本文サンプルです。本文サンプルです。
H6_見出し6 サンプルほげほげ
見出しの上下の余白は0.5em(文字サイズの50%)です。見出しの上下の余白は0.5em(文字サイズの50%)です。
本文サンプルです。本文サンプルです。
見出し 中央揃え
すべての見出しを中央揃えにする
OK
見出し1 サンプルほげほげ
見出し2 サンプルほげほげ
本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。
本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。
見出し2 サンプルほげほげ
本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。
本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。
NG
見出し1 サンプルほげほげ
見出し2 サンプルほげほげ
本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。
本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。
見出し2 サンプルほげほげ
本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。
本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。本文サンプルです。
行間
同じ段落です。同じ段落です。同じ段落です。同じ段落です。同じ段落です。
同じ段落です。同じ段落です。同じ段落です。
段落が変わります。行間は0.5文字分です。段落が変わります。行間は0.5文字分です。段落が変わります。行間は0.5文字分です。
セクション間
セクション1 サンプルほげほげ
セクション間は1rem。セクション間は1rem。サンプルテキスト。サンプルテキスト。テキストほげほげ。テキストほげほげ。
サンプルテキスト。サンプルテキスト。テキストほげほげ。テキストほげほげ。サンプルテキスト。サンプルテキスト。テキストほげほげ。テキストほげほげ。
セクション2 サンプルほげほげ
セクションとセクションの間は1rem。サンプルテキスト。サンプルテキスト。テキストほげほげ。テキストほげほげ。
サンプルテキスト。サンプルテキスト。テキストほげほげ。テキストほげほげ。サンプルテキスト。サンプルテキスト。テキストほげほげ。テキストほげほげ。
ボタン
目立たせたいリンクだと思うので、max-widthを300に設定
w-25、w-50、w-75、w-100で、指定可能(数字は%)
table
カラム内の余白：12px
見出しの背景色：primary
見出しの文字色：white
| Type | Column heading | Column heading | Column heading |
|---|---|---|---|
| Default | Column content | Column content | Column content |
| Default | Column content | Column content | Column content |
| Default | Column content | Column content | Column content |
| Default | Column content | Column content | Column content |
その他の色
| Primary | Column content | Column content | Column content |
|---|---|---|---|
| Secondary | Column content | Column content | Column content |
| Success | Column content | Column content | Column content |
| Danger | Column content | Column content | Column content |
| Warning | Column content | Column content | Column content |
| Info | Column content | Column content | Column content |
| Light | Column content | Column content | Column content |
| Dark | Column content | Column content | Column content |
フォーム
全体の横幅：最大950px
配置：中央
項目と項目の間：0.5rem
送信ボタンの上部余白：3rem
バッヂ
Primary Secondary Success Danger Warning Info Light Dark
New2021/6/15 更新
不具合等アラート
枠線：基本色の50%
枠線の太さ：1px
枠とのpadding：1rem
ヘッダー文字：h4同等
お知らせ(info) 長期休暇・会員さんへのお知らせ等
夏季休業期間につきましては下記のとおり、お知らせいたします。
詳細はこちらをご確認ください。
休業期間
2021年8月9日(月) 18:00〜
2021年8月16日(月) 9:59
不具合のお知らせ(danger) 不具合等緊急のお知らせ
不具合発生時間：2021/6/15 1:00
不具合内容：Chatworkのお知らせが届かない
本日1時までの投稿は確認できています。
それ以降に来ている、問い合わせやフォーラムなど、自動で投稿される通知が1時以降届いていない可能性がございます。
お手数ですが、メール等、ご確認頂ますようお願いいたします。