Javascriptのサンプル

Question

Javascriptのサンプル

Accepted Answer

JavaScriptについて JavaScriptをご活用いただくことで、デザインや機能の自由度が高まり、ブランドに合わせたカスタマイズやインタラクティブなコンテンツの作成が可能です。これにより、ユーザーにとってわかりやすく、親しみやすいヘルプページを提供できます。 JavaScriptのサンプルのご紹介との挿入方法についてご説明いたします。 このサンプルナレッジについて このナレッジはJavascriptを使用して作成しています。 「保証期間内」「保証期間外」のボタンを選択すると、その選択内容に応じて次のブロックの内容がダイナミックに変化し、ページ内の回答ブロックに直接飛べるような作りになっています。 これはHTMLだけでは表現できない動作です。 操作方法はページの最下部で説明します。 ※このナレッジはPCでの閲覧用サンプルです。 /* Global Styles */
div.l-main_inner *,
div.l-main_inner *:after,
div.l-main_inner *:before {
    background-repeat: no-repeat;
    box-sizing: inherit;
    outline: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
}
div.l-main_inner *:after,
div.l-main_inner *:before {
    text-decoration: inherit;
    vertical-align: inherit;
}
div.l-main_inner ul,
div.l-main_inner ol {
    list-style: none;
}
div.l-main_inner ul li,
div.l-main_inner ol li {
    list-style: none;
    word-break: break-all;
}
div.l-main_inner p {
    display: block;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}
div.l-main_inner sup {
    top: -.5em;
}
div.l-main_inner p a {
    position: relative;
}
div.l-main_inner a {
    color: inherit;
    cursor: pointer;
}
div.l-main_inner a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

/* Button Styles */
div.l-main_inner .c-btn_wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 0 30px 0;
    position: static;
}
div.l-main_inner .c-btn_01 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 22px;
    width: 48.7%;
    border-radius: 10px;
    font-weight: 300;
    background: #fff;
    min-height: 100px;
    text-decoration: none;
    position: relative;
    padding: 1% 1% 1% 110px;
    overflow: hidden;
    border: none;
    transition: 0.2s all ease;
    margin: 0;
}
div.l-main_inner .c-btn_01.icon-hide {
    text-align: left;
    -ms-flex-align: center;
    align-items: center;
    padding: 1%;
}
div.l-main_inner .c-btn_01.is-green {
    background: #00cc66;
    color: #fff;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.17);
    box-shadow: 0px 4px 2px 0px #009933;
}
div.l-main_inner .c-btn_01.is-single {
    margin: 0 auto;
    -ms-flex-preferred-size: 450px;
    flex-basis: 450px;
    max-width: 60%;
}
div.l-main_inner .c-btn_01.is-green.is-target:after {
    content: '';
    background: url(/assets/img/common/icon/icon_newtab-w.png) no-repeat !important;
    width: 20px;
    height: 20px;
    background-size: contain !important;
    top: inherit;
    bottom: 5px;
    left: inherit;
    right: 10px;
    position: absolute;
}
div.l-main_inner ul li .is-target:after,
div.l-main_inner ol li .is-target:after {
    content: '';
    background: url(/assets/img/common/icon/icon_newtab.png) no-repeat center center !important;
    width: 0.7em;
    height: 0.7em;
    background-size: contain !important;
    top: 74%;
    margin: 0px 3px;
    display: inline-block;
}

/* Headings */
div.l-main_inner .c-hdg-01 {
    margin: 0 0 15px 0;
    padding: 0 0 20px 0;
    font-size: 40px;
    letter-spacing: 0.1rem;
    font-weight: 300;
    color: #e60012;
    border-bottom: 1px solid #ccc;
    position: relative;
    display: block;
    line-height: 1.2;
}
div.l-main_inner .c-hdg-01:after {
    position: absolute;
    top: 1px;
    left: 0;
    display: block;
    width: 100px;
    height: 100%;
    border-bottom: 1px solid #e60012;
    content: '';
}
div.l-main_inner .c-hdg-01 span {
    border: 1px solid #ccc;
    border-radius: 30px;
    position: absolute;
    bottom: 15px;
    right: 0;
    line-height: 1.2;
    font-size: 14px;
    color: #747474;
    letter-spacing: normal;
    padding: 10px 25px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}
