<?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>usability | Web活メモ帳</title>
	<atom:link href="https://blog.verygoodtown.com/tag/usability/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.verygoodtown.com</link>
	<description>WEB開発者が使える世界の情報を発信します</description>
	<lastBuildDate>Tue, 26 Jan 2010 12:03:40 +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とCSSでユーザビリティーを向上させる15の方法</title>
		<link>https://blog.verygoodtown.com/2010/01/jquery-and-css-usability-up-15-way/</link>
					<comments>https://blog.verygoodtown.com/2010/01/jquery-and-css-usability-up-15-way/#respond</comments>
		
		<dc:creator><![CDATA[linja]]></dc:creator>
		<pubDate>Mon, 25 Jan 2010 03:04:02 +0000</pubDate>
				<category><![CDATA[WEB製作全般]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[usability]]></category>
		<guid isPermaLink="false">http://blog.verygoodtown.com/?p=1100</guid>

					<description><![CDATA[<p>jQueyとCSSでユーザーのインターフェイスを改善し、より使いやすいWEBページを作ろうという15 Ways to Improve CSS Techniques Using jQueryというエントリーを見つけたのでご [&#8230;]</p>
The post <a href="https://blog.verygoodtown.com/2010/01/jquery-and-css-usability-up-15-way/">jQueryとCSSでユーザビリティーを向上させる15の方法</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_radio_checkbox.jpg" alt="jquery_radio_checkbox" title="jquery_radio_checkbox" width="600" height="158" class="alignnone size-full wp-image-1101" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/jquery_radio_checkbox.jpg 600w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/jquery_radio_checkbox-300x79.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /><br />
jQueyとCSSでユーザーのインターフェイスを改善し、より使いやすいWEBページを作ろうという<a href="http://webdeveloperplus.com/css/15-ways-to-improve-css-techniques-using-jquery/" target="_blank">15 Ways to Improve CSS Techniques Using jQuery</a>というエントリーを見つけたのでご紹介。</p>
<p>フォームのデザイン変更や、ブロック要素の指定方法をjQueryで行う方法がまとめられていますので、いくつかご紹介。</p>
<p>詳しくは以下</p>
<p><span id="more-1100"></span></p>
<h3>ラジオボタンとチェックボックスのデザインを変更する</h3>
<p><a href="http://www.filamentgroup.com/examples/customInput/" target="_blank"><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/mv7_bor.jpg" alt="jquery_radio_checkbox" title="jquery_radio_checkbox" width="462" height="339" class="alignnone size-full wp-image-1102" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/mv7_bor.jpg 462w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/mv7_bor-300x220.jpg 300w" sizes="(max-width: 462px) 100vw, 462px" /></a></p>
<p><a href="http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/" target="_blank"><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/bqs_bor1.jpg" alt="jQuery_radio checkbox" title="jQuery_radio checkbox" width="600" height="158" class="alignnone size-full wp-image-1103" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/bqs_bor1.jpg 600w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/bqs_bor1-300x79.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
ラジオボタンとチェックボックスのデザイン変更。cssや画像ファイルをいじればもっと自分好みに変更可能です。</p>
<h3>divの高さを揃える</h3>
<p><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/heights-width-jquery.jpg" alt="heights width jquery" title="heights width jquery" width="589" height="334" class="alignnone size-full wp-image-1104" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/heights-width-jquery.jpg 589w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/heights-width-jquery-300x170.jpg 300w" sizes="(max-width: 589px) 100vw, 589px" /><br />
複数コンテンツをdivでくくって横一列に表示する場合に高さがバラバラだと下層のコンテンツの開始位置もバラバラになってしまいますが、それを修正するプラグインの紹介。</p>
<h3>Select要素をカスタムする</h3>
<p><a href="http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/" target="_blank"><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/jquery_ui.jpg" alt="jquery_ui" title="jquery_ui" width="600" height="415" class="alignnone size-full wp-image-1107" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/jquery_ui.jpg 600w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/jquery_ui-300x207.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>jQuery uiを使用してセレクトボックスをカスタイズする方法です。</p>
<p><a href="http://marghoobsuleman.com/mywork/jcomponents/image-dropdown/jquery-image-dropdown-2.1/index.html" target="_blank"><img loading="lazy" src="https://blog.verygoodtown.com/wordpress/wp-content/uploads/image_dropdown.jpg" alt="image_dropdown" title="image_dropdown" width="516" height="155" class="alignnone size-full wp-image-1108" srcset="https://blog.verygoodtown.com/wordpress/wp-content/uploads/image_dropdown.jpg 516w, https://blog.verygoodtown.com/wordpress/wp-content/uploads/image_dropdown-300x90.jpg 300w" sizes="(max-width: 516px) 100vw, 516px" /></a><br />
こちらもセレクトボックスをカスタムします。</p>
<p>サイトには他にもカスタム情報があるので、ぜひチェックしてみてください。</p>The post <a href="https://blog.verygoodtown.com/2010/01/jquery-and-css-usability-up-15-way/">jQueryとCSSでユーザビリティーを向上させる15の方法</a> first appeared on <a href="https://blog.verygoodtown.com">Web活メモ帳</a>.]]></content:encoded>
					
					<wfw:commentRss>https://blog.verygoodtown.com/2010/01/jquery-and-css-usability-up-15-way/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1100</post-id>	</item>
	</channel>
</rss>
