パンくずリスト

  • TOP
  • 汎用テンプレート

リスト

  • ▼作るモジュール
  • ボタン デザイン違い
  • メガメニュー
  • 横並びリスト縦線で区切られているやつ
  • フレーム型のヘッダー、下スクロールで消えて、上で出現
  • サイドバー
  • セレクトボックス
  • インプット

注意リスト

  • ボタン
  • リンクリスト
  • 横並びリスト
  • ヘッダーメニュー

注意リスト（数字付）

  • ボタン
  • リンクリスト
  • 横並びリスト
  • ヘッダーメニュー

アイコン付きリスト

  • ボタン
  • リンクリスト
  • 横並びリスト
  • ヘッダーメニュー

NEWSリスト

ラベル

  • 定期タイプ
  • 終身タイプ
  • 三大疾病無制限型
  • インターネット専用

丸矢印アイコン

丸矢印アイコン

バンザイ型吹き出し

バンザイ型吹き出し

マーカー風ライン

文中の 文ぶん章しょうにマーカー風ラインを引く、複数行にも対応

内部リンク

内部リンクデザイン

外部リンク

外部リンクデザイン

矢印アイコン

右矢印

三角アイコン

三角

アイコン付きテキスト左

アイコン付きテキスト左

アイコン付きテキスト右

アイコン付きテキスト右

下線付きタイトル

下線付きタイトル

下線付きタイトル2

下線付きタイトル2

ボタン（aタグ）

リンクはこちら

ボタン（アイコン付き）

リンクはこちら
リンクはこちら
リンクはこちら
リンクはこちら

価格表

販売単価
1,000円
個数
120個
合計
120個

カラム

タイトル

アンカーリンクが見切れる場合はインナーを作りパディングトップする

タイトル

3カラムのクラスはcol3

タイトル

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

タイトル

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

タイトル

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

タイトル

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

カード・縦

ここにタイトルを入れます

ここにテキストを入れます。ここにテキストを入れます。

ここにタイトルを入れます

ここにテキストを入れます。ここにテキストを入れます。

ここにタイトルを入れます

ここにテキストを入れます。ここにテキストを入れます。

カード・横

ここにタイトルを入れます

ここにテキストを入れます。ここにテキストを入れます。

ここにタイトルを入れます

ここにテキストを入れます。ここにテキストを入れます。

バルーン型吹き出し

バルーン型吹き出し（下）

バルーン型吹き出し（上）

ラジオボタン

チェックボックス

テーブル

スニペット（SCSS） 内容
@arrow 右矢印アイコン（疑似要素）：絶対座標で右位置指定
@icoTxtL テキストの左に画像アイコン
@icoTxtR テキストの右に画像アイコン

タイトル付きフレーム

タイトル

ここにタイトルを入れます

ここにテキストを入れます。ここにテキストを入れます。

ここにタイトルを入れます

ここにテキストを入れます。ここにテキストを入れます。

ここにタイトルを入れます

ここにテキストを入れます。ここにテキストを入れます。

アコーディオン

連打防止にstop()を使っているがもっと良い方法が無いか探す

＜最短翌日カードのお届けに関するご注意＞
キャッシングサービス（融資）のご利用可能枠の申込が必須（学生の方を除く）となります。

モーダル

×

  • ▼やりたいこと
  • タグを入れるとhtmlとcssを出力する
  • BEM形式で書き出す
  • ▼考慮すべきこと
  • レスポンシブ
  • jQuery不使用
  • 命名規則
  • サイズを指定可能（汎用的）
  • mixin不使用？
  • アクセシビリティ（タブ移動・ボタンはbuttonタグ）
  • ホバー
  • アニメーション
  • 要素が増えたときの挙動・スクロール
  • フォント指定はrem
  • 改行・折り返し

タブ

  • tab-btn1

  • tab-btn2

  • tab__cont1

  • tab__cont2

タブ・スイッチ

FAQ

  • Q.

    インターネットからカードを申し込んだ場合、どれくらいで発行されますか？

    A.

    カードは、最短3営業日で発行し、約1週間でお届けします。
    ナンバーレスおよびモバイル即時入会サービスで申し込んだ場合、最短5分で審査が完了し、MyJCBアプリでカード番号の確認が可能になります。

  • Q.

    カードの入会申し込み時に必要な本人確認書類は何ですか？

    A.

    カードの入会申し込み時に必要な本人確認書類は、下のページよりご確認ください。
    本人確認書類によって必要書類の組み合わせが異なりますので、以下ページをご参照ください。

FAQ2

  • ドバイって実際どのくらいJCBカードを使えますか？

    カードが利用できるほとんどのお店で利用できます。タッチ決済機能がついたJCBカードはもちろん、iPhoneをお持ちの方はApple WalletのJCBタッチ決済が利用できます。

  • 優待の利用条件はありますか？

    すべてのJCBブランド会員が対象です。（プリペイドカードは対象となりません。）
    各割引・優待のご利用条件について詳しくは各優待リンク先の注意事項をご確認ください。

  • ブルジュハリファ・他アトラクションのチケットはいつでも使えますか？

    決済後にご利用日付を選択いただきます。購入日から30日以内の日付を指定できます。
    購入後、ご自身で指定された利用日でのみ使用が可能です。利用日の変更は各アトラクションのポリシーに準じます。

スクロールアニメ

scrollAnime

FIXボタン
top