js
accordion
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
<div class="c-accordion" data-accordion>
<button type="button" class="c-accordion__title" aria-controls="accordion1" aria-expanded="true" aria-label="開く" data-toggle-accordion> 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った - NONE</button>
<div id="accordion1" class="c-accordion__body" aria-hidden="true" data-body-accordion>
<p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="c-accordion c-accordion--faq is-active" data-accordion data-device-accordion="all">
<button type="button" class="c-accordion__title" aria-controls="accordion2" aria-expanded="false" aria-label="閉じる" data-toggle-accordion>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った - ALL</button>
<div id="accordion2" class="c-accordion__body" aria-hidden="false" data-body-accordion>
<p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="c-accordion" data-accordion data-device-accordion="pc">
<button type="button" class="c-accordion__title" aria-controls="accordion3" aria-expanded="true" aria-label="開く" data-toggle-accordion>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った - PC</button>
<div id="accordion3" class="c-accordion__body" aria-hidden="true" data-body-accordion>
<p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="c-accordion" data-accordion data-device-accordion="tab">
<button type="button" class="c-accordion__title" aria-controls="accordion3" aria-expanded="true" aria-label="開く" data-toggle-accordion>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った - TAB</button>
<div id="accordion3" class="c-accordion__body" aria-hidden="true" data-body-accordion>
<p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</div>
<div class="c-accordion" data-accordion data-device-accordion="sp">
<button type="button" class="c-accordion__title" aria-controls="accordion3" aria-expanded="true" aria-label="開く" data-toggle-accordion>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った - SP</button>
<div id="accordion3" class="c-accordion__body" aria-hidden="true" data-body-accordion>
<p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</div>
- data-accordion class="is-active"
- data-toggle-accordion
- data-body-accordion
- data-device-accordion = `all`, `pc`, `tab`, `sp`
- 表示領域の操作はマウスとキーボードの両方で使用可能です。
- ボタン領域の属性は、aria-expanded = `true`または`false`を設定します（必須）。
- ボタン領域の属性は、aria-label = `開く`または`閉じる`を設定します（必須）。
- ボタン領域にaria-controls = `id名`、コンテンツ領域に該当する`id名`を設定し、表示領域の関連付けを設定します（任意）。
- コンテンツ領域の属性は、対応するボタン領域の属性に応じて、aria-hidden= `true`または`false`を設定します（必須）。
anchor-nav
<div class="c-anchor-nav">
<div class="c-anchor-nav__body">
<p class="c-anchor-nav__title">コンテンツ</p>
<ul data-scroll>
<li><a href="#accordion">accordion</a></li>
<li><a href="#calendar">calendar</a></li>
</ul>
</div>
</div>
carousel
<div class="swiper-main">
<div id="js-swiper-main" class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href=""><img src="/assets/img/top/main-visual.png" alt=""></a>
</li>
<li class="swiper-slide">
<a href=""><img src="/assets/img/top/main-visual.png" alt=""></a>
</li>
<li class="swiper-slide">
<a href=""><img src="/assets/img/top/main-visual.png" alt=""></a>
</li>
</ul>
<div class="swiper-controls">
<button class="swiper-start on"><i class="material-icons">play_arrow</i></button>
<button class="swiper-stop"><i class="material-icons">pause</i></button>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css" />
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script>
var swiperMain = new Swiper('#js-swiper-main', {
pagination: '.swiper-main .swiper-pagination',
paginationClickable: true,
centeredSlides: false,
loop: true,
loopAdditionalSlides: 1,
spaceBetween: 0,
slidesPerView: 1,
autoplay: 3000,
onInit() {
var start = $('.swiper-main .swiper-start');
var stop = $('.swiper-main .swiper-stop');
start.on('click', function() {
if (!start.hasClass('on')) {
swiperMain.startAutoplay();
start.addClass('on');
stop.removeClass('on');
}
});
stop.on('click', function() {
if (!stop.hasClass('on')) {
swiperMain.stopAutoplay();
stop.addClass('on');
start.removeClass('on');
}
});
}
});
</script>
carousel-3to1
<div class="swiper-3to2to1">
<div id="js-swiper-3to2to1" class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide e-card">
<a href="">
<div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
<div class="e-card__body">
<p class="e-card__title">タイトル</p>
<p class="e-card__text">テキストテキストテキストテキストテキスト</p>
</div>
</a>
</li>
<li class="swiper-slide e-card">
<a href="">
<div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
<div class="e-card__body">
<p class="e-card__title">タイトル</p>
<p class="e-card__text">テキストテキストテキストテキストテキスト</p>
</div>
</a>
</li>
<li class="swiper-slide e-card">
<a href="">
<div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
<div class="e-card__body">
<p class="e-card__title">タイトル</p>
<p class="e-card__text">テキストテキストテキストテキストテキスト</p>
</div>
</a>
</li>
<li class="swiper-slide e-card">
<a href="">
<div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
<div class="e-card__body">
<p class="e-card__title">タイトル</p>
<p class="e-card__text">テキストテキストテキストテキストテキスト</p>
</div>
</a>
</li>
</ul>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css" />
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script>
var swiper3to2to1 = new Swiper('#js-swiper-3to2to1', {
pagination: '.swiper-3to2to1 .swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-3to2to1 .swiper-button-next',
prevButton: '.swiper-3to2to1 .swiper-button-prev',
centeredSlides: false,
loop: true,
loopAdditionalSlides: 1,
spaceBetween: 20,
slidesPerView: 3,
autoplay: 0,
breakpoints: {
599: {
centeredSlides: true,
slidesPerView: 1.5
}
}
});
</script>
modal
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
情に棹させば流される智に働けば角が立つ 18px
<!-- ボタン領域 -->
<div class="e-button-group">
<button type="button" class="e-button" data-open-modal aria-controls="area-modal-dialog1" aria-expanded="false" aria-label="開く">Modal Dialogを開く</button>
</div>
<div class="e-box" data-clone-modal="area-modal-dialog1">
<div class="e-box__body">
<p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
<p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
<p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</div>
<!-- コンテンツ領域 -->
<div class="c-modal-dialog" id="area-modal-dialog1" data-modal role="dialog" tabindex="-1" aria-hidden="true">
<div class="c-modal-dialog__scroll" role="document">
<div class="c-modal-dialog__body">
<h3 class="c-modal-dialog__title">情に棹させば流される智に働けば角が立つ 18px</h3>
<div data-append-modal>
<!-- data-append-modal内はdata-clone-modal="aria-controls名"を表示 -->
</div>
<div class="c-modal-dialog__button-group e-button-group">
<button type="button" class="e-button e-button--secondary" data-close-modal aria-expanded="true" aria-label="キャンセル">キャンセル</button>
<button type="button" class="e-button e-button--secondary" aria-expanded="true" aria-label="実行する">実行する</button>
</div>
</div>
</div>
<button type="button" class="c-modal-dialog__close" data-close-modal aria-expanded="true" aria-label="dialogを閉じる">close</button>
</div>
- ･data-open-modal
- ･data-modal
- ･data-close-modal
- ･data-clone-modal="aria-controls名"
- ･data-append-modal
- ･背景暗転はjsで作成します。
- ･表示領域の操作はマウスとキーボードの両方で使用可能です。
- ･ボタン領域の属性は、aria-expanded = `true`または`false`を設定します（必須）。
- ･ボタン領域の属性は、aria-label = `開く`または`閉じる`など適宜設定します（必須）。
- ･ボタン領域にaria-controls = `id名`、コンテンツ領域に該当する`id名`を設定し、表示領域の関連付けを設定します（必須）。
- ･コンテンツ領域の属性は、対応するボタン領域の属性に応じて、aria-hidden= `true`を設定します（必須）。
- ･コンテンツ領域の属性は、対応するボタン領域の属性に応じて、tabindex=`-1`または`1`を設定します（必須）。
- ･背景暗転下領域の属性は、対応するボタン領域の属性に応じて、aria-hidden= `true`または`false`を設定します（必須）。
- ･コンテンツ領域は role="dialog"設定します（必須）。
- ･コンテンツのドキュメント領域は role="document"を設定します（必須）。
offcanvas
<div>
<div class="c-control-offcanvas">
<button
type="button"
aria-controls="aria-offcanvas"
aria-expanded="false"
aria-label="開く"
data-toggle-offcanvas>
<span class="c-control-offcanvas__icon"><span></span><span></span><span></span></span>
<span class="c-control-offcanvas__title">メニュー</span>
</button>
</div>
</div>
<div class="c-offcanvas" aria-hidden="true" data-body-offcanvas>
<div id="aria-offcanvas" class="c-offcanvas__body">
<nav role="navigation" aria-label="スマートフォン用サイト全体のメニュー">
<ul class="c-offcanvas__list">
<li><a href="/" class="is-active">offcanvas</a></li>
<li><a href="#ripple" data-scroll-offcanvas>ripple(ページ内スクロール)</a></li>
<li><a href="/">会社案内</a></li>
<li><a href="/">お問い合わせ</a></li>
</ul>
<ul class="c-offcanvas__list2">
<li><a href="">交通アクセス</a></li>
<li><a href="">よくある質問</a></li>
<li><a href="">お問い合わせ</a></li>
</ul>
</nav>
</div>
</div>
<div id="js-offcanvas-bg"></div>
ripple
<button class="js-ripple e-button e-button--secondary" type="button">もっと見る</button>
tab
タイトル1
タイトル2
タイトル3
<div class="c-tab" data-tab>
<ul class="c-tab__nav" role="tablist">
<li id="aria-tab-nav1" role="tab" tabindex="0" aria-selected="true"><button type="button" data-tablist aria-controls="area-tab-panel1">タイトル1</button></li>
<li id="aria-tab-nav2" role="tab" tabindex="-1" aria-selected="false"><button type="button" data-tablist aria-controls="area-tab-panel2">タイトル2</button></li>
<li id="aria-tab-nav3" role="tab" tabindex="-1" aria-selected="false"><button type="button" data-tablist aria-controls="area-tab-panel3">タイトル3</button></li>
</ul>
<div class="c-tab__body">
<div data-tabpanel id="area-tab-panel1" aria-labelledby="aria-tab-nav1" aria-hidden="false" role="tabpanel">タイトル1</div>
<div data-tabpanel id="area-tab-panel2" aria-labelledby="aria-tab-nav2" aria-hidden="true" role="tabpanel">タイトル2</div>
<div data-tabpanel id="area-tab-panel3" aria-labelledby="aria-tab-nav3" aria-hidden="true" role="tabpanel">タイトル3</div>
</div>
</div>
to-top
<p class="c-to-top" data-scroll="to-top">
<a href="#skippy"><span>ページトップへ</span></a>
</p>