softmedi

京都の美容皮膚科 山本クリニック「ソフトメディ」

いますぐご予約

0120-48-43-25

【営業時間】 月・火・水・金(10:00〜20:00)、土(10:00〜19:00)

【定 休 日】 木・日・祝

テンプレート用


見出し h-type01

見出し h-type02

見出し h-type03

見出し h-type03 + h-type-list

余白

mt**

classにmt5を付与するとmargin-top:5rem;が適応されます。

classにmt10を付与するとmargin-top:10rem;が適応されます。

※mt0〜mt60までは5、mb70〜mb100までは10刻みで設定

mb**

classにmb5を付与するとmargin-bottom:5rem;が適応されます。

classにmb10を付与するとmargin-bottom:10rem;が適応されます。

※mb0〜mb60までは5、mb70〜mb100までは10刻みで設定

ml**

classにml5を付与するとmargin-left:5rem;が適応されます。

classにml10を付与するとmargin-left:10rem;が適応されます。

※ml5〜ml30まで5刻みで設定

mr**

classにmr5を付与するとmargin-right:5rem;が適応されます。

classにmr10を付与するとmargin-right:10rem;が適応されます。

※mr5〜mr30まで5刻みで設定

pt**

classにpt5を付与するとpadding-top:5rem;が適応されます。

classにpt10を付与するとpadding-top:10rem;が適応されます。

※pt0〜pt50まで10刻みで設定

pb**

classにpb5を付与するとpadding-bottom:5rem;が適応されます。

classにpb10を付与するとpadding-bottom:10rem;が適応されます。

※pb0〜pb60までは5、pb70〜pb100までは10刻みで設定

pl**

classにpl5を付与するとpadding-left:5rem;が適応されます。

classにpl10を付与するとpadding-left:10rem;が適応されます。

※pl5〜pl30まで5刻みで設定

pr**

classにpr5を付与するとpadding-right:5rem;が適応されます。

classにpr10を付与するとpadding-right:10rem;が適応されます。

※pr5〜pr30まで5刻みで設定

フォント

明朝

class=”serif”で明朝体表示します。

サイズ

class=”font-x_small”のサイズです。

class=”font-normal”のサイズです。

class=”font-large”のサイズです。

class=”font-x_large”のサイズです。

class=”font-big”のサイズです。

class=”font-x_big”のサイズです。

class=”font-super”のサイズです。

フォントウェイト

class=”font-normal”で通常表示します。

class=”font-bold”で太字表示します。

フォントカラー

class=”font-color_set01″のカラーです。

class=”font-color_set02″のカラーです。

class=”font-color_set03″のカラーです。

class=”font-color_set04″のカラーです。

class=”font-color_set05″のカラーです。

marker

spanにclass=”marker01″を付与するとマーキングされます

spanにclass=”marker02″を付与するとマーキングされます

テキストアイコン

txt-icon01

txt-icon02

txt-icon03

リンクアイコン

aタグに付与

arrow-link”で表示されます。

class=”other-link01″で表示されます。

class=”other-link02″で表示されます。(白版)

インデント

ind**

classにindent05を付与するとtext-indent:0.5em;が適応されます。

classにindent10を付与するとtext-indent:1em;が適応されます。

classにindent15を付与するとtext-indent:1.5em;が適応されます。

classにindent20を付与するとtext-indent:2em;が適応されます。

classにindent25を付与するとtext-indent:2.5em;が適応されます。

classにindent30を付与するとtext-indent:3em;が適応されます。

テキスト配置

text-****

クラスにtext-leftを付与すると左揃えが適応されます。

クラスにtext-rightを付与すると右揃えが適応されます。

クラスにtext-centerを付与すると中央揃えが適応されます。

画像つき記事 回り込みなし

photo-right

画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。テキストが入ります。必ずclass=”clumnbox”を付与したボックス要素で包括してください。

photo-left

画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。テキストが入ります。必ずclass=”clumnbox”を付与したボックス要素で包括してください。

画像つき記事 必ずclass=”clumnbox”を付与したボックス要素で包括してください。

photo-right

画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。テキストが入ります。必ずclass=”clumnbox”を付与したボックス要素で包括してください。

photo-left

画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。テキストが入ります。必ずclass=”clumnbox”を付与したボックス要素で包括してください。

photo-center

画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。画像の配置を指定します。必ずclass=”clumnbox”を付与したボックス要素で包括してください。テキストが入ります。必ずclass=”clumnbox”を付与したボックス要素で包括してください。

photo-10

“photo-10″から”photo-100″まで10%単位で画像幅が切り替わります。”photo-10″から”photo-100″まで10%単位で画像幅が切り替わります。”photo-10″から”photo-100″まで10%単位で画像幅が切り替わります。”photo-10″から”photo-100″まで10%単位で画像幅が切り替わります。

