HELLO1

HELLO2

HELLO3

HELLO4

更新履歴

  • 2026/04/12 更新 細かなアップデート
  • 2026/03/13 更新 tailwindcss v4に変更

説明

固定幅 文章と画像

h3がはいります。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

カード

タイトルが入ります

説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。

15,000円

タイトルが入ります

説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。

15,000円

タイトルが入ります

説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。

15,000円

タイトルが入ります

説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。

15,000円

固定幅 1列(Youtube埋め込み)

固定幅 2列レイアウト

要素をマウスオーバーでアニメーション
要素をクリックでアニメーション

固定幅 3列レイアウト(スクロールに合わせてアニメーション)

キャプション
キャプション
キャプション

固定幅 4列レイアウト(GOクリックで要素がアニメーション)

キャプション
キャプション
キャプション
キャプション

ボタン

WPのページャー

検索ボックス

スライドギャラリー

オートスライドギャラリー

汎用ブロックパターン1

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

汎用ブロックパターン2

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

命名規則

BEM(Block Element Modifierの略で、CSSを設計・命名していく手法)を命名規則とする。

イレギュラーはTailwind cssのユーティリティclassを使用する。コンポーネントとして昇格したblockやitemは固有classとして作成する。

要素 略称 命名規則例
セクション要素 section .***-section
.kv-section(キービジュアル)
ブロック要素 block .***-block
.base-block(汎用ブロック)
要素内の内側 inner .***__inner
.base-block__inner(汎用ブロックの内側)
要素内の子要素 item .***__***
.base-block__item(汎用ブロックの子要素)
.price-block__heading(価格ブロックの見出し)
.price-block__text(価格ブロックのテキスト)
.price-block__img(価格ブロックの画像)
見出し heading .heading-00
.heading-01(汎用H1の見出し)
.heading-top(トップページだけで使う見出し)
ボタン btn .***-btn
.base-btn(汎用ボタン)
リスト list .***-list
.base-list(汎用リスト)
.num-list(汎用連番リスト)
テーブル table .***-table
.base-table(汎用テーブル)
ナビゲーション nav .***-nav
.global-nav(グローバルナビ)
.local-nav(ローカルナビ)
.bread-nav(パンくず)
.page-numbers(WPのページャー)
画像ファイル名 img img-05.png(ページ内で5枚目の画像名)