アイコン系

  • ico_angle-left

  • ico_angle-right

  • ico_arrow-right

  • ico_arrow-up

  • ico_book

  • ico_check

  • ico_download

  • ico_keyword

  • ico_language

  • ico_logo

  • ico_pen

  • ico_ranking

  • ico_right

  • ico_search

  • ico_star

  • ico_tab

アイコンたちです。縦横はローカルで指定してください。

ボタン系

.btn01です。

.btn01--wideです。

.btn01--greenです。

.btn01--reverseです。

.btn01--centerです。

タイトル系

SAMPLE

見出しが入ります

.ttl01です。

アコーディオン系

アコーディオンのタイトルです。

アコーディオンの中身です。アコーディオンの中身です。アコーディオンの中身です。アコーディオンの中身です。アコーディオンの中身です。アコーディオンの中身です。

.detailsです。アコーディオンのベースとしてご利用ください。

アコーディオンのタイトルです。

アコーディオンの中身です。アコーディオンの中身です。アコーディオンの中身です。アコーディオンの中身です。アコーディオンの中身です。アコーディオンの中身です。

.ttl-toggleです。.detailsを拡張しています。

ホバーアクション

PCではホバー/TAB・SPでは反応しない

ホバーアクションは@include media_hover {}を利用することで、ホバーが利用可能なデバイスでのみホバーアクションを設定することが可能。

テキスト省略

.txt-clamp1です。1行まで表示します。

.txt-clamp2です。2行まで表示します。

.txt-clamp3です。3行まで表示します。

.txt-clamp1-wです。PCで1行まで表示します。

.txt-clamp2-wです。PCで2行まで表示します。

.txt-clamp3-wです。PCで3行まで表示します。

.txt-clamp1-nです。SPで1行まで表示します。

.txt-clamp2-nです。SPで2行まで表示します。

.txt-clamp3-nです。SPで3行まで表示します。

.txt-clamp系です。

スクロールアニメーション

.fadein
フェード
.fadein-top
上からフェード
.fadein-bottom
下からフェード
.fadein-left
左からフェード
.fadein-right
右からフェード
.fadein-w
フェード
(PCのみ)
.fadein-top-w
上からフェード
(PCのみ)
.fadein-bottom-w
下からフェード
(PCのみ)
.fadein-left-w
左からフェード
(PCのみ)
.fadein-right-w
右からフェード
(PCのみ)
.fadein-n
フェード
(SPのみ)
.fadein-top-n
上からフェード
(SPのみ)
.fadein-bottom-n
下からフェード
(SPのみ)
.fadein-left-n
左からフェード
(SPのみ)
.fadein-right-n
右からフェード
(SPのみ)

Sassのcalc内で関数を利用したい場合

.hoge{
  width: calc( 100% - #{rem(30)} );
}

      

上記のように記述するとcalc内でrem関数を利用することが可能です。

モーダル

モーダルのテンプレートです。
dialogタグには固有のidを設定してください。
buttonタグにはdialogのidをdata-target属性に設定してください。

スワイプ(横スクロール)

スワイプするコンテンツです。横幅が足りなければスクロールアイコンは表示されません。

スワイプするコンテンツです。横幅が足りなければスクロールアイコンは表示されません。

スワイプするコンテンツです。横幅が足りなければスクロールアイコンは表示されません。

スワイプするコンテンツです。横幅が足りなければスクロールアイコンは表示されません。

スワイプするコンテンツです。横幅が足りなければスクロールアイコンは表示されません。

スワイプするコンテンツです。横幅が足りなければスクロールアイコンは表示されません。

スワイプするコンテンツです。横幅が足りなければスクロールアイコンは表示されません。

スワイプするコンテンツです。横幅が足りなければスクロールアイコンは表示されません。

スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。

スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。

スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。

スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。

スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。

スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。

スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。

スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。スワイプするコンテンツです。

.swipeです。
.swipe-wと.swipe-nもあります。

縦書き文字

縦書き文字です。

.txt-verticalです。縦書き文字です。

縦書き文字の中の「FSE」を縦書きにする例です。

.txt-orientationです。
縦書き文章中のアルファベットは通常横向きのまま表示されますが、縦書きにすることができます。

縦書き文字の中の「99」を横書きにする例です。

.txt-combineです。
1文字分のスペースに複数の文字を表示できるようになります。
縦書きの中に横書きの文字を入れ、縦中横(たてちゅうよこ)と呼ばれるレイアウトを作成することができます。

NGK スパークプラグ / NTK テクニカルセラミックス 製品サイト
新卒採用
キャリア採用
venture Lab