MODULES

モジュール一覧

見出しモジュール

m-title-01（基本）

見出しテキスト

<h2 class="m-title-01"> <span class="m-title-01__label">見出しテキスト</span> </h2> クリックでコピー

m-title-01（左寄せ）

見出しテキスト（左寄せ）

<h2 class="m-title-01 m-title-01--left"> <span class="m-title-01__label">見出しテキスト</span> </h2> クリックでコピー

m-title-01（ハイライト付き）

見出しテキストハイライトを含む

<h2 class="m-title-01"> <span class="m-title-01__label">見出しテキスト<span class="m-title-01__highlight">ハイライト</span>を含む</span> </h2> クリックでコピー

m-title-02（基本）

見出しテキスト

<h3 class="m-title-02">見出しテキスト</h3> クリックでコピー

m-title-02（アンダーライン付き）

見出しテキスト

<h3 class="m-title-02 m-title-02--underline">見出しテキスト</h3> クリックでコピー

m-title-02（カラーバリエーション）

見出しテキスト（Primary）

見出しテキスト（Secondary）

見出しテキスト（Corporate）

見出しテキスト（Personal）

<h3 class="m-title-02 m-title-02--primary">見出しテキスト</h3> <h3 class="m-title-02 m-title-02--secondary">見出しテキスト</h3> <h3 class="m-title-02 m-title-02--corporate">見出しテキスト</h3> <h3 class="m-title-02 m-title-02--personal">見出しテキスト</h3> クリックでコピー

m-title-02（アンダーライン + カラー）

見出しテキスト（Primary + Underline）

見出しテキスト（Secondary + Underline）

見出しテキスト（Corporate + Underline）

見出しテキスト（Personal + Underline）

<h3 class="m-title-02 m-title-02--underline m-title-02--primary">見出しテキスト</h3> <h3 class="m-title-02 m-title-02--underline m-title-02--secondary">見出しテキスト</h3> <h3 class="m-title-02 m-title-02--underline m-title-02--corporate">見出しテキスト</h3> <h3 class="m-title-02 m-title-02--underline m-title-02--personal">見出しテキスト</h3> クリックでコピー

m-title-02（左寄せ）

見出しテキスト（左寄せ）

<h3 class="m-title-02 m-title-02--left">見出しテキスト</h3> クリックでコピー

m-title-02（左寄せ + アンダーライン）

見出しテキスト（左寄せ + アンダーライン）

<h3 class="m-title-02 m-title-02--left m-title-02--underline">見出しテキスト</h3> クリックでコピー

m-title-03（基本）

WORKS

業務内容

<div class="m-title-03"> <h2 class="m-title-03__en">WORKS</h2> <h3 class="m-title-03__ja">業務内容</h3> </div> クリックでコピー

m-title-04（基本）

ENGLISH TITLE

日本語タイトル

<div class="m-title-04"> <h2 class="m-title-04__en"> <span class="m-title-04__bullet"></span>ENGLISH TITLE </h2> <h3 class="m-title-04__ja">日本語タイトル</h3> </div> クリックでコピー

m-title-04（中央寄せ）

ENGLISH TITLE

日本語タイトル（中央寄せ）

<div class="m-title-04 m-title-04--center"> <h2 class="m-title-04__en"> <span class="m-title-04__bullet"></span>ENGLISH TITLE </h2> <h3 class="m-title-04__ja">日本語タイトル</h3> </div> クリックでコピー

m-title-04（白文字）

ENGLISH TITLE

日本語タイトル（白文字）

<div class="m-title-04 m-title-04--center m-title-04--white"> <h2 class="m-title-04__en"> <span class="m-title-04__bullet"></span>ENGLISH TITLE </h2> <h3 class="m-title-04__ja">日本語タイトル</h3> </div> クリックでコピー

m-title-05（基本）

工務部 - 施工班 -

<h3 class="m-title-05"> <span class="m-title-05__text">工務部 - 施工班 -</span> </h3> クリックでコピー

