デザインフォーム用のサンプルCSS

  • 更新

デザインタイプでフォームを作成する際、少しでも簡単にフォームの設定ができるように、フォーム用のCSSのサンプルをご用意いたしました。

下記のリンクよりCSSをダウンロードして、ファイル置き場にアップロードする等してご利用ください。

使用方法（最低限の使用例）

１）下記のサンプルのファイルを[このCSSファイルをダウンロードする]よりダウンロードします。

２）ダウンロードしたファイルを、クライゼルの管理画面から[ファイル置き場]にアップロードします。

３）クライゼルのフォーム設定画面にて、デザインタイプのフォームの[デザイン]を開き、[サンプルソースを一括登録する]を行います。

４）PC用の登録画面のソース編集ページを開き、サンプルソースの<head>～</head>の間（例えば<style type="text/css">の上など）にカーソルを合わせ、[差込記号]を開き[ファイル置き場]のタブから、２）でアップロードしたファイルでクリックすると、CSSを参照する為のコードがサンプルソース内に挿入されます。

css1.jpg

５）他にも、必要に応じてファイル置き場の画像ファイル等を挿入し、[次へ→]で保存します。

６）同様に、確認画面にも４）、５）の作業を行います。

※各項目の表示方法等は、[項目の設定]で行います。郵便番号による住所検索機能を設置したい場合や、メールアドレスの再確認機能を設置したい場合には、先に[項目の設定]をしてから３）～６）の作業を行ってください。

CSSサンプル１

シンプルなフォーム

＜イメージ＞
css2.jpg

＜サンプルコード＞

/* win temple.css */
@charset "utf-8";

* {
	margin : 0;
	padding : 0;
}

body {
	width: 60%;
	height: 100%;
	margin: auto;
	padding: 3%;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	font-size: 77%;
}

div#header {
	width:100%;
	bacground-color: #00002B;
}

div#box1 {
	width: 97%;
	margin-bottom: 5px;
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 3%;
	background-color: #000000;
}

p {
	width: 100%;
	margin-bottom: 4%;
	color: #383838;
	line-height: nomad;
}

table {
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	color: #383838;
}

th {
	width: 40%;
	min-width: 200px;
	border-bottom: solid 1px #e0e0e0;
	text-align: left;
	padding: 10px;
	border-left: 4px solid #274a78;
}

td {
	width: 60%;
	min-width: 400px;
	border-bottom: solid 1px #e0e0e0;
	text-align: left;
	padding:10px;
}

input {
	padding: 3px;
}

select {
	padding: 1px;
}

.error {
	color: red;
}

input#__send {
	margin: 3% 45%;
	font-size: medium;
	padding:5px;
}

input#__back {
	margin: 3% 45%;
	font-size: medium;
	padding:5px;
}

input#__commit {
	margin: 3% 45%;
	font-size: medium;
	padding:5px;
}

ご注意

  • サンプルのソースを変更したい、カスタマイズしたい、といったご要望は、有償にてトライコーンの代行サービス「IMOSSS（アイモス）」にて承ります。お気軽にご相談ください。