汎用パーツ

よく使う汎用パーツです。
見出しの（）書きの中身の文字列は、Codaの「クリップ」のトリガーです。
トリガーを覚えて、効率よくコーディングをしましょう。

セクション（s1）

セクションには下記ソースを基本構造として使用し、必要に応じてアレンジします。

表示サンプル

表示サンプルは下層ページを参照してください。

ソース

Lead1とLead2の違いは余白の大きさで、Lead2の方が大きい

左右ボックス（lrb）

レイアウトとして左右2カラムのボックスを作りたい場合は、この「左右ボックス」を使用します。

表示サンプル

左のボックス

右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス右のボックス

現状はfloatを使用していますが、将来的にはflexboxに移行します。

カラム（col）

並びのアイテムをカラム表示する場合は、以下のパーツを使用します。

2カラム（class="Col Col2"）

3カラム（class="Col Col3"）

4カラム（class="Col Col4"）

5カラム（class="Col Col5"）

現状はfloatを使用していますが、将来的にはflexboxに移行します。

リスト各種

ディスク（ld）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

ディスク：小（lds）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

米印（lk）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

米印：小（lks）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

連番（ln）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
1. 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
2. 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
3. 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
1. 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
2. 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
3. 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

連番：小（lns）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

連番米印：小（lkns）

大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
あろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発
Futureろで大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発音がした。俺は驚いて振り返った。大きな爆発

記述リスト：左右（dlh）

表示サンプル

display：table-cellを使用しているので、vertical-alignが使えます。

2013年11月13日: コーディングには基本的な知識も必要だけど、ブラウザ間の挙動の違いの調整などは、経験値が重要。

2013年11月13日: コーディングには基本的な知識も必要だけど、ブラウザ間の挙動の違いの調整などは、経験値が重要。

記述リスト：上下（dlv）

表示サンプル

2013年11月13日: コーディングには基本的な知識も必要だけど、ブラウザ間の挙動の違いの調整などは、経験値が重要。

2013年11月13日: コーディングには基本的な知識も必要だけど、ブラウザ間の挙動の違いの調整などは、経験値が重要。

記述リスト：テーブルスタイル（dlt）

表示サンプル

2013年11月13日: コーディングには基本的な知識も必要だけど、ブラウザ間の挙動の違いの調整などは、経験値が重要。

2013年11月13日: コーディングには基本的な知識も必要だけど、ブラウザ間の挙動の違いの調整などは、経験値が重要。

表組み：項目左（t1）

表示サンプル

商品A	5,000円
商品B	10,000円
商品C	15,000円

表組み：項目上（t2）

表示サンプル

商品名	金額
商品A	10,000円
商品B	30,000円

テキストリンクアイコン

class名は暗記しましょう。

表示サンプル

通常リンク（class="LinkFwd"）
戻るリンク（class="LinkBack"）
下へリンク（class="LinkDown"）
上へリンク（class="LinkUp"）
外部リンク（class="LinkNewWin"）
PDFリンク（class="LinkPDF"）

ボタン

classは、サイズ、カラー、矢印の種類で指定。
class名は暗記しましょう。

矢印：左

詳しくはこちら（class="BtnS BtnColor1 BtnAllowLeft"）
詳しくはこちら（class="BtnM BtnColor1 BtnAllowLeft"）
詳しくはこちら（class="BtnL BtnColor1 BtnAllowLeft"）

矢印：右

詳しくはこちら（class="BtnS BtnColor1 BtnAllowRight"）
詳しくはこちら（class="BtnM BtnColor1 BtnAllowRight"）
詳しくはこちら（class="BtnL BtnColor1 BtnAllowRight"）

ボタン：戻る

前の画面に戻る（class="BtnS BtnColor2 BtnAllowBack"）
前の画面に戻る（class="BtnM BtnColor2 BtnAllowBack"）
前の画面に戻る（class="BtnL BtnColor2 BtnAllowBack"）

ボタン：閉じる

閉じる（class="BtnS BtnColor2 BtnClose"）
閉じる（class="BtnM BtnColor2 BtnClose"）
閉じる（class="BtnL BtnColor2 BtnClose"）

矢印：下向き左

詳しくはこちら（class="BtnS BtnColor3 BtnAllowDownLeft"）
詳しくはこちら（class="BtnM BtnColor3 BtnAllowDownLeft"）
詳しくはこちら（class="BtnL BtnColor3 BtnAllowDownLeft"）

矢印：下向き右

詳しくはこちら（class="BtnS BtnColor3 BtnAllowDownRight"）
詳しくはこちら（class="BtnM BtnColor3 BtnAllowDownRight"）
詳しくはこちら（class="BtnL BtnColor3 BtnAllowDownRight"）

矢印：上向き左

