2020/04/27 (更新日: 2022/02/09)

【LPテンプレート】カラフルで使用する、CSSを全部公開します

CSS TOOL

世界No.1の“本物のオールインワンツール”をゾノ先生と同じように使えるビデオコース「はじめてのコンテンツ作成コース（49,700円相当）」が大人気です。30日間無料の特別招待ページをご用意しているので、下のバナーをタップして詳細をご覧ください！
こちらから確認することができます↓

こんにちは、ゾノです。

メモ的な記事です

本記事では、LPテンプレ「カラフル」で僕が使用するCSSをそのまま公開します。

とはいえ、僕が使用するCSSは厳選したものしかないので、わりとシンプルかなと思います。カラフル愛用者のために参考になればと思います。

制作環境

ある人にとっては宝で、ある人にとってはゴミ記事です

ただの文字列なので、一見価値がないように見えますが相当有益なCSSです。

僕もこのCSSに落ち着くまでに、試行錯誤を繰り返して今があります。

どうぞ、ショートカットをしてLP制作を楽しんでください(｀･ω･´)ゞ

【LPテンプレート】カラフルで使用する、CSSを全部公開します

LPテンプレートのカラフルで使用する、CSSは下記のとおりです。

補足

「【LPテンプレート】カラフルで作成したソースコードをそのまま公開」で公開しているソースコードとの併用がおすすめです。

/*form*/
dl.pub_form input{
	text-align: center;
	font-weight: bold;
	font-size: 40px;
	border-radius: 10px;
	border: 2px solid;
	border-color: #777777;
	width:90%;
	padding:30px;
}

/* ボタン動き要素① */
.line{
	display: inline-block;
	animation: hurueru .1s  infinite;
}

