<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>装飾系 - コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</title>
	<atom:link href="https://copypet.jp/code_list/cp_decoration/feed/" rel="self" type="application/rss+xml" />
	<link>https://copypet.jp</link>
	<description>CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ</description>
	<lastBuildDate>Tue, 13 Aug 2024 07:14:29 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
<site xmlns="com-wordpress:feed-additions:1">140159577</site>	<item>
		<title>[装飾系]Input checkbox　チェックすると四角から丸に変わる</title>
		<link>https://copypet.jp/codedescription/2891/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 13 Aug 2024 07:14:29 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/2891/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputcheck12.gif?fit=848%2C476&ssl=1" alt="copypet.jp" /></div><p>チェックすると四角から丸に変わる チェックすると四角から丸に変わるチェックボックスです。</p>
<p>The post <a href="https://copypet.jp/codedescription/2891/">[装飾系]Input checkbox　チェックすると四角から丸に変わる</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputcheck12.gif?fit=848%2C476&ssl=1" alt="copypet.jp" /></div><h3>チェックすると四角から丸に変わる</h3>
<p>チェックすると四角から丸に変わるチェックボックスです。</p><p>The post <a href="https://copypet.jp/codedescription/2891/">[装飾系]Input checkbox　チェックすると四角から丸に変わる</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2891</post-id>	</item>
		<item>
		<title>[装飾系]Input checkbox　チェックの時にぷりんっとチェックがつく</title>
		<link>https://copypet.jp/codedescription/2886/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 13 Aug 2024 07:14:23 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/2886/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputcheck11.gif?fit=794%2C446&ssl=1" alt="copypet.jp" /></div><p>チェックの時にぷりんっとチェックがつく チェックの時にぷりんっとチェックがつくチェックボックスです。</p>
<p>The post <a href="https://copypet.jp/codedescription/2886/">[装飾系]Input checkbox　チェックの時にぷりんっとチェックがつく</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputcheck11.gif?fit=794%2C446&ssl=1" alt="copypet.jp" /></div><h3>チェックの時にぷりんっとチェックがつく</h3>
<p>チェックの時にぷりんっとチェックがつくチェックボックスです。</p><p>The post <a href="https://copypet.jp/codedescription/2886/">[装飾系]Input checkbox　チェックの時にぷりんっとチェックがつく</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2886</post-id>	</item>
		<item>
		<title>[装飾系]Input Radio　チェックすると下ににゅっと移動する</title>
		<link>https://copypet.jp/codedescription/2885/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 13 Aug 2024 07:14:00 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/2885/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputradio11.gif?fit=534%2C300&ssl=1" alt="copypet.jp" /></div><p>チェックすると下ににゅっと移動する チェックすると下ににゅっと移動するラジオボタンです。</p>
<p>The post <a href="https://copypet.jp/codedescription/2885/">[装飾系]Input Radio　チェックすると下ににゅっと移動する</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputradio11.gif?fit=534%2C300&ssl=1" alt="copypet.jp" /></div><h3>チェックすると下ににゅっと移動する</h3>
<p>チェックすると下ににゅっと移動するラジオボタンです。</p><p>The post <a href="https://copypet.jp/codedescription/2885/">[装飾系]Input Radio　チェックすると下ににゅっと移動する</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2885</post-id>	</item>
		<item>
		<title>[装飾系]Input checkbox　チェックすると波紋が広がりストップする</title>
		<link>https://copypet.jp/codedescription/773/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 13 Aug 2024 07:05:25 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/773/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputcheck10.gif?fit=704%2C396&ssl=1" alt="copypet.jp" /></div><p>チェックすると波紋が広がりストップする チェックすると波紋が広がりストップするチェックボックスです。</p>
