Conponent｜CSSParts

.c-background

背景画像です。高さは標準で300pxを設定しています。

<div class="c-background"></div>

.c-background--mask

透過した黒色で覆われた背景画像です。

<div class="c-background c-background--mask"></div>

.c-background--fixed

スクロールに連動せずに固定される背景画像です。

<div class="c-background c-background--fixed"></div>

.c-background--window-full

コンテナからはみ出した幅いっぱい背景画像です。

<div class="c-background c-background--window-full"></div>

.c-background--window-right

コンテナからはみ出した右寄せの背景画像です。

<div class="c-background c-background--window-right"></div>

.c-background--window-left

コンテナからはみ出した左寄せの背景画像です。

<div class="c-background c-background--window-left"></div>

.c-box

線で囲ったシンプルなボックスです。

ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。

<div class="c-box">
	<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>

.c-box__title

タイトル付きのボックスです。

ボックスの見出し

ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。

<div class="c-box">
	<div class="c-box__title">ボックスの見出し</div>
	<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>

.c-box--balloo-right

右向きの吹き出しです。

ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。

<div class="c-box c-box--balloo-right">
	<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>

.c-box--balloo-top

上向きの吹き出しです。

ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。

<div class="c-box c-box--balloo-top">
	<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>

.c-box--balloo-bottom

下向きの吹き出しです。

ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。

<div class="c-box c-box--balloo-bottom">
	<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>

.c-box--balloo-left

左向きの吹き出しです。

ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。

<div class="c-box c-box--balloo-left">
	<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>

.c-box--type1

見出しがボーダーに被るボックスです。

ボックスの見出し

ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。

<div class="c-box c-box--type1">
	<div class="c-box__title c-box__title--type1">ボックスの見出し</div>
	<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>

.c-box--type2

見出しを塗りつぶしたボックスです。

ボックスの見出し

ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。

<div class="c-box c-box--type2">
	<div class="c-box__title c-box__title--type2">ボックスの見出し</div>
	<p>ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。ボックスの内容です。</p>
</div>

パンくずリストです。

<nav class="c-breadcrumb">
	<div class="c-breadcrumb__item"><a href="#">ホーム</a></div>
	<div class="c-breadcrumb__item"><a href="#">カテゴリー</a></div>
	<div class="c-breadcrumb__item">タイトル</div>
</nav>

.c-button

標準となるボタンです。

ボタン

<a href="" class="c-button">ボタン</a>

.c-button--shadow

影が付いたボタンです。

ボタン

<a href="" class="c-button c-button--shadow">ボタン</a>

.c-button--goast

ゴーストボタンです。濃い背景の場合だけ使えます。

ボタン

<a href="" class="c-button c-button--goast">ボタン</a>

.c-button--arrow

アローアイコン付きのボタンです。

ボタン

<a href="" class="c-button c-button--arrow">ボタン</a>

.c-card

画像とテキストが縦並びのシンプルなカードです。

2019-01-01

ラベル

タイトル

抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。

<div class="c-card">
	<div class="c-card__img">
		<img src="../src/img/cat.jpg" alt="" />
	</div>
	<div class="c-card__body">
		<div class="c-card__meta">
			<time class="c-card__time" datetime="2019-01-01">2019-01-01</time>
			<div class="c-card__label">ラベル</div>
		</div>
		<div class="c-card__title">タイトル</div>
		<p class="c-card__excerpt">抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。</p>
	</div>
</div>

.c-card--shadow

影が付いたカードです。

2019-01-01

ラベル

タイトル

抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。

<div class="c-card c-card--shadow">
	<div class="c-card__img">
		<img src="../src/img/cat.jpg" alt="" />
	</div>
	<div class="c-card__body">
		<div class="c-card__meta">
			<time class="c-card__time" datetime="2019-01-01">2019-01-01</time>
			<div class="c-card__label">ラベル</div>
		</div>
		<div class="c-card__title">タイトル</div>
		<p class="c-card__excerpt">抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。</p>
	</div>
