LD.ymst.net - 郡山市でホームページを制作している人のブログ » CSS http://ld.ymst.net 郡山市のWEBクリエイターのLanguid Diary Wed, 18 Jan 2012 07:21:35 +0000 en hourly 1 http://wordpress.org/?v=3.4-alpha Operaは、CSSでパーセント指定の長さの小数点以下は計算してくれない http://ld.ymst.net/web/opera_css_decimal/ http://ld.ymst.net/web/opera_css_decimal/#comments Sat, 24 Dec 2011 07:18:09 +0000 ld.ymst http://ld.ymst.net/?p=860 "Operaは、CSSでパーセント指定の長さの小数点以下は計算してくれない"の続きを読む]]> Opera最強伝説なのに、CSSのwidthやheightなどで、パーセントで長さを指定した場合、小数点以下は計算をしてくれないとは、これ如何に。まあ今更の話だけども。

例えば

<!-- CSS -->
<style type="text/css">
ul{
	background:#444;
	width:400px;
	height:56px;
	margin:0;
	padding:10px;
	list-style:none;
}
li{
	float:left;
	color:#FFF;
	text-shadow:0 0 2px #000;
	width:12.5%;
	height:56px;
	line-height:56px;
	margin:0;
	padding:0;
	text-align:center;
}
li.abc{
background:#666;
}
li.def{
background:#888;
}

ul:after{
	content:'';
	display:block;
	clear:both;
}
</style>

<!-- HTML -->
<ul>
	<li class="abc">OPE</li>
	<li class="def">RA</li>
	<li class="abc">最強</li>
	<li class="def">伝説</li>
	<li class="abc">OPE</li>
	<li class="def">RA</li>
	<li class="abc">最強</li>
	<li class="def">伝説</li>
</ul>

こんなのをOperaで見てみると

OperaはCSSで長さに小数点はだめぽ例

のような感じで、右端に少し空きができちゃいます。
例えばFirefoxと比べると

FirefoxとOpera比較

こんな感じで、小数点以下分、合計4%=16ピクセル分ずれますん。

俺の場合、こういう時は何だかなあと思うけど、Opera用に簡単なjsで対応してます。

<script type="text/javascript">
if(window.opera){//Operaだったら
	$(function(){
		$("li").css("width",$("ul").width()/8+"px");//liのwidthをulの1/8pxに
		$(window).resize(function(){//ウィンドウがリサイズされたら
			$("li").css("width",$("ul").width()/8+"px");//liのwidthをulの1/8pxに
		});
	});
};
</script>

こんな感じのjsでおｋ。

]]> http://ld.ymst.net/web/opera_css_decimal/feed/ 0 郡山ホームページコンテスト http://ld.ymst.net/web/koriyama_homepage_contest/ http://ld.ymst.net/web/koriyama_homepage_contest/#comments Wed, 05 Sep 2007 13:19:00 +0000 ld.ymst http://ld.ymst.net/other/%e9%83%a1%e5%b1%b1%e3%83%9b%e3%83%bc%e3%83%a0%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%b3%e3%83%b3%e3%83%86%e3%82%b9%e3%83%88/ "郡山ホームページコンテスト"の続きを読む]]> http://www.web.net6.or.jp/

今年も開催ですね（遅
と思って見てたら、どこかで見た名前を発見しました。

去年は驚く事があったなあそう言えば。
つか、つい先日、このコンテストについて変な話も聞いたなｗ

俺も応募してみようかなあ、CSS部門とかで。

コンテスト開催事務局でご用意した専用のXHTMLファイルを利用して、CSSによるカスタマイズを行っていただいた上でご応募いただきます。

との事だが、XHTMLのソースは変更しちゃいかんのかな。
例えば、divを減らしたりとか…、と思ったけど、

運営委員会がご用意しているXHTMLファイルに手を加えることなく、オリジナルのCSSと画像を利用して、自由に表現してください。

って書いてありましたね。

思うんだけど、class=”clearfix”前提ってのは、どうなんだろ。なんかその部分はfloat前提ですよみたいな感がして気になるな。id振ってるんだから、わざわざclearfixをclassで後付けしなくてもいい気もするんだけど。
divとidとclassくらいは、変更してもOKなようにしてもらいたかった―と、まだ作ってもいないのに考えても仕方がないですが。

