WEB STUDY

ウェブ制作に役立つ知識を発信しています。

HTMLの書き方と基礎について初心者向けに詳しく解説！まずは第一歩を踏み出してみましょう！

2024/05/09

#HTML

ウェブサイトを作ったり更新したり必要になるのがHTMLの知識です。
HTMLと聞くとプログラミング？と思って躊躇してしまったり構えてしまうと思いますが基本はマークアップ言語と言われるものでプログラミングとは少し異なります。
どちらかというと英語を覚えたり、漢字の勉強をするようなイメージになります。
タグと呼ばれる要素を記述したり変更したりすることでHTMLの内容が変更されます。

HMTLとは？

HTML（HyperText Markup Language）はウェブページを作るための言語です。HTMLはタグ（< >で囲まれた部分）を使ってページの構造や内容を表現します。

HTMLの始め方と書き方について

HTMLを書く時にはウェブページの雛形となる型が存在します。
まずは分かりやすいように作業用フォルダを作りましょう。
フォルダ名はhtml_studyにしましょう。


フォルダを作成したら以下の内容をコピーしてテキストエディタに貼り付けましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最初のHTML</title>
</head>
<body>
    
</body>
</html>

そして、ファイル名をindex.htmlとして先ほど作ったフォルダ内に保存してください。
indexはファイル名、.htmlは拡張子と呼びファイルタイプとなっています。


保存したらindex.htmlファイルをブラウザ(ここではウェブ制作に適したGoogle Chromeを使用します。)にドラッグ&ドロップで持っていくか、index.htmlのファイル上で右クリックして、次のアプリケーションで開く→ブラウザを選択すると空のページが開かれます。

保存したファイル(index.html)に書いた内容を一つずつ解説します。

  • <html>: HTML文書の始まりを示します。
  • <head>: 文書に関する情報を含む部分です。
  • <meta>: 文書のメタデータ（文字エンコーディングやビューポート設定など）を指定します。
  • ウェブページの情報やSNS(Instagram、Facebook、X(旧Twitter)などでシェアされた時の画像やページの名称、説明文などの基本情報を記述する箇所になります。
    metaタグについては別の記事で詳しく解説いたします。
  • <title>: ブラウザのタイトルバーに表示される文書のタイトルを定義します。
    基本的にGoogle検索で検索した時のタイトル(例外があります)になります。何文字でも問題ないですか長くても分かりづらくなってしまうため32文字前後で分かりやすいページ名を心掛けます。
  • <body>: 実際のコンテンツを含む部分です。
    ここに各ページを形作るHTMLタグや文章を記述しています。

HTMLタグとは？

HTMLはタグとは開始タグ（<tag>）と終了タグ（</tag>）のペアで構成され、コンテンツをタグで囲みます。
中には終了タグがないものも存在します。
以下ではよく使用するHTMLタグの例を挙げます。

<div></div>
<section></section>
<article></article>
<aside></aside>
<header></header>
<footer></footer>
<main></main>
<a></a>
<img>
<p></p>
<span></span>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<ul></ul>
<li></li>
<table></table>
などがあります。
タグについての詳しい説明はこちらの記事で説明しています。
よかったらご覧ください。

まずはお決まりの表示と画像を表示してみましょう

兎にも角にも実際にブラウザに表示させてウェブサイトを作るとはどういうものか体験してみましょう！
先ほどのindex.htmlを再度テキストエディタで開き、以下のように書き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最初のHTML</title>
</head>
<body>
    <h1>はじめてのHTML学習</h1>
    <div>
        <img src="image.jpg" alt="画像">
    </div>
</body>
</html>

変更が完了したらcmd + s（windowsだったらCtrl + s）を押してファイルを保存します。
その後、html_studyのフォルダにimageと名前の付けたjpg形式の画像を起きます。


完了したらブラウザを再読み込みしてみましょう！
ブラウザに
「はじめてのHTML学習」という文字とhtml_studyのフォルダに保存した画像が表示されましたか？

実際にはこういったような形でHTMLの文書構造を記述してウェブサイトは完成します。
デザインや動きはまた別の機会でお話ししますね。

まずは、ウェブサイトはこうやって作っていくんだ！という成功体験を積み重ねてステップアップしていきましょう！

ウェブ制作の学習ステップ

ウェブサイトを作るとなるとたくさんタグ覚えたり、プログラミングをやらなきゃいけない！と頭がパンクしちゃいそうになりますよね。

私もそうでした！

まず第一に大事なのは「なぜウェブ制作を学びたいのか」と「まず第一歩で作りたいウェブサイトはどんなもの？」といったイメージがあることが大切です。

ウェブ制作を学びたい理由は、
転職であったり、
スキルアップであったり、
興味を持ったからやってみよう！とか
様々な理由があると思います。

どうすれば挫折しないかはまずは自分自身が作ってみたいサイトのお手本を見つけることです。
そうすればそういったサイトを作るためにどのように学習手順を踏めばいいかの第一歩が踏み出せます。

学習本にあるドリルを1から進めても実務で使える力はそんなにつけることができません。
もちろん基礎知識は付くのでやるに越したことはないですが、まずは成功体験を積み上げていくことが大事です。

そこで当社ではよく使うウェブレイアウトの例題をまとめた記事を投稿しています。
まずはそちらを覗いてみてください。
使えるレイアウトを組み合わせて、一つのページにするだけでも学習本を0からやるより基礎力がついてきます。

そして、タグの意味やなぜそうなるのかといったことは、一旦置いておいてまずは手を動かして実際に自分の目で見てみる癖をつけましょう！
参考にあるものを自分のパソコンのテキストエディタで保存して、
ブラウザで表示を確かめてみて、実際の保存したファイルにはなにが書いてあるのかを見てみるだけでもステップアップになります。
そうした小さな積み重ねがウェブ制作者になるための力となっていきますよ！
ぜひ、参考にしてみてくださいね！