スタイルガイド

テキストと画像を並べるスタイル

左側に画像

pタグのテキスト:サンプルテキストサンプルテキストサンプルテキストサンプルテキストリンクをはりつける場合のスタイル。:hoverすると0.3秒かけて色が変わるサンプルテキストサンプルテキストサンプルテキスト bタグで文字を太く サンプルテキストサンプルテキストサンプルテキストサンプルテキスト strongタグはhtml5では文章として大事な部分を指します サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

右側に画像

pタグのテキスト:サンプルテキストサンプルテキストサンプルテキストサンプルテキストリンクをはりつける場合のスタイル。:hoverすると0.3秒かけて色が変わるサンプルテキストサンプルテキストサンプルテキスト bタグで文字を太く サンプルテキストサンプルテキストサンプルテキストサンプルテキスト strongタグはhtml5では文章として大事な部分を指します サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

中央に画像

pタグのテキスト:サンプルテキストサンプルテキストサンプルテキストサンプルテキストリンクをはりつける場合のスタイル。:hoverすると0.3秒かけて色が変わるサンプルテキストサンプルテキストサンプルテキスト bタグで文字を太く サンプルテキストサンプルテキストサンプルテキストサンプルテキスト strongタグはhtml5では文章として大事な部分を指します サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

リストのスタイル

通常のリスト(ul)

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト

矢印付きリスト(ul.list-arrow)

  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト
  • サンプルテキスト

番号付きリスト(ol>li)

  1. サンプルテキスト
  2. サンプルテキスト
  3. サンプルテキスト
  4. サンプルテキスト

名前付き定義リストのスタイル

dl,dt,ddのデフォルト
サンプルテキスト
サンプル
サンプルテキスト
サンプル
サンプルテキスト
サンプル
サンプルテキスト
略歴などの場合
dl => .ryaku を着ける
昭和60年5月
サンプルテキスト
サンプルテキスト
昭和60年5月
サンプルテキスト
昭和60年5月
サンプルテキスト
昭和60年5月
サンプルテキスト
質問などのコンテンツを入れる場合
dl => .faq を着ける
質問
サンプルテキスト
質問
サンプルテキスト

テキストに枠を付けるスタイル

コンテンツに色を付けたい場合はdiv.classで括ってからpタグを挿れる
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

コンテンツに色を付けたい場合はdiv.classで括ってからpタグを挿れる
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

テーブルのスタイル

診療時間表のスタイル

診療時間 日・祝
9:00〜12:30
15:00〜18:30

見出しのスタイル h2

見出しのスタイル h3

見出しのスタイル h4

見出しのスタイル h5

ボタンのスタイル

◯◯について詳しくはこちら

◯◯について詳しくはこちら

◯◯について詳しくはこちら

テキストのとなりに入れるとこんなかんじ◯◯について詳しくはこちら

ページ内リンクのスタイル

ページ内リンク(予防接種用)のスタイル

院内紹介とかのスタイル

◆ クリニック外観

外観

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

◆ 受付・待合室

受付・待合室

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

◆ クリニック外観

外観

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

◆ 受付・待合室

受付・待合室

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

◆ クリニック外観

外観

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

◆ 受付・待合室

受付・待合室

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお