<?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>るるろぐてくにかる。 :: LULU-LOG-technical &#187; css</title>
	<atom:link href="http://itblog.liolion.info/category/css/feed" rel="self" type="application/rss+xml" />
	<link>http://itblog.liolion.info</link>
	<description>パソコン、インターネット、HTML、CSS、また、アプリケーション等について、書いています。</description>
	<lastBuildDate>Tue, 16 Mar 2010 10:17:41 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS :: font-size, letter-spacing, line-height 継承テスト</title>
		<link>http://itblog.liolion.info/2008/06/28/418</link>
		<comments>http://itblog.liolion.info/2008/06/28/418#comments</comments>
		<pubDate>Sat, 28 Jun 2008 06:35:21 +0000</pubDate>
		<dc:creator>MEGU</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://blog.liolion.info/2008/06/28/css-font-size-letter-spacing-line-height-%e7%b6%99%e6%89%bf%e3%83%86%e3%82%b9%e3%83%88/</guid>
		<description><![CDATA[モジラで懺悔の続きかも（笑）。ていうか、こんなところに、昔のトラウマが。。（笑）。これ、こっちに移してこようかなあ。
まあ、それはさておき。今回は、fontまわりの継承テストです。検証対象は、Firefox2, IE6, IE7です。Operaは時間があったら、見てみよう。。

基本のフォント・テキストまわりの定義

html {font-size:small}
html {font-size:medium}
body {
font-size:1.14em;
line-height:1.5em;
letter-spacing:0.17em;
}

font-size:small だと、マメ文字になって、読めないんですよね。。うちのモニタで。。そんなわけで、ちょっと大きめにしている。じゃ、midiumにしたら？とも思うのだが、主流は「small」らしいし、文字がでかいとイヤな人もいるそうな。。でも年寄りは、大きい文字の方が嬉しいんだよ（笑）。
&#8212;*&#8212;*&#8212;*&#8212;*&#8212;*&#8212;
※mediumにしたわ～（笑）。
&#8212;*&#8212;*&#8212;*&#8212;*&#8212;*&#8212;
ま、うちは、Fxで普段見てるので、Fxは、最小フォントサイズというのを好きな文字サイズに出来て、マメ文字サイトに出逢っても苦労はしない。苦労はしないが、デザインが乱れて、リンクをクリックできなかったりすることも多いけど（笑）。
次に、IE6用のフォント・テキストまわりの定義

* html {font-size:small}
* html body {
font-size:0.94em;
line-height:1.4em;
letter-spacing:0.09em;
}

それから、IE7用のフォント・テキストまわりの定義

*+html body {
letter-spacing:0.09em;
line-height:1.4em;
}

IE7は、font-sizeの解釈がFxと同じ様なので、あとは、letter-spacingと、line-heightを調整してみた。
table 関係のフォント・テキストまわり
さて、この状態で、tableを書いてみる。すると、IE6 では、font-sizeもline-heightもletter-spacing もbodyの定義を継承しない。ということで、IE6用にこんなのを追加してみた。
IE6用のフォント・テキストまわりの追加定義

* html table {
font-size:inherit;
line-height:inherit;
letter-spacing:inherit;
}

しかし、これは、見事に無視されてしまった。ということで、以下のようにしてみた。

* html table { /* IE6はinherit しないし */
font-size:1em;
line-height:1.4em;
letter-spacing:0.09em;
}

&#8212;*&#8212;*&#8212;*&#8212;*&#8212;*&#8212;
[[閑話休題]]
夕飯の支度してました（笑）。
&#8212;*&#8212;*&#8212;*&#8212;*&#8212;*&#8212;
さて。次は、form関連のフォント・テキストまわりについてだ。
form関連は、input と textarea がミソ
input はどうか
まずFxはfont-family、font-size、letter-spacingが継承されない。ということで、まず、以下を追加する。

input{
font-family:inherit;
font-size:inherit;
letter-spacing:inherit;
}

でも、不思議なことに、font-familyを指定すれば、font-sizeも継承されるのだ。逆に、font-sizeを定義してもfont-familyは、継承されない。
つうことで、こんなんがいいんですかね。

input{
font:inherit;
letter-spacing:inherit;
}

次に、IE6だが。同様に、font-family、font-size、letter-spacing は継承されない。しかも、inheritを無視してくれるので、こんな感じ。

* html form input {
font-family:"Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W4", Osaka, "MS PGothic",sans-serif;
letter-spacing:0.09em;
}

IE7もIE6と同じ（やはり、inherit を無視してるね）。
textareaは、どうか
まずFxはfont-family、font-size、line-height、letter-spacing: が継承されない。ということで、まず、以下を追加する。

textarea {
font:inherit;
line-height:inherit;
letter-spacing:inherit;
}

IE6は、こんな感じ。

* html textarea {
font-family:"Hiragino Kaku Gothic [...]]]></description>
		<wfw:commentRss>http://itblog.liolion.info/2008/06/28/418/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>sup, sub の位置を調整する</title>
		<link>http://itblog.liolion.info/2007/04/23/380</link>
		<comments>http://itblog.liolion.info/2007/04/23/380#comments</comments>
		<pubDate>Mon, 23 Apr 2007 13:05:19 +0000</pubDate>
		<dc:creator>MEGU</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://blog.liolion.info/2007/04/23/sup-sub-%e3%81%ae%e4%bd%8d%e7%bd%ae%e3%82%92%e8%aa%bf%e6%95%b4%e3%81%99%e3%82%8b/</guid>
		<description><![CDATA[たとえば、平方メートルなどの単位を書くときに、
1500m&#60;sup&#62;2&#60;/sup&#62;などとすると思うのだが、これがFirefoxでうまい具合に表示されず、「2」がだいぶ上の方にレンダされる。これを調整してみる。

まずhtml側では、以下のように：
 &#60;span class=&#34;tanni&#34;&#62;1500&#60;sup&#62;2&#60;/sup&#62;&#60;/span&#62;
そしてCSSで以下のように定義
span.tanni {
font-family: Osaka, Verdana, Arial, Helvetica, sans-serif ;
position:relative;
}
sub, sup {
vertical-align: baseline;
}
sup {
position:relative;
top:-4px
}
sub {
position:relative;
top:4px
}
]]></description>
		<wfw:commentRss>http://itblog.liolion.info/2007/04/23/380/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>IE pre のコワイ現象</title>
		<link>http://itblog.liolion.info/2007/03/04/370</link>
		<comments>http://itblog.liolion.info/2007/03/04/370#comments</comments>
		<pubDate>Sun, 04 Mar 2007 09:35:21 +0000</pubDate>
		<dc:creator>MEGU</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://blog.liolion.info/2007/03/04/ie-pre-%e3%81%ae%e3%82%b3%e3%83%af%e3%82%a4%e7%8f%be%e8%b1%a1/</guid>
		<description><![CDATA[し、知らなかった。今まで。。
pre要素でマークアップすると、一行が長くなることがあるので、cssで、overflow:&#8221;auto&#8221;にすると、スクロールが出るんだけど、IEは、それが効かず、長いものは、長いまま表示してくれる。で、そのため、結果的にレイアウトを破壊することに。。
preをdivで囲むとか、tableで囲むとか、回避方があったがそれはしたくない。そんなわけで、IEには、例のハックで、
pre {
line-break:strict;
word-break:break-all;
word-wrap:break-word;
}
を定義してみたが、どうだろう。。これだと適当なところで、改行すると思うんだけど。。（適用したのはこのブログじゃなくて別のサイト…うぅあとで、このブログにもやっておかないと…）。
で、なんかMacIEだとスクロールバーで文章が見えなくなるとかなんとか。。

それにしても、IEでたまに確認すると、ぎょっとすることがよくあります。。
]]></description>
		<wfw:commentRss>http://itblog.liolion.info/2007/03/04/370/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
