京生き物ミュージアム

スタイルガイド

CSSフレームワーク Foundation 6 をベースに記述しています。詳しいグリッド等については以下を参照ください

https://get.foundation/sites/docs/xy-grid.html

【未使用】H3タイトル

H4タイトル見本

H5タイトル見本
H5タイトル見本:バリエーション
H6タイトル見本
H6タイトル見本:バリエーション

テキストテキスト一部赤字表示

ボーダー

ノーマルボーダー


バリエーション(背景画像)


リスト

  1. olリスト
  2. olリスト
  3. olリスト
  4. olリスト
  5. 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 中身中身中身中身中身中身 中身中身中身中身中身中身 中身中身中身中身中身中身 中身中身中身中身中身中身

左寄せ画像とテキスト配置

dummy

左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置左寄せ画像とテキスト配置

右寄せ画像とテキスト配置

右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置右寄せ画像とテキスト配置

このカラムはスマホ表示時2番目(画像カラムが上)にくるように設定「large-order-1 small-order-2」を入れています。

dummy

カラム3cols

dummy
dummy
dummy

カラム4cols

dummy
dummy
dummy
dummy

カラム オフセット左にnカラム分空白を入れる

dummy4 cols
offset 2
dummy3 cols
offset 1
dummy2 cols

カラム 順番差し替え

このカラムはsmll-n(スマホ)だと2番目、medium-n(タブレット)large-n(PC)と1番目に表示されます。
このカラムはsmll-n(スマホ)だと1番目、medium-n(タブレット)large-n(PC)と2番目に表示されます。 This column will come first on small, and second on medium and larger.

特定サイズの際見せるクラス指定

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‘, });

チェックボックス

個人

生物多様性について学習や情報発信を行う
ID(ご登録されているメールアドレス)
パスワード

パスワードを忘れてしまった方はこちら