コーダー初心者への戒め │ Webty Staff Blog

過去に戻って自分に伝えたいです。

1. 常にDoctype宣言を行う
2. <meta>タグを設定する
3. インラインでCSSやJSをかかない
4. CSSの圧縮と統合
5. JavaScriptの圧縮と移動
6. divばっかり使わない
7. 画像のalt属性は必ず記入する
8. 綺麗にインデントされたコードをかく
- 8.1. 余白の作り方

常にDoctype宣言を行う

Emmet等があるので意識することはないかもしれませんが、Doctype宣言は必ず行いましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>Document</title>
</head>
<body>
	
</body>
</html>

↓ こういうのは時代遅れです。ヤメて下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<meta>タグを設定する

SEO対策として必須です。
Webサイトの要約となるような説明文をdescriptionに設定してください。

<meta name="description" content="だいたい160文字以内">

keywordは好きにすればいいと思います。

インラインでCSSやJSをかかない

HTMLはマークアップ言語であり、文書です。
これは自分にも言えることですが、構築後に自分以外の人が触るときに分かりづらいです^^;

<p style="font-size: 1.2rem; color: red;">ああああああああああ</p>

CSSの圧縮と統合

CSSはminifyしましょう。
また、素のCSSで@importはヤメて下さい。
遅いです。というか、素のCSSはヤメて下さい。

Sassを使いましょう。
また、命名規則はBEMを用いると親和性が高いです。

// SCSSの記述例
.header{
    ...
    
    &__hero{
    
        &--title{
            ...
        }
    }
}

これらを使うと素のCSSなんか書きたくなくなります。

SCSSでスタイルを記述して、コンパイル時にminifyされるようにしておくのが良いと思います。

JavaScriptの圧縮と移動

CSSと同じにはなりますが、圧縮を必ず行いましょう。

また、スライダーやポップアップのプラグインを導入するときはCDNを用いてください。
CDNを用いることは世のため人のためになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>Document</title>
    
    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
</head>
<body>

<script src="//cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js"></script>

</body>
</html>

CDNを使うときは提供ドメインを<head>部分でdns-prefecthしておくのが良いでしょう。

また、<script>タグは<body>閉じタグの直前に置きましょう。

divばっかり使わない

サイトのレイアウトを全て<div>でやったり、異様に深いネストはヤメましょう。
セマンティックなタグを用いて、文書構造を作っていって下さい。

<body>
    <header>
        <h1>Title</h1>
    </header>
    <main>
        <article>
            <section>
                ・・・
            </section>
            <aside>
                ・・・
            </aside>
        </article>
    </main>
    <footer>
        ・・・
    </footer>
</body>

↑ セマンティックな文書構造の例です。
調べたら出てくると思うので詳細は勉強してみてください。

画像のalt属性は必ず記入する

タイトルの通りです。
Google先生に怒られるのでやりましょう。

綺麗にインデントされたコードをかく

ぼくはVS Codeの自動整形プラグインに頼りっきりです。

インデントが綺麗にされてないコードを開くと、
まずは整形をしてからじゃないと、どこに何があるかわかりません^^;

自分だけなら分かるかもしれませんが、保守性を高めるためにも整形は綺麗にお願いします。

<div align="center" style="margin: 5px auto;">
    <h1><span>ああああああ</span></h1>
<a href=""><div><img src=""></div></a>
        <span>いいいいいい</span>
</div>

↑ぞっとします。

余白の作り方

余談ですが、ぼくはこういう空白たっぷり使った書き方がすきなのでいつもこう書いています。
配列のとこはVS Codeのプラグインで揃えてくれるやつを使ってます。

<?php

    $number = filter_input( INPUT_POST,  'number', FILTER_SANITIZE_NUMBER_INT );
    $name   = filter_input( INPUT_POST,  'name',   FILTER_SANITIZE_STRING );
    
    if( 'webty' === $name ) {
        for( $i = 0; $i <= $number; ++$i ) {
            echo 'ウェブティ';
        }
    }
    
    $array = [
        'name'    => 'ウェブティ',
        'tel'     => '086-242-6627',
        'zip'     => '〒701-0927',
        'address' => '岡山市北区西古松2-26-22',
    ];

空白とかを使わない例がこちらです。

<?php

    $number = filter_input(INPUT_POST, 'number', FILTER_SANITIZE_NUMBER_INT);
    $name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);

    if ('webty' === $name) {
        for ($i = 0; $i <= $number; ++$i) {
            echo 'ウェブティ';
        }
    }
    
    $array = [
        'name' => 'ウェブティ',
        'tel'  => '086-242-6627',
        'zip' => '〒701-0927',
        'address' => '岡山市北区西古松2-26-22',
    ];

コーダー初心者への戒め