じゃんぬねっと日誌

ネタと雑記と時々プログラミング

目次

Blog 利用状況

ニュース

G メン歩きはやめましょう
G メン歩き
5 人の女子高生による G メン歩き (後ろの人が困り中)

スポンサードリンク

運営サイト

  • C# と VB.NET の入門サイト

Blog Item

フィードメーター - じゃんぬねっと日誌

書庫

CSS で擬似フレーム

昨日は会社 (名古屋にあります) で普通に仕事をしていたわけですが、12 時 19 分くらいに中部地区で地震発生。三重県の北部では震度 5 強を記録したらしいです。確かにあの揺れはやばかった... ビルの中にいたので、しばらくビルが「ぐにゃりぐにゃり」うねっているのがわかるんですね。

同日 18 時 34 分頃にも余震らしき揺れがありましたが、これも三重県の北部で震度 4 だったらしいです。しばらく 1 週間は余震に注意が必要ですね。東南海地震の前触れにならなければ良いのですが...


ところで 俺の擬似フレームを見てくれ コイツをどう思う?

CSS で擬似フレーム

すごく・・・ 微妙です。

どうやら、私のサイトのようなレイアウトでは「擬似フレーム」は向かないみたいです。いろいろ CSS をハックしましたが如何ともし難い状況です。タブっぽいデザインをやめてしまえば良いわけですが、これは好きなデザインなので変えたくないのですね。

それでも、今のままの方が良いか、MSDN2 ライブラリ (microsoft.com) のようにヘッダ部とサイド メニューを固定した方が良いのかなどのご意見をお待ちしております。そもそも「擬似フレーム」自体の評判が悪ければ、スッキリ諦めて今の CSS のままで進めていけるので、皆さんのご意見は聞いておきたいのです。

そこそこのブラウザで対応しようとすると、どうしても CSS Hack しなければならないのがつらいですね。というより、W3C の指針に反していること自体がつらいです。

いや、そもそもシェア No.1 の IE6 で、position 属性に fixed が対応していないという事実が良くないですね。実際、Firefox あたりならば、先ほどの「擬似フレーム」のリンク先で全く問題ありません。(左のツリーメニューのスクロールだけ微妙ですが、これは対応可能だったりします)

after と before 擬似クラスにしてもそうです。IE6 の時点で要望があったハズですから、早めに SR でも何でも良いので対応して頂きたかったです > Microsoft さん

投稿日時 : 2007年4月16日 9:42

コメントを追加

# re: CSS で擬似フレーム 2007/04/16 9:51 シャノン

> 「ところで 俺の擬似フレームを見てくれ コイツをどう思う?」

うほっ。

…とりあえず言ってみただけ。

# re: CSS で擬似フレーム 2007/04/16 10:27 かつのり

http://blogs.wankuma.com/kacchan6/archive/2007/04/12/71230.aspx
で書いたextjsというのがかなりお勧めというか、かなり熱いですよ。
JavaScriptで200k以上あるのですが・・・

# re: CSS で擬似フレーム 2007/04/16 10:46 じゃんぬねっと

