パーツテンプレート

Temp

メイン画像は「テーマ/asssts/URLのドメイン以降/」のフォルダの中にある「main.jpg」と「main-1~5.jpg」が自動で選出されます。

section > .container > .content > .item
という順番で入れ子にしていく想定です

大余白：sectionタグ

中余白：class="content"

小余白：class="item"

中余白白背景：class="content-bg-white"

↑水平線区切り↑

pタグ
pタグ2行目

pタグ

pタグ内のaタグには自動でアンダーライン

p-bold16pxテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

※p-attention16pxテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

幅指定・通常：class="container"

幅指定・大：class="container-L"

H2

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

H2

H3
H3 2行目

H3内のテキストはspanで囲まれていますが、このspanは自動で付与されるようになっています。

H3

H4

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

H4
複数行

h5

h5
複数行

H2.red

H2.green

H2.blue

H3.red

H3.green

H3.blue

H4.red

H4.green

H4.blue

section背景色変更

section.bg-blue

見出しの色変更はclass付与の必要あり
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

section背景色変更

section.bg-green

section背景色変更

section.bg-red

section背景色変更

section.bg-white

ボタン囲む用クラス .btns

.btn-arw-L

.btn-arw-M

.btn-arw-S

.btn-white-S

.btn-white-arw-S

テーブルは「div[class="table-wrapper"]」で囲んで使う

class="table-wrapper" で囲んだパターン
thead > th
tbody > th	tbody > td
thead > th
th
td[class="bold"]	td

tableタグに class="table-01"を付与したパターン
thead > th
tbody > th	tbody > td
thead > th
th
strongテキスト	td

class="table-01"　に加え class="row"を指定することでSPではセルが縦一列になります。
thead > th	thead > th
tbody > th	tbody > td
tbody > th.cell-blue	tbody > td.sp-cell-blue

テーブルを.table-flexで囲んで横並び

行のサイズがずれる場合はtd,thにdata-mhを付与

thead > th
tbody > th
tbody > td

thead > th
tbody > th
tbody > td

thead > th
tbody > th
tbody > td

.bg-blue > ul.list-dot > li
種々の感染症に罹患すると一過性で
軽度とはいえ多くの例で関節痛が出現すること
実験動物を病原微生物で感染している比率が高いこと
微生物の細胞表面のタンパクが関節リウマチに関連ありそうな遺伝子のタンパクの構造と似ていること

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

横並び

任意の見出し H3

幅・余白等はクラスを追加して個別に指定。

任意の見出し H4

幅・余白等はクラスを追加して個別に指定。

figureにclass="large"を付与すると大きくなる

余白を狭くする場合は「gap-M」を付与

よくある質問は今回構造化データを入れているので入れているコードをそのままコピペし、配列の質問・回答を変えて頂きたいです。（下記を出力しているコードでも化）

よく胸やけをします。逆流性食道炎でしょうか。

食事の後などに胸やけが強い様であれば、逆流性食道炎の可能性が高いと考えられます。

胃カメラが不安です。苦しくはありませんか。

柏木内科では先端の太さが5.4㎜で、鉛筆と同程度の非常に細い胃カメラで検査を行っておりますので、苦痛なく検査が行えます。
不安な場合は静脈麻酔を行って、すこし眠くなった状態で検査することも出来ます。

姿勢の悪さも逆流性食道炎の原因になると聞きました。本当ですか。

高齢者で背骨が曲がると逆流性食道炎の発症が多くなるため、背中が曲がった姿勢も原因となる可能性があります。

逆流性食道炎は自然に治ることもありますか？

軽度の逆流性食道炎であれば、食事習慣の変更などで良くなることもありますが、重症のものでは出血がひどくなったり、食道が狭窄(せまくなること)して手術が必要になることもあるので、内服治療が必要です。

その他

各種クラス

margin(5~5刻み)

mt00・mb00・mr00・ml00

mtpc00・mbpc00・mrpc00・mlpc00

mtsp00・mbsp00・mrsp00・mlsp00

padding(5~5刻み)

pt00・pb00・pr00・pl00

ptpc00・pbpc00・prpc00・plpc00

ptsp00・pbsp00・prsp00・plsp00

font-size(10~30,1刻み)

fz10・fz11....fz30

fzpc10・fzpc11....fzpc30

fztab10・fztab11....fztab30

fzsp10・fzsp11....fzsp30

font-size %(25~300,25刻み)

fz25per・fz50per....fz300per

パーツテンプレート

H2

H2

H3H3 2行目

H3

H4

H4複数行

h5

h5複数行

H2.red

H2.green

H2.blue

H3.red

H3.green

H3.blue

H4.red

H4.green

H4.blue

section背景色変更

section.bg-blue

section背景色変更

section.bg-green

section背景色変更

section.bg-red

section背景色変更

section.bg-white

横並び

任意の見出し H3

任意の見出し H4

余白を狭くする場合は「gap-M」を付与

よくある質問は今回構造化データを入れているので入れているコードをそのままコピペし、配列の質問・回答を変えて頂きたいです。（下記を出力しているコードでも化）

その他

各種クラス

margin(5~5刻み)

padding(5~5刻み)

font-size(10~30,1刻み)

font-size %(25~300,25刻み)

H3
H3 2行目

H4
複数行

h5
複数行