機能メニュー
背景の透過
背景透過（after要素）
よくある背景の透過。テキストコンテンツの背景にopacityだと、テキストごと透過される。
解説：
::beforeもしくは::after要素にてbackgroundを適用。absoluteでコンテンツのトップに合わせheight100%表示させる。このままopacityで透過するとテキストまで透過してしまうため、backgroundを指定した要素。opacityから抜けたいコンテンツにz-indexを付与。
背景透過（after要素）
よくある背景の透過。テキストコンテンツの背景にopacityだと、テキストごと透過される。
解説：
::beforeもしくは::after要素にてbackgroundを適用。absoluteでコンテンツのトップに合わせheight100%表示させる。このままopacityで透過するとテキストまで透過してしまうため、backgroundを指定した要素。opacityから抜けたいコンテンツにz-indexを付与。
背景透過（after要素）
よくある背景の透過。テキストコンテンツの背景にopacityだと、テキストごと透過される。
ひし形の透過背景
てきすとテキストtext
てきすとテキストtext
てきすとテキストtext
てきすとテキストtext
てきすとテキストtext
てきすとテキストtext
ホバー、オンマウスで画像がズーム
タブボックス
タブをクリックで、タブ下のBOXにてコンテンツが切り替わる。
現在は特に装飾していないが、BOX内をoverflowをスクロールで疑似iframeに。cssのみで実装
アコーディオン
+や帯をクリックでコンテンツが出現。出現コンテンツの高さはCSSにて調整可能。
現在は、max-height400での表示となっている。
jsファイルにて、id等で制御されている。
アコーディオン コンテンツ
ボタンクリックでコンテンツが出現。出現後、openボタンは消え、closeボタンが出現。
closeボタンクリックで、コンテンツが非表示。openボタンが復活。
jsファイルにて、toggleClassにて、クラスを表示・非表示となっている。
詳細をチェック！！
| アコーディオン オープンコンテンツ | |
|---|---|
| 項目1 | テキストテキストテキストテキストテキストテキストテキスト |
| 項目2 | テキストテキストテキストテキストテキストテキストテキストテキストテキスト |
| 項目3 | テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト |
| 項目4 | テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト |
| 項目5 | テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト |
閉じる
JQuery Light Box
jQueryのlight_box2を使用。簡単に実装できるモーダルウィンドウ。
また、縦画像・横画像を問わず実装可能・スライダー形式で表示もでき、グループ化も可能。
横長画像
縦長画像
混合画像
jQuery BXスライダー
MIXITUP ソート機能
※注意 2018/8 最新版のcommon.jsのsetrowlayoutの場合、新たなdivが生成されるため、ソート機能が上手く起動しない
下記ボタンにて切替で閲覧可能
【 通常スタイルsetrowスタイル 】
入力フォーム 補完機能
フォームのメールアドレスに補完機能をつける
【jquery.email-autocomplete.js】（jQuery）