MENU
片山ライティング事務所 売上を伸ばす「コトバ」を紡ぎあげます。
  1. ホーム
  2. HTML辞書

HTML辞書

Emmet

div.bounce$*3 は、Emmet というコードスニペット拡張ツールで使われる記法です。これを HTML や CSS コードエディタに入力すると、次のような 3 つの <div> 要素が生成されます。

<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>

div.bounce$*3 は、クラス名が連番で増えていく 3 つの <div> 要素を生成するエミット記法です。

div>button は、Emmet というコードスニペット生成ツールで使われる記法です。この記法を使うと、HTMLコードを迅速に生成できます。

意味

  • div は <div> 要素を生成します。
  • > は親子関係を示し、右側の要素が左側の要素の子であることを示します。
  • button は <button> 要素を生成します。

生成されるコード

この記法を入力すると、以下のような HTML コードが生成されます。

<div>
  <button></button>
</div>

link:css

Emmet の記法で、CSS ファイルを HTML ドキュメントにリンクさせるためのコードを素早く生成するものです。これを入力すると、次のような HTML の <link> 要素が生成されます。

<link rel="stylesheet" href="style.css">
  • link は <link> 要素を生成します。
  • :css は、そのリンクが CSS スタイルシートに関連するものであることを示し、rel="stylesheet" と href="style.css" を補完します。

簡単に言うと、link:css は、CSS ファイルを読み込むための <link> タグを自動生成するエミット記法です。

覚えておきたいHTML

Font Awesomeのリンク

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

integrityとcrossoriginについて
これらはセキュリティのための設定です。integrityは読み込んだファイルが安全かどうか確認し、crossoriginは外部サイトからファイルを安全に読み込むための設定です。

Google Fontsのリンク

<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">

このリンクを使うと、「Teko」という名前のフォントが読み込まれます。wght@500は文字の太さを示していて、500は中くらいの太さです。このフォントはCSSで指定して使います。例えば、font-family: 'Teko', sans-serif;と指定すると、そのフォントでテキストが表示されます。

& > div の意味

  1. & (アンパサンド) の役割:
    • & は、現在の親セレクタを参照するために使います。たとえば、SassやLessで親要素のスタイルの中に書いていると、その親のセレクタを指すことになります。
  2. > の意味:
    • > は「直接の子要素」を指定するセレクタです。つまり、親セレクタのすぐ下にある子要素だけを対象にします。
  3. div の意味:
    • div はそのままHTMLの<div>要素を指します。
.parent {
  color: blue;
  
  & > div {
    color: red;
  }
}
  • .parent は、クラスが parent の要素全体に適用されます。
  • & > div は、 .parent の直接の子要素である <div> に適用されます。

これを通常のCSSに変換すると、次のようになります。

.parent {
  color: blue;
}

.parent > div {
  color: red;
}

height: 300vh;

height: 300vh; は、要素の高さを「ビューポート高さの300倍」に設定するという意味です。ここで「ビューポート」というのは、ブラウザの表示領域のことです。

height: 300vh; の大きさ

  • vhの単位: vh は「viewport height（ビューポートの高さ）」の略で、ビューポートの高さの1%を指します。例えば、もしビューポートの高さが1000ピクセルなら、1vhは10ピクセルになります。
  • 300vhの意味:
    • height: 300vh; だと、ビューポートの高さの300倍という意味です。
    • つまり、もしビューポートの高さが1000ピクセルだとすると、300倍で30,000ピクセルの高さになります。

具体的な例

  • スマホの画面: スマホの画面が例えば800ピクセルの高さだとしたら、300vh はその800ピクセルの300倍なので、240,000ピクセルの高さです。
  • パソコンの画面: パソコンの画面が例えば900ピクセルの高さだとしたら、300vh はその900ピクセルの300倍なので、270,000ピクセルの高さです。

1. ルート要素＆文書メタデータ

文書の基本構造やメタデータに関するタグ。

  • html /* HTML文書であることを示す */
  • head /* 文書のヘッダ情報を表す */
  • title /* 文書にタイトルをつける */
  • link /* リンクする外部リソースを指定する */
  • meta /* その文書に関する情報（メタデータ）を指定する */
  • style /* スタイルシートを記述する */

2. セクション

文書のセクションや構造を示すタグ。

  • body /* 文書の本体を表す */
  • header /* ヘッダであることを示す */
  • footer /* フッタであることを示す */
  • article /* 記事であることを示す */
  • section /* 一つのセクションであることを示す */
  • nav /* ナビゲーションであることを示す */
  • aside /* 余談・補足情報のセクションであることを示す */
  • address /* 連絡先を示す */

3. グルーピングコンテンツ

コンテンツをグループ化するタグ。

  • p /* ひとつの段落（パラグラフ）であることを表す */
  • ol /* 順序のあるリストを表示する */
  • ul /* 順序のないリストを表示する */
  • li /* リストの項目を記述する */
  • dl /* 定義・説明リストを表す */
  • dt /* 定義・説明される言葉を表す */
  • dd /* 定義用語や言葉の説明をする */
  • div /* ひとかたまりの範囲として定義する */
  • main /* メインコンテンツであることを示す */
  • pre /* 半角スペースや改行をそのまま表示する */
  • blockquote /* 引用・転載セクションであることを表す */
  • figure /* 図表であることを示す */
  • figcaption /* 図表のキャプションを示す */

