コミュニティ ＞ CSSデザインサンプル集

[目次]
  1. h1～h6タグ
  2. リンクボタン
  3. ボックス（囲み枠）
  4. 見出し
  5. リスト
  6. リボン
  7. 吹き出し
  8. 表の背景色を変更
  9. プルダウンメニュー
  10. マウスオーバーで吹き出し
  11. マウスオーバーで画像を透過させる
  12. 画像に文字をのせる
  13. 文字デザイン
  14. アイコン

h1～h6タグ

  1. h1タグ

    header用css定義あり。main用css定義なし。


  2. h2タグ


  3. h3タグ


  4. h4タグ


  5. h5タグ

  6. h6タグ

リンクボタン

  1. .button
    ボタンのスタイルblock
    幅100％　マウスオーバー色変更有　要素全体がリンク
    2. ここに文章
    ここに文章
    「ここに文章・ここに文章・ここに文章」
    ここに文章
  2. .button_inline-block
    ボタンのスタイルinline-block
    幅30％　マウスオーバー色変更有　文字のみリンク
    3. ここに文章
    ここに文章
    「ここに文章・ここに文章・ここに文章」
    ここに文章
  3. .button_inline-block-w30p
    ボタンのスタイルinline-block
    幅30％　マウスオーバー色変更無し　文字のみリンク
    4. ここに文章
    ここに文章
    「ここに文章・ここに文章・ここに文章」
    ここに文章
  4. .button_inline-block_h45px
    ボタンのスタイルinline-block
    高さ45ｐｘ　幅30％　マウスオーバー色変更無し　文字のみリンク
    5. ここに文章
    ここに文章
    「ここに文章・ここに文章・ここに文章」
    ここに文章
  5. .button_inline
    ボタンのスタイルinline
    マウスオーバー色変更あり
    6. ここに文章
    ここに文章
    「ここに文章・ここに文章・ここに文章」
    ここに文章
  6. .button_inline2
    ボタンのスタイルinline
    マウスオーバー色変更あり
    7. ここに文章
    ここに文章
    「ここに文章・ここに文章・ここに文章」
    ここに文章
  7. .btn-sticky
    ボタンのスタイルinline-block
    少し浮き上がったふせん風　マウスオーバー色変更無し　要素全体がリンク
    8. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  8. .btn-sticky-w25p
    ボタンのスタイルinline-block
    幅25％　少し浮き上がったふせん風　マウスオーバー色変更無し　要素全体がリンク
    9. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  9. .btn-sticky-block
    ボタンのスタイルblock
    少し浮き上がったふせん風　マウスオーバー色変更無し　要素全体がリンク
    10. ここに文章 ここに文章
  10. .btn-sticky-2-block
    ボタンのスタイルblock
    少し浮き上がったふせん風　マウスオーバー色変更無し　要素全体がリンク
    11. ここに文章 ここに文章
  11. .btn-sticky-3-block
    ボタンのスタイルblock
    少し浮き上がったふせん風　マウスオーバー色変更無し　要素全体がリンク
    12. ここに文章 ここに文章
  12. .btn-sticky-4-block
    ボタンのスタイルblock
    少し浮き上がったふせん風　マウスオーバー色変更無し　要素全体がリンク
    13. ここに文章 ここに文章
  13. .btn-sticky-4-w25p
    ボタンのスタイルinline-block
    幅25％　少し浮き上がったふせん風　マウスオーバー色変更無し　要素全体がリンク
    14. ここに文章 ここに文章 ここに文章 ここに文章 ここに文章
  14. .btn-flat-double-border
    ボタンのスタイルinline-block
    二重線で囲う　マウスオーバー色変更有　要素全体がリンク
    15. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  15. .btn-flat-double-border-block
    ボタンのスタイルblock
    二重線で囲う　マウスオーバー色変更有　要素全体がリンク
    16. ここに文章 ここに文章
  16. .btn-flat-vertical-border
    ボタンのスタイルinline-block
    両端ボーダーばさみ　マウスオーバー色変更有　要素全体がリンク
    17. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  17. .btn-flat-vertical-border-block
    ボタンのスタイルblock
    両端ボーダーばさみ　マウスオーバー色変更有　要素全体がリンク
    18. ここに文章 ここに文章
  18. .btn-gradient-radius
    ボタンのスタイルinline-block
    角丸のフラットボタン　マウスオーバー色変更有　要素全体がリンク
    19. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  19. .btn-gradient-radius-block
    ボタンのスタイルblock
    角丸のフラットボタン　マウスオーバー色変更有　要素全体がリンク
    20. ここに文章 ここに文章
  20. .btn-square
    ボタンのスタイルinline-block
    立体的なボタン押し込み式　マウスオーバー色変更無し　要素全体がリンク
    21. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  21. .btn-square-w25p
    ボタンのスタイルinline-block
    幅25％　立体的なボタン押し込み式　マウスオーバー色変更無し　要素全体がリンク
    22. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  22. .btn-square-block
    ボタンのスタイルblock
    立体的なボタン押し込み式　マウスオーバー色変更無し　要素全体がリンク
    23. ここに文章 ここに文章
  23. .btn-flat-simple
    ボタンのスタイルinline-block
    フラットデザインなシンプルボタン　マウスオーバー色変更有　要素全体がリンク
    24. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  24. .btn-flat-simple-block
    ボタンのスタイルblock
    フラットデザインなシンプルボタン　マウスオーバー色変更有　要素全体がリンク
    25. ここに文章 ここに文章
  25. .btn-flat-border
    ボタンのスタイルinline-block
    フラットデザインでシンプルなボーダーで囲うボタン　マウスオーバー色変更有　要素全体がリンク
    26. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  26. .btn-flat-border-block
    ボタンのスタイルblock
    フラットデザインでシンプルなボーダーで囲うボタン　マウスオーバー色変更有　要素全体がリンク
    27. ここに文章 ここに文章
  27. .btn-flat-border-block-1px
    ボタンのスタイルblock
    フラットデザインでシンプルなボーダーで囲うボタン　マウスオーバー色変更有　要素全体がリンク 線1px
    28. ここに文章 ここに文章
  28. .btn-circle-border-simple
    ボタンのスタイルinline-block
    シンプルな円形　マウスオーバー色変更有　8文字まで　要素全体がリンク
    29. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章
  29. .btn-circle-border-double
    ボタンのスタイルinline-block
    二重線円形　マウスオーバーで回転　8文字まで　要素全体がリンク
    30. ここに文章 ここに文章 「ここに文章・ここに文章・ここに文章」 ここに文章

