サンプルページ

見出し
H2title

h2.h2_ttl（要div）
h2_ttl

強調用見出し .lead

h3テキスト .h3_ttl

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

h4テキスト .h4_ttl

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

h5テキスト .h5_ttl

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

診療時間
timetable

診療時間 月 火 水 木 金 土
09:00 ～ 12:00 ● ● ／ ● ● ●
15:30 ～ 18:00 ● ● ／ ● ● ／

14:30～15:30は乳幼児健診＋予防接種（月・火・木・金 完全予約制）となっております。
お電話にてご予約ください。

休診日
水曜・土曜午後・日曜・祝日

時間を揃えたいときは0を「span.invisible」で囲う

画像
image

h3タイトル

h4タイトル

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

画像にスタイルのある場合

クラスなしでスタイル付与

スタイル不要の場合　.img_none

リスト ul/ol
list

  • リスト .list-disc
  • リストリスト
  • リストリスト
  • 文字サイズ大きめ
  • リスト .list-check
  • リストリスト
  • リストリスト
  • リスト .list-none
  • リストリスト
  • リストリスト
  • リスト .list-inline
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リスト .list-disc.d_flexw
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  • リストリスト
  1. ナンバーリスト olクラスなし
  2. ナンバーリスト
  3. ナンバーリスト
  • こめリスト .kome
  • こめリスト
  • こめリスト
  1. 数字付きこめリスト ol.kome
  2. こめリスト
  3. こめリスト

リスト/dl
list

定義リスト dl.dl-border

定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リスト
定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります

経歴リスト dl.biography

2000年
リストリストリストリストリストリスト
2000年
リストリストリストリストリストリスト
2000年
リストリストリストリストリストリスト

dl

dl_p5～50

症状：
症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります症状が入ります
経過：
経過が入ります経過が入ります経過が入ります経過が入ります経過が入ります経過が入ります経過が入ります

縦配置.dl_column

定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります
定義リスト
定義リストが入ります定義リストが入ります定義リストが入ります定義リストが入ります

Well
well

通常well　.well

タイトル　.well_ttl

テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト

well内の画像は緑の影つかない

赤well　.well_red

タイトルタイトルタイトル

テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト

シンプルwell　.well_g

テキストテキスト
テキストテキスト
テキストテキスト
テキストテキスト

ボタン
button

ふつうのボタン

ボタン .btn-original

色違い

.btn_orange

ページ内リンク

ページ内リンク ページ内リンク ページ内リンク ページ内リンク

テーブル
table

header header header
data data data
data data data
data data data
header data data data
header data data data
header data data data

縦線あり .table_border

header header header
data data data
data data data
data data data
title data data
title.th_sub data data
title data data
title data data

.table-responsive

この表はスワイプできます
header header header header header
長文長文長文長文長文長文長文長文長文長文長文長文長文長文 長文長文長文長文長文長文長文長文長文長文長文長文長文長文 data data data
data data data data data
data data data data data

色
color

.fc_b

.fc_b2

.fc_s

.fc_s2

.fc_a1

.fc_a2
（背景色）

.fc_a3
（背景色）

フロー
flow

ul.flow

  • タイトル　.flow_ttl

    テキストテキスト
    テキストテキスト
    テキストテキスト
    テキストテキスト

    flow内の画像は緑の影つかない

  • タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

  • タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

数字フロー　ol.flow

  1. タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

  2. タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

  3. タイトル　.flow_ttl

    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

Q&A　dl.q_and_a
faq

質問がはいります。質問がはいります。質問がはいります。質問がはいります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります
質問がはいります。質問がはいります。質問がはいります。質問がはいります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります
質問がはいります。質問がはいります。質問がはいります。質問がはいります。
回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります。回答が入ります

ラベル
label

ラベル.labelラベル.label.label_sラベル.label.label_a1ラベル.label.label_a2ラベル.label.label_a3ラベル.label.label_default

投稿関連
post

ページナビ確認用

その他
other

アコーディオン

「.ac_wrap」で囲ってクラス「.ac_ttl、.ac_body」を追加

ページ内リンク

  • ページ内リンクの一覧に表示したくない時…クラス「hide_linkname」を追加
  • 見出しとページ内リンクの名前が違う時…h2タグに「data-linkname="xxxx"」
  • 自動で出力されるページ内リンクのスクロール位置を変えたいとき…btn.scss内にある span[id^="sec_"] のtopの数値を変更する
  • PC時、特定の場所で改行したい時…クラス「indention」を追加（div.spacerが挿入されます）

Youtube

パーツ用ショートコード

フォルダ「page/parts」内のパーツを呼び出す時は【】

MVスライドショー

  1. assets.phpのslick（js、css）を読み込む
  2. config.jsの「メインイメージスライドショー」の項目を有効化
  3. style.scssのslick.scssを解除
  4. 以下を挿入（参考）
<ul class="mainimage_slider">
                <li class="slider_item item01"></li>
                <li class="slider_item item02"></li>
                <li class="slider_item item03"></li>
              </ul>
  • layout.scss内のmainimageの指定も調整してください
  • 参考サイト

アイコン

軽量化のため、使わなさそうなアイコンはコメントアウトしてます。必要なときは「sass/module/fontawesome.scss」からコメントを外してください。

アイコン参考

アイコンサイズ（fa-●●）…fa-xs,sm,lg,fa-2～fa-10 固定幅（fa-fw）…アイコンに固定幅をつけてテキストの開始位置を揃える
テキストテキスト
テキストテキスト
リスト（fa-ul、fa-li）…アイコンをabsolute配置
  • テキストが入ります
  • テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります
  • テキストが入ります
位置回転（fa-rotate-●●）

水平・垂直回転（fa-flip-●●）

回転アニメーション（fa-spin,fa-pulse）

アイコン合体（fa-stack）…アイコンを円で囲みたいときなど

Google Maps