ボタンモジュール

m-btn-01（基本）

ボタンテキスト
<a href="#" class="m-btn-01"> <span>ボタンテキスト</span> </a> クリックでコピー

m-btn-01（バリエーション）

Primary Primary Reverse Secondary Secondary Reverse Corporate Corporate Reverse Personal Personal Reverse Recruit Recruit Yellow
--primary, --primary-reverse, --secondary, --secondary-reverse, --corporate, --corporate-reverse, --personal, --personal-reverse, --recruit, --recruit-yellow クリックでコピー

m-btn-01（サイズバリエーション）

Small Normal Large
--small, （デフォルト）, --large クリックでコピー

m-btn-01（Recruitバリエーション）

社員インタビューを読む 詳しく見る 求人情報を詳しく見る
<a href="#" class="m-btn-01 --recruit"><span>社員インタビューを読む</span></a> <a href="#" class="m-btn-01 --recruit --small"><span>詳しく見る</span></a> <a href="#" class="m-btn-01 --recruit-yellow"><span>求人情報を詳しく見る</span></a> クリックでコピー

m-btn-01（--backバリエーション）

修正する 修正する 修正する 修正する 修正する 修正する 修正する 修正する
<a href="#" class="m-btn-01 --primary --back"><span>修正する</span></a> <a href="#" class="m-btn-01 --primary-reverse --back"><span>修正する</span></a> <a href="#" class="m-btn-01 --secondary --back"><span>修正する</span></a> <a href="#" class="m-btn-01 --secondary-reverse --back"><span>修正する</span></a> <a href="#" class="m-btn-01 --corporate --back"><span>修正する</span></a> <a href="#" class="m-btn-01 --corporate-reverse --back"><span>修正する</span></a> <a href="#" class="m-btn-01 --personal --back"><span>修正する</span></a> <a href="#" class="m-btn-01 --personal-reverse --back"><span>修正する</span></a> クリックでコピー

ボックスモジュール

m-box-01（基本）

サンプル画像

ボックスタイトル

ボックスの説明文がここに入ります。ボックスの説明文がここに入ります。ボックスの説明文がここに入ります。

<section class="m-box-01"> <div class="m-box-01__container"> <div class="m-box-01__image"> <img src="画像パス" alt="サンプル画像"> </div> <div class="m-box-01__content"> <div class="m-box-01__title"> <h2 class="m-box-01__title--main">ボックスタイトル</h2> </div> <p class="m-box-01__description">ボックスの説明文がここに入ります。</p> </div> </div> </section> クリックでコピー

m-box-01（左右逆）

サンプル画像

ボックスタイトル（左右逆）

ボックスの説明文がここに入ります。ボックスの説明文がここに入ります。ボックスの説明文がここに入ります。

<section class="m-box-01 m-box-01--reverse"> <div class="m-box-01__container"> <div class="m-box-01__image"> <img src="画像パス" alt="サンプル画像"> </div> <div class="m-box-01__content"> <div class="m-box-01__title"> <h2 class="m-box-01__title--main">ボックスタイトル（左右逆）</h2> </div> <p class="m-box-01__description">ボックスの説明文がここに入ります。</p> </div> </div> </section> クリックでコピー

CTAモジュール

m-cta（基本）

お電話でのお問い合わせ

0800-200-8000
<section class="m-cta"> <div class="container"> <div class="m-cta__contact"> <div class="m-cta__phone-section"> <h3 class="m-cta__phone-title"> <span class="m-cta__phone-title-icon m-cta__phone-title-icon--left"></span> お電話でのお問い合わせ <span class="m-cta__phone-title-icon m-cta__phone-title-icon--right"></span> </h3> <div class="m-cta__phone-content"> <div class="m-cta__phone-icon"> <i class="fas fa-phone"></i> </div> <div class="m-cta__phone-number">0800-200-8000</div> </div> </div> <div class="m-cta__email-section"> <h3 class="m-cta__email-title"> <span class="m-cta__email-title-icon m-cta__email-title-icon--left"></span> メールでのお問い合わせ <span class="m-cta__email-title-icon m-cta__email-title-icon--right"></span> </h3> <a href="#" class="m-btn-01 --primary --large"> <span>お問い合わせフォームはこちら</span> </a> </div> </div> </div> </section> クリックでコピー