そうだ！うちの会社でも皆にやってもらうかな！？どう？ｗ

]]> http://ld.ymst.net/web/koriyama_homepage_contest/feed/ 0 !DOCTYPEとか http://ld.ymst.net/web/doctype1/ http://ld.ymst.net/web/doctype1/#comments Mon, 06 Mar 2006 03:20:00 +0000 ld.ymst http://ld.ymst.net/other/doctype%e3%81%a8%e3%81%8b/ "!DOCTYPEとか"の続きを読む]]> で、ささみ氏のスクロールについて。

<!DOCTYPE のとこに

"http://www.w3.org/TR/html4/loose.dtd"

の記述が無いと、駄目っすね。

ここの記述で、IE6でレンダリング（表示）の仕方、CSSの適用のされ方とかが変わります。
DW MXとかだと、デフォルトでは、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

までしか、自動で記述されなかったと思うので、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

まで、記述してやると大丈夫かと。

ちなみに、<!DOCTYPE …>は、「HTMLの文書型宣言」とか言って、そのhtmlファイルのタイプを宣言するものなんで、特有ではないですよ。

というか、これの記述はある意味必須です。

doctypeについては、簡単に、
ttp://verre.cside.to/table/st_table3.htm
とかで、説明されてますんで、読んでみると良いかも。

あと、winなら、

C:\Program Files\Macromedia\Dreamweaver MX\Configuration\DocumentTypes\NewDocuments

に入ってる、「default.html」のソースの

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

のところを、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

に変えて保存しとくと、新規作成のたびに書き換えなくてすむんで、お勧め。

<link rel="stylesheet" href="css/common.css" type="text/css">

とか、入れておくのも便利。

それと、default.cssに

.bold{
font-weight:bold
}

とか、自分で良く使う奴を、保存しとくのもお勧め。

macは、どれ変えれば良いのか、わかりませんがｗ

]]> http://ld.ymst.net/web/doctype1/feed/ 0 <?xml version=”1.0″… http://ld.ymst.net/web/xml-version10/ http://ld.ymst.net/web/xml-version10/#comments Tue, 17 Jan 2006 04:50:00 +0000 ld.ymst http://ld.ymst.net/other/xml-version10%e2%80%a6/ "<?xml version=”1.0″…"の続きを読む]]> なんとなく、XHTMLの勉強しつつ、とあるサイトを構築している、俺。

「んだぁああああ？IEだと崩れる！？」
CSSでwidthを指定してるんだけど、幅がおかしくなっていたりなどなど、変だ。
なんなんだろと思い、調べてみる。

<?xml version="1.0" encoding=""?>

頭のXML宣言があると、IEでは後方互換モードになってしまう。doctype宣言の前になんか入ってると駄目なのか。

<?xml version="1.0"…

をカットしてみると、ほんとだ、意図した通りに表示される。

…う～ん、まあ、いいか。

]]> http://ld.ymst.net/web/xml-version10/feed/ 0 今日は久々に速く帰ってみた。 http://ld.ymst.net/other/safari_spec/ http://ld.ymst.net/other/safari_spec/#comments Thu, 21 Jul 2005 13:35:00 +0000 ld.ymst http://ld.ymst.net/other/%e4%bb%8a%e6%97%a5%e3%81%af%e4%b9%85%e3%80%85%e3%81%ab%e9%80%9f%e3%81%8f%e5%b8%b0%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82/ "今日は久々に速く帰ってみた。"の続きを読む]]> 22時上がりが早いと思う、俺。

どうも仕事がまわりませーん。

今日は、それなりに色々とやったのだが、とあるサイトのMac Safariでの動作検証、これ大変だった。

そのサイトは、下にメニューで上コンテンツで背景色黒って感じの構成なのだが、Safariだと、メニューをクリックしてページが切り替わる時にページが一瞬白くなる、そんな訳ワカマツな不具合が発生。というか、先方よりご指摘を頂いた。

html見直して、css見直して、html各OS、ブラウザ対応、不具合調べて、css各OS、ブラウザ対応、不具合調べて、色々とやってみた。検証するなか、css切ってみたら訳ワカマツな不具合が出ない。なんだそらー、とcss調べてみたけど、何も問題が無いっぽい。webで調べて分かった、Safariで不具合のでるスタイルシートも使っていない。

「これはSafariの仕様だ、そうに違いない、間違いない。」

と結論を出した、俺。

なんか原因とかわかる人募集。

一日に日記を何度も書けるなんて、今日はじめて知った俺ガイル。

]]> http://ld.ymst.net/other/safari_spec/feed/ 0