ホームページビルダー(hpb)のスタイルシート(css)

Homepage Bilder スタイルシートの要素名一覧

hpbのスタイルシートは、わかりにくい。だから、まずは要素名だけをまとめてみた。

スタイルシートは4つのファイル。

  •     container_10Ca_2c_top.css
  •     hpbparts.css
  •     main_10Ca_2c.css
  •     user.css

container_10Ca_2c_top.css

container_10Ca_2c_top.css

@charset “Shift_JIS”;

/* 要素リセット */

body

/* 標準文字色 */
/* Safari用ハック 文字サイズ調整 */
/*\*/

html:\66irst-child body

/* end */

img

/*–  —-空白 レイアウト設定*/
container_10Ca_2c_top.css

#hpb-container

#hpb-container:after

#hpb-header

#hpb-inner

* html .hpb-layoutset-01 #hpb-inner

/* for IE6 レイアウト崩れに対応するために背景にメインイメージを配置 */

#hpb-inner:after

#hpb-wrapper

* html .hpb-layoutset-01 #hpb-wrapper

/* for IE6 */

* html .hpb-layoutset-02 #hpb-wrapper

/* for IE6 */

#hpb-title

container_10Ca_2c_top.css

.hpb-layoutset-01 #hpb-title

* html .hpb-layoutset-01 #hpb-title

/* for IE6 */

.hpb-layoutset-02 #hpb-title

#hpb-main

.hpb-layoutset-01 #hpb-main

.hpb-layoutset-02 #hpb-main

#hpb-aside

.hpb-layoutset-01 #hpb-aside

.hpb-layoutset-02 #hpb-aside

#hpb-footer

#hpb-nav

/*–  —-空白 デザイン設定*/
container_10Ca_2c_top.css
/* 背景設定 */

.hpb-layoutset-01

.hpb-layoutset-02

/* コンテンツ配置領域 */
/* ナビゲーション */

#hpb-nav ul

#hpb-nav ul:after

#hpb-nav li

#hpb-nav li#nav-toppage

/* トップページを1px小さく */

#hpb-nav li a

/* メニュー下線色設定 */

#hpb-nav li#nav-toppage a

container_10Ca_2c_top.css

#hpb-nav li#nav-policy a

#hpb-nav li#nav-entrance a

#hpb-nav li#nav-program a

#hpb-nav li#nav-company a

#hpb-nav li span.en

#hpb-nav li span.ja

#hpb-nav a:link

#hpb-nav a:visited

#hpb-nav a:hover

#hpb-nav a:active

container_10Ca_2c_top.css
/*–  —-空白 共通パーツデザイン設定*/

#shopinfo

#banner

hpbparts.css

hpbparts.css

@charset “Shift_JIS”;

/*** * float clear ***/

.hpb-clear

.hpb-clearfix:after

.hpb-clearfix

/* for IE6 */
/*** * レイアウト コンテナ (div) ***/
/* 飾りなし 幅自動 */

.hpb-parts-cnt-01

/* 飾りなし 幅60px */

.hpb-parts-cnt-01-060

/* 飾りなし 幅120px */

.hpb-parts-cnt-01-120

/* 飾りなし 幅180px */

.hpb-parts-cnt-01-180

/* 飾りなし 幅240px */

.hpb-parts-cnt-01-240

/* 飾りなし 幅360px */

.hpb-parts-cnt-01-360

/* 線囲み 幅自動 */

.hpb-parts-cnt-02

hpbparts.css
/* 線囲み 幅60px */

.hpb-parts-cnt-02-060

/* 線囲み 幅120px */

.hpb-parts-cnt-02-120

/* 線囲み 幅180px */

.hpb-parts-cnt-02-180

/* 線囲み 幅240px */

.hpb-parts-cnt-02-240

/* 線囲み 幅360px */

.hpb-parts-cnt-02-360

/*** * 見出し (h1-h6) ***/
/* 飾りなし */

.hpb-parts-hl-01

/* 下線 1 */

.hpb-parts-hl-02

/* 下線 2 (2重線) */

.hpb-parts-hl-03

/* 線囲み 1 */

.hpb-parts-hl-04

/* 線囲み 2 (2重線) */

.hpb-parts-hl-05

/* 飾りつき 1 (左■付き) */

.hpb-parts-hl-06

/* 飾りつき 2 (左■付き&下線) */

.hpb-parts-hl-07

/* 飾りつき 3 (左■付き&線囲み) */

.hpb-parts-hl-08

/*** * 文章枠 (div) ***/
/* 装飾なし */
hpbparts.css

.hpb-parts-cbox-01

/* 線囲み 1 (実線) */

.hpb-parts-cbox-02

/* 線囲み 2 (点線) */

