こういうのをもっと楽にできないのだろうか(´･ω･｀)？

こんな感じのやつ(´･ω･｀)

ちなみにここに至る流れは、

Kotlin Koans、これきちんと勉強しないと解けないやつやんけヽ(`Д´)ﾉ
　↓
でも全部翻訳するのも時間がかかりすぎるし、基本部分だけ読んでなんか作るかぁ…
　↓
取り敢えず読む
　↓
(＃＾ω＾)ｲﾗｲﾗ
　↓
って、なんで相変わらず、プログラミング言語の解説ページは紙ベース、HTML以上の進歩がないんだよヽ(`Д´)ﾉ
　↓
スニペットと文章による説明って、紙の書籍とかPCというか大きいディスプレイで読む分にはなんとかなるけど、スマホとかだとお話にならんじゃろがいヽ(`Д´)ﾉ　←老眼や老化のせいで小さい字が読みにくいというのもある("･ω･ﾞ)
　↓
断片的で体系的な学習を阻害する部分もある。
　↓
ということで、標準的な一個のプログラムを提示し、説明したい各要素に触れることによって説明文等が表示出来る新しいフォーマットがあるべきじゃろヽ(`Д´)ﾉ
　↓
だけど僕にはオツムがない～(・∀・)♪　←新しいフォーマットを考える頭も気力もない
　↓
まあ、aタグでtitle属性に書けば一応実現できるけどねぇ…(　゜σ･ﾟ）ﾎｼﾞﾎｼﾞ
　↓
スマホだと上手く動かない？ onstarttouchを使えばいいのかもしれないがaタグだとインテントが飛んでそれをキャンセルする手間が発生する？ 加えて言うと出来れば説明文自体は他所から持って来たい。
　↓
取り敢えず、スマホ操作時に影響がない表示の実現をcssで図る。
CSSだけでツールチップを表示する
　↓
だがしかし、説明文の分離とフェッチを俺氏のcss知識ではどうやっていいかわからない(´･ω･｀)
　↓
cssは諦めて、なんやかんやでjQueryで分離も可能に。そこまでしてないけれども、説明文は別ページに置いておいたり、もう少しidとclassをまとめることも出来そう。
　↓
何故かdivでx方向のスクロールが出来ないと勘違いし、一時、iframeをいじくったり、srcdoc属性でjQuertyが使えないかと色々やってはまる。(正確に言うとwordpressのエントリ上のiframeのsrcdoc属性でjQueryを使おうとしていた。)
結局divで出来ることに気づいてiframeのことは忘れることにした(ﾉ∀`)
　↓
キーワードの色付とか出来ないかなと思って色々奮闘したが、いまいち希望通りの形にならず、同時に「あれ？ これ説明文を作る時に色付けとかすればいいのか(´･ω･｀)？」と気付き、取り敢えず、
当初の新フォーマット的なものの提示だけしとこう(・∀・)ということに。

今回のものはコードが対象だけれども、これってもう一歩進めてあらゆる文書、解説書のみならず、小説とかでも語句の意味や時代背景とかを埋め込んで表示させるとかも出来ると思うし、やるべきなんではなかろうかと思う。英語文書の日本語訳埋め込みとかでもいいし。

ちなみに今回、上に表示divを配置したのはスマホで見た時に下に表示divがあると指で隠れてしまうという致命的欠陥があることに気づいた為(ﾉ∀`)

何はともあれ、
こういったことが簡単にできるフォーマットなり、統一的な決まりが作られて、より電子機器の利点がより活かされる流れになってほしい(・∀・)

もしかして俺氏が寡聞なだけで既にあるけど流行ってないとかなのだろうか…(´･ω･｀)？