CSSフレームワーク Foundation 6 をベースに記述しています。詳しいグリッド等については以下を参照ください
https://get.foundation/sites/docs/xy-grid.html
【未使用】H3タイトル
H4タイトル見本
H5タイトル見本
H5タイトル見本：バリエーション「h5_v1」
H5タイトル見本ショート版
H5タイトル見本：バリエーションショート版「h5_v1s」
H6タイトル見本
H6タイトル見本：バリエーション
テキストテキスト一部赤字表示
ボーダー
ノーマルボーダー
バリエーション（背景画像）
リスト
- olリスト
- olリスト
- olリスト
- olリスト
- olリスト
- ulリスト
- ulリスト
- ulリスト
- ulリスト
- ulリスト
- ※リスト
- ※リスト
- ※リスト
- ※リスト
- ※リスト
PDFリスト
PDFインライン
こちらがPDF(30KB)となります。
マージン上下
.mb0 margin-bottom:0; テキストテキストテキストテキストテキスト
.mb1em margin-bottom:1em;テキストテキストテキストテキストテキスト
.mb1em margin-bottom:2em;テキストテキストテキストテキストテキスト
.mb1em margin-bottom:4em; テキストテキストテキストテキストテキスト
.mt0 margin-top:0; テキストテキストテキストテキストテキスト
.mt1em margin-top:1em;テキストテキストテキストテキストテキスト
.mt1em margin-top:2em;テキストテキストテキストテキストテキスト
.mt1em margin-top:4em; テキストテキストテキストテキストテキスト
マージン左右
テキスト.ml05 margin-left:5px;テキストテキストテキストテキスト
テキスト.ml05 margin-right:5px;テキストテキストテキストテキスト
文字色サイズ
テキスト.boldテキストテキストテキストテキスト
テキスト.tx_redテキストテキストテキストテキスト
テキスト.font_s テキストテキストテキストテキスト
テキスト.font_lテキストテキストテキストテキスト
テキスト.font_llテキストテキストテキストテキスト
テキスト.font-smallテキストテキストテキストテキスト
テキスト.font-largeテキストテキストテキストテキスト
テキスト.marker_yellowテキストテキストテキストテキスト
レスポンシブなしTABLE
thead tbody省略
| THTHTH | 中身中身中身中身中身中身 |
|---|---|
| THTHTH | 中身中身中身中身中身中身 |
| THTHTH | 中身中身中身中身中身中身 |
| THTHTH | 中身中身中身中身中身中身 |
|---|---|
| THTHTH | 中身中身中身中身中身中身 |
| THTHTH | 中身中身中身中身中身中身 |
レスポンシブありTABLE
| THTHTH | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 |
|---|---|---|---|---|
| THTHTH | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 |
| THTHTH | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 | 中身中身中身中身中身中身 |
左寄せ画像とテキスト配置
左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置
右寄せ画像とテキスト配置
右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置
このカラムはスマホ表示時2番目（画像カラムが上）にくるように設定「large-order-1 small-order-2」を入れています。
カラム3cols
カラム4cols
カラム オフセット左にnカラム分空白を入れる
4 colsoffset 2
3 colsoffset 1
2 colsカラム 順番差し替え
特定サイズの際見せるクラス指定
class=”show-for-small-only”
class=”show-for-medium-up”
class=”show-for-medium-only”
class=”show-for-large-down”
class=”show-for-large”
class=”show-for-large-up”
class=”show-for-xlarge”
class=”show-for-xxlarge”
特定サイズの際隠すクラス指定
class=”hide-for-small-only”
class=”hide-for-medium-up”
class=”hide-for-medium-only”
class=”hide-for-large-down”
class=”hide-for-large”
class=”hide-for-large-up”
class=”hide-for-xlarge”
class=”hide-for-xxlarge”
ボタン
ボタン見本 ボタン見本 ボタン見本 ボタン見本buttonタグボタン
inputボタン
※宣言を行うためには，ユーザー登録が必要です。
（未登録の方は自動的にユーザー登録画面に移行します。）
※宣言を行うためには，ユーザー登録が必要です。
（未登録の方は自動的にユーザー登録画面に移行します。）
DL DT横並びリスト（スマホ時縦並び）
- あああああ
- ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
- あああああ
- あああああああああああああああああああああああああ
- あああああ
- あああああああああああああああああああああああああ
bxslider サムネイル付き
1Pに1件だった場合は以下
$(‘.bxslider_thmb’).bxSlider({
pager: true,
controls: false,
pagerCustom: ‘.bxslider_thumbnail’,
});
1Pに複数だった場合は以下
HTML
ul class=”bxslider_thmb bxslider_thmb_id1“
：
ul class=”bxslider_thumbnail bxslider_thumbnail_id1“
：
ul class=”bxslider_thmb bxslider_thmb_id2“
：
ul class=”bxslider_thumbnail bxslider_thumbnail_id2”
Footer jquery
$(‘.bxslider_thmb_id1‘).bxSlider({
pager: true,
controls: false,
pagerCustom: ‘.bxslider_thumbnail_id1‘,
});
$(‘.bxslider_thmb_id2‘).bxSlider({
pager: true,
controls: false,
pagerCustom: ‘.bxslider_thumbnail_id2‘,
});