詳しくはこちら（class="BtnS BtnColor3 BtnAllowUpLeft"）
詳しくはこちら（class="BtnM BtnColor3 BtnAllowUpLeft"）
詳しくはこちら（class="BtnL BtnColor3 BtnAllowUpLeft"）

矢印：上向き右

詳しくはこちら（class="BtnS BtnColor3 BtnAllowUpRight"）
詳しくはこちら（class="BtnM BtnColor3 BtnAllowUpRight"）
詳しくはこちら（class="BtnL BtnColor3 BtnAllowUpRight"）

ボタン：矢印なし

詳しくはこちら（class="BtnS BtnColor1"）
詳しくはこちら（class="BtnM BtnColor1"）
詳しくはこちら（class="BtnL BtnColor1"）

ボタン：非アクティブ

詳しくはこちら（class="BtnS BtnColor1 Disabled"）
詳しくはこちら（class="BtnM BtnColor1 Disabled"）
詳しくはこちら（class="BtnL BtnColor1 Disabled"）

囲み

囲み表示したい要素にclass「Box」を追加して使用します。

リードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入る

テキスト色

個別要素で色指定する場合に利用します。

表示サンプル

テキスト色1（class="C1T"）
テキスト色2（class="C2T"）
テキスト色3（class="C3T"）
テキスト色4（class="C4T"）
テキスト色5（class="C5T"）

固定要素では使用せず、要素ごとに定義します。

ボーダー色

個別要素で色指定する場合に利用します。

表示サンプル

ボーダー色1（class="C1Bo"）

ボーダー色2（class="C2Bo"）

ボーダー色3（class="C3Bo"）

ボーダー色4（class="C4Bo"）

ボーダー色5（class="C5Bo"）

固定要素では使用せず、要素ごとに定義します。

背景色

個別要素で色指定する場合に利用します。

表示サンプル

背景色1（class="C1Bg"）

リードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入る

背景色2（class="C2Bg"）

リードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入る

背景色3（class="C3Bg"）

リードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入る

背景色4（class="C4Bg"）

リードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入る

背景色5（class="C5Bg"）

リードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入る

固定要素では使用せず、要素ごとに定義します。

アラート色

個別要素で定義せず、base.cssで予め定義したclass="Alert"を使用します。

表示サンプル

テキスト（class="Alert"）

囲み（class="Box Alert"）

リードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入るリードが入る

リスト米印（class="ListKome Alert"）
リスト2
リスト3

ページネーション（pn）

表示サンプル

よくある質問（faq）

Qの連番はJSで自動付与しています。
10件以上ある場合は、class「Over10」付与します。

表示サンプル

なぜ乗ろうとしたエスカレーターが止まっていると乗らずに引き返すのですか？

実際には動いていなくても階段として機能するはずだが、故障やメンテナンス等、乗ってはいけない理由があるかもしれないと思うからなのだろう。
JALナビアの強みは何ですか？

フルサービスキャリアとして世界一の航空会社を目指しています。お客さまが常に新鮮な感動を得られるよう、社員一丸となり、高品質なサービスを提供しています。

検索窓（sb）

表示サンプル

SNSシェアボタン（sns）

左からTwitter、Facebook、LINE（スマホの場合のみ表示）と並んでいます。

表示サンプル（ローカルでは正常に表示されません）

FacebookはappIDを必ず変更してください。
OGP設定も忘れずに！

汎用パーツ

セクション（s1）

表示サンプル

ソース

左右ボックス（lrb）

表示サンプル

カラム（col）

2カラム（class="Col Col2"）

3カラム（class="Col Col3"）

4カラム（class="Col Col4"）

5カラム（class="Col Col5"）

リスト各種

ディスク（ld）

ディスク：小（lds）

米印（lk）

米印：小（lks）

連番（ln）

連番：小（lns）

連番米印：小（lkns）

記述リスト：左右（dlh）

表示サンプル

記述リスト：上下（dlv）

表示サンプル

記述リスト：テーブルスタイル（dlt）

表示サンプル

表組み：項目左（t1）

表示サンプル

表組み：項目上（t2）

表示サンプル

テキストリンクアイコン

表示サンプル

ボタン

矢印：左

矢印：右

ボタン：戻る

ボタン：閉じる

矢印：下向き左

矢印：下向き右

矢印：上向き左

矢印：上向き右

ボタン：矢印なし

ボタン：非アクティブ

囲み

テキスト色

表示サンプル

ボーダー色

表示サンプル

背景色

表示サンプル

背景色1（class="C1Bg"）

背景色2（class="C2Bg"）

背景色3（class="C3Bg"）

背景色4（class="C4Bg"）

背景色5（class="C5Bg"）

アラート色

表示サンプル

囲み（class="Box Alert"）

ページネーション（pn）

表示サンプル

よくある質問（faq）

表示サンプル

検索窓（sb）

表示サンプル

SNSシェアボタン（sns）

表示サンプル（ローカルでは正常に表示されません）

OGP HTMLソース（ogp）