4. テキストレベルセマンティクス

テキストの意味やスタイルに関するタグ。

  • a /* ハイパーリンクを指定する */
  • span /* ひとつの範囲として定義する */
  • br /* 改行する */
  • time /* 日付や時刻を正確に示す */
  • strong /* 強い重要性を表す */
  • em /* 強勢する（アクセントを付ける）箇所を表す */
  • q /* 引用句・引用文であることを表す */
  • s /* すでに正確ではなくなった内容を表す */
  • wbr /* 改行しても良い位置を示す */
  • cite /* 作品のタイトルを表す */
  • code /* プログラムなどのコードであることを示す */
  • ruby /* ルビをふる */
  • rb /* ルビをふる文字を指定する（IE用） */
  • rt /* ルビのテキストを指定する */
  • rtc /* ルビテキストの集まりを指定する */
  • rp /* ルビを囲む記号を指定する */
  • small /* 免責・警告・著作権などの注釈や細目を表す */

5. 埋め込み型コンテンツ

画像やメディアなどの埋め込みコンテンツに関するタグ。

  • img /* 画像を表示する */
  • picture /* レスポンシブ・イメージを実現する */
  • source /* 動画や音声などのURLや種類を指定する */
  • iframe /* インラインフレームを作る */
  • video /* 動画を再生する */
  • audio /* 音声を再生する */
  • map /* イメージマップを作成する */
  • area /* イメージマップのハイパーリンク領域を設定する */
  • svg /* コードを記載して画像を描画する */

6. 表データ

テーブル（表）に関連するタグ。

  • table /* テーブル（表）を作成する */
  • tr /* テーブル（表）の横一行を定義する */
  • th /* テーブル（表）の見出しセルを作成する */
  • td /* テーブル（表）のデータセルを作成する */
  • caption /* テーブル（表）にキャプションをつける */
  • colgroup /* 表の縦列をグループ化する */
  • col /* 表の縦列の属性やスタイルを指定する */
  • tbody /* テーブル（表）のボディ部分を定義する */
  • thead /* テーブル（表）のヘッダ部分を定義する */
  • tfoot /* テーブル（表）のフッタ部分を定義する */

7. フォーム

フォーム関連のタグ。

  • form /* 入力・送信フォームを作る */
  • input /* フォームを構成する様々な入力部品を作成する */
  • label /* フォーム部品と項目名（ラベル）を関連付ける */
  • button /* ボタンを作成する */
  • select /* セレクトボックスを作成する */
  • option /* セレクトボックスや入力候補リストの選択肢を指定する */
  • textarea /* 複数行のテキスト入力欄を作成する */

8. インタラクティブ

ユーザーとのインタラクションを提供するタグ。

  • details /* 備考や操作手段などの詳細情報を折りたたみコンテンツで示す */
  • summary /* detailsの内容の要約を示す */

9. スクリプティング

JavaScriptなどのスクリプトを埋め込むタグ。

  • script /* 文書にJavaScriptなどのスクリプトを組み込む */
  • canvas /* 図形を描く */

<span></span>

<span> はHTMLのタグの一つで、ウェブページを作るときによく使われます。

1. <span> って何？

  • <span> は「インライン要素」と呼ばれるものの一種で、小さな範囲のテキストや要素を囲むために使われます。
  • 特に意味は持たないタグなので、デザインやスクリプトで特定の部分を操作したいときに使います。

2. 何のために使うの？

  • span を使うと、テキストの一部だけに色を付けたり、特定の部分だけを装飾したりすることができます。
  • 例えば、テキストの一部分にだけ強調表示をしたいときや、JavaScriptで特定の部分を操作したいときに便利です。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>spanの例</title>
    <style>
        .highlight {
            color: red;  /* 文字色を赤に */
            font-weight: bold;  /* 太字に */
        }
    </style>
</head>
<body>
    <p>この文章の中で、<span class="highlight">重要な部分</span>だけを強調しています。</p>
</body>
</html>

4. このコードがすることは？

  • 上の例では「重要な部分」というテキストを <span> で囲んでいます。
  • CSSで .highlight というクラスを定義し、その部分だけ赤色で太字にして強調表示しています。

5. ポイント

  • <span> はインライン要素なので、他のテキストと同じ行の中に表示されます。
  • <div> はブロック要素で、行全体を占めるのに対して、<span> は行内で部分的に使えるのが特徴です。
  • <span> 自体には特別な意味はなく、使うときは主にCSSで装飾を加えたり、JavaScriptでその部分を操作したりします。

6. どんなときに便利？

  • 文章の中で特定のキーワードだけを目立たせたいとき。
  • ウェブページの小さな部分を装飾したいけど、新しい行を作りたくないとき。
  • JavaScriptで特定の部分だけをクリックできるようにしたり、操作したりしたいとき。