タイトルが入ります
更新履歴
説明
- tailwindcssのリファレンス 。
- 何かライブラリを使う場合はライブラリのCDNJSを使うと便利。
- fontawesomeからアイコンを探すバージョン6.7.1
- モーダルはModaalを利用。「画像」「コンテンツ」「Youtube」。
モーダルのコンテンツ
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
固定幅 文章と画像
h3がはいります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
カード
固定幅 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枚目の画像名) |