Web技術

HTML、CSS、JavaScript等、広くWeb(World Wide Web, WWW)に関する技術について扱う。

HTML

Hypertext Markup Language(HTML)は、Webページの構造を記述するための言語。

長らくWorld Wide Web Consortium(W3C)が規格を決めてきたが、Web Hypertext Application Technology Working Group(WHATWG)という対抗組織が結成されて、W3C系とは別のHTML規格を作るなどしていた。
結局WHATWG側が勝利(?)し、W3C側のHTMLはHTML5.2で打ち止めになり、以降はWHATWG側のバージョンのつかない "HTML Living Standard" のほうに一本化されることになった。

ルビに関して

前述の通り、W3CとWHATWGで微妙に異なった規格が作られていた後WHATWG側に統合された経緯から、W3C側のHTML5にのみ存在した機能の一部が破棄されている。

中でも日本人が引っかかりがちなのがルビ（振り仮名）に関する部分である。

HTML5では、

<ruby>
<rb>朝</rb><rb>寝</rb><rb>坊</rb>
<rtc><rt>あさ</rt><rt>ね</rt><rt>ぼう</rt></rtc>
</ruby>

出典: HTML5/テキスト/ruby要素 ルビ（ふりがな）を振る - TAG index

のようにrbタグとrtcタグで熟語ルビをマークアップすることができたが、rb、rtcタグはWHATWG版では廃止された機能となった。

現行の規格のルビに関する説明では熟語ルビについて触れられているが、

<ruby>
朝<rt>あさ</rt>寝<rt>ね</rt>坊<rt>ぼう</rt>
</ruby>

のように、HTMLの層ではモノルビと同じマークアップを行い、CSS等の層で区別することになったようである。

JavaScript

DOM操作

例:さいころを振る

<!DOCTYPE html>
<html lang="ja">

<body>
    <div id="app">
        <!-- ここにいろいろ要素を追加していく -->
    </div>
    <script>
        // DOM要素の取得
        const masterEl = document.querySelector("#app");
        // 追加したい要素の生成
        const btn = document.createElement("button");
        btn.innerText = "さいころを降る";
        // 要素を子として追加
        masterEl.appendChild(btn);
        // イベントの登録
        btn.addEventListener("click", (e) => {
            // 1から6のランダムな整数
            const rnd = Math.floor(Math.random() * 6 + 1);
            // 要素を生成
            const p = document.createElement("p");
            p.innerText = rnd;
            // 要素を追加
            // なお、JavaScriptの函数は函数閉包がつくられるため、masterEl変数が使える
            masterEl.appendChild(p);
        });
    </script>
</body>

</html>

TypeScript

Node.js

サーバーサイドJavaScript実行環境。
サーバーサイドということは他のよくある軽量プログラム言語と同じ立場なので、Web技術かというと怪しいが……

  1. 私がそれに嵌まった。 ↩

最終更新: 2021-07-10 12:45:14 +0900

[Top]

This page is generated by sinanoki.