<?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>文字列 &#8211; ケケンタの独学ITブログ</title>
	<atom:link href="https://kekenta-it-blog.com/tag/%E6%96%87%E5%AD%97%E5%88%97/feed/" rel="self" type="application/rss+xml" />
	<link>https://kekenta-it-blog.com</link>
	<description>プログラミングやWeb制作の情報を発信</description>
	<lastBuildDate>Wed, 13 Aug 2025 10:37:15 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png</url>
	<title>文字列 &#8211; ケケンタの独学ITブログ</title>
	<link>https://kekenta-it-blog.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【PHP】数字以外が入力されたら強制的に「0」にする（空白は削除）</title>
		<link>https://kekenta-it-blog.com/php-validate-numeric/</link>
					<comments>https://kekenta-it-blog.com/php-validate-numeric/#respond</comments>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Tue, 30 Jul 2024 02:27:57 +0000</pubDate>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Webアプリ]]></category>
		<category><![CDATA[全角数字]]></category>
		<category><![CDATA[半角数字]]></category>
		<category><![CDATA[文字列]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=9594</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/07/eye-catch__php-validate-numeric__9594-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>この記事では PHPで数字以外が入力されたら強制的に「0」にするソースコード をご紹介します。 【ソースコード】数字以外が入力されたら強制的に「0」にする 使用例 まとめ ご紹介したソースコードが活用できるシーンは限られ [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/07/eye-catch__php-validate-numeric__9594-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>
<p>この記事では</p>



<p class="has-text-align-center is-style-big_kakko_box"><strong>PHPで数字以外が入力されたら強制的に「0」にするソースコード</strong></p>



<p>をご紹介します。</p>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/alone-php-study/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">PHPはこうして習得した！約１年間の勉強内容【プログラミング独学】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/php-deploy-xserver-for-zip/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【PHP】エックスサーバーへデプロイする方法【初心者でも簡単！】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">【ソースコード】数字以外が入力されたら強制的に「0」にする</h2>



<div class="swell-block-capbox cap_box is-style-shadow" data-colset="col1"><div class="cap_box_ttl"><span><span data-icon="LsLightbulb" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzIgNDYuNUgxNmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTJoMTZjMS4xIDAgMiAuOSAyIDJzLS45IDItMiAyek00MS43IDE1LjlDNDEuMyAxMyA0MCAxMC4zIDM4LjIgOCAzNC41IDMuMiAyOSAuOCAyMy4xIDEgMTQgMS40IDYuNSA4LjkgNiAxOGMtLjMgNiAyLjQgMTEuNyA3LjIgMTUuNC41LjQuOC45LjggMS41djEuNmMwIDIuMiAxLjggNCA0IDRoMTJjMi4yIDAgNC0xLjggNC00VjM1YzAtLjYuMy0xLjIuOS0xLjcgNS4zLTQgOC0xMC42IDYuOC0xNy40em0tNy4xIDEuN2gtLjNjLS43IDAtMS4zLS41LTEuNS0xLjItLjctMy4yLTMuMi01LjctNi40LTYuMy0uOC0uMS0xLjQtLjktMS4yLTEuN3MuOS0xLjQgMS43LTEuMmM0LjQuOCA4IDQuMiA4LjkgOC42LjEuOC0uNCAxLjYtMS4yIDEuOHoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span><strong>ソースコードのポイント</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>空白（半角・全角スペース）　→　削除</li>



<li>全角数字　→　半角数字へ変換</li>



<li>文字列が含まれている　→　「0」（半角）に変換する</li>
</ul>
</div></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>/**
 * 数字以外が入力されたら強制的に「0」を返す
 * ■ 空白（半角・全角スペース）は削除 
 * ■ 全角数字は半角数字に変換
 */
function validateNumeric( $val ) {

	// 余計な空白を削除
	$trim_space_val = preg_replace(&quot;/( |　)/&quot;, &quot;&quot;, $val );

	// 全角数字を半角数字に変換 	
	$num = mb_convert_kana(
		$trim_space_val,
		&#39;n&#39;, 
		&#39;UTF-8&#39;
	);

	// 文字列が含まれていたら強制的に「0」に変換する 	
	if ( ! is_numeric( $num ) ) $num = 0;

	return $num;
}</code></pre></div>



<h2 class="wp-block-heading">使用例</h2>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>/*
 * ■ 使用例１
 * 全角スペースが紛れている
 */
$val = 10 . &quot;　&quot;;
echo validateNumeric( $val ); // 「10」が出力 


/*
 * ■ 使用例２
 * 全角数字が入力されている
 */
$val = １００;
echo validateNumeric( $val ); // 「100」が出力（半角数字に変換される）


/*
 * ■ 使用例３
 * 文字列が入力されている
 */
$val = &quot;10歳&quot;;
echo validateNumeric( $val ); // 「0」が出力（強制的に「0」に変換される）
</code></pre></div>



<h2 class="wp-block-heading">まとめ</h2>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>簡単ですが以上になります！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>ご紹介したソースコードが活用できるシーンは限られてくるかと思いますが、コピペOKですのでぜひご利用ください。</p>



<p>それでは、また別の記事でお会いできるのを楽しみにしております。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://kekenta-it-blog.com/php-validate-numeric/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>特定の文字列が含まれてるか簡単に判定する方法【JS/jQuery】</title>
		<link>https://kekenta-it-blog.com/jq-string-inc-easy-check/</link>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Wed, 20 Mar 2024 23:21:05 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web制作]]></category>
		<category><![CDATA[文字列]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=3628</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2023/11/eye-catch__jq-string-inc-easy-check__3628-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>この記事ではjQueryを用いて、ある文字列内に特定の文字列が含まれているかどうかを簡単に判定する方法をご紹介します。   あわせて読みたい 【結論】indexOfメソッドを使用する いきなり結論ですが、indexOfメ [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2023/11/eye-catch__jq-string-inc-easy-check__3628-1024x576.jpg" class="webfeedsFeaturedVisual" /></p><div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>こんにちは！　ケケンタです。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>この記事ではjQueryを用いて、<strong><span class="marker-under"><span class="swl-marker mark_yellow">ある文字列内に特定の文字列が含まれているかどうかを簡単に判定する方法</span></span></strong>をご紹介します。</p>



<p class="is-style-balloon_box"><span data-icon="LsLightbulb" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzIgNDYuNUgxNmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTJoMTZjMS4xIDAgMiAuOSAyIDJzLS45IDItMiAyek00MS43IDE1LjlDNDEuMyAxMyA0MCAxMC4zIDM4LjIgOCAzNC41IDMuMiAyOSAuOCAyMy4xIDEgMTQgMS40IDYuNSA4LjkgNiAxOGMtLjMgNiAyLjQgMTEuNyA3LjIgMTUuNC41LjQuOC45LjggMS41djEuNmMwIDIuMiAxLjggNCA0IDRoMTJjMi4yIDAgNC0xLjggNC00VjM1YzAtLjYuMy0xLjIuOS0xLjcgNS4zLTQgOC0xMC42IDYuOC0xNy40em0tNy4xIDEuN2gtLjNjLS43IDAtMS4zLS41LTEuNS0xLjItLjctMy4yLTMuMi01LjctNi40LTYuMy0uOC0uMS0xLjQtLjktMS4yLTEuN3MuOS0xLjQgMS43LTEuMmM0LjQuOCA4IDQuMiA4LjkgOC42LjEuOC0uNCAxLjYtMS4yIDEuOHoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span> <strong>あわせて読みたい</strong></p>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/js-now-datetime-format/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【Javascript】今日の日付や現在日時を取得してフォーマットを変換する</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/splide-thumbnail-slider/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/web-production-tab/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">【結論】indexOfメソッドを使用する</h2>



<p>いきなり結論ですが、<strong>indexOfメソッド</strong>を使用することで簡単に文字列が含まれているかを判定することが可能です。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>if (&quot;文字列&quot;.indexOf(&quot;検索文字&quot;) &gt;= 0) {
  // 「検索文字」が「文字列」に含まれていた場合の処理
} else {
  // 含まれていなかった場合の処理
}</code></pre></div>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">解説</h2>



<p>indexOfメソッドは、文字列内において<strong><span class="marker-under"><span class="swl-marker mark_yellow">特定の文字列が何番目に出現するか</span></span></strong>を算出してくれる関数です。</p>



<p>反対に、<strong><span class="marker-under">文字列が含まれていない場合は「-1」が返ってきます。</span></strong></p>


<div class="wp-block-image">
<figure data-wp-context="{&quot;imageId&quot;:&quot;69f31d0855cb3&quot;}" data-wp-interactive="core/image" data-wp-key="69f31d0855cb3" class="aligncenter size-large is-resized has-custom-border wp-lightbox-container"><img decoding="async" width="1024" height="384" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on--click="actions.showLightbox" data-wp-on--load="callbacks.setButtonStyles" data-wp-on-window--resize="callbacks.setButtonStyles" src="https://kekenta-it-blog.com/wp-content/uploads/2024/03/string-check-indexOf-1024x384.jpg" alt="" class="has-border-color has-black-border-color wp-image-3639" style="border-width:1px;width:628px;height:auto" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/03/string-check-indexOf-1024x384.jpg 1024w, https://kekenta-it-blog.com/wp-content/uploads/2024/03/string-check-indexOf-300x112.jpg 300w, https://kekenta-it-blog.com/wp-content/uploads/2024/03/string-check-indexOf-768x288.jpg 768w, https://kekenta-it-blog.com/wp-content/uploads/2024/03/string-check-indexOf-1536x575.jpg 1536w, https://kekenta-it-blog.com/wp-content/uploads/2024/03/string-check-indexOf.jpg 1706w" sizes="(max-width: 1024px) 100vw, 1024px" /><button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			aria-label="拡大する"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on--click="actions.showLightbox"
			data-wp-style--right="state.imageButtonRight"
			data-wp-style--top="state.imageButtonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button></figure>
</div>


<p>つまり、上記コードのように「&#8221;文字列&#8221;.indexOf(&#8220;検索文字&#8221;) &gt;= 0」とすることで、文字列が含まれているかどうかを<strong>簡単に判定</strong>することが可能というわけです。</p>



<h2 class="wp-block-heading">まとめ</h2>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上が<strong><span class="swl-marker mark_yellow">文字列の中に特定の文字列が含まれているかどうかを簡単に判定する方法</span></strong>でした！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>この方法なら、検索したい文字列が一意のものと確定していれば面倒な文字列切り出しなどもしなくて済みます。</p>



<p>上手く活用して効率よくコーディングしていきましょう。</p>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__to-top-btn-js__8900-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/to-top-btn-js/">【コピペOK】ページトップへ戻るボタン【jQuery未使用】</a>
						<span class="p-blogCard__excerpt">Web制作をしていると実装を求められることがある「ページトップへ戻るボタン」 今回はそのソースコードをコピペ可能な形で丸っとご紹介します。   この記事で紹介する「&#8230;</span>					</div>
				</div>
			</div>
		</div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">関連記事 &#8211; アニメーション &#8211;</h2>


<div class="p-blogParts post_content" data-partsID="15846">
<h3 class="wp-block-heading">基本的なアニメーション</h3>



<ul class="swell-block-linkList is-style-button" style="--the-fz:1em;--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/fade-in-animations-complete-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">フェードイン系アニメーション完全ガイド｜6種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/countup-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">カウントアップアニメーション完全ガイド｜3種類</span></a></li>
</ul>



<h3 class="wp-block-heading">スクロール系</h3>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/parallax-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">パララックス系アニメーション完全ガイド｜4種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/parallax-scale-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">パララックス系スケールアニメーション完全ガイド｜5種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/horizontal-scroll-animations-gsap/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">横スクロール・スライドアニメーション完全ガイド【GSAP実装】</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/sticky-scroll-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">固定表示・スティッキーアニメーション完全ガイド｜3種類の実装方法</span></a></li>
</ul>



<h3 class="wp-block-heading">メニュー・タブ・ナビゲーション</h3>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/dropdown-menu-display-animations/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">ドロップダウンメニュー表示アニメーション完全ガイド｜7種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/hamburger-menu-slide-animation-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">ハンバーガーメニューのスライドアニメーション完全ガイド｜5種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/side-menu-display-animations/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">サイドメニュー表示アニメーション完全ガイド｜5種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/tab-switching-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">タブ切り替えアニメーション完全ガイド｜6種類</span></a></li>
</ul>



<p class="has-text-align-center u-mb-ctrl u-mb-0"><strong><span class="swl-fz u-fz-s">＼</span></strong><strong><span class="swl-fz u-fz-s">どれを読むか迷ったときのおすすめ‼／</span></strong></p>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/menu-animations-complete-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">【完全版】メニューアニメーション完全ガイド｜8カテゴリ・40種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/navigation-tab-animations-complete-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">【完全版】ナビゲーションタブアニメーション完全ガイド｜5カテゴリ・26種類</span></a></li>
</ul>



<h3 class="wp-block-heading">フォーム・UI要素</h3>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/card-item-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">カード・アイテム系アニメーション完全ガイド｜5種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/validation-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">バリデーションアニメーション完全ガイド｜6種類</span></a></li>
</ul>



<p class="has-text-align-center u-mb-ctrl u-mb-0"><strong><span class="swl-fz u-fz-s">＼</span></strong><strong><span class="swl-fz u-fz-s">どれを読むか迷ったときのおすすめ‼／</span></strong></p>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/form-input-animations-complete-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">【完全版】フォーム・入力アニメーション完全ガイド｜4カテゴリ・22種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/progress-step-animations-complete-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">【完全版】プログレス・ローディングアニメーション完全ガイド｜4カテゴリ・20種類を網羅</span></a></li>
</ul>



<h3 class="wp-block-heading">ボタン・アイコン</h3>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main);--the-radius:100px">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/button-link-hover-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">ボタン・リンク系アニメーション完全ガイド｜7種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/advanced-css-button-hover-animations/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">CSSのみで作る高度なボタンホバーアニメーション完全ガイド｜6種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/three-d-icon-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">3Dアイコンアニメーション完全ガイド｜5種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/icon-click-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">アイコンクリックアニメーション完全ガイド｜5種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/icon-loading-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">アイコンローディングアニメーション完全ガイド｜5種類</span></a></li>
</ul>



<p class="has-text-align-center u-mb-ctrl u-mb-0"><strong><span class="swl-fz u-fz-s">＼</span></strong><strong><span class="swl-fz u-fz-s">どれを読むか迷ったときのおすすめ‼／</span></strong></p>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main);--the-radius:100px">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/button-hover-animations-complete-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">【完全版】ボタンホバーアニメーション完全ガイド｜8カテゴリ・53種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/icon-symbol-animations-complete-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">【完全版】アイコンアニメーション完全ガイド｜5カテゴリ・26種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/web-button-design-collection/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">Webデザインで使えるボタン100選｜用途別完全ガイド</span></a></li>
</ul>



<h3 class="wp-block-heading">テキスト</h3>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main);--the-radius:100px">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/typewriter-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">タイプライターアニメーション完全ガイド｜6種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/text-fade-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">テキストフェードアニメーション完全ガイド｜5種類</span></a></li>



<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/three-d-text-animations-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">3Dテキストアニメーション完全ガイド｜5種類</span></a></li>
</ul>



<p class="has-text-align-center u-mb-ctrl u-mb-0"><strong><span class="swl-fz u-fz-s">＼</span></strong><strong><span class="swl-fz u-fz-s">どれを読むか迷ったときのおすすめ‼／</span></strong></p>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/text-typography-animations-complete-guide/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類</span></a></li>
</ul>



<h3 class="wp-block-heading">スライダー</h3>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/splide-thumbnail-slider/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】</span></a></li>
</ul>



<h3 class="wp-block-heading">特殊効果</h3>



<ul class="swell-block-linkList is-style-button" style="--the-color:var(--color_main)">
<li class="swell-block-linkList__item"><a class="swell-block-linkList__link" href="https://kekenta-it-blog.com/background-animation-guide-particle-effects/"><svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-arrowCircleRight swell-block-linkList__icon -right" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M24 45C12.4 45 3 35.6 3 24S12.4 3 24 3s21 9.4 21 21-9.4 21-21 21zm0-39C14.1 6 6 14.1 6 24s8.1 18 18 18 18-8.1 18-18S33.9 6 24 6z" /><path d="m34.3 22.9-8.8-8.8c-.6-.6-1.5-.6-2.1 0s-.6 1.5 0 2.1l6.3 6.3H14.8c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h14.8l-6.3 6.3c-.6.6-.6 1.5 0 2.1s1.5.6 2.1 0l8.8-8.8c.7-.6.7-1.6.1-2.2z" /></svg><span class="swell-block-linkList__text">背景アニメーション完全ガイド｜5種類</span></a></li>
</ul>
</div>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
