見出し系
見出しスタイル1
h2.ttl_style01 見出しスタイル1
見出しスタイル2
h3.ttl_style02 見出しスタイル2
ボタン系
ボタンの（小）（標準）（大）の使い分けに関しては重要なリンクは（大）、通常のリンクは（標準）、優先度が低いものは（小）を使用してください。
p.btn_style01.small: a(href="#") ボタンスタイル（小）
p.btn_style01: a(href="#") ボタンスタイル（標準）
p.btn_style01.large: a(href="#") ボタンスタイル（大）
ボタンスタイル（ブランクアイコン）は外部リンクなど別ウインドウで開く場合に使用してください。
p.btn_style01.blank: a(href="#") ボタンスタイル（ブランクアイコン）
ボタンスタイル（pdfアイコン）はpdfファイルへのリンクに使用してください。
p.btn_style01.pdf: a(href="#") ボタンスタイル（pdfアイコン）
ボタンスタイル下向きはアンカーリンクで使用してください。
p.btn_style01.down.small: a(href="#") ボタンスタイル下向き（小）
p.btn_style01.down: a(href="#") ボタンスタイル下向き（標準）
p.btn_style01.down.large: a(href="#") ボタンスタイル下向き（大）
ボタンスタイル上向きはページの頭に戻る場合などで使用してください。
p.btn_style01.up.small: a(href="#") ボタンスタイル上向き（小）
p.btn_style01.up: a(href="#") ボタンスタイル上向き（標準）
p.btn_style01.up.large: a(href="#") ボタンスタイル上向き（大）
ボタンスタイル左向きは「前のページへ戻る」で使用してください。
p.btn_style01.back.small: a(href="#") ボタンスタイル左向き（小）
p.btn_style01.back: a(href="#") ボタンスタイル左向き（標準）
p.btn_style01.back.large: a(href="#") ボタンスタイル左向き（大）
こちらのリンクは補足的に使用するリンクなど扱いが小さい場合に使用してください。
p.link_style01.small: a(href="#") リンクスタイル（小）
p.link_style01: a(href="#") リンクスタイル（標準）
p.link_style01.large: a(href="#") リンクスタイル（大）
テキスト設定
テキストサイズ12
テキストサイズ14
テキストサイズ16
テキストサイズ18
テキストサイズ20
テキストサイズ22
テキストサイズ24
テキストサイズ26
テキストサイズ28
標準のテキストサイズは「テキストサイズ16」となります
p.txt12 テキストサイズ12
p.txt14 テキストサイズ14
p.txt16 テキストサイズ16
p.txt18 テキストサイズ18
p.txt20 テキストサイズ20
p.txt22 テキストサイズ22
p.txt24 テキストサイズ24
p.txt26 テキストサイズ26
p.txt28 テキストサイズ28
テキストカラー
テキストカラー
テキストカラー
ユーザへの伝達優先度として赤→緑→青で使用してください。
p.txt_red テキストカラー
p.txt_green テキストカラー
p.txt_blue テキストカラー
右揃え
中央揃え
p.txt_right 右揃え
p.txt_center 中央揃え
明朝
明朝体ですが、アズビル金門グループ環境方針の署名部分などに使用しています。
p.font_notoserif 明朝
横幅・マージン
横幅10%
横幅20%
横幅30%
横幅40%
横幅50%
スマホ横幅10%
スマホ横幅20%
スマホ横幅30%
スマホ横幅40%
スマホ横幅50%
p.w10 横幅10%
p.w20 横幅20%
p.w30 横幅30%
p.w40 横幅40%
p.w50 横幅50%
p.w10sp スマホ横幅10%
p.w20sp スマホ横幅20%
p.w30sp スマホ横幅30%
p.w40sp スマホ横幅40%
p.w50sp スマホ横幅50%
w1～w100まで用意してます
下マージン0rem
下マージン1rem
下マージン2rem
下マージン3rem
下マージン4rem
スマホ下マージン0rem
スマホ下マージン1rem
スマホ下マージン2rem
スマホ下マージン3rem
スマホ下マージン4rem
コンテンツの区切りなどで下マージンを空ける場合は「下マージン3rem」を使用してください。
p.mb0 下マージン0rem
p.mb1 下マージン1rem
p.mb2 下マージン2rem
p.mb3 下マージン3rem
p.mb4 下マージン4rem
p.mb0sp スマホ下マージン0rem
p.mb1sp スマホ下マージン1rem
p.mb2sp スマホ下マージン2rem
p.mb3sp スマホ下マージン3rem
p.mb4sp スマホ下マージン4rem
- タイトル
- 内容
- タイトル
- 内容
会社概要などの一覧に使用します。
.outline_style01
dl
dt タイトル
dd 内容
dl
dt タイトル
dd 内容
- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
ul.indent_list_square
li 箇条書き
li 箇条書き
li 箇条書き
li 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
ul.indent_list_square.gray
li 箇条書き
li 箇条書き
li 箇条書き
li 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
ul.indent_list_circle
li 箇条書き
li 箇条書き
li 箇条書き
li 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
ul.indent_list_circle.black
li 箇条書き
li 箇条書き
li 箇条書き
li 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
- 箇条書き
箇条書きの●の色はカタログに合わせてお使いください。
ul.indent_list_circle.blue
li 箇条書き
li 箇条書き
li 箇条書き
li 箇条書き
- 文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1
- 文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1
- 文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1
ul.indent_list1
li 文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1
li 文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1
li 文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1文頭にインデント1
左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト
罫線の色はカタログに合わせてお使いください。
p.line_left_green 左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト
左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト左に緑罫線のテキスト
罫線の色はカタログに合わせてお使いください。
p.line_left_blue 左に青罫線のテキスト青罫線のテキスト青罫線のテキスト青罫線のテキスト青罫線のテキスト青罫線のテキスト青罫線のテキスト
クリックで拡大
拡大に耐えられるように画像はブラウザ表示時の2倍のサイズで書き出ししてください。
a(href="javascript:void(0);").zoom_link
img(src="/asset/img/product/water/batterymeter/mgb12a/chart01.jpg")
p.zoom_txt: span クリックで拡大
カラム
2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム
2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム
.col2
.col 2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム
.col 2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム
3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム
3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム
3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム
.col3
.col 3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム
.col 3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム
.col 3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム
4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム
4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム
4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム
4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム
.col4
.col 4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム
.col 4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム
.col 4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム
.col 4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム4カラム
5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
.col5
.col 5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
.col 5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
.col 5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
.col 5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
.col 5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム5カラム
表組
| 項目 | 項目 |
|---|---|
| 項目 | 項目 |
.table_style01
table
tr
th 項目
th 項目
tr
td 項目
td 項目
| 項目 | 項目 |
|---|---|
| 項目 | 項目 |
.table_style01.font_large
table
tr
th 項目
th 項目
tr
td 項目
td 項目
アイコン系
- 計測方式
- 口径
- JIS対応
- 表示部
- 液晶バック
製品詳細ページで使用します。
ul.spec_icon.mb1
li 計測方式
li 口径
li JIS対応
li 表示部
li 液晶バック
- 13mm
- 20mm
- 25mm
- 30mm
- 40mm
- 50mm
製品詳細ページで使用します。
ul.mm_icon
li
span 13 | mm
li
span 20
| mm
li
span 25
| mm
li
span 30
| mm
li
span 40
| mm
li
span 50
| mm
外部電源式水道メーター
.half_icon
span
span 外部電源式
span 水道メーター
国土交通省公共建築工事標準仕様適合品
p.conformity_mark 国土交通省公共建築工事標準仕様適合品
- 標準機能
-
- ロードサーベイ
- 瞬間流量表示
- 電池電圧低下警告
- 誤カウント防止
製品詳細ページで使用します。
dl.function_icon
dt 標準機能
dd
ul
li ロードサーベイ
li 瞬間流量表示
li 電池電圧低下警告
li 誤カウント防止
タブ
ul.tab_style
li.water_faq: a.active(href="javascript:void(0);") 水道メーターに関するご質問
li.gas_faq: a(href="javascript:void(0);") ガスメーターに関するご質問
BOX系
Modbus通信とは
RS485はEIA（Electronic Industries Association：米国電子工業会）の通信規格であり、産業分野で使用されてきた汎用的な通信方式です。
.red_line_box
h2.txt_red.txt20.txt_center.mb1 Modbus通信とは
p RS485はEIA（Electronic Industries Association：米国電子工業会）の通信規格であり、産業分野で使用されてきた汎用的な通信方式です。
水道メーターの検定有効期間は8年です。
.red_box.txt28.txt24ld.mb1 水道メーターの検定有効期間は8年です。
熱量 ＝ 冷温水の通過量 × 送り側と返り側の温度差 × 熱量換算係数
p.orange_box.box_center 熱量 ＝ 冷温水の通過量 × 送り側と返り側の温度差 × 熱量換算係数
熱感知付警報器は設置場所の床面積が概ね30ｍ
.gray_box
p 熱感知付警報器は設置場所の床面積が概ね30ｍ
-
導入しやすいサービス環境
センターシステムの購入等が不要ですので、初期導入でかかる費用を抑えることが可能です。
-
いつでもどこでもデータを確認できます
それぞれのメーター設置場所へ出向くことなく、お持ちのパソコンやタブレットなどから検針データを確認できます。
ピクトグラムやアイコンを用いた説明文などに使用します。
.explan_style01
ul
li
p.pict: img(src="/asset/img/product/smaas/gasmieru_outline_pict01.jpg")
.copy
p.title 導入しやすいサービス環境
p.txt センターシステムの購入等が不要ですので、初期導入でかかる費用を抑えることが可能です。
li
p.pict: img(src="/asset/img/product/smaas/gasmieru_outline_pict02.jpg")
.copy
p.title いつでもどこでもデータを確認できます
p.txt それぞれのメーター設置場所へ出向くことなく、お持ちのパソコンやタブレットなどから検針データを確認できます。
- お困りではないですか？
-
電力の見える化で省エネってよく聞くけど
水道やガスも省エネしなくていいの？
dl.explan_style03.blue
dt お困りではないですか？
dd
.col2.align_center
.col.w55.w100sp.txt20.txt16ld.txt_bold 電力の見える化で省エネってよく聞くけど
br.is-hidden-ld
| 水道やガスも省エネしなくていいの？
.col.w45.w70sp
img(src="/asset/img/product/water/hems/explan_photo01.png")
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
注意事項などの記載に使用します。
.attention_style01
.ttl: span タイトル
.txt テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
リスト系
-
2022.04.01
製品情報
-
2021.12.10
プレスリリース
NEWS一覧で使用します。
ul.news_list
li
p.date 2022.04.01
p.category 製品情報
p.title
a(href="/asset/document/product/water/water_catalog.pdf" target="_blank") 2022年度版水道総合カタログ・価格表掲載いたしました
li
p.date 2021.12.10
p.category プレスリリース
p.title
a(href="/asset/document/news/news_20211210.pdf" target="_blank") アズビルとアズビル金門社員が計量制度運営等貢献者として産業技術環境局長表彰を受賞
-
警告 この表示を無視して誤った取り扱いをすると、人が死亡または重傷を負う可能性が想定される内容を示しています。
ul.icon_list_style01
li
.icon
img(src="/asset/img/icon_attention.svg")
| 警告
.txt この表示を無視して誤った取り扱いをすると、人が死亡または重傷を負う可能性が想定される内容を示しています。
- 1904年
- 金門商会を創始、東京市神田区及び本所区に工場を新設
国産初のガスメーター十文字乾式Ａ型を開発
- 1912年
- 東京府北豊島郡巣鴨に本社及び東京工場、大阪市に大阪工場、福岡市に福岡工場を新設
沿革ページで使用します。
.history_style01
dl
dt 1904年
dd 金門商会を創始、東京市神田区及び本所区に工場を新設
br
| 国産初のガスメーター十文字乾式Ａ型を開発
dl
dt 1912年
dd 東京府北豊島郡巣鴨に本社及び東京工場、大阪市に大阪工場、福岡市に福岡工場を新設
コンテンツリスト
コンテンツリンクを3列並べる場合に使用します。
ul.content_list_style01.row3
li
a(href="/corpo/message/")
p.photo: img(src="/asset/img/keycut_corpo_message.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
コンテンツリンクを4列並べる場合に使用します。
ul.content_list_style01
li
a(href="/corpo/message/")
p.photo: img(src="/asset/img/keycut_corpo_message.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
コンテンツリンクを5列並べる場合に使用します。
ul.content_list_style01.row5
li
a(href="/corpo/message/")
p.photo: img(src="/asset/img/keycut_corpo_message.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
li
a(href="/corpo/outline/")
p.photo: img(src="/asset/img/keycut_corpo_outline.jpg")
p.title タイトル