div.l-main_inner .c-hdg-01 .hdg-subtext {
    font-size: 18px;
    color: #666;
    display: block;
    border: none;
    position: static;
    padding: 0;
    margin: 0 0 15px 0;
    text-align: left;
}
div.l-main_inner .c-hdg-02 {
    font-size: 27px;
    font-weight: 300;
    letter-spacing: normal;
    color: #e60012;
    line-height: 1.2;
    margin: 0 0 30px 0;
    padding: 0;
}
div.l-main_inner .c-hdg-03-01 {
    font-weight: 300;
    font-size: 25px;
    letter-spacing: normal;
    color: #747474;
    line-height: 1.5;
    margin: 0 0 20px 0;
    padding: 15px 0 0 0;
}
div.l-main_inner .c-hdg-03-01:before {
    content: '';
    height: 23px;
    width: 5px;
    position: relative;
    left: 0;
    top: 2px;
    margin-right: 15px;
    display: inline-block;
    border-left: 5px solid #e60012;
}
div.l-main_inner .c-hdg-04 {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    margin: 0 0 10px 0;
    padding: 15px 0 0 0;
}

/* List Styles */
div.l-main_inner .c-list_01 {
    margin: 0 0 30px 20px;
}
div.l-main_inner .c-list_01 > li {
    text-indent: -21px;
    font-size: inherit;
    list-style: none !important;
}
div.l-main_inner .c-list_01 > li:before {
    content: '●';
    display: inline;
    font-size: 12px;
    margin-right: 9px;
}
div.l-main_inner .c-list_01.is-red li:before {
    color: #e60012;
}
div.l-main_inner .c-list_01 > li > .c-list_01 {
    margin: 5px 0 0px 10px;
    padding: 0 0 15px 0;
}
div.l-main_inner .c-list_02 > li {
    margin: 10px 0 0 20px;
    list-style: decimal;
}
div.l-main_inner .c-list_04 > li {
    text-indent: -1em;
    font-size: 13px;
    margin: 0 0 10px 0;
}
div.l-main_inner .c-list_04 > li:before {
    color: #666 !important;
    content: '※';
    font-size: 13px;
}
div.l-main_inner .c-list_01 > li > .c-list_04 {
    margin-left: 14px;
}

/* Table Styles */
div.l-main_inner .c-table-01 {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-collapse: collapse;
    color: #666;
    margin: 0 0 30px 0;
    table-layout: fixed;
}
div.l-main_inner .c-table-01 tbody tr th {
    font-weight: 300;
    text-align: left;
    border: 1px solid #ddd;
    background: #eee;
    font-size: 20px;
    box-sizing: border-box;
    padding: 2% 2%;
    vertical-align: top;
    word-break: break-word;
    white-space: normal;
}
div.l-main_inner .c-table-01 tbody tr td {
    text-align: center;
    border: 1px solid #ddd;
    font-size: 16px;
    padding: 2% 2%;
    background: #fff;
    vertical-align: top;
    word-break: break-word;
    text-align: left;
    white-space: normal;
}
div.l-main_inner .c-table-01 .c-table_innericonList li {
    text-indent: 0px !important;
}
div.l-main_inner .c-list_01 > li .c-table-01 {
    margin-top: 10px;
}
div.l-main_inner .c-list_01 > li .c-table-01 th,
div.l-main_inner .c-list_01 > li .c-table-01 td {
    text-indent: 0;
}

/* Unit Step Styles */
div.l-main_inner .c-unit-step03 {
    color: #333;
}
div.l-main_inner .c-unit-step03 .select_inner {
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #f8f8f8;
    -ms-flex-preferred-size: 370px;
    flex-basis: 370px;
    display: -ms-flexbox;
    display: flex;
    font-size: 22px;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}
