目次

1. HTML
2. CSS
3. JavaScript

HTML

• 文章の構造化を意識すると、コードがスッキリしてメンテナンスしやすくなる
• プログラムからも扱いやすくなる
• 検索エンジンからの評価も高くなる（ただし、以前ほど重視されないらしい）

<div class="header">
    <div class="title"><a href="/">サイト名</a></div>
    <div class="menu">
        <div class="menu_about"><a href="/about/">このサイトについて</a></div>
        <div class="menu_product"><a href="/product/">商品紹介</a></div>
        <div class="menu_contact"><a href="/contact/">お問い合わせ</a></div>
    </div>
</div>

<header>
    <h1><a href="/">サイト名</a></h1>
    <nav>
        <ul>
            <li class="about"><a href="/about/">このサイトについて</a></li>
            <li class="product"><a href="/product/">商品紹介</a></li>
            <li class="contact"><a href="/contact/">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

HTML

• クラス名も、装飾内容からではなく文章構造からつけるといい
• クラス名を装飾内容から付けると、嘘の情報になる可能性がある（redなのに緑になるクラス、など）

<p><span class="red">HTML</span>の基本を紹介します。</p>

<p><em class="keyword">HTML</em>の基本を紹介します。</p>

CSS

• クラスだけで分けずにIDも交えて階層化させて指定すると、対象が絞られるのでメンテナンスしやすくなる。
• クラス名だらけになって混乱することも少なくなる。

.title {
    font-size: 150%;
}
.menu {
    background-color: #CCCCCC;
}
.menu_about {
    background-color: #EECCCC;
}
.menu_product {
    background-color: #CCEECC;
}
.menu_contact {
    background-color: #CCCCEE;
}

div#header h1 a {
    font-size: 150%;
}
div#header ul {
    background-color: #CCCCCC;
}
div#header ul li.about {
    background-color: #EECCCC;
}
div#header ul li.product {
    background-color: #CCEECC;
}
div#header ul li.contact {
    background-color: #CCCCEE;
}

コーディングスタイルガイド

• Google HTML/CSS Style Guide
• 「Google HTML/CSS Style Guide」を適当に和訳してみた
• mozilla.org Base Styles

※「Google HTML/CSS Style Guide」では、CSSプロパティの記述順序はアルファベットの順

JavaScript（jQuery）

• 色々な案件で使いまわせそうな処理があれば、プラグインにするといい
• プログラムを修正したときの影響範囲が明確になり、メンテナンスしやすくなる

例: heightadjustプラグイン（自作）

JavaScript（jQuery）

プラグイン化していない状態

<script src="/js/jquery.js"></script>
<script>
$(document).ready(function() {
    var setting = {
        target: 'div.sample div.box',
        column: 3
    };

    var heights = [];
    var column  = 0;

    $(setting.target).each(function(i) {
        column = parseInt(i / setting.column);

        if (heights[column] == undefined || $(this).height() > heights[column]) {
            heights[column] = $(this).height();
        }
    });

    $(setting.target).each(function(i) {
        $(this).height(heights[parseInt(i / setting.column)]);
    });
});
</script>

<div class="sample">
    <div class="box"><p>ブロック1。ブロック1。</p></div>
    <div class="box"><p>ブロック2。ブロック2。ブロック2。ブロック2。</p></div>
    ～略～
    <div class="box"><p>ブロック8。</p></div>
</div>

JavaScript（jQuery）

jquery.heightadjust.js

(function($) {
    $.fn.heightadjust = function(option) {
        var settings = $.extend({
            column: 0
        }, option);

        var heights = [];
        var column  = 0;

        $(this).each(function(i) {
            if (settings.column) {
                column = parseInt(i / settings.column);
            }

            if (heights[column] == undefined || $(this).height() > heights[column]) {
                heights[column] = $(this).height();
            }
        });

        if (settings.column) {
            $(this).each(function(i) {
                $(this).height(heights[parseInt(i / settings.column)]);
            });
        } else {
            $(this).height(heights[0]);
        }

        return this;
    };
})(jQuery);

呼び出し元

<script src="/js/jquery.js"></script>
<script src="/js/jquery.heightadjust.js"></script>
<script>
$(document).ready(function() {
    $('div.sample div.box').heightadjust({
        column: 3
    });
});
</script>

jQueryプラグインの作り方（一例）

(function($) {
    $.fn.プラグイン名 = function(option) {
        var settings = $.extend({
            /* 設定項目 */
        }, option);

        /* 何らかの処理 */

        return this;
    };
})(jQuery);

• 設定項目の無いプラグインなら、option や settings 部分は不要
• メソッドチェーンを有効にするために return this; を忘れずに付ける

必要に迫られて作ったプラグイン: http://refirio.org/page/memo/jquery

まとめ

メンテナンスすることを考えて、使いまわすことを考えて作ると楽ができそう！Σd(╹◡╹　)