ホームページ制作の兵法

ホームページ制作の兵法

マークアップエンジニアによるHTML,CSSなどサイト制作の基礎知識

コーディングガイドライン決定版!画像名やクラス名に悩まないルールを作りました。

コーディングガイドライン決定版!画像名やクラス名に悩まないルールを作りました。

 

コーディングのルール決めてますか?

いつもその時の気分や人間次第で画像名やクラス名をつけていたら・・・。

修正作業時にコードを理解する時間が必要になります。ましてや他人のコードを修正しなければいけない時だってあります。

だからこそ、誰もが分かりやすいルールを作れれば良いと思いました。

まずは自分が分かりやすいと思うコーディングガイドを作りました。

 

1.emmet用

2.使用する画像名

3.HTMLの文章構造

4.よく使うクラス名

5.ファイル構成

----------------------------------------------------------------------------------------

1.emmet用(コピペで使用)

nav>ul>li*4>a[href=#sec$$]>img[src=images/nav$$.png][alt=#]

nav>ul>li*4>a>img[src=nav$$.png][alt=#]>{nav$$}

nav>ul>li*4>a{nav$$}
img[src=pic$$.png][alt=#]*4

 

2.使用する画像名(コピぺで使用してください)

<img src="logo01.png" alt=""> サイトのロゴ
<img src="kv01.png" alt="">  キービジュアル
<img src="nav01.png" alt=""> ナビメニュー
<img src="tit101.png" alt=""> tit101:H1の1個目のセクションの見出し画像
<img src="pic01.png" alt=""> コンテンツ内で連続する同じレイアウトのある写真
<img src="img01.png" alt=""> 連続して使われない画像
<img src="bg01.png" alt="">  背景
<img src="ico01.png" alt=""> アイコン
<img src="li01.png" alt="">  リスト画像
<img src="bnr01.png" alt=""> バナー
<img src="txt01.png" alt=""> テキスト
 

3.HTMLの文章構造

.ctn(container)
 ┣header
 ┣.con(contents)
  ┣.sec1
   ┗tit201(見出し)+p(説明)+.btn(ボタン)
  ┣.sec2
   ┗tit202(見出し)+p(説明)+.btn(ボタン)
  ┣.sec3
   ┗tit203(見出し)+p(説明)+.btn(ボタン)
 ┗footer

 

4.よく使うクラス名

ctn(コンテナー)、con(コンテンツ)、sec(セクション)

cel、celA(セル、カセット、連続する小さなコンテンツ)

sbs、sbsA(サイドバイサイド、横並びボックス)

tit1〜tit6(見出し) 例)tit2_01:01番目のH2の見出し用クラス名

hed(sec,celの中のヘッダー部分)

bod(sec,celの中のボディー部分)

btn、btnA(ボタン)

pic、picA(画像が入る)

txt、txtA(テキストが入る)

dif(definition、定義

des(description、説明

emp(emphasis、強調)

wrap(containerの代わり)

detail(詳細)

 

※Aはエリアの略

例)celAの場合、連続するcelをまとめるエリアのこと

例)btnAの場合、ボタンが入っているエリアのこと

 

5.ファイル構成

フォルダ
┣index.html
css
 ┗common.css
┣js
 ┗common.js
┗images
 ┗ kv01.png

 

以上を元にして、効率の良い、クオリティの高いコーディングを目指します。

コーディングのガイドラインは更新することが必要で、制作物、制作チームにより変わります。

常に話し合うことでより良いガイドラインを作成しましょう。