ホーム > サブページ

見出し

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

ボタン

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

フォーム

テーブル

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

テーブル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;}

見出し

h1 見出し

h2 見出し

h3 見出し

h4 見出し

h5 見出し

h6 見出し

カラム