更新履歴
- 2024/12/09 tailwindcss v3.4.13に変更
説明
- tailwindcssのチートシート 。
- 何かライブラリを使う場合はライブラリのCDNJSを使うと便利。
- fontawesomeからアイコンを探すバージョン6.7.1
- モーダルはModaalを利用。「画像」「コンテンツ」「Youtube」。
モーダルのコンテンツ
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
固定幅 文章と画像
h3がはいります。
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
固定幅 1列（Youtube埋め込み）
固定幅 2列レイアウト
固定幅 3列レイアウト
固定幅 4列レイアウト
スライドギャラリー
オートスライドギャラリー
汎用ブロックパターン1
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
汎用ブロックパターン2
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
命名規則
BEM（Block Element Modifierの略で、CSSを設計･命名していく手法）を命名規則とする。
| 要素 | 略称 | 例 |
|---|---|---|
| セクション要素 | section | .***-section (ex キービジュアル) .kv-section |
| ブロック要素 | block | .***-block (ex 汎用ブロック) .base-block |
| 要素内の内側 | inner | . (ex 汎用ブロックの内側) .base-block__inner |
| 要素内の子要素 | item | (ex 汎用ブロックの子要素) .base-block__item |
| 要素内の固有の見出し | heading | (ex 汎用ブロックの見出し) .base-block__heading |
| 要素内の固有のテキスト | text | (ex 汎用ブロックのテキスト) .base-block__text |
| 要素内の固有の画像 | img | (ex 汎用ブロックの画像) .base-block__img |
| 見出し | heading | .heading-00 (ex 汎用見出し) .heading-01 |
| ボタン | btn | .***-btn (ex 汎用ボタン) .base-btn |
| リスト | list | .***-list,.***-num-list (ex 汎用リスト) .base-list (ex 汎用ナンバーリスト) .base-num-list |
| テーブル | table | .***-table (ex 汎用テーブル) .base-table |
| ナビゲーション | nav | .***-nav グローバルナビ:.global-nav ローカルナビ:.local-nav パンくず:.bread-nav |
| 画像ファイル名 | img-00 | (ex ページ内で5枚目の画像名) img-05.png |