ボックス（囲み枠）

  1. .box2
    角丸　青

    ここに文章

  2. .box2_green
    角丸　緑

    ここに文章

  3. .box2_pink
    角丸　ピンク

    ここに文章

  4. .box2_brown
    角丸　茶

    ここに文章

  5. .box4
    上下にだけ線

    ここに文章

  6. .box5
    二重線の枠

    ここに文章

  7. .box6
    破線のボックス

    ここに文章

  8. .box8
    左にだけ太線

    ここに文章

  9. .box11
    スマートなデザイン

    ここに文章

  10. .box12
    分厚いボード風

    ここに文章

  11. .box14
    布風

    ここに文章

  12. .box18
    角に円形

    ここに文章

  13. .box24
    吹き出し

    ここに文章

  14. .box24_margin-0
    吹き出し[上下]マージン:0[下段に＜ｂｒ＞が必要]

    ここに文章


  15. .box25
    めくれたテープ風

    ここに文章

  16. .box25_2
    めくれたテープ風 色変更

    ここに文章

  17. .box26
    枠の途中にタイトル
    POINT

    ここに文章

  18. .box26_2
    枠の途中にタイトル　タイトル色黒
    POINT

    ここに文章

  19. .box27
    ラベルをつけたようなデザイン
    POINT

    ここに文章

  20. .box28
    ボックス内にラベル
    POINT

    ここに文章

  21. .box29
    タイトルを横いっぱいに広げた場合
    POINT

    ここに文章

  22. .box29_2
    タイトルを横いっぱいに広げた場合
    POINT

    ここに文章

見出し

  1. .midashi1　下線付き

    ここに文章


  2. .midashi2　二重線

    ここに文章


  3. .midashi3　上下に線

    ここに文章


  4. .midashi4　左に線＋塗り

    ここに文章


  5. .midashi5　左に線＋塗り

    ここに文章


  6. .midashi5-3px　立体感のあるバー

    ここに文章


  7. .midashi6　角がぺろっと剥がれるデザイン

    ここに文章


  8. .midashi7　吹き出し

    ここに文章


  9. .midashi8　帯（リボン）風

    ここに文章


  10. .midashi9　蛍光マーカー風

    ここに文章


  11. .midashi10　途中で色の変わる線

    ここに文章


  12. .midashi11　葉っぱ風

    ここに文章


  13. .midashi12　背景をグラデーションで塗る

    ここに文章


  14. .midashi13　先頭に円をつける

    ここに文章


  15. .midashi14　線先に矢印

    ここに文章


  16. .midashi15　背景にカラフルな円（円は文章の中心）

    ここに文章ここに文章ここに文章


  17. .midashi16　背景をストライプで塗る

    ここに文章


  18. .midashi17　背景グラデーション+影

    ここに文章


  19. .midashi18　上下のグラデーション

    ここに文章


