diff --git a/src/pages/reference/tag.mdx b/src/pages/reference/tag.mdx new file mode 100644 index 0000000..285c735 --- /dev/null +++ b/src/pages/reference/tag.mdx @@ -0,0 +1,240 @@ +--- +layout: "@/layouts/MarkdownLayout.astro" +--- + +export const title = "いろいろなタグ"; + +# {title} + +HTMLにはたくさんのタグが用意されています。 +これを書いている人も全部を覚えているわけではありません。 + +ただ暗記するのではなくなにができるのかを把握して、必要なときに調べられるようにしましょう。 + +正しくタグを使いこなすようになると、ウェブページを公開したときに優位な評価を受けやすくなります。 + +## このページの読み方 + +以前、fontタグで色を変える方法を以下のように紹介しました。 + +> 赤色にしたい範囲を``と``で囲みました。 +> +> よく見ると、開始のタグには`color="red"`という部分がありますね。 +> このfontタグにはcolorという**属性**が用意されており、これを使うことで色を指定できるのです。 +> +> ```html +> <タグ名 属性名="値">対象 +> ``` + +このページでは、属性の説明をするときに以下のような表記を使います。 + +例: fontタグのcolor属性を説明したいとき (``) + +| 要素 | 説明 | 取りうる値 | 省略 | +| :-- | :-- | :-- | :-: | +| `font` | 中身の文字の見た目を変えるタグ | - | - | +| `font[color]` | 文字の色を指定する属性 | `red`のような色の名前、`#ff0000`のようなカラーコードなど | OK | + +## 見た目を変えるタグ + +### テーブル table + +| 要素 | 説明 | 取りうる値 | 省略 | +| :-- | :-- | :-- | :-: | +| `table` | 表を作成するタグ | 直下に`tr`タグを配置 | - | +| `tr` | テーブルの行を作成するタグ | 直下に`th`または`td`タグを配置 | - | +| `th` | テーブルの見出しセルを作成するタグ | - | - | +| `td` | テーブルのデータセルを作成するタグ | - | - | + +```html + + + + + + + + + + + + + +
名前年齢
山田太郎25
鈴木花子30
+``` + + + + + + + + + + + + + + +
名前年齢
山田太郎25
鈴木花子30
+ +### 画像 img + +| 要素 | 説明 | 取りうる値 | 省略 | +| :-- | :-- | :-- | :-: | +| `img[src]` | 表示する対象の画像 | 画像のURLなど | 不可 | +| `img[alt]` | 画像が表示できない場合に代わりに表示するテキスト | 任意 | 可 | + +`` + + +### 入力 + +| 要素 | 説明 | 取りうる値 | 省略 | +| :-- | :-- | :-- | :-: | +| `input[type="text]` | テキスト入力欄を作成するタグ | - | - | +| `input[type="password"]` | パスワード入力欄を作成するタグ | - | - | +| `input[type="checkbox"]` | チェックボックスを作成するタグ | - | - | +| `input[type="checkbox"][name]` | 同じname属性を持つチェックボックス同士はグループ化される属性 | 任意の文字列 | 可 | +| `input[type="radio"]` | ラジオボタンを作成するタグ | - | - | +| `input[type="radio"][name]` | 同じname属性を持つラジオボタン同士はグループ化される属性 | 任意の文字列 | 可 | +| `input[type="file"]` | ファイル選択欄を作成するタグ | - | - | +| `button` | ボタンを作成するタグ | - | - | +| `select` | ドロップダウンリストを作成するタグ | 直下に`option`タグを配置 | - | +| `option` | ドロップダウンリストの選択肢を作成するタグ | - | - | +| `textarea` | 複数行のテキスト入力欄を作成するタグ | - | - | + +```html + +``` + + + +
+
+
+ +```html + +``` + + + +
+
+
+ +```html +リンゴ +バナナ +オレンジ +``` + +リンゴ +バナナ +オレンジ + +
+
+ +```html +男性 +女性 +``` + +男性 +女性 + +
+
+ +```html + +``` + + + +
+
+
+ +```html + +``` + + + +
+
+
+ +```html + +``` + + + +## リスト + +| 要素 | 説明 | 取りうる値 | 省略 | +| :-- | :-- | :-- | :-: | +| `ul` | 順不同リストを作成するタグ | 直下に`li`タグを配置 | - | +| `ol` | 順序付きリストを作成するタグ | 直下に`li`タグを配置 | - | +| `li` | リストの項目を作成するタグ | - | - | + +```html + +``` + + + +
+
+ +```html +
    +
  1. りんご
    2. +
  2. バナナ
    3. +
  3. オレンジ
    4. +
+``` + +
    +
  1. りんご
    2. +
  2. バナナ
    3. +
  3. オレンジ
    4. +
+ +## 区切りを作るタグ + +| 要素 | 説明 | 取りうる値 | 省略 | +| :-- | :-- | :-- | :-: | +| `div` | ただ区切りを作るタグ | - | - | +| `span` | ただ文中の区切りを作るタグ | - | - | + +## ブラウザに情報を与えるためのタグ + +| 要素 | 説明 | 取りうる値 | 省略 | +| :-- | :-- | :-- | :-: | +| `html` | HTML文書全体を囲むタグ | 直下に`head`タグと`body`タグを配置 | - | +| `head` | HTML文書の情報を記述するタグ | 直下に`title`タグや`meta`タグなどを配置 | - | +| `title` | HTML文書のタイトルを指定するタグ | - | - | +| `body` | HTML文書の本文を記述するタグ | 直下に見た目を変えるタグや区切りタグなどを配置 | - | +| `script[src]` | 外部のJavaScriptファイルを読み込むタグ | JavaScriptファイルのURLなど | 不可 | +| `link[rel="stylesheet"][href]` | 外部のCSSファイルを読み込むタグ | CSSファイルのURLなど | 不可 | diff --git a/src/pages/tips/tag.mdx b/src/pages/tips/tag.mdx deleted file mode 100644 index 285c735..0000000 --- a/src/pages/tips/tag.mdx +++ /dev/null @@ -1,240 +0,0 @@ ---- -layout: "@/layouts/MarkdownLayout.astro" ---- - -export const title = "いろいろなタグ"; - -# {title} - -HTMLにはたくさんのタグが用意されています。 -これを書いている人も全部を覚えているわけではありません。 - -ただ暗記するのではなくなにができるのかを把握して、必要なときに調べられるようにしましょう。 - -正しくタグを使いこなすようになると、ウェブページを公開したときに優位な評価を受けやすくなります。 - -## このページの読み方 - -以前、fontタグで色を変える方法を以下のように紹介しました。 - -> 赤色にしたい範囲を``と``で囲みました。 -> -> よく見ると、開始のタグには`color="red"`という部分がありますね。 -> このfontタグにはcolorという**属性**が用意されており、これを使うことで色を指定できるのです。 -> -> ```html -> <タグ名 属性名="値">対象 -> ``` - -このページでは、属性の説明をするときに以下のような表記を使います。 - -例: fontタグのcolor属性を説明したいとき (``) - -| 要素 | 説明 | 取りうる値 | 省略 | -| :-- | :-- | :-- | :-: | -| `font` | 中身の文字の見た目を変えるタグ | - | - | -| `font[color]` | 文字の色を指定する属性 | `red`のような色の名前、`#ff0000`のようなカラーコードなど | OK | - -## 見た目を変えるタグ - -### テーブル table - -| 要素 | 説明 | 取りうる値 | 省略 | -| :-- | :-- | :-- | :-: | -| `table` | 表を作成するタグ | 直下に`tr`タグを配置 | - | -| `tr` | テーブルの行を作成するタグ | 直下に`th`または`td`タグを配置 | - | -| `th` | テーブルの見出しセルを作成するタグ | - | - | -| `td` | テーブルのデータセルを作成するタグ | - | - | - -```html - - - - - - - - - - - - - -
名前年齢
山田太郎25
鈴木花子30
-``` - - - - - - - - - - - - - - -
名前年齢
山田太郎25
鈴木花子30
- -### 画像 img - -| 要素 | 説明 | 取りうる値 | 省略 | -| :-- | :-- | :-- | :-: | -| `img[src]` | 表示する対象の画像 | 画像のURLなど | 不可 | -| `img[alt]` | 画像が表示できない場合に代わりに表示するテキスト | 任意 | 可 | - -`` - - -### 入力 - -| 要素 | 説明 | 取りうる値 | 省略 | -| :-- | :-- | :-- | :-: | -| `input[type="text]` | テキスト入力欄を作成するタグ | - | - | -| `input[type="password"]` | パスワード入力欄を作成するタグ | - | - | -| `input[type="checkbox"]` | チェックボックスを作成するタグ | - | - | -| `input[type="checkbox"][name]` | 同じname属性を持つチェックボックス同士はグループ化される属性 | 任意の文字列 | 可 | -| `input[type="radio"]` | ラジオボタンを作成するタグ | - | - | -| `input[type="radio"][name]` | 同じname属性を持つラジオボタン同士はグループ化される属性 | 任意の文字列 | 可 | -| `input[type="file"]` | ファイル選択欄を作成するタグ | - | - | -| `button` | ボタンを作成するタグ | - | - | -| `select` | ドロップダウンリストを作成するタグ | 直下に`option`タグを配置 | - | -| `option` | ドロップダウンリストの選択肢を作成するタグ | - | - | -| `textarea` | 複数行のテキスト入力欄を作成するタグ | - | - | - -```html - -``` - - - -
-
-
- -```html - -``` - - - -
-
-
- -```html -リンゴ -バナナ -オレンジ -``` - -リンゴ -バナナ -オレンジ - -
-
- -```html -男性 -女性 -``` - -男性 -女性 - -
-
- -```html - -``` - - - -
-
-
- -```html - -``` - - - -
-
-
- -```html - -``` - - - -## リスト - -| 要素 | 説明 | 取りうる値 | 省略 | -| :-- | :-- | :-- | :-: | -| `ul` | 順不同リストを作成するタグ | 直下に`li`タグを配置 | - | -| `ol` | 順序付きリストを作成するタグ | 直下に`li`タグを配置 | - | -| `li` | リストの項目を作成するタグ | - | - | - -```html - -``` - - - -
-
- -```html -
    -
  1. りんご
    2. -
  2. バナナ
    3. -
  3. オレンジ
    4. -
-``` - -
    -
  1. りんご
    2. -
  2. バナナ
    3. -
  3. オレンジ
    4. -
- -## 区切りを作るタグ - -| 要素 | 説明 | 取りうる値 | 省略 | -| :-- | :-- | :-- | :-: | -| `div` | ただ区切りを作るタグ | - | - | -| `span` | ただ文中の区切りを作るタグ | - | - | - -## ブラウザに情報を与えるためのタグ - -| 要素 | 説明 | 取りうる値 | 省略 | -| :-- | :-- | :-- | :-: | -| `html` | HTML文書全体を囲むタグ | 直下に`head`タグと`body`タグを配置 | - | -| `head` | HTML文書の情報を記述するタグ | 直下に`title`タグや`meta`タグなどを配置 | - | -| `title` | HTML文書のタイトルを指定するタグ | - | - | -| `body` | HTML文書の本文を記述するタグ | 直下に見た目を変えるタグや区切りタグなどを配置 | - | -| `script[src]` | 外部のJavaScriptファイルを読み込むタグ | JavaScriptファイルのURLなど | 不可 | -| `link[rel="stylesheet"][href]` | 外部のCSSファイルを読み込むタグ | CSSファイルのURLなど | 不可 |