.hpb-parts-cbox-03

/* 線囲み 3 (2重線) */

.hpb-parts-cbox-04

/*** * 写真/画像 (img) ***/
/* 余白なし */

.hpb-parts-img-01

/* 余白あり */

.hpb-parts-img-02

/* 写真ボックス 左寄せ配置用 */

.hpb-parts-img-03

/* 写真ボックス 右寄せ配置用 */

.hpb-parts-img-04

/* 複数写真ボックス 左端用 */

.hpb-parts-img-05

/* 複数写真ボックス 2列目用 */

.hpb-parts-img-06

/* 複数写真ボックス 左端・2行目用 */

.hpb-parts-img-07

/* 複数写真ボックス 2行目用 */

.hpb-parts-img-08

/*** * 水平線 (hr) ***/
/* 水平線 1 (実線・細) */

.hpb-parts-hr-01

/* 水平線 2 (実線・太) */

.hpb-parts-hr-02

/* 水平線 3 (点線・細) */

.hpb-parts-hr-03

/* 水平線 4 (点線・太) */

.hpb-parts-hr-04

/* 水平線 5 (破線・細) */

.hpb-parts-hr-05

/* 水平線 6 (破線・太) */

.hpb-parts-hr-06

/* 水平線 7 (2重線) */

.hpb-parts-hr-07

/*** * 写真ボックス (div) ***/
/* 飾りなし */

.hpb-parts-pbox-01

/* 飾りなし 画像幅60px */

.hpb-parts-pbox-01-060

/* 飾りなし 画像幅120px */

.hpb-parts-pbox-01-120

/* 飾りなし 画像幅180px */

.hpb-parts-pbox-01-180

/* 飾りなし 画像幅240px */

.hpb-parts-pbox-01-240

/* 線囲み */

.hpb-parts-pbox-02

/* 線囲み 画像幅60px */

.hpb-parts-pbox-02-060

/* 線囲み 画像幅120px */

.hpb-parts-pbox-02-120

/* 線囲み 画像幅180px */

.hpb-parts-pbox-02-180

/* 線囲み 画像幅240px */

.hpb-parts-pbox-02-240

/* 写真ボックス用 文章領域 */

.hpb-parts-pbox-desc

/*** * 複数写真ボックス (div) ***/
/* 飾りなし 画像幅60px 横2x縦1 */

.hpb-parts-mpbox-01-2060

/* 飾りなし 画像幅60px 横3x縦1 */

.hpb-parts-mpbox-01-3060

/* 飾りなし 画像幅60px 横4x縦1 */

.hpb-parts-mpbox-01-4060

/* 飾りなし 画像幅120px 横2x縦1 */

.hpb-parts-mpbox-01-2120

/* 飾りなし 画像幅120px 横3x縦1 */

.hpb-parts-mpbox-01-3120

/* 飾りなし 画像幅120px 横4x縦1 */

.hpb-parts-mpbox-01-4120

/* 飾りなし 画像幅180px 横2x縦1 */

.hpb-parts-mpbox-01-2180

/* 飾りなし 画像幅180px 横3x縦1 */

.hpb-parts-mpbox-01-3180

/* 飾りなし 画像幅180px 横4x縦1 */

.hpb-parts-mpbox-01-4180

/* 飾りなし 画像幅240px 横2x縦1 */

.hpb-parts-mpbox-01-2240

/* 飾りなし 画像幅240px 横3x縦1 */

.hpb-parts-mpbox-01-3240

/* 飾りなし 画像幅240px 横4x縦1 */

.hpb-parts-mpbox-01-4240

/* 線囲み 画像幅60px 横2x縦1 */

.hpb-parts-mpbox-02-2060

/* 線囲み 画像幅60px 横3x縦1 */

.hpb-parts-mpbox-02-3060

/* 線囲み 画像幅60px 横4x縦1 */

.hpb-parts-mpbox-02-4060

/* 線囲み 画像幅120px 横2x縦1 */

.hpb-parts-mpbox-02-2120

/* 線囲み 画像幅120px 横3x縦1 */

.hpb-parts-mpbox-02-3120

/* 線囲み 画像幅120px 横4x縦1 */

.hpb-parts-mpbox-02-4120

/* 線囲み 画像幅180px 横2x縦1 */

.hpb-parts-mpbox-02-2180

/* 線囲み 画像幅180px 横3x縦1 */

.hpb-parts-mpbox-02-3180

/* 線囲み 画像幅180px 横4x縦1 */

.hpb-parts-mpbox-02-4180

/* 線囲み 画像幅240px 横2x縦1 */

.hpb-parts-mpbox-02-2240

/* 線囲み 画像幅240px 横3x縦1 */

.hpb-parts-mpbox-02-3240