</div>

.c-card--horizon

画像とテキストが横並びになるカードです。

2019-01-01

ラベル

タイトル

抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。

<div class="c-card c-card--horizon">
	<div class="c-card__img c-card__img--horizon">
		<img src="../src/img/cat.jpg" alt="" />
	</div>
	<div class="c-card__body c-card__body--horizon">
		<div class="c-card__meta">
			<time class="c-card__time" datetime="2019-01-01">2019-01-01</time>
			<div class="c-card__label">ラベル</div>
		</div>
		<div class="c-card__title">タイトル</div>
		<p class="c-card__excerpt">抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。抜粋のところ。</p>
	</div>
</div>

.c-drawer

右から開くドロワーです。

コンテンツ部分

<div class="c-drawer">
	<div class="c-drawer__icon js-drawer for-drawer01" data-target="for-drawer01">
		<div class="c-drawer__bars">
			<span class="c-drawer__bar"></span>
			<span class="c-drawer__bar"></span>
			<span class="c-drawer__bar"></span>
		</div>
	</div>
	<div class="c-drawer__close js-drawer for-drawer01" data-target="for-drawer01"></div>
	<div class="c-drawer__content for-drawer01">コンテンツ部分</div>
</div>

.c-drawer__content--left

左から開くドロワーです。

コンテンツ部分

<div class="c-drawer">
	<div class="c-drawer__icon js-drawer for-drawer02" data-target="for-drawer02">
		<div class="c-drawer__bars">
			<span class="c-drawer__bar"></span>
			<span class="c-drawer__bar"></span>
			<span class="c-drawer__bar"></span>
		</div>
	</div>
	<div class="c-drawer__close js-drawer for-drawer02" data-target="for-drawer02"></div>
	<div class="c-drawer__content c-drawer__content--left for-drawer02">コンテンツ部分</div>
</div>

.c-drawer__content--top

上から降りてくるドロワーです。

コンテンツ部分

<div class="c-drawer">
<div class="c-drawer__icon js-drawer for-drawer03" data-target="for-drawer03">
<div class="c-drawer__bars">
<span class="c-drawer__bar"></span>
<span class="c-drawer__bar"></span>
<span class="c-drawer__bar"></span>
</div>
</div>
<div class="c-drawer__close js-drawer for-drawer03" data-target="for-drawer03"></div>
<div class="c-drawer__content c-drawer__content--top for-drawer03">コンテンツ部分</div>
</div>

.c-drawer__content--cover

画面を覆うドロワーです。

コンテンツ部分

<div class="c-drawer">
<div class="c-drawer__icon js-drawer for-drawer04" data-target="for-drawer04">
<div class="c-drawer__bars">
<span class="c-drawer__bar"></span>
<span class="c-drawer__bar"></span>
<span class="c-drawer__bar"></span>
</div>
</div>
<div class="c-drawer__close js-drawer for-drawer04"> data-target="for-drawer04"</div>
<div class="c-drawer__content c-drawer__content--cover for-drawer04">コンテンツ部分</div>
</div>

.c-ellipsis

1行以降は3点リーダーで省略される文章です。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

<p class="c-ellipsis">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

.c-ellipsis--multiple-2

2行以降は3点リーダーで省略される文章です。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

<p class="c-ellipsis c-ellipsis--multiple-2">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

.c-ellipsis--multiple-3

3行以降は3点リーダーで省略される文章です。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

<p class="c-ellipsis c-ellipsis--multiple-3">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

.c-heading

標準の見出しです。

見出し

<h2 class="c-heading">見出し</h2>

.c-heading--type001

左のバーに破線の下線をプラスした見出しです

見出し

<h2 class="c-heading--type001">見出し</h2>

.c-heading--type002

上下のバーに挟まれた見出しです

見出し

