09 | 2017/10 |  11

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

CSSで階層メニューを作りたい!

 ネットサーフィンしていたら、Javascriptを使わず、CSSだけで作った階層メニューに遭遇した。
Designing with CSS § ウェブスタンダードテンプレート集: CSS Templates: CSS ダイナミックメニュー1
 それはまさしく「未知との遭遇」(古いなあ・・)であり驚愕の出会いでもあった。「:hover」なる疑似クラスが「a」要素とセットになって、a要素に対するマウスオーバー状態を特定することは広く知られているが、「li:hover」のようにa要素以外にhover疑似クラスが適用出来ることは夢にも思わなかったからだ。
 かくして、極めて簡単なCSS宣言によって見事に階層メニューが実現されていることに、大袈裟に言えば感動すら覚えたのだが、しかし、肝心で残念なことは、いまだ90%近いシェアを抑えているInternet Explorerでは、このli:hover指定が使えないことだ。
 そこで次のように思い立ったのは当然のリアクションと言えよう!
 li:hoverで実現された階層メニューを何とかa:hoverを使って実現出来ないだろうか?

 

● コメント ●

きちょうな情報をありがとうございます。 (hkom)

 通りすがりさんへ。
 直接お礼を言いたいのですがurlの記述がないのでこの場を借りて失礼します。
 貴重な情報をありがとうございました。
 CSSではなくJavascriptによるメニューのようですが、大変素晴らしいスクリプトのようで参考にさせて戴きたいと思いました。
 現在このブログでもJavascriptによって階層メニューを実現しているのですが、ちらつきが激しいため改善したいな、と思っていました。紹介して戴いたサイトのスクリプトを参考に、もっとすっきりしたスクリプトを作りたいと思います。
 ありがとうございました。

● コメント ●

違ったらすみません。 (通りすがり)

ここに、こんなのがありました。
このことでしょうか?
だとしたら、できると思います。
元ネタは海外のHPのようです。

http://www.wsb.jp/hpb/java_s/fav_b/bra_script.htm

● コメント ●

ありがとうございます。 (hkom)

 早速、「ぽっとの陽だまり研究室」をご覧になり、しかも分析までして戴き恐縮です。(ソースコードが汚くて、文法が間違っていて、読むのが大変だったことは私も同様でした(苦笑)。excite blog内では結構有名なブログなのですが、「それでこんな感じなのか?」と驚愕しました。)

>相当、えげつない(失礼)記述がなされていました。一見してわかりませんでした。「<script src="http://pds.exblog.jp/pds/1/200501/15/63/050115etc.gif"></script>」と言う形で、JavaScriptファイルが読み込まれていました。
 →そこしかあり得ないなあと思いつつ、それ以上の探索を諦めたのですが、やはりそこでしたか!
------------------------------------------
>このサイトの話なのですが、なぜかIEでアクセスすると落ちる現象に見回れました。仕方ないので、Operaでアクセスしています。
 →恐縮です。27日は特に重たかったようです。FLASHによる時計が重たいのと、どうもFC2サーバーも調子がよいとは言えない状況のようです。FC2からは改善に次ぐ改善をしているとの報告はあるのですが・・・。
 ところで、私はSleipnirを使い込んでいるのですが、そろそろFirefoxをメインにシフトしようかと思案中です。Sleipnirの細部まで行き届いた使い勝手の良さは、まだまだFirefoxでも得られそうもないため躊躇しているのですが、実は知識がないためにplug-inを十分使いこなせないだけかも知れません・・・。
------------------------------------------
>CSSの勉強ですが、私はある程度、文法を理解したらテンプレートの改造でウェブサイトを作ることはよした方がいいと思っています。テンプレートは自分で作ったものではないためどこがどうなっているのか完全に理解することは難しいです。
 →確かにそれは言えますね。しかし昨年末に、烏滸がましくもFC2公式テンプレートに関して、センタリングレイアウトの一般論をFc2Wikiに投稿する、という「公約」をしてしまったことから、年末年始から今日までの一ヶ月以上の間、ずっとまさに「テンプレート改造」に追いまくられているのです。18種類の左寄せ固定幅テンプレートを、一切の表や画像をHTMLから排除し、CSSだけでセンタリングレイアウトしようと言う計画で、遅々として進まないのですが、既に峠は越え、Wiki原稿としてどうまとめるか、と言う段階に入っています。もう少しそちらで頑張り抜きたいという思いで精一杯と言うところです。
 