photo-60

“photo-10″から”photo-100″まで10%単位で画像幅が切り替わります。”photo-10″から”photo-100″まで10%単位で画像幅が切り替わります。”photo-10″から”photo-100″まで10%単位で画像幅が切り替わります。”photo-10″から”photo-100″まで10%単位で画像幅が切り替わります。

photo-max-w100

“photo-max-w100″から”photo-max-w600″まで50px単位で画像幅を指定できます。”photo-max-w100″から”photo-max-w600″まで50px単位で画像幅を指定できます。”photo-max-w100″から”photo-max-w600″まで50px単位で画像幅を指定できます。”photo-max-w100″から”photo-max-w600″まで50px単位で画像幅を指定できます。

photo-max-w450

“photo-max-w100″から”photo-max-w600″まで50px単位で画像幅を指定できます。”photo-max-w100″から”photo-max-w600″まで50px単位で画像幅を指定できます。”photo-max-w100″から”photo-max-w600″まで50px単位で画像幅を指定できます。”photo-max-w100″から”photo-max-w600″まで50px単位で画像幅を指定できます。

画像横並び配置

画像横並び 2枚

画像横並び 3枚

画像横並び 4枚

画像横並び 5枚


ボックス装飾

box-type01

box-type01

box-type02

box-type02

box-type03

box-type03

box-type02 + box-padding30

box-type02 + box-padding30 (10・15・20・25)

box-type02 + box-border-dott

box-type02 + box-border-dott

box-type01 + box-border05

box-type01 + box-border05 (00 – 10)

ボタン

btn-type01

btn-type01

btn-type02

btn-type02

btn-type03

btn-type03

btn-type03 +03 btn-type03_bottom

btn-type03

min-btn-type01

ミニボタンインライン版(spanに付与)ボタン

アンカーリンクメニュー

テーブル

table-type01

th td
th td
th td
th td

※table-オプション

table-type01に併記して使用

  • .table-thead-center
  • .table-tbody-th-left
  • .table-tbody-th-font-n
  • .table-tbody-th-bg-none
  • .table-tbody-td-center

ul リスト

list-style-circle

  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。

list-style-square

  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。

list-style-decimal

  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。

list-style-parenthesized-decimal

  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。

list-style-text

  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。

list-style-arrow01

  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。

list-style-arrow02

  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。
  • テキストが入ります。テキストが入ります。

list-style-text + list-border01

  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。

list-style-text + list-border02

  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。
  • ・テキストが入ります。テキストが入ります。

dl リスト

dl-type01

1
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
2
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
3
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
4
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

dl-type02

タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

dl-type03

Q01タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
Q02タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
Q03タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
Q04タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
Q05タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

dl-type04

タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

dl-type05

タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

dl-type02 + dl-accordion01(アコーディオン)

タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

dl-type03 + dl-accordion01(アコーディオン)

Q01タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
Q02タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
Q03タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
Q04タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
Q05タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

dl-type05 + dl-accordion01(アコーディオン)

タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

グリッド(divレイアウト用)

2分割

grid-div(grid-2_*)

grid-2_1
grid-2_1
grid-2_2
grid-2_1
grid-2_1

3分割

grid-div(grid-3_*)

grid-3_1
grid-3_2
grid-3_1
grid-3_1
grid-3_1
grid-3_3

4分割

grid-div(grid-4_*)

grid-4_1
grid-4_1
grid-4_1
grid-4_1
grid-4_2
grid-4_1
grid-4_1
grid-4_3
grid-4_1
grid-4_4

5分割

grid-div(grid-5_*)

grid-5_1
grid-5_1
grid-5_1
grid-5_1
grid-5_1
grid-5_2
grid-5_1
grid-5_1
grid-5_1
grid-5_3
grid-5_1
grid-5_1
grid-5_4
grid-5_1
grid-5_5

タブメニュー

tab-set tab-type01

タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。タブ01の内容が入ります。

タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。タブ02の内容が入ります。

タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。タブ03の内容が入ります。


YOUTUBE埋め込み ※レスポンシブ対応

video-container

横幅

width0~100 (5刻み)

width0

width0

width10

width10

width35

width35

width50

width50

width75

width75

width100

width100

width35 + width-tabFull

width35 + width-tabFull

width35 + width-spFull

width35 + width-spFull

width50 + righty

width50 + righty

width50 + centy

width50 + centy

メニューパーツ

menu-basic + menu-basic-num04

オプションはnum02~04まで対応

  • アドミッションポリシー
  • コンクール
  • ガン予防
  • メンズビューティー
  • 友だち追加
  • マイベストプロ
  • お支払いについて

pagetop