>シャノンさん
いいのか? 俺はノンケでも平気で(ry
っていうか、感想なしかい。

>かつのりさん
これすごいですよね。
ダイアログ (厳密には違うけど) なんて透過してます。

でも、JavaScript は極力避けたいですね。
(ツリーメニューでは使っていますけど...)

# re: CSS で擬似フレーム 2007/04/16 11:58 Hirotow

わんくまMVP for CSS擬似フレーム を授与します。
ちなみに私は わんくまMVP for 無邪気なAjax擬似フレームです。

見た感じ、
html, body, div.frame { position:absolute; top:0px; left:0px; margin:0px; padding:0px; overflow:hidden; z-index:0; }
div#top { width:100%; height:50px; overflow:hidden; z-index:3; }
div#left { width:200px; height:100%; overflow:auto; z-index:2; }
div#main { width:200px; height:100%; overflow:auto; z-index:1; }
div#left div#treemenu { position:absolute; top:50px; left:0px; width:190px; height:0px; overflow:visible; padding:5px; }
div#main div#content { position:absolute; top:50px; left:200px; height:0px; width:100%; padding:5px; }
みたいな感じでしょうか?
コンテンツフレームの幅指定が難儀ですね。

# re: CSS で擬似フレーム 2007/04/16 13:53 じゃんぬねっと

幅 (width) はいいんですけど、問題は高さ (height) です。
上に領域があるので、100% とするとああなってしまいます。

乗せるという意味では、タブっぽいデザインにしなければ何とでもなるのですけどね。

# re: CSS で擬似フレーム 2007/04/16 16:42 Hirotow

div#mainのheightを0、oveflow-yをvisibleにすればどうでしょうか?
それと、Splitterのところですが、Mozilla系だとenentでなくEventにしないと動きません。

# re: CSS で擬似フレーム 2007/04/16 16:59 じゃんぬねっと

ご意見ありがとうございます。

> div#mainのheightを0、oveflow-yをvisibleにすればどうでしょうか?

試してみましたが、変わらずでした。
scroll 自体は親要素の #body の方で出していますので、
これ自体を何とかしないと IE ではスクロール バーが隠れてしまうでしょうね。

> それと、Splitterのところですが、Mozilla系だとenentでなくEventにしないと動きません

はい、それは知っています。
さらに Firefox の場合は、外部へはイベント引数を明示的に渡さないとダメだったと記憶しています。

# re: CSS で擬似フレーム 2007/04/16 18:54 シャノン

> タブっぽいデザインにしなければ何とでもなるのですけどね。

つ[ <group compose="vertical"> ]
http://www.w3.org/TR/xframes/

残念ながらまだ Working Draft...

# re: CSS で擬似フレーム 2007/04/16 18:54 シャノン

マチガエタ

つ[ <group compose="single"> ]

# re: CSS で擬似フレーム 2007/04/16 23:43 ぼのぼの

IE,FireFox,Operaすべてでキレイに表示させようとすると、
擬似フレームはほんとにむつかしいですよねぇ。

いろいろ試した限りでは、ウィンドウを小さくされたときに表示が崩れるのは仕方ないと割り切って、
全てのdivのサイズを%指定にするとけっこうキレイにいけます。
http://www.geocities.jp/bonodotnet/sample20070416/gizi.html

#手元にWindowsしかないのでSafariは未検証

# re: CSS で擬似フレーム 2007/04/17 8:40 じゃんぬねっと

>ぼのぼのさん
いつもありがとうございます。
これで Top が確保できればサイコーなのになぁ。
と思い初めたのが、今回の試みだったりします。

スクロール バーが崩れるか、レイアウトが崩れるか、トレードオフなのでしょうか...

# re: CSS で擬似フレーム 2007/04/17 8:41 じゃんぬねっと

そういえば、

 1. 擬似フレームの方が良い
 2. 今のままの方がが良い

という意見がひとつもないような...

# re: CSS で擬似フレーム 2007/04/17 11:12 Hirotow

>>71771
return ( div#left.height < 100% && div#main.height >= 100%);

# re: CSS で擬似フレーム 2007/04/17 14:17 じゃんぬねっと

えーっと、意味がよくわからないです。

# re: CSS で擬似フレーム 2007/04/18 12:08 じゃんぬねっと

MSDN2 ライブラリみたいに上部だけ frame 使っちゃえばできるけど... うーん。

# re: CSS で擬似フレーム 2007/04/18 23:54 ぼのぼの

> そういえば、
>
>  1. 擬似フレームの方が良い
>  2. 今のままの方がが良い
>
> という意見がひとつもないような...

あくまで私の場合ですが。

少なくとも、現状の擬似フレームだと、ツリーを展開したとき、
ツリーの横スクロールバーが隠れてしまうのがNGです。

なので、現状の擬似フレームよりは、今のままの方が良いです。
Homeキーひとつでてっぺんまで戻れますからね。

むしろ気になるのは、IEだとドラッグでspliterの位置が変えられるのに、
FireFoxとOperaでは変えられないことの方だったりします。

欲を言うなら、タブとツリーの「どちらか」が常に表示されてると、
よりユーザビリティが高いのかな~とは思います。
両方でなくて良い、つーのがポイントです。
#個人的にはツリーの方かな…
#でも、仕事に例えるなら、「追加料金払ってまで実装してもらわなくていい」レベル。

# re: CSS で擬似フレーム 2007/04/19 15:42 じゃんぬねっと

> Homeキーひとつでてっぺんまで戻れますからね。

というのは、「擬似フレームだとてっぺんまで戻れない」という意味ではなく「固定しなくてもすぐメニューに戻れるよ」 という意味で受け取りました。
確かにそうですね。

> むしろ気になるのは、IEだとドラッグでspliterの位置が変えられるのに、
> FireFoxとOperaでは変えられないことの方だったりします。

Firefox はともかく、Opera もダメでしたっけ?
Opera の動作まで確認して、そのまま修正が面倒で放置していたような気がします。

> 欲を言うなら、タブとツリーの「どちらか」が常に表示されてると、
> よりユーザビリティが高いのかな~とは思います。
> 両方でなくて良い、つーのがポイントです。

片方となるとやはりレイアウトを変える必要がありますね。
もう、ぼのぼのさんにテクニカル アドバイザやってもらおうかな...w

# re: CSS で擬似フレーム 2007/04/19 18:17 ぼのぼの

> もう、ぼのぼのさんにテクニカル アドバイザやってもらおうかな...w
いやいや、そんな恐れ多いw

まぁひとつの解としては↓なレイアウトも考えられますが、
http://www.geocities.jp/bonodotnet/sample20070416/layout.gif

見た目的なことを考えると「今のままで良い」てことになっちゃうんじゃないでしょうかw
IE6ユーザが少数派になるまでは…

タイトル  
名前  
URL
コメント