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>
タイトル： 大重要｜中重要｜小重要
キーワード：5~7個（SEO効果が0であるようですが、お客様のため適切なキーワードを入力する）
ディスクリプション：長さにもよるが、多くてもキーワードは２回までがよい。
【HTML5 タグ】
<NAV><SECTION><ARTICLE>など
現時点のルールでは使わない。
【ALTの使い方・注意点】
必ず画像にはALTを入力する。
ALTは画像が読み込まれてない場合や、目が不自由な人のために必要です。
※ 重要
使い方ですが、以下のようなタグにロゴ画像があるとします。
<img src=“logo.gif” alt=“ロゴ”>
目が不自由な人が、音声でウェブの情報を聞いていると思って下さい。
この情報では「ロゴ」って、何？！となり、理解ができません。
なので画像の代わりになる文言を入れて下さい。
アコーダーのロゴであれば、alt=”アコーダー株式会社” です。
※重要２
！、？、→のような画像をコーディングする場合、
リストかバックグラウンドにしてください。
どうしても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で書き出します。
【タグの閉じ方】
■ IDの場合
<div id=“wrapper”>
<p>aaaaaaaaaaaaa</p>
</div><!-- /#wrapper -->
■ CLASSの場合
<div class=“wrapper”>
<p>aaaaaaaaaaaaa</p>
</div><!-- /.wrapper -->
ソースコードが短い場合は、省略しても問題ないが、
長くなり１つの画面で見えない程度離れている場合、必ず閉じタグにコメント入れて下さい。
【ID・CLASS名の決め方】
なるべく、クラスを利用する場合は、全ページで利用出来るように名前を付けて下さい。
全ページで利用する class の場合：
例）all_top_menu
例）all_footer
例）all_footer_copyright
index.htmlの場合：
例）top_welcome
例）top_welcome_title
例）top_content
例）top_content_blog
contact.htmlの場合：
例）contact_phone
例）contact_fax
省略はできるだけしないようにして下さい。
省略すると他者が見た時、すぐに理解できず、考える時間がもったいないです。
コーディングの作業効率を早くしましょう。
例）top_ttl → top_title
例）top_pt → top_photo
例）wrp_ct → wrapper_content
親要素をCSSに書く場合に限りアンダーバーから書き始めて省略することができます。どちらの書き方でもいいです。
（例）
.all_content_text
<div class="all_content">
<p class="all_content_text"></p>
</div>
↓
.all_content ._text
<div class="all_content">
<p class="_text"></p>
</div>
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の１行目に必ず記入】
@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 … の順番で！
・サイドメニューがある場合、コーディング上、コンテンツの次にもってくる。
相談・提案はいつでも歓迎ですので、お願いします。
より効率のよいルールで、コーディング時間を短くしましょう！