<p>The post <a href="https://copypet.jp/codedescription/773/">[装飾系]Input checkbox　チェックすると波紋が広がりストップする</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputcheck10.gif?fit=704%2C396&ssl=1" alt="copypet.jp" /></div><h3>チェックすると波紋が広がりストップする</h3>
<p>チェックすると波紋が広がりストップするチェックボックスです。</p><p>The post <a href="https://copypet.jp/codedescription/773/">[装飾系]Input checkbox　チェックすると波紋が広がりストップする</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">773</post-id>	</item>
		<item>
		<title>[装飾系]Input Radio　チェックすると波紋が広がりストップする</title>
		<link>https://copypet.jp/codedescription/748/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 13 Aug 2024 06:27:35 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/748/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputradio10.gif?fit=858%2C482&ssl=1" alt="copypet.jp" /></div><p>チェックすると波紋が広がりストップする チェックすると波紋が広がりストップするラジオボタンです。</p>
<p>The post <a href="https://copypet.jp/codedescription/748/">[装飾系]Input Radio　チェックすると波紋が広がりストップする</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/inputradio10.gif?fit=858%2C482&ssl=1" alt="copypet.jp" /></div><h3>チェックすると波紋が広がりストップする</h3>
<p>チェックすると波紋が広がりストップするラジオボタンです。</p><p>The post <a href="https://copypet.jp/codedescription/748/">[装飾系]Input Radio　チェックすると波紋が広がりストップする</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">748</post-id>	</item>
		<item>
		<title>[装飾系]リストデザイン [clip-path]で作るカウントのデザインを葉っぱのような形に</title>
		<link>https://copypet.jp/codedescription/2837/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 30 Jul 2024 08:59:57 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/2837/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_listol3.png?fit=710%2C399&ssl=1" alt="copypet.jp" /></div><p>葉っぱのような形でカウント カウントの数字を葉っぱのような形のデザインにしたリストです。 葉っぱの形は「clip-path: inset」で指定 clip-pathは使えるようになると、いろんな形が作れるようになるので、 [&#8230;]</p>
<p>The post <a href="https://copypet.jp/codedescription/2837/">[装飾系]リストデザイン [clip-path]で作るカウントのデザインを葉っぱのような形に</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_listol3.png?fit=710%2C399&ssl=1" alt="copypet.jp" /></div><h3>葉っぱのような形でカウント</h3>
<p>カウントの数字を葉っぱのような形のデザインにしたリストです。</p>
<div class="point">
<div class="point_blk">
葉っぱの形は「clip-path: inset」で指定</p>
<p>clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。<br />
最近はジェネレータもあるので、使ってみてください。
</p></div>
</div><p>The post <a href="https://copypet.jp/codedescription/2837/">[装飾系]リストデザイン [clip-path]で作るカウントのデザインを葉っぱのような形に</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2837</post-id>	</item>
		<item>
		<title>[装飾系]リストデザイン [clip-path]で作るHOVERで矢印が出る</title>
		<link>https://copypet.jp/codedescription/2836/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 30 Jul 2024 08:48:35 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/2836/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_listol6.gif?fit=560%2C315&ssl=1" alt="copypet.jp" /></div><p>[clip-path]で作るHOVERで矢印が出る HOVERで数字の横から矢印がピョコっとでます。 吹き出しは「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形が作れるよ [&#8230;]</p>
<p>The post <a href="https://copypet.jp/codedescription/2836/">[装飾系]リストデザイン [clip-path]で作るHOVERで矢印が出る</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_listol6.gif?fit=560%2C315&ssl=1" alt="copypet.jp" /></div><h3>[clip-path]で作るHOVERで矢印が出る</h3>
<p>HOVERで数字の横から矢印がピョコっとでます。</p>
<div class="point">
<div class="point_blk">
吹き出しは「clip-path: polygon」で指定</p>
<p>clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。<br />
最近はジェネレータもあるので、使ってみてください。
</p></div>
</div><p>The post <a href="https://copypet.jp/codedescription/2836/">[装飾系]リストデザイン [clip-path]で作るHOVERで矢印が出る</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2836</post-id>	</item>
		<item>
		<title>[装飾系]リストデザイン [clip-path]で作るカウントのデザインを四角い吹き出しに</title>
		<link>https://copypet.jp/codedescription/2835/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 30 Jul 2024 08:29:55 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/2835/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_listol4.png?fit=710%2C399&ssl=1" alt="copypet.jp" /></div><p>[clip-path]で作るカウントのデザインを四角い吹き出しに カウントの数字を四角い吹き出しにデザインにしたリストです。 吹き出しは「clip-path: polygon」で指定 clip-pathは使えるようになる [&#8230;]</p>
