<?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/tag/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>
		<item>
		<title>さくらインターネットでの運用（20）力業（？笑）３階層メニュー</title>
		<link>http://itblog.liolion.info/2006/09/22/343</link>
		<comments>http://itblog.liolion.info/2006/09/22/343#comments</comments>
		<pubDate>Fri, 22 Sep 2006 11:53:51 +0000</pubDate>
		<dc:creator>MEGU</dc:creator>
				<category><![CDATA[geeklog]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://blog.liolion.info/2006/09/22/%e3%81%95%e3%81%8f%e3%82%89%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88%e3%81%a7%e3%81%ae%e9%81%8b%e7%94%a8%ef%bc%8820%ef%bc%89%e5%8a%9b%e6%a5%ad%ef%bc%88%ef%bc%9f%e7%ac%91%ef%bc%89/</guid>
		<description><![CDATA[nmoxさんの階層メニュー
こちらを複数個利用させて頂き、私の頭でやれる範囲で
３層メニューを表現してみました。
まず、どうしたいか。なのですが。
コンテンツメニューをこんな風にしたいです。
（大カテゴリ、子カテゴリなどは、便宜上、私が勝手に
呼ぶものです）
大カテゴリ１
　子カテゴリ１
　　　話題１
　　　話題２
　子カテゴリ２
　　　話題１
　　　話題２
大カテゴリ２
　子カテゴリ１
　　　話題１
　　　話題２
　子カテゴリ２
　　　話題１
　　　話題２
…略
自分のサイトに照らし合わせると
小説（大カテゴリ）
　Final Decision 起実（子カテゴリ）
　　　宇宙（話題）
　　　サウンドメッセージ（話題）
　　　創成（話題）
　笑いの間合い（話題）
　時空間奇縁伝（話題）
ＣＧ（大カテゴリ）
　ともくん日記（話題）
　メグメグ！（話題）
　ZENWARE（子カテゴリ）
　　　ZenLiner Tutorial（話題）
　　　ZenLiner Gallery（話題）
…こんな感じでしょうか。。
nmoxさんちの階層メニューは、lib-custom.phpに
追記する関数として提供されていますので、それを
大カテゴリの数分コピーします。
（うちは、大カテゴリが4つなので４個）。
そして、その４つのそれぞれの以下の部分に
4つを区別する文字列を追記します。
function phpblock_nmoxmenu(){
global $_CONF,$_TABLES;
$retval="
&#60;ul class=&#39;nmoxmenu&#39;&#62;&#34;;
↓
function phpblock_nmoxmenuX(){
global $_CONF,$_TABLES;
$retval="
&#60;ul class=&#39;nmoxmenu mX&#39;&#62;&#34;;
function phpblock_nmoxmenuX(){
関数が区別出来ればなんでも良いと思いますが、
わかりやすいように、1～4を振りました（Xのとこ）。
&#60;ul class=&#39;nmoxmenu mX&#39;&#62;&#34;;
こちらもなんでもいいのですが、m1～m4を振りました。
それから、話題IDの先頭３文字を、class名として
書き出すように、以下を追記。
…略
//指定カテゴリーが開いている状態のカテゴリー
$str = $rc["tid"]; // 追記
$strsub = substr($str, 0, 3);　// 追記
$retval.="
&#60;li class=&#39;open &#34;.$strsub.&#34;&#39;&#62; //".$strsub." を追記
…略
//指定カテゴリーが閉じている状態のカテゴリー
$str = $rc["tid"]; // 追記
$strsub = substr($str, 0, 3); // 追記
$retval.="
&#60;li class=&#39;close &#34;.$strsub.&#34;&#39;&#62; //".$strsub." を追記
…略
//インデックスが存在しなければ、単発メニュー
$str = $rc["tid"]; // 追記
$strsub = substr($str, 0, 3); // 追記
$retval .= "
&#60;li class=&#39;only [...]]]></description>
		<wfw:commentRss>http://itblog.liolion.info/2006/09/22/343/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
