基本ルール

既存サイトで気になるところをピックアップ。

自動インデントや整形機能などについて

テキストエディタに搭載されていたりする自動インデント整形機能は、カスタマイズをして綺麗に整えられるものを除いて、使用しないようにする。

後述にあるような、間違った位置での改行や、可読性の低下を招く事がある。

H1〜H6

Hタグはタイトル要素。文を入れない。

BR

スペースを開けるために、連続でBRタグを使用しない。

</p>閉じタグ直前の<br>は不要のため付けない。

<p>
    テキスト1<br><br>
    テキスト2<br>
</p>

正しくは<p>タグなどにmargin-bottomなどを設定し、余白を作る。

<p style="margin-bottom: 1em;">
    テキスト1
</p>
<p>
    テキスト2
</p>

スタイルを使った最後のPタグ以外にマージンを付ける例

【HTML】
<div class="textBox">
    <p>
        テキスト1
    </p>
    <p>
        テキスト2
    </p>
</div>

【SCSS 例1】
.textBox p:not(:last-child){
    margin-bottom: 1em;
}

【SCSS 例2】
.textBox{
    display: flex;
    flex-direction: column;
    gap: 15px 0;//余白は好みで
}

BR付け忘れと半角スペースの関係

このような書き方をすると、ブラウザで表示した時に半角スペースが生まれる。

【［発揮する、］にコピペ時BR付け忘れ】
<p>
    激しい風の環境下で効果を発揮する、
    スタンドの安定性を高めるための「おもり」です。
</p>

【スマホ時にだけ表示するBR設定時】
<p>
    激しい風の環境下で効果を発揮する、<br class="sp">
    スタンドの安定性を高めるための「おもり」です。
</p>
.sp{
    display: none;
    @media screen and (max-width: 576px) {
        display: block;
    }
}

【PCブラウザで見た時 半角スペースが生まれる】
激しい風の環境下で効果を発揮する、 スタンドの安定性を高めるための「おもり」です。

正しい例

【［発揮する、］にコピペ時BR付け忘れ】
<p>
    激しい風の環境下で効果を発揮する、<br>
    スタンドの安定性を高めるための「おもり」です。
</p>

【スマホ時にだけ表示するBR設定時】
<p>
    激しい風の環境下で効果を発揮する、<br class="sp">スタンドの安定性を高めるための「おもり」です。
</p>
.sp{
    display: none;
    @media screen and (max-width: 576px) {
        display: block;
    }
}

【PCブラウザで見た時 半角スペースが出なくなる】
激しい風の環境下で効果を発揮する、スタンドの安定性を高めるための「おもり」です。

PDFやその他情報源からテキストをコピペする場合は特に注意が必要。例では区切りがいいところで半角スペースが生まれているが、コードエディタの機能などで自動インデント整形を行った時に、商品名の途中などで改行されてしまうと、間違った商品名として表記されてしまう。

インデントを揃える

1インデントは半角スペース4つ分で統一する。

どのタグがどんな要素を括っているかを、頭と尻を揃えることで見やすく整える。インデントを揃えることで</div>の忘れなどを防止することが出来る。

短い要素が入っているものは1行で書いてもいいが、基本的には要素に1段加えて書く。括っているタグが、ブロック要素かインライン要素かも考慮する。インライン要素（strongなど）の場合は、基本改行なしで書くが、下記のようなブロック要素を子に持つ<a>タグの場合は、可読性を重視して書く場合もある。

【悪い例】
<div>
    <h1> タイトル </h1>
<p> テキストテキストテキスト
<strong>テキスト</strong>テキスト<br>
    テキストテキスト</p>
<p>テキストテキスト
</p>
</div>
<a href="https://www.google.com"><div class="imgBox"><img src="../img.jpg" alt=""></div>
<div class="textBox">
<p>テキストテキスト</p><p>テキストテキスト</p>
</div>
</a>

【良い例】
<div>
    <h1>タイトル</h1>
    <p>
        テキストテキストテキスト<strong>テキスト</strong>テキスト<br>
        テキストテキスト
    </p>
    <p>テキストテキスト</p>
</div>
<a href="https://www.google.com">
    <div class="imgBox"><img src="../img.jpg" alt=""></div>
    <div class="textBox">
        <p>テキストテキスト</p>
        <p>テキストテキスト</p>
    </div>
</a>

英数字の統一

基本的に英数字は半角で統一する。特に住所は、そのままコピペで持ってくると混在しているので注意。

商品名などの正規表現が全角英数字の場合はその限りではない。

タグとテキストの半角スペース

自動インデント整形などを使用した場合、このような表記になる場合がある。どうしても必要な場合を除き、不要な半角スペースは入れないようにする。

<h1> タイトル </h1>
<p> テキストテキストテキストテキストテキストテキスト<br>
テキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキスト<br>
テキストテキスト </p>

<h1>半角スペースが自動挿入されることで、必要のないバイト数が発生している。

<p>上記同様必要のないバイト数と、頭と尻であったりなかったりと統一されていない。また、</p>の閉じタグの階層が分かりづらい。

<h1>タイトル</h1>
<p>
    テキストテキストテキストテキストテキストテキストテキストテキスト<br>
    テキストテキスト
</p>
<p>
    テキストテキストテキストテキストテキストテキストテキストテキスト<br>
    テキストテキスト
</p>

インデントで消費する半角スペースと、なんとなく入ってしまう半角スペースでは意味も役割も違う。

CSS・SCSSの長文時のインデント例

background設定が長文になった場合など、下記の記述方法を使うと細かい設定項目を分かりやすく出来る。

.bgWrapper{
    background: url("../img/background-01.jpg") no-repeat center top 50px / cover, url("../img/background-02.jpg") no-repeat center top calc(50% - 20px) / 200px, #000;
}

↓

.bgWrapper{
    background:
        url("/img/background-01.jpg") no-repeat center center / cover,
        url("../img/background-02.jpg") no-repeat center top calc(50% - 20px) / 200px,
        #000
    ;
}