<?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>ひろぽっぽれす &#187; (X)HTML</title>
	<atom:link href="http://hiropo.co.uk/archives/category/xhtml/feed" rel="self" type="application/rss+xml" />
	<link>http://hiropo.co.uk</link>
	<description>Web系エンジニアの適当なブログです。どうでも酔いものばかり作ってます。</description>
	<lastBuildDate>Sun, 25 Jul 2010 17:09:15 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>気になっちゃうシリーズ。 &#8211; youtube編</title>
		<link>http://hiropo.co.uk/archives/55</link>
		<comments>http://hiropo.co.uk/archives/55#comments</comments>
		<pubDate>Wed, 10 Dec 2008 17:05:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[(X)HTML]]></category>
		<category><![CDATA[(X)HTML+CSS]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[気になっちゃう]]></category>

		<guid isPermaLink="false">http://hiropo.co.uk/?p=55</guid>
		<description><![CDATA[↑の画像の「チャンネル登録」をクリックすると・・・、 はい崩れた！今クリックしたら崩れたよ！！]]></description>
			<content:encoded><![CDATA[<p><a href="http://hiropo.co.uk/wp-content/uploads/2008/12/a.jpg"><img class="alignnone size-medium wp-image-56" title="びふぉあ" src="http://hiropo.co.uk/wp-content/uploads/2008/12/a-300x196.jpg" alt="" width="300" height="196" /></a></p>
<p>↑の画像の「チャンネル登録」をクリックすると・・・、</p>
<p><a href="http://hiropo.co.uk/wp-content/uploads/2008/12/e784a1e9a18c.jpg"><img class="alignnone size-medium wp-image-57" title="あふたぁ" src="http://hiropo.co.uk/wp-content/uploads/2008/12/e784a1e9a18c-300x241.jpg" alt="" width="300" height="241" /></a></p>
<p>はい崩れた！今クリックしたら崩れたよ！！</p>
]]></content:encoded>
			<wfw:commentRss>http://hiropo.co.uk/archives/55/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>定義済みリスト</title>
		<link>http://hiropo.co.uk/archives/25</link>
		<comments>http://hiropo.co.uk/archives/25#comments</comments>
		<pubDate>Tue, 22 Jan 2008 01:32:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[(X)HTML]]></category>

		<guid isPermaLink="false">http://hiropo.co.uk/archives/25</guid>
		<description><![CDATA[さて問題です。 定義済みリスト（&#60;dl&#62; &#60;dt&#62; &#60;dd&#62;）は、ブロック要素でしょうか、それともインライン要素でしょうか。 答えは両方です。 たいていはブロック要素という答えが返ってきますｗ どういうことかというと、 &#60;dt&#62;部分がインライン要素で、 &#60;dd&#62;部分がブロック要素になのです。昔のテーブルレイアウトと違って、定義済みリストを使ってフォームレイアウトを組むのが主流になってきた近頃のweb標準では、慣れない人なんかだと、&#60;dt&#62;内で、マークアップが間違ってることが多々見受けられます。&#60;dd&#62;部では&#60;p&#62;要素はOKですが、&#60;dt&#62;部ではインライン要素の中にブロック要素が入るのはNGです。 &#60;p&#62;要素ではなく&#60;span&#62;要素を使うのが正解になります。 テーブルレイアウトからweb標準が段々とスタンダードになりつつある現在ですが、ブロック要素とインライン要素の違いについてきちんと理解できている人はまだな感じが。（そんな僕もまだな感じで…。）]]></description>
			<content:encoded><![CDATA[<p>さて問題です。<br />
定義済みリスト（&lt;dl&gt; &lt;dt&gt; &lt;dd&gt;）は、ブロック要素でしょうか、それともインライン要素でしょうか。</p>
<p>答えは両方です。<br />
たいていはブロック要素という答えが返ってきますｗ</p>
<p>どういうことかというと、 &lt;dt&gt;部分がインライン要素で、  &lt;dd&gt;部分がブロック要素になのです。昔のテーブルレイアウトと違って、定義済みリストを使ってフォームレイアウトを組むのが主流になってきた近頃のweb標準では、慣れない人なんかだと、&lt;dt&gt;内で、マークアップが間違ってることが多々見受けられます。&lt;dd&gt;部では&lt;p&gt;要素はOKですが、&lt;dt&gt;部ではインライン要素の中にブロック要素が入るのはNGです。</p>
<p>&lt;p&gt;要素ではなく&lt;span&gt;要素を使うのが正解になります。</p>
<p>テーブルレイアウトからweb標準が段々とスタンダードになりつつある現在ですが、ブロック要素とインライン要素の違いについてきちんと理解できている人はまだな感じが。（そんな僕もまだな感じで…。）</p>
]]></content:encoded>
			<wfw:commentRss>http://hiropo.co.uk/archives/25/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>mixi wordpress テーマ ver.0.0.4（バグ取り完了っぽい）</title>
		<link>http://hiropo.co.uk/archives/18</link>
		<comments>http://hiropo.co.uk/archives/18#comments</comments>
		<pubDate>Fri, 21 Dec 2007 17:45:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[(X)HTML]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[ｦﾁらせ]]></category>

		<guid isPermaLink="false">http://hiropo.co.uk/archives/18</guid>
		<description><![CDATA[僕が作ってるwordpress用のmixiっぽいテンプレートですが、最後のバグ取り（Safariでカレンダーのボーダーが正しく表示されない）が完了しました。 safariって、Web標準に一番近い挙動で動くブラウザですが、これが結構対応がわかんなかった。 厳格なのか何なのかわかんないんですが、tableのwidthが178pxなのに、captionのwidthが180pxになっていたので、caption分がtableの枠からはみ出して、 右ボーダーを正しく表示できてなかったようです。サイズ揃えたら、いとも簡単に表示されたお（´ω`） そんな、最新版のmixi風wordpressテンプレートのダウンロードはこちら]]></description>
			<content:encoded><![CDATA[<p>僕が作ってるwordpress用のmixiっぽいテンプレートですが、最後のバグ取り（Safariでカレンダーのボーダーが正しく表示されない）が完了しました。</p>
<p>safariって、Web標準に一番近い挙動で動くブラウザですが、これが結構対応がわかんなかった。</p>
<p>厳格なのか何なのかわかんないんですが、tableのwidthが178pxなのに、captionのwidthが180pxになっていたので、caption分がtableの枠からはみ出して、 右ボーダーを正しく表示できてなかったようです。サイズ揃えたら、いとも簡単に表示されたお（´ω`）</p>
<p>そんな、最新版の<strong><a href="http://www.ikepo.com/" title="mixi風wordpressテーマ">mixi風wordpressテンプレートのダウンロードはこちら</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://hiropo.co.uk/archives/18/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>デザインちょっちリニューアル</title>
		<link>http://hiropo.co.uk/archives/17</link>
		<comments>http://hiropo.co.uk/archives/17#comments</comments>
		<pubDate>Thu, 20 Dec 2007 08:38:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[(X)HTML]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[ｦﾁらせ]]></category>

		<guid isPermaLink="false">http://hiropo.co.uk/archives/17</guid>
		<description><![CDATA[ひろぽっぽれすのデザインをちょっちいじりました。ヘッダー部分をもちっといじっていこうと思います。]]></description>
			<content:encoded><![CDATA[<p>ひろぽっぽれすのデザインをちょっちいじりました。ヘッダー部分をもちっといじっていこうと思います。</p>
]]></content:encoded>
			<wfw:commentRss>http://hiropo.co.uk/archives/17/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS画像置換について</title>
		<link>http://hiropo.co.uk/archives/16</link>
		<comments>http://hiropo.co.uk/archives/16#comments</comments>
		<pubDate>Thu, 20 Dec 2007 06:58:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[(X)HTML]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://hiropo.co.uk/archives/16</guid>
		<description><![CDATA[こんちゃす。海外のCSSデザインを見ていたら、text-indent: -9999px; とは違う画像置換方法を見つけました。（既出かも） 旧式では、CSS側で、text-indent: -9999px; などと指定して、テキストを飛ばして、バックグラウンドに画像を指定する下記のようなテクニックを使います。 text-indent: -9999px を使ったテクニック PLAIN TEXT HTML: &#60;div&#62;&#60;a href="#"&#62;&#60;span&#62;テキスト&#60;/span&#62;&#60;/a&#62;&#60;/div&#62; PLAIN TEXT CSS: div a &#123; &#160; &#160; display: block; &#160; &#160; width: 45px; &#160; &#160; height: 45px; &#160; &#160; background: url&#40;images/bg_off.gif&#41; no-repeat 0 0; &#160; &#160; &#60;strong style="color: #ff0000"&#62;text-indent: -9999px; /*ここでテキストを飛ばす*/&#60;/strong&#62; &#125; div a:hover &#123; &#160; &#160; background: url&#40;images/bg_on.gif&#41; no-repeat [...]]]></description>
			<content:encoded><![CDATA[<p>こんちゃす。海外のCSSデザインを見ていたら、text-indent: -9999px; とは違う画像置換方法を見つけました。（既出かも）</p>
<p>旧式では、CSS側で、text-indent: -9999px; などと指定して、テキストを飛ばして、バックグラウンドに画像を指定する下記のようなテクニックを使います。</p>
<p><strong>text-indent: -9999px を使ったテクニック</strong></p>
<div class="igBar"><span id="lhtml-5"><a href="#" onclick="javascript:showCodeTxt('html-5'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-5">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span&gt;</span></a></span>テキスト<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<div class="igBar"><span id="lcss-6"><a href="#" onclick="javascript:showCodeTxt('css-6'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-6">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div a <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span>: <span style="color: #993333;">block</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>: 45px;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>: 45px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/bg_off.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;color:#800000;">0</span> <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &lt;strong style=<span style="color: #ff0000;">"color: #ff0000"</span>&gt;text-indent: -9999px; <span style="color: #808080; font-style: italic;">/*ここでテキストを飛ばす*/</span>&lt;/strong&gt;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div a<span style="color: #3333ff;">:hover </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/bg_on.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;color:#800000;">0</span> <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>しかし、これでは、キーボードでのタブ移動の際に選択がわかりにくくなって、アクセシビリティ的によくないとのことから、display: none; を使った画像置換テクニックもあります。</p>
<p><strong>display: none; を使った画像置換テクニック</strong></p>
<div class="igBar"><span id="lhtml-7"><a href="#" onclick="javascript:showCodeTxt('html-7'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-7">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/span.html"><span style="color: #000000; font-weight: bold;">&lt;span&gt;</span></a></span>テキスト<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/span&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<div class="igBar"><span id="lcss-8"><a href="#" onclick="javascript:showCodeTxt('css-8'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-8">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div a <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span>: <span style="color: #993333;">block</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>: 45px;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>: 45px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/bg_off.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;color:#800000;">0</span> <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div a<span style="color: #3333ff;">:hover </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>: <span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/bg_on.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;color:#800000;">0</span> <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">div span <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span>: <span style="color: #993333;">none</span>; <span style="color: #808080; font-style: italic;">/*テキストを表示させない。*/</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://hiropo.co.uk/archives/16/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>自動改行されない</title>
		<link>http://hiropo.co.uk/archives/14</link>
		<comments>http://hiropo.co.uk/archives/14#comments</comments>
		<pubDate>Tue, 18 Dec 2007 09:06:05 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[(X)HTML]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[バグ]]></category>

		<guid isPermaLink="false">http://hiropo.co.uk/archives/14</guid>
		<description><![CDATA[FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字（長いURLや半角空白のないスクリプト等）を途中で折り返せない という既知のバグがあります。 【前提：連続する半角英数字が改行されない】 通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、折り返さない場合が多いです。 つまり、 "aaaaaaaaaaaaaaaaaaaaaaaaa"はコンピュータからみれば一つの単語で、途中に改行が入ることが許されません。 ということです。 参考資料： ・半角文字列の折り返し（ブラウザ毎の比較があります） http://pinotan.blog15.fc2.com/file/word-break.html 【通常の対処方法】 htmlタグbrで強制改行。 はみ出し部分をCSS（overflow:hidden)で切り落とす。（IE6は親ボックスの幅が広がるバグがあるので、widthで直接的に幅を指定しないと効かない) CSSにword-break:break-allを指定し、IEだけ右端で改行。（ボックス幅の広がりを防げるが、単語区切りにならず英数字が読み辛い) CSSにword-break:keep-allを指定し、IEだけ右端で改行。（単語区切りのみで改行。区切りが無いと全角でも改行されない) 区切り記号を全角にする。（稀に折り返さないケースもある) 半角記号を空白(スペース)で挟む。 単語の区切りなどに&#60;wbr&#62;(&#60;wbr /&#62;)を入れる。 参考資料： 7以外は以下の引用です http://pinotan.blog15.fc2.com/blog-entry-106.html Firefoxの場合、折り返すようにする拡張機能（url_breaker、url_breker_plusもしくはGreaseMonkeyを使う方法）があります ただ、この場合、ユーザーにインストールしてもらわないといけないので、入れていない人にも効かせて欲しい場合は、これをjs化することで対応できます。 参考資料： Firefox・Netscapeで連続した半角文字を折り返す http://www.koikikukan.com/archives/2005/08/04-235647.php NN7やmozillaでは、なんと全角数字も同じように扱われてしまいます。 しかし記号もそうなのだとは知りませんでした。 参考ページ。 http://www.mozilla.gr.jp/forums/?mode=al2&#38;namber=6847&#38;rev=&#38;&#38;KLOG=47]]></description>
			<content:encoded><![CDATA[<p>FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字（長いURLや半角空白のないスクリプト等）を途中で折り返せない<br />
という既知のバグがあります。</p>
<blockquote><p>【前提：連続する半角英数字が改行されない】<br />
通常、テキストは右端で折り返しされるはずですが、URL (URI) 等の連続する半角文字は一つの単語と扱われ、折り返さない場合が多いです。</p>
<p>つまり、</p>
<p>"aaaaaaaaaaaaaaaaaaaaaaaaa"はコンピュータからみれば一つの単語で、途中に改行が入ることが許されません。</p>
<p>ということです。</p>
<p>参考資料：<br />
・半角文字列の折り返し（ブラウザ毎の比較があります）<br />
<a href="http://pinotan.blog15.fc2.com/file/word-break.html" target="_blank">http://pinotan.blog15.fc2.com/file/word-break.html</a></p></blockquote>
<blockquote><p>【通常の対処方法】</p>
<ol>
<li>htmlタグbrで強制改行。</li>
<li>はみ出し部分をCSS（overflow:hidden)で切り落とす。（IE6は親ボックスの幅が広がるバグがあるので、widthで直接的に幅を指定しないと効かない)</li>
<li>CSSにword-break:break-allを指定し、IEだけ右端で改行。（ボックス幅の広がりを防げるが、単語区切りにならず英数字が読み辛い)</li>
<li>CSSにword-break:keep-allを指定し、IEだけ右端で改行。（単語区切りのみで改行。区切りが無いと全角でも改行されない)</li>
<li>区切り記号を全角にする。（稀に折り返さないケースもある)</li>
<li>半角記号を空白(スペース)で挟む。</li>
<li>単語の区切りなどに&lt;wbr&gt;(&lt;wbr /&gt;)を入れる。</li>
</ol>
<p>参考資料：<br />
7以外は以下の引用です<br />
<a href="http://pinotan.blog15.fc2.com/blog-entry-106.html" target="_blank"> http://pinotan.blog15.fc2.com/blog-entry-106.html</a></p></blockquote>
<blockquote><p>Firefoxの場合、折り返すようにする拡張機能（url_breaker、url_breker_plusもしくはGreaseMonkeyを使う方法）があります</p>
<p>ただ、この場合、ユーザーにインストールしてもらわないといけないので、入れていない人にも効かせて欲しい場合は、これをjs化することで対応できます。</p>
<p>参考資料：<br />
Firefox・Netscapeで連続した半角文字を折り返す<br />
<a href="http://www.koikikukan.com/archives/2005/08/04-235647.php" target="_blank"> http://www.koikikukan.com/archives/2005/08/04-235647.php</a></p></blockquote>
<blockquote><p>NN7やmozillaでは、なんと全角数字も同じように扱われてしまいます。<br />
しかし記号もそうなのだとは知りませんでした。<br />
参考ページ。<br />
<a href="http://www.mozilla.gr.jp/forums/?mode=al2&amp;namber=6847&amp;rev=&amp;&amp;KLOG=47" target="_blank"> http://www.mozilla.gr.jp/forums/?mode=al2&amp;namber=6847&amp;rev=&amp;&amp;KLOG=47</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://hiropo.co.uk/archives/14/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>funnythingz公式サイトについて</title>
		<link>http://hiropo.co.uk/archives/12</link>
		<comments>http://hiropo.co.uk/archives/12#comments</comments>
		<pubDate>Sat, 15 Dec 2007 11:26:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[(X)HTML]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[つれDUれ]]></category>

		<guid isPermaLink="false">http://hiropo.co.uk/archives/12</guid>
		<description><![CDATA[こんちゃす。ぴです。 自分、funnythingzというWeb屋の集まり集団の代表やってます。 その公式サイトでもあるhttp:/www.funnythingz.com/なんですが、 今日久しぶりにソースレベルでの更新を行いました。どうってことないのですが、Web標準を謳っている割にクロスブラウザにちゃんと対応していなかったので、(X)HTML部分とCSSを改修しました。 これで、IE7,でもIE6以下でもFirefoxでも、Opera9でも、Netscape7.1でも、Safari3でもレイアウト崩れしてないんだぜ！というのを大きくアピールできます。（誰にｗｗｗｗｗｗｗｗ） といっても、中身のないサイトなんであまり意味ないんですけどね。]]></description>
			<content:encoded><![CDATA[<p>こんちゃす。ぴです。<br />
自分、funnythingzというWeb屋の集まり集団の代表やってます。</p>
<p>その公式サイトでもある<a href="http:/www.funnythingz.com/" title="funnythingz" target="_blank">http:/www.funnythingz.com/</a>なんですが、 今日久しぶりにソースレベルでの更新を行いました。どうってことないのですが、Web標準を謳っている割にクロスブラウザにちゃんと対応していなかったので、(X)HTML部分とCSSを改修しました。</p>
<p>これで、IE7,でもIE6以下でもFirefoxでも、Opera9でも、Netscape7.1でも、Safari3でもレイアウト崩れしてないんだぜ！というのを大きくアピールできます。（誰にｗｗｗｗｗｗｗｗ）</p>
<p>といっても、中身のないサイトなんであまり意味ないんですけどね。</p>
]]></content:encoded>
			<wfw:commentRss>http://hiropo.co.uk/archives/12/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>clearfix</title>
		<link>http://hiropo.co.uk/archives/4</link>
		<comments>http://hiropo.co.uk/archives/4#comments</comments>
		<pubDate>Thu, 13 Dec 2007 16:56:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[(X)HTML]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://hiropo.co.uk/archives/4</guid>
		<description><![CDATA[PLAIN TEXT CSS: .clearfix:after &#123; &#160; &#160; content: "."; &#160; &#160; display: block; &#160; &#160; height: 0; &#160; &#160; clear: both; &#160; &#160; visibility: hidden; &#125; &#160; .clearfix &#123;display: inline-table;&#125; &#160; /* Hides from IE-mac */ * html .clearfix &#123;height: 1%;&#125; .clearfix &#123;display: block;&#125;]]></description>
			<content:encoded><![CDATA[<div class="igBar"><span id="lcss-10"><a href="#" onclick="javascript:showCodeTxt('css-10'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-10">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">.clearfix<span style="color: #3333ff;">:after </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">content</span>: <span style="color: #ff0000;">"."</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span>: <span style="color: #993333;">block</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>: <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">clear</span>: <span style="color: #993333;">both</span>;</div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">visibility</span>: <span style="color: #993333;">hidden</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.clearfix </span><span style="color: #66cc66;">&#123;</span><span style="color: #000000; font-weight: bold;">display</span>: <span style="color: #993333;">inline-table</span>;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/* Hides from IE-mac */</span></div>
</li>
<li style="font-weight: bold;color:IG_LINE_COLOUR_2;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">* html <span style="color: #6666ff;">.clearfix </span><span style="color: #66cc66;">&#123;</span><span style="color: #000000; font-weight: bold;">height</span>: <span style="color: #cc66cc;color:#800000;">1</span>%;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:IG_LINE_COLOUR_1;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.clearfix </span><span style="color: #66cc66;">&#123;</span><span style="color: #000000; font-weight: bold;">display</span>: <span style="color: #993333;">block</span>;<span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://hiropo.co.uk/archives/4/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