フォームモジュール

m-form（基本構造）

フォームの説明文がここに入ります。

<div class="m-form">...</div>

施工実績モジュール

m-works（基本構造）

WORKS
池田電業の実績
施工実績

施工実績タイトル
<section class="m-works">...</section>

サービスモジュール

m-services（個人向け）

個人向けサービス

サービス

サービスタイトル

サービスの説明文がここに入ります。

<section class="m-services"><div class="m-services__personal">...</div></section>

m-services（法人向け）

法人向けサービス

サービス

サービスタイトル

サービスの説明文がここに入ります。

<section class="m-services"><div class="m-services__corporate">...</div></section>

選ばれる理由モジュール

m-reasons（基本）

REASONS
池田電業が選ばれる理由
POINT 01

選ばれる理由

<section class="m-reasons">...</section>

お客様の声モジュール

m-voices（基本）

お客様の声

お客様アイコン

お客様の声タイトル

お客様の声の内容がここに入ります。

<section class="m-voices">...</section>

対応可能エリアモジュール

m-area（基本）

対応可能エリア

対応可能エリア

対応可能エリアの説明文がここに入ります。

<section class="m-area">...</section>

FAQモジュール

m-faq（基本）

Q&A

よくある質問

Q. 質問内容がここに入ります。
A. 回答内容がここに入ります。
<section class="m-faq">...</section>

お困りごとモジュール

m-trouble（基本）

こんなお困り事はありませんか？

お困りごと
<section class="m-trouble">...</section>

ブログモジュール

m-blog-list（基本）

<ul class="m-blog-list__items">...</ul>

ページネーションモジュール

m-pagenation（基本）

1 2 3
<div class="m-pagenation">...</div>

ヒーローモジュール

m-hero-type1（基本）

ヒーロータイトル

サブタイトル

ヒーローセクションの説明文がここに入ります。

ヒーロー画像
<section class="m-hero-type1">...</section>

ページタイトルモジュール

m-pagetitle（基本）

アイコン

PAGE

ページタイトル

ページヘッダー画像
<div class="m-pagetitle">...</div>

パンくずリストモジュール

m-breadcrumb（基本）

<div class="m-breadcrumb"><ul><li><a href="#">ホーム</a></li><li>現在のページ</li></ul></div>

その他のモジュール

使用可能なモジュール一覧

  • m-title-01 - 見出しモジュール（h2用）
  • m-title-02 - 見出しモジュール（h3用）
  • m-title-03 - 見出しモジュール（英語左揃え+日本語左揃え）
  • m-title-04 - 見出しモジュール（英語+日本語タイトル）
  • m-title-05 - 見出しモジュール（日本語タイトルのみ、h3用）
  • m-btn-01 - ボタンモジュール
  • m-box-01 - ボックスモジュール
  • m-cta - CTAセクション
  • m-form - フォームモジュール
  • m-works - 施工実績モジュール
  • m-services - サービスモジュール（個人向け・法人向け）
  • m-reasons - 選ばれる理由モジュール
  • m-voices - お客様の声モジュール
  • m-area - 対応可能エリアモジュール
  • m-faq - FAQモジュール
  • m-trouble - お困りごとモジュール
  • m-blog-list - ブログリストモジュール
  • m-pagenation - ページネーションモジュール
  • m-hero-type1 - ヒーローモジュール
  • m-pagetitle - ページタイトルモジュール
  • m-breadcrumb - パンくずリストモジュール
  • m-loading - ローディングモジュール
  • m-notfound404 - 404ページモジュール
  • m-works-filter - 施工実績フィルターモジュール