LoginSignup
67
79

More than 5 years have passed since last update.

CSSの命名に役立つ単語

Last updated at Posted at 2016-02-22

レイアウト

container: ブロックを囲むときのレイアウト
inner: 内側の要素を囲む場合はinner
media: 画像やテキストを内包する
block: 多数のコンテンツを内包するブロック
grid: グリッド
main: 主となるもの
sub: 主となるものに付随して補足するもの
header: サイト共通ヘッダー
footer: サイト共通フッター

文章など

article: 記事、本文
caption: 画像や表につく補足文
description: 説明文章
summary: 概要。description > summary
note: 補助的な文章,何かの情報に付随する文章に
text: 普通の文が入る。なんでもない文章

画像

logo: ロゴ
thumb: サムネイル画像
image: 画像
icon: アイコン

大きさ

giant: とにかくでかい
huge: 巨大な
big: でかい
large: 大きい
normal: 普通
small: 小さい
little: ちっちゃな
tiny: もっと小さい

ページ遷移

prev: 前(previousだけど長いから略語)
next: 次

共通

local: 一部のページだけで使う
global: 全体のページで使う

アクション

is-active: アクティブ時
is-disabled: 機能が無効になっているもの
is-show: 表示しているもの
is-hidden: 非表示にしているもの
is-visible: もともと非表示なものが、表示された
is-opened: 何かが開いている状態
is-closed: 何かが閉じている状態

コンポーネント(部品)

button: ボタン(場合によってはbtn)
search: 検索する要素
input: 1行入力エリア
textarea: 複数行入力エリア用
nav: ナビゲーション
navbar: ナビゲーションバー
breadcrumb: パンくず
pagination: ページネーション
label: ラベル
panel: パネル

優先(ボタンなど)

default
primary
success
info
warning
danger

参考

BEMで命名する時に役に立ちそうな単語
http://geckotang.tumblr.com/post/69554882865/bem-words
Bootstrap
http://bootstrap3.cyberlab.info/components/glyphicons.html

67
79
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
67
79