リスト

　　　　
    　　　　
  1. ul.list_f1 li, ol.list_f1 li 付箋風リスト 　　　
      　　　
    1. HTML
      2. 　　　
    2. CSS
      3. 　　　
    3. Photoshop
      4. 　　　
    4. Illustrator
      5. 　　 　
    　　 　
    2. 　　　　
  2. ul.list_f2 li 立体的なバー 　　　
      　　　
    • HTML
      • 　　　
    • CSS
      • 　　　
    • Photoshop
      • 　　　
    • Illustrator
      • 　　 　
    　　 　
    3. 　　　　
  3. ul.list_f3 li, ol.list_f3 li シンプルな線 　　　
      　　　
    • HTML
      • 　　　
    • CSS
      • 　　　
    • Photoshop
      • 　　　
    • Illustrator
      • 　　 　
    4. 　　　　
  4. ul.list_f4 li, ol.list_f4 li 破線で囲み 　　　
      　　　
    • HTML
      • 　　　
    • CSS
      • 　　　
    • Photoshop
      • 　　　
    • Illustrator
      • 　　 　
    5. 　　　　
  5. ul.list_f5 li, ol.list_f5 li 上下のみボーダー 　　　
      　　　
    • HTML
      • 　　　
    • CSS
      • 　　　
    • Photoshop
      • 　　　
    • Illustrator
      • 　　 　
    6. 　　　　
  6. ul.list_f6 li , ol.list_f6区切り線付き 　　　
      　　　
    1. HTML
      2. 　　　
    2. CSS
      3. 　　　
    3. Photoshop
      4. 　　　
    4. Illustrator
      5. 　　 　
    7. 　　

リボン

　　　　
  1. .ribbon1　片側カット＋縫い目つき

    ここに文章ここに文章

  2. .ribbon7　折り目付きリボン

    ここに文章ここに文章


  3. .ribbon8　両側に折り目

    ここに文章ここに文章


  4. .ribbon15-wrapper、.ribbon15　縦のリボン
    width: 300px、リボン40px
    （1行MAX文字数を超えると下方向に延びる）
    ２字２字

    ここに文章ここに文章ここに文章ここに文章

    5. 　　　　

吹き出し

　　　　
  1. .balloon1　下向き

    ここに文章


  2. .balloon1-top　上向き

    ここに文章


  3. .balloon1-left　左向き

    ここに文章


  4. .balloon1-right　右向き

    ここに文章


  5. .balloon2　下向き 枠線バージョン

    ここに文章


  6. .balloon2-top　上向き 枠線バージョン

    ここに文章


  7. .balloon2-left　左向き 枠線バージョン

    ここに文章


  8. .balloon2-right　右向き 枠線バージョン

    ここに文章


  9. .balloon3-bottom　円形の吹き出し 下向き

    ここに文章


  10. .balloon3-top　円形の吹き出し 上向き

    ここに文章


  11. .balloon3-left　円形の吹き出し 左向き

    ここに文章


  12. .balloon3-right　円形の吹き出し 右向き

    ここに文章


  13. .balloon3-right-btm　円形の吹き出し 右斜め

    ここに文章

    14. 　　　　

