社長：我が社のウェブページもなんかイマドキな技術を取り入れたいですね。ヒトに易しく処理系にも優しいという感じ。
基盤：たとえば？
社長：そうですね、最近見たなかでとても良いなと思ったのは、ページ内で折りたたんだり開いたりするあれです。いちいちポップアップされたりするのすごく嫌ですし。あと、その場でその部分だけ文字拡大できるとか。
基盤：私の育った時代ですとそういうのは SSI とか iframe でした。
社長：（笑）ブラウザだけでできないとね。サーバにもネットワークにも負担をかけない、結果的にユーザの懐にも負担をかけない。応答は最速でユーザは気持ちが良い。ページを書く側も簡単。ブラウザにもサーバにも依存しない実現方法。将来表示できなくなったりすると困るからシンプルで安定した仕様。HTML だけでできるとベストですね。
基盤：最近はHTMLも5とからしいですからね。WordPressでサポートしてくれていると手軽で良いのですが… ちょっとぐぐってみます… どうやらこの、details というタグを使うみたいですね。
詳しくはここをご覧ください
これは details というタグを使って折りたたんだ情報です。デフォルトでは折りたたまれていますが、クリックすると開きます。社長：おお、これこれ。なるほど、タグだけでやれるのか。まあ、当然そうあるべきものだよね。ちょっと洒落た表示をしようとするとすぐにほにゃららスクリプトだーって、嫌な間に合わせの時代が終わりを告げたと。
社長：ところでこれって、脚注的なものに使うのも良さそうね。脚注とかって、紙印刷の時代の異物感があるしね。インタラクティブじゃない紙。んーでも、文書全体を公式に残すのには必要な表現方法ではあるのかな脚注。
基盤：埋め込みついでに、data URI を使うとこんな感じになりますね。残念ながら、どのブラウザでも画像として表示されません。↓
deta URIによる画像埋め込み例
ここには data URI scheme で表現された画像が表示されるはずなんですが →社長：detailed の中に書ける要素って制限があるんですかね。そもそもいつのHTMLからなんだろう。
基盤：HTML5.1から、とありますね。つまり、3年くらい前からです。2020年3月の時点で主要全ブラウザとモバイル系で対応済だそうです。
社長：そうですか、それで最近目にするようになったのか。ついに我が社も時代に追いついて来ましたね。てか、手書きでHTMLを書ける時代が戻って来たようにも思えてうれぴー。
社長：あれ？でも、選択した details を開いた状態で印刷って、できるのかな？？
2020-0512 SatoxITS