ブリッジページコーディングに関するガイドライン
コーディング方針
基本的なコーディング手法は変わりませんが、ツールに反映する上で必要な与件がございます。
HTML構成
ツール反映の都合上、下記のラッパーDIVで作成してください。
scaleElmInner直下の要素はsectionタグを使用してください。
<html>
<haed>
</head>
<body>
<header></header>
<div class="scaleElmOverflow">
<div class="scaleElmWrap">
<main id="scaleElm">
<div class="scaleElmInner">
<!-- ここからセクション(sectionタグ) -->
</div>
</main>
</div>
</div>
<footer></footer>
</body>
</html>CSSの構成
リセットCSS
ツールで使用しているリセットCSSとコンテナクエリによる初期設定があります。
下記をコピペしてリセットCSSとして使用してください。
/* エディターとの共通リセットCSS
============================================================================= */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
&:focus-within {
scroll-behavior: smooth;
}
}
body {
line-height: 1.5;
letter-spacing: 0.08em;
text-rendering: optimizeSpeed;
word-wrap: break-word;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; // Safari
font-feature-settings: 'palt';
}
:where(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
max-width: 100%;
}
:where(img, picture, svg) {
height: auto;
vertical-align: bottom;
}
:where(ul, ol)[class] {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
/* BP共通パーツ
========================================================================== */
.scaleElmOverflow{
container-type: inline-size;
overflow: hidden;
}
#scaleElm{
transform-origin: top left;
}
.scaleElmInner{
@container (min-width:1025px){
width: 1920px;
}
@container (max-width:1024px) and (min-width:426px){
width: 1024px;
}
@container (max-width: 425px){
width: 425px;
}
@media screen and (max-width: 425px){
width: 425px;
}
}レスポンシブの対応について
レスポンシブの対応はメディアクエリではなく、コンテナクエリで実装となります。
ブレイクポイントは1024px と 425px の2箇所です。
SCSSの書き方
デバイスレイアウトごとに完全にスタイルシートが独立します。そのため同じレイアウトを実装するにもすべてのコンテナにコピペする作業が発生し、人的ミスや工数増が懸念されます。
メディアクエリでPCファーストのコーディングをするときと同様の手順でコーディングできるように、
各デバイスレイアウトを mixin 化してください。
PCのレイアウトを基準に、タブレット、SPに必要なレイアウトだけ上書きしていくイメージで作成をお願いします。
そして、それぞれのmixinをコンテナクエリで呼び出すような書き方をお願いします。
// PC用レイアウト
@mixin pc_layout(){
header{
width: 1000px;
background-color: red;
}
}
// TAB用レイアウト
@mixin tab_layout(){
header{
background-color: blue;
}
}
// SP用レイアウト
@mixin tab_layout(){
header{
width: 400px;
}
}
#scaleElm{
// 1024px~ のレイアウト（PC）
@container (min-width:1024px){
@include pc_layout();
}
// 426 ~ 1024px のレイアウト（Tab）
@container (max-width:1024px) and (min-width:426px){
@include pc_layout();
@include tab_layout();
}
// ~ 425px のレイアウト（SP）
@container (max-width: 425px){
@include pc_layout();
@include tab_layout();
@include sp_layout();
}
// iOS15以下用
@media screen and ( max-width: 425px ){
@include pc_layout();
@include tab_layout();
@include sp_layout();
}
}iOS15以下の対応について
iOS15以下はコンテナクエリが反映されないため、メディアクエリによる補填が必要です。
そのため、スマホ用のレイアウトでは各セクションごとにwidth:425pxを設定してください。
pc/tablet は scaleElmInner がその役割を果たしているので、セクションごとの width の記入は不要です。
例 :
// SP用のレイアウト
#scaleElm{
.section01{
width:425px // iOS15用
...
}
.section02{
width:425px // iOS15用
}
}CSSの構成
header と footer に適応させるCSSとメインのセクションに反映させるCSSを完全に切り分けてください。元ページのCSSがメインセクションに反映されないようにしてください。とくにリセットCSSなどは注意が必要です。元ページのCSSもパッケージ化するなどしてください。
メインのセクションは上述したように #scaleElem にてパッケージ化してください。
<head>
<!-- header と footer 用のCSS -->
<link rel="stylesheet" href="css/origin.min.css">
<!-- メインセクション用のCSS -->
<link rel="stylesheet" href="css/style.min.css">
</head>セレクタについて
p や span といったタグ名に直接スタイルをあてず、必ずclass名をつけた上でスタイルをあててくだい。
class名は任意で問題ないですが、当てはまるclass名がない場合はタグ名を直接付与してください。
# NG
p{
color : red;
}
span{
font-size: 16px;
}
# OK
.p{
color : red;
}
.span{
font-size: 16px;
}テキスト要素について
<div>タグ直下にテキストを挿入しないでください。
テキストを挿入する場合は、基本的に見出しタグか<p>で囲うようにしてください。
<span>タグは基本的に装飾目的に使用し、<p>の代わりに使用しないでください。
# NG
<div>こんにちは</div>
<div><span>こんばんは</span></div>
# ↑がダメで、これ以外であれば基本OK
# OK
<div><p>こんにちは</p></div>
<div><h2>こんばんは</h2></div>
<div><p>こんばんは。<span class="today">今日</span>も頑張ろう</p></div>
<div><a href="#">こんにちは</a></div> <!-- aタグでもOK -->
<section><p>おはよう</p></section>
疑似要素について
ツール反映上、before や after などの content で制御するような疑似要素の使用しないでください。
空divの利用は問題ないので、レイアウト上必要な場合は空divを用いてください。
使用できるタグについて
# セクション系
<div> <section> <article>
# コンテンツ系
<p> <h> <span> <img> <video> <br> <ul> <ol> <li>
# その他
<table>関連 <iframe> <dl><dt><dd> <hr>
※ 適宜追加予定不要なリソースファイルの削除
ブリッジページ反映に不要なリソースファイルは表示速度遅延の原因になるので削除してください。
noindexの挿入
<head>タグ内に必ずnoindexを挿入してください。
<meta name="robots" content="noindex">
画像ファイルのURLについて
画像ファイルのURLは本番反映時に supabase に移行します。
そのため画像URLを簡単に置換できるように変数等を活用してください。
// sassの場合の例
$imgPath : '../image/';
@mixin bg($filename) {
background-image:url( $imgPath + $filename );
}
// ejs の場合の例
<% const imgPath = 'image'; %>
<img class="img" src="<%= imgPath %>/logo.webp" alt="ロゴ" />witdh の指定について
max-width 、min-width は絶対使わないでください。ツール上で正しい挙動になりません。
通常の width の使用は問題ございません。
単位について
必ず px を使用してください。% やem 、 rem 、vw、vh 等は使用しないでください。