表の背景色を変更

　　　　
  1. table.haikeishoku3　テーブルへマウスオーバー時にセルの背景色を変更する
    2. 列1列2列3列4列5
    行1セル1-1セル1-2セル1-3セル1-4セル1-5
    行2セル2-1セル2-2セル2-3セル2-4セル2-5
    行3セル3-1セル3-2セル3-3セル3-4セル3-5

  2. table.haikeishoku2　テーブルへマウスオーバー時にセルの背景色を変更する
    3. 列1列2列3列4列5
    行1セル1-1セル1-2セル1-3セル1-4セル1-5
    行2セル2-1セル2-2セル2-3セル2-4セル2-5
    行3セル3-1セル3-2セル3-3セル3-4セル3-5

  3. table.haikeishoku1　テーブルへマウスオーバー時に行やセルの背景色を変更する
    4. 列1列2列3列4列5
    行1セル1-1セル1-2セル1-3セル1-4セル1-5
    行2セル2-1セル2-2セル2-3セル2-4セル2-5
    行3セル3-1セル3-2セル3-3セル3-4セル3-5

    列1列2列3列4列5
    セル1-1セル1-2セル1-3セル1-4セル1-5
    セル2-1セル2-2セル2-3セル2-4セル2-5
    セル3-1セル3-2セル3-3セル3-4セル3-5

    行1セル1-1セル1-2セル1-3セル1-4セル1-5
    行2セル2-1セル2-2セル2-3セル2-4セル2-5
    行3セル3-1セル3-2セル3-3セル3-4セル3-5


  4. table.cross-highlight　テーブルへマウスオーバー時に縦方向セルの背景色を変更する
    5. 列1列2列3列4列5
    行1セル1-1セル1-2セル1-3セル1-4セル1-5
    行2セル2-1セル2-2セル2-3セル2-4セル2-5
    行3セル3-1セル3-2セル3-3セル3-4セル3-5

    列1列2列3列4列5
    セル1-1セル1-2セル1-3セル1-4セル1-5
    セル2-1セル2-2セル2-3セル2-4セル2-5
    セル3-1セル3-2セル3-3セル3-4セル3-5


  5. table.cross-highlight2　テーブルへマウスオーバー時に縦・横両方向のセルの背景色を変更する
    6. 列1列2列3列4列5
    行1セル1-1セル1-2セル1-3セル1-4セル1-5
    行2セル2-1セル2-2セル2-3セル2-4セル2-5
    行3セル3-1セル3-2セル3-3セル3-4セル3-5
    　　　　

プルダウンメニュー

  1. マウスオーバーでプルダウン

マウスオーバーで吹き出し

  1. マウスオーバーで吹き出し 半透明（時間変化あり）

    2. ＞＞マウスを乗せてください 吹き出しが表示される
    吹き出しが表示される
    吹き出しが表示される

    コメント・コメント・コメント
    コメント・コメント・コメント
    コメント・コメント・コメント

  2. マウスオーバーで吹き出し 半透明＞＞非透明（時間変化あり）

    3. ＞＞マウスを乗せてください 吹き出しが表示される
    吹き出しが表示される
    吹き出しが表示される

    コメント・コメント・コメント
    コメント・コメント・コメント
    コメント・コメント・コメント

  3. マウスオーバーで吹き出し ボタン　半透明＞＞非透明（時間変化あり）

    4. 吹き出しが表示される
    吹き出しが表示される
    吹き出しが表示される

    コメント・コメント・コメント
    コメント・コメント・コメント
    コメント・コメント・コメント

  4. マウスオーバーで吹き出し　非透明（時間変化なし）

    5. ＞＞マウスを乗せてください 吹き出しが表示される
    吹き出しが表示される
    吹き出しが表示される

    コメント・コメント・コメント
    コメント・コメント・コメント
    コメント・コメント・コメント

  5. マウスオーバーで吹き出し 色違い　非透明（時間変化なし）

    6. ＞＞マウスを乗せてください 吹き出しが表示される
    吹き出しが表示される
    吹き出しが表示される

    コメント・コメント・コメント
    コメント・コメント・コメント
    コメント・コメント・コメント


マウスオーバーで画像を透過させる

  1. img.img_hover マウスオーバーで画像を透過


  2. img.img_hover_transition マウスオーバーで画像を1秒かけて透過


