今回は「マークアップをはじめよう」シリーズ 番外編です。スピンオフです。
前回、人の発言を意味するhatsugenタグというものを定義してタグとはなんたるかを説明しました。
四郎くんは<hatsugen>こんなもの本当の寿司じゃない</hatsugen>と言いました。
本来HTMLにはhatsugenタグなんていうハイカラなタグは無いのですが、
JavaScriptをつかってこれをhatsugenタグをつかえる環境をつくってみたので、もしよろしければご活用ください。
(PLAYボタンを押すとレンダリング結果が表示されます)
この環境内ではブラウザに、
四郎くんは<hatsugen>こんなもの本当の寿司じゃない</hatsugen>と言いました。
というHTMLを渡すと、
ブラウザがhatsugenタグの中身に「」をつけて、
四郎くんは「こんなもの本当の寿司じゃない」と言いました。
と、表示してくれます。
仕組み
仕組みとしては、
<!--HTML--> <script>document.createElement("hatsugen");</script>
と、JavaScriptでhatsugenタグをつくり、
/* CSS */ hatsugen { display: inline-block; } hatsugen:before { content: "「"; } hatsugen:after { content: "」"; }
CSSで見た目を整えています。
今回は以上です。
次回 から本編に戻ります。