電話する

地図

問い合わせ

メニュー
ヘッダーオファー

共通CSSスタイル

カスタマイズのための共通のスタイル共有

■見出し■■■■■■■■■■■■■

H2見出し

H3見出し

H4見出し

768px以上だけで改行したい箇所には、
ソースのように《 br class=”pcBr” 》をはさんでください。
改行部分をソース内で改行せずに一気に記述すると、
スマホビュー時にできる不自然なホワイトスペースが発生しません。
《 br class=”pcBr” 》と《 br 》の使い分けで、
両デバイス読みやすく調整できます。
この文章のソースを参照してください。

ページ内ジャンプなどのテキストリンクに

■画像の配置■■■■■■■■■■■■■

画像の配置ルール

本文+右側に画像を配置

画像のタイトル

固定ページに使う画像は、Retina配慮とスマホビュー比率を考えて width=”375″ height=”230″で統一が汎用的にもベストかと思います。
この右側配置画像は420以上でwidth:180px、768以上でwidth:200px、960以上でwidth:238pxにリサイズされ表示されます。

画像を横2列に配置

画像のタイトル
画像のタイトル

横2列も同様に width=”375″ height=”230″で大丈夫です。
PCでのサイズ指定は width=”353″ height=”216″
スマホでは縦2列になります。

画像陳列時の奇数画像配置

画像のタイトル
画像のタイトル
画像のタイトル

画像枚数が2枚だと列が揃い文章がとても読みやすいので、関連画像を見繕って偶数枚数に揃えるのがベストと思いますが、そうもいかない場合、奇数枚数のイレギュラー時に。画像枚数が2枚だと列が揃い文章がとても読みやすいので、関連画像を見繕って偶数枚数に揃えるのがベストと思いますが、そうもいかない場合、奇数枚数のイレギュラー時に。

横幅いっぱいの大きな画像配置

画像のタイトル

スマホで画像のサイズを統一できるよう、小さな画像と比率を同じに width=”715″ height=”438″がベストです。
画像のタイトルalt属性も忘れずお願いします。

■テーブル■■■■■■■■■■■■■

レスポンシブテーブル

医院名 あおぞらデンタルクリニック
住所 大阪市福島区野田3-12-22 三和ビル2F
テーブル最後のTR属性には class=”last”を付けてください。
■ボックス■■■■■■■■■■■■■

汎用シンプルボックス

シンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックスシンプルボックス

■リストの横に画像配置■■■■■■■■■■■■■

横に画像配置するリスト

サークル

画像のタイトル
  • 口元がキレイになる
  • 咀嚼能率(ものを噛み砕く能力)が上がったり、発音が良くなったりする
  • 睡眠時無呼吸を防げる
  • 横顔がすっきり整いフェイスラインがきれいになる
  • 笑うときのコンプレックスがなくなり、自信を持って笑うことができる

チェック

画像のタイトル
  • 口元がキレイになる
  • 咀嚼能率(ものを噛み砕く能力)が上がったり、発音が良くなったりする
  • 睡眠時無呼吸を防げる
  • 横顔がすっきり整いフェイスラインがきれいになる
  • 笑うときのコンプレックスがなくなり、自信を持って笑うことができる

げっそり

画像のタイトル
  • 口元がキレイになる
  • 咀嚼能率(ものを噛み砕く能力)が上がったり、発音が良くなったりする
  • 睡眠時無呼吸を防げる
  • 横顔がすっきり整いフェイスラインがきれいになる
  • 笑うときのコンプレックスがなくなり、自信を持って笑うことができる

にっこり

画像のタイトル
  • 口元がキレイになる
  • 咀嚼能率(ものを噛み砕く能力)が上がったり、発音が良くなったりする
  • 睡眠時無呼吸を防げる
  • 横顔がすっきり整いフェイスラインがきれいになる
  • 笑うときのコンプレックスがなくなり、自信を持って笑うことができる

歯マーク

画像のタイトル
  • 口元がキレイになる
  • 咀嚼能率(ものを噛み砕く能力)が上がったり、発音が良くなったりする
  • 睡眠時無呼吸を防げる
  • 横顔がすっきり整いフェイスラインがきれいになる
  • 笑うときのコンプレックスがなくなり、自信を持って笑うことができる
■下線ありリスト■■■■■■■■■■■■■

下線ありリスト

  • サークル
  • サークル
  • サークル
  • チェック
  • チェック
  • チェック
  • げっそり
  • げっそり
  • げっそり
  • にっこり
  • にっこり
  • にっこり
  • 歯マーク
  • 歯マーク
  • 歯マーク
■ボックス付きリスト■■■■■■■■■■■■■

ボックス付きリスト

  • サークル
  • サークル
  • サークル
  • チェック
  • チェック
  • チェック
  • げっそり
  • げっそり
  • げっそり
  • にっこり
  • にっこり
  • にっこり
  • 歯マーク
  • 歯マーク
  • 歯マーク
■Q&A■■■■■■■■■■■■■

Q&A

しつもんしつもん
回答

かいとうかいとうかいとうかいとうかいとうかいとう

かいとうかいとうかいとうかいとう

■ウェブアイコン■■■■■■■■■■■■■

ウェブアイコン

サイズのクラスと合わせて適宜調整してください。
カラーの変更はcommon.css内該当クラスを直接変更したほうが一瞬のチラツキが気になりません。

■テキスト関連■■■■■■■■■■■■■

テキスト関連

フォントサイズtxt10

フォントサイズtxt12

フォントサイズtxt14

フォントサイズtxt18

フォントサイズtxt20

フォントサイズtxt24

フォントサイズtxt28

フォント太字

フォント下線

フォント白

フォント赤

サイトのメインカラー

サイトのアクセントカラー

黄マーカー

取り消し線

水平線は↓


■配置やフロートについて■■■■■■■■■■■■■

配置やフロートについて

.fl .fr .clearfix
.center img.center .txtC .txtL .txtR
などあります。詳細はcommon.css

■スペースについて■■■■■■■■■■■■■

スペースについて

マルチデバイスでスペース調整が楽になるように、S M Lで調整しています。

.none(全スペースなし)
.mTopS(各デバイスで少し開ける)
.mTopM(各デバイスで中くらい開ける)
.mTopL (各デバイスで大きく開ける)
など、同様にボトムレフトライト、paddingも同様に用意しています。詳細はcommon.css

■メイン・サイド・フッター各ナビの記述について■■■■■■■■■■■■■

メイン・サイド・フッター各ナビの記述について

各ナビへのリンクタイトルは、なるだけ改行がないように簡潔によろしくお願いします。

1・2文字だけ改行になるようなカタチはナビとして見づらいので、
簡略するか語尾を足して少し長くするか、フォントサイズのクラスで調整をお願いします。

■スマホからの見栄えはこちらから■■■■■■■■■■■■■

スマホ・タブレットビュー用QR

デントランスレスポンシブ共有スタイル

以上が共通で用意しているスタイルになります。
ケースで必要なスタイルが出てきたときにはカスタマイズや新規作成ください。

診療スケジュール

当院へのお電話からの問い合わせは0120-648-068へ

診療時間
10:00~13:00
14:00~18:00
/
/
/
/
休診日 / 月・日・祝日
ご予約・お問い合わせはこちら
あおぞらデンタルクリニックの外観
フッターオファー
© 2015 大阪市福島区の歯医者 あおぞらデンタルクリニック