<h2 class="c-heading--type002">見出し</h2>

.c-heading--type003

途中で色が変わる下線の見出しです。

見出し

<h2 class="c-heading--type003">見出し</h2>

.c-heading--type004

ステッチ風のポップな見出しです。

見出し

<h2 class="c-heading--type004">見出し</h2>

.c-heading--type005

吹き出し風の見出しです。

見出し

<h2 class="c-heading--type005">見出し</h2>

.c-heading--type006

点線の下線の見出しです。

見出し

<h2 class="c-heading--type006">見出し</h2>

.c-heading--type007

下線の見出しです。

見出し

<h2 class="c-heading--type006">見出し</h2>

.c-heading--type008

左側がバーになっている見出しです。

見出し

<h2 class="c-heading--type008">見出し</h2>

.c-heading--type009

背景色のみシンプルな見出しです。

見出し

<h2 class="c-heading--type009">見出し</h2>

.c-heading--type010

端が折り曲がった見出しです。

見出し

<h2 class="c-heading--type010">見出し</h2>

.c-heading--type011

平行四辺形の見出しです。

見出し

<h2 class="c-heading--type011"><span>見出し</span></h2>

.c-heading--type012

四角のアイコンから始まる見出しです。

見出し

<h2 class="c-heading--type012">見出し</h2>

.c-heading--type013

丸のアイコンから始まる見出しです。

見出し

<h2 class="c-heading--type013">見出し</h2>

.c-heading--type014

ひし形のアイコンから始まる見出しです。

見出し

<h2 class="c-heading--type014">見出し</h2>

.c-heading--type015

短いバーから始まる見出しです。

見出し

<h2 class="c-heading--type015">見出し</h2>

.c-heading--type016

長い線に挟まれた見出しです。

見出し

<div class="c-heading--type016"><span>見出し</span></div>

.c-heading--type017

短い線に挟まれた見出しです。

見出し

<div class="c-heading--type017"><span>見出し</span></div>

.c-icon

アイコンを集めました。

.c-icon-circle

<div class="c-icon-circle"><span></span></div>

.c-icon-cross

<div class="c-icon-cross"><span></span></div>

.c-icon-hamburger

<div class="c-icon-hamburger"><span></span></div>

.c-icon-check

<div class="c-icon-check"><span></span></div>

.c-icon-arrow-right

<div class="c-icon-arrow-right"><span></span></div>

.c-icon-arrow-bottom

<div class="c-icon-arrow-bottom"><span></span></div>

.c-icon-arrow-left

<div class="c-icon-arrow-left"><span></span></div>

.c-icon-arrow-top

<div class="c-icon-arrow-top"><span></span></div>

.c-icon-triangle

<div class="c-icon-triangle"><span></span></div>

.c-icon-rhombus

<div class="c-icon-rhombus"><span></span></div>

.c-icon-square

<div class="c-icon-square"><span></span></div>

.c-icon-glass

<div class="c-icon-glass"><span></span></div>

.c-list

リストスタイルを削除した標準のリストです。階層構造は維持するようになっています。

<ul class="c-list">
	<li><a href="">リスト1</a></li>
	<li>
		<a href="">リスト2</a>
		<ul>
			<li><a href="">子リスト1</a></li>
			<li>
				<a href="">子リスト2</a>
				<ul>
					<li><a href="">孫リスト1</a></li>
					<li><a href="">孫リスト2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="">リスト3</a></li>
</ul>

.c-list--disc

黒丸付きのリストです。

<ul class="c-list c-list--disc">
	<li><a href="">リスト1</a></li>
	<li>
		<a href="">リスト2</a>
		<ul>
			<li><a href="">子リスト1</a></li>
			<li>
				<a href="">子リスト2</a>
				<ul>
					<li><a href="">孫リスト1</a></li>
					<li><a href="">孫リスト2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="">リスト3</a></li>
</ul>

