HTML・スタイルガイド

テキストのスタイル

段落

Example:

テキストはPタグ内に入ります。

2段落目のテキストです。
BRで改行しても見た目はPと同じに見えます。

                            

テキストはPタグ内に入ります。

2段落目のテキストです。
BRで改行しても見た目はPと同じに見えます。

見出し

Example:

見出し2

見出し3

見出し3 ver2

見出し4

見出し5
見出し6

                            

見出し2

見出し3

見出し3 ver2

見出し4

見出し5
見出し6

区切り線

Example:

                            

テキストの位置

Example:

左寄せのテキストです。

中央寄せのテキストです。

右寄せのテキストです。

                            

左寄せのテキストです。

中央寄せのテキストです。

右寄せのテキストです。

テキストの装飾

Example:

強調(太字)
やや強調(斜体)
追記(下線)
打ち消し線
上付き文字・・・使用例:cm2
下付き文字・・・使用例:CO2
重要
文字サイズ大
文字サイズ小
リンク

                            

強調(太字) やや強調(斜体) 追記(下線) 打ち消し線 上付き文字・・・使用例:cm2 下付き文字・・・使用例:CO2 重要 文字サイズ大 文字サイズ小 リンク

重要な内容に枠をつける

Example:

重要な内容が入ります。

最重要な内容が入ります。

                            

重要な内容が入ります。

最重要な内容が入ります。

注意事項に枠をつける

Example:

注意事項などが入ります。

注意事項をさらに目立たせたい場合はこちらをご使用ください。

                            

注意事項などが入ります。

注意事項をさらに目立たせたい場合はこちらをご使用ください。

引用

Example:

引用テキストがここに入ります。


引用元を記載します。

                            

引用テキストがここに入ります。

引用元を記載します。

画像

文章中の画像

文章中に画像を配置

Example:

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

                            

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

文章中に配置した画像の拡大表示

Example:

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

                            

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

画像の位置変更

画像がテキストの左になる配置

Example:

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

この段落ではまだテキストが画像のすぐ右に入ります。

この段落以降はテキストが画像のすぐ右に入るのを解除します。

                            

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

この段落ではまだテキストが画像のすぐ右に入ります。

この段落以降はテキストが画像のすぐ右に入るのを解除します。

画像がテキストの右になる配置

Example:

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

この段落ではまだテキストが画像のすぐ左に入ります。

この段落以降はテキストが画像のすぐ左に入るのを解除します。

                            

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

この段落ではまだテキストが画像のすぐ左に入ります。

この段落以降はテキストが画像のすぐ左に入るのを解除します。

画像を中央に配置

Example:

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

                            

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

スマートフォン閲覧時に画像の回り込みをしない(改行する)スタイル

imgタグに class=”sp-break” を追加

Example:

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

                            

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

複数枚の画像配置

Example:
                            
                        

複数枚の画像配置(画像キャプション付き)

リスト表示

順序なしリスト

Example:
  • リストが入ります。
  • リストが入ります。
  • リストが入ります。
  • リストが入ります。
                            
  • リストが入ります。
  • リストが入ります。
  • リストが入ります。
  • リストが入ります。

順序つきリスト

Example:
  1. リストが入ります。
  2. リストが入ります。
  3. リストが入ります。
  4. リストが入ります。
                            
  1. リストが入ります。
  2. リストが入ります。
  3. リストが入ります。
  4. リストが入ります。

リストの階層化(順序なし)

Example:
  • 1階層目のリストが入ります。
  • 1階層目のリストが入ります。
    • 2階層目のリストが入ります。
    • 2階層目のリストが入ります。
      • 3階層目のリストが入ります。
                            
  • 1階層目のリストが入ります。
  • 1階層目のリストが入ります。
    • 2階層目のリストが入ります。
    • 2階層目のリストが入ります。
      • 3階層目のリストが入ります。

リストの階層化(順序あり)

