CLOSE
  1. トップページ
  2. パーツテンプレート
TEMP

パーツテンプレート

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

大余白：sectionタグ
大余白：sectionタグ
中余白：class="content"
中余白：class="content"
小余白：class="item"
小余白：class="item"

pタグ
pタグ2行目

pタグ

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

幅指定・大：class="container"
幅指定・小：class="container-S"

H2

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

H2

H3
H3 2行目

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

H3

H4

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

H4

ボタン囲む用クラス .btns

.btn-arw-L
.btn-arw-M
.btn-arw-S
.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
  • 種々の感染症に罹患すると一過性で
    軽度とはいえ多くの例で関節痛が出現すること
  • 実験動物を病原微生物で感染している比率が高いこと
  • 微生物の細胞表面のタンパクが関節リウマチに関連ありそうな遺伝子のタンパクの構造と似ていること
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  1. 60分100円：9台
  2. 60分100円：5台
  3. 60分100円：6台
  4. 90分100円：4台
  5. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  1. 60分100円：9台
  2. 60分100円：5台
  3. 60分100円：6台
  4. 90分100円：4台
  5. 60分100円：5台
  6. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  1. 60分100円：9台
  2. 60分100円：5台
  3. 60分100円：6台
  4. 90分100円：4台
  5. 60分100円：5台
  6. 60分100円：10台
  7. 60分100円：9台
  8. 60分100円：6台
  9. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
  1. 60分100円：9台
  2. 60分100円：5台
  3. 60分100円：6台
  4. 90分100円：4台
  5. 60分100円：5台
  6. 60分100円：10台
  7. 60分100円：9台
  8. 60分100円：6台
  9. 60分100円：6台
  10. 90分100円：8台
  11. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

横並び

任意の見出し 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