フォローアップWeb/JS.part8 ドラ○エ風メニューをオンクリックで表示する

hirafuji
こんにちは!hirafujiです。
まさかの2連投です。以前もこんな事があったような…。

ところで昨日、漫画ブログの第8話が公開になりました。
今回はてる先輩が主役の様です。

「てる先輩、頑張れ!あなたならできる!」のコマの「ひらふじ」が、めっちゃめちゃにかわいいので、皆さんぜひ一度覗いてみてくださいね(笑)。

さて今回のフォローアップでは、前回に引き続き 「jQuery セレクタの使い方&リファレンスの歩き方」について学びました。
今回のフォローアップは実習形式でしたので、動画の公開の予定はありません。

先生!CSSとjsのコンビネーションに感動です!

【内容:ドラ○エ風メニューボックスを表示する】

今回は、前回の続きの他に、この様なHTML+CSSをごにょごにょして、
before

オンクリックで、カーソルの右下にこの様なドラ○エ風のメニューボックスが表示されるようにする、という内容に挑戦しました。
after

本当は、マウスの動きに合わせてカーソルが動いたり、タイトルが表示されたりともっと面白い課題なのですが…お見せできなくて残念です。

【なぜ、CSSでメニューを整形しないのか?】

最近、毎日の様にCSSと格闘する簡単なお仕事をしている私は、ふと、1つの疑問を抱きました。

「なぜ、CSS で は な く あ え て js で 整 形 し て い る のか…!」

【hirafuji、カルチャーショックをうける】

居ても立ってもいられず、質問してみたところ、衝撃の答えが返ってきました。

その答えとは:

  1. メニューの項目の文字数がバラバラだったり、
  2. 見る人の環境によって、フォントサイズが大きかったり小さかったりすることがある。
  3. そんな悪条件に負けないたくましいメニューボックスを表示してあげるために、
  4. ベストな横幅を計算してあげる必要があるから。

な、なんと!
なるほど、このたくましいメニューボックスは、CSSだけでは表示できないんですね!

逆の言い方をすれば、jsの力を借りれば、こんなにもたくましいメニューボックスを表示してあげることができるんですね!感動した!

【こうしてどんどん色々な事ができる様になるんですね】

この感動は、「CSSを知っているだけ」でも、「jsを知っているだけ」でも、そして「CSSもjsも勉強しただけ」でも味わう事ができなかったと思います。

幅広い分野の、様々な知識を学ぶことができ、しかもOJTでたくさん困った経験があったからこそ、味わえたのだなぁ〜と、じぃ〜ん(一番上の画像参照)ときてしまいました。

こんな感動を、いつまでも、何度でも味わえる人間でいれる様、これからも全力で学び続けたいと思います!

コメントをどうぞ

名前: (Required)

eMail: (Required)

Website:

Comment:

Spam Protection by WP-SpamFree