Example:
  1. 1階層目のリストが入ります。
  2. 1階層目のリストが入ります。
    1. 2階層目のリストが入ります。
    2. 2階層目のリストが入ります。
      1. 3階層目のリストが入ります。
                            
  1. 1階層目のリストが入ります。
  2. 1階層目のリストが入ります。
    1. 2階層目のリストが入ります。
    2. 2階層目のリストが入ります。
      1. 3階層目のリストが入ります。

リストの階層化(組み合わせ自由)

Example:
  1. 1階層目のリストが入ります。
  2. 1階層目のリストが入ります。
    • 2階層目のリストが入ります。
    • 2階層目のリストが入ります。
      1. 3階層目のリストが入ります。
  • 1階層目のリストが入ります。
  • 1階層目のリストが入ります。
    1. 2階層目のリストが入ります。
    2. 2階層目のリストが入ります。
      • 3階層目のリストが入ります。
                            
  1. 1階層目のリストが入ります。
  2. 1階層目のリストが入ります。
    • 2階層目のリストが入ります。
    • 2階層目のリストが入ります。
      1. 3階層目のリストが入ります。
  • 1階層目のリストが入ります。
  • 1階層目のリストが入ります。
    1. 2階層目のリストが入ります。
    2. 2階層目のリストが入ります。
      • 3階層目のリストが入ります。

定義リスト

定義が最長4文字まで

Example:
定義用語
これは短めの定義用語です。
1234
定義は、全角4文字くらいが目安です。
定義用語
説明
定義用語
説明
                            
定義用語
これは短めの定義用語です。
1234
定義は、全角4文字くらいが目安です。
定義用語
説明
定義用語
説明

定義が5~10文字の場合

Example:
定義用語
これは標準の長さです。
1234567890
定義は、全角10文字くらいが目安です。
定義用語
説明
定義用語
説明
                            
定義用語
これは標準の長さです。
1234567890
定義は、全角10文字くらいが目安です。
定義用語
説明
定義用語
説明

定義が11~14文字の場合

Example:
定義用語
これは長めの定義用語です。
12345678901234
定義は、全角14文字くらいが目安です。
定義用語
説明
定義用語
説明
                            
定義用語
これは長めの定義用語です。
12345678901234
定義は、全角14文字くらいが目安です。
定義用語
説明
定義用語
説明

定義の下に説明を表示する場合

Example:
定義用語に文字数の制限はありません
説明が定義の下に入ります。
定義用語
説明
                            
定義用語に文字数の制限はありません
説明が定義の下に入ります。
定義用語
説明

テーブル表示

Example:
キャプション
見だし 見だし 見だし 見だし
見だし データ データ データ
見だし データ データ データ
見だし データ データ データ
                            
キャプション
見だし 見だし 見だし 見だし
見だし データ データ データ
見だし データ データ データ
見だし データ データ データ

枠なしテーブル表示

Example:
キャプション
見だし 見だし 見だし 見だし
見だし データ データ データ
見だし データ データ データ
見だし データ データ データ
                            
キャプション
見だし 見だし 見だし 見だし
見だし データ データ データ
見だし データ データ データ
見だし データ データ データ

カレンダー

Example:
1月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
                            
1月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

タブ表示

Example:

タブ1

タブ2

タブ3

タブ4

タブ5

                            

タブ1

タブ2

タブ3

タブ4

タブ5

スマートフォン閲覧時にセルごとに改行するテーブル

Example:
ああああああ いいいいいい うううううう ええええええ
ああああああ いいいいいい うううううう ええええええ
ああああああ いいいいいい うううううう ええええええ
ああああああ いいいいいい うううううう ええええええ
ああああああ いいいいいい うううううう ええええええ
ああああああ いいいいいい うううううう ええええええ
ああああああ いいいいいい うううううう ええええええ
ああああああ いいいいいい うううううう ええええええ
HTML・スタイルガイド
イチ押しのソリューション