.c-list--decimal

数字付きのリストです。

<ul class="c-list c-list--decimal">
	<li><a href="">リスト1</a></li>
	<li>
		<a href="">リスト2</a>
		<ul>
			<li><a href="">子リスト1</a></li>
			<li>
				<a href="">子リスト2</a>
				<ul>
					<li><a href="">孫リスト1</a></li>
					<li><a href="">孫リスト2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="">リスト3</a></li>
</ul>

.c-list--arrow-start

左側にアローアイコンが付いたリストです。

<ul class="c-list c-list--arrow-start">
<li><a href="">リスト1</a></li>
<li>
<a href="">リスト2</a>
<ul>
<li><a href="">子リスト1</a></li>
<li>
<a href="">子リスト2</a>
<ul>
<li><a href="">孫リスト1</a></li>
<li><a href="">孫リスト2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">リスト3</a></li>
</ul>

.c-list--arrow-end

右側にアローアイコンが付いたリストです。

<ul class="c-list c-list--arrow-end">
	<li><a href="">リスト1</a></li>
	<li>
		<a href="">リスト2</a>
		<ul>
			<li><a href="">子リスト1</a></li>
			<li>
				<a href="">子リスト2</a>
				<ul>
					<li><a href="">孫リスト1</a></li>
					<li><a href="">孫リスト2</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="">リスト3</a></li>
</ul>

.c-list--count

リスト数に応じてカウントされるリストです。

<ul class="c-list c-list--count">
	<li><a href="">リスト1</a></li>
	<li><a href="">リスト2</a></li>
	<li><a href="">リスト3</a></li>
</ul>

.c-mainvisual

ファーストビューのメインビジュアルとなる背景とタイトル、リード文を用意しています。

タイトル

リード文

<div class="c-mainvisual">
	<div class="c-mainvisual__content">
		<div class="c-mainvisual__title">タイトル</div>
		<div class="c-mainvisual__lead">リード文</div>
	</div>
</div>

.c-mainvisual--mask

画像の上に透過した黒色で覆っています。

タイトル

リード文

<div class="c-mainvisual c-mainvisual--mask">
	<div class="c-mainvisual__content">
		<div class="c-mainvisual__title">タイトル</div>
		<div class="c-mainvisual__lead">リード文</div>
	</div>
</div>

.c-mainvisual--high

画面の高さを高くします。

タイトル

リード文

<div class="c-mainvisual c-mainvisual--high">
	<div class="c-mainvisual__content">
		<div class="c-mainvisual__title">タイトル</div>
		<div class="c-mainvisual__lead">リード文</div>
	</div>
</div>

.c-mainvisual--high

画面の高さを低くします。

タイトル

リード文

<div class="c-mainvisual c-mainvisual--low">
	<div class="c-mainvisual__content">
		<div class="c-mainvisual__title">タイトル</div>
		<div class="c-mainvisual__lead">リード文</div>
	</div>
</div>

.c-mainvisual--hero

画面いっぱい（ヒーローイメージ）で表示します。

タイトル

リード文

<div class="c-mainvisual c-mainvisual--hero">
	<div class="c-mainvisual__content">
		<div class="c-mainvisual__title">タイトル</div>
		<div class="c-mainvisual__lead">リード文</div>
	</div>
</div>

.c-mainvisual--video

動画を背景のように振る舞っています。

タイトル

リード文

<div class="c-mainvisual c-mainvisual--video">
	<video class="c-mainvisual__video" src="../src/img/video.mp4" muted autoplay loop></video>
	<div class="c-mainvisual__content">
		<div class="c-mainvisual__title">タイトル</div>
		<div class="c-mainvisual__lead">リード文</div>
	</div>
</div>

.c-marker

文字全体を覆ったマーカーです。

ここはマーカーです。

<p>ここは<span class="c-marker">マーカー</span>です。</p>

.c-marker--thin

