<?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; HTML</title>
	<atom:link href="http://tarimon.co.uk/category/html/feed" rel="self" type="application/rss+xml" />
	<link>http://tarimon.co.uk</link>
	<description>HTML・Wordpressなどの覚え書きブログ</description>
	<lastBuildDate>Sun, 18 Jul 2010 14:40:21 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>横並びメニューにはdisplay: inline-block;で対応</title>
		<link>http://tarimon.co.uk/entry/282</link>
		<comments>http://tarimon.co.uk/entry/282#comments</comments>
		<pubDate>Sat, 13 Feb 2010 18:57:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://tarimon.co.uk/?p=282</guid>
		<description><![CDATA[リストタグを回り込みして横並びのメニューを作っていたときにブラウザごとで表示が異なったのでメモメモφ(.. )
IE７以降や、Firefox・Chrome・Sleipnir・Safari・Operaでは問題なかったのですが、IE６以下では、回り込みすらせず、親要素の幅まで広がってしまった。
横並びにしたいブロック要素の幅を固定にすれば問題は解決できるのですが、今回は使う人によってテキストの長さが変わるという状況であったため、幅は固定せずに実装したかった。
そこで&#60;li&#62;タグのdisplayプロパティにinline-blockを指定することで、テキストに応じた横幅の横並びメニューがIE６でも問題なく表示することができました。

	関連する投稿
	
	brタグ　IEで改行が認識されない
	float要素のブラウザごとでの表示の違い
	IEでimgタグの下に隙間ができる
	ページとウインドウの間の隙間
	preの活用


]]></description>
		<wfw:commentRss>http://tarimon.co.uk/entry/282/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>preの活用</title>
		<link>http://tarimon.co.uk/entry/137</link>
		<comments>http://tarimon.co.uk/entry/137#comments</comments>
		<pubDate>Tue, 09 Jun 2009 16:42:07 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://tarimon.co.uk/?p=137</guid>
		<description><![CDATA[preタグはプログラムソースなどを公開するときに便利ですが、スタイルを指定しないとpreタグ内の記述がページ幅を超えてしまいます。
これを解決するひとつの手段として、スクロールバーを表示させることでページ幅に合わせた表示が可能となります。
▼サンプル

pre{
background-color : #f4f5f7; padding : 5px 5px 5px 5px; border-top-width : 1px; border-top-style : dashed; border-top-color : #cccccc;
border-left-width : 1px; border-left-style : dashed; border-left-color : #cccccc; font-size : 12px; color : #666666; overflow: auto;
}

上記のソースようにスタイルシートで指定すると、上のように表示されます。

	関連する投稿
	
	float要素のブラウザごとでの表示の違い
	ページとウインドウの間の隙間
	IEでimgタグの下に隙間ができる
	brタグ　IEで改行が認識されない
	横並びメニューにはdisplay: inline-block;で対応


]]></description>
		<wfw:commentRss>http://tarimon.co.uk/entry/137/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>float要素のブラウザごとでの表示の違い</title>
		<link>http://tarimon.co.uk/entry/45</link>
		<comments>http://tarimon.co.uk/entry/45#comments</comments>
		<pubDate>Sat, 06 Jun 2009 04:10:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://tarimon.co.uk/?p=45</guid>
		<description><![CDATA[floatによる回り込みを指定した場合、その要素にmarginを指定するとIE6で表示がずれる現象が発生します。
ブラウザごとのスタイルを用意することでも回避できますが、共通のスタイルで管理したほうが作業が楽なため、【display:inline;】を記述することをおすすめします。
記述はfloatする要素でmarginの記述があるものに【display:inline;】を追加するだけです。
▼使用例

.left{
width : 500px;
float : left;
margin-left : 10px;
display:inline;
}


	関連する投稿
	
	IEでimgタグの下に隙間ができる
	brタグ　IEで改行が認識されない
	preの活用
	ページとウインドウの間の隙間
	横並びメニューにはdisplay: inline-block;で対応


]]></description>
		<wfw:commentRss>http://tarimon.co.uk/entry/45/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ページとウインドウの間の隙間</title>
		<link>http://tarimon.co.uk/entry/35</link>
		<comments>http://tarimon.co.uk/entry/35#comments</comments>
		<pubDate>Fri, 05 Jun 2009 00:31:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://tarimon.co.uk/?p=35</guid>
		<description><![CDATA[ページを最上部から表示させたい場合、特に何も指定していないとページとウインドウの間に隙間ができてしまいます。
ページとウインドウの隙間をなくしたい場合には、スタイルシート（CSS）にて、

body{
margin: 0px;
}

を記述することで解消できます。
上のみを指定したいときには、
margin: 0px;　　を　　margin-top : 0px;　　と記述することで上のみ指定することができますね。

	関連する投稿
	
	preの活用
	横並びメニューにはdisplay: inline-block;で対応
	IEでimgタグの下に隙間ができる
	brタグ　IEで改行が認識されない
	float要素のブラウザごとでの表示の違い


]]></description>
		<wfw:commentRss>http://tarimon.co.uk/entry/35/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IEでimgタグの下に隙間ができる</title>
		<link>http://tarimon.co.uk/entry/28</link>
		<comments>http://tarimon.co.uk/entry/28#comments</comments>
		<pubDate>Thu, 04 Jun 2009 03:30:30 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://tarimon.co.uk/?p=28</guid>
		<description><![CDATA[画像を表示させたいときにimgタグを使いますが、IEで表示させると下に指定していないにも関わらず隙間ができてしまいます。
他のブラウザでは隙間が発生しないようですが、IEで起こる特殊な現象です。
これを解決するためにはスタイルシートでimgタグにちょっとした記述が必要になります。
▼CSSファイル

img{
vertical-align: top;
vertical-align: bottom;
}

これを記述しておくだけでimgタグの下に隙間ができなくなります。
また、別の方法としてHTMLソースでimgタグを記述した後、改行せず、その行に続けてソースを書くことでも解消できます。
CSSで指定したほうが楽かと思います。

	関連する投稿
	
	float要素のブラウザごとでの表示の違い
	brタグ　IEで改行が認識されない
	横並びメニューにはdisplay: inline-block;で対応
	ページとウインドウの間の隙間
	preの活用


]]></description>
		<wfw:commentRss>http://tarimon.co.uk/entry/28/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>brタグ　IEで改行が認識されない</title>
		<link>http://tarimon.co.uk/entry/10</link>
		<comments>http://tarimon.co.uk/entry/10#comments</comments>
		<pubDate>Tue, 02 Jun 2009 11:38:58 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://tarimon.co.uk/?p=10</guid>
		<description><![CDATA[文章の間隔を広げたい時にてっとり早いのがbrタグの連続書きですが、IEだと&#60;br&#62;&#60;br&#62;と表記しても&#60;br&#62;1個分しか認識されず文章の間隔を開けることができません。
それを回避するためにスタイルシートでbrタグに【letter-spacing: 0;】を指定することで&#60;br&#62;&#60;br&#62;も正しく表示されるようになります。
また、「ページを拡大」させた時に発生するレイアウトの表示の崩れも解消するようです。

	関連する投稿
	
	preの活用
	横並びメニューにはdisplay: inline-block;で対応
	float要素のブラウザごとでの表示の違い
	ページとウインドウの間の隙間
	IEでimgタグの下に隙間ができる


]]></description>
		<wfw:commentRss>http://tarimon.co.uk/entry/10/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
