最低限のHTMLファイルを作る

2019/10/21 2022/10/26

はじめに
ソフトを起動する
HTMLを書く
最低限のhtmlコード(コピペ可）
ブラウザで表示する
最後に

はじめに

このページは土気コンピュータ部員向けに作られているところがあります。今回は学校のパソコンの中に入っている「Crescent Eve」というソフト（エディタ）を使ってWebページを作っていきます。
HTMLってなんぞや？という方は「HTMLとは」のページを先に読んでください

ソフトの起動

【1】いつも使っているフォルダから、「Crescent Eve」というフォルダを探してください。見つけたらそれをダブルクリックしてください！

【2】その中にある「Eve.exe」をダブルクリックします。

すると↓のようなウィンドウが出てきます。

ここにhtmlを書き込んでいきます。

HTMLを書く

１行目からネチネチと書いていきますよぉ！！
どのタグの中に、何を書くのか これを意識することが大切です。コピペではなく、手を動かしてみてくださいね！
「最低限のhtmlコード(コピペ可）」をクリックすれば完成コードが見れます。

step1

【1】「DOCTYPE宣言」をする。

<!DOCTYPE html>

これはブラウザに向けて「これからhtmlを書きますよぉ！」と伝えています。

step2

【2】「htmlタグ」を作る

<!DOCTYPE html>
<html>
</html>

「htmlタグの中」にhtmlを書かなければなりません。改行すると、あとあと見やすくなります。 最後のスラッシュを忘れないように気をつけてください。

step3

【3】「headタグ」と「bodyタグ」を作る

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

headタグの中には「Webページに表示されない情報」を書きます。

bodyタグの中には「Webページに表示される情報」を書きます。

なぜ字下げ(行の先頭に空白を入れる) をするのかと言うと、見やすいからです。この方が「headタグ」と「bodyタグ」は、「htmlタグ」の中に入っているということが、視覚的にわかりやすいと思います。

step4

【4】「headタグ」の中に、メタデータを記述する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

今回で言うメタデータというのは、「HTML文書がどういったものなのかを示す」情報(データ)です。今回の場合ですと、「HTMLがutf-8で書かれた文書」だと示しています。これを書かないと、文字化けする可能性があります。

step5

【5】「headタグ」の中に、titleタグを作る

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

titleタグは、このページで言うところの

「最低限のHTMLファイルを作る」という部分になります。

step6

【6】titleタグの中身を書く。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
  </head>
  <body>
  </body>
</html>

何を書くかは自由に決めてください。私は「はじめてのHTML」というタイトルにしました。

step7

【7】「headタグ」の中に、メタデータを記述する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
  </body>
</html>

これは、レスポンシブデザイン(パソコンやスマホから見ても見やすい) に対応させるために必要な記述です。スマートフォンの普及状況を考えると、最低限必要な記述です

「content="width=device-width」は、コンテンツの幅はデバイスの幅に設定することも表し、「initial-scale=1」は、画面の拡大率が1倍であることを表しています。

他にもユーザに拡大を許可するかなどの設定がここでできます。詳しく気になる方は調べてみてください。

step8

【8】「bodyタグ」の中に、h1タグを作る

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <h1></h1>
  </body>
</html>

今回はbodyタグの中に書く ということに注意してください。 h1タグというのは見出しを意味します。

step9

【9】h1タグの中身を書く

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <h1>一番大きな見出しです</h1>
  </body>
</html>

何を書くかは自由に決めてください。私は「一番大きな見出しです」という見出しにしました。（ややこしいww）

step10

【10】「bodyタグ」の中に、pタグを作り、その中身を書く。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <h1>一番大きな見出しです</h1>
      <p>
        ここに段落を書きます！！
      </p>
  </body>
</html>

※さっきまで2step分あったものを、今回はひとつにまとめました！

中身は段落となります pはparagraphの略です。段落は見出しの中にあるものですから、 h1タグより一段下げました。

step11

【11】確認作業などをする。
私の画面では

となっています。
※今回はわざと間違った記述をしています。ページ内のコードは正しいので安心してください。これが正しいがチェックしましょう！

ウィンドウ上部の「ツール」をクリック。

そして出てきた「文法チェック」をクリックします。

ちなみにこれらの手順が面倒臭いなぁと思う場合は、「ツール」とかクリックする必要は一切なく、ただ「F7キー」を押せば良いだけです。 え？先に言えって？？ｗｗこういった手順も大事なのです！！

そして、何も間違っていな場合は

となります。

今回は間違った記述をしているので

「エラー５」となりました。

エラー文をひとつずつ見ていきます。
「9行: 要素h1はこの位置には置けません。」
「９行」という部分から、９行目に問題があることがわかります。「要素h1はこの位置には置けません」から、 h1の位置がおかしいということがわかります。それと
「13行: /bodyの前に、/H1が必要です。
(⇒9行目参照)」
　「13行: /bodyの前に、/H1が必要です。
(⇒9行目参照)
これらから、９行目からの開始タグh1が２つ閉じられていない、という事を示しています。
よって9行目でおかいしのは

となります。「/(スラッシュ)」が抜けていました。タグの閉じ忘れには気を付けましょう。こうして問題を解決してみたら、その都度「Ｆ７キー」を押す、ということをおすすめします。

次に
「10行: 要素名がありません。」
10行目の要素名がおかしいと... まず要素名というのは、
<p></p> <h1></h1> この太字の部分です。
タグ（＜＞）の中の「head」や「body」「br」すべて要素名です。

話を戻しますと、１０行目の要素名がない... いや～<ｐ>普通にあるじゃん！何も間違ってないと思いますよね？しかし、間違っていると言われている。そして、
「12行: /pに対応する開始タグが見つかりません。」
完全にブラウザが１０行目の<ｐ>を無視してますね！よく見てください！ 「ｐ」が全角になってます これが間違いの元でした。 全角と半角の間違いに気を付けてくださいね！

これら２つを修正すると、「無事エラー０」となりました。

step12

【12】保存をする。

ウィンドウ上部の「ファイル」をクリック。

「名前を付けて保存」をクリック。

「ファイル名」は自由に決めてください。

「ファイルの種類」は「HTMLファイル」としてください。

「文字コード」は「UTF-8」としてください。

このあとは、いつも使っているフォルダのどこかに保存してくださいね！
「いつも使っているフォルダ」の中に
「htmlフォルダ」を新しく作って、その中に保存するもよしだと思います。

あともうひと頑張りです！！このあとはブラウザで表示してみます。

最低限のhtmlコード(コピペ可）

「HTMLを書く」よりコードの解説が見れます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのHTML</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <h1>一番大きな見出しです</h1>
      <p>
        ここに段落を書きます！！
      </p>
  </body>
</html>

この記事を書いてから２年後にこのコードを見ると本当に最低限だなと感じます。SEO対策の面を考えるとcanonical（正規URL)の指定した方が良いななど思うところはあります。その記事を書きたい気持ちもありますが、このサイトを上位表示させるこも出来ないような人間に書く資格があるのか疑問です。