画像に文字をのせる
mainエリアwidth:PCは540pxがMAX、スマートホンは340pxがMAX
subエリアwidth: max220px

  1. 画像に文字をのせる
    スマホを考えるとMAX2行、下記文字数がMAX
    class="example"_280←width: 280px
    img src="img/frame_719-183.png"
    CSSは本ページ内

    2. 画像に文字をのせる画像に文字をの
    せる画像に文字をのせる画像に文字

  2. 画像に文字をのせる
    スマホを考えるとMAX2行
    class="example"_280←width: 280px
    img src="img/frame_719-183.png"
    CSSは本ページ内

    3. 画像に文字をのせる画像に文字をの
    せる画像に文字をのせる画像に文字

  3. 画像に文字をのせる
    スマホを考えるとMAX1行、下記文字数がMAX
    class="example_220"←width: 220px
    img src="img/frame_719-183.png"
    CSSは本ページ内

    4. 画像に文字をのせる画像に

  4. 画像の中央に文字をのせる
    スマホを考えるとMAX2行
    class="frame_719-183"←width: 100％
    img src="img/frame_719-183-no2.png"

    5. SUNSET
    123

  5. 画像の中央に文字をのせる
    スマホを考えるとMAX2行、下記文字数がMAX
    class="frame_719-183"←width: 100％
    img src="img/frame_719-183-no3.png"

    6. 画像に文字をのせる画像に文字をのせる

  6. 画像の中央に文字をのせる
    スマホを考えるとMAX6行、下記文字数がMAX
    class="frame_719-183"←width: 100％
    img src="img/frame_pic2091(2-1).gif"

    7. 画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる

  7. 画像の中央に文字をのせる
    スマホを考えるとMAX6行
    class="frame_719-183"←width: 100％
    img src="img/frame_pic2081(2-1).gif"

    8. SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET

  8. 画像の中央に文字をのせる
    スマホを考えるとMAX6行
    class="frame_719-183"←width: 100％
    img src="img/frame_pic2078(2-1).gif"

    9. SUNSET

  9. 画像の中央に文字をのせる
    スマホを考えるとMAX12行、下記文字数がMAX
    class="frame_719-183"←width: 100％
    img src="img/frame_pic2091(1-1).gif"

    10. 画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる画像に文字をのせる

  10. 画像の中央に文字をのせる
    スマホを考えるとMAX12行
    class="frame_719-183"←width: 100％
    img src="img/frame_pic2081(1-1).gif"

    11. SUNSET

  11. 画像の中央に文字をのせる
    スマホを考えるとMAX12行
    class="frame_719-183"←width: 100％
    img src="img/frame_pic2078(1-1).gif"

    12. SUNSET

  12. 画像の中央に文字をのせる
    スマホを考えるとMAX12行
    class="frame_719-183"←width: 100％
    img src="img/frame_daiya.gif"

    13. SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET
    SUNSET

  13. 画像の中央に文字をのせる
    スマホを考えるとMAX12行
    class="frame_719-183"←width: 100％
    img src="img/frame_daiya_red.gif"

    14. SUNSET

  14. 画像の中央に文字をのせる
    スマホを考えるとMAX12行
    class="frame_719-183"←width: 100％
    img src="img/frame_double.gif"

    15. SUNSET


文字デザイン

新型コロナ
感染症特例
雇用調整助成金などの助成・給付金
厚生労働省
令和２年度労働保険の年度更新に係るお知らせ


新型
コロナ
雇用調整助成金などの助成・給付金
厚生労働省
令和２年度労働保険の年度更新に係るお知らせ
日本年金機構
令和2年度の算定基礎届の記入方法〔説明動画〕等について

雇用調整助成金などの助成・給付金（新型コロナ感染症特例）
令和２年度労働保険の年度更新に係るお知らせ（厚生労働省） 令和2年度の算定基礎届の記入方法等について（日本年金機構）

雇用調整助成金などの助成・給付金（新型コロナ感染症特例） 令和２年度労働保険の年度更新に係るお知らせ（厚生労働省） 令和2年度の算定基礎届の記入方法〔説明動画〕等について（日本年金機構）

浮いた文字
浮いた文字
浮いた文字
浮いた文字


縦書き

htmlで縦書きを行うにはCSSを使用します。

「日本語：あいう」「英数：123abc」「記号：+-*/[]」「特殊文字：©№㈱」

以上

縦書き

htmlで縦書きを行うにはCSSを使用します。

「日本語：あいう」「英数：123abc」「記号：+-*/[]」「特殊文字：©№㈱」

以上



文字影は簡単


アイコン

