About this site

見出し


style="background-color: #e0dddd;margin: 10px 10px 10px 10px;border: 1px solid #afadad;border-radius: 5px;padding: 5px;"

タイトルなどの見出しに使用します。h1からh6までの大きさがあります。

h1　見出し

h2　見出し

h3　見出し

h4　見出し

h5　見出し
h6　見出し

カラム

シンプルなカラムのみ制作しています。横幅が12の数字になるように、レイアウトを組みます。

カラム1
カラム11 border-radius:10px
カラム2
カラム10 font-size:30px
カラム3
カラム9 font-weight:800
カラム4
カラム8 color:red
カラム5
カラム7 background-color:#ffb6c1
カラム6 text-align: left;
カラム6 text-align: right;
カラム7 background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
カラム5
線状グラデーション 色が変わっていく方向や角度、そして色を指定することで、自由にグラデーションを作ることができます。
カラム8 background: radial-gradient(rgb(169, 214, 255), rgb(0, 80, 159));
カラム4 background: radial-gradient(形状や中心位置、開始色, 終了色);
カラム9 border:1px; border-style: solid; border-color:black;
カラム3
カラム10 border:1px; border-style: solid; border-color:black; border-radius:10px;
カラム2
カラム11
カラム1
カラム12

カラムオプション

幅を指定するmdオプションを付けています。用途に合わせてお使いください。

カラム4 カラム12-md
カラム4 カラム6-md
カラム4 カラム6-md

ボタン

ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン

フォーム

リスト

  • リストスタイル
  • リストスタイル
  • リストスタイル
  1. 番号付きのリスト
  2. 番号付きのリスト
  3. 番号付きのリスト

リスト

  • リストスタイル
  • リストスタイル
  • リストスタイル
  1. 番号付きのリスト
  2. 番号付きのリスト
  3. 番号付きのリスト

テーブル

タイトル タイトル タイトル
文章 文章 文章
文章 文章 文章
文章 文章 文章

テーブル2(一つづつcss指定)

タイトル タイトル タイトル
文章 文章 文章
文章 文章 文章
文章 文章 文章
＜hr＞

テーブル３(テーブル用のcssを書く)

タイトル タイトル タイトル
文章 文章 文章
文章 文章 文章
文章 文章 文章

テーブル用cssコード



                    .original {
                      border:2px solid #333;
                    }
                    .original1 {
                      border:3px solid #333;
                      width:100%
                    }
                    もちろん＜style>で囲んでください。（ソースを見てください）

コード

.test-class {
              background-color: F1F1F1;
              font-size: 16px;}

Copyright © k-art-factory.