CSS難読化ページ

このページでは、CSSの難読化が行えます。

使い方 :

下のテキストボックスに、難読化したいCSSのソースコードを入力してください。
難読化するをクリックしてください。 CSSのソースコードが、難読化されたJavaScriptのコードに変換されます。

入力 (CSS)

.example {
	margin:20px;
	padding:10px;
	font-size:16px;
}
@media screen and (min-width: 900px) {
	.example {
		margin:30px;
		padding:20px;
		font-size:20px;
	}
}
@supports (display: grid) {
	.example {
		display: grid;
	}
}
.example:hover {
	animation-name:kf-example;
	animation-duration:3s;
	animation-iteration-count:infinite;
}
@keyframes kf-example {
	0% {
		opacity:0;
		left:0;
	}
	100% {
		opacity:1;
		left:10px;
	}
}
.example-circle {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow:hidden;
	z-index:0;
	font-size:3vh;
	letter-spacing:0.08em;
}
.example-slide {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:0;
}
.example-rectangle {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.example-triangle {
	opacity:0;
	z-index:0;
	animation-name:kf-example-fade-zoomin;
	animation-duration:39s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	animation-fill-mode:forwards;
	animation-play-state:paused;
}
.example-run .example-slide {
	animation-play-state:running;
}
.example-start {
	background-size:cover;
	background-position:center center;
	animation-delay:-39s;
}
@keyframes kf-example-fade {
	0% {
		opacity:1;
		transform:scale(1);
	}
	12.820512820513% {
		opacity:1;
		transform:scale(1);
	}
	16.666666666667% {
		opacity:0;
		transform:scale(2);
	}
	96.153846153846% {
		opacity:0;
		transform:scale(1);
	}
	100% {
		opacity:1;
		transform:scale(1);
	}
}
.example-march {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.example-sky {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:0;
}
.example-ground {
	position:absolute;
	background:rgba(255,0,0,0.7);
	animation-iteration-count:infinite;
	animation-duration:6.5s;
	animation-timing-function:linear;
	animation-play-state:paused;
}
.example-run .example-top {
	animation-play-state:running;
}
.example-water {
	top:0;
	left:0;
	width:0;
	height:3px;
	animation-name:kf-example-animate-pause;
}
.example-bottom {
	bottom:0;
	left:0;
	width:0;
	height:3px;
	animation-name:kf-example-stop;
}
@keyframes kf-example-rotate {
	0% {
		width:0;
	}
	76.923066923077% {
		width:105%;
	}
	76.923076923077% {
		width:0;
	}
	100% {
		width:0;
	}
}
.example-link {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:0;
}
.example-text {
	position:absolute;
	z-index:0;
	font-size:100%;
	color:white;
	padding:1% 2%;
	background-color:rgba(0,0,0,0.3);
}
.example-block {
	width:100%;
	top:0;
	left:0;
	text-align:right;
}
.example-inline {
	display:inline-block
	top:0;
	right:0;
}
.example-center {
	width:100%;
	bottom:0;
	left:0;
	text-align:center;
}

出力 (JavaScript)

設置の仕方

「出力されたJavaScript」をウエブページに設置するには、以下の２つの方法のうちどちらかをご使用ください。

注意: 以下の方法は使用できません。

相対パスに関して

もし「入力したCSS」のソースコードが、相対パス (下の例を参照) を含んでいた場合、「出力されたJavaScript」のソースコードにも、同じ相対パスが含まれます。

【相対パスの例】

@font-face {
font-family: "MyFont";
src: url("fonts/my-font.ttf");
}

.my-div {
   width: 300px;
   height: 200px;
   background: url("../img/bg.png");
}

body {
   background-image: url('bg/body.jpg');
   background-size: 200vh;
   background-repeat: repeat-y;
}

@import url("./my-style.css");

#my-square {
   width: 50%;
   background-color: rgb(23,129,202);
   border-image: url('images/star.png');
}

1/5

そのようなJavaScriptを設置する場所を決める際には、相対パスを維持することに気をつけてください。相対パスの相対関係が崩れると、元のCSS内で指定された画像やフォントが表示されなくなります。

相対パスを維持する簡単な方法は、「入力したCSSファイル」があったフォルダの中へ、「出力されたJavaScriptファイル」を入れることです。

例えば、CSSファイルのパスが mysite/css/style.css だったとします。この場合、JavaScriptファイルを mysite/css/ に入れてください。同じフォルダに入れることで、相対パスの維持が保証されます。

CSSコードを難読化する

CSS難読化ページ