スタイルガイド

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

左側に画像

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

院内紹介とかのスタイル

◆ クリニック外観

外観

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

◆ 受付・待合室

受付・待合室

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

◆ クリニック外観

外観

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

◆ 受付・待合室

受付・待合室

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

◆ クリニック外観

外観

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

◆ 受付・待合室

受付・待合室

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

——————- ——————-

大見出し

中見出し

小見出し

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

リスト

  • リストのテキスト
  • リストのテキスト
  • リストのテキスト
  • リストのテキスト

dlタグ

dt見出し
テキストテキストテキスト
テキストテキストテキスト
 
dt見出し
テキストテキストテキスト
テキストテキストテキスト
 

dlタグ(Q&A用)

Q見出し
A.テキストテキストテキスト

中見出し

小見出し

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