/* 線囲み 画像幅240px 横4x縦1 */

.hpb-parts-mpbox-02-4240

/*** * バナーリスト ***/
/* 文字型 1 */

.hpb-parts-blist-01

.hpb-parts-blist-01 ul

.hpb-parts-blist-01 li

.hpb-parts-blist-01 li a

/* 文字型 2 */

.hpb-parts-blist-02

.hpb-parts-blist-02 ul

.hpb-parts-blist-02 li

.hpb-parts-blist-02 li a

/* 文字型 3 */

.hpb-parts-blist-03

.hpb-parts-blist-03 ul

.hpb-parts-blist-03 li

.hpb-parts-blist-03 li a

/* 画像付き 1 */

.hpb-parts-blist-04

.hpb-parts-blist-04 ul

.hpb-parts-blist-04 li

.hpb-parts-blist-04 li a

.hpb-parts-blist-04 li a img

/* 画像付き 2 */

.hpb-parts-blist-05

.hpb-parts-blist-05 ul

.hpb-parts-blist-05 li

.hpb-parts-blist-05 li a

.hpb-parts-blist-05 li a img

/*** * デフォルトスタイル設定 ***/

.hpb-parts-cnt-style

.hpb-parts-hl-style

.hpb-parts-cbox-style

.hpb-parts-hr-style

.hpb-parts-pbox-style

main_10Ca_2c.css

main_10Ca_2c.css

@charset “Shift_JIS”;

/*– 共通レイアウトパーツ設定–*/
/* ヘッダー内パーツ */

#hpb-headerMain

#hpb-headerMain h1

#hpb-headerLogo

#hpb-headerLogo a

#hpb-headerExtra1

#hpb-headerExtra1 p.tel

/* 電話番号の文字設定 */

#hpb-headerExtra1 p.tel span

/* 電話番号の「TEL」文字設定 */

#hpb-headerExtra1 p.address

/* 住所文字設定 */

#hpb-headerExtra2

/* フッター内パーツ */

#hpb-footerMain

#hpb-footerMain p

/* コピーライト文字設定 */

#hpb-footerLogo

#hpb-footerExtra1

#hpb-footerExtra2

/* サイドブロック内パーツ */
main_10Ca_2c.css
/* バナー */

#banner

#banner ul

#banner li

#banner li a

#banner a#banner-access

/* アクセスバナー */
/* 店舗情報 */

#shopinfo h3

#shopinfo h3 span.en

#shopinfo h4

#shopinfo p

/*– ナビゲーションデザイン設定–*/
main_10Ca_2c.css

#hpb-nav li a

/* ナビゲーション文字設定 */
/*– 基本パーツデザイン設定–*/
/* リンク文字色 */

a:link

a:visited

a:hover

a:active

#hpb-skip

/* ヘッダースキップの非表示 */

p

p.large

p.indent

.left

.right

hr

.hpb-layoutset-02 h2

.hpb-layoutset-02 h2 span.ja

.hpb-layoutset-02 h2 span.en

#hpb-wrapper h3

h3.hpb-c-index

h4

h5

table

table th

table td

main_10Ca_2c.css
/* フォームパーツ設定 */

input.button

textarea

input.l

input.m

input.s

/* メインコンテンツ内基本パーツ */

#hpb-main ul

#hpb-main ul li

#hpb-main dl

#hpb-main dt

#hpb-main dd

*:first-child + html #hpb-main dd

/* for IE7 */

* html #hpb-main dd

/* for IE6 */

#hpb-main dl:after

#hpb-main img

#hpb-main img.left

#hpb-main img.right

#pagetop

#pagetop a

/* ページの先頭へのリンク設定 */
/* トップページ デザイン定義 */
main_10Ca_2c.css
/* トップページメインイメージ */

.hpb-layoutset-01 #hpb-title h2

/* メニューページ デザイン定義 */

#toppage-news

#hpb-wrapper #toppage-news h3

#hpb-wrapper #toppage-news h3 span.en

#hpb-wrapper #toppage-news h3 span.ja

user.css

@charset “Shift_JIS”;

/*– フルCSSプロフェッショナルテンプレート部品設定–*/

.hpb-parts-cnt-style

.hpb-parts-hl-style

.hpb-parts-cbox-style

.hpb-parts-img-01

.hpb-parts-img-02

.hpb-parts-hr-style

.hpb-parts-pbox-style

.hpb-parts-pbox-style h4

.hpb-parts-pbox-style img

.hpb-parts-blist-style

a.hpb-parts-blist-style:link

a.hpb-parts-blist-style:visited

a.hpb-parts-blist-style:hover

a.hpb-parts-blist-style:active

/*– ユーザー設定スタイル–*/