hatsugenタグをつくろう

今回は「マークアップをはじめよう」シリーズ 番外編です。スピンオフです。

前回、人の発言を意味する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で見た目を整えています。

今回は以上です。
次回 から本編に戻ります。