body要素と見出し・段落のタグ【HTMLの書き方入門】

html文書のもう一つの大パート、body要素を作っていきましょう。

body要素とは
テキストの意味を示すタグ

01：下準備
02：見出し(heading)
02：段落(paragraph)

body要素とは

<body> ～</body>の中には、Webページとして表示される内容が入ります。
私達が普段、Webサイトとして見ているのは全て<body>タグ内に書かれている情報なのです。

<body>内で使用されるタグは多種多様です。
題材のページと見合わせながら、基本的なタグを見ていきましょう。

テキストの意味を示すタグ

HTMLマークアップでは、画面上に表示させたいテキストの役割をコンピューターに伝えます。その目印となるのがタグですね。

テキストが「どんな役割」で「どこまでが１グループ」かを示す、見出し・段落・箇条書きなどの基本的なタグを書いていきましょう。

一気に覚える必要はありません。
まずはレッスンと一緒に手を動かして、感覚を掴んでいきましょう。

01：下準備

index.htmlの<body> ～</body>の中に、素材フォルダのcontents.txt内から掲載したいコンテンツをコピー＆ペーストで貼り付けてください。

<html>
  <head>
    <meta charset="utf-8">
    <title>エドべース株式会社</title>
    <meta name="description" content="EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">   
  </head>

  <body>

タイトル：エドべース株式会社
概要：EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。

-----

#エドベース株式会社

ホーム
会社概要
お問い合わせ

＜画像：top.png＞


## 会社理念
### EdTechで人々に力を与えたい

自分の力を100%発揮できてない人はたくさんいると思います。本来持っているポテンシャルを我々のサービス/テクノロジーで開花させること。

眠っている才能を呼び覚まし、社会に貢献できる人材を創造すること。 それが我々のミッションです。


## 自社プロダクト
開発・運営しているプロダクトです

### ビジネスができるオンラインスクールのプラットフォーム
ただのeLearningサービスではありません。誰もがオンラインスクールをかんたんに運営することができます。 講座を販売したり、サブスクリプションサービスを提供することができる今までにない教育プラットフォームです。

https://edbase.jp


### 革新的テストの作成・結果の分析サービス
従来のテスト作成方法は面倒で修正が大変でした。Qeditorは革新的なテスト作成エディターを使って素早くテスト作成ができます。 それだけではなく詳細な分析が可能。素早くクオリティの高いテスト作成のためのツールです。

https://qbase.biz


## Bunner
＜画像：banner.png＞



エドベース株式会社

  </body>
</html>

02：見出し(heading)

HTMLでは、見出しを作るためのタグがあります。
見出し(heading)の頭文字である「h」を使って、h1,h2,h3,h4,h5,h6と６種類の見出しタグが用意されています。
数字が小さいほど、大きな見出しを表します。

見出しタグは基本的に、h1見出しから順番に使っていきます。
hタグで囲むと自動的に文字サイズが変わりますが、「このサイズが丁度いい」とデザイン的な理由でいきなりh5タグを使ったりするのはNG。
タグは機械にコンテンツの構成を伝えるのが第一ですので、文書の流れにそって設定しましょう。

また、h1タグはページの主題を表すのに一度だけ使うのが理想的。
何度も使うと、何をテーマにしたWebページなのか機械にも人間にも伝わりにくくなってしまいます。多用しないようにしましょう。

02：段落(paragraph)

見出しがあれば、その内容が詳しく書かれている文章もあります。
文章は段落ごとに区切って、<p>タグで囲います。
段落を変えずに改行だけを行いたいときには<br>を使います。

題材のサイトを見てみましょう。
文字の部分は下図のように、見出し、段落に分けることができます。

HTMLでマークアップすると、このように書きます。

<body>
  <h1>エドベース株式会社</h1>

  ホーム
  会社概要
  お問い合わせ

  ＜画像：top.png＞

  <h2>会社理念</h2>
  <h3>EdTechで人々に力を与えたい</h3>
  <p>自分の力を100%発揮できてない人はたくさんいると思います。本来持っているポテンシャルを我々のサービス/テクノロジーで開花させること。 </p>
  <p>眠っている才能を呼び覚まし、社会に貢献できる人材を創造すること。それが我々のミッションです。</p>

  <h2>自社プロダクト</h2>
  <p>開発・運営しているプロダクトです</p>

  <h3>ビジネスができるオンラインスクールのプラットフォーム</h3>
  <p>ただのeLearningサービスではありません。誰もがオンラインスクールをかんたんに運営することができます。講座を販売したり、サブスクリプションサービスを提供することができる今までにない教育プラットフォームです。</p>
  <p>https://edbase.jp</p>

  <h3>革新的テストの作成・結果の分析サービス</h3>
  <p>従来のテスト作成方法は面倒で修正が大変でした。Qeditorは革新的なテスト作成エディターを使って素早くテスト作成ができます。それだけではなく詳細な分析が可能。素早くクオリティの高いテスト作成のためのツールです。</p>
  <p>https://qbase.biz</p>


  <h2>Bunner</h2>
  ＜画像：banner.png＞

  <p>エドベース株式会社</p>
</body>

前のレッスン次のレッスンレッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

edbase_sozai.zip