HTMLを編集する

テンプレートを使用

今回はHTML,CSS,JavaScriptのみの最小限のプロジェクトで説明するためにテンプレートを用意しました。

以下のリンクをクリックすると、テンプレートが適用された状態でboltプロジェクトが作成されます。

https://bolt.new/github.com/zundemy/minimal-web-template

以下のような画面になればokです。

HTMLとは

HTML（HyperText Markup Language）は、Webページの構造を定義するための言語です。タグと呼ばれる要素を使って、テキストや画像などのコンテンツを配置します。

HTMLの基本構造

HTMLの最も基本的な形は以下のようなものです。

開始タグと終了タグの間にコンテンツを記述し、このセットをHTML要素と呼びます。

開始タグは< >、終了タグは</ > で要素名（この場合は大見出しを表す h1 ）を囲んでいます。

HTMLのテンプレート

まずはテンプレートのファイルにどんなことが書いてあるか見てみましょう。

boltのCodeタブから、index.htmlファイルを選択して下さい。

以下のようなソースコードになっています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>minimal-web-template</title>
    <link rel="stylesheet" href="style.css" />
    <script type="module" src="main.js"></script>
  </head>

  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

以下はこのファイルの内容がHTMLであることを示すためのものです。

<!DOCTYPE html>
<html>

</html>

bodyタグの中にブラウザに表示するものを記述し、 headタグには画面には表示しないメタデータを記述します。

<!DOCTYPE html>
<html>
  <head>
    <!-- 画面に表示しないメタデータを記述 -->
  </head>

  <body>
    <!-- 画面に表示する内容を記述 -->
  </body>
</html>

テンプレートのhead タグには以下のような内容が記述されています。

<head>
  <!-- 文字コードにUTF-8を指定 -->
  <meta charset="UTF-8" />

  <!-- スマホで表示崩れしないようにviewportの設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- ブラウザのタブや検索エンジンに表示されるタイトルを指定 -->
  <title>minimal-web-template</title>

  <!-- CSSファイルstyle.cssを読み込み -->
  <link rel="stylesheet" href="style.css" />

  <!-- JavaScriptファイルmain.jsを読み込み -->
  <script type="module" src="main.js"></script>
</head>

テンプレートのbodyタグにはh1タグ（1番大きな見出しを表示するHTMLタグ）でHello, world!という文字を表示しています。

<body>
  <h1>Hello, world!</h1>
</body>

HTMLを書いてみよう

ここから実際にindex.htmlを編集してみましょう。

見出し

Webページの見出しは<h1>-<h6>で表します。

以下のコードをbodyタグの中に書いてみましょう。

<h1>1番目に大きな見出し</h1>
<h2>2番目に大きな見出し</h2>
<h3>3番目に大きな見出し</h3>
<h4>4番目に大きな見出し</h4>
<h5>5番目に大きな見出し</h5>
<h6>6番目に大きな見出し</h6>

h1が1番大きい見出しで、h6が1番小さい見出しです。

hはHeadingのhです。

参考 :<h1>-<h6>: HTML の見出し要素

段落

Webページの見出しは<h1>-<h6>で表します。

以下のコードをbodyタグの中に書いてみましょう。

<p>これはテキストの最初の段落です。これはテキストの最初の段落です。これはテキストの最初の段落です。これはテキストの最初の段落です。</p>
<p>これはテキストの二番目の段落です。これはテキストの二番目の段落です。これはテキストの二番目の段落です。これはテキストの二番目の段落です。</p>

段落が分かれると改行されます。

pはParagraphのpです。

参考 :<p>: 段落要素

リンク

他のページへのリンクを追加してみましょう。

<a href="https://google.com">サンプルサイト</a>

HTML要素はhref="https://google.com"のように属性 (Attribute) を持つこともできます。

aタグの場合はhref属性にURLを指定することでリンクを追加することができます。

aはAnchorのaです。

参考 :<a>: アンカー要素

画像

画像を追加してみましょう。publicフォルダに画像を配置して、以下のコードを追加してください。

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" alt="Firefox icon" />

src属性に画像のリンク、alt属性に画像がロード出来なかった場合の代替テキストを指定します。

正しく追加すると、Firefoxのログが表示されます。

自分のPCから画像をアップロードして表示することもできます。以下のようにboltのFilesエリアに画像をドラッグ&ドロップして下さい。

src属性にアップロードした画像のファイル名を指定すると表示されます。

<img src="firefox-icon.png" alt="Firefox icon" />

参考 :<img>: 画像埋め込み要素

参考資料

ここではよく使用するタグを抜粋して紹介しました。各HTMLタグの書き方を忘れた場合や、他のHTMLタグを知りたい人は以下を参考にして下さい。

MDN Web Docs - HTML 要素リファレンス

たくさんあってびっくりするかもしれませんが、エンジニアでも全て覚えていないので安心して下さい。

ひとまずはここで紹介したものを押さえて貰えばokです。

Zundemy