サイトリニューアルに伴い、要素を簡単にレイアウト出来るように
HTMLソース内の各クラス(class)に入れると簡単に装飾が出来る要素を用意しましたのでご活用ください。
尚、このページ自体は他ページと異なる作りのため、テンプレートとして使わないでください。
見出し（タイトル）要素
タイトル1
タイトル1
※上記ソースをコピーして使えます
タイトル2
タイトル2
※上記ソースをコピーして使えます
タイトル3
タイトル3
※上記ソースをコピーして使えます
タイトル4
タイトル4
※上記ソースをコピーして使えます
タイトル5
タイトル5
※上記ソースをコピーして使えます
タイトル6
タイトル6
※上記ソースをコピーして使えます
タイトル7
タイトル7
※上記ソースをコピーして使えます
リスト要素
テーブル要素
テーブル1
セルがが均等割付になり全体で横幅100％の長さでフィットします。
ボーダーが無いためテーブルコーディング用となります。
| テーブル1 | テーブル1 | テーブル1 | テーブル1 |
| テーブル1 | テーブル1 | テーブル1 | テーブル1 |
| テーブル1 | テーブル1 | テーブル1 | テーブル1 |
| テーブル1 | テーブル1 | テーブル1 | テーブル1 |
テーブル2
横幅は成り行きです
| テーブル2 th | テーブル2 th | テーブル2 th |
|---|---|---|
| テーブル2 | テーブル2 | テーブル2 |
| テーブル2 th | テーブル2 th | テーブル2 th |
|---|---|---|
| テーブル2 | テーブル2 | テーブル2 |
テーブル3
横幅は100％です
| テーブル3 th | テーブル3 th | テーブル3 th |
|---|---|---|
| テーブル3 | テーブル3 | テーブル3 |
| テーブル3 th | テーブル3 th | テーブル3 th |
|---|---|---|
| テーブル3 | テーブル3 | テーブル3 |
テーブル4
テーブル要素がスマートフォンなどでも縮まりません
（横スクロールバーが出て指でドラッグできます）
※PCではブラウザサイズを縮めることで確認できます。
| テーブル3 th | テーブル3 th | テーブル3 th | テーブル3 th |
|---|---|---|---|
| テーブル3 | テーブル3 | テーブル3 | テーブル3 |
テーブル3 th
テーブル3 th
テーブル3 th
テーブル3 th
テーブル3
テーブル3
テーブル3
テーブル3
※上記ソースをコピーして使えます
ボックスレイアウト
流し込み
写真と文字を一緒に扱う際などに使います。
文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります
文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります
文章が入ります文章が・・・
文章が入ります文章が・・・
※上記ソースをコピーして使えます
2カラム
左右に要素を分ける際に使います。
左カラム
右カラム
左カラム
右カラム
※上記ソースをコピーして使えます
マージンレイアウト
マージンボトム
要素の下からの距離を出します
※上記ソースをコピーして使えます
マージンライト
要素の右からの距離を出します
※上記ソースをコピーして使えます
マージンレフト
要素の左からの距離を出します
※上記ソースをコピーして使えます
マージントップ
要素の上からの距離を出します
※上記ソースをコピーして使えます
文字要素
文字色１
文字色1(青)
文字色1
※上記ソースをコピーして使えます
文字色２
文字色2(赤)
文字色2
※上記ソースをコピーして使えます
文字サイズ小
文字サイズ小
文字サイズ小
※上記ソースをコピーして使えます
文字サイズ大
文字サイズ小
文字サイズ小
※上記ソースをコピーして使えます
太文字
太文字
太文字
※上記ソースをコピーして使えます
ハイライト（黄）
ここはハイライト（黄）にします
ここはハイライト（黄）にします
※上記ソースをコピーして使えます
テキスト左寄せ
テキスト左寄せ
テキスト左寄せ
※上記ソースをコピーして使えます
テキスト中央寄せ
テキスト中央寄せ
テキスト中央寄せ
※上記ソースをコピーして使えます
テキスト右寄せ
テキスト右寄せ
テキスト右寄せ
※上記ソースをコピーして使えます
明朝体
この文字は明朝体です。
この文字は明朝体です。
※上記ソースをコピーして使えます
ボタン要素
ボタン1
※上記ソースをコピーして使えます
ボタン2
※上記ソースをコピーして使えます
マウスオーバー要素
画像のマウスオーバー
※上記ソースをコピーして使えます
ツールチップ（注意書き）
マウスをのせてみてください
マウスをのせてみてください
※上記ソースをコピーして使えます
モバイル端末対応
モバイルサイズでのコンテンツ切り替え
PC、タブレット、スマートフォンサイズでコンテンツを切り替えます。
↓↓↓ここに各デバイスサイズに応じたコンテンツが出ます。
ブラウザ幅を縮めて確認できます。
[ PCだけに表示される文章です ]
[ スマートフォンとタブレットに表示される文章です ]
[ スマートフォンだけにに表示される文章です ]
[ タブレットだけにに表示される文章です ]
[ PCだけに表示される文章です ]
[ スマートフォンとタブレットに表示される文章です ]
[ スマートフォンだけにに表示される文章です ]
[ タブレットだけにに表示される文章です ]
※上記ソースをコピーして使えます
モバイル端末アラート
※ブラウザを縮めてモバイル端末サイズにするとアラートがでます
↓↓↓ここにアラートが出ます。ブラウザ幅を縮めて確認できます。
モバイル端末ではご利用いただけません
モバイル端末ではご利用いただけません
※上記ソースをコピーして使えます