文字の途中までハイライトされたマーカーです。

ここはマーカーです。

<p>ここは<span class="c-marker c-marker--thin">マーカー</span>です。</p>

.c-marker--stripe

ストライプ状のマーカーです。

ここはマーカーです。

<p>ここは<span class="c-marker c-marker--stripe">マーカー</span>です。</p>

.c-marker--cover

改行しても途切れないマーカーです。

マーカーを
改行しても
マーカーのまま

<div class="c-marker c-marker--cover">マーカーを<br />改行しても<br />マーカーのまま</div>

画面中央に表示されるモーダルウインドウです。周りの黒い部分をクリックすることで閉じることができます。

<a href="" class="c-button js-modal" data-target="for-modal01">モーダルを開く</a>
<div id="for-modal01" class="c-modal">
	<div class="c-modal__content">
		<p>モーダルのコンテンツ</p>
	</div>
	<div class="c-modal__close js-modal" data-target="for-modal01"></div>
</div>

画面いっぱいに開くモーダルウインドウです。閉じるボタンを.js-modalのクラスとdata-targetで作成してあげます。

<a href="" class="c-button js-modal" data-target="for-modal-cover01">モーダルを開く</a>
<div id="for-modal-cover01" class="c-modal">
	<div class="c-modal__content c-modal__content--cover">
		<p>モーダルのコンテンツ</p>
		<a href="" class="c-button js-modal" data-target="for-modal-cover01">モーダルを閉じる</a>
	</div>
	<div class="c-modal__close js-modal" data-target="for-modal-cover01"></div>
</div>

横並びのグローバルメニューです。サブメニューまで対応しています。

<ul class="c-navigation">
	<li><a href="">メニュー1</a></li>
	<li>
		<a href="">メニュー2</a>
		<ul class="c-navigation__sub">
			<li><a href="">サブメニュー1</a></li>
			<li><a href="">サブメニュー2</a></li>
			<li><a href="">サブメニュー3</a></li>
		</ul>
	</li>
	<li><a href="">メニュー3</a></li>
	<li><a href="">メニュー4</a></li>
	<li><a href="">メニュー5</a></li>
</ul>

.c-section-head

セクション用の見出しとリード文です。

セクション

リード

<div class="c-section-head">
	<div class="c-section-title">セクション</div>
	<div class="c-section-lead">リード</div>
</div>

.c-tab

選択したタブに応じてコンテンツが切り替わります。data-targetに対応するコンテンツを指定してあげます。

タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

<div class="c-tab">
	<nav class="c-tab__nav">
		<div class="c-tab__item js-tab is-checked" data-target="for-tab01">タブ1</div>
		<div class="c-tab__item js-tab" data-target="for-tab02">タブ2</div>
		<div class="c-tab__item js-tab" data-target="for-tab03">タブ3</div>
	</nav>
	<div class="c-tab__contents">
		<div id="for-tab01" class="c-tab__content is-checked">
			タブ1のコンテンツ
		</div>
		<div id="for-tab02" class="c-tab__content">
			タブ2のコンテンツ
		</div>
		<div id="for-tab03" class="c-tab__content">
			タブ3のコンテンツ
		</div>
	</div>
</div>

.c-table

通常のテーブルです。

head	head	head
data	data data	data data data
data	data	data

<table class="c-table">
	<tr>
		<th>head</th>
		<th>head</th>
		<th>head</th>
	</tr>
	<tr>
		<td>data</td>
		<td>data data</td>
		<td>data data data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

.c-table--fixed

横幅が均一になるテーブルです。

head	head	head
data	data data	data data data
data	data	data

<table class="c-table c-table--fixed">
	<tr>
		<th>head</th>
		<th>head</th>
		<th>head</th>
	</tr>
	<tr>
		<td>data</td>
		<td>data data</td>
		<td>data data data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

.c-table--striped

偶数行でハイライトされるテーブルです。

