命名規則

kanvasで使用している命名規則のガイドラインをご紹介します。
画像ファイルの名前やHTMLのクラス名を、このガイドラインに準拠して制作を行います。

※制作サイトの仕様や、利用するプラグインによって内容が追加される場合があります。
※WordPressでの制作をベースにルールを記載しています。

画像ファイルやid・classの命名規則

ディレクトリの格納ルールや画像ファイル、id・classの命名規則についての内容です。

ディレクトリの格納や、画像ファイル名についての基本となるルールです。

ファイル名、id・classは「半角英数字」のみ使用します。「日本語」「全角文字」「半角カナ」を使用した場合、ブラウザで正常に表示されない場合があります。

使用する記号は、半角英数字の［-］ハイフン［_］アンダースコア［.］ドットの3種類です。

ファイル名は数字や記号から開始せずに命名します。

画像を格納しておくディレクトリは［theme/img］の中に置き、共通パーツは［common］トップページは［index］下層ページは［lower/スラッグ］の中に格納します。

画像のファイル名は［位置］_［種類］［連番］_［状態］.［拡張子］とします。

id・class名に方向を示す「left」「right」や、色を示す「red」「blue」、サイズや長さを示す「mb30」「w300」などの情報は使用しません。

なお、CSS設計のベースルールにSMACSSを使用するので、id・class名は［プレフィックス］-［種類］［連番］とします。詳細はHTML・CSSガイドラインのページを参照して下さい。

画像を使用する位置の名前を付与します。

画像を使用する種類を付与します。

0から始まる二桁の連番で、1ずつカウントアップして記述します。

画像の状態を表す文字列を付与します。

参考となるディレクトリの格納ルールと、画像ファイルの命名例です。

/img/common/header_logo.png

/img/common/side_bnr01_off.png
/img/common/side_bnr01_on.png

/img/index/ttl02.png

/img/greeting/img01.jpg

参考となるid・classへの命名例です。

以下のリンクより、サービス内容のメニューページへ戻ります。