diff --git a/docs/03extras/04website/01html/index.mdx b/docs/03extras/04website/01html/index.mdx new file mode 100644 index 000000000..768aed30f --- /dev/null +++ b/docs/03extras/04website/01html/index.mdx @@ -0,0 +1,240 @@ +--- +sidebar_position: 1 +--- + +import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/InteractiveCodeEditor"; + +# 一般的な Web サイトの作り方 + +## HTML とは + +通常の Web サイトは、HTML を用いて作るのが一般的です。以下に HTML を用いた Hello World! の例を載せます。 + + + + + + + Document + + +

Hello World!

+ +\ +`} +/> + +様々なことが書いてあり非常にわかりにくいですが、重要なのは `` と `` の間に挟まれた部分です。HTML は、タグと呼ばれるもので内容を囲うことで要素を作ります。今回の場合は、`` と `` で囲まれた部分が内容になっていて、`

` と `

` で囲まれたところが段落という意味になっています。つまり、`<` と `>` で囲まれる開始タグと `` で囲まれる終了タグで内容を挟むことで要素を作ります。終了タグのはじめには、`/` があることに注意してください。 + +それでは、他のタグも見てみましょう。HTML には、非常に豊富なタグが用意されているので、大抵のことはできます。 + +### 見出し要素 + +`

` タグは、見出しを表します。`

Head

` のようにすることで、Head という見出しになります。 + + + + + + + Document + + +

Head

+ +\ +`} +/> + +`

` タグは、`

` タグの一つ下の見出しを表します。同じように `

` タグ、`

` タグ、`

` タグ、`
` タグがあります。 + + + + + + + Document + + +

Heading level 1

+

Heading level 2

+

Heading level 3

+

Heading level 4

+
Heading level 5
+
Heading level 6
+ +\ +`} +/> + +### 番号なし箇条書き + +箇条書きもできます。次のように書けば、箇条書きができます。 + +```html +
    +
  • First Item
    • +
  • Second Item
    • +
  • Third Item
    • +
+``` + + + + + + + Document + + +
    +
  • First Item
    • +
  • Second Item
    • +
  • Third Item
    • +
+ +\ +`} +/> + +さらに、次のように入れ子にすることもできます。 + +```html +
    +
  • First Item
    • +
  • + Second Item +
      +
    • First Sub Item
      • +
    • Second Sub Item
      • +
    +
    • +
+``` + + + + + + + Document + + +
    +
  • First Item
    • +
  • + Second Item +
      +
    • First Sub Item
      • +
    • Second Sub Item
      • +
    +
    • +
+ +\ +`} +/> + +### 番号付き箇条書き + +番号付きの箇条書きもできます。次のように書けば、番号付きの箇条書きができます。 + +```html +
    +
  1. First Item
    2. +
  2. Second Item
    3. +
  3. Third Item
    4. +
+``` + + + + + + + Document + + +
    +
  1. First Item
    2. +
  2. Second Item
    3. +
  3. Third Item
    4. +
+ +\ +`} +/> + +### リンク + +リンクは次のように作れます。開始タグと終了タグの間に表示する文字を書いて、href 属性の中にリンク先の URL を記載します。 + +```html +Introduction to Algorithms +``` + + + + + + + Document + + + Introduction to Algorithms + +\ +`} +/> + +### 画像 + +画像は、次のようにして表示することができます。src 属性に、画像のパスを書き、alt 属性にその画像の説明を書きます。 + +```html +Introduction to Algorithms +``` + + + + + + + Document + + + Introduction to Algorithms + +\ +`} +/> diff --git a/docs/03extras/04website/01npm/index.mdx b/docs/03extras/04website/02npm/index.mdx similarity index 100% rename from docs/03extras/04website/01npm/index.mdx rename to docs/03extras/04website/02npm/index.mdx diff --git a/docs/03extras/04website/01npm/install_curl.mp4 b/docs/03extras/04website/02npm/install_curl.mp4 similarity index 100% rename from docs/03extras/04website/01npm/install_curl.mp4 rename to docs/03extras/04website/02npm/install_curl.mp4 diff --git a/docs/03extras/04website/01npm/install_npm.mp4 b/docs/03extras/04website/02npm/install_npm.mp4 similarity index 100% rename from docs/03extras/04website/01npm/install_npm.mp4 rename to docs/03extras/04website/02npm/install_npm.mp4 diff --git a/docs/03extras/04website/02docusaurus/edit_docusaurus.mp4 b/docs/03extras/04website/03docusaurus/edit_docusaurus.mp4 similarity index 100% rename from docs/03extras/04website/02docusaurus/edit_docusaurus.mp4 rename to docs/03extras/04website/03docusaurus/edit_docusaurus.mp4 diff --git a/docs/03extras/04website/02docusaurus/index.mdx b/docs/03extras/04website/03docusaurus/index.mdx similarity index 100% rename from docs/03extras/04website/02docusaurus/index.mdx rename to docs/03extras/04website/03docusaurus/index.mdx diff --git a/docs/03extras/04website/02docusaurus/install_docusaurus.mp4 b/docs/03extras/04website/03docusaurus/install_docusaurus.mp4 similarity index 100% rename from docs/03extras/04website/02docusaurus/install_docusaurus.mp4 rename to docs/03extras/04website/03docusaurus/install_docusaurus.mp4 diff --git a/docs/03extras/04website/03GitHub/index.mdx b/docs/03extras/04website/04GitHub/index.mdx similarity index 100% rename from docs/03extras/04website/03GitHub/index.mdx rename to docs/03extras/04website/04GitHub/index.mdx diff --git a/docs/03extras/04website/03GitHub/push_to_github.mp4 b/docs/03extras/04website/04GitHub/push_to_github.mp4 similarity index 100% rename from docs/03extras/04website/03GitHub/push_to_github.mp4 rename to docs/03extras/04website/04GitHub/push_to_github.mp4 diff --git a/docs/03extras/04website/03GitHub/setup_git.mp4 b/docs/03extras/04website/04GitHub/setup_git.mp4 similarity index 100% rename from docs/03extras/04website/03GitHub/setup_git.mp4 rename to docs/03extras/04website/04GitHub/setup_git.mp4 diff --git a/docs/03extras/04website/03GitHub/setup_ssh_github.mp4 b/docs/03extras/04website/04GitHub/setup_ssh_github.mp4 similarity index 100% rename from docs/03extras/04website/03GitHub/setup_ssh_github.mp4 rename to docs/03extras/04website/04GitHub/setup_ssh_github.mp4 diff --git a/docs/03extras/04website/03GitHub/sighup_github.mp4 b/docs/03extras/04website/04GitHub/sighup_github.mp4 similarity index 100% rename from docs/03extras/04website/03GitHub/sighup_github.mp4 rename to docs/03extras/04website/04GitHub/sighup_github.mp4 diff --git a/docs/03extras/04website/04deploy/deploy.mp4 b/docs/03extras/04website/05deploy/deploy.mp4 similarity index 100% rename from docs/03extras/04website/04deploy/deploy.mp4 rename to docs/03extras/04website/05deploy/deploy.mp4 diff --git a/docs/03extras/04website/04deploy/index.mdx b/docs/03extras/04website/05deploy/index.mdx similarity index 100% rename from docs/03extras/04website/04deploy/index.mdx rename to docs/03extras/04website/05deploy/index.mdx diff --git a/docs/03extras/04website/04deploy/signup_render.mp4 b/docs/03extras/04website/05deploy/signup_render.mp4 similarity index 100% rename from docs/03extras/04website/04deploy/signup_render.mp4 rename to docs/03extras/04website/05deploy/signup_render.mp4