@keyframes hurueru{
	0% {transform: translate(0px, 0px) rotateZ(0deg)}
	25% {transform: translate(2px, 2px) rotateZ(1deg)}
	50% {transform: translate(0px, 2px) rotateZ(0deg)}
	75% {transform: translate(2px, 0px) rotateZ(-1deg)}
	100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

/* ボタン動き要素② */
.line,.a-option73,.a-btnsub73 {-webkit-animation-timing-function: ease-in;-moz-animation-timing-function: ease-in;-o-animation-timing-function: ease-in;animation-timing-function: ease-in;-moz-animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;-o-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite;animation-iteration-count: infinite;}a.a-btn {position:relative;display:inline-block;margin:auto;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}a.a-btn img {display: block;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;}img.a-main {width:100%;position:relative;z-index: 54;}@-moz-keyframes line {0%{ -moz-transform:scale(0.92);}40%{ -moz-transform:scale(0.97);}60%{ -moz-transform:scale(0.86);}80%{ -moz-transform:scale(1);}100%{ -moz-transform:scale(0.92);}}@-o-keyframes line {0%{ -o-transform:scale(0.92);}40%{ -o-transform:scale(0.97);}60%{ -o-transform:scale(0.86);}80%{ -o-transform:scale(1);}100%{ -o-transform:scale(0.92);}}@-webkit-keyframes line {0%{ -webkit-transform:scale(0.92);}40%{ -webkit-transform:scale(0.97);}60%{ -webkit-transform:scale(0.86);}80%{ -webkit-transform:scale(1);}100%{ -webkit-transform:scale(0.92);}}@keyframes line {0%{ transform:scale(0.92);}40%{ transform:scale(0.97);}60%{ transform:scale(0.86);}80%{ transform:scale(1);}100%{ transform:scale(0.92);}}.line{-webkit-animation-name: line;-moz-animation-name: line;-o-animation-name: line;animation-name: line;}

/* ボタン動き要素③ */
.a-btn73{padding-left:0%!important;}.a-option73{top:0%!important;}.a-option73{width:20%!important;}.a-btn73{max-width:100%!important;}.line,.a-btnsub73,.a-option73{animation-duration:1s!important;-webkit-animation-duration:1s;-ms-animation-duration:1s;-moz-animation-duration:1s!important;}

/* 動画の微調整 */
.movie_box{
	width:700px;
	margin: 0 auto;
	padding-top:25px;
}

.movie_box2{
	width:700px;
	height:490px;
	margin: 0 75px 50px 75px ;
	background-position: center;
	background-image : url(http://nakazononorifumi.net/wp-content/uploads/2017/09/tv.png);
	background-repeat:no-repeat;
}

/* ブログカードの設置 */
.link-box{border:1px solid #e1e1e1;padding:10px;display:flex;margin:30px}.link-box:hover{background-color:#f3f3f3;-webkit-transition:background-color .35s;transition:background-color .35s}.img-box{width:25%;float:left}.img-box div{min-height:170px;background-size:cover;background-position:center center}.text-box{width:75%;float:left;padding-left:20px;line-height:1.7;margin:0}.text-box .title{font-size:18px;font-weight:600;color:#428bca;padding:0;margin:0}.text-box .description{font-size:15px;color:#333;padding:0}@media only screen and (max-width:479px){.img-box div{min-height:80px}.text-box{margin-left:10px;line-height:1.5}.text-box .title{font-size:13px;margin:0}.text-box .description{font-size:11px;margin-top:5px}}

/* 横スクロールで画像をスライドさせる */
.image-horizontal-scroll{
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.box{
	display: inline-block;
	width: 90%;
	margin: 10px;
}

Colorful（カラフル）のご購入はこちら

世界No.1の“本物のオールインワンツール”をゾノ先生と同じように使えるビデオコース「はじめてのコンテンツ作成コース（49,700円相当）」が大人気です。30日間無料の特別招待ページをご用意しているので、下のバナーをタップして詳細をご覧ください！
こちらから確認することができます↓

最後までお読みいただき、ありがとうございます。「オールインワンWeb集客サイト完全レポート」というレポートが大人気です。ぜひご覧になってくださると嬉しいです。
こちらから受け取ることができます↓

お知らせ：厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク（テレビ会議システム）の導入をご検討の方は、ぜひどうぞ🙇‍

無料コンテンツ

• 先生2.0 〜完全在宅＆好きなことで稼ぎ毎日感謝される働き方〜
• ブログ記事テンプレート【基本構造】（無料配布）
• ３０分の無料相談会＆体験レッスン（オンライン開催）
• 【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ

有料コンテンツ

• 【１人で完結】完全在宅「リモートワークビジネス講座」
• 【ネット集客】『01blog Boot Camp』【７日間プログラム】
• 【最短１日で完成】ベース構築キット【早期的に、環境を構築しよう】
• 【１つ目の壁】ブログ100記事パートナー【４ヶ月で乗り越える】
• ブログやメディア運営を学べるオンラインスクール【初心者歓迎】

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】３０分の無料相談会＆体験レッスン（オンライン開催）に初回限定で参加できることです。

どうしても分からなかったり、１人で悩むことがあればご相談ください。

その他、ご相談＆ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

無料から学べる「01BLOG COLLEGE」に参加はお済みですか？メディア運営の基礎から応用を、順序立てて学べるオンライン学習サイトです。この機会にぜひどうぞ💁‍♂️

僕は、こんな人です

ゾノ@オンラインティーチャー
オンラインティーチャー養成講師（Kajabi特化型）・メディア運営の基礎・ヒット商品企画。『２〜３歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約510名。「オンラインで先生開業を目指すための講座」を無料配信中！

チップをいただけると、心から喜びます

無料配信【先生2.0】完全在宅＆好きなことで稼ぎ毎日感謝される働き方【無料】

人気記事【Zoom】会議などの案内メールのテンプレート【セミナー時にも使える】

ツール情報｜デザイン

• facebook
• 旧Twitter
• hatebu
• LINE
• Read Later