HTMLからCSS・JavaScriptへつなぐ — link・script・class・data属性 - HTML入門 — Webページの構造とタグのチートシート

HTMLは単体でもページを作れますが、見た目を整えるにはCSS、操作に応じた動きを付けるにはJavaScriptを組み合わせます。この章では、HTMLから次の学習へ進む接続点を整理します。

CSSを読み込む

CSSファイルは head 内で link 要素を使って読み込みます。

<link rel="stylesheet" href="/styles.css">

html

構文： <link rel="stylesheet" href="CSSファイルのURL">

属性	説明
`rel`	現在の文書との関係。CSSなら `stylesheet`
`href`	読み込むCSSファイル

戻り値： HTML要素なので戻り値はありません。ブラウザがCSSを読み込み、HTMLにスタイルを適用します。

CSSそのものはCSS入門で詳しく学べます。

JavaScriptは script 要素で読み込みます。

<script src="/main.js" defer></script>

html

<script type="module" src="/main.js"></script>

html

DOM操作はJavaScriptのDOM操作で扱っています。

<button class="button" data-action="open-menu" type="button">
  メニューを開く
</button>

html

CSS用には class、特定位置や一意の対象には id、JavaScriptに渡す独自情報には data-* を使う、と分けると整理しやすいです。

ReactではJSXを書きます。JSXはHTMLそのものではありませんが、HTMLの知識がほぼそのまま土台になります。

function Profile() {
  return (
    <article>
      <h1>プロフィール</h1>
      <p>HTMLの構造をReactコンポーネントで表現します。</p>
    </article>
  );
}

jsx

ただし、JSXでは class ではなく className、for ではなく htmlFor を使うなど、一部の属性名が変わります。詳しくはReactのJSXとコンポーネントで扱っています。

次章では、HTMLだけで小さなプロフィールページを作るハンズオンに進みます。