[head～/head]内に[link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"]の記載要。

[class="fas fa-save"]や[content: "\f0c7"]はhttps://fontawesome.com/icons?d=galleryより入手する。


  1. class="fas fa-save fa-1g"
    "fa-1g"でサイズ1.333…倍
    "fa-1g"を変更することでサイズ変更できる。
    "fa-2x"2倍、"fa-3x"3倍、"fa-4x"4倍

  2. font color="○○○"による色指定
    ○○○は順にred、blue、green、#9900FF

  3. class="fas fa-save fa-1g fa-border"
    "fa-border"による枠指定

  4. class="fas fa-file-pdf fa-2x icon-red"
    CSS（.icon-red）で色指定
    "icon-red"を変更することで色変更できる。
    "icon-red"、"icon-gray"、"icon-skyblue"、"icon-orange"

  5. class="fas fa-file-pdf fa-2x fa-spin icon-red"
    "fa-spin"で回転指定

  6. class="fas fa-file-pdf fa-2x fa-border icon-red"
    "fa-border"でアイコンを線で囲う。

  7. アイコンをCSSの疑似要素で使う。
    class="icon-1"、CSS（content: "\f1c1"）
    これはアイコンです。

  8. アイコンをCSSの疑似要素で使う。
    class="icon-2"、CSS（content: "\f0c7"）
    これはアイコンです。

  9. アイコン一覧（一部）
    • far fa-file-pdf(f1c1)
    • fas fa-file-pdf(f1c1)
    • far fa-save(f0c7)
    • fas fa-save(f0c7)
    • far fa-check-circle(f058)
    • fas fa-check-circle(f058)
    • far fa-arrow-alt-circle-right(f35a)
    • far fa-arrow-alt-circle-left(f359)
    • fas fa-angle-double-right(f101)
    • fas fa-angle-double-left(f100)
    • fas fa-caret-square-right(f152)
    • fas fa-caret-square-left(f191)
    • fas fa-arrow-circle-right(f0a9)
    • fas fa-arrow-circle-left(f0a8)
    • fas fa-ban(f05e)
    • far fa-comment(f075)
    • far fa-comment-dots(f4ad)
    • fas fa-thumbs-up(f164)
    • far fa-thumbs-up(f164)
    • far fa-image(f03e)
    • far fa-address-card(f2bb)
    • far fa-bell(f0f3)
    • fas fa-broadcast-tower(f519)
    • far fa-lightbulb(f0eb)
    • fas fa-exclamation-circle(f06a)
    • fas fa-cog(f013)
    • far fa-handshake(f2b5)
    • fas fa-handshake(f2b5)
    • fas fa-ribbon(f4d6)
    • fas fa-seedling(f4d8)
    • fas fa-power-off(f011)
    • far fa-file-excel(f1c3)
    • fas fa-file-excel(f1c3)
    • far fa-clone(f24d)
    • fas fa-clone(f24d)
    • far fa-file-word(f1c2)
    • fas fa-file-word(f1c2)
    • far fa-file-powerpoint(f1c4)
    • fas fa-file-powerpoint(f1c4)
    • far fa-folder(f07b)
    • fas fa-folder(f07b)
    • far fa-folder-open(f07c)
    • fas fa-folder-open(f07c)
    • far fa-sticky-note(f249)
    • fas fa-sticky-note(f249)
    • far fa-file-video(f1c8)
    • fas fa-file-video(f1c8)
    • far fa-file(f15b)
    • fas fa-file(f15b)
    • fas fa-archive(f187)
    • far fa-clone(f24d)
    • fas fa-clone(f24d)
    • fas fa-cut(f0c4)
    • far fa-file-code(f1c9)
    • fas fa-file-code(f1c9)
    • fas fa-biking(f84a)
    • far fa-envelope(f0e0)
    • fas fa-envelope(f0e0)
    • fas fa-thumbtack(f08d)
    • far fa-user(f007)
    • fas fa-user(f007)
    • fas fa-map-marker-alt(f3c5)
    • fas fa-share-alt(f1e0)
    • fas fa-poll(f681)
    • fas fa-desktop(f108)
    • fas fa-database(f1c0)
    • far fa-hdd(f0a0)
    • fas fa-hdd(f0a0)
    • fas fa-headphones(f025)
    • far fa-keyboard(f11c)
    • fas fa-keyboard(f11c)
    • fas fa-home(f015)
    • fas fa-industry(f275)
    • fas fa-battery-three-quarters(f241)

代表・事務所・法改正

外部リンク

画像の中央にに文字をのせる

スマホを考えるとMAX1行
class="frame_719-183 ←width: 100％
img src="img/frame_719-183.png"

画像に文字をの

スマホを考えるとMAX1行
class="frame_719-183←width: 100％
img src="img/frame_719-183-no2.png"

画像に文字をのせる

スマホを考えるとMAX1行、下記文字数がMAX
class="example_220"←width: 220px
img src="img/frame_719-183.png"
CSSは本ページ内

画像に文字をのせる画像に