HTML / CSS 社内ルール

HTML / CSS 社内ルール v1.2
2017/02/14 by Shin (shin@accorder.co.jp)


【HTML禁止タグ】
center, font, blink, strike, s, u, bgsound, marquee, applet, acronym, dir,
frame, frameset, noframes, isindex, listing, xmp, noembed, plaintext, rb, basefont, big, spacer, tt, hr

【タグが無いテキストをなくす】
タグの無いテキストが存在しないようにしましょう。
NG例
<div>こんにちは、アコーダーです。</div>
OK例
<div><p>こんにちは、アコーダーです。</p></div>

【BLOCK要素とINLINE要素ルール】
・BLOCKの中にBLOCKは OK。
・INLINEの中にBLOCKは NG(どうしても必要な場合は除く)。
・INLINEの中に、DIVは使わない。SPANを使う。
・DIVはBLOCKだが、INLINEにDIVだけを使用するのは原則としてNG。

【BRタグの使い方】
<p>
     こんにちは、<br>
     これは、HTMLの書き方の例です。<br>
     質問がありましたらどうぞ!<br>
</p>
最後の行も<br>タグを入れる。
改行が2回ある場合は、以下のように<br>を2つ入れる!
<p>
     こんにちは、<br>
     こちらは、HTMLの書き方の例です。<br>
     質問がありましたらどうぞ!<br><br>

     CSSの書き方は他のページにあります。<br>
</p>
改行が2回ある場合は、
できれば、以下の方がより良い!
<p>
     こんにちは、<br>
     これは、HTMLの書き方の例です。<br>
     質問がありましたらどうぞ!<br>
</p>
<p>
     CSSの書き方は他のページにあります。<br>
</p>

【HTMLの1行~4行の例】
日本語の場合、特に理由がない限りこれで統一。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
bodyタグには、IDも、CLASSも付けないでください。 付けるなら、wrapperか他のdivにして下さい。

【wrapper】
#wrapperは、必ず入れて下さい。不要だと思っても入れて下さい。
<body>
<div id="wrapper">

ここにコーディングをする。

</div><!-- /#wrapper -->
</body>

【ディレクトリの使い方】
/images/:画像は全てこちら
/slides/:スライドは全てこちら
/js/:js・jQueryは全てこちら
/tpl/:Smartyのテンプレートは全てこちら
/fonts/:fonts関連は全てこちら
/css/:cssファイルは全てこちら

【パス(PATH)指定について】
絶対パスでも、相対パスでも、理由がない限り、index.htmlは、アンカーに記入しないです。
相対パスの場合
<a href="/">トップページ</a>
<a href="/about/">会社案内</a>
<a href="/about/company.html">会社概要</a>
<a href="/contact.html">お問い合せ</a>
絶対パスの場合
<a href="../">トップページ</a>
<a href="./">会社案内</a>
<a href="company.html">会社概要</a>
<a href="../contact.html">お問い合せ</a>
相対パスの場合、同じ下層にあるファイルは、./sample.html ではなく、 sample.html で記入します。index.htmlの場合のみ ./ で記入します。
外部のサイトにリンクする場合、rel=”nofollow” target=”_blank”をつける必要があるが、内容によって不要である場合もある。こちらは担当者に相談しながら対応。
<a href="../">トップページ</a>
<a href="./">会社案内</a>
<a href="company.html">会社概要</a>
<a href="../contact.html">お問い合せ</a>
<a href="http://www.amazon.com" rel="nofollow" target="_blank">アマゾン</a>

【META】
タイトル: 大重要|中重要|小重要
キーワード:5~7個(SEO効果が0であるようですが、お客様のため適切なキーワードを入力する)
ディスクリプション:長さにもよるが、多くてもキーワードは2回までがよい。

【HTML5 タグ】
<NAV><SECTION><ARTICLE>など
現時点のルールでは使わない。

【ALTの使い方・注意点】
必ず画像にはALTを入力する。
ALTは画像が読み込まれてない場合や、目が不自由な人のために必要です。
※ 重要
使い方ですが、以下のようなタグにロゴ画像があるとします。
<img src=“logo.gif” alt=“ロゴ”>
目が不自由な人が、音声でウェブの情報を聞いていると思って下さい。
この情報では「ロゴ」って、何?!となり、理解ができません。
なので画像の代わりになる文言を入れて下さい。
アコーダーのロゴであれば、alt=”アコーダー株式会社” です。
※重要2
!、?、→のような画像をコーディングする場合、
リストかバックグラウンドにしてください。
どうしてもIMGタグで必要な場合、alt=“ビックリマーク” alt=“はてなマーク” alt=“矢印” という使い方はしないで下さい。
ビックリマークのサイトでもなく、はてなマークのサイトでもないので、
alt=””のみで大丈夫です。
不要なaltの情報は、SEO対策の邪魔にもなります。

【IMGタグのルール】
基本的に width, height, altタグは入れておきます。 デザインのことで、どうしても不要な場合は無しで問題ないです。
<img src="logo.gif" width="200" height="45" alt="アコーダー株式会社">
単位は%以外は記入しません。ピクセルの単位だと思い、ピクセルの値を入れて下さい。