div.l-main_inner .c-unit-step03 .select_inner a {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 68px;
    text-align: center;
}
div.l-main_inner .c-unit-step03 .select_inner:before {
    position: absolute;
    top: -42px;
    margin: auto;
    content: "";
    vertical-align: middle;
    right: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
div.l-main_inner .c-unit-step03 .select {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 70px;
    margin: 0 0 60px 0;
}
div.l-main_inner .c-unit-step03 .question {
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #f8f8f8;
    height: auto;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    margin: 0 0 60px 0;
}
div.l-main_inner .c-unit-step03 .question .number {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
    color: #e00000;
    font-size: 32px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    background: #eee;
}
div.l-main_inner .c-unit-step03 .question .text {
    padding: 20px 30px;
    line-height: 1.5;
    font-size: 22px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex: 1;
    flex: 1;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}
div.l-main_inner .c-unit-step03 .answer {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #f8f8f8;
    padding: 30px 40px;
    margin: 0 0 60px 0;
    position: relative;
}
div.l-main_inner .c-unit-step03 .answer p {
    font-size: 22px;
    line-height: 1.4;
}
div.l-main_inner .c-unit-step03 .answer.is-single {
    height: 100px;
    padding: 0;
}
div.l-main_inner .c-unit-step03 .answer.is-single a {
    padding: 30px 40px;
    display: block;
}

/* Unit Square Styles */
div.l-main_inner .c-unit_square {
    border: 1px solid #ddd;
    padding: 15px 15px;
    margin: 0 0 30px 0;
}
div.l-main_inner .c-unit_square.is-bold {
    border-width: 2px;
}

/* Typography */
div.l-main_inner .c-txt-01 {
    font-size: 18px;
    text-align: left;
    line-height: 1.4;
    font-weight: 300;
    color: #666;
    margin: 0 0 20px 0;
    box-sizing: border-box;
}
div.l-main_inner .c-txt-01_02 {
    font-size: 16px;
    text-align: left;
    line-height: 1.4;
    font-weight: 300;
    color: #666;
    margin: 0 0 20px 0;
}
div.l-main_inner .s-color-red {
    color: #e60012 !important;
}
div.l-main_inner .s-bold {
    font-weight: 700 !important;
}
div.l-main_inner .s-align-center {
    text-align: center !important;
}
div.l-main_inner .s-align-right {
    text-align: right !important;
}

/* Layout and Media */
div.l-main_inner .l-main_section {
    width: 760px;
    margin: 0 0 50px 0;
    padding: 0 0 20px 0;
}
div.l-main_inner .l-main_section.is-border {
    border-bottom: 1px solid #ddd;
}
div.l-main_inner .l-main_firstview {
    margin: 0;
    padding: 0;
}
div.l-main_inner .c-media_01 {
    margin: 0 0 20px 0;
}

/* Question List */
div.l-main_inner .c-unit-q-list {
    margin: 0 0 30px 0;
    padding: 0 0 0 40px;
}
div.l-main_inner .c-unit-q-list li {
    margin: 0 0 20px 0;
}
div.l-main_inner .c-unit-q-list .is-qa p {
    border: none;
}
div.l-main_inner .c-unit-q-list span {
    margin: 0 15px 0 -45px;
    font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    font-weight: bold;
    line-height: 1.3;
    border: 2px solid #e60012;
    color: #e60012;
    font-size: 20px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
}
div.l-main_inner .c-unit-q-list p {
    font-size: 18px;
    color: #666;
    display: inline;
    border-bottom: 1px solid #666;
}
div.l-main_inner .c-unit-q-list .is-answer {
    border-bottom: 1px solid #ddd;
    padding: 0 0 20px 0;
}
div.l-main_inner .c-unit-q-list .is-answer p {
    border: none;
}
div.l-main_inner .c-unit-q-list .is-answer span {
    background: #e60012;
    color: #fff;
}
div.l-main_inner .c-unit-q-list .is-answer > .c-list_01 {
    margin-top: -30px;
} お困りの方へ 製品が故障したお客様へ 製品に不具合が発生した場合、次の手続きをお選びください。 製品が故障した場合の対応 Q.1 ご購入商品は保証の期間内ですか？ （商品のご購入から2年以上経過していますか？） 保証期間内 保証期間外 Q.2 ご希望の対応方法をご選択ください。 交換 返品 保証期間外の場合 交換を希望される場合 故障した製品の交換をご希望の際は、サポートセンターにて在庫状況を確認後、交換手続きに進みます。交換が確定した場合は、故障品を当社指定の住所にご返送ください。 サポートセンターに連絡: 交換希望の旨をお知らせください。在庫状況を確認させていただきます。 サポートセンターの連絡先 電話番号: 0123-456-789 メール: support@example.com 営業時間: 平日 9:00〜17:00 交換手続きの実施: 交換が確定した場合、故障した製品を当社指定の住所にご返送いただきます。 必要書類の準備: 返品に必要な書類や手順については、サポートセンターから詳しくご案内いたしますのでご安心ください。 返品を希望される場合 返品をご希望の際は、サポートセンターにて返品手続きを行います。返品が確定した場合は、故障品を当社指定の住所にご返送ください。 サポートセンターに連絡: 返品希望の旨をお知らせください。返品手続きの流れについて説明いたします。 サポートセンターの連絡先 電話番号: 0123-456-789 メール: support@example.com 営業時間: 平日 9:00〜17:00 返品手続きの実施: 手続きが完了した後、返品品を当社指定の住所にご返送いただく必要があります。 必要書類の準備: 返品に際して必要な書類や梱包についての詳細を、サポートセンターからご案内いたします。 保証期間外の場合 保証期間外のため、返品および交換はできませんので、ご了承ください。 返品・交換不可: 保証期間が過ぎているため、返品および交換はできませんのでご了承ください。 今後のサポートについて: ご不明点がございましたら、サポートセンターまでお問い合わせください。できる限りのサポートをさせていただきます。 サポートセンターの連絡先 電話番号: 0123-456-789 メール: support@example.com 営業時間: 平日 9:00〜17:00 function ifPattern() {
    var ifContainers = document.querySelectorAll('.js-ifcontainer');
    var ifBox01 = document.querySelectorAll('.js-ifbox_01');
    var ifBox02 = document.querySelectorAll('.js-ifbox_02');

// Initially hide the ifbox elements
    ifBox01.forEach(function(box) {
      box.style.display = 'none';
    });
    ifBox02.forEach(function(box) {
      box.style.display = 'none';
    });

ifContainers.forEach(function(container) {
      var selecter = container.querySelector('.js-ifselecter');
      var selectInner = selecter.querySelectorAll('.select_inner');

selectInner.forEach(function(inner) {
        inner.addEventListener('click', function() {
          if (inner.classList.contains('selecter_01')) {
            // Show the first box and hide the second
            ifBox01.forEach(function(box) {
              box.style.display = 'block';
            });
            ifBox02.forEach(function(box) {
              box.style.display = 'none';
            });
          } else if (inner.classList.contains('selecter_02')) {
            // Show the second box and hide the first
            ifBox02.forEach(function(box) {
              box.style.display = 'block';
            });
            ifBox01.forEach(function(box) {
              box.style.display = 'none';
            });
          }
        });
      });
    });
  }

ifPattern(); Javascriptでのナレッジ作成​方法 画面左側のメニューから「ナレッジベース」＞「ナレッジ」から「新規作成」または任意のナレッジを選択してください。 ナレッジ詳細画面の挿入されているブロックの左上または左下にカーソルを合わせることで、挿入するブロック種類の選択メニューが表示されます。 「もっと見る」＞「HTML」を選択します。 コードを記述するブロックが出現しますので、ここにJavascriptのコードを記述します。 ※「HTML」と表示されていますが、HTML・Javascript両方に対応しています。

よくあるご質問

Javascriptのサンプル

JavaScriptについて

このサンプルナレッジについて

お困りの方へ製品が故障したお客様へ

製品が故障した場合の対応

交換を希望される場合

サポートセンターの連絡先

返品を希望される場合

サポートセンターの連絡先

保証期間外の場合

サポートセンターの連絡先

Javascriptでのナレッジ作成方法

よくあるご質問

Javascriptのサンプル

JavaScriptについて

このサンプルナレッジについて

お困りの方へ製品が故障したお客様へ

製品が故障した場合の対応

交換を希望される場合

サポートセンターの連絡先

返品を希望される場合

サポートセンターの連絡先

保証期間外の場合

サポートセンターの連絡先

Javascriptでのナレッジ作成​方法

Javascriptでのナレッジ作成方法