drag-area

COMPONENT

要素

HTML要素

段落、テキスト (p、strong、.text-xxxx)

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

小さい文字のクラスは「.text-sm」

大きい文字のクラスは「.text-lg」

リンク (a)

見出し (h1、h2、h3、h4、h5、h6、.title)

見出し

見出し

見出し

見出し

見出し
見出し
見出しにクラスが必要な場合は「.title」。 見出しが長い文章になった場合、 画面幅が狭いと 中途半端な位置で文字が 途切れてしまうことがあります。 <span>タグで囲むことにより 「display: inline-block;」 が割り当てられ、 中途半端な位置で改行されることが 減ります。

リスト (ul、ol、li) →.list、.list-note

  • いろはにほへと
  • ちりぬるを
  • わかよたれそ
  • つねならむ
  • うゐのおくやま
  • けふこえて
  • あさきゆめみし
  • ゑひもせす
  1. イロハニホヘト
  2. チリヌルヲ
  3. ワカヨタレソ
  4. ツネナラム
  5. ウヰノオクヤマ
  6. ケフコエテ
  7. アサキユメミシ
  8. ヱヒモセス
  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと
  • なにぬねの

テーブル (table、thead、tbody、tfoot、tr、th、td)

クラス名がいまいちなので検討中

言語 話される国 話者数
中国語 中華人民共和国、中華民国(台湾)、シンガポール、マレーシア、インドネシア、タイ王国など 13億人以上
英語 イギリス、アメリカ合衆国、カナダ、ジャマイカ、南アフリカ共和国、フィリピンなど約80の国・地域 約3億3500万人
アラビア語 アラブ首長国連邦、イスラエル、イラク、イラン、エジプト、サウジアラビア、シリアなど 約2億3500万人
フランス語 フランス、モナコ公国、カナダ、ハイチ、ルワンダ、コンゴ共和国など 約1億3000万人
日本語 日本 約1億2700万人
.table-border
社名 時価総額 CEO
Apple 918.5億ドル 眼鏡
Amazon 790.7億ドル 眼鏡ではない
Microsoft 759.4億ドル 眼鏡
Alphabet 758.8億ドル 眼鏡
.table-stripe
社名 時価総額 CEO
Apple 918.5億ドル 眼鏡
Amazon 790.7億ドル 眼鏡ではない
Microsoft 759.4億ドル 眼鏡
Alphabet 758.8億ドル 眼鏡
.table-border-none
社名 時価総額 CEO
Apple 918.5億ドル 眼鏡
Amazon 790.7億ドル 眼鏡ではない
Microsoft 759.4億ドル 眼鏡
Alphabet 758.8億ドル 眼鏡

テーブルのレスポンシブ

.table-smart
料理名 価格 満足度 カロリー
ステーキ
ラーメン
回転寿司
.not-responsive
料理名 価格 満足度 カロリー
ステーキ
ラーメン
回転寿司

画像 (img、figure、.thumbnail)

画像のキャプション

アイコン (.icon)

「/src/font/svg」ディレクトリに「.svg」ファイルを保存すると、オリジナルのアイコンフォントが生成されます。

アイコンを使用するためのclass名は「.svg」ファイルの名前です。
例えば「icon-xxxx.svg」を保存した場合、「class="icon icon-xxxx"」を指定するとアイコンが表示されます。

使用可能なアイコンを確認するページ

ローディングアイコン (.loading)

input[type="text"]
input[type="radio"]
input[type="checkbox"]
input[type="range"]
select
textarea
.btn

フォーム (input、textarea、select、option、.field、.field-group、.fieldset)

いまいち整備されてないです。

Bootstrapと仕様が異なります。「.form-control」「.form-check-input」などは使用しません。
フォームに関してはSemantic UIを参考に 「.field」クラスを使用するようにしています。

HTMLだけ

input[type="text"]
input[type="email"]
input[type="password"]
input[type="file"]
input[type="number"]
input[type="radio"]
input[type="checkbox"]
input[type="range"]
select
textarea
:disabled

.field

.field
.field
.unit
おおよそ kg
.field-search
.field-date

.field-group

.field-group
.field-group

その他のUI

.datetimepicker
.field.loading

バリデーション

Bootstrap「.invalid-feedback (赤)」「.valid-feedback (緑)」

.is-invalid
.invalid-feedback
未入力です。
未入力です。
未入力です。
未入力です。
未入力です。
未入力です。
.is-valid
.valid-feedback
未入力です。
未入力です。
未入力です。
未入力です。
未入力です。
未入力です。

モジュール

アラート (.alert、.alert-group)

アラートのメッセージを入力してください。
(.alert-danger) アラートのメッセージを入力してください。
(.alert-warning) アラートのメッセージを入力してください。
(.alert-success) アラートのメッセージを入力してください。

ボタン (.btn)

.btn-sm、.btn-lg

.btn-fill、.btn-outline、.btn-skeleton

.btn-rect

.btn-pill

.btn-circle

.btn-fluid

バッジ、タグ (.badge)

バッジ バッジ バッジ
バッジ バッジ
バッジ バッジ
バッジ バッジ
1 1
form エラーメッセージ ページネーション ローディングアイコン

モーダルウィンドウ ([data-toggle="modal"]、.modal、.modal-header、.modal-content、.modal-footer)

未実装 (Vue.jsにしたい)

ポップアップ、ポップオーバー、ツールチップ ([data-toggle="popup"]、.popup、.popup-header、.popup-contentr)

未実装 (Vue.jsにしたい)

アコーディオン、トグル ([data-toggle="accordion"]、.accordion、.accordion-header、.accordion-content、.accordion-group)

未実装 (Vue.jsにしたい)

プログレス (.progress、.progress-bar)

25%

パンくずリスト (.breadcrumb)

ナビゲーション (.nav)

ステップ (.step、.step-group)

1
お問い合わせ内容を入力
2
入力内容確認
3
送信完了

レイアウト

案件初期に「とりあえず」「いったん」使用して、コーディングが進むに連れて置き換えていく、というような使い方を想定しています。
具体的には、Adobe XDのワイヤフレームをHTMLに変換する際に指定できると思われます。

縦方向のまとまり (.module、.card、.border)

.module テキストテキストテキストテキストテキスト、テキストテキストテキスト。
.card テキストテキストテキストテキストテキスト、テキストテキストテキスト。
.border テキストテキストテキストテキストテキスト、テキストテキストテキスト。

横方向のまとまり (.layout)

テキストテキストテキストテキストテキスト、テキストテキストテキスト。
テキストテキストテキストテキストテキスト、テキストテキストテキスト。
テキストテキストテキストテキストテキスト、テキストテキストテキスト。
テキストテキストテキストテキストテキスト、テキストテキストテキスト。
.layout-group > *
テキストテキストテキストテキストテキスト、テキストテキストテキスト。
.layout-group > *
テキストテキストテキストテキストテキスト、テキストテキストテキスト。
.layout-group > *
テキストテキストテキストテキストテキスト、テキストテキストテキスト。