プログラミング独学、day46の学習で得たことを教えて！
・jQueryの実装「ツールチップ」
・CSS設計「BEM」
・Discordの使い方
今日は、つまずいた「ツールチップ」についてアウトプットします
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜0時に独学しています！
→プログラミング学習day46、もりけん塾day2
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
【jQuery】マウスhoverで表示されるツールチップ
jQueryのツールチップを学習しました。参考→「書籍：jQuery標準デザイン講座」
【完成物】
マウスをhoverすると、アイコンの上にツールチップが出てくる。
構成を考える
さて、これを作るのに最初に考えることは「どのような構成で作られているか?」ということ。
jQueryに限らずかもですが、
という作業がとても大切だと感じています。
ということで、構成を考えてみます。
【構成】
① アイコンにマウスオーバーする
② ツールチップを表示する
③ ツールチップの位置を調整する
④ マウスアウトでツールチップを非表示
そう、今回は③のツールチップの位置を調整するのに苦戦しまくりました。
まず、そこをアウトプットしていきます。忘れないうちに急げ自分w
ツールチップの位置を調整せよ
まず、ツールチップをただ表示させてみます。
↑まずは、アイコンが並んでいるli要素にhoverメソッドを使っていきます
↑そしてツールチップを表示する。
“bodyの中にツールチップのdivを新しく追加” →append()メソッド
要素の追加(今回なら<div><p>を追加したい)するとき、
prepend()→セレクタの冒頭に追加
append()→セレクタの末尾に追加
の2つのメソッドがある
✔︎今回はなぜappend()末尾なのか?
→ためしにprepend()にしてみた！が、挙動は変わらなかった。
今回は、bodyの最初でも最後でもどちらでもいいようす。
<li>が並んでいるリストに<li>を追加する場合など、順番が関係あるときには気を付ける。
「leftからアイコンの距離」ー 「ツールチップの幅 ー アイコンの幅 /2」
これらの求めた位置を、.css()メソッドでCSSを書き換える。
→ここがよくわかんなかった。.css(top~)? .css(left~)? と混乱
cssメソッドは、
$("p").css("color", "#FF0000");
これは「指定のセレクタ」に「CSS」を設定するメソッド。
「color」を「#FF0000」に設定するという意味。
今回の場合は、
$("#tooltip").css("top",~)
$("#tooltip").css("left",~)
「tooltip」というセレクタのCSS「topとleft」を追加します
今回は、元々ツールチップにposition:absoluteが設定されています。ここでtop,leftプロパティを設定することで、画面の左上を起点として、上から左からセレクタがどのくらい離れているかを指定できます(ちょっと手書きひどいなw
これで、ツールチップが表示されました。
後は、
ツールチップにfadeInの動きをつけて完成です。
あとがき
全部の学習ログ残すのは無理だなと判断w
学習して特につまずいた部分、もう一度頭を整理しておきたい部分を抜粋して残していこうと思います。
＊今日の工夫＊
・「Lightshot Screenshot」のAPPをMacに入れた
→スクショが楽だし、jpgで保存される。コード入れるのこっちの方が楽。
・昨日のブログレイアウト使い回し。
・つまずいたときに、学習メモしといた。
今日は以上です。これから jQueryの実装練習やります。夜はまだまだだぜ〜！
Thanks：もりけんさん(@terrace_tec)
もりけんさんのHPはこちら→ 武骨日記