>忙しいかもしれませんが、時間を見てもう一度完全に作り直してみることはいいことだと思います。
 →そうですね。上のセンタリング一般論が終わったら取りかかりたいと考えております。

>余談ですが、私のサイトからリンクを貼っておきます。
 →恐縮です。こちらも同様に貼らせて戴きます。色々とご教授して戴くことになると思いますが、よろしくお願いします。

● コメント ●

見てきました (K)

「ぽっとの陽だまり研究室」見てきました。(ソースコードが汚くて、文法が間違っていて、読むのが大変だったことは秘密です。)

相当、えげつない(失礼)記述がなされていました。一見してわかりませんでした。
陽だまりさんのところで「<script src="http://pds.exblog.jp/pds/1/200501/15/63/050115etc.gif"
</script>」と言う形で、JavaScriptファイルが読み込まれていました。(アップロードが画像のみという制限でもあるからこのような形になっていると思われます)
これによって、最近のブラウザは:hoverでメニューを動かして、IEはJavaScriptを利用し、マウスが乗っかったときだけそのliタグにoverクラスを付加するというやり方で擬似的に:hoverを演出しているようです。
(詳細に解説書いてしまった……失礼)

このサイトの話なのですが、なぜかIEでアクセスすると落ちる現象に見回れました。仕方ないので、Operaでアクセスしています。

CSSの勉強ですが、私はある程度、文法を理解したらテンプレートの改造でウェブサイトを作ることはよした方がいいと思っています。テンプレートは自分で作ったものではないためどこがどうなっているのか完全に理解することは難しいです。例え、自分の作ったものでも時間がたつにつれて忘れてしまうものです。
忙しいかもしれませんが、時間を見てもう一度完全に作り直してみることはいいことだと思います。
では。

余談ですが、私のサイトからリンクを貼っておきます。

● コメント ●

早速のレス感謝! (hkom)

 コメントありがとうございます。
 階層メニューはやっぱり無理ですかぁ!
 ご存じかも知れませんが、excite blogで「ぽっとの日だまり研究室」という、exciteブログのカスタマイズに関するブログがありますが、その冒頭にCSSで実現していると思われる階層メニューがあって、それはIEでも展開するのです。しかし当該ブログの関連すると追われる部分のHTMLとCSSをコピペして色々試してみたのですが、細部を検討しても仕組みが分からないのです。まるまるコピペすると確かにIEでも階層メニューが展開するのですが、HTML内で関連しないと思われる部分を削除してみると階層メニューが作動しなくなったりして、どうやって動かしているのか分析しても解明出来ませんでした。
 ぽっとさんに聞いてみるしかないか、と解明は諦めました。

 なお、ポップアップについてはCSSで出来るとのこと、そう言われれば可能な気がしますのでチャレンジしてみます。
 それとmozilla系ブラウザにおいて、マウスover状態にするとレイアウトが崩れる現象は前々から承知しているのですが、直すのが面倒で(苦笑)放置状態になっています。ご迷惑を掛けて恐縮です。
 画像で作ったMyブログのタイトル部分も、マウスオーバー状態にすると左下に移動してしまうなど、非常に不安定です。その他、現在の私のブログのHTMLとCSSは、CSS学習の初期状態の時のままとなっているため、修正しなければならない箇所が満載ですので「いつかまとめてやろう」と思いながら、つい先送りしてきました。まとまった時間が取れる時に、閲覧者に不快な思いをさせないためにも、修正したいと思います。
 

● コメント ●

無理ですね (K)

夢を潰すようですが、無理です。
昔、色々試しました。まず、IEはa:hoverしか対応しておりません。しかも、タグ内にhref要素があることが必須です。aタグを二重ネスト(文法違反)しても、もちろん、動きません。
よって、いわゆる階層メニューは作れません。
もしかしたら、IEの独自属性を探したらあるかもしれませんが、私の記憶にはそのようなことをするプロパティは無かったはずです。

ただ、貴殿のサイトの一番上に並んでいる掲示板等のリンクのポップアップ表示はIEも含め、CSSで実現することが出来ますよ。挑戦してはいかがでしょうか?

やり方まで書くと論文発表になりかねないのでこのくらいで。w

追記:Firefoxで見ていると、:hoverがかかっている部分がピコピコ動いて鬱陶しいです。大変かもしれませんが、なにとぞ修正お願いします。

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/133-dc562a88

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200501251836
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。