<p>The post <a href="https://copypet.jp/codedescription/2835/">[装飾系]リストデザイン [clip-path]で作るカウントのデザインを四角い吹き出しに</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_listol4.png?fit=710%2C399&ssl=1" alt="copypet.jp" /></div><h3>[clip-path]で作るカウントのデザインを四角い吹き出しに</h3>
<p>カウントの数字を四角い吹き出しにデザインにしたリストです。</p>
<div class="point">
<div class="point_blk">
吹き出しは「clip-path: polygon」で指定</p>
<p>clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。<br />
最近はジェネレータもあるので、使ってみてください。
</p></div>
</div><p>The post <a href="https://copypet.jp/codedescription/2835/">[装飾系]リストデザイン [clip-path]で作るカウントのデザインを四角い吹き出しに</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2835</post-id>	</item>
		<item>
		<title>[装飾系]リストデザイン [clip-path]で作るカウントのデザインを吹き出しに</title>
		<link>https://copypet.jp/codedescription/2834/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Tue, 30 Jul 2024 08:23:17 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/2834/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_listol2.png?fit=710%2C399&ssl=1" alt="copypet.jp" /></div><p>[clip-path]で作る吹き出しでカウント カウントの数字を吹き出しデザインにしたリストです。 吹き出しは「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形が作れるよう [&#8230;]</p>
<p>The post <a href="https://copypet.jp/codedescription/2834/">[装飾系]リストデザイン [clip-path]で作るカウントのデザインを吹き出しに</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_listol2.png?fit=710%2C399&ssl=1" alt="copypet.jp" /></div><h3>[clip-path]で作る吹き出しでカウント</h3>
<p>カウントの数字を吹き出しデザインにしたリストです。</p>
<div class="point">
<div class="point_blk">
吹き出しは「clip-path: polygon」で指定</p>
<p>clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。<br />
最近はジェネレータもあるので、使ってみてください。
</p></div>
</div><p>The post <a href="https://copypet.jp/codedescription/2834/">[装飾系]リストデザイン [clip-path]で作るカウントのデザインを吹き出しに</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2834</post-id>	</item>
		<item>
		<title>[装飾系]リストデザイン [clip-path]で作る吹き出し付きのリスト</title>
		<link>https://copypet.jp/codedescription/2832/</link>
		
		<dc:creator><![CDATA[copypet.jp]]></dc:creator>
		<pubDate>Fri, 26 Jul 2024 15:12:17 +0000</pubDate>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">https://copypet.jp/codedescription/2832/</guid>

					<description><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_list15-1.png?fit=710%2C399&ssl=1" alt="copypet.jp" /></div><p>[clip-path]で作る吹き出し付きのリスト 擬似要素で吹き出しを作ってリストのアイコンにしています。 吹き出しは「clip-path: polygon」で指定 clip-pathは使えるようになると、いろんな形が作 [&#8230;]</p>
<p>The post <a href="https://copypet.jp/codedescription/2832/">[装飾系]リストデザイン [clip-path]で作る吹き出し付きのリスト</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></description>
										<content:encoded><![CDATA[<div><img src="https://copypet.jp/https://i0.wp.com/copypet.jp/contents/wp-content/uploads/cp_list15-1.png?fit=710%2C399&ssl=1" alt="copypet.jp" /></div><h3>[clip-path]で作る吹き出し付きのリスト</h3>
<p>擬似要素で吹き出しを作ってリストのアイコンにしています。</p>
<div class="point">
<div class="point_blk">
吹き出しは「clip-path: polygon」で指定</p>
<p>clip-pathは使えるようになると、いろんな形が作れるようになるので、便利です。<br />
最近はジェネレータもあるので、使ってみてください。
</p></div>
</div><p>The post <a href="https://copypet.jp/codedescription/2832/">[装飾系]リストデザイン [clip-path]で作る吹き出し付きのリスト</a> first appeared on <a href="https://copypet.jp">コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。</a>.</p>]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">2832</post-id>	</item>
	</channel>
</rss>