head	head	head
data	data data	data data data
data	data	data
data	data	data
data	data	data

<table class="c-table c-table--striped">
	<tr>
		<th>head</th>
		<th>head</th>
		<th>head</th>
	</tr>
	<tr>
		<td>data</td>
		<td>data data</td>
		<td>data data data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

.c-table--horizon

横線だけで区切られたテーブルです。

head	head	head
data	data data	data data data
data	data	data

<table class="c-table c-table--horizon">
	<tr>
		<th>head</th>
		<th>head</th>
		<th>head</th>
	</tr>
	<tr>
		<td>data</td>
		<td>data data</td>
		<td>data data data</td>
	</tr>
	<tr>
		<td>data</td>
		<td>data</td>
		<td>data</td>
	</tr>
</table>

.c-table-responsive

画面からはみ出ると水平スクロールしてくれるテーブルです。

head	head	head	head	head	head	head	head	head	head	head	head	head	head	head	head
data	data	data	data	data	data	data	data	data	data	data	data	data	data	data	data

<div class="c-table-responsive">
	<table class="c-table">
		<tr>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
			<th>head</th>
		</tr>
		<tr>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
			<td>data</td>
		</tr>
	</table>
</div>

.c-text

標準のテキストボックスです。

<input type="text" name="your-text" class="c-text" value="" />

.c-text--full

横幅いっぱいに広げたテキストボックスです。

<input type="text" name="your-text" class="c-text c-text--full" value="" />

.c-textarea

標準のテキストエリアです。

<textarea name="your-textarea" class="c-textarea"></textarea>

.c-textarea--resize

右下で大きさを変更できるテキストエリアです。

<textarea name="your-textarea" class="c-textarea c-textarea--resize"></textarea>

.c-textarea--full

横幅いっぱいに広げたテキストエリアです。

<textarea name="your-textarea" class="c-textarea c-textarea--full"></textarea>

.c-radio

標準のラジオボタンです。ラジオボタンのアイコンはCSSで作成しています。

ラジオ1 ラジオ2

<label>
	<input type="radio" name="your-radio" value="ラジオ1" class="c-radio" checked />
	<span>ラジオ1</span>
</label>
<label>
	<input type="radio" name="your-radio" value="ラジオ2" class="c-radio" />
	<span>ラジオ2</span>
</label>

.c-checkbox

標準のチェックボックスです。チェックアイコンはCSSで作成しています。

チェックボックス1 チェックボックス2 チェックボックス3

<label>
	<input type="checkbox" class="c-checkbox" name="your-checkbox" value="チェックボックス1" />
	<span>チェックボックス1</span>
</label>
<label>
	<input type="checkbox" class="c-checkbox" name="your-checkbox" value="チェックボックス2" />
	<span>チェックボックス2</span>
</label>
<label>
	<input type="checkbox" class="c-checkbox" name="your-checkbox" value="チェックボックス3" />
	<span>チェックボックス3</span>
</label>

.c-select

標準のセレクトボックスです。アローアイコンは背景画像で作成しています。

<select name="your-select" class="c-select">
	<option value="セレクト1">セレクト1</option>
	<option value="セレクト2">セレクト2</option>
	<option value="セレクト3">セレクト3</option>
	<option value="セレクト4">セレクト4</option>
	<option value="セレクト5">セレクト5</option>
</select>

.c-select--full

横幅いっぱいに広げたセレクトボックスです。

<select name="your-select" class="c-select c-select--full">
	<option value="セレクト1">セレクト1</option>
	<option value="セレクト2">セレクト2</option>
	<option value="セレクト3">セレクト3</option>
	<option value="セレクト4">セレクト4</option>
	<option value="セレクト5">セレクト5</option>
</select>

multiple

複数選択が可能なセレクトボックスです。

