<?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/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>font-size | Web活メモ帳</title>
	<atom:link href="https://blog.verygoodtown.com/tag/font-size/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.verygoodtown.com</link>
	<description>WEB開発者が使える世界の情報を発信します</description>
	<lastBuildDate>Sat, 06 Feb 2010 20:01:21 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.9.10</generator>
<site xmlns="com-wordpress:feed-additions:1">122803348</site>	<item>
		<title>jQueryを使用してフォントサイズを切り替える方法</title>
		<link>https://blog.verygoodtown.com/2010/02/jquery-font-size-switch/</link>
					<comments>https://blog.verygoodtown.com/2010/02/jquery-font-size-switch/#respond</comments>
		
		<dc:creator><![CDATA[linja]]></dc:creator>
		<pubDate>Sat, 06 Feb 2010 20:01:21 +0000</pubDate>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[font-size]]></category>
		<category><![CDATA[jquery]]></category>
		<guid isPermaLink="false">http://blog.verygoodtown.com/?p=1885</guid>

					<description><![CDATA[<p>最近のWEBサイトでは、よくフォントサイズの切り替えを行うスクリプトがありますが、あれをjQueryだけで実装するエントリーHow to increase and decrease the font-size of co [&#8230;]</p>
The post <a href="https://blog.verygoodtown.com/2010/02/jquery-font-size-switch/">jQueryを使用してフォントサイズを切り替える方法</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/jquery.png" alt="jquery" title="jquery" width="335" height="95" class="alignnone size-full wp-image-1890" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/jquery.png 335w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/jquery-300x85.png 300w" sizes="(max-width: 335px) 100vw, 335px" /><br />
最近のWEBサイトでは、よくフォントサイズの切り替えを行うスクリプトがありますが、あれをjQueryだけで実装するエントリー<a href="http://www.developersnippets.com/2010/02/06/how-to-increase-and-decrease-the-font-size-of-content-present-in-a-div-container-using-jquery/" target="_blank">How to increase and decrease the font-size of content present in a div container using jQuery</a>のご紹介。</p>
<p><span id="more-1885"></span></p>
<p>よくCSSを切り替えるタイプのがありましたが、あれだとCSSを複数用意しなければいけないためフォントサイズだけ切り替えるには少し大仰でした。</p>
<p>以下のようなコードで自由にフォントサイズの範囲を設定することが可能になっています。</p>
<pre class="brush:js;">
&lt;script&gt;
//最小フォントサイズ
var minValue=13;

//最大フォントサイズ
var maxValue=16;

$(document).ready(function(){
        //フォントサイズを制御したい要素をここで指定する
	var ChildElements=$('.font_size_change_container *');

    //クリックでフォントサイズを大きくする要素を指定
    $("#inc_font").click(function(){
		var fontSizeNew=parseInt(($('.font_size_change_container *').css("font-size")).replace(/px/,""));
		if(fontSizeNew!=maxValue){fontSizeNew += 1;}
		ChildElements.css("font-size",fontSizeNew+"px");
    });

    //クリックでフォントサイズを小さくする要素を指定
    $("#dec_font").click(function(){
		var fontSizeNew=parseInt(($('.font_size_change_container *').css("font-size")).replace(/px/,""));
		if(fontSizeNew!=minValue){fontSizeNew -= 1;}
		ChildElements.css("font-size",fontSizeNew+"px");
    });
});
&lt;/script&gt;
</pre>
<p>元記事には<a href="http://www.developersnippets.com/snippets/jquery/inc_dec_fontsize/inc_dec_fontsize.html" target="_blank">デモ</a>があるので実際の動作を確認する事が可能になっています。<br />
jQuery単体でこんなに簡単に実装できたんですね。いつか使うかもしれないのでメモ。</p>The post <a href="https://blog.verygoodtown.com/2010/02/jquery-font-size-switch/">jQueryを使用してフォントサイズを切り替える方法</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></content:encoded>
					
					<wfw:commentRss>https://blog.verygoodtown.com/2010/02/jquery-font-size-switch/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1885</post-id>	</item>
	</channel>
</rss>
