ga-04-16

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

16.ミスを少なくするコーディングルール

目   次

1.コーディングルールの必要性

2.HTMLコーディングルール

3.CSSコーディングルール



  1.コーディングルールの必要性

HTML及びCSSを使ってWEBページを作成していると必ず原因不明のトラブルに遭遇します。HTML及びCSSは間違った記述をしても警告も出さずにそれなりの解釈をして画面に結果を表示します。

閉じタグを1つ忘れたために大幅にレイアウトが崩れ、原因が予想できない事態が発生することがあります。また、CSSの閉じ波括弧を1つ忘れたためにCSSを如何に直してもCSSが反映されない事態が発生することがあります。また、ファイル名に大文字と小文字を混在させたためにパソコンでは正常に動くがサーバー上では正常に動かない事態も発生することがあります。その他、様々な原因で思った結果が出ないことがあります。

その時の対処法は、次項の「思った結果が出なかった時の対処法」にて説明しますが、そういった事態を少なくするために「ミスを少なくするコーディングルール」を作成しました。コーディングルールを徹底して守ることが、ミス発見のための多大なロスを防いでくれます。

  
  2.HTMLコーディングルール

HTMLコーディングで多いミスは、閉じタグがなかったり多かったり、開始タグと閉じタグの種類が異なるミスです。

  1. 段下げ(4文字単位)を行う。 但し、以下の主要なタグは段下げしない。
    html、head、body、nav、main、各項目の頭div、footer
  2. 閉じタグは、開始タグと同じ縦位置に記述する。
  3. コメントを大きなブロック毎に入れる。
  4. 日本語入力以外は、半角英数字記号の小文字で統一する。
    単語の頭1文字は英字とする。
  5. 日本語入力の文中以外で、日本語のブランクを使ってはならない。
【HTMLコーディングサンプル】
HTMLコード
<!--==========================================
         要素を横に並べる
      (TABLE CELLの利用)
--=========================================-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>
      要素を横に並べる(TABLE CELLの利用)
    </title>
    <link rel="stylesheet" 
          href="style-1.css">
</head>
<body>
<!--==========================================
    3つの要素を同じ幅で横に並べる 
--=========================================-->
<H3 style="text-align: center;">
    3つの要素を同じ幅で横に並べる
</H3>
<div class="container">
    <div class="box apple">
        <p>りんご</p>
    </div>
    <div class="box lime">
        <p>ライム</p>
    </div>
    <div class="box grape">
        <p>ぶどう</p>
    </div> 
</div>
<!--==========================================
    3つの要素を%指定で横に並べる 
--=========================================--> 
 <H3 style="text-align: center;">
    3つの要素を%指定で横に並べる
 </H3>
 <div class="container2">
    <div class="box2 apple2">
        <p>りんご</p>
    </div>
    <div class="box2 lime2">
        <p>ライム</p>
    </div>
    <div class="box2 grape2">
        <p>ぶどう</p>
    </div> 
</div>
</body>
</html>
        
  
  3.CSSコーディングルール

CSSコーディングで多いミスは、波括弧( { } )が閉じられていなかったり、余分な閉じ括弧があったりすることです。そのほかに、コロン(:)とセミコロン(;)を間違うミス、FILE名、CSS名、ID名に英字の大文字と小文字を混在させるミス等です。

  1. 開始波括弧( { )の後は改行する。
  2. 閉じ波括弧( } )は改行して先頭に記述する。 
  3. セミコロン(;)で改行する。
  4. プロパティ(color等)が1つで、複数行記述するときは1行で納める。
  5. FILE名、CSS名、ID名は、半角英数字記号の小文字とする。単語の頭1文字は英字とする。但し、記号はハイフォンとアンダースコアーだけとする。
  6. コメントを固まり毎に入れる。
【CSSコーディングサンプル】
CSSコード(style-1.css)
/*--==========================================
  要素を横に並べる(TABLE CELLの利用)
--==========================================*/
@charset "utf-8";
/*--==========================================
    3つの要素を同じ幅で横に並べる 
--==========================================*/
.h3{
    text-align: center;
}
.container{
  margin: 0 auto;
  display: table;
  width: 600px;
  height: 100px;
  font-weight: bold;
}
.box{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color:white;
}
.apple{
  background: red;
}
.lime{
  background: lime;
  color:black;
}
.grape{
  background: purple;
}
/*--==========================================
    3つの要素を%指定で横に並べる  
--==========================================*/
.container2{
  margin: 0 auto;
  display: table;
  width: 600px;
  height: auto;
  font-weight: bold;
}
.box2{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color:white;
}
.apple2{
  background: red;
  width:50%;
}
.lime2{
  background: lime;
  color:black;
  width:20%;
}
.grape2{
  background: purple;
  width:auto;
}
        
 back
pagetop
 next

破綻しないための
設計手法

ミスを少なくする
コーディングルール

思った結果が
出なかった時の
対処方法

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken