HTML & CSSガイドライン

HTMLガイドライン

ページ名に使用する英単語

指定が無い場合に使用するページ名

会社概要・私たちについてabout
沿革history
制作事例works
導入事例casestudy
お問い合わせcontact
お知らせinformation
ニュースnews
アクセスaccess
プライバシーポリシーprivacy
会社概要outline
サイトマップsitemap
採用情報recruit
料金一覧pricing
その他others

CSSガイドライン

マルチクラスは component project utility の順に記述する

class名一覧

titleタイトル
navナビゲーション
globalnavグローバルナビゲーション
listリスト
heading見出しとリードのセット
textテキスト
contentコンテンツ
bodycontentに見出しがある場合のコンテンツ
img画像
thumbサムネイル
innerインナー
container複数要素の囲み
wrapper単一要素の囲み
*デザイン上必要な場合に使用
buttonボタン
prev前の
next次の
note注釈
intro導入部分
leadリード
sliderスライダー
main主要な
primary主要な
secondary補助的な・第二の
tertiary第三の
copyrightコピーライト
privacyプライバシーポリシー
large大・Large
x-largeXLarge
xx-largeXXLarge
small小・Small
x-smallXSmall
xx-smallXXSmall
medium
base基本
col-containerカラムコンテナ
colカラム
tel電話
address住所
catカテゴリー
tagタグ
form-text-submitフォームのテキストフィールド + submitボタン
footer-navフッターナビゲーション
asideサイドバーやフッターなどのasideに設置するコンポネントの接頭辞
例) aside-cat-iist
page-headerページ上部のヘッダー
post-header投稿のヘッダー

ユーティリティクラス

ユーティリティクラスは接頭辞に u- を付与する

.u-ta-center
.u-ta-right
.u-ta-left
水平方向の配置

コメントフォーマット

CSSに出力する場合

/* 大見出し
   ========================================================================== */

/*** 中見出し ***/

/* 小見出し */

CSSに出力しない場合

// * 大見出し
// ==========================================================================

// *** 中見出し ***

// 小見出し