【画像名の決め方】
基本的に以下のルールで統一します。
ページ名_種類_説明
ページ名:contact.html -> contact、index.html -> top、company.html -> company
種類:
icn: アイコン
bg: バックグラウンド画像
img: 画像
bul: ブレット
photo: 写真
※ 商品などの画像は多くなるので、images/に入れず、products/などに入れて下さい。
例)
contact_icn_phone.png
contact_icn_fax.png
contact_bg.png
contact_bul_phonenumbers.png
【画像の形式】
jpg: 写真(QUALTY: 40% ~ 60%)
png:写真以外の全てのイメージ(写真が入っているバナーなどは、jpg で保存)
gif: アニメーション、古いブラウザー対応が必要な場合は、png使わず gif
すべての画像は、Retina対応します。幅2倍と縦2倍で書き出します。 その後、imgタグ、もしくは、CSSでサイズを調整して下さい。
例えば、320×320 の画像なら、640×640で書き出します。
retina

【タグの閉じ方】
■ IDの場合
<div id=“wrapper”>
<p>aaaaaaaaaaaaa</p>
</div><!-- /#wrapper -->
■ CLASSの場合
<div class=“wrapper”>
<p>aaaaaaaaaaaaa</p>
</div><!-- /.wrapper -->
ソースコードが短い場合は、省略しても問題ないが、
長くなり1つの画面で見えない程度離れている場合、必ず閉じタグにコメント入れて下さい。

【ID・CLASS名の決め方】
なるべく、クラスを利用する場合は、全ページで利用出来るように名前を付けて下さい。
全ページで利用する class の場合:
例)all_top_menu
例)all_footer
例)all_footer_copyright
index.htmlの場合:
例)top_welcome
例)top_welcome_title
例)top_content
例)top_content_news
例)top_content_blog
contact.htmlの場合:
例)contact_phone
例)contact_fax
省略はできるだけしないようにして下さい。
省略すると他者が見た時、すぐに理解できず、考える時間がもったいないです。
コーディングの作業効率を早くしましょう。
例)top_ttl → top_title
例)top_pt → top_photo 例)wrp_ct → wrapper_content
class名は、class名だけ見ても、どこのclassなのか予測できるようにつけて下さい。
#footer:footerのIDかな?
#footer_logo:footerに入るロゴかな?
#footer_logo_text:footerのロゴの部分にあるテキストかな?
#footer_copyright:footerのコピーライトの部分で、#footer_logoの外側に配置されているかな?

【CSSの書き順番】
・background
・width
・height
・margin
・padding
・position
・float
・display
・border
・line
・letter
・text
・font
・color
※ 特に、background ~ padding, text ~ color は必ず守るように!

【CSSの1行目に必ず記入】
@charset "utf-8";
※ 保存も、UTF-8形式でお願いします。

【CSSファイル名の付け方】
・reset.css → リセット(デフォルト)
・style.css → 基本的にこちらのファイルでcssを組む
・language.css → 外国語対応が必要な場合、外国語の部分はこちらで対応。
・responsive.css → レスポンシブ対応の場合、規模によってこちらに対応。

【CSSの書き方】
#top .menu .menu_list .logo h1 span strong { … } →NG
長い!短くできなければ、最後のstrongにclassをつける。
.title_bold { … } → OK
h1.top { … } → NG
見出しタグは、IDとCLASS指定しない。
.top { … } → OK

【CSSの括弧{}】
ID名(又はクラス名) 空白 { 空白 }で、お願いします。
.title_bold{ color:#FFF; } → NG
.title_bold{color:#FFF; } → NG
.title_bold{ color:#FFF;} → NG
.title_bold { color:#FFF; } → OK

【js / jQueryの保存先】
jquery、bootstrapのように、ベースのライブラリーと、スクラッチで作成したファイル「common.js」以外は、各js / jqueryのフォルダーを作って入れておく。
例) colorbox
js/colorbox/colorbox.css
js/colorbox/colorboxSet.js
js/colorbox/jquery.colorbox-min.js
js/colorbox/jquery.colorbox.js
js/colorbox/images/
js/colorbox/images/border.png
など
混ぜないで下さい。1行しかないjsであるとしても、フォルダー機能別で分けて下さい。
あと、jsのminファイルは使用しないでください!

【チャレンジコース】
※ こちらはMUSTではなく、できたらいい項目です。
・float 使わない。
・margin / padding は、2つ以上ある場合、 margin-topのように分けずにまとめる。
・カラーコード、すべて大文字。#ffcccc ではなく、#FFCCCC
・カラーコード、省略できたら省略する。#FFCCCCではなく、#FCC
・HTML上、H1をH2の下に配置しない。H1 H2 H3 H4 … の順番で!
・サイドメニューがある場合、コーディング上、コンテンツの次にもってくる。

相談・提案はいつでも歓迎ですので、お願いします。
より効率のよいルールで、コーディング時間を短くしましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です