本文へスキップ

個人の習熟度に合わせたレッスンで確実に上達。川越市霞ヶ関北、築和工房

電話でのお問い合わせはTEL.049-232-0989

〒350-1109 川越市霞ヶ関北3-6-21

ホームページビルダのCSS構造HpbCSS

スタイルシートファイルは4点

container_10D_2c_topleft.css
hpbparts.css
main_10D_2c.css
user.css


container_10D_2c_topleft.cssの要素一覧

@charset "Shift_JIS";

/* 要素リセット */

body

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

html:\66irst-child body

/* end */

img

レイアウト設定

#hpb-container

#hpb-header

#hpb-inner

.hpb-layoutset-01 #hpb-inner

#hpb-inner:after

#hpb-wrapper

#hpb-title

.hpb-layoutset-01 #hpb-title

.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-layoutset-01 #hpb-footer

.hpb-layoutset-02 #hpb-footer

#hpb-nav

デザイン設定
/* コンテンツ配置領域 */
/* トップページメインイメージ */

.hpb-layoutset-01 #hpb-title h2

/* ナビゲーション */

#hpb-nav ul

#hpb-nav ul:after

#hpb-nav li

#hpb-nav li 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

共通パーツデザイン設定

.hpb-layoutset-01 #toppage p

.hpb-layoutset-01 #toppage p

.large

.hpb-layoutset-01 #pagetop

/* 先頭に戻るボタンの左右設定 */

#pagetop a

/* コンテンツタイトルの左右設定 */

.hpb-layoutset-02 h2


hpbparts.cssの要素一覧

@charset "Shift_JIS";

* float clear

.hpb-clear

.hpb-clearfix:after

.hpb-clearfix

zoom: 1; /* 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

/* 線囲み 幅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)
/* 装飾なし */

.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_10D_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

#hpb-headerExtra1 p.address

/* 住所文字設定 */

#hpb-headerExtra2

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

#hpb-footerMain

#hpb-footerMain p

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

#hpb-footerLogo

#hpb-footerExtra1

#hpb-footerExtra2

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

#banner

#banner ul

#banner li

#banner li a

#banner a#banner-access

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

#shopinfo

#shopinfo h3

#shopinfo h3 span.en

#shopinfo h4

#shopinfo p

ナビゲーションデザイン設定

#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

/* フォームパーツ設定 */

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

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

#hpb-wrapper #toppage-news

#hpb-wrapper #toppage-news h3

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

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

#hpb-wrapper #toppage-news dl dt

#hpb-wrapper #toppage-news dl dd


user.cssの要素一覧


@charset "Shift_JIS";

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

.hpb-parts-cnt-style

.hpb-parts-hl-style

.hpb-parts-cbox-style

.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

hpbparts
/* 飾りなし 幅自動 */

.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

/* 線囲み 幅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)
/* 装飾なし */

.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

.hpb-parts-pbox-01 h4

/* 飾りなし 画像幅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

.hpb-parts-pbox-02 h4

/* 線囲み 画像幅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

.hpb-parts-pbox-desc h4

* 複数写真ボックス (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

ユーザー設定スタイル

※ここに詳しい案内文が入ります。ここに詳しい案内文が入ります。ここに詳しい案内文が入ります。

領域の構造

HOME(ルート上のindex.html)


お問い合わせ

お問合せ

築和工房関連サイト

 

information

築和工房

〒350-1109
川越市霞ヶ関北3-6-21
TEL.049-232-0989
FAX.049-232-0989

問合せ

関連サイト

RLC