2010-05-27

ウェブサイトでよく使われるデザインや機能の呼称のまとめ

「あちこちでよく見かける『あの機能』を実装するためにCSSのテクニックとかJSライブラリとか探したいんだけど、どういうキーワードで探したらいいのかわからない…」という人向け。

注意

※この呼称が正しいとは限りません

※この呼称に統一されているわけではありません

ブロック要素等の角を丸め

角丸

複数の画像を一枚にまとめてCSSbackground-positionで制御する(メニューのマウスオーバーなどでよく使われる)

CSSスプライト

フォームにうっすらと説明文が表示される & フォームにフォーカスすると消える

プレースホルダ

フォームに入力された文字にあわせて入力候補を表示する

サジェスト

ページ内リンク等をクリックした際に滑らかにスクロールさせる

スムーズスクロール

他のメニューを押しのけるようなアニメとともにサブメニューが表示される & 開いているメニューは常にひとつだけ

アコーディオンメニュー

メニューの横にある+マークなどをクリックするとその下にサブメニューが表示される & 複数のメニューを開くことができる

→ ツリーメニュー

水平メニューから垂れ下がるようにサブメニューが表示される

→ プルダウンメニュー

横一列に並んだアイテムスクロールバーでスライド表示 & アイテムが床面に反射したようなエフェクト

カバーフロー

水滴のように光沢のあるデザインボタン

→ アクアボタン

画像サムネイルクリックするとオリジナルサイズの画像が画面中央に表示される

ライトボックス

警告ウィンドウ等が画面中央に表示される & その他の操作を受け付けない(※指摘を受けて追記しました)

→ モーダルボックス

説明文等が書かれた小さな吹き出しをマウスカーソルの隣に表示させる

ツールチップ

タグアルファベット順に並べる & その使用頻度等に応じてフォントサイズや色を変えて表示する

タグクラウド

ひとつの記事を分割してページ番号を振る

ページャー、ページネーション

フッター部分が常に最下部に固定されている

→ フッタースティック

  • 増田じゃなくて自分のブログにまとめればいいのに。 もったいない。

  • 警告ウィンドウ等が画面中央に表示される → モーダルボックス これはたぶん間違い。 画面中央に表示されるだけじゃ「モーダル」とは言わなくて、他の操作を受け付けなくなる物が...

記事への反応(ブックマークコメント)

ログイン ユーザー登録
ようこそ ゲスト さん