class名・id名

公開日: : 最終更新日:2016/03/24 制作基本

サイトを作るときに適当につけていいclass名やid名。
どんな名前でもいいけど毎回悩んでしまう。
よく使われているものを集めてみました。

全体

ページ全体を囲ったり大きいエリアに使うもの。

  • wrap
  • wrapper
  • top-wrapper
  • wrapperAll
  • frame
  • mframe
  • all-frame
  • container
  • page
  • pagetop
  • all
  • allContents
  • layout
  • layout-two-column
  • layout-three-column
  • body
  • all-body
  • carrier

上部

主に頭のエリアに使うもの。

  • head
  • header
  • headerArea
  • headline
  • head-in
  • title
  • logo

ナビ

ナビゲーションに使うもの。特にサイドでなく、タイトル下などに使うもの。

  • navi
  • navigation
  • navbar
  • gnav
  • gnavi
  • g-navi
  • globalnav
  • global-navi
  • globalNavi
  • globalnavigation
  • globalHeader
  • mainNavigation
  • contentNavi
  • stinfo-navi
  • topNav
  • topNavi
  • top-navi
  • head-navi
  • header-navi
  • h-navi

パンくず

パンくずナビに使うもの。

  • topicpath
  • topic-path
  • topicPath
  • t-path
  • tp
  • pan
  • pankuzu
  • kuzu
  • breadcrumbs
  • bread-crumbs

メニュー・サイド

主に2カラムや3カラム時に使う、小さい方のくくりに使うもの。カテゴリーやサイドバーに使ったりする。

  • menu
  • menuArea
  • mainmenu
  • site-menu
  • side
  • side-container
  • sidebar
  • sidemenu
  • localMenu
  • rightside
  • leftside
  • rightcol
  • leftccol
  • sub
  • sub-menu
  • category
  • sub-contents
  • sub-column
  • side-box

一番下のくくりに使うもの。主にフッターやコピーライトなどに使う。

  • foot
  • footer
  • footnavi
  • footerArea
  • footerbar
  • globalfooter
  • foot-in
  • copy
  • copyright

本文・メイン

本文を書く部分に使う。いくつかの分けたブロックで一番大きい部分に使ったり、その中の小さいくくりに使ったりする。

  • main
  • maincontent
  • center
  • left
  • right
  • content
  • contents
  • main-contents
  • left-contents
  • right-contents
  • contents-inner
  • contentsArea
  • column
  • left-column
  • right-column
  • area
  • wrapperContent
  • contentColumn
  • content-block
  • base
  • bases
  • basis
  • entries
  • mainbox
  • section
  • right-body
  • left-body
  • item
  • box
  • inner
  • entry
  • entryBody
  • entryblock
  • entrydate
  • separator
  • bodyArea
  • block
  • outline
  • sub
  • lead
  • spot
  • frame-margin
  • picbox


関連記事

WEB制作基本

iPhoneで数字にリンクが勝手につくのを防ぐ方法

iPhoneで自動でつくリンクを解除する iPhoneの標準ブラウザのSafariでは、HTML ...

記事を読む

フォント

フォントサイズ「rem」

rem 今までフォントサイズには「px」「em」「%」などを使うのが一般的でしたが、「rem」という...

記事を読む

画像をマウスオーバー時に半透明にする

画像の保存を禁止する方法

画像の保存を完全に防ぐことはできません。 スクリーンショットを取って画面ごとコピーしちゃったらそれま...

記事を読む

©

著作権表示に関する記述

著作権表示(copyright)とは 著作権表示とは、著作物の著作権者や著作物の発行年などに関する表...

記事を読む

Message

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方 受付でお祝いの言葉を述べ、祝儀袋をふ

結婚祝い

お祝い品選びと費用 お祝い品の選び方 新居を構える二人には、生活実用品

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