IE7でのol要素で。 ― 2008年06月05日 20時04分
半ば昨日〔IE７においてのフロート解除（brタグ使用）について。〕の続き記事になりますが。
強引に解決したと思ったら、今度はol要素の番号が出てないのに気付きました。こっちは検索掛けてみるとzoom機能との兼ね合いでバグがあるっぽいんですが……それ、僕は使ったことないんですよね。別の条件もどっかにあるのかしら。
IE6からIE7になろうとした時は、すごい喜んだんですけど……なんか、IE7出た当初から段々とコレの期待値とか諸々が下がっているなぁ。これからは楽になるって話じゃなかったのかよぅ。変わらないじゃん。いや、下手するとIE6の兼ね合いもあるから、余計に手間増えてるじゃん。
IE７においてのフロート解除（brタグ使用）について。 ― 2008年06月04日 21時28分
CSSでリスト要素タグをfloat指定して、その回り込み解除にbrタグに付けたclear:bothを使っています。たぶん回り込み解除の方法としては、一番メジャーでベターな方法だと思うんですが……このbrタグが中々曲者です。
Firefox、Operaで該当場所を表示させた時は、回り込み解除用のbrタグの効果（一行空いたように見える）が存在するのに、IE7では、それがありません。回り込み解除だけは行っていてくれているようなのですが、brタグ要素自体の一行が無いです。CSSではclear:both以外指定していなくて、スペースを空けたいがためにline-heightやmargin、paddingを試してみましたが……IE7の時だけ、見事に効果無しです。
僕は専門家ではないので、これがIE7のバグなのか仕様なのかは分からないです。てきとーにぐぐってみても、ヒットはしなかったですし。XHTMLのDOCTYPE的にはどっちが正しいのかも知らないです。もしかしたら、brタグは空要素な扱いですから、ブラウザ上で一行おくような動作をしなくたって全然可笑しくはないのかもしれないですし。いや、そもそも表示の問題なんだから、DOCTYPE云々ではないのかな、勉強不足過ぎますね；；
今回は結局全部共通してスペースを空けられなかったので、リスト要素の方のmargin弄りました……賢いやり方ではないんでしょうけど。妥協もたまには大事ですよね。うん。
ちなみにSafariをインストールしていなかったので、Safariはまだ未確認です。一度入れたはずなんだけれどなぁ。
新しい発見の活用と、結局まだ解決してないもの。 ― 2008年03月23日 14時02分
やっぱりfloatを使うのは難しいです。直前の要素でfloatするも、ブロック要素だと上手い具合に表示が動いてくれないし、自身もfloatしちゃうとmin-widthやmax-widthが適用されてない感じがします。かといって、直前の要素floatでインラインを適用させると今度はwidth自体が怪しいです。
floatで強引に表示を動かした時、borderスタイルを適用していると他の表示のところまで侵食しちゃってた問題もありましたが、こちらは背景色を塗りつぶすことで対応可能ということが分かりました。
とは言え表示サイズをある程度指定するようなデザインは、やっぱダメかもしれないです。最近横幅が1024pxぐらい普通になってきてますけど、それに満たないディスプレイというのは存在する訳で。皆が同じように見れるようにしたいなら、そこら辺で固定させるよりは、可変的な……それこそサイズ動かしても見るだけなら何とも支障がないようなものが望まれそうです。でも僕の現在の腕では無理。「二兎を追う者は一兎をも得ず」っていう言葉がありますけど、まさしくそんな風になってしまいます。
そうそう。今回からalternate stylesheet使い始めました。Firefox、Operaはスタイルシートの切替が可能です。Safariは軽く見たところ切替の場所がないような。他のと違うところにあるのかな。IE6は無かったね。IE7は確認してないけど。
ぷちリニューアル終了。 ― 2007年12月12日 23時04分
とりあえず自分の出したい情報だけは出したので、今回のぷちリニューアルは終了です。一番下の欄にカテゴリとコメントの表示をさせてみました。ついでにそこに行きやすいように、ログイン｜RSSの横に「情報」項目を追加してみました。他の項目は、必要になった時にまた付け足します。
しかし今回まともにfloatを使ったかもしれません。色々合わせるのに苦労しました。左詰で、ちょっと右側の余白が気になったりもしますけど、他に良い形が思い浮かびませんでした。かと言ってサイトの構成そのものを変えて、左カラムとかにしても、あんまり好きではないので。現状、このままで維持です。
しかし改めてカテゴリ数見ると、結構書いていますね……自分でもちょっと驚きです。三日坊主で終わっても可笑しくなかったのに。
Firefoxでも見た目同じようになりました。 ― 2007年12月06日 17時14分
以前、IEではログインの下に隙間が空かないのに、Firefoxでは何故か隙間が出来ちゃいます──みたいな事を書いてました。当時は本当に原因を見付けきれなくて諦めたんですが、リニューアルに手を出している現在「もしかして」と思って触ったところが当たりました。
divタグやpタグが悪い訳ではなく（marginもpaddingも全部0指定でしたし）h1要素のmargin-top指定が抜けてました。h1タグに入る前ばっかりをあれこれ考えて錯誤してたんで、それは解決できないですよね。自分のうっかりミスです。
ま、これで見た目の部分は結構同じになってきました。ついでにIEでのタイトルの見え方をちょっと修正して、今後の予定としては一番下にカテゴリとかの項目を復活させようと思います。記事が溜まってきたので、それがあった方が分かり易くなってきてますしね。
JSP/サーブレット教科書（片山幸雄）を見て。 ― 2007年11月19日 18時19分
これを初めて見たとき、JSPにはすごい期待していました。楽しいと思いました。今まで殆どXHTMLとCSSで頑張ってきましたが、これが扱えれば色々なことが出来るんだなぁと胸をわくわくさせたものです。
──が、なんか序盤のページ捲っただけで、とりあえず腰が砕けそうになるとは思いもしませんでした……
酷い。と言うか、酷すぎる。JSPじゃありません。そっちは全く分からないので良いのか悪いのかの判断さえ付きません。でも、他の部分を見ていたら、あんまり信用しない方が良いのかなと思えてくるから不思議です。
著者さん、このHTML、推敲しましたか。いや、むしろきちんと覚えたんですか？
この本の最初の方に『HTMLの知識は必要となる』って書いてあったし、HTMLソースも書かれているようだったので、『W3Cの仕様書通り・厳格に書いてあるはずだ』とまでは流石に思わなかったですが（そもそも僕自身、そこまで厳格なのを求めませんし）、それを抜きにしてもあんまりです。
序盤のフォントタグの中で、色指定とかを書いてあります。──FF0000とかです。抜けてます。#がありません。
タグの閉じ忘れも、すぐに見付かりました。むしろ、きちんと字下げの法則付けてください。変な位置で閉じタグ付けるのも微妙に解釈が困ります。
ついでに30ページ付近に何故かXHTML文法が混ざってきている気が。いきなりタグの後ろにスラッシュが付くようになったりとか、あんまりHTML詳しくないひとが見たら驚きます。
と、結構書いた訳ですけど、導入部とか触りは良いはずなんですよねー。版を重ねてるんだから、もうちょい推敲してくれたら良かったのにとは思うけれど。
説明多めだし、一個一個丁寧なのはあるんだけれどなー。勿体ないなぁ。
WebSiteExplorerとか。 ― 2007年09月30日 15時32分
厳密にはHTML＆CSSな話題じゃないけれど、一応被ってると思ったので入れてみる。
アドレスを指定すれば、そのサイトの構成を教えてくれるソフト。ちょっと自分で指定しないと膨大な数を抜き出したりもするんで、サイトを見ながら考慮するのが吉な気がする。
見るだけでも、それなりに楽しかったりするんだけれど、さてさて、これは使いすぎて良いものかなぁ。向こう側に（サーバーに）負荷が掛かってないと良いんだけれど、そこら辺がイマイチ分からなくて、怖くてあんま使ってない。特に膨大な数をトレース（と言うのかな？）してると、大丈夫かなって。Googleとかのロボットが許されるのなら、おっけーなんかなぁ。良く分からない。
borderの1px・dashed。 ― 2007年08月11日 05時17分
IE7.0でのみ確認、と。
CSSで1px/dashed指定のときのみ、ちょっと表示が可笑しくなる事があるみたい。スクロールが無い時（？）とか、ラインが短い時はそうでもないみたいだけど、結構長めにラインを引いていたりすると一定間隔の点線のはずなのに、一部繋がっていたりとか、歪な長さになっていたりとか。
2px以上だとならないし、スクロールさせると一応戻そうとしているのか表示がちょっと変わる。
なかなか面白かった。IE7.0でのみしか確認してないし、もしかしたら今後修正されちゃうのかもしれないけど、これを使えばIE7.0限定だけど、ちょっと面白いデザインが書けそう。少なくとも単調に同じものが繰り返されてるってものじゃなくなるし。
(X)HTMLのチェック。 ― 2007年08月10日 01時28分
ちょっと前にHTML関連の記事を見ました。
そこで書いてあったのは、仕様書通りに書くひとが少ないとか、そもそもHTMLの解説書を書くひとたちですら仕様書をあまり読んでいないのではないかとか、ややラフにHTMLを理解しているひとたちの話。
HTMLって結構自由で──というか、いい加減でもブラウザが好意的に解釈してくれるから、そういった意味では限りなく仕様書通りに近くならなきゃいけないって事はないんですよね。
でも、仕様書があるのなら、出来る限りそれに近づけたいなぁ、と僕は思う訳で。
今までHTML-lintは利用してましたが、W3CのValidationは利用したことがなかったので、そっちにも通してみることに。
結果は大丈夫。
一応此処はHTML4.01として、メインのサイトはXHTML1.0として、仕様書通りでした。
実は僕自身、仕様書を読んだ事は無くて。それどころか、それに則った解説書というのも読んだ事はなかったんですよね。
最初にバージョンとか全然関係ないフリーなHTMLを覚えた後は、殆どネット上に掲載されているサイトさんが教科書だったというか。
その参考にしたところが、デザイン的にも秀逸だったのなら、中身的にもかなり正当に書いていたからこそ、僕もこんな風には書けるようになったのかなぁと。
色々勉強させて貰ったサイトさんには多謝です。
ちなみに、Validationは通りましたが、lintの方では100点ではないです。
最近はタグの使い方もちょっと横着してきましたし、まあ仕方ない面もあるかなと自己納得させてます。
DOCTYPE宣言とCSS。 ― 2007年08月06日 02時59分
addressタグにfloat:right;を付けたら、IE7.0だけで何故か横スクロールバーが出現する現象に行き当たったので、それの検証やってたら面白いもの見つけちゃった。
IE7.0において、CSSのbodyに付けたwidth:770px; margin:0 auto;などはDOCTYPE宣言されてないと動かない。
……っぽいね。
具体的には、
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>aaa</title> </head> <body style="width: 770px; margin: 0 auto;"> <div> <hr /> <address style="float:right;">アドレス</address> </div> </body> </html>
──はIE7.0でも動作するんだけど。
ここから<!DOCTYPE……>の行を消しちゃうと、widthが無視されちゃうらしい（あるいはmarginのautoが効かないらしい）。不思議、不思議。
最初なんでかわかんなくて、原因見つけるのに10分ぐらい探し回ったよ……めんどーな；
最近のコメント