<select name="your-select" class="c-select" multiple>
	<option value="セレクト1">セレクト1</option>
	<option value="セレクト2">セレクト2</option>
	<option value="セレクト3">セレクト3</option>
	<option value="セレクト4">セレクト4</option>
	<option value="セレクト5">セレクト5</option>
</select>

.c-file

ファイル選択フォームを標準化しています。JavaScriptに依存するので、.js-fileが設定されています。

ファイル添付

<div class="c-file">
	<label class="c-file__label" for="your-file">ファイル添付</label>
	<input type="file" name="your-file" id="your-file" class="c-file__input js-file" />
	<span class="c-file__result"></span>
</div>

.c-accordion

クリックすると開くアコーディオンです。JavaScriptで制御しているので、.js-accordionを指定しています。

タイトル

コンテンツ部分

<div class="c-accordion">
	<div class="c-accordion__title js-accordion">タイトル</div>
	<div class="c-accordion__content js-accordion-content">
		コンテンツ部分
	</div>
</div>

.c-accordion__title--arrow

アローアイコン付きのアコーディオンです。開くとアローアイコンの向きが反転するようにしています。

タイトル

コンテンツ部分

<div class="c-accordion">
	<div class="c-accordion__title c-accordion__title--arrow js-accordion">タイトル</div>
	<div class="c-accordion__content js-accordion-content">
		コンテンツ部分
	</div>
</div>

.c-pagenation

ページネーション用のクラス。基本的なアイテムは統一して、現在のページと次へと前への装飾を可能にしています。

< 1 2 3 >

<div class="c-pagenation">
	<a class="c-pagenation__num c-pagenation__num--prev" href="">&lt;</a>
	<span class="c-pagenation__num c-pagenation__num--current">1</span>
	<a class="c-pagenation__num" href="">2</a>
	<a class="c-pagenation__num" href="">3</a>
	<a class="c-pagenation__num c-pagenation__num--next" href="">&gt;</a>
</div>

.c-loading

ページが読み込まれるまでのローディング画面です。

<div class="c-loading">
	<div class="c-loading__content">loading...</div>
</div>

.c-background

.c-background--mask

.c-background--fixed

.c-background--window-full

.c-background--window-right

.c-background--window-left

.c-box

.c-box__title

.c-box--balloo-right

.c-box--balloo-top

.c-box--balloo-bottom

.c-box--balloo-left

.c-box--type1

.c-box--type2

.c-breadcrumb

.c-button

.c-button--shadow

.c-button--goast

.c-button--arrow

.c-card

.c-card--shadow

.c-card--horizon

.c-drawer

.c-drawer__content--left

.c-drawer__content--top

.c-drawer__content--cover

.c-ellipsis

.c-ellipsis--multiple-2

.c-ellipsis--multiple-3

.c-heading

.c-heading--type001

.c-heading--type002

.c-heading--type003

.c-heading--type004

.c-heading--type005

.c-heading--type006

.c-heading--type007

.c-heading--type008

.c-heading--type009

.c-heading--type010

.c-heading--type011

.c-heading--type012

.c-heading--type013

.c-heading--type014

.c-heading--type015

.c-heading--type016

.c-heading--type017

.c-icon

.c-icon-circle

.c-icon-cross

.c-icon-hamburger

.c-icon-check

.c-icon-arrow-right

.c-icon-arrow-bottom

.c-icon-arrow-left

.c-icon-arrow-top

.c-icon-triangle

.c-icon-rhombus

.c-icon-square

.c-icon-glass

.c-list

.c-list--disc

.c-list--decimal

.c-list--arrow-start

.c-list--arrow-end

.c-list--count

.c-mainvisual

.c-mainvisual--mask

.c-mainvisual--high

.c-mainvisual--high

.c-mainvisual--hero

.c-mainvisual--video

.c-marker

.c-marker--thin

.c-marker--stripe

.c-marker--cover

.c-modal

.c-modal__content--cover

.c-navigation

.c-section-head