フォノグラム基本パーツ

.section(通常ブロック)

旧pfwの「.l-section」と同じ造りになっています。上下の余白は設定していないため、別途Tailwindのクラスで指定してください。
コンテンツ幅はglobal.css内の変数「--contentWidth」で、コンテンツの左右のパディングは「--contentPadding」で指定してください。
カスタムユーティリティに追加したブレイクポイント「--breakpoint-content」は、「--contentWidth」と「--contentPadding」の値を足したものを設定してください。

見出し

h1

h2

h3

h4

h5

※デフォルトの見出しタグです。
※class付きの見出しタグで装飾を行ってください。

ボックス

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります
ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります
ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります
ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります
ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

aタグ

デフォルトのaタグのスタイルは以下のようになっています。
ホバーアクションやアイコンは都度設定してください。
デフォルトのテキスト色は、変数「--key-color」の色になっています。

a {
  text-decoration: none;
  color: var(--key-color);
  &[href^="javascript:void(0)"] {
    pointer-events: none;
  }
}

target="_blank"
「icon-external」のクラスをつけると外部リンクのアイコンが表示されます。
PDF
「icon-pdf」のクラスをつけるとpdfリンクのアイコンが表示されます。

ボタン

コンポーネントは、「/src/components/partials/Button.astro」にあります。

テーブル

■ブロック

会社名	株式会社フォノグラム
代表取締役	フォノグラム太郎

■Fixed

Title	Author	Views
Intro to CSS	Adam	858
Intro to JavaScript	Chris	1,280

■スクロール型

ID	更新日時	金額	内容
00000000	2021/11/25	148,200円	これはテキストです。
11111111	2021/11/26	208,500円	これはテキストです。これはテキストです。

タイムライン

10:00 タイトル1

これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。
12:00 タイトル2

これはテキストです。これはテキストです。これはテキストです。
16:00 タイトル3

これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。これはテキストです。

アコーディオン

コンポーネントは以下の場所にあります。

デフォルト・・・「/src/components/partials/Accordion.astro」
FQA・・・「/src/components/partials/Accordion-faq.astro」

デフォルト

アコーディオンタイトル1: テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
アコーディオンタイトル2: テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
アコーディオンタイトル3: テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

FAQ

アコーディオンタイトル1: テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
アコーディオンタイトル2: テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
アコーディオンタイトル3: テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

タブ

<div x-data="{ show: 'タブ1' }">
  <ul class="flex items-baseline border border-gray divide-x divide-gray overflow-x-scroll xs:overflow-visible">
    <li class="w-full max-w-full min-w-1/2 xs:min-w-1/3 sm:min-w-1/5">
      <button @click="show = 'タブ1'" class="block size-full text-center text-[18px] font-semibold py-5 px-[15px] cursor-pointer"  :class="show === 'タブ1' ? 'bg-[var(--key-color)]' : ''" type="button" aria-label="タブ1を開く">タブ1</button>
    </li>
    <li class="w-full max-w-full min-w-1/2 xs:min-w-1/3 sm:min-w-1/5">
      <button @click="show = 'タブ2'" class="block size-full text-center text-[18px] font-semibold py-5 px-[15px] cursor-pointer"  :class="show === 'タブ2' ? 'bg-[var(--key-color)]' : ''" type="button" aria-label="タブ2を開く">タブ2</button>
    </li>
    <li class="w-full max-w-full min-w-1/2 xs:min-w-1/3 sm:min-w-1/5">
      <button @click="show = 'タブ3'" class="block size-full text-center text-[18px] font-semibold py-5 px-[15px] cursor-pointer" :class="show === 'タブ3' ? 'bg-[var(--key-color)]' : ''" type="button" aria-label="タブ3を開く">タブ3</button>
    </li>
  </ul>

  <div x-show="show === 'タブ1'" class="p-[30px]">
    <p>タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。</p>
  </div>

  <div x-show="show === 'タブ2'" class="p-[30px]">
    <p>タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。</p>
  </div>

  <div x-show="show === 'タブ3'" class="p-[30px]">
    <p>タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。</p>
  </div>
</div>

スライドでタブを移動できます→

タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。タブ1のサンプルテキストです。

タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。タブ2のサンプルテキストです。

タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。タブ3のサンプルテキストです。

モーダル

モーダル1

× とじる

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

モーダル2

× とじる

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

数字で見る

社員数

86名

平成7年時は25名の社員数でしたが、平成22年時には60名と人数も増え、平成から令和にかけて大きく成長を続けています。

令和3年3月現在

社員数

20代
10%
30代
22%
40代
36%
50代
23%
60代
8%

社員数

2020年
11億2,900万円
2019年
11億3,300万円
2018年
10億6,400万円

地域社会の快適で豊かな生活環境づくりに欠かせない適正処理とリサイクルを担うライフラインを守る仕事を行っています。企業から排出される産業廃棄物の処分、家庭から排出されるし尿やゴミといった一般廃棄物の収集運搬、浄化槽や下水道施設の運転管理による地域排水の浄化、地域高齢化社会支援を目的としたゴミの片付け支援など、多岐にわたって、お客様や地域の方々へとサービスを提供しています。

パーツ集 | フォノグラム基本パーツ